[web] Render HTML in replace_lines diff output

[2witstudios]

Motivation

• Fix tool output where replace_lines diffs showed raw HTML tags instead of rendered rich text.
• Align diff rendering with the editor and read_page so rich-text fragments display as HTML in tool results.

Description

• Updated apps/web/src/components/ai/shared/chat/tool-calls/RichDiffRenderer.tsx to import and use sanitizeHtmlAllowlist from content-utils.
• Per-line rendering now detects HTML fragments with a regex and sanitizes them via sanitizeHtmlAllowlist, falling back to markdownToHtml for plain text lines, and uses a safeRenderedContent variable when assembling the diff HTML.
• Kept the final DOMPurify.sanitize step that was already present to ensure SSR safety and an extra sanitization pass before dangerouslySetInnerHTML.

Testing

• Ran pnpm --filter web exec eslint src/components/ai/shared/chat/tool-calls/RichDiffRenderer.tsx, which passed for the changed file.
• Ran pnpm --filter web typecheck, which failed due to pre-existing workspace/module-resolution type errors unrelated to this change (several @pagespace/lib/* imports); the failure is environment-wide and not caused by this patch.
• Attempted a Playwright screenshot to validate UI, but the local web server was not running (ERR_EMPTY_RESPONSE), so no visual capture was produced.

---

Codex Task

Summary by CodeRabbit

• Bug Fixes
  • Enhanced security in diff rendering by implementing HTML sanitization. Rich diff content now undergoes proper sanitization across all line types to prevent unsafe HTML injection.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

HTML content in diff lines is now detected and routed through sanitizeHtmlAllowlist for security, while non-HTML content continues using markdownToHtml. The sanitized output replaces direct renderedContent references across all diff line types.

Changes

Cohort / File(s)	Summary
HTML Sanitization in Diff Rendering apps/web/src/components/ai/shared/chat/tool-calls/RichDiffRenderer.tsx	Added HTML detection logic (contentIsHtml) to route content through sanitizeHtmlAllowlist instead of directly using markdown-converted output. Sanitized content (safeRenderedContent) now used consistently across unchanged, added, and removed diff lines. Import expanded to include sanitizeHtmlAllowlist from content-utils.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• feat(ai): render HTML content in AI stream instead of raw JSON #307: Modifies the same RichDiffRenderer.tsx rendering logic to detect and sanitize HTML content using sanitizeHtmlAllowlist, directly paralleling this PR's security improvements.

Poem

🐰 A rabbit hops through diff lines with care,
Detecting HTML lurking here and there,
With allowlist sanitization in place,
No unsafe HTML darkens this space!
Safe rendered content shines bright and true,
Security woven through and through! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title specifically describes the main change: enabling HTML rendering in replace_lines diff output, which directly aligns with the primary objective of fixing raw HTML tag display.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/fix-rich-text-rendering-for-replace-lines-tool

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}