@electerm/electerm-react 3.10.0 → 3.11.11

package/client/components/ai/agent-tools.js

@@ -0,0 +1,193 @@
+import { z } from '../../common/zod'
+import { bookmarkSchemas } from '../../common/bookmark-schemas'
+
+function buildAddBookmarkParameters () {
+  const typeProperties = {}
+  for (const [type, schema] of Object.entries(bookmarkSchemas)) {
+    typeProperties[type] = z.toJSONSchema(z.object(schema))
+  }
+
+  return {
+    type: 'object',
+    properties: {
+      type: {
+        type: 'string',
+        enum: Object.keys(bookmarkSchemas),
+        description: 'Bookmark type'
+      },
+      ...Object.fromEntries(
+        Object.entries(typeProperties).map(([type, schema]) => [
+          type,
+          { type: 'object', description: `Fields for ${type} bookmark`, ...schema }
+        ])
+      )
+    },
+    required: ['type']
+  }
+}
+
+export const agentTools = [
+  {
+    type: 'function',
+    function: {
+      name: 'send_terminal_command',
+      description: 'Send a command to a terminal tab and wait for it to finish. Returns the command output.',
+      parameters: {
+        type: 'object',
+        properties: {
+          command: {
+            type: 'string',
+            description: 'The shell command to execute'
+          },
+          tabId: {
+            type: 'string',
+            description: 'Terminal tab ID. Omit to use the active terminal.'
+          }
+        },
+        required: ['command']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'get_terminal_output',
+      description: 'Read the current visible output from a terminal.',
+      parameters: {
+        type: 'object',
+        properties: {
+          tabId: {
+            type: 'string',
+            description: 'Terminal tab ID. Omit for active terminal.'
+          },
+          lines: {
+            type: 'number',
+            description: 'Number of recent lines to read (default 50).'
+          }
+        }
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'open_local_terminal',
+      description: 'Open a new local terminal tab. Returns the new tab ID.',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'list_tabs',
+      description: 'List all open terminal tabs with their IDs, titles, hosts, and types.',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'get_active_tab',
+      description: 'Get the currently active terminal tab.',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'switch_tab',
+      description: 'Switch to a different terminal tab.',
+      parameters: {
+        type: 'object',
+        properties: {
+          tabId: {
+            type: 'string',
+            description: 'The tab ID to switch to.'
+          }
+        },
+        required: ['tabId']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'list_bookmarks',
+      description: 'List all saved bookmarks (SSH, Telnet, VNC, etc.).',
+      parameters: {
+        type: 'object',
+        properties: {}
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'open_bookmark',
+      description: 'Open a saved bookmark as a new terminal tab.',
+      parameters: {
+        type: 'object',
+        properties: {
+          id: {
+            type: 'string',
+            description: 'The bookmark ID to open.'
+          }
+        },
+        required: ['id']
+      }
+    }
+  },
+  {
+    type: 'function',
+    function: {
+      name: 'add_bookmark',
+      description: 'Create a new bookmark. Specify the type and provide type-specific fields. Supported types: ' + Object.keys(bookmarkSchemas).join(', ') + '.',
+      parameters: buildAddBookmarkParameters()
+    }
+  }
+]
+
+export async function executeToolCall (toolName, args) {
+  const store = window.store
+  switch (toolName) {
+    case 'send_terminal_command': {
+      store.mcpSendTerminalCommand(args)
+      const idleResult = await store.mcpWaitForTerminalIdle({
+        tabId: args.tabId || store.activeTabId,
+        timeout: 30000,
+        lines: 100
+      })
+      return JSON.stringify(idleResult)
+    }
+    case 'get_terminal_output':
+      return JSON.stringify(store.mcpGetTerminalOutput(args))
+    case 'open_local_terminal':
+      return JSON.stringify(store.mcpOpenLocalTerminal())
+    case 'list_tabs':
+      return JSON.stringify(store.mcpListTabs())
+    case 'get_active_tab':
+      return JSON.stringify(store.mcpGetActiveTab())
+    case 'switch_tab':
+      return JSON.stringify(store.mcpSwitchTab(args))
+    case 'list_bookmarks':
+      return JSON.stringify(store.mcpListBookmarks())
+    case 'open_bookmark':
+      return JSON.stringify(store.mcpOpenBookmark(args))
+    case 'add_bookmark': {
+      const { type } = args
+      const typeFields = args[type] || {}
+      return JSON.stringify(await store.mcpAddBookmark({ type, ...typeFields }))
+    }
+    default:
+      throw new Error(`Unknown agent tool: ${toolName}`)
+  }
+}

package/client/components/ai/agent.js

@@ -0,0 +1,159 @@
+import { agentTools, executeToolCall } from './agent-tools'
+
+const MAX_ITERATIONS = 15
+
+function buildAgentSystemPrompt (config) {
+  const lang = config.languageAI || window.store.getLangName()
+  const baseRole = config.roleAI || 'You are a helpful assistant.'
+  return `${baseRole}
+
+You are operating inside electerm, a terminal/SSH client. You have access to tools that let you:
+- Run commands in terminal tabs and read their output
+- Open new terminal tabs (local or SSH)
+- Manage bookmarks (create, list, open connections)
+- Switch between tabs
+
+When the user asks you to perform terminal operations, use the available tools.
+Always explain what you are doing before executing commands.
+If a command produces errors, analyze the output and try to fix the issue.
+Prefer using the active terminal unless the user specifies otherwise.
+For SSH connections, create a bookmark and open it rather than running ssh directly.
+
+Reply in ${lang} language.`
+}
+
+function updateChatEntry (chatEntry, updates) {
+  const index = window.store.aiChatHistory.findIndex(i => i.id === chatEntry.id)
+  if (index !== -1) {
+    Object.assign(window.store.aiChatHistory[index], updates)
+    window.store.aiChatHistory = [...window.store.aiChatHistory]
+  }
+}
+
+async function callBackendAIchatWithTools (messages, config) {
+  return window.pre.runGlobalAsync(
+    'AIchatWithTools',
+    messages,
+    config.modelAI,
+    config.baseURLAI,
+    config.apiPathAI,
+    config.apiKeyAI,
+    config.proxyAI,
+    agentTools
+  )
+}
+
+export async function runAgentLoop (chatEntry, config, abortRef) {
+  const messages = [
+    { role: 'system', content: buildAgentSystemPrompt(config) },
+    { role: 'user', content: chatEntry.prompt }
+  ]
+  const toolCallsLog = []
+  let accumulatedContent = ''
+
+  updateChatEntry(chatEntry, {
+    isStreaming: true,
+    toolCalls: [],
+    response: ''
+  })
+
+  for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+    if (abortRef && abortRef.current) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+      })
+      return
+    }
+
+    const result = await callBackendAIchatWithTools(messages, config)
+
+    if (result.error) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent + `\n\n**Error:** ${result.error}`
+      })
+      return
+    }
+
+    const assistantMessage = result.message
+    if (!assistantMessage) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent || 'No response from AI.'
+      })
+      return
+    }
+
+    messages.push(assistantMessage)
+
+    if (assistantMessage.content) {
+      accumulatedContent += (accumulatedContent ? '\n\n' : '') + assistantMessage.content
+      updateChatEntry(chatEntry, {
+        response: accumulatedContent
+      })
+    }
+
+    if (!assistantMessage.tool_calls || assistantMessage.tool_calls.length === 0) {
+      updateChatEntry(chatEntry, {
+        isStreaming: false,
+        response: accumulatedContent
+      })
+      return
+    }
+
+    for (const toolCall of assistantMessage.tool_calls) {
+      if (abortRef && abortRef.current) {
+        updateChatEntry(chatEntry, {
+          isStreaming: false,
+          response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+        })
+        return
+      }
+
+      let args
+      try {
+        args = JSON.parse(toolCall.function.arguments)
+      } catch {
+        args = {}
+      }
+
+      const toolEntry = {
+        id: toolCall.id,
+        name: toolCall.function.name,
+        args,
+        status: 'running',
+        result: null
+      }
+      toolCallsLog.push(toolEntry)
+      updateChatEntry(chatEntry, {
+        toolCalls: [...toolCallsLog]
+      })
+
+      let toolResult
+      try {
+        toolResult = await executeToolCall(toolCall.function.name, args)
+        toolEntry.status = 'completed'
+        toolEntry.result = toolResult
+      } catch (err) {
+        toolEntry.status = 'error'
+        toolEntry.result = err.message
+      }
+
+      updateChatEntry(chatEntry, {
+        toolCalls: [...toolCallsLog]
+      })
+
+      messages.push({
+        role: 'tool',
+        tool_call_id: toolCall.id,
+        content: toolEntry.result
+      })
+    }
+  }
+
+  updateChatEntry(chatEntry, {
+    isStreaming: false,
+    response: accumulatedContent + '\n\n*(Agent reached maximum iterations)*'
+  })
+}

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

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const AIChat = lazy(() => import('./ai-chat'))
+
+export default function AIChatEntry (props) {
+  return (
+    <Suspense fallback={null}>
+      <AIChat {...props} />
+    </Suspense>
+  )
+}

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

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import AIOutput from './ai-output'
 import AIStopIcon from './ai-stop-icon'
+import AgentToolCallCard from './agent-tool-call-card'
+import { runAgentLoop } from './agent'
 import {
   Alert,
   Tooltip
@@ -17,6 +19,7 @@ import { copy } from '../../common/clipboard'
 export default function AIChatHistoryItem ({ item }) {
   const [showOutput, setShowOutput] = useState(true)
   const startedRef = useRef(false)
+  const abortRef = useRef(false)
   const {
     prompt,
     isStreaming,
@@ -28,7 +31,9 @@ export default function AIChatHistoryItem ({ item }) {
     apiPathAI,
     apiKeyAI,
     proxyAI,
-    languageAI
+    languageAI,
+    mode,
+    toolCalls
   } = item
 
   function toggleOutput () {
@@ -108,15 +113,42 @@ export default function AIChatHistoryItem ({ item }) {
     }
   }, [prompt, modelAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, item.id, pollStreamContent])
 
+  const startAgentRequest = useCallback(async () => {
+    abortRef.current = false
+    const config = {
+      modelAI,
+      roleAI,
+      baseURLAI,
+      apiPathAI,
+      apiKeyAI,
+      proxyAI,
+      languageAI
+    }
+    await runAgentLoop(item, config, abortRef)
+  }, [modelAI, roleAI, baseURLAI, apiPathAI, apiKeyAI, proxyAI, languageAI, item.id])
+
   useEffect(() => {
     if (!response && !startedRef.current) {
       startedRef.current = true
-      startRequest()
+      if (mode === 'agent') {
+        startAgentRequest()
+      } else {
+        startRequest()
+      }
     }
   }, [])
 
   async function handleStop (e) {
     e.stopPropagation()
+    if (mode === 'agent') {
+      abortRef.current = true
+      const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
+      if (index !== -1) {
+        window.store.aiChatHistory[index].isStreaming = false
+        window.store.aiChatHistory = [...window.store.aiChatHistory]
+      }
+      return
+    }
     if (!sessionId) return
 
     try {
@@ -194,6 +226,19 @@ export default function AIChatHistoryItem ({ item }) {
     )
   }
 
+  function renderToolCalls () {
+    if (mode !== 'agent' || !toolCalls || !toolCalls.length) {
+      return null
+    }
+    return (
+      <div className='agent-tool-calls'>
+        {toolCalls.map((tc) => (
+          <AgentToolCallCard key={tc.id} toolCall={tc} />
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className='chat-history-item'>
       <div className='mg1y'>
@@ -201,6 +246,7 @@ export default function AIChatHistoryItem ({ item }) {
           <Alert {...alertProps} />
         </Tooltip>
       </div>
+      {renderToolCalls()}
       {showOutput && <AIOutput item={item} />}
     </div>
   )

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react'
-import { Flex, Input } from 'antd'
+import { Flex, Input, Segmented } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import uid from '../../common/uid'
@@ -21,6 +21,8 @@ const MAX_HISTORY = 100
 
 export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
+  const [mode, setMode] = useState('ask')
+  const isAgent = mode === 'agent'
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
@@ -38,6 +40,8 @@ export default function AIChat (props) {
       response: '',
       isStreaming: false,
       sessionId: null,
+      mode,
+      toolCalls: [],
       ...pick(props.config, [
         'modelAI',
         'roleAI',
@@ -57,7 +61,7 @@ export default function AIChat (props) {
     if (window.store.aiChatHistory.length > MAX_HISTORY) {
       window.store.aiChatHistory.splice(MAX_HISTORY)
     }
-  }, [prompt])
+  }, [prompt, mode])
 
   function renderHistory () {
     return (
@@ -75,6 +79,19 @@ export default function AIChat (props) {
     window.store.aiChatHistory = []
   }
 
+  function renderTabSelect () {
+    if (isAgent) {
+      return null
+    }
+    return (
+      <TabSelect
+        selectedTabIds={props.selectedTabIds}
+        tabs={props.tabs}
+        activeTabId={props.activeTabId}
+      />
+    )
+  }
+
   function renderSendIcon () {
     return (
       <SendOutlined
@@ -126,11 +143,13 @@ export default function AIChat (props) {
         />
         <Flex className='ai-chat-terminals' justify='space-between' align='center'>
           <Flex align='center'>
-            <TabSelect
-              selectedTabIds={props.selectedTabIds}
-              tabs={props.tabs}
-              activeTabId={props.activeTabId}
+            <Segmented
+              options={['Ask', 'Agent']}
+              value={mode === 'ask' ? 'Ask' : 'Agent'}
+              onChange={(val) => setMode(val === 'Ask' ? 'ask' : 'agent')}
+              size='small'
             />
+            {renderTabSelect()}
             <SettingOutlined
               onClick={toggleConfig}
               className='mg1l pointer icon-hover toggle-ai-setting-icon'

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

@@ -6,7 +6,7 @@ import {
   Alert,
   Space
 } from 'antd'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -14,6 +14,7 @@ import {
 } from '../../common/constants'
 import Password from '../common/password'
 import AiHistory, { addHistoryItem } from './ai-history'
+import message from '../common/message'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
@@ -36,6 +37,7 @@ const proxyOptions = [
 
 export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig }) {
   const [form] = Form.useForm()
+  const [testing, setTesting] = useState(false)
   const baseURLAI = Form.useWatch('baseURLAI', form)
 
   useEffect(() => {
@@ -53,6 +55,37 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     addHistoryItem(STORAGE_KEY_CONFIG, values, EVENT_NAME_CONFIG)
   }
 
+  const handleTest = async () => {
+    try {
+      const values = await form.validateFields()
+      setTesting(true)
+      const res = await window.pre.runGlobalAsync(
+        'AIchat',
+        'Hi',
+        values.modelAI,
+        values.roleAI,
+        values.baseURLAI,
+        values.apiPathAI,
+        values.apiKeyAI,
+        values.proxyAI,
+        false
+      )
+      if (res && res.error) {
+        message.error(res.error)
+      } else if (res && res.response) {
+        message.success('AI config works!')
+      } else {
+        message.error('Unexpected response from AI API')
+      }
+    } catch (e) {
+      if (e.message) {
+        message.error(e.message)
+      }
+    } finally {
+      setTesting(false)
+    }
+  }
+
   function handleSelectHistory (item) {
     if (item && typeof item === 'object') {
       form.setFieldsValue(item)
@@ -186,9 +219,17 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         </Form.Item>
 
         <Form.Item>
-          <Button type='primary' htmlType='submit'>
-            {e('save')}
-          </Button>
+          <Space>
+            <Button type='primary' htmlType='submit'>
+              {e('save')}
+            </Button>
+            <Button
+              loading={testing}
+              onClick={handleTest}
+            >
+              {e('testConnection')}
+            </Button>
+          </Space>
         </Form.Item>
       </Form>
       <AiHistory

package/client/components/ai/ai.styl

@@ -77,3 +77,76 @@
   align-items center
   .ai-stop-icon-square
     margin-left auto
+
+.agent-tool-calls
+  margin 8px 0
+
+.agent-tool-call-card
+  border 1px solid var(--main-darker)
+  border-radius 4px
+  margin-bottom 6px
+  font-size 13px
+
+.agent-tool-header
+  display flex
+  align-items center
+  padding 6px 8px
+  gap 6px
+
+.agent-tool-name
+  font-weight 500
+
+.agent-tool-tag
+  margin-left auto
+
+.agent-tool-status-running
+  color #1890ff
+  animation spin 1s linear infinite
+
+.agent-tool-status-completed
+  color #52c41a
+
+.agent-tool-status-error
+  color #ff4d4f
+
+.agent-tool-detail
+  padding 0 8px 8px
+  border-top 1px solid var(--main-darker)
+
+.agent-tool-args
+  margin-top 6px
+
+.agent-tool-result
+  margin-top 6px
+
+.agent-tool-label
+  font-weight 500
+  margin-bottom 4px
+  font-size 12px
+  color var(--text-color-2)
+
+.agent-tool-pre
+  background var(--main-dark)
+  padding 6px 8px
+  border-radius 3px
+  font-size 12px
+  max-height 200px
+  overflow-y auto
+  white-space pre-wrap
+  word-break break-all
+  margin-bottom 0
+
+.agent-tool-running
+  border-color #1890ff
+
+.agent-tool-completed
+  border-color #52c41a
+
+.agent-tool-error
+  border-color #ff4d4f
+
+@keyframes spin
+  from
+    transform rotate(0deg)
+  to
+    transform rotate(360deg)

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

@@ -81,6 +81,7 @@ const bookmarkSchema = {
     xon: 'boolean - enable XON flow control, default is false',
     xoff: 'boolean - enable XOFF flow control, default is false',
     xany: 'boolean - enable XANY flow control, default is false',
+    lineEnding: 'string - line ending for Enter key: "" (none), "\\r" (CR), "\\n" (LF), "\\r\\n" (CR+LF)',
     runScripts: 'array - run scripts after connected ({delay,script})',
     description: 'string - bookmark description'
   },