@electerm/electerm-react 5.3.26 → 5.5.9

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

@@ -0,0 +1,433 @@
+import { pick } from 'lodash-es'
+import clone from '../../../common/to-simple-obj.js'
+import deepCopy from 'json-deep-copy'
+import {
+  statusMap,
+  typeMap,
+  isWin,
+  isMac,
+  terminalSerialType,
+  paneMap
+} from '../../../common/constants.js'
+import getProxy from '../../../common/get-proxy.js'
+import { refs } from '../../common/ref.js'
+import { createTerm, resizeTerm } from '../terminal-apis.js'
+import { ZmodemClient } from '../zmodem-client.js'
+import { TrzszClient } from '../trzsz-client.js'
+import { XmodemClient } from '../xmodem-client.js'
+import { loadWebLinksAddon } from '../xterm-loader.js'
+import { KeywordHighlighterAddon } from '../highlight-addon.js'
+import {
+  createTerminalReloadState,
+  getAlternateBufferSnapshot,
+  shouldCaptureTerminalReloadState
+} from '../ssh-reload-state.js'
+
+// Expands \n \t \r \\ and \xHH hex byte escapes, used to let users type
+// control bytes (e.g. \x01 = Ctrl+A) in the serial "closeSequence" field.
+function expandCloseSequence (text) {
+  let result = ''
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '\\' && i + 1 < text.length) {
+      const next = text[i + 1]
+      if (next === 'n') {
+        result += '\n'
+        i++
+      } else if (next === 't') {
+        result += '\t'
+        i++
+      } else if (next === 'r') {
+        result += '\r'
+        i++
+      } else if (next === '\\') {
+        result += '\\'
+        i++
+      } else if (next === 'x' && /^[0-9a-fA-F]{2}$/.test(text.slice(i + 2, i + 4))) {
+        result += String.fromCharCode(parseInt(text.slice(i + 2, i + 4), 16))
+        i += 3
+      } else {
+        result += text[i]
+      }
+    } else {
+      result += text[i]
+    }
+  }
+  return result
+}
+
+/**
+ * Session lifecycle: opening the pty/ssh session over its websocket, error
+ * and reconnect handling, input broadcast, and the screen snapshot used to
+ * restore a shell session (ssh, local, telnet, serial) after a reload.
+ */
+export const socketMixin = {
+  buildWsUrl (port) {
+    const { host, tokenElecterm } = this.props.config
+    const { id } = this.props.tab
+    if (window.et.buildWsUrl) {
+      return window.et.buildWsUrl(
+        host,
+        port,
+        tokenElecterm,
+        id
+      )
+    }
+    return `ws://${host}:${port}/terminals/${id}?token=${tokenElecterm}`
+  },
+
+  async remoteInit (term = this.term) {
+    this.setState({
+      loading: true,
+      terminalError: null
+    })
+    const { cols, rows } = term
+    const { config } = this.props
+    const {
+      keywords = []
+    } = config
+    const { logName } = this.props
+    const tab = window.store.applyProfileToTabs(deepCopy(this.props.tab || {}))
+    const {
+      srcId, from = 'bookmarks',
+      type,
+      term: terminalType,
+      displayRaw,
+      id
+    } = tab
+    const { savePassword } = this.state
+    const termType = type
+    const extra = this.props.sessionOptions
+    // Determine if this is a local terminal (no host)
+    const isLocalType = !tab.host
+    // Build exec settings: only for local type, prefer tab settings over config
+    let execOpts = {}
+    let execPropName = 'execLinux'
+    if (isWin) {
+      execPropName = 'execWindows'
+    } else if (isMac) {
+      execPropName = 'execMac'
+    }
+    if (isLocalType) {
+      // Check flat properties on tab first (bookmark data), then fall back to config
+      if (tab[execPropName]) {
+        // Use bookmark's exec setting directly
+        execOpts = {
+          [execPropName]: tab[execPropName],
+          [`${execPropName}Args`]: tab[`${execPropName}Args`] || []
+        }
+      } else if (config[execPropName]) {
+        // Use global config exec settings
+        execOpts = {
+          [execPropName]: config[execPropName],
+          [`${execPropName}Args`]: config[`${execPropName}Args`] || []
+        }
+      }
+    }
+    const keepaliveInterval = tab.keepaliveInterval || config.keepaliveInterval
+    const opts = clone({
+      cols,
+      rows,
+      term: terminalType || config.terminalType,
+      saveTerminalLogToFile: config.saveTerminalLogToFile,
+      ...tab,
+      ...extra,
+      ...execOpts,
+      logName,
+      sessionLogPath: this.state.logPath,
+      ...pick(config, [
+        'addTimeStampToTermLog',
+        'keepaliveCountMax',
+        'keyword2FA',
+        'debug'
+      ]),
+      keepaliveInterval,
+      tabId: id,
+      uid: id,
+      srcTabId: tab.id,
+      termType,
+      readyTimeout: config.sshReadyTimeout,
+      proxy: getProxy(tab, config),
+      type: tab.host
+        ? typeMap.remote
+        : typeMap.local
+    })
+    // Renderer-only state can contain a large serialized screen and must not
+    // cross the process boundary as part of the SSH connection options.
+    delete opts._reloadState
+    const isAutoReconnect = !!(tab.autoReConnect && this.props.config.autoReconnectTerminal)
+    const r = await createTerm(opts)
+      .catch(err => {
+        if (!isAutoReconnect) {
+          const text = err.message
+          this.handleError({ message: text, from, srcId })
+        }
+      })
+    // Guard: component was unmounted while createTerm was pending.
+    // The child process is already running; connect briefly to trigger its cleanup.
+    if (this.onClose) {
+      if (r && r.port) {
+        try {
+          const tmpSock = new WebSocket(this.buildWsUrl(r.port))
+          tmpSock.onopen = () => tmpSock.close()
+        } catch (_e) {}
+      }
+      return
+    }
+    if (typeof r === 'string' && r.includes('fail')) {
+      return this.promote()
+    }
+    if (savePassword) {
+      window.store.editItem(srcId, extra, from)
+    }
+    this.setState({
+      loading: false
+    })
+    if (!r) {
+      if (isAutoReconnect) {
+        this.scheduleAutoReconnect(3000)
+        return
+      }
+      this.setStatus(statusMap.error)
+      return
+    }
+    this.port = r.port
+    this.setStatus(statusMap.success)
+    refs.get('sftp-' + id)?.initData(id, r.port)
+    term.pid = id
+    this.pid = id
+    const wsUrl = this.buildWsUrl(r.port)
+    const socket = new WebSocket(wsUrl)
+    socket.onclose = this.oncloseSocket
+    socket.onerror = this.onerrorSocket
+    this.socket = socket
+    this.initSocketEvents()
+    this.term = term
+    socket.onopen = async () => {
+      // attach addon is a dynamic import too — report a failed chunk fetch
+      // instead of leaving an unhandled rejection behind
+      try {
+        await this.initAttachAddon()
+        this.startupQueue.runInitScript()
+      } catch (e) {
+        console.error(e)
+        this.handleError({ message: e.message })
+      }
+    }
+    // term.onRrefresh(this.onRefresh)
+    term.onResize(this.onResizeTerminal)
+    // xterm 6.x exposes buffer change as a public event (IBufferNamespace.onBufferChange).
+    // Previously this reached into the private _onBufferChange._listeners array.
+    term.buffer.onBufferChange(this.onBufferChange)
+    const WebLinksAddon = await loadWebLinksAddon()
+    term.loadAddon(new WebLinksAddon(this.webLinkHandler))
+    term.focus()
+    this.zmodemClient = new ZmodemClient(this)
+    this.zmodemClient.init(socket)
+    this.trzszClient = new TrzszClient(this)
+    this.trzszClient.init(socket)
+    this.xmodemClient = new XmodemClient(this)
+    this.xmodemClient.init(socket)
+    // 仅在可见时 fit，隐藏标签跳过，避免 0 列损坏提示符。
+    if (this.isElementVisible()) {
+      this.fitAddon.fit()
+    }
+    // Force-send the current size now that `this.pid` is finally valid.
+    // A resize may already have fired earlier (e.g. from the tab-becomes-
+    // visible fit in componentDidUpdate, which can run before createTerm()
+    // resolves) while this.pid was still undefined - the backend silently
+    // drops resize calls for an unknown pid. If that earlier call already
+    // updated term.cols/rows locally, xterm's resize() no-ops on the next
+    // fit() (dims unchanged) and never fires onResize again, so the
+    // backend pty would otherwise be stuck at its initial (possibly wrong)
+    // size forever. Sending explicitly here, keyed off the real pid,
+    // guarantees the remote pty/ssh channel is told the true current size.
+    resizeTerm(this.pid, term.cols, term.rows)
+    term.displayRaw = displayRaw
+    term.loadAddon(
+      new KeywordHighlighterAddon(keywords)
+    )
+  },
+
+  handleError ({ message: errorMessage, from, srcId }) {
+    this.setState({
+      terminalError: {
+        message: errorMessage || 'Failed to create terminal session',
+        from,
+        srcId
+      }
+    })
+  },
+
+  handleEditBookmarkFromError () {
+    const error = this.state.terminalError
+    if (!error || error.from !== 'bookmarks' || !error.srcId) {
+      return
+    }
+    const item = window.store.bookmarksMap?.get(error.srcId) ||
+      window.store.bookmarks?.find(d => d.id === error.srcId)
+    if (!item) {
+      return
+    }
+    window.store.openBookmarkEdit(item)
+  },
+
+  initSocketEvents () {
+    const originalSend = this.socket.send
+    this.socket.send = (data) => {
+      // Call original send first
+      originalSend.call(this.socket, data)
+
+      // Broadcast to other terminals
+      this.broadcastSocketData(data)
+    }
+  },
+
+  canReceiveBroadcast (termRef) {
+    return (
+      termRef.socket &&
+      termRef.props?.tab.pane === paneMap.terminal
+    )
+  },
+
+  broadcastSocketData (data) {
+    if (!this.isActiveTerminal() || !this.props.broadcastInput) {
+      return
+    }
+
+    window.refs.forEach((termRef, refId) => {
+      if (
+        refId !== this.id &&
+        refId.startsWith('term-') &&
+        this.canReceiveBroadcast(termRef)
+      ) {
+        termRef.socket.send(data)
+      }
+    })
+  },
+
+  onerrorSocket (err) {
+    console.error('onerrorSocket', err)
+  },
+
+  oncloseSocket () {
+    if (this.onClose || this.props.tab.enableSsh === false) {
+      return
+    }
+    this.setStatus(
+      statusMap.error
+    )
+    if (this.userTypeExit) {
+      return this.props.delTab(this.props.tab.id)
+    }
+    const { autoReconnectTerminal } = this.props.config
+    if (autoReconnectTerminal) {
+      this.scheduleAutoReconnect(3000)
+    }
+  },
+
+  scheduleAutoReconnect (delay = 3000) {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    const seconds = Math.round(delay / 1000)
+    this.setState({ reconnectCountdown: seconds })
+    let remaining = seconds
+    this.timers.reconnectCountdown = setInterval(() => {
+      remaining -= 1
+      if (remaining <= 0) {
+        clearInterval(this.timers.reconnectCountdown)
+        this.timers.reconnectCountdown = null
+      }
+      this.setState({ reconnectCountdown: remaining <= 0 ? null : remaining })
+    }, 1000)
+    this.timers.reconnectTimer = setTimeout(() => {
+      clearInterval(this.timers.reconnectCountdown)
+      this.timers.reconnectCountdown = null
+      this.setState({ reconnectCountdown: null })
+      if (this.onClose || !this.props.config.autoReconnectTerminal) {
+        return
+      }
+      const reconnectCount = (this.props.tab.autoReConnect || 0) + 1
+      this.props.reloadTab({ ...this.props.tab, autoReConnect: reconnectCount })
+    }, delay)
+  },
+
+  handleCancelAutoReconnect () {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    this.timers.reconnectTimer = null
+    this.timers.reconnectCountdown = null
+    this.setState({ reconnectCountdown: null })
+  },
+
+  handleCancel () {
+    const { id } = this.props.tab
+    this.props.delTab(id)
+  },
+
+  /**
+   * Manually triggered from the "exit gracefully" control in
+   * session-control.jsx (serial tabs only). Writes the configured key
+   * sequence (default \x01ky = Ctrl+A, k, y to kill a GNU screen window) to
+   * the socket, waits a bit so the remote end (e.g. a Bluetooth console
+   * adapter) can release cleanly, then closes the tab.
+   */
+  async exitGracefully () {
+    const { tab } = this.props
+    if (tab.type !== terminalSerialType) {
+      return
+    }
+    if (!this.onClose && this.attachAddon?._sendData) {
+      try {
+        const data = expandCloseSequence(tab.closeSequence || '\\x01ky')
+        if (data) {
+          this.attachAddon._sendData(data)
+        }
+      } catch (err) {
+        console.error('send close sequence failed', err)
+      }
+      const delay = Number(tab.closeSequenceDelay)
+      await new Promise(resolve => setTimeout(resolve, Number.isFinite(delay) && delay >= 0 ? delay : 500))
+    }
+    this.props.delTab(tab.id)
+  },
+
+  getReloadState () {
+    if (!shouldCaptureTerminalReloadState(this.props.tab, this.props.config)) {
+      return undefined
+    }
+    let screen = ''
+    try {
+      screen = this.serializeAddon?.serialize({
+        scrollback: this.props.config.scrollback,
+        excludeAltBuffer: true,
+        excludeModes: true
+      }) || ''
+      // Full-screen programs use the alternate buffer. Replaying that buffer
+      // as a terminal mode would trap the fresh shell in stale mouse/cursor
+      // state, so preserve its visible text as a safe normal-buffer snapshot.
+      const alternateScreen = getAlternateBufferSnapshot(this.term?.buffer.active)
+      if (alternateScreen) {
+        screen += `${screen ? '\r\n' : ''}${alternateScreen}`
+      }
+    } catch (e) {
+      console.warn('Failed to serialize terminal before reload', e)
+    }
+    const cwd = this.cmdAddon?.getCwd() || this.props.tab._reloadState?.cwd || ''
+    return createTerminalReloadState({ cwd, screen })
+  },
+
+  restoreReloadScreen (term) {
+    const screen = this.props.tab._reloadState?.screen
+    if (!screen) {
+      return Promise.resolve()
+    }
+    return new Promise(resolve => {
+      term.write(screen, () => {
+        // The framebuffer has been replayed; do not keep a potentially large
+        // duplicate string on the live tab. A later reload serializes afresh.
+        delete this.props.tab._reloadState.screen
+        resolve()
+      })
+    })
+  }
+}

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
+  }
+}