From de328978f1124f2987d438ef94a1ba66a34d21f5 Mon Sep 17 00:00:00 2001
From: ZHAO Xudong <zxdong@gmail.com>
Date: Sun, 9 Aug 2026 10:21:57 +0800
Subject: [PATCH 1/4] [r2]

---
 .github/workflows/dev-build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index dba0536..0e618fc 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -1,6 +1,6 @@
 name: Dev Build Android APK
 
-# Lightweight dev build: builds debug + release APKs, uploads them as
+# Lightweight dev build:  builds debug + release APKs, uploads them as
 # GitHub Actions artifacts, and optionally mirrors release APKs to Cloudflare
 # R2 when the commit message contains [r2].
 #

From 36812da74277b02e8ce9ac512c83b16930c3c9db Mon Sep 17 00:00:00 2001
From: ZHAO Xudong <zxdong@gmail.com>
Date: Sun, 9 Aug 2026 15:30:49 +0800
Subject: [PATCH 2/4] [r2]

---
 .../org/electerm/electerm/MainActivity.java   | 79 +++++++++++++++----
 1 file changed, 62 insertions(+), 17 deletions(-)

diff --git a/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java b/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
index d437951..84d055d 100644
--- a/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
+++ b/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
@@ -1,37 +1,82 @@
 package org.electerm.electerm;
 
 import android.os.Bundle;
+import android.view.View;
 import androidx.core.view.WindowCompat;
 import com.getcapacitor.BridgeActivity;
 
 /**
  * electerm custom MainActivity.
  *
- * Problem: On Android 15+ (API 35+, e.g. Google Pixel 9), edge-to-edge display
- * is enforced. Capacitor's BridgeActivity.onCreate() calls
+ * Problem: On Android 15+ (API 35+, e.g. Google Pixel 9), Capacitor's
+ * BridgeActivity enables edge-to-edge display by calling
  *   WindowCompat.setDecorFitsSystemWindows(getWindow(), false)
- * which opts INTO edge-to-edge, causing the WebView content to extend under the
- * system status bar. This makes the tab bar area (top 36px of the app)
- * unclickable — the status bar overlays it.
+ * and setting up its own OnApplyWindowInsetsListener that consumes system
+ * bar insets without applying them as padding. This causes the WebView
+ * content to extend under the status bar, making the tab bar area
+ * unclickable.
  *
- * On some devices (e.g. Huawei Mate 40 running EMUI / older Android) this does
- * not happen because the manufacturer's system does not enforce edge-to-edge or
- * handles insets differently.
+ * Simply calling setDecorFitsSystemWindows(true) is NOT enough because
+ * Capacitor's listener still consumes the insets without applying padding.
  *
- * Fix: Override BridgeActivity.onCreate() and call
- *   WindowCompat.setDecorFitsSystemWindows(getWindow(), true)
- * AFTER super.onCreate(). This tells the system to apply automatic padding for
- * status-bar and navigation-bar insets, so the WebView content stays within the
- * safe area and the tab bar is fully clickable on all devices.
- *
- * This is the app-level (native) fix — no CSS safe-area-inset hacks needed.
+ * Fix: Override the content view's OnApplyWindowInsetsListener to apply
+ * system bar insets (status bar + navigation bar) as padding on the root
+ * content FrameLayout. This constrains the WebView within the safe area.
+ * The listener is re-applied in onPostCreate/onResume and via post() to
+ * ensure it runs after Capacitor's bridge initialization.
  */
 public class MainActivity extends BridgeActivity {
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
-        // Override Capacitor's edge-to-edge default so content does not extend
-        // under system bars (status bar at top, navigation bar at bottom).
         WindowCompat.setDecorFitsSystemWindows(getWindow(), true);
+        applySafeAreaPadding();
+    }
+
+    @Override
+    protected void onPostCreate(Bundle savedInstanceState) {
+        super.onPostCreate(savedInstanceState);
+        applySafeAreaPadding();
+    }
+
+    @Override
+    protected void onResume() {
+        super.onResume();
+        WindowCompat.setDecorFitsSystemWindows(getWindow(), true);
+        applySafeAreaPadding();
+    }
+
+    /**
+     * Apply system bar insets (status bar + navigation bar) as padding to
+     * the root content view (android.R.id.content) so the WebView stays
+     * within the safe area.
+     *
+     * We override any OnApplyWindowInsetsListener that Capacitor's Bridge
+     * may have set on the content view, and apply the insets as padding.
+     * The listener is set both synchronously and via post() to ensure it
+     * runs after Capacitor's (possibly async) bridge initialization.
+     */
+    private void applySafeAreaPadding() {
+        View contentView = findViewById(android.R.id.content);
+        if (contentView == null) return;
+
+        setInsetListener(contentView);
+        // Also post to run after all pending main-thread messages,
+        // which is after Capacitor's async bridge setup.
+        contentView.post(() -> setInsetListener(contentView));
+    }
+
+    private void setInsetListener(View contentView) {
+        contentView.setOnApplyWindowInsetsListener((v, insets) -> {
+            int top = insets.getSystemWindowInsetTop();
+            int bottom = insets.getSystemWindowInsetBottom();
+            v.setPadding(0, top, 0, bottom);
+            // Consume system window insets so the WebView (child) doesn't
+            // double-apply them. The keyboard is handled via
+            // android:windowSoftInputMode=adjustResize in the theme, which
+            // resizes the window rather than relying on insets dispatch.
+            return insets.consumeSystemWindowInsets();
+        });
+        contentView.requestApplyInsets();
     }
 }

From c215d0d30d233bfee4561dd74917ac59b5248250 Mon Sep 17 00:00:00 2001
From: ZHAO Xudong <zxdong@gmail.com>
Date: Sun, 9 Aug 2026 15:55:44 +0800
Subject: [PATCH 3/4] FIx [r2]

---
 .../res-overlay/java/org/electerm/electerm/MainActivity.java    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java b/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
index 84d055d..cc28b01 100644
--- a/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
+++ b/build/android/res-overlay/java/org/electerm/electerm/MainActivity.java
@@ -40,7 +40,7 @@ protected void onPostCreate(Bundle savedInstanceState) {
     }
 
     @Override
-    protected void onResume() {
+    public void onResume() {
         super.onResume();
         WindowCompat.setDecorFitsSystemWindows(getWindow(), true);
         applySafeAreaPadding();

From 6bfbb0b6f061ffc1860986a0ddf3ecf4283d584b Mon Sep 17 00:00:00 2001
From: ZHAO Xudong <zxdong@gmail.com>
Date: Sun, 9 Aug 2026 19:15:57 +0800
Subject: [PATCH 4/4] Add keyboard shortcut when input

---
 .../web-components/keyboard-accessory-bar.jsx | 419 ++++++++++++++++++
 .../keyboard-accessory-bar.styl               |  82 ++++
 src/client/web-components/web-main.jsx        |   2 +
 3 files changed, 503 insertions(+)
 create mode 100644 src/client/web-components/keyboard-accessory-bar.jsx
 create mode 100644 src/client/web-components/keyboard-accessory-bar.styl

diff --git a/src/client/web-components/keyboard-accessory-bar.jsx b/src/client/web-components/keyboard-accessory-bar.jsx
new file mode 100644
index 0000000..502b02e
--- /dev/null
+++ b/src/client/web-components/keyboard-accessory-bar.jsx
@@ -0,0 +1,419 @@
+/**
+ * Mobile keyboard accessory bar.
+ *
+ * When any input (including the xterm terminal helper textarea) is focused on
+ * a touch device, the Android system soft keyboard appears. This component
+ * renders a fixed toolbar above the keyboard with extra control keys that are
+ * hard or impossible to type on a mobile keyboard:
+ *
+ *   ESC, Tab, Ctrl (toggle), Alt (toggle), arrow keys, Ctrl-C, Ctrl-D,
+ *   Ctrl-Z, Ctrl-L, Ctrl-R, Ctrl-A, Ctrl-E, Ctrl-W, Ctrl-U, Ctrl-K,
+ *   Home, End, PgUp, PgDn, /, :, -, `, \, Backspace, and a "Done" button
+ *   to dismiss the keyboard.
+ *
+ * For the terminal:
+ *   - Keys are sent directly to the active terminal's AttachAddon._sendData,
+ *     bypassing xterm's textarea entirely (reliable, no focus-juggling).
+ *   - The Ctrl toggle wraps _sendData so the NEXT character typed on the soft
+ *     keyboard is converted to Ctrl+char, then auto-disables. This lets you
+ *     type Ctrl+any letter, not just the pre-defined shortcuts.
+ *   - The Alt toggle sends an ESC prefix (\x1b) before the next character.
+ *
+ * For regular <input>/<textarea>:
+ *   - Special keys (Tab, arrows, Home, End, Backspace, Enter) are dispatched
+ *     as KeyboardEvent so the focused element / React handler can react.
+ *   - Character keys (/, :, -, `, \) are inserted at the cursor via
+ *     document.execCommand('insertText').
+ *   - Ctrl-C / Ctrl-D etc. are no-ops for regular inputs (they are terminal
+ *     only) but are still shown so the bar layout is consistent.
+ */
+
+import { Component } from 'react'
+import './keyboard-accessory-bar.styl'
+
+// Terminal escape sequences
+const ESC = '\x1b'
+const sequences = {
+  esc: ESC,
+  tab: '\t',
+  enter: '\r',
+  backspace: '\x7f', // DEL (what xterm sends for Backspace)
+  up: ESC + '[A',
+  down: ESC + '[B',
+  right: ESC + '[C',
+  left: ESC + '[D',
+  home: ESC + '[H',
+  end: ESC + '[F',
+  pageup: ESC + '[5~',
+  pagedown: ESC + '[6~',
+  // Ctrl+letter = char code 1..26
+  ctrlC: '\x03',
+  ctrlD: '\x04',
+  ctrlZ: '\x1a',
+  ctrlL: '\x0c',
+  ctrlR: '\x12',
+  ctrlA: '\x01',
+  ctrlE: '\x05',
+  ctrlW: '\x17',
+  ctrlU: '\x15',
+  ctrlK: '\x0b'
+}
+
+// Keys that apply to regular inputs too (dispatched as KeyboardEvent)
+const keyboardEventMap = {
+  tab: { key: 'Tab', code: 'Tab', keyCode: 9 },
+  enter: { key: 'Enter', code: 'Enter', keyCode: 13 },
+  backspace: { key: 'Backspace', code: 'Backspace', keyCode: 8 },
+  up: { key: 'ArrowUp', code: 'ArrowUp', keyCode: 38 },
+  down: { key: 'ArrowDown', code: 'ArrowDown', keyCode: 40 },
+  left: { key: 'ArrowLeft', code: 'ArrowLeft', keyCode: 37 },
+  right: { key: 'ArrowRight', code: 'ArrowRight', keyCode: 39 },
+  home: { key: 'Home', code: 'Home', keyCode: 36 },
+  end: { key: 'End', code: 'End', keyCode: 35 },
+  pageup: { key: 'PageUp', code: 'PageUp', keyCode: 33 },
+  pagedown: { key: 'PageDown', code: 'PageDown', keyCode: 34 }
+}
+
+// Character-insert keys for regular inputs
+const charKeys = {
+  slash: '/',
+  colon: ':',
+  minus: '-',
+  backtick: '`',
+  backslash: '\\'
+}
+
+// Button layout. Each entry: { id, label, type }
+// type: 'seq' = terminal sequence, 'char' = insert character,
+//       'toggle' = modifier toggle, 'done' = dismiss keyboard
+const buttonLayout = [
+  { id: 'esc', label: 'ESC', type: 'seq' },
+  { id: 'tab', label: 'TAB', type: 'seq' },
+  { id: 'ctrl', label: 'CTRL', type: 'toggle' },
+  { id: 'alt', label: 'ALT', type: 'toggle' },
+  { id: 'up', label: '↑', type: 'seq' },
+  { id: 'down', label: '↓', type: 'seq' },
+  { id: 'left', label: '←', type: 'seq' },
+  { id: 'right', label: '→', type: 'seq' },
+  { id: 'ctrlC', label: 'Ctrl-C', type: 'seq' },
+  { id: 'ctrlD', label: 'Ctrl-D', type: 'seq' },
+  { id: 'ctrlZ', label: 'Ctrl-Z', type: 'seq' },
+  { id: 'ctrlL', label: 'Ctrl-L', type: 'seq' },
+  { id: 'ctrlR', label: 'Ctrl-R', type: 'seq' },
+  { id: 'ctrlA', label: 'Ctrl-A', type: 'seq' },
+  { id: 'ctrlE', label: 'Ctrl-E', type: 'seq' },
+  { id: 'ctrlW', label: 'Ctrl-W', type: 'seq' },
+  { id: 'ctrlU', label: 'Ctrl-U', type: 'seq' },
+  { id: 'ctrlK', label: 'Ctrl-K', type: 'seq' },
+  { id: 'home', label: 'Home', type: 'seq' },
+  { id: 'end', label: 'End', type: 'seq' },
+  { id: 'pageup', label: 'PgUp', type: 'seq' },
+  { id: 'pagedown', label: 'PgDn', type: 'seq' },
+  { id: 'slash', label: '/', type: 'char' },
+  { id: 'colon', label: ':', type: 'char' },
+  { id: 'minus', label: '-', type: 'char' },
+  { id: 'backtick', label: '`', type: 'char' },
+  { id: 'backslash', label: '\\', type: 'char' },
+  { id: 'backspace', label: '⌫', type: 'seq' },
+  { id: 'enter', label: '↵', type: 'seq' },
+  { id: 'done', label: 'Done', type: 'done' }
+]
+
+export default class KeyboardAccessoryBar extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      visible: false,
+      isTerminal: false,
+      ctrlActive: false,
+      altActive: false
+    }
+    this._focusTimer = null
+    this._wrappedAddon = null
+    this._originalSendData = null
+  }
+
+  componentDidMount () {
+    // Use focusin/focusout (bubbling) to detect when any input is focused.
+    document.addEventListener('focusin', this.handleFocusIn, true)
+    document.addEventListener('focusout', this.handleFocusOut, true)
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('focusin', this.handleFocusIn, true)
+    document.removeEventListener('focusout', this.handleFocusOut, true)
+    clearTimeout(this._focusTimer)
+    this._restoreSendData()
+  }
+
+  handleFocusIn = (e) => {
+    const el = e.target
+    if (!el) return
+    const isInput = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'
+    if (!isInput) return
+    // Skip readonly inputs (like the batch-input holder) — they don't need
+    // the keyboard and showing the bar would be confusing.
+    if (el.readOnly || el.disabled) return
+    const isTerminal = el.classList?.contains('xterm-helper-textarea')
+    clearTimeout(this._focusTimer)
+    // Small delay so focusout→focusin rapid switching (e.g. tapping a bar
+    // button) doesn't cause a hide→show flicker.
+    this._focusTimer = setTimeout(() => {
+      this.setState({ visible: true, isTerminal })
+    }, 50)
+  }
+
+  handleFocusOut = () => {
+    clearTimeout(this._focusTimer)
+    // Delay hiding so that tapping a bar button (which steals focus) doesn't
+    // immediately hide the bar before the button's onClick fires.
+    this._focusTimer = setTimeout(() => {
+      const active = document.activeElement
+      const isInput = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')
+      if (!isInput) {
+        this.setState({
+          visible: false,
+          ctrlActive: false,
+          altActive: false
+        })
+        this._restoreSendData()
+      }
+    }, 200)
+  }
+
+  /**
+   * Get the active terminal's AttachAddon so we can send data directly.
+   * Uses window.refs (global) which is set up by electerm-react's ref module.
+   */
+  getAttachAddon () {
+    const store = window.store
+    if (!store?.activeTabId) return null
+    const term = window.refs?.get('term-' + store.activeTabId)
+    return term?.attachAddon ?? null
+  }
+
+  /**
+   * Send a terminal escape sequence to the active terminal.
+   */
+  sendToTerminal (seq) {
+    const addon = this.getAttachAddon()
+    if (addon?._sendData) {
+      addon._sendData(seq)
+    }
+  }
+
+  /**
+   * Ctrl toggle: wrap _sendData so the NEXT character typed on the soft
+   * keyboard is converted to Ctrl+char, then auto-restores.
+   */
+  enableCtrlMode () {
+    const addon = this.getAttachAddon()
+    if (!addon?._sendData) return
+    this._restoreSendData()
+    this._originalSendData = addon._sendData
+    this._wrappedAddon = addon
+    const original = this._originalSendData
+    const self = this
+    addon._sendData = function (data) {
+      if (typeof data === 'string' && data.length === 1) {
+        const code = data.charCodeAt(0)
+        let ctrlCode = -1
+        if (code >= 97 && code <= 122) ctrlCode = code - 96 // a-z → 1-26
+        else if (code >= 65 && code <= 90) ctrlCode = code - 64 // A-Z → 1-26
+        if (ctrlCode >= 1 && ctrlCode <= 26) {
+          data = String.fromCharCode(ctrlCode)
+        }
+      }
+      // Restore immediately — Ctrl applies to one keystroke only.
+      self._clearWrapper()
+      original.call(addon, data)
+    }
+  }
+
+  /**
+   * Alt toggle: send ESC prefix before the next character.
+   */
+  enableAltMode () {
+    const addon = this.getAttachAddon()
+    if (!addon?._sendData) return
+    this._restoreSendData()
+    this._originalSendData = addon._sendData
+    this._wrappedAddon = addon
+    const original = this._originalSendData
+    const self = this
+    addon._sendData = function (data) {
+      if (typeof data === 'string' && data.length === 1) {
+        data = ESC + data
+      }
+      self._clearWrapper()
+      original.call(addon, data)
+    }
+  }
+
+  /**
+   * Clear the wrapper state without restoring (used by the wrapper itself
+   * after it has already called the original).
+   */
+  _clearWrapper () {
+    this._wrappedAddon = null
+    this._originalSendData = null
+  }
+
+  /**
+   * Restore the original _sendData (remove Ctrl/Alt wrapper).
+   */
+  _restoreSendData () {
+    if (this._wrappedAddon && this._originalSendData) {
+      this._wrappedAddon._sendData = this._originalSendData
+      this._wrappedAddon = null
+      this._originalSendData = null
+    }
+  }
+
+  /**
+   * Dispatch a KeyboardEvent on the focused element (for regular inputs).
+   */
+  dispatchKeyEvent (id) {
+    const map = keyboardEventMap[id]
+    if (!map) return
+    const el = document.activeElement
+    if (!el) return
+    const opts = {
+      key: map.key,
+      code: map.code,
+      keyCode: map.keyCode,
+      bubbles: true,
+      cancelable: true
+    }
+    el.dispatchEvent(new window.KeyboardEvent('keydown', opts))
+    el.dispatchEvent(new window.KeyboardEvent('keyup', opts))
+  }
+
+  /**
+   * Insert a character at the cursor in a regular input/textarea.
+   */
+  insertChar (ch) {
+    const el = document.activeElement
+    if (!el || (el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA')) return
+    if (el.readOnly || el.disabled) return
+    el.focus()
+    try {
+      document.execCommand('insertText', false, ch)
+    } catch (e) {
+      // Fallback: manual insertion
+      const start = el.selectionStart ?? 0
+      const end = el.selectionEnd ?? 0
+      const val = el.value
+      el.value = val.slice(0, start) + ch + val.slice(end)
+      el.setSelectionRange(start + ch.length, start + ch.length)
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+
+  handleButton = (btn, ev) => {
+    // Prevent the tap from stealing focus from the terminal/input.
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    const { isTerminal } = this.state
+
+    switch (btn.type) {
+      case 'done': {
+        // Dismiss the keyboard by blurring the focused element.
+        const el = document.activeElement
+        if (el && el.blur) el.blur()
+        this.setState({ visible: false, ctrlActive: false, altActive: false })
+        this._restoreSendData()
+        break
+      }
+      case 'toggle': {
+        if (btn.id === 'ctrl') {
+          const willActive = !this.state.ctrlActive
+          // If alt was on, turn it off
+          if (willActive && this.state.altActive) {
+            this._restoreSendData()
+            this.setState({ altActive: false })
+          }
+          this.setState({ ctrlActive: willActive })
+          if (willActive) {
+            this.enableCtrlMode()
+          } else {
+            this._restoreSendData()
+          }
+        } else if (btn.id === 'alt') {
+          const willActive = !this.state.altActive
+          if (willActive && this.state.ctrlActive) {
+            this._restoreSendData()
+            this.setState({ ctrlActive: false })
+          }
+          this.setState({ altActive: willActive })
+          if (willActive) {
+            this.enableAltMode()
+          } else {
+            this._restoreSendData()
+          }
+        }
+        break
+      }
+      case 'seq': {
+        if (isTerminal) {
+          this.sendToTerminal(sequences[btn.id])
+        } else {
+          this.dispatchKeyEvent(btn.id)
+        }
+        break
+      }
+      case 'char': {
+        const ch = charKeys[btn.id]
+        if (isTerminal) {
+          this.sendToTerminal(ch)
+        } else {
+          this.insertChar(ch)
+        }
+        break
+      }
+    }
+  }
+
+  renderButton (btn) {
+    const { ctrlActive, altActive } = this.state
+    let cls = 'kb-key'
+    if (btn.type === 'toggle') {
+      const active = btn.id === 'ctrl' ? ctrlActive : altActive
+      cls += active ? ' kb-key-active' : ''
+    }
+    if (btn.id === 'done') cls += ' kb-key-done'
+    if (btn.id === 'backspace') cls += ' kb-key-wide'
+    if (btn.id === 'enter') cls += ' kb-key-enter'
+    return (
+      <button
+        key={btn.id}
+        className={cls}
+        // Use onMouseDown + preventDefault to keep focus on the terminal/input.
+        onMouseDown={(e) => e.preventDefault()}
+        onTouchStart={(e) => e.preventDefault()}
+        onClick={(e) => this.handleButton(btn, e)}
+        type='button'
+      >
+        {btn.label}
+      </button>
+    )
+  }
+
+  render () {
+    if (!this.state.visible) return null
+    const { isTerminal } = this.state
+    return (
+      <div className='kb-accessory-bar'>
+        <div className='kb-accessory-scroll'>
+          {buttonLayout.map(btn => this.renderButton(btn))}
+        </div>
+        {!isTerminal && (
+          <div className='kb-accessory-hint'>
+            Terminal keys active when terminal is focused
+          </div>
+        )}
+      </div>
+    )
+  }
+}
diff --git a/src/client/web-components/keyboard-accessory-bar.styl b/src/client/web-components/keyboard-accessory-bar.styl
new file mode 100644
index 0000000..a1c8307
--- /dev/null
+++ b/src/client/web-components/keyboard-accessory-bar.styl
@@ -0,0 +1,82 @@
+// Keyboard accessory bar — shown above the soft keyboard on mobile/touch
+// devices when any input or the terminal is focused.
+//
+// The bar is position:fixed at the bottom of the visible viewport. With
+// windowSoftInputMode=adjustResize (set in splash-styles.xml), the WebView
+// shrinks when the keyboard appears, so bottom:0 sits right above the keyboard.
+
+.kb-accessory-bar
+  position fixed
+  left 0
+  right 0
+  bottom 0
+  z-index 9998
+  background var(--main)
+  border-top 1px solid var(--border-color, #3a3d42)
+  box-shadow 0 -2px 8px rgba(0, 0, 0, 0.25)
+  user-select none
+  -webkit-user-select none
+  -webkit-tap-highlight-color transparent
+
+.kb-accessory-scroll
+  display flex
+  align-items center
+  gap 2px
+  padding 4px 6px
+  overflow-x auto
+  overflow-y hidden
+  scrollbar-width none
+  -ms-overflow-style none
+  &::-webkit-scrollbar
+    display none
+
+.kb-key
+  flex-shrink 0
+  min-width 36px
+  height 34px
+  padding 0 8px
+  border 1px solid var(--border-color, #3a3d42)
+  border-radius 5px
+  background var(--terminal-background, #1e2024)
+  color var(--text, #cfd6e4)
+  font-size 12px
+  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
+  line-height 1
+  cursor pointer
+  display flex
+  align-items center
+  justify-content center
+  transition background 0.12s, border-color 0.12s
+
+  &:active
+    background var(--primary, #4a90d9)
+    color #fff
+    border-color var(--primary, #4a90d9)
+
+// Highlighted toggle (Ctrl / Alt active)
+.kb-key-active
+  background var(--primary, #4a90d9)
+  color #fff
+  border-color var(--primary, #4a90d9)
+
+.kb-key-done
+  background var(--primary, #4a90d9)
+  color #fff
+  border-color var(--primary, #4a90d9)
+  font-weight 600
+  margin-left 4px
+
+  &:active
+    opacity 0.7
+
+.kb-key-wide
+  min-width 48px
+
+.kb-key-enter
+  min-width 44px
+
+.kb-accessory-hint
+  padding 2px 10px 4px
+  font-size 10px
+  color var(--text-light, #8b909f)
+  text-align center
diff --git a/src/client/web-components/web-main.jsx b/src/client/web-components/web-main.jsx
index df4370c..c550af4 100644
--- a/src/client/web-components/web-main.jsx
+++ b/src/client/web-components/web-main.jsx
@@ -3,12 +3,14 @@ import Login from '../simple-auth/web-login'
 import store from './web-store'
 import FileSelectDialog from '../file-select-dialog/file-select-dialog'
 import Logout from '../simple-auth/logout'
+import KeyboardAccessoryBar from './keyboard-accessory-bar'
 export default function MainEntry () {
   return (
     <ErrorBoundary>
       <Login store={store} />
       <FileSelectDialog store={store} />
       <Logout store={store} />
+      <KeyboardAccessoryBar />
     </ErrorBoundary>
   )
 }