improve orchestrator, docker settings, and ui layouts

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(
-    sandboxData.type !== "react"
-  );
+  const [isAwaitingConnection, setIsAwaitingConnection] = useState(true);
+  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 { Button } from "../ui/button"
-import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
-import { Socket } from "socket.io-client"
-import { Editor } from "@monaco-editor/react"
-import { User } from "@/lib/types"
-import { toast } from "sonner"
-import { usePathname, useRouter } from "next/navigation"
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../ui/button";
+import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react";
+import { Socket } from "socket.io-client";
+import { Editor } from "@monaco-editor/react";
+import { User } from "@/lib/types";
+import { toast } from "sonner";
+import { 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
-  socket: Socket
-  width: number
+  user: User;
+  socket: Socket;
+  width: number;
   data: {
-    fileName: string
-    code: string
-    line: number
-  }
+    fileName: string;
+    code: string;
+    line: number;
+  };
   editor: {
-    language: string
-  }
-  onExpand: () => void
-  onAccept: (code: string) => void
+    language: string;
+  };
+  onExpand: () => void;
+  onAccept: (code: string) => void;
 }) {
-  const pathname = usePathname()
-  const router = useRouter()
-  const inputRef = useRef<HTMLInputElement>(null)
+  const pathname = usePathname();
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const [code, setCode] = useState("")
-  const [expanded, setExpanded] = useState(false)
+  const [code, setCode] = useState("");
+  const [expanded, setExpanded] = useState(false);
   const [loading, setLoading] = useState({
     generate: false,
     regenerate: false,
-  })
-  const [input, setInput] = useState("")
-  const [currentPrompt, setCurrentPrompt] = useState("")
+  });
+  const [input, setInput] = useState("");
+  const [currentPrompt, setCurrentPrompt] = useState("");
 
   useEffect(() => {
     setTimeout(() => {
-      inputRef.current?.focus()
-    }, 0)
-  }, [])
+      inputRef.current?.focus();
+    }, 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 })
-    setCurrentPrompt(input)
+    setLoading({ generate: !regenerate, regenerate });
+    setCurrentPrompt(input);
     socket.emit(
       "generateCode",
       data.fileName,
@@ -73,30 +73,30 @@ export default function GenerateInput({
       regenerate ? currentPrompt : input,
       (res: {
         result: {
-          response: string
-        }
-        success: boolean
-        errors: any[]
-        messages: any[]
+          response: string;
+        };
+        success: boolean;
+        errors: any[];
+        messages: any[];
       }) => {
         if (!res.success) {
-          console.error(res.errors)
-          return
+          console.error(res.errors);
+          return;
         }
 
-        setCode(res.result.response)
-        router.refresh()
+        setCode(res.result.response);
+        router.refresh();
       }
-    )
-  }
+    );
+  };
 
   useEffect(() => {
     if (code) {
-      setExpanded(true)
-      onExpand()
-      setLoading({ generate: false, regenerate: false })
+      setExpanded(true);
+      onExpand();
+      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(() => {
-  //   startServer(sandboxData.id, userData.id, (success: boolean) => {
-  //     if (!success) {
-  //       toast.error("Failed to start server.");
-  //       return;
-  //     }
-  //     setIsServerRunning(true);
-  //   });
-  // }, []);
+  useEffect(() => {
+    startServer(sandboxData.id, userData.id, (success: boolean) => {
+      if (!success) {
+        toast.error("Failed to start server.");
+        setDidFail(true);
+      } else {
+        setIsServerRunning(true);
+      }
+    });
+
+    return () => {
+      stopServer(sandboxData.id, userData.id);
+    };
+  }, []);
 
   if (!isServerRunning)
-    return (
-      <Loading text="Creating code editing environment, this could take a while." />
-    );
+    return <Loading didFail={didFail} text="Creating your sandbox resources" />;
 
   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 { Loader, Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+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 ? (
-        <div className="text-lg font-medium flex items-center z-50 shadow-xl shadow-red-500">
-          <Loader2 className="h-5 w-5 animate-spin mr-2" />
-          {text}
-        </div>
-      ) : null}
+      <Dialog open={open}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {didFail ? (
+                <>
+                  <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>
       )}
     </>
   );