termbeam 0.1.0 → 1.0.0

package/public/terminal.html

@@ -6,6 +6,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="theme-color" content="#1e1e1e" />
+    <meta name="description" content="TermBeam terminal session — access your terminal remotely from any browser with a mobile-optimized touch interface." />
     <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>TermBeam — Terminal</title>
@@ -309,7 +310,8 @@
       #paste-overlay {
         display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
         background: var(--overlay-bg); z-index: 150;
-        flex-direction: column; align-items: center; justify-content: center; gap: 12px;
+        flex-direction: column; align-items: center; justify-content: flex-start;
+        padding-top: calc(80px + env(safe-area-inset-top, 0px)); gap: 12px;
       }
       #paste-overlay.visible { display: flex; }
       #paste-overlay label { font-size: 15px; color: #fff; font-weight: 600; }
@@ -319,6 +321,38 @@
         padding: 10px; font-size: 14px; font-family: 'NerdFont', 'JetBrains Mono', monospace; resize: vertical;
       }
 
+      #select-overlay {
+        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+        background: var(--bg); z-index: 160;
+        flex-direction: column;
+      }
+      #select-overlay.visible { display: flex; }
+      .select-overlay-header {
+        display: flex; align-items: center; justify-content: space-between;
+        padding: 12px 12px; border-bottom: 1px solid var(--border);
+        font-size: 15px; font-weight: 600; color: var(--text);
+        padding-top: calc(12px + env(safe-area-inset-top, 0px));
+        min-height: 48px; box-sizing: border-box;
+      }
+      .select-overlay-header button {
+        padding: 6px 12px; border: none; border-radius: 8px;
+        font-size: 13px; font-weight: 600; cursor: pointer;
+        white-space: nowrap; flex-shrink: 0;
+        transition: background 0.15s, transform 0.1s;
+      }
+      .select-overlay-header button:active { transform: scale(0.95); }
+      #select-copy { background: var(--accent); color: #fff; }
+      #select-close { background: var(--border); color: var(--text); }
+      #select-content {
+        flex: 1; overflow: auto; padding: 12px 16px;
+        font-family: 'NerdFont', 'JetBrains Mono', monospace;
+        font-size: 13px; line-height: 1.4; color: var(--text);
+        white-space: pre; word-break: normal;
+        -webkit-user-select: text; user-select: text;
+        margin: 0;
+        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+      }
+
       #reconnect-overlay {
         display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
         background: var(--overlay-bg); z-index: 100;
@@ -714,6 +748,7 @@
       <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>
@@ -740,6 +775,18 @@
       </div>
     </div>
 
+    <div id="select-overlay">
+      <div class="select-overlay-header">
+        <span id="select-title">Copy Text</span>
+        <div style="display:flex;gap:8px">
+          <button id="select-copy">Copy</button>
+          <button id="select-close">Done</button>
+        </div>
+      </div>
+      <button id="select-load-more" style="display:none;width:100%;padding:8px;background:var(--surface);color:var(--accent);border:1px solid var(--border);border-radius:6px;font-size:13px;cursor:pointer;">▲ Load more</button>
+      <pre id="select-content"></pre>
+    </div>
+
     <!-- New Session Modal -->
     <div class="modal-overlay" id="new-session-modal">
       <div class="modal">
@@ -804,8 +851,20 @@
       const managed = new Map(); // sessionId -> ManagedSession
       let activeId = null;
       let splitMode = false;
+
       let splitSecondId = null;
 
+      // Clipboard copy fallback for non-secure contexts (HTTP over LAN)
+      function copyFallback(text) {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); showToast('Copied!'); } catch {}
+        document.body.removeChild(ta);
+      }
+
       // ===== DOM Refs =====
       const statusDot = document.getElementById('status-dot');
       const statusText = document.getElementById('status-text');
@@ -937,7 +996,10 @@
         renderTabs();
         setupKeyBar();
         setupPaste();
+        setupImagePaste();
+        setupSelectMode();
         setupNewSessionModal();
+        loadShellsForModal();
         startPolling();
 
         // Zoom
@@ -1120,8 +1182,14 @@
         // Copy on selection
         term.onSelectionChange(() => {
           const sel = term.getSelection();
-          if (sel && navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard.writeText(sel).then(() => showToast('Copied!')).catch(() => {});
+          if (!sel) return;
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(sel).then(() => showToast('Copied!')).catch(() => {
+              // Fallback for non-secure contexts (HTTP over LAN)
+              copyFallback(sel);
+            });
+          } else {
+            copyFallback(sel);
           }
         });
 
@@ -1203,6 +1271,11 @@
                 reconnectOverlay.classList.add('visible');
               }
             } else if (msg.type === 'error') {
+              if (msg.message === 'Session not found') {
+                ms.exited = true;
+                if (ms.reconnectTimer) { clearTimeout(ms.reconnectTimer); ms.reconnectTimer = null; }
+                renderTabs();
+              }
               if (ms.id === activeId) {
                 statusText.textContent = msg.message;
                 reconnectOverlay.querySelector('.msg').textContent = msg.message;
@@ -1277,12 +1350,16 @@
       }
 
       async function removeSession(id) {
-        try { await fetch('/api/sessions/' + encodeURIComponent(id), { method: 'DELETE' }); } catch {}
-
         const ms = managed.get(id);
         if (ms) {
+          ms.exited = true;
+          if (ms.reconnectTimer) { clearTimeout(ms.reconnectTimer); ms.reconnectTimer = null; }
           if (ms.ws) try { ms.ws.close(); } catch {}
-          if (ms.reconnectTimer) clearTimeout(ms.reconnectTimer);
+        }
+
+        try { await fetch('/api/sessions/' + encodeURIComponent(id), { method: 'DELETE' }); } catch {}
+
+        if (ms) {
           ms.term.dispose();
           ms.container.remove();
           managed.delete(id);
@@ -1655,18 +1732,25 @@
           }, 400);
         }
 
+        let keyBarTouched = false;
         keyBar.addEventListener('mousedown', e => {
+          if (keyBarTouched) { keyBarTouched = false; return; }
           const btn = e.target.closest('.key-btn');
-          if (btn) { e.preventDefault(); startRepeat(btn); }
+          if (btn && btn.dataset.key) { e.preventDefault(); startRepeat(btn); }
         });
         keyBar.addEventListener('mouseup', stopRepeat);
         keyBar.addEventListener('mouseleave', stopRepeat);
 
         keyBar.addEventListener('touchstart', e => {
+          keyBarTouched = true;
+          const btn = e.target.closest('.key-btn');
+          if (btn && btn.dataset.key) { e.preventDefault(); startRepeat(btn); }
+        }, { passive: false });
+        keyBar.addEventListener('touchend', (e) => {
           const btn = e.target.closest('.key-btn');
-          if (btn) startRepeat(btn);
-        }, { passive: true });
-        keyBar.addEventListener('touchend', stopRepeat);
+          if (btn && btn.dataset.key) e.preventDefault();
+          stopRepeat();
+        });
         keyBar.addEventListener('touchcancel', stopRepeat);
 
         keyBar.addEventListener('click', e => {
@@ -1679,6 +1763,7 @@
       function setupPaste() {
         const pasteOverlay = document.getElementById('paste-overlay');
         const pasteInput = document.getElementById('paste-input');
+        const pasteBtn = document.getElementById('paste-btn');
 
         function openPasteModal() {
           pasteInput.value = '';
@@ -1686,19 +1771,65 @@
           pasteInput.focus();
         }
 
-        document.getElementById('paste-btn').addEventListener('mousedown', e => e.preventDefault());
-        document.getElementById('paste-btn').addEventListener('click', () => {
+        async function handlePaste() {
+          // Try clipboard API for text first (most common), then images, then fallback to modal
           if (navigator.clipboard && navigator.clipboard.readText) {
-            navigator.clipboard.readText().then(text => {
-              const ms = managed.get(activeId);
-              if (text && ms && ms.ws && ms.ws.readyState === 1) {
-                ms.ws.send(JSON.stringify({ type: 'input', data: text }));
-                showToast('Pasted!');
+            try {
+              const text = await navigator.clipboard.readText();
+              if (text) {
+                const ms = managed.get(activeId);
+                if (ms && ms.ws && ms.ws.readyState === 1) {
+                  ms.ws.send(JSON.stringify({ type: 'input', data: text }));
+                  showToast('Pasted!');
+                }
+                return;
               }
-            }).catch(() => openPasteModal());
-          } else {
-            openPasteModal();
+            } catch (err) {
+              console.warn('clipboard.readText failed:', err.message);
+            }
           }
+          // Image paste: try clipboard.read() only if readText didn't work
+          if (navigator.clipboard && navigator.clipboard.read) {
+            try {
+              const items = await navigator.clipboard.read();
+              for (const item of items) {
+                const imageType = item.types.find(t => t.startsWith('image/'));
+                if (imageType) {
+                  const blob = await item.getType(imageType);
+                  const res = await fetch('/api/upload', {
+                    method: 'POST',
+                    headers: { 'Content-Type': imageType },
+                    body: blob,
+                    credentials: 'same-origin',
+                  });
+                  if (!res.ok) throw new Error('Upload failed');
+                  const data = await res.json();
+                  const ms = managed.get(activeId);
+                  if (ms && ms.ws && ms.ws.readyState === 1) {
+                    ms.ws.send(JSON.stringify({ type: 'input', data: data.path + ' ' }));
+                    showToast('Image pasted: ' + data.path.split(/[/\\]/).pop());
+                  }
+                  return;
+                }
+              }
+            } catch (err) {
+              console.warn('clipboard.read failed:', err.message);
+            }
+          }
+          openPasteModal();
+        }
+
+        // Use touchend directly for iOS Safari (click may not fire reliably)
+        let pasteTouched = false;
+        pasteBtn.addEventListener('touchend', (e) => {
+          e.preventDefault();
+          pasteTouched = true;
+          handlePaste();
+        });
+        pasteBtn.addEventListener('mousedown', e => e.preventDefault());
+        pasteBtn.addEventListener('click', () => {
+          if (pasteTouched) { pasteTouched = false; return; }
+          handlePaste();
         });
 
         document.getElementById('paste-send').addEventListener('click', () => {
@@ -1717,6 +1848,130 @@
         });
       }
 
+      // ===== Select Text Overlay =====
+      function setupSelectMode() {
+        const selectBtn = document.getElementById('select-btn');
+        const selectOverlay = document.getElementById('select-overlay');
+        const selectContent = document.getElementById('select-content');
+        const PAGE_SIZE = 200;
+        let allLines = [];
+        let loadedFrom = 0;
+
+        function renderLines(from, to) {
+          return allLines.slice(from, to).join('\n');
+        }
+
+        function openSelectOverlay() {
+          const ms = managed.get(activeId);
+          if (!ms) return;
+          const buf = ms.term.buffer.active;
+          allLines = [];
+          for (let i = 0; i < buf.length; i++) {
+            const line = buf.getLine(i);
+            if (line) allLines.push(line.translateToString(true));
+          }
+          // Trim trailing empty lines
+          while (allLines.length > 0 && allLines[allLines.length - 1].trim() === '') allLines.pop();
+
+          // Show last PAGE_SIZE lines
+          loadedFrom = Math.max(0, allLines.length - PAGE_SIZE);
+          selectContent.textContent = renderLines(loadedFrom, allLines.length);
+
+          // Show/hide "Load more" button
+          const loadMoreBtn = document.getElementById('select-load-more');
+          loadMoreBtn.style.display = loadedFrom > 0 ? 'block' : 'none';
+          loadMoreBtn.textContent = `▲ Load more (${loadedFrom} lines above)`;
+
+          // Show line count in title
+          const title = document.getElementById('select-title');
+          const shown = allLines.length - loadedFrom;
+          title.textContent = allLines.length <= PAGE_SIZE
+            ? `Copy Text (${allLines.length} lines)`
+            : `Copy Text (${shown}/${allLines.length} lines)`;
+
+          selectBtn.style.display = 'none';
+          selectOverlay.classList.add('visible');
+          selectContent.scrollTop = selectContent.scrollHeight;
+        }
+
+        document.getElementById('select-load-more').addEventListener('click', () => {
+          const prevHeight = selectContent.scrollHeight;
+          const newFrom = Math.max(0, loadedFrom - PAGE_SIZE);
+          const chunk = renderLines(newFrom, loadedFrom);
+          selectContent.textContent = chunk + '\n' + selectContent.textContent;
+          loadedFrom = newFrom;
+          // Keep scroll position stable
+          selectContent.scrollTop = selectContent.scrollHeight - prevHeight;
+          const loadMoreBtn = document.getElementById('select-load-more');
+          loadMoreBtn.style.display = loadedFrom > 0 ? 'block' : 'none';
+          loadMoreBtn.textContent = loadedFrom > 0 ? `▲ Load more (${loadedFrom} lines above)` : '';
+          // Update title
+          const title = document.getElementById('select-title');
+          const shown = allLines.length - loadedFrom;
+          title.textContent = `Copy Text (${shown}/${allLines.length} lines)`;
+        });
+
+        selectBtn.addEventListener('mousedown', e => e.preventDefault());
+        selectBtn.addEventListener('click', openSelectOverlay);
+
+        document.getElementById('select-copy').addEventListener('click', () => {
+          // Copy finger selection if any, otherwise copy all loaded text
+          const sel = window.getSelection();
+          const text = (sel && sel.toString()) ? sel.toString() : selectContent.textContent;
+          if (!text) return;
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text).then(() => showToast('Copied!')).catch(() => {
+              copyFallback(text);
+            });
+          } else {
+            copyFallback(text);
+          }
+        });
+
+        document.getElementById('select-close').addEventListener('click', () => {
+          selectOverlay.classList.remove('visible');
+          selectContent.textContent = '';
+          allLines = [];
+          selectBtn.style.display = '';
+          const ms = managed.get(activeId);
+          if (ms) ms.term.focus();
+        });
+      }
+
+      // ===== Image Paste =====
+      function setupImagePaste() {
+        document.addEventListener('paste', async (e) => {
+          const items = e.clipboardData && e.clipboardData.items;
+          if (!items) return;
+
+          for (const item of items) {
+            if (item.type.startsWith('image/')) {
+              e.preventDefault();
+              const blob = item.getAsFile();
+              if (!blob) return;
+
+              try {
+                const res = await fetch('/api/upload', {
+                  method: 'POST',
+                  headers: { 'Content-Type': item.type },
+                  body: blob,
+                });
+                if (!res.ok) throw new Error('Upload failed');
+                const data = await res.json();
+                const ms = managed.get(activeId);
+                if (ms && ms.ws && ms.ws.readyState === 1) {
+                  ms.ws.send(JSON.stringify({ type: 'input', data: data.path + ' ' }));
+                  showToast('Image pasted: ' + data.path.split(/[/\\]/).pop());
+                }
+              } catch (err) {
+                showToast('Image paste failed');
+              }
+              return;
+            }
+          }
+        });
+      }
+
       // ===== New Session Modal =====
       let shellsLoaded = false;
 
@@ -1755,9 +2010,16 @@
         const nsBrowserBreadcrumb = document.getElementById('ns-browser-breadcrumb');
         const nsBrowserPath = document.getElementById('ns-browser-path');
         let nsBrowsePath = '/';
-
-        document.getElementById('ns-browse-btn').addEventListener('click', () => {
-          const initial = nsCwdInput.value.trim() || '/';
+        let serverCwd = '/';
+
+        document.getElementById('ns-browse-btn').addEventListener('click', async () => {
+          if (serverCwd === '/') {
+            try {
+              const data = await fetch('/api/shells').then(r => r.json());
+              if (data.cwd) serverCwd = data.cwd;
+            } catch {}
+          }
+          const initial = nsCwdInput.value.trim() || serverCwd;
           nsBrowseNavigate(initial);
           nsBrowserOverlay.classList.add('visible');
         });
@@ -1782,11 +2044,17 @@
           try {
             const res = await fetch(`/api/dirs?q=${encodeURIComponent(dir + '/')}`);
             const data = await res.json();
-            if (!data.dirs.length) {
-              nsBrowserList.innerHTML = '<div class="browser-empty">No subfolders</div>';
-              return;
+            let items = '';
+            // Add parent (..) entry unless at root
+            const parent = dir.replace(/[/\\][^/\\]+$/, '') || (dir.includes('\\') ? dir.match(/^[A-Za-z]:\\/)?.[0] : '/');
+            if (parent && parent !== dir) {
+              items += `<div class="folder-item" data-path="${escAttr(parent)}">
+                <span class="folder-icon">📁</span>
+                <span class="folder-name">..</span>
+                <span class="folder-arrow">›</span>
+              </div>`;
             }
-            nsBrowserList.innerHTML = data.dirs.map(d => {
+            items += data.dirs.map(d => {
               const name = d.split(/[/\\]/).pop();
               return `<div class="folder-item" data-path="${escAttr(d)}">
                 <span class="folder-icon">📁</span>
@@ -1794,6 +2062,7 @@
                 <span class="folder-arrow">›</span>
               </div>`;
             }).join('');
+            nsBrowserList.innerHTML = items || '<div class="browser-empty">No subfolders</div>';
             nsBrowserList.querySelectorAll('.folder-item').forEach(el => {
               el.addEventListener('click', () => nsBrowseNavigate(el.dataset.path));
             });
@@ -1804,13 +2073,15 @@
         }
 
         function nsBrowseRenderBreadcrumb(dir) {
-          const parts = dir.split('/').filter(Boolean);
-          let html = `<button class="crumb" data-path="/">/</button>`;
-          let accumulated = '';
+          const sep = dir.includes('\\') ? '\\' : '/';
+          const parts = dir.split(/[/\\]/).filter(Boolean);
+          const isWindows = /^[A-Za-z]:/.test(dir);
+          let html = isWindows ? '' : `<button class="crumb" data-path="/">/</button>`;
+          let accumulated = isWindows ? '' : '';
           parts.forEach((part, i) => {
-            accumulated += '/' + part;
+            accumulated += (i === 0 && isWindows ? '' : sep) + part;
             const isCurrent = i === parts.length - 1;
-            html += `<span class="crumb-sep">›</span>`;
+            if (i > 0 || isWindows) html += `<span class="crumb-sep">›</span>`;
             html += `<button class="crumb${isCurrent ? ' current' : ''}" data-path="${escAttr(accumulated)}">${esc(part)}</button>`;
           });
           nsBrowserBreadcrumb.innerHTML = html;
@@ -1826,6 +2097,10 @@
         const sel = document.getElementById('ns-shell');
         try {
           const data = await fetch('/api/shells').then(r => r.json());
+          if (data.cwd) {
+            serverCwd = data.cwd;
+            document.getElementById('ns-cwd').placeholder = data.cwd;
+          }
           sel.innerHTML = data.shells.map(s =>
             '<option value="' + escAttr(s.cmd) + '"' + (s.cmd === data.default ? ' selected' : '') + '>'
             + esc(s.name) + ' (' + esc(s.cmd) + ')</option>'
@@ -1898,8 +2173,9 @@
             for (const id of [...managed.keys()]) {
               if (!serverIds.has(id)) {
                 const ms = managed.get(id);
+                ms.exited = true;
+                if (ms.reconnectTimer) { clearTimeout(ms.reconnectTimer); ms.reconnectTimer = null; }
                 if (ms.ws) try { ms.ws.close(); } catch {}
-                if (ms.reconnectTimer) clearTimeout(ms.reconnectTimer);
                 ms.term.dispose();
                 ms.container.remove();
                 managed.delete(id);
@@ -1913,6 +2189,7 @@
                     statusText.textContent = '';
                     statusDot.className = '';
                     document.getElementById('stop-btn').style.display = 'none';
+                    reconnectOverlay.classList.remove('visible');
                   }
                 }
               }

package/src/auth.js

@@ -1,4 +1,5 @@
 const crypto = require('crypto');
+const log = require('./logger');
 
 const LOGIN_HTML = `<!DOCTYPE html>
 <html lang="en">
@@ -107,6 +108,7 @@ function createAuth(password) {
     const attempts = authAttempts.get(ip) || [];
     const recent = attempts.filter((t) => now - t < window);
     if (recent.length >= maxAttempts) {
+      log.warn(`Auth: rate limit exceeded for ${ip}`);
       return res.status(429).json({ error: 'Too many attempts. Try again later.' });
     }
     recent.push(now);