Add keyboard shortcut rebinding with string-based format and sectioned settings UI

- Parse/format shortcut strings ("Cmd+Shift+O") bidirectionally via shortcut-string.ts
- Convert all 60+ bindings from structured KeyCombo objects to declarative strings
- Add keyboard shortcut overrides storage (AsyncStorage + React Query)
- Wire overrides into the keyboard shortcut resolution pipeline
- Add sectioned settings layout with sidebar on desktop, single scroll on mobile
- Add keyboard shortcuts settings section with rebind/reset UI and key capture
- Create useShortcutKeys hook so tooltip shortcut displays update on rebind
- Replace hardcoded shortcut displays in agent-input-area, left-sidebar, command center

packages/app/src/components/agent-input-area.tsx

@@ -28,6 +28,7 @@ import { useVoiceOptional } from "@/contexts/voice-context";
 import { useToast } from "@/contexts/toast-context";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { Autocomplete } from "@/components/ui/autocomplete";
 import { useAgentAutocomplete } from "@/hooks/use-agent-autocomplete";
 import {
@@ -118,6 +119,7 @@ export function AgentInputArea({
   const agentDirectoryStatus = useHostRuntimeAgentDirectoryStatus(serverId);
   const toast = useToast();
   const voice = useVoiceOptional();
+  const voiceToggleKeys = useShortcutKeys("voice-toggle");
   const isDictationReady =
     isConnected &&
     (agentDirectoryStatus === "ready" ||
@@ -623,7 +625,7 @@ export function AgentInputArea({
           <TooltipContent side="top" align="center" offset={8}>
             <View style={styles.tooltipRow}>
               <Text style={styles.tooltipText}>Voice mode</Text>
-              <Shortcut keys={["mod", "shift", "D"]} style={styles.tooltipShortcut} />
+              {voiceToggleKeys && <Shortcut keys={voiceToggleKeys} style={styles.tooltipShortcut} />}
             </View>
           </TooltipContent>
         </Tooltip>

packages/app/src/components/left-sidebar.tsx

@@ -24,6 +24,7 @@ import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyl
 import { MessagesSquare, Plus, Settings } from "lucide-react-native";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { router, usePathname } from "expo-router";
 import { usePanelStore } from "@/stores/panel-store";
 import { SidebarWorkspaceList } from "./sidebar-workspace-list";
@@ -353,6 +354,7 @@ function MobileSidebar({
   closeToAgent,
   handleViewMoreNavigate,
 }: MobileSidebarProps) {
+  const newAgentKeys = useShortcutKeys("new-agent");
   const {
     translateX,
     backdropOpacity,
@@ -562,7 +564,7 @@ function MobileSidebar({
                   <TooltipContent side="top" align="center" offset={8}>
                     <View style={styles.tooltipRow}>
                       <Text style={styles.tooltipText}>Add project</Text>
-                      <Shortcut keys={["⌘", "⇧", "O"]} />
+                      {newAgentKeys && <Shortcut keys={newAgentKeys} />}
                     </View>
                   </TooltipContent>
                 </Tooltip>
@@ -626,6 +628,7 @@ function DesktopSidebar({
   isOpen,
   handleViewMore,
 }: DesktopSidebarProps) {
+  const newAgentKeys = useShortcutKeys("new-agent");
   const dragHandlers = useDesktopDragHandlers();
   const trafficLightPadding = useTrafficLightPadding();
   const hostStatusDotStyle = useMemo(

packages/app/src/hooks/use-command-center.ts

@@ -13,6 +13,11 @@ import {
 } from "@/utils/command-center-focus-restore";
 import { buildHostSettingsRoute, parseServerIdFromPathname } from "@/utils/host-routes";
 import type { ShortcutKey } from "@/utils/format-shortcut";
+import { comboStringToShortcutKeys } from "@/keyboard/shortcut-string";
+import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
+import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
+import { getShortcutOs } from "@/utils/shortcut-platform";
+import { getIsDesktop } from "@/constants/layout";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import { focusWithRetries } from "@/utils/web-focus";
 
@@ -48,7 +53,7 @@ type CommandCenterActionDefinition = {
   id: string;
   title: string;
   icon?: "plus" | "settings";
-  shortcutKeys?: ShortcutKey[];
+  actionId?: string;
   keywords: string[];
   routeKind: "settings" | "none";
 };
@@ -58,7 +63,7 @@ const COMMAND_CENTER_ACTIONS: readonly CommandCenterActionDefinition[] = [
     id: "new-agent",
     title: "Open project",
     icon: "plus",
-    shortcutKeys: ["mod", "shift", "O"],
+    actionId: "new-agent",
     keywords: ["open", "project", "folder", "workspace", "repo"],
     routeKind: "none",
   },
@@ -99,9 +104,25 @@ export type CommandCenterItem =
       agent: AggregatedAgent;
     };
 
+function resolveActionShortcutKeys(
+  actionId: string | undefined,
+  overrides: Record<string, string>,
+): ShortcutKey[] | undefined {
+  if (!actionId) return undefined;
+  const isMac = getShortcutOs() === "mac";
+  const isDesktop = getIsDesktop();
+  const platform = { isMac, isDesktop };
+  const bindingId = getBindingIdForAction(actionId, platform);
+  if (!bindingId) return undefined;
+  const override = overrides[bindingId];
+  if (override) return comboStringToShortcutKeys(override);
+  return getDefaultKeysForAction(actionId, platform) ?? undefined;
+}
+
 export function useCommandCenter() {
   const pathname = usePathname();
   const daemons = useHosts();
+  const { overrides } = useKeyboardShortcutOverrides();
   const open = useKeyboardShortcutsStore((s) => s.commandCenterOpen);
   const setOpen = useKeyboardShortcutsStore((s) => s.setCommandCenterOpen);
   const inputRef = useRef<TextInput>(null);
@@ -158,9 +179,9 @@ export function useCommandCenter() {
       title: action.title,
       icon: action.icon,
       route: action.routeKind === "settings" ? settingsRoute : undefined,
-      shortcutKeys: action.shortcutKeys,
+      shortcutKeys: resolveActionShortcutKeys(action.actionId, overrides),
     }));
-  }, [open, query, settingsRoute]);
+  }, [open, query, settingsRoute, overrides]);
 
   const items = useMemo(() => {
     if (!open) {

packages/app/src/hooks/use-keyboard-shortcut-overrides.ts

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+const STORAGE_KEY = "@paseo:keyboard-shortcut-overrides";
+const QUERY_KEY = ["keyboard-shortcut-overrides"];
+
+const EMPTY_OVERRIDES: Record<string, string> = {};
+
+export interface UseKeyboardShortcutOverridesReturn {
+  overrides: Record<string, string>;
+  isLoading: boolean;
+  setOverride: (bindingId: string, comboString: string) => Promise<void>;
+  removeOverride: (bindingId: string) => Promise<void>;
+  resetAll: () => Promise<void>;
+  hasOverrides: boolean;
+}
+
+export function useKeyboardShortcutOverrides(): UseKeyboardShortcutOverridesReturn {
+  const queryClient = useQueryClient();
+  const { data, isPending } = useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: loadOverridesFromStorage,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const setOverride = useCallback(
+    async (bindingId: string, comboString: string) => {
+      const prev =
+        queryClient.getQueryData<Record<string, string>>(QUERY_KEY) ?? EMPTY_OVERRIDES;
+      const next = { ...prev, [bindingId]: comboString };
+      queryClient.setQueryData<Record<string, string>>(QUERY_KEY, next);
+      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    },
+    [queryClient],
+  );
+
+  const removeOverride = useCallback(
+    async (bindingId: string) => {
+      const prev =
+        queryClient.getQueryData<Record<string, string>>(QUERY_KEY) ?? EMPTY_OVERRIDES;
+      const { [bindingId]: _, ...next } = prev;
+      queryClient.setQueryData<Record<string, string>>(QUERY_KEY, next);
+      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    },
+    [queryClient],
+  );
+
+  const resetAll = useCallback(async () => {
+    queryClient.setQueryData<Record<string, string>>(QUERY_KEY, EMPTY_OVERRIDES);
+    await AsyncStorage.removeItem(STORAGE_KEY);
+  }, [queryClient]);
+
+  const overrides = data ?? EMPTY_OVERRIDES;
+
+  return {
+    overrides,
+    isLoading: isPending,
+    setOverride,
+    removeOverride,
+    resetAll,
+    hasOverrides: Object.keys(overrides).length > 0,
+  };
+}
+
+async function loadOverridesFromStorage(): Promise<Record<string, string>> {
+  try {
+    const stored = await AsyncStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored) as Record<string, string>;
+    }
+  } catch (err) {
+    console.error("[KeyboardShortcutOverrides] Failed to load overrides:", err);
+  }
+  return EMPTY_OVERRIDES;
+}

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Platform } from "react-native";
 import { usePathname } from "expo-router";
 import { getIsDesktop } from "@/constants/layout";
@@ -17,10 +17,11 @@ import {
 } from "@/keyboard/actions";
 import { canToggleFileExplorerShortcut } from "@/keyboard/keyboard-shortcut-routing";
 import { keyboardActionDispatcher } from "@/keyboard/keyboard-action-dispatcher";
-import { resolveKeyboardShortcut } from "@/keyboard/keyboard-shortcuts";
+import { resolveKeyboardShortcut, buildEffectiveBindings } from "@/keyboard/keyboard-shortcuts";
 import { resolveKeyboardFocusScope } from "@/keyboard/focus-scope";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
+import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 
 export function useKeyboardShortcuts({
   enabled,
@@ -38,6 +39,8 @@ export function useKeyboardShortcuts({
   const pathname = usePathname();
   const hosts = useHosts();
   const resetModifiers = useKeyboardShortcutsStore((s) => s.resetModifiers);
+  const { overrides } = useKeyboardShortcutOverrides();
+  const bindings = useMemo(() => buildEffectiveBindings(overrides), [overrides]);
   const activeServerIdFromPath = parseServerIdFromPathname(pathname);
   const activeServerId =
     hosts.find((host) => host.serverId === activeServerIdFromPath)?.serverId ??
@@ -285,6 +288,7 @@ export function useKeyboardShortcuts({
             toggleFileExplorer,
           }),
         },
+        bindings,
       });
       if (!match) {
         return;
@@ -332,6 +336,7 @@ export function useKeyboardShortcuts({
       document.removeEventListener("visibilitychange", handleBlurOrHide);
     };
   }, [
+    bindings,
     enabled,
     isMobile,
     openProjectPickerAction,

packages/app/src/hooks/use-shortcut-keys.ts

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+import { comboStringToShortcutKeys } from "@/keyboard/shortcut-string";
+import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
+import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
+import { getShortcutOs } from "@/utils/shortcut-platform";
+import { getIsDesktop } from "@/constants/layout";
+
+export function useShortcutKeys(actionId: string): ShortcutKey[] | null {
+  const { overrides } = useKeyboardShortcutOverrides();
+  const isMac = getShortcutOs() === "mac";
+  const isDesktop = getIsDesktop();
+
+  return useMemo(() => {
+    const platform = { isMac, isDesktop };
+    const bindingId = getBindingIdForAction(actionId, platform);
+    if (!bindingId) return null;
+
+    const override = overrides[bindingId];
+    if (override) {
+      return comboStringToShortcutKeys(override);
+    }
+
+    return getDefaultKeysForAction(actionId, platform);
+  }, [actionId, overrides, isMac, isDesktop]);
+}

packages/app/src/keyboard/keyboard-shortcuts.ts

@@ -5,6 +5,9 @@ import type {
   KeyboardShortcutPayload,
   MessageInputKeyboardActionKind,
 } from "@/keyboard/actions";
+import { type KeyCombo, parseShortcutString } from "@/keyboard/shortcut-string";
+
+export type { KeyCombo } from "@/keyboard/shortcut-string";
 
 // --- Public types ---
 
@@ -43,18 +46,6 @@ type KeyboardShortcutPlatformContext = {
   isDesktop: boolean;
 };
 
-interface KeyCombo {
-  /** Event.code to match. Use "Digit" for any digit 1-9. */
-  code: string;
-  /** Optional event.key fallback (case-insensitive). */
-  key?: string;
-  meta?: true;
-  ctrl?: true;
-  alt?: true;
-  shift?: true;
-  /** Set to false to block key repeat events. */
-  repeat?: false;
-}
 
 interface ShortcutWhen {
   /** true = mac only, false = non-mac only */
@@ -87,7 +78,8 @@ interface ShortcutHelp {
 interface ShortcutBinding {
   id: string;
   action: KeyboardActionId;
-  combo: KeyCombo;
+  combo: string;
+  repeat?: false;
   when?: ShortcutWhen;
   payload?: ShortcutPayloadDef;
   preventDefault?: boolean;
@@ -95,6 +87,10 @@ interface ShortcutBinding {
   help?: ShortcutHelp;
 }
 
+export interface ParsedShortcutBinding extends ShortcutBinding {
+  parsedCombo: KeyCombo;
+}
+
 // --- Constants ---
 
 const SHORTCUT_HELP_SECTION_TITLES: Record<KeyboardShortcutHelpSection["id"], string> = {
@@ -109,7 +105,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "agent-new-cmd-shift-o-mac",
     action: "agent.new",
-    combo: { code: "KeyO", key: "o", meta: true, shift: true },
+    combo: "Cmd+Shift+O",
     when: { mac: true },
     help: {
       id: "new-agent",
@@ -121,7 +117,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "agent-new-ctrl-shift-o-non-mac",
     action: "agent.new",
-    combo: { code: "KeyO", key: "o", ctrl: true, shift: true },
+    combo: "Ctrl+Shift+O",
     when: { mac: false, terminal: false },
     help: {
       id: "new-agent",
@@ -135,7 +131,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-new-cmd-t-mac",
     action: "workspace.tab.new",
-    combo: { code: "KeyT", key: "t", meta: true },
+    combo: "Cmd+T",
     when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-tab-new",
@@ -147,7 +143,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-new-ctrl-t-non-mac",
     action: "workspace.tab.new",
-    combo: { code: "KeyT", key: "t", ctrl: true },
+    combo: "Ctrl+T",
     when: { mac: false, commandCenter: false, terminal: false },
     help: {
       id: "workspace-tab-new",
@@ -159,7 +155,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-close-current-cmd-w-mac",
     action: "workspace.tab.close.current",
-    combo: { code: "KeyW", key: "w", meta: true },
+    combo: "Cmd+W",
     when: { mac: true, desktop: true, commandCenter: false },
     help: {
       id: "workspace-tab-close-current",
@@ -171,7 +167,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-close-current-ctrl-w-non-mac",
     action: "workspace.tab.close.current",
-    combo: { code: "KeyW", key: "w", ctrl: true },
+    combo: "Ctrl+W",
     when: { mac: false, desktop: true, commandCenter: false, terminal: false },
     help: {
       id: "workspace-tab-close-current",
@@ -183,7 +179,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-close-current-alt-shift-w-web",
     action: "workspace.tab.close.current",
-    combo: { code: "KeyW", key: "w", alt: true, shift: true },
+    combo: "Alt+Shift+W",
     when: { desktop: false, commandCenter: false },
     help: {
       id: "workspace-tab-close-current",
@@ -197,7 +193,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-index-cmd-digit-mac",
     action: "workspace.navigate.index",
-    combo: { code: "Digit", meta: true },
+    combo: "Cmd+Digit",
     when: { mac: true, desktop: true, commandCenter: false },
     payload: { type: "index" },
     help: {
@@ -210,7 +206,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-index-ctrl-digit-non-mac",
     action: "workspace.navigate.index",
-    combo: { code: "Digit", ctrl: true },
+    combo: "Ctrl+Digit",
     when: { mac: false, desktop: true, commandCenter: false, terminal: false },
     payload: { type: "index" },
     help: {
@@ -223,7 +219,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-index-alt-digit-web",
     action: "workspace.navigate.index",
-    combo: { code: "Digit", alt: true },
+    combo: "Alt+Digit",
     when: { desktop: false, commandCenter: false },
     payload: { type: "index" },
     help: {
@@ -238,7 +234,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-navigate-index-alt-digit-desktop",
     action: "workspace.tab.navigate.index",
-    combo: { code: "Digit", alt: true },
+    combo: "Alt+Digit",
     when: { desktop: true, commandCenter: false },
     payload: { type: "index" },
     help: {
@@ -251,7 +247,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-navigate-index-alt-shift-digit-web",
     action: "workspace.tab.navigate.index",
-    combo: { code: "Digit", alt: true, shift: true },
+    combo: "Alt+Shift+Digit",
     when: { desktop: false, commandCenter: false },
     payload: { type: "index" },
     help: {
@@ -266,7 +262,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-cmd-left-mac",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketLeft", key: "[", meta: true },
+    combo: "Cmd+[",
     when: { mac: true, desktop: true, commandCenter: false },
     payload: { type: "delta", delta: -1 },
     help: {
@@ -279,7 +275,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-ctrl-left-non-mac",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketLeft", key: "[", ctrl: true },
+    combo: "Ctrl+[",
     when: { mac: false, desktop: true, commandCenter: false, terminal: false },
     payload: { type: "delta", delta: -1 },
     help: {
@@ -292,7 +288,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-cmd-right-mac",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketRight", key: "]", meta: true },
+    combo: "Cmd+]",
     when: { mac: true, desktop: true, commandCenter: false },
     payload: { type: "delta", delta: 1 },
     help: {
@@ -305,7 +301,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-ctrl-right-non-mac",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketRight", key: "]", ctrl: true },
+    combo: "Ctrl+]",
     when: { mac: false, desktop: true, commandCenter: false, terminal: false },
     payload: { type: "delta", delta: 1 },
     help: {
@@ -318,7 +314,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-alt-left-web",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketLeft", key: "[", alt: true },
+    combo: "Alt+[",
     when: { desktop: false, commandCenter: false },
     payload: { type: "delta", delta: -1 },
     help: {
@@ -331,7 +327,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-navigate-relative-alt-right-web",
     action: "workspace.navigate.relative",
-    combo: { code: "BracketRight", key: "]", alt: true },
+    combo: "Alt+]",
     when: { desktop: false, commandCenter: false },
     payload: { type: "delta", delta: 1 },
     help: {
@@ -346,7 +342,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-navigate-relative-alt-shift-left",
     action: "workspace.tab.navigate.relative",
-    combo: { code: "BracketLeft", alt: true, shift: true },
+    combo: "Alt+Shift+[",
     when: { commandCenter: false },
     payload: { type: "delta", delta: -1 },
     help: {
@@ -359,7 +355,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-tab-navigate-relative-alt-shift-right",
     action: "workspace.tab.navigate.relative",
-    combo: { code: "BracketRight", alt: true, shift: true },
+    combo: "Alt+Shift+]",
     when: { commandCenter: false },
     payload: { type: "delta", delta: 1 },
     help: {
@@ -374,7 +370,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-split-right-cmd-backslash",
     action: "workspace.pane.split.right",
-    combo: { code: "Backslash", meta: true },
+    combo: "Cmd+\\",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-split-right",
@@ -386,7 +382,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-split-down-cmd-shift-backslash",
     action: "workspace.pane.split.down",
-    combo: { code: "Backslash", meta: true, shift: true },
+    combo: "Cmd+Shift+\\",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-split-down",
@@ -398,7 +394,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-focus-left-cmd-shift-left",
     action: "workspace.pane.focus.left",
-    combo: { code: "ArrowLeft", meta: true, shift: true },
+    combo: "Cmd+Shift+ArrowLeft",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-focus-left",
@@ -410,7 +406,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-focus-right-cmd-shift-right",
     action: "workspace.pane.focus.right",
-    combo: { code: "ArrowRight", meta: true, shift: true },
+    combo: "Cmd+Shift+ArrowRight",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-focus-right",
@@ -422,7 +418,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-focus-up-cmd-shift-up",
     action: "workspace.pane.focus.up",
-    combo: { code: "ArrowUp", meta: true, shift: true },
+    combo: "Cmd+Shift+ArrowUp",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-focus-up",
@@ -434,7 +430,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-focus-down-cmd-shift-down",
     action: "workspace.pane.focus.down",
-    combo: { code: "ArrowDown", meta: true, shift: true },
+    combo: "Cmd+Shift+ArrowDown",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-focus-down",
@@ -446,7 +442,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-move-tab-left-cmd-shift-alt-left",
     action: "workspace.pane.move-tab.left",
-    combo: { code: "ArrowLeft", meta: true, alt: true, shift: true },
+    combo: "Cmd+Alt+Shift+ArrowLeft",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-left",
@@ -458,7 +454,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-move-tab-right-cmd-shift-alt-right",
     action: "workspace.pane.move-tab.right",
-    combo: { code: "ArrowRight", meta: true, alt: true, shift: true },
+    combo: "Cmd+Alt+Shift+ArrowRight",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-right",
@@ -470,7 +466,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-move-tab-up-cmd-shift-alt-up",
     action: "workspace.pane.move-tab.up",
-    combo: { code: "ArrowUp", meta: true, alt: true, shift: true },
+    combo: "Cmd+Alt+Shift+ArrowUp",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-up",
@@ -482,7 +478,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-move-tab-down-cmd-shift-alt-down",
     action: "workspace.pane.move-tab.down",
-    combo: { code: "ArrowDown", meta: true, alt: true, shift: true },
+    combo: "Cmd+Alt+Shift+ArrowDown",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-down",
@@ -494,7 +490,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "workspace-pane-close-cmd-shift-w",
     action: "workspace.pane.close",
-    combo: { code: "KeyW", key: "w", meta: true, shift: true },
+    combo: "Cmd+Shift+W",
     when: { mac: true, terminal: false, commandCenter: false },
     help: {
       id: "workspace-pane-close",
@@ -508,7 +504,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "command-center-toggle-cmd-k-mac",
     action: "command-center.toggle",
-    combo: { code: "KeyK", key: "k", meta: true },
+    combo: "Cmd+K",
     when: { mac: true },
     help: {
       id: "toggle-command-center",
@@ -520,7 +516,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "command-center-toggle-ctrl-k-non-mac",
     action: "command-center.toggle",
-    combo: { code: "KeyK", key: "k", ctrl: true },
+    combo: "Ctrl+K",
     when: { mac: false, terminal: false },
     help: {
       id: "toggle-command-center",
@@ -534,7 +530,8 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "shortcuts-dialog-toggle-question-mark",
     action: "shortcuts.dialog.toggle",
-    combo: { code: "Slash", key: "?", shift: true, repeat: false },
+    combo: "Shift+?",
+    repeat: false,
     when: { focusScope: "other" },
     help: {
       id: "show-shortcuts",
@@ -549,7 +546,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "sidebar-toggle-left-mac-cmd-b",
     action: "sidebar.toggle.left",
-    combo: { code: "KeyB", key: "b", meta: true },
+    combo: "Cmd+B",
     when: { mac: true },
     help: {
       id: "toggle-left-sidebar",
@@ -561,13 +558,13 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "sidebar-toggle-left-cmd-period-mac",
     action: "sidebar.toggle.left",
-    combo: { code: "Period", key: ".", meta: true },
+    combo: "Cmd+.",
     when: { mac: true, commandCenter: false },
   },
   {
     id: "sidebar-toggle-left-ctrl-period-non-mac",
     action: "sidebar.toggle.left",
-    combo: { code: "Period", key: ".", ctrl: true },
+    combo: "Ctrl+.",
     when: { mac: false, commandCenter: false, terminal: false },
     help: {
       id: "toggle-left-sidebar",
@@ -579,7 +576,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "sidebar-toggle-right-cmd-e-mac",
     action: "sidebar.toggle.right",
-    combo: { code: "KeyE", key: "e", meta: true },
+    combo: "Cmd+E",
     when: { mac: true, hasSelectedAgent: true, commandCenter: false },
     help: {
       id: "toggle-right-sidebar",
@@ -591,7 +588,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "sidebar-toggle-right-ctrl-e-non-mac",
     action: "sidebar.toggle.right",
-    combo: { code: "KeyE", key: "e", ctrl: true },
+    combo: "Ctrl+E",
     when: { mac: false, hasSelectedAgent: true, commandCenter: false, terminal: false },
     help: {
       id: "toggle-right-sidebar",
@@ -603,7 +600,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "sidebar-toggle-right-ctrl-backquote",
     action: "sidebar.toggle.right",
-    combo: { code: "Backquote", key: "`", ctrl: true },
+    combo: "Ctrl+`",
     when: { hasSelectedAgent: true, commandCenter: false },
   },
 
@@ -611,7 +608,8 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-voice-toggle-cmd-shift-d-mac",
     action: "message-input.action",
-    combo: { code: "KeyD", key: "d", meta: true, shift: true, repeat: false },
+    combo: "Cmd+Shift+D",
+    repeat: false,
     when: { mac: true, commandCenter: false, terminal: false },
     payload: { type: "message-input", kind: "voice-toggle" },
     help: {
@@ -624,7 +622,8 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-voice-toggle-ctrl-shift-d-non-mac",
     action: "message-input.action",
-    combo: { code: "KeyD", key: "d", ctrl: true, shift: true, repeat: false },
+    combo: "Ctrl+Shift+D",
+    repeat: false,
     when: { mac: false, commandCenter: false, terminal: false },
     payload: { type: "message-input", kind: "voice-toggle" },
     help: {
@@ -637,7 +636,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-dictation-toggle-cmd-d-mac",
     action: "message-input.action",
-    combo: { code: "KeyD", key: "d", meta: true },
+    combo: "Cmd+D",
     when: { mac: true, commandCenter: false, terminal: false },
     payload: { type: "message-input", kind: "dictation-toggle" },
     help: {
@@ -650,7 +649,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-dictation-toggle-ctrl-d-non-mac",
     action: "message-input.action",
-    combo: { code: "KeyD", key: "d", ctrl: true },
+    combo: "Ctrl+D",
     when: { mac: false, commandCenter: false, terminal: false },
     payload: { type: "message-input", kind: "dictation-toggle" },
     help: {
@@ -663,7 +662,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-dictation-cancel",
     action: "message-input.action",
-    combo: { code: "Escape" },
+    combo: "Escape",
     when: { commandCenter: false, terminal: false },
     payload: { type: "message-input", kind: "dictation-cancel" },
     preventDefault: false,
@@ -678,7 +677,8 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   {
     id: "message-input-voice-mute-toggle",
     action: "message-input.action",
-    combo: { code: "Space", key: " ", repeat: false },
+    combo: "Space",
+    repeat: false,
     when: { commandCenter: false, focusScope: "other" },
     payload: { type: "message-input", kind: "voice-mute-toggle" },
     help: {
@@ -690,6 +690,40 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
   },
 ];
 
+// --- Parse bindings at module load ---
+
+function parseBinding(binding: ShortcutBinding): ParsedShortcutBinding {
+  const parsedCombo = parseShortcutString(binding.combo);
+  if (binding.repeat === false) {
+    parsedCombo.repeat = false;
+  }
+  return { ...binding, parsedCombo };
+}
+
+export const DEFAULT_BINDINGS: readonly ParsedShortcutBinding[] =
+  SHORTCUT_BINDINGS.map(parseBinding);
+
+export function buildEffectiveBindings(
+  overrides: Record<string, string>,
+): ParsedShortcutBinding[] {
+  return DEFAULT_BINDINGS.map(function (binding) {
+    const override = overrides[binding.id];
+    if (override === undefined) {
+      return binding;
+    }
+    let parsedCombo: KeyCombo;
+    try {
+      parsedCombo = parseShortcutString(override);
+    } catch {
+      return binding;
+    }
+    if (binding.repeat === false) {
+      parsedCombo.repeat = false;
+    }
+    return { ...binding, combo: override, parsedCombo };
+  });
+}
+
 // --- Matching engine ---
 
 function parseDigit(event: KeyboardEvent): number | null {
@@ -709,9 +743,19 @@ function parseDigit(event: KeyboardEvent): number | null {
   return null;
 }
 
-function matchesCombo(combo: KeyCombo, event: KeyboardEvent): boolean {
+function matchesCombo(combo: KeyCombo, event: KeyboardEvent, isMac: boolean): boolean {
-  if (!!combo.meta !== event.metaKey) return false;
+  if (combo.mod) {
-  if (!!combo.ctrl !== event.ctrlKey) return false;
+    if (isMac) {
+      if (!event.metaKey) return false;
+      if (!!combo.ctrl !== event.ctrlKey) return false;
+    } else {
+      if (!event.ctrlKey) return false;
+      if (!!combo.meta !== event.metaKey) return false;
+    }
+  } else {
+    if (!!combo.meta !== event.metaKey) return false;
+    if (!!combo.ctrl !== event.ctrlKey) return false;
+  }
   if (!!combo.alt !== event.altKey) return false;
   if (!!combo.shift !== event.shiftKey) return false;
   if (combo.repeat === false && event.repeat) return false;
@@ -767,10 +811,11 @@ function helpMatchesPlatform(
 export function resolveKeyboardShortcut(input: {
   event: KeyboardEvent;
   context: KeyboardShortcutContext;
+  bindings?: readonly ParsedShortcutBinding[];
 }): KeyboardShortcutMatch | null {
-  const { event, context } = input;
+  const { event, context, bindings = DEFAULT_BINDINGS } = input;
-  for (const binding of SHORTCUT_BINDINGS) {
+  for (const binding of bindings) {
-    if (!matchesCombo(binding.combo, event)) {
+    if (!matchesCombo(binding.parsedCombo, event, context.isMac)) {
       continue;
     }
     if (!matchesWhen(binding.when, context)) {
@@ -786,8 +831,41 @@ export function resolveKeyboardShortcut(input: {
   return null;
 }
 
+export function getBindingIdForAction(
+  actionId: string,
+  platform: { isMac: boolean; isDesktop: boolean },
+): string | null {
+  for (const binding of DEFAULT_BINDINGS) {
+    if (binding.help?.id !== actionId) {
+      continue;
+    }
+    if (!helpMatchesPlatform(binding.when, platform)) {
+      continue;
+    }
+    return binding.id;
+  }
+  return null;
+}
+
+export function getDefaultKeysForAction(
+  actionId: string,
+  platform: { isMac: boolean; isDesktop: boolean },
+): ShortcutKey[] | null {
+  for (const binding of DEFAULT_BINDINGS) {
+    if (binding.help?.id !== actionId) {
+      continue;
+    }
+    if (!helpMatchesPlatform(binding.when, platform)) {
+      continue;
+    }
+    return binding.help.keys;
+  }
+  return null;
+}
+
 export function buildKeyboardShortcutHelpSections(
   input: KeyboardShortcutPlatformContext,
+  bindings: readonly ParsedShortcutBinding[] = DEFAULT_BINDINGS,
 ): KeyboardShortcutHelpSection[] {
   const seenRows = new Set<string>();
   const rowsBySection = new Map<KeyboardShortcutHelpSection["id"], KeyboardShortcutHelpRow[]>([
@@ -795,7 +873,7 @@ export function buildKeyboardShortcutHelpSections(
     ["agent-input", []],
   ]);
 
-  for (const binding of SHORTCUT_BINDINGS) {
+  for (const binding of bindings) {
     const help = binding.help;
     if (!help) {
       continue;

packages/app/src/keyboard/shortcut-string.ts

@@ -0,0 +1,179 @@
+import type { ShortcutKey } from "@/utils/format-shortcut";
+
+export interface KeyCombo {
+  code: string;
+  key?: string;
+  meta?: true;
+  ctrl?: true;
+  alt?: true;
+  shift?: true;
+  mod?: true;
+  repeat?: false;
+}
+
+interface KeyMapping {
+  code: string;
+  key?: string;
+}
+
+const KEY_MAP: Record<string, KeyMapping> = {};
+
+for (let i = 0; i < 26; i++) {
+  const letter = String.fromCharCode(65 + i);
+  KEY_MAP[letter] = { code: `Key${letter}`, key: letter.toLowerCase() };
+}
+
+for (let i = 0; i <= 9; i++) {
+  KEY_MAP[String(i)] = { code: `Digit${i}`, key: String(i) };
+}
+
+KEY_MAP["Digit"] = { code: "Digit" };
+KEY_MAP["\\"] = { code: "Backslash" };
+KEY_MAP["["] = { code: "BracketLeft", key: "[" };
+KEY_MAP["]"] = { code: "BracketRight", key: "]" };
+KEY_MAP["."] = { code: "Period", key: "." };
+KEY_MAP["`"] = { code: "Backquote", key: "`" };
+KEY_MAP["/"] = { code: "Slash" };
+KEY_MAP["?"] = { code: "Slash", key: "?" };
+KEY_MAP["Space"] = { code: "Space", key: " " };
+KEY_MAP["Escape"] = { code: "Escape" };
+KEY_MAP["ArrowLeft"] = { code: "ArrowLeft" };
+KEY_MAP["ArrowRight"] = { code: "ArrowRight" };
+KEY_MAP["ArrowUp"] = { code: "ArrowUp" };
+KEY_MAP["ArrowDown"] = { code: "ArrowDown" };
+
+const CODE_TO_KEY: Record<string, string> = {};
+for (const [humanKey, mapping] of Object.entries(KEY_MAP)) {
+  if (!CODE_TO_KEY[mapping.code]) {
+    CODE_TO_KEY[mapping.code] = humanKey;
+  }
+}
+
+export function parseShortcutString(s: string): KeyCombo {
+  const parts = s.split("+");
+  if (parts.length === 0 || parts.some((p) => p === "")) {
+    throw new Error(`Invalid shortcut string: "${s}"`);
+  }
+
+  const combo: KeyCombo = { code: "" };
+  let keyPart: string | null = null;
+
+  for (const part of parts) {
+    switch (part) {
+      case "Cmd":
+        combo.meta = true;
+        break;
+      case "Ctrl":
+        combo.ctrl = true;
+        break;
+      case "Alt":
+        combo.alt = true;
+        break;
+      case "Shift":
+        combo.shift = true;
+        break;
+      case "Mod":
+        combo.mod = true;
+        break;
+      default:
+        if (keyPart !== null) {
+          throw new Error(`Invalid shortcut string: "${s}" - multiple key parts`);
+        }
+        keyPart = part;
+        break;
+    }
+  }
+
+  if (keyPart === null) {
+    throw new Error(`Invalid shortcut string: "${s}" - no key part`);
+  }
+
+  const mapping = KEY_MAP[keyPart];
+  if (!mapping) {
+    throw new Error(`Unknown key: "${keyPart}"`);
+  }
+
+  combo.code = mapping.code;
+  if (mapping.key !== undefined) {
+    combo.key = mapping.key;
+  }
+
+  return combo;
+}
+
+export function keyComboToString(combo: KeyCombo): string {
+  const parts: string[] = [];
+
+  if (combo.mod) {
+    parts.push("Mod");
+  }
+  if (combo.ctrl) parts.push("Ctrl");
+  if (combo.alt) parts.push("Alt");
+  if (combo.shift) parts.push("Shift");
+  if (combo.meta) parts.push("Cmd");
+
+  const humanKey = CODE_TO_KEY[combo.code];
+  if (humanKey) {
+    parts.push(humanKey);
+  }
+
+  return parts.join("+");
+}
+
+const MODIFIER_CODES = new Set([
+  "MetaLeft",
+  "MetaRight",
+  "ControlLeft",
+  "ControlRight",
+  "AltLeft",
+  "AltRight",
+  "ShiftLeft",
+  "ShiftRight",
+]);
+
+export function comboStringToShortcutKeys(comboString: string): ShortcutKey[] {
+  const parts = comboString.split("+");
+  const keys: ShortcutKey[] = [];
+  for (const part of parts) {
+    switch (part) {
+      case "Cmd":
+        keys.push("mod");
+        break;
+      case "Ctrl":
+        keys.push("ctrl");
+        break;
+      case "Alt":
+        keys.push("alt");
+        break;
+      case "Shift":
+        keys.push("shift");
+        break;
+      default:
+        keys.push(part.toUpperCase());
+        break;
+    }
+  }
+  return keys;
+}
+
+export function keyboardEventToComboString(event: KeyboardEvent): string | null {
+  if (MODIFIER_CODES.has(event.code)) {
+    return null;
+  }
+
+  const parts: string[] = [];
+
+  if (event.ctrlKey) parts.push("Ctrl");
+  if (event.altKey) parts.push("Alt");
+  if (event.shiftKey) parts.push("Shift");
+  if (event.metaKey) parts.push("Cmd");
+
+  const humanKey = CODE_TO_KEY[event.code];
+  if (humanKey) {
+    parts.push(humanKey);
+  } else {
+    return null;
+  }
+
+  return parts.join("+");
+}

packages/app/src/screens/settings/keyboard-shortcuts-section.tsx

@@ -0,0 +1,217 @@
+import { useState, useEffect } from "react";
+import { View, Text, Platform } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { settingsStyles } from "@/styles/settings";
+import { Button } from "@/components/ui/button";
+import { Shortcut } from "@/components/ui/shortcut";
+import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
+import {
+  buildKeyboardShortcutHelpSections,
+  getBindingIdForAction,
+  type KeyboardShortcutHelpRow,
+} from "@/keyboard/keyboard-shortcuts";
+import { comboStringToShortcutKeys, keyboardEventToComboString } from "@/keyboard/shortcut-string";
+import { getShortcutOs } from "@/utils/shortcut-platform";
+import { getIsDesktop } from "@/constants/layout";
+
+function ShortcutRow({
+  row,
+  bindingId,
+  overrideCombo,
+  isCapturing,
+  onRebind,
+  onCancel,
+  onReset,
+}: {
+  row: KeyboardShortcutHelpRow;
+  bindingId: string | null;
+  overrideCombo: string | undefined;
+  isCapturing: boolean;
+  onRebind: () => void;
+  onCancel: () => void;
+  onReset: () => void;
+}) {
+  const displayKeys = overrideCombo ? comboStringToShortcutKeys(overrideCombo) : row.keys;
+
+  return (
+    <View style={[styles.row, isCapturing && styles.rowCapturing]}>
+      <Text style={styles.rowLabel}>{row.label}</Text>
+      <View style={styles.rowActions}>
+        {isCapturing ? (
+          <Text style={styles.capturingText}>Press shortcut...</Text>
+        ) : (
+          <Shortcut keys={displayKeys} />
+        )}
+        {bindingId !== null && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onPress={isCapturing ? onCancel : onRebind}
+          >
+            {isCapturing ? "Cancel" : "Rebind"}
+          </Button>
+        )}
+        {overrideCombo !== undefined && !isCapturing && (
+          <Button variant="ghost" size="sm" onPress={onReset}>
+            <Text style={styles.resetText}>Reset</Text>
+          </Button>
+        )}
+      </View>
+    </View>
+  );
+}
+
+export function KeyboardShortcutsSection() {
+  const [capturingBindingId, setCapturingBindingId] = useState<string | null>(null);
+  const { overrides, hasOverrides, setOverride, removeOverride, resetAll } =
+    useKeyboardShortcutOverrides();
+
+  const isMac = getShortcutOs() === "mac";
+  const isDesktop = getIsDesktop();
+  const sections = buildKeyboardShortcutHelpSections({ isMac, isDesktop });
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    if (capturingBindingId === null) return;
+
+    const activeBindingId = capturingBindingId;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      const key = event.key ?? "";
+      if (key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setCapturingBindingId(null);
+        return;
+      }
+
+      if (key === "Alt" || key === "Control" || key === "Meta" || key === "Shift") {
+        return;
+      }
+
+      const comboString = keyboardEventToComboString(event);
+      if (comboString === null) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      void setOverride(activeBindingId, comboString);
+      setCapturingBindingId(null);
+    }
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [capturingBindingId, setOverride]);
+
+  if (Platform.OS !== "web") {
+    return (
+      <View style={settingsStyles.section}>
+        <Text style={settingsStyles.sectionTitle}>Keyboard Shortcuts</Text>
+        <View style={[settingsStyles.card, styles.mobileCard]}>
+          <Text style={styles.mobileText}>
+            Keyboard shortcuts are only available on desktop.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={settingsStyles.section}>
+      <View style={styles.sectionHeader}>
+        <Text style={settingsStyles.sectionTitle}>Keyboard Shortcuts</Text>
+        {hasOverrides && (
+          <Button variant="ghost" size="sm" onPress={() => void resetAll()}>
+            Reset all
+          </Button>
+        )}
+      </View>
+
+      {sections.map(function (section) {
+        return (
+          <View key={section.id}>
+            <Text style={styles.subsectionTitle}>{section.title}</Text>
+            <View style={settingsStyles.card}>
+              {section.rows.map(function (row, index) {
+                const bindingId = getBindingIdForAction(row.id, { isMac, isDesktop });
+                const overrideCombo = bindingId ? overrides[bindingId] : undefined;
+
+                return (
+                  <View key={row.id}>
+                    <ShortcutRow
+                      row={row}
+                      bindingId={bindingId}
+                      overrideCombo={overrideCombo}
+                      isCapturing={capturingBindingId === bindingId}
+                      onRebind={() => setCapturingBindingId(bindingId)}
+                      onCancel={() => setCapturingBindingId(null)}
+                      onReset={() => {
+                        if (bindingId) void removeOverride(bindingId);
+                      }}
+                    />
+                    {index < section.rows.length - 1 && <View style={styles.separator} />}
+                  </View>
+                );
+              })}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  subsectionTitle: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    marginBottom: theme.spacing[2],
+    marginTop: theme.spacing[4],
+    marginLeft: theme.spacing[1],
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[3],
+  },
+  rowCapturing: {
+    backgroundColor: theme.colors.surface2,
+  },
+  rowLabel: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+    flexShrink: 1,
+  },
+  rowActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  capturingText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+  resetText: {
+    color: theme.colors.foregroundMuted,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: theme.colors.border,
+  },
+  mobileCard: {
+    padding: theme.spacing[4],
+  },
+  mobileText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+}));