@electerm/electerm-react 5.3.26 → 5.5.6

package/client/store/tab.js

@@ -17,6 +17,13 @@ import generate from '../common/id-with-stamp'
 import uid from '../common/uid'
 import newTerm, { updateCount } from '../common/new-terminal.js'
 import { action } from 'manate'
+import { shouldCaptureSshReloadState } from '../components/terminal/ssh-reload-state.js'
+
+function captureSshSessionState (tab, config) {
+  return shouldCaptureSshReloadState(tab, config)
+    ? refs.get(`term-${tab.id}`)?.getReloadState?.()
+    : undefined
+}
 
 export default Store => {
   Store.prototype.nextTabCount = function () {
@@ -96,6 +103,10 @@ export default Store => {
     const oldTab = tabs[index]
     const oldBatch = oldTab.batch
 
+    // Reload state is captured only for an SSH refresh/reconnect. Closing a
+    // tab goes through removeTabs and never reaches this code path.
+    const reloadState = captureSshSessionState(oldTab, store.config)
+
     // Create copy of old tab with new ID
     const newTab = {
       ...oldTab,
@@ -103,6 +114,10 @@ export default Store => {
       id: generate(), // Need to create new ID
       status: statusMap.processing // Reset status
     }
+    delete newTab._reloadState
+    if (reloadState) {
+      newTab._reloadState = reloadState
+    }
 
     // Add new tab at next index
     tabs.splice(index + 1, 0, newTab)
@@ -153,6 +168,7 @@ export default Store => {
     }
 
     const sourceTab = tabs[targetIndex]
+    const sessionState = captureSshSessionState(sourceTab, store.config)
     const duplicatedTab = {
       ...deepCopy(sourceTab),
       id: generate(),
@@ -160,6 +176,10 @@ export default Store => {
       status: statusMap.processing,
       isTransporting: undefined
     }
+    delete duplicatedTab._reloadState
+    if (sessionState) {
+      duplicatedTab._reloadState = sessionState
+    }
 
     // Insert the duplicated tab after the source tab
     tabs.splice(targetIndex + 1, 0, duplicatedTab)
@@ -361,7 +381,19 @@ export default Store => {
     const { store } = window
     const { tabs } = store
     newTab.tabCount = store.nextTabCount()
-    newTab.batch = batch ?? newTab.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch
+    // Sanitize batch: MCP/AI callers may pass a missing, string, or
+    // out-of-range batch which would crash Sessions (sizes[batch]
+    // undefined). Clamp to a valid pane index for the current layout.
+    let batchNum = batch ?? newTab.batch ?? window.openTabBatch ?? window.store.currentLayoutBatch
+    batchNum = Number(batchNum)
+    const maxBatch = (splitConfig[store.layout] && splitConfig[store.layout].children) || 1
+    if (!Number.isInteger(batchNum) || batchNum < 0 || batchNum >= maxBatch) {
+      batchNum = Number(window.store.currentLayoutBatch) || 0
+      if (!Number.isInteger(batchNum) || batchNum < 0 || batchNum >= maxBatch) {
+        batchNum = 0
+      }
+    }
+    newTab.batch = batchNum
     if (!newTab.id) {
       newTab.id = generate()
     }
@@ -376,7 +408,6 @@ export default Store => {
     } else {
       tabs.push(newTab)
     }
-    const batchNum = newTab.batch
     store[`activeTabId${batchNum}`] = newTab.id
     store.activeTabId = newTab.id
     store.currentLayoutBatch = batchNum
@@ -393,7 +424,8 @@ export default Store => {
     'execLinuxArgs',
     'setEnv',
     'runScripts',
-    'interactiveValues'
+    'interactiveValues',
+    'triggers'
   ]
 
   Store.prototype.ipcOpenTab = function (parsed) {
@@ -454,12 +486,17 @@ export default Store => {
     const defaultStatus = statusMap.processing
     const { layout, currentLayoutBatch } = store
     const ntb = deepCopy(tab)
+    const sessionState = captureSshSessionState(tab, store.config)
     Object.assign(ntb, {
       id: generate(),
       status: defaultStatus,
       isTransporting: undefined,
       pane: paneMap.terminal
     })
+    delete ntb._reloadState
+    if (sessionState) {
+      ntb._reloadState = sessionState
+    }
     let maxBatch = splitConfig[layout].children
     if (maxBatch < 2) {
       maxBatch = 2
@@ -548,6 +585,7 @@ export default Store => {
       'sshTunnelResults',
       'displayRaw',
       'autoReConnect',
+      '_reloadState',
       'isPinned'
     ]
     const { history } = store

package/client/store/trigger.js

@@ -0,0 +1,118 @@
+/**
+ * declarative auto triggers (ZocRespond style) related functions
+ * global triggers live in store.triggers (persisted via db watch),
+ * bookmark triggers live on bookmark/tab `triggers` field
+ */
+
+import { settingMap } from '../common/constants'
+import { refs } from '../components/common/ref'
+import { validateTriggers } from '../components/terminal/automation/trigger-engine.js'
+
+export function normalizeTrigger (t = {}) {
+  return {
+    id: t.id || '',
+    name: t.name || '',
+    enabled: t.enabled !== false,
+    match: {
+      type: t.match?.type === 'regex' ? 'regex' : 'text',
+      value: t.match?.value || '',
+      caseSensitive: !!t.match?.caseSensitive
+    },
+    action: {
+      type: t.action?.type === 'notify' ? 'notify' : 'send',
+      value: t.action?.value || ''
+    },
+    sendEnter: t.sendEnter !== false,
+    mode: ['repeat', 'once', 'cooldown'].includes(t.mode) ? t.mode : 'cooldown',
+    cooldownMs: Number.isFinite(+t.cooldownMs) ? +t.cooldownMs : 500
+  }
+}
+
+export default Store => {
+  Store.prototype.addTrigger = function (trigger) {
+    window.store.addItem(normalizeTrigger(trigger), settingMap.triggers)
+    window.store.refreshAllTriggers()
+  }
+
+  Store.prototype.editTrigger = function (id, update) {
+    window.store.editItem(id, normalizeTrigger({ ...window.store.triggers.find(t => t.id === id), ...update }), settingMap.triggers)
+    window.store.refreshAllTriggers()
+  }
+
+  Store.prototype.delTrigger = function ({ id }) {
+    window.store.delItem({ id }, settingMap.triggers)
+    window.store.refreshAllTriggers()
+  }
+
+  Store.prototype.setTriggers = function (list) {
+    const arr = (list || []).map(normalizeTrigger)
+    const errors = validateTriggers(arr)
+    if (errors.length) {
+      return errors
+    }
+    window.store.setItems(settingMap.triggers, arr)
+    window.store.refreshAllTriggers()
+    return []
+  }
+
+  // effective triggers for a tab: predefined (global) triggers resolved with
+  // per-session on/off overrides + tab session/bookmark triggers.
+  // Only predefined triggers persist (db, synced); bookmark triggers stay on
+  // the bookmark record; session temp rules live on the in-memory tab only.
+  Store.prototype.getEffectiveTriggers = function (tab) {
+    const overrides = (tab && tab.triggerOverrides) || {}
+    const globals = (window.store.triggers || [])
+      .filter(t => t && t.match && t.match.value)
+      .map(t => {
+        const on = t.id in overrides ? overrides[t.id] : t.enabled !== false
+        return normalizeTrigger({ ...t, enabled: on })
+      })
+    const session = (tab && tab.triggers) || []
+    return [...globals, ...session.map(normalizeTrigger)]
+      .filter(t => t.enabled !== false && t.match.value)
+  }
+
+  // per-session on/off for a predefined trigger (memory only, not persisted)
+  Store.prototype.togglePredefinedTrigger = function (tabId, triggerId, enabled) {
+    const id = tabId || window.store.activeTabId
+    const tab = window.store.tabs.find(t => t.id === id)
+    if (!tab) {
+      return
+    }
+    const overrides = { ...(tab.triggerOverrides || {}) }
+    overrides[triggerId] = !!enabled
+    window.store.updateTab(id, { triggerOverrides: overrides })
+    refs.get('term-' + id)?.refreshTriggers?.()
+  }
+
+  Store.prototype.getSessionTriggers = function (tabId) {
+    const tab = window.store.tabs.find(t => t.id === (tabId || window.store.activeTabId))
+    return (tab && tab.triggers) || []
+  }
+
+  Store.prototype.setSessionTriggers = function (tabId, list) {
+    const id = tabId || window.store.activeTabId
+    const arr = (list || []).map(normalizeTrigger)
+    const errors = validateTriggers(arr.filter(t => t.match.value || t.name))
+    if (errors.length) {
+      return errors
+    }
+    window.store.updateTab(id, { triggers: arr })
+    refs.get('term-' + id)?.refreshTriggers?.()
+    return []
+  }
+
+  Store.prototype.refreshAllTriggers = function () {
+    for (const tab of window.store.tabs || []) {
+      try {
+        refs.get('term-' + tab.id)?.refreshTriggers?.()
+      } catch (e) {
+        console.debug(e)
+      }
+    }
+  }
+
+  Store.prototype.toggleTriggerSessionModal = function (open = null) {
+    window.store.triggerSessionOpen = open == null ? !window.store.triggerSessionOpen : !!open
+  }
+}

package/client/store/watch.js

@@ -21,6 +21,12 @@ import dataCompare from '../common/data-compare'
 
 export default store => {
   for (const name of dbNamesForWatch) {
+    // ai chat history changes on every streaming tick (200ms polls,
+    // per-chunk agent updates); debounce to coalesce them into one
+    // db write after the stream pauses
+    const schedule = name === 'aiChatHistory'
+      ? func => debounce(func, 1000)
+      : undefined
     window[`watch${name}`] = autoRun(async () => {
       const n = store.getItems(name)
       if (window.migrating) {
@@ -51,10 +57,12 @@ export default store => {
         ...updated.map(item => update(item.id, item, name, false)),
         added.length ? insert(name, added) : Promise.resolve()
       ])
-      await update(
-        `${name}:order`,
-        newOrder
-      )
+      if (orderChanged) {
+        await update(
+          `${name}:order`,
+          newOrder
+        )
+      }
       if (name === 'bookmarks') {
         store.bookmarksMap = new Map(
           n.map(d => [d.id, d])
@@ -73,7 +81,7 @@ export default store => {
         }
       }
       return store[name]
-    })
+    }, schedule)
     window[`watch${name}`].start()
   }
 

package/client/views/index.pug

@@ -23,6 +23,9 @@ html
       }
       .electerm-logo-bg {
         background: transparent 50% 50% no-repeat url("./images/electerm-watermark.png");
+        /* the watermark is 766 x 266; without a size it is cropped on narrow
+           panes (mobile), so scale it down to fit the pane width instead */
+        background-size: min(100%, 766px) auto;
       }
       .morph-shape {
         background: linear-gradient(45deg, #08c 0%, #09c 100%);

package/package.json

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

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

@@ -1,57 +0,0 @@
-/**
- * process cpu/mem activities
- */
-
-import { Table, Tooltip, Popconfirm } from 'antd'
-import { isEmpty } from 'lodash-es'
-import { CloseCircleOutlined, BarsOutlined } from '@ant-design/icons'
-import colsParser from './data-cols-parser'
-
-const e = window.translate
-
-export default function TerminalInfoActivities (props) {
-  const { activities, isRemote, terminalInfos } = props
-  if (isEmpty(activities) || !isRemote || !terminalInfos.includes('activities')) {
-    return null
-  }
-  const col = colsParser(activities[0])
-  col.unshift({
-    dataIndex: 'kill',
-    key: 'kill',
-    title: e('close'),
-    render: (txt, inst) => {
-      return (
-        <Tooltip
-          title={e('close')}
-        >
-          <Popconfirm
-            title={e('close') + ' pid:' + inst.pid + ' ?'}
-            onConfirm={() => props.killProcess(inst.pid)}
-          >
-            <CloseCircleOutlined
-              className='pointer'
-            />
-          </Popconfirm>
-        </Tooltip>
-      )
-    }
-  })
-  const ps = {
-    rowKey: 'pid',
-    dataSource: activities,
-    bordered: true,
-    columns: col,
-    size: 'small',
-    pagination: false,
-    scroll: {
-      y: 180,
-      x: 'max-content'
-    }
-  }
-  return (
-    <div className='terminal-info-section terminal-info-act'>
-      <div className='pd1y bold'><BarsOutlined /> Activities</div>
-      <Table {...ps} />
-    </div>
-  )
-}

package/client/components/terminal-info/data-cols-parser.jsx

@@ -1,54 +0,0 @@
-import { copy } from '../../common/clipboard'
-import filesizeParser from 'filesize-parser'
-import { filesize } from 'filesize'
-
-const valueParserMaps = {
-  size: v => v,
-  used: filesizeParser,
-  avail: filesizeParser,
-  usedPercent: v => parseFloat(v.replace('%', ''))
-}
-
-function valueParse (obj, k) {
-  if (valueParserMaps[k]) {
-    return valueParserMaps[k](obj[k])
-  }
-  return obj[k]
-}
-
-function copyValue (event) {
-  copy(event.target.getAttribute('data-content'))
-}
-
-export default (data) => {
-  return Object.keys(data).map(k => {
-    const rd = (txt) => {
-      // txt is in KB, convert to bytes for filesize function
-      const parsed = parseInt(txt, 10)
-      const r = k === 'mem' ? filesize(Number.isFinite(parsed) ? parsed * 1024 : 0) : txt
-      const itemProps = {
-        className: 'activity-item pointer',
-        'data-content': r,
-        onClick: copyValue
-      }
-      return (
-        <div
-          {...itemProps}
-        >
-          {r}
-        </div>
-      )
-    }
-    return {
-      title: k,
-      dataIndex: k,
-      key: k,
-      sorter: (a, b) => {
-        const va = valueParse(a, k)
-        const vb = valueParse(b, k)
-        return va > vb ? 1 : -1
-      },
-      render: rd
-    }
-  })
-}

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

@@ -1,45 +0,0 @@
-/**
- * disk info
- */
-
-import { Table } from 'antd'
-import { isEmpty } from 'lodash-es'
-import colsParser from './data-cols-parser'
-import { PartitionOutlined } from '@ant-design/icons'
-
-export default function TerminalInfoDisk (props) {
-  const { disks, isRemote, terminalInfos } = props
-  if (isEmpty(disks) || !isRemote || !terminalInfos.includes('disks')) {
-    return null
-  }
-  const col = colsParser(disks[0])
-  disks.sort((a, b) => {
-    const af = a.filesystem || ''
-    const bf = b.filesystem || ''
-    if (af.startsWith('/') && !bf.startsWith('/')) {
-      return -1
-    }
-    if (!af.startsWith('/') && bf.startsWith('/')) {
-      return 1
-    }
-    return 0
-  })
-  const ps = {
-    rowKey: (rec) => `${rec.mount}_${rec.filesystem}`,
-    dataSource: disks,
-    bordered: true,
-    columns: col,
-    size: 'small',
-    pagination: false,
-    scroll: {
-      y: 180,
-      x: 'max-content'
-    }
-  }
-  return (
-    <div className='terminal-info-section terminal-info-disk'>
-      <div className='pd1y bold'><PartitionOutlined /> File system</div>
-      <Table {...ps} />
-    </div>
-  )
-}

package/client/components/terminal-info/format-disks.js

@@ -1,45 +0,0 @@
-/**
- * parse `df` output into disk list
- */
-
-export default function formatDisks (str) {
-  if (!str) {
-    return {
-      disks: []
-    }
-  }
-  const r = str.split('\n')
-    .slice(1)
-    .reduce((acc, s) => {
-      if (!s.trim()) {
-        return acc
-      }
-      const arr = s.trim().split(/ +/)
-      // df wraps long filesystem names (e.g. nfs "host:/very/long/export/path")
-      // onto a second line that starts with spaces and only holds the numeric
-      // columns. Merge such continuation lines back into the previous entry, so
-      // those disks (commonly nfs) are listed instead of dropped.
-      if (/^\s/.test(s) && acc.length) {
-        const prev = acc[acc.length - 1]
-        prev.size = arr[0]
-        prev.used = arr[1]
-        prev.avail = arr[2]
-        prev.usedPercent = arr[3]
-        prev.mount = arr[4]
-        return acc
-      }
-      acc.push({
-        filesystem: arr[0],
-        size: arr[1],
-        used: arr[2],
-        avail: arr[3],
-        usedPercent: arr[4],
-        mount: arr[5]
-      })
-      return acc
-    }, [])
-    .filter(d => d.filesystem && d.mount)
-  return {
-    disks: r
-  }
-}

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

@@ -1,121 +0,0 @@
-/**
- * network info
- */
-
-import { Table } from 'antd'
-import { isEmpty } from 'lodash-es'
-import { useEffect, useState } from 'react'
-import { filesize } from 'filesize'
-import copy from 'json-deep-copy'
-import { ApiOutlined } from '@ant-design/icons'
-
-export default function TerminalInfoDisk (props) {
-  const { network, isRemote, terminalInfos } = props
-  if (isEmpty(network) || !isRemote || !terminalInfos.includes('network')) {
-    return null
-  }
-  const [state, setter] = useState({
-    network: props.network,
-    time: Date.now()
-  })
-  function setState (ext) {
-    setter(s => {
-      return Object.assign({}, s, ext)
-    })
-  }
-  function updateTraffic () {
-    const network = copy(props.network)
-    const keys = Object.keys(network)
-    const net = copy(state.network)
-    const now = Date.now()
-    const { time } = state
-    const diff = (now - time) / 1000
-    for (const k of keys) {
-      const p = network[k]
-      const pv = net[k]
-      if (
-        diff > 0 &&
-        p &&
-        pv &&
-        p.download &&
-        pv.download &&
-        p.download > pv.download
-      ) {
-        p.down = Math.floor((p.download - pv.download) / diff)
-      }
-      if (
-        diff > 0 &&
-        p &&
-        pv &&
-        p.upload &&
-        pv.upload &&
-        p.upload > pv.upload
-      ) {
-        p.up = Math.floor((p.upload - pv.upload) / diff)
-      }
-    }
-    setState({
-      network,
-      time: now
-    })
-  }
-  useEffect(() => {
-    updateTraffic()
-  }, [props.network])
-  if (isEmpty(state)) {
-    return null
-  }
-  const arr = Object.keys(state.network).map(k => {
-    return {
-      name: k,
-      ...state.network[k]
-    }
-  }).sort((a, b) => {
-    const ai = a.name.startsWith('eth') ? 100 : 10
-    const bi = b.name.startsWith('eth') ? 100 : 10
-    if (ai !== bi) {
-      return bi - ai
-    }
-    return a.name > b.name ? 1 : -1
-  })
-  const map = {
-    up: '↑',
-    down: '↓',
-    name: 'name',
-    ip: 'ipv4'
-  }
-  const col = ['name', 'ip', 'up', 'down'].map((k, i) => {
-    return {
-      title: map[k],
-      dataIndex: k,
-      key: k,
-      sorter: (a, b) => {
-        return a[k] > b[k] ? 1 : -1
-      },
-      render: (v) => {
-        if (k === 'up' || k === 'down') {
-          return filesize(Number.isFinite(v) ? v : 0)
-        }
-        return v
-      }
-    }
-  })
-  const ps = {
-    rowKey: 'name',
-    dataSource: arr,
-    bordered: true,
-    size: 'small',
-    columns: col,
-    pagination: false,
-    scroll: {
-      y: 180,
-      x: 'max-content'
-    }
-  }
-  return (
-    <div className='terminal-info-section terminal-info-network'>
-      <div className='pd1y bold'><ApiOutlined /> Network</div>
-      <Table {...ps} />
-    </div>
-  )
-}