ref(cmdk): migrate command palette to JSX collection model (steps 2–5)

Wire CMDKQueryContext and CMDKProvider so async CMDKGroup nodes can read
the current search query. Mount CMDKProvider inside CommandPaletteStateProvider
in the existing CommandPaletteProvider so the collection store is live for the
full app lifetime.

Add GlobalCommandPaletteActions component that registers all global actions
into the CMDK collection via JSX (CMDKGroup / CMDKAction) rather than the old
useCommandPaletteActionsRegister reducer hook. Both systems run in parallel
during this transition step.

Swap the CommandPalette UI to read from CMDKCollection.useStore() instead of
the old useCommandPaletteActions() reducer pipeline. Remove collectResourceActions,
asyncQueries, and asyncChildrenMap — async fetching is now handled inside
CMDKGroup before nodes appear in the tree. Rewrite scoreTree and flattenActions
to work with CollectionTreeNode<CMDKActionData> using direct field access.

Replace the linked-list navigation stack (which stored full action objects)
with CMDKNavStack which stores only the group key and label. Push action now
dispatches {key, label} instead of a full CommandPaletteActionWithKey.

Update modal.tsx, stories, analytics hook, and tests to use the new types.
Fix pre-existing duplicate Item declaration in commandPalette.tsx that caused
a Babel parse error in the test suite.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: JonasBa

static/app/components/commandPalette/CMDK_PLAN.md

@@ -62,8 +62,8 @@ registration, unregistration, and data freshness.
 Async groups (`CMDKGroup` with `resource`) need the current search query to call
 `resource(query)`. The query lives in `CommandPaletteStateContext` (`state.query`).
 
-- [ ] Add `CMDKQueryContext = createContext<string>('')` to `ui/cmdk.tsx`
-- [ ] Update `CMDKCollection.Provider` to also provide `CMDKQueryContext`:
+- [x] Add `CMDKQueryContext = createContext<string>('')` to `ui/cmdk.tsx`
+- [x] Update `CMDKCollection.Provider` to also provide `CMDKQueryContext`:
   ```tsx
   function CMDKCollectionProvider({children}) {
     const {query} = useCommandPaletteState();
@@ -75,47 +75,47 @@ Async groups (`CMDKGroup` with `resource`) need the current search query to call
   }
   ```
   Export this as `CMDKProvider` — callers use this instead of `CMDKCollection.Provider` directly.
-- [ ] In `CMDKGroup`, read `const query = useContext(CMDKQueryContext)`
-- [ ] When `resource` prop is present, call `useQuery({ ...resource(query), enabled: !!resource })`
+- [x] In `CMDKGroup`, read `const query = useContext(CMDKQueryContext)`
+- [x] When `resource` prop is present, call `useQuery({ ...resource(query), enabled: !!resource })`
       inside `CMDKGroup`
-- [ ] Resolve children based on whether `children` is a render prop:
+- [x] Resolve children based on whether `children` is a render prop:
   ```ts
   const resolvedChildren =
     typeof children === 'function' ? (data ? children(data) : null) : children;
   ```
-- [ ] Wrap resolved children in `<CMDKCollection.GroupContext.Provider value={key}>` as before
+- [x] Wrap resolved children in `<CMDKCollection.GroupContext.Provider value={key}>` as before
 
 ### Step 3 — Wire CMDKProvider into the provider tree
 
 `CMDKProvider` (from Step 2) must sit inside `CommandPaletteStateProvider` because it
 reads from `useCommandPaletteState()`.
 
-- [ ] Find where `CommandPaletteProvider` and `CommandPaletteStateProvider` are mounted —
+- [x] Find where `CommandPaletteProvider` and `CommandPaletteStateProvider` are mounted —
       search for `CommandPaletteProvider` in the codebase to locate the mount point
-- [ ] Place `<CMDKProvider>` as a child of `CommandPaletteStateProvider`, wrapping
+- [x] Place `<CMDKProvider>` as a child of `CommandPaletteStateProvider`, wrapping
       whatever subtree currently lives inside it
-- [ ] Verify no runtime errors — the collection store is live but empty
+- [x] Verify no runtime errors — the collection store is live but empty
 
 ### Step 4 — Convert global actions to a JSX component
 
 `useGlobalCommandPaletteActions` calls `useCommandPaletteActionsRegister([...actions])`
 with a large static action tree. Replace it with a component that renders the equivalent
 JSX tree. The old hook stays alive during this step so both systems run in parallel.
 
-- [ ] Create `GlobalCommandPaletteActions` component (can live in `useGlobalCommandPaletteActions.tsx`
+- [x] Create `GlobalCommandPaletteActions` component (can live in `useGlobalCommandPaletteActions.tsx`
       or a new file `globalActions.tsx`)
-- [ ] Translate each section — read `useGlobalCommandPaletteActions.tsx` carefully before translating:
-  - [ ] **Navigation** — one `<CMDKGroup display={{label: t('Go to...')}}>` containing a
+- [x] Translate each section — read `useGlobalCommandPaletteActions.tsx` carefully before translating:
+  - [x] **Navigation** — one `<CMDKGroup display={{label: t('Go to...')}}>` containing a
         `<CMDKAction>` per destination (Issues, Explore, Dashboards, Insights, Settings)
-  - [ ] **Create** — one `<CMDKGroup>` with `<CMDKAction onAction={...}>` for Dashboard,
+  - [x] **Create** — one `<CMDKGroup>` with `<CMDKAction onAction={...}>` for Dashboard,
         Alert, Project, Invite Members
-  - [ ] **DSN Lookup** — `<CMDKGroup resource={dsnQueryFn}>` with render-prop children:
+  - [x] **DSN Lookup** — `<CMDKGroup resource={dsnQueryFn}>` with render-prop children:
         `{data => data.map(item => <CMDKAction key={...} display={item.display} to={item.to} />)}`
-  - [ ] **Help** — static `<CMDKAction>` nodes for Docs/Discord/GitHub/Changelog plus a
+  - [x] **Help** — static `<CMDKAction>` nodes for Docs/Discord/GitHub/Changelog plus a
         `<CMDKGroup resource={helpSearchQueryFn}>` with render-prop children for search results
-  - [ ] **Interface** — `<CMDKAction onAction={...}>` for navigation toggle and theme switching
-- [ ] Mount `<GlobalCommandPaletteActions />` inside `<CMDKProvider>` in the provider tree
-- [ ] Verify `CMDKCollection.useStore().tree()` returns the expected structure by adding a
+  - [x] **Interface** — `<CMDKAction onAction={...}>` for navigation toggle and theme switching
+- [x] Mount `<GlobalCommandPaletteActions />` inside `<CMDKProvider>` in the provider tree
+- [x] Verify `CMDKCollection.useStore().tree()` returns the expected structure by adding a
       temporary log or test — do not remove old system yet
 
 ### Step 5 — Update the palette UI to read from the collection store

static/app/components/commandPalette/__stories__/components.tsx

@@ -3,10 +3,9 @@ import {useCallback} from 'react';
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {CommandPaletteProvider} from 'sentry/components/commandPalette/context';
 import {useCommandPaletteActionsRegister} from 'sentry/components/commandPalette/context';
-import type {
-  CommandPaletteAction,
-  CommandPaletteActionWithKey,
-} from 'sentry/components/commandPalette/types';
+import type {CommandPaletteAction} from 'sentry/components/commandPalette/types';
+import type {CMDKActionData} from 'sentry/components/commandPalette/ui/cmdk';
+import type {CollectionTreeNode} from 'sentry/components/commandPalette/ui/collection';
 import {CommandPalette} from 'sentry/components/commandPalette/ui/commandPalette';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -20,13 +19,11 @@ export function CommandPaletteDemo() {
   const navigate = useNavigate();
 
   const handleAction = useCallback(
-    (action: CommandPaletteActionWithKey) => {
+    (action: CollectionTreeNode<CMDKActionData>) => {
       if ('to' in action) {
-        navigate(normalizeUrl(action.to));
+        navigate(normalizeUrl(String(action.to)));
       } else if ('onAction' in action) {
         action.onAction();
-      } else {
-        // @TODO: implement async actions
       }
     },
     [navigate]

static/app/components/commandPalette/context.tsx

@@ -11,6 +11,7 @@ import {uuid4} from '@sentry/core';
 import {slugify} from 'sentry/utils/slugify';
 import {unreachable} from 'sentry/utils/unreachable';
 
+import {CMDKProvider} from './ui/cmdk';
 import {CommandPaletteStateProvider} from './ui/commandPaletteStateContext';
 import type {CommandPaletteAction, CommandPaletteActionWithKey} from './types';
 
@@ -151,7 +152,9 @@ export function CommandPaletteProvider({children}: CommandPaletteProviderProps)
   return (
     <CommandPaletteRegistrationContext.Provider value={registerContext}>
       <CommandPaletteActionsContext.Provider value={actions}>
-        <CommandPaletteStateProvider>{children}</CommandPaletteStateProvider>
+        <CommandPaletteStateProvider>
+          <CMDKProvider>{children}</CMDKProvider>
+        </CommandPaletteStateProvider>
       </CommandPaletteActionsContext.Provider>
     </CommandPaletteRegistrationContext.Provider>
   );