termbeam 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
   "main": "src/server.js",
   "bin": {

package/public/icons/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="80" fill="#1e1e1e"/>
+  <rect x="32" y="32" width="448" height="448" rx="56" fill="#252526" stroke="#3c3c3c" stroke-width="4"/>
+  <polyline points="140,200 220,260 140,320" fill="none" stroke="#0078d4" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="260" y1="320" x2="380" y2="320" stroke="#d4d4d4" stroke-width="28" stroke-linecap="round"/>
+</svg>

package/public/index.html

@@ -9,6 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#1e1e1e" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>TermBeam</title>
     <style>
       :root {
@@ -941,6 +943,10 @@
 
       loadSessions();
       setInterval(loadSessions, 3000);
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {});
+      }
     </script>
   </body>
 </html>

package/public/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "TermBeam",
+  "short_name": "TermBeam",
+  "description": "Beam your terminal to any device",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1e1e1e",
+  "theme_color": "#1e1e1e",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ]
+}

package/public/sw.js

@@ -0,0 +1,54 @@
+const CACHE_NAME = 'termbeam-v1';
+const SHELL_URLS = ['/', '/terminal'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // Don't cache WebSocket upgrades or external resources
+  if (
+    event.request.mode === 'websocket' ||
+    url.protocol === 'ws:' ||
+    url.protocol === 'wss:' ||
+    url.origin !== self.location.origin
+  ) {
+    return;
+  }
+
+  // Network-first for API calls
+  if (url.pathname.startsWith('/api/')) {
+    event.respondWith(
+      fetch(event.request).catch(() => caches.match(event.request))
+    );
+    return;
+  }
+
+  // Cache-first for static assets
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      if (cached) return cached;
+      return fetch(event.request).then((response) => {
+        if (response.ok) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        }
+        return response;
+      });
+    })
+  );
+});

package/public/terminal.html

@@ -9,6 +9,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#1e1e1e" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>TermBeam — Terminal</title>
     <link
       rel="stylesheet"
@@ -283,6 +285,64 @@
         overflow-y: hidden !important;
       }
 
+      #copy-toast {
+        position: fixed;
+        top: 56px;
+        left: 50%;
+        transform: translateX(-50%) translateY(-8px);
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+        padding: 6px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s, transform 0.2s;
+        z-index: 200;
+      }
+      #copy-toast.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      #paste-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--overlay-bg);
+        z-index: 150;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+      }
+      #paste-overlay.visible {
+        display: flex;
+      }
+      #paste-overlay label {
+        font-size: 15px;
+        color: #ffffff;
+        font-weight: 600;
+      }
+      #paste-input {
+        width: 80%;
+        max-width: 400px;
+        min-height: 80px;
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 10px;
+        font-size: 14px;
+        font-family: 'NerdFont', 'JetBrains Mono', monospace;
+        resize: vertical;
+      }
+
       #reconnect-overlay {
         display: none;
         position: fixed;
@@ -357,6 +417,7 @@
     </div>
 
     <div id="terminal-container"></div>
+    <div id="copy-toast">Copied!</div>
 
     <div id="key-bar">
       <button class="key-btn" data-key="&#x1b;[A" title="Previous command">↑<span class="hint">prev</span></button>
@@ -366,6 +427,8 @@
       <button class="key-btn" data-key="&#x1b;[H" title="Home">Home</button>
       <button class="key-btn" data-key="&#x1b;[F" title="End">End</button>
       <div class="key-sep"></div>
+      <button class="key-btn" id="paste-btn" title="Paste from clipboard">Paste</button>
+      <div class="key-sep"></div>
       <button class="key-btn wide" data-key="&#x09;" title="Autocomplete">Tab</button>
       <div class="key-sep"></div>
       <button class="key-btn" data-key="&#x03;" title="Interrupt process">^C<span class="hint">stop</span></button>
@@ -379,6 +442,15 @@
       </div>
     </div>
 
+    <div id="paste-overlay">
+      <label for="paste-input">Paste your text below</label>
+      <textarea id="paste-input" placeholder="Long-press here and paste…"></textarea>
+      <div class="overlay-actions">
+        <button id="paste-cancel" style="background: rgba(255,255,255,0.15); color: #ffffff;">Cancel</button>
+        <button id="paste-send" style="background: var(--accent); color: #ffffff;">Send</button>
+      </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
@@ -573,7 +645,7 @@
           .addEventListener('touchstart', () => {}, { passive: true });
         document.getElementById('key-bar').addEventListener('click', (e) => {
           const btn = e.target.closest('.key-btn');
-          if (!btn) return;
+          if (!btn || !btn.dataset.key) return;
           if (ws && ws.readyState === 1) {
             ws.send(JSON.stringify({ type: 'input', data: btn.dataset.key }));
           }
@@ -592,6 +664,66 @@
         document.getElementById('zoom-in').addEventListener('click', () => applyZoom(fontSize + 2));
         document.getElementById('zoom-out').addEventListener('click', () => applyZoom(fontSize - 2));
 
+        // Clipboard: copy on selection
+        function showToast(msg) {
+          const toast = document.getElementById('copy-toast');
+          toast.textContent = msg;
+          toast.classList.add('visible');
+          clearTimeout(toast._timer);
+          toast._timer = setTimeout(() => toast.classList.remove('visible'), 1500);
+        }
+
+        term.onSelectionChange(() => {
+          const sel = term.getSelection();
+          if (sel && navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(sel).then(() => {
+              showToast('Copied!');
+            }).catch(() => {});
+          }
+        });
+
+        // Clipboard: paste button
+        const pasteOverlay = document.getElementById('paste-overlay');
+        const pasteInput = document.getElementById('paste-input');
+
+        function openPasteModal() {
+          pasteInput.value = '';
+          pasteOverlay.classList.add('visible');
+          pasteInput.focus();
+        }
+
+        function closePasteModal() {
+          pasteOverlay.classList.remove('visible');
+          pasteInput.value = '';
+        }
+
+        document.getElementById('paste-btn').addEventListener('mousedown', (e) => {
+          e.preventDefault();
+        });
+        document.getElementById('paste-btn').addEventListener('click', () => {
+          if (navigator.clipboard && navigator.clipboard.readText) {
+            navigator.clipboard.readText().then((text) => {
+              if (text && ws && ws.readyState === 1) {
+                ws.send(JSON.stringify({ type: 'input', data: text }));
+                showToast('Pasted!');
+              }
+            }).catch(() => {
+              openPasteModal();
+            });
+          } else {
+            openPasteModal();
+          }
+        });
+
+        document.getElementById('paste-send').addEventListener('click', () => {
+          const text = pasteInput.value;
+          if (text && ws && ws.readyState === 1) {
+            ws.send(JSON.stringify({ type: 'input', data: text }));
+          }
+          closePasteModal();
+        });
+        document.getElementById('paste-cancel').addEventListener('click', closePasteModal);
+
         function scheduleReconnect() {
           if (reconnectTimer) clearTimeout(reconnectTimer);
           const seconds = Math.round(reconnectDelay / 1000);
@@ -671,6 +803,10 @@
 
         connect();
       }
+
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {});
+      }
     </script>
   </body>
 </html>

package/src/cli.js

@@ -12,7 +12,8 @@ Usage:
 Options:
   --password <pw>       Set access password (or TERMBEAM_PASSWORD env var)
   --generate-password   Auto-generate a secure password
-  --tunnel              Create a public devtunnel URL
+  --tunnel              Create a public devtunnel URL (ephemeral)
+  --persisted-tunnel    Create a reusable devtunnel URL (stable across restarts)
   --port <port>         Set port (default: 3456, or PORT env var)
   --host <addr>         Bind address (default: 0.0.0.0)
   -h, --help            Show this help
@@ -90,6 +91,7 @@ function parseArgs() {
   const cwd = process.env.TERMBEAM_CWD || process.env.PTY_CWD || process.cwd();
   let password = process.env.TERMBEAM_PASSWORD || process.env.PTY_PASSWORD || null;
   let useTunnel = false;
+  let persistedTunnel = false;
 
   const args = process.argv.slice(2);
   const filteredArgs = [];
@@ -99,6 +101,9 @@ function parseArgs() {
       password = args[++i];
     } else if (args[i] === '--tunnel') {
       useTunnel = true;
+    } else if (args[i] === '--persisted-tunnel') {
+      useTunnel = true;
+      persistedTunnel = true;
     } else if (args[i].startsWith('--password=')) {
       password = args[i].split('=')[1];
     } else if (args[i] === '--help' || args[i] === '-h') {
@@ -126,7 +131,7 @@ function parseArgs() {
   const { getVersion } = require('./version');
   const version = getVersion();
 
-  return { port, host, password, useTunnel, shell, shellArgs, cwd, defaultShell, version };
+  return { port, host, password, useTunnel, persistedTunnel, shell, shellArgs, cwd, defaultShell, version };
 }
 
 module.exports = { parseArgs, printHelp };

package/src/routes.js

@@ -1,11 +1,15 @@
 const path = require('path');
 const os = require('os');
 const fs = require('fs');
+const express = require('express');
 const { detectShells } = require('./shells');
 
 const PUBLIC_DIR = path.join(__dirname, '..', 'public');
 
 function setupRoutes(app, { auth, sessions, config }) {
+  // Serve static files (manifest.json, sw.js, icons, etc.)
+  app.use(express.static(PUBLIC_DIR, { index: false }));
+
   // Login page
   app.get('/login', (_req, res) => {
     if (!auth.password) return res.redirect('/');

package/src/server.js

@@ -38,11 +38,17 @@ setupRoutes(app, { auth, sessions, config });
 setupWebSocket(wss, { auth, sessions });
 
 // --- Lifecycle ---
+let shuttingDown = false;
 function shutdown() {
+  if (shuttingDown) return;
+  shuttingDown = true;
   console.log('\n[termbeam] Shutting down...');
   sessions.shutdown();
   cleanupTunnel();
-  process.exit(0);
+  server.close();
+  wss.close();
+  // Force exit after giving connections time to close
+  setTimeout(() => process.exit(0), 500).unref();
 }
 
 process.on('SIGINT', shutdown);
@@ -52,7 +58,6 @@ process.on('uncaughtException', (err) => {
   cleanupTunnel();
   process.exit(1);
 });
-process.on('exit', cleanupTunnel);
 
 // --- Start ---
 function getLocalIP() {
@@ -112,10 +117,12 @@ server.listen(config.port, config.host, async () => {
 
   let publicUrl = null;
   if (config.useTunnel) {
-    publicUrl = await startTunnel(config.port);
-    if (publicUrl) {
+    const tunnel = await startTunnel(config.port, { persisted: config.persistedTunnel });
+    if (tunnel) {
+      publicUrl = tunnel.url;
       console.log('');
       console.log(`  🌐 Public:  ${publicUrl}`);
+      console.log(`  Tunnel:   ${tunnel.mode} (expires in ${tunnel.expiry})`);
     } else {
       console.log('');
       console.log('  ⚠️  Tunnel failed to start. Using LAN only.');

package/src/tunnel.js

@@ -1,6 +1,10 @@
 const { execSync, spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
+const os = require('os');
+
+const TUNNEL_CONFIG_DIR = path.join(os.homedir(), '.termbeam');
+const TUNNEL_CONFIG_PATH = path.join(TUNNEL_CONFIG_DIR, 'tunnel.json');
 
 let tunnelId = null;
 let tunnelProc = null;
@@ -29,7 +33,45 @@ function findDevtunnel() {
   return null;
 }
 
-async function startTunnel(port) {
+function loadPersistedTunnel() {
+  try {
+    if (fs.existsSync(TUNNEL_CONFIG_PATH)) {
+      return JSON.parse(fs.readFileSync(TUNNEL_CONFIG_PATH, 'utf-8'));
+    }
+  } catch {}
+  return null;
+}
+
+function savePersistedTunnel(id) {
+  fs.mkdirSync(TUNNEL_CONFIG_DIR, { recursive: true });
+  fs.writeFileSync(TUNNEL_CONFIG_PATH, JSON.stringify({ tunnelId: id, createdAt: new Date().toISOString() }, null, 2));
+}
+
+function deletePersisted() {
+  const persisted = loadPersistedTunnel();
+  if (persisted) {
+    try {
+      execSync(`"${devtunnelCmd}" delete ${persisted.tunnelId} -f`, { stdio: 'pipe' });
+      console.log(`[termbeam] Deleted persisted tunnel ${persisted.tunnelId}`);
+    } catch {}
+    try {
+      fs.unlinkSync(TUNNEL_CONFIG_PATH);
+    } catch {}
+  }
+}
+
+function isTunnelValid(id) {
+  try {
+    execSync(`"${devtunnelCmd}" show ${id} --json`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+let isPersisted = false;
+
+async function startTunnel(port, options = {}) {
   // Check if devtunnel CLI is installed
   const found = findDevtunnel();
   if (!found) {
@@ -66,16 +108,48 @@ async function startTunnel(port) {
       execSync(`"${devtunnelCmd}" user login`, { stdio: 'inherit' });
     }
 
-    const createOut = execSync(`"${devtunnelCmd}" create --expiration 1d --json`, { encoding: 'utf-8' });
-    const tunnelData = JSON.parse(createOut);
-    tunnelId = tunnelData.tunnel.tunnelId;
+    const persisted = options.persisted;
+    isPersisted = !!persisted;
 
-    execSync(`"${devtunnelCmd}" port create ${tunnelId} -p ${port} --protocol http`, { stdio: 'pipe' });
-    execSync(`"${devtunnelCmd}" access create ${tunnelId} -p ${port} --anonymous`, { stdio: 'pipe' });
+    // Try to reuse persisted tunnel
+    let tunnelMode, tunnelExpiry;
+    if (persisted) {
+      tunnelMode = 'persisted';
+      tunnelExpiry = '30 days';
+      const saved = loadPersistedTunnel();
+      if (saved && isTunnelValid(saved.tunnelId)) {
+        tunnelId = saved.tunnelId;
+        console.log(`[termbeam] Reusing persisted tunnel ${tunnelId}`);
+      } else {
+        if (saved) {
+          console.log('[termbeam] Persisted tunnel expired, creating new one');
+        }
+        const createOut = execSync(`"${devtunnelCmd}" create --expiration 30d --json`, { encoding: 'utf-8' });
+        const tunnelData = JSON.parse(createOut);
+        tunnelId = tunnelData.tunnel.tunnelId;
+        savePersistedTunnel(tunnelId);
+        console.log(`[termbeam] Created new persisted tunnel ${tunnelId}`);
+      }
+    } else {
+      tunnelMode = 'ephemeral';
+      tunnelExpiry = '1 day';
+      // Ephemeral tunnel — create fresh, will be deleted on shutdown
+      const createOut = execSync(`"${devtunnelCmd}" create --expiration 1d --json`, { encoding: 'utf-8' });
+      const tunnelData = JSON.parse(createOut);
+      tunnelId = tunnelData.tunnel.tunnelId;
+      console.log(`[termbeam] Created ephemeral tunnel ${tunnelId}`);
+    }
+
+    // Idempotent port and access setup
+    try {
+      execSync(`"${devtunnelCmd}" port create ${tunnelId} -p ${port} --protocol http`, { stdio: 'pipe' });
+    } catch {}
+    try {
+      execSync(`"${devtunnelCmd}" access create ${tunnelId} -p ${port} --anonymous`, { stdio: 'pipe' });
+    } catch {}
 
     const hostProc = spawn(devtunnelCmd, ['host', tunnelId], {
       stdio: ['pipe', 'pipe', 'pipe'],
-      detached: true,
     });
     tunnelProc = hostProc;
 
@@ -88,7 +162,7 @@ async function startTunnel(port) {
         const match = output.match(/(https:\/\/[^\s]+devtunnels\.ms[^\s]*)/);
         if (match) {
           clearTimeout(timeout);
-          resolve(match[1]);
+          resolve({ url: match[1], mode: tunnelMode, expiry: tunnelExpiry });
         }
       });
       hostProc.stderr.on('data', (data) => {
@@ -106,17 +180,35 @@ async function startTunnel(port) {
 }
 
 function cleanupTunnel() {
-  if (tunnelId) {
+  const id = tunnelId;
+  if (tunnelProc) {
     try {
-      if (tunnelProc) tunnelProc.kill();
-      execSync(`"${devtunnelCmd}" delete ${tunnelId} -f`, { stdio: 'pipe' });
-      console.log('[termbeam] Tunnel cleaned up');
+      // On Windows, kill the process tree to ensure all children die
+      if (process.platform === 'win32' && tunnelProc.pid) {
+        try {
+          execSync(`taskkill /pid ${tunnelProc.pid} /T /F`, { stdio: 'pipe', timeout: 5000 });
+        } catch { /* best effort */ }
+      } else {
+        tunnelProc.kill('SIGKILL');
+      }
     } catch {
       /* best effort */
     }
-    tunnelId = null;
     tunnelProc = null;
   }
+  if (id) {
+    tunnelId = null;
+    if (isPersisted) {
+      console.log('[termbeam] Tunnel host stopped (tunnel preserved for reuse)');
+    } else {
+      try {
+        execSync(`"${devtunnelCmd}" delete ${id} -f`, { stdio: 'pipe', timeout: 10000 });
+        console.log('[termbeam] Tunnel cleaned up');
+      } catch {
+        /* best effort — tunnel will expire on its own */
+      }
+    }
+  }
 }
 
 module.exports = { startTunnel, cleanupTunnel };