Merge branch 'refs/heads/main' into feature/ai-chat

# Conflicts:
#	frontend/components/dashboard/newProject.tsx
#	frontend/components/editor/AIChat/ChatMessage.tsx
#	frontend/components/editor/AIChat/ContextDisplay.tsx
#	frontend/components/editor/AIChat/index.tsx
#	frontend/components/editor/index.tsx
#	frontend/components/editor/sidebar/index.tsx
#	frontend/components/editor/terminals/terminal.tsx

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2024 Ishaan Dey
+Copyright (c) 2024 GitWit, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

backend/server/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": false,
+    "insertFinalNewline": true
+}

backend/server/nodemon.json

@@ -1,5 +1,7 @@
 {
-  "watch": ["src"],
+  "watch": [
+    "src"
+  ],
   "ext": "ts",
   "exec": "concurrently \"npx tsc --watch\" \"ts-node src/index.ts\""
 }

backend/server/src/AIWorker.ts

@@ -0,0 +1,90 @@
+// 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

@@ -1,37 +1,40 @@
-import { SSHSocketClient, SSHConfig } from "./SSHSocketClient"
+import { SSHConfig, SSHSocketClient } from "./SSHSocketClient"
 
+// Interface for the response structure from Dokku commands
 export interface DokkuResponse {
-  ok: boolean;
+  ok: boolean
-  output: string;
+  output: string
 }
 
+// DokkuClient class extends SSHSocketClient to interact with Dokku via SSH
 export class DokkuClient extends SSHSocketClient {
-
   constructor(config: SSHConfig) {
-    super(
+    // Initialize with Dokku daemon socket path
-      config,
+    super(config, "/var/run/dokku-daemon/dokku-daemon.sock")
-      "/var/run/dokku-daemon/dokku-daemon.sock"
-    )
   }
 
+  // Send a command to Dokku and parse the response
   async sendCommand(command: string): Promise<DokkuResponse> {
     try {
-      const response = await this.sendData(command);
+      const response = await this.sendData(command)
 
       if (typeof response !== "string") {
-        throw new Error("Received data is not a string");
+        throw new Error("Received data is not a string")
       }
 
-      return JSON.parse(response);
+      // Parse the JSON response from Dokku
+      return JSON.parse(response)
     } catch (error: any) {
-      throw new Error(`Failed to send command: ${error.message}`);
+      throw new Error(`Failed to send command: ${error.message}`)
     }
   }
 
+  // List all deployed Dokku apps
   async listApps(): Promise<string[]> {
-    const response = await this.sendCommand("apps:list");
+    const response = await this.sendCommand("apps:list")
-    return response.output.split("\n").slice(1); // Split by newline and ignore the first line (header)
+    // Split the output by newline and remove the header
+    return response.output.split("\n").slice(1)
   }
 }
 
-export { SSHConfig };
+export { SSHConfig }

backend/server/src/FileManager.ts

@@ -0,0 +1,508 @@
+import { FilesystemEvent, Sandbox, WatchHandle } from "e2b"
+import path from "path"
+import RemoteFileStorage from "./RemoteFileStorage"
+import { MAX_BODY_SIZE } from "./ratelimit"
+import { TFile, TFileData, TFolder } from "./types"
+
+// Define the structure for sandbox files
+export type SandboxFiles = {
+  files: (TFolder | TFile)[]
+  fileData: TFileData[]
+}
+
+// Convert list of paths to the hierchical file structure used by the editor
+function generateFileStructure(paths: string[]): (TFolder | TFile)[] {
+  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
+
+  paths.forEach((path) => {
+    const parts = path.split("/")
+    let current: TFolder = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1 && part.length
+      const existing = current.children.find((child) => child.name === part)
+
+      if (existing) {
+        if (!isFile) {
+          current = existing as TFolder
+        }
+      } else {
+        if (isFile) {
+          const file: TFile = { id: `/${parts.join("/")}`, type: "file", name: part }
+          current.children.push(file)
+        } else {
+          const folder: TFolder = {
+            id: `/${parts.slice(0, i + 1).join("/")}`,
+            type: "folder",
+            name: part,
+            children: [],
+          }
+          current.children.push(folder)
+          current = folder
+        }
+      }
+    }
+  })
+
+  return root.children
+}
+
+// FileManager class to handle file operations in a sandbox
+export class FileManager {
+  private sandboxId: string
+  private sandbox: Sandbox
+  public sandboxFiles: SandboxFiles
+  private fileWatchers: WatchHandle[] = []
+  private dirName = "/home/user/project"
+  private refreshFileList: (files: SandboxFiles) => void
+
+  // Constructor to initialize the FileManager
+  constructor(
+    sandboxId: string,
+    sandbox: Sandbox,
+    refreshFileList: (files: SandboxFiles) => void
+  ) {
+    this.sandboxId = sandboxId
+    this.sandbox = sandbox
+    this.sandboxFiles = { files: [], fileData: [] }
+    this.refreshFileList = refreshFileList
+  }
+
+  // Fetch file data from list of paths
+  private async generateFileData(paths: string[]): Promise<TFileData[]> {
+    const fileData: TFileData[] = []
+
+    for (const path of paths) {
+      const parts = path.split("/")
+      const isFile = parts.length > 0 && parts[parts.length - 1].length > 0
+
+      if (isFile) {
+        const fileId = `/${parts.join("/")}`
+        const data = await RemoteFileStorage.fetchFileContent(`projects/${this.sandboxId}${fileId}`)
+        fileData.push({ id: fileId, data })
+      }
+    }
+
+    return fileData
+  }
+
+  // Convert local file path to remote path
+  private getRemoteFileId(localId: string): string {
+    return `projects/${this.sandboxId}${localId}`
+  }
+
+  // Convert remote file path to local file path
+  private getLocalFileId(remoteId: string): string | undefined {
+    const allParts = remoteId.split("/")
+    if (allParts[1] !== this.sandboxId) return undefined;
+    return allParts.slice(2).join("/")
+  }
+
+  // Convert remote file paths to local file paths
+  private getLocalFileIds(remoteIds: string[]): string[] {
+    return remoteIds
+      .map(this.getLocalFileId.bind(this))
+      .filter((id) => id !== undefined);
+  }
+
+  // Download files from remote storage
+  private async updateFileData(): Promise<TFileData[]> {
+    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
+    const localPaths = this.getLocalFileIds(remotePaths)
+    this.sandboxFiles.fileData = await this.generateFileData(localPaths)
+    return this.sandboxFiles.fileData
+  }
+
+  // Update file structure
+  private async updateFileStructure(): Promise<(TFolder | TFile)[]> {
+    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
+    const localPaths = this.getLocalFileIds(remotePaths)
+    this.sandboxFiles.files = generateFileStructure(localPaths)
+    return this.sandboxFiles.files
+  }
+
+  // Initialize the FileManager
+  async initialize() {
+
+    // Download files from remote file storage
+    await this.updateFileStructure()
+    await this.updateFileData()
+
+    // Copy all files from the project to the container
+    const promises = this.sandboxFiles.fileData.map(async (file) => {
+      try {
+        const filePath = path.join(this.dirName, file.id)
+        const parentDirectory = path.dirname(filePath)
+        if (!this.sandbox.files.exists(parentDirectory)) {
+          await this.sandbox.files.makeDir(parentDirectory)
+        }
+        await this.sandbox.files.write(filePath, file.data)
+      } catch (e: any) {
+        console.log("Failed to create file: " + e)
+      }
+    })
+    await Promise.all(promises)
+
+    // Make the logged in user the owner of all project files
+    this.fixPermissions()
+
+    await this.watchDirectory(this.dirName)
+    await this.watchSubdirectories(this.dirName)
+  }
+
+  // Check if the given path is a directory
+  private async isDirectory(directoryPath: string): Promise<boolean> {
+    try {
+      const result = await this.sandbox.commands.run(
+        `[ -d "${directoryPath}" ] && echo "true" || echo "false"`
+      )
+      return result.stdout.trim() === "true"
+    } catch (e: any) {
+      console.log("Failed to check if directory: " + e)
+      return false
+    }
+  }
+
+  // Change the owner of the project directory to user
+  private async fixPermissions() {
+    try {
+      await this.sandbox.commands.run(
+        `sudo chown -R user "${this.dirName}"`
+      )
+    } catch (e: any) {
+      console.log("Failed to fix permissions: " + e)
+    }
+  }
+
+  // Watch a directory for changes
+  async watchDirectory(directory: string): Promise<WatchHandle | undefined> {
+    try {
+      const handle = await this.sandbox.files.watch(
+        directory,
+        async (event: FilesystemEvent) => {
+          try {
+            function removeDirName(path: string, dirName: string) {
+              return path.startsWith(dirName)
+                ? path.slice(dirName.length)
+                : path
+            }
+
+            // This is the absolute file path in the container
+            const containerFilePath = path.posix.join(directory, event.name)
+            // This is the file path relative to the project directory
+            const sandboxFilePath = removeDirName(containerFilePath, this.dirName)
+            // This is the directory being watched relative to the project directory
+            const sandboxDirectory = removeDirName(directory, this.dirName)
+
+            // Helper function to find a folder by id
+            function findFolderById(
+              files: (TFolder | TFile)[],
+              folderId: string
+            ) {
+              return files.find(
+                (file: TFolder | TFile) =>
+                  file.type === "folder" && file.id === folderId
+              )
+            }
+
+            // Handle file/directory creation event
+            if (event.type === "create") {
+              const folder = findFolderById(
+                this.sandboxFiles.files,
+                sandboxDirectory
+              ) as TFolder
+              const isDir = await this.isDirectory(containerFilePath)
+
+              const newItem = isDir
+                ? ({
+                  id: sandboxFilePath,
+                  name: event.name,
+                  type: "folder",
+                  children: [],
+                } as TFolder)
+                : ({
+                  id: sandboxFilePath,
+                  name: event.name,
+                  type: "file",
+                } as TFile)
+
+              if (folder) {
+                // If the folder exists, add the new item (file/folder) as a child
+                folder.children.push(newItem)
+              } else {
+                // If folder doesn't exist, add the new item to the root
+                this.sandboxFiles.files.push(newItem)
+              }
+
+              if (!isDir) {
+                const fileData = await this.sandbox.files.read(
+                  containerFilePath
+                )
+                const fileContents =
+                  typeof fileData === "string" ? fileData : ""
+                this.sandboxFiles.fileData.push({
+                  id: sandboxFilePath,
+                  data: fileContents,
+                })
+              }
+
+              console.log(`Create ${sandboxFilePath}`)
+            }
+
+            // Handle file/directory removal or rename event
+            else if (event.type === "remove" || event.type == "rename") {
+              const folder = findFolderById(
+                this.sandboxFiles.files,
+                sandboxDirectory
+              ) as TFolder
+              const isDir = await this.isDirectory(containerFilePath)
+
+              const isFileMatch = (file: TFolder | TFile | TFileData) =>
+                file.id === sandboxFilePath ||
+                file.id.startsWith(containerFilePath + "/")
+
+              if (folder) {
+                // Remove item from its parent folder
+                folder.children = folder.children.filter(
+                  (file: TFolder | TFile) => !isFileMatch(file)
+                )
+              } else {
+                // Remove from the root if it's not inside a folder
+                this.sandboxFiles.files = this.sandboxFiles.files.filter(
+                  (file: TFolder | TFile) => !isFileMatch(file)
+                )
+              }
+
+              // Also remove any corresponding file data
+              this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+                (file: TFileData) => !isFileMatch(file)
+              )
+
+              console.log(`Removed: ${sandboxFilePath}`)
+            }
+
+            // Handle file write event
+            else if (event.type === "write") {
+              const folder = findFolderById(
+                this.sandboxFiles.files,
+                sandboxDirectory
+              ) as TFolder
+              const fileToWrite = this.sandboxFiles.fileData.find(
+                (file) => file.id === sandboxFilePath
+              )
+
+              if (fileToWrite) {
+                fileToWrite.data = await this.sandbox.files.read(
+                  containerFilePath
+                )
+                console.log(`Write to ${sandboxFilePath}`)
+              } else {
+                // If the file is part of a folder structure, locate it and update its data
+                const fileInFolder = folder?.children.find(
+                  (file) => file.id === sandboxFilePath
+                )
+                if (fileInFolder) {
+                  const fileData = await this.sandbox.files.read(
+                    containerFilePath
+                  )
+                  const fileContents =
+                    typeof fileData === "string" ? fileData : ""
+                  this.sandboxFiles.fileData.push({
+                    id: sandboxFilePath,
+                    data: fileContents,
+                  })
+                  console.log(`Write to ${sandboxFilePath}`)
+                }
+              }
+            }
+
+            // Tell the client to reload the file list
+            this.refreshFileList(this.sandboxFiles)
+          } catch (error) {
+            console.error(
+              `Error handling ${event.type} event for ${event.name}:`,
+              error
+            )
+          }
+        },
+        { timeout: 0 }
+      )
+      this.fileWatchers.push(handle)
+      return handle
+    } catch (error) {
+      console.error(`Error watching filesystem:`, error)
+    }
+  }
+
+  // Watch subdirectories recursively
+  async watchSubdirectories(directory: string) {
+    const dirContent = await this.sandbox.files.list(directory)
+    await Promise.all(
+      dirContent.map(async (item) => {
+        if (item.type === "dir") {
+          console.log("Watching " + item.path)
+          await this.watchDirectory(item.path)
+        }
+      })
+    )
+  }
+
+  // Get file content
+  async getFile(fileId: string): Promise<string | undefined> {
+    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    return file?.data
+  }
+
+  // Get folder content
+  async getFolder(folderId: string): Promise<string[]> {
+    const remotePaths = await RemoteFileStorage.getFolder(this.getRemoteFileId(folderId))
+    return this.getLocalFileIds(remotePaths)
+  }
+
+  // Save file content
+  async saveFile(fileId: string, body: string): Promise<void> {
+    if (!fileId) return // handles saving when no file is open
+
+    if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
+      throw new Error("File size too large. Please reduce the file size.")
+    }
+    await RemoteFileStorage.saveFile(this.getRemoteFileId(fileId), body)
+    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    if (!file) return
+    file.data = body
+
+    await this.sandbox.files.write(path.posix.join(this.dirName, file.id), body)
+    this.fixPermissions()
+  }
+
+  // Move a file to a different folder
+  async moveFile(
+    fileId: string,
+    folderId: string
+  ): Promise<(TFolder | TFile)[]> {
+    const fileData = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
+    if (!fileData || !file) return this.sandboxFiles.files
+
+    const parts = fileId.split("/")
+    const newFileId = folderId + "/" + parts.pop()
+
+    await this.moveFileInContainer(fileId, newFileId)
+
+    await this.fixPermissions()
+
+    fileData.id = newFileId
+    file.id = newFileId
+
+    await RemoteFileStorage.renameFile(this.getRemoteFileId(fileId), this.getRemoteFileId(newFileId), fileData.data)
+    return this.updateFileStructure()
+  }
+
+  // Move a file within the container
+  private async moveFileInContainer(oldPath: string, newPath: string) {
+    try {
+      const fileContents = await this.sandbox.files.read(
+        path.posix.join(this.dirName, oldPath)
+      )
+      await this.sandbox.files.write(
+        path.posix.join(this.dirName, newPath),
+        fileContents
+      )
+      await this.sandbox.files.remove(path.posix.join(this.dirName, oldPath))
+    } catch (e) {
+      console.error(`Error moving file from ${oldPath} to ${newPath}:`, e)
+    }
+  }
+
+  // Create a new file
+  async createFile(name: string): Promise<boolean> {
+    const size: number = await RemoteFileStorage.getProjectSize(this.sandboxId)
+    if (size > 200 * 1024 * 1024) {
+      throw new Error("Project size exceeded. Please delete some files.")
+    }
+
+    const id = `/${name}`
+
+    await this.sandbox.files.write(path.posix.join(this.dirName, id), "")
+    await this.fixPermissions()
+
+    this.sandboxFiles.files.push({
+      id,
+      name,
+      type: "file",
+    })
+
+    this.sandboxFiles.fileData.push({
+      id,
+      data: "",
+    })
+
+    await RemoteFileStorage.createFile(this.getRemoteFileId(id))
+
+    return true
+  }
+
+  // Create a new folder
+  async createFolder(name: string): Promise<void> {
+    const id = `/${name}`
+    await this.sandbox.files.makeDir(path.posix.join(this.dirName, id))
+  }
+
+  // Rename a file
+  async renameFile(fileId: string, newName: string): Promise<void> {
+    const fileData = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    const file = this.sandboxFiles.files.find((f) => f.id === fileId)
+    if (!fileData || !file) return
+
+    const parts = fileId.split("/")
+    const newFileId = parts.slice(0, parts.length - 1).join("/") + "/" + newName
+
+    await this.moveFileInContainer(fileId, newFileId)
+    await this.fixPermissions()
+    await RemoteFileStorage.renameFile(this.getRemoteFileId(fileId), this.getRemoteFileId(newFileId), fileData.data)
+
+    fileData.id = newFileId
+    file.id = newFileId
+  }
+
+  // Delete a file
+  async deleteFile(fileId: string): Promise<(TFolder | TFile)[]> {
+    const file = this.sandboxFiles.fileData.find((f) => f.id === fileId)
+    if (!file) return this.sandboxFiles.files
+
+    await this.sandbox.files.remove(path.posix.join(this.dirName, fileId))
+    this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+      (f) => f.id !== fileId
+    )
+
+    await RemoteFileStorage.deleteFile(this.getRemoteFileId(fileId))
+    return this.updateFileStructure()
+  }
+
+  // Delete a folder
+  async deleteFolder(folderId: string): Promise<(TFolder | TFile)[]> {
+    const files = await RemoteFileStorage.getFolder(this.getRemoteFileId(folderId))
+
+    await Promise.all(
+      files.map(async (file) => {
+        await this.sandbox.files.remove(path.posix.join(this.dirName, file))
+        this.sandboxFiles.fileData = this.sandboxFiles.fileData.filter(
+          (f) => f.id !== file
+        )
+        await RemoteFileStorage.deleteFile(this.getRemoteFileId(file))
+      })
+    )
+
+    return this.updateFileStructure()
+  }
+
+  // Close all file watchers
+  async closeWatchers() {
+    await Promise.all(
+      this.fileWatchers.map(async (handle: WatchHandle) => {
+        await handle.close()
+      })
+    )
+  }
+}

backend/server/src/RemoteFileStorage.ts

@@ -0,0 +1,117 @@
+import * as dotenv from "dotenv"
+import { R2Files } from "./types"
+
+dotenv.config()
+
+export const RemoteFileStorage = {
+  getSandboxPaths: async (id: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api?sandboxId=${id}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    const data: R2Files = await res.json()
+
+    return data.objects.map((obj) => obj.key)
+  },
+
+  getFolder: async (folderId: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api?folderId=${folderId}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    const data: R2Files = await res.json()
+
+    return data.objects.map((obj) => obj.key)
+  },
+
+  fetchFileContent: async (fileId: string): Promise<string> => {
+    try {
+      const fileRes = await fetch(
+        `${process.env.STORAGE_WORKER_URL}/api?fileId=${fileId}`,
+        {
+          headers: {
+            Authorization: `${process.env.WORKERS_KEY}`,
+          },
+        }
+      )
+      return await fileRes.text()
+    } catch (error) {
+      console.error("ERROR fetching file:", error)
+      return ""
+    }
+  },
+
+  createFile: async (fileId: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId }),
+    })
+    return res.ok
+  },
+
+  renameFile: async (
+    fileId: string,
+    newFileId: string,
+    data: string
+  ) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/rename`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId, newFileId, data }),
+    })
+    return res.ok
+  },
+
+  saveFile: async (fileId: string, data: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/save`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId, data }),
+    })
+    return res.ok
+  },
+
+  deleteFile: async (fileId: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId }),
+    })
+    return res.ok
+  },
+
+  getProjectSize: async (id: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api/size?sandboxId=${id}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    return (await res.json()).size
+  }
+}
+
+export default RemoteFileStorage

backend/server/src/SSHSocketClient.ts

@@ -1,90 +1,98 @@
-import { Client } from "ssh2";
+import { Client } from "ssh2"
 
+// Interface defining the configuration for SSH connection
 export interface SSHConfig {
-  host: string;
+  host: string
-  port?: number;
+  port?: number
-  username: string;
+  username: string
-  privateKey: Buffer;
+  privateKey: Buffer
 }
 
+// Class to handle SSH connections and communicate with a Unix socket
 export class SSHSocketClient {
-    private conn: Client;
+  private conn: Client
-    private config: SSHConfig;
+  private config: SSHConfig
-    private socketPath: string;
+  private socketPath: string
-    private isConnected: boolean = false;
+  private isConnected: boolean = false
 
-    constructor(config: SSHConfig, socketPath: string) {
+  // Constructor initializes the SSH client and sets up configuration
-      this.conn = new Client();
+  constructor(config: SSHConfig, socketPath: string) {
-      this.config = { ...config, port: 22};
+    this.conn = new Client()
-      this.socketPath = socketPath;
+    this.config = { ...config, port: 22 } // Default port to 22 if not provided
+    this.socketPath = socketPath
 
-      this.setupTerminationHandlers();
+    this.setupTerminationHandlers()
-    }
-  
-    private setupTerminationHandlers() {
-      process.on("SIGINT", this.closeConnection.bind(this));
-      process.on("SIGTERM", this.closeConnection.bind(this));
-    }
-  
-    private closeConnection() {
-      console.log("Closing SSH connection...");
-      this.conn.end();
-      this.isConnected = false;
-      process.exit(0);
-    }
-  
-    connect(): Promise<void> {
-      return new Promise((resolve, reject) => {
-        this.conn
-          .on("ready", () => {
-            console.log("SSH connection established");
-            this.isConnected = true;
-            resolve();
-          })
-          .on("error", (err) => {
-            console.error("SSH connection error:", err);
-            this.isConnected = false;
-            reject(err);
-          })
-          .on("close", () => {
-            console.log("SSH connection closed");
-            this.isConnected = false;
-          })
-          .connect(this.config);
-      });
-    }
-  
-    sendData(data: string): Promise<string> {
-      return new Promise((resolve, reject) => {
-        if (!this.isConnected) {
-          reject(new Error("SSH connection is not established"));
-          return;
-        }
-  
-        this.conn.exec(
-          `echo "${data}" | nc -U ${this.socketPath}`,
-          (err, stream) => {
-            if (err) {
-              reject(err);
-              return;
-            }
-  
-            stream
-              .on("close", (code: number, signal: string) => {
-                reject(
-                  new Error(
-                    `Stream closed with code ${code} and signal ${signal}`
-                  )
-                );
-              })
-              .on("data", (data: Buffer) => {
-                resolve(data.toString());
-              })
-              .stderr.on("data", (data: Buffer) => {
-                reject(new Error(data.toString()));
-              });
-          }
-        );
-      });
-    }
   }
+
+  // Set up handlers for graceful termination
+  private setupTerminationHandlers() {
+    process.on("SIGINT", this.closeConnection.bind(this))
+    process.on("SIGTERM", this.closeConnection.bind(this))
+  }
+
+  // Method to close the SSH connection
+  private closeConnection() {
+    console.log("Closing SSH connection...")
+    this.conn.end()
+    this.isConnected = false
+    process.exit(0)
+  }
+
+  // Method to establish the SSH connection
+  connect(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.conn
+        .on("ready", () => {
+          console.log("SSH connection established")
+          this.isConnected = true
+          resolve()
+        })
+        .on("error", (err) => {
+          console.error("SSH connection error:", err)
+          this.isConnected = false
+          reject(err)
+        })
+        .on("close", () => {
+          console.log("SSH connection closed")
+          this.isConnected = false
+        })
+        .connect(this.config)
+    })
+  }
+
+  // Method to send data through the SSH connection to the Unix socket
+  sendData(data: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (!this.isConnected) {
+        reject(new Error("SSH connection is not established"))
+        return
+      }
+
+      // Use netcat to send data to the Unix socket
+      this.conn.exec(
+        `echo "${data}" | nc -U ${this.socketPath}`,
+        (err, stream) => {
+          if (err) {
+            reject(err)
+            return
+          }
+
+          stream
+            .on("close", (code: number, signal: string) => {
+              reject(
+                new Error(
+                  `Stream closed with code ${code} and signal ${signal}`
+                )
+              )
+            })
+            .on("data", (data: Buffer) => {
+              resolve(data.toString())
+            })
+            .stderr.on("data", (data: Buffer) => {
+              reject(new Error(data.toString()))
+            })
+        }
+      )
+    })
+  }
+}

backend/server/src/SecureGitClient.ts

@@ -1,82 +1,84 @@
-import simpleGit, { SimpleGit } from "simple-git";
+import fs from "fs"
-import path from "path";
+import os from "os"
-import fs from "fs";
+import path from "path"
-import os from "os";
+import simpleGit, { SimpleGit } from "simple-git"
 
 export type FileData = {
-  id: string;
+  id: string
-  data: string;
+  data: string
-};
+}
 
 export class SecureGitClient {
-  private gitUrl: string;
+  private gitUrl: string
-  private sshKeyPath: string;
+  private sshKeyPath: string
 
   constructor(gitUrl: string, sshKeyPath: string) {
-    this.gitUrl = gitUrl;
+    this.gitUrl = gitUrl
-    this.sshKeyPath = sshKeyPath;
+    this.sshKeyPath = sshKeyPath
   }
 
   async pushFiles(fileData: FileData[], repository: string): Promise<void> {
-    let tempDir: string | undefined;
+    let tempDir: string | undefined
 
     try {
       // Create a temporary directory
-      tempDir = fs.mkdtempSync(path.posix.join(os.tmpdir(), 'git-push-'));
+      tempDir = fs.mkdtempSync(path.posix.join(os.tmpdir(), "git-push-"))
-      console.log(`Temporary directory created: ${tempDir}`);
+      console.log(`Temporary directory created: ${tempDir}`)
 
       // Write files to the temporary directory
-      console.log(`Writing ${fileData.length} files.`);
+      console.log(`Writing ${fileData.length} files.`)
       for (const { id, data } of fileData) {
-        const filePath = path.posix.join(tempDir, id);
+        const filePath = path.posix.join(tempDir, id)
-        const dirPath = path.dirname(filePath);
+        const dirPath = path.dirname(filePath)
 
         if (!fs.existsSync(dirPath)) {
-          fs.mkdirSync(dirPath, { recursive: true });
+          fs.mkdirSync(dirPath, { recursive: true })
         }
-        fs.writeFileSync(filePath, data);
+        fs.writeFileSync(filePath, data)
       }
 
       // Initialize the simple-git instance with the temporary directory and custom SSH command
       const git: SimpleGit = simpleGit(tempDir, {
         config: [
-          'core.sshCommand=ssh -i ' + this.sshKeyPath + ' -o IdentitiesOnly=yes'
+          "core.sshCommand=ssh -i " +
-        ]
+            this.sshKeyPath +
+            " -o IdentitiesOnly=yes",
+        ],
       }).outputHandler((_command, stdout, stderr) => {
-        stdout.pipe(process.stdout);
+        stdout.pipe(process.stdout)
-        stderr.pipe(process.stderr);
+        stderr.pipe(process.stderr)
-     });;
+      })
 
       // Initialize a new Git repository
-      await git.init();
+      await git.init()
 
       // Add remote repository
-      await git.addRemote("origin", `${this.gitUrl}:${repository}`);
+      await git.addRemote("origin", `${this.gitUrl}:${repository}`)
 
       // Add files to the repository
-      for (const {id, data} of fileData) {
+      for (const { id, data } of fileData) {
-        await git.add(id);
+        await git.add(id)
       }
 
       // Commit the changes
-      await git.commit("Add files.");
+      await git.commit("Add files.")
 
       // Push the changes to the remote repository
-      await git.push("origin", "master", {'--force': null});
+      await git.push("origin", "master", { "--force": null })
 
-      console.log("Files successfully pushed to the repository");
+      console.log("Files successfully pushed to the repository")
 
       if (tempDir) {
-        fs.rmSync(tempDir, { recursive: true, force: true });
+        fs.rmSync(tempDir, { recursive: true, force: true })
-        console.log(`Temporary directory removed: ${tempDir}`);
+        console.log(`Temporary directory removed: ${tempDir}`)
       }
     } catch (error) {
       if (tempDir) {
-        fs.rmSync(tempDir, { recursive: true, force: true });
+        fs.rmSync(tempDir, { recursive: true, force: true })
-        console.log(`Temporary directory removed: ${tempDir}`);
+        console.log(`Temporary directory removed: ${tempDir}`)
       }
-      console.error("Error pushing files to the repository:", error);
+      console.error("Error pushing files to the repository:", error)
-      throw error;
+      throw error
     }
   }
 }

backend/server/src/Terminal.ts

@@ -1,13 +1,13 @@
-import { Sandbox, ProcessHandle } from "e2b";
+import { ProcessHandle, Sandbox } from "e2b"
 
 // Terminal class to manage a pseudo-terminal (PTY) in a sandbox environment
 export class Terminal {
-  private pty: ProcessHandle | undefined; // Holds the PTY process handle
+  private pty: ProcessHandle | undefined // Holds the PTY process handle
-  private sandbox: Sandbox; // Reference to the sandbox environment
+  private sandbox: Sandbox // Reference to the sandbox environment
 
   // Constructor initializes the Terminal with a sandbox
   constructor(sandbox: Sandbox) {
-    this.sandbox = sandbox;
+    this.sandbox = sandbox
   }
 
   // Initialize the terminal with specified rows, columns, and data handler
@@ -16,9 +16,9 @@ export class Terminal {
     cols = 80,
     onData,
   }: {
-    rows?: number;
+    rows?: number
-    cols?: number;
+    cols?: number
-    onData: (responseData: string) => void;
+    onData: (responseData: string) => void
   }): Promise<void> {
     // Create a new PTY process
     this.pty = await this.sandbox.pty.create({
@@ -26,35 +26,38 @@ export class Terminal {
       cols,
       timeout: 0,
       onData: (data: Uint8Array) => {
-        onData(new TextDecoder().decode(data)); // Convert received data to string and pass to handler
+        onData(new TextDecoder().decode(data)) // Convert received data to string and pass to handler
       },
-    });
+    })
   }
 
   // Send data to the terminal
   async sendData(data: string) {
     if (this.pty) {
-      await this.sandbox.pty.sendInput(this.pty.pid, new TextEncoder().encode(data));
+      await this.sandbox.pty.sendInput(
+        this.pty.pid,
+        new TextEncoder().encode(data)
+      )
     } else {
-      console.log("Cannot send data because pty is not initialized.");
+      console.log("Cannot send data because pty is not initialized.")
     }
   }
 
   // Resize the terminal
   async resize(size: { cols: number; rows: number }): Promise<void> {
     if (this.pty) {
-      await this.sandbox.pty.resize(this.pty.pid, size);
+      await this.sandbox.pty.resize(this.pty.pid, size)
     } else {
-      console.log("Cannot resize terminal because pty is not initialized.");
+      console.log("Cannot resize terminal because pty is not initialized.")
     }
   }
 
   // Close the terminal, killing the PTY process and stopping the input stream
   async close(): Promise<void> {
     if (this.pty) {
-      await this.pty.kill();
+      await this.pty.kill()
     } else {
-      console.log("Cannot kill pty because it is not initialized.");
+      console.log("Cannot kill pty because it is not initialized.")
     }
   }
 }

backend/server/src/TerminalManager.ts

@@ -0,0 +1,74 @@
+import { Sandbox } from "e2b"
+import { Terminal } from "./Terminal"
+
+export class TerminalManager {
+  private sandbox: Sandbox
+  private terminals: Record<string, Terminal> = {}
+
+  constructor(sandbox: Sandbox) {
+    this.sandbox = sandbox
+  }
+
+  async createTerminal(
+    id: string,
+    onData: (responseString: string) => void
+  ): Promise<void> {
+    if (this.terminals[id]) {
+      return
+    }
+
+    this.terminals[id] = new Terminal(this.sandbox)
+    await this.terminals[id].init({
+      onData,
+      cols: 80,
+      rows: 20,
+    })
+
+    const defaultDirectory = "/home/user/project"
+    const defaultCommands = [
+      `cd "${defaultDirectory}"`,
+      "export PS1='user> '",
+      "clear",
+    ]
+    for (const command of defaultCommands) {
+      await this.terminals[id].sendData(command + "\r")
+    }
+
+    console.log("Created terminal", id)
+  }
+
+  async resizeTerminal(dimensions: {
+    cols: number
+    rows: number
+  }): Promise<void> {
+    Object.values(this.terminals).forEach((t) => {
+      t.resize(dimensions)
+    })
+  }
+
+  async sendTerminalData(id: string, data: string): Promise<void> {
+    if (!this.terminals[id]) {
+      return
+    }
+
+    await this.terminals[id].sendData(data)
+  }
+
+  async closeTerminal(id: string): Promise<void> {
+    if (!this.terminals[id]) {
+      return
+    }
+
+    await this.terminals[id].close()
+    delete this.terminals[id]
+  }
+
+  async closeAllTerminals(): Promise<void> {
+    await Promise.all(
+      Object.entries(this.terminals).map(async ([key, terminal]) => {
+        await terminal.close()
+        delete this.terminals[key]
+      })
+    )
+  }
+}

backend/server/src/fileoperations.ts

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

backend/server/src/types.ts

@@ -1,70 +1,70 @@
 // DB Types
 
 export type User = {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  email: string;
+  email: string
-  generations: number;
+  generations: number
-  sandbox: Sandbox[];
+  sandbox: Sandbox[]
-  usersToSandboxes: UsersToSandboxes[];
+  usersToSandboxes: UsersToSandboxes[]
-};
+}
 
 export type Sandbox = {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  type: "react" | "node";
+  type: "react" | "node"
-  visibility: "public" | "private";
+  visibility: "public" | "private"
-  createdAt: Date;
+  createdAt: Date
-  userId: string;
+  userId: string
-  usersToSandboxes: UsersToSandboxes[];
+  usersToSandboxes: UsersToSandboxes[]
-};
+}
 
 export type UsersToSandboxes = {
-  userId: string;
+  userId: string
-  sandboxId: string;
+  sandboxId: string
-  sharedOn: Date;
+  sharedOn: Date
-};
+}
 
 export type TFolder = {
-  id: string;
+  id: string
-  type: "folder";
+  type: "folder"
-  name: string;
+  name: string
-  children: (TFile | TFolder)[];
+  children: (TFile | TFolder)[]
-};
+}
 
 export type TFile = {
-  id: string;
+  id: string
-  type: "file";
+  type: "file"
-  name: string;
+  name: string
-};
+}
 
 export type TFileData = {
-  id: string;
+  id: string
-  data: string;
+  data: string
-};
+}
 
 export type R2Files = {
-  objects: R2FileData[];
+  objects: R2FileData[]
-  truncated: boolean;
+  truncated: boolean
-  delimitedPrefixes: any[];
+  delimitedPrefixes: any[]
-};
+}
 
 export type R2FileData = {
-  storageClass: string;
+  storageClass: string
-  uploaded: string;
+  uploaded: string
-  checksums: any;
+  checksums: any
-  httpEtag: string;
+  httpEtag: string
-  etag: string;
+  etag: string
-  size: number;
+  size: number
-  version: string;
+  version: string
-  key: string;
+  key: string
-};
+}
 
 export type R2FileBody = R2FileData & {
-  body: ReadableStream;
+  body: ReadableStream
-  bodyUsed: boolean;
+  bodyUsed: boolean
-  arrayBuffer: Promise<ArrayBuffer>;
+  arrayBuffer: Promise<ArrayBuffer>
-  text: Promise<string>;
+  text: Promise<string>
-  json: Promise<any>;
+  json: Promise<any>
-  blob: Promise<Blob>;
+  blob: Promise<Blob>
-};
+}

backend/server/src/utils.ts

@@ -1,23 +1,23 @@
 export class LockManager {
-  private locks: { [key: string]: Promise<any> };
+  private locks: { [key: string]: Promise<any> }
 
   constructor() {
-    this.locks = {};
+    this.locks = {}
   }
 
   async acquireLock<T>(key: string, task: () => Promise<T>): Promise<T> {
     if (!this.locks[key]) {
       this.locks[key] = new Promise<T>(async (resolve, reject) => {
         try {
-          const result = await task();
+          const result = await task()
-          resolve(result);
+          resolve(result)
         } catch (error) {
-          reject(error);
+          reject(error)
         } finally {
-          delete this.locks[key];
+          delete this.locks[key]
         }
-      });
+      })
     }
-    return await this.locks[key];
+    return await this.locks[key]
   }
 }

frontend/components/dashboard/newProject.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog"
 import { zodResolver } from "@hookform/resolvers/zod"
 import Image from "next/image"
-import { useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -32,10 +32,14 @@ import {
 import { createSandbox } from "@/lib/actions"
 import { projectTemplates } from "@/lib/data"
 import { useUser } from "@clerk/nextjs"
-import { Loader2 } from "lucide-react"
+import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { Button } from "../ui/button"
 
+import { cn } from "@/lib/utils"
+import type { EmblaCarouselType } from "embla-carousel"
+import useEmblaCarousel from "embla-carousel-react"
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 const formSchema = z.object({
   name: z
     .string()
@@ -55,11 +59,20 @@ export default function NewProjectModal({
   open: boolean
   setOpen: (open: boolean) => void
 }) {
+  const router = useRouter()
+  const user = useUser()
   const [selected, setSelected] = useState("reactjs")
   const [loading, setLoading] = useState(false)
-  const router = useRouter()
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [
-
+    WheelGesturesPlugin(),
-  const user = useUser()
+  ])
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi)
+  const [search, setSearch] = useState("")
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -69,6 +82,26 @@ export default function NewProjectModal({
     },
   })
 
+  const handleTemplateClick = useCallback(
+    ({ id, index }: { id: string; index: number }) => {
+      setSelected(id)
+      emblaApi?.scrollTo(index)
+    },
+    [emblaApi]
+  )
+  const filteredTemplates = useMemo(
+    () =>
+      projectTemplates.filter(
+        (item) =>
+          item.name.toLowerCase().includes(search.toLowerCase()) ||
+          item.description.toLowerCase().includes(search.toLowerCase())
+      ),
+    [search, projectTemplates]
+  )
+  const emptyTemplates = useMemo(
+    () => filteredTemplates.length === 0,
+    [filteredTemplates]
+  )
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (!user.isSignedIn) return
 
@@ -78,7 +111,6 @@ export default function NewProjectModal({
     const id = await createSandbox(sandboxData)
     router.push(`/code/${id}`)
   }
-
   return (
     <Dialog
       open={open}
@@ -90,25 +122,89 @@ export default function NewProjectModal({
         <DialogHeader>
           <DialogTitle>Create A Sandbox</DialogTitle>
         </DialogHeader>
-        <div className="grid grid-cols-2 w-full gap-2 mt-2">
+        <div className="flex flex-col gap-2 max-w-full overflow-hidden">
-          {projectTemplates.map((item) => (
+          <div className="flex items-center justify-end">
-            <button
+            <SearchInput
-              disabled={item.disabled || loading}
+              {...{
-              key={item.id}
+                value: search,
-              onClick={() => setSelected(item.id)}
+                onValueChange: setSearch,
-              className={`${
+              }}
-                selected === item.id ? "border-foreground" : "border-border"
+            />
-              } rounded-md border bg-card text-card-foreground shadow text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed`}
+          </div>
+          <div className="overflow-hidden relative" ref={emblaRef}>
+            <div
+              className={cn(
+                "grid grid-flow-col gap-x-2  min-h-[97px]",
+                emptyTemplates ? "auto-cols-[100%]" : "auto-cols-[200px]"
+              )}
             >
-              <div className="space-x-2 flex items-center justify-start w-full">
+              {filteredTemplates.map((item, i) => (
-                <Image alt="" src={item.icon} width={20} height={20} />
+                <button
-                <div className="font-medium">{item.name}</div>
+                  disabled={item.disabled || loading}
-              </div>
+                  key={item.id}
-              <div className="mt-2 text-muted-foreground text-sm">
+                  onClick={handleTemplateClick.bind(null, {
-                {item.description}
+                    id: item.id,
-              </div>
+                    index: i,
-            </button>
+                  })}
-          ))}
+                  className={cn(
+                    selected === item.id
+                      ? "shadow-foreground"
+                      : "shadow-border",
+                    "shadow-[0_0_0_1px_inset] rounded-md border bg-card text-card-foreground text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+                  )}
+                >
+                  <div className="space-x-2 flex items-center justify-start w-full">
+                    <Image alt="" src={item.icon} width={20} height={20} />
+                    <div className="font-medium">{item.name}</div>
+                  </div>
+                  <div className="mt-2 text-muted-foreground text-xs line-clamp-2">
+                    {item.description}
+                  </div>
+                </button>
+              ))}
+              {emptyTemplates && (
+                <div className="flex flex-col gap-2 items-center text-center justify-center text-muted-foreground text-sm">
+                  <p>No templates found</p>
+                  <Button size="xs" asChild>
+                    <a
+                      href="https://github.com/jamesmurdza/sandbox"
+                      target="_blank"
+                    >
+                      Contribute
+                    </a>
+                  </Button>
+                </div>
+              )}
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-r from-background via-background to-transparent w-14 pl-1 left-0 top-0 -translate-x-1 bottom-0 h-full flex items-center",
+                prevBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onPrevButtonClick}
+              >
+                <ChevronLeft className="size-5" />
+              </Button>
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-l from-background via-background to-transparent w-14 pl-1 right-0 top-0 translate-x-1 bottom-0 h-full flex items-center",
+                nextBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onNextButtonClick}
+              >
+                <ChevronRight className="size-5" />
+              </Button>
+            </div>
+          </div>
         </div>
 
         <Form {...form}>
@@ -176,3 +272,68 @@ export default function NewProjectModal({
     </Dialog>
   )
 }
+
+function SearchInput({
+  value,
+  onValueChange,
+}: {
+  value?: string
+  onValueChange?: (value: string) => void
+}) {
+  const onSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault()
+    console.log("searching")
+  }, [])
+  return (
+    <form {...{ onSubmit }} className="w-40 h-8 ">
+      <label
+        htmlFor="template-search"
+        className="flex gap-2 rounded-sm transition-colors bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))]  focus-within:[--s-color:#fff]  h-full items-center px-2"
+      >
+        <Search className="size-4 text-[--s-color] transition-colors" />
+        <input
+          id="template-search"
+          type="text"
+          name="search"
+          placeholder="Search templates"
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          className="bg-transparent placeholder:text-muted-foreground text-white w-full focus:outline-none text-xs"
+        />
+      </label>
+    </form>
+  )
+}
+const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onSelect(emblaApi)
+    emblaApi.on("reInit", onSelect).on("select", onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  }
+}

frontend/components/editor/AIChat/ChatMessage.tsx

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

frontend/components/editor/AIChat/ContextDisplay.tsx

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

frontend/components/editor/index.tsx

@@ -24,6 +24,7 @@ import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
 import { Sandbox, TFile, TFolder, TTab, User } from "@/lib/types"
 import {
   addNew,
+  cn,
   debounce,
   deepMerge,
   processFileType,
@@ -926,7 +927,10 @@ export default function CodeEditor({
             )}
           </AnimatePresence>
         </div>
-        <div className="z-50 p-1" ref={generateWidgetRef}>
+        <div
+          className={cn(generate.show && "z-50 p-1")}
+          ref={generateWidgetRef}
+        >
           {generate.show ? (
             <GenerateInput
               user={userData}

frontend/components/editor/loading/index.tsx

@@ -84,8 +84,10 @@ export default function Loading({
             </div>
           </div>
           <div className="w-full mt-1 flex flex-col">
-            <div className="w-full flex justify-center">
+            <div className="w-full flex flex-col justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
             </div>
           </div>
         </div>

frontend/components/editor/sidebar/index.tsx

@@ -1,20 +1,16 @@
 "use client"
 
-import { Button } from "@/components/ui/button"
 import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
-import {
+import { FilePlus, FolderPlus, MessageSquareMore, Sparkles } from "lucide-react"
-  FilePlus,
+import { useEffect, useMemo, useRef, useState } from "react"
-  FolderPlus,
-  Loader2,
-  MessageSquareMore,
-  Sparkles,
-} from "lucide-react"
-import { useEffect, useRef, useState } from "react"
 import { Socket } from "socket.io-client"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import New from "./new"
 
+import Button from "@/components/ui/customButton"
+import { Skeleton } from "@/components/ui/skeleton"
+import { sortFileExplorer } from "@/lib/utils"
 import {
   dropTargetForElements,
   monitorForElements,
@@ -52,7 +48,9 @@ export default function Sidebar({
 
   const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
   const [movingId, setMovingId] = useState("")
-
+  const sortedFiles = useMemo(() => {
+    return sortFileExplorer(files)
+  }, [files])
   useEffect(() => {
     const el = ref.current
 
@@ -133,13 +131,15 @@ export default function Sidebar({
             isDraggedOver ? "bg-secondary/50" : ""
           } rounded-sm w-full mt-1 flex flex-col`}
         > */}
-          {files.length === 0 ? (
+          {sortedFiles.length === 0 ? (
-            <div className="w-full flex justify-center">
+            <div className="w-full flex flex-col justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
             </div>
           ) : (
             <>
-              {files.map((child) =>
+              {sortedFiles.map((child) =>
                 child.type === "file" ? (
                   <SidebarFile
                     key={child.id}

frontend/components/editor/terminals/terminal.tsx

@@ -4,8 +4,9 @@ import { FitAddon } from "@xterm/addon-fit"
 import { Terminal } from "@xterm/xterm"
 import "./xterm.css"
 
+import { debounce } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
-import { useEffect, useRef } from "react"
+import { ElementRef, useEffect, useRef } from "react"
 import { Socket } from "socket.io-client"
 
 export default function EditorTerminal({
@@ -21,7 +22,8 @@ export default function EditorTerminal({
   setTerm: (term: Terminal) => void
   visible: boolean
 }) {
-  const terminalRef = useRef(null)
+  const terminalRef = useRef<ElementRef<"div">>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
 
   useEffect(() => {
     if (!terminalRef.current) return
@@ -39,37 +41,61 @@ export default function EditorTerminal({
     })
 
     setTerm(terminal)
-
+    const dispose = () => {
-    return () => {
+      terminal.dispose()
-      if (terminal) terminal.dispose()
     }
+    return dispose
   }, [])
 
   useEffect(() => {
     if (!term) return
 
     if (!terminalRef.current) return
-    const fitAddon = new FitAddon()
+    if (!fitAddonRef.current) {
-    term.loadAddon(fitAddon)
+      const fitAddon = new FitAddon()
-    term.open(terminalRef.current)
+      term.loadAddon(fitAddon)
-    fitAddon.fit()
+      term.open(terminalRef.current)
+      fitAddon.fit()
+      fitAddonRef.current = fitAddon
+    }
 
     const disposableOnData = term.onData((data) => {
       socket.emit("terminalData", id, data)
     })
 
     const disposableOnResize = term.onResize((dimensions) => {
-      // const terminal_size = {
+      fitAddonRef.current?.fit()
-      //   width: dimensions.cols,
-      //   height: dimensions.rows,
-      // };
-      fitAddon.fit()
       socket.emit("terminalResize", dimensions)
     })
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!fitAddonRef.current || !terminalRef.current) return
 
+        const entry = entries[0]
+        if (!entry) return
+
+        const { width, height } = entry.contentRect
+
+        // Only call fit if the size has actually changed
+        if (
+          width !== terminalRef.current.offsetWidth ||
+          height !== terminalRef.current.offsetHeight
+        ) {
+          try {
+            fitAddonRef.current.fit()
+          } catch (err) {
+            console.error("Error during fit:", err)
+          }
+        }
+      }, 50) // Debounce for 50ms
+    )
+
+    // start observing for resize
+    resizeObserver.observe(terminalRef.current)
     return () => {
       disposableOnData.dispose()
       disposableOnResize.dispose()
+      resizeObserver.disconnect()
     }
   }, [term, terminalRef.current])
 

frontend/lib/data/index.ts

@@ -22,15 +22,15 @@ export const projectTemplates: {
   {
     id: "nextjs",
     name: "NextJS",
-    icon: "/project-icons/node.svg",
+    icon: "/project-icons/next-js.svg",
-    description: "A JavaScript runtime built on the V8 JavaScript engine",
+    description: "a React framework for building full-stack web applications",
     disabled: false,
   },
   {
     id: "streamlit",
     name: "Streamlit",
     icon: "/project-icons/python.svg",
-    description: "A JavaScript runtime built on the V8 JavaScript engine",
+    description: "A faster way to build and share data apps",
     disabled: false,
   },
 ]

frontend/lib/utils.ts

@@ -98,3 +98,28 @@ export const deepMerge = (target: any, source: any) => {
 const isObject = (item: any) => {
   return item && typeof item === "object" && !Array.isArray(item)
 }
+
+export function sortFileExplorer(
+  items: (TFile | TFolder)[]
+): (TFile | TFolder)[] {
+  return items
+    .sort((a, b) => {
+      // First, sort by type (folders before files)
+      if (a.type !== b.type) {
+        return a.type === "folder" ? -1 : 1
+      }
+
+      // Then, sort alphabetically by name
+      return a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
+    })
+    .map((item) => {
+      // If it's a folder, recursively sort its children
+      if (item.type === "folder") {
+        return {
+          ...item,
+          children: sortFileExplorer(item.children),
+        }
+      }
+      return item
+    })
+}

frontend/package-lock.json

@@ -37,6 +37,8 @@
         "@xterm/xterm": "^5.5.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.3.0",
+        "embla-carousel-wheel-gestures": "^8.0.1",
         "framer-motion": "^11.2.3",
         "fs": "^0.0.1-security",
         "geist": "^1.3.0",
@@ -3123,6 +3125,45 @@
       "integrity": "sha512-w+9yAVHoHhysCa+gln7AzbO9CdjFcL/wN/5dd+XW/Msl2d/4+WisEaCF1nty0xbAKaxdaJfgLB2296U7zZB7BA==",
       "dev": true
     },
+    "node_modules/embla-carousel": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.3.0.tgz",
+      "integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA=="
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.3.0.tgz",
+      "integrity": "sha512-P1FlinFDcIvggcErRjNuVqnUR8anyo8vLMIH8Rthgofw7Nj8qTguCa2QjFAbzxAUTQTPNNjNL7yt0BGGinVdFw==",
+      "dependencies": {
+        "embla-carousel": "8.3.0",
+        "embla-carousel-reactive-utils": "8.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.3.0.tgz",
+      "integrity": "sha512-EYdhhJ302SC4Lmkx8GRsp0sjUhEN4WyFXPOk0kGu9OXZSRMmcBlRgTvHcq8eKJE1bXWBsOi1T83B+BSSVZSmwQ==",
+      "peerDependencies": {
+        "embla-carousel": "8.3.0"
+      }
+    },
+    "node_modules/embla-carousel-wheel-gestures": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-wheel-gestures/-/embla-carousel-wheel-gestures-8.0.1.tgz",
+      "integrity": "sha512-LMAnruDqDmsjL6UoQD65aLotpmfO49Fsr3H0bMi7I+BH6jbv9OJiE61kN56daKsVtCQEt0SU1MrJslbhtgF3yQ==",
+      "dependencies": {
+        "wheel-gestures": "^2.2.5"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "embla-carousel": "^8.0.0 || ~8.0.0-rc03"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -6546,6 +6587,14 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/wheel-gestures": {
+      "version": "2.2.48",
+      "resolved": "https://registry.npmjs.org/wheel-gestures/-/wheel-gestures-2.2.48.tgz",
+      "integrity": "sha512-f+Gy33Oa5Z14XY9679Zze+7VFhbsQfBFXodnU2x589l4kxGM9L5Y8zETTmcMR5pWOPQyRv4Z0lNax6xCO0NSlA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

frontend/package.json

@@ -38,6 +38,8 @@
     "@xterm/xterm": "^5.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.3.0",
+    "embla-carousel-wheel-gestures": "^8.0.1",
     "framer-motion": "^11.2.3",
     "fs": "^0.0.1-security",
     "geist": "^1.3.0",

frontend/public/project-icons/next-js.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="255" height="255" fill="none"><g clip-path="url(#a)"><rect width="255" height="255" fill="#fff" rx="127.5"/><g clip-path="url(#b)"><path fill="#000" d="M119.084-.93c-.553.05-2.311.225-3.894.35-36.502 3.291-70.694 22.984-92.349 53.252C10.782 69.502 3.07 88.592.156 108.812-.874 115.87-1 117.955-1 127.525s.126 11.655 1.156 18.713c6.984 48.253 41.326 88.794 87.902 103.815 8.34 2.688 17.133 4.522 27.132 5.627 3.894.427 20.726.427 24.62 0 17.259-1.909 31.88-6.179 46.3-13.539 2.211-1.13 2.638-1.432 2.336-1.683-.201-.151-9.621-12.785-20.926-28.057l-20.55-27.756-25.751-38.105c-14.168-20.949-25.825-38.08-25.926-38.08-.1-.025-.2 16.905-.25 37.577-.076 36.196-.101 37.653-.554 38.507-.653 1.231-1.155 1.733-2.21 2.286-.804.402-1.508.477-5.301.477h-4.346l-1.156-.728a4.692 4.692 0 0 1-1.683-1.834l-.528-1.13.05-50.363.076-50.388.779-.98c.402-.527 1.256-1.205 1.859-1.531 1.03-.503 1.432-.553 5.778-.553 5.125 0 5.979.201 7.31 1.658.377.402 14.32 21.401 31.001 46.695s39.492 59.832 50.697 76.787l20.349 30.821 1.03-.678c9.119-5.928 18.766-14.368 26.403-23.16 16.254-18.663 26.73-41.42 30.247-65.685 1.03-7.058 1.156-9.143 1.156-18.713s-.126-11.655-1.156-18.713c-6.984-48.253-41.326-88.794-87.902-103.815-8.215-2.662-16.958-4.496-26.755-5.601-2.412-.251-19.018-.528-21.103-.327Zm52.606 77.716c1.206.603 2.186 1.758 2.537 2.964.201.653.251 14.619.201 46.092l-.075 45.163-7.964-12.207-7.989-12.208v-32.83c0-21.225.101-33.156.252-33.734.401-1.407 1.281-2.512 2.487-3.165 1.03-.527 1.406-.578 5.351-.578 3.718 0 4.371.05 5.2.503Z"/></g></g><defs><clipPath id="a"><rect width="255" height="255" fill="#fff" rx="127.5"/></clipPath><clipPath id="b"><path fill="#fff" d="M-1-1h257v257H-1z"/></clipPath></defs></svg>