improve orchestrator, docker settings, and ui layouts

.gitignore

@@ -38,7 +38,7 @@ next-env.d.ts
 
 wrangler.toml
 
-backend/server/dist
+dist
 backend/server/projects
 backend/database/drizzle
 

backend/orchestrator/service.yaml

@@ -22,7 +22,7 @@ spec:
           image: ishaan1013/sandbox:latest
           ports:
             - containerPort: 4000
-            - containerPort: 3000
+            - containerPort: 8000
           volumeMounts:
             - name: workspace-volume
               mountPath: /workspace
@@ -54,8 +54,8 @@ spec:
       targetPort: 4000
     - protocol: TCP
       name: user
-      port: 3000
+      port: 8000
-      targetPort: 3000
+      targetPort: 8000
 ---
 apiVersion: networking.k8s.io/v1
 kind: Ingress
@@ -83,4 +83,4 @@ spec:
               service:
                 name: <SANDBOX>
                 port:
-                  number: 3000
+                  number: 8000

backend/orchestrator/src/index.ts

@@ -19,9 +19,12 @@ app.use(express.json())
 dotenv.config()
 
 const corsOptions = {
-  origin: ['http://localhost:3000', 'https://s.ishaand.com', 'http://localhost:4000'],
+  origin: ['http://localhost:3000', 'https://s.ishaand.com', 'http://localhost:4000', /\.ws\.ishaand\.com$/],
 }
 
+// app.use(cors(corsOptions))
+app.use(cors())
+
 const kubeconfig = new KubeConfig()
 if (process.env.NODE_ENV === "production") {
   kubeconfig.loadFromOptions({
@@ -110,25 +113,26 @@ const dataSchema = z.object({
   sandboxId: z.string(),
 })
 
-const namespace = "sandbox"
+const namespace = "ingress-nginx"
 
-app.get("/test", cors(), async (req, res) => {
+app.post("/test", async (req, res) => {
   res.status(200).send({ message: "Orchestrator is up and running." })
 })
 
-app.get("/test/cors", cors(corsOptions), async (req, res) => {
+app.post("/start", async (req, res) => {
-  res.status(200).send({ message: "With CORS, Orchestrator is up and running." })
-})
-
-app.post("/start", cors(corsOptions), async (req, res) => {
   const { sandboxId } = dataSchema.parse(req.body)
 
   try {
+
+    console.log("Creating resources for sandbox", sandboxId)
+    
     const kubeManifests = readAndParseKubeYaml(
       path.join(__dirname, "../service.yaml"),
       sandboxId
     )
 
+    console.log("Successfully read and parsed kube yaml")
+
     async function resourceExists(api: any, getMethod: string, name: string) {
       try {
         await api[getMethod](namespace, name)
@@ -139,44 +143,57 @@ app.post("/start", cors(corsOptions), async (req, res) => {
       }
     }
 
-    kubeManifests.forEach(async (manifest) => {
+    const promises = kubeManifests.map(async (manifest) => {
       const { kind, metadata: { name } } = manifest
 
       if (kind === "Deployment")
         if (!(await resourceExists(appsV1Api, 'readNamespacedDeployment', name))) {
           await appsV1Api.createNamespacedDeployment(namespace, manifest)
+          console.log("Made deploymnet")
         } else {
           return res.status(200).send({ message: "Resource deployment already exists." })
         }
       else if (kind === "Service")
         if (!(await resourceExists(coreV1Api, 'readNamespacedService', name))) {
           await coreV1Api.createNamespacedService(namespace, manifest)
+          console.log("Made service")
         } else {
           return res.status(200).send({ message: "Resource service already exists." })
         }
       else if (kind === "Ingress")
         if (!(await resourceExists(networkingV1Api, 'readNamespacedIngress', name))) {
           await networkingV1Api.createNamespacedIngress(namespace, manifest)
+          console.log("Made ingress")
         } else {
           return res.status(200).send({ message: "Resource ingress already exists." })
         }
     })
+
+    await Promise.all(promises)
+
+    console.log("All done!")
     res.status(200).send({ message: "Resources created." })
-  } catch (error) {
+  } catch (error: any) {
-    console.log("Failed to create resources", error)
+    const body = error.response.body
+    console.log("Failed to create resources", body)
+
+    if (body.code === 409) {
+      return res.status(200).send({ message: "Resource already exists." })
+    }
     res.status(500).send({ message: "Failed to create resources." })
   }
 })
 
-app.post("/stop", cors(corsOptions), async (req, res) => {
+app.post("/stop", async (req, res) => {
   const { sandboxId } = dataSchema.parse(req.body)
+  console.log("Deleting resources for sandbox", sandboxId)
 
   try {
     const kubeManifests = readAndParseKubeYaml(
       path.join(__dirname, "../service.yaml"),
       sandboxId
     )
-    kubeManifests.forEach(async (manifest) => {
+    const promises = kubeManifests.map(async (manifest) => {
       if (manifest.kind === "Deployment")
         await appsV1Api.deleteNamespacedDeployment(
           manifest.metadata?.name || "",
@@ -193,6 +210,9 @@ app.post("/stop", cors(corsOptions), async (req, res) => {
           namespace
         )
     })
+
+    await Promise.all(promises)
+    
     res.status(200).send({ message: "Resources deleted." })
   } catch (error) {
     console.log("Failed to delete resources", error)

backend/server/.dockerignore

@@ -1,2 +1,3 @@
 .env
 node_modules
+projects

backend/server/dockerfile

@@ -1,8 +1,10 @@
-ARG CF_API_TOKEN
-ARG CF_USER_ID
-
 FROM node:20
 
+# Security: Drop all capabilities
+USER root
+RUN apt-get update && apt-get install -y libcap2-bin
+RUN setcap cap_net_bind_service=+ep /usr/local/bin/node
+
 WORKDIR /code
 
 COPY package*.json ./
@@ -13,8 +15,15 @@ COPY . .
 
 RUN npm run build
 
+# Security: Create non-root user and assign ownership
+RUN useradd -m myuser
+RUN mkdir projects && chown -R myuser:myuser projects
+USER myuser
+
 EXPOSE 3000
 
+ARG CF_API_TOKEN
+ARG CF_USER_ID
 ENV CF_API_TOKEN=$CF_API_TOKEN
 ENV CF_USER_ID=$CF_USER_ID
 

backend/server/src/index.ts

@@ -435,15 +435,16 @@ io.on("connection", async (socket) => {
       clearTimeout(inactivityTimeout)
     };
     if (sockets.length === 0) {
+      console.log("STARTING TIMER")
       inactivityTimeout = setTimeout(() => {
-        io.fetchSockets().then(sockets => {
+        io.fetchSockets().then(async (sockets) => {
           if (sockets.length === 0) {
             // close server
             console.log("Closing server due to inactivity.");
-            stopServer(data.sandboxId, data.userId)
+            // const res = await stopServer(data.sandboxId, data.userId)
           }
       });
-      }, 60000);
+      }, 20000);
     }
 
   })

backend/server/src/utils.ts

@@ -198,7 +198,7 @@ ${code}`,
 }
 
 export const stopServer = async (sandboxId: string, userId: string) => {
-  await fetch("http://localhost:4001/stop", {
+  const res = await fetch("http://localhost:4001/stop", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -208,4 +208,7 @@ export const stopServer = async (sandboxId: string, userId: string) => {
       userId
     }),
   })
+  const data = await res.json()
+
+  return data
 }

backend/storage/src/startercode.ts

@@ -55,6 +55,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 8000,
+  },
 })
 `,
 		},

frontend/components/editor/editor.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import monaco from "monaco-editor";
 import Editor, { BeforeMount, OnMount } from "@monaco-editor/react";
-import { io } from "socket.io-client";
+import { Socket, io } from "socket.io-client";
 import { toast } from "sonner";
 import { useClerk } from "@clerk/nextjs";
 
@@ -40,12 +40,12 @@ export default function CodeEditor({
   sandboxData: Sandbox;
 }) {
   const socket = io(
-    `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`
+    `ws://${sandboxData.id}.ws.ishaand.com?userId=${userData.id}&sandboxId=${sandboxData.id}`
+    // `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`
   );
 
-  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(
+  const [isAwaitingConnection, setIsAwaitingConnection] = useState(true);
-    sandboxData.type !== "react"
+  const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
-  );
   const [disableAccess, setDisableAccess] = useState({
     isDisabled: false,
     message: "",
@@ -364,7 +364,9 @@ export default function CodeEditor({
 
   // Socket event listener effect
   useEffect(() => {
-    const onConnect = () => {};
+    const onConnect = () => {
+      setIsAwaitingConnection(false);
+    };
 
     const onDisconnect = () => {
       setTerminals([]);
@@ -538,6 +540,14 @@ export default function CodeEditor({
     }, 3000);
   };
 
+  if (isAwaitingConnection)
+    return (
+      <Loading
+        text="Connecting to server..."
+        description="This could take a few minutes if the backend needs to scale resources for your cloud code editing environment. Please check back soon."
+      />
+    );
+
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
     return (
@@ -727,6 +737,7 @@ export default function CodeEditor({
                   previewPanelRef.current?.expand();
                   setIsPreviewCollapsed(false);
                 }}
+                sandboxId={sandboxData.id}
               />
             </ResizablePanel>
             <ResizableHandle />

frontend/components/editor/generate.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
-import { Button } from "../ui/button"
+import { Button } from "../ui/button";
-import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
+import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react";
-import { Socket } from "socket.io-client"
+import { Socket } from "socket.io-client";
-import { Editor } from "@monaco-editor/react"
+import { Editor } from "@monaco-editor/react";
-import { User } from "@/lib/types"
+import { User } from "@/lib/types";
-import { toast } from "sonner"
+import { toast } from "sonner";
-import { usePathname, useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation";
 // import monaco from "monaco-editor"
 
 export default function GenerateInput({
@@ -19,52 +19,52 @@ export default function GenerateInput({
   onExpand,
   onAccept,
 }: {
-  user: User
+  user: User;
-  socket: Socket
+  socket: Socket;
-  width: number
+  width: number;
   data: {
-    fileName: string
+    fileName: string;
-    code: string
+    code: string;
-    line: number
+    line: number;
-  }
+  };
   editor: {
-    language: string
+    language: string;
-  }
+  };
-  onExpand: () => void
+  onExpand: () => void;
-  onAccept: (code: string) => void
+  onAccept: (code: string) => void;
 }) {
-  const pathname = usePathname()
+  const pathname = usePathname();
-  const router = useRouter()
+  const router = useRouter();
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const [code, setCode] = useState("")
+  const [code, setCode] = useState("");
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
   const [loading, setLoading] = useState({
     generate: false,
     regenerate: false,
-  })
+  });
-  const [input, setInput] = useState("")
+  const [input, setInput] = useState("");
-  const [currentPrompt, setCurrentPrompt] = useState("")
+  const [currentPrompt, setCurrentPrompt] = useState("");
 
   useEffect(() => {
     setTimeout(() => {
-      inputRef.current?.focus()
+      inputRef.current?.focus();
-    }, 0)
+    }, 0);
-  }, [])
+  }, []);
 
   const handleGenerate = async ({
     regenerate = false,
   }: {
-    regenerate?: boolean
+    regenerate?: boolean;
   }) => {
     if (user.generations >= 30) {
       toast.error(
         "You reached the maximum # of generations. Contact @ishaandey_ on X/Twitter to reset :)"
-      )
+      );
     }
 
-    setLoading({ generate: !regenerate, regenerate })
+    setLoading({ generate: !regenerate, regenerate });
-    setCurrentPrompt(input)
+    setCurrentPrompt(input);
     socket.emit(
       "generateCode",
       data.fileName,
@@ -73,30 +73,30 @@ export default function GenerateInput({
       regenerate ? currentPrompt : input,
       (res: {
         result: {
-          response: string
+          response: string;
-        }
+        };
-        success: boolean
+        success: boolean;
-        errors: any[]
+        errors: any[];
-        messages: any[]
+        messages: any[];
       }) => {
         if (!res.success) {
-          console.error(res.errors)
+          console.error(res.errors);
-          return
+          return;
         }
 
-        setCode(res.result.response)
+        setCode(res.result.response);
-        router.refresh()
+        router.refresh();
       }
-    )
+    );
-  }
+  };
 
   useEffect(() => {
     if (code) {
-      setExpanded(true)
+      setExpanded(true);
-      onExpand()
+      onExpand();
-      setLoading({ generate: false, regenerate: false })
+      setLoading({ generate: false, regenerate: false });
     }
-  }, [code])
+  }, [code]);
 
   return (
     <div className="w-full pr-4 space-y-2">
@@ -187,5 +187,5 @@ export default function GenerateInput({
         </>
       ) : null}
     </div>
-  )
+  );
 }

frontend/components/editor/index.tsx

@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
 import Loading from "@/components/editor/loading";
 import { Sandbox, User } from "@/lib/types";
 import { useEffect, useState } from "react";
-import { startServer } from "@/lib/utils";
+import { startServer, stopServer } from "@/lib/utils";
 import { toast } from "sonner";
 
 const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
@@ -20,21 +20,25 @@ export default function Editor({
   sandboxData: Sandbox;
 }) {
   const [isServerRunning, setIsServerRunning] = useState(false);
+  const [didFail, setDidFail] = useState(false);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   startServer(sandboxData.id, userData.id, (success: boolean) => {
+    startServer(sandboxData.id, userData.id, (success: boolean) => {
-  //     if (!success) {
+      if (!success) {
-  //       toast.error("Failed to start server.");
+        toast.error("Failed to start server.");
-  //       return;
+        setDidFail(true);
-  //     }
+      } else {
-  //     setIsServerRunning(true);
+        setIsServerRunning(true);
-  //   });
+      }
-  // }, []);
+    });
+
+    return () => {
+      stopServer(sandboxData.id, userData.id);
+    };
+  }, []);
 
   if (!isServerRunning)
-    return (
+    return <Loading didFail={didFail} text="Creating your sandbox resources" />;
-      <Loading text="Creating code editing environment, this could take a while." />
-    );
 
   return <CodeEditor userData={userData} sandboxData={sandboxData} />;
 }

frontend/components/editor/loading/index.tsx

@@ -1,23 +1,58 @@
 import Image from "next/image";
 import Logo from "@/assets/logo.svg";
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
-import { Loader, Loader2 } from "lucide-react";
+import { Loader2, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useEffect, useState } from "react";
 
 export default function Loading({
+  didFail = false,
   withNav = false,
   text = "",
+  description = "",
 }: {
+  didFail?: boolean;
   withNav?: boolean;
   text?: string;
+  description?: string;
 }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (text) {
+      setOpen(true);
+    }
+  }, [text]);
+
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col justify-center items-center z-0 h-screen bg-background relative">
-      {text ? (
+      <Dialog open={open}>
-        <div className="text-lg font-medium flex items-center z-50 shadow-xl shadow-red-500">
+        <DialogContent>
-          <Loader2 className="h-5 w-5 animate-spin mr-2" />
+          <DialogHeader>
-          {text}
+            <DialogTitle>
-        </div>
+              {didFail ? (
-      ) : null}
+                <>
+                  <X className="h-4 w-4 mr-2 text-destructive" /> Failed to
+                  create resources.
+                </>
+              ) : (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" /> {text}
+                </>
+              )}
+            </DialogTitle>
+            {description ? (
+              <DialogDescription>{description}</DialogDescription>
+            ) : null}
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
 
       {withNav ? (
         <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">

frontend/components/editor/preview/index.tsx

@@ -12,9 +12,11 @@ import {
 export default function PreviewWindow({
   collapsed,
   open,
+  sandboxId,
 }: {
   collapsed: boolean;
   open: () => void;
+  sandboxId: string;
 }) {
   return (
     <>
@@ -55,7 +57,13 @@ export default function PreviewWindow({
         </div>
       </div>
       {collapsed ? null : (
-        <div className="w-full grow rounded-md bg-foreground"></div>
+        <div className="w-full grow rounded-md overflow-hidden bg-foreground">
+          <iframe
+            width={"100%"}
+            height={"100%"}
+            src={`http://${sandboxId}.s.ishaand.com`}
+          />
+        </div>
       )}
     </>
   );

frontend/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { Cross2Icon } from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -50,8 +50,29 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
+));
-DialogContent.displayName = DialogPrimitive.Content.displayName
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogContentNoClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContentNoClose.displayName =
+  DialogPrimitive.Content.displayName + "NoClose";
 
 const DialogHeader = ({
   className,
@@ -64,8 +85,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-)
+);
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -78,8 +99,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
+);
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -88,13 +109,13 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-lg font-semibold leading-none tracking-tight flex items-center",
       className
     )}
     {...props}
   />
-))
+));
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +126,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -115,8 +136,9 @@ export {
   DialogTrigger,
   DialogClose,
   DialogContent,
+  DialogContentNoClose,
   DialogHeader,
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

frontend/lib/utils.ts

@@ -3,6 +3,7 @@ import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 import { Sandbox, TFile, TFolder } from "./types"
 
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
@@ -51,7 +52,7 @@ export function addNew(name: string, type: "file" | "folder", setFiles: React.Di
 
 export async function startServer(sandboxId: string, userId: string, callback: (success: boolean) => void) {
   try {
-    await fetch("http://localhost:4001/start", {
+    const res = await fetch("http://localhost:4001/start", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -62,6 +63,11 @@ export async function startServer(sandboxId: string, userId: string, callback: (
       }),
     })
 
+    if (res.status !== 200) {
+      console.error("Failed to start server", res)
+      callback(false)
+    }
+
     callback(true)
     
   } catch (error) {
@@ -71,3 +77,16 @@ export async function startServer(sandboxId: string, userId: string, callback: (
   }
 
 }
+
+export const stopServer = async (sandboxId: string, userId: string) => {
+  const res = await fetch("http://localhost:4001/stop", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      sandboxId,
+      userId
+    }),
+  })
+}