@electerm/electerm-react 5.1.7 → 5.1.16

package/client/common/default-setting.js

@@ -80,6 +80,7 @@ export default {
   disableDeveloperTool: false,
   dragDropBehavior: 'ask',
   switchTabOnHover: false,
+  disableShortcutBar: false,
   leftSideBarIcons: [
     'newBookmark',
     'quickConnect',

package/client/common/theme-defaults.js

@@ -81,7 +81,7 @@ const defaultThemeDarkTerminal = () => {
     background: '#20111b',
     cursor: '#b5bd68',
     cursorAccent: '#1d1f21',
-    selectionBackground: 'rgba(255, 255, 255, 0.3)',
+    selectionBackground: 'rgba(200, 200, 200, 0.6)',
     black: '#575757',
     red: '#FF2C6D',
     green: '#19f9d8',

package/client/components/ai/ai-config-props.js

@@ -51,6 +51,14 @@ export const defaultAIPresets = [
     modelAI: 'openai/gpt-4o-mini',
     authHeaderNameAI: 'Authorization: Bearer'
   },
+  {
+    id: 'orcarouter',
+    nameAI: 'OrcaRouter',
+    baseURLAI: 'https://api.orcarouter.ai/v1',
+    apiPathAI: '/chat/completions',
+    modelAI: 'deepseek/deepseek-v4-flash',
+    authHeaderNameAI: 'Authorization: Bearer'
+  },
   {
     id: 'google',
     nameAI: 'Google Gemini',

package/client/components/main/upgrade.jsx

@@ -361,7 +361,7 @@ export default class Upgrade extends PureComponent {
       <div className={cls}>
         <div className='upgrade-panel-title fix'>
           <span className='fleft'>
-            {e('newVersion')} <b>{remoteVersion} [{releaseInfo.date}]</b>
+            {e('newVersion')} <b>{remoteVersion}{releaseInfo?.date ? ` [${releaseInfo.date}]` : ''}</b>
           </span>
           <span className='fright'>
             <MinusSquareOutlined className='pointer font16 close-upgrade-panel' onClick={this.handleMinimize} />

package/client/components/setting-panel/setting-common.jsx

@@ -608,6 +608,7 @@ export default class SettingCommon extends Component {
             'allowMultiInstance',
             'disableDeveloperTool',
             'switchTabOnHover',
+            'disableShortcutBar',
             'debug'
           ].map(this.renderToggle)
         }

package/client/components/terminal/shortcut-bar-defs.js

@@ -8,7 +8,8 @@ import * as ls from '../../common/safe-local-storage'
 import { shortcutBarLsKey } from '../../common/constants'
 
 // build control bytes at runtime — keeps source free of literal control chars
-const ESC = String.fromCharCode(0x1b)
+// exported so shortcut-bar.jsx can honor DECCKM for arrow / Home / End keys.
+export const ESC = String.fromCharCode(0x1b)
 const DEL = String.fromCharCode(0x7f)
 
 // --- candidate library -----------------------------------------------------
@@ -60,6 +61,69 @@ const punctButtons = punctChars.split('').map(ch => ({
   data: ch
 }))
 
+// --- custom combo builder data ---------------------------------------------
+// Bare keys + modifiers for the edit modal's custom combo builder
+// (shortcut-bar-edit.jsx). Unlike `candidates`, keyOptions holds raw keys
+// (letters, digits, nav, f-keys, punctuation) with no pre-applied modifier —
+// the modal composes Ctrl/Alt/Shift/Meta onto them, so the user can build
+// combos like Ctrl+Shift+C or Alt+Up without typing escape sequences.
+
+// letters carry a precomputed control byte so Ctrl+letter maps to the right
+// control byte (charCode - 96) without recomputing at click time.
+const letterKeys = 'abcdefghijklmnopqrstuvwxyz'.split('').map(ch => ({
+  id: 'key-' + ch,
+  label: ch.toUpperCase(),
+  data: ch,
+  ctrl: String.fromCharCode(ch.charCodeAt(0) - 96)
+}))
+
+const digitKeys = '0123456789'.split('').map(ch => ({
+  id: 'key-' + ch,
+  label: ch,
+  data: ch
+}))
+
+// bare keys (no Ctrl pre-applied) for the combo builder
+const keyOptions = [
+  ...navButtons,
+  ...letterKeys,
+  ...digitKeys,
+  ...fKeys,
+  ...punctButtons
+]
+
+// modifier picklist for the two optional modifier slots in the builder
+const modifierOptions = [
+  { id: 'ctrl', label: 'Ctrl' },
+  { id: 'alt', label: 'Alt' },
+  { id: 'shift', label: 'Shift' },
+  { id: 'meta', label: 'Meta' }
+]
+
+// compose the bytes to send for a (mods, key) combo.
+// Ctrl+letter -> the control byte; Alt -> ESC prefix; Shift+letter -> uppercase
+function buildComboData (mods, key) {
+  const ctrl = mods.includes('ctrl')
+  const alt = mods.includes('alt')
+  const shift = mods.includes('shift')
+  let data = key.data
+  if (ctrl && key.ctrl) {
+    data = key.ctrl
+  } else if (shift && /^[a-z]$/.test(data)) {
+    data = data.toUpperCase()
+  }
+  if (alt) {
+    data = ESC + data
+  }
+  return data
+}
+
+// human-readable label, e.g. mods ['ctrl','shift'] + key A -> "Ctrl+Shift+A"
+function buildComboLabel (mods, key) {
+  const byId = new Map(modifierOptions.map(m => [m.id, m.label]))
+  return [...mods.map(m => byId.get(m) || m), key.label].join('+')
+}
+
 // full library, de-duplicated by id
 const candidates = []
 const seenIds = new Set()
@@ -128,4 +192,10 @@ export function saveActive (arr) {
   ls.setItemJSON(shortcutBarLsKey, arr)
 }
 
-export { candidates }
+export {
+  candidates,
+  keyOptions,
+  modifierOptions,
+  buildComboData,
+  buildComboLabel
+}

package/client/components/terminal/shortcut-bar-edit.jsx

@@ -13,7 +13,7 @@
 
 import { useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Input } from 'antd'
+import { Input, Select } from 'antd'
 import {
   CloseOutlined,
   PlusOutlined,
@@ -22,7 +22,13 @@ import {
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import Modal from '../common/modal'
-import { defaultActive } from './shortcut-bar-defs'
+import {
+  defaultActive,
+  keyOptions,
+  modifierOptions,
+  buildComboData,
+  buildComboLabel
+} from './shortcut-bar-defs'
 
 const e = window.translate
 
@@ -35,42 +41,51 @@ export default function ShortcutBarEdit (props) {
     onSave
   } = props
 
-  const [draft, setDraft] = useState(() => active.map(b => ({ ...b })))
   const [keyword, setKeyword] = useState('')
-  const [customLabel, setCustomLabel] = useState('')
-  const [customData, setCustomData] = useState('')
+  const [customMod1, setCustomMod1] = useState(undefined)
+  const [customMod2, setCustomMod2] = useState(undefined)
+  const [customKey, setCustomKey] = useState(undefined)
+
+  // antd Select portals its dropdown to document.body by default (~z-index
+  // 1050), which renders BEHIND this modal (z-index 1100). Anchor each popup
+  // to its trigger's parent so it stays inside the modal's stacking context.
+  const popupContainer = trigger => trigger.parentElement
 
-  const activeIds = new Set(draft.map(b => b.id))
+  // edits persist immediately — there is no Save/Cancel, so every change calls
+  // onSave to push it live.
+  const activeIds = new Set(active.map(b => b.id))
 
   function handleAddCandidate (btn) {
     if (activeIds.has(btn.id)) {
       return
     }
-    setDraft(prev => [...prev, { ...btn }])
+    onSave([...active, { ...btn }])
   }
 
   function handleRemoveActive (id) {
-    setDraft(prev => prev.filter(b => b.id !== id))
+    onSave(active.filter(b => b.id !== id))
   }
 
   function handleAddCustom () {
-    const label = customLabel.trim()
-    const data = customData
-    if (!label) {
+    if (!customKey) {
+      return
+    }
+    const mods = [customMod1, customMod2].filter(Boolean)
+    const key = keyOptions.find(k => k.id === customKey)
+    if (!key) {
       return
     }
+    const label = buildComboLabel(mods, key)
+    const data = buildComboData(mods, key)
     const id = 'custom-' + label + '-' + Date.now()
-    setDraft(prev => [...prev, { id, label, data, custom: true }])
-    setCustomLabel('')
-    setCustomData('')
+    onSave([...active, { id, label, data, custom: true }])
+    setCustomMod1(undefined)
+    setCustomMod2(undefined)
+    setCustomKey(undefined)
   }
 
   function handleReset () {
-    setDraft(defaultActive())
-  }
-
-  function handleSave () {
-    onSave(draft)
+    onSave(defaultActive())
   }
 
   const kw = keyword.trim().toLowerCase()
@@ -122,20 +137,6 @@ export default function ShortcutBarEdit (props) {
       >
         <ReloadOutlined /> {e('reset')}
       </button>
-      <button
-        type='button'
-        className='custom-modal-cancel-btn'
-        onClick={onCancel}
-      >
-        {e('cancel')}
-      </button>
-      <button
-        type='button'
-        className='custom-modal-ok-btn'
-        onClick={handleSave}
-      >
-        {e('save')}
-      </button>
     </div>
   )
   const sst = e('keyboardShortcuts')
@@ -152,10 +153,10 @@ export default function ShortcutBarEdit (props) {
       <div className='shortcut-edit-section'>
         <div className='shortcut-edit-section-title'>{sst}</div>
         <div className='shortcut-active-list'>
-          {draft.length === 0 && (
+          {active.length === 0 && (
             <div className='shortcut-active-empty'>0 {sst}</div>
           )}
-          {draft.map(renderActive)}
+          {active.map(renderActive)}
         </div>
       </div>
 
@@ -178,21 +179,49 @@ export default function ShortcutBarEdit (props) {
       <div className='shortcut-edit-section'>
         <div className='shortcut-edit-section-title'>+ {sst}</div>
         <div className='shortcut-custom-form'>
-          <Input
-            value={customLabel}
-            onChange={ev => setCustomLabel(ev.target.value)}
-            placeholder={e('label')}
-            className='shortcut-custom-input'
+          <Select
+            value={customMod1}
+            onChange={setCustomMod1}
+            placeholder={e('modifier') + ' (' + e('optional') + ')'}
+            className='shortcut-custom-select'
+            allowClear
+            getPopupContainer={popupContainer}
+            options={modifierOptions.map(m => ({
+              value: m.id,
+              label: m.label,
+              disabled: m.id === customMod2
+            }))}
           />
-          <Input
-            value={customData}
-            onChange={ev => setCustomData(ev.target.value)}
-            placeholder={e('edit')}
-            className='shortcut-custom-input'
+          <Select
+            value={customMod2}
+            onChange={setCustomMod2}
+            placeholder={e('modifier') + ' (' + e('optional') + ')'}
+            className='shortcut-custom-select'
+            allowClear
+            getPopupContainer={popupContainer}
+            options={modifierOptions.map(m => ({
+              value: m.id,
+              label: m.label,
+              disabled: m.id === customMod1
+            }))}
+          />
+          <Select
+            value={customKey}
+            onChange={setCustomKey}
+            placeholder={e('key')}
+            className='shortcut-custom-select shortcut-custom-key'
+            allowClear
+            showSearch
+            getPopupContainer={popupContainer}
+            options={keyOptions.map(k => ({
+              value: k.id,
+              label: k.label
+            }))}
           />
           <button
             type='button'
             className='custom-modal-ok-btn shortcut-custom-add'
+            disabled={!customKey}
             onClick={handleAddCustom}
           >
             <PlusOutlined /> {e('add')}

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -1,16 +1,42 @@
 /**
  * lazy entry for shortcut-bar.
  *
- * The bar only makes sense on touch devices (it exists to compensate for the
- * lack of a physical keyboard when the system input panel is shown). On
- * non-touch devices we render nothing AND never import the real component, so
- * its code (and the antd/icon deps it pulls in) stays out of the main bundle.
+ * The bar compensates for the missing physical keyboard while the system
+ * input panel (on-screen keyboard) is shown over a terminal. Capability
+ * probes like `(pointer: coarse)` / `maxTouchPoints` are unreliable here —
+ * remote-control clients and some touch-capable laptops report touch even
+ * though tapping the terminal never brings up a soft keyboard.
+ *
+ * So instead of guessing, we react to the real signal: the soft keyboard
+ * shrinking `window.visualViewport`. Until that is observed we render nothing
+ * AND never import the real component, so its code (and the antd/icon deps it
+ * pulls in) stays out of the main bundle on every device that doesn't
+ * actually show a keyboard.
+ *
+ * Detection is cross-platform:
+ *   - visualViewport.height always reflects the *visible* area and shrinks
+ *     when the keyboard opens on BOTH iOS and Android.
+ *   - the layout viewport (window.innerHeight) is what differs: iOS keeps it
+ *     fixed, Android resizes it too — so the naive innerHeight−visualViewport
+ *     gap works on iOS but is ~0 on Android. We therefore compare
+ *     visualViewport.height against a baseline captured at the moment the
+ *     terminal input is focused (i.e. before the keyboard opens), which holds
+ *     the full pre-keyboard height on both platforms.
  */
 
-import { lazy, Suspense } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 
 const ShortcutBar = lazy(() => import('./shortcut-bar'))
 
+// minimum height (px) the visual viewport must lose for us to treat it as
+// "the soft keyboard is now covering part of the screen". A soft keyboard is
+// typically ≥150px; a browser address-bar show/hide is well under this.
+const KEYBOARD_HEIGHT = 120
+
+// kept as a coarse capability fallback for engines without visualViewport.
+// Modern Chromium (Electron) always exposes window.visualViewport, so this is
+// effectively only reached on very old runtimes — where remote-control
+// misreporting is not a concern.
 export function isTouchDevice () {
   if (typeof window === 'undefined' || typeof navigator === 'undefined') {
     return false
@@ -23,7 +49,67 @@ export function isTouchDevice () {
 }
 
 export default function ShortcutBarEntry (props) {
-  if (!isTouchDevice()) {
+  // mount the lazy bar only after a soft keyboard has been seen at least once,
+  // so its code (and antd/icon deps) stays out of the main bundle on devices
+  // that never show one (desktops, remote-control clients mis-reported as
+  // touch, etc.).
+  //
+  // opt out entirely when the user has disabled the shortcut bar in common
+  // settings — bail before any listener is attached or component imported.
+  const { store } = props
+  const disabled = store.config.disableShortcutBar
+  const [keyboardSeen, setKeyboardSeen] = useState(() => {
+    if (disabled || typeof window === 'undefined' || !window.visualViewport) {
+      return disabled ? false : isTouchDevice()
+    }
+    return false
+  })
+
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (!vv) {
+      return
+    }
+    // baseline = the visual viewport captured the last time focus moved into a
+    // terminal. The keyboard opens *after* that focus, so this baseline holds
+    // the pre-keyboard (full) size, and the subsequent resize lets us measure
+    // exactly how much the keyboard took — on both iOS and Android.
+    let baseline = { height: vv.height, width: vv.width }
+
+    function onFocusIn (ev) {
+      const el = ev.target
+      if (el && el.closest && el.closest('.term-wrap')) {
+        baseline = { height: vv.height, width: vv.width }
+      }
+    }
+
+    function onResize () {
+      // ignore viewport changes that also changed width (rotation / split) —
+      // a keyboard changes height only.
+      const sameWidth = Math.abs(vv.width - baseline.width) < 20
+      if (sameWidth && baseline.height - vv.height > KEYBOARD_HEIGHT) {
+        setKeyboardSeen(true)
+        // The user is focused in a terminal with the keyboard up — they need
+        // the bar right now. Set visibility here rather than waiting for the
+        // focus/pointer listener inside the (just-mounted) ShortcutBar, which
+        // would otherwise miss the focusin that already fired before it
+        // mounted — leaving the bar's reserved space empty until a 2nd tap.
+        const { store } = window
+        if (store && store.inActiveTerminal) {
+          store.shortcutBarVisible = true
+        }
+      }
+    }
+
+    document.addEventListener('focusin', onFocusIn)
+    vv.addEventListener('resize', onResize)
+    return () => {
+      document.removeEventListener('focusin', onFocusIn)
+      vv.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  if (disabled || !keyboardSeen) {
     return null
   }
   return (

package/client/components/terminal/shortcut-bar.jsx

@@ -22,17 +22,43 @@ import { DownOutlined, EditOutlined } from '@ant-design/icons'
 import { refs } from '../common/ref'
 import { shortcutBarHeight } from '../../common/constants'
 import ShortcutBarEdit from './shortcut-bar-edit'
-import { candidates, loadActive, saveActive } from './shortcut-bar-defs'
+import { candidates, loadActive, saveActive, ESC } from './shortcut-bar-defs'
 import './shortcut-bar.styl'
 
 const e = window.translate
 
+// Arrow / Home / End keys have two wire forms: the normal CSI form (ESC [ x)
+// and the application SS3 form (ESC O x). Which one a keypress should produce
+// is decided by the terminal's DECCKM (Application Cursor Keys) state, which
+// the remote program sets. Some shells accept both forms (bash/readline), but
+// stricter line editors such as OpenWrt's busybox ash only recognize the form
+// matching the current mode — so always sending the CSI form breaks arrow
+// keys there. A real keyboard switches on the mode; this does the same.
+const appCursorMap = {
+  [ESC + '[A']: ESC + 'OA', // ↑
+  [ESC + '[B']: ESC + 'OB', // ↓
+  [ESC + '[C']: ESC + 'OC', // →
+  [ESC + '[D']: ESC + 'OD', // ←
+  [ESC + '[H']: ESC + 'OH', // Home
+  [ESC + '[F']: ESC + 'OF' // End
+}
+
 function sendToTerminal (data) {
   const { store } = window
   const term = refs.get('term-' + store.activeTabId)
   if (term && typeof term.runQuickCommand === 'function') {
-    term.runQuickCommand(data, true)
+    const resolved = resolveCursorMode(data, term)
+    term.runQuickCommand(resolved, true)
+  }
+}
+
+// honor the active terminal's DECCKM state for the cursor / Home / End keys
+function resolveCursorMode (data, term) {
+  const app = appCursorMap[data]
+  if (app && term?.term?.modes?.applicationCursorKeysMode) {
+    return app
   }
+  return data
 }
 
 function ShortcutBar (props) {
@@ -85,10 +111,10 @@ function ShortcutBar (props) {
     store.shortcutBarVisible = false
   }
 
+  // edits inside the modal persist live; the modal closes via its own X button.
   function handleSave (next) {
     setButtons(next)
     saveActive(next)
-    setEditing(false)
   }
 
   function renderButton (b, i) {

package/client/components/terminal/shortcut-bar.styl

@@ -171,12 +171,20 @@
   gap 8px
   align-items center
   flex-wrap wrap
+  position relative
 .shortcut-search-input
   flex 1
   min-width 160px
 .shortcut-custom-input
   flex 1
   min-width 120px
+.shortcut-custom-select
+  flex 1
+  min-width 120px
+  width 120px
+.shortcut-custom-key
+  min-width 110px
+  width 110px
 .shortcut-custom-add
   height 32px
   white-space nowrap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.1.7",
+  "version": "5.1.16",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",