@electerm/electerm-react 3.12.0 → 3.15.0

package/client/common/is-absolute-path.js

@@ -1,3 +1,3 @@
 export default (path = '') => {
-  return path.startsWith('/')
+  return path.startsWith('/') || /^[a-zA-Z]:/.test(path) || path.startsWith('\\\\')
 }

package/client/common/normalize-remote-path.js

@@ -0,0 +1,20 @@
+/**
+ * Ensure remote path always starts with /
+ * Windows drive letters like c: become /c:
+ * Also fixes mixed separators like /c:\windows → /c:/windows
+ * This is needed because SFTP protocol expects paths with leading /
+ * @param {String} path
+ * @return {String}
+ */
+export default function normalizeRemotePath (path) {
+  if (!path) return path
+  // Fix mixed separators: /c:\windows → /c:/windows
+  if (/^\/[a-zA-Z]:\\/.test(path)) {
+    return path.replace(/\\/g, '/')
+  }
+  // Add leading / to bare drive letters: c: → /c:, c:\windows → /c:/windows
+  if (/^[a-zA-Z]:/.test(path)) {
+    return '/' + path.replace(/\\/g, '/')
+  }
+  return path
+}

package/client/common/resolve.js

@@ -5,6 +5,13 @@
  * @return {String}
  */
 
+export const isWslPath = (path) => /^\\\\(?:wsl\$|wsl\.localhost)\\/.test(path)
+
+export const isWslDistroRoot = (path) => {
+  const trimmed = path.replace(/\\$/, '')
+  return /^\\\\(?:wsl\$|wsl\.localhost)\\[^\\]+$/.test(trimmed)
+}
+
 export default function resolve (basePath, nameOrDot) {
   const hasWinDrive = (path) => /^[a-zA-Z]:/.test(path)
   const isWin = basePath.includes('\\') || nameOrDot.includes('\\') || hasWinDrive(basePath) || hasWinDrive(nameOrDot)
@@ -15,7 +22,13 @@ export default function resolve (basePath, nameOrDot) {
   if (nameOrDot.startsWith('/')) {
     return nameOrDot.replace(/\\/g, sep)
   }
+  if (nameOrDot.startsWith('\\\\')) {
+    return nameOrDot
+  }
   if (nameOrDot === '..') {
+    if (isWslDistroRoot(basePath)) {
+      return '/'
+    }
     const baseEndsWithSep = basePath.endsWith(sep)
     const parts = basePath.split(sep)
     if (parts.length > 1) {
@@ -27,6 +40,9 @@ export default function resolve (basePath, nameOrDot) {
     }
     return '/'
   }
+  if (isWslDistroRoot(basePath) && !basePath.endsWith(sep)) {
+    return basePath + sep + nameOrDot
+  }
   const result = basePath.endsWith(sep) ? basePath + nameOrDot : basePath + sep + nameOrDot
   return isWin && result.length === 3 && result.endsWith(':\\') ? '/' : result
 }

package/client/components/ai/ai-chat-history-item.jsx

@@ -8,7 +8,6 @@ import {
   Tooltip
 } from 'antd'
 import {
-  UserOutlined,
   CopyOutlined,
   CloseOutlined,
   CaretDownOutlined,
@@ -172,7 +171,7 @@ export default function AIChatHistoryItem ({ item }) {
         <span className='pointer mg1r' onClick={toggleOutput}>
           {showOutput ? <CaretDownOutlined /> : <CaretRightOutlined />}
         </span>
-        <UserOutlined />: {prompt}
+        <span>{prompt}</span>
         {renderStopButton()}
       </div>
     ),

package/client/components/main/main.jsx

@@ -282,7 +282,7 @@ export default auto(function Index (props) {
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>
           <AIChat {...aiChatProps} />
-          <TerminalInfo {...terminalInfoProps} />
+          <TerminalInfo key={store.activeTabId} {...terminalInfoProps} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

package/client/components/sftp/address-bar.jsx

@@ -6,7 +6,8 @@ import {
   ReloadOutlined,
   ArrowRightOutlined,
   LoadingOutlined,
-  HomeOutlined
+  HomeOutlined,
+  PlusOutlined
 } from '@ant-design/icons'
 import {
   Input,
@@ -74,7 +75,7 @@ function renderAddonBefore (props, realPath) {
   )
 }
 
-function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
+function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
   const handleClick = (e) => {
     e.stopPropagation()
     if (!isLoadingRemote) {
@@ -82,9 +83,24 @@ function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
     }
   }
   return (
-    <GoIcon
-      onClick={handleClick}
-    />
+    <>
+      {
+        type === typeMap.local && window.et.isWebApp
+          ? (
+            <PlusOutlined
+              className='mg1r'
+              onClick={(e) => {
+                e.stopPropagation()
+                handleUploadFromBrowser()
+              }}
+            />
+            )
+          : null
+      }
+      <GoIcon
+        onClick={handleClick}
+      />
+    </>
   )
 }
 
@@ -160,7 +176,7 @@ export default function AddressBar (props) {
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
           suffix={
-            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type)
+            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type, props.handleUploadFromBrowser)
           }
         />
         {renderHistory(props, type)}

package/client/components/sftp/file-item.jsx

@@ -14,6 +14,7 @@ import copy from 'json-deep-copy'
 import { pick, some } from 'lodash-es'
 import Input from '../common/input-auto-focus'
 import resolve from '../../common/resolve'
+import normalizeRemotePath from '../../common/normalize-remote-path'
 import { addClass, removeClass } from '../../common/class'
 import {
   mode2permission,
@@ -604,7 +605,10 @@ export default class FileSection extends React.Component {
     const { type, name, isParent } = file
     const n = `${type}Path`
     const path = isParent ? file.path : this.props[n]
-    const np = resolve(path, name)
+    let np = resolve(path, name)
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     const op = this.props[type + 'Path']
     this.props.modifier({
       [n]: np,
@@ -882,6 +886,25 @@ export default class FileSection extends React.Component {
     window.pre.showItemInFolder(p)
   }
 
+  downloadFromBrowser = async () => {
+    const { path, name, isDirectory } = this.state.file
+    const p = resolve(path, name)
+    const url = '/api/download?path=' + encodeURIComponent(p)
+    const res = await window.fetch(url, {
+      headers: {
+        token: window.store?.config.tokenElecterm
+      }
+    })
+    const blob = await res.blob()
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = isDirectory ? name + '.tar.gz' : name
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(a.href)
+  }
+
   newItem = (isDirectory) => {
     const { type } = this.state.file
     const list = copy(this.props[type])
@@ -1060,6 +1083,13 @@ export default class FileSection extends React.Component {
         text: e('showInDefaultFileMananger')
       })
     }
+    if (isLocal && isRealFile && window.et.isWebApp) {
+      res.push({
+        func: 'downloadFromBrowser',
+        icon: 'DownloadOutlined',
+        text: 'Download from browser'
+      })
+    }
     if (showEdit) {
       res.push({
         func: 'editFile',

package/client/components/sftp/file-read.js

@@ -7,6 +7,12 @@ import fs from '../../common/fs'
 import { isWin } from '../../common/constants'
 
 export const getFileExt = fileName => {
+  if (/^\\\\(?:wsl\$|wsl\.localhost)\\/.test(fileName)) {
+    return {
+      base: fileName,
+      ext: ''
+    }
+  }
   const sep = '.'
   const arr = fileName.split(sep)
   const len = arr.length
@@ -82,12 +88,15 @@ export const getFolderFromFilePath = (filePath, isRemote) => {
   const arr = filePath.split(sep)
   const len = arr.length
   const isWinDisk = isWin && filePath.endsWith(sep)
-  const path = isWinDisk
+  const isWslRoot = isWin && /^\\\\(?:wsl\$|wsl\.localhost)\\[^\\]+$/.test(filePath.replace(/\\$/, ''))
+  const path = (isWinDisk || isWslRoot)
     ? '/'
     : arr.slice(0, len - 1).join(sep)
   const name = isWinDisk
     ? filePath.replace(sep, '')
-    : arr[len - 1]
+    : isWslRoot
+      ? filePath
+      : arr[len - 1]
 
   return {
     path,

package/client/components/sftp/sftp-entry.jsx

@@ -29,6 +29,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
+import normalizeRemotePath from '../../common/normalize-remote-path'
 import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
@@ -292,6 +293,7 @@ export default class Sftp extends Component {
       if (!path && this.sftp) {
         path = await this.getPwd(this.props.tab.username)
       }
+      path = normalizeRemotePath(path)
     } else {
       path = this.getLocalHome()
     }
@@ -762,7 +764,7 @@ export default class Sftp extends Component {
 
       if (!remotePath) {
         if (startDirectory) {
-          remotePath = startDirectory
+          remotePath = normalizeRemotePath(startDirectory)
         } else {
           remotePath = await this.getPwd(username)
         }
@@ -970,6 +972,31 @@ export default class Sftp extends Component {
     })
   }
 
+  handleUploadFromBrowser = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.multiple = true
+    input.onchange = async () => {
+      const files = input.files
+      if (!files || !files.length) return
+      const { localPath } = this.state
+      for (const file of files) {
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('path', localPath)
+        await window.fetch('/api/upload', {
+          method: 'POST',
+          body: formData,
+          headers: {
+            token: window.store?.config.tokenElecterm
+          }
+        })
+      }
+      this.localList()
+    }
+    input.click()
+  }
+
   parsePath = async (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
@@ -995,7 +1022,10 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = await this.parsePath(type, this.state[nt])
+    let np = await this.parsePath(type, this.state[nt])
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'
@@ -1003,6 +1033,7 @@ export default class Sftp extends Component {
     }
     this.setState({
       [n]: np,
+      [nt]: np,
       [`${type}Keyword`]: ''
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
@@ -1010,7 +1041,10 @@ export default class Sftp extends Component {
   goParent = (type) => {
     const n = `${type}Path`
     const p = this.state[n]
-    const np = resolve(p, '..')
+    let np = resolve(p, '..')
+    if (type === typeMap.remote) {
+      np = normalizeRemotePath(np)
+    }
     const op = this.state[n]
     if (np !== p) {
       this.setState({
@@ -1218,6 +1252,7 @@ export default class Sftp extends Component {
     const addrProps = {
       host,
       type,
+      handleUploadFromBrowser: this.handleUploadFromBrowser,
       ...pick(
         this,
         [

package/client/components/sys-menu/icons-map.jsx

@@ -24,7 +24,11 @@ import {
   LockOutlined,
   ReloadOutlined,
   FileZipOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  SaveOutlined,
+  PlayCircleFilled,
+  StopOutlined,
+  DownloadOutlined
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -52,5 +56,9 @@ export default {
   LockOutlined,
   ReloadOutlined,
   FileZipOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  SaveOutlined,
+  PlayCircleFilled,
+  StopOutlined,
+  DownloadOutlined
 }

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

@@ -49,3 +49,12 @@ export function setTerminalLogPath (pid, logPath) {
     action: 'set-terminal-log-path'
   })
 }
+
+export function startTerminalLogFile (pid, logFilePath, addTimeStampToTermLog) {
+  return fetch({
+    pid,
+    logFilePath,
+    addTimeStampToTermLog,
+    action: 'start-terminal-log-file'
+  })
+}

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'
@@ -30,10 +32,11 @@ 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 {
@@ -72,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: [],
@@ -676,8 +682,101 @@ 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')
@@ -730,6 +829,16 @@ 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) {

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/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) {

package/package.json

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