feat(cmd-k): Add comprehensive analytics for the new command palette

Adds richer analytics instrumentation to measure baseline success,
understand user behavior, and identify improvement opportunities.

New events:
- command_palette.closed: tracks how/why users close the palette
- command_palette.query: debounced (500ms) search query tracking with result count
- command_palette.session: end-to-end summary with duration, completion, drill depth

Updated events:
- command_palette.opened: adds session_id for funnel correlation
- command_palette.action_selected: adds action_type, group, result_index, session_id
- command_palette.no_results: adds session_id

All events share a session_id for Amplitude funnel analysis.

Author: jshchnz

static/app/actionCreators/modal.tsx

@@ -1,3 +1,5 @@
+import uniqueId from 'lodash/uniqueId';
+
 import type {
   CommandPaletteState,
   CommandPaletteDispatch,
@@ -160,22 +162,33 @@ export async function toggleCommandPalette(
   dispatch: CommandPaletteDispatch,
   source: 'button' | 'keyboard'
 ) {
-  const {default: Modal, modalCss} =
-    await import('sentry/components/commandPalette/ui/modal');
+  const modalModule = await import('sentry/components/commandPalette/ui/modal');
+  const {default: Modal, modalCss} = modalModule;
 
   function closeCommandPaletteModal() {
     dispatch({type: 'toggle modal'});
   }
 
   if (state.open) {
+    modalModule._closeMethod = 'keyboard_toggle';
     closeCommandPaletteModal();
     closeModal();
   } else {
-    trackAnalytics('command_palette.opened', {organization, source});
-    dispatch({type: 'toggle modal'});
+    const sessionId = uniqueId('cmd-palette-');
+    trackAnalytics('command_palette.opened', {
+      organization,
+      source,
+      session_id: sessionId,
+    });
+    dispatch({type: 'toggle modal', session_id: sessionId});
     openModal(deps => <Modal {...deps} {...options} />, {
       modalCss,
-      onClose: closeCommandPaletteModal,
+      onClose: reason => {
+        if (reason === 'backdrop-click') {
+          modalModule._closeMethod = 'backdrop_click';
+        }
+        closeCommandPaletteModal();
+      },
     });
   }
 }

static/app/components/commandPalette/ui/commandPalette.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useLayoutEffect, useMemo, useEffect, useCallback} from 'react';
+import {Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import {preload} from 'react-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -65,7 +65,13 @@ type CommandPaletteActionWithPriority = CommandPaletteActionWithKey & {
 };
 
 interface CommandPaletteProps {
-  onAction: (action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>) => void;
+  onAction: (
+    action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
+    resultIndex: number,
+    group: string
+  ) => void;
+  onQueryTracked?: () => void;
+  sessionId?: string;
 }
 
 export function CommandPalette(props: CommandPaletteProps) {
@@ -76,6 +82,10 @@ export function CommandPalette(props: CommandPaletteProps) {
   const state = useCommandPaletteState();
   const dispatch = useCommandPaletteDispatch();
 
+  // Debounced query tracking (500ms)
+  const queryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastTrackedQueryRef = useRef('');
+
   // Preload the empty state image so it's ready if/when there are no results
   // Guard against non-string imports (e.g. SVG objects in test environments)
   if (typeof errorIllustration === 'string') {
@@ -97,6 +107,31 @@ export function CommandPalette(props: CommandPaletteProps) {
     [state.query, displayedActions]
   );
 
+  // Debounced query analytics
+  useEffect(() => {
+    if (queryTimerRef.current) {
+      clearTimeout(queryTimerRef.current);
+    }
+    if (state.query.length > 0 && state.query !== lastTrackedQueryRef.current) {
+      queryTimerRef.current = setTimeout(() => {
+        lastTrackedQueryRef.current = state.query;
+        trackAnalytics('command_palette.query', {
+          organization,
+          query: state.query,
+          result_count: filteredActions.length,
+          session_id: props.sessionId ?? '',
+        });
+        props.onQueryTracked?.();
+      }, 500);
+    }
+    return () => {
+      if (queryTimerRef.current) {
+        clearTimeout(queryTimerRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.query, filteredActions.length]);
+
   const sections = useMemo(
     () => groupActionsBySection(filteredActions),
     [filteredActions]
@@ -169,23 +204,30 @@ export function CommandPalette(props: CommandPaletteProps) {
 
   const onActionSelection = useCallback(
     (key: ReturnType<typeof treeState.collection.getFirstKey> | null) => {
-      const action = filteredActions.find(a => a.key === key);
+      const resultIndex = filteredActions.findIndex(a => a.key === key);
+      const action = resultIndex >= 0 ? filteredActions[resultIndex] : undefined;
       if (!action) {
         return;
       }
 
+      const group = action.groupingKey ?? '';
+
       if (action.type === 'group') {
         trackAnalytics('command_palette.action_selected', {
           organization,
           action: action.display.label,
           query: state.query,
+          action_type: 'group',
+          group,
+          result_index: resultIndex,
+          session_id: props.sessionId ?? '',
         });
         dispatch({type: 'push action', action});
         return;
       }
 
       dispatch({type: 'trigger action'});
-      props.onAction(action);
+      props.onAction(action, resultIndex, group);
     },
     [filteredActions, dispatch, props, treeState, organization, state.query]
   );
@@ -445,7 +487,7 @@ function flattenActions(
 
 function CommandPaletteNoResults() {
   const organization = useOrganization();
-  const {query, action} = useCommandPaletteState();
+  const {query, action, session_id} = useCommandPaletteState();
 
   useEffect(() => {
     const actionLabel =
@@ -456,12 +498,13 @@ function CommandPaletteNoResults() {
       organization,
       query,
       action: actionLabel,
+      session_id,
     });
     Sentry.logger.info('Command palette returned no results', {
       query,
       action: actionLabel,
     });
-  }, [organization, query, action]);
+  }, [organization, query, action, session_id]);
 
   return (
     <Flex

static/app/components/commandPalette/ui/commandPaletteStateContext.tsx

@@ -19,12 +19,13 @@ export type CommandPaletteState = {
   input: React.RefObject<HTMLInputElement | null>;
   open: boolean;
   query: string;
+  session_id: string;
 };
 
 export type CommandPaletteDispatch = React.Dispatch<CommandPaletteAction>;
 
 export type CommandPaletteAction =
-  | {type: 'toggle modal'}
+  | {type: 'toggle modal'; session_id?: string}
   | {type: 'reset'}
   | {query: string; type: 'set query'}
   | {action: CommandPaletteActionWithKey; type: 'push action'}
@@ -45,6 +46,7 @@ function commandPaletteReducer(
       return {
         ...state,
         open: !state.open,
+        session_id: action.session_id ?? state.session_id,
       };
     case 'reset':
       return {
@@ -108,6 +110,7 @@ export function CommandPaletteStateProvider({
     query: '',
     action: null,
     open: false,
+    session_id: '',
   });
 
   return (

static/app/components/commandPalette/ui/modal.tsx

@@ -1,4 +1,4 @@
-import {useCallback} from 'react';
+import {useCallback, useEffect, useRef} from 'react';
 import {css} from '@emotion/react';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
@@ -17,17 +17,76 @@ import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
+/**
+ * Stores the close method so the unmount effect can include it in analytics.
+ * Set externally by toggleCommandPalette's onClose callback.
+ */
+export let _closeMethod = 'escape';
+
 export default function CommandPaletteModal({Body}: ModalRenderProps) {
   const navigate = useNavigate();
   const organization = useOrganization();
 
   const state = useCommandPaletteState();
-  const {query} = state;
+  const {query, session_id} = state;
 
   useDsnLookupActions(query);
 
+  const openedAtRef = useRef(Date.now());
+  const actionsSelectedRef = useRef(0);
+  const queriesTypedRef = useRef(0);
+  const completedRef = useRef(false);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // Reset close method on mount
+  _closeMethod = 'escape';
+
+  // Fire closed + session summary on unmount
+  useEffect(() => {
+    const openedAt = openedAtRef.current;
+    // These refs accumulate values during the modal's lifetime and are intentionally
+    // read at cleanup time to capture the final session metrics.
+    const actions = actionsSelectedRef;
+    const queries = queriesTypedRef;
+    const done = completedRef;
+
+    return () => {
+      const s = stateRef.current;
+      let depth = 0;
+      let node = s.action;
+      while (node !== null) {
+        depth++;
+        node = node.previous;
+      }
+
+      trackAnalytics('command_palette.closed', {
+        organization,
+        method: _closeMethod as 'escape',
+        query: s.query,
+        had_interaction: s.query.length > 0 || s.action !== null || actions.current > 0,
+        session_id: s.session_id,
+      });
+
+      trackAnalytics('command_palette.session', {
+        organization,
+        session_id: s.session_id,
+        duration_ms: Date.now() - openedAt,
+        actions_selected: actions.current,
+        queries_typed: queries.current,
+        completed: done.current,
+        max_drill_depth: depth,
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleSelect = useCallback(
-    (action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>) => {
+    (
+      action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
+      resultIndex: number,
+      group: string
+    ) => {
       const actionType = action.type;
       switch (actionType) {
         case 'navigate':
@@ -39,7 +98,14 @@ export default function CommandPaletteModal({Body}: ModalRenderProps) {
             organization,
             action: label,
             query,
+            action_type: actionType,
+            group,
+            result_index: resultIndex,
+            session_id,
           });
+          _closeMethod = 'action_selected';
+          actionsSelectedRef.current++;
+          completedRef.current = true;
           if (actionType === 'navigate') {
             navigate(normalizeUrl(action.to));
           } else {
@@ -53,12 +119,18 @@ export default function CommandPaletteModal({Body}: ModalRenderProps) {
       }
       closeModal();
     },
-    [navigate, organization, state, query]
+    [navigate, organization, state, query, session_id]
   );
 
   return (
     <Body>
-      <CommandPalette onAction={handleSelect} />
+      <CommandPalette
+        onAction={handleSelect}
+        sessionId={session_id}
+        onQueryTracked={() => {
+          queriesTypedRef.current++;
+        }}
+      />
     </Body>
   );
 }