Add terminal quick keys option and desktop toggle (#249)

* feat: add terminal quick keys toggle in OpenChamber UI

* feat: enhance mobile input handling in Terminal for Android devices

packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx

@@ -83,7 +83,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
 
 // Visual section: Theme Mode, Font Size, Spacing, Corner Radius, Input Bar Offset (mobile)
 const VisualSectionContent: React.FC = () => {
-    return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'spacing', 'cornerRadius', 'inputBarOffset']} />;
+    return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'spacing', 'cornerRadius', 'inputBarOffset', 'terminalQuickKeys']} />;
 };
 
 // Chat section: Default Tool Output, Diff layout, Show reasoning traces, Queue mode

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -8,6 +8,7 @@ import { useMessageQueueStore } from '@/stores/messageQueueStore';
 import { cn, getModifierLabel } from '@/lib/utils';
 import { ButtonSmall } from '@/components/ui/button-small';
 import { NumberInput } from '@/components/ui/number-input';
+import { Switch } from '@/components/ui/switch';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { useDeviceInfo } from '@/lib/device';
 import {
@@ -73,7 +74,7 @@ const DIFF_VIEW_MODE_OPTIONS: Option<'single' | 'stacked'>[] = [
     },
 ];
 
-export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity';
+export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity' | 'terminalQuickKeys';
 
 interface OpenChamberVisualSettingsProps {
     /** Which settings to show. If undefined, shows all. */
@@ -101,6 +102,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
     const diffViewMode = useUIStore(state => state.diffViewMode);
     const setDiffViewMode = useUIStore(state => state.setDiffViewMode);
+    const showTerminalQuickKeysOnDesktop = useUIStore(state => state.showTerminalQuickKeysOnDesktop);
+    const setShowTerminalQuickKeysOnDesktop = useUIStore(state => state.setShowTerminalQuickKeysOnDesktop);
     const queueModeEnabled = useMessageQueueStore(state => state.queueModeEnabled);
     const setQueueMode = useMessageQueueStore(state => state.setQueueMode);
     const {
@@ -252,6 +255,25 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                 </div>
             )}
 
+            {shouldShow('terminalQuickKeys') && !isMobile && (
+                <div className="space-y-4">
+                    <div className="space-y-1">
+                        <h3 className="typography-ui-header font-semibold text-foreground">
+                            Show terminal optional key bar
+                        </h3>
+                        <p className="typography-ui text-muted-foreground">
+                            Esc, Ctrl, arrows, Enter.
+                        </p>
+                    </div>
+
+                    <Switch
+                        checked={showTerminalQuickKeysOnDesktop}
+                        onCheckedChange={setShowTerminalQuickKeysOnDesktop}
+                        className="data-[state=checked]:bg-status-info"
+                    />
+                </div>
+            )}
+
             {shouldShow('cornerRadius') && (
                 <div className="space-y-4">
                     <div className="space-y-1">

packages/ui/src/components/terminal/TerminalViewport.tsx

@@ -824,6 +824,12 @@ const TerminalViewport = React.forwardRef<TerminalController, TerminalViewportPr
         ref={containerRef}
         className={cn('relative h-full w-full terminal-viewport-container', className)}
         style={{ backgroundColor: theme.background }}
+        onTouchStart={(event) => {
+          if (enableTouchScroll) {
+            const touch = event.touches?.[0];
+            focusHiddenInput(touch?.clientX, touch?.clientY);
+          }
+        }}
         onClick={(event) => {
           if (enableTouchScroll) {
             focusHiddenInput(event.clientX, event.clientY);
@@ -867,13 +873,37 @@ const TerminalViewport = React.forwardRef<TerminalController, TerminalViewportPr
               margin: 0,
               outline: 'none',
             }}
+            onBeforeInput={(event) => {
+              const nativeEvent = event.nativeEvent as unknown as InputEvent | undefined;
+              const inputType = nativeEvent?.inputType ?? '';
+              const data = typeof nativeEvent?.data === 'string' ? nativeEvent.data : '';
+
+              // Android Chrome sometimes never commits text into the DOM value
+              // for invisible inputs. Use beforeinput as the primary path.
+              if (inputType === 'insertText' && data) {
+                event.preventDefault();
+                inputHandlerRef.current(data);
+                return;
+              }
+
+              if (inputType === 'insertLineBreak') {
+                event.preventDefault();
+                inputHandlerRef.current('\r');
+                return;
+              }
+
+              if (inputType === 'deleteContentBackward') {
+                event.preventDefault();
+                inputHandlerRef.current('\x7f');
+              }
+            }}
             onInput={(event) => {
               const raw = String(event.currentTarget.value || '');
               if (!raw) {
                 return;
               }
 
-              // iOS often inserts `\n` for Enter; the PTY expects CR.
+              // Some mobile keyboards (iOS esp.) insert `\n` for Enter; PTY expects CR.
               const value = raw.replace(/\r\n|\r|\n/g, '\r');
               inputHandlerRef.current(value);
               event.currentTarget.value = '';

packages/ui/src/components/views/TerminalView.tsx

@@ -79,6 +79,8 @@ export const TerminalView: React.FC = () => {
     const { currentTheme } = useThemeSystem();
     const { monoFont } = useFontPreferences();
     const { isMobile, hasTouchInput } = useDeviceInfo();
+    const showTerminalQuickKeysOnDesktop = useUIStore((state) => state.showTerminalQuickKeysOnDesktop);
+    const showQuickKeys = isMobile || showTerminalQuickKeysOnDesktop;
 
     const { currentSessionId, newSessionDraft } = useSessionStore();
     const hasActiveContext = currentSessionId !== null || newSessionDraft?.open === true;
@@ -138,10 +140,10 @@ export const TerminalView: React.FC = () => {
     }, [effectiveDirectory]);
 
     React.useEffect(() => {
-        if (!isMobile && activeModifier !== null) {
+        if (!showQuickKeys && activeModifier !== null) {
             setActiveModifier(null);
         }
-    }, [isMobile, activeModifier, setActiveModifier]);
+    }, [showQuickKeys, activeModifier, setActiveModifier]);
 
     React.useEffect(() => {
         if (!terminalSessionId && activeModifier !== null) {
@@ -492,7 +494,7 @@ export const TerminalView: React.FC = () => {
     );
 
     React.useEffect(() => {
-        if (!isMobile || !activeModifier || !terminalSessionId) {
+        if (!showQuickKeys || !activeModifier || !terminalSessionId) {
             return;
         }
 
@@ -565,7 +567,7 @@ export const TerminalView: React.FC = () => {
         activeModifier,
         handleMobileKeyPress,
         handleViewportInput,
-        isMobile,
+        showQuickKeys,
         setActiveModifier,
         terminalSessionId,
     ]);
@@ -693,7 +695,7 @@ export const TerminalView: React.FC = () => {
                         </Button>
                     </div>
                 </div>
-                {isMobile ? (
+                {showQuickKeys ? (
                     <div className="mt-2 flex flex-wrap items-center gap-1">
                         <Button
                             type="button"

packages/ui/src/stores/useUIStore.ts

@@ -69,6 +69,8 @@ interface UIStore {
   notificationMode: 'always' | 'hidden-only';
   notifyOnSubtasks: boolean;
 
+  showTerminalQuickKeysOnDesktop: boolean;
+
   setTheme: (theme: 'light' | 'dark' | 'system') => void;
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
@@ -122,6 +124,7 @@ interface UIStore {
   setImagePreviewOpen: (open: boolean) => void;
   setNativeNotificationsEnabled: (value: boolean) => void;
   setNotificationMode: (mode: 'always' | 'hidden-only') => void;
+  setShowTerminalQuickKeysOnDesktop: (value: boolean) => void;
   setNotifyOnSubtasks: (value: boolean) => void;
   openMultiRunLauncher: () => void;
   openMultiRunLauncherWithPrompt: (prompt: string) => void;
@@ -180,6 +183,8 @@ export const useUIStore = create<UIStore>()(
         notificationMode: 'hidden-only',
         notifyOnSubtasks: true,
 
+        showTerminalQuickKeysOnDesktop: false,
+
         setTheme: (theme) => {
           set({ theme });
           get().applyTheme();
@@ -597,6 +602,10 @@ export const useUIStore = create<UIStore>()(
           set({ notificationMode: mode });
         },
 
+        setShowTerminalQuickKeysOnDesktop: (value) => {
+          set({ showTerminalQuickKeysOnDesktop: value });
+        },
+
         setNotifyOnSubtasks: (value) => {
           set({ notifyOnSubtasks: value });
         },
@@ -634,6 +643,7 @@ export const useUIStore = create<UIStore>()(
           diffViewMode: state.diffViewMode,
           nativeNotificationsEnabled: state.nativeNotificationsEnabled,
           notificationMode: state.notificationMode,
+          showTerminalQuickKeysOnDesktop: state.showTerminalQuickKeysOnDesktop,
           notifyOnSubtasks: state.notifyOnSubtasks,
         })
       }

packages/web/package.json

@@ -13,8 +13,8 @@
   },
   "scripts": {
     "dev": "bun run build:watch",
-    "dev:server": "node server/index.js --port 3001",
+    "dev:server": "bun server/index.js --port 3001",
-    "dev:server:watch": "nodemon --watch server --ext js --exec \"node server/index.js --port 3001\"",
+    "dev:server:watch": "nodemon --watch server --ext js --exec \"bun server/index.js --port 3001\"",
     "build": "vite build",
     "build:watch": "vite build --watch",
     "type-check": "tsc --noEmit",