@electerm/electerm-react 5.3.26 → 5.5.9

package/client/components/terminal/startup-queue.js

@@ -0,0 +1,433 @@
+/**
+ * Startup queue for a terminal session.
+ *
+ * Everything that has to be typed into a freshly connected shell goes through
+ * here, strictly one item at a time:
+ *
+ *   shell integration injection  ->  cd/startDirectory  ->  runScripts
+ *
+ * Two rules keep it reliable:
+ *
+ * 1. Only one drain loop owns the queue at a time, and every queue generation
+ *    carries a token. A reconnect (or a config toggle that rebuilds the queue)
+ *    bumps the token, so a loop still waiting on the *old* connection stops
+ *    instead of stealing items from the new queue - that used to silently drop
+ *    the remaining run scripts.
+ * 2. After each script we wait for the shell to settle (a fresh prompt, or a
+ *    quiet period) before typing the next one, so nothing is ever typed into a
+ *    shell that is still busy. Every wait is bounded, so a hung shell can only
+ *    delay the queue, never stop it.
+ */
+import {
+  getShellIntegrationCommand,
+  detectShellType
+} from './shell.js'
+import {
+  createRestoreCwdCommand,
+  createWindowsRestoreCwdCommand,
+  isRestorableTerminalTab
+} from './ssh-reload-state.js'
+import { isMac, isWin } from '../../common/platform.js'
+
+// Pacing: `settleIdleMs` of silence counts as "the shell is done",
+// `settleTimeoutMs` caps the wait so a script that never returns can not
+// stall the queue.
+const settleIdleMs = 400
+const settleTimeoutMs = 3000
+// Ceiling for the best-effort remote shell probe. detectRemoteShell opens an
+// extra exec channel and runCmd has no timeout of its own, so a server that
+// never answers would otherwise block the whole queue forever.
+const remoteShellDetectTimeoutMs = 3000
+
+export class StartupQueue {
+  /**
+   * @param {object} term - the terminal component (host)
+   * @param {object} [deps] - `detectRemoteShell` needs the network, so it is
+   *   injected: it keeps this module free of the app runtime and makes the
+   *   queue testable on its own.
+   */
+  constructor (term, deps = {}) {
+    this.term = term
+    this.detectRemoteShell = deps.detectRemoteShell || (() => Promise.resolve('sh'))
+    this.queue = []
+    this.token = 0
+    this.running = false
+    this.shellInjected = false
+    this.shellType = null
+    this.timers = new Set()
+  }
+
+  dispose = () => {
+    for (const t of this.timers) {
+      clearTimeout(t)
+    }
+    this.timers.clear()
+    this.queue = []
+    this.running = false
+  }
+
+  // ---- host accessors ----
+
+  get addon () {
+    return this.term.attachAddon
+  }
+
+  get cmdAddon () {
+    return this.term.cmdAddon
+  }
+
+  isClosed = () => {
+    return !!this.term.onClose
+  }
+
+  isSsh = () => {
+    return this.term.isSsh ? this.term.isSsh() : this.getTabType() === 'ssh'
+  }
+
+  isLocal = () => {
+    return this.term.isLocal ? this.term.isLocal() : this.getTabType() === 'local'
+  }
+
+  getTabType = () => {
+    return this.term.props?.tab?.type
+  }
+
+  isTelnet = () => {
+    if (this.term.isTelnet) {
+      return this.term.isTelnet()
+    }
+    return this.getTabType() === 'telnet'
+  }
+
+  isSerial = () => {
+    if (this.term.isSerial) {
+      return this.term.isSerial()
+    }
+    return this.getTabType() === 'serial'
+  }
+
+  isRemoteShell = () => {
+    return this.isSsh() || this.isTelnet() || this.isSerial()
+  }
+
+  isRestorable = () => {
+    const tab = this.term.props?.tab || {}
+    if (typeof this.term.isShellTerminal === 'function') {
+      return this.term.isShellTerminal()
+    }
+    return isRestorableTerminalTab(tab)
+  }
+
+  isWindowsLocal = () => {
+    return this.isLocal() && isWin
+  }
+
+  isPosixShell = () => {
+    return this.isRemoteShell() || (this.isLocal() && !isWin)
+  }
+
+  sleep = (ms) => {
+    if (ms <= 0) {
+      return Promise.resolve()
+    }
+    return new Promise(resolve => {
+      const timer = setTimeout(() => {
+        this.timers.delete(timer)
+        resolve()
+      }, ms)
+      this.timers.add(timer)
+    })
+  }
+
+  // ---- queue ----
+
+  runInitScript = () => {
+    const { term } = this
+    window.store.triggerResize()
+    const {
+      startDirectory,
+      runScripts
+    } = term.props.tab
+
+    const scripts = runScripts ? [...runScripts] : []
+    const reloadCwd = term.props.config.restoreTerminalSessionOnReload && this.isRestorable()
+      ? term.props.tab._reloadState?.cwd
+      : ''
+    const startFolder = reloadCwd || startDirectory || window.initFolder
+    let cwdCommand = ''
+    if (startFolder) {
+      cwdCommand = this.isPosixShell()
+        ? createRestoreCwdCommand(startFolder)
+        : createWindowsRestoreCwdCommand(startFolder) || `cd "${startFolder}"`
+    }
+    if (cwdCommand) {
+      scripts.unshift({ script: cwdCommand, delay: 0 })
+    }
+
+    const token = ++this.token
+    this.queue = []
+
+    if (this.canInjectShellIntegration()) {
+      this.queue.push({
+        type: 'shell_integration',
+        execute: async () => {
+          await this.injectShellIntegration()
+        }
+      })
+    }
+
+    scripts.forEach((script, i) => {
+      this.queue.push({
+        type: 'delayed_script',
+        script: script.script,
+        delay: script.delay || 0,
+        // Nothing follows the last one, so waiting for the shell to settle
+        // would only add latency.
+        isLast: i === scripts.length - 1,
+        execute: () => {
+          if (script.script && this.addon) {
+            this.addon._sendData(script.script + '\r')
+          }
+        }
+      })
+    })
+
+    this.start(token)
+  }
+
+  /**
+   * Put a shell integration injection at the head of the queue.
+   * Inserting - instead of firing it off immediately - keeps it serialized
+   * against anything still queued and guarantees a single drain loop.
+   */
+  enqueueShellIntegration = (sendEnter) => {
+    this.queue.unshift({
+      type: 'shell_integration',
+      execute: async () => {
+        await this.injectShellIntegration()
+        // A fresh prompt makes the shell emit OSC 633 ;P Cwd= right away, so
+        // the file manager picks the current path up without waiting for the
+        // user's next command.
+        if (sendEnter && this.addon) {
+          this.addon._sendData('\r')
+        }
+      }
+    })
+    this.start(this.token)
+  }
+
+  /**
+   * Drain the queue one item at a time. Re-entrant calls only push items and
+   * return, so two loops can never interleave or race for the same array.
+   */
+  start = async (token) => {
+    if (this.running) {
+      return
+    }
+    this.running = true
+    try {
+      while (
+        !this.isClosed() &&
+        token === this.token &&
+        this.queue.length > 0
+      ) {
+        const item = this.queue.shift()
+        try {
+          await this.runItem(item)
+        } catch (error) {
+          console.error('[Shell Integration] Error processing queue item:', item.type, error)
+        }
+      }
+    } finally {
+      this.running = false
+      // A newer queue was built while this loop was still draining (reconnect,
+      // config toggle). Pick it up here, otherwise the fresh items would sit
+      // in the array with nobody left to run them.
+      if (
+        !this.isClosed() &&
+        token !== this.token &&
+        this.queue.length > 0
+      ) {
+        this.start(this.token)
+      }
+    }
+  }
+
+  runItem = async (item) => {
+    if (this.isClosed() || !this.addon) {
+      return
+    }
+    if (item.type === 'shell_integration') {
+      await item.execute()
+      // Give the freshly injected prompt a moment to finish drawing before
+      // anything is typed into it.
+      await this.waitForSettle({ usePrompt: false })
+      return
+    }
+    if (item.type !== 'delayed_script') {
+      return
+    }
+    item.execute()
+    if (item.isLast) {
+      return
+    }
+    await this.sleep(item.delay)
+    // Never type the next script into a shell that is still busy. Bounded, so
+    // a script that never returns can not block the rest of the queue.
+    await this.waitForSettle()
+  }
+
+  /**
+   * Wait until the terminal stops producing output before typing the next
+   * queued item. Resolves on whichever comes first:
+   *  - a fresh prompt (OSC 633 ;A), when shell integration is active - the
+   *    exact "previous command finished" signal
+   *  - no output for `idleMs`
+   * Always resolves; `timeoutMs` caps it.
+   */
+  waitForSettle = ({ timeoutMs = settleTimeoutMs, idleMs = settleIdleMs, usePrompt = true } = {}) => {
+    const addon = this.addon
+    if (this.isClosed() || !addon || !addon.waitForOutputIdle || addon.disposed) {
+      return Promise.resolve(false)
+    }
+    const idle = addon.waitForOutputIdle({ idleMs, timeoutMs })
+    if (!usePrompt || !this.cmdAddon || !this.cmdAddon.onPrompt) {
+      return idle
+    }
+    return new Promise((resolve) => {
+      let done = false
+      let unsubscribe = null
+      const finish = (result) => {
+        if (done) {
+          return
+        }
+        done = true
+        clearTimeout(capTimer)
+        if (unsubscribe) {
+          unsubscribe()
+        }
+        resolve(result)
+      }
+      unsubscribe = this.cmdAddon.onPrompt(() => finish('prompt'))
+      const capTimer = setTimeout(() => finish(false), timeoutMs + 200)
+      this.timers.add(capTimer)
+      idle.then(quiet => finish(quiet ? 'idle' : false))
+    })
+  }
+
+  // ---- shell integration ----
+
+  canInjectShellIntegration = () => {
+    const { config, sftpPathFollowSsh } = this.term.props
+    return (
+      config.showCmdSuggestions ||
+      sftpPathFollowSsh ||
+      (config.restoreTerminalSessionOnReload && this.isRestorable())
+    ) &&
+    (
+      this.isSsh() ||
+      this.isTelnet() ||
+      this.isSerial() ||
+      (this.isLocal() && !isWin)
+    )
+  }
+
+  /**
+   * Inject shell integration commands from client-side.
+   * Replaces the server-side `source xxx.xxx` approach; output suppression
+   * hides the injection command. Resolves when injection is complete - or
+   * when it is given up on, never hangs.
+   */
+  injectShellIntegration = async () => {
+    if (this.shellInjected) {
+      return
+    }
+
+    const addon = this.addon
+    if (!addon) {
+      return
+    }
+
+    let shellType
+    if (this.isLocal()) {
+      const { config } = this.term.props
+      const localShell = isMac ? config.execMac : config.execLinux
+      shellType = detectShellType(localShell || '')
+    } else if (this.isRemoteShell()) {
+      shellType = await Promise.race([
+        this.detectRemoteShell(this.term.pid),
+        new Promise(resolve => {
+          setTimeout(() => resolve('sh'), remoteShellDetectTimeoutMs)
+        })
+      ])
+    }
+
+    this.shellType = shellType
+
+    // sh/ash only reports cwd via PS1 (no command tracking), so it is only
+    // worth injecting when something actually needs the cwd: sftp follow or
+    // session restore. Command suggestions alone stay disabled on sh.
+    const { config, sftpPathFollowSsh } = this.term.props
+    if (
+      shellType === 'sh' &&
+      !sftpPathFollowSsh &&
+      !config.restoreTerminalSessionOnReload
+    ) {
+      return
+    }
+
+    // The connection (or the whole terminal) can go away while
+    // detectRemoteShell is in flight. Bail instead of registering callbacks
+    // on a dead socket - that is what used to leave the queue, and every run
+    // script behind it, waiting forever.
+    if (this.isClosed() || this.addon !== addon || addon.disposed) {
+      return
+    }
+
+    const integrationCmd = getShellIntegrationCommand(shellType)
+    const suppressionTimeout = this.isRemoteShell() ? 5000 : 3000
+
+    return new Promise((resolve) => {
+      let done = false
+      const finish = () => {
+        if (done) {
+          return
+        }
+        done = true
+        this.timers.delete(safetyTimer)
+        clearTimeout(safetyTimer)
+        resolve()
+      }
+      // Hard ceiling for the whole injection. onInitialData only fires once
+      // the shell produces output; when it never does (dead pty, restricted
+      // shell, zmodem in progress) the promise - and the run scripts queued
+      // behind it - would otherwise never be released.
+      const safetyTimer = setTimeout(() => {
+        if (addon.outputSuppressed) {
+          // Unfreeze the screen rather than keep hiding output.
+          addon.stopOutputSuppression(false)
+        }
+        finish()
+      }, suppressionTimeout + 2000)
+      this.timers.add(safetyTimer)
+
+      // Wait for initial data (prompt/banner) to arrive before injecting
+      addon.onInitialData(() => {
+        if (done || this.addon !== addon || addon.disposed) {
+          return finish()
+        }
+        // Start suppressing output before sending the integration command.
+        // This hides the command and its output until OSC 633 is detected.
+        addon.startOutputSuppression(suppressionTimeout, () => {
+          if (!addon.disposed) {
+            this.shellInjected = true
+          }
+          finish()
+        })
+        addon._sendData(integrationCmd)
+      })
+    })
+  }
+}
+
+export default StartupQueue

package/client/components/terminal/terminal-interactive.jsx

@@ -8,6 +8,9 @@ import TermInteractiveUI from './terminal-interactive-ui'
 import ExternalLink from '../common/external-link.jsx'
 import { notification } from '../common/notification'
 
+// x11 warnings already shown, keyed by message text
+const shownX11Warnings = new Set()
+
 export default function TermInteractive () {
   const [current, setCurrent] = useState(null)
   const queueRef = useRef([])
@@ -43,6 +46,28 @@ export default function TermInteractive () {
     })
   }
 
+  function notifyX11Warning (data) {
+    // one notification per distinct message, several tabs may report it
+    if (shownX11Warnings.has(data.message)) {
+      return
+    }
+    shownX11Warnings.add(data.message)
+    notification.warning({
+      message: 'X11 forwarding',
+      description: (
+        <div className='pd0 mg0'>
+          <div>{data.message}</div>
+          {
+            data.url
+              ? <ExternalLink to={data.url}>{data.url}</ExternalLink>
+              : null
+          }
+        </div>
+      ),
+      duration: 30
+    })
+  }
+
   function processNext () {
     const next = queueRef.current.shift()
     if (next) {
@@ -82,6 +107,13 @@ export default function TermInteractive () {
       e.data.includes('ssh-proxy-command-message')
     ) {
       notifyProxyCommandMessage(JSON.parse(e.data))
+    } else if (
+      e &&
+      e.data &&
+      typeof e.data === 'string' &&
+      e.data.includes('x11-warning')
+    ) {
+      notifyX11Warning(JSON.parse(e.data))
     }
   }
 

package/client/components/terminal/terminal-select-text.jsx

@@ -0,0 +1,69 @@
+/**
+ * Full-screen plain-text view of the buffer, for touch devices.
+ *
+ * Selecting inside a canvas-rendered terminal on a phone is hopeless: there is
+ * no system selection to lean on, so every touch terminal ends up
+ * re-implementing magnifiers, draggable handles and edge auto-scroll. This
+ * takes the other route — hand the text to an ordinary read-only <textarea>
+ * and let iOS/Android supply the whole native toolbox (long-press word select,
+ * resizable handles, the Copy callout) for free.
+ *
+ * Rendered through a portal onto <body> rather than in place: `.term-wrap` is
+ * a positioned element with its own z-index, so anything inside it is trapped
+ * in that stacking context and would still be covered by the touch shortcut
+ * bar (z-index 400). The portal also keeps these styles away from
+ * `.term-wrap`, which switches off -webkit-touch-callout and user-select for
+ * the terminal's own gestures — `-webkit-touch-callout` is inherited, so
+ * without the reset in terminal.styl the native callout would never appear.
+ *
+ * React events still bubble along the React tree, not the DOM one, so the
+ * parent's touch handlers and the antd Dropdown's `contextMenu` trigger both
+ * still see events from here. Two guards in response:
+ *  - term-touch.js bails out of any touch start whose target is this overlay;
+ *  - the contextmenu handler below stops the event, which would otherwise open
+ *    the terminal menu on top of the selection. Only propagation is stopped,
+ *    never the default action, since that default action *is* the native
+ *    callout being relied on.
+ *
+ * The content is a snapshot taken when the panel opens: output arriving
+ * afterwards keeps going to the terminal underneath and cannot disturb a
+ * selection the user is in the middle of making.
+ */
+
+import { memo } from 'react'
+import { createPortal } from 'react-dom'
+
+const e = window.translate
+
+export default memo(function TerminalSelectText (props) {
+  if (!props.visible) {
+    return null
+  }
+  const blockMenu = ev => ev.stopPropagation()
+  return createPortal(
+    <div
+      className='terminal-select-text'
+      onContextMenu={blockMenu}
+    >
+      <div className='terminal-select-text-bar'>
+        <span>{e('selectText')}</span>
+        <span className='terminal-select-text-btns'>
+          <a onClick={props.onSelectAll}>{e('selectall')}</a>
+          <a onClick={props.onCopy}>{e('copy')}</a>
+          <a onClick={props.onClose}>{e('close')}</a>
+        </span>
+      </div>
+      <textarea
+        className='terminal-select-text-area'
+        ref={props.textareaRef}
+        value={props.text}
+        readOnly
+        spellCheck={false}
+        autoComplete='off'
+        autoCorrect='off'
+        autoCapitalize='off'
+      />
+    </div>,
+    document.body
+  )
+})