@electerm/electerm-react 5.3.26 → 5.5.9

package/client/components/terminal/terminal.styl

@@ -53,6 +53,67 @@
     background-position center
     background-color transparent !important
 
+// Full-screen plain-text view of the buffer, opened from the touch context
+// menu (see terminal-select-text.jsx) so the platform's own selection handles
+// and Copy callout can be used instead of xterm's canvas.
+//
+// 900 clears the touch shortcut bar (400) and the terminal panes, while
+// staying below antd's modal (1000) and message (1010) layers so a "copied"
+// toast still shows up over this panel.
+//
+// The callout/user-select resets are load-bearing, not decoration: the
+// component is portalled onto <body>, but `.term-wrap` switches off
+// -webkit-touch-callout for the terminal's own gestures and the property is
+// inherited — if this panel is ever rendered in place again, without the
+// resets the native Copy callout would never appear on the textarea.
+.terminal-select-text
+  position fixed
+  left 0
+  top 0
+  width 100%
+  height 100%
+  z-index 900
+  display flex
+  flex-direction column
+  background var(--main)
+  color var(--text)
+  -webkit-touch-callout default
+  -webkit-user-select text
+  user-select text
+
+.terminal-select-text-bar
+  flex-shrink 0
+  display flex
+  align-items center
+  justify-content space-between
+  height 40px
+  padding 0 10px
+  font-size 14px
+  background var(--main-lighter)
+  .terminal-select-text-btns
+    a
+      margin-left 16px
+      color var(--text)
+      &:hover
+        color var(--text-light)
+
+.terminal-select-text-area
+  flex 1
+  width 100%
+  margin 0
+  padding 8px 10px
+  border 0
+  outline none
+  resize none
+  background var(--main)
+  color var(--text)
+  font-family monospace
+  font-size 13px
+  line-height 1.4
+  -webkit-touch-callout default
+  -webkit-user-select text
+  user-select text
+
 .terminal-normal-buffer
   position absolute
   left 0

package/client/components/terminal/transfer-client-base.js

@@ -4,16 +4,15 @@
  */
 
 // import { transferTypeMap } from '../../common/constants.js'
-import { getItem, setItem } from '../../common/safe-local-storage.js'
+import { chooseSaveDirectory } from '../../common/choose-save-folder.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
 
 /**
  * TransferClientBase class - abstract base for file transfer protocols
  */
 export class TransferClientBase {
-  constructor (terminal, storageKey) {
+  constructor (terminal) {
     this.terminal = terminal
-    this.storageKey = storageKey
     this.socket = null
     this.isActive = false
     this.currentTransfer = null
@@ -233,38 +232,15 @@ export class TransferClientBase {
     if (window._apiControlSelectFolder) {
       const folder = window._apiControlSelectFolder
       delete window._apiControlSelectFolder
-      if (this.storageKey) {
-        setItem(this.storageKey, folder)
-      }
       return folder
     }
 
-    // Try to use last saved path
-    const lastPath = this.storageKey ? getItem(this.storageKey) : null
-
-    const savePaths = await window.api.openDialog({
-      title: 'Choose a folder to save file(s)',
-      message: 'Choose a folder to save file(s)',
-      defaultPath: lastPath || undefined,
-      properties: [
-        'openDirectory',
-        'showHiddenFiles',
-        'createDirectory',
-        'noResolveAliases',
-        'treatPackageAsDirectory',
-        'dontAddToRecent'
-      ],
+    // Last saved path is remembered by chooseSaveDirectory in localStorage
+    const savePath = await chooseSaveDirectory({
       noBrowserTransfer: true
     }).catch(() => false)
 
-    if (!savePaths || !savePaths.length) {
-      return null
-    }
-
-    if (this.storageKey) {
-      setItem(this.storageKey, savePaths[0])
-    }
-    return savePaths[0]
+    return savePath || null
   }
 
   /**

package/client/components/terminal/trzsz-client.js

@@ -8,14 +8,12 @@ import { filesize } from 'filesize'
 import { TransferClientBase } from './transfer-client-base.js'
 import { transferTypeMap } from '../../common/constants.js'
 
-const TRZSZ_SAVE_PATH_KEY = 'trzsz-save-path'
-
 /**
  * TrzszClient class handles trzsz UI and client-side logic
  */
 export class TrzszClient extends TransferClientBase {
   constructor (terminal) {
-    super(terminal, TRZSZ_SAVE_PATH_KEY)
+    super(terminal)
     this.transferStartTime = 0
     this.totalTransferred = 0
     this.totalSpeed = 0

package/client/components/terminal/xmodem-client.js

@@ -9,14 +9,12 @@ import { filesize } from 'filesize'
 import { TransferClientBase } from './transfer-client-base.js'
 import { transferTypeMap } from '../../common/constants.js'
 
-const XMODEM_SAVE_PATH_KEY = 'xmodem-save-path'
-
 /**
  * XmodemClient class handles XMODEM UI and client-side logic
  */
 export class XmodemClient extends TransferClientBase {
   constructor (terminal) {
-    super(terminal, XMODEM_SAVE_PATH_KEY)
+    super(terminal)
     this.transferStartTime = 0
     this.pendingMode = null // 'send' or 'receive' - waiting for user action
   }

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

@@ -72,6 +72,13 @@ export async function loadImageAddon () {
   return window.xtermAddons.ImageAddon
 }
 
+export async function loadSerializeAddon () {
+  if (window.xtermAddons.SerializeAddon) return window.xtermAddons.SerializeAddon
+  const mod = await import('@xterm/addon-serialize')
+  window.xtermAddons.SerializeAddon = mod.SerializeAddon
+  return window.xtermAddons.SerializeAddon
+}
+
 export function getTerminal () {
   return window.xtermAddons.Terminal
 }

package/client/components/terminal/zmodem-client.js

@@ -8,14 +8,12 @@ import { filesize } from 'filesize'
 import { TransferClientBase } from './transfer-client-base.js'
 import { transferTypeMap } from '../../common/constants.js'
 
-const ZMODEM_SAVE_PATH_KEY = 'zmodem-save-path'
-
 /**
  * ZmodemClient class handles zmodem UI and client-side logic
  */
 export class ZmodemClient extends TransferClientBase {
   constructor (terminal) {
-    super(terminal, ZMODEM_SAVE_PATH_KEY)
+    super(terminal)
     this.transferStartTime = 0
   }
 

package/client/components/terminal-info/base.jsx

@@ -2,23 +2,10 @@
  * show base terminal info, id sessionID
  */
 import { Component } from 'react'
-import {
-  Button,
-  Dropdown
-} from 'antd'
+import ItemFilter from '../common/item-filter'
 import SwitchLabel from '../common/switch'
-import defaults from '../../common/default-setting'
+import { INFO_PANEL_ITEM_IDS } from '../remote-monitor/monitor-model'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
-import {
-  ClockCircleOutlined,
-  BorderlessTableOutlined,
-  DatabaseOutlined,
-  BarsOutlined,
-  ApiOutlined,
-  PartitionOutlined,
-  FilterOutlined,
-  CheckOutlined
-} from '@ant-design/icons'
 import { refs } from '../common/ref'
 import ShowItem from '../common/show-item'
 import { osResolve } from '../../common/resolve'
@@ -26,15 +13,6 @@ import createDefaultLogPath from '../../common/default-log-path'
 
 const e = window.translate
 
-const mapper = {
-  uptime: <ClockCircleOutlined />,
-  cpu: <BorderlessTableOutlined />,
-  mem: <DatabaseOutlined />,
-  activities: <BarsOutlined />,
-  network: <ApiOutlined />,
-  disks: <PartitionOutlined />
-}
-
 export default class TerminalInfoBase extends Component {
   state = {
     saveTerminalLogToFile: false,
@@ -73,14 +51,14 @@ export default class TerminalInfoBase extends Component {
     })
   }
 
-  toggleTerminalLogInfo = (h) => {
-    const { terminalInfos } = this.props
-    const nv = terminalInfos.includes(h)
-      ? terminalInfos.filter(f => f !== h)
-      : [...terminalInfos, h]
-    window.store.setConfig({
-      terminalInfos: nv
-    })
+  handleToggleInfo = (id) => {
+    const selected = new Set(this.props.terminalInfos || [])
+    if (selected.has(id)) {
+      selected.delete(id)
+    } else {
+      selected.add(id)
+    }
+    window.store.setTerminalInfos(INFO_PANEL_ITEM_IDS.filter(x => selected.has(x)))
   }
 
   handleToggle = () => {
@@ -134,43 +112,13 @@ export default class TerminalInfoBase extends Component {
     )
   }
 
-  renderInfoSelection () {
-    const {
-      terminalInfos
-    } = this.props
-    const items = defaults.terminalInfos.map(f => {
-      const checked = terminalInfos.includes(f)
-      return {
-        key: f,
-        label: (
-          <span
-            className='term-info-filter-label'
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '6px'
-            }}
-          >
-            <span style={{ width: '14px' }}>{checked ? <CheckOutlined /> : null}</span>
-            {mapper[f]} {f}
-          </span>
-        ),
-        onClick: () => this.toggleTerminalLogInfo(f)
-      }
-    })
+  renderInfoFilter () {
     return (
-      <Dropdown
-        menu={{ items }}
-        trigger={['click']}
-        placement='bottomRight'
-      >
-        <Button
-          size='small'
-          icon={<FilterOutlined />}
-        >
-          {e('filter')}({terminalInfos.length}/{defaults.terminalInfos.length})
-        </Button>
-      </Dropdown>
+      <ItemFilter
+        ids={INFO_PANEL_ITEM_IDS}
+        onToggle={this.handleToggleInfo}
+        selected={this.props.terminalInfos || []}
+      />
     )
   }
 
@@ -209,9 +157,9 @@ export default class TerminalInfoBase extends Component {
               )
             : null
         }
-        <div className='pd2y'>
+        <div className='terminal-info-filter-wrap'>
           {
-            this.renderInfoSelection()
+            this.renderInfoFilter()
           }
         </div>
 

package/client/components/terminal-info/terminal-info-entry.jsx

@@ -1,11 +1,19 @@
 import { lazy, Suspense } from 'react'
+import { auto } from 'manate/react'
+import { getRemoteMonitorTab } from '../remote-monitor/visibility'
+import LazyBoundary from '../common/lazy-boundary'
 
 const TerminalInfo = lazy(() => import('./terminal-info'))
 
-export default function TerminalInfoEntry (props) {
+export default auto(function TerminalInfoEntry (props) {
+  const tab = getRemoteMonitorTab(props.store)
+  if (props.store.rightPanelTab !== 'info' || props.pid !== tab?.id) return null
+
   return (
-    <Suspense fallback={null}>
-      <TerminalInfo {...props} />
-    </Suspense>
+    <LazyBoundary>
+      <Suspense fallback={null}>
+        <TerminalInfo {...props} />
+      </Suspense>
+    </LazyBoundary>
   )
-}
+})

package/client/components/terminal-info/terminal-info.jsx

@@ -1,65 +1,56 @@
-/**
- * info content module
- */
-
-import { PureComponent } from 'react'
+import { auto } from 'manate/react'
+import { useEffect, useState } from 'react'
 import TerminalInfoBase from './base'
-import TerminalInfoUp from './up'
-import TerminalInfoNetwork from './network'
-import TerminalInfoResource from './resource'
-import TerminalInfoActivities from './activity'
-import TerminalInfoDisk from './disk'
-import TerminalInfoSys from './sys-info'
-import RunCmd from './run-cmd'
+import MonitorDetails from '../remote-monitor/monitor-details'
+import { getInfoPanelItems } from '../remote-monitor/monitor-model'
+import { useMonitorDetails } from '../remote-monitor/use-monitor-details'
+import { createEmptyMonitorSnapshot } from '../remote-monitor/session-monitor'
+import { getRemoteMonitorTab } from '../remote-monitor/visibility'
+import { statusMap } from '../../common/constants'
 import { runCmd } from '../terminal/terminal-apis'
+import resolveLocalInfo from './local-info-resolver'
 import './terminal-info.styl'
 
-export default class TerminalInfoContent extends PureComponent {
-  state = {
-    uptime: '',
-    cpu: '',
-    mem: {},
-    swap: {},
-    activities: [],
-    disks: [],
-    network: {},
-    sysInfo: null
-  }
-
-  setStateRef = (...args) => {
-    this.setState(...args)
-  }
-
-  killProcess = async (id) => {
-    const {
-      pid
-    } = this.props
-    const cmd = `kill ${id}`
-    runCmd(pid, cmd)
-  }
+function LocalSystemInfo ({ pid }) {
+  const [info, setInfo] = useState(null)
+  useEffect(() => {
+    let active = true
+    resolveLocalInfo(pid).then(info => { if (active) setInfo(info) })
+    return () => { active = false }
+  }, [pid])
+  if (!info) return null
+  const snapshot = createEmptyMonitorSnapshot(pid)
+  snapshot.groups.sysinfo = { status: 'ready', data: info }
+  return <MonitorDetails id='hostname' snapshot={snapshot} config={{}} tab={{}} />
+}
 
-  render () {
-    const { props, state } = this
-    if (props.rightPanelTab === 'ai') {
-      return null
-    }
-    return (
-      <>
-        <TerminalInfoBase {...props} {...state} />
-        <TerminalInfoSys {...props} {...state} />
-        <TerminalInfoUp {...props} {...state} />
-        <TerminalInfoResource
-          {...props} {...state}
-        />
-        <TerminalInfoActivities
-          {...props}
-          {...state}
-          killProcess={this.killProcess}
-        />
-        <TerminalInfoNetwork {...props} {...state} />
-        <TerminalInfoDisk {...props} {...state} />
-        <RunCmd {...props} setState={this.setStateRef} />
-      </>
-    )
-  }
+function RemoteInfo ({ tab, config }) {
+  const items = getInfoPanelItems(config.terminalInfos)
+  const { snapshot, levels } = useMonitorDetails(tab.id, items, tab.status === statusMap.success)
+  return items.map(id => (
+    <MonitorDetails
+      key={id}
+      id={id}
+      snapshot={snapshot}
+      levels={levels}
+      tab={tab}
+      config={config}
+      includeActivity={false}
+      onKillProcess={pid => runCmd(tab.id, `kill ${pid}`)}
+    />
+  ))
 }
+
+export default auto(function TerminalInfo ({ store, ...props }) {
+  const tab = getRemoteMonitorTab(store)
+  if (store.rightPanelTab !== 'info' || props.pid !== tab?.id) return null
+  const config = store.config
+  return (
+    <>
+      <TerminalInfoBase {...props} terminalInfos={config.terminalInfos} />
+      {props.isRemote
+        ? <RemoteInfo key={tab.id} tab={tab} config={config} />
+        : <LocalSystemInfo key={tab.id} pid={tab.id} />}
+    </>
+  )
+})

package/client/components/terminal-info/terminal-info.styl

@@ -2,53 +2,10 @@
   color var(--text-dark)
   &:hover
     color var(--text)
-.info-panel-wrap
-  position fixed
-  right 0
-  top 100px
-  bottom 0
-  width 500px
-  background var(--main)
-  border 1px solid var(--main-darker)
-  border-radius 5px 0 0 5px
-  border-right none
-  color var(--text)
-  z-index 100
-  overflow-y scroll
-
-  .drag-handle
-    left 0
-    right auto
-    display block
-.terminal-info-section
+.terminal-info-section,
+.right-side-panel-content > .remote-monitor-details
   padding 10px 0
-.terminal-info-sys
-  border-bottom 1px solid var(--main-darker)
-  .terminal-info-sys-rows
-    display flex
-    flex-direction column
-    gap 4px
-  .terminal-info-sys-row
-    display flex
-    gap 8px
-    align-items baseline
-    font-size 12px
-  .terminal-info-sys-key
-    flex none
-    width 80px
-    color var(--text-dark)
-    text-transform capitalize
-  .terminal-info-sys-val
-    flex 1
-    overflow hidden
-    text-overflow ellipsis
-    white-space nowrap
-.activity-item
-  max-height 1.6em
-  line-height 1.6
-  overflow hidden
-  &:hover
-    max-height none
-.info-panel-wrap-pin
-  .toggle-info-panel-wrap
-    color var(--success)
+
+.terminal-info-filter-wrap
+  display flex
+  justify-content flex-end

package/client/components/text-editor/open-text-editor.js

@@ -0,0 +1,30 @@
+/**
+ * open the text editor, load/mount it on demand
+ */
+
+import { refsStatic } from '../common/ref'
+
+let pending = null
+
+/**
+ * request to open the text editor with file data,
+ * if the editor is not mounted yet, mount it first
+ * and keep the data as pending, editor will consume
+ * it on mount
+ * @param {object} data { id, file }
+ */
+export function openTextEditor (data) {
+  const editor = refsStatic.get('text-editor')
+  if (editor) {
+    editor.openEditor(data)
+    return
+  }
+  pending = data
+  window.store.textEditorRequested = true
+}
+
+export function takePendingTextEditorData () {
+  const data = pending
+  pending = null
+  return data
+}

package/client/components/text-editor/text-editor-entry.jsx

@@ -1,11 +1,22 @@
-import { lazy, Suspense } from 'react'
-
-const TextEditor = lazy(() => import('./text-editor'))
+import { lazy, Suspense, useMemo } from 'react'
+import LazyBoundary from '../common/lazy-boundary'
 
 export default function TextEditorEntry (props) {
+  // one lazy component per mount: the entry is remounted (the mount latch is
+  // released by the boundary below) exactly when a previous load failed, and
+  // React.lazy caches a rejected import() forever — so a retry has to go
+  // through a *new* lazy component
+  const TextEditor = useMemo(() => lazy(() => import('./text-editor')), [])
+  const onError = () => {
+    // release the mount latch so the next "edit file" request mounts a fresh
+    // lazy component and retries the fetch
+    window.store.textEditorRequested = false
+  }
   return (
-    <Suspense fallback={null}>
-      <TextEditor {...props} />
-    </Suspense>
+    <LazyBoundary onError={onError}>
+      <Suspense fallback={null}>
+        <TextEditor {...props} />
+      </Suspense>
+    </LazyBoundary>
   )
 }

package/client/components/text-editor/text-editor.jsx

@@ -13,6 +13,7 @@ import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import { safeGetItem } from '../../common/safe-local-storage.js'
 import { refsStatic, refs } from '../common/ref'
+import { takePendingTextEditorData } from './open-text-editor'
 
 const e = window.translate
 
@@ -27,6 +28,19 @@ export default class TextEditor extends PureComponent {
 
   componentDidMount () {
     refsStatic.add('text-editor', this)
+    // editor may be mounted by an open request,
+    // consume the pending data now
+    const data = takePendingTextEditorData()
+    if (data) {
+      this.openEditor(data)
+    }
+  }
+
+  componentWillUnmount () {
+    // the entry can be unmounted (a failed chunk load releases the mount
+    // latch); without this a later request would find this dead instance and
+    // call openEditor on it, so the modal would never show up
+    refsStatic.remove('text-editor')
   }
 
   setStateProxy = (state, cb) => {