@electerm/electerm-react 5.5.25 → 5.5.35

package/client/components/side-panel-r/side-panel-r.jsx

@@ -4,7 +4,9 @@ import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
   PushpinOutlined,
-  BarChartOutlined
+  BarChartOutlined,
+  HistoryOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons'
 import {
   Typography,
@@ -57,9 +59,14 @@ export default memo(function RightSidePanel (
   // from a desktop session must not turn the panel into a dock here — that
   // would make it full height over the footer for no reachable reason.
   const pinned = rightPanelPinned && !isMobile
-  const tag = rightPanelTab === 'ai'
-    ? <Tag className='mg1r'>AI</Tag>
-    : <BarChartOutlined className='mg1r' />
+  // one glyph per tab, so the panel says what it is showing; the info tab is
+  // the fallback, since a stale or unknown tab falls back to it everywhere else
+  const tagMap = {
+    ai: <Tag className='mg1r'>AI</Tag>,
+    cmdHistory: <HistoryOutlined className='mg1r' />,
+    quickCommands: <ThunderboltOutlined className='mg1r' />
+  }
+  const tag = tagMap[rightPanelTab] || <BarChartOutlined className='mg1r' />
 
   function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)

package/client/components/sidebar/bookmark-select.jsx

@@ -2,11 +2,13 @@
  * bookmark select
  */
 
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
 export default auto(function BookmarkSelect (props) {
   const { store, from, autoFocus } = props
+  const [activeItemId, setActiveItemId] = useState('')
   const {
     listStyle,
     openedSideBar,
@@ -19,7 +21,7 @@ export default auto(function BookmarkSelect (props) {
   if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
     return null
   }
-  const onClickItem = (item) => {
+  const openBookmark = (item) => {
     // A pinned (docked) panel stays open; anything else — including mobile,
     // where pinning is not a reachable mode — dismisses on selection.
     if (!(store.pinned && !store.isMobile)) {
@@ -27,10 +29,20 @@ export default auto(function BookmarkSelect (props) {
     }
     store.onSelectBookmark(item.id)
   }
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. This is the sidebar list only — the settings bookmarks tab
+  // keeps selecting for editing on a single click.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   const base = {
     bookmarks: bookmarks || [],
     type: 'bookmarks',
-    onClickItem,
+    activeItemId: openOnDoubleClick ? activeItemId : undefined,
+    onClickItem: openOnDoubleClick
+      ? item => setActiveItemId(item.id)
+      : openBookmark,
+    onDoubleClickItem: openOnDoubleClick ? openBookmark : undefined,
     listStyle,
     staticList: true
   }

package/client/components/sidebar/history-item.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
 import { DeleteOutlined, BookFilled } from '@ant-design/icons'
 import { refsStatic } from '../common/ref'
@@ -6,18 +7,32 @@ import { refsStatic } from '../common/ref'
 export default function HistoryItem (props) {
   const { store } = window
   const {
-    item
+    item,
+    openOnDoubleClick
   } = props
+  const [active, setActive] = useState(false)
   const timeoutRef = useRef(null)
 
   const handleClick = useCallback(() => {
+    // with doubleClickToOpenBookmark on, a click only marks the row — the
+    // session opens on the double click below
+    if (openOnDoubleClick) {
+      setActive(true)
+      return
+    }
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
     }
     timeoutRef.current = setTimeout(() => {
       store.onSelectHistory(item.tab)
     }, 10)
-  }, [item.tab])
+  }, [item.tab, openOnDoubleClick])
+
+  const handleDoubleClick = useCallback(() => {
+    if (openOnDoubleClick) {
+      store.onSelectHistory(item.tab)
+    }
+  }, [item.tab, openOnDoubleClick])
 
   useEffect(() => {
     return () => {
@@ -47,9 +62,10 @@ export default function HistoryItem (props) {
   const tt = createTitle(item.tab)
   return (
     <div
-      className='item-list-unit'
+      className={classnames('item-list-unit', { active })}
       title={tt}
       onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
     >
       <div className='elli pd1y pd2x'>
         {title}

package/client/components/sidebar/history.jsx

@@ -25,6 +25,12 @@ export default auto(function HistoryPanel (props) {
   const {
     history
   } = store
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. Read here rather than in HistoryItem because this
+  // component is `auto` — it re-renders when the input modality flips.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   let arr = store.config.disableConnectionHistory ? [] : history
   if (sortByFrequency) {
     arr = [...arr].sort((a, b) => { return b.count - a.count })
@@ -75,6 +81,7 @@ export default auto(function HistoryPanel (props) {
               <HistoryItem
                 key={item.id}
                 item={item}
+                openOnDoubleClick={openOnDoubleClick}
               />
             )
           })

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

@@ -158,7 +158,11 @@ export default class ItemListTree extends Component {
         : matchedRowKeys[0]
       const row = rows.find(item => item.key === rowKey)
       if (row?.item?.id) {
-        this.selectBookmarkById(row.item.id)
+        // Enter is a deliberate activation, so it opens the bookmark even when
+        // doubleClickToOpenBookmark makes a single click only mark the row. The
+        // settings bookmarks tab passes no onDoubleClickItem, so there Enter
+        // still selects for editing, exactly like a click.
+        this.selectBookmarkById(row.item.id, this.props.onDoubleClickItem)
       }
     }
   }
@@ -404,7 +408,9 @@ export default class ItemListTree extends Component {
     }
   }
 
-  selectBookmarkById = (id) => {
+  // `act` overrides what a selection does; only the Enter path passes it, so a
+  // click keeps whatever meaning the consumer gave onClickItem.
+  selectBookmarkById = (id, act) => {
     const { store } = window
     store.storeAssign({
       currentBookmarkGroupId: findBookmarkGroupId(store.bookmarkGroups, id)
@@ -414,7 +420,28 @@ export default class ItemListTree extends Component {
       d => d.id === id
     )
     if (bookmark) {
-      this.props.onClickItem(bookmark)
+      (act || this.props.onClickItem)(bookmark)
+    }
+  }
+
+  handleDoubleClick = (e) => {
+    // only the static list (the sidebar) passes this, so the bookmark edit page
+    // keeps its single click to select behaviour
+    const { onDoubleClickItem, bookmarks } = this.props
+    if (!onDoubleClickItem) {
+      return
+    }
+    const item = findParentBySel(e.target, '.tree-item')
+    // a group toggles on a single click, so a double click would just toggle it
+    // twice and land back where it started
+    if (!item || item.getAttribute('data-is-group') === 'true') {
+      return
+    }
+    const bookmark = bookmarks.find(
+      d => d.id === item.getAttribute('data-item-id')
+    )
+    if (bookmark) {
+      onDoubleClickItem(bookmark)
     }
   }
 
@@ -917,6 +944,7 @@ export default class ItemListTree extends Component {
           className='item-list-wrap'
           style={listStyle}
           ref={this.listRef}
+          onDoubleClick={this.handleDoubleClick}
         >
           {this.renderVirtualTreeContent(rows, editor)}
           {this.renderEditorOverlay(editor)}

package/client/store/common.js

@@ -5,12 +5,15 @@
 import handleError from '../common/error-handler'
 import Modal from '../components/common/modal'
 import { appendMandatoryGuardrails } from '../components/ai/ai-guardrails'
+import { buildSessionMessages } from '../components/ai/ai-context'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
   leftSidePanelWidthKey,
   leftSideBarOpenKey,
   rightSidebarWidthKey,
   rightPanelPinnedKey,
+  cmdHistoryInRightPanelKey,
+  quickCommandsInRightPanelKey,
   addPanelWidthLsKey,
   connectionMap,
   lastAiChatSessionIdKey,
@@ -25,7 +28,7 @@ import { requireTermOfUse } from '../common/term-of-use'
 import { action } from 'manate'
 import uid from '../common/uid'
 import deepCopy from 'json-deep-copy'
-import { aiConfigsArr } from '../components/ai/ai-config-props'
+import { aiConfigsArr, optionalAIConfigsArr } from '../components/ai/ai-config-props'
 
 const e = window.translate
 const { assign } = Object
@@ -179,6 +182,100 @@ export default Store => {
     ls.setItem(rightPanelPinnedKey, v + '')
     window.store.rightPanelPinned = v
   }
+
+  // The cmd history panel has two homes: the footer popover (the default) and
+  // the right side panel. Which one it is in is a durable preference, persisted
+  // like the right panel pin — the footer trigger has to keep landing where the
+  // user last put the panel, or the choice would only survive until the next
+  // reload.
+  Store.prototype.setCmdHistoryInRightPanel = function (v) {
+    ls.setItem(cmdHistoryInRightPanelKey, v + '')
+    window.store.cmdHistoryInRightPanel = v
+  }
+
+  Store.prototype.openCmdHistoryPanel = function () {
+    const { store } = window
+    store.rightPanelVisible = true
+    store.rightPanelTab = 'cmdHistory'
+  }
+
+  // Same toggle contract as toggleInfoPanel/toggleAIPanel: while the history
+  // lives in the right panel, the footer trigger opens and closes it.
+  Store.prototype.toggleCmdHistoryPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'cmdHistory') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.openCmdHistoryPanel()
+  }
+
+  Store.prototype.moveCmdHistoryToRightPanel = function () {
+    const { store } = window
+    store.setCmdHistoryInRightPanel(true)
+    store.openCmdHistoryPanel()
+  }
+
+  // Hand the panel back to the footer popover and open it there: the move has
+  // to be visible, otherwise the panel just looks like it vanished.
+  Store.prototype.moveCmdHistoryToFooter = function () {
+    const { store } = window
+    store.setCmdHistoryInRightPanel(false)
+    if (store.rightPanelTab === 'cmdHistory') {
+      store.rightPanelVisible = false
+    }
+    refsStatic.get('CmdHistory')?.openPopover()
+  }
+
+  // The quick command panel has the same two homes as the cmd history one, and
+  // the same durable preference: the footer popup (the default) and the right
+  // side panel. The footer popup is not a popover but a floating box driven by
+  // store.openQuickCommandBar, so "docked" is expressed by the preference alone
+  // and the box itself decides which of its two forms to render.
+  Store.prototype.setQuickCommandsInRightPanel = function (v) {
+    ls.setItem(quickCommandsInRightPanelKey, v + '')
+    window.store.quickCommandsInRightPanel = v
+  }
+
+  Store.prototype.openQuickCommandsPanel = function () {
+    const { store } = window
+    store.rightPanelVisible = true
+    store.rightPanelTab = 'quickCommands'
+  }
+
+  // Same toggle contract as toggleInfoPanel/toggleAIPanel/toggleCmdHistoryPanel:
+  // while the panel lives in the right panel, the footer Q opens and closes it.
+  Store.prototype.toggleQuickCommandsPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'quickCommands') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.openQuickCommandsPanel()
+  }
+
+  Store.prototype.moveQuickCommandsToRightPanel = function () {
+    const { store } = window
+    store.setQuickCommandsInRightPanel(true)
+    // the footer box would otherwise be left floating over a terminal it no
+    // longer owns; the pin is deliberately kept, so handing the panel back
+    // restores the exact shape it had before
+    store.openQuickCommandBar = false
+    store.openQuickCommandsPanel()
+  }
+
+  // Hand the panel back to the footer and open it there: the move has to be
+  // visible, otherwise the panel just looks like it vanished. A pin that was
+  // left on while docked brings the box back pinned, which is what the user
+  // last asked for.
+  Store.prototype.moveQuickCommandsToFooter = function () {
+    const { store } = window
+    store.setQuickCommandsInRightPanel(false)
+    if (store.rightPanelTab === 'quickCommands') {
+      store.rightPanelVisible = false
+    }
+    store.openQuickCommandBar = true
+  }
   Store.prototype.beforeExit = function (evt) {
     const { confirmBeforeExit } = window.store.config
     if (
@@ -353,7 +450,10 @@ export default Store => {
     if (index === -1) {
       return
     }
-    window.store.aiChatHistory.splice(index, 1)
+    // Reassign instead of splice: the store only notifies subscribers on a
+    // property write, so an in-place mutation leaves the panel rendering the
+    // list it already had.
+    window.store.aiChatHistory = store.aiChatHistory.filter(d => d.id !== id)
   }
 
   Store.prototype.startNewChat = action(function () {
@@ -388,6 +488,9 @@ export default Store => {
 
   Store.prototype.compressChatSession = async function (sessionId) {
     const { store } = window
+    if (!sessionId) {
+      return
+    }
     const sessionEntries = store.aiChatHistory
       .filter(h => h.chatSessionId === sessionId)
       .sort((a, b) => a.timestamp - b.timestamp)
@@ -411,33 +514,14 @@ export default Store => {
 
     const firstEntry = sessionEntries[0]
     const lang = firstEntry.languageAI || store.getLangName()
-    const messages = [
-      { role: 'system', content: appendMandatoryGuardrails(firstEntry.roleAI + `;用[${lang}]回复`) }
-    ]
-
-    // Start from the last compress entry to include its summary as context
-    const startIndex = lastCompressIndex >= 0 ? lastCompressIndex : 0
-    for (let i = startIndex; i < sessionEntries.length; i++) {
-      const entry = sessionEntries[i]
-      if (entry.compressed) {
-        messages.push({
-          role: 'user',
-          content: `Here is a summary of our previous conversation for context:\n\n${entry.response}`
-        })
-        messages.push({
-          role: 'assistant',
-          content: 'Understood. I will use this context as we continue.'
-        })
-      } else {
-        messages.push({
-          role: 'user',
-          content: entry.promptWithAttachments || entry.prompt
-        })
-        if (entry.response) {
-          messages.push({ role: 'assistant', content: entry.response })
-        }
-      }
-    }
+    // Same message list the chat turn would send (including the response of
+    // every entry), so the summary describes the conversation the model
+    // actually saw.
+    const messages = buildSessionMessages({
+      history: store.aiChatHistory,
+      chatSessionId: sessionId,
+      role: appendMandatoryGuardrails(firstEntry.roleAI + `;用[${lang}]回复`)
+    })
 
     const summaryPrompt = 'Please summarize the above conversation concisely. Include key information, decisions, context, and any important details that would be needed to continue this conversation effectively.'
     messages.push({ role: 'user', content: summaryPrompt })
@@ -484,8 +568,10 @@ export default Store => {
       compressed: true
     }
 
-    // Append compress entry, preserve existing history
-    store.aiChatHistory.push(compressedEntry)
+    // Append compress entry, preserve existing history. Reassign rather than
+    // push for the same reason as removeAiHistory -- the panel has to see the
+    // new context size, which is the whole point of compressing.
+    store.aiChatHistory = [...store.aiChatHistory, compressedEntry]
   }
 
   Store.prototype.toggleChatSessions = action(function () {
@@ -566,7 +652,9 @@ export default Store => {
   }
 
   Store.prototype.aiConfigMissing = function () {
-    return aiConfigsArr.filter(k => k !== 'apiKeyAI' && k !== 'proxyAI' && k !== 'nameAI').some(k => !window.store.config[k])
+    return aiConfigsArr
+      .filter(k => !optionalAIConfigsArr.includes(k))
+      .some(k => !window.store.config[k])
   }
 
   Store.prototype.clearHistory = function () {

package/client/store/init-state.js

@@ -19,6 +19,8 @@ import {
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
   rightPanelPinnedKey,
+  cmdHistoryInRightPanelKey,
+  quickCommandsInRightPanelKey,
   addPanelWidthLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
@@ -95,6 +97,10 @@ export default () => {
     _batchInputSelectedTabIds: new Set(),
     aiChatHistory: [],
     agentRunning: false,
+    // live context accounting while an agent loop is running: the agent
+    // carries tool schemas and tool results that the session history does
+    // not, so it publishes its own figure here (see components/ai/agent.js)
+    aiContextInfo: null,
     currentChatSessionId: window.localStorage.getItem(lastAiChatSessionIdKey) || '',
     showChatSessions: false,
 
@@ -127,6 +133,8 @@ export default () => {
     rightPanelVisible: false,
     rightPanelTab: 'info',
     rightPanelPinned: ls.getItem(rightPanelPinnedKey) === 'true',
+    cmdHistoryInRightPanel: ls.getItem(cmdHistoryInRightPanelKey) === 'true',
+    quickCommandsInRightPanel: ls.getItem(quickCommandsInRightPanelKey) === 'true',
     _rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     showAIConfigModal: false,
 

package/client/store/load-data.js

@@ -14,6 +14,10 @@ import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'
 import { parseQuickConnect } from '../common/parse-quick-connect'
+import message from '../components/common/message'
+import fs from '../common/fs'
+import { parseVv, describeVv } from '../common/parse-vv'
+import { vvToTab } from '../common/vv-to-tab'
 
 function getHost (argv, opts) {
   const arr = argv
@@ -35,6 +39,56 @@ function getHost (argv, opts) {
   return {}
 }
 
+/**
+ * Open a .vv (virt-viewer) connection file as a new Spice session.
+ *
+ * Used when electerm is handed a file from outside:
+ *   electerm /path/to/console.vv
+ *
+ * This opens a session, it does not import a bookmark. For a Proxmox file that
+ * is the only shape that can work at all: the signed proxy ticket it carries is
+ * refused by the node's :3128 daemon once it is more than about 40 seconds old,
+ * so a bookmark saved from one could never connect.
+ *
+ * The parse itself is shared with the bookmark form's "Load .vv file" button --
+ * src/client/common/parse-vv.js is the single implementation.
+ *
+ * @param {Object} store
+ * @param {string} filePath - absolute path, resolved in the main process
+ * @returns {Promise<Object|null>} the parse result, or null on failure
+ */
+export async function openVvFile (store, filePath) {
+  console.debug('opening .vv file', filePath)
+  let text
+  try {
+    // fs.readFile resolves the file as a utf8 string (src/app/lib/fs.js)
+    text = await fs.readFile(filePath)
+  } catch (err) {
+    message.error('cannot read ' + filePath + ': ' + err.message)
+    return null
+  }
+  const parsed = parseVv(text)
+  if (!parsed.ok) {
+    message.error(describeVv(parsed) + ' (' + filePath + ')')
+    return null
+  }
+  const tab = vvToTab(parsed, { filePath })
+  console.debug('.vv file -> tab', tab)
+  // A file that did not come from a person clicking through a form gets no
+  // chance to read a hint, so anything dropped from it has to be said out loud.
+  if (parsed.warnings.length) {
+    console.debug('.vv warnings', parsed.warnings)
+  }
+  if (parsed.ignored.length) {
+    message.warning(
+      parsed.ignored.length + ' option(s) in this .vv were skipped: ' +
+        parsed.ignored.map(d => d.key).join(', ')
+    )
+  }
+  store.ipcOpenTab(tab)
+  return parsed
+}
+
 export async function addTabFromCommandLine (store, opts) {
   console.debug('command line params', opts)
   if (!opts) {
@@ -52,6 +106,12 @@ export async function addTabFromCommandLine (store, opts) {
   if (isHelp) {
     return store.openAbout(infoTabs.cmd)
   }
+  // A .vv connection file, e.g. `electerm /path/to/console.vv`.
+  // Checked before the protocol-URL scan below because the two cannot overlap:
+  // a path ending in .vv never matches a `scheme://` prefix.
+  if (opts.vvFile) {
+    return openVvFile(store, opts.vvFile)
+  }
   // Check if argv contains a protocol URL (e.g., ssh://user@host)
   // and use parseQuickConnect for proper parsing
   if (argv && argv.length) {
@@ -297,6 +357,18 @@ export default (Store) => {
       window.store.ipcOpenTab(pending)
     }
   }
+  /**
+   * A .vv file that arrived before the window existed -- macOS delivers
+   * 'open-file' during launch, so a cold double-click always lands here. The
+   * payload is the same shape initCommandLine() returns, so it goes through the
+   * same entry point as `electerm /path/to/console.vv`.
+   */
+  Store.prototype.checkPendingVvFile = async function () {
+    const pending = await window.pre.runGlobalAsync('getPendingVvFile')
+    if (pending) {
+      addTabFromCommandLine(window.store, pending)
+    }
+  }
   Store.prototype.parseQuickConnect = function (url) {
     return parseQuickConnect(url)
   }

package/client/store/store.js

@@ -145,6 +145,12 @@ class Store {
     if (rightPanelTab === 'ai') {
       return getBrand(baseURLAI).brand || 'Custom AI Model'
     }
+    if (rightPanelTab === 'cmdHistory') {
+      return window.translate('cmdHistory')
+    }
+    if (rightPanelTab === 'quickCommands') {
+      return window.translate('quickCommands')
+    }
     return createTitle(window.store.currentTab)
   }
 

package/client/store/watch.js

@@ -151,7 +151,9 @@ export default store => {
       window.pre.runGlobalAsync('setTitle', title)
       window.store.currentLayoutBatch = tab.batch
     }
-    if (tab && store.rightPanelVisible) {
+    // refreshing the info panel on tab switch only concerns the info tab: the
+    // right panel can also be showing the AI chat or the cmd history
+    if (tab && store.rightPanelVisible && store.rightPanelTab === 'info') {
       window.store.openInfoPanelAction()
     }
     return store.activeTabId

package/package.json

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