termbeam 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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/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;
@@ -1245,6 +1273,7 @@
         border-radius: 10px;
         cursor: pointer;
         overflow: hidden;
+        flex-shrink: 0;
         transition:
           background 0.15s,
           border-color 0.15s;
@@ -2118,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;
@@ -2133,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() {
@@ -2227,6 +2268,7 @@
           theme: getTheme() === 'light' ? lightTermTheme : darkTermTheme,
           allowProposedApi: true,
           scrollback: 10000,
+          scrollOnOutput: false,
         });
 
         const fitAddon = new window.FitAddon.FitAddon();
@@ -2236,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 () {
@@ -2348,6 +2425,8 @@
           term,
           fitAddon,
           container,
+          coalescedWrite,
+          scrollBtn,
           ws: null,
           exited: false,
           reconnectTimer: null,
@@ -2360,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);
@@ -2411,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')) {
@@ -2447,7 +2530,7 @@
               }
             }
           } catch {
-            ms.term.write(event.data);
+            ms.coalescedWrite(event.data);
           }
         };
 

package/src/server.js

@@ -53,7 +53,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();
   });

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,