termbeam 1.10.2 → 1.11.0

package/package.json

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

package/public/index.html

@@ -197,6 +197,45 @@
         border: 1px solid rgba(128, 128, 128, 0.3);
       }
 
+      .update-banner {
+        margin: 12px 16px 0;
+        padding: 10px 14px;
+        background: var(--surface);
+        border: 1px solid var(--accent);
+        border-radius: 10px;
+        display: none;
+        align-items: center;
+        gap: 10px;
+        font-size: 13px;
+        color: var(--text);
+      }
+      .update-banner.visible {
+        display: flex;
+      }
+      .update-banner-text {
+        flex: 1;
+      }
+      .update-banner-text code {
+        font-size: 12px;
+        background: var(--border);
+        padding: 2px 6px;
+        border-radius: 4px;
+        word-break: break-all;
+      }
+      .update-banner-dismiss {
+        background: none;
+        border: none;
+        color: var(--text-dim);
+        cursor: pointer;
+        font-size: 18px;
+        line-height: 1;
+        padding: 0 2px;
+        flex-shrink: 0;
+      }
+      .update-banner-dismiss:hover {
+        color: var(--text);
+      }
+
       .sessions-list {
         padding: 16px;
         padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
@@ -730,7 +769,8 @@
     <div class="header">
       <h1>📡 Term<span>Beam</span></h1>
       <p>
-        Beam your terminal to any device · <span id="version" style="color: var(--accent)"></span>
+        Beam your terminal to any device ·
+        <span id="version" style="color: var(--accent)"></span>
       </p>
       <button class="header-btn" id="share-btn" style="right: 96px; top: 16px" title="Share link">
         <svg
@@ -833,6 +873,23 @@
       </div>
     </div>
 
+    <div class="update-banner" id="update-banner">
+      <div class="update-banner-text">
+        <strong>Update available:</strong> <span id="update-versions"></span><br />
+        <span id="update-command-text"
+          >Run: <code id="update-command">npm install -g termbeam@latest</code></span
+        >
+      </div>
+      <button
+        class="update-banner-dismiss"
+        id="update-dismiss"
+        title="Dismiss"
+        aria-label="Dismiss update notification"
+      >
+        &times;
+      </button>
+    </div>
+
     <div class="sessions-list" id="sessions-list"></div>
     <button class="new-session" id="new-session-btn">+ New Session</button>
 
@@ -981,6 +1038,36 @@
       const listEl = document.getElementById('sessions-list');
       const modal = document.getElementById('modal');
 
+      // Update notification
+      (async function checkUpdate() {
+        if (sessionStorage.getItem('update-dismissed')) return;
+        try {
+          const res = await fetch('/api/update-check');
+          if (!res.ok) return;
+          const info = await res.json();
+          if (info.updateAvailable && info.latest) {
+            const banner = document.getElementById('update-banner');
+            document.getElementById('update-versions').textContent =
+              'v' + info.current + ' \u2192 v' + info.latest;
+            if (info.command) {
+              const cmdEl = document.getElementById('update-command');
+              cmdEl.textContent = info.command;
+              if (info.method === 'npx') {
+                document.getElementById('update-command-text').textContent = 'Next time, run: ';
+                document.getElementById('update-command-text').appendChild(cmdEl);
+              }
+            }
+            banner.classList.add('visible');
+          }
+        } catch {
+          // Silent — update check is non-critical
+        }
+      })();
+      document.getElementById('update-dismiss').addEventListener('click', () => {
+        document.getElementById('update-banner').classList.remove('visible');
+        sessionStorage.setItem('update-dismissed', '1');
+      });
+
       function getActivityLabel(ts) {
         if (!ts) return '';
         const diff = (Date.now() - ts) / 1000;

package/public/terminal.html

@@ -42,7 +42,7 @@
       [data-theme='night-owl'] { --key-bg: #1d3b53; --key-border: #264863; --key-shadow: rgba(0, 0, 0, 0.4); --key-special-bg: #0d2a45; }
       @font-face {
         font-family: 'NerdFont';
-        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')
+        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')
           format('truetype');
         font-weight: normal;
         font-style: normal;
@@ -50,7 +50,7 @@
       }
       @font-face {
         font-family: 'NerdFont';
-        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/JetBrainsMono/Ligatures/Bold/JetBrainsMonoNerdFont-Bold.ttf')
+        src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Bold/JetBrainsMonoNerdFont-Bold.ttf')
           format('truetype');
         font-weight: bold;
         font-style: normal;
@@ -2378,7 +2378,7 @@
       // ===== Font Loading (non-blocking) =====
       const nerdFont = new FontFace(
         'NerdFont',
-        "url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')",
+        "url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@v3.4.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFont-Regular.ttf')",
       );
       nerdFont
         .load()
@@ -2497,9 +2497,8 @@
 
         if (startId) activateSession(startId);
         else {
-          sessionNameEl.textContent = 'No sessions';
-          statusText.textContent = '';
-          document.getElementById('stop-btn').style.display = 'none';
+          window.location.replace('/');
+          return;
         }
 
         renderTabs();
@@ -3139,11 +3138,8 @@
           const remaining = [...managed.keys()];
           if (remaining.length > 0) activateSession(remaining[0]);
           else {
-            activeId = null;
-            sessionNameEl.textContent = 'No sessions';
-            statusText.textContent = '';
-            statusDot.className = '';
-            document.getElementById('stop-btn').style.display = 'none';
+            window.location.replace('/');
+            return;
           }
         }
         renderTabs();
@@ -4232,12 +4228,8 @@
                   const remaining = [...managed.keys()];
                   if (remaining.length > 0) activateSession(remaining[0]);
                   else {
-                    activeId = null;
-                    sessionNameEl.textContent = 'No sessions';
-                    statusText.textContent = '';
-                    statusDot.className = '';
-                    document.getElementById('stop-btn').style.display = 'none';
-                    reconnectOverlay.classList.remove('visible');
+                    window.location.replace('/');
+                    return;
                   }
                 }
               }
@@ -4553,7 +4545,7 @@
               box.innerHTML =
                 '<div style="font-size:24px;margin-bottom:8px;">⚡</div>' +
                 '<div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;">TermBeam</div>' +
-                '<div style="font-size:13px;color:var(--text-secondary);margin-bottom:16px;">' +
+                '<div style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">' +
                 esc(ver) +
                 '</div>' +
                 '<div style="font-size:12px;color:var(--text-secondary);margin-bottom:16px;">Terminal in your browser, optimized for mobile.</div>' +
@@ -4561,7 +4553,74 @@
                 '<a href="https://github.com/dorlugasigal/TermBeam" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">GitHub</a>' +
                 '<a href="https://dorlugasigal.github.io/TermBeam/" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">Docs</a>' +
                 '<a href="https://termbeam.pages.dev" target="_blank" rel="noopener" style="color:var(--accent);font-size:12px;text-decoration:none;">Website</a>' +
-                '</div>';
+                '</div>' +
+                '<div id="about-update-area" style="margin-bottom:12px;"></div>';
+              const updateArea = box.querySelector('#about-update-area');
+              const updateBtn = document.createElement('button');
+              updateBtn.textContent = 'Check for updates';
+              updateBtn.style.cssText =
+                'padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;';
+              updateBtn.onclick = async () => {
+                updateBtn.textContent = 'Checking...';
+                updateBtn.disabled = true;
+                updateBtn.style.cursor = 'default';
+                try {
+                  const res = await fetch('/api/update-check?force=true');
+                  if (!res.ok) throw new Error();
+                  const info = await res.json();
+                  if (info.updateAvailable && info.latest) {
+                    const cmd = info.command || 'npm install -g termbeam@latest';
+                    updateArea.innerHTML = '';
+                    const status = document.createElement('div');
+                    status.style.cssText = 'font-size:12px;color:var(--accent);margin-bottom:8px;';
+                    status.textContent = 'v' + info.latest + ' available';
+                    updateArea.appendChild(status);
+                    const cmdRow = document.createElement('div');
+                    cmdRow.style.cssText =
+                      'display:flex;align-items:center;justify-content:center;gap:6px;';
+                    const cmdText = document.createElement('code');
+                    cmdText.textContent = cmd;
+                    cmdText.style.cssText =
+                      'font-size:11px;color:var(--accent);background:var(--bg);padding:4px 8px;border-radius:4px;border:1px solid var(--border);';
+                    const copyBtn = document.createElement('button');
+                    copyBtn.textContent = 'Copy';
+                    copyBtn.style.cssText =
+                      'padding:4px 10px;border-radius:4px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;cursor:pointer;';
+                    copyBtn.onclick = () => {
+                      const onSuccess = () => {
+                        copyBtn.textContent = 'Copied!';
+                        setTimeout(() => {
+                          copyBtn.textContent = 'Copy';
+                        }, 2000);
+                      };
+                      if (navigator.clipboard && navigator.clipboard.writeText) {
+                        navigator.clipboard
+                          .writeText(cmd)
+                          .then(onSuccess)
+                          .catch(() => {
+                            copyFallback(cmd);
+                            onSuccess();
+                          });
+                      } else {
+                        copyFallback(cmd);
+                        onSuccess();
+                      }
+                    };
+                    cmdRow.appendChild(cmdText);
+                    cmdRow.appendChild(copyBtn);
+                    updateArea.appendChild(cmdRow);
+                  } else {
+                    updateBtn.textContent = 'Up to date';
+                    updateBtn.style.color = '#4ec9b0';
+                    updateBtn.style.borderColor = '#4ec9b0';
+                  }
+                } catch {
+                  updateBtn.textContent = 'Check failed — try again';
+                  updateBtn.disabled = false;
+                  updateBtn.style.cursor = 'pointer';
+                }
+              };
+              updateArea.appendChild(updateBtn);
               const btn = document.createElement('button');
               btn.textContent = 'Close';
               btn.style.cssText =

package/src/routes.js

@@ -87,6 +87,29 @@ function setupRoutes(app, { auth, sessions, config, state }) {
     res.json({ version: getVersion() });
   });
 
+  // Update check API
+  app.get('/api/update-check', apiRateLimit, auth.middleware, async (req, res) => {
+    const { checkForUpdate, detectInstallMethod } = require('./update-check');
+    const force = req.query.force === 'true';
+
+    try {
+      const info = await checkForUpdate({ currentVersion: config.version, force });
+      const installInfo = detectInstallMethod();
+      state.updateInfo = { ...info, ...installInfo };
+      res.json(state.updateInfo);
+    } catch {
+      const installInfo = detectInstallMethod();
+      const fallback = {
+        current: config.version,
+        latest: null,
+        updateAvailable: false,
+        ...installInfo,
+      };
+      state.updateInfo = fallback;
+      res.json(fallback);
+    }
+  });
+
   // Share token auto-login middleware: validates ?ott= param, sets session cookie, redirects to clean URL
   function autoLogin(req, res, next) {
     const { ott } = req.query;

package/src/server.js

@@ -16,6 +16,7 @@ const { setupWebSocket } = require('./websocket');
 const { startTunnel, cleanupTunnel, findDevtunnel } = require('./tunnel');
 const { createPreviewProxy } = require('./preview');
 const { writeConnectionConfig, removeConnectionConfig } = require('./resume');
+const { checkForUpdate, detectInstallMethod } = require('./update-check');
 
 // --- Helpers ---
 function getLocalIP() {
@@ -73,7 +74,7 @@ function createTermBeamServer(overrides = {}) {
   const server = http.createServer(app);
   const wss = new WebSocketServer({ server, path: '/ws', maxPayload: 1 * 1024 * 1024 });
 
-  const state = { shareBaseUrl: null };
+  const state = { shareBaseUrl: null, updateInfo: null };
   app.use('/preview', auth.middleware, createPreviewProxy());
   setupRoutes(app, { auth, sessions, config, state });
   setupWebSocket(wss, { auth, sessions });
@@ -273,6 +274,36 @@ 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.
+        // 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')) {
+          const installInfo = detectInstallMethod();
+          checkForUpdate({ currentVersion: config.version })
+            .then((info) => {
+              state.updateInfo = { ...info, ...installInfo };
+              if (info.updateAvailable) {
+                const yl = '\x1b[33m';
+                const gn2 = '\x1b[38;5;114m';
+                const dm = '\x1b[2m';
+                console.log('');
+                console.log(
+                  `  ${yl}Update available:${rs} ${dm}${info.current}${rs} → ${gn2}${info.latest}${rs}`,
+                );
+                if (installInfo.method === 'npx') {
+                  console.log(`  Next time, run: ${gn2}npx termbeam@latest${rs}`);
+                } else {
+                  console.log(`  Run: ${gn2}${installInfo.command}${rs}`);
+                }
+                console.log('');
+              }
+            })
+            .catch(() => {
+              // Silent failure — update check is non-critical
+            });
+        }
+
         resolve({ url: `http://localhost:${actualPort}`, defaultId });
       });
     });

package/src/update-check.js

@@ -0,0 +1,240 @@
+const https = require('https');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const PACKAGE_NAME = 'termbeam';
+const REGISTRY_URL = `https://registry.npmjs.org/${PACKAGE_NAME}/latest`;
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+const REQUEST_TIMEOUT_MS = 5000;
+const MAX_RESPONSE_SIZE = 100 * 1024; // 100 KB — real npm responses are ~3-4 KB
+
+function getCacheFilePath() {
+  const configDir = process.env.TERMBEAM_CONFIG_DIR || path.join(os.homedir(), '.termbeam');
+  return path.join(configDir, 'update-check.json');
+}
+
+function readCache() {
+  try {
+    const data = JSON.parse(fs.readFileSync(getCacheFilePath(), 'utf8'));
+    if (data && typeof data.latest === 'string' && typeof data.checkedAt === 'number') {
+      return data;
+    }
+  } catch {
+    // Cache missing or corrupt — will re-fetch
+  }
+  return null;
+}
+
+function writeCache(latest) {
+  try {
+    const cacheFile = getCacheFilePath();
+    fs.mkdirSync(path.dirname(cacheFile), { recursive: true });
+    fs.writeFileSync(cacheFile, JSON.stringify({ latest, checkedAt: Date.now() }) + '\n', {
+      mode: 0o600,
+    });
+  } catch {
+    // Non-critical — next check will just re-fetch
+  }
+}
+
+/**
+ * Normalize a version string into a [major, minor, patch] numeric tuple.
+ * Strips leading "v", drops prerelease/build metadata.
+ * Returns null if the version cannot be safely parsed.
+ */
+function normalizeVersion(version) {
+  if (typeof version !== 'string') return null;
+  let v = version.trim();
+  if (!v) return null;
+  if (v[0] === 'v' || v[0] === 'V') v = v.slice(1);
+
+  // Drop build metadata (+foo) and prerelease tags (-beta.1)
+  const plusIdx = v.indexOf('+');
+  if (plusIdx !== -1) v = v.slice(0, plusIdx);
+  const dashIdx = v.indexOf('-');
+  if (dashIdx !== -1) v = v.slice(0, dashIdx);
+  if (!v) return null;
+
+  const parts = v.split('.');
+  if (parts.length === 0 || parts.length > 3) return null;
+
+  const nums = [];
+  for (const part of parts) {
+    if (!/^\d+$/.test(part)) return null;
+    nums.push(Number(part));
+  }
+  while (nums.length < 3) nums.push(0);
+  return nums;
+}
+
+/**
+ * Compare two semver version strings (e.g. "1.10.2" vs "1.11.0").
+ * Returns true if `latest` is newer than `current`.
+ * Returns false if either version cannot be parsed.
+ */
+function isNewerVersion(current, latest) {
+  const cur = normalizeVersion(current);
+  const lat = normalizeVersion(latest);
+  if (!cur || !lat) return false;
+  for (let i = 0; i < 3; i++) {
+    if (lat[i] > cur[i]) return true;
+    if (lat[i] < cur[i]) return false;
+  }
+  return false;
+}
+
+/**
+ * Strip ANSI escape sequences and control characters from a string.
+ * Prevents terminal injection if the registry returns malicious data.
+ */
+function sanitizeVersion(v) {
+  if (typeof v !== 'string') return '';
+  return (
+    v
+      // CSI sequences: ESC [ ... command
+      .replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, '')
+      // OSC sequences: ESC ] ... BEL or ESC ] ... ESC \
+      .replace(/\x1b\][^\x1b\x07]*(?:\x07|\x1b\\)/g, '')
+      // DCS, SOS, PM, APC: ESC P/X/^/_ ... ESC \
+      .replace(/\x1b[PX^_][\s\S]*?\x1b\\/g, '')
+      // Single-character ESC sequences
+      .replace(/\x1b[@-Z\\-_]/g, '')
+      // Remaining C0 and C1 control characters
+      .replace(/[\x00-\x1f\x7f-\x9f]/g, '')
+  );
+}
+
+/**
+ * Fetch the latest version from the npm registry.
+ * Returns the version string or null on failure.
+ * @param {string} [registryUrl] - Override the registry URL (for testing).
+ */
+function fetchLatestVersion(registryUrl) {
+  const url = registryUrl || REGISTRY_URL;
+  const client = url.startsWith('https') ? https : http;
+  return new Promise((resolve) => {
+    const req = client.get(url, { timeout: REQUEST_TIMEOUT_MS }, (res) => {
+      if (res.statusCode !== 200) {
+        res.resume();
+        resolve(null);
+        return;
+      }
+      let body = '';
+      let aborted = false;
+      res.setEncoding('utf8');
+      res.on('data', (chunk) => {
+        if (aborted) return;
+        body += chunk;
+        if (body.length > MAX_RESPONSE_SIZE) {
+          aborted = true;
+          req.destroy();
+          resolve(null);
+        }
+      });
+      res.on('end', () => {
+        if (aborted) return;
+        try {
+          const data = JSON.parse(body);
+          const version = data.version;
+          if (!version || typeof version !== 'string') {
+            resolve(null);
+            return;
+          }
+          if (!/^\d+\.\d+\.\d+$/.test(version)) {
+            resolve(null);
+            return;
+          }
+          resolve(sanitizeVersion(version));
+        } catch {
+          resolve(null);
+        }
+      });
+    });
+    // Unref so a pending update check can't delay process exit
+    req.on('socket', (socket) => socket.unref());
+    req.on('error', () => resolve(null));
+    req.on('timeout', () => {
+      req.destroy();
+      resolve(null);
+    });
+  });
+}
+
+/**
+ * Check for available updates.
+ * @param {object} options
+ * @param {string} options.currentVersion - The current version (e.g. "1.10.2")
+ * @param {boolean} [options.force=false] - Bypass cache and fetch fresh data
+ * @returns {Promise<{current: string, latest: string|null, updateAvailable: boolean}>}
+ */
+async function checkForUpdate({ currentVersion, force = false } = {}) {
+  if (!currentVersion) {
+    return { current: 'unknown', latest: null, updateAvailable: false };
+  }
+
+  // Check cache first (unless forced)
+  if (!force) {
+    const cache = readCache();
+    if (cache && Date.now() - cache.checkedAt < CACHE_TTL_MS) {
+      const cachedLatest = typeof cache.latest === 'string' ? sanitizeVersion(cache.latest) : null;
+      if (cachedLatest && /^\d+\.\d+\.\d+$/.test(cachedLatest)) {
+        return {
+          current: currentVersion,
+          latest: cachedLatest,
+          updateAvailable: isNewerVersion(currentVersion, cachedLatest),
+        };
+      }
+    }
+  }
+
+  // Fetch from registry
+  const latest = await module.exports.fetchLatestVersion();
+  if (!latest) {
+    return { current: currentVersion, latest: null, updateAvailable: false };
+  }
+
+  // Cache the result
+  writeCache(latest);
+
+  return {
+    current: currentVersion,
+    latest,
+    updateAvailable: isNewerVersion(currentVersion, latest),
+  };
+}
+
+/**
+ * Detect how TermBeam was installed and return the appropriate update command.
+ * @returns {{ method: string, command: string }}
+ */
+function detectInstallMethod() {
+  // npx / npm exec — npm sets npm_command=exec
+  if (process.env.npm_command === 'exec') {
+    return { method: 'npx', command: 'npx termbeam@latest' };
+  }
+
+  // Detect package manager from npm_execpath (set during npm/yarn/pnpm lifecycle)
+  const execPath = process.env.npm_execpath || '';
+  if (execPath.includes('yarn')) {
+    return { method: 'yarn', command: 'yarn global add termbeam@latest' };
+  }
+  if (execPath.includes('pnpm')) {
+    return { method: 'pnpm', command: 'pnpm add -g termbeam@latest' };
+  }
+
+  // Default: npm global install
+  return { method: 'npm', command: 'npm install -g termbeam@latest' };
+}
+
+module.exports = {
+  checkForUpdate,
+  isNewerVersion,
+  normalizeVersion,
+  fetchLatestVersion,
+  readCache,
+  writeCache,
+  sanitizeVersion,
+  detectInstallMethod,
+};