fix: working real terminal implementation

Backend fixes:
- Fix TTY stream handling (no demux needed for TTY containers)
- Attach to container before starting to catch all output
- Relax container security constraints for tmux compatibility
- Remove overly aggressive input sanitization that broke escape sequences
- Add test-connection.js for debugging

Frontend fixes:
- Improve RealTerminal component with better lifecycle handling
- Add terminal write buffering for pending output before open
- Use stable callback refs to prevent unnecessary effect re-runs
- Subscribe to messages before connecting to avoid race conditions

Config:
- Add .env.local with local development WebSocket URL

Author: devatnull

backend/package.json

@@ -7,6 +7,7 @@
     "build": "tsc",
     "start": "node dist/server.js",
     "dev": "tsx watch src/server.ts",
+    "test:connection": "node test-connection.js",
     "docker:build": "docker build -t terminal-sandbox -f Dockerfile.sandbox .",
     "docker:test": "docker run --rm -it --network none --memory 256m --cpus 0.5 terminal-sandbox"
   },

backend/src/container-manager.ts

@@ -1,5 +1,4 @@
 import Docker from 'dockerode';
-import { PassThrough } from 'stream';
 
 // =============================================================================
 // Types
@@ -84,46 +83,30 @@ export class ContainerManager {
       AttachStdout: true,
       AttachStderr: true,
 
-      // Security hardening
+      // Security hardening (relaxed for tmux compatibility)
       HostConfig: {
         // No network access
         NetworkMode: 'none',
 
-        // Read-only root filesystem
-        ReadonlyRootfs: true,
-        
-        // Writable tmpfs for /tmp and home
-        Tmpfs: {
-          '/tmp': 'rw,noexec,nosuid,size=64m',
-          '/home/learner/.local': 'rw,noexec,nosuid,size=32m',
-        },
+        // Allow writable filesystem for tmux sockets and temp files
+        // ReadonlyRootfs: true,  // Disabled - tmux needs to write to various locations
 
         // Resource limits
         Memory: this.CONTAINER_LIMITS.Memory,
         MemorySwap: this.CONTAINER_LIMITS.MemorySwap,
         NanoCpus: this.CONTAINER_LIMITS.NanoCpus,
         PidsLimit: this.CONTAINER_LIMITS.PidsLimit,
 
-        // Drop all capabilities
-        CapDrop: ['ALL'],
-        
         // Security options
         SecurityOpt: [
           'no-new-privileges:true',
-          'seccomp=unconfined', // TODO: Add custom seccomp profile
         ],
 
         // Auto-remove on exit (backup cleanup)
         AutoRemove: true,
 
         // No privileged mode
         Privileged: false,
-        
-        // Limit ulimits
-        Ulimits: [
-          { Name: 'nofile', Soft: 1024, Hard: 2048 },
-          { Name: 'nproc', Soft: 50, Hard: 100 },
-        ],
       },
 
       // User
@@ -146,10 +129,7 @@ export class ContainerManager {
       },
     });
 
-    // Start container
-    await container.start();
-    
-    // Attach to container
+    // Attach BEFORE starting container to catch all output
     const stream = await container.attach({
       stream: true,
       stdin: true,
@@ -158,20 +138,18 @@ export class ContainerManager {
       hijack: true,
     });
 
-    // Handle output
-    const stdout = new PassThrough();
-    const stderr = new PassThrough();
-    
-    container.modem.demuxStream(stream, stdout, stderr);
-    
-    stdout.on('data', (chunk: Buffer) => {
+    // Handle output - TTY mode means stream is already raw (no demux needed)
+    stream.on('data', (chunk: Buffer) => {
       onOutput(chunk.toString('utf8'));
     });
 
-    stderr.on('data', (chunk: Buffer) => {
-      onOutput(chunk.toString('utf8'));
+    stream.on('error', (err: Error) => {
+      console.error(`[${sessionId}] Stream error:`, err);
     });
 
+    // Start container after attaching
+    await container.start();
+    
     // Store container info
     const containerId = container.id;
     this.containers.set(containerId, {

backend/src/server.ts

@@ -244,42 +244,14 @@ wss.on('connection', async (ws: WebSocket, req: http.IncomingMessage) => {
 // =============================================================================
 
 function sanitizeInput(input: string): string | null {
-  // Block control characters except common ones
-  const allowedControlChars = [
-    '\x03', // Ctrl+C
-    '\x04', // Ctrl+D
-    '\x1a', // Ctrl+Z
-    '\x1b', // Escape
-    '\r',   // Enter
-    '\n',   // Newline
-    '\t',   // Tab
-    '\x7f', // Backspace
-  ];
-  
-  let sanitized = '';
-  for (const char of input) {
-    const code = char.charCodeAt(0);
-    
-    // Allow printable ASCII
-    if (code >= 32 && code <= 126) {
-      sanitized += char;
-      continue;
-    }
-    
-    // Allow specific control characters
-    if (allowedControlChars.includes(char)) {
-      sanitized += char;
-      continue;
-    }
-    
-    // Allow escape sequences (for arrow keys etc)
-    if (code === 27) {
-      sanitized += char;
-      continue;
-    }
-  }
+  // For terminal input, we need to pass through most things including:
+  // - All printable ASCII (32-126)
+  // - Control characters for terminal control (Ctrl+C, Ctrl+D, etc)
+  // - Escape sequences for arrow keys, function keys, etc (\x1b[A, \x1b[B, etc)
+  // - Carriage return, newline, tab, backspace
 
-  // Block potentially dangerous command patterns
+  // Only block obviously dangerous complete command patterns
+  // Note: This is a basic check - the container is sandboxed anyway
   const dangerousPatterns = [
     /rm\s+-rf\s+\//i,
     /mkfs/i,
@@ -289,13 +261,14 @@ function sanitizeInput(input: string): string | null {
   ];
 
   for (const pattern of dangerousPatterns) {
-    if (pattern.test(sanitized)) {
+    if (pattern.test(input)) {
       console.warn('Blocked dangerous input pattern');
       return null;
     }
   }
 
-  return sanitized;
+  // Pass through the input as-is - terminal needs raw escape sequences
+  return input;
 }
 
 // =============================================================================

backend/test-connection.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+// Quick test script to verify WebSocket + Docker container works
+const WebSocket = require('ws');
+
+const WS_URL = process.env.WS_URL || 'ws://localhost:3001/ws';
+
+console.log(`Connecting to ${WS_URL}...`);
+
+const ws = new WebSocket(WS_URL);
+
+let sessionId = null;
+let ready = false;
+
+ws.on('open', () => {
+  console.log('✓ WebSocket connected');
+});
+
+ws.on('message', (data) => {
+  try {
+    const msg = JSON.parse(data.toString());
+    
+    switch (msg.type) {
+      case 'session':
+        sessionId = msg.id;
+        console.log(`✓ Session ID: ${sessionId}`);
+        break;
+        
+      case 'status':
+        console.log(`  Status: ${msg.message}`);
+        break;
+        
+      case 'ready':
+        ready = true;
+        console.log('✓ Terminal ready!');
+        console.log('\n--- Terminal output ---');
+        
+        // Send resize first (tmux needs this)
+        ws.send(JSON.stringify({ type: 'resize', cols: 80, rows: 24 }));
+        
+        // Send a test command after a short delay
+        setTimeout(() => {
+          console.log('\n--- Sending: nvim --version | head -1 ---');
+          ws.send(JSON.stringify({ type: 'input', data: 'nvim --version | head -1\r' }));
+        }, 500);
+        
+        // Close after 4 seconds
+        setTimeout(() => {
+          console.log('\n--- Test complete, closing ---');
+          ws.close(1000, 'Test complete');
+        }, 4000);
+        break;
+        
+      case 'output':
+        process.stdout.write(msg.data);
+        break;
+        
+      case 'error':
+        console.error(`✗ Error: ${msg.message}`);
+        break;
+        
+      case 'pong':
+        break;
+        
+      default:
+        console.log(`Unknown message type: ${msg.type}`);
+    }
+  } catch (e) {
+    console.error('Failed to parse message:', e);
+  }
+});
+
+ws.on('error', (err) => {
+  console.error('✗ WebSocket error:', err.message);
+});
+
+ws.on('close', (code, reason) => {
+  console.log(`\nConnection closed: ${code} ${reason}`);
+  process.exit(ready ? 0 : 1);
+});
+
+// Timeout after 30 seconds
+setTimeout(() => {
+  console.error('✗ Timeout waiting for ready');
+  ws.close();
+  process.exit(1);
+}, 30000);