@electerm/electerm-react 5.5.15 → 5.5.35

package/client/common/vv-to-tab.js

@@ -0,0 +1,120 @@
+/**
+ * .vv connection file -> electerm Spice tab options
+ *
+ * Kept apart from parse-vv.js on purpose: parse-vv.js knows the file format
+ * and nothing about electerm, this module knows electerm's Spice tab shape and
+ * nothing about the format. Staying free of window/api access is what makes it
+ * unit-testable, and it is shared by both entry points for a .vv file --
+ * the bookmark form's "Load .vv file" button and a file handed to electerm
+ * from outside (`electerm /path/to/console.vv`).
+ *
+ * Deliberately imports nothing: constants.js pulls in the logo .png files and
+ * `window`, which would make this unimportable under `node --test`.
+ * parse-quick-connect.js spells the type out for the same reason.
+ */
+
+/**
+ * The `spice` value of terminalSpiceType (src/client/common/constants.js).
+ * A .vv file is a virt-viewer file, and the only type this client implements
+ * is spice -- parse-vv.js rejects every other `type=` already.
+ */
+const SPICE_TYPE = 'spice'
+
+/**
+ * Mirrors the Spice defaults in components/bookmark-form/config/spice.js
+ * initValues(), so a .vv that omits them behaves exactly like a Spice bookmark
+ * added by hand.
+ */
+const SPICE_DEFAULTS = {
+  viewOnly: false,
+  scaleViewport: true
+}
+
+/**
+ * Port used when the file names a host but no port at all. Matches
+ * DEFAULT_PORTS.spice in parse-quick-connect.js.
+ */
+const DEFAULT_SPICE_PORT = 5900
+
+const VV_EXT = /\.vv$/i
+const URL_LIKE = /:\/\//
+
+/**
+ * Does this look like a .vv file path?
+ *
+ * A suffix test rather than an exists()/stat() call on purpose: this is asked
+ * synchronously while scanning a command line, and the read that follows
+ * reports a missing file far better than a bare boolean could.
+ *
+ * `://` is excluded so a deep link that happens to end in .vv
+ * (spice://host/console.vv) is not mistaken for a path -- deep links have their
+ * own parser and would otherwise be read off the disk.
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isVvFile (value) {
+  if (typeof value !== 'string') {
+    return false
+  }
+  const text = value.trim()
+  return VV_EXT.test(text) && !URL_LIKE.test(text)
+}
+
+/**
+ * Last path segment, for a tab title when the file carries no `title` key.
+ * Done by hand because the renderer has no path module.
+ *
+ * @param {string} filePath
+ * @returns {string}
+ */
+function basename (filePath) {
+  return String(filePath).split(/[/\\]/).pop() || String(filePath)
+}
+
+/**
+ * Build tab options from a parse result.
+ *
+ * Only keys the file actually provided are set. An absent `ca` or `hostSubject`
+ * must stay absent rather than become an empty string, because the session code
+ * reads "no ca" as "do not verify against a pinned CA" -- an empty string there
+ * would mean "pin nothing", which fails every handshake.
+ *
+ * @param {Object} parsed - result of parseVv()
+ * @param {Object} [options] - { filePath } plus any tab overrides
+ * @returns {Object} options for store.addTab()
+ */
+function vvToTab (parsed, options = {}) {
+  const { filePath, ...extra } = options
+  const f = parsed.fields
+  const tab = {
+    type: SPICE_TYPE,
+    host: f.host,
+    port: f.port || DEFAULT_SPICE_PORT,
+    tls: !!f.tls,
+    ...SPICE_DEFAULTS
+  }
+  const optional = {
+    ca: f.ca,
+    hostSubject: f.hostSubject,
+    password: f.password,
+    proxy: f.proxy,
+    title: f.title || (filePath ? basename(filePath) : '')
+  }
+  Object.keys(optional).forEach(key => {
+    if (optional[key]) {
+      tab[key] = optional[key]
+    }
+  })
+  return { ...tab, ...extra }
+}
+
+export {
+  isVvFile,
+  SPICE_TYPE,
+  vvToTab,
+  basename,
+  VV_EXT,
+  DEFAULT_SPICE_PORT,
+  SPICE_DEFAULTS
+}

package/client/components/ai/agent-tool-call-card.jsx

@@ -9,6 +9,7 @@ import {
   CodeOutlined,
   DatabaseOutlined
 } from '@ant-design/icons'
+import CopyIcon from './copy-icon'
 
 const toolIcons = {
   send_terminal_command: CodeOutlined,
@@ -65,6 +66,20 @@ export default function AgentToolCallCard ({ toolCall, autoCollapse }) {
     )
   }
 
+  function renderPre (text) {
+    return (
+      <div className='agent-tool-pre-wrap'>
+        <CopyIcon text={text} className='agent-tool-copy' />
+        <pre className='agent-tool-pre'>{text}</pre>
+      </div>
+    )
+  }
+
+  const argsText = args && Object.keys(args).length > 0
+    ? JSON.stringify(args, null, 2)
+    : ''
+  const resultText = formatResult(result)
+
   return (
     <div className={`agent-tool-call-card agent-tool-${status}`}>
       <div
@@ -79,16 +94,16 @@ export default function AgentToolCallCard ({ toolCall, autoCollapse }) {
       </div>
       {expanded && (
         <div className='agent-tool-detail'>
-          {args && Object.keys(args).length > 0 && (
+          {argsText && (
             <div className='agent-tool-args'>
               <div className='agent-tool-label'>Arguments:</div>
-              <pre className='agent-tool-pre'>{JSON.stringify(args, null, 2)}</pre>
+              {renderPre(argsText)}
             </div>
           )}
-          {result && (
+          {resultText && (
             <div className='agent-tool-result'>
               <div className='agent-tool-label'>Result:</div>
-              <pre className='agent-tool-pre'>{formatResult(result)}</pre>
+              {renderPre(resultText)}
             </div>
           )}
         </div>

package/client/components/ai/agent.js

@@ -1,5 +1,6 @@
 import { agentTools, executeToolCall } from './agent-tools'
 import { appendMandatoryGuardrails } from './ai-guardrails'
+import { buildAgentMessages, summarizeContext } from './ai-context'
 
 const MAX_ITERATIONS = 150
 
@@ -47,27 +48,35 @@ async function callBackendAIchatWithTools (messages, config) {
   )
 }
 
+// Publish the size of the context the agent is carrying so the panel can show
+// it. An agent request is not just the conversation: it also carries every
+// tool schema, and each iteration appends the tool results, which is what
+// actually fills the window. `usage` is the provider's own count for the
+// previous request and is kept for comparison -- the estimate is what the
+// *next* request will cost, so that is the number on display.
+function publishContext (messages, config, usage) {
+  const info = summarizeContext(messages, {
+    model: config.modelAI,
+    contextLength: window.store.config.contextLengthAI,
+    tools: agentTools
+  })
+  if (usage && usage.promptTokens) {
+    info.measuredTokens = usage.promptTokens
+  }
+  window.store.aiContextInfo = info
+}
+
 export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming, conversationMessages = null) {
   window.store.agentRunning = true
   try {
-    let messages
-    if (conversationMessages && conversationMessages.length > 1) {
-      // Replace system message with agent system prompt, keep conversation history
-      messages = [
-        { role: 'system', content: buildAgentSystemPrompt(config) },
-        ...conversationMessages.filter(m => m.role !== 'system')
-      ]
-    } else {
-      messages = [
-        { role: 'system', content: buildAgentSystemPrompt(config) },
-        {
-          role: 'user',
-          content: chatEntry.promptWithAttachments || chatEntry.prompt
-        }
-      ]
-    }
+    const messages = buildAgentMessages({
+      systemPrompt: buildAgentSystemPrompt(config),
+      conversationMessages,
+      prompt: chatEntry.promptWithAttachments || chatEntry.prompt
+    })
     const toolCallsLog = []
     let accumulatedContent = ''
+    let lastUsage = null
 
     setIsStreaming(true)
     updateChatEntry(chatEntry, {
@@ -84,7 +93,11 @@ export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming,
         return
       }
 
+      publishContext(messages, config, lastUsage)
       const result = await callBackendAIchatWithTools(messages, config)
+      if (result.usage) {
+        lastUsage = result.usage
+      }
 
       if (result.error) {
         setIsStreaming(false)
@@ -104,6 +117,7 @@ export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming,
       }
 
       messages.push(assistantMessage)
+      publishContext(messages, config, lastUsage)
 
       if (assistantMessage.content) {
         accumulatedContent += (accumulatedContent ? '\n\n' : '') + assistantMessage.content
@@ -176,5 +190,8 @@ export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming,
     })
   } finally {
     window.store.agentRunning = false
+    // hand the panel back to the session based estimate: tool results are not
+    // carried into the next turn, so the agent figure stops being meaningful
+    window.store.aiContextInfo = null
   }
 }

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

@@ -4,6 +4,7 @@ import AIStopIcon from './ai-stop-icon'
 import AgentToolCallCard from './agent-tool-call-card'
 import { runAgentLoop } from './agent'
 import { appendMandatoryGuardrails } from './ai-guardrails'
+import { buildSessionMessages } from './ai-context'
 import {
   Alert,
   Tooltip,
@@ -49,54 +50,17 @@ export default function AIChatHistoryItem ({ item }) {
     return appendMandatoryGuardrails(roleAI + `;用[${lang}]回复`)
   }
 
-  const conversationMessages = useMemo(() => {
-    if (!chatSessionId) {
-      return null
-    }
-    const sessionEntries = window.store.aiChatHistory
-      .filter(h => h.chatSessionId === chatSessionId && h.timestamp <= item.timestamp)
-      .sort((a, b) => a.timestamp - b.timestamp)
-
-    // Find the last compress entry
-    let lastCompressIndex = -1
-    for (let i = sessionEntries.length - 1; i >= 0; i--) {
-      if (sessionEntries[i].compressed) {
-        lastCompressIndex = i
-        break
-      }
-    }
-
-    const messages = [
-      { role: 'system', content: buildRole() }
-    ]
-
-    // Start from the last compress entry (if any), skip older history
-    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',
-          // promptWithAttachments carries the inlined file blocks;
-          // falls back to the plain prompt for legacy entries
-          content: entry.promptWithAttachments || entry.prompt
-        })
-        if (entry.response && entry.id !== item.id) {
-          messages.push({ role: 'assistant', content: entry.response })
-        }
-      }
-    }
-    return messages
-  }, [chatSessionId, item.id, item.timestamp])
+  // The context this turn sends: the session history up to and including the
+  // previous turns, but not this turn's own (still streaming) response.
+  // Shared with the context size indicator in ai-chat.jsx so the number shown
+  // is built from the same message list that goes out.
+  const conversationMessages = useMemo(() => buildSessionMessages({
+    history: window.store.aiChatHistory,
+    chatSessionId,
+    upto: item.timestamp,
+    role: buildRole(),
+    excludeId: item.id
+  }), [chatSessionId, item.id, item.timestamp])
 
   const pollStreamContent = useCallback(async (sid) => {
     try {

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

@@ -1,8 +1,11 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Flex, Input, Segmented, Button, Tag, message } from 'antd'
 import TabSelect from '../footer/tab-select'
 import AiChatHistory from './ai-chat-history'
 import AiChatSessions from './ai-chat-sessions'
+import AiContextIndicator from './ai-context-indicator'
+import { buildSessionMessages, summarizeContext, getUsageLevel, formatPercent } from './ai-context'
+import { appendMandatoryGuardrails } from './ai-guardrails'
 import uid from '../../common/uid'
 import { pick } from 'lodash-es'
 import {
@@ -53,6 +56,48 @@ export default function AIChat (props) {
     h => h.chatSessionId === currentChatSessionId
   )
 
+  const config = props.config || {}
+
+  // Size of the context the *next* message will carry: every entry of this
+  // session, from the last compression onwards, built by the same helper the
+  // sender uses. While an agent loop is running its own, much larger, figure
+  // is published to the store (tool schemas and tool results included) and
+  // takes precedence.
+  const sessionContextInfo = useMemo(() => {
+    if (!currentChatSessionId) {
+      return null
+    }
+    const lang = config.languageAI || window.store.getLangName()
+    const role = appendMandatoryGuardrails(
+      (config.roleAI || '') + `;用[${lang}]回复`
+    )
+    const messages = buildSessionMessages({
+      history: props.aiChatHistory,
+      chatSessionId: currentChatSessionId,
+      role
+    })
+    if (!messages || messages.length < 2) {
+      return null
+    }
+    return summarizeContext(messages, {
+      model: config.modelAI,
+      contextLength: config.contextLengthAI
+    })
+  }, [
+    props.aiChatHistory,
+    // length as well as identity: sending a message pushes onto the existing
+    // array, so the reference alone would not change
+    props.aiChatHistory.length,
+    currentChatSessionId,
+    config.roleAI,
+    config.languageAI,
+    config.modelAI,
+    config.contextLengthAI
+  ])
+
+  const contextInfo = props.aiContextInfo || sessionContextInfo
+  const contextLevel = getUsageLevel(contextInfo && contextInfo.percent)
+
   function handlePromptChange (e) {
     setPrompt(e.target.value)
   }
@@ -179,6 +224,13 @@ export default function AIChat (props) {
     }
   }
 
+  function renderCompressTitle () {
+    if ((contextLevel === 'warn' || contextLevel === 'danger') && contextInfo) {
+      return `Context is ${formatPercent(contextInfo.percent)} full — compress to summarize the session`
+    }
+    return 'Summarize this session into a single message, dropping the older history'
+  }
+
   function handleShowHistory () {
     window.store.toggleChatSessions()
   }
@@ -259,34 +311,39 @@ export default function AIChat (props) {
       </Flex>
 
       <Flex vertical className='ai-chat-input'>
-        <Flex className='ai-chat-toolbar mg1b' align='left' gap={4}>
-          <Button
-            size='small'
-            icon={<PlusOutlined />}
-            onClick={handleNewChat}
-            className='mg1r new-chat-btn'
-          >
-            {e('new')}
-          </Button>
-          {sessionHistory.length >= 2 && (
+        <Flex className='ai-chat-toolbar mg1b' align='center' justify='space-between' gap={4}>
+          <Flex align='center' gap={4}>
+            <Button
+              size='small'
+              icon={<PlusOutlined />}
+              onClick={handleNewChat}
+              className='new-chat-btn'
+            >
+              {e('new')}
+            </Button>
+            {sessionHistory.length >= 2 && (
+              <Button
+                size='small'
+                icon={<CompressOutlined />}
+                onClick={handleCompressSession}
+                loading={compressing}
+                type={contextLevel === 'warn' ? 'primary' : 'default'}
+                danger={contextLevel === 'danger'}
+                title={renderCompressTitle()}
+              >
+                {e('compress')}
+              </Button>
+            )}
             <Button
               size='small'
-              icon={<CompressOutlined />}
-              onClick={handleCompressSession}
-              loading={compressing}
-              className='mg1r'
+              icon={<HistoryOutlined />}
+              onClick={handleShowHistory}
+              type={props.showChatSessions ? 'primary' : 'default'}
             >
-              {e('compress')}
+              {e('history')}
             </Button>
-          )}
-          <Button
-            size='small'
-            icon={<HistoryOutlined />}
-            onClick={handleShowHistory}
-            type={props.showChatSessions ? 'primary' : 'default'}
-          >
-            {e('history')}
-          </Button>
+          </Flex>
+          <AiContextIndicator info={contextInfo} />
         </Flex>
         {attachments.length > 0 && (
           <Flex wrap='wrap' gap={4} className='ai-chat-attachments mg1b'>

package/client/components/ai/ai-config-props.js

@@ -7,7 +7,18 @@ export const aiConfigsArr = [
   'authHeaderNameAI',
   'apiPathAI',
   'languageAI',
-  'proxyAI'
+  'proxyAI',
+  'contextLengthAI'
+]
+
+// Keys that may legitimately be empty. `aiConfigMissing` only forces the
+// config modal open when one of the *other* keys is unset, so anything
+// optional has to be listed here or the modal would pop up forever.
+export const optionalAIConfigsArr = [
+  'apiKeyAI',
+  'proxyAI',
+  'nameAI',
+  'contextLengthAI'
 ]
 
 export {

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

@@ -1,6 +1,7 @@
 import {
   Form,
   Input,
+  InputNumber,
   Button,
   AutoComplete,
   Alert,
@@ -356,6 +357,19 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           {renderModelInput()}
         </Form.Item>
 
+        <Form.Item
+          label='Context length'
+          name='contextLengthAI'
+          tooltip='How many tokens this model can hold in one request. Leave empty to guess from the model name; the chat panel uses it to show how full the context is.'
+        >
+          <InputNumber
+            placeholder='auto (detect from model name)'
+            min={1000}
+            step={1000}
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+
         <Form.Item
           label={renderApiKeyLabel()}
           name='apiKeyAI'

package/client/components/ai/ai-context-indicator.jsx

@@ -0,0 +1,83 @@
+import { Tooltip } from 'antd'
+import {
+  formatTokens,
+  formatPercent,
+  getUsageLevel,
+  CONTEXT_WARN_PERCENT
+} from './ai-context'
+
+// How full the context window is, as a small bar + count, with the breakdown
+// in the tooltip. The number is what the next request will carry, so it is
+// the one to watch before pressing Compress.
+export default function AiContextIndicator ({ info }) {
+  if (!info || !info.tokens) {
+    return null
+  }
+  const {
+    tokens,
+    messagesTokens,
+    toolsTokens,
+    windowSize,
+    windowSource,
+    percent,
+    measuredTokens
+  } = info
+  const level = getUsageLevel(percent)
+  const width = Math.min(100, Math.max(2, percent || 0))
+
+  function renderWindowSource () {
+    if (windowSource === 'config') {
+      return `window ${formatTokens(windowSize)}, set in AI config`
+    }
+    if (windowSource === 'model') {
+      return `window ${formatTokens(windowSize)}, from the model name`
+    }
+    return `window assumed to be ${formatTokens(windowSize)} — set "Context length" in AI config if your model differs`
+  }
+
+  const tip = (
+    <div className='ai-context-tip'>
+      <div className='ai-context-tip-title'>Context of the next message</div>
+      <div className='ai-context-tip-row'>
+        <span>system + history</span>
+        <span>~{formatTokens(messagesTokens)}</span>
+      </div>
+      {toolsTokens > 0 && (
+        <div className='ai-context-tip-row'>
+          <span>agent tools</span>
+          <span>~{formatTokens(toolsTokens)}</span>
+        </div>
+      )}
+      <div className='ai-context-tip-row ai-context-tip-total'>
+        <span>total</span>
+        <span>~{formatTokens(tokens)} ({formatPercent(percent)})</span>
+      </div>
+      {measuredTokens > 0 && (
+        <div className='ai-context-tip-row'>
+          <span>last request, measured</span>
+          <span>{measuredTokens.toLocaleString()}</span>
+        </div>
+      )}
+      <div className='ai-context-tip-note'>{renderWindowSource()}</div>
+      {(level === 'warn' || level === 'danger') && (
+        <div className='ai-context-tip-warn'>
+          Over {CONTEXT_WARN_PERCENT}% — use Compress to summarize the session.
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <Tooltip title={tip}>
+      <span className={`ai-context-indicator ai-context-${level}`}>
+        <span className='ai-context-bar'>
+          <span className='ai-context-bar-fill' style={{ width: width + '%' }} />
+        </span>
+        <span className='ai-context-count'>
+          {formatTokens(tokens)}/{formatTokens(windowSize)}
+        </span>
+        <span className='ai-context-percent'>{formatPercent(percent)}</span>
+      </span>
+    </Tooltip>
+  )
+}