@electerm/electerm-react 5.0.8 → 5.1.7

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

@@ -0,0 +1,150 @@
+/**
+ * shortcut-bar
+ *
+ * On touch devices, tapping a terminal pops the system input panel.
+ * Without a physical keyboard, modifier / function keys are hard to type, so
+ * this renders a slim, horizontally-scrollable bar pinned just outside the
+ * page content (its space is reserved by layout.jsx, so it never overlaps the
+ * terminal, footer or any other UI).
+ *
+ *   - first (fixed) button collapses the bar
+ *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
+ *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *
+ * Only loaded on touch devices — see shortcut-bar-entry.jsx.
+ * Data + persistence live in shortcut-bar-defs.js.
+ */
+
+import { auto } from 'manate/react'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+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 './shortcut-bar.styl'
+
+const e = window.translate
+
+function sendToTerminal (data) {
+  const { store } = window
+  const term = refs.get('term-' + store.activeTabId)
+  if (term && typeof term.runQuickCommand === 'function') {
+    term.runQuickCommand(data, true)
+  }
+}
+
+function ShortcutBar (props) {
+  const { store } = props
+  const [buttons, setButtons] = useState(loadActive)
+  const [editing, setEditing] = useState(false)
+
+  // show the bar whenever a terminal becomes active / gets focused,
+  // hide it when the active tab is not a terminal.
+  useEffect(() => {
+    store.shortcutBarVisible = !!store.inActiveTerminal
+  }, [store.activeTabId, store.inActiveTerminal])
+
+  useEffect(() => {
+    function onTerminalFocus (ev) {
+      const el = ev.target
+      if (el && el.closest && el.closest('.term-wrap')) {
+        if (window.store.inActiveTerminal) {
+          window.store.shortcutBarVisible = true
+        }
+      }
+    }
+    document.addEventListener('focusin', onTerminalFocus)
+    document.addEventListener('pointerdown', onTerminalFocus)
+    return () => {
+      document.removeEventListener('focusin', onTerminalFocus)
+      document.removeEventListener('pointerdown', onTerminalFocus)
+    }
+  }, [])
+
+  // reserve layout space + lift the footer while the bar is shown.
+  // expose the bar height as a CSS var so the .styl + footer-lift rule stay
+  // in sync with the shortcutBarHeight constant consumed by layout.jsx.
+  useEffect(() => {
+    const on = !!store.shortcutBarVisible
+    document.body.classList.toggle('shortcut-bar-on', on)
+    if (on) {
+      document.documentElement.style.setProperty(
+        '--shortcut-bar-h',
+        shortcutBarHeight + 'px'
+      )
+    }
+    return () => {
+      document.body.classList.remove('shortcut-bar-on')
+      document.documentElement.style.removeProperty('--shortcut-bar-h')
+    }
+  }, [store.shortcutBarVisible])
+
+  function handleClose () {
+    store.shortcutBarVisible = false
+  }
+
+  function handleSave (next) {
+    setButtons(next)
+    saveActive(next)
+    setEditing(false)
+  }
+
+  function renderButton (b, i) {
+    return (
+      <button
+        type='button'
+        key={b.id + '-' + i}
+        className='shortcut-bar-btn'
+        onClick={() => sendToTerminal(b.data)}
+      >
+        {b.label}
+      </button>
+    )
+  }
+
+  if (!store.shortcutBarVisible) {
+    return null
+  }
+
+  return createPortal(
+    <div className='shortcut-bar' role='toolbar'>
+      <div className='shortcut-bar-fixed'>
+        <button
+          type='button'
+          className='shortcut-bar-icon-btn'
+          title={e('close')}
+          onClick={handleClose}
+        >
+          <DownOutlined />
+        </button>
+        <button
+          type='button'
+          className='shortcut-bar-icon-btn'
+          title={e('edit')}
+          onClick={() => setEditing(true)}
+        >
+          <EditOutlined />
+        </button>
+      </div>
+      <div className='shortcut-bar-scroll'>
+        {buttons.map(renderButton)}
+      </div>
+      {
+        editing && (
+          <ShortcutBarEdit
+            active={buttons}
+            candidates={candidates}
+            isMobile={store.isMobile}
+            onCancel={() => setEditing(false)}
+            onSave={handleSave}
+          />
+        )
+      }
+    </div>,
+    document.body
+  )
+}
+
+export default auto(ShortcutBar)

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

@@ -0,0 +1,186 @@
+// shortcut-bar
+// sits in reserved space at the bottom of the viewport (see layout.jsx +
+// .shortcut-bar-on rule below). Height tracks --shortcut-bar-h which the
+// component sets from the shortcutBarHeight constant.
+
+.shortcut-bar
+  position fixed
+  left 0
+  right 0
+  bottom 0
+  height var(--shortcut-bar-h, 44px)
+  z-index 400
+  display flex
+  align-items stretch
+  background var(--main)
+  border-top 1px solid var(--main-lighter)
+  user-select none
+  -webkit-user-select none
+
+.shortcut-bar-fixed
+  display flex
+  align-items stretch
+  flex-shrink 0
+  border-right 1px solid var(--main-lighter)
+
+.shortcut-bar-icon-btn
+  width 44px
+  display flex
+  align-items center
+  justify-content center
+  background transparent
+  border none
+  color var(--text)
+  cursor pointer
+  font-size 16px
+  &:active
+    background var(--main-lighter)
+  &:hover
+    color var(--text-light)
+
+.shortcut-bar-scroll
+  flex 1
+  display flex
+  align-items center
+  gap 6px
+  padding 0 8px
+  overflow-x auto
+  overflow-y hidden
+  scrollbar-width none
+  -webkit-overflow-scrolling touch
+  &::-webkit-scrollbar
+    display none
+
+.shortcut-bar-btn
+  flex-shrink 0
+  height 32px
+  min-width 32px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main-light)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  white-space nowrap
+  &:active
+    background var(--primary)
+    color var(--primary-contrast)
+  &:hover
+    color var(--text-light)
+
+// while the bar is visible, lift the footer + reserve space so nothing is
+// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible)
+.shortcut-bar-on
+  .main-footer
+    bottom var(--shortcut-bar-h, 44px)
+
+// --- edit modal -----------------------------------------------------------
+
+.shortcut-edit-wrap
+  .custom-modal-content
+    max-width 92vw
+.shortcut-edit-section
+  margin-bottom 16px
+  &:last-child
+    margin-bottom 0
+.shortcut-edit-section-title
+  margin-bottom 8px
+  color var(--text)
+  font-weight bold
+  font-size 13px
+
+.shortcut-active-list
+  display flex
+  flex-wrap wrap
+  gap 6px
+  min-height 48px
+  padding 8px
+  border 1px dashed var(--main-lighter)
+  border-radius 6px
+  background var(--main-dark)
+.shortcut-active-empty
+  color var(--text-dark)
+  font-size 12px
+  width 100%
+  text-align center
+  line-height 32px
+
+.shortcut-active-item
+  display inline-flex
+  align-items center
+  gap 4px
+  height 30px
+  padding 0 4px 0 10px
+  border-radius 6px
+  background var(--main-light)
+  border 1px solid var(--main-lighter)
+  color var(--text)
+  font-size 13px
+.shortcut-active-label
+  white-space nowrap
+.shortcut-active-remove
+  display flex
+  align-items center
+  justify-content center
+  width 20px
+  height 20px
+  border none
+  background transparent
+  color var(--text-dark)
+  border-radius 4px
+  cursor pointer
+  font-size 11px
+  &:hover
+    color var(--error)
+    background var(--main-lighter)
+
+.shortcut-candidate-list
+  display flex
+  flex-wrap wrap
+  gap 6px
+  max-height 180px
+  overflow-y auto
+  padding 4px
+.shortcut-candidate-item
+  height 30px
+  min-width 34px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  &:active
+    background var(--main-lighter)
+  &:hover
+    color var(--text-light)
+  &.added
+    opacity 0.45
+    cursor default
+
+.shortcut-custom-form
+  display flex
+  gap 8px
+  align-items center
+  flex-wrap wrap
+.shortcut-search-input
+  flex 1
+  min-width 160px
+.shortcut-custom-input
+  flex 1
+  min-width 120px
+.shortcut-custom-add
+  height 32px
+  white-space nowrap
+
+.shortcut-edit-footer
+  justify-content space-between
+  width 100%

package/client/components/terminal/terminal-color-query.mjs

@@ -104,6 +104,53 @@ export function colorToOscRgb (color) {
   return `rgb:${rgb.map(toHexByte).join('/')}`
 }
 
+/**
+ * Blend a (possibly translucent) selection color over an opaque background,
+ * producing the colour in xterm's internal format ({ css, rgba } where
+ * rgba = r<<24 | g<<16 | b<<8 | a).
+ *
+ * xterm derives its DOM selection colour as blend(theme.background,
+ * selectionBackground). When the terminal background is forced transparent
+ * (DOM renderer keeps the real background behind via CSS), that blend runs
+ * over transparent-black and a light selection turns into dark gray. This
+ * helper recomputes it over the real visible background instead.
+ *
+ * `selectionColor` is an xterm color object ({ css, rgba }) e.g.
+ * colors.selectionBackgroundTransparent; `visibleBackground` is an opaque
+ * colour string.
+ */
+export function blendSelectionOverBackground (visibleBackground, selectionColor) {
+  const bgRgb = parseColorToRgb(visibleBackground)
+  const sel = selectionColor?.rgba
+  if (!bgRgb || typeof sel !== 'number') {
+    return null
+  }
+  const [br, bg, bb] = bgRgb
+  const a = (sel & 255) / 255
+  if (a <= 0) {
+    return null
+  }
+  const toCss = (r, g, b, alpha) =>
+    `#${[r, g, b, alpha].map(toHexByte).join('')}`
+  const sr = sel >> 24 & 255
+  const sg = sel >> 16 & 255
+  const sb = sel >> 8 & 255
+  if (a >= 1) {
+    return {
+      css: toCss(sr, sg, sb, 255),
+      rgba: ((sel & 0xffffff) | 0xff000000) >>> 0
+    }
+  }
+  const r = br + Math.round((sr - br) * a)
+  const g = bg + Math.round((sg - bg) * a)
+  const b = bb + Math.round((sb - bb) * a)
+  const alpha = Math.round(a * 255)
+  return {
+    css: toCss(r, g, b, alpha),
+    rgba: (r << 24 | g << 16 | b << 8 | alpha) >>> 0
+  }
+}
+
 export function buildOscColorResponse (identifier, color, fallbackColor) {
   const oscColor = colorToOscRgb(color) || colorToOscRgb(fallbackColor)
   return oscColor

package/client/components/terminal/terminal.jsx

@@ -71,7 +71,8 @@ import {
 } from './xterm-loader.js'
 import {
   createRendererThemeConfig,
-  handleTerminalColorQuery
+  handleTerminalColorQuery,
+  blendSelectionOverBackground
 } from './terminal-color-query.mjs'
 
 const e = window.translate
@@ -1456,6 +1457,7 @@ class Term extends Component {
       return
     }
     term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+    this.fixSelectionColors(term)
     term.refresh(0, term.rows - 1)
     if (deferred && this.props.config.rendererType === rendererTypes.webGL) {
       window.cancelAnimationFrame(this.timers.themeRaf)
@@ -1464,11 +1466,46 @@ class Term extends Component {
           return
         }
         this.term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+        this.fixSelectionColors(this.term)
         this.term.refresh(0, this.term.rows - 1)
       })
     }
   }
 
+  /**
+   * xterm computes its DOM selection colour as blend(theme.background,
+   * selectionBackground). The DOM renderer keeps the terminal background
+   * transparent (rgba(0,0,0,0)) so electerm's own CSS background / image
+   * shows through, which makes a light selection blend over transparent-black
+   * and render as dark gray. Recompute the selection over the real visible
+   * background so terminal:selectionBackground=rgba(...) is applied as the
+   * configured semi-transparent colour.
+   */
+  fixSelectionColors = (term) => {
+    const themeService = term?._core?._themeService
+    if (!themeService?.modifyColors) {
+      return
+    }
+    const visibleBackground = this.getVisibleTerminalBackground()
+    const colors = themeService.colors
+    themeService.modifyColors((c) => {
+      const active = blendSelectionOverBackground(
+        visibleBackground,
+        colors.selectionBackgroundTransparent
+      )
+      if (active) {
+        c.selectionBackgroundOpaque = active
+      }
+      const inactive = blendSelectionOverBackground(
+        visibleBackground,
+        colors.selectionInactiveBackgroundTransparent
+      )
+      if (inactive) {
+        c.selectionInactiveBackgroundOpaque = inactive
+      }
+    })
+  }
+
   initTerminal = async () => {
     const { themeConfig, tab = {}, config = {} } = this.props
     const tc = this.getRendererThemeConfig(themeConfig)
@@ -1492,6 +1529,7 @@ class Term extends Component {
     term.open(this.domRef.current, true)
     this.registerTerminalColorQueryHandlers(term, themeConfig)
     await this.loadRenderer(term, config)
+    this.fixSelectionColors(term)
     // Re-apply the theme after the renderer is loaded. The Terminal was
     // constructed before UiTheme's useEffect ran, so the initial theme
     // may have a stale background. Pass `term` directly because this.term

package/client/components/terminal/terminal.styl

@@ -34,6 +34,14 @@
     background transparent
   .xterm-viewport
     background-color transparent !important
+  // xterm's DOM renderer paints the background of selected text cells directly
+  // on the <span> as an opaque 6-digit hex (dropping alpha), while empty cells
+  // use the translucent .xterm-selection overlay behind the rows. xterm marks
+  // those spans with .xterm-decoration-top ("rendered above the selection"),
+  // so neutralise that inline background to let the corrected selection overlay
+  // show through uniformly across both empty and text cells.
+  .xterm-decoration-top
+    background-color transparent !important
   .xterm-screen::before
     content ''
     position absolute

package/client/components/terminal-info/base.jsx

@@ -3,10 +3,10 @@
  */
 import { Component } from 'react'
 import {
-  Switch,
   Space,
   Button
 } from 'antd'
+import SwitchLabel from '../common/switch'
 import defaults from '../../common/default-setting'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 import {
@@ -123,9 +123,8 @@ export default class TerminalInfoBase extends Component {
     }
     const name = e('addTimeStampToTermLog')
     return (
-      <Switch
-        checkedChildren={name}
-        unCheckedChildren={name}
+      <SwitchLabel
+        label={name}
         checked={addTimeStampToTermLog}
         onChange={this.handleToggleTimestamp}
         className='mg1b'
@@ -176,9 +175,8 @@ export default class TerminalInfoBase extends Component {
           <b>ID:</b> {id}
         </div>
         <div className='pd1b'>
-          <Switch
-            checkedChildren={name}
-            unCheckedChildren={name}
+          <SwitchLabel
+            label={name}
             checked={saveTerminalLogToFile}
             onChange={this.handleToggle}
             className='mg1r mg1b'

package/client/components/widgets/widget-form.jsx

@@ -2,8 +2,9 @@
  * Widget form component
  */
 import React, { useState, useEffect } from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, Tooltip, Alert, Space } from 'antd'
+import { Form, Input, InputNumber, Select, Button, Tooltip, Alert, Space } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
 import { nanoid } from 'nanoid'
 import BatchOpEditor from '../batch-op/batch-op-editor'
@@ -91,7 +92,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
             valuePropName='checked'
             tooltip={description}
           >
-            <Switch />
+            <SwitchLabel />
           </Form.Item>
         )
       default:

package/client/store/init-state.js

@@ -167,6 +167,9 @@ export default () => {
     pinnedQuickCommandBar: ls.getItem(pinnedQuickCommandBarKey) === 'y',
     qmSortByFrequency: ls.getItem(qmSortByFrequencyKey) === 'yes',
 
+    // touch-only shortcut bar (see components/terminal/shortcut-bar-entry.jsx)
+    shortcutBarVisible: false,
+
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey) || '',
     _leftSidePanelWidth: parseInt(ls.getItem(leftSidePanelWidthKey), 10) || 300,

package/client/store/mcp-handler.js

@@ -18,6 +18,30 @@ import {
 } from '../components/bookmark-form/fix-bookmark-default'
 import newTerm from '../common/new-terminal'
 
+// Dangerous props that must not be accepted from MCP/AI tool calls.
+// Mirrors the blocklist in src/client/store/tab.js (dangerousTabProps).
+// These allow arbitrary command execution if set (e.g. execLinux/execLinuxArgs
+// override the shell binary, setEnv injects environment variables, runScripts
+// executes scripts, interactiveValues injects interactive prompts).
+const dangerousTabProps = [
+  'execLinux',
+  'execMac',
+  'execWindows',
+  'execWindowsArgs',
+  'execMacArgs',
+  'execLinuxArgs',
+  'setEnv',
+  'runScripts',
+  'interactiveValues'
+]
+
+// Strip dangerous props from an object, returning a safe copy.
+function stripDangerousTabProps (obj) {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !dangerousTabProps.includes(key))
+  )
+}
+
 export default Store => {
   // Initialize MCP handler - called when MCP widget is started
   Store.prototype.initMcpHandler = function () {
@@ -497,7 +521,11 @@ export default Store => {
 
   Store.prototype.mcpOpenTab = function (args) {
     const { store } = window
-    const data = fixBookmarkData({ ...args })
+    // Strip dangerous execution-related props before any processing.
+    // This prevents MCP/AI callers from injecting execLinux/execLinuxArgs,
+    // setEnv, runScripts, etc. to spawn arbitrary local processes.
+    const safeArgs = stripDangerousTabProps({ ...args })
+    const data = fixBookmarkData(safeArgs)
 
     const { valid, errors } = validateBookmarkData(data)
     if (!valid) {

package/package.json

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