@electerm/electerm-react 3.8.15 → 3.9.5

package/client/common/pre.js

@@ -9,7 +9,6 @@ const {
 
 const props = runSync('getConstants')
 
-props.env = JSON.parse(props.env)
 props.versions = JSON.parse(props.versions)
 
 window.pre = {

package/client/components/bookmark-form/bookmark-from-history-modal.jsx

@@ -49,7 +49,6 @@ export default class BookmarkFromHistoryModal extends React.PureComponent {
       ...tab,
       id: generate()
     }
-    console.log(r)
     delete r.parentId
     delete r.category
     return r

package/client/components/bookmark-form/config/rdp.js

@@ -2,7 +2,7 @@ import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalRdpType } from '../../../common/constants.js'
 import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
-import { commonFields } from './common-fields.js'
+import { commonFields, connectionHoppingTab } from './common-fields.js'
 
 const e = window.translate
 
@@ -12,6 +12,7 @@ const rdpConfig = {
   initValues: (props) => {
     return createBaseInitValues(props, terminalRdpType, {
       port: 3389,
+      connectionHoppings: [],
       ...getAuthTypeDefault(props)
     })
   },
@@ -38,7 +39,8 @@ const rdpConfig = {
         commonFields.proxy,
         commonFields.type
       ]
-    }
+    },
+    connectionHoppingTab()
   ]
 }
 

package/client/components/icons/heartbeat.jsx

@@ -0,0 +1,23 @@
+import Icon from '@ant-design/icons'
+
+const HeartbeatSvg = () => (
+  <svg
+    viewBox='0 0 1024 1024'
+    fill='currentColor'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+  >
+    <path d='M923 283.6a260.1 260.1 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.3 265.3 0 00679.7 128c-38.1 0-75.4 7.5-109.8 22.3a274.5 274.5 0 00-87.7 60.8l-12.1 12.5-12.1-12.5a260.5 260.5 0 00-87.7-60.8c-34.4-14.8-71.7-22.3-109.8-22.3-38.2 0-75.5 7.5-109.9 22.3-33.4 14.3-63.3 34.9-88.9 61-25.6 26.1-45.7 56.4-59.9 90.5A278.3 278.3 0 000 416.5c0 39.6 7.7 77.2 22.9 111.6 12.8 29.6 31.5 57 55.5 81.5l356.2 358.5c12.2 12.3 29.7 19.4 47.8 19.4 18.1 0 35.6-7.1 47.7-19.4L886 609.6c24-24.5 42.7-51.9 55.5-81.5C956.3 493.7 964 456.1 964 416.5c0-37.9-7.4-74.7-22-109zM880 497.9c-10.4 24.1-26 46-46.5 65.2L480 920.7 193.5 563.1C173 543.9 157.4 522 147 497.9c-12.1-27.9-18.2-57.8-18.2-88.6 0-30 5.8-59 17.3-86.3 11.1-26.5 27.2-50.3 47.8-70.8 20.6-20.4 44.6-36.5 71.4-47.8 27.7-11.7 57.2-17.7 87.8-17.7 32.3 0 63.7 6.5 93.2 19.3 29 12.5 55 30.9 77.2 54.4l73.9 76.5 73.9-76.5c22.2-23.5 48.2-41.9 77.2-54.4 29.5-12.8 60.9-19.3 93.2-19.3 30.6 0 60.1 6 87.8 17.7 26.8 11.3 50.8 27.4 71.4 47.8 20.6 20.5 36.7 44.3 47.8 70.8 11.5 27.3 17.3 56.3 17.3 86.3 0 30.8-6.1 60.7-18.2 88.6z' />
+    <polyline
+      points='160,512 310,512 370,310 450,714 530,512 594,512 654,360 714,664 774,512 864,512'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='60'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export const HeartbeatIcon = props => (<Icon component={HeartbeatSvg} {...props} />)

package/client/components/main/main.jsx

@@ -36,6 +36,7 @@ import WorkspaceSaveModal from '../tabs/workspace-save-modal'
 import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-modal'
 import AutoSync from '../setting-sync/auto-sync'
 import BatchOpRunner from '../batch-op/batch-op-runner'
+import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -51,7 +52,7 @@ export default auto(function Index (props) {
     ipcOnEvent('open-about', store.openAbout)
     ipcOnEvent('new-ssh', store.onNewSsh)
     ipcOnEvent('add-tab-from-command-line', store.addTabFromCommandLine)
-    ipcOnEvent('open-tab', (e, parsed) => store.addTab(parsed))
+    ipcOnEvent('open-tab', (e, parsed) => store.ipcOpenTab(parsed))
     ipcOnEvent('openSettings', store.openSetting)
     ipcOnEvent('selectall', store.selectall)
     ipcOnEvent('focused', store.focus)
@@ -297,6 +298,7 @@ export default auto(function Index (props) {
         <NotificationContainer />
         <BatchOpRunner />
         <AIConfigModal store={store} />
+        <UnixTimestampTooltip />
       </div>
     </ConfigProvider>
   )

package/client/components/session/session.jsx

@@ -14,8 +14,7 @@ import {
   FullscreenOutlined,
   PaperClipOutlined,
   CloseOutlined,
-  ApartmentOutlined,
-  HeartOutlined
+  ApartmentOutlined
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -37,6 +36,7 @@ import {
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
 import safeName from '../../common/safe-name'
+import { HeartbeatIcon } from '../icons/heartbeat'
 import './session.styl'
 
 const e = window.translate
@@ -550,7 +550,7 @@ export default class SessionWrapper extends Component {
     }
     return (
       <Tooltip title={title}>
-        <HeartOutlined {...iconProps} />
+        <HeartbeatIcon {...iconProps} />
       </Tooltip>
     )
   }

package/client/components/setting-sync/setting-sync-form.jsx

@@ -7,7 +7,7 @@
  */
 import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, Form, Alert } from 'antd'
+import { Button, Input, Form, Alert, Switch } from 'antd'
 import { notification } from '../common/notification'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
@@ -80,6 +80,7 @@ export default function SyncForm (props) {
       up[syncType + 'ServerUrl'] = res.serverUrl || ''
       up[syncType + 'Username'] = res.username || ''
       up[syncType + 'Password'] = res.password || ''
+      up[syncType + 'SkipVerify'] = res.skipVerify || false
     }
 
     window.store.updateSyncSetting(up)
@@ -247,6 +248,13 @@ export default function SyncForm (props) {
             id='sync-input-webdav-username'
           />
         </FormItem>
+        <FormItem
+          label={createLabel('Skip SSL verify')}
+          name='skipVerify'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
         <FormItem
           label={createLabel(e('password'))}
           name='password'

package/client/components/setting-sync/setting-sync.jsx

@@ -48,7 +48,8 @@ export default auto(function SyncSettingEntry (props) {
       // WebDAV specific fields
       serverUrl: syncSetting[type + 'ServerUrl'],
       username: syncSetting[type + 'Username'],
-      password: syncSetting[type + 'Password']
+      password: syncSetting[type + 'Password'],
+      skipVerify: syncSetting[type + 'SkipVerify'] || false
     }
     return (
       <SyncForm

package/client/components/sftp/list-table-ui.jsx

@@ -2,8 +2,8 @@
  * file list table
  */
 
-import { Component } from 'react'
-import { Dropdown, Pagination } from 'antd'
+import { Component, createRef } from 'react'
+import { Dropdown } from 'antd'
 import classnames from 'classnames'
 import FileSection from './file-item'
 import PagedList from './paged-list'
@@ -19,7 +19,25 @@ const e = window.translate
 export default class FileListTable extends Component {
   constructor (props) {
     super(props)
-    this.state = this.initFromProps()
+    this.state = {
+      ...this.initFromProps(),
+      scrollTop: 0
+    }
+  }
+
+  containerRef = createRef()
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.fileList !== this.props.fileList) {
+      if (this.containerRef.current) {
+        this.containerRef.current.scrollTop = 0
+      }
+      this.setState({ scrollTop: 0 })
+    }
+  }
+
+  onScroll = (e) => {
+    this.setState({ scrollTop: e.target.scrollTop })
   }
 
   initFromProps = (pps = this.getPropsDefault()) => {
@@ -36,9 +54,7 @@ export default class FileListTable extends Component {
       }
     })
     return {
-      pageSize: 100,
-      properties,
-      page: 1
+      properties
     }
   }
 
@@ -171,40 +187,6 @@ export default class FileListTable extends Component {
     'left'
   ]
 
-  hasPager = () => {
-    const {
-      pageSize
-    } = this.state
-    const {
-      fileList
-    } = this.props
-    const len = fileList.length
-    return len > pageSize
-  }
-
-  onPageChange = (page) => {
-    this.setState({ page })
-  }
-
-  renderPager () {
-    const { page, pageSize } = this.state
-    const { fileList } = this.props
-    const props = {
-      current: page,
-      pageSize,
-      total: fileList.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onPageChange
-    }
-    return (
-      <div className='pd1b pager-wrap'>
-        <Pagination {...props} />
-      </div>
-    )
-  }
-
   // reset
   resetWidth = () => {
     this.setState(this.initFromProps())
@@ -293,24 +275,19 @@ export default class FileListTable extends Component {
 
   render () {
     const { fileList, height, type } = this.props
-    // const tableHeaderHeight = 30
-    // const sh = sshSftpSplitView ? 0 : 32
+    const containerHeight = height - 42 - 30 - 32 - 90
     const props = {
+      ref: this.containerRef,
       className: 'sftp-table-content overscroll-y relative',
       style: {
-        height: height - 42 - 30 - 32 - 90
+        height: containerHeight
       },
       draggable: false,
+      onScroll: this.onScroll,
       onClick: this.handleClick,
       onDoubleClick: this.handleDoubleClick
     }
-    const hasPager = this.hasPager()
-    const cls = classnames(
-      'sftp-table relative',
-      {
-        'sftp-has-pager': hasPager
-      }
-    )
+    const cls = classnames('sftp-table relative')
     const ddProps = {
       menu: {
         items: this.renderContextMenuFile(),
@@ -338,13 +315,11 @@ export default class FileListTable extends Component {
             <PagedList
               list={fileList}
               renderItem={this.renderItem}
-              hasPager={hasPager}
-              page={this.state.page}
-              pageSize={this.state.pageSize}
+              scrollTop={this.state.scrollTop}
+              containerHeight={containerHeight}
             />
           </div>
         </Dropdown>
-        {hasPager && this.renderPager()}
       </div>
     )
   }

package/client/components/sftp/paged-list.jsx

@@ -1,56 +1,56 @@
 /**
- * file list module to limit files rendered to increase performance
+ * Virtual list for SFTP file list.
+ *
+ * Scroll state is owned by the parent (list-table-ui) via React's onScroll prop
+ * on the scrollable container, and passed down as `scrollTop`. This avoids the
+ * React lifecycle ordering bug where a child's componentDidMount fires before the
+ * parent div's ref is assigned, making addEventListener attach to null.
+ *
+ * Uses spacers (top/bottom divs) so the container's scrollbar reflects the full
+ * list height while only the visible window (± OVERSCAN) is in the DOM.
+ *
+ * offsetTop is read from rootRef.offsetTop at render time — the distance from the
+ * scroll container's top edge to this list's top edge (accounts for the ".." parent
+ * row above the list).
  */
 
-import { Component } from 'react'
-import { Pagination } from 'antd'
+import { Component, createRef } from 'react'
 
-export default class ScrollFiles extends Component {
-  state = {
-    page: 1,
-    pageSize: 100
-  }
+const ITEM_SIZE = 36 // 32px item height + 4px margin-bottom
+const OVERSCAN = 5
 
-  onChange = page => {
-    this.setState({
-      page
-    })
-  }
+export default class VirtualList extends Component {
+  rootRef = createRef()
 
-  renderList () {
-    const page = this.props.page ?? this.state.page
-    const pageSize = this.props.pageSize ?? this.state.pageSize
-    const start = (page - 1) * pageSize
-    const end = start + pageSize
-    const {
-      list, hasPager
-    } = this.props
-    const arr = hasPager
-      ? list.slice(start, end)
-      : list
-    return arr.map((item, index) => this.props.renderItem(item, index))
-  }
+  render () {
+    const { list, renderItem, containerHeight = 400, scrollTop = 0 } = this.props
+
+    // offsetTop: distance from scroll container top to this list's top.
+    // rootRef.offsetTop is relative to the nearest positioned ancestor, which is
+    // .sftp-table-content (position: relative) — exactly the scroll container.
+    // Returns 0 on first render (rootRef not yet set); harmless (renders a few extra items).
+    const offsetTop = this.rootRef.current?.offsetTop ?? 0
+
+    const startIndex = Math.max(
+      0,
+      Math.floor((scrollTop - offsetTop) / ITEM_SIZE) - OVERSCAN
+    )
+    const endIndex = Math.min(
+      list.length - 1,
+      Math.ceil((scrollTop + containerHeight - offsetTop) / ITEM_SIZE) + OVERSCAN
+    )
+
+    const topSpacerHeight = startIndex * ITEM_SIZE
+    const bottomSpacerHeight = Math.max(0, (list.length - endIndex - 1) * ITEM_SIZE)
 
-  renderPager () {
-    const props = {
-      current: this.state.page,
-      pageSize: this.state.pageSize,
-      total: this.props.list.length,
-      showLessItems: true,
-      showSizeChanger: false,
-      simple: false,
-      onChange: this.onChange
-    }
     return (
-      <div className='pd1b pager-wrap'>
-        <Pagination
-          {...props}
-        />
+      <div ref={this.rootRef}>
+        <div style={{ height: topSpacerHeight }} />
+        {list.slice(startIndex, endIndex + 1).map((item, i) =>
+          renderItem(item, startIndex + i)
+        )}
+        <div style={{ height: bottomSpacerHeight }} />
       </div>
     )
   }
-
-  render () {
-    return this.renderList()
-  }
 }

package/client/components/sftp/sftp-entry.jsx

@@ -970,7 +970,7 @@ export default class Sftp extends Component {
     })
   }
 
-  parsePath = (type, pth) => {
+  parsePath = async (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
       return pth
@@ -980,13 +980,14 @@ export default class Sftp extends Component {
       return pth
     }
     const envName = m[1]
-    const envPath = window.pre.env[envName]
+    const envPath = await window.pre.runGlobalAsync('getEnv', envName)
     if (envPath) {
       return pth.replace(reg, envPath)
     }
+    return pth
   }
 
-  onGoto = (type, e) => {
+  onGoto = async (type, e) => {
     e && e.preventDefault()
     if (type === typeMap.remote && !this.sftp) {
       return this.initData(true)
@@ -994,7 +995,7 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = this.parsePath(type, this.state[nt])
+    const np = await this.parsePath(type, this.state[nt])
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'

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

@@ -16,6 +16,7 @@ import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
 import RunningTime from './app-running-time'
 import { auto } from 'manate/react'
+import { useState } from 'react'
 
 import {
   packInfo,
@@ -27,8 +28,13 @@ import './info.styl'
 const e = window.translate
 
 export default auto(function InfoModal (props) {
+  const [runtimeEnv, setRuntimeEnv] = useState(null)
+
   const handleChangeTab = key => {
     window.store.infoModalTab = key
+    if (key === infoTabs.env && !runtimeEnv) {
+      window.pre.runGlobalAsync('getEnv').then(env => setRuntimeEnv(env))
+    }
   }
 
   const renderCheckUpdate = () => {
@@ -135,14 +141,14 @@ export default auto(function InfoModal (props) {
     knownIssuesLink
   } = packInfo
   const link = releaseLink.replace('/releases', '')
-  const { env, versions } = window.pre
+  const { versions } = window.pre
   const deps = {
     ...devDependencies,
     ...dependencies
   }
   const envs = {
     ...versions,
-    ...env
+    ...(runtimeEnv || {})
   }
   const title = (
     <div className='custom-modal-close-confirm-title font16'>

package/client/components/terminal/reconnect-overlay.jsx

@@ -1,27 +1,14 @@
 import { memo } from 'react'
-import { Button } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
 
 const e = window.translate
 
-export default memo(function ReconnectOverlay ({ countdown, onCancel }) {
+export default memo(function ReconnectOverlay ({ countdown }) {
   if (countdown === null || countdown === undefined) {
     return null
   }
   return (
     <div className='terminal-reconnect-overlay'>
-      <div className='terminal-reconnect-box'>
-        <LoadingOutlined className='terminal-reconnect-icon' />
-        <div className='terminal-reconnect-msg'>
-          {e('autoReconnectTerminal')}: {countdown}s
-        </div>
-        <Button
-          size='small'
-          onClick={onCancel}
-        >
-          {e('cancel')}
-        </Button>
-      </div>
+      {e('autoReconnectTerminal')}: {countdown}s
     </div>
   )
 })

package/client/components/terminal/terminal-error-handle.jsx

@@ -0,0 +1,43 @@
+import { memo } from 'react'
+import {
+  Button,
+  Alert
+} from 'antd'
+
+const e = window.translate
+
+export default memo(function TerminalErrorHandle ({
+  errorMessage,
+  showEditBookmarkButton,
+  onEditBookmark
+}) {
+  if (!errorMessage) {
+    return null
+  }
+
+  function renderEditBookmarkButton () {
+    if (!showEditBookmarkButton) {
+      return null
+    }
+    return (
+      <div className='terminal-error-actions pd1y'>
+        <Button
+          onClick={onEditBookmark}
+        >
+          {e('edit')} {e('bookmarks')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <Alert
+      className='terminal-error-handle'
+      message={errorMessage}
+      type='error'
+      showIcon
+      banner
+      description={renderEditBookmarkButton()}
+    />
+  )
+})

package/client/components/terminal/terminal.jsx

@@ -1,5 +1,4 @@
 import { Component, createRef } from 'react'
-import { handleErr } from '../../common/fetch.jsx'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
@@ -7,7 +6,6 @@ import {
   Spin,
   Dropdown
 } from 'antd'
-import { notification } from '../common/notification'
 import message from '../common/message'
 import Modal from '../common/modal'
 import classnames from 'classnames'
@@ -48,8 +46,8 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
-import { showSocketCloseWarning } from './socket-close-warning.jsx'
 import ReconnectOverlay from './reconnect-overlay.jsx'
+import TerminalErrorHandle from './terminal-error-handle.jsx'
 import {
   loadTerminal,
   loadFitAddon,
@@ -78,6 +76,7 @@ class Term extends Component {
       matchIndex: -1,
       totalLines: 0,
       reconnectCountdown: null,
+      terminalError: null,
       dropFileModalVisible: false,
       droppedFiles: []
     }
@@ -169,11 +168,6 @@ class Term extends Component {
     this.fitAddon = null
     this.cmdAddon = null
     this.imageAddon = null
-    // Clear the notification if it exists
-    if (this.socketCloseWarning) {
-      notification.destroy(this.socketCloseWarning.key)
-      this.socketCloseWarning = null
-    }
   }
 
   terminalConfigProps = [
@@ -958,9 +952,10 @@ class Term extends Component {
   }
 
   onSelectionChange = () => {
-    this.setState({
-      hasSelection: this.term.hasSelection()
-    })
+    const hasSelection = this.term.hasSelection()
+    const txt = hasSelection ? this.term.getSelection().trim() : ''
+    this.setState({ hasSelection })
+    refsStatic.get('unix-timestamp-tooltip')?.onSelection(txt)
   }
 
   // setActive = () => {
@@ -1170,7 +1165,8 @@ class Term extends Component {
 
   remoteInit = async (term = this.term) => {
     this.setState({
-      loading: true
+      loading: true,
+      terminalError: null
     })
     const { cols, rows } = term
     const { config } = this.props
@@ -1248,7 +1244,7 @@ class Term extends Component {
       .catch(err => {
         if (!isAutoReconnect) {
           const text = err.message
-          handleErr({ message: text })
+          this.handleError({ message: text, from, srcId })
         }
       })
     if (typeof r === 'string' && r.includes('fail')) {
@@ -1304,6 +1300,29 @@ class Term extends Component {
     )
   }
 
+  handleError = ({ message: errorMessage, from, srcId }) => {
+    this.setState({
+      terminalError: {
+        message: errorMessage || 'Failed to create terminal session',
+        from,
+        srcId
+      }
+    })
+  }
+
+  handleEditBookmarkFromError = () => {
+    const error = this.state.terminalError
+    if (!error || error.from !== 'bookmarks' || !error.srcId) {
+      return
+    }
+    const item = window.store.bookmarksMap?.get(error.srcId) ||
+      window.store.bookmarks?.find(d => d.id === error.srcId)
+    if (!item) {
+      return
+    }
+    window.store.openBookmarkEdit(item)
+  }
+
   initSocketEvents = () => {
     const originalSend = this.socket.send
     this.socket.send = (data) => {
@@ -1369,31 +1388,8 @@ class Term extends Component {
       return this.props.delTab(this.props.tab.id)
     }
     const { autoReconnectTerminal } = this.props.config
-    const isActive = this.isActiveTerminal()
-    const isFocused = window.focused
     if (autoReconnectTerminal) {
-      if (isActive && isFocused) {
-        this.socketCloseWarning = showSocketCloseWarning({
-          tabId: this.props.tab.id,
-          tab: this.props.tab,
-          autoReconnect: true,
-          delTab: this.props.delTab,
-          reloadTab: this.props.reloadTab
-        })
-      } else {
-        this.scheduleAutoReconnect(3000)
-      }
-    } else {
-      if (!isActive || !isFocused) {
-        return false
-      }
-      this.socketCloseWarning = showSocketCloseWarning({
-        tabId: this.props.tab.id,
-        tab: this.props.tab,
-        autoReconnect: false,
-        delTab: this.props.delTab,
-        reloadTab: this.props.reloadTab
-      })
+      this.scheduleAutoReconnect(3000)
     }
   }
 
@@ -1547,9 +1543,13 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
+          <TerminalErrorHandle
+            errorMessage={this.state.terminalError?.message}
+            showEditBookmarkButton={this.state.terminalError?.from === 'bookmarks' && !!this.state.terminalError?.srcId}
+            onEditBookmark={this.handleEditBookmarkFromError}
+          />
           <ReconnectOverlay
             countdown={this.state.reconnectCountdown}
-            onCancel={this.handleCancelAutoReconnect}
           />
           <DropFileModal
             visible={this.state.dropFileModalVisible}

package/client/components/terminal/terminal.styl

@@ -153,12 +153,17 @@
 
 .terminal-reconnect-overlay
   position absolute
-  left 0
-  top 0
-  width 100%
-  height 100%
-  display flex
-  align-items center
-  justify-content center
+  bottom 6px
+  right 12px
+  font-size 11px
+  color rgba(255, 255, 255, 0.55)
+  pointer-events none
   z-index 110
 
+.terminal-error-handle
+  position absolute
+  left 0
+  top 0
+  z-index 100
+  background var(--main)
+  max-width calc(100% - 24px)

package/client/components/terminal/unix-timestamp-tooltip.jsx

@@ -0,0 +1,85 @@
+/**
+ * Global tooltip that detects Unix timestamps in terminal selections
+ * and displays their human-readable date/time near the cursor.
+ * Registered via refsStatic as 'unix-timestamp-tooltip'.
+ */
+
+import { Component } from 'react'
+import { refsStatic } from '../common/ref'
+
+export default class UnixTimestampTooltip extends Component {
+  state = {
+    visible: false,
+    x: 0,
+    y: 0,
+    text: ''
+  }
+
+  _mouseX = 0
+  _mouseY = 0
+
+  componentDidMount () {
+    refsStatic.add('unix-timestamp-tooltip', this)
+    document.addEventListener('mousemove', this.onMouseMove)
+  }
+
+  componentWillUnmount () {
+    refsStatic.remove('unix-timestamp-tooltip')
+    document.removeEventListener('mousemove', this.onMouseMove)
+  }
+
+  detectUnixTimestamp (txt) {
+    if (!/^\d+$/.test(txt)) return null
+    const num = parseInt(txt, 10)
+    // seconds: 9-10 digits, year ~2001-2286
+    if ((txt.length === 9 || txt.length === 10) && num >= 946684800 && num <= 32503680000) {
+      return new Date(num * 1000).toLocaleString()
+    }
+    // milliseconds: 13 digits
+    if (txt.length === 13 && num >= 946684800000 && num <= 32503680000000) {
+      return new Date(num).toLocaleString()
+    }
+    return null
+  }
+
+  onMouseMove = (e) => {
+    this._mouseX = e.clientX
+    this._mouseY = e.clientY
+  }
+
+  onSelection = (txt) => {
+    const ts = this.detectUnixTimestamp(txt)
+    if (ts) {
+      this.setState({ visible: true, x: this._mouseX, y: this._mouseY, text: ts })
+    } else {
+      this.setState({ visible: false })
+    }
+  }
+
+  render () {
+    const { visible, x, y, text } = this.state
+    if (!visible) {
+      return null
+    }
+    return (
+      <div
+        style={{
+          position: 'fixed',
+          left: x,
+          top: y - 36,
+          background: 'rgba(0,0,0,0.75)',
+          color: '#fff',
+          padding: '3px 8px',
+          borderRadius: 4,
+          fontSize: 12,
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+          transform: 'translateX(-50%)',
+          zIndex: 9999
+        }}
+      >
+        {text}
+      </div>
+    )
+  }
+}

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

@@ -7,7 +7,7 @@ import {
   MenuOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import { Button, Space, Dropdown } from 'antd'
+import { Button, Space, Dropdown, Flex } from 'antd'
 import copy from 'json-deep-copy'
 import time from '../../common/time'
 import download from '../../common/download'
@@ -87,8 +87,8 @@ export default function BookmarkToolbar (props) {
   return (
 
     <div className='pd1b pd1r'>
-      <div className='fix'>
-        <div className='fleft'>
+      <Flex justify='space-between' align='center'>
+        <div>
           <Space.Compact>
             <Button onClick={onNewBookmark}>
               <BookOutlined className='with-plus' />
@@ -122,12 +122,12 @@ export default function BookmarkToolbar (props) {
             </Button>
           </Space.Compact>
         </div>
-        <div className='fright'>
+        <div>
           <Dropdown {...ddProps}>
             <MenuOutlined />
           </Dropdown>
         </div>
-      </div>
+      </Flex>
     </div>
   )
 }

package/client/components/widgets/widget-control.jsx

@@ -55,6 +55,7 @@ export default function WidgetControl ({ formData, widgetInstancesLength }) {
       showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)
+      showMsg(`Failed to run widget: ${err.message}`, 'error', null, 10)
     } finally {
       setLoading(false)
     }

package/client/store/common.js

@@ -298,7 +298,7 @@ export default Store => {
   }
 
   Store.prototype.aiConfigMissing = function () {
-    return aiConfigsArr.slice(0, -1).some(k => !window.store.config[k])
+    return aiConfigsArr.filter(k => k !== 'apiKeyAI' && k !== 'proxyAI').some(k => !window.store.config[k])
   }
 
   Store.prototype.clearHistory = function () {

package/client/store/load-data.js

@@ -100,7 +100,7 @@ export async function addTabFromCommandLine (store, opts) {
     (conf.username && conf.host) ||
     conf.fromCmdLine
   ) {
-    store.addTab(conf)
+    store.ipcOpenTab(conf)
   } else if (
     options.initFolder &&
     !(store.config.onStartSessions || []).length &&
@@ -229,7 +229,7 @@ export default (Store) => {
   Store.prototype.checkPendingDeepLink = async function () {
     const pending = await window.pre.runGlobalAsync('getPendingDeepLink')
     if (pending) {
-      window.store.addTab(pending)
+      window.store.ipcOpenTab(pending)
     }
   }
   Store.prototype.parseQuickConnect = function (url) {

package/client/store/sync.js

@@ -68,11 +68,12 @@ export default (Store) => {
       ).join('####')
     }
     if (type === syncTypes.webdav) {
-      // WebDAV token format: serverUrl####username####password
+      // WebDAV token format: serverUrl####username####password####skipVerify
       const serverUrl = get(window.store.config, 'syncSetting.webdavServerUrl')
       const username = get(window.store.config, 'syncSetting.webdavUsername')
       const password = get(window.store.config, 'syncSetting.webdavPassword')
-      return [serverUrl, username, password].join('####')
+      const skipVerify = get(window.store.config, 'syncSetting.webdavSkipVerify') || false
+      return [serverUrl, username, password, skipVerify].join('####')
     }
     return get(window.store.config, 'syncSetting.' + type + 'AccessToken')
   }

package/client/store/tab.js

@@ -362,6 +362,26 @@ export default Store => {
     store.updateHistory(newTab)
   }
 
+  // Dangerous props that should not be accepted from IPC
+  const dangerousTabProps = [
+    'execLinux',
+    'execMac',
+    'execWindows',
+    'execWindowsArgs',
+    'execMacArgs',
+    'execLinuxArgs',
+    'setEnv',
+    'runScripts',
+    'interactiveValues'
+  ]
+
+  Store.prototype.ipcOpenTab = function (parsed) {
+    const safeTab = Object.fromEntries(
+      Object.entries(parsed).filter(([key]) => !dangerousTabProps.includes(key))
+    )
+    return window.store.addTab(safeTab)
+  }
+
   Store.prototype.clickNextTab = debounce(function () {
     window.store.clickBioTab(1)
   }, 100)

package/package.json

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

package/client/components/terminal/socket-close-warning.jsx

@@ -1,94 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { Button } from 'antd'
-import { ReloadOutlined } from '@ant-design/icons'
-import { notification } from '../common/notification'
-
-const e = window.translate
-const COUNTDOWN_SECONDS = 3
-
-export function showSocketCloseWarning ({
-  tabId,
-  tab,
-  autoReconnect,
-  delTab,
-  reloadTab
-}) {
-  const key = `open${Date.now()}`
-
-  function closeNotification () {
-    notification.destroy(key)
-  }
-
-  const descriptionNode = (
-    <SocketCloseDescription
-      autoReconnect={autoReconnect}
-      onClose={() => {
-        closeNotification()
-        delTab(tabId)
-      }}
-      onReload={() => {
-        closeNotification()
-        reloadTab({ ...tab, autoReConnect: (tab.autoReConnect || 0) + 1 })
-      }}
-    />
-  )
-
-  notification.warning({
-    key,
-    message: e('socketCloseTip'),
-    duration: autoReconnect ? COUNTDOWN_SECONDS + 2 : 30,
-    description: descriptionNode
-  })
-
-  return { key }
-}
-
-function SocketCloseDescription ({ autoReconnect, onClose, onReload }) {
-  const [countdown, setCountdown] = useState(COUNTDOWN_SECONDS)
-  const timerRef = useRef(null)
-
-  useEffect(() => {
-    if (!autoReconnect) {
-      return
-    }
-    timerRef.current = setInterval(() => {
-      setCountdown(prev => {
-        if (prev <= 1) {
-          clearInterval(timerRef.current)
-          onReload()
-          return 0
-        }
-        return prev - 1
-      })
-    }, 1000)
-
-    return () => {
-      if (timerRef.current) {
-        clearInterval(timerRef.current)
-      }
-    }
-  }, [autoReconnect])
-
-  return (
-    <div className='pd2y'>
-      {autoReconnect && (
-        <div className='pd1b'>
-          {e('autoReconnectTerminal')}: {countdown}s
-        </div>
-      )}
-      <Button
-        className='mg1r'
-        type='primary'
-        onClick={onClose}
-      >
-        {e('close')}
-      </Button>
-      <Button
-        icon={<ReloadOutlined />}
-        onClick={onReload}
-      >
-        {e('reload')}
-      </Button>
-    </div>
-  )
-}