Chore: Change about to help, and add link to Discord

fix: comment out live collaboration features
fix: type errors, shared page avatars and project icons
2024-11-17 18:10:19 -05:00 · 2024-11-17 17:52:39 -05:00 · 2024-11-11 16:02:26 -05:00 · 2024-11-11 16:01:47 -05:00 · 2024-11-10 21:52:52 -05:00 · 2024-11-09 17:57:48 -05:00
68 changed files with 12683 additions and 10046 deletions
--- a/README.md
+++ b/README.md
@ -11,7 +11,6 @@ For the latest updates, join our Discord server: [discord.gitwit.dev](https://di
 Notes:

 - Double check that whatever you change "SUPERDUPERSECRET" to, it's the same in all config files.
- Right now we are loading project templates from a custom Cloudflare bucket which isn't covered in this guide, but that be updated/fixed very soon.

 ### 0. Requirements

@ -197,13 +196,48 @@ DOKKU_KEY=

 ## Creating Custom Templates

-We're working on a process whereby anyone can contribute a custom template that others can use in the Sandbox environment. The process includes:
+Anyone can contribute a custom template for integration in Sandbox. Since Sandbox is built on E2B, there is no limitation to what langauge or runtime a Sandbox can use.

- Creating a [custom E2B Sandbox](https://e2b.dev/docs/sandbox-template) including the template files and dependencies
- Creating a file to specify the run command (e.g. "npm run dev")
- Testing the template with Dokku for deployment
+Currently there are four templates:
+- [jamesmurdza/dokku-reactjs-template](https://github.com/jamesmurdza/dokku-reactjs-template)
+- [jamesmurdza/dokku-vanillajs-template](https://github.com/jamesmurdza/dokku-vanillajs-template)
+- [jamesmurdza/dokku-nextjs-template](https://github.com/jamesmurdza/dokku-nextjs-template)
+- [jamesmurdza/dokku-streamlit-template](https://github.com/jamesmurdza/dokku-streamlit-template)

-Please reach out to us [on Discord](https://discord.gitwit.dev/) if you're interested in contributing.
+To create your own template, you can fork one of the above templates or start with a new blank repository. The template should have at least an `e2b.Dockerfile`, which is used by E2B to create the development environment. Optionally, a `Dockerfile` can be added which will be used to create the project build when it is deployed.
+
+To test the template, you must have an [E2B account](https://e2b.dev/) and the [E2B CLI tools](https://e2b.dev/docs/cli) installed. Then, in the Terminal, run:
+
+```
+e2b auth login
+```
+
+Then, navigate to your template directory and run the following command where **TEMPLATENAME** is the name of your template:
+
+```
+e2b template build -d e2b.Dockerfile -n TEMPLATENAME
+```
+
+Finally, to test your template run:
+
+```
+e2b sandbox spawn TEMPLATENAME
+cd project
+```
+
+You will see a URL in the form of `https://xxxxxxxxxxxxxxxxxxx.e2b-staging.com`.
+
+Now, run the command to start your development server.
+
+To see the running server, visit the public url `https://<PORT>-xxxxxxxxxxxxxxxxxxx.e2b-staging.com`.
+
+If you've done this and it works, let us know and we'll add your template to Sandbox! Please reach out to us [on Discord](https://discord.gitwit.dev/) with any questions or to submit your working template.
+
+Note: In the future, we will add a way to specify the command triggered by the "Run" button (e.g. "npm run dev").
+
+For more information, see:
+- [Custom E2B Sandboxes](https://e2b.dev/docs/sandbox-template)
+- [Dokku Builders](https://dokku.com/docs/deployment/builders/builder-management/)

 ## Contributing

--- a/backend/database/drizzle/meta/0000_snapshot.json
+++ b/backend/database/drizzle/meta/0000_snapshot.json
@ -1,7 +1,7 @@
 {
  "version": "5",
  "dialect": "sqlite",
-  "id": "6570ba20-a672-400c-8147-7ba533784918",
+  "id": "afe10bff-362b-402c-bdb5-038341692f35",
  "prevId": "00000000-0000-0000-0000-000000000000",
  "tables": {
    "sandbox": {
@ -35,12 +35,36 @@
          "notNull": false,
          "autoincrement": false
        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
        "user_id": {
          "name": "user_id",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
+        },
+        "likeCount": {
+          "name": "likeCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "viewCount": {
+          "name": "viewCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
        }
      },
      "indexes": {
@ -93,6 +117,43 @@
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatarUrl": {
+          "name": "avatarUrl",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "generations": {
+          "name": "generations",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
        }
      },
      "indexes": {
@ -102,6 +163,13 @@
            "id"
          ],
          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
        }
      },
      "foreignKeys": {},
@ -124,6 +192,13 @@
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
+        },
+        "sharedOn": {
+          "name": "sharedOn",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
        }
      },
      "indexes": {},
--- a/backend/database/drizzle/meta/0001_snapshot.json
+++ b/backend/database/drizzle/meta/0001_snapshot.json
@ -1,8 +1,8 @@
 {
  "version": "5",
  "dialect": "sqlite",
-  "id": "9f64104a-4954-40c0-8155-17755ea0a243",
-  "prevId": "6570ba20-a672-400c-8147-7ba533784918",
+  "id": "e570d5ac-700d-4e62-8a46-482b21ae1fe1",
+  "prevId": "afe10bff-362b-402c-bdb5-038341692f35",
  "tables": {
    "sandbox": {
      "name": "sandbox",
@ -35,12 +35,36 @@
          "notNull": false,
          "autoincrement": false
        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
        "user_id": {
          "name": "user_id",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
+        },
+        "likeCount": {
+          "name": "likeCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "viewCount": {
+          "name": "viewCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
        }
      },
      "indexes": {
@ -94,12 +118,35 @@
          "notNull": true,
          "autoincrement": false
        },
-        "image": {
-          "name": "image",
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatarUrl": {
+          "name": "avatarUrl",
          "type": "text",
          "primaryKey": false,
          "notNull": false,
          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "generations": {
+          "name": "generations",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
        }
      },
      "indexes": {
@ -109,6 +156,13 @@
            "id"
          ],
          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
        }
      },
      "foreignKeys": {},
@ -131,6 +185,13 @@
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
+        },
+        "sharedOn": {
+          "name": "sharedOn",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
        }
      },
      "indexes": {},
--- a/backend/database/drizzle/meta/0002_snapshot.json
+++ b/backend/database/drizzle/meta/0002_snapshot.json
@ -1,168 +0,0 @@
-{
-  "version": "5",
-  "dialect": "sqlite",
-  "id": "5baf10d6-7697-42ba-a11a-ee4c7bd7e91e",
-  "prevId": "9f64104a-4954-40c0-8155-17755ea0a243",
-  "tables": {
-    "sandbox": {
-      "name": "sandbox",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "visibility": {
-          "name": "visibility",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "sandbox_id_unique": {
-          "name": "sandbox_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "sandbox_user_id_user_id_fk": {
-          "name": "sandbox_user_id_user_id_fk",
-          "tableFrom": "sandbox",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "user": {
-      "name": "user",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "user_id_unique": {
-          "name": "user_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users_to_sandboxes": {
-      "name": "users_to_sandboxes",
-      "columns": {
-        "userId": {
-          "name": "userId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "sandboxId": {
-          "name": "sandboxId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "users_to_sandboxes_userId_user_id_fk": {
-          "name": "users_to_sandboxes_userId_user_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "user",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        },
-        "users_to_sandboxes_sandboxId_sandbox_id_fk": {
-          "name": "users_to_sandboxes_sandboxId_sandbox_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "sandbox",
-          "columnsFrom": [
-            "sandboxId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {},
-  "_meta": {
-    "schemas": {},
-    "tables": {},
-    "columns": {}
-  }
-}
--- a/backend/database/drizzle/meta/0003_snapshot.json
+++ b/backend/database/drizzle/meta/0003_snapshot.json
@ -1,175 +0,0 @@
-{
-  "version": "5",
-  "dialect": "sqlite",
-  "id": "37e38b82-1494-4818-8c26-b9024cce3fa9",
-  "prevId": "5baf10d6-7697-42ba-a11a-ee4c7bd7e91e",
-  "tables": {
-    "sandbox": {
-      "name": "sandbox",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "visibility": {
-          "name": "visibility",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "sandbox_id_unique": {
-          "name": "sandbox_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "sandbox_user_id_user_id_fk": {
-          "name": "sandbox_user_id_user_id_fk",
-          "tableFrom": "sandbox",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "user": {
-      "name": "user",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "user_id_unique": {
-          "name": "user_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users_to_sandboxes": {
-      "name": "users_to_sandboxes",
-      "columns": {
-        "userId": {
-          "name": "userId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "sandboxId": {
-          "name": "sandboxId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "users_to_sandboxes_userId_user_id_fk": {
-          "name": "users_to_sandboxes_userId_user_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "user",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        },
-        "users_to_sandboxes_sandboxId_sandbox_id_fk": {
-          "name": "users_to_sandboxes_sandboxId_sandbox_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "sandbox",
-          "columnsFrom": [
-            "sandboxId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {},
-  "_meta": {
-    "schemas": {},
-    "tables": {},
-    "columns": {}
-  }
-}
--- a/backend/database/drizzle/meta/_journal.json
+++ b/backend/database/drizzle/meta/_journal.json
@ -5,50 +5,29 @@
    {
      "idx": 0,
      "version": "5",
-      "when": 1714540200800,
-      "tag": "0000_big_rogue",
+      "when": 1731288423588,
+      "tag": "0000_cuddly_patriot",
      "breakpoints": true
    },
    {
      "idx": 1,
      "version": "5",
-      "when": 1714541190588,
-      "tag": "0001_empty_black_knight",
+      "when": 1731290863632,
+      "tag": "0001_opposite_newton_destine",
      "breakpoints": true
    },
    {
      "idx": 2,
      "version": "5",
-      "when": 1714541209173,
-      "tag": "0002_sour_ego",
+      "when": 1731296235880,
+      "tag": "0002_rainy_fantastic_four",
      "breakpoints": true
    },
    {
      "idx": 3,
      "version": "5",
-      "when": 1714541233589,
-      "tag": "0003_pale_overlord",
-      "breakpoints": true
-    },
-    {
-      "idx": 4,
-      "version": "5",
-      "when": 1714565073180,
-      "tag": "0004_cuddly_wolf_cub",
-      "breakpoints": true
-    },
-    {
-      "idx": 5,
-      "version": "5",
-      "when": 1714950365718,
-      "tag": "0005_last_the_twelve",
-      "breakpoints": true
-    },
-    {
-      "idx": 6,
-      "version": "5",
-      "when": 1716432225404,
-      "tag": "0006_lively_mattie_franklin",
+      "when": 1731297339306,
+      "tag": "0003_lying_snowbird",
      "breakpoints": true
    }
  ]
--- a/backend/database/package-lock.json
+++ b/backend/database/package-lock.json
--- a/backend/database/package.json
+++ b/backend/database/package.json
@ -18,7 +18,7 @@
 		"drizzle-kit": "^0.20.17",
 		"typescript": "^5.0.4",
 		"vitest": "1.3.0",
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.86.0"
 	},
 	"dependencies": {
 		"@paralleldrive/cuid2": "^2.2.2",
@ -29,4 +29,4 @@
 		"itty-router-extras": "^0.4.6",
 		"zod": "^3.22.4"
 	}
-}
+}
--- a/backend/database/src/index.ts
+++ b/backend/database/src/index.ts
@ -169,6 +169,7 @@ export default {
 								name: sb.name,
 								type: sb.type,
 								author: sb.author.name,
+								authorAvatarUrl: sb.author.avatarUrl,
 								sharedOn: r.sharedOn,
 							}
 						})
@ -282,14 +283,26 @@ export default {
 					id: z.string(),
 					name: z.string(),
 					email: z.string().email(),
+					username: z.string(),
+					avatarUrl: z.string().optional(),
+					createdAt: z.string().optional(),
+					generations: z.number().optional(),
 				})

 				const body = await request.json()
-				const { id, name, email } = userSchema.parse(body)
+				const { id, name, email, username, avatarUrl, createdAt, generations } = userSchema.parse(body)

 				const res = await db
 					.insert(user)
-					.values({ id, name, email })
+					.values({
+						id,
+						name,
+						email,
+						username,
+						avatarUrl,
+						createdAt: createdAt ? new Date(createdAt) : new Date(),
+						generations,
+					})
 					.returning()
 					.get()
 				return json({ res })
@ -303,6 +316,20 @@ export default {
 			} else {
 				return methodNotAllowed
 			}
+		} else if (path === "/api/user/check-username") {
+			if (method === "GET") {
+				const params = url.searchParams
+				const username = params.get("username")
+
+				if (!username) return invalidRequest
+
+				const exists = await db.query.user.findFirst({
+					where: (user, { eq }) => eq(user.username, username)
+				})
+
+				return json({ exists: !!exists })
+			}
+			return methodNotAllowed
 		} else return notFound
 	},
 }
--- a/backend/database/src/schema.ts
+++ b/backend/database/src/schema.ts
@ -1,6 +1,7 @@
 import { createId } from "@paralleldrive/cuid2"
 import { relations } from "drizzle-orm"
 import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core"
+import { sql } from "drizzle-orm"

 export const user = sqliteTable("user", {
 	id: text("id")
@ -9,7 +10,10 @@ export const user = sqliteTable("user", {
 		.unique(),
 	name: text("name").notNull(),
 	email: text("email").notNull(),
-	image: text("image"),
+	username: text("username").notNull().unique(),
+	avatarUrl: text("avatarUrl"),
+	createdAt: integer("createdAt", { mode: "timestamp_ms" })
+		.default(sql`CURRENT_TIMESTAMP`),
 	generations: integer("generations").default(0),
 })

@ -28,10 +32,13 @@ export const sandbox = sqliteTable("sandbox", {
 	name: text("name").notNull(),
 	type: text("type").notNull(),
 	visibility: text("visibility", { enum: ["public", "private"] }),
-	createdAt: integer("createdAt", { mode: "timestamp_ms" }),
+	createdAt: integer("createdAt", { mode: "timestamp_ms" })
+		.default(sql`CURRENT_TIMESTAMP`),
 	userId: text("user_id")
 		.notNull()
 		.references(() => user.id),
+	likeCount: integer("likeCount").default(0),
+	viewCount: integer("viewCount").default(0),
 })

 export type Sandbox = typeof sandbox.$inferSelect
--- a/backend/server/.env.example
+++ b/backend/server/.env.example
@ -7,6 +7,7 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
+AI_WORKER_URL=
 E2B_API_KEY=
 DOKKU_HOST=
 DOKKU_USERNAME=
--- a/backend/server/src/ConnectionManager.ts
+++ b/backend/server/src/ConnectionManager.ts
@ -0,0 +1,58 @@
+import { Socket } from "socket.io"
+
+class Counter {
+    private count: number = 0
+
+    increment() {
+        this.count++
+    }
+
+    decrement() {
+        this.count = Math.max(0, this.count - 1)
+    }
+
+    getValue(): number {
+        return this.count
+    }
+}
+
+// Owner Connection Management
+export class ConnectionManager {
+    // Counts how many times the owner is connected to a sandbox
+    private ownerConnections: Record<string, Counter> = {}
+    // Stores all sockets connected to a given sandbox
+    private sockets: Record<string, Set<Socket>> = {}
+
+    // Checks if the owner of a sandbox is connected
+    ownerIsConnected(sandboxId: string): boolean {
+        return this.ownerConnections[sandboxId]?.getValue() > 0
+    }
+
+    // Adds a connection for a sandbox
+    addConnectionForSandbox(socket: Socket, sandboxId: string, isOwner: boolean) {
+        this.sockets[sandboxId] ??= new Set()
+        this.sockets[sandboxId].add(socket)
+
+        // If the connection is for the owner, increments the owner connection counter
+        if (isOwner) {
+            this.ownerConnections[sandboxId] ??= new Counter()
+            this.ownerConnections[sandboxId].increment()
+        }
+    }
+
+    // Removes a connection for a sandbox
+    removeConnectionForSandbox(socket: Socket, sandboxId: string, isOwner: boolean) {
+        this.sockets[sandboxId]?.delete(socket)
+
+        // If the connection being removed is for the owner, decrements the owner connection counter
+        if (isOwner) {
+            this.ownerConnections[sandboxId]?.decrement()
+        }
+    }
+
+    // Returns the set of sockets connected to a given sandbox
+    connectionsForSandbox(sandboxId: string): Set<Socket> {
+        return this.sockets[sandboxId] ?? new Set();
+    }
+
+}
--- a/backend/server/src/FileManager.ts
+++ b/backend/server/src/FileManager.ts
@ -4,12 +4,6 @@ import RemoteFileStorage from "./RemoteFileStorage"
 import { MAX_BODY_SIZE } from "./ratelimit"
 import { TFile, TFileData, TFolder } from "./types"

-// Define the structure for sandbox files
-export type SandboxFiles = {
-  files: (TFolder | TFile)[]
-  fileData: TFileData[]
-}
-
 // Convert list of paths to the hierchical file structure used by the editor
 function generateFileStructure(paths: string[]): (TFolder | TFile)[] {
  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
@ -52,20 +46,22 @@ function generateFileStructure(paths: string[]): (TFolder | TFile)[] {
 export class FileManager {
  private sandboxId: string
  private sandbox: Sandbox
-  public sandboxFiles: SandboxFiles
+  public files: (TFolder | TFile)[]
+  public fileData: TFileData[]
  private fileWatchers: WatchHandle[] = []
  private dirName = "/home/user/project"
-  private refreshFileList: (files: SandboxFiles) => void
+  private refreshFileList: ((files: (TFolder | TFile)[]) => void) | null

  // Constructor to initialize the FileManager
  constructor(
    sandboxId: string,
    sandbox: Sandbox,
-    refreshFileList: (files: SandboxFiles) => void
+    refreshFileList: ((files: (TFolder | TFile)[]) => void) | null
  ) {
    this.sandboxId = sandboxId
    this.sandbox = sandbox
-    this.sandboxFiles = { files: [], fileData: [] }
+    this.files = []
+    this.fileData = []
    this.refreshFileList = refreshFileList
  }

@ -110,16 +106,16 @@ export class FileManager {
  private async updateFileData(): Promise<TFileData[]> {
    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
    const localPaths = this.getLocalFileIds(remotePaths)
-    this.sandboxFiles.fileData = await this.generateFileData(localPaths)
-    return this.sandboxFiles.fileData
+    this.fileData = await this.generateFileData(localPaths)
+    return this.fileData
  }

  // Update file structure
  private async updateFileStructure(): Promise<(TFolder | TFile)[]> {
    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
    const localPaths = this.getLocalFileIds(remotePaths)
-    this.sandboxFiles.files = generateFileStructure(localPaths)
-    return this.sandboxFiles.files
+    this.files = generateFileStructure(localPaths)
+    return this.files
  }

  // Initialize the FileManager
@ -130,9 +126,9 @@ export class FileManager {
    await this.updateFileData()

    // Copy all files from the project to the container
-    const promises = this.sandboxFiles.fileData.map(async (file) => {
+    const promises = this.fileData.map(async (file) => {
      try {
-        const filePath = path.join(this.dirName, file.id)
+        const filePath = path.posix.join(this.dirName, file.id)
        const parentDirectory = path.dirname(filePath)
        if (!this.sandbox.files.exists(parentDirectory)) {
          await this.sandbox.files.makeDir(parentDirectory)
@ -144,6 +140,12 @@ export class FileManager {
    })
    await Promise.all(promises)

+    // Reload file list from the container to include template files
+    const result = await this.sandbox.commands.run(`find "${this.dirName}" -type f`); // List all files recursively
+    const localPaths = result.stdout.split('\n').filter(path => path); // Split the output into an array and filter out empty strings
+    const relativePaths = localPaths.map(filePath => path.posix.relative(this.dirName, filePath)); // Convert absolute paths to relative paths
+    this.files = generateFileStructure(relativePaths);
+
    // Make the logged in user the owner of all project files
    this.fixPermissions()

@ -209,7 +211,7 @@ export class FileManager {
            // Handle file/directory creation event
            if (event.type === "create") {
              const folder = findFolderById(
-                this.sandboxFiles.files,
+                this.files,
                sandboxDirectory
              ) as TFolder
              const isDir = await this.isDirectory(containerFilePath)
@ -232,7 +234,7 @@ export class FileManager {
                folder.children.push(newItem)
              } else {
                // If folder doesn't exist, add the new item to the root
-                this.sandboxFiles.files.push(newItem)
+                this.files.push(newItem)
              }

              if (!isDir) {
@ -241,7 +243,7 @@ export class FileManager {
                )
                const fileContents =
                  typeof fileData === "string" ? fileData : ""
-                this.sandboxFiles.fileData.push({
+                this.fileData.push({
                  id: sandboxFilePath,
                  data: fileContents,
                })
@ -253,7 +255,7 @@ export class FileManager {
            // Handle file/directory removal or rename event
            else if (event.type === "remove" || event.type == "rename") {
              const folder = findFolderById(
-                this.sandboxFiles.files,
+                this.files,
                sandboxDirectory
              ) as TFolder
              const isDir = await this.isDirectory(containerFilePath)
@ -269,13 +271,13 @@ export class FileManager {
                )
              } else {
                // Remove from the root if it's not inside a folder
-                this.sandboxFiles.files = this.sandboxFiles.files.filter(
+                this.files = this.files.filter(
                  (file: TFolder | TFile) => !isFileMatch(file)
                )
              }

              // Also remove any corresponding file data
-              this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+              this.fileData = this.fileData.filter(
                (file: TFileData) => !isFileMatch(file)
              )

@ -285,10 +287,10 @@ export class FileManager {
            // Handle file write event
            else if (event.type === "write") {
              const folder = findFolderById(
-                this.sandboxFiles.files,
+                this.files,
                sandboxDirectory
              ) as TFolder
-              const fileToWrite = this.sandboxFiles.fileData.find(
+              const fileToWrite = this.fileData.find(
                (file) => file.id === sandboxFilePath
              )

@ -308,7 +310,7 @@ export class FileManager {
                  )
                  const fileContents =
                    typeof fileData === "string" ? fileData : ""
-                  this.sandboxFiles.fileData.push({
+                  this.fileData.push({
                    id: sandboxFilePath,
                    data: fileContents,
                  })
@ -318,7 +320,9 @@ export class FileManager {
            }

            // Tell the client to reload the file list
-            this.refreshFileList(this.sandboxFiles)
+            if (event.type !== "chmod") {
+              this.refreshFileList?.(this.files)
+            }
          } catch (error) {
            console.error(
              `Error handling ${event.type} event for ${event.name}:`,
@ -350,8 +354,9 @@ export class FileManager {

  // Get file content
  async getFile(fileId: string): Promise<string | undefined> {
-    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
-    return file?.data
+    const filePath = path.posix.join(this.dirName, fileId)
+    const fileContent = await this.sandbox.files.read(filePath)
+    return fileContent
  }

  // Get folder content
@ -368,7 +373,7 @@ export class FileManager {
      throw new Error("File size too large. Please reduce the file size.")
    }
    await RemoteFileStorage.saveFile(this.getRemoteFileId(fileId), body)
-    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const file = this.fileData.find((f) => f.id === fileId)
    if (!file) return
    file.data = body

@ -381,9 +386,9 @@ export class FileManager {
    fileId: string,
    folderId: string
  ): Promise<(TFolder | TFile)[]> {
-    const fileData = this.sandboxFiles.fileData.find((f) => f.id === fileId)
-    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
-    if (!fileData || !file) return this.sandboxFiles.files
+    const fileData = this.fileData.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
+    if (!fileData || !file) return this.files

    const parts = fileId.split("/")
    const newFileId = folderId + "/" + parts.pop()
@ -427,13 +432,13 @@ export class FileManager {
    await this.sandbox.files.write(path.posix.join(this.dirName, id), "")
    await this.fixPermissions()

-    this.sandboxFiles.files.push({
+    this.files.push({
      id,
      name,
      type: "file",
    })

-    this.sandboxFiles.fileData.push({
+    this.fileData.push({
      id,
      data: "",
    })
@ -451,8 +456,8 @@ export class FileManager {

  // Rename a file
  async renameFile(fileId: string, newName: string): Promise<void> {
-    const fileData = this.sandboxFiles.fileData.find((f) => f.id === fileId)
-    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
+    const fileData = this.fileData.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
    if (!fileData || !file) return

    const parts = fileId.split("/")
@ -468,11 +473,11 @@ export class FileManager {

  // Delete a file
  async deleteFile(fileId: string): Promise<(TFolder | TFile)[]> {
-    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
-    if (!file) return this.sandboxFiles.files
+    const file = this.fileData.find((f) => f.id === fileId)
+    if (!file) return this.files

    await this.sandbox.files.remove(path.posix.join(this.dirName, fileId))
-    this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+    this.fileData = this.fileData.filter(
      (f) => f.id !== fileId
    )

@ -487,7 +492,7 @@ export class FileManager {
    await Promise.all(
      files.map(async (file) => {
        await this.sandbox.files.remove(path.posix.join(this.dirName, file))
-        this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+        this.fileData = this.fileData.filter(
          (f) => f.id !== file
        )
        await RemoteFileStorage.deleteFile(this.getRemoteFileId(file))
--- a/backend/server/src/Sandbox.ts
+++ b/backend/server/src/Sandbox.ts
@ -0,0 +1,262 @@
+import { Sandbox as E2BSandbox } from "e2b"
+import { Socket } from "socket.io"
+import { AIWorker } from "./AIWorker"
+import { CONTAINER_TIMEOUT } from "./constants"
+import { DokkuClient } from "./DokkuClient"
+import { FileManager } from "./FileManager"
+import {
+    createFileRL,
+    createFolderRL,
+    deleteFileRL,
+    renameFileRL,
+    saveFileRL,
+} from "./ratelimit"
+import { SecureGitClient } from "./SecureGitClient"
+import { TerminalManager } from "./TerminalManager"
+import { TFile, TFileData, TFolder } from "./types"
+import { LockManager } from "./utils"
+const lockManager = new LockManager()
+
+// Define a type for SocketHandler functions
+type SocketHandler<T = Record<string, any>> = (args: T) => any;
+
+// Extract port number from a string
+function extractPortNumber(inputString: string): number | null {
+    const cleanedString = inputString.replace(/\x1B\[[0-9;]*m/g, "")
+    const regex = /http:\/\/localhost:(\d+)/
+    const match = cleanedString.match(regex)
+    return match ? parseInt(match[1]) : null
+}
+
+type ServerContext = {
+    aiWorker: AIWorker;
+    dokkuClient: DokkuClient | null;
+    gitClient: SecureGitClient | null;
+};
+
+export class Sandbox {
+    // Sandbox properties:
+    sandboxId: string;
+    type: string;
+    fileManager: FileManager | null;
+    terminalManager: TerminalManager | null;
+    container: E2BSandbox | null;
+    // Server context:
+    dokkuClient: DokkuClient | null;
+    gitClient: SecureGitClient | null;
+    aiWorker: AIWorker;
+
+    constructor(sandboxId: string, type: string, { aiWorker, dokkuClient, gitClient }: ServerContext) {
+        // Sandbox properties:
+        this.sandboxId = sandboxId;
+        this.type = type;
+        this.fileManager = null;
+        this.terminalManager = null;
+        this.container = null;
+        // Server context:
+        this.aiWorker = aiWorker;
+        this.dokkuClient = dokkuClient;
+        this.gitClient = gitClient;
+    }
+
+    // Initializes the container for the sandbox environment
+    async initialize(
+        fileWatchCallback: ((files: (TFolder | TFile)[]) => void) | undefined
+    ) {
+        // Acquire a lock to ensure exclusive access to the sandbox environment
+        await lockManager.acquireLock(this.sandboxId, async () => {
+            // Check if a container already exists and is running
+            if (this.container && await this.container.isRunning()) {
+                console.log(`Found existing container ${this.sandboxId}`)
+            } else {
+                console.log("Creating container", this.sandboxId)
+                // Create a new container with a specified template and timeout
+                const templateTypes = ["vanillajs", "reactjs", "nextjs", "streamlit"];
+                const template = templateTypes.includes(this.type)
+                    ? `gitwit-${this.type}`
+                    : `base`;
+                this.container = await E2BSandbox.create(template, {
+                    timeoutMs: CONTAINER_TIMEOUT,
+                })
+            }
+        })
+        // Ensure a container was successfully created
+        if (!this.container) throw new Error("Failed to create container")
+
+        // Initialize the terminal manager if it hasn't been set up yet
+        if (!this.terminalManager) {
+            this.terminalManager = new TerminalManager(this.container)
+            console.log(`Terminal manager set up for ${this.sandboxId}`)
+        }
+
+        // Initialize the file manager if it hasn't been set up yet
+        if (!this.fileManager) {
+            this.fileManager = new FileManager(
+                this.sandboxId,
+                this.container,
+                fileWatchCallback ?? null
+            )
+            // Initialize the file manager and emit the initial files
+            await this.fileManager.initialize()
+        }
+    }
+
+    // Called when the client disconnects from the Sandbox
+    async disconnect() {
+        // Close all terminals managed by the terminal manager
+        await this.terminalManager?.closeAllTerminals()
+        // This way the terminal manager will be set up again if we reconnect
+        this.terminalManager = null;
+        // Close all file watchers managed by the file manager
+        await this.fileManager?.closeWatchers()
+        // This way the file manager will be set up again if we reconnect
+        this.fileManager = null;
+    }
+
+    handlers(connection: { userId: string, isOwner: boolean, socket: Socket }) {
+
+        // Handle heartbeat from a socket connection
+        const handleHeartbeat: SocketHandler = (_: any) => {
+            // Only keep the sandbox alive if the owner is still connected
+            if (connection.isOwner) {
+                this.container?.setTimeout(CONTAINER_TIMEOUT)
+            }
+        }
+
+        // Handle getting a file
+        const handleGetFile: SocketHandler = ({ fileId }: any) => {
+            return this.fileManager?.getFile(fileId)
+        }
+
+        // Handle getting a folder
+        const handleGetFolder: SocketHandler = ({ folderId }: any) => {
+            return this.fileManager?.getFolder(folderId)
+        }
+
+        // Handle saving a file
+        const handleSaveFile: SocketHandler = async ({ fileId, body }: any) => {
+            await saveFileRL.consume(connection.userId, 1);
+            return this.fileManager?.saveFile(fileId, body)
+        }
+
+        // Handle moving a file
+        const handleMoveFile: SocketHandler = ({ fileId, folderId }: any) => {
+            return this.fileManager?.moveFile(fileId, folderId)
+        }
+
+        // Handle listing apps
+        const handleListApps: SocketHandler = async (_: any) => {
+            if (!this.dokkuClient) throw Error("Failed to retrieve apps list: No Dokku client")
+            return { success: true, apps: await this.dokkuClient.listApps() }
+        }
+
+        // Handle deploying code
+        const handleDeploy: SocketHandler = async (_: any) => {
+            if (!this.gitClient) throw Error("No git client")
+            if (!this.fileManager) throw Error("No file manager")
+            await this.gitClient.pushFiles(this.fileManager?.fileData, this.sandboxId)
+            return { success: true }
+        }
+
+        // Handle creating a file
+        const handleCreateFile: SocketHandler = async ({ name }: any) => {
+            await createFileRL.consume(connection.userId, 1);
+            return { "success": await this.fileManager?.createFile(name) }
+        }
+
+        // Handle creating a folder
+        const handleCreateFolder: SocketHandler = async ({ name }: any) => {
+            await createFolderRL.consume(connection.userId, 1);
+            return { "success": await this.fileManager?.createFolder(name) }
+        }
+
+        // Handle renaming a file
+        const handleRenameFile: SocketHandler = async ({ fileId, newName }: any) => {
+            await renameFileRL.consume(connection.userId, 1)
+            return this.fileManager?.renameFile(fileId, newName)
+        }
+
+        // Handle deleting a file
+        const handleDeleteFile: SocketHandler = async ({ fileId }: any) => {
+            await deleteFileRL.consume(connection.userId, 1)
+            return this.fileManager?.deleteFile(fileId)
+        }
+
+        // Handle deleting a folder
+        const handleDeleteFolder: SocketHandler = ({ folderId }: any) => {
+            return this.fileManager?.deleteFolder(folderId)
+        }
+
+        // Handle creating a terminal session
+        const handleCreateTerminal: SocketHandler = async ({ id }: any) => {
+            await lockManager.acquireLock(this.sandboxId, async () => {
+                await this.terminalManager?.createTerminal(id, (responseString: string) => {
+                    connection.socket.emit("terminalResponse", { id, data: responseString })
+                    const port = extractPortNumber(responseString)
+                    if (port) {
+                        connection.socket.emit(
+                            "previewURL",
+                            "https://" + this.container?.getHost(port)
+                        )
+                    }
+                })
+            })
+        }
+
+        // Handle resizing a terminal
+        const handleResizeTerminal: SocketHandler = ({ dimensions }: any) => {
+            this.terminalManager?.resizeTerminal(dimensions)
+        }
+
+        // Handle sending data to a terminal
+        const handleTerminalData: SocketHandler = ({ id, data }: any) => {
+            return this.terminalManager?.sendTerminalData(id, data)
+        }
+
+        // Handle closing a terminal
+        const handleCloseTerminal: SocketHandler = ({ id }: any) => {
+            return this.terminalManager?.closeTerminal(id)
+        }
+
+        // Handle generating code
+        const handleGenerateCode: SocketHandler = ({ fileName, code, line, instructions }: any) => {
+            return this.aiWorker.generateCode(connection.userId, fileName, code, line, instructions)
+        }
+
+        // Handle downloading files by download button
+        const handleDownloadFiles: SocketHandler = async () => {
+            if (!this.fileManager) throw Error("No file manager")
+
+            // Get all files with their data through fileManager
+            const files = this.fileManager.fileData.map((file: TFileData) => ({
+                path: file.id.startsWith('/') ? file.id.slice(1) : file.id,
+                content: file.data
+            }))
+
+            return { files }
+        }
+
+        return {
+            "heartbeat": handleHeartbeat,
+            "getFile": handleGetFile,
+            "downloadFiles": handleDownloadFiles,
+            "getFolder": handleGetFolder,
+            "saveFile": handleSaveFile,
+            "moveFile": handleMoveFile,
+            "list": handleListApps,
+            "deploy": handleDeploy,
+            "createFile": handleCreateFile,
+            "createFolder": handleCreateFolder,
+            "renameFile": handleRenameFile,
+            "deleteFile": handleDeleteFile,
+            "deleteFolder": handleDeleteFolder,
+            "createTerminal": handleCreateTerminal,
+            "resizeTerminal": handleResizeTerminal,
+            "terminalData": handleTerminalData,
+            "closeTerminal": handleCloseTerminal,
+            "generateCode": handleGenerateCode,
+        };
+
+    }
+
+}
--- a/backend/server/src/constants.ts
+++ b/backend/server/src/constants.ts
@ -0,0 +1,2 @@
+// The amount of time in ms that a container will stay alive without a hearbeat.
+export const CONTAINER_TIMEOUT = 120_000
--- a/backend/server/src/index.ts
+++ b/backend/server/src/index.ts
@ -1,42 +1,39 @@
 import cors from "cors"
 import dotenv from "dotenv"
-import { Sandbox } from "e2b"
 import express, { Express } from "express"
 import fs from "fs"
 import { createServer } from "http"
-import { Server } from "socket.io"
-import { z } from "zod"
+import { Server, Socket } from "socket.io"
 import { AIWorker } from "./AIWorker"
+
+import { ConnectionManager } from "./ConnectionManager"
 import { DokkuClient } from "./DokkuClient"
-import { FileManager, SandboxFiles } from "./FileManager"
-import {
-  createFileRL,
-  createFolderRL,
-  deleteFileRL,
-  renameFileRL,
-  saveFileRL,
-} from "./ratelimit"
+import { Sandbox } from "./Sandbox"
 import { SecureGitClient } from "./SecureGitClient"
-import { TerminalManager } from "./TerminalManager"
-import { User } from "./types"
-import { LockManager } from "./utils"
+import { socketAuth } from "./socketAuth"; // Import the new socketAuth middleware
+import { TFile, TFolder } from "./types"
+
+// Log errors and send a notification to the client
+export const handleErrors = (message: string, error: any, socket: Socket) => {
+  console.error(message, error);
+  socket.emit("error", `${message} ${error.message ?? error}`);
+};

 // Handle uncaught exceptions
 process.on("uncaughtException", (error) => {
  console.error("Uncaught Exception:", error)
  // Do not exit the process
-  // You can add additional logging or recovery logic here
 })

 // Handle unhandled promise rejections
 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
 })

-// The amount of time in ms that a container will stay alive without a hearbeat.
-const CONTAINER_TIMEOUT = 120_000
+// Initialize containers and managers
+const connections = new ConnectionManager()
+const sandboxes: Record<string, Sandbox> = {}

 // Load environment variables
 dotenv.config()
@ -48,118 +45,39 @@ app.use(cors())
 const httpServer = createServer(app)
 const io = new Server(httpServer, {
  cors: {
-    origin: "*",
+    origin: "*", // Allow connections from any origin
  },
 })

-// Check if the sandbox owner is connected
-function isOwnerConnected(sandboxId: string): boolean {
-  return (connections[sandboxId] ?? 0) > 0
-}
-
-// Extract port number from a string
-function extractPortNumber(inputString: string): number | null {
-  const cleanedString = inputString.replace(/\x1B\[[0-9;]*m/g, "")
-  const regex = /http:\/\/localhost:(\d+)/
-  const match = cleanedString.match(regex)
-  return match ? parseInt(match[1]) : null
-}
-
-// Initialize containers and managers
-const containers: Record<string, Sandbox> = {}
-const connections: Record<string, number> = {}
-const fileManagers: Record<string, FileManager> = {}
-const terminalManagers: Record<string, TerminalManager> = {}
-
 // Middleware for socket authentication
-io.use(async (socket, next) => {
-  // Define the schema for handshake query validation
-  const handshakeSchema = z.object({
-    userId: z.string(),
-    sandboxId: z.string(),
-    EIO: z.string(),
-    transport: z.string(),
-  })
-
-  const q = socket.handshake.query
-  const parseQuery = handshakeSchema.safeParse(q)
-
-  // Check if the query is valid according to the schema
-  if (!parseQuery.success) {
-    next(new Error("Invalid request."))
-    return
-  }
-
-  const { sandboxId, userId } = parseQuery.data
-  // Fetch user data from the database
-  const dbUser = await fetch(
-    `${process.env.DATABASE_WORKER_URL}/api/user?id=${userId}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  )
-  const dbUserJSON = (await dbUser.json()) as User
-
-  // Check if user data was retrieved successfully
-  if (!dbUserJSON) {
-    next(new Error("DB error."))
-    return
-  }
-
-  // Check if the user owns the sandbox or has shared access
-  const sandbox = dbUserJSON.sandbox.find((s) => s.id === sandboxId)
-  const sharedSandboxes = dbUserJSON.usersToSandboxes.find(
-    (uts) => uts.sandboxId === sandboxId
-  )
-
-  // If user doesn't own or have shared access to the sandbox, deny access
-  if (!sandbox && !sharedSandboxes) {
-    next(new Error("Invalid credentials."))
-    return
-  }
-
-  // Set socket data with user information
-  socket.data = {
-    userId,
-    sandboxId: sandboxId,
-    isOwner: sandbox !== undefined,
-  }
-
-  // Allow the connection
-  next()
-})
-
-// Initialize lock manager
-const lockManager = new LockManager()
+io.use(socketAuth) // Use the new socketAuth middleware

 // Check for required environment variables
 if (!process.env.DOKKU_HOST)
-  console.error("Environment variable DOKKU_HOST is not defined")
+  console.warn("Environment variable DOKKU_HOST is not defined")
 if (!process.env.DOKKU_USERNAME)
-  console.error("Environment variable DOKKU_USERNAME is not defined")
+  console.warn("Environment variable DOKKU_USERNAME is not defined")
 if (!process.env.DOKKU_KEY)
-  console.error("Environment variable DOKKU_KEY is not defined")
+  console.warn("Environment variable DOKKU_KEY is not defined")

 // Initialize Dokku client
-const client =
+const dokkuClient =
  process.env.DOKKU_HOST && process.env.DOKKU_KEY && process.env.DOKKU_USERNAME
    ? new DokkuClient({
-        host: process.env.DOKKU_HOST,
-        username: process.env.DOKKU_USERNAME,
-        privateKey: fs.readFileSync(process.env.DOKKU_KEY),
-      })
+      host: process.env.DOKKU_HOST,
+      username: process.env.DOKKU_USERNAME,
+      privateKey: fs.readFileSync(process.env.DOKKU_KEY),
+    })
    : null
-client?.connect()
+dokkuClient?.connect()

 // Initialize Git client used to deploy Dokku apps
-const git =
+const gitClient =
  process.env.DOKKU_HOST && process.env.DOKKU_KEY
    ? new SecureGitClient(
-        `dokku@${process.env.DOKKU_HOST}`,
-        process.env.DOKKU_KEY
-      )
+      `dokku@${process.env.DOKKU_HOST}`,
+      process.env.DOKKU_KEY
+    )
    : null

 // Add this near the top of the file, after other initializations
@ -170,364 +88,97 @@ const aiWorker = new AIWorker(
  process.env.WORKERS_KEY!
 )

-// Handle socket connections
+// Handle a client connecting to the server
 io.on("connection", async (socket) => {
  try {
+    // This data comes is added by our authentication middleware
    const data = socket.data as {
      userId: string
      sandboxId: string
      isOwner: boolean
+      type: string
    }

-    // Handle connection based on user type (owner or not)
-    if (data.isOwner) {
-      connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1
-    } else {
-      if (!isOwnerConnected(data.sandboxId)) {
-        socket.emit("disableAccess", "The sandbox owner is not connected.")
-        return
-      }
+    // Register the connection
+    connections.addConnectionForSandbox(socket, data.sandboxId, data.isOwner)
+
+    // Disable access unless the sandbox owner is connected
+    if (!data.isOwner && !connections.ownerIsConnected(data.sandboxId)) {
+      socket.emit("disableAccess", "The sandbox owner is not connected.")
+      return
    }

-    // Create or retrieve container
-    const createdContainer = await lockManager.acquireLock(
-      data.sandboxId,
-      async () => {
-        try {
-          // Start a new container if the container doesn't exist or it timed out.
-          if (
-            !containers[data.sandboxId] ||
-            !(await containers[data.sandboxId].isRunning())
-          ) {
-            containers[data.sandboxId] = await Sandbox.create({
-              timeoutMs: CONTAINER_TIMEOUT,
-            })
-            console.log("Created container ", data.sandboxId)
-            return true
-          }
-        } catch (e: any) {
-          console.error(`Error creating container ${data.sandboxId}:`, e)
-          socket.emit("error", `Error: container creation. ${e.message ?? e}`)
-        }
-      }
-    )
-
-    // Function to send loaded event
-    const sendLoadedEvent = (files: SandboxFiles) => {
-      socket.emit("loaded", files.files)
-    }
-
-    // Initialize file and terminal managers if container was created
-    if (createdContainer) {
-      fileManagers[data.sandboxId] = new FileManager(
+    try {
+      // Create or retrieve the sandbox manager for the given sandbox ID
+      const sandbox = sandboxes[data.sandboxId] ?? new Sandbox(
        data.sandboxId,
-        containers[data.sandboxId],
-        sendLoadedEvent
+        data.type,
+        {
+          aiWorker, dokkuClient, gitClient,
+        }
      )
-      terminalManagers[data.sandboxId] = new TerminalManager(
-        containers[data.sandboxId]
-      )
-      console.log(`terminal manager set up for ${data.sandboxId}`)
-      await fileManagers[data.sandboxId].initialize()
-    }
+      sandboxes[data.sandboxId] = sandbox

-    const fileManager = fileManagers[data.sandboxId]
-    const terminalManager = terminalManagers[data.sandboxId]
+      // This callback recieves an update when the file list changes, and notifies all relevant connections.
+      const sendFileNotifications = (files: (TFolder | TFile)[]) => {
+        connections.connectionsForSandbox(data.sandboxId).forEach((socket: Socket) => {
+          socket.emit("loaded", files);
+        });
+      };

-    // Load file list from the file manager into the editor
-    sendLoadedEvent(fileManager.sandboxFiles)
+      // Initialize the sandbox container
+      // The file manager and terminal managers will be set up if they have been closed
+      await sandbox.initialize(sendFileNotifications)
+      socket.emit("loaded", sandbox.fileManager?.files)

-    // Handle various socket events (heartbeat, file operations, terminal operations, etc.)
-    socket.on("heartbeat", async () => {
-      try {
-        // This keeps the container alive for another CONTAINER_TIMEOUT seconds.
-        // The E2B docs are unclear, but the timeout is relative to the time of this method call.
-        await containers[data.sandboxId].setTimeout(CONTAINER_TIMEOUT)
-      } catch (e: any) {
-        console.error("Error setting timeout:", e)
-        socket.emit("error", `Error: set timeout. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to get file content
-    socket.on("getFile", async (fileId: string, callback) => {
-      try {
-        const fileContent = await fileManager.getFile(fileId)
-        callback(fileContent)
-      } catch (e: any) {
-        console.error("Error getting file:", e)
-        socket.emit("error", `Error: get file. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to get folder contents
-    socket.on("getFolder", async (folderId: string, callback) => {
-      try {
-        const files = await fileManager.getFolder(folderId)
-        callback(files)
-      } catch (e: any) {
-        console.error("Error getting folder:", e)
-        socket.emit("error", `Error: get folder. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to save file
-    socket.on("saveFile", async (fileId: string, body: string) => {
-      try {
-        await saveFileRL.consume(data.userId, 1)
-        await fileManager.saveFile(fileId, body)
-      } catch (e: any) {
-        console.error("Error saving file:", e)
-        socket.emit("error", `Error: file saving. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to move file
-    socket.on(
-      "moveFile",
-      async (fileId: string, folderId: string, callback) => {
-        try {
-          const newFiles = await fileManager.moveFile(fileId, folderId)
-          callback(newFiles)
-        } catch (e: any) {
-          console.error("Error moving file:", e)
-          socket.emit("error", `Error: file moving. ${e.message ?? e}`)
-        }
-      }
-    )
-
-    interface CallbackResponse {
-      success: boolean
-      apps?: string[]
-      message?: string
-    }
-
-    // Handle request to list apps
-    socket.on(
-      "list",
-      async (callback: (response: CallbackResponse) => void) => {
-        console.log("Retrieving apps list...")
-        try {
-          if (!client)
-            throw Error("Failed to retrieve apps list: No Dokku client")
-          callback({
-            success: true,
-            apps: await client.listApps(),
-          })
-        } catch (error) {
-          callback({
-            success: false,
-            message: "Failed to retrieve apps list",
-          })
-        }
-      }
-    )
-
-    // Handle request to deploy project
-    socket.on(
-      "deploy",
-      async (callback: (response: CallbackResponse) => void) => {
-        try {
-          // Push the project files to the Dokku server
-          console.log("Deploying project ${data.sandboxId}...")
-          if (!git) throw Error("Failed to retrieve apps list: No git client")
-          // Remove the /project/[id]/ component of each file path:
-          const fixedFilePaths = fileManager.sandboxFiles.fileData.map(
-            (file) => {
-              return {
-                ...file,
-                id: file.id.split("/").slice(2).join("/"),
-              }
-            }
-          )
-          // Push all files to Dokku.
-          await git.pushFiles(fixedFilePaths, data.sandboxId)
-          callback({
-            success: true,
-          })
-        } catch (error) {
-          callback({
-            success: false,
-            message: "Failed to deploy project: " + error,
-          })
-        }
-      }
-    )
-
-    // Handle request to create a new file
-    socket.on("createFile", async (name: string, callback) => {
-      try {
-        await createFileRL.consume(data.userId, 1)
-        const success = await fileManager.createFile(name)
-        callback({ success })
-      } catch (e: any) {
-        console.error("Error creating file:", e)
-        socket.emit("error", `Error: file creation. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to create a new folder
-    socket.on("createFolder", async (name: string, callback) => {
-      try {
-        await createFolderRL.consume(data.userId, 1)
-        await fileManager.createFolder(name)
-        callback()
-      } catch (e: any) {
-        console.error("Error creating folder:", e)
-        socket.emit("error", `Error: folder creation. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to rename a file
-    socket.on("renameFile", async (fileId: string, newName: string) => {
-      try {
-        await renameFileRL.consume(data.userId, 1)
-        await fileManager.renameFile(fileId, newName)
-      } catch (e: any) {
-        console.error("Error renaming file:", e)
-        socket.emit("error", `Error: file renaming. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to delete a file
-    socket.on("deleteFile", async (fileId: string, callback) => {
-      try {
-        await deleteFileRL.consume(data.userId, 1)
-        const newFiles = await fileManager.deleteFile(fileId)
-        callback(newFiles)
-      } catch (e: any) {
-        console.error("Error deleting file:", e)
-        socket.emit("error", `Error: file deletion. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to delete a folder
-    socket.on("deleteFolder", async (folderId: string, callback) => {
-      try {
-        const newFiles = await fileManager.deleteFolder(folderId)
-        callback(newFiles)
-      } catch (e: any) {
-        console.error("Error deleting folder:", e)
-        socket.emit("error", `Error: folder deletion. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to create a new terminal
-    socket.on("createTerminal", async (id: string, callback) => {
-      try {
-        await lockManager.acquireLock(data.sandboxId, async () => {
-          let terminalManager = terminalManagers[data.sandboxId]
-          if (!terminalManager) {
-            terminalManager = terminalManagers[data.sandboxId] =
-              new TerminalManager(containers[data.sandboxId])
+      // Register event handlers for the sandbox
+      // For each event handler, listen on the socket for that event
+      // Pass connection-specific information to the handlers
+      Object.entries(sandbox.handlers({
+        userId: data.userId,
+        isOwner: data.isOwner,
+        socket
+      })).forEach(([event, handler]) => {
+        socket.on(event, async (options: any, callback?: (response: any) => void) => {
+          try {
+            const result = await handler(options)
+            callback?.(result);
+          } catch (e: any) {
+            handleErrors(`Error processing event "${event}":`, e, socket);
          }
+        });
+      });

-          await terminalManager.createTerminal(id, (responseString: string) => {
-            socket.emit("terminalResponse", { id, data: responseString })
-            const port = extractPortNumber(responseString)
-            if (port) {
-              socket.emit(
-                "previewURL",
-                "https://" + containers[data.sandboxId].getHost(port)
-              )
-            }
-          })
-        })
-        callback()
-      } catch (e: any) {
-        console.error(`Error creating terminal ${id}:`, e)
-        socket.emit("error", `Error: terminal creation. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to resize terminal
-    socket.on(
-      "resizeTerminal",
-      (dimensions: { cols: number; rows: number }) => {
+      // Handle disconnection event
+      socket.on("disconnect", async () => {
        try {
-          terminalManager.resizeTerminal(dimensions)
+          // Deregister the connection
+          connections.removeConnectionForSandbox(socket, data.sandboxId, data.isOwner)
+
+          // If the owner has disconnected from all sockets, close open terminals and file watchers.o
+          // The sandbox itself will timeout after the heartbeat stops.
+          if (data.isOwner && !connections.ownerIsConnected(data.sandboxId)) {
+            await sandbox.disconnect()
+            socket.broadcast.emit(
+              "disableAccess",
+              "The sandbox owner has disconnected."
+            )
+          }
        } catch (e: any) {
-          console.error("Error resizing terminal:", e)
-          socket.emit("error", `Error: terminal resizing. ${e.message ?? e}`)
+          handleErrors("Error disconnecting:", e, socket);
        }
-      }
-    )
+      })

-    // Handle terminal input data
-    socket.on("terminalData", async (id: string, data: string) => {
-      try {
-        await terminalManager.sendTerminalData(id, data)
-      } catch (e: any) {
-        console.error("Error writing to terminal:", e)
-        socket.emit("error", `Error: writing to terminal. ${e.message ?? e}`)
-      }
-    })
+    } catch (e: any) {
+      handleErrors(`Error initializing sandbox ${data.sandboxId}:`, e, socket);
+    }

-    // Handle request to close terminal
-    socket.on("closeTerminal", async (id: string, callback) => {
-      try {
-        await terminalManager.closeTerminal(id)
-        callback()
-      } catch (e: any) {
-        console.error("Error closing terminal:", e)
-        socket.emit("error", `Error: closing terminal. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to generate code
-    socket.on(
-      "generateCode",
-      async (
-        fileName: string,
-        code: string,
-        line: number,
-        instructions: string,
-        callback
-      ) => {
-        try {
-          const result = await aiWorker.generateCode(
-            data.userId,
-            fileName,
-            code,
-            line,
-            instructions
-          )
-          callback(result)
-        } catch (e: any) {
-          console.error("Error generating code:", e)
-          socket.emit("error", `Error: code generation. ${e.message ?? e}`)
-        }
-      }
-    )
-
-    // Handle socket disconnection
-    socket.on("disconnect", async () => {
-      try {
-        if (data.isOwner) {
-          connections[data.sandboxId]--
-        }
-
-        await terminalManager.closeAllTerminals()
-        await fileManager.closeWatchers()
-
-        if (data.isOwner && connections[data.sandboxId] <= 0) {
-          socket.broadcast.emit(
-            "disableAccess",
-            "The sandbox owner has disconnected."
-          )
-        }
-      } catch (e: any) {
-        console.log("Error disconnecting:", e)
-        socket.emit("error", `Error: disconnecting. ${e.message ?? e}`)
-      }
-    })
  } catch (e: any) {
-    console.error("Error connecting:", e)
-    socket.emit("error", `Error: connection. ${e.message ?? e}`)
+    handleErrors("Error connecting:", e, socket);
  }
 })

 // Start the server
 httpServer.listen(port, () => {
  console.log(`Server running on port ${port}`)
-})
+})
--- a/backend/server/src/socketAuth.ts
+++ b/backend/server/src/socketAuth.ts
@ -0,0 +1,75 @@
+import { Socket } from "socket.io"
+import { z } from "zod"
+import { Sandbox, User } from "./types"
+
+// Middleware for socket authentication
+export const socketAuth = async (socket: Socket, next: Function) => {
+    // Define the schema for handshake query validation
+    const handshakeSchema = z.object({
+        userId: z.string(),
+        sandboxId: z.string(),
+        EIO: z.string(),
+        transport: z.string(),
+    })
+
+    const q = socket.handshake.query
+    const parseQuery = handshakeSchema.safeParse(q)
+
+    // Check if the query is valid according to the schema
+    if (!parseQuery.success) {
+        next(new Error("Invalid request."))
+        return
+    }
+
+    const { sandboxId, userId } = parseQuery.data
+    // Fetch user data from the database
+    const dbUser = await fetch(
+        `${process.env.DATABASE_WORKER_URL}/api/user?id=${userId}`,
+        {
+            headers: {
+                Authorization: `${process.env.WORKERS_KEY}`,
+            },
+        }
+    )
+    const dbUserJSON = (await dbUser.json()) as User
+
+    // Fetch sandbox data from the database
+    const dbSandbox = await fetch(
+        `${process.env.DATABASE_WORKER_URL}/api/sandbox?id=${sandboxId}`,
+        {
+            headers: {
+                Authorization: `${process.env.WORKERS_KEY}`,
+            },
+        }
+    )
+    const dbSandboxJSON = (await dbSandbox.json()) as Sandbox
+
+    // Check if user data was retrieved successfully
+    if (!dbUserJSON) {
+        next(new Error("DB error."))
+        return
+    }
+
+    // Check if the user owns the sandbox or has shared access
+    const sandbox = dbUserJSON.sandbox.find((s) => s.id === sandboxId)
+    const sharedSandboxes = dbUserJSON.usersToSandboxes.find(
+        (uts) => uts.sandboxId === sandboxId
+    )
+
+    // If user doesn't own or have shared access to the sandbox, deny access
+    if (!sandbox && !sharedSandboxes) {
+        next(new Error("Invalid credentials."))
+        return
+    }
+
+    // Set socket data with user information
+    socket.data = {
+        userId,
+        sandboxId: sandboxId,
+        isOwner: sandbox !== undefined,
+        type: dbSandboxJSON.type
+    }
+
+    // Allow the connection
+    next()
+}
--- a/backend/server/src/types.ts
+++ b/backend/server/src/types.ts
@ -12,7 +12,7 @@ export type User = {
 export type Sandbox = {
  id: string
  name: string
-  type: "react" | "node"
+  type: "reactjs" | "vanillajs" | "nextjs" | "streamlit"
  visibility: "public" | "private"
  createdAt: Date
  userId: string
@ -68,3 +68,8 @@ export type R2FileBody = R2FileData & {
  json: Promise<any>
  blob: Promise<Blob>
 }
+export interface DokkuResponse {
+  success: boolean
+  apps?: string[]
+  message?: string
+}
--- a/backend/server/src/utils.ts
+++ b/backend/server/src/utils.ts
@ -20,4 +20,4 @@ export class LockManager {
    }
    return await this.locks[key]
  }
-}
+}
--- a/backend/storage/package-lock.json
+++ b/backend/storage/package-lock.json
--- a/backend/storage/package.json
+++ b/backend/storage/package.json
@ -11,13 +11,13 @@
 	},
 	"devDependencies": {
 		"@cloudflare/vitest-pool-workers": "^0.1.0",
-		"@cloudflare/workers-types": "^4.20240419.0",
+		"@cloudflare/workers-types": "^4.20241106.0",
 		"typescript": "^5.0.4",
 		"vitest": "1.3.0",
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.86.0"
 	},
 	"dependencies": {
 		"p-limit": "^6.1.0",
 		"zod": "^3.23.4"
 	}
-}
+}
--- a/backend/storage/src/index.ts
+++ b/backend/storage/src/index.ts
@ -1,4 +1,4 @@
-import pLimit from "p-limit"
+import { ExecutionContext, R2Bucket, Headers as CFHeaders } from "@cloudflare/workers-types"
 import { z } from "zod"

 export interface Env {
@ -76,14 +76,13 @@ export default {
 					if (obj === null) {
 						return new Response(`${fileId} not found`, { status: 404 })
 					}
-					const headers = new Headers()
+					const headers = new Headers() as unknown as CFHeaders
 					headers.set("etag", obj.httpEtag)
 					obj.writeHttpMetadata(headers)

 					const text = await obj.text()
-
 					return new Response(text, {
-						headers,
+						headers: Object.fromEntries(headers.entries()),
 					})
 				} else return invalidRequest
 			} else if (method === "POST") {
@ -136,33 +135,7 @@ export default {

 			return success
 		} else if (path === "/api/init" && method === "POST") {
-			const initSchema = z.object({
-				sandboxId: z.string(),
-				type: z.string(),
-			})
-
-			const body = await request.json()
-			const { sandboxId, type } = initSchema.parse(body)
-
-			console.log(`Copying template: ${type}`)
-
-			// List all objects under the directory
-			const { objects } = await env.Templates.list({ prefix: type })
-
-			// Copy each object to the new directory with a 5 concurrency limit
-			const limit = pLimit(5)
-			await Promise.all(
-				objects.map(({ key }) =>
-					limit(async () => {
-						const destinationKey = key.replace(type, `projects/${sandboxId}`)
-						const fileBody = await env.Templates.get(key).then(
-							(res) => res?.body ?? ""
-						)
-						await env.R2.put(destinationKey, fileBody)
-					})
-				)
-			)
-
+			// This API path no longer does anything, because template files are stored in E2B sandbox templates.
 			return success
 		} else {
 			return notFound
--- a/backend/storage/tsconfig.json
+++ b/backend/storage/tsconfig.json
@ -34,7 +34,7 @@
 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 		// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
 		"types": [
-			"@cloudflare/workers-types/2023-07-01"
+			"@cloudflare/workers-types"
 		] /* Specify type package names to be included without being referenced in a source file. */,
 		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 		"resolveJsonModule": true /* Enable importing .json files */,
--- a/frontend/.env.example
+++ b/frontend/.env.example
@ -8,8 +8,10 @@ NEXT_PUBLIC_APP_URL=http://localhost:3000

 # Set WORKER_URLs after deploying the workers.
 # Set NEXT_PUBLIC_WORKERS_KEY to be the same as KEY in /backend/storage/wrangler.toml.
+# These URLs should begin with https:// in production
 NEXT_PUBLIC_DATABASE_WORKER_URL=
 NEXT_PUBLIC_STORAGE_WORKER_URL=
+NEXT_PUBLIC_AI_WORKER_URL=
 NEXT_PUBLIC_WORKERS_KEY=

 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@ -1,4 +1,4 @@
-import { Room } from "@/components/editor/live/room"
+// import { Room } from "@/components/editor/live/room"
 import Loading from "@/components/editor/loading"
 import Navbar from "@/components/editor/navbar"
 import { TerminalProvider } from "@/context/TerminalContext"
@ -51,7 +51,7 @@ const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
        }
      )
      const userData: User = await userRes.json()
-      return { id: userData.id, name: userData.name }
+      return { id: userData.id, name: userData.name, avatarUrl: userData.avatarUrl }
    })
  )

@ -89,18 +89,18 @@ 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}>
+        {/* <Room id={sandboxId}> */}
          <TerminalProvider>
            <Navbar
              userData={userData}
              sandboxData={sandboxData}
-              shared={shared}
+              shared={shared as { id: string; name: string; avatarUrl: string }[]}
            />
            <div className="w-screen flex grow">
              <CodeEditor userData={userData} sandboxData={sandboxData} />
            </div>
          </TerminalProvider>
-        </Room>
+        {/* </Room> */}
      </div>
    </>
  )
--- a/frontend/app/(app)/dashboard/page.tsx
+++ b/frontend/app/(app)/dashboard/page.tsx
@ -35,6 +35,7 @@ export default async function DashboardPage() {
    type: "react" | "node"
    author: string
    sharedOn: Date
+    authorAvatarUrl: string
  }[]

  return (
--- a/frontend/app/(app)/layout.tsx
+++ b/frontend/app/(app)/layout.tsx
@ -1,6 +1,7 @@
 import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { redirect } from "next/navigation"
+import { generateUniqueUsername } from "@/lib/username-generator";

 export default async function AppAuthLayout({
  children,
@ -24,6 +25,25 @@ export default async function AppAuthLayout({
  const dbUserJSON = (await dbUser.json()) as User

  if (!dbUserJSON.id) {
+    // Try to get GitHub username if available
+    const githubUsername = user.externalAccounts.find(
+      account => account.provider === "github"
+    )?.username;
+
+    const username = githubUsername || await generateUniqueUsername(async (username) => {
+      // Check if username exists in database
+      const userCheck = await fetch(
+        `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/check-username?username=${username}`,
+        {
+          headers: {
+            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          },
+        }
+      )
+      const exists = await userCheck.json()
+      return exists.exists
+    });
+
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user`,
      {
@ -36,9 +56,20 @@ export default async function AppAuthLayout({
          id: user.id,
          name: user.firstName + " " + user.lastName,
          email: user.emailAddresses[0].emailAddress,
+          username: username,
+          avatarUrl: user.imageUrl || null,
+          createdAt: new Date().toISOString(),
        }),
      }
    )
+
+    if (!res.ok) {
+      const error = await res.text();
+      console.error("Failed to create user:", error);
+    } else {
+      const data = await res.json();
+      console.log("User created successfully:", data);
+    }
  }

  return <>{children}</>
--- a/frontend/app/api/lb-auth/route.ts
+++ b/frontend/app/api/lb-auth/route.ts
@ -1,57 +1,61 @@
-import { colors } from "@/lib/colors"
-import { User } from "@/lib/types"
+// import { colors } from "@/lib/colors"
+// import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
-import { Liveblocks } from "@liveblocks/node"
+// import { Liveblocks } from "@liveblocks/node"
 import { NextRequest } from "next/server"

-const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!
+// const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!

-const liveblocks = new Liveblocks({
-  secret: API_KEY!,
-})
+// const liveblocks = new Liveblocks({
+//   secret: API_KEY!,
+// })

 export async function POST(request: NextRequest) {
-  const clerkUser = await currentUser()
+  // Temporarily return unauthorized while Liveblocks is disabled
+  return new Response("Liveblocks collaboration temporarily disabled", { status: 503 })

-  if (!clerkUser) {
-    return new Response("Unauthorized", { status: 401 })
-  }
-
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`,
-    {
-      headers: {
-        Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
-      },
-    }
-  )
-  const user = (await res.json()) as User
-
-  const colorNames = Object.keys(colors)
-  const randomColor = colorNames[
-    Math.floor(Math.random() * colorNames.length)
-  ] as keyof typeof colors
-  const code = colors[randomColor]
-
-  // Create a session for the current user
-  // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
-  const session = liveblocks.prepareSession(user.id, {
-    userInfo: {
-      name: user.name,
-      email: user.email,
-      color: randomColor,
-    },
-  })
-
-  // Give the user access to the room
-  user.sandbox.forEach((sandbox) => {
-    session.allow(`${sandbox.id}`, session.FULL_ACCESS)
-  })
-  user.usersToSandboxes.forEach((userToSandbox) => {
-    session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
-  })
-
-  // Authorize the user and return the result
-  const { body, status } = await session.authorize()
-  return new Response(body, { status })
+  // Original implementation commented out:
+  // const clerkUser = await currentUser()
+  // 
+  // if (!clerkUser) {
+  //   return new Response("Unauthorized", { status: 401 })
+  // }
+  // 
+  // const res = await fetch(
+  //   `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`,
+  //   {
+  //     headers: {
+  //       Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+  //     },
+  //   }
+  // )
+  // const user = (await res.json()) as User
+  // 
+  // const colorNames = Object.keys(colors)
+  // const randomColor = colorNames[
+  //   Math.floor(Math.random() * colorNames.length)
+  // ] as keyof typeof colors
+  // const code = colors[randomColor]
+  // 
+  // // Create a session for the current user
+  // // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
+  // const session = liveblocks.prepareSession(user.id, {
+  //   userInfo: {
+  //     name: user.name,
+  //     email: user.email,
+  //     color: randomColor,
+  //   },
+  // })
+  // 
+  // // Give the user access to the room
+  // user.sandbox.forEach((sandbox) => {
+  //   session.allow(`${sandbox.id}`, session.FULL_ACCESS)
+  // })
+  // user.usersToSandboxes.forEach((userToSandbox) => {
+  //   session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
+  // })
+  // 
+  // // Authorize the user and return the result
+  // const { body, status } = await session.authorize()
+  // return new Response(body, { status })
 }
--- a/frontend/components/dashboard/about.tsx
+++ b/frontend/components/dashboard/about.tsx
@ -18,11 +18,38 @@ export default function AboutModal({
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>About this project</DialogTitle>
+          <DialogTitle>Help & Support</DialogTitle>
        </DialogHeader>
-        <div className="text-sm text-muted-foreground">
-          Sandbox is an open-source cloud-based code editing environment with
-          custom AI code autocompletion and real-time collaboration.
+        <div className="space-y-4">
+          {/* <div className="text-sm text-muted-foreground">
+            Sandbox is an open-source cloud-based code editing environment with
+            custom AI code autocompletion and real-time collaboration.
+          </div> */}
+          <div className="text-sm text-muted-foreground">
+            Get help and support through our Discord community or by creating issues on GitHub:
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm">
+              <a 
+                href="https://discord.gitwit.dev/" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Join our Discord community →
+              </a>
+            </div>
+            <div className="text-sm">
+              <a 
+                href="https://github.com/jamesmurdza/sandbox/issues" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Report issues on GitHub →
+              </a>
+            </div>
+          </div>
        </div>
      </DialogContent>
    </Dialog>
--- a/frontend/components/dashboard/index.tsx
+++ b/frontend/components/dashboard/index.tsx
@ -25,6 +25,7 @@ export default function Dashboard({
    type: "react" | "node"
    author: string
    sharedOn: Date
+    authorAvatarUrl?: string
  }[]
 }) {
  const [screen, setScreen] = useState<TScreen>("projects")
@ -77,14 +78,14 @@ export default function Dashboard({
              <FolderDot className="w-4 h-4 mr-2" />
              My Projects
            </Button>
-            <Button
+            {/* <Button
              variant="ghost"
              onClick={() => setScreen("shared")}
              className={activeScreen("shared")}
            >
              <Users className="w-4 h-4 mr-2" />
              Shared With Me
-            </Button>
+            </Button> */}
            {/* <Button
              variant="ghost"
              onClick={() => setScreen("settings")}
@ -95,7 +96,7 @@ export default function Dashboard({
            </Button> */}
          </div>
          <div className="flex flex-col">
-            <a target="_blank" href="https://github.com/ishaan1013/sandbox">
+            <a target="_blank" href="https://github.com/jamesmurdza/sandbox">
              <Button
                variant="ghost"
                className="justify-start w-full font-normal text-muted-foreground"
@ -110,7 +111,7 @@ export default function Dashboard({
              className="justify-start font-normal text-muted-foreground"
            >
              <HelpCircle className="w-4 h-4 mr-2" />
-              About
+              Help
            </Button>
          </div>
        </div>
@ -121,7 +122,12 @@ export default function Dashboard({
            ) : null}
          </>
        ) : screen === "shared" ? (
-          <DashboardSharedWithMe shared={shared} />
+          <DashboardSharedWithMe
+            shared={shared.map((item) => ({
+              ...item,
+              authorAvatarUrl: item.authorAvatarUrl || "",
+            }))}
+          />
        ) : screen === "settings" ? null : null}
      </div>
    </>
--- a/frontend/components/dashboard/shared.tsx
+++ b/frontend/components/dashboard/shared.tsx
@ -11,6 +11,7 @@ import Image from "next/image"
 import Link from "next/link"
 import Avatar from "../ui/avatar"
 import Button from "../ui/customButton"
+import { projectTemplates } from "@/lib/data"

 export default function DashboardSharedWithMe({
  shared,
@ -18,8 +19,9 @@ export default function DashboardSharedWithMe({
  shared: {
    id: string
    name: string
-    type: "react" | "node"
+    type: string
    author: string
+    authorAvatarUrl: string
    sharedOn: Date
  }[]
 }) {
@ -45,9 +47,7 @@ export default function DashboardSharedWithMe({
                      <Image
                        alt=""
                        src={
-                          sandbox.type === "react"
-                            ? "/project-icons/react.svg"
-                            : "/project-icons/node.svg"
+                          projectTemplates.find((p) => p.id === sandbox.type)?.icon ?? "/project-icons/node.svg"
                        }
                        width={20}
                        height={20}
@ -58,7 +58,11 @@ export default function DashboardSharedWithMe({
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center">
-                      <Avatar name={sandbox.author} className="mr-2" />
+                      <Avatar 
+                        name={sandbox.author}
+                        avatarUrl={sandbox.authorAvatarUrl}
+                        className="mr-2"
+                      />
                      {sandbox.author}
                    </div>
                  </TableCell>
--- a/frontend/components/editor/AIChat/ChatInput.tsx
+++ b/frontend/components/editor/AIChat/ChatInput.tsx
@ -1,13 +1,10 @@
-import { Send, StopCircle } from "lucide-react"
+import { Send, StopCircle, Image as ImageIcon, Paperclip } from "lucide-react"
 import { Button } from "../../ui/button"
-
-interface ChatInputProps {
-  input: string
-  setInput: (input: string) => void
-  isGenerating: boolean
-  handleSend: () => void
-  handleStopGeneration: () => void
-}
+import { useEffect } from "react"
+import { TFile, TFolder } from "@/lib/types"
+import { ALLOWED_FILE_TYPES } from "./types"
+import { looksLikeCode } from "./lib/chatUtils"
+import { ChatInputProps } from "./types"

 export default function ChatInput({
  input,
@ -15,37 +12,228 @@ export default function ChatInput({
  isGenerating,
  handleSend,
  handleStopGeneration,
+  onImageUpload,
+  addContextTab,
+  activeFileName,
+  editorRef,
+  lastCopiedRangeRef,
+  contextTabs,
+  onRemoveTab,
+  textareaRef,
 }: ChatInputProps) {
+
+  // Auto-resize textarea as content changes
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
+    }
+  }, [input])
+
+  // Handle keyboard events for sending messages
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      if (e.ctrlKey) {
+        e.preventDefault()
+        handleSend(true) // Send with full context
+      } else if (!e.shiftKey && !isGenerating) {
+        e.preventDefault()
+        handleSend(false)
+      }
+    } else if (e.key === "Backspace" && input === "" && contextTabs.length > 0) {
+      e.preventDefault()
+      // Remove the last context tab
+      const lastTab = contextTabs[contextTabs.length - 1]
+      onRemoveTab(lastTab.id)
+    }
+  }
+
+  // Handle paste events for image and code
+  const handlePaste = async (e: React.ClipboardEvent) => {
+    // Handle image paste
+    const items = Array.from(e.clipboardData.items);
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        
+        const file = item.getAsFile();
+        if (!file) continue;
+
+        try {
+          // Convert image to base64 string for context tab title and timestamp
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64String = reader.result as string;
+            addContextTab(
+              "image",
+              `Image ${new Date().toLocaleTimeString('en-US', {
+                hour12: true,
+                hour: '2-digit',
+                minute: '2-digit'
+              }).replace(/(\d{2}):(\d{2})/, '$1:$2')}`,
+              base64String
+            );
+          };
+          reader.readAsDataURL(file);
+        } catch (error) {
+          console.error('Error processing pasted image:', error);
+        }
+        return;
+      }
+    }
+    
+    // Get text from clipboard 
+    const text = e.clipboardData.getData('text');
+
+    // If text doesn't contain newlines or doesn't look like code, let it paste normally
+    if (!text || !text.includes('\n') || !looksLikeCode(text)) {
+      return;
+    }
+
+    e.preventDefault();
+    const editor = editorRef.current;
+    const currentSelection = editor?.getSelection();
+    const lines = text.split('\n');
+
+    // TODO: FIX THIS: even when i paste the outside code, it shows the active file name,it works when no tabs are open, just does not work when the tab is open
+    
+    // If selection exists in editor, use file name and line numbers
+    if (currentSelection && !currentSelection.isEmpty()) {
+      addContextTab(
+        "code",
+        `${activeFileName} (${currentSelection.startLineNumber}-${currentSelection.endLineNumber})`,
+        text,
+        { start: currentSelection.startLineNumber, end: currentSelection.endLineNumber }
+      );
+      return;
+    }
+    
+    // If we have stored line range from a copy operation in the editor
+    if (lastCopiedRangeRef.current) {
+      const range = lastCopiedRangeRef.current;
+      addContextTab(
+        "code",
+        `${activeFileName} (${range.startLine}-${range.endLine})`,
+        text,
+        { start: range.startLine, end: range.endLine }
+      );
+      return;
+    }
+    
+    // For code pasted from outside the editor
+    addContextTab(
+      "code",
+      `Pasted Code (1-${lines.length})`,
+      text,
+      { start: 1, end: lines.length }
+    );
+  };
+
+  // Handle image upload from local machine via input
+  const handleImageUpload = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'image/*'
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) onImageUpload(file)
+    }
+    input.click()
+  }
+
+  // Helper function to flatten the file tree
+  const getAllFiles = (items: (TFile | TFolder)[]): TFile[] => {
+    return items.reduce((acc: TFile[], item) => {
+      if (item.type === "file") {
+        acc.push(item)
+      } else {
+        acc.push(...getAllFiles(item.children))
+      }
+      return acc
+    }, [])
+  }
+
+  // Handle file upload from local machine via input
+  const handleFileUpload = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.txt,.md,.csv,.json,.js,.ts,.html,.css,.pdf'
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) {
+        if (!(file.type in ALLOWED_FILE_TYPES)) {
+          alert('Unsupported file type. Please upload text, code, or PDF files.')
+          return
+        }
+
+        const reader = new FileReader()
+        reader.onload = () => {
+          addContextTab("file", file.name, reader.result as string)
+        }
+        reader.readAsText(file)
+      }
+    }
+    input.click()
+  }
+
  return (
-    <div className="flex space-x-2 min-w-0">
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyPress={(e) => e.key === "Enter" && !isGenerating && handleSend()}
-        className="flex-grow p-2 border rounded-lg min-w-0 bg-input"
-        placeholder="Type your message..."
-        disabled={isGenerating}
-      />
-      {isGenerating ? (
-        <Button
-          onClick={handleStopGeneration}
-          variant="destructive"
-          size="icon"
-          className="h-10 w-10"
-        >
-          <StopCircle className="w-4 h-4" />
-        </Button>
-      ) : (
-        <Button
-          onClick={handleSend}
+    <div className="space-y-2">
+      <div className="flex space-x-2 min-w-0">
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          className="flex-grow p-2 border rounded-lg min-w-0 bg-input resize-none overflow-hidden"
+          placeholder="Type your message..."
          disabled={isGenerating}
-          size="icon"
-          className="h-10 w-10"
+          rows={1}
+        />
+        {/* Render stop generation button */}
+        {isGenerating ? (
+          <Button
+            onClick={handleStopGeneration}
+            variant="destructive"
+            size="icon"
+            className="h-10 w-10"
+          >
+            <StopCircle className="w-4 h-4" />
+          </Button>
+        ) : (
+          <Button
+            onClick={() => handleSend(false)}
+            disabled={isGenerating}
+            size="icon"
+            className="h-10 w-10"
+          >
+            <Send className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        {/* Render file upload button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 px-2 sm:px-3"
+          onClick={handleFileUpload}
        >
-          <Send className="w-4 h-4" />
+          <Paperclip className="h-3 w-3 sm:mr-1" />
+          <span className="hidden sm:inline">File</span>
        </Button>
-      )}
+        {/* Render image upload button */}
+        <Button 
+          variant="ghost" 
+          size="sm"
+            className="h-6 px-2 sm:px-3"
+            onClick={handleImageUpload}
+          >
+            <ImageIcon className="h-3 w-3 sm:mr-1" />
+          <span className="hidden sm:inline">Image</span>
+        </Button>
+      </div>
    </div>
  )
 }
+
--- a/frontend/components/editor/AIChat/ChatMessage.tsx
+++ b/frontend/components/editor/AIChat/ChatMessage.tsx
@ -1,32 +1,29 @@
-import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from "lucide-react"
+import { Check, Copy, CornerUpLeft } from "lucide-react"
 import React, { useState } from "react"
 import ReactMarkdown from "react-markdown"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
 import remarkGfm from "remark-gfm"
 import { Button } from "../../ui/button"
 import { copyToClipboard, stringifyContent } from "./lib/chatUtils"
-
-interface MessageProps {
-  message: {
-    role: "user" | "assistant"
-    content: string
-    context?: string
-  }
-  setContext: (context: string | null) => void
-  setIsContextExpanded: (isExpanded: boolean) => void
-}
+import ContextTabs from "./ContextTabs"
+import { createMarkdownComponents } from './lib/markdownComponents'
+import { MessageProps } from "./types"

 export default function ChatMessage({
  message,
  setContext,
  setIsContextExpanded,
+  socket,
 }: MessageProps) {
+
+  // State for expanded message index
  const [expandedMessageIndex, setExpandedMessageIndex] = useState<
    number | null
  >(null)
+
+  // State for copied text
  const [copiedText, setCopiedText] = useState<string | null>(null)

+  // Render copy button for text content 
  const renderCopyButton = (text: any) => (
    <Button
      onClick={() => copyToClipboard(stringifyContent(text), setCopiedText)}
@ -42,12 +39,36 @@ export default function ChatMessage({
    </Button>
  )

+  // Set context for code when asking about code
  const askAboutCode = (code: any) => {
    const contextString = stringifyContent(code)
-    setContext(`Regarding this code:\n${contextString}`)
+    const newContext = `Regarding this code:\n${contextString}`
+    
+    // Format timestamp to match chat message format (HH:MM PM)
+    const timestamp = new Date().toLocaleTimeString('en-US', {
+      hour12: true,
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+    
+    // Instead of replacing context, append to it
+    if (message.role === "assistant") {
+      // For assistant messages, create a new context tab with the response content and timestamp
+      setContext(newContext, `AI Response (${timestamp})`, {
+        start: 1,
+        end: contextString.split('\n').length
+      })
+    } else {
+      // For user messages, create a new context tab with the selected content and timestamp
+      setContext(newContext, `User Chat (${timestamp})`, {
+        start: 1,
+        end: contextString.split('\n').length
+      })
+    }
    setIsContextExpanded(false)
  }

+  // Render markdown elements for code and text
  const renderMarkdownElement = (props: any) => {
    const { node, children } = props
    const content = stringifyContent(children)
@ -65,6 +86,7 @@ export default function ChatMessage({
            <CornerUpLeft className="w-4 h-4" />
          </Button>
        </div>
+        {/* Render markdown element */}
        {React.createElement(
          node.tagName,
          {
@ -79,6 +101,13 @@ export default function ChatMessage({
    )
  }

+  // Create markdown components
+  const components = createMarkdownComponents(
+    renderCopyButton,
+    renderMarkdownElement,
+    askAboutCode
+  )
+
  return (
    <div className="text-left relative">
      <div
@ -88,34 +117,19 @@ export default function ChatMessage({
            : "bg-transparent text-white"
        } max-w-full`}
      >
-        {message.role === "user" && (
-          <div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
-            {renderCopyButton(message.content)}
-            <Button
-              onClick={() => askAboutCode(message.content)}
-              size="sm"
-              variant="ghost"
-              className="p-1 h-6"
-            >
-              <CornerUpLeft className="w-4 h-4" />
-            </Button>
-          </div>
-        )}
-        {message.context && (
+        {/* Render context tabs */}
+        {message.role === "user" && message.context && (
          <div className="mb-2 bg-input rounded-lg">
-            <div
-              className="flex justify-between items-center cursor-pointer"
-              onClick={() =>
-                setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)
-              }
-            >
-              <span className="text-sm text-gray-300">Context</span>
-              {expandedMessageIndex === 0 ? (
-                <ChevronUp size={16} />
-              ) : (
-                <ChevronDown size={16} />
-              )}
-            </div>
+            <ContextTabs
+              socket={socket}
+              activeFileName=""
+              onAddFile={() => {}}
+              contextTabs={parseContextToTabs(message.context)}
+              onRemoveTab={() => {}}
+              isExpanded={expandedMessageIndex === 0}
+              onToggleExpand={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
+              className="[&_div:first-child>div:first-child>div]:bg-[#0D0D0D] [&_button:first-child]:hidden [&_button:last-child]:hidden"
+            />
            {expandedMessageIndex === 0 && (
              <div className="relative">
                <div className="absolute top-0 right-0 flex p-1">
@ -123,6 +137,7 @@ export default function ChatMessage({
                    message.context.replace(/^Regarding this code:\n/, "")
                  )}
                </div>
+                {/* Render code textarea */}
                {(() => {
                  const code = message.context.replace(
                    /^Regarding this code:\n/,
@ -136,7 +151,10 @@ export default function ChatMessage({
                        value={code}
                        onChange={(e) => {
                          const updatedContext = `Regarding this code:\n${e.target.value}`
-                          setContext(updatedContext)
+                          setContext(updatedContext, "Selected Content", {
+                            start: 1,
+                            end: e.target.value.split('\n').length
+                          })
                        }}
                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
                        rows={code.split("\n").length}
@ -153,67 +171,25 @@ export default function ChatMessage({
            )}
          </div>
        )}
+        {/* Render copy and ask about code buttons */}
+        {message.role === "user" && (
+          <div className="absolute top-0 right-0 p-1 flex opacity-40">
+            {renderCopyButton(message.content)}
+            <Button
+              onClick={() => askAboutCode(message.content)}
+              size="sm"
+              variant="ghost"
+              className="p-1 h-6"
+            >
+              <CornerUpLeft className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
+        {/* Render markdown content */}
        {message.role === "assistant" ? (
          <ReactMarkdown
            remarkPlugins={[remarkGfm]}
-            components={{
-              code({ node, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || "")
-                return match ? (
-                  <div className="relative border border-input rounded-md my-4">
-                    <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
-                      {match[1]}
-                    </div>
-                    <div className="absolute top-0 right-0 flex">
-                      {renderCopyButton(children)}
-                      <Button
-                        onClick={() => askAboutCode(children)}
-                        size="sm"
-                        variant="ghost"
-                        className="p-1 h-6"
-                      >
-                        <CornerUpLeft className="w-4 h-4" />
-                      </Button>
-                    </div>
-                    <div className="pt-6">
-                      <SyntaxHighlighter
-                        style={vscDarkPlus as any}
-                        language={match[1]}
-                        PreTag="div"
-                        customStyle={{
-                          margin: 0,
-                          padding: "0.5rem",
-                          fontSize: "0.875rem",
-                        }}
-                      >
-                        {stringifyContent(children)}
-                      </SyntaxHighlighter>
-                    </div>
-                  </div>
-                ) : (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              },
-              p: renderMarkdownElement,
-              h1: renderMarkdownElement,
-              h2: renderMarkdownElement,
-              h3: renderMarkdownElement,
-              h4: renderMarkdownElement,
-              h5: renderMarkdownElement,
-              h6: renderMarkdownElement,
-              ul: (props) => (
-                <ul className="list-disc pl-6 mb-4 space-y-2">
-                  {props.children}
-                </ul>
-              ),
-              ol: (props) => (
-                <ol className="list-decimal pl-6 mb-4 space-y-2">
-                  {props.children}
-                </ol>
-              ),
-            }}
+            components={components}
          >
            {message.content}
          </ReactMarkdown>
@ -224,3 +200,27 @@ export default function ChatMessage({
    </div>
  )
 }
+
+// Parse context to tabs for context tabs component 
+function parseContextToTabs(context: string) {
+  const sections = context.split(/(?=File |Code from )/)
+  return sections.map((section, index) => {
+    const lines = section.trim().split('\n')
+    const titleLine = lines[0]
+    let content = lines.slice(1).join('\n').trim()
+    
+    // Remove code block markers for display
+    content = content.replace(/^```[\w-]*\n/, '').replace(/\n```$/, '')
+    
+    // Determine if the context is a file or code
+    const isFile = titleLine.startsWith('File ')
+    const name = titleLine.replace(/^(File |Code from )/, '').replace(':', '')
+    
+    return {
+      id: `context-${index}`,
+      type: isFile ? "file" as const : "code" as const,
+      name: name,
+      content: content
+    }
+  }).filter(tab => tab.content.length > 0)
+}
--- a/frontend/components/editor/AIChat/ContextDisplay.tsx
+++ b/frontend/components/editor/AIChat/ContextDisplay.tsx
@ -1,60 +0,0 @@
-import { ChevronDown, ChevronUp, X } from "lucide-react"
-
-interface ContextDisplayProps {
-  context: string | null
-  isContextExpanded: boolean
-  setIsContextExpanded: (isExpanded: boolean) => void
-  setContext: (context: string | null) => void
-}
-
-export default function ContextDisplay({
-  context,
-  isContextExpanded,
-  setIsContextExpanded,
-  setContext,
-}: ContextDisplayProps) {
-  if (!context) return null
-
-  return (
-    <div className="mb-2 bg-input p-2 rounded-lg">
-      <div className="flex justify-between items-center">
-        <div
-          className="flex-grow cursor-pointer"
-          onClick={() => setIsContextExpanded(!isContextExpanded)}
-        >
-          <span className="text-sm text-gray-300">Context</span>
-        </div>
-        <div className="flex items-center">
-          {isContextExpanded ? (
-            <ChevronUp
-              size={16}
-              className="cursor-pointer"
-              onClick={() => setIsContextExpanded(false)}
-            />
-          ) : (
-            <ChevronDown
-              size={16}
-              className="cursor-pointer"
-              onClick={() => setIsContextExpanded(true)}
-            />
-          )}
-          <X
-            size={16}
-            className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
-            onClick={() => setContext(null)}
-          />
-        </div>
-      </div>
-      {isContextExpanded && (
-        <textarea
-          value={context.replace(/^Regarding this code:\n/, "")}
-          onChange={(e) =>
-            setContext(`Regarding this code:\n${e.target.value}`)
-          }
-          className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
-          rows={5}
-        />
-      )}
-    </div>
-  )
-}
--- a/frontend/components/editor/AIChat/ContextTabs.tsx
+++ b/frontend/components/editor/AIChat/ContextTabs.tsx
@ -0,0 +1,172 @@
+import { Plus, X, Image as ImageIcon, FileText } from "lucide-react"
+import { useState } from "react"
+import { Button } from "../../ui/button"
+import { TFile, TFolder } from "@/lib/types"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Input } from "@/components/ui/input"
+import { ContextTab } from "./types"
+import { ContextTabsProps } from "./types"
+// Ignore certain folders and files from the file tree 
+import { ignoredFiles, ignoredFolders } from "./lib/ignored-paths"
+
+export default function ContextTabs({
+  contextTabs,
+  onRemoveTab,
+  className,
+  files = [],
+  onFileSelect,
+}: ContextTabsProps & { className?: string }) {
+
+  // State for preview tab
+  const [previewTab, setPreviewTab] = useState<ContextTab | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+
+  // Allow preview for images and code selections from editor
+  const togglePreview = (tab: ContextTab) => {
+    if (!tab.lineRange && tab.type !== "image") {
+      return;
+    }
+    
+    // Toggle preview for images and code selections from editor
+    if (previewTab?.id === tab.id) {
+      setPreviewTab(null)
+    } else {
+      setPreviewTab(tab)
+    }
+  }
+
+  // Remove tab from context when clicking on X
+  const handleRemoveTab = (id: string) => {
+    if (previewTab?.id === id) {
+      setPreviewTab(null)
+    }
+    onRemoveTab(id)
+  }
+
+  // Get all files from the file tree to search for context
+  const getAllFiles = (items: (TFile | TFolder)[]): TFile[] => {
+    return items.reduce((acc: TFile[], item) => {
+      // Add file if it's not ignored 
+      if (item.type === "file" && !ignoredFiles.some((pattern: string) => 
+        item.name.endsWith(pattern.replace('*', '')) || item.name === pattern
+      )) {
+        acc.push(item)
+      // Add all files from folder if it's not ignored 
+      } else if (item.type === "folder" && !ignoredFolders.some((folder: string) => folder === item.name)) {
+        acc.push(...getAllFiles(item.children))
+      }
+      return acc
+    }, [])
+  }
+
+  // Get all files from the file tree to search for context when adding context
+  const allFiles = getAllFiles(files)
+  const filteredFiles = allFiles.filter(file => 
+    file.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  return (
+    <div className={`border-none ${className || ''}`}>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-1 overflow-hidden mb-2 flex-wrap">
+          {/* Add context tab button */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            {/* Add context tab popover */}
+            <PopoverContent className="w-64 p-2">
+              <div className="flex gap-2 mb-2">
+                <Input
+                  placeholder="Search files..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="flex-1"
+                />
+              </div>
+              <div className="max-h-[200px] overflow-y-auto">
+                {filteredFiles.map((file) => (
+                  <Button
+                    key={file.id}
+                    variant="ghost"
+                    className="w-full justify-start text-sm mb-1"
+                    onClick={() => onFileSelect?.(file)}
+                  >
+                    <FileText className="h-4 w-4 mr-2" />
+                    {file.name}
+                  </Button>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+          {/* Add context tab button */}
+          {contextTabs.length === 0 && (
+            <div className="flex items-center gap-1 px-2 rounded">
+              <span className="text-sm text-muted-foreground">Add Context</span>
+            </div>
+          )}
+          {/* Render context tabs */}
+          {contextTabs.map((tab) => (
+            <div
+              key={tab.id}
+              className="flex items-center gap-1 px-2 bg-input rounded text-sm cursor-pointer hover:bg-muted"
+              onClick={() => togglePreview(tab)}
+            >
+              {tab.type === "image" && <ImageIcon className="h-3 w-3" />}
+              <span>{tab.name}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-4 w-4"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleRemoveTab(tab.id)
+                }}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        {/* Preview Section */}
+        {previewTab && (
+          <div className="p-2 bg-input rounded-md max-h-[200px] overflow-auto mb-2">
+            {previewTab.type === "image" ? (
+              <img 
+                src={previewTab.content} 
+                alt={previewTab.name}
+                className="max-w-full h-auto"
+              />
+            ) : previewTab.lineRange && (
+              <>
+                <div className="text-xs text-muted-foreground mt-1">
+                  Lines {previewTab.lineRange.start}-{previewTab.lineRange.end}
+                </div>
+                <pre className="text-xs font-mono whitespace-pre-wrap">
+                  {previewTab.content}
+                </pre>
+              </>
+            )}
+            {/* Render file context tab */}
+            {previewTab.type === "file" && (
+              <pre className="text-xs font-mono whitespace-pre-wrap">
+                {previewTab.content}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/components/editor/AIChat/index.tsx
+++ b/frontend/components/editor/AIChat/index.tsx
@ -3,37 +3,47 @@ import { useEffect, useRef, useState } from "react"
 import LoadingDots from "../../ui/LoadingDots"
 import ChatInput from "./ChatInput"
 import ChatMessage from "./ChatMessage"
-import ContextDisplay from "./ContextDisplay"
+import ContextTabs from "./ContextTabs"
 import { handleSend, handleStopGeneration } from "./lib/chatUtils"
-
-interface Message {
-  role: "user" | "assistant"
-  content: string
-  context?: string
-}
+import { nanoid } from 'nanoid'
+import { TFile } from "@/lib/types"
+import { useSocket } from "@/context/SocketContext"
+import { Message, ContextTab, AIChatProps } from './types'

 export default function AIChat({
  activeFileContent,
  activeFileName,
  onClose,
-}: {
-  activeFileContent: string
-  activeFileName: string
-  onClose: () => void
-}) {
+  editorRef,
+  lastCopiedRangeRef,
+  files,
+}: AIChatProps) {
+  // Initialize socket and messages
+  const { socket } = useSocket()
  const [messages, setMessages] = useState<Message[]>([])
+
+  // Initialize input and state for generating messages
  const [input, setInput] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
+
+  // Initialize chat container ref and abort controller ref
  const chatContainerRef = useRef<HTMLDivElement>(null)
  const abortControllerRef = useRef<AbortController | null>(null)
-  const [context, setContext] = useState<string | null>(null)
+
+  // Initialize context tabs and state for expanding context
+  const [contextTabs, setContextTabs] = useState<ContextTab[]>([])
  const [isContextExpanded, setIsContextExpanded] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

+  // Initialize textarea ref
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Scroll to bottom of chat when messages change
  useEffect(() => {
    scrollToBottom()
  }, [messages])

+  // Scroll to bottom of chat when messages change
  const scrollToBottom = () => {
    if (chatContainerRef.current) {
      setTimeout(() => {
@ -45,6 +55,84 @@ export default function AIChat({
    }
  }

+  // Add context tab to context tabs
+  const addContextTab = (type: string, name: string, content: string, lineRange?: { start: number; end: number }) => {
+    const newTab = {
+      id: nanoid(),
+      type: type as "file" | "code" | "image",
+      name,
+      content,
+      lineRange
+    }
+    setContextTabs(prev => [...prev, newTab])
+  }
+
+  // Remove context tab from context tabs
+  const removeContextTab = (id: string) => {
+    setContextTabs(prev => prev.filter(tab => tab.id !== id))
+  }
+
+  // Add file to context tabs
+  const handleAddFile = (tab: ContextTab) => {
+    setContextTabs(prev => [...prev, tab])
+  }
+
+  // Format code content to remove starting and ending code block markers if they exist
+  const formatCodeContent = (content: string) => {
+    return content.replace(/^```[\w-]*\n/, '').replace(/\n```$/, '')
+  }
+
+  // Get combined context from context tabs
+  const getCombinedContext = () => {
+    if (contextTabs.length === 0) return ''
+    
+    return contextTabs.map(tab => {
+      if (tab.type === 'file') {
+        const fileExt = tab.name.split('.').pop() || 'txt'
+        const cleanContent = formatCodeContent(tab.content)
+        return `File ${tab.name}:\n\`\`\`${fileExt}\n${cleanContent}\n\`\`\``
+      } else if (tab.type === 'code') {
+        const cleanContent = formatCodeContent(tab.content)
+        return `Code from ${tab.name}:\n\`\`\`typescript\n${cleanContent}\n\`\`\``
+      }
+      return `${tab.name}:\n${tab.content}`
+    }).join('\n\n')
+  }
+
+  // Handle sending message with context
+  const handleSendWithContext = () => {
+    const combinedContext = getCombinedContext()
+    handleSend(
+      input,
+      combinedContext,
+      messages,
+      setMessages,
+      setInput,
+      setIsContextExpanded,
+      setIsGenerating,
+      setIsLoading,
+      abortControllerRef,
+      activeFileContent
+    )
+    // Clear context tabs after sending
+    setContextTabs([])
+  }
+
+  // Set context for the chat
+  const setContext = (
+    context: string | null, 
+    name: string, 
+    range?: { start: number, end: number }
+  ) => {
+    if (!context) {
+      setContextTabs([])
+      return
+    }
+
+    // Always add a new tab instead of updating existing ones
+    addContextTab('code', name, context, range)
+  }
+
  return (
    <div className="flex flex-col h-screen w-full">
      <div className="flex justify-between items-center p-2 border-b">
@ -68,41 +156,65 @@ export default function AIChat({
        className="flex-grow overflow-y-auto p-4 space-y-4"
      >
        {messages.map((message, messageIndex) => (
+          // Render chat message component for each message 
          <ChatMessage
            key={messageIndex}
            message={message}
            setContext={setContext}
            setIsContextExpanded={setIsContextExpanded}
+            socket={socket}
          />
        ))}
        {isLoading && <LoadingDots />}
      </div>
      <div className="p-4 border-t mb-14">
-        <ContextDisplay
-          context={context}
-          isContextExpanded={isContextExpanded}
-          setIsContextExpanded={setIsContextExpanded}
-          setContext={setContext}
+        {/* Render context tabs component */}
+        <ContextTabs
+          activeFileName={activeFileName}
+          onAddFile={handleAddFile}
+          contextTabs={contextTabs}
+          onRemoveTab={removeContextTab}
+          isExpanded={isContextExpanded}
+          onToggleExpand={() => setIsContextExpanded(!isContextExpanded)}
+          files={files}
+          socket={socket}
+          onFileSelect={(file: TFile) => {
+            socket?.emit("getFile", { fileId: file.id }, (response: string) => {
+              const fileExt = file.name.split('.').pop() || 'txt'
+              const formattedContent = `\`\`\`${fileExt}\n${response}\n\`\`\``
+              addContextTab('file', file.name, formattedContent)
+              if (textareaRef.current) {
+                textareaRef.current.focus()
+              }
+            })
+          }}
        />
+        {/* Render chat input component */}
        <ChatInput
+          textareaRef={textareaRef}
+          addContextTab={addContextTab}
+          editorRef={editorRef}
          input={input}
          setInput={setInput}
          isGenerating={isGenerating}
-          handleSend={() =>
-            handleSend(
-              input,
-              context,
-              messages,
-              setMessages,
-              setInput,
-              setIsContextExpanded,
-              setIsGenerating,
-              setIsLoading,
-              abortControllerRef,
-              activeFileContent
-            )
-          }
+          handleSend={handleSendWithContext}
          handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
+          onImageUpload={(file) => {
+            const reader = new FileReader()
+            reader.onload = (e) => {
+              if (e.target?.result) {
+                addContextTab("image", file.name, e.target.result as string)
+              }
+            }
+            reader.readAsDataURL(file)
+          }}
+          lastCopiedRangeRef={lastCopiedRangeRef}
+          activeFileName={activeFileName}
+          contextTabs={contextTabs.map(tab => ({
+            ...tab,
+            title: tab.id 
+          }))}
+          onRemoveTab={removeContextTab}
        />
      </div>
    </div>
--- a/frontend/components/editor/AIChat/lib/chatUtils.ts
+++ b/frontend/components/editor/AIChat/lib/chatUtils.ts
@ -1,30 +1,39 @@
 import React from "react"

+// Stringify content for chat message component 
 export const stringifyContent = (
  content: any,
  seen = new WeakSet()
 ): string => {
+  // Stringify content if it's a string
  if (typeof content === "string") {
    return content
  }
+  // Stringify content if it's null
  if (content === null) {
    return "null"
  }
+  // Stringify content if it's undefined
  if (content === undefined) {
    return "undefined"
  }
+  // Stringify content if it's a number or boolean
  if (typeof content === "number" || typeof content === "boolean") {
    return content.toString()
  }
+  // Stringify content if it's a function
  if (typeof content === "function") {
    return content.toString()
  }
+  // Stringify content if it's a symbol
  if (typeof content === "symbol") {
    return content.toString()
  }
+  // Stringify content if it's a bigint
  if (typeof content === "bigint") {
    return content.toString() + "n"
  }
+  // Stringify content if it's a valid React element
  if (React.isValidElement(content)) {
    return React.Children.toArray(
      (content as React.ReactElement).props.children
@ -32,11 +41,13 @@ export const stringifyContent = (
      .map((child) => stringifyContent(child, seen))
      .join("")
  }
+  // Stringify content if it's an array
  if (Array.isArray(content)) {
    return (
      "[" + content.map((item) => stringifyContent(item, seen)).join(", ") + "]"
    )
  }
+  // Stringify content if it's an object
  if (typeof content === "object") {
    if (seen.has(content)) {
      return "[Circular]"
@ -51,19 +62,23 @@ export const stringifyContent = (
      return Object.prototype.toString.call(content)
    }
  }
+  // Stringify content if it's a primitive value
  return String(content)
 }

+// Copy to clipboard for chat message component  
 export const copyToClipboard = (
  text: string,
  setCopiedText: (text: string | null) => void
 ) => {
+  // Copy text to clipboard for chat message component 
  navigator.clipboard.writeText(text).then(() => {
    setCopiedText(text)
    setTimeout(() => setCopiedText(null), 2000)
  })
 }

+// Handle send for chat message component  
 export const handleSend = async (
  input: string,
  context: string | null,
@ -76,14 +91,26 @@ export const handleSend = async (
  abortControllerRef: React.MutableRefObject<AbortController | null>,
  activeFileContent: string
 ) => {
-  if (input.trim() === "" && !context) return
+  // Return if input is empty and context is null
+  if (input.trim() === "" && !context) return 

-  const newMessage = {
+  // Get timestamp for chat message component 
+  const timestamp = new Date().toLocaleTimeString('en-US', {
+    hour12: true,
+    hour: '2-digit',
+    minute: '2-digit'
+  }).replace(/(\d{2}):(\d{2})/, '$1:$2')
+
+  // Create user message for chat message component 
+  const userMessage = {
    role: "user" as const,
    content: input,
    context: context || undefined,
+    timestamp: timestamp
  }
-  const updatedMessages = [...messages, newMessage]
+
+  // Update messages for chat message component 
+  const updatedMessages = [...messages, userMessage]
  setMessages(updatedMessages)
  setInput("")
  setIsContextExpanded(false)
@ -93,11 +120,13 @@ export const handleSend = async (
  abortControllerRef.current = new AbortController()

  try {
+    // Create anthropic messages for chat message component 
    const anthropicMessages = updatedMessages.map((msg) => ({
      role: msg.role === "user" ? "human" : "assistant",
      content: msg.content,
    }))

+    // Fetch AI response for chat message component 
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`,
      {
@ -114,20 +143,24 @@ export const handleSend = async (
      }
    )

+    // Throw error if response is not ok
    if (!response.ok) {
      throw new Error("Failed to get AI response")
    }

+    // Get reader for chat message component 
    const reader = response.body?.getReader()
    const decoder = new TextDecoder()
    const assistantMessage = { role: "assistant" as const, content: "" }
    setMessages([...updatedMessages, assistantMessage])
    setIsLoading(false)

+    // Initialize buffer for chat message component 
    let buffer = ""
    const updateInterval = 100
    let lastUpdateTime = Date.now()

+    // Read response from reader for chat message component 
    if (reader) {
      while (true) {
        const { done, value } = await reader.read()
@ -146,6 +179,7 @@ export const handleSend = async (
        }
      }

+      // Update messages for chat message component 
      setMessages((prev) => {
        const updatedMessages = [...prev]
        const lastMessage = updatedMessages[updatedMessages.length - 1]
@ -154,6 +188,7 @@ export const handleSend = async (
      })
    }
  } catch (error: any) {
+    // Handle abort error for chat message component 
    if (error.name === "AbortError") {
      console.log("Generation aborted")
    } else {
@ -171,6 +206,7 @@ export const handleSend = async (
  }
 }

+// Handle stop generation for chat message component 
 export const handleStopGeneration = (
  abortControllerRef: React.MutableRefObject<AbortController | null>
 ) => {
@ -178,3 +214,22 @@ export const handleStopGeneration = (
    abortControllerRef.current.abort()
  }
 }
+
+// Check if text looks like code for chat message component 
+export const looksLikeCode = (text: string): boolean => {
+  const codeIndicators = [
+    /^import\s+/m,          // import statements
+    /^function\s+/m,        // function declarations
+    /^class\s+/m,           // class declarations
+    /^const\s+/m,           // const declarations
+    /^let\s+/m,             // let declarations
+    /^var\s+/m,             // var declarations
+    /[{}\[\]();]/,          // common code syntax
+    /^\s*\/\//m,            // comments
+    /^\s*\/\*/m,            // multi-line comments
+    /=>/,                   // arrow functions
+    /^export\s+/m,          // export statements
+  ];
+
+  return codeIndicators.some(pattern => pattern.test(text));
+};
--- a/frontend/components/editor/AIChat/lib/ignored-paths.ts
+++ b/frontend/components/editor/AIChat/lib/ignored-paths.ts
@ -0,0 +1,102 @@
+// Ignore certain folders and files from the file tree 
+
+export const ignoredFolders = [
+    // Package managers
+    'node_modules',
+    'venv',
+    '.env',
+    'env',
+    '.venv',
+    'virtualenv',
+    'pip-wheel-metadata',
+    
+    // Build outputs
+    '.next',
+    'dist',
+    'build',
+    'out',
+    '__pycache__',
+    '.webpack',
+    '.serverless',
+    'storybook-static',
+    
+    // Version control
+    '.git',
+    '.svn',
+    '.hg',  // Mercurial
+    
+    // Cache and temp files
+    '.cache',
+    'coverage',
+    'tmp',
+    '.temp',
+    '.npm',
+    '.pnpm',
+    '.yarn',
+    '.eslintcache',
+    '.stylelintcache',
+    
+    // IDE specific
+    '.idea',
+    '.vscode',
+    '.vs',
+    '.sublime',
+    
+    // Framework specific
+    '.streamlit',
+    '.next',
+    'static',
+    '.pytest_cache',
+    '.nuxt',
+    '.docusaurus',
+    '.remix',
+    '.parcel-cache',
+    'public/build',  // Remix/Rails
+    '.turbo',        // Turborepo
+    
+    // Logs
+    'logs',
+    '*.log',
+    'npm-debug.log*',
+    'yarn-debug.log*',
+    'yarn-error.log*',
+    'pnpm-debug.log*',
+  ] as const;
+  
+  export const ignoredFiles = [
+    '.DS_Store',
+    '.env.local',
+    '.env.development',
+    '.env.production',
+    '.env.test',
+    '.env*.local',
+    '.gitignore',
+    '.npmrc',
+    '.yarnrc',
+    '.editorconfig',
+    '.prettierrc',
+    '.eslintrc',
+    '.browserslistrc',
+    'tsconfig.tsbuildinfo',
+    '*.pyc',
+    '*.pyo',
+    '*.pyd',
+    '*.so',
+    '*.dll',
+    '*.dylib',
+    '*.class',
+    '*.exe',
+    'package-lock.json',
+    'yarn.lock',
+    'pnpm-lock.yaml',
+    'composer.lock',
+    'poetry.lock',
+    'Gemfile.lock',
+    '*.min.js',
+    '*.min.css',
+    '*.map',
+    '*.chunk.*',
+    '*.hot-update.*',
+    '.vercel',
+    '.netlify'
+  ] as const;
--- a/frontend/components/editor/AIChat/lib/markdownComponents.tsx
+++ b/frontend/components/editor/AIChat/lib/markdownComponents.tsx
@ -0,0 +1,79 @@
+import { Components } from "react-markdown"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
+import { Button } from "../../../ui/button"
+import { CornerUpLeft } from "lucide-react"
+import { stringifyContent } from "./chatUtils"
+
+// Create markdown components for chat message component 
+export const createMarkdownComponents = (
+  renderCopyButton: (text: any) => JSX.Element,
+  renderMarkdownElement: (props: any) => JSX.Element,
+  askAboutCode: (code: any) => void
+): Components => ({
+  code: ({ node, className, children, ...props }: {
+    node?: import('hast').Element,
+    className?: string,
+    children?: React.ReactNode,
+    [key: string]: any,
+  }) => {
+    const match = /language-(\w+)/.exec(className || "")
+
+    return match ? (
+      <div className="relative border border-input rounded-md my-4">
+        <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
+          {match[1]}
+        </div>
+        <div className="absolute top-0 right-0 flex">
+          {renderCopyButton(children)}
+          <Button
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              askAboutCode(children)
+            }}
+            size="sm"
+            variant="ghost"
+            className="p-1 h-6"
+          >
+            <CornerUpLeft className="w-4 h-4" />
+          </Button>
+        </div>
+        <div className="pt-6">
+          <SyntaxHighlighter
+            style={vscDarkPlus as any}
+            language={match[1]}
+            PreTag="div"
+            customStyle={{
+              margin: 0,
+              padding: "0.5rem",
+              fontSize: "0.875rem",
+            }}
+          >
+            {stringifyContent(children)}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    ) : (
+      <code className={className} {...props}>{children}</code>
+    )
+  },
+  // Render markdown elements 
+  p: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h1: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h2: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h3: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h4: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h5: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h6: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  ul: (props) => (
+    <ul className="list-disc pl-6 mb-4 space-y-2">
+      {props.children}
+    </ul>
+  ),
+  ol: (props) => (
+    <ol className="list-decimal pl-6 mb-4 space-y-2">
+      {props.children}
+    </ol>
+  ),
+})
--- a/frontend/components/editor/AIChat/types/index.ts
+++ b/frontend/components/editor/AIChat/types/index.ts
@ -0,0 +1,93 @@
+import * as monaco from 'monaco-editor'
+import { TFile, TFolder } from "@/lib/types"
+import { Socket } from 'socket.io-client';
+
+// Allowed file types for context tabs
+export const ALLOWED_FILE_TYPES = {
+  // Text files
+  'text/plain': true,
+  'text/markdown': true,
+  'text/csv': true,
+  // Code files
+  'application/json': true,
+  'text/javascript': true,
+  'text/typescript': true,
+  'text/html': true,
+  'text/css': true,
+  // Documents
+  'application/pdf': true,
+  // Images
+  'image/jpeg': true,
+  'image/png': true,
+  'image/gif': true,
+  'image/webp': true,
+  'image/svg+xml': true,
+} as const;
+
+// Message interface
+export interface Message {
+  role: "user" | "assistant"
+  content: string
+  context?: string
+}
+
+// Context tab interface
+export interface ContextTab {
+  id: string
+  type: "file" | "code" | "image"
+  name: string
+  content: string
+  lineRange?: { start: number; end: number }
+}
+
+// AIChat props interface
+export interface AIChatProps {
+  activeFileContent: string
+  activeFileName: string
+  onClose: () => void
+  editorRef: React.MutableRefObject<monaco.editor.IStandaloneCodeEditor | undefined>
+  lastCopiedRangeRef: React.MutableRefObject<{ startLine: number; endLine: number } | null>
+  files: (TFile | TFolder)[]
+}
+
+// Chat input props interface
+export interface ChatInputProps {
+  input: string
+  setInput: (input: string) => void
+  isGenerating: boolean
+  handleSend: (useFullContext?: boolean) => void
+  handleStopGeneration: () => void
+  onImageUpload: (file: File) => void
+  addContextTab: (type: string, title: string, content: string, lineRange?: { start: number, end: number }) => void
+  activeFileName?: string
+  editorRef: React.MutableRefObject<monaco.editor.IStandaloneCodeEditor | undefined>
+  lastCopiedRangeRef: React.MutableRefObject<{ startLine: number; endLine: number } | null>
+  contextTabs: { id: string; type: string; title: string; content: string; lineRange?: { start: number; end: number } }[]
+  onRemoveTab: (id: string) => void
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+}
+
+// Chat message props interface
+export interface MessageProps {
+  message: {
+    role: "user" | "assistant"
+    content: string
+    context?: string
+  }
+  setContext: (context: string | null, name: string, range?: { start: number, end: number }) => void
+  setIsContextExpanded: (isExpanded: boolean) => void
+  socket: Socket | null
+}
+
+// Context tabs props interface
+export interface ContextTabsProps {
+  activeFileName: string
+  onAddFile: (tab: ContextTab) => void
+  contextTabs: ContextTab[]
+  onRemoveTab: (id: string) => void
+  isExpanded: boolean
+  onToggleExpand: () => void
+  files?: (TFile | TFolder)[]
+  onFileSelect?: (file: TFile) => void
+  socket: Socket | null
+}
--- a/frontend/components/editor/generate.tsx
+++ b/frontend/components/editor/generate.tsx
@ -68,10 +68,12 @@ export default function GenerateInput({
    setCurrentPrompt(input)
    socket.emit(
      "generateCode",
-      data.fileName,
-      data.code,
-      data.line,
-      regenerate ? currentPrompt : input,
+      {
+        fileName: data.fileName,
+        code: data.code,
+        line: data.line,
+        instructions: regenerate ? currentPrompt : input
+      },
      (res: { response: string; success: boolean }) => {
        console.log("Generated code", res.response, res.success)
        // if (!res.success) {
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -7,11 +7,11 @@ import * as monaco from "monaco-editor"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { toast } from "sonner"

-import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
-import LiveblocksProvider from "@liveblocks/yjs"
-import { MonacoBinding } from "y-monaco"
-import { Awareness } from "y-protocols/awareness"
-import * as Y from "yjs"
+// import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
+// import LiveblocksProvider from "@liveblocks/yjs"
+// import { MonacoBinding } from "y-monaco"
+// import { Awareness } from "y-protocols/awareness"
+// import * as Y from "yjs"

 import {
  ResizableHandle,
@ -46,7 +46,7 @@ import { Button } from "../ui/button"
 import Tab from "../ui/tab"
 import AIChat from "./AIChat"
 import GenerateInput from "./generate"
-import { Cursors } from "./live/cursors"
+// import { Cursors } from "./live/cursors"
 import DisableAccessModal from "./live/disableModal"
 import Loading from "./loading"
 import PreviewWindow from "./preview"
@ -107,7 +107,6 @@ export default function CodeEditor({

  // Editor state
  const [editorLanguage, setEditorLanguage] = useState("plaintext")
-  console.log("editor language: ",editorLanguage)
  const [cursorLine, setCursorLine] = useState(0)
  const [editorRef, setEditorRef] =
    useState<monaco.editor.IStandaloneCodeEditor>()
@ -148,20 +147,20 @@ export default function CodeEditor({
  const isOwner = sandboxData.userId === userData.id
  const clerk = useClerk()

-  // Liveblocks hooks
-  const room = useRoom()
-  const [provider, setProvider] = useState<TypedLiveblocksProvider>()
-  const userInfo = useSelf((me) => me.info)
+  // // Liveblocks hooks
+  // const room = useRoom()
+  // 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>())
+  // // 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)
@ -173,6 +172,9 @@ export default function CodeEditor({
  const editorPanelRef = useRef<ImperativePanelHandle>(null)
  const previewWindowRef = useRef<{ refreshIframe: () => void }>(null)

+  // Ref to store the last copied range in the editor to be used in the AIChat component
+  const lastCopiedRangeRef = useRef<{ startLine: number; endLine: number } | null>(null);
+
  const debouncedSetIsSelected = useRef(
    debounce((value: boolean) => {
      setIsSelected(value)
@ -207,7 +209,7 @@ export default function CodeEditor({
    )
    const fetchFileContent = (fileId: string): Promise<string> => {
      return new Promise((resolve) => {
-        socket?.emit("getFile", fileId, (content: string) => {
+        socket?.emit("getFile", { fileId }, (content: string) => {
          resolve(content)
        })
      })
@ -219,7 +221,6 @@ export default function CodeEditor({
      let mergedConfig: any = { compilerOptions: {} }

      for (const file of tsconfigFiles) {
-        const containerId = file.id.split("/").slice(0, 2).join("/")
        const content = await fetchFileContent(file.id)

        try {
@ -229,8 +230,7 @@ export default function CodeEditor({
          if (tsConfig.references) {
            for (const ref of tsConfig.references) {
              const path = ref.path.replace("./", "")
-              const fileId = `${containerId}/${path}`
-              const refContent = await fetchFileContent(fileId)
+              const refContent = await fetchFileContent(path)
              const referenceTsConfig = JSON.parse(refContent)

              // Merge configurations
@ -257,6 +257,17 @@ export default function CodeEditor({
          updatedOptions
        )
      }
+
+      // Store the last copied range in the editor to be used in the AIChat component
+      editor.onDidChangeCursorSelection((e) => {
+        const selection = editor.getSelection();
+        if (selection) {
+          lastCopiedRangeRef.current = {
+            startLine: selection.startLineNumber,
+            endLine: selection.endLineNumber
+          };
+        }
+      });
    }

    // Call the function with your file structure
@ -530,9 +541,7 @@ export default function CodeEditor({
            tab.id === activeFileId ? { ...tab, saved: true } : tab
          )
        )
-        console.log(`Saving file...${activeFileId}`)
-        console.log(`Saving file...${content}`)
-        socket?.emit("saveFile", activeFileId, content)
+        socket?.emit("saveFile", { fileId: activeFileId, body: content })
      }
    }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
    [socket, fileContents]
@ -562,82 +571,82 @@ export default function CodeEditor({
    }
  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef])

-  // Liveblocks live collaboration setup effect
-  useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeFileId)
-    const model = editorRef?.getModel()
+  // // Liveblocks live collaboration setup effect
+  // useEffect(() => {
+  //   const tab = tabs.find((t) => t.id === activeFileId)
+  //   const model = editorRef?.getModel()

-    if (!editorRef || !tab || !model) return
+  //   if (!editorRef || !tab || !model) return

-    let providerData: ProviderData
+  //   let providerData: ProviderData

-    // When a file is opened for the first time, create a new provider and store in providersMap.
-    if (!providersMap.current.has(tab.id)) {
-      const yDoc = new Y.Doc()
-      const yText = yDoc.getText(tab.id)
-      const yProvider = new LiveblocksProvider(room, yDoc)
+  //   // When a file is opened for the first time, create a new provider and store in providersMap.
+  //   if (!providersMap.current.has(tab.id)) {
+  //     const yDoc = new Y.Doc()
+  //     const yText = yDoc.getText(tab.id)
+  //     const yProvider = new LiveblocksProvider(room, yDoc)

-      // Inserts the file content into the editor once when the tab is changed.
-      const onSync = (isSynced: boolean) => {
-        if (isSynced) {
-          const text = yText.toString()
-          if (text === "") {
-            if (activeFileContent) {
-              yText.insert(0, activeFileContent)
-            } else {
-              setTimeout(() => {
-                yText.insert(0, editorRef.getValue())
-              }, 0)
-            }
-          }
-        }
-      }
+  //     // Inserts the file content into the editor once when the tab is changed.
+  //     const onSync = (isSynced: boolean) => {
+  //       if (isSynced) {
+  //         const text = yText.toString()
+  //         if (text === "") {
+  //           if (activeFileContent) {
+  //             yText.insert(0, activeFileContent)
+  //           } else {
+  //             setTimeout(() => {
+  //               yText.insert(0, editorRef.getValue())
+  //             }, 0)
+  //           }
+  //         }
+  //       }
+  //     }

-      yProvider.on("sync", onSync)
+  //     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)!
-    }
+  //     // 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)!
+  //   }

-    const binding = new MonacoBinding(
-      providerData.yText,
-      model,
-      new Set([editorRef]),
-      providerData.provider.awareness as unknown as Awareness
-    )
+  //   const binding = new MonacoBinding(
+  //     providerData.yText,
+  //     model,
+  //     new Set([editorRef]),
+  //     providerData.provider.awareness as unknown as Awareness
+  //   )

-    providerData.binding = binding
-    setProvider(providerData.provider)
+  //   providerData.binding = binding
+  //   setProvider(providerData.provider)

-    return () => {
-      // Cleanup logic
-      if (binding) {
-        binding.destroy()
-      }
-      if (providerData.binding) {
-        providerData.binding = undefined
-      }
-    }
-  }, [room, activeFileContent])
+  //   return () => {
+  //     // Cleanup logic
+  //     if (binding) {
+  //       binding.destroy()
+  //     }
+  //     if (providerData.binding) {
+  //       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()
-    }
-  }, [])
+  // // 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(() => {
@ -649,7 +658,7 @@ export default function CodeEditor({

  // Socket event listener effect
  useEffect(() => {
-    const onConnect = () => {}
+    const onConnect = () => { }

    const onDisconnect = () => {
      setTerminals([])
@ -715,7 +724,7 @@ export default function CodeEditor({

  // Debounced function to get file content
  const debouncedGetFile = (tabId: any, callback: any) => {
-    socket?.emit("getFile", tabId, callback)
+    socket?.emit("getFile", { fileId: tabId }, callback)
  } // 300ms debounce delay, adjust as needed

  const selectFile = (tab: TTab) => {
@ -777,8 +786,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))
@ -835,7 +844,7 @@ export default function CodeEditor({
      return false
    }

-    socket?.emit("renameFile", id, newName)
+    socket?.emit("renameFile", { fileId: id, newName })
    setTabs((prev) =>
      prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
    )
@ -844,7 +853,7 @@ export default function CodeEditor({
  }

  const handleDeleteFile = (file: TFile) => {
-    socket?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
+    socket?.emit("deleteFile", { fileId: file.id }, (response: (TFolder | TFile)[]) => {
      setFiles(response)
    })
    closeTab(file.id)
@ -854,11 +863,11 @@ export default function CodeEditor({
    setDeletingFolderId(folder.id)
    console.log("deleting folder", folder.id)

-    socket?.emit("getFolder", folder.id, (response: string[]) =>
+    socket?.emit("getFolder", { folderId: folder.id }, (response: string[]) =>
      closeTabs(response)
    )

-    socket?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
+    socket?.emit("deleteFolder", { folderId: folder.id }, (response: (TFolder | TFile)[]) => {
      setFiles(response)
      setDeletingFolderId("")
    })
@ -902,7 +911,7 @@ export default function CodeEditor({
        <DisableAccessModal
          message={disableAccess.message}
          open={disableAccess.isDisabled}
-          setOpen={() => {}}
+          setOpen={() => { }}
        />
        <Loading />
      </>
@ -944,8 +953,8 @@ export default function CodeEditor({
                code:
                  (isSelected && editorRef?.getSelection()
                    ? editorRef
-                        ?.getModel()
-                        ?.getValueInRange(editorRef?.getSelection()!)
+                      ?.getModel()
+                      ?.getValueInRange(editorRef?.getSelection()!)
                    : editorRef?.getValue()) ?? "",
                line: generate.line,
              }}
@ -1029,6 +1038,8 @@ export default function CodeEditor({
          setFiles={setFiles}
          addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
          deletingFolderId={deletingFolderId}
+          toggleAIChat={toggleAIChat}
+          isAIChatOpen={isAIChatOpen}
        />
        {/* Outer ResizablePanelGroup for main layout */}
        <ResizablePanelGroup
@ -1075,62 +1086,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 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
+                    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 {
-                            // If the content matches the cached content, mark the file as saved
-                            setTabs((prev) =>
-                              prev.map((tab) =>
-                                tab.id === activeFileId
-                                  ? { ...tab, saved: true }
-                                  : 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={theme === "light" ? "vs" : "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={theme === "light" ? "vs" : "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 />
@ -1140,10 +1151,10 @@ export default function CodeEditor({
                    isAIChatOpen && isHorizontalLayout
                      ? "horizontal"
                      : isAIChatOpen
-                      ? "vertical"
-                      : isHorizontalLayout
-                      ? "horizontal"
-                      : "vertical"
+                        ? "vertical"
+                        : isHorizontalLayout
+                          ? "horizontal"
+                          : "vertical"
                  }
                >
                  <ResizablePanel
@ -1218,6 +1229,9 @@ export default function CodeEditor({
                    "No file selected"
                  }
                  onClose={toggleAIChat}
+                  editorRef={{ current: editorRef }}
+                  lastCopiedRangeRef={lastCopiedRangeRef}
+                  files={files}
                />
              </ResizablePanel>
            </>
--- a/frontend/components/editor/navbar/downloadButton.tsx
+++ b/frontend/components/editor/navbar/downloadButton.tsx
@ -0,0 +1,34 @@
+import JSZip from 'jszip'
+import { useSocket } from "@/context/SocketContext"
+import { Button } from "@/components/ui/button"
+import { Download } from "lucide-react"
+
+export default function DownloadButton({ name }: { name: string }) {
+  const { socket } = useSocket()
+
+  const handleDownload = async () => {
+    socket?.emit("downloadFiles", {}, async (response: {files: {path: string, content: string}[]}) => {
+      const zip = new JSZip()
+      
+      response.files.forEach(file => {
+        zip.file(file.path, file.content)
+      })
+      
+      const blob = await zip.generateAsync({type: "blob"})
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${name}.zip`
+      a.click()
+      window.URL.revokeObjectURL(url)
+    })
+  }
+
+
+  return (
+    <Button variant="outline" onClick={handleDownload}>
+      <Download className="w-4 h-4 mr-2" />
+      Download
+    </Button>
+  )
+}
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@ -9,11 +9,12 @@ import { Pencil, Users } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { useState } from "react"
-import { Avatars } from "../live/avatars"
+// import { Avatars } from "../live/avatars"
 import DeployButtonModal from "./deploy"
 import EditSandboxModal from "./edit"
 import RunButtonModal from "./run"
 import ShareSandboxModal from "./share"
+import DownloadButton from "./downloadButton"

 export default function Navbar({
  userData,
@ -22,7 +23,7 @@ export default function Navbar({
 }: {
  userData: User
  sandboxData: Sandbox
-  shared: { id: string; name: string }[]
+  shared: { id: string; name: string; avatarUrl: string }[]
 }) {
  const [isEditOpen, setIsEditOpen] = useState(false)
  const [isShareOpen, setIsShareOpen] = useState(false)
@ -69,16 +70,16 @@ export default function Navbar({
          sandboxData={sandboxData}
        />
        <div className="flex items-center h-full space-x-4">
-          <Avatars />
+          {/* <Avatars /> */}

          {isOwner ? (
            <>
              <DeployButtonModal data={sandboxData} userData={userData} />
-              <Button variant="outline" onClick={() => setIsShareOpen(true)}>
+              {/* <Button variant="outline" onClick={() => setIsShareOpen(true)}>
                <Users className="w-4 h-4 mr-2" />
                Share
-              </Button>
-            </>
+              </Button> */}
+              <DownloadButton name={sandboxData.name} /></>
          ) : null}
          <ThemeSwitcher />
          <UserButton userData={userData} />
--- a/frontend/components/editor/navbar/run.tsx
+++ b/frontend/components/editor/navbar/run.tsx
@ -44,8 +44,8 @@ export default function RunButtonModal({
    } 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"
+          ? "./venv/bin/streamlit run main.py --server.runOnSave true"
+          : "npm run dev"

      try {
        // Create a new terminal with the appropriate command
--- a/frontend/components/editor/navbar/share.tsx
+++ b/frontend/components/editor/navbar/share.tsx
@ -43,6 +43,7 @@ export default function ShareSandboxModal({
  shared: {
    id: string
    name: string
+    avatarUrl: string
  }[]
 }) {
  const [loading, setLoading] = useState(false)
@ -142,7 +143,11 @@ export default function ShareSandboxModal({
              </DialogHeader>
              <div className="space-y-2">
                {shared.map((user) => (
-                  <SharedUser key={user.id} user={user} sandboxId={data.id} />
+                  <SharedUser
+                    key={user.id}
+                    user={user}
+                    sandboxId={data.id}
+                  />
                ))}
              </div>
            </div>
--- a/frontend/components/editor/navbar/sharedUser.tsx
+++ b/frontend/components/editor/navbar/sharedUser.tsx
@ -10,7 +10,7 @@ export default function SharedUser({
  user,
  sandboxId,
 }: {
-  user: { id: string; name: string }
+  user: { id: string; name: string; avatarUrl: string }
  sandboxId: string
 }) {
  const [loading, setLoading] = useState(false)
@ -24,7 +24,7 @@ export default function SharedUser({
  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center">
-        <Avatar name={user.name} className="mr-2" />
+        <Avatar name={user.name} avatarUrl={user.avatarUrl} className="mr-2" />
        {user.name}
      </div>
      <Button
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -10,7 +10,7 @@ import New from "./new"

 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import { sortFileExplorer } from "@/lib/utils"
+import { cn, sortFileExplorer } from "@/lib/utils"
 import {
  dropTargetForElements,
  monitorForElements,
@ -27,6 +27,8 @@ export default function Sidebar({
  setFiles,
  addNew,
  deletingFolderId,
+  toggleAIChat,
+  isAIChatOpen,
 }: {
  sandboxData: Sandbox
  files: (TFile | TFolder)[]
@ -43,6 +45,8 @@ export default function Sidebar({
  setFiles: (files: (TFile | TFolder)[]) => void
  addNew: (name: string, type: "file" | "folder") => void
  deletingFolderId: string
+  toggleAIChat: () => void
+  isAIChatOpen: boolean
 }) {
  const ref = useRef(null) // drop target

@ -87,8 +91,10 @@ export default function Sidebar({
        setMovingId(fileId)
        socket.emit(
          "moveFile",
-          fileId,
-          folderId,
+          {
+            fileId,
+            folderId
+          },
          (response: (TFolder | TFile)[]) => {
            setFiles(response)
            setMovingId("")
@ -186,7 +192,7 @@ export default function Sidebar({
          style={{ opacity: 1 }}
        >
          <Sparkles className="h-4 w-4 mr-2 text-indigo-500 opacity-70" />
-          Copilot
+          AI Editor
          <div className="ml-auto">
            <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
              <span className="text-xs">⌘</span>G
@ -195,12 +201,24 @@ export default function Sidebar({
        </Button>
        <Button
          variant="ghost"
-          className="w-full justify-start text-sm text-muted-foreground font-normal h-8 px-2 mb-2"
-          disabled
-          aria-disabled="true"
+          className={cn(
+            "w-full justify-start text-sm font-normal h-8 px-2 mb-2 border-t",
+            isAIChatOpen 
+              ? "bg-muted-foreground/25 text-foreground" 
+              : "text-muted-foreground"
+          )}
+          onClick={toggleAIChat}
+          aria-disabled={false}
          style={{ opacity: 1 }}
        >
-          <MessageSquareMore className="h-4 w-4 mr-2 text-indigo-500 opacity-70" />
+          <MessageSquareMore 
+            className={cn(
+              "h-4 w-4 mr-2",
+              isAIChatOpen 
+                ? "text-indigo-500" 
+                : "text-indigo-500 opacity-70"
+            )}
+          />
          AI Chat
          <div className="ml-auto">
            <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
--- a/frontend/components/editor/sidebar/new.tsx
+++ b/frontend/components/editor/sidebar/new.tsx
@ -27,7 +27,7 @@ export default function New({
        if (type === "file") {
          socket.emit(
            "createFile",
-            name,
+            { name },
            ({ success }: { success: boolean }) => {
              if (success) {
                addNew(name, type)
@ -35,7 +35,7 @@ export default function New({
            }
          )
        } else {
-          socket.emit("createFolder", name, () => {
+          socket.emit("createFolder", { name }, () => {
            addNew(name, type)
          })
        }
--- a/frontend/components/editor/terminals/terminal.tsx
+++ b/frontend/components/editor/terminals/terminal.tsx
@ -65,12 +65,12 @@ export default function EditorTerminal({
    }

    const disposableOnData = term.onData((data) => {
-      socket.emit("terminalData", id, data)
+      socket.emit("terminalData", { id, data })
    })

    const disposableOnResize = term.onResize((dimensions) => {
      fitAddonRef.current?.fit()
-      socket.emit("terminalResize", dimensions)
+      socket.emit("terminalResize", { dimensions })
    })
    const resizeObserver = new ResizeObserver(
      debounce((entries) => {
--- a/frontend/components/landing/index.tsx
+++ b/frontend/components/landing/index.tsx
@ -22,7 +22,7 @@ export default function Landing() {
          </div>
          <div className="flex items-center space-x-4">
            <Button variant="outline" size="icon" asChild>
-              <a href="https://www.x.com/ishaandey_" target="_blank">
+              <a href="https://x.com/gitwitdev" target="_blank">
                <svg
                  width="1200"
                  height="1227"
@ -45,16 +45,21 @@ export default function Landing() {
        <h1 className="text-2xl font-medium text-center mt-16">
          A Collaborative + AI-Powered Code Environment
        </h1>
-        <p className="text-muted-foreground mt-4 text-center ">
+        {/* <p className="text-muted-foreground mt-4 text-center ">
          Sandbox is an open-source cloud-based code editing environment with
          custom AI code autocompletion and real-time collaboration.
+        </p> */}
+        <p className="text-muted-foreground mt-4 text-center ">
+          A cloud-based code editor featuring real-time collaboration,
+          intelligent code autocompletion, and an AI assistant to help you code
+          faster and smarter.
        </p>
        <div className="mt-8 flex space-x-4">
          <Link href="/sign-up">
            <CustomButton>Go To App</CustomButton>
          </Link>
          <a
-            href="https://github.com/ishaan1013/sandbox"
+            href="https://github.com/jamesmurdza/sandbox"
            target="_blank"
            className="group h-9 px-4 py-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
          >
--- a/frontend/components/ui/alert.tsx
+++ b/frontend/components/ui/alert.tsx
@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
--- a/frontend/components/ui/avatar.tsx
+++ b/frontend/components/ui/avatar.tsx
@ -1,23 +1,42 @@
 import { cn } from "@/lib/utils"
+import Image from "next/image"

 export default function Avatar({
  name,
+  avatarUrl,
  className,
 }: {
  name: string
+  avatarUrl?: string | null
  className?: string
 }) {
+  // Generate initials from name if no avatarUrl is provided
+  const initials = name
+    ? name
+        .split(" ")
+        .slice(0, 2)
+        .map((letter) => letter[0].toUpperCase())
+        .join("")
+    : "?"
+
  return (
    <div
      className={cn(
        className,
-        "w-5 h-5 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-[0.5rem] font-medium"
+        "w-9 h-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium"
      )}
    >
-      {name
-        .split(" ")
-        .slice(0, 2)
-        .map((letter) => letter[0].toUpperCase())}
+      {avatarUrl ? (
+        <Image
+          src={avatarUrl}
+          alt={name || "User"}
+          width={20}
+          height={20}
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        initials
+      )}
    </div>
  )
 }
--- a/frontend/components/ui/progress.tsx
+++ b/frontend/components/ui/progress.tsx
@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
--- a/frontend/components/ui/tooltip.tsx
+++ b/frontend/components/ui/tooltip.tsx
@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/frontend/components/ui/userButton.tsx
+++ b/frontend/components/ui/userButton.tsx
@ -11,6 +11,7 @@ import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import { LogOut, Sparkles } from "lucide-react"
 import { useRouter } from "next/navigation"
+import Avatar from "./avatar"

 export default function UserButton({ userData }: { userData: User }) {
  if (!userData) return null
@ -21,13 +22,7 @@ export default function UserButton({ userData }: { userData: User }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
-        <div className="w-9 h-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium">
-          {userData.name &&
-            userData.name
-              .split(" ")
-              .slice(0, 2)
-              .map((name) => name[0].toUpperCase())}
-        </div>
+        <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48" align="end">
        <div className="py-1.5 px-2 w-full">
--- a/frontend/context/TerminalContext.tsx
+++ b/frontend/context/TerminalContext.tsx
@ -63,7 +63,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
        terminals,
        setTerminals,
        setActiveTerminalId,
-        setClosingTerminal: () => {},
+        setClosingTerminal: () => { },
        socket,
        activeTerminalId,
      })
@ -73,7 +73,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
  const deploy = (callback: () => void) => {
    if (!socket) console.error("Couldn't deploy: No socket")
    console.log("Deploying...")
-    socket?.emit("deploy", () => {
+    socket?.emit("deploy", {}, () => {
      callback()
    })
  }
--- a/frontend/lib/data/index.ts
+++ b/frontend/lib/data/index.ts
@ -16,7 +16,7 @@ export const projectTemplates: {
    id: "vanillajs",
    name: "HTML/JS",
    icon: "/project-icons/more.svg",
-    description: "More coming soon, feel free to contribute on GitHub",
+    description: "A simple HTML/JS project for building web apps",
    disabled: false,
  },
  {
--- a/frontend/lib/terminal.ts
+++ b/frontend/lib/terminal.ts
@ -32,9 +32,9 @@ export const createTerminal = ({
  setActiveTerminalId(id)

  setTimeout(() => {
-    socket.emit("createTerminal", id, () => {
+    socket.emit("createTerminal", { id }, () => {
      setCreatingTerminal(false)
-      if (command) socket.emit("terminalData", id, command + "\n")
+      if (command) socket.emit("terminalData", { id, data: command + "\n" })
    })
  }, 1000)
 }
@ -75,7 +75,7 @@ export const closeTerminal = ({

  setClosingTerminal(term.id)

-  socket.emit("closeTerminal", term.id, () => {
+  socket.emit("closeTerminal", { id: term.id }, () => {
    setClosingTerminal("")

    const nextId =
@ -83,8 +83,8 @@ export const closeTerminal = ({
        ? numTerminals === 1
          ? null
          : index < numTerminals - 1
-          ? terminals[index + 1].id
-          : terminals[index - 1].id
+            ? terminals[index + 1].id
+            : terminals[index - 1].id
        : activeTerminalId

    setTerminals((prev) => prev.filter((t) => t.id !== term.id))
--- a/frontend/lib/tsconfig.ts
+++ b/frontend/lib/tsconfig.ts
@ -73,7 +73,11 @@ function mapModule(module: string): monaco.languages.typescript.ModuleKind {
  )
 }

-function mapJSX(jsx: string): monaco.languages.typescript.JsxEmit {
+function mapJSX(jsx: string | undefined): monaco.languages.typescript.JsxEmit {
+  if (!jsx || typeof jsx !== 'string') {
+    return monaco.languages.typescript.JsxEmit.React // Default value
+  }
+  
  const jsxMap: { [key: string]: monaco.languages.typescript.JsxEmit } = {
    preserve: monaco.languages.typescript.JsxEmit.Preserve,
    react: monaco.languages.typescript.JsxEmit.React,
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@ -4,6 +4,9 @@ export type User = {
  id: string
  name: string
  email: string
+  username: string
+  avatarUrl: string | null
+  createdAt: Date
  generations: number
  sandbox: Sandbox[]
  usersToSandboxes: UsersToSandboxes[]
--- a/frontend/lib/username-generator.ts
+++ b/frontend/lib/username-generator.ts
@ -0,0 +1,82 @@
+// Constants for username generation
+const WORDS = {
+    adjectives: [
+      "azure", "crimson", "golden", "silver", "violet", "emerald", "cobalt", "amber", "coral", "jade",
+      "cyber", "digital", "quantum", "neural", "binary", "cosmic", "stellar", "atomic", "crypto", "nano",
+      "swift", "brave", "clever", "wise", "noble", "rapid", "bright", "sharp", "keen", "bold",
+      "dynamic", "epic", "mega", "ultra", "hyper", "super", "prime", "elite", "alpha", "omega",
+      "pixel", "vector", "sonic", "laser", "matrix", "nexus", "proxy", "cloud", "data", "tech",
+    ],
+    nouns: [
+      "coder", "hacker", "dev", "ninja", "guru", "wizard", "admin", "mod", "chief", "boss",
+      "wolf", "eagle", "phoenix", "dragon", "tiger", "falcon", "shark", "lion", "hawk", "bear",
+      "byte", "bit", "node", "stack", "cache", "chip", "core", "net", "web", "app",
+      "star", "nova", "pulsar", "comet", "nebula", "quasar", "cosmos", "orbit", "astro", "solar",
+      "mind", "soul", "spark", "pulse", "force", "power", "wave", "storm", "flash", "surge",
+    ],
+    prefixes: [
+      "the", "mr", "ms", "dr", "pro", "master", "lord", "captain", "chief", "agent",
+    ],
+  } as const;
+  
+  // Helper function to get random element from array
+  const getRandomElement = <T>(array: readonly T[]): T => {
+    return array[Math.floor(Math.random() * array.length)];
+  };
+  
+  // Username pattern generators
+  const usernamePatterns = {
+    basic: (): string => {
+      const adjective = getRandomElement(WORDS.adjectives);
+      const noun = getRandomElement(WORDS.nouns);
+      const number = Math.floor(Math.random() * 10000);
+      return `${adjective}${noun}${number}`;
+    },
+  
+    prefixed: (): string => {
+      const prefix = getRandomElement(WORDS.prefixes);
+      const noun = getRandomElement(WORDS.nouns);
+      const number = Math.floor(Math.random() * 100);
+      return `${prefix}${noun}${number}`;
+    },
+  
+    doubleAdjective: (): string => {
+      const adj1 = getRandomElement(WORDS.adjectives);
+      const adj2 = getRandomElement(WORDS.adjectives);
+      const noun = getRandomElement(WORDS.nouns);
+      return `${adj1}${adj2}${noun}`;
+    },
+  
+    doubleNoun: (): string => {
+      const noun1 = getRandomElement(WORDS.nouns);
+      const noun2 = getRandomElement(WORDS.nouns);
+      const number = Math.floor(Math.random() * 100);
+      return `${noun1}${number}${noun2}`;
+    },
+  };
+  
+  export function generateUsername(): string {
+    const patterns = Object.values(usernamePatterns);
+    const selectedPattern = getRandomElement(patterns);
+    return selectedPattern();
+  }
+  
+  export async function generateUniqueUsername(
+    checkExists: (username: string) => Promise<boolean>
+  ): Promise<string> {
+    const MAX_ATTEMPTS = 10;
+    let attempts = 0;
+    let username = generateUsername();
+  
+    while (await checkExists(username) && attempts < MAX_ATTEMPTS) {
+      username = generateUsername();
+      attempts++;
+    }
+  
+    if (attempts >= MAX_ATTEMPTS) {
+      // Add a large random number to ensure uniqueness
+      username = generateUsername() + Math.floor(Math.random() * 1000000);
+    }
+  
+    return username;
+  }
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@ -5,6 +5,12 @@ const nextConfig = {
      {
        hostname: "cdn.simpleicons.org",
      },
+      {
+        hostname: "img.clerk.com",
+      },
+      {
+        hostname: "images.clerk.dev",
+      },
    ],
  },
 }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -27,9 +27,11 @@
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.1.3",
    "@react-three/fiber": "^8.16.6",
    "@uiw/codemirror-theme-vscode": "^4.23.5",
    "@uiw/react-codemirror": "^4.23.5",
@ -38,11 +40,13 @@
    "@xterm/xterm": "^5.5.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
+    "embla-carousel": "^8.3.0",
    "embla-carousel-react": "^8.3.0",
    "embla-carousel-wheel-gestures": "^8.0.1",
    "framer-motion": "^11.2.3",
    "fs": "^0.0.1-security",
    "geist": "^1.3.0",
+    "jszip": "^3.10.1",
    "lucide-react": "^0.365.0",
    "monaco-themes": "^0.4.4",
    "next": "14.1.3",
@ -55,6 +59,7 @@
    "react-resizable-panels": "^2.0.16",
    "react-syntax-highlighter": "^15.5.0",
    "remark-gfm": "^4.0.0",
+    "shadcn": "^2.1.6",
    "socket.io-client": "^4.7.5",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.3.0",
--- a/package-lock.json
+++ b/package-lock.json
@ -1,630 +0,0 @@
-{
-  "name": "sandbox",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "@radix-ui/react-popover": "^1.1.1"
-      }
-    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
-      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.7"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
-      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.7"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
-      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
-      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
-    },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
-      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
-    },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
-      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
-      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
-      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
-      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-escape-keydown": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
-      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
-      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-id": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
-      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popover": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
-      "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.0",
-        "@radix-ui/react-focus-guards": "1.1.0",
-        "@radix-ui/react-focus-scope": "1.1.0",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.1",
-        "@radix-ui/react-presence": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
-        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.7"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
-      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0",
-        "@radix-ui/react-use-rect": "1.1.0",
-        "@radix-ui/react-use-size": "1.1.0",
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
-      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
-      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
-      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
-      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
-      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
-      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
-      "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
-      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
-      "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
-      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
-      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-size": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
-      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
-      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
-    },
-    "node_modules/aria-hidden": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
-      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
-      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.4",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
-      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
-      "dependencies": {
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
-    },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
-      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    }
-  }
-}
--- a/package.json
+++ b/package.json
@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "@radix-ui/react-popover": "^1.1.1"
-  }
-}
--- a/tests/index.ts
+++ b/tests/index.ts
@ -1,6 +1,6 @@
 // Import necessary modules
-import { io, Socket } from "socket.io-client";
 import dotenv from "dotenv";
+import { io, Socket } from "socket.io-client";

 dotenv.config();

@ -21,7 +21,7 @@ socketRef.on("connect", async () => {
  console.log("Connected to the server");
  await new Promise((resolve) => setTimeout(resolve, 1000));

-  socketRef.emit("list", (response: CallbackResponse) => {
+  socketRef.emit("list", {}, (response: CallbackResponse) => {
    if (response.success) {
      console.log("List of apps:", response.apps);
    } else {
@ -29,7 +29,7 @@ socketRef.on("connect", async () => {
    }
  });

-  socketRef.emit("deploy", (response: CallbackResponse) => {
+  socketRef.emit("deploy", {}, (response: CallbackResponse) => {
    if (response.success) {
      console.log("It worked!");
    } else {
Author	SHA1	Message	Date
Akhileshrangani4	0828209455	Chore: Change about to help, and add link to Discord	2024-11-17 18:10:19 -05:00
Akhileshrangani4	94ca5b2c9f	fix: comment out live collaboration features	2024-11-17 17:52:39 -05:00
Akhileshrangani4	2a58d0a5e3	fix: type errors, shared page avatars and project icons	2024-11-11 16:02:26 -05:00
Akhileshrangani4	30c9da559f	feat: user avatar images - added user avatars for each user - it will fetch user images from github or google and if there is no image then it will show initials	2024-11-11 16:01:47 -05:00
Akhileshrangani4	2262adca74	feat: schema updates - added additional items to users and sandbox tables - added a random username generator	2024-11-10 21:52:52 -05:00
Akhileshrangani4	b486d22111	chore: remove unnecessary logs	2024-11-09 17:57:48 -05:00
James Murdza	81399cd351	docs: update README	2024-11-08 14:42:53 -05:00
James Murdza	96812027d0	docs: add custom template instructions	2024-11-04 17:57:25 -06:00
Akhileshrangani4	85abbbdb0b	fix: ignore certains files and folders from the file tree - Created new config file for ignored paths in file system traversal - Separated ignored folders and files into dedicated arrays - Includes comprehensive ignore patterns for: - Package managers (node_modules, venv) - Build outputs and caches - Version control - IDE specific folders - Framework specific directories - System and config files - Lock files and compiled assets	2024-11-04 17:53:34 -05:00
Akhileshrangani4	3db3fbc490	chore: delete unused files	2024-11-04 17:30:13 -05:00
Akhileshrangani4	c6c01101f1	feat: multi-file context, context tabs - added context tabs - added multifile context including file and image uploads to the context along with all the files from the project - added file/image previews on input - added code paste from the editor and file lines recognition - added image paste from clipboard and preview	2024-11-04 17:29:23 -05:00
Akhileshrangani4	9c6067dcd9	feat: enhance AI Chat with context management, file integration, image support, and improved code handling - Added context tabs system for managing multiple types of context (files, code snippets, images) - Added preview functionality for context items - Added ability to expand/collapse context previews - Added file selection popup/dropdown - Added file search functionality - Added image upload button - Added image paste support - Added image preview in context tabs - Added automatic code detection on paste - Added line number tracking for code snippets - Added source file name preservation - Added line range display for code contexts - Added model selection dropdown (Claude 3.5 Sonnet/Claude 3) - Added Ctrl+Enter for sending with full context - Added Backspace to remove last context tab when input is empty - Added smart code detection on paste	2024-11-04 17:24:22 -05:00
James Murdza	9c98e41ebb	chore: delete unused files	2024-11-03 12:50:58 -06:00
James Murdza	c669babb2f	fix: use posix paths when converting paths to relative format	2024-11-03 12:28:17 -06:00
James Murdza	474102aa14	fix: use new project directory path to find tsconfig files	2024-11-02 13:28:48 -06:00
James Murdza	5a63ab7265	feat: load project templates from custom E2B sandboxes instead of from Cloudflare	2024-11-02 13:28:48 -06:00
James Murdza	5633727bdb	chore: update template types	2024-11-02 13:28:48 -06:00
James Murdza	39911e9ef2	fix: add jszip to frontend	2024-11-02 05:55:50 -06:00
James Murdza	f35330ba4f	chore: add missing entries to .env.example	2024-11-02 05:55:50 -06:00
omar rashed	9197050ca3	feat: add name of the project	2024-11-02 05:55:50 -06:00
omar rashed	ebb270911b	fix: add jszip	2024-11-02 05:55:50 -06:00
omar rashed	60c5345753	feat: add download button	2024-11-02 05:55:31 -06:00
James Murdza	95154af074	docs: add note about Cloudflare Worker URLs	2024-11-01 07:59:35 -06:00
Akhileshrangani4	7ed2d14435	chore: changing the links	2024-10-27 17:27:55 -04:00
Akhileshrangani4	198b59aa55	feat: add AI chat button to open it	2024-10-27 17:27:36 -04:00
Akhileshrangani4	f6077ed516	fix: jsx.tolowercase error	2024-10-27 17:27:08 -04:00
Akhileshrangani4	684ee20a03	chore: removing unnecessary code	2024-10-27 17:26:43 -04:00
Akhileshrangani4	e658a84a9b	chore: add posix to fix file not found errors	2024-10-27 17:25:21 -04:00
James Murdza	b64913a8f3	Merge branch 'refs/heads/refactor-server'	2024-10-26 18:43:08 -06:00
James Murdza	0809eaca4e	refactor: rename SandboxManager to Sandbox	2024-10-26 18:41:10 -06:00
Hamzat Victor	8b890fdffe	fix: remove editor red squiggly lines by dynamically loading project's tsconfig file and adding nice defaults # Conflicts: # frontend/components/editor/index.tsx # frontend/lib/utils.ts	2024-10-26 18:41:10 -06:00
James Murdza	224d190468	refactor: improve readability of connection manager code	2024-10-26 18:41:10 -06:00
James Murdza	7ace8f569a	fix: forward filesystem change notifications to all relevant connections	2024-10-26 18:40:50 -06:00
James Murdza	a87a4b5160	fix: call event handlers when there is no callback	2024-10-26 18:38:09 -06:00
James Murdza	e229dab826	fix: wait until the owner is disconnected from all sockets to close terminals and file manager	2024-10-26 18:38:09 -06:00
James Murdza	3ad7e5d9bc	refactor: improve names of server variables	2024-10-26 18:38:09 -06:00
James Murdza	935c314357	chore: add comments to backend server	2024-10-26 18:38:09 -06:00
James Murdza	0b6085c57c	refactor: create connection manager class	2024-10-26 18:38:09 -06:00
James Murdza	87a74d40d6	refactor: simplify server error handling	2024-10-26 18:38:09 -06:00
James Murdza	aa554fa39d	fix: use entire file paths when pushing files to Dokku	2024-10-26 18:38:09 -06:00
James Murdza	28e6e2f889	refactor: simplify file manager properties	2024-10-26 18:38:09 -06:00
James Murdza	dc4be6392a	refactor: restructure try...catch blocks in server	2024-10-26 18:38:09 -06:00
James Murdza	3e891e6ab1	refactor: move initialization code to SandboxManager	2024-10-26 18:38:09 -06:00
James Murdza	16e0c250d6	refactor: create sandboxManager class	2024-10-26 18:38:09 -06:00
James Murdza	fcc7a836a6	refactor: export all event handlers as one object	2024-10-26 18:38:09 -06:00
James Murdza	09ab81f5bd	refactor: move rate limiting to handler functions	2024-10-26 18:38:09 -06:00
James Murdza	5ba6bdba15	fix: fix problems with event handler arguments	2024-10-26 18:38:02 -06:00
James Murdza	1479d25d49	refactor: reuse try...catch and rate limiting code across handlers	2024-10-26 18:35:29 -06:00
James Murdza	1de980cdd6	refactor: pass event handler arguments as a single object	2024-10-26 18:35:29 -06:00
James Murdza	c644b0054e	refactor: add callback usage to all event handlers	2024-10-26 18:35:21 -06:00
James Murdza	33c8ed8b32	chore: change Dokku errors to warnings	2024-10-26 18:19:37 -06:00
James Murdza	162da9f7ce	refactor: move socket authentication middleware to a separate file	2024-10-26 18:19:37 -06:00
James Murdza	af83b33f51	refactor: pass context as object to event handlers	2024-10-26 18:19:37 -06:00
James Murdza	98eda3b080	refactor: move event handlers to a separate file	2024-10-26 18:19:28 -06:00
James Murdza	67f3efa038	refactor: move DokkuResponse to types	2024-10-26 06:44:30 -06:00
James Murdza	76f6e4b0bb	refactor: format Cloudflare Worker code	2024-10-26 06:44:10 -06:00