fix: UI/UX fixes on Global Actions (CMD / CTRL + K)

[ishan621]

📄 Summary

Linked Issues:

---

✅ Changes

[] Feature: Added a fully customizable Cmd + K command palette. Users can quickly navigate to different parts of the application using keyboard shortcuts or by opening the palette from the left sidebar.

[] Bug Fix: Replaced the kbar library with a custom shadcn-based cmdK component published in our shared component library.
This resolves prior limitations such as:

1. inability to style elements (custom classes, icons, layout)
2. inability to add a search icon trigger from the sidebar
3. restricted customization of command items and sections
   The new implementation provides full control over styling, icons, roles (RBAC), and interactions while maintaining cleaner integration across the app.

🧪 How to Test

1. Open the staging environment: https://app.us.staging.signoz.cloud/
2. Log in and press Command + K (Mac) or Ctrl + K (Windows/Linux). The command palette modal should open.
3. Open via sidebar:
   Click the search icon in the left navigation panel (below the Home icon).
   This should also open the command palette.
   4.Logged-out behavior: When not logged in, the command palette should not render or open via any method.
4. Verify navigation shortcuts:
   Inside the modal, clicking any command item should redirect the user to the corresponding page.

---

🔍 Related Issues

Closes # #9672
Closes - #9540

---

📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)

Before:

Screen.Recording.2025-12-01.at.6.16.08.PM.mov

After

Screen.Recording.2025-12-01.at.6.17.12.PM.mov

---

📋 Checklist

• Dev Review
• Test cases added (Unit/ Integration / E2E)
• Manually tested the changes

---

👀 Notes for Reviewers

---

Note

Replaces kbar with a new CmdK command palette built on @signozhq/command, wires it globally with a provider, adds a sidebar search trigger, and removes legacy kbar code/deps.

• UI/Command Palette:
  • Add new command palette components/cmdKPalette/cmdKPalette.tsx using @signozhq/command with RBAC-aware actions, theme toggles, and navigation shortcuts.
  • Add styles components/cmdKPalette/cmdKPalette.scss.
  • Introduce context providers/cmdKProvider.tsx to control open/close and global Ctrl/Cmd+K handling.
• App Integration:
  • Wrap app with CmdKProvider and render <CmdKPalette /> for logged-in users in AppRoutes/index.tsx.
  • Remove legacy KBar provider/rendering and related kbar usage in AppLayout.
• Sidebar:
  • Add "Search" primary item to SideNav (menuItems.tsx) and handle it to open the palette (SideNav.tsx).
• Tests:
  • Add unit tests components/cmdKPalette/__test__/cmdkPalette.test.tsx.
• Dependencies/Registry:
  • Add @signozhq/command and update auto-import registry.
  • Remove kbar and delete old KBar components/provider files.
  • Update yarn.lock accordingly.

^{Written by Cursor Bugbot for commit 4bbdf72. This will update automatically on new commits. Configure here.}

[cursor]

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on December 3.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on January 3

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

Bug: Removed kbar dependency still used in AppLayout

The kbar package was removed from package.json, but frontend/src/container/AppLayout/index.tsx still imports and uses useKBar from kbar (line 38: import { useKBar } from 'kbar';). This will cause a runtime error since the module no longer exists. The AppLayout component uses useKBar to manage the command palette's disabled state based on login status. This code needs to be migrated to use the new useCmdK hook from the custom provider or removed entirely.

frontend/package.json#L106-L107

signoz/frontend/package.json

Lines 106 to 107 in 11c5a16

	"jest": "^27.5.1",
	"js-base64": "^3.7.2",

 

---