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(