Stop function final reviwe

Browser_IDE/editorMain.js

@@ -809,15 +809,18 @@ async function pauseProgram(){
     }
 }
 
-async function stopProgram(){
+async function stopProgram() {
     try {
         await executionEnviroment.stopProgram();
-    }
-    catch (err) {
-        displayEditorNotification("Failed to stop program!", NotificationIcons.ERROR);
+        await executionEnviroment.cleanEnvironment(); // Clear resources or locks
+        displayEditorNotification("Program has been stopped successfully.", NotificationIcons.INFO);
+    } catch (err) {
+        displayEditorNotification("Failed to stop program!<br/>" + err.toString(), NotificationIcons.ERROR);
     }
 }
 
+
+
 async function restartProgram(){
     clearErrorLines();
 

Browser_IDE/executionEnvironment.js

@@ -312,4 +312,94 @@ class ExecutionEnvironment extends EventTarget{
         return iframe;
     }
 
-}
+}
+
+document.getElementById("stopProgram").addEventListener("click", () => {
+    terminateProgram();
+});
+
+document.getElementById("collapsedStopProgram").addEventListener("click", () => {
+    terminateProgram();
+});
+
+// Attach event listeners for Stop buttons
+initializeEventListeners();
+
+function initializeEventListeners() {
+    const stopButton = document.getElementById("stopProgram");
+    const collapsedStopButton = document.getElementById("collapsedStopProgram");
+
+    stopButton.addEventListener("click", handleStopProgram);
+    collapsedStopButton.addEventListener("click", handleStopProgram);
+}
+
+/**
+ * Handles the stop button click event
+ */
+function handleStopProgram() {
+    if (!isProgramRunning()) {
+        showNotification("No program is currently running.", "warning");
+        return;
+    }
+
+    try {
+        terminateProgram();
+        showNotification("Program stopped successfully.", "info");
+    } catch (error) {
+        console.error("Error while stopping the program:", error);
+        showNotification("Failed to stop the program. Please try again.", "error");
+    }
+}
+
+/**
+ * Terminates the currently running program
+ */
+function terminateProgram() {
+    try {
+        // Logic to terminate the running process
+        runtimeManager.terminate();
+        updateRuntimeButtons(false); // Disable runtime buttons after stopping
+    } catch (error) {
+        throw new Error("Program termination failed: " + error.message);
+    }
+}
+
+/**
+ * Updates the runtime control buttons based on the program state
+ * @param {boolean} isRunning - Whether the program is currently running
+ */
+function updateRuntimeButtons(isRunning) {
+    toggleButtonState("stopProgram", isRunning);
+    toggleButtonState("collapsedStopProgram", isRunning);
+}
+
+/**
+ * Toggles the disabled state of a button
+ * @param {string} buttonId - The ID of the button to toggle
+ * @param {boolean} isEnabled - Whether the button should be enabled
+ */
+function toggleButtonState(buttonId, isEnabled) {
+    const button = document.getElementById(buttonId);
+    if (button) {
+        button.disabled = !isEnabled;
+    }
+}
+
+/**
+ * Checks if a program is currently running
+ * @returns {boolean} - True if a program is running, false otherwise
+ */
+function isProgramRunning() {
+    // Replace this with the actual logic to check program state
+    return runtimeManager.isRunning(); 
+}
+
+/**
+ * Displays a notification to the user
+ * @param {string} message - The message to display
+ * @param {string} type - The type of the notification ("info", "warning", "error")
+ */
+function showNotification(message, type) {
+    // Replace this with your actual notification logic
+    console.log(`[${type.toUpperCase()}] ${message}`);
+}

Browser_IDE/index.html

@@ -100,6 +100,14 @@ <h1>Let's write some code!</h1>
 							<i class="bi bi-gear-fill"></i>
 							<i class="bi bi-play-fill">Build and Run</i>
 						</button>
+						<button type="button" id="stopProgram">
+							<i class="bi bi-stop-fill"></i>
+							<span>Stop</span>
+						</button>
+						<button type="button" id="collapsedStopProgram" title="Stop Program">
+							<i class="bi bi-stop-fill">Terminate</i>
+						</button>
+
 						<button type="button" id="stopProgram" style="display:none"><i class="bi bi-pause-fill">Pause</i></button>
 					</div>
 					<div class="sk-header-title">