TERMINALS WORK!!!!

frontend/components/editor/index.tsx

@@ -353,11 +353,11 @@ export default function CodeEditor({
       socket.disconnect();
       resizeObserver.disconnect();
 
-      terminals.forEach((term) => {
-        if (term.terminal) {
-          term.terminal.dispose();
-        }
-      });
+      // terminals.forEach((term) => {
+      //   if (term.terminal) {
+      //     term.terminal.dispose();
+      //   }
+      // });
     };
   }, []);
 
@@ -494,8 +494,8 @@ export default function CodeEditor({
             : terminals[index - 1].id
           : activeTerminalId;
 
-      if (activeTerminal && activeTerminal.terminal)
-        activeTerminal.terminal.dispose();
+      // if (activeTerminal && activeTerminal.terminal)
+      //   activeTerminal.terminal.dispose();
       setTerminals((prev) => prev.filter((t) => t.id !== term.id));
 
       if (!nextId) {
@@ -784,16 +784,18 @@ export default function CodeEditor({
                   </div>
                   {socket && activeTerminal ? (
                     <div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
+                      {terminals.map((term) => (
                         <EditorTerminal
+                          key={term.id}
                           socket={socket}
-                        id={activeTerminal.id}
-                        term={activeTerminal.terminal}
+                          id={term.id}
+                          term={term.terminal}
                           setTerm={(t: Terminal) => {
-                          console.log(
-                            "setting terminal",
-                            activeTerminalId,
-                            t.options
-                          );
+                            // console.log(
+                            //   "setting terminal",
+                            //   activeTerminalId,
+                            //   t.options
+                            // );
                             setTerminals((prev) =>
                               prev.map((term) =>
                                 term.id === activeTerminalId
@@ -802,7 +804,9 @@ export default function CodeEditor({
                               )
                             );
                           }}
+                          visible={activeTerminalId === term.id}
                         />
+                      ))}
                     </div>
                   ) : (
                     <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">

frontend/components/editor/terminal/index.tsx

@@ -13,19 +13,19 @@ export default function EditorTerminal({
   id,
   term,
   setTerm,
+  visible,
 }: {
   socket: Socket;
   id: string;
   term: Terminal | null;
   setTerm: (term: Terminal) => void;
+  visible: boolean;
 }) {
   const terminalRef = useRef(null);
 
   useEffect(() => {
     if (!terminalRef.current) return;
-    console.log("new terminal", id, term ? "reusing" : "creating");
-
-    if (term) return;
+    // console.log("new terminal", id, term ? "reusing" : "creating");
 
     const terminal = new Terminal({
       cursorBlink: true,
@@ -40,22 +40,19 @@ export default function EditorTerminal({
 
     setTerm(terminal);
 
-    // return () => {
-    //   if (terminal) terminal.dispose();
-    // };
-  }, [id]);
+    return () => {
+      if (terminal) terminal.dispose();
+    };
+  }, []);
 
   useEffect(() => {
     if (!term) return;
 
-    console.log("A");
     if (terminalRef.current) {
       const fitAddon = new FitAddon();
       term.loadAddon(fitAddon);
       term.open(terminalRef.current);
-      console.log("B");
       fitAddon.fit();
-      // setTerm(term);
     }
     const disposable = term.onData((data) => {
       console.log("terminalData", id, data);
@@ -69,7 +66,11 @@ export default function EditorTerminal({
 
   return (
     <>
-      <div ref={terminalRef} className="w-full h-full text-left">
+      <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" />