cli-tunnel 1.2.0-beta.1 → 1.2.0-beta.11

package/README.md

@@ -77,12 +77,55 @@ cli-tunnel copilot
 
 ## Security
 
-Tunnels are **private by default** — only the Microsoft/GitHub account that created the tunnel can connect. Auth is enforced at Microsoft's relay layer before traffic reaches your machine.
+cli-tunnel uses a layered security model:
 
-- No inbound ports opened
-- No anonymous access
-- No central server
-- TLS encryption via devtunnel relay
+**Network layer** — Microsoft Dev Tunnels are private by default. Only the Microsoft or GitHub account that created the tunnel can connect. TLS encryption is handled by Microsoft's relay infrastructure. No inbound ports are opened on your machine.
+
+**Session authentication** — Each session generates a unique token (cryptographic random UUID). All HTTP API and WebSocket connections require this token. The token is embedded in the URL you receive at startup — anyone without it cannot connect.
+
+**WebSocket auth** — cli-tunnel uses a ticket-based handshake: the browser exchanges the session token for a single-use, short-lived ticket (60 seconds) to establish the WebSocket connection. This avoids keeping the long-lived token in WebSocket upgrade logs.
+
+**Input validation** — Only structured JSON messages are accepted over WebSocket. Raw text is rejected and logged. Terminal resize commands are bounds-checked to prevent abuse.
+
+**Environment isolation** — The child process receives a filtered set of environment variables (an allowlist of ~40 safe variables like PATH, HOME, TERM). Sensitive variables and NODE_OPTIONS are excluded to prevent code injection.
+
+**Audit logging** — All remote keyboard input is logged to `~/.cli-tunnel/audit/` in JSONL format with timestamps and source addresses. Secrets are automatically redacted from audit entries.
+
+**Connection limits** — Maximum 5 concurrent WebSocket connections. Sessions expire after 24 hours.
+
+## Terminal Size Behavior
+
+cli-tunnel uses a single PTY (pseudo-terminal) shared between your local terminal and all remote viewers. When a phone or tablet connects, the PTY resizes to match the remote device's screen dimensions. This ensures the CLI app renders correctly on the device you're actively using to interact with it.
+
+Because the PTY can only have one size at a time, the local terminal on your machine will reflect the remote device's dimensions while it's connected. This is by design — cli-tunnel prioritizes the remote viewing experience since the primary use case is controlling your CLI from another device.
+
+**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
+
+## FAQ
+
+**Can multiple devices connect to the same session?**
+Yes, up to 5 devices simultaneously. 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.
+
+**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.
+
+**Is there a central server?**
+No. cli-tunnel runs entirely on your machine. Microsoft Dev Tunnels provides the relay infrastructure, but no third-party server sees your terminal content.
+
+**What about the anti-phishing page?**
+The first time you open a devtunnel URL, Microsoft shows an interstitial warning page. This is a devtunnel security feature — it confirms you trust the tunnel. You only see it once per tunnel.
+
+**Does the tool work without devtunnel?**
+Yes. Use `--local` to skip tunnel creation. The terminal is available at `http://127.0.0.1:<port>` on your local network only.
+
+**What's hub mode?**
+Run `cli-tunnel` with no command to start hub mode — a sessions dashboard that shows all active cli-tunnel sessions on your machine. Tap any online session to connect to it.
 
 ## How It's Built
 

package/dist/index.js

@@ -20,8 +20,15 @@ import crypto from 'node:crypto';
 import { execSync, execFileSync, spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import http from 'node:http';
+import readline from 'node:readline';
 import { WebSocketServer, WebSocket } from 'ws';
 import os from 'node:os';
+function askUser(question) {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => { rl.close(); resolve(answer.trim().toLowerCase()); });
+    });
+}
 const BOLD = '\x1b[1m';
 const RESET = '\x1b[0m';
 const DIM = '\x1b[2m';
@@ -106,8 +113,46 @@ function getGitInfo() {
 }
 // ─── Security: Session token for WebSocket auth ────────────
 const sessionToken = crypto.randomUUID();
-// ─── F-18: Session TTL (24 hours) ──────────────────────────
-const SESSION_TTL = 24 * 60 * 60 * 1000; // 24 hours
+// ─── 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 (4 hours) ───────────────────────────
+const SESSION_TTL = 4 * 60 * 60 * 1000; // 4 hours
 const sessionCreatedAt = Date.now();
 // ─── F-02: One-time ticket store for WebSocket auth ────────
 const tickets = new Map();
@@ -136,7 +181,15 @@ function redactSecrets(text) {
         // Database URLs
         .replace(/(postgres|mongodb|mysql|redis):\/\/[^\s"']{10,}/gi, '[REDACTED]')
         // Bearer tokens in headers
-        .replace(/Bearer\s+[a-zA-Z0-9._-]{20,}/gi, 'Bearer [REDACTED]');
+        .replace(/Bearer\s+[a-zA-Z0-9._-]{20,}/gi, 'Bearer [REDACTED]')
+        // JWT tokens
+        .replace(/eyJ[a-zA-Z0-9_-]{10,}\.[a-zA-Z0-9_-]{10,}\.[a-zA-Z0-9_-]{10,}/g, '[REDACTED]')
+        // Slack tokens
+        .replace(/xox[bpras]-[a-zA-Z0-9-]{10,}/g, '[REDACTED]')
+        // npm tokens
+        .replace(/npm_[a-zA-Z0-9]{20,}/g, '[REDACTED]')
+        // PEM private keys
+        .replace(/-----BEGIN [A-Z ]+ PRIVATE KEY-----[\s\S]*?-----END [A-Z ]+ PRIVATE KEY-----/g, '[REDACTED]');
 }
 // ─── Bridge server ──────────────────────────────────────────
 const acpEventLog = [];
@@ -150,7 +203,47 @@ setInterval(() => {
         }
     }
 }, 60000);
-const server = http.createServer((req, res) => {
+// ─── F-8: Per-IP rate limiter ───────────────────────────────
+const rateLimits = new Map();
+const ticketRateLimits = new Map();
+function checkRateLimit(ip, map, maxRequests) {
+    const now = Date.now();
+    const entry = map.get(ip);
+    if (!entry || entry.resetAt < now) {
+        map.set(ip, { count: 1, resetAt: now + 60000 });
+        return true;
+    }
+    entry.count++;
+    return entry.count <= maxRequests;
+}
+// Clean up rate limit maps every 60s
+setInterval(() => {
+    const now = Date.now();
+    for (const [ip, entry] of rateLimits) {
+        if (entry.resetAt < now)
+            rateLimits.delete(ip);
+    }
+    for (const [ip, entry] of ticketRateLimits) {
+        if (entry.resetAt < now)
+            ticketRateLimits.delete(ip);
+    }
+}, 60000);
+const server = http.createServer(async (req, res) => {
+    const clientIp = req.socket.remoteAddress || 'unknown';
+    // F-8: Rate limiting for HTTP endpoints
+    if (req.url?.startsWith('/api/')) {
+        const isTicket = req.url === '/api/auth/ticket';
+        if (isTicket && !checkRateLimit(clientIp, ticketRateLimits, 10)) {
+            res.writeHead(429, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Too Many Requests' }));
+            return;
+        }
+        if (!checkRateLimit(clientIp, rateLimits, 30)) {
+            res.writeHead(429, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Too Many Requests' }));
+            return;
+        }
+    }
     // F-18: Session expiry check for API routes
     if (!hubMode && req.url?.startsWith('/api/') && Date.now() - sessionCreatedAt > SESSION_TTL) {
         res.writeHead(401, { 'Content-Type': 'application/json' });
@@ -171,8 +264,8 @@ const server = http.createServer((req, res) => {
         res.end(JSON.stringify({ ticket, expires: Date.now() + 60000 }));
         return;
     }
-    // F-01: Session token check for all API routes (skip in hub mode)
-    if (!hubMode && req.url?.startsWith('/api/')) {
+    // F-01: Session token check for all API routes
+    if (req.url?.startsWith('/api/')) {
         const reqUrl = new URL(req.url, `http://${req.headers.host}`);
         const authToken = req.headers.authorization?.replace('Bearer ', '') || reqUrl.searchParams.get('token');
         if (authToken !== sessionToken) {
@@ -181,27 +274,72 @@ const server = http.createServer((req, res) => {
             return;
         }
     }
+    // Hub ticket proxy — fetch ticket from local session on behalf of grid client
+    if (hubMode && req.url?.startsWith('/api/proxy/ticket/') && req.method === 'POST') {
+        const targetPort = parseInt(req.url.replace('/api/proxy/ticket/', ''), 10);
+        if (!Number.isFinite(targetPort) || targetPort < 1 || targetPort > 65535) {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Invalid port' }));
+            return;
+        }
+        // Find token for this port from session files
+        const localSessions = readLocalSessions();
+        const session = localSessions.find(s => s.port === targetPort);
+        if (!session) {
+            res.writeHead(404, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Session not found' }));
+            return;
+        }
+        try {
+            const ticketResp = await fetch(`http://127.0.0.1:${targetPort}/api/auth/ticket`, {
+                method: 'POST', headers: { 'Authorization': `Bearer ${session.token}` },
+                signal: AbortSignal.timeout(3000),
+            });
+            if (!ticketResp.ok)
+                throw new Error('Ticket request failed');
+            const ticketData = await ticketResp.json();
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ ticket: ticketData.ticket, port: targetPort }));
+        }
+        catch {
+            res.writeHead(502, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Session unreachable' }));
+            return;
+        }
+        return;
+    }
     // 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 }));
@@ -236,7 +374,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);
@@ -277,9 +417,10 @@ const server = http.createServer((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' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; connect-src 'self' ws://localhost:* wss://*.devtunnels.ms;",
+        '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:* http://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',
     };
     res.writeHead(200, securityHeaders);
     // #8: Handle createReadStream errors
@@ -298,19 +439,7 @@ const wss = new WebSocketServer({
         // F-18: Session expiry
         if (Date.now() - sessionCreatedAt > SESSION_TTL)
             return false;
-        const url = new URL(info.req.url, `http://${info.req.headers.host}`);
-        // F-02: Accept one-time ticket
-        const ticket = url.searchParams.get('ticket');
-        if (ticket && tickets.has(ticket)) {
-            const t = tickets.get(ticket);
-            tickets.delete(ticket); // Single use
-            return t.expires > Date.now();
-        }
-        // Backward compat: accept token
-        if (url.searchParams.get('token') !== sessionToken)
-            return false;
-        // Validate origin if present
-        // #28: Proper origin validation using URL parsing
+        // F-3: Validate origin BEFORE ticket acceptance
         const origin = info.req.headers.origin;
         if (origin) {
             try {
@@ -324,7 +453,15 @@ const wss = new WebSocketServer({
                 return false;
             }
         }
-        return true;
+        const url = new URL(info.req.url, `http://${info.req.headers.host}`);
+        // F-02: Accept one-time ticket (only auth method for WS)
+        const ticket = url.searchParams.get('ticket');
+        if (ticket && tickets.has(ticket)) {
+            const t = tickets.get(ticket);
+            tickets.delete(ticket); // Single use
+            return t.expires > Date.now();
+        }
+        return false;
     },
 });
 // ─── Security: Audit log for remote PTY input ──────────────
@@ -334,14 +471,27 @@ const auditLogPath = path.join(auditDir, `audit-${new Date().toISOString().slice
 const auditLog = fs.createWriteStream(auditLogPath, { flags: 'a' });
 auditLog.on('error', (err) => { console.error('Audit log error:', err.message); });
 wss.on('connection', (ws, req) => {
-    // F-10: Connection cap
+    // F-10: Connection cap (global + per-IP)
     if (connections.size >= 5) {
         ws.close(1013, 'Max connections reached');
         return;
     }
-    const id = crypto.randomUUID();
     const remoteAddress = req.socket.remoteAddress || 'unknown';
+    let perIpCount = 0;
+    for (const [, c] of connections) {
+        if (c._remoteAddress === remoteAddress)
+            perIpCount++;
+    }
+    if (perIpCount >= 2) {
+        ws.close(1013, 'Max connections per IP reached');
+        return;
+    }
+    const id = crypto.randomUUID();
+    ws._remoteAddress = remoteAddress;
     connections.set(id, ws);
+    // F-10: WS ping/pong heartbeat
+    ws._isAlive = true;
+    ws.on('pong', () => { ws._isAlive = true; });
     // Replay history with secrets redacted (only if replay is enabled)
     if (hasReplay) {
         for (const event of acpEventLog) {
@@ -373,6 +523,18 @@ wss.on('connection', (ws, req) => {
     });
     ws.on('close', () => connections.delete(id));
 });
+// F-10: WS heartbeat — ping every 30s, close unresponsive after 10s
+setInterval(() => {
+    for (const [id, ws] of connections) {
+        if (ws._isAlive === false) {
+            ws.terminate();
+            connections.delete(id);
+            continue;
+        }
+        ws._isAlive = false;
+        ws.ping();
+    }
+}, 30000);
 function broadcast(data) {
     const msg = JSON.stringify({ type: 'pty', data });
     if (hasReplay) {
@@ -401,7 +563,8 @@ async function main() {
     console.log(`\n${BOLD}cli-tunnel${RESET} ${DIM}v1.1.0${RESET}\n`);
     if (hubMode) {
         console.log(`  ${BOLD}📋 Hub Mode${RESET} — sessions dashboard`);
-        console.log(`  ${DIM}Port:${RESET}     ${actualPort}\n`);
+        console.log(`  ${DIM}Port:${RESET}     ${actualPort}`);
+        console.log(`  ${DIM}Local URL:${RESET} http://127.0.0.1:${actualPort}?token=${sessionToken}&hub=1\n`);
     }
     else {
         console.log(`  ${DIM}Command:${RESET}  ${command} ${commandArgs.join(' ')}`);
@@ -421,35 +584,83 @@ async function main() {
         }
         catch {
             console.log(`\n  ${YELLOW}⚠ devtunnel CLI not found!${RESET}\n`);
-            console.log(`  ${BOLD}To enable remote access, install Microsoft Dev Tunnels:${RESET}\n`);
+            let installCmd = '';
             if (process.platform === 'win32') {
-                console.log(`    ${GREEN}winget install Microsoft.devtunnel${RESET}`);
+                installCmd = 'winget install Microsoft.devtunnel';
             }
             else if (process.platform === 'darwin') {
-                console.log(`    ${GREEN}brew install --cask devtunnel${RESET}`);
+                installCmd = 'brew install --cask devtunnel';
             }
             else {
-                console.log(`    ${GREEN}curl -sL https://aka.ms/DevTunnelCliInstall | bash${RESET}`);
+                installCmd = 'curl -sL https://aka.ms/DevTunnelCliInstall | bash';
+            }
+            const answer = await askUser(`  Would you like to install it now? (${GREEN}${installCmd}${RESET}) [Y/n] `);
+            if (answer === '' || answer === 'y' || answer === 'yes') {
+                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('|') });
+                    await new Promise((resolve, reject) => {
+                        installProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Install exited with code ${code}`)));
+                        installProc.on('error', reject);
+                    });
+                    // 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 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' });
+                    console.log(`\n  ${GREEN}✓${RESET} devtunnel installed successfully!\n`);
+                    devtunnelInstalled = true;
+                }
+                catch (err) {
+                    console.log(`\n  ${YELLOW}⚠${RESET} Installation failed: ${err.message}`);
+                    console.log(`  ${DIM}You can install it manually: ${installCmd}${RESET}\n`);
+                    console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
+                }
+            }
+            else {
+                console.log(`\n  ${DIM}More info: https://aka.ms/devtunnels/doc${RESET}`);
+                console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
             }
-            console.log(`\n  Then authenticate once:\n`);
-            console.log(`    ${GREEN}devtunnel user login${RESET}\n`);
-            console.log(`  ${DIM}More info: https://aka.ms/devtunnels/doc${RESET}\n`);
-            console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
         }
-        // Check if logged in
         if (devtunnelInstalled) {
+            // Check if logged in before attempting tunnel creation
             try {
                 const userInfo = execFileSync('devtunnel', ['user', 'show'], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
-                if (userInfo.includes('not logged in') || userInfo.includes('No user')) {
+                if (userInfo.includes('not logged in') || userInfo.includes('No user') || userInfo.includes('Anonymous')) {
                     throw new Error('not logged in');
                 }
             }
             catch {
-                console.log(`\n  ${YELLOW}⚠ devtunnel not authenticated!${RESET}\n`);
-                console.log(`  Run this once to log in:\n`);
-                console.log(`    ${GREEN}devtunnel user login${RESET}\n`);
-                console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
-                devtunnelInstalled = false;
+                console.log(`\n  ${YELLOW}⚠ devtunnel not authenticated.${RESET}\n`);
+                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' });
+                        await new Promise((resolve, reject) => {
+                            loginProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Login exited with code ${code}`)));
+                            loginProc.on('error', reject);
+                        });
+                        console.log(`\n  ${GREEN}✓${RESET} Logged in successfully!\n`);
+                    }
+                    catch {
+                        console.log(`\n  ${YELLOW}⚠${RESET} Login failed. Run manually: ${GREEN}devtunnel user login${RESET}\n`);
+                        console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
+                        devtunnelInstalled = false;
+                    }
+                }
+                else {
+                    console.log(`\n  ${DIM}Run this once to log in: ${GREEN}devtunnel user login${RESET}`);
+                    console.log(`  ${DIM}Continuing without tunnel (local only)...${RESET}\n`);
+                    devtunnelInstalled = false;
+                }
             }
         }
         if (devtunnelInstalled) {
@@ -474,25 +685,48 @@ async function main() {
                     });
                     hostProc.on('error', (e) => { clearTimeout(timeout); reject(e); });
                 });
-                const tunnelUrlWithToken = `${url}?token=${sessionToken}`;
+                const tunnelUrlWithToken = `${url}?token=${sessionToken}${hubMode ? '&hub=1' : ''}`;
                 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 { } });
             }
             catch (err) {
-                console.log(`  ${YELLOW}⚠${RESET} Tunnel failed: ${err.message}\n`);
+                const errMsg = err.message || '';
+                // Detect auth failure at create time (expired token, anonymous, etc.)
+                if (errMsg.includes('Anonymous') || errMsg.includes('Unauthorized') || errMsg.includes('not permitted')) {
+                    console.log(`\n  ${YELLOW}⚠ devtunnel session expired or not authenticated.${RESET}\n`);
+                    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' });
+                            await new Promise((resolve, reject) => {
+                                loginProc.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Login exited with code ${code}`)));
+                                loginProc.on('error', reject);
+                            });
+                            console.log(`\n  ${GREEN}✓${RESET} Logged in! Please run cli-tunnel again to create the tunnel.\n`);
+                        }
+                        catch {
+                            console.log(`\n  ${YELLOW}⚠${RESET} Login failed. Run manually: ${GREEN}devtunnel user login${RESET}\n`);
+                        }
+                    }
+                }
+                else {
+                    console.log(`  ${YELLOW}⚠${RESET} Tunnel failed: ${errMsg}\n`);
+                }
             }
         } // end if (devtunnelInstalled)
     }
@@ -527,27 +761,16 @@ async function main() {
         }
         catch { /* use as-is */ }
     }
-    // F-07: Security — allowlist safe environment variables for PTY
-    const SAFE_ENV_VARS = new Set([
-        'PATH', 'HOME', 'USERPROFILE', 'SHELL', 'TERM', 'LANG', 'LC_ALL', 'LC_CTYPE',
-        'USER', 'LOGNAME', 'EDITOR', 'VISUAL', 'COLORTERM', 'TERM_PROGRAM',
-        'HOSTNAME', 'COMPUTERNAME', 'PWD', 'OLDPWD', 'SHLVL', 'TMPDIR', 'TMP', 'TEMP',
-        'XDG_RUNTIME_DIR', 'XDG_DATA_HOME', 'XDG_CONFIG_HOME', 'XDG_CACHE_HOME',
-        'DISPLAY', 'WAYLAND_DISPLAY', 'DBUS_SESSION_BUS_ADDRESS',
-        'PROGRAMFILES', 'PROGRAMFILES(X86)', 'SYSTEMROOT', 'WINDIR', 'COMSPEC',
-        'APPDATA', 'LOCALAPPDATA', 'PROGRAMDATA',
-        'NODE_ENV',
-        'GOPATH', 'GOROOT', 'CARGO_HOME', 'RUSTUP_HOME',
-        'JAVA_HOME', 'MAVEN_HOME', 'GRADLE_HOME',
-        'PYTHONPATH', 'VIRTUAL_ENV', 'CONDA_DEFAULT_ENV',
-        'KUBECONFIG', 'DOCKER_HOST', 'DOCKER_CONFIG',
-        'GIT_AUTHOR_NAME', 'GIT_AUTHOR_EMAIL', 'GIT_COMMITTER_NAME', 'GIT_COMMITTER_EMAIL',
-        'HTTP_PROXY', 'HTTPS_PROXY', 'NO_PROXY', 'http_proxy', 'https_proxy', 'no_proxy',
-        'SSH_AUTH_SOCK', 'GPG_TTY',
-    ]);
+    // F-07: Security — filter dangerous environment variables for PTY
+    // Blocklist approach: pass everything except known dangerous vars and secrets
+    const DANGEROUS_VARS = new Set(['NODE_OPTIONS', 'NODE_REPL_HISTORY', 'NODE_EXTRA_CA_CERTS',
+        'NODE_PATH', 'NODE_REDIRECT_WARNINGS', 'NODE_PENDING_DEPRECATION',
+        'UV_THREADPOOL_SIZE', 'LD_PRELOAD', 'DYLD_INSERT_LIBRARIES',
+        'SSH_AUTH_SOCK', 'GPG_TTY']);
+    const sensitivePattern = /token|secret|key|password|credential|api_key|private_key|access_key|connection_string|auth|kubeconfig|docker_host|docker_config/i;
     const safeEnv = {};
     for (const [k, v] of Object.entries(process.env)) {
-        if (SAFE_ENV_VARS.has(k) && v !== undefined) {
+        if (v !== undefined && !DANGEROUS_VARS.has(k) && !sensitivePattern.test(k)) {
             safeEnv[k] = v;
         }
     }
@@ -556,6 +779,25 @@ async function main() {
         cols, rows, cwd,
         env: safeEnv,
     });
+    // Detect CSPRNG crash (rare Node.js + PTY issue) and show helpful message
+    let ptyExitedEarly = false;
+    const earlyExitCheck = new Promise((resolve) => {
+        ptyProcess.onExit(({ exitCode }) => {
+            if (exitCode === 134 || exitCode === 3221226505) {
+                ptyExitedEarly = true;
+                resolve();
+            }
+        });
+        setTimeout(resolve, 2000);
+    });
+    await earlyExitCheck;
+    if (ptyExitedEarly) {
+        const nodeVer = process.version;
+        console.log(`  ${YELLOW}⚠${RESET} The command crashed (CSPRNG assertion failure).`);
+        console.log(`  This is a known issue with Node.js ${nodeVer} + PTY on Windows.`);
+        console.log(`  ${BOLD}Fix:${RESET} Install Node.js 22 LTS: ${GREEN}nvm install 22${RESET} or ${GREEN}winget install OpenJS.NodeJS.LTS${RESET}\n`);
+        process.exit(1);
+    }
     ptyProcess.onData((data) => {
         process.stdout.write(data);
         broadcast(data);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cli-tunnel",
-  "version": "1.2.0-beta.1",
-  "description": "Tunnel any CLI app to your phone - PTY + devtunnel + xterm.js",
+  "version": "1.2.0-beta.11",
+  "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

@@ -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;
@@ -115,7 +117,9 @@
 
   async function loadSessions() {
     try {
-      const resp = await fetch('/api/sessions');
+      const tokenParam = new URLSearchParams(window.location.search).get('token');
+      const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+      const resp = await fetch('/api/sessions', { headers });
       const data = await resp.json();
       renderDashboard(data.sessions || []);
     } catch (err) {
@@ -127,41 +131,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) => {
@@ -174,21 +189,181 @@
   };
 
   window.cleanOffline = async () => {
-    const resp = await fetch('/api/sessions');
+    const tokenParam = new URLSearchParams(window.location.search).get('token');
+    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    const resp = await fetch('/api/sessions', { headers });
     const data = await resp.json();
     const offline = (data.sessions || []).filter(s => !s.online);
     for (const s of offline) {
-      await fetch('/api/sessions/' + s.id, { method: 'DELETE' });
+      await fetch('/api/sessions/' + s.id, { method: 'DELETE', headers });
     }
     loadSessions();
   };
 
   window.deleteSession = async (id) => {
-    await fetch('/api/sessions/' + id, { method: 'DELETE' });
+    const tokenParam = new URLSearchParams(window.location.search).get('token');
+    const headers = tokenParam ? { 'Authorization': 'Bearer ' + tokenParam } : {};
+    await fetch('/api/sessions/' + id, { method: 'DELETE', headers });
     loadSessions();
   };
 
+  // ─── Grid View (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 statusDot = header.querySelector('.grid-panel-status');
+      var panelWs = null;
+
+      (function connectPanel() {
+        // Use hub's proxy endpoint to get a ticket for the session
+        var tokenParam = new URLSearchParams(window.location.search).get('token');
+        var proxyUrl = '/api/proxy/ticket/' + s.port;
+        var wsBase = s.isLocal ? 'ws://127.0.0.1:' + s.port : s.url.replace('https://', 'wss://');
+
+        fetch(proxyUrl, {
+          method: 'POST',
+          headers: { 'Authorization': 'Bearer ' + tokenParam }
+        }).then(function(resp) {
+          if (!resp.ok) throw new Error('Auth failed');
+          return resp.json();
+        }).then(function(data) {
+          panelWs = new WebSocket(wsBase + '?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');
@@ -198,6 +373,7 @@
       $('#btn-sessions').textContent = 'Terminal';
       loadSessions();
     } else {
+      destroyGrid();
       currentView = 'terminal';
       dashboard.classList.add('hidden');
       $('#input-area').classList.remove('hidden');
@@ -367,7 +543,7 @@
   }
 
   // ─── Detect hub mode (no token in URL) ────────────────────
-  const isHubMode = !new URLSearchParams(window.location.search).get('token');
+  const isHubMode = new URLSearchParams(window.location.search).get('hub') === '1';
 
   // ─── WebSocket ───────────────────────────────────────────
   let reconnectAttempt = 0;
@@ -392,7 +568,7 @@
 
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
 
-    // F-02: Try ticket-based auth first
+    // F-02: Ticket-based auth (required)
     try {
       const resp = await fetch('/api/auth/ticket', {
         method: 'POST',
@@ -402,12 +578,12 @@
         const { ticket } = await resp.json();
         ws = new WebSocket(`${proto}//${location.host}?ticket=${encodeURIComponent(ticket)}`);
       } else {
-        // Fallback to token-in-URL (backward compat)
-        ws = new WebSocket(`${proto}//${location.host}?token=${encodeURIComponent(tokenParam)}`);
+        setStatus('offline', 'Auth failed');
+        return;
       }
     } catch {
-      // Fallback to token-in-URL
-      ws = new WebSocket(`${proto}//${location.host}?token=${encodeURIComponent(tokenParam)}`);
+      setStatus('offline', 'Auth failed');
+      return;
     }
     setStatus('connecting', 'Connecting...');
 
@@ -562,6 +738,25 @@
   };
 
   // ─── Mobile Key Bar ───────────────────────────────────────
+  // F-5: Event delegation for key-bar buttons (no inline onclick)
+  const keyBar = document.getElementById('key-bar');
+  if (keyBar) {
+    var keyMap = {
+      '\\x1b[A': '\x1b[A', '\\x1b[B': '\x1b[B', '\\x1b[C': '\x1b[C', '\\x1b[D': '\x1b[D',
+      '\\t': '\t', '\\r': '\r', '\\x1b': '\x1b', '\\x03': '\x03', ' ': ' ', '\\x7f': '\x7f',
+    };
+    keyBar.addEventListener('click', function(e) {
+      var btn = e.target;
+      if (btn && btn.tagName === 'BUTTON' && btn.dataset.key) {
+        var key = keyMap[btn.dataset.key] || btn.dataset.key;
+        if (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

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