feat: Add input filter pills below search input to make filters usage more clear on seach page

[MikeShi42]

Fixes HDX-2405

[changeset-bot]

🦋 Changeset detected

Latest commit: 492be87

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Minor
@hyperdx/api	Minor
@hyperdx/otel-collector	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another 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	Apr 2, 2026 10:14pm

[github-actions]

PR Review

• ⚠️ ActionIcon variant="transparent" violates project conventions → Change to variant="subtle" (for the default gray close button) per agent_docs/code_style.md, which explicitly lists transparent as forbidden and calls subtle the "default ActionIcon variant". For the red excluded pill remove icon, consider variant="danger" or keep variant="subtle" with the red color.

• ⚠️ expanded state persists across filter changes — if you're in expanded state and filters are removed (count drops to ≤8), the expanded flag stays true, so re-adding filters will bypass the collapse entirely until page reload. Consider resetting expanded via a useEffect when pills.length <= MAX_VISIBLE_PILLS.

✅ No critical bugs or security issues. Tests are comprehensive and cover all key behaviors.

[github-actions]

E2E Test Results

✅ All tests passed • 127 passed • 3 skipped • 1016s

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

Tests ran across 4 shards in parallel.

View full report →

[pulpdrew]

Neat feature! A couple small suggestions:

[pulpdrew]

IMO the contrast could be better in light mode

[pulpdrew]

I don't think the displayField truncation is working as expected - here it adding the elipsis at the end but from the code it looks like you want it to be at the beginning (which I think makes sense).

You could truncate="start" instead to have mantine handle it. Also, with truncate here, do we need to do the .slice on the field and value?

Suggested change

	<Text
	span
	size="xxs"
	c="dimmed"
	fw={500}
	style={{ flexShrink: 0, maxWidth: 100 }}
	truncate
	>
	{displayField}
	</Text>
	<Text
	span
	size="xxs"
	c="dimmed"
	fw={500}
	style={{ flexShrink: 0, maxWidth: 100 }}
	truncate="start"
	>
	{displayField}
	</Text>