@hmduc16031996/claude-mb-bridge 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmduc16031996/claude-mb-bridge",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "Bridge between Claude Code CLI and your mobile app via WebView",
   "type": "module",
   "main": "dist/index.js",

package/public/app.js

@@ -1688,7 +1688,6 @@ class ClaudeRemote {
     }
   }
 
-  // Mobile keys methods
   initMobileKeys() {
     // Only init on touch devices
     if (window.matchMedia('(pointer: fine)').matches) return;
@@ -1723,54 +1722,45 @@ class ClaudeRemote {
       });
     }, { passive: true });
 
-    // Detect keyboard visibility using visualViewport API
+    // Always show in mobile flex flow
+    this.elements.mainScreen.classList.add('mobile-keys-visible');
+
+    // Handle initial sizing
     if (window.visualViewport) {
       window.visualViewport.addEventListener('resize', () => this.onViewportChange());
       window.visualViewport.addEventListener('scroll', () => this.onViewportChange());
+      this.onViewportChange();
     }
   }
 
   onViewportChange() {
-    const viewport = window.visualViewport;
-    const heightDiff = window.innerHeight - viewport.height;
-
-    // If viewport is significantly smaller than window, keyboard is likely open
-    // Using 150px threshold to account for keyboard
-    const keyboardOpen = heightDiff > 150;
-
-    if (keyboardOpen && this.elements.mainScreen.classList.contains('active')) {
-      // Position toolbar just above the keyboard
-      // Account for visual viewport offset when page is scrolled
-      const keyboardHeight = window.innerHeight - viewport.height - viewport.offsetTop;
-      this.elements.mobileKeys.style.bottom = `${Math.max(0, keyboardHeight)}px`;
-      this.showMobileKeys();
-    } else {
-      this.hideMobileKeys();
+    if (!window.visualViewport) return;
+
+    // Adjust app height to match visual viewport (the actual visible area above the keyboard)
+    const viewportHeight = window.visualViewport.height;
+    const bodyHeight = window.innerHeight;
+
+    // On some mobile browsers, setting 100% isn't enough when keyboard is open
+    // We explicitly set the app height to the visual viewport height
+    const app = document.getElementById('app');
+    if (app) {
+      app.style.height = `${viewportHeight}px`;
     }
-  }
 
-  showMobileKeys() {
-    this.elements.mobileKeys.classList.remove('hidden');
-    this.elements.mobileKeys.classList.add('visible');
-    this.elements.mainScreen.classList.add('mobile-keys-visible');
+    // Recalculate terminal size for the new container height
     this.fitTerminal();
-  }
 
-  hideMobileKeys() {
-    this.elements.mobileKeys.classList.remove('visible');
-    this.elements.mainScreen.classList.remove('mobile-keys-visible');
-    // Reset modifier states when hiding
-    this.setCtrlActive(false);
-    this.setShiftActive(false);
-    this.fitTerminal();
-    // Hide after animation
-    setTimeout(() => {
-      if (!this.elements.mobileKeys.classList.contains('visible')) {
-        this.elements.mobileKeys.classList.add('hidden');
-      }
-    }, 300);
+    // Ensure terminal scrolled to bottom so cursor is visible above keyboard
+    // Only if the current session is terminal-based
+    if (this.currentSessionId && this.terminal) {
+      this.terminal.scrollToBottom();
+    }
+
+    // Log for debugging visibility if needed
+    // console.log(`Viewport height: ${viewportHeight}, Body height: ${bodyHeight}`);
   }
 
+
   handleMobileKey(key) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.currentSessionId) return;
 
@@ -1790,12 +1780,18 @@ class ClaudeRemote {
       case 'slash':
         this.ws.send('/');
         break;
+      case 'left':
+        this.ws.send('\x1b[D'); // Arrow left
+        break;
       case 'up':
         this.ws.send('\x1b[A'); // Arrow up
         break;
       case 'down':
         this.ws.send('\x1b[B'); // Arrow down
         break;
+      case 'right':
+        this.ws.send('\x1b[C'); // Arrow right
+        break;
     }
 
     // Clear modifiers after sending a key (except when toggling modifiers)

package/public/index.html

@@ -130,6 +130,19 @@
         </div>
       </header>
 
+      <!-- Mobile Control Keys Toolbar (visible on mobile only) -->
+      <div id="mobile-keys" class="mobile-keys" role="toolbar" aria-label="Control keys">
+        <button type="button" class="mobile-key" data-key="escape" aria-label="Escape">Esc</button>
+        <button type="button" class="mobile-key mobile-key-modifier" data-key="ctrl" aria-label="Control modifier" aria-pressed="false">Ctrl</button>
+        <button type="button" class="mobile-key mobile-key-modifier" data-key="shift" aria-label="Shift modifier" aria-pressed="false">Shift</button>
+        <button type="button" class="mobile-key" data-key="tab" aria-label="Tab">Tab</button>
+        <button type="button" class="mobile-key" data-key="slash" aria-label="Slash">/</button>
+        <button type="button" class="mobile-key" data-key="left" aria-label="Arrow left">←</button>
+        <button type="button" class="mobile-key" data-key="up" aria-label="Arrow up">↑</button>
+        <button type="button" class="mobile-key" data-key="down" aria-label="Arrow down">↓</button>
+        <button type="button" class="mobile-key" data-key="right" aria-label="Arrow right">→</button>
+      </div>
+
       <!-- Terminal Container -->
       <div id="terminal-container" role="application" aria-label="Terminal"></div>
 
@@ -140,16 +153,6 @@
         </svg>
       </button>
 
-      <!-- Mobile Control Keys Toolbar (visible when keyboard is open on mobile) -->
-      <div id="mobile-keys" class="mobile-keys hidden" role="toolbar" aria-label="Control keys">
-        <button type="button" class="mobile-key" data-key="escape" aria-label="Escape">Esc</button>
-        <button type="button" class="mobile-key mobile-key-modifier" data-key="ctrl" aria-label="Control modifier" aria-pressed="false">Ctrl</button>
-        <button type="button" class="mobile-key mobile-key-modifier" data-key="shift" aria-label="Shift modifier" aria-pressed="false">Shift</button>
-        <button type="button" class="mobile-key" data-key="tab" aria-label="Tab">Tab</button>
-        <button type="button" class="mobile-key" data-key="slash" aria-label="Slash">/</button>
-        <button type="button" class="mobile-key" data-key="up" aria-label="Arrow up">↑</button>
-        <button type="button" class="mobile-key" data-key="down" aria-label="Arrow down">↓</button>
-      </div>
 
       <!-- Floating expand button (visible when header collapsed) -->
       <button id="expand-header-btn" class="btn-icon floating-btn hidden" title="Show header" aria-label="Show header">

package/public/styles.css

@@ -63,11 +63,12 @@ body {
 
 #app {
   width: 100%;
-  height: 100%;
+  height: 100vh; /* Primary height */
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 1;
+  overflow: hidden;
 }
 
 /* ===== SCREENS ===== */
@@ -1443,36 +1444,28 @@ kbd {
 /* CRITICAL: z-index must be higher than touch-scroll-overlay (9999) to receive taps.
    The overlay doesn't create a stacking context, so its 9999 z-index competes directly. */
 .mobile-keys {
-  position: fixed;
-  left: 0;
-  right: 0;
   display: flex;
   justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
   background: var(--bg-primary);
-  border-top: 1px solid var(--border);
-  z-index: 10000;
-  opacity: 0;
-  pointer-events: none;
+  border-bottom: 1px solid var(--border);
+  z-index: 5;
   transition: opacity var(--transition);
-  /* bottom is set dynamically by JS */
+  flex-shrink: 0;
 }
 
-.mobile-keys.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
 
 .mobile-key {
+  flex: 1;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 48px;
   height: 40px;
-  padding: 0 0.75rem;
+  padding: 0 0.25rem;
   font-family: var(--font-mono);
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   background: var(--bg-surface);
   color: var(--text-secondary);
   border: 1px solid var(--border);
@@ -1502,15 +1495,9 @@ kbd {
   }
 }
 
-/* Adjust terminal container when toolbar is visible */
-.mobile-keys.visible + .floating-btn,
-.mobile-keys.visible ~ .floating-btn {
-  bottom: calc(56px + max(0.5rem, env(safe-area-inset-bottom)));
-}
-
-/* When mobile keys are visible, add padding to terminal */
-#main-screen.mobile-keys-visible #terminal-container {
-  padding-bottom: calc(56px + env(safe-area-inset-bottom));
+/* Layout adjustments when toolbar is visible (now part of flex flow) */
+.mobile-keys + #terminal-container {
+  border-top: none; /* Already have border-bottom on keys */
 }
 
 /* ===== SCROLL TO BOTTOM BUTTON ===== */