@electerm/electerm-react 5.5.15 → 5.5.35

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/css/mobile.styl

@@ -11,6 +11,34 @@
   .remote-monitor-bar
     position fixed
 
+  // Side panels are full-screen drawers on mobile: they start at the viewport
+  // edge (the left one covers the icon bar too, so no strip of terminal is left
+  // showing) and run to the bottom edge — footer included. On desktop the
+  // footer is reserved *beside* the panel because it holds the panel's own
+  // trigger; on mobile the drawer is dismissed from its header (✕ / the
+  // bookmark/history tabs) instead, so there is nothing to keep clear. The
+  // inline width already comes from store.leftSidePanelWidth / rightPanelWidth,
+  // which are the viewport width here.
+  // Both are on the fixed frame (the right panel explicitly: its bottom edge
+  // must not drift from the fixed footer when the visual viewport changes), and
+  // both have to outrank the footer's 200 — it comes later in the DOM, so at an
+  // equal rank it would paint over the drawer. The left drawer lives inside
+  // .sidebar, which is its own stacking context (z-index 100), so lifting the
+  // drawer alone is not enough: the whole sidebar column has to clear the
+  // footer. The right panel is a root-level child, so its own z-index suffices.
+  // The icon bar takes no extra room from this: it is 43px wide and the footer
+  // starts at 44px.
+  .sidebar
+    z-index 250
+  .sidebar-list
+    left 0
+    bottom 0
+    z-index 250
+  .right-side-panel
+    position fixed
+    bottom 0
+    z-index 250
+
   // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
   .tabs.mobile-tabs
     display flex

package/client/store/common.js

@@ -5,11 +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,
@@ -24,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
@@ -42,6 +46,18 @@ export default Store => {
     window.store.setConfig(ext)
   }
 
+  // The footer info icon is a toggle: the same click opens and closes the
+  // panel, so the trigger never has to be hunted down in the panel header.
+  Store.prototype.toggleInfoPanel = action(function () {
+    const { store } = window
+    const isOpen = store.rightPanelVisible && store.rightPanelTab === 'info'
+    store.rightPanelVisible = !isOpen
+    store.rightPanelTab = 'info'
+    if (!isOpen) {
+      store.openInfoPanelAction()
+    }
+  })
+
   Store.prototype.openInfoPanel = action(function () {
     const { store } = window
     store.rightPanelVisible = true
@@ -122,7 +138,13 @@ export default Store => {
     Object.assign(window.store._termSearchOptions, update)
   }
 
+  // Both panel widths are desktop-only preferences: on mobile the panel is a
+  // full-width drawer whose width is fixed, so a drag (or any other caller)
+  // must not overwrite the desktop value that is still in localStorage.
   Store.prototype.setLeftSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(leftSidePanelWidthKey, v)
     window.store._leftSidePanelWidth = v
   }
@@ -144,9 +166,116 @@ export default Store => {
   }
 
   Store.prototype.setRightSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(rightSidebarWidthKey, v)
     window.store._rightPanelWidth = v
   }
+
+  // Persist the pin the same way the left sidebar does (sidebarPinnedKey):
+  // pinned is a durable layout preference, not a per-session toggle. It matters
+  // more here because pinned and unpinned are visibly different modes — the
+  // unpinned panel is an overlay that clears the footer, the pinned one is a
+  // full-height dock.
+  Store.prototype.setRightPanelPinned = function (v) {
+    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 (
@@ -286,6 +415,18 @@ export default Store => {
     }
   }
 
+  // Same toggle contract as toggleInfoPanel: the footer AI button opens and
+  // closes its own panel. The open path must go through handleOpenAIPanel so
+  // the missing-config prompt still fires; closing must not touch config.
+  Store.prototype.toggleAIPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'ai') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.handleOpenAIPanel()
+  }
+
   Store.prototype.explainWithAi = function (txt) {
     const { store } = window
     store.handleOpenAIPanel()
@@ -309,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 () {
@@ -344,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)
@@ -367,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 })
@@ -440,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 () {
@@ -522,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

@@ -18,6 +18,9 @@ import {
   localAddrBookmarkLsKey,
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
+  rightPanelPinnedKey,
+  cmdHistoryInRightPanelKey,
+  quickCommandsInRightPanelKey,
   addPanelWidthLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
@@ -94,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,
 
@@ -125,7 +132,9 @@ export default () => {
     terminalInfoProps: {},
     rightPanelVisible: false,
     rightPanelTab: 'info',
-    rightPanelPinned: false,
+    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/sidebar.js

@@ -25,7 +25,11 @@ export default Store => {
   // through this one method.
   Store.prototype.openLeftSidePanel = function (field = 'bookmarks') {
     const { store } = window
-    if (store.pinned) {
+    // A pinned panel is already open, so there is nothing to toggle — except
+    // on mobile, where pinning is not a reachable mode (no pin control) and
+    // the panel is a full-width overlay. Honouring a stale desktop pin here
+    // would leave the bookmark button dead on arrival.
+    if (store.pinned && !store.isMobile) {
       return
     }
     store.setOpenedSideBar(store.openedSideBar ? '' : field)

package/client/store/store.js

@@ -61,10 +61,15 @@ class Store {
     return window.store.innerWidth
   }
 
+  // Mobile turns a side panel into a full-screen drawer: it spans the whole
+  // viewport and its width is not user-adjustable. So the stored desktop width
+  // is ignored here, and so is the icon bar (the drawer covers it) — and the
+  // old 500px cap, which left a strip of terminal showing on windows between
+  // 500 and 600px, i.e. the top of the mobile range.
   get leftSidePanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth - store.leftSideBarWidth, 500)
+      return store.innerWidth
     }
     return store._leftSidePanelWidth
   }
@@ -78,10 +83,12 @@ class Store {
     return store._leftSideBarOpen ? sidebarWidth : 0
   }
 
+  // Same as leftSidePanelWidth: full-screen drawer on mobile, width not
+  // user-adjustable.
   get rightPanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth, 500)
+      return store.innerWidth
     }
     return store._rightPanelWidth
   }
@@ -138,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.15",
+  "version": "5.5.35",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",