Merge branch 'main' of https://github.com/Code-Victor/sandbox

.prettierignore

@@ -1,4 +0,0 @@
-# frontend/**
-backend/ai/**
-backend/database/**
-backend/storage/**

README.md

@@ -1,103 +1,213 @@
-# Sandbox 📦🪄
+# GitWit Sandbox 📦🪄
 
-<img width="1799" alt="Screenshot 2024-05-31 at 8 33 56 AM" src="https://github.com/ishaan1013/sandbox/assets/69771365/3f73d7c0-f82a-4997-b01e-eaa043e95113">
+![2024-10-2307 17 42-ezgif com-resize](https://github.com/user-attachments/assets/a4057129-81a7-4a31-a093-c8bc8189ae72)
 
-Sandbox is an open-source cloud-based code editing environment with custom AI code autocompletion and real-time collaboration.
+Sandbox is an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration and AI chat.
 
-Check out the [Twitter thread](https://x.com/ishaandey_/status/1796338262002573526) with the demo video!
+For the latest updates, join our Discord server: [discord.gitwit.dev](https://discord.gitwit.dev/).
-
-Check out this [guide](https://dev.to/jamesmurdza/how-to-setup-ishaan1013sandbox-locally-503p) made by [@jamesmurdza](https://x.com/jamesmurdza) on setting it up locally!
 
 ## Running Locally
 
-### Frontend
+Notes:
 
-Install dependencies
+- 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
+
+The application uses NodeJS for the backend, NextJS for the frontend and Cloudflare workers for additional backend tasks.
+
+Needed accounts to set up:
+
+- [Clerk](https://clerk.com/): Used for user authentication.
+- [Liveblocks](https://liveblocks.io/): Used for collaborative editing.
+- [E2B](https://e2b.dev/): Used for the terminals and live preview.
+- [Cloudflare](https://www.cloudflare.com/): Used for relational data storage (D2) and file storage (R2).
+
+A quick overview of the tech before we start: The deployment uses a **NextJS** app for the frontend and an **ExpressJS** server on the backend. Presumably that's because NextJS integrates well with Clerk middleware but not with Socket.io.
+
+### 1. Initial setup
+
+No surprise in the first step:
 
 ```bash
-cd frontend
+git clone https://github.com/jamesmurdza/sandbox
-npm install
+cd sandbox
 ```
 
-Add the required environment variables in `.env` (example file provided in `.env.example`). You will need to make an account on [Clerk](https://clerk.com/) and [Liveblocks](https://liveblocks.io/) to get API keys.
+Run `npm install` in:
 
-Then, run in development mode
+```
-
+/frontend
-```bash
+/backend/database
-npm run dev
+/backend/storage
+/backend/server
+/backend/ai
 ```
 
-### Backend
+### 2. Adding Clerk
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+Setup the Clerk account.
+Get the API keys from Clerk.
 
-You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
+Update `/frontend/.env`:
 
-#### Socket.io server
+```
-
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='🔑'
-Install dependencies
+CLERK_SECRET_KEY='🔑'
-
-```bash
-cd backend/server
-npm install
 ```
 
-Add the required environment variables in `.env` (example file provided in `.env.example`)
+### 3. Deploying the storage bucket
 
-Project files will be stored in the `projects/<project-id>` directory. The middleware contains basic authorization logic for connecting to the server.
+Go to Cloudflare.
+Create and name an R2 storage bucket in the control panel.
+Copy the account ID of one domain.
 
-Run in development mode
+Update `/backend/storage/src/wrangler.toml`:
 
-```bash
+```
-npm run dev
+account_id = '🔑'
+bucket_name = '🔑'
+key = 'SUPERDUPERSECRET'
 ```
 
-This directory is dockerized, so feel free to deploy a container on any platform of your choice! I chose not to deploy this project for public access due to costs & safety, but deploying your own for personal use should be no problem.
+In the `/backend/storage/src` directory:
 
-#### Cloudflare Workers (Database, Storage, AI)
-
-Directories:
-
-- `/backend/database`: D1 database
-- `/backend/storage`: R2 storage
-- `/backend/ai`: Workers AI
-
-Install dependencies
-
-```bash
-cd backend/database
-npm install
-
-cd ../storage
-npm install
-
-cd ../ai
-npm install
 ```
-
-Read the [documentation](https://developers.cloudflare.com/workers/) to learn more about workers.
-
-For each directory, add the required environment variables in `wrangler.toml` (example file provided in `wrangler.example.toml`). For the AI worker, you can define any value you want for the `CF_AI_KEY` -- set this in other `.env` files to authorize access.
-
-Run in development mode
-
-```bash
-npm run dev
-```
-
-Deploy to Cloudflare with [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/)
-
-```bash
 npx wrangler deploy
 ```
 
----
+### 4. Deploying the database
+
+Create a database:
+
+```
+npx wrangler d1 create sandbox-database
+```
+
+Use the output for the next setp.
+
+Update `/backend/database/src/wrangler.toml`:
+
+```
+database_name = '🔑'
+database_id = '🔑'
+KEY = 'SUPERDUPERSECRET'
+STORAGE_WORKER_URL = 'https://storage.🍎.workers.dev'
+```
+
+In the `/backend/database/src` directory:
+
+```
+npx wrangler deploy
+```
+
+### 5. Applying the database schema
+
+Delete the `/backend/database/drizzle/meta` directory.
+
+In the `/backend/database/` directory:
+
+```
+npm run generate
+npx wrangler d1 execute sandbox-database --remote --file=./drizzle/0000_🍏_🍐.sql
+```
+
+### 6. Configuring the server
+
+Update `/backend/server/.env`:
+
+```
+DATABASE_WORKER_URL='https://database.🍎.workers.dev'
+STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
+WORKERS_KEY='SUPERDUPERSECRET'
+```
+
+### 7. Adding Liveblocks
+
+Setup the Liveblocks account.
+
+Update `/frontend/.env`:
+
+```
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY='🔑'
+LIVEBLOCKS_SECRET_KEY='🔑'
+```
+
+### 8. Adding E2B
+
+Setup the E2B account.
+
+Update `/backend/server/.env`:
+
+```
+E2B_API_KEY='🔑'
+```
+
+### 9. Adding AI code generation
+
+In the `/backend/ai` directory:
+
+```
+npx wrangler deploy
+```
+
+Update `/backend/server/.env`:
+
+```
+AI_WORKER_URL='https://ai.🍎.workers.dev'
+```
+
+### 10. Configuring the frontend
+
+Update `/frontend/.env`:
+
+```
+NEXT_PUBLIC_DATABASE_WORKER_URL='https://database.🍎.workers.dev'
+NEXT_PUBLIC_STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
+NEXT_PUBLIC_WORKERS_KEY='SUPERDUPERSECRET'
+```
+
+### 11. Running the IDE
+
+Run `npm run dev` simultaneously in:
+
+```
+/frontend
+/backend/server
+```
+
+## Setting up Deployments
+
+The steps above do not include steps to setup [Dokku](https://github.com/dokku/dokku), which is required for deployments.
+
+**Note:** This is completely optional to set up if you just want to run GitWit Sandbox.
+
+Setting up deployments first requires a separate domain (such as gitwit.app, which we use).
+
+We then deploy Dokku on a separate server, according to this guide: https://dev.to/jamesmurdza/host-your-own-paas-platform-as-a-service-on-amazon-web-services-3f0d
+
+The Sandbox platform connects to the Dokku server via SSH, using SSH keys specifically generated for this connection. The SSH key is stored on the Sandbox server, and the following environment variables are set in /backend/server/.env:
+
+```bash
+DOKKU_HOST=
+DOKKU_USERNAME=
+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:
+
+- 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
+
+Please reach out to us [on Discord](https://discord.gitwit.dev/) if you're interested in contributing.
 
 ## Contributing
 
-Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free to reach out to [@ishaandey\_](https://x.com/ishaandey_).
+Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free contact us [on Discord](https://discord.gitwit.dev/).
-
-Please prioritize existing issues, but feel free to contribute new issues if you have ideas for a feature or bug that you think would be useful.
 
 ### Structure
 
@@ -117,7 +227,7 @@ backend/
 ```
 
 | Path               | Description                                                  |
-| ------------------ | -------------------------------------------------------------------------- |
+| ------------------ | ------------------------------------------------------------ |
 | `frontend`         | The Next.js application for the frontend.                    |
 | `backend/server`   | The Express websocket server.                                |
 | `backend/database` | API for interfacing with the D1 database (SQLite).           |
@@ -151,11 +261,15 @@ It should be in the form `category(scope or module): message` in your commit mes
 
 - `feat / feature`: all changes that introduce completely new code or new
   features
+
 - `fix`: changes that fix a bug (ideally you will additionally reference an
   issue if present)
+
 - `refactor`: any code related change that is not a fix nor a feature
+
 - `docs`: changing existing or creating new documentation (i.e. README, docs for
   usage of a lib or cli usage)
+
 - `chore`: all changes to the repository that do not fit into any of the above
   categories
 

backend/ai/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/ai/src/index.ts

@@ -1,8 +1,8 @@
-import { Anthropic } from "@anthropic-ai/sdk";
+import { Anthropic } from "@anthropic-ai/sdk"
-import { MessageParam } from "@anthropic-ai/sdk/src/resources/messages.js";
+import { MessageParam } from "@anthropic-ai/sdk/src/resources/messages.js"
 
 export interface Env {
-  ANTHROPIC_API_KEY: string;
+	ANTHROPIC_API_KEY: string
 }
 
 export default {
@@ -15,41 +15,45 @@ export default {
 					"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
 					"Access-Control-Allow-Headers": "Content-Type",
 				},
-      });
+			})
 		}
 
 		if (request.method !== "GET" && request.method !== "POST") {
-      return new Response("Method Not Allowed", { status: 405 });
+			return new Response("Method Not Allowed", { status: 405 })
 		}
 
-    let body;
+		let body
-    let isEditCodeWidget = false;
+		let isEditCodeWidget = false
 		if (request.method === "POST") {
-      body = await request.json() as { messages: unknown; context: unknown; activeFileContent: string };
+			body = (await request.json()) as {
+				messages: unknown
+				context: unknown
+				activeFileContent: string
+			}
 		} else {
-      const url = new URL(request.url);
+			const url = new URL(request.url)
-      const fileName = url.searchParams.get("fileName") || "";
+			const fileName = url.searchParams.get("fileName") || ""
-      const code = url.searchParams.get("code") || "";
+			const code = url.searchParams.get("code") || ""
-      const line = url.searchParams.get("line") || "";
+			const line = url.searchParams.get("line") || ""
-      const instructions = url.searchParams.get("instructions") || "";
+			const instructions = url.searchParams.get("instructions") || ""
 
 			body = {
 				messages: [{ role: "human", content: instructions }],
 				context: `File: ${fileName}\nLine: ${line}\nCode:\n${code}`,
 				activeFileContent: code,
-      };
+			}
-      isEditCodeWidget = true;
+			isEditCodeWidget = true
 		}
 
-    const messages = body.messages;
+		const messages = body.messages
-    const context = body.context;
+		const context = body.context
-    const activeFileContent = body.activeFileContent;
+		const activeFileContent = body.activeFileContent
 
 		if (!Array.isArray(messages) || messages.length === 0) {
-      return new Response("Invalid or empty messages", { status: 400 });
+			return new Response("Invalid or empty messages", { status: 400 })
 		}
 
-    let systemMessage;
+		let systemMessage
 		if (isEditCodeWidget) {
 			systemMessage = `You are an AI code editor. Your task is to modify the given code based on the user's instructions. Only output the modified code, without any explanations or markdown formatting. The code should be a direct replacement for the existing code.
 
@@ -61,7 +65,7 @@ ${activeFileContent}
 
 Instructions: ${messages[0].content}
 
-Respond only with the modified code that can directly replace the existing code.`;
+Respond only with the modified code that can directly replace the existing code.`
 		} else {
 			systemMessage = `You are an intelligent programming assistant. Please respond to the following request concisely. If your response includes code, please format it using triple backticks (\`\`\`) with the appropriate language identifier. For example:
 
@@ -71,17 +75,17 @@ print("Hello, World!")
 
 Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
 
-${context ? `Context:\n${context}\n` : ''}
+${context ? `Context:\n${context}\n` : ""}
-${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ''}`;
+${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
 		}
 
-    const anthropicMessages = messages.map(msg => ({
+		const anthropicMessages = messages.map((msg) => ({
-      role: msg.role === 'human' ? 'user' : 'assistant',
+			role: msg.role === "human" ? "user" : "assistant",
-      content: msg.content
+			content: msg.content,
-    })) as MessageParam[];
+		})) as MessageParam[]
 
 		try {
-      const anthropic = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY });
+			const anthropic = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY })
 
 			const stream = await anthropic.messages.create({
 				model: "claude-3-5-sonnet-20240620",
@@ -89,33 +93,36 @@ ${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ''}`;
 				system: systemMessage,
 				messages: anthropicMessages,
 				stream: true,
-      });
+			})
 
-      const encoder = new TextEncoder();
+			const encoder = new TextEncoder()
 
 			const streamResponse = new ReadableStream({
 				async start(controller) {
 					for await (const chunk of stream) {
-            if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') {
+						if (
-              const bytes = encoder.encode(chunk.delta.text);
+							chunk.type === "content_block_delta" &&
-              controller.enqueue(bytes);
+							chunk.delta.type === "text_delta"
+						) {
+							const bytes = encoder.encode(chunk.delta.text)
+							controller.enqueue(bytes)
 						}
 					}
-          controller.close();
+					controller.close()
 				},
-      });
+			})
 
 			return new Response(streamResponse, {
 				headers: {
 					"Content-Type": "text/plain; charset=utf-8",
 					"Access-Control-Allow-Origin": "*",
 					"Cache-Control": "no-cache",
-          "Connection": "keep-alive",
+					Connection: "keep-alive",
 				},
-      });
+			})
 		} catch (error) {
-      console.error("Error:", error);
+			console.error("Error:", error)
-      return new Response("Internal Server Error", { status: 500 });
+			return new Response("Internal Server Error", { status: 500 })
 		}
 	},
-};
+}

backend/ai/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
+import {
-import { describe, it, expect } from 'vitest';
+	createExecutionContext,
-import worker from '../src/index';
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
-describe('Hello World worker', () => {
+describe("Hello World worker", () => {
-	it('responds with Hello World! (unit style)', async () => {
+	it("responds with Hello World! (unit style)", async () => {
-		const request = new IncomingRequest('http://example.com');
+		const request = new IncomingRequest("http://example.com")
 		// Create an empty context to pass to `worker.fetch()`.
-		const ctx = createExecutionContext();
+		const ctx = createExecutionContext()
-		const response = await worker.fetch(request, env, ctx);
+		const response = await worker.fetch(request, env, ctx)
 		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-		await waitOnExecutionContext(ctx);
+		await waitOnExecutionContext(ctx)
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	});
+	})
 
-	it('responds with Hello World! (integration style)', async () => {
+	it("responds with Hello World! (integration style)", async () => {
-		const response = await SELF.fetch('https://example.com');
+		const response = await SELF.fetch("https://example.com")
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	});
+	})
-});
+})

backend/ai/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */

backend/ai/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
 	test: {
@@ -8,4 +8,4 @@ export default defineWorkersConfig({
 			},
 		},
 	},
-});
+})

backend/ai/worker-configuration.d.ts

@@ -1,4 +1,3 @@
 // Generated by Wrangler
 // After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
-interface Env {
+interface Env {}
-}

backend/ai/wrangler.example.toml

@@ -5,3 +5,6 @@ compatibility_flags = ["nodejs_compat"]
 
 [ai]
 binding = "AI"
+
+[vars]
+ANTHROPIC_API_KEY = ""

backend/database/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/database/drizzle.config.ts

@@ -1,4 +1,4 @@
-import type { Config } from "drizzle-kit";
+import type { Config } from "drizzle-kit"
 
 export default process.env.LOCAL_DB_PATH
 	? ({
@@ -16,4 +16,4 @@ export default process.env.LOCAL_DB_PATH
 				wranglerConfigPath: "wrangler.toml",
 				dbName: "d1-sandbox",
 			},
-	  } satisfies Config);
+	  } satisfies Config)

backend/database/src/index.ts

@@ -1,11 +1,11 @@
 // import type { DrizzleD1Database } from "drizzle-orm/d1";
 import { drizzle } from "drizzle-orm/d1"
 import { json } from "itty-router-extras"
-import { ZodError, z } from "zod"
+import { z } from "zod"
 
-import { user, sandbox, usersToSandboxes } from "./schema"
-import * as schema from "./schema"
 import { and, eq, sql } from "drizzle-orm"
+import * as schema from "./schema"
+import { sandbox, user, usersToSandboxes } from "./schema"
 
 export interface Env {
 	DB: D1Database

backend/database/src/schema.ts

@@ -1,6 +1,6 @@
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { createId } from "@paralleldrive/cuid2"
-import { createId } from "@paralleldrive/cuid2";
+import { relations } from "drizzle-orm"
-import { relations, sql } from "drizzle-orm";
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core"
 
 export const user = sqliteTable("user", {
 	id: text("id")
@@ -11,14 +11,14 @@ export const user = sqliteTable("user", {
 	email: text("email").notNull(),
 	image: text("image"),
 	generations: integer("generations").default(0),
-});
+})
 
-export type User = typeof user.$inferSelect;
+export type User = typeof user.$inferSelect
 
 export const userRelations = relations(user, ({ many }) => ({
 	sandbox: many(sandbox),
 	usersToSandboxes: many(usersToSandboxes),
-}));
+}))
 
 export const sandbox = sqliteTable("sandbox", {
 	id: text("id")
@@ -32,9 +32,9 @@ export const sandbox = sqliteTable("sandbox", {
 	userId: text("user_id")
 		.notNull()
 		.references(() => user.id),
-});
+})
 
-export type Sandbox = typeof sandbox.$inferSelect;
+export type Sandbox = typeof sandbox.$inferSelect
 
 export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
 	author: one(user, {
@@ -42,7 +42,7 @@ export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
 		references: [user.id],
 	}),
 	usersToSandboxes: many(usersToSandboxes),
-}));
+}))
 
 export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
 	userId: text("userId")
@@ -52,9 +52,11 @@ export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
 		.notNull()
 		.references(() => sandbox.id),
 	sharedOn: integer("sharedOn", { mode: "timestamp_ms" }),
-});
+})
 
-export const usersToSandboxesRelations = relations(usersToSandboxes, ({ one }) => ({
+export const usersToSandboxesRelations = relations(
+	usersToSandboxes,
+	({ one }) => ({
 		group: one(sandbox, {
 			fields: [usersToSandboxes.sandboxId],
 			references: [sandbox.id],
@@ -63,4 +65,5 @@ export const usersToSandboxesRelations = relations(usersToSandboxes, ({ one }) =
 			fields: [usersToSandboxes.userId],
 			references: [user.id],
 		}),
-}));
+	})
+)

backend/database/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
+import {
-import { describe, it, expect } from "vitest";
+	createExecutionContext,
-import worker from "../src/index";
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
 describe("Hello World worker", () => {
 	it("responds with Hello World! (unit style)", async () => {
-    const request = new IncomingRequest("http://example.com");
+		const request = new IncomingRequest("http://example.com")
 		// Create an empty context to pass to `worker.fetch()`.
-    const ctx = createExecutionContext();
+		const ctx = createExecutionContext()
-    const response = await worker.fetch(request, env, ctx);
+		const response = await worker.fetch(request, env, ctx)
 		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-    await waitOnExecutionContext(ctx);
+		await waitOnExecutionContext(ctx)
-    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-  });
+	})
 
 	it("responds with Hello World! (integration style)", async () => {
-    const response = await SELF.fetch("https://example.com");
+		const response = await SELF.fetch("https://example.com")
-    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
- });
+	})
-});
+})

backend/database/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */

backend/database/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
 	test: {
@@ -8,4 +8,4 @@ export default defineWorkersConfig({
 			},
 		},
 	},
-});
+})

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();
+    }
+
+}

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)
+    this.fileData = await this.generateFileData(localPaths)
-    return this.sandboxFiles.fileData
+    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)
+    this.files = generateFileStructure(localPaths)
-    return this.sandboxFiles.files
+    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)
@@ -209,7 +205,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 +228,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 +237,7 @@ export class FileManager {
                 )
                 const fileContents =
                   typeof fileData === "string" ? fileData : ""
-                this.sandboxFiles.fileData.push({
+                this.fileData.push({
                   id: sandboxFilePath,
                   data: fileContents,
                 })
@@ -253,7 +249,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 +265,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 +281,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 +304,7 @@ export class FileManager {
                   )
                   const fileContents =
                     typeof fileData === "string" ? fileData : ""
-                  this.sandboxFiles.fileData.push({
+                  this.fileData.push({
                     id: sandboxFilePath,
                     data: fileContents,
                   })
@@ -318,7 +314,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,7 +348,7 @@ export class FileManager {
 
   // Get file content
   async getFile(fileId: string): Promise<string | undefined> {
-    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const file = this.fileData.find((f) => f.id === fileId)
     return file?.data
   }
 
@@ -368,7 +366,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 +379,9 @@ export class FileManager {
     fileId: string,
     folderId: string
   ): Promise<(TFolder | TFile)[]> {
-    const fileData = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const fileData = this.fileData.find((f) => f.id === fileId)
-    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
-    if (!fileData || !file) return this.sandboxFiles.files
+    if (!fileData || !file) return this.files
 
     const parts = fileId.split("/")
     const newFileId = folderId + "/" + parts.pop()
@@ -427,13 +425,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 +449,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 fileData = this.fileData.find((f) => f.id === fileId)
-    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
     if (!fileData || !file) return
 
     const parts = fileId.split("/")
@@ -468,11 +466,11 @@ export class FileManager {
 
   // Delete a file
   async deleteFile(fileId: string): Promise<(TFolder | TFile)[]> {
-    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const file = this.fileData.find((f) => f.id === fileId)
-    if (!file) return this.sandboxFiles.files
+    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 +485,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))

backend/server/src/Sandbox.ts

@@ -0,0 +1,243 @@
+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, 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;
+    fileManager: FileManager | null;
+    terminalManager: TerminalManager | null;
+    container: E2BSandbox | null;
+    // Server context:
+    dokkuClient: DokkuClient | null;
+    gitClient: SecureGitClient | null;
+    aiWorker: AIWorker;
+
+    constructor(sandboxId: string, { aiWorker, dokkuClient, gitClient }: ServerContext) {
+        // Sandbox properties:
+        this.sandboxId = sandboxId;
+        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 timeout
+                this.container = await E2BSandbox.create({
+                    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)
+        }
+
+        return {
+            "heartbeat": handleHeartbeat,
+            "getFile": handleGetFile,
+            "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,
+        };
+
+    }
+
+}

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

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 { Server, Socket } from "socket.io"
-import { z } from "zod"
 import { AIWorker } from "./AIWorker"
+
+import { ConnectionManager } from "./ConnectionManager"
 import { DokkuClient } from "./DokkuClient"
-import { FileManager, SandboxFiles } from "./FileManager"
+import { Sandbox } from "./Sandbox"
-import {
-  createFileRL,
-  createFolderRL,
-  deleteFileRL,
-  renameFileRL,
-  saveFileRL,
-} from "./ratelimit"
 import { SecureGitClient } from "./SecureGitClient"
-import { TerminalManager } from "./TerminalManager"
+import { socketAuth } from "./socketAuth"; // Import the new socketAuth middleware
-import { User } from "./types"
+import { TFile, TFolder } from "./types"
-import { LockManager } from "./utils"
+
+// 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.
+// Initialize containers and managers
-const CONTAINER_TIMEOUT = 120_000
+const connections = new ConnectionManager()
+const sandboxes: Record<string, Sandbox> = {}
 
 // Load environment variables
 dotenv.config()
@@ -48,102 +45,23 @@ 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) => {
+io.use(socketAuth) // Use the new socketAuth middleware
-  // 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()
 
 // 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,
@@ -151,10 +69,10 @@ const client =
       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}`,
@@ -170,353 +88,91 @@ 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
     }
 
-    // Handle connection based on user type (owner or not)
+    // Register the connection
-    if (data.isOwner) {
+    connections.addConnectionForSandbox(socket, data.sandboxId, data.isOwner)
-      connections[data.sandboxId] = (connections[data.sandboxId] ?? 0) + 1
+
-    } else {
+    // Disable access unless the sandbox owner is connected
-      if (!isOwnerConnected(data.sandboxId)) {
+    if (!data.isOwner && !connections.ownerIsConnected(data.sandboxId)) {
       socket.emit("disableAccess", "The sandbox owner is not connected.")
       return
     }
-    }
 
-    // Create or retrieve container
+    try {
-    const createdContainer = await lockManager.acquireLock(
+      // Create or retrieve the sandbox manager for the given sandbox ID
+      const sandbox = sandboxes[data.sandboxId] ?? new Sandbox(
         data.sandboxId,
-      async () => {
+        {
-        try {
+          aiWorker, dokkuClient, gitClient,
-          // 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)
-          io.emit("error", `Error: container creation. ${e.message ?? e}`)
-        }
         }
       )
+      sandboxes[data.sandboxId] = sandbox
 
-    // Function to send loaded event
+      // This callback recieves an update when the file list changes, and notifies all relevant connections.
-    const sendLoadedEvent = (files: SandboxFiles) => {
+      const sendFileNotifications = (files: (TFolder | TFile)[]) => {
-      socket.emit("loaded", files.files)
+        connections.connectionsForSandbox(data.sandboxId).forEach((socket: Socket) => {
-    }
+          socket.emit("loaded", files);
+        });
+      };
 
-    // Initialize file and terminal managers if container was created
+      // Initialize the sandbox container
-    if (createdContainer) {
+      // The file manager and terminal managers will be set up if they have been closed
-      fileManagers[data.sandboxId] = new FileManager(
+      await sandbox.initialize(sendFileNotifications)
-        data.sandboxId,
+      socket.emit("loaded", sandbox.fileManager?.files)
-        containers[data.sandboxId],
-        sendLoadedEvent
-      )
-      await fileManagers[data.sandboxId].initialize()
-      terminalManagers[data.sandboxId] = new TerminalManager(
-        containers[data.sandboxId]
-      )
-    }
 
-    const fileManager = fileManagers[data.sandboxId]
+      // Register event handlers for the sandbox
-    const terminalManager = terminalManagers[data.sandboxId]
+      // For each event handler, listen on the socket for that event
-
+      // Pass connection-specific information to the handlers
-    // Load file list from the file manager into the editor
+      Object.entries(sandbox.handlers({
-    sendLoadedEvent(fileManager.sandboxFiles)
+        userId: data.userId,
-
+        isOwner: data.isOwner,
-    // Handle various socket events (heartbeat, file operations, terminal operations, etc.)
+        socket
-    socket.on("heartbeat", async () => {
+      })).forEach(([event, handler]) => {
+        socket.on(event, async (options: any, callback?: (response: any) => void) => {
           try {
-        // This keeps the container alive for another CONTAINER_TIMEOUT seconds.
+            const result = await handler(options)
-        // The E2B docs are unclear, but the timeout is relative to the time of this method call.
+            callback?.(result);
-        await containers[data.sandboxId].setTimeout(CONTAINER_TIMEOUT)
           } catch (e: any) {
-        console.error("Error setting timeout:", e)
+            handleErrors(`Error processing event "${event}":`, e, socket);
-        io.emit("error", `Error: set timeout. ${e.message ?? e}`)
           }
-    })
+        });
+      });
 
-    // Handle request to get file content
+      // Handle disconnection event
-    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)
-        io.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)
-        io.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)
-        io.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)
-          io.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)
-        io.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)
-        io.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)
-        io.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)
-        io.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)
-        io.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 () => {
-          await terminalManager.createTerminal(id, (responseString: string) => {
-            io.emit("terminalResponse", { id, data: responseString })
-            const port = extractPortNumber(responseString)
-            if (port) {
-              io.emit(
-                "previewURL",
-                "https://" + containers[data.sandboxId].getHost(port)
-              )
-            }
-          })
-        })
-        callback()
-      } catch (e: any) {
-        console.error(`Error creating terminal ${id}:`, e)
-        io.emit("error", `Error: terminal creation. ${e.message ?? e}`)
-      }
-    })
-
-    // Handle request to resize terminal
-    socket.on(
-      "resizeTerminal",
-      (dimensions: { cols: number; rows: number }) => {
-        try {
-          terminalManager.resizeTerminal(dimensions)
-        } catch (e: any) {
-          console.error("Error resizing terminal:", e)
-          io.emit("error", `Error: terminal resizing. ${e.message ?? e}`)
-        }
-      }
-    )
-
-    // 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)
-        io.emit("error", `Error: writing to terminal. ${e.message ?? e}`)
-      }
-    })
-
-    // 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)
-        io.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)
-          io.emit("error", `Error: code generation. ${e.message ?? e}`)
-        }
-      }
-    )
-
-    // Handle socket disconnection
       socket.on("disconnect", async () => {
         try {
-        if (data.isOwner) {
+          // Deregister the connection
-          connections[data.sandboxId]--
+          connections.removeConnectionForSandbox(socket, data.sandboxId, data.isOwner)
-        }
 
-        await terminalManager.closeAllTerminals()
+          // If the owner has disconnected from all sockets, close open terminals and file watchers.o
-        await fileManager.closeWatchers()
+          // The sandbox itself will timeout after the heartbeat stops.
-
+          if (data.isOwner && !connections.ownerIsConnected(data.sandboxId)) {
-        if (data.isOwner && connections[data.sandboxId] <= 0) {
+            await sandbox.disconnect()
             socket.broadcast.emit(
               "disableAccess",
               "The sandbox owner has disconnected."
             )
           }
         } catch (e: any) {
-        console.log("Error disconnecting:", e)
+          handleErrors("Error disconnecting:", e, socket);
-        io.emit("error", `Error: disconnecting. ${e.message ?? e}`)
         }
       })
+
     } catch (e: any) {
-    console.error("Error connecting:", e)
+      handleErrors(`Error initializing sandbox ${data.sandboxId}:`, e, socket);
-    io.emit("error", `Error: connection. ${e.message ?? e}`)
+    }
+
+  } catch (e: any) {
+    handleErrors("Error connecting:", e, socket);
   }
 })
 

backend/server/src/socketAuth.ts

@@ -0,0 +1,63 @@
+import { Socket } from "socket.io"
+import { z } from "zod"
+import { 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
+
+    // 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()
+}

backend/server/src/types.ts

@@ -68,3 +68,8 @@ export type R2FileBody = R2FileData & {
   json: Promise<any>
   blob: Promise<Blob>
 }
+export interface DokkuResponse {
+  success: boolean
+  apps?: string[]
+  message?: string
+}

backend/storage/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/storage/src/index.ts

@@ -1,5 +1,5 @@
+import pLimit from "p-limit"
 import { z } from "zod"
-import pLimit from 'p-limit';
 
 export interface Env {
 	R2: R2Bucket
@@ -144,20 +144,24 @@ export default {
 			const body = await request.json()
 			const { sandboxId, type } = initSchema.parse(body)
 
-			console.log(`Copying template: ${type}`);
+			console.log(`Copying template: ${type}`)
 
 			// List all objects under the directory
-			const { objects } = await env.Templates.list({ prefix: type });
+			const { objects } = await env.Templates.list({ prefix: type })
 
 			// Copy each object to the new directory with a 5 concurrency limit
-			const limit = pLimit(5);
+			const limit = pLimit(5)
-			await Promise.all(objects.map(({ key }) =>
+			await Promise.all(
+				objects.map(({ key }) =>
 					limit(async () => {
-				const destinationKey = key.replace(type, `projects/${sandboxId}`);
+						const destinationKey = key.replace(type, `projects/${sandboxId}`)
-				const fileBody = await env.Templates.get(key).then(res => res?.body ?? "");
+						const fileBody = await env.Templates.get(key).then(
-				await env.R2.put(destinationKey, fileBody);
+							(res) => res?.body ?? ""
+						)
+						await env.R2.put(destinationKey, fileBody)
 					})
-			));
+				)
+			)
 
 			return success
 		} else {

backend/storage/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
+import {
-import { describe, it, expect } from 'vitest';
+	createExecutionContext,
-import worker from '../src/index';
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
-describe('Hello World worker', () => {
+describe("Hello World worker", () => {
-	it('responds with Hello World! (unit style)', async () => {
+	it("responds with Hello World! (unit style)", async () => {
-		const request = new IncomingRequest('http://example.com');
+		const request = new IncomingRequest("http://example.com")
 		// Create an empty context to pass to `worker.fetch()`.
-		const ctx = createExecutionContext();
+		const ctx = createExecutionContext()
-		const response = await worker.fetch(request, env, ctx);
+		const response = await worker.fetch(request, env, ctx)
 		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-		await waitOnExecutionContext(ctx);
+		await waitOnExecutionContext(ctx)
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	});
+	})
 
-	it('responds with Hello World! (integration style)', async () => {
+	it("responds with Hello World! (integration style)", async () => {
-		const response = await SELF.fetch('https://example.com');
+		const response = await SELF.fetch("https://example.com")
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	});
+	})
-});
+})

backend/storage/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */

backend/storage/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
 	test: {
@@ -8,4 +8,4 @@ export default defineWorkersConfig({
 			},
 		},
 	},
-});
+})

backend/storage/worker-configuration.d.ts

@@ -1,4 +1,3 @@
 // Generated by Wrangler
 // After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
-interface Env {
+interface Env {}
-}

frontend/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

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

@@ -1,12 +1,11 @@
-import Navbar from "@/components/editor/navbar"
 import { Room } from "@/components/editor/live/room"
+import Loading from "@/components/editor/loading"
+import Navbar from "@/components/editor/navbar"
+import { TerminalProvider } from "@/context/TerminalContext"
 import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
-import { notFound, redirect } from "next/navigation"
-import Loading from "@/components/editor/loading"
 import dynamic from "next/dynamic"
-import fs from "fs"
+import { notFound, redirect } from "next/navigation"
-import { TerminalProvider } from "@/context/TerminalContext"
 
 export const revalidate = 0
 
@@ -92,12 +91,13 @@ export default async function CodePage({ params }: { params: { id: string } }) {
       <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
         <Room id={sandboxId}>
           <TerminalProvider>
-        <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
+            <Navbar
-        <div className="w-screen flex grow">
-          <CodeEditor
               userData={userData}
               sandboxData={sandboxData}
+              shared={shared}
             />
+            <div className="w-screen flex grow">
+              <CodeEditor userData={userData} sandboxData={sandboxData} />
             </div>
           </TerminalProvider>
         </Room>

frontend/app/(app)/dashboard/page.tsx

@@ -1,8 +1,8 @@
-import { UserButton, currentUser } from "@clerk/nextjs"
-import { redirect } from "next/navigation"
 import Dashboard from "@/components/dashboard"
 import Navbar from "@/components/dashboard/navbar"
-import { Sandbox, User } from "@/lib/types"
+import { User } from "@/lib/types"
+import { currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
 
 export default async function DashboardPage() {
   const user = await currentUser()

frontend/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 }
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
@@ -29,9 +29,7 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <SocketProvider>
-            <PreviewProvider>
+              <PreviewProvider>{children}</PreviewProvider>
-            {children}
-            </PreviewProvider>
             </SocketProvider>
             <Analytics />
             <Toaster position="bottom-left" richColors />

frontend/app/page.tsx

@@ -1,13 +1,13 @@
-import { currentUser } from "@clerk/nextjs";
+import Landing from "@/components/landing"
-import { redirect } from "next/navigation";
+import { currentUser } from "@clerk/nextjs"
-import Landing from "@/components/landing";
+import { redirect } from "next/navigation"
 
 export default async function Home() {
-  const user = await currentUser();
+  const user = await currentUser()
 
   if (user) {
-    redirect("/dashboard");
+    redirect("/dashboard")
   }
 
-  return <Landing />;
+  return <Landing />
 }

frontend/components/dashboard/about.tsx

@@ -3,16 +3,9 @@
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog"
-import Image from "next/image"
-import { useState } from "react"
-
-import { Button } from "../ui/button"
-import { ChevronRight } from "lucide-react"
 
 export default function AboutModal({
   open,

frontend/components/dashboard/index.tsx

@@ -1,24 +1,16 @@
 "use client"
 
-import CustomButton from "@/components/ui/customButton"
 import { Button } from "@/components/ui/button"
-import {
+import CustomButton from "@/components/ui/customButton"
-  Code2,
-  FolderDot,
-  HelpCircle,
-  Plus,
-  Settings,
-  Users,
-} from "lucide-react"
-import { useEffect, useState } from "react"
 import { Sandbox } from "@/lib/types"
+import { Code2, FolderDot, HelpCircle, Plus, Users } from "lucide-react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import AboutModal from "./about"
+import NewProjectModal from "./newProject"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
-import NewProjectModal from "./newProject"
-import Link from "next/link"
-import { useRouter, useSearchParams } from "next/navigation"
-import AboutModal from "./about"
-import { toast } from "sonner"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -49,7 +41,8 @@ export default function Dashboard({
   const q = searchParams.get("q")
   const router = useRouter()
 
-  useEffect(() => { // update the dashboard to show a new project
+  useEffect(() => {
+    // update the dashboard to show a new project
     router.refresh()
   }, [])
 
@@ -102,7 +95,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"

frontend/components/dashboard/navbar/index.tsx

@@ -1,9 +1,10 @@
+import Logo from "@/assets/logo.svg"
+import { ThemeSwitcher } from "@/components/ui/theme-switcher"
+import { User } from "@/lib/types"
 import Image from "next/image"
 import Link from "next/link"
-import Logo from "@/assets/logo.svg"
-import DashboardNavbarSearch from "./search"
 import UserButton from "../../ui/userButton"
-import { User } from "@/lib/types"
+import DashboardNavbarSearch from "./search"
 
 export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
@@ -19,6 +20,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
+        <ThemeSwitcher />
         <UserButton userData={userData} />
       </div>
     </div>

frontend/components/dashboard/navbar/search.tsx

@@ -1,13 +1,12 @@
-"use client";
+"use client"
 
-import { Input } from "../../ui/input";
+import { Search } from "lucide-react"
-import { Search } from "lucide-react";
+import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react";
+import { Input } from "../../ui/input"
-import { useRouter } from "next/navigation";
 
 export default function DashboardNavbarSearch() {
   // const [search, setSearch] = useState("");
-  const router = useRouter();
+  const router = useRouter()
 
   // useEffect(() => {
   //   const delayDebounceFn = setTimeout(() => {
@@ -29,14 +28,14 @@ export default function DashboardNavbarSearch() {
         // onChange={(e) => setSearch(e.target.value)}
         onChange={(e) => {
           if (e.target.value === "") {
-            router.push(`/dashboard`);
+            router.push(`/dashboard`)
-            return;
+            return
           }
-          router.push(`/dashboard?q=${e.target.value}`);
+          router.push(`/dashboard?q=${e.target.value}`)
         }}
         placeholder="Search projects..."
         className="pl-8"
       />
     </div>
-  );
+  )
 }

frontend/components/dashboard/newProject.tsx

@@ -288,7 +288,7 @@ function SearchInput({
     <form {...{ onSubmit }} className="w-40 h-8 ">
       <label
         htmlFor="template-search"
-        className="flex gap-2 rounded-sm transition-colors bg-gray-100 dark:bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))]  focus-within:[--s-color:#fff]  h-full items-center px-2"
+        className="flex gap-2 rounded-sm transition-colors bg-gray-100 dark:bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))]  focus-within:[--s-color:hsl(var(--muted-foreground),50%)]  h-full items-center px-2"
       >
         <Search className="size-4 text-[--s-color] transition-colors" />
         <input
@@ -298,7 +298,7 @@ function SearchInput({
           placeholder="Search templates"
           value={value}
           onChange={(e) => onValueChange?.(e.target.value)}
-          className="bg-transparent placeholder:text-muted-foreground text-white w-full focus:outline-none text-xs"
+          className="bg-transparent placeholder:text-muted-foreground w-full focus:outline-none text-xs"
         />
       </label>
     </form>

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -1,30 +1,30 @@
-"use client";
+"use client"
 
-import { Sandbox } from "@/lib/types";
+import { Sandbox } from "@/lib/types"
-import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react";
+import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react"
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu"
 
 export default function ProjectCardDropdown({
   sandbox,
   onVisibilityChange,
   onDelete,
 }: {
-  sandbox: Sandbox;
+  sandbox: Sandbox
-  onVisibilityChange: (sandbox: Sandbox) => void;
+  onVisibilityChange: (sandbox: Sandbox) => void
-  onDelete: (sandbox: Sandbox) => void;
+  onDelete: (sandbox: Sandbox) => void
 }) {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
         onClick={(e) => {
-          e.preventDefault();
+          e.preventDefault()
-          e.stopPropagation();
+          e.stopPropagation()
         }}
         className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
       >
@@ -33,8 +33,8 @@ export default function ProjectCardDropdown({
       <DropdownMenuContent className="w-40">
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation();
+            e.stopPropagation()
-            onVisibilityChange(sandbox);
+            onVisibilityChange(sandbox)
           }}
           className="cursor-pointer"
         >
@@ -52,8 +52,8 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation();
+            e.stopPropagation()
-            onDelete(sandbox);
+            onDelete(sandbox)
           }}
           className="!text-destructive cursor-pointer"
         >
@@ -62,5 +62,5 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
+  )
 }

frontend/components/dashboard/projectCard/index.tsx

@@ -1,14 +1,14 @@
 "use client"
 
+import { Card } from "@/components/ui/card"
+import { projectTemplates } from "@/lib/data"
+import { Sandbox } from "@/lib/types"
 import { AnimatePresence, motion } from "framer-motion"
+import { Clock, Globe, Lock } from "lucide-react"
 import Image from "next/image"
+import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import ProjectCardDropdown from "./dropdown"
-import { Clock, Globe, Lock } from "lucide-react"
-import { Sandbox } from "@/lib/types"
-import { Card } from "@/components/ui/card"
-import { useRouter } from "next/navigation"
-import { projectTemplates } from "@/lib/data"
 
 export default function ProjectCard({
   children,

frontend/components/dashboard/projectCard/revealEffect.tsx

@@ -1,8 +1,8 @@
-"use client";
+"use client"
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber"
-import React, { useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react"
-import * as THREE from "three";
+import * as THREE from "three"
 
 export const CanvasRevealEffect = ({
   animationSpeed = 0.4,
@@ -12,12 +12,12 @@ export const CanvasRevealEffect = ({
   dotSize,
   showGradient = true,
 }: {
-  animationSpeed?: number;
+  animationSpeed?: number
-  opacities?: number[];
+  opacities?: number[]
-  colors?: number[][];
+  colors?: number[][]
-  containerClassName?: string;
+  containerClassName?: string
-  dotSize?: number;
+  dotSize?: number
-  showGradient?: boolean;
+  showGradient?: boolean
 }) => {
   return (
     <div className={cn("h-full relative bg-white w-full", containerClassName)}>
@@ -41,16 +41,16 @@ export const CanvasRevealEffect = ({
         <div className="absolute inset-0 bg-gradient-to-t from-background to-[100%]" />
       )}
     </div>
-  );
+  )
-};
+}
 
 interface DotMatrixProps {
-  colors?: number[][];
+  colors?: number[][]
-  opacities?: number[];
+  opacities?: number[]
-  totalSize?: number;
+  totalSize?: number
-  dotSize?: number;
+  dotSize?: number
-  shader?: string;
+  shader?: string
-  center?: ("x" | "y")[];
+  center?: ("x" | "y")[]
 }
 
 const DotMatrix: React.FC<DotMatrixProps> = ({
@@ -69,7 +69,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
       colors[0],
       colors[0],
       colors[0],
-    ];
+    ]
     if (colors.length === 2) {
       colorsArray = [
         colors[0],
@@ -78,7 +78,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         colors[1],
         colors[1],
         colors[1],
-      ];
+      ]
     } else if (colors.length === 3) {
       colorsArray = [
         colors[0],
@@ -87,7 +87,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         colors[1],
         colors[2],
         colors[2],
-      ];
+      ]
     }
 
     return {
@@ -111,8 +111,8 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         value: dotSize,
         type: "uniform1f",
       },
-    };
+    }
-  }, [colors, opacities, totalSize, dotSize]);
+  }, [colors, opacities, totalSize, dotSize])
 
   return (
     <Shader
@@ -168,87 +168,87 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
       uniforms={uniforms}
       maxFps={60}
     />
-  );
+  )
-};
+}
 
 type Uniforms = {
   [key: string]: {
-    value: number[] | number[][] | number;
+    value: number[] | number[][] | number
-    type: string;
+    type: string
-  };
+  }
-};
+}
 const ShaderMaterial = ({
   source,
   uniforms,
   maxFps = 60,
 }: {
-  source: string;
+  source: string
-  hovered?: boolean;
+  hovered?: boolean
-  maxFps?: number;
+  maxFps?: number
-  uniforms: Uniforms;
+  uniforms: Uniforms
 }) => {
-  const { size } = useThree();
+  const { size } = useThree()
-  const ref = useRef<THREE.Mesh>();
+  const ref = useRef<THREE.Mesh>()
-  let lastFrameTime = 0;
+  let lastFrameTime = 0
 
   useFrame(({ clock }) => {
-    if (!ref.current) return;
+    if (!ref.current) return
-    const timestamp = clock.getElapsedTime();
+    const timestamp = clock.getElapsedTime()
     if (timestamp - lastFrameTime < 1 / maxFps) {
-      return;
+      return
     }
-    lastFrameTime = timestamp;
+    lastFrameTime = timestamp
 
-    const material: any = ref.current.material;
+    const material: any = ref.current.material
-    const timeLocation = material.uniforms.u_time;
+    const timeLocation = material.uniforms.u_time
-    timeLocation.value = timestamp;
+    timeLocation.value = timestamp
-  });
+  })
 
   const getUniforms = () => {
-    const preparedUniforms: any = {};
+    const preparedUniforms: any = {}
 
     for (const uniformName in uniforms) {
-      const uniform: any = uniforms[uniformName];
+      const uniform: any = uniforms[uniformName]
 
       switch (uniform.type) {
         case "uniform1f":
-          preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1f" }
-          break;
+          break
         case "uniform3f":
           preparedUniforms[uniformName] = {
             value: new THREE.Vector3().fromArray(uniform.value),
             type: "3f",
-          };
+          }
-          break;
+          break
         case "uniform1fv":
-          preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" }
-          break;
+          break
         case "uniform3fv":
           preparedUniforms[uniformName] = {
             value: uniform.value.map((v: number[]) =>
               new THREE.Vector3().fromArray(v)
             ),
             type: "3fv",
-          };
+          }
-          break;
+          break
         case "uniform2f":
           preparedUniforms[uniformName] = {
             value: new THREE.Vector2().fromArray(uniform.value),
             type: "2f",
-          };
+          }
-          break;
+          break
         default:
-          console.error(`Invalid uniform type for '${uniformName}'.`);
+          console.error(`Invalid uniform type for '${uniformName}'.`)
-          break;
+          break
       }
     }
 
-    preparedUniforms["u_time"] = { value: 0, type: "1f" };
+    preparedUniforms["u_time"] = { value: 0, type: "1f" }
     preparedUniforms["u_resolution"] = {
       value: new THREE.Vector2(size.width * 2, size.height * 2),
-    }; // Initialize u_resolution
+    } // Initialize u_resolution
-    return preparedUniforms;
+    return preparedUniforms
-  };
+  }
 
   // Shader material
   const material = useMemo(() => {
@@ -272,33 +272,33 @@ const ShaderMaterial = ({
       blending: THREE.CustomBlending,
       blendSrc: THREE.SrcAlphaFactor,
       blendDst: THREE.OneFactor,
-    });
+    })
 
-    return materialObject;
+    return materialObject
-  }, [size.width, size.height, source]);
+  }, [size.width, size.height, source])
 
   return (
     <mesh ref={ref as any}>
       <planeGeometry args={[2, 2]} />
       <primitive object={material} attach="material" />
     </mesh>
-  );
+  )
-};
+}
 
 const Shader: React.FC<ShaderProps> = ({ source, uniforms, maxFps = 60 }) => {
   return (
     <Canvas className="absolute inset-0  h-full w-full">
       <ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
     </Canvas>
-  );
+  )
-};
+}
 interface ShaderProps {
-  source: string;
+  source: string
   uniforms: {
     [key: string]: {
-      value: number[] | number[][] | number;
+      value: number[] | number[][] | number
-      type: string;
+      type: string
-    };
+    }
-  };
+  }
-  maxFps?: number;
+  maxFps?: number
 }

frontend/components/dashboard/projects.tsx

@@ -1,16 +1,12 @@
-"use client";
+"use client"
 
-import { Sandbox } from "@/lib/types";
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
-import ProjectCard from "./projectCard";
+import { Sandbox } from "@/lib/types"
-import Image from "next/image";
+import Link from "next/link"
-import ProjectCardDropdown from "./projectCard/dropdown";
+import { useEffect, useState } from "react"
-import { Clock, Globe, Lock } from "lucide-react";
+import { toast } from "sonner"
-import Link from "next/link";
+import ProjectCard from "./projectCard"
-import { Card } from "../ui/card";
+import { CanvasRevealEffect } from "./projectCard/revealEffect"
-import { deleteSandbox, updateSandbox } from "@/lib/actions";
-import { toast } from "sonner";
-import { useEffect, useState } from "react";
-import { CanvasRevealEffect } from "./projectCard/revealEffect";
 
 const colors: { [key: string]: number[][] } = {
   react: [
@@ -21,38 +17,37 @@ const colors: { [key: string]: number[][] } = {
     [86, 184, 72],
     [59, 112, 52],
   ],
-};
+}
 
 export default function DashboardProjects({
   sandboxes,
   q,
 }: {
-  sandboxes: Sandbox[];
+  sandboxes: Sandbox[]
-  q: string | null;
+  q: string | null
 }) {
-  const [deletingId, setDeletingId] = useState<string>("");
+  const [deletingId, setDeletingId] = useState<string>("")
 
   const onDelete = async (sandbox: Sandbox) => {
-    setDeletingId(sandbox.id);
+    setDeletingId(sandbox.id)
-    toast(`Project ${sandbox.name} deleted.`);
+    toast(`Project ${sandbox.name} deleted.`)
-    await deleteSandbox(sandbox.id);
+    await deleteSandbox(sandbox.id)
-  };
+  }
 
   useEffect(() => {
     if (deletingId) {
-      setDeletingId("");
+      setDeletingId("")
     }
-  }, [sandboxes]);
+  }, [sandboxes])
 
   const onVisibilityChange = async (sandbox: Sandbox) => {
-    const newVisibility =
+    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
-      sandbox.visibility === "public" ? "private" : "public";
+    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
-    toast(`Project ${sandbox.name} is now ${newVisibility}.`);
     await updateSandbox({
       id: sandbox.id,
       visibility: newVisibility,
-    });
+    })
-  };
+  }
 
   return (
     <div className="grow p-4 flex flex-col">
@@ -65,7 +60,7 @@ export default function DashboardProjects({
             {sandboxes.map((sandbox) => {
               if (q && q.length > 0) {
                 if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
-                  return null;
+                  return null
                 }
               }
               return (
@@ -93,7 +88,7 @@ export default function DashboardProjects({
                     <div className="absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-background/75" />
                   </ProjectCard>
                 </Link>
-              );
+              )
             })}
           </div>
         ) : (
@@ -103,5 +98,5 @@ export default function DashboardProjects({
         )}
       </div>
     </div>
-  );
+  )
 }

frontend/components/dashboard/shared.tsx

@@ -1,29 +1,27 @@
-import { Sandbox } from "@/lib/types";
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@/components/ui/table"
-import Image from "next/image";
+import { ChevronRight } from "lucide-react"
-import Button from "../ui/customButton";
+import Image from "next/image"
-import { ChevronRight } from "lucide-react";
+import Link from "next/link"
-import Avatar from "../ui/avatar";
+import Avatar from "../ui/avatar"
-import Link from "next/link";
+import Button from "../ui/customButton"
 
 export default function DashboardSharedWithMe({
   shared,
 }: {
   shared: {
-    id: string;
+    id: string
-    name: string;
+    name: string
-    type: "react" | "node";
+    type: "react" | "node"
-    author: string;
+    author: string
-    sharedOn: Date;
+    sharedOn: Date
-  }[];
+  }[]
 }) {
   return (
     <div className="grow p-4 flex flex-col">
@@ -86,5 +84,5 @@ export default function DashboardSharedWithMe({
         </div>
       )}
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/ChatInput.tsx

@@ -1,36 +1,51 @@
-import React from 'react';
+import { Send, StopCircle } from "lucide-react"
-import { Button } from '../../ui/button';
+import { Button } from "../../ui/button"
-import { Send, StopCircle } from 'lucide-react';
 
 interface ChatInputProps {
-  input: string;
+  input: string
-  setInput: (input: string) => void;
+  setInput: (input: string) => void
-  isGenerating: boolean;
+  isGenerating: boolean
-  handleSend: () => void;
+  handleSend: () => void
-  handleStopGeneration: () => void;
+  handleStopGeneration: () => void
 }
 
-export default function ChatInput({ input, setInput, isGenerating, handleSend, handleStopGeneration }: ChatInputProps) {
+export default function ChatInput({
+  input,
+  setInput,
+  isGenerating,
+  handleSend,
+  handleStopGeneration,
+}: ChatInputProps) {
   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()}
+        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">
+        <Button
+          onClick={handleStopGeneration}
+          variant="destructive"
+          size="icon"
+          className="h-10 w-10"
+        >
           <StopCircle className="w-4 h-4" />
         </Button>
       ) : (
-        <Button onClick={handleSend} disabled={isGenerating} size="icon" className="h-10 w-10">
+        <Button
+          onClick={handleSend}
+          disabled={isGenerating}
+          size="icon"
+          className="h-10 w-10"
+        >
           <Send className="w-4 h-4" />
         </Button>
       )}
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/ChatMessage.tsx

@@ -1,25 +1,31 @@
-import React, { useState } from 'react';
+import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from "lucide-react"
-import { Button } from '../../ui/button';
+import React, { useState } from "react"
-import { ChevronUp, ChevronDown, Copy, Check, CornerUpLeft } from 'lucide-react';
+import ReactMarkdown from "react-markdown"
-import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from "remark-gfm"
-import remarkGfm from 'remark-gfm';
+import { Button } from "../../ui/button"
-import { copyToClipboard, stringifyContent } from './lib/chatUtils';
+import { copyToClipboard, stringifyContent } from "./lib/chatUtils"
 
 interface MessageProps {
   message: {
-    role: 'user' | 'assistant';
+    role: "user" | "assistant"
-    content: string;
+    content: string
-    context?: string;
+    context?: string
-  };
+  }
-  setContext: (context: string | null) => void;
+  setContext: (context: string | null) => void
-  setIsContextExpanded: (isExpanded: boolean) => void;
+  setIsContextExpanded: (isExpanded: boolean) => void
 }
 
-export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
+export default function ChatMessage({
-  const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
+  message,
-  const [copiedText, setCopiedText] = useState<string | null>(null);
+  setContext,
+  setIsContextExpanded,
+}: MessageProps) {
+  const [expandedMessageIndex, setExpandedMessageIndex] = useState<
+    number | null
+  >(null)
+  const [copiedText, setCopiedText] = useState<string | null>(null)
 
   const renderCopyButton = (text: any) => (
     <Button
@@ -34,17 +40,17 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
         <Copy className="w-4 h-4" />
       )}
     </Button>
-  );
+  )
 
   const askAboutCode = (code: any) => {
-    const contextString = stringifyContent(code);
+    const contextString = stringifyContent(code)
-    setContext(`Regarding this code:\n${contextString}`);
+    setContext(`Regarding this code:\n${contextString}`)
-    setIsContextExpanded(false);
+    setIsContextExpanded(false)
-  };
+  }
 
   const renderMarkdownElement = (props: any) => {
-    const { node, children } = props;
+    const { node, children } = props
-    const content = stringifyContent(children);
+    const content = stringifyContent(children)
 
     return (
       <div className="relative group">
@@ -59,22 +65,30 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
             <CornerUpLeft className="w-4 h-4" />
           </Button>
         </div>
-        {React.createElement(node.tagName, {
+        {React.createElement(
+          node.tagName,
+          {
             ...props,
-          className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
+            className: `${
-        }, children)}
+              props.className || ""
+            } hover:bg-transparent rounded p-1 transition-colors`,
+          },
+          children
+        )}
       </div>
-    );
+    )
-  };
+  }
 
   return (
     <div className="text-left relative">
-      <div className={`relative p-2 rounded-lg ${
+      <div
-        message.role === 'user' 
+        className={`relative p-2 rounded-lg ${
-          ? 'bg-[#262626] text-white' 
+          message.role === "user"
-          : 'bg-transparent text-white'
+            ? "bg-[#262626] text-white"
-        } max-w-full`}>
+            : "bg-transparent text-white"
-        {message.role === 'user' && (
+        } 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
@@ -91,11 +105,11 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
           <div className="mb-2 bg-input rounded-lg">
             <div
               className="flex justify-between items-center cursor-pointer"
-              onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
+              onClick={() =>
+                setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)
+              }
             >
-              <span className="text-sm text-gray-300">
+              <span className="text-sm text-gray-300">Context</span>
-                Context 
-              </span>
               {expandedMessageIndex === 0 ? (
                 <ChevronUp size={16} />
               ) : (
@@ -105,41 +119,46 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
             {expandedMessageIndex === 0 && (
               <div className="relative">
                 <div className="absolute top-0 right-0 flex p-1">
-                  {renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
+                  {renderCopyButton(
+                    message.context.replace(/^Regarding this code:\n/, "")
+                  )}
                 </div>
                 {(() => {
-                  const code = message.context.replace(/^Regarding this code:\n/, '');
+                  const code = message.context.replace(
-                  const match = /language-(\w+)/.exec(code);
+                    /^Regarding this code:\n/,
-                  const language = match ? match[1] : 'typescript';
+                    ""
+                  )
+                  const match = /language-(\w+)/.exec(code)
+                  const language = match ? match[1] : "typescript"
                   return (
                     <div className="pt-6">
                       <textarea
                         value={code}
                         onChange={(e) => {
-                          const updatedContext = `Regarding this code:\n${e.target.value}`;
+                          const updatedContext = `Regarding this code:\n${e.target.value}`
-                          setContext(updatedContext);
+                          setContext(updatedContext)
                         }}
                         className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
-                        rows={code.split('\n').length}
+                        rows={code.split("\n").length}
                         style={{
-                          resize: 'vertical',
+                          resize: "vertical",
-                          minHeight: '100px',
+                          minHeight: "100px",
-                          maxHeight: '400px',
+                          maxHeight: "400px",
                         }}
                       />
                     </div>
-                  );
+                  )
                 })()}
               </div>
             )}
           </div>
         )}
-        {message.role === 'assistant' ? (
+        {message.role === "assistant" ? (
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
               code({ node, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || '');
+                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">
@@ -163,8 +182,8 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
                         PreTag="div"
                         customStyle={{
                           margin: 0,
-                          padding: '0.5rem',
+                          padding: "0.5rem",
-                          fontSize: '0.875rem',
+                          fontSize: "0.875rem",
                         }}
                       >
                         {stringifyContent(children)}
@@ -175,7 +194,7 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
                   <code className={className} {...props}>
                     {children}
                   </code>
-                );
+                )
               },
               p: renderMarkdownElement,
               h1: renderMarkdownElement,
@@ -184,18 +203,24 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
               h4: renderMarkdownElement,
               h5: renderMarkdownElement,
               h6: renderMarkdownElement,
-              ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
+              ul: (props) => (
-              ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
+                <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>
+              ),
             }}
           >
             {message.content}
           </ReactMarkdown>
         ) : (
-          <div className="whitespace-pre-wrap group">
+          <div className="whitespace-pre-wrap group">{message.content}</div>
-            {message.content}
-          </div>
         )}
       </div>
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/ContextDisplay.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import { ChevronDown, ChevronUp, X } from "lucide-react"
-import { ChevronUp, ChevronDown, X } from 'lucide-react';
 
 interface ContextDisplayProps {
-  context: string | null;
+  context: string | null
-  isContextExpanded: boolean;
+  isContextExpanded: boolean
-  setIsContextExpanded: (isExpanded: boolean) => void;
+  setIsContextExpanded: (isExpanded: boolean) => void
-  setContext: (context: string | null) => void;
+  setContext: (context: string | null) => void
 }
 
-export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
+export default function ContextDisplay({
-  if (!context) return null;
+  context,
+  isContextExpanded,
+  setIsContextExpanded,
+  setContext,
+}: ContextDisplayProps) {
+  if (!context) return null
 
   return (
     <div className="mb-2 bg-input p-2 rounded-lg">
@@ -18,15 +22,21 @@ export default function ContextDisplay({ context, isContextExpanded, setIsContex
           className="flex-grow cursor-pointer"
           onClick={() => setIsContextExpanded(!isContextExpanded)}
         >
-          <span className="text-sm text-gray-300">
+          <span className="text-sm text-gray-300">Context</span>
-            Context
-          </span>
         </div>
         <div className="flex items-center">
           {isContextExpanded ? (
-            <ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
+            <ChevronUp
+              size={16}
+              className="cursor-pointer"
+              onClick={() => setIsContextExpanded(false)}
+            />
           ) : (
-            <ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
+            <ChevronDown
+              size={16}
+              className="cursor-pointer"
+              onClick={() => setIsContextExpanded(true)}
+            />
           )}
           <X
             size={16}
@@ -37,12 +47,14 @@ export default function ContextDisplay({ context, isContextExpanded, setIsContex
       </div>
       {isContextExpanded && (
         <textarea
-          value={context.replace(/^Regarding this code:\n/, '')}
+          value={context.replace(/^Regarding this code:\n/, "")}
-          onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
+          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>
-  );
+  )
 }

frontend/components/editor/AIChat/index.tsx

@@ -1,48 +1,72 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { X } from "lucide-react"
-import LoadingDots from '../../ui/LoadingDots';
+import { useEffect, useRef, useState } from "react"
-import ChatMessage from './ChatMessage';
+import LoadingDots from "../../ui/LoadingDots"
-import ChatInput from './ChatInput';
+import ChatInput from "./ChatInput"
-import ContextDisplay from './ContextDisplay';
+import ChatMessage from "./ChatMessage"
-import { handleSend, handleStopGeneration } from './lib/chatUtils';
+import ContextDisplay from "./ContextDisplay"
+import { handleSend, handleStopGeneration } from "./lib/chatUtils"
 
 interface Message {
-  role: 'user' | 'assistant';
+  role: "user" | "assistant"
-  content: string;
+  content: string
-  context?: string;
+  context?: string
 }
 
-export default function AIChat({ activeFileContent, activeFileName }: { activeFileContent: string, activeFileName: string }) {
+export default function AIChat({
-  const [messages, setMessages] = useState<Message[]>([]);
+  activeFileContent,
-  const [input, setInput] = useState('');
+  activeFileName,
-  const [isGenerating, setIsGenerating] = useState(false);
+  onClose,
-  const chatContainerRef = useRef<HTMLDivElement>(null);
+}: {
-  const abortControllerRef = useRef<AbortController | null>(null);
+  activeFileContent: string
-  const [context, setContext] = useState<string | null>(null);
+  activeFileName: string
-  const [isContextExpanded, setIsContextExpanded] = useState(false);
+  onClose: () => void
-  const [isLoading, setIsLoading] = useState(false);
+}) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState("")
+  const [isGenerating, setIsGenerating] = useState(false)
+  const chatContainerRef = useRef<HTMLDivElement>(null)
+  const abortControllerRef = useRef<AbortController | null>(null)
+  const [context, setContext] = useState<string | null>(null)
+  const [isContextExpanded, setIsContextExpanded] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
-    scrollToBottom();
+    scrollToBottom()
-  }, [messages]);
+  }, [messages])
 
   const scrollToBottom = () => {
     if (chatContainerRef.current) {
       setTimeout(() => {
         chatContainerRef.current?.scrollTo({
           top: chatContainerRef.current.scrollHeight,
-          behavior: 'smooth'
+          behavior: "smooth",
-        });
+        })
-      }, 100);
+      }, 100)
+    }
   }
-  };
 
   return (
     <div className="flex flex-col h-screen w-full">
       <div className="flex justify-between items-center p-2 border-b">
         <span className="text-muted-foreground/50 font-medium">CHAT</span>
-        <span className="text-muted-foreground/50 font-medium truncate max-w-[50%]" title={activeFileName}>{activeFileName}</span>
+        <div className="flex items-center h-full">
+          <span className="text-muted-foreground/50 font-medium">
+            {activeFileName}
+          </span>
+          <div className="mx-2 h-full w-px bg-muted-foreground/20"></div>
+          <button
+            onClick={onClose}
+            className="text-muted-foreground/50 hover:text-muted-foreground focus:outline-none"
+            aria-label="Close AI Chat"
+          >
+            <X size={18} />
+          </button>
         </div>
-      <div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
+      </div>
+      <div
+        ref={chatContainerRef}
+        className="flex-grow overflow-y-auto p-4 space-y-4"
+      >
         {messages.map((message, messageIndex) => (
           <ChatMessage
             key={messageIndex}
@@ -64,10 +88,23 @@ export default function AIChat({ activeFileContent, activeFileName }: { activeFi
           input={input}
           setInput={setInput}
           isGenerating={isGenerating}
-          handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef, activeFileContent)}
+          handleSend={() =>
+            handleSend(
+              input,
+              context,
+              messages,
+              setMessages,
+              setInput,
+              setIsContextExpanded,
+              setIsGenerating,
+              setIsLoading,
+              abortControllerRef,
+              activeFileContent
+            )
+          }
           handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
         />
       </div>
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -1,58 +1,68 @@
-import React from 'react';
+import React from "react"
 
-export const stringifyContent = (content: any, seen = new WeakSet()): string => {
+export const stringifyContent = (
-  if (typeof content === 'string') {
+  content: any,
-    return content;
+  seen = new WeakSet()
+): string => {
+  if (typeof content === "string") {
+    return content
   }
   if (content === null) {
-    return 'null';
+    return "null"
   }
   if (content === undefined) {
-    return 'undefined';
+    return "undefined"
   }
-  if (typeof content === 'number' || typeof content === 'boolean') {
+  if (typeof content === "number" || typeof content === "boolean") {
-    return content.toString();
+    return content.toString()
   }
-  if (typeof content === 'function') {
+  if (typeof content === "function") {
-    return content.toString();
+    return content.toString()
   }
-  if (typeof content === 'symbol') {
+  if (typeof content === "symbol") {
-    return content.toString();
+    return content.toString()
   }
-  if (typeof content === 'bigint') {
+  if (typeof content === "bigint") {
-    return content.toString() + 'n';
+    return content.toString() + "n"
   }
   if (React.isValidElement(content)) {
-    return React.Children.toArray((content as React.ReactElement).props.children)
+    return React.Children.toArray(
-      .map(child => stringifyContent(child, seen))
+      (content as React.ReactElement).props.children
-      .join('');
+    )
+      .map((child) => stringifyContent(child, seen))
+      .join("")
   }
   if (Array.isArray(content)) {
-    return '[' + content.map(item => stringifyContent(item, seen)).join(', ') + ']';
+    return (
+      "[" + content.map((item) => stringifyContent(item, seen)).join(", ") + "]"
+    )
   }
-  if (typeof content === 'object') {
+  if (typeof content === "object") {
     if (seen.has(content)) {
-      return '[Circular]';
+      return "[Circular]"
     }
-    seen.add(content);
+    seen.add(content)
     try {
       const pairs = Object.entries(content).map(
         ([key, value]) => `${key}: ${stringifyContent(value, seen)}`
-      );
+      )
-      return '{' + pairs.join(', ') + '}';
+      return "{" + pairs.join(", ") + "}"
     } catch (error) {
-      return Object.prototype.toString.call(content);
+      return Object.prototype.toString.call(content)
     }
   }
-  return String(content);
+  return String(content)
-};
+}
 
-export const copyToClipboard = (text: string, setCopiedText: (text: string | null) => void) => {
+export const copyToClipboard = (
+  text: string,
+  setCopiedText: (text: string | null) => void
+) => {
   navigator.clipboard.writeText(text).then(() => {
-    setCopiedText(text);
+    setCopiedText(text)
-    setTimeout(() => setCopiedText(null), 2000);
+    setTimeout(() => setCopiedText(null), 2000)
-  });
+  })
-};
+}
 
 export const handleSend = async (
   input: string,
@@ -66,32 +76,34 @@ export const handleSend = async (
   abortControllerRef: React.MutableRefObject<AbortController | null>,
   activeFileContent: string
 ) => {
-  if (input.trim() === '' && !context) return;
+  if (input.trim() === "" && !context) return
 
   const newMessage = {
-    role: 'user' as const, 
+    role: "user" as const,
     content: input,
-    context: context || undefined
+    context: context || undefined,
-  };
+  }
-  const updatedMessages = [...messages, newMessage];
+  const updatedMessages = [...messages, newMessage]
-  setMessages(updatedMessages);
+  setMessages(updatedMessages)
-  setInput('');
+  setInput("")
-  setIsContextExpanded(false);
+  setIsContextExpanded(false)
-  setIsGenerating(true);
+  setIsGenerating(true)
-  setIsLoading(true);
+  setIsLoading(true)
 
-  abortControllerRef.current = new AbortController();
+  abortControllerRef.current = new AbortController()
 
   try {
-    const anthropicMessages = updatedMessages.map(msg => ({
+    const anthropicMessages = updatedMessages.map((msg) => ({
-      role: msg.role === 'user' ? 'human' : 'assistant',
+      role: msg.role === "user" ? "human" : "assistant",
-      content: msg.content
+      content: msg.content,
-    }));
+    }))
 
-    const response = await fetch(`${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`, {
+    const response = await fetch(
-      method: 'POST',
+      `${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`,
+      {
+        method: "POST",
         headers: {
-        'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           messages: anthropicMessages,
@@ -99,64 +111,70 @@ export const handleSend = async (
           activeFileContent: activeFileContent,
         }),
         signal: abortControllerRef.current.signal,
-    });
+      }
+    )
 
     if (!response.ok) {
-      throw new Error('Failed to get AI response');
+      throw new Error("Failed to get AI response")
     }
 
-    const reader = response.body?.getReader();
+    const reader = response.body?.getReader()
-    const decoder = new TextDecoder();
+    const decoder = new TextDecoder()
-    const assistantMessage = { role: 'assistant' as const, content: '' };
+    const assistantMessage = { role: "assistant" as const, content: "" }
-    setMessages([...updatedMessages, assistantMessage]);
+    setMessages([...updatedMessages, assistantMessage])
-    setIsLoading(false);
+    setIsLoading(false)
 
-    let buffer = '';
+    let buffer = ""
-    const updateInterval = 100;
+    const updateInterval = 100
-    let lastUpdateTime = Date.now();
+    let lastUpdateTime = Date.now()
 
     if (reader) {
       while (true) {
-        const { done, value } = await reader.read();
+        const { done, value } = await reader.read()
-        if (done) break;
+        if (done) break
-        buffer += decoder.decode(value, { stream: true });
+        buffer += decoder.decode(value, { stream: true })
 
-        const currentTime = Date.now();
+        const currentTime = Date.now()
         if (currentTime - lastUpdateTime > updateInterval) {
-          setMessages(prev => {
+          setMessages((prev) => {
-            const updatedMessages = [...prev];
+            const updatedMessages = [...prev]
-            const lastMessage = updatedMessages[updatedMessages.length - 1];
+            const lastMessage = updatedMessages[updatedMessages.length - 1]
-            lastMessage.content = buffer;
+            lastMessage.content = buffer
-            return updatedMessages;
+            return updatedMessages
-          });
+          })
-          lastUpdateTime = currentTime;
+          lastUpdateTime = currentTime
         }
       }
 
-      setMessages(prev => {
+      setMessages((prev) => {
-        const updatedMessages = [...prev];
+        const updatedMessages = [...prev]
-        const lastMessage = updatedMessages[updatedMessages.length - 1];
+        const lastMessage = updatedMessages[updatedMessages.length - 1]
-        lastMessage.content = buffer;
+        lastMessage.content = buffer
-        return updatedMessages;
+        return updatedMessages
-      });
+      })
     }
   } catch (error: any) {
-    if (error.name === 'AbortError') {
+    if (error.name === "AbortError") {
-      console.log('Generation aborted');
+      console.log("Generation aborted")
     } else {
-      console.error('Error fetching AI response:', error);
+      console.error("Error fetching AI response:", error)
-      const errorMessage = { role: 'assistant' as const, content: 'Sorry, I encountered an error. Please try again.' };
+      const errorMessage = {
-      setMessages(prev => [...prev, errorMessage]);
+        role: "assistant" as const,
+        content: "Sorry, I encountered an error. Please try again.",
+      }
+      setMessages((prev) => [...prev, errorMessage])
     }
   } finally {
-    setIsGenerating(false);
+    setIsGenerating(false)
-    setIsLoading(false);
+    setIsLoading(false)
-    abortControllerRef.current = null;
+    abortControllerRef.current = null
+  }
 }
-};
 
-export const handleStopGeneration = (abortControllerRef: React.MutableRefObject<AbortController | null>) => {
+export const handleStopGeneration = (
+  abortControllerRef: React.MutableRefObject<AbortController | null>
+) => {
   if (abortControllerRef.current) {
-    abortControllerRef.current.abort();
+    abortControllerRef.current.abort()
+  }
 }
-};

frontend/components/editor/generate.tsx

@@ -1,13 +1,13 @@
 "use client"
 
-import { useCallback, useEffect, useRef, useState } from "react"
-import { Button } from "../ui/button"
-import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
-import { Socket } from "socket.io-client"
-import { Editor } from "@monaco-editor/react"
 import { User } from "@/lib/types"
-import { toast } from "sonner"
+import { Editor } from "@monaco-editor/react"
+import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
 import { usePathname, useRouter } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Socket } from "socket.io-client"
+import { toast } from "sonner"
+import { Button } from "../ui/button"
 // import monaco from "monaco-editor"
 
 export default function GenerateInput({
@@ -68,10 +68,12 @@ export default function GenerateInput({
     setCurrentPrompt(input)
     socket.emit(
       "generateCode",
-      data.fileName,
+      {
-      data.code,
+        fileName: data.fileName,
-      data.line,
+        code: data.code,
-      regenerate ? currentPrompt : input,
+        line: data.line,
+        instructions: regenerate ? currentPrompt : input
+      },
       (res: { response: string; success: boolean }) => {
         console.log("Generated code", res.response, res.success)
         // if (!res.success) {

frontend/components/editor/index.tsx

@@ -91,6 +91,7 @@ export default function CodeEditor({
 
   // Layout state
   const [isHorizontalLayout, setIsHorizontalLayout] = useState(false)
+  const [previousLayout, setPreviousLayout] = useState(false)
 
   // AI Chat state
   const [isAIChatOpen, setIsAIChatOpen] = useState(false)
@@ -106,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>()
@@ -206,7 +206,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)
         })
       })
@@ -531,7 +531,7 @@ export default function CodeEditor({
         )
         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]
@@ -548,12 +548,18 @@ export default function CodeEditor({
         setIsAIChatOpen((prev) => !prev)
       }
     }
+
     document.addEventListener("keydown", down)
 
+    // Added this line to prevent Monaco editor from handling Cmd/Ctrl+L
+    editorRef?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL, () => {
+      setIsAIChatOpen((prev) => !prev)
+    })
+
     return () => {
       document.removeEventListener("keydown", down)
     }
-  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen])
+  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef])
 
   // Liveblocks live collaboration setup effect
   useEffect(() => {
@@ -708,7 +714,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) => {
@@ -828,7 +834,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))
     )
@@ -837,7 +843,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)
@@ -847,11 +853,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("")
     })
@@ -868,8 +874,25 @@ export default function CodeEditor({
   }
 
   const toggleLayout = () => {
+    if (!isAIChatOpen) {
       setIsHorizontalLayout((prev) => !prev)
     }
+  }
+
+  // Add an effect to handle layout changes when AI chat is opened/closed
+  useEffect(() => {
+    if (isAIChatOpen) {
+      setPreviousLayout(isHorizontalLayout)
+      setIsHorizontalLayout(true)
+    } else {
+      setIsHorizontalLayout(previousLayout)
+    }
+  }, [isAIChatOpen])
+
+  // Modify the toggleAIChat function
+  const toggleAIChat = () => {
+    setIsAIChatOpen((prev) => !prev)
+  }
 
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
@@ -1005,9 +1028,13 @@ 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 direction="horizontal">
+        <ResizablePanelGroup
+          direction={isHorizontalLayout ? "horizontal" : "vertical"}
+        >
           {/* Left side: Editor and Preview/Terminal */}
           <ResizablePanel defaultSize={isAIChatOpen ? 80 : 100} minSize={50}>
             <ResizablePanelGroup
@@ -1136,6 +1163,7 @@ export default function CodeEditor({
                         size="sm"
                         variant="ghost"
                         className="mr-2 border"
+                        disabled={isAIChatOpen}
                       >
                         {isHorizontalLayout ? (
                           <ArrowRightToLine className="w-4 h-4" />
@@ -1190,6 +1218,7 @@ export default function CodeEditor({
                     tabs.find((tab) => tab.id === activeFileId)?.name ||
                     "No file selected"
                   }
+                  onClose={toggleAIChat}
                 />
               </ResizablePanel>
             </>

frontend/components/editor/live/avatars.tsx

@@ -1,6 +1,6 @@
-"use client";
+"use client"
 
-import { useOthers } from "@/liveblocks.config";
+import { useOthers } from "@/liveblocks.config"
 
 const classNames = {
   red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
@@ -14,10 +14,10 @@ const classNames = {
   purple:
     "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
   pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
-};
+}
 
 export function Avatars() {
-  const users = useOthers();
+  const users = useOthers()
 
   return (
     <>
@@ -30,12 +30,12 @@ export function Avatars() {
                 .slice(0, 2)
                 .map((letter) => letter[0].toUpperCase())}
             </div>
-          );
+          )
         })}
       </div>
       {users.length > 0 ? (
         <div className="h-full w-[1px] bg-border mx-2" />
       ) : null}
     </>
-  );
+  )
 }

frontend/components/editor/live/cursors.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useMemo, useState } from "react"
+import { colors } from "@/lib/colors"
 import {
   AwarenessList,
   TypedLiveblocksProvider,
   UserAwareness,
-  useSelf,
 } from "@/liveblocks.config"
-import { colors } from "@/lib/colors"
+import { useEffect, useMemo, useState } from "react"
 
 export function Cursors({
   yProvider,

frontend/components/editor/live/disableModal.tsx

@@ -1,43 +1,35 @@
-"use client";
+"use client"
 
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
+} from "@/components/ui/dialog"
-} from "@/components/ui/dialog";
 
-import {
+import { Loader2 } from "lucide-react"
-  ChevronRight,
+import { useRouter } from "next/navigation"
-  FileStack,
+import { useEffect } from "react"
-  Globe,
-  Loader2,
-  TextCursor,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 
 export default function DisableAccessModal({
   open,
   setOpen,
   message,
 }: {
-  open: boolean;
+  open: boolean
-  setOpen: (open: boolean) => void;
+  setOpen: (open: boolean) => void
-  message: string;
+  message: string
 }) {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
     if (open) {
       const timeout = setTimeout(() => {
-        router.push("/dashboard");
+        router.push("/dashboard")
-      }, 5000);
+      }, 5000)
-      return () => clearTimeout(timeout);
+      return () => clearTimeout(timeout)
     }
-  }, []);
+  }, [])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -54,5 +46,5 @@ export default function DisableAccessModal({
         </div>
       </DialogContent>
     </Dialog>
-  );
+  )
 }

frontend/components/editor/live/room.tsx

@@ -1,14 +1,13 @@
-"use client";
+"use client"
 
-import { RoomProvider } from "@/liveblocks.config";
+import { RoomProvider } from "@/liveblocks.config"
-import { ClientSideSuspense } from "@liveblocks/react";
 
 export function Room({
   id,
   children,
 }: {
-  id: string;
+  id: string
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
     <RoomProvider
@@ -21,5 +20,5 @@ export function Room({
       {children}
       {/* </ClientSideSuspense> */}
     </RoomProvider>
-  );
+  )
 }

frontend/components/editor/loading/index.tsx

@@ -1,9 +1,6 @@
 "use client"
 
-import Image from "next/image"
 import Logo from "@/assets/logo.svg"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Loader2, X } from "lucide-react"
 import {
   Dialog,
   DialogContent,
@@ -11,6 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Loader2, X } from "lucide-react"
+import Image from "next/image"
 import { useEffect, useState } from "react"
 
 export default function Loading({

frontend/components/editor/navbar/deploy.tsx

@@ -1,34 +1,38 @@
-"use client";
+"use client"
 
-import { useState } from "react";
+import { Button } from "@/components/ui/button"
-import { Button } from "@/components/ui/button";
+import {
-import { useTerminal } from "@/context/TerminalContext";
+  Popover,
-import { Play, Pause, Globe, Globe2 } from "lucide-react";
+  PopoverContent,
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+  PopoverTrigger,
-import { Sandbox, User } from "@/lib/types";
+} from "@/components/ui/popover"
+import { useTerminal } from "@/context/TerminalContext"
+import { Sandbox, User } from "@/lib/types"
+import { Globe } from "lucide-react"
+import { useState } from "react"
 
 export default function DeployButtonModal({
   userData,
   data,
 }: {
-  userData: User;
+  userData: User
-  data: Sandbox;
+  data: Sandbox
 }) {
-  const { deploy } = useTerminal();
+  const { deploy } = useTerminal()
-  const [isDeploying, setIsDeploying] = useState(false);
+  const [isDeploying, setIsDeploying] = useState(false)
 
   const handleDeploy = () => {
     if (isDeploying) {
-      console.log("Stopping deployment...");
+      console.log("Stopping deployment...")
-      setIsDeploying(false);
+      setIsDeploying(false)
     } else {
-      console.log("Starting deployment...");
+      console.log("Starting deployment...")
-      setIsDeploying(true);
+      setIsDeploying(true)
       deploy(() => {
-        setIsDeploying(false);
+        setIsDeploying(false)
-      });
+      })
+    }
   }
-  };
 
   return (
     <>
@@ -39,7 +43,10 @@ export default function DeployButtonModal({
             Deploy
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg" style={{ backgroundColor: 'rgb(10,10,10)', color: 'white' }}>
+        <PopoverContent
+          className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg"
+          style={{ backgroundColor: "rgb(10,10,10)", color: "white" }}
+        >
           <h3 className="font-semibold text-gray-300 mb-2">Domains</h3>
           <div className="flex flex-col gap-4">
             <DeploymentOption
@@ -49,16 +56,30 @@ export default function DeployButtonModal({
               user={userData.name}
             />
           </div>
-          <Button variant="outline" className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]" onClick={handleDeploy}>
+          <Button
+            variant="outline"
+            className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]"
+            onClick={handleDeploy}
+          >
             {isDeploying ? "Deploying..." : "Update"}
           </Button>
         </PopoverContent>
       </Popover>
     </>
-  );
+  )
 }
 
-function DeploymentOption({ icon, domain, timestamp, user }: { icon: React.ReactNode; domain: string; timestamp: string; user: string }) {
+function DeploymentOption({
+  icon,
+  domain,
+  timestamp,
+  user,
+}: {
+  icon: React.ReactNode
+  domain: string
+  timestamp: string
+  user: string
+}) {
   return (
     <div className="flex flex-col gap-2 w-full text-left p-2 rounded-md border border-gray-700 bg-gray-900">
       <div className="flex items-start gap-2 relative">
@@ -72,7 +93,9 @@ function DeploymentOption({ icon, domain, timestamp, user }: { icon: React.React
           {domain}
         </a>
       </div>
-      <p className="text-sm text-gray-400 mt-0 ml-7">{timestamp} • {user}</p>
+      <p className="text-sm text-gray-400 mt-0 ml-7">
+        {timestamp} • {user}
+      </p>
     </div>
-  );
+  )
 }

frontend/components/editor/navbar/edit.tsx

@@ -1,60 +1,57 @@
-"use client";
+"use client"
 
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
+} from "@/components/ui/dialog"
-} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod";
+import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod"
-import { useForm } from "react-hook-form";
 
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
+} from "@/components/ui/form"
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@/components/ui/select"
-import { Loader2 } from "lucide-react";
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
-import { useState } from "react";
+import { Sandbox } from "@/lib/types"
-import { Sandbox } from "@/lib/types";
+import { Loader2 } from "lucide-react"
-import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation"
-import { deleteSandbox, updateSandbox } from "@/lib/actions";
+import { useState } from "react"
-import { useRouter } from "next/navigation";
+import { toast } from "sonner"
-import { toast } from "sonner";
 
 const formSchema = z.object({
   name: z.string().min(1).max(16),
   visibility: z.enum(["public", "private"]),
-});
+})
 
 export default function EditSandboxModal({
   open,
   setOpen,
   data,
 }: {
-  open: boolean;
+  open: boolean
-  setOpen: (open: boolean) => void;
+  setOpen: (open: boolean) => void
-  data: Sandbox;
+  data: Sandbox
 }) {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
-  const [loadingDelete, setLoadingDelete] = useState(false);
+  const [loadingDelete, setLoadingDelete] = useState(false)
 
-  const router = useRouter();
+  const router = useRouter()
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -62,22 +59,22 @@ export default function EditSandboxModal({
       name: data.name,
       visibility: data.visibility,
     },
-  });
+  })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    setLoading(true);
+    setLoading(true)
-    await updateSandbox({ id: data.id, ...values });
+    await updateSandbox({ id: data.id, ...values })
 
-    toast.success("Sandbox updated successfully");
+    toast.success("Sandbox updated successfully")
 
-    setLoading(false);
+    setLoading(false)
   }
 
   async function onDelete() {
-    setLoadingDelete(true);
+    setLoadingDelete(true)
-    await deleteSandbox(data.id);
+    await deleteSandbox(data.id)
 
-    router.push("/dashboard");
+    router.push("/dashboard")
   }
 
   return (
@@ -153,5 +150,5 @@ export default function EditSandboxModal({
         </Button>
       </DialogContent>
     </Dialog>
-  );
+  )
 }

frontend/components/editor/navbar/run.tsx

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

frontend/components/editor/navbar/share.tsx

@@ -6,10 +6,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
-import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
+import { z } from "zod"
 
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
@@ -18,14 +19,13 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { Link, Loader2, UserPlus, X } from "lucide-react"
-import { useState } from "react"
-import { Sandbox } from "@/lib/types"
-import { Button } from "@/components/ui/button"
 import { shareSandbox } from "@/lib/actions"
+import { Sandbox } from "@/lib/types"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { Link, Loader2, UserPlus } from "lucide-react"
+import { useState } from "react"
 import { toast } from "sonner"
 import SharedUser from "./sharedUser"
-import { DialogDescription } from "@radix-ui/react-dialog"
 
 const formSchema = z.object({
   email: z.string().email(),

frontend/components/editor/preview/index.tsx

@@ -1,18 +1,20 @@
 "use client"
 
+import { Link, RotateCw, UnfoldVertical } from "lucide-react"
 import {
-  Link,
+  forwardRef,
-  RotateCw,
+  useEffect,
-  TerminalSquare,
+  useImperativeHandle,
-  UnfoldVertical,
+  useRef,
-} from "lucide-react"
+  useState,
-import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
+} from "react"
 import { toast } from "sonner"
 
-export default forwardRef(function PreviewWindow({
+export default forwardRef(function PreviewWindow(
+  {
     collapsed,
     open,
-  src
+    src,
   }: {
     collapsed: boolean
     open: () => void
@@ -20,11 +22,12 @@ export default forwardRef(function PreviewWindow({
   },
   ref: React.Ref<{
     refreshIframe: () => void
-}>) {
+  }>
+) {
   const frameRef = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
   const refreshIframe = () => {
-    setIframeKey(prev => prev + 1)
+    setIframeKey((prev) => prev + 1)
   }
   // Refresh the preview when the URL changes.
   useEffect(refreshIframe, [src])
@@ -76,7 +79,8 @@ function PreviewButton({
 }) {
   return (
     <div
-      className={`${disabled ? "pointer-events-none opacity-50" : ""
+      className={`${
+        disabled ? "pointer-events-none opacity-50" : ""
       } p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
       onClick={onClick}
     >

frontend/components/editor/sidebar/file.tsx

@@ -1,18 +1,18 @@
-"use client";
+"use client"
 
-import Image from "next/image";
-import { getIconForFile } from "vscode-icons-js";
-import { TFile, TTab } from "@/lib/types";
-import { useEffect, useRef, useState } from "react";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@/components/ui/context-menu"
-import { Loader2, Pencil, Trash2 } from "lucide-react";
+import { TFile, TTab } from "@/lib/types"
+import { Loader2, Pencil, Trash2 } from "lucide-react"
+import Image from "next/image"
+import { useEffect, useRef, useState } from "react"
+import { getIconForFile } from "vscode-icons-js"
 
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
 
 export default function SidebarFile({
   data,
@@ -22,36 +22,36 @@ export default function SidebarFile({
   movingId,
   deletingFolderId,
 }: {
-  data: TFile;
+  data: TFile
-  selectFile: (file: TTab) => void;
+  selectFile: (file: TTab) => void
   handleRename: (
     id: string,
     newName: string,
     oldName: string,
     type: "file" | "folder"
-  ) => boolean;
+  ) => boolean
-  handleDeleteFile: (file: TFile) => void;
+  handleDeleteFile: (file: TFile) => void
-  movingId: string;
+  movingId: string
-  deletingFolderId: string;
+  deletingFolderId: string
 }) {
-  const isMoving = movingId === data.id;
+  const isMoving = movingId === data.id
   const isDeleting =
-    deletingFolderId.length > 0 && data.id.startsWith(deletingFolderId);
+    deletingFolderId.length > 0 && data.id.startsWith(deletingFolderId)
 
-  const ref = useRef(null); // for draggable
+  const ref = useRef(null) // for draggable
-  const [dragging, setDragging] = useState(false);
+  const [dragging, setDragging] = useState(false)
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null)
-  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`);
+  const [imgSrc, setImgSrc] = useState(`/icons/${getIconForFile(data.name)}`)
-  const [editing, setEditing] = useState(false);
+  const [editing, setEditing] = useState(false)
-  const [pendingDelete, setPendingDelete] = useState(isDeleting);
+  const [pendingDelete, setPendingDelete] = useState(isDeleting)
 
   useEffect(() => {
-    setPendingDelete(isDeleting);
+    setPendingDelete(isDeleting)
-  }, [isDeleting]);
+  }, [isDeleting])
 
   useEffect(() => {
-    const el = ref.current;
+    const el = ref.current
 
     if (el)
       return draggable({
@@ -59,14 +59,14 @@ export default function SidebarFile({
         onDragStart: () => setDragging(true),
         onDrop: () => setDragging(false),
         getInitialData: () => ({ id: data.id }),
-      });
+      })
-  }, []);
+  }, [])
 
   useEffect(() => {
     if (editing) {
-      setTimeout(() => inputRef.current?.focus(), 0);
+      setTimeout(() => inputRef.current?.focus(), 0)
     }
-  }, [editing, inputRef.current]);
+  }, [editing, inputRef.current])
 
   const renameFile = () => {
     const renamed = handleRename(
@@ -74,12 +74,12 @@ export default function SidebarFile({
       inputRef.current?.value ?? data.name,
       data.name,
       "file"
-    );
+    )
     if (!renamed && inputRef.current) {
-      inputRef.current.value = data.name;
+      inputRef.current.value = data.name
+    }
+    setEditing(false)
   }
-    setEditing(false);
-  };
 
   return (
     <ContextMenu>
@@ -88,7 +88,7 @@ export default function SidebarFile({
         disabled={pendingDelete || dragging || isMoving}
         onClick={() => {
           if (!editing && !pendingDelete && !isMoving)
-            selectFile({ ...data, saved: true });
+            selectFile({ ...data, saved: true })
         }}
         onDoubleClick={() => {
           setEditing(true)
@@ -119,8 +119,8 @@ export default function SidebarFile({
         ) : (
           <form
             onSubmit={(e) => {
-              e.preventDefault();
+              e.preventDefault()
-              renameFile();
+              renameFile()
             }}
           >
             <input
@@ -138,8 +138,8 @@ export default function SidebarFile({
       <ContextMenuContent>
         <ContextMenuItem
           onClick={() => {
-            console.log("rename");
+            console.log("rename")
-            setEditing(true);
+            setEditing(true)
           }}
         >
           <Pencil className="w-4 h-4 mr-2" />
@@ -148,9 +148,9 @@ export default function SidebarFile({
         <ContextMenuItem
           disabled={pendingDelete}
           onClick={() => {
-            console.log("delete");
+            console.log("delete")
-            setPendingDelete(true);
+            setPendingDelete(true)
-            handleDeleteFile(data);
+            handleDeleteFile(data)
           }}
         >
           <Trash2 className="w-4 h-4 mr-2" />
@@ -158,5 +158,5 @@ export default function SidebarFile({
         </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
-  );
+  )
 }

frontend/components/editor/sidebar/folder.tsx

@@ -1,20 +1,20 @@
 "use client"
 
-import Image from "next/image"
-import { useEffect, useRef, useState } from "react"
-import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFile, TFolder, TTab } from "@/lib/types"
-import SidebarFile from "./file"
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
-import { ChevronRight, Loader2, Pencil, Trash2 } from "lucide-react"
+import { TFile, TFolder, TTab } from "@/lib/types"
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
 import { cn } from "@/lib/utils"
-import { motion, AnimatePresence } from "framer-motion"
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { AnimatePresence, motion } from "framer-motion"
+import { ChevronRight, Pencil, Trash2 } from "lucide-react"
+import Image from "next/image"
+import { useEffect, useRef, useState } from "react"
+import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
+import SidebarFile from "./file"
 
 // Note: Renaming has not been implemented in the backend yet, so UI relating to renaming is commented out
 

frontend/components/editor/sidebar/index.tsx

@@ -1,28 +1,20 @@
 "use client"
 
-import {
+import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
-  FilePlus,
+import { FilePlus, FolderPlus, MessageSquareMore, Sparkles } from "lucide-react"
-  FolderPlus,
+import { useEffect, useMemo, useRef, useState } from "react"
-  Loader2,
+import { Socket } from "socket.io-client"
-  MonitorPlay,
-  Search,
-  Sparkles,
-} from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
-import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
-import { useEffect, useMemo, useRef, useState } from "react"
 import New from "./new"
-import { Socket } from "socket.io-client"
-import { Switch } from "@/components/ui/switch"
 
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn, sortFileExplorer } from "@/lib/utils"
 import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import Button from "@/components/ui/customButton"
-import { Skeleton } from "@/components/ui/skeleton"
-import { sortFileExplorer } from "@/lib/utils"
 
 export default function Sidebar({
   sandboxData,
@@ -35,6 +27,8 @@ export default function Sidebar({
   setFiles,
   addNew,
   deletingFolderId,
+  toggleAIChat,
+  isAIChatOpen,
 }: {
   sandboxData: Sandbox
   files: (TFile | TFolder)[]
@@ -51,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
 
@@ -95,8 +91,10 @@ export default function Sidebar({
         setMovingId(fileId)
         socket.emit(
           "moveFile",
+          {
             fileId,
-          folderId,
+            folderId
+          },
           (response: (TFolder | TFile)[]) => {
             setFiles(response)
             setMovingId("")
@@ -107,8 +105,8 @@ export default function Sidebar({
   }, [])
 
   return (
-    <div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
+    <div className="h-full w-56 select-none flex flex-col text-sm">
-      <div className="w-full flex flex-col items-start">
+      <div className="flex-grow overflow-auto p-2 pb-[84px]">
         <div className="flex w-full items-center justify-between h-8 mb-1">
           <div className="text-muted-foreground">Explorer</div>
           <div className="flex space-x-1">
@@ -185,10 +183,49 @@ export default function Sidebar({
           )}
         </div>
       </div>
-      <div className="w-full space-y-4">
+      <div className="fixed bottom-0 w-48 flex flex-col p-2 bg-background">
-        {/* <Button className="w-full">
+        <Button
-          <MonitorPlay className="w-4 h-4 mr-2" /> Run
+          variant="ghost"
-        </Button> */}
+          className="w-full justify-start text-sm text-muted-foreground font-normal h-8 px-2 mb-2"
+          disabled
+          aria-disabled="true"
+          style={{ opacity: 1 }}
+        >
+          <Sparkles className="h-4 w-4 mr-2 text-indigo-500 opacity-70" />
+          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
+            </kbd>
+          </div>
+        </Button>
+        <Button
+          variant="ghost"
+          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={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">
+              <span className="text-xs">⌘</span>L
+            </kbd>
+          </div>
+        </Button>
       </div>
     </div>
   )

frontend/components/editor/sidebar/new.tsx

@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import { validateName } from "@/lib/utils";
+import { validateName } from "@/lib/utils"
-import Image from "next/image";
+import Image from "next/image"
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react"
-import { Socket } from "socket.io-client";
+import { Socket } from "socket.io-client"
 
 export default function New({
   socket,
@@ -11,42 +11,42 @@ export default function New({
   stopEditing,
   addNew,
 }: {
-  socket: Socket;
+  socket: Socket
-  type: "file" | "folder";
+  type: "file" | "folder"
-  stopEditing: () => void;
+  stopEditing: () => void
-  addNew: (name: string, type: "file" | "folder") => void;
+  addNew: (name: string, type: "file" | "folder") => void
 }) {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null)
 
   function createNew() {
-    const name = inputRef.current?.value;
+    const name = inputRef.current?.value
 
     if (name) {
-      const valid = validateName(name, "", type);
+      const valid = validateName(name, "", type)
       if (valid.status) {
         if (type === "file") {
           socket.emit(
             "createFile",
-            name,
+            { name },
             ({ success }: { success: boolean }) => {
               if (success) {
-                addNew(name, type);
+                addNew(name, type)
               }
             }
-          );
+          )
         } else {
-          socket.emit("createFolder", name, () => {
+          socket.emit("createFolder", { name }, () => {
-            addNew(name, type);
+            addNew(name, type)
-          });
+          })
         }
       }
     }
-    stopEditing();
+    stopEditing()
   }
 
   useEffect(() => {
-    inputRef.current?.focus();
+    inputRef.current?.focus()
-  }, []);
+  }, [])
 
   return (
     <div className="w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
@@ -63,8 +63,8 @@ export default function New({
       />
       <form
         onSubmit={(e) => {
-          e.preventDefault();
+          e.preventDefault()
-          createNew();
+          createNew()
         }}
       >
         <input
@@ -74,5 +74,5 @@ export default function New({
         />
       </form>
     </div>
-  );
+  )
 }

frontend/components/editor/terminals/index.tsx

@@ -1,18 +1,17 @@
-"use client";
+"use client"
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
-import Tab from "@/components/ui/tab";
+import Tab from "@/components/ui/tab"
-import { Terminal } from "@xterm/xterm";
-import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
-import { toast } from "sonner";
-import EditorTerminal from "./terminal";
-import { useTerminal } from "@/context/TerminalContext";
-import { useEffect } from "react";
 import { useSocket } from "@/context/SocketContext"
+import { useTerminal } from "@/context/TerminalContext"
+import { Terminal } from "@xterm/xterm"
+import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react"
+import { useEffect } from "react"
+import { toast } from "sonner"
+import EditorTerminal from "./terminal"
 
 export default function Terminals() {
-
+  const { socket } = useSocket()
-  const { socket } = useSocket();
 
   const {
     terminals,
@@ -22,24 +21,24 @@ export default function Terminals() {
     activeTerminalId,
     setActiveTerminalId,
     creatingTerminal,
-  } = useTerminal();
+  } = useTerminal()
 
-  const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
+  const activeTerminal = terminals.find((t) => t.id === activeTerminalId)
 
   // Effect to set the active terminal when a new one is created
   useEffect(() => {
     if (terminals.length > 0 && !activeTerminalId) {
-      setActiveTerminalId(terminals[terminals.length - 1].id);
+      setActiveTerminalId(terminals[terminals.length - 1].id)
     }
-  }, [terminals, activeTerminalId, setActiveTerminalId]);
+  }, [terminals, activeTerminalId, setActiveTerminalId])
 
   const handleCreateTerminal = () => {
     if (terminals.length >= 4) {
-      toast.error("You reached the maximum # of terminals.");
+      toast.error("You reached the maximum # of terminals.")
-      return;
+      return
+    }
+    createNewTerminal()
   }
-    createNewTerminal();
-  };
 
   return (
     <>
@@ -85,7 +84,7 @@ export default function Terminals() {
                       ? { ...term, terminal: t }
                       : term
                   )
-                );
+                )
               }}
               visible={activeTerminalId === term.id}
             />
@@ -98,5 +97,5 @@ export default function Terminals() {
         </div>
       )}
     </>
-  );
+  )
 }

frontend/components/editor/terminals/terminal.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import { Terminal } from "@xterm/xterm"
 import { FitAddon } from "@xterm/addon-fit"
+import { Terminal } from "@xterm/xterm"
 import "./xterm.css"
 
-import { ElementRef, useEffect, useRef, useState } from "react"
-import { Socket } from "socket.io-client"
-import { Loader2 } from "lucide-react"
 import { debounce } from "@/lib/utils"
-
+import { Loader2 } from "lucide-react"
+import { useTheme } from "next-themes"
+import { ElementRef, useEffect, useRef } from "react"
+import { Socket } from "socket.io-client"
 export default function EditorTerminal({
   socket,
   id,
@@ -22,16 +22,121 @@ export default function EditorTerminal({
   setTerm: (term: Terminal) => void
   visible: boolean
 }) {
-  const terminalRef = useRef<ElementRef<"div">>(null)
+  const { theme } = useTheme()
+  const terminalContainerRef = useRef<ElementRef<"div">>(null)
   const fitAddonRef = useRef<FitAddon | null>(null)
 
   useEffect(() => {
-    if (!terminalRef.current) return
+    if (!terminalContainerRef.current) return
     // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
-      theme: {
+      theme: theme === "light" ? lightTheme : darkTheme,
+      fontFamily: "var(--font-geist-mono)",
+      fontSize: 14,
+      lineHeight: 1.5,
+      letterSpacing: 0,
+    })
+
+    setTerm(terminal)
+    const dispose = () => {
+      terminal.dispose()
+    }
+    return dispose
+  }, [])
+
+  useEffect(() => {
+    if (term) {
+      term.options.theme = theme === "light" ? lightTheme : darkTheme
+    }
+  }, [theme])
+
+  useEffect(() => {
+    if (!term) return
+
+    if (!terminalContainerRef.current) return
+    if (!fitAddonRef.current) {
+      const fitAddon = new FitAddon()
+      term.loadAddon(fitAddon)
+      term.open(terminalContainerRef.current)
+      fitAddon.fit()
+      fitAddonRef.current = fitAddon
+    }
+
+    const disposableOnData = term.onData((data) => {
+      socket.emit("terminalData", { id, data })
+    })
+
+    const disposableOnResize = term.onResize((dimensions) => {
+      fitAddonRef.current?.fit()
+      socket.emit("terminalResize", { dimensions })
+    })
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!fitAddonRef.current || !terminalContainerRef.current) return
+
+        const entry = entries[0]
+        if (!entry) return
+
+        const { width, height } = entry.contentRect
+
+        // Only call fit if the size has actually changed
+        if (
+          width !== terminalContainerRef.current.offsetWidth ||
+          height !== terminalContainerRef.current.offsetHeight
+        ) {
+          try {
+            fitAddonRef.current.fit()
+          } catch (err) {
+            console.error("Error during fit:", err)
+          }
+        }
+      }, 50) // Debounce for 50ms
+    )
+
+    // start observing for resize
+    resizeObserver.observe(terminalContainerRef.current)
+    return () => {
+      disposableOnData.dispose()
+      disposableOnResize.dispose()
+      resizeObserver.disconnect()
+    }
+  }, [term, terminalContainerRef.current])
+
+  useEffect(() => {
+    if (!term) return
+    const handleTerminalResponse = (response: { id: string; data: string }) => {
+      if (response.id === id) {
+        term.write(response.data)
+      }
+    }
+    socket.on("terminalResponse", handleTerminalResponse)
+
+    return () => {
+      socket.off("terminalResponse", handleTerminalResponse)
+    }
+  }, [term, id, socket])
+
+  return (
+    <>
+      <div
+        ref={terminalContainerRef}
+        style={{ display: visible ? "block" : "none" }}
+        className="w-full h-full text-left"
+      >
+        {term === null ? (
+          <div className="flex items-center text-muted-foreground p-2">
+            <Loader2 className="animate-spin mr-2 h-4 w-4" />
+            <span>Connecting to terminal...</span>
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+const lightTheme = {
   foreground: "#2e3436",
   background: "#ffffff",
   black: "#2e3436",
@@ -52,101 +157,34 @@ export default function EditorTerminal({
   brightWhite: "#eeeeec",
   cursor: "#2e3436",
   cursorAccent: "#ffffff",
-        selection: "rgba(52, 101, 164, 0.3)",
+  selectionBackground: "#3465a4",
-      },
+  selectionForeground: "#ffffff",
-      fontFamily: "var(--font-geist-mono)",
+  selectionInactiveBackground: "#264973",
-      fontSize: 14,
-      lineHeight: 1.5,
-      letterSpacing: 0,
-    })
-
-    setTerm(terminal)
-    const dispose = () => {
-      terminal.dispose()
-    }
-    return dispose
-  }, [])
-
-  useEffect(() => {
-    if (!term) return
-
-    if (!terminalRef.current) return
-    if (!fitAddonRef.current) {
-      const fitAddon = new FitAddon()
-      term.loadAddon(fitAddon)
-      term.open(terminalRef.current)
-      fitAddon.fit()
-      fitAddonRef.current = fitAddon
 }
 
-    const disposableOnData = term.onData((data) => {
+// Dark Theme
-      socket.emit("terminalData", id, data)
+const darkTheme = {
-    })
+  foreground: "#f8f8f2",
-
+  background: "#0a0a0a",
-    const disposableOnResize = term.onResize((dimensions) => {
+  black: "#21222c",
-      fitAddonRef.current?.fit()
+  brightBlack: "#6272a4",
-      socket.emit("terminalResize", dimensions)
+  red: "#ff5555",
-    })
+  brightRed: "#ff6e6e",
-    const resizeObserver = new ResizeObserver(
+  green: "#50fa7b",
-      debounce((entries) => {
+  brightGreen: "#69ff94",
-        if (!fitAddonRef.current || !terminalRef.current) return
+  yellow: "#f1fa8c",
-
+  brightYellow: "#ffffa5",
-        const entry = entries[0]
+  blue: "#bd93f9",
-        if (!entry) return
+  brightBlue: "#d6acff",
-
+  magenta: "#ff79c6",
-        const { width, height } = entry.contentRect
+  brightMagenta: "#ff92df",
-
+  cyan: "#8be9fd",
-        // Only call fit if the size has actually changed
+  brightCyan: "#a4ffff",
-        if (
+  white: "#f8f8f2",
-          width !== terminalRef.current.offsetWidth ||
+  brightWhite: "#ffffff",
-          height !== terminalRef.current.offsetHeight
+  cursor: "#f8f8f2",
-        ) {
+  cursorAccent: "#0a0a0a",
-          try {
+  selectionBackground: "#264973",
-            fitAddonRef.current.fit()
+  selectionForeground: "#ffffff",
-          } catch (err) {
+  selectionInactiveBackground: "#1a3151",
-            console.error("Error during fit:", err)
-          }
-        }
-      }, 50) // Debounce for 50ms
-    )
-
-    // start observing for resize
-    resizeObserver.observe(terminalRef.current)
-    return () => {
-      disposableOnData.dispose()
-      disposableOnResize.dispose()
-      resizeObserver.disconnect()
-    }
-  }, [term, terminalRef.current])
-
-  useEffect(() => {
-    if (!term) return
-    const handleTerminalResponse = (response: { id: string; data: string }) => {
-      if (response.id === id) {
-        term.write(response.data)
-      }
-    }
-    socket.on("terminalResponse", handleTerminalResponse)
-
-    return () => {
-      socket.off("terminalResponse", handleTerminalResponse)
-    }
-  }, [term, id, socket])
-
-  return (
-    <>
-      <div
-        ref={terminalRef}
-        style={{ display: visible ? "block" : "none" }}
-        className="w-full h-full text-left"
-      >
-        {term === null ? (
-          <div className="flex items-center text-muted-foreground p-2">
-            <Loader2 className="animate-spin mr-2 h-4 w-4" />
-            <span>Connecting to terminal...</span>
-          </div>
-        ) : null}
-      </div>
-    </>
-  )
 }

frontend/components/editor/terminals/xterm.css

@@ -80,7 +80,7 @@
 .xterm .composition-view {
   /* TODO: Composition position got messed up somewhere */
   background: transparent;
-  color: #FFF;
+  color: #fff;
   display: none;
   position: absolute;
   white-space: nowrap;
@@ -176,21 +176,41 @@ white-space: pre;
   opacity: 1 !important;
 }
 
-.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-1 {
-.xterm-underline-2 { text-decoration: double underline; }
+  text-decoration: underline;
-.xterm-underline-3 { text-decoration: wavy underline; }
+}
-.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-2 {
-.xterm-underline-5 { text-decoration: dashed underline; }
+  text-decoration: double underline;
+}
+.xterm-underline-3 {
+  text-decoration: wavy underline;
+}
+.xterm-underline-4 {
+  text-decoration: dotted underline;
+}
+.xterm-underline-5 {
+  text-decoration: dashed underline;
+}
 
 .xterm-overline {
   text-decoration: overline;
 }
 
-.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
+.xterm-overline.xterm-underline-1 {
-.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
+  text-decoration: overline underline;
-.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
+}
-.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
+.xterm-overline.xterm-underline-2 {
-.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
+  text-decoration: overline double underline;
+}
+.xterm-overline.xterm-underline-3 {
+  text-decoration: overline wavy underline;
+}
+.xterm-overline.xterm-underline-4 {
+  text-decoration: overline dotted underline;
+}
+.xterm-overline.xterm-underline-5 {
+  text-decoration: overline dashed underline;
+}
 
 .xterm-strikethrough {
   text-decoration: line-through;
@@ -201,7 +221,9 @@ z-index: 6;
   position: absolute;
 }
 
-.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
+.xterm-screen
+  .xterm-decoration-container
+  .xterm-decoration.xterm-decoration-top-layer {
   z-index: 7;
 }
 

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"
@@ -54,7 +54,7 @@ export default function Landing() {
             <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"
           >

frontend/components/ui/LoadingDots.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react"
 
 const LoadingDots: React.FC = () => {
   return (
@@ -15,18 +15,29 @@ const LoadingDots: React.FC = () => {
           opacity: 0;
           animation: showHideDot 1.5s ease-in-out infinite;
         }
-        .dot:nth-child(1) { animation-delay: 0s; }
+        .dot:nth-child(1) {
-        .dot:nth-child(2) { animation-delay: 0.5s; }
+          animation-delay: 0s;
-        .dot:nth-child(3) { animation-delay: 1s; }
+        }
+        .dot:nth-child(2) {
+          animation-delay: 0.5s;
+        }
+        .dot:nth-child(3) {
+          animation-delay: 1s;
+        }
         @keyframes showHideDot {
-          0% { opacity: 0; }
+          0% {
-          50% { opacity: 1; }
+            opacity: 0;
-          100% { opacity: 0; }
+          }
+          50% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
         }
       `}</style>
     </span>
-  );
+  )
-};
+}
-
-export default LoadingDots;
 
+export default LoadingDots

frontend/components/ui/alert-dialog.tsx

@@ -1,10 +1,10 @@
 "use client"
 
-import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react"
 
-import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -128,14 +128,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 }

frontend/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 

frontend/components/ui/card.tsx

@@ -73,4 +73,4 @@ const CardFooter = React.forwardRef<
 ))
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

frontend/components/ui/context-menu.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -187,18 +187,18 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
   ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
   ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
   ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+  ContextMenuTrigger,
 }

frontend/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client";
+"use client"
 
-import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog"
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons"
-import { Cross2Icon } from "@radix-ui/react-icons";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const Dialog = DialogPrimitive.Root;
+const Dialog = DialogPrimitive.Root
 
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal
 
-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-));
+))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+))
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogContentNoClose = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -70,9 +70,9 @@ const DialogContentNoClose = React.forwardRef<
       {children}
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+))
 DialogContentNoClose.displayName =
-  DialogPrimitive.Content.displayName + "NoClose";
+  DialogPrimitive.Content.displayName + "NoClose"
 
 const DialogHeader = ({
   className,
@@ -85,8 +85,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-);
+)
-DialogHeader.displayName = "DialogHeader";
+DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({
   className,
@@ -99,8 +99,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-);
+)
-DialogFooter.displayName = "DialogFooter";
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -114,8 +114,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-));
+))
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -126,19 +126,19 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-));
+))
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
   DialogContentNoClose,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
-};
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/components/ui/dropdown-menu.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -188,18 +188,18 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 }

frontend/components/ui/form.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
 import {
   Controller,
   ControllerProps,
@@ -10,8 +10,8 @@ import {
   useFormContext,
 } from "react-hook-form"
 
-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
 
 const Form = FormProvider
 
@@ -165,12 +165,12 @@ const FormMessage = React.forwardRef<
 FormMessage.displayName = "FormMessage"
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
   FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
 }

frontend/components/ui/label.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 

frontend/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -30,4 +30,4 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }

frontend/components/ui/resizable.tsx

@@ -42,4 +42,4 @@ const ResizableHandle = ({
   </ResizablePrimitive.PanelResizeHandle>
 )
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

frontend/components/ui/select.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import {
   CaretSortIcon,
   CheckIcon,
@@ -8,6 +7,7 @@ import {
   ChevronUpIcon,
 } from "@radix-ui/react-icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -152,13 +152,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
+  SelectLabel,
-  SelectScrollUpButton,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 }

frontend/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 

frontend/components/ui/tab.tsx

@@ -1,8 +1,8 @@
-"use client";
+"use client"
 
-import { Loader2, X } from "lucide-react";
+import { Loader2, X } from "lucide-react"
-import { Button } from "./button";
+import { MouseEventHandler } from "react"
-import { MouseEvent, MouseEventHandler, useEffect } from "react";
+import { Button } from "./button"
 
 export default function Tab({
   children,
@@ -13,13 +13,13 @@ export default function Tab({
   onClose,
   closing = false,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
-  creating?: boolean;
+  creating?: boolean
-  saved?: boolean;
+  saved?: boolean
-  selected?: boolean;
+  selected?: boolean
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onClick?: MouseEventHandler<HTMLButtonElement>
-  onClose?: () => void;
+  onClose?: () => void
-  closing?: boolean;
+  closing?: boolean
 }) {
   return (
     <Button
@@ -28,7 +28,7 @@ export default function Tab({
       variant={"secondary"}
       className={`font-normal select-none ${
         selected
-          ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
+          ? "bg-muted-foreground/50 hover:bg-muted-foreground/40 text-foreground"
           : "text-muted-foreground"
       }`}
     >
@@ -37,9 +37,9 @@ export default function Tab({
         onClick={
           onClose && !closing
             ? (e) => {
-                e.stopPropagation();
+                e.stopPropagation()
-                e.preventDefault();
+                e.preventDefault()
-                onClose();
+                onClose()
               }
             : undefined
         }
@@ -57,5 +57,5 @@ export default function Tab({
         )}
       </div>
     </Button>
-  );
+  )
 }

frontend/components/ui/table.tsx

@@ -110,11 +110,11 @@ TableCaption.displayName = "TableCaption"
 
 export {
   Table,
-  TableHeader,
   TableBody,
+  TableCaption,
+  TableCell,
   TableFooter,
   TableHead,
+  TableHeader,
   TableRow,
-  TableCell,
-  TableCaption,
 }

frontend/components/ui/userButton.tsx

@@ -1,23 +1,22 @@
-"use client";
+"use client"
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu"
-import { User } from "@/lib/types";
+import { User } from "@/lib/types"
-import { useClerk } from "@clerk/nextjs";
+import { useClerk } from "@clerk/nextjs"
-import { LogOut, Pencil, Sparkles } from "lucide-react";
+import { LogOut, Sparkles } from "lucide-react"
-import { useRouter } from "next/navigation";
+import { useRouter } from "next/navigation"
 
 export default function UserButton({ userData }: { userData: User }) {
-  if (!userData) return null;
+  if (!userData) return null
 
-  const { signOut } = useClerk();
+  const { signOut } = useClerk()
-  const router = useRouter();
+  const router = useRouter()
 
   return (
     <DropdownMenu>
@@ -68,5 +67,5 @@ export default function UserButton({ userData }: { userData: User }) {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
+  )
 }

frontend/context/PreviewContext.tsx

@@ -1,34 +1,44 @@
 "use client"
 
-import React, { createContext, useContext, useState, useRef } from 'react';
+import React, { createContext, useContext, useRef, useState } from "react"
-import { ImperativePanelHandle } from "react-resizable-panels";
+import { ImperativePanelHandle } from "react-resizable-panels"
 
 interface PreviewContextType {
-  isPreviewCollapsed: boolean;
+  isPreviewCollapsed: boolean
-  setIsPreviewCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPreviewCollapsed: React.Dispatch<React.SetStateAction<boolean>>
-  previewURL: string;
+  previewURL: string
-  setPreviewURL: React.Dispatch<React.SetStateAction<string>>;
+  setPreviewURL: React.Dispatch<React.SetStateAction<string>>
-  previewPanelRef: React.RefObject<ImperativePanelHandle>;
+  previewPanelRef: React.RefObject<ImperativePanelHandle>
 }
 
-const PreviewContext = createContext<PreviewContextType | undefined>(undefined);
+const PreviewContext = createContext<PreviewContextType | undefined>(undefined)
 
-export const PreviewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const PreviewProvider: React.FC<{ children: React.ReactNode }> = ({
-  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
+  children,
-  const [previewURL, setPreviewURL] = useState<string>("");
+}) => {
-  const previewPanelRef = useRef<ImperativePanelHandle>(null);
+  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
+  const [previewURL, setPreviewURL] = useState<string>("")
+  const previewPanelRef = useRef<ImperativePanelHandle>(null)
 
   return (
-    <PreviewContext.Provider value={{ isPreviewCollapsed, setIsPreviewCollapsed, previewURL, setPreviewURL, previewPanelRef }}>
+    <PreviewContext.Provider
+      value={{
+        isPreviewCollapsed,
+        setIsPreviewCollapsed,
+        previewURL,
+        setPreviewURL,
+        previewPanelRef,
+      }}
+    >
       {children}
     </PreviewContext.Provider>
-  );
+  )
-};
+}
 
 export const usePreview = () => {
-  const context = useContext(PreviewContext);
+  const context = useContext(PreviewContext)
   if (context === undefined) {
-    throw new Error('usePreview must be used within a PreviewProvider');
+    throw new Error("usePreview must be used within a PreviewProvider")
+  }
+  return context
 }
-  return context;
-};

frontend/context/SocketContext.tsx

@@ -1,63 +1,65 @@
-"use client";
+"use client"
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from "react"
-import { io, Socket } from 'socket.io-client';
+import { io, Socket } from "socket.io-client"
 
 interface SocketContextType {
-  socket: Socket | null;
+  socket: Socket | null
-  setUserAndSandboxId: (userId: string, sandboxId: string) => void;
+  setUserAndSandboxId: (userId: string, sandboxId: string) => void
 }
 
-const SocketContext = createContext<SocketContextType | undefined>(undefined);
+const SocketContext = createContext<SocketContextType | undefined>(undefined)
 
-export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
-  const [socket, setSocket] = useState<Socket | null>(null);
+  children,
-  const [userId, setUserId] = useState<string | null>(null);
+}) => {
-  const [sandboxId, setSandboxId] = useState<string | null>(null);
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [userId, setUserId] = useState<string | null>(null)
+  const [sandboxId, setSandboxId] = useState<string | null>(null)
 
   useEffect(() => {
     if (userId && sandboxId) {
-      console.log("Initializing socket connection...");
+      console.log("Initializing socket connection...")
-      const newSocket = io(`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`);
+      const newSocket = io(
-      console.log("Socket instance:", newSocket);
+        `${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`
-      setSocket(newSocket);
+      )
+      console.log("Socket instance:", newSocket)
+      setSocket(newSocket)
 
-      newSocket.on('connect', () => {
+      newSocket.on("connect", () => {
-        console.log("Socket connected:", newSocket.id);
+        console.log("Socket connected:", newSocket.id)
-      });
+      })
 
-      newSocket.on('disconnect', () => {
+      newSocket.on("disconnect", () => {
-        console.log("Socket disconnected");
+        console.log("Socket disconnected")
-      });
+      })
 
       return () => {
-        console.log("Disconnecting socket...");
+        console.log("Disconnecting socket...")
-        newSocket.disconnect();
+        newSocket.disconnect()
-      };
       }
-  }, [userId, sandboxId]);
+    }
+  }, [userId, sandboxId])
 
   const setUserAndSandboxId = (newUserId: string, newSandboxId: string) => {
-    setUserId(newUserId);
+    setUserId(newUserId)
-    setSandboxId(newSandboxId);
+    setSandboxId(newSandboxId)
-  };
+  }
 
   const value = {
     socket,
     setUserAndSandboxId,
-  };
+  }
 
   return (
-    <SocketContext.Provider value={ value }>
+    <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
-      {children}
+  )
-    </SocketContext.Provider>
+}
-  );
-};
 
 export const useSocket = (): SocketContextType => {
-  const context = useContext(SocketContext);
+  const context = useContext(SocketContext)
   if (!context) {
-    throw new Error('useSocket must be used within a SocketProvider');
+    throw new Error("useSocket must be used within a SocketProvider")
+  }
+  return context
 }
-  return context;
-};

frontend/context/TerminalContext.tsx

@@ -1,33 +1,44 @@
-"use client";
+"use client"
 
-import React, { createContext, useContext, useState } from 'react';
+import { useSocket } from "@/context/SocketContext"
-import { Terminal } from '@xterm/xterm';
+import {
-import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal';
+  closeTerminal as closeTerminalHelper,
-import { useSocket } from '@/context/SocketContext';
+  createTerminal as createTerminalHelper,
+} from "@/lib/terminal"
+import { Terminal } from "@xterm/xterm"
+import React, { createContext, useContext, useState } from "react"
 
 interface TerminalContextType {
-  terminals: { id: string; terminal: Terminal | null }[];
+  terminals: { id: string; terminal: Terminal | null }[]
-  setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
+  setTerminals: React.Dispatch<
-  activeTerminalId: string;
+    React.SetStateAction<{ id: string; terminal: Terminal | null }[]>
-  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
+  >
-  creatingTerminal: boolean;
+  activeTerminalId: string
-  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
+  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>
-  createNewTerminal: (command?: string) => Promise<void>;
+  creatingTerminal: boolean
-  closeTerminal: (id: string) => void;
+  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>
-  deploy: (callback: () => void) => void;
+  createNewTerminal: (command?: string) => Promise<void>
+  closeTerminal: (id: string) => void
+  deploy: (callback: () => void) => void
 }
 
-const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
+const TerminalContext = createContext<TerminalContextType | undefined>(
+  undefined
+)
 
-export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
-  const { socket } = useSocket();
+  children,
-  const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
+}) => {
-  const [activeTerminalId, setActiveTerminalId] = useState<string>('');
+  const { socket } = useSocket()
-  const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false);
+  const [terminals, setTerminals] = useState<
+    { id: string; terminal: Terminal | null }[]
+  >([])
+  const [activeTerminalId, setActiveTerminalId] = useState<string>("")
+  const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
 
   const createNewTerminal = async (command?: string): Promise<void> => {
-    if (!socket) return;
+    if (!socket) return
-    setCreatingTerminal(true);
+    setCreatingTerminal(true)
     try {
       createTerminalHelper({
         setTerminals,
@@ -35,17 +46,17 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
         setCreatingTerminal,
         command,
         socket,
-      });
+      })
     } catch (error) {
-      console.error("Error creating terminal:", error);
+      console.error("Error creating terminal:", error)
     } finally {
-      setCreatingTerminal(false);
+      setCreatingTerminal(false)
+    }
   }
-  };
 
   const closeTerminal = (id: string) => {
-    if (!socket) return;
+    if (!socket) return
-    const terminalToClose = terminals.find(term => term.id === id);
+    const terminalToClose = terminals.find((term) => term.id === id)
     if (terminalToClose) {
       closeTerminalHelper({
         term: terminalToClose,
@@ -55,16 +66,16 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
         setClosingTerminal: () => { },
         socket,
         activeTerminalId,
-      });
+      })
+    }
   }
-  };
 
   const deploy = (callback: () => void) => {
-    if (!socket) console.error("Couldn't deploy: No socket");
+    if (!socket) console.error("Couldn't deploy: No socket")
     console.log("Deploying...")
-    socket?.emit("deploy", () => {
+    socket?.emit("deploy", {}, () => {
-      callback();
+      callback()
-    });
+    })
   }
 
   const value = {
@@ -76,20 +87,20 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
     setCreatingTerminal,
     createNewTerminal,
     closeTerminal,
-    deploy
+    deploy,
-  };
+  }
 
   return (
     <TerminalContext.Provider value={value}>
       {children}
     </TerminalContext.Provider>
-  );
+  )
-};
+}
 
 export const useTerminal = (): TerminalContextType => {
-  const context = useContext(TerminalContext);
+  const context = useContext(TerminalContext)
   if (!context) {
-    throw new Error('useTerminal must be used within a TerminalProvider');
+    throw new Error("useTerminal must be used within a TerminalProvider")
+  }
+  return context
 }
-  return context;
-};

frontend/lib/terminal.ts

@@ -1,8 +1,8 @@
 // Helper functions for terminal instances
 
-import { createId } from "@paralleldrive/cuid2";
+import { createId } from "@paralleldrive/cuid2"
-import { Terminal } from "@xterm/xterm";
+import { Terminal } from "@xterm/xterm"
-import { Socket } from "socket.io-client";
+import { Socket } from "socket.io-client"
 
 export const createTerminal = ({
   setTerminals,
@@ -11,30 +11,33 @@ export const createTerminal = ({
   command,
   socket,
 }: {
-  setTerminals: React.Dispatch<React.SetStateAction<{
+  setTerminals: React.Dispatch<
-    id: string;
+    React.SetStateAction<
-    terminal: Terminal | null;
+      {
-}[]>>;
+        id: string
-  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
+        terminal: Terminal | null
-  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
+      }[]
-  command?: string;
+    >
-  socket: Socket;
+  >
-
+  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>
+  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>
+  command?: string
+  socket: Socket
 }) => {
-  setCreatingTerminal(true);
+  setCreatingTerminal(true)
-  const id = createId();
+  const id = createId()
-  console.log("creating terminal, id:", id);
+  console.log("creating terminal, id:", id)
 
-  setTerminals((prev) => [...prev, { id, terminal: null }]);
+  setTerminals((prev) => [...prev, { id, terminal: null }])
-  setActiveTerminalId(id);
+  setActiveTerminalId(id)
 
   setTimeout(() => {
-    socket.emit("createTerminal", id, () => {
+    socket.emit("createTerminal", { id }, () => {
-      setCreatingTerminal(false);
+      setCreatingTerminal(false)
-      if (command) socket.emit("terminalData", id, command + "\n");
+      if (command) socket.emit("terminalData", { id, data: command + "\n" })
-    });
+    })
-  }, 1000);
+  }, 1000)
-};
+}
 
 export const closeTerminal = ({
   term,
@@ -46,30 +49,34 @@ export const closeTerminal = ({
   activeTerminalId,
 }: {
   term: {
-    id: string; 
+    id: string
     terminal: Terminal | null
   }
   terminals: {
-    id: string; 
+    id: string
     terminal: Terminal | null
   }[]
-  setTerminals: React.Dispatch<React.SetStateAction<{ 
+  setTerminals: React.Dispatch<
-    id: string; 
+    React.SetStateAction<
+      {
+        id: string
         terminal: Terminal | null
-  }[]>>
+      }[]
+    >
+  >
   setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>
   setClosingTerminal: React.Dispatch<React.SetStateAction<string>>
   socket: Socket
   activeTerminalId: string
 }) => {
-  const numTerminals = terminals.length;
+  const numTerminals = terminals.length
-  const index = terminals.findIndex((t) => t.id === term.id);
+  const index = terminals.findIndex((t) => t.id === term.id)
-  if (index === -1) return;
+  if (index === -1) return
 
-  setClosingTerminal(term.id);
+  setClosingTerminal(term.id)
 
-  socket.emit("closeTerminal", term.id, () => {
+  socket.emit("closeTerminal", { id: term.id }, () => {
-    setClosingTerminal("");
+    setClosingTerminal("")
 
     const nextId =
       activeTerminalId === term.id
@@ -78,17 +85,17 @@ export const closeTerminal = ({
           : index < numTerminals - 1
             ? terminals[index + 1].id
             : terminals[index - 1].id
-        : activeTerminalId;
+        : activeTerminalId
 
-    setTerminals((prev) => prev.filter((t) => t.id !== term.id));
+    setTerminals((prev) => prev.filter((t) => t.id !== term.id))
 
     if (!nextId) {
-      setActiveTerminalId("");
+      setActiveTerminalId("")
     } else {
-      const nextTerminal = terminals.find((t) => t.id === nextId);
+      const nextTerminal = terminals.find((t) => t.id === nextId)
       if (nextTerminal) {
-        setActiveTerminalId(nextTerminal.id);
+        setActiveTerminalId(nextTerminal.id)
       }
     }
-  });
+  })
-};
+}

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,

frontend/lib/types.ts

@@ -1,65 +1,65 @@
 // DB Types
 
 export type User = {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  email: string;
+  email: string
-  generations: number;
+  generations: number
-  sandbox: Sandbox[];
+  sandbox: Sandbox[]
-  usersToSandboxes: UsersToSandboxes[];
+  usersToSandboxes: UsersToSandboxes[]
-};
+}
 
 export type Sandbox = {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  type: string;
+  type: string
-  visibility: "public" | "private";
+  visibility: "public" | "private"
-  createdAt: Date;
+  createdAt: Date
-  userId: string;
+  userId: string
-  usersToSandboxes: UsersToSandboxes[];
+  usersToSandboxes: UsersToSandboxes[]
-};
+}
 
 export type UsersToSandboxes = {
-  userId: string;
+  userId: string
-  sandboxId: string;
+  sandboxId: string
-  sharedOn: Date;
+  sharedOn: Date
-};
+}
 
 export type R2Files = {
-  objects: R2FileData[];
+  objects: R2FileData[]
-  truncated: boolean;
+  truncated: boolean
-  delimitedPrefixes: any[];
+  delimitedPrefixes: any[]
-};
+}
 
 export type R2FileData = {
-  storageClass: string;
+  storageClass: string
-  uploaded: string;
+  uploaded: string
-  checksums: any;
+  checksums: any
-  httpEtag: string;
+  httpEtag: string
-  etag: string;
+  etag: string
-  size: number;
+  size: number
-  version: string;
+  version: string
-  key: string;
+  key: string
-};
+}
 
 export type TFolder = {
-  id: string;
+  id: string
-  type: "folder";
+  type: "folder"
-  name: string;
+  name: string
-  children: (TFile | TFolder)[];
+  children: (TFile | TFolder)[]
-};
+}
 
 export type TFile = {
-  id: string;
+  id: string
-  type: "file";
+  type: "file"
-  name: string;
+  name: string
-};
+}
 
 export type TTab = TFile & {
-  saved: boolean;
+  saved: boolean
-};
+}
 
 export type TFileData = {
-  id: string;
+  id: string
-  data: string;
+  data: string
-};
+}

frontend/lib/utils.ts

@@ -1,8 +1,8 @@
 import { type ClassValue, clsx } from "clsx"
 // import { toast } from "sonner"
 import { twMerge } from "tailwind-merge"
-import { Sandbox, TFile, TFolder } from "./types"
 import fileExtToLang from "./file-extension-to-language.json"
+import { Sandbox, TFile, TFolder } from "./types"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

frontend/package-lock.json

@@ -39,6 +39,7 @@
         "@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",
@@ -3533,12 +3534,14 @@
     "node_modules/embla-carousel": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.3.0.tgz",
-      "integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA=="
+      "integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA==",
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.3.0.tgz",
       "integrity": "sha512-P1FlinFDcIvggcErRjNuVqnUR8anyo8vLMIH8Rthgofw7Nj8qTguCa2QjFAbzxAUTQTPNNjNL7yt0BGGinVdFw==",
+      "license": "MIT",
       "dependencies": {
         "embla-carousel": "8.3.0",
         "embla-carousel-reactive-utils": "8.3.0"
@@ -3559,6 +3562,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/embla-carousel-wheel-gestures/-/embla-carousel-wheel-gestures-8.0.1.tgz",
       "integrity": "sha512-LMAnruDqDmsjL6UoQD65aLotpmfO49Fsr3H0bMi7I+BH6jbv9OJiE61kN56daKsVtCQEt0SU1MrJslbhtgF3yQ==",
+      "license": "MIT",
       "dependencies": {
         "wheel-gestures": "^2.2.5"
       },

frontend/package.json

@@ -40,6 +40,7 @@
     "@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",

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 {