@electerm/electerm-react 5.3.15 → 5.5.6

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

@@ -1,25 +1,27 @@
 import { auto } from 'manate/react'
 import {
   Select,
-  Dropdown
+  Dropdown,
+  Badge
 } from 'antd'
-import { InfoCircleOutlined, TranslationOutlined, DoubleRightOutlined } from '@ant-design/icons'
+import { BarChartOutlined, TranslationOutlined, DoubleRightOutlined, FunctionOutlined } from '@ant-design/icons'
 import './footer.styl'
 import { statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
 import encodes from '../bookmark-form/common/encodes'
 import { refs } from '../common/ref'
 import Qm from '../quick-commands/quick-commands-select'
+import TriggerSessionModal from '../triggers/trigger-session-modal'
 import AIIcon from '../icons/ai-icon'
 import { isAIDisabled } from '../../common/ai-feature'
 import CmdHistory from './cmd-history'
 
+const e = window.translate
+
 const {
   Option
 } = Select
 
-const e = window.translate
-
 export default auto(function FooterEntry (props) {
   function handleInfoPanel () {
     window.store.openInfoPanel()
@@ -77,6 +79,33 @@ export default auto(function FooterEntry (props) {
     )
   }
 
+  function renderTriggers () {
+    const { store } = props
+    const tab = store.currentTab
+    let count = 0
+    try {
+      count = tab ? store.getEffectiveTriggers(tab).length : store.triggers.length
+    } catch (err) {
+      count = 0
+    }
+    return (
+      <div className='terminal-footer-unit terminal-footer-triggers'>
+        <Badge
+          count={count}
+          size='small'
+          offset={[-2, 2]}
+        >
+          <FunctionOutlined
+            onClick={() => store.toggleTriggerSessionModal(true)}
+            className='pointer font14 terminal-trigger-icon'
+            title={e('triggers')}
+          />
+        </Badge>
+        <TriggerSessionModal store={store} />
+      </div>
+    )
+  }
+
   function renderAIIcon () {
     return (
       <div className='terminal-footer-unit terminal-footer-ai'>
@@ -149,7 +178,7 @@ export default auto(function FooterEntry (props) {
     }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
-        <InfoCircleOutlined
+        <BarChartOutlined
           onClick={handleInfoPanel}
           className='pointer font14 terminal-info-icon'
         />
@@ -214,6 +243,7 @@ export default auto(function FooterEntry (props) {
         {!isAIDisabled() && renderAIIcon()}
         {renderCmdHistory()}
         {renderQuickCommands()}
+        {renderTriggers()}
         {renderBatchInputs()}
         {renderEncodingInfo()}
         {renderInfoIcon()}

package/client/components/footer/footer.styl

@@ -38,6 +38,9 @@
   // 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
+.terminal-footer-triggers
+  display flex
+  align-items center
 .batch-input-outer
   position relative
   .bi-full
@@ -61,4 +64,8 @@
       border-radius 4px 4px 0 0
       min-width 360px
 .batch-input-holder
-  width 100px
+  width 100px
+.remote-monitor-bar-on
+  .batch-input-outer.bi-show
+    .bi-full
+      bottom calc(100% + 28px)

package/client/components/layout/layout.jsx

@@ -5,12 +5,15 @@ import {
   splitConfig,
   quickCommandBoxHeight,
   footerHeight,
+  remoteMonitorBarHeight,
   shortcutBarHeight
 } from '../../common/constants'
 import layoutAlg from './layout-alg'
 import calcSessionSize from './session-size-alg'
 import TermSearch from '../terminal/term-search'
 import Footer from '../footer/footer-entry'
+import RemoteMonitorBar from '../remote-monitor/remote-monitor-bar-entry'
+import { isRemoteMonitorBarVisible } from '../remote-monitor/visibility'
 import SessionsWrap from '../session/sessions'
 import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
 import pixed from './pixed'
@@ -32,11 +35,10 @@ export default auto(function Layout (props) {
     const {
       width,
       height,
+      isMobile,
       pinnedQuickCommandBar,
-      // tabsHeight,
       leftSidePanelWidth,
       leftSideBarWidth,
-      // infoPanelPinned,
       pinned,
       rightPanelVisible,
       rightPanelPinned,
@@ -46,47 +48,25 @@ export default auto(function Layout (props) {
       shortcutBarVisible,
       shortcutBarKbOffset
     } = props.store
-    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
-    const l = pinned ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
-    const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
+    const monitorHeight = isRemoteMonitorBarVisible(props.store) ? remoteMonitorBarHeight : 0
+    const h = height - footerHeight - monitorHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
+    const l = pinned && !isMobile ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
+    const r = rightPanelVisible && rightPanelPinned && !isMobile ? rightPanelWidth : 0
     return {
       height: h,
       top: 0,
       left: l,
-      width: width - l - r
+      width: Math.max(0, width - l - r)
     }
   }
 
-  const buildLayoutStyles = () => {
-    const {
-      layout,
-      height,
-      width,
-      pinnedQuickCommandBar,
-      leftSidePanelWidth,
-      leftSideBarWidth,
-      rightPanelVisible,
-      rightPanelPinned,
-      rightPanelWidth,
-      pinned,
-      shortcutBarVisible,
-      shortcutBarKbOffset
-    } = props.store
-    const l = pinned ? leftSidePanelWidth : 0
-    const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
-    // account for the far-left icon bar (sidebarWidth - 1px border on desktop;
-    // 0 when the bar is hidden on mobile)
-    const w = width - l - r - (leftSideBarWidth > 0 ? leftSideBarWidth - 1 : 0)
-    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0)
-    return layoutAlg(layout, w, h)
-  }
   const layoutSize = calcLayoutStyle()
   const {
     width,
     height
   } = layoutSize
   const pixedLayoutStyle = pixed(layoutSize)
-  const styles = buildLayoutStyles(conf, layout)
+  const styles = layoutAlg(layout, width, height)
   const layoutProps = {
     layout,
     ...styles,
@@ -102,7 +82,14 @@ export default auto(function Layout (props) {
     const { tabs } = store
     const tabsBatch = {}
     for (const tab of tabs) {
-      const { batch } = tab
+      let { batch } = tab
+      // Guard against tabs with missing/invalid batch (e.g. created by
+      // MCP/AI operations before sanitization). Route them to pane 0
+      // instead of crashing or disappearing.
+      batch = Number(batch)
+      if (!Number.isInteger(batch) || batch < 0 || batch >= sizes.length) {
+        batch = 0
+      }
       if (!tabsBatch[batch]) {
         tabsBatch[batch] = []
       }
@@ -207,6 +194,11 @@ export default auto(function Layout (props) {
       key='QuickCommandsFooterBox'
       {...qmProps}
     />,
+    <RemoteMonitorBar
+      key='RemoteMonitorBar'
+      store={store}
+      style={{ left: layoutSize.left, width, height: remoteMonitorBarHeight }}
+    />,
     <Footer
       key='Footer'
       {...footerProps}

package/client/components/layout/pixed.js

@@ -1,4 +1,7 @@
 export default function pixed (style) {
+  if (!style || typeof style !== 'object') {
+    return {}
+  }
   return Object.keys(style).reduce((prev, k) => {
     const v = style[k]
     return {

package/client/components/main/main.jsx

@@ -1,5 +1,5 @@
 import { auto } from 'manate/react'
-import { useEffect } from 'react'
+import { lazy, Suspense, useEffect } from 'react'
 import Layout from '../layout/layout'
 import FileInfoModal from '../sftp/file-info-modal'
 import FileCompareModal from '../sftp/file-compare-modal'
@@ -10,7 +10,6 @@ import Sidebar from '../sidebar'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
-import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../file-transfer/conflict-resolve.jsx'
 import TransferQueue from '../file-transfer/transfer-queue'
@@ -19,18 +18,21 @@ import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
-import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
+import {
+  footerHeight,
+  isMac,
+  isWin,
+  remoteMonitorBarHeight,
+  textTerminalBgValue
+} from '../../common/constants'
 import { isAIDisabled } from '../../common/ai-feature'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
-import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import AIChat from '../ai/ai-chat-entry'
-import AIConfigModal from '../ai/ai-config-modal'
-import Opacity from '../common/opacity'
 import MoveItemModal from '../tree-list/move-item-modal'
 import InputContextMenu from '../common/input-context-menu'
 import WorkspaceSaveModal from '../tabs/workspace-save-modal'
@@ -44,9 +46,17 @@ import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 import TerminalInfo from '../terminal-info/terminal-info-entry'
 import ShortcutBarEntry from '../terminal/shortcut-bar-entry'
+import LazyBoundary from '../common/lazy-boundary'
+import { isRemoteMonitorBarVisible } from '../remote-monitor/visibility'
 import '../../common/fs.js'
 import './term-fullscreen.styl'
 
+const Resolutions = lazy(() => import('../rdp/resolution-edit'))
+const InfoModal = lazy(() => import('../sidebar/info-modal.jsx'))
+const AIConfigModal = lazy(() => import('../ai/ai-config-modal'))
+// window opacity is electron-only: lazy so the web app never loads the chunk
+const Opacity = lazy(() => import('../common/opacity'))
+
 export default auto(function Index (props) {
   useEffect(() => {
     const { store } = props
@@ -86,6 +96,30 @@ export default auto(function Index (props) {
     store.checkPendingDeepLink()
   }, [])
 
+  // Track the actual input modality rather than a static capability probe:
+  // a touch-capable laptop is a mouse machine until a real touch happens,
+  // and a tablet stays touch even though it can also pair a mouse. Stored in
+  // `store.isTouchDevice` (seeded false — no upfront probe, which only says
+  // the screen *can* be touched, not what the user operates with); the
+  // `is-touch-device` class drives always-visible hover-only action icons, so
+  // it must follow the device the user is actually operating.
+  useEffect(() => {
+    const { store } = window
+    const handlePointer = (e) => {
+      if (e.pointerType === 'mouse') {
+        store.isTouchDevice = false
+      } else if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+        store.isTouchDevice = true
+      }
+    }
+    document.addEventListener('pointerdown', handlePointer)
+    document.addEventListener('pointermove', handlePointer)
+    return () => {
+      document.removeEventListener('pointerdown', handlePointer)
+      document.removeEventListener('pointermove', handlePointer)
+    }
+  }, [])
+
   const { store } = props
   const {
     configLoaded,
@@ -105,6 +139,7 @@ export default auto(function Index (props) {
     widgetInstances
   } = store
   const upgradeInfo = deepCopy(store.upgradeInfo)
+  const remoteMonitorBarVisible = isRemoteMonitorBarVisible(store)
   const cls = classnames({
     loaded: configLoaded,
     'not-webapp': !window.et.isWebApp,
@@ -122,12 +157,15 @@ export default auto(function Index (props) {
     'fs-with-footer': fullscreen && store.inActiveTerminal,
     'is-main': !isSecondInstance,
     'is-mobile': store.isMobile,
-    'is-desktop': !store.isMobile
+    'is-desktop': !store.isMobile,
+    'is-touch-device': store.isTouchDevice,
+    'remote-monitor-bar-on': remoteMonitorBarVisible
   })
   const ext1 = {
     className: cls,
     style: {
-      '--left-side-bar-width': store.leftSideBarWidth + 'px'
+      '--left-side-bar-width': store.leftSideBarWidth + 'px',
+      '--footer-stack-height': `${footerHeight + (remoteMonitorBarVisible ? remoteMonitorBarHeight : 0)}px`
     }
   }
   // Get active tab IDs
@@ -217,20 +255,6 @@ export default auto(function Index (props) {
     title: rightPanelTitle,
     rightPanelTab
   }
-  const terminalInfoProps = {
-    rightPanelTab,
-    ...deepCopy(store.terminalInfoProps),
-    ...pick(
-      config,
-      [
-        'host',
-        'port',
-        'saveTerminalLogToFile',
-        'terminalInfos',
-        'sessionLogPath'
-      ]
-    )
-  }
   const sshConfigProps = {
     ...pick(store, [
       'settingTab',
@@ -268,13 +292,23 @@ export default auto(function Index (props) {
           {...confsCss}
           configLoaded={configLoaded}
         />
-        <Opacity opacity={config.opacity} />
+        {window.et.isWebApp
+          ? null
+          : (
+            <LazyBoundary>
+              <Suspense fallback={null}>
+                <Opacity opacity={config.opacity} />
+              </Suspense>
+            </LazyBoundary>
+            )}
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
         />
         <CustomCss customCss={config.customCss} configLoaded={configLoaded} />
-        <TextEditor />
+        {store.textEditorRequested && (
+          <TextEditor />
+        )}
         <UpdateCheck
           skipVersion={config.skipVersion}
           upgradeInfo={upgradeInfo}
@@ -300,11 +334,23 @@ export default auto(function Index (props) {
           config={config}
         />
         <Remote2RemoteHandlers />
-        <Resolutions {...resProps} />
-        <InfoModal {...infoModalProps} />
+        {openResolutionEdit && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <Resolutions {...resProps} />
+            </Suspense>
+          </LazyBoundary>
+        )}
+        {store.showInfoModal && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <InfoModal {...infoModalProps} />
+            </Suspense>
+          </LazyBoundary>
+        )}
         <RightSidePanel {...rightPanelProps}>
           {!isAIDisabled() && <AIChat {...aiChatProps} />}
-          <TerminalInfo key={store.activeTabId} {...terminalInfoProps} />
+          <TerminalInfo key={store.activeTabId} store={store} {...deepCopy(store.terminalInfoProps)} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs
@@ -321,7 +367,13 @@ export default auto(function Index (props) {
         <BatchOpRunner />
         <ImportProgress />
         <ShortcutBarEntry store={store} />
-        {!isAIDisabled() && <AIConfigModal store={store} />}
+        {!isAIDisabled() && store.showAIConfigModal && (
+          <LazyBoundary>
+            <Suspense fallback={null}>
+              <AIConfigModal store={store} />
+            </Suspense>
+          </LazyBoundary>
+        )}
         <UnixTimestampTooltip />
       </div>
     </ConfigProvider>

package/client/components/main/term-fullscreen.styl

@@ -5,6 +5,7 @@
   .terminal-control
   .qm-wrap-tooltip
   .main-footer
+  .remote-monitor-bar
   .session-v-info
     display none
   // Mobile tabs carry the extra .mobile-tabs class, and mobile.styl uses
@@ -40,11 +41,16 @@
 // visible; the session shrinks to sit on top of the footer. RDP/VNC/Spice
 // fullscreen stays footer-less — inActiveTerminal is false for those tabs, so
 // the fs-with-footer class is absent there.
-// 36px matches footerHeight / the .main-footer height in footer.styl.
+// --footer-stack-height includes the 36px footer and the optional monitor row.
 .fullscreen.fs-with-footer
   .main-footer
     display block
     left 0 !important
+  &.remote-monitor-bar-on
+    .remote-monitor-bar
+      display flex
+      left 0 !important
+      width 100% !important
   .qm-wrap-tooltip
     display block
     left 0 !important
@@ -53,10 +59,10 @@
     display none
   .session-wrap.session-current
     .term-wrap
-      height calc(100% - 36px - var(--shortcut-bar-h, 0px)) !important
+      height calc(100% - var(--footer-stack-height, 36px) - var(--shortcut-bar-h, 0px) - var(--shortcut-bar-kb-offset, 0px)) !important
   // pinned quick-command bar (180px, same as quickCommandBoxHeight) sits
   // between terminal and footer — reserve its space too
   &.qm-pinned
     .session-wrap.session-current
       .term-wrap
-        height calc(100% - 36px - 180px - var(--shortcut-bar-h, 0px)) !important
+        height calc(100% - var(--footer-stack-height, 36px) - 180px - var(--shortcut-bar-h, 0px) - var(--shortcut-bar-kb-offset, 0px)) !important

package/client/components/quick-commands/qm.styl

@@ -9,7 +9,8 @@
   right 0
   z-index 89
   height auto
-  bottom 36px
+
+  bottom var(--footer-stack-height, 36px)
 
 .qm-pinned
   .qm-wrap-tooltip
@@ -101,4 +102,4 @@
     > .drag
       align-self flex-start
     > button:last-child
-      align-self flex-end
+      align-self flex-end

package/client/components/rdp/file-transfer.js

@@ -7,6 +7,7 @@ import { getLocalFileInfo } from '../sftp/file-read'
 import { osResolve } from '../../common/resolve'
 import { filesize } from 'filesize'
 import sanitizeFilename from '../../common/sanitize-filename'
+import { chooseSaveDirectory } from '../../common/choose-save-folder'
 
 const LOG_PREFIX = '[RDP-FILE-TRANSFER]'
 
@@ -231,23 +232,22 @@ export class FileTransferManager {
 
   async handleFileDownload (fileInfo) {
     try {
-      const savePath = await window.api.openDialog({
+      const savePath = await chooseSaveDirectory({
         title: `Save ${fileInfo.name}`,
         message: `Choose where to save ${fileInfo.name}`,
-        properties: ['openDirectory', 'createDirectory'],
         noBrowserTransfer: true
       }).catch((err) => {
         this.log(`Save dialog error: ${err.message}`, 'error')
         return false
       })
 
-      if (!savePath || !savePath.length) {
+      if (!savePath) {
         this.log('Download cancelled by user', 'info')
         return
       }
 
       const safeName = sanitizeFilename(fileInfo.name)
-      const fullPath = osResolve(savePath[0], safeName)
+      const fullPath = osResolve(savePath, safeName)
 
       const fd = await new Promise((resolve, reject) => {
         window.fs.open(fullPath, O_WRONLY | O_CREAT | O_TRUNC, (err, fd) => {