@electerm/electerm-react 3.15.175 → 3.15.186

package/client/components/shortcuts/shortcut-handler.js

@@ -214,6 +214,26 @@ export function shortcutExtend (Cls) {
       this.term.buffer.active.type === 'alternate'
     ) {
       return true
+    } else if (
+      (key === 'ArrowLeft' || key === 'ArrowRight') &&
+      type === 'keydown' &&
+      altKey &&
+      !ctrlKey &&
+      !shiftKey &&
+      !metaKey
+    ) {
+      // Restore xterm 5.5.0 behavior: convert Alt/Option + Left/Right into
+      // readline-compatible word-movement sequences.
+      // xterm 6.x dropped the platform-specific override in evaluateKeyboardEvent,
+      // which now sends CSI modifier sequences (e.g. ESC[1;3D) that old shells
+      // do not bind to backward-word / forward-word, causing trailing chars
+      // ("D", ";3D") to leak as literal input.
+      const seq = key === 'ArrowLeft'
+        ? (isMacJs ? '\x1bb' : '\x1b[1;5D')
+        : (isMacJs ? '\x1bf' : '\x1b[1;5C')
+      sendInputData(this, seq)
+      this.term?.scrollToBottom()
+      return false
     }
 
     if (

package/client/components/sidebar/transport-ui.jsx

@@ -13,6 +13,7 @@ import {
 import { action } from 'manate'
 import { addClass, removeClass } from '../../common/class'
 import { refsStatic } from '../common/ref'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 import './transfer.styl'
 
 const e = window.translate
@@ -70,28 +71,28 @@ export default function Transporter (props) {
     addClass(dom.current, onDragCls)
   }
 
-  function onDragEnter () {
+  function updateDropIndicator (e) {
     clearCls()
-    addClass(dom.current, onDragOverCls)
+    setDropIndicator(dom.current, isDropAfterHalf(e, dom.current))
+  }
+
+  function onDragEnter (e) {
+    e.preventDefault()
+    updateDropIndicator(e)
   }
 
   function onDragExit () {
     // debug('ondragexit')
-    // let {target} = e
-    // removeClass(target, 'sftp-dragover')
   }
 
-  function onDragLeave (e) {
-    // debug('ondragleave')
-    const { target } = e
-    removeClass(target, onDragOverCls)
+  function onDragLeave () {
+    clearDropIndicator(dom.current)
   }
 
   function onDragOver (e) {
     // debug('ondragover')
-    // debug(e.target)
-    // removeClass(dom.current, 'sftp-dragover')
     e.preventDefault()
+    updateDropIndicator(e)
   }
 
   function onDragStart (e) {
@@ -103,6 +104,7 @@ export default function Transporter (props) {
 
   function onDrop (e) {
     e.preventDefault()
+    clearDropIndicator(dom.current)
     const { target } = e
     if (!target) {
       return
@@ -126,15 +128,19 @@ export default function Transporter (props) {
 
     const arr = window.store.fileTransfers
     const indexFrom = arr.findIndex(t => t.id === fromId)
-    let indexDrop = arr.findIndex(t => t.id === dropId)
+    const indexDrop = arr.findIndex(t => t.id === dropId)
+    // bottom half of the target row => insert after it, so the last
+    // transfer can receive a drop (append to the end of the queue).
+    const insertAfter = isDropAfterHalf(e, onDropTab)
     if (indexFrom >= 0 && indexDrop >= 0) {
       // Reorder tabs and update batch
       action(function () {
         const [tr] = arr.splice(indexFrom, 1)
-        if (indexFrom < indexDrop) {
-          indexDrop = indexDrop - 1
+        let insertIndex = insertAfter ? indexDrop + 1 : indexDrop
+        if (indexFrom < insertIndex) {
+          insertIndex = insertIndex - 1
         }
-        arr.splice(indexDrop, 0, tr)
+        arr.splice(insertIndex, 0, tr)
       })()
     }
   }
@@ -142,6 +148,7 @@ export default function Transporter (props) {
   function onDragEnd (e) {
     removeClass(dom.current, onDragCls)
     clearCls()
+    clearDropIndicator(dom.current)
     e && e.dataTransfer && e.dataTransfer.clearData()
   }
   const isTransfer = typeTo !== typeFrom

package/client/components/tabs/index.jsx

@@ -386,6 +386,23 @@ export default class Tabs extends Component {
     )
   }
 
+  renderMobileTabsInner (currentTabEl) {
+    const inner = (
+      <div className='tabs-inner mobile-tabs-inner'>
+        {currentTabEl}
+      </div>
+    )
+    const { config } = this.props
+    if (config.useSystemTitleBar) {
+      return inner
+    }
+    return (
+      <AppDrag>
+        {inner}
+      </AppDrag>
+    )
+  }
+
   renderMobileTabs () {
     const { tabs = [], currentBatchTabId } = this.props
     const currentTab = tabs.find(t => t.id === currentBatchTabId)
@@ -410,9 +427,7 @@ export default class Tabs extends Component {
       : null
     return (
       <div className='tabs mobile-tabs' ref={this.tabsRef}>
-        <div className='tabs-inner mobile-tabs-inner'>
-          {currentTabEl}
-        </div>
+        {this.renderMobileTabsInner(currentTabEl)}
         {this.renderMobileTabsExtra(items)}
         {this.renderWindowControl()}
       </div>

package/client/components/tabs/tab.jsx

@@ -25,10 +25,12 @@ import isDark from '../../common/is-color-dark'
 import { action } from 'manate'
 import iconsMap from '../sys-menu/icons-map.jsx'
 import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
+import { isDropAfterHalf } from '../../common/drop-position'
 
 const e = window.translate
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
+const onDragOverAfterCls = 'dragover-tab-after'
 
 class Tab extends Component {
   constructor (props) {
@@ -110,6 +112,9 @@ class Tab extends Component {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
     })
+    document.querySelectorAll('.' + onDragOverAfterCls).forEach((d) => {
+      removeClass(d, onDragOverAfterCls)
+    })
   }
 
   handleClick = (e) => {
@@ -120,9 +125,8 @@ class Tab extends Component {
     addClass(this.tabRef.current, onDragCls)
   }
 
-  onDragEnter = () => {
-    this.clearCls()
-    addClass(this.tabRef.current, onDragOverCls)
+  onDragEnter = (e) => {
+    this.applyDragOverCls(e)
   }
 
   onDragExit = () => {
@@ -135,13 +139,22 @@ class Tab extends Component {
     // debug('ondragleave')
     const { target } = e
     removeClass(target, onDragOverCls)
+    removeClass(target, onDragOverAfterCls)
+  }
+
+  // Pick the before/after indicator based on which half of the tab
+  // the pointer is in, so the drop line shows where it will actually go.
+  applyDragOverCls = e => {
+    this.clearCls()
+    const insertAfter = isDropAfterHalf(e, this.tabRef.current, true)
+    addClass(this.tabRef.current, insertAfter ? onDragOverAfterCls : onDragOverCls)
   }
 
   onDragOver = e => {
     // debug('ondragover')
     // debug(e.target)
-    // removeClass(this.tabRef.current, 'sftp-dragover')
     e.preventDefault()
+    this.applyDragOverCls(e)
   }
 
   onDragStart = e => {
@@ -178,7 +191,9 @@ class Tab extends Component {
     const { id } = fromTab
     const storeTabs = window.store.tabs
     const indexFrom = storeTabs.findIndex(t => t.id === id)
-    let indexDrop = storeTabs.findIndex(t => t.id === dropId)
+    const indexDrop = storeTabs.findIndex(t => t.id === dropId)
+    // tabs are laid out horizontally: right half of the target => insert after
+    const insertAfter = isDropAfterHalf(e, onDropTab, true)
 
     if (indexFrom >= 0 && indexDrop >= 0) {
       const targetTab = storeTabs[indexDrop]
@@ -197,10 +212,13 @@ class Tab extends Component {
       action(function () {
         const [tab] = storeTabs.splice(indexFrom, 1)
         tab.batch = targetTab.batch // Update the batch to match target tab's batch
-        if (indexFrom < indexDrop) {
-          indexDrop = indexDrop - 1
+        // insertAfter lets a tab land after the target, so the last tab
+        // can receive a drop (insertIndex can reach storeTabs.length).
+        let insertIndex = insertAfter ? indexDrop + 1 : indexDrop
+        if (indexFrom < insertIndex) {
+          insertIndex = insertIndex - 1
         }
-        storeTabs.splice(indexDrop, 0, tab)
+        storeTabs.splice(insertIndex, 0, tab)
       })()
       window.store.focus()
     }
@@ -216,6 +234,7 @@ class Tab extends Component {
 
   onDragEnd = e => {
     removeClass(this.tabRef.current, onDragCls)
+    removeClass(this.tabRef.current, onDragOverAfterCls)
     this.clearCls()
     e && e.dataTransfer && e.dataTransfer.clearData()
   }

package/client/components/tabs/tabs.styl

@@ -68,6 +68,14 @@
     width 1px
     border 1px dashed var(--text-dark)
     height 36px
+  &.dragover-tab-after::after
+    position absolute
+    content ''
+    right -2px
+    top 0
+    width 1px
+    border 1px dashed var(--text-dark)
+    height 36px
 @keyframes blink
   0%
     background-color #e0e0e0

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

@@ -23,6 +23,32 @@ export default class AttachAddonCustom {
     this._passwordPromptDetected = false
     this._pendingEchoCheck = null
     this._echoCheckTimer = null
+    // Write coalescing: terminal output is buffered and flushed on a short
+    // timer so that heavy bursts (e.g. `yum install` download progress, which
+    // rewrites the same line with \r + clear-line thousands of times per
+    // second) collapse into a few term.write() calls per frame instead of
+    // blocking the main thread on every WebSocket message.
+    this._writeBuffer = []
+    this._bufferBytes = 0
+    this._flushScheduled = false
+    this._flushTimer = null
+    // Coalescing window. Output is flushed at most once per interval.
+    // 16ms ~= one frame; low enough that interactive echo feels instant,
+    // high enough to merge a multi-MB/s flood into ~60 writes/s.
+    this._flushIntervalMs = 16
+    // Time of the last actual flush. Drives the interactive fast path in
+    // _enqueueWrite: output arriving after an idle gap (keystroke echo,
+    // command result) is flushed immediately instead of paying the
+    // coalescing delay. 0 = the first chunk ever flushes immediately.
+    this._lastFlushTime = 0
+    // Soft cap on buffered-but-unflushed bytes. Under a sustained flood the
+    // producer outruns the renderer; once pending output exceeds this we drop
+    // the OLDEST data (preserving the newest, visible tail and the line
+    // currently being rewritten). Normal interactive output is many orders of
+    // magnitude smaller and is never dropped.
+    this._maxBufferBytes = 256 * 1024
+    this._droppedBytes = 0
+    this._droppedWarned = false
   }
 
   _initBase = async () => {
@@ -182,27 +208,11 @@ export default class AttachAddonCustom {
       }
     }
 
-    if (this.outputSuppressed) {
-      let str = data
-      if (typeof data !== 'string') {
-        const decoder = this.decoder || new TextDecoder('utf-8')
-        try {
-          str = decoder.decode(data instanceof ArrayBuffer ? data : new Uint8Array(data))
-        } catch (e) {
-          str = ''
-        }
-      }
-
-      if (this.checkForShellIntegration(str)) {
-        this.onShellIntegrationDetected()
-        return
-      }
-
-      this.suppressedData.push(data)
-      return
-    }
-
-    // Password prompt detection on output
+    // Decode once, synchronously. The previous implementation routed binary
+    // chunks through `new Blob()` + `FileReader.readAsArrayBuffer()` and decoded
+    // in an async `onRead` callback; that async round-trip (plus a per-chunk
+    // Blob allocation) showed up in the profile and fragmented main-thread work.
+    // We already hold a TextDecoder, so decode inline like the suppression path.
     let str = data
     if (typeof data !== 'string') {
       try {
@@ -213,6 +223,18 @@ export default class AttachAddonCustom {
         str = ''
       }
     }
+
+    if (this.outputSuppressed) {
+      if (this.checkForShellIntegration(str)) {
+        this.onShellIntegrationDetected()
+        return
+      }
+      this.suppressedData.push(data)
+      return
+    }
+
+    // Prompt/echo detection runs per chunk (cheap) so password prompts and
+    // shell integration are still detected promptly.
     this._handleEchoDetection(str)
     if (this._checkPasswordPrompt(str) && !this._passwordPromptDetected) {
       this._passwordPromptDetected = true
@@ -222,27 +244,109 @@ export default class AttachAddonCustom {
       }, 100)
     }
 
-    if (typeof data === 'string') {
-      term?.parent?.notifyOnData()
-      term.write(data)
-      // Notify parent that the terminal buffer has been updated (echo received).
-      // This allows the suggestion dropdown to refresh after the buffer reflects
-      // the latest server-side state (e.g., after backspace echo).
-      term?.parent?.onTerminalWrite?.()
+    // Coalesce the actual write (see _enqueueWrite). notifyOnData /
+    // onTerminalWrite fire once per flush instead of once per chunk.
+    this._enqueueWrite(str)
+  }
+
+  // Buffer decoded output and flush it on a short timer so a burst of messages
+  // becomes a single (size-capped) term.write() call, keeping the main thread
+  // free to handle UI events and input between flushes.
+  _enqueueWrite = (str) => {
+    if (!this.term || !str) {
+      return
+    }
+    this._writeBuffer.push(str)
+    this._bufferBytes += str.length
+    if (this._bufferBytes > this._maxBufferBytes) {
+      this._dropOldestUntil()
+    }
+    // A hidden window gets its timers throttled by Chromium (Electron's
+    // backgroundThrottling defaults to true), which would stall the flush
+    // timer and force the byte cap to drop real output. Nothing is painted
+    // while hidden, so coalescing buys nothing — flush synchronously.
+    if (document.hidden) {
+      clearTimeout(this._flushTimer)
+      this._flushWrites()
       return
     }
-    data = new Uint8Array(data)
-    const fileReader = new FileReader()
-    fileReader.addEventListener('load', this.onRead)
-    fileReader.readAsArrayBuffer(new window.Blob([data]))
+    // Interactive fast path: if the last flush was longer ago than the
+    // coalescing window (keystroke echo, command result after idle), flush
+    // immediately so typing adds zero latency. Only output arriving inside
+    // a burst window pays the coalescing delay — which is exactly the flood
+    // case coalescing exists for.
+    const elapsed = Date.now() - this._lastFlushTime
+    if (elapsed >= this._flushIntervalMs) {
+      clearTimeout(this._flushTimer)
+      this._flushWrites()
+      return
+    }
+    if (!this._flushScheduled) {
+      this._flushScheduled = true
+      this._flushTimer = setTimeout(this._flushWrites, this._flushIntervalMs - elapsed)
+    }
   }
 
-  onRead = (ev) => {
-    const data = ev.target.result
+  // Under heavy flood the producer outruns the renderer; once pending output
+  // exceeds the cap we drop the OLDEST chunks (preserving the newest, visible
+  // tail and the line currently being rewritten). The first kept chunk is
+  // trimmed to the next newline so we never render a half line / broken escape.
+  _dropOldestUntil = () => {
+    const buf = this._writeBuffer
+    let kept = 0
+    let cutIdx = buf.length
+    for (let i = buf.length - 1; i >= 0; i--) {
+      if (kept + buf[i].length > this._maxBufferBytes) {
+        cutIdx = i + 1
+        break
+      }
+      kept += buf[i].length
+    }
+    if (cutIdx <= 0) {
+      return
+    }
+    let dropped = 0
+    for (let i = 0; i < cutIdx; i++) {
+      dropped += buf[i].length
+    }
+    if (cutIdx < buf.length) {
+      const first = buf[cutIdx]
+      const nl = first.indexOf('\n')
+      if (nl >= 0 && nl < first.length - 1) {
+        dropped += nl + 1
+        buf[cutIdx] = first.slice(nl + 1)
+      } else {
+        dropped += buf[cutIdx].length
+        cutIdx += 1
+      }
+    }
+    this._writeBuffer = buf.slice(cutIdx)
+    this._bufferBytes -= dropped
+    this._droppedBytes += dropped
+    if (!this._droppedWarned) {
+      this._droppedWarned = true
+      console.warn('[AttachAddon] Heavy output detected; coalescing writes and dropping intermediate output to keep the UI responsive.')
+    }
+  }
+
+  _flushWrites = () => {
+    this._flushScheduled = false
+    this._flushTimer = null
+    const buf = this._writeBuffer
+    if (!buf.length || !this.term) {
+      this._writeBuffer = []
+      this._bufferBytes = 0
+      return
+    }
+    this._writeBuffer = []
+    this._bufferBytes = 0
+    const data = buf.length === 1 ? buf[0] : buf.join('')
     const { term } = this
+    this._lastFlushTime = Date.now()
+    term.write(data)
+    // Notify parent that the terminal buffer has been updated (echo received),
+    // once per flush instead of once per chunk.
     term?.parent?.notifyOnData()
-    const str = this.decoder.decode(data)
-    term?.write(str)
     term?.parent?.onTerminalWrite?.()
   }
 
@@ -324,6 +428,13 @@ export default class AttachAddonCustom {
     this._stopKeepalive()
     clearTimeout(this._echoCheckTimer)
     this._echoCheckTimer = null
+    if (this._flushTimer) {
+      clearTimeout(this._flushTimer)
+      this._flushTimer = null
+    }
+    this._flushScheduled = false
+    this._writeBuffer = []
+    this._bufferBytes = 0
     this.term = null
     this._disposables.forEach(d => d.dispose())
     this._disposables.length = 0

package/client/components/terminal/highlight-addon.js

@@ -2,6 +2,18 @@ export class KeywordHighlighterAddon {
   constructor (keywords) {
     this.keywords = keywords || []
     this.compiledPatterns = this.compilePatterns()
+    // Writes larger than this bypass keyword highlighting. Highlighting is meant
+    // for interactive command output; a large chunk is a command flood or
+    // download progress where scanning every byte (and rebuilding the result
+    // string) is pure overhead. Coupled with write coalescing in the attach
+    // addon, flood output skips this path entirely.
+    this.maxHighlightLength = 4096
+    // Compile the ANSI/OSC splitter once instead of allocating a new RegExp on
+    // every write (this was the #1 allocation in the hot path under load).
+    const ESC = String.fromCharCode(27) // \x1b
+    const BEL = String.fromCharCode(7) // \x07
+    // eslint-disable-next-line no-control-regex
+    this._ansiPattern = new RegExp('(' + ESC + '\\][^' + BEL + ESC + ']*(?:' + BEL + '|' + ESC + '\\\\)|' + ESC + '\\[\\??[0-9;]*[A-Za-z])', 'g')
   }
 
   // Pre-compile all regex patterns once for better performance
@@ -54,11 +66,8 @@ export class KeywordHighlighterAddon {
 
     // Split text into segments: ANSI/OSC sequences vs plain text
     // Match OSC sequences (ESC ] ... BEL or ESC ] ... ESC \) and CSI sequences (ESC [ ... letter)
-    // Use String.fromCharCode to avoid lint warnings about control characters
-    const ESC = String.fromCharCode(27) // \x1b
-    const BEL = String.fromCharCode(7) // \x07
-    // eslint-disable-next-line no-control-regex
-    const ansiPattern = new RegExp('(' + ESC + '\\][^' + BEL + ESC + ']*(?:' + BEL + '|' + ESC + '\\\\)|' + ESC + '\\[\\??[0-9;]*[A-Za-z])', 'g')
+    const ansiPattern = this._ansiPattern
+    ansiPattern.lastIndex = 0
 
     const segments = []
     let lastIndex = 0
@@ -142,9 +151,18 @@ export class KeywordHighlighterAddon {
       if (self.containsDcsSequence(data)) {
         return self.originalWrite(data)
       }
-      self.originalWrite(
-        terminal.displayRaw ? self.escape(data) : self.highlightKeywords(data)
-      )
+      // displayRaw applies to every write regardless of size: raw mode shows
+      // escape sequences as text, so skipping escape() for large chunks would
+      // let raw ESC bytes be interpreted by xterm instead of displayed.
+      if (terminal.displayRaw) {
+        return self.originalWrite(self.escape(data))
+      }
+      // Skip keyword highlighting for large writes (command floods, download
+      // progress). Highlighting targets interactive command output.
+      if (data.length > self.maxHighlightLength) {
+        return self.originalWrite(data)
+      }
+      self.originalWrite(self.highlightKeywords(data))
     }
   }
 

package/client/components/terminal/term-search.jsx

@@ -70,7 +70,7 @@ export default class TermSearch extends PureComponent {
     } = this.props
     refs.get('term-' + activeTabId)
       ?.searchPrev(
-        searchTerm ?? this.props.termSearch,
+        typeof searchTerm === 'string' ? searchTerm : this.props.termSearch,
         copy(termSearchOptions)
       )
   }