feat: add theme to terminal

backend/server/src/index.ts

@@ -224,10 +224,11 @@ io.on("connection", async (socket) => {
         containers[data.sandboxId],
         sendLoadedEvent
       )
-      await fileManagers[data.sandboxId].initialize()
       terminalManagers[data.sandboxId] = new TerminalManager(
         containers[data.sandboxId]
       )
+      console.log(`terminal manager set up for ${data.sandboxId}`)
+      await fileManagers[data.sandboxId].initialize()
     }
 
     const fileManager = fileManagers[data.sandboxId]
@@ -415,6 +416,12 @@ io.on("connection", async (socket) => {
     socket.on("createTerminal", async (id: string, callback) => {
       try {
         await lockManager.acquireLock(data.sandboxId, async () => {
+          let terminalManager = terminalManagers[data.sandboxId]
+          if (!terminalManager) {
+            terminalManager = terminalManagers[data.sandboxId] =
+              new TerminalManager(containers[data.sandboxId])
+          }
+
           await terminalManager.createTerminal(id, (responseString: string) => {
             socket.emit("terminalResponse", { id, data: responseString })
             const port = extractPortNumber(responseString)

frontend/components/editor/terminals/terminal.tsx

@@ -6,9 +6,9 @@ import "./xterm.css"
 
 import { debounce } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
+import { useTheme } from "next-themes"
 import { ElementRef, useEffect, useRef } from "react"
 import { Socket } from "socket.io-client"
-
 export default function EditorTerminal({
   socket,
   id,
@@ -22,16 +22,121 @@ export default function EditorTerminal({
   setTerm: (term: Terminal) => void
   visible: boolean
 }) {
-  const terminalRef = useRef<ElementRef<"div">>(null)
+  const { theme } = useTheme()
+  const terminalContainerRef = useRef<ElementRef<"div">>(null)
   const fitAddonRef = useRef<FitAddon | null>(null)
 
   useEffect(() => {
-    if (!terminalRef.current) return
+    if (!terminalContainerRef.current) return
     // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
-      theme: {
+      theme: theme === "light" ? lightTheme : darkTheme,
+      fontFamily: "var(--font-geist-mono)",
+      fontSize: 14,
+      lineHeight: 1.5,
+      letterSpacing: 0,
+    })
+
+    setTerm(terminal)
+    const dispose = () => {
+      terminal.dispose()
+    }
+    return dispose
+  }, [])
+
+  useEffect(() => {
+    if (term) {
+      term.options.theme = theme === "light" ? lightTheme : darkTheme
+    }
+  }, [theme])
+
+  useEffect(() => {
+    if (!term) return
+
+    if (!terminalContainerRef.current) return
+    if (!fitAddonRef.current) {
+      const fitAddon = new FitAddon()
+      term.loadAddon(fitAddon)
+      term.open(terminalContainerRef.current)
+      fitAddon.fit()
+      fitAddonRef.current = fitAddon
+    }
+
+    const disposableOnData = term.onData((data) => {
+      socket.emit("terminalData", id, data)
+    })
+
+    const disposableOnResize = term.onResize((dimensions) => {
+      fitAddonRef.current?.fit()
+      socket.emit("terminalResize", dimensions)
+    })
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!fitAddonRef.current || !terminalContainerRef.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 !== terminalContainerRef.current.offsetWidth ||
+          height !== terminalContainerRef.current.offsetHeight
+        ) {
+          try {
+            fitAddonRef.current.fit()
+          } catch (err) {
+            console.error("Error during fit:", err)
+          }
+        }
+      }, 50) // Debounce for 50ms
+    )
+
+    // start observing for resize
+    resizeObserver.observe(terminalContainerRef.current)
+    return () => {
+      disposableOnData.dispose()
+      disposableOnResize.dispose()
+      resizeObserver.disconnect()
+    }
+  }, [term, terminalContainerRef.current])
+
+  useEffect(() => {
+    if (!term) return
+    const handleTerminalResponse = (response: { id: string; data: string }) => {
+      if (response.id === id) {
+        term.write(response.data)
+      }
+    }
+    socket.on("terminalResponse", handleTerminalResponse)
+
+    return () => {
+      socket.off("terminalResponse", handleTerminalResponse)
+    }
+  }, [term, id, socket])
+
+  return (
+    <>
+      <div
+        ref={terminalContainerRef}
+        style={{ display: visible ? "block" : "none" }}
+        className="w-full h-full text-left"
+      >
+        {term === null ? (
+          <div className="flex items-center text-muted-foreground p-2">
+            <Loader2 className="animate-spin mr-2 h-4 w-4" />
+            <span>Connecting to terminal...</span>
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+const lightTheme = {
   foreground: "#2e3436",
   background: "#ffffff",
   black: "#2e3436",
@@ -52,101 +157,34 @@ export default function EditorTerminal({
   brightWhite: "#eeeeec",
   cursor: "#2e3436",
   cursorAccent: "#ffffff",
-        selection: "rgba(52, 101, 164, 0.3)",
+  selectionBackground: "#3465a4",
-      },
+  selectionForeground: "#ffffff",
-      fontFamily: "var(--font-geist-mono)",
+  selectionInactiveBackground: "#264973",
-      fontSize: 14,
+}
-      lineHeight: 1.5,
+
-      letterSpacing: 0,
+// Dark Theme
-    })
+const darkTheme = {
-
+  foreground: "#f8f8f2",
-    setTerm(terminal)
+  background: "#0a0a0a",
-    const dispose = () => {
+  black: "#21222c",
-      terminal.dispose()
+  brightBlack: "#6272a4",
-    }
+  red: "#ff5555",
-    return dispose
+  brightRed: "#ff6e6e",
-  }, [])
+  green: "#50fa7b",
-
+  brightGreen: "#69ff94",
-  useEffect(() => {
+  yellow: "#f1fa8c",
-    if (!term) return
+  brightYellow: "#ffffa5",
-
+  blue: "#bd93f9",
-    if (!terminalRef.current) return
+  brightBlue: "#d6acff",
-    if (!fitAddonRef.current) {
+  magenta: "#ff79c6",
-      const fitAddon = new FitAddon()
+  brightMagenta: "#ff92df",
-      term.loadAddon(fitAddon)
+  cyan: "#8be9fd",
-      term.open(terminalRef.current)
+  brightCyan: "#a4ffff",
-      fitAddon.fit()
+  white: "#f8f8f2",
-      fitAddonRef.current = fitAddon
+  brightWhite: "#ffffff",
-    }
+  cursor: "#f8f8f2",
-
+  cursorAccent: "#0a0a0a",
-    const disposableOnData = term.onData((data) => {
+  selectionBackground: "#264973",
-      socket.emit("terminalData", id, data)
+  selectionForeground: "#ffffff",
-    })
+  selectionInactiveBackground: "#1a3151",
-
-    const disposableOnResize = term.onResize((dimensions) => {
-      fitAddonRef.current?.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])
-
-  useEffect(() => {
-    if (!term) return
-    const handleTerminalResponse = (response: { id: string; data: string }) => {
-      if (response.id === id) {
-        term.write(response.data)
-      }
-    }
-    socket.on("terminalResponse", handleTerminalResponse)
-
-    return () => {
-      socket.off("terminalResponse", handleTerminalResponse)
-    }
-  }, [term, id, socket])
-
-  return (
-    <>
-      <div
-        ref={terminalRef}
-        style={{ display: visible ? "block" : "none" }}
-        className="w-full h-full text-left"
-      >
-        {term === null ? (
-          <div className="flex items-center text-muted-foreground p-2">
-            <Loader2 className="animate-spin mr-2 h-4 w-4" />
-            <span>Connecting to terminal...</span>
-          </div>
-        ) : null}
-      </div>
-    </>
-  )
 }

frontend/components/ui/tab.tsx

@@ -28,7 +28,7 @@ export default function Tab({
       variant={"secondary"}
       className={`font-normal select-none ${
         selected
-          ? "bg-neutral-700 hover:bg-neutral-600 text-foreground"
+          ? "bg-muted-foreground/50 hover:bg-muted-foreground/40 text-foreground"
           : "text-muted-foreground"
       }`}
     >