Minor: Worker Connection Not Cleaned Up on Component Unmount

[AliiiBenn]

Priority

🟡 Minor - Memory Leak & Resource Management

Location

src/core/compiler/client/index.ts:18-64

Problem Description

The Web Worker connection is not cleaned up when components unmount.

Issues

1. Worker Never Terminated

• Worker lives forever once created
• Continues consuming memory
• Pyodide stays loaded (~10MB+)

2. Pending Messages Never Cleared

• If component unmounts during execution
• Pending promises in Map never resolved
• Memory leak from accumulated callbacks

3. No Abort Mechanism

• Cannot cancel in-progress execution
• Must wait for timeout (30 seconds)

Impact Scenarios

Scenario 1: Navigation During Execution

User navigates away, worker continues running, memory leak.

Scenario 2: Multiple IDE Instances

Multiple workers accumulate, memory usage grows, no cleanup until page refresh.

Related Issues

• Critical: .env.example References MongoDB Instead of PostgreSQL #5 - Missing error handling
• Major: Missing Environment Variable Validation #9 - No tests for worker communication

Steps to Fix

Phase 1: Basic Cleanup

1. Add terminateWorker() function
2. Clear pending messages on terminate
3. Export cleanup function

Phase 2: React Integration

4. Create useCompiler() hook
5. Auto-cleanup on unmount
6. Update components to use hook

Phase 3: Abort Support

7. Add abort signal support
8. Allow cancellation of in-flight requests
9. Update timeout handling to abort

Memory Impact

Current (with leak): 10 lessons opened × 10MB Pyodide = 100MB
Fixed: Single worker instance, cleanup on unmount, max 10MB for Pyodide

Additional Context

This is a subtle memory leak that accumulates over time. Users taking multiple lessons will see performance degradation. The fix is straightforward but important for production use.