feat(chat): render HTML, SVG, image and PDF artifacts inline in the conversation - #17822

HUMAN:

HUMAN:
I've manually tested the preview cards across all supported formats in Chrome. Verified that report.html renders with linked styles while blocking script execution, chart.svg renders as a clean vector document, and PDFs load in the browser viewer. Also I've confirmed lazy mounting via IntersectionObserver and verified that all existing/new unit tests pass.

AGENT:

A file-editor create event whose path is .html, .htm, .svg, a raster
image or a PDF now renders an inline card with a height-clipped live preview,
plus Expand / View / Copy / Download — mirroring the Markdown artifact card from
#16185. Markdown behavior is unchanged; the Markdown card was refactored to share
the same plumbing rather than duplicated.

Stacked PR — part 1 of 2. Office documents (.docx / .xlsx / .pptx)
are the second half and land in a follow-up PR stacked on this one, because
they share no code with the browser-renderable formats: this PR is the whole
"render what the browser can already render" path, the follow-up adds the
client-side OOXML unpacker. Splitting keeps each diff to one reviewable
subsystem. Review and merge this one first.

📄 Design doc (before → after, with the flow diagram and the API delta):
https://htmlpreview.github.io/?https://raw.githubusercontent.com/analisaperlengkapan/OpenHands/pr-assets/pr-assets/inline/17818-inline-artifacts.html

Evidence — real browser, mock API, no LLM

The demo conversation fixture now creates canvas.md, report.html (linking a
sibling ./report.css), chart.svg, a PNG and a PDF, so the flow is reviewable
without a live stack. I ran the app (npm run dev:mock -- --port 3001) and drove
it in real Chromium with Playwright, then probed the rendered DOM and the frames:

Note on method: the mock API is an MSW service worker, which intercepts fetch
but not an iframe's document navigation, so a preview frame would 502 in mock
mode. The capture routes the frame URLs to the exact bytes the app's own mock
serves (fetched in-page, where MSW does intercept). Same bytes, real component,
real sandbox attribute.

Evidence — every preview is legible to the model

The bar for this change is that whatever the card renders is content a model can
consume, not a decorative box. That is directly relevant to a natively
multimodal model such as DeepSeek V4.1 Flash (released 2026-09-10, API name
deepseek-flash: text and image input, 1M-token context, MIT). The capture
therefore records, per card, the element rendered, its accessible name, and the
text the card exposes:

A regression test asserts exactly that (artifact-preview.test.tsx → "labels its
content so the preview is machine-readable, not just pixels").

Reproduce:

npm ci
npm run dev:mock -- --port 3001
# the demo conversation creates canvas.md, report.html (+ report.css), chart.svg,
# assets/preview.png, docs/spec.pdf
OUT_DIR=/tmp node /tmp/capture-17818.mjs   # prints the first table above

Screenshots (clipped card, expanded frame, side-by-side):

• expanded card
• collapsed card
• HTML card
• SVG card

Checks

• npx vitest run → 766 files, 8040 passed | 7 todo.
• npx tsc --noEmit → clean.
• npx eslint on the touched files → 0 errors. The shadcn/no-arbitrary-values
  warnings are the same off-token utilities the existing
  markdown-file-preview.tsx already emits (text-[11px], tracking-[0.11px]),
  reused deliberately so the cards look identical.

Why

Only Markdown gets a rich inline preview today (src/utils/is-markdown-file-path.ts
accepts md/markdown/mdx; markdown-file-preview.tsx renders it). Every other
artifact — including the HTML and SVG the agent just wrote — falls through to a
<CodeBlock> of raw source, so the user has to leave the chat and find the file in
the Files drawer. The Files drawer can render HTML (file-content-viewer.tsx), but
that is not the conversation stream. Reported in #17818; the original request (#2691)
was auto-closed by the stale bot with no successor.

Summary

• Add ArtifactPreview, a live-preview primitive that renders by kind:
  <iframe sandbox="allow-same-origin"> pointed at the workspace static URL
  for HTML/SVG, so relative ./style.css / images resolve while the missing
  allow-scripts keeps agent-written <script> and inline handlers inert; an
  <img alt=fileName> for raster images; and an unsandboxed iframe for PDFs,
  because a sandboxed frame is not allowed to instantiate a plugin and Chromium's
  viewer would never appear. Height-clipped (160 px) with Expand (512 px), View
  (Files drawer), Copy source and Download. The frame mounts lazily on
  IntersectionObserver, so a long conversation does not keep every preview alive.
• Replace the per-format predicates with one classifier,
  getArtifactPreviewKind → markdown | frame | image | pdf | null, and route by
  it in file-editor.tsx. isPreviewableArtifactPath now covers every
  rich-preview format, so these creates are group breakers that start expanded,
  exactly like Markdown creates.
• Add fixtures (artifact-formats-demo.ts) carrying a real PNG and PDF, served by
  the mock fileserver, so the demo conversation exercises every format without an
  LLM or a live workspace.

Issue Number

Fixes #17818

How to Test

1. npm ci
2. npx vitest run __tests__/components/conversation-events/ __tests__/utils/is-previewable-file-path.test.ts __tests__/components/features/chat/tool-visualizers/ __tests__/api/mock-conversation-handlers.test.ts — these assert the sandbox tokens, the type allowlist and the lazy-mount behavior.
3. npm run dev:mock and open http://127.0.0.1:3001/conversations/canvas-demo: report.html renders as a styled card (blue heading from the sibling CSS), chart.svg renders as a chart, assets/preview.png renders as an image, and docs/spec.pdf opens in the browser's PDF viewer — all without leaving the chat. Expand grows each preview; the HTML heading never changes to "SCRIPT RAN", i.e. the fixture's own <script> stayed inert.

Video/Screenshots

Captured with the tracked harness against the running dev:mock app in real
Chromium; the tables above are its output. The images are hosted on a throwaway
pr-assets branch of the fork purely so GitHub renders them; they are not part
of the merged tree.

Collapsed card (height-clipped, as it appears in the stream):

Expanded card (HTML renders, sibling ./report.css applied, <script> inert):

HTML and SVG each render as a document (SVG shown):

Type

• Bug fix
• Feature
• Refactor
• Breaking change
• Docs / chore

Notes

• Stacked on nothing; the follow-up stacks on this branch. The Office PR
  targets feat/inline-html-svg-artifact-preview, so merge this first.
• No new dependencies.
• The classifier is the single owner of "which formats get a rich preview"; adding
  a format means one entry there plus one render branch, not a new predicate.