From a73277e90cca2041ab3f00bc3f552e176ecd699b Mon Sep 17 00:00:00 2001
From: Mohammad Naim Faizy <mnaim.faizy@gmail.com>
Date: Sun, 11 Oct 2026 20:09:18 +1100
Subject: [PATCH] chore: retire the old playground; there is one Playground

ADR 0004, decision 5. The shell in src/components/playground never ran
the learner's code (Run, Test and Submit were timed mocks).

- Remove src/components/playground, its hook, scoring, types, memory
  monitor and theme entry (about 5,700 lines).
- Remove the "Interactive Playground" section from the Big-O and Data
  Structures pages, the sidebar and moduleNavigation. Their Introduction
  cards now open /playground in a new tab.
- Park the problem set and its types under
  src/features/playground/exercises for the Exercise feature; not wired in.
- RxJS: delete the stub code editor (canned output) and rename the rest
  to the marble diagram tool.
- Big-O quiz bank: three questions referenced the removed section.
- README and the Playground developer guide describe the one Playground.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md                                     |  77 +-
 docs/Playground-Developer-Guide.md            |  51 +-
 quiz-banks/bigo.quiz.json                     |  12 +-
 src/components/Sidebar.tsx                    |   2 -
 src/components/playground/CodeEditor.tsx      | 119 ---
 src/components/playground/ExecutionEngine.tsx | 682 --------------
 .../playground/PerformanceAnalyzer.tsx        | 478 ----------
 src/components/playground/Playground.tsx      | 837 ------------------
 src/components/playground/ProblemDisplay.tsx  | 136 ---
 src/components/playground/ScoringSystem.tsx   | 141 ---
 src/components/playground/TestRunner.tsx      | 440 ---------
 .../playground/VisualizationSelector.tsx      |  99 ---
 .../rxjs/marble/MarbleDiagramTool.tsx         | 280 ++++++
 .../rxjs/playground/CodePlayground.tsx        | 297 -------
 .../rxjs/playground/IntegratedPlayground.tsx  | 128 ---
 .../rxjs/playground/MarblePlayground.tsx      | 226 -----
 src/components/rxjs/playground/index.ts       |  25 -
 src/components/rxjs/shared/types.ts           |   2 +-
 src/features/bigo/BigOPage.tsx                |   3 -
 .../bigo/components/sections/Introduction.tsx |  20 +-
 .../datastructures/DataStructuresPage.tsx     |   3 -
 .../components/sections/Introduction.tsx      |  21 +-
 .../playground/exercises}/problems.ts         |   6 +-
 src/features/playground/exercises/types.ts    |  88 ++
 .../components/sections/MarbleDiagrams.tsx    |   6 +-
 .../rxjs/components/sections/Observables.tsx  |   2 +-
 .../rxjs/components/sections/Operators.tsx    |   4 +-
 .../components/sections/VisualizationTool.tsx |  30 +-
 src/hooks/usePlayground.ts                    | 459 ----------
 src/shared/constants/moduleNavigation.ts      |   2 -
 src/types/playground.ts                       | 440 ---------
 src/utils/memoryMonitor.ts                    | 133 ---
 src/utils/scoring.ts                          | 294 ------
 src/utils/theme.ts                            |   8 -
 34 files changed, 490 insertions(+), 5061 deletions(-)
 delete mode 100644 src/components/playground/CodeEditor.tsx
 delete mode 100644 src/components/playground/ExecutionEngine.tsx
 delete mode 100644 src/components/playground/PerformanceAnalyzer.tsx
 delete mode 100644 src/components/playground/Playground.tsx
 delete mode 100644 src/components/playground/ProblemDisplay.tsx
 delete mode 100644 src/components/playground/ScoringSystem.tsx
 delete mode 100644 src/components/playground/TestRunner.tsx
 delete mode 100644 src/components/playground/VisualizationSelector.tsx
 create mode 100644 src/components/rxjs/marble/MarbleDiagramTool.tsx
 delete mode 100644 src/components/rxjs/playground/CodePlayground.tsx
 delete mode 100644 src/components/rxjs/playground/IntegratedPlayground.tsx
 delete mode 100644 src/components/rxjs/playground/MarblePlayground.tsx
 delete mode 100644 src/components/rxjs/playground/index.ts
 rename src/{data => features/playground/exercises}/problems.ts (99%)
 create mode 100644 src/features/playground/exercises/types.ts
 delete mode 100644 src/hooks/usePlayground.ts
 delete mode 100644 src/types/playground.ts
 delete mode 100644 src/utils/memoryMonitor.ts
 delete mode 100644 src/utils/scoring.ts

diff --git a/README.md b/README.md
index b4339ee..b4ced26 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 **🌐 Live Website**: [https://codexecutives.com](https://codexecutives.com)
 
-**✨ Now featuring 15 complete learning modules with 96+ interactive visualizations, root-level scenario quiz banks for every module, shared timed quizzes with local progress tracking, and a LeetCode-style playground with advanced debugging and gamification.**
+**✨ Now featuring 15 complete learning modules with 96+ interactive visualizations, root-level scenario quiz banks for every module, shared timed quizzes with local progress tracking, and a Playground where learners run their own code and step through what it did.**
 
 > **📌 Repository Maintainers**: See [REPOSITORY-ABOUT-QUICK-REFERENCE.md](./docs/REPOSITORY-ABOUT-QUICK-REFERENCE.md) for GitHub repository About section configuration (description, website, and topics).
 
@@ -25,7 +25,7 @@
 - **Auth & Security**: Modern authentication and authorization — OAuth 2.0, OIDC, PKCE, WebAuthn/Passkeys, Zero Trust, BFF Pattern, and AI agent authentication
 - **Backend Architecture**: Architecture patterns (Monolithic, Layered, Microservices, Event-Driven, Hexagonal), resilience patterns (Circuit Breaker, Sidecar, Saga), API design (REST, GraphQL, gRPC), CAP theorem, ACID vs BASE, real-time communication, observability, and the complete request lifecycle
 - **Shared Timed Module Quizzes**: Every learning module ends with a 5-question, 10-minute scenario quiz backed by a root-level JSON bank and localStorage result history
-- **LeetCode-Style Playground**: Interactive coding environment with debugging, visualizations, and gamification
+- **Playground**: One standalone page (`/playground`) with a code editor, a step-by-step trace of the run, and a console
 
 ### 🎮 **Interactive Visualizations**
 
@@ -36,17 +36,15 @@
 - **Step-by-Step Guidance**: Progressive learning with animated tutorials
 - **Debug Visualizations**: Live data structure state during code execution
 
-### 🎯 **Coding Playground**
+### 🎯 **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)
-- **Rate-Limited Output**: Console entries capped at 500, oversized strings truncated to 50 KB
+There is one Playground, at `/playground` (`src/features/playground/`). It is where a learner runs their own code and steps through the trace of that run. See [Playground (in progress)](#-playground-in-progress) below for details.
+
+- **Editor**: Monaco, with JavaScript, TypeScript and Python selectable
+- **Trace**: The run is recorded as steps; step controls show the line, the call stack and the variables at each step
+- **Console**: What the code printed, in order
+- **Lenses**: Event Loop, Heap & Stack, Data Structures and Streams
+- **Examples**: Prebuilt code per language, each with a suggested lens
 
 ### 🧠 **Timed Module Quizzes**
 
@@ -77,7 +75,7 @@
 - **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
+- **Graph Visualization**: @xyflow/react (React Flow) for the Playground's lenses
 
 ### **Visualization Technologies**
 
@@ -100,23 +98,16 @@ src/
 │   │   │   ├── hash/    # HashTable visualization
 │   │   ├── bigo/        # Big-O notation visualizations (10+ components)
 │   │   └── python/      # Python programming visualizations
-│   ├── playground/      # LeetCode-style playground components
-│   │   ├── Playground.tsx          # Main playground component
-│   │   ├── ProblemDisplay.tsx      # Problem statement and examples
-│   │   ├── CodeEditor.tsx          # Monaco-based code editor
-│   │   ├── VisualizationSelector.tsx # Data structure selection
-│   │   ├── TestRunner.tsx          # Test case execution
-│   │   ├── PerformanceAnalyzer.tsx # Big-O analysis
-│   │   ├── ExecutionEngine.tsx     # Advanced debugging engine
-│   │   └── ScoringSystem.tsx       # Gamification system
 │   └── shared/          # Shared UI components
+├── features/
+│   └── playground/      # The Playground (standalone /playground route)
 ├── pages/               # Main application pages
 │   ├── NextjsPage.tsx   # Next.js tutorial page
 │   ├── GitPage.tsx      # Git tutorial page
 │   ├── JavaScriptPage.tsx
 │   ├── RxJSPage.tsx
-│   ├── DataStructuresPage.tsx # Data structures module with playground
-│   ├── BigOPage.tsx     # Big-O notation module with playground
+│   ├── DataStructuresPage.tsx # Data structures module
+│   ├── BigOPage.tsx     # Big-O notation module
 │   └── PythonPage.tsx   # Python programming module
 ├── sections/            # Educational content sections
 │   ├── nextjs/          # Next.js learning modules (7 sections)
@@ -139,15 +130,12 @@ src/
 │   ├── datastructures.ts # Data structures type definitions
 │   ├── bigo.ts         # Big-O notation type definitions
 │   ├── python.ts       # Python programming type definitions
-│   ├── playground.ts   # Playground type definitions
 │   └── quiz.ts         # Shared quiz schema and result types
 ├── utils/              # Utility functions
 │   ├── instrument.ts   # Code instrumentation for debugging
 │   ├── memoryMonitor.ts # Performance monitoring
 │   ├── quiz.ts         # Quiz loading, scoring, and answer utilities
 │   └── theme.ts        # Theme and styling utilities
-├── data/               # Static data and problem sets
-│   └── problems.ts     # LeetCode-style coding problems
 ```
 
 ### Quiz Bank Naming
@@ -378,10 +366,6 @@ 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
 
-### 🎯 **Coding Playground (Complete)**
-
-Multi-language coding environment with AST-based instrumentation and live data-structure visualizations:
-
 ### 🏛️ **Backend Architecture (Complete)**
 
 Comprehensive backend architecture module with 6+ interactive visualizations covering the full backend stack:
@@ -410,16 +394,21 @@ Comprehensive database internals module with 7 interactive visualizations coveri
 - **Oracle vs PostgreSQL**: SGA vs shared_buffers, process models, MVCC Undo/Redo vs dead tuples, commit flow comparison with interactive MVCC visualization
 - **Visualization Hub**: 7 interactive visualizations — Database Taxonomy, Query Lifecycle, B-Tree Index, Buffer Manager, ACID Transactions, MVCC Comparison, ER Diagram Builder
 
-- **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
+### 🎯 **Playground (in progress)**
+
+The Playground is the one place where a learner runs their own code and watches what it does. It is a standalone page at `/playground`, with its own layout (no Header/Footer/Sidebar), and lives in `src/features/playground/`. No module has a playground of its own.
+
+Its visualizations are being rebuilt on the same 2D/3D views the stories use, as decided in [ADR 0004](docs/adr/0004-playground-traces-share-the-snapshot.md); until then the lenses show only part of what a run does.
+
+- **Editor**: Monaco, with JavaScript, TypeScript and Python selectable
+- **Running code**: Everything runs in the browser. JavaScript and TypeScript go to a sandboxed iframe (`sandbox="allow-scripts"`, a CSP with `default-src 'none'`, network APIs blocked); Python goes to Pyodide (WASM). A run times out after 10 seconds
+- **Trace**: The code is instrumented before it runs (Acorn/Astring for JavaScript, `sys.settrace` for Python) so that the run is recorded as a trace: one step per statement, with the line, the call stack and the variables
+- **Step controls**: Move forward and backward through the steps or play them; Left/Right arrows step, Space plays or pauses, Home/End jump to the first or last step
+- **Console**: What the code printed, capped at 500 entries of at most 10 KB each, HTML-escaped before rendering
+- **Lenses**: Event Loop, Heap & Stack, Data Structures and Streams, drawn with React Flow today
+- **Examples**: Prebuilt code per language, each with a suggested lens
+- **Dark theme**: The Playground is the site's only dark page; its styles are scoped under `data-theme="playground"`
+- **Developer Guide**: See `docs/Playground-Developer-Guide.md` for the current structure, lenses, languages and examples
 
 ## 🛠️ Development
 
@@ -486,7 +475,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - **React** team for the amazing framework ecosystem
 - **Vite** for lightning-fast development experience
 - **Tailwind CSS** for utility-first styling approach
-- **Monaco Editor** for the professional code editing experience in the playground
+- **Monaco Editor** for the code editor in the Playground
 - **Vercel** for hosting and deployment platform
 - **Open Source Community** for the tools and libraries that make this possible
 
@@ -496,13 +485,13 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - 💬 **Discussions**: Join community discussions for questions and ideas
 - 📖 **Documentation**: Comprehensive docs available in the `/docs` directory
 - 🎓 **Learning Modules**: 16 complete interactive modules with 103+ visualizations
-- 🎯 **Playground**: LeetCode-style coding environment with debugging and gamification
+- 🎯 **Playground**: Run your own JavaScript, TypeScript or Python and step through the trace at `/playground`
 
 ---
 
 **Built with ❤️ for developers, by developers**
 
-_Transform your understanding of programming concepts through interactive visualization and hands-on learning. Master modern web development with our comprehensive Next.js, Git, JavaScript, RxJS, Data Structures, Big-O Notation, Python Programming, and AI Fundamentals modules. Practice algorithms with our LeetCode-style playground featuring advanced debugging, real-time visualizations, and gamification._
+_Transform your understanding of programming concepts through interactive visualization and hands-on learning. Master modern web development with our comprehensive Next.js, Git, JavaScript, RxJS, Data Structures, Big-O Notation, Python Programming, and AI Fundamentals modules. Run your own code in the Playground and step through what it did._
 
 ## Visualization Architecture
 
diff --git a/docs/Playground-Developer-Guide.md b/docs/Playground-Developer-Guide.md
index f787ba2..b388bb9 100644
--- a/docs/Playground-Developer-Guide.md
+++ b/docs/Playground-Developer-Guide.md
@@ -1,6 +1,10 @@
 # Playground Developer Guide
 
-> Internal reference for contributors working on the Code Executives interactive coding playground.
+> Internal reference for contributors working on the Code Executives Playground.
+
+> **This guide describes the code as it is today, and part of it will change.** [ADR 0004](adr/0004-playground-traces-share-the-snapshot.md) replaces the React Flow lenses with the 2D/3D views the stories use, and changes what a step records. [How to Add a New Visualization Lens](#how-to-add-a-new-visualization-lens) describes the current mechanism, which that work will replace.
+>
+> **Words.** The prose follows the glossary in [CONTEXT.md](../CONTEXT.md): the record of a run is a **trace** made of **steps**, prebuilt code is an **example**, and the output pane is the **console**. The code has not been renamed yet, so file and identifier names keep their old words: `StateSnapshot` is the data of one step, `useTimeline.ts` and `TimelinePlayer.tsx` move through the steps of a trace, and `exampleSnippets.ts` holds the examples.
 
 ---
 
@@ -11,7 +15,7 @@
 3. [How to Add a New Visualization Lens](#how-to-add-a-new-visualization-lens)
 4. [How to Add a New Language](#how-to-add-a-new-language)
 5. [How to Modify the Theme](#how-to-modify-the-theme)
-6. [How to Add Example Snippets](#how-to-add-example-snippets)
+6. [How to Add Examples](#how-to-add-examples)
 7. [Security Considerations](#security-considerations)
 8. [Performance Budget & Monitoring](#performance-budget--monitoring)
 9. [Testing](#testing)
@@ -26,16 +30,18 @@ The Playground is a **standalone feature module** at `src/features/playground/`
 
 | Decision                                        | Rationale                                                                |
 | ----------------------------------------------- | ------------------------------------------------------------------------ |
-| Standalone layout (`PlaygroundLayout`)          | Full viewport needed for editor + visualizations                         |
+| Standalone layout (`PlaygroundLayout`)          | Full viewport needed for editor + lenses                                 |
 | Dark theme scoped via `data-theme="playground"` | CSS custom properties avoid polluting the light-mode main site           |
 | Sandboxed `<iframe>` for JS/TS execution        | Defense-in-depth: CSP + `sandbox="allow-scripts"` + network API blocking |
 | Pyodide for Python                              | WASM-based CPython in the browser, lazy-loaded from CDN (~11 MB)         |
 | `acorn` + `astring` for JS instrumentation      | Parse → transform → regenerate; no eval-based instrumentation            |
 | `sys.settrace()` for Python instrumentation     | CPython's native tracing mechanism, captured via Pyodide FFI             |
-| React Flow (`@xyflow/react`) for visualizations | Interactive node graphs with built-in pan/zoom                           |
+| React Flow (`@xyflow/react`) for the lenses     | Interactive node graphs with built-in pan/zoom (to be replaced, ADR 0004) |
 
 ### Data Flow
 
+A run produces a trace (`StateSnapshot[]`, one entry per step) and the console entries (`ConsoleEntry[]`).
+
 ```
 User Code → [Instrumenter] → Instrumented Code → [Sandbox/Pyodide]
                                                         ↓
@@ -52,6 +58,7 @@ User Code → [Instrumenter] → Instrumented Code → [Sandbox/Pyodide]
 
 ```
 src/features/playground/
+├── PlaygroundEntry.tsx            # Lazy-loaded entry for the /playground route
 ├── PlaygroundApp.tsx              # Root orchestrator
 ├── PlaygroundApp.test.tsx         # Smoke tests
 ├── types/
@@ -62,7 +69,7 @@ src/features/playground/
 │   ├── usePlaygroundState.ts      # Language, code, execution state
 │   ├── useSandbox.ts              # JS/TS sandbox execution
 │   ├── usePyodide.ts              # Python/Pyodide execution
-│   ├── useTimeline.ts             # Timeline step navigation + auto-play
+│   ├── useTimeline.ts             # Moving through the steps of a trace + auto-play
 │   └── usePaneLayout.ts           # Resizable 3-pane layout
 ├── instrumentation/
 │   ├── JsInstrumenter.ts          # JS instrumentation wrapper
@@ -70,22 +77,24 @@ src/features/playground/
 │   ├── StateSnapshot.ts           # Clone, diff, format utilities
 │   └── index.ts                   # Re-exports
 ├── services/
-│   └── instrumentCode.ts          # Low-level acorn AST transformation
+│   ├── instrumentCode.ts          # Low-level acorn AST transformation
+│   └── pyodide-loader.ts          # Loads Pyodide
 ├── utils/
 │   ├── codeTemplates.ts           # Default starter code per language
-│   ├── exampleSnippets.ts         # Pre-built example snippets
+│   ├── exampleSnippets.ts         # The examples
 │   └── sanitize.ts                # XSS prevention + output limits
 ├── components/
 │   ├── editor/
 │   │   ├── MonacoEditor.tsx       # Monaco wrapper
-│   │   └── EditorTabs.tsx         # File tab bar
+│   │   ├── EditorTabs.tsx         # File tab bar
+│   │   └── LanguagePicker.tsx     # Language dropdown
 │   ├── execution/
 │   │   ├── SandboxFrame.tsx       # Sandboxed iframe for JS/TS
-│   │   ├── ConsoleOutput.tsx      # Console output panel
+│   │   ├── ConsoleOutput.tsx      # The console
 │   │   ├── PythonRunner.tsx       # Pyodide loading indicator
 │   │   └── ExecutionController.tsx
 │   ├── instrumentation/
-│   │   └── TimelinePlayer.tsx     # Timeline slider + variables + call stack
+│   │   └── TimelinePlayer.tsx     # Step slider + variables + call stack
 │   ├── visualizations/
 │   │   ├── VisualizationCanvas.tsx
 │   │   ├── LensSelector.tsx
@@ -114,6 +123,8 @@ src/features/playground/
 
 ## How to Add a New Visualization Lens
 
+> This is the current mechanism. ADR 0004 rebuilds the lenses on the shared 2D/3D views, so check the ADR before investing in a new React Flow lens.
+
 1. **Create the lens component** in `components/visualizations/lenses/`:
 
 ```tsx
@@ -128,7 +139,7 @@ interface MyLensProps {
 }
 
 const MyLens: React.FC<MyLensProps> = ({ currentSnapshot }) => {
-  // Transform snapshot data into React Flow nodes + edges
+  // Transform the current step's data into React Flow nodes + edges
   const nodes = useMemo(() => buildNodes(currentSnapshot), [currentSnapshot]);
   const edges = useMemo(() => buildEdges(currentSnapshot), [currentSnapshot]);
 
@@ -166,7 +177,7 @@ export type VisualizationLens =
 
 4. **Update LensSelector** to show the new lens in the toolbar dropdown.
 
-5. **Wrap in `React.memo`** for performance (the snapshot props change on every step).
+5. **Wrap in `React.memo`** for performance (the `currentSnapshot` and `previousSnapshot` props change on every step).
 
 ---
 
@@ -196,7 +207,7 @@ const LANGUAGE_MAP: Record<PlaygroundLanguage, string> = {
 
 5. **Wire it into `PlaygroundApp.tsx`** — add the language to the `consoleEntries` selection logic and execution handlers.
 
-6. **Add example snippets** in `utils/exampleSnippets.ts`.
+6. **Add examples** in `utils/exampleSnippets.ts`.
 
 7. **Update `LanguagePicker.tsx`** to show the new language in the dropdown.
 
@@ -242,9 +253,9 @@ All playground styling is scoped under `[data-theme="playground"]` via CSS custo
 
 ---
 
-## How to Add Example Snippets
+## How to Add Examples
 
-Edit `utils/exampleSnippets.ts`:
+An example is prebuilt code the learner can load and run, with a suggested lens. Edit `utils/exampleSnippets.ts`:
 
 ```ts
 {
@@ -259,7 +270,7 @@ console.log(x);`,
 },
 ```
 
-Snippets appear in the toolbar's "Examples" dropdown, filtered by the currently selected language.
+Examples appear in the toolbar's "Examples" dropdown, filtered by the currently selected language.
 
 ---
 
@@ -284,14 +295,14 @@ Snippets appear in the toolbar's "Examples" dropdown, filtered by the currently
 
 ### Output Sanitization
 
-- All console output is HTML-escaped via `escapeHtml()` before rendering.
+- Everything written to the console is HTML-escaped via `escapeHtml()` before rendering.
 - `sanitizeOutput()` handles circular references, prototype pollution keys (`__proto__`, `constructor`), BigInt, Symbol, and deeply nested objects.
 - Entry counts capped at `MAX_CONSOLE_ENTRIES` (500).
 - Individual entries capped at `MAX_ENTRY_LENGTH` (10 KB).
 
 ### For Contributors
 
-- **Never** use `dangerouslySetInnerHTML` with unsanitized user output.
+- **Never** use `dangerouslySetInnerHTML` with unsanitized console entries.
 - **Never** inject user code directly into iframe `srcdoc` — always use `postMessage`.
 - **Never** add `allow-same-origin` to the sandbox iframe.
 - When adding new network/system APIs, block them in `SandboxFrame.tsx`.
@@ -311,7 +322,7 @@ Snippets appear in the toolbar's "Examples" dropdown, filtered by the currently
 
 ### Optimization Strategies
 
-- **React.memo** on all visualization lenses and `AnimatedNode`.
+- **React.memo** on all lenses and `AnimatedNode`.
 - **Data caps**: `DataStructureLens` limits to 200 nodes max.
 - **Adaptive canvas**: `SpaceBackground` adjusts star count based on `navigator.hardwareConcurrency`.
 - **Monaco features disabled**: `codeLens`, `colorDecorators`, `inlayHints`, `lightbulb`, `links`, `renderWhitespace`, `occurrencesHighlight`, `selectionHighlight`.
@@ -321,7 +332,7 @@ Snippets appear in the toolbar's "Examples" dropdown, filtered by the currently
 
 Use `PerformanceDashboard` (bottom-right in dev mode) to watch:
 
-- Component re-render frequency during timeline stepping
+- Component re-render frequency while stepping through a trace
 - Bundle chunk sizes after `npm run build`
 - Lighthouse performance score (target: > 80 for `/playground`)
 
diff --git a/quiz-banks/bigo.quiz.json b/quiz-banks/bigo.quiz.json
index 07c3abb..db3fe72 100644
--- a/quiz-banks/bigo.quiz.json
+++ b/quiz-banks/bigo.quiz.json
@@ -576,7 +576,7 @@
       "id": "bigo-q22",
       "type": "multi-select",
       "difficulty": "expert",
-      "scenario": "The interactive playground is showing several code patterns, and you need to identify the ones that are logarithmic in n.",
+      "scenario": "During a code review, a teammate lists several recurring code patterns from the service, and you need to identify the ones that are logarithmic in n.",
       "prompt": "Which patterns have logarithmic time complexity with respect to n?",
       "options": [
         "Repeatedly halve n until it becomes 1",
@@ -593,11 +593,11 @@
       "explanation": "Halving loops, binary search, and heap insertion all grow logarithmically with input size. A full scan is linear, and merge sort over an entire array is O(n log n).",
       "tags": [
         "logarithmic-time",
-        "interactive-playground",
+        "code-review",
         "patterns"
       ],
       "references": [
-        "Interactive Playground",
+        "Practice Challenges",
         "Common Complexities"
       ]
     },
@@ -605,7 +605,7 @@
       "id": "bigo-q23",
       "type": "ordering",
       "difficulty": "expert",
-      "scenario": "A retrospective is documenting why append-heavy behavior in a dynamic array still scales well in the interactive playground.",
+      "scenario": "A retrospective is documenting why append-heavy behavior in a dynamic array still scales well in a high-volume event buffer.",
       "prompt": "Order the reasoning steps that justify O(1) amortized append time.",
       "items": [
         "Conclude the average append cost is O(1) amortized",
@@ -629,7 +629,7 @@
       ],
       "references": [
         "Advanced Concepts",
-        "Interactive Playground"
+        "Practice Challenges"
       ]
     },
     {
@@ -735,7 +735,7 @@
       ],
       "references": [
         "Algorithm Analysis",
-        "Interactive Playground"
+        "Practice Challenges"
       ]
     },
     {
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 60ab8a7..d3d8e74 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -253,7 +253,6 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
       ],
     },
     { label: 'Complexity Analysis', path: '/datastructures?section=Complexity%20Analysis' },
-    { label: 'Interactive Playground', path: '/datastructures?section=playground' },
     { label: 'Real-World Applications', path: '/datastructures?section=Real-World%20Applications' },
     { label: 'Practice Problems', path: '/datastructures?section=Practice%20Problems' },
   ],
@@ -295,7 +294,6 @@ const sidebarSections: Record<string, Array<SidebarItem>> = {
     { label: 'Algorithm Analysis', path: '/bigo?section=algorithm-analysis' },
     { label: 'Advanced Concepts', path: '/bigo?section=advanced-concepts' },
     { label: 'Practice Challenges', path: '/bigo?section=practice-challenges' },
-    { label: 'Interactive Playground', path: '/bigo?section=playground' },
     { label: 'Gamification Hub', path: '/bigo?section=gamification-hub' },
     { label: 'Real-World Applications', path: '/bigo?section=real-world-applications' },
   ],
diff --git a/src/components/playground/CodeEditor.tsx b/src/components/playground/CodeEditor.tsx
deleted file mode 100644
index ab61d21..0000000
--- a/src/components/playground/CodeEditor.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// src/components/playground/CodeEditor.tsx
-// Code editor component with syntax highlighting and language support
-
-import React, { useState } from 'react';
-import { Code, Copy, Check } from 'lucide-react';
-import type { CodeEditorProps, Language } from '../../types/playground';
-
-const CodeEditor: React.FC<CodeEditorProps> = ({
-  code,
-  language,
-  onChange,
-  onLanguageChange,
-  starterCode,
-  readOnly = false,
-  className = '',
-}) => {
-  const [copied, setCopied] = useState(false);
-
-  // Available languages
-  const languages: { value: Language; label: string }[] = [
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'typescript', label: 'TypeScript' },
-    { value: 'python', label: 'Python' },
-    { value: 'java', label: 'Java' },
-    { value: 'cpp', label: 'C++' },
-  ];
-
-  // Handle code copy
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy code:', err);
-    }
-  };
-
-  // Handle language change
-  const handleLanguageChange = (newLanguage: Language) => {
-    onLanguageChange(newLanguage);
-    // Load starter code for new language if available
-    if (starterCode?.[newLanguage]) {
-      onChange(starterCode[newLanguage]);
-    }
-  };
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {/* Editor Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <Code className="w-5 h-5 text-gray-600" />
-          <span className="font-medium text-gray-900">Code Editor</span>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          {/* Language Selector */}
-          <select
-            value={language}
-            onChange={(e) => handleLanguageChange(e.target.value as Language)}
-            className="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-          >
-            {languages.map((lang) => (
-              <option key={lang.value} value={lang.value}>
-                {lang.label}
-              </option>
-            ))}
-          </select>
-
-          {/* Copy Button */}
-          <button
-            onClick={handleCopy}
-            className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
-            title="Copy code"
-          >
-            {copied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
-          </button>
-        </div>
-      </div>
-
-      {/* Code Editor */}
-      <div className="relative">
-        <textarea
-          value={code}
-          onChange={(e) => onChange(e.target.value)}
-          readOnly={readOnly}
-          className={`w-full h-96 p-4 font-mono text-sm bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none ${
-            readOnly ? 'bg-gray-50 cursor-not-allowed' : ''
-          }`}
-          placeholder={readOnly ? 'No code available' : 'Write your solution here...'}
-          spellCheck={false}
-        />
-
-        {/* Line numbers (simplified) */}
-        <div className="absolute left-2 top-4 text-gray-400 font-mono text-sm select-none pointer-events-none">
-          {code.split('\n').map((_, index) => (
-            <div key={index} className="leading-5">
-              {index + 1}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Editor Info */}
-      <div className="flex items-center justify-between text-sm text-gray-600">
-        <div className="flex items-center space-x-4">
-          <span>Language: {languages.find((l) => l.value === language)?.label}</span>
-          <span>Lines: {code.split('\n').length}</span>
-          <span>Characters: {code.length}</span>
-        </div>
-
-        {readOnly && <span className="text-orange-600">Read-only mode</span>}
-      </div>
-    </div>
-  );
-};
-
-export default CodeEditor;
diff --git a/src/components/playground/ExecutionEngine.tsx b/src/components/playground/ExecutionEngine.tsx
deleted file mode 100644
index ea1072a..0000000
--- a/src/components/playground/ExecutionEngine.tsx
+++ /dev/null
@@ -1,682 +0,0 @@
-// src/components/playground/ExecutionEngine.tsx
-// Execution engine with step-by-step debugging capabilities
-
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Play, Pause, SkipForward, RotateCcw, Eye } from 'lucide-react';
-import { instrumentCode, type StackEvent } from '../../utils/instrument';
-import { memoryMonitor, performanceMonitor } from '../../utils/memoryMonitor';
-import type {
-  ExecutionEngineProps,
-  ExecutionResult,
-  InstrumentedOperation,
-  TestCase,
-  ComplexityClass,
-  DataStructureType,
-} from '../../types/playground';
-
-export interface DebugState {
-  isDebugging: boolean;
-  isPaused: boolean;
-  currentStep: number;
-  totalSteps: number;
-  currentOperation: InstrumentedOperation | null;
-  executionStack: InstrumentedOperation[];
-  dataStructureState: Record<string, unknown>;
-  variables: Record<string, unknown>;
-  callStack: string[];
-}
-
-export interface ExecutionEnginePropsExtended extends ExecutionEngineProps {
-  debugMode?: boolean;
-  onDebugStateChange?: (state: DebugState) => void;
-  onStep?: (operation: InstrumentedOperation, state: DebugState) => void;
-}
-
-const ExecutionEngine: React.FC<ExecutionEnginePropsExtended> = ({
-  code,
-  onResult,
-  onOperation,
-  debugMode = false,
-  onDebugStateChange,
-  onStep,
-  className = '',
-}) => {
-  const [debugState, setDebugState] = useState<DebugState>({
-    isDebugging: false,
-    isPaused: false,
-    currentStep: 0,
-    totalSteps: 0,
-    currentOperation: null,
-    executionStack: [],
-    dataStructureState: {},
-    variables: {},
-    callStack: [],
-  });
-
-  const [isExecuting, setIsExecuting] = useState(false);
-  const instrumentationRef = useRef<ReturnType<typeof instrumentCode> | null>(null);
-  const stackEventsRef = useRef<StackEvent[]>([]);
-  const memoryStatsRef = useRef<ReturnType<typeof memoryMonitor.getBrowserMemoryInfo>>(null);
-
-  // Helper function to get educational explanations for operations
-  const getOperationExplanation = useCallback((operation: InstrumentedOperation): string => {
-    const explanations: Record<string, string> = {
-      access: `Accessing element at index ${operation.indices?.[0] || 'unknown'}. This is an O(1) operation for arrays.`,
-      insert: `Inserting value ${operation.values?.[0] || 'unknown'} into the data structure. Time complexity depends on the structure.`,
-      delete: `Removing element from the data structure. This operation may require shifting elements in arrays.`,
-      search: `Searching for value ${operation.values?.[0] || 'unknown'}. Linear search is O(n), binary search is O(log n).`,
-      swap: `Swapping elements at indices ${operation.indices?.join(' and ') || 'unknown'}. Used in sorting algorithms.`,
-      compare: `Comparing values ${operation.values?.join(' and ') || 'unknown'}. Fundamental operation in sorting and searching.`,
-      traverse:
-        'Iterating through all elements in the data structure. Always O(n) time complexity.',
-    };
-
-    const dataStructureExplanations: Record<string, string> = {
-      Array:
-        'Contiguous memory block with O(1) access by index, but O(n) insertions/deletions in the middle.',
-      LinkedList:
-        'Nodes connected by pointers. O(1) insertions/deletions at ends, O(n) access by index.',
-      Stack: 'LIFO structure. Push/pop operations are O(1), access to middle elements is O(n).',
-      Queue:
-        'FIFO structure. Enqueue/dequeue operations are O(1), access to middle elements is O(n).',
-    };
-
-    const baseExplanation =
-      explanations[operation.type] || `Performing ${operation.type} operation.`;
-    const dataStructureInfo = dataStructureExplanations[operation.dataStructure] || '';
-
-    return `${baseExplanation} ${dataStructureInfo}`;
-  }, []);
-
-  const updateDebugState = useCallback(
-    (updates: Partial<DebugState>) => {
-      setDebugState((prev) => {
-        const newState = { ...prev, ...updates };
-        onDebugStateChange?.(newState);
-        return newState;
-      });
-    },
-    [onDebugStateChange]
-  );
-
-  // Mock execution with debugging support
-  const executeWithDebugging = useCallback(
-    async (testCase?: TestCase): Promise<ExecutionResult> => {
-      setIsExecuting(true);
-      updateDebugState({
-        isDebugging: true,
-        isPaused: debugMode,
-        currentStep: 0,
-        executionStack: [],
-        dataStructureState: {},
-        variables: {},
-        callStack: [],
-      });
-
-      try {
-        // Start monitoring
-        performanceMonitor.startMonitoring();
-
-        // Instrument the code for real execution tracking
-        const instrumentation = instrumentCode(code || '');
-        instrumentationRef.current = instrumentation;
-        stackEventsRef.current = [];
-
-        // Track operations during execution
-        const operations: InstrumentedOperation[] = [];
-        let step = 0;
-        const startTime = performance.now();
-
-        // Enhanced operation tracking with real instrumentation
-        const trackOperation = (type: string, details: Record<string, unknown>) => {
-          const operation: InstrumentedOperation = {
-            id: `${type}-${Date.now()}-${step}`,
-            type: type as
-              | 'access'
-              | 'insert'
-              | 'delete'
-              | 'search'
-              | 'swap'
-              | 'compare'
-              | 'traverse'
-              | 'function-call'
-              | 'function-return',
-            dataStructure: (details.dataStructure as DataStructureType) || 'Array',
-            indices: details.indices as number[] | undefined,
-            values: details.values as unknown[] | undefined,
-            timestamp: Date.now(),
-            lineNumber: (details.lineNumber as number) || 1,
-            functionName: (details.functionName as string) || 'main',
-            complexity: (details.complexity as {
-              time: ComplexityClass;
-              space: ComplexityClass;
-              explanation: string;
-            }) || {
-              time: 'O(1)',
-              space: 'O(1)',
-              explanation: `${type} operation`,
-            },
-          };
-
-          operations.push(operation);
-          onOperation(operation);
-
-          setDebugState((prev) => ({
-            ...prev,
-            currentStep: step + 1,
-            currentOperation: operation,
-            executionStack: [...prev.executionStack, operation],
-            dataStructureState: {
-              ...prev.dataStructureState,
-              [(operation.dataStructure as string).toLowerCase()]: details.state || {},
-            },
-            variables: {
-              ...prev.variables,
-              ...(details.variables as Record<string, unknown>),
-            },
-            callStack: [...prev.callStack, operation.functionName || 'main'],
-          }));
-
-          step++;
-        };
-
-        // Execute instrumented code with hooks
-        instrumentation.run({
-          __push: (label: string) => {
-            stackEventsRef.current.push({ type: 'push', label });
-            trackOperation('function-call', {
-              dataStructure: 'CallStack',
-              functionName: label,
-              complexity: { time: 'O(1)', space: 'O(1)', explanation: 'Function call' },
-            });
-          },
-          __pop: (label: string) => {
-            stackEventsRef.current.push({ type: 'pop', label });
-            trackOperation('function-return', {
-              dataStructure: 'CallStack',
-              functionName: label,
-              complexity: { time: 'O(1)', space: 'O(1)', explanation: 'Function return' },
-            });
-          },
-        });
-
-        // Enhanced mock operations for data structure visualization
-        const mockOperations: InstrumentedOperation[] = [
-          {
-            id: '1',
-            type: 'access',
-            dataStructure: 'Array',
-            indices: [0],
-            values: [5],
-            timestamp: Date.now(),
-            lineNumber: 1,
-            functionName: 'main',
-            complexity: {
-              time: 'O(1)',
-              space: 'O(1)',
-              explanation: 'Array access by index',
-            },
-          },
-          {
-            id: '2',
-            type: 'compare',
-            dataStructure: 'Array',
-            values: [5, 3],
-            timestamp: Date.now() + 100,
-            lineNumber: 2,
-            functionName: 'main',
-            complexity: {
-              time: 'O(1)',
-              space: 'O(1)',
-              explanation: 'Value comparison',
-            },
-          },
-          {
-            id: '3',
-            type: 'swap',
-            dataStructure: 'Array',
-            indices: [0, 1],
-            values: [3, 5],
-            timestamp: Date.now() + 200,
-            lineNumber: 3,
-            functionName: 'main',
-            complexity: {
-              time: 'O(1)',
-              space: 'O(1)',
-              explanation: 'Array element swap',
-            },
-          },
-        ];
-
-        // Add mock operations for demonstration
-        for (const operation of mockOperations) {
-          if (debugMode && debugState.isPaused) {
-            await new Promise((resolve) => {
-              const checkPaused = () => {
-                if (!debugState.isPaused) {
-                  resolve(void 0);
-                } else {
-                  setTimeout(checkPaused, 100);
-                }
-              };
-              checkPaused();
-            });
-          }
-
-          operations.push(operation);
-          onOperation(operation);
-
-          setDebugState((prev) => ({
-            ...prev,
-            currentStep: step + 1,
-            currentOperation: operation,
-            executionStack: [...prev.executionStack, operation],
-            dataStructureState: {
-              ...prev.dataStructureState,
-              array: operation.values,
-            },
-            variables: {
-              ...prev.variables,
-              i: step,
-              arr: operation.values,
-            },
-            callStack: ['main'],
-          }));
-
-          onStep?.(operation, debugState);
-          step++;
-
-          // Simulate execution time
-          await new Promise((resolve) => setTimeout(resolve, 300));
-        }
-
-        const endTime = performance.now();
-        const executionTime = endTime - startTime;
-
-        // Get memory stats
-        const memoryInfo = memoryMonitor.getBrowserMemoryInfo();
-        memoryStatsRef.current = memoryInfo;
-
-        const finalResult: ExecutionResult = {
-          success: true,
-          output: testCase ? 'Mock output for test case' : 'Code executed successfully',
-          executionTime,
-          memoryUsage: memoryInfo ? memoryInfo.usedJSHeapSize / 1024 / 1024 : 0, // Convert to MB
-          operations,
-        };
-
-        onResult(finalResult);
-        return finalResult;
-      } catch (error) {
-        const errorObj = {
-          type: 'runtime' as const,
-          message: error instanceof Error ? error.message : 'Unknown execution error',
-        };
-
-        const result: ExecutionResult = {
-          success: false,
-          output: '',
-          executionTime: 0,
-          memoryUsage: 0,
-          operations: [],
-          error: errorObj,
-        };
-
-        onResult(result);
-        return result;
-      } finally {
-        setIsExecuting(false);
-        updateDebugState({ isDebugging: false });
-
-        // Stop monitoring
-        performanceMonitor.stopMonitoring();
-        memoryMonitor.stopMonitoring();
-      }
-    },
-    [code, debugMode, onOperation, onResult, onStep, updateDebugState, debugState]
-  );
-
-  const stepForward = useCallback(() => {
-    if (debugState.isPaused && debugState.currentStep < debugState.totalSteps) {
-      updateDebugState({ isPaused: false });
-    }
-  }, [debugState.isPaused, debugState.currentStep, debugState.totalSteps, updateDebugState]);
-
-  const pauseExecution = useCallback(() => {
-    updateDebugState({ isPaused: true });
-  }, [updateDebugState]);
-
-  const resumeExecution = useCallback(() => {
-    updateDebugState({ isPaused: false });
-  }, [updateDebugState]);
-
-  const clearDebugSession = useCallback(() => {
-    try {
-      localStorage.removeItem('code-executives-debug-session');
-    } catch (error) {
-      console.warn('Failed to clear debug session:', error);
-    }
-  }, []);
-
-  // Session persistence for debugging states
-  const saveDebugSession = useCallback(
-    (state: DebugState) => {
-      try {
-        const sessionData = {
-          debugState: state,
-          code: code,
-          timestamp: Date.now(),
-        };
-        localStorage.setItem('code-executives-debug-session', JSON.stringify(sessionData));
-      } catch (error) {
-        console.warn('Failed to save debug session:', error);
-      }
-    },
-    [code]
-  );
-
-  const loadDebugSession = useCallback(() => {
-    try {
-      const saved = localStorage.getItem('code-executives-debug-session');
-      if (saved) {
-        const sessionData = JSON.parse(saved);
-        // Only restore if the code matches
-        if (sessionData.code === code) {
-          return sessionData.debugState as DebugState;
-        }
-      }
-    } catch (error) {
-      console.warn('Failed to load debug session:', error);
-    }
-    return null;
-  }, [code]);
-
-  const resetExecution = useCallback(() => {
-    updateDebugState({
-      isDebugging: false,
-      isPaused: false,
-      currentStep: 0,
-      currentOperation: null,
-      executionStack: [],
-      dataStructureState: {},
-      variables: {},
-      callStack: [],
-    });
-    clearDebugSession();
-  }, [updateDebugState, clearDebugSession]);
-
-  // Auto-save debug state changes
-  useEffect(() => {
-    if (debugState.isDebugging) {
-      saveDebugSession(debugState);
-    }
-  }, [debugState, saveDebugSession]);
-
-  // Load session on mount
-  useEffect(() => {
-    const savedState = loadDebugSession();
-    if (savedState) {
-      setDebugState(savedState);
-      onDebugStateChange?.(savedState);
-    }
-  }, [loadDebugSession, onDebugStateChange]);
-
-  if (!debugMode) {
-    return (
-      <div className={`p-4 bg-gray-50 rounded-lg ${className}`}>
-        <p className="text-gray-600">Execution Engine - Standard execution mode</p>
-        <button
-          onClick={() => executeWithDebugging()}
-          disabled={isExecuting}
-          className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400
-                   text-white rounded-lg transition-colors"
-        >
-          {isExecuting ? 'Executing...' : 'Execute Code'}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {/* Debug Controls */}
-      <div className="bg-white rounded-lg p-4 border border-gray-200">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center space-x-2">
-          <Eye className="w-5 h-5" />
-          <span>Debug Controls</span>
-        </h3>
-
-        <div className="flex items-center space-x-2 mb-4">
-          <button
-            onClick={stepForward}
-            disabled={
-              !debugState.isPaused || debugState.currentStep >= debugState.totalSteps || isExecuting
-            }
-            className="px-3 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400
-                     text-white text-sm rounded-lg transition-colors flex items-center space-x-1"
-          >
-            <SkipForward className="w-4 h-4" />
-            <span>Step</span>
-          </button>
-
-          <button
-            onClick={debugState.isPaused ? resumeExecution : pauseExecution}
-            disabled={!debugState.isDebugging || isExecuting}
-            className="px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400
-                     text-white text-sm rounded-lg transition-colors flex items-center space-x-1"
-          >
-            {debugState.isPaused ? (
-              <>
-                <Play className="w-4 h-4" />
-                <span>Resume</span>
-              </>
-            ) : (
-              <>
-                <Pause className="w-4 h-4" />
-                <span>Pause</span>
-              </>
-            )}
-          </button>
-
-          <button
-            onClick={resetExecution}
-            disabled={isExecuting}
-            className="px-3 py-2 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400
-                     text-white text-sm rounded-lg transition-colors flex items-center space-x-1"
-          >
-            <RotateCcw className="w-4 h-4" />
-            <span>Reset</span>
-          </button>
-        </div>
-
-        {/* Debug Status */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-          <div>
-            <span className="text-gray-600">Step:</span>
-            <span className="ml-2 font-medium text-gray-900">
-              {debugState.currentStep} / {debugState.totalSteps}
-            </span>
-          </div>
-          <div>
-            <span className="text-gray-600">Status:</span>
-            <span
-              className={`ml-2 font-medium ${
-                debugState.isDebugging
-                  ? debugState.isPaused
-                    ? 'text-yellow-600'
-                    : 'text-green-600'
-                  : 'text-gray-500'
-              }`}
-            >
-              {debugState.isDebugging ? (debugState.isPaused ? 'Paused' : 'Running') : 'Idle'}
-            </span>
-          </div>
-          <div>
-            <span className="text-gray-600">Call Stack:</span>
-            <span className="ml-2 font-medium text-gray-900">{debugState.callStack.length}</span>
-          </div>
-          <div>
-            <span className="text-gray-600">Variables:</span>
-            <span className="ml-2 font-medium text-gray-900">
-              {Object.keys(debugState.variables).length}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Current Operation */}
-      {debugState.currentOperation && (
-        <div className="bg-white rounded-lg p-4 border border-gray-200">
-          <h4 className="text-md font-semibold text-gray-900 mb-2 flex items-center space-x-2">
-            <span>Current Operation</span>
-            <div className="group relative">
-              <button className="text-gray-400 hover:text-gray-600">
-                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path
-                    fillRule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                    clipRule="evenodd"
-                  />
-                </svg>
-              </button>
-              <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
-                {getOperationExplanation(debugState.currentOperation)}
-              </div>
-            </div>
-          </h4>
-          <div className="space-y-2 text-sm">
-            <div>
-              <span className="text-gray-600">Type:</span>
-              <span className="ml-2 font-medium text-gray-900">
-                {debugState.currentOperation.type}
-              </span>
-            </div>
-            <div>
-              <span className="text-gray-600">Data Structure:</span>
-              <span className="ml-2 font-medium text-gray-900">
-                {debugState.currentOperation.dataStructure}
-              </span>
-            </div>
-            <div>
-              <span className="text-gray-600">Line:</span>
-              <span className="ml-2 font-medium text-gray-900">
-                {debugState.currentOperation.lineNumber}
-              </span>
-            </div>
-            <div>
-              <span className="text-gray-600">Function:</span>
-              <span className="ml-2 font-medium text-gray-900">
-                {debugState.currentOperation.functionName}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Variables and Data Structures */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {/* Variables */}
-        <div className="bg-white rounded-lg p-4 border border-gray-200">
-          <h4 className="text-md font-semibold text-gray-900 mb-2">Variables</h4>
-          <div className="space-y-1 text-sm max-h-40 overflow-y-auto">
-            {Object.entries(debugState.variables).length > 0 ? (
-              Object.entries(debugState.variables).map(([key, value]) => (
-                <div key={key} className="flex justify-between">
-                  <span className="text-blue-600 font-medium">{key}:</span>
-                  <span className="text-gray-900">{JSON.stringify(value)}</span>
-                </div>
-              ))
-            ) : (
-              <p className="text-gray-500 italic">No variables</p>
-            )}
-          </div>
-        </div>
-
-        {/* Data Structure State */}
-        <div className="bg-white rounded-lg p-4 border border-gray-200">
-          <h4 className="text-md font-semibold text-gray-900 mb-2">Data Structures</h4>
-          <div className="space-y-1 text-sm max-h-40 overflow-y-auto">
-            {Object.entries(debugState.dataStructureState).length > 0 ? (
-              Object.entries(debugState.dataStructureState).map(([key, value]) => (
-                <div key={key} className="flex justify-between">
-                  <span className="text-purple-600 font-medium">{key}:</span>
-                  <span className="text-gray-900">{JSON.stringify(value)}</span>
-                </div>
-              ))
-            ) : (
-              <p className="text-gray-500 italic">No data structures</p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Educational Explanations */}
-      <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200">
-        <h4 className="text-md font-semibold text-blue-900 mb-3 flex items-center space-x-2">
-          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <span>Debugging Guide</span>
-        </h4>
-        <div className="space-y-3 text-sm text-blue-800">
-          <div className="bg-white rounded p-3">
-            <h5 className="font-medium mb-1">What is Debugging?</h5>
-            <p>
-              Debugging is the process of finding and fixing errors in your code. Step-by-step
-              execution helps you understand exactly what your algorithm is doing at each moment.
-            </p>
-          </div>
-
-          <div className="bg-white rounded p-3">
-            <h5 className="font-medium mb-1">Key Concepts:</h5>
-            <ul className="space-y-1 ml-4">
-              <li>
-                <strong>Variables:</strong> Store data values that change during execution
-              </li>
-              <li>
-                <strong>Data Structures:</strong> Organized ways to store and access data
-              </li>
-              <li>
-                <strong>Call Stack:</strong> Tracks function calls and returns
-              </li>
-              <li>
-                <strong>Time Complexity:</strong> How execution time grows with input size
-              </li>
-            </ul>
-          </div>
-
-          <div className="bg-white rounded p-3">
-            <h5 className="font-medium mb-1">Common Operations:</h5>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              <div>
-                <strong className="text-green-600">Access:</strong> Reading a value (O(1) for
-                arrays)
-              </div>
-              <div>
-                <strong className="text-blue-600">Insert:</strong> Adding new elements
-              </div>
-              <div>
-                <strong className="text-red-600">Delete:</strong> Removing elements
-              </div>
-              <div>
-                <strong className="text-purple-600">Search:</strong> Finding specific values
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white rounded p-3">
-            <h5 className="font-medium mb-1">Pro Tips:</h5>
-            <ul className="space-y-1 ml-4">
-              <li>• Watch how data structures change with each operation</li>
-              <li>• Pay attention to loop variables and array indices</li>
-              <li>• Understand why certain operations are faster than others</li>
-              <li>• Use the visualization to see the algorithm in action</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ExecutionEngine;
diff --git a/src/components/playground/PerformanceAnalyzer.tsx b/src/components/playground/PerformanceAnalyzer.tsx
deleted file mode 100644
index d8634d9..0000000
--- a/src/components/playground/PerformanceAnalyzer.tsx
+++ /dev/null
@@ -1,478 +0,0 @@
-// src/components/playground/PerformanceAnalyzer.tsx
-// Component for analyzing and displaying performance metrics
-
-import React, { useState } from 'react';
-import {
-  BarChart3,
-  TrendingUp,
-  Clock,
-  Zap,
-  AlertTriangle,
-  CheckCircle,
-  Activity,
-} from 'lucide-react';
-import type { PerformanceAnalyzerProps, ComplexityClass } from '../../types/playground';
-
-const PerformanceAnalyzer: React.FC<PerformanceAnalyzerProps> = ({
-  operations,
-  testResults,
-  problem,
-  className = '',
-}) => {
-  const [selectedScenario, setSelectedScenario] = useState<'best' | 'average' | 'worst'>('average');
-  const [showTimeline, setShowTimeline] = useState(false);
-
-  // Calculate performance metrics
-  const totalExecutionTime = testResults.reduce((sum, result) => sum + result.executionTime, 0);
-  const averageExecutionTime = testResults.length > 0 ? totalExecutionTime / testResults.length : 0;
-  const maxExecutionTime = Math.max(...testResults.map((r) => r.executionTime), 0);
-  const minExecutionTime = Math.min(...testResults.map((r) => r.executionTime), 0);
-  const totalMemoryUsage = testResults.reduce((sum, result) => sum + result.memoryUsage, 0);
-  const averageMemoryUsage = testResults.length > 0 ? totalMemoryUsage / testResults.length : 0;
-
-  // Scenario analysis data
-  const scenarioData = {
-    best: {
-      time: minExecutionTime,
-      operations: Math.floor(operations.length * 0.3),
-      description: 'Optimal input arrangement',
-      color: 'green',
-    },
-    average: {
-      time: averageExecutionTime,
-      operations: operations.length,
-      description: 'Typical performance',
-      color: 'blue',
-    },
-    worst: {
-      time: maxExecutionTime,
-      operations: Math.floor(operations.length * 1.5),
-      description: 'Worst-case input arrangement',
-      color: 'red',
-    },
-  };
-
-  // Complexity analysis with detailed explanations
-  const getComplexityInfo = (complexity: ComplexityClass) => {
-    const info: Record<
-      ComplexityClass,
-      { color: string; description: string; examples: string; whenToUse: string; visual: string }
-    > = {
-      'O(1)': {
-        color: 'text-green-600 bg-green-100',
-        description: 'Constant time - Performance remains the same regardless of input size',
-        examples: 'Array access by index, Hash table lookup',
-        whenToUse: 'When you need guaranteed fast performance',
-        visual: 'Flat horizontal line - no growth with input size',
-      },
-      'O(1) amortized': {
-        color: 'text-emerald-600 bg-emerald-100',
-        description:
-          'Amortized constant time - Average O(1) over many operations, some may be O(n)',
-        examples: 'Dynamic arrays (ArrayList), Hash tables with resizing',
-        whenToUse: 'When occasional expensive operations are acceptable for average performance',
-        visual: 'Mostly flat with occasional spikes - average remains constant',
-      },
-      'O(log n)': {
-        color: 'text-blue-600 bg-blue-100',
-        description: 'Logarithmic time - Performance grows slowly as input size increases',
-        examples: 'Binary search, Balanced tree operations',
-        whenToUse: 'When dealing with sorted data or hierarchical structures',
-        visual: 'Shallow upward curve - halves the problem each step',
-      },
-      'O(n)': {
-        color: 'text-yellow-600 bg-yellow-100',
-        description: 'Linear time - Performance scales directly with input size',
-        examples: 'Linear search, Single loop traversals',
-        whenToUse: 'When you need to process every element once',
-        visual: 'Straight diagonal line - direct proportion to input size',
-      },
-      'O(n log n)': {
-        color: 'text-orange-600 bg-orange-100',
-        description: 'Linearithmic time - Good performance for most practical purposes',
-        examples: 'Quick sort, Merge sort, Heap sort',
-        whenToUse: 'When sorting or divide-and-conquer algorithms are needed',
-        visual: 'Moderate upward curve - acceptable for most applications',
-      },
-      'O(n²)': {
-        color: 'text-red-600 bg-red-100',
-        description: 'Quadratic time - Performance degrades quickly with larger inputs',
-        examples: 'Bubble sort, Nested loops, Simple matrix operations',
-        whenToUse: 'Only for small inputs or when simplicity is more important than performance',
-        visual: 'Steep upward curve - becomes unusable for large datasets',
-      },
-      'O(n³)': {
-        color: 'text-red-700 bg-red-200',
-        description: 'Cubic time - Very inefficient, avoid when possible',
-        examples: 'Triple nested loops, Some graph algorithms',
-        whenToUse: 'Rarely, only for very small inputs',
-        visual: 'Very steep curve - impractical for real-world use',
-      },
-      'O(2^n)': {
-        color: 'text-purple-600 bg-purple-100',
-        description: 'Exponential time - Grows extremely rapidly',
-        examples: 'Subset generation, Some recursive algorithms',
-        whenToUse: 'Only for very small inputs (n ≤ 20)',
-        visual: 'Explosive growth - becomes unusable very quickly',
-      },
-      'O(n!)': {
-        color: 'text-red-800 bg-red-200',
-        description: 'Factorial time - Extremely inefficient, worst possible complexity',
-        examples: 'Brute force permutations, Traveling salesman (naive)',
-        whenToUse: 'Never - find a better algorithm',
-        visual: 'Insanely steep curve - completely impractical',
-      },
-      'O(h)': {
-        color: 'text-indigo-600 bg-indigo-100',
-        description:
-          'Height of tree - Depends on tree balance, typically O(log n) for balanced trees',
-        examples: 'Tree traversal recursion stack, Binary tree height',
-        whenToUse: 'When analyzing tree algorithms and recursion depth',
-        visual: 'Depends on tree structure - O(log n) for balanced, O(n) for skewed',
-      },
-      'O(w)': {
-        color: 'text-cyan-600 bg-cyan-100',
-        description: 'Tree width - Maximum nodes at any level, varies by tree structure',
-        examples: 'Breadth-first search queue size, Level-order traversal',
-        whenToUse: 'When analyzing BFS algorithms and level-based operations',
-        visual: 'Varies by tree shape - can be O(1) to O(n) depending on structure',
-      },
-    };
-    return info[complexity] || info['O(n)'];
-  };
-
-  // Performance bottlenecks detection
-  const detectBottlenecks = () => {
-    const bottlenecks = [];
-
-    if (maxExecutionTime > 1000) {
-      bottlenecks.push('High execution time detected - consider optimizing the algorithm');
-    }
-
-    if (averageMemoryUsage > 100) {
-      bottlenecks.push('High memory usage - consider using more memory-efficient data structures');
-    }
-
-    if (operations.length > 1000) {
-      bottlenecks.push('High number of operations - algorithm may be inefficient');
-    }
-
-    return bottlenecks;
-  };
-
-  const bottlenecks = detectBottlenecks();
-
-  const timeComplexityInfo = getComplexityInfo(problem.solution.timeComplexity);
-  const spaceComplexityInfo = getComplexityInfo(problem.solution.spaceComplexity);
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          <BarChart3 className="w-5 h-5 text-gray-600" />
-          <span className="font-medium text-gray-900">Performance Analysis</span>
-        </div>
-        <button
-          onClick={() => setShowTimeline(!showTimeline)}
-          className="flex items-center space-x-2 px-3 py-1 text-sm bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
-        >
-          <Activity className="w-4 h-4" />
-          <span>{showTimeline ? 'Hide' : 'Show'} Timeline</span>
-        </button>
-      </div>
-
-      {/* Scenario Analysis */}
-      <div className="bg-white p-6 rounded-lg border border-gray-200">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Performance Scenarios</h3>
-
-        {/* Scenario Selector */}
-        <div className="flex space-x-2 mb-6">
-          {(['best', 'average', 'worst'] as const).map((scenario) => (
-            <button
-              key={scenario}
-              onClick={() => setSelectedScenario(scenario)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors capitalize ${
-                selectedScenario === scenario
-                  ? `bg-${scenarioData[scenario].color}-600 text-white`
-                  : `bg-gray-100 text-gray-700 hover:bg-gray-200`
-              }`}
-            >
-              {scenario} Case
-            </button>
-          ))}
-        </div>
-
-        {/* Scenario Details */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {(['best', 'average', 'worst'] as const).map((scenario) => {
-            const data = scenarioData[scenario];
-            const isSelected = selectedScenario === scenario;
-
-            return (
-              <div
-                key={scenario}
-                className={`p-4 rounded-lg border-2 transition-colors ${
-                  isSelected
-                    ? `border-${data.color}-500 bg-${data.color}-50`
-                    : 'border-gray-200 bg-gray-50'
-                }`}
-              >
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium text-gray-700 capitalize">
-                    {scenario} Case
-                  </span>
-                  {isSelected && (
-                    <div className={`w-2 h-2 bg-${data.color}-500 rounded-full`}></div>
-                  )}
-                </div>
-                <div className="space-y-1 text-sm">
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Time:</span>
-                    <span className="font-medium">{data.time.toFixed(2)}ms</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Operations:</span>
-                    <span className="font-medium">{data.operations}</span>
-                  </div>
-                  <div className="text-xs text-gray-500 mt-2">{data.description}</div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Complexity Analysis with Visualizations */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Time Complexity */}
-        <div className="bg-white p-6 rounded-lg border border-gray-200">
-          <div className="flex items-center space-x-2 mb-4">
-            <Clock className="w-5 h-5 text-blue-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Time Complexity</h3>
-          </div>
-
-          <div className="space-y-4">
-            {/* Complexity Badge */}
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-gray-600">Algorithm Complexity</span>
-              <span
-                className={`px-3 py-1 rounded-full text-sm font-medium ${timeComplexityInfo.color}`}
-              >
-                {problem.solution.timeComplexity}
-              </span>
-            </div>
-
-            {/* Description */}
-            <p className="text-sm text-gray-700 leading-relaxed">
-              {timeComplexityInfo.description}
-            </p>
-
-            {/* Examples */}
-            <div className="bg-gray-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-gray-600 mb-1">Examples:</div>
-              <div className="text-sm text-gray-700">{timeComplexityInfo.examples}</div>
-            </div>
-
-            {/* When to Use */}
-            <div className="bg-blue-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-blue-600 mb-1">When to Use:</div>
-              <div className="text-sm text-blue-700">{timeComplexityInfo.whenToUse}</div>
-            </div>
-
-            {/* Visual Representation */}
-            <div className="bg-gray-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-gray-600 mb-2">Visual Growth:</div>
-              <div className="text-sm text-gray-700">{timeComplexityInfo.visual}</div>
-            </div>
-          </div>
-        </div>
-
-        {/* Space Complexity */}
-        <div className="bg-white p-6 rounded-lg border border-gray-200">
-          <div className="flex items-center space-x-2 mb-4">
-            <Zap className="w-5 h-5 text-green-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Space Complexity</h3>
-          </div>
-
-          <div className="space-y-4">
-            {/* Complexity Badge */}
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-gray-600">Memory Usage</span>
-              <span
-                className={`px-3 py-1 rounded-full text-sm font-medium ${spaceComplexityInfo.color}`}
-              >
-                {problem.solution.spaceComplexity}
-              </span>
-            </div>
-
-            {/* Description */}
-            <p className="text-sm text-gray-700 leading-relaxed">
-              {spaceComplexityInfo.description}
-            </p>
-
-            {/* Examples */}
-            <div className="bg-gray-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-gray-600 mb-1">Examples:</div>
-              <div className="text-sm text-gray-700">{spaceComplexityInfo.examples}</div>
-            </div>
-
-            {/* When to Use */}
-            <div className="bg-green-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-green-600 mb-1">When to Use:</div>
-              <div className="text-sm text-green-700">{spaceComplexityInfo.whenToUse}</div>
-            </div>
-
-            {/* Visual Representation */}
-            <div className="bg-gray-50 p-3 rounded-md">
-              <div className="text-xs font-medium text-gray-600 mb-2">Visual Growth:</div>
-              <div className="text-sm text-gray-700">{spaceComplexityInfo.visual}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Execution Timeline */}
-      {showTimeline && (
-        <div className="bg-white p-6 rounded-lg border border-gray-200">
-          <div className="flex items-center space-x-2 mb-4">
-            <Activity className="w-5 h-5 text-purple-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Execution Timeline</h3>
-          </div>
-
-          <div className="space-y-4">
-            {/* Timeline visualization would go here */}
-            <div className="bg-gray-50 p-4 rounded-md">
-              <div className="text-sm text-gray-600 mb-2">
-                Operation Sequence (First 20 operations):
-              </div>
-              <div className="flex flex-wrap gap-1">
-                {operations.slice(0, 20).map((op, index) => (
-                  <div
-                    key={index}
-                    className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded"
-                    title={`${op.type} operation at indices: ${op.indices?.join(', ') || 'N/A'}`}
-                  >
-                    {op.type}
-                  </div>
-                ))}
-                {operations.length > 20 && (
-                  <div className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
-                    +{operations.length - 20} more
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Performance trend */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <div className="text-sm font-medium text-gray-700 mb-2">Execution Time Trend</div>
-                <div className="h-20 bg-gray-100 rounded flex items-end justify-around px-2">
-                  {testResults.slice(0, 8).map((result, index) => (
-                    <div
-                      key={index}
-                      className="bg-blue-500 rounded-t min-w-[8px]"
-                      style={{
-                        height: `${Math.max((result.executionTime / maxExecutionTime) * 100, 5)}%`,
-                        opacity: 0.7 + (index / testResults.length) * 0.3,
-                      }}
-                      title={`Test ${index + 1}: ${result.executionTime.toFixed(2)}ms`}
-                    ></div>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <div className="text-sm font-medium text-gray-700 mb-2">Memory Usage Trend</div>
-                <div className="h-20 bg-gray-100 rounded flex items-end justify-around px-2">
-                  {testResults.slice(0, 8).map((result, index) => (
-                    <div
-                      key={index}
-                      className="bg-green-500 rounded-t min-w-[8px]"
-                      style={{
-                        height: `${Math.max((result.memoryUsage / Math.max(...testResults.map((r) => r.memoryUsage))) * 100, 5)}%`,
-                        opacity: 0.7 + (index / testResults.length) * 0.3,
-                      }}
-                      title={`Test ${index + 1}: ${result.memoryUsage.toFixed(2)}MB`}
-                    ></div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Performance Metrics */}
-      <div className="bg-white p-6 rounded-lg border border-gray-200">
-        <div className="flex items-center space-x-2 mb-4">
-          <TrendingUp className="w-5 h-5 text-purple-600" />
-          <h3 className="text-lg font-semibold text-gray-900">Performance Metrics</h3>
-        </div>
-
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600">
-              {averageExecutionTime.toFixed(2)}
-            </div>
-            <div className="text-sm text-gray-600">Avg Time (ms)</div>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-green-600">{averageMemoryUsage.toFixed(2)}</div>
-            <div className="text-sm text-gray-600">Avg Memory (MB)</div>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-purple-600">{operations.length}</div>
-            <div className="text-sm text-gray-600">Operations</div>
-          </div>
-
-          <div className="text-center">
-            <div className="text-2xl font-bold text-orange-600">{testResults.length}</div>
-            <div className="text-sm text-gray-600">Test Cases</div>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottlenecks and Suggestions */}
-      <div className="space-y-4">
-        {/* Bottlenecks */}
-        {bottlenecks.length > 0 && (
-          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
-            <div className="flex items-start space-x-2">
-              <AlertTriangle className="w-5 h-5 text-yellow-600 mt-0.5" />
-              <div>
-                <h4 className="font-medium text-yellow-800 mb-2">Performance Bottlenecks</h4>
-                <ul className="space-y-1 text-sm text-yellow-700">
-                  {bottlenecks.map((bottleneck, index) => (
-                    <li key={index}>• {bottleneck}</li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Optimization Suggestions */}
-        <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
-          <div className="flex items-start space-x-2">
-            <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5" />
-            <div>
-              <h4 className="font-medium text-blue-800 mb-2">Optimization Suggestions</h4>
-              <ul className="space-y-1 text-sm text-blue-700">
-                <li>• Consider using more efficient data structures for better performance</li>
-                <li>• Optimize nested loops and reduce unnecessary operations</li>
-                <li>• Use appropriate algorithms based on input size and constraints</li>
-                <li>• Profile your code to identify specific performance bottlenecks</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PerformanceAnalyzer;
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
deleted file mode 100644
index 3c44b4e..0000000
--- a/src/components/playground/Playground.tsx
+++ /dev/null
@@ -1,837 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import type { PlaygroundSession, UserProgress } from '../../types/playground';
-import { Play, RotateCcw, Code, Eye, BarChart3, Trophy, Lightbulb } from 'lucide-react';
-import SectionLayout from '../shared/SectionLayout';
-import ThemeCard from '../shared/ThemeCard';
-import NavigationCard from '../shared/NavigationCard';
-import StatsGrid from '../shared/StatsGrid';
-import CTASection from '../shared/CTASection';
-import ProblemDisplay from './ProblemDisplay';
-import CodeEditor from './CodeEditor';
-import VisualizationSelector from './VisualizationSelector';
-import ExecutionEngine, { type DebugState } from './ExecutionEngine';
-import TestRunner from './TestRunner';
-import ScoringSystem from './ScoringSystem';
-import { ArrayVisualization } from '../../features/datastructures/components/visualizations/2d/linear/ArrayVisualization';
-import { LinkedListVisualization } from '../../features/datastructures/components/visualizations/2d/linear/LinkedListVisualization';
-import { QueueVisualization } from '../../features/datastructures/components/visualizations/2d/linear/QueueVisualization';
-import { StackVisualization } from '../../features/datastructures/components/visualizations/2d/linear/StackVisualization';
-import HashTableVisualization from '../../features/datastructures/components/visualizations/2d/hash/HashTableVisualization';
-import { getScoringSystem } from '../../utils/scoring';
-import type {
-  PlaygroundProblem,
-  Language,
-  DataStructureType,
-  SubmissionResult,
-  TestCaseResult,
-} from '../../types/playground';
-import type {
-  QueueElement,
-  StackElement,
-  DataStructureOperation,
-} from '../../types/datastructures';
-
-interface PlaygroundProps {
-  problemId?: string;
-  initialLanguage?: Language;
-  initialVisualization?: DataStructureType;
-  onProblemChange?: (problem: PlaygroundProblem) => void;
-  onSubmission?: (result: SubmissionResult) => void;
-}
-
-const Playground: React.FC<PlaygroundProps> = ({
-  problemId = 'two-sum',
-  initialLanguage = 'javascript',
-  initialVisualization = 'Array',
-  onProblemChange,
-  onSubmission,
-}) => {
-  // Mock playground state for now
-  const [currentProblem, setCurrentProblem] = useState<PlaygroundProblem | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [code, setCode] = useState(
-    '// Write your solution here\nfunction solution() {\n  // TODO: Implement\n}'
-  );
-  const [language, setLanguageState] = useState<Language>(initialLanguage);
-  const [isExecuting, setIsExecuting] = useState(false);
-  const [testResults, setTestResults] = useState<TestCaseResult[]>([]);
-  const [selectedVisualization, setSelectedVisualization] =
-    useState<DataStructureType>(initialVisualization);
-  const [session] = useState<PlaygroundSession | null>(null);
-  const [progress] = useState<UserProgress | null>(null);
-  const [error] = useState<string | null>(null);
-
-  // Mock functions
-  const runCode = useCallback(async () => {
-    setIsExecuting(true);
-    // Mock execution
-    setTimeout(() => setIsExecuting(false), 1000);
-  }, []);
-
-  const runTests = useCallback(async () => {
-    setIsExecuting(true);
-    // Mock test execution
-    setTimeout(() => {
-      setTestResults([]);
-      setIsExecuting(false);
-    }, 1000);
-  }, []);
-
-  const submitSolution = useCallback(async (): Promise<SubmissionResult> => {
-    // Mock submission
-    return {
-      problemId: problemId,
-      userId: 'mock-user',
-      language,
-      code,
-      overallResult: 'accepted',
-      testCaseResults: [],
-      totalTests: 1,
-      passedTests: 1,
-      executionTime: 10,
-      memoryUsage: 5,
-      submittedAt: new Date(),
-      hintsUsed: 0,
-      score: 100,
-    };
-  }, [problemId, language, code]);
-
-  const resetCode = useCallback(() => {
-    setCode('// Write your solution here\nfunction solution() {\n  // TODO: Implement\n}');
-  }, []);
-
-  const showHint = useCallback((hintId: string) => {
-    console.log('Showing hint:', hintId);
-  }, []);
-
-  // Load mock problem
-  useEffect(() => {
-    const mockProblem: PlaygroundProblem = {
-      id: problemId,
-      title: 'Two Sum',
-      difficulty: 'Easy',
-      category: 'Data Structures',
-      dataStructure: 'Array',
-      description:
-        'Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.',
-      examples: [],
-      constraints: ['2 <= nums.length <= 10^4', '-10^9 <= nums[i] <= 10^9'],
-      starterCode: {
-        javascript:
-          '// Write your solution here\nfunction twoSum(nums, target) {\n  // TODO: Implement\n}',
-      },
-      testCases: [],
-      hints: [],
-      solution: {
-        code: {
-          javascript:
-            'function twoSum(nums, target) {\n  const map = new Map();\n  for (let i = 0; i < nums.length; i++) {\n    const complement = target - nums[i];\n    if (map.has(complement)) {\n      return [map.get(complement), i];\n    }\n    map.set(nums[i], i);\n  }\n}',
-        },
-        explanation: 'Use a hash map to store numbers and their indices.',
-        timeComplexity: 'O(n)',
-        spaceComplexity: 'O(n)',
-        approaches: [],
-      },
-      visualizationOptions: ['Array', 'LinkedList', 'Stack', 'Queue'],
-      learningObjectives: ['Understand hash maps', 'Practice array iteration'],
-      tags: ['array', 'hash-table'],
-      estimatedSolveTime: 30,
-    };
-
-    setTimeout(() => {
-      setCurrentProblem(mockProblem);
-      setIsLoading(false);
-    }, 500);
-  }, [problemId]);
-
-  // UI state
-  const [activeTab, setActiveTab] = useState<
-    'problem' | 'editor' | 'visualization' | 'tests' | 'performance' | 'debug' | 'scoring'
-  >('problem');
-  const [showHints, setShowHints] = useState(false);
-  const [debugMode, setDebugMode] = useState(false);
-  const [debugState, setDebugState] = useState<DebugState | null>(null);
-
-  // Scoring system
-  const [scoringSystem] = useState(() => getScoringSystem());
-  const [currentScore, setCurrentScore] = useState(() => scoringSystem.getScore());
-  const [recentAchievements, setRecentAchievements] = useState(() =>
-    scoringSystem.getRecentAchievements()
-  );
-
-  // Handle problem changes
-  useEffect(() => {
-    if (currentProblem && onProblemChange) {
-      onProblemChange(currentProblem);
-    }
-  }, [currentProblem, onProblemChange]);
-
-  // Handle submission results
-  const handleSubmission = useCallback(async () => {
-    const result = await submitSolution();
-    if (result && onSubmission) {
-      onSubmission(result);
-
-      // Process scoring
-      const timeSpent = session ? (Date.now() - session.startTime.getTime()) / 1000 : 0; // in seconds
-      const hintsUsed = session?.hintsUsed?.length || 0;
-
-      if (currentProblem) {
-        const scoringResult = scoringSystem.processSubmission(
-          result,
-          currentProblem,
-          timeSpent,
-          hintsUsed
-        );
-
-        // Update local state
-        setCurrentScore(scoringSystem.getScore());
-        setRecentAchievements(scoringSystem.getRecentAchievements());
-
-        // Save to storage
-        scoringSystem.saveToStorage();
-
-        // Show achievement notifications
-        if (scoringResult.newAchievements.length > 0) {
-          scoringResult.newAchievements.forEach((achievement) => {
-            console.log(`🎉 Achievement Unlocked: ${achievement.name}`);
-          });
-        }
-
-        console.log(
-          `Points earned: ${scoringResult.pointsEarned}, Experience: ${scoringResult.experienceEarned}`
-        );
-        if (scoringResult.leveledUp) {
-          console.log(`🎊 Level Up! You are now level ${scoringResult.newLevel}`);
-        }
-      }
-    }
-  }, [submitSolution, onSubmission, session, currentProblem, scoringSystem]);
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading playground...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error || !currentProblem) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center max-w-md">
-          <div className="text-red-500 text-6xl mb-4">⚠️</div>
-          <h2 className="text-xl font-bold text-gray-900 mb-2">Error Loading Playground</h2>
-          <p className="text-gray-600 mb-4">
-            {error || 'Unable to load the playground. Please try again.'}
-          </p>
-          <button
-            onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            Reload Page
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Hero content
-  const heroContent = (
-    <div className="max-w-4xl mx-auto">
-      <div className="text-center mb-8">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">Visual Algorithm Playground</h1>
-        <p className="text-xl text-gray-700 leading-relaxed mb-6">
-          Solve coding problems with real-time visual feedback. See your algorithms execute on data
-          structures and understand complexity analysis through interactive visualizations.
-        </p>
-        <div className="flex justify-center items-center space-x-6 mb-8">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600">
-              {progress?.statistics.totalSolved || 0}
-            </div>
-            <div className="text-sm text-gray-600">Problems Solved</div>
-          </div>
-          <div className="text-center">
-            <div className="text-2xl font-bold text-green-600">
-              {progress?.statistics.currentStreak || 0}
-            </div>
-            <div className="text-sm text-gray-600">Current Streak</div>
-          </div>
-          <div className="text-center">
-            <div className="text-2xl font-bold text-purple-600">
-              {Math.round(progress?.statistics.averageScore || 0)}%
-            </div>
-            <div className="text-sm text-gray-600">Average Score</div>
-          </div>
-        </div>
-      </div>
-
-      <StatsGrid
-        stats={[
-          {
-            label: 'Easy Problems',
-            value: (progress?.statistics.easySolved || 0).toString(),
-            icon: '🟢',
-          },
-          {
-            label: 'Medium Problems',
-            value: (progress?.statistics.mediumSolved || 0).toString(),
-            icon: '🟡',
-          },
-          {
-            label: 'Hard Problems',
-            value: (progress?.statistics.hardSolved || 0).toString(),
-            icon: '🔴',
-          },
-          {
-            label: 'Time Spent',
-            value: `${Math.round((progress?.statistics.totalTimeSpent || 0) / 60)}h`,
-            icon: '⏱️',
-          },
-        ]}
-        colorScheme="blue"
-      />
-    </div>
-  );
-
-  // Main content
-  const mainContent = (
-    <div className="space-y-6">
-      {/* Problem Header */}
-      <ThemeCard className="p-6">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center space-x-4">
-            <h2 className="text-2xl font-bold text-gray-900">{currentProblem.title}</h2>
-            <span
-              className={`px-3 py-1 rounded-full text-sm font-medium ${
-                currentProblem.difficulty === 'Easy'
-                  ? 'bg-green-100 text-green-800'
-                  : currentProblem.difficulty === 'Medium'
-                    ? 'bg-yellow-100 text-yellow-800'
-                    : 'bg-red-100 text-red-800'
-              }`}
-            >
-              {currentProblem.difficulty}
-            </span>
-          </div>
-
-          <div className="flex items-center space-x-4 text-sm text-gray-600">
-            <div className="flex items-center space-x-1">
-              <BarChart3 className="w-4 h-4" />
-              <span>{currentProblem.solution.timeComplexity}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Code className="w-4 h-4" />
-              <span>{language}</span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <Eye className="w-4 h-4" />
-              <span>{selectedVisualization}</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-2 text-sm text-gray-600">
-          <Trophy className="w-4 h-4" />
-          <span>Category: {currentProblem.category}</span>
-          {currentProblem.dataStructure && (
-            <>
-              <span>•</span>
-              <span>Data Structure: {currentProblem.dataStructure}</span>
-            </>
-          )}
-        </div>
-      </ThemeCard>
-
-      {/* Tab Navigation */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-200">
-        <div className="flex border-b border-gray-200 overflow-x-auto">
-          {[
-            { id: 'problem' as const, label: 'Problem', icon: '📋' },
-            { id: 'editor' as const, label: 'Code Editor', icon: '💻' },
-            { id: 'visualization' as const, label: 'Visualization', icon: '👁️' },
-            { id: 'tests' as const, label: 'Test Results', icon: '🧪' },
-            { id: 'performance' as const, label: 'Analysis', icon: '📊' },
-            { id: 'scoring' as const, label: 'Progress', icon: '🏆' },
-            ...(debugMode ? [{ id: 'debug' as const, label: 'Debug', icon: '🐛' }] : []),
-          ].map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`flex items-center space-x-2 px-4 py-3 font-medium text-sm transition-colors whitespace-nowrap ${
-                activeTab === tab.id
-                  ? 'border-b-2 border-blue-500 text-blue-600'
-                  : 'text-gray-600 hover:text-gray-900'
-              }`}
-            >
-              <span>{tab.icon}</span>
-              <span>{tab.label}</span>
-            </button>
-          ))}
-        </div>
-
-        <div className="p-6">
-          {/* Problem Tab */}
-          {activeTab === 'problem' && (
-            <ProblemDisplay
-              problem={currentProblem}
-              showHints={showHints}
-              hintsUsed={session?.hintsUsed || []}
-              onHintClick={(hintId: string) => {
-                showHint(hintId);
-                setShowHints(true);
-              }}
-            />
-          )}
-
-          {/* Editor Tab */}
-          {activeTab === 'editor' && (
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900">Code Editor</h3>
-                <div className="flex items-center space-x-2">
-                  {/* Debug Mode Toggle */}
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm text-gray-600">Debug</span>
-                    <button
-                      onClick={() => setDebugMode(!debugMode)}
-                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                        debugMode ? 'bg-blue-600' : 'bg-gray-200'
-                      }`}
-                    >
-                      <span
-                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                          debugMode ? 'translate-x-6' : 'translate-x-1'
-                        }`}
-                      />
-                    </button>
-                  </div>
-
-                  <button
-                    onClick={resetCode}
-                    className="px-3 py-2 text-sm font-medium text-gray-600
-                             hover:text-gray-900 transition-colors
-                             flex items-center space-x-1"
-                  >
-                    <RotateCcw className="w-4 h-4" />
-                    <span>Reset</span>
-                  </button>
-                  <button
-                    onClick={runCode}
-                    disabled={isExecuting}
-                    className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400
-                             text-white text-sm font-medium rounded-lg transition-colors
-                             flex items-center space-x-2"
-                  >
-                    {isExecuting ? (
-                      <>
-                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                        <span>Running...</span>
-                      </>
-                    ) : (
-                      <>
-                        <Play className="w-4 h-4" />
-                        <span>Run Code</span>
-                      </>
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <CodeEditor
-                code={code}
-                language={language}
-                onChange={setCode}
-                onLanguageChange={setLanguageState}
-                starterCode={currentProblem.starterCode}
-              />
-            </div>
-          )}
-
-          {/* Visualization Tab */}
-          {activeTab === 'visualization' && (
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900">Live Visualization</h3>
-                <VisualizationSelector
-                  options={currentProblem.visualizationOptions}
-                  selected={selectedVisualization}
-                  onSelect={setSelectedVisualization}
-                />
-              </div>
-
-              {selectedVisualization === 'Array' ? (
-                <ArrayVisualization
-                  debugState={
-                    debugState
-                      ? {
-                          isDebugging: debugState.isDebugging,
-                          dataStructureState: debugState.dataStructureState,
-                          currentOperation: debugState.currentOperation
-                            ? {
-                                type: debugState.currentOperation.type,
-                                indices: debugState.currentOperation.indices,
-                                values: debugState.currentOperation.values,
-                              }
-                            : undefined,
-                        }
-                      : undefined
-                  }
-                />
-              ) : selectedVisualization === 'LinkedList' ? (
-                <LinkedListVisualization
-                  debugState={
-                    debugState
-                      ? {
-                          isDebugging: debugState.isDebugging,
-                          dataStructureState: debugState.dataStructureState,
-                          currentOperation: debugState.currentOperation
-                            ? {
-                                type: debugState.currentOperation.type,
-                                indices: debugState.currentOperation.indices,
-                                values: debugState.currentOperation.values,
-                              }
-                            : undefined,
-                        }
-                      : undefined
-                  }
-                />
-              ) : selectedVisualization === 'Queue' ? (
-                <QueueVisualization
-                  debugState={
-                    debugState
-                      ? {
-                          isDebugging: debugState.isDebugging,
-                          dataStructureState: {
-                            currentElements: ((
-                              debugState.dataStructureState.queue as unknown as {
-                                elements?: unknown[];
-                              }
-                            )?.elements || []) as QueueElement[],
-                            front:
-                              (debugState.dataStructureState.queue as unknown as { front?: number })
-                                ?.front || 0,
-                            rear:
-                              (debugState.dataStructureState.queue as unknown as { rear?: number })
-                                ?.rear || -1,
-                            size:
-                              (debugState.dataStructureState.queue as unknown as { size?: number })
-                                ?.size || 0,
-                          },
-                          currentOperation: debugState.currentOperation?.type || '',
-                        }
-                      : undefined
-                  }
-                />
-              ) : selectedVisualization === 'Stack' ? (
-                <StackVisualization
-                  debugState={
-                    debugState
-                      ? {
-                          isDebugging: debugState.isDebugging,
-                          dataStructureState: {
-                            currentElements: ((
-                              debugState.dataStructureState.stack as unknown as {
-                                elements?: unknown[];
-                              }
-                            )?.elements || []) as StackElement[],
-                            top:
-                              (debugState.dataStructureState.stack as unknown as { top?: number })
-                                ?.top || -1,
-                            size:
-                              (debugState.dataStructureState.stack as unknown as { size?: number })
-                                ?.size || 0,
-                          },
-                          currentOperation: debugState.currentOperation?.type || '',
-                        }
-                      : undefined
-                  }
-                />
-              ) : selectedVisualization === 'HashTable' ? (
-                <HashTableVisualization
-                  tableSize={7}
-                  hashFunction="simple"
-                  collisionStrategy="chaining"
-                  showHashCalculation={true}
-                  onOperationComplete={(operation: DataStructureOperation) =>
-                    console.log('HashTable operation:', operation)
-                  }
-                />
-              ) : (
-                <div className="bg-gray-50 rounded-lg p-4 min-h-96 flex items-center justify-center">
-                  <div className="text-center text-gray-500">
-                    <Eye className="w-12 h-12 mx-auto mb-4 opacity-50" />
-                    <p className="text-lg font-medium mb-2">Visualization Coming Soon</p>
-                    <p className="text-sm">
-                      Run your code to see {selectedVisualization} operations visualized in
-                      real-time
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Tests Tab */}
-          {activeTab === 'tests' && (
-            <TestRunner
-              testCases={currentProblem.testCases}
-              results={testResults}
-              isRunning={isExecuting}
-              onRun={runTests}
-              onResult={() => {}} // Results are handled by the hook
-            />
-          )}
-
-          {/* Scoring Tab */}
-          {activeTab === 'scoring' && (
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold text-gray-900">Your Progress & Achievements</h3>
-              <p className="text-sm text-gray-600">
-                Track your learning progress, earn achievements, and see your algorithm mastery
-                grow.
-              </p>
-
-              <ScoringSystem
-                score={currentScore}
-                recentAchievements={recentAchievements}
-                onAchievementClick={(achievement) =>
-                  console.log('Achievement clicked:', achievement)
-                }
-              />
-            </div>
-          )}
-
-          {/* Debug Tab */}
-          {activeTab === 'debug' && debugMode && (
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold text-gray-900">Step-by-Step Debugging</h3>
-              <p className="text-sm text-gray-600">
-                Debug your algorithm execution step by step. See how data structures change with
-                each operation.
-              </p>
-
-              <ExecutionEngine
-                code={code}
-                language={language}
-                testCases={currentProblem.testCases}
-                debugMode={true}
-                onResult={(result: unknown) => console.log('Debug result:', result)}
-                onOperation={(operation: unknown) => console.log('Debug operation:', operation)}
-                onDebugStateChange={setDebugState}
-                onStep={(operation: unknown, state: unknown) =>
-                  console.log('Debug step:', operation, state)
-                }
-              />
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Quick Actions */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <button
-          onClick={() => setActiveTab('editor')}
-          className="p-4 bg-blue-50 rounded-lg border border-blue-200 hover:bg-blue-100 transition-colors text-left"
-        >
-          <div className="flex items-center space-x-3">
-            <Code className="w-6 h-6 text-blue-600" />
-            <div>
-              <h4 className="font-medium text-blue-900">Write Code</h4>
-              <p className="text-sm text-blue-700">Start coding your solution</p>
-            </div>
-          </div>
-        </button>
-
-        <button
-          onClick={runTests}
-          disabled={isExecuting}
-          className="p-4 bg-green-50 rounded-lg border border-green-200 hover:bg-green-100 transition-colors text-left disabled:opacity-50"
-        >
-          <div className="flex items-center space-x-3">
-            <Play className="w-6 h-6 text-green-600" />
-            <div>
-              <h4 className="font-medium text-green-900">Run Tests</h4>
-              <p className="text-sm text-green-700">Test your solution</p>
-            </div>
-          </div>
-        </button>
-
-        <button
-          onClick={handleSubmission}
-          className="p-4 bg-purple-50 rounded-lg border border-purple-200 hover:bg-purple-100 transition-colors text-left"
-        >
-          <div className="flex items-center space-x-3">
-            <Trophy className="w-6 h-6 text-purple-600" />
-            <div>
-              <h4 className="font-medium text-purple-900">Submit Solution</h4>
-              <p className="text-sm text-purple-700">Submit for grading</p>
-            </div>
-          </div>
-        </button>
-      </div>
-
-      {/* Session Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <ThemeCard>
-          <div className="p-4 text-center">
-            <div className="text-2xl font-bold text-blue-600">
-              {session?.submissions.length || 0}
-            </div>
-            <div className="text-sm text-gray-600">Attempts</div>
-          </div>
-        </ThemeCard>
-
-        <ThemeCard>
-          <div className="p-4 text-center">
-            <div className="text-2xl font-bold text-green-600">
-              {session?.hintsUsed?.length || 0}
-            </div>
-            <div className="text-sm text-gray-600">Hints Used</div>
-          </div>
-        </ThemeCard>
-
-        <ThemeCard>
-          <div className="p-4 text-center">
-            <div className="text-2xl font-bold text-purple-600">
-              {session ? Math.floor((Date.now() - session.startTime.getTime()) / 60000) : 0}
-            </div>
-            <div className="text-sm text-gray-600">Minutes Spent</div>
-          </div>
-        </ThemeCard>
-
-        <ThemeCard>
-          <div className="p-4 text-center">
-            <div className="text-2xl font-bold text-orange-600">{session?.score || 0}</div>
-            <div className="text-sm text-gray-600">Current Score</div>
-          </div>
-        </ThemeCard>
-      </div>
-    </div>
-  );
-
-  // Sidebar content
-  const sidebarContent = (
-    <div className="space-y-6">
-      {/* Quick Stats */}
-      <ThemeCard className="p-4">
-        <h3 className="text-lg font-bold text-gray-900 mb-3">Your Progress</h3>
-        <div className="space-y-3">
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-gray-600">Easy</span>
-            <span className="text-sm font-medium text-green-600">
-              {progress?.statistics.easySolved || 0}
-            </span>
-          </div>
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-gray-600">Medium</span>
-            <span className="text-sm font-medium text-yellow-600">
-              {progress?.statistics.mediumSolved || 0}
-            </span>
-          </div>
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-gray-600">Hard</span>
-            <span className="text-sm font-medium text-red-600">
-              {progress?.statistics.hardSolved || 0}
-            </span>
-          </div>
-        </div>
-      </ThemeCard>
-
-      {/* Learning Objectives */}
-      <ThemeCard className="p-4">
-        <h3 className="text-lg font-bold text-gray-900 mb-3">Learning Objectives</h3>
-        <ul className="space-y-2 text-sm text-gray-700">
-          {currentProblem.learningObjectives.map((objective: string, index: number) => (
-            <li key={index} className="flex items-start space-x-2">
-              <span className="text-blue-500 mt-1">•</span>
-              <span>{objective}</span>
-            </li>
-          ))}
-        </ul>
-      </ThemeCard>
-
-      {/* Hints Toggle */}
-      <ThemeCard className="p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <Lightbulb className="w-5 h-5 text-yellow-500" />
-            <span className="font-medium text-gray-900">Hints</span>
-          </div>
-          <button
-            onClick={() => setShowHints(!showHints)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              showHints ? 'bg-yellow-500' : 'bg-gray-200'
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                showHints ? 'translate-x-6' : 'translate-x-1'
-              }`}
-            />
-          </button>
-        </div>
-        <p className="text-xs text-gray-600 mt-2">
-          {showHints ? 'Hints are visible' : 'Click to show hints'}
-        </p>
-      </ThemeCard>
-
-      {/* Navigation */}
-      <div className="space-y-3">
-        <NavigationCard
-          title="Problem List"
-          description="Browse all available problems"
-          colorScheme="blue"
-          onClick={() => console.log('Navigate to problem list')}
-        />
-
-        <NavigationCard
-          title="Big-O Tutorial"
-          description="Review complexity analysis concepts"
-          colorScheme="green"
-          onClick={() => (window.location.href = '/bigo')}
-        />
-
-        <NavigationCard
-          title="Data Structures"
-          description="Learn about different data structures"
-          colorScheme="purple"
-          onClick={() => (window.location.href = '/datastructures')}
-        />
-
-        <NavigationCard
-          title="Achievements"
-          description="View your progress and unlock achievements"
-          colorScheme="orange"
-          onClick={() => console.log('Navigate to achievements')}
-        />
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      <SectionLayout
-        section="playground"
-        hero={heroContent}
-        mainContent={mainContent}
-        sidebar={sidebarContent}
-      />
-      <CTASection
-        title="Ready for More Challenges?"
-        description="Continue your journey through algorithms and data structures with interactive visualizations."
-        buttonText="Explore More Problems"
-        onButtonClick={() => console.log('Navigate to problem selection')}
-        colorScheme="blue"
-      />
-    </>
-  );
-};
-
-export default Playground;
diff --git a/src/components/playground/ProblemDisplay.tsx b/src/components/playground/ProblemDisplay.tsx
deleted file mode 100644
index 8db6f9f..0000000
--- a/src/components/playground/ProblemDisplay.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-// src/components/playground/ProblemDisplay.tsx
-// Component for displaying problem description, examples, and hints
-
-import React from 'react';
-import { Lightbulb, Eye, EyeOff } from 'lucide-react';
-import type { ProblemDisplayProps } from '../../types/playground';
-
-const ProblemDisplay: React.FC<ProblemDisplayProps> = ({
-  problem,
-  showHints = false,
-  hintsUsed = [],
-  onHintClick,
-  className = '',
-}) => {
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Problem Description */}
-      <div className="prose max-w-none">
-        <p className="text-gray-700 leading-relaxed">{problem.description}</p>
-      </div>
-
-      {/* Examples */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-gray-900">Examples</h3>
-        {problem.examples.map((example, index) => (
-          <div key={example.id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-            <div className="flex items-center space-x-2 mb-2">
-              <span className="text-sm font-medium text-gray-600">Example {index + 1}:</span>
-            </div>
-            <div className="space-y-2 text-sm">
-              <div>
-                <span className="font-medium text-gray-700">Input:</span>
-                <code className="ml-2 px-2 py-1 bg-gray-200 rounded text-gray-800">
-                  {Array.isArray(example.input) ? JSON.stringify(example.input) : example.input}
-                </code>
-              </div>
-              <div>
-                <span className="font-medium text-gray-700">Output:</span>
-                <code className="ml-2 px-2 py-1 bg-gray-200 rounded text-gray-800">
-                  {JSON.stringify(example.expectedOutput)}
-                </code>
-              </div>
-              {example.explanation && (
-                <div>
-                  <span className="font-medium text-gray-700">Explanation:</span>
-                  <span className="ml-2 text-gray-600">{example.explanation}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Constraints */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold text-gray-900">Constraints</h3>
-        <ul className="list-disc list-inside space-y-1 text-gray-700">
-          {problem.constraints.map((constraint, index) => (
-            <li key={index}>{constraint}</li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Hints */}
-      {showHints && problem.hints.length > 0 && (
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900 flex items-center space-x-2">
-            <Lightbulb className="w-5 h-5 text-yellow-500" />
-            <span>Hints</span>
-          </h3>
-          <div className="space-y-3">
-            {problem.hints.map((hint) => {
-              const isUsed = hintsUsed.includes(hint.order);
-              return (
-                <div
-                  key={hint.id}
-                  className={`p-4 rounded-lg border transition-colors ${
-                    isUsed ? 'bg-yellow-50 border-yellow-200' : 'bg-gray-50 border-gray-200'
-                  }`}
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <div className="flex items-center space-x-2 mb-2">
-                        <span className="text-sm font-medium text-gray-600">Hint {hint.order}</span>
-                        {hint.penalty && (
-                          <span className="text-xs text-red-600">-{hint.penalty} points</span>
-                        )}
-                      </div>
-                      <p className="text-gray-700">{hint.content}</p>
-                    </div>
-                    {!isUsed && onHintClick && (
-                      <button
-                        onClick={() => onHintClick(hint.id)}
-                        className="ml-4 px-3 py-1 text-sm bg-yellow-500 hover:bg-yellow-600 text-white rounded transition-colors flex items-center space-x-1"
-                      >
-                        <Eye className="w-4 h-4" />
-                        <span>Show</span>
-                      </button>
-                    )}
-                    {isUsed && (
-                      <div className="ml-4 flex items-center space-x-1 text-yellow-600">
-                        <EyeOff className="w-4 h-4" />
-                        <span className="text-sm">Used</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Learning Objectives */}
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold text-gray-900">Learning Objectives</h3>
-        <ul className="list-disc list-inside space-y-1 text-gray-700">
-          {problem.learningObjectives.map((objective, index) => (
-            <li key={index}>{objective}</li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Tags */}
-      <div className="flex flex-wrap gap-2">
-        {problem.tags.map((tag) => (
-          <span key={tag} className="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">
-            {tag}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ProblemDisplay;
diff --git a/src/components/playground/ScoringSystem.tsx b/src/components/playground/ScoringSystem.tsx
deleted file mode 100644
index f91e3da..0000000
--- a/src/components/playground/ScoringSystem.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import { Trophy, Star, Target, TrendingUp, Award, Zap } from 'lucide-react';
-import type { Achievement, Score } from '../../types/playground';
-
-interface ScoringSystemProps {
-  score: Score;
-  recentAchievements: Achievement[];
-  onAchievementClick?: (achievement: Achievement) => void;
-  className?: string;
-}
-
-const ScoringSystem: React.FC<ScoringSystemProps> = ({
-  score,
-  recentAchievements,
-  onAchievementClick,
-  className = '',
-}) => {
-  const [showAchievementModal, setShowAchievementModal] = useState(false);
-  const [selectedAchievement, setSelectedAchievement] = useState<Achievement | null>(null);
-
-  // Calculate progress to next level
-  const levelProgress = (score.experiencePoints / score.experienceToNextLevel) * 100;
-
-  const handleAchievementClick = (achievement: Achievement) => {
-    setSelectedAchievement(achievement);
-    setShowAchievementModal(true);
-    onAchievementClick?.(achievement);
-  };
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {/* Level and XP Display */}
-      <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4 text-white">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center space-x-2">
-            <Trophy className="w-5 h-5" />
-            <span className="font-semibold">Level {score.level}</span>
-          </div>
-          <div className="text-right">
-            <div className="text-sm opacity-90">
-              XP: {score.experiencePoints}/{score.experienceToNextLevel}
-            </div>
-          </div>
-        </div>
-        <div className="w-full bg-white/20 rounded-full h-2">
-          <div
-            className="bg-white rounded-full h-2 transition-all duration-500"
-            style={{ width: `${levelProgress}%` }}
-          />
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-lg p-3 border border-gray-200">
-          <div className="flex items-center space-x-2 mb-1">
-            <Target className="w-4 h-4 text-blue-500" />
-            <span className="text-sm font-medium text-gray-900">Problems</span>
-          </div>
-          <div className="text-2xl font-bold text-blue-600">{score.stats.problemsSolved}</div>
-        </div>
-
-        <div className="bg-white rounded-lg p-3 border border-gray-200">
-          <div className="flex items-center space-x-2 mb-1">
-            <Zap className="w-4 h-4 text-yellow-500" />
-            <span className="text-sm font-medium text-gray-900">Debug Sessions</span>
-          </div>
-          <div className="text-2xl font-bold text-yellow-600">{score.stats.debugSessions}</div>
-        </div>
-
-        <div className="bg-white rounded-lg p-3 border border-gray-200">
-          <div className="flex items-center space-x-2 mb-1">
-            <TrendingUp className="w-4 h-4 text-green-500" />
-            <span className="text-sm font-medium text-gray-900">Best Score</span>
-          </div>
-          <div className="text-2xl font-bold text-green-600">
-            {score.stats.bestPerformanceScore}
-          </div>
-        </div>
-
-        <div className="bg-white rounded-lg p-3 border border-gray-200">
-          <div className="flex items-center space-x-2 mb-1">
-            <Star className="w-4 h-4 text-purple-500" />
-            <span className="text-sm font-medium text-gray-900">Total Points</span>
-          </div>
-          <div className="text-2xl font-bold text-purple-600">
-            {score.totalPoints.toLocaleString()}
-          </div>
-        </div>
-      </div>
-
-      {/* Recent Achievements */}
-      {recentAchievements.length > 0 && (
-        <div className="bg-white rounded-lg p-4 border border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center space-x-2">
-            <Award className="w-5 h-5" />
-            <span>Recent Achievements</span>
-          </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            {recentAchievements.slice(0, 4).map((achievement) => (
-              <button
-                key={achievement.id}
-                onClick={() => handleAchievementClick(achievement)}
-                className="flex items-center space-x-3 p-3 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-200 hover:shadow-md transition-shadow"
-              >
-                <div className="text-2xl">{achievement.icon}</div>
-                <div className="text-left">
-                  <div className="font-medium text-gray-900 text-sm">{achievement.name}</div>
-                  <div className="text-xs text-gray-600">{achievement.description}</div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Achievement Modal */}
-      {showAchievementModal && selectedAchievement && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
-            <div className="text-center mb-4">
-              <div className="text-6xl mb-2">{selectedAchievement.icon}</div>
-              <h3 className="text-xl font-bold text-gray-900">{selectedAchievement.name}</h3>
-              <p className="text-gray-600 mt-2">{selectedAchievement.description}</p>
-            </div>
-            <div className="flex justify-center">
-              <button
-                onClick={() => setShowAchievementModal(false)}
-                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-              >
-                Awesome!
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ScoringSystem;
diff --git a/src/components/playground/TestRunner.tsx b/src/components/playground/TestRunner.tsx
deleted file mode 100644
index 47c4aae..0000000
--- a/src/components/playground/TestRunner.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-// src/components/playground/TestRunner.tsx
-// Component for running and displaying test case results
-
-import React, { useState } from 'react';
-import {
-  Play,
-  CheckCircle,
-  XCircle,
-  Clock,
-  AlertTriangle,
-  TrendingUp,
-  Target,
-  Lightbulb,
-  BarChart3,
-} from 'lucide-react';
-import type { TestRunnerProps, TestCaseResult, TestCase } from '../../types/playground';
-
-const TestRunner: React.FC<TestRunnerProps> = ({
-  testCases,
-  results,
-  isRunning,
-  onRun,
-  className = '',
-}) => {
-  const [selectedTestCase, setSelectedTestCase] = useState<string | null>(null);
-  const [showDetails, setShowDetails] = useState(false);
-
-  // Handle test execution
-  const handleRunTests = async () => {
-    onRun();
-    // The actual test execution is handled by the parent component
-    // This component just displays the results
-  };
-
-  // Get status icon and color for a test result
-  const getTestStatus = (result?: TestCaseResult) => {
-    if (!result) {
-      return {
-        icon: <Clock className="w-4 h-4" />,
-        color: 'text-gray-400',
-        bgColor: 'bg-gray-100',
-        borderColor: 'border-gray-200',
-        status: 'Not run',
-      };
-    }
-
-    if (result.passed) {
-      return {
-        icon: <CheckCircle className="w-4 h-4" />,
-        color: 'text-green-600',
-        bgColor: 'bg-green-50',
-        borderColor: 'border-green-200',
-        status: 'Passed',
-      };
-    } else {
-      return {
-        icon: <XCircle className="w-4 h-4" />,
-        color: 'text-red-600',
-        bgColor: 'bg-red-50',
-        borderColor: 'border-red-200',
-        status: 'Failed',
-      };
-    }
-  };
-
-  // Categorize test cases
-  const categorizeTestCases = () => {
-    const categories = {
-      basic: [] as typeof testCases,
-      edge: [] as typeof testCases,
-      performance: [] as typeof testCases,
-      complex: [] as typeof testCases,
-    };
-
-    testCases.forEach((testCase) => {
-      // Simple categorization based on input characteristics
-      const input = Array.isArray(testCase.input) ? testCase.input : [testCase.input];
-      const inputSize = input.length;
-
-      if (inputSize <= 3) {
-        categories.basic.push(testCase);
-      } else if (inputSize > 100) {
-        categories.performance.push(testCase);
-      } else if (
-        input.includes(null) ||
-        input.includes(undefined) ||
-        input.includes(0) ||
-        input.includes('')
-      ) {
-        categories.edge.push(testCase);
-      } else {
-        categories.complex.push(testCase);
-      }
-    });
-
-    return categories;
-  };
-
-  // Calculate summary statistics
-  const totalTests = testCases.length;
-  const passedTests = results.filter((r) => r.passed).length;
-  const failedTests = results.filter((r) => !r.passed).length;
-  const notRunTests = totalTests - results.length;
-  const passRate = totalTests > 0 ? (passedTests / totalTests) * 100 : 0;
-
-  // Performance statistics
-  const avgExecutionTime =
-    results.length > 0 ? results.reduce((sum, r) => sum + r.executionTime, 0) / results.length : 0;
-  const maxExecutionTime = Math.max(...results.map((r) => r.executionTime), 0);
-  const avgMemoryUsage =
-    results.length > 0 ? results.reduce((sum, r) => sum + r.memoryUsage, 0) / results.length : 0;
-
-  const categories = categorizeTestCases();
-
-  // Generate hints for failed tests
-  const generateHints = (testCase: TestCase, result: TestCaseResult) => {
-    const hints = [];
-
-    if (!result.passed) {
-      // Common failure patterns
-      if (result.actualOutput === undefined) {
-        hints.push(
-          'Your function might not be returning a value. Check that you have a return statement.'
-        );
-      } else if (Array.isArray(result.expectedOutput) && !Array.isArray(result.actualOutput)) {
-        hints.push('Expected an array but got a different type. Check your return type.');
-      } else if (
-        typeof result.expectedOutput === 'number' &&
-        typeof result.actualOutput === 'number'
-      ) {
-        if (Math.abs(result.actualOutput - result.expectedOutput) < 0.01) {
-          hints.push(
-            'Your result is very close but not exact. Check for floating-point precision issues.'
-          );
-        } else {
-          hints.push(
-            'Check your algorithm logic. The result differs significantly from expected output.'
-          );
-        }
-      } else if (JSON.stringify(result.actualOutput) !== JSON.stringify(result.expectedOutput)) {
-        hints.push(
-          "The output structure or values don't match. Review your algorithm step by step."
-        );
-      }
-
-      // Input-specific hints
-      const input = Array.isArray(testCase.input) ? testCase.input : [testCase.input];
-      if (input.includes(0)) {
-        hints.push('Consider edge cases like zero values or empty inputs.');
-      }
-      if (input.length === 0) {
-        hints.push('Handle empty input arrays or null values properly.');
-      }
-    }
-
-    return hints;
-  };
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          <Play className="w-5 h-5 text-gray-600" />
-          <span className="font-medium text-gray-900">Test Results</span>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          <button
-            onClick={() => setShowDetails(!showDetails)}
-            className="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
-          >
-            {showDetails ? 'Hide Details' : 'Show Details'}
-          </button>
-
-          <button
-            onClick={handleRunTests}
-            disabled={isRunning}
-            className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white text-sm font-medium rounded-lg transition-colors flex items-center space-x-2"
-          >
-            {isRunning ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                <span>Running...</span>
-              </>
-            ) : (
-              <>
-                <Play className="w-4 h-4" />
-                <span>Run Tests</span>
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Overall Progress */}
-      <div className="bg-white p-6 rounded-lg border border-gray-200">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">Test Progress</h3>
-          <div className="text-right">
-            <div className="text-2xl font-bold text-blue-600">{passRate.toFixed(1)}%</div>
-            <div className="text-sm text-gray-600">Pass Rate</div>
-          </div>
-        </div>
-
-        {/* Progress Bar */}
-        <div className="w-full bg-gray-200 rounded-full h-3 mb-4">
-          <div
-            className="bg-green-600 h-3 rounded-full transition-all duration-300"
-            style={{ width: `${passRate}%` }}
-          ></div>
-        </div>
-
-        {/* Statistics Grid */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="text-2xl font-bold text-green-600">{passedTests}</div>
-            <div className="text-sm text-gray-600">Passed</div>
-          </div>
-          <div className="text-center">
-            <div className="text-2xl font-bold text-red-600">{failedTests}</div>
-            <div className="text-sm text-gray-600">Failed</div>
-          </div>
-          <div className="text-center">
-            <div className="text-2xl font-bold text-gray-600">{notRunTests}</div>
-            <div className="text-sm text-gray-600">Not Run</div>
-          </div>
-          <div className="text-center">
-            <div className="text-2xl font-bold text-blue-600">{totalTests}</div>
-            <div className="text-sm text-gray-600">Total</div>
-          </div>
-        </div>
-      </div>
-
-      {/* Performance Summary */}
-      {results.length > 0 && (
-        <div className="bg-white p-6 rounded-lg border border-gray-200">
-          <div className="flex items-center space-x-2 mb-4">
-            <TrendingUp className="w-5 h-5 text-purple-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Performance Summary</h3>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="text-center">
-              <div className="text-xl font-bold text-blue-600">{avgExecutionTime.toFixed(2)}ms</div>
-              <div className="text-sm text-gray-600">Avg Execution Time</div>
-              <div className="text-xs text-gray-500 mt-1">Max: {maxExecutionTime.toFixed(2)}ms</div>
-            </div>
-            <div className="text-center">
-              <div className="text-xl font-bold text-green-600">{avgMemoryUsage.toFixed(2)}MB</div>
-              <div className="text-sm text-gray-600">Avg Memory Usage</div>
-            </div>
-            <div className="text-center">
-              <div className="text-xl font-bold text-purple-600">{results.length}</div>
-              <div className="text-sm text-gray-600">Tests Completed</div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Test Categories */}
-      {showDetails && (
-        <div className="bg-white p-6 rounded-lg border border-gray-200">
-          <div className="flex items-center space-x-2 mb-4">
-            <Target className="w-5 h-5 text-orange-600" />
-            <h3 className="text-lg font-semibold text-gray-900">Test Categories</h3>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            {Object.entries(categories).map(([category, tests]) => {
-              const passedInCategory = results.filter(
-                (r) => r.passed && tests.some((t) => t.id === r.testCaseId)
-              ).length;
-
-              return (
-                <div key={category} className="text-center p-3 bg-gray-50 rounded-lg">
-                  <div className="text-lg font-bold text-gray-900 capitalize">{category}</div>
-                  <div className="text-sm text-gray-600">
-                    {passedInCategory}/{tests.length} passed
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Test Case Details */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold text-gray-900">Test Cases</h3>
-          <div className="flex items-center space-x-2 text-sm text-gray-600">
-            <BarChart3 className="w-4 h-4" />
-            <span>Click test cases for details</span>
-          </div>
-        </div>
-
-        {testCases.length === 0 ? (
-          <div className="text-center py-8 text-gray-500">
-            <AlertTriangle className="w-12 h-12 mx-auto mb-2 opacity-50" />
-            <p className="text-sm">No test cases available</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {testCases.map((testCase, index) => {
-              const result = results.find((r) => r.testCaseId === testCase.id);
-              const { icon, color, bgColor, borderColor, status } = getTestStatus(result);
-              const isSelected = selectedTestCase === testCase.id;
-              const hints = result && !result.passed ? generateHints(testCase, result) : [];
-
-              return (
-                <div
-                  key={testCase.id}
-                  className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
-                    isSelected
-                      ? `${borderColor} ${bgColor}`
-                      : 'border-gray-200 bg-white hover:border-gray-300'
-                  }`}
-                  onClick={() => setSelectedTestCase(isSelected ? null : testCase.id)}
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex items-start space-x-3 flex-1">
-                      <div className={`mt-1 ${color}`}>{icon}</div>
-
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center space-x-2 mb-2">
-                          <span className="font-medium text-gray-900">Test Case {index + 1}</span>
-                          <span
-                            className={`text-sm px-2 py-1 rounded-full ${color} ${bgColor} border ${borderColor}`}
-                          >
-                            {status}
-                          </span>
-                          {result && (
-                            <span className="text-xs text-gray-500">
-                              {result.executionTime.toFixed(2)}ms
-                            </span>
-                          )}
-                        </div>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm mb-2">
-                          <div>
-                            <span className="font-medium text-gray-600">Input:</span>
-                            <code className="ml-2 px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs break-all">
-                              {Array.isArray(testCase.input)
-                                ? JSON.stringify(testCase.input)
-                                : String(testCase.input)}
-                            </code>
-                          </div>
-
-                          <div>
-                            <span className="font-medium text-gray-600">Expected:</span>
-                            <code className="ml-2 px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs break-all">
-                              {JSON.stringify(testCase.expectedOutput)}
-                            </code>
-                          </div>
-                        </div>
-
-                        {result && (
-                          <div className="mb-2">
-                            <span className="font-medium text-gray-600">Actual:</span>
-                            <code
-                              className={`ml-2 px-2 py-1 rounded text-xs break-all ${
-                                result.passed
-                                  ? 'bg-green-100 text-green-800'
-                                  : 'bg-red-100 text-red-800'
-                              }`}
-                            >
-                              {JSON.stringify(result.actualOutput)}
-                            </code>
-                          </div>
-                        )}
-
-                        {/* Hints for failed tests */}
-                        {hints.length > 0 && (
-                          <div className="mt-3 p-3 bg-yellow-50 rounded-md border border-yellow-200">
-                            <div className="flex items-start space-x-2">
-                              <Lightbulb className="w-4 h-4 text-yellow-600 mt-0.5 flex-shrink-0" />
-                              <div>
-                                <div className="text-sm font-medium text-yellow-800 mb-1">
-                                  Hints for this test case:
-                                </div>
-                                <ul className="text-sm text-yellow-700 space-y-1">
-                                  {hints.map((hint, hintIndex) => (
-                                    <li key={hintIndex}>• {hint}</li>
-                                  ))}
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-
-                        {/* Error message */}
-                        {result && result.executionResult.error && (
-                          <div className="mt-3 p-3 bg-red-50 rounded-md border border-red-200">
-                            <div className="flex items-start space-x-2">
-                              <AlertTriangle className="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0" />
-                              <div>
-                                <div className="text-sm font-medium text-red-800 mb-1">
-                                  Runtime Error:
-                                </div>
-                                <div className="text-sm text-red-700 font-mono">
-                                  {result.executionResult.error.message}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Expand/collapse indicator */}
-                    <div
-                      className={`transform transition-transform ${isSelected ? 'rotate-90' : ''}`}
-                    >
-                      <svg
-                        className="w-5 h-5 text-gray-400"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 5l7 7-7 7"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TestRunner;
diff --git a/src/components/playground/VisualizationSelector.tsx b/src/components/playground/VisualizationSelector.tsx
deleted file mode 100644
index 5e23b8d..0000000
--- a/src/components/playground/VisualizationSelector.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-// src/components/playground/VisualizationSelector.tsx
-// Component for selecting which data structure visualization to show
-
-import React from 'react';
-import { Eye, Database, Hash, List, GitBranch, Network } from 'lucide-react';
-import type { VisualizationSelectorProps, DataStructureType } from '../../types/playground';
-
-const VisualizationSelector: React.FC<VisualizationSelectorProps> = ({
-  options,
-  selected,
-  onSelect,
-  disabled = false,
-  className = '',
-}) => {
-  // Icon mapping for data structures
-  const getIcon = (type: DataStructureType) => {
-    switch (type) {
-      case 'Array':
-        return <List className="w-5 h-5" />;
-      case 'LinkedList':
-        return <List className="w-5 h-5" />;
-      case 'Stack':
-        return <Database className="w-5 h-5" />;
-      case 'Queue':
-        return <Database className="w-5 h-5" />;
-      case 'HashTable':
-        return <Hash className="w-5 h-5" />;
-      case 'BinaryTree':
-        return <GitBranch className="w-5 h-5" />;
-      case 'BinarySearchTree':
-        return <GitBranch className="w-5 h-5" />;
-      case 'AVLTree':
-        return <GitBranch className="w-5 h-5" />;
-      case 'Heap':
-        return <Database className="w-5 h-5" />;
-      case 'Graph':
-        return <Network className="w-5 h-5" />;
-      default:
-        return <Eye className="w-5 h-5" />;
-    }
-  };
-
-  // Display name mapping
-  const getDisplayName = (type: DataStructureType): string => {
-    switch (type) {
-      case 'BinarySearchTree':
-        return 'Binary Search Tree';
-      case 'AVLTree':
-        return 'AVL Tree';
-      default:
-        return type;
-    }
-  };
-
-  return (
-    <div className={`space-y-3 ${className}`}>
-      <div className="flex items-center space-x-2">
-        <Eye className="w-5 h-5 text-gray-600" />
-        <span className="font-medium text-gray-900">Visualization</span>
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
-        {options.map((option) => (
-          <button
-            key={option}
-            onClick={() => onSelect(option)}
-            disabled={disabled}
-            className={`p-3 rounded-lg border transition-all text-left ${
-              selected === option
-                ? 'bg-blue-50 border-blue-500 text-blue-700'
-                : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
-            } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-          >
-            <div className="flex items-center space-x-3">
-              <div className={`${selected === option ? 'text-blue-600' : 'text-gray-500'}`}>
-                {getIcon(option)}
-              </div>
-              <div>
-                <div className="text-sm font-medium">{getDisplayName(option)}</div>
-                <div className="text-xs text-gray-500">
-                  {selected === option ? 'Active' : 'Click to select'}
-                </div>
-              </div>
-            </div>
-          </button>
-        ))}
-      </div>
-
-      {options.length === 0 && (
-        <div className="text-center py-8 text-gray-500">
-          <Eye className="w-12 h-12 mx-auto mb-2 opacity-50" />
-          <p className="text-sm">No visualizations available for this problem</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default VisualizationSelector;
diff --git a/src/components/rxjs/marble/MarbleDiagramTool.tsx b/src/components/rxjs/marble/MarbleDiagramTool.tsx
new file mode 100644
index 0000000..319b4d6
--- /dev/null
+++ b/src/components/rxjs/marble/MarbleDiagramTool.tsx
@@ -0,0 +1,280 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import type { MarbleStream, AppliedOperator } from '../shared/types';
+import { createMarbleStream, applyOperatorSimulation, operatorConfigs } from '../shared/utils';
+import { MarbleEditor } from '../visualization/MarbleEditor';
+import { MarbleTimeline } from '../visualization/MarbleTimeline';
+import { OperatorSelector } from '../visualization/OperatorSelector';
+
+interface MarbleDiagramToolState {
+  inputMarbleString: string;
+  appliedOperators: AppliedOperator[];
+}
+
+interface MarbleDiagramToolProps {
+  initialState?: Partial<MarbleDiagramToolState>;
+  className?: string;
+}
+
+export const MarbleDiagramTool: React.FC<MarbleDiagramToolProps> = ({
+  initialState,
+  className = '',
+}) => {
+  const [state, setState] = useState<MarbleDiagramToolState>({
+    inputMarbleString: '--a--b--c--|',
+    appliedOperators: [],
+    ...initialState,
+  });
+
+  const [streams, setStreams] = useState<{
+    input: MarbleStream;
+    output: MarbleStream;
+  }>({
+    input: {
+      id: 'input',
+      name: 'Input',
+      events: [],
+      duration: 1000,
+      isComplete: false,
+      hasError: false,
+    },
+    output: {
+      id: 'output',
+      name: 'Output',
+      events: [],
+      duration: 1000,
+      isComplete: false,
+      hasError: false,
+    },
+  });
+
+  const updateStreams = useCallback(() => {
+    try {
+      const inputStream = createMarbleStream('input', 'Input', state.inputMarbleString);
+
+      // Apply operators to create output stream
+      let outputStream = inputStream;
+      for (const appliedOp of state.appliedOperators) {
+        if (appliedOp.enabled) {
+          outputStream = applyOperatorSimulation(
+            outputStream,
+            appliedOp.config.name,
+            appliedOp.parameters
+          );
+        }
+      }
+
+      setStreams({ input: inputStream, output: outputStream });
+    } catch (error) {
+      console.error('Error updating streams:', error);
+      // Keep previous valid streams on error
+    }
+  }, [state.inputMarbleString, state.appliedOperators]);
+
+  useEffect(() => {
+    updateStreams();
+  }, [updateStreams]);
+
+  const clearTool = useCallback(() => {
+    setState({
+      inputMarbleString: '',
+      appliedOperators: [],
+    });
+  }, []);
+
+  const loadExample = useCallback((example: 'basic' | 'advanced' | 'error') => {
+    const examples: Record<string, MarbleDiagramToolState> = {
+      basic: {
+        inputMarbleString: '--1--2--3--|',
+        appliedOperators: [],
+      },
+      advanced: {
+        inputMarbleString: '--a--b--c--d--e--|',
+        appliedOperators: [
+          {
+            id: 'map-example',
+            config: operatorConfigs[0], // map
+            parameters: { transform: 'x => x.toUpperCase()' },
+            enabled: true,
+          },
+        ],
+      },
+      error: {
+        inputMarbleString: '--1--2--#',
+        appliedOperators: [],
+      },
+    };
+
+    setState(examples[example]);
+  }, []);
+
+  return (
+    <div className={`marble-diagram-tool ${className}`}>
+      {/* Description */}
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-bold text-gray-800 mb-2">Interactive Marble Diagrams</h2>
+        <p className="text-gray-600 max-w-2xl mx-auto">
+          Write a stream in marble notation, pick an operator and see the stream it produces. The
+          result is simulated: no RxJS code is run.
+        </p>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-6">
+          <h3 className="text-xl font-semibold text-gray-800">Marble Diagram Tool</h3>
+          <div className="flex gap-2">
+            <button
+              onClick={() => loadExample('basic')}
+              className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
+            >
+              Basic Example
+            </button>
+            <button
+              onClick={() => loadExample('advanced')}
+              className="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors"
+            >
+              Advanced Example
+            </button>
+            <button
+              onClick={() => loadExample('error')}
+              className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+            >
+              Error Handling
+            </button>
+            <button
+              onClick={clearTool}
+              className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+
+        {/* Input Section */}
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Input Stream (Marble Notation)
+          </label>
+          <MarbleEditor
+            initialValue={state.inputMarbleString}
+            onStreamChange={(stream) => {
+              setState((prev) => ({ ...prev, inputMarbleString: stream.name }));
+            }}
+            className="w-full"
+          />
+        </div>
+
+        {/* Operator Selection */}
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-gray-700 mb-2">Operators Chain</label>
+          <OperatorSelector
+            onOperatorAdd={(appliedOperator: AppliedOperator) => {
+              setState((prev) => ({
+                ...prev,
+                appliedOperators: [...prev.appliedOperators, appliedOperator],
+              }));
+            }}
+            className="w-full"
+          />
+        </div>
+
+        {/* Visualization */}
+        <div className="space-y-4">
+          {/* Input Stream Visualization */}
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-2">Input Stream</h4>
+            <MarbleTimeline stream={streams.input} className="border rounded p-2" />
+          </div>
+
+          {/* Operator Chain Visualization */}
+          {state.appliedOperators.length > 0 && (
+            <div className="px-4 py-2 bg-gray-50 rounded">
+              <div className="flex items-center gap-2 text-sm text-gray-600">
+                <span>Operators:</span>
+                {state.appliedOperators.map((op, index) => (
+                  <React.Fragment key={op.id}>
+                    <span className="px-2 py-1 bg-white rounded border text-xs font-mono">
+                      {op.config.name}
+                    </span>
+                    {index < state.appliedOperators.length - 1 && <span>→</span>}
+                  </React.Fragment>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Output Stream Visualization */}
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-2">Output Stream</h4>
+            <MarbleTimeline stream={streams.output} className="border rounded p-2" />
+          </div>
+        </div>
+
+        {/* Stream Information */}
+        <div className="mt-6 grid grid-cols-2 gap-4 text-sm">
+          <div className="bg-blue-50 p-3 rounded">
+            <div className="font-medium text-blue-800 mb-1">Input Stream</div>
+            <div className="text-blue-600">{streams.input.events.length} events</div>
+            <div className="text-blue-600">Duration: {streams.input.duration}ms</div>
+            <div className="text-blue-600">
+              Status:{' '}
+              {streams.input.isComplete ? 'Complete' : streams.input.hasError ? 'Error' : 'Active'}
+            </div>
+          </div>
+          <div className="bg-green-50 p-3 rounded">
+            <div className="font-medium text-green-800 mb-1">Output Stream</div>
+            <div className="text-green-600">{streams.output.events.length} events</div>
+            <div className="text-green-600">Duration: {streams.output.duration}ms</div>
+            <div className="text-green-600">
+              Status:{' '}
+              {streams.output.isComplete
+                ? 'Complete'
+                : streams.output.hasError
+                  ? 'Error'
+                  : 'Active'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Learning Resources */}
+      <div className="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6">
+        <h3 className="text-lg font-semibold text-gray-800 mb-4">Learning Resources</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="bg-white p-4 rounded-lg shadow-sm">
+            <h4 className="font-medium text-blue-600 mb-2">Marble Diagrams</h4>
+            <p className="text-sm text-gray-600">
+              Learn how to read and create marble diagrams to visualize observable streams.
+            </p>
+          </div>
+          <div className="bg-white p-4 rounded-lg shadow-sm">
+            <h4 className="font-medium text-green-600 mb-2">RxJS Operators</h4>
+            <p className="text-sm text-gray-600">
+              Discover the power of transformation, filtering, and combination operators.
+            </p>
+          </div>
+          <div className="bg-white p-4 rounded-lg shadow-sm">
+            <h4 className="font-medium text-purple-600 mb-2">Error Handling</h4>
+            <p className="text-sm text-gray-600">
+              Master error handling patterns and recovery strategies in reactive programming.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Tips */}
+      <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+        <h4 className="font-medium text-yellow-800 mb-2">💡 Quick Tips</h4>
+        <ul className="text-sm text-yellow-700 space-y-1">
+          <li>
+            • Use <code className="bg-yellow-100 px-1 rounded">-</code> for time gaps,{' '}
+            <code className="bg-yellow-100 px-1 rounded">|</code> for completion,{' '}
+            <code className="bg-yellow-100 px-1 rounded">#</code> for errors
+          </li>
+          <li>• Values can be letters, numbers, or any character (except special ones)</li>
+          <li>• Chain operators to see how data transforms through the pipeline</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/rxjs/playground/CodePlayground.tsx b/src/components/rxjs/playground/CodePlayground.tsx
deleted file mode 100644
index d1a62c0..0000000
--- a/src/components/rxjs/playground/CodePlayground.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import type { CodeExample } from '../shared/types';
-
-interface CodePlaygroundProps {
-  initialCode?: string;
-  className?: string;
-}
-
-const defaultCode = `// RxJS Code Playground
-import { Observable, map, filter, take } from 'rxjs';
-
-// Create a simple observable
-const source$ = new Observable(subscriber => {
-  let count = 1;
-  const interval = setInterval(() => {
-    subscriber.next(count++);
-    if (count > 5) {
-      subscriber.complete();
-      clearInterval(interval);
-    }
-  }, 1000);
-});
-
-// Transform the stream
-const result$ = source$.pipe(
-  filter(x => x % 2 === 0), // Only even numbers
-  map(x => x * 10),         // Multiply by 10
-  take(2)                   // Take only first 2 values
-);
-
-// Subscribe and log results
-result$.subscribe({
-  next: value => console.log('Result:', value),
-  complete: () => console.log('Complete!')
-});`;
-
-const codeExamples: CodeExample[] = [
-  {
-    id: 'basic-observable',
-    title: 'Basic Observable',
-    description: 'Create and subscribe to a simple observable',
-    code: `import { Observable } from 'rxjs';
-
-const obs$ = new Observable(subscriber => {
-  subscriber.next('Hello');
-  subscriber.next('World');
-  subscriber.complete();
-});
-
-obs$.subscribe(value => console.log(value));`,
-    expectedOutput: 'Hello\\nWorld',
-    difficulty: 'beginner',
-    category: 'creation',
-  },
-  {
-    id: 'operators-chain',
-    title: 'Operator Chain',
-    description: 'Use multiple operators together',
-    code: `import { of, map, filter, tap } from 'rxjs';
-
-of(1, 2, 3, 4, 5)
-  .pipe(
-    tap(x => console.log('Before filter:', x)),
-    filter(x => x % 2 === 0),
-    map(x => x * x),
-    tap(x => console.log('After map:', x))
-  )
-  .subscribe(result => console.log('Final:', result));`,
-    expectedOutput: 'Before filter: 1\\nBefore filter: 2\\nAfter map: 4\\nFinal: 4\\n...',
-    difficulty: 'intermediate',
-    category: 'transformation',
-  },
-  {
-    id: 'error-handling',
-    title: 'Error Handling',
-    description: 'Handle errors in observables',
-    code: `import { throwError, catchError, of } from 'rxjs';
-
-throwError(() => new Error('Something went wrong!'))
-  .pipe(
-    catchError(err => {
-      console.error('Caught error:', err.message);
-      return of('Recovered with default value');
-    })
-  )
-  .subscribe(value => console.log('Result:', value));`,
-    expectedOutput: 'Caught error: Something went wrong!\\nResult: Recovered with default value',
-    difficulty: 'intermediate',
-    category: 'error-handling',
-  },
-];
-
-export const CodePlayground: React.FC<CodePlaygroundProps> = ({
-  initialCode = defaultCode,
-  className = '',
-}) => {
-  const [code, setCode] = useState(initialCode);
-  const [output, setOutput] = useState<string[]>([]);
-  const [isRunning, setIsRunning] = useState(false);
-  const [selectedExample, setSelectedExample] = useState<string>('');
-
-  const captureConsole = useCallback(() => {
-    const originalLog = console.log;
-    const originalError = console.error;
-    const capturedOutput: string[] = [];
-
-    console.log = (...args: unknown[]) => {
-      capturedOutput.push(`LOG: ${args.map((arg) => String(arg)).join(' ')}`);
-      originalLog.apply(console, args);
-    };
-
-    console.error = (...args: unknown[]) => {
-      capturedOutput.push(`ERROR: ${args.map((arg) => String(arg)).join(' ')}`);
-      originalError.apply(console, args);
-    };
-
-    return {
-      restore: () => {
-        console.log = originalLog;
-        console.error = originalError;
-      },
-      getOutput: () => capturedOutput,
-    };
-  }, []);
-
-  const runCode = useCallback(async () => {
-    setIsRunning(true);
-    setOutput([]);
-
-    const { restore } = captureConsole();
-
-    try {
-      // Note: In a real implementation, you would need to compile and execute the RxJS code
-      // This is a simplified simulation
-      setOutput([
-        '// Code execution simulation',
-        '// In a real environment, this would execute your RxJS code',
-      ]);
-
-      // Simulate some delay
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      setOutput((prev) => [
-        ...prev,
-        '// Simulated output:',
-        'Observable created successfully',
-        'Stream completed',
-      ]);
-    } catch (error) {
-      setOutput((prev) => [
-        ...prev,
-        `Error: ${error instanceof Error ? error.message : String(error)}`,
-      ]);
-    } finally {
-      restore();
-      setIsRunning(false);
-    }
-  }, [captureConsole]);
-
-  const loadExample = useCallback((exampleId: string) => {
-    const example = codeExamples.find((ex) => ex.id === exampleId);
-    if (example) {
-      setCode(example.code);
-      setSelectedExample(exampleId);
-      setOutput([]);
-    }
-  }, []);
-
-  const clearOutput = useCallback(() => {
-    setOutput([]);
-  }, []);
-
-  return (
-    <div className={`code-playground bg-white rounded-lg shadow-lg p-6 ${className}`}>
-      {/* Header */}
-      <div className="flex justify-between items-center mb-6">
-        <h3 className="text-xl font-semibold text-gray-800">RxJS Code Playground</h3>
-        <div className="flex gap-2">
-          <select
-            value={selectedExample}
-            onChange={(e) => loadExample(e.target.value)}
-            className="px-3 py-1 text-sm border rounded hover:border-blue-400 focus:outline-none focus:border-blue-500"
-          >
-            <option value="">Select Example</option>
-            {codeExamples.map((example) => (
-              <option key={example.id} value={example.id}>
-                {example.title} ({example.difficulty})
-              </option>
-            ))}
-          </select>
-          <button
-            onClick={runCode}
-            disabled={isRunning}
-            className="px-4 py-1 text-sm bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-gray-400 transition-colors"
-          >
-            {isRunning ? 'Running...' : 'Run Code'}
-          </button>
-          <button
-            onClick={clearOutput}
-            className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
-          >
-            Clear Output
-          </button>
-        </div>
-      </div>
-
-      {/* Code Editor */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">RxJS Code Editor</label>
-          <textarea
-            value={code}
-            onChange={(e) => setCode(e.target.value)}
-            className="w-full h-96 p-4 border rounded-lg font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="Write your RxJS code here..."
-            spellCheck={false}
-          />
-
-          {/* Code Editor Toolbar */}
-          <div className="mt-2 flex justify-between items-center text-sm text-gray-500">
-            <span>Lines: {code.split('\n').length}</span>
-            <span>Characters: {code.length}</span>
-          </div>
-        </div>
-
-        {/* Output Panel */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">Output Console</label>
-          <div className="w-full h-96 p-4 bg-gray-900 text-green-400 font-mono text-sm rounded-lg overflow-y-auto">
-            {output.length === 0 ? (
-              <div className="text-gray-500">Click "Run Code" to see output...</div>
-            ) : (
-              output.map((line, index) => (
-                <div key={index} className="mb-1">
-                  {line}
-                </div>
-              ))
-            )}
-            {isRunning && <div className="text-yellow-400 animate-pulse">Executing code...</div>}
-          </div>
-        </div>
-      </div>
-
-      {/* Help Section */}
-      <div className="mt-6 bg-blue-50 p-4 rounded-lg">
-        <h4 className="font-medium text-blue-800 mb-2">Quick Tips:</h4>
-        <ul className="text-sm text-blue-700 space-y-1">
-          <li>
-            • Import RxJS operators at the top:{' '}
-            <code className="bg-blue-100 px-1 rounded">
-              import {`{ Observable, map, filter }`} from 'rxjs';
-            </code>
-          </li>
-          <li>
-            • Use <code className="bg-blue-100 px-1 rounded">pipe()</code> to chain operators
-            together
-          </li>
-          <li>
-            • Always <code className="bg-blue-100 px-1 rounded">subscribe()</code> to observables to
-            see results
-          </li>
-          <li>
-            • Use <code className="bg-blue-100 px-1 rounded">console.log()</code> to debug
-            intermediate values
-          </li>
-          <li>
-            • Remember to handle errors with{' '}
-            <code className="bg-blue-100 px-1 rounded">catchError</code>
-          </li>
-        </ul>
-      </div>
-
-      {/* Selected Example Info */}
-      {selectedExample && (
-        <div className="mt-4 bg-yellow-50 p-4 rounded-lg">
-          {(() => {
-            const example = codeExamples.find((ex) => ex.id === selectedExample);
-            return example ? (
-              <div>
-                <h4 className="font-medium text-yellow-800 mb-1">{example.title}</h4>
-                <p className="text-sm text-yellow-700 mb-2">{example.description}</p>
-                <div className="text-xs text-yellow-600">
-                  <span className="inline-block bg-yellow-200 px-2 py-1 rounded mr-2">
-                    Difficulty: {example.difficulty}
-                  </span>
-                  <span className="inline-block bg-yellow-200 px-2 py-1 rounded">
-                    Category: {example.category}
-                  </span>
-                </div>
-              </div>
-            ) : null;
-          })()}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/rxjs/playground/IntegratedPlayground.tsx b/src/components/rxjs/playground/IntegratedPlayground.tsx
deleted file mode 100644
index a18453a..0000000
--- a/src/components/rxjs/playground/IntegratedPlayground.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useState } from 'react';
-import { MarblePlayground } from './MarblePlayground';
-import { CodePlayground } from './CodePlayground';
-
-type PlaygroundMode = 'marble' | 'code';
-
-interface IntegratedPlaygroundProps {
-  className?: string;
-}
-
-export const IntegratedPlayground: React.FC<IntegratedPlaygroundProps> = ({ className = '' }) => {
-  const [mode, setMode] = useState<PlaygroundMode>('marble');
-
-  return (
-    <div className={`integrated-playground ${className}`}>
-      {/* Mode Selector */}
-      <div className="flex justify-center mb-6">
-        <div className="inline-flex rounded-lg bg-gray-100 p-1">
-          <button
-            onClick={() => setMode('marble')}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              mode === 'marble'
-                ? 'bg-white text-blue-600 shadow-sm'
-                : 'text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Marble Playground
-          </button>
-          <button
-            onClick={() => setMode('code')}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              mode === 'code'
-                ? 'bg-white text-blue-600 shadow-sm'
-                : 'text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Code Playground
-          </button>
-        </div>
-      </div>
-
-      {/* Mode Description */}
-      <div className="text-center mb-6">
-        {mode === 'marble' ? (
-          <div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-2">Interactive Marble Diagrams</h2>
-            <p className="text-gray-600 max-w-2xl mx-auto">
-              Visualize RxJS streams using marble notation. Create input streams, apply operators,
-              and see the transformation in real-time.
-            </p>
-          </div>
-        ) : (
-          <div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-2">Live RxJS Code Editor</h2>
-            <p className="text-gray-600 max-w-2xl mx-auto">
-              Write and execute RxJS code directly in the browser. Experiment with operators,
-              observables, and reactive patterns.
-            </p>
-          </div>
-        )}
-      </div>
-
-      {/* Playground Content */}
-      <div className="playground-content">
-        {mode === 'marble' ? <MarblePlayground /> : <CodePlayground />}
-      </div>
-
-      {/* Learning Resources */}
-      <div className="mt-8 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6">
-        <h3 className="text-lg font-semibold text-gray-800 mb-4">Learning Resources</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div className="bg-white p-4 rounded-lg shadow-sm">
-            <h4 className="font-medium text-blue-600 mb-2">Marble Diagrams</h4>
-            <p className="text-sm text-gray-600">
-              Learn how to read and create marble diagrams to visualize observable streams.
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow-sm">
-            <h4 className="font-medium text-green-600 mb-2">RxJS Operators</h4>
-            <p className="text-sm text-gray-600">
-              Discover the power of transformation, filtering, and combination operators.
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow-sm">
-            <h4 className="font-medium text-purple-600 mb-2">Error Handling</h4>
-            <p className="text-sm text-gray-600">
-              Master error handling patterns and recovery strategies in reactive programming.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Quick Tips */}
-      <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-        <h4 className="font-medium text-yellow-800 mb-2">💡 Quick Tips</h4>
-        <ul className="text-sm text-yellow-700 space-y-1">
-          {mode === 'marble' ? (
-            <>
-              <li>
-                • Use <code className="bg-yellow-100 px-1 rounded">-</code> for time gaps,{' '}
-                <code className="bg-yellow-100 px-1 rounded">|</code> for completion,{' '}
-                <code className="bg-yellow-100 px-1 rounded">#</code> for errors
-              </li>
-              <li>• Values can be letters, numbers, or any character (except special ones)</li>
-              <li>• Chain operators to see how data transforms through the pipeline</li>
-            </>
-          ) : (
-            <>
-              <li>
-                • Start with simple observables using{' '}
-                <code className="bg-yellow-100 px-1 rounded">of()</code> or{' '}
-                <code className="bg-yellow-100 px-1 rounded">from()</code>
-              </li>
-              <li>
-                • Always call <code className="bg-yellow-100 px-1 rounded">.subscribe()</code> to
-                activate the observable
-              </li>
-              <li>
-                • Use <code className="bg-yellow-100 px-1 rounded">pipe()</code> to chain multiple
-                operators
-              </li>
-            </>
-          )}
-        </ul>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/rxjs/playground/MarblePlayground.tsx b/src/components/rxjs/playground/MarblePlayground.tsx
deleted file mode 100644
index e9f216b..0000000
--- a/src/components/rxjs/playground/MarblePlayground.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import type { MarbleStream, AppliedOperator } from '../shared/types';
-import { createMarbleStream, applyOperatorSimulation, operatorConfigs } from '../shared/utils';
-import { MarbleEditor } from '../visualization/MarbleEditor';
-import { MarbleTimeline } from '../visualization/MarbleTimeline';
-import { OperatorSelector } from '../visualization/OperatorSelector';
-
-interface PlaygroundState {
-  inputMarbleString: string;
-  appliedOperators: AppliedOperator[];
-}
-
-interface MarblePlaygroundProps {
-  initialState?: Partial<PlaygroundState>;
-  className?: string;
-}
-
-export const MarblePlayground: React.FC<MarblePlaygroundProps> = ({
-  initialState,
-  className = '',
-}) => {
-  const [state, setState] = useState<PlaygroundState>({
-    inputMarbleString: '--a--b--c--|',
-    appliedOperators: [],
-    ...initialState,
-  });
-
-  const [streams, setStreams] = useState<{
-    input: MarbleStream;
-    output: MarbleStream;
-  }>({
-    input: {
-      id: 'input',
-      name: 'Input',
-      events: [],
-      duration: 1000,
-      isComplete: false,
-      hasError: false,
-    },
-    output: {
-      id: 'output',
-      name: 'Output',
-      events: [],
-      duration: 1000,
-      isComplete: false,
-      hasError: false,
-    },
-  });
-
-  const updateStreams = useCallback(() => {
-    try {
-      const inputStream = createMarbleStream('input', 'Input', state.inputMarbleString);
-
-      // Apply operators to create output stream
-      let outputStream = inputStream;
-      for (const appliedOp of state.appliedOperators) {
-        if (appliedOp.enabled) {
-          outputStream = applyOperatorSimulation(
-            outputStream,
-            appliedOp.config.name,
-            appliedOp.parameters
-          );
-        }
-      }
-
-      setStreams({ input: inputStream, output: outputStream });
-    } catch (error) {
-      console.error('Error updating streams:', error);
-      // Keep previous valid streams on error
-    }
-  }, [state.inputMarbleString, state.appliedOperators]);
-
-  useEffect(() => {
-    updateStreams();
-  }, [updateStreams]);
-
-  const clearPlayground = useCallback(() => {
-    setState({
-      inputMarbleString: '',
-      appliedOperators: [],
-    });
-  }, []);
-
-  const loadExample = useCallback((example: 'basic' | 'advanced' | 'error') => {
-    const examples: Record<string, PlaygroundState> = {
-      basic: {
-        inputMarbleString: '--1--2--3--|',
-        appliedOperators: [],
-      },
-      advanced: {
-        inputMarbleString: '--a--b--c--d--e--|',
-        appliedOperators: [
-          {
-            id: 'map-example',
-            config: operatorConfigs[0], // map
-            parameters: { transform: 'x => x.toUpperCase()' },
-            enabled: true,
-          },
-        ],
-      },
-      error: {
-        inputMarbleString: '--1--2--#',
-        appliedOperators: [],
-      },
-    };
-
-    setState(examples[example]);
-  }, []);
-
-  return (
-    <div className={`marble-playground bg-white rounded-lg shadow-lg p-6 ${className}`}>
-      {/* Header */}
-      <div className="flex justify-between items-center mb-6">
-        <h3 className="text-xl font-semibold text-gray-800">Marble Playground</h3>
-        <div className="flex gap-2">
-          <button
-            onClick={() => loadExample('basic')}
-            className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
-          >
-            Basic Example
-          </button>
-          <button
-            onClick={() => loadExample('advanced')}
-            className="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors"
-          >
-            Advanced Example
-          </button>
-          <button
-            onClick={() => loadExample('error')}
-            className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
-          >
-            Error Handling
-          </button>
-          <button
-            onClick={clearPlayground}
-            className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
-          >
-            Clear
-          </button>
-        </div>
-      </div>
-
-      {/* Input Section */}
-      <div className="mb-6">
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Input Stream (Marble Notation)
-        </label>
-        <MarbleEditor
-          initialValue={state.inputMarbleString}
-          onStreamChange={(stream) => {
-            setState((prev) => ({ ...prev, inputMarbleString: stream.name }));
-          }}
-          className="w-full"
-        />
-      </div>
-
-      {/* Operator Selection */}
-      <div className="mb-6">
-        <label className="block text-sm font-medium text-gray-700 mb-2">Operators Chain</label>
-        <OperatorSelector
-          onOperatorAdd={(appliedOperator: AppliedOperator) => {
-            setState((prev) => ({
-              ...prev,
-              appliedOperators: [...prev.appliedOperators, appliedOperator],
-            }));
-          }}
-          className="w-full"
-        />
-      </div>
-
-      {/* Visualization */}
-      <div className="space-y-4">
-        {/* Input Stream Visualization */}
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Input Stream</h4>
-          <MarbleTimeline stream={streams.input} className="border rounded p-2" />
-        </div>
-
-        {/* Operator Chain Visualization */}
-        {state.appliedOperators.length > 0 && (
-          <div className="px-4 py-2 bg-gray-50 rounded">
-            <div className="flex items-center gap-2 text-sm text-gray-600">
-              <span>Operators:</span>
-              {state.appliedOperators.map((op, index) => (
-                <React.Fragment key={op.id}>
-                  <span className="px-2 py-1 bg-white rounded border text-xs font-mono">
-                    {op.config.name}
-                  </span>
-                  {index < state.appliedOperators.length - 1 && <span>→</span>}
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Output Stream Visualization */}
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Output Stream</h4>
-          <MarbleTimeline stream={streams.output} className="border rounded p-2" />
-        </div>
-      </div>
-
-      {/* Stream Information */}
-      <div className="mt-6 grid grid-cols-2 gap-4 text-sm">
-        <div className="bg-blue-50 p-3 rounded">
-          <div className="font-medium text-blue-800 mb-1">Input Stream</div>
-          <div className="text-blue-600">{streams.input.events.length} events</div>
-          <div className="text-blue-600">Duration: {streams.input.duration}ms</div>
-          <div className="text-blue-600">
-            Status:{' '}
-            {streams.input.isComplete ? 'Complete' : streams.input.hasError ? 'Error' : 'Active'}
-          </div>
-        </div>
-        <div className="bg-green-50 p-3 rounded">
-          <div className="font-medium text-green-800 mb-1">Output Stream</div>
-          <div className="text-green-600">{streams.output.events.length} events</div>
-          <div className="text-green-600">Duration: {streams.output.duration}ms</div>
-          <div className="text-green-600">
-            Status:{' '}
-            {streams.output.isComplete ? 'Complete' : streams.output.hasError ? 'Error' : 'Active'}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/rxjs/playground/index.ts b/src/components/rxjs/playground/index.ts
deleted file mode 100644
index d3f8897..0000000
--- a/src/components/rxjs/playground/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Export all playground components
-export { MarblePlayground } from './MarblePlayground';
-export { CodePlayground } from './CodePlayground';
-export { IntegratedPlayground } from './IntegratedPlayground';
-
-// Export types for external use
-export type {
-  MarbleEvent,
-  MarbleStream,
-  OperatorConfig,
-  AppliedOperator,
-  PlaygroundState,
-  CodeExample,
-  Tutorial,
-  TutorialStep,
-} from '../shared/types';
-
-// Export utilities for external use
-export {
-  parseMarbleString,
-  createMarbleStream,
-  applyOperatorSimulation,
-  operatorConfigs,
-  sampleMarbles,
-} from '../shared/utils';
diff --git a/src/components/rxjs/shared/types.ts b/src/components/rxjs/shared/types.ts
index e2ca449..0ee9ace 100644
--- a/src/components/rxjs/shared/types.ts
+++ b/src/components/rxjs/shared/types.ts
@@ -34,7 +34,7 @@ export interface OperatorParameter {
   required: boolean;
 }
 
-export interface PlaygroundState {
+export interface MarbleDiagramState {
   sourceStream: MarbleStream;
   operators: AppliedOperator[];
   resultStream: MarbleStream;
diff --git a/src/features/bigo/BigOPage.tsx b/src/features/bigo/BigOPage.tsx
index f03540c..2c59198 100644
--- a/src/features/bigo/BigOPage.tsx
+++ b/src/features/bigo/BigOPage.tsx
@@ -11,7 +11,6 @@ import CommonComplexities from './components/sections/CommonComplexities';
 import AlgorithmAnalysis from './components/sections/AlgorithmAnalysis';
 import RealWorldApplications from './components/sections/RealWorldApplications';
 import AdvancedTopics from './components/sections/AdvancedTopics';
-import Playground from '../../components/playground/Playground';
 const Quiz = () => <ModuleQuizSection moduleId="bigo" />;
 // import AlgorithmAnalysis from './components/sections/AlgorithmAnalysis';
 // import RealWorldApplications from './components/sections/RealWorldApplications';
@@ -51,8 +50,6 @@ const BigOPage: React.FC = () => {
         return <CodingChallenges />;
       case 'gamification-hub':
         return <GamificationHub />;
-      case 'playground':
-        return <Playground />;
       case 'quiz':
         return <Quiz />;
       default:
diff --git a/src/features/bigo/components/sections/Introduction.tsx b/src/features/bigo/components/sections/Introduction.tsx
index 9642577..53101c8 100644
--- a/src/features/bigo/components/sections/Introduction.tsx
+++ b/src/features/bigo/components/sections/Introduction.tsx
@@ -4,6 +4,7 @@ import ThemeCard from '../../../../components/shared/ThemeCard';
 import NavigationCard from '../../../../components/shared/NavigationCard';
 import StatsGrid from '../../../../components/shared/StatsGrid';
 import CTASection from '../../../../components/shared/CTASection';
+import { createNavCardClass } from '../../../../utils/theme';
 import { AlgorithmComparer, PerformanceProfiler } from '../visualizations/2d/interactive';
 import {
   TeleporterMetaphor,
@@ -201,12 +202,19 @@ const Introduction: React.FC = () => {
         </ThemeCard>
 
         <ThemeCard>
-          <NavigationCard
-            title="Interactive Playground"
-            description="Solve LeetCode-style problems with real-time visualizations and performance analysis."
-            colorScheme="purple"
-            onClick={() => (window.location.href = '/bigo?section=playground')}
-          />
+          <a
+            href="/playground"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${createNavCardClass('purple')} block w-full text-left group`}
+          >
+            <h4 className="font-semibold text-gray-800 group-hover:text-gray-900 transition-colors">
+              Playground
+            </h4>
+            <p className="text-xs text-gray-600 mt-1">
+              Run your own code and step through it, one line at a time. Opens in a new tab.
+            </p>
+          </a>
         </ThemeCard>
       </div>
 
diff --git a/src/features/datastructures/DataStructuresPage.tsx b/src/features/datastructures/DataStructuresPage.tsx
index 1eb5102..38394b6 100644
--- a/src/features/datastructures/DataStructuresPage.tsx
+++ b/src/features/datastructures/DataStructuresPage.tsx
@@ -32,7 +32,6 @@ const GraphTypes = lazy(() => import('./components/sections/GraphTypes'));
 const ComplexityAnalysis = lazy(() => import('./components/sections/ComplexityAnalysis'));
 const RealWorldApplications = lazy(() => import('./components/sections/RealWorldApplications'));
 const PracticeProblems = lazy(() => import('./components/sections/PracticeProblems'));
-const Playground = lazy(() => import('../../components/playground/Playground'));
 const Quiz = () => <ModuleQuizSection moduleId="datastructures" />;
 
 function useQuery() {
@@ -105,8 +104,6 @@ const DataStructuresPage: React.FC = () => {
         return <RealWorldApplications />;
       case 'practice-problems':
         return <PracticeProblems />;
-      case 'playground':
-        return <Playground />;
       case 'quiz':
         return <Quiz />;
       default:
diff --git a/src/features/datastructures/components/sections/Introduction.tsx b/src/features/datastructures/components/sections/Introduction.tsx
index d370885..bd53a1e 100644
--- a/src/features/datastructures/components/sections/Introduction.tsx
+++ b/src/features/datastructures/components/sections/Introduction.tsx
@@ -5,7 +5,7 @@ import ThemeCard from '../../../../components/shared/ThemeCard';
 import NavigationCard from '../../../../components/shared/NavigationCard';
 import StatsGrid from '../../../../components/shared/StatsGrid';
 import CTASection from '../../../../components/shared/CTASection';
-import { getSectionTheme } from '../../../../utils/theme';
+import { createNavCardClass, getSectionTheme } from '../../../../utils/theme';
 
 const Introduction: React.FC = () => {
   const theme = getSectionTheme('datastructures');
@@ -279,12 +279,19 @@ const Introduction: React.FC = () => {
             colorScheme={theme.secondary}
             onClick={() => navigateToSection('Complexity Analysis')}
           />
-          <NavigationCard
-            title="Interactive Playground"
-            description="Solve algorithmic problems with visualizations"
-            colorScheme={theme.accent}
-            onClick={() => (window.location.href = '/datastructures?section=playground')}
-          />
+          <a
+            href="/playground"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${createNavCardClass(theme.accent)} block w-full text-left group`}
+          >
+            <h4 className="font-semibold text-gray-800 group-hover:text-gray-900 transition-colors">
+              Playground
+            </h4>
+            <p className="text-xs text-gray-600 mt-1">
+              Run your own code and step through it (opens in a new tab)
+            </p>
+          </a>
         </div>
       </ThemeCard>
 
diff --git a/src/data/problems.ts b/src/features/playground/exercises/problems.ts
similarity index 99%
rename from src/data/problems.ts
rename to src/features/playground/exercises/problems.ts
index 12ae181..2ed2263 100644
--- a/src/data/problems.ts
+++ b/src/features/playground/exercises/problems.ts
@@ -1,7 +1,7 @@
-// src/data/problems.ts
-// Comprehensive problem database for the Visual Algorithm Playground
+// Parked for the Exercise feature (docs/adr/0004, decision 5): the problem set of the retired old playground.
+// Not yet wired into the Playground; the data is unchanged.
 
-import type { PlaygroundProblem } from '../types/playground';
+import type { PlaygroundProblem } from './types';
 
 export const PROBLEM_DATABASE: PlaygroundProblem[] = [
   // ===== ARRAY PROBLEMS =====
diff --git a/src/features/playground/exercises/types.ts b/src/features/playground/exercises/types.ts
new file mode 100644
index 0000000..a162cf1
--- /dev/null
+++ b/src/features/playground/exercises/types.ts
@@ -0,0 +1,88 @@
+// Parked for the Exercise feature (docs/adr/0004, decision 5): the types the problem set needs.
+// Not yet wired into the Playground; nothing imports this file except ./problems.
+
+export type Difficulty = 'Easy' | 'Medium' | 'Hard';
+export type Language = 'javascript' | 'typescript' | 'python' | 'java' | 'cpp';
+export type ComplexityClass =
+  | 'O(1)'
+  | 'O(1) amortized'
+  | 'O(log n)'
+  | 'O(n)'
+  | 'O(n log n)'
+  | 'O(n²)'
+  | 'O(n³)'
+  | 'O(2^n)'
+  | 'O(n!)'
+  | 'O(h)'
+  | 'O(w)';
+export type DataStructureType =
+  | 'Array'
+  | 'LinkedList'
+  | 'Stack'
+  | 'Queue'
+  | 'HashTable'
+  | 'BinaryTree'
+  | 'BinarySearchTree'
+  | 'AVLTree'
+  | 'Heap'
+  | 'Graph';
+
+// Test case interface
+export interface TestCase {
+  id: string;
+  input: unknown[];
+  expectedOutput: unknown;
+  explanation?: string;
+  isHidden?: boolean; // Hidden test cases for judging
+  timeLimit?: number; // Time limit in milliseconds
+  memoryLimit?: number; // Memory limit in MB
+}
+
+// Hint system
+export interface Hint {
+  id: string;
+  content: string;
+  order: number;
+  penalty?: number; // Points deducted for using this hint
+  unlocksAfter?: number; // Minutes after problem start
+}
+
+// Solution interface
+export interface Solution {
+  code: { [key in Language]?: string };
+  explanation: string;
+  timeComplexity: ComplexityClass;
+  spaceComplexity: ComplexityClass;
+  approaches: SolutionApproach[];
+}
+
+export interface SolutionApproach {
+  name: string;
+  description: string;
+  timeComplexity: ComplexityClass;
+  spaceComplexity: ComplexityClass;
+  code: { [key in Language]?: string };
+  visualizationNotes?: string;
+}
+
+// Problem definition
+export interface PlaygroundProblem {
+  id: string;
+  title: string;
+  difficulty: Difficulty;
+  category: 'Data Structures' | 'Algorithms' | 'Big-O Analysis';
+  dataStructure?: DataStructureType;
+  description: string;
+  examples: TestCase[];
+  constraints: string[];
+  starterCode: { [key in Language]?: string };
+  testCases: TestCase[];
+  hints: Hint[];
+  solution: Solution;
+  visualizationOptions: DataStructureType[];
+  learningObjectives: string[];
+  tags: string[];
+  relatedProblems?: string[]; // IDs of related problems
+  prerequisites?: string[]; // Required knowledge/concepts
+  estimatedSolveTime: number; // Estimated time in minutes
+}
diff --git a/src/features/rxjs/components/sections/MarbleDiagrams.tsx b/src/features/rxjs/components/sections/MarbleDiagrams.tsx
index 5c31c43..2cb7a05 100644
--- a/src/features/rxjs/components/sections/MarbleDiagrams.tsx
+++ b/src/features/rxjs/components/sections/MarbleDiagrams.tsx
@@ -105,10 +105,10 @@ const MarbleDiagrams: React.FC = () => {
           </div>
         </div>
 
-        {/* Interactive Marble Diagram Playground */}
+        {/* Interactive Marble Diagram */}
         <div className="mb-12">
           <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            Interactive Marble Diagram Playground
+            Interactive Marble Diagram
           </h2>
           <MarbleDiagram2D />
         </div>
@@ -924,7 +924,7 @@ const expected = '--x--y--z--|';`}
               <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 inline-block">
                 <p className="text-yellow-800 text-sm">
                   🚧 <strong>Coming Soon:</strong> Interactive marble diagram editor with
-                  drag-and-drop functionality, operator playground, and real-time visualization of
+                  drag-and-drop functionality, an operator picker, and real-time visualization of
                   custom streams.
                 </p>
               </div>
diff --git a/src/features/rxjs/components/sections/Observables.tsx b/src/features/rxjs/components/sections/Observables.tsx
index f948439..1435b1a 100644
--- a/src/features/rxjs/components/sections/Observables.tsx
+++ b/src/features/rxjs/components/sections/Observables.tsx
@@ -206,7 +206,7 @@ const Observables: React.FC = () => {
         {/* Interactive Observable Visualization */}
         <div className="mb-12">
           <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            Interactive Observable Playground
+            Interactive Observable Visualization
           </h2>
           <Observable2D />
         </div>
diff --git a/src/features/rxjs/components/sections/Operators.tsx b/src/features/rxjs/components/sections/Operators.tsx
index f829e55..3146a6e 100644
--- a/src/features/rxjs/components/sections/Operators.tsx
+++ b/src/features/rxjs/components/sections/Operators.tsx
@@ -96,10 +96,10 @@ result$.subscribe(console.log);
           </div>
         </div>
 
-        {/* Interactive Operators Playground */}
+        {/* Interactive Operators Visualization */}
         <div className="mb-12">
           <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            Interactive Operators Playground
+            Interactive Operators Visualization
           </h2>
           <Operators2D />
         </div>
diff --git a/src/features/rxjs/components/sections/VisualizationTool.tsx b/src/features/rxjs/components/sections/VisualizationTool.tsx
index 8ec5964..01f4ed5 100644
--- a/src/features/rxjs/components/sections/VisualizationTool.tsx
+++ b/src/features/rxjs/components/sections/VisualizationTool.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IntegratedPlayground } from '../../../../components/rxjs/playground/IntegratedPlayground';
+import { MarbleDiagramTool } from '../../../../components/rxjs/marble/MarbleDiagramTool';
 
 interface TutorialStep {
   id: string;
@@ -27,11 +27,8 @@ const tutorialSteps: TutorialStep[] = [
             <strong>Marble Diagrams:</strong> Visual representations of observable streams
           </li>
           <li>
-            <strong>Interactive Playground:</strong> Experiment with operators and see real-time
-            results
-          </li>
-          <li>
-            <strong>Live Code Editor:</strong> Write and execute RxJS code directly in your browser
+            <strong>Marble Diagram Tool:</strong> Write a stream as marbles, pick an operator and
+            see the stream it produces
           </li>
           <li>
             <strong>Step-by-step Tutorials:</strong> Guided learning for all skill levels
@@ -39,7 +36,8 @@ const tutorialSteps: TutorialStep[] = [
         </ul>
         <div className="bg-blue-50 p-4 rounded-lg">
           <p className="text-blue-800 font-medium">
-            💡 Pro Tip: Start with the Marble Playground to get familiar with stream visualization!
+            💡 Pro Tip: Start with the Marble Diagram Tool to get familiar with stream
+            visualization!
           </p>
         </div>
       </div>
@@ -127,10 +125,10 @@ const tutorialSteps: TutorialStep[] = [
   },
 ];
 
-type ViewMode = 'tutorial' | 'playground' | 'reference';
+type ViewMode = 'tutorial' | 'marble' | 'reference';
 
 const VisualizationTool: React.FC = () => {
-  const [viewMode, setViewMode] = useState<ViewMode>('playground');
+  const [viewMode, setViewMode] = useState<ViewMode>('marble');
   const [currentTutorialStep, setCurrentTutorialStep] = useState(0);
 
   const renderTutorial = () => {
@@ -192,7 +190,7 @@ const VisualizationTool: React.FC = () => {
                 if (currentTutorialStep < tutorialSteps.length - 1) {
                   setCurrentTutorialStep(currentTutorialStep + 1);
                 } else {
-                  setViewMode('playground');
+                  setViewMode('marble');
                 }
               }}
               className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
@@ -289,8 +287,8 @@ const VisualizationTool: React.FC = () => {
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-gray-800 mb-4">RxJS Visualization Tool</h1>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-            Master reactive programming through interactive marble diagrams, live code execution,
-            and step-by-step tutorials designed for all skill levels.
+            Master reactive programming through interactive marble diagrams and step-by-step
+            tutorials designed for all skill levels.
           </p>
         </div>
 
@@ -308,14 +306,14 @@ const VisualizationTool: React.FC = () => {
               📚 Tutorial
             </button>
             <button
-              onClick={() => setViewMode('playground')}
+              onClick={() => setViewMode('marble')}
               className={`px-6 py-3 rounded-md text-sm font-medium transition-colors ${
-                viewMode === 'playground'
+                viewMode === 'marble'
                   ? 'bg-blue-600 text-white shadow-sm'
                   : 'text-gray-500 hover:text-gray-700'
               }`}
             >
-              🎮 Playground
+              🎮 Marble Diagram Tool
             </button>
             <button
               onClick={() => setViewMode('reference')}
@@ -332,7 +330,7 @@ const VisualizationTool: React.FC = () => {
 
         {/* Content */}
         {viewMode === 'tutorial' && renderTutorial()}
-        {viewMode === 'playground' && <IntegratedPlayground />}
+        {viewMode === 'marble' && <MarbleDiagramTool />}
         {viewMode === 'reference' && renderReference()}
       </div>
     </div>
diff --git a/src/hooks/usePlayground.ts b/src/hooks/usePlayground.ts
deleted file mode 100644
index bdceea5..0000000
--- a/src/hooks/usePlayground.ts
+++ /dev/null
@@ -1,459 +0,0 @@
-// src/hooks/usePlayground.ts
-// Custom hook for managing playground state and operations
-
-import { useState, useEffect, useCallback } from 'react';
-import type {
-  PlaygroundProblem,
-  Language,
-  DataStructureType,
-  ExecutionResult,
-  TestCaseResult,
-  SubmissionResult,
-  PerformanceAnalysis,
-  PlaygroundSession,
-  UserProgress,
-} from '../types/playground';
-
-interface UsePlaygroundOptions {
-  problemId: string;
-  initialLanguage: Language;
-  initialVisualization: DataStructureType;
-}
-
-interface UsePlaygroundReturn {
-  currentProblem: PlaygroundProblem | null;
-  isLoading: boolean;
-  error: string | null;
-  code: string;
-  language: Language;
-  setCode: (code: string) => void;
-  setLanguage: (language: Language) => void;
-  isExecuting: boolean;
-  executionResult: ExecutionResult | null;
-  testResults: TestCaseResult[];
-  performanceAnalysis: PerformanceAnalysis | null;
-  selectedVisualization: DataStructureType;
-  setSelectedVisualization: (type: DataStructureType) => void;
-  runCode: () => Promise<void>;
-  runTests: () => Promise<void>;
-  submitSolution: () => Promise<SubmissionResult | null>;
-  resetCode: () => void;
-  showHint: (hintId: string) => void;
-  session: PlaygroundSession | null;
-  progress: UserProgress | null;
-}
-
-// Mock data for development - in production this would come from an API
-const mockProblems: Record<string, PlaygroundProblem> = {
-  'two-sum': {
-    id: 'two-sum',
-    title: 'Two Sum',
-    description:
-      'Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.',
-    difficulty: 'Easy',
-    category: 'Algorithms',
-    dataStructure: 'Array',
-    examples: [
-      {
-        id: 'example-1',
-        input: [[2, 7, 11, 15], 9],
-        expectedOutput: [0, 1],
-        explanation: 'Because nums[0] + nums[1] == 9, we return [0, 1].',
-      },
-    ],
-    constraints: [
-      '2 <= nums.length <= 10^4',
-      '-10^9 <= nums[i] <= 10^9',
-      '-10^9 <= target <= 10^9',
-      'Only one valid answer exists.',
-    ],
-    starterCode: {
-      javascript: `function twoSum(nums, target) {
-    // Your solution here
-}`,
-      python: `def two_sum(nums, target):
-    # Your solution here
-    pass`,
-      java: `public int[] twoSum(int[] nums, int target) {
-    // Your solution here
-}`,
-    },
-    testCases: [
-      {
-        id: '1',
-        input: [[2, 7, 11, 15], 9],
-        expectedOutput: [0, 1],
-        isHidden: false,
-      },
-      {
-        id: '2',
-        input: [[3, 2, 4], 6],
-        expectedOutput: [1, 2],
-        isHidden: false,
-      },
-      {
-        id: '3',
-        input: [[3, 3], 6],
-        expectedOutput: [0, 1],
-        isHidden: true,
-      },
-    ],
-    hints: [
-      {
-        id: 'hint-1',
-        content: "Consider using a hash map to store numbers you've seen and their indices.",
-        order: 1,
-        penalty: 1,
-      },
-      {
-        id: 'hint-2',
-        content:
-          'First pass: store all numbers in hash map. Second pass: find complement for each number.',
-        order: 2,
-        penalty: 2,
-      },
-    ],
-    learningObjectives: [
-      'Understand hash table usage for O(1) lookups',
-      'Practice array iteration and index management',
-      'Learn about space-time tradeoffs',
-    ],
-    tags: ['Array', 'Hash Table'],
-    estimatedSolveTime: 15,
-    solution: {
-      code: {
-        javascript: `function twoSum(nums, target) {
-    const map = new Map();
-    for (let i = 0; i < nums.length; i++) {
-        const complement = target - nums[i];
-        if (map.has(complement)) {
-            return [map.get(complement), i];
-        }
-        map.set(nums[i], i);
-    }
-    return [];
-}`,
-      },
-      explanation:
-        'Using a hash map allows us to achieve O(n) time complexity by performing constant-time lookups for the complement of each number.',
-      timeComplexity: 'O(n)',
-      spaceComplexity: 'O(n)',
-      approaches: [
-        {
-          name: 'Hash Table',
-          description: 'Use a hash table to store seen numbers and their indices',
-          timeComplexity: 'O(n)',
-          spaceComplexity: 'O(n)',
-          code: {
-            javascript: `function twoSum(nums, target) {
-    const map = new Map();
-    for (let i = 0; i < nums.length; i++) {
-        const complement = target - nums[i];
-        if (map.has(complement)) {
-            return [map.get(complement), i];
-        }
-        map.set(nums[i], i);
-    }
-    return [];
-}`,
-          },
-        },
-      ],
-    },
-    visualizationOptions: ['Array', 'HashTable'],
-  },
-};
-
-const mockProgress: UserProgress = {
-  userId: 'user-1',
-  solvedProblems: [
-    {
-      problemId: 'two-sum',
-      bestScore: 95,
-      attempts: 2,
-      firstSolvedAt: new Date('2024-01-01'),
-      lastAttemptAt: new Date('2024-01-02'),
-      timeSpent: 25,
-      hintsUsed: 1,
-    },
-  ],
-  statistics: {
-    totalSolved: 15,
-    easySolved: 8,
-    mediumSolved: 5,
-    hardSolved: 2,
-    averageScore: 85.5,
-    totalTimeSpent: 7200, // seconds
-    currentStreak: 3,
-    longestStreak: 7,
-  },
-  achievements: [],
-  preferences: {
-    defaultLanguage: 'javascript',
-    theme: 'light',
-    autoSave: true,
-    showHints: true,
-    visualizationSpeed: 'normal',
-  },
-};
-
-export const usePlayground = ({
-  problemId,
-  initialLanguage,
-  initialVisualization,
-}: UsePlaygroundOptions): UsePlaygroundReturn => {
-  // State management
-  const [currentProblem, setCurrentProblem] = useState<PlaygroundProblem | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [code, setCode] = useState('');
-  const [language, setLanguage] = useState<Language>(initialLanguage);
-  const [isExecuting, setIsExecuting] = useState(false);
-  const [executionResult, setExecutionResult] = useState<ExecutionResult | null>(null);
-  const [testResults, setTestResults] = useState<TestCaseResult[]>([]);
-  const [performanceAnalysis, setPerformanceAnalysis] = useState<PerformanceAnalysis | null>(null);
-  const [selectedVisualization, setSelectedVisualization] =
-    useState<DataStructureType>(initialVisualization);
-  const [session, setSession] = useState<PlaygroundSession | null>(null);
-  const [progress] = useState<UserProgress>(mockProgress);
-
-  // Load problem data
-  useEffect(() => {
-    const loadProblem = async () => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        // Simulate API call
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        const problem = mockProblems[problemId];
-        if (!problem) {
-          throw new Error('Problem not found');
-        }
-
-        setCurrentProblem(problem);
-        setCode(problem.starterCode[language] || '');
-        setSession({
-          problemId,
-          startTime: new Date(),
-          code: {},
-          currentLanguage: language,
-          selectedVisualization: initialVisualization,
-          hintsUsed: [],
-          submissions: [],
-          isCompleted: false,
-          score: 0,
-          timeSpent: 0,
-        });
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load problem');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadProblem();
-  }, [problemId, language, initialVisualization]);
-
-  // Update code when language changes
-  useEffect(() => {
-    if (currentProblem && currentProblem.starterCode[language]) {
-      setCode(currentProblem.starterCode[language]);
-    }
-  }, [language, currentProblem]);
-
-  // Run code execution
-  const runCode = useCallback(async () => {
-    if (!currentProblem) return;
-
-    setIsExecuting(true);
-    setExecutionResult(null);
-
-    try {
-      // Simulate code execution
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      // Mock execution result
-      const result: ExecutionResult = {
-        success: true,
-        output: 'Code executed successfully',
-        executionTime: Math.random() * 100,
-        memoryUsage: Math.random() * 50,
-        operations: [],
-      };
-
-      setExecutionResult(result);
-    } catch (err) {
-      setExecutionResult({
-        success: false,
-        output: err instanceof Error ? err.message : 'Execution failed',
-        executionTime: 0,
-        memoryUsage: 0,
-        operations: [],
-      });
-    } finally {
-      setIsExecuting(false);
-    }
-  }, [currentProblem]);
-
-  // Run test cases
-  const runTests = useCallback(async () => {
-    if (!currentProblem) return;
-
-    setIsExecuting(true);
-    setTestResults([]);
-
-    try {
-      // Simulate test execution
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-
-      // Mock test results
-      const results: TestCaseResult[] = currentProblem.testCases.map((testCase) => ({
-        testCaseId: testCase.id,
-        passed: Math.random() > 0.3, // 70% pass rate for demo
-        executionResult: {
-          success: true,
-          output: [0, 1],
-          executionTime: Math.random() * 50,
-          memoryUsage: Math.random() * 20,
-          operations: [],
-        },
-        expectedOutput: testCase.expectedOutput,
-        actualOutput: [0, 1],
-        executionTime: Math.random() * 50,
-        memoryUsage: Math.random() * 20,
-      }));
-
-      setTestResults(results);
-
-      // Update performance analysis
-      const analysis: PerformanceAnalysis = {
-        timeComplexity: {
-          best: 'O(n)',
-          average: 'O(n)',
-          worst: 'O(n)',
-          explanation: 'Linear time complexity due to single pass through array',
-        },
-        spaceComplexity: {
-          best: 'O(1)',
-          average: 'O(n)',
-          worst: 'O(n)',
-          explanation: 'Space complexity depends on hash table size',
-        },
-        bottlenecks: [],
-        optimizationSuggestions: [
-          'Consider using more efficient data structures',
-          'Optimize nested loops if present',
-        ],
-        realWorldApplications: [
-          'Finding pairs in financial transactions',
-          'Matching records in databases',
-        ],
-      };
-
-      setPerformanceAnalysis(analysis);
-    } catch (err) {
-      console.error('Test execution failed:', err);
-    } finally {
-      setIsExecuting(false);
-    }
-  }, [currentProblem]);
-
-  // Submit solution
-  const submitSolution = useCallback(async (): Promise<SubmissionResult | null> => {
-    if (!currentProblem || !session) return null;
-
-    try {
-      // Simulate submission
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-
-      const passedTests = testResults.filter((r) => r.passed).length;
-      const totalTests = testResults.length;
-      const score = totalTests > 0 ? (passedTests / totalTests) * 100 : 0;
-
-      const result: SubmissionResult = {
-        problemId: currentProblem.id,
-        language,
-        code,
-        overallResult: score >= 80 ? 'accepted' : 'wrong_answer',
-        testCaseResults: testResults,
-        totalTests,
-        passedTests,
-        executionTime: executionResult?.executionTime || 0,
-        memoryUsage: executionResult?.memoryUsage || 0,
-        submittedAt: new Date(),
-        hintsUsed: session?.hintsUsed.length || 0,
-        score,
-      };
-
-      // Update session
-      setSession((prev) =>
-        prev
-          ? {
-              ...prev,
-              submissions: [...prev.submissions, result],
-              isCompleted: score >= 80,
-              score: Math.max(prev.score, score),
-            }
-          : null
-      );
-
-      return result;
-    } catch (err) {
-      console.error('Submission failed:', err);
-      return null;
-    }
-  }, [currentProblem, session, testResults, executionResult, code, language]);
-
-  // Reset code to starter
-  const resetCode = useCallback(() => {
-    if (currentProblem && currentProblem.starterCode[language]) {
-      setCode(currentProblem.starterCode[language]);
-    }
-  }, [currentProblem, language]);
-
-  // Show hint
-  const showHint = useCallback(
-    (hintId: string) => {
-      if (!session || !currentProblem) return;
-
-      // Find the hint order by id
-      const hint = currentProblem.hints.find((h) => h.id === hintId);
-      if (!hint) return;
-
-      setSession((prev) =>
-        prev
-          ? {
-              ...prev,
-              hintsUsed: [...prev.hintsUsed, hint.order],
-            }
-          : null
-      );
-    },
-    [session, currentProblem]
-  );
-
-  return {
-    currentProblem,
-    isLoading,
-    error,
-    code,
-    language,
-    setCode,
-    setLanguage,
-    isExecuting,
-    executionResult,
-    testResults,
-    performanceAnalysis,
-    selectedVisualization,
-    setSelectedVisualization,
-    runCode,
-    runTests,
-    submitSolution,
-    resetCode,
-    showHint,
-    session,
-    progress,
-  };
-};
diff --git a/src/shared/constants/moduleNavigation.ts b/src/shared/constants/moduleNavigation.ts
index f8d1b2c..a8b9c9f 100644
--- a/src/shared/constants/moduleNavigation.ts
+++ b/src/shared/constants/moduleNavigation.ts
@@ -288,7 +288,6 @@ const baseModuleNavigationSections: Record<string, SidebarItem[]> = {
       ],
     },
     { label: 'Complexity Analysis', path: '/datastructures?section=Complexity%20Analysis' },
-    { label: 'Interactive Playground', path: '/datastructures?section=playground' },
     { label: 'Real-World Applications', path: '/datastructures?section=Real-World%20Applications' },
     { label: 'Practice Problems', path: '/datastructures?section=Practice%20Problems' },
   ],
@@ -330,7 +329,6 @@ const baseModuleNavigationSections: Record<string, SidebarItem[]> = {
     { label: 'Algorithm Analysis', path: '/bigo?section=algorithm-analysis' },
     { label: 'Advanced Concepts', path: '/bigo?section=advanced-concepts' },
     { label: 'Practice Challenges', path: '/bigo?section=practice-challenges' },
-    { label: 'Interactive Playground', path: '/bigo?section=playground' },
     { label: 'Gamification Hub', path: '/bigo?section=gamification-hub' },
     { label: 'Real-World Applications', path: '/bigo?section=real-world-applications' },
   ],
diff --git a/src/types/playground.ts b/src/types/playground.ts
deleted file mode 100644
index c76b53a..0000000
--- a/src/types/playground.ts
+++ /dev/null
@@ -1,440 +0,0 @@
-// src/types/playground.ts
-// TypeScript interfaces for the Visual Algorithm Playground
-
-export type Difficulty = 'Easy' | 'Medium' | 'Hard';
-export type Language = 'javascript' | 'typescript' | 'python' | 'java' | 'cpp';
-export type ComplexityClass =
-  | 'O(1)'
-  | 'O(1) amortized'
-  | 'O(log n)'
-  | 'O(n)'
-  | 'O(n log n)'
-  | 'O(n²)'
-  | 'O(n³)'
-  | 'O(2^n)'
-  | 'O(n!)'
-  | 'O(h)'
-  | 'O(w)';
-export type DataStructureType =
-  | 'Array'
-  | 'LinkedList'
-  | 'Stack'
-  | 'Queue'
-  | 'HashTable'
-  | 'BinaryTree'
-  | 'BinarySearchTree'
-  | 'AVLTree'
-  | 'Heap'
-  | 'Graph';
-
-// Test case interface
-export interface TestCase {
-  id: string;
-  input: unknown[];
-  expectedOutput: unknown;
-  explanation?: string;
-  isHidden?: boolean; // Hidden test cases for judging
-  timeLimit?: number; // Time limit in milliseconds
-  memoryLimit?: number; // Memory limit in MB
-}
-
-// Hint system
-export interface Hint {
-  id: string;
-  content: string;
-  order: number;
-  penalty?: number; // Points deducted for using this hint
-  unlocksAfter?: number; // Minutes after problem start
-}
-
-// Solution interface
-export interface Solution {
-  code: { [key in Language]?: string };
-  explanation: string;
-  timeComplexity: ComplexityClass;
-  spaceComplexity: ComplexityClass;
-  approaches: SolutionApproach[];
-}
-
-export interface SolutionApproach {
-  name: string;
-  description: string;
-  timeComplexity: ComplexityClass;
-  spaceComplexity: ComplexityClass;
-  code: { [key in Language]?: string };
-  visualizationNotes?: string;
-}
-
-// Problem definition
-export interface PlaygroundProblem {
-  id: string;
-  title: string;
-  difficulty: Difficulty;
-  category: 'Data Structures' | 'Algorithms' | 'Big-O Analysis';
-  dataStructure?: DataStructureType;
-  description: string;
-  examples: TestCase[];
-  constraints: string[];
-  starterCode: { [key in Language]?: string };
-  testCases: TestCase[];
-  hints: Hint[];
-  solution: Solution;
-  visualizationOptions: DataStructureType[];
-  learningObjectives: string[];
-  tags: string[];
-  relatedProblems?: string[]; // IDs of related problems
-  prerequisites?: string[]; // Required knowledge/concepts
-  estimatedSolveTime: number; // Estimated time in minutes
-}
-
-// Code execution and instrumentation
-export interface InstrumentedOperation {
-  id: string;
-  type:
-    | 'access'
-    | 'insert'
-    | 'delete'
-    | 'search'
-    | 'swap'
-    | 'compare'
-    | 'traverse'
-    | 'function-call'
-    | 'function-return';
-  dataStructure: DataStructureType;
-  indices?: number[];
-  values?: unknown[];
-  timestamp: number;
-  lineNumber?: number;
-  functionName?: string;
-  complexity: {
-    time: ComplexityClass;
-    space: ComplexityClass;
-    explanation: string;
-  };
-  metadata?: Record<string, unknown>;
-}
-
-// Execution result
-export interface ExecutionResult {
-  success: boolean;
-  output: unknown;
-  executionTime: number; // in milliseconds
-  memoryUsage: number; // in MB
-  operations: InstrumentedOperation[];
-  error?: {
-    type: 'runtime' | 'timeout' | 'memory' | 'syntax';
-    message: string;
-    lineNumber?: number;
-    stackTrace?: string;
-  };
-}
-
-// Test case result
-export interface TestCaseResult {
-  testCaseId: string;
-  passed: boolean;
-  executionResult: ExecutionResult;
-  expectedOutput: unknown;
-  actualOutput: unknown;
-  executionTime: number;
-  memoryUsage: number;
-}
-
-// Submission result
-export interface SubmissionResult {
-  problemId: string;
-  userId?: string;
-  language: Language;
-  code: string;
-  overallResult:
-    | 'accepted'
-    | 'wrong_answer'
-    | 'time_limit_exceeded'
-    | 'memory_limit_exceeded'
-    | 'runtime_error'
-    | 'compilation_error';
-  testCaseResults: TestCaseResult[];
-  totalTests: number;
-  passedTests: number;
-  executionTime: number; // Total execution time
-  memoryUsage: number; // Peak memory usage
-  submittedAt: Date;
-  hintsUsed: number;
-  score: number; // Based on correctness, time, hints used, etc.
-}
-
-// Performance analysis
-export interface PerformanceAnalysis {
-  timeComplexity: {
-    best: ComplexityClass;
-    average: ComplexityClass;
-    worst: ComplexityClass;
-    explanation: string;
-  };
-  spaceComplexity: {
-    best: ComplexityClass;
-    average: ComplexityClass;
-    worst: ComplexityClass;
-    explanation: string;
-  };
-  bottlenecks: string[];
-  optimizationSuggestions: string[];
-  realWorldApplications: string[];
-}
-
-// Visualization mapping
-export interface VisualizationMapping {
-  problemId: string;
-  dataStructure: DataStructureType;
-  visualizationComponent: string; // Component name/path
-  operationMappings: {
-    [operationType: string]: {
-      method: string; // Method name on visualization component
-      parameters: string[]; // Parameter mapping
-      animation?: {
-        duration: number;
-        easing: string;
-      };
-    };
-  };
-  stateMappings: {
-    [stateProperty: string]: string; // Maps execution state to visualization props
-  };
-}
-
-// Playground session state
-export interface PlaygroundSession {
-  problemId: string;
-  userId?: string;
-  startTime: Date;
-  endTime?: Date;
-  code: { [key in Language]?: string };
-  currentLanguage: Language;
-  selectedVisualization: DataStructureType;
-  hintsUsed: number[];
-  submissions: SubmissionResult[];
-  isCompleted: boolean;
-  score: number;
-  timeSpent: number; // in minutes
-}
-
-// User progress and statistics
-export interface UserProgress {
-  userId: string;
-  solvedProblems: {
-    problemId: string;
-    bestScore: number;
-    attempts: number;
-    firstSolvedAt: Date;
-    lastAttemptAt: Date;
-    timeSpent: number;
-    hintsUsed: number;
-  }[];
-  statistics: {
-    totalSolved: number;
-    easySolved: number;
-    mediumSolved: number;
-    hardSolved: number;
-    averageScore: number;
-    totalTimeSpent: number;
-    currentStreak: number;
-    longestStreak: number;
-    favoriteDataStructure?: DataStructureType;
-    weakestArea?: string;
-  };
-  achievements: Achievement[];
-  preferences: {
-    defaultLanguage: Language;
-    theme: 'light';
-    autoSave: boolean;
-    showHints: boolean;
-    visualizationSpeed: 'slow' | 'normal' | 'fast';
-  };
-}
-
-// Achievement system
-export interface Achievement {
-  id: string;
-  name: string;
-  description: string;
-  icon: string;
-  unlockedAt: Date;
-  rarity: 'common' | 'rare' | 'epic' | 'legendary';
-  category: 'solving' | 'performance' | 'learning' | 'consistency';
-  progress?: {
-    current: number;
-    target: number;
-  };
-}
-
-// Scoring and Achievements
-export interface Score {
-  totalPoints: number;
-  level: number;
-  experiencePoints: number;
-  experienceToNextLevel: number;
-  achievements: Achievement[];
-  stats: {
-    problemsSolved: number;
-    debugSessions: number;
-    timeSpentDebugging: number;
-    averageExecutionTime: number;
-    bestPerformanceScore: number;
-  };
-}
-
-export interface ProblemScore {
-  problemId: string;
-  points: number;
-  timeBonus: number;
-  efficiencyBonus: number;
-  completedAt: Date;
-  attempts: number;
-  bestTime: number;
-  bestComplexity: string;
-}
-export interface PlaygroundConfig {
-  execution: {
-    timeLimit: number; // Default time limit in ms
-    memoryLimit: number; // Default memory limit in MB
-    maxRecursionDepth: number;
-    allowedLibraries: string[];
-  };
-  visualization: {
-    defaultSpeed: number;
-    maxOperationsPerSecond: number;
-    animationDuration: number;
-  };
-  scoring: {
-    basePoints: number;
-    timeBonus: number;
-    hintPenalty: number;
-    difficultyMultiplier: {
-      Easy: number;
-      Medium: number;
-      Hard: number;
-    };
-  };
-  ui: {
-    maxHintsPerProblem: number;
-    autoSaveInterval: number; // in seconds
-    maxCodeLength: number;
-  };
-}
-
-// Error types for better error handling
-export class PlaygroundError extends Error {
-  type: 'validation' | 'execution' | 'timeout' | 'security';
-  details?: unknown;
-
-  constructor(
-    message: string,
-    type: 'validation' | 'execution' | 'timeout' | 'security',
-    details?: unknown
-  ) {
-    super(message);
-    this.name = 'PlaygroundError';
-    this.type = type;
-    this.details = details;
-  }
-}
-
-// Hook return types
-export interface UsePlaygroundReturn {
-  // Problem state
-  currentProblem: PlaygroundProblem | null;
-  isLoading: boolean;
-  error: string | null;
-
-  // Code state
-  code: string;
-  language: Language;
-  setCode: (code: string) => void;
-  setLanguage: (language: Language) => void;
-
-  // Execution state
-  isExecuting: boolean;
-  executionResult: ExecutionResult | null;
-  testResults: TestCaseResult[];
-  performanceAnalysis: PerformanceAnalysis | null;
-
-  // Visualization state
-  selectedVisualization: DataStructureType;
-  setSelectedVisualization: (type: DataStructureType) => void;
-  visualizationData: unknown;
-
-  // Actions
-  runCode: () => Promise<void>;
-  runTests: () => Promise<void>;
-  submitSolution: () => Promise<SubmissionResult>;
-  resetCode: () => void;
-  showHint: (hintId: string) => void;
-
-  // Progress
-  session: PlaygroundSession;
-  progress: UserProgress;
-}
-
-// Component prop types
-export interface PlaygroundProps {
-  problemId?: string;
-  initialLanguage?: Language;
-  initialVisualization?: DataStructureType;
-  onProblemChange?: (problem: PlaygroundProblem) => void;
-  onSubmission?: (result: SubmissionResult) => void;
-  className?: string;
-}
-
-export interface ProblemDisplayProps {
-  problem: PlaygroundProblem;
-  showHints?: boolean;
-  hintsUsed?: number[];
-  onHintClick?: (hintId: string) => void;
-  className?: string;
-}
-
-export interface CodeEditorProps {
-  code: string;
-  language: Language;
-  onChange: (code: string) => void;
-  onLanguageChange: (language: Language) => void;
-  starterCode?: { [key in Language]?: string };
-  readOnly?: boolean;
-  className?: string;
-}
-
-export interface VisualizationSelectorProps {
-  options: DataStructureType[];
-  selected: DataStructureType;
-  onSelect: (type: DataStructureType) => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-export interface ExecutionEngineProps {
-  code: string;
-  language: Language;
-  testCases: TestCase[];
-  onResult: (result: ExecutionResult) => void;
-  onOperation: (operation: InstrumentedOperation) => void;
-  timeLimit?: number;
-  memoryLimit?: number;
-  className?: string;
-}
-
-export interface PerformanceAnalyzerProps {
-  operations: InstrumentedOperation[];
-  testResults: TestCaseResult[];
-  problem: PlaygroundProblem;
-  onAnalysis: (analysis: PerformanceAnalysis) => void;
-  className?: string;
-}
-
-export interface TestRunnerProps {
-  testCases: TestCase[];
-  results: TestCaseResult[];
-  isRunning: boolean;
-  onRun: () => void;
-  onResult: (results: TestCaseResult[]) => void;
-  className?: string;
-}
diff --git a/src/utils/memoryMonitor.ts b/src/utils/memoryMonitor.ts
deleted file mode 100644
index 1dee694..0000000
--- a/src/utils/memoryMonitor.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// Memory monitoring utilities
-export interface MemoryStats {
-  usedJSHeapSize: number;
-  totalJSHeapSize: number;
-  jsHeapSizeLimit: number;
-}
-
-export class MemoryMonitor {
-  private static instance: MemoryMonitor;
-  private monitoring = false;
-
-  private constructor() {}
-
-  static getInstance(): MemoryMonitor {
-    if (!MemoryMonitor.instance) {
-      MemoryMonitor.instance = new MemoryMonitor();
-    }
-    return MemoryMonitor.instance;
-  }
-
-  startMonitoring(): void {
-    if (this.monitoring) return;
-    this.monitoring = true;
-    console.log('🧠 Memory monitoring started');
-  }
-
-  stopMonitoring(): void {
-    if (!this.monitoring) return;
-    this.monitoring = false;
-    console.log('🧠 Memory monitoring stopped');
-  }
-
-  getBrowserMemoryInfo(): {
-    usedJSHeapSize: number;
-    totalJSHeapSize: number;
-    jsHeapSizeLimit: number;
-  } | null {
-    if ('memory' in performance) {
-      return (
-        performance as {
-          memory: { usedJSHeapSize: number; totalJSHeapSize: number; jsHeapSizeLimit: number };
-        }
-      ).memory;
-    }
-    return null;
-  }
-
-  logBrowserMemory(): void {
-    const memInfo = this.getBrowserMemoryInfo();
-    if (memInfo && this.monitoring) {
-      console.group('🌐 Browser Memory Info');
-      console.log(`Used JS Heap: ${(memInfo.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB`);
-      console.log(`Total JS Heap: ${(memInfo.totalJSHeapSize / 1024 / 1024).toFixed(2)} MB`);
-      console.log(`Heap Limit: ${(memInfo.jsHeapSizeLimit / 1024 / 1024).toFixed(2)} MB`);
-      console.groupEnd();
-    }
-  }
-}
-
-// Performance monitoring utilities
-export class PerformanceMonitor {
-  private static instance: PerformanceMonitor;
-  private frameCount = 0;
-  private lastTime = 0;
-  private fps = 0;
-  private monitoring = false;
-
-  private constructor() {}
-
-  static getInstance(): PerformanceMonitor {
-    if (!PerformanceMonitor.instance) {
-      PerformanceMonitor.instance = new PerformanceMonitor();
-    }
-    return PerformanceMonitor.instance;
-  }
-
-  startMonitoring(): void {
-    if (this.monitoring) return;
-
-    this.monitoring = true;
-    this.frameCount = 0;
-    this.lastTime = performance.now();
-    console.log('⚡ Performance monitoring started');
-  }
-
-  stopMonitoring(): void {
-    if (!this.monitoring) return;
-
-    this.monitoring = false;
-    console.log('⚡ Performance monitoring stopped');
-  }
-
-  updateFrame(): void {
-    if (!this.monitoring) return;
-
-    this.frameCount++;
-    const currentTime = performance.now();
-
-    if (currentTime - this.lastTime >= 1000) {
-      // Update every second
-      this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastTime));
-      this.frameCount = 0;
-      this.lastTime = currentTime;
-
-      if (this.fps < 30) {
-        console.warn(`🐌 Low FPS detected: ${this.fps}`);
-      } else if (this.monitoring) {
-        console.log(`🎮 FPS: ${this.fps}`);
-      }
-    }
-  }
-
-  getFPS(): number {
-    return this.fps;
-  }
-
-  // Measure function execution time
-  measureExecutionTime<T>(fn: () => T, label: string): T {
-    const start = performance.now();
-    const result = fn();
-    const end = performance.now();
-
-    if (this.monitoring) {
-      console.log(`⏱️ ${label}: ${(end - start).toFixed(2)}ms`);
-    }
-
-    return result;
-  }
-}
-
-// Export singleton instances
-export const memoryMonitor = MemoryMonitor.getInstance();
-export const performanceMonitor = PerformanceMonitor.getInstance();
diff --git a/src/utils/scoring.ts b/src/utils/scoring.ts
deleted file mode 100644
index 8329983..0000000
--- a/src/utils/scoring.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import type { Score, Achievement, SubmissionResult, PlaygroundProblem } from '../types/playground';
-
-// Scoring constants
-const SCORING_CONFIG = {
-  basePoints: 100,
-  timeBonus: 50,
-  hintPenalty: 10,
-  difficultyMultiplier: {
-    Easy: 1,
-    Medium: 1.5,
-    Hard: 2,
-  },
-  levelExperienceBase: 100,
-  levelExperienceMultiplier: 1.2,
-};
-
-// Achievement definitions
-export const ACHIEVEMENTS: Omit<Achievement, 'unlockedAt'>[] = [
-  {
-    id: 'first_problem',
-    name: 'First Steps',
-    description: 'Solve your first problem',
-    icon: '🎯',
-    rarity: 'common',
-    category: 'solving',
-  },
-  {
-    id: 'debug_master',
-    name: 'Debug Master',
-    description: 'Complete 10 debug sessions',
-    icon: '🔍',
-    rarity: 'rare',
-    category: 'performance',
-  },
-  {
-    id: 'speed_demon',
-    name: 'Speed Demon',
-    description: 'Solve a problem in under 30 seconds',
-    icon: '⚡',
-    rarity: 'epic',
-    category: 'performance',
-  },
-  {
-    id: 'perfectionist',
-    name: 'Perfectionist',
-    description: 'Solve a problem with 100% test cases on first try',
-    icon: '💎',
-    rarity: 'legendary',
-    category: 'solving',
-  },
-  {
-    id: 'consistent_learner',
-    name: 'Consistent Learner',
-    description: 'Solve problems for 7 consecutive days',
-    icon: '📚',
-    rarity: 'rare',
-    category: 'consistency',
-  },
-  {
-    id: 'algorithm_expert',
-    name: 'Algorithm Expert',
-    description: 'Solve 50 problems',
-    icon: '🧠',
-    rarity: 'epic',
-    category: 'solving',
-  },
-];
-
-export class ScoringSystem {
-  private score: Score;
-
-  constructor(initialScore?: Partial<Score>) {
-    this.score = {
-      totalPoints: 0,
-      level: 1,
-      experiencePoints: 0,
-      experienceToNextLevel: SCORING_CONFIG.levelExperienceBase,
-      achievements: [],
-      stats: {
-        problemsSolved: 0,
-        debugSessions: 0,
-        timeSpentDebugging: 0,
-        averageExecutionTime: 0,
-        bestPerformanceScore: 0,
-      },
-      ...initialScore,
-    };
-  }
-
-  // Calculate score for a submission
-  calculateSubmissionScore(
-    result: SubmissionResult,
-    problem: PlaygroundProblem,
-    timeSpent: number,
-    hintsUsed: number
-  ): number {
-    const { difficulty } = problem;
-    const { passedTests, totalTests } = result;
-
-    // Base score
-    let score = SCORING_CONFIG.basePoints;
-
-    // Difficulty multiplier
-    score *= SCORING_CONFIG.difficultyMultiplier[difficulty];
-
-    // Test case accuracy bonus
-    const accuracy = passedTests / totalTests;
-    score *= accuracy;
-
-    // Time bonus (faster = more points)
-    const timeBonus = Math.max(0, SCORING_CONFIG.timeBonus - timeSpent / 10);
-    score += timeBonus;
-
-    // Hint penalty
-    score -= hintsUsed * SCORING_CONFIG.hintPenalty;
-
-    return Math.max(0, Math.round(score));
-  }
-
-  // Add experience points and check for level up
-  addExperience(points: number): { leveledUp: boolean; newLevel?: number } {
-    this.score.experiencePoints += points;
-
-    let leveledUp = false;
-    let newLevel = this.score.level;
-
-    while (this.score.experiencePoints >= this.score.experienceToNextLevel) {
-      this.score.experiencePoints -= this.score.experienceToNextLevel;
-      this.score.level++;
-      this.score.experienceToNextLevel = Math.round(
-        SCORING_CONFIG.levelExperienceBase *
-          Math.pow(SCORING_CONFIG.levelExperienceMultiplier, this.score.level - 1)
-      );
-      leveledUp = true;
-      newLevel = this.score.level;
-    }
-
-    return { leveledUp, newLevel };
-  }
-
-  // Process a successful submission
-  processSubmission(
-    result: SubmissionResult,
-    problem: PlaygroundProblem,
-    timeSpent: number,
-    hintsUsed: number
-  ): {
-    pointsEarned: number;
-    experienceEarned: number;
-    newAchievements: Achievement[];
-    leveledUp: boolean;
-    newLevel?: number;
-  } {
-    const pointsEarned = this.calculateSubmissionScore(result, problem, timeSpent, hintsUsed);
-    const experienceEarned = Math.round(pointsEarned * 0.1); // 10% of points as XP
-
-    this.score.totalPoints += pointsEarned;
-    this.score.stats.problemsSolved++;
-
-    // Update stats
-    const executionTime = result.executionTime;
-    this.score.stats.averageExecutionTime =
-      (this.score.stats.averageExecutionTime * (this.score.stats.problemsSolved - 1) +
-        executionTime) /
-      this.score.stats.problemsSolved;
-
-    if (pointsEarned > this.score.stats.bestPerformanceScore) {
-      this.score.stats.bestPerformanceScore = pointsEarned;
-    }
-
-    // Level up
-    const { leveledUp, newLevel } = this.addExperience(experienceEarned);
-
-    // Check for achievements
-    const newAchievements = this.checkAchievements(result, timeSpent, hintsUsed);
-
-    return {
-      pointsEarned,
-      experienceEarned,
-      newAchievements,
-      leveledUp,
-      newLevel,
-    };
-  }
-
-  // Record debug session
-  recordDebugSession(timeSpent: number): void {
-    this.score.stats.debugSessions++;
-    this.score.stats.timeSpentDebugging += timeSpent;
-  }
-
-  // Check for new achievements
-  private checkAchievements(
-    result: SubmissionResult,
-    timeSpent: number,
-    hintsUsed: number
-  ): Achievement[] {
-    const newAchievements: Achievement[] = [];
-    const unlockedIds = new Set(this.score.achievements.map((a) => a.id));
-
-    // First problem solved
-    if (this.score.stats.problemsSolved === 1 && !unlockedIds.has('first_problem')) {
-      newAchievements.push({
-        ...ACHIEVEMENTS.find((a) => a.id === 'first_problem')!,
-        unlockedAt: new Date(),
-      });
-    }
-
-    // Debug master
-    if (this.score.stats.debugSessions >= 10 && !unlockedIds.has('debug_master')) {
-      newAchievements.push({
-        ...ACHIEVEMENTS.find((a) => a.id === 'debug_master')!,
-        unlockedAt: new Date(),
-      });
-    }
-
-    // Speed demon
-    if (timeSpent < 30 && !unlockedIds.has('speed_demon')) {
-      newAchievements.push({
-        ...ACHIEVEMENTS.find((a) => a.id === 'speed_demon')!,
-        unlockedAt: new Date(),
-      });
-    }
-
-    // Perfectionist
-    if (
-      result.passedTests === result.totalTests &&
-      hintsUsed === 0 &&
-      !unlockedIds.has('perfectionist')
-    ) {
-      newAchievements.push({
-        ...ACHIEVEMENTS.find((a) => a.id === 'perfectionist')!,
-        unlockedAt: new Date(),
-      });
-    }
-
-    // Algorithm expert
-    if (this.score.stats.problemsSolved >= 50 && !unlockedIds.has('algorithm_expert')) {
-      newAchievements.push({
-        ...ACHIEVEMENTS.find((a) => a.id === 'algorithm_expert')!,
-        unlockedAt: new Date(),
-      });
-    }
-
-    // Add to score
-    this.score.achievements.push(...newAchievements);
-
-    return newAchievements;
-  }
-
-  // Get current score
-  getScore(): Score {
-    return { ...this.score };
-  }
-
-  // Get recent achievements (last 5)
-  getRecentAchievements(): Achievement[] {
-    return this.score.achievements
-      .sort((a, b) => b.unlockedAt.getTime() - a.unlockedAt.getTime())
-      .slice(0, 5);
-  }
-
-  // Save score to localStorage
-  saveToStorage(): void {
-    try {
-      localStorage.setItem('playground_score', JSON.stringify(this.score));
-    } catch (error) {
-      console.warn('Failed to save score to localStorage:', error);
-    }
-  }
-
-  // Load score from localStorage
-  loadFromStorage(): void {
-    try {
-      const saved = localStorage.getItem('playground_score');
-      if (saved) {
-        this.score = { ...this.score, ...JSON.parse(saved) };
-      }
-    } catch (error) {
-      console.warn('Failed to load score from localStorage:', error);
-    }
-  }
-}
-
-// Singleton instance
-let scoringSystemInstance: ScoringSystem | null = null;
-
-export const getScoringSystem = (): ScoringSystem => {
-  if (!scoringSystemInstance) {
-    scoringSystemInstance = new ScoringSystem();
-    scoringSystemInstance.loadFromStorage();
-  }
-  return scoringSystemInstance;
-};
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 2d5a13f..aabae35 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -124,14 +124,6 @@ export const theme = {
       border: 'slate-200',
       shadow: 'slate-200',
     },
-    playground: {
-      primary: 'blue',
-      secondary: 'indigo',
-      accent: 'purple',
-      gradient: 'from-blue-50 via-indigo-50 to-purple-50',
-      border: 'blue-200',
-      shadow: 'blue-200',
-    },
     database: {
       primary: 'teal',
       secondary: 'cyan',