@electerm/electerm-react 5.5.35 → 5.5.66

package/client/components/ai/ai-config.jsx

@@ -5,11 +5,11 @@ import {
   Button,
   AutoComplete,
   Alert,
-  Space,
-  Dropdown
+  Select,
+  Space
 } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
-import { DownOutlined, ReloadOutlined } from '@ant-design/icons'
+import { ReloadOutlined } from '@ant-design/icons'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -20,6 +20,7 @@ import AiHistory, { addHistoryItem } from './ai-history'
 import message from '../common/message'
 import { getAIPresets } from './ai-presets'
 import { appendMandatoryGuardrails } from './ai-guardrails'
+import './ai-config.styl'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
@@ -211,18 +212,32 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     form.setFieldsValue(values)
   }
 
-  function renderPresetMenu () {
-    const items = presets.map(p => ({
-      key: p.id,
-      label: p.nameAI,
-      onClick: () => handleSelectPreset(p)
+  // A plain antd Select, on purpose: it already scrolls its list inside the
+  // viewport (a Dropdown menu grows past the bottom of a phone screen, so the
+  // tail of the 18 presets is unreachable there) and `showSearch` filters it.
+  // `optionFilterProp` is load-bearing: without it rc-select filters on the
+  // option *value* (our id), so "gemini" or "llama" match nothing. The label
+  // carries name and model, so filtering on it finds either.
+  // The label/select sizing lives in `.ai-preset-row` (ai-config.styl), because
+  // Space's `.ant-space-item` wrapper is the flex item, not the child.
+  function renderPresetSelect () {
+    const options = presets.map(p => ({
+      value: p.id,
+      label: p.modelAI ? `${p.nameAI} · ${p.modelAI}` : p.nameAI
     }))
     return (
-      <Dropdown menu={{ items }} trigger={['click']}>
-        <Button>
-          {e('presets')} <DownOutlined />
-        </Button>
-      </Dropdown>
+      <div className='alignright'>
+        <Space className='mg1b width-100 ai-preset-row'>
+          <span>{e('presets')}</span>
+          <Select
+            showSearch
+            optionFilterProp='label'
+            options={options}
+            value={currentPreset?.id}
+            onSelect={id => handleSelectPreset(presets.find(p => p.id === id))}
+          />
+        </Space>
+      </div>
     )
   }
 
@@ -294,9 +309,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         type='warning'
         className='mg2b'
       />
-      <div className='mg1b alignright'>
-        {renderPresetMenu()}
-      </div>
+      {renderPresetSelect()}
       <p>
         Full Url: {initialValues?.baseURLAI}{initialValues?.apiPathAI}
       </p>

package/client/components/ai/ai-config.styl

@@ -0,0 +1,20 @@
+// Preset row: the "Presets" label and the provider select share one line.
+// antd's Space wraps every child in a `.ant-space-item`, and that wrapper — not
+// the child — is the flex item, so the flex behaviour has to be set on the
+// wrappers. Put `flex` on the Select itself and it is silently ignored, which
+// makes the row's overflow land on the label: at 480px wide the label is
+// squeezed into a 17px column and wraps onto four lines.
+.ai-preset-row
+  max-width 400px
+  .ant-space-item:first-child
+    // the label keeps its full text width and never wraps or shrinks
+    flex none
+    white-space nowrap
+
+  .ant-space-item:last-child
+    // the select takes the rest of the line, shrinking to nothing if it must
+    flex 1
+    min-width 0
+
+    .ant-select
+      width 100%

package/client/components/ai/ai-context.js

@@ -23,7 +23,7 @@ const CJK_RE = /[\u2e80-\u2eff\u3000-\u303f\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9f
 
 export const DEFAULT_CONTEXT_WINDOW = 128000
 export const CONTEXT_WARN_PERCENT = 70
-export const CONTEXT_DANGER_PERCENT = 90
+export const CONTEXT_DANGER_PERCENT = 80
 
 // Rough token count of a string. Never exact, never wildly wrong. Called on
 // the whole conversation every time it changes, so it stays a single pass

package/client/components/ai/ai-output.jsx

@@ -98,12 +98,7 @@ export default function AIOutput ({ item }) {
   }
 
   function handleToggleFlag () {
-    const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-    if (index === -1) {
-      return
-    }
-    window.store.aiChatHistory[index].flagged = !window.store.aiChatHistory[index].flagged
-    window.store.aiChatHistory = [...window.store.aiChatHistory]
+    window.store.updateAiHistoryEntry(item.id, { flagged: !item.flagged })
   }
 
   function renderFlag () {

package/client/components/ai/ai-presets.js

@@ -67,21 +67,6 @@ export const defaultAIPresets = [
     authHeaderNameAI: 'Authorization: Bearer',
     siteUrl: 'https://platform.openai.com/api-keys?utm_source=electerm_app&utm_medium=link&utm_campaign=electerm'
   },
-  {
-    id: 'openai-responses',
-    nameAI: 'OpenAI (Responses API)',
-    baseURLAI: 'https://api.openai.com/v1',
-    apiPathAI: '/responses',
-    modelAI: 'gpt-4o',
-    authHeaderNameAI: 'Authorization: Bearer',
-    modelAIs: [
-      { value: 'gpt-4o' },
-      { value: 'gpt-4o-mini' },
-      { value: 'gpt-4.1' },
-      { value: 'o4-mini' }
-    ],
-    siteUrl: 'https://platform.openai.com/api-keys?utm_source=electerm_app&utm_medium=link&utm_campaign=electerm'
-  },
   {
     id: 'anthropic',
     nameAI: 'Anthropic Claude',

package/client/components/batch-op/batch-op-runner.jsx

@@ -172,6 +172,7 @@ export default class BatchOpRunner extends Component {
       enableSsh: p.enableSsh !== false,
       useSshAgent: p.useSshAgent !== false,
       sshAgent: p.sshAgent || '',
+      agentForward: p.agentForward || false,
       term: p.term || 'xterm-256color',
       encode: p.encode || 'utf8',
       envLang: p.envLang || 'en_US.UTF-8',

package/client/components/bookmark-form/bookmark-schema.js

@@ -20,6 +20,7 @@ const bookmarkSchema = {
     connectionHoppings: 'array - connection hopping definitions',
     useSshAgent: 'boolean - use SSH agent, default is true',
     sshAgent: 'string - ssh agent path',
+    agentForward: 'boolean - enable SSH agent forwarding (like ssh -A, needed to hop through a jump/bastion host), requires SSH agent, default is false',
     serverHostKey: 'array - server host key algorithms',
     cipher: 'array - cipher list',
     compress: 'array - compression algorithms (zlib@openssh.com, zlib, none)',

package/client/components/bookmark-form/common/ssh-agent.jsx

@@ -9,26 +9,36 @@ const e = window.translate
 
 export default function SshAgent () {
   return (
-    <FormItem
-      {...formItemLayout}
-      label={e('useSshAgent')}
-    >
-      <Space align='center'>
-        <FormItem
-          name='useSshAgent'
-          valuePropName='checked'
-          noStyle
-        >
-          <SwitchLabel />
-        </FormItem>
-        <FormItem
-          name='sshAgent'
-          noStyle
-        >
-          <Input placeholder={e('SSH Agent Path')} />
-        </FormItem>
-        <HelpIcon link='https://github.com/electerm/electerm/wiki/ssh-agent' />
-      </Space>
-    </FormItem>
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('useSshAgent')}
+      >
+        <Space align='center'>
+          <FormItem
+            name='useSshAgent'
+            valuePropName='checked'
+            noStyle
+          >
+            <SwitchLabel />
+          </FormItem>
+          <FormItem
+            name='sshAgent'
+            noStyle
+          >
+            <Input placeholder={e('SSH Agent Path')} />
+          </FormItem>
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/ssh-agent' />
+        </Space>
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('agentForward')}
+        name='agentForward'
+        valuePropName='checked'
+      >
+        <SwitchLabel />
+      </FormItem>
+    </>
   )
 }

package/client/components/bookmark-form/config/ssh.js

@@ -22,6 +22,7 @@ const sshConfig = {
       connectionHoppings: [],
       useSshAgent: true,
       sshAgent: '',
+      agentForward: false,
       serverHostKey: [],
       cipher: [],
       compress: [],

package/client/components/bookmark-form/fix-bookmark-default.js

@@ -6,6 +6,7 @@ const defaultValues = {
     enableSsh: true,
     enableSftp: true,
     useSshAgent: true,
+    agentForward: false,
     x11: false,
     term: 'xterm-256color',
     displayRaw: false,

package/client/components/file-transfer/remote2remote-handlers.jsx

@@ -1,5 +1,5 @@
 import { Component } from 'react'
-import resolve from '../../common/resolve'
+import safeJoin from '../../common/safe-join'
 import { typeMap } from '../../common/constants'
 import { refsStatic } from '../common/ref'
 import Remote2RemoteHandler from './remote2remote-handler'
@@ -35,7 +35,10 @@ export default class Remote2RemoteHandlers extends Component {
   createHandler = ({ fromFile, targetPathBase, targetTab }) => {
     const handler = new Remote2RemoteHandler({
       fromFile,
-      toPath: resolve(targetPathBase, fromFile.name),
+      // `fromFile.name` comes straight off the source server's READDIR, so it
+      // is attacker-controlled. It is written to the target host as the victim
+      // below, so it must not be able to leave `targetPathBase`.
+      toPath: safeJoin(targetPathBase, fromFile.name),
       sourceHost: fromFile.host,
       sourceTabId: fromFile.tabId,
       title: fromFile.title,
@@ -58,7 +61,9 @@ export default class Remote2RemoteHandlers extends Component {
   }
 
   onRemote2RemoteDrop = ({ fromFiles, toFile, targetTab }) => {
-    const targetPathBase = resolve(toFile.path, toFile.name)
+    // `toFile.name` is an entry from the target panel's listing. The victim
+    // chose the panel, but the name is still server-supplied.
+    const targetPathBase = safeJoin(toFile.path, toFile.name)
     const targetHost = targetTab?.host
     let handled = false
     for (const fromFile of fromFiles) {

package/client/components/file-transfer/transfer.jsx

@@ -12,13 +12,6 @@ import {
 import resolve from '../../common/resolve'
 import sanitizeFilename from '../../common/sanitize-filename'
 import { refsTransfers, refsStatic, refs } from '../common/ref'
-import {
-  zipCmd,
-  unzipCmd,
-  rmCmd,
-  mvCmd,
-  mkdirCmd
-} from './zip'
 import './transfer.styl'
 
 const { assign } = Object
@@ -279,9 +272,7 @@ export default class TransportAction extends Component {
       typeFrom,
       toFile = {}
     } = transfer
-    const toPath = transfer.zip
-      ? transfer.toPath
-      : this.newPath || transfer.toPath
+    const toPath = this.newPath || transfer.toPath
     const fromFile = transfer.fromFile || this.fromFile
     const fromMode = fromFile.mode
     const transferType = typeFrom === typeMap.local ? transferTypeMap.upload : transferTypeMap.download
@@ -408,12 +399,11 @@ export default class TransportAction extends Component {
         toPath
       } = this.props.transfer
       this.oldPath = toPath
-      const { newPath, newName } = this.handleRename(toPath, typeTo === typeMap.remote)
+      const { newPath } = this.handleRename(toPath, typeTo === typeMap.remote)
       this.update({
         toPath: newPath
       })
       this.newPath = newPath
-      this.newName = newName
     }
 
     const { typeFrom, typeTo } = this.props.transfer
@@ -423,120 +413,14 @@ export default class TransportAction extends Component {
     this.startTransfer()
   }
 
-  zipTransferFolder = async () => {
-    const {
-      transfer
-    } = this.props
-    const {
-      fromPath,
-      typeFrom
-    } = transfer
-    const toPath = this.oldPath || transfer.toPath
-    let p
-    let isFromRemote
-    if (typeFrom === typeMap.local) {
-      isFromRemote = false
-      p = await window.fs.zipFolder(fromPath)
-    } else {
-      isFromRemote = true
-      const terminalId = refs.get('sftp-' + this.tabId)?.terminalId
-      p = await zipCmd(terminalId, fromPath)
-    }
-    this.zipSrc = p
-    const { name } = getFolderFromFilePath(p, isFromRemote)
-    const { path } = getFolderFromFilePath(toPath, !isFromRemote)
-    const nTo = resolve(path, name)
-    this.zipPath = nTo
-    const newTrans1 = {
-      ...copy(transfer),
-      toPath: nTo,
-      fromPath: p
-    }
-    this.transferFile(newTrans1, this.unzipFile)
-  }
-
-  unzipFile = async () => {
-    const { transfer } = this.props
-    const {
-      typeTo
-    } = transfer
-    const toPath = this.zipPath
-    const fromPath = this.zipSrc
-    const isToRemote = typeTo === typeMap.remote
-    const {
-      path,
-      name,
-      targetPath
-    } = this.buildUnzipPath(transfer)
-    const {
-      newName,
-      terminalId
-    } = this
-    if (isToRemote) {
-      if (newName) {
-        await mkdirCmd(terminalId, path)
-      }
-      await unzipCmd(terminalId, toPath, path)
-      if (newName) {
-        const mvFrom = resolve(path, name)
-        const mvTo = resolve(targetPath, newName)
-        await mvCmd(terminalId, mvFrom, mvTo)
-      }
-    } else {
-      if (newName) {
-        await window.fs.mkdir(path)
-      }
-      await window.fs.unzipFile(toPath, path)
-      if (newName) {
-        const mvFrom = resolve(path, name)
-        const mvTo = resolve(targetPath, newName)
-        await window.fs.mv(mvFrom, mvTo)
-      }
-    }
-    await rmCmd(terminalId, !isToRemote ? fromPath : toPath)
-    await window.fs.rmrf(!isToRemote ? toPath : fromPath)
-    if (newName) {
-      if (isToRemote) {
-        await rmCmd(terminalId, path)
-      } else {
-        await window.fs.rmrf(path)
-      }
-    }
-    this.onEnd()
-  }
-
-  buildUnzipPath = (transfer) => {
-    const {
-      typeTo
-    } = transfer
-    const isToRemote = typeTo === typeMap.remote
-    const toPath = this.oldPath || transfer.toPath
-    const {
-      newName
-    } = this
-    const { path } = getFolderFromFilePath(toPath, isToRemote)
-    const oldName = getFolderFromFilePath(toPath, isToRemote).name
-    const np = newName
-      ? resolve(path, 'temp-' + newName)
-      : path
-    return {
-      targetPath: path,
-      path: np,
-      name: oldName
-    }
-  }
-
   startTransfer = async () => {
-    const { fromFile = this.fromFile, zip } = this.props.transfer
+    const { fromFile = this.fromFile } = this.props.transfer
     if (!fromFile) {
       return
     }
     if (!fromFile.isDirectory) {
       return this.transferFile()
     }
-    if (zip) {
-      return this.zipTransferFolder()
-    }
     if (!this.isFtp) {
       return this.transferFile()
     } else {

package/client/components/main/main.jsx

@@ -289,6 +289,7 @@ export default auto(function Index (props) {
     rightPanelTab,
     agentRunning: store.agentRunning,
     aiContextInfo: store.aiContextInfo,
+    aiAutoCompress: store.aiAutoCompress,
     currentChatSessionId: store.currentChatSessionId,
     showChatSessions: store.showChatSessions
   }

package/client/components/session/session-control.jsx

@@ -8,6 +8,7 @@ import {
   PaperClipOutlined,
   ApartmentOutlined,
   MoreOutlined,
+  MenuOutlined,
   ColumnWidthOutlined,
   LogoutOutlined,
   PlusOutlined,
@@ -39,6 +40,7 @@ export default function SessionControl (props) {
     keepaliveEnabled,
     broadcastInput,
     wrapDisabled,
+    pasteWhenContextMenu,
     onChangePane,
     toggleCheckSftpPathFollowSsh,
     onSshSftpSplitView,
@@ -47,6 +49,7 @@ export default function SessionControl (props) {
     toggleWrap,
     onFullscreen,
     onOpenSearch,
+    onOpenContextMenu,
     onExitGracefully,
     onZoomFontSize
   } = props
@@ -279,7 +282,35 @@ export default function SessionControl (props) {
     )
   }
 
-  function renderTermControls () {
+  /**
+   * Touch devices have no right click, so the terminal's context menu needs a
+   * visible way in: this icon, next to the fullscreen icon on the desktop
+   * toolbar and next to the three-dot toggle in the mobile one (see below).
+   * Hidden when there is no menu to open — `pasteWhenContextMenu` turns both
+   * right click and the long press into a paste (see terminal.jsx), and it
+   * only ever acts on the terminal pane.
+   */
+  function renderContextMenuIcon (inMobileBar) {
+    if (
+      !isTouchDevice ||
+      pasteWhenContextMenu ||
+      tab.pane !== paneMap.terminal
+    ) {
+      return null
+    }
+    const cls = classnames(
+      'iblock pointer spliter context-menu-control-icon',
+      inMobileBar ? 'mobile-context-menu-toggle' : 'mg1r icon-info'
+    )
+    return (
+      <MenuOutlined
+        className={cls}
+        onClick={onOpenContextMenu}
+      />
+    )
+  }
+
+  function renderTermControls (skipContextMenuIcon) {
     const { pane } = tab
     if (pane !== paneMap.terminal) {
       return null
@@ -287,6 +318,7 @@ export default function SessionControl (props) {
     return (
       <div className='fright term-controls'>
         {renderFontSizeIcons()}
+        {skipContextMenuIcon ? null : renderContextMenuIcon()}
         {renderFullscreenIcon()}
         {renderSearchIcon()}
       </div>
@@ -303,12 +335,13 @@ export default function SessionControl (props) {
         {renderBroadcastIcon()}
         {renderWrapIcon()}
         {renderExitGracefullyIcon()}
-        {renderTermControls()}
+        {renderTermControls(true)}
       </div>
     )
     return (
       <div className='terminal-control mobile-session-control'>
         {renderPaneControl()}
+        {renderContextMenuIcon(true)}
         <Popover
           content={extraIcons}
           trigger='click'

package/client/components/session/session-control.styl

@@ -14,6 +14,7 @@
     flex 1
     min-width 0
 .mobile-control-toggle
+.mobile-context-menu-toggle
   font-size 16px
   line-height 32px
   color var(--text)
@@ -21,6 +22,10 @@
   &:hover
     color var(--text-light)
 
+// touch-only terminal context menu icon, in the bar next to the toggle above
+.mobile-context-menu-toggle
+  margin-right 10px
+
 // Popover content — icons laid out in a row, wrapping as needed
 .mobile-control-icons
   display flex

package/client/components/session/session.jsx

@@ -480,6 +480,17 @@ export default class SessionWrapper extends Component {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
 
+  // touch-only: the toolbar menu icon opens the same context menu a right
+  // click (or a long press) does, anchored just below the icon itself
+  handleOpenContextMenu = (evt) => {
+    const term = refs.get('term-' + this.props.tab.id)
+    if (!term) {
+      return
+    }
+    const rect = evt.currentTarget.getBoundingClientRect()
+    term.openContextMenuAtPoint(rect.left, rect.bottom)
+  }
+
   handleZoomFontSize = (v) => {
     const term = refs.get('term-' + this.props.tab.id)
     if (!term?.term) {
@@ -625,6 +636,7 @@ export default class SessionWrapper extends Component {
           keepaliveEnabled={this.state.keepaliveEnabled}
           broadcastInput={this.state.broadcastInput}
           wrapDisabled={this.state.wrapDisabled}
+          pasteWhenContextMenu={!!this.props.config.pasteWhenContextMenu}
           onChangePane={(pane) => this.onChangePane(pane)}
           toggleCheckSftpPathFollowSsh={this.toggleCheckSftpPathFollowSsh}
           onSshSftpSplitView={this.handleSshSftpSplitView}
@@ -634,6 +646,7 @@ export default class SessionWrapper extends Component {
           onFullscreen={this.handleFullscreen}
           onZoomFontSize={this.handleZoomFontSize}
           onOpenSearch={this.handleOpenSearch}
+          onOpenContextMenu={this.handleOpenContextMenu}
           onExitGracefully={this.handleExitGracefully}
         />
         <Suspense fallback={null}>

package/client/components/setting-panel/setting-terminal.jsx

@@ -569,6 +569,7 @@ export default class SettingTerminal extends Component {
           [
             'cursorBlink',
             'rightClickSelectsWord',
+            'mouseEventsRequireAlt',
             'pasteWhenContextMenu',
             'copyWhenSelect',
             'disableConfirmForLargeClipboardContent',

package/client/components/setting-panel/tab-widgets.jsx

@@ -1,11 +1,13 @@
 import SettingCol from './col'
 import WidgetControl from '../widgets/widget-control'
+import WidgetInstanceDetail from '../widgets/widget-instance-detail'
 import WidgetList from '../widgets/widgets-list'
+import { auto } from 'manate/react'
 import {
   settingMap
 } from '../../common/constants'
 
-export default function TabWidgets (props) {
+export default auto(function TabWidgets (props) {
   const {
     settingTab
   } = props
@@ -15,8 +17,14 @@ export default function TabWidgets (props) {
   const {
     settingItem,
     listProps,
-    formProps
+    formProps,
+    store
   } = props
+  // The right column shows whatever the list selected: a widget definition (run
+  // form) or a running instance (its detail + log). A definition has `info`, an
+  // instance has `widgetId` — and an instance that has been stopped stays the
+  // selected item on purpose, so its log is still readable after it dies.
+  const isInstance = !!(settingItem && settingItem.widgetId)
   return (
     <div
       className='setting-tabs-profile'
@@ -25,11 +33,23 @@ export default function TabWidgets (props) {
         <WidgetList
           {...listProps}
         />
-        <WidgetControl
-          {...formProps}
-          key={settingItem.id}
-        />
+        {
+          isInstance
+            ? (
+              <WidgetInstanceDetail
+                key={settingItem.id}
+                instance={settingItem}
+                store={store}
+              />
+              )
+            : (
+              <WidgetControl
+                {...formProps}
+                key={settingItem.id}
+              />
+              )
+        }
       </SettingCol>
     </div>
   )
-}
+})

package/client/components/sftp/file-item.jsx

@@ -902,12 +902,6 @@ export default class FileSection extends React.Component {
     this.transfer()
   }
 
-  zipAndTransfer = async () => {
-    this.transfer(transfer => {
-      transfer.zip = true
-    })
-  }
-
   newFile = () => {
     return this.newItem(false)
   }
@@ -1098,13 +1092,6 @@ export default class FileSection extends React.Component {
         icon: iconType,
         text: transferText
       })
-      // if (isDirectory && !this.props.isFtp) {
-      //   res.push({
-      //     func: 'zipAndTransfer',
-      //     icon: 'FileZipOutlined',
-      //     text: e('compressAndTransfer')
-      //   })
-      // }
     }
     if (!isDirectory && isRealFile && isLocal) {
       res.push({