webtun 1.4.2 → 1.4.5

package/public/index.html

@@ -14,6 +14,8 @@
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0.7.0/lib/addon-unicode11.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.1/lib/addon-webgl.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.css">
@@ -166,6 +168,8 @@ svg { display: block; }
 .term-wrapper.active { display: flex; }
 .xterm { flex: 1; }
 .xterm-viewport { border-radius: 0; }
+.term-bell-flash { animation: bellFlash 0.15s ease-out; }
+@keyframes bellFlash { 0% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
 #terminals.tiles-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 4px; padding: 4px; position: relative; overflow: auto; min-height: 0; overscroll-behavior: none; }
 #terminals.tiles-mode .term-wrapper { position: relative; inset: unset; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 150px; }
 #terminals.tiles-mode .term-wrapper.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@@ -1152,6 +1156,7 @@ svg { display: block; }
             <div style="display:flex;align-items:center;gap:8px">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
               <span>WebTun</span>
+              <span id="about-version" style="color:var(--fg3);font-size:11px"></span>
             </div>
             <div style="display:flex;align-items:center;gap:8px">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--fg2)" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
@@ -1192,6 +1197,15 @@ svg { display: block; }
   <div class="ctx-item danger" id="ctx-delete" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg> Delete</div>
 </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 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-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>
+  <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>
+
 <!-- Fuzzy Finder Modal -->
 <div class="overlay" id="finder-overlay">
   <div class="modal modal-md" style="padding:12px">
@@ -1361,6 +1375,7 @@ let settings = {
   cursor: 'block', blink: true, scrollback: 5000, bell: false,
   mobilekeys: false, confirmclose: true, datasaver: false, autostart: false, keepAwake: false
 };
+let serverPlatform = '';
 
 const isElectron = !!(window.electronAPI && window.electronAPI.isElectron);
 
@@ -1470,6 +1485,7 @@ async function unlockApp() {
   const info = await api('/api/home');
   homeDir = info.home;
   currentPath = homeDir;
+  serverPlatform = info.platform || '';
   document.getElementById('hostname-badge').textContent = info.hostname || '—';
 
   // Check tmux availability
@@ -1818,10 +1834,77 @@ function connectWebSocket(tab, isReconnect = false) {
     setupVisualViewport();
   };
 
+  // OSC sequence handler: intercepts OSC 7, 133, 52 before passing to xterm.js
+  let oscBuf = '';
+  function processTerminalOutput(data) {
+    const str = typeof data === 'string' ? data : new TextDecoder().decode(data);
+    let out = '';
+    let i = 0;
+    while (i < str.length) {
+      // Look for ESC ] (OSC introducer)
+      if (str[i] === '\x1b' && str[i + 1] === ']') {
+        const endIdx = str.indexOf('\x07', i + 2);
+        const stIdx = str.indexOf('\x1b\\', i + 2);
+        let oscEnd = -1;
+        if (endIdx !== -1 && (stIdx === -1 || endIdx < stIdx)) oscEnd = endIdx;
+        else if (stIdx !== -1) oscEnd = stIdx;
+
+        if (oscEnd !== -1) {
+          const oscData = str.substring(i + 2, oscEnd);
+          const semi = oscData.indexOf(';');
+          if (semi !== -1) {
+            const code = oscData.substring(0, semi);
+            const value = oscData.substring(semi + 1);
+            if (code === '7') {
+              // OSC 7: CWD update — file://hostname/path
+              try {
+                const url = new URL(value);
+                tab.cwd = decodeURIComponent(url.pathname);
+              } catch (_) {}
+            } else if (code === '133') {
+              // OSC 133: Shell integration markers (prompt/cmd start/end/done)
+              // Handled silently — available for future command tracking
+            } else if (code === '52') {
+              // OSC 52: Clipboard operations
+              const parts = value.split(';');
+              const targets = parts[0] || 'c';
+              const b64 = parts.slice(1).join(';');
+              if (b64) {
+                // SET clipboard
+                try {
+                  const decoded = atob(b64);
+                  if (targets.includes('c') || targets.includes('p')) {
+                    navigator.clipboard.writeText(decoded).catch(() => {});
+                  }
+                } catch (_) {}
+              } else {
+                // GET clipboard — respond with current clipboard contents
+                navigator.clipboard.readText().then(text => {
+                  const response = '\x1b]52;c;' + btoa(text) + '\x07';
+                  if (tab.ws && tab.ws.readyState === WebSocket.OPEN) {
+                    const enc = new TextEncoder().encode(response);
+                    const buf = new Uint8Array(1 + enc.length);
+                    buf[0] = 0x00; buf.set(enc, 1);
+                    tab.ws.send(buf.buffer);
+                  }
+                }).catch(() => {});
+              }
+            }
+          }
+          i = oscEnd + (str[oscEnd] === '\x07' ? 1 : 2);
+          continue;
+        }
+      }
+      out += str[i];
+      i++;
+    }
+    if (out) tab.term.write(out);
+  }
+
   ws.onmessage = e => {
     const buf = new Uint8Array(e.data);
     const type = buf[0], payload = buf.slice(1);
-    if (type === 0x00) tab.term.write(payload);
+    if (type === 0x00) processTerminalOutput(payload);
     else if (type === 0x01) tab.term.writeln('\r\n\x1b[31m[Process exited]\x1b[0m');
     else if (type === 0x02) tab.term.writeln('\r\n\x1b[31m' + new TextDecoder().decode(payload) + '\x1b[0m');
   };
@@ -1918,7 +2001,7 @@ function initTerminal(tab) {
     scrollback: settings.scrollback,
     allowTransparency: false,
     theme: getXtermTheme(),
-    windowsMode: false,
+    windowsMode: serverPlatform === 'win32',
     convertEol: false,
     bellStyle: settings.bell ? 'sound' : 'none',
     smoothScrollDuration: 80,
@@ -1938,6 +2021,19 @@ function initTerminal(tab) {
   term.loadAddon(searchAddon);
   term.loadAddon(webLinksAddon);
 
+  try {
+    const unicodeAddon = new Unicode11Addon.Unicode11Addon();
+    term.loadAddon(unicodeAddon);
+    term.unicode.activeVersion = '11';
+  } catch (_) {}
+
+  // GPU-accelerated renderer — falls back to canvas if WebGL unavailable
+  try {
+    const webglAddon = new WebglAddon.WebglAddon();
+    webglAddon.onContextLoss(() => { webglAddon.dispose(); });
+    term.loadAddon(webglAddon);
+  } catch (_) {}
+
   term.open(tab.wrapper);
 
   tab.term = term;
@@ -1959,6 +2055,23 @@ function initTerminal(tab) {
     tab.el.querySelector('.tab-title').textContent = tab.title;
   });
 
+  // Bell: visual flash + desktop notification for background tabs
+  term.onBell(() => {
+    // Visual flash on terminal screen
+    const screen = term.element?.querySelector('.xterm-screen');
+    if (screen) {
+      screen.classList.remove('term-bell-flash');
+      void screen.offsetWidth; // reflow to restart animation
+      screen.classList.add('term-bell-flash');
+    }
+    // Desktop notification if tab is in the background
+    if (document.hidden && settings.bell && Notification.permission === 'granted') {
+      try {
+        new Notification(tab.title || 'WebTun', { body: 'Terminal bell', tag: 'webtun-bell' });
+      } catch (_) {}
+    }
+  });
+
   // Resize observer
   tab.resizeObserver = new ResizeObserver(() => {
     if (activeTabId === tab.id) { try { fitTerm(tab); } catch(e) { console.warn(e); } }
@@ -1978,6 +2091,55 @@ function initTerminal(tab) {
     }
   });
 
+  // Terminal right-click context menu
+  term.element.addEventListener('contextmenu', e => {
+    e.preventDefault();
+    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';
+    menu.style.display = 'block';
+  });
+
+  // Touch-to-mouse translation for TUI apps (mobile)
+  let _tapTimeout = null, _tapPos = null, _longPressTimer = null;
+  term.element.addEventListener('touchstart', e => {
+    if (e.touches.length !== 1) return;
+    const touch = e.touches[0];
+    _tapPos = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    // Long press detection for right-click
+    _longPressTimer = setTimeout(() => {
+      if (_tapPos) {
+        const evt = new MouseEvent('mousedown', { clientX: _tapPos.x, clientY: _tapPos.y, button: 2, bubbles: true });
+        term.element.dispatchEvent(evt);
+        const upEvt = new MouseEvent('mouseup', { clientX: _tapPos.x, clientY: _tapPos.y, button: 2, bubbles: true });
+        term.element.dispatchEvent(upEvt);
+        _tapPos = null;
+      }
+    }, 500);
+  }, { passive: true });
+  term.element.addEventListener('touchend', e => {
+    clearTimeout(_longPressTimer);
+    if (!_tapPos || e.changedTouches.length !== 1) return;
+    const touch = e.changedTouches[0];
+    const dx = Math.abs(touch.clientX - _tapPos.x);
+    const dy = Math.abs(touch.clientY - _tapPos.y);
+    const dt = Date.now() - _tapPos.time;
+    if (dx < 10 && dy < 10 && dt < 300) {
+      // Short tap → left click
+      const evt = new MouseEvent('mousedown', { clientX: touch.clientX, clientY: touch.clientY, button: 0, bubbles: true });
+      term.element.dispatchEvent(evt);
+      const upEvt = new MouseEvent('mouseup', { clientX: touch.clientX, clientY: touch.clientY, button: 0, bubbles: true });
+      term.element.dispatchEvent(upEvt);
+    }
+    _tapPos = null;
+  }, { passive: true });
+  term.element.addEventListener('touchmove', () => {
+    clearTimeout(_longPressTimer);
+    _tapPos = null;
+  }, { passive: true });
+
   // Fit terminal then connect WebSocket — ensures WS uses correct dimensions
   requestAnimationFrame(() => {
     fitTerm(tab);
@@ -2109,6 +2271,10 @@ function sendKey(key) {
       altLatch = false;
     }
     updateModifierButtons();
+  } else {
+    shiftLatch = false;
+    altLatch = false;
+    updateModifierButtons();
   }
   const tab = getActiveTab();
   if (tab?.ws?.readyState === WebSocket.OPEN) {
@@ -2437,27 +2603,74 @@ function formatSize(bytes) {
   return (bytes / 1073741824).toFixed(1) + ' GB';
 }
 
-function renderBreadcrumb(path) {
+function renderBreadcrumb(fullPath) {
   const el = document.getElementById('file-breadcrumb');
   if (!el) return;
-  const parts = path.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+  const isWin = /\\/.test(fullPath) || /^[A-Za-z]:/.test(fullPath);
+  const sep = isWin ? '\\' : '/';
   let html = '';
-  let accumulated = '';
-  for (const part of parts) {
-    accumulated += '/' + part;
-    const isLast = part === parts[parts.length - 1];
-    if (isLast) {
-      html += `<span style="color:var(--fg);font-weight:500">${escHtml(part)}</span>`;
+
+  if (isWin) {
+    // e.g. C:\Users\name or \\server\share\path
+    const normalized = fullPath.replace(/\//g, '\\');
+    const unc = normalized.startsWith('\\\\');
+    let rest = normalized;
+    let accumulated = '';
+    const segments = [];
+
+    if (unc) {
+      const m = normalized.match(/^\\\\[^\\]+\\[^\\]+/);
+      if (m) {
+        segments.push({ label: m[0], path: m[0] });
+        rest = normalized.slice(m[0].length).replace(/^\\+/, '');
+        accumulated = m[0];
+      }
     } else {
-      html += `<a href="#" data-path="${escHtml(accumulated)}" style="color:var(--accent);text-decoration:none;padding:4px 2px;display:inline-block">${escHtml(part)}</a>`;
-      html += `<span style="color:var(--fg2);margin:0 2px">/</span>`;
+      const driveMatch = normalized.match(/^([A-Za-z]:)(.*)$/);
+      if (driveMatch) {
+        const root = driveMatch[1] + '\\';
+        segments.push({ label: driveMatch[1], path: root });
+        rest = (driveMatch[2] || '').replace(/^\\+/, '');
+        accumulated = root;
+      }
+    }
+
+    const parts = rest.split('\\').filter(Boolean);
+    for (let i = 0; i < parts.length; i++) {
+      accumulated = accumulated.endsWith('\\') ? accumulated + parts[i] : accumulated + '\\' + parts[i];
+      segments.push({ label: parts[i], path: accumulated });
+    }
+
+    if (!segments.length) {
+      html = `<span style="color:var(--fg2)">\\</span><span style="color:var(--fg2);font-size:11px;margin-left:6px">(root)</span>`;
+    } else {
+      html = segments.map((seg, i) => {
+        const isLast = i === segments.length - 1;
+        if (isLast) return `<span style="color:var(--fg);font-weight:500">${escHtml(seg.label)}</span>`;
+        return `<a href="#" data-path="${escHtml(seg.path)}" style="color:var(--accent);text-decoration:none;padding:4px 2px;display:inline-block">${escHtml(seg.label)}</a>` +
+          `<span style="color:var(--fg2);margin:0 2px">\\</span>`;
+      }).join('');
+    }
+  } else {
+    const parts = fullPath.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+    let accumulated = '';
+    for (const part of parts) {
+      accumulated += '/' + part;
+      const isLast = part === parts[parts.length - 1];
+      if (isLast) {
+        html += `<span style="color:var(--fg);font-weight:500">${escHtml(part)}</span>`;
+      } else {
+        html += `<a href="#" data-path="${escHtml(accumulated)}" style="color:var(--accent);text-decoration:none;padding:4px 2px;display:inline-block">${escHtml(part)}</a>`;
+        html += `<span style="color:var(--fg2);margin:0 2px">/</span>`;
+      }
+    }
+    if (!parts.length) {
+      html = `<span style="color:var(--fg2)">/</span><span style="color:var(--fg2);font-size:11px;margin-left:6px">(root)</span>`;
     }
   }
-  if (!parts.length) {
-    html = `<span style="color:var(--fg2)">/</span><span style="color:var(--fg2);font-size:11px;margin-left:6px">(root)</span>`;
-  }
+
   el.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--fg2);margin-right:4px;vertical-align:middle"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>' + html;
-  
+
   if (!el.dataset.delegated) {
     el.addEventListener('click', e => {
       const a = e.target.closest('a[data-path]');
@@ -2472,6 +2685,27 @@ function renderBreadcrumb(path) {
 // ═══════════════════════════════════════════════════════
 let fsClipboard = null;
 
+// Terminal context menu actions (registered once)
+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';
+});
+document.getElementById('term-ctx-paste').addEventListener('click', () => {
+  pasteToTerminal();
+  document.getElementById('term-ctx-menu').style.display = 'none';
+});
+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';
+});
+document.getElementById('term-ctx-clear').addEventListener('click', () => {
+  const t = getActiveTab();
+  if (t?.term) t.term.clear();
+  document.getElementById('term-ctx-menu').style.display = 'none';
+});
+
 function showCtxMenu(e, file) {
   e.preventDefault();
   ctxTarget = file;
@@ -2504,7 +2738,11 @@ function showCtxMenu(e, file) {
   });
 }
 
-document.addEventListener('click', () => document.getElementById('ctx-menu').classList.remove('open'));
+document.addEventListener('click', () => {
+  document.getElementById('ctx-menu').classList.remove('open');
+  const termMenu = document.getElementById('term-ctx-menu');
+  if (termMenu) termMenu.style.display = 'none';
+});
 
 document.getElementById('ctx-open').onclick = () => { if (!ctxTarget) return; if (isImageFile(ctxTarget.path)) openImageViewer(ctxTarget.path); else loadFiles(ctxTarget.path); };
 document.getElementById('ctx-edit').onclick = () => ctxTarget && openFileEditor(ctxTarget.path);
@@ -3450,6 +3688,9 @@ function toggleSetting(k) {
     const ctrlBtn = document.getElementById('ctrl-toggle-btn');
     if (ctrlBtn) ctrlBtn.style.background = '';
   }
+  if (k === 'bell' && settings.bell && 'Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+  }
   if (k === 'datasaver') {
     if (settings.datasaver) {
       if (sysStatsTimer) { clearInterval(sysStatsTimer); sysStatsTimer = null; }
@@ -4103,7 +4344,9 @@ function pasteToTerminal() {
     if (!text) return;
     const tab = getActiveTab();
     if (tab?.ws && tab.ws.readyState === WebSocket.OPEN) {
-      const enc = new TextEncoder().encode(text);
+      // Bracketed paste: wrap in escape sequences so the shell buffers the input
+      const bracketed = '\x1b[200~' + text + '\x1b[201~';
+      const enc = new TextEncoder().encode(bracketed);
       const buf = new Uint8Array(1 + enc.length);
       buf[0] = 0x00; buf.set(enc, 1);
       tab.ws.send(buf.buffer);
@@ -4947,6 +5190,12 @@ function registerSW() {
 // ═══════════════════════════════════════════════════════
 init().catch(e => console.error('Init failed:', e));
 
+// Set version in About section
+fetch('/api/version').then(r => r.json()).then(d => {
+  const el = document.getElementById('about-version');
+  if (el) el.textContent = 'v' + (d.version || '');
+}).catch(() => {});
+
 // Warn before closing if there are unsaved changes or active terminals
 window.addEventListener('beforeunload', e => {
   const editorOpen = document.getElementById('editor-view').classList.contains('open');