@phenx-inc/ctlsurf 0.1.4 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {
@@ -46,6 +46,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/headless": "^5.5.0",
     "@xterm/xterm": "^5.5.0",
     "electron-store": "^10.0.0",
     "esbuild": "^0.27.4",

package/src/main/bridge.ts

@@ -1,28 +1,36 @@
+import { Terminal } from '@xterm/headless'
 import { WorkerWsClient } from './workerWs'
 
 /**
  * Conversation Bridge
  *
- * Taps the pty output stream, strips ANSI codes, buffers output,
- * and sends cleaned chunks to the backend via WebSocket for S3-backed chat logging.
+ * Uses a headless xterm terminal emulator to process raw PTY output
+ * (cursor movements, overwrites, clears) into clean rendered text.
+ * Periodically diffs the terminal buffer and sends new content
+ * to the backend via WebSocket for S3-backed chat logging.
  */
 export class ConversationBridge {
   private wsClient: WorkerWsClient | null = null
-  private buffer: string = ''
   private flushTimer: ReturnType<typeof setTimeout> | null = null
-  private flushIntervalMs: number = 3000 // flush every 3 seconds
+  private flushIntervalMs: number = 3000
   private sessionActive: boolean = false
   private inputBuffer: string = ''
 
+  // Virtual terminal for processing escape sequences into rendered text
+  private terminal: Terminal
+  private lastSnapshotLines: number = 0 // how many lines we've already sent
+
+  constructor() {
+    this.terminal = new Terminal({ cols: 120, rows: 50, scrollback: 10000 })
+  }
+
   setWsClient(ws: WorkerWsClient): void {
     this.wsClient = ws
   }
 
-  /**
-   * Start a new logging session.
-   */
   startSession(): void {
-    this.buffer = ''
+    this.terminal.reset()
+    this.lastSnapshotLines = 0
     this.inputBuffer = ''
     this.sessionActive = true
     console.log('[bridge] Session started')
@@ -30,56 +38,68 @@ export class ConversationBridge {
 
   /**
    * Feed terminal output data into the bridge.
-   * Buffers and flushes periodically.
+   * The headless terminal processes all escape sequences (cursor moves,
+   * line clears, color codes) so the buffer contains clean rendered text.
    */
   feedOutput(data: string): void {
     if (!this.sessionActive) return
 
-    this.buffer += data
+    this.terminal.write(data)
 
-    // Reset flush timer
     if (this.flushTimer) {
       clearTimeout(this.flushTimer)
     }
     this.flushTimer = setTimeout(() => this.flush(), this.flushIntervalMs)
   }
 
-  /**
-   * Feed user input data into the bridge.
-   */
   feedInput(data: string): void {
     if (!this.sessionActive) return
     this.inputBuffer += data
 
-    // Detect Enter key (newline) — flush the input as a user prompt
     if (data.includes('\r') || data.includes('\n')) {
-      const input = this.inputBuffer.trim()
-      if (input.length > 0) {
-        this.sendEntry('user_input', input)
+      const cleaned = cleanInput(this.inputBuffer)
+      if (cleaned.length > 0) {
+        this.sendEntry('user_input', cleaned)
       }
       this.inputBuffer = ''
     }
   }
 
   /**
-   * Flush buffered output via WebSocket.
+   * Resize the virtual terminal to match the actual PTY dimensions.
+   */
+  resize(cols: number, rows: number): void {
+    this.terminal.resize(cols, rows)
+  }
+
+  /**
+   * Read new content from the terminal buffer since the last flush.
    */
   private flush(): void {
-    if (this.buffer.length === 0) return
+    const buf = this.terminal.buffer.active
+    const totalLines = buf.baseY + buf.cursorY + 1
+
+    if (totalLines <= this.lastSnapshotLines) return
+
+    // Extract only the new lines since last flush
+    const newLines: string[] = []
+    for (let i = this.lastSnapshotLines; i < totalLines; i++) {
+      const line = buf.getLine(i)
+      if (line) {
+        newLines.push(line.translateToString(true))
+      }
+    }
 
-    const chunk = this.buffer
-    this.buffer = ''
+    this.lastSnapshotLines = totalLines
 
-    // Strip ANSI escape codes for cleaner log entries
-    const cleaned = stripAnsi(chunk)
-    if (cleaned.trim().length === 0) return
+    const content = newLines.join('\n')
+    // Collapse excessive blank lines
+    const cleaned = content.replace(/\n{3,}/g, '\n\n').trim()
+    if (cleaned.length === 0) return
 
     this.sendEntry('terminal_output', cleaned)
   }
 
-  /**
-   * Send an entry to the backend via WebSocket.
-   */
   private sendEntry(type: string, content: string): void {
     if (!this.wsClient) return
     this.wsClient.sendChatLog({
@@ -89,13 +109,9 @@ export class ConversationBridge {
     })
   }
 
-  /**
-   * End the current session.
-   */
   endSession(): void {
     if (!this.sessionActive) return
 
-    // Flush remaining buffer
     this.flush()
 
     if (this.flushTimer) {
@@ -104,28 +120,44 @@ export class ConversationBridge {
     }
 
     this.sessionActive = false
-    this.buffer = ''
     this.inputBuffer = ''
     console.log('[bridge] Session ended')
   }
 }
 
 /**
- * Strip ANSI escape codes from terminal output.
+ * Strip ANSI escape codes from a string.
  */
 function stripAnsi(str: string): string {
   return str
-    // CSI sequences (e.g. \x1b[0m, \x1b[?2004h, \x1b[1;32m)
     .replace(/\x1b\[[\x30-\x3f]*[\x20-\x2f]*[\x40-\x7e]/g, '')
-    // OSC sequences (e.g. \x1b]0;title\x07)
     .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
-    // Other escape sequences (charset, keypad mode, etc.)
     .replace(/\x1b[^[\]](.|$)/g, '')
-    // Remaining single ESC
     .replace(/\x1b/g, '')
-    // Carriage returns
-    .replace(/\r/g, '')
-    // Control characters except newline/tab
-    // eslint-disable-next-line no-control-regex
-    .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
+}
+
+/**
+ * Process backspace characters: each \x7f or \b deletes the preceding char.
+ */
+function processBackspaces(str: string): string {
+  const result: string[] = []
+  for (const ch of str) {
+    if (ch === '\x7f' || ch === '\b') {
+      result.pop()
+    } else {
+      result.push(ch)
+    }
+  }
+  return result.join('')
+}
+
+/**
+ * Clean user input: strip ANSI, process backspaces, remove control chars.
+ */
+function cleanInput(str: string): string {
+  let cleaned = stripAnsi(str)
+  cleaned = processBackspaces(cleaned)
+  // eslint-disable-next-line no-control-regex
+  cleaned = cleaned.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
+  return cleaned.trim()
 }

package/src/main/orchestrator.ts

@@ -330,6 +330,7 @@ export class Orchestrator {
 
   resizePty(cols: number, rows: number): void {
     this.ptyManager?.resize(cols, rows)
+    this.bridge.resize(cols, rows)
     this.workerWs.sendTerminalResize(cols, rows)
   }