feat(dashboards): add full-screen kiosk mode

[MikeShi42]

Summary

Add a shareable, URL-backed kiosk mode for dashboards intended for static displays. Kiosk mode requests browser fullscreen, reduces the page to the dashboard name and live/read-only status, locks all dashboard authoring controls, and forces automatic refresh including live behavior for trace/search tiles.

The saved dashboard is never changed by kiosk mode; tab and group expansion remain viewer-only URL state.

Screenshots or video

dashboard_kiosk_mode_clean_demo.mp4

How to test on Vercel preview

Preview routes: /dashboards

Steps:

1. Open /dashboards, select Create New Saved Dashboard, and add a chart tile.
2. Open the dashboard overflow menu and select Enter kiosk mode.
3. Verify the URL includes kiosk=true, browser fullscreen is requested, and only the dashboard name, Live · Read-only status, exit control, and dashboard tiles remain visible.
4. Reload the page and verify kiosk mode remains active with navigation, query controls, tile actions, resizing, and Add controls hidden.
5. Select Exit kiosk mode and verify the standard editable dashboard and navigation return.

Validation

• App lint, TypeScript, and style checks pass.
• Focused dashboard container unit suite passes (28 tests).
• Manual browser walkthrough passes entry, read-only chrome, live status, URL persistence after reload, and exit.
• Focused full-stack Playwright coverage was added; this VM could not execute Docker containers because its cgroup v2 hierarchy is in threaded mode.

References

• Linear Issue: N/A
• Related PRs: N/A

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

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Jul 22, 2026 3:09am
hyperdx-storybook	Ready	Preview, Comment	Jul 22, 2026 3:09am

[changeset-bot]

🦋 Changeset detected

Latest commit: 858ab2b

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

[greptile-apps]

Greptile Summary

This PR adds a fullscreen kiosk mode for dashboards. The main changes are:

• URL-backed kiosk state with enter and exit controls.
• Minimal kiosk header with live read-only status.
• Hidden dashboard authoring controls and locked grid interactions.
• Forced live refresh behavior for dashboard tiles.
• E2E coverage for entering, reloading, and exiting kiosk mode.

Confidence Score: 4/5

This is close, but the fullscreen exit state should be fixed before merging.

• Explicit kiosk exit through the button and Escape is wired up.
• Browser fullscreen exits that do not reach the React hotkey can still leave the URL-backed kiosk state active.
• The read-only dashboard controls appear broadly guarded while kiosk mode is active.

packages/app/src/hooks/useDashboardKioskMode.ts

Important Files Changed

Filename	Overview
packages/app/src/hooks/useDashboardKioskMode.ts	Adds URL-backed kiosk state and exit helpers, but does not reconcile non-hotkey fullscreen exits.
packages/app/src/DBDashboardPage.tsx	Wires kiosk mode into dashboard rendering, live refresh, and read-only tile/container behavior.
packages/app/src/components/DashboardContainer.tsx	Adds read-only handling for group controls, drag handles, menus, and rename/delete affordances.
packages/app/src/layout.tsx	Hides global navigation and banner chrome when the dashboard kiosk query state is active.
packages/app/tests/e2e/features/dashboard.spec.ts	Adds E2E coverage for entering, reloading, and explicitly exiting kiosk mode.

_{Reviews (2): Last reviewed commit: "chore(dashboards): format kiosk test" | Re-trigger Greptile}

[greptile-apps]

Fullscreen State Stays Stale

When browser fullscreen is exited outside the React exit button, such as with browser UI or F11, this hook does not observe the fullscreenchange event. The URL can remain at kiosk=true, so the dashboard stays in the read-only kiosk layout with nav/query controls hidden and live refresh forced even though native fullscreen has ended.

[github-actions]

E2E Test Results

❌ 1 test failed • 243 passed • 1 skipped • 799s

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

Tests ran across 4 shards in parallel.

View full report →

[greptile-apps]

Fullscreen Exit Stays Stale

The Escape hotkey only clears kiosk mode for the keyboard path. If the user exits browser fullscreen through browser UI or F11, document.fullscreenElement changes but this hook never observes fullscreenchange, so ?kiosk=true stays in the URL. The dashboard remains in the kiosk layout with navigation, query controls, and editing controls hidden even though native fullscreen has ended.