Add inline thumbs up/down feedback widget in app navigation

[MikeShi42]

Summary

Adds an inline feedback widget in the sidebar navigation that lets users give thumbs up or thumbs down feedback about their in-app experience. The widget renders directly in the sidebar (no flyout/popover) with the layout: [thumbs up] [thumbs down] Feedback? [Hide].

How it works:

1. Thumbs up/down buttons are inline in the sidebar between Help and Team Settings, vertically aligned with other nav items
2. Clicking a thumb immediately emits a user feedback vote action and reveals an inline textarea + Submit button
3. Users can optionally add a comment and hit Submit, which emits a separate user feedback comment action
4. The vote signal is always captured, even if the user never submits a comment
5. Shows "Thanks for your feedback!" briefly, then hides for the rest of the session
6. Widget reappears on next page load — dismissal after submit is session-scoped
7. "Hide" button permanently opts out (persisted via localStorage)
8. When the sidebar is collapsed, shows just the two thumb icons with a tooltip

Visibility:

• Only shown when the HyperDX browser SDK is active (!IS_LOCAL_MODE)
• For local testing, run localStorage.setItem('hdx-feedback-enabled', 'true') in the browser console

Implementation:

• New AppNavFeedback component in packages/app/src/components/AppNav/AppNavFeedback.tsx
• Added feedbackLabel and feedbackHide styles to AppNav.module.scss
• Uses the same navItem/navItemContent/navItemIcon class structure for vertical alignment with other nav items
• Mantine ActionIcon, Textarea, Button with approved variants
• Tabler icons: IconThumbUp/Down, IconThumbUpFilled/DownFilled

Screenshots

Inline feedback — aligned with other nav items:

Inline feedback aligned

After clicking thumbs up — comment form expanded:

Inline feedback with comment

How to test locally or on Vercel

1. Start the dev stack with yarn dev
2. In the browser console, run: localStorage.setItem('hdx-feedback-enabled', 'true') then refresh
3. Look at the sidebar between "Help" and "Team Settings" for the inline feedback row
4. Click thumbs up or down, optionally add a comment, and submit
5. Verify the widget shows "Thanks for your feedback!" and then hides
6. Reload the page — the widget should reappear (session-scoped dismissal)
7. Click "Hide" to permanently opt out (undo with localStorage.removeItem('feedbackHidden'))

References

• Linear Issue: HDX-4126

_{To show artifacts inline, enable in settings.}

Linear Issue: HDX-4126

  

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2a1fba7

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	May 1, 2026 4:48am

[github-actions]

E2E Test Results

✅ All tests passed • 156 passed • 3 skipped • 1249s

Status	Count
✅ Passed	156
❌ Failed	0
⚠️ Flaky	7
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🟡 Tier 3 — Standard

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

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

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

Stats

• Production files changed: 3
• Production lines changed: 269
• Branch: cursor/add-feedback-widget-dae0
• Author: MikeShi42

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]

PR Review

• ⚠️ setTimeout in handleSubmit not cleaned up → If the component unmounts within 1500ms of submit, React will attempt state updates on an unmounted component. Replace with a useRef-tracked timer cleared in a useEffect cleanup, or use useEffect to drive the post-submit transition.

• ⚠️ No visual feedback after voting in collapsed sidebar mode → handleVote moves state to 'voted'/'thanks' but the collapsed render path always shows the static thumb icons regardless of state (no filled icon, no thanks message, no dismissal). A user who votes in collapsed mode gets no confirmation their click registered.

• ⚠️ feedbackHidden localStorage key is not namespaced → The force-enable key uses hdx-feedback-enabled but the opt-out key is bare feedbackHidden. This risks collisions with other apps sharing the same storage origin. Use hdx-feedback-hidden to be consistent.

• ⚠️ Hide text element missing onKeyDown handler → role="button" + tabIndex={0} without onKeyDown for Enter/Space is an accessibility violation. Add onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && setHidden(true)}.

• ℹ️ FeedbackErrorBoundary silently swallows errors → No componentDidCatch means errors in this component won't be reported to HyperDX telemetry. Add componentDidCatch(err) { HyperDX.recordException(err); } or equivalent.

• ℹ️ setVote/setState in useCallback deps are unnecessary → State setters from useState are stable references; listing them in handleVote's dep array is harmless but misleading noise.

[pulpdrew]

Code LGTM but

1. suggestion: IMO it's odd that we only let a user submit feedback once ever (since the button hides once they submit and that is persisted). Maybe once per session would be better?
2. nit: I wish this lined up vertically with the other navbar items:

[pulpdrew]

LGTM