@electerm/electerm-react 5.5.66 → 5.5.76

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>
     )
   }

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-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/ssh-reload-state.js

@@ -46,17 +46,56 @@ export function createRestoreCwdCommand (cwd) {
   return safeCwd ? `cd -- ${quotePosixShellArg(safeCwd)}` : ''
 }
 
-export function createWindowsRestoreCwdCommand (cwd) {
+// The shell setting is hand-entered config, so tolerate a quoted or padded
+// executable path before deciding which shell we are looking at.
+export function isPowerShellExecutable (shell = '') {
+  const shellPath = String(shell || '').trim().replace(/^"|"$/g, '')
+  return /(?:^|[/\\])(?:powershell|pwsh)(?:\.exe)?$/i.test(shellPath)
+}
+
+export function createWindowsRestoreCwdCommand (cwd, shell = '') {
   const safeCwd = sanitizeSshCwd(cwd)
   if (!safeCwd) {
     return ''
   }
+  if (isPowerShellExecutable(shell)) {
+    // -LiteralPath keeps `[`, `]` and `*` in a directory name from being read
+    // as a wildcard; '' is PowerShell's escape for a literal single quote.
+    return `Set-Location -LiteralPath '${safeCwd.replace(/'/g, "''")}'`
+  }
   // Strip control chars already handled by sanitize; escape embedded double
-  // quotes for cmd/powershell (`""` is accepted by both as a literal quote).
+  // quotes for CMD.
   const escaped = safeCwd.replace(/"/g, '""')
   return `cd /d "${escaped}"`
 }
 
+/**
+ * The `cd <dir>` command for a terminal session, used when the user sends a
+ * directory from the file panel to the terminal.
+ *
+ * A local session knows which shell it spawned, so it can emit syntax that
+ * shell actually understands (PowerShell rejects CMD's `cd /d`). A remote tab
+ * cannot: the far side's shell is unknown from here, so it keeps the CMD form.
+ * Every branch quotes the path with the target shell's own rules - a directory
+ * name is attacker-influenced (it can come out of an unpacked archive), so a
+ * bare `cd "..."` would let `$(...)` and backticks run.
+ *
+ * Returns '' when the path is unusable. Callers must not fall back to
+ * interpolating the raw path into a command.
+ */
+export function createCdCommand (dir, { remote = false, shell = '' } = {}) {
+  const safeDir = sanitizeSshCwd(dir)
+  if (!safeDir) {
+    return ''
+  }
+  if (!/^[a-zA-Z]:\\/.test(safeDir)) {
+    return `cd ${quotePosixShellArg(safeDir)}`
+  }
+  return remote
+    ? `cd /d "${safeDir.replace(/"/g, '""')}"`
+    : createWindowsRestoreCwdCommand(safeDir, shell)
+}
+
 export function shouldCaptureTerminalReloadState (tab, config = {}) {
   return !!config.restoreTerminalSessionOnReload && isRestorableTerminalTab(tab)
 }

package/client/components/terminal/startup-queue.js

@@ -141,7 +141,7 @@ export class StartupQueue {
 
   // ---- queue ----
 
-  runInitScript = () => {
+  runInitScript = (localShell) => {
     const { term } = this
     window.store.triggerResize()
     const {
@@ -156,9 +156,13 @@ export class StartupQueue {
     const startFolder = reloadCwd || startDirectory || window.initFolder
     let cwdCommand = ''
     if (startFolder) {
+      // No `|| cd "<raw>"` fallback: these helpers return '' for a path they
+      // refuse (control characters, over-long), and interpolating the raw value
+      // instead would hand `startDirectory` - which a quick-connect link can
+      // set - straight to the shell as a command.
       cwdCommand = this.isPosixShell()
         ? createRestoreCwdCommand(startFolder)
-        : createWindowsRestoreCwdCommand(startFolder) || `cd "${startFolder}"`
+        : createWindowsRestoreCwdCommand(startFolder, localShell || term.props.config.execWindows)
     }
     if (cwdCommand) {
       scripts.unshift({ script: cwdCommand, delay: 0 })

package/client/components/terminal/terminal.jsx

@@ -19,7 +19,7 @@ import NormalBuffer from './normal-buffer.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
-import ReconnectOverlay from './reconnect-overlay.jsx'
+import SessionStatusOverlay from './session-status-overlay.jsx'
 import TerminalErrorHandle from './terminal-error-handle.jsx'
 import DropFileModal from './drop-file-modal.jsx'
 import TerminalSelectText from './terminal-select-text.jsx'
@@ -77,6 +77,12 @@ class Term extends Component {
       matchIndex: -1,
       totalLines: 0,
       reconnectCountdown: null,
+      // True once this pane has no live session (socket closed, or the session
+      // failed to start). Not derivable from tab.status: store.updateTab mutates
+      // the tab in place, and nothing in this component's ancestor chain reads
+      // tab.status during render, so a status change does not re-render the
+      // pane. Setting it here is also what triggers that render.
+      sessionStopped: false,
       terminalError: null,
       dropFileModalVisible: false,
       droppedFiles: [],
@@ -429,8 +435,13 @@ class Term extends Component {
             showEditBookmarkButton={this.state.terminalError?.from === 'bookmarks' && !!this.state.terminalError?.srcId}
             onEditBookmark={this.handleEditBookmarkFromError}
           />
-          <ReconnectOverlay
+          <SessionStatusOverlay
+            // A failed start already has the error alert as its message; the
+            // notice would just stack on top of it.
+            stopped={this.state.sessionStopped && !this.state.terminalError}
             countdown={this.state.reconnectCountdown}
+            reloadShortcut={this.getShortcut('app_reloadCurrentTab')}
+            closeShortcut={this.getShortcut('app_closeCurrentTab')}
           />
           {this.renderResetFontSizeButton()}
           <DropFileModal

package/client/components/terminal/terminal.styl

@@ -222,12 +222,21 @@
   max-height 200px
   overflow-y scroll
 
-.terminal-reconnect-overlay
+.terminal-session-stopped
   position absolute
-  bottom 6px
-  right 12px
-  font-size 11px
-  color rgba(255, 255, 255, 0.55)
+  left 50%
+  top 50%
+  transform translate(-50%, -50%)
+  padding 8px 14px
+  background var(--main)
+  color var(--text)
+  border 1px solid var(--main-lighter)
+  border-radius 4px
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.35)
+  font-size 12px
+  line-height 1.7
+  white-space nowrap
+  // keyboard-only affordance: never intercept a click meant for the terminal
   pointer-events none
   z-index 110
 

package/client/store/sync.js

@@ -742,29 +742,57 @@ export default (Store) => {
       }
       fixed[n] = arr
     }
-    // clear all targets first - importAll replaces data sets, not appends.
-    // watchers are stopped inside runImportTask, so this is silent until restart
-    action(() => {
-      for (const n of names) {
-        store.setItems(n, [])
-      }
-    })()
+    // Import replaces data sets, so the store has to end up holding exactly
+    // `fixed`. Keep a copy of what it holds now: if the import is cancelled or
+    // throws, this goes back, so the store and the watcher snapshots agree
+    // again and the watcher restart cannot be mistaken for a mass deletion.
+    const backup = new Map(
+      names.map(n => [n, copy(store.getItems(n))])
+    )
     await runImportTask({
       title: e('import'),
       batch: 200,
       stopWatchers: names,
-      // one chunked step per data set (bookmarks, groups, themes, ...),
-      // so the progress bar advances per batch instead of per data set
-      steps: names.map((n) => {
-        const arr = fixed[n]
-        return {
-          label: n,
-          items: arr,
-          process: (chunk) => {
-            store[n].push(...chunk)
+      // Clearing happens *inside* the task, i.e. while the watchers are
+      // stopped, rather than before it. Doing it earlier meant the empty store
+      // was already in place while the snapshots still described the full
+      // table, so any path that restarted a watcher without the import having
+      // finished (cancel, throw) deleted every record on disk.
+      steps: [
+        {
+          label: e('import'),
+          weight: 1,
+          run: () => {
+            action(() => {
+              for (const n of names) {
+                store.setItems(n, [])
+              }
+            })()
           }
-        }
-      })
+        },
+        // one chunked step per data set (bookmarks, groups, themes, ...),
+        // so the progress bar advances per batch instead of per data set
+        ...names.map((n) => {
+          const arr = fixed[n]
+          return {
+            label: n,
+            items: arr,
+            process: (chunk) => {
+              store[n].push(...chunk)
+            }
+          }
+        })
+      ],
+      // The import did not complete: put the store back the way it was so the
+      // watcher restart below is a no-op instead of deleting the untouched
+      // records. (import-task.js also reseeds each watcher before restarting.)
+      onAbort: () => {
+        action(() => {
+          for (const [n, arr] of backup) {
+            store.setItems(n, copy(arr))
+          }
+        })()
+      }
     })
     store.updateConfig(stripServerManagedKeys(objs.config))
     if (objs.config?.theme) {