@electerm/electerm-react 3.9.5 → 3.9.15

package/client/components/sftp/list-table-ui.jsx

@@ -28,7 +28,11 @@ export default class FileListTable extends Component {
   containerRef = createRef()
 
   componentDidUpdate (prevProps) {
-    if (prevProps.fileList !== this.props.fileList) {
+    const prevList = prevProps.fileList
+    const nextList = this.props.fileList
+    const contentChanged = prevList.length !== nextList.length ||
+      prevList.some((f, i) => f.id !== nextList[i].id)
+    if (contentChanged) {
       if (this.containerRef.current) {
         this.containerRef.current.scrollTop = 0
       }

package/client/components/tabs/tab.jsx

@@ -8,7 +8,8 @@ import { refsTabs } from '../common/ref'
 import {
   CloseOutlined,
   Loading3QuartersOutlined,
-  BorderlessTableOutlined
+  BorderlessTableOutlined,
+  LockOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -33,7 +34,7 @@ class Tab extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      terminalOnData: false
+      terminalOnData: ''
     }
     this.id = 'tab-' + this.props.tab.id
     refsTabs.add(this.id, this)
@@ -48,19 +49,38 @@ class Tab extends Component {
   }
 
   notifyOnData = () => {
+    if (this.state.terminalOnData === 'password') {
+      return
+    }
     if (this.timer) {
       clearTimeout(this.timer)
       this.timer = null
     }
     this.setState({
-      terminalOnData: true
+      terminalOnData: 'feed'
     })
     this.timer = setTimeout(this.clearTerminalOnData, 4000)
   }
 
   clearTerminalOnData = () => {
     this.setState({
-      terminalOnData: false
+      terminalOnData: ''
+    })
+  }
+
+  notifyPasswordPrompt = () => {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    this.setState({
+      terminalOnData: 'password'
+    })
+  }
+
+  clearPasswordPrompt = () => {
+    this.setState({
+      terminalOnData: ''
     })
   }
 
@@ -424,13 +444,7 @@ class Tab extends Component {
       {
         'tab-last': isLast
       },
-      status,
-      {
-        'is-terminal-active': terminalOnData
-      },
-      {
-        'is-transporting': isTransporting
-      }
+      status
     )
     const title = createName(tab)
     let tooltipTitle = title
@@ -477,15 +491,19 @@ class Tab extends Component {
         >
           <Dropdown {...dropdownProps}>
             <div
-              className='tab-title elli pd1x'
+              className='tab-title elli'
               onClick={this.handleClick}
               onDoubleClick={this.handleDup}
             >
-              <Loading3QuartersOutlined
-                className='pointer tab-reload mg1r'
-                onClick={this.handleReloadTab}
-                title={e('reload')}
-              />
+              {
+                status === 'error' && (
+                  <Loading3QuartersOutlined
+                    className='pointer tab-reload mg1r'
+                    onClick={this.handleReloadTab}
+                    title={e('reload')}
+                  />
+                )
+              }
               <span className='tab-title'>
                 <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
                 <span className='mg1r'>{title}</span>
@@ -493,8 +511,9 @@ class Tab extends Component {
             </div>
           </Dropdown>
           <div className={'tab-status ' + status} />
-          <div className='tab-traffic' />
-          <BorderlessTableOutlined className='tab-terminal-feed' />
+          {isTransporting && <div className='tab-traffic' />}
+          {terminalOnData === 'feed' && <BorderlessTableOutlined className='tab-terminal-feed' />}
+          {terminalOnData === 'password' && <LockOutlined className='tab-terminal-feed password' />}
           {
             this.renderCloseIcon()
           }

package/client/components/tabs/tabs.styl

@@ -36,6 +36,7 @@
   vertical-align middle
   cursor pointer
   position relative
+  padding 0 14px
   min-width 100px
   max-width 200px
   line-height 36px
@@ -46,7 +47,6 @@
   color var(--text-dark)
   &.tab-last
     margin-right 5px
-  .tab-reload
   .tab-close
     display none
   &.active
@@ -68,10 +68,6 @@
     width 1px
     border 1px dashed var(--text-dark)
     height 36px
-  &.error
-    .tab-reload
-      display inline-block
-      color var(--text-light)
 @keyframes blink
   0%
     background-color #e0e0e0
@@ -96,30 +92,25 @@
     background-color var(--error)
   &.processing
     background-color var(--primary)
-.is-transporting .tab-traffic
-  display block
-  animation blink 2s infinite
-  /* Remove opacity animation, use background-color */
 .tab-traffic
-  display none
   left 10px
   width 5px
   border-radius 0
   background-color var(--success)
-.is-terminal-active .tab-terminal-feed
-  display block
   animation blink 2s infinite
-  background-color transparent !important
-  /* Remove opacity animation, use background-color */
 .tab-terminal-feed
-  display none
-  left 20px
+  width 12px
+  height 12px
   border-radius 0
   color var(--success)
-  font-size 8px
+  font-size 12px
   left 2px
   top 24px
   background none
+  background-color transparent !important
+  animation blink 2s infinite
+  &.password
+    color var(--warn)
 .tab-close
   position absolute
   right 5px

package/client/components/terminal/attach-addon-custom.js

@@ -223,6 +223,7 @@ export default class AttachAddonCustom {
     }
 
     if (typeof data === 'string') {
+      term?.parent?.notifyOnData()
       return term.write(data)
     }
     data = new Uint8Array(data)
@@ -242,13 +243,16 @@ export default class AttachAddonCustom {
   sendToServer = (data) => {
     this._lastInputTime = Date.now()
     // Start echo detection when password prompt is suspected
-    if (this._passwordPromptDetected && !this._pendingEchoCheck && data !== '\r' && data !== '\n') {
+    if (this._passwordPromptDetected && !this._pendingEchoCheck && data !== '\r' && data !== '\n' && data !== '\x03') {
       this._pendingEchoCheck = { char: data, time: Date.now() }
       clearTimeout(this._echoCheckTimer)
       this._echoCheckTimer = setTimeout(this._onEchoCheckTimeout, 200)
     }
-    // Reset password state on Enter
-    if (data === '\r' || data === '\n') {
+    // Reset password state on Enter or Ctrl+C
+    if (data === '\r' || data === '\n' || data === '\x03') {
+      if (this._passwordPromptDetected) {
+        this.term?.parent?.onPasswordPromptCancelled?.()
+      }
       this._passwordPromptDetected = false
       this._lastOutputLine = ''
       this._pendingEchoCheck = null

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -278,7 +278,7 @@ export default class TerminalCmdSuggestions extends Component {
           id: uid(),
           command: b.password,
           type: 'PW',
-          hint: [b.username, b.host].filter(Boolean).join('@')
+          hint: [b.username, [b.host, b.port].filter(Boolean).join(':')].filter(Boolean).join('@')
         })
       }
     }

package/client/components/terminal/terminal.jsx

@@ -830,6 +830,7 @@ class Term extends Component {
   }
 
   onPasswordPromptDetected = () => {
+    window.store.notifyTabPasswordPrompt(this.props.tab.id)
     if (!this.props.config.showCmdSuggestions) {
       return
     }
@@ -842,6 +843,7 @@ class Term extends Component {
   }
 
   onPasswordPromptCancelled = () => {
+    window.store.clearTabPasswordPrompt(this.props.tab.id)
     const suggestions = refsStatic.get('terminal-suggestions')
     if (suggestions?.state?.passwordMode) {
       suggestions.closeSuggestions()

package/client/components/text-editor/edit-with-custom-editor.jsx

@@ -6,18 +6,30 @@ import { useState } from 'react'
 import { Button, Input, Space } from 'antd'
 import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 
-const LS_KEY = 'customEditorCommand'
+export const CUSTOM_EDITOR_COMMAND_LS_KEY = 'customEditorCommand'
+export const CUSTOM_EDITOR_AUTO_OPEN_LS_KEY = 'customEditorAutoOpen'
 const e = window.translate
 
 export default function EditWithCustomEditor ({ loading, editWithCustom }) {
   const [editorCommand, setEditorCommand] = useState(
-    () => safeGetItem(LS_KEY) || ''
+    () => safeGetItem(CUSTOM_EDITOR_COMMAND_LS_KEY) || ''
   )
+  const [autoOpen, setAutoOpen] = useState(
+    () => safeGetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY) === 'true'
+  )
+
+  const autoOpenLabel = e('autoOpen')
 
   function handleChange (ev) {
     const val = ev.target.value
     setEditorCommand(val)
-    safeSetItem(LS_KEY, val)
+    safeSetItem(CUSTOM_EDITOR_COMMAND_LS_KEY, val)
+  }
+
+  function handleToggleAutoOpen () {
+    const next = !autoOpen
+    setAutoOpen(next)
+    safeSetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY, String(next))
   }
 
   function handleClick () {
@@ -45,6 +57,13 @@ export default function EditWithCustomEditor ({ loading, editWithCustom }) {
         onChange={handleChange}
         disabled={loading}
       />
+      <Button
+        type={autoOpen ? 'primary' : 'default'}
+        disabled={loading}
+        onClick={handleToggleAutoOpen}
+      >
+        {autoOpenLabel}: {autoOpen ? 'On' : 'Off'}
+      </Button>
     </Space.Compact>
   )
 }

package/client/components/text-editor/text-editor.jsx

@@ -4,9 +4,14 @@
 
 import { PureComponent } from 'react'
 import TextEditorForm from './text-editor-form'
+import {
+  CUSTOM_EDITOR_AUTO_OPEN_LS_KEY,
+  CUSTOM_EDITOR_COMMAND_LS_KEY
+} from './edit-with-custom-editor'
 import { Spin } from 'antd'
 import Modal from '../common/modal'
 import resolve from '../../common/resolve'
+import { safeGetItem } from '../../common/safe-local-storage.js'
 import { refsStatic, refs } from '../common/ref'
 
 const e = window.translate
@@ -69,12 +74,28 @@ export default class TextEditor extends PureComponent {
       return
     }
     const text = await fileRef.fetchEditorText(p, type)
+    const editorCommand = this.getAutoOpenCustomEditorCommand()
     this.setStateProxy({
       text,
       loading: false
+    }, () => {
+      if (editorCommand) {
+        this.editWithCustom(editorCommand)
+      }
     })
   }
 
+  getAutoOpenCustomEditorCommand = () => {
+    if (window.et.isWebApp) {
+      return ''
+    }
+    const autoOpen = safeGetItem(CUSTOM_EDITOR_AUTO_OPEN_LS_KEY) === 'true'
+    if (!autoOpen) {
+      return ''
+    }
+    return safeGetItem(CUSTOM_EDITOR_COMMAND_LS_KEY).trim()
+  }
+
   doSubmit = () => {
     this.handleSubmit({
       text: this.state.text

package/client/components/tree-list/tree-list-item.jsx

@@ -3,17 +3,11 @@
  */
 
 import { memo } from 'react'
-import createName, { createTitleTag } from '../../common/create-title'
+import { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
 import uid from '../../common/uid'
 
-function getItemLabel (item, isGroup) {
-  return isGroup
-    ? item?.title || ''
-    : createName(item)
-}
-
 function areEqual (prevProps, nextProps) {
   const prevSelected = prevProps.selectedItemId === prevProps.item.id
   const nextSelected = nextProps.selectedItemId === nextProps.item.id
@@ -27,10 +21,10 @@ function areEqual (prevProps, nextProps) {
     prevSelected === nextSelected &&
     prevSearchSelected === nextSearchSelected &&
     prevProps.item.id === nextProps.item.id &&
-    prevProps.item.level === nextProps.item.level &&
-    prevProps.item.color === nextProps.item.color &&
-    prevProps.item.description === nextProps.item.description &&
-    getItemLabel(prevProps.item, prevProps.isGroup) === getItemLabel(nextProps.item, nextProps.isGroup)
+    prevProps.itemLevel === nextProps.itemLevel &&
+    prevProps.itemColor === nextProps.itemColor &&
+    prevProps.itemDescription === nextProps.itemDescription &&
+    prevProps.itemLabel === nextProps.itemLabel
 }
 
 function TreeListItem (props) {
@@ -87,7 +81,7 @@ function TreeListItem (props) {
     : null
   const title = isGroup
     ? item.title
-    : createName(item)
+    : props.itemLabel
   const titleAll = title + (item.description ? ' - ' + item.description : '')
   const titleHighlight = isGroup
     ? item.title || 'no title'

package/client/components/tree-list/tree-list-row.jsx

@@ -2,6 +2,7 @@ import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeItemOp from './tree-item-op'
 import { treeLevelIndent } from './tree-list-layout'
+import createName from '../../common/create-title'
 
 export default function TreeListRow (props) {
   const {
@@ -38,6 +39,10 @@ export default function TreeListRow (props) {
     item,
     isGroup,
     parentId,
+    itemLabel: isGroup ? (item?.title || '') : createName(item),
+    itemColor: item?.color,
+    itemDescription: item?.description,
+    itemLevel: item?.level,
     leftSidebarWidth,
     staticList,
     selectedItemId: activeItemId,

package/client/components/tree-list/tree-list-rows.js

@@ -26,7 +26,9 @@ export function buildVisibleTreeRows ({
     const item = bookmarksMap.get(bookmarkId)
     const matched = Boolean(
       item &&
-      (!lowerKeyword || createName(item).toLowerCase().includes(lowerKeyword))
+      (!lowerKeyword ||
+        createName(item).toLowerCase().includes(lowerKeyword) ||
+        (item.description || '').toLowerCase().includes(lowerKeyword))
     )
     bookmarkMatchCache.set(bookmarkId, matched)
     return matched

package/client/store/mcp-handler.js

@@ -5,7 +5,7 @@
 
 import uid from '../common/uid'
 import { settingMap } from '../common/constants'
-import { refs } from '../components/common/ref'
+import { refs, refsTabs } from '../components/common/ref'
 import deepCopy from 'json-deep-copy'
 import {
   getLocalFileInfo,
@@ -107,6 +107,9 @@ export default Store => {
         case 'get_terminal_output':
           result = store.mcpGetTerminalOutput(args)
           break
+        case 'wait_for_terminal_idle':
+          result = await store.mcpWaitForTerminalIdle(args)
+          break
 
         // SFTP operations
         case 'sftp_list':
@@ -331,15 +334,18 @@ export default Store => {
 
   Store.prototype.mcpListTabs = function () {
     const { store } = window
-    return store.tabs.map(t => ({
-      id: t.id,
-      title: t.title,
-      host: t.host,
-      type: t.type || 'local',
-      status: t.status,
-      isTransporting: t.isTransporting,
-      batch: t.batch
-    }))
+    return store.tabs.map(t => {
+      return {
+        id: t.id,
+        title: t.title,
+        host: t.host,
+        type: t.type || 'local',
+        status: t.status,
+        isTransporting: t.isTransporting,
+        onData: refsTabs.get('tab-' + t.id)?.state.terminalOnData,
+        batch: t.batch
+      }
+    })
   }
 
   Store.prototype.mcpGetActiveTab = function () {
@@ -527,6 +533,73 @@ export default Store => {
     }
   }
 
+  Store.prototype.mcpWaitForTerminalIdle = async function (args) {
+    const { store } = window
+    const tabId = args.tabId || store.activeTabId
+    const timeout = Math.min(args.timeout || 30000, 120000)
+    const pollInterval = 500
+    const minWait = args.minWait !== undefined ? args.minWait : 1000
+    const lineCountToFetch = args.lines || 50
+
+    if (!tabId) {
+      throw new Error('No active terminal')
+    }
+
+    const start = Date.now()
+
+    // Brief initial wait so the command has time to start producing output
+    if (minWait > 0) {
+      await new Promise(resolve => setTimeout(resolve, minWait))
+    }
+
+    const collectOutput = () => {
+      const term = refs.get('term-' + tabId)
+      if (!term || !term.term) return { output: '', lineCount: 0 }
+      const buffer = term.term.buffer.active
+      if (!buffer) return { output: '', lineCount: 0 }
+      const cursorY = buffer.cursorY || 0
+      const baseY = buffer.baseY || 0
+      const totalLines = buffer.length || 0
+      const actualContentEnd = baseY + cursorY + 1
+      const startLine = Math.max(0, actualContentEnd - lineCountToFetch)
+      const endLine = Math.min(totalLines, actualContentEnd)
+      const lines = []
+      for (let i = startLine; i < endLine; i++) {
+        const line = buffer.getLine(i)
+        if (line) lines.push(line.translateToString(true))
+      }
+      return { output: lines.join('\n'), lineCount: lines.length }
+    }
+
+    // Poll until onData becomes false (4s idle debounce in tab.jsx)
+    while (Date.now() - start < timeout) {
+      const tabRef = refsTabs.get('tab-' + tabId)
+      const onData = tabRef?.state.terminalOnData
+      if (!onData) {
+        const { output, lineCount } = collectOutput()
+        return {
+          tabId,
+          elapsed: Date.now() - start,
+          timedOut: false,
+          output,
+          lineCount
+        }
+      }
+      await new Promise(resolve => setTimeout(resolve, pollInterval))
+    }
+
+    // Timeout reached — return whatever is currently in the buffer
+    const { output, lineCount } = collectOutput()
+    return {
+      tabId,
+      elapsed: Date.now() - start,
+      timedOut: true,
+      message: `Terminal still active after ${timeout}ms`,
+      output,
+      lineCount
+    }
+  }
+
   // ==================== Settings APIs ====================
 
   Store.prototype.mcpGetSettings = function () {

package/client/store/tab.js

@@ -622,6 +622,20 @@ export default Store => {
     }
   }
 
+  Store.prototype.notifyTabPasswordPrompt = function (tabId) {
+    const tab = refsTabs.get('tab-' + tabId)
+    if (tab) {
+      tab.notifyPasswordPrompt()
+    }
+  }
+
+  Store.prototype.clearTabPasswordPrompt = function (tabId) {
+    const tab = refsTabs.get('tab-' + tabId)
+    if (tab) {
+      tab.clearPasswordPrompt()
+    }
+  }
+
   Store.prototype.remoteList = function (tabId) {
     const sftp = refs.get('sftp-' + tabId)
     if (sftp) {

package/package.json

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