@electerm/electerm-react 2.17.8 → 3.0.6

package/client/common/cache.js

@@ -2,6 +2,8 @@
 // keep limit items in cache
 // we persist cache to local storage, so we can keep cache after restart
 
+import { safeGetItem, safeSetItem } from './safe-local-storage.js'
+
 class MapCache {
   constructor (limit, key) {
     this.limit = limit
@@ -11,7 +13,7 @@ class MapCache {
   }
 
   load () {
-    const data = window.localStorage.getItem(this.key)
+    const data = safeGetItem(this.key)
     if (data) {
       const arr = JSON.parse(data)
       for (const item of arr) {
@@ -28,7 +30,7 @@ class MapCache {
         value
       })
     }
-    window.localStorage.setItem(this.key, JSON.stringify(arr))
+    safeSetItem(this.key, JSON.stringify(arr))
   }
 
   set (key, value) {

package/client/common/db.js

@@ -9,7 +9,7 @@ import { without, isArray } from 'lodash-es'
 import handleError from './error-handler'
 import generate from './uid'
 import safeParse from './to-simple-obj'
-import { encObj, decObj } from './pass-enc'
+import { decObj } from './pass-enc'
 
 /**
  * db action, never direct use it
@@ -46,7 +46,7 @@ export function insert (dbName, inst) {
     const { id, _id, ...rest } = obj
     return {
       _id: _id || id || generate(),
-      ...encObj(rest)
+      ...rest
     }
   })
   return dbAction(dbName, 'insert', safeParse(arr))
@@ -76,9 +76,7 @@ export async function remove (dbName, id) {
 export function update (_id, value, db = 'data', upsert = true) {
   const updates = dbNames.includes(db)
     ? {
-        $set: {
-          ...encObj(value)
-        }
+        $set: value
       }
     : {
         $set: {

package/client/common/default-setting.js

@@ -29,7 +29,6 @@ export default {
   terminalBackgroundTextColor: '#ffffff',
   terminalBackgroundTextFontFamily: 'Maple Mono',
   rendererType: 'canvas',
-  enableSixel: true,
   terminalType: 'xterm-256color',
   keepaliveCountMax: 10,
   keyword2FA: 'verification code,otp,one-time,two-factor,2fa,totp,authenticator,duo,yubikey,security code,mfa,passcode',

package/client/common/pass-enc.js

@@ -1,12 +1,3 @@
-const enc = (str) => {
-  if (typeof str !== 'string') {
-    return str
-  }
-  return str.split('').map((s, i) => {
-    return String.fromCharCode((s.charCodeAt(0) + i + 1) % 65536)
-  }).join('')
-}
-
 const dec = (str) => {
   if (typeof str !== 'string') {
     return str
@@ -16,18 +7,6 @@ const dec = (str) => {
   }).join('')
 }
 
-/**
- * enc password
- * @param {object} obj
- */
-export function encObj (obj) {
-  if (!obj.passwordEncrypted && obj.password) {
-    obj.password = enc(obj.password)
-    obj.passwordEncrypted = true
-  }
-  return obj
-}
-
 /**
  * dec password
  * @param {object} obj

package/client/common/safe-local-storage.js

@@ -1,4 +1,60 @@
 import { termLSPrefix } from './constants'
+import parseJsonSafe from './parse-json-safe'
+
+// ─── Encryption helpers ───────────────────────────────────────────────────────
+
+// Prefix that marks a value encrypted by this module.
+// Values without this prefix are treated as legacy plaintext.
+const ENC_PREFIX = 'enc1:'
+
+let _encKey = null
+
+function getKey () {
+  if (_encKey !== null) return _encKey
+  try {
+    // window.pre is set by pre.js before the store is used; runSync is synchronous IPC
+    _encKey = (window.pre && window.pre.runSync && window.pre.runSync('getStorageKey')) || ''
+  } catch (e) {
+    _encKey = ''
+  }
+  return _encKey
+}
+
+function encrypt (str) {
+  if (!str) return str
+  const key = getKey()
+  if (!key) return str
+  const strBytes = new TextEncoder().encode(str)
+  const keyBytes = new TextEncoder().encode(key)
+  const out = new Uint8Array(strBytes.length)
+  for (let i = 0; i < strBytes.length; i++) {
+    out[i] = strBytes[i] ^ keyBytes[i % keyBytes.length]
+  }
+  let binary = ''
+  for (let i = 0; i < out.length; i++) {
+    binary += String.fromCharCode(out[i])
+  }
+  return ENC_PREFIX + btoa(binary)
+}
+
+function decrypt (str) {
+  if (!str || !str.startsWith(ENC_PREFIX)) return str
+  const key = getKey()
+  if (!key) return str
+  try {
+    const binary = atob(str.slice(ENC_PREFIX.length))
+    const keyBytes = new TextEncoder().encode(key)
+    const out = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) {
+      out[i] = binary.charCodeAt(i) ^ keyBytes[i % keyBytes.length]
+    }
+    return new TextDecoder().decode(out)
+  } catch (e) {
+    return str
+  }
+}
+
+// ─── Internal helper ─────────────────────────────────────────────────────────
 
 function clear () {
   const keys = Object.keys(window.localStorage)
@@ -9,6 +65,8 @@ function clear () {
   }
 }
 
+// ─── Original (plain) functions ──────────────────────────────────────────────
+
 export function setItem (id, str) {
   try {
     window.localStorage.setItem(id, str)
@@ -26,10 +84,57 @@ export function getItem (id) {
 
 export function getItemJSON (id, defaultValue) {
   const str = window.localStorage.getItem(id) || ''
-  return str ? JSON.parse(str) : defaultValue
+  const r = parseJsonSafe(str)
+  if (typeof r === 'string') {
+    return defaultValue
+  }
+  return r || defaultValue
 }
 
 export function setItemJSON (id, obj) {
   const str = JSON.stringify(obj)
   return setItem(id, str)
 }
+
+// ─── Safe (encrypted) functions ──────────────────────────────────────────────
+
+export function safeSetItem (id, str) {
+  if (window.et.isWebApp) {
+    return setItem(id, str)
+  }
+  try {
+    window.localStorage.setItem(id, encrypt(str))
+  } catch (e) {
+    console.log(e)
+    console.log('maybe local storage full, lets reset')
+    clear()
+    window.localStorage.setItem(id, encrypt(str))
+  }
+}
+
+export function safeGetItem (id) {
+  if (window.et.isWebApp) {
+    return getItem(id)
+  }
+  return decrypt(window.localStorage.getItem(id) || '')
+}
+
+export function safeGetItemJSON (id, defaultValue) {
+  if (window.et.isWebApp) {
+    return getItemJSON(id, defaultValue)
+  }
+  const str = decrypt(window.localStorage.getItem(id) || '')
+  const r = parseJsonSafe(str)
+  if (typeof r === 'string') {
+    return defaultValue
+  }
+  return r || defaultValue
+}
+
+export function safeSetItemJSON (id, obj) {
+  if (window.et.isWebApp) {
+    return setItemJSON(id, obj)
+  }
+  const str = JSON.stringify(obj)
+  return safeSetItem(id, str)
+}

package/client/components/ai/ai-chat-history-item.jsx

@@ -1,5 +1,6 @@
-// ai-chat-history-item.jsx
+import { useState, useEffect, useRef, useCallback } from 'react'
 import AIOutput from './ai-output'
+import AIStopIcon from './ai-stop-icon'
 import {
   Alert,
   Tooltip
@@ -12,47 +13,169 @@ import {
   CaretRightOutlined
 } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
-import { useState } from 'react'
 
 export default function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
+  const startedRef = useRef(false)
   const {
-    prompt
+    prompt,
+    isStreaming,
+    sessionId,
+    response,
+    modelAI,
+    roleAI,
+    baseURLAI,
+    apiPathAI,
+    apiKeyAI,
+    proxyAI,
+    languageAI
   } = item
 
   function toggleOutput () {
     setShowOutput(!showOutput)
   }
 
+  function buildRole () {
+    const lang = languageAI || window.store.getLangName()
+    return roleAI + `;用[${lang}]回复`
+  }
+
+  const pollStreamContent = useCallback(async (sid) => {
+    try {
+      const streamResponse = await window.pre.runGlobalAsync('getStreamContent', sid)
+
+      if (streamResponse && streamResponse.error) {
+        if (streamResponse.error === 'Session not found') {
+          return
+        }
+        window.store.removeAiHistory(item.id)
+        return window.store.onError(new Error(streamResponse.error))
+      }
+
+      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].response = streamResponse.content || ''
+        window.store.aiChatHistory[index].isStreaming = streamResponse.hasMore
+        window.store.aiChatHistory = [...window.store.aiChatHistory]
+
+        if (streamResponse.hasMore) {
+          setTimeout(() => pollStreamContent(sid), 200)
+        }
+      }
+    } catch (error) {
+      window.store.removeAiHistory(item.id)
+      window.store.onError(error)
+    }
+  }, [item.id])
+
+  const startRequest = useCallback(async () => {
+    try {
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        prompt,
+        modelAI,
+        buildRole(),
+        baseURLAI,
+        apiPathAI,
+        apiKeyAI,
+        proxyAI,
+        true
+      )
+
+      if (aiResponse && aiResponse.error) {
+        window.store.removeAiHistory(item.id)
+        return window.store.onError(new Error(aiResponse.error))
+      }
+
+      if (aiResponse && aiResponse.isStream && aiResponse.sessionId) {
+        const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+        if (index !== -1) {
+          window.store.aiChatHistory[index].isStreaming = true
+          window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
+          window.store.aiChatHistory[index].response = aiResponse.content || ''
+        }
+        pollStreamContent(aiResponse.sessionId)
+      } else if (aiResponse && aiResponse.response) {
+        const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+        if (index !== -1) {
+          window.store.aiChatHistory[index].response = aiResponse.response
+          window.store.aiChatHistory[index].isStreaming = false
+        }
+      }
+    } catch (error) {
+      window.store.removeAiHistory(item.id)
+      window.store.onError(error)
+    }
+  }, [prompt, modelAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, item.id, pollStreamContent])
+
+  useEffect(() => {
+    if (!response && !startedRef.current) {
+      startedRef.current = true
+      startRequest()
+    }
+  }, [])
+
+  async function handleStop (e) {
+    e.stopPropagation()
+    if (!sessionId) return
+
+    try {
+      await window.pre.runGlobalAsync('stopStream', sessionId)
+      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].isStreaming = false
+        window.store.aiChatHistory = [...window.store.aiChatHistory]
+      }
+    } catch (error) {
+      console.error('Error stopping stream:', error)
+    }
+  }
+
+  function renderStopButton () {
+    if (!isStreaming) {
+      return null
+    }
+    return (
+      <AIStopIcon
+        onClick={handleStop}
+        title='Stop this AI request'
+      />
+    )
+  }
+
   const alertProps = {
     title: (
-      <>
+      <div className='ai-history-item-title'>
         <span className='pointer mg1r' onClick={toggleOutput}>
           {showOutput ? <CaretDownOutlined /> : <CaretRightOutlined />}
         </span>
         <UserOutlined />: {prompt}
-      </>
+        {renderStopButton()}
+      </div>
     ),
     type: 'info'
   }
+
   function handleDel (e) {
     e.stopPropagation()
     window.store.removeAiHistory(item.id)
   }
+
   function handleCopy () {
     copy(prompt)
   }
+
   function renderTitle () {
     return (
       <div>
         <p>
-          <b>Model:</b> {item.modelAI}
+          <b>Model:</b> {modelAI}
         </p>
         <p>
-          <b>Role:</b> {item.roleAI}
+          <b>Role:</b> {roleAI}
         </p>
         <p>
-          <b>Base URL:</b> {item.baseURLAI}
+          <b>Base URL:</b> {baseURLAI}
         </p>
         <p>
           <b>Time:</b> {new Date(item.timestamp).toLocaleString()}
@@ -70,6 +193,7 @@ export default function AIChatHistoryItem ({ item }) {
       </div>
     )
   }
+
   return (
     <div className='chat-history-item'>
       <div className='mg1y'>

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

@@ -14,7 +14,6 @@ import {
 } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
 import { refsStatic } from '../common/ref'
-import AIStopIcon from './ai-stop-icon'
 import './ai.styl'
 
 const { TextArea } = Input
@@ -22,155 +21,43 @@ const MAX_HISTORY = 100
 
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [currentSessionId, setCurrentSessionId] = useState(null)
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
   }
 
-  function buildRole () {
-    const lang = props.config.languageAI || window.store.getLangName()
-    return props.config.roleAI + `;用[${lang}]回复`
-  }
-
-  const handleSubmit = useCallback(async function () {
+  const handleSubmit = useCallback(function () {
     if (window.store.aiConfigMissing()) {
       window.store.toggleAIConfig()
     }
-    if (!prompt.trim() || isLoading) return
-    setIsLoading(true)
+    if (!prompt.trim()) return
 
-    // Create a placeholder entry for the streaming response
     const chatId = uid()
     const chatEntry = {
       prompt,
-      response: '', // Will be updated as stream arrives
+      response: '',
       isStreaming: false,
       sessionId: null,
       ...pick(props.config, [
         'modelAI',
         'roleAI',
-        'baseURLAI'
+        'baseURLAI',
+        'apiPathAI',
+        'apiKeyAI',
+        'proxyAI',
+        'languageAI'
       ]),
       timestamp: Date.now(),
       id: chatId
     }
 
     window.store.aiChatHistory.push(chatEntry)
-
-    try {
-      const aiResponse = await window.pre.runGlobalAsync(
-        'AIchat',
-        prompt,
-        props.config.modelAI,
-        buildRole(),
-        props.config.baseURLAI,
-        props.config.apiPathAI,
-        props.config.apiKeyAI,
-        props.config.proxyAI,
-        true // Enable streaming for chat
-      )
-
-      if (aiResponse && aiResponse.error) {
-        // Remove the placeholder entry and show error
-        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-        if (index !== -1) {
-          window.store.aiChatHistory.splice(index, 1)
-        }
-        setIsLoading(false)
-        return window.store.onError(
-          new Error(aiResponse.error)
-        )
-      }
-
-      if (aiResponse && aiResponse.isStream && aiResponse.sessionId) {
-        // Handle streaming response with polling
-        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-        if (index !== -1) {
-          window.store.aiChatHistory[index].isStreaming = true
-          window.store.aiChatHistory[index].sessionId = aiResponse.sessionId
-          window.store.aiChatHistory[index].response = aiResponse.content || ''
-        }
-        // Store current session ID for stop functionality
-        setCurrentSessionId(aiResponse.sessionId)
-
-        // Start polling for updates
-        pollStreamContent(aiResponse.sessionId, chatId)
-      } else if (aiResponse && aiResponse.response) {
-        // Handle non-streaming response (fallback)
-        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-        if (index !== -1) {
-          window.store.aiChatHistory[index].response = aiResponse.response
-          window.store.aiChatHistory[index].isStreaming = false
-        }
-        setIsLoading(false)
-      }
-    } catch (error) {
-      // Remove the placeholder entry and show error
-      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-      if (index !== -1) {
-        window.store.aiChatHistory.splice(index, 1)
-      }
-      setIsLoading(false)
-      window.store.onError(error)
-    }
+    setPrompt('')
 
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
-    setPrompt('')
-  }, [prompt, isLoading])
-
-  // Function to poll for streaming content updates
-  const pollStreamContent = async (sessionId, chatId) => {
-    try {
-      const streamResponse = await window.pre.runGlobalAsync('getStreamContent', sessionId)
-
-      if (streamResponse && streamResponse.error) {
-        // Session not found or error - stop polling
-        if (streamResponse.error === 'Session not found') {
-          setCurrentSessionId(null)
-          setIsLoading(false)
-          return
-        }
-        // Remove the entry and show error
-        const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-        if (index !== -1) {
-          window.store.aiChatHistory.splice(index, 1)
-        }
-        setIsLoading(false)
-        return window.store.onError(new Error(streamResponse.error))
-      }
-
-      // Update the chat entry with new content
-      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-      if (index !== -1) {
-        window.store.aiChatHistory[index].response = streamResponse.content || ''
-        window.store.aiChatHistory[index].isStreaming = streamResponse.hasMore
-
-        // Force re-render by updating the array reference
-        window.store.aiChatHistory = [...window.store.aiChatHistory]
-
-        // Continue polling if there's more content
-        if (streamResponse.hasMore) {
-          setTimeout(() => pollStreamContent(sessionId, chatId), 200) // Poll every 200ms
-        } else {
-          setCurrentSessionId(null)
-          setIsLoading(false)
-        }
-      }
-    } catch (error) {
-      // Remove the entry and show error
-      const index = window.store.aiChatHistory.findIndex(item => item.id === chatId)
-      if (index !== -1) {
-        window.store.aiChatHistory.splice(index, 1)
-      }
-      setCurrentSessionId(null)
-      setIsLoading(false)
-      window.store.onError(error)
-    }
-  }
+  }, [prompt])
 
   function renderHistory () {
     return (
@@ -188,41 +75,7 @@ export default function AIChat (props) {
     window.store.aiChatHistory = []
   }
 
-  const handleStop = useCallback(async function () {
-    if (!currentSessionId || !isLoading) return
-
-    try {
-      // Call server to stop the stream
-      await window.pre.runGlobalAsync('stopStream', currentSessionId)
-
-      // Reset state
-      setCurrentSessionId(null)
-      setIsLoading(false)
-
-      // Update the chat entry to mark as stopped
-      const chatEntries = window.store.aiChatHistory
-      for (let i = chatEntries.length - 1; i >= 0; i--) {
-        if (chatEntries[i].isStreaming) {
-          chatEntries[i].isStreaming = false
-          break
-        }
-      }
-      window.store.aiChatHistory = [...chatEntries]
-    } catch (error) {
-      console.error('Error stopping stream:', error)
-      setCurrentSessionId(null)
-      setIsLoading(false)
-    }
-  }, [currentSessionId, isLoading])
-
   function renderSendIcon () {
-    if (isLoading) {
-      return (
-        <AIStopIcon
-          onClick={handleStop}
-        />
-      )
-    }
     return (
       <SendOutlined
         onClick={handleSubmit}
@@ -254,7 +107,6 @@ export default function AIChat (props) {
       e.preventDefault()
       handleSubmit()
     }
-    // If Shift+Enter, allow default behavior (new line)
   }
 
   return (
@@ -270,7 +122,6 @@ export default function AIChat (props) {
           onPressEnter={handleKeyPress}
           placeholder='Enter your prompt here'
           autoSize={{ minRows: 3, maxRows: 10 }}
-          disabled={isLoading}
           className='ai-chat-textarea'
         />
         <Flex className='ai-chat-terminals' justify='space-between' align='center'>

package/client/components/ai/ai.styl

@@ -66,9 +66,14 @@
 .ai-stop-icon-square
   width 20px
   height 20px
-  background var(--error)
   border-radius 2px
   display flex
   align-items center
   justify-content center
   font-size 10px
+
+.ai-history-item-title
+  display flex
+  align-items center
+  .ai-stop-icon-square
+    margin-left auto

package/client/components/bookmark-form/common/render-auth-ssh.jsx

@@ -1,117 +1 @@
-/**
- * bookmark form auth renderer (copied from legacy)
- */
-import {
-  Button,
-  Input,
-  AutoComplete,
-  Form,
-  Select
-} from 'antd'
-import { formItemLayout } from '../../../common/form-layout'
-import { uniqBy } from 'lodash-es'
-import Password from '../../common/password'
-import Upload from '../../common/upload'
-
-const { TextArea } = Input
-const FormItem = Form.Item
-const e = window.translate
-
-export default function renderAuth (props) {
-  const {
-    store,
-    form,
-    authType,
-    formItemName = 'password',
-    profileFilter = (d) => d
-  } = props
-  const beforeUpload = async (file) => {
-    const filePath = file.filePath
-    const privateKey = await window.fs.readFile(filePath)
-    form.setFieldsValue({
-      privateKey
-    })
-  }
-  if (authType === 'password') {
-    const opts = {
-      options: uniqBy(
-        store.bookmarks
-          .filter(d => d.password),
-        (d) => d.password
-      )
-        .map(d => ({
-          label: `${d.title ? `(${d.title})` : ''}${d.username || ''}:${d.host}-******`,
-          value: d.password
-        })),
-      placeholder: e('password'),
-      allowClear: false
-    }
-    return (
-      <FormItem
-        {...formItemLayout}
-        label={e('password')}
-        name={formItemName}
-        hasFeedback
-        rules={[{
-          max: 1024, message: '1024 chars max'
-        }]}
-      >
-        <AutoComplete {...opts}>
-          <Password />
-        </AutoComplete>
-      </FormItem>
-    )
-  }
-  if (authType === 'profiles') {
-    const opts = {
-      options: store.profiles
-        .filter(profileFilter)
-        .map(d => ({ label: d.name, value: d.id })),
-      placeholder: e('profiles'),
-      allowClear: true
-    }
-    return (
-      <FormItem
-        {...formItemLayout}
-        label={e('profiles')}
-        name='profile'
-        hasFeedback
-      >
-        <Select {...opts} />
-      </FormItem>
-    )
-  }
-  return [
-    <FormItem
-      {...formItemLayout}
-      label={e('privateKey')}
-      hasFeedback
-      key='privateKey'
-      className='mg1b'
-      rules={[{
-        max: 13000, message: '13000 chars max'
-      }]}
-    >
-      <FormItem noStyle name='privateKey'>
-        <TextArea placeholder={e('privateKeyDesc')} autoSize={{ minRows: 1 }} />
-      </FormItem>
-      <Upload beforeUpload={beforeUpload} fileList={[]}>
-        <Button type='dashed' className='mg2b mg1t'>
-          {e('importFromFile')}
-        </Button>
-      </Upload>
-    </FormItem>,
-    <FormItem
-      key='passphrase'
-      {...formItemLayout}
-      label={e('passphrase')}
-      name='passphrase'
-      hasFeedback
-      rules={[{
-        max: 1024, message: '1024 chars max'
-      }]}
-    >
-      <Password placeholder={e('passphraseDesc')} />
-    </FormItem>
-  ]
-}
+export { default } from './ssh-auth-selector'

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

@@ -239,6 +239,13 @@ export const commonFields = {
     type: 'runScripts',
     name: 'runScripts',
     label: ''
+  },
+
+  enableTerminalImage: {
+    type: 'switch',
+    name: 'enableTerminalImage',
+    label: () => e('enableTerminalImage'),
+    valuePropName: 'checked'
   }
 }
 
@@ -272,6 +279,7 @@ export const sshSettings = [
     label: () => e('ignoreKeyboardInteractive'),
     valuePropName: 'checked'
   },
+  commonFields.enableTerminalImage,
   ...terminalSettings.slice(0, -1), // All except terminalBackground
   commonFields.x11,
   commonFields.terminalBackground

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

@@ -1,5 +1,5 @@
 import { formItemLayout } from '../../../common/form-layout.js'
-import { terminalLocalType, terminalTypes } from '../../../common/constants.js'
+import { terminalLocalType } from '../../../common/constants.js'
 import {
   createBaseInitValues,
   getTerminalDefaults,
@@ -31,7 +31,8 @@ const localConfig = {
         commonFields.category,
         commonFields.colorTitle,
         commonFields.description,
-        { type: 'runScripts', name: 'runScripts', label: '' },
+        commonFields.enableTerminalImage,
+        commonFields.runScripts,
         { type: 'input', name: 'type', label: 'type', hidden: true }
       ]
     },
@@ -39,54 +40,12 @@ const localConfig = {
       key: 'settings',
       label: e('settings'),
       fields: [
-        {
-          type: 'input',
-          name: 'env.LANG',
-          label: 'ENV:LANG',
-          props: { maxLength: 130 }
-        },
-        {
-          type: 'autocomplete',
-          name: 'term',
-          label: () => e('terminalType'),
-          rules: [{ required: true, message: 'terminal type required' }],
-          options: terminalTypes.map(t => ({ label: t, value: t }))
-        },
-        {
-          type: 'switch',
-          name: 'displayRaw',
-          label: () => e('displayRaw'),
-          valuePropName: 'checked'
-        },
-        {
-          type: 'input',
-          name: 'fontFamily',
-          label: () => e('fontFamily'),
-          rules: [{ max: 130, message: '130 chars max' }],
-          props: { placeholder: defaultSettings.fontFamily }
-        },
-        {
-          type: 'number',
-          name: 'fontSize',
-          label: () => e('fontSize'),
-          props: {
-            min: 9,
-            max: 65535,
-            step: 1,
-            placeholder: defaultSettings.fontSize
-          }
-        },
-        {
-          type: 'number',
-          name: 'keepaliveInterval',
-          label: () => e('keepaliveIntervalDesc'),
-          props: {
-            min: 0,
-            max: 20000000,
-            step: 1000
-          }
-        },
-        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') },
+        commonFields.terminalType,
+        commonFields.displayRaw,
+        commonFields.fontFamily,
+        commonFields.fontSize,
+        commonFields.keepaliveInterval,
+        commonFields.terminalBackground,
         // Exec settings - stored as flat properties on bookmark
         { type: 'execSettings' }
       ]
@@ -95,7 +54,7 @@ const localConfig = {
       key: 'quickCommands',
       label: e('quickCommands'),
       fields: [
-        { type: 'quickCommands', name: '__quick__', label: '' }
+        commonFields.quickCommands
       ]
     }
   ]

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

@@ -580,7 +580,6 @@ export default class SettingTerminal extends Component {
           this.renderToggle('saveTerminalLogToFile')
         }
         {this.renderToggle('addTimeStampToTermLog')}
-        {this.renderToggle('enableSixel', 'pd2b', 'SIXEL')}
         {
           [
             'cursorBlink',

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

@@ -29,7 +29,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -956,6 +956,20 @@ export default class Sftp extends Component {
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 
+  handleReloadRemoteSftp = async () => {
+    if (this.sftp) {
+      this.sftp.destroy()
+      this.sftp = null
+    }
+    this.setState({
+      remoteLoading: true,
+      remote: [],
+      remoteFileTree: new Map()
+    }, () => {
+      this.initRemoteAll()
+    })
+  }
+
   parsePath = (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
@@ -1152,6 +1166,25 @@ export default class Sftp extends Component {
     )
   }
 
+  renderSftpPanelTitle (type, username, host) {
+    if (type === typeMap.remote) {
+      return (
+        <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
+          <ReloadOutlined
+            className='mg1r pointer'
+            onClick={this.handleReloadRemoteSftp}
+          />
+          {e('remote')}: {username}@{host}
+        </div>
+      )
+    }
+    return (
+      <div className='sftp-panel-title pd1t pd1b pd1x'>
+        {e('local')}
+      </div>
+    )
+  }
+
   renderSection (type, style, width) {
     const {
       id
@@ -1222,17 +1255,7 @@ export default class Sftp extends Component {
         <Spin spinning={loading}>
           <div className='pd1 sftp-panel'>
             {
-              type === typeMap.remote
-                ? (
-                  <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
-                    {e('remote')}: {username}@{host}
-                  </div>
-                  )
-                : (
-                  <div className='sftp-panel-title pd1t pd1b pd1x'>
-                    {e('local')}
-                  </div>
-                  )
+              this.renderSftpPanelTitle(type, username, host)
             }
             <AddressBar
               {...addrProps}

package/client/components/sidebar/history.jsx

@@ -26,7 +26,7 @@ export default auto(function HistoryPanel (props) {
   } = store
   let arr = store.config.disableConnectionHistory ? [] : history
   if (sortByFrequency) {
-    arr = arr.sort((a, b) => { return b.count - a.count })
+    arr = [...arr].sort((a, b) => { return b.count - a.count })
   }
 
   const handleSortByFrequencyChange = (checked) => {

package/client/components/tabs/app-drag.jsx

@@ -19,6 +19,19 @@ export default function AppDrag (props) {
     return true
   }
 
+  useEffect(() => {
+    if (window.store.shouldSendWindowMove) {
+      return
+    }
+    document.addEventListener('mouseup', onMouseUp)
+    window.addEventListener('contextmenu', onMouseUp)
+
+    return () => {
+      document.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('contextmenu', onMouseUp)
+    }
+  }, [])
+
   function onMouseDown (e) {
     // e.stopPropagation()
     if (canOperate(e)) {
@@ -48,18 +61,6 @@ export default function AppDrag (props) {
       window.pre.runGlobalAsync('maximize')
     }
   }
-  if (!window.store.shouldSendWindowMove) {
-    useEffect(() => {
-      // Listen for mouseup at document level to catch mouseup outside window
-      document.addEventListener('mouseup', onMouseUp)
-      window.addEventListener('contextmenu', onMouseUp)
-
-      return () => {
-        document.removeEventListener('mouseup', onMouseUp)
-        window.removeEventListener('contextmenu', onMouseUp)
-      }
-    }, [])
-  }
   const props0 = {
     className: 'app-drag',
     onDoubleClick

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

@@ -58,7 +58,7 @@ export class KeywordHighlighterAddon {
     const ESC = String.fromCharCode(27) // \x1b
     const BEL = String.fromCharCode(7) // \x07
     // eslint-disable-next-line no-control-regex
-    const ansiPattern = new RegExp('(' + ESC + '\\][^' + BEL + ESC + ']*(?:' + BEL + '|' + ESC + '\\\\)|' + ESC + '\\[[0-9;]*[A-Za-z])', 'g')
+    const ansiPattern = new RegExp('(' + ESC + '\\][^' + BEL + ESC + ']*(?:' + BEL + '|' + ESC + '\\\\)|' + ESC + '\\[\\??[0-9;]*[A-Za-z])', 'g')
 
     const segments = []
     let lastIndex = 0

package/client/components/terminal/terminal.jsx

@@ -833,25 +833,19 @@ class Term extends Component {
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const Unicode11Addon = await loadUnicode11Addon()
     const unicode11Addon = new Unicode11Addon()
-    if (config.enableSixel !== false) {
-      try {
-        const ImageAddon = await loadImageAddon()
-        this.imageAddon = new ImageAddon({
-          enableSizeReports: false,
-          sixelSupport: true,
-          iipSupport: false
-        })
-        term.loadAddon(this.imageAddon)
-      } catch (err) {
-        console.error('load sixel addon failed', err)
-      }
-    }
     term.loadAddon(unicode11Addon)
     term.loadAddon(ligtureAddon)
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
     term.loadAddon(this.cmdAddon)
+    if (tab.enableTerminalImage) {
+      const ImageAddon = await loadImageAddon()
+      this.imageAddon = new ImageAddon({
+        pixelLimit: 33554432
+      })
+      term.loadAddon(this.imageAddon)
+    }
     term.onData(this.onData)
     this.term = term
     term.onSelectionChange(this.onSelectionChange)
@@ -1401,6 +1395,7 @@ class Term extends Component {
       totalLines: this.state.totalLines,
       height
     }
+    const spinCls = loading ? 'loading-wrapper' : 'hide'
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1417,7 +1412,7 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
-          <Spin className='loading-wrapper' spinning={loading} />
+          <Spin className={spinCls} spinning={loading} />
         </div>
       </Dropdown>
     )

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

@@ -4,6 +4,7 @@
  */
 
 // import { transferTypeMap } from '../../common/constants.js'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
 
 /**
@@ -218,7 +219,7 @@ export class TransferClientBase {
    */
   openSaveFolderSelect = async () => {
     // Try to use last saved path
-    const lastPath = this.storageKey ? window.localStorage.getItem(this.storageKey) : null
+    const lastPath = this.storageKey ? safeGetItem(this.storageKey) : null
 
     const savePaths = await window.api.openDialog({
       title: 'Choose a folder to save file(s)',
@@ -238,9 +239,8 @@ export class TransferClientBase {
       return null
     }
 
-    // Save for next time
     if (this.storageKey) {
-      window.localStorage.setItem(this.storageKey, savePaths[0])
+      safeSetItem(this.storageKey, savePaths[0])
     }
     return savePaths[0]
   }

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

@@ -4,19 +4,20 @@
 
 import { useState } from 'react'
 import { Button, Input, Space } from 'antd'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 
 const LS_KEY = 'customEditorCommand'
 const e = window.translate
 
 export default function EditWithCustomEditor ({ loading, editWithCustom }) {
   const [editorCommand, setEditorCommand] = useState(
-    () => window.localStorage.getItem(LS_KEY) || ''
+    () => safeGetItem(LS_KEY) || ''
   )
 
   function handleChange (ev) {
     const val = ev.target.value
     setEditorCommand(val)
-    window.localStorage.setItem(LS_KEY, val)
+    safeSetItem(LS_KEY, val)
   }
 
   function handleClick () {

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

@@ -31,7 +31,7 @@ export default function SimpleEditor (props) {
         // Set selection range to select the matched text
         textarea.setSelectionRange(match.start, match.end)
 
-        // Focus the textarea when explicitly navigating between matches
+        // Focus the textarea when explicitly navigating to show highlight
         textarea.focus()
 
         // Scroll to the selection position
@@ -58,8 +58,6 @@ export default function SimpleEditor (props) {
 
   // Auto-search when keyword changes (but not when text is being edited)
   useEffect(() => {
-    // Set navigating to true so first match is highlighted when searching
-    setIsNavigating(true)
     findMatches()
   }, [searchKeyword])
 

package/client/components/widgets/widget-form.jsx

@@ -99,10 +99,10 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
     }
     return (
       <Alert
-        message='Downloading package may take some time on first use...'
+        title='Downloading package may take some time on first use...'
         type='warning'
         showIcon
-        className='mg1b'
+        className='mg1t'
       />
     )
   }
@@ -123,7 +123,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
         </h4>
         <p>{info.description}</p>
       </div>
-      {renderWarn()}
+
       <Form
         form={form}
         onFinish={handleSubmit}
@@ -144,6 +144,7 @@ export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInsta
               {txt}
             </Button>
           </Tooltip>
+          {renderWarn()}
         </Form.Item>
       </Form>
     </div>

package/client/store/init-state.js

@@ -54,7 +54,7 @@ export default () => {
     lastDataUpdateTime: 0,
     tabs: [],
     activeTabId: '',
-    history: ls.getItemJSON('history', []),
+    history: ls.safeGetItemJSON('history', []),
     sshConfigs: [],
     bookmarks: [],
     bookmarksMap: new Map(),
@@ -77,7 +77,7 @@ export default () => {
     // 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 savedData = ls.safeGetItemJSON(cmdHistoryKey, [])
       const map = new Map()
       if (Array.isArray(savedData)) {
         // Check if old format (array of strings) or new format (array of objects)
@@ -111,7 +111,7 @@ export default () => {
 
     // batch input selected tab ids
     _batchInputSelectedTabIds: new Set(),
-    aiChatHistory: ls.getItemJSON(aiChatHistoryKey, []),
+    aiChatHistory: ls.safeGetItemJSON(aiChatHistoryKey, []),
 
     // sftp
     fileOperation: fileOperationsMap.cp, // cp or mv

package/client/store/sync.js

@@ -487,7 +487,6 @@ export default (Store) => {
       'hotkey',
       'sshReadyTimeout',
       'scrollback',
-      'enableSixel',
       'fontSize',
       'execWindows',
       'execMac',

package/client/store/watch.js

@@ -135,12 +135,12 @@ export default store => {
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON('history', store.history)
+    ls.safeSetItemJSON('history', store.history)
     return store.history
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON(aiChatHistoryKey, store.aiChatHistory)
+    ls.safeSetItemJSON(aiChatHistoryKey, store.aiChatHistory)
     return store.aiChatHistory
   }).start()
 
@@ -152,7 +152,7 @@ export default store => {
       count: info.count,
       lastUseTime: info.lastUseTime
     }))
-    ls.setItemJSON(cmdHistoryKey, data)
+    ls.safeSetItemJSON(cmdHistoryKey, data)
     return store.terminalCommandHistory
   }).start()
 

package/package.json

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