termbeam 1.11.0 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
   "main": "src/server.js",
   "bin": {
@@ -47,7 +47,7 @@
     "url": "https://github.com/dorlugasigal/TermBeam/issues"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "files": [
     "bin/",

package/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'termbeam-v5';
+const CACHE_NAME = 'termbeam-v7';
 const SHELL_URLS = ['/', '/terminal'];
 
 self.addEventListener('install', (event) => {

package/public/terminal.html

@@ -2293,6 +2293,7 @@
     <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>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-canvas@0.7.0/lib/addon-canvas.min.js"></script>
     <script src="/js/shared.js"></script>
     <script src="/js/themes.js"></script>
     <script src="/js/terminal-themes.js"></script>
@@ -2376,6 +2377,9 @@
       const terminalsWrapper = document.getElementById('terminals-wrapper');
 
       // ===== Font Loading (non-blocking) =====
+      // Hook for font-load refit (set inside init, called by font loader)
+      let onFontReady = null;
+
       const nerdFont = new FontFace(
         'NerdFont',
         "url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')",
@@ -2387,6 +2391,10 @@
         })
         .catch(() => {
           console.warn('Nerd Font failed to load, using fallback');
+        })
+        .finally(() => {
+          // Refit all terminals once font metrics are stable
+          if (onFontReady) onFontReady();
         });
 
       // Start immediately — don't wait for font
@@ -2511,6 +2519,7 @@
         setupPreviewModal();
         loadShellsForModal();
         startPolling();
+        setTimeout(requestWakeLock, 0);
 
         // Pinch-to-zoom
         (function setupPinchZoom() {
@@ -2577,9 +2586,22 @@
             }
           }
         }
+        onFontReady = doResize;
         window.addEventListener('resize', doResize);
         screen.orientation?.addEventListener('change', () => setTimeout(doResize, 150));
 
+        // ResizeObserver — catches container size changes that don't trigger window resize
+        if (typeof ResizeObserver !== 'undefined') {
+          let resizeTimer = null;
+          new ResizeObserver(() => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(doResize, 100);
+          }).observe(terminalsWrapper);
+        }
+
+        // Refit after all fonts finish loading (catches bold variant, system fonts)
+        document.fonts.ready.then(() => doResize());
+
         // Mobile soft keyboard
         if (window.visualViewport) {
           const keyBar = document.getElementById('key-bar');
@@ -2639,24 +2661,70 @@
           );
         }
 
-        // Scroll to bottom when returning from idle / tab switch
+        // Wake Lock — helps keep mobile browser tab alive
+        let wakeLock = null;
+
+        async function requestWakeLock() {
+          if (!('wakeLock' in navigator)) return;
+          try {
+            wakeLock = await navigator.wakeLock.request('screen');
+            wakeLock.addEventListener('release', () => {
+              wakeLock = null;
+            });
+          } catch {
+            // Wake Lock request failed (e.g. low battery, not visible)
+          }
+        }
+
+        function releaseWakeLock() {
+          if (wakeLock) {
+            wakeLock.release().catch(() => {});
+            wakeLock = null;
+          }
+        }
+
+        // Reconnect & refit when returning from idle / tab switch
         document.addEventListener('visibilitychange', () => {
-          if (!document.hidden && activeId) {
-            clearUnreadIndicator();
-            const ms = managed.get(activeId);
-            if (ms) {
-              ms.term.scrollToBottom();
-              ms.fitAddon.fit();
-              sendResize(ms);
-            }
-            if (splitMode && splitSecondId) {
-              const ms2 = managed.get(splitSecondId);
-              if (ms2) {
-                ms2.term.scrollToBottom();
-                ms2.fitAddon.fit();
-                sendResize(ms2);
+          if (!document.hidden) {
+            if (activeId) {
+              clearUnreadIndicator();
+              const ms = managed.get(activeId);
+              if (ms) {
+                // Reconnect immediately if WebSocket died in background
+                if (!ms.exited && (!ms.ws || ms.ws.readyState !== WebSocket.OPEN)) {
+                  if (ms.reconnectTimer) {
+                    clearTimeout(ms.reconnectTimer);
+                    ms.reconnectTimer = null;
+                  }
+                  ms.reconnectDelay = 3000;
+                  connectSession(ms);
+                } else {
+                  ms.term.scrollToBottom();
+                  ms.fitAddon.fit();
+                  sendResize(ms);
+                }
+              }
+              if (splitMode && splitSecondId) {
+                const ms2 = managed.get(splitSecondId);
+                if (ms2) {
+                  if (!ms2.exited && (!ms2.ws || ms2.ws.readyState !== WebSocket.OPEN)) {
+                    if (ms2.reconnectTimer) {
+                      clearTimeout(ms2.reconnectTimer);
+                      ms2.reconnectTimer = null;
+                    }
+                    ms2.reconnectDelay = 3000;
+                    connectSession(ms2);
+                  } else {
+                    ms2.term.scrollToBottom();
+                    ms2.fitAddon.fit();
+                    sendResize(ms2);
+                  }
+                }
               }
             }
+            requestWakeLock();
+          } else {
+            releaseWakeLock();
           }
         });
 
@@ -2708,7 +2776,7 @@
           fontWeight: 'normal',
           fontWeightBold: 'bold',
           letterSpacing: 0,
-          lineHeight: 1.1,
+          lineHeight: 1.0,
           theme: TERM_THEMES[getTheme()] || darkTermTheme,
           allowProposedApi: true,
           scrollback: 10000,
@@ -2728,6 +2796,17 @@
         terminalsWrapper.appendChild(container);
         term.open(container);
 
+        // Canvas renderer — sharper text and more accurate selection.
+        // Skip in automated browsers (navigator.webdriver) where canvas
+        // rendering makes .xterm-rows inaccessible to DOM text queries.
+        if (window.CanvasAddon && !navigator.webdriver) {
+          try {
+            term.loadAddon(new window.CanvasAddon.CanvasAddon());
+          } catch {
+            // Fall back to DOM renderer
+          }
+        }
+
         // Scroll-to-bottom button
         const scrollBtn = document.createElement('button');
         scrollBtn.className = 'scroll-bottom-btn';
@@ -2739,17 +2818,28 @@
         });
         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
+        // Write coalescer — batch rapid term.write() calls to reduce flicker.
+        // Single RAF for interactive typing (low latency). During bursts
+        // (>512 bytes buffered, e.g. Ctrl+O expand), waits one extra frame
+        // so cursor-movement sequences arrive as one atomic write.
         let writeBuf = '';
         let writeRaf = null;
+        function flushWrite() {
+          writeRaf = null;
+          if (writeBuf) {
+            term.write(writeBuf);
+            writeBuf = '';
+          }
+        }
         function coalescedWrite(data) {
           writeBuf += data;
           if (!writeRaf) {
             writeRaf = requestAnimationFrame(() => {
-              term.write(writeBuf);
-              writeBuf = '';
-              writeRaf = null;
+              if (writeBuf.length > 512) {
+                writeRaf = requestAnimationFrame(flushWrite);
+              } else {
+                flushWrite();
+              }
             });
           }
         }
@@ -3042,6 +3132,9 @@
           if (ms.id === activeId) {
             statusDot.className = '';
             statusText.textContent = 'Disconnected';
+            reconnectOverlay.querySelector('.msg').textContent =
+              'Disconnected. Attempting to reconnect\u2026';
+            reconnectOverlay.classList.add('visible');
           }
           if (!ms.exited) {
             ms.reconnectTimer = setTimeout(() => {

package/src/server.js

@@ -275,10 +275,15 @@ function createTermBeamServer(overrides = {}) {
         console.log('');
 
         // Non-blocking update check — runs after banner, never delays startup.
-        // Skip under the Node test runner to avoid network requests in tests.
+        // Skip under the Node test runner and CI to avoid network requests in tests.
         // Accept any version containing a semver-like pattern (including dev builds).
         const versionParts = config.version.match(/(\d{1,10})\.(\d{1,10})\.(\d{1,10})/);
-        if (versionParts && !process.env.NODE_TEST_CONTEXT && !process.argv.includes('--test')) {
+        if (
+          versionParts &&
+          !process.env.NODE_TEST_CONTEXT &&
+          !process.env.CI &&
+          !process.argv.includes('--test')
+        ) {
           const installInfo = detectInstallMethod();
           checkForUpdate({ currentVersion: config.version })
             .then((info) => {

package/src/sessions.js

@@ -144,9 +144,15 @@ class SessionManager {
     ptyProcess.onData((data) => {
       session.lastActivity = Date.now();
       session.scrollbackBuf += data;
-      // Cap scrollback at ~200KB
-      if (session.scrollbackBuf.length > 200000) {
-        session.scrollbackBuf = session.scrollbackBuf.slice(-100000);
+      // High/low water scrollback cap: trim to 500k chars when buffer exceeds 1,000,000 chars
+      if (session.scrollbackBuf.length > 1000000) {
+        let buf = session.scrollbackBuf.slice(-500000);
+        // Advance to first newline to avoid starting mid-line
+        const nlIdx = buf.indexOf('\n');
+        if (nlIdx > 0 && nlIdx < 200) {
+          buf = buf.slice(nlIdx + 1);
+        }
+        session.scrollbackBuf = buf;
       }
       for (const ws of session.clients) {
         if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'output', data }));

package/src/version.js

@@ -10,17 +10,35 @@ function getVersion() {
     return base;
   }
 
-  // Running from source — try git describe for a dev version
+  // Running from source — git tags are the version source of truth.
+  // This avoids drift between package.json and tagged releases.
   try {
     const gitDesc = execSync('git describe --tags --always --dirty', {
       cwd: path.join(__dirname, '..'),
       encoding: 'utf-8',
       stdio: ['pipe', 'pipe', 'pipe'],
     }).trim();
-    // If we have a tag like v1.0.0, and we're exactly on it, return base
-    if (gitDesc === `v${base}`) return base;
-    // Otherwise return dev version
-    return `${base}-dev (${gitDesc})`;
+
+    const tagMatch = gitDesc.match(/^v(\d+\.\d+\.\d+)(?:-(\d+)-g([0-9a-f]+))?(-dirty)?$/);
+    if (tagMatch) {
+      const gitVersion = tagMatch[1];
+      const commits = tagMatch[2];
+      const hash = tagMatch[3];
+      const dirty = tagMatch[4];
+
+      // Exactly on a clean tag — return the tag version
+      if (!commits && !dirty) return gitVersion;
+
+      // Build a combined semver-style dev string
+      let ver = `${gitVersion}-dev`;
+      if (commits) ver += `.${commits}`;
+      const meta = [hash ? `g${hash}` : null, dirty ? 'dirty' : null].filter(Boolean).join('.');
+      if (meta) ver += `+${meta}`;
+      return ver;
+    }
+
+    // No semver tag found (e.g. bare commit hash) — fall back to package.json
+    return `${base}-dev+${gitDesc}`;
   } catch {
     return `${base}-dev`;
   }

package/src/websocket.js

@@ -1,14 +1,37 @@
 const log = require('./logger');
 
+const ACTIVE_THRESHOLD = 60000; // 60 seconds
+
+// OSC color query/response sequences (OSC 4/10/11/12) cause garbled output
+// on replay: color queries trigger xterm.js to generate responses that echo
+// through the PTY as visible text, accumulating on each refresh.
+const OSC_COLOR_RE = /\x1b\](?:4;\d+|10|11|12);[^\x07\x1b]*(?:\x07|\x1b\\)/g;
+function sanitizeForReplay(buf) {
+  return buf.replace(OSC_COLOR_RE, '');
+}
+
 function recalcPtySize(session) {
-  let minCols = Infinity;
-  let minRows = Infinity;
+  const now = Date.now();
+  let activeCols = Infinity;
+  let activeRows = Infinity;
+  let allCols = Infinity;
+  let allRows = Infinity;
+  let hasActive = false;
+
   for (const client of session.clients) {
-    if (client._dims) {
-      minCols = Math.min(minCols, client._dims.cols);
-      minRows = Math.min(minRows, client._dims.rows);
+    if (!client._dims) continue;
+    allCols = Math.min(allCols, client._dims.cols);
+    allRows = Math.min(allRows, client._dims.rows);
+    if (client._lastActivity && now - client._lastActivity < ACTIVE_THRESHOLD) {
+      activeCols = Math.min(activeCols, client._dims.cols);
+      activeRows = Math.min(activeRows, client._dims.rows);
+      hasActive = true;
     }
   }
+
+  const minCols = hasActive ? activeCols : allCols;
+  const minRows = hasActive ? activeRows : allRows;
+
   if (minCols === Infinity || minRows === Infinity) return;
   if (minCols === session._lastCols && minRows === session._lastRows) return;
   session._lastCols = minCols;
@@ -39,6 +62,11 @@ function setupWebSocket(wss, { auth, sessions }) {
       }
     }
 
+    const pingInterval = setInterval(() => {
+      if (ws.readyState === 1) ws.ping();
+    }, 30000);
+    if (typeof pingInterval.unref === 'function') pingInterval.unref();
+
     let authenticated = !auth.password;
     let attached = null;
 
@@ -95,6 +123,7 @@ function setupWebSocket(wss, { auth, sessions }) {
             log.warn(`WS: attach failed — session ${msg.sessionId} not found`);
             return;
           }
+          ws._lastActivity = Date.now();
           attached = session;
           // First client: defer adding to session.clients until after the
           // first resize so we can decide whether the PTY needs resizing.
@@ -104,7 +133,9 @@ function setupWebSocket(wss, { auth, sessions }) {
           } else {
             session.clients.add(ws);
             if (session.scrollbackBuf.length > 0) {
-              ws.send(JSON.stringify({ type: 'output', data: session.scrollbackBuf }));
+              ws.send(
+                JSON.stringify({ type: 'output', data: sanitizeForReplay(session.scrollbackBuf) }),
+              );
             }
           }
           ws.send(JSON.stringify({ type: 'attached', sessionId: msg.sessionId }));
@@ -115,12 +146,14 @@ function setupWebSocket(wss, { auth, sessions }) {
         if (!attached) return;
 
         if (msg.type === 'input') {
+          ws._lastActivity = Date.now();
           attached.pty.write(msg.data);
         } else if (msg.type === 'resize') {
           const cols = Math.floor(msg.cols);
           const rows = Math.floor(msg.rows);
           if (cols > 0 && cols <= 500 && rows > 0 && rows <= 200) {
             ws._dims = { cols, rows };
+            ws._lastActivity = Date.now();
             if (ws._pendingResize) {
               ws._pendingResize = false;
               // Only discard scrollback and send SIGWINCH if the PTY was
@@ -136,7 +169,12 @@ function setupWebSocket(wss, { auth, sessions }) {
               } else {
                 attached.clients.add(ws);
                 if (attached.scrollbackBuf.length > 0) {
-                  ws.send(JSON.stringify({ type: 'output', data: attached.scrollbackBuf }));
+                  ws.send(
+                    JSON.stringify({
+                      type: 'output',
+                      data: sanitizeForReplay(attached.scrollbackBuf),
+                    }),
+                  );
                 }
               }
             } else {
@@ -150,6 +188,7 @@ function setupWebSocket(wss, { auth, sessions }) {
     });
 
     ws.on('close', () => {
+      clearInterval(pingInterval);
       if (attached) {
         attached.clients.delete(ws);
         recalcPtySize(attached);
@@ -159,4 +198,4 @@ function setupWebSocket(wss, { auth, sessions }) {
   });
 }
 
-module.exports = { setupWebSocket };
+module.exports = { setupWebSocket, ACTIVE_THRESHOLD, sanitizeForReplay };