cli-tunnel 1.3.1-beta.5 → 1.3.1-beta.7

package/README.md

@@ -163,12 +163,13 @@ cli-tunnel uses a layered security model:
 
 ## Terminal Size Behavior
 
-cli-tunnel uses a single PTY shared between your local terminal and all remote viewers. When a phone connects, the PTY resizes to match the remote device's screen dimensions — the CLI app renders correctly on the device you're actively using.
+cli-tunnel uses a single PTY shared between your local terminal and all remote viewers. The PTY stays at your local terminal's dimensions — remote devices view the terminal through their own xterm.js viewport.
 
 **Tips for the best experience:**
 - Rotate your phone to landscape for a wider terminal
 - Use the key bar (↑↓←→ Tab Enter Esc Ctrl+C) at the bottom for navigation
-- If multiple devices connect, the last one to resize wins
+- To select text on the local terminal, hold **Shift** while clicking/dragging (raw mode captures all input otherwise)
+- Use `--no-wait` flag to skip the press-any-key prompt (useful for scripting)
 
 ## FAQ
 

package/dist/index.js

@@ -564,7 +564,8 @@ wss.on('connection', (ws, req) => {
     });
     ws.on('close', () => connections.delete(id));
 });
-// F-10: WS heartbeat — ping every 30s, close unresponsive after 10s
+// F-10: WS heartbeat — ping every 2 minutes, close unresponsive connections
+// Longer interval prevents killing phone connections that go to background briefly
 setInterval(() => {
     for (const [id, ws] of connections) {
         if (ws._isAlive === false) {
@@ -575,7 +576,7 @@ setInterval(() => {
         ws._isAlive = false;
         ws.ping();
     }
-}, 30000);
+}, 120000);
 function broadcast(data) {
     const redacted = redactSecrets(data);
     const msg = JSON.stringify({ type: 'pty', data: redacted });
@@ -785,13 +786,9 @@ async function main() {
             if (process.stdin.isTTY)
                 process.stdin.setRawMode(true);
             process.stdin.resume();
-            process.stdin.once('data', () => {
-                if (process.stdin.isTTY)
-                    process.stdin.setRawMode(false);
-                process.stdin.pause();
-                resolve();
-            });
+            process.stdin.once('data', () => resolve());
         });
+        // Don't pause or reset raw mode — we'll set it up properly for PTY below
     }
     console.log(`  ${DIM}Starting ${command}...${RESET}\n`);
     // Clear screen before PTY takes over — prevents overlap with banner/QR output

package/package.json

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

package/remote-ui/app.js

@@ -259,55 +259,94 @@
       var resp = await fetch('/api/sessions', { headers: headers });
       if (!resp.ok) throw new Error('Status ' + resp.status);
       var data = await resp.json();
-      renderDashboard(data.sessions || []);
+      if (!isHubMode) {
+        renderNonHubSessions(data.sessions || []);
+      } else {
+        renderDashboard(data.sessions || []);
+      }
     } catch (err) {
       dashboard.innerHTML = '<div style="padding:20px 12px;color:var(--text-dim);text-align:center">' +
         escapeHtml('Sessions unavailable. Use Hub mode (cli-tunnel with no command) to see all sessions.') + '</div>';
     }
   }
 
+  function renderNonHubSessions(sessions) {
+    var currentName = document.title || 'this session';
+    var html = '<div class="non-hub-view">' +
+      '<div class="non-hub-current">You\'re connected to: <strong>' + escapeHtml(currentName) + '</strong></div>' +
+      '<div class="non-hub-back"><a href="#" data-action="back-to-terminal">← Back to terminal</a></div>' +
+      '<div class="non-hub-hint">Start a Hub to see all sessions: <code>cli-tunnel</code> (no command)</div>' +
+      '</div>';
+    dashboard.innerHTML = html;
+    var backLink = dashboard.querySelector('[data-action="back-to-terminal"]');
+    if (backLink) {
+      backLink.addEventListener('click', function(e) { e.preventDefault(); toggleView(); });
+    }
+  }
+
   function renderDashboard(sessions) {
-    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>
-      ${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>`;
+    var filtered = showOffline ? sessions : sessions.filter(function(s) { return s.online; });
+    var offlineCount = sessions.filter(function(s) { return !s.online; }).length;
+    var connectable = filtered.filter(function(s) { return s.online && s.hasToken; });
+    var remoteCount = filtered.length - connectable.length;
+
+    // Hub header
+    var html = '<div class="hub-header">' +
+      '<h2 class="hub-title">cli-tunnel Hub</h2>' +
+      '<div class="hub-stats">' + connectable.length + ' connectable · ' + remoteCount + ' remote' +
+        (offlineCount > 0 ? ' · ' + offlineCount + ' offline' : '') +
+        ' <span class="hub-refresh-indicator" title="Auto-refreshes every 10s">↻</span>' +
+      '</div>' +
+      '</div>';
+
+    // Toolbar actions
+    html += '<div class="hub-toolbar">' +
+      '<button data-action="toggle-offline" class="hub-toolbar-btn">' + (showOffline ? 'Hide offline' : 'Show offline') + '</button>' +
+      (offlineCount > 0 ? '<button data-action="clean-offline" class="hub-toolbar-btn hub-toolbar-btn-danger">Clean offline</button>' : '') +
+      '<button data-action="refresh" class="hub-toolbar-btn">↻ Refresh</button>' +
+      '</div>';
+
+    // Grid banner when 2+ connectable
+    if (connectable.length >= 2) {
+      html += '<div class="grid-banner" data-action="grid-view">' +
+        '<span>Monitor all sessions live</span>' +
+        '<span class="grid-banner-btn">⊞ Open Grid View</span>' +
+        '</div>';
+    }
 
     if (filtered.length === 0) {
       html += '<div style="padding:20px 12px;color:var(--text-dim);text-align:center">' +
         (sessions.length === 0 ? 'No cli-tunnel sessions found.' : 'No online sessions. Tap "Show offline" to see stale ones.') +
         '</div>';
     } else {
-      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)}${!hasAccess && s.online ? ' 🔒' : ''}</div>
-          </div>
-          ${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('');
+      filtered.forEach(function(s) {
+        var canConnect = s.online && s.hasToken;
+        html += '<div class="session-card-v2' + (canConnect ? ' connectable' : '') + '"' +
+          (canConnect ? ' data-session-port="' + s.port + '" data-session-base-url="' + escapeHtml(s.url) + '"' : '') + '>' +
+          '<div class="card-header">' +
+            '<span class="card-status ' + (s.online ? 'online' : 'offline') + '"></span>' +
+            '<span class="card-name">' + escapeHtml(s.name) + '</span>' +
+            (canConnect ? '<span class="card-connect">Connect →</span>' :
+             s.online ? '<span class="card-remote">Remote 🔒</span>' :
+             '<span class="card-offline">Offline</span>') +
+          '</div>' +
+          '<div class="card-details">' +
+            '<span>💻 ' + escapeHtml(s.machine) + '</span>' +
+            '<span>📦 ' + escapeHtml(s.repo) + '</span>' +
+            '<span>🌿 ' + escapeHtml(s.branch) + '</span>' +
+          '</div>' +
+          (!s.online ? '<button data-delete-id="' + escapeHtml(s.id) + '" class="card-delete" title="Remove">✕</button>' : '') +
+          '</div>';
+      });
     }
+
     dashboard.innerHTML = html;
     cachedSessions = sessions;
+
     // Event delegation
-    dashboard.querySelectorAll('.session-card[data-session-port]').forEach(function(card) {
-      card.addEventListener('click', function() {
+    dashboard.querySelectorAll('.session-card-v2[data-session-port]').forEach(function(card) {
+      card.addEventListener('click', function(e) {
+        if (e.target.closest('[data-delete-id]')) return;
         var port = card.dataset.sessionPort;
         var baseUrl = card.dataset.sessionBaseUrl;
         var tokenParam = new URLSearchParams(window.location.search).get('token');
@@ -365,7 +404,7 @@
 
   // ─── Grid View (multi-terminal with layout modes) ───────────
   function showGridView(sessions) {
-    var connectable = sessions.filter(function(s) { return s.online && s.token; });
+    var connectable = sessions.filter(function(s) { return s.online && s.hasToken; });
     if (connectable.length === 0) return;
 
     // Clean up previous grid
@@ -985,7 +1024,7 @@
     ws.onclose = () => {
       if (isRecording) { stopRecording(); var btn = document.getElementById('btn-record'); if (btn) { btn.classList.remove('recording'); btn.textContent = '⏺'; btn.title = 'Record terminal'; } }
       connected = false; acpReady = false; sessionId = null;
-      setStatus('offline', 'Disconnected');
+      setStatus('offline', 'Reconnecting...');
       const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempt)) + Math.random() * 1000;
       reconnectAttempt++;
       setTimeout(connect, delay);
@@ -999,6 +1038,14 @@
     };
   }
 
+  // Reconnect immediately when phone comes back from background
+  document.addEventListener('visibilitychange', function() {
+    if (!document.hidden && !connected && !isHubMode) {
+      reconnectAttempt = 0;
+      connect();
+    }
+  });
+
   // ─── Message Handler ─────────────────────────────────────
   function handleMessage(msg) {
     // Replay events from bridge recording

package/remote-ui/index.html

@@ -42,8 +42,6 @@
         <button data-key="\x03">Ctrl+C</button>
         <button data-key=" ">Space</button>
         <button data-key="\x7f">⌫</button>
-        <button id="btn-record" data-action="toggle-record" title="Record terminal" aria-label="Record terminal">⏺</button>
-        <button id="btn-screenshot" data-action="take-screenshot" title="Screenshot terminal" aria-label="Screenshot terminal">📷</button>
       </div>
       <form id="input-form">
         <span class="prompt">&gt;</span>

package/remote-ui/styles.css

@@ -250,6 +250,79 @@ header {
 .session-card .machine { color: var(--text-dim); font-size: 11px; }
 .session-card .arrow { color: var(--text-dim); }
 
+/* Hub Dashboard Header */
+.hub-header { padding: 16px 12px 8px; }
+.hub-title { color: var(--text-bright); font-size: 18px; font-weight: bold; margin: 0 0 4px; font-family: var(--font); }
+.hub-stats { color: var(--text-dim); font-size: 12px; }
+.hub-refresh-indicator { display: inline-block; animation: spin 2s linear infinite; font-size: 10px; }
+@keyframes spin { 100% { transform: rotate(360deg); } }
+
+/* Hub Toolbar */
+.hub-toolbar { display: flex; gap: 6px; padding: 4px 12px 8px; flex-wrap: wrap; }
+.hub-toolbar-btn {
+  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;
+}
+.hub-toolbar-btn:hover { border-color: var(--blue); color: var(--blue); }
+.hub-toolbar-btn-danger { border-color: var(--red); color: var(--red); }
+.hub-toolbar-btn-danger:hover { background: var(--red); color: #fff; }
+
+/* Grid Banner */
+.grid-banner {
+  margin: 8px; padding: 12px 16px; background: var(--bg-tool);
+  border: 1px solid var(--blue); border-radius: 8px;
+  display: flex; justify-content: space-between; align-items: center;
+  cursor: pointer;
+}
+.grid-banner:hover { background: var(--border); }
+.grid-banner span:first-child { color: var(--text); font-size: 13px; }
+.grid-banner-btn { color: var(--blue); font-weight: bold; font-size: 13px; }
+
+/* Session Card v2 */
+.session-card-v2 {
+  background: var(--bg-tool); border: 1px solid var(--border); border-radius: 8px;
+  padding: 12px; margin: 6px 8px; position: relative;
+}
+.session-card-v2.connectable { cursor: pointer; }
+.session-card-v2.connectable:hover { border-color: var(--green); }
+.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.card-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.card-status.online { background: var(--green); }
+.card-status.offline { background: var(--text-dim); }
+.card-name { color: var(--text-bright); font-weight: bold; font-size: 15px; flex: 1; }
+.card-connect { color: var(--green); font-size: 13px; font-weight: bold; }
+.card-remote { color: var(--text-dim); font-size: 11px; }
+.card-offline { color: var(--red); font-size: 11px; }
+.card-details { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-dim); font-size: 11px; }
+.card-delete {
+  background: none; border: none; color: var(--red); cursor: pointer;
+  font-size: 14px; position: absolute; top: 8px; right: 8px;
+}
+.card-delete:hover { color: var(--text-bright); }
+
+/* Non-Hub Sessions View */
+.non-hub-view { padding: 24px 16px; text-align: center; }
+.non-hub-current {
+  color: var(--text-bright); font-size: 15px; margin-bottom: 16px;
+  padding: 12px; background: var(--bg-tool); border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.non-hub-current strong { color: var(--green); }
+.non-hub-back { margin-bottom: 16px; }
+.non-hub-back a {
+  color: var(--blue); text-decoration: none; font-size: 13px;
+}
+.non-hub-back a:hover { text-decoration: underline; }
+.non-hub-hint {
+  color: var(--text-dim); font-size: 12px;
+  padding: 10px; background: var(--bg-tool); border-radius: 6px;
+}
+.non-hub-hint code {
+  color: var(--cyan); background: var(--bg); padding: 2px 6px;
+  border-radius: 3px; font-family: var(--font);
+}
+
 /* Grid View (multi-terminal with layout modes) */
 #grid-view {
   flex: 1;