fix: metadata badge interactions in trace list

[heiwen]

Clicking filter buttons or badge text inside trace list items was incorrectly triggering navigation to the trace detail view. The root cause: badge clicks bubbled up to the parent , and without preventDefault(), the browser followed the <a href directly (full page reload).

Changes:

• Call preventDefault() on filter toggle events so React Router skips navigation
• Call preventDefault() on badge text clicks (via Badge onClick) for the same reason
• Make HoverCard controlled (open/onOpenChange) and close it when a filter is applied from the popup

Summary by CodeRabbit

• Bug Fixes
  • Improved hover card visibility and closing behavior when interacting with tags.
  • Fixed event handling for metadata filter toggles so hover cards close correctly after updates.
  • Prevented unintended click propagation on tag badges to improve interaction stability.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9ba02137-3b3a-4791-85ea-aa24348bf8e4

📥 Commits

Reviewing files that changed from the base of the PR and between 2f17de7 and 5d7e225.

📒 Files selected for processing (1)

• apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/list.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/list.tsx

---

📝 Walkthrough

Walkthrough

TagStrip in the traces list now manages HoverCard visibility via local state; metadata filter toggles use preventDefault() and explicitly close the HoverCard after updating trace search params; HoverCardContent click prevents default; minor JSX reformatting in TagBadge.

Changes

Cohort / File(s)	Summary
TagStrip / traces list apps/console/app/routes/_shell.agent.$agentSlug.branch.$branchSlug.traces/list.tsx	Moved HoverCard open state into TagStrip (local open, setOpen), wired open/onOpenChange into HoverCard, switched event handling from stopPropagation() to preventDefault() for metadata filter toggles, added explicit setOpen(false) to close HoverCard after filter updates, added onClick → preventDefault() on HoverCardContent, and minor JSX reflow of TagBadge props.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Replace horizontal tag scrolling with hover card reveal in traces list #264 — Related prior change introducing the TagStrip + HoverCard pattern refined here.

Suggested reviewers

• turisanapo

Poem

🐰 A gentle card that opens and shuts,
I hop through tags and tidy up guts,
preventDefault keeps events in line,
Filters update, the hover says fine —
Hooray for tidy state, carrot-shaped shine 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing metadata badge interactions in the trace list that were causing unintended navigation. This matches the core issue addressed in the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-filter-side-effects

📝 Coding Plan

• Generate coding plan for human review comments

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}