@electerm/electerm-react 5.5.15 → 5.5.35

package/client/components/ai/ai-context.js

@@ -0,0 +1,272 @@
+// Context accounting for the AI panel: how big is the conversation we are
+// about to send, and how much of the model's context window does it fill.
+//
+// There is deliberately no tokenizer here. A real one needs the model's
+// vocabulary (tiktoken & friends) and would pull a dependency into the
+// renderer for a number that only has to be good enough to answer "should I
+// compress?". The heuristic below is CJK aware and deliberately pessimistic,
+// so the warning arrives a little early rather than too late. Where the
+// provider reports real usage we show that number alongside the estimate.
+//
+// Pure module -- no window / store access -- so it can be unit tested and so
+// the sender and the indicator cannot drift apart.
+
+// Latin text and code average ~4 chars per token; 3.5 is the safe side.
+const CHARS_PER_TOKEN = 3.5
+// CJK is roughly one token per character (a little under for Chinese).
+const TOKENS_PER_CJK_CHAR = 0.8
+// Per message role/delimiter overhead, as counted by the OpenAI tokenizer.
+const PER_MESSAGE_OVERHEAD = 4
+
+// BMP ranges that tokenize densely: CJK ideographs, kana, full width forms.
+const CJK_RE = /[\u2e80-\u2eff\u3000-\u303f\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff00-\uffef]/g
+
+export const DEFAULT_CONTEXT_WINDOW = 128000
+export const CONTEXT_WARN_PERCENT = 70
+export const CONTEXT_DANGER_PERCENT = 90
+
+// Rough token count of a string. Never exact, never wildly wrong. Called on
+// the whole conversation every time it changes, so it stays a single pass
+// with one regex sweep rather than a per character test.
+export function estimateTokens (text) {
+  if (!text) {
+    return 0
+  }
+  const str = typeof text === 'string' ? text : String(text)
+  const cjkChars = str.match(CJK_RE)
+  const cjk = cjkChars ? cjkChars.length : 0
+  const other = str.length - cjk
+  return Math.ceil(cjk * TOKENS_PER_CJK_CHAR + other / CHARS_PER_TOKEN)
+}
+
+// Tokens for a message array in the OpenAI chat shape (which is also what the
+// anthropic / responses builders are fed before they re-shape it).
+export function estimateMessagesTokens (messages) {
+  if (!Array.isArray(messages)) {
+    return 0
+  }
+  let total = 0
+  for (const m of messages) {
+    if (!m) {
+      continue
+    }
+    total += PER_MESSAGE_OVERHEAD
+    total += estimateTokens(m.content)
+    if (m.role) {
+      total += estimateTokens(m.role)
+    }
+    if (Array.isArray(m.tool_calls)) {
+      for (const tc of m.tool_calls) {
+        total += estimateTokens(tc && tc.id)
+        total += estimateTokens(tc && tc.function && tc.function.name)
+        total += estimateTokens(tc && tc.function && tc.function.arguments)
+      }
+    }
+  }
+  return total
+}
+
+// Tool schemas are re-sent with every agent request and are far from free --
+// ignoring them would understate agent mode by a few thousand tokens.
+export function estimateToolsTokens (tools) {
+  if (!Array.isArray(tools) || !tools.length) {
+    return 0
+  }
+  try {
+    return estimateTokens(JSON.stringify(tools))
+  } catch (e) {
+    return 0
+  }
+}
+
+// Best effort hints, checked 2026-09. No provider publishes the window over
+// the API, and relays rename models freely, so this is only a starting point:
+// the "Context length" field in the AI config always wins over it.
+// Longest / most specific pattern first -- the list is scanned in order.
+const MODEL_CONTEXT_WINDOWS = [
+  [/qwen-?long/, 10000000],
+
+  // 1M class
+  [/gpt-6|gpt-5\.6|gpt-5-6/, 1050000],
+  [/gemini/, 1048576],
+  [/claude-(opus|sonnet|fable)-5/, 1000000],
+  [/deepseek-v4/, 1000000],
+  [/qwen3\.(7|8)|qwen3-max|qwen3\.5-max/, 1000000],
+  [/kimi-?k3/, 1048576],
+
+  // 500k / 400k / 256k class
+  [/grok-4\.6/, 500000],
+  [/gpt-5/, 400000],
+  [/kimi-?k2\.7/, 262144],
+  [/grok-4/, 256000],
+
+  // 200k class
+  [/claude/, 200000],
+  [/\bo[134]\b/, 200000],
+
+  // 128k class
+  [/gpt-4\.1|gpt-4o|gpt-4-turbo|gpt-4-1106|gpt-4-0125/, 128000],
+  [/llama-?[34]/, 131072],
+  [/qwen/, 131072],
+  [/kimi|moonshot/, 131072],
+  [/glm|zhipu|chatglm/, 131072],
+  [/ernie|wenxin/, 131072],
+  [/grok/, 131072],
+  [/mistral-large/, 131072],
+
+  // older / smaller
+  [/deepseek/, 65536],
+  [/gpt-4-32k/, 32768],
+  [/mixtral|mistral/, 32768],
+  [/gpt-3\.5/, 16385],
+  [/gpt-4/, 8192],
+  [/llama-?2/, 4096]
+]
+
+// Returns { size, source } where source is 'config' | 'model' | 'default'.
+export function getContextWindow (model, override) {
+  const declared = Number(override)
+  if (declared > 0) {
+    return { size: declared, source: 'config' }
+  }
+  const id = String(model || '').toLowerCase()
+  for (const [re, size] of MODEL_CONTEXT_WINDOWS) {
+    if (re.test(id)) {
+      return { size, source: 'model' }
+    }
+  }
+  return { size: DEFAULT_CONTEXT_WINDOW, source: 'default' }
+}
+
+// The single source of truth for "what gets sent": both the request in
+// ai-chat-history-item.jsx and the indicator in ai-chat.jsx go through here,
+// so the number on screen is the number that leaves the machine.
+//
+// Returns null when there is no session to build from -- the sender reads
+// that as "no history", and the main process then falls back to a plain
+// prompt + role request.
+//
+// `upto` limits the window to entries at or before a timestamp (the entry
+// being sent); `excludeId` drops one entry's response, which is what the
+// sender does for its own turn. The indicator omits both to describe the
+// *next* request, which will include every response so far.
+export function buildSessionMessages ({
+  history,
+  chatSessionId,
+  upto = Infinity,
+  role = '',
+  excludeId = null
+}) {
+  if (!chatSessionId) {
+    return null
+  }
+  const entries = (history || [])
+    .filter(h => h.chatSessionId === chatSessionId && h.timestamp <= upto)
+    .sort((a, b) => a.timestamp - b.timestamp)
+
+  // A compressed entry replaces everything before it.
+  let lastCompressIndex = -1
+  for (let i = entries.length - 1; i >= 0; i--) {
+    if (entries[i].compressed) {
+      lastCompressIndex = i
+      break
+    }
+  }
+
+  const messages = [
+    { role: 'system', content: role }
+  ]
+
+  const startIndex = lastCompressIndex >= 0 ? lastCompressIndex : 0
+  for (let i = startIndex; i < entries.length; i++) {
+    const entry = entries[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 !== excludeId) {
+        messages.push({ role: 'assistant', content: entry.response })
+      }
+    }
+  }
+  return messages
+}
+
+// Agent mode keeps the session history but swaps in its own system prompt.
+export function buildAgentMessages ({ systemPrompt, conversationMessages, prompt }) {
+  if (conversationMessages && conversationMessages.length > 1) {
+    return [
+      { role: 'system', content: systemPrompt },
+      ...conversationMessages.filter(m => m.role !== 'system')
+    ]
+  }
+  return [
+    { role: 'system', content: systemPrompt },
+    { role: 'user', content: prompt }
+  ]
+}
+
+// Everything the indicator needs, from the messages that will be sent.
+export function summarizeContext (messages, { model, contextLength, tools } = {}) {
+  const messagesTokens = estimateMessagesTokens(messages)
+  const toolsTokens = estimateToolsTokens(tools)
+  const tokens = messagesTokens + toolsTokens
+  const win = getContextWindow(model, contextLength)
+  return {
+    tokens,
+    messagesTokens,
+    toolsTokens,
+    windowSize: win.size,
+    windowSource: win.source,
+    percent: win.size ? (tokens / win.size) * 100 : null,
+    model: model || '',
+    measuredTokens: null
+  }
+}
+
+export function formatTokens (n) {
+  const v = Number(n) || 0
+  if (v < 1000) {
+    return String(Math.round(v))
+  }
+  if (v < 10000) {
+    return (v / 1000).toFixed(1) + 'k'
+  }
+  if (v < 1000000) {
+    return Math.round(v / 1000) + 'k'
+  }
+  return (v / 1000000).toFixed(1) + 'M'
+}
+
+export function formatPercent (p) {
+  if (p === null || p === undefined || !isFinite(p)) {
+    return ''
+  }
+  // below 10% a whole number would just read as 0%
+  return (p > 0 && p < 10 ? p.toFixed(1) : String(Math.round(p))) + '%'
+}
+
+export function getUsageLevel (percent) {
+  if (percent === null || percent === undefined || !isFinite(percent)) {
+    return 'unknown'
+  }
+  if (percent >= CONTEXT_DANGER_PERCENT) {
+    return 'danger'
+  }
+  if (percent >= CONTEXT_WARN_PERCENT) {
+    return 'warn'
+  }
+  return 'ok'
+}

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

@@ -10,6 +10,7 @@ import {
   FlagFilled
 } from '@ant-design/icons'
 import getBrand from './get-brand'
+import CopyIcon from './copy-icon'
 
 const e = window.translate
 
@@ -160,6 +161,9 @@ export default function AIOutput ({ item }) {
             <>
               {renderBrand()}
               <ReactMarkdown {...mdProps} />
+              <div className='ai-output-actions'>
+                <CopyIcon text={response} />
+              </div>
             </>
             )}
       </div>

package/client/components/ai/ai-presets.js

@@ -1,4 +1,13 @@
 export const defaultAIPresets = [
+  {
+    id: 'fluxionai',
+    nameAI: 'FluxionAI',
+    baseURLAI: 'https://fluxionai.world/v1',
+    apiPathAI: '/chat/completions',
+    modelAI: 'deepseek-v4-flash-0731',
+    authHeaderNameAI: 'Authorization: Bearer',
+    siteUrl: 'https://fluxionai.world/register?source=github&campaign=electerm-20260923&promo=ELECTERM&aff=7H7DERHU3GFF'
+  },
   {
     id: 'atlascloud',
     nameAI: 'AtlasCloud',
@@ -166,8 +175,10 @@ export const defaultAIPresets = [
 
 export function getAIPresets () {
   const presets = [...defaultAIPresets]
-  if (window.et?.defaultAIPreset) {
-    presets.unshift(window.et.defaultAIPreset)
+  const customPreset = window.et?.defaultAIPreset
+  if (customPreset) {
+    // keep the first preset (sponsor) on top, insert after it
+    presets.splice(1, 0, customPreset)
   }
   return presets
 }

package/client/components/ai/ai.styl

@@ -26,11 +26,26 @@
     border-radius 3px
     pre
       margin-bottom 0
-    // .code-block-actions
-    //   display block
-    // &:hover
-    //   .code-block-actions
-    //     display block
+
+// copy icons stay visible all the time, never hover only
+.copy-icon,
+.code-action-icon
+  color var(--text-dark)
+  font-size 14px
+  &:hover
+    color var(--primary)
+
+.code-block-actions
+  display flex
+  justify-content flex-end
+
+// left aligned on purpose: the streaming stop/loading icon is pinned to the
+// bottom right of .chat-history-item, so a right aligned copy icon would sit
+// on top of it while a response is streaming
+.ai-output-actions
+  display flex
+  justify-content flex-start
+  margin-top 6px
 
 .ai-stream-output
   position relative
@@ -223,9 +238,18 @@
   font-size 12px
   color var(--text-color-2)
 
+.agent-tool-pre-wrap
+  position relative
+
+.agent-tool-copy
+  position absolute
+  top 5px
+  right 6px
+  z-index 1
+
 .agent-tool-pre
   background var(--main-dark)
-  padding 6px 8px
+  padding 6px 26px 6px 8px
   border-radius 3px
   font-size 12px
   max-height 200px
@@ -313,3 +337,78 @@
   &:hover
     border-color var(--primary)
     color var(--text)
+
+// context size indicator, right hand side of the ai chat toolbar
+.ai-context-indicator
+  display inline-flex
+  align-items center
+  gap 4px
+  flex-shrink 0
+  font-size 11px
+  line-height 1
+  color var(--text-color-2)
+  cursor default
+  user-select none
+
+.ai-context-bar
+  display inline-block
+  width 34px
+  height 5px
+  border-radius 3px
+  background var(--main-darker)
+  overflow hidden
+  flex-shrink 0
+
+.ai-context-bar-fill
+  display block
+  height 100%
+  border-radius 3px
+  background var(--primary)
+  transition width 0.2s
+
+.ai-context-count
+  color var(--text-dark)
+  font-variant-numeric tabular-nums
+
+.ai-context-percent
+  font-variant-numeric tabular-nums
+
+.ai-context-warn
+  .ai-context-bar-fill
+    background #faad14
+  .ai-context-percent
+    color #faad14
+
+.ai-context-danger
+  .ai-context-bar-fill
+    background #ff4d4f
+  .ai-context-percent
+    color #ff4d4f
+    font-weight 500
+
+.ai-context-tip
+  font-size 12px
+  min-width 210px
+
+.ai-context-tip-title
+  font-weight 500
+  margin-bottom 4px
+
+.ai-context-tip-row
+  display flex
+  justify-content space-between
+  gap 12px
+
+.ai-context-tip-total
+  font-weight 500
+  border-top 1px solid rgba(128, 128, 128, 0.35)
+  margin-top 2px
+  padding-top 2px
+
+.ai-context-tip-note
+  margin-top 4px
+  opacity 0.75
+
+.ai-context-tip-warn
+  margin-top 4px
+  color #faad14

package/client/components/ai/copy-icon.jsx

@@ -0,0 +1,31 @@
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+const e = window.translate
+
+/**
+ * Always visible copy icon, shared by AI output and agent tool call blocks
+ * @param {Object} props
+ * @param {string} props.text - text to copy
+ * @param {string} props.className - extra class for positioning
+ * @param {string} props.title - tooltip title
+ */
+export default function CopyIcon ({ text, className = '', title }) {
+  function handleCopy (evt) {
+    // agent tool card header toggles expanded state on click
+    evt.stopPropagation()
+    copy(text)
+  }
+
+  if (!text) {
+    return null
+  }
+
+  return (
+    <CopyOutlined
+      className={`copy-icon pointer iblock${className ? ' ' + className : ''}`}
+      onClick={handleCopy}
+      title={title || e('copy')}
+    />
+  )
+}

package/client/components/bg/css-overwrite.jsx

@@ -93,10 +93,25 @@ async function createStyleForTab (tab, props) {
         'background-image: none'
       )
     }
-  } else if (st !== 'none') {
+  } else if (st === 'none') {
+    // The [🚫] opt-out must be spelled out: this rule has a higher specificity
+    // than the global one, but an empty declaration block would still let the
+    // built-in default bg painted by createGlobalStyle show through.
+    styles.push('background-image: none')
+  } else {
     styles.push(
       `background-image: ${st}`,
       'background-position: center',
+      // createGlobalStyle's built-in default bg rule carries an auto-fit
+      // `background-size` (so the 766px wide watermark is not cropped on
+      // narrow panes), and for the active tab it targets this very same
+      // ::before. `background-size` is not reset by a rule that only sets
+      // `background-image`, so it would leak onto the user's image and scale
+      // it down to at most 766px, centred — a big image that used to fill the
+      // pane would no longer cover it. Stating the initial value keeps user
+      // images at their natural size, which is what they rendered at before
+      // the auto-fit was introduced.
+      'background-size: auto',
       `filter: ${createFilterStyle(props, tab)}`
     )
   }

package/client/components/bookmark-form/common/fields.jsx

@@ -20,6 +20,7 @@ import TriggersField from '../../triggers/triggers-field.jsx'
 import ProfileItem from './profile-item.jsx'
 import renderRunScripts from './run-scripts.jsx'
 import SerialPathSelector from './serial-path-selector.jsx'
+import VvFileField from './vv-file-field.jsx'
 import SshHostSelector from './ssh-host-selector.jsx'
 import SshAuthTypeSelector from './ssh-auth-type-selector.jsx'
 import SshAuthSelector from './ssh-auth-selector.jsx'
@@ -150,6 +151,8 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
       )
     case 'proxy':
       return <ProxyField key={name} bookmarks={ctxProps.bookmarks} />
+    case 'vvFile':
+      return <VvFileField key={name} form={form} />
     case 'x11':
       return <X11Field key={name} form={form} />
     case 'sshTunnels':

package/client/components/bookmark-form/common/vv-file-field.jsx

@@ -0,0 +1,138 @@
+/**
+ * bookmark form - load a .vv (virt-viewer) connection file
+ *
+ * Registered as field type 'vvFile' in ./fields.jsx and used by
+ * ../config/spice.js. Fills host/port/password/title/proxy/tls/ca/hostSubject
+ * from the file and reports anything it could not honour instead of dropping
+ * it silently.
+ */
+import { useState } from 'react'
+import {
+  Form,
+  Button,
+  Alert
+} from 'antd'
+import { FileAddOutlined } from '@ant-design/icons'
+import fs from '../../../common/fs'
+import { tailFormItemLayout } from '../../../common/form-layout'
+import { parseVv, describeVv } from '../../../common/parse-vv'
+
+const FormItem = Form.Item
+
+/**
+ * window.translate echoes an unknown key back capitalised, so an unmapped
+ * 'loadVvFile' would render as "LoadVvFile". The key IS in
+ * ~/dev/electerm-locales, but the app consumes the published
+ * @electerm/electerm-locales, so it stays unknown until that ships and the dep
+ * is bumped. Fall back to the literal, which is what en_us resolves to anyway
+ * (capitalizeFirstLetter('load .vv file')), so nothing changes visually when
+ * the translation does land.
+ */
+function vvLabel () {
+  const t = window.translate('loadVvFile')
+  return t === 'LoadVvFile' ? 'Load .vv file' : t
+}
+
+/**
+ * Open the native file dialog, filtered to .vv files.
+ * window.api.openDialog is dialog.showOpenDialogSync in the main process
+ * (see src/app/lib/ipc.js), so the full Electron options object is accepted.
+ * @returns {Promise<string|null>} selected path, or null when cancelled
+ */
+async function pickVvFile () {
+  const files = await window.api.openDialog({
+    title: 'Choose a .vv connection file',
+    message: 'Choose a .vv connection file',
+    properties: [
+      'openFile',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ],
+    filters: [
+      { name: 'Virt Viewer connection file', extensions: ['vv'] },
+      { name: 'All files', extensions: ['*'] }
+    ]
+  }).catch(() => false)
+  if (!files || !files.length) {
+    return null
+  }
+  return files[0]
+}
+
+export default function VvFileField ({ form }) {
+  const [hint, setHint] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    setHint(null)
+    try {
+      const filePath = await pickVvFile()
+      if (!filePath) {
+        return
+      }
+      // fs.readFile resolves the file as a utf8 string (src/app/lib/fs.js)
+      const text = await fs.readFile(filePath)
+      const parsed = parseVv(text)
+
+      if (!parsed.ok) {
+        setHint({ type: 'error', text: describeVv(parsed) })
+        return
+      }
+
+      // Only push the keys the file actually defined, so loading a .vv on top
+      // of a partly filled form does not wipe the other fields.
+      form.setFieldsValue(parsed.fields)
+
+      const notes = parsed.warnings.slice()
+      if (parsed.ignored.length) {
+        notes.push(
+          'skipped: ' + parsed.ignored.map(d => d.key).join(', ')
+        )
+      }
+      if (parsed.unknown.length) {
+        notes.push(
+          'unrecognised: ' + parsed.unknown.map(d => d.key).join(', ')
+        )
+      }
+
+      const summary = describeVv(parsed)
+      setHint({
+        type: notes.length ? 'warning' : 'success',
+        text: summary + (notes.length ? ' -- ' + notes.join('; ') : '')
+      })
+    } catch (err) {
+      setHint({ type: 'error', text: 'cannot read file: ' + err.message })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <FormItem
+      {...tailFormItemLayout}
+    >
+      <Button
+        icon={<FileAddOutlined />}
+        loading={loading}
+        onClick={load}
+      >
+        {vvLabel()}
+      </Button>
+      {
+        hint && (
+          <Alert
+            className='mg1t'
+            type={hint.type}
+            title={hint.text}
+            showIcon
+            closable
+            onClose={() => setHint(null)}
+          />
+        )
+      }
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/config/spice.js

@@ -12,6 +12,9 @@ const spiceConfig = {
   initValues: (props) => {
     return createBaseInitValues(props, terminalSpiceType, {
       port: 5900,
+      tls: false,
+      ca: '',
+      hostSubject: '',
       viewOnly: false,
       scaleViewport: true,
       connectionHoppings: [],
@@ -26,8 +29,27 @@ const spiceConfig = {
       fields: [
         commonFields.category,
         commonFields.colorTitle,
+        { type: 'vvFile', name: '__vv__', label: '' },
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
+        { type: 'switch', name: 'tls', label: 'TLS', valuePropName: 'checked' },
+        {
+          type: 'textarea',
+          name: 'ca',
+          label: 'CA certificate (PEM)',
+          props: {
+            autoSize: { minRows: 2, maxRows: 8 },
+            placeholder: '-----BEGIN CERTIFICATE-----'
+          }
+        },
+        {
+          type: 'input',
+          name: 'hostSubject',
+          label: 'Certificate subject',
+          props: {
+            placeholder: 'CN=pve1,O=Proxmox Virtual Environment'
+          }
+        },
         { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },
         { type: 'switch', name: 'scaleViewport', label: () => e('scaleViewport'), valuePropName: 'checked' },
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.spice) },