@electerm/electerm-react 5.3.26 → 5.5.9

package/client/components/footer/cmd-history.jsx

@@ -3,13 +3,24 @@
  */
 
 import { useState, useEffect } from 'react'
-import { Button, Empty, Popover } from 'antd'
+import { Button, Empty, Popover, Dropdown } from 'antd'
 import { auto } from 'manate/react'
 import SwitchLabel from '../common/switch'
 import { copy } from '../../common/clipboard'
-import { HistoryOutlined, DeleteOutlined, CopyOutlined, UnorderedListOutlined } from '@ant-design/icons'
+import {
+  HistoryOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  UnorderedListOutlined,
+  MoreOutlined,
+  PlusOutlined,
+  CodeOutlined
+} from '@ant-design/icons'
 import InputAutoFocus from '../common/input-auto-focus'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+import QuickCommandCreateModal from '../quick-commands/quick-command-create-modal'
+import MultiTabRunModal from './multi-tab-run-modal'
+import classNames from 'classnames'
 import './cmd-history.styl'
 
 const e = window.translate
@@ -20,6 +31,10 @@ export default auto(function CmdHistory (props) {
   const [sortByFrequency, setSortByFrequency] = useState(() => {
     return getItemJSON(SORT_BY_FREQ_KEY, false)
   })
+  // cmd of the item whose action menu is open / being acted on
+  const [menuOpenCmd, setMenuOpenCmd] = useState('')
+  const [quickCommandCmd, setQuickCommandCmd] = useState('')
+  const [multiTabCmd, setMultiTabCmd] = useState('')
   const { terminalCommandHistory } = props.store
 
   useEffect(() => {
@@ -30,11 +45,6 @@ export default auto(function CmdHistory (props) {
     window.store.runCmdFromHistory(cmd)
   }
 
-  function handleDeleteCommand (cmd, ev) {
-    ev.stopPropagation()
-    window.store.deleteCmdHistory(cmd)
-  }
-
   function handleCopyCommand (cmd, ev) {
     ev.stopPropagation()
     copy(cmd)
@@ -44,6 +54,46 @@ export default auto(function CmdHistory (props) {
     window.store.clearAllCmdHistory()
   }
 
+  function handleMenuAction (key, cmd) {
+    if (key === 'delete') {
+      window.store.deleteCmdHistory(cmd)
+    } else if (key === 'quickCommand') {
+      setQuickCommandCmd(cmd)
+    } else if (key === 'multiTab') {
+      window.store.filterBatchInputSelectedTabIds()
+      setMultiTabCmd(cmd)
+    }
+  }
+
+  function getMenuProps (cmd) {
+    return {
+      items: [
+        {
+          key: 'delete',
+          icon: <DeleteOutlined />,
+          label: e('del'),
+          danger: true
+        },
+        {
+          key: 'quickCommand',
+          icon: <PlusOutlined />,
+          label: e('addQuickCommands')
+        },
+        {
+          key: 'multiTab',
+          icon: <CodeOutlined />,
+          label: e('runInAllTerminals')
+        }
+      ],
+      onClick: ({ key, domEvent }) => {
+        // the menu renders in a portal but React events still bubble through
+        // the row, which would run the command
+        domEvent.stopPropagation()
+        handleMenuAction(key, cmd)
+      }
+    }
+  }
+
   function filterArray (array, keyword) {
     if (!keyword) {
       return array
@@ -76,34 +126,46 @@ export default auto(function CmdHistory (props) {
         />
       )
     }
-    return filtered.map((item, index) => (
-      <div
-        key={index}
-        className='cmd-history-item'
-        onClick={() => handleRunCommand(item.cmd)}
-      >
-        <span className='cmd-history-item-text' title={item.cmd}>{item.cmd}</span>
-        <div className='cmd-history-item-actions'>
-          <span className='cmd-history-item-count' title={e('count') + ': ' + item.count}>
-            {item.count}
-          </span>
-          <Button
-            type='text'
-            size='small'
-            icon={<CopyOutlined />}
-            className='cmd-history-item-copy'
-            onClick={(ev) => handleCopyCommand(item.cmd, ev)}
-          />
-          <Button
-            type='text'
-            size='small'
-            icon={<DeleteOutlined />}
-            className='cmd-history-item-delete'
-            onClick={(ev) => handleDeleteCommand(item.cmd, ev)}
-          />
+    return filtered.map((item, index) => {
+      const cls = classNames(
+        'cmd-history-item',
+        { 'menu-open': menuOpenCmd === item.cmd }
+      )
+      return (
+        <div
+          key={index}
+          className={cls}
+          onClick={() => handleRunCommand(item.cmd)}
+        >
+          <span className='cmd-history-item-text' title={item.cmd}>{item.cmd}</span>
+          <div className='cmd-history-item-actions'>
+            <span className='cmd-history-item-count' title={e('count') + ': ' + item.count}>
+              {item.count}
+            </span>
+            <Button
+              type='text'
+              size='small'
+              icon={<CopyOutlined />}
+              className='cmd-history-item-copy'
+              onClick={(ev) => handleCopyCommand(item.cmd, ev)}
+            />
+            <Dropdown
+              menu={getMenuProps(item.cmd)}
+              trigger={['click']}
+              onOpenChange={(open) => setMenuOpenCmd(open ? item.cmd : '')}
+            >
+              <Button
+                type='text'
+                size='small'
+                icon={<MoreOutlined />}
+                className='cmd-history-item-more'
+                onClick={(ev) => ev.stopPropagation()}
+              />
+            </Dropdown>
+          </div>
         </div>
-      </div>
-    ))
+      )
+    })
   }
 
   function renderHeader () {
@@ -148,16 +210,41 @@ export default auto(function CmdHistory (props) {
   )
 
   return (
-    <Popover
-      content={content}
-      trigger='click'
-      placement='topLeft'
-    >
-      <Button
-        size='small'
-        type='text'
-        icon={<HistoryOutlined />}
-      />
-    </Popover>
+    <>
+      <Popover
+        content={content}
+        trigger='click'
+        placement='topLeft'
+      >
+        <Button
+          size='small'
+          type='text'
+          icon={<HistoryOutlined />}
+        />
+      </Popover>
+      {
+        quickCommandCmd
+          ? (
+            <QuickCommandCreateModal
+              key={quickCommandCmd}
+              store={props.store}
+              command={quickCommandCmd}
+              onClose={() => setQuickCommandCmd('')}
+            />
+            )
+          : null
+      }
+      {
+        multiTabCmd
+          ? (
+            <MultiTabRunModal
+              store={props.store}
+              cmd={multiTabCmd}
+              onClose={() => setMultiTabCmd('')}
+            />
+            )
+          : null
+      }
+    </>
   )
 })

package/client/components/footer/cmd-history.styl

@@ -4,7 +4,6 @@
   overflow hidden
   display flex
   flex-direction column
-
 .cmd-history-search
   flex-shrink 0
   position sticky
@@ -46,6 +45,13 @@
   cursor pointer
   &:hover
     background var(--main-lighter)
+  // keep the row actions visible while its action menu is open, otherwise the
+  // menu trigger would be hidden (display none) and the popup would lose its
+  // anchor when the mouse moves onto the menu
+  &.menu-open
+    background var(--main-lighter)
+    .cmd-history-item-actions
+      display flex
 
 .cmd-history-item-text
   overflow hidden
@@ -68,14 +74,46 @@
   .cmd-history-item:hover &
     display flex
 
-.cmd-history-item-delete
+.cmd-history-item-more
   cursor pointer
   padding 2px 4px
-  &:hover
-    color red
 
 .cmd-history-item-copy
   cursor pointer
   padding 2px 4px
   &:hover
     color blue
+
+.multi-tab-run-cmd
+  font-size 12px
+  padding 6px 8px
+  margin-bottom 10px
+  border-radius 4px
+  background var(--main-lighter)
+  word-break break-all
+  max-height 96px
+  overflow-y auto
+
+// Narrow screens: the popup is aligned to the history trigger (placement
+// topLeft) and is 324px wide, while the footer trigger sits within the first
+// ~96px of the screen (43px icon bar + footer margin + the icons before it), so
+// below ~420px the popup's right edge would fall outside the window. antd's
+// auto-shift does not correct it, so pin the popup to the viewport instead.
+// Matched by its content: the popup lives in a body-level portal, so neither
+// the component tree nor an antd popup class reaches it reliably.
+@media (max-width: 420px)
+  .ant-popover:has(.cmd-history-popover-content)
+    // rc-trigger writes `inset: auto auto 40px <trigger left>px` inline
+    left 0px !important
+    // pinned to the viewport, the arrow no longer points at the trigger
+    .ant-popover-arrow
+      display none
+  .cmd-history-popover-content
+    // popup = content + 24px container padding; keep 8px on both sides
+    width 100%
+
+// Touch devices have no hover, so the row actions (count / copy / ⋯ menu)
+// would never be reachable — feature-detect instead of sniffing the UA
+@media (pointer: coarse)
+  .cmd-history-item-actions
+    display flex

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/footer/multi-tab-run-modal.jsx

@@ -0,0 +1,83 @@
+/**
+ * Run one command (usually picked from the command history) in several
+ * terminals at once.
+ *
+ * Reuses the footer batch input tab panel (`TabSelectList`) for picking the
+ * target terminals, and the same selection state + `batchInput` terminal API
+ * the footer batch input uses, so both entry points stay consistent.
+ */
+
+import { auto } from 'manate/react'
+import {
+  Button,
+  Modal
+} from 'antd'
+import { TabSelectList } from './tab-select'
+import { refs } from '../common/ref'
+import {
+  terminalWebType,
+  terminalRdpType,
+  terminalVncType
+} from '../../common/constants'
+
+const e = window.translate
+
+export default auto(function MultiTabRunModal (props) {
+  const { store, cmd, onClose } = props
+  const selectedTabIds = store.batchInputSelectedTabIds
+  const tabs = store.tabs.filter(tab => {
+    return tab.type !== terminalWebType &&
+      tab.type !== terminalRdpType &&
+      tab.type !== terminalVncType
+  }).sort((a, b) => {
+    // current tab goes first
+    if (a.id === store.activeTabId) return -1
+    if (b.id === store.activeTabId) return 1
+    return 0
+  })
+  const listProps = {
+    tabs,
+    activeTabId: store.activeTabId,
+    selectedTabIds,
+    onSelect: store.onSelectBatchInputSelectedTabId,
+    onSelectAll: store.selectAllBatchInputTabs,
+    onSelectNone: store.selectNoneBatchInputTabs
+  }
+  function handleRun () {
+    selectedTabIds.map(id => {
+      return refs.get('term-' + id)
+    }).forEach(term => {
+      term?.batchInput(cmd)
+    })
+    store.addCmdHistory(cmd)
+    onClose()
+  }
+  return (
+    <Modal
+      open
+      title={e('runInAllTerminals')}
+      onCancel={onClose}
+      destroyOnHidden
+      width={520}
+      footer={[
+        <Button
+          key='cancel'
+          onClick={onClose}
+        >
+          {e('cancel')}
+        </Button>,
+        <Button
+          key='run'
+          type='primary'
+          disabled={!selectedTabIds.length}
+          onClick={handleRun}
+        >
+          {e('ok')}
+        </Button>
+      ]}
+    >
+      <div className='multi-tab-run-cmd'>{cmd}</div>
+      <TabSelectList {...listProps} />
+    </Modal>
+  )
+})

package/client/components/footer/tab-select.jsx

@@ -6,15 +6,28 @@ import {
   CodeOutlined
 } from '@ant-design/icons'
 
-export default function TabSelect (props) {
-  const { selectedTabIds, tabs, activeTabId } = props
+/**
+ * The multi terminal selection panel: select-all/none plus one toggle button
+ * per terminal tab.
+ * Extracted so it can be reused outside the batch input popover (e.g. run a
+ * command from the history panel in several terminals at once).
+ */
+export function TabSelectList (props) {
+  const {
+    selectedTabIds = [],
+    tabs = [],
+    activeTabId,
+    onSelect,
+    onSelectAll,
+    onSelectNone
+  } = props
   function renderTabs () {
     return tabs.map(tab => {
       const selected = selectedTabIds.includes(tab.id)
       const itemProps = {
         tab,
         selected,
-        onSelect: window.store.onSelectBatchInputSelectedTabId,
+        onSelect,
         id: tab.id,
         isCurrent: tab.id === activeTabId
       }
@@ -26,12 +39,6 @@ export default function TabSelect (props) {
       )
     })
   }
-  function onSelectAll () {
-    window.store.selectAllBatchInputTabs()
-  }
-  function onSelectNone () {
-    window.store.selectNoneBatchInputTabs()
-  }
   function renderBtns () {
     return (
       <div className='pd1t pd2b font12'>
@@ -50,17 +57,27 @@ export default function TabSelect (props) {
       </div>
     )
   }
-  function renderContent () {
-    return (
-      <div className='pd1x alignright'>
-        {renderBtns()}
-        {renderTabs()}
-      </div>
-    )
+  return (
+    <div className='pd1x alignright'>
+      {renderBtns()}
+      {renderTabs()}
+    </div>
+  )
+}
+
+export default function TabSelect (props) {
+  const { selectedTabIds, tabs, activeTabId } = props
+  const listProps = {
+    selectedTabIds,
+    tabs,
+    activeTabId,
+    onSelect: window.store.onSelectBatchInputSelectedTabId,
+    onSelectAll: window.store.selectAllBatchInputTabs,
+    onSelectNone: window.store.selectNoneBatchInputTabs
   }
   return (
     <Popover
-      content={renderContent()}
+      content={<TabSelectList {...listProps} />}
       trigger='click'
     >
       <span className='pointer iblock pd1x'>

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 {