fix: persist VT stream parser state across writes (#63)

Author: sreya

demo/bin/demo.js

@@ -7,7 +7,6 @@
  * Run with: npx @ghostty-web/demo
  */
 
-import crypto from 'crypto';
 import fs from 'fs';
 import http from 'http';
 import { homedir } from 'os';
@@ -16,6 +15,8 @@ import { fileURLToPath } from 'url';
 
 // Node-pty for cross-platform PTY support
 import pty from '@lydell/node-pty';
+// WebSocket server
+import { WebSocketServer } from 'ws';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -349,7 +350,7 @@ function serveFile(filePath, res) {
 }
 
 // ============================================================================
-// WebSocket Server (using native WebSocket upgrade)
+// WebSocket Server (using ws package)
 // ============================================================================
 
 const sessions = new Map();
@@ -380,196 +381,85 @@ function createPtySession(cols, rows) {
   return ptyProcess;
 }
 
-// WebSocket server
-const wsServer = http.createServer();
+// WebSocket server using ws package
+const wss = new WebSocketServer({ port: WS_PORT, path: '/ws' });
 
-wsServer.on('upgrade', (req, socket, head) => {
+wss.on('connection', (ws, req) => {
   const url = new URL(req.url, `http://${req.headers.host}`);
-
-  if (url.pathname !== '/ws') {
-    socket.destroy();
-    return;
-  }
-
   const cols = Number.parseInt(url.searchParams.get('cols') || '80');
   const rows = Number.parseInt(url.searchParams.get('rows') || '24');
 
-  // Parse WebSocket key and create accept key
-  const key = req.headers['sec-websocket-key'];
-  const acceptKey = crypto
-    .createHash('sha1')
-    .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
-    .digest('base64');
-
-  // Send WebSocket handshake response
-  socket.write(
-    'HTTP/1.1 101 Switching Protocols\r\n' +
-      'Upgrade: websocket\r\n' +
-      'Connection: Upgrade\r\n' +
-      'Sec-WebSocket-Accept: ' +
-      acceptKey +
-      '\r\n\r\n'
-  );
-
-  const sessionId = crypto.randomUUID().slice(0, 8);
-
   // Create PTY
   const ptyProcess = createPtySession(cols, rows);
-  sessions.set(socket, { id: sessionId, pty: ptyProcess });
+  sessions.set(ws, { pty: ptyProcess });
 
   // PTY -> WebSocket
   ptyProcess.onData((data) => {
-    if (socket.writable) {
-      sendWebSocketFrame(socket, data);
+    if (ws.readyState === ws.OPEN) {
+      ws.send(data);
     }
   });
 
   ptyProcess.onExit(({ exitCode }) => {
-    sendWebSocketFrame(socket, `\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
-    socket.end();
+    if (ws.readyState === ws.OPEN) {
+      ws.send(`\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
+      ws.close();
+    }
   });
 
   // WebSocket -> PTY
-  let buffer = Buffer.alloc(0);
-
-  socket.on('data', (chunk) => {
-    buffer = Buffer.concat([buffer, chunk]);
-
-    while (buffer.length >= 2) {
-      const fin = (buffer[0] & 0x80) !== 0;
-      const opcode = buffer[0] & 0x0f;
-      const masked = (buffer[1] & 0x80) !== 0;
-      let payloadLength = buffer[1] & 0x7f;
-
-      let offset = 2;
-
-      if (payloadLength === 126) {
-        if (buffer.length < 4) break;
-        payloadLength = buffer.readUInt16BE(2);
-        offset = 4;
-      } else if (payloadLength === 127) {
-        if (buffer.length < 10) break;
-        payloadLength = Number(buffer.readBigUInt64BE(2));
-        offset = 10;
-      }
-
-      const maskKeyOffset = offset;
-      if (masked) offset += 4;
-
-      const totalLength = offset + payloadLength;
-      if (buffer.length < totalLength) break;
-
-      // Handle different opcodes
-      if (opcode === 0x8) {
-        // Close frame
-        socket.end();
-        break;
-      }
-
-      if (opcode === 0x1 || opcode === 0x2) {
-        // Text or binary frame
-        let payload = buffer.slice(offset, totalLength);
-
-        if (masked) {
-          const maskKey = buffer.slice(maskKeyOffset, maskKeyOffset + 4);
-          payload = Buffer.from(payload);
-          for (let i = 0; i < payload.length; i++) {
-            payload[i] ^= maskKey[i % 4];
-          }
+  ws.on('message', (data) => {
+    const message = data.toString('utf8');
+
+    // Check for resize message
+    if (message.startsWith('{')) {
+      try {
+        const msg = JSON.parse(message);
+        if (msg.type === 'resize') {
+          ptyProcess.resize(msg.cols, msg.rows);
+          return;
         }
-
-        const data = payload.toString('utf8');
-
-        // Check for resize message
-        if (data.startsWith('{')) {
-          try {
-            const msg = JSON.parse(data);
-            if (msg.type === 'resize') {
-              ptyProcess.resize(msg.cols, msg.rows);
-              buffer = buffer.slice(totalLength);
-              continue;
-            }
-          } catch (e) {
-            // Not JSON, treat as input
-          }
-        }
-
-        // Send to PTY
-        ptyProcess.write(data);
+      } catch (e) {
+        // Not JSON, treat as input
       }
-
-      buffer = buffer.slice(totalLength);
     }
+
+    // Send to PTY
+    ptyProcess.write(message);
   });
 
-  socket.on('close', () => {
-    const session = sessions.get(socket);
+  ws.on('close', () => {
+    const session = sessions.get(ws);
     if (session) {
       session.pty.kill();
-      sessions.delete(socket);
+      sessions.delete(ws);
     }
   });
 
-  socket.on('error', () => {
+  ws.on('error', () => {
     // Ignore socket errors (connection reset, etc.)
   });
 
   // Send welcome message
   setTimeout(() => {
+    if (ws.readyState !== ws.OPEN) return;
     const C = '\x1b[1;36m'; // Cyan
     const G = '\x1b[1;32m'; // Green
     const Y = '\x1b[1;33m'; // Yellow
     const R = '\x1b[0m'; // Reset
-    sendWebSocketFrame(
-      socket,
-      `${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
+    ws.send(`${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`);
+    ws.send(
       `${C}║${R}  ${G}Welcome to ghostty-web!${R}                                     ${C}║${R}\r\n`
     );
-    sendWebSocketFrame(
-      socket,
-      `${C}║${R}                                                              ${C}║${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
-      `${C}║${R}  You have a real shell session with full PTY support.        ${C}║${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
+    ws.send(`${C}║${R}                                                              ${C}║${R}\r\n`);
+    ws.send(`${C}║${R}  You have a real shell session with full PTY support.        ${C}║${R}\r\n`);
+    ws.send(
       `${C}║${R}  Try: ${Y}ls${R}, ${Y}cd${R}, ${Y}top${R}, ${Y}vim${R}, or any command!                      ${C}║${R}\r\n`
     );
-    sendWebSocketFrame(
-      socket,
-      `${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`
-    );
+    ws.send(`${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`);
   }, 100);
 });
 
-function sendWebSocketFrame(socket, data) {
-  const payload = Buffer.from(data, 'utf8');
-  let header;
-
-  if (payload.length < 126) {
-    header = Buffer.alloc(2);
-    header[0] = 0x81; // FIN + text frame
-    header[1] = payload.length;
-  } else if (payload.length < 65536) {
-    header = Buffer.alloc(4);
-    header[0] = 0x81;
-    header[1] = 126;
-    header.writeUInt16BE(payload.length, 2);
-  } else {
-    header = Buffer.alloc(10);
-    header[0] = 0x81;
-    header[1] = 127;
-    header.writeBigUInt64BE(BigInt(payload.length), 2);
-  }
-
-  socket.write(Buffer.concat([header, payload]));
-}
-
 // ============================================================================
 // Startup
 // ============================================================================
@@ -596,16 +486,14 @@ function printBanner(url) {
 // Graceful shutdown
 process.on('SIGINT', () => {
   console.log('\n\nShutting down...');
-  for (const [socket, session] of sessions.entries()) {
+  for (const [ws, session] of sessions.entries()) {
     session.pty.kill();
-    socket.destroy();
+    ws.close();
   }
+  wss.close();
   process.exit(0);
 });
 
-// Start WebSocket PTY server (runs in both modes)
-wsServer.listen(WS_PORT);
-
 // Start HTTP/Vite server
 if (DEV_MODE) {
   // Dev mode: use Vite for hot reload

demo/bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "@lydell/node-pty": "^1.0.1",
         "ghostty-web": "latest",
+        "ws": "^8.18.0",
       },
     },
   },
@@ -26,5 +27,7 @@
     "@lydell/node-pty-win32-x64": ["@lydell/node-pty-win32-x64@1.1.0", "", { "os": "win32", "cpu": "x64" }, "sha512-3N56BZ+WDFnUMYRtsrr7Ky2mhWGl9xXcyqR6cexfuCqcz9RNWL+KoXRv/nZylY5dYaXkft4JaR1uVu+roiZDAw=="],
 
     "ghostty-web": ["ghostty-web@0.2.1", "", {}, "sha512-wrovbPlHcl+nIkp7S7fY7vOTsmBjwMFihZEe2PJe/M6G4/EwuyJnwaWTTzNfuY7RcM/lVlN+PvGWqJIhKSB5hw=="],
+
+    "ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="],
   }
 }

demo/package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@lydell/node-pty": "^1.0.1",
-    "ghostty-web": "latest"
+    "ghostty-web": "latest",
+    "ws": "^8.18.0"
   },
   "files": [
     "bin",

patches/ghostty-wasm-api.patch

@@ -606,10 +606,10 @@ index bc92597f5..d988967f7 100644
      _ = @import("../../lib/allocator.zig");
 diff --git a/src/terminal/c/terminal.zig b/src/terminal/c/terminal.zig
 new file mode 100644
-index 000000000..c39b0791c
+index 000000000..e79702488
 --- /dev/null
 +++ b/src/terminal/c/terminal.zig
-@@ -0,0 +1,604 @@
+@@ -0,0 +1,611 @@
 +//! C API wrapper for Terminal
 +//!
 +//! This provides a C-compatible interface to Ghostty's Terminal for WASM export.
@@ -641,6 +641,10 @@ index 000000000..c39b0791c
 +    /// The terminal instance
 +    terminal: Terminal,
 +
++    /// Persistent VT stream for parsing (preserves state across writes)
++    /// This is critical for handling escape sequences split across WebSocket messages.
++    stream: ReadonlyStream,
++
 +    /// Dirty tracking - which rows have changed since last clear
 +    dirty_rows: []bool,
 +
@@ -765,17 +769,22 @@ index 000000000..c39b0791c
 +    wrapper.* = .{
 +        .alloc = alloc,
 +        .terminal = terminal,
++        .stream = undefined, // Will be initialized below
 +        .dirty_rows = dirty_rows,
 +        .config = config,
 +    };
 +
++    // Initialize the persistent VT stream (must be done after terminal is set)
++    wrapper.stream = wrapper.terminal.vtStream();
++
 +    return @ptrCast(wrapper);
 +}
 +
 +pub fn free(ptr: ?*anyopaque) callconv(.c) void {
 +    const wrapper: *TerminalWrapper = @ptrCast(@alignCast(ptr orelse return));
 +    const alloc = wrapper.alloc;
 +
++    wrapper.stream.deinit();
 +    alloc.free(wrapper.dirty_rows);
 +    wrapper.terminal.deinit(alloc);
 +    alloc.destroy(wrapper);
@@ -811,12 +820,10 @@ index 000000000..c39b0791c
 +pub fn write(ptr: ?*anyopaque, data: [*]const u8, len: usize) callconv(.c) void {
 +    const wrapper: *TerminalWrapper = @ptrCast(@alignCast(ptr orelse return));
 +
-+    // Create stream for this write operation
-+    var stream = wrapper.terminal.vtStream();
-+
-+    // Write data to terminal stream (this parses VT sequences)
++    // Use persistent stream to preserve parser state across writes
++    // This is critical for handling escape sequences split across WebSocket messages
 +    const slice = data[0..len];
-+    stream.nextSlice(slice) catch |err| {
++    wrapper.stream.nextSlice(slice) catch |err| {
 +        log.err("Write failed: {}", .{err});
 +        return;
 +    };