cli-tunnel 1.2.0-beta.9 → 1.2.0

package/remote-ui/app.js

@@ -47,7 +47,10 @@
   const termContainer = $('#terminal-container');
   let currentView = 'terminal'; // 'dashboard', 'terminal', or 'grid'
   let cachedSessions = [];
-  let gridTerminals = []; // { xterm, fitAddon, ws, session }
+  let gridTerminals = []; // { xterm, fitAddon, ws, session, panel }
+  var gridMode = 'thumbnails';
+  var focusedIndex = 0;
+  var tmuxPreset = 'equal';
 
   // ─── xterm.js Terminal ───────────────────────────────────
   let xterm = null;
@@ -117,7 +120,9 @@
 
   async function loadSessions() {
     try {
-      const resp = await fetch('/api/sessions');
+      const tokenParam = new URLSearchParams(window.location.search).get('token');
+      const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+      const resp = await fetch('/api/sessions', { headers });
       const data = await resp.json();
       renderDashboard(data.sessions || []);
     } catch (err) {
@@ -146,17 +151,17 @@
         '</div>';
     } else {
       html += filtered.map(s => {
-        const sessionUrl = s.token ? s.url + '?token=' + encodeURIComponent(s.token) : '';
+        const hasAccess = s.hasToken;
         return `
-        <div class="session-card" ${s.online && sessionUrl ? 'data-session-url="' + escapeHtml(sessionUrl) + '"' : ''}>
+        <div class="session-card" ${s.online && hasAccess ? 'data-session-port="' + s.port + '" data-session-base-url="' + escapeHtml(s.url) + '"' : ''}>
           <span class="status-dot ${s.online ? 'online' : 'offline'}"></span>
           <div class="info">
             <div class="session-name">${escapeHtml(s.name)}</div>
             <div class="repo">📦 ${escapeHtml(s.repo)}</div>
             <div class="branch">🌿 ${escapeHtml(s.branch)}</div>
-            <div class="machine">💻 ${escapeHtml(s.machine)}${!s.token && s.online ? ' 🔒' : ''}</div>
+            <div class="machine">💻 ${escapeHtml(s.machine)}${!hasAccess && s.online ? ' 🔒' : ''}</div>
           </div>
-          ${s.online && sessionUrl ? '<span class="arrow">→</span>' :
+          ${s.online && hasAccess ? '<span class="arrow">→</span>' :
             !s.online ? '<button data-delete-id="' + escapeHtml(s.id) + '" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px" title="Remove">✕</button>'
             : '<span style="color:var(--text-dim);font-size:11px">remote</span>'}
         </div>`;
@@ -165,8 +170,25 @@
     dashboard.innerHTML = html;
     cachedSessions = sessions;
     // Event delegation
-    dashboard.querySelectorAll('.session-card[data-session-url]').forEach(function(card) {
-      card.addEventListener('click', function() { openSession(card.dataset.sessionUrl); });
+    dashboard.querySelectorAll('.session-card[data-session-port]').forEach(function(card) {
+      card.addEventListener('click', function() {
+        var port = card.dataset.sessionPort;
+        var baseUrl = card.dataset.sessionBaseUrl;
+        var tokenParam = new URLSearchParams(window.location.search).get('token');
+        var proxyUrl = '/api/proxy/ticket/' + port;
+        fetch(proxyUrl, {
+          method: 'POST',
+          headers: tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {}
+        }).then(function(r) { return r.json(); }).then(function(data) {
+          if (data.ticket) {
+            window.location.href = baseUrl + '?ticket=' + encodeURIComponent(data.ticket);
+          } else {
+            window.location.href = baseUrl;
+          }
+        }).catch(function() {
+          window.location.href = baseUrl;
+        });
+      });
     });
     dashboard.querySelectorAll('[data-delete-id]').forEach(function(btn) {
       btn.addEventListener('click', function(e) { e.stopPropagation(); deleteSession(btn.dataset.deleteId); });
@@ -187,29 +209,36 @@
   };
 
   window.cleanOffline = async () => {
-    const resp = await fetch('/api/sessions');
+    const tokenParam = new URLSearchParams(window.location.search).get('token');
+    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    const resp = await fetch('/api/sessions', { headers });
     const data = await resp.json();
     const offline = (data.sessions || []).filter(s => !s.online);
     for (const s of offline) {
-      await fetch('/api/sessions/' + s.id, { method: 'DELETE' });
+      await fetch('/api/sessions/' + s.id, { method: 'DELETE', headers });
     }
     loadSessions();
   };
 
   window.deleteSession = async (id) => {
-    await fetch('/api/sessions/' + id, { method: 'DELETE' });
+    const tokenParam = new URLSearchParams(window.location.search).get('token');
+    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    await fetch('/api/sessions/' + id, { method: 'DELETE', headers });
     loadSessions();
   };
 
-  // ─── Grid View (tmux-style multi-terminal) ────────────────
+  // ─── Grid View (multi-terminal with layout modes) ───────────
   function showGridView(sessions) {
-    const connectable = sessions.filter(function(s) { return s.online && s.token; });
+    var connectable = sessions.filter(function(s) { return s.online && s.token; });
     if (connectable.length === 0) return;
 
     // Clean up previous grid
     destroyGrid();
 
     currentView = 'grid';
+    gridMode = 'thumbnails';
+    focusedIndex = 0;
+    tmuxPreset = 'equal';
     dashboard.classList.add('hidden');
     terminal.classList.add('hidden');
     termContainer.classList.add('hidden');
@@ -224,30 +253,95 @@
     gridEl.classList.remove('hidden');
     gridEl.innerHTML = '';
 
-    // Calculate grid dimensions
-    var cols = connectable.length <= 2 ? connectable.length : connectable.length <= 4 ? 2 : 3;
-    gridEl.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+    // ── Toolbar ──
+    var toolbar = document.createElement('div');
+    toolbar.className = 'grid-toolbar';
+
+    var modes = [
+      { id: 'thumbnails', label: '\u229E Tiles' },
+      { id: 'tmux', label: '\u229F Tmux' },
+      { id: 'focus', label: '\u25C9 Focus' },
+      { id: 'fullscreen', label: '\u2A21 Full' }
+    ];
+    modes.forEach(function(m) {
+      var btn = document.createElement('button');
+      btn.textContent = m.label;
+      btn.dataset.mode = m.id;
+      if (m.id === gridMode) btn.classList.add('active');
+      btn.addEventListener('click', function() { switchGridMode(m.id); });
+      toolbar.appendChild(btn);
+    });
+
+    // Tmux preset buttons (visible only in tmux mode)
+    var presetGroup = document.createElement('span');
+    presetGroup.className = 'grid-toolbar-presets hidden';
+    presetGroup.id = 'tmux-presets';
+    var presets = [
+      { id: 'equal', label: '\u2550 Equal' },
+      { id: 'main-side', label: '\u2590 Main+Side' },
+      { id: 'stacked', label: '\u2261 Stacked' }
+    ];
+    presets.forEach(function(p) {
+      var btn = document.createElement('button');
+      btn.textContent = p.label;
+      btn.dataset.preset = p.id;
+      if (p.id === tmuxPreset) btn.classList.add('active');
+      btn.addEventListener('click', function() { switchTmuxPreset(p.id); });
+      presetGroup.appendChild(btn);
+    });
+    toolbar.appendChild(presetGroup);
+
+    var spacer = document.createElement('span');
+    spacer.className = 'spacer';
+    toolbar.appendChild(spacer);
+
+    var listBtn = document.createElement('button');
+    listBtn.textContent = '\u2190 List';
+    listBtn.addEventListener('click', function() {
+      destroyGrid();
+      currentView = 'dashboard';
+      dashboard.classList.remove('hidden');
+      if ($('#btn-sessions')) $('#btn-sessions').textContent = 'Terminal';
+      loadSessions();
+    });
+    toolbar.appendChild(listBtn);
+    gridEl.appendChild(toolbar);
+
+    // ── Content container ──
+    var contentEl = document.createElement('div');
+    contentEl.id = 'grid-content';
+    gridEl.appendChild(contentEl);
 
-    connectable.forEach(function(s) {
+    // ── Create panels & connect ──
+    connectable.forEach(function(s, index) {
       var panel = document.createElement('div');
       panel.className = 'grid-panel';
+      panel.dataset.index = index;
 
-      // Header
       var header = document.createElement('div');
       header.className = 'grid-panel-header';
-      header.innerHTML = '<span class="grid-panel-name">' + escapeHtml(s.name) + '</span>' +
-        '<span class="grid-panel-machine">' + escapeHtml(s.machine) + '</span>' +
-        '<span class="grid-panel-status">●</span>';
+      var nameSpan = document.createElement('span');
+      nameSpan.className = 'grid-panel-name';
+      nameSpan.textContent = s.name;
+      var machineSpan = document.createElement('span');
+      machineSpan.className = 'grid-panel-machine';
+      machineSpan.textContent = s.machine;
+      var statusDot = document.createElement('span');
+      statusDot.className = 'grid-panel-status';
+      statusDot.textContent = '\u25CF';
+      header.appendChild(nameSpan);
+      header.appendChild(machineSpan);
+      header.appendChild(statusDot);
       panel.appendChild(header);
 
-      // Terminal container
       var termDiv = document.createElement('div');
       termDiv.className = 'grid-panel-terminal';
       panel.appendChild(termDiv);
 
-      gridEl.appendChild(panel);
+      // Append to contentEl so xterm.open has a DOM-attached container
+      contentEl.appendChild(panel);
 
-      // Create xterm instance for this panel
+      // xterm instance
       var panelXterm = new Terminal({
         theme: {
           background: '#0d1117', foreground: '#c9d1d9', cursor: '#3fb950',
@@ -262,60 +356,229 @@
       panelXterm.loadAddon(panelFit);
       panelXterm.open(termDiv);
 
-      // Delay fit to ensure container has size
-      setTimeout(function() { panelFit.fit(); }, 100);
+      // Store entry before async connect so index is stable
+      var entry = { xterm: panelXterm, fitAddon: panelFit, ws: null, session: s, panel: panel };
+      gridTerminals.push(entry);
 
       // Connect WebSocket to this session
-      var proto = 'wss:';
-      var wsUrl = s.url.replace('https://', 'wss://') + '?token=' + encodeURIComponent(s.token);
-      var panelWs = new WebSocket(wsUrl);
-      var statusDot = header.querySelector('.grid-panel-status');
-
-      panelWs.onopen = function() {
-        if (statusDot) { statusDot.style.color = 'var(--green)'; statusDot.title = 'Connected'; }
-        // Send initial size
-        panelWs.send(JSON.stringify({ type: 'pty_resize', cols: panelXterm.cols, rows: panelXterm.rows }));
-      };
-      panelWs.onclose = function() {
-        if (statusDot) { statusDot.style.color = 'var(--red)'; statusDot.title = 'Disconnected'; }
-      };
-      panelWs.onerror = function() {
-        if (statusDot) { statusDot.style.color = 'var(--red)'; }
-      };
-      panelWs.onmessage = function(e) {
-        try {
-          var msg = JSON.parse(e.data);
-          if (msg.type === 'pty') {
-            panelXterm.write(msg.data);
-          }
-        } catch (err) {}
-      };
+      (function connectPanel() {
+        // Use hub's proxy endpoint to get a ticket for the session
+        var tokenParam = new URLSearchParams(window.location.search).get('token');
+        var proxyUrl = '/api/proxy/ticket/' + s.port;
+        var wsBase = s.isLocal ? 'ws://127.0.0.1:' + s.port : s.url.replace('https://', 'wss://');
+
+        fetch(proxyUrl, {
+          method: 'POST',
+          headers: { 'Authorization': 'Bearer ' + tokenParam }
+        }).then(function(resp) {
+          if (!resp.ok) throw new Error('Auth failed');
+          return resp.json();
+        }).then(function(data) {
+          var panelWs = new WebSocket(wsBase + '?ticket=' + encodeURIComponent(data.ticket));
+          entry.ws = panelWs;
+
+          panelWs.onopen = function() {
+            if (statusDot) { statusDot.style.color = 'var(--green)'; statusDot.title = 'Connected'; }
+            panelWs.send(JSON.stringify({ type: 'pty_resize', cols: panelXterm.cols, rows: panelXterm.rows }));
+          };
+          panelWs.onclose = function() {
+            if (statusDot) { statusDot.style.color = 'var(--red)'; statusDot.title = 'Disconnected'; }
+          };
+          panelWs.onerror = function() {
+            if (statusDot) { statusDot.style.color = 'var(--red)'; }
+          };
+          panelWs.onmessage = function(e) {
+            try {
+              var msg = JSON.parse(e.data);
+              if (msg.type === 'pty') {
+                panelXterm.write(msg.data);
+              }
+            } catch (err) {}
+          };
+
+          panelXterm.onData(function(data) {
+            if (panelWs && panelWs.readyState === WebSocket.OPEN) {
+              panelWs.send(JSON.stringify({ type: 'pty_input', data: data }));
+            }
+          });
+        }).catch(function() {
+          if (statusDot) { statusDot.style.color = 'var(--red)'; statusDot.title = 'Auth failed'; }
+        });
+      })();
+    });
 
-      // Keyboard input from this panel → send to its session
-      panelXterm.onData(function(data) {
-        if (panelWs.readyState === WebSocket.OPEN) {
-          panelWs.send(JSON.stringify({ type: 'pty_input', data: data }));
-        }
+    // ── Event delegation for panel clicks ──
+    contentEl.addEventListener('click', function(e) {
+      var panel = e.target.closest('.grid-panel');
+      if (!panel) return;
+      var idx = parseInt(panel.dataset.index, 10);
+      if (isNaN(idx)) return;
+
+      if (gridMode === 'thumbnails') {
+        focusedIndex = idx;
+        switchGridMode('fullscreen');
+      } else if (gridMode === 'focus' && panel.classList.contains('focus-strip')) {
+        focusedIndex = idx;
+        applyGridLayout('focus');
+      } else if (gridMode === 'tmux') {
+        focusedIndex = idx;
+        contentEl.querySelectorAll('.grid-panel').forEach(function(p) { p.classList.remove('active'); });
+        panel.classList.add('active');
+      }
+    });
+
+    // Apply initial layout
+    applyGridLayout(gridMode);
+
+    // Handle window resize
+    window.removeEventListener('resize', fitGridPanels);
+    window.addEventListener('resize', fitGridPanels);
+    if ($('#btn-sessions')) { $('#btn-sessions').textContent = 'List'; }
+  }
+
+  function switchGridMode(mode) {
+    gridMode = mode;
+    if (mode === 'fullscreen') {
+      $('#input-area').classList.remove('hidden');
+      $('#input-form').classList.add('hidden');
+    } else {
+      $('#input-area').classList.add('hidden');
+    }
+    applyGridLayout(mode);
+  }
+
+  function switchTmuxPreset(preset) {
+    tmuxPreset = preset;
+    var presetGroup = document.getElementById('tmux-presets');
+    if (presetGroup) {
+      presetGroup.querySelectorAll('[data-preset]').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.preset === preset);
       });
+    }
+    if (gridMode === 'tmux') applyGridLayout('tmux');
+  }
+
+  function applyGridLayout(mode) {
+    gridMode = mode;
+    var contentEl = document.getElementById('grid-content');
+    if (!contentEl || gridTerminals.length === 0) return;
+
+    // Clamp focusedIndex
+    if (focusedIndex >= gridTerminals.length) focusedIndex = 0;
 
-      // Click header to go full-screen on this session
-      header.addEventListener('click', function() {
-        window.location.href = s.url + '?token=' + encodeURIComponent(s.token);
+    // Update toolbar button states
+    var toolbar = contentEl.parentElement.querySelector('.grid-toolbar');
+    if (toolbar) {
+      toolbar.querySelectorAll('[data-mode]').forEach(function(btn) {
+        btn.classList.toggle('active', btn.dataset.mode === mode);
       });
+      var presetsEl = document.getElementById('tmux-presets');
+      if (presetsEl) presetsEl.classList.toggle('hidden', mode !== 'tmux');
+    }
 
-      gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: panelWs, session: s });
+    // Detach all panels without destroying them
+    gridTerminals.forEach(function(gt, i) {
+      if (gt.panel.parentNode) gt.panel.parentNode.removeChild(gt.panel);
+      gt.panel.className = 'grid-panel';
+      gt.panel.dataset.index = i;
+      var termDiv = gt.panel.querySelector('.grid-panel-terminal');
+      if (termDiv) termDiv.style.cssText = '';
+      gt.panel.style.cssText = '';
     });
 
-    // Handle window resize for grid panels
-    window.addEventListener('resize', fitGridPanels);
+    // Remove leftover elements (focus-strips, back-to-grid button)
+    while (contentEl.firstChild) contentEl.removeChild(contentEl.firstChild);
+
+    // Reset content styles
+    contentEl.className = 'mode-' + mode;
+    contentEl.style.cssText = '';
+
+    switch (mode) {
+      case 'thumbnails':
+        gridTerminals.forEach(function(gt) {
+          gt.panel.classList.add('thumbnail');
+          var termDiv = gt.panel.querySelector('.grid-panel-terminal');
+          termDiv.style.width = '560px';
+          termDiv.style.height = '360px';
+          termDiv.style.transform = 'scale(0.5)';
+          termDiv.style.transformOrigin = 'top left';
+          contentEl.appendChild(gt.panel);
+        });
+        break;
+
+      case 'tmux':
+        gridTerminals.forEach(function(gt, i) {
+          if (i === focusedIndex) gt.panel.classList.add('active');
+          contentEl.appendChild(gt.panel);
+        });
+        if (tmuxPreset === 'equal') {
+          var cols = gridTerminals.length <= 2 ? gridTerminals.length : gridTerminals.length <= 4 ? 2 : 3;
+          contentEl.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+        } else if (tmuxPreset === 'main-side') {
+          contentEl.style.gridTemplateColumns = '70% 30%';
+          var sideCount = Math.max(gridTerminals.length - 1, 1);
+          contentEl.style.gridTemplateRows = 'repeat(' + sideCount + ', 1fr)';
+          if (gridTerminals.length > 0) gridTerminals[0].panel.style.gridRow = '1 / -1';
+        } else if (tmuxPreset === 'stacked') {
+          contentEl.style.gridTemplateColumns = '1fr';
+        }
+        break;
+
+      case 'focus':
+        var mainGt = gridTerminals[focusedIndex];
+        mainGt.panel.classList.add('focus-main');
+        contentEl.appendChild(mainGt.panel);
+        if (gridTerminals.length > 1) {
+          var stripsEl = document.createElement('div');
+          stripsEl.className = 'focus-strips';
+          gridTerminals.forEach(function(gt, i) {
+            if (i === focusedIndex) return;
+            gt.panel.classList.add('focus-strip');
+            stripsEl.appendChild(gt.panel);
+          });
+          contentEl.appendChild(stripsEl);
+        }
+        break;
+
+      case 'fullscreen':
+        var fullGt = gridTerminals[focusedIndex];
+        fullGt.panel.classList.add('fullscreen');
+        contentEl.appendChild(fullGt.panel);
+        var backBtn = document.createElement('button');
+        backBtn.className = 'back-to-grid';
+        backBtn.textContent = '\u2190 Grid';
+        backBtn.addEventListener('click', function() { switchGridMode('thumbnails'); });
+        contentEl.appendChild(backBtn);
+        break;
+    }
 
-    // Add back button
-    if ($('#btn-sessions')) { $('#btn-sessions').textContent = 'List'; }
+    // Fit visible terminals after DOM settles
+    setTimeout(function() {
+      gridTerminals.forEach(function(gt) {
+        if (!document.contains(gt.panel)) return;
+        if (gt.fitAddon) {
+          try {
+            gt.fitAddon.fit();
+            if (gt.ws && gt.ws.readyState === WebSocket.OPEN && gt.xterm) {
+              gt.ws.send(JSON.stringify({ type: 'pty_resize', cols: gt.xterm.cols, rows: gt.xterm.rows }));
+            }
+          } catch(e) {}
+        }
+      });
+    }, 100);
   }
 
   function fitGridPanels() {
     gridTerminals.forEach(function(gt) {
-      if (gt.fitAddon) { try { gt.fitAddon.fit(); } catch(e) {} }
+      if (!document.contains(gt.panel)) return;
+      if (gt.fitAddon) {
+        try {
+          gt.fitAddon.fit();
+          if (gt.ws && gt.ws.readyState === WebSocket.OPEN && gt.xterm) {
+            gt.ws.send(JSON.stringify({ type: 'pty_resize', cols: gt.xterm.cols, rows: gt.xterm.rows }));
+          }
+        } catch(e) {}
+      }
     });
   }
 
@@ -328,6 +591,10 @@
     window.removeEventListener('resize', fitGridPanels);
     var gridEl = document.getElementById('grid-view');
     if (gridEl) { gridEl.innerHTML = ''; gridEl.classList.add('hidden'); }
+    $('#input-area').classList.add('hidden');
+    gridMode = 'thumbnails';
+    focusedIndex = 0;
+    tmuxPreset = 'equal';
   }
 
   window.toggleView = () => {
@@ -519,7 +786,7 @@
   }
 
   // ─── Detect hub mode (no token in URL) ────────────────────
-  const isHubMode = !new URLSearchParams(window.location.search).get('token');
+  const isHubMode = new URLSearchParams(window.location.search).get('hub') === '1';
 
   // ─── WebSocket ───────────────────────────────────────────
   let reconnectAttempt = 0;
@@ -544,7 +811,7 @@
 
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
 
-    // F-02: Try ticket-based auth first
+    // F-02: Ticket-based auth (required)
     try {
       const resp = await fetch('/api/auth/ticket', {
         method: 'POST',
@@ -554,12 +821,12 @@
         const { ticket } = await resp.json();
         ws = new WebSocket(`${proto}//${location.host}?ticket=${encodeURIComponent(ticket)}`);
       } else {
-        // Fallback to token-in-URL (backward compat)
-        ws = new WebSocket(`${proto}//${location.host}?token=${encodeURIComponent(tokenParam)}`);
+        setStatus('offline', 'Auth failed');
+        return;
       }
     } catch {
-      // Fallback to token-in-URL
-      ws = new WebSocket(`${proto}//${location.host}?token=${encodeURIComponent(tokenParam)}`);
+      setStatus('offline', 'Auth failed');
+      return;
     }
     setStatus('connecting', 'Connecting...');
 
@@ -714,6 +981,33 @@
   };
 
   // ─── Mobile Key Bar ───────────────────────────────────────
+  // F-5: Event delegation for key-bar buttons (no inline onclick)
+  const keyBar = document.getElementById('key-bar');
+  if (keyBar) {
+    var keyMap = {
+      '\\x1b[A': '\x1b[A', '\\x1b[B': '\x1b[B', '\\x1b[C': '\x1b[C', '\\x1b[D': '\x1b[D',
+      '\\t': '\t', '\\r': '\r', '\\x1b': '\x1b', '\\x03': '\x03', ' ': ' ', '\\x7f': '\x7f',
+    };
+    keyBar.addEventListener('click', function(e) {
+      var btn = e.target;
+      if (btn && btn.tagName === 'BUTTON' && btn.dataset.key) {
+        var key = keyMap[btn.dataset.key] || btn.dataset.key;
+        if (currentView === 'grid' && gridMode === 'fullscreen' && gridTerminals[focusedIndex]) {
+          var gt = gridTerminals[focusedIndex];
+          if (gt.ws && gt.ws.readyState === WebSocket.OPEN) {
+            gt.ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+          }
+          if (gt.xterm) gt.xterm.focus();
+        } else {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'pty_input', data: key }));
+          }
+          if (xterm) xterm.focus();
+        }
+      }
+    });
+  }
+
   window.sendKey = (key) => {
     if (ws && ws.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify({ type: 'pty_input', data: key }));
@@ -758,7 +1052,7 @@
     requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
   }
   function escapeHtml(s) {
-    const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML.replace(/'/g, '&#39;');
+    const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML.replace(/'/g, '&#39;').replace(/"/g, '&quot;');
   }
   function formatText(text) {
     return escapeHtml(text)

package/remote-ui/index.html

@@ -32,16 +32,16 @@
 
     <footer id="input-area">
       <div id="key-bar">
-        <button onclick="sendKey('\x1b[A')">↑</button>
-        <button onclick="sendKey('\x1b[B')">↓</button>
-        <button onclick="sendKey('\x1b[C')">→</button>
-        <button onclick="sendKey('\x1b[D')">←</button>
-        <button onclick="sendKey('\t')">Tab</button>
-        <button onclick="sendKey('\r')">Enter</button>
-        <button onclick="sendKey('\x1b')">Esc</button>
-        <button onclick="sendKey('\x03')">Ctrl+C</button>
-        <button onclick="sendKey(' ')">Space</button>
-        <button onclick="sendKey('\x7f')">⌫</button>
+        <button data-key="\x1b[A">↑</button>
+        <button data-key="\x1b[B">↓</button>
+        <button data-key="\x1b[C">→</button>
+        <button data-key="\x1b[D">←</button>
+        <button data-key="\t">Tab</button>
+        <button data-key="\r">Enter</button>
+        <button data-key="\x1b">Esc</button>
+        <button data-key="\x03">Ctrl+C</button>
+        <button data-key=" ">Space</button>
+        <button data-key="\x7f">⌫</button>
       </div>
       <form id="input-form">
         <span class="prompt">&gt;</span>