@electerm/electerm-react 2.3.198 → 2.4.18

package/client/components/terminal/terminal.jsx

@@ -8,13 +8,13 @@ import {
   ReloadOutlined
 } from '@ant-design/icons'
 import {
-  notification,
   Spin,
   Button,
-  Dropdown,
-  message,
-  Modal
+  Dropdown
 } from 'antd'
+import { notification } from '../common/notification'
+import message from '../common/message'
+import Modal from '../common/modal'
 import classnames from 'classnames'
 import './terminal.styl'
 import {
@@ -24,7 +24,6 @@ import {
   isWin,
   transferTypeMap,
   rendererTypes,
-  cwdId,
   isMac,
   zmodemTransferPackSize
 } from '../../common/constants.js'
@@ -51,27 +50,20 @@ import { getFilePath, isUnsafeFilename } from '../../common/file-drop-utils.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
 import { formatBytes } from '../../common/byte-format.js'
+import {
+  getShellIntegrationCommand,
+  detectRemoteShell,
+  detectShellType
+} from './shell.js'
 import * as fs from './fs.js'
 import iconsMap from '../sys-menu/icons-map.jsx'
 import { refs, refsStatic } from '../common/ref.js'
+import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 
 const e = window.translate
 
-const PS1_SETUP_CMD = `\recho $0|grep csh >/dev/null && set prompt_bak="$prompt" && set prompt="$prompt${cwdId}%/${cwdId}"\r
-echo $0|grep zsh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'${cwdId}%d${cwdId}'\r
-echo $0|grep ash >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
-echo $0|grep ksh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
-echo $0|grep '^sh' >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
-clear\r`
-
-const PS1_RESTORE_CMD = `\recho $0|grep csh >/dev/null && set prompt="$prompt_bak"\r
-echo $0|grep zsh >/dev/null && PS1="$PS1_bak"\r
-echo $0|grep ash >/dev/null && PS1="$PS1_bak"\r
-echo $0|grep ksh >/dev/null && PS1="$PS1_bak"\r
-echo $0|grep '^sh' >/dev/null && PS1="$PS1_bak"\r
-clear\r`
 class Term extends Component {
   constructor (props) {
     super(props)
@@ -88,6 +80,10 @@ class Term extends Component {
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
+    this.currentInput = ''
+    this.shellInjected = false
+    this.shellType = null
+    this.manualCommandHistory = new Set()
   }
 
   domRef = createRef()
@@ -140,29 +136,6 @@ class Term extends Component {
         background: 'rgba(0,0,0,0)'
       }
     }
-
-    const sftpPathFollowSshChanged = !isEqual(
-      this.props.sftpPathFollowSsh,
-      prevProps.sftpPathFollowSsh
-    )
-
-    if (sftpPathFollowSshChanged) {
-      if (this.props.sftpPathFollowSsh) {
-        if (this.attachAddon && this.term) {
-          this.attachAddon._sendData(PS1_SETUP_CMD)
-          this.term.cwdId = cwdId
-        } else {
-          console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in componentDidUpdate')
-        }
-      } else {
-        if (this.attachAddon) {
-          this.attachAddon._sendData(PS1_RESTORE_CMD)
-        }
-        if (this.term) {
-          delete this.term.cwdId
-        }
-      }
-    }
   }
 
   componentWillUnmount () {
@@ -247,6 +220,33 @@ class Term extends Component {
         }
       }
     }
+
+    // Check for shell integration related config changes
+    const prevShowSuggestions = prevProps.config.showCmdSuggestions
+    const currShowSuggestions = props.config.showCmdSuggestions
+    const prevSftpFollow = prevProps.sftpPathFollowSsh
+    const currSftpFollow = props.sftpPathFollowSsh
+
+    if (
+      (!prevShowSuggestions && currShowSuggestions) ||
+      (!prevSftpFollow && currSftpFollow)
+    ) {
+      // Config was toggled to true, try to inject shell integration if not already done
+      if (this.canInjectShellIntegration() && !this.shellInjected) {
+        // If there's an active execution queue, add to it
+        if (this.executionQueue && this.executionQueue.length > 0) {
+          this.executionQueue.unshift({
+            type: 'shell_integration',
+            execute: async () => {
+              await this.injectShellIntegration()
+            }
+          })
+        } else {
+          // No active queue, inject directly
+          this.injectShellIntegration()
+        }
+      }
+    }
   }
 
   timers = {}
@@ -321,8 +321,7 @@ class Term extends Component {
       ),
       okText: e('ok'),
       cancelText: e('cancel'),
-      onOk: () => this.onPaste(true),
-      onCancel: Modal.destroyAll
+      onOk: () => this.onPaste(true)
     })
   }
 
@@ -382,7 +381,7 @@ class Term extends Component {
         this.attachAddon._sendData(`"${filePath}" `)
         return
       } catch (e) {
-        log.error('Failed to parse fromFile data:', e)
+        console.error('Failed to parse fromFile data:', e)
       }
     }
 
@@ -441,12 +440,15 @@ class Term extends Component {
   }
 
   onzmodemRetract = () => {
-    log.debug('zmodemRetract')
+    console.debug('zmodemRetract')
   }
 
   writeBanner = (type) => {
-    this.term.write('\r\nRecommmend use trzsz instead: https://github.com/trzsz/trzsz\r\n')
-    this.term.write(`\x1b[32mZMODEM::${type}::START\x1b[0m\r\n\r\n`)
+    const border = '='.repeat(50)
+    this.term.write(`\r\n${border}\r\n`)
+    this.term.write('\x1b[33m\x1b[1mRecommend use trzsz instead: https://github.com/trzsz/trzsz\x1b[0m\r\n')
+    this.term.write(`${border}\r\n\r\n`)
+    this.term.write(`\x1b[32m\x1b[1mZMODEM::${type}::START\x1b[0m\r\n`)
   }
 
   onReceiveZmodemSession = async () => {
@@ -626,7 +628,7 @@ class Term extends Component {
     }
     const r = []
     for (const filePath of files) {
-      const stat = await getLocalFileInfo(filePath).catch(console.log)
+      const stat = await getLocalFileInfo(filePath)
       r.push({ ...stat, filePath })
     }
     return r
@@ -885,20 +887,16 @@ class Term extends Component {
   }
 
   getCwd = () => {
-    if (
-      this.props.sftpPathFollowSsh &&
-      this.term &&
-      this.term.buffer.active.type !== 'alternate' && !this.term.cwdId
-    ) {
-      // This block should ideally not be hit for initial setup if runInitScript works.
-      // It acts as a fallback.
-      this.term.cwdId = cwdId
-      if (this.attachAddon) {
-        this.attachAddon._sendData(PS1_SETUP_CMD)
-      } else {
-        console.warn('attachAddon not ready for PS1_SETUP_CMD in getCwd fallback')
+    // 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) => {
@@ -942,35 +940,72 @@ class Term extends Component {
       ?.closeSuggestions()
   }
 
-  onData = (d) => {
-    if (this.cmdAddon) {
-      this.cmdAddon.handleData(d)
+  openSuggestions = (cursorPos, data) => {
+    refsStatic
+      .get('terminal-suggestions')
+      ?.openSuggestions(cursorPos, data)
+  }
+
+  getCurrentInput = () => {
+    return this.currentInput
+  }
+
+  setCurrentInput = (value) => {
+    this.currentInput = value
+  }
+
+  updateCurrentInput = (d) => {
+    // Handle backspace (both \x7f and \b)
+    if (d === '\x7f' || d === '\b') {
+      this.currentInput = this.currentInput.slice(0, -1)
+      return
     }
-    const data = this.getCmd().trim()
-    if (!d.includes('\r')) {
-      delete this.userTypeExit
-      const cursorPos = this.getCursorPosition()
-      if (this.props.config.showCmdSuggestions && data.length > 1) {
-        refsStatic
-          .get('terminal-suggestions')
-          ?.openSuggestions(cursorPos, data)
+    // Handle Ctrl+U (clear line)
+    if (d === '\x15') {
+      this.currentInput = ''
+      return
+    }
+    // Handle Ctrl+W (delete word)
+    if (d === '\x17') {
+      this.currentInput = this.currentInput.replace(/\S*\s*$/, '')
+      return
+    }
+    // Handle Ctrl+C (cancel)
+    if (d === '\x03') {
+      this.currentInput = ''
+      return
+    }
+    // Handle Enter
+    if (d === '\r' || d === '\n') {
+      // Add to manual command history if shell integration is not available
+      if (this.currentInput.trim() && this.shouldUseManualHistory()) {
+        this.manualCommandHistory.add(this.currentInput.trim())
+        // Also add to global history for suggestions
+        window.store.addCmdHistory(this.currentInput.trim())
       }
+      this.currentInput = ''
+      return
+    }
+    // Handle Escape and other control characters
+    if (d.charCodeAt(0) < 32 && d !== '\t') {
+      return
+    }
+    // Handle arrow keys and other escape sequences
+    if (d.startsWith('\x1b')) {
+      return
+    }
+    // Regular character input - append to buffer
+    this.currentInput += d
+  }
+
+  onData = (d) => {
+    this.updateCurrentInput(d)
+    const data = this.getCurrentInput()
+    if (this.props.config.showCmdSuggestions && data) {
+      const cursorPos = this.getCursorPosition()
+      this.openSuggestions(cursorPos, data)
     } else {
       this.closeSuggestions()
-      if (this.term.buffer.active.type !== 'alternate') {
-        this.timers.getCwd = setTimeout(this.getCwd, 200)
-      }
-      const exitCmds = [
-        'exit',
-        'logout'
-      ]
-      window.store.addCmdHistory(data)
-      if (exitCmds.includes(data)) {
-        this.userTypeExit = true
-        this.timers.userTypeExit = setTimeout(() => {
-          delete this.userTypeExit
-        }, 2000)
-      }
     }
   }
 
@@ -981,8 +1016,8 @@ class Term extends Component {
       try {
         term.loadAddon(new WebglAddon())
       } catch (e) {
-        log.error('render with webgl failed, fallback to canvas')
-        log.error(e)
+        console.error('render with webgl failed, fallback to canvas')
+        console.error(e)
         term.loadAddon(new CanvasAddon())
       }
     }
@@ -1021,6 +1056,16 @@ class Term extends Component {
     // term.on('keydown', this.handleEvent)
     this.fitAddon = new FitAddon()
     this.cmdAddon = new CommandTrackerAddon()
+    // Register callback for shell integration command tracking
+    this.cmdAddon.onCommandExecuted((cmd) => {
+      if (cmd && cmd.trim()) {
+        window.store.addCmdHistory(cmd.trim())
+      }
+    })
+    // Register callback for shell integration CWD tracking
+    this.cmdAddon.onCwdChanged((cwd) => {
+      this.setCwd(cwd)
+    })
     this.searchAddon = new SearchAddon()
     const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
@@ -1035,7 +1080,6 @@ class Term extends Component {
     term.onData(this.onData)
     this.term = term
     term.onSelectionChange(this.onSelectionChange)
-    term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
     await this.remoteInit(term)
   }
 
@@ -1054,49 +1098,163 @@ class Term extends Component {
   //   })
   // }
 
-  runInitScript = () => {
+  runInitScript = async () => {
     window.store.triggerResize()
     const {
       startDirectory,
       runScripts
     } = this.props.tab
+
+    const scripts = runScripts ? [...runScripts] : []
     const startFolder = startDirectory || window.initFolder
     if (startFolder) {
-      if (this.attachAddon) {
-        const cmd = `cd "${startFolder}"\r`
-        this.attachAddon._sendData(cmd)
-      } else {
-        console.warn('attachAddon not ready for cd command in runInitScript')
-      }
+      scripts.unshift({ script: `cd "${startFolder}"`, delay: 0 })
     }
 
-    if (this.props.sftpPathFollowSsh) {
-      if (this.term && this.attachAddon) {
-        this.attachAddon._sendData(PS1_SETUP_CMD)
-        this.term.cwdId = cwdId
-      } else {
-        console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in runInitScript')
-      }
-    }
+    // Create unified execution queue
+    this.executionQueue = []
 
-    if (runScripts && runScripts.length) {
-      this.delayedScripts = deepCopy(runScripts)
-      this.timers.timerDelay = setTimeout(this.runDelayedScripts, this.delayedScripts[0].delay || 0)
+    // Add shell integration injection to queue if needed
+    if (this.canInjectShellIntegration()) {
+      this.executionQueue.push({
+        type: 'shell_integration',
+        execute: async () => {
+          await this.injectShellIntegration()
+        }
+      })
     }
+
+    // Add delayed scripts to queue
+    scripts.forEach(script => {
+      this.executionQueue.push({
+        type: 'delayed_script',
+        script: script.script,
+        delay: script.delay || 0,
+        execute: () => {
+          if (script.script) {
+            this.attachAddon._sendData(script.script + '\r')
+          }
+        }
+      })
+    })
+
+    this.processExecutionQueue()
+  }
+
+  shouldUseManualHistory = () => {
+    const useManual = this.props.config.showCmdSuggestions &&
+      (this.shellType === 'sh' || (isWin && this.isLocal()))
+    return useManual
+  }
+
+  canInjectShellIntegration = () => {
+    const { config } = this.props
+    const canInject = (config.showCmdSuggestions || this.props.sftpPathFollowSsh) &&
+    (
+      this.isSsh() ||
+      (this.isLocal() && !isWin)
+    )
+    return canInject
+  }
+
+  isSsh = () => {
+    const { host, type } = this.props.tab
+    return host && (type === 'ssh' || type === undefined)
   }
 
-  runDelayedScripts = () => {
-    const { delayedScripts } = this
-    if (delayedScripts && delayedScripts.length > 0) {
-      const obj = delayedScripts.shift()
-      if (obj.script) {
-        this.attachAddon._sendData(obj.script + '\r')
+  isLocal = () => {
+    const { host, type } = this.props.tab
+    return !host &&
+      (type === 'local' || type === undefined)
+  }
+
+  /**
+   * Process the unified execution queue one item at a time
+   */
+  processExecutionQueue = async () => {
+    if (!this.executionQueue || this.executionQueue.length === 0) {
+      return
+    }
+
+    const item = this.executionQueue.shift()
+
+    try {
+      if (item.type === 'shell_integration') {
+        await item.execute()
+      } else if (item.type === 'delayed_script') {
+        item.execute()
+        // Wait for the specified delay before processing next item
+        if (item.delay > 0) {
+          await new Promise(resolve => {
+            this.timers.timerDelay = setTimeout(resolve, item.delay)
+          })
+        }
       }
-      if (delayedScripts.length > 0) {
-        const nextDelay = delayedScripts[0].delay || 0
-        this.timers.timerDelay = setTimeout(this.runDelayedScripts, nextDelay)
+    } catch (error) {
+      console.error('[Shell Integration] Error processing queue item:', item.type, error)
+    }
+
+    // Process next item
+    this.processExecutionQueue()
+  }
+
+  /**
+   * Inject shell integration commands from client-side
+   * This replaces the server-side source xxx.xxx approach
+   * Uses output suppression to hide the injection command
+   * Returns a promise that resolves when injection is complete
+   */
+  injectShellIntegration = async () => {
+    if (this.shellInjected) {
+      return Promise.resolve()
+    }
+
+    let shellType
+    if (this.isLocal()) {
+      const { config } = this.props
+      const localShell = isMac ? config.execMac : config.execLinux
+      shellType = detectShellType(localShell)
+    } else if (this.isSsh()) {
+      shellType = await detectRemoteShell(this.pid)
+    }
+
+    this.shellType = shellType
+    if (shellType === 'fish') {
+      if (this.props.sftpPathFollowSsh) {
+        message.warning(
+          <span>
+            Fish shell is not supported for SFTP follow SSH path. See: <ExternalLink to='https://github.com/electerm/electerm/wiki/Warning-about-sftp-follow-ssh-path-function'>wiki</ExternalLink>
+          </span>
+          , 7)
       }
+      return Promise.resolve()
     }
+
+    // Don't inject for sh type shells unless sftpPathFollowSsh is true
+    if (shellType === 'sh' && !this.props.sftpPathFollowSsh) {
+      return Promise.resolve()
+    }
+
+    const integrationCmd = getShellIntegrationCommand(shellType)
+
+    return new Promise((resolve) => {
+      // Wait for initial data (prompt/banner) to arrive before injecting
+      this.attachAddon.onInitialData(() => {
+        if (this.attachAddon) {
+          // Start suppressing output before sending the integration command
+          // This hides the command and its output until OSC 633 is detected
+          const suppressionTimeout = this.isSsh() ? 5000 : 3000
+          // Pass callback to resolve the promise after suppression ends
+          this.attachAddon.startOutputSuppression(suppressionTimeout, () => {
+            this.shellInjected = true
+            resolve()
+          })
+          this.attachAddon._sendData(integrationCmd)
+        } else {
+          resolve()
+        }
+      })
+    })
   }
 
   setStatus = status => {
@@ -1292,13 +1450,13 @@ class Term extends Component {
       try {
         this.fitAddon.fit()
       } catch (e) {
-        log.info('resize failed')
+        console.info('resize failed')
       }
     }
   }, 200)
 
   onerrorSocket = err => {
-    log.error('onerrorSocket', err)
+    console.error('onerrorSocket', err)
   }
 
   oncloseSocket = () => {
@@ -1320,7 +1478,7 @@ class Term extends Component {
     }
     this.socketCloseWarning = notification.warning({
       key,
-      title: e('socketCloseTip'),
+      message: e('socketCloseTip'),
       duration: 30,
       description: (
         <div className='pd2y'>

package/client/components/theme/theme-form.jsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react'
-import { Button, Input, message, Upload, Form, Space } from 'antd'
+import { Button, Input, Upload, Form, Space } from 'antd'
+import message from '../common/message'
 import {
   convertTheme,
   convertThemeToText,

package/client/components/tree-list/bookmark-transport.jsx

@@ -8,7 +8,7 @@ import {
   ImportOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import { Upload, Button } from 'antd'
+import { Upload, Button, Space } from 'antd'
 
 const e = window.translate
 
@@ -32,16 +32,20 @@ export default class BookmarkTransport extends PureComponent {
     )
   }
 
-  render () {
-    return [
-      this.renderEdit(),
+  renderExport () {
+    return (
       <Button
         icon={<ExportOutlined />}
         onClick={this.handleDownload}
         title={e('export')}
         className='download-bookmark-icon'
         key='export'
-      />,
+      />
+    )
+  }
+
+  renderImport () {
+    return (
       <Upload
         beforeUpload={this.beforeUpload}
         fileList={[]}
@@ -53,6 +57,24 @@ export default class BookmarkTransport extends PureComponent {
           title={e('importFromFile')}
         />
       </Upload>
+    )
+  }
+
+  render () {
+    const edit = this.renderEdit()
+    console.log('edit', edit)
+    if (edit === null) {
+      return (
+        <Space.Compact>
+          {this.renderExport()}
+          {this.renderImport()}
+        </Space.Compact>
+      )
+    }
+    return [
+      edit,
+      this.renderExport(),
+      this.renderImport()
     ]
   }
 }

package/client/components/vnc/vnc-session.jsx

@@ -9,9 +9,9 @@ import {
 } from '../../common/constants'
 import {
   Spin,
-  message,
   Tag
 } from 'antd'
+import message from '../common/message'
 import Modal from '../common/modal'
 import * as ls from '../../common/safe-local-storage'
 import { copy } from '../../common/clipboard'

package/client/components/widgets/widget-notification-with-details.jsx

@@ -1,4 +1,4 @@
-import { notification } from 'antd'
+import { notification } from '../common/notification'
 import { CopyOutlined } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
 

package/client/store/common.js

@@ -3,7 +3,7 @@
  */
 
 import handleError from '../common/error-handler'
-import { Modal } from 'antd'
+import Modal from '../components/common/modal'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
   modals,
@@ -117,7 +117,7 @@ export default Store => {
       setTimeout(queue, 3000)
       setTimeout(run, 4000)
     } catch (e) {
-      log.error(e)
+      console.error(e)
     }
   }
 
@@ -341,6 +341,9 @@ export default Store => {
   }
 
   Store.prototype.addCmdHistory = action(function (cmd) {
+    if (!cmd || !cmd.trim()) {
+      return
+    }
     const { terminalCommandHistory } = window.store
     terminalCommandHistory.add(cmd)
     if (terminalCommandHistory.size > 100) {

package/client/store/db-upgrade.js

@@ -2,7 +2,7 @@
  * db upgrade
  */
 
-import { Modal } from 'antd'
+import Modal from '../components/common/modal'
 import delay from '../common/wait'
 
 export default (Store) => {

package/client/store/init-state.js

@@ -9,6 +9,7 @@ import {
   infoTabs,
   openedSidebarKey,
   sidebarPinnedKey,
+  pinnedQuickCommandBarKey,
   sftpDefaultSortSettingKey,
   batchInputLsKey,
   expandedKeysLsKey,
@@ -150,7 +151,7 @@ export default () => {
     quickCommands: [],
     quickCommandId: '',
     openQuickCommandBar: false,
-    pinnedQuickCommandBar: false,
+    pinnedQuickCommandBar: ls.getItem(pinnedQuickCommandBarKey) === 'y',
     qmSortByFrequency: ls.getItem(qmSortByFrequencyKey) === 'yes',
 
     // sidebar