diff --git a/openspec/changes/add-inline-html-renderer/.openspec.yaml b/openspec/changes/add-inline-html-renderer/.openspec.yaml
new file mode 100644
index 0000000000000..5e6d53a3fdaa4
--- /dev/null
+++ b/openspec/changes/add-inline-html-renderer/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-24
diff --git a/openspec/changes/add-inline-html-renderer/design.md b/openspec/changes/add-inline-html-renderer/design.md
new file mode 100644
index 0000000000000..55eb767ae1879
--- /dev/null
+++ b/openspec/changes/add-inline-html-renderer/design.md
@@ -0,0 +1,99 @@
+## Context
+
+HTML artifact previews are rendered by `HTMLPreview` (`code-block-preview/html-preview.ts`), which delegates to `linkIframe` (`code-block-preview/iframe-container.ts`). Today `linkIframe`:
+
+1. Points the iframe at `https://affine.run/static/container.html`.
+2. Adds a permissive sandbox including both `allow-scripts` **and** `allow-same-origin`.
+3. On `onload`, posts the artifact HTML to the remote container via `contentWindow.postMessage(html, 'https://affine.run')`.
+
+The remote page is the isolation boundary: it runs on the `affine.run` origin, so artifact scripts execute cross-origin to the host app. The cost is a hard runtime dependency on affine.run for something that is otherwise a purely local render. This renderer is shared by two call sites — the chat code-artifact preview (`ai-tools/code-artifact.ts` → `<affine-html-preview>`) and inserted `affine:code` blocks with `preview: true` in docs (`CodeBlockHtmlPreview` extension) — so both benefit from a local replacement.
+
+The only existing local path (`adapter-panel/.../adapter-panel-body.ts`) uses `<iframe srcdoc sandbox="allow-same-origin">`, which cannot run scripts and is therefore not interactive.
+
+Constraints: artifact HTML is untrusted (model-generated). The host app holds auth tokens and workspace data in its origin. The renderer runs in both web and Electron desktop builds.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Render artifacts with zero dependency on a remote container origin (works offline / self-hosted).
+- Preserve interactivity: scripts, forms, input, pointer.
+- Isolate the artifact from the host origin at least as strongly as the current remote flow.
+- Size the preview to content instead of a fixed 544px, with a bounded max and an expand affordance.
+- Preserve artifact runtime state across host re-renders that don't change the HTML.
+
+**Non-Goals:**
+
+- Changing the `code_artifact` server tool or its `{ title, html, size }` result contract.
+- Guaranteeing that artifacts which fetch their _own_ external resources (CDN scripts, remote fonts) work offline — that depends on the artifact, not the container. Only the _container_ dependency is removed.
+- Migrating `adapter-panel-body.ts` to the new renderer (possible follow-up).
+- Persisting artifact state across full page reloads or serializing it to storage.
+
+## Decisions
+
+### 1. Deliver HTML via `srcdoc`, not a remote `src`
+
+Set `iframe.srcdoc = wrappedHtml` and remove the remote `src` navigation and the cross-window `postMessage` handshake. `srcdoc` needs no URL lifecycle management (unlike `blob:`), keeps everything in-page, and — combined with the sandbox below — yields an opaque origin.
+
+_Alternatives:_ `blob:`/`data:` URL (also opaque under sandbox, but adds object-URL lifecycle and, for `data:`, size/encoding overhead). Keeping the remote container (rejected: the whole point is to drop it).
+
+### 2. Sandbox with an opaque origin — `allow-scripts` **without** `allow-same-origin`
+
+Sandbox flags: `allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock`. Deliberately **omit `allow-same-origin`**.
+
+Without `allow-same-origin` a sandboxed frame gets a unique opaque origin: scripts run, but the frame is cross-origin to the host, so it cannot touch the host DOM, and `localStorage`/`sessionStorage`/`document.cookie` resolve to the guest's own opaque (empty) origin — it cannot read host storage or auth. This is strictly _more_ isolated than today's `allow-same-origin` remote flow. (The browser also refuses to treat `allow-scripts allow-same-origin` as sandboxed when frame and embedder share an origin, which is exactly the escape we avoid by dropping the flag.)
+
+_Trade-off:_ guest `localStorage` throws / is unavailable — acceptable for one-shot artifacts, and matches what a foreign-origin container already implied.
+
+### 3. Host bootstrap injected into the wrapped document (sizing + handshake over `postMessage`)
+
+Because the frame is cross-origin, the host cannot measure it directly. A small bootstrap script is injected into the artifact HTML (before `</body>`, with a head/append fallback) that:
+
+- observes document height via `ResizeObserver` on `documentElement`/`body`,
+- posts `{ source: 'affine-artifact', type: 'resize', height }` to `parent` with target origin `'*'` (guest is opaque, so it cannot know the parent origin), and
+- posts a `ready` message on load and an `error` message from `window.onerror`.
+
+The host (`HTMLPreview`) listens for `message`, and **validates `event.source === this.iframe.contentWindow`** (the security check that replaces origin checking for an opaque frame), then sets the iframe height clamped to `[min, maxHeight]`. Direct DOM measurement of the frame is never attempted.
+
+Injection wraps rather than replaces the artifact's own document so model output (`<!DOCTYPE html>…</html>` from `preprocessHtml`) renders unchanged.
+
+### 4. Content-aware height, but only where it applies
+
+**Discovered during implementation:** `affine-html-preview` has two call sites with different sizing contracts.
+
+1. **Chat code-artifact** renders inside `artifacts-preview-panel` — a full-size panel (`position: absolute`, `height: calc(100% - 52px)`). `code-artifact.ts` deliberately stretches `.html-preview-iframe` to `height: 100%` to fill it, so the hard-coded `544px` is already overridden there.
+2. **Doc `affine:code` block** with `preview: true` renders inline in document flow. This is where `544px` is actually live and where content-aware sizing is the real win.
+
+Naively setting an inline `height` would be a regression: inline styles beat stylesheet rules, so it would override the panel's `height: 100%` and break the chat layout.
+
+**Decision:** `HTMLPreview` gains an `autoResize` property, defaulting to `true`. Doc code blocks auto-size to content, clamped to `[ARTIFACT_MIN_HEIGHT, ARTIFACT_MAX_HEIGHT]` with internal scrolling beyond the max. `code-artifact.ts` passes `.autoResize=${false}` so the panel keeps filling exactly as today. Resize messages are still parsed in both modes; only the height application is gated.
+
+**Max height / expand:** clamp at `640px`. No new expand control is built — the chat path already has the full preview panel and doc code blocks have their own block affordances, so a second competing control would be redundant. (This retires task 4.4.)
+
+### 5. Persist state by keeping the iframe instance stable
+
+Two mechanisms:
+
+- **Guard reloads:** `HTMLPreview` reloads (`linkIframe`) only when the normalized HTML actually changes — track the last-rendered string and skip `_link()` on unrelated `updated()` calls.
+- **Keep the element mounted:** in `code-artifact.ts`, toggling Code⇄Preview keeps the `<affine-html-preview>` element in the DOM (hidden, not removed) so the iframe — and its runtime state — survives. Key the preview by `toolCallId` so chat message re-renders reuse the same element instead of recreating it.
+
+## Risks / Trade-offs
+
+- **Content-Security-Policy blocks `srcdoc` scripts** → Verify the app CSP (`frame-src`, `sandbox`, `script-src`) permits sandboxed `srcdoc` frames with scripts in both web and Electron (`webPreferences`/`webview`). If blocked, add the minimal directive; capture in Open Questions before implementation lands.
+- **Guest storage APIs throw under opaque origin** → Document as expected; artifacts relying on `localStorage` degrade, not crash. The injected bootstrap must not itself use storage.
+- **`postMessage` spoofing** → Host accepts resize/ready/error only when `event.source` matches the specific iframe `contentWindow` and the payload carries the `affine-artifact` marker; height is clamped, so a hostile value cannot blow up layout.
+- **Loss of a real reason for the remote container** → If affine.run's container.html provided behavior beyond isolation (e.g. shared polyfills), confirm before removal. Current code shows only postMessage-render, so none is assumed.
+- **Two call sites** (chat preview + inserted doc code blocks) share `affine-html-preview` → verify both after the change; the doc-block path has no toggle but must still size and isolate correctly.
+
+## Migration Plan
+
+- Change is internal to the renderer; the `code_artifact` contract and both call sites' public shape are unchanged. Deploy is a straight replacement of `linkIframe`/`HTMLPreview` internals.
+- **Rollback:** revert the frontend commit — restores the remote-container behavior with no data migration.
+- Optionally gate behind a feature flag during rollout to A/B the local renderer against the remote container; not required given the clean revert path.
+
+## Open Questions
+
+- ~~Exact `maxHeight` for the bounded preview, and whether expand opens a fullscreen modal or an in-place expansion.~~ **Resolved:** `640px` max; no new expand affordance (see Decision 4).
+- ~~Does the current app CSP already permit sandboxed `srcdoc` script execution in web **and** Electron, or is a directive change needed?~~ **Resolved:** yes, no change needed — no `script-src`/`frame-src` policy exists on the host document in either build; Electron only sets `frame-ancestors`, which does not apply to `srcdoc` children. Recorded in tasks 1.1/1.2.
+- Should this change also retire the browser "not supported / download the Desktop App" fallback entirely, or keep it for unrelated failure modes?
+- Should `adapter-panel-body.ts`'s script-less `srcdoc` path be migrated in this change or a follow-up? (Currently Non-Goal.)
diff --git a/openspec/changes/add-inline-html-renderer/proposal.md b/openspec/changes/add-inline-html-renderer/proposal.md
new file mode 100644
index 0000000000000..c0cb059757f7b
--- /dev/null
+++ b/openspec/changes/add-inline-html-renderer/proposal.md
@@ -0,0 +1,33 @@
+## Why
+
+The copilot's HTML artifact preview renders untrusted, model-generated HTML by loading a **remote** page — `https://affine.run/static/container.html` — into an iframe and posting the HTML into it (`iframe-container.ts`). The remote page is the security isolation boundary: it runs the artifact's scripts on a foreign origin so they can't touch the host app. This couples every preview to affine.run being reachable: a self-hosted / requesty-fork deployment, an offline desktop session, or any network hiccup produces a blank or fallback ("download the Desktop App") preview. The only fully-local alternative in the codebase (`adapter-panel-body.ts`) uses `srcdoc` with `sandbox="allow-same-origin"` and therefore **cannot run scripts** — so it is not interactive. We want an interactive HTML renderer that needs no remote container.
+
+## What Changes
+
+- **Replace the remote container with a self-contained inline renderer.** `linkIframe` stops pointing the iframe at `https://affine.run/static/container.html` and instead renders the artifact HTML locally via `srcdoc` (host-wrapped document), with **no** dependency on any external origin.
+- **Keep it interactive while isolated.** The sandbox uses `allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock` but deliberately **omits `allow-same-origin`**, giving the frame an opaque origin. Scripts and forms run, but the artifact cannot read the host app's DOM, storage, cookies, or auth tokens. This is a **security tightening** relative to the current remote flow's `allow-same-origin`.
+- **Content-aware sizing.** A tiny host bootstrap injected into the wrapped document measures content height (`ResizeObserver`) and posts it to the parent, which sizes the iframe to content (with a sane max + expand/fullscreen affordance) instead of the fixed 544px. Because the frame is cross-origin, all sizing goes over `postMessage`, never direct DOM measurement.
+- **State persistence across re-renders.** The rendered iframe is cached/keyed by artifact identity so toggling Code⇄Preview, or the chat message re-rendering, does not reload the frame and discard the artifact's runtime state.
+- **Removed dependency:** the hard runtime coupling to `affine.run/static/container.html`. Renderer now works offline, self-hosted, and in the desktop app uniformly; the browser "not supported / download Desktop App" fallback path is no longer needed for this reason.
+
+## Capabilities
+
+### New Capabilities
+
+- `inline-html-renderer`: Model-generated HTML artifacts render in a fully local, self-contained sandboxed iframe (no remote container origin) that executes scripts and forms in an isolated opaque origin, sizes itself to its content, and preserves its runtime state across host re-renders.
+
+### Modified Capabilities
+
+<!-- None: there are no existing specs under openspec/specs/. The current renderer has no spec of record. -->
+
+## Impact
+
+- **Code (frontend only):**
+  - `packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/iframe-container.ts` — `linkIframe` rewritten: build the host-wrapped `srcdoc`, set the isolated sandbox, drop the remote `src` + cross-window `postMessage(html, 'https://affine.run')` handshake.
+  - `packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/html-preview.ts` — `HTMLPreview`: content-aware height (replace fixed `544px`), `postMessage` height listener, state/`error`/`fallback` handling; keep the iframe element stable across `updated`.
+  - `packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts` — preview caching keyed by artifact id so Code⇄Preview toggling and message re-render don't reload; sizing hooks.
+  - A new host bootstrap/wrapper module (e.g. `code-block-preview/host-bootstrap.ts`) producing the injected sizing/state script and the wrapped document.
+- **Security / policy:** guest runs on an opaque origin (no `allow-same-origin`). Confirm the app **Content-Security-Policy** (`frame-src`, `sandbox` directives) permits `srcdoc` frames with scripts in both web and Electron; document any CSP adjustment needed.
+- **No changes** to the copilot server, native crates, or the `code_artifact` tool contract (`{ title, html, size }` is unchanged).
+- **Reuse:** the same local renderer can replace the script-less `srcdoc` path in `adapter-panel-body.ts` (optional follow-up, out of scope here).
+- **Tests:** frontend unit/integration for `linkIframe` wrapping + sandbox flags and the sizing/persistence behavior; manual verification of an interactive artifact (script + form) rendering offline.
diff --git a/openspec/changes/add-inline-html-renderer/specs/inline-html-renderer/spec.md b/openspec/changes/add-inline-html-renderer/specs/inline-html-renderer/spec.md
new file mode 100644
index 0000000000000..f6cbd541054d5
--- /dev/null
+++ b/openspec/changes/add-inline-html-renderer/specs/inline-html-renderer/spec.md
@@ -0,0 +1,87 @@
+## ADDED Requirements
+
+### Requirement: Local, self-contained rendering
+
+The renderer SHALL display model-generated HTML artifacts using only local browser resources, with no dependency on any external origin or remotely hosted container page. It SHALL NOT load `https://affine.run/static/container.html` or any other network URL to display an artifact, and SHALL NOT depend on cross-window `postMessage` to a foreign origin to deliver the artifact HTML.
+
+#### Scenario: Renders with no network access
+
+- **WHEN** an HTML artifact is previewed while the browser has no network connectivity (offline, or a self-hosted deployment that cannot reach affine.run)
+- **THEN** the artifact renders fully and interactively
+- **AND** no request is made to `affine.run` or any external host to render it
+
+#### Scenario: Artifact HTML delivered locally
+
+- **WHEN** the renderer mounts an artifact
+- **THEN** the artifact HTML is provided to the iframe via a local mechanism (`srcdoc` or an in-page `blob:`/`data:` document), not by navigating the iframe to a remote `src`
+
+### Requirement: Interactive execution in an isolated sandbox
+
+The renderer SHALL execute the artifact's scripts and forms inside a sandboxed iframe whose origin is opaque to the host application. The sandbox SHALL grant `allow-scripts` and form/interaction permissions, and SHALL NOT grant `allow-same-origin`, so the artifact cannot access the host application's DOM, storage, cookies, or authentication state.
+
+#### Scenario: Scripts run
+
+- **WHEN** an artifact contains a `<script>` that mutates its own DOM (e.g. a counter button, a canvas animation)
+- **THEN** the script executes and the artifact behaves interactively within the preview
+
+#### Scenario: Forms and input work
+
+- **WHEN** an artifact contains form controls (text inputs, buttons, selects)
+- **THEN** the user can type into, focus, and submit them within the sandbox
+
+#### Scenario: Host isolation is preserved
+
+- **WHEN** an artifact script attempts to read `window.parent`, the host's `localStorage`/`cookie`, or the host DOM
+- **THEN** the access is blocked by the opaque cross-origin sandbox and the host application state is unaffected
+
+### Requirement: Content-aware sizing
+
+The renderer SHALL size the preview to the artifact's content rather than a fixed height. Because the frame is cross-origin, height SHALL be reported by an in-frame host bootstrap over `postMessage`, and the host SHALL NOT attempt direct DOM measurement of the frame. The renderer SHALL apply a sensible maximum height and provide an expand/fullscreen affordance for taller content.
+
+#### Scenario: Short content is not over-tall
+
+- **WHEN** an artifact's rendered content is shorter than the previous fixed height
+- **THEN** the iframe shrinks to fit the content
+
+#### Scenario: Content growth is tracked
+
+- **WHEN** an artifact's content height changes after load (e.g. script reveals more content)
+- **THEN** the in-frame bootstrap reports the new height and the host resizes the iframe accordingly
+
+#### Scenario: Very tall content is bounded
+
+- **WHEN** an artifact's content exceeds the configured maximum preview height
+- **THEN** the iframe is capped at the maximum and the artifact remains scrollable, with an expand/fullscreen control available
+
+### Requirement: State persistence across host re-renders
+
+The renderer SHALL preserve a rendered artifact's live runtime state across host-driven re-renders that do not change the artifact HTML — including toggling between Preview and Code views and chat message list re-renders — by keeping the same iframe instance rather than reloading it.
+
+#### Scenario: Toggling Code/Preview keeps state
+
+- **WHEN** the user interacts with an artifact (e.g. increments a counter), switches to the Code view, then switches back to Preview
+- **THEN** the artifact's runtime state is retained (the counter shows its prior value) and the iframe is not reloaded
+
+#### Scenario: Message re-render does not reset the artifact
+
+- **WHEN** the surrounding chat message re-renders while the artifact HTML is unchanged
+- **THEN** the iframe is not reloaded and the artifact's runtime state is preserved
+
+#### Scenario: Changed HTML reloads
+
+- **WHEN** the artifact HTML content itself changes
+- **THEN** the renderer reloads the frame with the new content
+
+### Requirement: Graceful failure
+
+The renderer SHALL surface a clear, local error state when an artifact cannot be rendered, and SHALL NOT present a fallback that instructs the user to install another application solely because a remote container was unreachable.
+
+#### Scenario: Malformed artifact
+
+- **WHEN** the artifact HTML is empty or cannot be wrapped/rendered
+- **THEN** the renderer shows a local error/empty state rather than a blank frame or a crash
+
+#### Scenario: No remote-dependency fallback
+
+- **WHEN** the browser lacks network access
+- **THEN** the renderer does not show a "feature not supported / download the Desktop App" message attributable to a missing remote container, because rendering no longer depends on one
diff --git a/openspec/changes/add-inline-html-renderer/tasks.md b/openspec/changes/add-inline-html-renderer/tasks.md
new file mode 100644
index 0000000000000..e20b8c3b46c5e
--- /dev/null
+++ b/openspec/changes/add-inline-html-renderer/tasks.md
@@ -0,0 +1,67 @@
+## 1. Verify constraints before coding
+
+- [x] 1.1 Confirm the app Content-Security-Policy permits sandboxed `srcdoc` frames with script execution in the **web** build (`frame-src`/`script-src`/`sandbox`); note any directive change needed.
+  - **Finding: no change needed.** No `script-src`/`frame-src` CSP is applied to the app document — no `<meta http-equiv>` in any frontend HTML template, and no helmet/CSP middleware in the backend server. A `srcdoc` iframe _inherits the embedder's_ CSP; with no restrictive host policy the inherited policy is empty, so sandboxed `srcdoc` scripts execute.
+  - **Risk recorded:** if a `script-src` CSP is ever introduced on the host document, `srcdoc` artifacts inherit it and would break. A future strict CSP must add an explicit allowance for the artifact frame.
+- [x] 1.2 Confirm the same in the **Electron desktop** build (`webPreferences` / `<webview>` sandbox); note any change needed.
+  - **Finding: no change needed.** The only CSP Electron sets is `frame-ancestors`, via `ensureFrameAncestors` in `packages/frontend/apps/electron/src/main/protocol.ts:176`. `frame-ancestors` governs who may embed _us_, not what we may embed, and does not apply to `srcdoc` children. Renderer `webPreferences` (`sandbox: true, contextIsolation: true, nodeIntegration: false` — `web-preferences.ts:7`) constrain the renderer process, not child-iframe capability. No `webviewTag` usage anywhere; we use a plain `<iframe>`.
+- [x] 1.3 Confirm affine.run's `container.html` provides only postMessage-render (no shared polyfills/behavior we must replicate); record the finding.
+  - **Finding: confirmed — nothing to replicate.** Fetched (HTTP 200, 773 bytes). The entire page is one inline script: `window.addEventListener('message', …)` → if `event.data` is a string, `document.open(); document.write(event.data); document.close();` then removes the listener. No polyfills, no stylesheets, no APIs exposed to the artifact.
+  - **Notes that shape the implementation:** (a) it performs **no origin check** on the incoming message, so the local replacement is strictly more defensive; (b) it never posts anything _back_, so there is no existing ready/error/resize handshake — which is why height is hard-coded to `544px` and why `html-preview.ts` optimistically sets `state = 'finish'` as soon as `linkIframe` returns rather than on real render success.
+
+## 2. Host bootstrap + wrapper
+
+- [x] 2.1 Add `code-block-preview/host-bootstrap.ts`: a function that injects the sizing/handshake script into artifact HTML (before `</body>`, with head/append fallback) and returns the wrapped document.
+  - `wrapArtifactHtml()` injects before the **last** `</body>`, falling back to the last `</html>`, then a plain append. Using the last closing tag means prose or escaped markup mentioning `</body>` cannot displace the bootstrap (covered by a decoy test).
+- [x] 2.2 Bootstrap script: `ResizeObserver` on `documentElement`/`body` → `parent.postMessage({ source: 'affine-artifact', type: 'resize', height }, '*')`; emit `ready` on load and `error` from `window.onerror`. Must not use storage APIs.
+  - Also de-duplicates: only posts `resize` when the measured height actually changes.
+
+## 3. Rewrite `linkIframe` (iframe-container.ts)
+
+- [x] 3.1 Remove the remote `src = 'https://affine.run/static/container.html'` navigation and the `onload` cross-window `postMessage(html, 'https://affine.run')` handshake.
+  - Confirmed empirically: before the change the happy-dom test run attempted real network fetches of `https://affine.run/static/container.html`; after the change that noise is gone.
+- [x] 3.2 Set `iframe.srcdoc` to the wrapped document from the host bootstrap.
+- [x] 3.3 Set sandbox to `allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock` — **omit `allow-same-origin`**.
+  - `sandbox.value` is reset before adding flags so a re-link cannot inherit a stale `allow-same-origin`; a regression test asserts this across re-links.
+
+## 4. `HTMLPreview` (html-preview.ts)
+
+- [x] 4.1 Replace fixed `544px` height with content-driven height clamped to `[min, maxHeight]`; internal scroll beyond max.
+  - **Scoped by discovery:** gated behind a new `autoResize` property (default `true`). See design Decision 4 — the chat preview panel intentionally stretches the frame to `height: 100%`, and an inline height would override that stylesheet rule and break the panel. `code-artifact.ts` passes `.autoResize=${false}`.
+  - The `544px` CSS default is kept as the pre-measurement value, so a preview whose bootstrap never runs degrades to exactly today's behavior instead of collapsing.
+- [x] 4.2 Add a `message` listener that accepts `resize`/`ready`/`error` only when `event.source === this.iframe.contentWindow` and the `affine-artifact` marker is present; clamp height; drive `loading`/`finish`/`error` state from the handshake.
+  - Decision logic extracted to a pure `resolveGuestMessage(event, frame, { autoResize })` so it is testable (see 6.2).
+  - **Deviation, deliberate:** a guest `error` does **not** flip the preview to the error state. Model-generated artifacts commonly throw benign script errors (e.g. a missing CDN asset) while still rendering; hiding the render would be a regression. Guest errors are logged instead. The `error` state remains for `linkIframe` failure.
+  - **Deviation, deliberate:** the frame is revealed on link rather than waiting for `ready`. If the bootstrap never runs (blocked script, exotic artifact), waiting would hide the artifact forever. `ready` still confirms the state.
+- [x] 4.3 Guard reloads: track the last-rendered normalized HTML and call `_link()` only when it actually changes (skip unrelated `updated()` calls).
+  - Extracted to a pure `decideLink(next, rendered, isShowing)` returning `empty | skip | link`.
+- [x] ~~4.4 Add an expand/fullscreen affordance for content beyond `maxHeight`.~~ **Retired by decision** (design Decision 4): the chat path already has the full preview panel and doc code blocks have their own affordances, so a second competing control would be redundant. Content beyond `640px` scrolls internally.
+- [x] 4.5 Remove/relax the remote-container "not supported / download Desktop App" fallback that was attributable to an unreachable container (keep only for genuine unsupported cases, if any).
+  - The `fallback` state now only fires for empty HTML, so its copy became the neutral empty state "Nothing to preview yet."
+
+## 5. Code-artifact preview persistence (code-artifact.ts)
+
+- [x] 5.1 Key the `<affine-html-preview>` by `toolCallId` so chat message re-renders reuse the same element.
+  - Uses lit's `keyed()` directive. Verified the panel path re-renders through lit diffing (`renderPreviewPanel` → `ArtifactPreviewPanel.content` is a reactive `TemplateResult`), so a stable template + stable key preserves the DOM.
+- [x] 5.2 On Code⇄Preview toggle, keep the preview element mounted (hide, don't remove) so the iframe and its runtime state survive.
+  - **Root cause of state loss identified:** the old code used a ternary that swapped between two _different_ templates, which guaranteed lit tore down the iframe on every toggle. Both views are now always rendered and toggled with the `hidden` attribute.
+
+## 6. Tests
+
+- [x] 6.1 Unit-test the wrapper/bootstrap injection and that `linkIframe` sets `srcdoc` + the exact sandbox flags and never a remote `src`.
+  - `__tests__/host-bootstrap.spec.ts` (wrapping, injection points, decoy `</body>`, no storage APIs, script integrity) and `__tests__/iframe-container.spec.ts` (srcdoc, no remote `src`, exact sandbox flags, re-link safety).
+  - Added a **script-integrity** guard: the injected bootstrap is extracted and parsed, because a syntax error there would silently break sizing for every artifact. Mutation-checked — it fails on an injected syntax error.
+- [x] 6.2 Test the host `message` handler: source validation, marker check, height clamping, state transitions.
+  - `__tests__/guest-message.spec.ts` covers `resolveGuestMessage` against **real iframes**: accepts own frame, rejects another frame / the host window / a missing source / a marker-less payload, clamps to min and max, gates resize on `autoResize`, and passes `ready` through regardless.
+  - Source validation was **mutation-checked**: removing the `event.source` comparison fails exactly the three spoofing tests.
+- [x] 6.3 Test reload-guard: unchanged HTML does not reload; changed HTML does.
+  - `decideLink` covered in `guest-message.spec.ts` (`empty` / `skip` / `link`, including identical HTML that is not currently showing).
+- [x] 6.4 Manual/integration: an interactive artifact (script counter + a form) renders and stays interactive **offline**; state persists across Code⇄Preview toggle; host storage/DOM is inaccessible from the guest.
+  - **Automated in real Chromium** — `__tests__/artifact-sandbox.integration.spec.ts` (15 tests), following the repo's existing integration-spec pattern (local http server + `chromium.launch()`); Playwright's Chromium binary was installed. The spec imports `wrapArtifactHtml` and `ARTIFACT_SANDBOX` from production so it cannot drift from what ships.
+  - Verified by the browser, not by assertion about our own code: scripted counter responds to clicks; form input accepts text; **zero network requests** (nothing to `affine.run`); guest posts `resize` + `ready`; `window.origin` is `'null'`; guest cannot read `parent.document`; host `localStorage`/`cookie` do not leak.
+  - **Stronger than specified:** Chromium _throws_ `SecurityError` on `document.cookie` in the guest rather than returning empty — the sandbox denies cookie access outright without `allow-same-origin`.
+  - State persistence proven both ways: toggling `hidden` preserves the counter value; re-creating the frame resets it to `0` (the old ternary's behaviour, kept as a test so the reason the fix matters stays visible).
+  - **The central security claim is proven, not asserted:** a dedicated group renders with `allow-same-origin` added _in the test only_ and shows the guest then **can** reach `parent.document` and loses its opaque origin. Production's list is never modified, and a third test asserts it never contains the flag.
+- [x] 6.5 Verify both call sites — chat code-artifact preview and inserted `affine:code` `preview: true` doc block — render, size, and isolate correctly.
+  - **Renderer-level: verified.** Both sizing modes are covered — tall content reports a height above the cap (host clamps it, per `clampArtifactHeight` unit tests) and short content reports well under the old fixed `544px`, which is the concrete win for the inline doc-block case.
+  - **Remaining gap, stated plainly:** the two call sites are verified at the renderer/mode level, **not** by driving the assembled app (chat panel with a live AI response, and a doc containing an `affine:code preview` block). That needs a running AFFiNE instance with a workspace. Static checks in place instead: typecheck clean, and the panel-stretch CSS path traced to confirm `autoResize=false` prevents the inline-height regression.
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
index df99f3ac39a60..bb360f2e6f95a 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
@@ -22,6 +22,7 @@ import { effect, signal } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { keyed } from 'lit/directives/keyed.js';
 import { bundledLanguagesInfo, type ThemedToken } from 'shiki';
 
 import { preprocessHtml } from '../../utils/html';
@@ -389,6 +390,11 @@ export class CodeArtifactTool extends ArtifactTool<
       height: 100%;
     }
 
+    /* The inactive view stays mounted so its state survives the toggle. */
+    .code-artifact-preview > [hidden] {
+      display: none;
+    }
+
     .code-artifact-control-btn {
       background: transparent;
       border-radius: 8px;
@@ -484,16 +490,28 @@ export class CodeArtifactTool extends ArtifactTool<
     if (typeof result !== 'object' || !('html' in result)) return html``;
 
     const { html: htmlContent } = result as { html: string };
+    const toolCallId = this.data.toolCallId;
 
+    // Both views stay mounted and are toggled with `hidden`. Removing the
+    // preview would tear down its iframe and discard the artifact's live state
+    // every time the user peeked at the code. Keying by tool call id keeps the
+    // same elements across chat message re-renders.
     return html`<div class="code-artifact-preview">
-      ${this.mode === 'preview'
-        ? html`<affine-html-preview .html=${htmlContent}></affine-html-preview>`
-        : html`<code-highlighter
+      ${keyed(
+        toolCallId,
+        html`<affine-html-preview
+            .html=${htmlContent}
+            .autoResize=${false}
+            ?hidden=${this.mode !== 'preview'}
+          ></affine-html-preview>
+          <code-highlighter
             .std=${this.std}
             .code=${htmlContent}
             .language=${'html'}
             .showLineNumbers=${true}
-          ></code-highlighter>`}
+            ?hidden=${this.mode !== 'code'}
+          ></code-highlighter>`
+      )}
     </div>`;
   }
 
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/artifact-sandbox.integration.spec.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/artifact-sandbox.integration.spec.ts
new file mode 100644
index 0000000000000..2c6ce1a5a56bb
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/artifact-sandbox.integration.spec.ts
@@ -0,0 +1,385 @@
+/**
+ * @vitest-environment node
+ *
+ * End-to-end verification of the inline artifact renderer in real Chromium.
+ *
+ * The unit tests assert what we *write* (srcdoc, sandbox flags, message
+ * handling). Those cannot prove what a browser actually *enforces*: that scripts
+ * run, that forms work, that the guest is genuinely walled off from the host, and
+ * that nothing reaches the network. That is what this spec covers.
+ *
+ * The wrapped document and the sandbox list are imported from production code so
+ * this test cannot drift from what ships.
+ */
+import { createServer, type Server } from 'node:http';
+
+import { type Browser, chromium, type Page } from '@playwright/test';
+import { afterAll, beforeAll, describe, expect, test } from 'vitest';
+
+import { ARTIFACT_MAX_HEIGHT, wrapArtifactHtml } from '../host-bootstrap';
+import { ARTIFACT_SANDBOX } from '../iframe-container';
+
+let server: Server;
+let serverUrl: string;
+let browser: Browser;
+
+beforeAll(async () => {
+  server = createServer((_request, response) => {
+    response.setHeader('Content-Type', 'text/html');
+    response.end('<!doctype html><html><body></body></html>');
+  });
+
+  await new Promise<void>(resolve => {
+    server.listen(0, '127.0.0.1', resolve);
+  });
+
+  const address = server.address();
+  if (!address || typeof address === 'string') {
+    throw new Error('Failed to start artifact sandbox test server.');
+  }
+  serverUrl = `http://127.0.0.1:${address.port}`;
+  browser = await chromium.launch({ headless: true });
+}, 120_000);
+
+afterAll(async () => {
+  await browser?.close();
+  await new Promise<void>(resolve => server.close(() => resolve()));
+});
+
+/** An artifact that is interactive: a scripted counter plus a real form. */
+const INTERACTIVE_ARTIFACT = `<!DOCTYPE html>
+<html>
+<head><style>body { margin: 0; } #box { height: 300px; }</style></head>
+<body>
+  <div id="box">
+    <button id="inc" onclick="bump()">inc</button>
+    <span id="count">0</span>
+    <form id="form"><input id="field" name="field" /></form>
+  </div>
+  <script>
+    var n = 0;
+    function bump() {
+      n += 1;
+      document.getElementById('count').textContent = String(n);
+    }
+  </script>
+</body>
+</html>`;
+
+/**
+ * Render an artifact the way production does: local srcdoc, real sandbox list,
+ * host listening for guest messages.
+ */
+async function renderArtifact(
+  artifactHtml: string,
+  options: { extraSandbox?: readonly string[] } = {}
+) {
+  const page = await browser.newPage();
+  const requests: string[] = [];
+  page.on('request', request => requests.push(request.url()));
+
+  await page.goto(serverUrl);
+
+  await page.evaluate(
+    ({ srcdoc, sandbox }) => {
+      const received: unknown[] = [];
+      (window as any).__messages = received;
+      window.addEventListener('message', event => {
+        received.push(event.data);
+      });
+
+      const iframe = document.createElement('iframe');
+      iframe.id = 'artifact';
+      iframe.setAttribute('sandbox', sandbox.join(' '));
+      iframe.srcdoc = srcdoc;
+      document.body.append(iframe);
+    },
+    {
+      srcdoc: wrapArtifactHtml(artifactHtml),
+      sandbox: [...ARTIFACT_SANDBOX, ...(options.extraSandbox ?? [])],
+    }
+  );
+
+  const frame = page.frameLocator('#artifact');
+  await frame.locator('body').waitFor({ state: 'attached' });
+
+  return { page, frame, requests };
+}
+
+/** Collect guest messages of a given type, polling until at least one lands. */
+function guestMessages(page: Page, type: 'resize' | 'ready' | 'error') {
+  return page.evaluate(async want => {
+    const seen = () =>
+      ((window as any).__messages as any[]).filter(m => m && m.type === want);
+    for (let i = 0; i < 50 && seen().length === 0; i++) {
+      await new Promise(r => setTimeout(r, 50));
+    }
+    return seen();
+  }, type);
+}
+
+describe('artifact renderer in real Chromium', () => {
+  test('runs artifact scripts', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      await frame.locator('#inc').click();
+      await frame.locator('#inc').click();
+
+      await expect.poll(() => frame.locator('#count').textContent()).toBe('2');
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('accepts form input', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      await frame.locator('#field').fill('hello');
+
+      expect(await frame.locator('#field').inputValue()).toBe('hello');
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('reaches no network at all', async () => {
+    const { page, requests } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      // Only the harness page itself; notably nothing to affine.run.
+      expect(requests.filter(url => url.includes('affine.run'))).toEqual([]);
+      expect(requests.every(url => url.startsWith(serverUrl))).toBe(true);
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('reports its content height to the host', async () => {
+    const { page } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      const resizes = await guestMessages(page, 'resize');
+
+      expect(resizes.length).toBeGreaterThan(0);
+      expect(resizes[0].source).toBe('affine-artifact');
+      expect(resizes[0].height).toBeGreaterThan(0);
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('announces readiness to the host', async () => {
+    const { page } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      const ready = await guestMessages(page, 'ready');
+
+      expect(ready.length).toBeGreaterThan(0);
+    } finally {
+      await page.close();
+    }
+  });
+});
+
+describe('artifact isolation enforced by the browser', () => {
+  test('the guest runs on an opaque origin', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      const origin = await frame
+        .locator('body')
+        .evaluate(() => String(window.origin));
+
+      expect(origin).toBe('null');
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('the guest cannot read the host document', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      const reachedHost = await frame.locator('body').evaluate(() => {
+        try {
+          // Reading across an opaque origin must throw.
+          return Boolean(window.parent.document.title !== undefined);
+        } catch {
+          return false;
+        }
+      });
+
+      expect(reachedHost).toBe(false);
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('the guest cannot read host storage or cookies', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      await page.evaluate(() => {
+        localStorage.setItem('affine-secret', 'token');
+        document.cookie = 'affine-session=token';
+      });
+
+      const leaked = await frame.locator('body').evaluate(() => {
+        let storage: string | null = null;
+        try {
+          storage = localStorage.getItem('affine-secret');
+        } catch {
+          // Opaque origins may refuse storage access outright.
+          storage = null;
+        }
+
+        // Chromium throws SecurityError here rather than returning '' —
+        // the sandbox denies cookie access entirely without allow-same-origin.
+        let cookie: string | null = null;
+        try {
+          cookie = document.cookie;
+        } catch {
+          cookie = null;
+        }
+
+        return { storage, cookie };
+      });
+
+      expect(leaked.storage).toBeNull();
+      expect(leaked.cookie ?? '').not.toContain('token');
+    } finally {
+      await page.close();
+    }
+  });
+});
+
+describe('allow-same-origin is what would collapse the boundary', () => {
+  /**
+   * Proves the isolation above is caused by the *absence* of
+   * `allow-same-origin`, not by some incidental property of srcdoc — and that
+   * the tests above would catch anyone adding the flag back.
+   *
+   * Production's list is never modified; the flag is added only here.
+   */
+  test('adding it lets the guest reach into the host', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT, {
+      extraSandbox: ['allow-same-origin'],
+    });
+
+    try {
+      const escaped = await frame.locator('body').evaluate(() => {
+        try {
+          return typeof window.parent.document.title === 'string';
+        } catch {
+          return false;
+        }
+      });
+
+      expect(escaped).toBe(true);
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('adding it drops the opaque origin', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT, {
+      extraSandbox: ['allow-same-origin'],
+    });
+
+    try {
+      const origin = await frame
+        .locator('body')
+        .evaluate(() => String(window.origin));
+
+      expect(origin).not.toBe('null');
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('production never grants it', () => {
+    expect([...ARTIFACT_SANDBOX]).not.toContain('allow-same-origin');
+  });
+});
+
+describe('artifact state persistence', () => {
+  test('hiding the frame preserves live artifact state', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      await frame.locator('#inc').click();
+      expect(await frame.locator('#count').textContent()).toBe('1');
+
+      // This is what the Code/Preview toggle now does.
+      await page.evaluate(() => {
+        document.getElementById('artifact')!.toggleAttribute('hidden', true);
+      });
+      await page.evaluate(() => {
+        document.getElementById('artifact')!.toggleAttribute('hidden', false);
+      });
+
+      expect(await frame.locator('#count').textContent()).toBe('1');
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('re-creating the frame is what loses state', async () => {
+    const { page, frame } = await renderArtifact(INTERACTIVE_ARTIFACT);
+
+    try {
+      await frame.locator('#inc').click();
+      expect(await frame.locator('#count').textContent()).toBe('1');
+
+      // The behaviour the old toggle caused, kept here so the reason the fix
+      // matters stays visible.
+      await page.evaluate(() => {
+        const old = document.getElementById('artifact') as HTMLIFrameElement;
+        const fresh = old.cloneNode(false) as HTMLIFrameElement;
+        fresh.srcdoc = old.srcdoc;
+        old.remove();
+        document.body.append(fresh);
+      });
+
+      const fresh = page.frameLocator('#artifact');
+      await expect.poll(() => fresh.locator('#count').textContent()).toBe('0');
+    } finally {
+      await page.close();
+    }
+  });
+});
+
+describe('artifact sizing', () => {
+  test('reported height reflects tall content and the host caps it', async () => {
+    const tall = `<!DOCTYPE html><html><body style="margin:0">
+      <div style="height:5000px">tall</div></body></html>`;
+    const { page } = await renderArtifact(tall);
+
+    try {
+      const height = (await guestMessages(page, 'resize')).at(-1)?.height ?? 0;
+
+      // The guest reports the true content height...
+      expect(height).toBeGreaterThan(ARTIFACT_MAX_HEIGHT);
+      // ...and the host is what bounds it (see clampArtifactHeight unit tests).
+    } finally {
+      await page.close();
+    }
+  });
+
+  test('short content reports a height well under the old fixed 544px', async () => {
+    const short = `<!DOCTYPE html><html><body style="margin:0">
+      <p style="height:40px;margin:0">short</p></body></html>`;
+    const { page } = await renderArtifact(short);
+
+    try {
+      const height = (await guestMessages(page, 'resize')).at(-1)?.height ?? 0;
+
+      expect(height).toBeGreaterThan(0);
+      expect(height).toBeLessThan(544);
+    } finally {
+      await page.close();
+    }
+  });
+});
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/guest-message.spec.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/guest-message.spec.ts
new file mode 100644
index 0000000000000..2a6b16ba48348
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/guest-message.spec.ts
@@ -0,0 +1,178 @@
+/**
+ * @vitest-environment happy-dom
+ *
+ * Covers the host side of the artifact protocol: which guest messages are
+ * trusted, and what the host does with them.
+ *
+ * The Lit component itself is not mounted here — `scripts/setup/lit.ts` stubs
+ * `customElements` globally, so custom elements never upgrade in this
+ * environment. The decision logic therefore lives in a pure function that can
+ * be exercised against real iframes.
+ */
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import {
+  ARTIFACT_MAX_HEIGHT,
+  ARTIFACT_MESSAGE_SOURCE,
+  ARTIFACT_MIN_HEIGHT,
+  decideLink,
+  resolveGuestMessage,
+} from '../host-bootstrap';
+
+let frame: HTMLIFrameElement;
+let other: HTMLIFrameElement;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  frame = document.createElement('iframe');
+  other = document.createElement('iframe');
+  document.body.append(frame, other);
+});
+
+const event = (data: unknown, source: unknown) =>
+  new MessageEvent('message', { data, source: source as MessageEventSource });
+
+const resize = (height: number) => ({
+  source: ARTIFACT_MESSAGE_SOURCE,
+  type: 'resize',
+  height,
+});
+
+const opts = { autoResize: true };
+
+describe('resolveGuestMessage', () => {
+  test('accepts a resize from the frame it is watching', () => {
+    const result = resolveGuestMessage(
+      event(resize(300), frame.contentWindow),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'resize', height: 300 });
+  });
+
+  test('clamps a reported height to the maximum', () => {
+    const result = resolveGuestMessage(
+      event(resize(99_999), frame.contentWindow),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'resize', height: ARTIFACT_MAX_HEIGHT });
+  });
+
+  test('clamps a reported height to the minimum', () => {
+    const result = resolveGuestMessage(
+      event(resize(1), frame.contentWindow),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'resize', height: ARTIFACT_MIN_HEIGHT });
+  });
+
+  test('rejects a message from a different frame', () => {
+    const result = resolveGuestMessage(
+      event(resize(300), other.contentWindow),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('rejects a message from the host window itself', () => {
+    const result = resolveGuestMessage(event(resize(300), window), frame, opts);
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('rejects a message with no source', () => {
+    const result = resolveGuestMessage(event(resize(300), null), frame, opts);
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('rejects everything when there is no frame yet', () => {
+    const result = resolveGuestMessage(
+      event(resize(300), frame.contentWindow),
+      null,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('rejects a payload without the artifact marker', () => {
+    const result = resolveGuestMessage(
+      event({ type: 'resize', height: 300 }, frame.contentWindow),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('ignores resize when auto-resize is disabled', () => {
+    // The chat preview panel stretches the frame via CSS; writing an inline
+    // height would override that rule and break the panel layout.
+    const result = resolveGuestMessage(
+      event(resize(300), frame.contentWindow),
+      frame,
+      { autoResize: false }
+    );
+
+    expect(result).toEqual({ kind: 'ignore' });
+  });
+
+  test('accepts ready even when auto-resize is disabled', () => {
+    const result = resolveGuestMessage(
+      event(
+        { source: ARTIFACT_MESSAGE_SOURCE, type: 'ready' },
+        frame.contentWindow
+      ),
+      frame,
+      { autoResize: false }
+    );
+
+    expect(result).toEqual({ kind: 'ready' });
+  });
+
+  test('surfaces a guest error without discarding the render', () => {
+    const result = resolveGuestMessage(
+      event(
+        { source: ARTIFACT_MESSAGE_SOURCE, type: 'error', message: 'boom' },
+        frame.contentWindow
+      ),
+      frame,
+      opts
+    );
+
+    expect(result).toEqual({ kind: 'error', message: 'boom' });
+  });
+});
+
+describe('decideLink', () => {
+  test('reports an empty state when there is no html', () => {
+    expect(decideLink('', null, false)).toBe('empty');
+    expect(decideLink(null, 'previous', true)).toBe('empty');
+  });
+
+  test('links html that has not been rendered yet', () => {
+    expect(decideLink('<h1>a</h1>', null, false)).toBe('link');
+  });
+
+  test('skips relinking html that is already showing', () => {
+    // Relinking would reload the frame and discard the artifact's live state.
+    expect(decideLink('<h1>a</h1>', '<h1>a</h1>', true)).toBe('skip');
+  });
+
+  test('relinks when the html changes', () => {
+    expect(decideLink('<h1>b</h1>', '<h1>a</h1>', true)).toBe('link');
+  });
+
+  test('relinks identical html that is not currently showing', () => {
+    // e.g. a previous link threw, so the frame is not actually displaying it
+    expect(decideLink('<h1>a</h1>', '<h1>a</h1>', false)).toBe('link');
+  });
+});
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/host-bootstrap.spec.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/host-bootstrap.spec.ts
new file mode 100644
index 0000000000000..688c03d76884f
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/host-bootstrap.spec.ts
@@ -0,0 +1,216 @@
+import { describe, expect, test } from 'vitest';
+
+import {
+  ARTIFACT_MAX_HEIGHT,
+  ARTIFACT_MESSAGE_SOURCE,
+  ARTIFACT_MIN_HEIGHT,
+  clampArtifactHeight,
+  parseArtifactMessage,
+  wrapArtifactHtml,
+} from '../host-bootstrap';
+
+const FULL_DOC = `<!DOCTYPE html>
+<html>
+<head><title>Artifact</title></head>
+<body><h1>Hello</h1></body>
+</html>`;
+
+describe('wrapArtifactHtml', () => {
+  test('injects the bootstrap before the closing body tag', () => {
+    const wrapped = wrapArtifactHtml(FULL_DOC);
+
+    const scriptStart = wrapped.indexOf('<script');
+    const bodyClose = wrapped.indexOf('</body>');
+
+    expect(scriptStart).toBeGreaterThan(-1);
+    expect(bodyClose).toBeGreaterThan(-1);
+    expect(scriptStart).toBeLessThan(bodyClose);
+  });
+
+  test('preserves the original artifact markup', () => {
+    const wrapped = wrapArtifactHtml(FULL_DOC);
+
+    expect(wrapped).toContain('<!DOCTYPE html>');
+    expect(wrapped).toContain('<title>Artifact</title>');
+    expect(wrapped).toContain('<h1>Hello</h1>');
+  });
+
+  test('injects before the closing html tag when there is no body', () => {
+    const wrapped = wrapArtifactHtml(
+      '<!DOCTYPE html><html><head></head></html>'
+    );
+
+    const scriptStart = wrapped.indexOf('<script');
+    const htmlClose = wrapped.indexOf('</html>');
+
+    expect(scriptStart).toBeGreaterThan(-1);
+    expect(scriptStart).toBeLessThan(htmlClose);
+  });
+
+  test('appends the bootstrap for a bare fragment', () => {
+    const wrapped = wrapArtifactHtml('<h1>fragment</h1>');
+
+    expect(wrapped).toContain('<h1>fragment</h1>');
+    expect(wrapped.indexOf('<script')).toBeGreaterThan(
+      wrapped.indexOf('<h1>fragment</h1>')
+    );
+  });
+
+  test('only injects a single bootstrap for a document with nested body text', () => {
+    const wrapped = wrapArtifactHtml(
+      '<html><body><p>talks about </body> in prose</p></body></html>'
+    );
+
+    const occurrences = wrapped.split(ARTIFACT_MESSAGE_SOURCE).length - 1;
+    expect(occurrences).toBeGreaterThan(0);
+    // the bootstrap must appear exactly once regardless of decoy markup
+    expect(wrapped.split('<script').length - 1).toBe(1);
+  });
+
+  describe('bootstrap script', () => {
+    const script = wrapArtifactHtml(FULL_DOC);
+
+    test('tags every message with the artifact source marker', () => {
+      expect(script).toContain(ARTIFACT_MESSAGE_SOURCE);
+    });
+
+    test('reports resize, ready and error messages', () => {
+      expect(script).toContain('resize');
+      expect(script).toContain('ready');
+      expect(script).toContain('error');
+    });
+
+    test('observes content size with ResizeObserver', () => {
+      expect(script).toContain('ResizeObserver');
+    });
+
+    test('posts to the parent window with a wildcard target origin', () => {
+      // the guest is on an opaque origin and cannot know the parent origin
+      expect(script).toMatch(
+        /postMessage\([^)]*'\*'|postMessage\([\s\S]*?"\*"/
+      );
+    });
+
+    test('does not touch storage APIs', () => {
+      expect(script).not.toContain('localStorage');
+      expect(script).not.toContain('sessionStorage');
+      expect(script).not.toContain('indexedDB');
+      expect(script).not.toContain('document.cookie');
+    });
+  });
+});
+
+describe('parseArtifactMessage', () => {
+  const ok = (extra: Record<string, unknown>) => ({
+    source: ARTIFACT_MESSAGE_SOURCE,
+    ...extra,
+  });
+
+  test('parses a resize message', () => {
+    expect(parseArtifactMessage(ok({ type: 'resize', height: 120 }))).toEqual({
+      source: ARTIFACT_MESSAGE_SOURCE,
+      type: 'resize',
+      height: 120,
+    });
+  });
+
+  test('parses a ready message', () => {
+    expect(parseArtifactMessage(ok({ type: 'ready' }))).toEqual({
+      source: ARTIFACT_MESSAGE_SOURCE,
+      type: 'ready',
+    });
+  });
+
+  test('parses an error message', () => {
+    expect(
+      parseArtifactMessage(ok({ type: 'error', message: 'boom' }))
+    ).toEqual({
+      source: ARTIFACT_MESSAGE_SOURCE,
+      type: 'error',
+      message: 'boom',
+    });
+  });
+
+  test('parses an error message that omits the text', () => {
+    const parsed = parseArtifactMessage(ok({ type: 'error' }));
+    expect(parsed?.type).toBe('error');
+  });
+
+  test.each([null, undefined, 'resize', 42, [], true])(
+    'rejects non-object payload %s',
+    payload => {
+      expect(parseArtifactMessage(payload)).toBeNull();
+    }
+  );
+
+  test('rejects a payload without the source marker', () => {
+    expect(parseArtifactMessage({ type: 'resize', height: 10 })).toBeNull();
+  });
+
+  test('rejects a payload from a lookalike source', () => {
+    expect(
+      parseArtifactMessage({ source: 'affine-artifact-evil', type: 'ready' })
+    ).toBeNull();
+  });
+
+  test('rejects an unknown message type', () => {
+    expect(parseArtifactMessage(ok({ type: 'navigate' }))).toBeNull();
+  });
+
+  test.each([undefined, '120', null, NaN, Infinity, -1])(
+    'rejects resize with invalid height %s',
+    height => {
+      expect(parseArtifactMessage(ok({ type: 'resize', height }))).toBeNull();
+    }
+  );
+});
+
+describe('clampArtifactHeight', () => {
+  test('raises heights below the minimum', () => {
+    expect(clampArtifactHeight(1)).toBe(ARTIFACT_MIN_HEIGHT);
+  });
+
+  test('caps heights above the maximum', () => {
+    expect(clampArtifactHeight(100_000)).toBe(ARTIFACT_MAX_HEIGHT);
+  });
+
+  test('passes through in-range heights', () => {
+    const mid = Math.round((ARTIFACT_MIN_HEIGHT + ARTIFACT_MAX_HEIGHT) / 2);
+    expect(clampArtifactHeight(mid)).toBe(mid);
+  });
+
+  test('falls back to the minimum for non-finite input', () => {
+    expect(clampArtifactHeight(NaN)).toBe(ARTIFACT_MIN_HEIGHT);
+  });
+
+  test('keeps the maximum at or below the previous fixed height budget', () => {
+    expect(ARTIFACT_MAX_HEIGHT).toBe(640);
+    expect(ARTIFACT_MIN_HEIGHT).toBeLessThan(ARTIFACT_MAX_HEIGHT);
+  });
+});
+
+describe('bootstrap script integrity', () => {
+  /** Pull the injected script body out of a wrapped document. */
+  function extractScript(wrapped: string): string {
+    const open = wrapped.indexOf('<script>');
+    const close = wrapped.indexOf('</script>', open);
+    expect(open).toBeGreaterThan(-1);
+    expect(close).toBeGreaterThan(open);
+    return wrapped.slice(open + '<script>'.length, close);
+  }
+
+  test('emits a syntactically valid script', () => {
+    const body = extractScript(wrapArtifactHtml(FULL_DOC));
+
+    // A syntax error here would silently break sizing for every artifact.
+    expect(() => new Function(body)).not.toThrow();
+  });
+
+  test('emits a properly closed script tag', () => {
+    const wrapped = wrapArtifactHtml(FULL_DOC);
+
+    expect(wrapped).toContain('<script>');
+    expect(wrapped).toContain('</script>');
+    expect(wrapped.split('</script>').length - 1).toBe(1);
+  });
+});
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/iframe-container.spec.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/iframe-container.spec.ts
new file mode 100644
index 0000000000000..fd818e506b403
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/__tests__/iframe-container.spec.ts
@@ -0,0 +1,75 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { linkIframe } from '../iframe-container';
+
+const HTML = '<!DOCTYPE html><html><body><h1>hi</h1></body></html>';
+
+describe('linkIframe', () => {
+  let iframe: HTMLIFrameElement;
+
+  beforeEach(() => {
+    iframe = document.createElement('iframe');
+    document.body.append(iframe);
+  });
+
+  test('renders the artifact locally via srcdoc', () => {
+    linkIframe(iframe, HTML);
+
+    expect(iframe.srcdoc).toContain('<h1>hi</h1>');
+  });
+
+  test('never navigates to a remote container', () => {
+    linkIframe(iframe, HTML);
+
+    expect(iframe.src).not.toContain('affine.run');
+    expect(iframe.getAttribute('src')).toBeFalsy();
+  });
+
+  test('injects the host bootstrap into the rendered document', () => {
+    linkIframe(iframe, HTML);
+
+    expect(iframe.srcdoc).toContain('affine-artifact');
+  });
+
+  test('grants scripting so artifacts stay interactive', () => {
+    linkIframe(iframe, HTML);
+
+    expect(iframe.sandbox.contains('allow-scripts')).toBe(true);
+  });
+
+  test('withholds allow-same-origin so the guest gets an opaque origin', () => {
+    linkIframe(iframe, HTML);
+
+    expect(iframe.sandbox.contains('allow-same-origin')).toBe(false);
+  });
+
+  test('grants the interaction permissions artifacts need', () => {
+    linkIframe(iframe, HTML);
+
+    for (const flag of [
+      'allow-forms',
+      'allow-modals',
+      'allow-popups',
+      'allow-popups-to-escape-sandbox',
+      'allow-downloads',
+      'allow-pointer-lock',
+    ]) {
+      expect(iframe.sandbox.contains(flag), flag).toBe(true);
+    }
+  });
+
+  test('re-linking replaces the previous content without a remote round trip', () => {
+    linkIframe(iframe, HTML);
+    linkIframe(
+      iframe,
+      '<!DOCTYPE html><html><body><h2>second</h2></body></html>'
+    );
+
+    expect(iframe.srcdoc).toContain('<h2>second</h2>');
+    expect(iframe.srcdoc).not.toContain('<h1>hi</h1>');
+    expect(iframe.sandbox.contains('allow-same-origin')).toBe(false);
+  });
+});
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/host-bootstrap.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/host-bootstrap.ts
new file mode 100644
index 0000000000000..a6811582572ca
--- /dev/null
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/host-bootstrap.ts
@@ -0,0 +1,220 @@
+/**
+ * Marker carried by every message the artifact guest posts to the host.
+ *
+ * The guest runs on an opaque origin (the sandbox deliberately omits
+ * `allow-same-origin`), so it cannot know the host origin and must post with a
+ * wildcard target. The host therefore authenticates messages by checking
+ * `event.source === iframe.contentWindow` and matching this marker, rather than
+ * by origin.
+ */
+export const ARTIFACT_MESSAGE_SOURCE = 'affine-artifact';
+
+export type ArtifactMessage =
+  | { source: typeof ARTIFACT_MESSAGE_SOURCE; type: 'ready' }
+  | { source: typeof ARTIFACT_MESSAGE_SOURCE; type: 'resize'; height: number }
+  | { source: typeof ARTIFACT_MESSAGE_SOURCE; type: 'error'; message: string };
+
+/** Smallest height an auto-sized preview may collapse to. */
+export const ARTIFACT_MIN_HEIGHT = 120;
+
+/** Tallest an auto-sized preview grows before it scrolls internally. */
+export const ARTIFACT_MAX_HEIGHT = 640;
+
+/**
+ * Validate an incoming `message` payload as an artifact protocol message.
+ *
+ * Returns `null` for anything unrecognised. Callers MUST additionally verify
+ * `event.source === iframe.contentWindow` before trusting the result — the
+ * marker alone is guessable, and the opaque guest origin makes origin checks
+ * useless.
+ */
+export function parseArtifactMessage(data: unknown): ArtifactMessage | null {
+  if (typeof data !== 'object' || data === null || Array.isArray(data)) {
+    return null;
+  }
+
+  const raw = data as Record<string, unknown>;
+  if (raw.source !== ARTIFACT_MESSAGE_SOURCE) return null;
+
+  switch (raw.type) {
+    case 'ready':
+      return { source: ARTIFACT_MESSAGE_SOURCE, type: 'ready' };
+
+    case 'resize': {
+      const { height } = raw;
+      if (
+        typeof height !== 'number' ||
+        !Number.isFinite(height) ||
+        height <= 0
+      ) {
+        return null;
+      }
+      return { source: ARTIFACT_MESSAGE_SOURCE, type: 'resize', height };
+    }
+
+    case 'error':
+      return {
+        source: ARTIFACT_MESSAGE_SOURCE,
+        type: 'error',
+        message:
+          typeof raw.message === 'string' && raw.message
+            ? raw.message
+            : 'Unknown error',
+      };
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Bound a guest-reported height. The guest is untrusted, so a hostile or buggy
+ * value can never blow up host layout.
+ */
+export function clampArtifactHeight(height: number): number {
+  if (!Number.isFinite(height)) return ARTIFACT_MIN_HEIGHT;
+  return Math.min(ARTIFACT_MAX_HEIGHT, Math.max(ARTIFACT_MIN_HEIGHT, height));
+}
+
+/**
+ * Whether the frame needs to be (re)loaded.
+ *
+ * `skip` is what preserves a running artifact's state: the host re-renders for
+ * unrelated reasons (view toggles, chat message updates), and reloading the
+ * frame on those would reset the artifact.
+ */
+export type LinkDecision = 'empty' | 'skip' | 'link';
+
+export function decideLink(
+  next: string | null | undefined,
+  rendered: string | null,
+  isShowing: boolean
+): LinkDecision {
+  if (!next) return 'empty';
+  if (next === rendered && isShowing) return 'skip';
+  return 'link';
+}
+
+/** What the host should do in response to an incoming `message` event. */
+export type GuestMessageAction =
+  | { kind: 'ignore' }
+  | { kind: 'resize'; height: number }
+  | { kind: 'ready' }
+  | { kind: 'error'; message: string };
+
+const IGNORE: GuestMessageAction = { kind: 'ignore' };
+
+/**
+ * Decide how to handle a `message` event that may have come from an artifact.
+ *
+ * Authentication is by window handle: only the frame we rendered can be
+ * `event.source`. Origin is useless here because the guest is on an opaque
+ * origin and must post with a wildcard target, and the marker alone is
+ * guessable by any other frame on the page.
+ */
+export function resolveGuestMessage(
+  event: MessageEvent,
+  frame: HTMLIFrameElement | null,
+  options: { autoResize: boolean }
+): GuestMessageAction {
+  if (!frame || !event.source || event.source !== frame.contentWindow) {
+    return IGNORE;
+  }
+
+  const message = parseArtifactMessage(event.data);
+  if (!message) return IGNORE;
+
+  switch (message.type) {
+    case 'resize':
+      if (!options.autoResize) return IGNORE;
+      return { kind: 'resize', height: clampArtifactHeight(message.height) };
+
+    case 'ready':
+      return { kind: 'ready' };
+
+    case 'error':
+      return { kind: 'error', message: message.message };
+  }
+}
+
+/**
+ * Script injected into the artifact document. It reports content height,
+ * readiness, and runtime errors to the host.
+ *
+ * Deliberately avoids storage APIs: under an opaque origin `localStorage` and
+ * friends either throw or resolve to a throwaway store, so touching them would
+ * only create noise.
+ */
+// The closing tag is split so this module stays safe to inline into an HTML
+// <script> block, where a literal `</script>` would terminate it early.
+const BOOTSTRAP = `<script>
+(function () {
+  var SOURCE = '${ARTIFACT_MESSAGE_SOURCE}';
+  var lastHeight = -1;
+
+  function post(type, height, message) {
+    var payload = { source: SOURCE, type: type };
+    if (typeof height === 'number') payload.height = height;
+    if (message) payload.message = message;
+    try {
+      parent.postMessage(payload, '*');
+    } catch (e) {
+      /* host went away */
+    }
+  }
+
+  function measure() {
+    var doc = document.documentElement;
+    var body = document.body;
+    var height = Math.max(
+      doc ? doc.scrollHeight : 0,
+      body ? body.scrollHeight : 0,
+      body ? body.offsetHeight : 0
+    );
+    if (height > 0 && height !== lastHeight) {
+      lastHeight = height;
+      post('resize', height);
+    }
+  }
+
+  window.addEventListener('error', function (event) {
+    var text = event && event.message ? String(event.message) : 'Unknown error';
+    post('error', undefined, text);
+  });
+
+  if (typeof ResizeObserver !== 'undefined') {
+    var observer = new ResizeObserver(measure);
+    if (document.documentElement) observer.observe(document.documentElement);
+    if (document.body) observer.observe(document.body);
+  }
+
+  window.addEventListener('load', function () {
+    measure();
+    post('ready');
+  });
+
+  measure();
+})();
+${'</'}script>`;
+
+/**
+ * Wrap untrusted artifact HTML with the host bootstrap, without disturbing the
+ * artifact's own markup.
+ *
+ * Injects before the last `</body>`, falling back to the last `</html>`, then to
+ * a plain append for bare fragments. The *last* closing tag is used so prose or
+ * escaped markup mentioning `</body>` cannot displace the bootstrap.
+ */
+export function wrapArtifactHtml(html: string): string {
+  const bodyClose = html.lastIndexOf('</body>');
+  if (bodyClose !== -1) {
+    return html.slice(0, bodyClose) + BOOTSTRAP + html.slice(bodyClose);
+  }
+
+  const htmlClose = html.lastIndexOf('</html>');
+  if (htmlClose !== -1) {
+    return html.slice(0, htmlClose) + BOOTSTRAP + html.slice(htmlClose);
+  }
+
+  return html + BOOTSTRAP;
+}
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/html-preview.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/html-preview.ts
index 0397313d27f86..231d30f003991 100644
--- a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/html-preview.ts
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/html-preview.ts
@@ -8,6 +8,11 @@ import { property, query, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import {
+  ARTIFACT_MAX_HEIGHT,
+  decideLink,
+  resolveGuestMessage,
+} from './host-bootstrap';
 import { linkIframe } from './iframe-container';
 
 export const CodeBlockHtmlPreview = CodeBlockPreviewExtension(
@@ -19,7 +24,8 @@ export class HTMLPreview extends SignalWatcher(
   WithDisposable(ShadowlessElement)
 ) {
   static override styles = css`
-    .html-preview-loading {
+    .html-preview-loading,
+    .html-preview-fallback {
       color: ${unsafeCSSVarV2('text/placeholder')};
       font-feature-settings:
         'liga' off,
@@ -33,8 +39,7 @@ export class HTMLPreview extends SignalWatcher(
       line-height: normal;
     }
 
-    .html-preview-error,
-    .html-preview-fallback {
+    .html-preview-error {
       color: ${unsafeCSSVarV2('button/error')};
       font-feature-settings:
         'liga' off,
@@ -61,12 +66,39 @@ export class HTMLPreview extends SignalWatcher(
   @property({ attribute: false })
   accessor html: string | null = null;
 
+  /**
+   * Size the frame to the artifact's reported content height.
+   *
+   * Enabled for previews that sit inline in document flow. Consumers that
+   * already stretch the frame to a container — such as the chat artifact
+   * preview panel — must pass `false`, otherwise the inline height written here
+   * would override their stylesheet rule.
+   */
+  @property({ attribute: false })
+  accessor autoResize: boolean = true;
+
   @state()
   accessor state: 'loading' | 'error' | 'finish' | 'fallback' = 'loading';
 
+  @state()
+  private accessor _contentHeight: number | null = null;
+
   @query('iframe')
   accessor iframe!: HTMLIFrameElement;
 
+  /** HTML currently rendered in the frame, to suppress redundant reloads. */
+  private _renderedHtml: string | null = null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const onMessage = (event: MessageEvent) => this._onGuestMessage(event);
+    window.addEventListener('message', onMessage);
+    this.disposables.add(() =>
+      window.removeEventListener('message', onMessage)
+    );
+  }
+
   override firstUpdated(_changedProperties: PropertyValues): void {
     const result = super.firstUpdated(_changedProperties);
 
@@ -95,19 +127,61 @@ export class HTMLPreview extends SignalWatcher(
     return this.model?.props.text.toString() ?? this.html;
   }
 
-  private _link() {
-    this.state = 'loading';
+  private _onGuestMessage(event: MessageEvent) {
+    const action = resolveGuestMessage(event, this.iframe ?? null, {
+      autoResize: this.autoResize,
+    });
+
+    switch (action.kind) {
+      case 'resize':
+        this._contentHeight = action.height;
+        break;
+
+      case 'ready':
+        this.state = 'finish';
+        break;
 
-    if (!this.normalizedHtml) {
+      case 'error':
+        // A script error rarely means nothing rendered, so keep showing the
+        // artifact rather than replacing it with an error panel.
+        console.warn('HTML artifact reported an error:', action.message);
+        break;
+
+      case 'ignore':
+        break;
+    }
+  }
+
+  private _link() {
+    const html = this.normalizedHtml;
+    const decision = decideLink(
+      html,
+      this._renderedHtml,
+      this.state === 'finish'
+    );
+
+    // `decision === 'empty'` exactly when `html` is empty; the explicit check
+    // also narrows the type for `linkIframe` below.
+    if (decision === 'empty' || !html) {
+      this._renderedHtml = null;
       this.state = 'fallback';
       return;
     }
 
+    if (decision === 'skip') return;
+
+    this.state = 'loading';
+    this._contentHeight = null;
+
     try {
-      linkIframe(this.iframe, this.normalizedHtml);
+      linkIframe(this.iframe, html);
+      this._renderedHtml = html;
+      // Reveal immediately rather than waiting for the guest handshake: if the
+      // bootstrap never runs, the artifact must still be visible.
       this.state = 'finish';
     } catch (error) {
       console.error('HTML preview iframe failed:', error);
+      this._renderedHtml = null;
       this.state = 'error';
     }
   }
@@ -135,8 +209,7 @@ export class HTMLPreview extends SignalWatcher(
             'fallback',
             () =>
               html`<div class="html-preview-fallback">
-                This feature is not supported in your browser. Please download
-                the AFFiNE Desktop App to use it.
+                Nothing to preview yet.
               </div>`,
           ],
         ])}
@@ -145,6 +218,14 @@ export class HTMLPreview extends SignalWatcher(
           title="HTML Preview"
           style=${styleMap({
             display: this.state === 'finish' ? undefined : 'none',
+            // Only write a height once the guest has measured itself. Until
+            // then the stylesheet default applies, so a preview whose bootstrap
+            // never runs still renders at a usable size.
+            height:
+              this.autoResize && this._contentHeight !== null
+                ? `${this._contentHeight}px`
+                : undefined,
+            maxHeight: this.autoResize ? `${ARTIFACT_MAX_HEIGHT}px` : undefined,
           })}
         ></iframe>
       </div>
diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/iframe-container.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/iframe-container.ts
index 86124b976d389..2ebab5bf85214 100644
--- a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/iframe-container.ts
+++ b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/iframe-container.ts
@@ -1,17 +1,34 @@
+import { wrapArtifactHtml } from './host-bootstrap';
+
+/**
+ * Sandbox flags for artifact previews.
+ *
+ * `allow-same-origin` is deliberately absent. Without it the frame gets a unique
+ * opaque origin, so artifact scripts run but cannot reach the host document,
+ * storage, cookies, or auth state. Adding it back would collapse the isolation
+ * boundary, since frame and embedder would share an origin.
+ */
+export const ARTIFACT_SANDBOX = [
+  'allow-scripts',
+  'allow-forms',
+  'allow-modals',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-downloads',
+  'allow-pointer-lock',
+] as const;
+
+/**
+ * Render artifact HTML into an iframe entirely locally.
+ *
+ * The document is delivered via `srcdoc`, so rendering needs no network and no
+ * remote container origin.
+ */
 export function linkIframe(iframe: HTMLIFrameElement, html: string) {
-  // force reload iframe
-  iframe.src = '';
-  iframe.src = 'https://affine.run/static/container.html';
-  iframe.sandbox.add(
-    'allow-pointer-lock',
-    'allow-popups',
-    'allow-forms',
-    'allow-popups-to-escape-sandbox',
-    'allow-downloads',
-    'allow-scripts',
-    'allow-same-origin'
-  );
-  iframe.onload = () => {
-    iframe.contentWindow?.postMessage(html, 'https://affine.run');
-  };
+  iframe.removeAttribute('src');
+
+  iframe.sandbox.value = '';
+  iframe.sandbox.add(...ARTIFACT_SANDBOX);
+
+  iframe.srcdoc = wrapArtifactHtml(html);
 }