cli-tunnel 1.3.0 → 1.3.1-beta.1

package/README.md

@@ -115,9 +115,20 @@ All modes share the same WebSocket connections — switching is instant, no reco
 
 - **Full terminal** rendered by xterm.js — exact same output as your local terminal
 - **Key bar** with ↑ ↓ → ← Tab Enter Esc Ctrl+C for mobile navigation
+- **⏺ Record button** — record the terminal as a .webm video, tap again to stop and download
 - **Sessions button** — switch between terminal and sessions dashboard
 - **QR code** — scan from your phone to connect instantly
 
+## Terminal Recording
+
+Tap the **⏺** button in the key bar to start recording your terminal session as a video. The button turns red and shows elapsed time (⏹ 2:35). Tap again to stop — a `.webm` video file downloads automatically.
+
+- Records at 30fps using the browser's MediaRecorder API
+- Auto-stops after 10 minutes to prevent memory issues on mobile
+- Auto-stops when you switch views or disconnect
+- Works on both phone and desktop browsers
+- No server-side tools needed — recording happens entirely in the browser
+
 ## Prerequisites
 
 - [Node.js](https://nodejs.org/) 22+ (Node 20 works too; Node 23 may need the latest beta)
@@ -182,6 +193,9 @@ Yes. Use `--local` to skip tunnel creation. The terminal is available at `http:/
 **What's hub mode?**
 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.
+
 **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.
 

package/dist/index.js

@@ -24,6 +24,15 @@ import readline from 'node:readline';
 import { WebSocketServer, WebSocket } from 'ws';
 import os from 'node:os';
 import { redactSecrets } from './redact.js';
+// F-15: Global error handlers to prevent unclean crashes
+process.on('uncaughtException', (err) => {
+    console.error('[fatal] Uncaught exception:', err.message);
+    process.exit(1);
+});
+process.on('unhandledRejection', (reason) => {
+    console.error('[fatal] Unhandled rejection:', reason);
+    process.exit(1);
+});
 function askUser(question) {
     const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
     return new Promise((resolve) => {
@@ -49,7 +58,7 @@ ${BOLD}Options:${RESET}
   --local            Disable devtunnel (localhost only)
   --port <n>         Bridge port (default: random)
   --name <name>      Session name (shown in dashboard)
-  --replay           Enable replay buffer (off by default)
+  --no-replay        Disable replay buffer (on by default)
   --help, -h         Show this help
 
 ${BOLD}Examples:${RESET}
@@ -69,13 +78,13 @@ pass through to the underlying app. cli-tunnel's own flags
 }
 const hasLocal = args.includes('--local');
 const hasTunnel = !hasLocal;
-const hasReplay = args.includes('--replay');
+const hasReplay = !args.includes('--no-replay');
 const portIdx = args.indexOf('--port');
 const port = (portIdx !== -1 && args[portIdx + 1]) ? parseInt(args[portIdx + 1], 10) : 0;
 const nameIdx = args.indexOf('--name');
 const sessionName = (nameIdx !== -1 && args[nameIdx + 1]) ? args[nameIdx + 1] : '';
 // Everything that's not our flags is the command
-const ourFlags = new Set(['--local', '--tunnel', '--port', '--name', '--replay']);
+const ourFlags = new Set(['--local', '--tunnel', '--port', '--name', '--no-replay']);
 const cmdArgs = [];
 let skip = false;
 for (let i = 0; i < args.length; i++) {
@@ -87,7 +96,7 @@ for (let i = 0; i < args.length; i++) {
         skip = true;
         continue;
     }
-    if (args[i] === '--local' || args[i] === '--tunnel' || args[i] === '--replay')
+    if (args[i] === '--local' || args[i] === '--tunnel' || args[i] === '--no-replay')
         continue;
     cmdArgs.push(args[i]);
 }
@@ -101,6 +110,17 @@ function sanitizeLabel(l) {
     const clean = l.replace(/[^a-zA-Z0-9_\-=]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').substring(0, 50);
     return clean || 'unknown';
 }
+// 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;
+}
 function getGitInfo() {
     try {
         const remote = execSync('git remote get-url origin', { cwd, encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
@@ -169,6 +189,7 @@ setInterval(() => {
 // ─── Bridge server ──────────────────────────────────────────
 const acpEventLog = [];
 const connections = new Map();
+let localResizeAt = 0; // Timestamp of last local terminal resize
 // #10: Session TTL enforcement — periodically close expired connections
 setInterval(() => {
     if (Date.now() - sessionCreatedAt > SESSION_TTL) {
@@ -255,6 +276,7 @@ const server = http.createServer(async (req, res) => {
         }
     }
     // Hub ticket proxy — fetch ticket from local session on behalf of grid client
+    // F-03: Only hub mode sessions can use this endpoint (hub token already validated above)
     if (hubMode && req.url?.startsWith('/api/proxy/ticket/') && req.method === 'POST') {
         const ticketPathMatch = req.url?.match(/^\/api\/proxy\/ticket\/(\d+)$/);
         if (!ticketPathMatch) {
@@ -320,7 +342,7 @@ const server = http.createServer(async (req, res) => {
                     url: `https://${id}-${p}.${cluster}.devtunnels.ms`,
                     isLocal: machine === localMachine,
                 };
-                // Attach token from local session files (hub mode only)
+                // F-05: Never expose raw tokens in API responses — only indicate availability
                 const baseId = t.tunnelId?.split('.')[0] || t.tunnelId;
                 const token = tokenMap.get(baseId) || tokenMap.get(t.tunnelId);
                 if (token)
@@ -337,6 +359,7 @@ const server = http.createServer(async (req, res) => {
         return;
     }
     // Delete session
+    // F-05: Only allow deleting tunnels owned by this machine
     if (req.url?.startsWith('/api/sessions/') && req.method === 'DELETE') {
         const tunnelId = req.url.replace('/api/sessions/', '').replace(/\.\w+$/, '');
         if (!/^[a-zA-Z0-9._-]+$/.test(tunnelId)) {
@@ -344,6 +367,24 @@ const server = http.createServer(async (req, res) => {
             res.end(JSON.stringify({ error: 'Invalid tunnel ID' }));
             return;
         }
+        // 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 verifyData = JSON.parse(verifyOut);
+            const labels = verifyData.tunnel?.labels || [];
+            const tunnelMachine = labels[4] || '';
+            if (tunnelMachine !== os.hostname()) {
+                res.writeHead(403, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
+                res.end(JSON.stringify({ error: 'Cannot delete tunnels from other machines' }));
+                return;
+            }
+        }
+        catch {
+            // If we can't verify ownership, deny the delete
+            res.writeHead(403, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
+            res.end(JSON.stringify({ error: 'Cannot verify tunnel ownership' }));
+            return;
+        }
         try {
             execFileSync('devtunnel', ['delete', tunnelId, '--force'], { encoding: 'utf-8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe'] });
             res.writeHead(200, { 'Content-Type': 'application/json', 'X-Frame-Options': 'DENY', 'X-Content-Type-Options': 'nosniff' });
@@ -424,19 +465,21 @@ const wss = new WebSocketServer({
         if (Date.now() - sessionCreatedAt > SESSION_TTL)
             return false;
         // F-3: Validate origin BEFORE ticket acceptance
+        // F-06: Require Origin header — reject non-browser clients without Origin
         const origin = info.req.headers.origin;
-        if (origin) {
-            try {
-                const originUrl = new URL(origin);
-                const host = originUrl.hostname;
-                if (host !== 'localhost' && host !== '127.0.0.1' && !host.endsWith('.devtunnels.ms')) {
-                    return false;
-                }
-            }
-            catch {
+        if (!origin) {
+            return false;
+        }
+        try {
+            const originUrl = new URL(origin);
+            const host = originUrl.hostname;
+            if (host !== 'localhost' && host !== '127.0.0.1' && !host.endsWith('.devtunnels.ms')) {
                 return false;
             }
         }
+        catch {
+            return false;
+        }
         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');
@@ -454,6 +497,10 @@ 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' });
 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) => {
+    console.error('[wss] WebSocketServer error:', err.message);
+});
 wss.on('connection', (ws, req) => {
     // F-10: Connection cap (global + per-IP)
     if (connections.size >= 5) {
@@ -473,6 +520,9 @@ wss.on('connection', (ws, req) => {
     const id = crypto.randomUUID();
     ws._remoteAddress = remoteAddress;
     connections.set(id, ws);
+    // 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; });
@@ -484,18 +534,36 @@ wss.on('connection', (ws, req) => {
         ws.send(JSON.stringify({ type: '_replay_done' }));
     }
     ws.on('message', (data) => {
+        // F-13: Enforce WS message rate limit (100 msg/sec)
+        const now = Date.now();
+        if (now > wsMessageResetAt) {
+            wsMessageCount = 0;
+            wsMessageResetAt = now + 1000;
+        }
+        wsMessageCount++;
+        if (wsMessageCount > 100) {
+            auditLog.write(JSON.stringify({ ts: new Date().toISOString(), src: remoteAddress, type: 'rejected', reason: 'ws-rate-limit' }) + '\n');
+            return;
+        }
         const raw = data.toString();
         try {
             const msg = JSON.parse(raw);
             if (msg.type === 'pty_input' && ptyProcess) {
-                auditLog.write(JSON.stringify({ ts: new Date().toISOString(), src: remoteAddress, type: 'pty_input', data: redactSecrets(JSON.stringify(msg.data)) }) + '\n');
-                ptyProcess.write(msg.data);
+                // R-03: Validate msg.data is a string before writing to PTY
+                if (typeof msg.data !== 'string') {
+                    auditLog.write(JSON.stringify({ ts: new Date().toISOString(), src: remoteAddress, type: 'rejected', reason: 'invalid-data-type', dataType: typeof msg.data }) + '\n');
+                }
+                else {
+                    auditLog.write(JSON.stringify({ ts: new Date().toISOString(), src: remoteAddress, type: 'pty_input', data: redactSecrets(msg.data) }) + '\n');
+                    ptyProcess.write(msg.data);
+                }
             }
-            // #7: NaN guard on pty_resize
+            // #7: NaN guard on pty_resize — remote resize only if local hasn't resized recently
             if (msg.type === 'pty_resize') {
                 const cols = Number(msg.cols);
                 const rows = Number(msg.rows);
-                if (Number.isFinite(cols) && Number.isFinite(rows) && ptyProcess) {
+                const localRecentlyResized = Date.now() - localResizeAt < 2000;
+                if (Number.isFinite(cols) && Number.isFinite(rows) && ptyProcess && !localRecentlyResized) {
                     ptyProcess.resize(Math.max(1, Math.min(500, cols)), Math.max(1, Math.min(200, rows)));
                 }
             }
@@ -519,10 +587,17 @@ setInterval(() => {
         ws.ping();
     }
 }, 30000);
+// F-12: Cap per-entry replay buffer size (64KB)
+const MAX_REPLAY_ENTRY_SIZE = 65536;
 function broadcast(data) {
-    const msg = JSON.stringify({ type: 'pty', data });
+    // F-01: Redact secrets from live broadcast (not just replay)
+    const redacted = redactSecrets(data);
+    const msg = JSON.stringify({ type: 'pty', data: redacted });
     if (hasReplay) {
-        acpEventLog.push(msg);
+        // F-12: Cap per-entry size to prevent memory exhaustion
+        if (msg.length <= MAX_REPLAY_ENTRY_SIZE) {
+            acpEventLog.push(msg);
+        }
         if (acpEventLog.length > 2000)
             acpEventLog.splice(0, acpEventLog.length - 2000);
     }
@@ -548,7 +623,8 @@ async function main() {
     if (hubMode) {
         console.log(`  ${BOLD}📋 Hub Mode${RESET} — sessions dashboard`);
         console.log(`  ${DIM}Port:${RESET}     ${actualPort}`);
-        console.log(`  ${DIM}Local URL:${RESET} http://127.0.0.1:${actualPort}?token=${sessionToken}&hub=1\n`);
+        console.log(`  ${DIM}Local URL:${RESET} http://127.0.0.1:${actualPort}?token=${sessionToken}&hub=1`);
+        console.log(`  ${YELLOW}⚠ Token in URL — do not share this URL in screen recordings or public channels${RESET}\n`);
     }
     else {
         console.log(`  ${DIM}Command:${RESET}  ${command} ${commandArgs.join(' ')}`);
@@ -556,6 +632,7 @@ async function main() {
         console.log(`  ${DIM}Port:${RESET}     ${actualPort}`);
         console.log(`  ${DIM}Audit log:${RESET} ${auditLogPath}`);
         console.log(`  ${DIM}Local URL:${RESET} http://127.0.0.1:${actualPort}?token=${sessionToken}`);
+        console.log(`  ${YELLOW}⚠ Token in URL — do not share this URL in screen recordings or public channels${RESET}`);
         console.log(`  ${DIM}Session expires:${RESET} ${new Date(sessionCreatedAt + SESSION_TTL).toLocaleTimeString()}`);
     }
     // Tunnel
@@ -655,7 +732,7 @@ async function main() {
                 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' });
-                const hostProc = spawn('devtunnel', ['host', tunnelId], { stdio: 'pipe', detached: false });
+                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);
                     let out = '';
@@ -670,7 +747,8 @@ async function main() {
                     hostProc.on('error', (e) => { clearTimeout(timeout); reject(e); });
                 });
                 const tunnelUrlWithToken = `${url}?token=${sessionToken}${hubMode ? '&hub=1' : ''}`;
-                console.log(`  ${GREEN}✓${RESET} Tunnel: ${BOLD}${tunnelUrlWithToken}${RESET}\n`);
+                console.log(`  ${GREEN}✓${RESET} Tunnel: ${BOLD}${tunnelUrlWithToken}${RESET}`);
+                console.log(`  ${YELLOW}⚠ Token in URL — do not share in screen recordings or public channels${RESET}\n`);
                 // Write session file for hub discovery
                 writeSessionFile(tunnelId, url, actualPort);
                 try {
@@ -738,6 +816,8 @@ async function main() {
         });
     }
     console.log(`  ${DIM}Starting ${command}...${RESET}\n`);
+    // Clear screen before PTY takes over — prevents overlap with banner/QR output
+    process.stdout.write('\x1b[2J\x1b[H');
     // Spawn PTY
     const nodePty = await import('node-pty');
     const cols = process.stdout.columns || 120;
@@ -766,8 +846,17 @@ async function main() {
         'NODE_PATH', 'NODE_REDIRECT_WARNINGS', 'NODE_PENDING_DEPRECATION',
         'UV_THREADPOOL_SIZE', 'LD_PRELOAD', 'DYLD_INSERT_LIBRARIES',
         'SSH_AUTH_SOCK', 'GPG_TTY',
-        'PYTHONPATH', 'BASH_ENV', 'BASH_FUNC', 'JAVA_TOOL_OPTIONS', 'JAVA_OPTIONS', '_JAVA_OPTIONS',
-        'PROMPT_COMMAND', 'ENV', 'ZDOTDIR', 'PERL5OPT', 'RUBYOPT']);
+        'PYTHONPATH', 'PYTHONSTARTUP', 'BASH_ENV', 'BASH_FUNC', 'JAVA_TOOL_OPTIONS', 'JAVA_OPTIONS', '_JAVA_OPTIONS',
+        'PROMPT_COMMAND', 'ENV', 'ZDOTDIR', 'PERL5OPT', 'RUBYOPT',
+        // F-04: Additional dangerous vars missed by original blocklist
+        'DATABASE_URL', 'REDIS_URL', 'MONGODB_URI', 'MONGO_URL',
+        'SLACK_WEBHOOK_URL', 'SLACK_TOKEN', 'SLACK_BOT_TOKEN',
+        'HTTP_PROXY', 'HTTPS_PROXY', 'ALL_PROXY', 'NO_PROXY',
+        'HISTFILE', 'HISTFILESIZE', 'LESSHISTFILE',
+        'GCP_SERVICE_ACCOUNT', 'GOOGLE_APPLICATION_CREDENTIALS',
+        '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 safeEnv = {};
     for (const [k, v] of Object.entries(process.env)) {
@@ -817,6 +906,6 @@ async function main() {
         process.stdin.setRawMode(true);
     process.stdin.resume();
     process.stdin.on('data', (data) => ptyProcess.write(data.toString()));
-    process.stdout.on('resize', () => ptyProcess.resize(process.stdout.columns || 120, process.stdout.rows || 30));
+    process.stdout.on('resize', () => { localResizeAt = Date.now(); ptyProcess.resize(process.stdout.columns || 120, process.stdout.rows || 30); });
 }
 main().catch((err) => { console.error(err); process.exit(1); });

package/dist/redact.js

@@ -1,5 +1,10 @@
+// F-08: Strip Unicode zero-width characters that can bypass regex patterns
+function stripZeroWidth(text) {
+    return text.replace(/[\u200B\u200C\u200D\uFEFF\u00AD\u2060\u180E]/g, '');
+}
 export function redactSecrets(text) {
-    return text
+    const cleaned = stripZeroWidth(text);
+    return cleaned
         // Generic patterns: key=value, key: value, key="value"
         .replace(/(?:token|secret|key|password|credential|authorization|api_key|private_key|access_key|connection_string|db_pass|signing)[\s:="']+\S{8,}/gi, '[REDACTED]')
         // OpenAI keys
@@ -11,16 +16,31 @@ export function redactSecrets(text) {
         // Azure connection strings
         .replace(/DefaultEndpointsProtocol=[^;\s]{20,}/gi, '[REDACTED]')
         .replace(/AccountKey=[^;\s]{20,}/gi, 'AccountKey=[REDACTED]')
+        // F-09: Azure SAS tokens
+        .replace(/[?&]sig=[a-zA-Z0-9%/+=]{20,}/gi, '?sig=[REDACTED]')
+        .replace(/SharedAccessSignature\s+[^\s"']{20,}/gi, 'SharedAccessSignature [REDACTED]')
         // 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]')
+        // F-17: Bearer tokens (relaxed min length to catch shorter tokens)
+        .replace(/Bearer\s+[a-zA-Z0-9._\-/+=]{8,}/gi, 'Bearer [REDACTED]')
+        // F-17: Basic auth headers
+        .replace(/Basic\s+[a-zA-Z0-9+/=]{8,}/gi, 'Basic [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]')
+        // F-09: Google API keys
+        .replace(/AIzaSy[a-zA-Z0-9_-]{33}/g, '[REDACTED]')
+        // F-09: Stripe keys
+        .replace(/(?:sk|pk|rk)_(?:live|test)_[a-zA-Z0-9]{10,}/g, '[REDACTED]')
+        // F-09: SendGrid keys
+        .replace(/SG\.[a-zA-Z0-9_-]{22,}\.[a-zA-Z0-9_-]{22,}/g, '[REDACTED]')
+        // F-09: Twilio keys
+        .replace(/SK[a-f0-9]{32}/g, '[REDACTED]')
+        // F-09: Webhook secrets
+        .replace(/whsec_[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]');
 }

package/package.json

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

package/remote-ui/app.js

@@ -135,6 +135,34 @@
     }
   }
 
+  function takeScreenshot() {
+    var canvas = null;
+    if (currentView === 'grid' && gridMode === 'fullscreen' && gridTerminals[focusedIndex]) {
+      canvas = gridTerminals[focusedIndex].panel.querySelector('canvas');
+    } else {
+      canvas = termContainer.querySelector('canvas');
+    }
+    if (!canvas) {
+      if (statusText) { var prev = statusText.textContent; statusText.textContent = 'No terminal to capture'; setTimeout(function() { statusText.textContent = prev; }, 2000); }
+      return;
+    }
+    try {
+      var dataUrl = canvas.toDataURL('image/png');
+      var a = document.createElement('a');
+      var timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      a.href = dataUrl;
+      a.download = 'cli-tunnel-' + timestamp + '.png';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      // Flash effect
+      canvas.style.opacity = '0.5';
+      setTimeout(function() { canvas.style.opacity = '1'; }, 150);
+    } catch (e) {
+      if (statusText) { var prev2 = statusText.textContent; statusText.textContent = 'Screenshot failed'; setTimeout(function() { statusText.textContent = prev2; }, 2000); }
+    }
+  }
+
   // ─── xterm.js Terminal ───────────────────────────────────
   let xterm = null;
   let fitAddon = null;
@@ -1097,6 +1125,10 @@
         toggleRecording();
         return;
       }
+      if (btn && btn.tagName === 'BUTTON' && btn.dataset.action === 'take-screenshot') {
+        takeScreenshot();
+        return;
+      }
       if (btn && btn.tagName === 'BUTTON' && btn.dataset.key) {
         var key = keyMap[btn.dataset.key] || btn.dataset.key;
         if (currentView === 'grid' && gridMode === 'fullscreen' && gridTerminals[focusedIndex]) {

package/remote-ui/index.html

@@ -43,6 +43,7 @@
         <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>