@electerm/electerm-react 3.15.90 → 3.15.105

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/common/notification.jsx

@@ -9,7 +9,36 @@ import './notification.styl'
 const notifications = []
 const NOTIFICATION_EVENT = 'notification-update'
 
+function getTextFromReactChildren (children) {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+  if (React.isValidElement(children)) {
+    return getTextFromReactChildren(children.props.children)
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextFromReactChildren).join('\n')
+  }
+  return ''
+}
+
 function addNotification (notif) {
+  notif.descriptions = notif.description ? [notif.description] : []
+  if (notif.type === 'error') {
+    const messageText = getTextFromReactChildren(notif.message)
+    const existingIndex = notifications.findIndex(n =>
+      n.type === 'error' &&
+      getTextFromReactChildren(n.message) === messageText
+    )
+    if (existingIndex > -1) {
+      const existing = notifications[existingIndex]
+      existing.count = (existing.count || 1) + 1
+      existing.descriptions.push(notif.description)
+      window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+      return
+    }
+    notif.count = 1
+  }
   notifications.push(notif)
   window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
 }
@@ -60,9 +89,10 @@ export function NotificationContainer () {
         <NotificationItem
           key={notif.key}
           message={notif.message || notif.type}
-          description={notif.description}
+          descriptions={notif.descriptions}
           type={notif.type}
           duration={notif.duration}
+          count={notif.count || 1}
           onClose={() => removeNotification(notif.key)}
         />
       ))}
@@ -70,20 +100,7 @@ export function NotificationContainer () {
   )
 }
 
-function getTextFromReactChildren (children) {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return String(children)
-  }
-  if (React.isValidElement(children)) {
-    return getTextFromReactChildren(children.props.children)
-  }
-  if (Array.isArray(children)) {
-    return children.map(getTextFromReactChildren).join('\n')
-  }
-  return ''
-}
-
-function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
+function NotificationItem ({ message, descriptions = [], type, onClose, duration = 18.5, count = 1 }) {
   const timeoutRef = useRef(null)
 
   useEffect(() => {
@@ -96,7 +113,7 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
         timeoutRef.current = null
       }
     }
-  }, [])
+  }, [count])
 
   const handleMouseEnter = () => {
     if (timeoutRef.current) {
@@ -118,6 +135,9 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
   }
 
   const className = classnames('notification', type)
+  const titleText = getTextFromReactChildren(message)
+  const title = count > 1 ? `(${count}) ${titleText}` : message
+  const validDescriptions = descriptions.filter(Boolean)
 
   return (
     <div
@@ -128,18 +148,20 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
       <div className='notification-content'>
         <div className='notification-message'>
           <div className='notification-icon'>{messageIcons[type]}</div>
-          <div className='notification-title' title={message}>{message}</div>
+          <div className='notification-title' title={titleText}>{title}</div>
           <CopyOutlined
             className='notification-copy-icon'
             onClick={(e) => handleCopy(message, e)}
           />
         </div>
-        {description && (
+        {validDescriptions.length > 0 && (
           <div className='notification-description'>
-            {description}
+            {validDescriptions.map((desc, i) => (
+              <div key={i}>{desc}</div>
+            ))}
             <CopyOutlined
               className='notification-copy-icon'
-              onClick={(e) => handleCopy(description, e)}
+              onClick={(e) => handleCopy(validDescriptions, e)}
             />
           </div>
         )}

package/client/components/common/placeholder.jsx

@@ -0,0 +1,5 @@
+export default function Placeholder () {
+  return (
+    <div id='placeholder' className='placeholder-wrap' />
+  )
+}

package/client/components/common/zoom-control.jsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import InputNumberConfirm from './input-number-confirm'
 import {
-  Space
+  Space,
+  Tooltip
 } from 'antd'
 import {
   MinusCircleOutlined,
-  PlusCircleOutlined
+  PlusCircleOutlined,
+  AimOutlined
 } from '@ant-design/icons'
 
+const e = window.translate
+
 export default function ZoomControl (props) {
   const {
     value,
@@ -33,6 +37,23 @@ export default function ZoomControl (props) {
     onChange(next)
   }
 
+  const handleReset = () => {
+    onChange(1)
+  }
+
+  const isDefault = Math.round(value * 100) === 100
+
+  const resetIcon = isDefault
+    ? null
+    : (
+      <Tooltip title={e('resetzoom')}>
+        <AimOutlined
+          onClick={handleReset}
+          className='pointer font16 mg1r'
+        />
+      </Tooltip>
+      )
+
   return (
     <InputNumberConfirm
       value={Math.round(value * 100)}
@@ -43,6 +64,7 @@ export default function ZoomControl (props) {
       suffix='%'
       addonBefore={
         <Space.Compact>
+          {resetIcon}
           <PlusCircleOutlined
             onClick={handleAdd}
             className='mg1r pointer font16'

package/client/components/footer/footer.styl

@@ -31,6 +31,13 @@
 .terminal-footer-info
   margin-right 10px
   line-height 39px
+.terminal-footer-history
+  display flex
+  align-items center
+.terminal-footer-qm
+  // Q is now an icon-only button (5px internal padding); reduce left
+  // margin so the history icon stays roughly equidistant from AI and Q
+  margin-left 3px
 .batch-input-outer
   .bi-full
     display none

package/client/components/main/main.jsx

@@ -169,6 +169,7 @@ export default auto(function Index (props) {
       'sidebarPanelTab',
       'openWidgetsModal'
     ]),
+    zoom: config.zoom,
     fileTransfers: copiedTransfer,
     transferHistory: copiedHistory,
     upgradeInfo,

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

@@ -2,6 +2,8 @@
  * two column layout, left column fixed with, right column auto width
  */
 
+import Placeholder from '../common/placeholder'
+
 export default function SettingCol (props) {
   return (
     <div className='setting-col'>
@@ -11,7 +13,12 @@ export default function SettingCol (props) {
       <div
         className='setting-row setting-row-right'
       >
-        {props.children[1]}
+        <div className='setting-col-content'>
+          {props.children[1]}
+        </div>
+        <div className='setting-col-placeholder'>
+          <Placeholder />
+        </div>
       </div>
     </div>
   )

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/setting-panel/setting-wrap.styl

@@ -38,6 +38,20 @@
   bottom 0
   top 129px
   padding 20px
+  display flex
+  flex-direction column
+  overflow hidden
+  min-height 400px
+.setting-col-content
+  flex 1
+  overflow-y auto
+  min-height 0
+.setting-col-placeholder
+  flex-shrink 0
+  display flex
+  justify-content flex-end
+  .carbonads-wrap
+    margin 8px 0 0
 .setting-tabs-bookmarks
   .setting-row-left
     width 440px
@@ -75,6 +89,10 @@
     bottom auto
     top auto
     padding 10px
+    position static
+    overflow visible
+  .setting-col-content
+    overflow visible
   .setting-tabs-bookmarks
     .setting-row-left
       width auto

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/index.jsx

@@ -7,7 +7,8 @@ import {
   SettingOutlined,
   UpCircleOutlined,
   AppstoreOutlined,
-  ThunderboltOutlined
+  ThunderboltOutlined,
+  AimOutlined
 } from '@ant-design/icons'
 import { Tooltip, Popover } from 'antd'
 import SideBarPanel from './sidebar-panel'
@@ -42,7 +43,8 @@ export default function Sidebar (props) {
     showModal,
     showInfoModal,
     sidebarPanelTab,
-    openWidgetsModal
+    openWidgetsModal,
+    zoom
   } = props
 
   const { store } = window
@@ -85,6 +87,10 @@ export default function Sidebar (props) {
     window.store.upgradeInfo.showUpgradeModal = true
   }
 
+  const handleZoomReset = () => {
+    store.onZoomReset()
+  }
+
   const {
     onNewSsh,
     openSetting,
@@ -203,6 +209,20 @@ export default function Sidebar (props) {
             onClick={openAbout}
           />
         </SideIcon>
+        {
+          Math.round((zoom ?? 1) * 100) !== 100
+            ? (
+              <SideIcon
+                title={e('resetzoom')}
+              >
+                <AimOutlined
+                  className='iblock font16 control-icon zoom-reset-icon'
+                  onClick={handleZoomReset}
+                />
+              </SideIcon>
+              )
+            : null
+        }
         {
           !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
             ? (

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

@@ -4,16 +4,17 @@ 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'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
+import Placeholder from '../common/placeholder'
 import RunningTime from './app-running-time'
 import { auto } from 'manate/react'
 import { useState } from 'react'
@@ -136,10 +137,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 +216,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'>
@@ -230,6 +231,7 @@ export default auto(function InfoModal (props) {
             <InfoCircleOutlined /> <b className='mg1r'>{window.store.installSrc}</b>
           </p>
           {renderCheckUpdate()}
+          <Placeholder />
         </>
       )
     },

package/client/components/sidebar/sidebar.styl

@@ -118,6 +118,10 @@
     color var(--text-dark)
     &:hover
       color var(--text-light)
+  .zoom-reset-icon
+    color var(--primary)
+    &:hover
+      color var(--text-light)
 
 .btns .upgrade-icon
   color var(--success)

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

@@ -4,7 +4,8 @@ import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
 import {
   Spin,
-  Dropdown
+  Dropdown,
+  Button
 } from 'antd'
 import message from '../common/message'
 import { notification } from '../common/notification'
@@ -40,6 +41,9 @@ import { getFolderFromFilePath } from '../sftp/file-read.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import { Osc52Addon } from './osc52-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
+import {
+  AimOutlined
+} from '@ant-design/icons'
 import {
   getShellIntegrationCommand,
   detectRemoteShell,
@@ -57,13 +61,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
 
@@ -87,7 +94,8 @@ class Term extends Component {
       reconnectCountdown: null,
       terminalError: null,
       dropFileModalVisible: false,
-      droppedFiles: []
+      droppedFiles: [],
+      fontSizeChanged: false
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -141,10 +149,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 +162,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
@@ -228,6 +235,10 @@ class Term extends Component {
         if (['fontFamily', 'fontSize'].includes(name)) {
           this.onResize()
         }
+        if (name === 'fontSize') {
+          this.originalFontSize = curr
+          this.setState({ fontSizeChanged: false })
+        }
       }
     }
 
@@ -289,6 +300,23 @@ class Term extends Component {
     }
     term.options.fontSize = term.options.fontSize + v
     window.store.triggerResize()
+    if (this.originalFontSize == null) {
+      this.originalFontSize = term.options.fontSize - v
+    }
+    this.setState({
+      fontSizeChanged: term.options.fontSize !== this.originalFontSize
+    })
+  }
+
+  handleResetFontSize = () => {
+    const { term } = this
+    if (!term || this.originalFontSize == null) {
+      return
+    }
+    term.options.fontSize = this.originalFontSize
+    window.store.triggerResize()
+    this.setState({ fontSizeChanged: false })
+    term.focus()
   }
 
   isActiveTerminal = () => {
@@ -451,13 +479,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 +499,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 +646,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 +698,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 +1106,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 +1188,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 +1409,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 +1571,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()
@@ -1662,6 +1746,23 @@ class Term extends Component {
     Object.assign(window.store.terminalInfoProps, infoProps)
   }
 
+  renderResetFontSizeButton = () => {
+    if (!this.state.fontSizeChanged) {
+      return null
+    }
+    const txt = `${e('reset')} ${e('fontSize')}`
+    return (
+      <Button
+        className='terminal-fontsize-reset'
+        onClick={this.handleResetFontSize}
+        type='default'
+        size='small'
+        title={txt}
+        icon={<AimOutlined />}
+      />
+    )
+  }
+
   // getPwd = async () => {
   //   const { sessionId, config } = this.props
   //   const { pid } = this.state
@@ -1760,6 +1861,7 @@ class Term extends Component {
           <ReconnectOverlay
             countdown={this.state.reconnectCountdown}
           />
+          {this.renderResetFontSizeButton()}
           <DropFileModal
             visible={this.state.dropFileModalVisible}
             files={this.state.droppedFiles}

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
@@ -167,3 +171,8 @@
   z-index 100
   background var(--main)
   max-width calc(100% - 24px)
+
+.terminal-fontsize-reset
+  position absolute
+  left 8px
+  bottom 4px

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.105",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",