AlgoReel

Your code, played back like a movie — every stack push, every queue pop, every matrix traversal, frame by frame.

AlgoReel is a VS Code extension and Python tracer engine that turns Python algorithm execution into interactive visual replays.

Whether you're solving LeetCode questions, teaching Data Structures & Algorithms, or debugging recursive call trees, AlgoReel renders runtime memory and data structure mutations step-by-step.

✨ Key Features

• 🔬 AST & Runtime Role Inference:

  • Automatically identifies variables as Arrays, 2D Matrices, Stacks, Queues, Binary Trees, or Graphs.
  • Pass-2 runtime confirmation boosts confidence scores based on observed execution behavior.

• 🎨 Visual Structure Renderers:

  • 📊 Array: Indexed element boxes with value diff animation and string/list formatting.
  • 🧱 2D Matrix / Grid: Full 2D grid visualization with row/column header indices (r0, c0) for matrix DP & grid algorithms.
  • 📚 Stack: Vertical column with dynamic TOP pointer and push/pop operation badges.
  • 🚥 Queue: Horizontal FIFO queue with FRONT and REAR markers, directional flow arrow, and enqueue/dequeue badges.
  • 🌲 Tree: Automatic node-link tree visualization for TreeNode objects (left, right, val).
  • 🕸️ Graph: Circular node-link graph diagram for adjacency lists with directed/undirected edges.

• 🎞️ Reel Timeline & Scrubber:

  • Transport controls: Play (▶), Pause (⏸), Step Back (⏪), Step Forward (⏩), Jump to Start (⏮), Jump to End (⏭).
  • Playback speed toggling (0.5x, 1x, 2x, 4x).
  • Interactive timeline scrubber with progress bar and step counter.
  • Full keyboard shortcuts (Left / Right arrows to step, Space to toggle play, Home / End to jump).

• 🔍 Pattern Spotlight:

  • Automatic detection of algorithm idioms: Sliding Window, Two-Pointer (Converging / Fast-Slow), Recursion Tree, and BFS / DFS Traversal.

🚀 Quick Start

1. Open any Python algorithm file in VS Code.
2. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) and run:

   AlgoReel: Visualize This File
   

   (Or click the ▶ Play icon in the editor title bar menu).
3. When prompted for entry point function arguments, press Enter to execute the main block, or type a custom function invocation (e.g. three_sum([-1, 0, 1, 2, -1, -4])).
4. The visual replay panel opens side-by-side with your Python code!

🧪 LeetCode Benchmark Suite (test_real/)

AlgoReel includes a real-world test suite covering top LeetCode DSA topics:

Run the test suite locally:

python -m pytest tests/ -v

⚙️ Extension Settings

🛠️ Building & Packaging

To build and package AlgoReel for VS Code:

# Production Build
npm run build

# Package into VSIX
npx @vscode/vsce package --no-dependencies

# Force Install Local VSIX
code --install-extension algoreel-0.1.0.vsix --force

📄 License

MIT