feat(source-picker): chip + kebab menu UX

[alex-fedotyev]

Summary

Cleans up the source picker by separating the two use cases that were tangled together inside one dropdown:

• Primary: pick a source. The pill becomes a real chip (icon + name + chevron) with a single hover affordance on the input root, and the dropdown lists sources only.
• Secondary: manage sources. View schema, Edit source, Manage sources, Create new source move into an adjacent kebab. The dropdown stops mixing data items with action items, and the "Schema" preview text stops outranking the source name visually.

Selector is now just a selector:

Actions/management moved to a separate menu:

What changed

• SourceSelect.tsx: refactor to chip + kebab. Extract a reusable SourceManagementMenu so non-SourceSelectControlled callers (e.g. DBTableSelect) can hang the same actions off their own input. Drop the old sourceSchemaPreview prop in favor of onSchemaPreview + isSchemaPreviewEnabled.
• SourceSchemaPreview.tsx: add a controlled variant that lets the parent own open state and drive the modal from outside; expose isSourceSchemaPreviewEnabled(source) for callers that need to gate a menu item.
• 9 callsites updated to the new API: DBSearchPage, DBChartPage (via DBEditTimeChartForm/ChartEditorControls), DBTracePanel, DashboardFiltersModal, KubernetesDashboardPage, DBServiceMapPage, DBTableSelect, RawSqlChartEditor. PromqlChartEditor uses SourceSelect but not the schema preview so it's untouched.
• Sanity fix along the way: text-sucess-hover → text-success-hover.

Drive-by fixes spotted while clicking through

• Manage sources used to behave like Edit source. router.push('/team') from the kebab let the page's nuqs query state (source/where/select/filters/orderBy) write itself back into the new URL via history.replaceState on the way out, so SourcesList auto-expanded the leaked ?source=. Switched to a hard navigation so Manage sources lands on a clean /team?tab=data with everything collapsed.
• Duration Precision slider on the Trace source form was unreadable. Mantine 9's Slider has :where([data-orientation="vertical"]) .<part> rules whose compiled selector matches when any ancestor is vertical. Mantine 9's Card sets data-orientation="vertical" by default and the source form renders inside a Card, so the slider's track collapsed to 8px and the four marks (Seconds / Millisecond / Microsecond / Nanosecond) stacked on top of each other. Added a styles override for every affected part (trackContainer, track, bar, thumb, markWrapper, markLabel, label) so the slider renders horizontally again with the value badge above the thumb.

Test plan

• Lint, typecheck, prose-lint clean on changed files
• Unit tests pass for SourceSelect, SourceSchemaPreview, DBTracePanel, DBSearchPage, SourceForm
• Knip surfaces no new issues
• Manage sources lands on a clean /team?tab=data with all rows collapsed
• Edit source lands on /team?source=<id> with that source expanded
• Duration Precision slider renders horizontally with the value badge floating above the thumb
• Manual click-through across the 9 callsites in light + dark: chip hover, kebab open/close, view-schema modal, edit-source route, create-new modal
• Verify the dropdown lists data items only (no Edit / Create entries leaked back in)

[changeset-bot]

🦋 Changeset detected

Latest commit: d95b8de

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	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

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	Jun 1, 2026 12:50pm
hyperdx-storybook	Ready	Preview, Comment	Jun 1, 2026 12:50pm

[github-actions]

🟡 Tier 3 — Standard

Introduces new logic, modifies core functionality, or touches areas with non-trivial risk.

Why this tier:

• Diff size: 735 production lines changed (Tier 2 max: < 250)

Review process: Full human review — logic, architecture, edge cases.
SLA: First-pass feedback within 1 business day.

Stats

• Production files changed: 14
• Production lines changed: 735 (+ 279 in test files, excluded from tier calculation)
• Branch: alex/source-chip-ux-prototype
• Author: alex-fedotyev

To override this classification, remove the review/tier-3 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

Deep Review

✅ No critical issues found. Two P2 items worth fixing before merge, plus a handful of P3 nits and testing gaps. The drive-by hard-nav rework introduces a couple of new edges (dirty-form data loss, modal state drift) that the new tests don't cover.

🟡 P2 — recommended

• packages/app/src/components/SourceSchemaPreview.tsx:239 — In controlled mode the Modal is gated on {isEnabled && <Modal …>}, so when source becomes invalid (cleared selection, MV list shrinks, source switches to one with no preview-eligible tables) the Modal unmounts without handleClose firing, the parent's isSourceSchemaPreviewOpen stays true, and the modal silently re-pops the moment the source becomes valid again.
  • Fix: call onClose?.() from a useEffect when controlled && open && !isEnabled, or always render <Modal opened={isModalOpen && isEnabled}> so the close edge survives transitions.
  • _{correctness, julik-frontend-races, adversarial}
• packages/app/src/DBSearchPage.tsx:1752-1777 — onEditCurrentSource and onManageSources call window.location.assign unconditionally, dropping any dirty react-hook-form state (WHERE / SELECT / filters / orderBy edits) and the trailing run of the 1000 ms useDebouncedCallback(onSubmit, …) with no beforeunload or confirm. onEditCurrentSource also navigates with inputSource (the form-local value), so the destination is /team?source=Y even when the persisted search is still on source X.
  • Fix: gate the nav behind formState.isDirty + a confirm, debouncedSubmit.flush() before assigning, and resolve the target id against searchedConfig.source rather than the live form value.
  • _{julik-frontend-races, adversarial}

🔵 P3 nitpicks (13)

• packages/app/src/DBSearchPage.tsx:1758 — window.location.assign(\${router.basePath}/team?source=${inputSource}`)interpolates the id withoutencodeURIComponent; server-generated UUIDs are safe today but any future id containing &, #, space, or +` corrupts the deep link.
  • Fix: wrap the id with encodeURIComponent(inputSource).
  • _{correctness, kieran-typescript, julik-frontend-races}
• packages/app/src/DBSearchPage.tsx:1772-1777 — onManageSources navigates to ${router.basePath}/team without ?tab=data, contradicting the PR description's stated destination; it works only because tabs[0].value === 'data'. Reordering tabs would silently send users to a different tab.
  • Fix: include ?tab=data (and &source=<id> only where intended) in the constructed URL.
  • _correctness
• packages/app/styles/SourceSelectControlled.module.scss:1-15 — The .sourceSchemaPreviewButton class is documented as "Still used by DBTableSelect for its inline schema-preview text button," but DBTableSelect now uses SourceManagementMenu; a repo-wide grep for sourceSchemaPreviewButton returns only this declaration.
  • Fix: delete the rule and its comment.
  • _{maintainability, adversarial}
• packages/app/src/components/SourceSelect.tsx:138 — data-testid="source-actions-menu" is hardcoded inside SourceManagementMenu with no override prop, and KubernetesDashboardPage renders two kebabs (log + metric) carrying identical test ids.
  • Fix: accept a data-testid override on SourceManagementMenu and pass distinct ids per kebab in KubernetesDashboardPage.
  • _adversarial
• packages/app/src/components/Sources/SourceForm.tsx:1524-1576 — The Slider styles override pins to Mantine 9 internal CSS custom properties (--slider-size, --slider-bar-offset, --slider-bar-width, --slider-thumb-offset, --mark-offset) without fallbacks; a Mantine patch that renames any of these silently collapses the track to 0 height with no test failure.
  • Fix: wrap the Slider in <div data-orientation="horizontal"> to neutralize the inherited Card attribute at the boundary, or add safe fallbacks to each var(--…) call.
  • _{julik-frontend-races, adversarial}
• packages/app/src/components/SourceSchemaPreview.tsx:246 — <Tabs defaultValue={…tables[0]…}> is uncontrolled, so when source mutates while the modal is mounted (background useSources refetch, saved-search URL reset) the captured tab key can reference a table that no longer exists and the panel renders blank.
  • Fix: switch to controlled <Tabs value/onChange> driven by the current tables[0] identity.
  • _adversarial
• packages/app/src/components/SourceSchemaPreview.tsx:127-223 — SourceSchemaPreviewProps declares controlled, open, and onClose as independent optionals; in controlled mode, omitting onClose leaves the modal uncloseable with no TypeScript error.
  • Fix: model the prop as a discriminated union so controlled: true requires both open and onClose.
  • _{kieran-typescript, maintainability}
• packages/app/src/components/SourceSelect.tsx:64-85 — isSchemaPreviewEnabled defaults to true in SourceManagementMenu; a caller that wires onSchemaPreview but forgets the gate gets an always-enabled item that opens a modal whose internal isEnabled then suppresses the body.
  • Fix: default to false, or require the gate whenever onSchemaPreview is provided.
  • _{kieran-typescript}
• packages/app/src/components/SourceSchemaPreview.tsx:15-57 — After every callsite migrated to controlled mode, SourceSchemaInfoIcon, the variant/iconStyles props, and the internalOpen state are unreachable from production code.
  • Fix: delete the uncontrolled path and tighten the prop shape, or add a comment naming the consumer that justifies keeping it.
  • _{maintainability}
• packages/app/src/components/__tests__/DBTracePanel.test.tsx:39, packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx:211 — Both mock factories declare getSourceSchemaTables: () => [], but SourceSchemaPreview does not export that symbol; the key is a no-op that misleads readers about the module's public surface.
  • Fix: drop the getSourceSchemaTables key from both mock factories.
  • _{maintainability, project-standards}
• packages/app/src/components/__tests__/SourceSchemaPreview.test.tsx:71 — Selects the modal close button via document.querySelector('.mantine-Modal-close'), coupling the test to a Mantine internal class name.
  • Fix: query by role and name (getByRole('button', { name: /close/i })), and prefer aria-disabled over data-disabled for menu-item disabled assertions.
  • _testing
• packages/app/src/DBSearchPage.tsx:1908-1923 — style={{ minWidth: 150 }} and data-testid now flow into the inner SelectControlled only; the visible chip surface is the wrapping Group (Select + 30 px kebab), so size and test-id hooks no longer target what looks like "the chip."
  • Fix: forward style/className (and consider data-testid) to the outer Group in SourceSelectControlled.
  • _{kieran-typescript}
• packages/app/src/components/Sources/SourcesList.tsx:82-98 — expandedFromQueryRef is keyed by the component lifetime, so an in-page back-button visit that re-presents the same ?source=<id> value short-circuits the auto-expand; the deep-link "fights the user" path is also re-litigated on every router-state tick because the effect deps are [router, sources].
  • Fix: narrow the deps to [router.isReady, router.query.source, router.pathname, sources] and reset the ref on router.query.source transitions so repeat visits still expand.
  • _{correctness, julik-frontend-races, adversarial}

---

Reviewers (9): correctness, testing, maintainability, project-standards, kieran-typescript, julik-frontend-races, adversarial, agent-native, learnings.

Testing gaps:

• No test exercises SourceSelectControlled end-to-end with the new chip + kebab integration (hasSelection, hasMenu, the onSchemaPreview-only configuration that DBTableSelect relies on).
• No coverage for DBSearchPage.tsx:1752-1777 hard-nav branches: dirty-form behavior, IS_LOCAL_MODE toggle, or the router.basePath prefix that the /clickstack build depends on.
• No coverage for SourcesList.tsx:82-98 auto-expand effect (happy path, missing source, router.replace strip, hash preservation, repeat-visit de-dup).
• No test for the controlled-mode SourceSchemaPreview lifecycle when isEnabled flips false while open=true, nor for isSourceSchemaPreviewEnabled across log/metric/MV branches.
• Slider override at SourceForm.tsx:1524-1576 is not exercised — JSDOM doesn't compute CSS, so a Mantine bump that renames any of the cited internal vars would not fail CI; a Playwright snapshot would close the gap.

[github-actions]

E2E Test Results

✅ All tests passed • 189 passed • 3 skipped • 1275s

Status	Count
✅ Passed	189
❌ Failed	0
⚠️ Flaky	6
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[alex-fedotyev]

Pushed 264e814 addressing the asymmetric "Edit sources" behavior across modes.

The first cut had one Edit source item wired to a handler that branched on IS_LOCAL_MODE: local mode opened the inline SourceEditModal with the current source, docker / managed dropped the user on /team with nothing pre-expanded. Same label, very different journey.

Split by intent:

• Edit source (singular) operates on the current selection. Local mode keeps the inline modal. Docker / managed navigates to /team?source=<id>; SourcesList reads the param and auto-expands that source's accordion on mount, then strips the param from the URL so subsequent interactions don't fight the user. A useRef guard prevents the effect from re-firing on later route ticks.
• Manage sources opens the all-sources list. Wired only in non-local mode; local mode leaves the handler undefined and the menu item hides itself.

Net: in both modes, clicking Edit source lands you on the form for the source you were just looking at, one click. Manage sources is the explicit "show me everything" exit.

Test plan additions:

• Local mode: Edit source opens the modal pre-filled with the chip's source.
• Local mode: Manage sources is absent from the kebab.
• Docker: Edit source lands on /team with that source's accordion expanded.
• Docker: Manage sources lands on /team#sources with nothing pre-expanded.
• Docker: refreshing /team?source=<id> once expanded clears the param from the URL.

[alex-fedotyev]

Fix-pack: lint, knip, e2e shard 4

Pushed 5751776 addressing the three CI failures and the deep-review P2 findings on tests.

Lint (KubernetesDashboardPage.tsx:1345). Removed the inline {/* [prose-lint: allow] ... */} annotation appended to </title>; prettier was rejecting the inline comment and the change was outside this PR's scope. Lint is clean locally on the changed files.

Knip (SelectControlledSpecialValues). Dropped the export keyword; the enum is only used inside SelectControlled.tsx and was flagged after SourceSelect.tsx removed its import.

E2E shard 4 (sources.spec.ts:105 should show source actions in dropdown). The test was asserting that Edit Sources and Create New Source were getByRole('option') items inside the source dropdown. The PR intentionally moves those actions out of the dropdown and into the adjacent kebab menu. Updated the page object + spec:

• SearchPage page object now exposes sourceActionsMenu, createNewSourceItem, editSourceItem, manageSourcesItem, viewSchemaItem (all getByRole('menuitem') after the kebab opens).
• Renamed the test to should show source actions in kebab menu and asserted what's actually rendered: Edit source + Create new source in both modes, Manage sources only when E2E_FULLSTACK=true (local mode wires onManageSources={undefined}).
• openEditSourceModal() helper now opens the kebab and clicks Edit source (previously opened the dropdown and clicked Edit Sources).

P2 tests from the deep-review. Added unit coverage that was missing on the new surface:

• SourceSelect.test.tsx (new, 21 tests): SourceManagementMenu null-render with no actions, kebab trigger present per handler combination, View-schema disabled/enabled matrix, dispatch for each menu item, Edit-source rename, onManageSources wired.
• SourceSchemaPreview.test.tsx (new, 5 tests): controlled mode suppresses the inline trigger, open prop drives the modal, onClose fires via close button and Escape.

Validation. eslint clean on changed files, yarn ci:unit --testPathPatterns='SourceSelect|SourceSchemaPreview|DBTracePanel|DBSearchPage' is 143/143 green, knip no longer flags SelectControlledSpecialValues. The pre-existing knip noise (HeatmapSettingsSchema, SelectControlledProps, PageLayoutProps, etc.) also exists on main and is outside this PR.

Not in this fix-pack (deferred):

• P3.1 (isEnabled effect for the controlled-mode edge case in SourceSchemaPreview) and P3.2 (dead-code removal of SourceSchemaInfoIcon).
• P3.5 (useSourceSchemaPreview hook to converge the 9 callsite boilerplate). Worth a follow-up after this lands.

Commits since the last comment:

• 039f72f6 fix(source-picker): knip/lint clean-up and add SourceManagementMenu + controlled-mode tests
• cc1b9aca test(source-picker): fix SourceSelect + SourceSchemaPreview test assertions for Mantine 9
• 252ba5b0 test(source-picker): cover onManageSources and Edit-source rename
• 5751776c test(e2e): move source-action assertions from dropdown to kebab menu

[alex-fedotyev]

P0/P1 fix-pack: prefix router.basePath and switch onEditCurrentSource to hard-nav

Addressed two P0/P1 findings from the deep-review:

• DBSearchPage.tsx:1770-1775 (onManageSources). Switched window.location.assign('/team') to prepend router.basePath, so the Manage sources item works on the /clickstack build where Next.js basePath=/clickstack.
• DBSearchPage.tsx:1750-1760 (onEditCurrentSource). Replaced router.push({pathname:'/team', ...}) with the same window.location.assign hard-nav pattern. The client-side push let useQueryStates merge stale /search state into the destination URL; the hard-nav drops it cleanly and also picks up the basePath prefix.

Validation: yarn workspace @hyperdx/app lint clean, tsc --noEmit no errors in DBSearchPage.tsx, jest --testPathPatterns='SourceSelect|DBSearchPage' 8 suites 137 passing.

Not in this fix-pack (deferred per scope): the P3 nitpicks and testing gaps listed in the review (SourcesList ?source= auto-expand unit test, nav unit tests for these helpers).

Commit: 4af69980.

[elizabetdev]

@alex-fedotyev I opened a PR on top of yours to tweak the kebab placement a bit.

Right now it sits a bit detached from the source selector, which makes it unclear what it actually applies to. It can feel like it might be a global “more” menu for the page instead of actions for the selected source.

What I’m trying to fix is that ambiguity. By visually grouping the Select + kebab into one unit (more like a split-button / chip pattern), it becomes much clearer at a glance that the actions belong to that specific source.

Here's the PR:
#2369