@electerm/electerm-react 5.3.15 → 5.5.6

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -37,6 +37,8 @@
  */
 
 import { lazy, Suspense, useEffect, useState } from 'react'
+import { auto } from 'manate/react'
+import LazyBoundary from '../common/lazy-boundary'
 
 const ShortcutBar = lazy(() => import('./shortcut-bar'))
 
@@ -52,38 +54,37 @@ export const KEYBOARD_MIN = 120
 // keyboard from a mouse-driven window resize on touch-capable desktops.
 const TOUCH_GRACE_MS = 3000
 
-// kept as a coarse capability fallback for engines without visualViewport.
-// Modern Chromium (Electron) always exposes window.visualViewport, so this is
-// effectively only reached on very old runtimes — where remote-control
-// misreporting is not a concern.
-export function isTouchDevice () {
-  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-    return false
-  }
-  const coarse = typeof window.matchMedia === 'function' &&
-    window.matchMedia('(pointer: coarse)').matches
-  const hasTouch = (navigator.maxTouchPoints || 0) > 0 ||
-    ('ontouchstart' in window)
-  return Boolean(coarse || hasTouch)
-}
-
-export default function ShortcutBarEntry (props) {
-  // mount the lazy bar only after a soft keyboard has been seen at least once,
-  // so its code (and antd/icon deps) stays out of the main bundle on devices
-  // that never show one (desktops, remote-control clients mis-reported as
-  // touch, etc.).
-  //
+function ShortcutBarEntry (props) {
+  const { store } = props
   // opt out entirely when the user has disabled the shortcut bar in common
   // settings — bail before any listener is attached or component imported.
-  const { store } = props
   const disabled = store.config.disableShortcutBar
+  // follow the store's live touch state (flipped by main.jsx from real
+  // pointer input — mouse → false, touch/pen → true) instead of probing screen
+  // capability, which only says the screen *can* be touched, not whether the
+  // user is actually using touch, so the bar reacts when a touch-capable
+  // machine starts being used by touch.
+  const isTouch = store.isTouchDevice
+  // very old runtimes expose no visualViewport — the lazy "wait for a real
+  // keyboard" signal below can never fire there, so fall back straight to the
+  // touch state.
+  const noVisualViewport = typeof window === 'undefined' || !window.visualViewport
   const [keyboardSeen, setKeyboardSeen] = useState(() => {
-    if (disabled || typeof window === 'undefined' || !window.visualViewport) {
-      return disabled ? false : isTouchDevice()
+    if (noVisualViewport) {
+      return !disabled && isTouch
     }
     return false
   })
 
+  // keep the no-visualViewport fallback current as the store's touch state
+  // flips at runtime; on modern engines keyboardSeen is driven by the resize
+  // listener below and this never runs.
+  useEffect(() => {
+    if (noVisualViewport) {
+      setKeyboardSeen(!disabled && isTouch)
+    }
+  }, [disabled, isTouch, noVisualViewport])
+
   useEffect(() => {
     const vv = window.visualViewport
     if (!vv) {
@@ -166,8 +167,12 @@ export default function ShortcutBarEntry (props) {
     return null
   }
   return (
-    <Suspense fallback={null}>
-      <ShortcutBar {...props} />
-    </Suspense>
+    <LazyBoundary>
+      <Suspense fallback={null}>
+        <ShortcutBar {...props} />
+      </Suspense>
+    </LazyBoundary>
   )
 }
+
+export default auto(ShortcutBarEntry)

package/client/components/terminal/shortcut-bar.jsx

@@ -135,12 +135,10 @@ function ShortcutBar (props) {
   // keep the offset in a CSS var consumed by shortcut-bar.styl, and expose the
   // lifted height so layout.jsx can shrink the terminal accordingly.
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--shortcut-bar-kb-offset',
-      kbOffset ? kbOffset + 'px' : '0px'
-    )
-    store.shortcutBarKbOffset = kbOffset
-  }, [kbOffset])
+    const offset = store.shortcutBarVisible ? kbOffset : 0
+    document.documentElement.style.setProperty('--shortcut-bar-kb-offset', offset + 'px')
+    store.shortcutBarKbOffset = offset
+  }, [kbOffset, store.shortcutBarVisible])
 
   // reserve layout space + lift the footer while the bar is shown.
   // expose the bar height as a CSS var so the .styl + footer-lift rule stay

package/client/components/terminal/shortcut-bar.styl

@@ -79,6 +79,10 @@
 .shortcut-bar-on
   .main-footer
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
+  .remote-monitor-bar
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  .qm-wrap-tooltip
+    bottom calc(var(--footer-stack-height, 36px) + var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 
 // --- edit modal -----------------------------------------------------------
 

package/client/components/terminal/ssh-reload-state.js

@@ -0,0 +1,56 @@
+const maxCwdLength = 4096
+
+export function isSshTab (tab = {}) {
+  return !!tab.host && (!tab.type || tab.type === 'ssh')
+}
+
+export function sanitizeSshCwd (cwd) {
+  if (typeof cwd !== 'string' || !cwd || cwd.length > maxCwdLength) {
+    return ''
+  }
+  if (/[\0\r\n]/.test(cwd)) {
+    return ''
+  }
+  return cwd
+}
+
+export function quotePosixShellArg (value) {
+  const quote = '\''
+  const escapedQuote = quote + '"' + quote + '"' + quote
+  return quote + value.replace(/'/g, escapedQuote) + quote
+}
+
+export function createRestoreCwdCommand (cwd) {
+  const safeCwd = sanitizeSshCwd(cwd)
+  return safeCwd ? `cd -- ${quotePosixShellArg(safeCwd)}` : ''
+}
+
+export function shouldCaptureSshReloadState (tab, config = {}) {
+  return !!config.restoreTerminalSessionOnReload && isSshTab(tab)
+}
+
+export function createSshReloadState ({ cwd, screen } = {}) {
+  const safeCwd = sanitizeSshCwd(cwd)
+  const safeScreen = typeof screen === 'string' ? screen : ''
+  if (!safeCwd && !safeScreen) {
+    return undefined
+  }
+  return {
+    cwd: safeCwd,
+    screen: safeScreen
+  }
+}
+
+export function getAlternateBufferSnapshot (buffer) {
+  if (!buffer || buffer.type !== 'alternate') {
+    return ''
+  }
+  const lines = []
+  for (let i = 0; i < buffer.length; i++) {
+    lines.push(buffer.getLine(i)?.translateToString(true) || '')
+  }
+  while (lines.length && !lines[lines.length - 1]) {
+    lines.pop()
+  }
+  return lines.join('\r\n')
+}

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

@@ -0,0 +1,379 @@
+/**
+ * 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 } 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()
+  }
+
+  isLocal = () => {
+    return this.term.isLocal()
+  }
+
+  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.isSsh()
+      ? term.props.tab._reloadState?.cwd
+      : ''
+    const startFolder = reloadCwd || startDirectory || window.initFolder
+    const cwdCommand = this.isSsh()
+      ? createRestoreCwdCommand(startFolder)
+      : 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.isSsh())
+    ) &&
+    (
+      this.isSsh() ||
+      (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.isSsh()) {
+      shellType = await Promise.race([
+        this.detectRemoteShell(this.term.pid),
+        new Promise(resolve => {
+          setTimeout(() => resolve('sh'), remoteShellDetectTimeoutMs)
+        })
+      ])
+    }
+
+    this.shellType = shellType
+
+    // Don't inject for sh type shells unless sftpPathFollowSsh is true
+    if (shellType === 'sh' && !this.term.props.sftpPathFollowSsh) {
+      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.isSsh() ? 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))
     }
   }