feat(search): syntax highlight regex literals by JoshuaKGoldberg · Pull Request #125664 · getsentry/sentry

JoshuaKGoldberg · 2026-09-25T20:36:02Z

Regex filter patterns are now tokenized with Prism's regex grammar and colored, so structure reads apart from literals. The highlighting appears both in the committed filter and, via an overlay drawn on the value input, while a pattern is being typed.

Measuring the filter's middle-ellipsis previously wrote element.textContent directly, which would destroy React-rendered children. It now swaps in a detached text node instead.

	Light	Dark
Committed	$Committed log search filter in light mode reading message matches regex ^(?:GET\|POST) /api/v\d+/[a-z-]+\?id=\d{2,4}(&.*)?$ syntax highlighted$	$Committed log search filter in dark mode reading message matches regex ^(?:GET\|POST) /api/v\d+/[a-z-]+\?id=\d{2,4}(&.*)?$ syntax highlighted$
Editing	$Editing log search filter in light mode reading message matches regex ^(?:GET\|POST) /api/v\d+/[a-z-]+\?id=\d{2,4}(&.*)?$ syntax highlighted$	$Editing log search filter in dark mode reading message matches regex ^(?:GET\|POST) /api/v\d+/[a-z-]+\?id=\d{2,4}(&.*)?$ syntax highlighted$

Closes LOGS-978.

linear-code · 2026-09-25T20:36:17Z

LOGS-978

github-actions · 2026-09-25T20:38:19Z

📊 Type Coverage Diff

✅ no issues found

JoshuaKGoldberg · 2026-09-28T12:22:02Z

@cursor review

cursor

Stale Bugbot comment from a previous run.

JoshuaKGoldberg · 2026-09-28T12:53:06Z

@cursor review

cursor

Stale Bugbot comment from a previous run.

Renders regex filter patterns with Prism's regex grammar, in the filter itself and in an overlay over the value input while editing.

…cters

Collapses the plain-pattern branch, shares one render function between the two call sites, swaps the measure/restore juggling for replaceChildren, and drops selectors for constructs RE2 rejects.

Flex shrinks the input below its autosized width, so a long pattern scrolls under the caret while the overlay kept showing the start of it.

tokens.syntax.selector sits at 3.88:1 on the tinted background an invalid filter gets, below the 4.5 AA bar for small text. colors.green600 is 4.82:1 there and 5.70:1 on the default background.

JoshuaKGoldberg · 2026-09-29T20:03:45Z

+  .token.char-set,
+  .token.escape,
+  .token.special-escape {
+    color: ${p => p.theme.colors.green600};


TODO: Talked with Martha, we'll go with a darker green in light mode. And I'll also make sure dark mode still looks good.

k-fish

Oooh was going to ask about this but figured it was out of scope, nice 👍

k-fish

😄

The highlighted value and the input now share one grid cell at least as wide as the value's text, so the input never scrolls its own text out from under the highlighting. The chip row scrolls long regex values instead, and keeps the tail of an input wider than the row in view.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 782a59d. Configure here.}

When the regex input is wider than the chip row, only pin the row to the input's tail while the caret is at the end. Otherwise each keystroke yanked the row toward the tail, leaving the caret stuck at its left edge.

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 25, 2026

vercel Bot deployed to Preview September 25, 2026 20:37 View deployment

JoshuaKGoldberg changed the title ~~feat(search): Syntax highlight regex literals in the search bar~~ feat(search): syntax highlight regex literals in the search bar Sep 28, 2026

JoshuaKGoldberg changed the title ~~feat(search): syntax highlight regex literals in the search bar~~ feat(search): syntax highlight regex literals Sep 28, 2026

vercel Bot deployed to Preview September 28, 2026 12:10 View deployment

vercel Bot deployed to Preview September 28, 2026 12:19 View deployment

cursor Bot reviewed Sep 28, 2026

View reviewed changes

Comment thread static/app/components/searchQueryBuilder/tokens/combobox.tsx

vercel Bot deployed to Preview September 28, 2026 12:35 View deployment

vercel Bot deployed to Preview September 28, 2026 12:48 View deployment

cursor Bot reviewed Sep 28, 2026

View reviewed changes

JoshuaKGoldberg marked this pull request as ready for review September 28, 2026 12:57

JoshuaKGoldberg requested a review from a team as a code owner September 28, 2026 12:57

JoshuaKGoldberg added this pull request to stack #125662 September 28, 2026 12:59

Base automatically changed from joshgoldberg/logs-976-validate-regex-patterns-client-side-with-re2js to master September 28, 2026 13:33

JoshuaKGoldberg requested a review from a team as a code owner September 28, 2026 13:33

JoshuaKGoldberg added 5 commits September 28, 2026 09:33

feat(search): Syntax highlight regex literals in the search bar

dddb902

Renders regex filter patterns with Prism's regex grammar, in the filter itself and in an overlay over the value input while editing.

ref(search): Give regex literals a base color distinct from metachara…

fd69c98

…cters

ref(search): Trim the regex highlighting down

09bff06

Collapses the plain-pattern branch, shares one render function between the two call sites, swaps the measure/restore juggling for replaceChildren, and drops selectors for constructs RE2 rejects.

fix(search): Keep the regex overlay in step with the input's scroll

36fe41b

Flex shrinks the input below its autosized width, so a long pattern scrolls under the caret while the overlay kept showing the start of it.

fix(search): Darken the regex character-set color for contrast

b2d73f4

tokens.syntax.selector sits at 3.88:1 on the tinted background an invalid filter gets, below the 4.5 AA bar for small text. colors.green600 is 4.82:1 there and 5.70:1 on the default background.

JoshuaKGoldberg force-pushed the joshgoldberg/logs-978-add-syntax-highlighting-to-regex-literals branch from fec3c2c to b2d73f4 Compare September 28, 2026 13:33

vercel Bot deployed to Preview September 28, 2026 13:34 View deployment

JoshuaKGoldberg commented Sep 29, 2026

View reviewed changes

k-fish reviewed Sep 29, 2026

View reviewed changes

k-fish approved these changes Oct 1, 2026

View reviewed changes

Comment thread static/app/components/searchQueryBuilder/tokens/combobox.tsx Outdated

Webkit fixes

4c7e7c1

vercel Bot deployed to Preview October 1, 2026 20:16 View deployment

vercel Bot deployed to Preview October 1, 2026 21:16 View deployment

cursor Bot reviewed Oct 1, 2026

View reviewed changes

Comment thread static/app/components/searchQueryBuilder/tokens/filter/valueCombobox.tsx Outdated

vercel Bot deployed to Preview October 1, 2026 21:34 View deployment

fix(search): Color regex escapes with the content.success token

f640db0

vercel Bot deployed to Preview October 1, 2026 22:36 View deployment

fix(search): Soften the dark-mode green for regex escapes

ffa680b

vercel Bot deployed to Preview October 2, 2026 00:27 View deployment

Navigation Menu

Uh oh!

feat(search): syntax highlight regex literals - #125664

feat(search): syntax highlight regex literals#125664
JoshuaKGoldberg wants to merge 10 commits into
masterfrom
joshgoldberg/logs-978-add-syntax-highlighting-to-regex-literals

JoshuaKGoldberg commented Sep 25, 2026 •

edited

Loading

Uh oh!

linear-code Bot commented Sep 25, 2026

Uh oh!

github-actions Bot commented Sep 25, 2026 •

edited

Loading

Uh oh!

JoshuaKGoldberg commented Sep 28, 2026

Uh oh!

cursor Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

JoshuaKGoldberg commented Sep 28, 2026

Uh oh!

cursor Bot left a comment •

edited

Loading

Uh oh!

JoshuaKGoldberg Sep 29, 2026

Uh oh!

k-fish left a comment

Uh oh!

k-fish left a comment

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

JoshuaKGoldberg commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear-code Bot commented Sep 25, 2026

Uh oh!

github-actions Bot commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Type Coverage Diff

Uh oh!

JoshuaKGoldberg commented Sep 28, 2026

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JoshuaKGoldberg commented Sep 28, 2026

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JoshuaKGoldberg Sep 29, 2026

Choose a reason for hiding this comment

Uh oh!

k-fish left a comment

Choose a reason for hiding this comment

Uh oh!

k-fish left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JoshuaKGoldberg commented Sep 25, 2026 •

edited

Loading

github-actions Bot commented Sep 25, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading

cursor Bot left a comment •

edited

Loading