chore: remove unnecessary code

fix: ghost terminals, spam HTTP requests on dashboard

backend/server/src/SecureGitClient.ts

@@ -22,13 +22,13 @@ export class SecureGitClient {
 
     try {
       // Create a temporary directory
-      tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'git-push-'));
+      tempDir = fs.mkdtempSync(path.posix.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.join(tempDir, id);
+        const filePath = path.posix.join(tempDir, id);
         const dirPath = path.dirname(filePath);
       
         if (!fs.existsSync(dirPath)) {

backend/server/src/Terminal.ts

@@ -35,7 +35,6 @@ 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,15 +6,10 @@ import { createServer } from "http";
 import { Server } from "socket.io";
 import { DokkuClient } from "./DokkuClient";
 import { SecureGitClient, FileData } from "./SecureGitClient";
-import fs, { readFile } from "fs";
+import fs from "fs";
 
 import { z } from "zod";
-import {
-  TFile,
-  TFileData,
-  TFolder,
-  User
-} from "./types";
+import { User } from "./types";
 import {
   createFile,
   deleteFile,
@@ -26,7 +21,7 @@ import {
 } from "./fileoperations";
 import { LockManager } from "./utils";
 
-import { Sandbox, Filesystem, FilesystemEvent, EntryInfo } from "e2b";
+import { Sandbox, Filesystem } from "e2b";
 
 import { Terminal } from "./Terminal"
 
@@ -39,18 +34,6 @@ 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();
@@ -72,14 +55,14 @@ const terminals: Record<string, Terminal> = {};
 
 const dirName = "/home/user";
 
-const moveFile = async (filesystem: Filesystem, filePath: string, newFilePath: string) => {
-  try {
-    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);
-  }
+const moveFile = async (
+  filesystem: Filesystem,
+  filePath: string,
+  newFilePath: string
+) => {
+  const fileContents = await filesystem.read(filePath);
+  await filesystem.write(newFilePath, fileContents);
+  await filesystem.remove(filePath);
 };
 
 io.use(async (socket, next) => {
@@ -174,12 +157,12 @@ io.on("connection", async (socket) => {
       }
     }
 
-    const createdContainer = await lockManager.acquireLock(data.sandboxId, async () => {
+    await lockManager.acquireLock(data.sandboxId, async () => {
       try {
-        if (!containers[data.sandboxId]) {
-          containers[data.sandboxId] = await Sandbox.create({ timeoutMs: 1200000 });
+        // Start a new container if the container doesn't exist or it timed out.
+        if (!containers[data.sandboxId] || !(await containers[data.sandboxId].isRunning())) {
+          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);
@@ -187,170 +170,31 @@ 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 (projectDirectory: string) => {
-      try {
-        await containers[data.sandboxId].commands.run(
-          `sudo chown -R user "${projectDirectory}"`
-        );
-      } catch (e: any) {
-        console.log("Failed to fix permissions: " + e);
-      }
+    const fixPermissions = async () => {
+      await containers[data.sandboxId].commands.run(
+        `sudo chown -R user "${path.posix.join(dirName, "projects", data.sandboxId)}"`
+      );
     };
 
-    // Check if the given path is a directory
-    const isDirectory = async (projectDirectory: string): Promise<boolean> => {
+    // 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 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 promises = sandboxFiles.fileData.map(async (file) => {
-        try {
-          const filePath = path.join(dirName, file.id);
-          const parentDirectory = path.dirname(filePath);
-          if (!containerFiles.exists(parentDirectory)) {
-            await containerFiles.makeDir(parentDirectory);
-          }
-          await containerFiles.write(filePath, file.data);
-        } catch (e: any) {
-          console.log("Failed to create file: " + e);
+        const filePath = path.posix.join(dirName, file.id);
+        const parentDirectory = path.dirname(filePath);
+        if (!containerFiles.exists(parentDirectory)) {
+          await containerFiles.makeDir(parentDirectory);
         }
-      });
-      await Promise.all(promises);
-
-      // 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);
+        await containerFiles.write(filePath, file.data);
+      } catch (e: any) {
+        console.log("Failed to create file: " + e);
       }
-    };
+    });
+    await Promise.all(promises);
 
-    // 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);
-      }
-    }))
+    fixPermissions();
 
     socket.emit("loaded", sandboxFiles.files);
 
@@ -402,10 +246,10 @@ io.on("connection", async (socket) => {
         file.data = body;
 
         await containers[data.sandboxId].files.write(
-          path.join(dirName, file.id),
+          path.posix.join(dirName, file.id),
           body
         );
-        fixPermissions(projectDirectory);
+        fixPermissions();
       } catch (e: any) {
         console.error("Error saving file:", e);
         io.emit("error", `Error: file saving. ${e.message ?? e}`);
@@ -424,10 +268,10 @@ io.on("connection", async (socket) => {
 
           await moveFile(
             containers[data.sandboxId].files,
-            path.join(dirName, fileId),
-            path.join(dirName, newFileId)
+            path.posix.join(dirName, fileId),
+            path.posix.join(dirName, newFileId)
           );
-          fixPermissions(projectDirectory);
+          fixPermissions();
 
           file.id = newFileId;
 
@@ -517,10 +361,10 @@ io.on("connection", async (socket) => {
         const id = `projects/${data.sandboxId}/${name}`;
 
         await containers[data.sandboxId].files.write(
-          path.join(dirName, id),
+          path.posix.join(dirName, id),
           ""
         );
-        fixPermissions(projectDirectory);
+        fixPermissions();
 
         sandboxFiles.files.push({
           id,
@@ -554,7 +398,7 @@ io.on("connection", async (socket) => {
         const id = `projects/${data.sandboxId}/${name}`;
 
         await containers[data.sandboxId].files.makeDir(
-          path.join(dirName, id)
+          path.posix.join(dirName, id)
         );
 
         callback();
@@ -583,10 +427,10 @@ io.on("connection", async (socket) => {
 
         await moveFile(
           containers[data.sandboxId].files,
-          path.join(dirName, fileId),
-          path.join(dirName, newFileId)
+          path.posix.join(dirName, fileId),
+          path.posix.join(dirName, newFileId)
         );
-        fixPermissions(projectDirectory);
+        fixPermissions();
         await renameFile(fileId, newFileId, file.data);
       } catch (e: any) {
         console.error("Error renaming folder:", e);
@@ -606,7 +450,7 @@ io.on("connection", async (socket) => {
         if (!file) return;
 
         await containers[data.sandboxId].files.remove(
-          path.join(dirName, fileId)
+          path.posix.join(dirName, fileId)
         );
         sandboxFiles.fileData = sandboxFiles.fileData.filter(
           (f) => f.id !== fileId
@@ -633,7 +477,7 @@ io.on("connection", async (socket) => {
         await Promise.all(
           files.map(async (file) => {
             await containers[data.sandboxId].files.remove(
-              path.join(dirName, file)
+              path.posix.join(dirName, file)
             );
 
             sandboxFiles.fileData = sandboxFiles.fileData.filter(
@@ -688,9 +532,15 @@ io.on("connection", async (socket) => {
               rows: 20,
               //onExit: () => console.log("Terminal exited", id),
             });
-            await terminals[id].sendData(
-              `cd "${path.join(dirName, "projects", data.sandboxId)}"\rexport PS1='user> '\rclear\r`
-            );
+
+            const defaultDirectory = path.posix.join(dirName, "projects", data.sandboxId);
+            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);
@@ -725,7 +575,7 @@ io.on("connection", async (socket) => {
           return;
         }
 
-        terminals[id].sendData(data);
+        await 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,6 +6,7 @@ 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
 
@@ -87,8 +88,10 @@ 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
@@ -96,7 +99,9 @@ export default async function CodePage({ params }: { params: { id: string } }) {
             sandboxData={sandboxData}
           />
         </div>
+      </TerminalProvider>
       </Room>
     </div>
+    </>
   )
 }

frontend/app/layout.tsx

@@ -6,7 +6,6 @@ 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'
 
@@ -32,9 +31,7 @@ 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,6 +70,8 @@ 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")
@@ -257,6 +259,7 @@ export default function CodeEditor({
       }
     })
   }, [editorRef])
+
   // Generate widget effect
   useEffect(() => {
     if (generate.show) {
@@ -335,6 +338,7 @@ export default function CodeEditor({
       })
     }
   }, [generate.show])
+  
   // Suggestion widget effect
   useEffect(() => {
     if (!suggestionRef.current || !editorRef) return
@@ -378,11 +382,20 @@ export default function CodeEditor({
     }
 
     const model = editorRef?.getModel()
-    const line = model?.getLineContent(cursorLine)
-
-    if (line === undefined || line.trim() !== "") {
-      decorations.instance?.clear()
-      return
+    // added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
+    if (model) {
+      const totalLines = model.getLineCount();
+      // 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.
+      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) {
@@ -401,25 +414,33 @@ 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((value: string | undefined, activeFileId: string | undefined) => {
-      setTabs((prev) =>
-        prev.map((tab) =>
-          tab.id === activeFileId ? { ...tab, saved: true } : tab
-        )
-      )
-      console.log(`Saving file...${activeFileId}`)
-      console.log(`Saving file...${value}`)
-      socket?.emit("saveFile", activeFileId, value)
-    }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
-    [socket]
-  )
+    debounce((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...${content}`);
+        socket?.emit("saveFile", activeFileId, content);
+      }
+    }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
+    [socket, fileContents]
+  );
+
+  // 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(editorRef?.getValue(), activeFileId)
+        debouncedSaveData(activeFileId);
       }
     }
     document.addEventListener("keydown", down)
@@ -516,7 +537,7 @@ export default function CodeEditor({
 
   // Socket event listener effect
   useEffect(() => {
-    const onConnect = () => {}
+    const onConnect = () => { }
 
     const onDisconnect = () => {
       setTerminals([])
@@ -586,31 +607,46 @@ 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 }));
   
-    const exists = tabs.find((t) => t.id === tab.id)
+    // Check if the tab already exists in the list of open tabs
+    const exists = tabs.find((t) => t.id === tab.id);
     setTabs((prev) => {
       if (exists) {
-        setActiveFileId(exists.id)
-        return prev
+        // If the tab exists, make it the active tab
+        setActiveFileId(exists.id);
+        return prev;
       }
-      return [...prev, tab]
-    })
+      // If the tab doesn't exist, add it to the list of tabs and make it active
+      return [...prev, tab];
+    });
   
-    if (fileCache.current.has(tab.id)) {
-      setActiveFileContent(fileCache.current.get(tab.id))
+    // If the file's content is already cached, set it as the active content
+    if (fileContents[tab.id]) {
+      setActiveFileContent(fileContents[tab.id]);
     } else {
-      debouncedGetFile(tab.id, (response: SetStateAction<string>) => {
-        fileCache.current.set(tab.id, response)
-        setActiveFileContent(response)
-      })
+      // Otherwise, fetch the content of the file and cache it
+      debouncedGetFile(tab.id, (response: string) => {
+        setFileContents(prev => ({ ...prev, [tab.id]: response }));
+        setActiveFileContent(response);
+      });
     }
   
-    setEditorLanguage(processFileType(tab.name))
-    setActiveFileId(tab.id)
-  }
+    // Set the editor language based on the file type
+    setEditorLanguage(processFileType(tab.name));
+    // 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) => {
@@ -626,8 +662,8 @@ export default function CodeEditor({
         ? numTabs === 1
           ? null
           : index < numTabs - 1
-          ? tabs[index + 1].id
-          : tabs[index - 1].id
+            ? tabs[index + 1].id
+            : tabs[index - 1].id
         : activeFileId
 
     setTabs((prev) => prev.filter((t) => t.id !== id))
@@ -720,7 +756,7 @@ export default function CodeEditor({
         <DisableAccessModal
           message={disableAccess.message}
           open={disableAccess.isDisabled}
-          setOpen={() => {}}
+          setOpen={() => { }}
         />
         <Loading />
       </>
@@ -759,8 +795,8 @@ export default function CodeEditor({
                 code:
                   (isSelected && editorRef?.getSelection()
                     ? editorRef
-                        ?.getModel()
-                        ?.getValueInRange(editorRef?.getSelection()!)
+                      ?.getModel()
+                      ?.getValueInRange(editorRef?.getSelection()!)
                     : editorRef?.getValue()) ?? "",
                 line: generate.line,
               }}
@@ -784,11 +820,11 @@ export default function CodeEditor({
                     const afterLineNumber = isAbove ? line - 1 : line
                     id = changeAccessor.addZone({
                       afterLineNumber,
-                      heightInLines: isAbove?11: 12,
+                      heightInLines: isAbove ? 11 : 12,
                       domNode: generateRef.current,
                     })
-                    const contentWidget= generate.widget
-                    if (contentWidget){
+                    const contentWidget = generate.widget
+                    if (contentWidget) {
                       editorRef?.layoutContentWidget(contentWidget)
                     }
                   } else {
@@ -885,58 +921,62 @@ export default function CodeEditor({
                   </div>
                 </>
               ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
-              clerk.loaded ? (
-                <>
-                  {provider && userInfo ? (
-                    <Cursors yProvider={provider} userInfo={userInfo} />
-                  ) : null}
-                  <Editor
-                    height="100%"
-                    language={editorLanguage}
-                    beforeMount={handleEditorWillMount}
-                    onMount={handleEditorMount}
-                    onChange={(value) => {
-                      if (value === activeFileContent) {
-                        setTabs((prev) =>
-                          prev.map((tab) =>
-                            tab.id === activeFileId
-                              ? { ...tab, saved: true }
-                              : tab
+                clerk.loaded ? (
+                  <>
+                    {provider && userInfo ? (
+                      <Cursors yProvider={provider} userInfo={userInfo} />
+                    ) : null}
+                    <Editor
+                      height="100%"
+                      language={editorLanguage}
+                      beforeMount={handleEditorWillMount}
+                      onMount={handleEditorMount}
+                      onChange={(value) => {
+                        // If the new content is different from the cached content, update it
+                        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 {
-                        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
+                                ? { ...tab, saved: true }
+                                : tab
+                            )
                           )
-                        )
-                      }
-                    }}
-                    options={{
-                      tabSize: 2,
-                      minimap: {
-                        enabled: false,
-                      },
-                      padding: {
-                        bottom: 4,
-                        top: 4,
-                      },
-                      scrollBeyondLastLine: false,
-                      fixedOverflowWidgets: true,
-                      fontFamily: "var(--font-geist-mono)",
-                    }}
-                    theme="vs-dark"
-                    value={activeFileContent}
-                  />
-                </>
-              ) : (
-                <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
-                  <Loader2 className="animate-spin w-6 h-6 mr-3" />
-                  Waiting for Clerk to load...
-                </div>
-              )}
+                        }
+                      }}
+                      options={{
+                        tabSize: 2,
+                        minimap: {
+                          enabled: false,
+                        },
+                        padding: {
+                          bottom: 4,
+                          top: 4,
+                        },
+                        scrollBeyondLastLine: false,
+                        fixedOverflowWidgets: true,
+                        fontFamily: "var(--font-geist-mono)",
+                      }}
+                      theme="vs-dark"
+                      value={activeFileContent}
+                    />
+                  </>
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
+                    <Loader2 className="animate-spin w-6 h-6 mr-3" />
+                    Waiting for Clerk to load...
+                  </div>
+                )}
             </div>
           </ResizablePanel>
           <ResizableHandle />

frontend/components/editor/navbar/run.tsx

@@ -1,5 +1,6 @@
 "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";
@@ -16,53 +17,57 @@ export default function RunButtonModal({
   setIsRunning: (running: boolean) => void;
   sandboxData: Sandbox;
 }) {
-  const { createNewTerminal, terminals, closeTerminal } = useTerminal();
+  const { createNewTerminal, closeTerminal, terminals } = useTerminal();
   const { setIsPreviewCollapsed, previewPanelRef } = usePreview();
+  // Ref to keep track of the last created terminal's ID
+  const lastCreatedTerminalRef = useRef<string | null>(null);
 
-  const handleRun = () => {
-    if (isRunning) {
-      console.log('Stopping sandbox...');
-      console.log('Closing Preview Window');
-
-      terminals.forEach(term => {
-        if (term.terminal) {
-          closeTerminal(term.id);
-          console.log('Closing Terminal', term.id);
-        }
-      });
-
-      setIsPreviewCollapsed(true);
-      previewPanelRef.current?.collapse();
-    } else {
-      console.log('Running sandbox...');
-      console.log('Opening Terminal');
-      console.log('Opening Preview Window');
-
-      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.");
+  // Effect to update the lastCreatedTerminalRef when a new terminal is added
+  useEffect(() => {
+    if (terminals.length > 0 && !isRunning) {
+      const latestTerminal = terminals[terminals.length - 1];
+      if (latestTerminal && latestTerminal.id !== lastCreatedTerminalRef.current) {
+        lastCreatedTerminalRef.current = latestTerminal.id;
       }
-
-      setIsPreviewCollapsed(false);
-      previewPanelRef.current?.expand();
     }
+  }, [terminals, isRunning]);
+
+  const handleRun = async () => {
+    if (isRunning && lastCreatedTerminalRef.current) 
+      {
+        await closeTerminal(lastCreatedTerminalRef.current);
+        lastCreatedTerminalRef.current = null;
+        setIsPreviewCollapsed(true);
+        previewPanelRef.current?.collapse();
+      } 
+    else if (!isRunning && terminals.length < 4) 
+      {
+      const command = sandboxData.type === "streamlit"
+        ? "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
+        : "yarn install && yarn dev";
+      
+      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>
-    </>
+    <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>
   );
 }