@electerm/electerm-react 2.8.8 → 2.10.6

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

@@ -0,0 +1,306 @@
+/**
+ * Trzsz client handler for web terminal
+ * Handles UI interactions and communicates with server-side trzsz
+ */
+
+import { throttle } from 'lodash-es'
+import { filesize } from 'filesize'
+import { TransferClientBase } from './transfer-client-base.js'
+import { transferTypeMap } from '../../common/constants.js'
+
+const TRZSZ_SAVE_PATH_KEY = 'trzsz-save-path'
+
+/**
+ * TrzszClient class handles trzsz UI and client-side logic
+ */
+export class TrzszClient extends TransferClientBase {
+  constructor (terminal) {
+    super(terminal, TRZSZ_SAVE_PATH_KEY)
+    this.transferStartTime = 0
+    this.totalTransferred = 0
+    this.totalSpeed = 0
+  }
+
+  /**
+   * Get the action name for this protocol
+   * @returns {string}
+   */
+  getActionName () {
+    return 'trzsz-event'
+  }
+
+  /**
+   * Get protocol display name
+   * @returns {string}
+   */
+  getProtocolDisplayName () {
+    return 'TRZSZ'
+  }
+
+  /**
+   * Handle server trzsz 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(msg.directory)
+        break
+      case 'file-count':
+        this.onFileCount(msg.count)
+        break
+      case 'file-start':
+        this.onFileStart(msg.name, msg.size)
+        break
+      case 'file-size':
+        this.onFileSize(msg.name, msg.size)
+        break
+      case 'progress':
+        this.onProgress(msg)
+        break
+      case 'file-complete':
+        this.onFileComplete(msg.name, msg.path)
+        break
+      case 'session-complete':
+        this.onSessionComplete(msg)
+        break
+      case 'session-error':
+        this.onError(msg.error)
+        break
+      case 'session-end':
+        this.onSessionEnd()
+        break
+    }
+  }
+
+  /**
+   * Handle receive session start (download from remote)
+   */
+  async onReceiveStart () {
+    this.isActive = true
+    this.writeBanner('RECEIVE')
+
+    // Ask user for save directory
+    const savePath = await this.openSaveFolderSelect()
+    if (savePath) {
+      this.savePath = savePath
+      this.sendToServer({
+        event: 'set-save-path',
+        path: savePath
+      })
+    } else {
+      // User cancelled, end session
+      this.sendToServer({
+        event: 'set-save-path',
+        path: null
+      })
+      this.onSessionEnd()
+    }
+  }
+
+  /**
+   * Handle send session start (upload to remote)
+   * @param {boolean} directory - Whether to select directories
+   */
+  async onSendStart (directory = false) {
+    this.isActive = true
+    this.writeBanner('SEND')
+
+    // Ask user to select files or directories
+    const files = await this.openFileSelect({
+      directory,
+      title: directory ? 'Choose directories to send' : 'Choose some files to send',
+      message: directory ? 'Choose directories to send' : 'Choose some files to send'
+    })
+
+    if (files && files.length > 0) {
+      this.sendToServer({
+        event: 'send-files',
+        files
+      })
+    } else {
+      // User cancelled, end session
+      this.sendToServer({
+        event: 'send-files',
+        files: []
+      })
+      this.onSessionEnd()
+    }
+  }
+
+  /**
+   * Handle file count event
+   * @param {number} count - Number of files
+   */
+  onFileCount (count) {
+    this.writeToTerminal(`\r\n\x1b[36mReceiving ${count} file${count > 1 ? 's' : ''}...\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 file size event
+   * @param {string} name - File name
+   * @param {number} size - File size
+   */
+  onFileSize (name, size) {
+    if (this.currentTransfer) {
+      this.currentTransfer.size = size
+    }
+  }
+
+  /**
+   * 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 // Use server's speed calculation
+    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.path = path
+      // Call directly to ensure 100% is displayed immediately
+      this._doWriteProgress(true)
+      // Add newline after completion
+      this.writeToTerminal('\r\n')
+    }
+    this.currentTransfer = null
+  }
+
+  /**
+   * Write progress to terminal (throttled for updates, immediate for completion)
+   * @param {boolean} isComplete - Whether this is the final completion display
+   */
+  writeProgress = throttle((isComplete = false) => {
+    this._doWriteProgress(isComplete)
+  }, 500)
+
+  /**
+   * Internal function to actually write progress
+   * @param {boolean} isComplete - Whether this is the final completion display
+   */
+  _doWriteProgress (isComplete = false) {
+    if (!this.currentTransfer || !this.terminal?.term) return
+
+    const { name, size, transferred, path, serverSpeed } = this.currentTransfer
+    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
+
+    // Use server's speed if available, otherwise calculate locally
+    const speed = serverSpeed || 0
+
+    // Use full path if available, otherwise just name
+    const displayName = path || name
+
+    // filesize expects bytes and formats to human readable
+    const formatSize = (bytes) => filesize(bytes)
+
+    // Clear line and write progress
+    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
+    this.writeToTerminal(str + '\r')
+  }
+
+  /**
+   * Handle session complete
+   * @param {Object} msg - Completion message with files and savePath
+   */
+  onSessionComplete (msg) {
+    // Add newline to preserve progress display
+    this.writeToTerminal('\r\n')
+
+    // Display completion message
+    if (msg.message) {
+      this.writeToTerminal(`\x1b[32m\x1b[1m${msg.message}\x1b[0m\r\n`)
+    }
+
+    // Display saved files for download
+    if (msg.files && msg.files.length > 0) {
+      const fileCount = msg.files.length
+      const savePath = msg.savePath || ''
+
+      // Format file size
+      const formatSize = (bytes) => filesize(bytes)
+
+      // Display total transfer info
+      if (msg.totalBytes && msg.totalBytes > 0) {
+        const totalSize = formatSize(msg.totalBytes)
+        const elapsed = msg.totalElapsed ? msg.totalElapsed.toFixed(1) : '0.0'
+        const speed = msg.avgSpeed ? formatSize(msg.avgSpeed) : '0 B'
+        this.writeToTerminal(`\x1b[32m\x1b[1mTransferred ${fileCount} ${fileCount > 1 ? 'files' : 'file'} (${totalSize}) in ${elapsed}s, avg speed: ${speed}/s\x1b[0m\r\n`)
+      } else {
+        this.writeToTerminal(`\x1b[32m\x1b[1mSaved ${fileCount} ${fileCount > 1 ? 'files' : 'file'}\x1b[0m\r\n`)
+      }
+
+      if (savePath) {
+        this.writeToTerminal(`\x1b[36mDestination: ${savePath}\x1b[0m\r\n`)
+      }
+
+      // Display file list with sizes
+      if (msg.completedFiles && msg.completedFiles.length > 0) {
+        for (const file of msg.completedFiles) {
+          const sizeStr = file.size ? ` (${formatSize(file.size)})` : ''
+          this.writeToTerminal(`  - ${file.name}${sizeStr}\r\n`)
+        }
+      } else {
+        // Fallback to just file names
+        for (const file of msg.files) {
+          const fileName = file.split('/').pop().split('\\').pop()
+          this.writeToTerminal(`  - ${fileName}\r\n`)
+        }
+      }
+    }
+
+    this.onSessionEnd()
+  }
+
+  /**
+   * Handle error
+   * @param {string} message - Error message
+   */
+  onError (message) {
+    this.writeToTerminal(`\r\n\x1b[31m\x1b[1mTRZSZ Error: ${message}\x1b[0m\r\n`)
+    this.onSessionEnd()
+  }
+}
+
+export default TrzszClient

package/client/components/terminal/xterm-loader.js

@@ -0,0 +1,109 @@
+window.xtermAddons = window.xtermAddons || {}
+
+let xtermCssLoaded = false
+
+function loadXtermCss () {
+  if (xtermCssLoaded) return
+  xtermCssLoaded = true
+  import('@xterm/xterm/css/xterm.css')
+}
+
+export async function loadTerminal () {
+  if (window.xtermAddons.Terminal) return window.xtermAddons.Terminal
+  loadXtermCss()
+  const mod = await import('@xterm/xterm')
+  window.xtermAddons.Terminal = mod.Terminal
+  return window.xtermAddons.Terminal
+}
+
+export async function loadFitAddon () {
+  if (window.xtermAddons.FitAddon) return window.xtermAddons.FitAddon
+  const mod = await import('@xterm/addon-fit')
+  window.xtermAddons.FitAddon = mod.FitAddon
+  return window.xtermAddons.FitAddon
+}
+
+export async function loadAttachAddon () {
+  if (window.xtermAddons.AttachAddon) return window.xtermAddons.AttachAddon
+  const mod = await import('@xterm/addon-attach')
+  window.xtermAddons.AttachAddon = mod.AttachAddon
+  return window.xtermAddons.AttachAddon
+}
+
+export async function loadWebLinksAddon () {
+  if (window.xtermAddons.WebLinksAddon) return window.xtermAddons.WebLinksAddon
+  const mod = await import('@xterm/addon-web-links')
+  window.xtermAddons.WebLinksAddon = mod.WebLinksAddon
+  return window.xtermAddons.WebLinksAddon
+}
+
+export async function loadCanvasAddon () {
+  if (window.xtermAddons.CanvasAddon) return window.xtermAddons.CanvasAddon
+  const mod = await import('@xterm/addon-canvas')
+  window.xtermAddons.CanvasAddon = mod.CanvasAddon
+  return window.xtermAddons.CanvasAddon
+}
+
+export async function loadWebglAddon () {
+  if (window.xtermAddons.WebglAddon) return window.xtermAddons.WebglAddon
+  const mod = await import('@xterm/addon-webgl')
+  window.xtermAddons.WebglAddon = mod.WebglAddon
+  return window.xtermAddons.WebglAddon
+}
+
+export async function loadSearchAddon () {
+  if (window.xtermAddons.SearchAddon) return window.xtermAddons.SearchAddon
+  const mod = await import('@xterm/addon-search')
+  window.xtermAddons.SearchAddon = mod.SearchAddon
+  return window.xtermAddons.SearchAddon
+}
+
+export async function loadLigaturesAddon () {
+  if (window.xtermAddons.LigaturesAddon) return window.xtermAddons.LigaturesAddon
+  const mod = await import('@xterm/addon-ligatures')
+  window.xtermAddons.LigaturesAddon = mod.LigaturesAddon
+  return window.xtermAddons.LigaturesAddon
+}
+
+export async function loadUnicode11Addon () {
+  if (window.xtermAddons.Unicode11Addon) return window.xtermAddons.Unicode11Addon
+  const mod = await import('@xterm/addon-unicode11')
+  window.xtermAddons.Unicode11Addon = mod.Unicode11Addon
+  return window.xtermAddons.Unicode11Addon
+}
+
+export function getTerminal () {
+  return window.xtermAddons.Terminal
+}
+
+export function getFitAddon () {
+  return window.xtermAddons.FitAddon
+}
+
+export function getAttachAddon () {
+  return window.xtermAddons.AttachAddon
+}
+
+export function getWebLinksAddon () {
+  return window.xtermAddons.WebLinksAddon
+}
+
+export function getCanvasAddon () {
+  return window.xtermAddons.CanvasAddon
+}
+
+export function getWebglAddon () {
+  return window.xtermAddons.WebglAddon
+}
+
+export function getSearchAddon () {
+  return window.xtermAddons.SearchAddon
+}
+
+export function getLigaturesAddon () {
+  return window.xtermAddons.LigaturesAddon
+}
+
+export function getUnicode11Addon () {
+  return window.xtermAddons.Unicode11Addon
+}

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

@@ -5,54 +5,34 @@
 
 import { throttle } from 'lodash-es'
 import { filesize } from 'filesize'
+import { TransferClientBase } from './transfer-client-base.js'
 import { transferTypeMap } from '../../common/constants.js'
-import { getLocalFileInfo } from '../sftp/file-read.js'
 
 const ZMODEM_SAVE_PATH_KEY = 'zmodem-save-path'
 
 /**
  * ZmodemClient class handles zmodem UI and client-side logic
  */
-export class ZmodemClient {
+export class ZmodemClient extends TransferClientBase {
   constructor (terminal) {
-    this.terminal = terminal
-    this.socket = null
-    this.isActive = false
-    this.currentTransfer = null
-    this.savePath = null
+    super(terminal, ZMODEM_SAVE_PATH_KEY)
     this.transferStartTime = 0
   }
 
   /**
-   * Initialize zmodem client with socket
-   * @param {WebSocket} socket - WebSocket connection
+   * Get the action name for this protocol
+   * @returns {string}
    */
-  init (socket) {
-    this.socket = socket
-    this.setupMessageHandler()
+  getActionName () {
+    return 'zmodem-event'
   }
 
   /**
-   * Setup message handler for zmodem events from server
+   * Get protocol display name
+   * @returns {string}
    */
-  setupMessageHandler () {
-    if (!this.socket) return
-
-    // Use addEventListener to avoid conflicting with attach-addon's onmessage
-    this.messageHandler = (event) => {
-      // Check if it's a JSON message (zmodem control message)
-      if (typeof event.data === 'string') {
-        try {
-          const msg = JSON.parse(event.data)
-          if (msg.action === 'zmodem-event') {
-            this.handleServerEvent(msg)
-          }
-        } catch (e) {
-          // Not JSON, ignore
-        }
-      }
-    }
-    this.socket.addEventListener('message', this.messageHandler)
+  getProtocolDisplayName () {
+    return 'ZMODEM'
   }
 
   /**
@@ -90,25 +70,12 @@ export class ZmodemClient {
     }
   }
 
-  /**
-   * Send message to server
-   * @param {Object} msg - Message to send
-   */
-  sendToServer (msg) {
-    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-      this.socket.send(JSON.stringify({
-        action: 'zmodem-event',
-        ...msg
-      }))
-    }
-  }
-
   /**
    * Handle receive session start
    */
   async onReceiveStart () {
     this.isActive = true
-    this.writeBanner('RECEIVE')
+    this.writeBanner('RECEIVE', 'Recommend use trzsz instead: https://github.com/trzsz/trzsz')
 
     // Ask user for save directory
     const savePath = await this.openSaveFolderSelect()
@@ -132,7 +99,7 @@ export class ZmodemClient {
    */
   async onSendStart () {
     this.isActive = true
-    this.writeBanner('SEND')
+    this.writeBanner('SEND', 'Recommend use trzsz instead: https://github.com/trzsz/trzsz')
 
     // Ask user to select files
     const files = await this.openFileSelect()
@@ -229,31 +196,6 @@ export class ZmodemClient {
     this.currentTransfer = null
   }
 
-  /**
-   * Handle session end
-   */
-  onSessionEnd () {
-    this.isActive = false
-    this.currentTransfer = null
-    this.savePath = null
-    if (this.terminal && this.terminal.term) {
-      this.terminal.term.focus()
-      this.terminal.term.write('\r\n')
-    }
-  }
-
-  /**
-   * Write banner to terminal
-   * @param {string} type - 'RECEIVE' or 'SEND'
-   */
-  writeBanner (type) {
-    const border = '='.repeat(50)
-    this.writeToTerminal(`\r\n${border}\r\n`)
-    this.writeToTerminal('\x1b[33m\x1b[1mRecommend use trzsz instead: https://github.com/trzsz/trzsz\x1b[0m\r\n')
-    this.writeToTerminal(`${border}\r\n\r\n`)
-    this.writeToTerminal(`\x1b[32m\x1b[1mZMODEM::${type}::START\x1b[0m\r\n`)
-  }
-
   /**
    * Write progress to terminal (throttled for updates, immediate for completion)
    * @param {boolean} isComplete - Whether this is the final completion display
@@ -285,101 +227,6 @@ export class ZmodemClient {
     const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
     this.writeToTerminal(str + '\r')
   }
-
-  /**
-   * Write text to terminal
-   * @param {string} text - Text to write
-   */
-  writeToTerminal (text) {
-    if (this.terminal && this.terminal.term) {
-      this.terminal.term.write(text)
-    }
-  }
-
-  /**
-   * Open file select dialog
-   * @returns {Promise<Array>} - Selected files
-   */
-  openFileSelect = async () => {
-    const properties = [
-      'openFile',
-      'multiSelections',
-      'showHiddenFiles',
-      'noResolveAliases',
-      'treatPackageAsDirectory',
-      'dontAddToRecent'
-    ]
-    const files = await window.api.openDialog({
-      title: 'Choose some files to send',
-      message: 'Choose some files to send',
-      properties
-    }).catch(() => false)
-    if (!files || !files.length) {
-      return null
-    }
-    const r = []
-    for (const filePath of files) {
-      const stat = await getLocalFileInfo(filePath)
-      r.push({ ...stat, filePath, path: filePath })
-    }
-    return r
-  }
-
-  /**
-   * Open save folder select dialog
-   * @returns {Promise<string>} - Selected folder path
-   */
-  openSaveFolderSelect = async () => {
-    // Try to use last saved path
-    const lastPath = window.localStorage.getItem(ZMODEM_SAVE_PATH_KEY)
-
-    const savePaths = await window.api.openDialog({
-      title: 'Choose a folder to save file(s)',
-      message: 'Choose a folder to save file(s)',
-      defaultPath: lastPath || undefined,
-      properties: [
-        'openDirectory',
-        'showHiddenFiles',
-        'createDirectory',
-        'noResolveAliases',
-        'treatPackageAsDirectory',
-        'dontAddToRecent'
-      ]
-    }).catch(() => false)
-    if (!savePaths || !savePaths.length) {
-      return null
-    }
-    // Save for next time
-    window.localStorage.setItem(ZMODEM_SAVE_PATH_KEY, savePaths[0])
-    return savePaths[0]
-  }
-
-  /**
-   * Cancel ongoing transfer
-   */
-  cancel () {
-    if (!this.isActive) return
-    this.writeToTerminal('\r\n\x1b[33m\x1b[1mZMODEM transfer cancelled by user\x1b[0m\r\n')
-    this.sendToServer({
-      event: 'cancel'
-    })
-    this.onSessionEnd()
-  }
-
-  /**
-   * Clean up resources
-   */
-  destroy () {
-    if (this.socket && this.messageHandler) {
-      this.socket.removeEventListener('message', this.messageHandler)
-      this.messageHandler = null
-    }
-    this.isActive = false
-    this.currentTransfer = null
-    this.savePath = null
-    this.socket = null
-    this.terminal = null
-  }
 }
 
 export default ZmodemClient

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

@@ -155,7 +155,7 @@ export default function SimpleEditor (props) {
   }
 
   return (
-    <div>
+    <div className='simple-editor'>
       <Flex className='mg1b' justify='space-between'>
         <Input.Search
           value={searchKeyword}
@@ -182,6 +182,5 @@ export default function SimpleEditor (props) {
         rows={20}
       />
     </div>
-
   )
 }

package/client/entry/electerm.jsx

@@ -1,7 +1,5 @@
 import { createRoot } from 'react-dom/client'
 import 'antd/dist/reset.css'
-import '@xterm/xterm/css/xterm.css'
-import '../common/trzsz.js'
 import '@fontsource/maple-mono/index.css'
 import Main from '../components/main/index.jsx'
 

package/client/store/system-menu.js

@@ -61,6 +61,16 @@ export default Store => {
     store.openSettingModal()
   }
 
+  Store.prototype.onNewSshAI = function () {
+    const { store } = window
+    if (store.aiConfigMissing()) {
+      store.toggleAIConfig()
+      return
+    }
+    window.et.openBookmarkWithAIMode = true
+    store.onNewSsh()
+  }
+
   Store.prototype.confirmExit = function (type) {
     const { store } = window
     let mod = null

package/package.json

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