feat: migrate chat markdown rendering from react-markdown to Vercel Streamdown

[Jing-yilin]

Summary

Replace react-markdown + rehype-highlight with Vercel's streamdown + @streamdown/code for streaming-optimized markdown rendering in the chat panel.

Why

Current ReactMarkdown re-parses the entire markdown string on every streaming delta, causing:

• Flickering on incomplete code blocks/fences during streaming
• Unnecessary full re-renders on each token
• Layout jank as elements jump between incomplete/complete states

streamdown is purpose-built for AI streaming with memoized section rendering and graceful handling of unterminated blocks.

Changes

File	Change
package.json	Add streamdown, @streamdown/code; remove react-markdown, rehype-highlight
src/app/globals.css	Add @source directives + CSS custom properties for streamdown
src/components/chat/chat-panel.tsx	Swap ReactMarkdown for Streamdown component

Testing

• npx tsc --noEmit -- passes
• bun run test -- all 123 tests pass
• No new lint issues introduced

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tryskills.sh	Ready	Preview, Comment	Apr 22, 2026 2:02pm

[Jing-yilin]

Found 1 blocking issue:

• src/app/globals.css:2-3 — The new Tailwind @source paths are incorrect for this repo layout. globals.css lives in src/app, so ../node_modules/... resolves to src/node_modules/..., which does not exist. next build still succeeds, but Tailwind never sees Streamdown's utility classes, and the production CSS bundle is missing classes Streamdown relies on (bg-background, border-border, text-muted-foreground, rounded-md, etc.). That means markdown/code blocks will render largely unstyled after deploy. These paths need to point at the real root node_modules for this app (here that is ../../node_modules/...).

[Jing-yilin]

I checked the latest diff after the @source path fix and found two remaining issues:

1. src/components/chat/chat-panel.tsx:4-11 changes the renderer to Streamdown without preserving the previous "raw HTML is escaped" behavior. react-markdown was previously rendering raw HTML as text, but Streamdown parses sanitized HTML by default. In practice that means assistant output like <img src="https://example.com/pixel.png"> now renders a real image element and even emits a preload for that remote URL, which is a privacy/security regression versus the old renderer. If we want to keep the previous trust boundary, this needs skipHtml (or an equivalent restriction on allowed HTML) on Streamdown.

2. src/app/globals.css:28-47 adds the core Streamdown design tokens, but Streamdown's code/mermaid chrome also uses bg-sidebar and border-sidebar. Those tokens are never defined here, so Tailwind drops those utilities from the compiled CSS entirely. I verified the rendered Streamdown markup still contains bg-sidebar / border-sidebar, but the production CSS generated by next build contains neither utility. The result is partially unstyled code-block/action-bar chrome in production. This needs sidebar color tokens (or custom Streamdown class overrides) before the migration is visually complete.

[Jing-yilin]

1. @streamdown/code is now wired in with its default github-light / github-dark Shiki theme pair at src/components/chat/chat-panel.tsx, but the app root never sets a .dark class (src/app/layout.tsx only applies the font vars). Streamdown therefore uses the light token colors on our dark chat surface. I reproduced this locally by rendering a fenced block with the new renderer: the tokens came back as --sdm-c: #24292E; --shiki-dark: #E1E4E8, so keywords/body text end up near-black against the dark --background / bg-background container. This is a visible regression for every code block. Please either force a single dark shikiTheme when rendering Streamdown, or mark the app root as .dark so the dark token branch is actually used.

Validation: npx tsc --noEmit, bun run test, and bun run build all pass on the current head.

[Jing-yilin]

One remaining issue:

• src/components/chat/chat-panel.tsx:119 — skipHtml is not preserving the previous react-markdown behavior here. With both react-markdown and Streamdown, the default behavior is to escape raw HTML into visible text. Setting skipHtml instead drops those nodes entirely. That means assistant replies containing literal HTML/XML/SVG examples (for example <div>...</div>) will silently lose content instead of displaying it. Streamdown already hardens rendering by default, so this prop is introducing a content regression rather than fixing a security gap.

I validated the rest of the PR as well: bun run build, npx tsc --noEmit, and bun run test all pass on the current head.

[Jing-yilin]

Codex Review

[Medium] Raw assistant HTML now creates live remote image requests

Streamdown is now used with its default HTML handling at src/components/chat/chat-panel.tsx:119. Unlike the previous react-markdown setup, that turns raw assistant HTML such as <img src=\"https://attacker.example/track.png\"> into a real image element. I verified this by rendering Streamdown directly; the output includes both a live <img> tag and a preload link for the remote URL.

That means an untrusted model response can silently trigger browser requests to attacker-controlled origins again, leaking user IP / user-agent and undoing the old "show raw HTML as text instead of loading it" behavior. Streamdown's sanitization strips scripts, but it does not preserve the previous HTML-escaping policy.

Refs: src/components/chat/chat-panel.tsx:119

[Jing-yilin]

I found one remaining high-confidence issue in the current diff.

src/app/globals.css:43 only exports --color-background and --color-foreground inside @theme inline, but Streamdown's UI uses additional Tailwind tokens like bg-sidebar, bg-muted, border-border, and text-muted-foreground. Defining --sidebar, --muted, --border, etc. in :root is not enough on its own for Tailwind v4 to generate those utility classes.

I verified this against a production build: .next/static/chunks/*.css contains bg-background, but it does not contain .bg-sidebar, .bg-muted, .border-border, or .text-muted-foreground. That means the new code block shell, action chrome, and link-safety controls render with missing/inherited styling even though the build passes.

Suggested fix: add the missing theme mappings in @theme inline, e.g. --color-muted, --color-muted-foreground, --color-border, --color-input, --color-primary, --color-primary-foreground, --color-sidebar, and --color-sidebar-foreground (and any other Streamdown tokens you intend to use).

[Jing-yilin]

I found one remaining high-confidence issue in the current diff.

Medium - Raw HTML is still interpreted as live DOM instead of shown literally

src/components/chat/chat-panel.tsx:120

The new disallowedElements list blocks some risky tags, but it does not restore the old react-markdown behavior of escaping raw HTML into visible text. With the current Streamdown setup, assistant output like <div>ok</div>, <details><summary>sum</summary>body</details>, and <input disabled value="x"> is still parsed into live DOM, while the previous renderer displayed those strings literally.

That leaves a real behavior regression in chat responses that contain HTML/XML examples or model-generated markup: content can now be reformatted into interactive/structural UI instead of being shown verbatim. I reproduced this locally against the current code path; for example, <input disabled value="x"> now renders as an actual checkbox element instead of literal text.

The remaining fix needs to fully preserve literal raw-HTML display semantics, not just disallow a subset of tags.

Validation on the current head: npx tsc --noEmit, bun run test, and bun run build all pass.