@electerm/electerm-react 1.100.30 → 1.100.46

package/client/common/constants.js

@@ -24,7 +24,8 @@ export const maxEditFileSize = 1024 * 3000
 export const defaultBookmarkGroupId = 'default'
 export const newBookmarkIdPrefix = 'new-bookmark'
 export const unexpectedPacketErrorDesc = 'Unexpected packet'
-export const noTerminalBgValue = 'no-termimal-bg'
+export const noTerminalBgValue = '[🚫]'
+export const textTerminalBgValue = '[📝]'
 export const sftpRetryInterval = 3000
 export const maxBookmarkGroupTitleLength = 33
 export const termControlHeight = 32

package/client/common/default-setting.js

@@ -24,6 +24,10 @@ export default {
   terminalBackgroundFilterBrightness: 1,
   terminalBackgroundFilterGrayscale: 0,
   terminalBackgroundFilterContrast: 1,
+  terminalBackgroundText: '',
+  terminalBackgroundTextSize: 48,
+  terminalBackgroundTextColor: '#ffffff',
+  terminalBackgroundTextFontFamily: 'Maple Mono',
   rendererType: 'canvas',
   terminalType: 'xterm-256color',
   keepaliveCountMax: 10,

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

@@ -10,7 +10,7 @@ export default auto(function AIChatHistory ({ history }) {
     if (historyRef.current) {
       historyRef.current.scrollTop = historyRef.current.scrollHeight
     }
-  }, [history.length])
+  }, [history])
   if (!history.length) {
     return <div />
   }

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

@@ -39,42 +39,128 @@ export default function AIChat (props) {
     }
     if (!prompt.trim() || isLoading) return
     setIsLoading(true)
-    const aiResponse = await window.pre.runGlobalAsync(
-      'AIchat',
-      prompt,
-      props.config.modelAI,
-      buildRole(),
-      props.config.baseURLAI,
-      props.config.apiPathAI,
-      props.config.apiKeyAI,
-      props.config.proxyAI
-    ).catch(
-      window.store.onError
-    )
-    if (aiResponse && aiResponse.error) {
-      return window.store.onError(
-        new Error(aiResponse.error)
-      )
-    }
-    window.store.aiChatHistory.push({
+
+    // Create a placeholder entry for the streaming response
+    const chatId = uid()
+    const chatEntry = {
       prompt,
-      response: aiResponse.response,
+      response: '', // Will be updated as stream arrives
+      isStreaming: false,
+      sessionId: null,
       ...pick(props.config, [
         'modelAI',
         'roleAI',
         'baseURLAI'
       ]),
       timestamp: Date.now(),
-      id: uid()
-    })
+      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 || ''
+        }
+
+        // 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)
+    }
 
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
     setPrompt('')
-    setIsLoading(false)
   }, [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) {
+        // 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 {
+          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)
+      }
+      setIsLoading(false)
+      window.store.onError(error)
+    }
+  }
+
   function renderHistory () {
     return (
       <AiChatHistory

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

@@ -40,22 +40,22 @@ export default function AIOutput ({ item }) {
 
     return (
       <div className='code-block'>
-        <pre>
-          <code className={className} {...rest}>
-            {children}
-          </code>
-        </pre>
-        <div className='code-block-actions'>
+        <div className='code-block-actions alignright'>
           <CopyOutlined
-            className='code-action-icon pointer'
+            className='code-action-icon pointer iblock'
             onClick={copyToClipboard}
             title={e('copy')}
           />
           <PlayCircleOutlined
-            className='code-action-icon pointer mg1l'
+            className='code-action-icon pointer mg1l iblock'
             onClick={runInTerminal}
           />
         </div>
+        <pre>
+          <code className={className} {...rest}>
+            {children}
+          </code>
+        </pre>
       </div>
     )
   }

package/client/components/ai/ai.styl

@@ -22,11 +22,11 @@
     border-radius 3px
     pre
       margin-bottom 0
-    .code-block-actions
-      display none
-    &:hover
-      .code-block-actions
-        display block
+    // .code-block-actions
+    //   display block
+    // &:hover
+    //   .code-block-actions
+    //     display block
 
 .ai-chat-input
   position relative
@@ -63,4 +63,4 @@
     font-size 12px
     top 8px
     right -4px
-    font-weight bold
+    font-weight bold

package/client/components/bg/css-overwrite.jsx

@@ -3,7 +3,7 @@
 */
 import { Component } from 'react'
 import fs from '../../common/fs'
-import { noTerminalBgValue } from '../../common/constants'
+import { noTerminalBgValue, textTerminalBgValue } from '../../common/constants'
 import { generateMosaicBackground } from './shapes'
 
 export default class CssOverwrite extends Component {
@@ -20,7 +20,11 @@ export default class CssOverwrite extends Component {
       'terminalBackgroundFilterOpacity',
       'terminalBackgroundFilterBrightness',
       'terminalBackgroundFilterContrast',
-      'terminalBackgroundFilterGrayscale'
+      'terminalBackgroundFilterGrayscale',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ]
     const globalChanged = bgProps.some(prop => this.props[prop] !== nextProps[prop])
     if (globalChanged) {
@@ -59,7 +63,7 @@ export default class CssOverwrite extends Component {
   }
 
   // Common function to handle background image style creation
-  createBackgroundStyle = async (imagePath) => {
+  createBackgroundStyle = async (imagePath, textBgProps = null) => {
     if (!imagePath || imagePath === '') {
       return ''
     }
@@ -73,6 +77,8 @@ export default class CssOverwrite extends Component {
       st = 'index'
     } else if (noTerminalBgValue === imagePath) {
       st = 'none'
+    } else if (textTerminalBgValue === imagePath) {
+      st = 'text'
     } else if (imagePath && !isWebImg) {
       content = await fs.readFileAsBase64(imagePath)
         .catch(log.error)
@@ -113,6 +119,27 @@ export default class CssOverwrite extends Component {
     const styles = []
     if (st === 'index') {
       styles.push(`content: '${tab.tabCount}'`)
+    } else if (st === 'text') {
+      const text = bg.terminalBackgroundText || this.props.terminalBackgroundText || ''
+      const size = bg.terminalBackgroundTextSize || this.props.terminalBackgroundTextSize || 48
+      const color = bg.terminalBackgroundTextColor || this.props.terminalBackgroundTextColor || '#ffffff'
+      const fontFamily = bg.terminalBackgroundTextFontFamily || this.props.terminalBackgroundTextFontFamily || 'monospace'
+      if (text) {
+        styles.push(
+          `content: '${text.replace(/'/g, "\\'").replace(/\n/g, '\\A ')}'`,
+          `font-size: ${size}px`,
+          `color: ${color}`,
+          'white-space: pre-wrap',
+          'word-wrap: break-word',
+          'text-align: center',
+          'display: flex',
+          'align-items: center',
+          'justify-content: center',
+          `font-family: ${fontFamily}`,
+          'opacity: 0.3',
+          'background-image: none' // Override default background when text is set
+        )
+      }
     } else if (st !== 'none') {
       styles.push(
         `background-image: ${st}`,
@@ -135,7 +162,28 @@ export default class CssOverwrite extends Component {
 
     const styles = []
 
-    if (st !== 'none' && st !== 'index') {
+    if (st === 'text') {
+      const text = this.props.terminalBackgroundText || ''
+      const size = this.props.terminalBackgroundTextSize || 48
+      const color = this.props.terminalBackgroundTextColor || '#ffffff'
+      const fontFamily = this.props.terminalBackgroundTextFontFamily || 'monospace'
+      if (text) {
+        styles.push(
+          `content: '${text.replace(/'/g, "\\'").replace(/\n/g, '\\A ')}'`,
+          `font-size: ${size}px`,
+          `color: ${color}`,
+          'white-space: pre-wrap',
+          'word-wrap: break-word',
+          'text-align: center',
+          'display: flex',
+          'align-items: center',
+          'justify-content: center',
+          `font-family: ${fontFamily}`,
+          'opacity: 0.3',
+          'background-image: none' // Override default background when text is set
+        )
+      }
+    } else if (st !== 'none' && st !== 'index') {
       styles.push(
         `background-image: ${st}`,
         'background-position: center',

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -80,7 +80,11 @@ export default function BookmarkFormUI (props) {
       'terminalBackgroundFilterBlur',
       'terminalBackgroundFilterBrightness',
       'terminalBackgroundFilterGrayscale',
-      'terminalBackgroundFilterContrast'
+      'terminalBackgroundFilterContrast',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ])
   }
   initialValues = defaultsDeep(initialValues, defaultValues)

package/client/components/main/main.jsx

@@ -18,7 +18,7 @@ import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
-import { isMac, isWin } from '../../common/constants'
+import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider, notification, message } from 'antd'
@@ -117,7 +117,9 @@ export default auto(function Index (props) {
   const ext1 = {
     className: cls
   }
-  const bgTabs = config.terminalBackgroundImagePath === 'index' || config.terminalBackgroundImagePath === 'randomShape'
+  const bgTabs = config.terminalBackgroundImagePath === 'index' ||
+                  config.terminalBackgroundImagePath === 'randomShape' ||
+                  config.terminalBackgroundImagePath === textTerminalBgValue
     ? store.getTabs()
     : store.getTabs().filter(tab =>
       tab.terminalBackground?.terminalBackgroundImagePath

package/client/components/main/term-fullscreen.styl

@@ -14,17 +14,28 @@
     position fixed
     z-index 100
     background rgba(45, 245, 108, 0.8)
-  .term-wrap
-  .session-v-wrap
+  // Hide all sessions first
+  .session-wrap
+    display none
+  // Only show the session that matches the fullscreen tab ID
+  .session-wrap.session-current
+    display block !important
     position fixed
     left 0 !important
     top 0 !important
     height 100% !important
     width 100% !important
-  .term-wrap-1
-    left 10px !important
-    top 10px !important
-    right 10px !important
-    bottom 10px !important
+    .term-wrap
+    .session-v-wrap
+      position fixed
+      left 0 !important
+      top 0 !important
+      height 100% !important
+      width 100% !important
+    .term-wrap-1
+      left 10px !important
+      top 10px !important
+      right 10px !important
+      bottom 10px !important
 .term-fullscreen-control
   display none

package/client/components/session/session.jsx

@@ -465,7 +465,9 @@ export default class SessionWrapper extends Component {
   }
 
   handleFullscreen = () => {
-    window.store.toggleTermFullscreen(true)
+    // Make this tab the active tab before fullscreening
+    window.store.activeTabId = this.props.tab.id
+    window.store.toggleTermFullscreen(true, this.props.tab.id)
   }
 
   toggleBroadcastInput = () => {

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   AutoComplete,
   Upload,
@@ -6,10 +6,12 @@ import {
   Input
 } from 'antd'
 import {
-  noTerminalBgValue
+  noTerminalBgValue,
+  textTerminalBgValue
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import NumberConfig from './number-config'
+import TextBgModal from './text-bg-modal.jsx'
 
 const e = window.translate
 
@@ -19,6 +21,7 @@ export default function TerminalBackgroundConfig ({
   config,
   isGlobal = false
 }) {
+  const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
   const defaultValue = defaultSettings[name]
   const onChange = (v) => onChangeValue(v, name)
@@ -33,6 +36,7 @@ export default function TerminalBackgroundConfig ({
       <span>{e('chooseFile')}</span>
     </Upload>
   )
+
   const dataSource = [
     {
       value: '',
@@ -41,8 +45,34 @@ export default function TerminalBackgroundConfig ({
     {
       value: noTerminalBgValue,
       desc: e('noTerminalBg')
+    },
+    {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('textBackground')}`
     }
   ]
+
+  // Add custom text background option if text is configured
+  if (value === textTerminalBgValue && config.terminalBackgroundText) {
+    const text = config.terminalBackgroundText
+    // Clean up the text for display: remove line breaks, trim whitespace
+    const cleanText = text.replace(/\s+/g, ' ').trim()
+    // Create a more user-friendly truncation
+    const truncatedText = cleanText.length > 25
+      ? cleanText.substring(0, 25) + '...'
+      : cleanText
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 "${truncatedText}"`
+    }
+  } else if (value === textTerminalBgValue) {
+    // Show helpful text when text background is selected but no text is configured
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('clickToConfigureText') || 'Click to configure text'}`
+    }
+  }
+
   if (isGlobal) {
     dataSource.push(
       {
@@ -51,10 +81,45 @@ export default function TerminalBackgroundConfig ({
       },
       {
         value: 'randomShape',
-        desc: e('randomShape')
+        desc: `🎨 ${e('randomShape')}`
       }
     )
   }
+
+  const handleTextBgClick = () => {
+    setShowTextModal(true)
+  }
+
+  const handleTextBgModalOk = (textConfig) => {
+    // Store text configuration in the config
+    onChangeValue(textConfig.text, 'terminalBackgroundText')
+    onChangeValue(textConfig.fontSize, 'terminalBackgroundTextSize')
+    onChangeValue(textConfig.color, 'terminalBackgroundTextColor')
+    onChangeValue(textConfig.fontFamily, 'terminalBackgroundTextFontFamily')
+    onChange(textTerminalBgValue)
+    setShowTextModal(false)
+  }
+
+  const handleTextBgModalCancel = () => {
+    setShowTextModal(false)
+  }
+
+  const handleAutocompleteSelect = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
+  const handleAutocompleteChange = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
   const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
 
   function renderNumber (name, options, title = '', width = 136) {
@@ -88,7 +153,7 @@ export default function TerminalBackgroundConfig ({
   }
 
   const renderFilter = () => {
-    if (config[name] === noTerminalBgValue || config[name] === 'index') return
+    if (config[name] === noTerminalBgValue || config[name] === 'index' || config[name] === textTerminalBgValue) return
 
     return (
       <div>
@@ -137,6 +202,7 @@ export default function TerminalBackgroundConfig ({
       label: item.desc
     }
   }
+
   return (
     <div className='pd2b'>
       <div className='pd1b'>
@@ -145,7 +211,8 @@ export default function TerminalBackgroundConfig ({
         >
           <AutoComplete
             value={value}
-            onChange={onChange}
+            onChange={handleAutocompleteChange}
+            onSelect={handleAutocompleteSelect}
             placeholder={defaultValue}
             className='width-100'
             options={dataSource.map(renderBgOption)}
@@ -160,6 +227,16 @@ export default function TerminalBackgroundConfig ({
       {
         renderFilter()
       }
+
+      <TextBgModal
+        visible={showTextModal}
+        onOk={handleTextBgModalOk}
+        onCancel={handleTextBgModalCancel}
+        initialText={config.terminalBackgroundText || ''}
+        initialSize={config.terminalBackgroundTextSize || 48}
+        initialColor={config.terminalBackgroundTextColor || '#ffffff'}
+        initialFontFamily={config.terminalBackgroundTextFontFamily || 'monospace'}
+      />
     </div>
   )
 }

package/client/components/setting-panel/text-bg-modal.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  Input,
+  InputNumber,
+  Space,
+  Typography,
+  Select
+} from 'antd'
+import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+
+const { TextArea } = Input
+const { Title } = Typography
+const e = window.translate
+
+export default function TextBgModal ({
+  visible,
+  onOk,
+  onCancel,
+  initialText = '',
+  initialSize = 48,
+  initialColor = '#ffffff',
+  initialFontFamily = 'Maple Mono'
+}) {
+  const [text, setText] = useState(initialText)
+  const [fontSize, setFontSize] = useState(initialSize)
+  const [color, setColor] = useState(initialColor)
+  const [fontFamily, setFontFamily] = useState(initialFontFamily)
+
+  const { fonts = [] } = window.et || {}
+
+  const handleOk = () => {
+    onOk({
+      text,
+      fontSize,
+      color,
+      fontFamily
+    })
+  }
+
+  const handleCancel = () => {
+    onCancel()
+    // Reset to initial values
+    setText(initialText)
+    setFontSize(initialSize)
+    setColor(initialColor)
+    setFontFamily(initialFontFamily)
+  }
+
+  return (
+    <Modal
+      title={e('terminalBackgroundText')}
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      width={500}
+      destroyOnClose
+    >
+      <div className='pd1'>
+        <Space direction='vertical' size='large' style={{ width: '100%' }}>
+          <div>
+            <Title level={5}>{e('text')}</Title>
+            <TextArea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={e('enterTextForBackground')}
+              rows={4}
+              maxLength={500}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontSize')}</Title>
+            <InputNumber
+              value={fontSize}
+              onChange={setFontSize}
+              min={12}
+              max={200}
+              style={{ width: '100%' }}
+              placeholder={e('fontSize')}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('textColor')}</Title>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <ColorPicker
+                value={color}
+                onChange={setColor}
+              />
+              <Input
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                placeholder={e('colorValue')}
+                style={{ flex: 1 }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontFamily')}</Title>
+            <Select
+              value={fontFamily}
+              onChange={setFontFamily}
+              style={{ width: '100%' }}
+              placeholder={e('selectFontFamily')}
+              showSearch
+            >
+              {
+                fonts.map(f => {
+                  return (
+                    <Select.Option value={f} key={f}>
+                      <span
+                        className='font-option'
+                        style={{
+                          fontFamily: f
+                        }}
+                      >
+                        {f}
+                      </span>
+                    </Select.Option>
+                  )
+                })
+              }
+            </Select>
+          </div>
+        </Space>
+      </div>
+    </Modal>
+  )
+}

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

@@ -1161,12 +1161,12 @@ export default class Sftp extends Component {
             {
               type === typeMap.remote
                 ? (
-                  <div className='pd1t pd1b pd1x alignright'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
                     {e('remote')}: {username}@{host}
                   </div>
                   )
                 : (
-                  <div className='pd1t pd1b pd1x'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x'>
                     {e('local')}
                   </div>
                   )

package/client/components/tree-list/tree-list.jsx

@@ -354,7 +354,7 @@ export default class ItemListTree extends Component {
         showNewBookmarkGroupForm: true,
         parentId: item.id,
         bookmarkGroupTitle: '',
-        bookmarkGroupColor: ''
+        bookmarkGroupColor: getRandomDefaultColor()
       }
     })
     window.store.expandedKeys.push(item.id)
@@ -417,7 +417,6 @@ export default class ItemListTree extends Component {
     if (tar) {
       target = tar
     }
-    console.log('tar', target, tar)
     const dataDragged = e.dataTransfer.getData('idDragged')
     const [idDragged, pidDrags, isGroupDragged] = dataDragged.split('@')
     const isGroupDrag = isGroupDragged === 'true'

package/client/store/init-state.js

@@ -28,6 +28,7 @@ import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
+import { getRandomDefaultColor } from '../common/rand-hex-color'
 
 const e = window.translate
 
@@ -36,7 +37,8 @@ function getDefaultBookmarkGroups (bookmarks) {
     JSON.stringify({
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
-      bookmarkIds: bookmarks.map(d => d.id)
+      bookmarkIds: bookmarks.map(d => d.id),
+      color: getRandomDefaultColor()
     })
   ]
 }

package/client/store/sync.js

@@ -515,7 +515,11 @@ export default (Store) => {
       'roleAI',
       'languageAI',
       'proxyAI',
-      'disableDeveloperTool'
+      'disableDeveloperTool',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ]
     return pick(store.config, configSyncKeys)
   }

package/package.json

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