diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 41e942fbc7cd70..75e586ab5d82e3 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -866,6 +866,10 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py          @get
 /tests/sentry/scm/                                                      @getsentry/scm
 ## End of SCM
 
+## SCM Frontend
+/static/app/components/repositories                                   @getsentry/coding-workflows-sentry-frontend @getsentry/scm
+## End of SCM Frontend
+
 # End of Coding Workflows
 
 # Conduit
diff --git a/.github/codeowners-coverage-baseline.txt b/.github/codeowners-coverage-baseline.txt
index 3b19ec26e909ba..1d3ee12af227dc 100644
--- a/.github/codeowners-coverage-baseline.txt
+++ b/.github/codeowners-coverage-baseline.txt
@@ -752,8 +752,6 @@ static/app/components/hook.spec.tsx
 static/app/components/hook.tsx
 static/app/components/hookOrDefault.spec.tsx
 static/app/components/hookOrDefault.tsx
-static/app/components/hotkeysLabel.spec.tsx
-static/app/components/hotkeysLabel.tsx
 static/app/components/hovercard.spec.tsx
 static/app/components/hovercard.tsx
 static/app/components/iconCircledNumber.tsx
diff --git a/src/sentry_plugins/jira/plugin.py b/src/sentry_plugins/jira/plugin.py
index 47d44c77bb1477..fb9427e71702ad 100644
--- a/src/sentry_plugins/jira/plugin.py
+++ b/src/sentry_plugins/jira/plugin.py
@@ -89,7 +89,7 @@ def build_dynamic_field(self, group, field_meta):
             schema.get("items") == "user" or schema["type"] == "user"
         ):
             fieldtype = "select"
-            sentry_url = f"/api/0/issues/{group.id}/plugins/{self.slug}/autocomplete"
+            sentry_url = f"/api/0/organizations/{group.organization.slug}/issues/{group.id}/plugins/{self.slug}/autocomplete"
             fkwargs["url"] = "{}?jira_url={}".format(
                 sentry_url,
                 quote_plus(field_meta["autoCompleteUrl"]),
diff --git a/static/app/components/alerts/pageBanner.stories.tsx b/static/app/components/alerts/pageBanner.stories.tsx
index 445eb0ab1ad42e..6c7d85bf55c492 100644
--- a/static/app/components/alerts/pageBanner.stories.tsx
+++ b/static/app/components/alerts/pageBanner.stories.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import replaysDeadRageBackground from 'sentry-images/spot/replay-dead-rage-changelog.svg';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {InlineCode} from '@sentry/scraps/code';
 import {ExternalLink} from '@sentry/scraps/link';
 
 import {PageBanner} from 'sentry/components/alerts/pageBanner';
@@ -42,7 +43,7 @@ export default Storybook.story('PageBanner', story => {
       <Fragment>
         <p>
           This example renders an X in the top-right corner. You can wire it up with
-          something like <kbd>useDismissAlert()</kbd>.
+          something like <InlineCode>useDismissAlert()</InlineCode>.
         </p>
         <p>
           Is Dismissed? <var>{String(isDismissed)}</var>
@@ -72,7 +73,7 @@ export default Storybook.story('PageBanner', story => {
       <Fragment>
         <p>
           The banner will resize if it's shrunk really narrow. To make it expand inside a
-          flex parent set <kbd>flex-grow:1</kbd>.
+          flex parent set <InlineCode>flex-grow:1</InlineCode>.
         </p>
         <p>
           <Button size="sm" onClick={() => setFlexGrow(!flexGrow)}>
diff --git a/static/app/components/commandPalette/ui/commandPalette.tsx b/static/app/components/commandPalette/ui/commandPalette.tsx
index 3277113ff3adc5..edca2225d4b2c9 100644
--- a/static/app/components/commandPalette/ui/commandPalette.tsx
+++ b/static/app/components/commandPalette/ui/commandPalette.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useLayoutEffect, useMemo, useEffect, useCallback} from 'react';
+import {Fragment, useCallback, useLayoutEffect, useMemo} from 'react';
 import {preload} from 'react-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -6,7 +6,6 @@ import {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selecti
 import {mergeProps} from '@react-aria/utils';
 import {Item} from '@react-stately/collections';
 import {useTreeState} from '@react-stately/tree';
-import * as Sentry from '@sentry/react';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import errorIllustration from 'sentry-images/spot/computer-missing.svg';
@@ -29,14 +28,13 @@ import {
   useCommandPaletteDispatch,
   useCommandPaletteState,
 } from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
+import {useCommandPaletteAnalytics} from 'sentry/components/commandPalette/useCommandPaletteAnalytics';
 import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
 import {IconArrow, IconClose, IconSearch} from 'sentry/icons';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {t} from 'sentry/locale';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import {fzf} from 'sentry/utils/search/fzf';
 import type {Theme} from 'sentry/utils/theme';
-import {useOrganization} from 'sentry/utils/useOrganization';
 
 const MotionButton = motion.create(Button);
 const MotionIconSearch = motion.create(IconSearch);
@@ -72,7 +70,6 @@ export function CommandPalette(props: CommandPaletteProps) {
   const theme = useTheme();
 
   const actions = useCommandPaletteActions();
-  const organization = useOrganization();
   const state = useCommandPaletteState();
   const dispatch = useCommandPaletteDispatch();
 
@@ -97,6 +94,8 @@ export function CommandPalette(props: CommandPaletteProps) {
     [state.query, displayedActions]
   );
 
+  const analytics = useCommandPaletteAnalytics(filteredActions.length);
+
   const sections = useMemo(
     () => groupActionsBySection(filteredActions),
     [filteredActions]
@@ -169,25 +168,23 @@ 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;
       }
 
       if (action.type === 'group') {
-        trackAnalytics('command_palette.action_selected', {
-          organization,
-          action: action.display.label,
-          query: state.query,
-        });
+        analytics.recordGroupAction(action, resultIndex);
         dispatch({type: 'push action', action});
         return;
       }
 
+      analytics.recordAction(action, resultIndex, action.groupingKey ?? '');
       dispatch({type: 'trigger action'});
       props.onAction(action);
     },
-    [filteredActions, dispatch, props, treeState, organization, state.query]
+    [filteredActions, dispatch, props, analytics, treeState]
   );
 
   return (
@@ -444,25 +441,6 @@ function flattenActions(
 }
 
 function CommandPaletteNoResults() {
-  const organization = useOrganization();
-  const {query, action} = useCommandPaletteState();
-
-  useEffect(() => {
-    const actionLabel =
-      typeof action?.value.action.display.label === 'string'
-        ? action.value.action.display.label
-        : undefined;
-    trackAnalytics('command_palette.no_results', {
-      organization,
-      query,
-      action: actionLabel,
-    });
-    Sentry.logger.info('Command palette returned no results', {
-      query,
-      action: actionLabel,
-    });
-  }, [organization, query, action]);
-
   return (
     <Flex
       direction="column"
diff --git a/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx b/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
index 97e0cd4f90b0d1..2ed99e8324520a 100644
--- a/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
+++ b/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
@@ -1,12 +1,13 @@
 import {createContext, useContext, useReducer, useRef} from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {
   openCommandPaletteDeprecated,
   toggleCommandPalette,
 } from 'sentry/actionCreators/modal';
 import type {CommandPaletteActionWithKey} from 'sentry/components/commandPalette/types';
 import {unreachable} from 'sentry/utils/unreachable';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 export type LinkedList = {
diff --git a/static/app/components/commandPalette/ui/modal.tsx b/static/app/components/commandPalette/ui/modal.tsx
index 78d00ca6419353..a3a16e68d8bb9e 100644
--- a/static/app/components/commandPalette/ui/modal.tsx
+++ b/static/app/components/commandPalette/ui/modal.tsx
@@ -5,24 +5,16 @@ import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {closeModal} from 'sentry/actionCreators/modal';
 import type {CommandPaletteActionWithKey} from 'sentry/components/commandPalette/types';
 import {CommandPalette} from 'sentry/components/commandPalette/ui/commandPalette';
-import {
-  getActionPath,
-  useCommandPaletteState,
-} from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
+import {useCommandPaletteState} from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
 import {useDsnLookupActions} from 'sentry/components/commandPalette/useDsnLookupActions';
-import {trackAnalytics} from 'sentry/utils/analytics';
 import type {Theme} from 'sentry/utils/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import {useOrganization} from 'sentry/utils/useOrganization';
 
 export default function CommandPaletteModal({Body}: ModalRenderProps) {
   const navigate = useNavigate();
-  const organization = useOrganization();
-
-  const state = useCommandPaletteState();
-  const {query} = state;
+  const {query} = useCommandPaletteState();
 
   useDsnLookupActions(query);
 
@@ -31,29 +23,18 @@ export default function CommandPaletteModal({Body}: ModalRenderProps) {
       const actionType = action.type;
       switch (actionType) {
         case 'navigate':
-        case 'callback': {
-          const path = getActionPath(state);
-          const label =
-            path.length > 0 ? `${path} → ${action.display.label}` : action.display.label;
-          trackAnalytics('command_palette.action_selected', {
-            organization,
-            action: label,
-            query,
-          });
-          if (actionType === 'navigate') {
-            navigate(normalizeUrl(action.to));
-          } else {
-            action.onAction();
-          }
+          navigate(normalizeUrl(action.to));
+          break;
+        case 'callback':
+          action.onAction();
           break;
-        }
         default:
           unreachable(actionType);
           break;
       }
       closeModal();
     },
-    [navigate, organization, state, query]
+    [navigate]
   );
 
   return (
diff --git a/static/app/components/commandPalette/useCommandPaletteAnalytics.tsx b/static/app/components/commandPalette/useCommandPaletteAnalytics.tsx
new file mode 100644
index 00000000000000..c657f92bb2453a
--- /dev/null
+++ b/static/app/components/commandPalette/useCommandPaletteAnalytics.tsx
@@ -0,0 +1,186 @@
+import {useEffect, useMemo, useRef} from 'react';
+import * as Sentry from '@sentry/react';
+import uniqueId from 'lodash/uniqueId';
+
+import type {CommandPaletteActionWithKey} from 'sentry/components/commandPalette/types';
+import {
+  getActionPath,
+  type LinkedList,
+  useCommandPaletteState,
+} from 'sentry/components/commandPalette/ui/commandPaletteStateContext';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import {useOrganization} from 'sentry/utils/useOrganization';
+
+function getLinkedListDepth(node: LinkedList | null): number {
+  let depth = 0;
+  let current = node;
+  while (current !== null) {
+    depth++;
+    current = current.previous;
+  }
+  return depth;
+}
+
+/**
+ * Pure analytics observer for the command palette.
+ *
+ * Call once in the CommandPalette component. Reads state from context,
+ * generates its own session ID, and tracks all events internally.
+ *
+ * Returns `recordAction` and `recordGroupAction` callbacks for action
+ * selections which can't be observed from state alone.
+ */
+export function useCommandPaletteAnalytics(filteredActionCount: number): {
+  recordAction: (
+    action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
+    resultIndex: number,
+    group: string
+  ) => void;
+  recordGroupAction: (action: CommandPaletteActionWithKey, resultIndex: number) => void;
+} {
+  const organization = useOrganization();
+  const state = useCommandPaletteState();
+
+  const analyticsState = useRef({
+    sessionId: uniqueId('cmd-palette-'),
+    openedAt: Date.now(),
+    actionsSelected: 0,
+    queriesTyped: 0,
+    completed: false,
+    maxDrillDepth: 0,
+    hadInteraction: false,
+    lastTrackedQuery: '',
+    prevFilteredCount: filteredActionCount,
+    state,
+  });
+
+  useEffect(() => {
+    if (state.query.length > 0) {
+      analyticsState.current.hadInteraction = true;
+    }
+    analyticsState.current.state = state;
+  }, [state]);
+
+  // Debounced query tracking
+  useEffect(() => {
+    const s = analyticsState.current;
+    if (state.query.length === 0 || state.query === s.lastTrackedQuery) {
+      return undefined;
+    }
+
+    const timer = setTimeout(() => {
+      s.lastTrackedQuery = state.query;
+      s.queriesTyped++;
+      trackAnalytics('command_palette.searched', {
+        organization,
+        query: state.query,
+        result_count: s.prevFilteredCount,
+        session_id: s.sessionId,
+      });
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [state.query, organization]);
+
+  // Track no results
+  useEffect(() => {
+    const s = analyticsState.current;
+    const wasNonZero = s.prevFilteredCount > 0;
+    s.prevFilteredCount = filteredActionCount;
+
+    if (filteredActionCount === 0 && wasNonZero && state.query.length > 0) {
+      const actionLabel =
+        typeof state.action?.value.action.display.label === 'string'
+          ? state.action.value.action.display.label
+          : undefined;
+      trackAnalytics('command_palette.no_results', {
+        organization,
+        query: state.query,
+        action: actionLabel,
+        session_id: s.sessionId,
+      });
+      Sentry.logger.info('Command palette returned no results', {
+        query: state.query,
+        action: actionLabel,
+      });
+    }
+  }, [filteredActionCount, state.query, state.action, organization]);
+
+  // Fire closed + session events on unmount
+  useEffect(() => {
+    const s = analyticsState.current;
+
+    return () => {
+      const paletteState = s.state;
+
+      trackAnalytics('command_palette.closed', {
+        organization,
+        query: paletteState.query,
+        had_interaction: s.hadInteraction,
+        session_id: s.sessionId,
+      });
+
+      trackAnalytics('command_palette.session', {
+        organization,
+        session_id: s.sessionId,
+        duration_ms: Date.now() - s.openedAt,
+        actions_selected: s.actionsSelected,
+        queries_typed: s.queriesTyped,
+        completed: s.completed,
+        max_drill_depth: s.maxDrillDepth,
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return useMemo(
+    () => ({
+      recordAction(
+        action: Exclude<CommandPaletteActionWithKey, {type: 'group'}>,
+        resultIndex: number,
+        group: string
+      ) {
+        const s = analyticsState.current;
+        const path = getActionPath(s.state);
+        const label =
+          path.length > 0 ? `${path} → ${action.display.label}` : action.display.label;
+
+        trackAnalytics('command_palette.action_selected', {
+          organization,
+          action: label,
+          query: s.state.query,
+          action_type: action.type,
+          group,
+          result_index: resultIndex,
+          session_id: s.sessionId,
+        });
+
+        s.hadInteraction = true;
+        s.actionsSelected++;
+        s.completed = true;
+      },
+      recordGroupAction(action: CommandPaletteActionWithKey, resultIndex: number) {
+        const s = analyticsState.current;
+
+        trackAnalytics('command_palette.action_selected', {
+          organization,
+          action: action.display.label,
+          query: s.state.query,
+          action_type: 'group',
+          group: action.groupingKey ?? '',
+          result_index: resultIndex,
+          session_id: s.sessionId,
+        });
+
+        s.hadInteraction = true;
+        s.actionsSelected++;
+
+        const depth = getLinkedListDepth(s.state.action) + 1;
+        if (depth > s.maxDrillDepth) {
+          s.maxDrillDepth = depth;
+        }
+      },
+    }),
+    [organization]
+  );
+}
diff --git a/static/app/components/container/negativeSpaceContainer.stories.tsx b/static/app/components/container/negativeSpaceContainer.stories.tsx
index 0017e6b02457c1..b2afeea8fec7d0 100644
--- a/static/app/components/container/negativeSpaceContainer.stories.tsx
+++ b/static/app/components/container/negativeSpaceContainer.stories.tsx
@@ -3,6 +3,8 @@ import {Fragment} from 'react';
 import bgPattern from 'sentry-images/spot/mobile-hero.jpg';
 import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/replay-dead-rage-changelog.svg';
 
+import {InlineCode} from '@sentry/scraps/code';
+
 import {NegativeSpaceContainer} from 'sentry/components/container/negativeSpaceContainer';
 import * as Storybook from 'sentry/stories';
 
@@ -13,7 +15,7 @@ export default Storybook.story('NegativeSpaceContainer', story => {
         A <Storybook.JSXNode name="NegativeSpaceContainer" /> is a container with a
         diagonal pattern for a background. It will preserve the aspect ratio of whatever
         is inside it. It's a flex element, so the children are free to expand/contract
-        depending on whether things like <kbd>flex-grow: 1</kbd> are set.
+        depending on whether things like <InlineCode>flex-grow: 1</InlineCode> are set.
       </p>
       <p>Here's one with nothing inside it:</p>
       <NegativeSpaceContainer
diff --git a/static/app/components/copyToClipboardButton.stories.tsx b/static/app/components/copyToClipboardButton.stories.tsx
index fc23dbedab9a21..c4faaeb90d5685 100644
--- a/static/app/components/copyToClipboardButton.stories.tsx
+++ b/static/app/components/copyToClipboardButton.stories.tsx
@@ -1,6 +1,7 @@
 import {Fragment} from 'react';
 
 import {Button} from '@sentry/scraps/button';
+import {Kbd} from '@sentry/scraps/hotkey';
 
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {IconLink} from 'sentry/icons';
@@ -14,7 +15,7 @@ export default Storybook.story('CopyToClipboardButton', story => {
       <p>
         By default the button will stick the{' '}
         <Storybook.JSXProperty name="text" value={String} /> value onto your clipboard; as
-        if you typed <kbd>CTRL+C</kbd> or <kbd>CMD+C</kbd>. It'll show toast messages, and
+        if you typed <Kbd>CTRL+C</Kbd> or <Kbd>CMD+C</Kbd>. It'll show toast messages, and
         includes <Storybook.JSXProperty name="onCopy" value={Function} /> &
         <Storybook.JSXProperty name="onError" value={Function} /> callbacks.
       </p>
diff --git a/static/app/components/core/hotkey/hotkey.mdx b/static/app/components/core/hotkey/hotkey.mdx
new file mode 100644
index 00000000000000..b1e4e207224caa
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.mdx
@@ -0,0 +1,144 @@
+---
+title: Hotkey
+description: Components for displaying keyboard shortcuts with automatic platform-aware modifier rendering.
+category: utilities
+source: '@sentry/scraps/hotkey'
+resources:
+  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/hotkey/index.tsx
+  a11y:
+    WCAG 1.3.1: https://www.w3.org/TR/WCAG22/#info-and-relationships
+---
+
+import {Hotkey, Kbd} from '@sentry/scraps/hotkey';
+import {Flex} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import * as Storybook from 'sentry/stories';
+
+export const documentation = import('!!type-loader!@sentry/scraps/hotkey');
+
+The `<Hotkey>` component displays keyboard shortcuts using semantic `<kbd>` elements with automatic platform-aware modifier rendering. On Mac, `command` renders as `⌘`; on other platforms it renders as `CTRL`. The `<Kbd>` component renders a single styled key cap.
+
+## Hotkey
+
+`<Hotkey>` accepts the same key string format as the `useHotkeys` hook, making it easy to display the shortcuts you've already registered.
+
+<Storybook.Demo>
+  <Flex gap="xl" align="center">
+    <Flex gap="sm" align="center">
+      <Text>Save:</Text>
+      <Hotkey value="command+s" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Search:</Text>
+      <Hotkey value="command+k" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Copy:</Text>
+      <Hotkey value="command+c" />
+    </Flex>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Hotkey value="command+s" />
+<Hotkey value="command+k" />
+<Hotkey value="command+c" />
+```
+
+### Platform Mapping
+
+Modifiers are automatically mapped per platform. No fallback arrays needed for standard modifier differences.
+
+| Key name  | Mac | Other platforms |
+| --------- | --- | --------------- |
+| `command` | `⌘` | `CTRL`          |
+| `ctrl`    | `⌃` | `CTRL`          |
+| `alt`     | `⌥` | `ALT`           |
+| `option`  | `⌥` | `ALT`           |
+| `shift`   | `⇧` | `⇧`             |
+
+### Complex Shortcuts
+
+<Storybook.Demo>
+  <Flex gap="xl" align="center">
+    <Flex gap="sm" align="center">
+      <Text>Undo:</Text>
+      <Hotkey value="command+z" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Redo:</Text>
+      <Hotkey value="command+shift+z" />
+    </Flex>
+    <Flex gap="sm" align="center">
+      <Text>Navigate:</Text>
+      <Hotkey value="shift+up" />
+    </Flex>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Hotkey value="command+z" />
+<Hotkey value="command+shift+z" />
+<Hotkey value="shift+up" />
+```
+
+### Array Form
+
+Pass an array when the actual keys (not just modifiers) differ across platforms. The first combo is used.
+
+```jsx
+<Hotkey value={['command+backspace', 'delete']} />
+```
+
+## Kbd
+
+`<Kbd>` renders a single styled key cap. Use it for standalone key references in prose or documentation.
+
+<Storybook.Demo>
+  <Flex gap="lg" align="center">
+    <Text>
+      Press <Kbd>Esc</Kbd> to close
+    </Text>
+    <Text>
+      Use <Kbd>Tab</Kbd> to navigate
+    </Text>
+    <Text>
+      Hit <Kbd>Enter</Kbd> to confirm
+    </Text>
+  </Flex>
+</Storybook.Demo>
+
+```jsx
+<Text>
+  Press <Kbd>Esc</Kbd> to close
+</Text>
+<Text>
+  Use <Kbd>Tab</Kbd> to navigate
+</Text>
+```
+
+## useHotkeys Hook
+
+The `useHotkeys` hook registers keyboard shortcuts. It uses the same key string format as `<Hotkey>`, so you can display exactly what you register.
+
+```jsx
+import {Hotkey, useHotkeys} from '@sentry/scraps/hotkey';
+
+function MyComponent() {
+  useHotkeys([
+    {match: 'command+k', callback: () => openSearch()},
+    {match: ['command+/', 'ctrl+/'], callback: () => openHelp()},
+  ]);
+
+  return (
+    <Text>
+      Search: <Hotkey value="command+k" />
+    </Text>
+  );
+}
+```
+
+## Accessibility
+
+Both `<Hotkey>` and `<Kbd>` render semantic `<kbd>` HTML elements. `<Hotkey>` uses nested `<kbd>` elements (an outer `<kbd>` wrapping inner `<kbd>` elements for each key), which is the correct HTML semantics for a key combination.
diff --git a/static/app/components/core/hotkey/hotkey.spec.tsx b/static/app/components/core/hotkey/hotkey.spec.tsx
new file mode 100644
index 00000000000000..a04cf823d7132f
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.spec.tsx
@@ -0,0 +1,101 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {Hotkey} from '@sentry/scraps/hotkey';
+
+jest.mock('@react-aria/utils', () => ({
+  ...jest.requireActual('@react-aria/utils'),
+  isMac: jest.fn(() => false),
+}));
+
+const {isMac} = jest.requireMock<{isMac: jest.Mock}>('@react-aria/utils');
+
+describe('Hotkey', () => {
+  describe('mac platform', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('renders command as ⌘', () => {
+      render(<Hotkey value="command+k" />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('K')).toBeInTheDocument();
+    });
+
+    it('renders ctrl as ⌃', () => {
+      render(<Hotkey value="ctrl+alt+delete" />);
+      expect(screen.getByText('\u2303')).toBeInTheDocument();
+      expect(screen.getByText('\u2325')).toBeInTheDocument();
+      expect(screen.getByText('DEL')).toBeInTheDocument();
+    });
+
+    it('renders option as ⌥', () => {
+      render(<Hotkey value="option+x" />);
+      expect(screen.getByText('\u2325')).toBeInTheDocument();
+      expect(screen.getByText('X')).toBeInTheDocument();
+    });
+  });
+
+  describe('non-mac platform', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(false);
+    });
+
+    it('renders command as CTRL', () => {
+      render(<Hotkey value="command+k" />);
+      expect(screen.getByText('CTRL')).toBeInTheDocument();
+      expect(screen.getByText('K')).toBeInTheDocument();
+    });
+
+    it('renders ctrl as CTRL', () => {
+      render(<Hotkey value="ctrl+alt+delete" />);
+      expect(screen.getByText('CTRL')).toBeInTheDocument();
+      expect(screen.getByText('ALT')).toBeInTheDocument();
+      expect(screen.getByText('DEL')).toBeInTheDocument();
+    });
+
+    it('renders option as ALT', () => {
+      render(<Hotkey value="option+x" />);
+      expect(screen.getByText('ALT')).toBeInTheDocument();
+      expect(screen.getByText('X')).toBeInTheDocument();
+    });
+
+    it('renders shift as ⇧', () => {
+      render(<Hotkey value="shift+up" />);
+      expect(screen.getByText('\u21e7')).toBeInTheDocument();
+      expect(screen.getByText('\u2191')).toBeInTheDocument();
+    });
+  });
+
+  describe('string input', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('accepts a single string', () => {
+      render(<Hotkey value="command+/" />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('/')).toBeInTheDocument();
+    });
+  });
+
+  describe('array input', () => {
+    beforeEach(() => {
+      isMac.mockReturnValue(true);
+    });
+
+    it('uses first combo from array', () => {
+      render(<Hotkey value={['command+backspace', 'delete']} />);
+      expect(screen.getByText('\u2318')).toBeInTheDocument();
+      expect(screen.getByText('\u232b')).toBeInTheDocument();
+    });
+  });
+
+  describe('semantic HTML', () => {
+    it('renders nested kbd elements', () => {
+      render(<Hotkey value="command+k" />);
+      const kbdElements = document.querySelectorAll('kbd');
+      // Outer wrapper + 2 inner keys
+      expect(kbdElements).toHaveLength(3);
+    });
+  });
+});
diff --git a/static/app/components/core/hotkey/hotkey.tsx b/static/app/components/core/hotkey/hotkey.tsx
new file mode 100644
index 00000000000000..bd865c43df6c28
--- /dev/null
+++ b/static/app/components/core/hotkey/hotkey.tsx
@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+import {isMac as detectIsMac} from '@react-aria/utils';
+
+import {toArray} from 'sentry/utils/array/toArray';
+
+import {Kbd} from './kbd';
+import {resolveKeyGlyph} from './keyMappings';
+
+export interface HotkeyProps {
+  /**
+   * Key combination string(s) in the same format as `useHotkeys` match strings.
+   * Keys are separated by `+`. For example: `"command+k"`, `"shift+enter"`.
+   *
+   * Platform modifiers are mapped automatically:
+   * - `command` renders as `⌘` on Mac, `CTRL` on other platforms
+   * - `ctrl` renders as `⌃` on Mac, `CTRL` on other platforms
+   * - `alt`/`option` renders as `⌥` on Mac, `ALT` on other platforms
+   *
+   * Pass an array only when the actual keys differ across platforms
+   * (not just modifier names). The first compatible combo is used:
+   *
+   * ```tsx
+   * <Hotkey value={['command+backspace', 'delete']} />
+   * ```
+   */
+  value: string | string[];
+  variant?: 'embossed' | 'debossed';
+}
+
+export function Hotkey({value, variant}: HotkeyProps) {
+  const isMac = detectIsMac();
+
+  const keySets = toArray(value).map(v => v.trim().split('+'));
+
+  // Resolve glyphs for each key set
+  const resolved = keySets.map(keys => keys.map(key => resolveKeyGlyph(key, isMac)));
+
+  // If multiple combos provided, prefer the first one.
+  // (With auto platform mapping, a single string works cross-platform,
+  // so the array form is only for truly different key combos.)
+  const finalKeys = resolved[0];
+
+  if (!finalKeys || finalKeys.length === 0) {
+    return null;
+  }
+
+  return (
+    <WrapperKbd variant={variant}>
+      {finalKeys.map((glyph, i) => (
+        <StyledKbd key={i}>{glyph}</StyledKbd>
+      ))}
+    </WrapperKbd>
+  );
+}
+
+const WrapperKbd = styled(Kbd)`
+  padding: 0 ${p => p.theme.space.xs};
+  gap: ${p => p.theme.space['2xs']};
+`;
+
+const StyledKbd = styled('kbd')`
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  border: 0;
+  border-radius: ${p => p.theme.radius['2xs']};
+  box-shadow: none;
+`;
diff --git a/static/app/components/core/hotkey/index.tsx b/static/app/components/core/hotkey/index.tsx
new file mode 100644
index 00000000000000..35a656993729f0
--- /dev/null
+++ b/static/app/components/core/hotkey/index.tsx
@@ -0,0 +1,3 @@
+export {Kbd} from './kbd';
+export {Hotkey} from './hotkey';
+export {useHotkeys} from './useHotkeys';
diff --git a/static/app/components/core/hotkey/kbd.spec.tsx b/static/app/components/core/hotkey/kbd.spec.tsx
new file mode 100644
index 00000000000000..0f99f879d0f74a
--- /dev/null
+++ b/static/app/components/core/hotkey/kbd.spec.tsx
@@ -0,0 +1,21 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {Kbd} from '@sentry/scraps/hotkey';
+
+describe('Kbd', () => {
+  it('renders a kbd element', () => {
+    render(<Kbd>K</Kbd>);
+    const el = screen.getByText('K');
+    expect(el.tagName).toBe('KBD');
+  });
+
+  it('forwards className', () => {
+    render(<Kbd className="custom">X</Kbd>);
+    expect(screen.getByText('X')).toHaveClass('custom');
+  });
+
+  it('renders glyph characters', () => {
+    render(<Kbd>{'\u2318'}</Kbd>);
+    expect(screen.getByText('\u2318')).toBeInTheDocument();
+  });
+});
diff --git a/static/app/components/core/hotkey/kbd.tsx b/static/app/components/core/hotkey/kbd.tsx
new file mode 100644
index 00000000000000..060db7073d7cfc
--- /dev/null
+++ b/static/app/components/core/hotkey/kbd.tsx
@@ -0,0 +1,40 @@
+import {css, useTheme, type Theme} from '@emotion/react';
+
+export const kbdStyles = (theme: Theme, variant?: KbdProps['variant']) => css`
+  margin: 0;
+  padding: 0 ${theme.space['2xs']};
+
+  font-family: ${theme.font.family.mono};
+  font-size: ${theme.font.size.sm};
+  font-weight: ${theme.font.weight.sans.medium};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  color: ${variant === 'debossed'
+    ? theme.tokens.content.secondary
+    : theme.tokens.content.primary};
+  background: ${variant === 'debossed'
+    ? theme.tokens.background.secondary
+    : theme.tokens.background.primary};
+  border: ${theme.border.md} solid ${theme.tokens.border.primary};
+  border-top: ${variant === 'debossed'
+    ? `${theme.border.xl} solid ${theme.tokens.border.primary}`
+    : undefined};
+  border-bottom: ${variant === 'debossed'
+    ? undefined
+    : `${theme.border.xl} solid ${theme.tokens.border.primary}`};
+  border-radius: ${theme.radius.sm};
+  box-shadow: none;
+`;
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+  variant?: 'embossed' | 'debossed';
+}
+
+export function Kbd(props: KbdProps) {
+  const theme = useTheme();
+  return <kbd css={kbdStyles(theme, props.variant)} {...props} />;
+}
diff --git a/static/app/components/core/hotkey/keyMappings.ts b/static/app/components/core/hotkey/keyMappings.ts
new file mode 100644
index 00000000000000..7eb82940b92c8e
--- /dev/null
+++ b/static/app/components/core/hotkey/keyMappings.ts
@@ -0,0 +1,145 @@
+import * as Sentry from '@sentry/react';
+
+// Key name → keyCode mapping (from https://github.com/jaywcjlove/hotkeys)
+const keyNameCodeMapping: Record<string, number> = {
+  backspace: 8,
+  tab: 9,
+  clear: 12,
+  enter: 13,
+  return: 13,
+  esc: 27,
+  escape: 27,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  del: 46,
+  delete: 46,
+  ins: 45,
+  insert: 45,
+  home: 36,
+  end: 35,
+  pageup: 33,
+  pagedown: 34,
+  capslock: 20,
+  num_0: 96,
+  num_1: 97,
+  num_2: 98,
+  num_3: 99,
+  num_4: 100,
+  num_5: 101,
+  num_6: 102,
+  num_7: 103,
+  num_8: 104,
+  num_9: 105,
+  num_multiply: 106,
+  num_add: 107,
+  num_enter: 108,
+  num_subtract: 109,
+  num_decimal: 110,
+  num_divide: 111,
+  '\u21ea': 20,
+  ',': 188,
+  '.': 190,
+  '/': 191,
+  '`': 192,
+  '-': 189,
+  '=': 187,
+  ';': 186,
+  "'": 222,
+  '[': 219,
+  ']': 221,
+  '\\': 220,
+};
+
+const modifierNameKeyCodeMapping: Record<string, number> = {
+  '\u21e7': 16,
+  shift: 16,
+  '\u2325': 18,
+  alt: 18,
+  option: 18,
+  '\u2303': 17,
+  ctrl: 17,
+  control: 17,
+  '\u2318': 91,
+  cmd: 91,
+  command: 91,
+};
+
+/**
+ * Get the keyCode for a key name. Used by useHotkeys for event matching.
+ */
+export function getKeyCode(x: string): number {
+  const key = x.toLowerCase();
+  return (
+    keyNameCodeMapping[key] ??
+    modifierNameKeyCodeMapping[key] ??
+    x.toUpperCase().charCodeAt(0)
+  );
+}
+
+// Display glyph mappings
+
+const macGlyphs: Record<string, string> = {
+  command: '\u2318',
+  cmd: '\u2318',
+  meta: '\u2318',
+  ctrl: '\u2303',
+  control: '\u2303',
+  alt: '\u2325',
+  option: '\u2325',
+  shift: '\u21e7',
+};
+
+const genericGlyphs: Record<string, string> = {
+  command: 'CTRL',
+  cmd: 'CTRL',
+  meta: 'CTRL',
+  ctrl: 'CTRL',
+  control: 'CTRL',
+  alt: 'ALT',
+  option: 'ALT',
+  shift: '\u21e7',
+};
+
+const universalGlyphs: Record<string, string> = {
+  backspace: '\u232b',
+  delete: 'DEL',
+  del: 'DEL',
+  left: '\u2190',
+  up: '\u2191',
+  right: '\u2192',
+  down: '\u2193',
+  enter: '\u21b5',
+  return: '\u21b5',
+  tab: '\u21e5',
+  escape: 'ESC',
+  esc: 'ESC',
+  space: '\u2423',
+};
+
+/**
+ * Resolve a key name to its display glyph for the given platform.
+ * Non-special keys are uppercased.
+ */
+export function resolveKeyGlyph(keyName: string, isMac: boolean): string {
+  const key = keyName.toLowerCase();
+  const platformGlyphs = isMac ? macGlyphs : genericGlyphs;
+  const glyph = platformGlyphs[key] ?? universalGlyphs[key];
+
+  if (glyph) {
+    return glyph;
+  }
+
+  // Single-char keys (e.g. 'k', '/') are expected to fall through — they just get uppercased.
+  // Multi-char keys without a mapping are genuinely missing and should be flagged.
+  if (key.length > 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(`Missing key glyph mapping for "${keyName}"`);
+    }
+    Sentry.logger.warn('Missing key glyph mapping', {keyName});
+  }
+
+  return keyName.toUpperCase();
+}
diff --git a/static/app/utils/useHotkeys.spec.tsx b/static/app/components/core/hotkey/useHotkeys.spec.tsx
similarity index 95%
rename from static/app/utils/useHotkeys.spec.tsx
rename to static/app/components/core/hotkey/useHotkeys.spec.tsx
index bb74a213644ee6..6227000b4c0a95 100644
--- a/static/app/utils/useHotkeys.spec.tsx
+++ b/static/app/components/core/hotkey/useHotkeys.spec.tsx
@@ -1,7 +1,9 @@
 import {renderHook} from 'sentry-test/reactTestingLibrary';
 
-import {getKeyCode} from 'sentry/utils/getKeyCode';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
+// eslint-disable-next-line boundaries/entry-point
+import {getKeyCode} from './keyMappings';
 
 describe('useHotkeys', () => {
   let events: Record<string, (evt: EventListenerOrEventListenerObject) => void> = {};
@@ -15,10 +17,8 @@ describe('useHotkeys', () => {
   }
 
   beforeEach(() => {
-    // Empty our events before each test case
     events = {};
 
-    // Define the addEventListener method with a Jest mock function
     document.addEventListener = jest.fn((event: string, callback: () => any) => {
       events[event] = callback;
     });
diff --git a/static/app/utils/useHotkeys.tsx b/static/app/components/core/hotkey/useHotkeys.tsx
similarity index 96%
rename from static/app/utils/useHotkeys.tsx
rename to static/app/components/core/hotkey/useHotkeys.tsx
index a29c0eaee25d43..08cafc00d5d3bd 100644
--- a/static/app/utils/useHotkeys.tsx
+++ b/static/app/components/core/hotkey/useHotkeys.tsx
@@ -2,9 +2,10 @@ import {useEffect, useRef} from 'react';
 
 import {toArray} from 'sentry/utils/array/toArray';
 
-import {getKeyCode} from './getKeyCode';
+import {getKeyCode} from './keyMappings';
 
 const isKeyPressed = (key: string, evt: KeyboardEvent): boolean => {
+  // TODO(design-eng): we should just use `key`, `keyCode` is deprecated
   const keyCode = getKeyCode(key);
   switch (keyCode) {
     case getKeyCode('command'):
diff --git a/static/app/components/core/inspector.tsx b/static/app/components/core/inspector.tsx
index b7e7687aa5f8c7..ba7557cd8c1cf4 100644
--- a/static/app/components/core/inspector.tsx
+++ b/static/app/components/core/inspector.tsx
@@ -4,6 +4,7 @@ import {usePopper} from 'react-popper';
 import {css, useTheme} from '@emotion/react';
 
 import {Tag} from '@sentry/scraps/badge';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Separator} from '@sentry/scraps/separator';
 import {Text} from '@sentry/scraps/text';
@@ -27,7 +28,6 @@ import {
 } from 'sentry/stories/view/useStoriesLoader';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useContextMenu} from 'sentry/utils/profiling/hooks/useContextMenu';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 type TraceElement = HTMLElement | SVGElement;
diff --git a/static/app/components/core/text/prose.tsx b/static/app/components/core/text/prose.tsx
index cb4986f3b17abb..da72ccb1a30734 100644
--- a/static/app/components/core/text/prose.tsx
+++ b/static/app/components/core/text/prose.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {inlineCodeStyles} from '@sentry/scraps/code';
+import {kbdStyles} from '@sentry/scraps/hotkey/kbd';
 
 type ProsePropsWithChildren<T extends keyof HTMLElementTagNameMap = 'div'> = {
   as?: T;
@@ -46,5 +47,8 @@ export const Prose = styled(
   code:not(pre code) {
     ${p => inlineCodeStyles(p.theme)};
   }
+  kbd {
+    ${p => kbdStyles(p.theme)};
+  }
   /* stylelint-enable */
 `;
diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
index 773f8c9249eb35..59fbd5a5ff98c5 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
@@ -4,6 +4,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
@@ -17,7 +18,6 @@ import type {EventAttachment} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {ScreenshotPagination} from './screenshotPagination';
diff --git a/static/app/components/globalDrawer/index.tsx b/static/app/components/globalDrawer/index.tsx
index cc0b5c354aed76..07724b8a97a6d8 100644
--- a/static/app/components/globalDrawer/index.tsx
+++ b/static/app/components/globalDrawer/index.tsx
@@ -11,13 +11,13 @@ import type {Interpolation, Theme} from '@emotion/react';
 import {AnimatePresence, type Transition} from 'framer-motion';
 import type {Location} from 'history';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {useScrollLock} from '@sentry/scraps/useScrollLock';
 
 import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import {DrawerComponents} from 'sentry/components/globalDrawer/components';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOnClickOutside} from 'sentry/utils/useOnClickOutside';
 
diff --git a/static/app/components/hotkeysLabel.spec.tsx b/static/app/components/hotkeysLabel.spec.tsx
deleted file mode 100644
index 00de8ff3d31d5e..00000000000000
--- a/static/app/components/hotkeysLabel.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
-
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
-
-describe('HotkeysLabel', () => {
-  it('ctrl+alt+delete mac', () => {
-    render(<HotkeysLabel value={['ctrl+alt+delete']} forcePlatform="macos" />);
-    expect(screen.getByText('⌃')).toBeInTheDocument();
-    expect(screen.getByText('⌥')).toBeInTheDocument();
-    expect(screen.getByText('DELETE')).toBeInTheDocument();
-  });
-
-  it('ctrl+alt+delete windows', () => {
-    render(<HotkeysLabel value={['ctrl+alt+delete']} forcePlatform="generic" />);
-    expect(screen.getByText('CTRL')).toBeInTheDocument();
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-    expect(screen.getByText('DELETE')).toBeInTheDocument();
-  });
-
-  it('falls back when not on mac', () => {
-    render(<HotkeysLabel value={['cmd', 'alt']} forcePlatform="generic" />);
-    expect(screen.queryByText('⌘')).not.toBeInTheDocument();
-    expect(screen.queryByText('CMD')).not.toBeInTheDocument();
-
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-  });
-
-  it('does not render at all without fallback', () => {
-    render(<HotkeysLabel value={['cmd+k', 'cmd+alt+l']} forcePlatform="generic" />);
-    expect(screen.queryByText('⌘')).not.toBeInTheDocument();
-    expect(screen.queryByText('L')).not.toBeInTheDocument();
-    expect(screen.queryByText('ALT')).not.toBeInTheDocument();
-  });
-
-  it('takes just a string', () => {
-    render(<HotkeysLabel value="option" forcePlatform="generic" />);
-    expect(screen.getByText('ALT')).toBeInTheDocument();
-  });
-});
diff --git a/static/app/components/hotkeysLabel.tsx b/static/app/components/hotkeysLabel.tsx
deleted file mode 100644
index 8df1e6b5e55220..00000000000000
--- a/static/app/components/hotkeysLabel.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import styled from '@emotion/styled';
-
-import {toArray} from 'sentry/utils/array/toArray';
-import {getKeyCode} from 'sentry/utils/getKeyCode';
-
-const macModifiers = {
-  18: '⌥',
-  17: '⌃',
-  91: '⌘',
-};
-
-const normalModifiers = {
-  18: 'ALT',
-  17: 'CTRL',
-};
-
-const genericGlyphs = {
-  16: '⇧',
-  8: '⌫',
-  37: '←',
-  38: '↑',
-  39: '→',
-  40: '↓',
-  107: '+',
-};
-
-const keyToDisplay = (
-  key: string,
-  isMac: boolean
-): {label: React.ReactNode; specificToOs: 'macos' | 'generic'} => {
-  const keyCode = getKeyCode(key);
-
-  // Not a special key
-  if (!keyCode) {
-    return {label: <Key>{key.toUpperCase()}</Key>, specificToOs: 'generic'};
-  }
-
-  const modifierMap = isMac ? macModifiers : normalModifiers;
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  const keyStr = modifierMap[keyCode] ?? genericGlyphs[keyCode] ?? key.toUpperCase();
-
-  const specificToOs = keyCode === getKeyCode('command') ? 'macos' : 'generic';
-
-  return {label: <Key key={keyStr}>{keyStr}</Key>, specificToOs};
-};
-
-type Props = {
-  /**
-   * Pass key combinations in with + as the separator.
-   * For example: `'command+option+x'`
-   *
-   * Pass an array of strings for fallback key combos when the first one contains a key that does not exist on that os (non-mac):
-   * `['command+option+x', 'ctrl+shift+x']`
-   * (does not have to be the same combo)
-   */
-  value: string[] | string;
-  forcePlatform?: 'macos' | 'generic';
-};
-
-export function HotkeysLabel({value, forcePlatform}: Props) {
-  // Split by commas and then split by +, but allow escaped /+
-  const hotkeySets = toArray(value).map(o => o.trim().split('+'));
-
-  const isMac = forcePlatform
-    ? forcePlatform === 'macos'
-    : (window?.navigator?.platform?.toLowerCase().startsWith('mac') ?? false);
-
-  // If we're not using mac find the first key set that is generic.
-  // Otherwise show whatever the first hotkey is.
-  const finalKeySet = hotkeySets
-    .map(keySet => keySet.map(key => keyToDisplay(key, isMac)))
-    .find(keySet => (isMac ? true : keySet.every(key => key.specificToOs === 'generic')));
-
-  // No key available for the OS. Don't show a hotkey
-  if (finalKeySet === undefined) {
-    return null;
-  }
-
-  return <HotkeysContainer>{finalKeySet.map(key => key.label)}</HotkeysContainer>;
-}
-
-const Key = styled('span')`
-  font-size: ${p => p.theme.font.size.md};
-`;
-
-const HotkeysContainer = styled('div')`
-  font-family: ${p => p.theme.font.family.sans};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  > * {
-    margin-right: ${p => p.theme.space.xs};
-  }
-`;
diff --git a/static/gsApp/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings.tsx b/static/app/components/repositories/useBulkUpdateRepositorySettings.tsx
similarity index 92%
rename from static/gsApp/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings.tsx
rename to static/app/components/repositories/useBulkUpdateRepositorySettings.tsx
index cd704672510560..114813e0f6c2dc 100644
--- a/static/gsApp/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings.tsx
+++ b/static/app/components/repositories/useBulkUpdateRepositorySettings.tsx
@@ -1,3 +1,4 @@
+import {getRepositoryWithSettingsQueryKey} from 'sentry/components/repositories/useRepositoryWithSettings';
 import type {RepositoryWithSettings} from 'sentry/types/integrations';
 import {
   fetchMutation,
@@ -7,8 +8,6 @@ import {
 } from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
-import {getRepositoryWithSettingsQueryKey} from 'getsentry/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings';
-
 export type RepositorySettings =
   | {
       enabledCodeReview: boolean;
diff --git a/static/gsApp/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings.tsx b/static/app/components/repositories/useRepositoryWithSettings.tsx
similarity index 100%
rename from static/gsApp/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings.tsx
rename to static/app/components/repositories/useRepositoryWithSettings.tsx
diff --git a/static/app/components/searchBar/searchDropdown.tsx b/static/app/components/searchBar/searchDropdown.tsx
index 5ff4495de19096..333aad119d6ba6 100644
--- a/static/app/components/searchBar/searchDropdown.tsx
+++ b/static/app/components/searchBar/searchDropdown.tsx
@@ -4,9 +4,9 @@ import styled from '@emotion/styled';
 
 import {Tag} from '@sentry/scraps/badge';
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Hotkey} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Overlay} from 'sentry/components/overlay';
 import type {BooleanOperator, SearchConfig} from 'sentry/components/searchSyntax/parser';
@@ -147,7 +147,7 @@ export function SearchDropdown({
                 onClick={() => runShortcut(shortcut)}
               >
                 <HotkeyGlyphWrapper>
-                  <HotkeysLabel
+                  <Hotkey
                     value={shortcut.hotkeys?.display ?? shortcut.hotkeys?.actual ?? []}
                   />
                 </HotkeyGlyphWrapper>
diff --git a/static/app/components/tables/gridEditable/index.stories.tsx b/static/app/components/tables/gridEditable/index.stories.tsx
index 5bfe1bfdc8269b..34aa2131af1e37 100644
--- a/static/app/components/tables/gridEditable/index.stories.tsx
+++ b/static/app/components/tables/gridEditable/index.stories.tsx
@@ -1,6 +1,7 @@
 import {Fragment, useState} from 'react';
 
 import {Button} from '@sentry/scraps/button';
+import {InlineCode} from '@sentry/scraps/code';
 
 import type {
   GridColumnOrder,
@@ -166,8 +167,9 @@ export default Storybook.story('GridEditable', story => {
           </div>
           <div>
             <p>
-              In this example we are using <kbd>useQueryBasedColumnResize</kbd>. Notice
-              how the url updates after you drag columns.
+              In this example we are using{' '}
+              <InlineCode>useQueryBasedColumnResize</InlineCode>. Notice how the url
+              updates after you drag columns.
             </p>
             <GridEditable
               data={data}
diff --git a/static/app/components/themeAndStyleProvider.tsx b/static/app/components/themeAndStyleProvider.tsx
index 4852fbc9da2a99..abacbdf80cf515 100644
--- a/static/app/components/themeAndStyleProvider.tsx
+++ b/static/app/components/themeAndStyleProvider.tsx
@@ -3,6 +3,8 @@ import {createPortal} from 'react-dom';
 import createCache from '@emotion/cache';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {printConsoleBanner} from 'sentry/bootstrap/printConsoleBanner';
 import {NODE_ENV} from 'sentry/constants';
 import {ConfigStore} from 'sentry/stores/configStore';
@@ -11,7 +13,6 @@ import {GlobalStyles} from 'sentry/styles/global';
 import {removeBodyTheme} from 'sentry/utils/removeBodyTheme';
 // eslint-disable-next-line no-restricted-imports
 import {darkTheme, lightTheme} from 'sentry/utils/theme/theme';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 const SentryComponentInspector =
   NODE_ENV === 'development'
diff --git a/static/app/components/tours/components.tsx b/static/app/components/tours/components.tsx
index 87e35d24e0ea2b..573375ca683e2c 100644
--- a/static/app/components/tours/components.tsx
+++ b/static/app/components/tours/components.tsx
@@ -5,6 +5,7 @@ import {ClassNames, ThemeProvider, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Flex, Grid} from '@sentry/scraps/layout';
 
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
@@ -22,7 +23,6 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useInvertedTheme} from 'sentry/utils/theme/useInvertedTheme';
 import {useEffectAfterFirstRender} from 'sentry/utils/useEffectAfterFirstRender';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useOverlay, type UseOverlayProps} from 'sentry/utils/useOverlay';
 
diff --git a/static/app/debug/notifications/components/debugNotificationsSearch.tsx b/static/app/debug/notifications/components/debugNotificationsSearch.tsx
index 34b85f8168e2c2..44c1f860d71990 100644
--- a/static/app/debug/notifications/components/debugNotificationsSearch.tsx
+++ b/static/app/debug/notifications/components/debugNotificationsSearch.tsx
@@ -8,6 +8,7 @@ import type {CollectionChildren} from '@react-types/shared';
 
 import {Badge} from '@sentry/scraps/badge';
 import {ListBox} from '@sentry/scraps/compactSelect';
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 
 import {Overlay} from 'sentry/components/overlay';
@@ -16,7 +17,6 @@ import {useRegistry} from 'sentry/debug/notifications/hooks/useRegistry';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {fzf} from 'sentry/utils/search/fzf';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
 export function DebugNotificationsSearch() {
diff --git a/static/app/plugins/components/issueActions.tsx b/static/app/plugins/components/issueActions.tsx
index 8fe70355652437..b8191c366d3ad2 100644
--- a/static/app/plugins/components/issueActions.tsx
+++ b/static/app/plugins/components/issueActions.tsx
@@ -138,21 +138,15 @@ export class IssueActions extends PluginComponentBase<Props, State> {
   }
 
   getPluginCreateEndpoint() {
-    return (
-      '/issues/' + this.getGroup().id + '/plugins/' + this.props.plugin.slug + '/create/'
-    );
+    return `/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/create/`;
   }
 
   getPluginLinkEndpoint() {
-    return (
-      '/issues/' + this.getGroup().id + '/plugins/' + this.props.plugin.slug + '/link/'
-    );
+    return `/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/link/`;
   }
 
   getPluginUnlinkEndpoint() {
-    return (
-      '/issues/' + this.getGroup().id + '/plugins/' + this.props.plugin.slug + '/unlink/'
-    );
+    return `/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/unlink/`;
   }
 
   setDependentFieldState(fieldName: any, state: any) {
@@ -165,7 +159,7 @@ export class IssueActions extends PluginComponentBase<Props, State> {
 
     const groupId = this.getGroup().id;
     const pluginSlug = this.props.plugin.slug;
-    const url = `/issues/${groupId}/plugins/${pluginSlug}/options/`;
+    const url = `/organizations/${this.getOrganization().slug}/issues/${groupId}/plugins/${pluginSlug}/options/`;
 
     // find the fields that this field is dependent on
     const dependentFormValues = Object.fromEntries(
@@ -407,12 +401,7 @@ export class IssueActions extends PluginComponentBase<Props, State> {
                 if (field.has_autocomplete) {
                   field = Object.assign(
                     {
-                      url:
-                        '/api/0/issues/' +
-                        this.getGroup().id +
-                        '/plugins/' +
-                        this.props.plugin.slug +
-                        '/autocomplete',
+                      url: `/api/0/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/autocomplete`,
                     },
                     field
                   );
@@ -439,12 +428,7 @@ export class IssueActions extends PluginComponentBase<Props, State> {
                 if (field.has_autocomplete) {
                   field = Object.assign(
                     {
-                      url:
-                        '/api/0/issues/' +
-                        this.getGroup().id +
-                        '/plugins/' +
-                        this.props.plugin.slug +
-                        '/autocomplete',
+                      url: `/api/0/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/autocomplete`,
                     },
                     field
                   );
diff --git a/static/app/plugins/jira/components/issueActions.tsx b/static/app/plugins/jira/components/issueActions.tsx
index 1f35bc5940fb95..a6ba4b7b63ea42 100644
--- a/static/app/plugins/jira/components/issueActions.tsx
+++ b/static/app/plugins/jira/components/issueActions.tsx
@@ -73,12 +73,7 @@ export class IssueActions extends DefaultIssueActions {
           if (field.has_autocomplete) {
             field = Object.assign(
               {
-                url:
-                  '/api/0/issues/' +
-                  this.getGroup().id +
-                  '/plugins/' +
-                  this.props.plugin.slug +
-                  '/autocomplete',
+                url: `/api/0/organizations/${this.getOrganization().slug}/issues/${this.getGroup().id}/plugins/${this.props.plugin.slug}/autocomplete`,
               },
               field
             );
diff --git a/static/app/stories/view/storySearch.tsx b/static/app/stories/view/storySearch.tsx
index f5d9baf4491688..78a3f9b2827ab5 100644
--- a/static/app/stories/view/storySearch.tsx
+++ b/static/app/stories/view/storySearch.tsx
@@ -6,8 +6,8 @@ import {Item, Section} from '@react-stately/collections';
 import {useComboBoxState} from '@react-stately/combobox';
 import type {CollectionChildren} from '@react-types/shared';
 
-import {Badge} from '@sentry/scraps/badge';
 import {ListBox} from '@sentry/scraps/compactSelect';
+import {useHotkeys, Hotkey} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 import {Text} from '@sentry/scraps/text';
 
@@ -25,7 +25,6 @@ import {
 } from 'sentry/stories/view/storyTree';
 import {fzf} from 'sentry/utils/search/fzf';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
@@ -157,7 +156,7 @@ function SearchInput(
       </InputGroup.LeadingItems>
       <InputGroup.Input ref={props.ref} nativeSize={nativeSize} {...nativeProps} />
       <InputGroup.TrailingItems>
-        <Badge variant="internal">/</Badge>
+        <Hotkey value="/" />
       </InputGroup.TrailingItems>
     </InputGroup>
   );
diff --git a/static/app/stories/view/storyTree.tsx b/static/app/stories/view/storyTree.tsx
index bf4d1b1242da4d..727ed4c85dd21c 100644
--- a/static/app/stories/view/storyTree.tsx
+++ b/static/app/stories/view/storyTree.tsx
@@ -158,7 +158,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   buttons: {
     label: 'Buttons',
-    components: ['button', 'linkbutton'],
+    components: ['button', 'linkbutton', 'avatarbutton'],
   },
   controls: {
     label: 'Controls',
@@ -191,7 +191,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   status: {
     label: 'Status',
-    components: ['alert', 'badge', 'tag', 'toast'],
+    components: ['alert', 'badge', 'tag', 'toast', 'statusindicator'],
   },
   display: {
     label: 'Display',
@@ -203,7 +203,7 @@ export const COMPONENT_SUBCATEGORY_CONFIG: Record<
   },
   utilities: {
     label: 'Utilities',
-    components: ['separator', 'interactionstatelayer'],
+    components: ['separator', 'hotkey', 'interactionstatelayer'],
   },
   shared: {
     label: 'Shared',
diff --git a/static/app/utils/analytics/commandPaletteAnalyticsEvents.tsx b/static/app/utils/analytics/commandPaletteAnalyticsEvents.tsx
index a5f314dcd3a6cf..dbc6d4ef51df3f 100644
--- a/static/app/utils/analytics/commandPaletteAnalyticsEvents.tsx
+++ b/static/app/utils/analytics/commandPaletteAnalyticsEvents.tsx
@@ -3,11 +3,37 @@ type CommandPaletteOpenedEvent = {
   source: 'button' | 'keyboard';
 };
 
+type CommandPaletteClosedEvent = {
+  /** Whether the user interacted (typed a query or selected an action) before closing */
+  had_interaction: boolean;
+  /** The search query at time of close */
+  query: string;
+  /** Session ID to correlate events within a single palette session */
+  session_id: string;
+};
+
 type CommandPaletteActionSelectedEvent = {
   /** The label of the selected action, serialized by the caller */
   action: string;
+  /** The type of action selected */
+  action_type: 'navigate' | 'callback' | 'group';
+  /** The grouping section the action was in (e.g. 'navigate', 'add', 'help') */
+  group: string;
   /** The search query that led to the action being selected */
   query: string;
+  /** Position of the selected action in the results list (0-indexed) */
+  result_index: number;
+  /** Session ID */
+  session_id: string;
+};
+
+type CommandPaletteSearchedEvent = {
+  /** The search query */
+  query: string;
+  /** Number of results returned for the query */
+  result_count: number;
+  /** Session ID */
+  session_id: string;
 };
 
 type CommandPaletteNoResultsEvent = {
@@ -15,18 +41,41 @@ type CommandPaletteNoResultsEvent = {
   action: string | undefined;
   /** The search query that produced no results */
   query: string;
+  /** Session ID */
+  session_id: string;
+};
+
+type CommandPaletteSessionEvent = {
+  /** Number of actions selected (including group drills) */
+  actions_selected: number;
+  /** Whether the session ended with a final action (navigate/callback) */
+  completed: boolean;
+  /** Total time the palette was open in ms */
+  duration_ms: number;
+  /** Deepest level of group navigation (0 = no drill, 1 = drilled once, etc.) */
+  max_drill_depth: number;
+  /** Number of search queries typed */
+  queries_typed: number;
+  /** Session ID */
+  session_id: string;
 };
 
 export type CommandPaletteEventParameters = {
   'command_palette.action_selected': CommandPaletteActionSelectedEvent;
+  'command_palette.closed': CommandPaletteClosedEvent;
   'command_palette.no_results': CommandPaletteNoResultsEvent;
   'command_palette.opened': CommandPaletteOpenedEvent;
+  'command_palette.searched': CommandPaletteSearchedEvent;
+  'command_palette.session': CommandPaletteSessionEvent;
 };
 
 type CommandPaletteEventKey = keyof CommandPaletteEventParameters;
 
 export const commandPaletteEventMap: Record<CommandPaletteEventKey, string> = {
   'command_palette.opened': 'Command Palette: Opened',
+  'command_palette.closed': 'Command Palette: Closed',
   'command_palette.action_selected': 'Command Palette: Action Selected',
+  'command_palette.searched': 'Command Palette: Searched',
   'command_palette.no_results': 'Command Palette: No Results',
+  'command_palette.session': 'Command Palette: Session',
 };
diff --git a/static/app/utils/api/useFetchSequentialPages.stories.tsx b/static/app/utils/api/useFetchSequentialPages.stories.tsx
index 15dc2290514c5c..73213681623f61 100644
--- a/static/app/utils/api/useFetchSequentialPages.stories.tsx
+++ b/static/app/utils/api/useFetchSequentialPages.stories.tsx
@@ -1,5 +1,7 @@
 import {Fragment, useCallback, useRef} from 'react';
 
+import {InlineCode} from '@sentry/scraps/code';
+
 import {StructuredEventData} from 'sentry/components/structuredEventData';
 import * as Storybook from 'sentry/stories';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
@@ -90,7 +92,8 @@ export default Storybook.story('useFetchSequentialPages', story => {
       <Fragment>
         <p>
           You can stop a series of requests from continuing by returning a{' '}
-          <kbd>undefined</kbd> from the <code>getQueryKey</code> callback.
+          <InlineCode>undefined</InlineCode> from the <InlineCode>getQueryKey</InlineCode>{' '}
+          callback.
         </p>
         <p>Here we limit the number of pages to 2</p>
         <StructuredEventData data={{pages: pages.length, isFetching}} />
diff --git a/static/app/utils/getKeyCode.ts b/static/app/utils/getKeyCode.ts
deleted file mode 100644
index ef0d3dc767f96c..00000000000000
--- a/static/app/utils/getKeyCode.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// key maps and utils retrieved from https://github.com/jaywcjlove/hotkeys
-
-/**
- * Includes a lot of leftover unused codes for the future in case we
- * want glyphs for them
- */
-const keyNameCodeMapping = {
-  backspace: 8,
-  tab: 9,
-  clear: 12,
-  enter: 13,
-  return: 13,
-  esc: 27,
-  escape: 27,
-  space: 32,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  del: 46,
-  delete: 46,
-  ins: 45,
-  insert: 45,
-  home: 36,
-  end: 35,
-  pageup: 33,
-  pagedown: 34,
-  capslock: 20,
-  num_0: 96,
-  num_1: 97,
-  num_2: 98,
-  num_3: 99,
-  num_4: 100,
-  num_5: 101,
-  num_6: 102,
-  num_7: 103,
-  num_8: 104,
-  num_9: 105,
-  num_multiply: 106,
-  num_add: 107,
-  num_enter: 108,
-  num_subtract: 109,
-  num_decimal: 110,
-  num_divide: 111,
-  '⇪': 20,
-  ',': 188,
-  '.': 190,
-  '/': 191,
-  '`': 192,
-  '-': 189,
-  '=': 187,
-  ';': 186,
-  "'": 222,
-  '[': 219,
-  ']': 221,
-  '\\': 220,
-};
-
-// Modifier Keys
-const modifierNameKeyCodeMapping = {
-  // shiftKey
-  '⇧': 16,
-  shift: 16,
-  // altKey
-  '⌥': 18,
-  alt: 18,
-  option: 18,
-  // ctrlKey
-  '⌃': 17,
-  ctrl: 17,
-  control: 17,
-  // metaKey
-  '⌘': 91,
-  cmd: 91,
-  command: 91,
-};
-
-export const getKeyCode = (x: string): number =>
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  keyNameCodeMapping[x.toLowerCase()] ||
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-  modifierNameKeyCodeMapping[x.toLowerCase()] ||
-  x.toUpperCase().charCodeAt(0);
diff --git a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
index 60c8b63cff0449..68bce41b0b822d 100644
--- a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
+++ b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.spec.tsx
@@ -397,7 +397,10 @@ describe('useCopyIssueDetails', () => {
     });
 
     it('sets up hotkeys with the correct callbacks', () => {
-      const useHotkeysMock = jest.spyOn(require('sentry/utils/useHotkeys'), 'useHotkeys');
+      const useHotkeysMock = jest.spyOn(
+        require('@sentry/scraps/hotkey/useHotkeys'),
+        'useHotkeys'
+      );
 
       renderHook(() => useCopyIssueDetails(group, event));
 
diff --git a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
index dae69e00bc5aa9..5da561ea15cfd3 100644
--- a/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
+++ b/static/app/views/issueDetails/streamline/hooks/useCopyIssueDetails.tsx
@@ -1,5 +1,7 @@
 import {useCallback, useMemo, useSyncExternalStore} from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import type {AutofixData} from 'sentry/components/events/autofix/types';
 import {useAutofixData} from 'sentry/components/events/autofix/useAutofix';
 import {
@@ -17,7 +19,6 @@ import type {Group} from 'sentry/types/group';
 import type {StacktraceType} from 'sentry/types/stacktrace';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useCopyToClipboard} from 'sentry/utils/useCopyToClipboard';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 // Simple store for active thread ID from the UI with subscription support
diff --git a/static/app/views/navigation/index.desktop.spec.tsx b/static/app/views/navigation/index.desktop.spec.tsx
index c667f7efb7861a..9753ff54febea8 100644
--- a/static/app/views/navigation/index.desktop.spec.tsx
+++ b/static/app/views/navigation/index.desktop.spec.tsx
@@ -15,7 +15,6 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {ConfigStore} from 'sentry/stores/configStore';
-import {getKeyCode} from 'sentry/utils/getKeyCode';
 import {Navigation} from 'sentry/views/navigation';
 import {NAVIGATION_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY} from 'sentry/views/navigation/constants';
 import {PrimaryNavigationContextProvider} from 'sentry/views/navigation/primaryNavigationContext';
@@ -626,7 +625,7 @@ describe('desktop navigation', () => {
           navigationContext()
         );
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
 
         expect(screen.getByTestId('collapsed-secondary-sidebar')).toBeInTheDocument();
       });
@@ -639,10 +638,10 @@ describe('desktop navigation', () => {
           navigationContext()
         );
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
         expect(screen.getByTestId('collapsed-secondary-sidebar')).toBeInTheDocument();
 
-        fireEvent.keyDown(document, {keyCode: getKeyCode('b'), ctrlKey: true});
+        fireEvent.keyDown(document, {keyCode: 66 /* b */, ctrlKey: true});
         expect(
           screen.queryByTestId('collapsed-secondary-sidebar')
         ).not.toBeInTheDocument();
diff --git a/static/app/views/navigation/index.tsx b/static/app/views/navigation/index.tsx
index 227daf0fe88e06..30e423e7794410 100644
--- a/static/app/views/navigation/index.tsx
+++ b/static/app/views/navigation/index.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Container, Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 
@@ -8,7 +9,6 @@ import {CommandPaletteHotkeys} from 'sentry/components/commandPalette/ui/command
 import {useGlobalCommandPaletteActions} from 'sentry/components/commandPalette/useGlobalCommandPaletteActions';
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 import {t} from 'sentry/locale';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {
   MobileNavigation,
diff --git a/static/app/views/seerExplorer/explorerPanel.tsx b/static/app/views/seerExplorer/explorerPanel.tsx
index a0d96c89fabaa1..3c8292be995e53 100644
--- a/static/app/views/seerExplorer/explorerPanel.tsx
+++ b/static/app/views/seerExplorer/explorerPanel.tsx
@@ -1,15 +1,16 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {Button} from '@sentry/scraps/button';
+import {Hotkey} from '@sentry/scraps/hotkey';
 import {Container} from '@sentry/scraps/layout';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
-import {HotkeysLabel} from 'sentry/components/hotkeysLabel';
 import {IconSeer} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {User} from 'sentry/types/user';
@@ -818,24 +819,28 @@ function SeerFloatingActionButton(props: SeerFloatingActionButtonProps) {
           right={theme.space.lg}
           style={{zIndex: theme.zIndex.sidebarPanel}}
         >
-          <MotionButton
+          <SeerButton
             initial={{opacity: 0, scale: 0.9, y: 20}}
             animate={{opacity: 1, scale: 1, y: 0}}
             exit={{opacity: 0, scale: 0.9, y: 20}}
             transition={{duration: 0.2, ease: [0.4, 0, 0.2, 1]}}
             size="sm"
             {...rest}
+            icon={<IconSeer />}
           >
             <Flex align="center" gap="sm">
-              <IconSeer size="sm" />
               <Text size="sm">{t('Ask Seer')}</Text>
-              <Text size="xs" variant="muted">
-                <HotkeysLabel value={['command+/', 'ctrl+/']} />
-              </Text>
+              <Hotkey variant="debossed" value="command+/" />
             </Flex>
-          </MotionButton>
+          </SeerButton>
         </Container>
       )}
     </AnimatePresence>
   );
 }
+
+const SeerButton = styled(MotionButton)`
+  & > span:last-child {
+    overflow: visible;
+  }
+`;
diff --git a/static/app/views/seerExplorer/useExplorerPanel.tsx b/static/app/views/seerExplorer/useExplorerPanel.tsx
index 954e983ac27b5f..55188a248f1b17 100644
--- a/static/app/views/seerExplorer/useExplorerPanel.tsx
+++ b/static/app/views/seerExplorer/useExplorerPanel.tsx
@@ -7,8 +7,9 @@ import {
   type ReactNode,
 } from 'react';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
+
 import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 type ExplorerPanelContextValue = {
   closeExplorerPanel: () => void;
diff --git a/static/app/views/settings/components/settingsSearch/index.tsx b/static/app/views/settings/components/settingsSearch/index.tsx
index 5a15a1a851cbed..6fa6b87b63dc4b 100644
--- a/static/app/views/settings/components/settingsSearch/index.tsx
+++ b/static/app/views/settings/components/settingsSearch/index.tsx
@@ -1,12 +1,12 @@
 import {useRef} from 'react';
 import styled from '@emotion/styled';
 
+import {useHotkeys} from '@sentry/scraps/hotkey';
 import {InputGroup} from '@sentry/scraps/input';
 
 import {Search} from 'sentry/components/search';
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {useHotkeys} from 'sentry/utils/useHotkeys';
 
 const MIN_SEARCH_LENGTH = 1;
 const MAX_RESULTS = 10;
diff --git a/static/app/views/settings/organizationTeams/otherTeamsTable.tsx b/static/app/views/settings/organizationTeams/otherTeamsTable.tsx
index 14e57861b16ccf..e4bcab1f54a008 100644
--- a/static/app/views/settings/organizationTeams/otherTeamsTable.tsx
+++ b/static/app/views/settings/organizationTeams/otherTeamsTable.tsx
@@ -234,7 +234,7 @@ function TeamAction({
 }
 
 const StyledSimpleTable = styled(SimpleTable)`
-  grid-template-columns: 1fr 125px 150px 130px;
+  grid-template-columns: 1fr 125px 150px auto;
   margin-bottom: ${p => p.theme.space.xl};
 
   [data-column-name='actions'] {
@@ -242,7 +242,7 @@ const StyledSimpleTable = styled(SimpleTable)`
   }
 
   @media (max-width: ${p => p.theme.breakpoints.md}) {
-    grid-template-columns: 1fr 125px 130px;
+    grid-template-columns: 1fr 125px auto;
 
     [data-column-name='projects'] {
       display: none;
diff --git a/static/app/views/settings/organizationTeams/yourTeamsTable.tsx b/static/app/views/settings/organizationTeams/yourTeamsTable.tsx
index ddbb841fb73721..b7acc95c2e5abe 100644
--- a/static/app/views/settings/organizationTeams/yourTeamsTable.tsx
+++ b/static/app/views/settings/organizationTeams/yourTeamsTable.tsx
@@ -208,7 +208,7 @@ function YourTeamRow({
 }
 
 const StyledSimpleTable = styled(SimpleTable)`
-  grid-template-columns: 1fr 125px 150px 130px;
+  grid-template-columns: 1fr 125px 150px auto;
   margin-bottom: ${p => p.theme.space.xl};
 
   [data-column-name='actions'] {
@@ -216,7 +216,7 @@ const StyledSimpleTable = styled(SimpleTable)`
   }
 
   @media (max-width: ${p => p.theme.breakpoints.md}) {
-    grid-template-columns: 1fr 125px 130px;
+    grid-template-columns: 1fr 125px auto;
 
     [data-column-name='projects'] {
       display: none;
diff --git a/static/app/views/settings/project/preprod/types.ts b/static/app/views/settings/project/preprod/types.ts
index 643ce1582141ab..fa3ed53cdd7618 100644
--- a/static/app/views/settings/project/preprod/types.ts
+++ b/static/app/views/settings/project/preprod/types.ts
@@ -124,10 +124,10 @@ export function getMetricLabelForPlatform(
   platform: Platform | undefined
 ): string {
   if (platform === 'android' && metric === 'install_size') {
-    return 'Uncompressed size';
+    return 'Uncompressed Size';
   }
   if (platform === 'apple' && metric === 'install_size') {
-    return 'Install size';
+    return 'Install Size';
   }
   return getMetricLabel(metric);
 }
diff --git a/static/app/views/settings/seer/overview/codeReviewOverviewSection.stories.tsx b/static/app/views/settings/seer/overview/codeReviewOverviewSection.stories.tsx
new file mode 100644
index 00000000000000..db2e47637cddfa
--- /dev/null
+++ b/static/app/views/settings/seer/overview/codeReviewOverviewSection.stories.tsx
@@ -0,0 +1,137 @@
+import {Fragment, type ComponentProps} from 'react';
+
+import * as Storybook from 'sentry/stories';
+import {RepositoryStatus} from 'sentry/types/integrations';
+import type {RepositoryWithSettings} from 'sentry/types/integrations';
+import type {Organization} from 'sentry/types/organization';
+import {CodeReviewOverviewSection} from 'sentry/views/settings/seer/overview/codeReviewOverviewSection';
+
+type Props = ComponentProps<typeof CodeReviewOverviewSection>;
+
+function makeRepo(
+  id: string,
+  name: string,
+  enabledCodeReview: boolean
+): RepositoryWithSettings {
+  return {
+    id,
+    name,
+    externalId: id,
+    externalSlug: name,
+    integrationId: '1',
+    url: `https://github.com/${name}`,
+    status: RepositoryStatus.ACTIVE,
+    dateCreated: '',
+    provider: {id: 'integrations:github', name: 'GitHub'},
+    settings: {
+      enabledCodeReview,
+      codeReviewTriggers: ['on_ready_for_review', 'on_new_commit'],
+    },
+  };
+}
+
+const ALL_REPOS: RepositoryWithSettings[] = [
+  makeRepo('1', 'my-org/frontend', false),
+  makeRepo('2', 'my-org/backend', false),
+  makeRepo('3', 'my-org/infra', false),
+  makeRepo('4', 'my-org/mobile', false),
+  makeRepo('5', 'my-org/data-pipeline', false),
+];
+
+const BASE_ORG = {
+  slug: 'my-org',
+  autoEnableCodeReview: true,
+  defaultCodeReviewTriggers: ['on_ready_for_review', 'on_new_commit'],
+  access: ['org:read', 'org:write', 'org:admin', 'org:integrations'],
+} as Organization;
+
+const ORG = BASE_ORG;
+const ORG_AUTO_OFF: Organization = {...BASE_ORG, autoEnableCodeReview: false};
+const ORG_READONLY: Organization = {...BASE_ORG, access: ['org:read']};
+
+function makeProps(
+  seerRepos: RepositoryWithSettings[],
+  reposWithCodeReview: RepositoryWithSettings[],
+  orgOverride: Organization = ORG,
+  isPending = false
+): Props {
+  return {
+    isPending,
+    data: {queryKey: ['repositories'] as any, seerRepos, reposWithCodeReview},
+    refetch: () => Promise.resolve({} as any),
+    canWrite: true,
+    organization: orgOverride,
+  } as Props;
+}
+
+export default Storybook.story('CodeReviewOverviewSection', story => {
+  story('Overview', () => (
+    <Fragment>
+      <p>
+        The <Storybook.JSXNode name="CodeReviewOverviewSection" /> is the code review
+        panel in the Seer settings overview page. It lets users enable or disable code
+        review across all existing repositories at once and configure the default triggers
+        (on push vs. on ready-for-review).
+      </p>
+      <p>
+        The component derives its display from two lists: <code>seerRepos</code> (all
+        Seer-compatible repos) and <code>reposWithCodeReview</code> (the subset that have
+        code review enabled). The ratio between them drives the counter text and the
+        enable/disable bulk-action button state. The{' '}
+        <strong>Enable Code Review by Default</strong> toggle reflects{' '}
+        <code>organization.autoEnableCodeReview</code> and flips the direction of the bulk
+        action (enable remaining vs. disable all).
+      </p>
+    </Fragment>
+  ));
+
+  story('Loading', () => <CodeReviewOverviewSection {...makeProps([], [], ORG, true)} />);
+
+  story('0 repos', () => <CodeReviewOverviewSection {...makeProps([], [])} />);
+
+  story('1 repo / 0 enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS.slice(0, 1), [])} />
+  ));
+
+  story('1 repo / 1 enabled (all)', () => (
+    <CodeReviewOverviewSection
+      {...makeProps(ALL_REPOS.slice(0, 1), ALL_REPOS.slice(0, 1))}
+    />
+  ));
+
+  story('N repos / 0 enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, [])} />
+  ));
+
+  story('N repos / 1 enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, ALL_REPOS.slice(0, 1))} />
+  ));
+
+  story('N repos / many enabled (not all)', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, ALL_REPOS.slice(0, 3))} />
+  ));
+
+  story('N repos / all enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, ALL_REPOS)} />
+  ));
+
+  story('Auto-enable off / 0 enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, [], ORG_AUTO_OFF)} />
+  ));
+
+  story('Auto-enable off / some enabled', () => (
+    <CodeReviewOverviewSection
+      {...makeProps(ALL_REPOS, ALL_REPOS.slice(0, 2), ORG_AUTO_OFF)}
+    />
+  ));
+
+  story('Auto-enable off / all enabled', () => (
+    <CodeReviewOverviewSection {...makeProps(ALL_REPOS, ALL_REPOS, ORG_AUTO_OFF)} />
+  ));
+
+  story('Read-only (no org:write)', () => (
+    <CodeReviewOverviewSection
+      {...makeProps(ALL_REPOS, ALL_REPOS.slice(0, 2), ORG_READONLY)}
+    />
+  ));
+});
diff --git a/static/app/views/settings/seer/overview/codeReviewOverviewSection.tsx b/static/app/views/settings/seer/overview/codeReviewOverviewSection.tsx
new file mode 100644
index 00000000000000..d3e2e643345e2c
--- /dev/null
+++ b/static/app/views/settings/seer/overview/codeReviewOverviewSection.tsx
@@ -0,0 +1,315 @@
+import {useCallback} from 'react';
+import {mutationOptions} from '@tanstack/react-query';
+import uniqBy from 'lodash/uniqBy';
+import {z} from 'zod';
+
+import {Button} from '@sentry/scraps/button';
+import {AutoSaveForm, FieldGroup} from '@sentry/scraps/form';
+import {Container, Flex, Stack} from '@sentry/scraps/layout';
+import {Link} from '@sentry/scraps/link';
+import {Text} from '@sentry/scraps/text';
+
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {updateOrganization} from 'sentry/actionCreators/organizations';
+import {organizationRepositoriesInfiniteOptions} from 'sentry/components/events/autofix/preferences/hooks/useOrganizationRepositories';
+import {useSeerSupportedProviderIds} from 'sentry/components/events/autofix/utils';
+import {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
+import {getRepositoryWithSettingsQueryKey} from 'sentry/components/repositories/useRepositoryWithSettings';
+import {IconRefresh, IconSettings} from 'sentry/icons';
+import {t, tct, tn} from 'sentry/locale';
+import {DEFAULT_CODE_REVIEW_TRIGGERS} from 'sentry/types/integrations';
+import type {Organization} from 'sentry/types/organization';
+import {useFetchAllPages} from 'sentry/utils/api/apiFetch';
+import {useInfiniteQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {fetchMutation} from 'sentry/utils/queryClient';
+import {useOrganization} from 'sentry/utils/useOrganization';
+
+export function useCodeReviewOverviewSection() {
+  const organization = useOrganization();
+  const seerSupportedProviderIds = useSeerSupportedProviderIds();
+
+  const queryOptions = organizationRepositoriesInfiniteOptions({
+    organization,
+    query: {per_page: 100},
+  });
+  const repositoriesResult = useInfiniteQuery({
+    ...queryOptions,
+    select: ({pages}) => {
+      const repos = uniqBy(
+        pages.flatMap(page => page.json),
+        'externalId'
+      ).filter(repository => repository.externalId);
+      const seerRepos = repos.filter(r =>
+        seerSupportedProviderIds.includes(r.provider.id)
+      );
+      const reposWithCodeReview = seerRepos.filter(r => r.settings?.enabledCodeReview);
+      return {
+        queryKey: queryOptions.queryKey,
+        seerRepos,
+        reposWithCodeReview,
+      };
+    },
+  });
+  useFetchAllPages({result: repositoriesResult});
+
+  return repositoriesResult;
+}
+
+type Props = ReturnType<typeof useCodeReviewOverviewSection> & {
+  canWrite: boolean;
+  organization: Organization;
+};
+
+export function CodeReviewOverviewSection({
+  canWrite,
+  isPending,
+  organization,
+  data,
+  refetch,
+}: Props) {
+  const queryClient = useQueryClient();
+
+  const {queryKey, seerRepos = [], reposWithCodeReview = []} = data ?? {};
+
+  const seerReposCount = seerRepos.length;
+  const reposWithCodeReviewCount = reposWithCodeReview.length;
+
+  const schema = z.object({
+    autoEnableCodeReview: z.boolean(),
+    defaultCodeReviewTriggers: z.array(z.enum(['on_new_commit', 'on_ready_for_review'])),
+  });
+
+  const orgMutationOpts = mutationOptions({
+    mutationFn: (updateData: Partial<Organization>) =>
+      fetchMutation<Organization>({
+        method: 'PUT',
+        url: `/organizations/${organization.slug}/`,
+        data: updateData,
+      }),
+    onSuccess: updateOrganization,
+  });
+
+  const {mutate: mutateRepositorySettings} = useBulkUpdateRepositorySettings({
+    onSettled: mutations => {
+      // Invalidate the repositories query to get the updated settings
+      if (queryKey) {
+        queryClient.invalidateQueries({queryKey});
+      }
+      (mutations ?? []).forEach(mutation => {
+        // Invalidate related queries
+        queryClient.invalidateQueries({
+          queryKey: getRepositoryWithSettingsQueryKey(organization, mutation.id),
+        });
+      });
+    },
+  });
+
+  const handleToggleCodeReview = useCallback(
+    (enabledCodeReview: boolean) => {
+      const repositoryIds = (
+        enabledCodeReview
+          ? seerRepos.filter(repo => !repo.settings?.enabledCodeReview)
+          : reposWithCodeReview
+      ).map(repo => repo.id);
+      mutateRepositorySettings(
+        {enabledCodeReview, repositoryIds},
+        {
+          onError: (_, variables) => {
+            addErrorMessage(
+              tn(
+                'Failed to update code review for %s repository',
+                'Failed to update code review for %s repositories',
+                variables.repositoryIds.length
+              )
+            );
+          },
+          onSuccess: (_, variables) => {
+            addSuccessMessage(
+              tn(
+                'Code review updated for %s repository',
+                'Code review updated for %s repositories',
+                variables.repositoryIds.length
+              )
+            );
+          },
+        }
+      );
+    },
+    [mutateRepositorySettings, reposWithCodeReview, seerRepos]
+  );
+
+  const handleChangeTriggers = useCallback(
+    (newTriggers: string[]) => {
+      mutateRepositorySettings(
+        {
+          codeReviewTriggers: newTriggers,
+          repositoryIds: seerRepos.map(repo => repo.id),
+        },
+        {
+          onError: (_, variables) => {
+            addErrorMessage(
+              tn(
+                'Failed to update triggers for %s repository',
+                'Failed to update triggers for %s repositories',
+                variables.repositoryIds.length
+              )
+            );
+          },
+          onSuccess: (_, variables) => {
+            addSuccessMessage(
+              tn(
+                'Triggers updated for %s repository',
+                'Triggers updated for %s repositories',
+                variables.repositoryIds.length
+              )
+            );
+          },
+        }
+      );
+    },
+    [mutateRepositorySettings, seerRepos]
+  );
+
+  return (
+    <FieldGroup
+      title={
+        <Flex justify="between" gap="md" flexGrow={1}>
+          <Flex align="center" gap="md">
+            <span>{t('Code Review')}</span>
+            <Button
+              size="zero"
+              priority="link"
+              icon={<IconRefresh size="xs" />}
+              aria-label={t('Reload repositories')}
+              onClick={() => refetch()}
+            />
+          </Flex>
+          <Text uppercase={false}>
+            <Link to={`/settings/${organization.slug}/seer/repos/`}>
+              <Flex align="center" gap="xs">
+                {t('Configure')} <IconSettings size="xs" />
+              </Flex>
+            </Link>
+          </Text>
+        </Flex>
+      }
+    >
+      <AutoSaveForm
+        name="autoEnableCodeReview"
+        schema={schema}
+        initialValue={organization.autoEnableCodeReview ?? true}
+        mutationOptions={orgMutationOpts}
+      >
+        {field => (
+          <Stack gap="md">
+            <field.Layout.Row
+              label={t('Enable Code Review by Default')}
+              hintText={t(
+                'For all new projects, select which coding agent Seer will hand off to when processing issues.'
+              )}
+            >
+              <Container flexGrow={1}>
+                <field.Switch
+                  checked={field.state.value}
+                  onChange={field.handleChange}
+                  disabled={!canWrite}
+                />
+              </Container>
+            </field.Layout.Row>
+
+            <Flex align="center" alignSelf="end" gap="md" width="50%" paddingLeft="xl">
+              <Button
+                size="xs"
+                busy={isPending}
+                disabled={
+                  !canWrite ||
+                  (field.state.value
+                    ? reposWithCodeReviewCount === seerReposCount
+                    : seerReposCount - reposWithCodeReviewCount === seerReposCount)
+                }
+                onClick={() => {
+                  handleToggleCodeReview(field.state.value);
+                }}
+              >
+                {field.state.value
+                  ? tn(
+                      'Enable for existing repo',
+                      'Enable for all existing repos',
+                      seerReposCount - reposWithCodeReviewCount
+                    )
+                  : tn(
+                      'Disable for the existing repo',
+                      'Disable for all existing repos',
+                      reposWithCodeReviewCount
+                    )}
+              </Button>
+              <Text variant="secondary" size="sm">
+                {field.state.value
+                  ? t(
+                      '%s of %s existing repos have code review enabled',
+                      reposWithCodeReviewCount,
+                      seerReposCount
+                    )
+                  : t(
+                      '%s of %s existing repos have code review disabled',
+                      seerReposCount - reposWithCodeReviewCount,
+                      seerReposCount
+                    )}
+              </Text>
+            </Flex>
+          </Stack>
+        )}
+      </AutoSaveForm>
+
+      <AutoSaveForm
+        name="defaultCodeReviewTriggers"
+        schema={schema}
+        initialValue={
+          organization.defaultCodeReviewTriggers ?? DEFAULT_CODE_REVIEW_TRIGGERS
+        }
+        mutationOptions={orgMutationOpts}
+      >
+        {field => (
+          <Stack gap="md">
+            <field.Layout.Row
+              label={t('Default Code Review Triggers')}
+              hintText={tct(
+                'Reviews can always run on demand by calling [code:@sentry review], whenever a PR is opened, or after each commit is pushed to a PR.',
+                {code: <code />}
+              )}
+            >
+              <Container flexGrow={1}>
+                <field.Select
+                  multiple
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  disabled={!canWrite}
+                  options={[
+                    {value: 'on_ready_for_review', label: t('On Ready for Review')},
+                    {value: 'on_new_commit', label: t('On New Commit')},
+                  ]}
+                />
+              </Container>
+            </field.Layout.Row>
+            <Flex align="center" alignSelf="end" gap="md" width="50%" paddingLeft="xl">
+              <Button
+                size="xs"
+                busy={isPending}
+                disabled={!canWrite}
+                onClick={() => {
+                  handleChangeTriggers(field.state.value);
+                }}
+              >
+                {tn(
+                  'Set for the existing repo',
+                  'Set for all existing repos',
+                  seerReposCount
+                )}
+              </Button>
+            </Flex>
+          </Stack>
+        )}
+      </AutoSaveForm>
+    </FieldGroup>
+  );
+}
diff --git a/static/gsApp/views/seerAutomation/components/repoDetails/repoDetailsForm.tsx b/static/gsApp/views/seerAutomation/components/repoDetails/repoDetailsForm.tsx
index 36d787f8fba4e1..661b2a7301d171 100644
--- a/static/gsApp/views/seerAutomation/components/repoDetails/repoDetailsForm.tsx
+++ b/static/gsApp/views/seerAutomation/components/repoDetails/repoDetailsForm.tsx
@@ -3,12 +3,12 @@ import {Stack} from '@sentry/scraps/layout';
 
 import {Form} from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
+import {type RepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
 import {t, tct} from 'sentry/locale';
 import {type RepositoryWithSettings} from 'sentry/types/integrations';
 import type {Organization} from 'sentry/types/organization';
 
 import {useCanWriteSettings} from 'getsentry/views/seerAutomation/components/useCanWriteSettings';
-import {type RepositorySettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings';
 
 interface Props {
   organization: Organization;
diff --git a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx
index 4e065e988b1a4d..87ea64f66ada6d 100644
--- a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx
+++ b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx
@@ -20,6 +20,8 @@ import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Panel} from 'sentry/components/panels/panel';
 import {ScmRepoTreeModal} from 'sentry/components/repositories/scmRepoTreeModal';
+import {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
+import {getRepositoryWithSettingsQueryKey} from 'sentry/components/repositories/useRepositoryWithSettings';
 import {IconAdd} from 'sentry/icons';
 import {IconSearch} from 'sentry/icons/iconSearch';
 import {t, tct} from 'sentry/locale';
@@ -35,8 +37,6 @@ import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {SeerRepoTableHeader} from 'getsentry/views/seerAutomation/components/repoTable/seerRepoTableHeader';
 import {SeerRepoTableRow} from 'getsentry/views/seerAutomation/components/repoTable/seerRepoTableRow';
-import {useBulkUpdateRepositorySettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings';
-import {getRepositoryWithSettingsQueryKey} from 'getsentry/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings';
 
 const GRID_COLUMNS = '40px 1fr 118px 150px';
 const SELECTED_ROW_HEIGHT = 44;
diff --git a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx
index 54464c61b68585..2154026373c489 100644
--- a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx
+++ b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx
@@ -8,6 +8,7 @@ import {Flex} from '@sentry/scraps/layout';
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {QuestionTooltip} from 'sentry/components/questionTooltip';
+import type {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t, tct, tn} from 'sentry/locale';
 import {parseQueryKey} from 'sentry/utils/api/apiQueryKey';
@@ -15,7 +16,6 @@ import type {Sort} from 'sentry/utils/discover/fields';
 import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 
 import {useCanWriteSettings} from 'getsentry/views/seerAutomation/components/useCanWriteSettings';
-import type {useBulkUpdateRepositorySettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings';
 
 interface Props {
   gridColumns: string;
diff --git a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableRow.tsx b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableRow.tsx
index ecca8455caf784..0208f6e6de1bd7 100644
--- a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableRow.tsx
+++ b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableRow.tsx
@@ -12,6 +12,11 @@ import {
   addSuccessMessage,
 } from 'sentry/actionCreators/indicator';
 import {getRepoStatusLabel} from 'sentry/components/repositories/getRepoStatusLabel';
+import {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
+import {
+  getRepositoryWithSettingsQueryKey,
+  useRepositoryWithSettings,
+} from 'sentry/components/repositories/useRepositoryWithSettings';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IconOpen} from 'sentry/icons/iconOpen';
 import {t} from 'sentry/locale';
@@ -26,11 +31,6 @@ import {useQueryClient} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {useCanWriteSettings} from 'getsentry/views/seerAutomation/components/useCanWriteSettings';
-import {useBulkUpdateRepositorySettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings';
-import {
-  getRepositoryWithSettingsQueryKey,
-  useRepositoryWithSettings,
-} from 'getsentry/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings';
 
 interface Props {
   gridColumns: string;
diff --git a/static/gsApp/views/seerAutomation/onboarding/configureCodeReviewStep.tsx b/static/gsApp/views/seerAutomation/onboarding/configureCodeReviewStep.tsx
index 9aca9f09218163..abd5295a726169 100644
--- a/static/gsApp/views/seerAutomation/onboarding/configureCodeReviewStep.tsx
+++ b/static/gsApp/views/seerAutomation/onboarding/configureCodeReviewStep.tsx
@@ -16,13 +16,13 @@ import {
 } from 'sentry/components/guidedSteps/guidedSteps';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {PanelBody} from 'sentry/components/panels/panelBody';
+import {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
 import {t} from 'sentry/locale';
 import {DEFAULT_CODE_REVIEW_TRIGGERS} from 'sentry/types/integrations';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {trackGetsentryAnalytics} from 'getsentry/utils/trackGetsentryAnalytics';
 import {useSeerOnboardingContext} from 'getsentry/views/seerAutomation/onboarding/hooks/seerOnboardingContext';
-import {useBulkUpdateRepositorySettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useBulkUpdateRepositorySettings';
 
 import {MaxWidthPanel, PanelDescription, StepContent} from './common';
 import {RepositorySelector} from './repositorySelector';
diff --git a/static/gsApp/views/seerAutomation/repoDetails.tsx b/static/gsApp/views/seerAutomation/repoDetails.tsx
index 1afc2c2079e653..c25218d84f9fb9 100644
--- a/static/gsApp/views/seerAutomation/repoDetails.tsx
+++ b/static/gsApp/views/seerAutomation/repoDetails.tsx
@@ -9,6 +9,7 @@ import {useIsSeerSupportedProvider} from 'sentry/components/events/autofix/utils
 import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {RepoProviderIcon} from 'sentry/components/repositories/repoProviderIcon';
+import {useRepositoryWithSettings} from 'sentry/components/repositories/useRepositoryWithSettings';
 import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import {useOrganization} from 'sentry/utils/useOrganization';
@@ -17,7 +18,6 @@ import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageH
 
 import {RepoDetailsForm} from 'getsentry/views/seerAutomation/components/repoDetails/repoDetailsForm';
 import {SeerSettingsPageWrapper} from 'getsentry/views/seerAutomation/components/seerSettingsPageWrapper';
-import {useRepositoryWithSettings} from 'getsentry/views/seerAutomation/onboarding/hooks/useRepositoryWithSettings';
 
 export default function SeerRepoDetails() {
   const {repoId} = useParams<{repoId: string}>();
diff --git a/static/gsApp/views/seerAutomation/settings.tsx b/static/gsApp/views/seerAutomation/settings.tsx
index e8c9881fd286f4..d2ba78a3f63d42 100644
--- a/static/gsApp/views/seerAutomation/settings.tsx
+++ b/static/gsApp/views/seerAutomation/settings.tsx
@@ -15,6 +15,10 @@ import type {Organization} from 'sentry/types/organization';
 import {fetchMutation} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader';
+import {
+  CodeReviewOverviewSection,
+  useCodeReviewOverviewSection,
+} from 'sentry/views/settings/seer/overview/codeReviewOverviewSection';
 import {
   SCMOverviewSection,
   useSCMOverviewSection,
@@ -37,7 +41,10 @@ export function SeerAutomationSettings() {
   const organization = useOrganization();
   const canWrite = useCanWriteSettings();
 
+  const showSeerOverview = organization.features.includes('seer-overview');
+
   const scmOverviewData = useSCMOverviewSection();
+  const codeReviewOverviewData = useCodeReviewOverviewSection();
 
   const orgEndpoint = `/organizations/${organization.slug}/`;
   const orgMutationOpts = mutationOptions({
@@ -82,9 +89,9 @@ export function SeerAutomationSettings() {
       />
       <SeerSettingsPageContent>
         <SCMOverviewSection
-          organizationSlug={organization.slug}
-          canWrite={canWrite}
           {...scmOverviewData}
+          canWrite={canWrite}
+          organizationSlug={organization.slug}
         />
         <FieldGroup
           title={
@@ -186,75 +193,84 @@ export function SeerAutomationSettings() {
             )}
           </AutoSaveForm>
         </FieldGroup>
-        <FieldGroup
-          title={
-            <Flex gap="md">
-              <span>{t('Default Code Review for New Repos')}</span>
-              <QuestionTooltip
-                isHoverable
-                title={tct(
-                  'These settings apply as repos are newly connected. Any [link:existing repos] will not be affected.',
-                  {
-                    link: <Link to={`/settings/${organization.slug}/seer/repos/`} />,
-                  }
-                )}
-                size="xs"
-                icon="info"
-              />
-            </Flex>
-          }
-        >
-          <AutoSaveForm
-            name="autoEnableCodeReview"
-            schema={schema}
-            initialValue={organization.autoEnableCodeReview ?? true}
-            mutationOptions={orgMutationOpts}
-          >
-            {field => (
-              <field.Layout.Row
-                label={t('Enable Code Review by Default')}
-                hintText={t(
-                  'For all new repos connected, Seer will review your PRs and flag potential bugs.'
-                )}
-              >
-                <field.Switch
-                  checked={field.state.value}
-                  onChange={field.handleChange}
-                  disabled={!canWrite}
+
+        {showSeerOverview ? (
+          <CodeReviewOverviewSection
+            {...codeReviewOverviewData}
+            canWrite={canWrite}
+            organization={organization}
+          />
+        ) : (
+          <FieldGroup
+            title={
+              <Flex gap="md">
+                <span>{t('Default Code Review for New Repos')}</span>
+                <QuestionTooltip
+                  isHoverable
+                  title={tct(
+                    'These settings apply as repos are newly connected. Any [link:existing repos] will not be affected.',
+                    {
+                      link: <Link to={`/settings/${organization.slug}/seer/repos/`} />,
+                    }
+                  )}
+                  size="xs"
+                  icon="info"
                 />
-              </field.Layout.Row>
-            )}
-          </AutoSaveForm>
-          <AutoSaveForm
-            name="defaultCodeReviewTriggers"
-            schema={schema}
-            initialValue={
-              organization.defaultCodeReviewTriggers ?? DEFAULT_CODE_REVIEW_TRIGGERS
+              </Flex>
             }
-            mutationOptions={orgMutationOpts}
           >
-            {field => (
-              <field.Layout.Row
-                label={t('Code Review Triggers')}
-                hintText={tct(
-                  'Reviews can always run on demand by calling [code:@sentry review], whenever a PR is opened, or after each commit is pushed to a PR.',
-                  {code: <code />}
-                )}
-              >
-                <field.Select
-                  multiple
-                  value={field.state.value}
-                  onChange={field.handleChange}
-                  disabled={!canWrite}
-                  options={[
-                    {value: 'on_ready_for_review', label: t('On Ready for Review')},
-                    {value: 'on_new_commit', label: t('On New Commit')},
-                  ]}
-                />
-              </field.Layout.Row>
-            )}
-          </AutoSaveForm>
-        </FieldGroup>
+            <AutoSaveForm
+              name="autoEnableCodeReview"
+              schema={schema}
+              initialValue={organization.autoEnableCodeReview ?? true}
+              mutationOptions={orgMutationOpts}
+            >
+              {field => (
+                <field.Layout.Row
+                  label={t('Enable Code Review by Default')}
+                  hintText={t(
+                    'For all new repos connected, Seer will review your PRs and flag potential bugs.'
+                  )}
+                >
+                  <field.Switch
+                    checked={field.state.value}
+                    onChange={field.handleChange}
+                    disabled={!canWrite}
+                  />
+                </field.Layout.Row>
+              )}
+            </AutoSaveForm>
+            <AutoSaveForm
+              name="defaultCodeReviewTriggers"
+              schema={schema}
+              initialValue={
+                organization.defaultCodeReviewTriggers ?? DEFAULT_CODE_REVIEW_TRIGGERS
+              }
+              mutationOptions={orgMutationOpts}
+            >
+              {field => (
+                <field.Layout.Row
+                  label={t('Code Review Triggers')}
+                  hintText={tct(
+                    'Reviews can always run on demand by calling [code:@sentry review], whenever a PR is opened, or after each commit is pushed to a PR.',
+                    {code: <code />}
+                  )}
+                >
+                  <field.Select
+                    multiple
+                    value={field.state.value}
+                    onChange={field.handleChange}
+                    disabled={!canWrite}
+                    options={[
+                      {value: 'on_ready_for_review', label: t('On Ready for Review')},
+                      {value: 'on_new_commit', label: t('On New Commit')},
+                    ]}
+                  />
+                </field.Layout.Row>
+              )}
+            </AutoSaveForm>
+          </FieldGroup>
+        )}
 
         <FieldGroup title={t('Advanced Settings')}>
           <AutoSaveForm