cli-tunnel 1.3.1-beta.6 → 1.3.1-beta.9

package/README.md

@@ -69,7 +69,7 @@ cli-tunnel --port 4000 copilot
 cli-tunnel --local copilot --yolo
 ```
 
-**cli-tunnel's own flags** (`--local`, `--port`, `--name`, `--replay`) must come **before** the command.
+**cli-tunnel's own flags** (`--local`, `--port`, `--name`, `--no-wait`) must come **before** the command.
 
 ## Hub Mode — Sessions Dashboard
 
@@ -109,7 +109,7 @@ Single terminal with key bar for mobile input. "← Grid" button to go back.
 
 ![Fullscreen view](docs/images/grid-fullscreen.png)
 
-All modes share the same WebSocket connections — switching is instant, no reconnection needed.
+All modes share the same WebSocket connection — the hub relays PTY data from each session, so switching layouts is instant with no reconnection.
 
 ## What You See on Your Phone
 
@@ -177,7 +177,7 @@ cli-tunnel uses a single PTY shared between your local terminal and all remote v
 Yes, up to 5 devices simultaneously (2 per IP). All viewers see the same terminal output in real time. Input from any device goes to the same CLI session.
 
 **What happens if my phone disconnects?**
-The CLI session keeps running on your machine. When you reconnect, you'll see live output from that point forward. Use `--replay` to enable history replay so reconnecting devices catch up on what they missed.
+The CLI session keeps running on your machine. When you reconnect, a rolling replay buffer (up to 256 KB) sends the current terminal state so you see the prompt and recent output immediately — no manual refresh needed.
 
 **Does cli-tunnel work with any CLI app?**
 Yes. Any command that runs in a terminal works — copilot, vim, htop, python, ssh, k9s, node, and more. cli-tunnel doesn't interpret the command's output; it streams raw terminal bytes.
@@ -195,10 +195,10 @@ Yes. Use `--local` to skip tunnel creation. The terminal is available at `http:/
 Run `cli-tunnel` with no command to start hub mode — a sessions dashboard that shows all active cli-tunnel sessions. Tap any session to connect, or use Grid view to monitor all sessions simultaneously.
 
 **How does recording work?**
-The record button captures the xterm.js canvas at 30fps using the browser's MediaRecorder API. The recording is a `.webm` video file that downloads to your device when you stop. It records exactly what you see on screen — perfect for demos and presentations. Max duration is 10 minutes.
+Recording via canvas capture is not currently supported due to xterm.js WebGL renderer limitations. This feature may return in a future release.
 
 **How does the Grid view connect to sessions?**
-The hub reads session tokens from `~/.cli-tunnel/sessions/` (files with owner-only permissions). It proxies ticket requests to each session's local port — no tokens are exposed to the browser client.
+The hub acts as a relay — your phone has a single WebSocket to the hub, and the hub opens local connections to each session on your behalf. Session tokens are read from `~/.cli-tunnel/sessions/` (owner-only permissions) and never exposed to the browser. This means grid panels work even from a phone over devtunnel without needing individual tunnel connections to each session.
 
 ## How It's Built
 

package/dist/index.js

@@ -113,20 +113,21 @@ function sanitizeLabel(l) {
 }
 // F-07: Minimal env for subprocess calls (git, devtunnel) — only PATH and essentials
 function getSubprocessEnv() {
-    const env = {};
-    const SUBPROCESS_ALLOWLIST = new Set(['PATH', 'PATHEXT', 'SYSTEMROOT', 'TEMP', 'TMP', 'HOME', 'USERPROFILE', 'LANG', 'LC_ALL', 'TERM', 'COMSPEC', 'SHELL']);
-    for (const [k, v] of Object.entries(process.env)) {
-        if (v !== undefined && SUBPROCESS_ALLOWLIST.has(k)) {
-            env[k] = v;
-        }
-    }
-    return env;
+    const safe = {};
+    const allow = ['PATH', 'PATHEXT', 'HOME', 'USERPROFILE', 'TEMP', 'TMP', 'TMPDIR', 'SHELL', 'COMSPEC',
+        'SYSTEMROOT', 'WINDIR', 'PROGRAMFILES', 'PROGRAMFILES(X86)', 'APPDATA', 'LOCALAPPDATA',
+        'LANG', 'LC_ALL', 'TERM'];
+    for (const k of allow) {
+        if (process.env[k])
+            safe[k] = process.env[k];
+    }
+    return safe;
 }
 function getGitInfo() {
     try {
-        const remote = execSync('git remote get-url origin', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+        const remote = execSync('git remote get-url origin', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() }).trim();
         const repo = remote.split('/').pop()?.replace('.git', '') || 'unknown';
-        const branch = execSync('git branch --show-current', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim() || 'unknown';
+        const branch = execSync('git branch --show-current', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() }).trim() || 'unknown';
         return { repo, branch };
     }
     catch {
@@ -189,6 +190,8 @@ setInterval(() => {
 // ─── Security: Redact secrets from replay events ────────────
 // ─── Bridge server ──────────────────────────────────────────
 const connections = new Map();
+// Hub relay: WS connections from hub to local sessions (for grid view)
+const relayConnections = new Map(); // port → ws to session
 let localResizeAt = 0; // Timestamp of last local terminal resize
 // #10: Session TTL enforcement — periodically close expired connections
 setInterval(() => {
@@ -319,7 +322,7 @@ const server = http.createServer(async (req, res) => {
     // Sessions API
     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 output = execFileSync('devtunnel', ['list', '--labels', 'cli-tunnel', '--json'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
             const data = JSON.parse(output);
             const localMachine = os.hostname();
             const localSessions = hubMode ? readLocalSessions() : [];
@@ -369,7 +372,7 @@ const server = http.createServer(async (req, res) => {
         }
         // Verify the tunnel belongs to this machine before allowing delete
         try {
-            const verifyOut = execFileSync('devtunnel', ['show', tunnelId, '--json'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
+            const verifyOut = execFileSync('devtunnel', ['show', tunnelId, '--json'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
             const verifyData = JSON.parse(verifyOut);
             const labels = verifyData.tunnel?.labels || [];
             const tunnelMachine = labels[4] || '';
@@ -386,7 +389,7 @@ const server = http.createServer(async (req, res) => {
             return;
         }
         try {
-            execFileSync('devtunnel', ['delete', tunnelId, '--force'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
+            execFileSync('devtunnel', ['delete', tunnelId, '--force'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
             res.writeHead(200, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
             res.end(JSON.stringify({ deleted: true }));
         }
@@ -444,7 +447,7 @@ const server = http.createServer(async (req, res) => {
         'Content-Type': mimes[ext] || 'application/octet-stream',
         'X-Frame-Options': 'DENY',
         'X-Content-Type-Options': 'nosniff',
-        'Content-Security-Policy': "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; connect-src 'self' ws://localhost:* ws://127.0.0.1:* wss://*.devtunnels.ms https://*.devtunnels.ms;",
+        'Content-Security-Policy': "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/ https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/ https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/; connect-src 'self' ws://localhost:* ws://127.0.0.1:* wss://*.devtunnels.ms https://*.devtunnels.ms;",
         'Referrer-Policy': 'no-referrer',
         'Cache-Control': 'no-store',
         'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
@@ -495,7 +498,7 @@ const wss = new WebSocketServer({
 const auditDir = path.join(os.homedir(), '.cli-tunnel', 'audit');
 fs.mkdirSync(auditDir, { recursive: true, mode: 0o700 });
 const auditLogPath = path.join(auditDir, `audit-${new Date().toISOString().slice(0, 10)}.jsonl`);
-const auditLog = fs.createWriteStream(auditLogPath, { flags: 'a' });
+const auditLog = fs.createWriteStream(auditLogPath, { flags: 'a', mode: 0o600 });
 auditLog.on('error', (err) => { console.error('Audit log error:', err.message); });
 // R-01: WebSocketServer error handler — prevents process crash on WSS-level errors
 wss.on('error', (err) => {
@@ -520,13 +523,19 @@ wss.on('connection', (ws, req) => {
     const id = crypto.randomUUID();
     ws._remoteAddress = remoteAddress;
     connections.set(id, ws);
+    // R-02: Per-connection error handler to prevent unhandled crash
+    ws.on('error', (err) => { console.error('[ws] Connection error:', err.message); });
+    // Send replay buffer to late-joining clients (catch up on PTY state)
+    if (!hubMode && replayBuffer.length > 0) {
+        ws.send(JSON.stringify({ type: 'pty', data: replayBuffer }));
+    }
     // F-13: Per-connection WS message rate limiter (100 msg/sec)
     let wsMessageCount = 0;
     let wsMessageResetAt = Date.now() + 1000;
     // F-10: WS ping/pong heartbeat
     ws._isAlive = true;
     ws.on('pong', () => { ws._isAlive = true; });
-    ws.on('message', (data) => {
+    ws.on('message', async (data) => {
         // F-13: Enforce WS message rate limit (100 msg/sec)
         const now = Date.now();
         if (now > wsMessageResetAt) {
@@ -556,15 +565,78 @@ wss.on('connection', (ws, req) => {
             if (msg.type === 'pty_resize') {
                 // Only log, don't resize — prevents breaking local terminal layout
             }
+            // Grid relay: hub proxies PTY data between phone and local sessions
+            if (hubMode && msg.type === 'grid_connect') {
+                const port = Number(msg.port);
+                if (!Number.isFinite(port) || port < 1 || port > 65535)
+                    return;
+                const localSessions = readLocalSessions();
+                const session = localSessions.find(s => s.port === port);
+                if (!session)
+                    return;
+                try {
+                    const ticketResp = await fetch(`http://127.0.0.1:${port}/api/auth/ticket`, {
+                        method: 'POST',
+                        headers: { 'Authorization': `Bearer ${session.token}` },
+                        signal: AbortSignal.timeout(3000),
+                    });
+                    if (!ticketResp.ok)
+                        return;
+                    const { ticket } = await ticketResp.json();
+                    const sessionWs = new WebSocket(`ws://127.0.0.1:${port}?ticket=${encodeURIComponent(ticket)}`, {
+                        headers: { origin: `http://127.0.0.1:${port}` },
+                    });
+                    sessionWs.on('open', () => {
+                        relayConnections.set(port, sessionWs);
+                        if (ws.readyState === WebSocket.OPEN) {
+                            ws.send(JSON.stringify({ type: 'grid_connected', port }));
+                        }
+                    });
+                    sessionWs.on('message', (sData) => {
+                        try {
+                            const parsed = JSON.parse(sData.toString());
+                            if (parsed.type === 'pty' && ws.readyState === WebSocket.OPEN) {
+                                ws.send(JSON.stringify({ type: 'grid_pty', port, data: parsed.data }));
+                            }
+                        }
+                        catch { }
+                    });
+                    sessionWs.on('close', () => {
+                        relayConnections.delete(port);
+                        if (ws.readyState === WebSocket.OPEN) {
+                            ws.send(JSON.stringify({ type: 'grid_disconnected', port }));
+                        }
+                    });
+                    sessionWs.on('error', () => {
+                        relayConnections.delete(port);
+                    });
+                }
+                catch { }
+            }
+            if (hubMode && msg.type === 'grid_input') {
+                const port = Number(msg.port);
+                const relay = relayConnections.get(port);
+                if (relay && relay.readyState === WebSocket.OPEN) {
+                    relay.send(JSON.stringify({ type: 'pty_input', data: msg.data }));
+                }
+            }
         }
         catch {
             // #3: Log but do NOT write to PTY — only structured pty_input messages allowed
             auditLog.write(JSON.stringify({ ts: new Date().toISOString(), type: 'rejected', reason: 'non-json', length: raw.length }) + '\n');
         }
     });
-    ws.on('close', () => connections.delete(id));
+    ws.on('close', () => {
+        connections.delete(id);
+        // Close all relay connections when hub client disconnects
+        for (const [port, relay] of relayConnections) {
+            relay.close();
+        }
+        relayConnections.clear();
+    });
 });
-// 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,10 +647,16 @@ setInterval(() => {
         ws._isAlive = false;
         ws.ping();
     }
-}, 30000);
+}, 120000);
+// Rolling replay buffer for late-joining clients (grid panels, reconnects)
+let replayBuffer = '';
 function broadcast(data) {
     const redacted = redactSecrets(data);
     const msg = JSON.stringify({ type: 'pty', data: redacted });
+    // Append to replay buffer (rolling, max 256KB)
+    replayBuffer += redacted;
+    if (replayBuffer.length > 262144)
+        replayBuffer = replayBuffer.slice(-262144);
     for (const [, ws] of connections) {
         if (ws.readyState === WebSocket.OPEN)
             ws.send(msg);
@@ -618,7 +696,7 @@ async function main() {
         // Check if devtunnel is installed
         let devtunnelInstalled = false;
         try {
-            execFileSync('devtunnel', ['--version'], { stdio: 'pipe' });
+            execFileSync('devtunnel', ['--version'], { stdio: 'pipe', env: getSubprocessEnv() });
             devtunnelInstalled = true;
         }
         catch {
@@ -638,7 +716,7 @@ async function main() {
                 console.log(`\n  ${DIM}Installing devtunnel...${RESET}\n`);
                 try {
                     const installParts = installCmd.split(' ');
-                    const installProc = spawn(installParts[0], installParts.slice(1), { stdio: 'inherit', shell: process.platform !== 'win32' && installCmd.includes('|') });
+                    const installProc = spawn(installParts[0], installParts.slice(1), { stdio: 'inherit', shell: process.platform !== 'win32' && installCmd.includes('|'), env: getSubprocessEnv() });
                     await new Promise((resolve, reject) => {
                         installProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Install exited with code ${code}`)));
                         installProc.on('error', reject);
@@ -646,15 +724,15 @@ async function main() {
                     // Refresh PATH — winget updates the registry but current process has stale PATH
                     if (process.platform === 'win32') {
                         try {
-                            const userPath = execFileSync('reg', ['query', 'HKCU\\Environment', '/v', 'Path'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
-                            const sysPath = execFileSync('reg', ['query', 'HKLM\\SYSTEM\\CurrentControlSet\\Control\\Session Manager\\Environment', '/v', 'Path'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+                            const userPath = execFileSync('reg', ['query', 'HKCU\\Environment', '/v', 'Path'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
+                            const sysPath = execFileSync('reg', ['query', 'HKLM\\SYSTEM\\CurrentControlSet\\Control\\Session Manager\\Environment', '/v', 'Path'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
                             const extractPath = (out) => out.split('\n').find(l => l.includes('REG_'))?.split('REG_EXPAND_SZ')[1]?.trim() || out.split('\n').find(l => l.includes('REG_'))?.split('REG_SZ')[1]?.trim() || '';
                             process.env.PATH = `${extractPath(userPath)};${extractPath(sysPath)}`;
                         }
                         catch { /* keep existing PATH */ }
                     }
                     // Verify installation
-                    execFileSync('devtunnel', ['--version'], { stdio: 'pipe' });
+                    execFileSync('devtunnel', ['--version'], { stdio: 'pipe', env: getSubprocessEnv() });
                     console.log(`\n  ${GREEN}✓${RESET} devtunnel installed successfully!\n`);
                     devtunnelInstalled = true;
                 }
@@ -672,7 +750,7 @@ async function main() {
         if (devtunnelInstalled) {
             // Check if logged in before attempting tunnel creation
             try {
-                const userInfo = execFileSync('devtunnel', ['user', 'show'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+                const userInfo = execFileSync('devtunnel', ['user', 'show'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
                 if (userInfo.includes('not logged in') || userInfo.includes('No user') || userInfo.includes('Anonymous')) {
                     throw new Error('not logged in');
                 }
@@ -682,7 +760,7 @@ async function main() {
                 const loginAnswer = await askUser(`  Would you like to log in now? [Y/n] `);
                 if (loginAnswer === '' || loginAnswer === 'y' || loginAnswer === 'yes') {
                     try {
-                        const loginProc = spawn('devtunnel', ['user', 'login'], { stdio: 'inherit' });
+                        const loginProc = spawn('devtunnel', ['user', 'login'], { stdio: 'inherit', env: getSubprocessEnv() });
                         await new Promise((resolve, reject) => {
                             loginProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Login exited with code ${code}`)));
                             loginProc.on('error', reject);
@@ -706,10 +784,10 @@ async function main() {
             try {
                 const labelValues = ['cli-tunnel', sanitizeLabel(sessionName || command), sanitizeLabel(repo), sanitizeLabel(branch), sanitizeLabel(machine), `port-${actualPort}`];
                 const labelArgs = labelValues.flatMap(l => ['--labels', l]);
-                const createOut = execFileSync('devtunnel', ['create', ...labelArgs, '--expiration', '1d', '--json'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+                const createOut = execFileSync('devtunnel', ['create', ...labelArgs, '--expiration', '1d', '--json'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() });
                 const tunnelId = JSON.parse(createOut).tunnel?.tunnelId?.split('.')[0];
                 const cluster = JSON.parse(createOut).tunnel?.tunnelId?.split('.')[1] || 'euw';
-                execFileSync('devtunnel', ['port', 'create', tunnelId, '-p', String(actualPort), '--protocol', 'http'], { stdio: 'pipe' });
+                execFileSync('devtunnel', ['port', 'create', tunnelId, '-p', String(actualPort), '--protocol', 'http'], { stdio: 'pipe', env: getSubprocessEnv() });
                 const hostProc = spawn('devtunnel', ['host', tunnelId], { stdio: 'pipe', detached: false, env: getSubprocessEnv() });
                 const url = await new Promise((resolve, reject) => {
                     const timeout = setTimeout(() => reject(new Error('Tunnel timeout')), 15000);
@@ -736,11 +814,11 @@ async function main() {
                 }
                 catch { }
                 process.on('SIGINT', () => { removeSessionFile(); hostProc.kill(); try {
-                    execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe' });
+                    execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe', env: getSubprocessEnv() });
                 }
                 catch { } });
                 process.on('exit', () => { removeSessionFile(); hostProc.kill(); try {
-                    execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe' });
+                    execFileSync('devtunnel', ['delete', tunnelId, '--force'], { stdio: 'pipe', env: getSubprocessEnv() });
                 }
                 catch { } });
             }
@@ -752,7 +830,7 @@ async function main() {
                     const loginAnswer = await askUser(`  Would you like to log in now? [Y/n] `);
                     if (loginAnswer === '' || loginAnswer === 'y' || loginAnswer === 'yes') {
                         try {
-                            const loginProc = spawn('devtunnel', ['user', 'login'], { stdio: 'inherit' });
+                            const loginProc = spawn('devtunnel', ['user', 'login'], { stdio: 'inherit', env: getSubprocessEnv() });
                             await new Promise((resolve, reject) => {
                                 loginProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Login exited with code ${code}`)));
                                 loginProc.on('error', reject);
@@ -770,6 +848,13 @@ async function main() {
             }
         } // end if (devtunnelInstalled)
     }
+    // Write session file for local-only sessions (no tunnel) so hub can discover them
+    if (!hasTunnel && !hubMode && !sessionFilePath) {
+        const localId = `local-${actualPort}`;
+        writeSessionFile(localId, `http://127.0.0.1:${actualPort}`, actualPort);
+        process.on('SIGINT', () => { removeSessionFile(); });
+        process.on('exit', () => { removeSessionFile(); });
+    }
     if (hubMode) {
         // Hub mode — just serve the sessions dashboard, no PTY
         console.log(`  ${GREEN}✓${RESET} Hub running — open in browser to see all sessions\n`);
@@ -800,7 +885,7 @@ async function main() {
     let resolvedCmd = command;
     if (process.platform === 'win32') {
         try {
-            const wherePaths = execFileSync('where', [command], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim().split('\n');
+            const wherePaths = execFileSync('where', [command], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'], env: getSubprocessEnv() }).trim().split('\n');
             // Prefer .exe or .cmd over .ps1 for node-pty compatibility
             const exePath = wherePaths.find(p => p.trim().endsWith('.exe')) || wherePaths.find(p => p.trim().endsWith('.cmd'));
             if (exePath) {
@@ -831,7 +916,7 @@ async function main() {
         'AZURE_SUBSCRIPTION_ID', 'AZURE_TENANT_ID', 'AZURE_CLIENT_ID', 'AZURE_CLIENT_SECRET',
         'SENDGRID_API_KEY', 'TWILIO_AUTH_TOKEN', 'STRIPE_SECRET_KEY',
         'AWS_SESSION_TOKEN', 'AWS_SECURITY_TOKEN']);
-    const sensitivePattern = /token|secret|key|password|credential|api_key|private_key|access_key|connection_string|auth|kubeconfig|docker_host|docker_config/i;
+    const sensitivePattern = /token|secret|key|password|credential|api_key|private_key|access_key|connection_string|auth|kubeconfig|docker_host|docker_config|passwd|dsn|webhook/i;
     const safeEnv = {};
     for (const [k, v] of Object.entries(process.env)) {
         if (v !== undefined && !DANGEROUS_VARS.has(k) && !sensitivePattern.test(k)) {
@@ -843,6 +928,11 @@ async function main() {
         cols, rows, cwd,
         env: safeEnv,
     });
+    // Register data handler immediately so no PTY output is lost
+    ptyProcess.onData((data) => {
+        process.stdout.write(data);
+        broadcast(data);
+    });
     // Detect CSPRNG crash (rare Node.js + PTY issue) and show helpful message
     let earlyExitCode = null;
     const earlyExitCheck = new Promise((resolve) => {
@@ -867,19 +957,18 @@ async function main() {
             process.exit(earlyExitCode);
         }
     }
-    ptyProcess.onData((data) => {
-        process.stdout.write(data);
-        broadcast(data);
-    });
     ptyProcess.onExit(({ exitCode }) => {
         console.log(`\n${DIM}Process exited (code ${exitCode}).${RESET}`);
+        ptyProcess = null;
         server.close();
         process.exit(exitCode);
     });
     if (process.stdin.isTTY)
         process.stdin.setRawMode(true);
     process.stdin.resume();
-    process.stdin.on('data', (data) => ptyProcess.write(data.toString()));
-    process.stdout.on('resize', () => { localResizeAt = Date.now(); const c = process.stdout.columns || 120; const r = process.stdout.rows || 30; ptyProcess.resize(c, r); });
+    process.stdin.on('data', (data) => { if (ptyProcess)
+        ptyProcess.write(data.toString()); });
+    process.stdout.on('resize', () => { localResizeAt = Date.now(); const c = process.stdout.columns || 120; const r = process.stdout.rows || 30; if (ptyProcess)
+        ptyProcess.resize(c, r); });
 }
 main().catch((err) => { console.error(err); process.exit(1); });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cli-tunnel",
-  "version": "1.3.1-beta.6",
+  "version": "1.3.1-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

@@ -36,6 +36,9 @@
   let replaying = false;
   let toolCalls = {};
 
+  // Save token before it's stripped from URL bar
+  var savedToken = new URLSearchParams(window.location.search).get('token') || '';
+
   const $ = (sel) => document.querySelector(sel);
   const terminal = $('#terminal');
   const inputEl = $('#input');
@@ -47,7 +50,7 @@
   const termContainer = $('#terminal-container');
   let currentView = 'terminal'; // 'dashboard', 'terminal', or 'grid'
   let cachedSessions = [];
-  let gridTerminals = []; // { xterm, fitAddon, ws, session, panel }
+  let gridTerminals = []; // { xterm, fitAddon, session, panel }
   var gridMode = 'thumbnails';
   var focusedIndex = 0;
   var tmuxPreset = 'equal';
@@ -254,8 +257,7 @@
 
   async function loadSessions() {
     try {
-      var tokenParam = new URLSearchParams(window.location.search).get('token');
-      var headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+      var headers = savedToken ? { 'Authorization': 'Bearer ' + savedToken } : {};
       var resp = await fetch('/api/sessions', { headers: headers });
       if (!resp.ok) throw new Error('Status ' + resp.status);
       var data = await resp.json();
@@ -349,11 +351,10 @@
         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');
         var proxyUrl = '/api/proxy/ticket/' + port;
         fetch(proxyUrl, {
           method: 'POST',
-          headers: tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {}
+          headers: savedToken ? { 'Authorization': 'Bearer ' + savedToken } : {}
         }).then(function(r) { return r.json(); }).then(function(data) {
           if (data.ticket) {
             window.location.href = baseUrl + '?ticket=' + encodeURIComponent(data.ticket);
@@ -384,8 +385,7 @@
   };
 
   window.cleanOffline = async () => {
-    const tokenParam = new URLSearchParams(window.location.search).get('token');
-    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    const headers = savedToken ? { 'Authorization': 'Bearer ' + savedToken } : {};
     const resp = await fetch('/api/sessions', { headers });
     const data = await resp.json();
     const offline = (data.sessions || []).filter(s => !s.online);
@@ -396,15 +396,14 @@
   };
 
   window.deleteSession = async (id) => {
-    const tokenParam = new URLSearchParams(window.location.search).get('token');
-    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    const headers = savedToken ? { 'Authorization': 'Bearer ' + savedToken } : {};
     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; });
+    var connectable = sessions.filter(function(s) { return s.online && s.hasToken; });
     if (connectable.length === 0) return;
 
     // Clean up previous grid
@@ -532,54 +531,19 @@
       panelXterm.open(termDiv);
 
       // Store entry before async connect so index is stable
-      var entry = { xterm: panelXterm, fitAddon: panelFit, ws: null, session: s, panel: panel };
+      var entry = { xterm: panelXterm, fitAddon: panelFit, 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://');
+      // Connect via hub relay — send grid_connect message
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'grid_connect', port: s.port }));
+      }
 
-        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'; }
-        });
-      })();
+      panelXterm.onData(function(data) {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'grid_input', port: s.port, data: data }));
+        }
+      });
     });
 
     // ── Event delegation for panel clicks ──
@@ -734,9 +698,6 @@
         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) {}
         }
       });
@@ -754,10 +715,6 @@
             var prevCols = gt.xterm ? gt.xterm.cols : 0;
             var prevRows = gt.xterm ? gt.xterm.rows : 0;
             gt.fitAddon.fit();
-            if (gt.ws && gt.ws.readyState === WebSocket.OPEN && gt.xterm &&
-                (gt.xterm.cols !== prevCols || gt.xterm.rows !== prevRows)) {
-              gt.ws.send(JSON.stringify({ type: 'pty_resize', cols: gt.xterm.cols, rows: gt.xterm.rows }));
-            }
           } catch(e) {}
         }
       });
@@ -767,7 +724,6 @@
   function destroyGrid() {
     if (isRecording) { stopRecording(); var btn = document.getElementById('btn-record'); if (btn) { btn.classList.remove('recording'); btn.textContent = '⏺'; btn.title = 'Record terminal'; } }
     gridTerminals.forEach(function(gt) {
-      if (gt.ws) { try { gt.ws.close(); } catch(e) {} }
       if (gt.xterm) { try { gt.xterm.dispose(); } catch(e) {} }
     });
     gridTerminals = [];
@@ -977,7 +933,7 @@
 
   async function connect() {
     if (isHubMode) {
-      // Hub mode — hide terminal UI, show sessions only
+      // Hub mode — show sessions dashboard
       setStatus('online', 'Hub');
       terminal.classList.add('hidden');
       termContainer.classList.add('hidden');
@@ -985,32 +941,65 @@
       $('#btn-sessions').classList.add('hidden');
       dashboard.classList.remove('hidden');
       loadSessions();
-      // Auto-refresh every 10s
       setInterval(loadSessions, 10000);
+
+      // Hub also needs a WS connection for grid relay
+      if (savedToken) {
+        var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        try {
+          var resp = await fetch('/api/auth/ticket', {
+            method: 'POST',
+            headers: { 'Authorization': 'Bearer ' + savedToken }
+          });
+          if (resp.ok) {
+            var data = await resp.json();
+            ws = new WebSocket(proto + '//' + location.host + '?ticket=' + encodeURIComponent(data.ticket));
+            ws.onopen = function() { connected = true; console.log('[hub] WS connected for grid relay'); };
+            ws.onclose = function() { connected = false; ws = null; };
+            ws.onerror = function() { ws = null; };
+            ws.onmessage = function(e) {
+              try { handleMessage(JSON.parse(e.data)); } catch(err) {}
+            };
+          }
+        } catch(err) { console.log('[hub] WS connect failed:', err); }
+      }
       return;
     }
 
-    const tokenParam = new URLSearchParams(window.location.search).get('token');
-    if (!tokenParam) { setStatus('offline', 'No credentials'); return; }
+    const ticketParam = new URLSearchParams(window.location.search).get('ticket');
+
+    if (!savedToken && !ticketParam) { setStatus('offline', 'No credentials'); return; }
+
+    // Strip token from URL bar to prevent leaking via Referer/history
+    if (savedToken) {
+      var cleanUrl = new URL(window.location.href);
+      cleanUrl.searchParams.delete('token');
+      history.replaceState(null, '', cleanUrl.toString());
+    }
 
     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 {
+    // If we have a ticket (from hub Connect button), use it directly
+    if (ticketParam) {
+      ws = new WebSocket(`${proto}//${location.host}?ticket=${encodeURIComponent(ticketParam)}`);
+    } else {
+      // Exchange token for ticket
+      try {
+        const resp = await fetch('/api/auth/ticket', {
+          method: 'POST',
+          headers: { 'Authorization': 'Bearer ' + savedToken }
+        });
+        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;
       }
-    } catch {
-      setStatus('offline', 'Auth failed');
-      return;
     }
     setStatus('connecting', 'Connecting...');
 
@@ -1024,7 +1013,11 @@
     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');
+      if (reconnectAttempt >= 10) {
+        setStatus('offline', 'Connection lost');
+        return;
+      }
+      setStatus('offline', 'Reconnecting...');
       const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempt)) + Math.random() * 1000;
       reconnectAttempt++;
       setTimeout(connect, delay);
@@ -1038,6 +1031,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
@@ -1052,6 +1053,31 @@
       return;
     }
 
+    // Grid relay messages from hub
+    if (msg.type === 'grid_pty') {
+      var gt = gridTerminals.find(function(g) { return g.session && g.session.port === msg.port; });
+      if (gt && gt.xterm) { gt.xterm.write(msg.data); }
+      return;
+    }
+
+    if (msg.type === 'grid_connected') {
+      var gt = gridTerminals.find(function(g) { return g.session && g.session.port === msg.port; });
+      if (gt) {
+        var dot = gt.panel.querySelector('.grid-panel-status');
+        if (dot) { dot.style.color = 'var(--green)'; dot.title = 'Connected'; }
+      }
+      return;
+    }
+
+    if (msg.type === 'grid_disconnected') {
+      var gt = gridTerminals.find(function(g) { return g.session && g.session.port === msg.port; });
+      if (gt) {
+        var dot = gt.panel.querySelector('.grid-panel-status');
+        if (dot) { dot.style.color = 'var(--red)'; dot.title = 'Disconnected'; }
+      }
+      return;
+    }
+
     // PTY data — raw terminal output → xterm.js
     if (msg.type === 'pty') {
       if (!ptyMode) {
@@ -1189,8 +1215,8 @@
         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 (ws && ws.readyState === WebSocket.OPEN && gt.session) {
+            ws.send(JSON.stringify({ type: 'grid_input', port: gt.session.port, data: key }));
           }
           if (gt.xterm) gt.xterm.focus();
         } else {

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>