@electerm/electerm-react 5.5.9 → 5.5.25

package/README.md

@@ -16,7 +16,7 @@ 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).
+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), as well as RISC-V (riscv64) and PowerPC 64-bit little-endian (ppc64le) Linux.
 
 <p>
   <a href="https://electerm.org">Homepage / Downloads</a> ·
@@ -49,6 +49,16 @@ Besides mainstream Windows/macOS/Linux/Android, electerm also supports HarmonyOS
 
 ----
 
+<div align="center">
+  <a href="https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm">
+    <img src="https://github.com/electerm/electerm-resource/blob/master/static/images/fluxionai.png?raw=true" alt="FluxionAI" height="180" />
+  </a>
+</div>
+
+[Fluxion AI](https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm) — One gateway to the world's leading AI models. [Sign up here to get started](https://fluxionai.world/register?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm).
+
+----
+
 <div align="center">
   <br />
   <br />
@@ -86,7 +96,7 @@ Thanks to APIMart for sponsoring electerm! APIMart is a low-cost API platform fo
 ## 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
+- Support Window 7+(X64/ARM64), HarmonyOS，Android, iOS, Mac OS 10.15+(x64/arm64), Linux(x64/arm64/riscv64/ppc64le/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.

package/client/common/constants.js

@@ -2,6 +2,7 @@
  * constants
  */
 import { isMacJs } from './platform.js'
+import { defaultThemeId, defaultThemeLightId } from './theme-defaults.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'
@@ -156,6 +157,7 @@ export const leftSideBarOpenKey = 'left-side-bar-open'
 export const pinnedQuickCommandBarKey = 'pinned-quick-command-bar'
 export const leftSidePanelWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
+export const rightPanelPinnedKey = 'right-panel-pinned'
 export const addPanelWidthLsKey = 'addPanelWidth'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'
 export const qmSortByFrequencyKey = 'qm-sort-by-frequency'
@@ -241,6 +243,18 @@ export const settingShortcutsId = 'setting-shortcuts'
 export const settingAiId = 'setting-ai'
 export const settingCommonId = 'setting-common'
 export const settingPasswordsId = 'setting-passwords'
+// Built in items the user is not allowed to delete: the two settings tabs,
+// the default bookmark group and the two built in terminal themes.
+// Keep this an explicit id list. A prefix test like `id.startsWith('default')`
+// would also cover user facing seeds (default quick commands, default local
+// terminal bookmarks) that the user must be able to remove.
+export const undeletableIds = new Set([
+  settingSyncId,
+  settingCommonId,
+  defaultBookmarkGroupId,
+  defaultThemeId,
+  defaultThemeLightId
+])
 // settings that only apply to the desktop (electron) app,
 // hidden when window.et.isWebApp is true
 export const webAppHiddenSettings = [

package/client/common/default-setting.js

@@ -78,8 +78,8 @@ export default {
   hideIP: false,
   dataSyncSelected: 'all',
   nameAI: '',
-  baseURLAI: 'https://api.atlascloud.ai/v1',
-  modelAI: 'deepseek-chat',
+  baseURLAI: 'https://fluxionai.world/v1',
+  modelAI: 'deepseek-v4-flash-0731',
   roleAI: '终端专家,提供不同系统下命令,简要解释用法,用markdown格式',
   apiPathAI: '/chat/completions',
   proxyAI: '',

package/client/common/download.jsx

@@ -7,6 +7,18 @@ import { chooseSaveDirectory } from './choose-save-folder'
 import { DownloadOutlined } from '@ant-design/icons'
 
 export default async function download (filename, text) {
+  // iOS WKWebView: sandbox targets are invisible to the Files app and
+  // blob-anchor downloads are a no-op — save to Documents (visible in
+  // Files) via the native bridge instead (see
+  // web-components/native-file-save.js).
+  if (window.et && window.et.isWebApp && window.et.saveTextNative) {
+    try {
+      await window.et.saveTextNative(filename, text)
+      return
+    } catch (e) {
+      console.log('native save failed, falling back to sandbox save:', e)
+    }
+  }
   const opts = window.et.isWebApp
     ? { filename, content: text }
     : undefined

package/client/common/parse-vv.js

@@ -0,0 +1,313 @@
+/**
+ * .vv connection file parser (virt-viewer / remote-viewer)
+ *
+ * A .vv file is an INI document with a mandatory [virt-viewer] group and a
+ * mandatory `type` key. Everything SPICE-related lives directly in
+ * [virt-viewer] -- there is NO [spice] group. An optional [ovirt] group
+ * carries oVirt REST integration data.
+ *
+ * Behaviour is deliberately matched against:
+ *   - src/virt-viewer-file.c  (gitlab.com/virt-viewer/virt-viewer)
+ *   - remote-viewer(1), "CONNECTION FILE" section
+ *
+ * Rejection rules copied from virt_viewer_file_new():
+ *   no [virt-viewer] group  -> invalid file
+ *   no `type` key           -> invalid file
+ *   unknown keys/groups     -> kept, never an error (the format is
+ *                              extensible; the convention is an `x-` prefix)
+ *
+ * Keep in sync with src/client/common/parse-vv.js -- the two differ only in
+ * the export statement (see sanitize-filename.js for the same pattern).
+ */
+
+const MAIN_GROUP = 'virt-viewer'
+const OVIRT_GROUP = 'ovirt'
+
+/**
+ * .vv key -> bookmark field understood by
+ * src/client/components/bookmark-form/config/spice.js
+ */
+const FIELD_MAP = {
+  host: 'host',
+  port: 'port',
+  password: 'password',
+  title: 'title',
+  proxy: 'proxy'
+}
+
+/**
+ * Keys the .vv format defines but electerm cannot honour for a spice session.
+ * Each becomes a user-visible note instead of being dropped silently.
+ */
+const UNSUPPORTED = {
+  'tls-port': 'TLS is not supported (electerm makes a plain TCP connection)',
+  'tls-ciphers': 'TLS is not supported',
+  ca: 'TLS certificate verification is not supported',
+  'host-subject': 'TLS certificate verification is not supported',
+  'unix-path': 'Unix-socket transport is not supported',
+  username: 'spice sessions authenticate with the password only',
+  'disable-channels': 'spice channel selection is not supported',
+  'secure-channels': 'spice channel selection is not supported',
+  'color-depth': 'colour depth is negotiated with the server',
+  'disable-effects': 'remote desktop-effect control is not supported',
+  'enable-smartcard': 'smartcard redirection is not supported',
+  'enable-usbredir': 'USB redirection is not supported',
+  'enable-usb-autoshare': 'USB redirection is not supported',
+  'usb-filter': 'USB redirection is not supported',
+  'usb-redirect-on-connect': 'USB redirection is not supported',
+  fullscreen: 'fullscreen is a session-time toggle',
+  version: 'client version requirements are not enforced',
+  versions: 'client version requirements are not enforced',
+  'newer-version-url': 'client version requirements are not enforced',
+  'toggle-fullscreen': 'hotkey rebinding is not supported',
+  'release-cursor': 'hotkey rebinding is not supported',
+  'secure-attention': 'hotkey rebinding is not supported',
+  'zoom-in': 'hotkey rebinding is not supported',
+  'zoom-out': 'hotkey rebinding is not supported',
+  'zoom-reset': 'hotkey rebinding is not supported',
+  'smartcard-insert': 'hotkey rebinding is not supported',
+  'smartcard-remove': 'hotkey rebinding is not supported',
+  'usb-device-reset': 'hotkey rebinding is not supported'
+}
+
+const BOOL_TRUE = new Set(['1', 'true', 'yes', 'on'])
+
+function stripBom (text) {
+  return text.charCodeAt(0) === 0xfeff ? text.slice(1) : text
+}
+
+function isComment (line) {
+  return line.startsWith('#') || line.startsWith(';')
+}
+
+/**
+ * Parse INI text into { groupName: { key: value } }.
+ *
+ * GKeyFile itself is case-sensitive; group and key names are lowercased on
+ * purpose, because hand-written .vv files are inconsistent about casing and
+ * the alternative is a confusing "host not set" for a file that clearly
+ * sets `Host=`.
+ *
+ * A trailing backslash continues the value on the next line (GKeyFile rule).
+ *
+ * @param {string} text
+ * @returns {Object} groups
+ */
+function parseIni (text) {
+  const groups = {}
+  let group = null
+  const lines = stripBom(text).split(/\r\n|\r|\n/)
+
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i]
+
+    while (/\\[ \t]*$/.test(line) && i + 1 < lines.length) {
+      line = line.replace(/\\[ \t]*$/, '') + lines[++i]
+    }
+
+    const trimmed = line.trim()
+    if (!trimmed || isComment(trimmed)) {
+      continue
+    }
+
+    const groupMatch = trimmed.match(/^\[(.+)\]$/)
+    if (groupMatch) {
+      group = groupMatch[1].trim().toLowerCase()
+      if (!groups[group]) {
+        groups[group] = {}
+      }
+      continue
+    }
+
+    const eq = line.indexOf('=')
+    if (eq < 0 || !group) {
+      continue
+    }
+
+    const key = line.slice(0, eq).trim().toLowerCase()
+    // Only leading whitespace is stripped. A trailing space is significant
+    // for values such as passwords, so it is preserved.
+    const value = line.slice(eq + 1).replace(/^[ \t]+/, '')
+    if (key) {
+      groups[group][key] = value
+    }
+  }
+
+  return groups
+}
+
+/**
+ * Parse the contents of a .vv file.
+ *
+ * @param {string} text - raw contents of a .vv file
+ * @returns {{
+ *   ok: boolean, error: string|null, type: string|null,
+ *   fields: Object, applied: Array, ignored: Array,
+ *   unknown: Array, warnings: string[], deleteThisFile: boolean,
+ *   groups: Object
+ * }}
+ */
+function parseVv (text) {
+  const result = {
+    ok: false,
+    error: null,
+    type: null,
+    fields: {},
+    applied: [],
+    ignored: [],
+    unknown: [],
+    warnings: [],
+    deleteThisFile: false,
+    groups: {}
+  }
+
+  if (typeof text !== 'string' || !text.trim()) {
+    result.error = 'empty file'
+    return result
+  }
+
+  let groups
+  try {
+    groups = parseIni(text)
+  } catch (e) {
+    result.error = 'cannot parse file: ' + e.message
+    return result
+  }
+  result.groups = groups
+
+  const main = groups[MAIN_GROUP]
+  if (!main) {
+    result.error = 'invalid .vv file: missing [' + MAIN_GROUP + '] group'
+    return result
+  }
+
+  const type = (main.type || '').trim().toLowerCase()
+  if (!type) {
+    result.error = 'invalid .vv file: missing "type" key in [' + MAIN_GROUP + ']'
+    return result
+  }
+  result.type = type
+  if (type !== 'spice') {
+    result.error = 'unsupported session type "' + type + '": spice only'
+    return result
+  }
+
+  Object.keys(FIELD_MAP).forEach(key => {
+    if (!(key in main)) {
+      return
+    }
+    const raw = main[key]
+    const field = FIELD_MAP[key]
+
+    if (key === 'port') {
+      const port = parseInt(raw.trim(), 10)
+      if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        result.warnings.push('ignoring invalid port "' + raw.trim() + '"')
+        return
+      }
+      result.fields.port = port
+    } else if (key === 'password') {
+      result.fields.password = raw
+    } else {
+      const value = raw.trim()
+      if (!value) {
+        result.warnings.push('ignoring empty "' + key + '"')
+        return
+      }
+      result.fields[field] = value
+    }
+    result.applied.push({ key, value: raw, field })
+  })
+
+  if (!result.fields.host) {
+    result.error = 'no usable host: [virt-viewer] has no "host" key'
+    return result
+  }
+
+  // A file that only offers a TLS port has nothing we can dial, because the
+  // spice transport here is plain TCP (see src/app/server/spice-proxy.js).
+  if (main['tls-port'] && !('port' in main)) {
+    result.warnings.push(
+      'this file defines only tls-port, and TLS is not supported here, ' +
+        'so there is no plain port to connect to'
+    )
+  }
+
+  // delete-this-file=1 makes remote-viewer unlink the file after loading it
+  // (unless VIRT_VIEWER_KEEP_FILE is set). We never delete the user's file;
+  // surface it instead so the caller can decide.
+  if ('delete-this-file' in main) {
+    result.deleteThisFile = BOOL_TRUE.has(
+      main['delete-this-file'].trim().toLowerCase()
+    )
+    if (result.deleteThisFile) {
+      result.warnings.push(
+        'the file is marked delete-this-file=1; it was NOT deleted'
+      )
+    }
+  }
+
+  Object.keys(main).forEach(key => {
+    if (key === 'type' || key === 'delete-this-file' || key in FIELD_MAP) {
+      return
+    }
+    const value = main[key]
+    if (key in UNSUPPORTED) {
+      result.ignored.push({ key, value, reason: UNSUPPORTED[key] })
+    } else {
+      result.unknown.push({ key, value })
+    }
+  })
+
+  if (groups[OVIRT_GROUP]) {
+    result.ignored.push({
+      key: '[' + OVIRT_GROUP + ']',
+      value: Object.keys(groups[OVIRT_GROUP]).join(', '),
+      reason: 'oVirt REST integration is not supported'
+    })
+  }
+
+  if (result.ignored.length) {
+    result.warnings.push(
+      result.ignored.length +
+        ' option(s) in this file are not supported and were skipped'
+    )
+  }
+
+  result.ok = true
+  return result
+}
+
+/**
+ * Turn a parse result into a one-line summary for a UI hint.
+ *
+ * @param {Object} parsed - result of parseVv
+ * @returns {string}
+ */
+function describeVv (parsed) {
+  if (!parsed || !parsed.ok) {
+    return (parsed && parsed.error) || 'invalid .vv file'
+  }
+  const { host, port, title, proxy } = parsed.fields
+  const bits = ['spice://' + host + (port ? ':' + port : '')]
+  if (title) {
+    bits.push('"' + title + '"')
+  }
+  if (proxy) {
+    bits.push('via ' + proxy)
+  }
+  if (parsed.ignored.length) {
+    bits.push(parsed.ignored.length + ' option(s) skipped')
+  }
+  return bits.join(' ')
+}
+
+export {
+  parseVv,
+  parseIni,
+  describeVv,
+  MAIN_GROUP,
+  OVIRT_GROUP,
+  FIELD_MAP,
+  UNSUPPORTED
+}

package/client/common/resolve.js

@@ -13,24 +13,30 @@ export const isWslDistroRoot = (path) => {
 }
 
 export default function resolve (basePath, nameOrDot) {
+  // Callers can hand this a value that is not a path yet (a session path that
+  // is still loading, a missing tab option, ...). Reading `.includes` off it
+  // used to throw and take the whole renderer down with a white screen, so
+  // anything that is not a string is treated as an empty path here.
+  const base = typeof basePath === 'string' ? basePath : ''
+  const name = typeof nameOrDot === 'string' ? nameOrDot : ''
   const hasWinDrive = (path) => /^[a-zA-Z]:/.test(path)
-  const isWin = basePath.includes('\\') || nameOrDot.includes('\\') || hasWinDrive(basePath) || hasWinDrive(nameOrDot)
+  const isWin = base.includes('\\') || name.includes('\\') || hasWinDrive(base) || hasWinDrive(name)
   const sep = isWin ? '\\' : '/'
-  if (/^[a-zA-Z]:/.test(nameOrDot)) {
-    return nameOrDot.replace(/^\//, '').replace(/\//g, sep)
+  if (/^[a-zA-Z]:/.test(name)) {
+    return name.replace(/^\//, '').replace(/\//g, sep)
   }
-  if (nameOrDot.startsWith('/')) {
-    return nameOrDot.replace(/\\/g, sep)
+  if (name.startsWith('/')) {
+    return name.replace(/\\/g, sep)
   }
-  if (nameOrDot.startsWith('\\\\')) {
-    return nameOrDot
+  if (name.startsWith('\\\\')) {
+    return name
   }
-  if (nameOrDot === '..') {
-    if (isWslDistroRoot(basePath)) {
+  if (name === '..') {
+    if (isWslDistroRoot(base)) {
       return '/'
     }
-    const baseEndsWithSep = basePath.endsWith(sep)
-    const parts = basePath.split(sep)
+    const baseEndsWithSep = base.endsWith(sep)
+    const parts = base.split(sep)
     if (parts.length > 1) {
       parts.pop()
       if (isWin && parts.length === 1) {
@@ -40,10 +46,10 @@ export default function resolve (basePath, nameOrDot) {
     }
     return '/'
   }
-  if (isWslDistroRoot(basePath) && !basePath.endsWith(sep)) {
-    return basePath + sep + nameOrDot
+  if (isWslDistroRoot(base) && !base.endsWith(sep)) {
+    return base + sep + name
   }
-  const result = basePath.endsWith(sep) ? basePath + nameOrDot : basePath + sep + nameOrDot
+  const result = base.endsWith(sep) ? base + name : base + sep + name
   return isWin && result.length === 3 && result.endsWith(':\\') ? '/' : result
 }
 

package/client/common/theme-defaults.js

@@ -101,9 +101,12 @@ const defaultThemeDarkTerminal = () => {
   }
 }
 
+export const defaultThemeId = 'default'
+export const defaultThemeLightId = 'defaultLight'
+
 export function defaultTheme () {
   return {
-    id: 'default',
+    id: defaultThemeId,
     name: 'default',
     themeConfig: defaultThemeDarkTerminal(),
     uiThemeConfig: defaultThemeDark()
@@ -112,7 +115,7 @@ export function defaultTheme () {
 
 export function defaultThemeLight () {
   return {
-    id: 'defaultLight',
+    id: defaultThemeLightId,
     name: 'default light',
     themeConfig: defaultThemeLightTerminal(),
     uiThemeConfig: defaultThemeLightFunc()

package/client/common/update-check.js

@@ -23,7 +23,7 @@ async function fetchData (url, options) {
 
 function getInfo (url) {
   const n = Date.now()
-  const tail = url.includes('?') ? '' : '?_=' + n
+  const tail = url.includes('?') ? '&_=' + n : '?_=' + n
   return fetchData(url + tail, {
     action: 'get-update-info',
     headers: {
@@ -87,16 +87,17 @@ export function getDownloadUrl (browserDownloadUrl, mirror) {
 }
 
 export async function getLatestReleaseInfo () {
-  let url = `${baseUpdateCheckUrls[0]}/data/electerm-github-release.json`
+  const { installSrc } = window.store
+  const src = installSrc ? '?src=' + encodeURIComponent(installSrc) : ''
+  let url = `${baseUpdateCheckUrls[0]}/data/electerm-github-release.json${src}`
   let res = await getInfo(url)
   if (!res?.release?.body) {
-    url = `${baseUpdateCheckUrls[1]}/data/electerm-github-release.json`
+    url = `${baseUpdateCheckUrls[1]}/data/electerm-github-release.json${src}`
     res = await getInfo(url)
   }
   if (!res || !res.release) {
     return undefined
   }
-  const { installSrc } = window.store
   const asset = (res.release.assets || []).find(r => r.name.includes(installSrc))
   return {
     body: res.release.body,

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

@@ -30,7 +30,7 @@ export default function AiHistoryItem (props) {
       onClick={() => onSelect(item)}
       className='pointer'
     >
-      {displayItem}
+      <span className='ai-history-label'>{displayItem}</span>
     </Tag>
   )
 

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

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import { Space } from 'antd'
 import { safeGetItemJSON, safeSetItemJSON } from '../../common/safe-local-storage'
 import AiHistoryItem from './ai-history-item'
+import './ai-history.styl'
 
 const MAX_HISTORY = 20
 

package/client/components/ai/ai-history.styl

@@ -0,0 +1,23 @@
+// AI history items (ai-history.jsx / ai-history-item.jsx)
+//
+// Each entry is an antd Tag: nowrap, no max-width, and the text is a user
+// written description up to 50 chars long. Space renders an inline-flex box,
+// which shrink-to-fits its widest *unwrappable* child — so one long entry
+// pushes the whole panel into horizontal scrolling instead of using the width
+// it already has. The label gets its own ellipsis box so the tag can shrink to
+// the available width while the close icon stays reachable.
+.ai-bookmark-history
+  .ant-space
+    display flex
+  .ant-space-item
+    min-width 0
+  .ant-tag
+    max-width 100%
+
+.ai-history-label
+  display inline-block
+  // leave room for the tag close icon
+  max-width calc(100% - 16px)
+  overflow hidden
+  text-overflow ellipsis
+  vertical-align middle

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?aff=7H7DERHU3GFF&utm_source=github&utm_medium=link&utm_campaign=electerm'
+  },
   {
     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/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/color-picker.styl

@@ -10,6 +10,9 @@
   width 92px
 .color-picker-box
   width 420px
+  // the popover is portaled to the body, a 420px box simply falls off a phone
+  // screen (measured: the swatch list and the antd picker still fit at 280px)
+  max-width calc(100vw - 40px)
 
 .color-picker-defaults
   width 200px

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':