@electerm/electerm-react 5.1.25 → 5.3.0

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -22,6 +22,18 @@
  *     visualViewport.height against a baseline captured at the moment the
  *     terminal input is focused (i.e. before the keyboard opens), which holds
  *     the full pre-keyboard height on both platforms.
+ *
+ * Telling a keyboard from a desktop window resize (pure size heuristics
+ * fail — dragging a window's top/bottom edge is also a height-only shrink)
+ * needs one of two extra signals, checked in onResize:
+ *   - an overlay-style keyboard (iOS / HarmonyOS) shrinks the visual
+ *     viewport but keeps the layout viewport (window.innerHeight) full —
+ *     a window resize shrinks both.
+ *   - an Android-style keyboard resizes both viewports, but a soft keyboard
+ *     only ever opens in response to a *touch* into the terminal — a window
+ *     resized with a mouse never shows one.
+ * Tablets running the desktop program still get the bar; mouse-driven
+ * desktops never do.
  */
 
 import { lazy, Suspense, useEffect, useState } from 'react'
@@ -35,6 +47,11 @@ const ShortcutBar = lazy(() => import('./shortcut-bar'))
 // bar above a keyboard that overlays the page (iOS / HarmonyOS).
 export const KEYBOARD_MIN = 120
 
+// how long (ms) after an in-page touch an Android-style (layout-resizing)
+// keyboard is expected to be up. Bounds the touch signal used to tell that
+// keyboard from a mouse-driven window resize on touch-capable desktops.
+const TOUCH_GRACE_MS = 3000
+
 // kept as a coarse capability fallback for engines without visualViewport.
 // Modern Chromium (Electron) always exposes window.visualViewport, so this is
 // effectively only reached on very old runtimes — where remote-control
@@ -77,6 +94,12 @@ export default function ShortcutBarEntry (props) {
     // the pre-keyboard (full) size, and the subsequent resize lets us measure
     // exactly how much the keyboard took — on both iOS and Android.
     let baseline = { height: vv.height, width: vv.width }
+    // when the last in-page touch happened (0 = never). An Android-style
+    // keyboard resizes the layout viewport exactly like a window resize does,
+    // so size alone can't separate them there — but a keyboard only ever
+    // opens right after a *touch*, while a window drag doesn't fire in-page
+    // pointer events at all, so an old touch must not count forever.
+    let lastTouchAt = 0
 
     function onFocusIn (ev) {
       const el = ev.target
@@ -85,11 +108,25 @@ export default function ShortcutBarEntry (props) {
       }
     }
 
+    function onPointerDown (ev) {
+      // touch or stylus — both tap like a finger and can raise the keyboard
+      if (ev.pointerType === 'touch' || ev.pointerType === 'pen') {
+        lastTouchAt = Date.now()
+      }
+    }
+
     function onResize () {
       // ignore viewport changes that also changed width (rotation / split) —
       // a keyboard changes height only.
       const sameWidth = Math.abs(vv.width - baseline.width) < 20
-      if (sameWidth && baseline.height - vv.height > KEYBOARD_MIN) {
+      if (!sameWidth || baseline.height - vv.height <= KEYBOARD_MIN) {
+        return
+      }
+      // overlay keyboard (iOS / HarmonyOS): the layout viewport stays full
+      // while the visual one shrinks. A window resize shrinks both — this is
+      // what rules out mouse window-dragging on those platforms.
+      const layoutShrunk = window.innerHeight < baseline.height - KEYBOARD_MIN
+      if (!layoutShrunk) {
         setKeyboardSeen(true)
         // The user is focused in a terminal with the keyboard up — they need
         // the bar right now. Set visibility here rather than waiting for the
@@ -100,13 +137,27 @@ export default function ShortcutBarEntry (props) {
         if (store && store.inActiveTerminal) {
           store.shortcutBarVisible = true
         }
+        return
+      }
+      // Android-style resize keyboard: both viewports shrink, so require a
+      // recent touch — a keyboard opens within moments of the tap, while a
+      // window drag fires no in-page pointerdown at all, so any touch old
+      // enough to have expired can't have been the cause.
+      if (Date.now() - lastTouchAt < TOUCH_GRACE_MS) {
+        setKeyboardSeen(true)
+        const { store } = window
+        if (store && store.inActiveTerminal) {
+          store.shortcutBarVisible = true
+        }
       }
     }
 
     document.addEventListener('focusin', onFocusIn)
+    document.addEventListener('pointerdown', onPointerDown)
     vv.addEventListener('resize', onResize)
     return () => {
       document.removeEventListener('focusin', onFocusIn)
+      document.removeEventListener('pointerdown', onPointerDown)
       vv.removeEventListener('resize', onResize)
     }
   }, [])

package/client/components/terminal/terminal-color-query.mjs

@@ -57,7 +57,8 @@ function parseHexColor (color) {
   return [
     parseInt(expanded.slice(0, 2), 16),
     parseInt(expanded.slice(2, 4), 16),
-    parseInt(expanded.slice(4, 6), 16)
+    parseInt(expanded.slice(4, 6), 16),
+    alpha
   ]
 }
 
@@ -82,10 +83,15 @@ function parseRgbColor (color) {
   if (alpha === null || alpha <= 0) {
     return null
   }
-  return channels
+  return [...channels, alpha]
 }
 
 export function parseColorToRgb (color) {
+  const rgba = parseColorToRgba(color)
+  return rgba ? rgba.slice(0, 3) : null
+}
+
+export function parseColorToRgba (color) {
   if (typeof color !== 'string') {
     return null
   }
@@ -105,46 +111,45 @@ export function colorToOscRgb (color) {
 }
 
 /**
- * Blend a (possibly translucent) selection color over an opaque background,
+ * Blend a (possibly translucent) selection colour over an opaque background,
  * producing the colour in xterm's internal format ({ css, rgba } where
  * rgba = r<<24 | g<<16 | b<<8 | a).
  *
  * xterm derives its DOM selection colour as blend(theme.background,
- * selectionBackground). When the terminal background is forced transparent
- * (DOM renderer keeps the real background behind via CSS), that blend runs
- * over transparent-black and a light selection turns into dark gray. This
- * helper recomputes it over the real visible background instead.
+ * selectionBackground) into `selectionBackgroundOpaque`, and separately forces
+ * any opaque selectionBackground down to 0.3 alpha in
+ * `selectionBackgroundTransparent` (xterm#2737). electerm renders the terminal
+ * background via CSS and hands xterm a transparent background, so the blend
+ * must be redone over the real visible background — starting from the
+ * *configured* colour so an opaque selection stays opaque (xterm's forced
+ * 0.3-alpha variant would make every selection translucent).
  *
- * `selectionColor` is an xterm color object ({ css, rgba }) e.g.
- * colors.selectionBackgroundTransparent; `visibleBackground` is an opaque
- * colour string.
+ * `selectionColor` is a CSS colour string from the terminal theme, e.g.
+ * themeConfig.selectionBackground; `visibleBackground` is an opaque colour
+ * string.
  */
 export function blendSelectionOverBackground (visibleBackground, selectionColor) {
-  const bgRgb = parseColorToRgb(visibleBackground)
-  const sel = selectionColor?.rgba
-  if (!bgRgb || typeof sel !== 'number') {
-    return null
-  }
-  const [br, bg, bb] = bgRgb
-  const a = (sel & 255) / 255
-  if (a <= 0) {
+  const bg = parseColorToRgb(visibleBackground)
+  const sel = parseColorToRgba(selectionColor)
+  if (!bg || !sel) {
     return null
   }
+  const [br, bgg, bb] = bg
+  const [sr, sg, sb, sa] = sel
   const toCss = (r, g, b, alpha) =>
     `#${[r, g, b, alpha].map(toHexByte).join('')}`
-  const sr = sel >> 24 & 255
-  const sg = sel >> 16 & 255
-  const sb = sel >> 8 & 255
-  if (a >= 1) {
+  if (sa >= 1) {
+    // Fully opaque: use the configured colour as-is, just normalised to
+    // 8-digit hex so both the overlay and per-cell inline styles agree.
     return {
       css: toCss(sr, sg, sb, 255),
-      rgba: ((sel & 0xffffff) | 0xff000000) >>> 0
+      rgba: (sr << 24 | sg << 16 | sb << 8 | 255) >>> 0
     }
   }
-  const r = br + Math.round((sr - br) * a)
-  const g = bg + Math.round((sg - bg) * a)
-  const b = bb + Math.round((sb - bb) * a)
-  const alpha = Math.round(a * 255)
+  const r = br + Math.round((sr - br) * sa)
+  const g = bgg + Math.round((sg - bgg) * sa)
+  const b = bb + Math.round((sb - bb) * sa)
+  const alpha = Math.round(sa * 255)
   return {
     css: toCss(r, g, b, alpha),
     rgba: (r << 24 | g << 16 | b << 8 | alpha) >>> 0

package/client/components/terminal/terminal-interactive.jsx

@@ -5,6 +5,8 @@
 import { useEffect, useState, useRef, useCallback } from 'react'
 import wait from '../../common/wait'
 import TermInteractiveUI from './terminal-interactive-ui'
+import ExternalLink from '../common/external-link.jsx'
+import { notification } from '../common/notification'
 
 export default function TermInteractive () {
   const [current, setCurrent] = useState(null)
@@ -15,6 +17,32 @@ export default function TermInteractive () {
     window.store.updateTab(data.tabId, data.update)
   }
 
+  function notifyProxyCommandMessage (data) {
+    const lines = (data.message || '').split('\n')
+    const title = lines[0] || 'ssh proxy command'
+    const body = lines.slice(1).join('\n').trim()
+    // make any http(s) link in the message clickable (SSO login url)
+    const renderBody = (text) => {
+      const parts = text.split(/(https?:\/\/\S+)/)
+      return (
+        <pre className='pd0 mg0 overflow-auto'>
+          {
+            parts.map((part, i) => /^https?:\/\//.test(part)
+              ? <ExternalLink key={i} to={part}>{part}</ExternalLink>
+              : part)
+          }
+        </pre>
+      )
+    }
+    notification.info({
+      message: title,
+      description: body
+        ? renderBody(body)
+        : undefined,
+      duration: 30
+    })
+  }
+
   function processNext () {
     const next = queueRef.current.shift()
     if (next) {
@@ -47,6 +75,13 @@ export default function TermInteractive () {
       e.data.includes('ssh-tunnel-result')
     ) {
       updateTab(JSON.parse(e.data))
+    } else if (
+      e &&
+      e.data &&
+      typeof e.data === 'string' &&
+      e.data.includes('ssh-proxy-command-message')
+    ) {
+      notifyProxyCommandMessage(JSON.parse(e.data))
     }
   }
 

package/client/components/terminal/terminal.jsx

@@ -1474,31 +1474,35 @@ class Term extends Component {
 
   /**
    * xterm computes its DOM selection colour as blend(theme.background,
-   * selectionBackground). The DOM renderer keeps the terminal background
-   * transparent (rgba(0,0,0,0)) so electerm's own CSS background / image
-   * shows through, which makes a light selection blend over transparent-black
-   * and render as dark gray. Recompute the selection over the real visible
-   * background so terminal:selectionBackground=rgba(...) is applied as the
-   * configured semi-transparent colour.
+   * selectionBackground). The terminal background is forced transparent
+   * (rgba(0,0,0,0)) so electerm's own CSS background / image shows through,
+   * which makes the blend run over transparent-black. Recompute the selection
+   * colours over the real visible background, from the *configured* theme
+   * colours — xterm's internal selectionBackgroundTransparent forces opaque
+   * colours down to 0.3 alpha (xterm#2737), which would make every selection
+   * translucent even when the user configured an opaque one.
    */
   fixSelectionColors = (term) => {
+    const themeConfig = this.props.themeConfig || {}
     const themeService = term?._core?._themeService
     if (!themeService?.modifyColors) {
       return
     }
     const visibleBackground = this.getVisibleTerminalBackground()
-    const colors = themeService.colors
+    // xterm's DEFAULT_SELECTION, used when the theme omits a selection color
+    const selectionFallback = 'rgba(255, 255, 255, 0.3)'
+    const inactiveFallback = themeConfig.selectionBackground || selectionFallback
     themeService.modifyColors((c) => {
       const active = blendSelectionOverBackground(
         visibleBackground,
-        colors.selectionBackgroundTransparent
+        themeConfig.selectionBackground || selectionFallback
       )
       if (active) {
         c.selectionBackgroundOpaque = active
       }
       const inactive = blendSelectionOverBackground(
         visibleBackground,
-        colors.selectionInactiveBackgroundTransparent
+        themeConfig.selectionInactiveBackground || inactiveFallback
       )
       if (inactive) {
         c.selectionInactiveBackgroundOpaque = inactive
@@ -1719,12 +1723,6 @@ class Term extends Component {
     }
 
     this.shellType = shellType
-    if (shellType === 'fish') {
-      if (this.props.sftpPathFollowSsh) {
-        this.warnSftpFollowUnsupported()
-      }
-      return Promise.resolve()
-    }
 
     // Don't inject for sh type shells unless sftpPathFollowSsh is true
     if (shellType === 'sh' && !this.props.sftpPathFollowSsh) {
@@ -1942,6 +1940,17 @@ class Term extends Component {
     if (this.isElementVisible()) {
       this.fitAddon.fit()
     }
+    // Force-send the current size now that `this.pid` is finally valid.
+    // A resize may already have fired earlier (e.g. from the tab-becomes-
+    // visible fit in componentDidUpdate, which can run before createTerm()
+    // resolves) while this.pid was still undefined - the backend silently
+    // drops resize calls for an unknown pid. If that earlier call already
+    // updated term.cols/rows locally, xterm's resize() no-ops on the next
+    // fit() (dims unchanged) and never fires onResize again, so the
+    // backend pty would otherwise be stuck at its initial (possibly wrong)
+    // size forever. Sending explicitly here, keyed off the real pid,
+    // guarantees the remote pty/ssh channel is told the true current size.
+    resizeTerm(this.pid, term.cols, term.rows)
     term.displayRaw = displayRaw
     term.loadAddon(
       new KeywordHighlighterAddon(keywords)

package/client/components/terminal-info/activity.jsx

@@ -42,7 +42,11 @@ export default function TerminalInfoActivities (props) {
     bordered: true,
     columns: col,
     size: 'small',
-    pagination: false
+    pagination: false,
+    scroll: {
+      y: 180,
+      x: 'max-content'
+    }
   }
   return (
     <div className='terminal-info-section terminal-info-act'>

package/client/components/terminal-info/base.jsx

@@ -3,8 +3,8 @@
  */
 import { Component } from 'react'
 import {
-  Space,
-  Button
+  Button,
+  Dropdown
 } from 'antd'
 import SwitchLabel from '../common/switch'
 import defaults from '../../common/default-setting'
@@ -15,7 +15,9 @@ import {
   DatabaseOutlined,
   BarsOutlined,
   ApiOutlined,
-  PartitionOutlined
+  PartitionOutlined,
+  FilterOutlined,
+  CheckOutlined
 } from '@ant-design/icons'
 import { refs } from '../common/ref'
 import ShowItem from '../common/show-item'
@@ -136,26 +138,39 @@ export default class TerminalInfoBase extends Component {
     const {
       terminalInfos
     } = this.props
+    const items = defaults.terminalInfos.map(f => {
+      const checked = terminalInfos.includes(f)
+      return {
+        key: f,
+        label: (
+          <span
+            className='term-info-filter-label'
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px'
+            }}
+          >
+            <span style={{ width: '14px' }}>{checked ? <CheckOutlined /> : null}</span>
+            {mapper[f]} {f}
+          </span>
+        ),
+        onClick: () => this.toggleTerminalLogInfo(f)
+      }
+    })
     return (
-      <Space.Compact className='width-100'>
-        {
-          defaults.terminalInfos.map(f => {
-            const type = terminalInfos.includes(f) ? 'primary' : 'default'
-            return (
-              <Button
-                key={f + 'term-info-sel'}
-                type={type}
-                size='small'
-                onClick={() => this.toggleTerminalLogInfo(f)}
-                className='cap'
-                icon={mapper[f]}
-              >
-                {f}
-              </Button>
-            )
-          })
-        }
-      </Space.Compact>
+      <Dropdown
+        menu={{ items }}
+        trigger={['click']}
+        placement='bottomRight'
+      >
+        <Button
+          size='small'
+          icon={<FilterOutlined />}
+        >
+          {e('filter')}({terminalInfos.length}/{defaults.terminalInfos.length})
+        </Button>
+      </Dropdown>
     )
   }
 

package/client/components/terminal-info/disk.jsx

@@ -30,7 +30,11 @@ export default function TerminalInfoDisk (props) {
     bordered: true,
     columns: col,
     size: 'small',
-    pagination: false
+    pagination: false,
+    scroll: {
+      y: 180,
+      x: 'max-content'
+    }
   }
   return (
     <div className='terminal-info-section terminal-info-disk'>

package/client/components/terminal-info/local-info-resolver.js

@@ -0,0 +1,89 @@
+/**
+ * resolve local terminal info: os / hostname / kernel / arch / shell + version
+ * uses the electron os module via window.pre.osInfo() (sync) and probes the
+ * configured shell binary for its version through the local fs run bridge
+ */
+
+import { isMac, isWin } from '../../common/constants'
+import fs from '../../common/fs'
+
+function parseOsInfo (list) {
+  const map = {}
+  for (const { k, v } of list || []) {
+    let val
+    try {
+      val = JSON.parse(v)
+    } catch (e) {
+      val = v
+    }
+    map[k] = Array.isArray(val) ? val.join(' ') : String(val)
+  }
+  return map
+}
+
+const shellNameReg = /(\w+)$/
+
+function formatOsName (map) {
+  const ver = map.release || ''
+  if (isWin) {
+    const main = parseInt(ver.split('.')[0], 10)
+    if (main >= 10) {
+      const build = parseInt(ver.split('.')[2], 10)
+      return build >= 22000 ? `Windows 11 (${ver})` : `Windows 10 (${ver})`
+    }
+    return `Windows (${ver})`
+  }
+  if (isMac) {
+    return `macOS ${map.version || ''}`.trim()
+  }
+  return `Linux ${ver}`.trim()
+}
+
+async function probeShellVersion (shellPath) {
+  if (!shellPath) {
+    return ''
+  }
+  try {
+    let out = ''
+    if (isWin) {
+      // runWinCmd wraps the given script with powershell.exe -Command
+      const res = await fs.runWinCmd(
+        '$PSVersionTable.PSVersion.ToString()'
+      ).catch(() => null)
+      out = res?.stdout || ''
+    } else {
+      out = await fs.run(`'${shellPath.replace(/'/g, "'\\''")}' --version`).catch(() => '')
+    }
+    return (out || '').split('\n')[0].trim()
+  } catch (e) {
+    return ''
+  }
+}
+
+export default async function resolveLocalInfo (pid) {
+  const store = window.store
+  if (!window.pre?.osInfo) {
+    // web app build: no local os bridge available
+    return null
+  }
+  const tab = store?.getTabs?.().find(t => t.id === pid)
+  const config = store?.config || {}
+  const execProp = isWin ? 'execWindows' : isMac ? 'execMac' : 'execLinux'
+  // tab settings (bookmark) win over global config, same as terminal spawn logic
+  const shellPath = tab?.[execProp] || config[execProp] || ''
+  const shellBase = isWin
+    ? (shellPath.split(/[\\/]/).pop() || '')
+    : shellPath.split('/').pop() || ''
+  const nameMatch = shellBase.match(shellNameReg)
+  const shellName = nameMatch ? nameMatch[1] : shellBase
+  const map = parseOsInfo(window.pre.osInfo())
+  const shellVersion = await probeShellVersion(shellPath)
+  return {
+    os: formatOsName(map),
+    hostname: map.hostname || '',
+    kernel: isWin ? `Windows NT ${map.release || ''}`.trim() : (map.release || ''),
+    arch: map.arch || '',
+    shell: shellName,
+    shellVersion
+  }
+}

package/client/components/terminal-info/network.jsx

@@ -106,7 +106,11 @@ export default function TerminalInfoDisk (props) {
     bordered: true,
     size: 'small',
     columns: col,
-    pagination: false
+    pagination: false,
+    scroll: {
+      y: 180,
+      x: 'max-content'
+    }
   }
   return (
     <div className='terminal-info-section terminal-info-network'>

package/client/components/terminal-info/run-cmd.jsx

@@ -32,6 +32,33 @@ function formatActivities (str) {
   }
 }
 
+function formatSysInfo (unameStr, prettyName) {
+  if (!unameStr) {
+    return {}
+  }
+  const parts = unameStr.trim().split(/\s+/)
+  if (parts.length < 4) {
+    return {}
+  }
+  const [sysname, hostname, kernel, arch] = parts
+  let os = sysname
+  const m = (prettyName || '').match(/PRETTY_NAME="?([^"\r\n]+)"?/)
+  if (m) {
+    os = m[1].trim()
+  } else if (sysname === 'Darwin') {
+    os = 'macOS'
+  }
+  return {
+    sysInfo: {
+      os,
+      sysname,
+      hostname,
+      kernel,
+      arch
+    }
+  }
+}
+
 function formatCpu (str) {
   if (!str) {
     return {
@@ -153,9 +180,11 @@ function InfoGetter (props) {
       props.setState(update)
     }
     run()
-    const ref = setInterval(run, interval)
-    return () => {
-      clearInterval(ref)
+    if (interval > 0) {
+      const ref = setInterval(run, interval)
+      return () => {
+        clearInterval(ref)
+      }
     }
   }, [pid])
   return null
@@ -166,6 +195,16 @@ export default (props) => {
     return null
   }
   const cmds = [
+    {
+      name: 'sysinfo',
+      cmds: [
+        'uname -s -n -r -m',
+        'grep PRETTY_NAME= /etc/os-release 2>/dev/null || echo'
+      ],
+      interval: 0,
+      delay: 0,
+      formatter: formatSysInfo
+    },
     {
       name: 'uptime',
       cmd: 'uptime -p',

package/client/components/terminal-info/sys-info.jsx

@@ -0,0 +1,56 @@
+/**
+ * system info: os / hostname / kernel / arch (+ shell for local terminals)
+ * remote info comes from uname via the session runCmd bridge,
+ * local info from the os module + a shell version probe
+ */
+
+import { useEffect, useState } from 'react'
+import { DesktopOutlined } from '@ant-design/icons'
+import resolveLocalInfo from './local-info-resolver'
+
+export default function TerminalInfoSys (props) {
+  const { sysInfo, isRemote, pid } = props
+  const [localInfo, setLocalInfo] = useState(null)
+
+  useEffect(() => {
+    if (isRemote) {
+      return
+    }
+    resolveLocalInfo(pid).then(setLocalInfo)
+  }, [isRemote, pid])
+
+  const info = isRemote ? sysInfo : localInfo
+  if (!info || !info.os) {
+    return null
+  }
+  const rows = [
+    ['os', info.os],
+    ['hostname', info.hostname],
+    ['kernel', info.kernel],
+    ['arch', info.arch]
+  ]
+  if (info.shell) {
+    rows.push(['shell', info.shellVersion ? `${info.shell} ${info.shellVersion}` : info.shell])
+  }
+  const final = rows.filter(d => d[1])
+  if (!final.length) {
+    return null
+  }
+  return (
+    <div className='terminal-info-section terminal-info-sys'>
+      <div className='pd1y bold'><DesktopOutlined /> System</div>
+      <div className='terminal-info-sys-rows'>
+        {
+          final.map(([k, v]) => {
+            return (
+              <div className='terminal-info-sys-row' key={k}>
+                <span className='terminal-info-sys-key'>{k}</span>
+                <span className='terminal-info-sys-val' title={v}>{v}</span>
+              </div>
+            )
+          })
+        }
+      </div>
+    </div>
+  )
+}