feat: Add integrated console and error reporting to CodeEmbed

[Sumit6307]

Summary

This PR adds an integrated Console Panel to the interactive CodeEmbed component. It allows users to see console.log outputs, warnings, and runtime errors (such as syntax errors or missing arguments) directly within the website's interface, without needing to open the browser's developer tools.

Motivation

Currently, if a user—especially a beginner learning p5.js—makes a mistake in an interactive sketch (e.g., calling rect() without arguments), the sketch fails silently. This lack of feedback creates a significant barrier to learning. This feature closes the feedback loop by surfacing errors and logs immediately, making the documentation more interactive and helpful.

Implementation Details

1. New Component (ConsolePanel.jsx): Created a dedicated component to display a scrollable list of logs. It supports log, info, warn, and error levels with distinct visual styling (e.g., red background for errors).
2. Sandbox Bridge (frame.tsx): Modified the iframe injection logic to include a proxy script. This script intercepts console.* methods and global window.onerror / onunhandledrejection events inside the sandbox and forwards them to the parent window via postMessage.
3. State Management (index.jsx): Updated the main CodeEmbed component to listen for these console messages, store them in local state, and conditionally render the ConsolePanel. Also added a toggle button to the UI to show/hide the console.

Test Plan

I have verified the changes manually with the following scenarios:

1. Standard Logging: typed console.log("hello p5") in an editor -> confirmed the message appears in the panel.
2. Runtime Errors: typed rect() (missing arguments) -> confirmed a red error message appears and the console panel automatically expands to alert the user.
3. Syntax Errors: tested invalid syntax to ensure the error reporting catches execution failures.
4. UI Controls: verified that the "Clear" and "Reset" buttons correctly empty the log history.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have verified that the changes work as expected

[Sumit6307]

Summary

This PR adds an integrated Console Panel to the interactive CodeEmbed component. It allows users to see console.log outputs, warnings, and runtime errors (such as syntax errors or missing arguments) directly within the website's interface, without needing to open the browser's developer tools.

Motivation

Currently, if a user—especially a beginner learning p5.js—makes a mistake in an interactive sketch (e.g., calling rect() without arguments), the sketch fails silently. This lack of feedback creates a significant barrier to learning. This feature closes the feedback loop by surfacing errors and logs immediately, making the documentation more interactive and helpful.

Implementation Details

1. New Component (ConsolePanel.jsx): Created a dedicated component to display a scrollable list of logs. It supports log, info, warn, and error levels with distinct visual styling (e.g., red background for errors).
2. Sandbox Bridge (frame.tsx): Modified the iframe injection logic to include a proxy script. This script intercepts console.* methods and global window.onerror / onunhandledrejection events inside the sandbox and forwards them to the parent window via postMessage.
3. State Management (index.jsx): Updated the main CodeEmbed component to listen for these console messages, store them in local state, and conditionally render the ConsolePanel. Also added a toggle button to the UI to show/hide the console.

Test Plan

I have verified the changes manually with the following scenarios:

1. Standard Logging: typed console.log("hello p5") in an editor -> confirmed the message appears in the panel.
2. Runtime Errors: typed rect() (missing arguments) -> confirmed a red error message appears and the console panel automatically expands to alert the user.
3. Syntax Errors: tested invalid syntax to ensure the error reporting catches execution failures.
4. UI Controls: verified that the "Clear" and "Reset" buttons correctly empty the log history.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have verified that the changes work as expected

@ksen0 Plz Review and Merge this PR

[Sumit6307]

@ksen0 Plz Review and Merge this PR