[OPIK-2848] [FE] Add Comet Debugger Mode with app version and connectivity status #3982
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Introduced a new feature toggle for Comet Debugger Mode in the configuration and frontend. - Added `useIsNetworkOnline` hook to monitor network status. - Implemented `AppNetworkStatus` component to display network and server connection status. - Created `UserMenuAppDebugInfoToggle` for toggling debug info visibility in the user menu. - Updated layouts and components to integrate the new debug features, including `NoUserMenu` and `AppDebugInfo`. - Added `comet.svg` icon for visual representation. This commit enhances the debugging capabilities of the application, allowing developers to monitor backend connectivity and toggle debug information visibility.
- Imported Opik icon as a React component in AppDebugInfo. - Updated the layout to include the icon alongside the OPIK VERSION text for improved visual representation. This change enhances the user interface by providing a clearer branding element in the debug information section.
- Added 'xs' size variant to the switch component for improved responsiveness. - Updated UserMenuAppDebugInfoToggle to utilize the new 'xs' size for the debug info switch, enhancing UI consistency.
- Updated the RTT display in the AppNetworkStatus component to use a new class for improved styling, enhancing the visual appeal and consistency of the user interface.
- Introduced a new boolean field `cometDebuggerModeEnabled` in the ServiceTogglesConfig class to manage the debugger mode feature. - This addition enhances the configuration options available for service toggles, allowing for better control over debugging functionalities.
…splay - Modified the AppDebugInfo component to only display the OPIK version section if the APP_VERSION is defined, improving the component's robustness and preventing potential rendering issues when the version is not available.
- Modified the end-to-end workflow files to include the `TOGGLE_COMET_DEBUGGER_MODE_ENABLED` environment variable during the build process. - Updated the `config.yml` to set the default value of `cometDebuggerModeEnabled` to true, enhancing the service toggles configuration. - Added the `TOGGLE_COMET_DEBUGGER_MODE_ENABLED` variable to the Docker Compose configuration, ensuring it is available in the deployment environment.
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
- Updated the UserMenu component to conditionally render the OPIK version section using a logical AND operator instead of a ternary operator, improving code readability and consistency.
…ed layout consistency
JetoPistola
added
test-environment
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
Contributor
Backend Tests Results 283 files 283 suites 50m 0s ⏱️ Results for commit 51f169b. ♻️ This comment has been updated with latest results. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements a Comet Debugger Mode feature that displays app version and network connectivity status for debugging purposes. The feature is controlled by a backend toggle and can be enabled/disabled by users through the UI.
Key Changes:
- Added backend feature toggle
cometDebuggerModeEnabledwith environment variable support - Created frontend debug UI components showing app version, network status, and backend RTT
- Integrated debug controls into both user menu and settings menu for different user types
Reviewed Changes
Copilot reviewed 19 out of 21 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| deployment/docker-compose/docker-compose.yaml | Added environment variable for debugger mode toggle |
| apps/opik-frontend/src/types/feature-toggles.ts | Added COMET_DEBUGGER_MODE_ENABLED feature toggle enum |
| apps/opik-frontend/src/store/DebugStore.ts | Created Zustand store for debug mode state management |
| apps/opik-frontend/src/plugins/comet/UserMenuAppDebugInfoToggle.tsx | Created toggle component for users with menu access |
| apps/opik-frontend/src/plugins/comet/UserMenu.tsx | Integrated debug toggle into existing user menu |
| apps/opik-frontend/src/plugins/comet/AppNetworkStatus.tsx | Created component displaying network and backend connectivity status |
| apps/opik-frontend/src/hooks/useIsNetworkOnline.ts | Added hook to monitor browser network connectivity |
| apps/opik-frontend/src/components/ui/switch.tsx | Added extra-small size variant for Switch component |
| apps/opik-frontend/src/components/layout/TopBar/TopBar.tsx | Integrated debug info display into top navigation |
| apps/opik-frontend/src/components/layout/SMEPageLayout/SMEPageLayout.tsx | Replaced ThemeToggle with NoUserMenu component |
| apps/opik-frontend/src/components/layout/PartialPageLayout/PartialPageLayout.tsx | Added AppDebugInfo and replaced ThemeToggle with NoUserMenu |
| apps/opik-frontend/src/components/layout/NoUserMenu.tsx | Created settings menu for users without full menu access |
| apps/opik-frontend/src/components/layout/AppDebugInfo/AppDebugInfo.tsx | Created main debug info overlay component |
| apps/opik-frontend/src/components/feature-toggles-provider.tsx | Added default state for new feature toggle |
| apps/opik-frontend/src/api/debug/useIsAlive.ts | Created API hook for backend health checks with RTT calculation |
| apps/opik-backend/src/main/java/com/comet/opik/infrastructure/ServiceTogglesConfig.java | Added backend configuration field for debugger mode |
| apps/opik-backend/config.yml | Added configuration entry with environment variable support |
| .github/workflows/end2end_suites_typescript.yml | Disabled debugger mode in E2E tests |
| .github/workflows/end2end_suites.yml | Disabled debugger mode in E2E tests |
apps/opik-frontend/src/components/layout/AppNetworkStatus/AppNetworkStatus.tsx
Show resolved
Hide resolved
apps/opik-frontend/src/components/layout/AppNetworkStatus/AppNetworkStatus.tsx
Show resolved
Hide resolved
…oggles - Add Meta/Ctrl + c + . keyboard shortcut to toggle debugger mode - Remove UserMenuAppDebugInfoToggle from UserMenu and NoUserMenu - Debugger mode now controlled exclusively via keyboard shortcut
JetoPistola
added
test-environment
Contributor
Collaborator
|
✅ Test environment is now available! Access Information
The deployment has completed successfully and the version has been verified. |
andriidudar
reviewed
Nov 10, 2025
apps/opik-frontend/src/components/layout/AppDebugInfo/AppDebugInfo.tsx
Outdated
Show resolved
Hide resolved
apps/opik-frontend/src/components/layout/AppDebugInfo/AppDebugInfo.tsx
Outdated
Show resolved
Hide resolved
…available for all versions - Replace manual keyboard event handling with useHotkeys hook - Change hotkey to Cmd/Ctrl+Shift+. to avoid conflict with system copy command - Extract platform detection (isMac, modifierKey) to shared utils - Move AppDebugInfo and AppNetworkStatus from plugins/comet to components/shared - Update AppNetworkStatus to use generic 'backend server' terminology instead of 'Comet server' - Maintain same localStorage key (comet-debugger-mode) for consistency with EM
andriidudar
approved these changes
Nov 10, 2025
Contributor
andriidudar
left a comment
andriidudar
left a comment
There was a problem hiding this comment.
Looks great — thanks for addressing all the comments! 🙌
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
This PR implements the App Debugger Mode feature for Opik, providing app version information and network connectivity status to help with debugging and support. The feature is available for all Opik versions (not just Comet Cloud) and is accessible via a keyboard shortcut.
Feature Implementation
Frontend Changes:
AppDebugInfocomponent (incomponents/layout/) that displays:useStateand localStorageAppNetworkStatuscomponent (incomponents/layout/) with styled RTT display and tooltipsreact-hotkeys-hookfor robust keyboard shortcut handlingisMac,modifierKey) inlib/utils.tsuseIsAliveAPI hook for backend health checksuseIsNetworkOnlinehook for network status monitoringArchitecture:
AppDebugInfoandAppNetworkStatuscomponents located incomponents/layout/as they are layout-specific and not reusableTopBarandPartialPageLayoutcomponentsUI/UX Improvements:
Design Decisions
useStatewith localStorage (key:comet-debugger-mode) for persistencelib/utils.tsto avoid duplicationTechnical Improvements
addEventListenerwithreact-hotkeys-hookfor better React integrationisMac,modifierKey) to shared utilitiesplugins/comet/tocomponents/layout/for proper architectureChange checklist
Issues
Testing
Manual Testing
Keyboard Shortcut
comet-debugger-modekeyFiles Changed
Frontend
apps/opik-frontend/src/components/layout/AppDebugInfo/AppDebugInfo.tsx(new)apps/opik-frontend/src/components/layout/AppNetworkStatus/AppNetworkStatus.tsx(moved from plugins/comet)apps/opik-frontend/src/components/layout/TopBar/TopBar.tsxapps/opik-frontend/src/components/layout/PartialPageLayout/PartialPageLayout.tsxapps/opik-frontend/src/lib/utils.ts(added platform detection utilities)apps/opik-frontend/src/components/pages/SMEFlowPage/hotkeys.ts(uses shared platform detection)Documentation
comet-debugger-mode(compatible with EM)react-hotkeys-hookfor keyboard handlinglib/utils.tsfor reuse