@electerm/electerm-react 5.1.25 → 5.3.0

package/client/common/build-map.js

@@ -0,0 +1,12 @@
+/**
+ * build id -> item Map from array
+ * O(n), unlike reduce + object spread which is O(n²)
+ */
+
+export default (arr = [], key = 'id') => {
+  const map = new Map()
+  for (const item of arr) {
+    map.set(item[key], item)
+  }
+  return map
+}

package/client/common/constants.js

@@ -212,6 +212,16 @@ export const syncTypes = buildConst([
   'cloud',
   'webdav'
 ])
+export const allowedSyncTypes = () => {
+  const custom = window.et.syncTypes
+  if (!Array.isArray(custom)) {
+    return Object.keys(syncTypes)
+  }
+  const list = custom.filter(type => syncTypes[type])
+  return list.length
+    ? list
+    : Object.keys(syncTypes)
+}
 export const syncTokenCreateUrls = {
   gitee: 'https://gitee.com/github-zxdong262/electerm/wikis/Create%20personal%20access%20token?sort_id=3028409',
   github: 'https://github.com/electerm/electerm/wiki/Create-personal-access-token',
@@ -262,6 +272,8 @@ export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/w
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
 export const aiChatModeLsKey = 'ai-chat-mode'
 export const lastAiChatSessionIdKey = 'last-ai-chat-session-id'
+export const aiTermOfUseConfirmedLsKey = 'ai-term-of-use-confirmed'
+export const syncTermOfUseConfirmedLsKey = 'sync-term-of-use-confirmed'
 export const modals = {
   hide: 0,
   setting: 1

package/client/common/db.js

@@ -161,11 +161,13 @@ export async function fetchInitData (dbName) {
   const res = await find(dbName)
   const order = await getData(`${dbName}:order`)
   if (order && order.length) {
-    res.sort((a, b) => {
-      const ai = order.findIndex(r => r === a.id)
-      const bi = order.findIndex(r => r === b.id)
-      return ai - bi
-    })
+    // index map instead of findIndex inside the comparator:
+    // comparator sort is O(n²) with findIndex, O(n log n) with a map
+    const orderMap = new Map(order.map((id, i) => [id, i]))
+    res.sort((a, b) =>
+      (orderMap.get(a.id) ?? -1) -
+      (orderMap.get(b.id) ?? -1)
+    )
   }
   return JSON.stringify(res)
 }

package/client/common/import-task.js

@@ -0,0 +1,174 @@
+/**
+ * Shared chunked import task runner (no UI).
+ *
+ * Runs large data imports (bookmarks, quick commands, all-data) in small
+ * batches, yielding to the UI between batches and pausing db watchers while
+ * running, so a big import can not freeze or crash the app. Progress is
+ * reported through the ImportProgress modal mounted in main.jsx (driven via
+ * refsStatic) and through the onProgress callback.
+ */
+
+import { action } from 'manate'
+import { refsStatic } from '../components/common/ref'
+
+export const importProgressRefKey = 'import-progress'
+
+function yieldToUI (idleMs = 0) {
+  // rAF fires *before* paint; pairing it with setTimeout(0) - a macrotask
+  // that runs *after* paint - guarantees the browser actually paints
+  // between batches instead of coalescing them into one long frame.
+  // idleMs adds a real idle gap after paint so input events, hover and
+  // the mouse cursor get a chance to be handled between batches
+  return new Promise(resolve => {
+    const finish = () => {
+      if (idleMs > 0) {
+        setTimeout(resolve, idleMs)
+      } else {
+        resolve()
+      }
+    }
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => setTimeout(finish, 0))
+      return
+    }
+    setTimeout(finish, 0)
+  })
+}
+
+let controller = null
+
+export function cancelImportTask () {
+  if (controller) {
+    controller.cancelled = true
+  }
+}
+
+/**
+ * Run an import task in UI-friendly batches with a progress modal.
+ * @param {Object} options
+ * @param {string} options.title modal title (already translated label)
+ * @param {Array} options.steps list of steps, each either
+ *   `{ label, items, process(chunk, step) }` - chunked store mutations, or
+ *   `{ label, weight, run(step) }` - a single (async) unit of work
+ * @param {number} options.batch items per store-mutation batch
+ * @param {number} options.batchIdle ms of idle time after each batch's
+ *   paint (default 16); keeps the UI responsive to input while importing
+ * @param {boolean} options.cancelable show a cancel button (default true)
+ * @param {boolean} options.useModal show the progress modal (default true)
+ * @param {number} options.modalMinTotal skip the modal below this total (default 200)
+ * @param {string[]} options.stopWatchers db watcher names (window.watchXxx)
+ *   to pause during the task, so chunked writes do not trigger a db diff
+ *   per batch; watchers restart one per frame after the steps finish
+ * @param {Function} options.onProgress called as (current, total) per batch
+ * @returns {Promise<{cancelled: boolean, error: Error|null}>}
+ */
+export async function runImportTask (options) {
+  const {
+    title = '',
+    steps = [],
+    batch = 100,
+    batchIdle = 16,
+    cancelable = true,
+    useModal = true,
+    modalMinTotal = 200,
+    stopWatchers = [],
+    onProgress
+  } = options
+  if (controller) {
+    console.warn('Another import task is already running')
+    return { cancelled: false, error: new Error('Another import task is already running') }
+  }
+  const total = steps.reduce((p, s) => {
+    return p + (Array.isArray(s.items) ? s.items.length : (s.weight || 1))
+  }, 0) + stopWatchers.length
+  const showModal = useModal && total >= modalMinTotal
+  const modal = refsStatic.get(importProgressRefKey)
+  controller = { cancelled: false }
+  let done = 0
+  const update = (ext) => {
+    if (onProgress) {
+      onProgress(done, total)
+    }
+    if (!showModal || !modal) {
+      return
+    }
+    modal.show({
+      title,
+      status: 'running',
+      current: done,
+      total,
+      label: '',
+      cancelable,
+      ...ext
+    })
+  }
+  update({})
+  for (const name of stopWatchers) {
+    window[`watch${name}`]?.stop()
+  }
+  let error = null
+  const restarted = new Set()
+  try {
+    for (const step of steps) {
+      if (controller.cancelled) {
+        break
+      }
+      const { label, items, process, run } = step
+      if (Array.isArray(items) && typeof process === 'function') {
+        for (let i = 0; i < items.length; i += batch) {
+          if (controller.cancelled) {
+            break
+          }
+          // paint the last batch, then leave a real idle gap so the UI
+          // can handle input/cursor events before the next batch
+          await yieldToUI(batchIdle)
+          const chunk = items.slice(i, i + batch)
+          action(() => process(chunk, step))()
+          done += chunk.length
+          update({ label })
+        }
+      } else if (typeof run === 'function') {
+        await yieldToUI()
+        await run(step)
+        done += step.weight || 1
+        update({ label })
+      }
+    }
+    // restart watchers one per frame - each start() synchronously diffs
+    // + deep-copies its collection and writes to db, so restarting all at
+    // once would freeze the UI right when the import "finishes"
+    for (const name of stopWatchers) {
+      await yieldToUI(batchIdle)
+      window[`watch${name}`]?.start()
+      restarted.add(name)
+      done += 1
+      update({ label: name })
+    }
+  } catch (err) {
+    error = err
+  } finally {
+    // on error/cancel still make sure everything is restarted
+    for (const name of stopWatchers) {
+      if (!restarted.has(name)) {
+        window[`watch${name}`]?.start()
+      }
+    }
+  }
+  const { cancelled } = controller
+  controller = null
+  if (error) {
+    if (showModal && modal) {
+      modal.show({ title, status: 'error', error, current: done, total, cancelable: false })
+    }
+  } else if (!cancelled) {
+    if (showModal && modal) {
+      modal.show({ title, status: 'done', current: total, total, cancelable: false })
+      setTimeout(() => {
+        modal.hide()
+      }, 600)
+    }
+  } else if (showModal && modal) {
+    modal.hide()
+  }
+  return { cancelled, error }
+}

package/client/common/term-of-use.jsx

@@ -0,0 +1,69 @@
+/**
+ * Term of use confirmation gate for the AI config / data sync pages.
+ *
+ * Define `window.et.AITermOfUse` / `window.et.SyncTermOfUse` (injected the
+ * same way as `defaultAIPreset` into the built index.html `_global` data)
+ * to require users to confirm the term before entering those pages.
+ * Confirmation is saved to localStorage, so it is only asked once.
+ */
+
+import Modal from '../components/common/modal'
+import {
+  aiTermOfUseConfirmedLsKey,
+  syncTermOfUseConfirmedLsKey
+} from './constants'
+import * as ls from './safe-local-storage'
+
+const e = window.translate
+
+const termOfUseTypes = {
+  ai: {
+    etKey: 'AITermOfUse',
+    lsKey: aiTermOfUseConfirmedLsKey
+  },
+  sync: {
+    etKey: 'SyncTermOfUse',
+    lsKey: syncTermOfUseConfirmedLsKey
+  }
+}
+
+function isConfirmed (type) {
+  return ls.getItem(termOfUseTypes[type].lsKey) === 'yes'
+}
+
+/**
+ * Run `onConfirmed` after the term of use of `type` is confirmed.
+ * When no term is defined, or it was confirmed before, `onConfirmed`
+ * runs synchronously; otherwise a confirmation modal is shown and
+ * `onConfirmed` only runs when the user confirms it.
+ */
+export function requireTermOfUse (type, onConfirmed) {
+  const { etKey, lsKey } = termOfUseTypes[type]
+  const content = window.et?.[etKey]
+  const text = typeof content === 'string' ? content.trim() : ''
+  if (!text || isConfirmed(type)) {
+    return onConfirmed()
+  }
+  Modal.confirm({
+    title: 'Terms of use',
+    width: 600,
+    maskClosable: false,
+    content: (
+      <div
+        style={{
+          maxHeight: '50vh',
+          overflow: 'auto',
+          whiteSpace: 'pre-wrap'
+        }}
+      >
+        {text}
+      </div>
+    ),
+    okText: e('haveRead'),
+    cancelText: e('cancel'),
+    onOk: () => {
+      ls.setItem(lsKey, 'yes')
+      onConfirmed()
+    }
+  })
+}

package/client/components/ai/ai-config-props.js

@@ -27,6 +27,14 @@ export const defaultAIPresets = [
     modelAI: 'DEEPSEEK_V4_FLASH',
     authHeaderNameAI: 'Authorization: Bearer'
   },
+  {
+    id: 'apimart',
+    nameAI: 'ApiMart',
+    baseURLAI: 'https://api.apimart.ai/v1',
+    apiPathAI: '/chat/completions',
+    modelAI: 'deepseek-v4-flash',
+    authHeaderNameAI: 'Authorization: Bearer'
+  },
   {
     id: 'deepseek',
     nameAI: 'DeepSeek',

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

@@ -27,6 +27,7 @@ import { fixBookmarkData } from './fix-bookmark-default.js'
 import generate from '../../common/id-with-stamp'
 import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
 import { getItem, setItem } from '../../common/safe-local-storage'
+import { runImportTask } from '../../common/import-task'
 
 const STORAGE_KEY_DESC = 'ai_bookmark_description'
 const STORAGE_KEY_HISTORY = 'ai_bookmark_history'
@@ -34,16 +35,6 @@ const EVENT_NAME_HISTORY = 'ai-bookmark-history-update'
 const { TextArea } = Input
 const e = window.translate
 
-function yieldToUI () {
-  return new Promise(resolve => {
-    if (typeof requestAnimationFrame === 'function') {
-      requestAnimationFrame(() => resolve())
-      return
-    }
-    setTimeout(resolve, 0)
-  })
-}
-
 export default function AIBookmarkForm (props) {
   const { onCancel } = props
   const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
@@ -183,11 +174,23 @@ export default function AIBookmarkForm (props) {
     setConfirmProgress({ current: 0, total: parsed.length })
 
     try {
-      for (let i = 0; i < parsed.length; i++) {
-        // Yield between synchronous store mutations so large imports stay responsive.
-        await yieldToUI()
-        createBookmark(parsed[i])
-        setConfirmProgress({ current: i + 1, total: parsed.length })
+      const { error } = await runImportTask({
+        useModal: false,
+        batch: 50,
+        steps: [
+          {
+            items: parsed,
+            process: (chunk) => {
+              chunk.forEach(createBookmark)
+            }
+          }
+        ],
+        onProgress: (current, total) => {
+          setConfirmProgress({ current, total })
+        }
+      })
+      if (error) {
+        throw error
       }
 
       setShowConfirm(false)

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

@@ -26,6 +26,7 @@ const bookmarkSchema = {
     runScripts: 'array - run scripts after connected ({delay,script})',
     quickCommands: 'array - quick commands ({name,command})',
     proxy: 'string - proxy address (socks5://...)',
+    proxyCommand: 'string - ssh proxy command, supports %h (host) %p (port) %r (username) placeholders, e.g. `netbird ssh proxy %h %p` or `cloudflared access ssh --hostname %h`',
     x11: 'boolean - enable x11 forwarding, default is false',
     term: 'string - terminal type, default is xterm-256color, required',
     displayRaw: 'boolean - display raw output, default is false',

package/client/components/bookmark-form/common/bookmark-select.jsx

@@ -1,5 +1,6 @@
 // bookmark select tree (copied from legacy)
 import createTitle from '../../../common/create-title'
+import buildMap from '../../../common/build-map'
 import { TreeSelect } from 'antd'
 
 const e = window.translate
@@ -16,9 +17,9 @@ const hoppingProps = [
 
 function buildTreeData (bookmarkGroups, tree) {
   const cats = bookmarkGroups
-  const btree = cats.reduce((p, k) => ({ ...p, [k.id]: k }), {})
+  const btree = buildMap(cats)
   function buildSubCats (id) {
-    const x = btree[id]
+    const x = btree.get(id)
     if (!x) return ''
     const y = {
       key: x.id,
@@ -34,7 +35,7 @@ function buildTreeData (bookmarkGroups, tree) {
     return y
   }
   function buildLeaf (id) {
-    const x = tree[id]
+    const x = tree.get(id)
     if (!x) return ''
     return { value: x.id, key: x.id, title: createTitle(x) }
   }
@@ -58,10 +59,10 @@ function buildTreeData (bookmarkGroups, tree) {
 
 export default function BookmarkSelect (props) {
   const { bookmarks, bookmarkGroups } = props
-  const tree = bookmarks.reduce((p, k) => ({ ...p, [k.id]: k }), {})
+  const tree = buildMap(bookmarks)
 
   function onSelect (id) {
-    const item = tree[id]
+    const item = tree.get(id)
     if (item) {
       const selected = hoppingProps.reduce((p, k) => {
         if (item[k] !== undefined) {

package/client/components/bookmark-form/common/fields.jsx

@@ -170,7 +170,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
     case 'execSettings':
       return <ExecSettingsField key={name} />
     case 'profileItem':
-      return <ProfileItem key={name} store={ctxProps.store} profileFilter={item.profileFilter} />
+      return <ProfileItem key={name} store={ctxProps.store} form={form} profileFilter={item.profileFilter} />
     case 'quickCommands':
       return <Fragment key={name}>{useQuickCmds(form, ctxProps.formData || {})}</Fragment>
     case 'runScripts':

package/client/components/bookmark-form/common/profile-item.jsx

@@ -5,11 +5,20 @@
 import React from 'react'
 import { Form, Select } from 'antd'
 import { formItemLayout } from '../../../common/form-layout'
+import { authTypeMap } from '../../../common/constants'
 
 const FormItem = Form.Item
 const e = window.translate
 
-export default function ProfileItem ({ store, profileFilter = (d) => d }) {
+export default function ProfileItem ({ store, form, profileFilter = (d) => d }) {
+  const handleChange = (value) => {
+    // applyProfile only resolves credentials when authType is 'profiles',
+    // selecting a profile here means bookmark auth should come from it
+    form?.setFieldsValue({
+      authType: value ? authTypeMap.profiles : authTypeMap.password
+    })
+  }
+
   const opts = {
     options: store.profiles
       .filter(profileFilter)
@@ -18,7 +27,8 @@ export default function ProfileItem ({ store, profileFilter = (d) => d }) {
         value: d.id
       })),
     placeholder: e('profiles'),
-    allowClear: true
+    allowClear: true,
+    onChange: handleChange
   }
 
   return (

package/client/components/bookmark-form/config/common-fields.js

@@ -210,6 +210,16 @@ export const commonFields = {
     label: () => e('proxy')
   },
 
+  proxyCommand: {
+    type: 'input',
+    name: 'proxyCommand',
+    label: () => `${e('proxy')} command`,
+    props: {
+      placeholder: 'netbird ssh proxy %h %p',
+      maxLength: 1024
+    }
+  },
+
   x11: {
     type: 'x11',
     name: '__x11__',
@@ -281,6 +291,7 @@ export const sshSettings = [
   },
   commonFields.enableTerminalImage,
   ...terminalSettings.slice(0, -1), // All except terminalBackground
+  commonFields.proxyCommand,
   commonFields.x11,
   commonFields.terminalBackground
 ]

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

@@ -32,7 +32,7 @@ const rdpConfig = {
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.rdp) },
-        { ...commonFields.username, rules: [{ required: true, message: e('username') + ' required' }] },
+        commonFields.username,
         commonFields.password,
         commonFields.description,
         { type: 'input', name: 'domain', label: () => e('domain') },

package/client/components/bookmark-form/tree-select.jsx

@@ -8,26 +8,15 @@ import { useState, useMemo } from 'react'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
 import deepCopy from 'json-deep-copy'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
+import buildMap from '../../common/build-map'
 
 const e = window.translate
 
 function buildData (bookmarks, bookmarkGroups, searchText = '') {
   const searchLower = searchText.toLowerCase()
   const cats = bookmarkGroups
-  const tree = bookmarks
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
-  const btree = cats
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
+  const tree = buildMap(bookmarks)
+  const btree = buildMap(cats)
 
   // Helper to check if a node matches the search
   function matchesSearch (text) {
@@ -37,7 +26,7 @@ function buildData (bookmarks, bookmarkGroups, searchText = '') {
   }
 
   function buildSubCats (id) {
-    const x = btree[id]
+    const x = btree.get(id)
     if (!x) {
       return ''
     }
@@ -64,7 +53,7 @@ function buildData (bookmarks, bookmarkGroups, searchText = '') {
     return y
   }
   function buildLeaf (id) {
-    const x = tree[id]
+    const x = tree.get(id)
     if (!x) {
       return ''
     }

package/client/components/common/import-progress.jsx

@@ -0,0 +1,90 @@
+/**
+ * Shared import progress modal.
+ *
+ * Mounted once in main.jsx (inside ConfigProvider, so antd theme applies)
+ * and driven imperatively through refsStatic by runImportTask
+ * (common/import-task.js) - same pattern as BatchOpRunner.
+ * Uses only existing utility classes (pd1y/mg1t/elli/common-err).
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { Progress } from 'antd'
+import Modal from './modal.jsx'
+import { refsStatic } from './ref'
+import { importProgressRefKey, cancelImportTask } from '../../common/import-task'
+
+const e = window.translate
+
+export default function ImportProgress () {
+  const [state, setState] = useState(null)
+
+  const show = useCallback((next) => {
+    setState(next)
+  }, [])
+
+  const hide = useCallback(() => {
+    setState(null)
+  }, [])
+
+  useEffect(() => {
+    refsStatic.add(importProgressRefKey, { show, hide })
+    return () => {
+      refsStatic.remove(importProgressRefKey)
+    }
+  }, [show, hide])
+
+  if (!state) {
+    return null
+  }
+  const {
+    title,
+    status,
+    current,
+    total,
+    label,
+    error,
+    cancelable
+  } = state
+  const running = status === 'running'
+  const percent = Math.floor(current * 100 / (total || 1))
+  const modalProps = {
+    title: title || e('import'),
+    open: true,
+    width: 420,
+    zIndex: 5000,
+    maskClosable: false,
+    onCancel: running
+      ? (cancelable ? cancelImportTask : undefined)
+      : hide,
+    footer: running && !cancelable
+      ? null
+      : (
+        <div className='custom-modal-footer-buttons'>
+          <button
+            type='button'
+            className='custom-modal-cancel-btn'
+            onClick={running ? cancelImportTask : hide}
+          >
+            {e('cancel')}
+          </button>
+        </div>
+        )
+  }
+  return (
+    <Modal {...modalProps}>
+      <div className='pd1y'>
+        <Progress
+          percent={percent}
+          status={status === 'error' ? 'exception' : 'active'}
+          format={() => `${current}/${total}`}
+        />
+        <div className='elli mg1t'>{label}</div>
+        {
+          error
+            ? <div className='common-err mg1t'>{error.message || String(error)}</div>
+            : null
+        }
+      </div>
+    </Modal>
+  )
+}

package/client/components/footer/footer-entry.jsx

@@ -151,7 +151,7 @@ export default auto(function FooterEntry (props) {
       <div className='terminal-footer-unit terminal-footer-info'>
         <InfoCircleOutlined
           onClick={handleInfoPanel}
-          className='pointer font18 terminal-info-icon'
+          className='pointer font14 terminal-info-icon'
         />
       </div>
     )

package/client/components/main/main.jsx

@@ -38,6 +38,7 @@ import BookmarkFromHistoryModal from '../bookmark-form/bookmark-from-history-mod
 import AutoSync from '../setting-sync/auto-sync'
 import BatchOpRunner from '../batch-op/batch-op-runner'
 import UnixTimestampTooltip from '../terminal/unix-timestamp-tooltip'
+import ImportProgress from '../common/import-progress.jsx'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -318,6 +319,7 @@ export default auto(function Index (props) {
         <BookmarkFromHistoryModal />
         <NotificationContainer />
         <BatchOpRunner />
+        <ImportProgress />
         <ShortcutBarEntry store={store} />
         {!isAIDisabled() && <AIConfigModal store={store} />}
         <UnixTimestampTooltip />

package/client/components/profile/profile-form-rdp.jsx

@@ -15,7 +15,7 @@ export default function ProfileFormRdp (props) {
         {...formItemLayout}
         label={e('username')}
         hasFeedback
-        name={['rdp', 'userName']}
+        name={['rdp', 'username']}
       >
         <Input />
       </FormItem>