@electerm/electerm-react 5.5.25 → 5.5.56

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

@@ -1,14 +1,15 @@
 import {
   Form,
   Input,
+  InputNumber,
   Button,
   AutoComplete,
   Alert,
-  Space,
-  Dropdown
+  Select,
+  Space
 } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
-import { DownOutlined, ReloadOutlined } from '@ant-design/icons'
+import { ReloadOutlined } from '@ant-design/icons'
 import Link from '../common/external-link'
 import AiCache from './ai-cache'
 import {
@@ -19,6 +20,7 @@ import AiHistory, { addHistoryItem } from './ai-history'
 import message from '../common/message'
 import { getAIPresets } from './ai-presets'
 import { appendMandatoryGuardrails } from './ai-guardrails'
+import './ai-config.styl'
 
 const STORAGE_KEY_CONFIG = 'ai_config_history'
 const EVENT_NAME_CONFIG = 'ai-config-history-update'
@@ -210,18 +212,32 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
     form.setFieldsValue(values)
   }
 
-  function renderPresetMenu () {
-    const items = presets.map(p => ({
-      key: p.id,
-      label: p.nameAI,
-      onClick: () => handleSelectPreset(p)
+  // A plain antd Select, on purpose: it already scrolls its list inside the
+  // viewport (a Dropdown menu grows past the bottom of a phone screen, so the
+  // tail of the 18 presets is unreachable there) and `showSearch` filters it.
+  // `optionFilterProp` is load-bearing: without it rc-select filters on the
+  // option *value* (our id), so "gemini" or "llama" match nothing. The label
+  // carries name and model, so filtering on it finds either.
+  // The label/select sizing lives in `.ai-preset-row` (ai-config.styl), because
+  // Space's `.ant-space-item` wrapper is the flex item, not the child.
+  function renderPresetSelect () {
+    const options = presets.map(p => ({
+      value: p.id,
+      label: p.modelAI ? `${p.nameAI} · ${p.modelAI}` : p.nameAI
     }))
     return (
-      <Dropdown menu={{ items }} trigger={['click']}>
-        <Button>
-          {e('presets')} <DownOutlined />
-        </Button>
-      </Dropdown>
+      <div className='alignright'>
+        <Space className='mg1b width-100 ai-preset-row'>
+          <span>{e('presets')}</span>
+          <Select
+            showSearch
+            optionFilterProp='label'
+            options={options}
+            value={currentPreset?.id}
+            onSelect={id => handleSelectPreset(presets.find(p => p.id === id))}
+          />
+        </Space>
+      </div>
     )
   }
 
@@ -293,9 +309,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
         type='warning'
         className='mg2b'
       />
-      <div className='mg1b alignright'>
-        {renderPresetMenu()}
-      </div>
+      {renderPresetSelect()}
       <p>
         Full Url: {initialValues?.baseURLAI}{initialValues?.apiPathAI}
       </p>
@@ -356,6 +370,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-config.styl

@@ -0,0 +1,20 @@
+// Preset row: the "Presets" label and the provider select share one line.
+// antd's Space wraps every child in a `.ant-space-item`, and that wrapper — not
+// the child — is the flex item, so the flex behaviour has to be set on the
+// wrappers. Put `flex` on the Select itself and it is silently ignored, which
+// makes the row's overflow land on the label: at 480px wide the label is
+// squeezed into a 17px column and wraps onto four lines.
+.ai-preset-row
+  max-width 400px
+  .ant-space-item:first-child
+    // the label keeps its full text width and never wraps or shrinks
+    flex none
+    white-space nowrap
+
+  .ant-space-item:last-child
+    // the select takes the rest of the line, shrinking to nothing if it must
+    flex 1
+    min-width 0
+
+    .ant-select
+      width 100%

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>
+  )
+}

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 = 80
+
+// 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
 
@@ -97,12 +98,7 @@ export default function AIOutput ({ item }) {
   }
 
   function handleToggleFlag () {
-    const index = window.store.aiChatHistory.findIndex(i => i.id === item.id)
-    if (index === -1) {
-      return
-    }
-    window.store.aiChatHistory[index].flagged = !window.store.aiChatHistory[index].flagged
-    window.store.aiChatHistory = [...window.store.aiChatHistory]
+    window.store.updateAiHistoryEntry(item.id, { flagged: !item.flagged })
   }
 
   function renderFlag () {
@@ -160,6 +156,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

@@ -6,7 +6,7 @@ export const defaultAIPresets = [
     apiPathAI: '/chat/completions',
     modelAI: 'deepseek-v4-flash-0731',
     authHeaderNameAI: 'Authorization: Bearer',
-    siteUrl: 'https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm'
+    siteUrl: 'https://fluxionai.world/register?source=github&campaign=electerm-20260923&promo=ELECTERM&aff=7H7DERHU3GFF'
   },
   {
     id: 'atlascloud',
@@ -67,21 +67,6 @@ export const defaultAIPresets = [
     authHeaderNameAI: 'Authorization: Bearer',
     siteUrl: 'https://platform.openai.com/api-keys?utm_source=electerm_app&utm_medium=link&utm_campaign=electerm'
   },
-  {
-    id: 'openai-responses',
-    nameAI: 'OpenAI (Responses API)',
-    baseURLAI: 'https://api.openai.com/v1',
-    apiPathAI: '/responses',
-    modelAI: 'gpt-4o',
-    authHeaderNameAI: 'Authorization: Bearer',
-    modelAIs: [
-      { value: 'gpt-4o' },
-      { value: 'gpt-4o-mini' },
-      { value: 'gpt-4.1' },
-      { value: 'o4-mini' }
-    ],
-    siteUrl: 'https://platform.openai.com/api-keys?utm_source=electerm_app&utm_medium=link&utm_campaign=electerm'
-  },
   {
     id: 'anthropic',
     nameAI: 'Anthropic Claude',

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