@electerm/electerm-react 3.15.178 → 3.15.187

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,19 +112,36 @@ class Tab extends Component {
     document.querySelectorAll('.' + onDragOverCls).forEach((d) => {
       removeClass(d, onDragOverCls)
     })
+    document.querySelectorAll('.' + onDragOverAfterCls).forEach((d) => {
+      removeClass(d, onDragOverAfterCls)
+    })
   }
 
   handleClick = (e) => {
     window.store.clickTab(this.props.tab.id, this.props.batch)
   }
 
+  onMouseEnter = () => {
+    const {
+      tab,
+      batch,
+      currentBatchTabId
+    } = this.props
+    if (document.querySelector('.' + onDragCls)) {
+      return
+    }
+    if (tab.id === currentBatchTabId) {
+      return
+    }
+    window.store.clickTab(tab.id, batch)
+  }
+
   onDrag = () => {
     addClass(this.tabRef.current, onDragCls)
   }
 
-  onDragEnter = () => {
-    this.clearCls()
-    addClass(this.tabRef.current, onDragOverCls)
+  onDragEnter = (e) => {
+    this.applyDragOverCls(e)
   }
 
   onDragExit = () => {
@@ -135,13 +154,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 +206,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 +227,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 +249,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()
   }
@@ -422,7 +456,8 @@ class Tab extends Component {
     const {
       isLast,
       tab,
-      currentBatchTabId
+      currentBatchTabId,
+      config
     } = this.props
     const {
       id,
@@ -480,6 +515,7 @@ class Tab extends Component {
           data-id={id}
           {...pick(this, [
             'onDrag',
+            ...(config && config.switchTabOnHover ? ['onMouseEnter'] : []),
             'onDragEnter',
             'onDragExit',
             'onDragLeave',

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)
       )
   }

package/client/components/terminal/terminal.jsx

@@ -21,7 +21,8 @@ import {
   rendererTypes,
   isMac,
   isMacJs,
-  connectionMap
+  connectionMap,
+  terminalSerialType
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
@@ -74,6 +75,38 @@ import {
 
 const e = window.translate
 
+// Expands \n \t \r \\ and \xHH hex byte escapes, used to let users type
+// control bytes (e.g. \x01 = Ctrl+A) in the serial "closeSequence" field.
+function expandCloseSequence (text) {
+  let result = ''
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '\\' && i + 1 < text.length) {
+      const next = text[i + 1]
+      if (next === 'n') {
+        result += '\n'
+        i++
+      } else if (next === 't') {
+        result += '\t'
+        i++
+      } else if (next === 'r') {
+        result += '\r'
+        i++
+      } else if (next === '\\') {
+        result += '\\'
+        i++
+      } else if (next === 'x' && /^[0-9a-fA-F]{2}$/.test(text.slice(i + 2, i + 4))) {
+        result += String.fromCharCode(parseInt(text.slice(i + 2, i + 4), 16))
+        i += 3
+      } else {
+        result += text[i]
+      }
+    } else {
+      result += text[i]
+    }
+  }
+  return result
+}
+
 class Term extends Component {
   constructor (props) {
     super(props)
@@ -635,6 +668,7 @@ class Term extends Component {
   // long-press detection here.
   longPressTimer = null
   touchStartPos = null
+  longPressFired = false
   longPressThreshold = 500 // ms
   longPressMoveTolerance = 10 // px
 
@@ -648,6 +682,7 @@ class Term extends Component {
       clientY: touch.clientY,
       target: e.currentTarget
     }
+    this.longPressFired = false
     clearTimeout(this.longPressTimer)
     this.longPressTimer = setTimeout(() => {
       this.handleLongPress()
@@ -669,15 +704,27 @@ class Term extends Component {
   }
 
   onTouchEnd = () => {
+    const wasTap = this.touchStartPos && !this.longPressFired
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null
     this.touchStartPos = null
+    // xterm's own touch (Gesture) handler calls preventDefault()/stopPropagation()
+    // on touchstart/touchend, which suppresses the synthesised mousedown xterm
+    // relies on to focus its hidden helper textarea. As a result a tap never
+    // focuses the terminal on touch devices, so the soft keyboard never opens
+    // and you cannot type. Focus explicitly on a clean tap (not a long-press,
+    // not a scroll) so mobile input works. The focus() runs synchronously inside
+    // this user-gesture handler, so iOS/Android will show the keyboard.
+    if (wasTap && this.term) {
+      this.term.focus()
+    }
   }
 
   handleLongPress = () => {
     if (!this.touchStartPos || this.state.loading) {
       return
     }
+    this.longPressFired = true
     const { clientX, clientY, target } = this.touchStartPos
 
     // Select the word at the touch position (same as desktop right-click word
@@ -1984,6 +2031,33 @@ class Term extends Component {
     this.props.delTab(id)
   }
 
+  /**
+   * Manually triggered from the "exit gracefully" control in
+   * session-control.jsx (serial tabs only). Writes the configured key
+   * sequence (default \x01ky = Ctrl+A, k, y to kill a GNU screen window) to
+   * the socket, waits a bit so the remote end (e.g. a Bluetooth console
+   * adapter) can release cleanly, then closes the tab.
+   */
+  exitGracefully = async () => {
+    const { tab } = this.props
+    if (tab.type !== terminalSerialType) {
+      return
+    }
+    if (!this.onClose && this.attachAddon?._sendData) {
+      try {
+        const data = expandCloseSequence(tab.closeSequence || '\\x01ky')
+        if (data) {
+          this.attachAddon._sendData(data)
+        }
+      } catch (err) {
+        console.error('send close sequence failed', err)
+      }
+      const delay = Number(tab.closeSequenceDelay)
+      await new Promise(resolve => setTimeout(resolve, Number.isFinite(delay) && delay >= 0 ? delay : 500))
+    }
+    this.props.delTab(tab.id)
+  }
+
   handleShowInfo = () => {
     const { logName, tab } = this.props
     const infoProps = {