perf(web): revisiting a thread reuses its rendered Markdown instead of parsing again#27480

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

External image Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: t3/optimize-markdown-rendering
• File: .coderabbit.config.ts
• Commit: 9db5777
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Team
• Run ID: 16058c7b-361f-4a05-b87c-539b4a0c2051

External image Commits

Reviewing files that changed from the base of the PR and between 32ecd71726fee16f335484c1f95cbce126d461f6 and 9db57770d4e8b48f98835bac31be4fa5af0a0b27.

External image Files ignored due to path filters: 1

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

External image Files selected for processing: 4

• apps/web/package.json
• apps/web/src/components/ChatMarkdown.tsx
• apps/web/src/components/chat/markdownRenderer.test.tsx
• apps/web/src/components/chat/markdownRenderer.ts

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

Chat Markdown now renders through a configurable renderer instead of ReactMarkdown. The renderer applies URL transforms and caches rendered elements. Chat rendering selects shared or per-instance plugin lists and enables caching for completed, non-streaming text.

Changes: Chat Markdown rendering

Layer / File(s)	Summary
Renderer, cache, and validation apps/web/package.json, apps/web/src/components/chat/markdownRenderer.ts, apps/web/src/components/chat/markdownRenderer.test.tsx	Adds renderer dependencies and createMarkdownRenderer. The renderer processes Markdown, transforms applicable URL attributes, and caches rendered elements within an estimated-size limit. Tests compare output with ReactMarkdown and check cache reuse.
Chat rendering integration apps/web/src/components/ChatMarkdown.tsx	Moves URL handling to module scope and routes Markdown through the new renderer. It reuses renderers for shared plugin lists and passes caching flags for completed text.

Priority: External image Normal

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

Change: Refactor

Sequence Diagram(s)

mermaid

1	sequenceDiagram
2	participant ChatMarkdown
3	participant MarkdownSource
4	participant createMarkdownRenderer
5	ChatMarkdown->>MarkdownSource: Pass text, plugin settings, and sharing flags
6	MarkdownSource->>createMarkdownRenderer: Create a renderer when plugins are not shared
7	createMarkdownRenderer-->>MarkdownSource: Return a renderer
8	MarkdownSource->>createMarkdownRenderer: Render text with the cache setting
9	createMarkdownRenderer-->>MarkdownSource: Return a React element

Suggested reviewers: maria-rcks

No actionable issue is established; the change is mergeable subject to normal checks.

^Failed Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check	Warning	The description follows the template's main sections in substance. The Problem section is covered by the opening paragraph, which explains that Markdown reparses on every mount and was the second-larg…	Add a Scope and approval section. Link the triaged bug issue or the maintainer-approved discussion, including the approval comment. If no prior issue exists, explain why this change qualifies as a very small, focused fix of an obvious bug. …

^Passed Passed checks: 3 passed

Check name	Status	Explanation
Title check	Passed	The title names the main change: revisiting a thread reuses cached rendered Markdown instead of parsing again. The changeset adds a markdown renderer with a per-message cache of rendered React element…
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: Title check

Explanation

The title names the main change: revisiting a thread reuses cached rendered Markdown instead of parsing again. The changeset adds a markdown renderer with a per-message cache of rendered React elements, which matches the title. The title uses the conventional commit prefix perf(web): and is specific enough for a teammate scanning history. It is 84 characters, which is longer than ideal but still readable.

Full details: Description check

Explanation

The description follows the template's main sections in substance. The Problem section is covered by the opening paragraph, which explains that Markdown reparses on every mount and was the second-largest render cost when switching threads. The Change section explains the renderer swap, the frozen processors, the cache limits, and the streaming bypass. Verification includes measured timings from a production build, and it lists the new parity and cache-eviction tests. The Scope and approval section is missing. It does not link a triaged bug issue or maintainer discussion, and it gives no justification for skipping one. The description also lacks the required before/after evidence framing for UI-adjacent behavior, although the change is primarily performance-related and the measurement table partly covers this. The AI-attribution line is present.

Resolution

Add a Scope and approval section. Link the triaged bug issue or the maintainer-approved discussion, including the approval comment. If no prior issue exists, explain why this change qualifies as a very small, focused fix of an obvious bug. Also confirm that the Verification section states what was not checked, such as first-visit behavior in other clients or browsers, if applicable.

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR