feat: highlight logs green in trace waterfall

[karl-power]

Closes HDX-3526

Changes

• Colors logs events in the trace waterfall view green.
• Adds a new greenHighlight color that applies the same lightening transformation as the other highlight colors.
• Makes use of the barColor util DBTraceWaterfallChart again that was being overwritten.

Screenshots

[changeset-bot]

⚠️ No Changeset found

Latest commit: 48340f5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 10, 2026 5:11pm
hyperdx-v2-oss-app	Ready	Preview, Comment	Mar 10, 2026 5:11pm

[github-actions]

Claude finished @karl-power's task in 38s —— View job

---

Code Review

• ⚠️ Missing dark theme token → --color-chart-success-highlight is defined only in the light theme section of _tokens.scss (line 107) but not in the dark theme block (lines 212-214). Add it alongside --color-chart-error-highlight and --color-chart-warning-highlight in the dark theme. Fix this →

Otherwise looks clean — the refactor to move color/backgroundColor into the event data model (rather than eventStyles callback) is a nice simplification, and the log-type check in barColor follows the existing error/warn pattern correctly.

[github-actions]

Claude finished @karl-power's task in 1m 1s —— View job

---

Code Review

• Gather context and read changed files
• Provide review feedback

---

• ⚠️ src/hooks/useDrag.ts is dead code — the file is added but TimelineChart.tsx:6 still imports useDrag from ../../utils. Either migrate TimelineChart to use the new hook (and remove the one from utils.ts), or remove the new file. Fix this →

Otherwise looks good — the previous dark theme token issue (--color-chart-success-highlight missing from dark mode mixin) is now fixed, and the log green-highlight feature correctly follows the existing error/warn pattern in barColor.

[github-actions]

Claude finished @karl-power's task in 54s —— View job

---

Code Review

• Gather context and read changed files
• Provide review feedback

---

✅ No critical issues found.

The previous dark theme token issue (--color-chart-success-highlight missing from dark mode) is now fixed in both hyperdx/_tokens.scss and clickstack/_tokens.scss. The refactor to move color/backgroundColor into the event data model (removing the eventStyles callback) is a clean simplification, and the log-type green highlight in barColor follows the existing error/warn pattern correctly.

[github-actions]

Claude finished @karl-power's task in 1m 34s —— View job

---

Code Review

• Gather context and read changed files
• Provide review feedback

---

✅ No critical issues found.

The dark theme token concern (--color-chart-success-highlight missing from dark mode) is confirmed fixed in both hyperdx/_tokens.scss and clickstack/_tokens.scss. The useDrag.ts dead code mentioned in a prior review is no longer present. The refactor from eventStyles callback to color/backgroundColor fields on TTimelineEvent is a clean improvement, and the SourceKind.Log green highlight in barColor correctly follows the existing error/warn pattern.

The base branch was changed.

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the automerge label.

[github-actions]

Claude finished @karl-power's task in 14s —— View job

---

• Gather context and read changed files
• Provide review feedback

---

✅ No critical issues found.

All previously flagged issues have been resolved:

• Dark theme token (--color-chart-success-highlight) is now present in both hyperdx/_tokens.scss and clickstack/_tokens.scss
• Dead code (useDrag.ts) is no longer present
• The SourceKind.Log green highlight in barColor correctly follows the existing error/warn pattern
• The refactor from eventStyles callback to color/backgroundColor fields on TTimelineEvent is a clean improvement

Note: There is an active merge conflict on this PR (flagged by Kodiak). You'll need to resolve that before merging.

[github-actions]

E2E Test Results

✅ All tests passed • 88 passed • 3 skipped • 951s

Status	Count
✅ Passed	88
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[cursor]

Stale comment

✅ No critical issues found.

---

  

[github-actions]

✅ No critical issues found.

Small observation: --color-chart-success-highlight uses the same hex value (#80d9b3) for both light and dark modes across both themes. The other highlight colors (error, warning) also do this, so it's consistent with existing patterns — just worth noting if dark mode differentiation is needed later.

[cursor]

Stale comment

✅ No critical issues found.

---

  

[cursor]

Code Review

✅ No critical issues found.

The changes are clean and well-structured:

• Color logic ordering in barColor is correct — error takes priority over warn, which takes priority over log type, matching existing precedence conventions.
• backgroundColor as required field on TTimelineEvent — the only consumer (DBTraceWaterfallChart.tsx) is properly updated, so no TypeScript or runtime issues.
• eventStyles prop removal — only one caller existed and it's cleaned up; the inline defaults (borderRadius, fontSize) are now hardcoded directly in the row renderer, which is simpler.
• SCSS tokens — --color-chart-success-highlight added to all four theme sections (hyperdx light/dark, clickstack light/dark) consistently.
• Palette constants — greenHighlight added to both CHART_PALETTE and CLICKSTACK_CHART_PALETTE in sync with the CSS variables.

---