feat: add run button

README.md

@@ -29,7 +29,9 @@ npm run dev
 
 ### Backend
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker.
+The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+
+You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
 
 #### Socket.io server
 
@@ -181,3 +183,4 @@ It should be in the form `category(scope or module): message` in your commit mes
 - [Express](https://expressjs.com/)
 - [Socket.io](https://socket.io/)
 - [Drizzle ORM](https://orm.drizzle.team/)
+- [E2B](https://e2b.dev/)

backend/server/.env.example

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

frontend/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/layout/themeProvider"
 import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
 import { Analytics } from "@vercel/analytics/react"
+import { TerminalProvider } from '@/context/TerminalContext';
 
 export const metadata: Metadata = {
   title: "Sandbox",
@@ -27,7 +28,9 @@ export default function RootLayout({
             forcedTheme="dark"
             disableTransitionOnChange
           >
+            <TerminalProvider>
             {children}
+            </TerminalProvider>
             <Analytics />
             <Toaster position="bottom-left" richColors />
           </ThemeProvider>

frontend/components/editor/index.tsx

@@ -326,15 +326,29 @@ export default function CodeEditor({
   }, [activeFileId, tabs, debouncedSaveData]);
 
 // Liveblocks live collaboration setup effect
+
+type ProviderData = {
+    provider: LiveblocksProvider<never, never, never, never>;
+    yDoc: Y.Doc;
+    yText: Y.Text;
+    binding?: MonacoBinding;
+    onSync: (isSynced: boolean) => void;
+  };
+  
+  const providersMap = useRef(new Map<string, ProviderData>());
+  
   useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeFileId)
+    const tab = tabs.find((t) => t.id === activeFileId);
-    const model = editorRef?.getModel()
+    const model = editorRef?.getModel();
   
-    if (!editorRef || !tab || !model) return
+    if (!editorRef || !tab || !model) return;
   
-    const yDoc = new Y.Doc()
+    let providerData: ProviderData;
-    const yText = yDoc.getText(tab.id)
+  
-    const yProvider: any = new LiveblocksProvider(room, yDoc)
+    if (!providersMap.current.has(tab.id)) {
+      const yDoc = new Y.Doc();
+      const yText = yDoc.getText(tab.id);
+      const yProvider = new LiveblocksProvider(room, yDoc);
 
       const onSync = (isSynced: boolean) => {
         if (isSynced) {
@@ -351,24 +365,50 @@ export default function CodeEditor({
         }
       }
 
-    yProvider.on("sync", onSync)
+      yProvider.on("sync", onSync);
   
-    setProvider(yProvider)
+      providerData = { provider: yProvider, yDoc, yText, onSync };
+      providersMap.current.set(tab.id, providerData);
+    } else {
+      providerData = providersMap.current.get(tab.id)!;
+    }
     
     const binding = new MonacoBinding(
-      yText,
+      providerData.yText,
       model,
       new Set([editorRef]),
-      yProvider.awareness as Awareness
+      providerData.provider.awareness as unknown as Awareness
-    )
+    );
+  
+    providerData.binding = binding;
+  
+    setProvider(providerData.provider);
   
     return () => {
-      yDoc.destroy()
+      // Cleanup logic
-      yProvider.destroy()
+      if (binding) {
-      binding.destroy()
+        binding.destroy();
-      yProvider.off("sync", onSync)
       }
-  }, [editorRef, room, activeFileContent])
+      if (providerData.binding) {
+        providerData.binding = undefined;
+      }
+    };
+  }, [editorRef, room, activeFileContent, activeFileId, tabs]);
+
+    // Added this effect to clean up when the component unmounts
+    useEffect(() => {
+      return () => {
+        // Clean up all providers when the component unmounts
+        providersMap.current.forEach((data) => {
+          if (data.binding) {
+            data.binding.destroy();
+          }
+          data.provider.disconnect();
+          data.yDoc.destroy();
+        });
+        providersMap.current.clear();
+      };
+    }, []);
 
   // Connection/disconnection effect
   useEffect(() => {
@@ -450,6 +490,8 @@ export default function CodeEditor({
 
     setGenerate((prev) => ({ ...prev, show: false }));
 
+    //editor windows fix
+    function updateTabs(){
       const exists = tabs.find((t) => t.id === tab.id);
       setTabs((prev) => {
         if (exists) {
@@ -458,13 +500,16 @@ export default function CodeEditor({
         }
         return [...prev, tab];
       });
+    }
     
     if (fileCache.current.has(tab.id)) {
       setActiveFileContent(fileCache.current.get(tab.id));
+      updateTabs();
     } else {
       debouncedGetFile(tab.id, (response: SetStateAction<string>) => {
         fileCache.current.set(tab.id, response);
         setActiveFileContent(response);
+        updateTabs();
       });
     }
 
@@ -784,11 +829,7 @@ export default function CodeEditor({
               className="p-2 flex flex-col"
             >
               {isOwner ? (
-                <Terminals
+                <Terminals/>
-                  terminals={terminals}
-                  setTerminals={setTerminals}
-                  socket={socketRef.current}
-                />
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
                   <TerminalSquare className="w-4 h-4 mr-2" />

frontend/components/editor/navbar/index.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Logo from "@/assets/logo.svg";
-import { Pencil, Users } from "lucide-react";
+import { Pencil, Users, Play, StopCircle } from "lucide-react";
 import Link from "next/link";
 import { Sandbox, User } from "@/lib/types";
 import UserButton from "@/components/ui/userButton";
@@ -11,23 +11,30 @@ import { useState } from "react";
 import EditSandboxModal from "./edit";
 import ShareSandboxModal from "./share";
 import { Avatars } from "../live/avatars";
+import RunButtonModal from "./run";
+import { Terminal } from "@xterm/xterm";
+import { Socket } from "socket.io-client";
+import Terminals from "../terminals";
 
 export default function Navbar({
   userData,
   sandboxData,
   shared,
+  socket,
 }: {
   userData: User;
   sandboxData: Sandbox;
-  shared: {
+  shared: { id: string; name: string }[];
-    id: string;
+  socket: Socket;
-    name: string;
-  }[];
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isShareOpen, setIsShareOpen] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+  const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
+  const [activeTerminalId, setActiveTerminalId] = useState("");
+  const [creatingTerminal, setCreatingTerminal] = useState(false);
 
-  const isOwner = sandboxData.userId === userData.id;
+  const isOwner = sandboxData.userId === userData.id;;
 
   return (
     <>
@@ -62,6 +69,10 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
+        <RunButtonModal
+          isRunning={isRunning}
+          setIsRunning={setIsRunning}
+        />
         <div className="flex items-center h-full space-x-4">
           <Avatars />
 

frontend/components/editor/navbar/run.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Play, StopCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTerminal } from "@/context/TerminalContext";
+import { closeTerminal } from "@/lib/terminal";
+
+export default function RunButtonModal({
+  isRunning,
+  setIsRunning,
+}: {
+  isRunning: boolean;
+  setIsRunning: (running: boolean) => void;
+}) {
+  const { createNewTerminal, terminals, setTerminals, socket, setActiveTerminalId } = useTerminal();
+
+  const handleRun = () => {
+    if (isRunning) {
+      console.log('Stopping sandbox...');
+      console.log('Closing Terminal');
+      console.log('Closing Preview Window');
+
+      // Close all terminals if needed
+      terminals.forEach(term => {
+        if (term.terminal) {
+          // Assuming you have a closeTerminal function similar to createTerminal
+          closeTerminal({
+            term,
+            terminals,
+            setTerminals,
+            setActiveTerminalId,
+            setClosingTerminal: () => { },
+            socket: socket!,
+            activeTerminalId: term.id,
+          });
+        }
+      });
+    } else {
+      console.log('Running sandbox...');
+      console.log('Opening Terminal');
+      console.log('Opening Preview Window');
+
+      if (terminals.length < 4) {
+        createNewTerminal();
+      } else {
+        console.error('Maximum number of terminals reached.');
+      }
+    }
+    setIsRunning(!isRunning);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={handleRun}>
+        {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
+        {isRunning ? 'Stop' : 'Run'}
+      </Button>
+    </>
+  );
+}

frontend/components/editor/terminals/index.tsx

@@ -2,30 +2,16 @@
 
 import { Button } from "@/components/ui/button";
 import Tab from "@/components/ui/tab";
-import { closeTerminal, createTerminal } from "@/lib/terminal";
+import { closeTerminal } from "@/lib/terminal";
 import { Terminal } from "@xterm/xterm";
 import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
-import { Socket } from "socket.io-client";
 import { toast } from "sonner";
 import EditorTerminal from "./terminal";
 import { useState } from "react";
+import { useTerminal } from "@/context/TerminalContext";
 
-export default function Terminals({
+export default function Terminals() {
-  terminals,
+  const { terminals, setTerminals, socket, createNewTerminal } = useTerminal();
-  setTerminals,
-  socket,
-}: {
-  terminals: { id: string; terminal: Terminal | null }[];
-  setTerminals: React.Dispatch<
-    React.SetStateAction<
-      {
-        id: string;
-        terminal: Terminal | null;
-      }[]
-    >
-  >;
-  socket: Socket;
-}) {
   const [activeTerminalId, setActiveTerminalId] = useState("");
   const [creatingTerminal, setCreatingTerminal] = useState(false);
   const [closingTerminal, setClosingTerminal] = useState("");
@@ -46,7 +32,7 @@ export default function Terminals({
                 setTerminals,
                 setActiveTerminalId,
                 setClosingTerminal,
-                socket,
+                socket: socket!, 
                 activeTerminalId,
               })
             }
@@ -64,12 +50,7 @@ export default function Terminals({
               toast.error("You reached the maximum # of terminals.");
               return;
             }
-            createTerminal({
+            createNewTerminal();
-              setTerminals,
-              setActiveTerminalId,
-              setCreatingTerminal,
-              socket,
-            });
           }}
           size="smIcon"
           variant={"secondary"}

frontend/context/TerminalContext.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { Terminal } from '@xterm/xterm';
+import { createId } from '@paralleldrive/cuid2';
+import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal'; // Adjust the import path as necessary
+
+interface TerminalContextType {
+  socket: Socket | null;
+  terminals: { id: string; terminal: Terminal | null }[];
+  setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
+  activeTerminalId: string;
+  setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
+  creatingTerminal: boolean;
+  setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
+  createNewTerminal: () => void;
+  closeTerminal: (id: string) => void;
+}
+
+const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
+
+export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
+  const [activeTerminalId, setActiveTerminalId] = useState<string>('');
+  const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false);
+
+  useEffect(() => {
+    // Replace with your server URL
+    const socketIo = io(process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'); 
+    setSocket(socketIo);
+
+    // Log socket events
+    socketIo.on('connect', () => {
+      console.log('Socket connected:', socketIo.id);
+    });
+
+    socketIo.on('disconnect', () => {
+      console.log('Socket disconnected');
+    });
+
+    return () => {
+      socketIo.disconnect();
+    };
+  }, []);
+
+  const createNewTerminal = () => {
+    if (socket) {
+      createTerminalHelper({
+        setTerminals,
+        setActiveTerminalId,
+        setCreatingTerminal,
+        socket,
+      });
+    }
+  };
+
+  const closeTerminal = (id: string) => {
+    const terminalToClose = terminals.find(term => term.id === id);
+    if (terminalToClose && socket) {
+      closeTerminalHelper({
+        term: terminalToClose,
+        terminals,
+        setTerminals,
+        setActiveTerminalId,
+        setClosingTerminal: () => {}, // Implement if needed
+        socket,
+        activeTerminalId,
+      });
+    }
+  };
+
+  const value = {
+    socket,
+    terminals,
+    setTerminals,
+    activeTerminalId,
+    setActiveTerminalId,
+    creatingTerminal,
+    setCreatingTerminal,
+    createNewTerminal,
+    closeTerminal,
+  };
+
+  return (
+    <TerminalContext.Provider value={value}>
+      {children}
+    </TerminalContext.Provider>
+  );
+};
+
+export const useTerminal = (): TerminalContextType => {
+  const context = useContext(TerminalContext);
+  if (!context) {
+    throw new Error('useTerminal must be used within a TerminalProvider');
+  }
+  return context;
+};