fix(ui): add opt-in mobile keyboard resize mode and stabilize touch terminal input (#1107)

* fix(ui): add opt-in mobile keyboard resize mode * fix(ui): stabilize touch terminal input and tab layout * fix(ui): narrow touch terminal handling to mobile and tablet * fix(ui): refine touch terminal input handling * fix(ui): re-key terminal viewport on session id * fix(ui): avoid touch-laptop terminal overlay regression * fix(ui): hide ghostty system caret surfaces * fix(settings): normalize mobile keyboard mode sanitization * fix(ui): honor terminal quick keys toggle on mobile * fix(ui): gate mobile keyboard resize mode on iOS --------- Co-authored-by: vhqtvn <8930337+vhqtvn@users.noreply.github.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-05-05 12:26:34 +03:00
parent 63b4a5b996
commit 962ee41bba
25 changed files with 604 additions and 128 deletions
@@ -28,7 +28,9 @@
      const defaultShortName = 'OpenChamber';
      const pwaNameStorageKey = 'openchamber.pwaName';
      const pwaOrientationStorageKey = 'openchamber.pwaOrientation';
+      const mobileKeyboardModeStorageKey = 'openchamber.mobileKeyboardMode';
      const pwaRecentSessionsStorageKey = 'openchamber.pwaRecentSessions';
+      const viewportBaseContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';

      const normalizePwaName = (value, fallback) => {
        if (typeof value !== 'string') {
@@ -55,6 +57,57 @@
        return fallback;
      };

+      const normalizeMobileKeyboardMode = (value, fallback = 'native') => {
+        if (value === 'native' || value === 'resize-content') {
+          return value;
+        }
+        return fallback;
+      };
+
+      const supportsMobileKeyboardResizeContent = () => {
+        const userAgent = navigator.userAgent || '';
+        const platform = navigator.platform || '';
+        const maxTouchPoints = navigator.maxTouchPoints || 0;
+        const isIOS = /iPhone|iPad|iPod/i.test(userAgent)
+          || ((/Macintosh|MacIntel/i.test(userAgent) || /MacIntel/i.test(platform)) && maxTouchPoints > 1);
+
+        return !isIOS;
+      };
+
+      const getSupportedMobileKeyboardMode = (mode) => {
+        if (mode === 'resize-content' && !supportsMobileKeyboardResizeContent()) {
+          return 'native';
+        }
+        return mode;
+      };
+
+      const getViewportContentForMobileKeyboardMode = (value) => {
+        const mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(value, 'native'));
+        return mode === 'resize-content'
+          ? `${viewportBaseContent}, interactive-widget=resizes-content`
+          : viewportBaseContent;
+      };
+
+      const applyStoredMobileKeyboardMode = () => {
+        let mode = 'native';
+        try {
+          mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(localStorage.getItem(mobileKeyboardModeStorageKey), 'native'));
+          if (mode === 'native') {
+            localStorage.removeItem(mobileKeyboardModeStorageKey);
+          }
+        } catch {
+          mode = 'native';
+        }
+
+        document.documentElement.setAttribute('data-oc-mobile-keyboard-mode', mode);
+        const viewportMeta = document.querySelector('meta[name="viewport"]');
+        if (viewportMeta) {
+          viewportMeta.setAttribute('content', getViewportContentForMobileKeyboardMode(mode));
+        }
+      };
+
+      applyStoredMobileKeyboardMode();
+
      const getStoredInstallName = () => {
        try {
          const storedName = localStorage.getItem(pwaNameStorageKey);
@@ -19,6 +19,7 @@ export const createSettingsHelpers = (dependencies) => {

  const PWA_APP_NAME_MAX_LENGTH = 64;
  const PWA_ORIENTATION_VALUES = new Set(['system', 'portrait', 'landscape']);
+  const MOBILE_KEYBOARD_MODE_VALUES = new Set(['native', 'resize-content']);

  const normalizePwaAppName = (value, fallback = '') => {
    if (typeof value !== 'string') {
@@ -42,6 +43,17 @@ export const createSettingsHelpers = (dependencies) => {
    return fallback;
  };

+  const normalizeMobileKeyboardMode = (value, fallback = 'native') => {
+    if (typeof value !== 'string') {
+      return fallback;
+    }
+    const normalized = value.trim();
+    if (MOBILE_KEYBOARD_MODE_VALUES.has(normalized)) {
+      return normalized;
+    }
+    return fallback;
+  };
+
  const sanitizeSettingsUpdate = (payload) => {
    if (!payload || typeof payload !== 'object') {
      return {};
@@ -310,6 +322,12 @@ export const createSettingsHelpers = (dependencies) => {
    if (typeof candidate.pwaOrientation === 'string') {
      result.pwaOrientation = normalizePwaOrientation(candidate.pwaOrientation, undefined);
    }
+    if (typeof candidate.mobileKeyboardMode === 'string') {
+      const mode = normalizeMobileKeyboardMode(candidate.mobileKeyboardMode, undefined);
+      if (mode) {
+        result.mobileKeyboardMode = mode;
+      }
+    }
    if (typeof candidate.toolCallExpansion === 'string') {
      const mode = candidate.toolCallExpansion.trim();
      if (mode === 'collapsed' || mode === 'activity' || mode === 'detailed' || mode === 'changes') {
@@ -650,12 +668,14 @@ export const createSettingsHelpers = (dependencies) => {
    const hasManagedRemoteTunnelToken = typeof settings?.managedRemoteTunnelToken === 'string' && settings.managedRemoteTunnelToken.trim().length > 0;
    const pwaAppName = normalizePwaAppName(settings?.pwaAppName, '');
    const pwaOrientation = normalizePwaOrientation(settings?.pwaOrientation, 'system');
+    const mobileKeyboardMode = normalizeMobileKeyboardMode(settings?.mobileKeyboardMode, 'native');

    return {
      ...sanitized,
      hasManagedRemoteTunnelToken,
      ...(pwaAppName ? { pwaAppName } : {}),
      pwaOrientation,
+      mobileKeyboardMode,
      approvedDirectories: approved,
      securityScopedBookmarks: bookmarks,
      pinnedDirectories: normalizeStringArray(settings.pinnedDirectories),
@@ -672,6 +692,7 @@ export const createSettingsHelpers = (dependencies) => {
  return {
    normalizePwaAppName,
    normalizePwaOrientation,
+    normalizeMobileKeyboardMode,
    sanitizeSettingsUpdate,
    mergePersistedSettings,
    formatSettingsResponse,
@@ -51,4 +51,24 @@ describe('settings helpers', () => {
      desktopLanAccessEnabled: false,
    });
  });
+
+  it('accepts mobileKeyboardMode as a persisted shared setting', () => {
+    const helpers = createTestHelpers();
+
+    expect(helpers.sanitizeSettingsUpdate({ mobileKeyboardMode: 'native' })).toEqual({
+      mobileKeyboardMode: 'native',
+    });
+    expect(helpers.sanitizeSettingsUpdate({ mobileKeyboardMode: 'resize-content' })).toEqual({
+      mobileKeyboardMode: 'resize-content',
+    });
+    expect(helpers.sanitizeSettingsUpdate({ mobileKeyboardMode: ' resize-content ' })).toEqual({
+      mobileKeyboardMode: 'resize-content',
+    });
+  });
+
+  it('rejects invalid mobileKeyboardMode values', () => {
+    const helpers = createTestHelpers();
+
+    expect(helpers.sanitizeSettingsUpdate({ mobileKeyboardMode: 'fixed-layout' })).toEqual({});
+  });
 });