Implement key repeat for virtual keyboard

app/components/ui/Accordion.tsx

@@ -15,21 +15,23 @@ export function AccordionSection({
   open: controlledOpen,
   onToggle,
   children,
+  containerClassName,
 }: {
   label: string;
   icon?: React.ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
   onToggle?: () => void;
   children: React.ReactNode;
+  containerClassName?: string;
 }) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = controlledOpen !== undefined;
   const open = isControlled ? controlledOpen : internalOpen;
   const muted = useThemeColor()("muted-foreground");
 
   return (
-    <View className="overflow-hidden border border-border bg-card">
+    <View className={`overflow-hidden border border-border bg-card ${containerClassName}`}>
       <Pressable
         onPress={() => {
           if (isControlled) onToggle?.();

app/components/ui/Input.tsx

@@ -30,10 +30,13 @@ export const Input = forwardRef<TextInput, InputProps>(function Input(
   // centered row — it must allow height and top-align its children. Single-line
   // keeps the original fixed 40px row.
   const layout = multiline
-    ? "flex-row items-start gap-2 min-h-10 py-2 px-2.5"
-    : "flex-row items-center gap-2 h-10 px-2.5";
+    ? "flex-row items-start gap-2 py-2"
+    : "flex-row items-center gap-2";
+  const inputLayout = multiline
+    ? "min-h-10 px-2.5"
+    : "h-10 px-2.5";
 
-  return (
+    return (
     <View
       className={`${layout} border border-input bg-card ${containerClassName ?? ""}`}
     >
@@ -42,7 +45,7 @@ export const Input = forwardRef<TextInput, InputProps>(function Input(
         ref={ref}
         multiline={multiline}
         placeholderTextColor={placeholderColor}
-        className={`flex-1 text-sm text-foreground ${className ?? ""}`}
+        className={`${inputLayout} flex-1 text-sm text-foreground ${className ?? ""}`}
         style={[
           { fontFamily: MONO_FONT, paddingVertical: 0 },
           multiline ? { textAlignVertical: "top" } : null,

app/contexts/KeyboardCustomizationContext.tsx

@@ -14,6 +14,10 @@ import {
   KeyboardSettings,
 } from "@/types/keyboard";
 import { getPresetById } from "@/app/tabs/sessions/terminal/keyboard/KeyDefinitions";
+import {
+  DEFAULT_KEY_REPEAT_INTERVAL,
+  DEFAULT_KEY_REPEAT_INITIAL_DELAY,
+} from "@/constants/keyboard-repeat-config";
 
 const STORAGE_KEY = "keyboardCustomization";
 const DEFAULT_PRESET_ID: PresetType = "default";
@@ -42,6 +46,8 @@ const getDefaultConfig = (): KeyboardCustomization => {
       compactMode: false,
       hapticFeedback: false,
       showHints: true,
+      keyRepeatInterval: DEFAULT_KEY_REPEAT_INTERVAL,
+      keyRepeatInitialDelay: DEFAULT_KEY_REPEAT_INITIAL_DELAY,
     },
   };
 };

app/tabs/sessions/terminal/keyboard/CustomKeyboard.tsx

@@ -6,6 +6,7 @@ import KeyboardKey from "./KeyboardKey";
 import { useKeyboardCustomization } from "@/app/contexts/KeyboardCustomizationContext";
 import { KeyConfig } from "@/types/keyboard";
 import { BACKGROUNDS, BORDER_COLORS, TEXT_COLORS } from "@/app/constants/designTokens";
+import { isRepeatingKey } from "@/constants/keyboard-repeat-config";
 
 interface CustomKeyboardProps {
   terminalRef: React.RefObject<TerminalHandle | null>;
@@ -181,6 +182,9 @@ export default function CustomKeyboard({
                   isActive={key.id === "shift" && shiftPressed}
                   keySize={config.settings.keySize}
                   hapticFeedback={config.settings.hapticFeedback}
+                  keyRepeatEnabled={isRepeatingKey(key.id)}
+                  keyRepeatInterval={config.settings.keyRepeatInterval}
+                  keyRepeatInitialDelay={config.settings.keyRepeatInitialDelay}
                 />
               ))}
             </View>

app/tabs/sessions/terminal/keyboard/KeyboardBar.tsx

@@ -7,6 +7,7 @@ import { useKeyboardCustomization } from "@/app/contexts/KeyboardCustomizationCo
 import { KeyConfig } from "@/types/keyboard";
 import { useOrientation } from "@/app/utils/orientation";
 import { BACKGROUNDS, BORDER_COLORS, ACCENT } from "@/app/constants/designTokens";
+import { isRepeatingKey } from "@/constants/keyboard-repeat-config";
 
 interface KeyboardBarProps {
   terminalRef: React.RefObject<TerminalHandle | null>;
@@ -146,6 +147,9 @@ export default function KeyboardBar({
         }
         keySize={config.settings.keySize}
         hapticFeedback={config.settings.hapticFeedback}
+        keyRepeatEnabled={isRepeatingKey(keyConfig.id)}
+        keyRepeatInterval={config.settings.keyRepeatInterval}
+        keyRepeatInitialDelay={config.settings.keyRepeatInitialDelay}
       />
     );
   };

app/tabs/sessions/terminal/keyboard/KeyboardKey.tsx

@@ -1,8 +1,13 @@
-import React from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import { TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
 import { KeySize } from "@/types/keyboard";
 import { BACKGROUNDS, BORDER_COLORS, ACCENT } from "@/app/constants/designTokens";
+import {
+  DEFAULT_KEY_REPEAT_INTERVAL,
+  DEFAULT_KEY_REPEAT_INITIAL_DELAY,
+  useKeyRepeat,
+} from "@/constants/keyboard-repeat-config";
 
 interface KeyboardKeyProps {
   label: string;
@@ -14,6 +19,9 @@ interface KeyboardKeyProps {
   keySize?: KeySize;
   hapticFeedback?: boolean;
   onLongPress?: () => void;
+  keyRepeatEnabled?: boolean;
+  keyRepeatInterval?: number;
+  keyRepeatInitialDelay?: number;
 }
 
 export default function KeyboardKey({
@@ -26,16 +34,43 @@ export default function KeyboardKey({
   keySize = "medium",
   hapticFeedback = false,
   onLongPress,
+  keyRepeatEnabled = false,
+  keyRepeatInterval = DEFAULT_KEY_REPEAT_INTERVAL,
+  keyRepeatInitialDelay = DEFAULT_KEY_REPEAT_INITIAL_DELAY,
 }: KeyboardKeyProps) {
-  const handlePress = () => {
-    if (hapticFeedback) {
+  const [isPressed, setIsPressed] = useState(false);
+  const onPressRef = useRef(onPress);
+  const hapticFeedbackRef = useRef(hapticFeedback);
+
+  useEffect(() => {
+    onPressRef.current = onPress;
+  }, [onPress]);
+
+  useEffect(() => {
+    hapticFeedbackRef.current = hapticFeedback;
+  }, [hapticFeedback]);
+
+  const handlePressIn = useCallback(() => {
+    setIsPressed(true);
+  }, []);
+
+  const handlePress = useCallback(() => {
+    if (hapticFeedbackRef.current) {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     }
-    onPress();
-  };
+    onPressRef.current();
+  }, []);
+
+  useKeyRepeat(
+    isPressed, keyRepeatEnabled, handlePress, keyRepeatInterval, keyRepeatInitialDelay,
+  );
+
+  const handlePressOut = useCallback(() => {
+    setIsPressed(false);
+  }, []);
 
   const handleLongPress = () => {
-    if (hapticFeedback) {
+    if (hapticFeedbackRef.current) {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     }
     if (onLongPress) {
@@ -84,6 +119,8 @@ export default function KeyboardKey({
         borderColor,
         borderRadius: 0,
       }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
       onPress={handlePress}
       onLongPress={onLongPress ? handleLongPress : undefined}
       activeOpacity={0.7}

app/tabs/settings/KeyboardCustomization.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { View, ScrollView, Pressable } from "react-native";
 import { useRouter } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -10,11 +10,17 @@ import {
   SlidersHorizontal,
 } from "lucide-react-native";
 import { useKeyboardCustomization } from "@/app/contexts/KeyboardCustomizationContext";
-import { PRESET_DEFINITIONS } from "@/app/tabs/sessions/terminal/keyboard/KeyDefinitions";
+import { ALL_KEYS, PRESET_DEFINITIONS } from "@/app/tabs/sessions/terminal/keyboard/KeyDefinitions";
 import { PresetType, KeyConfig } from "@/types/keyboard";
 import { toast } from "@/app/utils/toast";
-import { Text, Button, Label, FakeSwitch, Dialog } from "@/app/components/ui";
+import { Text, Button, Label, FakeSwitch, Dialog, Input, SettingRow } from "@/app/components/ui";
+import { AccordionSection } from "@/app/components/ui/Accordion";
 import { useThemeColor } from "@/app/contexts/ThemeContext";
+import {
+  DEFAULT_KEY_REPEAT_INTERVAL,
+  DEFAULT_KEY_REPEAT_INITIAL_DELAY,
+  REPEATING_KEY_IDS,
+} from "@/constants/keyboard-repeat-config";
 import KeySelector from "./components/KeySelector";
 import UnifiedDraggableList, {
   UnifiedListItem,
@@ -78,6 +84,15 @@ export default function KeyboardCustomization() {
 
   const [activeTab, setActiveTab] = useState<TabType>("presets");
   const [showResetConfirm, setShowResetConfirm] = useState(false);
+
+  const [repeatIntervalText, setRepeatIntervalText] = useState(config.settings.keyRepeatInterval?.toString() || "");
+  const [initialDelayText, setInitialDelayText] = useState(config.settings.keyRepeatInitialDelay?.toString() || "");
+
+  useEffect(() => {
+    setRepeatIntervalText(config.settings.keyRepeatInterval?.toString() || "");
+    setInitialDelayText(config.settings.keyRepeatInitialDelay?.toString() || "");
+  }, [config.settings.keyRepeatInterval, config.settings.keyRepeatInitialDelay]);
+
   const [resetType, setResetType] = useState<"all" | "topbar" | "fullkeyboard">(
     "all",
   );
@@ -565,7 +580,70 @@ export default function KeyboardCustomization() {
               onChange={(v) => updateSettings({ showHints: v })}
             />
           </View>
+
+        </View>
+      </View>
+
+      {/* Key Repeat */}
+      <View className="border border-border bg-card">
+        <View className="border-b border-border px-3 py-3">
+          <Label>Key Repeat</Label>
         </View>
+        <View className="px-3 mb-2">
+          <SettingRow label="Initial Delay" description="Milliseconds before repeat starts">
+            <Input
+              containerClassName="w-16"
+              className="w-16"
+              keyboardType="number-pad"
+              placeholder={String(DEFAULT_KEY_REPEAT_INITIAL_DELAY)}
+              textAlign="right"
+              maxLength={4}
+              value={initialDelayText}
+              onChangeText={(t) => setInitialDelayText(t.replace(/\D/g, "")) }
+              onEndEditing={(e) => {
+                const val = parseInt(e.nativeEvent.text.replace(/\D/g, ""));
+                updateSettings({ keyRepeatInitialDelay: val || undefined });
+                setInitialDelayText(String(val || ""));
+              }}
+            />
+          </SettingRow>
+
+          <SettingRow label="Repeat Interval" description="Milliseconds between repeated keystrokes" last={true}>
+            <Input
+              containerClassName="w-16"
+              className="w-16"
+              keyboardType="number-pad"
+              placeholder={String(DEFAULT_KEY_REPEAT_INTERVAL)}
+              textAlign="right"
+              maxLength={4}
+              value={repeatIntervalText}
+              onChangeText={(t) => setRepeatIntervalText(t.replace(/\D/g, "")) }
+              onEndEditing={(e) => {
+                const val = parseInt(e.nativeEvent.text.replace(/\D/g, ""));
+                updateSettings({ keyRepeatInterval: val || undefined });
+                setRepeatIntervalText(String(val || ""));
+              }}
+            />
+          </SettingRow>
+        </View>
+
+        <AccordionSection label="Repeating keys">
+          <Text className="px-3 py-3 mt-0.5 text-[10px] text-muted-foreground">These keys repeat continuously when held down</Text>
+          {Array.from(REPEATING_KEY_IDS).map((id) => {
+            const keyConfig = ALL_KEYS[id];
+            if (!keyConfig) return null;
+            return (
+              <View key={id} className="flex-row items-center gap-2 py-0.5">
+                <Text className="w-20 text-center text-sm text-foreground">
+                  {keyConfig.label}
+                </Text>
+                <Text className="text-[11px] text-muted-foreground">
+                  {keyConfig.description ?? id}
+                </Text>
+              </View>
+            );
+          })}
+        </AccordionSection>
       </View>
 
       {/* Reset */}