webtun 1.4.5 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webtun",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "Self-hosted web terminal with Cloudflare Tunnel, file explorer, and PWA support",
   "author": {
     "name": "Gaurang Patel",

package/public/index.html

@@ -550,13 +550,18 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
     CONTEXT MENU
    ═══════════════════════════════════════════════════════ */
-#ctx-menu { position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow-color); z-index: 500; display: none; min-width: 160px; overflow: hidden; }
+#ctx-menu { position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow-color); z-index: 500; display: none; min-width: 160px; overflow: hidden; max-height: calc(100vh - 16px); overflow-y: auto; }
 @media (max-width: 360px) { #ctx-menu { min-width: 140px; max-width: calc(100vw - 16px); font-size: 11px; } }
 #ctx-menu.open { display: block; }
 .ctx-item { padding: 8px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .ctx-item:hover { background: var(--bg4); }
 .ctx-sep { height: 1px; background: var(--border); margin: 3px 0; }
 .ctx-item.danger { color: var(--red); }
+.ctx-submenu-wrap { }
+.ctx-submenu-arrow { margin-left: auto; font-size: 10px; color: var(--fg3); transition: transform 0.15s; }
+.ctx-submenu-wrap.open > .ctx-item > .ctx-submenu-arrow { transform: rotate(90deg); }
+.ctx-submenu-items { display: none; }
+.ctx-submenu-wrap.open > .ctx-submenu-items { display: block; }
 
 /* ═══════════════════════════════════════════════════════
    TOAST
@@ -660,8 +665,65 @@ svg { display: block; }
 #cmd-lib-search {
   width: calc(100% - 28px); height: 28px; font-size: 12px; margin: 8px 14px 0;
 }
+.cmd-lib-tabs {
+  display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.cmd-lib-tab {
+  flex: 1; height: 32px; font-size: 12px; font-weight: 600; color: var(--fg2);
+  background: none; border: none; border-bottom: 2px solid transparent;
+  cursor: pointer; transition: all var(--transition-fast);
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+}
+.cmd-lib-tab:hover { color: var(--fg); background: var(--bg3); }
+.cmd-lib-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+#cmd-hist-list {
+  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; min-height: 0;
+  display: none; flex-direction: column; gap: 2px;
+}
+#cmd-hist-empty {
+  text-align: center; color: var(--fg2); padding: 24px 16px; font-size: 12px;
+}
+.cmd-hist-item {
+  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
+  border-radius: var(--radius-sm); cursor: default; font-size: 12px;
+  transition: background var(--transition-fast);
+}
+.cmd-hist-item:hover { background: var(--bg4); }
+.cmd-hist-item .cmd-hist-cmd {
+  flex: 1; color: var(--fg); font-family: var(--font); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.cmd-hist-item .cmd-hist-time {
+  font-size: 10px; color: var(--fg3); flex-shrink: 0;
+}
+.cmd-hist-item .cmd-hist-run {
+  width: 24px; height: 24px; display: none; align-items: center; justify-content: center;
+  border-radius: var(--radius-sm); color: var(--fg2); flex-shrink: 0; cursor: pointer;
+}
+.cmd-hist-item:hover .cmd-hist-run { display: flex; }
+.cmd-hist-item .cmd-hist-run:hover { background: var(--bg4); color: var(--green); }
+.cmd-hist-item .cmd-hist-del {
+  width: 24px; height: 24px; display: none; align-items: center; justify-content: center;
+  border-radius: var(--radius-sm); color: var(--fg2); flex-shrink: 0; cursor: pointer;
+}
+.cmd-hist-item:hover .cmd-hist-del { display: flex; }
+.cmd-hist-item .cmd-hist-del:hover { color: var(--red); background: var(--bg4); }
+.cmd-hist-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 6px 10px; flex-shrink: 0;
+}
+.cmd-hist-header label { font-size: 11px; color: var(--fg2); display: flex; align-items: center; gap: 4px; }
+.cmd-hist-header input[type="number"] {
+  width: 52px; height: 22px; font-size: 11px; padding: 0 4px; text-align: center;
+}
+.cmd-hist-clear {
+  font-size: 11px; color: var(--red); background: none; border: none; cursor: pointer;
+  padding: 2px 6px; border-radius: var(--radius-sm);
+}
+.cmd-hist-clear:hover { background: var(--bg4); }
 #cmd-lib-list {
-  flex: 1; overflow-y: auto; padding: 6px; min-height: 0;
+  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; min-height: 0;
+  display: flex; flex-direction: column; gap: 2px;
 }
 #cmd-lib-empty {
   text-align: center; color: var(--fg2); padding: 24px 16px; font-size: 12px;
@@ -957,8 +1019,19 @@ svg { display: block; }
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
+          <div class="cmd-lib-tabs">
+            <button class="cmd-lib-tab active" id="cmd-tab-lib" onclick="switchCmdTab('library')">Library</button>
+            <button class="cmd-lib-tab" id="cmd-tab-hist" onclick="switchCmdTab('history')">History</button>
+          </div>
           <input id="cmd-lib-search" type="text" placeholder="Filter commands…" oninput="filterCmdLib()">
           <div id="cmd-lib-list"></div>
+          <div id="cmd-hist-list">
+            <div id="cmd-hist-empty">No commands run yet</div>
+          </div>
+          <div class="cmd-hist-header" id="cmd-hist-header" style="display:none">
+            <label>Keep last <input type="number" id="cmd-hist-max" min="10" max="500" value="50" onchange="updateHistMax(+this.value)"> cmds</label>
+            <button class="cmd-hist-clear" onclick="clearCmdHist()">Clear History</button>
+          </div>
           <div id="cmd-lib-footer">
             <input id="cmd-lib-name-input" type="text" placeholder="Name" onkeydown="if(event.key==='Enter')document.getElementById('cmd-lib-cmd-input').focus()">
             <input id="cmd-lib-cmd-input" type="text" placeholder="Command (e.g. ls -la)" onkeydown="if(event.key==='Enter')addCustomCmd()">
@@ -1198,12 +1271,37 @@ svg { display: block; }
 </div>
 
 <!-- Terminal context menu -->
-<div id="term-ctx-menu" role="menu" style="position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 20px var(--shadow-color);z-index:500;display:none;min-width:160px;overflow:hidden">
+<div id="term-ctx-menu" role="menu" style="position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 20px var(--shadow-color);z-index:500;display:none;min-width:180px;overflow:hidden">
+  <!-- Clipboard -->
   <div class="ctx-item" id="term-ctx-copy" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</div>
   <div class="ctx-item" id="term-ctx-paste" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="14" y="2" width="8" height="8" rx="2"/><path d="M16 14H8M8 18h8"/><path d="M5 4h4"/><rect x="2" y="6" width="16" height="16" rx="2"/></svg> Paste</div>
+  <div class="ctx-sep"></div>
   <div class="ctx-item" id="term-ctx-select-all" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/><path d="M3 9h18"/><path d="M3 15h18"/></svg> Select All</div>
+  <!-- Tab / Path -->
+  <div class="ctx-sep"></div>
+  <div class="ctx-item" id="term-ctx-new-tab" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> New Tab Here</div>
+  <div class="ctx-item" id="term-ctx-copy-cwd" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy Working Directory</div>
+  <!-- Control -->
   <div class="ctx-sep"></div>
-  <div class="ctx-item" id="term-ctx-clear" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> Clear</div>
+  <div class="ctx-item" id="term-ctx-interrupt" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg> Interrupt (Ctrl+C)</div>
+  <!-- More Options -->
+  <div class="ctx-sep"></div>
+  <div class="ctx-submenu-wrap">
+    <div class="ctx-item" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg> More Options<span class="ctx-submenu-arrow">▸</span></div>
+    <div class="ctx-submenu-items">
+      <div class="ctx-item" id="term-ctx-find" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Find in Terminal</div>
+      <div class="ctx-item" id="term-ctx-zoom-in" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg> Zoom In</div>
+      <div class="ctx-item" id="term-ctx-zoom-out" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg> Zoom Out</div>
+      <div class="ctx-item" id="term-ctx-select-line" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/></svg> Select Line</div>
+      <div class="ctx-item" id="term-ctx-scroll-top" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg> Scroll to Top</div>
+      <div class="ctx-item" id="term-ctx-scroll-bottom" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg> Scroll to Bottom</div>
+      <div class="ctx-item" id="term-ctx-rename" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg> Rename Tab</div>
+      <div class="ctx-item" id="term-ctx-bookmark" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg> Bookmark Directory</div>
+    </div>
+  </div>
+  <!-- Danger -->
+  <div class="ctx-sep"></div>
+  <div class="ctx-item danger" id="term-ctx-clear" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> Clear</div>
 </div>
 
 <!-- Fuzzy Finder Modal -->
@@ -1804,6 +1902,25 @@ function connectWebSocket(tab, isReconnect = false) {
 
   const sendInput = data => {
     if (ws.readyState !== WebSocket.OPEN) return;
+    // On Enter, read command from terminal screen buffer (avoids echo-back pollution)
+    for (let i = 0; i < data.length; i++) {
+      const ch = data.charCodeAt(i);
+      if (ch === 13 || ch === 10) { // Enter
+        try {
+          const buf = tab.term.buffer.active;
+          const line = buf.getLine(buf.baseY + buf.cursorY);
+          if (line) {
+            let text = line.translateToString(true).trim();
+            // Strip prompt prefix: find last $ # or % and take text after it
+            const promptEnd = Math.max(text.lastIndexOf('$'), text.lastIndexOf('#'), text.lastIndexOf('%'));
+            if (promptEnd >= 0 && promptEnd < text.length - 1) {
+              text = text.substring(promptEnd + 1).trim();
+            }
+            if (text) addToCmdHist(text);
+          }
+        } catch {}
+      }
+    }
     const enc = new TextEncoder().encode(data);
     const buf = new Uint8Array(1 + enc.length);
     buf[0] = 0x00; buf.set(enc, 1);
@@ -2097,9 +2214,23 @@ function initTerminal(tab) {
     const menu = document.getElementById('term-ctx-menu');
     const sel = term.getSelection();
     document.getElementById('term-ctx-copy').style.opacity = sel ? '' : '0.5';
-    menu.style.left = Math.min(e.clientX, window.innerWidth - 170) + 'px';
-    menu.style.top = Math.min(e.clientY, window.innerHeight - 160) + 'px';
+    // Show first to measure actual dimensions
     menu.style.display = 'block';
+    const mw = menu.offsetWidth;
+    const mh = menu.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = e.clientX;
+    let top = e.clientY;
+    // Flip horizontally if overflowing right
+    if (left + mw > vw) left = Math.max(0, e.clientX - mw);
+    // Flip vertically if overflowing bottom
+    if (top + mh > vh) top = Math.max(0, e.clientY - mh);
+    // Clamp to viewport
+    left = Math.max(0, Math.min(left, vw - mw));
+    top = Math.max(0, Math.min(top, vh - mh));
+    menu.style.left = left + 'px';
+    menu.style.top = top + 'px';
   });
 
   // Touch-to-mouse translation for TUI apps (mobile)
@@ -2686,24 +2817,115 @@ function renderBreadcrumb(fullPath) {
 let fsClipboard = null;
 
 // Terminal context menu actions (registered once)
+function hideTermCtxMenu() {
+  document.getElementById('term-ctx-menu').style.display = 'none';
+  document.querySelectorAll('#term-ctx-menu .ctx-submenu-wrap.open').forEach(el => el.classList.remove('open'));
+}
 document.getElementById('term-ctx-copy').addEventListener('click', () => {
   const t = getActiveTab();
-  if (t?.term) { const sel = t.term.getSelection(); if (sel) navigator.clipboard.writeText(sel); }
-  document.getElementById('term-ctx-menu').style.display = 'none';
+  if (t?.term) {
+    const sel = t.term.getSelection();
+    if (sel) {
+      navigator.clipboard.writeText(sel).then(() => {
+        toast('Copied to clipboard', 'success');
+      }).catch(() => {
+        document.execCommand('copy');
+        toast('Copied to clipboard', 'success');
+      });
+    }
+  }
+  hideTermCtxMenu();
 });
 document.getElementById('term-ctx-paste').addEventListener('click', () => {
   pasteToTerminal();
-  document.getElementById('term-ctx-menu').style.display = 'none';
+  hideTermCtxMenu();
 });
 document.getElementById('term-ctx-select-all').addEventListener('click', () => {
   const t = getActiveTab();
   if (t?.term) t.term.selectAll();
-  document.getElementById('term-ctx-menu').style.display = 'none';
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-select-line').addEventListener('click', () => {
+  selectTermLine();
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-find').addEventListener('click', () => {
+  toggleSearch();
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-zoom-in').addEventListener('click', () => {
+  applyFontSize((settings.fontSize || 14) + 1);
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-zoom-out').addEventListener('click', () => {
+  applyFontSize((settings.fontSize || 14) - 1);
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-new-tab').addEventListener('click', () => {
+  const t = getActiveTab();
+  newTab(null, null, t?.cwd || currentPath);
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-copy-cwd').addEventListener('click', () => {
+  const t = getActiveTab();
+  const cwd = t?.cwd || currentPath;
+  if (cwd) {
+    navigator.clipboard.writeText(cwd).then(() => {
+      toast('Path copied', 'success');
+    }).catch(() => {
+      document.execCommand('copy');
+      toast('Path copied', 'success');
+    });
+  }
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-bookmark').addEventListener('click', () => {
+  const t = getActiveTab();
+  const cwd = t?.cwd || currentPath;
+  if (cwd) {
+    const bm = getBookmarks();
+    if (bm.some(b => b.path === cwd)) { toast('Already bookmarked', 'info'); }
+    else {
+      const sep = cwd.includes('\\') ? '\\' : '/';
+      bm.push({ name: cwd.split(sep).filter(Boolean).pop() || cwd, path: cwd });
+      saveBookmarks(bm);
+      toast('Bookmarked', 'success');
+    }
+  }
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-interrupt').addEventListener('click', () => {
+  sendKey('\x03');
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-rename').addEventListener('click', () => {
+  const t = getActiveTab();
+  if (t?.el) {
+    const span = t.el.querySelector('.tab-title');
+    if (span) span.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+  }
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-scroll-top').addEventListener('click', () => {
+  const t = getActiveTab();
+  if (t?.term) t.term.scrollToTop();
+  hideTermCtxMenu();
+});
+document.getElementById('term-ctx-scroll-bottom').addEventListener('click', () => {
+  const t = getActiveTab();
+  if (t?.term) t.term.scrollToBottom();
+  hideTermCtxMenu();
 });
 document.getElementById('term-ctx-clear').addEventListener('click', () => {
   const t = getActiveTab();
   if (t?.term) t.term.clear();
-  document.getElementById('term-ctx-menu').style.display = 'none';
+  hideTermCtxMenu();
+});
+// Submenu toggle on click
+document.querySelector('#term-ctx-menu .ctx-submenu-wrap > .ctx-item').addEventListener('click', e => {
+  e.stopPropagation();
+  const wrap = e.currentTarget.closest('.ctx-submenu-wrap');
+  wrap.classList.toggle('open');
 });
 
 function showCtxMenu(e, file) {
@@ -2718,24 +2940,21 @@ function showCtxMenu(e, file) {
   document.getElementById('ctx-zip').style.display = '';
   document.getElementById('ctx-folder-size').style.display = file.isDir ? '' : 'none';
   document.getElementById('ctx-extract').style.display = file.isDir ? 'none' : (file.ext === '.zip' ? '' : 'none');
+  // Measure after content is set
   const mw = menu.offsetWidth, mh = menu.offsetHeight;
-  let left = Math.min(e.clientX, window.innerWidth - mw - 8);
-  let top = Math.min(e.clientY, window.innerHeight - mh - 8);
-  if (left < 0) left = 8;
-  if (top < 0) top = 8;
+  const vw = window.innerWidth, vh = window.innerHeight;
+  let left = e.clientX, top = e.clientY;
+  // Flip horizontally if overflowing right
+  if (left + mw > vw) left = Math.max(0, e.clientX - mw);
+  // Flip vertically if overflowing bottom
+  if (top + mh > vh) top = Math.max(0, e.clientY - mh);
+  // Clamp to viewport
+  left = Math.max(0, Math.min(left, vw - mw));
+  top = Math.max(0, Math.min(top, vh - mh));
   menu.style.left = left + 'px';
   menu.style.top = top + 'px';
   menu.classList.add('open');
   menu.style.display = '';
-  requestAnimationFrame(() => {
-    const rect = menu.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-      menu.style.left = Math.max(0, window.innerWidth - rect.width - 8) + 'px';
-    }
-    if (rect.bottom > window.innerHeight) {
-      menu.style.top = Math.max(0, window.innerHeight - rect.height - 8) + 'px';
-    }
-  });
 }
 
 document.addEventListener('click', () => {
@@ -4191,6 +4410,11 @@ function setupKeyboardShortcuts() {
     if (ctrl && e.shiftKey && e.key === 'ArrowLeft') { e.preventDefault(); cycleTab(-1); }
     if (ctrl && e.shiftKey && e.key === 'r') { e.preventDefault(); refreshPreview(); }
     if (e.key === 'Escape') {
+      const termMenu = document.getElementById('term-ctx-menu');
+      if (termMenu && termMenu.style.display !== 'none') {
+        termMenu.style.display = 'none';
+        return;
+      }
       if (document.getElementById('ctx-menu').classList.contains('open')) {
         document.getElementById('ctx-menu').classList.remove('open');
         return;
@@ -4350,6 +4574,7 @@ function pasteToTerminal() {
       const buf = new Uint8Array(1 + enc.length);
       buf[0] = 0x00; buf.set(enc, 1);
       tab.ws.send(buf.buffer);
+      tab.term?.focus();
       toast('Pasted to terminal', 'success');
     }
   };
@@ -4366,14 +4591,16 @@ function fallbackPaste(callback) {
     _pasteInput = document.createElement('textarea');
     _pasteInput.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;z-index:-1';
     document.body.appendChild(_pasteInput);
-    _pasteInput.addEventListener('input', () => {
-      callback(_pasteInput.value);
-      _pasteInput.value = '';
+    _pasteInput.addEventListener('paste', () => {
+      setTimeout(() => {
+        callback(_pasteInput.value);
+        _pasteInput.value = '';
+      }, 0);
     });
   }
   _pasteInput.value = '';
   _pasteInput.focus();
-  toast('Tap & hold to paste', 'info');
+  document.execCommand('paste');
 }
 
 function selectAllTerm() {
@@ -4915,9 +5142,8 @@ function toggleCmdLib() {
   panel.classList.toggle('open');
   document.getElementById('cmd-lib-toggle').classList.toggle('active', !isOpen);
   if (!isOpen) {
-    renderCmdLib();
-    document.getElementById('cmd-lib-search').value = '';
-    document.getElementById('cmd-lib-search').focus();
+    loadHistMax();
+    switchCmdTab('library');
     setTimeout(() => {
       document.addEventListener('click', closeCmdLibOnClickOutside, true);
     }, 0);
@@ -4999,7 +5225,13 @@ function renderCmdLib(filter) {
         item.appendChild(delBtn);
       }
 
-      item.addEventListener('click', () => runCmdLib(c.cmd));
+      item.addEventListener('click', () => {
+        const tab = getActiveTab();
+        if (!tab?.term) return;
+        tab.term.focus();
+        document.execCommand('insertText', false, c.cmd);
+        toggleCmdLib();
+      });
       section.appendChild(item);
     });
     list.appendChild(section);
@@ -5023,6 +5255,7 @@ function runCmdLib(cmd) {
   buf.set(enc, 1);
   tab.ws.send(buf.buffer);
   tab.term?.focus();
+  addToCmdHist(cmd);
   toast('Running: ' + cmd, 'info');
 }
 
@@ -5053,6 +5286,155 @@ function deleteCustomCmd(name, cmd) {
   toast('Command removed', 'info');
 }
 
+// ═══════════════════════════════════════════════════════
+// COMMAND HISTORY (server-side storage)
+// ═══════════════════════════════════════════════════════
+let cmdHistMax = 50;
+let _cmdHistCache = [];
+
+function histHeaders() {
+  return { 'Content-Type': 'application/json', 'x-pin-token': localStorage.getItem('wt-pin') || '' };
+}
+function histHeadersDelete() {
+  return { 'x-pin-token': localStorage.getItem('wt-pin') || '' };
+}
+async function getCmdHist() {
+  try {
+    const r = await fetch('/api/history', { headers: histHeadersDelete() });
+    if (!r.ok) return _cmdHistCache;
+    const data = await r.json();
+    _cmdHistCache = data.history || [];
+    if (data.max) cmdHistMax = data.max;
+    return _cmdHistCache;
+  } catch { return _cmdHistCache; }
+}
+function loadHistMax() {
+  getCmdHist().then(() => {
+    const el = document.getElementById('cmd-hist-max');
+    if (el) el.value = cmdHistMax;
+  });
+}
+async function addToCmdHist(cmd) {
+  if (!cmd || !cmd.trim()) return;
+  // Strip ANSI escapes and control characters, keep only printable + space + tab
+  const clean = cmd.replace(/\x1b\[[0-9;]*[a-zA-Z~]/g, '')
+    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
+    .replace(/[\x00-\x08\x0e-\x1f]/g, '')
+    .trim();
+  if (!clean) return;
+  try {
+    await fetch('/api/history', { method: 'POST', headers: histHeaders(), body: JSON.stringify({ cmd: clean, max: cmdHistMax }) });
+    await getCmdHist();
+  } catch {}
+}
+async function removeCmdHistItem(idx) {
+  try {
+    await fetch('/api/history/' + idx, { method: 'DELETE', headers: histHeadersDelete() });
+    await getCmdHist();
+    renderCmdHist();
+  } catch {}
+}
+async function clearCmdHist() {
+  try {
+    await fetch('/api/history', { method: 'DELETE', headers: histHeadersDelete() });
+    _cmdHistCache = [];
+    renderCmdHist();
+    toast('History cleared', 'info');
+  } catch {}
+}
+async function updateHistMax(val) {
+  cmdHistMax = Math.max(10, Math.min(500, val || 50));
+  try {
+    await fetch('/api/history', { method: 'POST', headers: histHeaders(), body: JSON.stringify({ cmd: '', max: cmdHistMax }) });
+  } catch {}
+}
+function switchCmdTab(tab) {
+  const libBtn = document.getElementById('cmd-tab-lib');
+  const histBtn = document.getElementById('cmd-tab-hist');
+  const libList = document.getElementById('cmd-lib-list');
+  const histList = document.getElementById('cmd-hist-list');
+  const histHeader = document.getElementById('cmd-hist-header');
+  const footer = document.getElementById('cmd-lib-footer');
+  const search = document.getElementById('cmd-lib-search');
+  if (tab === 'library') {
+    libBtn.classList.add('active');
+    histBtn.classList.remove('active');
+    libList.style.display = '';
+    histList.style.display = 'none';
+    histHeader.style.display = 'none';
+    footer.style.display = '';
+    search.placeholder = 'Filter commands…';
+    search.oninput = () => filterCmdLib();
+    filterCmdLib();
+  } else {
+    histBtn.classList.add('active');
+    libBtn.classList.remove('active');
+    histList.style.display = 'flex';
+    libList.style.display = 'none';
+    histHeader.style.display = '';
+    footer.style.display = 'none';
+    search.placeholder = 'Filter history…';
+    search.oninput = () => renderCmdHist();
+    renderCmdHist();
+  }
+  search.value = '';
+  search.focus();
+}
+async function renderCmdHist() {
+  const list = document.getElementById('cmd-hist-list');
+  const hist = await getCmdHist();
+  const q = (document.getElementById('cmd-lib-search').value || '').toLowerCase();
+  const filtered = q ? hist.filter(h => h.cmd.toLowerCase().includes(q)) : hist;
+
+  list.innerHTML = '';
+  if (!filtered.length) {
+    list.innerHTML = '<div id="cmd-hist-empty">No commands run yet</div>';
+    return;
+  }
+
+  filtered.forEach((h, i) => {
+    const realIdx = q ? hist.indexOf(h) : i;
+    const item = document.createElement('div');
+    item.className = 'cmd-hist-item';
+
+    const cmdSpan = document.createElement('span');
+    cmdSpan.className = 'cmd-hist-cmd';
+    cmdSpan.textContent = h.cmd;
+    cmdSpan.title = h.cmd;
+    item.appendChild(cmdSpan);
+
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'cmd-hist-time';
+    const ago = Date.now() - h.time;
+    timeSpan.textContent = ago < 60000 ? 'just now' : ago < 3600000 ? Math.floor(ago / 60000) + 'm ago' : ago < 86400000 ? Math.floor(ago / 3600000) + 'h ago' : new Date(h.time).toLocaleDateString();
+    if (h.count > 1) timeSpan.textContent = '×' + h.count + ' ' + timeSpan.textContent;
+    item.appendChild(timeSpan);
+
+    const runBtn = document.createElement('button');
+    runBtn.className = 'cmd-hist-run';
+    runBtn.title = 'Run in terminal';
+    runBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6,3 20,12 6,21"/></svg>';
+    runBtn.addEventListener('click', e => { e.stopPropagation(); runCmdLib(h.cmd); });
+    item.appendChild(runBtn);
+
+    const delBtn = document.createElement('button');
+    delBtn.className = 'cmd-hist-del';
+    delBtn.title = 'Remove';
+    delBtn.textContent = '×';
+    delBtn.addEventListener('click', e => { e.stopPropagation(); removeCmdHistItem(realIdx); });
+    item.appendChild(delBtn);
+
+    item.addEventListener('click', () => {
+      const tab = getActiveTab();
+      if (!tab?.term) return;
+      tab.term.focus();
+      document.execCommand('insertText', false, h.cmd);
+      toggleCmdLib();
+    });
+    list.appendChild(item);
+  });
+}
+
 // ═══════════════════════════════════════════════════════
 // SYSTEM STATS
 // ═══════════════════════════════════════════════════════

package/server.js

@@ -127,6 +127,14 @@ const WORKSPACE_ROOT = process.env.WORKSPACE_ROOT ? path.resolve(process.env.WOR
 app.use(express.json({ limit: '50mb' }));
 app.use(express.static(path.join(__dirname, 'public')));
 
+// Handle malformed JSON gracefully
+app.use((err, req, res, next) => {
+  if (err.type === 'entity.parse.failed') {
+    return res.status(400).json({ error: 'Invalid JSON' });
+  }
+  next(err);
+});
+
 // Security headers
 app.use((req, res, next) => {
   res.setHeader('X-Content-Type-Options', 'nosniff');
@@ -1205,6 +1213,65 @@ app.delete('/api/clipboard', checkPin, (req, res) => {
   res.json({ success: true });
 });
 
+// ── Command history (server-side, persists across sessions) ────────────
+const HISTORY_FILE = path.join(__dirname, '.cmdhist.json');
+let cmdHistory = [];
+let cmdHistMax = 50;
+
+function loadCmdHistory() {
+  try { cmdHistory = JSON.parse(fs.readFileSync(HISTORY_FILE, 'utf8')); } catch { cmdHistory = []; }
+}
+function saveCmdHistory() {
+  try { fs.writeFileSync(HISTORY_FILE, JSON.stringify(cmdHistory)); } catch {}
+}
+loadCmdHistory();
+
+app.get('/api/history', checkPin, (req, res) => {
+  res.json({ history: cmdHistory, max: cmdHistMax });
+});
+
+app.post('/api/history', checkPin, (req, res) => {
+  try {
+    const { cmd, max } = req.body;
+    if (typeof max === 'number' && max >= 10 && max <= 500) {
+      cmdHistMax = max;
+    }
+    if (!cmd || typeof cmd !== 'string' || !cmd.trim()) {
+      // No command — just updating max
+      saveCmdHistory();
+      return res.json({ success: true, history: cmdHistory, max: cmdHistMax });
+    }
+    const clean = cmd.trim();
+    if (cmdHistory.length && cmdHistory[0].cmd === clean) {
+      cmdHistory[0].time = Date.now();
+      cmdHistory[0].count = (cmdHistory[0].count || 1) + 1;
+    } else {
+      cmdHistory.unshift({ cmd: clean, time: Date.now(), count: 1 });
+    }
+    if (cmdHistory.length > cmdHistMax) cmdHistory.length = cmdHistMax;
+    saveCmdHistory();
+    res.json({ success: true, history: cmdHistory });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+app.delete('/api/history', checkPin, (req, res) => {
+  cmdHistory = [];
+  saveCmdHistory();
+  res.json({ success: true });
+});
+
+app.delete('/api/history/:index', checkPin, (req, res) => {
+  const idx = parseInt(req.params.index);
+  if (isNaN(idx) || idx < 0 || idx >= cmdHistory.length) {
+    return res.status(400).json({ error: 'invalid index' });
+  }
+  cmdHistory.splice(idx, 1);
+  saveCmdHistory();
+  res.json({ success: true, history: cmdHistory });
+});
+
 // ── Session persistence via tmux ──────────────────────────────────────
 const TMUX = (() => { try { return execSync('command -v tmux', { stdio: ['ignore','pipe','ignore'] }).toString().trim(); } catch { return null; } })();