chore: add database setup guide.

Fix/layout issues

.gitignore

@@ -40,7 +40,6 @@ wrangler.toml
 
 dist
 backend/server/projects
-backend/database/drizzle
 
 app.yaml
 ingressController.yaml

.vscode/settings.json

@@ -5,5 +5,9 @@
     "source.fixAll": "explicit",
     "source.organizeImports": "explicit"
   },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

README.md

@@ -2,7 +2,7 @@
 
 ![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 generation, live preview, real-time collaboration and AI chat.
+Sandbox is an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration, and AI chat.
 
 For the latest updates, join our Discord server: [discord.gitwit.dev](https://discord.gitwit.dev/).
 
@@ -10,11 +10,11 @@ For the latest updates, join our Discord server: [discord.gitwit.dev](https://di
 
 Notes:
 
-- Double check that whatever you change "SUPERDUPERSECRET" to, it's the same in all config files.
+- Double-check that whatever you change "SUPERDUPERSECRET" to, it's the same in all config files.
 
 ### 0. Requirements
 
-The application uses NodeJS for the backend, NextJS for the frontend and Cloudflare workers for additional backend tasks.
+The application uses NodeJS for the backend, NextJS for the frontend, and Cloudflare workers for additional backend tasks.
 
 Needed accounts to set up:
 
@@ -22,6 +22,7 @@ Needed accounts to set up:
 - [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).
+- [Anthropic](https://anthropic.com/) and [OpenAI](https://openai.com/): API keys for code generation.
 
 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.
 
@@ -41,7 +42,6 @@ Run `npm install` in:
 /backend/database
 /backend/storage
 /backend/server
-/backend/ai
 ```
 
 ### 2. Adding Clerk
@@ -78,6 +78,8 @@ npx wrangler deploy
 
 ### 4. Deploying the database
 
+Follow this [guide](https://docs.google.com/document/d/1w5dA5daic_sIYB5Seni1KvnFx51pPV2so6lLdN2xa7Q/edit?usp=sharing) for more info.
+
 Create a database:
 
 ```
@@ -143,21 +145,7 @@ 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
+### 9. Configuring the frontend
 
 Update `/frontend/.env`:
 
@@ -165,9 +153,11 @@ 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'
+ANTHROPIC_API_KEY='🔑'
+OPENAI_API_KEY='🔑'
 ```
 
-### 11. Running the IDE
+### 10. Running the IDE
 
 Run `npm run dev` simultaneously in:
 
@@ -186,6 +176,15 @@ Setting up deployments first requires a separate domain (such as gitwit.app, whi
 
 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
 
+And we install [dokku-daemon](https://github.com/dokku/dokku-daemon) with the following commands:
+
+```
+git clone https://github.com/dokku/dokku-daemon
+cd dokku-daemon
+sudo make install
+systemctl start dokku-daemon
+```
+
 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
@@ -194,16 +193,21 @@ DOKKU_USERNAME=
 DOKKU_KEY=
 ```
 
+## Deploying to AWS
+
+The backend server and deployments server can be deployed using AWS's EC2 service. See [our video guide](https://www.youtube.com/watch?v=WN8HQnimjmk) on how to do this.
+
 ## Creating Custom Templates
 
 Anyone can contribute a custom template for integration in Sandbox. Since Sandbox is built on E2B, there is no limitation to what langauge or runtime a Sandbox can use.
 
-Currently there are four templates:
+Currently there are five templates:
 
 - [jamesmurdza/dokku-reactjs-template](https://github.com/jamesmurdza/dokku-reactjs-template)
 - [jamesmurdza/dokku-vanillajs-template](https://github.com/jamesmurdza/dokku-vanillajs-template)
 - [jamesmurdza/dokku-nextjs-template](https://github.com/jamesmurdza/dokku-nextjs-template)
 - [jamesmurdza/dokku-streamlit-template](https://github.com/jamesmurdza/dokku-streamlit-template)
+- [omarrwd/dokku-php-template](https://github.com/omarrwd/dokku-php-template)
 
 To create your own template, you can fork one of the above templates or start with a new blank repository. The template should have at least an `e2b.Dockerfile`, which is used by E2B to create the development environment. Optionally, a `Dockerfile` can be added which will be used to create the project build when it is deployed.
 
@@ -258,8 +262,7 @@ backend/
 ├── database/
 │   ├── src
 │   └── drizzle
-├── storage
-└── ai
+└── storage
 ```
 
 | Path               | Description                                                                |
@@ -268,7 +271,6 @@ backend/
 | `backend/server`   | The Express websocket server.                                              |
 | `backend/database` | API for interfacing with the D1 database (SQLite).                         |
 | `backend/storage`  | API for interfacing with R2 storage. Service-bound to `/backend/database`. |
-| `backend/ai`       | API for making requests to Workers AI .                                    |
 
 ### Development
 

backend/ai/.editorconfig

@@ -1,12 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = tab
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.yml]
-indent_style = space

backend/ai/.gitignore

@@ -1,172 +0,0 @@
-# Logs
-
-logs
-_.log
-npm-debug.log_
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# Runtime data
-
-pids
-_.pid
-_.seed
-\*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-
-lib-cov
-
-# Coverage directory used by tools like istanbul
-
-coverage
-\*.lcov
-
-# nyc test coverage
-
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-
-bower_components
-
-# node-waf configuration
-
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-
-build/Release
-
-# Dependency directories
-
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-
-web_modules/
-
-# TypeScript cache
-
-\*.tsbuildinfo
-
-# Optional npm cache directory
-
-.npm
-
-# Optional eslint cache
-
-.eslintcache
-
-# Optional stylelint cache
-
-.stylelintcache
-
-# Microbundle cache
-
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-
-.node_repl_history
-
-# Output of 'npm pack'
-
-\*.tgz
-
-# Yarn Integrity file
-
-.yarn-integrity
-
-# dotenv environment variable files
-
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-
-.cache
-.parcel-cache
-
-# Next.js build output
-
-.next
-out
-
-# Nuxt.js build / generate output
-
-.nuxt
-dist
-
-# Gatsby files
-
-.cache/
-
-# Comment in the public line in if your project uses Gatsby and not Next.js
-
-# https://nextjs.org/blog/next-9-1#public-directory-support
-
-# public
-
-# vuepress build output
-
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-
-.temp
-.cache
-
-# Docusaurus cache and generated files
-
-.docusaurus
-
-# Serverless directories
-
-.serverless/
-
-# FuseBox cache
-
-.fusebox/
-
-# DynamoDB Local files
-
-.dynamodb/
-
-# TernJS port file
-
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-
-.vscode-test
-
-# yarn v2
-
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.\*
-
-# wrangler project
-
-.dev.vars
-.wrangler/

backend/ai/package.json

@@ -1,22 +0,0 @@
-{
-	"name": "ai",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"deploy": "wrangler deploy",
-		"dev": "wrangler dev",
-		"start": "wrangler dev",
-		"test": "vitest",
-		"cf-typegen": "wrangler types"
-	},
-	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.1.0",
-		"@cloudflare/workers-types": "^4.20240512.0",
-		"typescript": "^5.0.4",
-		"vitest": "1.3.0",
-		"wrangler": "^3.0.0"
-	},
-	"dependencies": {
-		"@anthropic-ai/sdk": "^0.27.2"
-	}
-}

backend/ai/src/index.ts

@@ -1,128 +0,0 @@
-import { Anthropic } from "@anthropic-ai/sdk"
-import { MessageParam } from "@anthropic-ai/sdk/src/resources/messages.js"
-
-export interface Env {
-	ANTHROPIC_API_KEY: string
-}
-
-export default {
-	async fetch(request: Request, env: Env): Promise<Response> {
-		// Handle CORS preflight requests
-		if (request.method === "OPTIONS") {
-			return new Response(null, {
-				headers: {
-					"Access-Control-Allow-Origin": "*",
-					"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 })
-		}
-
-		let body
-		let isEditCodeWidget = false
-		if (request.method === "POST") {
-			body = (await request.json()) as {
-				messages: unknown
-				context: unknown
-				activeFileContent: string
-			}
-		} else {
-			const url = new URL(request.url)
-			const fileName = url.searchParams.get("fileName") || ""
-			const code = url.searchParams.get("code") || ""
-			const line = url.searchParams.get("line") || ""
-			const instructions = url.searchParams.get("instructions") || ""
-
-			body = {
-				messages: [{ role: "human", content: instructions }],
-				context: `File: ${fileName}\nLine: ${line}\nCode:\n${code}`,
-				activeFileContent: code,
-			}
-			isEditCodeWidget = true
-		}
-
-		const messages = body.messages
-		const context = body.context
-		const activeFileContent = body.activeFileContent
-
-		if (!Array.isArray(messages) || messages.length === 0) {
-			return new Response("Invalid or empty messages", { status: 400 })
-		}
-
-		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.
-
-Context:
-${context}
-
-Active File Content:
-${activeFileContent}
-
-Instructions: ${messages[0].content}
-
-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:
-
-\`\`\`python
-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` : ""}
-${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
-		}
-
-		const anthropicMessages = messages.map((msg) => ({
-			role: msg.role === "human" ? "user" : "assistant",
-			content: msg.content,
-		})) as MessageParam[]
-
-		try {
-			const anthropic = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY })
-
-			const stream = await anthropic.messages.create({
-				model: "claude-3-5-sonnet-20240620",
-				max_tokens: 1024,
-				system: systemMessage,
-				messages: anthropicMessages,
-				stream: true,
-			})
-
-			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"
-						) {
-							const bytes = encoder.encode(chunk.delta.text)
-							controller.enqueue(bytes)
-						}
-					}
-					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",
-				},
-			})
-		} catch (error) {
-			console.error("Error:", error)
-			return new Response("Internal Server Error", { status: 500 })
-		}
-	},
-}

backend/ai/test/index.spec.ts

@@ -1,30 +0,0 @@
-// test/index.spec.ts
-import {
-	createExecutionContext,
-	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>
-
-describe("Hello World worker", () => {
-	it("responds with Hello World! (unit style)", async () => {
-		const request = new IncomingRequest("http://example.com")
-		// Create an empty context to pass to `worker.fetch()`.
-		const ctx = createExecutionContext()
-		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)
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	})
-
-	it("responds with Hello World! (integration style)", async () => {
-		const response = await SELF.fetch("https://example.com")
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
-	})
-})

backend/ai/test/tsconfig.json

@@ -1,11 +0,0 @@
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"types": [
-			"@cloudflare/workers-types/experimental",
-			"@cloudflare/vitest-pool-workers"
-		]
-	},
-	"include": ["./**/*.ts", "../src/env.d.ts"],
-	"exclude": []
-}

backend/ai/tsconfig.json

@@ -1,106 +0,0 @@
-{
-	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-		/* Projects */
-		// "incremental": true,                              /* Enable incremental compilation */
-		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
-		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
-		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-		/* 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. */,
-		"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. */
-		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
-		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
-		// "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
-		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-
-		/* Modules */
-		"module": "es2022" /* Specify what module code is generated. */,
-		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
-		"moduleResolution": "Bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
-		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-		// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
-		"types": [
-			"@cloudflare/workers-types/2023-07-01"
-		] /* Specify type package names to be included without being referenced in a source file. */,
-		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-		"resolveJsonModule": true /* Enable importing .json files */,
-		// "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
-
-		/* JavaScript Support */
-		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
-		"checkJs": false /* Enable error reporting in type-checked JavaScript files. */,
-		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
-
-		/* Emit */
-		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-		// "removeComments": true,                           /* Disable emitting comments. */
-		"noEmit": true /* Disable emitting files from a compilation. */,
-		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
-		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
-		// "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
-		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
-		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-		// "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
-		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-		/* Interop Constraints */
-		"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
-		"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
-		// "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
-		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-		/* Type Checking */
-		"strict": true /* Enable all strict type-checking options. */,
-		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
-		// "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
-		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-		// "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
-		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-		// "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
-		// "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
-		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-		// "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
-		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
-		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-		// "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
-		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
-		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-		/* Completeness */
-		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-		"skipLibCheck": true /* Skip type checking all .d.ts files. */
-	},
-	"exclude": ["test"]
-}

backend/ai/vitest.config.ts

@@ -1,11 +0,0 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
-
-export default defineWorkersConfig({
-	test: {
-		poolOptions: {
-			workers: {
-				wrangler: { configPath: "./wrangler.toml" },
-			},
-		},
-	},
-})

backend/ai/worker-configuration.d.ts

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

backend/ai/wrangler.example.toml

@@ -1,10 +0,0 @@
-name = "ai"
-main = "src/index.ts"
-compatibility_date = "2024-05-12"
-compatibility_flags = ["nodejs_compat"]
-
-[ai]
-binding = "AI"
-
-[vars]
-ANTHROPIC_API_KEY = ""

backend/database/drizzle/0000_sudden_wallop.sql

@@ -0,0 +1,46 @@
+CREATE TABLE `sandbox` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`type` text NOT NULL,
+	`visibility` text,
+	`createdAt` integer DEFAULT CURRENT_TIMESTAMP,
+	`user_id` text NOT NULL,
+	`likeCount` integer DEFAULT 0,
+	`viewCount` integer DEFAULT 0,
+	FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `sandbox_likes` (
+	`user_id` text NOT NULL,
+	`sandbox_id` text NOT NULL,
+	`createdAt` integer DEFAULT CURRENT_TIMESTAMP,
+	PRIMARY KEY(`sandbox_id`, `user_id`),
+	FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`sandbox_id`) REFERENCES `sandbox`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `user` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`email` text NOT NULL,
+	`username` text NOT NULL,
+	`avatarUrl` text,
+	`githubToken` text,
+	`createdAt` integer DEFAULT CURRENT_TIMESTAMP,
+	`generations` integer DEFAULT 0,
+	`tier` text DEFAULT 'FREE',
+	`tierExpiresAt` integer,
+	`lastResetDate` integer
+);
+--> statement-breakpoint
+CREATE TABLE `users_to_sandboxes` (
+	`userId` text NOT NULL,
+	`sandboxId` text NOT NULL,
+	`sharedOn` integer,
+	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`sandboxId`) REFERENCES `sandbox`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `sandbox_id_unique` ON `sandbox` (`id`);--> statement-breakpoint
+CREATE UNIQUE INDEX `user_id_unique` ON `user` (`id`);--> statement-breakpoint
+CREATE UNIQUE INDEX `user_username_unique` ON `user` (`username`);

backend/database/drizzle/0001_dusty_komodo.sql

@@ -0,0 +1,3 @@
+ALTER TABLE user ADD `bio` text;--> statement-breakpoint
+ALTER TABLE user ADD `personalWebsite` text;--> statement-breakpoint
+ALTER TABLE user ADD `links` text DEFAULT '[]';

backend/database/drizzle/0002_chemical_brother_voodoo.sql

@@ -0,0 +1 @@
+ALTER TABLE sandbox ADD `containerId` text; 

backend/database/drizzle/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "5",
   "dialect": "sqlite",
-  "id": "afe10bff-362b-402c-bdb5-038341692f35",
+  "id": "4ada398d-7e4e-448f-8cea-a10b4d844600",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "sandbox": {
@@ -94,6 +94,72 @@
       "compositePrimaryKeys": {},
       "uniqueConstraints": {}
     },
+    "sandbox_likes": {
+      "name": "sandbox_likes",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sandbox_id": {
+          "name": "sandbox_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sandbox_likes_user_id_user_id_fk": {
+          "name": "sandbox_likes_user_id_user_id_fk",
+          "tableFrom": "sandbox_likes",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "sandbox_likes_sandbox_id_sandbox_id_fk": {
+          "name": "sandbox_likes_sandbox_id_sandbox_id_fk",
+          "tableFrom": "sandbox_likes",
+          "tableTo": "sandbox",
+          "columnsFrom": [
+            "sandbox_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "sandbox_likes_sandbox_id_user_id_pk": {
+          "columns": [
+            "sandbox_id",
+            "user_id"
+          ],
+          "name": "sandbox_likes_sandbox_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
     "user": {
       "name": "user",
       "columns": {
@@ -132,6 +198,13 @@
           "notNull": false,
           "autoincrement": false
         },
+        "githubToken": {
+          "name": "githubToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
         "createdAt": {
           "name": "createdAt",
           "type": "integer",
@@ -140,13 +213,6 @@
           "autoincrement": false,
           "default": "CURRENT_TIMESTAMP"
         },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
         "generations": {
           "name": "generations",
           "type": "integer",
@@ -154,6 +220,28 @@
           "notNull": false,
           "autoincrement": false,
           "default": 0
+        },
+        "tier": {
+          "name": "tier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'FREE'"
+        },
+        "tierExpiresAt": {
+          "name": "tierExpiresAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastResetDate": {
+          "name": "lastResetDate",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
         }
       },
       "indexes": {

backend/database/drizzle/meta/0001_snapshot.json

@@ -1,8 +1,8 @@
 {
     "version": "5",
     "dialect": "sqlite",
-  "id": "e570d5ac-700d-4e62-8a46-482b21ae1fe1",
-  "prevId": "afe10bff-362b-402c-bdb5-038341692f35",
+    "id": "80c0b0b2-bb0e-449a-b447-c21863686f58",
+    "prevId": "4ada398d-7e4e-448f-8cea-a10b4d844600",
     "tables": {
       "sandbox": {
         "name": "sandbox",
@@ -94,6 +94,72 @@
         "compositePrimaryKeys": {},
         "uniqueConstraints": {}
       },
+      "sandbox_likes": {
+        "name": "sandbox_likes",
+        "columns": {
+          "user_id": {
+            "name": "user_id",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": true,
+            "autoincrement": false
+          },
+          "sandbox_id": {
+            "name": "sandbox_id",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": true,
+            "autoincrement": false
+          },
+          "createdAt": {
+            "name": "createdAt",
+            "type": "integer",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false,
+            "default": "CURRENT_TIMESTAMP"
+          }
+        },
+        "indexes": {},
+        "foreignKeys": {
+          "sandbox_likes_user_id_user_id_fk": {
+            "name": "sandbox_likes_user_id_user_id_fk",
+            "tableFrom": "sandbox_likes",
+            "tableTo": "user",
+            "columnsFrom": [
+              "user_id"
+            ],
+            "columnsTo": [
+              "id"
+            ],
+            "onDelete": "no action",
+            "onUpdate": "no action"
+          },
+          "sandbox_likes_sandbox_id_sandbox_id_fk": {
+            "name": "sandbox_likes_sandbox_id_sandbox_id_fk",
+            "tableFrom": "sandbox_likes",
+            "tableTo": "sandbox",
+            "columnsFrom": [
+              "sandbox_id"
+            ],
+            "columnsTo": [
+              "id"
+            ],
+            "onDelete": "no action",
+            "onUpdate": "no action"
+          }
+        },
+        "compositePrimaryKeys": {
+          "sandbox_likes_sandbox_id_user_id_pk": {
+            "columns": [
+              "sandbox_id",
+              "user_id"
+            ],
+            "name": "sandbox_likes_sandbox_id_user_id_pk"
+          }
+        },
+        "uniqueConstraints": {}
+      },
       "user": {
         "name": "user",
         "columns": {
@@ -132,6 +198,13 @@
             "notNull": false,
             "autoincrement": false
           },
+          "githubToken": {
+            "name": "githubToken",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false
+          },
           "createdAt": {
             "name": "createdAt",
             "type": "integer",
@@ -147,6 +220,50 @@
             "notNull": false,
             "autoincrement": false,
             "default": 0
+          },
+          "bio": {
+            "name": "bio",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false
+          },
+          "personalWebsite": {
+            "name": "personalWebsite",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false
+          },
+          "links": {
+            "name": "links",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false,
+            "default": "'[]'"
+          },
+          "tier": {
+            "name": "tier",
+            "type": "text",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false,
+            "default": "'FREE'"
+          },
+          "tierExpiresAt": {
+            "name": "tierExpiresAt",
+            "type": "integer",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false
+          },
+          "lastResetDate": {
+            "name": "lastResetDate",
+            "type": "integer",
+            "primaryKey": false,
+            "notNull": false,
+            "autoincrement": false
           }
         },
         "indexes": {
@@ -233,4 +350,4 @@
       "tables": {},
       "columns": {}
     }
-}
+  }

backend/database/drizzle/meta/0002_snapshot.json

@@ -0,0 +1,360 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "51abcf01-2921-4885-8058-d1ccd576f3e1",
+  "prevId": "80c0b0b2-bb0e-449a-b447-c21863686f58",
+  "tables": {
+    "sandbox": {
+      "name": "sandbox",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "likeCount": {
+          "name": "likeCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "viewCount": {
+          "name": "viewCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "containerId": {
+          "name": "containerId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "sandbox_id_unique": {
+          "name": "sandbox_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "sandbox_user_id_user_id_fk": {
+          "name": "sandbox_user_id_user_id_fk",
+          "tableFrom": "sandbox",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "sandbox_likes": {
+      "name": "sandbox_likes",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sandbox_id": {
+          "name": "sandbox_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sandbox_likes_user_id_user_id_fk": {
+          "name": "sandbox_likes_user_id_user_id_fk",
+          "tableFrom": "sandbox_likes",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "sandbox_likes_sandbox_id_sandbox_id_fk": {
+          "name": "sandbox_likes_sandbox_id_sandbox_id_fk",
+          "tableFrom": "sandbox_likes",
+          "tableTo": "sandbox",
+          "columnsFrom": [
+            "sandbox_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "sandbox_likes_sandbox_id_user_id_pk": {
+          "columns": [
+            "sandbox_id",
+            "user_id"
+          ],
+          "name": "sandbox_likes_sandbox_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatarUrl": {
+          "name": "avatarUrl",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "githubToken": {
+          "name": "githubToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "generations": {
+          "name": "generations",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "bio": {
+          "name": "bio",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "personalWebsite": {
+          "name": "personalWebsite",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "links": {
+          "name": "links",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'[]'"
+        },
+        "tier": {
+          "name": "tier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'FREE'"
+        },
+        "tierExpiresAt": {
+          "name": "tierExpiresAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lastResetDate": {
+          "name": "lastResetDate",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_unique": {
+          "name": "user_id_unique",
+          "columns": [
+            "id"
+          ],
+          "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "users_to_sandboxes": {
+      "name": "users_to_sandboxes",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sandboxId": {
+          "name": "sandboxId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "sharedOn": {
+          "name": "sharedOn",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_to_sandboxes_userId_user_id_fk": {
+          "name": "users_to_sandboxes_userId_user_id_fk",
+          "tableFrom": "users_to_sandboxes",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "users_to_sandboxes_sandboxId_sandbox_id_fk": {
+          "name": "users_to_sandboxes_sandboxId_sandbox_id_fk",
+          "tableFrom": "users_to_sandboxes",
+          "tableTo": "sandbox",
+          "columnsFrom": [
+            "sandboxId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

backend/database/drizzle/meta/_journal.json

@@ -5,29 +5,22 @@
     {
       "idx": 0,
       "version": "5",
-      "when": 1731288423588,
-      "tag": "0000_cuddly_patriot",
+      "when": 1736155854410,
+      "tag": "0000_sudden_wallop",
       "breakpoints": true
     },
     {
       "idx": 1,
       "version": "5",
-      "when": 1731290863632,
-      "tag": "0001_opposite_newton_destine",
+      "when": 1736169498666,
+      "tag": "0001_dusty_komodo",
       "breakpoints": true
     },
     {
       "idx": 2,
       "version": "5",
-      "when": 1731296235880,
-      "tag": "0002_rainy_fantastic_four",
-      "breakpoints": true
-    },
-    {
-      "idx": 3,
-      "version": "5",
-      "when": 1731297339306,
-      "tag": "0003_lying_snowbird",
+      "when": 1736768910615,
+      "tag": "0002_chemical_brother_voodoo",
       "breakpoints": true
     }
   ]

backend/database/package.json

@@ -18,7 +18,7 @@
 		"drizzle-kit": "^0.20.17",
 		"typescript": "^5.0.4",
 		"vitest": "1.3.0",
-		"wrangler": "^3.86.0"
+		"wrangler": "^3.101.0"
 	},
 	"dependencies": {
 		"@paralleldrive/cuid2": "^2.2.2",

backend/database/src/index.ts

@@ -5,7 +5,7 @@ import { z } from "zod"
 
 import { and, eq, sql } from "drizzle-orm"
 import * as schema from "./schema"
-import { sandbox, user, usersToSandboxes } from "./schema"
+import { Sandbox, sandbox, sandboxLikes, user, usersToSandboxes } from "./schema"
 
 export interface Env {
   DB: D1Database
@@ -18,6 +18,13 @@ export interface Env {
 
 // npm run generate
 // npx wrangler d1 execute d1-sandbox --local --file=./drizzle/<FILE>
+interface SandboxWithLiked extends Sandbox {
+  liked: boolean
+}
+
+interface UserResponse extends Omit<schema.User, "sandbox"> {
+  sandbox: SandboxWithLiked[]
+}
 
 export default {
   async fetch(
@@ -60,6 +67,7 @@ export default {
         const params = url.searchParams
         if (params.has("id")) {
           const id = params.get("id") as string
+          await db.delete(sandboxLikes).where(eq(sandboxLikes.sandboxId, id))
           await db
             .delete(usersToSandboxes)
             .where(eq(usersToSandboxes.sandboxId, id))
@@ -232,47 +240,147 @@ export default {
 
         return success
       } else return methodNotAllowed
-		} else if (path === "/api/sandbox/generate" && method === "POST") {
-			const generateSchema = z.object({
+    } else if (path === "/api/sandbox/like") {
+      if (method === "POST") {
+        const likeSchema = z.object({
+          sandboxId: z.string(),
           userId: z.string(),
         })
-			const body = await request.json()
-			const { userId } = generateSchema.parse(body)
 
-			const dbUser = await db.query.user.findFirst({
-				where: (user, { eq }) => eq(user.id, userId),
+        try {
+          const body = await request.json()
+          const { sandboxId, userId } = likeSchema.parse(body)
+
+          // Check if user has already liked
+          const existingLike = await db.query.sandboxLikes.findFirst({
+            where: (likes, { and, eq }) =>
+              and(eq(likes.sandboxId, sandboxId), eq(likes.userId, userId)),
           })
-			if (!dbUser) {
-				return new Response("User not found.", { status: 400 })
-			}
-			if (dbUser.generations !== null && dbUser.generations >= 10) {
-				return new Response("You reached the maximum # of generations.", {
-					status: 400,
-				})
-			}
+
+          if (existingLike) {
+            // Unlike
+            await db
+              .delete(sandboxLikes)
+              .where(
+                and(
+                  eq(sandboxLikes.sandboxId, sandboxId),
+                  eq(sandboxLikes.userId, userId)
+                )
+              )
 
             await db
-				.update(user)
-				.set({ generations: sql`${user.generations} + 1` })
-				.where(eq(user.id, userId))
-				.get()
+              .update(sandbox)
+              .set({
+                likeCount: sql`${sandbox.likeCount} - 1`,
+              })
+              .where(eq(sandbox.id, sandboxId))
 
-			return success
+            return json({
+              message: "Unlike successful",
+              liked: false,
+            })
+          } else {
+            // Like
+            await db.insert(sandboxLikes).values({
+              sandboxId,
+              userId,
+              createdAt: new Date(),
+            })
+
+            await db
+              .update(sandbox)
+              .set({
+                likeCount: sql`${sandbox.likeCount} + 1`,
+              })
+              .where(eq(sandbox.id, sandboxId))
+
+            return json({
+              message: "Like successful",
+              liked: true,
+            })
+          }
+        } catch (error) {
+          return new Response("Invalid request format", { status: 400 })
+        }
+      } else if (method === "GET") {
+        const params = url.searchParams
+        const sandboxId = params.get("sandboxId")
+        const userId = params.get("userId")
+
+        if (!sandboxId || !userId) {
+          return invalidRequest
+        }
+
+        const like = await db.query.sandboxLikes.findFirst({
+          where: (likes, { and, eq }) =>
+            and(eq(likes.sandboxId, sandboxId), eq(likes.userId, userId)),
+        })
+
+        return json({
+          liked: !!like,
+        })
+      } else {
+        return methodNotAllowed
+      }
     } else if (path === "/api/user") {
       if (method === "GET") {
         const params = url.searchParams
 
         if (params.has("id")) {
           const id = params.get("id") as string
+
           const res = await db.query.user.findFirst({
             where: (user, { eq }) => eq(user.id, id),
             with: {
               sandbox: {
                 orderBy: (sandbox, { desc }) => [desc(sandbox.createdAt)],
+                with: {
+                  likes: true,
+                },
               },
               usersToSandboxes: true,
             },
           })
+          if (res) {
+            const transformedUser: UserResponse = {
+              ...res,
+              sandbox: res.sandbox.map(
+                (sb): SandboxWithLiked => ({
+                  ...sb,
+                  liked: sb.likes.some((like) => like.userId === id),
+                })
+              ),
+            }
+            return json(transformedUser)
+          }
+          return json(res ?? {})
+        } else if (params.has("username")) {
+          const username = params.get("username") as string
+          const userId = params.get("currentUserId")
+          const res = await db.query.user.findFirst({
+            where: (user, { eq }) => eq(user.username, username),
+            with: {
+              sandbox: {
+                orderBy: (sandbox, { desc }) => [desc(sandbox.createdAt)],
+                with: {
+                  likes: true,
+                },
+              },
+              usersToSandboxes: true,
+            },
+          })
+          if (res) {
+            const transformedUser: UserResponse = {
+              ...res,
+              sandbox: res.sandbox.map(
+                (sb): SandboxWithLiked => ({
+                  ...sb,
+                  liked: sb.likes.some((like) => like.userId === userId),
+                })
+              ),
+            }
+            return json(transformedUser)
+          }
           return json(res ?? {})
         } else {
           const res = await db.select().from(user).all()
@@ -285,13 +393,29 @@ export default {
           email: z.string().email(),
           username: z.string(),
           avatarUrl: z.string().optional(),
+          githubToken: z.string().nullable().optional(),
           createdAt: z.string().optional(),
           generations: z.number().optional(),
+          tier: z.enum(["FREE", "PRO", "ENTERPRISE"]).optional(),
+          tierExpiresAt: z.number().optional(),
+          lastResetDate: z.number().optional(),
         })
 
         const body = await request.json()
-				const { id, name, email, username, avatarUrl, createdAt, generations } = userSchema.parse(body)
 
+        const {
+          id,
+          name,
+          email,
+          username,
+          avatarUrl,
+          githubToken,
+          createdAt,
+          generations,
+          tier,
+          tierExpiresAt,
+          lastResetDate,
+        } = userSchema.parse(body)
         const res = await db
           .insert(user)
           .values({
@@ -300,8 +424,12 @@ export default {
             email,
             username,
             avatarUrl,
+            githubToken,
             createdAt: createdAt ? new Date(createdAt) : new Date(),
             generations,
+            tier,
+            tierExpiresAt,
+            lastResetDate,
           })
           .returning()
           .get()
@@ -313,6 +441,68 @@ export default {
           await db.delete(user).where(eq(user.id, id))
           return success
         } else return invalidRequest
+      } else if (method === "PUT") {
+        const updateUserSchema = z.object({
+          id: z.string(),
+          name: z.string().optional(),
+          bio: z.string().optional(),
+          personalWebsite: z.string().optional(),
+          links: z
+            .array(
+              z.object({
+                url: z.string(),
+                platform: z.enum(schema.KNOWN_PLATFORMS),
+              })
+            )
+            .optional(),
+          email: z.string().email().optional(),
+          username: z.string().optional(),
+          avatarUrl: z.string().optional(),
+          githubToken: z.string().nullable().optional(),
+          generations: z.number().optional(),
+        })
+
+        try {
+          const body = await request.json()
+          const validatedData = updateUserSchema.parse(body)
+
+          const { id, username, ...updateData } = validatedData
+
+          // If username is being updated, check for existing username
+          if (username) {
+            const existingUser = await db
+              .select()
+              .from(user)
+              .where(eq(user.username, username))
+              .get()
+            if (existingUser && existingUser.id !== id) {
+              return json({ error: "Username already exists" }, { status: 409 })
+            }
+          }
+
+          const cleanUpdateData = {
+            ...updateData,
+            ...(username ? { username } : {}),
+          }
+
+          const res = await db
+            .update(user)
+            .set(cleanUpdateData)
+            .where(eq(user.id, id))
+            .returning()
+            .get()
+
+          if (!res) {
+            return json({ error: "User not found" }, { status: 404 })
+          }
+
+          return json({ res })
+        } catch (error) {
+          if (error instanceof z.ZodError) {
+            return json({ error: error.errors }, { status: 400 })
+          }
+          return json({ error: "Internal server error" }, { status: 500 })
+        }
       } else {
         return methodNotAllowed
       }
@@ -324,12 +514,90 @@ export default {
         if (!username) return invalidRequest
 
         const exists = await db.query.user.findFirst({
-					where: (user, { eq }) => eq(user.username, username)
+          where: (user, { eq }) => eq(user.username, username),
         })
 
         return json({ exists: !!exists })
       }
       return methodNotAllowed
+    } else if (
+      path === "/api/user/increment-generations" &&
+      method === "POST"
+    ) {
+      const schema = z.object({
+        userId: z.string(),
+      })
+
+      const body = await request.json()
+      const { userId } = schema.parse(body)
+
+      await db
+        .update(user)
+        .set({ generations: sql`${user.generations} + 1` })
+        .where(eq(user.id, userId))
+        .get()
+
+      return success
+    } else if (path === "/api/user/update-tier" && method === "POST") {
+      const schema = z.object({
+        userId: z.string(),
+        tier: z.enum(["FREE", "PRO", "ENTERPRISE"]),
+        tierExpiresAt: z.date(),
+      })
+
+      const body = await request.json()
+      const { userId, tier, tierExpiresAt } = schema.parse(body)
+
+      await db
+        .update(user)
+        .set({
+          tier,
+          tierExpiresAt: tierExpiresAt.getTime(),
+          // Reset generations when upgrading tier
+          generations: 0,
+        })
+        .where(eq(user.id, userId))
+        .get()
+
+      return success
+    } else if (path === "/api/user/check-reset" && method === "POST") {
+      const schema = z.object({
+        userId: z.string(),
+      })
+
+      const body = await request.json()
+      const { userId } = schema.parse(body)
+
+      const dbUser = await db.query.user.findFirst({
+        where: (user, { eq }) => eq(user.id, userId),
+      })
+
+      if (!dbUser) {
+        return new Response("User not found", { status: 404 })
+      }
+
+      const now = new Date()
+      const lastReset = dbUser.lastResetDate
+        ? new Date(dbUser.lastResetDate)
+        : new Date(0)
+
+      if (
+        now.getMonth() !== lastReset.getMonth() ||
+        now.getFullYear() !== lastReset.getFullYear()
+      ) {
+        await db
+          .update(user)
+          .set({
+            generations: 0,
+            lastResetDate: now.getTime(),
+          })
+          .where(eq(user.id, userId))
+          .get()
+
+        return new Response("Reset successful", { status: 200 })
+      }
+
+      return new Response("No reset needed", { status: 200 })
     } else return notFound
   },
 }

backend/database/src/schema.ts

@@ -1,8 +1,28 @@
 import { createId } from "@paralleldrive/cuid2"
-import { relations } from "drizzle-orm"
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core"
-import { sql } from "drizzle-orm"
+import { relations, sql } from "drizzle-orm"
+import { integer, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core"
 
+export const KNOWN_PLATFORMS = [
+  "github",
+  "twitter",
+  "instagram",
+  "bluesky",
+  "linkedin",
+  "youtube",
+  "twitch",
+  "discord",
+  "mastodon",
+  "threads",
+  "gitlab",
+  "generic",
+] as const
+
+export type KnownPlatform = (typeof KNOWN_PLATFORMS)[number]
+export type UserLink = {
+  url: string
+  platform: KnownPlatform
+}
+// #region Tables
 export const user = sqliteTable("user", {
   id: text("id")
     .$defaultFn(() => createId())
@@ -12,18 +32,21 @@ export const user = sqliteTable("user", {
   email: text("email").notNull(),
   username: text("username").notNull().unique(),
   avatarUrl: text("avatarUrl"),
-	createdAt: integer("createdAt", { mode: "timestamp_ms" })
-		.default(sql`CURRENT_TIMESTAMP`),
+  githubToken: text("githubToken"),
+  createdAt: integer("createdAt", { mode: "timestamp_ms" }).default(
+    sql`CURRENT_TIMESTAMP`
+  ),
   generations: integer("generations").default(0),
+  bio: text("bio"),
+  personalWebsite: text("personalWebsite"),
+  links: text("links", { mode: "json" }).default("[]").$type<UserLink[]>(),
+  tier: text("tier", { enum: ["FREE", "PRO", "ENTERPRISE"] }).default("FREE"),
+  tierExpiresAt: integer("tierExpiresAt"),
+  lastResetDate: integer("lastResetDate"),
 })
 
 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")
     .$defaultFn(() => createId())
@@ -32,24 +55,36 @@ export const sandbox = sqliteTable("sandbox", {
   name: text("name").notNull(),
   type: text("type").notNull(),
   visibility: text("visibility", { enum: ["public", "private"] }),
-	createdAt: integer("createdAt", { mode: "timestamp_ms" })
-		.default(sql`CURRENT_TIMESTAMP`),
+  createdAt: integer("createdAt", { mode: "timestamp_ms" }).default(
+    sql`CURRENT_TIMESTAMP`
+  ),
   userId: text("user_id")
     .notNull()
     .references(() => user.id),
   likeCount: integer("likeCount").default(0),
   viewCount: integer("viewCount").default(0),
+  containerId: text("containerId"),
 })
 
 export type Sandbox = typeof sandbox.$inferSelect
 
-export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
-	author: one(user, {
-		fields: [sandbox.userId],
-		references: [user.id],
-	}),
-	usersToSandboxes: many(usersToSandboxes),
-}))
+export const sandboxLikes = sqliteTable(
+  "sandbox_likes",
+  {
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id),
+    sandboxId: text("sandbox_id")
+      .notNull()
+      .references(() => sandbox.id),
+    createdAt: integer("createdAt", { mode: "timestamp_ms" }).default(
+      sql`CURRENT_TIMESTAMP`
+    ),
+  },
+  (table) => ({
+    pk: primaryKey({ columns: [table.sandboxId, table.userId] }),
+  })
+)
 
 export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
   userId: text("userId")
@@ -61,6 +96,33 @@ export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
   sharedOn: integer("sharedOn", { mode: "timestamp_ms" }),
 })
 
+// #region Relations
+export const userRelations = relations(user, ({ many }) => ({
+  sandbox: many(sandbox),
+  usersToSandboxes: many(usersToSandboxes),
+  likes: many(sandboxLikes),
+}))
+
+export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
+  author: one(user, {
+    fields: [sandbox.userId],
+    references: [user.id],
+  }),
+  usersToSandboxes: many(usersToSandboxes),
+  likes: many(sandboxLikes),
+}))
+
+export const sandboxLikesRelations = relations(sandboxLikes, ({ one }) => ({
+  user: one(user, {
+    fields: [sandboxLikes.userId],
+    references: [user.id],
+  }),
+  sandbox: one(sandbox, {
+    fields: [sandboxLikes.sandboxId],
+    references: [sandbox.id],
+  }),
+}))
+
 export const usersToSandboxesRelations = relations(
   usersToSandboxes,
   ({ one }) => ({
@@ -74,3 +136,5 @@ export const usersToSandboxesRelations = relations(
     }),
   })
 )
+
+// #endregion

backend/server/.env.example

@@ -7,7 +7,6 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
-AI_WORKER_URL=
 E2B_API_KEY=
 DOKKU_HOST=
 DOKKU_USERNAME=

backend/server/package-lock.json

@@ -33,9 +33,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
-      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -111,11 +111,11 @@
       }
     },
     "node_modules/@kwsites/file-exists/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -127,9 +127,9 @@
       }
     },
     "node_modules/@kwsites/file-exists/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/@kwsites/promise-deferred": {
       "version": "1.1.1",
@@ -210,9 +210,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.5",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.5.tgz",
-      "integrity": "sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==",
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -244,17 +244,17 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.14.15",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.15.tgz",
-      "integrity": "sha512-Fz1xDMCF/B00/tYSVMlmK7hVeLh7jE5f3B7X1/hmV0MJBwE27KlS7EvD/Yp+z1lm8mVhwV5w+n8jOZG8AfTlKw==",
+      "version": "20.17.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.6.tgz",
+      "integrity": "sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==",
       "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~6.19.2"
       }
     },
     "node_modules/@types/qs": {
-      "version": "6.9.15",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz",
-      "integrity": "sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==",
+      "version": "6.9.17",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz",
+      "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==",
       "dev": true
     },
     "node_modules/@types/range-parser": {
@@ -294,14 +294,20 @@
       }
     },
     "node_modules/@types/ssh2/node_modules/@types/node": {
-      "version": "18.19.44",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.44.tgz",
-      "integrity": "sha512-ZsbGerYg72WMXUIE9fYxtvfzLEuq6q8mKERdWFnqTmOvudMxnz+CBNRoOwJ2kNpFOncrKjT1hZwxjlFgQ9qvQA==",
+      "version": "18.19.64",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.64.tgz",
+      "integrity": "sha512-955mDqvO2vFf/oL7V3WiUtiz+BugyX8uVbaT2H8oj3+8dRyH2FLiNdowe7eNqRM7IOIZvzDH76EoAT+gwm6aIQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/ssh2/node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -315,9 +321,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -327,9 +333,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.3",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
-      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
@@ -427,9 +433,9 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -439,7 +445,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -471,20 +477,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bufferutil": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
-      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/buildcheck": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.6.tgz",
@@ -656,9 +648,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -809,24 +801,24 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/engine.io": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.5.tgz",
-      "integrity": "sha512-C5Pn8Wk+1vKBoHghJODM63yk8MvrO9EWZUfkAt5HAqIgPE4/8FF0PEGHXtEd40l223+cE5ABWuPzm38PHFXfMA==",
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
+      "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
       "dependencies": {
         "@types/cookie": "^0.4.1",
         "@types/cors": "^2.8.12",
         "@types/node": ">=10.0.0",
         "accepts": "~1.3.4",
         "base64id": "2.0.0",
-        "cookie": "~0.4.1",
+        "cookie": "~0.7.2",
         "cors": "~2.8.5",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
@@ -845,19 +837,19 @@
       }
     },
     "node_modules/engine.io/node_modules/cookie": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/engine.io/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -869,29 +861,9 @@
       }
     },
     "node_modules/engine.io/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/engine.io/node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/es-define-property": {
       "version": "1.0.0",
@@ -913,9 +885,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "engines": {
         "node": ">=6"
       }
@@ -934,36 +906,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -987,12 +959,12 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -1295,9 +1267,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/methods": {
       "version": "1.1.2",
@@ -1355,9 +1330,9 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/nan": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
-      "integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==",
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.22.0.tgz",
+      "integrity": "sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==",
       "optional": true
     },
     "node_modules/negotiator": {
@@ -1368,22 +1343,10 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
-      "integrity": "sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
     "node_modules/nodemon": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.4.tgz",
-      "integrity": "sha512-wjPBbFhtpJwmIeY2yP7QF+UKzPfltVGtfce1g/bB15/8vCGZj8uxD62b/b9M9/WVgme0NZudpownKN+c0plXlQ==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz",
+      "integrity": "sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.2",
@@ -1409,12 +1372,12 @@
       }
     },
     "node_modules/nodemon/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1435,9 +1398,9 @@
       }
     },
     "node_modules/nodemon/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
     "node_modules/nodemon/node_modules/supports-color": {
@@ -1470,9 +1433,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -1519,9 +1482,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -1565,11 +1528,11 @@
       "dev": true
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -1587,9 +1550,9 @@
       }
     },
     "node_modules/rate-limiter-flexible": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/rate-limiter-flexible/-/rate-limiter-flexible-5.0.3.tgz",
-      "integrity": "sha512-lWx2y8NBVlTOLPyqs+6y7dxfEpT6YFqKy3MzWbCy95sTTOhOuxufP2QvRyOHpfXpB9OUJPbVLybw3z3AVAS5fA=="
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/rate-limiter-flexible/-/rate-limiter-flexible-5.0.4.tgz",
+      "integrity": "sha512-ftYHrIfSqWYDIJZ4yPTrgOduByAp+86gUS9iklv0JoXVM8eQCAjTnydCj1hAT4MmhmkSw86NaFEJ28m/LC1pKA=="
     },
     "node_modules/raw-body": {
       "version": "2.5.2",
@@ -1696,9 +1659,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -1718,20 +1681,28 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -1790,9 +1761,9 @@
       }
     },
     "node_modules/simple-git": {
-      "version": "3.25.0",
-      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.25.0.tgz",
-      "integrity": "sha512-KIY5sBnzc4yEcJXW7Tdv4viEz8KyG+nU0hay+DWZasvdFOYKeUZ6Xc25LUHHjw0tinPT7O1eY6pzX7pRT1K8rw==",
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.27.0.tgz",
+      "integrity": "sha512-ivHoFS9Yi9GY49ogc6/YAi3Fl9ROnF4VyubNylgCkA+RVqLaKWnDSzXOVzya8csELIaWaYNutsEuAhZrtOjozA==",
       "dependencies": {
         "@kwsites/file-exists": "^1.1.1",
         "@kwsites/promise-deferred": "^1.1.1",
@@ -1804,11 +1775,11 @@
       }
     },
     "node_modules/simple-git/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1820,9 +1791,9 @@
       }
     },
     "node_modules/simple-git/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
@@ -1837,15 +1808,15 @@
       }
     },
     "node_modules/socket.io": {
-      "version": "4.7.5",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.5.tgz",
-      "integrity": "sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
       "dependencies": {
         "accepts": "~1.3.4",
         "base64id": "~2.0.0",
         "cors": "~2.8.5",
         "debug": "~4.3.2",
-        "engine.io": "~6.5.2",
+        "engine.io": "~6.6.0",
         "socket.io-adapter": "~2.5.2",
         "socket.io-parser": "~4.2.4"
       },
@@ -1863,11 +1834,11 @@
       }
     },
     "node_modules/socket.io-adapter/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1879,29 +1850,9 @@
       }
     },
     "node_modules/socket.io-adapter/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/socket.io-adapter/node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/socket.io-parser": {
       "version": "4.2.4",
@@ -1916,11 +1867,11 @@
       }
     },
     "node_modules/socket.io-parser/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1932,16 +1883,16 @@
       }
     },
     "node_modules/socket.io-parser/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/socket.io/node_modules/debug": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1953,9 +1904,9 @@
       }
     },
     "node_modules/socket.io/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/spawn-command": {
       "version": "0.0.2",
@@ -1963,9 +1914,9 @@
       "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ=="
     },
     "node_modules/ssh2": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.15.0.tgz",
-      "integrity": "sha512-C0PHgX4h6lBxYx7hcXwu3QWdh4tg6tZZsTfXcdvc5caW/EMxaB4H9dWsl7qk+F7LAW762hp8VbXOX7x4xUYvEw==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.16.0.tgz",
+      "integrity": "sha512-r1X4KsBGedJqo7h8F5c4Ybpcr5RjyP+aWIG007uBPRjmdQWfEiVLzSK71Zji1B9sKxwaCvD8y8cwSkYrlLiRRg==",
       "hasInstallScript": true,
       "dependencies": {
         "asn1": "^0.2.6",
@@ -1975,8 +1926,8 @@
         "node": ">=10.16.0"
       },
       "optionalDependencies": {
-        "cpu-features": "~0.0.9",
-        "nan": "^2.18.0"
+        "cpu-features": "~0.0.10",
+        "nan": "^2.20.0"
       }
     },
     "node_modules/statuses": {
@@ -2121,9 +2072,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
@@ -2143,9 +2094,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -2162,9 +2113,9 @@
       "dev": true
     },
     "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
@@ -2174,20 +2125,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/utf-8-validate": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.4.tgz",
-      "integrity": "sha512-xu9GQDeFp+eZ6LnCywXN/zBancWvOpUMzgjLPSjy4BRHSmTelvn2E0DG0o1sTiw5hkCKBHo8rwSKncfRfv2EEQ==",
-      "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2232,6 +2169,26 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

backend/server/src/AIWorker.ts

@@ -1,90 +0,0 @@
-// AIWorker class for handling AI-related operations
-export class AIWorker {
-  private aiWorkerUrl: string
-  private cfAiKey: string
-  private databaseWorkerUrl: string
-  private workersKey: string
-
-  // Constructor to initialize AIWorker with necessary URLs and keys
-  constructor(
-    aiWorkerUrl: string,
-    cfAiKey: string,
-    databaseWorkerUrl: string,
-    workersKey: string
-  ) {
-    this.aiWorkerUrl = aiWorkerUrl
-    this.cfAiKey = cfAiKey
-    this.databaseWorkerUrl = databaseWorkerUrl
-    this.workersKey = workersKey
-  }
-
-  // Method to generate code based on user input
-  async generateCode(
-    userId: string,
-    fileName: string,
-    code: string,
-    line: number,
-    instructions: string
-  ): Promise<{ response: string; success: boolean }> {
-    try {
-      const fetchPromise = fetch(
-        `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `${process.env.WORKERS_KEY}`,
-          },
-          body: JSON.stringify({
-            userId: userId,
-          }),
-        }
-      )
-
-      // Generate code from cloudflare workers AI
-      const generateCodePromise = fetch(
-        `${process.env.AI_WORKER_URL}/api?fileName=${encodeURIComponent(
-          fileName
-        )}&code=${encodeURIComponent(code)}&line=${encodeURIComponent(
-          line
-        )}&instructions=${encodeURIComponent(instructions)}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `${process.env.CF_AI_KEY}`,
-          },
-        }
-      )
-
-      const [fetchResponse, generateCodeResponse] = await Promise.all([
-        fetchPromise,
-        generateCodePromise,
-      ])
-
-      if (!generateCodeResponse.ok) {
-        throw new Error(`HTTP error! status: ${generateCodeResponse.status}`)
-      }
-
-      const reader = generateCodeResponse.body?.getReader()
-      const decoder = new TextDecoder()
-      let result = ""
-
-      if (reader) {
-        while (true) {
-          const { done, value } = await reader.read()
-          if (done) break
-          result += decoder.decode(value, { stream: true })
-        }
-      }
-
-      // The result should now contain only the modified code
-      return { response: result.trim(), success: true }
-    } catch (e: any) {
-      console.error("Error generating code:", e)
-      return {
-        response: "Error generating code. Please try again.",
-        success: false,
-      }
-    }
-  }
-}

backend/server/src/DokkuClient.ts

@@ -31,9 +31,30 @@ export class DokkuClient extends SSHSocketClient {
 
   // List all deployed Dokku apps
   async listApps(): Promise<string[]> {
-    const response = await this.sendCommand("apps:list")
-    // Split the output by newline and remove the header
-    return response.output.split("\n").slice(1)
+    const response = await this.sendCommand("--quiet apps:list")
+    return response.output.split("\n")
+  }
+
+  // Get the creation timestamp of an app
+  async getAppCreatedAt(appName: string): Promise<number> {
+    const response = await this.sendCommand(
+      `apps:report --app-created-at ${appName}`
+    )
+    const createdAt = parseInt(response.output.trim(), 10)
+
+    if (isNaN(createdAt)) {
+      throw new Error(
+        `Failed to retrieve creation timestamp for app ${appName}`
+      )
+    }
+
+    return createdAt
+  }
+
+  // Check if an app exists
+  async appExists(appName: string): Promise<boolean> {
+    const response = await this.sendCommand(`apps:exists ${appName}`)
+    return response.output.includes("App") === false
   }
 }
 

backend/server/src/FileManager.ts

@@ -92,7 +92,11 @@ export class FileManager {
 
   // Convert local file path to remote path
   private getRemoteFileId(localId: string): string {
-    return `projects/${this.sandboxId}${localId}`
+    return [
+      "projects",
+      this.sandboxId,
+      localId.startsWith("/") ? localId : localId,
+    ].join("/")
   }
 
   // Convert remote file path to local file path
@@ -326,13 +330,15 @@ export class FileManager {
     if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
       throw new Error("File size too large. Please reduce the file size.")
     }
+  
+    // Save to remote storage
     await RemoteFileStorage.saveFile(this.getRemoteFileId(fileId), body)
   
+    // Update local file data cache
     let file = this.fileData.find((f) => f.id === fileId)
     if (file) {
       file.data = body
     } else {
-      // If the file wasn't in our cache, add it
       file = {
         id: fileId,
         data: body,
@@ -340,7 +346,49 @@ export class FileManager {
       this.fileData.push(file)
     }
   
-    await this.sandbox.files.write(path.posix.join(this.dirName, fileId), body)
+    // Save to sandbox filesystem
+    const filePath = path.posix.join(this.dirName, fileId)
+    await this.sandbox.files.write(filePath, body)
+  
+    // Instead of updating the entire file structure, just ensure this file exists in it
+    const parts = fileId.split('/').filter(Boolean)
+    let current = this.files
+    let currentPath = ''
+  
+    // Navigate/create the path to the file
+    for (let i = 0; i < parts.length - 1; i++) {
+      currentPath += '/' + parts[i]
+      let folder = current.find(
+        (f) => f.type === 'folder' && f.name === parts[i]
+      ) as TFolder
+      
+      if (!folder) {
+        folder = {
+          id: currentPath,
+          type: 'folder',
+          name: parts[i],
+          children: [],
+        }
+        current.push(folder)
+      }
+      current = folder.children
+    }
+  
+    // Add/update the file in the structure if it doesn't exist
+    const fileName = parts[parts.length - 1]
+    const existingFile = current.find(
+      (f) => f.type === 'file' && f.name === fileName
+    )
+    
+    if (!existingFile) {
+      current.push({
+        id: fileId,
+        type: 'file',
+        name: fileName,
+      })
+    }
+  
+    this.refreshFileList?.(this.files)
     this.fixPermissions()
   }
 

backend/server/src/SSHSocketClient.ts

@@ -13,7 +13,10 @@ export class SSHSocketClient {
   private conn: Client
   private config: SSHConfig
   private socketPath: string
-  private isConnected: boolean = false
+  private _isConnected: boolean = false
+  public get isConnected(): boolean {
+    return this._isConnected
+  }
 
   // Constructor initializes the SSH client and sets up configuration
   constructor(config: SSHConfig, socketPath: string) {
@@ -34,7 +37,7 @@ export class SSHSocketClient {
   private closeConnection() {
     console.log("Closing SSH connection...")
     this.conn.end()
-    this.isConnected = false
+    this._isConnected = false
     process.exit(0)
   }
 
@@ -44,17 +47,17 @@ export class SSHSocketClient {
       this.conn
         .on("ready", () => {
           console.log("SSH connection established")
-          this.isConnected = true
+          this._isConnected = true
           resolve()
         })
         .on("error", (err) => {
           console.error("SSH connection error:", err)
-          this.isConnected = false
+          this._isConnected = false
           reject(err)
         })
         .on("close", () => {
           console.log("SSH connection closed")
-          this.isConnected = false
+          this._isConnected = false
         })
         .connect(this.config)
     })
@@ -86,10 +89,13 @@ export class SSHSocketClient {
               )
             })
             .on("data", (data: Buffer) => {
+              // Netcat remains open until it is closed, so we close the connection once we receive data.
               resolve(data.toString())
+              stream.close()
             })
             .stderr.on("data", (data: Buffer) => {
               reject(new Error(data.toString()))
+              stream.close()
             })
         }
       )

backend/server/src/Sandbox.ts

@@ -1,6 +1,5 @@
 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"
@@ -29,7 +28,6 @@ function extractPortNumber(inputString: string): number | null {
 }
 
 type ServerContext = {
-  aiWorker: AIWorker
   dokkuClient: DokkuClient | null
   gitClient: SecureGitClient | null
 }
@@ -44,12 +42,11 @@ export class Sandbox {
   // Server context:
   dokkuClient: DokkuClient | null
   gitClient: SecureGitClient | null
-  aiWorker: AIWorker
 
   constructor(
     sandboxId: string,
     type: string,
-    { aiWorker, dokkuClient, gitClient }: ServerContext
+    { dokkuClient, gitClient }: ServerContext
   ) {
     // Sandbox properties:
     this.sandboxId = sandboxId
@@ -58,7 +55,6 @@ export class Sandbox {
     this.terminalManager = null
     this.container = null
     // Server context:
-    this.aiWorker = aiWorker
     this.dokkuClient = dokkuClient
     this.gitClient = gitClient
   }
@@ -75,7 +71,13 @@ export class Sandbox {
       } else {
         console.log("Creating container", this.sandboxId)
         // Create a new container with a specified template and timeout
-        const templateTypes = ["vanillajs", "reactjs", "nextjs", "streamlit"]
+        const templateTypes = [
+          "vanillajs",
+          "reactjs",
+          "nextjs",
+          "streamlit",
+          "php",
+        ]
         const template = templateTypes.includes(this.type)
           ? `gitwit-${this.type}`
           : `base`
@@ -154,6 +156,40 @@ export class Sandbox {
       return { success: true, apps: await this.dokkuClient.listApps() }
     }
 
+    // Handle getting app creation timestamp
+    const handleGetAppCreatedAt: SocketHandler = async ({ appName }) => {
+      if (!this.dokkuClient)
+        throw new Error(
+          "Failed to retrieve app creation timestamp: No Dokku client"
+        )
+      return {
+        success: true,
+        createdAt: await this.dokkuClient.getAppCreatedAt(appName),
+      }
+    }
+
+    // Handle checking if an app exists
+    const handleAppExists: SocketHandler = async ({ appName }) => {
+      if (!this.dokkuClient) {
+        console.log("Failed to check app existence: No Dokku client")
+        return {
+          success: false,
+        }
+      }
+      if (!this.dokkuClient.isConnected) {
+        console.log(
+          "Failed to check app existence: The Dokku client is not connected"
+        )
+        return {
+          success: false,
+        }
+      }
+      return {
+        success: true,
+        exists: await this.dokkuClient.appExists(appName),
+      }
+    }
+
     // Handle deploying code
     const handleDeploy: SocketHandler = async (_: any) => {
       if (!this.gitClient) throw Error("No git client")
@@ -234,22 +270,6 @@ export class Sandbox {
       return this.terminalManager?.closeTerminal(id)
     }
 
-    // Handle generating code
-    const handleGenerateCode: SocketHandler = ({
-      fileName,
-      code,
-      line,
-      instructions,
-    }: any) => {
-      return this.aiWorker.generateCode(
-        connection.userId,
-        fileName,
-        code,
-        line,
-        instructions
-      )
-    }
-
     // Handle downloading files by download button
     const handleDownloadFiles: SocketHandler = async () => {
       if (!this.fileManager) throw Error("No file manager")
@@ -267,7 +287,9 @@ export class Sandbox {
       getFolder: handleGetFolder,
       saveFile: handleSaveFile,
       moveFile: handleMoveFile,
-      list: handleListApps,
+      listApps: handleListApps,
+      getAppCreatedAt: handleGetAppCreatedAt,
+      getAppExists: handleAppExists,
       deploy: handleDeploy,
       createFile: handleCreateFile,
       createFolder: handleCreateFolder,
@@ -278,7 +300,6 @@ export class Sandbox {
       resizeTerminal: handleResizeTerminal,
       terminalData: handleTerminalData,
       closeTerminal: handleCloseTerminal,
-      generateCode: handleGenerateCode,
     }
   }
 }

backend/server/src/index.ts

@@ -4,7 +4,6 @@ import express, { Express } from "express"
 import fs from "fs"
 import { createServer } from "http"
 import { Server, Socket } from "socket.io"
-import { AIWorker } from "./AIWorker"
 
 import { ConnectionManager } from "./ConnectionManager"
 import { DokkuClient } from "./DokkuClient"
@@ -80,14 +79,6 @@ const gitClient =
       )
     : null
 
-// Add this near the top of the file, after other initializations
-const aiWorker = new AIWorker(
-  process.env.AI_WORKER_URL!,
-  process.env.CF_AI_KEY!,
-  process.env.DATABASE_WORKER_URL!,
-  process.env.WORKERS_KEY!
-)
-
 // Handle a client connecting to the server
 io.on("connection", async (socket) => {
   try {
@@ -113,7 +104,6 @@ io.on("connection", async (socket) => {
       const sandbox =
         sandboxes[data.sandboxId] ??
         new Sandbox(data.sandboxId, data.type, {
-          aiWorker,
           dokkuClient,
           gitClient,
         })
@@ -156,6 +146,8 @@ io.on("connection", async (socket) => {
         )
       })
 
+      socket.emit("ready")
+
       // Handle disconnection event
       socket.on("disconnect", async () => {
         try {

frontend/.env.example

@@ -3,18 +3,21 @@ CLERK_SECRET_KEY=
 NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
 LIVEBLOCKS_SECRET_KEY=
 
-NEXT_PUBLIC_SERVER_URL=http://localhost:4000
+NEXT_PUBLIC_SERVER_PORT=4000
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:4000
+NEXT_PUBLIC_SERVER_URL=http://localhost:4000
 
 # Set WORKER_URLs after deploying the workers.
 # Set NEXT_PUBLIC_WORKERS_KEY to be the same as KEY in /backend/storage/wrangler.toml.
-# These URLs should begin with https:// in production
-NEXT_PUBLIC_DATABASE_WORKER_URL=
-NEXT_PUBLIC_STORAGE_WORKER_URL=
-NEXT_PUBLIC_AI_WORKER_URL=
-NEXT_PUBLIC_WORKERS_KEY=
+NEXT_PUBLIC_DATABASE_WORKER_URL=https://database.your-worker.workers.dev
+NEXT_PUBLIC_STORAGE_WORKER_URL=https://storage.your-worker.workers.dev
+NEXT_PUBLIC_WORKERS_KEY=SUPERDUPERSECRET
 
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
+
+ANTHROPIC_API_KEY=
+OPENAI_API_KEY=

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

@@ -91,23 +91,17 @@ export default async function CodePage({ params }: { params: { id: string } }) {
   }
 
   return (
-    <>
-      <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-        {/* <Room id={sandboxId}> */}
     <TerminalProvider>
+      {/* <Room id={sandboxId}> */}
+      <div className="overflow-hidden overscroll-none w-screen h-screen grid [grid-template-rows:3.5rem_auto] bg-background">
         <Navbar
           userData={userData}
           sandboxData={sandboxData}
-              shared={
-                shared as { id: string; name: string; avatarUrl: string }[]
-              }
+          shared={shared as { id: string; name: string; avatarUrl: string }[]}
         />
-            <div className="w-screen flex grow">
         <CodeEditor userData={userData} sandboxData={sandboxData} />
       </div>
-          </TerminalProvider>
       {/* </Room> */}
-      </div>
-    </>
+    </TerminalProvider>
   )
 }

frontend/app/[username]/page.tsx

@@ -0,0 +1,65 @@
+import ProfilePage from "@/components/profile"
+import ProfileNavbar from "@/components/profile/navbar"
+import { SandboxWithLiked, User } from "@/lib/types"
+import { currentUser } from "@clerk/nextjs"
+import { notFound } from "next/navigation"
+
+export default async function Page({
+  params: { username: rawUsername },
+}: {
+  params: { username: string }
+}) {
+  const username = decodeURIComponent(rawUsername).replace("@", "")
+  const loggedInClerkUser = await currentUser()
+
+  const [profileOwnerResponse, loggedInUserResponse] = await Promise.all([
+    fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?username=${username}&currentUserId=${loggedInClerkUser?.id}`,
+      {
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+        },
+      }
+    ),
+    fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${loggedInClerkUser?.id}`,
+      {
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+        },
+      }
+    ),
+  ])
+
+  const profileOwner = (await profileOwnerResponse.json()) as User
+  const loggedInUser = (await loggedInUserResponse.json()) as User
+
+  if (!Boolean(profileOwner?.id)) {
+    notFound()
+  }
+  const publicSandboxes: SandboxWithLiked[] = []
+  const privateSandboxes: SandboxWithLiked[] = []
+
+  profileOwner?.sandbox?.forEach((sandbox) => {
+    if (sandbox.visibility === "public") {
+      publicSandboxes.push(sandbox as SandboxWithLiked)
+    } else if (sandbox.visibility === "private") {
+      privateSandboxes.push(sandbox as SandboxWithLiked)
+    }
+  })
+
+  const isUserLoggedIn = Boolean(loggedInUser?.id)
+  return (
+    <section>
+      <ProfileNavbar userData={loggedInUser} />
+      <ProfilePage
+        publicSandboxes={publicSandboxes}
+        privateSandboxes={
+          profileOwner?.id === loggedInUser.id ? privateSandboxes : []
+        }
+        profileOwner={profileOwner}
+        loggedInUser={isUserLoggedIn ? loggedInUser : null}
+      />
+    </section>
+  )
+}

frontend/app/api/ai/route.ts

@@ -0,0 +1,237 @@
+import {
+  ignoredFiles,
+  ignoredFolders,
+} from "@/components/editor/AIChat/lib/ignored-paths"
+import { templateConfigs } from "@/lib/templates"
+import { TIERS } from "@/lib/tiers"
+import { TFile, TFolder } from "@/lib/types"
+import { Anthropic } from "@anthropic-ai/sdk"
+import { currentUser } from "@clerk/nextjs"
+
+const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY!,
+})
+
+// Format file structure for context
+function formatFileStructure(
+  items: (TFile | TFolder)[] | undefined,
+  prefix = ""
+): string {
+  if (!items || !Array.isArray(items)) {
+    return "No files available"
+  }
+
+  // Sort items to show folders first, then files
+  const sortedItems = [...items].sort((a, b) => {
+    if (a.type === b.type) return a.name.localeCompare(b.name)
+    return a.type === "folder" ? -1 : 1
+  })
+
+  return sortedItems
+    .map((item) => {
+      if (
+        item.type === "file" &&
+        !ignoredFiles.some(
+          (pattern) =>
+            item.name.endsWith(pattern.replace("*", "")) ||
+            item.name === pattern
+        )
+      ) {
+        return `${prefix}├── ${item.name}`
+      } else if (
+        item.type === "folder" &&
+        !ignoredFolders.some((folder) => folder === item.name)
+      ) {
+        const folderContent = formatFileStructure(
+          item.children,
+          `${prefix}│   `
+        )
+        return `${prefix}├── ${item.name}/\n${folderContent}`
+      }
+      return null
+    })
+    .filter(Boolean)
+    .join("\n")
+}
+
+export async function POST(request: Request) {
+  try {
+    const user = await currentUser()
+    if (!user) {
+      return new Response("Unauthorized", { status: 401 })
+    }
+
+    // Check and potentially reset monthly usage
+    const resetResponse = await fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/check-reset`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ userId: user.id }),
+      }
+    )
+
+    if (!resetResponse.ok) {
+      console.error("Failed to check usage reset")
+    }
+
+    // Get user data and check tier
+    const dbUser = await fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${user.id}`,
+      {
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+        },
+      }
+    )
+    const userData = await dbUser.json()
+
+    // Get tier settings
+    const tierSettings =
+      TIERS[userData.tier as keyof typeof TIERS] || TIERS.FREE
+    if (userData.generations >= tierSettings.generations) {
+      return new Response(
+        `AI generation limit reached for your ${userData.tier || "FREE"} tier`,
+        { status: 429 }
+      )
+    }
+
+    const {
+      messages,
+      context,
+      activeFileContent,
+      isEditMode,
+      fileName,
+      line,
+      templateType,
+      files,
+      projectName,
+    } = await request.json()
+
+    // Get template configuration
+    const templateConfig = templateConfigs[templateType]
+
+    // Create template context
+    const templateContext = templateConfig
+      ? `
+Project Template: ${templateConfig.name}
+
+Current File Structure:
+${files ? formatFileStructure(files) : "No files available"}
+
+Conventions:
+${templateConfig.conventions.join("\n")}
+
+Dependencies:
+${JSON.stringify(templateConfig.dependencies, null, 2)}
+
+Scripts:
+${JSON.stringify(templateConfig.scripts, null, 2)}
+`
+      : ""
+
+    // Create system message based on mode
+    let systemMessage
+    if (isEditMode) {
+      systemMessage = `You are an AI code editor working in a ${templateType} project. 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. If there is no code to modify, refer to the active file content and only output the code that is relevant to the user's instructions.
+
+${templateContext}
+
+File: ${fileName}
+Line: ${line}
+
+Context:
+${context || "No additional context provided"}
+
+Active File Content:
+${activeFileContent}
+
+Instructions: ${messages[0].content}
+
+Respond only with the modified code that can directly replace the existing code.`
+    } else {
+      systemMessage = `You are an intelligent programming assistant for a ${templateType} project. Please respond to the following request concisely. When providing code:
+
+1. Format it using triple backticks (\`\`\`) with the appropriate language identifier.
+2. Always specify the complete file path in the format:
+   ${projectName}/filepath/to/file.ext
+
+3. If creating a new file, specify the path as:
+   ${projectName}/filepath/to/file.ext (new file)
+
+4. Format your code blocks as:
+
+${projectName}/filepath/to/file.ext
+\`\`\`language
+code here
+\`\`\`
+
+If multiple files are involved, repeat the format for each file. Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
+
+This is the project template:
+${templateContext}
+
+${context ? `Context:\n${context}\n` : ""}
+${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
+    }
+
+    // Create stream response
+    const stream = await anthropic.messages.create({
+      model: tierSettings.model,
+      max_tokens: tierSettings.maxTokens,
+      system: systemMessage,
+      messages: messages.map((msg: { role: string; content: string }) => ({
+        role: msg.role === "human" ? "user" : "assistant",
+        content: msg.content,
+      })),
+      stream: true,
+    })
+
+    // Increment user's generation count
+    await fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/increment-generations`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ userId: user.id }),
+      }
+    )
+
+    // Return streaming response
+    const encoder = new TextEncoder()
+    return new Response(
+      new ReadableStream({
+        async start(controller) {
+          for await (const chunk of stream) {
+            if (
+              chunk.type === "content_block_delta" &&
+              chunk.delta.type === "text_delta"
+            ) {
+              controller.enqueue(encoder.encode(chunk.delta.text))
+            }
+          }
+          controller.close()
+        },
+      }),
+      {
+        headers: {
+          "Content-Type": "text/plain; charset=utf-8",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+        },
+      }
+    )
+  } catch (error) {
+    console.error("AI generation error:", error)
+    return new Response(
+      error instanceof Error ? error.message : "Internal Server Error",
+      { status: 500 }
+    )
+  }
+}

frontend/app/api/merge/route.ts

@@ -0,0 +1,69 @@
+import OpenAI from "openai"
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+
+export async function POST(request: Request) {
+  try {
+    const { originalCode, newCode, fileName } = await request.json()
+
+    const systemPrompt = `You are a code merging assistant. Your task is to merge the new code snippet with the original file content while:
+1. Preserving the original file's functionality
+2. Ensuring proper integration of the new code
+3. Maintaining consistent style and formatting
+4. Resolving any potential conflicts
+5. Output ONLY the raw code without any:
+   - Code fence markers (\`\`\`)
+   - Language identifiers (typescript, javascript, etc.)
+   - Explanations or comments
+   - Markdown formatting
+
+The output should be the exact code that will replace the existing code, nothing more and nothing less.
+
+Important: When merging, preserve the original code structure as much as possible. Only make necessary changes to integrate the new code while maintaining the original code's organization and style.`
+
+    const mergedCode = `Original file (${fileName}):\n${originalCode}\n\nNew code to merge:\n${newCode}`
+
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o",
+      messages: [
+        { role: "system", content: systemPrompt },
+        { role: "user", content: mergedCode },
+      ],
+      prediction: {
+        type: "content",
+        content: mergedCode,
+      },
+      stream: true,
+    })
+
+    // Clean and stream response
+    const encoder = new TextEncoder()
+    return new Response(
+      new ReadableStream({
+        async start(controller) {
+          let buffer = ""
+          for await (const chunk of response) {
+            if (chunk.choices[0]?.delta?.content) {
+              buffer += chunk.choices[0].delta.content
+              // Clean any code fence markers that might appear in the stream
+              const cleanedContent = buffer
+                .replace(/^```[\w-]*\n|```\s*$/gm, "") // Remove code fences
+                .replace(/^(javascript|typescript|python|html|css)\n/gm, "") // Remove language identifiers
+              controller.enqueue(encoder.encode(cleanedContent))
+              buffer = ""
+            }
+          }
+          controller.close()
+        },
+      })
+    )
+  } catch (error) {
+    console.error("Merge error:", error)
+    return new Response(
+      error instanceof Error ? error.message : "Failed to merge code",
+      { status: 500 }
+    )
+  }
+}

frontend/app/api/user/upgrade-tier/route.ts

@@ -0,0 +1,42 @@
+import { currentUser } from "@clerk/nextjs"
+
+export async function POST(request: Request) {
+  try {
+    const user = await currentUser()
+    if (!user) {
+      return new Response("Unauthorized", { status: 401 })
+    }
+
+    const { tier } = await request.json()
+
+    // handle payment processing here
+
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/update-tier`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          userId: user.id,
+          tier,
+          tierExpiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days
+        }),
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error("Failed to upgrade tier")
+    }
+
+    return new Response("Tier upgraded successfully")
+  } catch (error) {
+    console.error("Tier upgrade error:", error)
+    return new Response(
+      error instanceof Error ? error.message : "Internal Server Error",
+      { status: 500 }
+    )
+  }
+}

frontend/app/globals.css

@@ -102,26 +102,27 @@
 .light .gradient-button-bg {
   background: radial-gradient(
     circle at top,
-    #262626 0%,
-    #f5f5f5 50%
-  ); /* Dark gray -> Light gray */
+    #f5f5f5 0%,
+    /* Very light gray */ #e0e0e0 50% /* Soft gray */
+  );
 }
 
 .light .gradient-button {
   background: radial-gradient(
     circle at bottom,
-    hsl(0, 10%, 25%) -10%,
-    #9d9d9d 50%
-  ); /* Light gray -> Almost white */
+    hsl(0, 0%, 85%) -10%,
+    /* Slightly darker gray */ hsl(0, 0%, 95%) 50% /* Very soft light gray */
+  );
 }
 
 .light .gradient-button-bg > div:hover {
   background: radial-gradient(
     circle at bottom,
-    hsl(0, 10%, 25%) -10%,
-    #9d9d9d 80%
-  ); /* Light gray -> Almost white */
+    hsl(0, 0%, 80%) -10%,
+    /* Slightly darker gray for hover */ hsl(0, 0%, 90%) 80% /* Softer gray */
+  );
 }
+
 .inline-decoration::before {
   content: "Generate";
   color: #525252;
@@ -175,3 +176,23 @@
 .tab-scroll::-webkit-scrollbar {
   display: none;
 }
+
+.added-line-decoration {
+  background-color: rgba(0, 255, 0, 0.1);
+}
+
+.removed-line-decoration {
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+.added-line-glyph {
+  background-color: #28a745;
+  width: 4px !important;
+  margin-left: 3px;
+}
+
+.removed-line-glyph {
+  background-color: #dc3545;
+  width: 4px !important;
+  margin-left: 3px;
+}

frontend/app/layout.tsx

@@ -11,7 +11,22 @@ import "./globals.css"
 
 export const metadata: Metadata = {
   title: "Sandbox",
-  description: "A collaborative, AI-powered cloud code editing environment",
+  description:
+    "an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration, and AI chat",
+  openGraph: {
+    type: "website",
+    url: "https://sandbox.gitwit.dev",
+    title: "Sandbox",
+    description:
+      "an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration, and AI chat",
+  },
+  twitter: {
+    site: "https://sandbox.gitwit.dev",
+    title: "Sandbox by Gitwit",
+    description:
+      "an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration, and AI chat",
+    creator: "@gitwitdev",
+  },
 }
 
 export default function RootLayout({

frontend/app/opengraph-image.alt.txt

@@ -0,0 +1 @@
+About Sandbox by Gitwit

frontend/components/dashboard/navbar/index.tsx

@@ -8,15 +8,20 @@ import DashboardNavbarSearch from "./search"
 
 export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
-    <div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
-      <div className="flex items-center space-x-4">
+    <div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-2">
         <Link
           href="/"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Image src={Logo} alt="Logo" width={36} height={36} />
         </Link>
-        <div className="text-sm font-medium flex items-center">Sandbox</div>
+        <h1 className="text-xl">
+          <span className="font-semibold">Sandbox</span>{" "}
+          <span className="text-xs font-medium text-muted-foreground">
+            by gitwit
+          </span>
+        </h1>
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -11,13 +11,13 @@ import {
 } from "@/components/ui/dropdown-menu"
 
 export default function ProjectCardDropdown({
-  sandbox,
+  visibility,
   onVisibilityChange,
   onDelete,
 }: {
-  sandbox: Sandbox
-  onVisibilityChange: (sandbox: Sandbox) => void
-  onDelete: (sandbox: Sandbox) => void
+  visibility: Sandbox["visibility"]
+  onVisibilityChange: () => void
+  onDelete: () => void
 }) {
   return (
     <DropdownMenu modal={false}>
@@ -26,7 +26,7 @@ export default function ProjectCardDropdown({
           e.preventDefault()
           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"
+        className="h-6 w-6 z-10 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
       >
         <Ellipsis className="w-4 h-4" />
       </DropdownMenuTrigger>
@@ -34,11 +34,11 @@ export default function ProjectCardDropdown({
         <DropdownMenuItem
           onClick={(e) => {
             e.stopPropagation()
-            onVisibilityChange(sandbox)
+            onVisibilityChange()
           }}
           className="cursor-pointer"
         >
-          {sandbox.visibility === "public" ? (
+          {visibility === "public" ? (
             <>
               <Lock className="mr-2 h-4 w-4" />
               <span>Make Private</span>
@@ -53,7 +53,7 @@ export default function ProjectCardDropdown({
         <DropdownMenuItem
           onClick={(e) => {
             e.stopPropagation()
-            onDelete(sandbox)
+            onDelete()
           }}
           className="!text-destructive cursor-pointer"
         >

frontend/components/dashboard/projectCard/index.tsx

@@ -1,59 +1,235 @@
 "use client"
 
+import { Button } from "@/components/ui/button"
 import { Card } from "@/components/ui/card"
+import { toggleLike } from "@/lib/actions"
 import { projectTemplates } from "@/lib/data"
 import { Sandbox } from "@/lib/types"
+import { cn } from "@/lib/utils"
+import { useUser } from "@clerk/nextjs"
 import { AnimatePresence, motion } from "framer-motion"
-import { Clock, Globe, Lock } from "lucide-react"
+import { Clock, Eye, Globe, Heart, Lock } from "lucide-react"
 import Image from "next/image"
+import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import {
+  memo,
+  MouseEventHandler,
+  useEffect,
+  useMemo,
+  useOptimistic,
+  useState,
+  useTransition,
+} from "react"
 import ProjectCardDropdown from "./dropdown"
+import { CanvasRevealEffect } from "./revealEffect"
 
-export default function ProjectCard({
-  children,
-  sandbox,
-  onVisibilityChange,
-  onDelete,
-  deletingId,
-}: {
-  children?: React.ReactNode
-  sandbox: Sandbox
-  onVisibilityChange: (sandbox: Sandbox) => void
-  onDelete: (sandbox: Sandbox) => void
+type BaseProjectCardProps = {
+  id: string
+  name: string
+  type: string
+  visibility: "public" | "private"
+  createdAt: Date
+  likeCount: number
+  liked?: boolean
+  viewCount: number
+}
+
+type AuthenticatedProjectCardProps = BaseProjectCardProps & {
+  isAuthenticated: true
+  onVisibilityChange: (
+    sandbox: Pick<Sandbox, "id" | "name" | "visibility">
+  ) => void
+  onDelete: (sandbox: Pick<Sandbox, "id" | "name">) => void
   deletingId: string
-}) {
-  const [hovered, setHovered] = useState(false)
-  const [date, setDate] = useState<string>()
-  const router = useRouter()
+}
 
-  useEffect(() => {
-    const createdAt = new Date(sandbox.createdAt)
+type UnauthenticatedProjectCardProps = BaseProjectCardProps & {
+  isAuthenticated: false
+}
+
+type ProjectCardProps =
+  | AuthenticatedProjectCardProps
+  | UnauthenticatedProjectCardProps
+
+const StatItem = memo(({ icon: Icon, value }: { icon: any; value: number }) => (
+  <div className="flex items-center space-x-1">
+    <Icon className="size-4" />
+    <span className="text-xs">{value}</span>
+  </div>
+))
+
+StatItem.displayName = "StatItem"
+
+const formatDate = (date: Date): string => {
   const now = new Date()
-    const diffInMinutes = Math.floor(
-      (now.getTime() - createdAt.getTime()) / 60000
+  const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / 60000)
+
+  if (diffInMinutes < 1) return "Now"
+  if (diffInMinutes < 60) return `${diffInMinutes}m ago`
+  if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`
+  return `${Math.floor(diffInMinutes / 1440)}d ago`
+}
+
+const ProjectMetadata = memo(
+  ({
+    id,
+    visibility,
+    createdAt,
+    likeCount,
+    liked,
+    viewCount,
+  }: Pick<
+    BaseProjectCardProps,
+    "visibility" | "createdAt" | "likeCount" | "liked" | "viewCount" | "id"
+  >) => {
+    const { user } = useUser()
+    const [date, setDate] = useState<string>()
+    const Icon = visibility === "private" ? Lock : Globe
+    useEffect(() => {
+      setDate(formatDate(new Date(createdAt)))
+    }, [createdAt])
+
+    return (
+      <div className="flex flex-col text-muted-foreground space-y-2 text-sm z-10">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Icon className="size-4" />
+            <span className="text-xs">
+              {visibility === "private" ? "Private" : "Public"}
+            </span>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <div className="flex items-center gap-2">
+            <Clock className="size-4" /> <span className="text-xs">{date}</span>
+          </div>
+          <LikeButton
+            sandboxId={id}
+            initialIsLiked={!!liked}
+            initialLikeCount={likeCount}
+            userId={user?.id ?? null}
+          />
+          <StatItem icon={Eye} value={viewCount} />
+        </div>
+      </div>
+    )
+  }
+)
+
+ProjectMetadata.displayName = "ProjectMetadata"
+
+interface LikeButtonProps {
+  sandboxId: string
+  userId: string | null
+  initialLikeCount: number
+  initialIsLiked: boolean
+}
+
+export function LikeButton({
+  sandboxId,
+  userId,
+  initialLikeCount,
+  initialIsLiked,
+}: LikeButtonProps) {
+  // Optimistic state for like status and count
+  const [{ isLiked, likeCount }, optimisticUpdateLike] = useOptimistic(
+    { isLiked: initialIsLiked, likeCount: initialLikeCount },
+    (state, optimisticValue: boolean) => {
+      return {
+        isLiked: optimisticValue,
+        likeCount: state.likeCount + (optimisticValue ? 1 : -1),
+      }
+    }
   )
 
-    if (diffInMinutes < 1) {
-      setDate("Now")
-    } else if (diffInMinutes < 60) {
-      setDate(`${diffInMinutes}m ago`)
-    } else if (diffInMinutes < 1440) {
-      setDate(`${Math.floor(diffInMinutes / 60)}h ago`)
-    } else {
-      setDate(`${Math.floor(diffInMinutes / 1440)}d ago`)
+  const [isPending, startTransition] = useTransition()
+
+  const handleLike: MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.stopPropagation() // Prevent click event from bubbling up which leads to navigation to /code/:id
+    if (!userId) return
+
+    startTransition(async () => {
+      const newLikeState = !isLiked
+      try {
+        optimisticUpdateLike(newLikeState)
+        await toggleLike(sandboxId, userId)
+      } catch (error) {
+        console.log("error", error)
+        optimisticUpdateLike(!newLikeState)
       }
-  }, [sandbox])
-  const projectIcon =
-    projectTemplates.find((p) => p.id === sandbox.type)?.icon ??
-    "/project-icons/node.svg"
+    })
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      disabled={!userId || isPending}
+      onClick={handleLike}
+      className="gap-1 px-1 rounded-full"
+    >
+      <Heart
+        className={cn("size-4", isLiked ? "stroke-red-500 fill-red-500" : "")}
+      />
+      <span className="text-xs">{likeCount}</span>
+    </Button>
+  )
+}
+function ProjectCardComponent({
+  id,
+  name,
+  type,
+  visibility,
+  createdAt,
+  likeCount,
+  viewCount,
+  ...props
+}: ProjectCardProps) {
+  const [hovered, setHovered] = useState(false)
+  const router = useRouter()
+
+  const projectIcon = useMemo(
+    () =>
+      projectTemplates.find((p) => p.id === type)?.icon ??
+      "/project-icons/node.svg",
+    [type]
+  )
+
+  const handleVisibilityChange = () => {
+    if (props.isAuthenticated) {
+      props.onVisibilityChange({
+        id,
+        name,
+        visibility,
+      })
+    }
+  }
+
+  const handleDelete = () => {
+    if (props.isAuthenticated) {
+      props.onDelete({
+        id,
+        name,
+      })
+    }
+  }
+
   return (
     <Card
       tabIndex={0}
-      onClick={() => router.push(`/code/${sandbox.id}`)}
+      onClick={() => router.push(`/code/${id}`)}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      className={`group/canvas-card p-4 h-48 flex flex-col justify-between items-start hover:border-muted-foreground/50 relative overflow-hidden transition-all`}
+      className={`
+        group/canvas-card p-4 h-48 flex flex-col justify-between items-start 
+        hover:border-muted-foreground/50 relative overflow-hidden transition-all
+        ${
+          props.isAuthenticated && props.deletingId === id
+            ? "opacity-50 pointer-events-none cursor-events-none"
+            : "cursor-pointer"
+        }
+      `}
     >
       <AnimatePresence>
         {hovered && (
@@ -62,38 +238,64 @@ export default function ProjectCard({
             animate={{ opacity: 1 }}
             className="h-full w-full absolute inset-0"
           >
-            {children}
+            <CanvasRevealEffect
+              animationSpeed={3}
+              containerClassName="bg-muted"
+              colors={colors[type]}
+              dotSize={2}
+            />
+            <div className="absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-background/75" />
           </motion.div>
         )}
       </AnimatePresence>
 
       <div className="space-x-2 flex items-center justify-start w-full z-10">
-        <Image alt="" src={projectIcon} width={20} height={20} />
-        <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
-          {sandbox.name}
-        </div>
-        <ProjectCardDropdown
-          sandbox={sandbox}
-          onVisibilityChange={onVisibilityChange}
-          onDelete={onDelete}
+        <Image
+          alt={`${type} project icon`}
+          src={projectIcon}
+          width={20}
+          height={20}
+        />
+        <Link
+          href={`/code/${id}`}
+          className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden before:content-[''] before:absolute before:z-0 before:top-0 before:left-0 before:w-full before:h-full before:rounded-xl"
+        >
+          {name}
+        </Link>
+        {props.isAuthenticated && (
+          <ProjectCardDropdown
+            onVisibilityChange={handleVisibilityChange}
+            onDelete={handleDelete}
+            visibility={visibility}
           />
-      </div>
-      <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm z-10">
-        <div className="flex items-center">
-          {sandbox.visibility === "private" ? (
-            <>
-              <Lock className="w-3 h-3 mr-2" /> Private
-            </>
-          ) : (
-            <>
-              <Globe className="w-3 h-3 mr-2" /> Public
-            </>
         )}
       </div>
-        <div className="flex items-center">
-          <Clock className="w-3 h-3 mr-2" /> {date}
-        </div>
-      </div>
+
+      <ProjectMetadata
+        visibility={visibility}
+        createdAt={createdAt}
+        likeCount={likeCount}
+        viewCount={viewCount}
+        id={id}
+        liked={props.liked}
+      />
     </Card>
   )
 }
+
+ProjectCardComponent.displayName = "ProjectCard"
+
+const ProjectCard = memo(ProjectCardComponent)
+
+export default ProjectCard
+
+const colors: { [key: string]: number[][] } = {
+  react: [
+    [71, 207, 237],
+    [30, 126, 148],
+  ],
+  node: [
+    [86, 184, 72],
+    [59, 112, 52],
+  ],
+}

frontend/components/dashboard/projects.tsx

@@ -2,11 +2,9 @@
 
 import { deleteSandbox, updateSandbox } from "@/lib/actions"
 import { Sandbox } from "@/lib/types"
-import Link from "next/link"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 import ProjectCard from "./projectCard"
-import { CanvasRevealEffect } from "./projectCard/revealEffect"
 
 const colors: { [key: string]: number[][] } = {
   react: [
@@ -28,11 +26,27 @@ export default function DashboardProjects({
 }) {
   const [deletingId, setDeletingId] = useState<string>("")
 
-  const onDelete = async (sandbox: Sandbox) => {
+  const onVisibilityChange = useMemo(
+    () => async (sandbox: Pick<Sandbox, "id" | "name" | "visibility">) => {
+      const newVisibility =
+        sandbox.visibility === "public" ? "private" : "public"
+      toast(`Project ${sandbox.name} is now ${newVisibility}.`)
+      await updateSandbox({
+        id: sandbox.id,
+        visibility: newVisibility,
+      })
+    },
+    []
+  )
+
+  const onDelete = useMemo(
+    () => async (sandbox: Pick<Sandbox, "id" | "name">) => {
       setDeletingId(sandbox.id)
       toast(`Project ${sandbox.name} deleted.`)
       await deleteSandbox(sandbox.id)
-  }
+    },
+    []
+  )
 
   useEffect(() => {
     if (deletingId) {
@@ -40,15 +54,6 @@ export default function DashboardProjects({
     }
   }, [sandboxes])
 
-  const onVisibilityChange = async (sandbox: Sandbox) => {
-    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
-    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
-    await updateSandbox({
-      id: sandbox.id,
-      visibility: newVisibility,
-    })
-  }
-
   return (
     <div className="grow p-4 flex flex-col">
       <div className="text-xl font-medium mb-8">
@@ -64,30 +69,14 @@ export default function DashboardProjects({
                 }
               }
               return (
-                <Link
-                  key={sandbox.id}
-                  href={`/code/${sandbox.id}`}
-                  className={`${
-                    deletingId === sandbox.id
-                      ? "pointer-events-none opacity-50 cursor-events-none"
-                      : "cursor-pointer"
-                  } transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg`}
-                >
                 <ProjectCard
-                    sandbox={sandbox}
+                  key={sandbox.id}
                   onVisibilityChange={onVisibilityChange}
                   onDelete={onDelete}
                   deletingId={deletingId}
-                  >
-                    <CanvasRevealEffect
-                      animationSpeed={3}
-                      containerClassName="bg-black"
-                      colors={colors[sandbox.type]}
-                      dotSize={2}
+                  isAuthenticated
+                  {...sandbox}
                 />
-                    <div className="absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-background/75" />
-                  </ProjectCard>
-                </Link>
               )
             })}
           </div>

frontend/components/editor/AIChat/ApplyButton.tsx

@@ -0,0 +1,77 @@
+import { Check, Loader2 } from "lucide-react"
+import { useState } from "react"
+import { toast } from "sonner"
+import { Button } from "../../ui/button"
+
+interface ApplyButtonProps {
+  code: string
+  activeFileName: string
+  activeFileContent: string
+  editorRef: { current: any }
+  onApply: (mergedCode: string, originalCode: string) => void
+}
+
+export default function ApplyButton({
+  code,
+  activeFileName,
+  activeFileContent,
+  editorRef,
+  onApply,
+}: ApplyButtonProps) {
+  const [isApplying, setIsApplying] = useState(false)
+
+  const handleApply = async () => {
+    setIsApplying(true)
+    try {
+      const response = await fetch("/api/merge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          originalCode: activeFileContent,
+          newCode: String(code),
+          fileName: activeFileName,
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error(await response.text())
+      }
+
+      const reader = response.body?.getReader()
+      const decoder = new TextDecoder()
+      let mergedCode = ""
+
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          mergedCode += decoder.decode(value, { stream: true })
+        }
+      }
+      onApply(mergedCode.trim(), activeFileContent)
+    } catch (error) {
+      console.error("Error applying code:", error)
+      toast.error(
+        error instanceof Error ? error.message : "Failed to apply code changes"
+      )
+    } finally {
+      setIsApplying(false)
+    }
+  }
+
+  return (
+    <Button
+      onClick={handleApply}
+      size="sm"
+      variant="ghost"
+      className="p-1 h-6"
+      disabled={isApplying}
+    >
+      {isApplying ? (
+        <Loader2 className="w-4 h-4 animate-spin" />
+      ) : (
+        <Check className="w-4 h-4" />
+      )}
+    </Button>
+  )
+}

frontend/components/editor/AIChat/ChatMessage.tsx

@@ -13,6 +13,13 @@ export default function ChatMessage({
   setContext,
   setIsContextExpanded,
   socket,
+  handleApplyCode,
+  activeFileName,
+  activeFileContent,
+  editorRef,
+  mergeDecorationsCollection,
+  setMergeDecorationsCollection,
+  selectFile,
 }: MessageProps) {
   // State for expanded message index
   const [expandedMessageIndex, setExpandedMessageIndex] = useState<
@@ -104,7 +111,14 @@ export default function ChatMessage({
   const components = createMarkdownComponents(
     renderCopyButton,
     renderMarkdownElement,
-    askAboutCode
+    askAboutCode,
+    activeFileName,
+    activeFileContent,
+    editorRef,
+    handleApplyCode,
+    selectFile,
+    mergeDecorationsCollection,
+    setMergeDecorationsCollection,
   )
 
   return (
@@ -112,8 +126,8 @@ export default function ChatMessage({
       <div
         className={`relative p-2 rounded-lg ${
           message.role === "user"
-            ? "bg-[#262626] text-white"
-            : "bg-transparent text-white"
+            ? "bg-foreground text-background"
+            : "bg-background text-foreground"
         } max-w-full`}
       >
         {/* Render context tabs */}
@@ -157,7 +171,7 @@ export default function ChatMessage({
                             end: e.target.value.split("\n").length,
                           })
                         }}
-                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
+                        className="w-full p-2 bg-[#1e1e1e] text-foreground font-mono text-sm rounded"
                         rows={code.split("\n").length}
                         style={{
                           resize: "vertical",
@@ -201,7 +215,8 @@ export default function ChatMessage({
 
 // Parse context to tabs for context tabs component
 function parseContextToTabs(context: string) {
-  const sections = context.split(/(?=File |Code from )/)
+  // Use specific regex patterns to avoid matching import statements
+  const sections = context.split(/(?=File |Code from |Image \d{1,2}:)/)
   return sections
     .map((section, index) => {
       const lines = section.trim().split("\n")
@@ -211,16 +226,29 @@ function parseContextToTabs(context: string) {
       // Remove code block markers for display
       content = content.replace(/^```[\w-]*\n/, "").replace(/\n```$/, "")
 
-      // Determine if the context is a file or code
+      // Determine the type of context
       const isFile = titleLine.startsWith("File ")
-      const name = titleLine.replace(/^(File |Code from )/, "").replace(":", "")
+      const isImage = titleLine.startsWith("Image ")
+      const type = isFile ? "file" : isImage ? "image" : "code"
+      const name = titleLine
+        .replace(/^(File |Code from |Image )/, "")
+        .replace(":", "")
+        .trim()
+
+      // Skip if the content is empty or if it's just an import statement
+      if (!content || content.trim().startsWith('from "')) {
+        return null
+      }
 
       return {
         id: `context-${index}`,
-        type: isFile ? ("file" as const) : ("code" as const),
+        type: type as "file" | "code" | "image",
         name: name,
         content: content,
       }
     })
-    .filter((tab) => tab.content.length > 0)
+    .filter(
+      (tab): tab is NonNullable<typeof tab> =>
+        tab !== null && tab.content.length > 0
+    )
 }

frontend/components/editor/AIChat/index.tsx

@@ -1,6 +1,7 @@
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { useSocket } from "@/context/SocketContext"
 import { TFile } from "@/lib/types"
-import { X } from "lucide-react"
+import { ChevronDown, X } from "lucide-react"
 import { nanoid } from "nanoid"
 import { useEffect, useRef, useState } from "react"
 import LoadingDots from "../../ui/LoadingDots"
@@ -17,6 +18,12 @@ export default function AIChat({
   editorRef,
   lastCopiedRangeRef,
   files,
+  templateType,
+  handleApplyCode,
+  selectFile,
+  mergeDecorationsCollection,
+  setMergeDecorationsCollection,
+  projectName,
 }: AIChatProps) {
   // Initialize socket and messages
   const { socket } = useSocket()
@@ -38,23 +45,47 @@ export default function AIChat({
   // Initialize textarea ref
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
-  // Scroll to bottom of chat when messages change
-  useEffect(() => {
-    scrollToBottom()
-  }, [messages])
+  // state variables for auto scroll and scroll button
+  const [autoScroll, setAutoScroll] = useState(true)
+  const [showScrollButton, setShowScrollButton] = useState(false)
 
-  // Scroll to bottom of chat when messages change
-  const scrollToBottom = () => {
-    if (chatContainerRef.current) {
-      setTimeout(() => {
-        chatContainerRef.current?.scrollTo({
+  // scroll to bottom of chat when messages change
+  useEffect(() => {
+    if (autoScroll) {
+      scrollToBottom()
+    }
+  }, [messages, autoScroll])
+
+  // scroll to bottom of chat when messages change
+  const scrollToBottom = (force: boolean = false) => {
+    if (!chatContainerRef.current || (!autoScroll && !force)) return
+
+    chatContainerRef.current.scrollTo({
       top: chatContainerRef.current.scrollHeight,
-          behavior: "smooth",
+      behavior: force ? "smooth" : "auto",
     })
-      }, 100)
   }
+
+  // function to handle scroll events
+  const handleScroll = () => {
+    if (!chatContainerRef.current) return
+
+    const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 50
+
+    setAutoScroll(isAtBottom)
+    setShowScrollButton(!isAtBottom)
   }
 
+  // scroll event listener
+  useEffect(() => {
+    const container = chatContainerRef.current
+    if (container) {
+      container.addEventListener("scroll", handleScroll)
+      return () => container.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
   // Add context tab to context tabs
   const addContextTab = (
     type: string,
@@ -100,6 +131,8 @@ export default function AIChat({
         } else if (tab.type === "code") {
           const cleanContent = formatCodeContent(tab.content)
           return `Code from ${tab.name}:\n\`\`\`typescript\n${cleanContent}\n\`\`\``
+        } else if (tab.type === "image") {
+          return `Image ${tab.name}:\n${tab.content}`
         }
         return `${tab.name}:\n${tab.content}`
       })
@@ -119,10 +152,12 @@ export default function AIChat({
       setIsGenerating,
       setIsLoading,
       abortControllerRef,
-      activeFileContent
+      activeFileContent,
+      false,
+      templateType,
+      files,
+      projectName
     )
-    // Clear context tabs after sending
-    setContextTabs([])
   }
 
   // Set context for the chat
@@ -140,6 +175,22 @@ export default function AIChat({
     addContextTab("code", name, context, range)
   }
 
+  // update context tabs when file contents change
+  useEffect(() => {
+    setContextTabs((prevTabs) =>
+      prevTabs.map((tab) => {
+        if (tab.type === "file" && tab.name === activeFileName) {
+          const fileExt = tab.name.split(".").pop() || "txt"
+          return {
+            ...tab,
+            content: `\`\`\`${fileExt}\n${activeFileContent}\n\`\`\``,
+          }
+        }
+        return tab
+      })
+    )
+  }, [activeFileContent, activeFileName])
+
   return (
     <div className="flex flex-col h-screen w-full">
       <div className="flex justify-between items-center p-2 border-b">
@@ -158,9 +209,9 @@ export default function AIChat({
           </button>
         </div>
       </div>
-      <div
+      <ScrollArea
         ref={chatContainerRef}
-        className="flex-grow overflow-y-auto p-4 space-y-4"
+        className="flex-grow p-4 space-y-4 relative"
       >
         {messages.map((message, messageIndex) => (
           // Render chat message component for each message
@@ -170,10 +221,28 @@ export default function AIChat({
             setContext={setContext}
             setIsContextExpanded={setIsContextExpanded}
             socket={socket}
+            handleApplyCode={handleApplyCode}
+            activeFileName={activeFileName}
+            activeFileContent={activeFileContent}
+            editorRef={editorRef}
+            mergeDecorationsCollection={mergeDecorationsCollection}
+            setMergeDecorationsCollection={setMergeDecorationsCollection}
+            selectFile={selectFile}
           />
         ))}
         {isLoading && <LoadingDots />}
-      </div>
+
+        {/* Add scroll to bottom button */}
+        {showScrollButton && (
+          <button
+            onClick={() => scrollToBottom(true)}
+            className="fixed bottom-36 right-6 bg-primary text-primary-foreground rounded-md border border-primary p-0.5 shadow-lg hover:bg-primary/90 transition-all"
+            aria-label="Scroll to bottom"
+          >
+            <ChevronDown className="h-5 w-5" />
+          </button>
+        )}
+      </ScrollArea>
       <div className="p-4 border-t mb-14">
         {/* Render context tabs component */}
         <ContextTabs

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

@@ -1,3 +1,4 @@
+import { TFile, TFolder } from "@/lib/types"
 import React from "react"
 
 // Stringify content for chat message component
@@ -89,7 +90,11 @@ export const handleSend = async (
   setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>,
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
   abortControllerRef: React.MutableRefObject<AbortController | null>,
-  activeFileContent: string
+  activeFileContent: string,
+  isEditMode: boolean = false,
+  templateType: string,
+  files: (TFile | TFolder)[],
+  projectName: string
 ) => {
   // Return if input is empty and context is null
   if (input.trim() === "" && !context) return
@@ -129,9 +134,7 @@ export const handleSend = async (
     }))
 
     // Fetch AI response for chat message component
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`,
-      {
+    const response = await fetch("/api/ai", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -140,14 +143,18 @@ export const handleSend = async (
         messages: anthropicMessages,
         context: context || undefined,
         activeFileContent: activeFileContent,
+        isEditMode: isEditMode,
+        templateType: templateType,
+        files: files,
+        projectName: projectName,
       }),
       signal: abortControllerRef.current.signal,
-      }
-    )
+    })
 
     // Throw error if response is not ok
     if (!response.ok) {
-      throw new Error("Failed to get AI response")
+      const error = await response.text()
+      throw new Error(error)
     }
 
     // Get reader for chat message component
@@ -197,7 +204,8 @@ export const handleSend = async (
       console.error("Error fetching AI response:", error)
       const errorMessage = {
         role: "assistant" as const,
-        content: "Sorry, I encountered an error. Please try again.",
+        content:
+          error.message || "Sorry, I encountered an error. Please try again.",
       }
       setMessages((prev) => [...prev, errorMessage])
     }
@@ -235,3 +243,11 @@ export const looksLikeCode = (text: string): boolean => {
 
   return codeIndicators.some((pattern) => pattern.test(text))
 }
+
+// Add this new function after looksLikeCode function
+export const isFilePath = (text: string): boolean => {
+  // Match patterns like next/styles/SignIn.module.css or path/to/file.ext (new file)
+  const pattern =
+    /^(?:[a-zA-Z0-9_.-]+\/)*[a-zA-Z0-9_.-]+\.[a-zA-Z0-9]+(\s+\(new file\))?$/
+  return pattern.test(text)
+}

frontend/components/editor/AIChat/lib/markdownComponents.tsx

@@ -1,15 +1,26 @@
-import { CornerUpLeft } from "lucide-react"
+import { useSocket } from "@/context/SocketContext"
+import { TTab } from "@/lib/types"
+import { Check, CornerUpLeft, FileText, X } from "lucide-react"
+import monaco from "monaco-editor"
 import { Components } from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
 import { Button } from "../../../ui/button"
-import { stringifyContent } from "./chatUtils"
+import ApplyButton from "../ApplyButton"
+import { isFilePath, stringifyContent } from "./chatUtils"
 
 // Create markdown components for chat message component
 export const createMarkdownComponents = (
   renderCopyButton: (text: any) => JSX.Element,
   renderMarkdownElement: (props: any) => JSX.Element,
-  askAboutCode: (code: any) => void
+  askAboutCode: (code: any) => void,
+  activeFileName: string,
+  activeFileContent: string,
+  editorRef: any,
+  handleApplyCode: (mergedCode: string, originalCode: string) => void,
+  selectFile: (tab: TTab) => void,
+  mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection,
+  setMergeDecorationsCollection?: (collection: undefined) => void
 ): Components => ({
   code: ({
     node,
@@ -25,12 +36,66 @@ export const createMarkdownComponents = (
     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">
+      <div className="relative border border-input rounded-md mt-8 my-2 translate-y-[-1rem]">
+        <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 rounded-tl">
           {match[1]}
         </div>
-        <div className="absolute top-0 right-0 flex">
+        <div className="sticky top-0 right-0 flex justify-end z-10">
+          <div className="flex border border-input shadow-lg bg-background rounded-md">
             {renderCopyButton(children)}
+            <div className="w-px bg-input"></div>
+            {!mergeDecorationsCollection ? (
+              <ApplyButton
+                code={String(children)}
+                activeFileName={activeFileName}
+                activeFileContent={activeFileContent}
+                editorRef={editorRef}
+                onApply={handleApplyCode}
+              />
+            ) : (
+              <>
+                <Button
+                  onClick={() => {
+                    if (
+                      setMergeDecorationsCollection &&
+                      mergeDecorationsCollection &&
+                      editorRef?.current
+                    ) {
+                      mergeDecorationsCollection?.clear()
+                      setMergeDecorationsCollection(undefined)
+                    }
+                  }}
+                  size="sm"
+                  variant="ghost"
+                  className="p-1 h-6"
+                  title="Accept Changes"
+                >
+                  <Check className="w-4 h-4 text-green-500" />
+                </Button>
+                <div className="w-px bg-input"></div>
+                <Button
+                  onClick={() => {
+                    if (editorRef?.current && mergeDecorationsCollection) {
+                      const model = editorRef.current.getModel()
+                      if (model && (model as any).originalContent) {
+                        editorRef.current?.setValue(
+                          (model as any).originalContent
+                        )
+                        mergeDecorationsCollection.clear()
+                        setMergeDecorationsCollection?.(undefined)
+                      }
+                    }
+                  }}
+                  size="sm"
+                  variant="ghost"
+                  className="p-1 h-6"
+                  title="Discard Changes"
+                >
+                  <X className="w-4 h-4 text-red-500" />
+                </Button>
+              </>
+            )}
+            <div className="w-px bg-input"></div>
             <Button
               onClick={(e) => {
                 e.preventDefault()
@@ -44,7 +109,7 @@ export const createMarkdownComponents = (
               <CornerUpLeft className="w-4 h-4" />
             </Button>
           </div>
-        <div className="pt-6">
+        </div>
         <SyntaxHighlighter
           style={vscDarkPlus as any}
           language={match[1]}
@@ -58,7 +123,6 @@ export const createMarkdownComponents = (
           {stringifyContent(children)}
         </SyntaxHighlighter>
       </div>
-      </div>
     ) : (
       <code className={className} {...props}>
         {children}
@@ -66,8 +130,62 @@ export const createMarkdownComponents = (
     )
   },
   // Render markdown elements
-  p: ({ node, children, ...props }) =>
-    renderMarkdownElement({ node, children, ...props }),
+  p: ({ node, children, ...props }) => {
+    const content = stringifyContent(children)
+    const { socket } = useSocket()
+
+    if (isFilePath(content)) {
+      const isNewFile = content.endsWith("(new file)")
+      const filePath = (
+        isNewFile ? content.replace(" (new file)", "") : content
+      )
+        .split("/")
+        .filter((part, index) => index !== 0)
+        .join("/")
+
+      const handleFileClick = () => {
+        if (isNewFile) {
+          socket?.emit(
+            "createFile",
+            {
+              name: filePath,
+            },
+            (response: any) => {
+              if (response.success) {
+                const tab: TTab = {
+                  id: filePath,
+                  name: filePath.split("/").pop() || "",
+                  saved: true,
+                  type: "file",
+                }
+                selectFile(tab)
+              }
+            }
+          )
+        } else {
+          const tab: TTab = {
+            id: filePath,
+            name: filePath.split("/").pop() || "",
+            saved: true,
+            type: "file",
+          }
+          selectFile(tab)
+        }
+      }
+
+      return (
+        <div
+          onClick={handleFileClick}
+          className="group flex items-center gap-2 px-2 py-1 bg-secondary/50 rounded-md my-2 text-xs hover:bg-secondary cursor-pointer w-fit"
+        >
+          <FileText className="h-4 w-4" />
+          <span className="font-mono group-hover:underline">{content}</span>
+        </div>
+      )
+    }
+
+    return renderMarkdownElement({ node, children, ...props })
+  },
   h1: ({ node, children, ...props }) =>
     renderMarkdownElement({ node, children, ...props }),
   h2: ({ node, children, ...props }) =>

frontend/components/editor/AIChat/types/index.ts

@@ -1,4 +1,5 @@
-import { TFile, TFolder } from "@/lib/types"
+import { TemplateConfig } from "@/lib/templates"
+import { TFile, TFolder, TTab } from "@/lib/types"
 import * as monaco from "monaco-editor"
 import { Socket } from "socket.io-client"
 
@@ -53,6 +54,13 @@ export interface AIChatProps {
     endLine: number
   } | null>
   files: (TFile | TFolder)[]
+  templateType: string
+  templateConfig?: TemplateConfig
+  projectName: string
+  handleApplyCode: (mergedCode: string, originalCode: string) => void
+  mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
+  setMergeDecorationsCollection?: (collection: undefined) => void
+  selectFile: (tab: TTab) => void
 }
 
 // Chat input props interface
@@ -102,6 +110,13 @@ export interface MessageProps {
   ) => void
   setIsContextExpanded: (isExpanded: boolean) => void
   socket: Socket | null
+  handleApplyCode: (mergedCode: string, originalCode: string) => void
+  activeFileName: string
+  activeFileContent: string
+  editorRef: any
+  mergeDecorationsCollection?: monaco.editor.IEditorDecorationsCollection
+  setMergeDecorationsCollection?: (collection: undefined) => void
+  selectFile: (tab: TTab) => void
 }
 
 // Context tabs props interface

frontend/components/editor/generate.tsx

@@ -5,14 +5,12 @@ 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({
   user,
-  socket,
   width,
   data,
   editor,
@@ -21,7 +19,6 @@ export default function GenerateInput({
   onClose,
 }: {
   user: User
-  socket: Socket
   width: number
   data: {
     fileName: string
@@ -59,32 +56,56 @@ export default function GenerateInput({
   }: {
     regenerate?: boolean
   }) => {
-    if (user.generations >= 1000) {
-      toast.error("You reached the maximum # of generations.")
+    try {
+      setLoading({ generate: !regenerate, regenerate })
+      setCurrentPrompt(input)
+
+      const response = await fetch("/api/ai", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          messages: [
+            {
+              role: "user",
+              content: regenerate ? currentPrompt : input,
+            },
+          ],
+          context: null,
+          activeFileContent: data.code,
+          isEditMode: true,
+          fileName: data.fileName,
+          line: data.line,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.text()
+        toast.error(error)
         return
       }
 
-    setLoading({ generate: !regenerate, regenerate })
-    setCurrentPrompt(input)
-    socket.emit(
-      "generateCode",
-      {
-        fileName: data.fileName,
-        code: data.code,
-        line: data.line,
-        instructions: regenerate ? currentPrompt : input,
-      },
-      (res: { response: string; success: boolean }) => {
-        console.log("Generated code", res.response, res.success)
-        // if (!res.success) {
-        //   toast.error("Failed to generate code.");
-        //   return;
-        // }
+      const reader = response.body?.getReader()
+      const decoder = new TextDecoder()
+      let result = ""
 
-        setCode(res.response)
-        router.refresh()
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          result += decoder.decode(value, { stream: true })
+        }
+      }
+
+      setCode(result.trim())
+      router.refresh()
+    } catch (error) {
+      console.error("Generation error:", error)
+      toast.error("Failed to generate code")
+    } finally {
+      setLoading({ generate: false, regenerate: false })
     }
-    )
   }
   const handleGenerateForm = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {

frontend/components/editor/index.tsx

@@ -62,7 +62,7 @@ export default function CodeEditor({
   //SocketContext functions and effects
   const { socket, setUserAndSandboxId } = useSocket()
   // theme
-  const { theme } = useTheme()
+  const { resolvedTheme: theme } = useTheme()
   useEffect(() => {
     // Ensure userData.id and sandboxData.id are available before attempting to connect
     if (userData.id && sandboxData.id) {
@@ -104,6 +104,13 @@ export default function CodeEditor({
   // Added this state to track the most recent content for each file
   const [fileContents, setFileContents] = useState<Record<string, string>>({})
 
+  // Apply Button merger decoration state
+  const [mergeDecorations, setMergeDecorations] = useState<
+    monaco.editor.IModelDeltaDecoration[]
+  >([])
+  const [mergeDecorationsCollection, setMergeDecorationsCollection] =
+    useState<monaco.editor.IEditorDecorationsCollection>()
+
   // Editor state
   const [editorLanguage, setEditorLanguage] = useState("plaintext")
   const [cursorLine, setCursorLine] = useState(0)
@@ -375,6 +382,57 @@ export default function CodeEditor({
     })
   }, [editorRef])
 
+  // handle apply code
+  const handleApplyCode = useCallback(
+    (mergedCode: string, originalCode: string) => {
+      if (!editorRef) return
+
+      const model = editorRef.getModel()
+      if (!model) return // Store original content
+      ;(model as any).originalContent = originalCode
+
+      // Calculate the full range of the document
+      const fullRange = model.getFullModelRange()
+
+      // Create decorations before applying the edit
+      const originalLines = originalCode.split("\n")
+      const mergedLines = mergedCode.split("\n")
+      const decorations: monaco.editor.IModelDeltaDecoration[] = []
+
+      for (
+        let i = 0;
+        i < Math.max(originalLines.length, mergedLines.length);
+        i++
+      ) {
+        // Only highlight new lines (green highlights)
+        if (i >= originalLines.length || originalLines[i] !== mergedLines[i]) {
+          decorations.push({
+            range: new monaco.Range(i + 1, 1, i + 1, 1),
+            options: {
+              isWholeLine: true,
+              className: "added-line-decoration",
+              glyphMarginClassName: "added-line-glyph",
+            },
+          })
+        }
+      }
+
+      // Execute the edit operation
+      editorRef.executeEdits("apply-code", [
+        {
+          range: fullRange,
+          text: mergedCode,
+          forceMoveMarkers: true,
+        },
+      ])
+
+      // Apply decorations after the edit
+      const newDecorations = editorRef.createDecorationsCollection(decorations)
+      setMergeDecorationsCollection(newDecorations)
+    },
+    [editorRef]
+  )
+
   // Generate widget effect
   useEffect(() => {
     if (generate.show) {
@@ -735,31 +793,32 @@ export default function CodeEditor({
     setGenerate((prev) => ({ ...prev, show: false }))
 
     // Check if the tab already exists in the list of open tabs
-    const exists = tabs.find((t) => t.id === tab.id)
-    setTabs((prev) => {
-      if (exists) {
-        // If the tab exists, make it the active tab
-        setActiveFileId(exists.id)
-        return prev
-      }
-      // If the tab doesn't exist, add it to the list of tabs and make it active
-      return [...prev, tab]
-    })
+    const existingTab = tabs.find((t) => t.id === tab.id)
 
-    // If the file's content is already cached, set it as the active content
-    if (fileContents[tab.id]) {
-      setActiveFileContent(fileContents[tab.id])
+    if (existingTab) {
+      // If the tab exists, just make it active
+      setActiveFileId(existingTab.id)
+      if (fileContents[existingTab.id]) {
+        setActiveFileContent(fileContents[existingTab.id])
+      }
     } else {
-      // Otherwise, fetch the content of the file and cache it
+      // If the tab doesn't exist, add it to the list and make it active
+      setTabs((prev) => [...prev, tab])
+
+      // Fetch content if not cached
+      if (!fileContents[tab.id]) {
         debouncedGetFile(tab.id, (response: string) => {
           setFileContents((prev) => ({ ...prev, [tab.id]: response }))
           setActiveFileContent(response)
         })
+      } else {
+        setActiveFileContent(fileContents[tab.id])
+      }
     }
 
     // Set the editor language based on the file type
     setEditorLanguage(processFileType(tab.name))
-    // Set the active file ID to the new tab
+    // Set the active file ID
     setActiveFileId(tab.id)
   }
 
@@ -921,9 +980,9 @@ export default function CodeEditor({
     )
 
   return (
-    <>
-      {/* Copilot DOM elements */}
+    <div className="flex max-h-full overflow-hidden">
       <PreviewProvider>
+        {/* Copilot DOM elements */}
         <div ref={generateRef} />
         <div ref={suggestionRef} className="absolute">
           <AnimatePresence>
@@ -949,7 +1008,6 @@ export default function CodeEditor({
           {generate.show ? (
             <GenerateInput
               user={userData}
-              socket={socket!}
               width={generate.width - 90}
               data={{
                 fileName: tabs.find((t) => t.id === activeFileId)?.name ?? "",
@@ -1234,13 +1292,19 @@ export default function CodeEditor({
                   editorRef={{ current: editorRef }}
                   lastCopiedRangeRef={lastCopiedRangeRef}
                   files={files}
+                  templateType={sandboxData.type}
+                  projectName={sandboxData.name}
+                  handleApplyCode={handleApplyCode}
+                  mergeDecorationsCollection={mergeDecorationsCollection}
+                  setMergeDecorationsCollection={setMergeDecorationsCollection}
+                  selectFile={selectFile}
                 />
               </ResizablePanel>
             </>
           )}
         </ResizablePanelGroup>
       </PreviewProvider>
-    </>
+    </div>
   )
 }
 

frontend/components/editor/navbar/deploy.tsx

@@ -9,7 +9,7 @@ import {
 import { useTerminal } from "@/context/TerminalContext"
 import { Sandbox, User } from "@/lib/types"
 import { Globe } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function DeployButtonModal({
   userData,
@@ -18,8 +18,21 @@ export default function DeployButtonModal({
   userData: User
   data: Sandbox
 }) {
-  const { deploy } = useTerminal()
+  const { deploy, getAppExists } = useTerminal()
   const [isDeploying, setIsDeploying] = useState(false)
+  const [isDeployed, setIsDeployed] = useState(false)
+  const [deployButtonVisible, setDeployButtonEnabled] = useState(false)
+
+  useEffect(() => {
+    const checkDeployment = async () => {
+      if (getAppExists) {
+        const exists = await getAppExists(data.id)
+        setDeployButtonEnabled(exists.success)
+        setIsDeployed((exists.success && exists.exists) ?? false)
+      }
+    }
+    checkDeployment()
+  }, [data.id, getAppExists])
 
   const handleDeploy = () => {
     if (isDeploying) {
@@ -30,6 +43,7 @@ export default function DeployButtonModal({
       setIsDeploying(true)
       deploy(() => {
         setIsDeploying(false)
+        setIsDeployed(true)
       })
     }
   }
@@ -38,10 +52,12 @@ export default function DeployButtonModal({
     <>
       <Popover>
         <PopoverTrigger asChild>
+          {deployButtonVisible && (
             <Button variant="outline">
               <Globe className="w-4 h-4 mr-2" />
               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"
@@ -52,8 +68,9 @@ export default function DeployButtonModal({
             <DeploymentOption
               icon={<Globe className="text-gray-500 w-5 h-5" />}
               domain={`${data.id}.gitwit.app`}
-              timestamp="Deployed 1h ago"
+              timestamp="Deployed 1m ago"
               user={userData.name}
+              isDeployed={isDeployed}
             />
           </div>
           <Button
@@ -61,7 +78,7 @@ export default function DeployButtonModal({
             className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]"
             onClick={handleDeploy}
           >
-            {isDeploying ? "Deploying..." : "Update"}
+            {isDeploying ? "Deploying..." : isDeployed ? "Update" : "Deploy"}
           </Button>
         </PopoverContent>
       </Popover>
@@ -74,16 +91,19 @@ function DeploymentOption({
   domain,
   timestamp,
   user,
+  isDeployed,
 }: {
   icon: React.ReactNode
   domain: string
   timestamp: string
   user: string
+  isDeployed: boolean
 }) {
   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">
         <div className="flex-shrink-0">{icon}</div>
+        {isDeployed ? (
           <a
             href={`https://${domain}`}
             target="_blank"
@@ -92,9 +112,12 @@ function DeploymentOption({
           >
             {domain}
           </a>
+        ) : (
+          <span className="font-semibold text-gray-300">{domain}</span>
+        )}
       </div>
       <p className="text-sm text-gray-400 mt-0 ml-7">
-        {timestamp} • {user}
+        {isDeployed ? `${timestamp} • ${user}` : "Never deployed"}
       </p>
     </div>
   )

frontend/components/editor/navbar/run.tsx

@@ -7,6 +7,7 @@ import { Sandbox } from "@/lib/types"
 import { Play, StopCircle } from "lucide-react"
 import { useEffect, useRef } from "react"
 import { toast } from "sonner"
+import { templateConfigs } from "@/lib/templates"
 
 export default function RunButtonModal({
   isRunning,
@@ -34,7 +35,7 @@ export default function RunButtonModal({
       }
     }
   }, [terminals, isRunning])
-
+  // commands to run in the terminal
   const handleRun = async () => {
     if (isRunning && lastCreatedTerminalRef.current) {
       await closeTerminal(lastCreatedTerminalRef.current)
@@ -42,10 +43,7 @@ export default function RunButtonModal({
       setIsPreviewCollapsed(true)
       previewPanelRef.current?.collapse()
     } else if (!isRunning && terminals.length < 4) {
-      const command =
-        sandboxData.type === "streamlit"
-          ? "./venv/bin/streamlit run main.py --server.runOnSave true"
-          : "npm run dev"
+      const command = templateConfigs[sandboxData.type]?.runCommand || "npm run dev"
 
       try {
         // Create a new terminal with the appropriate command

frontend/components/editor/sidebar/index.tsx

@@ -9,6 +9,7 @@ import SidebarFolder from "./folder"
 import New from "./new"
 
 import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { Skeleton } from "@/components/ui/skeleton"
 import { cn, sortFileExplorer } from "@/lib/utils"
 import {
@@ -104,8 +105,8 @@ export default function Sidebar({
 
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm">
-      <div className="flex-grow overflow-auto p-2 pb-[84px]">
-        <div className="flex w-full items-center justify-between h-8 mb-1">
+      <ScrollArea className="flex-grow overflow-auto px-2 pt-0 pb-4 relative">
+        <div className="flex w-full items-center justify-between h-8 pb-1 isolate z-10 sticky pt-2 top-0 bg-background">
           <div className="text-muted-foreground">Explorer</div>
           <div className="flex space-x-1">
             <button
@@ -179,8 +180,8 @@ export default function Sidebar({
             </>
           )}
         </div>
-      </div>
-      <div className="fixed bottom-0 w-48 flex flex-col p-2 bg-background">
+      </ScrollArea>
+      <div className="flex flex-col p-2 bg-background">
         <Button
           variant="ghost"
           className="w-full justify-start text-sm text-muted-foreground font-normal h-8 px-2 mb-2"

frontend/components/editor/terminals/terminal.tsx

@@ -7,7 +7,7 @@ import "./xterm.css"
 import { debounce } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
 import { useTheme } from "next-themes"
-import { ElementRef, useEffect, useRef } from "react"
+import { ElementRef, useEffect, useRef, useCallback } from "react"
 import { Socket } from "socket.io-client"
 export default function EditorTerminal({
   socket,
@@ -22,13 +22,12 @@ export default function EditorTerminal({
   setTerm: (term: Terminal) => void
   visible: boolean
 }) {
-  const { theme } = useTheme()
+  const { resolvedTheme: theme } = useTheme()
   const terminalContainerRef = useRef<ElementRef<"div">>(null)
   const fitAddonRef = useRef<FitAddon | null>(null)
 
   useEffect(() => {
     if (!terminalContainerRef.current) return
-    // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
@@ -37,13 +36,54 @@ export default function EditorTerminal({
       fontSize: 14,
       lineHeight: 1.5,
       letterSpacing: 0,
+      allowTransparency: true,
+      rightClickSelectsWord: true,
+      allowProposedApi: true, // for custom key events
+    })
+
+    // right-click paste handler
+    const handleContextMenu = (e: MouseEvent) => {
+      e.preventDefault()
+      navigator.clipboard.readText().then((text) => {
+        if (text) {
+          socket.emit("terminalData", { id, data: text })
+        }
+      })
+    }
+
+    terminalContainerRef.current.addEventListener(
+      "contextmenu",
+      handleContextMenu
+    )
+
+    // keyboard paste handler
+    terminal.attachCustomKeyEventHandler((event: KeyboardEvent) => {
+      if (event.type === "keydown") {
+        if (
+          (event.ctrlKey || event.metaKey) &&
+          event.key.toLowerCase() === "v"
+        ) {
+          event.preventDefault()
+          navigator.clipboard.readText().then((text) => {
+            if (text) {
+              socket.emit("terminalData", { id, data: text })
+            }
+          })
+          return false
+        }
+      }
+      return true
     })
 
     setTerm(terminal)
-    const dispose = () => {
+
+    return () => {
       terminal.dispose()
+      terminalContainerRef.current?.removeEventListener(
+        "contextmenu",
+        handleContextMenu
+      )
     }
-    return dispose
   }, [])
 
   useEffect(() => {
@@ -81,7 +121,6 @@ export default function EditorTerminal({
 
         const { width, height } = entry.contentRect
 
-        // Only call fit if the size has actually changed
         if (
           width !== terminalContainerRef.current.offsetWidth ||
           height !== terminalContainerRef.current.offsetHeight
@@ -92,10 +131,9 @@ export default function EditorTerminal({
             console.error("Error during fit:", err)
           }
         }
-      }, 50) // Debounce for 50ms
+      }, 50)
     )
 
-    // start observing for resize
     resizeObserver.observe(terminalContainerRef.current)
     return () => {
       disposableOnData.dispose()
@@ -124,6 +162,7 @@ export default function EditorTerminal({
         ref={terminalContainerRef}
         style={{ display: visible ? "block" : "none" }}
         className="w-full h-full text-left"
+        tabIndex={0}
       >
         {term === null ? (
           <div className="flex items-center text-muted-foreground p-2">

frontend/components/profile/index.tsx

@@ -0,0 +1,749 @@
+"use client"
+
+import NewProjectModal from "@/components/dashboard/newProject"
+import ProjectCard from "@/components/dashboard/projectCard/"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { deleteSandbox, updateSandbox, updateUser } from "@/lib/actions"
+import { socialIcons } from "@/lib/data"
+import { editUserSchema, EditUserSchema } from "@/lib/schema"
+import { TIERS } from "@/lib/tiers"
+import { SandboxWithLiked, User, UserLink } from "@/lib/types"
+import { cn, parseSocialLink } from "@/lib/utils"
+import { useUser } from "@clerk/nextjs"
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+  Edit,
+  Globe,
+  Heart,
+  Info,
+  Loader2,
+  LucideIcon,
+  Package2,
+  PlusCircle,
+  Sparkles,
+  Trash2,
+  X,
+} from "lucide-react"
+import { useRouter } from "next/navigation"
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from "react"
+import { useFormState, useFormStatus } from "react-dom"
+import { useFieldArray, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import Avatar from "../ui/avatar"
+import { Badge } from "../ui/badge"
+import { Input } from "../ui/input"
+import { Progress } from "../ui/progress"
+import { Textarea } from "../ui/textarea"
+// #region Profile Page
+export default function ProfilePage({
+  publicSandboxes,
+  privateSandboxes,
+  profileOwner,
+  loggedInUser,
+}: {
+  publicSandboxes: SandboxWithLiked[]
+  privateSandboxes: SandboxWithLiked[]
+  profileOwner: User
+  loggedInUser: User | null
+}) {
+  const isOwnProfile = profileOwner.id === loggedInUser?.id
+
+  const sandboxes = useMemo(() => {
+    const allSandboxes = isOwnProfile
+      ? [...publicSandboxes, ...privateSandboxes]
+      : publicSandboxes
+
+    return allSandboxes
+  }, [isOwnProfile, publicSandboxes, privateSandboxes])
+
+  return (
+    <>
+      <div className="container mx-auto p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="md:col-span-1">
+          <ProfileCard
+            name={profileOwner.name}
+            username={profileOwner.username}
+            avatarUrl={profileOwner.avatarUrl}
+            sandboxes={sandboxes}
+            joinedDate={profileOwner.createdAt}
+            generations={isOwnProfile ? loggedInUser.generations : undefined}
+            isOwnProfile={isOwnProfile}
+            tier={profileOwner.tier}
+            bio={profileOwner.bio}
+            personalWebsite={profileOwner.personalWebsite}
+            socialLinks={profileOwner.links}
+          />
+        </div>
+        <div className="md:col-span-2">
+          <SandboxesPanel
+            {...{
+              publicSandboxes,
+              privateSandboxes,
+              isOwnProfile,
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+// #endregion
+
+// #region Profile Card
+function ProfileCard({
+  name,
+  username,
+  avatarUrl,
+  sandboxes,
+  joinedDate,
+  generations,
+  isOwnProfile,
+  bio,
+  personalWebsite,
+  socialLinks = [],
+  tier,
+}: {
+  name: string
+  username: string
+  avatarUrl: string | null
+  bio: string | null
+  personalWebsite: string | null
+  socialLinks: UserLink[]
+  sandboxes: SandboxWithLiked[]
+  joinedDate: Date
+  generations?: number
+  isOwnProfile: boolean
+  tier: string
+}) {
+  const { user } = useUser()
+  const [isEditing, setIsEditing] = useState(false)
+
+  const joinedAt = useMemo(() => {
+    const date = new Date(joinedDate).toLocaleDateString("en-US", {
+      month: "long",
+      year: "numeric",
+    })
+    return `Joined ${date}`
+  }, [joinedDate])
+  const toggleEdit = useCallback(() => {
+    setIsEditing((s) => !s)
+  }, [])
+  const stats = useMemo(() => {
+    const totalSandboxes = sandboxes.length
+    const totalLikes = sandboxes.reduce(
+      (sum, sandbox) => sum + sandbox.likeCount,
+      0
+    )
+
+    return {
+      sandboxes:
+        totalSandboxes === 1 ? "1 sandbox" : `${totalSandboxes} sandboxes`,
+      likes: totalLikes === 1 ? "1 like" : `${totalLikes} likes`,
+    }
+  }, [sandboxes])
+
+  const showAddMoreInfoBanner = useMemo(() => {
+    return !bio && !personalWebsite && (socialLinks?.length ?? 0) === 0
+  }, [personalWebsite, bio, socialLinks])
+
+  return (
+    <Card className="mb-6 md:mb-0 sticky top-6">
+      {isOwnProfile && (
+        <div className="absolute top-2 right-2 flex flex-col gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={toggleEdit}
+                  aria-label={isEditing ? "close edit form" : "open edit form"}
+                  size="smIcon"
+                  variant="secondary"
+                  className="rounded-full relative"
+                >
+                  {isEditing ? (
+                    <X className="size-4" />
+                  ) : showAddMoreInfoBanner ? (
+                    <>
+                      <Sparkles className="size-4 text-yellow-400 z-[2]" />
+                      <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
+                    </>
+                  ) : (
+                    <Edit className="size-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  {showAddMoreInfoBanner
+                    ? "Add more information to your profile"
+                    : "Edit your profile"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      )}
+      <CardContent className="flex flex-col gap-4 pt-6">
+        {isEditing ? (
+          <div className="flex flex-col gap-2 items-center ">
+            <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
+            <EditProfileForm
+              {...{
+                name,
+                username,
+                avatarUrl,
+                bio,
+                personalWebsite,
+                socialLinks,
+                toggleEdit,
+              }}
+            />
+          </div>
+        ) : (
+          <>
+            <div className="flex flex-col gap-2 items-center">
+              <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
+              <div className="space-y-1">
+                <CardTitle className="text-2xl text-center">{name}</CardTitle>
+                <CardDescription className="text-center">{`@${username}`}</CardDescription>
+              </div>
+              {bio && <p className="text-sm text-center">{bio}</p>}
+              {(socialLinks.length > 0 || personalWebsite) && (
+                <div className="flex gap-2 justify-center">
+                  {personalWebsite && (
+                    <Button variant="secondary" size="smIcon" asChild>
+                      <a
+                        href={personalWebsite}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Globe className="size-4" />
+                        <span className="sr-only">Personal Website</span>
+                      </a>
+                    </Button>
+                  )}
+                  {socialLinks.map((link, index) => {
+                    const Icon = socialIcons[link.platform]
+                    return (
+                      <Button
+                        key={index}
+                        variant="secondary"
+                        size="smIcon"
+                        asChild
+                      >
+                        <a
+                          href={link.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <Icon className="size-4" />
+                          <span className="sr-only">{link.platform}</span>
+                        </a>
+                      </Button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-1 items-center">
+              {typeof generations === "number" && (
+                <div className="flex justify-center">
+                  <SubscriptionBadge
+                    generations={generations}
+                    tier={tier as keyof typeof TIERS}
+                  />
+                </div>
+              )}
+              <div className="flex gap-4">
+                <StatsItem icon={Package2} label={stats.sandboxes} />
+                <StatsItem icon={Heart} label={stats.likes} />
+              </div>
+            </div>
+            <p className="text-xs mt-2 text-muted-foreground text-center">
+              {joinedAt}
+            </p>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function EditProfileForm(props: {
+  name: string
+  username: string
+  avatarUrl: string | null
+  bio: string | null
+  personalWebsite: string | null
+  socialLinks: UserLink[]
+  toggleEdit: () => void
+}) {
+  const router = useRouter()
+  const { user } = useUser()
+  const formRef = useRef<HTMLFormElement>(null)
+  const [formState, formAction] = useFormState(updateUser, {
+    message: "",
+  })
+  const [isPending, startTransition] = useTransition()
+  const { name, username, bio, personalWebsite, socialLinks, toggleEdit } =
+    props
+  const form = useForm<EditUserSchema>({
+    resolver: zodResolver(editUserSchema),
+    defaultValues: {
+      oldUsername: username,
+      id: user?.id,
+      name,
+      username,
+      bio: bio ?? "",
+      personalWebsite: personalWebsite ?? "",
+      links:
+        socialLinks.length > 0
+          ? socialLinks
+          : [{ url: "", platform: "generic" }],
+      ...(formState.fields ?? {}),
+    },
+  })
+  const { fields, append, remove } = useFieldArray({
+    name: "links",
+    control: form.control,
+  })
+  useEffect(() => {
+    const message = formState.message
+    if (!Boolean(message)) return
+    if ("error" in formState) {
+      toast.error(formState.message)
+      return
+    }
+    toast.success(formState.message as String)
+    toggleEdit()
+    if (formState?.newRoute) {
+      router.replace(formState.newRoute)
+    }
+  }, [formState])
+  return (
+    <Form {...form}>
+      <form
+        ref={formRef}
+        action={formAction}
+        onSubmit={(evt) => {
+          evt.preventDefault()
+          form.handleSubmit(() => {
+            startTransition(() => {
+              formAction(new FormData(formRef.current!))
+            })
+          })(evt)
+        }}
+        className="space-y-3 w-full"
+      >
+        <input type="hidden" name="id" value={user?.id} />
+        <input type="hidden" name="oldUsername" value={username} />
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="marie doe" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>User name</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input
+                    className="peer ps-6"
+                    type="text"
+                    placeholder="Username"
+                    {...field}
+                  />
+                  <span className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-sm text-muted-foreground peer-disabled:opacity-50">
+                    @
+                  </span>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="hi, I love building things!"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="personalWebsite"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Personal Website</FormLabel>
+              <FormControl>
+                <Input placeholder="https://chillguy.dev" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div>
+          {fields.map((field, index) => (
+            <FormField
+              control={form.control}
+              key={field.id}
+              name={`links.${index}`}
+              render={({ field: { onChange, value, ...field } }) => {
+                const Icon = socialIcons[value.platform] ?? socialIcons.generic
+                return (
+                  <FormItem>
+                    <FormLabel className={cn(index !== 0 && "sr-only")}>
+                      Social Links
+                    </FormLabel>
+                    <FormDescription className={cn(index !== 0 && "sr-only")}>
+                      Add links to your blogs or social media profiles.
+                    </FormDescription>
+                    <FormControl>
+                      <div className="flex gap-2">
+                        <div className="relative flex-1">
+                          <Input
+                            {...field}
+                            className="peer ps-9"
+                            value={value.url}
+                            onChange={(e) =>
+                              onChange(parseSocialLink(e.currentTarget.value))
+                            }
+                          />
+                          <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50">
+                            <Icon
+                              size={16}
+                              strokeWidth={2}
+                              aria-hidden="true"
+                            />
+                          </div>
+                        </div>
+                        <Button
+                          size="smIcon"
+                          type="button"
+                          variant="secondary"
+                          onClick={() => remove(index)}
+                        >
+                          <Trash2 className="size-4" />
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )
+              }}
+            />
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="mt-2"
+            onClick={() => append({ url: "", platform: "generic" })}
+          >
+            Add URL
+          </Button>
+        </div>
+        <SubmitButton {...{ isPending }} />
+      </form>
+    </Form>
+  )
+}
+function SubmitButton({ isPending }: { isPending: boolean }) {
+  const formStatus = useFormStatus()
+  const { pending } = formStatus
+  const pend = pending || isPending
+  return (
+    <Button size="sm" type="submit" className="w-full mt-2" disabled={pend}>
+      {pend && <Loader2 className="animate-spin mr-2 h-4 w-4" />}
+      Save Changes
+    </Button>
+  )
+}
+// #endregion
+
+// #region Sandboxes Panel
+function SandboxesPanel({
+  publicSandboxes,
+  privateSandboxes,
+  isOwnProfile,
+}: {
+  publicSandboxes: SandboxWithLiked[]
+  privateSandboxes: SandboxWithLiked[]
+  isOwnProfile: boolean
+}) {
+  const [deletingId, setDeletingId] = useState<string>("")
+  const hasPublicSandboxes = publicSandboxes.length > 0
+  const hasPrivateSandboxes = privateSandboxes.length > 0
+
+  const onVisibilityChange = useMemo(
+    () =>
+      async (sandbox: Pick<SandboxWithLiked, "id" | "name" | "visibility">) => {
+        const newVisibility =
+          sandbox.visibility === "public" ? "private" : "public"
+        toast(`Project ${sandbox.name} is now ${newVisibility}.`)
+        await updateSandbox({
+          id: sandbox.id,
+          visibility: newVisibility,
+        })
+      },
+    []
+  )
+
+  const onDelete = useMemo(
+    () => async (sandbox: Pick<SandboxWithLiked, "id" | "name">) => {
+      setDeletingId(sandbox.id)
+      toast(`Project ${sandbox.name} deleted.`)
+      await deleteSandbox(sandbox.id)
+      setDeletingId("")
+    },
+    []
+  )
+  if (!isOwnProfile) {
+    return (
+      <div className="">
+        {hasPublicSandboxes ? (
+          <>
+            <h2 className="font-semibold text-xl mb-4">Sandboxes</h2>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {publicSandboxes.map((sandbox) => {
+                return (
+                  <Fragment key={sandbox.id}>
+                    {isOwnProfile ? (
+                      <ProjectCard
+                        onVisibilityChange={onVisibilityChange}
+                        onDelete={onDelete}
+                        deletingId={deletingId}
+                        isAuthenticated
+                        {...sandbox}
+                      />
+                    ) : (
+                      <ProjectCard isAuthenticated={false} {...sandbox} />
+                    )}
+                  </Fragment>
+                )
+              })}
+            </div>
+          </>
+        ) : (
+          <EmptyState type="private" isOwnProfile={isOwnProfile} />
+        )}
+      </div>
+    )
+  }
+  return (
+    <Tabs defaultValue="public">
+      <TabsList className="mb-4">
+        <TabsTrigger value="public">Public</TabsTrigger>
+        <TabsTrigger value="private">Private</TabsTrigger>
+      </TabsList>
+      <TabsContent value="public">
+        {hasPublicSandboxes ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {publicSandboxes.map((sandbox) => {
+              return (
+                <Fragment key={sandbox.id}>
+                  {isOwnProfile ? (
+                    <ProjectCard
+                      onVisibilityChange={onVisibilityChange}
+                      onDelete={onDelete}
+                      deletingId={deletingId}
+                      isAuthenticated
+                      {...sandbox}
+                    />
+                  ) : (
+                    <ProjectCard isAuthenticated={false} {...sandbox} />
+                  )}
+                </Fragment>
+              )
+            })}
+          </div>
+        ) : (
+          <EmptyState type="public" isOwnProfile={isOwnProfile} />
+        )}
+      </TabsContent>
+      <TabsContent value="private">
+        {hasPrivateSandboxes ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {privateSandboxes.map((sandbox) => (
+              <ProjectCard
+                key={sandbox.id}
+                onVisibilityChange={onVisibilityChange}
+                onDelete={onDelete}
+                deletingId={deletingId}
+                isAuthenticated
+                {...sandbox}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyState type="private" isOwnProfile={isOwnProfile} />
+        )}
+      </TabsContent>
+    </Tabs>
+  )
+}
+// #endregion
+
+// #region Empty State
+function EmptyState({
+  type,
+  isOwnProfile,
+}: {
+  type: "public" | "private"
+  isOwnProfile: boolean
+}) {
+  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
+
+  const text = useMemo(() => {
+    let title: string
+    let description: string
+    switch (type) {
+      case "public":
+        title = "No public sandboxes yet"
+        description = isOwnProfile
+          ? "Create your first public sandbox to share your work with the world!"
+          : "user has no public sandboxes"
+
+      case "private":
+        title = "No private sandboxes yet"
+        description = isOwnProfile
+          ? "Create your first private sandbox to start working on your personal projects!"
+          : "user has no private sandboxes"
+    }
+    return {
+      title,
+      description,
+    }
+  }, [type, isOwnProfile])
+  const openModal = useCallback(() => setNewProjectModalOpen(true), [])
+  return (
+    <>
+      <Card className="flex flex-col items-center justify-center p-6 text-center h-[300px]">
+        <PlusCircle className="h-12 w-12 text-muted-foreground mb-4" />
+        <CardTitle className="text-xl mb-2">{text.title}</CardTitle>
+        <CardDescription className="mb-4">{text.description}</CardDescription>
+        {isOwnProfile && (
+          <Button onClick={openModal}>
+            <PlusCircle className="h-4 w-4 mr-2" />
+            Create Sandbox
+          </Button>
+        )}
+      </Card>
+      <NewProjectModal
+        open={newProjectModalOpen}
+        setOpen={setNewProjectModalOpen}
+      />
+    </>
+  )
+}
+// #endregion
+
+// #region StatsItem
+interface StatsItemProps {
+  icon: LucideIcon
+  label: string
+}
+
+const StatsItem = ({ icon: Icon, label }: StatsItemProps) => (
+  <div className="flex items-center gap-2">
+    <Icon size={16} />
+    <span className="text-sm text-muted-foreground">{label}</span>
+  </div>
+)
+// #endregion
+
+// #region Sub Badge
+const SubscriptionBadge = ({
+  generations,
+  tier = "FREE",
+}: {
+  generations: number
+  tier?: keyof typeof TIERS
+}) => {
+  return (
+    <div className="flex gap-2 items-center">
+      <Badge variant="secondary" className="text-sm cursor-pointer">
+        {tier}
+      </Badge>
+      <HoverCard>
+        <HoverCardTrigger>
+          <Button variant="ghost" size="smIcon" className="size-[26px]">
+            <Info size={16} />
+          </Button>
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <div className="w-full space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="font-medium">AI Generations</span>
+              <span>{`${generations} / ${TIERS[tier].generations}`}</span>
+            </div>
+            <Progress
+              value={generations}
+              max={TIERS[tier].generations}
+              className="w-full"
+            />
+          </div>
+          <Button size="sm" className="w-full mt-4">
+            <Sparkles className="mr-2 h-4 w-4" /> Upgrade to Pro
+          </Button>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}
+// #endregion

frontend/components/profile/navbar.tsx

@@ -0,0 +1,38 @@
+import Logo from "@/assets/logo.svg"
+import { ThemeSwitcher } from "@/components/ui/theme-switcher"
+import UserButton from "@/components/ui/userButton"
+import { User } from "@/lib/types"
+import Image from "next/image"
+import Link from "next/link"
+import { Button } from "../ui/button"
+
+export default function ProfileNavbar({ userData }: { userData: User }) {
+  return (
+    <nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-2">
+        <Link
+          href="/"
+          className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
+        >
+          <Image src={Logo} alt="Logo" width={36} height={36} />
+        </Link>
+        <h1 className="text-xl">
+          <span className="font-semibold">Sandbox</span>{" "}
+          <span className="text-xs font-medium text-muted-foreground">
+            by gitwit
+          </span>
+        </h1>
+      </div>
+      <div className="flex items-center space-x-4">
+        <ThemeSwitcher />
+        {Boolean(userData?.id) ? (
+          <UserButton userData={userData} />
+        ) : (
+          <Link href="/sign-in">
+            <Button>Login</Button>
+          </Link>
+        )}
+      </div>
+    </nav>
+  )
+}

frontend/components/ui/avatar.tsx

@@ -1,5 +1,4 @@
 import { cn } from "@/lib/utils"
-import Image from "next/image"
 
 export default function Avatar({
   name,
@@ -22,12 +21,12 @@ export default function Avatar({
   return (
     <div
       className={cn(
-        className,
-        "w-9 h-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium"
+        "size-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium",
+        className
       )}
     >
       {avatarUrl ? (
-        <Image
+        <img
           src={avatarUrl}
           alt={name || "User"}
           width={20}

frontend/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

frontend/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "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",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition active:scale-[0.99] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -26,7 +26,7 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
-        smIcon: "h-8 w-8",
+        smIcon: "size-8",
       },
     },
     defaultVariants: {

frontend/components/ui/form.tsx

@@ -1,6 +1,8 @@
+"use client"
+
+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 +12,8 @@ import {
   useFormContext,
 } from "react-hook-form"
 
-import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
 
 const Form = FormProvider
 
@@ -93,7 +95,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(className)}
+      className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -165,12 +167,12 @@ const FormMessage = React.forwardRef<
 FormMessage.displayName = "FormMessage"
 
 export {
+  useFormField,
   Form,
-  FormControl,
-  FormDescription,
-  FormField,
   FormItem,
   FormLabel,
+  FormControl,
+  FormDescription,
   FormMessage,
-  useFormField,
+  FormField,
 }

frontend/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

frontend/components/ui/progress.tsx

@@ -18,7 +18,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-primary transition-all rounded-full"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

frontend/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

frontend/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

frontend/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

frontend/components/ui/theme-provider.tsx

@@ -1,8 +1,11 @@
 "use client"
 
+import * as React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

frontend/components/ui/theme-switcher.tsx

@@ -17,7 +17,7 @@ export function ThemeSwitcher() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon" className="text-muted-foreground">
+        <Button variant="outline" size="icon" className="text-foreground">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

frontend/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "@/lib/utils"
 
@@ -29,4 +29,4 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/components/ui/userButton.tsx

@@ -9,22 +9,93 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
-import { LogOut, Sparkles } from "lucide-react"
+import {
+  Crown,
+  LayoutDashboard,
+  LogOut,
+  Sparkles,
+  User as UserIcon,
+} from "lucide-react"
+import Link from "next/link"
+
 import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import Avatar from "./avatar"
+import { Button } from "./button"
+import { TIERS } from "@/lib/tiers"
 
-export default function UserButton({ userData }: { userData: User }) {
-  if (!userData) return null
+// TODO: Remove this once we have a proper tier system
+const TIER_INFO = {
+  FREE: {
+    color: "text-gray-500",
+    icon: Sparkles,
+    limit: TIERS.FREE.generations,
+  },
+  PRO: {
+    color: "text-blue-500",
+    icon: Crown,
+    limit: TIERS.PRO.generations,
+  },
+  ENTERPRISE: {
+    color: "text-purple-500",
+    icon: Crown,
+    limit: TIERS.ENTERPRISE.generations,
+  },
+} as const
 
+export default function UserButton({
+  userData: initialUserData,
+}: {
+  userData: User
+}) {
+  const [userData, setUserData] = useState<User>(initialUserData)
+  const [isOpen, setIsOpen] = useState(false)
   const { signOut } = useClerk()
   const router = useRouter()
 
+  const fetchUserData = async () => {
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${userData.id}`,
+        {
+          headers: {
+            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          },
+          cache: "no-store",
+        }
+      )
+      if (res.ok) {
+        const updatedUserData = await res.json()
+        setUserData(updatedUserData)
+      }
+    } catch (error) {
+      console.error("Failed to fetch user data:", error)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchUserData()
+    }
+  }, [isOpen])
+
+  const tierInfo =
+    TIER_INFO[userData.tier as keyof typeof TIER_INFO] || TIER_INFO.FREE
+  const TierIcon = tierInfo.icon
+  const usagePercentage = Math.floor(
+    ((userData.generations || 0) * 100) / tierInfo.limit
+  )
+
+  const handleUpgrade = async () => {
+    router.push(`/@${userData.username}`)
+  }
+
   return (
-    <DropdownMenu>
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger>
         <Avatar name={userData.name} avatarUrl={userData.avatarUrl} />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-48" align="end">
+      <DropdownMenuContent className="w-64" align="end">
         <div className="py-1.5 px-2 w-full">
           <div className="font-medium">{userData.name}</div>
           <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
@@ -33,31 +104,80 @@ export default function UserButton({ userData }: { userData: User }) {
         </div>
 
         <DropdownMenuSeparator />
-        <div className="py-1.5 px-2 w-full flex flex-col items-start text-sm">
-          <div className="flex items-center">
-            <Sparkles className={`h-4 w-4 mr-2 text-indigo-500`} />
-            AI Usage: {userData.generations}/1000
+
+        <DropdownMenuItem className="cursor-pointer" asChild>
+          <Link href={"/dashboard"}>
+            <LayoutDashboard className="mr-2 size-4" />
+            <span>Dashboard</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer" asChild>
+          <Link href={`/@${userData.username}`}>
+            <UserIcon className="mr-2 size-4" />
+            <span>Profile</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+
+        <div className="py-1.5 px-2 w-full">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1.5">
+              <TierIcon className={`h-4 w-4 ${tierInfo.color}`} />
+              <span className="text-sm font-medium">
+                {userData.tier || "FREE"} Plan
+              </span>
             </div>
-          <div className="rounded-full w-full mt-2 h-2 overflow-hidden bg-secondary">
+            {(userData.tier === "FREE" || userData.tier === "PRO") && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 text-xs border-b hover:border-b-foreground"
+                onClick={handleUpgrade}
+              >
+                Upgrade
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+        <div className="px-2 py-1.5">
+          <div className="w-full">
+            <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+              <span>AI Usage</span>
+              <span>
+                {userData.generations}/{tierInfo.limit}
+              </span>
+            </div>
+
+            <div className="rounded-full w-full h-2 overflow-hidden bg-secondary mb-1">
               <div
-              className="h-full bg-indigo-500 rounded-full"
+                className={`h-full rounded-full transition-all duration-300 ${
+                  usagePercentage > 90
+                    ? "bg-red-500"
+                    : usagePercentage > 75
+                    ? "bg-yellow-500"
+                    : tierInfo.color.replace("text-", "bg-")
+                }`}
                 style={{
-                width: `${(userData.generations * 100) / 1000}%`,
+                  width: `${Math.min(usagePercentage, 100)}%`,
                 }}
               />
             </div>
           </div>
+        </div>
         <DropdownMenuSeparator />
 
         {/* <DropdownMenuItem className="cursor-pointer">
-          <Pencil className="mr-2 h-4 w-4" />
+          <Pencil className="mr-2 size-4" />
           <span>Edit Profile</span>
         </DropdownMenuItem> */}
         <DropdownMenuItem
           onClick={() => signOut(() => router.push("/"))}
           className="!text-destructive cursor-pointer"
         >
-          <LogOut className="mr-2 h-4 w-4" />
+          <LogOut className="mr-2 size-4" />
           <span>Log Out</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

frontend/context/TerminalContext.tsx

@@ -20,6 +20,9 @@ interface TerminalContextType {
   createNewTerminal: (command?: string) => Promise<void>
   closeTerminal: (id: string) => void
   deploy: (callback: () => void) => void
+  getAppExists:
+    | ((appName: string) => Promise<{ success: boolean; exists?: boolean }>)
+    | null
 }
 
 const TerminalContext = createContext<TerminalContextType | undefined>(
@@ -35,6 +38,19 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
   >([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
+  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
+
+  // Listen for the "ready" signal from the socket
+  React.useEffect(() => {
+    if (socket) {
+      socket.on("ready", () => {
+        setIsSocketReady(true)
+      })
+    }
+    return () => {
+      if (socket) socket.off("ready")
+    }
+  }, [socket])
 
   const createNewTerminal = async (command?: string): Promise<void> => {
     if (!socket) return
@@ -78,6 +94,20 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
     })
   }
 
+  const getAppExists = async (
+    appName: string
+  ): Promise<{ success: boolean; exists?: boolean }> => {
+    console.log("Is there a socket: " + !!socket)
+    if (!socket) {
+      console.error("Couldn't check if app exists: No socket")
+      return { success: false }
+    }
+    const response: { success: boolean; exists?: boolean } = await new Promise(
+      (resolve) => socket.emit("getAppExists", { appName }, resolve)
+    )
+    return response
+  }
+
   const value = {
     terminals,
     setTerminals,
@@ -88,6 +118,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
     createNewTerminal,
     closeTerminal,
     deploy,
+    getAppExists: isSocketReady ? getAppExists : null,
   }
 
   return (

frontend/lib/actions.ts

@@ -1,6 +1,10 @@
 "use server"
 
 import { revalidatePath } from "next/cache"
+import { z } from "zod"
+import { editUserSchema } from "./schema"
+import { UserLink } from "./types"
+import { parseSocialLink } from "./utils"
 
 export async function createSandbox(body: {
   type: string
@@ -91,3 +95,110 @@ export async function unshareSandbox(sandboxId: string, userId: string) {
 
   revalidatePath(`/code/${sandboxId}`)
 }
+
+export async function toggleLike(sandboxId: string, userId: string) {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/sandbox/like`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ sandboxId, userId }),
+    }
+  )
+  revalidatePath(`/[username]`, "page")
+  revalidatePath(`/dashboard`, "page")
+}
+
+const UpdateErrorSchema = z.object({
+  error: z
+    .union([
+      z.string(),
+      z.array(
+        z.object({
+          path: z.array(z.string()),
+          message: z.string(),
+        })
+      ),
+    ])
+    .optional(),
+})
+
+interface FormState {
+  message: string
+  error?: any
+  newRoute?: string
+  fields?: Record<string, unknown>
+}
+export async function updateUser(
+  prevState: any,
+  formData: FormData
+): Promise<FormState> {
+  let data = Object.fromEntries(formData)
+  let links: UserLink[] = []
+  Object.entries(data).forEach(([key, value]) => {
+    if (key.startsWith("link")) {
+      const [_, index] = key.split(".")
+      if (value) {
+        links.splice(parseInt(index), 0, parseSocialLink(value as string))
+        delete data[key]
+      }
+    }
+  })
+  // @ts-ignore
+  data.links = links
+  try {
+    const validatedData = editUserSchema.parse(data)
+    const changedUsername = validatedData.username !== validatedData.oldUsername
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+        },
+        body: JSON.stringify({
+          id: validatedData.id,
+          username: data.username ?? undefined,
+          name: data.name ?? undefined,
+          bio: data.bio ?? undefined,
+          personalWebsite: data.personalWebsite ?? undefined,
+          links: data.links ?? undefined,
+        }),
+      }
+    )
+
+    const responseData = await res.json()
+
+    // Validate the response using our error schema
+    const parseResult = UpdateErrorSchema.safeParse(responseData)
+
+    if (!parseResult.success) {
+      return {
+        message: "Unexpected error occurred",
+        error: parseResult.error,
+        fields: validatedData,
+      }
+    }
+
+    if (changedUsername) {
+      const newRoute = `/@${validatedData.username}`
+      return { message: "Successfully updated", newRoute }
+    }
+    revalidatePath(`/[username]`, "page")
+    return { message: "Successfully updated" }
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        message: "Invalid data",
+        error: error.errors,
+        fields: data,
+      }
+    }
+
+    return { message: "An unexpected error occurred", fields: data }
+  }
+}

frontend/lib/constants/index.ts

@@ -0,0 +1,14 @@
+export const KNOWN_PLATFORMS = [
+  "github",
+  "twitter",
+  "instagram",
+  "bluesky",
+  "linkedin",
+  "youtube",
+  "twitch",
+  "discord",
+  "mastodon",
+  "threads",
+  "gitlab",
+  "generic",
+] as const

frontend/lib/data/index.ts

@@ -1,3 +1,37 @@
+import {
+  AtSign,
+  Github,
+  GitlabIcon as GitlabLogo,
+  Globe,
+  Instagram,
+  Link,
+  Linkedin,
+  MessageCircle,
+  Twitch,
+  Twitter,
+  Youtube,
+} from "lucide-react"
+import { KnownPlatform } from "../types"
+
+export const socialIcons: Record<
+  KnownPlatform | "website",
+  React.ComponentType<any>
+> = {
+  github: Github,
+  twitter: Twitter,
+  instagram: Instagram,
+  bluesky: AtSign,
+  linkedin: Linkedin,
+  youtube: Youtube,
+  twitch: Twitch,
+  discord: MessageCircle,
+  mastodon: AtSign,
+  threads: AtSign,
+  gitlab: GitlabLogo,
+  generic: Link,
+  website: Globe,
+}
+
 export const projectTemplates: {
   id: string
   name: string
@@ -33,4 +67,11 @@ export const projectTemplates: {
     description: "A faster way to build and share data apps",
     disabled: false,
   },
+  {
+    id: "php",
+    name: "PHP",
+    description: "PHP development environment",
+    icon: "/project-icons/php.svg",
+    disabled: false,
+  },
 ]

frontend/lib/schema/index.ts

@@ -0,0 +1,20 @@
+import { z } from "zod"
+import { KNOWN_PLATFORMS } from "../constants"
+
+export const editUserSchema = z.object({
+  id: z.string().trim(),
+  username: z.string().trim().min(1, "Username must be at least 1 character"),
+  oldUsername: z.string().trim(),
+  name: z.string().trim().min(1, "Name must be at least 1 character"),
+  bio: z.string().trim().optional(),
+  personalWebsite: z.string().trim().optional(),
+  links: z
+    .array(
+      z.object({
+        url: z.string().trim(),
+        platform: z.enum(KNOWN_PLATFORMS),
+      })
+    )
+    .catch([]),
+})
+export type EditUserSchema = z.infer<typeof editUserSchema>

frontend/lib/templates/index.ts

@@ -0,0 +1,290 @@
+export interface TemplateConfig {
+  id: string
+  name: string
+  runCommand: string
+  fileStructure: {
+    [key: string]: {
+      purpose: string
+      description: string
+    }
+  }
+  conventions: string[]
+  dependencies?: {
+    [key: string]: string
+  }
+  scripts?: {
+    [key: string]: string
+  }
+}
+
+export const templateConfigs: { [key: string]: TemplateConfig } = {
+  reactjs: {
+    id: "reactjs",
+    name: "React",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "src/": {
+        purpose: "source",
+        description: "Contains all React components and application logic",
+      },
+      "src/components/": {
+        purpose: "components",
+        description: "Reusable React components",
+      },
+      "src/lib/": {
+        purpose: "utilities",
+        description: "Utility functions and shared code",
+      },
+      "src/App.tsx": {
+        purpose: "entry",
+        description: "Main application component",
+      },
+      "src/index.tsx": {
+        purpose: "entry",
+        description: "Application entry point",
+      },
+      "src/index.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "public/": {
+        purpose: "static",
+        description: "Static assets and index.html",
+      },
+      "tsconfig.json": {
+        purpose: "config",
+        description: "TypeScript configuration",
+      },
+      "vite.config.ts": {
+        purpose: "config",
+        description: "Vite bundler configuration",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+    },
+    conventions: [
+      "Use functional components with hooks",
+      "Follow React naming conventions (PascalCase for components)",
+      "Keep components small and focused",
+      "Use TypeScript for type safety",
+    ],
+    dependencies: {
+      "@radix-ui/react-icons": "^1.3.0",
+      "@radix-ui/react-slot": "^1.1.0",
+      "class-variance-authority": "^0.7.0",
+      clsx: "^2.1.1",
+      "lucide-react": "^0.441.0",
+      react: "^18.3.1",
+      "react-dom": "^18.3.1",
+      "tailwind-merge": "^2.5.2",
+      "tailwindcss-animate": "^1.0.7",
+    },
+    scripts: {
+      dev: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+    },
+  },
+  // Next.js template config
+  nextjs: {
+    id: "nextjs",
+    name: "NextJS",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "pages/": {
+        purpose: "routing",
+        description: "Page components and API routes",
+      },
+      "pages/api/": {
+        purpose: "api",
+        description: "API route handlers",
+      },
+      "pages/_app.tsx": {
+        purpose: "entry",
+        description: "Application wrapper component",
+      },
+      "pages/index.tsx": {
+        purpose: "page",
+        description: "Homepage component",
+      },
+      "public/": {
+        purpose: "static",
+        description: "Static assets and files",
+      },
+      "styles/": {
+        purpose: "styles",
+        description: "CSS modules and global styles",
+      },
+      "styles/globals.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "styles/Home.module.css": {
+        purpose: "styles",
+        description: "Homepage-specific styles",
+      },
+      "next.config.js": {
+        purpose: "config",
+        description: "Next.js configuration",
+      },
+      "next-env.d.ts": {
+        purpose: "types",
+        description: "Next.js TypeScript declarations",
+      },
+      "tsconfig.json": {
+        purpose: "config",
+        description: "TypeScript configuration",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+    },
+    conventions: [
+      "Use file-system based routing",
+      "Keep API routes in pages/api",
+      "Use CSS Modules for component styles",
+      "Follow Next.js data fetching patterns",
+    ],
+    dependencies: {
+      next: "^14.1.0",
+      react: "^18.2.0",
+      "react-dom": "18.2.0",
+      tailwindcss: "^3.4.1",
+    },
+    scripts: {
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
+    },
+  },
+  // Streamlit template config
+  streamlit: {
+    id: "streamlit",
+    name: "Streamlit",
+    runCommand: "./venv/bin/streamlit run main.py --server.runOnSave true",
+    fileStructure: {
+      "main.py": {
+        purpose: "entry",
+        description: "Main Streamlit application file",
+      },
+      "requirements.txt": {
+        purpose: "dependencies",
+        description: "Python package dependencies",
+      },
+      Procfile: {
+        purpose: "deployment",
+        description: "Deployment configuration for hosting platforms",
+      },
+      "venv/": {
+        purpose: "environment",
+        description: "Python virtual environment directory",
+      },
+    },
+    conventions: [
+      "Use Streamlit components for UI",
+      "Follow PEP 8 style guide",
+      "Keep dependencies in requirements.txt",
+      "Use virtual environment for isolation",
+    ],
+    dependencies: {
+      streamlit: "^1.40.0",
+      altair: "^5.5.0",
+    },
+    scripts: {
+      start: "streamlit run main.py",
+      dev: "./venv/bin/streamlit run main.py --server.runOnSave true",
+    },
+  },
+  // HTML template config
+  vanillajs: {
+    id: "vanillajs",
+    name: "HTML/JS",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "index.html": {
+        purpose: "entry",
+        description: "Main HTML entry point",
+      },
+      "style.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "script.js": {
+        purpose: "scripts",
+        description: "JavaScript application logic",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+      "package-lock.json": {
+        purpose: "config",
+        description: "Locked dependency versions",
+      },
+      "vite.config.js": {
+        purpose: "config",
+        description: "Vite bundler configuration",
+      },
+    },
+    conventions: [
+      "Use semantic HTML elements",
+      "Keep CSS modular and organized",
+      "Write clean, modular JavaScript",
+      "Follow modern ES6+ practices",
+    ],
+    dependencies: {
+      vite: "^5.0.12",
+    },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+  },
+  // PHP template config
+  php: {
+    id: "php",
+    name: "PHP",
+    runCommand: "npx vite",
+    fileStructure: {
+      "index.php": {
+        purpose: "entry",
+        description: "Main PHP entry point",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Frontend dependencies and scripts",
+      },
+      "package-lock.json": {
+        purpose: "config",
+        description: "Locked dependency versions",
+      },
+      "vite.config.js": {
+        purpose: "config",
+        description: "Vite configuration for frontend assets",
+      },
+      "node_modules/": {
+        purpose: "dependencies",
+        description: "Frontend dependency files",
+      },
+    },
+    conventions: [
+      "Follow PSR-12 coding standards",
+      "Use modern PHP 8+ features",
+      "Organize assets with Vite",
+      "Keep PHP logic separate from presentation",
+    ],
+    dependencies: {
+      vite: "^5.0.0",
+    },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+  },
+}

frontend/lib/tiers.ts

@@ -0,0 +1,19 @@
+export const TIERS = {
+  FREE: {
+    //   generations: 100,
+    //   maxTokens: 1024,
+    generations: 1000,
+    maxTokens: 4096,
+    model: "claude-3-5-sonnet-20240620",
+  },
+  PRO: {
+    generations: 500,
+    maxTokens: 2048,
+    model: "claude-3-5-sonnet-20240620",
+  },
+  ENTERPRISE: {
+    generations: 1000,
+    maxTokens: 4096,
+    model: "claude-3-5-sonnet-20240620",
+  },
+}

frontend/lib/types.ts

@@ -1,5 +1,7 @@
 // DB Types
 
+import { KNOWN_PLATFORMS } from "./constants"
+
 export type User = {
   id: string
   name: string
@@ -8,10 +10,22 @@ export type User = {
   avatarUrl: string | null
   createdAt: Date
   generations: number
+  bio: string | null
+  personalWebsite: string | null
+  links: UserLink[]
+  tier: "FREE" | "PRO" | "ENTERPRISE"
+  tierExpiresAt: Date
+  lastResetDate: number
   sandbox: Sandbox[]
   usersToSandboxes: UsersToSandboxes[]
 }
 
+export type KnownPlatform = (typeof KNOWN_PLATFORMS)[number]
+export type UserLink = {
+  url: string
+  platform: KnownPlatform
+}
+
 export type Sandbox = {
   id: string
   name: string
@@ -19,9 +33,13 @@ export type Sandbox = {
   visibility: "public" | "private"
   createdAt: Date
   userId: string
+  likeCount: number
+  viewCount: number
   usersToSandboxes: UsersToSandboxes[]
 }
-
+export type SandboxWithLiked = Sandbox & {
+  liked: boolean
+}
 export type UsersToSandboxes = {
   userId: string
   sandboxId: string

frontend/lib/utils.ts

@@ -2,7 +2,7 @@ import { type ClassValue, clsx } from "clsx"
 // import { toast } from "sonner"
 import { twMerge } from "tailwind-merge"
 import fileExtToLang from "./file-extension-to-language.json"
-import { TFile, TFolder } from "./types"
+import { KnownPlatform, TFile, TFolder, UserLink } from "./types"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -98,3 +98,57 @@ export function sortFileExplorer(
       return item
     })
 }
+
+export function parseSocialLink(url: string): UserLink {
+  try {
+    // Handle empty or invalid URLs
+    if (!url) return { url: "", platform: "generic" }
+
+    // Remove protocol and www prefix for consistent parsing
+    const cleanUrl = url
+      .toLowerCase()
+      .replace(/^https?:\/\//, "")
+      .replace(/^www\./, "")
+      .split("/")[0] // Get just the domain part
+
+    // Platform detection mapping
+    const platformPatterns: Record<
+      Exclude<KnownPlatform, "generic">,
+      RegExp
+    > = {
+      github: /github\.com/,
+      twitter: /(?:twitter\.com|x\.com|t\.co)/,
+      instagram: /instagram\.com/,
+      bluesky: /(?:bsky\.app|bluesky\.social)/,
+      linkedin: /linkedin\.com/,
+      youtube: /(?:youtube\.com|youtu\.be)/,
+      twitch: /twitch\.tv/,
+      discord: /discord\.(?:gg|com)/,
+      mastodon: /mastodon\.(?:social|online|world)/,
+      threads: /threads\.net/,
+      gitlab: /gitlab\.com/,
+    }
+
+    // Check URL against each pattern
+    for (const [platform, pattern] of Object.entries(platformPatterns)) {
+      if (pattern.test(cleanUrl)) {
+        return {
+          url,
+          platform: platform as KnownPlatform,
+        }
+      }
+    }
+
+    // Fall back to generic if no match found
+    return {
+      url,
+      platform: "generic",
+    }
+  } catch (error) {
+    console.error("Error parsing social link:", error)
+    return {
+      url: url || "",
+      platform: "generic",
+    }
+  }
+}

frontend/package.json

@@ -9,11 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.32.1",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.7",
     "@clerk/nextjs": "^4.29.12",
     "@clerk/themes": "^1.7.12",
     "@codemirror/lang-javascript": "^6.2.2",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.1",
     "@liveblocks/client": "^1.12.0",
     "@liveblocks/node": "^1.12.0",
     "@liveblocks/react": "^1.12.0",
@@ -21,17 +22,21 @@
     "@monaco-editor/react": "^4.6.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@react-three/fiber": "^8.16.6",
     "@uiw/codemirror-theme-vscode": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.5",
@@ -50,11 +55,12 @@
     "lucide-react": "^0.365.0",
     "monaco-themes": "^0.4.4",
     "next": "14.1.3",
-    "next-themes": "^0.3.0",
+    "next-themes": "^0.4.4",
+    "openai": "^4.73.1",
     "posthog-js": "^1.147.0",
     "react": "^18.3.1",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.3",
+    "react-hook-form": "^7.54.2",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.0.16",
     "react-syntax-highlighter": "^15.5.0",
@@ -69,7 +75,7 @@
     "y-monaco": "^0.1.5",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.15",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/estree": "^1.0.6",

frontend/public/project-icons/php.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="14" fill="#8892BF"/>
+<path d="M14.4392 10H16.1192L15.6444 12.5242H17.154C17.9819 12.5419 18.5986 12.7269 19.0045 13.0793C19.4184 13.4316 19.5402 14.1014 19.3698 15.0881L18.5541 19.4889H16.8497L17.6288 15.2863C17.7099 14.8457 17.6856 14.533 17.5558 14.348C17.426 14.163 17.146 14.0705 16.7158 14.0705L15.3644 14.0573L14.3661 19.4889H12.6861L14.4392 10Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.74092 12.5243H10.0036C10.9612 12.533 11.6552 12.8327 12.0854 13.4229C12.5156 14.0132 12.6576 14.8193 12.5115 15.8414C12.4548 16.3085 12.3289 16.7665 12.1341 17.2159C11.9474 17.6652 11.6878 18.0704 11.355 18.4317C10.9491 18.8898 10.5149 19.1805 10.0523 19.304C9.58969 19.4274 9.11076 19.489 8.61575 19.489H7.15484L6.69222 22H5L6.74092 12.5243ZM7.43485 17.9956L8.16287 14.0441H8.40879C8.49815 14.0441 8.5914 14.0396 8.6888 14.0309C9.33817 14.0221 9.87774 14.0882 10.308 14.2291C10.7462 14.37 10.8923 14.9031 10.7462 15.8282C10.5678 16.9296 10.2186 17.5727 9.69926 17.7577C9.1799 17.934 8.53053 18.0176 7.75138 18.0088H7.58094C7.53224 18.0088 7.48355 18.0043 7.43485 17.9956Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4365 12.5243H21.1738L19.4329 22H21.1251L21.5878 19.489H23.0487C23.5437 19.489 24.0226 19.4274 24.4852 19.304C24.9479 19.1805 25.382 18.8898 25.7879 18.4317C26.1207 18.0704 26.3803 17.6652 26.567 17.2159C26.7618 16.7665 26.8877 16.3085 26.9444 15.8414C27.0905 14.8193 26.9486 14.0132 26.5183 13.4229C26.0881 12.8327 25.3942 12.533 24.4365 12.5243ZM22.5958 14.0441L21.8678 17.9956C21.9165 18.0043 21.9652 18.0088 22.0139 18.0088H22.1843C22.9635 18.0176 23.6128 17.934 24.1322 17.7577C24.6515 17.5727 25.0007 16.9296 25.1792 15.8282C25.3253 14.9031 25.1792 14.37 24.7409 14.2291C24.3107 14.0882 23.7711 14.0221 23.1217 14.0309C23.0243 14.0396 22.9311 14.0441 22.8417 14.0441H22.5958Z" fill="white"/>
+</svg>