feat(playground): Multi-language Coding Playground with AST instrumentation & live visualizations

.github/copilot-instructions.md

@@ -31,7 +31,7 @@ See `docs/SECURITY/Dependency-Supply-Chain-Security-Plan.md` for the current rep
 - Preserve the `package.json` overrides that block compromised Axios releases `1.14.1` and `0.30.4`.
 - For GitHub Actions, pin third-party actions to full commit SHAs, set explicit minimal `permissions`, and prefer OIDC over long-lived secrets whenever external systems are involved.
 
-### **10 Learning Modules**
+### **10 Learning Modules + Playground**
 
 1. JavaScript Engine - V8 internals and execution flow
 2. RxJS - Reactive programming with observables
@@ -43,6 +43,7 @@ See `docs/SECURITY/Dependency-Supply-Chain-Security-Plan.md` for the current rep
 8. Python - Language fundamentals and VM internals
 9. System Design - Architecture patterns and scalability
 10. TypeScript - Type system and advanced patterns
+11. **Playground** - Multi-language coding sandbox with AST instrumentation, timeline debugging, and React Flow visualization lenses
 
 ## 🏗️ Architecture Principles
 
@@ -55,6 +56,9 @@ See `docs/SECURITY/Dependency-Supply-Chain-Security-Plan.md` for the current rep
 - **Icons**: Lucide React for consistent iconography
 - **Testing**: Vitest + React Testing Library
 - **Code Editing**: Monaco Editor (for playground)
+- **AST Tooling**: Acorn + Astring for JS/TS instrumentation in the Playground
+- **Python Runtime**: Pyodide (WASM) for in-browser Python execution in the Playground
+- **Graph Visualization**: @xyflow/react (React Flow) for Playground data-structure lenses
 - **SEO**: @dr.pogodin/react-helmet for meta tags
 
 ### **Architecture Patterns**
@@ -71,7 +75,7 @@ See `docs/SECURITY/Dependency-Supply-Chain-Security-Plan.md` for the current rep
 
 ```
 src/
-├── features/              # Feature-based modules (10 learning modules)
+├── features/              # Feature-based modules (10 learning modules + Playground)
 │   ├── javascript/        # JavaScript Engine module
 │   ├── rxjs/              # RxJS Reactive Programming module
 │   ├── git/               # Git Tutorial module
@@ -81,7 +85,8 @@ src/
 │   ├── bigo/              # Big-O Notation module
 │   ├── python/            # Python Programming module
 │   ├── systemdesign/      # System Design module
-│   └── typescript/        # TypeScript module
+│   ├── typescript/        # TypeScript module
+│   └── playground/        # Coding Playground (standalone dark-themed layout)
 │   └── [feature]/
 │       ├── components/
 │       │   ├── sections/        # Educational content sections
@@ -631,6 +636,16 @@ The application includes these complete learning modules:
     - Advanced types and generics
     - Best practices and patterns
 
+11. **Playground** (`src/features/playground/`)
+    - **Standalone Layout**: Uses its own dark-themed layout (`PlaygroundLayout.tsx`) — no Header/Footer/Sidebar; route is rendered _outside_ `MainLayout`
+    - **Dark Theme Scoping**: `.playground-dark` class on the root wrapper; Tailwind `dark:` utilities are scoped to this class via `darkMode: ['class', '.playground-dark']` in `tailwind.config.js`
+    - **Instrumentation**: `JsInstrumenter` (Acorn/Astring AST rewrite) and `PythonInstrumenter` (`sys.settrace` wrapper) in `instrumentation/`
+    - **Execution**: Sandboxed iframe (`SandboxFrame`) for JS/TS; in-process Pyodide WASM for Python
+    - **Visualization**: React Flow lenses in `components/visualization/lenses/` — Array, LinkedList, Stack, Queue, HashTable
+    - **Security**: CSP-locked iframe, HTML entity escaping, prototype-pollution defense, rate-limited output (see `utils/sanitize.ts`)
+    - **Testing**: 59 tests (unit + component + integration) in this feature
+    - **Developer Guide**: `docs/Playground-Developer-Guide.md`
+
 ### **Visualization Guidelines by Module**
 
 - **Git**: Use consistent color coding (green=staged, blue=committed, red=conflicts)
@@ -639,6 +654,7 @@ The application includes these complete learning modules:
 - **Data Structures**: Show step-by-step algorithm execution
 - **Big-O**: Use visual metaphors (teleporter, librarian, conveyor belt)
 - **Python**: 3D models for VM internals and memory profiler
+- **Playground**: React Flow lenses for data structures; space-themed animated starfield canvas; dark-scoped theme
 
 ## 🚨 Code Quality Standards
 

README.md

@@ -35,17 +35,17 @@
 - **Step-by-Step Guidance**: Progressive learning with animated tutorials
 - **Debug Visualizations**: Live data structure state during code execution
 
-### 🎯 **LeetCode-Style Playground**
-
-- **Interactive Coding Environment**: Monaco editor with syntax highlighting and IntelliSense
-- **Step-by-Step Debugging**: Pause execution, inspect variables, and watch data structures change in real-time
-- **Data Structure Visualizations**: Array, LinkedList, Queue, Stack, and HashTable with live updates
-- **Performance Analysis**: Big-O complexity analysis and execution time monitoring
-- **Gamification System**: Scoring, achievements, and progress tracking
-- **Educational Tooltips**: Explanations for each operation and debugging concept
+### 🎯 **Coding Playground**
+
+- **Multi-Language Support**: JavaScript, TypeScript, and Python execution with Monaco editor
+- **AST-Based Instrumentation**: Acorn/Astring pipeline injects tracing into JS/TS; `sys.settrace` wrapper for Python via Pyodide (WASM)
+- **Timeline Player**: Step through snapshots, inspect variables and call stack at each execution point
+- **Visualization Lenses**: Pluggable React Flow canvases — Array, LinkedList, Stack, Queue, HashTable with live state updates
+- **Sandboxed Execution**: CSP-locked iframe with no network access; blocked `eval`, `XMLHttpRequest`, `fetch`, `WebSocket`
+- **Space-Themed Dark UI**: Standalone layout with animated starfield canvas, scoped dark theme
+- **Example Snippets**: Curated per-language examples with pre-selected visualization lenses
 - **Keyboard Shortcuts**: F10 (step), F5 (continue/pause), F11 (reset), Space (pause/resume)
-- **Session Persistence**: Auto-save and restore debugging sessions
-- **Problem Database**: Curated coding challenges with test cases and solutions
+- **Rate-Limited Output**: Console entries capped at 500, oversized strings truncated to 50 KB
 
 ### 🎨 **Modern User Experience**
 
@@ -63,6 +63,10 @@
 - **Styling**: Tailwind CSS 4.x for utility-first styling
 - **Routing**: React Router for seamless navigation
 - **Icons**: Lucide React for consistent iconography
+- **Code Editor**: Monaco Editor (`@monaco-editor/react`) for the Playground
+- **AST Tooling**: Acorn + Astring for JS/TS instrumentation
+- **Python Runtime**: Pyodide (WASM) for in-browser Python execution
+- **Graph Visualization**: @xyflow/react (React Flow) for data-structure lenses
 
 ### **Visualization Technologies**
 
@@ -339,20 +343,20 @@ Comprehensive DevOps and cloud computing module with 6 interactive visualization
 - **Modern Dev Roles**: Frontend cloud developer, backend serverless developer, DevOps/platform engineer, SRE roles, DevSecOps practices, and career paths
 - **Observability**: Three pillars (metrics, logs, traces) with interactive exploration, alerting best practices, incident management, DORA metrics, and future trends
 
-### 🎯 **LeetCode-Style Playground (Complete)**
+### 🎯 **Coding Playground (Complete)**
 
-Interactive coding environment that transforms algorithm learning through visual debugging and gamification:
+Multi-language coding environment with AST-based instrumentation and live data-structure visualizations:
 
-- **Interactive Problem Solving**: Curated coding challenges with real-time test case validation and performance analysis
-- **Advanced Debugging Engine**: Step-by-step execution with pause/resume, variable inspection, and call stack visualization
-- **Live Data Structure Visualization**: Watch arrays, linked lists, stacks, queues, and hash tables change in real-time during execution
-- **Educational Debugging**: Comprehensive tooltips explaining each operation, data structure behavior, and algorithmic concepts
-- **Keyboard Shortcuts**: Professional debugging experience with F10 (step), F5 (continue/pause), F11 (reset), and Space (pause/resume)
-- **Performance Monitoring**: Real-time Big-O complexity analysis, memory usage tracking, and execution time profiling
-- **Gamification System**: Achievement unlocks, scoring system, and progress tracking to motivate learning
-- **Session Persistence**: Auto-save debugging sessions and restore work across browser sessions
-- **Multiple Data Structures**: Complete implementations with collision handling, hash calculations, and performance comparisons
-- **Code Instrumentation**: Advanced code analysis with function call/return tracking and operation-level insights
+- **Multi-Language Execution**: JavaScript, TypeScript (transpiled), and Python (Pyodide WASM) — all in-browser, no server
+- **AST Instrumentation**: Acorn/Astring pipeline injects `__snapshot()` calls around every statement; Python uses `sys.settrace` wrapper with base64-encoded source
+- **Timeline Player**: Step forward/backward through execution snapshots, inspect variables and call stack at each point
+- **Visualization Lenses**: Pluggable React Flow canvases for Array, LinkedList, Stack, Queue, and HashTable — select the lens matching your algorithm
+- **Sandboxed Iframe**: CSP `default-src 'none'; script-src 'unsafe-inline'`; blocked network APIs (`fetch`, `XMLHttpRequest`, `WebSocket`); 10-second execution timeout
+- **Space-Themed Dark UI**: Standalone layout (no Header/Footer/Sidebar), animated starfield canvas, dark theme scoped via `.playground-dark` class
+- **Example Snippets**: Per-language curated examples with pre-selected visualization lenses
+- **Keyboard Shortcuts**: F10 (step), F5 (continue/pause), F11 (reset), Space (pause/resume)
+- **Security Hardening**: HTML entity escaping, prototype-pollution defense, recursive-depth limits, rate-limited console output (500 entries, 50 KB max string)
+- **Developer Guide**: See `docs/Playground-Developer-Guide.md` for adding lenses, languages, and snippets
 
 ## 🛠️ Development