@electerm/electerm-react 3.1.26 → 3.3.8

package/client/common/constants.js

@@ -242,15 +242,13 @@ export const quickCommandLabelsLsKey = 'quick-command-label'
 export const localAddrBookmarkLsKey = 'local-addr-bookmark-keys'
 export const dismissDelKeyTipLsKey = 'dismiss-del-key-tip'
 export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-to-use-ssh-tunnel'
-export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
 export const modals = {
   hide: 0,
-  setting: 1,
-  batchOps: 2
+  setting: 1
 }
 export const instSftpKeys = [
   'connect',

package/client/common/db.js

@@ -31,7 +31,8 @@ export const dbNames = [
   ),
   'history',
   'terminalCommandHistory',
-  'aiChatHistory'
+  'aiChatHistory',
+  'autoRunWidgets'
 ]
 export const dbNamesForSync = [
   ...without(
@@ -45,7 +46,8 @@ export const dbNamesForWatch = [
   ...dbNamesForSync,
   'history',
   'terminalCommandHistory',
-  'aiChatHistory'
+  'aiChatHistory',
+  'autoRunWidgets'
 ]
 
 /**

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

@@ -4,14 +4,14 @@
 import { useState, useEffect } from 'react'
 import { Space } from 'antd'
 import { HistoryOutlined } from '@ant-design/icons'
-import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+import { safeGetItemJSON, safeSetItemJSON } from '../../common/safe-local-storage'
 import AiHistoryItem from './ai-history-item'
 
 const MAX_HISTORY = 20
 const e = window.translate
 
 export function getHistory (storageKey) {
-  return getItemJSON(storageKey, [])
+  return safeGetItemJSON(storageKey, [])
 }
 
 export function addHistoryItem (storageKey, itemData, eventName) {
@@ -37,7 +37,7 @@ export function addHistoryItem (storageKey, itemData, eventName) {
   if (history.length > MAX_HISTORY) {
     history = history.slice(0, MAX_HISTORY)
   }
-  setItemJSON(storageKey, history)
+  safeSetItemJSON(storageKey, history)
 
   // Custom event to trigger update
   if (eventName) {
@@ -72,7 +72,7 @@ export default function AiHistory (props) {
       return hStr !== itemStr
     })
     setHistory(newHistory)
-    setItemJSON(storageKey, newHistory)
+    safeSetItemJSON(storageKey, newHistory)
   }
 
   if (!history.length) {

package/client/components/batch-op/batch-op-alert.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Alert, Button } from 'antd'
+import ExternalLink from '../common/external-link'
+
+const batchOpWikiLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
+
+export default function BatchOpAlert () {
+  const [expanded, setExpanded] = useState(false)
+
+  const description = (
+    <div>
+      <div>
+        <p>Actions: <code>connect, command, sftp_upload, sftp_download</code></p>
+        <p><ExternalLink to={batchOpWikiLink}>{batchOpWikiLink}</ExternalLink></p>
+      </div>
+      {expanded && (
+        <div className='mg1t'>
+          <p><strong>connect</strong> params: <code>host, port, username, authType, password, privateKey, passphrase, certificate, profile, enableSftp, enableSsh, useSshAgent, sshAgent, term, encode, envLang, setEnv, startDirectoryRemote, startDirectoryLocal, proxy, x11, displayRaw, sshTunnels, connectionHoppings</code></p>
+          <p><strong>command</strong> params: <code>command</code></p>
+          <p><strong>sftp_upload</strong> params: <code>localPath, remotePath</code></p>
+          <p><strong>sftp_download</strong> params: <code>remotePath, localPath</code></p>
+        </div>
+      )}
+      <Button
+        size='small'
+        className='mg1y'
+        onClick={() => setExpanded(v => !v)}
+      >
+        {expanded ? 'Show less' : 'Show more'}
+      </Button>
+    </div>
+  )
+
+  return (
+    <Alert
+      description={description}
+      type='info'
+      showIcon
+      className='mg1b'
+    />
+  )
+}

package/client/components/batch-op/batch-op-editor.jsx

@@ -0,0 +1,202 @@
+/**
+ * Batch Operation Editor Component
+ * Self-contained workflow editor: handles execute, external editors, and progress logs
+ */
+import React, { useCallback, useState, useEffect } from 'react'
+import { Button, Flex } from 'antd'
+import {
+  PlayCircleOutlined
+} from '@ant-design/icons'
+import SimpleEditor from '../text-editor/simple-editor'
+import EditWithCustomEditor from '../text-editor/edit-with-custom-editor'
+import BatchOpAlert from './batch-op-alert'
+import BatchOpLogs from './batch-op-logs'
+import message from '../common/message'
+import { refsStatic } from '../common/ref'
+import generate from '../../common/uid'
+import fs from '../../common/fs'
+
+const workflowExample = `[
+  {
+    "name": "Connect SSH",
+    "action": "connect",
+    "params": {
+      "host": "192.168.1.100",
+      "port": 22,
+      "username": "root",
+      "authType": "password",
+      "password": "your_password"
+    }
+  },
+  {
+    "name": "Create 5M Test File",
+    "action": "command",
+    "afterDelay": 500,
+    "prevDelay": 500,
+    "command": "fallocate -l 5M /tmp/test_5m_file.bin && rm -f /tmp/test_log.log && echo '[LOG] Created 5M test file at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Log creation",
+    "action": "command",
+    "command": "ls -la /tmp/test_5m_file.bin >> /tmp/test_log.log 2>&1 && echo '[LOG] File size logged at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Download 5M File",
+    "action": "sftp_download",
+    "afterDelay": 200,
+    "remotePath": "/tmp/test_5m_file.bin",
+    "localPath": "/tmp/test_5m_file.bin"
+  },
+  {
+    "name": "Log after download",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "echo '[LOG] Download complete at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Delete Remote 5M File",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "rm /tmp/test_5m_file.bin && echo '[LOG] Deleted remote 5M file at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Upload Downloaded File to Remote",
+    "action": "sftp_upload",
+    "afterDelay": 200,
+    "localPath": "/tmp/test_5m_file.bin",
+    "remotePath": "/tmp/test_5m_file_uploaded.bin"
+  },
+  {
+    "name": "Log after upload",
+    "action": "command",
+    "afterDelay": 200,
+    "command": "echo '[LOG] Upload complete at $(date)' >> /tmp/test_log.log"
+  },
+  {
+    "name": "Verify and clean up",
+    "action": "command",
+    "command": "ls -la /tmp/test_5m_file_uploaded.bin >> /tmp/test_log.log 2>&1 && rm -f /tmp/test_5m_file*.bin && echo '[LOG] Cleaned up at $(date)' >> /tmp/test_log.log"
+  }
+]`
+
+function getDefaultValue (widget) {
+  if (widget?.info?.configs) {
+    const config = widget.info.configs.find(c => c.name === 'workflowJson')
+    if (config?.default) return config.default
+  }
+  return ''
+}
+
+export default function BatchOpEditor ({ widget }) {
+  const [value, setValue] = useState(() => getDefaultValue(widget))
+  const [executing, setExecuting] = useState(false)
+
+  useEffect(() => {
+    const v = getDefaultValue(widget)
+    if (v) setValue(v)
+  }, [widget?.id])
+
+  const handleExecute = async () => {
+    if (!value || executing) return
+    setExecuting(true)
+    const runner = refsStatic.get('batch-op-runner')
+    runner?.reset()
+    refsStatic.get('batch-op-logs')?.setLogs({ steps: [], currentIndex: 0, status: 'running' })
+    try {
+      let workflows
+      try {
+        workflows = JSON.parse(value)
+        if (!Array.isArray(workflows)) throw new Error('Workflow must be an array')
+      } catch (e) {
+        message.error('Invalid workflow JSON: ' + e.message)
+        refsStatic.get('batch-op-logs')?.reset()
+        return
+      }
+      await runner.executeWorkflow(workflows)
+      message.success('Workflow execution completed')
+    } catch (err) {
+      if (err.message !== 'Workflow aborted') {
+        message.error('Workflow execution failed: ' + err.message)
+      }
+    } finally {
+      setExecuting(false)
+    }
+  }
+
+  const handleTemplate = useCallback(() => {
+    setValue(workflowExample)
+  }, [])
+
+  const handleEditWithSystemEditor = useCallback(async () => {
+    const id = generate()
+    const tempPath = window.pre.resolve(window.pre.tempDir, `electerm-batch-op-${id}.json`)
+    await fs.writeFile(tempPath, value)
+    window.pre.runGlobalAsync('watchFile', tempPath)
+    fs.openFile(tempPath).catch(window.store.onError)
+    window.pre.showItemInFolder(tempPath)
+    const onFileChange = (e, text) => {
+      setValue(text)
+      window.pre.ipcOffEvent('file-change', onFileChange)
+      fs.unlink(tempPath).catch(console.log)
+    }
+    window.pre.ipcOnEvent('file-change', onFileChange)
+  }, [value])
+
+  const handleEditWithCustom = useCallback(async (editorCommand) => {
+    const id = generate()
+    const tempPath = window.pre.resolve(window.pre.tempDir, `electerm-batch-op-${id}.json`)
+    await fs.writeFile(tempPath, value)
+    window.pre.runGlobalAsync('watchFile', tempPath)
+    await window.pre.runGlobalAsync('openFileWithEditor', tempPath, editorCommand)
+    const onFileChange = (e, text) => {
+      setValue(text)
+      window.pre.ipcOffEvent('file-change', onFileChange)
+      fs.unlink(tempPath).catch(console.log)
+    }
+    window.pre.ipcOnEvent('file-change', onFileChange)
+  }, [value])
+
+  function handleChange (e) {
+    setValue(e.target.value)
+  }
+
+  return (
+    <div className='batch-op-editor'>
+      <BatchOpAlert />
+      <Flex className='mg2y' gap='small'>
+        <Button onClick={handleTemplate} type='dashed'>
+          Load Template
+        </Button>
+        <Button
+          onClick={handleExecute}
+          type='primary'
+          loading={executing}
+          disabled={executing}
+          icon={<PlayCircleOutlined />}
+        >
+          Execute Workflow
+        </Button>
+      </Flex>
+      <SimpleEditor
+        value={value}
+        onChange={handleChange}
+      />
+      {!window.et.isWebApp && (
+        <div className='pd1t pd2b'>
+          <Button
+            type='primary'
+            className='mg1r mg1b'
+            onClick={handleEditWithSystemEditor}
+          >
+            {window.translate('editWithSystemEditor')}
+          </Button>
+          <EditWithCustomEditor
+            loading={executing}
+            editWithCustom={handleEditWithCustom}
+          />
+        </div>
+      )}
+      <BatchOpLogs />
+    </div>
+  )
+}

package/client/components/batch-op/batch-op-logs.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react'
+import { refsStatic } from '../common/ref'
+
+const STATIC_KEY = 'batch-op-logs'
+
+const BatchOpLogs = forwardRef(function BatchOpLogs (_, ref) {
+  const [logs, setLogsState] = useState(null)
+
+  useImperativeHandle(ref, () => ({
+    setLogs: (progress) => setLogsState(progress),
+    reset: () => setLogsState(null)
+  }))
+
+  useEffect(() => {
+    refsStatic.add(STATIC_KEY, {
+      setLogs: (progress) => setLogsState(progress),
+      reset: () => setLogsState(null)
+    })
+    return () => refsStatic.remove(STATIC_KEY)
+  }, [])
+
+  if (!logs || (!logs.steps.length && !logs.currentStep)) {
+    return null
+  }
+
+  const statusIcon = { success: '✓', error: '✗' }
+
+  return (
+    <div className='batch-op-logs mg1t pd1 font13'>
+      <div className='bold mg1b'>Execution Log</div>
+      {logs.steps.map((step, i) => (
+        <div key={i} className={`batch-op-log-entry ${step.status}`}>
+          <span className='log-icon mg1r'>{statusIcon[step.status] || '○'}</span>
+          <span className='log-name'>{step.name}</span>
+          {step.error && <span className='log-error mg1l color-red'>{step.error}</span>}
+        </div>
+      ))}
+      {logs.status === 'running' && logs.currentStep && (
+        <div className='batch-op-log-entry running'>
+          <span className='log-icon mg1r'>→</span>
+          <span className='log-name'>{logs.currentStep}</span>
+        </div>
+      )}
+      {logs.status === 'completed' && (
+        <div className='batch-op-log-entry completed color-green mg1t'>
+          ✓ Workflow completed
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default BatchOpLogs

package/client/components/batch-op/batch-op-runner.jsx

@@ -0,0 +1,315 @@
+import { Component } from 'react'
+import { refsStatic } from '../common/ref'
+import { statusMap } from '../../common/constants'
+import { autoRun } from 'manate'
+import uid from '../../common/uid'
+
+const STATIC_KEY = 'batch-op-runner'
+
+export default class BatchOpRunner extends Component {
+  constructor () {
+    super()
+    this.steps = []
+    this.currentIndex = 0
+    this.status = 'idle'
+    this.currentTabId = null
+    this.currentStep = null
+  }
+
+  componentDidMount () {
+    refsStatic.add(STATIC_KEY, this)
+  }
+
+  getActiveTabId () {
+    return window.store?.activeTabId
+  }
+
+  getState () {
+    return {
+      steps: this.steps,
+      currentIndex: this.currentIndex,
+      status: this.status,
+      currentStep: this.currentStep
+    }
+  }
+
+  reset () {
+    this.steps = []
+    this.currentIndex = 0
+    this.status = 'idle'
+    this.currentTabId = null
+    this.currentStep = null
+  }
+
+  runBatchOpFromFile (filePath) {
+    return this._runBatchOpFromFile(filePath)
+  }
+
+  executeWorkflow (workflows) {
+    return this._executeWorkflow(workflows)
+  }
+
+  async _runBatchOpFromFile (filePath) {
+    try {
+      const content = await window.fs.readFile(filePath)
+      let workflows
+      try {
+        workflows = JSON.parse(content)
+        if (!Array.isArray(workflows)) {
+          throw new Error('Workflow must be an array')
+        }
+      } catch (e) {
+        console.error('Invalid batch operation JSON:', e.message)
+        return
+      }
+
+      this.reset()
+      await this._executeWorkflow(workflows)
+      console.log('Batch operation completed from file')
+    } catch (e) {
+      console.error('Failed to run batch operation from file:', e.message)
+    }
+  }
+
+  async _executeWorkflow (workflows) {
+    if (!Array.isArray(workflows)) {
+      throw new Error('Workflow must be an array')
+    }
+
+    this.steps = []
+    this.currentIndex = 0
+    this.status = 'running'
+
+    const results = []
+    const logsRef = refsStatic.get('batch-op-logs')
+
+    for (let i = 0; i < workflows.length; i++) {
+      const step = workflows[i]
+      this.currentIndex = i
+      this.currentStep = step.name
+
+      logsRef?.setLogs(this.getState())
+
+      let result
+      try {
+        result = await this._executeStep(step, results)
+        this.steps.push({ name: step.name, status: 'success', result })
+        results.push(result)
+        console.log(`Batch op step ${i + 1} completed:`, step.name || 'unnamed')
+      } catch (e) {
+        console.log(e)
+        this.steps.push({ name: step.name, status: 'error', error: e.message })
+        logsRef?.setLogs(this.getState())
+        console.error(`Batch op step ${i + 1} failed:`, step.name || 'unnamed', e.message)
+        this.status = 'error'
+        logsRef?.setLogs(this.getState())
+        throw e
+      }
+    }
+
+    this.status = 'completed'
+    this.currentStep = null
+    logsRef?.setLogs(this.getState())
+  }
+
+  async _executeStep (step, previousResults) {
+    const { action, prevDelay, afterDelay } = step
+
+    if (!action) {
+      throw new Error('Step must have an "action" field')
+    }
+
+    if (prevDelay > 0) {
+      await new Promise(resolve => setTimeout(resolve, prevDelay))
+    }
+
+    const s = step.params ? { ...step, ...step.params } : step
+
+    let result
+    switch (action) {
+      case 'connect':
+        result = await this._batchStepConnect(s)
+        this.currentTabId = result.tabId
+        break
+      case 'command':
+        result = await this._batchStepCommand(s)
+        break
+      case 'sftp_upload':
+        result = await this._batchStepSftpUpload(s)
+        break
+      case 'sftp_download':
+        result = await this._batchStepSftpDownload(s)
+        break
+      default:
+        throw new Error(`Unknown action: ${action}`)
+    }
+
+    if (afterDelay > 0) {
+      await new Promise(resolve => setTimeout(resolve, afterDelay))
+    }
+
+    return result
+  }
+
+  async _batchStepConnect (step) {
+    const { store } = window
+    const p = step.params || step
+
+    const tabId = uid()
+    const tab = {
+      id: tabId,
+      type: 'ssh',
+      host: p.host || '',
+      port: p.port || 22,
+      username: p.username || '',
+      password: p.password || '',
+      privateKey: p.privateKey || '',
+      passphrase: p.passphrase || '',
+      certificate: p.certificate || '',
+      authType: p.authType || 'password',
+      profile: p.profile || '',
+      enableSftp: p.enableSftp !== false,
+      enableSsh: p.enableSsh !== false,
+      useSshAgent: p.useSshAgent !== false,
+      sshAgent: p.sshAgent || '',
+      term: p.term || 'xterm-256color',
+      encode: p.encode || 'utf8',
+      envLang: p.envLang || 'en_US.UTF-8',
+      setEnv: p.setEnv || '',
+      startDirectoryRemote: p.startDirectoryRemote || '',
+      startDirectoryLocal: p.startDirectoryLocal || '',
+      proxy: p.proxy || '',
+      x11: p.x11 || false,
+      displayRaw: p.displayRaw || false,
+      sshTunnels: p.sshTunnels || [],
+      connectionHoppings: p.connectionHoppings || [],
+      title: step.name || `SSH: ${p.host}`,
+      status: 'processing',
+      pane: 'terminal'
+    }
+
+    store.addTab(tab)
+    await this._waitForConnection(tabId)
+
+    return {
+      success: true,
+      action: 'connect',
+      host: p.host,
+      port: p.port,
+      tabId
+    }
+  }
+
+  _waitForConnection = async (tabId) => {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        if (this._refWait) {
+          this._refWait.stop()
+          delete this._refWait
+        }
+        reject(new Error('Connection timeout'))
+      }, 30000)
+
+      this._refWait = autoRun(() => {
+        const { tabs } = window.store
+        const tab = tabs.find(t => t.id === tabId)
+        if (tab && tab.status === statusMap.success) {
+          clearTimeout(timeout)
+          this._refWait && this._refWait.stop()
+          delete this._refWait
+          resolve(tab)
+        } else if (tab && tab.status === statusMap.error) {
+          clearTimeout(timeout)
+          this._refWait && this._refWait.stop()
+          delete this._refWait
+          reject(new Error('Connection failed: ' + (tab.errorMsg || 'unknown error')))
+        }
+        return window.store.tabs
+      })
+      this._refWait.start()
+    })
+  }
+
+  async _batchStepCommand (step) {
+    const tabId = this.currentTabId
+
+    if (!tabId) {
+      throw new Error('No active tab. Please connect first.')
+    }
+
+    const { refs } = await import('../common/ref')
+    const term = refs.get('term-' + tabId)
+    if (!term || !term.term) {
+      throw new Error('Terminal not found')
+    }
+
+    let waited = 0
+    while (!term.attachAddon && waited < 10000) {
+      await new Promise(resolve => setTimeout(resolve, 200))
+      waited += 200
+    }
+    if (!term.attachAddon) {
+      throw new Error('Terminal not ready: attach addon not initialized')
+    }
+
+    term.runQuickCommand(step.command)
+
+    return {
+      success: true,
+      action: 'command',
+      command: step.command,
+      tabId
+    }
+  }
+
+  async _batchStepSftpUpload (step) {
+    const tabId = this.currentTabId
+    const { store } = window
+    const stepWithTabId = { ...step, tabId, conflictPolicy: 'mergeOrOverwriteAll' }
+    const { transferId } = await store.mcpSftpUpload(stepWithTabId)
+    await this._batchWaitForTransfer(transferId)
+    return { success: true, action: 'sftp_upload', localPath: step.localPath, remotePath: step.remotePath, transferId, tabId }
+  }
+
+  async _batchStepSftpDownload (step) {
+    const tabId = this.currentTabId
+    const { store } = window
+    const stepWithTabId = { ...step, tabId, conflictPolicy: 'mergeOrOverwriteAll' }
+    const { transferId } = await store.mcpSftpDownload(stepWithTabId)
+    await this._batchWaitForTransfer(transferId)
+    return { success: true, action: 'sftp_download', remotePath: step.remotePath, localPath: step.localPath, transferId, tabId }
+  }
+
+  async _batchWaitForTransfer (transferId) {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        if (this._refTransferWait) {
+          this._refTransferWait.stop()
+          delete this._refTransferWait
+        }
+        reject(new Error('Transfer timeout (1 hour)'))
+      }, 60 * 60 * 1000)
+
+      this._refTransferWait = autoRun(() => {
+        const { transferHistory } = window.store
+        const item = transferHistory.find(t => t.id === transferId || t.originalId === transferId)
+        if (item) {
+          clearTimeout(timeout)
+          this._refTransferWait && this._refTransferWait.stop()
+          delete this._refTransferWait
+          if (item.error) {
+            reject(new Error('Transfer failed: ' + item.error))
+          } else {
+            resolve(item)
+          }
+        }
+        return window.store.transferHistory
+      })
+      this._refTransferWait.start()
+    })
+  }
+
+  render () {
+    return null
+  }
+}

package/client/components/bookmark-form/ai-bookmark-form.jsx

@@ -2,7 +2,8 @@
  * AI-powered bookmark generation form
  */
 import { useState, useEffect } from 'react'
-import { Button, Input, message, Space, Alert } from 'antd'
+import { Button, Input, Space, Alert } from 'antd'
+import message from '../common/message'
 import {
   RobotOutlined,
   LoadingOutlined,