termbeam 1.1.1 → 1.2.1

package/README.md

@@ -65,6 +65,7 @@ termbeam --no-password          # disable password protection
 - **QR code on startup** for instant phone connection
 - **Light/dark theme** with persistent preference
 - **Adjustable font size** via status bar controls, saved across sessions
+- **Port preview** — reverse-proxy a single local web server port and preview it in the browser (HTTP only; no WebSocket/HMR; best with server-rendered apps)
 - **Remote access via [DevTunnel](#remote-access)** — ephemeral or persisted public URLs
 
 ## Remote Access

package/package.json

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

package/public/terminal.html

@@ -36,9 +36,10 @@
         --danger: #f14c4c;
         --danger-hover: #d73a3a;
         --success: #89d185;
-        --key-bg: #2d2d2d;
-        --key-border: #404040;
-        --key-shadow: rgba(0, 0, 0, 0.4);
+        --key-bg: #4a4a4c;
+        --key-border: #5a5a5c;
+        --key-shadow: rgba(0, 0, 0, 0.5);
+        --key-special-bg: #333335;
         --overlay-bg: rgba(0, 0, 0, 0.85);
       }
       [data-theme='light'] {
@@ -56,9 +57,10 @@
         --danger: #e51400;
         --danger-hover: #c20000;
         --success: #16825d;
-        --key-bg: #e8e8e8;
-        --key-border: #d0d0d0;
-        --key-shadow: rgba(0, 0, 0, 0.08);
+        --key-bg: #ffffff;
+        --key-border: #b5b5b5;
+        --key-shadow: rgba(0, 0, 0, 0.12);
+        --key-special-bg: #adb5bd;
         --overlay-bg: rgba(0, 0, 0, 0.5);
       }
       @font-face {
@@ -416,7 +418,7 @@
         top: calc(41px + env(safe-area-inset-top, 0px));
         left: env(safe-area-inset-left, 0px);
         right: env(safe-area-inset-right, 0px);
-        bottom: calc(52px + env(safe-area-inset-bottom, 0px));
+        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
         display: flex;
         overflow: hidden;
       }
@@ -449,76 +451,124 @@
         bottom: 0;
         left: 0;
         right: 0;
-        height: calc(52px + env(safe-area-inset-bottom, 0px));
+        height: calc(80px + env(safe-area-inset-bottom, 0px));
         display: flex;
-        align-items: center;
-        background: var(--surface);
+        flex-direction: column;
+        background: #1c1c1e;
         border-top: 1px solid var(--border);
-        padding: 0 calc(4px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
-          calc(4px + env(safe-area-inset-left, 0px));
-        gap: 4px;
+        padding: 4px calc(3px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
+          calc(3px + env(safe-area-inset-left, 0px));
+        gap: 6px;
         z-index: 50;
         transition:
           background 0.3s,
           border-color 0.3s;
       }
+      [data-theme='light'] #key-bar {
+        background: #d1d3d9;
+      }
+      .key-row {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+      }
       .key-btn {
         min-width: 0;
-        height: 40px;
+        height: 34px;
         background: var(--key-bg);
-        color: var(--text);
-        border: 1px solid var(--key-border);
-        border-radius: 8px;
-        font-size: 12px;
-        font-weight: 600;
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
         cursor: pointer;
         display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
         -webkit-tap-highlight-color: transparent;
         user-select: none;
         white-space: nowrap;
-        padding: 2px 8px;
+        padding: 0 6px;
         flex: 1 1 0;
-        gap: 0;
         line-height: 1;
         transition:
-          background 0.15s,
-          color 0.15s,
-          border-color 0.15s,
-          transform 0.1s,
-          box-shadow 0.15s;
+          background 0.1s,
+          transform 0.08s,
+          box-shadow 0.1s;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
+      }
+      [data-theme='light'] .key-btn {
+        color: #000;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+      }
+      .key-btn:active {
+        background: #6e6e72;
+        transform: scale(0.95);
+        box-shadow: none;
+      }
+      [data-theme='light'] .key-btn:active {
+        background: #c8c8cc;
+      }
+      .key-btn.flash {
+        background: #fff !important;
+        color: #000 !important;
+        transition: none;
+      }
+      [data-theme='light'] .key-btn.flash {
+        background: #333 !important;
+        color: #fff !important;
+      }
+      .key-btn.modifier,
+      .key-btn.special {
+        background: var(--key-special-bg);
+        font-size: 12px;
+        font-weight: 600;
+      }
+      [data-theme='light'] .key-btn.modifier,
+      [data-theme='light'] .key-btn.special {
+        background: var(--key-special-bg);
+        color: #000;
+      }
+      .key-btn.modifier.active {
+        background: var(--accent);
+        color: #fff;
         box-shadow:
-          0 1px 3px var(--key-shadow),
-          inset 0 1px 0 rgba(255, 255, 255, 0.05);
+          0 1px 0 rgba(0, 0, 0, 0.2),
+          0 0 10px rgba(0, 120, 212, 0.5);
       }
-      .key-btn .hint {
-        font-size: 8px;
-        font-weight: 400;
-        opacity: 0.5;
-        margin-top: 1px;
-        letter-spacing: 0.02em;
+      [data-theme='light'] .key-btn.modifier.active {
+        background: var(--accent);
+        color: #fff;
+        box-shadow:
+          0 1px 0 rgba(0, 0, 0, 0.2),
+          0 0 10px rgba(0, 120, 212, 0.3);
       }
-      .key-btn:hover {
-        background: var(--border);
-        border-color: var(--accent);
-        box-shadow: 0 2px 6px var(--key-shadow);
+      .key-btn.icon-btn {
+        font-size: 18px;
       }
-      .key-btn:active {
+      .key-btn.key-enter {
         background: var(--accent);
         color: #fff;
-        border-color: var(--accent);
-        transform: scale(0.93);
-        box-shadow: none;
+        font-size: 20px;
+      }
+      .key-btn.key-enter:active {
+        background: var(--accent-active);
+      }
+      .key-btn.key-danger {
+        background: #5c2222;
+        color: #f87171;
+      }
+      [data-theme='light'] .key-btn.key-danger {
+        background: #fee2e2;
+        color: #dc2626;
       }
-      .key-btn.wide {
-        flex: 1.4 1 0;
+      .key-btn.key-danger:active {
+        background: var(--danger);
+        color: #fff;
       }
       .key-sep {
-        width: 1px;
-        height: 20px;
-        background: var(--border);
+        width: 0;
         flex-shrink: 0;
       }
 
@@ -939,7 +989,8 @@
         background: var(--overlay-bg);
         z-index: 200;
         justify-content: center;
-        align-items: center;
+        align-items: flex-start;
+        padding-top: 15vh;
       }
       .modal-overlay.visible {
         display: flex;
@@ -1121,14 +1172,41 @@
 
       .side-panel-header {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 12px 14px;
+        flex-direction: column;
+        padding: 16px 14px 12px;
         border-bottom: 1px solid var(--border);
-        font-size: 15px;
+        position: relative;
+      }
+      .side-panel-brand {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 18px;
         font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+      .side-panel-brand svg {
+        flex-shrink: 0;
+      }
+      .side-panel-version {
+        font-size: 11px;
+        color: var(--text-muted);
+        font-weight: 400;
+        margin-top: 2px;
+        padding-left: 28px;
+      }
+      .side-panel-section-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--text-dim);
+        padding: 10px 14px 4px;
       }
       .side-panel-close {
+        position: absolute;
+        top: 14px;
+        right: 10px;
         background: none;
         border: none;
         color: var(--text-dim);
@@ -1298,9 +1376,26 @@
     <div id="side-panel-backdrop"></div>
     <div id="side-panel">
       <div class="side-panel-header">
-        <span>Sessions</span>
+        <div class="side-panel-brand">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="4 17 10 11 4 5"></polyline>
+            <line x1="12" y1="19" x2="20" y2="19"></line>
+          </svg>
+          TermBeam
+        </div>
+        <div class="side-panel-version" id="side-panel-version"></div>
         <button class="side-panel-close" id="side-panel-close" title="Close">×</button>
       </div>
+      <div class="side-panel-section-title">Sessions</div>
       <div class="side-panel-list" id="side-panel-list"></div>
       <div style="padding: 8px; border-top: 1px solid var(--border)">
         <button
@@ -1405,6 +1500,14 @@
           <button class="bar-btn" id="zoom-out" title="Decrease font size">−</button>
           <button class="bar-btn" id="zoom-in" title="Increase font size">+</button>
         </div>
+        <button
+          class="bar-btn"
+          id="preview-btn"
+          title="Preview local port"
+          onclick="openPreviewModal()"
+        >
+          🌐
+        </button>
         <button class="bar-btn" id="share-btn" title="Share link">
           <svg
             width="16"
@@ -1484,29 +1587,28 @@
     <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>
-      <button class="key-btn" data-key="&#x1b;[B" title="Next command">
-        ↓<span class="hint">next</span>
-      </button>
-      <button class="key-btn" data-key="&#x1b;[D" title="Left">←</button>
-      <button class="key-btn" data-key="&#x1b;[C" title="Right">→</button>
-      <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="select-btn" title="Copy text">Copy</button>
-      <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>
-      <div class="key-sep"></div>
-      <button class="key-btn" data-key="enter" title="Enter / Return">
-        ↵<span class="hint">enter</span>
-      </button>
+      <div class="key-row">
+        <button class="key-btn special" data-key="&#x1b;" title="Escape">Esc</button>
+        <button class="key-btn special" id="select-btn" title="Copy text">Copy</button>
+        <button class="key-btn special" id="paste-btn" title="Paste from clipboard">Paste</button>
+        <button class="key-btn special" data-key="&#x1b;OH" title="Home">Home</button>
+        <button class="key-btn special" data-key="&#x1b;OF" title="End">End</button>
+        <button class="key-btn icon-btn" data-key="&#x1b;[A" title="Up">↑</button>
+        <button class="key-btn icon-btn key-enter" data-key="enter" title="Enter / Return">
+          ↵
+        </button>
+      </div>
+      <div class="key-row">
+        <button class="key-btn modifier" id="ctrl-btn" title="Toggle Ctrl modifier">Ctrl</button>
+        <button class="key-btn modifier" id="shift-btn" title="Toggle Shift modifier">Shift</button>
+        <button class="key-btn special" data-key="&#x09;" title="Autocomplete">Tab</button>
+        <button class="key-btn special key-danger" data-key="&#x03;" title="Interrupt process">
+          ^C
+        </button>
+        <button class="key-btn icon-btn" data-key="&#x1b;[D" title="Left">←</button>
+        <button class="key-btn icon-btn" data-key="&#x1b;[B" title="Down">↓</button>
+        <button class="key-btn icon-btn" data-key="&#x1b;[C" title="Right">→</button>
+      </div>
     </div>
 
     <div id="reconnect-overlay">
@@ -1659,6 +1761,61 @@
       </div>
     </div>
 
+    <!-- Preview Port Modal -->
+    <div class="modal-overlay" id="preview-modal">
+      <div class="modal">
+        <h2>🌐 Preview Local Port</h2>
+        <p
+          style="
+            color: var(--text-secondary);
+            font-size: 13px;
+            margin: -8px 0 16px;
+            line-height: 1.4;
+          "
+        >
+          Open a local server running on your machine in a new tab — works through the tunnel.
+        </p>
+        <label for="preview-port-input">Port</label>
+        <div style="position: relative">
+          <input
+            type="number"
+            id="preview-port-input"
+            placeholder="e.g. 3000"
+            min="1"
+            max="65535"
+          />
+          <span
+            id="preview-detect-status"
+            style="
+              position: absolute;
+              right: 12px;
+              top: 50%;
+              transform: translateY(-50%);
+              font-size: 12px;
+              color: var(--text-secondary);
+            "
+          ></span>
+        </div>
+        <div
+          id="preview-hint"
+          style="
+            font-size: 12px;
+            color: var(--success);
+            margin-top: 6px;
+            display: none;
+            align-items: center;
+            gap: 4px;
+          "
+        >
+          <span>✓</span> <span id="preview-hint-text"></span>
+        </div>
+        <div class="modal-actions">
+          <button class="btn-cancel" id="preview-cancel">Cancel</button>
+          <button class="btn-create" id="preview-open">Open Preview ↗</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Folder Browser -->
     <div class="browser-overlay" id="ns-browser-overlay">
       <div class="browser-sheet">
@@ -1929,6 +2086,7 @@
         setupImagePaste();
         setupSelectMode();
         setupNewSessionModal();
+        setupPreviewModal();
         loadShellsForModal();
         startPolling();
 
@@ -1965,9 +2123,9 @@
             const keyboardOpen = keyboardHeight > 50;
             if (keyboardOpen) {
               keyBar.style.bottom = keyboardHeight + 'px';
-              keyBar.style.height = '52px';
+              keyBar.style.height = '80px';
               keyBar.style.paddingBottom = '0px';
-              terminalsWrapper.style.bottom = 52 + keyboardHeight + 'px';
+              terminalsWrapper.style.bottom = 80 + keyboardHeight + 'px';
             } else {
               keyBar.style.bottom = '0px';
               keyBar.style.height = '';
@@ -2047,6 +2205,7 @@
           .then((r) => r.json())
           .then((d) => {
             document.getElementById('version-text').textContent = 'v' + d.version;
+            document.getElementById('side-panel-version').textContent = 'v' + d.version;
           })
           .catch(() => {});
       }
@@ -2200,7 +2359,18 @@
         // Terminal input → WebSocket
         term.onData((input) => {
           if (ms.ws && ms.ws.readyState === 1) {
-            ms.ws.send(JSON.stringify({ type: 'input', data: input }));
+            let data = input;
+            if (ctrlActive && input.length === 1) {
+              const code = input.toLowerCase().charCodeAt(0);
+              // a-z → Ctrl+letter (0x01-0x1a)
+              if (code >= 97 && code <= 122) {
+                data = String.fromCharCode(code - 96);
+              }
+              clearModifiers();
+            } else if (shiftActive && !ctrlActive) {
+              clearModifiers();
+            }
+            ms.ws.send(JSON.stringify({ type: 'input', data }));
           }
         });
 
@@ -2765,18 +2935,65 @@
       }
 
       // ===== Key Bar =====
+      // Modifier state (shared with terminal onData)
+      let ctrlActive = false;
+      let shiftActive = false;
+      function clearModifiers() {
+        ctrlActive = false;
+        shiftActive = false;
+        const ctrlBtn = document.getElementById('ctrl-btn');
+        const shiftBtn = document.getElementById('shift-btn');
+        if (ctrlBtn) ctrlBtn.classList.remove('active');
+        if (shiftBtn) shiftBtn.classList.remove('active');
+      }
+
       function setupKeyBar() {
         const keyBar = document.getElementById('key-bar');
+        const ctrlBtn = document.getElementById('ctrl-btn');
+        const shiftBtn = document.getElementById('shift-btn');
         let repeatTimer = null;
         let repeatInterval = null;
 
+        function toggleModifier(which) {
+          if (which === 'ctrl') {
+            ctrlActive = !ctrlActive;
+            ctrlBtn.classList.toggle('active', ctrlActive);
+          } else {
+            shiftActive = !shiftActive;
+            shiftBtn.classList.toggle('active', shiftActive);
+          }
+        }
+
+        function applyModifiers(key) {
+          if (!ctrlActive && !shiftActive) return key;
+          // Modifier param: Shift=2, Ctrl=5, Ctrl+Shift=6
+          const mod = ctrlActive && shiftActive ? 6 : ctrlActive ? 5 : 2;
+          // Arrow keys: \x1b[X → \x1b[1;{mod}X
+          const csiMatch = key.match(/^\x1b\[([ABCD])$/);
+          if (csiMatch) return '\x1b[1;' + mod + csiMatch[1];
+          // Home/End: \x1bOH/\x1bOF → \x1b[1;{mod}H/F
+          const ssMatch = key.match(/^\x1bO([HF])$/);
+          if (ssMatch) return '\x1b[1;' + mod + ssMatch[1];
+          // Tab with Shift → reverse tab
+          if (key === '\x09' && shiftActive && !ctrlActive) return '\x1b[Z';
+          return key;
+        }
+
+        function flashBtn(btn) {
+          btn.classList.add('flash');
+          setTimeout(() => btn.classList.remove('flash'), 120);
+        }
+
         function sendKey(btn) {
           if (!btn || !btn.dataset.key) return;
-          const data = btn.dataset.key === 'enter' ? '\r' : btn.dataset.key;
+          flashBtn(btn);
+          let data = btn.dataset.key === 'enter' ? '\r' : btn.dataset.key;
+          data = applyModifiers(data);
           const ms = managed.get(activeId);
           if (ms && ms.ws && ms.ws.readyState === 1) {
             ms.ws.send(JSON.stringify({ type: 'input', data }));
           }
+          clearModifiers();
         }
 
         function stopRepeat() {
@@ -2794,6 +3011,37 @@
           }, 400);
         }
 
+        ctrlBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleModifier('ctrl');
+        });
+        shiftBtn.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleModifier('shift');
+        });
+        ctrlBtn.addEventListener('mousedown', (e) => e.preventDefault());
+        shiftBtn.addEventListener('mousedown', (e) => e.preventDefault());
+        ctrlBtn.addEventListener(
+          'touchstart',
+          (e) => {
+            e.preventDefault();
+            keyBarTouched = true;
+            toggleModifier('ctrl');
+          },
+          { passive: false },
+        );
+        shiftBtn.addEventListener(
+          'touchstart',
+          (e) => {
+            e.preventDefault();
+            keyBarTouched = true;
+            toggleModifier('shift');
+          },
+          { passive: false },
+        );
+
         let keyBarTouched = false;
         keyBar.addEventListener('mousedown', (e) => {
           if (keyBarTouched) {
@@ -2809,24 +3057,45 @@
         keyBar.addEventListener('mouseup', stopRepeat);
         keyBar.addEventListener('mouseleave', stopRepeat);
 
+        // Touch handling: allow native scroll when swiping, fire key only on tap
+        const SWIPE_THRESHOLD = 10;
+        let touchStartX = 0;
+        let touchBtn = null;
+        let touchMoved = false;
+
         keyBar.addEventListener(
           'touchstart',
           (e) => {
             keyBarTouched = true;
-            const btn = e.target.closest('.key-btn');
-            if (btn && btn.dataset.key) {
-              e.preventDefault();
-              startRepeat(btn);
+            touchBtn = e.target.closest('.key-btn');
+            touchMoved = false;
+            touchStartX = e.touches[0].clientX;
+            // Don't preventDefault — let the browser handle scroll
+          },
+          { passive: true },
+        );
+        keyBar.addEventListener(
+          'touchmove',
+          (e) => {
+            if (Math.abs(e.touches[0].clientX - touchStartX) > SWIPE_THRESHOLD) {
+              touchMoved = true;
+              stopRepeat();
             }
           },
-          { passive: false },
+          { passive: true },
         );
         keyBar.addEventListener('touchend', (e) => {
-          const btn = e.target.closest('.key-btn');
-          if (btn && btn.dataset.key) e.preventDefault();
+          if (!touchMoved && touchBtn && touchBtn.dataset.key) {
+            e.preventDefault();
+            sendKey(touchBtn);
+          }
           stopRepeat();
+          touchBtn = null;
+        });
+        keyBar.addEventListener('touchcancel', () => {
+          stopRepeat();
+          touchBtn = null;
         });
-        keyBar.addEventListener('touchcancel', stopRepeat);
 
         keyBar.addEventListener('click', (e) => {
           const btn = e.target.closest('.key-btn');
@@ -2994,7 +3263,21 @@
         });
 
         selectBtn.addEventListener('mousedown', (e) => e.preventDefault());
-        selectBtn.addEventListener('click', openSelectOverlay);
+        selectBtn.addEventListener(
+          'touchend',
+          (e) => {
+            e.preventDefault();
+            const ms = managed.get(activeId);
+            if (ms) ms.term.blur();
+            openSelectOverlay();
+          },
+          { passive: false },
+        );
+        selectBtn.addEventListener('click', () => {
+          const ms = managed.get(activeId);
+          if (ms) ms.term.blur();
+          openSelectOverlay();
+        });
 
         document.getElementById('select-copy').addEventListener('click', () => {
           // Copy finger selection if any, otherwise copy all loaded text
@@ -3357,6 +3640,64 @@
         input.select();
       }
 
+      function openPreviewModal() {
+        const modal = document.getElementById('preview-modal');
+        const input = document.getElementById('preview-port-input');
+        const status = document.getElementById('preview-detect-status');
+        const hint = document.getElementById('preview-hint');
+        const hintText = document.getElementById('preview-hint-text');
+        input.value = '';
+        hint.style.display = 'none';
+        status.textContent = '';
+        modal.classList.add('visible');
+        input.focus();
+
+        if (activeId) {
+          status.textContent = 'detecting…';
+          fetch('/api/sessions/' + activeId + '/detect-port')
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+              status.textContent = '';
+              if (data && data.detected) {
+                input.value = data.port;
+                input.select();
+                hintText.textContent = 'Detected port ' + data.port + ' from terminal output';
+                hint.style.display = 'flex';
+              }
+            })
+            .catch(() => {
+              status.textContent = '';
+            });
+        }
+      }
+
+      function submitPreview() {
+        const input = document.getElementById('preview-port-input');
+        const port = parseInt(input.value, 10);
+        if (isNaN(port) || port < 1 || port > 65535) {
+          input.style.borderColor = '#f87171';
+          input.focus();
+          setTimeout(() => (input.style.borderColor = ''), 1500);
+          return;
+        }
+        window.open('/preview/' + port + '/', '_blank');
+        document.getElementById('preview-modal').classList.remove('visible');
+      }
+
+      function setupPreviewModal() {
+        document.getElementById('preview-cancel').addEventListener('click', () => {
+          document.getElementById('preview-modal').classList.remove('visible');
+        });
+        document.getElementById('preview-open').addEventListener('click', submitPreview);
+        document.getElementById('preview-port-input').addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') submitPreview();
+        });
+        document.getElementById('preview-modal').addEventListener('click', (e) => {
+          if (e.target.id === 'preview-modal')
+            document.getElementById('preview-modal').classList.remove('visible');
+        });
+      }
+
       document.getElementById('share-btn').addEventListener('click', async () => {
         const urlPromise = fetch('/api/share-token')
           .then((r) => (r.ok ? r.json() : null))

package/src/preview.js

@@ -0,0 +1,112 @@
+const http = require('http');
+const express = require('express');
+const log = require('./logger');
+
+const PROXY_TIMEOUT = 10_000;
+
+// Rewrite absolute paths in HTML/CSS so they route through the proxy
+function rewriteAbsolutePaths(body, prefix, isHtml) {
+  if (isHtml) {
+    // Rewrite HTML attributes: href="/...", src="/...", action="/...", etc.
+    body = body.replace(
+      /((?:href|src|action|srcset|poster|data|formaction)\s*=\s*["'])\/(?!\/|preview\/)/gi,
+      `$1${prefix}/`,
+    );
+    // Rewrite meta content URLs: content="/..."
+    body = body.replace(/(content\s*=\s*["'])\/(?!\/|preview\/)/gi, `$1${prefix}/`);
+  }
+  // Rewrite CSS url() references: url("/...") or url('/...') or url(/...)
+  body = body.replace(/(url\(\s*["']?)\/(?!\/|preview\/)/gi, `$1${prefix}/`);
+  return body;
+}
+
+function createPreviewProxy() {
+  const router = express.Router();
+
+  function proxyRequest(req, res) {
+    const port = Number(req.params.port);
+    if (!Number.isInteger(port) || port < 1 || port > 65535) {
+      return res
+        .status(400)
+        .json({ error: 'Invalid port: must be an integer between 1 and 65535' });
+    }
+
+    // Strip /preview/:port prefix, keep the rest (or default to /)
+    // Express 5 *path returns an array of segments — join them back
+    const segments = req.params.path;
+    const forwardPath = segments ? `/${[].concat(segments).join('/')}` : '/';
+    const search = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
+
+    const fwdHeaders = { ...req.headers, host: `127.0.0.1:${port}` };
+    // Request uncompressed so we can rewrite HTML content
+    delete fwdHeaders['accept-encoding'];
+
+    const options = {
+      hostname: '127.0.0.1',
+      port,
+      path: forwardPath + search,
+      method: req.method,
+      headers: fwdHeaders,
+    };
+
+    log.debug(`Preview proxy: ${req.method} ${forwardPath}${search} → 127.0.0.1:${port}`);
+
+    const prefix = `/preview/${port}`;
+
+    const proxyReq = http.request(options, (proxyRes) => {
+      const headers = { ...proxyRes.headers };
+
+      // Rewrite Location headers so redirects stay inside the proxy
+      if (headers.location) {
+        const loc = headers.location;
+        if (loc.startsWith('/') && !loc.startsWith(prefix)) {
+          headers.location = prefix + loc;
+        }
+      }
+
+      const contentType = (headers['content-type'] || '').toLowerCase();
+      const isHtml = contentType.includes('text/html');
+      const isCss = contentType.includes('text/css');
+
+      if (isHtml || isCss) {
+        // Buffer response to rewrite absolute paths
+        const chunks = [];
+        proxyRes.on('data', (chunk) => chunks.push(chunk));
+        proxyRes.on('end', () => {
+          let body = Buffer.concat(chunks).toString();
+          body = rewriteAbsolutePaths(body, prefix, isHtml);
+          delete headers['content-length'];
+          headers['transfer-encoding'] = 'chunked';
+          res.writeHead(proxyRes.statusCode, headers);
+          res.end(body);
+        });
+      } else {
+        res.writeHead(proxyRes.statusCode, headers);
+        proxyRes.pipe(res);
+      }
+    });
+
+    proxyReq.setTimeout(PROXY_TIMEOUT, () => {
+      proxyReq.destroy();
+      if (!res.headersSent) {
+        res.status(504).json({ error: 'Gateway timeout: upstream server did not respond in time' });
+      }
+    });
+
+    proxyReq.on('error', (err) => {
+      log.warn(`Preview proxy error (port ${port}): ${err.message}`);
+      if (!res.headersSent) {
+        res.status(502).json({ error: `Bad gateway: ${err.message}` });
+      }
+    });
+
+    req.pipe(proxyReq);
+  }
+
+  router.all('/:port', proxyRequest);
+  router.all('/:port/*path', proxyRequest);
+
+  return router;
+}
+
+module.exports = { createPreviewProxy };

package/src/routes.js

@@ -132,6 +132,26 @@ function setupRoutes(app, { auth, sessions, config, state }) {
     res.json({ shells, default: config.defaultShell, cwd: config.cwd });
   });
 
+  app.get('/api/sessions/:id/detect-port', auth.middleware, (req, res) => {
+    const session = sessions.get(req.params.id);
+    if (!session) return res.status(404).json({ error: 'not found' });
+
+    const buf = session.scrollbackBuf || '';
+    const regex = /https?:\/\/(?:localhost|127\.0\.0\.1):(\d+)/g;
+    let lastPort = null;
+    let match;
+    while ((match = regex.exec(buf)) !== null) {
+      const port = parseInt(match[1], 10);
+      if (port >= 1 && port <= 65535) lastPort = port;
+    }
+
+    if (lastPort !== null) {
+      res.json({ detected: true, port: lastPort });
+    } else {
+      res.json({ detected: false });
+    }
+  });
+
   app.delete('/api/sessions/:id', auth.middleware, (req, res) => {
     if (sessions.delete(req.params.id)) {
       res.json({ ok: true });

package/src/server.js

@@ -13,6 +13,7 @@ const { SessionManager } = require('./sessions');
 const { setupRoutes, cleanupUploadedFiles } = require('./routes');
 const { setupWebSocket } = require('./websocket');
 const { startTunnel, cleanupTunnel, findDevtunnel } = require('./tunnel');
+const { createPreviewProxy } = require('./preview');
 
 // --- Helpers ---
 function getLocalIP() {
@@ -43,7 +44,9 @@ function createTermBeamServer(overrides = {}) {
   app.set('trust proxy', 'loopback');
   app.use(express.json());
   app.use(cookieParser());
-  app.use((_req, res, next) => {
+  app.use((req, res, next) => {
+    // Don't apply TermBeam's security headers to proxied preview content
+    if (req.path.startsWith('/preview/')) return next();
     res.setHeader('X-Content-Type-Options', 'nosniff');
     res.setHeader('X-Frame-Options', 'DENY');
     res.setHeader('Referrer-Policy', 'no-referrer');
@@ -59,6 +62,7 @@ function createTermBeamServer(overrides = {}) {
   const wss = new WebSocketServer({ server, path: '/ws', maxPayload: 1 * 1024 * 1024 });
 
   const state = { shareBaseUrl: null };
+  app.use('/preview', auth.middleware, createPreviewProxy());
   setupRoutes(app, { auth, sessions, config, state });
   setupWebSocket(wss, { auth, sessions });