fix: add missing await keywords

backend/server/src/SecureGitClient.ts

@@ -22,13 +22,13 @@ export class SecureGitClient {
 
     try {
       // Create a temporary directory
-      tempDir = fs.mkdtempSync(path.posix.join(os.tmpdir(), 'git-push-'));
+      tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'git-push-'));
       console.log(`Temporary directory created: ${tempDir}`);
 
       // Write files to the temporary directory
       console.log(`Writing ${fileData.length} files.`);
       for (const { id, data } of fileData) {
-        const filePath = path.posix.join(tempDir, id);
+        const filePath = path.join(tempDir, id);
         const dirPath = path.dirname(filePath);
       
         if (!fs.existsSync(dirPath)) {

backend/server/src/Terminal.ts

@@ -35,6 +35,7 @@ export class Terminal {
   async sendData(data: string) {
     if (this.pty) {
       await this.sandbox.pty.sendInput(this.pty.pid, new TextEncoder().encode(data));
+      await this.pty.wait();
     } else {
       console.log("Cannot send data because pty is not initialized.");
     }

backend/server/src/index.ts

@@ -6,10 +6,15 @@ import { createServer } from "http";
 import { Server } from "socket.io";
 import { DokkuClient } from "./DokkuClient";
 import { SecureGitClient, FileData } from "./SecureGitClient";
-import fs from "fs";
+import fs, { readFile } from "fs";
 
 import { z } from "zod";
-import { User } from "./types";
+import {
+  TFile,
+  TFileData,
+  TFolder,
+  User
+} from "./types";
 import {
   createFile,
   deleteFile,
@@ -21,7 +26,7 @@ import {
 } from "./fileoperations";
 import { LockManager } from "./utils";
 
-import { Sandbox, Filesystem } from "e2b";
+import { Sandbox, Filesystem, FilesystemEvent, EntryInfo } from "e2b";
 
 import { Terminal } from "./Terminal"
 
@@ -34,6 +39,18 @@ import {
   saveFileRL,
 } from "./ratelimit";
 
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+  // Do not exit the process
+  // You can add additional logging or recovery logic here
+});
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  // Do not exit the process
+  // You can also handle the rejected promise here if needed
+});
+
 dotenv.config();
 
 const app: Express = express();
@@ -55,14 +72,14 @@ const terminals: Record<string, Terminal> = {};
 
 const dirName = "/home/user";
 
-const moveFile = async (
+const moveFile = async (filesystem: Filesystem, filePath: string, newFilePath: string) => {
-  filesystem: Filesystem,
+  try {
-  filePath: string,
-  newFilePath: string
-) => {
     const fileContents = await filesystem.read(filePath);
     await filesystem.write(newFilePath, fileContents);
     await filesystem.remove(filePath);
+  } catch (e) {
+    console.error(`Error moving file from ${filePath} to ${newFilePath}:`, e);
+  }
 };
 
 io.use(async (socket, next) => {
@@ -157,12 +174,12 @@ io.on("connection", async (socket) => {
       }
     }
 
-    await lockManager.acquireLock(data.sandboxId, async () => {
+    const createdContainer = await lockManager.acquireLock(data.sandboxId, async () => {
       try {
-        // Start a new container if the container doesn't exist or it timed out.
+        if (!containers[data.sandboxId]) {
-        if (!containers[data.sandboxId] || !(await containers[data.sandboxId].isRunning())) {
+          containers[data.sandboxId] = await Sandbox.create({ timeoutMs: 1200000 });
-          containers[data.sandboxId] = await Sandbox.create({ timeoutMs: 1200_000 });
           console.log("Created container ", data.sandboxId);
+          return true;
         }
       } catch (e: any) {
         console.error(`Error creating container ${data.sandboxId}:`, e);
@@ -170,19 +187,41 @@ io.on("connection", async (socket) => {
       }
     });
 
+    const sandboxFiles = await getSandboxFiles(data.sandboxId);
+    const projectDirectory = path.join(dirName, "projects", data.sandboxId);
+    const containerFiles = containers[data.sandboxId].files;
+
     // Change the owner of the project directory to user
-    const fixPermissions = async () => {
+    const fixPermissions = async (projectDirectory: string) => {
+      try {
         await containers[data.sandboxId].commands.run(
-        `sudo chown -R user "${path.posix.join(dirName, "projects", data.sandboxId)}"`
+          `sudo chown -R user "${projectDirectory}"`
         );
+      } catch (e: any) {
+        console.log("Failed to fix permissions: " + e);
+      }
     };
 
+    // Check if the given path is a directory
+    const isDirectory = async (projectDirectory: string): Promise<boolean> => {
+      try {
+        const result = await containers[data.sandboxId].commands.run(
+          `[ -d "${projectDirectory}" ] && echo "true" || echo "false"`
+        );
+        return result.stdout.trim() === "true";
+      } catch (e: any) {
+        console.log("Failed to check if directory: " + e);
+        return false;
+      }
+    };
+
+    // Only continue to container setup if a new container was created
+    if (createdContainer) {
+
       // Copy all files from the project to the container
-    const sandboxFiles = await getSandboxFiles(data.sandboxId);
-    const containerFiles = containers[data.sandboxId].files;
       const promises = sandboxFiles.fileData.map(async (file) => {
         try {
-        const filePath = path.posix.join(dirName, file.id);
+          const filePath = path.join(dirName, file.id);
           const parentDirectory = path.dirname(filePath);
           if (!containerFiles.exists(parentDirectory)) {
             await containerFiles.makeDir(parentDirectory);
@@ -194,7 +233,124 @@ io.on("connection", async (socket) => {
       });
       await Promise.all(promises);
 
-    fixPermissions();
+      // Make the logged in user the owner of all project files
+      fixPermissions(projectDirectory);
+
+    }
+
+    // Start filesystem watcher for the project directory
+    const watchDirectory = async (directory: string) => {
+      try {
+        await containerFiles.watch(directory, async (event: FilesystemEvent) => {
+          try {
+
+            function removeDirName(path : string, dirName : string) {
+                return path.startsWith(dirName) ? path.slice(dirName.length) : path;
+            }
+
+            // This is the absolute file path in the container
+            const containerFilePath = path.join(directory, event.name);
+            // This is the file path relative to the home directory
+            const sandboxFilePath = removeDirName(containerFilePath, dirName + "/");
+            // This is the directory being watched relative to the home directory
+            const sandboxDirectory = removeDirName(directory, dirName + "/");
+
+            // Helper function to find a folder by id
+            function findFolderById(files: (TFolder | TFile)[], folderId : string) {
+              return files.find((file : TFolder | TFile) => file.type === "folder" && file.id === folderId);
+            }
+
+            // A new file or directory was created.
+            if (event.type === "create") {
+              const folder = findFolderById(sandboxFiles.files, sandboxDirectory) as TFolder;
+              const isDir = await isDirectory(containerFilePath);
+
+              const newItem = isDir
+                ? { id: sandboxFilePath, name: event.name, type: "folder", children: [] } as TFolder
+                : { id: sandboxFilePath, name: event.name, type: "file" } as TFile;
+
+              if (folder) {
+                // If the folder exists, add the new item (file/folder) as a child
+                folder.children.push(newItem);
+              } else {
+                // If folder doesn't exist, add the new item to the root
+                sandboxFiles.files.push(newItem);
+              }
+
+              if (!isDir) {
+                const fileData = await containers[data.sandboxId].files.read(containerFilePath);
+                const fileContents = typeof fileData === "string" ? fileData : "";
+                sandboxFiles.fileData.push({ id: sandboxFilePath, data: fileContents });
+              }
+
+              console.log(`Create ${sandboxFilePath}`);
+            }
+
+            // A file or directory was removed or renamed.
+            else if (event.type === "remove" || event.type == "rename") {
+              const folder = findFolderById(sandboxFiles.files, sandboxDirectory) as TFolder;
+              const isDir = await isDirectory(containerFilePath);
+
+              const isFileMatch = (file: TFolder | TFile | TFileData) => file.id === sandboxFilePath || file.id.startsWith(containerFilePath + '/');
+
+              if (folder) {
+                // Remove item from its parent folder
+                folder.children = folder.children.filter((file: TFolder | TFile) => !isFileMatch(file));
+              } else {
+                // Remove from the root if it's not inside a folder
+                sandboxFiles.files = sandboxFiles.files.filter((file: TFolder | TFile) => !isFileMatch(file));
+              }
+
+              // Also remove any corresponding file data
+              sandboxFiles.fileData = sandboxFiles.fileData.filter((file: TFileData) => !isFileMatch(file));
+
+              console.log(`Removed: ${sandboxFilePath}`);
+            }
+
+            // The contents of a file were changed.
+            else if (event.type === "write") {
+              const folder = findFolderById(sandboxFiles.files, sandboxDirectory) as TFolder;
+              const fileToWrite = sandboxFiles.fileData.find(file => file.id === sandboxFilePath);
+
+              if (fileToWrite) {
+                fileToWrite.data = await containers[data.sandboxId].files.read(containerFilePath);
+                console.log(`Write to ${sandboxFilePath}`);
+              } else {
+                // If the file is part of a folder structure, locate it and update its data
+                const fileInFolder = folder?.children.find(file => file.id === sandboxFilePath);
+                if (fileInFolder) {
+                  const fileData = await containers[data.sandboxId].files.read(containerFilePath);
+                  const fileContents = typeof fileData === "string" ? fileData : "";
+                  sandboxFiles.fileData.push({ id: sandboxFilePath, data: fileContents });
+                  console.log(`Write to ${sandboxFilePath}`);
+                }
+              }
+            }
+
+            // Tell the client to reload the file list
+            socket.emit("loaded", sandboxFiles.files);
+
+          } catch (error) {
+            console.error(`Error handling ${event.type} event for ${event.name}:`, error);
+          }
+        })
+      } catch (error) {
+        console.error(`Error watching filesystem:`, error);
+      }
+    };
+
+    // Watch the project directory
+    await watchDirectory(projectDirectory);
+
+    // Watch all subdirectories of the project directory, but not deeper
+    // This also means directories created after the container is created won't be watched
+    const dirContent = await containerFiles.list(projectDirectory);
+    await Promise.all(dirContent.map(async (item : EntryInfo) => {
+      if (item.type === "dir") {
+        console.log("Watching " + item.path);
+        await watchDirectory(item.path);
+      }
+    }))
   
     socket.emit("loaded", sandboxFiles.files);
 
@@ -246,10 +402,10 @@ io.on("connection", async (socket) => {
         file.data = body;
 
         await containers[data.sandboxId].files.write(
-          path.posix.join(dirName, file.id),
+          path.join(dirName, file.id),
           body
         );
-        fixPermissions();
+        fixPermissions(projectDirectory);
       } catch (e: any) {
         console.error("Error saving file:", e);
         io.emit("error", `Error: file saving. ${e.message ?? e}`);
@@ -268,10 +424,10 @@ io.on("connection", async (socket) => {
 
           await moveFile(
             containers[data.sandboxId].files,
-            path.posix.join(dirName, fileId),
+            path.join(dirName, fileId),
-            path.posix.join(dirName, newFileId)
+            path.join(dirName, newFileId)
           );
-          fixPermissions();
+          fixPermissions(projectDirectory);
 
           file.id = newFileId;
 
@@ -361,10 +517,10 @@ io.on("connection", async (socket) => {
         const id = `projects/${data.sandboxId}/${name}`;
 
         await containers[data.sandboxId].files.write(
-          path.posix.join(dirName, id),
+          path.join(dirName, id),
           ""
         );
-        fixPermissions();
+        fixPermissions(projectDirectory);
 
         sandboxFiles.files.push({
           id,
@@ -398,7 +554,7 @@ io.on("connection", async (socket) => {
         const id = `projects/${data.sandboxId}/${name}`;
 
         await containers[data.sandboxId].files.makeDir(
-          path.posix.join(dirName, id)
+          path.join(dirName, id)
         );
 
         callback();
@@ -427,10 +583,10 @@ io.on("connection", async (socket) => {
 
         await moveFile(
           containers[data.sandboxId].files,
-          path.posix.join(dirName, fileId),
+          path.join(dirName, fileId),
-          path.posix.join(dirName, newFileId)
+          path.join(dirName, newFileId)
         );
-        fixPermissions();
+        fixPermissions(projectDirectory);
         await renameFile(fileId, newFileId, file.data);
       } catch (e: any) {
         console.error("Error renaming folder:", e);
@@ -450,7 +606,7 @@ io.on("connection", async (socket) => {
         if (!file) return;
 
         await containers[data.sandboxId].files.remove(
-          path.posix.join(dirName, fileId)
+          path.join(dirName, fileId)
         );
         sandboxFiles.fileData = sandboxFiles.fileData.filter(
           (f) => f.id !== fileId
@@ -477,7 +633,7 @@ io.on("connection", async (socket) => {
         await Promise.all(
           files.map(async (file) => {
             await containers[data.sandboxId].files.remove(
-              path.posix.join(dirName, file)
+              path.join(dirName, file)
             );
 
             sandboxFiles.fileData = sandboxFiles.fileData.filter(
@@ -532,15 +688,9 @@ io.on("connection", async (socket) => {
               rows: 20,
               //onExit: () => console.log("Terminal exited", id),
             });
-
+            await terminals[id].sendData(
-            const defaultDirectory = path.posix.join(dirName, "projects", data.sandboxId);
+              `cd "${path.join(dirName, "projects", data.sandboxId)}"\rexport PS1='user> '\rclear\r`
-            const defaultCommands = [
+            );
-              `cd "${defaultDirectory}"`,
-              "export PS1='user> '",
-              "clear"
-            ]
-            for (const command of defaultCommands) await terminals[id].sendData(command + "\r");
-
             console.log("Created terminal", id);
           } catch (e: any) {
             console.error(`Error creating terminal ${id}:`, e);
@@ -575,7 +725,7 @@ io.on("connection", async (socket) => {
           return;
         }
 
-        await terminals[id].sendData(data);
+        terminals[id].sendData(data);
       } catch (e: any) {
         console.error("Error writing to terminal:", e);
         io.emit("error", `Error: writing to terminal. ${e.message ?? e}`);

frontend/app/(app)/code/[id]/page.tsx

@@ -6,7 +6,6 @@ import { notFound, redirect } from "next/navigation"
 import Loading from "@/components/editor/loading"
 import dynamic from "next/dynamic"
 import fs from "fs"
-import { TerminalProvider } from "@/context/TerminalContext"
 
 export const revalidate = 0
 
@@ -88,10 +87,8 @@ export default async function CodePage({ params }: { params: { id: string } }) {
   }
 
   return (
-    <>
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
-      <TerminalProvider>
         <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
         <div className="w-screen flex grow">
           <CodeEditor
@@ -99,9 +96,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
             sandboxData={sandboxData}
           />
         </div>
-      </TerminalProvider>
       </Room>
     </div>
-    </>
   )
 }

frontend/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
+import { TerminalProvider } from '@/context/TerminalContext';
 import { PreviewProvider } from "@/context/PreviewContext";
 import { SocketProvider } from '@/context/SocketContext'
 
@@ -31,7 +32,9 @@ export default function RootLayout({
           >
             <SocketProvider>
             <PreviewProvider>
+            <TerminalProvider>
             {children}
+            </TerminalProvider>
             </PreviewProvider>
             </SocketProvider>
             <Analytics />

frontend/components/dashboard/index.tsx

@@ -51,7 +51,7 @@ export default function Dashboard({
 
   useEffect(() => { // update the dashboard to show a new project
       router.refresh() 
-  }, [])
+  }, [sandboxes])
 
   return (
     <>

frontend/components/editor/index.tsx

@@ -70,8 +70,6 @@ export default function CodeEditor({
   const [activeFileId, setActiveFileId] = useState<string>("")
   const [activeFileContent, setActiveFileContent] = useState("")
   const [deletingFolderId, setDeletingFolderId] = useState("")
-  // Added this state to track the most recent content for each file
-  const [fileContents, setFileContents] = useState<Record<string, string>>({});
 
   // Editor state
   const [editorLanguage, setEditorLanguage] = useState("plaintext")
@@ -259,7 +257,6 @@ export default function CodeEditor({
       }
     })
   }, [editorRef])
-
   // Generate widget effect
   useEffect(() => {
     if (generate.show) {
@@ -338,7 +335,6 @@ export default function CodeEditor({
       })
     }
   }, [generate.show])
-  
   // Suggestion widget effect
   useEffect(() => {
     if (!suggestionRef.current || !editorRef) return
@@ -382,21 +378,12 @@ export default function CodeEditor({
     }
 
     const model = editorRef?.getModel()
-    // added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
+    const line = model?.getLineContent(cursorLine)
-    if (model) {
+
-      const totalLines = model.getLineCount();
+    if (line === undefined || line.trim() !== "") {
-      // Check if the cursorLine is a valid number, If cursorLine is out of bounds, we fall back to 1 (the first line) as a default safe value.
+      decorations.instance?.clear()
-      const lineNumber = cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1; // fallback to a valid line number
-      // If for some reason the content doesn't exist, we use an empty string as a fallback.
-      const line = model.getLineContent(lineNumber) ?? "";
-      // Check if the line is not empty or only whitespace (i.e., `.trim()` removes spaces).
-      // If the line has content, we clear any decorations using the instance of the `decorations` object.
-      // Decorations refer to editor highlights, underlines, or markers, so this clears those if conditions are met.
-      if (line.trim() !== "") {
-        decorations.instance?.clear();
       return
     }
-    }
 
     if (decorations.instance) {
       decorations.instance.set(decorations.options)
@@ -414,33 +401,25 @@ export default function CodeEditor({
   }, [decorations.options])
 
   // Save file keybinding logic effect
-  // Function to save the file content after a debounce period
   const debouncedSaveData = useCallback(
-    debounce((activeFileId: string | undefined) => {
+    debounce((value: string | undefined, activeFileId: string | undefined) => {
-      if (activeFileId) {
-        // Get the current content of the file
-        const content = fileContents[activeFileId];
-
-        // Mark the file as saved in the tabs
       setTabs((prev) =>
         prev.map((tab) =>
           tab.id === activeFileId ? { ...tab, saved: true } : tab
         )
-        );
+      )
-        console.log(`Saving file...${activeFileId}`);
+      console.log(`Saving file...${activeFileId}`)
-        console.log(`Saving file...${content}`);
+      console.log(`Saving file...${value}`)
-        socket?.emit("saveFile", activeFileId, content);
+      socket?.emit("saveFile", activeFileId, value)
-      }
     }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
-    [socket, fileContents]
+    [socket]
-  );
+  )
 
-  // Keydown event listener to trigger file save on Ctrl+S or Cmd+S
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        debouncedSaveData(activeFileId);
+        debouncedSaveData(editorRef?.getValue(), activeFileId)
       }
     }
     document.addEventListener("keydown", down)
@@ -607,46 +586,31 @@ export default function CodeEditor({
   } // 300ms debounce delay, adjust as needed
 
   const selectFile = (tab: TTab) => {
-    if (tab.id === activeFileId) return;
+    if (tab.id === activeFileId) return
 
-    setGenerate((prev) => ({ ...prev, show: false }));
+    setGenerate((prev) => ({ ...prev, show: false }))
 
-    // Check if the tab already exists in the list of open tabs
+    const exists = tabs.find((t) => t.id === tab.id)
-    const exists = tabs.find((t) => t.id === tab.id);
     setTabs((prev) => {
       if (exists) {
-        // If the tab exists, make it the active tab
+        setActiveFileId(exists.id)
-        setActiveFileId(exists.id);
+        return prev
-        return prev;
       }
-      // If the tab doesn't exist, add it to the list of tabs and make it active
+      return [...prev, tab]
-      return [...prev, tab];
+    })
-    });
 
-    // If the file's content is already cached, set it as the active content
+    if (fileCache.current.has(tab.id)) {
-    if (fileContents[tab.id]) {
+      setActiveFileContent(fileCache.current.get(tab.id))
-      setActiveFileContent(fileContents[tab.id]);
     } else {
-      // Otherwise, fetch the content of the file and cache it
+      debouncedGetFile(tab.id, (response: SetStateAction<string>) => {
-      debouncedGetFile(tab.id, (response: string) => {
+        fileCache.current.set(tab.id, response)
-        setFileContents(prev => ({ ...prev, [tab.id]: response }));
+        setActiveFileContent(response)
-        setActiveFileContent(response);
+      })
-      });
     }
 
-    // Set the editor language based on the file type
+    setEditorLanguage(processFileType(tab.name))
-    setEditorLanguage(processFileType(tab.name));
+    setActiveFileId(tab.id)
-    // Set the active file ID to the new tab
-    setActiveFileId(tab.id);
-  };
-
-  // Added this effect to update fileContents when the editor content changes
-  useEffect(() => {
-    if (activeFileId) {
-      // Cache the current active file content using the file ID as the key
-      setFileContents(prev => ({ ...prev, [activeFileId]: activeFileContent }));
   }
-  }, [activeFileContent, activeFileId]);
 
   // Close tab and remove from tabs
   const closeTab = (id: string) => {
@@ -932,19 +896,7 @@ export default function CodeEditor({
                     beforeMount={handleEditorWillMount}
                     onMount={handleEditorMount}
                     onChange={(value) => {
-                        // If the new content is different from the cached content, update it
+                      if (value === activeFileContent) {
-                        if (value !== fileContents[activeFileId]) {
-                            setActiveFileContent(value ?? ""); // Update the active file content
-                          // Mark the file as unsaved by setting 'saved' to false
-                          setTabs((prev) =>
-                            prev.map((tab) =>
-                              tab.id === activeFileId
-                                ? { ...tab, saved: false }
-                                : tab
-                            )
-                          )
-                        } else {
-                          // If the content matches the cached content, mark the file as saved
                         setTabs((prev) =>
                           prev.map((tab) =>
                             tab.id === activeFileId
@@ -952,6 +904,14 @@ export default function CodeEditor({
                               : tab
                           )
                         )
+                      } else {
+                        setTabs((prev) =>
+                          prev.map((tab) =>
+                            tab.id === activeFileId
+                              ? { ...tab, saved: false }
+                              : tab
+                          )
+                        )
                       }
                     }}
                     options={{

frontend/components/editor/navbar/run.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React, { useEffect, useRef } from 'react';
 import { Play, StopCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTerminal } from "@/context/TerminalContext";
@@ -17,57 +16,53 @@ export default function RunButtonModal({
   setIsRunning: (running: boolean) => void;
   sandboxData: Sandbox;
 }) {
-  const { createNewTerminal, closeTerminal, terminals } = useTerminal();
+  const { createNewTerminal, terminals, closeTerminal } = useTerminal();
   const { setIsPreviewCollapsed, previewPanelRef } = usePreview();
-  // Ref to keep track of the last created terminal's ID
-  const lastCreatedTerminalRef = useRef<string | null>(null);
 
-  // Effect to update the lastCreatedTerminalRef when a new terminal is added
+  const handleRun = () => {
-  useEffect(() => {
+    if (isRunning) {
-    if (terminals.length > 0 && !isRunning) {
+      console.log('Stopping sandbox...');
-      const latestTerminal = terminals[terminals.length - 1];
+      console.log('Closing Preview Window');
-      if (latestTerminal && latestTerminal.id !== lastCreatedTerminalRef.current) {
+
-        lastCreatedTerminalRef.current = latestTerminal.id;
+      terminals.forEach(term => {
-      }
+        if (term.terminal) {
-    }
+          closeTerminal(term.id);
-  }, [terminals, isRunning]);
+          console.log('Closing Terminal', term.id);
+        }
+      });
 
-  const handleRun = async () => {
-    if (isRunning && lastCreatedTerminalRef.current) 
-      {
-        await closeTerminal(lastCreatedTerminalRef.current);
-        lastCreatedTerminalRef.current = null;
       setIsPreviewCollapsed(true);
       previewPanelRef.current?.collapse();
-      } 
+    } else {
-    else if (!isRunning && terminals.length < 4) 
+      console.log('Running sandbox...');
-      {
+      console.log('Opening Terminal');
-      const command = sandboxData.type === "streamlit"
+      console.log('Opening Preview Window');
-        ? "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
+
-        : "yarn install && yarn dev";
+      if (terminals.length < 4) {
+        if (sandboxData.type === "streamlit") {
+          createNewTerminal(
+            "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
+          );
+        } else {
+          createNewTerminal("yarn install && yarn dev");
+        }
+      } else {
+        toast.error("You reached the maximum # of terminals.");
+        console.error("Maximum number of terminals reached.");
+      }
 
-      try {
-        // Create a new terminal with the appropriate command
-        await createNewTerminal(command);
       setIsPreviewCollapsed(false);
       previewPanelRef.current?.expand();
-      } catch (error) {
-        toast.error("Failed to create new terminal.");
-        console.error("Error creating new terminal:", error);
-        return;
     }
-    } else if (!isRunning) {
-      toast.error("You've reached the maximum number of terminals.");
-      return;
-    }
-
     setIsRunning(!isRunning);
   };
 
   return (
+    <>
       <Button variant="outline" onClick={handleRun}>
         {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
         {isRunning ? 'Stop' : 'Run'}
       </Button>
+    </>
   );
 }