pinokiod 3.270.0 → 3.272.0

package/server/public/terminal-settings.js

@@ -59,17 +59,639 @@
   const THEME_KEY_ALIASES = {
     selection: 'selectionBackground'
   };
+  const DIRECT_TYPING_PREF_KEY = 'pinokio.terminal.directTyping';
 
   function isFiniteNumber(value) {
     return typeof value === 'number' && Number.isFinite(value);
   }
 
+  class TerminalMobileInput {
+    constructor(settings) {
+      this.settings = settings;
+      this.runnerButtons = new WeakMap();
+      this.termRecords = new Map();
+      this.modal = null;
+      this.backdrop = null;
+      this.textarea = null;
+      this.newlineCheckbox = null;
+      this.statusElement = null;
+      this.statusTimer = null;
+      this.modalOpen = false;
+      this.lastTrigger = null;
+      this.tapTrackers = new WeakMap();
+      this.supportsPointer = typeof window !== 'undefined' && 'PointerEvent' in window;
+      this.escapeHandler = (event) => {
+        if (!event || event.key !== 'Escape' || !this.modalOpen) {
+          return;
+        }
+        event.preventDefault();
+        this.closeModal();
+      };
+      const stored = this.loadDirectTypingPreference();
+      if (stored === null) {
+        this.directTypingEnabled = !this.shouldPreferModalInput();
+      } else {
+        this.directTypingEnabled = stored;
+      }
+    }
+
+    shouldPreferModalInput() {
+      if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        try {
+          if (window.matchMedia('(pointer: coarse)').matches) {
+            return true;
+          }
+        } catch (_) {}
+        try {
+          if (window.matchMedia('(max-width: 768px)').matches) {
+            return true;
+          }
+        } catch (_) {}
+      }
+      if (typeof navigator !== 'undefined') {
+        const ua = navigator.userAgent || '';
+        if (/Mobi|Android|iPhone|iPad|Tablet/i.test(ua)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    loadDirectTypingPreference() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return null;
+      }
+      try {
+        const stored = window.localStorage.getItem(DIRECT_TYPING_PREF_KEY);
+        if (stored === '1') {
+          return true;
+        }
+        if (stored === '0') {
+          return false;
+        }
+      } catch (_) {}
+      return null;
+    }
+
+    saveDirectTypingPreference(value) {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      try {
+        if (typeof value === 'boolean') {
+          window.localStorage.setItem(DIRECT_TYPING_PREF_KEY, value ? '1' : '0');
+        } else {
+          window.localStorage.removeItem(DIRECT_TYPING_PREF_KEY);
+        }
+      } catch (_) {}
+    }
+
+    registerTerminal(term) {
+      if (!term || this.termRecords.has(term)) {
+        return;
+      }
+      const record = {
+        term,
+        textarea: null,
+        renderDisposable: null
+      };
+      this.termRecords.set(term, record);
+      if (!term._pinokioMobileInputPatchedOpen && typeof term.open === 'function') {
+        const originalOpen = term.open;
+        const mobileInput = this;
+        term.open = function patchedOpen(...args) {
+          const result = originalOpen.apply(this, args);
+          try {
+            mobileInput.configureTapListener(term);
+          } catch (_) {}
+          return result;
+        };
+        term._pinokioMobileInputPatchedOpen = true;
+      }
+      const capture = () => {
+        if (!this.termRecords.has(term)) {
+          return true;
+        }
+        const textarea = this.getTermTextarea(term);
+        if (!textarea) {
+          return false;
+        }
+        record.textarea = textarea;
+        this.applyInputPolicy(textarea);
+        return true;
+      };
+      if (!capture()) {
+        if (typeof term.onRender === 'function') {
+          record.renderDisposable = term.onRender(() => {
+            if (capture() && record.renderDisposable && typeof record.renderDisposable.dispose === 'function') {
+              record.renderDisposable.dispose();
+              record.renderDisposable = null;
+            }
+          });
+        }
+        if (!record.renderDisposable) {
+          let attempts = 0;
+          const poll = () => {
+            if (!this.termRecords.has(term) || record.textarea) {
+              return;
+            }
+            attempts += 1;
+            if (capture()) {
+              return;
+            }
+            if (attempts < 60) {
+              setTimeout(poll, 100);
+            }
+          };
+          setTimeout(poll, 50);
+        }
+      }
+      this.configureTapListener(term);
+    }
+
+    unregisterTerminal(term) {
+      const record = this.termRecords.get(term);
+      if (!record) {
+        return;
+      }
+      if (record.renderDisposable && typeof record.renderDisposable.dispose === 'function') {
+        record.renderDisposable.dispose();
+      }
+      this.termRecords.delete(term);
+      this.removeTapListener(term);
+    }
+
+    getTermTextarea(term) {
+      if (!term) {
+        return null;
+      }
+      if (term.textarea && typeof term.textarea.focus === 'function') {
+        return term.textarea;
+      }
+      if (term._core && term._core._textarea && typeof term._core._textarea.focus === 'function') {
+        return term._core._textarea;
+      }
+      return null;
+    }
+
+    applyInputPolicy(textarea) {
+      if (!textarea) {
+        return;
+      }
+      if (this.directTypingEnabled) {
+        textarea.removeAttribute('inputmode');
+        textarea.removeAttribute('readonly');
+        textarea.removeAttribute('aria-readonly');
+      } else {
+        textarea.setAttribute('inputmode', 'none');
+        textarea.setAttribute('readonly', 'readonly');
+        textarea.setAttribute('aria-readonly', 'true');
+      }
+    }
+
+    applyPolicyToAll() {
+      this.termRecords.forEach((record) => {
+        if (record && record.textarea) {
+          this.applyInputPolicy(record.textarea);
+        }
+        if (record && record.term) {
+          this.configureTapListener(record.term);
+        }
+      });
+    }
+
+    setDirectTypingEnabled(enabled) {
+      const next = Boolean(enabled);
+      if (next === this.directTypingEnabled) {
+        return;
+      }
+      this.directTypingEnabled = next;
+      this.saveDirectTypingPreference(next);
+      this.applyPolicyToAll();
+    }
+
+    attachKeyboardButton(runner, host) {
+      if (!runner || this.runnerButtons.has(runner)) {
+        return;
+      }
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'btn terminal-keyboard-button';
+      button.innerHTML = '<i class="fa-solid fa-keyboard"></i> Input';
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        this.lastTrigger = button;
+        this.openModal();
+      });
+      if (host && host.firstChild) {
+        host.insertBefore(button, host.firstChild);
+      } else if (host) {
+        host.appendChild(button);
+      } else {
+        runner.appendChild(button);
+      }
+      this.runnerButtons.set(runner, { button });
+    }
+
+    ensureModalElements() {
+      if (this.modal || typeof document === 'undefined' || !document.body) {
+        return;
+      }
+      const backdrop = document.createElement('div');
+      backdrop.className = 'terminal-keyboard-backdrop';
+      backdrop.hidden = true;
+
+      const modal = document.createElement('div');
+      modal.className = 'terminal-keyboard-modal';
+      modal.setAttribute('role', 'dialog');
+      modal.setAttribute('aria-modal', 'true');
+      modal.setAttribute('aria-labelledby', 'terminal-keyboard-title');
+      modal.hidden = true;
+
+
+
+      const form = document.createElement('form');
+      form.className = 'terminal-keyboard-form';
+      form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        this.submitInput();
+      });
+
+      const textarea = document.createElement('textarea');
+      textarea.className = 'terminal-keyboard-textarea';
+      textarea.placeholder = 'Enter command';
+      textarea.rows = 4;
+      textarea.autocapitalize = 'off';
+      textarea.autocomplete = 'off';
+      textarea.spellcheck = false;
+      textarea.addEventListener('keydown', (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+          event.preventDefault();
+          this.submitInput();
+        }
+      });
+
+      const options = document.createElement('div');
+      options.className = 'terminal-keyboard-options';
+
+      const newlineOption = document.createElement('label');
+      newlineOption.className = 'terminal-keyboard-option';
+      const newlineCheckbox = document.createElement('input');
+      newlineCheckbox.type = 'checkbox';
+      newlineCheckbox.className = 'terminal-keyboard-checkbox';
+      newlineCheckbox.checked = true;
+      const newlineText = document.createElement('span');
+      newlineText.textContent = 'Append newline on send';
+      newlineOption.appendChild(newlineCheckbox);
+      newlineOption.appendChild(newlineText);
+
+      options.appendChild(newlineOption);
+
+      const status = document.createElement('div');
+      status.className = 'terminal-keyboard-status';
+      status.setAttribute('role', 'status');
+      status.setAttribute('aria-live', 'polite');
+
+      const actions = document.createElement('div');
+      actions.className = 'terminal-keyboard-actions';
+
+      const actionsLeft = document.createElement('div');
+      actionsLeft.className = 'terminal-keyboard-actions-left';
+
+      const directTypingButton = document.createElement('button');
+      directTypingButton.type = 'button';
+      directTypingButton.className = 'btn terminal-keyboard-direct-button';
+      directTypingButton.innerHTML = '<i class="fa-solid fa-keyboard"></i> Use Terminal';
+      directTypingButton.addEventListener('click', () => this.enableDirectTypingFromModal());
+      actionsLeft.appendChild(directTypingButton);
+
+      const actionsRight = document.createElement('div');
+      actionsRight.className = 'terminal-keyboard-actions-right';
+
+      const cancelButton = document.createElement('button');
+      cancelButton.type = 'button';
+      cancelButton.className = 'btn2';
+      cancelButton.textContent = 'Cancel';
+      cancelButton.addEventListener('click', () => this.closeModal());
+
+      const sendButton = document.createElement('button');
+      sendButton.type = 'submit';
+      sendButton.className = 'btn terminal-keyboard-send';
+      sendButton.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Send';
+
+      actionsRight.appendChild(cancelButton);
+      actionsRight.appendChild(sendButton);
+
+      actions.appendChild(actionsLeft);
+      actions.appendChild(actionsRight);
+
+      form.appendChild(textarea);
+      form.appendChild(options);
+      form.appendChild(status);
+      form.appendChild(actions);
+
+      modal.appendChild(form);
+
+      backdrop.addEventListener('click', () => this.closeModal());
+
+      document.body.appendChild(backdrop);
+      document.body.appendChild(modal);
+
+      this.modal = modal;
+      this.backdrop = backdrop;
+      this.textarea = textarea;
+      this.newlineCheckbox = newlineCheckbox;
+      this.statusElement = status;
+    }
+
+    openModal() {
+      if (typeof document === 'undefined') {
+        return;
+      }
+      if (!this.modal) {
+        this.ensureModalElements();
+      }
+      if (!this.modal || !this.backdrop) {
+        return;
+      }
+      this.setDirectTypingEnabled(false);
+      if (this.modalOpen) {
+        if (this.textarea) {
+          this.textarea.focus();
+        }
+        return;
+      }
+      this.modal.hidden = false;
+      this.backdrop.hidden = false;
+      this.modalOpen = true;
+      document.body.classList.add('terminal-keyboard-open');
+      document.addEventListener('keydown', this.escapeHandler, true);
+      this.setStatus('');
+      if (this.textarea) {
+        this.textarea.value = '';
+        this.textarea.focus();
+      }
+    }
+
+    closeModal(options) {
+      const opts = options || {};
+      if (!this.modalOpen) {
+        return;
+      }
+      this.modalOpen = false;
+      if (this.modal) {
+        this.modal.hidden = true;
+      }
+      if (this.backdrop) {
+        this.backdrop.hidden = true;
+      }
+      if (typeof document !== 'undefined') {
+        document.body.classList.remove('terminal-keyboard-open');
+        document.removeEventListener('keydown', this.escapeHandler, true);
+      }
+      if (this.textarea) {
+        this.textarea.blur();
+        this.textarea.value = '';
+      }
+      this.setStatus('');
+      if (opts.focusTrigger !== false && this.lastTrigger && typeof document !== 'undefined' && document.body && document.body.contains(this.lastTrigger)) {
+        try {
+          this.lastTrigger.focus();
+        } catch (_) {}
+      }
+      this.lastTrigger = null;
+      this.configureTapListenerForAll();
+    }
+
+    setStatus(message, tone) {
+      if (!this.statusElement) {
+        return;
+      }
+      if (this.statusTimer) {
+        clearTimeout(this.statusTimer);
+        this.statusTimer = null;
+      }
+      const text = typeof message === 'string' ? message : '';
+      this.statusElement.textContent = text;
+      if (tone) {
+        this.statusElement.dataset.tone = tone;
+      } else {
+        delete this.statusElement.dataset.tone;
+      }
+      if (text) {
+        this.statusElement.classList.add('visible');
+        this.statusTimer = setTimeout(() => {
+          if (this.statusElement) {
+            this.statusElement.classList.remove('visible');
+            this.statusElement.textContent = '';
+            delete this.statusElement.dataset.tone;
+          }
+          this.statusTimer = null;
+        }, tone === 'error' ? 5000 : 2000);
+      } else {
+        this.statusElement.classList.remove('visible');
+      }
+    }
+
+    focusPrimaryTerminalInput() {
+      const term = this.settings && typeof this.settings.getPrimaryTerminal === 'function'
+        ? this.settings.getPrimaryTerminal()
+        : null;
+      if (!term) {
+        return false;
+      }
+      const textarea = this.getTermTextarea(term);
+      if (textarea) {
+        try {
+          textarea.focus();
+          return true;
+        } catch (_) {}
+      }
+      if (typeof term.focus === 'function') {
+        try {
+          term.focus();
+          return true;
+        } catch (_) {}
+      }
+      return false;
+    }
+
+    enableDirectTypingFromModal() {
+      this.setDirectTypingEnabled(true);
+      this.closeModal({ focusTrigger: false });
+      this.focusPrimaryTerminalInput();
+    }
+
+    submitInput() {
+      if (!this.textarea) {
+        return;
+      }
+      const value = this.textarea.value || '';
+      const appendNewline = this.newlineCheckbox ? this.newlineCheckbox.checked : true;
+      if (!value && !appendNewline) {
+        this.setStatus('Enter text or enable newline.', 'error');
+        return;
+      }
+      const success = this.dispatchToTerminal(value, appendNewline);
+      if (!success) {
+        this.setStatus('Terminal is not ready yet.', 'error');
+        return;
+      }
+      this.textarea.value = '';
+      this.setStatus('Sent to terminal.', 'success');
+      this.closeModal();
+    }
+
+    dispatchToTerminal(value, appendNewline) {
+      const term = this.settings && typeof this.settings.getPrimaryTerminal === 'function'
+        ? this.settings.getPrimaryTerminal()
+        : null;
+      if (!term) {
+        return false;
+      }
+      let payload = typeof value === 'string' ? value : '';
+      if (payload) {
+        payload = payload.replace(/\r\n/g, '\r').replace(/\n/g, '\r');
+      }
+      const wantsNewline = Boolean(appendNewline);
+      if (wantsNewline) {
+        payload = payload.replace(/\r+$/, '');
+      }
+      const hasText = Boolean(payload);
+      if (!hasText && !wantsNewline) {
+        return false;
+      }
+      if (hasText && !this.injectIntoTerminal(term, payload)) {
+        return false;
+      }
+      if (wantsNewline) {
+        setTimeout(() => this.injectIntoTerminal(term, '\r'), 100);
+      }
+      return true;
+    }
+
+    injectIntoTerminal(term, payload) {
+      if (!term) {
+        return false;
+      }
+      let dispatched = false;
+      const coreService = term.coreService
+        || (term._core && (term._core.coreService || term._core._coreService))
+        || null;
+      if (coreService && typeof coreService.triggerDataEvent === 'function') {
+        coreService.triggerDataEvent(payload, true);
+        dispatched = true;
+      } else if (term._core && term._core._onData && typeof term._core._onData.fire === 'function') {
+        term._core._onData.fire(payload);
+        dispatched = true;
+      } else if (term._onData && typeof term._onData.fire === 'function') {
+        term._onData.fire(payload);
+        dispatched = true;
+      }
+      if (!dispatched) {
+        return false;
+      }
+      if (typeof term.focus === 'function') {
+        term.focus();
+      }
+      return true;
+    }
+
+    configureTapListener(term) {
+      if (!term) {
+        return;
+      }
+      const node = term.element || term._core && term._core._terminalDiv || term._core && term._core.element || null;
+      if (!node) {
+        return;
+      }
+      if (this.directTypingEnabled) {
+        this.removeTapListener(term);
+        return;
+      }
+      if (this.tapTrackers.has(term)) {
+        return;
+      }
+      const tracker = {
+        lastTime: 0,
+        lastX: 0,
+        lastY: 0,
+        handler: null,
+        eventName: this.supportsPointer ? 'pointerdown' : 'touchstart'
+      };
+      const handlePointerDown = (event) => {
+        if (!event) {
+          return;
+        }
+        if (this.supportsPointer) {
+          const pointerType = event.pointerType;
+          if (pointerType && pointerType !== 'touch' && pointerType !== 'pen') {
+            return;
+          }
+        } else if (event.touches && event.touches.length !== 1) {
+          return;
+        }
+        const pointSource = this.supportsPointer ? event : (event.touches && event.touches[0]);
+        const pointX = pointSource && typeof pointSource.clientX === 'number' ? pointSource.clientX : 0;
+        const pointY = pointSource && typeof pointSource.clientY === 'number' ? pointSource.clientY : 0;
+        const now = Date.now();
+        const delta = now - tracker.lastTime;
+        const distance = Math.hypot(pointX - tracker.lastX, pointY - tracker.lastY);
+        if (delta < 320 && distance < 40) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.openModalFromGesture();
+        }
+        tracker.lastTime = now;
+        tracker.lastX = pointX;
+        tracker.lastY = pointY;
+      };
+      node.addEventListener(tracker.eventName, handlePointerDown, { passive: false });
+      tracker.handler = handlePointerDown;
+      tracker.node = node;
+      this.tapTrackers.set(term, tracker);
+    }
+
+    configureTapListenerForAll() {
+      this.termRecords.forEach((record) => {
+        if (record && record.term) {
+          this.configureTapListener(record.term);
+        }
+      });
+    }
+
+    removeTapListener(term) {
+      if (!term) {
+        return;
+      }
+      const tracker = this.tapTrackers.get(term);
+      if (!tracker) {
+        return;
+      }
+      if (tracker.node && tracker.handler) {
+        const eventName = tracker.eventName || (this.supportsPointer ? 'pointerdown' : 'touchstart');
+        tracker.node.removeEventListener(eventName, tracker.handler, { passive: false });
+      }
+      this.tapTrackers.delete(term);
+    }
+
+    openModalFromGesture() {
+      this.lastTrigger = null;
+      this.openModal();
+    }
+  }
+
   class TerminalSettings {
     constructor() {
       this.preferences = this.loadPreferences();
       this.terminals = new Set();
       this.menus = new Set();
       this.styleElement = null;
+      this.mobileInput = typeof TerminalMobileInput === 'function'
+        ? new TerminalMobileInput(this)
+        : null;
+      this.forceResizeButtons = new WeakMap();
+      this.forceResizeHandler = null;
       this.currentFontFamily = typeof this.preferences.fontFamily === 'string' ? this.preferences.fontFamily.trim() : '';
       if (typeof document !== 'undefined') {
         const ready = document.readyState;
@@ -191,10 +813,16 @@
       }
       this.terminals.add(term);
       this.applyPreferences(term);
+      if (this.mobileInput) {
+        this.mobileInput.registerTerminal(term);
+      }
       if (!term._pinokioPatchedDispose && typeof term.dispose === 'function') {
         const dispose = term.dispose.bind(term);
         term.dispose = (...args) => {
           this.terminals.delete(term);
+          if (this.mobileInput) {
+            this.mobileInput.unregisterTerminal(term);
+          }
           return dispose(...args);
         };
         term._pinokioPatchedDispose = true;
@@ -396,10 +1024,6 @@
       }
       const family = typeof this.preferences.fontFamily === 'string' ? this.preferences.fontFamily.trim() : '';
       const size = isFiniteNumber(this.preferences.fontSize) ? this.preferences.fontSize : null;
-      if (!family && !size) {
-        this.removeStyleElement();
-        return;
-      }
       const style = this.ensureStyleElement();
       if (!style) {
         return;
@@ -413,14 +1037,17 @@
         '.xterm .xterm-cursor-layer',
         '.xterm .xterm-char-measure-element'
       ];
-      const rules = [];
+      const declarations = [
+        'font-variant-ligatures: none !important',
+        'font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "rlig" 0 !important'
+      ];
       if (family) {
-        rules.push(`${selectors.join(', ')} { font-family: ${family} !important; }`);
+        declarations.push(`font-family: ${family} !important`);
       }
       if (size) {
-        rules.push(`${selectors.join(', ')} { font-size: ${size}px !important; }`);
+        declarations.push(`font-size: ${size}px !important`);
       }
-      style.textContent = rules.join('\n');
+      style.textContent = `${selectors.join(', ')} { ${declarations.join('; ')}; }`;
     }
 
     sanitizeTheme(raw, allowUnknown) {
@@ -592,6 +1219,82 @@
 
     warnNonMonospace() {}
 
+    ensureRunnerUtilities(runner) {
+      if (typeof document === 'undefined' || !runner) {
+        return null;
+      }
+      let container = runner.querySelector('.terminal-runner-utilities');
+      if (container) {
+        return container;
+      }
+      container = document.createElement('div');
+      container.className = 'terminal-runner-utilities';
+      container.setAttribute('role', 'group');
+      container.setAttribute('aria-label', 'Terminal controls');
+      runner.appendChild(container);
+      return container;
+    }
+
+    setForceResizeHandler(handler) {
+      if (typeof handler === 'function') {
+        this.forceResizeHandler = handler;
+      } else {
+        this.forceResizeHandler = null;
+      }
+    }
+
+    requestForceResize(context) {
+      if (typeof this.forceResizeHandler === 'function') {
+        try {
+          this.forceResizeHandler(context || null);
+          return true;
+        } catch (error) {
+          if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+            console.warn('Pinokio: force resize handler failed', error);
+          }
+        }
+      }
+      return false;
+    }
+
+    attachForceResizeButton(runner, host) {
+      if (typeof document === 'undefined' || !runner || !host || this.forceResizeButtons.has(runner)) {
+        return;
+      }
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'btn terminal-resize-button';
+      button.innerHTML = '<i class="fa-solid fa-expand"></i> Resize';
+      button.title = 'Resize to this window';
+      button.addEventListener('click', (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        const handled = this.requestForceResize({ runner });
+        if (!handled && typeof window !== 'undefined' && typeof window.dispatchEvent === 'function') {
+          try {
+            if (typeof window.CustomEvent === 'function') {
+              window.dispatchEvent(new window.CustomEvent('pinokio-terminal-force-resize', {
+                detail: { runner }
+              }));
+            } else if (typeof document !== 'undefined' && typeof document.createEvent === 'function') {
+              const legacyEvent = document.createEvent('CustomEvent');
+              legacyEvent.initCustomEvent('pinokio-terminal-force-resize', true, true, { runner });
+              window.dispatchEvent(legacyEvent);
+            }
+          } catch (_) {}
+        }
+      });
+      const configBlock = host.querySelector('.terminal-config');
+      if (configBlock && configBlock.parentNode === host) {
+        host.insertBefore(button, configBlock);
+      } else {
+        host.appendChild(button);
+      }
+      this.forceResizeButtons.set(runner, { button });
+    }
+
     initRunnerMenus() {
       if (typeof document === 'undefined') {
         return;
@@ -609,10 +1312,18 @@
           return;
         }
         runner.dataset.terminalConfigAttached = 'true';
+        const utilities = this.ensureRunnerUtilities(runner);
         const menu = this.createMenu(runner);
+        if (utilities && menu && menu.wrapper) {
+          utilities.appendChild(menu.wrapper);
+        }
         if (menu) {
           this.menus.add(menu);
         }
+        if (this.mobileInput) {
+          this.mobileInput.attachKeyboardButton(runner, utilities);
+        }
+        this.attachForceResizeButton(runner, utilities);
       });
     }
 
@@ -626,7 +1337,7 @@
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'btn terminal-config-button';
-      button.innerHTML = '<i class="fa-solid fa-sliders"></i> Configure';
+      button.innerHTML = '<i class="fa-solid fa-sliders"></i>';
       button.setAttribute('aria-haspopup', 'true');
       button.setAttribute('aria-expanded', 'false');
 
@@ -1119,6 +1830,9 @@
 
   const settings = new TerminalSettings();
   window.PinokioTerminalSettings = settings;
+  if (typeof window !== 'undefined') {
+    window.PinokioTerminalKeyboard = settings && settings.mobileInput ? settings.mobileInput : null;
+  }
 
   if (typeof document !== 'undefined') {
     const readyState = document.readyState;