@electerm/electerm-react 5.3.26 → 5.5.6

package/client/components/terminal/mixins/term-suggestions.js

@@ -0,0 +1,224 @@
+import { debounce } from 'lodash-es'
+import { refsStatic } from '../../common/ref.js'
+
+/**
+ * Command suggestions: reading the current input straight from the terminal
+ * buffer, positioning the dropdown at the cursor, and the password prompt
+ * variant triggered by the shell integration OSC sequences.
+ */
+export const suggestionsMixin = {
+  getCursorPosition () {
+    if (!this.term) return null
+
+    // Get the active buffer and cursor position
+    const buffer = this.term.buffer.active
+    const cursorRow = buffer.cursorY
+    const cursorCol = buffer.cursorX
+
+    // Get dimensions from term element
+    const termElement = this.term.element
+    if (!termElement) return null
+
+    // Get the exact position of the terminal element
+    const termRect = termElement.getBoundingClientRect()
+
+    // Calculate cell dimensions
+    const cellWidth = termRect.width / this.term.cols
+    const cellHeight = termRect.height / this.term.rows
+
+    // Calculate absolute position relative to terminal element
+    const left = Math.floor(termRect.left + (cursorCol * cellWidth))
+    const top = Math.floor(termRect.top + ((cursorRow + 1) * cellHeight))
+
+    return {
+      cellWidth,
+      cellHeight,
+      left,
+      top
+    }
+  },
+
+  closeSuggestions () {
+    refsStatic
+      .get('terminal-suggestions')
+      ?.closeSuggestions()
+  },
+
+  openSuggestions (cursorPos, data) {
+    refsStatic
+      .get('terminal-suggestions')
+      ?.openSuggestions(cursorPos, data)
+  },
+
+  /**
+   * Read current input directly from terminal buffer
+   * This is more reliable than tracking character-by-character
+   */
+  getCurrentInput () {
+    if (!this.term) return ''
+
+    const buffer = this.term.buffer.active
+    const cursorY = buffer.cursorY
+    const cursorX = buffer.cursorX
+
+    // Get the current line from buffer (baseY + cursorY gives absolute position)
+    const absoluteY = buffer.baseY + cursorY
+    const line = buffer.getLine(absoluteY)
+    if (!line) return ''
+
+    // Get text from start of line up to cursor position
+    const lineText = line.translateToString(true, 0, cursorX)
+
+    // Try to extract command after prompt
+    // Common prompt endings with trailing space
+    const promptEndings = ['$ ', '# ', '> ', '% ', '] ', ') ']
+
+    let commandStart = 0
+    for (const ending of promptEndings) {
+      const idx = lineText.lastIndexOf(ending)
+      if (idx !== -1 && idx + ending.length > commandStart) {
+        commandStart = idx + ending.length
+      }
+    }
+
+    return lineText.slice(commandStart)
+  },
+
+  setCurrentInput (value) {
+    this.currentInput = value
+  },
+
+  /**
+   * Handle special input events for command history tracking
+   * The actual input reading is done via getCurrentInput from buffer
+   */
+  handleInputEvent (d) {
+    // Handle Enter - add command to history
+    if (d === '\r' || d === '\n') {
+      const currentCmd = this.getCurrentInput()
+      if (currentCmd && currentCmd.trim() && this.shouldUseManualHistory()) {
+        window.store.addCmdHistory(currentCmd.trim())
+      }
+      if (currentCmd && currentCmd.trim() === 'exit') {
+        this.userTypeExit = true
+      }
+      this.closeSuggestions()
+    }
+  },
+
+  onData (d) {
+    this.handleInputEvent(d)
+    // Skip normal suggestion logic when in password mode
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.passwordMode) {
+      if (d === '\r' || d === '\n') {
+        this.closeSuggestions()
+      }
+      return
+    }
+    if (this.props.config.showCmdSuggestions) {
+      if (d === '\r' || d === '\n') {
+        this.closeSuggestions()
+        return
+      }
+      // Debounce the suggestion opening to avoid expensive work
+      // (buffer read + getBoundingClientRect + React re-render) on every keystroke
+      this._debouncedOpenSuggestions()
+    } else {
+      this.closeSuggestions()
+    }
+  },
+
+  /**
+   * Called by AttachAddonCustom after data is written to the terminal buffer.
+   * This fires after server echo arrives, so getCurrentInput() reflects the
+   * latest state. We trigger a debounced suggestion refresh so the dropdown
+   * updates correctly after backspace, delete, and other edits that rely on
+   * server-side echo to update the buffer.
+   */
+  onTerminalWrite () {
+    if (!this.props.config.showCmdSuggestions) {
+      return
+    }
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.showSuggestions && !suggestions?.state?.passwordMode) {
+      this._debouncedOpenSuggestions()
+    }
+  },
+
+  // One debounced runner per terminal, so a keystroke does not trigger a
+  // buffer read + layout + re-render for every character.
+  _debouncedOpenSuggestions () {
+    if (!this._openSuggestionsDebounced) {
+      this._openSuggestionsDebounced = debounce(() => {
+        const data = this.getCurrentInput()
+        if (!data) {
+          this.closeSuggestions()
+          return
+        }
+        const cursorPos = this.getCursorPosition()
+        this.openSuggestions(cursorPos, data)
+      }, 80)
+    }
+    this._openSuggestionsDebounced()
+  },
+
+  onPasswordPromptDetected () {
+    window.store.notifyTabPasswordPrompt(this.props.tab.id)
+    if (!this.props.config.showCmdSuggestions) {
+      return
+    }
+    const cursorPos = this.getCursorPosition()
+    if (cursorPos) {
+      refsStatic
+        .get('terminal-suggestions')
+        ?.openPasswordSuggestions(cursorPos)
+    }
+  },
+
+  onPasswordPromptCancelled () {
+    window.store.clearTabPasswordPrompt(this.props.tab.id)
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.passwordMode) {
+      suggestions.closeSuggestions()
+    }
+  },
+
+  getCmd () {
+    return this.cmdAddon.getCurrentCommand()
+  },
+
+  getCwd () {
+    // Use shell integration CWD if available
+    if (this.cmdAddon && this.cmdAddon.hasShellIntegration()) {
+      const cwd = this.cmdAddon.getCwd()
+      if (cwd) {
+        this.setCwd(cwd)
+        return cwd
+      }
+    }
+    // Fallback: no longer needed with shell integration
+    return ''
+  },
+
+  setCwd (cwd) {
+    this.props.setCwd(cwd, this.state.id)
+  },
+
+  shouldUseManualHistory () {
+    return !this.cmdAddon || !this.cmdAddon.hasShellIntegration()
+  },
+
+  parse (rawText) {
+    let result = ''
+    const len = rawText.length
+    for (let i = 0; i < len; i++) {
+      if (rawText[i] === '\b') {
+        result = result.slice(0, -1)
+      } else {
+        result += rawText[i]
+      }
+    }
+    return result
+  }
+}

package/client/components/terminal/mixins/term-theme.js

@@ -0,0 +1,190 @@
+import deepCopy from 'json-deep-copy'
+import { loadWebglAddon } from '../xterm-loader.js'
+import { rendererTypes } from '../../../common/constants.js'
+import {
+  createRendererThemeConfig,
+  handleTerminalColorQuery,
+  blendSelectionOverBackground
+} from '../terminal-color-query.mjs'
+
+/**
+ * Renderer (DOM / WebGL) and theming, including the OSC 10/11 colour query
+ * handlers that let shells ask the terminal for its background colour.
+ */
+export const themeMixin = {
+  async loadRenderer (term, config) {
+    // xterm 6.x: only the built-in DOM renderer and the WebGL addon exist
+    // (the canvas renderer addon was removed in 6.x). 'dom' = no addon loaded
+    // (built-in DOM renderer). Legacy 'canvas' settings fall back to DOM.
+    if (config.rendererType === rendererTypes.webGL) {
+      try {
+        const WebglAddon = await loadWebglAddon()
+        const webglAddon = new WebglAddon()
+        this.webglAddon = webglAddon
+        // On macOS native fullscreen the GPU/WebGL context can be lost when
+        // the window migrates across Spaces. Without a listener xterm keeps
+        // drawing into a dead context and every terminal goes black while the
+        // rest of the UI stays alive. Rebuild the addon to recover.
+        this.webglContextLossDisposable = webglAddon.onContextLoss(this.handleWebglContextLoss)
+        term.loadAddon(webglAddon)
+      } catch (e) {
+        console.error('render with webgl failed, fallback to dom renderer')
+        console.error(e)
+        // built-in DOM renderer is used (no addon loaded)
+        this.webglAddon = null
+      }
+    }
+  },
+
+  reloadWebglRenderer (reason = 'reload') {
+    console.warn(`webgl renderer ${reason}, rebuilding`)
+    try {
+      this.webglContextLossDisposable?.dispose?.()
+      this.webglContextLossDisposable = null
+    } catch (e) {
+      console.error(e)
+    }
+    try {
+      this.webglAddon?.dispose?.()
+    } catch (e) {
+      console.error(e)
+    }
+    this.webglAddon = null
+    const { term } = this
+    const { config } = this.props
+    return this.loadRenderer(term, config)
+      .then(() => {
+        term.refresh(0, term.rows - 1)
+      })
+      .catch(e => {
+        console.error(`webgl renderer ${reason} failed`, e)
+      })
+  },
+
+  handleWebglContextLoss (webglAddon = this.webglAddon) {
+    if (this.webglRecovering || !webglAddon) {
+      return
+    }
+    this.webglRecovering = true
+    this.reloadWebglRenderer('context loss')
+      .finally(() => {
+        this.webglRecovering = false
+      })
+  },
+
+  disposeTerminalColorQueryHandlers () {
+    this.terminalColorQueryDisposables.forEach(disposable => disposable?.dispose?.())
+    this.terminalColorQueryDisposables.length = 0
+  },
+
+  getVisibleTerminalBackground () {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    // The store value (uiThemeConfig.main) is always immediately up-to-date
+    // when the theme changes, because it reads directly from store.config.theme.
+    // The CSS --main variable lags behind because UiTheme's useEffect runs
+    // asynchronously after componentDidUpdate. So we prioritise the store
+    // value, and only fall back to CSS (for custom-CSS edge cases) or the
+    // terminal theme background (last resort).
+    const root = document.documentElement
+    const cssMain = root && window.getComputedStyle
+      ? window.getComputedStyle(root).getPropertyValue('--main').trim()
+      : ''
+    return uiThemeConfig.main || cssMain || this.props.themeConfig.background
+  },
+
+  getVisibleTerminalForeground () {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    return uiThemeConfig.text
+  },
+
+  registerTerminalColorQueryHandlers (term, themeConfig = {}) {
+    this.disposeTerminalColorQueryHandlers()
+    if (!term?.parser?.registerOscHandler) {
+      return
+    }
+    const background = this.getVisibleTerminalBackground()
+    const foregroundFallback = this.getVisibleTerminalForeground()
+    this.terminalColorQueryDisposables.push(
+      term.parser.registerOscHandler(10, data => {
+        return handleTerminalColorQuery(term, 10, themeConfig.foreground, foregroundFallback, data)
+      }),
+      term.parser.registerOscHandler(11, data => {
+        return handleTerminalColorQuery(term, 11, background, themeConfig.background, data)
+      })
+    )
+  },
+
+  getRendererThemeConfig (themeConfig = this.props.themeConfig) {
+    return createRendererThemeConfig(
+      deepCopy(themeConfig),
+      this.props.config.rendererType,
+      this.getVisibleTerminalBackground()
+    )
+  },
+
+  /**
+   * Apply the current renderer theme to the terminal and trigger a repaint.
+   * When `deferred` is true (WebGL mode), a second repaint is scheduled on
+   * the next animation frame so the theme picks up CSS --main changes that
+   * UiTheme's useEffect applies asynchronously after componentDidUpdate.
+   * The optional `term` parameter is used during initTerminal, where
+   * this.term hasn't been assigned yet.
+   */
+  applyTerminalTheme (deferred = false, term = this.term) {
+    if (!term || this.onClose) {
+      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)
+      this.timers.themeRaf = window.requestAnimationFrame(() => {
+        if (!this.term || this.onClose) {
+          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 terminal background is forced transparent
+   * (rgba(0,0,0,0)) so electerm's own CSS background / image shows through,
+   * which makes the blend run over transparent-black. Recompute the selection
+   * colours over the real visible background, from the *configured* theme
+   * colours — xterm's internal selectionBackgroundTransparent forces opaque
+   * colours down to 0.3 alpha (xterm#2737), which would make every selection
+   * translucent even when the user configured an opaque one.
+   */
+  fixSelectionColors (term) {
+    const themeConfig = this.props.themeConfig || {}
+    const themeService = term?._core?._themeService
+    if (!themeService?.modifyColors) {
+      return
+    }
+    const visibleBackground = this.getVisibleTerminalBackground()
+    // xterm's DEFAULT_SELECTION, used when the theme omits a selection color
+    const selectionFallback = 'rgba(255, 255, 255, 0.3)'
+    const inactiveFallback = themeConfig.selectionBackground || selectionFallback
+    themeService.modifyColors((c) => {
+      const active = blendSelectionOverBackground(
+        visibleBackground,
+        themeConfig.selectionBackground || selectionFallback
+      )
+      if (active) {
+        c.selectionBackgroundOpaque = active
+      }
+      const inactive = blendSelectionOverBackground(
+        visibleBackground,
+        themeConfig.selectionInactiveBackground || inactiveFallback
+      )
+      if (inactive) {
+        c.selectionInactiveBackgroundOpaque = inactive
+      }
+    })
+  }
+}

package/client/components/terminal/mixins/term-touch.js

@@ -0,0 +1,136 @@
+/**
+ * Mobile touch support.
+ * On touch devices, long-press should (1) select the word under the finger
+ * and (2) open the context menu — mirroring desktop right-click behaviour.
+ * xterm.js only uses touch events for scrolling, so we add explicit
+ * long-press detection here.
+ */
+export const touchMixin = {
+  onTouchStart (e) {
+    if (e.touches.length !== 1) {
+      return
+    }
+    const touch = e.touches[0]
+    this.touchStartPos = {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      target: e.currentTarget
+    }
+    this.longPressFired = false
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = setTimeout(() => {
+      this.handleLongPress()
+    }, this.longPressThreshold)
+  },
+
+  onTouchMove (e) {
+    if (!this.touchStartPos) {
+      return
+    }
+    const touch = e.touches[0]
+    const dx = touch.clientX - this.touchStartPos.clientX
+    const dy = touch.clientY - this.touchStartPos.clientY
+    if (Math.sqrt(dx * dx + dy * dy) > this.longPressMoveTolerance) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = null
+      this.touchStartPos = null
+    }
+  },
+
+  onTouchEnd () {
+    const wasTap = this.touchStartPos && !this.longPressFired
+    clearTimeout(this.longPressTimer)
+    this.longPressTimer = null
+    this.touchStartPos = null
+    // xterm's own touch (Gesture) handler calls preventDefault()/stopPropagation()
+    // on touchstart/touchend, which suppresses the synthesised mousedown xterm
+    // relies on to focus its hidden helper textarea. As a result a tap never
+    // focuses the terminal on touch devices, so the soft keyboard never opens
+    // and you cannot type. Focus explicitly on a clean tap (not a long-press,
+    // not a scroll) so mobile input works. The focus() runs synchronously inside
+    // this user-gesture handler, so iOS/Android will show the keyboard.
+    if (wasTap && this.term) {
+      this.term.focus()
+    }
+  },
+
+  handleLongPress () {
+    if (!this.touchStartPos || this.state.loading) {
+      return
+    }
+    this.longPressFired = true
+    const { clientX, clientY, target } = this.touchStartPos
+
+    // Select the word at the touch position (same as desktop right-click word
+    // select) so the user can immediately copy or act on it.
+    this.selectWordAt(clientX, clientY)
+
+    // Respect pasteWhenContextMenu: when enabled, long-press pastes instead
+    // of showing the menu (same as desktop right-click).
+    if (this.props.config.pasteWhenContextMenu) {
+      this.onPaste()
+      return
+    }
+
+    // Dispatch a synthetic contextmenu event so antd Dropdown's contextMenu
+    // trigger opens the menu at the exact finger position.
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY
+    })
+    target.dispatchEvent(event)
+  },
+
+  selectWordAt (clientX, clientY) {
+    if (!this.term) {
+      return
+    }
+    const termElement = this.term.element
+    if (!termElement) {
+      return
+    }
+    const rect = termElement.getBoundingClientRect()
+    const x = clientX - rect.left
+    const y = clientY - rect.top
+    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+      return
+    }
+
+    const cellWidth = rect.width / this.term.cols
+    const cellHeight = rect.height / this.term.rows
+    const col = Math.floor(x / cellWidth)
+    const row = Math.floor(y / cellHeight)
+
+    const buffer = this.term.buffer.active
+    const line = buffer.getLine(row)
+    if (!line) {
+      return
+    }
+
+    const text = line.translateToString(true)
+    const wordSeparator = this.props.config.terminalWordSeparator ||
+      ' ./\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
+
+    // If the touched cell is empty or a separator, nothing to select
+    if (col >= text.length || wordSeparator.includes(text[col])) {
+      return
+    }
+
+    // Find word start
+    let start = col
+    while (start > 0 && !wordSeparator.includes(text[start - 1])) {
+      start--
+    }
+    // Find word end
+    let end = col
+    while (end < text.length && !wordSeparator.includes(text[end])) {
+      end++
+    }
+
+    if (end > start) {
+      this.term.select(start, row, end - start)
+    }
+  }
+}

package/client/components/terminal/shell-detect.js

@@ -0,0 +1,37 @@
+/**
+ * Remote shell detection.
+ *
+ * Kept out of shell.js on purpose: it needs the network (runCmd), which drags
+ * the whole app runtime into the import graph. shell.js stays pure so the
+ * startup queue can be imported (and unit tested) on its own.
+ */
+import { runCmd } from './terminal-apis.js'
+import { detectShellType } from './shell.js'
+
+export async function detectRemoteShell (pid) {
+  // SSH exec runs under the account shell, so prefer the configured shell path
+  // instead of probing for any shell binary installed on the host.
+  const cmd = 'printf "%s\n" "$SHELL"'
+
+  // { silent: true } so this best-effort probe does not emit a transport-level
+  // fetch warning; a single, clearer warning is logged below if it fails.
+  const r = await runCmd(pid, cmd, { silent: true })
+    .catch((err) => {
+      // Non-fatal: the interactive shell already opened, so the terminal keeps
+      // working. We just can't inject OSC 633 shell integration for command
+      // tracking. This commonly happens when the server limits concurrent
+      // sessions (sshd MaxSessions) or the account uses a forced/restricted
+      // command, which rejects the auxiliary exec channel with
+      // "(SSH) Channel open failure: open failed".
+      console.warn('detectRemoteShell: exec channel rejected by server, shell integration disabled, falling back to sh —', err?.message || err)
+      return 'sh'
+    })
+
+  const shell = r.trim().toLowerCase()
+
+  if (!shell) {
+    return 'sh'
+  }
+
+  return detectShellType(shell)
+}

package/client/components/terminal/shell.js

@@ -15,7 +15,6 @@
  */
 
 /* eslint-disable no-template-curly-in-string, no-useless-escape */
-import { runCmd } from './terminal-apis.js'
 
 /**
  * Get inline shell integration command for bash (one-liner format)
@@ -153,30 +152,3 @@ export function getShellIntegrationCommand (shellType = 'bash') {
   const cmd = getInlineShellIntegration(shellType)
   return wrapSilent(cmd, shellType)
 }
-export async function detectRemoteShell (pid) {
-  // SSH exec runs under the account shell, so prefer the configured shell path
-  // instead of probing for any shell binary installed on the host.
-  const cmd = 'printf "%s\n" "$SHELL"'
-
-  // { silent: true } so this best-effort probe does not emit a transport-level
-  // fetch warning; a single, clearer warning is logged below if it fails.
-  const r = await runCmd(pid, cmd, { silent: true })
-    .catch((err) => {
-      // Non-fatal: the interactive shell already opened, so the terminal keeps
-      // working. We just can't inject OSC 633 shell integration for command
-      // tracking. This commonly happens when the server limits concurrent
-      // sessions (sshd MaxSessions) or the account uses a forced/restricted
-      // command, which rejects the auxiliary exec channel with
-      // "(SSH) Channel open failure: open failed".
-      console.warn('detectRemoteShell: exec channel rejected by server, shell integration disabled, falling back to sh —', err?.message || err)
-      return 'sh'
-    })
-
-  const shell = r.trim().toLowerCase()
-
-  if (!shell) {
-    return 'sh'
-  }
-
-  return detectShellType(shell)
-}

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

@@ -38,6 +38,7 @@
 
 import { lazy, Suspense, useEffect, useState } from 'react'
 import { auto } from 'manate/react'
+import LazyBoundary from '../common/lazy-boundary'
 
 const ShortcutBar = lazy(() => import('./shortcut-bar'))
 
@@ -166,9 +167,11 @@ function ShortcutBarEntry (props) {
     return null
   }
   return (
-    <Suspense fallback={null}>
-      <ShortcutBar {...props} />
-    </Suspense>
+    <LazyBoundary>
+      <Suspense fallback={null}>
+        <ShortcutBar {...props} />
+      </Suspense>
+    </LazyBoundary>
   )
 }
 

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

@@ -135,12 +135,10 @@ function ShortcutBar (props) {
   // keep the offset in a CSS var consumed by shortcut-bar.styl, and expose the
   // lifted height so layout.jsx can shrink the terminal accordingly.
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--shortcut-bar-kb-offset',
-      kbOffset ? kbOffset + 'px' : '0px'
-    )
-    store.shortcutBarKbOffset = kbOffset
-  }, [kbOffset])
+    const offset = store.shortcutBarVisible ? kbOffset : 0
+    document.documentElement.style.setProperty('--shortcut-bar-kb-offset', offset + 'px')
+    store.shortcutBarKbOffset = offset
+  }, [kbOffset, store.shortcutBarVisible])
 
   // 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

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

@@ -79,6 +79,10 @@
 .shortcut-bar-on
   .main-footer
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
+  .remote-monitor-bar
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  .qm-wrap-tooltip
+    bottom calc(var(--footer-stack-height, 36px) + var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 
 // --- edit modal -----------------------------------------------------------