npm - @seflless/ghosttown - Versions diffs - 1.0.3 → 1.1.0 - Mend

@seflless/ghosttown 1.0.3 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/bin/ghosttown.js +305 -125
package/package.json +1 -1

package/bin/ghosttown.js CHANGED Viewed

@@ -4,7 +4,19 @@
  * ghosttown CLI - Web-based terminal emulator
  *
  * Starts a local HTTP server with WebSocket PTY support.
- * Run with: npx @seflless/ghosttown
+ *
+ * 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';
@@ -21,7 +33,54 @@ import { WebSocketServer } from 'ws';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const HTTP_PORT = process.env.PORT || 8080;
+// ============================================================================
+// 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
@@ -58,41 +117,64 @@ const HTML_TEMPLATE = `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 40px 20px;
+        background: #292c34;
+        padding: 8px 8px 14px 8px;
+        box-sizing: border-box;
+        position: fixed;
+        inset: 0;
+        height: var(--vvh);
       }
       .terminal-window {
         width: 100%;
-        max-width: 1000px;
-        background: #1e1e1e;
-        border-radius: 12px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        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: #2d2d2d;
-        padding: 12px 16px;
+        background: #292c34;
+        padding: 8px 16px 6px 10px;
         display: flex;
         align-items: center;
         gap: 12px;
-        border-bottom: 1px solid #1a1a1a;
       }
       .traffic-lights {
@@ -115,6 +197,20 @@ const HTML_TEMPLATE = `<!doctype html>
         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 {
@@ -126,38 +222,28 @@ const HTML_TEMPLATE = `<!doctype html>
         gap: 6px;
       }
-      .status-dot {
-        width: 8px;
-        height: 8px;
+      .connection-dot {
+        width: 6px;
+        height: 6px;
         border-radius: 50%;
-        background: #888;
+        background: #666;
       }
-      .status-dot.connected { background: #27c93f; }
-      .status-dot.disconnected { background: #ff5f56; }
-      .status-dot.connecting { background: #ffbd2e; animation: pulse 1s infinite; }
+      .connection-dot.connected { background: #27c93f; }
-      @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-      .terminal-content {
-        height: 600px;
-        padding: 16px;
-        background: #1e1e1e;
+      #terminal-container {
+        flex: 1;
+        padding: 2px 0 2px 2px;
+        background: #292c34;
         position: relative;
         overflow: hidden;
+        min-height: 0;
+        touch-action: none;
       }
-      .terminal-content canvas {
+      #terminal-container canvas {
         display: block;
-      }
-      @media (max-width: 768px) {
-        .terminal-content {
-          height: 500px;
-        }
+        touch-action: none;
       }
     </style>
   </head>
@@ -165,120 +251,214 @@ const HTML_TEMPLATE = `<!doctype html>
     <div class="terminal-window">
       <div class="title-bar">
         <div class="traffic-lights">
-          <div class="light red"></div>
-          <div class="light yellow"></div>
-          <div class="light green"></div>
+          <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>
-        <span class="title">ghosttown</span>
         <div class="connection-status">
-          <div class="status-dot connecting" id="status-dot"></div>
-          <span id="status-text">Connecting...</span>
+          <span class="connection-dot" id="connection-dot"></span>
+          <span id="connection-text">Disconnected</span>
         </div>
       </div>
-      <div class="terminal-content" id="terminal"></div>
+      <div id="terminal-container"></div>
     </div>
     <script type="module">
       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();
-      term.loadAddon(fitAddon);
-      const container = document.getElementById('terminal');
-      await term.open(container);
-      fitAddon.fit();
-      fitAddon.observeResize();
-      const statusDot = document.getElementById('status-dot');
-      const statusText = document.getElementById('status-text');
-      function setStatus(status, text) {
-        statusDot.className = 'status-dot ' + status;
-        statusText.textContent = text;
+      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();
       }
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows;
-      let ws;
+      function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows;
-      function connect() {
-        setStatus('connecting', 'Connecting...');
         ws = new WebSocket(wsUrl);
         ws.onopen = () => {
-          setStatus('connected', 'Connected');
+          updateConnectionStatus(true);
         };
         ws.onmessage = (event) => {
           term.write(event.data);
         };
-        ws.onclose = () => {
-          setStatus('disconnected', 'Disconnected');
-          term.write('\\r\\n\\x1b[31mConnection closed. Reconnecting in 2s...\\x1b[0m\\r\\n');
-          setTimeout(connect, 2000);
+        ws.onerror = () => {
+          updateConnectionStatus(false);
         };
-        ws.onerror = () => {
-          setStatus('disconnected', 'Error');
+        ws.onclose = () => {
+          updateConnectionStatus(false);
+          setTimeout(() => {
+            if (!ws || ws.readyState === WebSocket.CLOSED) {
+              connectWebSocket();
+            }
+          }, 3000);
         };
       }
-      connect();
-      term.onData((data) => {
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(data);
+      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';
         }
-      });
-      term.onResize(({ cols, rows }) => {
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'resize', cols, rows }));
-        }
-      });
-      window.addEventListener('resize', () => {
-        fitAddon.fit();
-      });
-      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();
-        });
       }
+      initTerminal();
     </script>
   </body>
 </html>`;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@seflless/ghosttown",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Web-based terminal emulator using Ghostty's VT100 parser via WebAssembly",
   "type": "module",
   "main": "./dist/ghostty-web.umd.cjs",