Support custom key combinations in mobile terminal shortcuts

FEATURES.md

@@ -280,6 +280,17 @@ separate for desktop/mobile. Jump from a diff to its file preview.
 - Customize the floating `2×8` grid and up to four side buttons under
   **Configuration > Behavior > Mobile terminal shortcuts**. The Tabs sheet and
   pane controls work when the tab strip is hidden.
+  Choose **Preset** or **Custom keyboard**. The US keyboard lets you toggle Ctrl,
+  Alt, and Shift and pick one letter, number, symbol, or basic key; expand **More keys**
+  for navigation keys and F1-F12 in separate groups. Set a label and edit or clear individual slots;
+  defaults stay available. Buttons send only that combination, with no extra
+  Enter. Shift uses US symbols; Ctrl letters ignore case and can share bytes with
+  other keys, while Alt sends an Escape prefix. Modified Enter requires application
+  support. Custom PageUp/PageDown sends application input; the presets scroll
+  history. Unsupported combinations, such as Ctrl+1, identify the affected slot
+  and block saving. Buttons bypass browser keyboard
+  shortcuts, but application keybindings still apply. Cmd/Meta, text macros,
+  commands, and multi-step sequences are not supported.
 - Drag the `⋯` controls button to move the floating controls; release snaps
   them to the nearer side edge at that height, mirrored on the left. The
   position is kept per browser and stays clear of the header and tab strip.

web/src/components/ConfigurationDialog.css

@@ -122,6 +122,7 @@
   display: block;
 }
 
+.configuration-modal .config-menu-item .config-item-copy,
 .configuration-modal .config-item-copy {
   text-align: left;
   gap: 3px;
@@ -164,6 +165,10 @@
 }
 
 :where(html[data-layout="mobile"]) {
+  .configuration-modal .modal-actions {
+    display: none;
+  }
+
   .configuration-backdrop {
     padding: calc(12px + env(safe-area-inset-top, 0px)) 0 0;
   }

web/src/components/ConfigurationDialog.tsx

@@ -43,7 +43,6 @@ import {
 import { AgentIntegrationsSettings } from "./AgentIntegrationsSettings";
 import { AutoSyncRepositoriesDialog } from "./AutoSyncRepositoriesDialog";
 import { CloseButton } from "./CloseButton";
-import { MobileTerminalShortcutsDialog } from "./MobileTerminalShortcutsDialog";
 import { TerminalTransportSettings } from "./TerminalTransportSettings";
 import { ConfigurationLoadingDialog } from "./ConfigurationLoadingDialog";
 import { MobileSheetHandle } from "./MobileSheetHandle";
@@ -65,6 +64,11 @@ const MobileLayoutDialog = lazyWithReload("mobile-layout", () =>
     default: module.MobileLayoutDialog,
   })),
 );
+const MobileTerminalShortcutsDialog = lazyWithReload("mobile-shortcuts", () =>
+  import("./MobileTerminalShortcutsDialog").then((module) => ({
+    default: module.MobileTerminalShortcutsDialog,
+  })),
+);
 
 export type ConfigurationProps = {
   theme: Theme;
@@ -645,15 +649,17 @@ export function ConfigurationDialog({
         {detail === "layout" ? (
           <MobileLayoutDialog open onClose={() => setDetail(null)} />
         ) : null}
+        {detail === "mobile" ? (
+          <MobileTerminalShortcutsDialog
+            open
+            rows={props.mobileTerminalShortcuts}
+            sideShortcuts={props.mobileTerminalSideShortcuts}
+            onChange={props.onMobileTerminalShortcutsChange}
+            onSideChange={props.onMobileTerminalSideShortcutsChange}
+            onClose={() => setDetail(null)}
+          />
+        ) : null}
       </Suspense>
-      <MobileTerminalShortcutsDialog
-        open={detail === "mobile"}
-        rows={props.mobileTerminalShortcuts}
-        sideShortcuts={props.mobileTerminalSideShortcuts}
-        onChange={props.onMobileTerminalShortcutsChange}
-        onSideChange={props.onMobileTerminalSideShortcutsChange}
-        onClose={() => setDetail(null)}
-      />
       <AutoSyncRepositoriesDialog
         open={detail === "sync"}
         onClose={() => setDetail(null)}

web/src/components/MobileTerminalShortcutsDialog.css

@@ -1,11 +1,21 @@
+/* Keep focus scrolling inside the dialog when the page uses CSS zoom. */
+html:has(.mobile-shortcuts-modal) {
+  overflow: clip;
+}
+
 .mobile-shortcuts-modal {
   width: min(760px, 100%);
-  max-height: min(760px, calc(100dvh - 36px));
+  max-height: min(760px, calc(100dvh / var(--ui-scale, 1) - 36px));
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
   overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.mobile-shortcuts-modal > * {
+  flex-shrink: 0;
 }
 
 .mobile-shortcuts-modal .modal-head {
@@ -236,6 +246,125 @@
   padding: 0 8px;
 }
 
+.mobile-shortcut-custom-fields {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 8px;
+}
+
+.mobile-shortcut-mode {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+
+.mobile-shortcut-mode button {
+  flex: 1;
+  min-height: 36px;
+  background: var(--input-bg);
+  color: var(--muted);
+}
+
+.mobile-shortcut-keyboard-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.mobile-shortcut-keyboard-head output {
+  color: var(--text-strong);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.mobile-shortcut-modifiers {
+  display: flex;
+  gap: 4px;
+}
+
+.mobile-shortcut-keyboard {
+  display: grid;
+  gap: 4px;
+}
+
+.mobile-shortcut-keyboard-row {
+  display: flex;
+  justify-content: center;
+  gap: 3px;
+}
+
+.mobile-shortcut-keycap {
+  flex: 1;
+  min-width: 0;
+  min-height: 36px;
+  max-width: calc((100% - 27px) / 10);
+  padding: 4px 0;
+  border-radius: 5px;
+  background: var(--input-bg);
+  color: var(--text-strong);
+  font:
+    11px / 1.2 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace;
+  touch-action: manipulation;
+}
+
+.mobile-shortcut-basic-keys .mobile-shortcut-keycap,
+.mobile-shortcut-modifiers .mobile-shortcut-keycap,
+.mobile-shortcut-extra-keys .mobile-shortcut-keycap {
+  max-width: none;
+}
+
+.mobile-shortcut-keycap[aria-pressed="true"],
+.mobile-shortcut-mode button[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--text-strong);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.mobile-shortcut-extra-keys {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.mobile-shortcut-key-group {
+  margin-top: 8px;
+}
+
+.mobile-shortcut-more-keys summary,
+.mobile-shortcut-help summary {
+  padding: 8px 0;
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.mobile-shortcut-help p,
+.mobile-shortcut-error p {
+  margin: 0 0 4px;
+}
+
+.mobile-shortcut-help,
+.mobile-shortcut-error {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.mobile-shortcut-error {
+  color: var(--danger-text);
+}
+
 .mobile-shortcut-slot-editor-empty {
   min-height: 74px;
   display: flex;
@@ -358,7 +487,8 @@
 :where(html[data-layout="mobile"]) {
   .mobile-shortcuts-modal {
     max-height: calc(
-      100dvh -
+      100dvh /
+      var(--ui-scale, 1) -
       24px -
       env(safe-area-inset-top, 0px) -
       env(safe-area-inset-bottom, 0px)