fix(site/src/pages/AgentsPage/components/ChatElements): align code block rendering#24966
Merged
Conversation
kylecarbs
approved these changes
May 5, 2026
… block language handling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
🤖 This PR was written by Coder Agent on behalf of Danielle Maywood
Agent markdown fenced code blocks keep using
@pierre/diffsFileViewerso the original Shiki syntax highlighting quality is preserved. The markdown renderer now applies host CSS variables and Shadow DOMunsafeCSSoverrides so fenced blocks match the Agent terminal block feel: Geist Mono at 12px, 20px line height, symmetric 8px vertical padding, 12px line padding, collapsed disabled line-number gutter, and no phantom scrollbar padding.Also applies the shared
DIFFS_FONT_STYLEto a generic toolFileViewerpath that was missing it.Research
Agent assistant responses render through
site/src/pages/AgentsPage/components/ChatElements/Response.tsx, not the shared Markdown component.Markdown fenced code blocks are rendered by the
Streamdownpreoverride. The right component to keep isFileViewerfrom@pierre/diffs/react, which renders a<diffs-container>web component with open Shadow DOM and Shiki-highlighted token spans.The visual mismatch came from the
@pierre/diffsdefault Shadow DOM layout, especially[data-code]asymmetric padding for scrollbar space, the disabled line-number gutter still reserving width, and default font sizing. These can be corrected without replacing the component by combiningoptions.unsafeCSSfor Shadow DOM selectors withstyleCSS variables on thediffs-containerhost.Storybook interaction tests can inspect
host.shadowRootdirectly, so the assertions now verify the actual FileViewer DOM, padding, font sizing, collapsed gutter, absence of raw fences, and presence of inline-colored highlighted spans.Validation
The pre-commit hook passed for the code-change commits.