chore: remove unused variable reactDefinitionFile

* chore: rename utils.ts to fileoperations.ts

* feat: replace node-pty with E2B sandboxes

* added debounced function in the editor

* fix: move socket connection to useRef

* fix: wait until terminals are killed to close the container

* fix: ensure container remains open until all owner connections are closed

* fix: sync files to container instead of local file system

* fix: set project file permissions so that they belong to the terminal user

* fix: use the container URL for the preview panel

* fix: count only the current user's sandboxes towards the limit

* fix: remove hardcoded reference to localhost

* fix: add error handling to the backend

* docs: add information about E2B

---------

Co-authored-by: Akhilesh Rangani <akhileshrangani4@gmail.com>

README.md

@@ -29,7 +29,9 @@ npm run dev
 
 ### Backend
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker.
+The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+
+You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
 
 #### Socket.io server
 
@@ -181,3 +183,4 @@ It should be in the form `category(scope or module): message` in your commit mes
 - [Express](https://expressjs.com/)
 - [Socket.io](https://socket.io/)
 - [Drizzle ORM](https://orm.drizzle.team/)
+- [E2B](https://e2b.dev/)

backend/database/src/index.ts

@@ -111,16 +111,16 @@ export default {
 				const { type, name, userId, visibility } = initSchema.parse(body)
 
 				const userSandboxes = await db
-				.select()
+					.select()
-				.from(sandbox)
+					.from(sandbox)
-				.where(eq(sandbox.userId, userId))
+					.where(eq(sandbox.userId, userId))
-				.all();
+					.all()
 
-			if (userSandboxes.length >= 8) {
+				if (userSandboxes.length >= 8) {
-				return new Response("You reached the maximum # of sandboxes.", {
+					return new Response("You reached the maximum # of sandboxes.", {
-					status: 400,
+						status: 400,
-				});
+					})
-			}
+				}
 
 				const sb = await db
 					.insert(sandbox)

backend/database/src/schema.ts

@@ -31,8 +31,8 @@ export const sandbox = sqliteTable("sandbox", {
 	createdAt: integer("createdAt", { mode: "timestamp_ms" }),
 	userId: text("user_id")
 		.notNull()
-		.references(() => user.id, { onDelete: "cascade" }),
+		.references(() => user.id),
-	});
+});
 
 export type Sandbox = typeof sandbox.$inferSelect;
 

backend/server/.env.example

@@ -5,3 +5,4 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
+E2B_API_KEY=

backend/server/src/index.ts

@@ -49,11 +49,15 @@ const terminals: Record<string, Terminal> = {};
 
 const dirName = "/home/user";
 
-const moveFile = async (filesystem: FilesystemManager, filePath: string, newFilePath: string) => {
+const moveFile = async (
-  const fileContents = await filesystem.readBytes(filePath)
+  filesystem: FilesystemManager,
+  filePath: string,
+  newFilePath: string
+) => {
+  const fileContents = await filesystem.readBytes(filePath);
   await filesystem.writeBytes(newFilePath, fileContents);
   await filesystem.remove(filePath);
-}
+};
 
 io.use(async (socket, next) => {
   const handshakeSchema = z.object({
@@ -109,381 +113,489 @@ io.use(async (socket, next) => {
 const lockManager = new LockManager();
 
 io.on("connection", async (socket) => {
-  if (inactivityTimeout) clearTimeout(inactivityTimeout);
+  try {
+    if (inactivityTimeout) clearTimeout(inactivityTimeout);
 
-  const data = socket.data as {
+    const data = socket.data as {
-    userId: string;
+      userId: string;
-    sandboxId: string;
+      sandboxId: string;
-    isOwner: boolean;
+      isOwner: boolean;
-  };
+    };
 
-  if (data.isOwner) {
+    if (data.isOwner) {
-    isOwnerConnected = true;
+      isOwnerConnected = true;
-    connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
+      connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
-  } else {
+    } else {
-    if (!isOwnerConnected) {
+      if (!isOwnerConnected) {
-      socket.emit("disableAccess", "The sandbox owner is not connected.");
+        socket.emit("disableAccess", "The sandbox owner is not connected.");
-      return;
-    }
-  }
-
-  await lockManager.acquireLock(data.sandboxId, async () => {
-    try {
-      if (!containers[data.sandboxId]) {
-        containers[data.sandboxId] = await Sandbox.create();
-        console.log("Created container ", data.sandboxId);
-        io.emit("previewURL", "https://" + containers[data.sandboxId].getHostname(5173));
-      }
-    } catch (error) {
-      console.error("Error creating container ", data.sandboxId, error);
-    }
-  });
-
-  // Change the owner of the project directory to user
-  const fixPermissions = async () => {
-    await containers[data.sandboxId].process.startAndWait(
-      `sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"`
-    );
-  }
-
-  const sandboxFiles = await getSandboxFiles(data.sandboxId);
-  sandboxFiles.fileData.forEach(async (file) => {
-    const filePath = path.join(dirName, file.id);
-    await containers[data.sandboxId].filesystem.makeDir(path.dirname(filePath));
-    await containers[data.sandboxId].filesystem.write(filePath, file.data);
-  });
-  fixPermissions();
-
-  socket.emit("loaded", sandboxFiles.files);
-
-  socket.on("getFile", (fileId: string, callback) => {
-    const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-    if (!file) return;
-
-    callback(file.data);
-  });
-
-  socket.on("getFolder", async (folderId: string, callback) => {
-    const files = await getFolder(folderId);
-    callback(files);
-  });
-
-  // todo: send diffs + debounce for efficiency
-  socket.on("saveFile", async (fileId: string, body: string) => {
-    try {
-      await saveFileRL.consume(data.userId, 1);
-
-      if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
-        socket.emit(
-          "rateLimit",
-          "Rate limited: file size too large. Please reduce the file size."
-        );
         return;
       }
-
-      const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-      if (!file) return;
-      file.data = body;
-
-      await containers[data.sandboxId].filesystem.write(path.join(dirName, file.id), body);
-      fixPermissions();
-      await saveFile(fileId, body);
-    } catch (e) {
-      io.emit("rateLimit", "Rate limited: file saving. Please slow down.");
-    }
-  });
-
-  socket.on("moveFile", async (fileId: string, folderId: string, callback) => {
-    const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-    if (!file) return;
-
-    const parts = fileId.split("/");
-    const newFileId = folderId + "/" + parts.pop();
-
-    await moveFile(
-      containers[data.sandboxId].filesystem,
-      path.join(dirName, fileId),
-      path.join(dirName, newFileId)
-    )
-    fixPermissions();
-
-    file.id = newFileId;
-
-    await renameFile(fileId, newFileId, file.data);
-    const newFiles = await getSandboxFiles(data.sandboxId);
-
-    callback(newFiles.files);
-  });
-
-  socket.on("createFile", async (name: string, callback) => {
-    try {
-      const size: number = await getProjectSize(data.sandboxId);
-      // limit is 200mb
-      if (size > 200 * 1024 * 1024) {
-        io.emit(
-          "rateLimit",
-          "Rate limited: project size exceeded. Please delete some files."
-        );
-        callback({ success: false });
-      }
-
-      await createFileRL.consume(data.userId, 1);
-
-      const id = `projects/${data.sandboxId}/${name}`;
-
-      await containers[data.sandboxId].filesystem.write(path.join(dirName, id), "");
-      fixPermissions();
-
-      sandboxFiles.files.push({
-        id,
-        name,
-        type: "file",
-      });
-
-      sandboxFiles.fileData.push({
-        id,
-        data: "",
-      });
-
-      await createFile(id);
-
-      callback({ success: true });
-    } catch (e) {
-      io.emit("rateLimit", "Rate limited: file creation. Please slow down.");
-    }
-  });
-
-  socket.on("createFolder", async (name: string, callback) => {
-    try {
-      await createFolderRL.consume(data.userId, 1);
-
-      const id = `projects/${data.sandboxId}/${name}`;
-
-      await containers[data.sandboxId].filesystem.makeDir(path.join(dirName, id));
-
-      callback();
-    } catch (e) {
-      io.emit("rateLimit", "Rate limited: folder creation. Please slow down.");
-    }
-  });
-
-  socket.on("renameFile", async (fileId: string, newName: string) => {
-    try {
-      await renameFileRL.consume(data.userId, 1);
-
-      const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-      if (!file) return;
-      file.id = newName;
-
-      const parts = fileId.split("/");
-      const newFileId =
-        parts.slice(0, parts.length - 1).join("/") + "/" + newName;
-
-
-      await moveFile(
-        containers[data.sandboxId].filesystem,
-        path.join(dirName, fileId),
-        path.join(dirName, newFileId)
-      )
-      fixPermissions();
-      await renameFile(fileId, newFileId, file.data);
-    } catch (e) {
-      io.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
-      return;
-    }
-  });
-
-  socket.on("deleteFile", async (fileId: string, callback) => {
-    try {
-      await deleteFileRL.consume(data.userId, 1);
-      const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-      if (!file) return;
-
-      await containers[data.sandboxId].filesystem.remove(path.join(dirName, fileId));
-      sandboxFiles.fileData = sandboxFiles.fileData.filter(
-        (f) => f.id !== fileId
-      );
-
-      await deleteFile(fileId);
-
-      const newFiles = await getSandboxFiles(data.sandboxId);
-      callback(newFiles.files);
-    } catch (e) {
-      io.emit("rateLimit", "Rate limited: file deletion. Please slow down.");
-    }
-  });
-
-  // todo
-  // socket.on("renameFolder", async (folderId: string, newName: string) => {
-  // });
-
-  socket.on("deleteFolder", async (folderId: string, callback) => {
-    const files = await getFolder(folderId);
-
-    await Promise.all(
-      files.map(async (file) => {
-        await containers[data.sandboxId].filesystem.remove(path.join(dirName, file));
-
-        sandboxFiles.fileData = sandboxFiles.fileData.filter(
-          (f) => f.id !== file
-        );
-
-        await deleteFile(file);
-      })
-    );
-
-    const newFiles = await getSandboxFiles(data.sandboxId);
-
-    callback(newFiles.files);
-  });
-
-  socket.on("createTerminal", async (id: string, callback) => {
-    if (terminals[id] || Object.keys(terminals).length >= 4) {
-      return;
     }
 
     await lockManager.acquireLock(data.sandboxId, async () => {
       try {
-        terminals[id] = await containers[data.sandboxId].terminal.start({
+        if (!containers[data.sandboxId]) {
-          onData: (data: string) => {
+          containers[data.sandboxId] = await Sandbox.create();
-            io.emit("terminalResponse", { id, data });
+          console.log("Created container ", data.sandboxId);
-          },
+          io.emit(
-          size: { cols: 80, rows: 20 },
+            "previewURL",
-          onExit: () => console.log("Terminal exited", id),
+            "https://" + containers[data.sandboxId].getHostname(5173)
-        });
+          );
-        await terminals[id].sendData(`cd "${path.join(dirName, "projects", data.sandboxId)}"\r`)
+        }
-        await terminals[id].sendData("export PS1='user> '\rclear\r");
+      } catch (e: any) {
-        console.log("Created terminal", id);
+        console.error(`Error creating container ${data.sandboxId}:`, e);
-      } catch (error) {
+        io.emit("error", `Error: container creation. ${e.message ?? e}`);
-        console.error("Error creating terminal ", id, error);
       }
     });
 
-    callback();
+    // Change the owner of the project directory to user
-  });
+    const fixPermissions = async () => {
+      await containers[data.sandboxId].process.startAndWait(
+        `sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"`
+      );
+    };
 
-  socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }) => {
+    const sandboxFiles = await getSandboxFiles(data.sandboxId);
-    Object.values(terminals).forEach((t) => {
+    sandboxFiles.fileData.forEach(async (file) => {
-      t.resize(dimensions);
+      const filePath = path.join(dirName, file.id);
+      await containers[data.sandboxId].filesystem.makeDir(
+        path.dirname(filePath)
+      );
+      await containers[data.sandboxId].filesystem.write(filePath, file.data);
     });
-  });
+    fixPermissions();
 
-  socket.on("terminalData", (id: string, data: string) => {
+    socket.emit("loaded", sandboxFiles.files);
-    if (!terminals[id]) {
-      return;
-    }
 
-    try {
+    socket.on("getFile", (fileId: string, callback) => {
-      terminals[id].sendData(data);
+      console.log(fileId);
-    } catch (e) {
+      try {
-      console.log("Error writing to terminal", e);
+        const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-    }
+        if (!file) return;
-  });
 
-  socket.on("closeTerminal", async (id: string, callback) => {
+        callback(file.data);
-    if (!terminals[id]) {
+      } catch (e: any) {
-      return;
+        console.error("Error getting file:", e);
-    }
+        io.emit("error", `Error: get file. ${e.message ?? e}`);
+      }
+    });
 
-    await terminals[id].kill();
+    socket.on("getFolder", async (folderId: string, callback) => {
-    delete terminals[id];
+      try {
+        const files = await getFolder(folderId);
+        callback(files);
+      } catch (e: any) {
+        console.error("Error getting folder:", e);
+        io.emit("error", `Error: get folder. ${e.message ?? e}`);
+      }
+    });
 
-    callback();
+    // todo: send diffs + debounce for efficiency
-  });
+    socket.on("saveFile", async (fileId: string, body: string) => {
+      if (!fileId) return; // handles saving when no file is open
 
-  socket.on(
+      try {
-    "generateCode",
+        if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
-    async (
+          socket.emit(
-      fileName: string,
+            "error",
-      code: string,
+            "Error: file size too large. Please reduce the file size."
-      line: number,
+          );
-      instructions: string,
+          return;
-      callback
-    ) => {
-      const fetchPromise = fetch(
-        `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `${process.env.WORKERS_KEY}`,
-          },
-          body: JSON.stringify({
-            userId: data.userId,
-          }),
         }
-      );
-
-      // Generate code from cloudflare workers AI
-      const generateCodePromise = fetch(
-        `${process.env.AI_WORKER_URL}/api?fileName=${fileName}&code=${code}&line=${line}&instructions=${instructions}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `${process.env.CF_AI_KEY}`,
-          },
-        }
-      );
-
-      const [fetchResponse, generateCodeResponse] = await Promise.all([
-        fetchPromise,
-        generateCodePromise,
-      ]);
-
-      const json = await generateCodeResponse.json();
-
-      callback({ response: json.response, success: true });
-    }
-  );
-
-  socket.on("disconnect", async () => {
-    if (data.isOwner) {
-      connections[data.sandboxId]--;
-    }
-
-    if (data.isOwner && connections[data.sandboxId] <= 0) {
-      await Promise.all(
-        Object.entries(terminals).map(async ([key, terminal]) => {
-          await terminal.kill();
-          delete terminals[key];
-        })
-      );
-
-      await lockManager.acquireLock(data.sandboxId, async () => {
         try {
-          if (containers[data.sandboxId]) {
+          await saveFileRL.consume(data.userId, 1);
-            await containers[data.sandboxId].close();
+          await saveFile(fileId, body);
-            delete containers[data.sandboxId];
+        } catch (e) {
-            console.log("Closed container", data.sandboxId);
+          io.emit("error", "Rate limited: file saving. Please slow down.");
-          }
+          return;
-        } catch (error) {
-          console.error("Error closing container ", data.sandboxId, error);
         }
-      });
 
-      socket.broadcast.emit(
+        const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-        "disableAccess",
+        if (!file) return;
-        "The sandbox owner has disconnected."
+        file.data = body;
-      );
-    }
 
-    // const sockets = await io.fetchSockets();
+        await containers[data.sandboxId].filesystem.write(
-    // if (inactivityTimeout) {
+          path.join(dirName, file.id),
-    //   clearTimeout(inactivityTimeout);
+          body
-    // }
+        );
-    // if (sockets.length === 0) {
+        fixPermissions();
-    //   console.log("STARTING TIMER");
+      } catch (e: any) {
-    //   inactivityTimeout = setTimeout(() => {
+        console.error("Error saving file:", e);
-    //     io.fetchSockets().then(async (sockets) => {
+        io.emit("error", `Error: file saving. ${e.message ?? e}`);
-    //       if (sockets.length === 0) {
+      }
-    //         console.log("Server stopped", res);
+    });
-    //       }
+
-    //     });
+    socket.on(
-    //   }, 20000);
+      "moveFile",
-    // } else {
+      async (fileId: string, folderId: string, callback) => {
-    //   console.log("number of sockets", sockets.length);
+        try {
-    // }
+          const file = sandboxFiles.fileData.find((f) => f.id === fileId);
-  });
+          if (!file) return;
+
+          const parts = fileId.split("/");
+          const newFileId = folderId + "/" + parts.pop();
+
+          await moveFile(
+            containers[data.sandboxId].filesystem,
+            path.join(dirName, fileId),
+            path.join(dirName, newFileId)
+          );
+          fixPermissions();
+
+          file.id = newFileId;
+
+          await renameFile(fileId, newFileId, file.data);
+          const newFiles = await getSandboxFiles(data.sandboxId);
+          callback(newFiles.files);
+        } catch (e: any) {
+          console.error("Error moving file:", e);
+          io.emit("error", `Error: file moving. ${e.message ?? e}`);
+        }
+      }
+    );
+
+    socket.on("createFile", async (name: string, callback) => {
+      try {
+        const size: number = await getProjectSize(data.sandboxId);
+        // limit is 200mb
+        if (size > 200 * 1024 * 1024) {
+          io.emit(
+            "error",
+            "Rate limited: project size exceeded. Please delete some files."
+          );
+          callback({ success: false });
+          return;
+        }
+
+        try {
+          await createFileRL.consume(data.userId, 1);
+        } catch (e) {
+          io.emit("error", "Rate limited: file creation. Please slow down.");
+          return;
+        }
+
+        const id = `projects/${data.sandboxId}/${name}`;
+
+        await containers[data.sandboxId].filesystem.write(
+          path.join(dirName, id),
+          ""
+        );
+        fixPermissions();
+
+        sandboxFiles.files.push({
+          id,
+          name,
+          type: "file",
+        });
+
+        sandboxFiles.fileData.push({
+          id,
+          data: "",
+        });
+
+        await createFile(id);
+
+        callback({ success: true });
+      } catch (e: any) {
+        console.error("Error creating file:", e);
+        io.emit("error", `Error: file creation. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on("createFolder", async (name: string, callback) => {
+      try {
+        try {
+          await createFolderRL.consume(data.userId, 1);
+        } catch (e) {
+          io.emit("error", "Rate limited: folder creation. Please slow down.");
+          return;
+        }
+
+        const id = `projects/${data.sandboxId}/${name}`;
+
+        await containers[data.sandboxId].filesystem.makeDir(
+          path.join(dirName, id)
+        );
+
+        callback();
+      } catch (e: any) {
+        console.error("Error creating folder:", e);
+        io.emit("error", `Error: folder creation. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on("renameFile", async (fileId: string, newName: string) => {
+      try {
+        try {
+          await renameFileRL.consume(data.userId, 1);
+        } catch (e) {
+          io.emit("error", "Rate limited: file renaming. Please slow down.");
+          return;
+        }
+
+        const file = sandboxFiles.fileData.find((f) => f.id === fileId);
+        if (!file) return;
+        file.id = newName;
+
+        const parts = fileId.split("/");
+        const newFileId =
+          parts.slice(0, parts.length - 1).join("/") + "/" + newName;
+
+        await moveFile(
+          containers[data.sandboxId].filesystem,
+          path.join(dirName, fileId),
+          path.join(dirName, newFileId)
+        );
+        fixPermissions();
+        await renameFile(fileId, newFileId, file.data);
+      } catch (e: any) {
+        console.error("Error renaming folder:", e);
+        io.emit("error", `Error: folder renaming. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on("deleteFile", async (fileId: string, callback) => {
+      try {
+        try {
+          await deleteFileRL.consume(data.userId, 1);
+        } catch (e) {
+          io.emit("error", "Rate limited: file deletion. Please slow down.");
+        }
+
+        const file = sandboxFiles.fileData.find((f) => f.id === fileId);
+        if (!file) return;
+
+        await containers[data.sandboxId].filesystem.remove(
+          path.join(dirName, fileId)
+        );
+        sandboxFiles.fileData = sandboxFiles.fileData.filter(
+          (f) => f.id !== fileId
+        );
+
+        await deleteFile(fileId);
+
+        const newFiles = await getSandboxFiles(data.sandboxId);
+        callback(newFiles.files);
+      } catch (e: any) {
+        console.error("Error deleting file:", e);
+        io.emit("error", `Error: file deletion. ${e.message ?? e}`);
+      }
+    });
+
+    // todo
+    // socket.on("renameFolder", async (folderId: string, newName: string) => {
+    // });
+
+    socket.on("deleteFolder", async (folderId: string, callback) => {
+      try {
+        const files = await getFolder(folderId);
+
+        await Promise.all(
+          files.map(async (file) => {
+            await containers[data.sandboxId].filesystem.remove(
+              path.join(dirName, file)
+            );
+
+            sandboxFiles.fileData = sandboxFiles.fileData.filter(
+              (f) => f.id !== file
+            );
+
+            await deleteFile(file);
+          })
+        );
+
+        const newFiles = await getSandboxFiles(data.sandboxId);
+
+        callback(newFiles.files);
+      } catch (e: any) {
+        console.error("Error deleting folder:", e);
+        io.emit("error", `Error: folder deletion. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on("createTerminal", async (id: string, callback) => {
+      try {
+        if (terminals[id] || Object.keys(terminals).length >= 4) {
+          return;
+        }
+
+        await lockManager.acquireLock(data.sandboxId, async () => {
+          try {
+            terminals[id] = await containers[data.sandboxId].terminal.start({
+              onData: (data: string) => {
+                io.emit("terminalResponse", { id, data });
+              },
+              size: { cols: 80, rows: 20 },
+              onExit: () => console.log("Terminal exited", id),
+            });
+            await terminals[id].sendData(
+              `cd "${path.join(dirName, "projects", data.sandboxId)}"\r`
+            );
+            await terminals[id].sendData("export PS1='user> '\rclear\r");
+            console.log("Created terminal", id);
+          } catch (e: any) {
+            console.error(`Error creating terminal ${id}:`, e);
+            io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
+          }
+        });
+
+        callback();
+      } catch (e: any) {
+        console.error(`Error creating terminal ${id}:`, e);
+        io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on(
+      "resizeTerminal",
+      (dimensions: { cols: number; rows: number }) => {
+        try {
+          Object.values(terminals).forEach((t) => {
+            t.resize(dimensions);
+          });
+        } catch (e: any) {
+          console.error("Error resizing terminal:", e);
+          io.emit("error", `Error: terminal resizing. ${e.message ?? e}`);
+        }
+      }
+    );
+
+    socket.on("terminalData", (id: string, data: string) => {
+      try {
+        if (!terminals[id]) {
+          return;
+        }
+
+        terminals[id].sendData(data);
+      } catch (e: any) {
+        console.error("Error writing to terminal:", e);
+        io.emit("error", `Error: writing to terminal. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on("closeTerminal", async (id: string, callback) => {
+      try {
+        if (!terminals[id]) {
+          return;
+        }
+
+        await terminals[id].kill();
+        delete terminals[id];
+
+        callback();
+      } catch (e: any) {
+        console.error("Error closing terminal:", e);
+        io.emit("error", `Error: closing terminal. ${e.message ?? e}`);
+      }
+    });
+
+    socket.on(
+      "generateCode",
+      async (
+        fileName: string,
+        code: string,
+        line: number,
+        instructions: string,
+        callback
+      ) => {
+        try {
+          const fetchPromise = fetch(
+            `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `${process.env.WORKERS_KEY}`,
+              },
+              body: JSON.stringify({
+                userId: data.userId,
+              }),
+            }
+          );
+
+          // Generate code from cloudflare workers AI
+          const generateCodePromise = fetch(
+            `${process.env.AI_WORKER_URL}/api?fileName=${fileName}&code=${code}&line=${line}&instructions=${instructions}`,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `${process.env.CF_AI_KEY}`,
+              },
+            }
+          );
+
+          const [fetchResponse, generateCodeResponse] = await Promise.all([
+            fetchPromise,
+            generateCodePromise,
+          ]);
+
+          const json = await generateCodeResponse.json();
+
+          callback({ response: json.response, success: true });
+        } catch (e: any) {
+          console.error("Error generating code:", e);
+          io.emit("error", `Error: code generation. ${e.message ?? e}`);
+        }
+      }
+    );
+
+    socket.on("disconnect", async () => {
+      try {
+        if (data.isOwner) {
+          connections[data.sandboxId]--;
+        }
+
+        if (data.isOwner && connections[data.sandboxId] <= 0) {
+          await Promise.all(
+            Object.entries(terminals).map(async ([key, terminal]) => {
+              await terminal.kill();
+              delete terminals[key];
+            })
+          );
+
+          await lockManager.acquireLock(data.sandboxId, async () => {
+            try {
+              if (containers[data.sandboxId]) {
+                await containers[data.sandboxId].close();
+                delete containers[data.sandboxId];
+                console.log("Closed container", data.sandboxId);
+              }
+            } catch (error) {
+              console.error("Error closing container ", data.sandboxId, error);
+            }
+          });
+
+          socket.broadcast.emit(
+            "disableAccess",
+            "The sandbox owner has disconnected."
+          );
+        }
+
+        // const sockets = await io.fetchSockets();
+        // if (inactivityTimeout) {
+        //   clearTimeout(inactivityTimeout);
+        // }
+        // if (sockets.length === 0) {
+        //   console.log("STARTING TIMER");
+        //   inactivityTimeout = setTimeout(() => {
+        //     io.fetchSockets().then(async (sockets) => {
+        //       if (sockets.length === 0) {
+        //         console.log("Server stopped", res);
+        //       }
+        //     });
+        //   }, 20000);
+        // } else {
+        //   console.log("number of sockets", sockets.length);
+        // }
+      } catch (e: any) {
+        console.log("Error disconnecting:", e);
+        io.emit("error", `Error: disconnecting. ${e.message ?? e}`);
+      }
+    });
+  } catch (e: any) {
+    console.error("Error connecting:", e);
+    io.emit("error", `Error: connection. ${e.message ?? e}`);
+  }
 });
 
 httpServer.listen(port, () => {

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

@@ -63,14 +63,6 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
   loading: () => <Loading />,
 })
 
-function getReactDefinitionFile() {
-  const reactDefinitionFile = fs.readFileSync(
-    "node_modules/@types/react/index.d.ts",
-    "utf8"
-  )
-  return reactDefinitionFile
-}
-
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -94,8 +86,6 @@ export default async function CodePage({ params }: { params: { id: string } }) {
     return notFound()
   }
 
-  const reactDefinitionFile = getReactDefinitionFile()
-
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
@@ -104,7 +94,6 @@ export default async function CodePage({ params }: { params: { id: string } }) {
           <CodeEditor
             userData={userData}
             sandboxData={sandboxData}
-            reactDefinitionFile={reactDefinitionFile}
           />
         </div>
       </Room>

frontend/components/editor/index.tsx

@@ -35,18 +35,16 @@ import { ImperativePanelHandle } from "react-resizable-panels"
 export default function CodeEditor({
   userData,
   sandboxData,
-  reactDefinitionFile,
 }: {
   userData: User
   sandboxData: Sandbox
-  reactDefinitionFile: string
 }) {
   const socketRef = useRef<Socket | null>(null);
 
   // Initialize socket connection if it doesn't exist
   if (!socketRef.current) {
     socketRef.current = io(
-      `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+      `${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
       {
         timeout: 2000,
       }
@@ -105,6 +103,16 @@ export default function CodeEditor({
   const [provider, setProvider] = useState<TypedLiveblocksProvider>()
   const userInfo = useSelf((me) => me.info)
   
+  // Liveblocks providers map to prevent reinitializing providers
+  type ProviderData = {
+    provider: LiveblocksProvider<never, never, never, never>;
+    yDoc: Y.Doc;
+    yText: Y.Text;
+    binding?: MonacoBinding;
+    onSync: (isSynced: boolean) => void;
+  };
+  const providersMap = useRef(new Map<string, ProviderData>());
+
   // Refs for libraries / features
   const editorContainerRef = useRef<HTMLDivElement>(null)
   const monacoRef = useRef<typeof monaco | null>(null)
@@ -332,43 +340,77 @@ export default function CodeEditor({
 
     if (!editorRef || !tab || !model) return
 
-    const yDoc = new Y.Doc()
+    let providerData: ProviderData;
-    const yText = yDoc.getText(tab.id)
-    const yProvider: any = new LiveblocksProvider(room, yDoc)
   
-    const onSync = (isSynced: boolean) => {
+    // When a file is opened for the first time, create a new provider and store in providersMap.
-      if (isSynced) {
+    if (!providersMap.current.has(tab.id)) {
-        const text = yText.toString()
+      const yDoc = new Y.Doc();
-        if (text === "") {
+      const yText = yDoc.getText(tab.id);
-          if (activeFileContent) {
+      const yProvider = new LiveblocksProvider(room, yDoc);
-            yText.insert(0, activeFileContent)
+
-          } else {
+      // Inserts the file content into the editor once when the tab is changed.
-            setTimeout(() => {
+      const onSync = (isSynced: boolean) => {
-              yText.insert(0, editorRef.getValue())
+        if (isSynced) {
-            }, 0)
+          const text = yText.toString()
+          if (text === "") {
+            if (activeFileContent) {
+              yText.insert(0, activeFileContent)
+            } else {
+              setTimeout(() => {
+                yText.insert(0, editorRef.getValue())
+              }, 0)
+            }
           }
         }
       }
+
+      yProvider.on("sync", onSync)
+
+      // Save the provider to the map.
+      providerData = { provider: yProvider, yDoc, yText, onSync };
+      providersMap.current.set(tab.id, providerData);
+
+    } else {
+      // When a tab is opened that has been open before, reuse the existing provider.
+      providerData = providersMap.current.get(tab.id)!;
     }
 
-    yProvider.on("sync", onSync)
-
-    setProvider(yProvider)
-
     const binding = new MonacoBinding(
-      yText,
+      providerData.yText,
       model,
       new Set([editorRef]),
-      yProvider.awareness as Awareness
+      providerData.provider.awareness as unknown as Awareness
-    )
+    );
+
+    providerData.binding = binding;
+  
+    setProvider(providerData.provider);
 
     return () => {
-      yDoc.destroy()
+      // Cleanup logic
-      yProvider.destroy()
+      if (binding) {
-      binding.destroy()
+        binding.destroy();
-      yProvider.off("sync", onSync)
+      }
-    }
+      if (providerData.binding) {
-  }, [editorRef, room, activeFileContent])
+        providerData.binding = undefined;
+      }
+    };
+  }, [room, activeFileContent]);
+
+    // Added this effect to clean up when the component unmounts
+    useEffect(() => {
+      return () => {
+        // Clean up all providers when the component unmounts
+        providersMap.current.forEach((data) => {
+          if (data.binding) {
+            data.binding.destroy();
+          }
+          data.provider.disconnect();
+          data.yDoc.destroy();
+        });
+        providersMap.current.clear();
+      };
+    }, []);
 
   // Connection/disconnection effect
   useEffect(() => {
@@ -391,7 +433,7 @@ export default function CodeEditor({
       setFiles(files)
     }
 
-    const onRateLimit = (message: string) => {
+    const onError = (message: string) => {
       toast.error(message)
     }
 
@@ -413,7 +455,7 @@ export default function CodeEditor({
     socketRef.current?.on("connect", onConnect)
     socketRef.current?.on("disconnect", onDisconnect)
     socketRef.current?.on("loaded", onLoadedEvent)
-    socketRef.current?.on("rateLimit", onRateLimit)
+    socketRef.current?.on("error", onError)
     socketRef.current?.on("terminalResponse", onTerminalResponse)
     socketRef.current?.on("disableAccess", onDisableAccess)
     socketRef.current?.on("previewURL", setPreviewURL)
@@ -422,7 +464,7 @@ export default function CodeEditor({
       socketRef.current?.off("connect", onConnect)
       socketRef.current?.off("disconnect", onDisconnect)
       socketRef.current?.off("loaded", onLoadedEvent)
-      socketRef.current?.off("rateLimit", onRateLimit)
+      socketRef.current?.off("error", onError)
       socketRef.current?.off("terminalResponse", onTerminalResponse)
       socketRef.current?.off("disableAccess", onDisableAccess)
       socketRef.current?.off("previewURL", setPreviewURL)