@electerm/electerm-react 2.8.16 → 2.10.6

package/client/components/spice/spice-session.jsx

@@ -0,0 +1,276 @@
+import { PureComponent, createRef } from 'react'
+import { createTerm } from '../terminal/terminal-apis'
+import deepCopy from 'json-deep-copy'
+import clone from '../../common/to-simple-obj'
+import { handleErr } from '../../common/fetch'
+import {
+  statusMap
+} from '../../common/constants'
+import {
+  Spin
+} from 'antd'
+import {
+  ReloadOutlined
+} from '@ant-design/icons'
+import RemoteFloatControl from '../common/remote-float-control'
+
+async function loadSpiceModule () {
+  if (window.spiceHtml5) return
+  const mod = await import('spice-client')
+  window.spiceHtml5 = {
+    SpiceMainConn: mod.SpiceMainConn,
+    sendCtrlAltDel: mod.sendCtrlAltDel
+  }
+}
+
+export default class SpiceSession extends PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = {
+      loading: false,
+      connected: false
+    }
+    this.spiceConn = null
+    this.screenId = `spice-screen-${props.tab.id}`
+  }
+
+  domRef = createRef()
+
+  componentDidMount () {
+    this.remoteInit()
+  }
+
+  componentWillUnmount () {
+    this.cleanup()
+  }
+
+  cleanup = () => {
+    if (this.spiceConn) {
+      try {
+        this.spiceConn.stop()
+      } catch (e) {}
+      this.spiceConn = null
+    }
+  }
+
+  setStatus = status => {
+    const id = this.props.tab?.id
+    this.props.editTab(id, {
+      status
+    })
+  }
+
+  buildWsUrl = (port, type = 'spice', extra = '') => {
+    const { host, tokenElecterm } = this.props.config
+    const { id } = this.props.tab
+    if (window.et.buildWsUrl) {
+      return window.et.buildWsUrl(
+        host,
+        port,
+        tokenElecterm,
+        id,
+        type,
+        extra
+      )
+    }
+    return `ws://${host}:${port}/${type}/${id}?token=${tokenElecterm}${extra}`
+  }
+
+  calcCanvasSize = () => {
+    const { width, height } = this.props
+    return {
+      width: width - 10,
+      height: height - 80
+    }
+  }
+
+  handleSendCtrlAltDel = () => {
+    if (this.spiceConn && window.spiceHtml5?.sendCtrlAltDel) {
+      window.spiceHtml5.sendCtrlAltDel(this.spiceConn)
+    }
+  }
+
+  getControlProps = (options = {}) => {
+    const {
+      fixedPosition = true,
+      showExitFullscreen = true,
+      className = ''
+    } = options
+
+    return {
+      isFullScreen: this.props.fullscreen,
+      onSendCtrlAltDel: this.handleSendCtrlAltDel,
+      screens: [],
+      currentScreen: null,
+      onSelectScreen: () => {},
+      fixedPosition,
+      showExitFullscreen,
+      className
+    }
+  }
+
+  renderControl = () => {
+    const contrlProps = this.getControlProps({
+      fixedPosition: false,
+      showExitFullscreen: false,
+      className: 'mg1l'
+    })
+    return (
+      <div className='pd1 fix session-v-info'>
+        <div className='fleft'>
+          <ReloadOutlined
+            onClick={this.handleReInit}
+            className='mg2r mg1l pointer'
+          />
+          {this.renderInfo()}
+        </div>
+        <div className='fright'>
+          {this.props.fullscreenIcon()}
+          <RemoteFloatControl {...contrlProps} />
+        </div>
+      </div>
+    )
+  }
+
+  remoteInit = async () => {
+    this.setState({
+      loading: true
+    })
+    const { config } = this.props
+    const { id } = this.props
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
+    const {
+      type,
+      term: terminalType,
+      password
+    } = tab
+    const opts = clone({
+      term: terminalType || config.terminalType,
+      tabId: id,
+      uid: tab.id,
+      srcTabId: tab.id,
+      termType: type,
+      ...tab
+    })
+
+    const r = await createTerm(opts)
+      .catch(err => {
+        const text = err.message
+        handleErr({ message: text })
+      })
+    if (!r) {
+      this.setState({ loading: false })
+      this.setStatus(statusMap.error)
+      return
+    }
+
+    const { pid, port } = r
+    this.pid = pid
+
+    try {
+      await loadSpiceModule()
+    } catch (e) {
+      console.error('[SPICE] Failed to load SPICE module:', e)
+      this.setState({ loading: false })
+      this.setStatus(statusMap.error)
+      return
+    }
+
+    this.setStatus(statusMap.success)
+
+    const { width, height } = this.calcCanvasSize()
+    const wsUrl = this.buildWsUrl(port, 'spice', `&width=${width}&height=${height}`)
+
+    try {
+      const SpiceMainConn = window.spiceHtml5.SpiceMainConn
+      const spiceOpts = {
+        uri: wsUrl,
+        password: password || '',
+        screen_id: this.screenId,
+        onsuccess: () => {
+          this.setState({
+            loading: false,
+            connected: true
+          })
+          this.setStatus(statusMap.success)
+        },
+        onerror: (e) => {
+          console.error('[SPICE] Connection error:', e)
+          this.setState({ loading: false })
+          this.setStatus(statusMap.error)
+        },
+        onagent: () => {}
+      }
+
+      this.spiceConn = new SpiceMainConn(spiceOpts)
+
+      this.setState({
+        loading: false
+      })
+    } catch (e) {
+      console.error('[SPICE] Connection failed:', e)
+      this.setState({ loading: false })
+      this.setStatus(statusMap.error)
+    }
+  }
+
+  handleReInit = () => {
+    this.cleanup()
+    this.props.reloadTab(
+      this.props.tab
+    )
+  }
+
+  renderInfo () {
+    const {
+      host,
+      port,
+      username
+    } = this.props.tab
+    return (
+      <span className='mg2l mg2r'>
+        {username}@{host}:{port}
+      </span>
+    )
+  }
+
+  render () {
+    const { width: w, height: h } = this.props
+    const { loading } = this.state
+    const { width: innerWidth, height: innerHeight } = this.calcCanvasSize()
+    const wrapperStyle = {
+      width: innerWidth + 'px',
+      height: innerHeight + 'px',
+      overflow: 'hidden'
+    }
+    const contrlProps = this.getControlProps()
+    return (
+      <Spin spinning={loading}>
+        <div
+          className='rdp-session-wrap session-v-wrap'
+          style={{
+            width: w + 'px',
+            height: h + 'px'
+          }}
+        >
+          {this.renderControl()}
+          <RemoteFloatControl {...contrlProps} />
+          <div
+            style={wrapperStyle}
+            className='spice-scroll-wrapper'
+          >
+            <div
+              ref={this.domRef}
+              id={this.screenId}
+              className='spice-session-wrap session-v-wrap'
+              style={{
+                width: '100%',
+                height: '100%'
+              }}
+            />
+          </div>
+        </div>
+      </Spin>
+    )
+  }
+}

package/client/components/tabs/add-btn-menu.jsx

@@ -5,7 +5,8 @@
 import React, { useCallback } from 'react'
 import {
   CodeFilled,
-  RightSquareFilled
+  RightSquareFilled,
+  RobotOutlined
 } from '@ant-design/icons'
 import BookmarksList from '../sidebar/bookmark-select'
 import DragHandle from '../common/drag-handle'
@@ -23,7 +24,7 @@ export default function AddBtnMenu ({
   addPanelWidth,
   setAddPanelWidth
 }) {
-  const { onNewSsh } = window.store
+  const { onNewSsh, onNewSshAI } = window.store
   const cls = 'pd2x pd1y context-item pointer'
   const addTabBtn = window.store.hasNodePty
     ? (
@@ -80,6 +81,12 @@ export default function AddBtnMenu ({
           <CodeFilled /> {e('newBookmark')}
         </div>
         {addTabBtn}
+        <div
+          className={cls}
+          onClick={onNewSshAI}
+        >
+          <RobotOutlined /> {e('createBookmarkByAI')}
+        </div>
       </div>
       <div className='add-menu-list'>
         <BookmarksList

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

@@ -1,57 +1,46 @@
-/**
- * customize AttachAddon
- */
-import { AttachAddon } from '@xterm/addon-attach'
+import { loadAttachAddon } from './xterm-loader.js'
 
-export default class AttachAddonCustom extends AttachAddon {
+export default class AttachAddonCustom {
   constructor (term, socket, isWindowsShell) {
-    super(socket)
     this.term = term
     this.socket = socket
     this.isWindowsShell = isWindowsShell
-    // Output suppression state for shell integration injection
     this.outputSuppressed = false
     this.suppressedData = []
     this.suppressTimeout = null
     this.onSuppressionEndCallback = null
-    // Track if we've received initial data from the terminal
     this.hasReceivedInitialData = false
     this.onInitialDataCallback = null
+    this._bidirectional = true
+    this._disposables = []
+    this._socket = socket
+    this.decoder = new TextDecoder('utf-8')
+  }
+
+  _initBase = async () => {
+    const AttachAddon = await loadAttachAddon()
+    const base = new AttachAddon(this._socket, { bidirectional: this._bidirectional })
+    this._sendData = base._sendData.bind(base)
   }
 
-  /**
-   * Set callback for when initial data is received
-   * @param {Function} callback - Called when first data arrives
-   */
   onInitialData = (callback) => {
     if (this.hasReceivedInitialData) {
-      // Already received, call immediately
       callback()
     } else {
       this.onInitialDataCallback = callback
     }
   }
 
-  /**
-   * Start suppressing output - used during shell integration injection
-   * @param {number} timeout - Max time to suppress in ms (safety fallback)
-   * @param {Function} onEnd - Callback when suppression ends
-   */
   startOutputSuppression = (timeout = 3000, onEnd = null) => {
     this.outputSuppressed = true
     this.suppressedData = []
     this.onSuppressionEndCallback = onEnd
-    // Safety timeout to ensure we always resume
     this.suppressTimeout = setTimeout(() => {
       console.warn('[AttachAddon] Output suppression timeout reached, resuming')
       this.stopOutputSuppression(false)
     }, timeout)
   }
 
-  /**
-   * Stop suppressing output and optionally discard buffered data
-   * @param {boolean} discard - If true, discard buffered data; if false, write it to terminal
-   */
   stopOutputSuppression = (discard = true) => {
     if (this.suppressTimeout) {
       clearTimeout(this.suppressTimeout)
@@ -60,14 +49,12 @@ export default class AttachAddonCustom extends AttachAddon {
     this.outputSuppressed = false
 
     if (!discard && this.suppressedData.length > 0) {
-      // Write buffered data to terminal
       for (const data of this.suppressedData) {
         this.writeToTerminalDirect(data)
       }
     }
     this.suppressedData = []
 
-    // Call the end callback if set
     if (this.onSuppressionEndCallback) {
       const callback = this.onSuppressionEndCallback
       this.onSuppressionEndCallback = null
@@ -75,77 +62,43 @@ export default class AttachAddonCustom extends AttachAddon {
     }
   }
 
-  /**
-   * Check if we should resume output based on OSC 633 detection
-   * Called when shell integration is detected
-   */
   onShellIntegrationDetected = () => {
     if (this.outputSuppressed) {
-      this.stopOutputSuppression(true) // Discard the integration command output
+      this.stopOutputSuppression(true)
     }
   }
 
-  activate (terminal = this.term) {
-    this.trzsz = window.newTrzsz(
-      this.writeToTerminal,
-      this.sendToServer,
-      terminal.cols,
-      this.isWindowsShell
-    )
-
+  activate = async (terminal = this.term) => {
+    await this._initBase()
     this.addSocketListener(this._socket, 'message', this.onMsg)
 
     if (this._bidirectional) {
-      this._disposables.push(terminal.onData((data) => this.trzsz.processTerminalInput(data)))
-      this._disposables.push(terminal.onBinary((data) => this.trzsz.processBinaryInput(data)))
+      this._disposables.push(terminal.onData((data) => this.sendToServer(data)))
+      this._disposables.push(terminal.onBinary((data) => this.sendToServer(new Uint8Array(data))))
     }
 
-    this._disposables.push(terminal.onResize((size) => this.trzsz.setTerminalColumns(size.cols)))
-
     this._disposables.push(this.addSocketListener(this._socket, 'close', () => this.dispose()))
     this._disposables.push(this.addSocketListener(this._socket, 'error', () => this.dispose()))
   }
 
   onMsg = (ev) => {
-    // Check if it's a JSON zmodem control message
     if (typeof ev.data === 'string') {
       try {
         const msg = JSON.parse(ev.data)
-        if (msg.action === 'zmodem-event') {
-          // Let zmodem-client handle this, don't write to terminal
+        if (msg.action === 'zmodem-event' || msg.action === 'trzsz-event') {
           return
         }
-      } catch (e) {
-        // Not JSON, continue processing
-      }
+      } catch (e) {}
     }
 
-    // When in alternate screen mode (like vim, less, or TUI apps like Claude Code),
-    // bypass trzsz processing to avoid interference with the application's display
-    if (this.term?.buffer?.active?.type === 'alternate') {
-      this.writeToTerminal(ev.data)
-    } else {
-      this.trzsz.processServerOutput(ev.data)
-    }
+    this.writeToTerminal(ev.data)
   }
 
-  /**
-   * Check if data contains OSC 633 shell integration sequences
-   * @param {string} str - Data string to check
-   * @returns {boolean} True if OSC 633 sequence detected
-   */
   checkForShellIntegration = (str) => {
-    // OSC 633 sequences: ESC]633;X where X is A, B, C, D, E, or P
-    // ESC is character code 27 (0x1b)
-    // Use includes with the actual characters to avoid lint warning
     const ESC = String.fromCharCode(27)
     return str.includes(ESC + ']633;')
   }
 
-  /**
-   * Write directly to terminal, bypassing suppression check
-   * Used for flushing buffered data
-   */
   writeToTerminalDirect = (data) => {
     const { term } = this
     if (term.parent?.onZmodem) {
@@ -163,22 +116,18 @@ export default class AttachAddonCustom extends AttachAddon {
       return
     }
 
-    // Track initial data arrival
     if (!this.hasReceivedInitialData) {
       this.hasReceivedInitialData = true
       if (this.onInitialDataCallback) {
         const callback = this.onInitialDataCallback
         this.onInitialDataCallback = null
-        // Call after a micro-delay to ensure this data is written first
         setTimeout(callback, 0)
       }
     }
 
-    // Check for shell integration in the data (only when suppressing)
     if (this.outputSuppressed) {
       let str = data
       if (typeof data !== 'string') {
-        // Convert to string to check for OSC 633
         const decoder = this.decoder || new TextDecoder('utf-8')
         try {
           str = decoder.decode(data instanceof ArrayBuffer ? data : new Uint8Array(data))
@@ -187,14 +136,11 @@ export default class AttachAddonCustom extends AttachAddon {
         }
       }
 
-      // If we detect OSC 633, shell integration is working
       if (this.checkForShellIntegration(str)) {
         this.onShellIntegrationDetected()
-        // Don't buffer this - just discard the integration output
         return
       }
 
-      // Buffer the data while suppressed
       this.suppressedData.push(data)
       return
     }
@@ -213,8 +159,6 @@ export default class AttachAddonCustom extends AttachAddon {
     const { term } = this
     term?.parent?.notifyOnData()
     const str = this.decoder.decode(data)
-    // CWD tracking is now handled by shell integration automatically
-    // No need to parse PS1 markers
     term?.write(str)
   }