termbeam 1.2.3 → 1.2.5

package/README.md

@@ -15,6 +15,16 @@ I built this because I kept needing to run quick commands on my dev machine whil
 
 https://github.com/user-attachments/assets/9dd4f3d7-f017-4314-9b3a-f6a5688e3671
 
+### Mobile UI
+
+<table align="center">
+  <tr>
+    <td align="center"><img src="docs/assets/screenshots/mobile-session-hub.jpeg" alt="Session hub on mobile" width="250" /></td>
+    <td align="center"><img src="docs/assets/screenshots/mobile-session-preview.jpeg" alt="Session preview on mobile" width="250" /></td>
+    <td align="center"><img src="docs/assets/screenshots/mobile-terminal.jpeg" alt="Terminal on mobile" width="250" /></td>
+  </tr>
+</table>
+
 ## Quick Start
 
 ```bash
@@ -102,9 +112,10 @@ termbeam --host 127.0.0.1        # restrict to localhost (default: 0.0.0.0)
 | `--password <pw>`     | Set access password (also accepts `--password=<pw>`) | Auto-generated |
 | `--no-password`       | Disable password                                     | —              |
 | `--generate-password` | Auto-generate a secure password                      | On             |
-| `--tunnel`            | Create an ephemeral devtunnel URL                    | On             |
+| `--tunnel`            | Create an ephemeral devtunnel URL (private)          | On             |
 | `--no-tunnel`         | Disable tunnel (LAN-only)                            | —              |
 | `--persisted-tunnel`  | Create a reusable devtunnel URL                      | Off            |
+| `--public`            | Allow public tunnel access                           | Off            |
 | `--port <port>`       | Server port                                          | `3456`         |
 | `--host <addr>`       | Bind address                                         | `0.0.0.0`      |
 | `--log-level <level>` | Log verbosity (error/warn/info/debug)                | `info`         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
   "main": "src/server.js",
   "bin": {
@@ -9,8 +9,8 @@
   "scripts": {
     "start": "node bin/termbeam.js",
     "dev": "node bin/termbeam.js --generate-password",
-    "test": "node -e \"require('child_process').execFileSync(process.execPath,['--test',...require('fs').readdirSync('test').filter(f=>f.endsWith('.test.js')).map(f=>'test/'+f)],{stdio:'inherit'})\"",
-    "test:coverage": "c8 --exclude=src/tunnel.js --reporter=text --reporter=lcov --reporter=json-summary --reporter=json node -e \"require('child_process').execFileSync(process.execPath,['--test','--test-reporter=spec','--test-reporter-destination=stdout',...require('fs').readdirSync('test').filter(f=>f.endsWith('.test.js')).map(f=>'test/'+f)],{stdio:'inherit'})\"",
+    "test": "node -e \"require('child_process').execFileSync(process.execPath,['--test',...require('fs').readdirSync('test').filter(f=>f.endsWith('.test.js')&&!f.startsWith('e2e-')).map(f=>'test/'+f)],{stdio:'inherit'})\"",
+    "test:coverage": "c8 --exclude=src/tunnel.js --reporter=text --reporter=lcov --reporter=json-summary --reporter=json node -e \"require('child_process').execFileSync(process.execPath,['--test','--test-reporter=spec','--test-reporter-destination=stdout',...require('fs').readdirSync('test').filter(f=>f.endsWith('.test.js')&&!f.startsWith('e2e-')).map(f=>'test/'+f)],{stdio:'inherit'})\"",
     "prepare": "husky",
     "format": "prettier --write .",
     "lint": "node --check src/*.js bin/*.js",
@@ -73,6 +73,7 @@
     "ws": "^8.19.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "c8": "^11.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",

package/public/sw.js

@@ -2,17 +2,17 @@ const CACHE_NAME = 'termbeam-v5';
 const SHELL_URLS = ['/', '/terminal'];
 
 self.addEventListener('install', (event) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
-  );
+  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)))
-    )
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))),
+      ),
   );
   self.clients.claim();
 });
@@ -21,11 +21,7 @@ self.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url);
 
   // Don't cache WebSocket upgrades
-  if (
-    event.request.mode === 'websocket' ||
-    url.protocol === 'ws:' ||
-    url.protocol === 'wss:'
-  ) {
+  if (event.request.mode === 'websocket' || url.protocol === 'ws:' || url.protocol === 'wss:') {
     return;
   }
 
@@ -42,7 +38,7 @@ self.addEventListener('fetch', (event) => {
             }
             return response;
           });
-        })
+        }),
       );
     }
     return;
@@ -50,37 +46,43 @@ self.addEventListener('fetch', (event) => {
 
   // Network-first for API calls
   if (url.pathname.startsWith('/api/')) {
-    event.respondWith(
-      fetch(event.request).catch(() => caches.match(event.request))
-    );
+    event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
     return;
   }
 
   // Network-first for HTML pages (always get latest code)
-  if (event.request.mode === 'navigate' || event.request.headers.get('accept')?.includes('text/html')) {
+  if (
+    event.request.mode === 'navigate' ||
+    event.request.headers.get('accept')?.includes('text/html')
+  ) {
     event.respondWith(
-      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;
-      }).catch(() => caches.match(event.request))
+      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;
+        })
+        .catch(() => caches.match(event.request)),
     );
     return;
   }
 
   // Cache-first for static assets (JS, CSS, images)
   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;
-      });
-    }).catch(() => new Response('Offline', { status: 503, statusText: 'Service Unavailable' }))
+    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;
+        });
+      })
+      .catch(() => new Response('Offline', { status: 503, statusText: 'Service Unavailable' })),
   );
 });

package/public/terminal.html

@@ -591,6 +591,34 @@
         touch-action: none;
       }
 
+      /* ===== Scroll-to-bottom indicator ===== */
+      .scroll-bottom-btn {
+        display: none;
+        position: absolute;
+        bottom: 8px;
+        right: 16px;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: var(--accent);
+        color: #fff;
+        border: none;
+        font-size: 18px;
+        line-height: 36px;
+        text-align: center;
+        cursor: pointer;
+        z-index: 50;
+        opacity: 0.85;
+        transition: opacity 0.15s;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      }
+      .scroll-bottom-btn:hover {
+        opacity: 1;
+      }
+      .scroll-bottom-btn.visible {
+        display: block;
+      }
+
       /* ===== Toasts & Overlays ===== */
       #copy-toast {
         position: fixed;
@@ -2119,6 +2147,7 @@
             document.documentElement.scrollTop = 0;
             document.body.scrollTop = 0;
           }
+          let wasKeyboardOpen = false;
           function onViewportResize() {
             const vv = window.visualViewport;
             const keyboardHeight = window.innerHeight - vv.height;
@@ -2134,11 +2163,22 @@
               keyBar.style.paddingBottom = '';
               terminalsWrapper.style.bottom = '';
             }
+            const keyboardJustClosed = wasKeyboardOpen && !keyboardOpen;
+            wasKeyboardOpen = keyboardOpen;
             resetScroll();
             clearTimeout(vpResizeTimer);
             vpResizeTimer = setTimeout(() => {
               resetScroll();
               doResize();
+              // When keyboard closes, the terminal grows taller — scroll to
+              // bottom so the cursor stays visible instead of appearing offset.
+              if (keyboardJustClosed) {
+                for (const [, ms] of managed) {
+                  if (ms.container.classList.contains('visible')) {
+                    ms.term.scrollToBottom();
+                  }
+                }
+              }
             }, 150);
           }
           function onViewportScroll() {
@@ -2228,6 +2268,7 @@
           theme: getTheme() === 'light' ? lightTermTheme : darkTermTheme,
           allowProposedApi: true,
           scrollback: 10000,
+          scrollOnOutput: false,
         });
 
         const fitAddon = new window.FitAddon.FitAddon();
@@ -2237,9 +2278,44 @@
 
         const container = document.createElement('div');
         container.className = 'terminal-pane';
+        container.style.position = 'relative';
         terminalsWrapper.appendChild(container);
         term.open(container);
 
+        // Scroll-to-bottom button
+        const scrollBtn = document.createElement('button');
+        scrollBtn.className = 'scroll-bottom-btn';
+        scrollBtn.textContent = '↓';
+        scrollBtn.title = 'Scroll to bottom';
+        scrollBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          term.scrollToBottom();
+        });
+        container.appendChild(scrollBtn);
+
+        // Write coalescer — batch rapid term.write() calls into one per frame
+        // so ANSI cursor-up/down pairs within a frame are processed atomically
+        let writeBuf = '';
+        let writeRaf = null;
+        function coalescedWrite(data) {
+          writeBuf += data;
+          if (!writeRaf) {
+            writeRaf = requestAnimationFrame(() => {
+              term.write(writeBuf);
+              writeBuf = '';
+              writeRaf = null;
+            });
+          }
+        }
+
+        // Track whether user has scrolled away from bottom
+        let userScrolledUp = false;
+        term.onScroll(() => {
+          const buf = term.buffer.active;
+          userScrolledUp = buf.viewportY < buf.baseY;
+          scrollBtn.classList.toggle('visible', userScrolledUp);
+        });
+
         // Pointer-event scroll handler — uses setPointerCapture so scrolling
         // survives xterm DOM re-renders under the finger (touch on a letter).
         (function () {
@@ -2349,6 +2425,8 @@
           term,
           fitAddon,
           container,
+          coalescedWrite,
+          scrollBtn,
           ws: null,
           exited: false,
           reconnectTimer: null,
@@ -2361,6 +2439,10 @@
         // Terminal input → WebSocket
         term.onData((input) => {
           if (ms.ws && ms.ws.readyState === 1) {
+            // Auto-scroll to bottom on user input
+            if (userScrolledUp) {
+              ms.term.scrollToBottom();
+            }
             let data = input;
             if (ctrlActive && input.length === 1) {
               const code = input.toLowerCase().charCodeAt(0);
@@ -2412,7 +2494,7 @@
           try {
             const msg = JSON.parse(event.data);
             if (msg.type === 'output') {
-              ms.term.write(msg.data);
+              ms.coalescedWrite(msg.data);
               ms.lastActivity = Date.now();
             } else if (msg.type === 'attached') {
               if (ms.container.classList.contains('visible')) {
@@ -2448,7 +2530,7 @@
               }
             }
           } catch {
-            ms.term.write(event.data);
+            ms.coalescedWrite(event.data);
           }
         };
 

package/src/cli.js

@@ -15,9 +15,10 @@ Options:
   --password <pw>       Set access password (or TERMBEAM_PASSWORD env var)
   --generate-password   Auto-generate a secure password (default: auto)
   --no-password         Disable password authentication
-  --tunnel              Create a public devtunnel URL (default: on)
+  --tunnel              Create a devtunnel URL (default: on, private access)
   --no-tunnel           Disable tunnel (LAN-only mode)
   --persisted-tunnel    Create a reusable devtunnel URL (stable across restarts)
+  --public              Allow public tunnel access (default: private, owner-only)
   --port <port>         Set port (default: 3456, or PORT env var)
   --host <addr>         Bind address (default: 0.0.0.0)
   --log-level <level>   Set log verbosity: error, warn, info, debug (default: info)
@@ -26,7 +27,9 @@ Options:
 
 Defaults:
   By default, TermBeam enables tunnel + auto-generated password for secure
-  mobile access (clipboard, HTTPS). Use --no-tunnel for LAN-only mode.
+  mobile access (clipboard, HTTPS). Tunnels are private (owner-only via
+  Microsoft login). Use --public for public access, or
+  --no-tunnel for LAN-only mode.
 
 Examples:
   termbeam                          Start with tunnel + auto password
@@ -227,6 +230,7 @@ function parseArgs() {
   let useTunnel = true;
   let noTunnel = false;
   let persistedTunnel = false;
+  let anonymousTunnel = false;
   let explicitPassword = !!password;
 
   const args = process.argv.slice(2);
@@ -243,6 +247,8 @@ function parseArgs() {
     } else if (args[i] === '--persisted-tunnel') {
       useTunnel = true;
       persistedTunnel = true;
+    } else if (args[i] === '--public') {
+      anonymousTunnel = true;
     } else if (args[i].startsWith('--password=')) {
       password = args[i].split('=')[1];
       explicitPassword = true;
@@ -278,6 +284,12 @@ function parseArgs() {
   // --no-tunnel disables the default tunnel
   if (noTunnel) useTunnel = false;
 
+  // --public requires a tunnel
+  if (anonymousTunnel && !useTunnel) {
+    console.error('Error: --public requires a tunnel. Remove --no-tunnel or remove --public.');
+    process.exit(1);
+  }
+
   const shell = filteredArgs[0] || defaultShell;
   const shellArgs = filteredArgs.slice(1);
 
@@ -290,6 +302,7 @@ function parseArgs() {
     password,
     useTunnel,
     persistedTunnel,
+    anonymousTunnel,
     shell,
     shellArgs,
     cwd,

package/src/logger.js

@@ -13,10 +13,11 @@ const log = {
     if (l !== undefined) currentLevel = l;
   },
   getLevel() {
-    return Object.keys(LEVELS).find(k => LEVELS[k] === currentLevel);
+    return Object.keys(LEVELS).find((k) => LEVELS[k] === currentLevel);
   },
   error(...args) {
-    if (currentLevel >= LEVELS.error) console.error(`[${timestamp()}]`, `[${LABELS.error}]`, ...args);
+    if (currentLevel >= LEVELS.error)
+      console.error(`[${timestamp()}]`, `[${LABELS.error}]`, ...args);
   },
   warn(...args) {
     if (currentLevel >= LEVELS.warn) console.warn(`[${timestamp()}]`, `[${LABELS.warn}]`, ...args);

package/src/server.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 const os = require('os');
 const path = require('path');
+const readline = require('readline');
 const express = require('express');
 const cookieParser = require('cookie-parser');
 const http = require('http');
@@ -26,6 +27,16 @@ function getLocalIP() {
   return '127.0.0.1';
 }
 
+function confirmAnonymousTunnel() {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question('  Do you want to continue with anonymous access? (y/N): ', (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase() === 'y');
+    });
+  });
+}
+
 /**
  * Create a TermBeam server instance without starting it.
  * @param {object} [overrides] - Optional overrides
@@ -53,7 +64,7 @@ function createTermBeamServer(overrides = {}) {
     res.setHeader('Cache-Control', 'no-store');
     res.setHeader(
       'Content-Security-Policy',
-      "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; connect-src 'self' ws: wss: https://cdn.jsdelivr.net; font-src 'self' https://cdn.jsdelivr.net",
+      "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data:; connect-src 'self' ws: wss: https://cdn.jsdelivr.net; font-src 'self' https://cdn.jsdelivr.net",
     );
     next();
   });
@@ -78,7 +89,7 @@ function createTermBeamServer(overrides = {}) {
     wss.close();
   }
 
-  function start() {
+  async function start() {
     // Fail early if tunnel mode is on but devtunnel CLI is not installed
     if (config.useTunnel && !findDevtunnel()) {
       log.error('❌ devtunnel CLI is not installed.');
@@ -102,6 +113,28 @@ function createTermBeamServer(overrides = {}) {
       process.exit(1);
     }
 
+    // Warn and require consent for anonymous tunnel access
+    if (config.useTunnel && config.anonymousTunnel) {
+      const rd = '\x1b[31m';
+      const yl = '\x1b[33m';
+      const rs = '\x1b[0m';
+      const bd = '\x1b[1m';
+      console.log('');
+      console.log(`  ${rd}${bd}⚠️  DANGER: Public tunnel access requested${rs}`);
+      console.log('');
+      console.log(`  ${yl}This will make your terminal accessible to ANYONE with the URL.${rs}`);
+      console.log(`  ${yl}No Microsoft login will be required to reach the tunnel.${rs}`);
+      console.log(`  ${yl}Only the TermBeam password will protect your terminal.${rs}`);
+      console.log('');
+      const confirmed = await confirmAnonymousTunnel();
+      if (!confirmed) {
+        console.log('');
+        console.log('  Aborted. Restart without --public for private access.');
+        console.log('');
+        process.exit(1);
+      }
+    }
+
     return new Promise((resolve) => {
       server.listen(config.port, config.host, async () => {
         const ip = getLocalIP();
@@ -146,7 +179,10 @@ function createTermBeamServer(overrides = {}) {
 
         let publicUrl = null;
         if (config.useTunnel) {
-          const tunnel = await startTunnel(config.port, { persisted: config.persistedTunnel });
+          const tunnel = await startTunnel(config.port, {
+            persisted: config.persistedTunnel,
+            anonymous: config.anonymousTunnel,
+          });
           if (tunnel) {
             publicUrl = tunnel.url;
             state.shareBaseUrl = publicUrl;

package/src/sessions.js

@@ -3,8 +3,14 @@ const pty = require('node-pty');
 const log = require('./logger');
 
 const SESSION_COLORS = [
-  '#4a9eff', '#4ade80', '#fbbf24', '#c084fc',
-  '#f87171', '#22d3ee', '#fb923c', '#f472b6',
+  '#4a9eff',
+  '#4ade80',
+  '#fbbf24',
+  '#c084fc',
+  '#f87171',
+  '#22d3ee',
+  '#fb923c',
+  '#f472b6',
 ];
 
 class SessionManager {

package/src/shells.js

@@ -1,6 +1,6 @@
 const os = require('os');
 const fs = require('fs');
-const { execFileSync } = require('child_process');
+const child_process = require('child_process');
 
 const KNOWN_WINDOWS_SHELLS = [
   { name: 'PowerShell (Core)', cmd: 'pwsh.exe' },
@@ -21,7 +21,7 @@ function detectWindowsShells() {
   const shells = [];
   for (const { name, cmd } of KNOWN_WINDOWS_SHELLS) {
     try {
-      const result = execFileSync('where', [cmd], {
+      const result = child_process.execFileSync('where', [cmd], {
         stdio: ['pipe', 'pipe', 'ignore'],
         encoding: 'utf8',
         timeout: 3000,

package/src/tunnel.js

@@ -186,13 +186,25 @@ async function startTunnel(port, options = {}) {
         { stdio: 'pipe' },
       );
     } catch {}
-    try {
-      execFileSync(
-        devtunnelCmd,
-        ['access', 'create', tunnelId, '-p', String(port), '--anonymous'],
-        { stdio: 'pipe' },
-      );
-    } catch {}
+    // Set tunnel access: public (anonymous) or private (owner-only via Microsoft login)
+    if (options.anonymous) {
+      try {
+        execFileSync(
+          devtunnelCmd,
+          ['access', 'create', tunnelId, '-p', String(port), '--anonymous'],
+          { stdio: 'pipe' },
+        );
+      } catch {}
+      log.info('Tunnel access: public (anonymous)');
+    } else {
+      // Remove any existing anonymous access to ensure the tunnel is private
+      try {
+        execFileSync(devtunnelCmd, ['access', 'reset', tunnelId], {
+          stdio: 'pipe',
+        });
+      } catch {}
+      log.info('Tunnel access: private (owner-only via Microsoft login)');
+    }
 
     const hostProc = spawn(devtunnelCmd, ['host', tunnelId], {
       stdio: ['pipe', 'pipe', 'pipe'],