Replace references to the app base URL with a dynamically generated URL.

README.md

@@ -29,9 +29,7 @@ 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. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+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.
-
-You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
 
 #### Socket.io server
 
@@ -183,4 +181,3 @@ 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

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

backend/server/.env.example

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

backend/server/package-lock.json

@@ -12,8 +12,8 @@
         "concurrently": "^8.2.2",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
-        "e2b": "^0.16.1",
         "express": "^4.19.2",
+        "node-pty": "^1.0.0",
         "rate-limiter-flexible": "^5.0.3",
         "socket.io": "^4.7.5",
         "zod": "^3.22.4"
@@ -369,19 +369,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bufferutil": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
-      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -675,59 +662,6 @@
         "url": "https://dotenvx.com"
       }
     },
-    "node_modules/e2b": {
-      "version": "0.16.1",
-      "resolved": "https://registry.npmjs.org/e2b/-/e2b-0.16.1.tgz",
-      "integrity": "sha512-2L1R/REEB+EezD4Q4MmcXXNATjvCYov2lv/69+PY6V95+wl1PZblIMTYAe7USxX6P6sqANxNs+kXqZr6RvXkSw==",
-      "dependencies": {
-        "isomorphic-ws": "^5.0.0",
-        "normalize-path": "^3.0.0",
-        "openapi-typescript-fetch": "^1.1.3",
-        "path-browserify": "^1.0.1",
-        "platform": "^1.3.6",
-        "ws": "^8.15.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "bufferutil": "^4.0.8",
-        "utf-8-validate": "^6.0.3"
-      }
-    },
-    "node_modules/e2b/node_modules/utf-8-validate": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.4.tgz",
-      "integrity": "sha512-xu9GQDeFp+eZ6LnCywXN/zBancWvOpUMzgjLPSjy4BRHSmTelvn2E0DG0o1sTiw5hkCKBHo8rwSKncfRfv2EEQ==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
-    "node_modules/e2b/node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1148,14 +1082,6 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/isomorphic-ws": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
-      "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
-      "peerDependencies": {
-        "ws": "*"
-      }
-    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1247,6 +1173,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/nan": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
+      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw=="
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -1255,15 +1186,13 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/node-gyp-build": {
+    "node_modules/node-pty": {
-      "version": "4.8.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.0.0.tgz",
-      "integrity": "sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==",
+      "integrity": "sha512-wtBMWWS7dFZm/VgqElrTvtfMq4GzJ6+edFI0Y0zyzygUSZMgZdraDUMUhCIvkjhJjme15qWmbyJbtAx4ot4uZA==",
-      "optional": true,
+      "hasInstallScript": true,
-      "bin": {
+      "dependencies": {
-        "node-gyp-build": "bin.js",
+        "nan": "^2.17.0"
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
       }
     },
     "node_modules/nodemon": {
@@ -1336,6 +1265,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1367,15 +1297,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/openapi-typescript-fetch": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/openapi-typescript-fetch/-/openapi-typescript-fetch-1.1.3.tgz",
-      "integrity": "sha512-smLZPck4OkKMNExcw8jMgrMOGgVGx2N/s6DbKL2ftNl77g5HfoGpZGFy79RBzU/EkaO0OZpwBnslfdBfh7ZcWg==",
-      "engines": {
-        "node": ">= 12.0.0",
-        "npm": ">= 7.0.0"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -1384,11 +1305,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/path-browserify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -1406,11 +1322,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/platform": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
-      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
-    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1924,20 +1835,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

backend/server/package.json

@@ -14,8 +14,8 @@
     "concurrently": "^8.2.2",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "e2b": "^0.16.1",
     "express": "^4.19.2",
+    "node-pty": "^1.0.0",
     "rate-limiter-flexible": "^5.0.3",
     "socket.io": "^4.7.5",
     "zod": "^3.22.4"

backend/server/src/fileoperations.ts

@@ -1,177 +0,0 @@
-import * as dotenv from "dotenv";
-import {
-  R2FileBody,
-  R2Files,
-  Sandbox,
-  TFile,
-  TFileData,
-  TFolder,
-} from "./types";
-
-dotenv.config();
-
-export const getSandboxFiles = async (id: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api?sandboxId=${id}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  const data: R2Files = await res.json();
-
-  const paths = data.objects.map((obj) => obj.key);
-  const processedFiles = await processFiles(paths, id);
-  return processedFiles;
-};
-
-export const getFolder = async (folderId: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api?folderId=${folderId}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  const data: R2Files = await res.json();
-
-  return data.objects.map((obj) => obj.key);
-};
-
-const processFiles = async (paths: string[], id: string) => {
-  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] };
-  const fileData: TFileData[] = [];
-
-  paths.forEach((path) => {
-    const allParts = path.split("/");
-    if (allParts[1] !== id) {
-      return;
-    }
-
-    const parts = allParts.slice(2);
-    let current: TFolder = root;
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      const isFile = i === parts.length - 1 && part.includes(".");
-      const existing = current.children.find((child) => child.name === part);
-
-      if (existing) {
-        if (!isFile) {
-          current = existing as TFolder;
-        }
-      } else {
-        if (isFile) {
-          const file: TFile = { id: path, type: "file", name: part };
-          current.children.push(file);
-          fileData.push({ id: path, data: "" });
-        } else {
-          const folder: TFolder = {
-            // id: path, // todo: wrong id. for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
-            id: `projects/${id}/${parts.slice(0, i + 1).join("/")}`,
-            type: "folder",
-            name: part,
-            children: [],
-          };
-          current.children.push(folder);
-          current = folder;
-        }
-      }
-    }
-  });
-
-  await Promise.all(
-    fileData.map(async (file) => {
-      const data = await fetchFileContent(file.id);
-      file.data = data;
-    })
-  );
-
-  return {
-    files: root.children,
-    fileData,
-  };
-};
-
-const fetchFileContent = async (fileId: string): Promise<string> => {
-  try {
-    const fileRes = await fetch(
-      `${process.env.STORAGE_WORKER_URL}/api?fileId=${fileId}`,
-      {
-        headers: {
-          Authorization: `${process.env.WORKERS_KEY}`,
-        },
-      }
-    );
-    return await fileRes.text();
-  } catch (error) {
-    console.error("ERROR fetching file:", error);
-    return "";
-  }
-};
-
-export const createFile = async (fileId: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId }),
-  });
-  return res.ok;
-};
-
-export const renameFile = async (
-  fileId: string,
-  newFileId: string,
-  data: string
-) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/rename`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId, newFileId, data }),
-  });
-  return res.ok;
-};
-
-export const saveFile = async (fileId: string, data: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/save`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId, data }),
-  });
-  return res.ok;
-};
-
-export const deleteFile = async (fileId: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
-    method: "DELETE",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId }),
-  });
-  return res.ok;
-};
-
-export const getProjectSize = async (id: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api/size?sandboxId=${id}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  return (await res.json()).size;
-};

backend/server/src/index.ts

@@ -1,3 +1,4 @@
+import fs from "fs";
 import os from "os";
 import path from "path";
 import cors from "cors";
@@ -16,9 +17,8 @@ import {
   getSandboxFiles,
   renameFile,
   saveFile,
-} from "./fileoperations";
+} from "./utils";
-import { LockManager } from "./utils";
+import { IDisposable, IPty, spawn } from "node-pty";
-import { Sandbox, Terminal, FilesystemManager } from "e2b";
 import {
   MAX_BODY_SIZE,
   createFileRL,
@@ -43,21 +43,11 @@ const io = new Server(httpServer, {
 let inactivityTimeout: NodeJS.Timeout | null = null;
 let isOwnerConnected = false;
 
-const containers: Record<string, Sandbox> = {};
+const terminals: {
-const connections: Record<string, number> = {};
+  [id: string]: { terminal: IPty; onData: IDisposable; onExit: IDisposable };
-const terminals: Record<string, Terminal> = {};
+} = {};
 
-const dirName = "/home/user";
+const dirName = path.join(__dirname, "..");
-
-const moveFile = async (
-  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({
@@ -110,10 +100,7 @@ io.use(async (socket, next) => {
   next();
 });
 
-const lockManager = new LockManager();
-
 io.on("connection", async (socket) => {
-  try {
   if (inactivityTimeout) clearTimeout(inactivityTimeout);
 
   const data = socket.data as {
@@ -124,7 +111,6 @@ io.on("connection", async (socket) => {
 
   if (data.isOwner) {
     isOwnerConnected = true;
-      connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1;
   } else {
     if (!isOwnerConnected) {
       socket.emit("disableAccess", "The sandbox owner is not connected.");
@@ -132,125 +118,77 @@ io.on("connection", async (socket) => {
     }
   }
 
-    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 (e: any) {
-        console.error(`Error creating container ${data.sandboxId}:`, e);
-        io.emit("error", `Error: container creation. ${e.message ?? e}`);
-      }
-    });
-
-    // 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) => {
+  sandboxFiles.fileData.forEach((file) => {
     const filePath = path.join(dirName, file.id);
-      await containers[data.sandboxId].filesystem.makeDir(
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
-        path.dirname(filePath)
+    fs.writeFile(filePath, file.data, function (err) {
-      );
+      if (err) throw err;
-      await containers[data.sandboxId].filesystem.write(filePath, file.data);
+    });
   });
-    fixPermissions();
 
   socket.emit("loaded", sandboxFiles.files);
 
   socket.on("getFile", (fileId: string, callback) => {
-      console.log(fileId);
-      try {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId);
     if (!file) return;
 
     callback(file.data);
-      } catch (e: any) {
-        console.error("Error getting file:", e);
-        io.emit("error", `Error: get file. ${e.message ?? e}`);
-      }
   });
 
   socket.on("getFolder", async (folderId: string, callback) => {
-      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}`);
-      }
   });
 
   // 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(
-            "error",
+          "rateLimit",
-            "Error: file size too large. Please reduce the file size."
+          "Rate limited: file size too large. Please reduce the file size."
         );
         return;
       }
-        try {
-          await saveFileRL.consume(data.userId, 1);
-          await saveFile(fileId, body);
-        } catch (e) {
-          io.emit("error", "Rate limited: file saving. Please slow down.");
-          return;
-        }
 
       const file = sandboxFiles.fileData.find((f) => f.id === fileId);
       if (!file) return;
       file.data = body;
 
-        await containers[data.sandboxId].filesystem.write(
+      fs.writeFile(path.join(dirName, file.id), body, function (err) {
-          path.join(dirName, file.id),
+        if (err) throw err;
-          body
+      });
-        );
+      await saveFile(fileId, body);
-        fixPermissions();
+    } catch (e) {
-      } catch (e: any) {
+      io.emit("rateLimit", "Rate limited: file saving. Please slow down.");
-        console.error("Error saving file:", e);
-        io.emit("error", `Error: file saving. ${e.message ?? e}`);
     }
   });
 
-    socket.on(
+  socket.on("moveFile", async (fileId: string, folderId: string, callback) => {
-      "moveFile",
-      async (fileId: string, folderId: string, callback) => {
-        try {
     const file = sandboxFiles.fileData.find((f) => f.id === fileId);
     if (!file) return;
 
     const parts = fileId.split("/");
     const newFileId = folderId + "/" + parts.pop();
 
-          await moveFile(
+    fs.rename(
-            containers[data.sandboxId].filesystem,
       path.join(dirName, fileId),
-            path.join(dirName, newFileId)
+      path.join(dirName, newFileId),
+      function (err) {
+        if (err) throw err;
+      }
     );
-          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 {
@@ -258,27 +196,19 @@ io.on("connection", async (socket) => {
       // limit is 200mb
       if (size > 200 * 1024 * 1024) {
         io.emit(
-            "error",
+          "rateLimit",
           "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(
+      fs.writeFile(path.join(dirName, id), "", function (err) {
-          path.join(dirName, id),
+        if (err) throw err;
-          ""
+      });
-        );
-        fixPermissions();
 
       sandboxFiles.files.push({
         id,
@@ -294,42 +224,30 @@ io.on("connection", async (socket) => {
       await createFile(id);
 
       callback({ success: true });
-      } catch (e: any) {
+    } catch (e) {
-        console.error("Error creating file:", e);
+      io.emit("rateLimit", "Rate limited: file creation. Please slow down.");
-        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(
+      fs.mkdir(path.join(dirName, id), { recursive: true }, function (err) {
-          path.join(dirName, id)
+        if (err) throw err;
-        );
+      });
 
       callback();
-      } catch (e: any) {
+    } catch (e) {
-        console.error("Error creating folder:", e);
+      io.emit("rateLimit", "Rate limited: folder creation. Please slow down.");
-        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;
@@ -339,33 +257,29 @@ io.on("connection", async (socket) => {
       const newFileId =
         parts.slice(0, parts.length - 1).join("/") + "/" + newName;
 
-        await moveFile(
+      fs.rename(
-          containers[data.sandboxId].filesystem,
         path.join(dirName, fileId),
-          path.join(dirName, newFileId)
+        path.join(dirName, newFileId),
+        function (err) {
+          if (err) throw err;
+        }
       );
-        fixPermissions();
       await renameFile(fileId, newFileId, file.data);
-      } catch (e: any) {
+    } catch (e) {
-        console.error("Error renaming folder:", e);
+      io.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
-        io.emit("error", `Error: folder renaming. ${e.message ?? e}`);
+      return;
     }
   });
 
   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(
+      fs.unlink(path.join(dirName, fileId), function (err) {
-          path.join(dirName, fileId)
+        if (err) throw err;
-        );
+      });
       sandboxFiles.fileData = sandboxFiles.fileData.filter(
         (f) => f.id !== fileId
       );
@@ -374,9 +288,8 @@ io.on("connection", async (socket) => {
 
       const newFiles = await getSandboxFiles(data.sandboxId);
       callback(newFiles.files);
-      } catch (e: any) {
+    } catch (e) {
-        console.error("Error deleting file:", e);
+      io.emit("rateLimit", "Rate limited: file deletion. Please slow down.");
-        io.emit("error", `Error: file deletion. ${e.message ?? e}`);
     }
   });
 
@@ -385,14 +298,13 @@ io.on("connection", async (socket) => {
   // });
 
   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(
+        fs.unlink(path.join(dirName, file), function (err) {
-              path.join(dirName, file)
+          if (err) throw err;
-            );
+        });
 
         sandboxFiles.fileData = sandboxFiles.fileData.filter(
           (f) => f.id !== file
@@ -405,86 +317,68 @@ io.on("connection", async (socket) => {
     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) => {
+  socket.on("createTerminal", (id: string, callback) => {
-      try {
     if (terminals[id] || Object.keys(terminals).length >= 4) {
       return;
     }
 
-        await lockManager.acquireLock(data.sandboxId, async () => {
+    const pty = spawn(os.platform() === "win32" ? "cmd.exe" : "bash", [], {
-          try {
+      name: "xterm",
-            terminals[id] = await containers[data.sandboxId].terminal.start({
+      cols: 100,
-              onData: (data: string) => {
+      cwd: path.join(dirName, "projects", data.sandboxId),
-                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`
+    const onData = pty.onData((data) => {
-            );
+      io.emit("terminalResponse", {
-            await terminals[id].sendData("export PS1='user> '\rclear\r");
+        id,
-            console.log("Created terminal", id);
+        data,
-          } catch (e: any) {
-            console.error(`Error creating terminal ${id}:`, e);
-            io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
-          }
       });
+    });
+
+    const onExit = pty.onExit((code) => console.log("exit :(", code));
+
+    pty.write("export PS1='\\u > '\r");
+    pty.write("clear\r");
+
+    terminals[id] = {
+      terminal: pty,
+      onData,
+      onExit,
+    };
 
     callback();
-      } catch (e: any) {
-        console.error(`Error creating terminal ${id}:`, e);
-        io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
-      }
   });
 
-    socket.on(
+  socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }) => {
-      "resizeTerminal",
-      (dimensions: { cols: number; rows: number }) => {
-        try {
     Object.values(terminals).forEach((t) => {
-            t.resize(dimensions);
+      t.terminal.resize(dimensions.cols, dimensions.rows);
+    });
   });
-        } 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);
+    try {
-      } catch (e: any) {
+      terminals[id].terminal.write(data);
-        console.error("Error writing to terminal:", e);
+    } catch (e) {
-        io.emit("error", `Error: writing to terminal. ${e.message ?? e}`);
+      console.log("Error writing to terminal", e);
     }
   });
 
-    socket.on("closeTerminal", async (id: string, callback) => {
+  socket.on("closeTerminal", (id: string, callback) => {
-      try {
     if (!terminals[id]) {
       return;
     }
 
-        await terminals[id].kill();
+    terminals[id].onData.dispose();
+    terminals[id].onExit.dispose();
     delete terminals[id];
 
     callback();
-      } catch (e: any) {
-        console.error("Error closing terminal:", e);
-        io.emit("error", `Error: closing terminal. ${e.message ?? e}`);
-      }
   });
 
   socket.on(
@@ -496,7 +390,6 @@ io.on("connection", async (socket) => {
       instructions: string,
       callback
     ) => {
-        try {
       const fetchPromise = fetch(
         `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
         {
@@ -530,37 +423,16 @@ io.on("connection", async (socket) => {
       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]--;
+      Object.entries(terminals).forEach((t) => {
-        }
+        const { terminal, onData, onExit } = t[1];
-
+        onData.dispose();
-        if (data.isOwner && connections[data.sandboxId] <= 0) {
+        onExit.dispose();
-          await Promise.all(
+        delete terminals[t[0]];
-            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(
@@ -585,15 +457,7 @@ io.on("connection", async (socket) => {
     // } 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, () => {

backend/server/src/utils.ts

@@ -1,23 +1,177 @@
-export class LockManager {
+import * as dotenv from "dotenv";
-  private locks: { [key: string]: Promise<any> };
+import {
+  R2FileBody,
+  R2Files,
+  Sandbox,
+  TFile,
+  TFileData,
+  TFolder,
+} from "./types";
 
-  constructor() {
+dotenv.config();
-    this.locks = {};
+
+export const getSandboxFiles = async (id: string) => {
+  const res = await fetch(
+    `${process.env.STORAGE_WORKER_URL}/api?sandboxId=${id}`,
+    {
+      headers: {
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+    }
+  );
+  const data: R2Files = await res.json();
+
+  const paths = data.objects.map((obj) => obj.key);
+  const processedFiles = await processFiles(paths, id);
+  return processedFiles;
+};
+
+export const getFolder = async (folderId: string) => {
+  const res = await fetch(
+    `${process.env.STORAGE_WORKER_URL}/api?folderId=${folderId}`,
+    {
+      headers: {
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+    }
+  );
+  const data: R2Files = await res.json();
+
+  return data.objects.map((obj) => obj.key);
+};
+
+const processFiles = async (paths: string[], id: string) => {
+  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] };
+  const fileData: TFileData[] = [];
+
+  paths.forEach((path) => {
+    const allParts = path.split("/");
+    if (allParts[1] !== id) {
+      return;
     }
 
-  async acquireLock<T>(key: string, task: () => Promise<T>): Promise<T> {
+    const parts = allParts.slice(2);
-    if (!this.locks[key]) {
+    let current: TFolder = root;
-      this.locks[key] = new Promise<T>(async (resolve, reject) => {
+
-        try {
+    for (let i = 0; i < parts.length; i++) {
-          const result = await task();
+      const part = parts[i];
-          resolve(result);
+      const isFile = i === parts.length - 1 && part.includes(".");
-        } catch (error) {
+      const existing = current.children.find((child) => child.name === part);
-          reject(error);
+
-        } finally {
+      if (existing) {
-          delete this.locks[key];
+        if (!isFile) {
+          current = existing as TFolder;
+        }
+      } else {
+        if (isFile) {
+          const file: TFile = { id: path, type: "file", name: part };
+          current.children.push(file);
+          fileData.push({ id: path, data: "" });
+        } else {
+          const folder: TFolder = {
+            // id: path, // todo: wrong id. for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
+            id: `projects/${id}/${parts.slice(0, i + 1).join("/")}`,
+            type: "folder",
+            name: part,
+            children: [],
+          };
+          current.children.push(folder);
+          current = folder;
+        }
+      }
     }
   });
+
+  await Promise.all(
+    fileData.map(async (file) => {
+      const data = await fetchFileContent(file.id);
+      file.data = data;
+    })
+  );
+
+  return {
+    files: root.children,
+    fileData,
+  };
+};
+
+const fetchFileContent = async (fileId: string): Promise<string> => {
+  try {
+    const fileRes = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api?fileId=${fileId}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
       }
-    return await this.locks[key];
+    );
+    return await fileRes.text();
+  } catch (error) {
+    console.error("ERROR fetching file:", error);
+    return "";
   }
+};
+
+export const createFile = async (fileId: string) => {
+  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `${process.env.WORKERS_KEY}`,
+    },
+    body: JSON.stringify({ fileId }),
+  });
+  return res.ok;
+};
+
+export const renameFile = async (
+  fileId: string,
+  newFileId: string,
+  data: string
+) => {
+  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/rename`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `${process.env.WORKERS_KEY}`,
+    },
+    body: JSON.stringify({ fileId, newFileId, data }),
+  });
+  return res.ok;
+};
+
+export const saveFile = async (fileId: string, data: string) => {
+  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/save`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `${process.env.WORKERS_KEY}`,
+    },
+    body: JSON.stringify({ fileId, data }),
+  });
+  return res.ok;
+};
+
+export const deleteFile = async (fileId: string) => {
+  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `${process.env.WORKERS_KEY}`,
+    },
+    body: JSON.stringify({ fileId }),
+  });
+  return res.ok;
+};
+
+export const getProjectSize = async (id: string) => {
+  const res = await fetch(
+    `${process.env.STORAGE_WORKER_URL}/api/size?sandboxId=${id}`,
+    {
+      headers: {
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
     }
+  );
+  return (await res.json()).size;
+};

frontend/components/editor/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import monaco from "monaco-editor"
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
-import { Socket, io } from "socket.io-client"
+import { io } from "socket.io-client"
 import { toast } from "sonner"
 import { useClerk } from "@clerk/nextjs"
 
@@ -23,7 +23,7 @@ import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import GenerateInput from "./generate"
 import { Sandbox, User, TFile, TFolder, TTab } from "@/lib/types"
-import { addNew, processFileType, validateName, debounce } from "@/lib/utils"
+import { addNew, processFileType, validateName } from "@/lib/utils"
 import { Cursors } from "./live/cursors"
 import { Terminal } from "@xterm/xterm"
 import DisableAccessModal from "./live/disableModal"
@@ -41,16 +41,12 @@ export default function CodeEditor({
   sandboxData: Sandbox
   reactDefinitionFile: string
 }) {
-  const socketRef = useRef<Socket | null>(null);
+  const socket = io(
-
-  // Initialize socket connection if it doesn't exist
-  if (!socketRef.current) {
-    socketRef.current = io(
     `${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
     {
       timeout: 2000,
     }
-    );}
+  )
 
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
   const [disableAccess, setDisableAccess] = useState({
@@ -94,9 +90,6 @@ export default function CodeEditor({
     }[]
   >([])
 
-  // Preview state
-  const [previewURL, setPreviewURL] = useState<string>("");
-
   const isOwner = sandboxData.userId === userData.id
   const clerk = useClerk()
 
@@ -297,33 +290,26 @@ export default function CodeEditor({
   }, [decorations.options])
 
   // Save file keybinding logic effect
-  const debouncedSaveData = useCallback(
+  useEffect(() => {
-    debounce((value: string | undefined, activeFileId: string | undefined) => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+
         setTabs((prev) =>
           prev.map((tab) =>
             tab.id === activeFileId ? { ...tab, saved: true } : tab
           )
-      );
+        )
-      console.log(`Saving file...${activeFileId}`);
-      console.log(`Saving file...${value}`);
-      socketRef.current?.emit("saveFile", activeFileId, value);
-    }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY)||1000),
-    [socketRef]
-  );
 
-  useEffect(() => {
+        socket.emit("saveFile", activeFileId, editorRef?.getValue())
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        debouncedSaveData(editorRef?.getValue(), activeFileId);
       }
-    };
+    }
-    document.addEventListener("keydown", down);
+    document.addEventListener("keydown", down)
 
     return () => {
-      document.removeEventListener("keydown", down);
+      document.removeEventListener("keydown", down)
-    };
+    }
-  }, [activeFileId, tabs, debouncedSaveData]);
+  }, [tabs, activeFileId])
 
   // Liveblocks live collaboration setup effect
   useEffect(() => {
@@ -372,10 +358,10 @@ export default function CodeEditor({
 
   // Connection/disconnection effect
   useEffect(() => {
-    socketRef.current?.connect()
+    socket.connect()
 
     return () => {
-      socketRef.current?.disconnect()
+      socket.disconnect()
     }
   }, [])
 
@@ -391,7 +377,7 @@ export default function CodeEditor({
       setFiles(files)
     }
 
-    const onError = (message: string) => {
+    const onRateLimit = (message: string) => {
       toast.error(message)
     }
 
@@ -410,22 +396,20 @@ export default function CodeEditor({
         })
     }
 
-    socketRef.current?.on("connect", onConnect)
+    socket.on("connect", onConnect)
-    socketRef.current?.on("disconnect", onDisconnect)
+    socket.on("disconnect", onDisconnect)
-    socketRef.current?.on("loaded", onLoadedEvent)
+    socket.on("loaded", onLoadedEvent)
-    socketRef.current?.on("error", onError)
+    socket.on("rateLimit", onRateLimit)
-    socketRef.current?.on("terminalResponse", onTerminalResponse)
+    socket.on("terminalResponse", onTerminalResponse)
-    socketRef.current?.on("disableAccess", onDisableAccess)
+    socket.on("disableAccess", onDisableAccess)
-    socketRef.current?.on("previewURL", setPreviewURL)
 
     return () => {
-      socketRef.current?.off("connect", onConnect)
+      socket.off("connect", onConnect)
-      socketRef.current?.off("disconnect", onDisconnect)
+      socket.off("disconnect", onDisconnect)
-      socketRef.current?.off("loaded", onLoadedEvent)
+      socket.off("loaded", onLoadedEvent)
-      socketRef.current?.off("error", onError)
+      socket.off("rateLimit", onRateLimit)
-      socketRef.current?.off("terminalResponse", onTerminalResponse)
+      socket.off("terminalResponse", onTerminalResponse)
-      socketRef.current?.off("disableAccess", onDisableAccess)
+      socket.off("disableAccess", onDisableAccess)
-      socketRef.current?.off("previewURL", setPreviewURL)
     }
     // }, []);
   }, [terminals])
@@ -433,45 +417,32 @@ export default function CodeEditor({
   // Helper functions for tabs:
 
   // Select file and load content
+  const selectFile = (tab: TTab) => {
+    if (tab.id === activeFileId) return
 
-  // Initialize debounced function once
+    setGenerate((prev) => {
-  const fileCache = useRef(new Map());
+      return {
+        ...prev,
+        show: false,
+      }
+    })
+    const exists = tabs.find((t) => t.id === tab.id)
 
-  // Debounced function to get file content
-  const debouncedGetFile = useCallback(
-    debounce((tabId, callback) => {
-      socketRef.current?.emit('getFile', tabId, callback);
-    }, 300), // 300ms debounce delay, adjust as needed
-    []
-  );
-
-  const selectFile = useCallback((tab: TTab) => {
-    if (tab.id === activeFileId) return;
-
-    setGenerate((prev) => ({ ...prev, show: false }));
-
-    const exists = tabs.find((t) => t.id === tab.id);
     setTabs((prev) => {
       if (exists) {
-        setActiveFileId(exists.id);
+        setActiveFileId(exists.id)
-        return prev;
+        return prev
       }
-      return [...prev, tab];
+      return [...prev, tab]
-    });
+    })
 
-    if (fileCache.current.has(tab.id)) {
+    socket.emit("getFile", tab.id, (response: string) => {
-      setActiveFileContent(fileCache.current.get(tab.id));
+      setActiveFileContent(response)
-    } else {
+    })
-      debouncedGetFile(tab.id, (response: SetStateAction<string>) => {
+    setEditorLanguage(processFileType(tab.name))
-        fileCache.current.set(tab.id, response);
+    setActiveFileId(tab.id)
-        setActiveFileContent(response);
-      });
   }
 
-    setEditorLanguage(processFileType(tab.name));
-    setActiveFileId(tab.id);
-  }, [activeFileId, tabs, debouncedGetFile]);
-
   // Close tab and remove from tabs
   const closeTab = (id: string) => {
     const numTabs = tabs.length
@@ -544,7 +515,7 @@ export default function CodeEditor({
       return false
     }
 
-    socketRef.current?.emit("renameFile", id, newName)
+    socket.emit("renameFile", id, newName)
     setTabs((prev) =>
       prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
     )
@@ -553,7 +524,7 @@ export default function CodeEditor({
   }
 
   const handleDeleteFile = (file: TFile) => {
-    socketRef.current?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
+    socket.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
       setFiles(response)
     })
     closeTab(file.id)
@@ -563,11 +534,11 @@ export default function CodeEditor({
     setDeletingFolderId(folder.id)
     console.log("deleting folder", folder.id)
 
-    socketRef.current?.emit("getFolder", folder.id, (response: string[]) =>
+    socket.emit("getFolder", folder.id, (response: string[]) =>
       closeTabs(response)
     )
 
-    socketRef.current?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
+    socket.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
       setFiles(response)
       setDeletingFolderId("")
     })
@@ -594,7 +565,7 @@ export default function CodeEditor({
         {generate.show && ai ? (
           <GenerateInput
             user={userData}
-            socket={socketRef.current}
+            socket={socket}
             width={generate.width - 90}
             data={{
               fileName: tabs.find((t) => t.id === activeFileId)?.name ?? "",
@@ -654,7 +625,7 @@ export default function CodeEditor({
         handleRename={handleRename}
         handleDeleteFile={handleDeleteFile}
         handleDeleteFolder={handleDeleteFolder}
-        socket={socketRef.current}
+        socket={socket}
         setFiles={setFiles}
         addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
         deletingFolderId={deletingFolderId}
@@ -774,7 +745,6 @@ export default function CodeEditor({
                   previewPanelRef.current?.expand()
                   setIsPreviewCollapsed(false)
                 }}
-                src={previewURL}
               />
             </ResizablePanel>
             <ResizableHandle />
@@ -787,7 +757,7 @@ export default function CodeEditor({
                 <Terminals
                   terminals={terminals}
                   setTerminals={setTerminals}
-                  socket={socketRef.current}
+                  socket={socket}
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
@@ -802,4 +772,3 @@ export default function CodeEditor({
     </>
   )
 }
-

frontend/components/editor/navbar/share.tsx

@@ -120,7 +120,7 @@ export default function ShareSandboxModal({
             <Button
               onClick={() => {
                 navigator.clipboard.writeText(
-                  `${process.env.NEXT_PUBLIC_APP_URL}/code/${data.id}`
+                  `${window.location.protocol}//${window.location.hostname}/code/${data.id}`
                 )
                 toast.success("Link copied to clipboard.")
               }}

frontend/components/editor/preview/index.tsx

@@ -15,11 +15,9 @@ import { toast } from "sonner"
 export default function PreviewWindow({
   collapsed,
   open,
-  src
 }: {
   collapsed: boolean
   open: () => void
-  src: string
 }) {
   const ref = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
@@ -47,7 +45,7 @@ export default function PreviewWindow({
 
                 <PreviewButton
                   onClick={() => {
-                    navigator.clipboard.writeText(src)
+                    navigator.clipboard.writeText(`${window.location.protocol}//${window.location.hostname}:5173`)
                     toast.info("Copied preview link to clipboard")
                   }}
                 >
@@ -75,7 +73,7 @@ export default function PreviewWindow({
             ref={ref}
             width={"100%"}
             height={"100%"}
-            src={src}
+            src={`${window.location.protocol}//${window.location.hostname}:5173`}
           />
         </div>
       )}

frontend/lib/utils.ts

@@ -61,13 +61,3 @@ export function addNew(
     ])
   }
 }
-
-export function debounce<T extends (...args: any[]) => void>(func: T, wait: number): T {
-  let timeout: NodeJS.Timeout | null = null;
-  return function (...args: Parameters<T>) {
-      if (timeout) {
-          clearTimeout(timeout);
-      }
-      timeout = setTimeout(() => func(...args), wait);
-  } as T;
-}