@ghostty-web/demo 0.2.1 → 0.3.0-next.10.g90c1178

package/README.md

@@ -5,46 +5,33 @@ Cross-platform demo server for [ghostty-web](https://github.com/coder/ghostty-we
 ## Quick Start
 
 ```bash
-npx @ghostty-web/demo
+npx @ghostty-web/demo@next
 ```
 
 This starts a local web server with a fully functional terminal connected to your shell.
-Works on **Linux**, **macOS**, and **Windows**.
+Works on **Linux** and **macOS** (no Windows support yet).
 
 ## What it does
 
 - Starts an HTTP server on port 8080 (configurable via `PORT` env var)
 - Starts a WebSocket server on port 3001 for PTY communication
-- Opens a real shell session (bash, zsh, cmd.exe, or PowerShell)
+- Opens a real shell session (bash, zsh, etc.)
 - Provides full PTY support (colors, cursor positioning, resize, etc.)
 
 ## Usage
 
 ```bash
 # Default (port 8080)
-npx @ghostty-web/demo
+npx @ghostty-web/demo@next
 
 # Custom port
-PORT=3000 npx @ghostty-web/demo
+PORT=3000 npx @ghostty-web/demo@next
 ```
 
 Then open http://localhost:8080 in your browser.
 
-## Features
-
-- 🖥️ Real shell sessions with full PTY support
-- 🎨 True color (24-bit) and 256 color support
-- ⌨️ Full keyboard support including special keys
-- 📐 Dynamic terminal resizing
-- 🔄 Auto-reconnection on disconnect
-- 🌐 Cross-platform (Linux, macOS, Windows)
-
 ## Security Warning
 
 ⚠️ **This server provides full shell access.**
 
 Only use for local development and demos. Do not expose to untrusted networks.
-
-## License
-
-MIT

package/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,40 +15,58 @@ 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);
 
-const HTTP_PORT = process.env.PORT || 8080;
+const DEV_MODE = process.argv.includes('--dev');
+const HTTP_PORT = process.env.PORT || (DEV_MODE ? 8000 : 8080);
 const WS_PORT = 3001;
 
 // ============================================================================
 // Locate ghostty-web assets
 // ============================================================================
 
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
 function findGhosttyWeb() {
-  const possiblePaths = [
-    // Development: running from repo root (demo/bin/demo.js -> ../../dist)
-    path.join(__dirname, '..', '..', 'dist'),
-    // When installed as dependency (demo/node_modules/ghostty-web/dist)
-    path.join(__dirname, '..', 'node_modules', 'ghostty-web', 'dist'),
-    // When in a monorepo or hoisted
-    path.join(__dirname, '..', '..', 'node_modules', 'ghostty-web', 'dist'),
-    path.join(__dirname, '..', '..', '..', 'node_modules', 'ghostty-web', 'dist'),
-  ];
-
-  for (const p of possiblePaths) {
-    const jsPath = path.join(p, 'ghostty-web.js');
-    if (fs.existsSync(jsPath)) {
-      // Find WASM file - check both dist/ and parent directory
-      let wasmPath = path.join(p, 'ghostty-vt.wasm');
-      if (!fs.existsSync(wasmPath)) {
-        wasmPath = path.join(path.dirname(p), 'ghostty-vt.wasm');
-      }
-      if (fs.existsSync(wasmPath)) {
-        return { distPath: p, wasmPath };
-      }
+  // In dev mode, we use Vite - no need to find built assets
+  if (DEV_MODE) {
+    const repoRoot = path.join(__dirname, '..', '..');
+    const wasmPath = path.join(repoRoot, 'ghostty-vt.wasm');
+    if (!fs.existsSync(wasmPath)) {
+      console.error('Error: ghostty-vt.wasm not found.');
+      console.error('Run: bun run build:wasm');
+      process.exit(1);
     }
+    return { distPath: null, wasmPath, repoRoot };
+  }
+
+  // First, check for local development (repo root dist/)
+  const localDist = path.join(__dirname, '..', '..', 'dist');
+  const localJs = path.join(localDist, 'ghostty-web.js');
+  const localWasm = path.join(__dirname, '..', '..', 'ghostty-vt.wasm');
+
+  if (fs.existsSync(localJs) && fs.existsSync(localWasm)) {
+    return { distPath: localDist, wasmPath: localWasm, repoRoot: path.join(__dirname, '..', '..') };
+  }
+
+  // Use require.resolve to find the installed ghostty-web package
+  try {
+    const ghosttyWebMain = require.resolve('ghostty-web');
+    // Strip dist/... from path to get package root (regex already gives us the root)
+    const ghosttyWebRoot = ghosttyWebMain.replace(/[/\\]dist[/\\].*$/, '');
+    const distPath = path.join(ghosttyWebRoot, 'dist');
+    const wasmPath = path.join(ghosttyWebRoot, 'ghostty-vt.wasm');
+
+    if (fs.existsSync(path.join(distPath, 'ghostty-web.js')) && fs.existsSync(wasmPath)) {
+      return { distPath, wasmPath, repoRoot: null };
+    }
+  } catch (e) {
+    // require.resolve failed, package not found
   }
 
   console.error('Error: Could not find ghostty-web package.');
@@ -59,10 +76,7 @@ function findGhosttyWeb() {
   process.exit(1);
 }
 
-const { distPath, wasmPath } = findGhosttyWeb();
-const isDev =
-  distPath.includes(path.join('demo', '..', 'dist')) ||
-  distPath === path.join(__dirname, '..', '..', 'dist');
+const { distPath, wasmPath, repoRoot } = findGhosttyWeb();
 
 // ============================================================================
 // HTML Template
@@ -157,14 +171,22 @@ const HTML_TEMPLATE = `<!doctype html>
       }
 
       .terminal-content {
-        padding: 0;
-        min-height: 400px;
-        height: 60vh;
+        height: 600px;
+        padding: 16px;
+        background: #1e1e1e;
+        position: relative;
+        overflow: hidden;
       }
 
-      #terminal {
-        width: 100%;
-        height: 100%;
+      /* Ensure terminal canvas can handle scrolling */
+      .terminal-content canvas {
+        display: block;
+      }
+
+      @media (max-width: 768px) {
+        .terminal-content {
+          height: 500px;
+        }
       }
     </style>
   </head>
@@ -176,25 +198,28 @@ const HTML_TEMPLATE = `<!doctype html>
           <div class="light yellow"></div>
           <div class="light green"></div>
         </div>
-        <span class="title">ghostty-web — shell</span>
+        <span class="title">ghostty-web</span>
         <div class="connection-status">
           <div class="status-dot connecting" id="status-dot"></div>
           <span id="status-text">Connecting...</span>
         </div>
       </div>
-      <div class="terminal-content">
-        <div id="terminal"></div>
-      </div>
+      <div class="terminal-content" id="terminal"></div>
     </div>
 
     <script type="module">
-      import { Terminal, FitAddon } from '/dist/ghostty-web.js';
+      import { init, Terminal, FitAddon } from '/dist/ghostty-web.js';
 
+      await init();
       const term = new Terminal({
         cols: 80,
         rows: 24,
         fontFamily: 'JetBrains Mono, Menlo, Monaco, monospace',
         fontSize: 14,
+        theme: {
+          background: '#1e1e1e',
+          foreground: '#d4d4d4',
+        },
       });
 
       const fitAddon = new FitAddon();
@@ -203,6 +228,7 @@ const HTML_TEMPLATE = `<!doctype html>
       const container = document.getElementById('terminal');
       await term.open(container);
       fitAddon.fit();
+      fitAddon.observeResize(); // Auto-fit when container resizes
 
       // Status elements
       const statusDot = document.getElementById('status-dot');
@@ -249,13 +275,44 @@ const HTML_TEMPLATE = `<!doctype html>
         }
       });
 
-      // Handle resize
-      window.addEventListener('resize', () => {
-        fitAddon.fit();
+      // Handle resize - notify PTY when terminal dimensions change
+      term.onResize(({ cols, rows }) => {
         if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+          ws.send(JSON.stringify({ type: 'resize', cols, rows }));
         }
       });
+
+      // Also handle window resize (for browsers that don't trigger ResizeObserver on window resize)
+      window.addEventListener('resize', () => {
+        fitAddon.fit();
+      });
+
+      // Handle mobile keyboard showing/hiding using visualViewport API
+      if (window.visualViewport) {
+        const terminalContent = document.querySelector('.terminal-content');
+        const terminalWindow = document.querySelector('.terminal-window');
+        const originalHeight = terminalContent.style.height;
+        const body = document.body;
+
+        window.visualViewport.addEventListener('resize', () => {
+          const keyboardHeight = window.innerHeight - window.visualViewport.height;
+          if (keyboardHeight > 100) {
+            body.style.padding = '0';
+            body.style.alignItems = 'flex-start';
+            terminalWindow.style.borderRadius = '0';
+            terminalWindow.style.maxWidth = '100%';
+            terminalContent.style.height = (window.visualViewport.height - 60) + 'px';
+            window.scrollTo(0, 0);
+          } else {
+            body.style.padding = '40px 20px';
+            body.style.alignItems = 'center';
+            terminalWindow.style.borderRadius = '12px';
+            terminalWindow.style.maxWidth = '1000px';
+            terminalContent.style.height = originalHeight || '600px';
+          }
+          fitAddon.fit();
+        });
+      }
     </script>
   </body>
 </html>`;
@@ -325,7 +382,7 @@ function serveFile(filePath, res) {
 }
 
 // ============================================================================
-// WebSocket Server (using native WebSocket upgrade)
+// WebSocket Server (using ws package)
 // ============================================================================
 
 const sessions = new Map();
@@ -356,225 +413,132 @@ 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(() => {
-    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,
-      `${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,
-      `${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`
-    );
-  }, 100);
+  const C = '\x1b[1;36m'; // Cyan
+  const G = '\x1b[1;32m'; // Green
+  const Y = '\x1b[1;33m'; // Yellow
+  const R = '\x1b[0m'; // Reset
+  ws.send(`${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`);
+  ws.send(
+    `${C}║${R}  ${G}Welcome to ghostty-web!${R}                                     ${C}║${R}\r\n`
+  );
+  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`
+  );
+  ws.send(`${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`);
 });
 
-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
 // ============================================================================
 
-httpServer.listen(HTTP_PORT, () => {
+function printBanner(url) {
   console.log('\n' + '═'.repeat(60));
-  console.log('  🚀 ghostty-web demo server' + (isDev ? ' (dev mode)' : ''));
+  console.log('  🚀 ghostty-web demo server' + (DEV_MODE ? ' (dev mode)' : ''));
   console.log('═'.repeat(60));
-  console.log(`\n  📺 Open: http://localhost:${HTTP_PORT}`);
+  console.log(`\n  📺 Open: ${url}`);
   console.log(`  📡 WebSocket PTY: ws://localhost:${WS_PORT}/ws`);
   console.log(`  🐚 Shell: ${getShell()}`);
   console.log(`  📁 Home: ${homedir()}`);
-  if (isDev) {
+  if (DEV_MODE) {
+    console.log(`  🔥 Hot reload enabled via Vite`);
+  } else if (repoRoot) {
     console.log(`  📦 Using local build: ${distPath}`);
   }
   console.log('\n  ⚠️  This server provides shell access.');
   console.log('     Only use for local development.\n');
   console.log('═'.repeat(60));
   console.log('  Press Ctrl+C to stop.\n');
-});
-
-wsServer.listen(WS_PORT);
+}
 
 // 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 HTTP/Vite server
+if (DEV_MODE) {
+  // Dev mode: use Vite for hot reload
+  const { createServer } = await import('vite');
+  const vite = await createServer({
+    root: repoRoot,
+    server: {
+      port: HTTP_PORT,
+      strictPort: true,
+    },
+  });
+  await vite.listen();
+  printBanner(`http://localhost:${HTTP_PORT}/demo/`);
+} else {
+  // Production mode: static file server
+  httpServer.listen(HTTP_PORT, () => {
+    printBanner(`http://localhost:${HTTP_PORT}`);
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghostty-web/demo",
-  "version": "0.2.1",
+  "version": "0.3.0-next.10.g90c1178",
   "description": "Cross-platform demo server for ghostty-web terminal emulator",
   "type": "module",
   "bin": {
@@ -8,11 +8,12 @@
   },
   "scripts": {
     "start": "node bin/demo.js",
-    "dev": "bun run server/pty-server.ts"
+    "dev": "node bin/demo.js --dev"
   },
   "dependencies": {
     "@lydell/node-pty": "^1.0.1",
-    "ghostty-web": "^0.2.1"
+    "ghostty-web": "0.3.0-next.10.g90c1178",
+    "ws": "^8.18.0"
   },
   "files": [
     "bin",