Merge branch 'feat/mobile-shift-tab' into dev

Author: Teigen

src/web/public/keyboard-accessory.js

@@ -4,7 +4,7 @@
  * Defines two exports:
  *
  * - KeyboardAccessoryBar (singleton object) — Quick action buttons shown above the virtual
- *   keyboard on mobile: arrow up/down, /init, /clear, /compact, paste, and dismiss.
+ *   keyboard on mobile: arrow up/down, Shift+Tab, /init, /clear, /compact, paste, and dismiss.
  *   Destructive actions (/clear, /compact) require double-tap confirmation (2s amber state).
  *   Commands are sent as text + Enter separately for Ink compatibility.
  *   Only initializes on touch devices (MobileDetection.isTouchDevice guard).
@@ -53,6 +53,7 @@ const KeyboardAccessoryBar = {
           <path d="M19 9l-7 7-7-7"/>
         </svg>
       </button>
+      <button class="accessory-btn" data-action="shift-tab" title="Shift+Tab">⇧Tab</button>
       <button class="accessory-btn" data-action="init" title="/init">/init</button>
       <button class="accessory-btn" data-action="clear" title="/clear">/clear</button>
       <button class="accessory-btn" data-action="compact" title="/compact">/compact</button>
@@ -80,7 +81,7 @@ const KeyboardAccessoryBar = {
       this.handleAction(action, btn);
 
       // Refocus terminal so keyboard stays open (tap blurs terminal → keyboard dismisses → toolbar shifts)
-      if ((action === 'scroll-up' || action === 'scroll-down') ||
+      if ((action === 'scroll-up' || action === 'scroll-down' || action === 'shift-tab') ||
           ((action === 'clear' || action === 'compact') && this._confirmAction)) {
         if (typeof app !== 'undefined' && app.terminal) {
           app.terminal.focus();
@@ -109,6 +110,9 @@ const KeyboardAccessoryBar = {
       case 'scroll-down':
         this.sendKey('\x1b[B');
         break;
+      case 'shift-tab':
+        this.sendKey('\x1b[Z');
+        break;
       case 'init':
         this.sendCommand('/init');
         break;

src/web/public/mobile.css

@@ -886,7 +886,8 @@ html.mobile-init .file-browser-panel {
     padding-right: calc(8px + var(--safe-area-right));
     gap: 8px;
     align-items: center;
-    justify-content: center;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     z-index: 51;
     transition: transform 0.15s ease-out;
     will-change: transform;
@@ -896,10 +897,16 @@ html.mobile-init .file-browser-panel {
     display: flex;
   }
 
+  /* 隐藏滚动条但保留滑动能力 */
+  .keyboard-accessory-bar::-webkit-scrollbar {
+    display: none;
+  }
+
   .accessory-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
     gap: 4px;
     padding: 6px 12px;
     background: #2a2a2a;
@@ -2068,18 +2075,24 @@ html.mobile-init .file-browser-panel {
   padding: 6px 8px;
   gap: 8px;
   align-items: center;
-  justify-content: center;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   z-index: 51;
 }
 
 .keyboard-accessory-bar.visible {
   display: flex;
 }
 
+.keyboard-accessory-bar::-webkit-scrollbar {
+  display: none;
+}
+
 .accessory-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   gap: 4px;
   padding: 6px 12px;
   background: #2a2a2a;