@electerm/electerm-react 3.15.90 → 3.15.100

package/client/common/constants.js

@@ -241,7 +241,6 @@ export const termLSPrefix = 'term:sess:'
 export const batchInputLsKey = 'batch-inputs'
 export const rendererTypes = {
   dom: 'dom',
-  canvas: 'canvas',
   webGL: 'webGL'
 }
 export const downloadUpgradeTimeout = 20000

package/client/common/default-setting.js

@@ -28,7 +28,7 @@ export default {
   terminalBackgroundTextSize: 48,
   terminalBackgroundTextColor: '#ffffff',
   terminalBackgroundTextFontFamily: 'Maple Mono',
-  rendererType: 'canvas',
+  rendererType: 'dom',
   terminalType: 'xterm-256color',
   keepaliveCountMax: 10,
   keyword2FA: 'verification code,otp,one-time,two-factor,2fa,totp,authenticator,duo,yubikey,security code,mfa,passcode',
@@ -48,6 +48,7 @@ export default {
   sftpPathFollowSsh: false,
   keepaliveInterval: 10000,
   backspaceMode: '^?',
+  shiftEnterMode: '\\n',
   showHiddenFilesOnSftpStart: true,
   terminalInfos: [
     'uptime',

package/client/common/sanitize-filename.js

@@ -9,7 +9,8 @@
  * Rules applied:
  * - Remove control characters (0x00-0x1F)
  * - Replace reserved characters: < > : " / \ | ? * with _
- * - Remove leading/trailing dots and spaces (Windows restriction)
+ * - Strip trailing dots and spaces (Windows restriction: "file.", "file ")
+ * - Strip leading spaces only (NOT leading dots — they mean hidden file)
  * - Reject reserved Windows device names: CON, PRN, AUX, NUL, COM1-9, LPT1-9
  * - Limit filename length to 255 bytes (common filesystem limit)
  * - Fallback to 'unnamed' if result is empty
@@ -19,8 +20,12 @@
 // eslint-disable-next-line no-control-regex
 const ILLEGAL_CHARS = /[<>:"/\\|?\x00-\x1f]/g
 
-// Leading/trailing dots and spaces are problematic on Windows
-const LEADING_TRAILING = /^[.\s]+|[.\s]+$/g
+// Trailing dots and spaces = problematic on Windows (e.g. "file." → "file")
+// Leading dots are PRESERVED — they mean "hidden file" on Unix and work on modern Windows
+const TRAILING_DOTS_SPACES = /[.\s]+$/g
+
+// Leading spaces only — Windows can't handle filenames starting with space
+const LEADING_SPACES = /^\s+/
 
 // Reserved Windows device names (case-insensitive)
 const RESERVED_NAMES = /^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])(?:\.|$)/i
@@ -37,8 +42,10 @@ export default function sanitizeFilename (name) {
   let safe = name
     // Replace illegal characters
     .replace(ILLEGAL_CHARS, REPLACEMENT_CHAR)
-    // Strip leading/trailing dots and spaces
-    .replace(LEADING_TRAILING, '')
+    // Strip trailing dots and spaces (Windows restriction)
+    .replace(TRAILING_DOTS_SPACES, '')
+    // Strip leading spaces only (not dots — they mean hidden file)
+    .replace(LEADING_SPACES, '')
 
   // Handle reserved Windows device names by appending underscore
   if (RESERVED_NAMES.test(safe)) {

package/client/components/setting-panel/setting-terminal.jsx

@@ -552,6 +552,10 @@ export default class SettingTerminal extends Component {
         {
           this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
         }
+        <div className='pd1b'>Shift+Enter</div>
+        {
+          this.renderText('shiftEnterMode', 'Text to send on Shift+Enter. Use \\n for newline')
+        }
         {
           this.renderCursorStyleSelect()
         }

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

@@ -5,6 +5,30 @@ import {
 } from '../../common/constants'
 import keyControlPressed from '../../common/key-control-pressed.js'
 
+function processEscapeSequences (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'
+      } else if (next === 't') {
+        result += '\t'
+      } else if (next === 'r') {
+        result += '\r'
+      } else if (next === '\\') {
+        result += '\\'
+      } else {
+        result += '\\' + next
+      }
+      i++
+    } else {
+      result += text[i]
+    }
+  }
+  return result
+}
+
 function sendInputData (ctx, data) {
   if (!data) return
   if (ctx.attachAddon && ctx.attachAddon._sendData) {
@@ -170,6 +194,21 @@ export function shortcutExtend (Cls) {
       this.socket.send(char)
       this.term.scrollToBottom()
       return false
+    } else if (
+      this.term &&
+      key === 'Enter' &&
+      type === 'keydown' &&
+      shiftKey &&
+      !ctrlKey &&
+      !altKey &&
+      !metaKey
+    ) {
+      event.preventDefault()
+      event.stopPropagation()
+      const shiftEnterText = processEscapeSequences(this.props.config.shiftEnterMode || '\\n')
+      this.socket.send(shiftEnterText)
+      this.term.scrollToBottom()
+      return false
     } else if (
       this.term &&
       this.term.buffer.active.type === 'alternate'

package/client/components/sidebar/info-modal.jsx

@@ -4,11 +4,11 @@ import {
   HighlightOutlined,
   HomeOutlined,
   UserOutlined,
-  WarningOutlined,
   InfoCircleOutlined,
   AlignLeftOutlined,
   BugOutlined,
-  HeartOutlined
+  HeartOutlined,
+  CloudOutlined
 } from '@ant-design/icons'
 import { Tabs, Button } from 'antd'
 import Modal from '../common/modal'
@@ -136,10 +136,10 @@ export default auto(function InfoModal (props) {
       url: bugReportLink
     },
     releases: releaseLink,
-    privacyNoticeLink,
     sponsorLink,
     knownIssuesLink
   } = packInfo
+  const electermOnline = 'https://cloud.electerm.org'
   const link = releaseLink.replace('/releases', '')
   const { versions } = window.pre
   const deps = {
@@ -215,9 +215,9 @@ export default auto(function InfoModal (props) {
             </Link>
           </p>
           <p className='mg1b'>
-            <WarningOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
-            <Link to={privacyNoticeLink} className='mg1l'>
-              {privacyNoticeLink}
+            <CloudOutlined /> <b className='mg1r'>electerm Online ➾</b>
+            <Link to={electermOnline} className='mg1l'>
+              {electermOnline}
             </Link>
           </p>
           <p className='mg1b'>

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

@@ -63,14 +63,14 @@ export default class TermSearch extends PureComponent {
     }
   }
 
-  prev = () => {
+  prev = (searchTerm) => {
     const {
       activeTabId,
       termSearchOptions
     } = this.props
     refs.get('term-' + activeTabId)
       ?.searchPrev(
-        this.props.termSearch,
+        searchTerm ?? this.props.termSearch,
         copy(termSearchOptions)
       )
   }

package/client/components/terminal/terminal-color-query.mjs

@@ -0,0 +1,133 @@
+const ESC = '\x1b'
+const ST = '\x1b\\'
+
+function toHexByte (value) {
+  return value.toString(16).padStart(2, '0')
+}
+
+function clampByte (value) {
+  return Math.max(0, Math.min(255, Math.round(value)))
+}
+
+function parseChannel (value) {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return null
+  }
+  if (trimmed.endsWith('%')) {
+    const percent = Number(trimmed.slice(0, -1))
+    return Number.isFinite(percent)
+      ? clampByte(percent * 255 / 100)
+      : null
+  }
+  const num = Number(trimmed)
+  return Number.isFinite(num)
+    ? clampByte(num)
+    : null
+}
+
+function parseAlpha (value) {
+  if (!value) {
+    return 1
+  }
+  const trimmed = value.trim()
+  if (trimmed.endsWith('%')) {
+    const percent = Number(trimmed.slice(0, -1))
+    return Number.isFinite(percent) ? percent / 100 : null
+  }
+  const num = Number(trimmed)
+  return Number.isFinite(num) ? num : null
+}
+
+function parseHexColor (color) {
+  const match = color.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i)
+  if (!match) {
+    return null
+  }
+  const raw = match[1]
+  const expanded = raw.length <= 4
+    ? raw.split('').map(char => char + char).join('')
+    : raw
+  const alpha = expanded.length === 8
+    ? parseInt(expanded.slice(6, 8), 16) / 255
+    : 1
+  if (alpha <= 0) {
+    return null
+  }
+  return [
+    parseInt(expanded.slice(0, 2), 16),
+    parseInt(expanded.slice(2, 4), 16),
+    parseInt(expanded.slice(4, 6), 16)
+  ]
+}
+
+function parseRgbColor (color) {
+  const match = color.match(/^rgba?\((.*)\)$/i)
+  if (!match) {
+    return null
+  }
+  const body = match[1].trim()
+  const [channelsPart, slashAlpha] = body.split('/').map(part => part.trim())
+  const parts = channelsPart.includes(',')
+    ? channelsPart.split(',').map(part => part.trim())
+    : channelsPart.split(/\s+/).filter(Boolean)
+  if (parts.length < 3) {
+    return null
+  }
+  const channels = parts.slice(0, 3).map(parseChannel)
+  if (channels.some(channel => channel === null)) {
+    return null
+  }
+  const alpha = parseAlpha(slashAlpha || parts[3])
+  if (alpha === null || alpha <= 0) {
+    return null
+  }
+  return channels
+}
+
+export function parseColorToRgb (color) {
+  if (typeof color !== 'string') {
+    return null
+  }
+  const trimmed = color.trim()
+  if (!trimmed || trimmed.toLowerCase() === 'transparent') {
+    return null
+  }
+  return parseHexColor(trimmed) || parseRgbColor(trimmed)
+}
+
+export function colorToOscRgb (color) {
+  const rgb = parseColorToRgb(color)
+  if (!rgb) {
+    return ''
+  }
+  return `rgb:${rgb.map(toHexByte).join('/')}`
+}
+
+export function buildOscColorResponse (identifier, color, fallbackColor) {
+  const oscColor = colorToOscRgb(color) || colorToOscRgb(fallbackColor)
+  return oscColor
+    ? `${ESC}]${identifier};${oscColor}${ST}`
+    : ''
+}
+
+export function handleTerminalColorQuery (terminal, identifier, color, fallbackColor, data) {
+  if (typeof data !== 'string' || data.trim() !== '?') {
+    return false
+  }
+  const response = buildOscColorResponse(identifier, color, fallbackColor)
+  if (!response || typeof terminal?.input !== 'function') {
+    return false
+  }
+  terminal.input(response, false)
+  return true
+}
+
+export function createRendererThemeConfig (themeConfig = {}, rendererType, visibleBackground) {
+  return {
+    ...themeConfig,
+    background: rendererType === 'webGL' && colorToOscRgb(visibleBackground)
+      ? visibleBackground
+      : 'rgba(0,0,0,0)'
+  }
+}

package/client/components/terminal/terminal.jsx

@@ -57,13 +57,16 @@ import {
   loadTerminal,
   loadFitAddon,
   loadWebLinksAddon,
-  loadCanvasAddon,
   loadWebglAddon,
   loadSearchAddon,
   loadLigaturesAddon,
   loadUnicode11Addon,
   loadImageAddon
 } from './xterm-loader.js'
+import {
+  createRendererThemeConfig,
+  handleTerminalColorQuery
+} from './terminal-color-query.mjs'
 
 const e = window.translate
 
@@ -141,10 +144,8 @@ class Term extends Component {
       prevProps.themeConfig
     )
     if (themeChanged && this.term) {
-      this.term.options.theme = {
-        ...deepCopy(this.props.themeConfig),
-        background: 'rgba(0,0,0,0)'
-      }
+      this.term.options.theme = this.getRendererThemeConfig(this.props.themeConfig)
+      this.registerTerminalColorQueryHandlers(this.term, this.props.themeConfig)
     }
   }
 
@@ -156,6 +157,7 @@ class Term extends Component {
     if (this.term) {
       this.term.parent = null
     }
+    this.disposeTerminalColorQueryHandlers()
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
       this.timers[k] = null
@@ -451,13 +453,19 @@ class Term extends Component {
         return
       }
 
+      const hasMultiFiles = filePaths.length > 1
+
       if (isSshTerminal) {
         const behavior = this.props.config.dragDropBehavior || 'ask'
-        if (behavior === 'ask') {
+        // multi-file drops always paste paths, skip the action modal
+        if (behavior === 'ask' && !hasMultiFiles) {
           this.setState({
             dropFileModalVisible: true,
             droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
           })
+        } else if (hasMultiFiles) {
+          const filesAll = filePaths.map(path => `"${path}"`).join(' ')
+          this.attachAddon._sendData(filesAll)
         } else {
           this.handleDropFileAction(behavior, filePaths.map(path => ({ path, isRemote: false })))
         }
@@ -465,10 +473,16 @@ class Term extends Component {
       }
 
       if (isSerialTerminal) {
-        this.setState({
-          dropFileModalVisible: true,
-          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
-        })
+        // multi-file drops always paste paths, skip the action modal
+        if (hasMultiFiles) {
+          const filesAll = filePaths.map(path => `"${path}"`).join(' ')
+          this.attachAddon._sendData(filesAll)
+        } else {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+          })
+        }
         return
       }
 
@@ -606,7 +620,7 @@ class Term extends Component {
     this.term.clear()
     this.term.focus()
     if (shouldClear) {
-      this.searchAddon._linesCache = undefined
+      this.searchAddon._lineCache.clear()
       this.timers.clearSearchTimer = setTimeout(() => {
         refsStatic.get('term-search')?.next()
       }, 100)
@@ -658,8 +672,8 @@ class Term extends Component {
   }
 
   updateSearchResults = (resultIndex) => {
-    const matches = this.searchAddon._highlightDecorations.map((highlight, i) => {
-      return highlight.match.row
+    const matches = this.searchAddon._resultTracker.searchResults.map((result, i) => {
+      return result.row
     })
 
     this.setState({
@@ -1066,26 +1080,70 @@ class Term extends Component {
   }
 
   loadRenderer = async (term, config) => {
-    if (config.rendererType === rendererTypes.canvas) {
-      const CanvasAddon = await loadCanvasAddon()
-      term.loadAddon(new CanvasAddon())
-    } else if (config.rendererType === rendererTypes.webGL) {
+    // xterm 6.x: only the built-in DOM renderer and the WebGL addon exist
+    // (the canvas renderer addon was removed in 6.x). 'dom' = no addon loaded
+    // (built-in DOM renderer). Legacy 'canvas' settings fall back to DOM.
+    if (config.rendererType === rendererTypes.webGL) {
       try {
         const WebglAddon = await loadWebglAddon()
         term.loadAddon(new WebglAddon())
       } catch (e) {
-        console.error('render with webgl failed, fallback to canvas')
+        console.error('render with webgl failed, fallback to dom renderer')
         console.error(e)
-        const CanvasAddon = await loadCanvasAddon()
-        term.loadAddon(new CanvasAddon())
+        // built-in DOM renderer is used (no addon loaded)
       }
     }
   }
 
+  terminalColorQueryDisposables = []
+
+  disposeTerminalColorQueryHandlers = () => {
+    this.terminalColorQueryDisposables.forEach(disposable => disposable?.dispose?.())
+    this.terminalColorQueryDisposables.length = 0
+  }
+
+  getVisibleTerminalBackground = () => {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    const dom = this.domRef.current
+    const cssMain = dom && window.getComputedStyle
+      ? window.getComputedStyle(dom).getPropertyValue('--main').trim()
+      : ''
+    return uiThemeConfig.main || cssMain || this.props.themeConfig.background
+  }
+
+  getVisibleTerminalForeground = () => {
+    const uiThemeConfig = window.store?.getUiThemeConfig?.() || {}
+    return uiThemeConfig.text
+  }
+
+  registerTerminalColorQueryHandlers = (term, themeConfig = {}) => {
+    this.disposeTerminalColorQueryHandlers()
+    if (!term?.parser?.registerOscHandler) {
+      return
+    }
+    const background = this.getVisibleTerminalBackground()
+    const foregroundFallback = this.getVisibleTerminalForeground()
+    this.terminalColorQueryDisposables.push(
+      term.parser.registerOscHandler(10, data => {
+        return handleTerminalColorQuery(term, 10, themeConfig.foreground, foregroundFallback, data)
+      }),
+      term.parser.registerOscHandler(11, data => {
+        return handleTerminalColorQuery(term, 11, background, themeConfig.background, data)
+      })
+    )
+  }
+
+  getRendererThemeConfig = (themeConfig = this.props.themeConfig) => {
+    return createRendererThemeConfig(
+      deepCopy(themeConfig),
+      this.props.config.rendererType,
+      this.getVisibleTerminalBackground()
+    )
+  }
+
   initTerminal = async () => {
     const { themeConfig, tab = {}, config = {} } = this.props
-    const tc = deepCopy(themeConfig)
-    tc.background = 'rgba(0,0,0,0)'
+    const tc = this.getRendererThemeConfig(themeConfig)
     const Terminal = await loadTerminal()
     const term = new Terminal({
       allowProposedApi: true,
@@ -1104,6 +1162,7 @@ class Term extends Component {
     term.parent = this
     term.onSelectionChange(this.onSelection)
     term.open(this.domRef.current, true)
+    this.registerTerminalColorQueryHandlers(term, themeConfig)
     await this.loadRenderer(term, config)
 
     const FitAddon = await loadFitAddon()
@@ -1324,7 +1383,7 @@ class Term extends Component {
   }
 
   openNormalBuffer = () => {
-    const normal = this.term.buffer._normal
+    const normal = this.term.buffer.normal
     const len = normal.length
     const lines = new Array(len).fill('').map((x, i) => {
       return normal.getLine(i).translateToString(false)
@@ -1486,13 +1545,12 @@ class Term extends Component {
     socket.onopen = async () => {
       await this.initAttachAddon()
       this.runInitScript()
-      term._initialized = true
     }
     // term.onRrefresh(this.onRefresh)
     term.onResize(this.onResizeTerminal)
-    if (pick(term, 'buffer._onBufferChange._listeners')) {
-      term.buffer._onBufferChange._listeners.push(this.onBufferChange)
-    }
+    // xterm 6.x exposes buffer change as a public event (IBufferNamespace.onBufferChange).
+    // Previously this reached into the private _onBufferChange._listeners array.
+    term.buffer.onBufferChange(this.onBufferChange)
     const WebLinksAddon = await loadWebLinksAddon()
     term.loadAddon(new WebLinksAddon(this.webLinkHandler))
     term.focus()

package/client/components/terminal/terminal.styl

@@ -32,6 +32,10 @@
   margin-left 5px
 
 #container
+  .xterm
+    background transparent
+  .xterm-viewport
+    background-color transparent !important
   .xterm-screen::before
     content ''
     position absolute

package/client/components/terminal/xterm-loader.js

@@ -37,13 +37,6 @@ export async function loadWebLinksAddon () {
   return window.xtermAddons.WebLinksAddon
 }
 
-export async function loadCanvasAddon () {
-  if (window.xtermAddons.CanvasAddon) return window.xtermAddons.CanvasAddon
-  const mod = await import('@xterm/addon-canvas')
-  window.xtermAddons.CanvasAddon = mod.CanvasAddon
-  return window.xtermAddons.CanvasAddon
-}
-
 export async function loadWebglAddon () {
   if (window.xtermAddons.WebglAddon) return window.xtermAddons.WebglAddon
   const mod = await import('@xterm/addon-webgl')
@@ -95,10 +88,6 @@ export function getWebLinksAddon () {
   return window.xtermAddons.WebLinksAddon
 }
 
-export function getCanvasAddon () {
-  return window.xtermAddons.CanvasAddon
-}
-
 export function getWebglAddon () {
   return window.xtermAddons.WebglAddon
 }

package/client/components/tree-list/tree-list-rows.js

@@ -4,12 +4,38 @@ function isTopLevelGroup (group) {
   return !group?.level || group.level < 2
 }
 
+function bookmarkCompare (a, b, bookmarksMap, sortTitle, sortHost) {
+  const itemA = bookmarksMap.get(a)
+  const itemB = bookmarksMap.get(b)
+  if (!itemA || !itemB) {
+    return 0
+  }
+
+  if (sortTitle) {
+    const cmp = (itemA.title || '').localeCompare(itemB.title || '')
+    if (cmp !== 0) {
+      return sortTitle === 'asc' ? cmp : -cmp
+    }
+  }
+
+  if (sortHost) {
+    const cmp = (itemA.host || '').localeCompare(itemB.host || '')
+    if (cmp !== 0) {
+      return sortHost === 'asc' ? cmp : -cmp
+    }
+  }
+
+  return 0
+}
+
 export function buildVisibleTreeRows ({
   bookmarkGroups,
   bookmarkGroupTree,
   bookmarksMap,
   expandedKeys,
-  keyword
+  keyword,
+  sortTitle,
+  sortHost
 }) {
   const groupTree = bookmarkGroupTree || {}
   const rows = []
@@ -77,7 +103,12 @@ export function buildVisibleTreeRows ({
       visitGroup(groupTree[groupId], nextParentId, depth + 1)
     }
 
-    for (const bookmarkId of group.bookmarkIds || []) {
+    const bookmarkIds = group.bookmarkIds || []
+    const sortedIds = (sortTitle || sortHost)
+      ? [...bookmarkIds].sort((a, b) => bookmarkCompare(a, b, bookmarksMap, sortTitle, sortHost))
+      : bookmarkIds
+
+    for (const bookmarkId of sortedIds) {
       const item = bookmarksMap.get(bookmarkId)
       if (!item || (lowerKeyword && !bookmarkMatches(bookmarkId))) {
         continue

package/client/components/tree-list/tree-list.jsx

@@ -44,7 +44,8 @@ export default class ItemListTree extends Component {
       categoryTitle: '',
       categoryColor: '',
       categoryId: '',
-      searchSelectedRowKey: ''
+      searchSelectedRowKey: '',
+      sort: null
     }
     this.listRef = React.createRef()
   }
@@ -109,6 +110,10 @@ export default class ItemListTree extends Component {
     })
   }
 
+  handleSortChange = sort => {
+    this.setState({ sort })
+  }
+
   handleKeyDown = (e) => {
     const { keyword } = this.state
     if (!keyword) return
@@ -176,12 +181,15 @@ export default class ItemListTree extends Component {
   }
 
   getVisibleTreeData = () => {
+    const sort = this.state.sort
     return buildVisibleTreeRows({
       bookmarkGroups: this.props.bookmarkGroups,
       bookmarkGroupTree: this.props.bookmarkGroupTree,
       bookmarksMap: this.props.bookmarksMap,
       expandedKeys: this.props.expandedKeys,
-      keyword: this.state.keyword
+      keyword: this.state.keyword,
+      sortTitle: sort?.field === 'title' ? sort.dir : null,
+      sortHost: sort?.field === 'host' ? sort.dir : null
     })
   }
 
@@ -414,6 +422,8 @@ export default class ItemListTree extends Component {
           keyword={this.state.keyword}
           autoFocus={this.props.autoFocus}
           onKeyDown={this.handleKeyDown}
+          sort={this.state.sort}
+          onSortChange={this.handleSortChange}
         />
       </div>
     )

package/client/components/tree-list/tree-list.styl

@@ -101,6 +101,42 @@
   min-height 0
   position relative
 
+.tree-sort-wrap
+  position relative
+.tree-sort-dropdown
+  display none
+  position absolute
+  right 0
+  top 100%
+  margin-top 4px
+  background var(--main-dark)
+  border 1px solid var(--main)
+  border-radius 4px
+  padding 4px
+  z-index 100
+  box-shadow 0 2px 8px rgba(0,0,0,.1)
+&.open
+  .tree-sort-dropdown
+    display block
+
+.tree-sort-trigger
+  cursor pointer
+  &:hover
+    color var(--primary)
+  &.active
+    color var(--primary)
+
+.tree-sort-popover-item
+  padding 4px 8px
+  border-radius 3px
+  cursor pointer
+  white-space nowrap
+  font-size 12px
+  &:hover
+    background var(--hover-bg, rgba(0,0,0,.04))
+  &.active
+    color var(--primary)
+
 .tree-list-virtual-spacer
   position relative
   width 100%

package/client/components/tree-list/tree-search.jsx

@@ -1,10 +1,33 @@
-import React, { useState, memo } from 'react'
+import React, { useState, memo, useCallback, useEffect, useRef } from 'react'
 import { debounce } from 'lodash-es'
+import { Space, Button } from 'antd'
+import { SortAscendingOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
 import Search from '../common/search'
 import runIdle from '../../common/run-idle'
 
-export default memo(function TreeSearchComponent ({ onSearch, keyword, autoFocus, onKeyDown }) {
+function cycleSort (currentField, currentDir, clickedField) {
+  if (currentField === clickedField) {
+    if (currentDir === 'asc') {
+      return { field: clickedField, dir: 'desc' }
+    }
+    if (currentDir === 'desc') {
+      return null
+    }
+  }
+  return { field: clickedField, dir: 'asc' }
+}
+
+export default memo(function TreeSearchComponent ({
+  onSearch,
+  keyword,
+  autoFocus,
+  onKeyDown,
+  sort,
+  onSortChange
+}) {
   const [searchTerm, setSearchTerm] = useState(keyword)
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef(null)
 
   const performSearch = debounce((term) => {
     runIdle(() => {
@@ -24,13 +47,68 @@ export default memo(function TreeSearchComponent ({ onSearch, keyword, autoFocus
     }
   }
 
+  const handleSortClick = useCallback((field) => {
+    const next = cycleSort(sort?.field, sort?.dir, field)
+    onSortChange(next)
+  }, [sort, onSortChange])
+
+  const handleTriggerClick = () => {
+    setOpen(v => !v)
+  }
+
+  const handleItemClick = (field) => {
+    handleSortClick(field)
+  }
+
+  const isSortActive = !!sort?.field
+
+  useEffect(() => {
+    if (!open) return
+    const onMouseDown = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => document.removeEventListener('mousedown', onMouseDown)
+  }, [open])
+
   return (
-    <Search
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-      value={searchTerm}
-      allowClear
-      autoFocus={autoFocus}
-    />
+    <div className={`tree-sort-wrap iblock${open ? ' open' : ''}`} ref={wrapRef}>
+      <Space.Compact className='width-100'>
+        <Search
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          value={searchTerm}
+          allowClear
+          autoFocus={autoFocus}
+        />
+        <Button
+          className={`tree-sort-trigger pointer${isSortActive ? ' active' : ''}`}
+          onClick={handleTriggerClick}
+          icon={<SortAscendingOutlined />}
+        />
+      </Space.Compact>
+      <div className='tree-sort-dropdown'>
+        {['title', 'host'].map(field => {
+          const isActive = sort?.field === field
+          const isAsc = isActive && sort?.dir === 'asc'
+          const isDesc = isActive && sort?.dir === 'desc'
+          const cap = window.translate(field)
+          return (
+            <div
+              key={field}
+              className={`tree-sort-popover-item${isActive ? ' active' : ''}`}
+              onClick={() => handleItemClick(field)}
+            >
+              {isDesc
+                ? <CaretDownOutlined />
+                : <CaretUpOutlined className={isAsc ? '' : 'hidden'} />}
+              {cap}
+            </div>
+          )
+        })}
+      </div>
+    </div>
   )
 })

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

@@ -367,7 +367,8 @@ export default class VncSession extends PureComponent {
       'desktopname',
       'capabilities',
       'screens',
-      'desktopsize'
+      'desktopsize',
+      'serververification'
     ]
     for (const event of events) {
       rfb.addEventListener(event, this[`on${window.capitalizeFirstLetter(event)}`])
@@ -400,6 +401,14 @@ export default class VncSession extends PureComponent {
     message.error('Security Failure: ' + event.detail?.reason)
   }
 
+  onSerververification = (event) => {
+    // RA2ne (RealVNC) authentication requires the client to approve
+    // the server's public key before the handshake can proceed.
+    // Auto-approve since the user explicitly initiated the connection.
+    console.debug('[VNC-CLIENT] Server verification event, approving server:', event.detail?.type)
+    this.rfb?.approveServer()
+  }
+
   onOk = (res) => {
     this.setState({
       showConfirm: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.15.90",
+  "version": "3.15.100",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",