@seflless/ghosttown 1.0.1 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Coder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,10 @@
-# Ghost Town
+# ghost-town
 
-Placeholder
+Ghost town let's you continue terminal sessions from other devices using a browser. The runtime is based on Ghostty with a recreated UI that should feel like using Ghostty for desktop.
+
+We're building this to make it easy to build web apps using coding agents, while on the go.
+
+# Credits
+
+- [Ghostty](https://ghostty.org/)
+- [ghostty-web](https://github.com/coder/ghostty-web)

package/bin/ghosttown.js

@@ -0,0 +1,676 @@
+#!/usr/bin/env node
+
+/**
+ * ghosttown CLI - Web-based terminal emulator
+ *
+ * Starts a local HTTP server with WebSocket PTY support.
+ *
+ * Usage:
+ *   ghosttown [options]
+ *
+ * Options:
+ *   -p, --port <port>  Port to listen on (default: 8080, or PORT env var)
+ *   -h, --help         Show this help message
+ *
+ * Examples:
+ *   ghosttown
+ *   ghosttown -p 3000
+ *   ghosttown --port 3000
+ *   PORT=3000 ghosttown
+ */
+
+import fs from 'fs';
+import http from 'http';
+import { homedir, networkInterfaces } from 'os';
+import path from 'path';
+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);
+
+// ============================================================================
+// Parse CLI arguments
+// ============================================================================
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  let port = null;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === '-h' || arg === '--help') {
+      console.log(`
+Usage: ghosttown [options]
+
+Options:
+  -p, --port <port>  Port to listen on (default: 8080, or PORT env var)
+  -h, --help         Show this help message
+
+Examples:
+  ghosttown
+  ghosttown -p 3000
+  ghosttown --port 3000
+  PORT=3000 ghosttown
+`);
+      process.exit(0);
+    }
+
+    if (arg === '-p' || arg === '--port') {
+      const nextArg = args[i + 1];
+      if (!nextArg || nextArg.startsWith('-')) {
+        console.error(`Error: ${arg} requires a port number`);
+        process.exit(1);
+      }
+      port = parseInt(nextArg, 10);
+      if (isNaN(port) || port < 1 || port > 65535) {
+        console.error(`Error: Invalid port number: ${nextArg}`);
+        process.exit(1);
+      }
+      i++; // Skip the next argument since we consumed it
+    }
+  }
+
+  return { port };
+}
+
+const cliArgs = parseArgs();
+const HTTP_PORT = cliArgs.port || process.env.PORT || 8080;
+
+// ============================================================================
+// Locate ghosttown assets
+// ============================================================================
+
+function findAssets() {
+  // Assets are in the package root (one level up from bin/)
+  const packageRoot = path.join(__dirname, '..');
+  const distPath = path.join(packageRoot, 'dist');
+  const wasmPath = path.join(packageRoot, 'ghostty-vt.wasm');
+
+  if (!fs.existsSync(path.join(distPath, 'ghostty-web.js'))) {
+    console.error('Error: dist/ghostty-web.js not found.');
+    console.error('The package may not have been built correctly.');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(wasmPath)) {
+    console.error('Error: ghostty-vt.wasm not found.');
+    console.error('The package may not have been built correctly.');
+    process.exit(1);
+  }
+
+  return { distPath, wasmPath };
+}
+
+const { distPath, wasmPath } = findAssets();
+
+// ============================================================================
+// HTML Template
+// ============================================================================
+
+const HTML_TEMPLATE = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>ghosttown</title>
+    <style>
+      :root {
+        --vvh: 100vh;
+        --vv-offset-top: 0px;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: var(--vvh);
+        overflow: hidden;
+        overscroll-behavior: none;
+        touch-action: none;
+        transition: none;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: #292c34;
+        padding: 8px 8px 14px 8px;
+        box-sizing: border-box;
+        position: fixed;
+        inset: 0;
+        height: var(--vvh);
+      }
+
+      .terminal-window {
+        width: 100%;
+        height: 100%;
+        background: #ededed;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        box-shadow:
+          0 0 0 0.5px #65686e,
+          0 0 0 1px #74777c,
+          0 0 0 1.5px #020203,
+          0px 4px 10px 0px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+        box-sizing: border-box;
+        transform: translateY(calc(var(--vv-offset-top) * -1));
+        transition: none;
+      }
+
+      .title-bar {
+        background: #292c34;
+        padding: 8px 16px 6px 10px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+      }
+
+      .light {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .light.red { background: #ff5f56; }
+      .light.yellow { background: #ffbd2e; }
+      .light.green { background: #27c93f; }
+
+      .title {
+        color: #e5e5e5;
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .title-separator { color: #666; }
+      .current-directory {
+        color: #888;
+        font-size: 12px;
+        font-weight: 400;
+        max-width: 400px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .connection-status {
+        margin-left: auto;
+        font-size: 11px;
+        color: #888;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .connection-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #666;
+      }
+
+      .connection-dot.connected { background: #27c93f; }
+
+      #terminal-container {
+        flex: 1;
+        padding: 2px 0 2px 2px;
+        background: #292c34;
+        position: relative;
+        overflow: hidden;
+        min-height: 0;
+        touch-action: none;
+      }
+
+      #terminal-container canvas {
+        display: block;
+        touch-action: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="terminal-window">
+      <div class="title-bar">
+        <div class="traffic-lights">
+          <span class="light red"></span>
+          <span class="light yellow"></span>
+          <span class="light green"></span>
+        </div>
+        <div class="title">
+          <span>ghosttown</span>
+          <span class="title-separator" id="title-separator" style="display: none">•</span>
+          <span class="current-directory" id="current-directory"></span>
+        </div>
+        <div class="connection-status">
+          <span class="connection-dot" id="connection-dot"></span>
+          <span id="connection-text">Disconnected</span>
+        </div>
+      </div>
+      <div id="terminal-container"></div>
+    </div>
+
+    <script type="module">
+      import { init, Terminal, FitAddon } from '/dist/ghostty-web.js';
+
+      let term;
+      let ws;
+      let fitAddon;
+
+      async function initTerminal() {
+        await init();
+
+        term = new Terminal({
+          cursorBlink: true,
+          fontSize: 12,
+          fontFamily: 'Monaco, Menlo, "Courier New", monospace',
+          theme: {
+            background: '#292c34',
+            foreground: '#d4d4d4',
+          },
+          smoothScrollDuration: 0,
+          scrollback: 10000,
+          scrollbarVisible: false,
+        });
+
+        fitAddon = new FitAddon();
+        term.loadAddon(fitAddon);
+
+        term.open(document.getElementById('terminal-container'));
+        fitAddon.fit();
+        fitAddon.observeResize();
+
+        // Desktop: auto-focus. Mobile: focus only on tap.
+        const isCoarsePointer = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
+        if (!isCoarsePointer) {
+          term.focus();
+        }
+
+        // Prevent page scroll on iOS
+        document.addEventListener('touchmove', (e) => {
+          const container = document.getElementById('terminal-container');
+          if (container && !container.contains(e.target)) {
+            e.preventDefault();
+          }
+        }, { passive: false });
+
+        // Mobile keyboard handling via visualViewport
+        {
+          const root = document.documentElement;
+          let watchRafId = null;
+          let vvhCurrent = 0;
+          let vvhTarget = 0;
+          let offsetCurrent = 0;
+          let offsetTarget = 0;
+          let lastTick = 0;
+
+          const readViewport = () => ({
+            height: window.visualViewport?.height ?? window.innerHeight,
+            offsetTop: window.visualViewport?.offsetTop ?? 0,
+          });
+
+          const applyVars = () => {
+            root.style.setProperty('--vvh', vvhCurrent + 'px');
+            root.style.setProperty('--vv-offset-top', offsetCurrent + 'px');
+          };
+
+          const startKeyboardWatch = () => {
+            if (watchRafId !== null) return;
+            lastTick = performance.now();
+
+            const tick = () => {
+              const now = performance.now();
+              const dtMs = Math.max(1, now - lastTick);
+              lastTick = now;
+
+              const { height, offsetTop } = readViewport();
+              vvhTarget = height;
+              offsetTarget = offsetTop;
+
+              if (vvhCurrent === 0) vvhCurrent = vvhTarget;
+
+              const tauMs = 100;
+              const alpha = 1 - Math.exp(-dtMs / tauMs);
+              const deltaH = vvhTarget - vvhCurrent;
+              const deltaO = offsetTarget - offsetCurrent;
+
+              if (Math.abs(deltaH) > 1) vvhCurrent += deltaH * alpha;
+              else vvhCurrent = vvhTarget;
+
+              if (Math.abs(deltaO) > 0.5) offsetCurrent += deltaO * alpha;
+              else offsetCurrent = offsetTarget;
+
+              applyVars();
+              fitAddon.fit();
+
+              const stillAnimating = Math.abs(vvhTarget - vvhCurrent) > 0.5 || Math.abs(offsetTarget - offsetCurrent) > 0.5;
+              if (stillAnimating) {
+                watchRafId = requestAnimationFrame(tick);
+              } else {
+                watchRafId = null;
+              }
+            };
+
+            watchRafId = requestAnimationFrame(tick);
+          };
+
+          // Initial setup
+          const { height, offsetTop } = readViewport();
+          vvhCurrent = height;
+          vvhTarget = height;
+          offsetCurrent = offsetTop;
+          offsetTarget = offsetTop;
+          applyVars();
+
+          window.addEventListener('resize', startKeyboardWatch);
+          window.addEventListener('focusin', startKeyboardWatch);
+          window.addEventListener('focusout', startKeyboardWatch);
+          window.visualViewport?.addEventListener('resize', startKeyboardWatch);
+        }
+
+        // Handle terminal resize
+        term.onResize((size) => {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'resize', cols: size.cols, rows: size.rows }));
+          }
+        });
+
+        // Handle user input
+        term.onData((data) => {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(data);
+          }
+        });
+
+        // Handle directory changes
+        const directoryElement = document.getElementById('current-directory');
+        const separatorElement = document.getElementById('title-separator');
+        term.onDirectoryChange((directory) => {
+          if (directoryElement && separatorElement) {
+            if (directory) {
+              directoryElement.textContent = directory;
+              separatorElement.style.display = 'inline';
+            } else {
+              directoryElement.textContent = '';
+              separatorElement.style.display = 'none';
+            }
+          }
+        });
+
+        connectWebSocket();
+      }
+
+      function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows;
+
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+          updateConnectionStatus(true);
+        };
+
+        ws.onmessage = (event) => {
+          term.write(event.data);
+        };
+
+        ws.onerror = () => {
+          updateConnectionStatus(false);
+        };
+
+        ws.onclose = () => {
+          updateConnectionStatus(false);
+          setTimeout(() => {
+            if (!ws || ws.readyState === WebSocket.CLOSED) {
+              connectWebSocket();
+            }
+          }, 3000);
+        };
+      }
+
+      function updateConnectionStatus(connected) {
+        const dot = document.getElementById('connection-dot');
+        const text = document.getElementById('connection-text');
+        if (connected) {
+          dot.classList.add('connected');
+          text.textContent = 'Connected';
+        } else {
+          dot.classList.remove('connected');
+          text.textContent = 'Disconnected';
+        }
+      }
+
+      initTerminal();
+    </script>
+  </body>
+</html>`;
+
+// ============================================================================
+// MIME Types
+// ============================================================================
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.wasm': 'application/wasm',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+};
+
+// ============================================================================
+// HTTP Server
+// ============================================================================
+
+const httpServer = http.createServer((req, res) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  const pathname = url.pathname;
+
+  // Serve index page
+  if (pathname === '/' || pathname === '/index.html') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(HTML_TEMPLATE);
+    return;
+  }
+
+  // Serve dist files
+  if (pathname.startsWith('/dist/')) {
+    const filePath = path.join(distPath, pathname.slice(6));
+    serveFile(filePath, res);
+    return;
+  }
+
+  // Serve WASM file
+  if (pathname === '/ghostty-vt.wasm') {
+    serveFile(wasmPath, res);
+    return;
+  }
+
+  // 404
+  res.writeHead(404);
+  res.end('Not Found');
+});
+
+function serveFile(filePath, res) {
+  const ext = path.extname(filePath);
+  const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404);
+      res.end('Not Found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(data);
+  });
+}
+
+// ============================================================================
+// WebSocket Server
+// ============================================================================
+
+const sessions = new Map();
+
+function getShell() {
+  if (process.platform === 'win32') {
+    return process.env.COMSPEC || 'cmd.exe';
+  }
+  return process.env.SHELL || '/bin/bash';
+}
+
+function createPtySession(cols, rows) {
+  const shell = getShell();
+
+  const ptyProcess = pty.spawn(shell, [], {
+    name: 'xterm-256color',
+    cols: cols,
+    rows: rows,
+    cwd: homedir(),
+    env: {
+      ...process.env,
+      TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+    },
+  });
+
+  return ptyProcess;
+}
+
+const wss = new WebSocketServer({ noServer: true });
+
+httpServer.on('upgrade', (req, socket, head) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+
+  if (url.pathname === '/ws') {
+    wss.handleUpgrade(req, socket, head, (ws) => {
+      wss.emit('connection', ws, req);
+    });
+  } else {
+    socket.destroy();
+  }
+});
+
+wss.on('connection', (ws, req) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  const cols = Number.parseInt(url.searchParams.get('cols') || '80');
+  const rows = Number.parseInt(url.searchParams.get('rows') || '24');
+
+  const ptyProcess = createPtySession(cols, rows);
+  sessions.set(ws, { pty: ptyProcess });
+
+  ptyProcess.onData((data) => {
+    if (ws.readyState === ws.OPEN) {
+      ws.send(data);
+    }
+  });
+
+  ptyProcess.onExit(({ exitCode }) => {
+    if (ws.readyState === ws.OPEN) {
+      ws.send(`\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
+      ws.close();
+    }
+  });
+
+  ws.on('message', (data) => {
+    const message = data.toString('utf8');
+
+    if (message.startsWith('{')) {
+      try {
+        const msg = JSON.parse(message);
+        if (msg.type === 'resize') {
+          ptyProcess.resize(msg.cols, msg.rows);
+          return;
+        }
+      } catch (e) {
+        // Not JSON, treat as input
+      }
+    }
+
+    ptyProcess.write(message);
+  });
+
+  ws.on('close', () => {
+    const session = sessions.get(ws);
+    if (session) {
+      session.pty.kill();
+      sessions.delete(ws);
+    }
+  });
+
+  ws.on('error', () => {
+    // Ignore socket errors
+  });
+});
+
+// ============================================================================
+// Startup
+// ============================================================================
+
+function getLocalIPs() {
+  const interfaces = networkInterfaces();
+  const ips = [];
+  for (const name of Object.keys(interfaces)) {
+    for (const iface of interfaces[name] || []) {
+      if (iface.family === 'IPv4' && !iface.internal) {
+        ips.push(iface.address);
+      }
+    }
+  }
+  return ips;
+}
+
+function printBanner(url) {
+  const localIPs = getLocalIPs();
+  console.log('\n' + '═'.repeat(50));
+  console.log('  👻 ghosttown');
+  console.log('═'.repeat(50));
+  console.log(`\n  Open: ${url}`);
+  if (localIPs.length > 0) {
+    console.log(`  Network:`);
+    for (const ip of localIPs) {
+      console.log(`    http://${ip}:${HTTP_PORT}`);
+    }
+  }
+  console.log(`\n  Shell: ${getShell()}`);
+  console.log(`  Home: ${homedir()}`);
+  console.log('\n  Warning: This server provides shell access.');
+  console.log('  Only use for local development.\n');
+  console.log('═'.repeat(50));
+  console.log('  Press Ctrl+C to stop.\n');
+}
+
+process.on('SIGINT', () => {
+  console.log('\n\nShutting down...');
+  for (const [ws, session] of sessions.entries()) {
+    session.pty.kill();
+    ws.close();
+  }
+  wss.close();
+  process.exit(0);
+});
+
+httpServer.listen(HTTP_PORT, '0.0.0.0', () => {
+  printBanner(`http://localhost:${HTTP_PORT}`);
+});

package/dist/__vite-browser-external-2447137e.js

@@ -0,0 +1,4 @@
+const e = {};
+export {
+  e as default
+};