@electerm/electerm-react 3.15.187 → 5.0.6

package/client/common/ai-feature.js

@@ -0,0 +1,10 @@
+/**
+ * Whether the AI feature is disabled globally.
+ *
+ * Set `window.et.disableAIFeature = true` (the same way `disableUpgradeCheck`
+ * is injected into the built index.html `_global` data) to hide every
+ * AI-related button / icon / setting menu in the UI.
+ */
+export const isAIDisabled = () => {
+  return !!(window.et && window.et.disableAIFeature)
+}

package/client/common/setting-list.js

@@ -5,28 +5,35 @@ import {
   settingAiId,
   settingPasswordsId
 } from '../common/constants'
+import { isAIDisabled } from './ai-feature'
 
 const e = window.translate
 
-export default () => ([
-  {
-    id: settingTerminalId,
-    title: e('terminal')
-  },
-  {
-    id: settingShortcutsId,
-    title: e('settingShortcuts')
-  },
-  {
-    id: settingSyncId,
-    title: e('settingSync')
-  },
-  {
-    id: settingAiId,
-    title: 'AI'
-  },
-  {
-    id: settingPasswordsId,
-    title: e('password')
+export default () => {
+  const list = [
+    {
+      id: settingTerminalId,
+      title: e('terminal')
+    },
+    {
+      id: settingShortcutsId,
+      title: e('settingShortcuts')
+    },
+    {
+      id: settingSyncId,
+      title: e('settingSync')
+    },
+    {
+      id: settingAiId,
+      title: 'AI'
+    },
+    {
+      id: settingPasswordsId,
+      title: e('password')
+    }
+  ]
+  if (isAIDisabled()) {
+    return list.filter(item => item.id !== settingAiId)
   }
-])
+  return list
+}

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

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

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

@@ -21,6 +21,7 @@ import { LoadingOutlined, BookOutlined, RobotOutlined } from '@ant-design/icons'
 import sessionConfig from './config/session-config'
 import renderForm from './render-form'
 import AIBookmarkForm from './ai-bookmark-form'
+import { isAIDisabled } from '../../common/ai-feature'
 import './bookmark-form.styl'
 
 const e = window.translate
@@ -61,6 +62,9 @@ export default class BookmarkIndex2 extends PureComponent {
   }
 
   getInitAiModeState () {
+    if (isAIDisabled()) {
+      return false
+    }
     const v = window.et.openBookmarkWithAIMode
     if (v !== true) {
       return false
@@ -120,7 +124,7 @@ export default class BookmarkIndex2 extends PureComponent {
   }
 
   renderAIButton (isNew) {
-    if (!isNew || this.state.aiMode) {
+    if (!isNew || this.state.aiMode || isAIDisabled()) {
       return null
     }
     return (

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

@@ -11,6 +11,7 @@ import encodes from '../bookmark-form/common/encodes'
 import { refs } from '../common/ref'
 import Qm from '../quick-commands/quick-commands-select'
 import AIIcon from '../icons/ai-icon'
+import { isAIDisabled } from '../../common/ai-feature'
 import CmdHistory from './cmd-history'
 
 const {
@@ -189,7 +190,7 @@ export default auto(function FooterEntry (props) {
   return (
     <div {...sideProps}>
       <div className='terminal-footer-flex'>
-        {renderAIIcon()}
+        {!isAIDisabled() && renderAIIcon()}
         {renderCmdHistory()}
         {renderQuickCommands()}
         {renderBatchInputs()}

package/client/components/main/main.jsx

@@ -20,6 +20,7 @@ import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
+import { isAIDisabled } from '../../common/ai-feature'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
 import InfoModal from '../sidebar/info-modal.jsx'
@@ -290,7 +291,7 @@ export default auto(function Index (props) {
         <Resolutions {...resProps} />
         <InfoModal {...infoModalProps} />
         <RightSidePanel {...rightPanelProps}>
-          <AIChat {...aiChatProps} />
+          {!isAIDisabled() && <AIChat {...aiChatProps} />}
           <TerminalInfo key={store.activeTabId} {...terminalInfoProps} />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
@@ -306,7 +307,7 @@ export default auto(function Index (props) {
         <BookmarkFromHistoryModal />
         <NotificationContainer />
         <BatchOpRunner />
-        <AIConfigModal store={store} />
+        {!isAIDisabled() && <AIConfigModal store={store} />}
         <UnixTimestampTooltip />
       </div>
     </ConfigProvider>

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

@@ -10,7 +10,6 @@ import { isEqual, last, isNumber, some, isArray, pick, uniq, debounce } from 'lo
 import FileSection from './file-item'
 import resolve from '../../common/resolve'
 import wait from '../../common/wait'
-import isAbsPath from '../../common/is-absolute-path'
 import classnames from 'classnames'
 import sorterIndex from '../../common/index-sorter'
 import { handleErr } from '../../common/fetch'
@@ -107,8 +106,6 @@ export default class Sftp extends Component {
     this.sftp = null
     clearTimeout(this.timer4)
     this.timer4 = null
-    clearTimeout(this.timer5)
-    this.timer5 = null
     // Clear sort cache to prevent memory leaks
     this._sortCache?.clear()
     this._lastSortArgs = null
@@ -455,9 +452,7 @@ export default class Sftp extends Component {
     }
     const type = files[0]?.type || _type
     const func = this[type + 'Del']
-    for (const f of files) {
-      await func(f)
-    }
+    await Promise.all(files.map(f => func(f)))
     if (type === typeMap.remote) {
       await wait(500)
     }
@@ -560,8 +555,10 @@ export default class Sftp extends Component {
   }
 
   initRemoteAll = async () => {
-    await this.remoteList()
-    this.remoteListOwner()
+    await Promise.all([
+      this.remoteList(),
+      this.remoteListOwner().catch(e => console.debug('remoteListOwner error:', e))
+    ])
   }
 
   modifier = (...args) => {
@@ -647,12 +644,10 @@ export default class Sftp extends Component {
   }
 
   remoteListOwner = async () => {
-    const remoteUidTree = await owner.remoteListUsers(
-      this.props.pid
-    )
-    const remoteGidTree = await owner.remoteListGroups(
-      this.props.pid
-    )
+    const [remoteUidTree, remoteGidTree] = await Promise.all([
+      owner.remoteListUsers(this.props.pid),
+      owner.remoteListGroups(this.props.pid)
+    ])
     this.setState({
       remoteGidTree,
       remoteUidTree
@@ -660,8 +655,10 @@ export default class Sftp extends Component {
   }
 
   localListOwner = async () => {
-    const localUidTree = await owner.localListUsers()
-    const localGidTree = await owner.localListGroups()
+    const [localUidTree, localGidTree] = await Promise.all([
+      owner.localListUsers(),
+      owner.localListGroups()
+    ])
     this.setState({
       localGidTree,
       localUidTree
@@ -800,14 +797,6 @@ export default class Sftp extends Component {
           sftpCreated: true
         })
       })
-      this.timer5 = setTimeout(() => {
-        if (this.type !== 'ftp') {
-          this.updateRemoteList(remote, remotePath, sftp)
-        }
-        this.props.editTab(tab.id, {
-          sftpCreated: true
-        })
-      }, 1000)
     } catch (e) {
       const update = {
         remoteLoading: false,
@@ -828,41 +817,34 @@ export default class Sftp extends Component {
     remotePath,
     sftp
   ) => {
-    const remote = []
-    for (const r of remotes) {
-      const { name } = r
-      if (r.isSymbol) {
-        const linkPath = resolve(remotePath, name)
-        let realpath = await sftp.readlink(linkPath)
-          .catch(e => {
-            console.debug(e)
-            return null
-          })
-        if (!realpath) {
-          continue
-        }
-        if (!isAbsPath(realpath)) {
-          realpath = resolve(remotePath, realpath)
-          realpath = await sftp.realpath(realpath)
+    // Resolve all symlinks in parallel for faster updates.
+    // Use sftp.stat (which follows symlinks) directly on the link path
+    // instead of readlink + realpath + stat, reducing 2-3 SFTP round
+    // trips per symlink to just 1.
+    const results = await Promise.all(
+      remotes.map(async r => {
+        if (!r.isSymbol) {
+          r.isSymbolicLink = false
+          return r
         }
+        const linkPath = resolve(remotePath, r.name)
         const realFileInfo = await getRemoteFileInfo(
           sftp,
-          realpath
+          linkPath
         ).catch(e => {
           console.debug('seems a bad symbolic link')
           console.debug(e)
           return null
         })
         if (!realFileInfo) {
-          continue
+          return null
         }
         r.isSymbolicLink = true
         r.isDirectory = realFileInfo.isDirectory
-      } else {
-        r.isSymbolicLink = false
-      }
-      remote.push(r)
-    }
+        return r
+      })
+    )
+    const remote = results.filter(Boolean)
     const update = {
       remote,
       remoteFileTree: this.buildTree(remote, typeMap.remote)
@@ -892,14 +874,13 @@ export default class Sftp extends Component {
         this.getCwdLocal() ||
         this.getLocalHome()
       const locals = await window.fs.readdirAsync(localPath)
-      const local = []
-      for (const name of locals) {
-        const p = resolve(localPath, name)
-        const fileObj = await getLocalFileInfo(p).catch(console.log)
-        if (fileObj) {
-          local.push(fileObj)
-        }
-      }
+      const results = await Promise.all(
+        locals.map(name => {
+          const p = resolve(localPath, name)
+          return getLocalFileInfo(p).catch(console.log)
+        })
+      )
+      const local = results.filter(Boolean)
       const update = {
         local,
         inited: true,

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

@@ -13,6 +13,7 @@ import BookmarksList from '../sidebar/bookmark-select'
 import History from '../sidebar/history'
 import DragHandle from '../common/drag-handle'
 import QuickConnect from './quick-connect'
+import { isAIDisabled } from '../../common/ai-feature'
 
 const e = window.translate
 
@@ -103,12 +104,14 @@ export default function AddBtnMenu ({
           <CodeFilled /> {e('newBookmark')}
         </div>
         {addTabBtn}
-        <div
-          className={cls}
-          onClick={onNewSshAI}
-        >
-          <RobotOutlined /> {e('createBookmarkByAI')}
-        </div>
+        {!isAIDisabled() && (
+          <div
+            className={cls}
+            onClick={onNewSshAI}
+          >
+            <RobotOutlined /> {e('createBookmarkByAI')}
+          </div>
+        )}
         <QuickConnect batch={batch} inputOnly />
         <Tabs
           activeKey={activeTab}

package/client/components/tabs/no-session.jsx

@@ -3,6 +3,7 @@ import { RobotOutlined } from '@ant-design/icons'
 import LogoElem from '../common/logo-elem.jsx'
 import HistoryPanel from '../sidebar/history'
 import QuickConnect from './quick-connect'
+import { isAIDisabled } from '../../common/ai-feature'
 import './no-session.styl'
 
 const e = window.translate
@@ -40,12 +41,14 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
         >
           {e('newBookmark')}
         </Button>
-        <Button
-          onClick={handleCreateAIBookmark}
-          icon={<RobotOutlined />}
-        >
-          {e('createBookmarkByAI')}
-        </Button>
+        {!isAIDisabled() && (
+          <Button
+            onClick={handleCreateAIBookmark}
+            icon={<RobotOutlined />}
+          >
+            {e('createBookmarkByAI')}
+          </Button>
+        )}
         <QuickConnect batch={batch} />
       </div>
       <div className='pd3'>

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

@@ -19,6 +19,15 @@ export function runCmd (pid, cmd) {
   })
 }
 
+export function execCmd (pid, cmd, timeoutMs) {
+  return fetch({
+    pid,
+    cmd,
+    timeoutMs,
+    action: 'exec-cmd'
+  })
+}
+
 export function resizeTerm (pid, cols, rows) {
   return fetch({
     pid,

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -3,6 +3,7 @@ import { refsStatic, refs } from '../common/ref'
 import SuggestionItem from './cmd-item'
 import { aiSuggestionsCache } from '../../common/cache'
 import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
+import { isAIDisabled } from '../../common/ai-feature'
 import classnames from 'classnames'
 import {
   LoadingOutlined
@@ -354,6 +355,9 @@ export default class TerminalCmdSuggestions extends Component {
     const {
       reverse
     } = this.state
+    if (isAIDisabled()) {
+      return null
+    }
     if (
       (pos === 'top' && !reverse) ||
       (pos === 'bottom' && reverse)

package/client/components/terminal/terminal.jsx

@@ -42,6 +42,7 @@ import { getFolderFromFilePath } from '../sftp/file-read.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import { Osc52Addon } from './osc52-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
+import { isAIDisabled } from '../../common/ai-feature.js'
 import {
   AimOutlined
 } from '@ant-design/icons'
@@ -1043,12 +1044,16 @@ class Term extends Component {
         label: e('selectall'),
         extra: selectAllShortcut
       },
-      {
-        key: 'explainWithAi',
-        icon: <AIIcon />,
-        label: e('explainWithAi'),
-        disabled: !hasSelection
-      },
+      ...(
+        isAIDisabled()
+          ? []
+          : [{
+              key: 'explainWithAi',
+              icon: <AIIcon />,
+              label: e('explainWithAi'),
+              disabled: !hasSelection
+            }]
+      ),
       {
         key: 'onClear',
         icon: <iconsMap.ReloadOutlined />,

package/client/components/theme/theme-ai-editor.jsx

@@ -0,0 +1,233 @@
+/**
+ * AI-powered terminal theme generator.
+ * Lets the user describe a theme in natural language, asks the configured AI
+ * provider for a full color palette, and writes the result back into the
+ * theme form as editable theme text.
+ */
+import { useState, useEffect } from 'react'
+import { Button, Input, Space, Alert } from 'antd'
+import {
+  RobotOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import message from '../common/message'
+import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
+import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
+import HelpIcon from '../common/help-icon'
+import { getItem, setItem } from '../../common/safe-local-storage'
+import {
+  requiredThemeProps,
+  validThemeProps,
+  convertTheme,
+  convertThemeToText
+} from '../../common/terminal-theme'
+
+const STORAGE_KEY_DESC = 'ai_theme_description'
+const STORAGE_KEY_HISTORY = 'ai_theme_history'
+const EVENT_NAME_HISTORY = 'ai-theme-history-update'
+const { TextArea } = Input
+const e = window.translate
+
+// Human readable description for every required theme prop, so the model knows
+// exactly what each key controls and which format to use.
+const themePropDescriptions = {
+  main: 'main UI background color (hex #rrggbb)',
+  'main-dark': 'darker variant of the main color (hex)',
+  'main-light': 'lighter variant of the main color (hex)',
+  text: 'main UI text color (hex)',
+  'text-light': 'lighter variant of the text color (hex)',
+  'text-dark': 'darker variant of the text color (hex)',
+  'text-disabled': 'disabled text color (hex)',
+  primary: 'primary accent color for buttons/links (hex)',
+  info: 'info status color (hex)',
+  success: 'success status color (hex)',
+  error: 'error status color (hex)',
+  warn: 'warning status color (hex)',
+  'terminal:foreground': 'default terminal text color (hex or rgba)',
+  'terminal:background': 'terminal background color, should relate to main (hex or rgba)',
+  'terminal:cursor': 'terminal cursor color (hex or rgba)',
+  'terminal:cursorAccent': 'terminal cursor accent color (hex or rgba)',
+  'terminal:selectionBackground': 'terminal text selection background (rgba recommended)',
+  'terminal:black': 'ANSI color 0 - black (hex)',
+  'terminal:red': 'ANSI color 1 - red (hex)',
+  'terminal:green': 'ANSI color 2 - green (hex)',
+  'terminal:yellow': 'ANSI color 3 - yellow (hex)',
+  'terminal:blue': 'ANSI color 4 - blue (hex)',
+  'terminal:magenta': 'ANSI color 5 - magenta (hex)',
+  'terminal:cyan': 'ANSI color 6 - cyan (hex)',
+  'terminal:white': 'ANSI color 7 - white (hex)',
+  'terminal:brightBlack': 'ANSI bright color 8 - bright black (hex)',
+  'terminal:brightRed': 'ANSI bright color 9 - bright red (hex)',
+  'terminal:brightGreen': 'ANSI bright color 10 - bright green (hex)',
+  'terminal:brightYellow': 'ANSI bright color 11 - bright yellow (hex)',
+  'terminal:brightBlue': 'ANSI bright color 12 - bright blue (hex)',
+  'terminal:brightMagenta': 'ANSI bright color 13 - bright magenta (hex)',
+  'terminal:brightCyan': 'ANSI bright color 14 - bright cyan (hex)',
+  'terminal:brightWhite': 'ANSI bright color 15 - bright white (hex)'
+}
+
+/**
+ * build the prompt that asks the AI for a complete theme
+ * @param {string} description
+ * @return {string}
+ */
+function buildThemePrompt (description) {
+  const lang = window.store.config.languageAI || window.store.getLangName()
+  const fieldList = requiredThemeProps
+    .map(key => `  ${key}=${themePropDescriptions[key] || 'color value'}`)
+    .join('\n')
+  return `You are an electerm terminal theme color generator. Based on the user's natural language description, generate a complete and harmonious color palette by filling in EVERY color listed below.
+
+The theme uses a key=value format (one per line). UI colors use hex (#rrggbb). Terminal colors use hex or rgba. The palette should be cohesive, readable and accessible (keep good contrast between foreground and background).
+
+Required keys (you MUST fill ALL of them):
+${fieldList}
+
+Important rules:
+1. Output ONLY the key=value lines, no markdown code fences, no comments, no extra text
+2. Use exactly the key names listed above
+3. terminal:background should match or relate to main
+4. terminal:foreground must contrast well with terminal:background
+5. Provide distinct, harmonious ANSI 16 colors for the terminal palette
+6. If you include any description text, reply in ${lang} language (but prefer no extra text at all)
+
+User description: ${description}
+
+Generate the theme:`
+}
+
+/**
+ * Normalize whatever the model returned into clean, valid theme text.
+ * Strips markdown fences and drops any key that is not a supported theme prop.
+ * @param {string|object} raw
+ * @return {string}
+ */
+function normalizeGeneratedTheme (raw) {
+  if (!raw) {
+    return ''
+  }
+  let str = typeof raw === 'string' ? raw : JSON.stringify(raw)
+  str = str.trim()
+  if (str.startsWith('```theme')) {
+    str = str.slice(8)
+  } else if (str.startsWith('```')) {
+    str = str.slice(3)
+  }
+  if (str.endsWith('```')) {
+    str = str.slice(0, -3)
+  }
+  str = str.trim()
+  const converted = convertTheme(str)
+  const uiThemeConfig = {}
+  const themeConfig = {}
+  for (const [key, value] of Object.entries(converted.uiThemeConfig)) {
+    if (validThemeProps.includes(key)) {
+      uiThemeConfig[key] = value
+    }
+  }
+  for (const [key, value] of Object.entries(converted.themeConfig)) {
+    if (validThemeProps.includes('terminal:' + key)) {
+      themeConfig[key] = value
+    }
+  }
+  return convertThemeToText({ themeConfig, uiThemeConfig })
+}
+
+export default function ThemeAiEditor (props) {
+  const { onChange, disabled } = props
+  const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setItem(STORAGE_KEY_DESC, description)
+  }, [description])
+
+  async function handleGenerate () {
+    if (disabled) {
+      return
+    }
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+      return
+    }
+    if (!description.trim()) {
+      return message.warning(e('description') + ' required')
+    }
+    setLoading(true)
+    try {
+      const config = window.store.config
+      const prompt = buildThemePrompt(description)
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        prompt,
+        config.modelAI,
+        appendMandatoryGuardrails('You are a helpful assistant that generates electerm terminal theme color palettes.'),
+        config.baseURLAI,
+        config.apiPathAI,
+        config.apiKeyAI,
+        config.proxyAI,
+        false, // disable streaming for a structured response
+        config.authHeaderNameAI
+      )
+      if (aiResponse && aiResponse.error) {
+        throw new Error(aiResponse.error)
+      }
+      const text = normalizeGeneratedTheme(aiResponse && aiResponse.response)
+      if (!text || !text.trim()) {
+        throw new Error('empty response')
+      }
+      onChange(text)
+      addHistoryItem(STORAGE_KEY_HISTORY, description, EVENT_NAME_HISTORY)
+      message.success(e('Done'))
+    } catch (err) {
+      console.error('AI theme generation error:', err)
+      message.error('Can not generate theme from AI response: ' + err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const textAreaProps = {
+    value: description,
+    onChange: ev => setDescription(ev.target.value),
+    placeholder: e('createThemeByAI'),
+    autoSize: { minRows: 4, maxRows: 8 },
+    disabled: loading || disabled
+  }
+
+  const generateBtnProps = {
+    type: 'primary',
+    onClick: handleGenerate,
+    disabled: !description.trim() || disabled,
+    icon: loading ? <LoadingOutlined /> : <RobotOutlined />,
+    loading
+  }
+
+  return (
+    <div className='theme-ai-editor'>
+      <div className='pd1b'>
+        <Alert
+          type='info'
+          showIcon
+          title={e('aiSecurityNotice')}
+        />
+      </div>
+      <div className='pd1b'>
+        <TextArea {...textAreaProps} />
+      </div>
+      <AiHistory
+        storageKey={STORAGE_KEY_HISTORY}
+        eventName={EVENT_NAME_HISTORY}
+        onSelect={setDescription}
+      />
+      <div className='pd1t'>
+        <Space>
+          <Button {...generateBtnProps}>
+            {e('generate')}
+          </Button>
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Create-theme-by-AI' />
+        </Space>
+      </div>
+    </div>
+  )
+}

package/client/components/theme/theme-form.jsx

@@ -1,5 +1,11 @@
 import { useRef, useState } from 'react'
-import { Button, Input, Form, Space } from 'antd'
+import { Button, Input, Form, Tabs, Flex } from 'antd'
+import {
+  BgColorsOutlined,
+  FontSizeOutlined,
+  RobotOutlined,
+  SkinOutlined
+} from '@ant-design/icons'
 import message from '../common/message'
 import {
   convertTheme,
@@ -10,9 +16,11 @@ import {
 } from '../../common/terminal-theme'
 import { defaultTheme, defaultThemeLight } from '../../common/theme-defaults'
 import generate from '../../common/uid'
+import { isAIDisabled } from '../../common/ai-feature'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
 import ThemePicker from './theme-editor'
+import ThemeAiEditor from './theme-ai-editor'
 import Upload from '../common/upload'
 // import './theme-form.styl'
 
@@ -48,8 +56,8 @@ export default function ThemeForm (props) {
     // A regex to test the hex color format
     const hexColorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
 
-    // A regex to test the rgba color format
-    const rgbaColorRegex = /^rgba\(\d{1,3}, +\d{1,3}, +\d{1,3}, +(0|0?\.\d+|1)\)$/
+    // A regex to test the rgba color format (whitespace after commas is optional)
+    const rgbaColorRegex = /^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(0|0?\.\d+|1)\)$/
 
     // A message to store the error message
     let message = ''
@@ -168,9 +176,13 @@ export default function ThemeForm (props) {
     setTxt(tt)
   }
 
-  function handleSwitchEditor (e) {
-    e.preventDefault()
-    setEditor(editor === 'theme-editor-txt' ? 'theme-editor-color-picker' : 'theme-editor-txt')
+  function handleAiGenerated (text) {
+    form.setFieldsValue({
+      themeText: text
+    })
+    setTxt(text)
+    // jump to the text editor so the user can review/adjust the result
+    setEditor('theme-editor-txt')
   }
 
   function renderFuncs (id) {
@@ -238,12 +250,48 @@ export default function ThemeForm (props) {
   }
   const isDefaultTheme = id === defaultTheme().id || id === defaultThemeLight().id
   const disabled = readonly || isDefaultTheme
-  const switchTxt = editor === 'theme-editor-txt' ? e('editWithColorPicker') : e('editWithTextEditor')
   const pickerProps = {
     onChange: onPickerChange,
     themeText: txt,
     disabled
   }
+  const tabItems = [
+    {
+      key: 'theme-editor-color-picker',
+      label: (
+        <span>
+          <BgColorsOutlined className='mg1r' />
+          {e('editWithColorPicker')}
+        </span>
+      )
+    },
+    {
+      key: 'theme-editor-txt',
+      label: (
+        <span>
+          <FontSizeOutlined className='mg1r' />
+          {e('editWithTextEditor')}
+        </span>
+      )
+    },
+    ...(!isAIDisabled()
+      ? [{
+          key: 'theme-editor-ai',
+          label: (
+            <span>
+              <RobotOutlined className='mg1r' />
+              AI
+            </span>
+          )
+        }]
+      : [])
+  ]
+  const tabsProps = {
+    activeKey: editor,
+    onChange: setEditor,
+    size: 'small',
+    items: tabItems
+  }
   return (
     <Form
       onFinish={handleSubmit}
@@ -253,6 +301,11 @@ export default function ThemeForm (props) {
       name='terminal-theme-form'
       layout='vertical'
     >
+      <div className='mg1b alignright'>
+        <Link to='https://theme.electerm.org'>
+          <SkinOutlined className='mg1r' />https://theme.electerm.org
+        </Link>
+      </div>
       {renderFuncs(id)}
       <FormItem
         label={e('themeName')}
@@ -269,43 +322,43 @@ export default function ThemeForm (props) {
           disabled={disabled}
         />
       </FormItem>
-      <FormItem
-        label={e('themeConfig')}
-      >
-        <div className='mg1b fix'>
-          <span className='fleft'>
-            <Space>
-              <Button
-                type='dashed'
-                onClick={handleSwitchEditor}
-              >
-                {switchTxt}
-              </Button>
-            </Space>
-          </span>
-          <span className='fright'>
-            <Upload
-              beforeUpload={beforeUpload}
-              fileList={[]}
-              className='mg1b'
+      <FormItem>
+        <Flex
+          className='mg1b'
+          justify='space-between'
+          align='center'
+          wrap='wrap'
+          gap={8}
+        >
+          <span>{e('themeConfig')}</span>
+          <Upload
+            beforeUpload={beforeUpload}
+            fileList={[]}
+          >
+            <Button
+              type='dashed'
+              disabled={disabled}
             >
-              <Button
-                type='dashed'
-                disabled={disabled}
-              >
-                {e('importFromFile')}
-              </Button>
-            </Upload>
-          </span>
-        </div>
+              {e('importFromFile')}
+            </Button>
+          </Upload>
+        </Flex>
+        <Tabs {...tabsProps} />
         {
           editor === 'theme-editor-txt'
             ? renderTxt()
-            : (
-              <ThemePicker
-                {...pickerProps}
-              />
-              )
+            : editor === 'theme-editor-ai'
+              ? (
+                <ThemeAiEditor
+                  onChange={handleAiGenerated}
+                  disabled={disabled}
+                />
+                )
+              : (
+                <ThemePicker
+                  {...pickerProps}
+                />
+                )
         }
       </FormItem>
       {

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

@@ -15,7 +15,7 @@ import {
 } from '@ant-design/icons'
 import message from '../common/message'
 import Modal from '../common/modal'
-import { copy } from '../../common/clipboard'
+import { copy, readClipboard } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
 import './vnc.styl'
@@ -49,11 +49,16 @@ export default class VncSession extends PureComponent {
 
   domRef = createRef()
 
+  // clipboard sync state (local -> remote direction)
+  lastClip = null
+  vncViewOnly = false
+
   componentDidMount () {
     this.remoteInit()
   }
 
   componentWillUnmount () {
+    this._detachClipboardSync()
     this.rfb && this.rfb.disconnect()
     delete this.rfb
     clearTimeout(this.timer)
@@ -379,6 +384,7 @@ export default class VncSession extends PureComponent {
     rfb.compressionLevel = compressionLevel
     rfb.viewOnly = viewOnly
     rfb.showDotCursor = showDotCursor
+    this.vncViewOnly = viewOnly
     this.rfb = rfb
   }
 
@@ -388,12 +394,14 @@ export default class VncSession extends PureComponent {
     this.setState({
       loading: false
     })
+    this._attachClipboardSync()
   }
 
   onDesktopsize = (event) => {
   }
 
   onDisconnect = () => {
+    this._detachClipboardSync()
     this.setStatus(statusMap.error)
   }
 
@@ -433,7 +441,61 @@ export default class VncSession extends PureComponent {
   }
 
   onClipboard = (event) => {
-    copy(event.detail.text)
+    const text = event?.detail?.text
+    if (!text || text === this.lastClip) {
+      return
+    }
+    // Track so our click-driven sync won't echo this same text back to the
+    // server (some servers re-broadcast what they receive).
+    this.lastClip = text
+    copy(text)
+  }
+
+  // Push the current local clipboard to the remote when it has changed.
+  // This implements the local -> remote direction that noVNC cannot do itself.
+  // Triggered on view click instead of polling, so it only runs right when the
+  // user is about to interact with the remote desktop (e.g. before pasting).
+  handleViewMouseDown = () => {
+    const rfb = this.rfb
+    if (!rfb || this.vncViewOnly) {
+      return
+    }
+    let text
+    try {
+      text = readClipboard()
+    } catch (e) {
+      return
+    }
+    if (!text || text === this.lastClip) {
+      return
+    }
+    this.lastClip = text
+    try {
+      rfb.clipboardPasteFrom(text)
+    } catch (e) {
+      // clipboardPasteFrom can throw if the socket is in a bad state; ignore
+    }
+  }
+
+  // noVNC calls stopPropagation() on canvas mouse events in the bubble phase,
+  // so React's delegated onClick (or any bubble-phase listener) never fires.
+  // We attach a CAPTURE-phase mousedown listener on the wrapper so it runs
+  // before noVNC can stop propagation. mousedown also fires earlier than click,
+  // giving the remote clipboard time to update before the user pastes.
+  _attachClipboardSync = () => {
+    this._detachClipboardSync()
+    const el = this.domRef.current
+    if (!el) {
+      return
+    }
+    el.addEventListener('mousedown', this.handleViewMouseDown, true)
+  }
+
+  _detachClipboardSync = () => {
+    const el = this.domRef.current
+    if (el) {
+      el.removeEventListener('mousedown', this.handleViewMouseDown, true)
+    }
   }
 
   onBell = (event) => {
@@ -542,6 +604,7 @@ export default class VncSession extends PureComponent {
   }
 
   handleReInit = () => {
+    this._detachClipboardSync()
     this.rfb?.disconnect()
     delete this.rfb
     this.remoteInit()

package/client/store/mcp-handler.js

@@ -6,7 +6,7 @@
 import uid from '../common/uid'
 import { settingMap } from '../common/constants'
 import { refs, refsTabs } from '../components/common/ref'
-import { runCmd } from '../components/terminal/terminal-apis'
+import { runCmd, execCmd } from '../components/terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import {
   getLocalFileInfo,
@@ -125,6 +125,9 @@ export default Store => {
         case 'cancel_terminal_command':
           result = store.mcpCancelTerminalCommand(args)
           break
+        case 'execute_command':
+          result = await store.mcpExecuteCommand(args)
+          break
 
         // Background task operations
         case 'run_background_command':
@@ -139,6 +142,9 @@ export default Store => {
         case 'cancel_background_task':
           result = await store.mcpCancelBackgroundTask(args)
           break
+        case 'cleanup_background_task':
+          result = await store.mcpCleanupBackgroundTask(args)
+          break
 
         // SFTP operations
         case 'sftp_list':
@@ -738,6 +744,173 @@ export default Store => {
     }
   }
 
+  // ==================== Structured Command Execution ====================
+
+  // Keep at most maxChars of a string, favoring the tail (most recent output).
+  function truncateTail (str, maxChars) {
+    if (!str || !maxChars || str.length <= maxChars) {
+      return { text: str || '', truncated: false }
+    }
+    return { text: str.slice(-maxChars), truncated: true }
+  }
+
+  // Read up to maxLines lines from the active terminal buffer.
+  function collectBufferLines (tabId, maxLines = 800) {
+    const term = refs.get('term-' + tabId)
+    if (!term || !term.term) return []
+    const buffer = term.term.buffer.active
+    if (!buffer) return []
+    const cursorY = buffer.cursorY || 0
+    const baseY = buffer.baseY || 0
+    const totalLines = buffer.length || 0
+    const end = Math.min(totalLines, baseY + cursorY + 1)
+    const start = Math.max(0, end - maxLines)
+    const lines = []
+    for (let i = start; i < end; i++) {
+      const line = buffer.getLine(i)
+      lines.push(line ? line.translateToString(true) : '')
+    }
+    return lines
+  }
+
+  // PTY fallback for non-SSH tabs: wrap the command with unique begin/end
+  // sentinels, then poll the terminal buffer for the end sentinel carrying
+  // the exit code. stderr cannot be separated in a PTY — it is merged into
+  // stdout and flagged via stderrMerged.
+  Store.prototype.mcpExecuteCommandPty = async function (args) {
+    const { store } = window
+    const { command, tabId, timeoutMs } = args
+    const marker = `__ET_EXEC_${uid()}__`
+    const startLine = `${marker}S`
+    const wrapped = `echo "${startLine}"; ${command}; echo "${marker}E$?"`
+
+    store.runQuickCommand(wrapped, false, tabId)
+
+    const start = Date.now()
+    const pollInterval = 300
+    const endRe = new RegExp(`^${marker}E(\\d+)$`)
+
+    while (Date.now() - start < timeoutMs) {
+      const lines = collectBufferLines(tabId)
+      let endIdx = -1
+      let exitCode = null
+      for (let i = lines.length - 1; i >= 0; i--) {
+        const m = lines[i].trim().match(endRe)
+        if (m) {
+          endIdx = i
+          exitCode = parseInt(m[1], 10)
+          break
+        }
+      }
+      if (endIdx >= 0) {
+        let startIdx = -1
+        for (let i = endIdx - 1; i >= 0; i--) {
+          if (lines[i].trim() === startLine) {
+            startIdx = i
+            break
+          }
+        }
+        const outLines = lines.slice(startIdx + 1, endIdx)
+        return {
+          stdout: outLines.join('\n').replace(/\n+$/, ''),
+          stderr: '',
+          stderrMerged: true,
+          exitCode,
+          durationMs: Date.now() - start,
+          timedOut: false
+        }
+      }
+      await new Promise(resolve => setTimeout(resolve, pollInterval))
+    }
+
+    // Timeout: return whatever followed the start sentinel (if it appeared)
+    const lines = collectBufferLines(tabId)
+    let startIdx = -1
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (lines[i].trim() === startLine) {
+        startIdx = i
+        break
+      }
+    }
+    const outLines = startIdx >= 0 ? lines.slice(startIdx + 1) : []
+    return {
+      stdout: outLines.join('\n').replace(/\n+$/, ''),
+      stderr: '',
+      stderrMerged: true,
+      exitCode: null,
+      durationMs: Date.now() - start,
+      timedOut: true
+    }
+  }
+
+  Store.prototype.mcpExecuteCommand = async function (args) {
+    const { store } = window
+    const { command } = args
+    const tabId = args.tabId || store.activeTabId
+    const timeoutMs = Math.min(Math.max(args.timeoutMs || 120000, 1000), 600000)
+    const maxOutputBytes = args.maxOutputBytes || 204800
+    // 'exec' (default): SSH exec channel with sentinel-PTY fallback.
+    // 'pty': force sentinel capture in the visible terminal — for commands
+    // that need a TTY (color output, sudo prompts, TTY-dependent tools).
+    const requestedMode = args.mode === 'pty' ? 'pty' : 'exec'
+
+    if (!tabId) {
+      throw new Error('No active terminal')
+    }
+    if (!command) {
+      throw new Error('No command provided')
+    }
+
+    const tab = store.tabs.find(t => t.id === tabId)
+    if (!tab) {
+      throw new Error(`Tab not found: ${tabId}`)
+    }
+
+    const isSsh = tab.type === 'ssh' || (!tab.type && !!tab.host)
+    const start = Date.now()
+    let result = null
+    let mode = 'pty'
+
+    if (requestedMode === 'exec' && isSsh) {
+      try {
+        const r = await execCmd(tabId, command, timeoutMs)
+        result = {
+          stdout: r.stdout || '',
+          stderr: r.stderr || '',
+          stderrMerged: false,
+          exitCode: typeof r.exitCode === 'number' ? r.exitCode : null,
+          durationMs: Date.now() - start,
+          timedOut: !!r.timedOut
+        }
+        mode = 'exec'
+      } catch (e) {
+        // Exec channel unavailable (e.g. connection dropped) — fall back to PTY
+        if (!/not supported/i.test(e.message || '')) {
+          throw e
+        }
+      }
+    }
+
+    if (!result) {
+      result = await store.mcpExecuteCommandPty({ command, tabId, timeoutMs })
+    }
+
+    const out = truncateTail(result.stdout, maxOutputBytes)
+    const err = truncateTail(result.stderr, maxOutputBytes)
+
+    return {
+      stdout: out.text,
+      stderr: err.text,
+      stderrMerged: result.stderrMerged,
+      exitCode: result.exitCode,
+      durationMs: result.durationMs,
+      timedOut: result.timedOut,
+      truncated: out.truncated || err.truncated,
+      mode,
+      tabId
+    }
+  }
+
   // ==================== Background Task Management ====================
 
   const backgroundTasks = new Map()
@@ -814,6 +987,18 @@ export default Store => {
     const pid = pidOutput.trim()
 
     if (!pid) {
+      // PID file is gone. The wrapper removes it when the command finishes,
+      // so a missing PID file usually means COMPLETED — check the exit file
+      // before reporting unknown.
+      const exitOutput = await runMonitorCmd(task.tabId,
+        `cat ${task.exitFile} 2>/dev/null`)
+      const exitCode = exitOutput.trim()
+      if (exitCode !== '') {
+        task.status = 'completed'
+        task.exitCode = parseInt(exitCode, 10)
+        task.endTime = Date.now()
+        return { ...task, status: 'completed', exitCode: task.exitCode }
+      }
       return { ...task, status: 'unknown', message: 'PID file not found' }
     }
 
@@ -883,6 +1068,23 @@ export default Store => {
     }
   }
 
+  // Remove remote temp files (log/pid/exit) and untrack the task.
+  // Used by the MCP Tasks TTL sweep; safe to call on unknown tasks.
+  Store.prototype.mcpCleanupBackgroundTask = async function (args) {
+    const task = backgroundTasks.get(args.taskId)
+    if (!task) {
+      return { success: true, message: 'Task not tracked (already cleaned)' }
+    }
+    try {
+      await runMonitorCmd(task.tabId,
+        `rm -f ${task.logFile} ${task.pidFile} ${task.exitFile}`)
+    } catch (_) {
+      // best-effort remote cleanup
+    }
+    backgroundTasks.delete(args.taskId)
+    return { success: true, taskId: args.taskId }
+  }
+
   // ==================== Settings APIs ====================
 
   Store.prototype.mcpGetSettings = function () {

package/client/store/system-menu.js

@@ -10,6 +10,7 @@ import {
   maxZoom,
   minZoom
 } from '../common/constants'
+import { isAIDisabled } from '../common/ai-feature'
 
 const e = window.translate
 
@@ -63,6 +64,9 @@ export default Store => {
 
   Store.prototype.onNewSshAI = function () {
     const { store } = window
+    if (isAIDisabled()) {
+      return
+    }
     if (store.aiConfigMissing()) {
       store.toggleAIConfig()
       return

package/package.json

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