feat(web): render LaTeX equations in chat

[matuscvengros]

Problem

Chat displays raw TeX for $...$ and $$...$$ equations, making technical explanations with fractions, subscripts and other notation difficult to read.

Change

Add inline and display equation rendering with remark-math and KaTeX to the shared web/desktop chat renderer. Long display equations scroll within the message, and copying complete equations preserves their TeX source.

Keep currency, skill references, escaped dollars and code literal. Sanitize authored HTML before generating KaTeX markup.

Scope and approval

One capability in the shared web/desktop chat renderer: equation rendering with its necessary layout, streaming and clipboard behavior. Native mobile uses a separate renderer and is outside this change.

Verification

• 123 focused tests pass (the original 121 plus two new cases for untrusted math commands) across ChatMarkdown, incremental Markdown and clipboard behavior, covering streaming, invalid TeX, literal dollars/code, HTML sanitization, blocked TeX links/images/HTML commands in both HTML modes, and equation copying.
• Web typecheck and targeted formatting/lint checks pass, with three existing React lint warnings.
• Verified the actual chat against isolated dev state: 13 equations, four display blocks, zero KaTeX errors. At 390px, long equations scroll without widening the page; copying preserves TeX. Native desktop shell and mobile were not separately tested.

Before: raw TeX in the supplied example.

After: rendered equations in the dummy chat response.

Narrow web viewport: equations remain inside the message.

Implemented and verified with GPT-6.1-Sol through the Codex harness in T3 Code.

[matuscvengros]

Difficult to use T3 Code for heavy math work atm. Consider implementing.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: ce8ed8fd-666f-4560-83b6-3b3293855187

📥 Commits

Reviewing files that changed from the base of the PR and between 0f086fe and dc0871c.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• apps/web/package.json
• apps/web/src/components/ChatMarkdown.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The web chat Markdown pipeline now parses and renders inline and display math with KaTeX in both raw-HTML modes. Clipboard serialization emits rendered equations as Markdown TeX and handles partial selections. Tests cover rendering, streaming equivalence, and clipboard behavior.

Changes

Chat Markdown math

Layer / File(s)	Summary
Math parsing and rendering apps/web/package.json, apps/web/src/markdown-math.ts, apps/web/src/components/ChatMarkdown.tsx, apps/web/src/index.css, apps/web/src/components/ChatMarkdown.test.tsx, apps/web/src/markdown-incremental.test.tsx	The Markdown pipeline parses math tokens and renders them with KaTeX in parsed-HTML and literal-HTML modes. Parsed-HTML mode sanitizes authored HTML before KaTeX processing. Styles constrain displayed equations, and tests cover rendering and streaming equivalence.
Math clipboard serialization apps/web/src/markdown-clipboard.ts, apps/web/src/markdown-math-clipboard.test.ts	Clipboard serialization emits inline and display TeX delimiters for rendered math. It handles math alongside code and partial selections.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ChatMarkdown
  participant remarkChatMath
  participant rehypeSanitize
  participant rehypeKatex
  ChatMarkdown->>remarkChatMath: Parse inline and display math
  ChatMarkdown->>rehypeSanitize: Sanitize authored HTML in parsed-HTML mode
  rehypeSanitize->>rehypeKatex: Pass sanitized math nodes
  ChatMarkdown->>rehypeKatex: Render math in literal-HTML mode

Loading

Possibly related PRs

• pingdotgg/t3code#8972: Both changes add KaTeX support to the chat Markdown pipeline; this PR also adds clipboard serialization and streaming coverage.

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to dc087

The change adds equation rendering and TeX-preserving copy behavior. No unresolved issue in the reviewed boundaries blocks merging, subject to normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to dc087

The renderer preserves HTML sanitization and disables TeX commands that create links, images, or arbitrary HTML. A narrow disclosure risk remains: copying part of an equation can put the complete equation into rich-text clipboard data. This requires a user copy/paste action and affects content already present in the rendered message.

Retained concerns

• Low · security · inferred: Partial equation copying removes the TeX annotation but retains the complete semantic MathML in the rich clipboard payload. A rich-paste recipient can therefore receive equation content outside the user's selection.

Security review details

Security Blast Radius

• inferred — The identified disclosure is bounded to equation content already rendered in a copied selection's message or document. It requires copying a partial equation and sharing or pasting the rich payload; the inspected path does not establish automatic network transmission or additional service privileges.

Security Findings and Attack Paths

• inferred — A selection beginning before an equation and ending within its visual symbols includes the preceding complete MathML subtree. Removing its annotation makes plain-text serialization respect the partial selection, but HTML cleanup retains the full semantic expression. The existing x+y fixture checks that plain text contains only x; it does not check whether rich HTML still contains y.

Trust Boundaries and Controls

• observed — The implementation retains authored-HTML sanitization, literal-mode escaping, and explicit trust denial in both math pipelines. Security tests exercise JavaScript links, image commands, and arbitrary HTML commands. These controls counter an injection concern but do not constrain which already-rendered equation content is exported to the clipboard.

Resilience and Maintainability Implications

• observed — Math customization uses processor-owned data rather than module-level mutable parser state. The existing incremental parser clones cached nodes before transforms, while clipboard processing mutates detached selection clones rather than the live message DOM. The identified weakness is therefore export completeness, not a demonstrated cross-message state-contamination path.

Hardening Proposals

• proposed — Apply equation-completeness rules to both clipboard flavors. For partial selections, exclude the complete semantic MathML as well as its TeX annotation and derive rich output from selected content. Validate both payloads for inline and display equations at partial-selection boundaries.

---

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

• Ignore (reviewers only)

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Approvability	❌ Error	The pull request needs a maintainer's review. It adds three dependencies in apps/web/package.json: katex, rehype-katex, and remark-math. This matches the rule "Adds, upgrades, or patches a dep…	Maintainer review is required for the dependency additions and lockfile changes.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: rendering LaTeX equations in the web chat.
Description check	✅ Passed	The description covers the problem, implementation, scope, verification results, limitations, and UI evidence. The scope section does not include a triaged issue or explicit maintainer approval link, …
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Approvability

Explanation

The pull request needs a maintainer's review. It adds three dependencies in apps/web/package.json: katex, rehype-katex, and remark-math. This matches the rule "Adds, upgrades, or patches a dependency." It also updates pnpm-lock.yaml.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

[coderabbitai]

Pre-merge checks failed. Please resolve the failing checks before merging.

[coderabbitai]

Pre-merge checks failed. Please resolve the failing checks before merging.

[AKolenda]

I second this, massive + nice implementation

[coderabbitai]

Pre-merge checks failed. Please resolve the failing checks before merging.

[matuscvengros]

This is a feature request #9641 with several PRs #14574, #12118, #16469 so it would be good to do something about it. Research workflows are unusable atm.