@electerm/electerm-react 2.4.16 → 2.4.28

package/client/components/common/message.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import {
   CloseOutlined
@@ -26,15 +26,40 @@ const notify = (messages) => {
 let activeMessages = []
 
 function MessageItem ({ id, type, content, duration, onRemove, timestamp }) {
+  const timeoutIdRef = useRef(null)
+
   useEffect(() => {
     if (duration !== 0) {
       const timer = setTimeout(onRemove, duration * 1000)
-      return () => clearTimeout(timer)
+      timeoutIdRef.current = timer
+      return () => {
+        clearTimeout(timeoutIdRef.current)
+        timeoutIdRef.current = null
+      }
     }
   }, [duration, onRemove, timestamp])
 
+  const handleMouseEnter = () => {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current)
+      timeoutIdRef.current = null
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (duration !== 0) {
+      const timer = setTimeout(onRemove, duration * 1000)
+      timeoutIdRef.current = timer
+    }
+  }
+
   return (
-    <div className={classnames('message-item', type)} id={`message-${id}`}>
+    <div
+      className={classnames('message-item', type)}
+      id={`message-${id}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <div className='message-content-wrap'>
         {messageIcons[type]}
         <div className='message-content'>{content}</div>

package/client/components/common/message.styl

@@ -43,11 +43,9 @@
   margin-left 8px
   cursor pointer
   font-size 12px
-  color var(--text-dark)
-  opacity 0
-  transition opacity 0.2s
+  color var(--text)
   &:hover
-    color var(--text-light)
+    font-weight bold
 
 @keyframes message-fade-in
   from

package/client/components/common/notification.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { CloseOutlined } from '@ant-design/icons'
 import classnames from 'classnames'
 import generateId from '../../common/uid'
@@ -70,17 +70,41 @@ export function NotificationContainer () {
 }
 
 function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
+  const timeoutRef = useRef(null)
+
   useEffect(() => {
     if (duration > 0) {
-      const timer = setTimeout(onClose, duration * 1000)
-      return () => clearTimeout(timer)
+      timeoutRef.current = setTimeout(onClose, duration * 1000)
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+    }
+  }, [])
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
     }
-  }, [duration, onClose])
+  }
+
+  const handleMouseLeave = () => {
+    if (duration > 0 && !timeoutRef.current) {
+      timeoutRef.current = setTimeout(onClose, duration * 1000)
+    }
+  }
 
   const className = classnames('notification', type)
 
   return (
-    <div className={className}>
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <div className='notification-content'>
         <div className='notification-message'>
           <div className='notification-icon'>{messageIcons[type]}</div>

package/client/components/shortcuts/shortcut-handler.js

@@ -65,10 +65,6 @@ export function shortcutExtend (Cls) {
     if (isInAntdInput()) {
       return
     }
-    if (this.cmdAddon) {
-      this.cmdAddon.handleKey(event)
-    }
-
     if (
       this.term &&
       key === 'Backspace' &&

package/client/components/terminal/shell.js

@@ -15,6 +15,7 @@
  */
 
 /* 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)
@@ -69,6 +70,35 @@ function getFishInlineIntegration () {
   ].join('; ')
 }
 
+/**
+ * Get inline shell integration command for sh/ash (one-liner format)
+ * Uses PS1 injection as sh/ash lack PROMPT_COMMAND or advanced traps.
+ */
+function getShInlineIntegration () {
+  return [
+    'if [ -z "$ELECTERM_SHELL_INTEGRATION" ]',
+    'then export ELECTERM_SHELL_INTEGRATION=1',
+    '__e_esc() { printf "%s" "$1" | sed "s/\\\\/\\\\\\\\/g; s/;/\\\\x3b/g"; }',
+    // We wrap the current PS1 with OSC 633 sequences.
+    // \033]633;P;Cwd=... \007 marks the directory
+    // \033]633;A \007 marks the start of the prompt
+    'export PS1="\\e]633;P;Cwd=$(__e_esc "$PWD")\\a\\e]633;A\\a${PS1:-# }"',
+    'fi'
+  ].join('; ')
+}
+
+export function detectShellType (shellStr) {
+  if (shellStr.includes('bash')) {
+    return 'bash'
+  } else if (shellStr.includes('zsh')) {
+    return 'zsh'
+  } else if (shellStr.includes('fish')) {
+    return 'fish'
+  } else {
+    return 'sh'
+  }
+}
+
 /**
  * Get shell integration command based on detected shell type
  * @param {string} shellType - 'bash', 'zsh', or 'fish'
@@ -84,7 +114,7 @@ export function getInlineShellIntegration (shellType) {
       return getFishInlineIntegration()
     default:
       // Try bash as default for sh-compatible shells
-      return getBashInlineIntegration()
+      return getShInlineIntegration()
   }
 }
 
@@ -112,27 +142,23 @@ export function getShellIntegrationCommand (shellType = 'bash') {
   const cmd = getInlineShellIntegration(shellType)
   return wrapSilent(cmd, shellType)
 }
+export async function detectRemoteShell (pid) {
+  // 1. We try the version variables first.
+  // 2. We try your verified fish check: fish --version ...
+  // 3. We use ps -p $$ to check the process name (highly reliable in Linux/Docker).
+  // This syntax is safe for Bash, Zsh, and Fish.
+  const cmd = 'fish --version 2>/dev/null | grep -q fish && echo fish || { env | grep -q ZSH_VERSION && echo zsh || { env | grep -q BASH_VERSION && echo bash || { ps -p $$ -o comm= 2>/dev/null || echo sh; }; }; }'
 
-/**
- * Detect shell type from shell path or login script
- * @param {string} shellPath - Path to shell executable or login script
- * @returns {string} Shell type: 'bash', 'zsh', 'fish', or 'bash' (default)
- */
-export function detectShellType (shellPath = '') {
-  if (!shellPath) return 'bash'
-
-  const normalizedPath = shellPath.toLowerCase()
+  const r = await runCmd(pid, cmd)
+    .catch((err) => {
+      console.error('detectRemoteShell error', err)
+      return 'sh'
+    })
 
-  if (normalizedPath.includes('zsh')) {
-    return 'zsh'
-  } else if (normalizedPath.includes('fish')) {
-    return 'fish'
-  } else if (normalizedPath.includes('bash')) {
-    return 'bash'
-  } else if (normalizedPath.includes('sh')) {
-    // Generic sh, try bash compatibility
-    return 'bash'
-  }
+  const shell = r.trim().toLowerCase()
 
-  return 'bash'
+  if (shell.includes('fish')) return 'fish'
+  if (shell.includes('zsh')) return 'zsh'
+  if (shell.includes('bash')) return 'bash'
+  return 'sh' // Fallback for sh/ash/dash
 }

package/client/components/terminal/terminal.jsx

@@ -52,11 +52,13 @@ 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'
 
@@ -79,6 +81,9 @@ 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()
@@ -215,6 +220,41 @@ 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()
+        }
+      }
+    }
+    if (
+      !prevSftpFollow &&
+      currSftpFollow &&
+      this.isLocal() &&
+      isWin
+    ) {
+      return this.warnSftpFollowUnsupported()
+    }
   }
 
   timers = {}
@@ -293,6 +333,14 @@ class Term extends Component {
     })
   }
 
+  warnSftpFollowUnsupported = () => {
+    message.warning(
+      <span>
+        Fish shell/windows shell is not supported for SFTP follow SSH path feature. See: <ExternalLink to='https://github.com/electerm/electerm/wiki/Warning-about-sftp-follow-ssh-path-function'>wiki</ExternalLink>
+      </span>
+      , 7)
+  }
+
   pasteShortcut = (e) => {
     if (this.pasteTextTooLong()) {
       this.askUserConfirm()
@@ -596,7 +644,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
@@ -945,6 +993,12 @@ class Term extends Component {
     }
     // 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
     }
@@ -1042,6 +1096,7 @@ 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)
   }
 
@@ -1060,7 +1115,7 @@ class Term extends Component {
   //   })
   // }
 
-  runInitScript = () => {
+  runInitScript = async () => {
     window.store.triggerResize()
     const {
       startDirectory,
@@ -1072,20 +1127,51 @@ class Term extends Component {
     if (startFolder) {
       scripts.unshift({ script: `cd "${startFolder}"`, delay: 0 })
     }
-    this.pendingRunScripts = scripts
 
-    // Inject shell integration from client-side (works for both local and remote)
-    // Skip on Windows as shell integration is not supported there
+    // Create unified execution queue
+    this.executionQueue = []
+
+    // Add shell integration injection to queue if needed
     if (this.canInjectShellIntegration()) {
-      this.injectShellIntegration()
-    } else {
-      // No shell integration, run scripts immediately
-      this.startDelayedScripts()
+      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 = () => {
-    return this.isSsh() || this.isLocal()
+    const { config } = this.props
+    const canInject = (config.showCmdSuggestions || this.props.sftpPathFollowSsh) &&
+    (
+      this.isSsh() ||
+      (this.isLocal() && !isWin)
+    )
+    return canInject
   }
 
   isSsh = () => {
@@ -1095,70 +1181,93 @@ class Term extends Component {
 
   isLocal = () => {
     const { host, type } = this.props.tab
-    return !host && (type === 'local' || type === undefined)
+    return !host &&
+      (type === 'local' || type === undefined)
   }
 
   /**
-   * Start running delayed scripts
-   * Called after shell integration injection completes (or immediately if disabled)
+   * Process the unified execution queue one item at a time
    */
-  startDelayedScripts = () => {
-    const runScripts = this.pendingRunScripts
-    if (runScripts && runScripts.length) {
-      this.delayedScripts = deepCopy(runScripts)
-      this.timers.timerDelay = setTimeout(this.runDelayedScripts, this.delayedScripts[0].delay || 0)
+  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)
+          })
+        }
+      }
+    } catch (error) {
+      console.error('[Shell Integration] Error processing queue item:', item.type, error)
     }
-    this.pendingRunScripts = null
+
+    // 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 = () => {
-    // Detect shell type from login script or local shell config
-    let shellType = 'bash'
+  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)
     }
 
-    const isRemote = this.isSsh()
+    this.shellType = shellType
+    if (shellType === 'fish') {
+      if (this.props.sftpPathFollowSsh) {
+        this.warnSftpFollowUnsupported()
+      }
+      return Promise.resolve()
+    }
+
+    // Don't inject for sh type shells unless sftpPathFollowSsh is true
+    if (shellType === 'sh' && !this.props.sftpPathFollowSsh) {
+      return Promise.resolve()
+    }
 
-    // Remote sessions might need longer timeout for shell integration detection
     const integrationCmd = getShellIntegrationCommand(shellType)
 
-    if (integrationCmd && this.attachAddon) {
+    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 = isRemote ? 5000 : 3000
-          // Pass callback to run delayed scripts after suppression ends
+          const suppressionTimeout = this.isSsh() ? 5000 : 3000
+          // Pass callback to resolve the promise after suppression ends
           this.attachAddon.startOutputSuppression(suppressionTimeout, () => {
-            this.startDelayedScripts()
+            this.shellInjected = true
+            resolve()
           })
           this.attachAddon._sendData(integrationCmd)
+        } else {
+          resolve()
         }
       })
-    }
-  }
-
-  runDelayedScripts = () => {
-    const { delayedScripts } = this
-    if (delayedScripts && delayedScripts.length > 0) {
-      const obj = delayedScripts.shift()
-      if (obj.script) {
-        this.attachAddon._sendData(obj.script + '\r')
-      }
-      if (delayedScripts.length > 0) {
-        const nextDelay = delayedScripts[0].delay || 0
-        this.timers.timerDelay = setTimeout(this.runDelayedScripts, nextDelay)
-      }
-    }
+    })
   }
 
   setStatus = status => {

package/package.json

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