@electerm/electerm-react 5.3.26 → 5.5.6

package/README.md

@@ -1,31 +1,265 @@
 <h1 align="center" style="padding-top: 60px;padding-bottom: 40px;">
-    <a href="https://electerm.github.io/electerm">
+    <a href="https://electerm.org">
         <img src="https://github.com/electerm/electerm-resource/raw/master/static/images/electerm.png", alt="" />
     </a>
 </h1>
 
-# electerm [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Open%20sourced%20terminal%2Fssh%2Fsftp%20client(linux%2C%20mac%2C%20win)&url=https%3A%2F%2Fgithub.com%2Felecterm%2Felecterm&hashtags=electerm,ssh,terminal,sftp)
-
-[![GitHub version](https://img.shields.io/github/release/electerm/electerm/all.svg)](https://github.com/electerm/electerm/releases)
+[![GitHub version](https://badgers.space/github/release/electerm/electerm?corner_radius=m)](https://github.com/electerm/electerm/releases)
 [![Build Status](https://github.com/electerm/electerm/actions/workflows/mac-test-1.yml/badge.svg)](https://github.com/electerm/electerm/actions)
-[![license](https://img.shields.io/github/license/electerm/electerm.svg)](https://github.com/electerm/electerm/blob/master/LICENSE)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-[![Get it from the Snap Store](https://img.shields.io/badge/Snap-Store-green)](https://snapcraft.io/electerm)
-[![Get it from the Microsoft Store](https://img.shields.io/badge/Microsoft-Store-blue)](https://www.microsoft.com/store/apps/9NCN7272GTFF)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/electerm/electerm/blob/master/LICENSE)
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/electerm?label=Sponsors)](https://github.com/sponsors/electerm)
+[![star](https://atomgit.com/electerm/electerm/star/badge.svg)](https://atomgit.com/electerm/electerm)
+
+[English](README.md) | [中文](build/docs/README_cn.md) | [日本語](build/docs/README_jp.md)
+
+This is react components pack for electerm sub projects
+
+Open-sourced terminal/ssh/sftp/telnet/serialport/RDP/VNC/Spice/ftp client(Linux, Mac, Windows, Android, HarmonyOS, iOS).
+
+Besides mainstream Windows/macOS/Linux/Android, electerm also supports HarmonyOS, iOS, and older systems — Ubuntu 18, Windows 7, macOS 10+, and special Chinese Linux distributions such as UOS, Kylin, and LoongArch (both old-world and new-world).
+
+<p>
+  <a href="https://electerm.org">Homepage / Downloads</a> ·
+  <a href="https://theme.electerm.org">Theme</a> ·
+  <a href="https://github.com/electerm/electerm-web-docker">Docker</a> ·
+  <a href="https://demo.electerm.org">Online demo</a> ·
+  <a href="https://github.com/electerm/electerm-android">Android</a> ·
+  <a href="https://github.com/electerm/electerm-harmony">HarmonyOS</a> ·
+  <a href="https://apps.apple.com/cn/app/electerm/id6792971552">Apple App Store</a> ·
+  <a href="https://appgallery.huawei.com/app/detail?id=org.electerm.electerm">Huawei AppGallery</a> ·
+  <a href="https://www.microsoft.com/store/apps/9NCN7272GTFF">Microsoft Store</a> ·
+  <a href="https://snapcraft.io/electerm">Snap Store</a> ·
+  <a href="https://repos.electerm.org/deb">deb repo</a> ·
+  <a href="https://repos.electerm.org/rpm">rpm repo</a>
+</p>
+
+<div>🌐 <strong><a href="https://cloud.electerm.org">electerm online</a></strong> — Public free online electerm app</div>
+<div>🤖 <strong><a href="https://ai.electerm.org">electerm AI</a></strong> — Free AI for electerm users</div>
+<div>💻 <strong><a href="https://github.com/electerm/electerm-web">electerm-web</a></strong> — Web app version running in browser (including mobile device)</div>
+
+## Sponsors
+
+<div align="center">
+  <a href="https://www.atlascloud.ai/?ref=PCAEL2&utm_source=github&utm_medium=link&utm_campaign=electerm">
+    <img src="https://github.com/electerm/electerm-resource/blob/master/static/images/atlas-cloud.png?raw=true" alt="Atlas Cloud" height="200" />
+  </a>
+</div>
+
+[Atlas Cloud](https://www.atlascloud.ai/?ref=PCAEL2&utm_source=github&utm_medium=link&utm_campaign=electerm) provides OpenAI-compatible AI APIs and model access for AI-powered workflows in electerm.
+
+----
+
+<div align="center">
+  <br />
+  <br />
+  <a href="https://go.apimart.ai/gh-electerm">
+    <img src="https://github.com/electerm/electerm-resource/blob/master/static/images/apimart.jpg?raw=true" alt="ApiMart" width="200" />
+  </a>
+  <br />
+  <br />
+</div>
+
+Thanks to APIMart for sponsoring electerm! APIMart is a low-cost API platform for AI image & video generation — GPT-Image-2 from $0.006/image, 160+ images per dollar. One async API covers both image and video: submit a task, get an ID, fetch results via polling or callback. Batch tens of thousands of images without timeouts, switch models without changing code. Pay-as-you-go with no monthly fee — [sign up here to get started](https://go.apimart.ai/gh-electerm).
+
+----
+
+<div align="center">
+  <a href="https://www.apismart.ai">
+    <img src="https://github.com/electerm/electerm-resource/blob/master/static/images/apismart400x400.png?raw=true" alt="ApiSmart" width="200" />
+  </a>
+</div>
+
+[ApiSmart](https://www.apismart.ai) provides unified access to leading AI models through a single API. Use one API key to connect with LLM, image, and video models through an OpenAI-compatible interface, without managing multiple providers separately. Switch models easily, simplify billing, and improve reliability with intelligent routing and automatic failover. Build and scale AI applications faster with one streamlined API platform.
+
+----
+
+<div align="center">
+
+<a href="https://www.digitalocean.com/?refcode=c10bcb28b846&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img align="middle" src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%202.svg" alt="DigitalOcean Referral Badge" /></a>&nbsp;&nbsp;&nbsp;<a href="https://oss-directory.vercel.app"><img align="middle" src="https://github.com/electerm/electerm-resource/blob/master/static/images/vercel-oss-2005.png?raw=true" alt="Vercel OSS Program" /></a>
+
+</div>
+
+<div align="center">
+    <img src="https://github.com/electerm/electerm-resource/raw/master/static/images/electerm-banner-1.jpg", alt="" />
+</div>
+
+## Features
+
+- Works as a terminal/file manager, ssh/sftp/ftp/telnet/serialport/RDP/VNC/Spice client
+- Support Window 7+(X64/ARM64), HarmonyOS，Android, iOS, Mac OS 10.15+(x64/arm64), Linux(x64/arm64/Loong64 new world & old world), even old Linux with glibc 2.17+ like UOS/Kylin/Ubuntu 18.04 etc
+- Global hotkey to toggle window visibility (similar to guake, default is `ctrl + 2`)
+- 🇺🇸 🇨🇳 🇧🇷 🇷🇺 🇪🇸 🇫🇷 🇹🇷 🇭🇰 🇯🇵 🇸🇦 🇩🇪 🇰🇷 🇮🇩 🇵🇱 Multi-language support([electerm-locales](https://github.com/electerm/electerm-locales), contributions/fixes welcome)
+- Double click to directly edit (small) remote files.
+- All kind of auth methods: publicKey, password, ssh agent, certificates, otp, netbird etc.
+- Support Zmodem(rz, sz), and [Trzsz](https://github.com/trzsz/trzsz)(trz/tsz).
+- Support ssh related features: tunnel, connection hopping.
+- Customizable UI: themes, background image, transparent window(Mac, win).
+- Global/session proxy.
+- Quick commands/triggers to do predefined tasks and automattic operations
+- Sync data including bookmarks to github/gitee secret gist/webdav/custom server/electerm cloud
+- Quick input/mirror input to one or all terminals.
+- AI assistant integration (supporting multiple LLM API formats — OpenAI Chat Completions, OpenAI Responses, and Anthropic Messages) to help with command suggestions, script writing, and explaining selected terminal content, create bookmarks/themes, and agent mode to directly do terminal operations
+- MCP (Model Context Protocol) widget for AI assistants and external tools integration - see [MCP Widget Usage Guide](https://github.com/electerm/electerm/wiki/MCP-Widget-Usage-Guide)
+- Deep link support: Open connections with URLs like `telnet://192.168.2.31:34554` or `ssh://user@host:22` - see [Deep link support wiki](https://github.com/electerm/electerm/wiki/Deep-link-support)
+- Command line usage: check [wiki](https://github.com/electerm/electerm/wiki/Command-line-usage)
+
+## Install
+
+- For Mac user: `brew install --cask electerm`
+- With snap: `sudo snap install electerm --classic`
+- For some Linux distribution, you can find it from OS default App store(Ubuntu, Deepin, Mint...).
+- For some linux OS, the `rpm`, `deb`, or `snap` release may not work, you can try the `tar.gz` or `.appImage` release.
+- For Windows users, you can install it from [windows store](https://www.microsoft.com/store/apps/9NCN7272GTFF), command-line installer [winget](https://github.com/microsoft/winget-cli) and [scoop](https://github.com/lukesampson/scoop) is also recommended:
+
+```powershell
+# winget https://github.com/microsoft/winget-cli
+winget install electerm.electerm
+
+# scoop https://github.com/lukesampson/scoop
+scoop bucket add dorado https://github.com/chawyehsu/dorado
+scoop install dorado/electerm
+```
+
+- Install from Debian repository (for Debian/Ubuntu-based systems) with `apt` command
+
+Check [https://repos.electerm.org/deb](https://repos.electerm.org/deb)
+
+- Install from npm
+
+```bash
+npm i -g electerm
+
+```
+
+## Upgrade
+
+- Auto upgrade: When a new version is released, you will get an upgrade notification after you start electerm again. You can then click the upgrade button to upgrade.
+- Download: Just download the latest edition, reinstall.
+- Npm: If you install from npm, just run `npm i -g electerm` again.
+- If use Snap or some other distribution system, these systems may provide upgrades.
+
+## Known issues
+
+[https://github.com/electerm/electerm/wiki/Know-issues](https://github.com/electerm/electerm/wiki/Know-issues)
 
-Open-sourced terminal/ssh/telnet/serialport/sftp client(linux, mac, win).
+## Troubleshoot
 
-This is react components src for electerm
+[https://github.com/electerm/electerm/wiki/Troubleshoot](https://github.com/electerm/electerm/wiki/Troubleshoot)
 
-## Use
+## Discussion
 
-todo
+[![Discord](https://img.shields.io/badge/Discord-Join-blue?logo=discord)](https://discord.gg/855W7g8EVd)
+
+[Discussion board](https://github.com/electerm/electerm/discussions)
+
+![electerm-wechat-group-qr.jpg](https://electerm.org/electerm-wechat-group-qr.jpg)
+
+## Support
+
+Would love to hear from you, please tell me what you think, [submit an issue](https://github.com/electerm/electerm/issues), [Start a new discussion](https://github.com/electerm/electerm/discussions/new), [create/fix language files](https://github.com/electerm/electerm-locales) or create pull requests, all welcome.
+
+## Sponsor this project
+
+github sponsor
+
+[https://github.com/sponsors/electerm](https://github.com/sponsors/electerm)
+
+kofi
+
+[https://ko-fi.com/zhaoxudong](https://ko-fi.com/zhaoxudong)
+
+wechat donate
+
+[![wechat donate](https://electerm.org/electerm-wechat-donate.png)](https://github.com/electerm)
+
+TRON TRN20
+
+[![TRN20 donate](https://github.com/electerm/electerm-resource/blob/master/static/images/trn20.png?raw=true)]
+
+Address: TXk3pQNmQu1vihH76RaEFnK9wg13x4LLCZ
+
+## Dev
+
+```bash
+# May only works in Linux
+# needs nodejs/npm, suggest using nvm to install nodejs/npm
+# with nodejs 24.x
+
+git clone git@github.com:electerm/electerm.git
+cd electerm
+npm config set legacy-peer-deps true
+npm i
+
+# start vite dev server, requires port 5570
+npm start
+
+# in a separate terminal session run app
+npm run app
+
+# code format check
+npm run lint
+
+# code format fix
+npm run fix
+```
+
+## Test
+
+```bash
+npm run b
+npm run prepare-test
+cp ./build/.sample.env ./.env
+
+# edit .env, fill your test host/username/password, may only works in mac OS
+npm run test
+```
+
+## Test build
+
+```bash
+# May only works in Linux
+# Install yarn first(to do yarn autoclean)
+# See https://yarnpkg.com/en/docs/install
+
+# Build linux only with -l
+npm i
+npm run b
+npm run pb
+./node_modules/.bin/electron-builder --linux tar.gz
+# or replace tar.gz to rpm/deb/AppImage
+# check dist/ folder
+
+# build for linux arm/
+./node_modules/.bin/electron-builder --linux --arm64
+```
+
+## Video guide
+
+- [https://electerm.org/videos](https://electerm.org/videos)
 
 ## Change log
 
 Visit [Releases](https://github.com/electerm/electerm/releases).
 
+## Contact author
+
+[zxdong@gmail.com](mailto:zxdong@gmail.com)
+
+
 ## License
 
 MIT
+
+## Star History
+
+<p>
+ <a href="https://www.star-history.com/electerm/electerm"><img src="https://api.star-history.com/badge?repo=electerm/electerm" alt="Star History Rank" /></a>
+</p>
+
+<a href="https://www.star-history.com/?repos=electerm%2Felecterm&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=electerm/electerm&type=date&legend=top-left&sealed_token=DvPlttPaLtq6RPIWRANYX08-8ZJyrJalhombrkDcg1IwWOMPMIplgi85q0FiwrbhE3lRIi_yxvOWdell731CGQvzlfJMt2Sa6VfCvQ80BwEtQ6RpPchEiw" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=electerm/electerm&type=date&legend=top-left&sealed_token=DvPlttPaLtq6RPIWRANYX08-8ZJyrJalhombrkDcg1IwWOMPMIplgi85q0FiwrbhE3lRIi_yxvOWdell731CGQvzlfJMt2Sa6VfCvQ80BwEtQ6RpPchEiw" />
+   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=electerm/electerm&type=date&legend=top-left&sealed_token=DvPlttPaLtq6RPIWRANYX08-8ZJyrJalhombrkDcg1IwWOMPMIplgi85q0FiwrbhE3lRIi_yxvOWdell731CGQvzlfJMt2Sa6VfCvQ80BwEtQ6RpPchEiw" />
+ </picture>
+</a>

package/client/common/choose-save-folder.js

@@ -1,11 +1,27 @@
+import { getItem, setItem } from './safe-local-storage.js'
+
 const {
   openDialog
 } = window.api
 
-export async function chooseSaveDirectory (opts) {
+export const lastSaveFolderKey = 'last-save-folder'
+
+/**
+ * Open a folder select dialog, remembers last selected folder in
+ * localStorage and uses it as next dialog's defaultPath.
+ * Pass `defaultPath` to override the remembered one.
+ * @param {Object} opts extra openDialog options
+ * @returns {Promise<string|undefined>} selected folder path
+ */
+export async function chooseSaveDirectory (opts = {}) {
+  const {
+    defaultPath,
+    ...rest
+  } = opts
   const savePaths = await openDialog({
     title: 'Choose a folder to save file(s)',
     message: 'Choose a folder to save file(s)',
+    defaultPath: defaultPath || getItem(lastSaveFolderKey) || undefined,
     properties: [
       'openDirectory',
       'showHiddenFiles',
@@ -14,10 +30,13 @@ export async function chooseSaveDirectory (opts) {
       'treatPackageAsDirectory',
       'dontAddToRecent'
     ],
-    ...opts
+    ...rest
   })
   if (!savePaths || !savePaths.length) {
     return undefined
   }
+  if (savePaths[0]) {
+    setItem(lastSaveFolderKey, savePaths[0])
+  }
   return savePaths[0]
 }

package/client/common/constants.js

@@ -1,6 +1,7 @@
 /**
  * constants
  */
+import { isMacJs } from './platform.js'
 import logoPath1Ref from '@electerm/electerm-resource/res/imgs/electerm-round-128x128.png'
 import logoPath2Ref from '@electerm/electerm-resource/res/imgs/electerm.png'
 import logoPath3Ref from '@electerm/electerm-resource/res/imgs/electerm-watermark.png'
@@ -29,6 +30,7 @@ export const termControlHeight = 32
 export const maxDragMove = 30
 export const splitDraggerWidth = 5
 export const minTerminalWidth = 90
+export const minTerminalFontSize = 5
 export const filePropMinWidth = 1
 export const contextMenuHeight = 28
 export const contextMenuWidth = 280
@@ -78,12 +80,11 @@ export const authTypeMap = buildConst([
 ])
 
 export const footerHeight = 36
+export const remoteMonitorBarHeight = 28
 export const quickCommandBoxHeight = 180
 export const shortcutBarHeight = 44
 export const shortcutBarLsKey = 'shortcut-bar-buttons'
-export const isWin = typeof window.et.isWin === 'undefined' ? window.pre.isWin : window.et.isWin
-export const isMac = typeof window.et.isMac === 'undefined' ? window.pre.isMac : window.et.isMac
-export const isMacJs = /Macintosh|Mac|Mac OS|MacIntel|MacPPC|Mac68K/gi.test(window.navigator.userAgent)
+export { isWin, isMac, isMacJs } from './platform.js'
 export const ctrlOrCmd = isMacJs ? 'cmd' : 'ctrl'
 export const typeMap = buildConst([
   'remote',
@@ -106,13 +107,15 @@ export const settingMap = buildConst([
   'addressBookmarks',
   'profiles',
   'widgets',
-  'workspaces'
+  'workspaces',
+  'triggers'
 ])
 
 export const staticNewItemTabs = new Set([
   'terminalThemes',
   'quickCommands',
-  'profiles'
+  'profiles',
+  'triggers'
 ])
 
 export const infoTabs = buildConst([
@@ -238,6 +241,16 @@ export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const settingPasswordsId = 'setting-passwords'
+// settings that only apply to the desktop (electron) app,
+// hidden when window.et.isWebApp is true
+export const webAppHiddenSettings = [
+  'hotkey',
+  'opacity',
+  'useSystemTitleBar',
+  'checkUpdateOnStart',
+  'allowMultiInstance',
+  'disableDeveloperTool'
+]
 export const defaultEnvLang = 'en_US.UTF-8'
 export const fileActions = {
   cancel: 'cancel',
@@ -364,7 +377,8 @@ export const syncDataMaps = {
   quickCommands: ['quickCommands'],
   profiles: ['profiles'],
   addressBookmarks: ['addressBookmarks'],
-  workspaces: ['workspaces']
+  workspaces: ['workspaces'],
+  triggers: ['triggers']
 }
 export const terminalTypes = [
   'xterm-256color',

package/client/common/create-title.jsx

@@ -42,6 +42,12 @@ export default function createTitle (res, hide = true) {
   ) {
     f = `[T]${f}`
   }
+  if (res.mcpStatus) {
+    f = `[${res.mcpStatus}]${f}`
+  }
+  if (res.from === 'mcp') {
+    f = `[mcp]${f}`
+  }
   if (type && type !== 'ssh') {
     f = `[${type}]${f}`
   }

package/client/common/default-setting.js

@@ -58,6 +58,18 @@ export default {
     'network',
     'disks'
   ],
+  remoteMonitorBarEnabled: false,
+  remoteMonitorBarItems: [
+    'hostname',
+    'cpu',
+    'cpuHistory',
+    'memory',
+    'upload',
+    'download',
+    'uptime',
+    'users',
+    'disks'
+  ],
   filePropsEnabled: [
     'name',
     'size',
@@ -75,11 +87,13 @@ export default {
   sshSftpSplitView: false,
   showCmdSuggestions: false,
   autoReconnectTerminal: false,
+  restoreTerminalSessionOnReload: false,
   startDirectoryLocal: '',
   allowMultiInstance: false,
   disableDeveloperTool: false,
   dragDropBehavior: 'ask',
   switchTabOnHover: false,
+  disableTabIndex: false,
   disableShortcutBar: false,
   leftSideBarIcons: [
     'newBookmark',

package/client/common/init-setting-item.js

@@ -26,6 +26,11 @@ export default (arr, tab) => {
       id: '',
       name: e(newQuickCommand)
     }
+  } else if (tab === settingMap.triggers) {
+    return {
+      id: '',
+      name: e(settingMap.triggers)
+    }
   } else if (tab === settingMap.profiles) {
     return {
       id: '',

package/client/common/platform.js

@@ -0,0 +1,24 @@
+/**
+ * Platform flags.
+ *
+ * Split out of constants.js: that module imports PNG assets at the top level,
+ * which makes anything importing it unloadable in a plain Node (unit test)
+ * context. Modules that only need isWin/isMac should import from here.
+ */
+const read = (name) => {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  const { et, pre } = window
+  if (et && typeof et[name] !== 'undefined') {
+    return et[name]
+  }
+  return pre ? !!pre[name] : false
+}
+
+export const isWin = read('isWin')
+
+export const isMac = read('isMac')
+
+export const isMacJs = typeof navigator !== 'undefined' &&
+  /Macintosh|Mac|Mac OS|MacIntel|MacPPC|Mac68K/gi.test(navigator.userAgent)

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Tag } from 'antd'
 import {
   CaretDownOutlined,
@@ -33,11 +33,19 @@ function formatResult (result) {
   }
 }
 
-export default function AgentToolCallCard ({ toolCall }) {
+export default function AgentToolCallCard ({ toolCall, autoCollapse }) {
   const [expanded, setExpanded] = useState(toolCall.status === 'running')
   const { name, args, status, result } = toolCall
   const Icon = toolIcons[name] || CodeOutlined
 
+  // Collapse every tool call once the agent session is done,
+  // user can still expand them again by clicking the header
+  useEffect(() => {
+    if (autoCollapse) {
+      setExpanded(false)
+    }
+  }, [autoCollapse])
+
   function renderStatus () {
     if (status === 'running') {
       return <LoadingOutlined className='agent-tool-status-running' />

package/client/components/ai/agent.js

@@ -60,7 +60,10 @@ export async function runAgentLoop (chatEntry, config, abortRef, setIsStreaming,
     } else {
       messages = [
         { role: 'system', content: buildAgentSystemPrompt(config) },
-        { role: 'user', content: chatEntry.prompt }
+        {
+          role: 'user',
+          content: chatEntry.promptWithAttachments || chatEntry.prompt
+        }
       ]
     }
     const toolCallsLog = []

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

@@ -0,0 +1,87 @@
+// text file attachment support for AI chat
+// only text files are supported: content is read and inlined
+// into the prompt, images/binaries are rejected
+import uid from '../../common/uid'
+
+export const MAX_ATTACHMENT_FILE_SIZE = 50 * 1024
+export const MAX_ATTACHMENT_TOTAL_SIZE = 100 * 1024
+
+const BINARY_SNIFF_LEN = 8 * 1024
+const decoder = new TextDecoder('utf-8')
+
+// binary check: null byte anywhere, or too many control chars
+function looksLikeText (buf) {
+  const len = Math.min(buf.byteLength, BINARY_SNIFF_LEN)
+  if (!len) {
+    return false
+  }
+  const arr = new Uint8Array(buf, 0, len)
+  let control = 0
+  for (const b of arr) {
+    if (b === 0) {
+      return false
+    }
+    if (b < 9 || (b > 13 && b < 32)) {
+      control++
+    }
+  }
+  return control / len <= 0.1
+}
+
+// trailing U+FFFD means a multi-byte char got cut at the size boundary
+function stripTrailingBadChars (str) {
+  let end = str.length
+  while (end > 0 && str[end - 1] === '\uFFFD') {
+    end--
+  }
+  return str.slice(0, end)
+}
+
+export async function readTextAttachment (file) {
+  const buf = await file.slice(0, MAX_ATTACHMENT_FILE_SIZE).arrayBuffer()
+  if (!looksLikeText(buf)) {
+    return {
+      error: 'notTextFile'
+    }
+  }
+  const truncated = file.size > MAX_ATTACHMENT_FILE_SIZE
+  let content = stripTrailingBadChars(decoder.decode(buf))
+  if (truncated) {
+    content += '\n...[truncated]'
+  }
+  return {
+    attachment: {
+      id: uid(),
+      name: file.name,
+      size: file.size,
+      truncated,
+      content
+    }
+  }
+}
+
+export function validateAttachmentTotal (list, extraSize = 0) {
+  const total = list.reduce((s, a) => s + a.size, 0) + extraSize
+  return total <= MAX_ATTACHMENT_TOTAL_SIZE
+}
+
+export function formatSize (n) {
+  if (n < 1024) {
+    return n + ' B'
+  }
+  if (n < 1024 * 1024) {
+    return (n / 1024).toFixed(1) + ' KB'
+  }
+  return (n / 1024 / 1024).toFixed(1) + ' MB'
+}
+
+export function buildAttachmentsBlock (attachments) {
+  if (!attachments || !attachments.length) {
+    return ''
+  }
+  return attachments.map(a => {
+    const name = String(a.name).replace(/"/g, "'")
+    const attr = a.truncated ? ' truncated="true"' : ''
+    return `<file name="${name}"${attr}>\n${a.content}\n</file>`
+  }).join('\n\n')
+}

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

@@ -0,0 +1,43 @@
+import { logoPath3 } from '../../common/constants'
+import { refsStatic } from '../common/ref'
+
+const examples = [
+  'Explain current terminal output',
+  'Why did this command fail?',
+  'Write a script to clean up old log files'
+]
+
+function useExample (text) {
+  const inst = refsStatic.get('AIChat')
+  if (inst) {
+    inst.setPrompt(text)
+  }
+}
+
+export default function AiChatEmpty () {
+  return (
+    <div className='ai-chat-empty'>
+      <div className='ai-chat-empty-inner'>
+        <div
+          className='ai-chat-watermark'
+          style={{ '--ai-watermark': `url(${logoPath3})` }}
+        />
+        <div className='ai-chat-empty-title'>Ask AI about your terminal</div>
+        <div className='ai-chat-empty-hint'>
+          Explain output, debug errors, or switch to Agent to let AI run commands
+        </div>
+        <div className='ai-chat-empty-examples'>
+          {examples.map(t => (
+            <div
+              key={t}
+              className='ai-chat-empty-example'
+              onClick={() => useExample(t)}
+            >
+              {t}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}