@electerm/electerm-react 5.3.15 → 5.5.6

package/client/components/triggers/trigger-setting-list.jsx

@@ -0,0 +1,89 @@
+/**
+ * Trigger list for the settings panel (left col), follows quick commands list.
+ */
+import List from '../setting-panel/list'
+import { PlusOutlined, CopyOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import highlight from '../common/highlight'
+import deepCopy from 'json-deep-copy'
+import uid from '../../common/uid'
+import TriggerTransport from './trigger-transport.jsx'
+
+const e = window.translate
+
+export default class TriggerSettingList extends List {
+  del = (item, e) => {
+    e.stopPropagation()
+    this.props.store.delTrigger(item)
+  }
+
+  onClickItem = (item) => {
+    this.props.onClickItem(item)
+  }
+
+  duplicateItem = (e, item) => {
+    e.stopPropagation()
+    const copy = deepCopy(item)
+    copy.id = uid()
+    copy.name = (item.name || 'Unnamed') + ' (copy)'
+    window.store.addTrigger(copy)
+  }
+
+  renderDuplicateBtn = (item) => {
+    if (!item.id) {
+      return null
+    }
+    return (
+      <CopyOutlined
+        title={e('duplicate')}
+        className='pointer list-item-duplicate'
+        onClick={(e) => this.duplicateItem(e, item)}
+      />
+    )
+  }
+
+  renderItem = (item) => {
+    if (!item) {
+      return null
+    }
+    const { activeItemId } = this.props
+    const { name, id } = item
+    const cls = classnames(
+      'item-list-unit',
+      {
+        active: activeItemId === id
+      }
+    )
+    let title = name || 'Unnamed'
+    title = highlight(
+      title,
+      this.state.keyword
+    )
+    return (
+      <div
+        key={id}
+        className={cls}
+        onClick={() => this.onClickItem(item)}
+      >
+        <div className='elli pd1y pd2x' title={name}>
+          {
+            !id
+              ? <PlusOutlined className='mg1r' />
+              : null
+          }
+          {title}
+        </div>
+        {this.renderDuplicateBtn(item)}
+        {this.renderDelBtn(item)}
+      </div>
+    )
+  }
+
+  renderTransport = () => {
+    return (
+      <TriggerTransport
+        store={this.props.store}
+      />
+    )
+  }
+}

package/client/components/triggers/trigger-transport.jsx

@@ -0,0 +1,60 @@
+/**
+ * Trigger import/export, follows quick command transport.
+ */
+import BookmarkTransport from '../tree-list/bookmark-transport'
+import download from '../../common/download'
+import time from '../../common/time'
+import { runImportTask } from '../../common/import-task'
+import { normalizeTrigger } from '../../store/trigger'
+import { validateTriggers } from '../terminal/automation/trigger-engine'
+
+const e = window.translate
+
+export default class TriggerTransport extends BookmarkTransport {
+  name = 'triggers'
+
+  beforeUpload = async (file) => {
+    const { store } = this.props
+    const txt = file.fileContent !== undefined
+      ? file.fileContent
+      : await window.fs.readFile(file.filePath)
+    try {
+      const arr = JSON.parse(txt).map(normalizeTrigger)
+      const errors = validateTriggers(arr)
+      if (errors.length) {
+        throw new Error(errors[0])
+      }
+      const state = store[this.name]
+      const existing = new Set(state.map(v => v.id))
+      const fresh = arr.filter(t => !existing.has(t.id))
+      if (!fresh.length) {
+        return false
+      }
+      await runImportTask({
+        title: e('import'),
+        batch: 200,
+        stopWatchers: [this.name],
+        steps: [
+          {
+            label: e('triggers'),
+            items: fresh,
+            process: (chunk) => {
+              state.push(...chunk)
+            }
+          }
+        ]
+      })
+      store.refreshAllTriggers()
+    } catch (err) {
+      store.onError(err)
+    }
+    return false
+  }
+
+  handleDownload = () => {
+    const { store } = this.props
+    const txt = JSON.stringify(store[this.name] || [], null, 2)
+    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
+    download('electerm-' + this.name + '-' + stamp + '.json', txt)
+  }
+}

package/client/components/triggers/triggers-field.jsx

@@ -0,0 +1,19 @@
+/**
+ * Bookmark form wrapper for triggers.
+ * Works as an antd Form field (value/onChange injected by Form.Item).
+ */
+import { Form } from 'antd'
+import TriggerEditor from './trigger-editor.jsx'
+
+const e = window.translate
+
+export default function TriggersField () {
+  return (
+    <Form.Item
+      name='triggers'
+      label={e('triggers')}
+    >
+      <TriggerEditor />
+    </Form.Item>
+  )
+}

package/client/components/widgets/widgets-list.jsx

@@ -9,13 +9,16 @@ import {
 import WidgetInstances from './widget-instances'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
+import {
+  settingPanelMobileBreakpoint
+} from '../../common/constants'
 import {
   auto
 } from 'manate/react'
 
 const e = window.translate
 
-export default auto(function WidgetsList ({ activeItemId, store }) {
+export default auto(function WidgetsList ({ activeItemId, store, onClickItem }) {
   const { widgetInstances } = store
   const [tab, setTab] = useState('widgets') // or instances
   const [widgets, setWidgets] = useState([])
@@ -50,7 +53,14 @@ export default auto(function WidgetsList ({ activeItemId, store }) {
   }
 
   const onClickWidget = (widget) => {
+    if (onClickItem) {
+      return onClickItem(widget)
+    }
     window.store.setSettingItem(widget)
+    // narrow panels drill into the right col content after picking a widget
+    if (window.store.innerWidth <= settingPanelMobileBreakpoint) {
+      window.store.settingMobileView = 'content'
+    }
   }
 
   const renderWidgetItem = (widget, i) => {

package/client/css/mobile.styl

@@ -3,6 +3,14 @@
 // Breakpoint: 600px (see mobileBreakpoint in constants.js)
 // ---------------------------------------------------------------------------
 .is-mobile
+  // Keep every terminal footer row on the same positioning reference as the
+  // touch shortcut bar. Mobile browsers change the visual viewport when their
+  // chrome or soft keyboard opens; mixing absolute footer rows with the fixed
+  // shortcut row makes the monitor/shortcut stack detach from the footer.
+  .main-footer,
+  .remote-monitor-bar
+    position fixed
+
   // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
   .tabs.mobile-tabs
     display flex
@@ -81,7 +89,7 @@
         position fixed
         left 0
         right 0
-        bottom 36px
+        bottom calc(var(--footer-stack-height, 36px) + var(--shortcut-bar-h, 0px) + var(--shortcut-bar-kb-offset, 0px))
         z-index 200
         background var(--main)
         padding 8px 10px

package/client/store/common.js

@@ -276,6 +276,14 @@ export default Store => {
     const { store } = window
     store.rightPanelVisible = true
     store.rightPanelTab = 'ai'
+    // Ask for AI config right away when AI is not configured yet.
+    // This has to happen here (a plain user action) instead of from
+    // AIChat's mount effect: a write issued there lands in the very commit
+    // that opened the panel, and that update is dropped, so the config
+    // modal never showed up on first open.
+    if (store.aiConfigMissing()) {
+      store.toggleAIConfig()
+    }
   }
 
   Store.prototype.explainWithAi = function (txt) {
@@ -377,7 +385,10 @@ export default Store => {
           content: 'Understood. I will use this context as we continue.'
         })
       } else {
-        messages.push({ role: 'user', content: entry.prompt })
+        messages.push({
+          role: 'user',
+          content: entry.promptWithAttachments || entry.prompt
+        })
         if (entry.response) {
           messages.push({ role: 'assistant', content: entry.response })
         }

package/client/store/init-state.js

@@ -134,6 +134,8 @@ export default () => {
     settingTab: settingMap.bookmarks, // setting tab
     bookmarkId: undefined,
     showModal: 0,
+    // mobile settings view: 'menu' (left col list, default) or 'content' (right col)
+    settingMobileView: 'menu',
 
     // setting sync related
     autoSyncReady: false,
@@ -165,6 +167,10 @@ export default () => {
     pinnedQuickCommandBar: ls.getItem(pinnedQuickCommandBarKey) === 'y',
     qmSortByFrequency: ls.getItem(qmSortByFrequencyKey) === 'yes',
 
+    // declarative auto triggers (global; bookmark/session ones live on the tab)
+    triggers: [],
+    triggerSessionOpen: false,
+
     // touch-only shortcut bar (see components/terminal/shortcut-bar-entry.jsx)
     shortcutBarVisible: false,
     // px the bar is lifted above a page-overlaying system input panel
@@ -187,6 +193,9 @@ export default () => {
 
     // editor
     showEditor: false,
+    // set to true to mount the text editor component,
+    // so its code is only loaded when user really needs it
+    textEditorRequested: false,
 
     // file/info modal
     showFileModal: false,
@@ -213,6 +222,11 @@ export default () => {
     isMaximized: window.pre.runSync('isMaximized'),
     hasNodePty: window.pre.runSync('nodePtyCheck'),
     isMobile: window.innerWidth <= mobileBreakpoint,
+    // reflects the input device actually in use, not screen capability — a
+    // capability probe only proves the screen can be touched, not whether the
+    // user operates it by touch. Seeded false and left to main.jsx, which sets
+    // mouse → false / touch → true on the first real pointer event.
+    isTouchDevice: false,
     fullscreen: false,
     tabsHeight: 36,
 

package/client/store/mcp-handler.js

@@ -35,6 +35,36 @@ const dangerousTabProps = [
   'interactiveValues'
 ]
 
+// Tab/session UI state keys that must never be set by MCP/AI callers.
+// A crafted `batch` (missing, string, or out-of-range) used to crash the
+// Sessions render (`sizes[batch]` undefined -> cannot destructure height).
+// `addTab` now clamps batch too, but strip here as first line of defense.
+const tabInternalProps = [
+  'batch',
+  'id',
+  'status',
+  'pane',
+  'tabCount',
+  'from',
+  'srcId',
+  'sftpCreated',
+  'isTransporting',
+  'mcpStatus',
+  'activeTabId',
+  'sshSftpSplitView',
+  'sshTunnelResults',
+  'displayRaw',
+  'autoReConnect',
+  '_reloadState',
+  'isPinned'
+]
+
+function stripTabInternalProps (obj) {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !tabInternalProps.includes(key))
+  )
+}
+
 // Strip dangerous props from an object, returning a safe copy.
 function stripDangerousTabProps (obj) {
   return Object.fromEntries(
@@ -42,15 +72,64 @@ function stripDangerousTabProps (obj) {
   )
 }
 
+// ==================== Tab MCP status tag helpers ====================
+// Reflect MCP activity on the tab title via tab.mcpStatus
+// (rendered as [running]/[waiting]/[done]/[error] by create-title.jsx).
+
+const mcpStatusTimers = new Map()
+
+function findMcpTab (tabId) {
+  return window.store.tabs.find(t => t.id === tabId)
+}
+
+function setTabMcpStatus (tabId, status) {
+  const tab = findMcpTab(tabId)
+  if (!tab) {
+    return
+  }
+  const timer = mcpStatusTimers.get(tabId)
+  if (timer) {
+    clearTimeout(timer)
+    mcpStatusTimers.delete(tabId)
+  }
+  tab.mcpStatus = status
+}
+
+// Set a status that auto-clears after clearDelay ms (clearDelay 0 = keep
+// until the next status change). The clear only applies if the status
+// has not been replaced in the meantime.
+function setTabMcpStatusAuto (tabId, status, clearDelay = 6000) {
+  setTabMcpStatus(tabId, status)
+  if (!clearDelay) {
+    return
+  }
+  mcpStatusTimers.set(tabId, setTimeout(() => {
+    mcpStatusTimers.delete(tabId)
+    const tab = findMcpTab(tabId)
+    if (tab && tab.mcpStatus === status) {
+      tab.mcpStatus = ''
+    }
+  }, clearDelay))
+}
+
 export default Store => {
   // Initialize MCP handler - called when MCP widget is started
   Store.prototype.initMcpHandler = function () {
+    if (window._mcpHandlerInitialized) {
+      return
+    }
+    window._mcpHandlerInitialized = true
     const { ipcOnEvent } = window.pre
     // Listen for MCP requests from main process
     ipcOnEvent('mcp-request', (event, request) => {
-      const { requestId, action, data } = request
-      if (action === 'tool-call') {
-        window.store.handleMcpToolCall(requestId, data.toolName, data.args)
+      try {
+        const { requestId, action, data } = request || {}
+        if (action === 'tool-call') {
+          window.store.handleMcpToolCall(requestId, data && data.toolName, data && data.args)
+        }
+      } catch (err) {
+        // Never let a malformed IPC payload break the UI thread
+        console.error('mcp-request dispatch error', err)
       }
     })
   }
@@ -58,6 +137,7 @@ export default Store => {
   // Handle individual tool calls
   Store.prototype.handleMcpToolCall = async function (requestId, toolName, args) {
     const { store } = window
+    args = args || {}
 
     try {
       let result
@@ -266,9 +346,10 @@ export default Store => {
 
   Store.prototype.mcpAddBookmark = async function (args) {
     const { store } = window
+    const safeArgs = stripTabInternalProps(stripDangerousTabProps({ ...(args || {}) }))
     const bookmark = fixBookmarkData({
-      id: uid(),
-      ...args
+      ...safeArgs,
+      id: uid()
     })
 
     const { valid, errors } = validateBookmarkData(bookmark)
@@ -287,14 +368,16 @@ export default Store => {
 
   Store.prototype.mcpEditBookmark = function (args) {
     const { store } = window
-    const { id, updates } = args
+    const { id, updates } = args || {}
 
     const bookmark = store.bookmarks.find(b => b.id === id)
     if (!bookmark) {
       throw new Error(`Bookmark not found: ${id}`)
     }
 
-    store.editItem(id, updates, settingMap.bookmarks)
+    const safeUpdates = stripTabInternalProps(stripDangerousTabProps({ ...(updates || {}) }))
+    delete safeUpdates.id
+    store.editItem(id, safeUpdates, settingMap.bookmarks)
 
     return {
       success: true,
@@ -335,12 +418,23 @@ export default Store => {
 
   Store.prototype.mcpAddBookmarkGroup = async function (args) {
     const { store } = window
+    const title = (args || {}).title
+    if (!title || typeof title !== 'string') {
+      throw new Error('title is required')
+    }
+    const parentId = (args || {}).parentId
+    if (parentId) {
+      const parent = (store.bookmarkGroups || []).find(g => g.id === parentId)
+      if (!parent) {
+        throw new Error(`Parent bookmark group not found: ${parentId}`)
+      }
+    }
     const group = {
       id: uid(),
-      title: args.title,
+      title,
       bookmarkIds: [],
       bookmarkGroupIds: [],
-      level: args.parentId ? 2 : 1
+      level: parentId ? 2 : 1
     }
 
     await store.addBookmarkGroup(group)
@@ -418,6 +512,8 @@ export default Store => {
         host: t.host,
         type: t.type || 'local',
         status: t.status,
+        from: t.from,
+        mcpStatus: t.mcpStatus || '',
         isTransporting: t.isTransporting,
         onData: refsTabs.get('tab-' + t.id)?.state.terminalOnData,
         batch: t.batch
@@ -511,6 +607,10 @@ export default Store => {
     const { store } = window
     store.addTab()
     const newTabId = store.activeTabId
+    const tab = store.tabs.find(t => t.id === newTabId)
+    if (tab) {
+      tab.from = 'mcp'
+    }
 
     return {
       success: true,
@@ -524,7 +624,10 @@ export default Store => {
     // Strip dangerous execution-related props before any processing.
     // This prevents MCP/AI callers from injecting execLinux/execLinuxArgs,
     // setEnv, runScripts, etc. to spawn arbitrary local processes.
-    const safeArgs = stripDangerousTabProps({ ...args })
+    // Also strip tab UI-state props (notably `batch`): a crafted batch
+    // used to crash Sessions via `sizes[batch]` undefined destructuring.
+    // Batch is always assigned by addTab from the current layout.
+    const safeArgs = stripTabInternalProps(stripDangerousTabProps({ ...(args || {}) }))
     const data = fixBookmarkData(safeArgs)
 
     const { valid, errors } = validateBookmarkData(data)
@@ -537,6 +640,7 @@ export default Store => {
       from: 'mcp',
       ...newTerm(true, true)
     }
+    delete tab.batch
 
     store.addTab(tab)
     const newTabId = store.activeTabId
@@ -565,6 +669,8 @@ export default Store => {
     }
 
     store.runQuickCommand(command, args.inputOnly || false, tabId)
+    // Show [running] on the tab; auto-clears if the caller never waits.
+    setTabMcpStatusAuto(tabId, 'running', 15000)
 
     return {
       success: true,
@@ -652,6 +758,7 @@ export default Store => {
       throw new Error('No active terminal')
     }
 
+    setTabMcpStatus(tabId, 'waiting')
     const start = Date.now()
 
     // Brief initial wait so the command has time to start producing output
@@ -684,6 +791,7 @@ export default Store => {
       const onData = tabRef?.state.terminalOnData
       if (!onData) {
         const { output, lineCount } = collectOutput()
+        setTabMcpStatusAuto(tabId, 'done')
         return {
           tabId,
           elapsed: Date.now() - start,
@@ -695,7 +803,9 @@ export default Store => {
       await new Promise(resolve => setTimeout(resolve, pollInterval))
     }
 
-    // Timeout reached — return whatever is currently in the buffer
+    // Timeout reached — return whatever is currently in the buffer.
+    // The command is still producing output, so keep showing [running].
+    setTabMcpStatus(tabId, 'running')
     const { output, lineCount } = collectOutput()
     return {
       tabId,
@@ -901,29 +1011,41 @@ export default Store => {
     let result = null
     let mode = 'pty'
 
-    if (requestedMode === 'exec' && isSsh) {
-      try {
-        const r = await execCmd(tabId, command, timeoutMs)
-        result = {
-          stdout: r.stdout || '',
-          stderr: r.stderr || '',
-          stderrMerged: false,
-          exitCode: typeof r.exitCode === 'number' ? r.exitCode : null,
-          durationMs: Date.now() - start,
-          timedOut: !!r.timedOut
-        }
-        mode = 'exec'
-      } catch (e) {
-        // Exec channel unavailable (e.g. connection dropped) — fall back to PTY
-        if (!/not supported/i.test(e.message || '')) {
-          throw e
+    setTabMcpStatus(tabId, 'running')
+    try {
+      if (requestedMode === 'exec' && isSsh) {
+        try {
+          const r = await execCmd(tabId, command, timeoutMs)
+          result = {
+            stdout: r.stdout || '',
+            stderr: r.stderr || '',
+            stderrMerged: false,
+            exitCode: typeof r.exitCode === 'number' ? r.exitCode : null,
+            durationMs: Date.now() - start,
+            timedOut: !!r.timedOut
+          }
+          mode = 'exec'
+        } catch (e) {
+          // Only session types that genuinely lack an exec channel
+          // (local/telnet/serial/...) fall back to PTY sentinel capture.
+          // An SSH tab always has exec support, so any exec failure there
+          // means the connection is dead — surface it immediately as
+          // [error] instead of polling a dead terminal for the full
+          // timeout and misreporting timedOut.
+          if (isSsh || !/not supported/i.test(e.message || '')) {
+            throw e
+          }
         }
       }
-    }
 
-    if (!result) {
-      result = await store.mcpExecuteCommandPty({ command, tabId, timeoutMs })
+      if (!result) {
+        result = await store.mcpExecuteCommandPty({ command, tabId, timeoutMs })
+      }
+    } catch (err) {
+      setTabMcpStatusAuto(tabId, 'error')
+      throw err
     }
+    setTabMcpStatusAuto(tabId, result.timedOut ? 'running' : 'done')
 
     const out = truncateTail(result.stdout, maxOutputBytes)
     const err = truncateTail(result.stderr, maxOutputBytes)
@@ -995,6 +1117,7 @@ export default Store => {
       status: 'started'
     }
     backgroundTasks.set(taskId, task)
+    setTabMcpStatus(task.tabId, 'running')
 
     return {
       taskId,
@@ -1027,6 +1150,7 @@ export default Store => {
         task.status = 'completed'
         task.exitCode = parseInt(exitCode, 10)
         task.endTime = Date.now()
+        setTabMcpStatusAuto(task.tabId, 'done')
         return { ...task, status: 'completed', exitCode: task.exitCode }
       }
       return { ...task, status: 'unknown', message: 'PID file not found' }
@@ -1037,6 +1161,7 @@ export default Store => {
 
     if (aliveCheck.trim() === 'alive') {
       task.status = 'running'
+      setTabMcpStatus(task.tabId, 'running')
       return { ...task, pid, status: 'running' }
     }
 
@@ -1048,6 +1173,7 @@ export default Store => {
     task.status = 'completed'
     task.exitCode = exitCode !== '' ? parseInt(exitCode, 10) : null
     task.endTime = Date.now()
+    setTabMcpStatusAuto(task.tabId, 'done')
     return { ...task, pid, status: 'completed', exitCode: task.exitCode }
   }
 
@@ -1083,6 +1209,7 @@ export default Store => {
         `kill ${pid} 2>/dev/null; echo $? > ${task.exitFile}`)
       task.status = 'cancelled'
       task.endTime = Date.now()
+      setTabMcpStatus(task.tabId, '')
       return {
         taskId: task.id,
         pid,
@@ -1112,6 +1239,7 @@ export default Store => {
       // best-effort remote cleanup
     }
     backgroundTasks.delete(args.taskId)
+    setTabMcpStatus(task.tabId, '')
     return { success: true, taskId: args.taskId }
   }