feat(web): preview colors in code blocks - #7979
Conversation
Render swatches through Shiki token output so source and copied code stay unchanged.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
There was a problem hiding this comment.
UI consistency review found two issues in the new code-colour preview chrome: a themed-palette token mismatch for the swatch border, and swatch injection into non-colour tokens in generated markdown code blocks. Details inline.
Posted via Macroscope — UI Consistency
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4ce7faf. Configure here.
ApprovabilityVerdict: Skipped Macroscope did not run approvability analysis for this PR. Macroscope could not determine whether this PR modifies its approvability configuration, so the PR was not approved automatically. A PR that may change the rules that govern approval is never approved automatically. |
…rs readable The hex regex only rejected trailing hex digits, so identifiers such as #define, #fffxyz, and #fff-theme grew a swatch mid-word. The trailing lookahead now mirrors the leading boundary. The transformer ran on every language including the plain-text fallback, where a whole line is one token, so prose and issue references in unknown-language fences were scanned. Previews are now enabled only for languages that plausibly carry CSS colours, and the fallback renders without them. The swatch border mixed --contrast-foreground while themed palettes repaint the code surface, washing it out on custom themes. A themed counterpart now follows --code-foreground like the rest of the code-block chrome.
There was a problem hiding this comment.
One remaining false-positive case in the colour-preview matcher; the earlier theming and plain-text-fallback concerns look resolved.
Posted via Macroscope — UI Consistency
In script and data languages a 3- or 4-digit hex run is usually an issue reference in a comment or a JS private name, so those languages now only preview #rrggbb/#rrggbbaa. Style languages keep the short forms, where they are real colours.
1 participant
CSS hex values in agent code blocks were text-only, which made related theme colours hard to compare at a glance.
This adds a small swatch beside valid
#RGB,#RGBA,#RRGGBB, and#RRGGBBAAvalues in web and desktop chat. The swatch enlarges on hover. It is added only to Shiki's rendered preview, so the source and copied code stay unchanged.UI changes
Valid hex colours now show a compact preview beside the literal. Invalid lengths and hashes embedded in identifiers are left alone.
Testing
vp test run apps/web/src/lib/codeColorPreviews.test.ts apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/markdown-clipboard.test.ts(15 tests)vp lint --type-aware --type-check apps/web/src/components/ChatMarkdown.tsx apps/web/src/lib/codeColorPreviews.ts apps/web/src/lib/codeColorPreviews.test.tsvp run --filter @t3tools/web typecheckvp fmt --check apps/web/src/components/ChatMarkdown.tsx apps/web/src/index.css apps/web/src/lib/codeColorPreviews.ts apps/web/src/lib/codeColorPreviews.test.ts1.6xhover stateBuilt with GPT-5.6 Sol in T3 Code using the Codex harness.
Note
Low Risk
UI-only highlighting change with regex-gated hex values injected into existing Shiki HTML. No auth, data, or copy-path changes.
Overview
Adds inline color swatches next to CSS hex literals in highlighted chat code blocks so theme colors are easier to compare at a glance. Source text and copy stay unchanged; swatches are decorative (
aria-hidden) and scale up on hover.A Shiki transformer in
codeColorPreviewswraps standalone#rgb/#rgba/#rrggbb/#rrggbbaatokens. Style languages (CSS, HTML, Vue, etc.) get short and long forms; JS/TS/JSON/YAML/TOML only get 6/8-digit hex to avoid issue refs and private names. Other languages and plaintext highlight fallbacks get no swatches. Invalid lengths and hashes inside identifiers are ignored.Reviewed by Cursor Bugbot for commit c550a28. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add hex color swatch previews in highlighted code blocks
codeColorPreviewPartsparser andcreateCodeColorPreviewTransformerfactory in codeColorPreviews.ts that detect CSS hex colors in Shiki spans and wrap them in.chat-markdown-color-literal/.chat-markdown-color-swatchmarkupcodeColorPreviewTransformersselects transformers per language: short-hex support for style/template languages, long-hex-only for data/script languages, none for othersUncachedShikiCodeBlockin ChatMarkdown.tsx passes these transformers tohighlighter.codeToHtml; the plain-text fallback path applies no transformers<span>elements around hex color literals; consumers parsing rendered HTML may see the added markupMacroscope summarized c550a28.