Add query syntax reference to search input

[vinzee]

Summary

Introduce a quick-reference guide for SQL and Lucene query syntax directly within the search interface. Users can now click a help icon next to the language selector to view common query examples, operators, and formatting rules tailored to the active query language. This improves usability and helps users construct valid search queries more easily.

Screenshots or video

Lucene

SQL

How to test on Vercel preview

References

• Linear Issue: n/a
• Related PRs: n/a

[changeset-bot]

⚠️ No Changeset found

Latest commit: 801ba6a

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]

@vinzee is attempting to deploy a commit to the HyperDX Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Deep Review

✅ No critical issues found.

🟡 P2 — recommended

• packages/app/src/components/SearchInput/SyntaxReferenceModal.tsx — the new modal ships no test coverage for filterSections, Highlight, language sync on open, or query/language reset behavior, leaving its filter and lifecycle logic unverified.
  • Fix: Add a Jest/RTL test file covering the empty-query passthrough, case-insensitive filtering across expr and desc, the empty-results message, Highlight first-match rendering, and the useEffect that resyncs language to initialLanguage when opened toggles true.
• packages/app/src/components/SearchInput/SyntaxReferenceModal.tsx:332 — the docs link wraps only <IconExternalLink> with no aria-label, so screen readers will announce a bare "link" because Mantine's Tooltip label does not reliably set an accessible name on the anchor.
  • Fix: Add aria-label="ClickStack search documentation" to the Text component="a" element so the link has a programmatic name independent of the tooltip.

🔵 P3 nitpicks (2)

• packages/app/src/components/SearchInput/SyntaxReferenceModal.tsx:274 — INTRO is defined as empty strings for both languages and gated by INTRO[language] && (...), making the entire block dead code.
  • Fix: Delete the INTRO constant and the conditional <Text> block at lines 346–350.
• packages/app/src/components/SearchInput/SyntaxReferenceModal.tsx:190 — Highlight only marks the first occurrence in each cell, so queries that match multiple times in one expression or description are only partially emphasized.
  • Fix: Iterate through all occurrences (e.g., split on the lowercased index loop) and render <mark> for each, or document the single-match behavior.

---

Reviewers (7): correctness, testing, maintainability, project-standards, agent-native, learnings, kieran-typescript.

Testing gaps:

• No unit tests for filterSections (empty query passthrough, case-insensitivity, multi-field match, empty-section pruning).
• No coverage for SyntaxReferenceModal open/close lifecycle, language resync, or query reset on close.
• No render test for the new IconHelp ActionIcon and its tooltip wiring inside SearchWhereInput.