cli-tunnel 1.2.0-beta.8 → 1.2.0

package/remote-ui/app.js

@@ -45,7 +45,12 @@
   const permOverlay = $('#permission-overlay');
   const dashboard = $('#dashboard');
   const termContainer = $('#terminal-container');
-  let currentView = 'terminal'; // 'dashboard' or 'terminal'
+  let currentView = 'terminal'; // 'dashboard', 'terminal', or 'grid'
+  let cachedSessions = [];
+  let gridTerminals = []; // { xterm, fitAddon, ws, session, panel }
+  var gridMode = 'thumbnails';
+  var focusedIndex = 0;
+  var tmuxPreset = 'equal';
 
   // ─── xterm.js Terminal ───────────────────────────────────
   let xterm = null;
@@ -115,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) {
@@ -127,41 +134,69 @@
     const filtered = showOffline ? sessions : sessions.filter(s => s.online);
     const offlineCount = sessions.filter(s => !s.online).length;
     const onlineCount = sessions.filter(s => s.online).length;
+    const connectable = filtered.filter(s => s.online && s.token);
 
     let html = `<div style="padding:8px 4px;display:flex;align-items:center;gap:8px">
       <span style="color:var(--text-dim);font-size:12px">${onlineCount} online${offlineCount > 0 ? ', ' + offlineCount + ' offline' : ''}</span>
       <span style="flex:1"></span>
-      <button onclick="toggleOffline()" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">${showOffline ? 'Hide offline' : 'Show offline'}</button>
-      ${offlineCount > 0 ? '<button onclick="cleanOffline()" style="background:none;border:1px solid var(--red);color:var(--red);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">Clean offline</button>' : ''}
-      <button onclick="loadSessions()" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">↻</button>
+      ${connectable.length > 1 ? '<button data-action="grid-view" style="background:none;border:1px solid var(--blue);color:var(--blue);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">⊞ Grid</button>' : ''}
+      <button data-action="toggle-offline" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">${showOffline ? 'Hide offline' : 'Show offline'}</button>
+      ${offlineCount > 0 ? '<button data-action="clean-offline" style="background:none;border:1px solid var(--red);color:var(--red);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">Clean offline</button>' : ''}
+      <button data-action="refresh" style="background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer">↻</button>
     </div>`;
 
     if (filtered.length === 0) {
       html += '<div style="padding:20px 12px;color:var(--text-dim);text-align:center">' +
-        (sessions.length === 0 ? 'No Squad RC sessions found.' : 'No online sessions. Tap "Show offline" to see stale ones.') +
+        (sessions.length === 0 ? 'No cli-tunnel sessions found.' : 'No online sessions. Tap "Show offline" to see stale ones.') +
         '</div>';
     } else {
-      html += filtered.map(s => `
-        <div class="session-card" ${s.online ? 'data-session-url="' + escapeHtml(s.url) + '"' : ''}>
+      html += filtered.map(s => {
+        const hasAccess = s.hasToken;
+        return `
+        <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)}</div>
+            <div class="machine">💻 ${escapeHtml(s.machine)}${!hasAccess && s.online ? ' 🔒' : ''}</div>
           </div>
-          ${s.online ? '<span class="arrow">→</span>' :
-            '<button data-delete-id="' + escapeHtml(s.id) + '" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px" title="Remove">✕</button>'}
-        </div>
-      `).join('');
+          ${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>`;
+      }).join('');
     }
     dashboard.innerHTML = html;
-    // #16: XSS fix — use event delegation instead of inline onclick
-    dashboard.querySelectorAll('.session-card[data-session-url]').forEach(function(card) {
-      card.addEventListener('click', function() { openSession(card.dataset.sessionUrl); });
+    cachedSessions = sessions;
+    // Event delegation
+    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); });
     });
+    dashboard.querySelector('[data-action="toggle-offline"]')?.addEventListener('click', function() { toggleOffline(); });
+    dashboard.querySelector('[data-action="clean-offline"]')?.addEventListener('click', function() { cleanOffline(); });
+    dashboard.querySelector('[data-action="refresh"]')?.addEventListener('click', function() { loadSessions(); });
+    dashboard.querySelector('[data-action="grid-view"]')?.addEventListener('click', function() { showGridView(sessions); });
   }
 
   window.openSession = (url) => {
@@ -174,21 +209,404 @@
   };
 
   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 (multi-terminal with layout modes) ───────────
+  function showGridView(sessions) {
+    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');
+    $('#input-area').classList.add('hidden');
+
+    var gridEl = document.getElementById('grid-view');
+    if (!gridEl) {
+      gridEl = document.createElement('div');
+      gridEl.id = 'grid-view';
+      document.getElementById('app').insertBefore(gridEl, document.getElementById('input-area'));
+    }
+    gridEl.classList.remove('hidden');
+    gridEl.innerHTML = '';
+
+    // ── 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);
+
+    // ── Create panels & connect ──
+    connectable.forEach(function(s, index) {
+      var panel = document.createElement('div');
+      panel.className = 'grid-panel';
+      panel.dataset.index = index;
+
+      var header = document.createElement('div');
+      header.className = 'grid-panel-header';
+      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);
+
+      var termDiv = document.createElement('div');
+      termDiv.className = 'grid-panel-terminal';
+      panel.appendChild(termDiv);
+
+      // Append to contentEl so xterm.open has a DOM-attached container
+      contentEl.appendChild(panel);
+
+      // xterm instance
+      var panelXterm = new Terminal({
+        theme: {
+          background: '#0d1117', foreground: '#c9d1d9', cursor: '#3fb950',
+          selectionBackground: '#264f78',
+        },
+        fontFamily: "'Cascadia Code', 'SF Mono', 'Fira Code', 'Menlo', monospace",
+        fontSize: 11,
+        scrollback: 1000,
+        cursorBlink: true,
+      });
+      var panelFit = new FitAddon.FitAddon();
+      panelXterm.loadAddon(panelFit);
+      panelXterm.open(termDiv);
+
+      // 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
+      (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'; }
+        });
+      })();
+    });
+
+    // ── 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;
+
+    // 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');
+    }
+
+    // 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 = '';
+    });
+
+    // 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;
+    }
+
+    // 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 (!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) {}
+      }
+    });
+  }
+
+  function destroyGrid() {
+    gridTerminals.forEach(function(gt) {
+      if (gt.ws) { try { gt.ws.close(); } catch(e) {} }
+      if (gt.xterm) { try { gt.xterm.dispose(); } catch(e) {} }
+    });
+    gridTerminals = [];
+    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 = () => {
+    if (currentView === 'grid') {
+      // Grid → dashboard (list view)
+      destroyGrid();
+      currentView = 'dashboard';
+      dashboard.classList.remove('hidden');
+      $('#btn-sessions').textContent = 'Terminal';
+      loadSessions();
+      return;
+    }
     if (currentView === 'terminal') {
       currentView = 'dashboard';
       terminal.classList.add('hidden');
@@ -198,6 +616,7 @@
       $('#btn-sessions').textContent = 'Terminal';
       loadSessions();
     } else {
+      destroyGrid();
       currentView = 'terminal';
       dashboard.classList.add('hidden');
       $('#input-area').classList.remove('hidden');
@@ -367,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;
@@ -392,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',
@@ -402,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...');
 
@@ -562,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 }));
@@ -606,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>