Skip to content

feat(mobile): add opt-in terminal controls #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Lint111 wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(mobile): add opt-in terminal controls #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/web/public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
* @dependency mobile-handlers.js (MobileDetection, KeyboardHandler, SwipeHandler)
* @dependency voice-input.js (VoiceInput, DeepgramProvider)
* @dependency notification-manager.js (NotificationManager class)
* @dependency keyboard-accessory.js (KeyboardAccessoryBar, FocusTrap)
* @dependency keyboard-accessory.js (MobileTerminalControls, FocusTrap)
* @dependency vendor/xterm.js, vendor/xterm-addon-fit.js, vendor/xterm-addon-webgl.js
* @dependency vendor/xterm-zerolag-input.iife.js (LocalEchoOverlay)
* @loadorder 6 of 15 — loaded after keyboard-accessory.js, before terminal-ui.js
Expand Down Expand Up @@ -790,10 +790,14 @@ class CodemanApp {
KeyboardHandler.init();
SwipeHandler.init();
VoiceInput.init();
KeyboardAccessoryBar.init();
// Apply keyboard bar mode from settings
// One setting controls both mobile terminal-control surfaces: the
// keyboard-hidden menu pad and the keyboard-open accessory bar.
const _kbSettings = this.loadAppSettingsFromStorage();
if (_kbSettings.extendedKeyboardBar) KeyboardAccessoryBar.setMode('extended');
const _kbDefaults = this.getDefaultSettings();
MobileTerminalControls.configureFeedback(_kbSettings, _kbDefaults);
MobileTerminalControls.init(
MobileTerminalControls.resolveEnabled(_kbSettings, _kbDefaults)
);
this.applyHeaderVisibilitySettings();
this.restorePlanUsageChip();
this.applySkin();
Expand Down
14 changes: 10 additions & 4 deletions src/web/public/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,12 +281,16 @@
Input: '输入',
'Local Echo': '本地回显',
'CJK Input': '中日韩输入',
'Extended Keyboard Bar': '扩展键盘栏',
'Mobile Terminal Controls': '移动终端控制',
'Control Haptics': '控制振动',
'Control Sounds': '控制音效',
'Gesture Control (beta)': '手势控制（测试版）',
'Wheel Scrolls Local History': '滚轮滚动本地历史',
'Instant typing feedback with local echo': '通过本地回显即时显示输入',
'Dedicated IME input field for CJK languages': '为中日韩语言提供专用输入法文本框',
'Extra keys: Tab, Esc, arrows, Ctrl+O': '附加按键：Tab、Esc、方向键、Ctrl+O',
'Esc, menu navigation, Tab, and keyboard-open shortcuts': 'Esc、菜单导航、Tab 和键盘打开时的快捷键',
'Brief vibration on terminal controls': '操作终端控件时短暂振动',
'Quiet tone on terminal controls': '操作终端控件时播放轻提示音',

// CLI / model settings
'Startup Mode': '启动模式',
Expand Down Expand Up @@ -665,8 +669,10 @@
'通过覆盖层即时显示输入，同时在后台把按键转发到服务器。支持 Tab 补全、切换标签时保留输入并防止会话崩溃丢字；推荐移动端和高延迟连接使用。',
"Show a dedicated input field below the terminal for CJK (Chinese/Japanese/Korean) IME composition. Recommended for mobile devices with Chinese input methods where xterm's native input handling may drop characters.":
'在终端下方显示中日韩输入法专用文本框。推荐在可能因 xterm 原生输入而丢字的移动端中文输入法中使用。',
'Show additional buttons (Tab, Shift+Tab, Ctrl+O, Esc, Alt+Enter, left/right arrows) in the mobile keyboard accessory bar.':
'在移动端键盘工具栏显示附加按键（Tab、Shift+Tab、Ctrl+O、Esc、Alt+Enter、左右方向键）。',
'Show Esc, Up, Enter, Down, and Tab controls while the mobile keyboard is hidden, plus the full terminal key bar while it is open. Hardware volume keys are used when the browser exposes them; press both directions together for Enter.':
'移动键盘隐藏时显示 Esc、上、Enter、下和 Tab 控件，键盘打开时显示完整终端按键栏。浏览器支持时可使用硬件音量键；同时按下两个方向键可发送 Enter。',
'Vibrate briefly after a mobile terminal control is accepted.': '移动终端控件生效后短暂振动。',
'Play a short, quiet tone after a mobile terminal control is accepted.': '移动终端控件生效后播放短促轻柔的提示音。',
'Scroll local history (when mouse passthrough is active)': '滚动本地历史（鼠标直通启用时）',
'Plain wheel/trackpad pages the terminal scrollback': '使用普通滚轮/触控板翻阅终端历史',
'Camera hand-tracking overlay (applied on reload)': '摄像头手势跟踪覆盖层（重新加载后生效）',
Expand Down
42 changes: 31 additions & 11 deletions src/web/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
served at /session/:id (detached single-session window) without 404ing
on relative <script>/<link> URLs. Must precede the first resource tag. -->
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content">
<meta name="description" content="Claude Code session manager with web interface">
<meta name="theme-color" content="#11151c">
<meta name="google" content="notranslate">
Expand Down Expand Up @@ -1285,6 +1285,36 @@ <h3>App Settings</h3>
</div>
<!-- Input Section -->
<div class="settings-section-header">Input</div>
<div class="settings-item settings-item-multiline" id="appSettingsMobileTerminalControlsItem" title="Show Esc, Up, Enter, Down, and Tab controls while the mobile keyboard is hidden, plus the full terminal key bar while it is open. Hardware volume keys are used when the browser exposes them; press both directions together for Enter.">
<div class="settings-item-text">
<span class="settings-item-label">Mobile Terminal Controls</span>
<span class="settings-item-desc">Esc, menu navigation, Tab, and keyboard-open shortcuts</span>
</div>
<label class="switch switch-sm">
<input type="checkbox" id="appSettingsMobileTerminalControls" checked>
<span class="slider"></span>
</label>
</div>
<div class="settings-item settings-item-multiline" id="appSettingsMobileControlHapticsItem" title="Vibrate briefly after a mobile terminal control is accepted.">
<div class="settings-item-text">
<span class="settings-item-label">Control Haptics</span>
<span class="settings-item-desc">Brief vibration on terminal controls</span>
</div>
<label class="switch switch-sm">
<input type="checkbox" id="appSettingsMobileControlHaptics" checked>
<span class="slider"></span>
</label>
</div>
<div class="settings-item settings-item-multiline" id="appSettingsMobileControlSoundItem" title="Play a short, quiet tone after a mobile terminal control is accepted.">
<div class="settings-item-text">
<span class="settings-item-label">Control Sounds</span>
<span class="settings-item-desc">Quiet tone on terminal controls</span>
</div>
<label class="switch switch-sm">
<input type="checkbox" id="appSettingsMobileControlSound">
<span class="slider"></span>
</label>
</div>
<div class="settings-item settings-item-multiline" title="Scroll the terminal's own local scrollback with a plain mouse wheel / two-finger swipe, instead of forwarding the wheel to the CLI's transcript. Turn on if scrolling back through history doesn't work (e.g. macOS trackpad in Claude sessions). Shift+wheel always reaches local scrollback regardless.">
<div class="settings-item-text">
<span class="settings-item-label">Wheel Scrolls Local History</span>
Expand Down Expand Up @@ -1316,16 +1346,6 @@ <h3>App Settings</h3>
</label>
</div>

<div class="settings-item settings-item-multiline" title="Show additional buttons (Tab, Shift+Tab, Ctrl+O, Esc, Alt+Enter, left/right arrows) in the mobile keyboard accessory bar.">
<div class="settings-item-text">
<span class="settings-item-label">Extended Keyboard Bar</span>
<span class="settings-item-desc">Extra keys: Tab, Esc, arrows, Ctrl+O</span>
</div>
<label class="switch switch-sm">
<input type="checkbox" id="appSettingsExtendedKeyboardBar">
<span class="slider"></span>
</label>
</div>
<div class="settings-item settings-item-multiline" id="appSettingsGestureControlItem" title="Enable the camera hand-tracking gesture overlay (applied on reload). The instance must run with CODEMAN_GESTURE=1.">
<div class="settings-item-text">
<span class="settings-item-label">Gesture Control (beta)</span>
Expand Down
Loading