@electerm/electerm-react 3.15.186 → 3.15.198

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/default-setting.js

@@ -78,5 +78,6 @@ export default {
   startDirectoryLocal: '',
   allowMultiInstance: false,
   disableDeveloperTool: false,
-  dragDropBehavior: 'ask'
+  dragDropBehavior: 'ask',
+  switchTabOnHover: false
 }

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/setting-panel/setting-common.jsx

@@ -603,6 +603,7 @@ export default class SettingCommon extends Component {
             'hideIP',
             'allowMultiInstance',
             'disableDeveloperTool',
+            'switchTabOnHover',
             'debug'
           ].map(this.renderToggle)
         }

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/tabs/tab.jsx

@@ -121,6 +121,21 @@ class Tab extends Component {
     window.store.clickTab(this.props.tab.id, this.props.batch)
   }
 
+  onMouseEnter = () => {
+    const {
+      tab,
+      batch,
+      currentBatchTabId
+    } = this.props
+    if (document.querySelector('.' + onDragCls)) {
+      return
+    }
+    if (tab.id === currentBatchTabId) {
+      return
+    }
+    window.store.clickTab(tab.id, batch)
+  }
+
   onDrag = () => {
     addClass(this.tabRef.current, onDragCls)
   }
@@ -441,7 +456,8 @@ class Tab extends Component {
     const {
       isLast,
       tab,
-      currentBatchTabId
+      currentBatchTabId,
+      config
     } = this.props
     const {
       id,
@@ -499,6 +515,7 @@ class Tab extends Component {
           data-id={id}
           {...pick(this, [
             'onDrag',
+            ...(config && config.switchTabOnHover ? ['onMouseEnter'] : []),
             'onDragEnter',
             'onDragExit',
             'onDragLeave',

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'
@@ -668,6 +669,7 @@ class Term extends Component {
   // long-press detection here.
   longPressTimer = null
   touchStartPos = null
+  longPressFired = false
   longPressThreshold = 500 // ms
   longPressMoveTolerance = 10 // px
 
@@ -681,6 +683,7 @@ class Term extends Component {
       clientY: touch.clientY,
       target: e.currentTarget
     }
+    this.longPressFired = false
     clearTimeout(this.longPressTimer)
     this.longPressTimer = setTimeout(() => {
       this.handleLongPress()
@@ -702,15 +705,27 @@ class Term extends Component {
   }
 
   onTouchEnd = () => {
+    const wasTap = this.touchStartPos && !this.longPressFired
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null
     this.touchStartPos = null
+    // xterm's own touch (Gesture) handler calls preventDefault()/stopPropagation()
+    // on touchstart/touchend, which suppresses the synthesised mousedown xterm
+    // relies on to focus its hidden helper textarea. As a result a tap never
+    // focuses the terminal on touch devices, so the soft keyboard never opens
+    // and you cannot type. Focus explicitly on a clean tap (not a long-press,
+    // not a scroll) so mobile input works. The focus() runs synchronously inside
+    // this user-gesture handler, so iOS/Android will show the keyboard.
+    if (wasTap && this.term) {
+      this.term.focus()
+    }
   }
 
   handleLongPress = () => {
     if (!this.touchStartPos || this.state.loading) {
       return
     }
+    this.longPressFired = true
     const { clientX, clientY, target } = this.touchStartPos
 
     // Select the word at the touch position (same as desktop right-click word
@@ -1029,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/terminal-info/format-disks.js

@@ -0,0 +1,45 @@
+/**
+ * parse `df` output into disk list
+ */
+
+export default function formatDisks (str) {
+  if (!str) {
+    return {
+      disks: []
+    }
+  }
+  const r = str.split('\n')
+    .slice(1)
+    .reduce((acc, s) => {
+      if (!s.trim()) {
+        return acc
+      }
+      const arr = s.trim().split(/ +/)
+      // df wraps long filesystem names (e.g. nfs "host:/very/long/export/path")
+      // onto a second line that starts with spaces and only holds the numeric
+      // columns. Merge such continuation lines back into the previous entry, so
+      // those disks (commonly nfs) are listed instead of dropped.
+      if (/^\s/.test(s) && acc.length) {
+        const prev = acc[acc.length - 1]
+        prev.size = arr[0]
+        prev.used = arr[1]
+        prev.avail = arr[2]
+        prev.usedPercent = arr[3]
+        prev.mount = arr[4]
+        return acc
+      }
+      acc.push({
+        filesystem: arr[0],
+        size: arr[1],
+        used: arr[2],
+        avail: arr[3],
+        usedPercent: arr[4],
+        mount: arr[5]
+      })
+      return acc
+    }, [])
+    .filter(d => d.filesystem && d.mount)
+  return {
+    disks: r
+  }
+}

package/client/components/terminal-info/run-cmd.jsx

@@ -6,6 +6,7 @@ import { runCmd } from '../terminal/terminal-apis'
 import { useEffect } from 'react'
 import wait from '../../common/wait'
 import parseInt10 from '../../common/parse-int10'
+import formatDisks from './format-disks'
 
 function formatActivities (str) {
   if (!str) {
@@ -31,31 +32,6 @@ function formatActivities (str) {
   }
 }
 
-function formatDisks (str) {
-  if (!str) {
-    return {
-      disks: []
-    }
-  }
-  const r = str.split('\n')
-    .slice(1)
-    .map(s => {
-      const arr = s.split(/ +/)
-      return {
-        filesystem: arr[0],
-        size: arr[1],
-        used: arr[2],
-        avail: arr[3],
-        usedPercent: arr[4],
-        mount: arr[5]
-      }
-    })
-    .filter(d => d.filesystem)
-  return {
-    disks: r
-  }
-}
-
 function formatCpu (str) {
   if (!str) {
     return {

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/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.186",
+  "version": "3.15.198",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",