commit initial 09-12-2025 021

package-lock.json

@@ -19,7 +19,9 @@
         "react-dom": "^19.1.0",
         "react-hot-toast": "^2.6.0",
         "react-scripts": "5.0.1",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "xterm": "^5.3.0",
+        "xterm-addon-fit": "^0.8.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -17561,6 +17563,23 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/xterm": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+      "deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+      "license": "MIT"
+    },
+    "node_modules/xterm-addon-fit": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz",
+      "integrity": "sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==",
+      "deprecated": "This package is now deprecated. Move to @xterm/addon-fit instead.",
+      "license": "MIT",
+      "peerDependencies": {
+        "xterm": "^5.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -14,7 +14,9 @@
     "react-dom": "^19.1.0",
     "react-hot-toast": "^2.6.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -16,7 +16,8 @@ import {
 import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
-
+import "xterm/css/xterm.css";
+import XTerm from "./Terminal";
 // =================== SUPPORTED LANGUAGES ===================
 const LANGUAGE_OPTIONS = [
   { id: "python", ext: ".py", icon: "🐍", monaco: "python" },
@@ -535,34 +536,18 @@ function codeNeedsInput(code, langId) {
           {/* Bottom panels */}
           <div className="ide-panels">
             {/* Terminal output */}
-            <div className="ide-output-terminal" style={{ marginBottom: 8 }}>
-              <div style={{ fontSize: 12, color: "#ccc", marginBottom: 6 }}>Terminal</div>
-              <div className="terminal-content" style={{ background: "#000", color: "#0f0", padding: 8, borderRadius: 6, maxHeight: 220, overflowY: "auto", whiteSpace: "pre-wrap", fontFamily: "Consolas, monospace" }}>
-                {terminalLines.length === 0 ? <div style={{ color: "#999" }}>[Program output will appear here]</div> : terminalLines.map((ln, i) => <div key={i}>{ln}</div>)}
-                {awaitingInput && <div style={{ color: "#fff" }}>&nbsp;</div>}
-              </div>
-
-              {/* Terminal input (shown only when program asks input) */}
-              {awaitingInput ? (
-                <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
-                  <input
-                    className="ide-input-box"
-                    placeholder="Type input and press Enter..."
-                    value={terminalInput}
-                    onChange={(e) => setTerminalInput(e.target.value)}
-                    onKeyDown={onTerminalKeyDown}
-                    disabled={!awaitingInput || isRunning}
-                  />
-                  <button onClick={sendTerminalInput} disabled={!awaitingInput || isRunning} className="ide-button">Send</button>
-                </div>
-              ) : (
-                // If not awaiting input, show legacy single-run input + hint to run for interactive programs
-                <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
-                  <input className="ide-input-box" placeholder="(Optional) Program input for single-run" value={stdin} onChange={(e) => setStdin(e.target.value)} />
-                  <div style={{ alignSelf: "center", color: "#999", fontSize: 12 }}>Press Run → to execute</div>
-                </div>
-              )}
-            </div>
+           <XTerm
+  output={output}
+  onData={(userInputLine) => {
+    // Send each line to backend dynamically
+    setAccumStdin((prev) => prev + userInputLine + "\n");
+
+    // If waiting for next input, resume execution or re-run code
+    if (awaitingInput) {
+      runCodeWithUpdatedInput();
+    }
+  }}
+/>
 
             {/* Problems */}
             {problems.length > 0 && (

src/Terminal.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import "xterm/css/xterm.css";
+
+export default function XTerm({ onData, output }) {
+  const termRef = useRef(null);
+  const fitAddon = new FitAddon();
+
+  useEffect(() => {
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      theme: {
+        background: "#1e1e1e",
+        foreground: "#ffffff",
+      },
+    });
+
+    termRef.current = term;
+    term.loadAddon(fitAddon);
+
+    term.open(document.getElementById("terminal-container"));
+    fitAddon.fit();
+
+    term.onData((data) => {
+      // Echo user input (like real terminals)
+      term.write(data);
+
+      // When ENTER pressed, send full line to parent
+      if (data === "\r") {
+        const line = term._core.buffer.xtermBuffer.active.getLine(
+          term.buffer.active.cursorY
+        ).translateToString().trim();
+        onData(line);
+      }
+    });
+
+    return () => term.dispose();
+  }, []);
+
+  // Print backend output into terminal
+  useEffect(() => {
+    if (output) {
+      termRef.current?.writeln("\r\n" + output);
+    }
+  }, [output]);
+
+  return (
+    <div
+      id="terminal-container"
+      style={{
+        width: "100%",
+        height: "180px",
+        background: "#1e1e1e",
+        borderTop: "1px solid #333",
+      }}
+    ></div>
+  );
+}