Stack & Heap Simulator

🧠 Stack & Heap Simulator brings one of computer science's most important concepts directly into your Firefox sidebar — an interactive, colour-coded visualisation of how programs use memory, updated live as you click.

🔍 WHAT IT DOES: A persistent Firefox sidebar lets you build up a real memory picture step by step: push function call frames onto the stack, allocate blocks on the heap, connect them with pointer variables, then free blocks and pop frames — and watch exactly what goes wrong when you don't do it in the right order.

📐 TWO-COLUMN CANVAS: 🟢 Left column — the Stack. Grows downward (high → low addresses). Each function call adds a named frame containing local variables and a return address. The active frame glows purple; the SP (stack pointer) is marked with a dashed line. 🔵 Right column — the Heap. Grows upward (low → high addresses). Each malloc() adds a blue block with its ID, size, and address. New blocks appear above older ones, correctly reflecting heap growth direction. 🟡 Yellow Bézier arrows connect stack pointer variables to their heap blocks across the gap between columns.

🔴 MEMORY ERRORS — MADE VISIBLE: Unlike reading about memory bugs in a book, this simulator shows them in colour: • Dangling pointer — free a heap block while a pointer still references it. The arrow and variable turn red immediately, labelled DANGLING. • Memory leak — pop a stack frame without freeing its heap blocks. Orphaned blocks turn orange, labelled LEAKED. • Heap fragmentation — allocate several blocks, free alternating ones, and see the live (blue) and free (gray dashed) blocks interleaved in the heap column.

📖 FIVE GUIDED SCENARIOS: Click any scenario card in the Scenarios tab to watch an auto-play walkthrough at 650 ms per step: • Basic Allocation — the fundamental stack-to-heap relationship with a pointer. • Function Call Stack — push main() → foo() → bar() with local variables, then pop them LIFO. • Memory Leak — return from a function without freeing heap memory. • Dangling Pointer — free a block while a stack pointer still holds its address. • Heap Fragmentation — allocate four blocks, free the alternating ones, see the gaps.

📚 BUILT-IN REFERENCE (Explain tab): Four compact concept rows — Stack, Heap, Pointers, and Call Frames — give the essential theory in a format that fits entirely on screen without scrolling, followed by a memory layout diagram showing high-address stack base, stack growth direction, free space, heap growth direction, and low-address heap base.

🔒 SECURITY-FIRST ARCHITECTURE: ✅ No data collection — explicitly declared in manifest.json via data_collection_permissions: ["none"]. ✅ No telemetry — no analytics, no external pings, zero network requests of any kind. ✅ No eval() — safe, audited code meeting Firefox extension standards. ✅ No innerHTML — all rendering via the Canvas 2D API; all DOM updates via textContent. ✅ No permissions — the permissions array in manifest.json is completely empty. ✅ Input validation on every state mutation before it touches the canvas. ✅ Content Security Policy locked to script-src 'self'.

🎯 PERFECT FOR: • Students in systems programming, OS, or C/C++ courses who want a visual complement to lectures. • Developers debugging memory errors or learning allocator behavior. • CS educators who want an interactive demo to show alongside a whiteboard. • Anyone who has ever wondered what malloc(), free(), stack frames, and pointers actually look like at runtime.

⚙️ TECHNICAL: • Firefox 140.0+ desktop only · Manifest v2 · Sidebar panel. • Zero network requests · Zero storage · No background scripts · No account required. • Runtime Execution RAM Footprint: ~42 KB (core scripts: manifest.json + panel.html + styles.css + script.js). • Total Extension Download/Install Size: ~ 96KB (including README.md). • No permissions required — manifest.json permissions array is empty.

🔒 100% Client-Side · No Data Collection · No Tracking · No Account.

🧠 Stack & Heap Simulator: See the memory. Understand the machine.