cli-tunnel 1.1.0 → 1.2.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cli-tunnel",
-  "version": "1.1.0",
-  "description": "Tunnel any CLI app to your phone - PTY + devtunnel + xterm.js",
+  "version": "1.2.0-beta.10",
+  "description": "Tunnel any CLI app to your phone — PTY + devtunnel + xterm.js",
   "type": "module",
   "main": "dist/index.js",
   "bin": {
@@ -13,7 +13,8 @@
   ],
   "scripts": {
     "build": "tsc",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "keywords": [
     "cli",
@@ -35,13 +36,14 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "node-pty": "^1.1.0",
-    "qrcode-terminal": "^0.12.0",
-    "ws": "^8.19.0"
+    "node-pty": "1.1.0",
+    "qrcode-terminal": "0.12.0",
+    "ws": "8.19.0"
   },
   "devDependencies": {
     "@types/node": "^25.3.2",
     "@types/ws": "^8.18.1",
+    "@vitest/coverage-v8": "^4.0.18",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   }

package/remote-ui/app.js

@@ -5,6 +5,27 @@
 (function () {
   'use strict';
 
+  // ─── Mobile keyboard viewport fix ────────────────────────
+  // Keep the key bar visible above the on-screen keyboard
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', () => {
+      const vv = window.visualViewport;
+      const inputArea = document.getElementById('input-area');
+      if (inputArea && vv) {
+        const offset = window.innerHeight - vv.height - vv.offsetTop;
+        inputArea.style.transform = offset > 0 ? `translateY(-${offset}px)` : '';
+      }
+    });
+    window.visualViewport.addEventListener('scroll', () => {
+      const vv = window.visualViewport;
+      const inputArea = document.getElementById('input-area');
+      if (inputArea && vv) {
+        const offset = window.innerHeight - vv.height - vv.offsetTop;
+        inputArea.style.transform = offset > 0 ? `translateY(-${offset}px)` : '';
+      }
+    });
+  }
+
   let ws = null;
   let connected = false;
   let sessionId = null;
@@ -24,7 +45,9 @@
   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 }
 
   // ─── xterm.js Terminal ───────────────────────────────────
   let xterm = null;
@@ -98,7 +121,7 @@
       const data = await resp.json();
       renderDashboard(data.sessions || []);
     } catch (err) {
-      dashboard.innerHTML = '<div style="padding:12px;color:var(--red)">Failed to load sessions: ' + err.message + '</div>';
+      dashboard.innerHTML = '<div style="padding:12px;color:var(--red)">' + escapeHtml('Failed to load sessions: ' + err.message) + '</div>';
     }
   }
 
@@ -106,34 +129,52 @@
     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 ? 'onclick="openSession(\'' + escapeHtml(s.url) + '\')"' : ''}>
+      html += filtered.map(s => {
+        const sessionUrl = s.token ? s.url + '?token=' + encodeURIComponent(s.token) : '';
+        return `
+        <div class="session-card" ${s.online && sessionUrl ? 'data-session-url="' + escapeHtml(sessionUrl) + '"' : ''}>
           <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)}${!s.token && s.online ? ' 🔒' : ''}</div>
           </div>
-          ${s.online ? '<span class="arrow">→</span>' :
-            '<button onclick="event.stopPropagation();deleteSession(\'' + escapeHtml(s.id) + '\')" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px" title="Remove">✕</button>'}
-        </div>
-      `).join('');
+          ${s.online && sessionUrl ? '<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;
+    cachedSessions = sessions;
+    // Event delegation
+    dashboard.querySelectorAll('.session-card[data-session-url]').forEach(function(card) {
+      card.addEventListener('click', function() { openSession(card.dataset.sessionUrl); });
+    });
+    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) => {
@@ -160,7 +201,159 @@
     loadSessions();
   };
 
+  // ─── Grid View (tmux-style multi-terminal) ────────────────
+  function showGridView(sessions) {
+    const connectable = sessions.filter(function(s) { return s.online && s.token; });
+    if (connectable.length === 0) return;
+
+    // Clean up previous grid
+    destroyGrid();
+
+    currentView = 'grid';
+    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 = '';
+
+    // Calculate grid dimensions
+    var cols = connectable.length <= 2 ? connectable.length : connectable.length <= 4 ? 2 : 3;
+    gridEl.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+
+    connectable.forEach(function(s) {
+      var panel = document.createElement('div');
+      panel.className = 'grid-panel';
+
+      // 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>';
+      panel.appendChild(header);
+
+      // Terminal container
+      var termDiv = document.createElement('div');
+      termDiv.className = 'grid-panel-terminal';
+      panel.appendChild(termDiv);
+
+      gridEl.appendChild(panel);
+
+      // Create xterm instance for this panel
+      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);
+
+      // Delay fit to ensure container has size
+      setTimeout(function() { panelFit.fit(); }, 100);
+
+      // Connect WebSocket to this session via ticket auth
+      var statusDot = header.querySelector('.grid-panel-status');
+      var panelWs = null;
+
+      (function connectPanel() {
+        var sessionOrigin = new URL(s.url).origin;
+        fetch(sessionOrigin + '/api/auth/ticket', {
+          method: 'POST',
+          headers: { 'Authorization': 'Bearer ' + s.token }
+        }).then(function(resp) {
+          if (!resp.ok) throw new Error('Auth failed');
+          return resp.json();
+        }).then(function(data) {
+          panelWs = new WebSocket(sessionOrigin.replace('https://', 'wss://') + '?ticket=' + encodeURIComponent(data.ticket));
+
+          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 }));
+            }
+          });
+
+          gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: panelWs, session: s });
+        }).catch(function() {
+          if (statusDot) { statusDot.style.color = 'var(--red)'; statusDot.title = 'Auth failed'; }
+          gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: null, session: s });
+        });
+      })();
+
+      // Click header to go full-screen on this session
+      header.addEventListener('click', function() {
+        window.location.href = s.url + '?token=' + encodeURIComponent(s.token);
+      });
+
+      gridTerminals.push({ xterm: panelXterm, fitAddon: panelFit, ws: panelWs, session: s });
+    });
+
+    // Handle window resize for grid panels
+    window.addEventListener('resize', fitGridPanels);
+
+    // Add back button
+    if ($('#btn-sessions')) { $('#btn-sessions').textContent = 'List'; }
+  }
+
+  function fitGridPanels() {
+    gridTerminals.forEach(function(gt) {
+      if (gt.fitAddon) { try { gt.fitAddon.fit(); } 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'); }
+  }
+
   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');
@@ -170,6 +363,7 @@
       $('#btn-sessions').textContent = 'Terminal';
       loadSessions();
     } else {
+      destroyGrid();
       currentView = 'terminal';
       dashboard.classList.add('hidden');
       $('#input-area').classList.remove('hidden');
@@ -338,14 +532,49 @@
     }
   }
 
+  // ─── Detect hub mode (no token in URL) ────────────────────
+  const isHubMode = new URLSearchParams(window.location.search).get('hub') === '1';
+
   // ─── WebSocket ───────────────────────────────────────────
   let reconnectAttempt = 0;
 
-  function connect() {
-    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  async function connect() {
+    if (isHubMode) {
+      // Hub mode — hide terminal UI, show sessions only
+      setStatus('online', 'Hub');
+      terminal.classList.add('hidden');
+      termContainer.classList.add('hidden');
+      $('#input-area').classList.add('hidden');
+      $('#btn-sessions').classList.add('hidden');
+      dashboard.classList.remove('hidden');
+      loadSessions();
+      // Auto-refresh every 10s
+      setInterval(loadSessions, 10000);
+      return;
+    }
+
     const tokenParam = new URLSearchParams(window.location.search).get('token');
-    const wsUrl = tokenParam ? `${proto}//${location.host}?token=${encodeURIComponent(tokenParam)}` : `${proto}//${location.host}`;
-    ws = new WebSocket(wsUrl);
+    if (!tokenParam) { setStatus('offline', 'No credentials'); return; }
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+
+    // F-02: Ticket-based auth (required)
+    try {
+      const resp = await fetch('/api/auth/ticket', {
+        method: 'POST',
+        headers: { 'Authorization': 'Bearer ' + tokenParam }
+      });
+      if (resp.ok) {
+        const { ticket } = await resp.json();
+        ws = new WebSocket(`${proto}//${location.host}?ticket=${encodeURIComponent(ticket)}`);
+      } else {
+        setStatus('offline', 'Auth failed');
+        return;
+      }
+    } catch {
+      setStatus('offline', 'Auth failed');
+      return;
+    }
     setStatus('connecting', 'Connecting...');
 
     ws.onopen = () => {
@@ -484,10 +713,12 @@
       <h3>${icon} ${escapeHtml(title)}</h3>
       <p>${escapeHtml(shortCmd || JSON.stringify(p).substring(0, 200))}</p>
       <div class="perm-actions">
-        <button class="btn-deny" onclick="handlePerm(${msg.id}, false)">Deny</button>
-        <button class="btn-approve" onclick="handlePerm(${msg.id}, true)">Approve</button>
+        <button class="btn-deny">Deny</button>
+        <button class="btn-approve">Approve</button>
       </div>
     </div>`;
+    permOverlay.querySelector('.btn-deny').addEventListener('click', () => window.handlePerm(msg.id, false));
+    permOverlay.querySelector('.btn-approve').addEventListener('click', () => window.handlePerm(msg.id, true));
   }
   window.handlePerm = (id, approved) => {
     if (ws?.readyState === WebSocket.OPEN) {
@@ -497,6 +728,25 @@
   };
 
   // ─── Mobile Key Bar ───────────────────────────────────────
+  // F-5: Event delegation for key-bar buttons (no inline onclick)
+  const keyBar = document.getElementById('key-bar');
+  if (keyBar) {
+    const keyMap: Record<string, string> = {
+      '\\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 (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 }));

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>

package/remote-ui/styles.css

@@ -172,6 +172,9 @@ header {
   background: var(--bg-tool);
   border-top: 1px solid var(--border);
   flex-shrink: 0;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
 }
 #key-bar {
   display: flex;
@@ -239,10 +242,51 @@ header {
 .session-card .status-dot.offline { background: var(--text-dim); }
 .session-card .info { flex: 1; min-width: 0; }
 .session-card .repo { color: var(--blue); font-weight: bold; font-size: 13px; }
+.session-card .session-name { color: var(--text-bright); font-weight: bold; font-size: 14px; }
 .session-card .branch { color: var(--text-dim); font-size: 11px; }
 .session-card .machine { color: var(--text-dim); font-size: 11px; }
 .session-card .arrow { color: var(--text-dim); }
 
+/* Grid View (tmux-style multi-terminal) */
+#grid-view {
+  flex: 1;
+  display: grid;
+  gap: 2px;
+  padding: 2px;
+  overflow: hidden;
+  background: var(--border);
+}
+.grid-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  overflow: hidden;
+  min-height: 0;
+}
+.grid-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  background: var(--bg-tool);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  cursor: pointer;
+  font-size: 11px;
+}
+.grid-panel-header:hover { background: var(--border); }
+.grid-panel-name { color: var(--blue); font-weight: bold; }
+.grid-panel-machine { color: var(--text-dim); flex: 1; }
+.grid-panel-status { font-size: 8px; color: var(--yellow); }
+.grid-panel-terminal {
+  flex: 1;
+  overflow: hidden;
+}
+.grid-panel-terminal .xterm {
+  height: 100%;
+  padding: 2px;
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }