feat: customizable keyboard shortcuts with Gmail and Superhuman presets

Shortcuts were hardcoded in three separate keydown listeners, and the `?`
cheat sheet was a hand-maintained array that had already drifted — it listed
`c` for compose while the handler that owned that key lived in a different
component.

One registry now owns every global binding. The handlers, the cheat sheet and
the new settings editor all read from it, so they cannot disagree.

PRESETS. Three, all fully editable: Comms (single keys, nothing to learn),
Gmail-style (e archives, b snoozes, l labels, / searches) and
Superhuman-style (e done, h snooze, ⌘K for everything). They are modelled on
those apps rather than copied — the bindings people actually have in muscle
memory, with anything Comms-specific keeping its own key.

SEQUENCES. Bindings can be multi-chord, so `g i`, `g m`, `g u` and `g c` jump
between views the way both apps do. A half-typed sequence is swallowed rather
than passed through, and a sequence that goes nowhere retries its last key on
its own — press `g` then `j` and you still move down the list.

CUSTOMIZATION. Settings → Shortcuts records the keys you press instead of
asking you to type a binding string, which is the only way to guarantee the
stored chord is the one the matcher will later see. Conflicts are detected and
explained, including prefix collisions: binding `g` outright means `g i` can
never complete, which is invisible until you wonder why a key stopped working.

Preferences store a preset plus a diff, not a full map, so an action added in
a later version picks up its default rather than silently having no key.

Also: Enter-sends is now a setting rather than an assumption, and the hint
under the composer follows it instead of always claiming Enter sends. ⌘↵ sends
either way.

Two of the three old listeners are gone — the palette and compose dialog now
open by event. A second global keydown listener would double-fire actions and
race the sequence buffer.

38 tests covering chord normalization (shift is recorded for named keys but
not for printable ones, or `?` would have two spellings and never match),
sequence matching, conflict and prefix detection, and the override round-trip.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RuKkB7AfSNCcwvubV99pDU

Author: claude

apps/web/src/app/(app)/inbox/layout.tsx

@@ -1,7 +1,6 @@
 import { requireUser } from '@/lib/session';
 import { listConversations, listInboxes, listTags, listAgents } from '@/server/queries';
 import { ConversationListPane } from '@/components/inbox/conversation-list';
-import { KeyboardShortcuts } from '@/components/app/keyboard-shortcuts';
 import { TagQuickPicker } from '@/components/inbox/tag-quick-picker';
 
 export const dynamic = 'force-dynamic';
@@ -29,7 +28,6 @@ export default async function InboxLayout({ children }: { children: React.ReactN
         inboxes={inboxRows.map((i) => ({ id: i.id, name: i.name }))}
       />
       <div className="flex min-w-0 flex-1 flex-col">{children}</div>
-      <KeyboardShortcuts />
       <TagQuickPicker
         allTags={tagRows.map((t) => ({ id: t.id, name: t.name, color: t.color }))}
       />

apps/web/src/app/(app)/layout.tsx

@@ -10,8 +10,11 @@ import { Sidebar } from '@/components/app/sidebar';
 import { RealtimeProvider } from '@/components/app/realtime-provider';
 import { ChannelHealthBanner } from '@/components/app/channel-health-banner';
 import { CommandPalette } from '@/components/app/command-palette';
+import { KeymapProvider } from '@/components/app/keymap-provider';
+import { KeyboardShortcuts } from '@/components/app/keyboard-shortcuts';
 import { NewConversation } from '@/components/inbox/new-conversation';
 import { MobileTopBar, SidebarShell } from '@/components/app/mobile-shell';
+import type { KeymapPreference } from '@/lib/keymap';
 
 export const dynamic = 'force-dynamic';
 
@@ -54,6 +57,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     <RealtimeProvider
       currentUser={{ id: user.id, name: user.name ?? null, image: user.image ?? null }}
     >
+      <KeymapProvider preference={user.preferences?.keymap as KeymapPreference | undefined}>
       <div className="flex h-dvh flex-col overflow-hidden">
         <ChannelHealthBanner initial={unhealthy} />
         <MobileTopBar />
@@ -79,6 +83,10 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         isAdmin={isAdminRole(user.role)}
       />
       <NewConversation />
+      {/* One listener for the whole app: `c`, ⌘K and the jump keys should work
+          from settings too, not only inside the inbox. */}
+      <KeyboardShortcuts />
+      </KeymapProvider>
     </RealtimeProvider>
   );
 }

apps/web/src/app/(app)/settings/keyboard/page.tsx

@@ -0,0 +1,26 @@
+import { requireDbUser } from '@/lib/session';
+import { KeyboardForm } from '@/components/settings/keyboard-form';
+import type { KeymapPreference } from '@/lib/keymap';
+
+export const dynamic = 'force-dynamic';
+
+export default async function KeyboardSettingsPage() {
+  const me = await requireDbUser();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Keyboard shortcuts</h2>
+        <p className="text-sm text-muted-foreground">
+          Start from a preset, then rebind anything. Press{' '}
+          <kbd className="rounded border bg-secondary px-1 py-px font-sans text-[11px]">?</kbd>{' '}
+          anywhere in the app to see your current keys.
+        </p>
+      </div>
+
+      <KeyboardForm
+        preference={(me.preferences?.keymap as KeymapPreference | undefined) ?? null}
+      />
+    </div>
+  );
+}

apps/web/src/components/app/command-palette.tsx

@@ -36,20 +36,18 @@ export function CommandPalette({
   const [active, setActive] = useState(0);
   const [, startSearch] = useTransition();
 
-  // Global ⌘K / Ctrl+K, and an in-app open event (from the sidebar button).
+  // The keyboard binding lives in the user's keymap, not here — a second
+  // keydown listener would double-fire and break sequence shortcuts. This
+  // component just responds to being asked to open (by key, or by the sidebar
+  // button).
   useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-        e.preventDefault();
-        setOpen((o) => !o);
-      }
-    };
     const onOpen = () => setOpen(true);
-    window.addEventListener('keydown', onKey);
+    const onToggle = () => setOpen((o) => !o);
     window.addEventListener('comms:open-command', onOpen);
+    window.addEventListener('comms:open-palette', onToggle);
     return () => {
-      window.removeEventListener('keydown', onKey);
       window.removeEventListener('comms:open-command', onOpen);
+      window.removeEventListener('comms:open-palette', onToggle);
     };
   }, []);