@electerm/electerm-react 2.3.191 → 2.4.16

package/client/components/terminal/command-tracker-addon.js

@@ -1,83 +1,194 @@
+/**
+ * CommandTrackerAddon - Tracks the current command in the terminal
+ *
+ * This addon uses Shell Integration via OSC 633 escape sequences for reliable
+ * command tracking. The shell emits special sequences that tell us:
+ * - OSC 633 ; A - Prompt started
+ * - OSC 633 ; B - Command input started (ready for typing)
+ * - OSC 633 ; C - Command execution started (output begins)
+ * - OSC 633 ; D ; <exitCode> - Command finished
+ * - OSC 633 ; E ; <command> - The command line being executed
+ * - OSC 633 ; P ; Cwd=<path> - Current working directory
+ *
+ * This properly handles:
+ * - Command history (arrow up/down)
+ * - Tab completion
+ * - Paste operations
+ * - Shell-side editing (readline, vi-mode)
+ * - Multi-line commands
+ * - Any custom prompt
+ */
+
 export class CommandTrackerAddon {
   constructor () {
     this.terminal = undefined
-    this.activeCommand = ''
-    this.currentCommand = ''
-    this.cursorPosition = 0
-    this.timeout = null
-    this.handleKey = this.debounce(this._handleKey, 200) // 10ms debounce
+    this._disposables = []
+
+    // Shell integration state
+    this.currentCommand = '' // Command being typed
+    this.executedCommand = '' // Last executed command
+    this.lastExitCode = null
+    this.cwd = ''
+    this.shellIntegrationActive = false
+
+    // Event callbacks for shell integration events
+    this._onCommandExecuted = null // Called when OSC 633;E is received
+    this._onCwdChanged = null // Called when OSC 633;P;Cwd= is received
   }
 
-  debounce = (func, wait) => {
-    return (...args) => {
-      const later = () => {
-        clearTimeout(this.timeout)
-        func.apply(this, args)
-      }
+  /**
+   * Register callback for when a command is executed (received via OSC 633;E)
+   * @param {function} callback - Called with (command: string)
+   */
+  onCommandExecuted (callback) {
+    this._onCommandExecuted = callback
+  }
 
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(later, wait)
-    }
+  /**
+   * Register callback for when CWD changes (received via OSC 633;P;Cwd=)
+   * @param {function} callback - Called with (cwd: string)
+   */
+  onCwdChanged (callback) {
+    this._onCwdChanged = callback
   }
 
   activate (terminal) {
     this.terminal = terminal
+
+    // Register OSC 633 handler for shell integration
+    // OSC 633 is the VS Code / modern terminal shell integration protocol
+    if (terminal.parser && terminal.parser.registerOscHandler) {
+      const oscHandler = terminal.parser.registerOscHandler(633, (data) => {
+        return this._handleOsc633(data)
+      })
+      this._disposables.push(oscHandler)
+    }
   }
 
   dispose () {
-    this.term = null
+    this.terminal = null
     if (this._disposables) {
       this._disposables.forEach(d => d.dispose())
       this._disposables.length = 0
     }
-    if (this.timeout) {
-      clearTimeout(this.timeout)
-      this.timeout = null
-    }
   }
 
-  handleData = (data) => {
-    // Handle regular input
-    this.activeCommand = this.activeCommand.slice(0, this.cursorPosition) + data + this.activeCommand.slice(this.cursorPosition)
-    this.cursorPosition += data.length
+  /**
+   * Handle OSC 633 shell integration sequences
+   * @param {string} data - The OSC data after "633;"
+   * @returns {boolean} Whether the sequence was handled
+   */
+  _handleOsc633 (data) {
+    if (!data) return false
+
+    // Parse the sequence: first char is the command type
+    const command = data.charAt(0)
+    const args = data.length > 1 ? data.substring(2) : '' // Skip "X;" part
+
+    switch (command) {
+      case 'A': // Prompt started
+        this.shellIntegrationActive = true
+        // Reset current command when new prompt appears
+        this.currentCommand = ''
+        return true
+
+      case 'B': // Command input started (after prompt)
+        return true
+
+      case 'C': // Command execution started
+        return true
+
+      case 'D': // Command finished
+        // Parse exit code if provided
+        if (args) {
+          this.lastExitCode = parseInt(args, 10)
+        } else {
+          this.lastExitCode = null
+        }
+        return true
+
+      case 'E': // Command line
+        // The actual command being executed
+        this.executedCommand = this._deserializeOscValue(args)
+        this.currentCommand = this.executedCommand
+        // Call the callback if registered
+        if (this._onCommandExecuted && this.executedCommand) {
+          this._onCommandExecuted(this.executedCommand)
+        }
+        return true
+
+      case 'P': // Property (e.g., Cwd=<path>)
+        this._handleProperty(args)
+        return true
+
+      default:
+        return false
+    }
   }
 
-  // This is now our internal handler
-  _handleKey = (e) => {
-    const { key } = e
-    if (e.ctrlKey && key.toLowerCase() === 'c') {
-      this.clearCommand()
-    } else if (key === 'Enter') {
-      // Command executed, reset
-      this.currentCommand = this.activeCommand
-      this.activeCommand = ''
-      this.cursorPosition = 0
-    } else if (key === 'Backspace') {
-      // Handle backspace
-      if (this.cursorPosition > 0) {
-        this.activeCommand = this.activeCommand.slice(0, this.cursorPosition - 1) + this.activeCommand.slice(this.cursorPosition)
-        this.cursorPosition--
-      }
-    } else if (key === 'ArrowLeft') {
-      // Move cursor left
-      if (this.cursorPosition > 0) {
-        this.cursorPosition--
-      }
-    } else if (key === 'ArrowRight') {
-      // Move cursor right
-      if (this.cursorPosition < this.activeCommand.length) {
-        this.cursorPosition++
+  /**
+   * Handle OSC 633 ; P property sequences
+   * @param {string} data - Property data like "Cwd=/path/to/dir"
+   */
+  _handleProperty (data) {
+    const eqIndex = data.indexOf('=')
+    if (eqIndex === -1) return
+
+    const key = data.substring(0, eqIndex)
+    const value = this._deserializeOscValue(data.substring(eqIndex + 1))
+
+    switch (key) {
+      case 'Cwd': {
+        const oldCwd = this.cwd
+        this.cwd = value
+        // Call the callback if registered and CWD actually changed
+        if (this._onCwdChanged && oldCwd !== value) {
+          this._onCwdChanged(value)
+        }
+        break
       }
+      // Add more properties as needed
     }
   }
 
-  clearCommand () {
-    this.activeCommand = ''
-    this.currentCommand = ''
-    this.cursorPosition = 0
+  /**
+   * Deserialize OSC 633 escaped values
+   * Handles: \\ -> \, \x3b -> ;
+   * @param {string} value - Escaped value
+   * @returns {string} Unescaped value
+   */
+  _deserializeOscValue (value) {
+    if (!value) return ''
+    return value
+      .replace(/\\x([0-9a-fA-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
+      .replace(/\\\\/g, '\\')
   }
 
+  /**
+   * Get the current command (from shell integration)
+   */
   getCurrentCommand () {
-    return this.activeCommand || this.currentCommand
+    return this.executedCommand || this.currentCommand || ''
+  }
+
+  /**
+   * Get the last exit code (if available via shell integration)
+   */
+  getLastExitCode () {
+    return this.lastExitCode
+  }
+
+  /**
+   * Get current working directory (if available via shell integration)
+   */
+  getCwd () {
+    return this.cwd
+  }
+
+  /**
+   * Check if shell integration is active
+   */
+  hasShellIntegration () {
+    return this.shellIntegrationActive
   }
 }

package/client/components/terminal/highlight-addon.js

@@ -1,6 +1,39 @@
 export class KeywordHighlighterAddon {
   constructor (keywords) {
-    this.keywords = keywords
+    this.keywords = keywords || []
+    this.compiledPatterns = this.compilePatterns()
+  }
+
+  // Pre-compile all regex patterns once for better performance
+  compilePatterns = () => {
+    const patterns = []
+    for (const obj of this.keywords) {
+      const { keyword, color = 'red' } = obj || {}
+      if (keyword) {
+        try {
+          patterns.push({
+            regex: new RegExp(keyword, 'gi'),
+            colorCode: this.getColorCode(color)
+          })
+        } catch (e) {
+          console.error('Invalid keyword regex:', keyword, e)
+        }
+      }
+    }
+    return patterns
+  }
+
+  getColorCode = (color) => {
+    const colorMap = {
+      green: '\u001b[32m',
+      yellow: '\u001b[33m',
+      blue: '\u001b[34m',
+      magenta: '\u001b[35m',
+      cyan: '\u001b[36m',
+      white: '\u001b[37m',
+      red: '\u001b[31m'
+    }
+    return colorMap[color] || colorMap.red
   }
 
   escape = str => {
@@ -8,63 +41,71 @@ export class KeywordHighlighterAddon {
       .replace(/\033/g, '\\033')
   }
 
-  colorize = (color) => {
-    // Use a switch statement to map color names to ANSI codes
-    switch (color) {
-      case 'green':
-        return '\u001b[32m$&\u001b[0m'
-      case 'yellow':
-        return '\u001b[33m$&\u001b[0m'
-      case 'blue':
-        return '\u001b[34m$&\u001b[0m'
-      case 'magenta':
-        return '\u001b[35m$&\u001b[0m'
-      case 'cyan':
-        return '\u001b[36m$&\u001b[0m'
-      case 'white':
-        return '\u001b[37m$&\u001b[0m'
-      default:
-        return '\u001b[31m$&\u001b[0m'
+  highlightKeywords = (text) => {
+    // Early exit if no patterns
+    if (this.compiledPatterns.length === 0) {
+      return text
     }
-  }
 
-  highlightKeywords = (text) => {
-    for (const obj of this.keywords) {
-      const {
-        keyword,
-        color = 'red'
-      } = obj || {}
-      if (keyword) {
-        try {
-          const regex = new RegExp(`(${keyword})`, 'gi')
-          if (regex.test(text)) {
-            return text.replace(regex, this.colorize(color))
-          }
-        } catch (e) {
-          window.store.onError(e)
-        }
+    // Split text into segments: ANSI/OSC sequences vs plain text
+    // Match OSC sequences (ESC ] ... BEL or ESC ] ... ESC \) and CSI sequences (ESC [ ... letter)
+    // Use String.fromCharCode to avoid lint warnings about control characters
+    const ESC = String.fromCharCode(27) // \x1b
+    const BEL = String.fromCharCode(7) // \x07
+    // eslint-disable-next-line no-control-regex
+    const ansiPattern = new RegExp('(' + ESC + '\\][^' + BEL + ESC + ']*(?:' + BEL + '|' + ESC + '\\\\)|' + ESC + '\\[[0-9;]*[A-Za-z])', 'g')
+
+    const segments = []
+    let lastIndex = 0
+    let match
+
+    while ((match = ansiPattern.exec(text)) !== null) {
+      // Add plain text before this sequence
+      if (match.index > lastIndex) {
+        segments.push({ type: 'text', content: text.slice(lastIndex, match.index) })
       }
+      // Add the ANSI sequence (don't highlight)
+      segments.push({ type: 'ansi', content: match[0] })
+      lastIndex = ansiPattern.lastIndex
+    }
+
+    // Add remaining plain text
+    if (lastIndex < text.length) {
+      segments.push({ type: 'text', content: text.slice(lastIndex) })
     }
-    return text
+
+    // Highlight only plain text segments
+    const result = segments.map(seg => {
+      if (seg.type === 'ansi') {
+        return seg.content
+      }
+      let content = seg.content
+      for (const { regex, colorCode } of this.compiledPatterns) {
+        regex.lastIndex = 0
+        content = content.replace(regex, (m) => `${colorCode}${m}\u001b[0m`)
+      }
+      return content
+    }).join('')
+
+    return result
   }
 
   activate (terminal) {
     this.terminal = terminal
-    // Override the write method to automatically highlight keywords
-    const originalWrite = terminal.write
-    terminal.write = (data) => {
-      originalWrite.call(
-        terminal,
-        terminal.displayRaw ? this.escape(data) : this.highlightKeywords(data)
+    // Store the original write method properly bound to terminal
+    this.originalWrite = terminal.write.bind(terminal)
+    const self = this
+    terminal.write = function (data) {
+      self.originalWrite(
+        terminal.displayRaw ? self.escape(data) : self.highlightKeywords(data)
       )
     }
-    this.originalWrite = originalWrite
   }
 
   dispose () {
     // Restore the original write method when disposing the addon
     this.terminal.write = this.originalWrite
     this.originalWrite = null
-    this.term = null
+    this.terminal = null
   }
 }

package/client/components/terminal/shell.js

@@ -0,0 +1,138 @@
+/**
+ * Client-side Shell Integration Commands
+ *
+ * These are minimal shell integration commands that can be sent directly
+ * to a local or remote shell from the frontend after connection.
+ * They enable OSC 633 command tracking without needing server-side file sourcing.
+ *
+ * OSC 633 Protocol:
+ * - OSC 633 ; A - Prompt started
+ * - OSC 633 ; B - Command input started (ready for typing)
+ * - OSC 633 ; C - Command execution started
+ * - OSC 633 ; D ; <exitCode> - Command finished
+ * - OSC 633 ; E ; <command> - Command line being executed
+ * - OSC 633 ; P ; Cwd=<path> - Current working directory
+ */
+
+/* eslint-disable no-template-curly-in-string, no-useless-escape */
+
+/**
+ * Get inline shell integration command for bash (one-liner format)
+ * Properly formatted for semicolon joining
+ */
+function getBashInlineIntegration () {
+  // Each statement is complete and can be joined with semicolons
+  return [
+    'if [[ $- == *i* ]] && [[ -z "${ELECTERM_SHELL_INTEGRATION:-}" ]]',
+    'then export ELECTERM_SHELL_INTEGRATION=1',
+    '__e_esc() { local v="$1"; v="${v//\\\\/\\\\\\\\}"; v="${v//;/\\\\x3b}"; printf \'%s\' "$v"; }',
+    '__e_pre() { [[ "$BASH_COMMAND" == "$PROMPT_COMMAND" ]] && return; [[ "$BASH_COMMAND" == "__e_"* ]] && return; [[ "${__e_in:-0}" == "0" ]] && { __e_in=1; printf \'\\e]633;E;%s\\a\\e]633;C\\a\' "$(__e_esc "$BASH_COMMAND")"; }; }',
+    '__e_cmd() { local c="$?"; [[ "${__e_in:-0}" == "1" ]] && { printf \'\\e]633;D;%s\\a\' "$c"; __e_in=0; }; printf \'\\e]633;P;Cwd=%s\\a\\e]633;A\\a\' "$(__e_esc "$PWD")"; return "$c"; }',
+    'trap \'__e_pre\' DEBUG',
+    'PROMPT_COMMAND="__e_cmd${PROMPT_COMMAND:+; $PROMPT_COMMAND}"',
+    'fi'
+  ].join('; ')
+}
+
+/**
+ * Get inline shell integration command for zsh (one-liner format)
+ * Properly formatted for semicolon joining
+ */
+function getZshInlineIntegration () {
+  // Each statement is complete and can be joined with semicolons
+  // Note: 'then' must have a space/newline before the next command, not semicolon
+  return [
+    'if [[ -o interactive ]] && [[ -z "${ELECTERM_SHELL_INTEGRATION:-}" ]]',
+    'then export ELECTERM_SHELL_INTEGRATION=1',
+    '__e_esc() { local v="$1"; v="${v//\\\\/\\\\\\\\}"; v="${v//;/\\\\x3b}"; builtin printf \'%s\' "$v"; }',
+    '__e_preexec() { __e_cmd="$1"; builtin printf \'\\e]633;E;%s\\a\\e]633;C\\a\' "$(__e_esc "$1")"; }',
+    '__e_precmd() { local c="$?"; [[ -n "$__e_cmd" ]] && builtin printf \'\\e]633;D;%s\\a\' "$c"; __e_cmd=""; builtin printf \'\\e]633;P;Cwd=%s\\a\\e]633;A\\a\' "$(__e_esc "$PWD")"; }',
+    'autoload -Uz add-zsh-hook',
+    'add-zsh-hook precmd __e_precmd',
+    'add-zsh-hook preexec __e_preexec',
+    'fi'
+  ].join('; ')
+}
+
+/**
+ * Get inline shell integration command for fish (one-liner format)
+ */
+function getFishInlineIntegration () {
+  return [
+    'if status is-interactive; and not set -q ELECTERM_SHELL_INTEGRATION',
+    'set -g ELECTERM_SHELL_INTEGRATION 1',
+    'function __e_esc; echo $argv | string replace -a \'\\\\\' \'\\\\\\\\\' | string replace -a \';\' \'\\\\x3b\'; end',
+    'function __e_prompt --on-event fish_prompt; printf \'\\e]633;A\\a\\e]633;P;Cwd=%s\\a\' (__e_esc "$PWD"); end',
+    'function __e_preexec --on-event fish_preexec; printf \'\\e]633;E;%s\\a\\e]633;C\\a\' (__e_esc "$argv"); end',
+    'function __e_postexec --on-event fish_postexec; printf \'\\e]633;D;%s\\a\' $status; end',
+    'end'
+  ].join('; ')
+}
+
+/**
+ * Get shell integration command based on detected shell type
+ * @param {string} shellType - 'bash', 'zsh', or 'fish'
+ * @returns {string} Shell integration command to send
+ */
+export function getInlineShellIntegration (shellType) {
+  switch (shellType) {
+    case 'bash':
+      return getBashInlineIntegration()
+    case 'zsh':
+      return getZshInlineIntegration()
+    case 'fish':
+      return getFishInlineIntegration()
+    default:
+      // Try bash as default for sh-compatible shells
+      return getBashInlineIntegration()
+  }
+}
+
+/**
+ * Wrap shell integration command for execution
+ * Now simplified since output suppression is handled at the attach addon level
+ * @param {string} cmd - Shell integration command
+ * @param {string} shellType - Shell type (unused, kept for API compatibility)
+ * @returns {string} Command ready to send to terminal
+ */
+export function wrapSilent (cmd, shellType) {
+  // Escape single quotes for embedding in single-quoted string
+  const escaped = cmd.replace(/'/g, "'\\''")
+  // The leading space prevents the command from being saved to history
+  // The eval wrapper ensures proper execution
+  return ` eval '${escaped}' 2>/dev/null\r`
+}
+
+/**
+ * Get complete shell integration command ready to send
+ * @param {string} shellType - 'bash', 'zsh', or 'fish'
+ * @returns {string} Complete command to send to terminal
+ */
+export function getShellIntegrationCommand (shellType = 'bash') {
+  const cmd = getInlineShellIntegration(shellType)
+  return wrapSilent(cmd, shellType)
+}
+
+/**
+ * Detect shell type from shell path or login script
+ * @param {string} shellPath - Path to shell executable or login script
+ * @returns {string} Shell type: 'bash', 'zsh', 'fish', or 'bash' (default)
+ */
+export function detectShellType (shellPath = '') {
+  if (!shellPath) return 'bash'
+
+  const normalizedPath = shellPath.toLowerCase()
+
+  if (normalizedPath.includes('zsh')) {
+    return 'zsh'
+  } else if (normalizedPath.includes('fish')) {
+    return 'fish'
+  } else if (normalizedPath.includes('bash')) {
+    return 'bash'
+  } else if (normalizedPath.includes('sh')) {
+    // Generic sh, try bash compatibility
+    return 'bash'
+  }
+
+  return 'bash'
+}

package/client/components/terminal/term-search.styl

@@ -13,3 +13,4 @@
   top 100px
   right 5px
   z-index 200
+  background var(--main)

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -171,6 +171,7 @@ export default class TerminalCmdSuggestions extends Component {
     const { activeTabId } = window.store
     const terminal = refs.get('term-' + activeTabId)
     if (!terminal) {
+      console.log('No active terminal found')
       return
     }
 
@@ -186,6 +187,8 @@ export default class TerminalCmdSuggestions extends Component {
       txt = pre + command
     }
     terminal.attachAddon._sendData(txt)
+    // Update the terminal's currentInput to reflect the full command
+    terminal.setCurrentInput(command)
     terminal.term.focus()
     this.closeSuggestions()
   }