@electerm/electerm-react 2.15.8 → 2.16.6

package/client/components/sidebar/history.jsx

@@ -2,31 +2,74 @@
  * history select
  */
 
+import React, { useState, useEffect } from 'react'
 import { auto } from 'manate/react'
+import { Switch } from 'antd'
+import { UnorderedListOutlined } from '@ant-design/icons'
 import HistoryItem from './history-item'
+import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
+
+const SORT_BY_FREQ_KEY = 'electerm-history-sort-by-frequency'
 
 export default auto(function HistoryPanel (props) {
   const { store } = window
   if (store.config.disableConnectionHistory) {
     return null
   }
+  const [sortByFrequency, setSortByFrequency] = useState(() => {
+    return getItemJSON(SORT_BY_FREQ_KEY, false)
+  })
+
+  useEffect(() => {
+    setItemJSON(SORT_BY_FREQ_KEY, sortByFrequency)
+  }, [sortByFrequency])
+
   const {
     history
   } = store
-  const arr = props.sort
-    ? [...history].sort((a, b) => { return b.count - a.count })
-    : history
+  let arr = [...history]
+  if (sortByFrequency) {
+    arr = arr.sort((a, b) => { return b.count - a.count })
+  }
+
+  const handleSortByFrequencyChange = (checked) => {
+    setSortByFrequency(checked)
+  }
+
+  const handleClearHistory = () => {
+    store.clearHistory()
+  }
+  const e = window.translate
+  const switchProps = {
+    checkedChildren: e('sortByFrequency'),
+    unCheckedChildren: e('sortByFrequency'),
+    checked: sortByFrequency,
+    onChange: handleSortByFrequencyChange,
+    size: 'small'
+  }
+  const clearIconProps = {
+    className: 'history-clear-icon pointer clear-ai-icon icon-hover',
+    title: window.translate('clear'),
+    onClick: handleClearHistory
+  }
   return (
     <div
       className='sidebar-panel-history'
     >
-      <div className='pd2x'>
+      <div className='history-header pd2x pd2b'>
+        <Switch
+          {...switchProps}
+        />
+        <UnorderedListOutlined
+          {...clearIconProps}
+        />
+      </div>
+      <div className='history-body'>
         {
           arr.map((item, i) => {
             return (
               <HistoryItem
                 key={item.id}
-                index={i}
                 item={item}
               />
             )

package/client/components/sidebar/sidebar-panel.jsx

@@ -13,7 +13,6 @@ import {
   PlusCircleOutlined,
   ShrinkOutlined,
   PushpinOutlined,
-  UnorderedListOutlined,
   SelectOutlined
 } from '@ant-design/icons'
 
@@ -29,21 +28,9 @@ export default memo(function SidebarPanel (props) {
   const prps1 = {
     className: prps.className + (pinned ? ' pinned' : '')
   }
-  const props2 = {
-    onClick: store.clearHistory,
-    className: 'mg2x pointer clear-ai-icon icon-hover'
-  }
-  const tabBarExtraContent = sidebarPanelTab === 'history'
-    ? (
-      <UnorderedListOutlined
-        {...props2}
-      />
-      )
-    : null
   const tabsProps = {
     activeKey: sidebarPanelTab,
     onChange: store.handleSidebarPanelTab,
-    tabBarExtraContent,
     items: [
       {
         key: 'bookmarks',

package/client/components/sidebar/sidebar.styl

@@ -48,6 +48,25 @@
     flex-direction column
     overflow hidden
     min-height 0
+  .history-header
+    flex-shrink 0
+    display flex
+    align-items center
+    border-bottom 1px solid var(--border)
+    position sticky
+    top 0
+    z-index 10
+    background var(--main)
+    .history-clear-icon
+      margin-left auto
+      margin-right 0
+      color var(--text-dark)
+      &:hover
+        color var(--error)
+  .history-body
+    flex 1
+    overflow-y auto
+    overflow-x hidden
 .not-system-ui.is-mac
   .sidebar-bar
     margin-top 20px

package/client/components/tabs/add-btn-menu.jsx

@@ -2,13 +2,15 @@
  * Add button menu component
  */
 
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
+import { Tabs } from 'antd'
 import {
   CodeFilled,
   RightSquareFilled,
   RobotOutlined
 } from '@ant-design/icons'
 import BookmarksList from '../sidebar/bookmark-select'
+import History from '../sidebar/history'
 import DragHandle from '../common/drag-handle'
 import QuickConnect from './quick-connect'
 
@@ -26,6 +28,7 @@ export default function AddBtnMenu ({
   setAddPanelWidth
 }) {
   const { onNewSsh, onNewSshAI } = window.store
+  const [activeTab, setActiveTab] = useState('bookmarks')
   const cls = 'pd2x pd1y context-item pointer'
   const addTabBtn = window.store.hasNodePty
     ? (
@@ -59,6 +62,24 @@ export default function AddBtnMenu ({
     left: menuPosition === 'right'
   }
 
+  const tabItems = [
+    {
+      key: 'bookmarks',
+      label: e('bookmarks')
+    },
+    {
+      key: 'history',
+      label: e('history')
+    }
+  ]
+
+  let listContent
+  if (activeTab === 'bookmarks') {
+    listContent = <BookmarksList store={window.store} />
+  } else {
+    listContent = <History store={window.store} />
+  }
+
   return (
     <div
       ref={menuRef}
@@ -89,11 +110,14 @@ export default function AddBtnMenu ({
           <RobotOutlined /> {e('createBookmarkByAI')}
         </div>
         <QuickConnect batch={batch} inputOnly />
+        <Tabs
+          activeKey={activeTab}
+          onChange={setActiveTab}
+          items={tabItems}
+        />
       </div>
       <div className='add-menu-list'>
-        <BookmarksList
-          store={window.store}
-        />
+        {listContent}
       </div>
     </div>
   )

package/client/components/tabs/add-btn.jsx

@@ -118,7 +118,7 @@ export default class AddBtn extends Component {
   focusSearchInput = () => {
     // Focus the search input after the menu renders
     this.focusTimeout = setTimeout(() => {
-      const searchInput = this.menuRef.current?.querySelector('.ant-input')
+      const searchInput = this.menuRef.current?.querySelector('.add-menu-list .ant-input')
       if (searchInput) {
         searchInput.focus()
         searchInput.select()

package/client/components/tabs/add-btn.styl

@@ -24,4 +24,12 @@
     display flex
     flex-direction column
     min-height 0
+    .sidebar-panel-history
+      position relative
+      top auto
+      left auto
+      right auto
+      bottom auto
+      flex 1
+      min-height 0
 

package/client/components/terminal/terminal.jsx

@@ -82,7 +82,6 @@ class Term extends Component {
     this.currentInput = ''
     this.shellInjected = false
     this.shellType = null
-    this.manualCommandHistory = new Set()
   }
 
   domRef = createRef()
@@ -737,7 +736,6 @@ class Term extends Component {
     if (d === '\r' || d === '\n') {
       const currentCmd = this.getCurrentInput()
       if (currentCmd && currentCmd.trim() && this.shouldUseManualHistory()) {
-        this.manualCommandHistory.add(currentCmd.trim())
         window.store.addCmdHistory(currentCmd.trim())
       }
       this.closeSuggestions()
@@ -903,9 +901,7 @@ class Term extends Component {
   }
 
   shouldUseManualHistory = () => {
-    const useManual = this.props.config.showCmdSuggestions &&
-      (this.shellType === 'sh' || (isWin && this.isLocal()))
-    return useManual
+    return !this.cmdAddon || !this.cmdAddon.hasShellIntegration()
   }
 
   canInjectShellIntegration = () => {
@@ -1078,6 +1074,32 @@ class Term extends Component {
     const { savePassword } = this.state
     const termType = type
     const extra = this.props.sessionOptions
+    // Determine if this is a local terminal (no host)
+    const isLocalType = !tab.host
+    // Build exec settings: only for local type, prefer tab settings over config
+    let execOpts = {}
+    let execPropName = 'execLinux'
+    if (isWin) {
+      execPropName = 'execWindows'
+    } else if (isMac) {
+      execPropName = 'execMac'
+    }
+    if (isLocalType) {
+      // Check flat properties on tab first (bookmark data), then fall back to config
+      if (tab[execPropName]) {
+        // Use bookmark's exec setting directly
+        execOpts = {
+          [execPropName]: tab[execPropName],
+          [`${execPropName}Args`]: tab[`${execPropName}Args`] || []
+        }
+      } else if (config[execPropName]) {
+        // Use global config exec settings
+        execOpts = {
+          [execPropName]: config[execPropName],
+          [`${execPropName}Args`]: config[`${execPropName}Args`] || []
+        }
+      }
+    }
     const opts = clone({
       cols,
       rows,
@@ -1085,18 +1107,13 @@ class Term extends Component {
       saveTerminalLogToFile: config.saveTerminalLogToFile,
       ...tab,
       ...extra,
+      ...execOpts,
       logName,
       sessionLogPath: config.sessionLogPath || createDefaultLogPath(),
       ...pick(config, [
         'addTimeStampToTermLog',
         'keepaliveInterval',
         'keepaliveCountMax',
-        'execWindows',
-        'execMac',
-        'execLinux',
-        'execWindowsArgs',
-        'execMacArgs',
-        'execLinuxArgs',
         'keyword2FA',
         'debug'
       ]),

package/client/components/terminal/transfer-client-base.js

@@ -18,6 +18,7 @@ export class TransferClientBase {
     this.currentTransfer = null
     this.savePath = null
     this.messageHandler = null
+    this._prevProgressRows = 0
   }
 
   /**
@@ -130,8 +131,23 @@ export class TransferClientBase {
     const speedStr = speed > 0 ? `, ${formatSize(speed)}/s` : ''
     const doneStr = isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''
 
-    const str = `\r\x1b[2K\x1b[32m${name}\x1b[0m: ${percent}% ${bar} ${sizeStr}${speedStr}${doneStr}`
-    this.writeToTerminal(str + '\r')
+    const str = `\x1b[32m${name}\x1b[0m: ${percent}% ${bar} ${sizeStr}${speedStr}${doneStr}`
+
+    // Calculate visible length (no ANSI codes) to detect line wrapping
+    const visibleLen = name.length + 2 + String(percent).length + 2 + barWidth + 1 + sizeStr.length + speedStr.length + (isComplete ? 7 : 0)
+    const cols = this.terminal?.term?.cols || 80
+    const currentRows = Math.max(1, Math.ceil(visibleLen / cols))
+
+    // Move cursor back up to the start of the previous progress block, then
+    // erase everything from there to end-of-display so wrapped lines are gone.
+    let clearSeq = '\r'
+    for (let i = 0; i < this._prevProgressRows; i++) {
+      clearSeq += '\x1b[A' // cursor up one row
+    }
+    clearSeq += '\x1b[J' // erase from cursor to end of display
+
+    this._prevProgressRows = currentRows - 1
+    this.writeToTerminal(clearSeq + str + '\r')
     return str
   }
 

package/client/components/terminal/trzsz-client.js

@@ -208,8 +208,9 @@ export class TrzszClient extends TransferClientBase {
       this.currentTransfer.path = path
       // Call directly to ensure 100% is displayed immediately
       this._doWriteProgress(true)
-      // Add newline after completion
+      // Add newline after completion and reset row tracker for next file
       this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
     }
     this.currentTransfer = null
   }

package/client/components/terminal/zmodem-client.js

@@ -180,8 +180,9 @@ export class ZmodemClient extends TransferClientBase {
       this.currentTransfer.path = path
       // Call directly to ensure 100% is displayed immediately
       this._doWriteProgress(true)
-      // Add newline after completion
+      // Add newline after completion and reset row tracker for next file
       this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
     }
     this.currentTransfer = null
   }

package/client/components/text-editor/edit-with-custom-editor.jsx

@@ -0,0 +1,49 @@
+/**
+ * Edit with custom editor - input + button component
+ */
+
+import { useState } from 'react'
+import { Button, Input, Space } from 'antd'
+
+const LS_KEY = 'customEditorCommand'
+const e = window.translate
+
+export default function EditWithCustomEditor ({ loading, editWithCustom }) {
+  const [editorCommand, setEditorCommand] = useState(
+    () => window.localStorage.getItem(LS_KEY) || ''
+  )
+
+  function handleChange (ev) {
+    const val = ev.target.value
+    setEditorCommand(val)
+    window.localStorage.setItem(LS_KEY, val)
+  }
+
+  function handleClick () {
+    const cmd = editorCommand.trim()
+    if (cmd) {
+      editWithCustom(cmd)
+    }
+  }
+
+  if (window.et.isWebApp) {
+    return null
+  }
+
+  return (
+    <Space.Compact className='mg1b'>
+      <Button
+        type='primary'
+        disabled={loading || !editorCommand.trim()}
+        onClick={handleClick}
+      >
+        {e('editWith')}
+      </Button>
+      <Input
+        value={editorCommand}
+        onChange={handleChange}
+        disabled={loading}
+      />
+    </Space.Compact>
+  )
+}

package/client/components/text-editor/text-editor-form.jsx

@@ -5,6 +5,7 @@
 import { useEffect } from 'react'
 import { Form, Button } from 'antd'
 import SimpleEditor from './simple-editor'
+import EditWithCustomEditor from './edit-with-custom-editor'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -38,7 +39,7 @@ export default function TextEditorForm (props) {
   } = props
   const popsEdit = {
     type: 'primary',
-    className: 'mg3r mg1b',
+    className: 'mg1r mg1b',
     disabled: loading,
     onClick: props.editWith
   }
@@ -62,10 +63,6 @@ export default function TextEditorForm (props) {
         <SimpleEditor />
       </FormItem>
       <div className='pd1t pd2b'>
-        <Button
-          {...popsEdit}
-        >{e('editWithSystemEditor')}
-        </Button>
         <Button
           type='primary'
           className='mg1r mg1b'
@@ -85,6 +82,17 @@ export default function TextEditorForm (props) {
         >{e('cancel')}
         </Button>
       </div>
+      <div className='pd1t pd2b'>
+        <Button
+          {...popsEdit}
+        >
+          {e('editWithSystemEditor')}
+        </Button>
+        <EditWithCustomEditor
+          loading={loading}
+          editWithCustom={props.editWithCustom}
+        />
+      </div>
     </Form>
   )
 }

package/client/components/text-editor/text-editor.jsx

@@ -118,6 +118,24 @@ export default class TextEditor extends PureComponent {
     fileRef.editWithSystemEditor(text)
   }
 
+  editWithCustom = async (editorCommand) => {
+    this.setStateProxy({
+      loading: true
+    })
+    const {
+      id, text
+    } = this.state
+    const fileRef = refs.get(id)
+    if (!fileRef) {
+      return
+    }
+    await fileRef.editWithCustomEditor(text, editorCommand)
+      .catch(err => {
+        this.setStateProxy({ loading: false })
+        window.store.onError(err)
+      })
+  }
+
   cancel = () => {
     this.setStateProxy({
       id: '',
@@ -150,7 +168,8 @@ export default class TextEditor extends PureComponent {
       submit: this.handleSubmit,
       text,
       cancel: this.cancel,
-      editWith: this.editWith
+      editWith: this.editWith,
+      editWithCustom: this.editWithCustom
     }
     return (
       <Modal

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

@@ -373,6 +373,9 @@ export default class VncSession extends PureComponent {
     }
     rfb.scaleViewport = scaleViewport
     rfb.clipViewport = clipViewport
+    rfb.qualityLevel = qualityLevel
+    rfb.compressionLevel = compressionLevel
+    rfb.viewOnly = viewOnly
     this.rfb = rfb
   }
 

package/client/components/vnc/vnc.styl

@@ -14,4 +14,4 @@
       height: 100% !important
       object-fit: contain
   > div
-    background: transparent !important 
+    background: transparent !important

package/client/store/common.js

@@ -345,13 +345,40 @@ export default Store => {
       return
     }
     const { terminalCommandHistory } = window.store
-    terminalCommandHistory.add(cmd)
+    const existing = terminalCommandHistory.get(cmd)
+    if (existing) {
+      // Use set() to trigger reactivity
+      terminalCommandHistory.set(cmd, {
+        count: existing.count + 1,
+        lastUseTime: new Date().toISOString()
+      })
+    } else {
+      terminalCommandHistory.set(cmd, {
+        count: 1,
+        lastUseTime: new Date().toISOString()
+      })
+    }
     if (terminalCommandHistory.size > 100) {
       // Delete oldest 20 items when history exceeds 100
-      const values = Array.from(terminalCommandHistory.values())
-      for (let i = 0; i < 20 && i < values.length; i++) {
-        terminalCommandHistory.delete(values[i])
+      const entries = Array.from(terminalCommandHistory.entries())
+      entries.sort((a, b) => new Date(a[1].lastUseTime).getTime() - new Date(b[1].lastUseTime).getTime())
+      for (let i = 0; i < 20 && i < entries.length; i++) {
+        terminalCommandHistory.delete(entries[i][0])
       }
     }
   })
+
+  Store.prototype.deleteCmdHistory = function (cmd) {
+    const { terminalCommandHistory } = window.store
+    terminalCommandHistory.delete(cmd)
+  }
+
+  Store.prototype.clearAllCmdHistory = function () {
+    window.store.terminalCommandHistory = new Map()
+  }
+
+  Store.prototype.runCmdFromHistory = function (cmd) {
+    window.store.runQuickCommand(cmd)
+    window.store.addCmdHistory(cmd)
+  }
 }

package/client/store/init-state.js

@@ -74,7 +74,32 @@ export default () => {
     addressBookmarksLocal: ls.getItemJSON(localAddrBookmarkLsKey, []),
     openResolutionEdit: false,
     resolutions: ls.getItemJSON(resolutionsLsKey, []),
-    terminalCommandHistory: new Set(ls.getItemJSON(cmdHistoryKey, [])),
+    // terminalCommandHistory: Map<cmdString, {count: Number, lastUseTime: DateString}>
+    // Load from localStorage and migrate from old format (Set of strings) if needed
+    terminalCommandHistory: (() => {
+      const savedData = ls.getItemJSON(cmdHistoryKey, [])
+      const map = new Map()
+      if (Array.isArray(savedData)) {
+        // Check if old format (array of strings) or new format (array of objects)
+        if (savedData.length > 0 && typeof savedData[0] === 'string') {
+          // Old format: migrate to new format
+          savedData.forEach(cmd => {
+            map.set(cmd, { count: 1, lastUseTime: new Date().toISOString() })
+          })
+        } else {
+          // New format: array of {cmd, count, lastUseTime}
+          savedData.forEach(item => {
+            if (item.cmd) {
+              map.set(item.cmd, {
+                count: item.count || 1,
+                lastUseTime: item.lastUseTime || new Date().toISOString()
+              })
+            }
+          })
+        }
+      }
+      return map
+    })(),
 
     // workspaces
     workspaces: [],

package/client/store/store.js

@@ -176,7 +176,7 @@ class Store {
 
   get terminalCommandSuggestions () {
     const { store } = window
-    const historyCommands = Array.from(store.terminalCommandHistory)
+    const historyCommands = Array.from(store.terminalCommandHistory.keys())
     const batchInputCommands = store.batchInputs
     const quickCommands = store.quickCommands.reduce(
       (p, q) => {

package/client/store/watch.js

@@ -145,7 +145,14 @@ export default store => {
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON(cmdHistoryKey, Array.from(store.terminalCommandHistory))
+    const history = store.terminalCommandHistory
+    // Save in new format: array of {cmd, count, lastUseTime}
+    const data = Array.from(history.entries()).map(([cmd, info]) => ({
+      cmd,
+      count: info.count,
+      lastUseTime: info.lastUseTime
+    }))
+    ls.setItemJSON(cmdHistoryKey, data)
     return store.terminalCommandHistory
   }).start()
 

package/package.json

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