@electerm/electerm-react 3.15.46 → 3.15.58

package/client/components/ai/agent.js

@@ -46,116 +46,121 @@ async function callBackendAIchatWithTools (messages, config) {
 }
 
 export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming) {
-  const messages = [
-    { role: 'system', content: buildAgentSystemPrompt(config) },
-    { role: 'user', content: chatEntry.prompt }
-  ]
-  const toolCallsLog = []
-  let accumulatedContent = ''
-
-  setIsStreaming(true)
-  updateChatEntry(chatEntry, {
-    toolCalls: [],
-    response: ''
-  })
-
-  for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
-    if (abortRef && abortRef.current) {
-      setIsStreaming(false)
-      updateChatEntry(chatEntry, {
-        response: accumulatedContent + '\n\n*(Agent stopped by user)*'
-      })
-      return
-    }
-
-    const result = await callBackendAIchatWithTools(messages, config)
+  window.store.agentRunning = true
+  try {
+    const messages = [
+      { role: 'system', content: buildAgentSystemPrompt(config) },
+      { role: 'user', content: chatEntry.prompt }
+    ]
+    const toolCallsLog = []
+    let accumulatedContent = ''
+
+    setIsStreaming(true)
+    updateChatEntry(chatEntry, {
+      toolCalls: [],
+      response: ''
+    })
+
+    for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+      if (abortRef && abortRef.current) {
+        setIsStreaming(false)
+        updateChatEntry(chatEntry, {
+          response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+        })
+        return
+      }
 
-    if (result.error) {
-      setIsStreaming(false)
-      updateChatEntry(chatEntry, {
-        response: accumulatedContent + `\n\n**Error:** ${result.error}`
-      })
-      return
-    }
+      const result = await callBackendAIchatWithTools(messages, config)
 
-    const assistantMessage = result.message
-    if (!assistantMessage) {
-      setIsStreaming(false)
-      updateChatEntry(chatEntry, {
-        response: accumulatedContent || 'No response from AI.'
-      })
-      return
-    }
+      if (result.error) {
+        setIsStreaming(false)
+        updateChatEntry(chatEntry, {
+          response: accumulatedContent + `\n\n**Error:** ${result.error}`
+        })
+        return
+      }
 
-    messages.push(assistantMessage)
+      const assistantMessage = result.message
+      if (!assistantMessage) {
+        setIsStreaming(false)
+        updateChatEntry(chatEntry, {
+          response: accumulatedContent || 'No response from AI.'
+        })
+        return
+      }
 
-    if (assistantMessage.content) {
-      accumulatedContent += (accumulatedContent ? '\n\n' : '') + assistantMessage.content
-      updateChatEntry(chatEntry, {
-        response: accumulatedContent
-      })
-    }
+      messages.push(assistantMessage)
 
-    if (!assistantMessage.tool_calls || assistantMessage.tool_calls.length === 0) {
-      setIsStreaming(false)
-      updateChatEntry(chatEntry, {
-        response: accumulatedContent
-      })
-      return
-    }
+      if (assistantMessage.content) {
+        accumulatedContent += (accumulatedContent ? '\n\n' : '') + assistantMessage.content
+        updateChatEntry(chatEntry, {
+          response: accumulatedContent
+        })
+      }
 
-    for (const toolCall of assistantMessage.tool_calls) {
-      if (abortRef && abortRef.current) {
+      if (!assistantMessage.tool_calls || assistantMessage.tool_calls.length === 0) {
         setIsStreaming(false)
         updateChatEntry(chatEntry, {
-          response: accumulatedContent + '\n\n*(Agent stopped by user)*'
+          response: accumulatedContent
         })
         return
       }
 
-      let args
-      try {
-        args = JSON.parse(toolCall.function.arguments)
-      } catch {
-        args = {}
-      }
+      for (const toolCall of assistantMessage.tool_calls) {
+        if (abortRef && abortRef.current) {
+          setIsStreaming(false)
+          updateChatEntry(chatEntry, {
+            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]
+        })
 
-      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
-      }
+        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]
-      })
+        updateChatEntry(chatEntry, {
+          toolCalls: [...toolCallsLog]
+        })
 
-      messages.push({
-        role: 'tool',
-        tool_call_id: toolCall.id,
-        content: toolEntry.result
-      })
+        messages.push({
+          role: 'tool',
+          tool_call_id: toolCall.id,
+          content: toolEntry.result
+        })
+      }
     }
-  }
 
-  setIsStreaming(false)
-  updateChatEntry(chatEntry, {
-    response: accumulatedContent + '\n\n*(Agent reached maximum iterations)*'
-  })
+    setIsStreaming(false)
+    updateChatEntry(chatEntry, {
+      response: accumulatedContent + '\n\n*(Agent reached maximum iterations)*'
+    })
+  } finally {
+    window.store.agentRunning = false
+  }
 }

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

@@ -173,7 +173,6 @@ export default function AIChatHistoryItem ({ item }) {
           {showOutput ? <CaretDownOutlined /> : <CaretRightOutlined />}
         </span>
         <span>{prompt}</span>
-        {renderStopButton()}
       </div>
     ),
     type: 'info'
@@ -244,6 +243,7 @@ export default function AIChatHistoryItem ({ item }) {
       </div>
       {renderToolCalls()}
       {showOutput && <AIOutput item={item} />}
+      {renderStopButton()}
     </div>
   )
 }

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

@@ -25,6 +25,7 @@ export default function AIChat (props) {
   const [prompt, setPrompt] = useState('')
   const [mode, setMode] = useState(() => getItem(aiChatModeLsKey) || 'ask')
   const isAgent = mode === 'agent'
+  const submitDisabled = isAgent && props.agentRunning
 
   function handlePromptChange (e) {
     setPrompt(e.target.value)
@@ -103,6 +104,14 @@ export default function AIChat (props) {
   }
 
   function renderSendIcon () {
+    if (submitDisabled) {
+      return (
+        <SendOutlined
+          className='mg1l send-to-ai-icon disabled'
+          title='Agent is running, please wait'
+        />
+      )
+    }
     return (
       <SendOutlined
         onClick={handleSubmit}
@@ -132,7 +141,9 @@ export default function AIChat (props) {
   const handleKeyPress = (e) => {
     if (!e.shiftKey) {
       e.preventDefault()
-      handleSubmit()
+      if (!submitDisabled) {
+        handleSubmit()
+      }
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { copy } from '../../common/clipboard'
 import Link from '../common/external-link'
@@ -8,12 +9,20 @@ import getBrand from './get-brand'
 const e = window.translate
 
 export default function AIOutput ({ item }) {
+  const outputRef = useRef(null)
   const {
     response,
     baseURLAI,
     nameAI,
     modelAI
   } = item
+
+  useEffect(() => {
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight
+    }
+  }, [response])
+
   if (!response) {
     return null
   }
@@ -103,9 +112,11 @@ export default function AIOutput ({ item }) {
   }
 
   return (
-    <div className='pd1'>
-      {renderBrand()}
-      <ReactMarkdown {...mdProps} />
+    <div className='ai-stream-output' ref={outputRef}>
+      <div className='pd1'>
+        {renderBrand()}
+        <ReactMarkdown {...mdProps} />
+      </div>
     </div>
   )
 }

package/client/components/ai/ai.styl

@@ -14,6 +14,12 @@
   overflow-x hidden
 
 .chat-history-item
+  position relative
+  > .ai-stop-icon-square
+    position absolute
+    bottom 8px
+    right 8px
+    z-index 10
   .code-block
     border 1px dashed var(--main-darker)
     padding 5px
@@ -26,6 +32,10 @@
     //   .code-block-actions
     //     display block
 
+.ai-stream-output
+  max-height 400px
+  overflow-y auto
+
 .ai-chat-input
   position relative
   margin-top 10px
@@ -53,6 +63,10 @@
     white-space pre-wrap
     word-break break-all
 
+.send-to-ai-icon.disabled
+  opacity 0.4
+  cursor not-allowed
+
 .clear-ai-icon
   position relative
   &::after

package/client/components/main/main.jsx

@@ -232,7 +232,8 @@ export default auto(function Index (props) {
     tabs: store.getTabs(),
     activeTabId: store.activeTabId,
     showAIConfig: store.showAIConfig,
-    rightPanelTab
+    rightPanelTab,
+    agentRunning: store.agentRunning
   }
   const cmdSuggestionsProps = {
     suggestions: store.terminalCommandSuggestions

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

@@ -11,7 +11,6 @@ import {
   settingMap,
   modals
 } from '../../common/constants'
-
 const TabBookmarks = lazy(() => import('./tab-bookmarks'))
 const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
 const TabSettings = lazy(() => import('./tab-settings'))

package/client/components/setting-sync/server-data-status.jsx

@@ -1,7 +1,8 @@
 import { syncTypes } from '../../common/constants'
 import { useState } from 'react'
-import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
+import { LoadingOutlined, ReloadOutlined, DiffOutlined } from '@ant-design/icons'
 import dayjs from 'dayjs'
+import SyncDataCompare from './sync-data-compare'
 
 const e = window.translate
 
@@ -9,6 +10,7 @@ export default function ServerDataStatus (props) {
   const { store } = window
   const { type, status } = props
   const [loading, setLoading] = useState(false)
+  const [showCompare, setShowCompare] = useState(false)
   const token = store.getSyncToken(type)
   const gistId = store.getSyncGistId(type)
   const canSync = token && (gistId || type === 'custom' || type === 'cloud' || type === syncTypes.webdav)
@@ -20,6 +22,10 @@ export default function ServerDataStatus (props) {
     setLoading(false)
   }
 
+  function handleCompare () {
+    setShowCompare(!showCompare)
+  }
+
   function renderReloadButton () {
     if (loading) {
       return (
@@ -27,10 +33,19 @@ export default function ServerDataStatus (props) {
       )
     }
     return (
-      <ReloadOutlined
-        className='pointer mg1l hover-black'
-        onClick={handleReload}
-      />
+      <span>
+        <ReloadOutlined
+          className='pointer mg1r hover-black'
+          onClick={handleReload}
+        />
+        <span
+          className='pointer mg2l hover-black'
+          onClick={handleCompare}
+        >
+          <DiffOutlined className='mg1r' />
+          {e('compare') || 'compare'}
+        </span>
+      </span>
     )
   }
 
@@ -59,14 +74,17 @@ export default function ServerDataStatus (props) {
     } = status
 
     return (
-      <p>
-        <span className='mg1r'>{e('syncServerDataStatus')}:</span>
-        <b className='mg1r'>{dayjs(lastSyncTime).format('YYYY-MM-DD HH:mm:ss')}</b>
-        <span className='mg1r'>{e('from')}:</span>
-        <b className='mg1r'>{deviceName}</b>
-        <b className='mg1r'>(v{electermVersion})</b>
-        {renderReloadButton()}
-      </p>
+      <div>
+        <p>
+          <span className='mg1r'>{e('syncServerDataStatus')}:</span>
+          <b className='mg1r'>{dayjs(lastSyncTime).format('YYYY-MM-DD HH:mm:ss')}</b>
+          <span className='mg1r'>{e('from')}:</span>
+          <b className='mg1r'>{deviceName}</b>
+          <b className='mg1r'>(v{electermVersion})</b>
+          {renderReloadButton()}
+        </p>
+        {showCompare && <SyncDataCompare syncType={type} />}
+      </div>
     )
   }
 

package/client/components/setting-sync/sync-data-compare.jsx

@@ -0,0 +1,92 @@
+/**
+ * Sync data comparison component
+ * Shows simple diff suggestions
+ */
+
+import { useState, useEffect } from 'react'
+import { Spin } from 'antd'
+
+const e = window.translate
+
+export default function SyncDataCompare (props) {
+  const { store } = window
+  const { syncType } = props
+  const [loading, setLoading] = useState(false)
+  const [comparison, setComparison] = useState(null)
+
+  useEffect(() => {
+    loadComparison()
+  }, [syncType])
+
+  async function loadComparison () {
+    setLoading(true)
+    try {
+      const result = await store.previewServerDataWithCompare(syncType)
+      setComparison(result)
+    } catch (err) {
+      console.error('Failed to load comparison:', err)
+    }
+    setLoading(false)
+  }
+
+  if (!comparison) {
+    return null
+  }
+
+  const { comparison: comp } = comparison
+
+  // Filter only items with differences
+  const diffs = comp.filter(item => item.onlyLocal > 0 || item.onlyServer > 0)
+
+  if (diffs.length === 0) {
+    return (
+      <p className='mg1t sync-diff-text'>
+        {e('dataInSync') || 'Data in sync'}
+      </p>
+    )
+  }
+
+  const nameMap = {
+    bookmarks: e('bookmarks') || 'Bookmarks',
+    bookmarkGroups: 'Bookmark Groups',
+    terminalThemes: e('terminalThemes') || 'Terminal Themes',
+    quickCommands: e('quickCommands') || 'Quick Commands',
+    profiles: e('profiles') || 'Profiles',
+    addressBookmarks: e('addressBookmarks') || 'Address Bookmarks',
+    workspaces: e('workspaces') || 'Workspaces'
+  }
+
+  const lines = diffs.map(item => {
+    const displayName = nameMap[item.name] || item.name
+    const localCount = item.localCount
+    const serverCount = item.serverCount
+    const diff = serverCount - localCount
+    let action = ''
+    if (diff > 0) {
+      action = e('download') || 'download'
+    } else if (diff < 0) {
+      action = e('upload') || 'upload'
+    }
+    return {
+      text: `${e('remote') || 'remote'}: ${serverCount} ${displayName}, ${e('local') || 'local'}: ${localCount} ${displayName}`,
+      action
+    }
+  })
+
+  return (
+    <div className='sync-data-compare mg1t mg2b'>
+      <Spin spinning={loading}>
+        <div className='sync-diff-text'>
+          {lines.map((line, i) => (
+            <p key={i} className='mg0'>
+              {line.text}
+              {line.action && (
+                <span className='sync-suggest-action'> {'->'} {line.action} ?</span>
+              )}
+            </p>
+          ))}
+        </div>
+      </Spin>
+    </div>
+  )
+}

package/client/components/terminal/terminal-interactive-ui.jsx

@@ -90,7 +90,7 @@ export default function TermInteractiveUI ({
             type='primary'
             onClick={onConfirm}
           >
-            {opts.options.submitText || e('submit')}
+            {opts.options.submitText || e('save')}
           </Button>
           <Button
             className='mg1l'

package/client/css/basic.styl

@@ -40,4 +40,9 @@ a
     color var(--text-dark)
 
 .cap
-  text-transform capitalize
+  text-transform capitalize
+
+.sync-data-compare
+  .sync-suggest-action
+    color var(--success)
+    font-weight 500

package/client/store/init-state.js

@@ -87,6 +87,7 @@ export default () => {
     // batch input selected tab ids
     _batchInputSelectedTabIds: new Set(),
     aiChatHistory: [],
+    agentRunning: false,
 
     // sftp
     fileOperation: fileOperationsMap.cp, // cp or mv

package/client/store/sidebar.js

@@ -24,6 +24,9 @@ export default Store => {
     const current = !store.pinned
     ls.setItem(sidebarPinnedKey, current + '')
     store.pinned = current
+    if (!current) {
+      store.setOpenedSideBar('')
+    }
   }
 
   Store.prototype.handleSidebarPanelTab = function (tab) {

package/client/store/sync.js

@@ -234,7 +234,7 @@ export default (Store) => {
         const status = statusContent ? parseJsonSafe(statusContent) : undefined
         store.syncServerStatus[type] = status
       }
-      return
+      return gist
     }
 
     const gist = await fetchData(
@@ -245,6 +245,103 @@ export default (Store) => {
       store.getSyncProxy(type)
     )
     updateSyncServerStatusFromGist(store, gist, type)
+    return gist
+  }
+
+  Store.prototype.previewServerDataWithCompare = async function (type) {
+    const { store } = window
+    const token = store.getSyncToken(type)
+    const gistId = store.getSyncGistId(type)
+    const pass = store.getSyncPassword(type)
+    const { names } = store.getDataSyncNames()
+
+    // Get server data
+    let serverGist
+    if (type === syncTypes.webdav) {
+      serverGist = await fetchData(
+        type,
+        'download',
+        [],
+        token,
+        store.getSyncProxy(type)
+      )
+    } else {
+      serverGist = await fetchData(
+        type,
+        'getOne',
+        [gistId],
+        token,
+        store.getSyncProxy(type)
+      )
+    }
+
+    // Update status
+    if (type === syncTypes.webdav) {
+      if (serverGist && serverGist.files) {
+        const statusContent = get(serverGist, 'files["electerm-status.json"].content')
+        const status = statusContent ? parseJsonSafe(statusContent) : undefined
+        store.syncServerStatus[type] = status
+      }
+    } else {
+      updateSyncServerStatusFromGist(store, serverGist, type)
+    }
+
+    // Compare data
+    const comparison = []
+    const localData = {}
+    const serverData = {}
+
+    for (const n of names) {
+      // Get local data
+      const localItems = store.getItems(n)
+      localData[n] = localItems
+
+      // Get server data
+      let serverStr
+      if (type === syncTypes.webdav) {
+        serverStr = get(serverGist, `files["${n}.json"].content`)
+      } else {
+        serverStr = get(serverGist, `files["${n}.json"].content`)
+      }
+
+      let serverItems = []
+      if (serverStr) {
+        try {
+          if (!isJSON(serverStr)) {
+            serverStr = await window.pre.runGlobalAsync('decryptAsync', serverStr, pass)
+          }
+          serverItems = JSON.parse(serverStr)
+        } catch (e) {
+          console.error(`Failed to parse server data for ${n}:`, e)
+        }
+      }
+      serverData[n] = serverItems
+
+      // Find unique items
+      const localIds = new Set(localItems.map(item => item.id))
+      const serverIds = new Set(serverItems.map(item => item.id))
+
+      const onlyLocal = localItems.filter(item => !serverIds.has(item.id))
+      const onlyServer = serverItems.filter(item => !localIds.has(item.id))
+      const common = localItems.filter(item => serverIds.has(item.id))
+
+      comparison.push({
+        name: n,
+        localCount: localItems.length,
+        serverCount: serverItems.length,
+        onlyLocal: onlyLocal.length,
+        onlyServer: onlyServer.length,
+        common: common.length,
+        localItems: onlyLocal,
+        serverItems: onlyServer
+      })
+    }
+
+    return {
+      localData,
+      serverData,
+      comparison
+    }
   }
 
   Store.prototype.uploadSettingAction = async function (type) {

package/client/store/watch.js

@@ -21,51 +21,45 @@ import dataCompare from '../common/data-compare'
 
 export default store => {
   for (const name of dbNamesForWatch) {
-    window[`watch${name}Running`] = false
     window[`watch${name}`] = autoRun(async () => {
       const n = store.getItems(name)
-      if (window.migrating || window[`watch${name}Running`]) {
+      if (window.migrating) {
         return
       }
-      window[`watch${name}Running`] = true
-      try {
-        const old = refsStatic.get('oldState-' + name)
-        const { updated, added, removed } = dataCompare(
-          old,
-          n
+      const old = refsStatic.get('oldState-' + name)
+      const { updated, added, removed } = dataCompare(
+        old,
+        n
+      )
+      await Promise.all([
+        ...removed.map(item => remove(name, item.id)),
+        ...updated.map(item => update(item.id, item, name, false)),
+        added.length ? insert(name, added) : Promise.resolve()
+      ])
+      const newOrder = (n || []).map(d => d.id)
+      await update(
+        `${name}:order`,
+        newOrder
+      )
+      refsStatic.add('oldState-' + name, deepCopy(n) || [])
+      if (name === 'bookmarks') {
+        store.bookmarksMap = new Map(
+          n.map(d => [d.id, d])
         )
-        await Promise.all([
-          ...removed.map(item => remove(name, item.id)),
-          ...updated.map(item => update(item.id, item, name, false)),
-          added.length ? insert(name, added) : Promise.resolve()
-        ])
-        const newOrder = (n || []).map(d => d.id)
-        await update(
-          `${name}:order`,
-          newOrder
-        )
-        refsStatic.add('oldState-' + name, deepCopy(n) || [])
-        if (name === 'bookmarks') {
-          store.bookmarksMap = new Map(
-            n.map(d => [d.id, d])
-          )
-        }
-        await store.updateLastDataUpdateTime()
-        if (dbNamesForSync.includes(name)) {
-          const syncSetting = store.config.syncSetting || {}
-          const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
-          if (autoSync && autoSyncInterval === 0) {
-            if (autoSyncDirection === 'download') {
-              await store.downloadSettingAll()
-            } else {
-              await store.uploadSettingAll()
-            }
+      }
+      await store.updateLastDataUpdateTime()
+      if (dbNamesForSync.includes(name)) {
+        const syncSetting = store.config.syncSetting || {}
+        const { autoSync, autoSyncInterval, autoSyncDirection } = syncSetting
+        if (autoSync && autoSyncInterval === 0) {
+          if (autoSyncDirection === 'download') {
+            await store.downloadSettingAll()
+          } else {
+            await store.uploadSettingAll()
           }
         }
-        return store[name]
-      } finally {
-        window[`watch${name}Running`] = false
       }
+      return store[name]
     })
     window[`watch${name}`].start()
   }

package/package.json

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