cli-tunnel 1.2.0-beta.7 → 1.2.0-beta.9

package/dist/index.js

@@ -113,6 +113,44 @@ function getGitInfo() {
 }
 // ─── Security: Session token for WebSocket auth ────────────
 const sessionToken = crypto.randomUUID();
+// ─── Session file registry (IPC via filesystem) ────────────
+const sessionsDir = path.join(os.homedir(), '.cli-tunnel', 'sessions');
+fs.mkdirSync(sessionsDir, { recursive: true, mode: 0o700 });
+let sessionFilePath = null;
+function writeSessionFile(tunnelId, tunnelUrl, port) {
+    sessionFilePath = path.join(sessionsDir, `${tunnelId}.json`);
+    const data = JSON.stringify({
+        token: sessionToken, name: sessionName || command,
+        tunnelId, tunnelUrl, port, hubMode,
+        machine: os.hostname(), pid: process.pid,
+        createdAt: new Date().toISOString(),
+    });
+    fs.writeFileSync(sessionFilePath, data, { mode: 0o600 });
+}
+function removeSessionFile() {
+    if (sessionFilePath) {
+        try {
+            fs.unlinkSync(sessionFilePath);
+        }
+        catch { }
+    }
+}
+function readLocalSessions() {
+    try {
+        return fs.readdirSync(sessionsDir)
+            .filter(f => f.endsWith('.json'))
+            .map(f => { try {
+            return JSON.parse(fs.readFileSync(path.join(sessionsDir, f), 'utf-8'));
+        }
+        catch {
+            return null;
+        } })
+            .filter((s) => s !== null && !s.hubMode);
+    }
+    catch {
+        return [];
+    }
+}
 // ─── F-18: Session TTL (24 hours) ──────────────────────────
 const SESSION_TTL = 24 * 60 * 60 * 1000; // 24 hours
 const sessionCreatedAt = Date.now();
@@ -189,26 +227,37 @@ const server = http.createServer((req, res) => {
         }
     }
     // Sessions API
-    if (req.url === '/api/sessions' && req.method === 'GET') {
+    if ((req.url === '/api/sessions' || req.url?.startsWith('/api/sessions?')) && req.method === 'GET') {
         try {
             const output = execFileSync('devtunnel', ['list', '--labels', 'cli-tunnel', '--json'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
             const data = JSON.parse(output);
+            const localMachine = os.hostname();
+            const localSessions = hubMode ? readLocalSessions() : [];
+            const tokenMap = new Map(localSessions.map(s => [s.tunnelId, s.token]));
             const sessions = (data.tunnels || []).map((t) => {
                 const labels = t.labels || [];
                 const id = t.tunnelId?.replace(/\.\w+$/, '') || t.tunnelId;
                 const cluster = t.tunnelId?.split('.').pop() || 'euw';
                 const portLabel = labels.find((l) => l.startsWith('port-'));
                 const p = portLabel ? parseInt(portLabel.replace('port-', ''), 10) : 3456;
-                return {
+                const machine = labels[4] || 'unknown';
+                const session = {
                     id, tunnelId: t.tunnelId,
                     name: labels[1] || 'unnamed',
                     repo: labels[2] || 'unknown',
                     branch: (labels[3] || 'unknown').replace(/_/g, '/'),
-                    machine: labels[4] || 'unknown',
+                    machine,
                     online: (t.hostConnections || 0) > 0,
                     port: p,
                     url: `https://${id}-${p}.${cluster}.devtunnels.ms`,
+                    isLocal: machine === localMachine,
                 };
+                // Attach token from local session files (hub mode only)
+                const baseId = t.tunnelId?.split('.')[0] || t.tunnelId;
+                const token = tokenMap.get(baseId) || tokenMap.get(t.tunnelId);
+                if (token)
+                    session.token = token;
+                return session;
             });
             res.writeHead(200, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
             res.end(JSON.stringify({ sessions }));
@@ -243,7 +292,9 @@ const server = http.createServer((req, res) => {
     // #18: Guard against malformed URI encoding
     let decodedUrl;
     try {
-        decodedUrl = decodeURIComponent(req.url || '/');
+        // Strip query string before resolving file path
+        const urlPath = (req.url || '/').split('?')[0];
+        decodedUrl = decodeURIComponent(urlPath);
     }
     catch {
         res.writeHead(400);
@@ -531,17 +582,19 @@ async function main() {
                 });
                 const tunnelUrlWithToken = `${url}?token=${sessionToken}`;
                 console.log(`  ${GREEN}✓${RESET} Tunnel: ${BOLD}${tunnelUrlWithToken}${RESET}\n`);
+                // Write session file for hub discovery
+                writeSessionFile(tunnelId, url, actualPort);
                 try {
                     // @ts-ignore
                     const qr = (await import('qrcode-terminal'));
                     qr.default.generate(tunnelUrlWithToken, { small: true }, (code) => console.log(code));
                 }
                 catch { }
-                process.on('SIGINT', () => { hostProc.kill(); try {
+                process.on('SIGINT', () => { removeSessionFile(); hostProc.kill(); try {
                     execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe' });
                 }
                 catch { } });
-                process.on('exit', () => { hostProc.kill(); try {
+                process.on('exit', () => { removeSessionFile(); hostProc.kill(); try {
                     execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe' });
                 }
                 catch { } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cli-tunnel",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0-beta.9",
   "description": "Tunnel any CLI app to your phone — PTY + devtunnel + xterm.js",
   "type": "module",
   "main": "dist/index.js",

package/remote-ui/app.js

@@ -45,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;
@@ -127,41 +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 ? 'data-session-url="' + 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 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 && 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;
-    // #16: XSS fix — use event delegation instead of inline onclick
+    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) => {
@@ -188,7 +201,145 @@
     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
+      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) {}
+      };
+
+      // 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 }));
+        }
+      });
+
+      // 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');
@@ -198,6 +349,7 @@
       $('#btn-sessions').textContent = 'Terminal';
       loadSessions();
     } else {
+      destroyGrid();
       currentView = 'terminal';
       dashboard.classList.add('hidden');
       $('#input-area').classList.remove('hidden');

package/remote-ui/styles.css

@@ -242,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; }