@electerm/electerm-react 5.5.56 → 5.5.76

package/client/components/bookmark-form/copy-bookmark.jsx

@@ -0,0 +1,83 @@
+/**
+ * Copy the bookmark form's current values: as a quick connect string, or as
+ * the raw JSON that lands in the config file.
+ */
+import { useState } from 'react'
+import { Dropdown } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+import { stringifyQuickConnect } from '../../common/quick-connect-string'
+
+const e = window.translate
+
+const maxLen = 50
+
+function oneLine (str) {
+  const s = String(str || '').replace(/\s+/g, ' ').trim()
+  return s.length > maxLen ? s.slice(0, maxLen) + '...' : s
+}
+
+function label (name, value) {
+  return (
+    <span title={value}>
+      <b className='mg1r'>{name}</b>
+      <span>{oneLine(value)}</span>
+      <CopyOutlined className='mg1l' />
+    </span>
+  )
+}
+
+export default function CopyBookmark ({ getValues }) {
+  const [open, setOpen] = useState(false)
+  const [items, setItems] = useState([])
+
+  const getStrings = () => {
+    const values = getValues() || {}
+    return {
+      quickConnect: stringifyQuickConnect(values),
+      json: JSON.stringify(values, null, 2)
+    }
+  }
+
+  const onOpenChange = (next) => {
+    setOpen(next)
+    if (!next) {
+      return
+    }
+    const { quickConnect, json } = getStrings()
+    setItems([
+      {
+        key: 'quickConnect',
+        disabled: !quickConnect,
+        label: label(e('quickConnect'), quickConnect)
+      },
+      {
+        key: 'json',
+        label: label('JSON', json)
+      }
+    ])
+  }
+
+  const onClick = ({ key }) => {
+    const { quickConnect, json } = getStrings()
+    const value = key === 'json' ? json : quickConnect
+    if (value) {
+      copy(value)
+    }
+    setOpen(false)
+  }
+
+  return (
+    <Dropdown
+      menu={{ items, onClick }}
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={['click']}
+      placement='bottomRight'
+    >
+      <span className='pointer fright' title={e('copy')}>
+        <CopyOutlined />
+      </span>
+    </Dropdown>
+  )
+}

package/client/components/bookmark-form/form-renderer.jsx

@@ -22,7 +22,7 @@ import newTerm from '../../common/new-terminal'
 import { isValidIP } from '../../common/is-ip'
 import { action as manateAction } from 'manate'
 
-export default function FormRenderer ({ config, props }) {
+export default function FormRenderer ({ config, props, onForm }) {
   const initialValues = config.initValues(props)
   const [form] = Form.useForm()
   const [ips, setIps] = useState([])
@@ -30,6 +30,18 @@ export default function FormRenderer ({ config, props }) {
   const [testing, setTesting] = useState(false)
   const action = useRef('submit')
 
+  // hand the form instance up so the header can read the current values
+  useEffect(() => {
+    if (onForm) {
+      onForm(form)
+    }
+    return () => {
+      if (onForm) {
+        onForm(null)
+      }
+    }
+  }, [onForm, form])
+
   useEffect(() => {
     const init = config.initValues(props)
     form.resetFields()

package/client/components/bookmark-form/index.jsx

@@ -21,6 +21,7 @@ import { LoadingOutlined, BookOutlined, RobotOutlined } from '@ant-design/icons'
 import sessionConfig from './config/session-config'
 import renderForm from './render-form'
 import AIBookmarkForm from './ai-bookmark-form'
+import CopyBookmark from './copy-bookmark'
 import { isAIDisabled } from '../../common/ai-feature'
 import './bookmark-form.styl'
 
@@ -80,6 +81,19 @@ export default class BookmarkIndex2 extends PureComponent {
     this.setState({ bookmarkType: e.target.value })
   }
 
+  // the form instance lives in FormRenderer, the copy menu lives in the header
+  handleFormReady = (form) => {
+    this.form = form
+  }
+
+  // same shape the form submits: saved bookmark + what is currently typed
+  getFormValues = () => {
+    return {
+      ...this.props.formData,
+      ...(this.form ? this.form.getFieldsValue() : {})
+    }
+  }
+
   handleCancelAiMode = () => {
     this.setState({ aiMode: false })
   }
@@ -147,12 +161,16 @@ export default class BookmarkIndex2 extends PureComponent {
     )
   }
 
+  renderCopy () {
+    return <CopyBookmark getValues={this.getFormValues} />
+  }
+
   renderForm () {
     const { bookmarkType, aiMode } = this.state
     if (aiMode) {
       return this.renderAiForm()
     }
-    return renderForm(bookmarkType, this.props)
+    return renderForm(bookmarkType, this.props, this.handleFormReady)
   }
 
   render () {
@@ -180,6 +198,7 @@ export default class BookmarkIndex2 extends PureComponent {
             </span>
             {this.renderTitle(formData, isNew)}
             {this.renderAIButton(isNew)}
+            {this.renderCopy()}
           </p>
           {this.renderTypes(bookmarkType, isNew, keys)}
         </div>

package/client/components/bookmark-form/render-form.jsx

@@ -5,7 +5,7 @@ import sessionConfig from './config/session-config'
 import { connectionMap } from '../../common/constants'
 import FormRenderer from './form-renderer'
 
-export default function renderForm (type, props) {
+export default function renderForm (type, props, onForm) {
   const conf = sessionConfig[type] || sessionConfig[connectionMap.ssh]
-  return <FormRenderer config={conf} props={props} />
+  return <FormRenderer config={conf} props={props} onForm={onForm} />
 }

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/main/ui-theme.jsx

@@ -5,29 +5,10 @@
 import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 import isColorDark from '../../common/is-color-dark'
+import { darker } from '../../common/ui-theme-color.mjs'
 
 const themeDomId = 'theme-css'
 
-function darker (color, amount = 0.1) {
-  let usePound = false
-
-  if (color[0] === '#') {
-    color = color.slice(1)
-    usePound = true
-  }
-
-  const num = parseInt(color, 16)
-
-  let r = (num >> 16) - Math.round(255 * amount)
-  if (r < 0) r = 0
-  let b = ((num >> 8) & 0x00FF) - Math.round(255 * amount)
-  if (b < 0) b = 0
-  let g = (num & 0x0000FF) - Math.round(255 * amount)
-  if (g < 0) g = 0
-
-  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
-}
-
 function buildTheme (themeConfig) {
   const keys = Object.keys(themeConfig || {})
   const themeCss = keys.map(key => {

package/client/components/main/upgrade.jsx

@@ -28,6 +28,7 @@ const {
 const downloadMirrorList = [
   'github',
   'gh-proxy',
+  'atomgit',
   'sourceforge',
   'r2'
 ]
@@ -293,6 +294,7 @@ export default class Upgrade extends PureComponent {
         getPopupContainer={() => document.body}
         size='small'
         style={{ height: 32 }}
+        popupMatchSelectWidth={false}
       >
         {downloadMirrorList.map((opt) => (
           <Select.Option key={opt} value={opt}>{opt}</Select.Option>

package/client/components/setting-panel/install-command.jsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Button, Tag, Space, Tooltip } from 'antd'
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  WarningOutlined
+} from '@ant-design/icons'
+import message from '../common/message'
+import HelpIcon from '../common/help-icon'
+import { installCommandHelpLink } from '../../common/constants'
+
+// The row title and the two buttons come from electerm-locales
+// (`command` / `install` / `uninstall`); the descriptive lines are still plain
+// English and the maintainer adds keys for them as needed.
+// window.translate is installed by entry/basic.js, so look it up at call time
+// rather than capturing it when this module is evaluated.
+const t = key => window.translate(key)
+
+export default function InstallCommand () {
+  const [loading, setLoading] = useState(false)
+  const [status, setStatus] = useState(null)
+
+  const refresh = useCallback(async () => {
+    try {
+      const s = await window.pre.runGlobalAsync('getElectermCommandStatus')
+      setStatus(s)
+    } catch (err) {
+      console.error('Failed to read electerm command status', err)
+    }
+  }, [])
+
+  useEffect(() => {
+    refresh()
+  }, [refresh])
+
+  const run = async (name, okText) => {
+    setLoading(true)
+    try {
+      const res = await window.pre.runGlobalAsync(name)
+      if (res && res.ok) {
+        message.success(okText)
+      } else {
+        message.error((res && res.message) || 'Failed to update the electerm command')
+      }
+      await refresh()
+    } catch (err) {
+      message.error(err.message || String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleInstall = () =>
+    run('installElectermCommand', `electerm ${t('command')} installed`)
+  const handleUninstall = () =>
+    run('uninstallElectermCommand', `electerm ${t('command')} removed`)
+
+  if (!status) {
+    return null
+  }
+
+  const { installed, inPath, binDir, stale, blocked, unpackaged } = status
+  const needsPath = installed && inPath === false
+
+  // In a dev run process.execPath is Electron, so installing would point the
+  // command at Electron. Say so rather than offering a button that breaks it.
+  if (unpackaged) {
+    return null
+  }
+
+  return (
+    <div className='pd2b'>
+      <div className='pd1b'>
+        <Space size='small' wrap>
+          <span className='inline-title'>{t('install')} electerm {t('command')} to PATH</span>
+          <HelpIcon link={installCommandHelpLink} />
+          <Tag
+            variant='solid'
+            icon={installed ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            color={installed ? 'success' : 'default'}
+          >
+            {installed ? 'Installed' : (stale ? 'Outdated' : 'Not installed')}
+          </Tag>
+          {
+            blocked
+              ? (
+                <Tag variant='solid' color='error' icon={<WarningOutlined />}>
+                  Blocked
+                </Tag>
+                )
+              : null
+          }
+        </Space>
+      </div>
+      {
+        stale
+          ? (
+            <div className='pd1b'>
+              <WarningOutlined className='mg1r' />
+              This command points somewhere else now. Install again to update it.
+            </div>
+            )
+          : null
+      }
+      {
+        binDir
+          ? (
+            <div className='pd1b'>
+              <Tooltip title={binDir}>
+                <span>{binDir}</span>
+              </Tooltip>
+            </div>
+            )
+          : null
+      }
+      {
+        needsPath
+          ? (
+            <div className='pd1b'>
+              <WarningOutlined className='mg1r' />
+              {binDir} is not in your PATH. Add it to PATH so the command can be found.
+            </div>
+            )
+          : null
+      }
+      <div className='deep-link-btns'>
+        <Button
+          type='primary'
+          onClick={handleInstall}
+          loading={loading}
+        >
+          {t('install')}
+        </Button>
+        {
+          installed || stale
+            ? (
+              <Button
+                color='danger'
+                variant='solid'
+                onClick={handleUninstall}
+                loading={loading}
+              >
+                {t('uninstall')}
+              </Button>
+              )
+            : null
+        }
+      </div>
+    </div>
+  )
+}

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

@@ -33,6 +33,7 @@ import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
 import isColorDark from '../../common/is-color-dark'
 import DeepLinkControl from './deep-link-control'
+import InstallCommand from './install-command'
 import HotkeySetting from './hotkey'
 import SettingLeftSidebarIcons from './setting-left-sidebar-icons'
 import './setting.styl'
@@ -578,11 +579,15 @@ export default class SettingCommon extends Component {
             'disableTabIndex',
             'onlyShowTitleInTab',
             'disableShortcutBar',
+            'autoDistributeTabsWhenLayoutChange',
             'debug'
           ]
             .filter(name => !isWebApp || !webAppHiddenSettings.includes(name))
             .map(this.renderToggle)
         }
+        {
+          window.et.isWebApp ? null : <InstallCommand />
+        }
         {
           window.et.isWebApp ? null : <DeepLinkControl />
         }

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

@@ -18,7 +18,8 @@ import {
   noTerminalBgValue,
   rendererTypes,
   regexHelpLink,
-  terminalTypes
+  terminalTypes,
+  toggleWikiMap
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import ShowItem from '../common/show-item'
@@ -121,6 +122,8 @@ export default class SettingTerminal extends Component {
   renderToggle = (name, cls = 'pd2b', label) => {
     const checked = !!this.props.config[name]
     const txt = label || e(name)
+    // only toggles listed in toggleWikiMap get a help icon
+    const wiki = toggleWikiMap[name]
     return (
       <div className={cls} key={'rt' + name}>
         <SwitchLabel
@@ -128,6 +131,11 @@ export default class SettingTerminal extends Component {
           label={txt}
           onChange={v => this.onChangeValue(v, name)}
         />
+        {
+          wiki
+            ? <HelpIcon link={wiki} />
+            : null
+        }
       </div>
     )
   }
@@ -569,6 +577,7 @@ export default class SettingTerminal extends Component {
           [
             'cursorBlink',
             'rightClickSelectsWord',
+            'mouseEventsRequireAlt',
             'pasteWhenContextMenu',
             'copyWhenSelect',
             'disableConfirmForLargeClipboardContent',

package/client/components/terminal/mixins/term-attach.js

@@ -5,6 +5,7 @@ import AttachAddon from '../attach-addon-custom.js'
 import { createTriggerManager } from '../automation/index.js'
 import { isWin } from '../../../common/constants.js'
 import { isUnsafeFilename } from '../../../common/file-drop-utils.js'
+import { createCdCommand } from '../ssh-reload-state.js'
 
 /**
  * Everything that writes to the session: the socket attach addon, encoding,
@@ -57,8 +58,15 @@ export const attachMixin = {
     if (isUnsafeFilename(p)) {
       return message.error('File name contains unsafe characters')
     }
-    const isWinPath = /^[a-zA-Z]:\\/.test(p)
-    this.runQuickCommand(isWinPath ? `cd /d "${p}"` : `cd "${p}"`)
+    // Same shell resolution the session used: the bookmark/profile override
+    // first, then the global setting. `localShell` is what actually spawned.
+    const cmd = createCdCommand(p, {
+      remote: !!this.isRemote(),
+      shell: this.localShell || this.props.tab.execWindows || this.props.config.execWindows
+    })
+    if (cmd) {
+      this.runQuickCommand(cmd)
+    }
   },
 
   initTriggerManager () {

package/client/components/terminal/mixins/term-init.js

@@ -27,6 +27,7 @@ export const initMixin = {
       allowProposedApi: true,
       scrollback: config.scrollback,
       rightClickSelectsWord: config.rightClickSelectsWord || false,
+      mouseEventsRequireAlt: config.mouseEventsRequireAlt || false,
       fontFamily: tab.fontFamily || config.fontFamily,
       theme: tc,
       allowTransparency: true,

package/client/components/terminal/mixins/term-socket.js

@@ -78,7 +78,8 @@ export const socketMixin = {
   async remoteInit (term = this.term) {
     this.setState({
       loading: true,
-      terminalError: null
+      terminalError: null,
+      sessionStopped: false
     })
     const { cols, rows } = term
     const { config } = this.props
@@ -124,6 +125,10 @@ export const socketMixin = {
       }
     }
     const keepaliveInterval = tab.keepaliveInterval || config.keepaliveInterval
+    // Remember which executable this session actually spawned (profile- and
+    // bookmark-applied). `cd()` in term-attach needs the same answer to pick
+    // CMD vs PowerShell syntax; the global setting alone is not enough.
+    this.localShell = execOpts[execPropName] || ''
     const opts = clone({
       cols,
       rows,
@@ -188,6 +193,10 @@ export const socketMixin = {
         return
       }
       this.setStatus(statusMap.error)
+      // The pane is dead even though the socket never opened. The notice itself
+      // stays hidden while `terminalError` is set - the error alert is already
+      // the message.
+      this.setState({ sessionStopped: true })
       return
     }
     this.port = r.port
@@ -207,7 +216,7 @@ export const socketMixin = {
       // instead of leaving an unhandled rejection behind
       try {
         await this.initAttachAddon()
-        this.startupQueue.runInitScript()
+        this.startupQueue.runInitScript(opts[execPropName])
       } catch (e) {
         console.error(e)
         this.handleError({ message: e.message })
@@ -319,6 +328,7 @@ export const socketMixin = {
     if (this.userTypeExit) {
       return this.props.delTab(this.props.tab.id)
     }
+    this.setState({ sessionStopped: true })
     const { autoReconnectTerminal } = this.props.config
     if (autoReconnectTerminal) {
       this.scheduleAutoReconnect(3000)

package/client/components/terminal/mixins/term-suggestions.js

@@ -1,6 +1,13 @@
 import { debounce } from 'lodash-es'
 import { refsStatic } from '../../common/ref.js'
 
+/**
+ * Lines that end the shell on purpose. `userTypeExit` decides whether a closed
+ * socket closes the tab straight away or shows the "session stopped" notice,
+ * so anything a user would type to leave has to be listed here.
+ */
+const exitCommandReg = /^(?:exit|logout)(?:\s|$)/
+
 /**
  * Command suggestions: reading the current input straight from the terminal
  * buffer, positioning the dropdown at the cursor, and the password prompt
@@ -93,15 +100,21 @@ export const suggestionsMixin = {
    * The actual input reading is done via getCurrentInput from buffer
    */
   handleInputEvent (d) {
+    // Ctrl+D on an empty line is EOF, which ends the shell like `exit`. Typed
+    // anywhere else it is delete-char, so only an empty line counts.
+    if (d === '\x04') {
+      this.userTypeExit = !this.getCurrentInput().trim()
+    }
     // Handle Enter - add command to history
     if (d === '\r' || d === '\n') {
       const currentCmd = this.getCurrentInput()
       if (currentCmd && currentCmd.trim() && this.shouldUseManualHistory()) {
         window.store.addCmdHistory(currentCmd.trim())
       }
-      if (currentCmd && currentCmd.trim() === 'exit') {
-        this.userTypeExit = true
-      }
+      // Recomputed on every submitted line rather than only ever set: an
+      // `exit` that did not actually end the shell must not silence the next
+      // real disconnect.
+      this.userTypeExit = !!currentCmd && exitCommandReg.test(currentCmd.trim())
       this.closeSuggestions()
     }
   },

package/client/components/terminal/osc52-addon.js

@@ -64,8 +64,13 @@ export class Osc52Addon {
     const target = data.substring(0, semicolonIdx)
     const payload = data.substring(semicolonIdx + 1)
 
-    // Only handle clipboard target ('c'), also accept 'c' among multiple targets
-    if (!target.includes('c')) return false
+    // Only handle clipboard target ('c'), also accept 'c' among multiple targets.
+    // An EMPTY target is the spec's "default selection", i.e. the clipboard, and is
+    // what tmux sends: `set -g mouse on` + a mouse drag + wheel (to select across
+    // screens) makes tmux emit `ESC ] 52 ; ; <base64> BEL` on release. Rejecting an
+    // empty target silently drops that payload, so copying from tmux never reaches
+    // the system clipboard.
+    if (target && !target.includes('c')) return false
 
     if (payload === '?') {
       // Read request - send clipboard content back

package/client/components/terminal/session-status-overlay.jsx

@@ -0,0 +1,44 @@
+import { memo } from 'react'
+
+const e = window.translate
+
+/**
+ * Shown over a dead terminal pane. Deliberately a DOM overlay and not
+ * `term.write()`: anything written into the buffer is captured by
+ * `socketMixin.getReloadState()` (serializeAddon + alternate-buffer snapshot)
+ * and replayed into the *next* session after a restart, and it would also land
+ * in the terminal log file and in copy selections.
+ *
+ * It only *names* shortcuts that already act on a dead session - reload (which
+ * restarts it) and close - so there is nothing new to learn, no key handling
+ * here, and no new locale strings. Both states share the component, so a user
+ * with auto reconnect on never sees a countdown and a notice at the same time.
+ */
+export default memo(function SessionStatusOverlay ({
+  stopped,
+  countdown,
+  reloadShortcut,
+  closeShortcut
+}) {
+  const reconnecting = countdown !== null && countdown !== undefined
+  if (!reconnecting && !stopped) {
+    return null
+  }
+  return (
+    <div className='terminal-session-stopped pd1'>
+      {
+        reconnecting && (
+          <div className='pd1'>
+            {e('autoReconnectTerminal')}: {countdown}s
+          </div>
+        )
+      }
+      <div className='pd1'>
+        {e('reload')}: {reloadShortcut}
+      </div>
+      <div className='pd1'>
+        {e('close')}: {closeShortcut}
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/shell.js

@@ -79,13 +79,21 @@ function getShInlineIntegration () {
   return [
     'if [ -z "$ELECTERM_SHELL_INTEGRATION" ]',
     'then export ELECTERM_SHELL_INTEGRATION=1',
-    '__e_esc() { printf \'%s\' "$1" | sed \'s/\\\\/\\\\\\\\/g; s/;/\\\\x3b/g\'; }',
     // sh/dash/ash re-evaluate $(...) inside PS1 every time the prompt is
     // shown, but only if the $() stays literal — so PS1 must be assigned
     // single-quoted. printf interprets \033/\a, unlike PS1 backslash
     // escapes which dash does not expand.
-    '__e_ps1() { printf \'\\033]633;P;Cwd=%s\\a\\033]633;A\\a\' "$(__e_esc "$PWD")"; }',
-    'PS1=\'$(__e_ps1)\'"${PS1:-# }"',
+    //
+    // The prompt is deliberately self-contained: it must never call a shell
+    // function. On OpenWrt /etc/profile does `export PS1=...`, so PS1 is an
+    // environment variable and every child shell inherits it — while shell
+    // functions are not inherited. A `PS1='$(__e_ps1)'...` prompt therefore
+    // dies with "ash: __e_ps1: not found" on every prompt of any nested shell
+    // (ash, su, login, ...), and the exported ELECTERM_SHELL_INTEGRATION
+    // guard stops the child from ever defining the missing function.
+    // Inlining keeps it working there too, and printf is an ash builtin so
+    // this is cheaper than the old function + sed pair.
+    'PS1=\'$(printf "\\033]633;P;Cwd=%s\\a\\033]633;A\\a" "$PWD")\'"${PS1:-# }"',
     'fi'
   ].join('; ')
 }