@electerm/electerm-react 3.11.12 → 3.15.0

package/client/components/terminal/terminal.jsx

@@ -7,6 +7,8 @@ import {
   Dropdown
 } from 'antd'
 import message from '../common/message'
+import { notification } from '../common/notification'
+import ShowItem from '../common/show-item.jsx'
 import Modal from '../common/modal'
 import classnames from 'classnames'
 import './terminal.styl'
@@ -26,13 +28,15 @@ import AttachAddon from './attach-addon-custom.js'
 import getProxy from '../../common/get-proxy.js'
 import { ZmodemClient } from './zmodem-client.js'
 import { TrzszClient } from './trzsz-client.js'
+import { XmodemClient } from './xmodem-client.js'
 import DropFileModal from './drop-file-modal.jsx'
 import keyControlPressed from '../../common/key-control-pressed.js'
 import NormalBuffer from './normal-buffer.jsx'
-import { createTerm, resizeTerm } from './terminal-apis.js'
+import { createTerm, resizeTerm, startTerminalLogFile, toggleTerminalLog } from './terminal-apis.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 import { KeywordHighlighterAddon } from './highlight-addon.js'
 import { getFilePath, isUnsafeFilename } from '../../common/file-drop-utils.js'
+import { getFolderFromFilePath } from '../sftp/file-read.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
 import {
@@ -71,6 +75,9 @@ class Term extends Component {
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
       logPath: this.props.config.sessionLogPath || createDefaultLogPath(),
+      logFileName: '',
+      recording: false,
+      recordingFilePath: '',
       passType: 'password',
       lines: [],
       searchResults: [],
@@ -165,6 +172,7 @@ class Term extends Component {
     this.fitAddon = null
     this.zmodemClient = null
     this.trzszClient = null
+    this.xmodemClient = null
     this.searchAddon = null
     this.fitAddon = null
     this.cmdAddon = null
@@ -391,6 +399,7 @@ class Term extends Component {
     const fromFile = dt.getData('fromFile')
     const notSafeMsg = 'File name contains unsafe characters'
     const isSshTerminal = this.props.tab.type === connectionMap.ssh
+    const isSerialTerminal = this.props.tab.type === connectionMap.serial
 
     if (fromFile) {
       try {
@@ -412,6 +421,13 @@ class Term extends Component {
           }
           return
         }
+        if (isSerialTerminal) {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: [{ path: filePath, isRemote: false }]
+          })
+          return
+        }
         this.attachAddon._sendData(`"${filePath}" `)
         return
       } catch (e) {
@@ -443,6 +459,14 @@ class Term extends Component {
         return
       }
 
+      if (isSerialTerminal) {
+        this.setState({
+          dropFileModalVisible: true,
+          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+        })
+        return
+      }
+
       const filesAll = filePaths.map(path => `"${path}"`).join(' ')
       this.attachAddon._sendData(filesAll)
     }
@@ -485,6 +509,19 @@ class Term extends Component {
         this.attachAddon._sendData('rz\r')
         break
       }
+      case 'xmodem': {
+        if (this.xmodemClient && this.xmodemClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        // Use XMODEM send with the dropped files
+        window._apiControlSelectFile = filePaths
+        if (this.xmodemClient) {
+          this.xmodemClient.initiateSend()
+        }
+        break
+      }
       case 'inputOnly':
       default: {
         const filesAll = filePaths.map(path => `"${path}"`).join(' ')
@@ -645,15 +682,109 @@ class Term extends Component {
     )
   }
 
+  getTerminalBufferText = () => {
+    const { addTimeStampToTermLog } = this.state
+    const buffer = this.term.buffer.active
+    const len = buffer.length
+    const rawLines = []
+    for (let i = 0; i < len; i++) {
+      const line = buffer.getLine(i)
+      rawLines.push(line ? line.translateToString(false) : '')
+    }
+    // trim trailing blank lines before applying timestamps
+    while (rawLines.length && !rawLines[rawLines.length - 1].trim()) {
+      rawLines.pop()
+    }
+    if (!addTimeStampToTermLog) {
+      return rawLines.join('\n')
+    }
+    return rawLines.map(text => {
+      const now = new Date()
+      const ts = `[${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}] `
+      return ts + text
+    }).join('\n')
+  }
+
+  syncTermInfo = (stateUpdate) => {
+    this.setState(stateUpdate)
+    const infoUpdate = pick(stateUpdate, ['saveTerminalLogToFile', 'addTimeStampToTermLog', 'logPath', 'logFileName'])
+    if (Object.keys(infoUpdate).length) {
+      refs.get('term-info-' + this.props.tab.id)?.setState(infoUpdate)
+    }
+  }
+
+  openLogSaveDialog = async (titleKey) => {
+    const { logName } = this.props
+    const result = await window.api.saveDialog({
+      title: e(titleKey),
+      defaultPath: logName + '.log',
+      filters: [
+        { name: 'Log files', extensions: ['log'] }
+      ],
+      properties: ['createDirectory', 'showOverwriteConfirmation']
+    })
+    if (result.canceled || !result.filePath) {
+      return null
+    }
+    return result.filePath
+  }
+
+  onSaveTerminalLog = async () => {
+    const filePath = await this.openLogSaveDialog('saveTerminalLogToFile')
+    if (!filePath) {
+      return
+    }
+    const content = this.getTerminalBufferText()
+    await window.fs.writeFile(filePath, content).catch(window.store.onError)
+    const { addTimeStampToTermLog } = this.state
+    startTerminalLogFile(this.pid, filePath, addTimeStampToTermLog).catch(window.store.onError)
+    const { path: logPath, name: logFileName } = getFolderFromFilePath(filePath, false)
+    this.syncTermInfo({ saveTerminalLogToFile: true, logPath, logFileName })
+    notification.success({
+      message: e('saveTerminalLogToFile'),
+      description: <ShowItem to={filePath}>{filePath}</ShowItem>,
+      duration: 5
+    })
+  }
+
+  onRecord = async () => {
+    const filePath = await this.openLogSaveDialog('record')
+    if (!filePath) {
+      return
+    }
+    const { addTimeStampToTermLog } = this.state
+    startTerminalLogFile(this.pid, filePath, addTimeStampToTermLog).catch(window.store.onError)
+    const { path: logPath, name: logFileName } = getFolderFromFilePath(filePath, false)
+    this.syncTermInfo({ saveTerminalLogToFile: true, logPath, logFileName })
+    this.setState({ recording: true, recordingFilePath: filePath })
+    notification.success({
+      message: e('record'),
+      description: <ShowItem to={filePath}>{filePath}</ShowItem>,
+      duration: 5
+    })
+  }
+
+  onStopRecord = () => {
+    const { recordingFilePath } = this.state
+    toggleTerminalLog(this.pid).catch(window.store.onError)
+    this.syncTermInfo({ saveTerminalLogToFile: false })
+    this.setState({ recording: false, recordingFilePath: '' })
+    notification.success({
+      message: e('stopRecord'),
+      description: <ShowItem to={recordingFilePath}>{recordingFilePath}</ShowItem>
+    })
+  }
+
   renderContextMenu = () => {
-    const { hasSelection } = this.state
+    const { hasSelection, recording } = this.state
     const copyed = true
     const copyShortcut = this.getShortcut('terminal_copy')
     const pasteShortcut = this.getShortcut('terminal_paste')
     const clearShortcut = this.getShortcut('terminal_clear')
     const searchShortcut = this.getShortcut('terminal_search')
     const selectAllShortcut = isMacJs ? 'meta+a' : 'ctrl+shift+a'
-    return [
+    const isSerial = this.props.tab?.type === connectionMap.serial
+    const items = [
       {
         key: 'onCopy',
         icon: <iconsMap.CopyOutlined />,
@@ -698,14 +829,56 @@ class Term extends Component {
         icon: <iconsMap.SearchOutlined />,
         label: e('search'),
         extra: searchShortcut
+      },
+      {
+        key: 'onSaveTerminalLog',
+        icon: <iconsMap.SaveOutlined />,
+        label: e('saveTerminalLogToFile')
+      },
+      {
+        key: recording ? 'onStopRecord' : 'onRecord',
+        icon: recording ? <iconsMap.StopOutlined /> : <iconsMap.PlayCircleFilled />,
+        label: e(recording ? 'stopRecord' : 'record')
       }
     ]
+    if (isSerial) {
+      items.push(
+        {
+          type: 'divider'
+        },
+        {
+          key: 'onXmodemSend',
+          icon: <iconsMap.CloudUploadOutlined />,
+          label: 'XMODEM Send'
+        },
+        {
+          key: 'onXmodemReceive',
+          icon: <iconsMap.CloudDownloadOutlined />,
+          label: 'XMODEM Receive'
+        }
+      )
+    }
+    return items
   }
 
   onContextMenu = ({ key }) => {
     this[key]()
   }
 
+  onXmodemSend = () => {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateSend()
+    }
+    this.term.focus()
+  }
+
+  onXmodemReceive = () => {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateReceive()
+    }
+    this.term.focus()
+  }
+
   notifyOnData = debounce(() => {
     window.store.notifyTabOnData(this.props.tab.id)
   }, 1000)
@@ -1320,6 +1493,8 @@ class Term extends Component {
     this.zmodemClient.init(socket)
     this.trzszClient = new TrzszClient(this)
     this.trzszClient.init(socket)
+    this.xmodemClient = new XmodemClient(this)
+    this.xmodemClient.init(socket)
     this.fitAddon.fit()
     term.displayRaw = displayRaw
     term.loadAddon(
@@ -1581,6 +1756,7 @@ class Term extends Component {
           <DropFileModal
             visible={this.state.dropFileModalVisible}
             files={this.state.droppedFiles}
+            isSerial={this.props.tab?.type === connectionMap.serial}
             onSelect={this.handleDropFileAction}
             onCancel={this.handleDropFileModalCancel}
           />

package/client/components/terminal/xmodem-client.js

@@ -0,0 +1,244 @@
+/**
+ * XMODEM client handler for web terminal
+ * Handles UI interactions and communicates with server-side xmodem
+ * Unlike zmodem/trzsz, XMODEM requires explicit user initiation
+ */
+
+import { throttle } from 'lodash-es'
+import { filesize } from 'filesize'
+import { TransferClientBase } from './transfer-client-base.js'
+import { transferTypeMap } from '../../common/constants.js'
+
+const XMODEM_SAVE_PATH_KEY = 'xmodem-save-path'
+
+/**
+ * XmodemClient class handles XMODEM UI and client-side logic
+ */
+export class XmodemClient extends TransferClientBase {
+  constructor (terminal) {
+    super(terminal, XMODEM_SAVE_PATH_KEY)
+    this.transferStartTime = 0
+    this.pendingMode = null // 'send' or 'receive' - waiting for user action
+  }
+
+  /**
+   * Get the action name for this protocol
+   * @returns {string}
+   */
+  getActionName () {
+    return 'xmodem-event'
+  }
+
+  /**
+   * Get protocol display name
+   * @returns {string}
+   */
+  getProtocolDisplayName () {
+    return 'XMODEM'
+  }
+
+  /**
+   * Handle server xmodem events
+   * @param {Object} msg - Message from server
+   */
+  handleServerEvent (msg) {
+    const { event } = msg
+
+    switch (event) {
+      case 'receive-start':
+        this.onReceiveStart()
+        break
+      case 'send-start':
+        this.onSendStart()
+        break
+      case 'file-start':
+        this.onFileStart(msg.name, msg.size)
+        break
+      case 'progress':
+        this.onProgress(msg)
+        break
+      case 'file-complete':
+        this.onFileComplete(msg.name, msg.path)
+        break
+      case 'session-end':
+        this.onSessionEnd()
+        break
+      case 'session-error':
+        this.onError(msg.error)
+        break
+    }
+  }
+
+  /**
+   * Initiate XMODEM receive from UI
+   * User must have already started `sx` (or similar) on the remote device
+   */
+  async initiateReceive () {
+    if (this.isActive) {
+      this.writeToTerminal('\r\n\x1b[33m\x1b[1mXMODEM: Transfer already in progress\x1b[0m\r\n')
+      return
+    }
+
+    this.isActive = true
+    this.writeBanner('RECEIVE', null)
+
+    // Ask user for save directory
+    const savePath = await this.openSaveFolderSelect()
+    if (savePath) {
+      this.savePath = savePath
+      this.sendToServer({
+        event: 'start-receive'
+      })
+      // Also send save path
+      this.sendToServer({
+        event: 'set-save-path',
+        path: savePath
+      })
+    } else {
+      // User cancelled
+      this.isActive = false
+    }
+  }
+
+  /**
+   * Initiate XMODEM send from UI
+   * User must have already started `rx` (or similar) on the remote device
+   */
+  async initiateSend () {
+    if (this.isActive) {
+      this.writeToTerminal('\r\n\x1b[33m\x1b[1mXMODEM: Transfer already in progress\x1b[0m\r\n')
+      return
+    }
+
+    this.isActive = true
+    this.writeBanner('SEND', null)
+
+    // Ask user to select files
+    const files = await this.openFileSelect({
+      title: 'Choose file(s) to send via XMODEM',
+      message: 'Choose file(s) to send via XMODEM'
+    })
+    if (files && files.length > 0) {
+      this.sendToServer({
+        event: 'start-send'
+      })
+      // Also send files
+      this.sendToServer({
+        event: 'send-files',
+        files
+      })
+    } else {
+      // User cancelled
+      this.isActive = false
+    }
+  }
+
+  /**
+   * Handle receive session start (from server)
+   */
+  onReceiveStart () {
+    // Server confirmed it's ready to receive
+    this.writeToTerminal('\r\n\x1b[36mWaiting for remote to start sending file...\x1b[0m\r\n')
+  }
+
+  /**
+   * Handle send session start (from server)
+   */
+  onSendStart () {
+    // Server confirmed it's ready to send
+    this.writeToTerminal('\r\n\x1b[36mWaiting for remote to request file (NAK/C)...\x1b[0m\r\n')
+  }
+
+  /**
+   * Handle file start event
+   * @param {string} name - File name
+   * @param {number} size - File size
+   */
+  onFileStart (name, size) {
+    this.currentTransfer = {
+      name,
+      size,
+      transferred: 0,
+      type: this.savePath ? transferTypeMap.download : transferTypeMap.upload,
+      path: null
+    }
+    this.transferStartTime = Date.now()
+    this.writeProgress()
+  }
+
+  /**
+   * Handle progress update
+   * @param {Object} msg - Progress message
+   */
+  onProgress (msg) {
+    if (!this.currentTransfer) {
+      this.currentTransfer = {
+        name: msg.name,
+        size: msg.size,
+        transferred: 0,
+        type: msg.type,
+        path: msg.path || null
+      }
+      this.transferStartTime = Date.now()
+    }
+
+    this.currentTransfer.transferred = msg.transferred
+    this.currentTransfer.serverSpeed = msg.speed
+    this.currentTransfer.path = msg.path || this.currentTransfer.path
+    this.writeProgress()
+  }
+
+  /**
+   * Handle file complete
+   * @param {string} name - File name
+   * @param {string} path - File path
+   */
+  onFileComplete (name, path) {
+    if (this.currentTransfer) {
+      this.currentTransfer.transferred = this.currentTransfer.size || this.currentTransfer.transferred
+      this.currentTransfer.path = path
+      this._doWriteProgress(true)
+      this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
+    }
+    this.currentTransfer = null
+  }
+
+  /**
+   * Handle error from server
+   * @param {string} error - Error message
+   */
+  onError (error) {
+    this.writeToTerminal(`\r\n\x1b[31m\x1b[1mXMODEM Error: ${error}\x1b[0m\r\n`)
+  }
+
+  /**
+   * Write progress to terminal (throttled)
+   */
+  writeProgress = throttle((isComplete = false) => {
+    this._doWriteProgress(isComplete)
+  }, 500)
+
+  /**
+   * Internal function to actually write progress
+   */
+  _doWriteProgress (isComplete = false) {
+    if (!this.currentTransfer || !this.terminal?.term) return
+
+    const { name, size, transferred, path, serverSpeed } = this.currentTransfer
+    const speed = serverSpeed || 0
+    const displayName = path || name
+    const formatSize = (bytes) => filesize(bytes)
+
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
+  }
+}
+
+export default XmodemClient

package/client/components/terminal-info/base.jsx

@@ -8,7 +8,7 @@ import {
   Button
 } from 'antd'
 import defaults from '../../common/default-setting'
-import { toggleTerminalLog, toggleTerminalLogTimestamp, setTerminalLogPath } from '../terminal/terminal-apis'
+import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 import {
   ClockCircleOutlined,
   BorderlessTableOutlined,
@@ -18,7 +18,9 @@ import {
   PartitionOutlined
 } from '@ant-design/icons'
 import { refs } from '../common/ref'
-import LogPathEdit from './log-path-edit'
+import ShowItem from '../common/show-item'
+import { osResolve } from '../../common/resolve'
+import createDefaultLogPath from '../../common/default-log-path'
 
 const e = window.translate
 
@@ -35,15 +37,20 @@ export default class TerminalInfoBase extends Component {
   state = {
     saveTerminalLogToFile: false,
     addTimeStampToTermLog: false,
-    logPath: ''
+    logPath: '',
+    logFileName: ''
   }
 
   componentDidMount () {
+    const { pid } = this.props
+    refs.add('term-info-' + pid, this)
     this.getState()
   }
 
   componentWillUnmount () {
     clearTimeout(this.timer)
+    const { pid } = this.props
+    refs.remove('term-info-' + pid)
   }
 
   handleToggleTimestamp = () => {
@@ -74,17 +81,6 @@ export default class TerminalInfoBase extends Component {
     })
   }
 
-  onLogPathChange = (v) => {
-    const { pid } = this.props
-    setTerminalLogPath(pid, v)
-    refs.get('term-' + pid)?.setState({
-      logPath: v
-    })
-    this.setState({
-      logPath: v
-    })
-  }
-
   handleToggle = () => {
     const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
@@ -112,7 +108,8 @@ export default class TerminalInfoBase extends Component {
       this.setState({
         saveTerminalLogToFile: term.state.saveTerminalLogToFile,
         addTimeStampToTermLog: term.state.addTimeStampToTermLog,
-        logPath: term.state.logPath
+        logPath: term.state.logPath,
+        logFileName: term.state.logFileName || ''
       })
     } else {
       this.timer = setTimeout(this.getState, 100)
@@ -166,39 +163,45 @@ export default class TerminalInfoBase extends Component {
   render () {
     const {
       id,
-      logName,
-      pid
+      logName
     } = this.props
-    const { saveTerminalLogToFile, logPath } = this.state
+    const { saveTerminalLogToFile, logPath, logFileName } = this.state
     const name = e('saveTerminalLogToFile')
+    const base = logPath || createDefaultLogPath()
+    const fileName = logFileName || (logName + '.log')
+    const fullPath = osResolve(base, fileName)
     return (
       <div className='terminal-info-section terminal-info-base'>
-        <div className='fix'>
-          <span className='fleft'><b>ID:</b> {id}</span>
-          <span className='fright'>
-            <Switch
-              checkedChildren={name}
-              unCheckedChildren={name}
-              checked={saveTerminalLogToFile}
-              onChange={this.handleToggle}
-              className='mg1r mg1b'
-            />
-            {
-              this.renderTimestamp()
-            }
-          </span>
+        <div className='pd1b'>
+          <b>ID:</b> {id}
+        </div>
+        <div className='pd1b'>
+          <Switch
+            checkedChildren={name}
+            unCheckedChildren={name}
+            checked={saveTerminalLogToFile}
+            onChange={this.handleToggle}
+            className='mg1r mg1b'
+          />
+          {
+            this.renderTimestamp()
+          }
         </div>
+        {
+          saveTerminalLogToFile
+            ? (
+              <div className='pd1b font-xs color-grey'>
+                {e('terminalLogPath')}: {fullPath} <ShowItem to={fullPath} />
+              </div>
+              )
+            : null
+        }
         <div className='pd2y'>
           {
             this.renderInfoSelection()
           }
         </div>
-        <LogPathEdit
-          pid={pid}
-          logPath={logPath}
-          logName={logName}
-          setLogPath={this.onLogPathChange}
-        />
+
       </div>
     )
   }

package/client/components/terminal-info/data-cols-parser.jsx

@@ -24,7 +24,8 @@ export default (data) => {
   return Object.keys(data).map(k => {
     const rd = (txt) => {
       // txt is in KB, convert to bytes for filesize function
-      const r = k === 'mem' ? filesize(parseInt(txt, 10) * 1024) : txt
+      const parsed = parseInt(txt, 10)
+      const r = k === 'mem' ? filesize(Number.isFinite(parsed) ? parsed * 1024 : 0) : txt
       const itemProps = {
         className: 'activity-item pointer',
         'data-content': r,

package/client/components/terminal-info/disk.jsx

@@ -14,10 +14,12 @@ export default function TerminalInfoDisk (props) {
   }
   const col = colsParser(disks[0])
   disks.sort((a, b) => {
-    if (a.filesystem.startsWith('/') && !b.filesystem.startsWith('/')) {
+    const af = a.filesystem || ''
+    const bf = b.filesystem || ''
+    if (af.startsWith('/') && !bf.startsWith('/')) {
       return -1
     }
-    if (!a.filesystem.startsWith('/') && b.filesystem.startsWith('/')) {
+    if (!af.startsWith('/') && bf.startsWith('/')) {
       return 1
     }
     return 0

package/client/components/terminal-info/log-path-edit.jsx

@@ -12,10 +12,11 @@ import { osResolve } from '../../common/resolve'
 
 const e = window.translate
 
-export default function LogPathEdit ({ pid, logPath, logName, setLogPath }) {
+export default function LogPathEdit ({ pid, logPath, logName, logFileName, setLogPath }) {
   const defaultPath = createDefaultLogPath()
   const base = logPath || defaultPath
-  const fullPath = osResolve(base, logName + '.log')
+  const fileName = logFileName || (logName + '.log')
+  const fullPath = osResolve(base, fileName)
 
   const testAndSet = async (v) => {
     if (v) {