commit initial 09-12-2025 07

src/App.js

@@ -16,6 +16,8 @@ import {
 import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
+import "xterm/css/xterm.css";
+import XTerm from "./Terminal"; // <-- your terminal component
 
 // =================== SUPPORTED LANGUAGES ===================
 const LANGUAGE_OPTIONS = [
@@ -50,20 +52,40 @@ function outputLooksForInput(output) {
   return patterns.some((p) => p.test(o));
 }
 
+function codeNeedsInput(code, langId) {
+  if (!code) return false;
+  try {
+    const c = code.toString();
+    if (langId === "python") {
+      return /\binput\s*\(/i.test(c);
+    }
+    if (langId === "java") {
+      return /\bScanner\s*\(|\bnext(Int|Line|Double)\b/i.test(c) || /\bSystem\.console\(\)/i.test(c);
+    }
+    if (langId === "javascript") {
+      return /process\.stdin|readline|prompt\(|window\.prompt/i.test(c);
+    }
+    return /\binput\b|\bScanner\b|\bnextInt\b|prompt\(/i.test(c);
+  } catch {
+    return false;
+  }
+}
+
 // =================== APP ===================
 function App() {
   const [tree, setTree] = useState(loadTree());
   const [activePath, setActivePath] = useState("main.py"); // selected file or folder path
+
   // Terminal-ish state
-  const [terminalLines, setTerminalLines] = useState([]); // array of strings shown in terminal
-  const [terminalInput, setTerminalInput] = useState(""); // current typed input in terminal prompt
   const [accumStdin, setAccumStdin] = useState(""); // accumulated stdin passed to backend
   const [awaitingInput, setAwaitingInput] = useState(false); // true if program waiting for input
-  const [output, setOutput] = useState(""); // last raw output (kept for compatibility)
+  const [output, setOutput] = useState(""); // last raw output (passed to XTerm)
   const [prompt, setPrompt] = useState("");
   const [explanation, setExplanation] = useState("");
-  // other states
-  const [stdin, setStdin] = useState(""); // legacy single-run input (kept for compatibility)
+
+  // legacy/other UI state
+  const [terminalInput, setTerminalInput] = useState("");
+  const [stdin, setStdin] = useState(""); // optional single-run input
   const [problems, setProblems] = useState([]);
   const [theme, setTheme] = useState("vs-dark");
   const [searchOpen, setSearchOpen] = useState(false);
@@ -200,94 +222,108 @@ function App() {
     e.target.value = "";
   };
 
-  // ---------- Terminal/Run logic (interactive) ----------
-  // We will accumulate stdin in `accumStdin`. On initial run we clear it.
-  // When backend returns output containing cues that input is requested, set awaitingInput=true.
-  // When user types into terminal prompt and presses Enter, append that input to accumStdin + "\n",
-  // then re-run the program with updated accumStdin. Repeat until no input cues.
-
-const resetTerminal = (keepAccum = false) => {
-  setTerminalLines([]);
-  setTerminalInput("");
-  // only reset accumulated stdin if caller explicitly wants to clear it
-  if (!keepAccum) {
-    setAccumStdin("");
-  }
-  setAwaitingInput(false);
-};
-
-  const appendTerminal = (text) => {
-    setTerminalLines((prev) => [...prev, text]);
+  // ---------- Terminal helpers ----------
+  const resetTerminal = (keepAccum = false) => {
+    // We clear output state (XTerm will reflect this)
+    setOutput("");
+    // only reset accumulated stdin if caller explicitly wants to clear it
+    if (!keepAccum) {
+      setAccumStdin("");
+    }
+    setAwaitingInput(false);
+    setTerminalInput("");
   };
 
-  // helper: detect input calls in source (python/java/js)
-function codeNeedsInput(code, langId) {
-  if (!code) return false;
-  try {
-    const c = code.toString();
-    if (langId === "python") {
-      return /\binput\s*\(/i.test(c);
+  // runCodeWithUpdatedInput:
+  // called when a line is typed in XTerm (onData)
+  const runCodeWithUpdatedInput = async (inputLine) => {
+    // echoing is handled by XTerm itself; here we update accumStdin and run
+    const newAccum = (accumStdin || "") + inputLine + "\n";
+    setAccumStdin(newAccum);
+
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
+      // write a small error into output so XTerm displays it
+      setOutput((prev) => prev + "\n[Error] No file selected to run.");
+      setAwaitingInput(false);
+      return;
     }
-    if (langId === "java") {
-      return /\bScanner\s*\(|\bnext(Int|Line|Double|())\b/i.test(c) || /\bSystem\.console\(\)/i.test(c);
+
+    const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
+    if (!selectedLang || !RUNNABLE_LANGS.includes(selectedLang)) {
+      setOutput((prev) => prev + `\n[Error] Run not supported for ${node.name}`);
+      setAwaitingInput(false);
+      return;
     }
-    if (langId === "javascript") {
-      // node.js stdin reads or prompt usage heuristics
-      return /process\.stdin|readline|prompt\(|window\.prompt/i.test(c);
+
+    setIsRunning(true);
+    try {
+      const res = await runCode(node.content, selectedLang, newAccum);
+      const out = res.output ?? "";
+      setOutput(out);
+      setProblems(res.error ? parseProblems(res.output) : []);
+      if (outputLooksForInput(out)) {
+        setAwaitingInput(true);
+      } else {
+        setAwaitingInput(false);
+      }
+    } catch (err) {
+      setOutput(String(err));
+      setAwaitingInput(false);
+    } finally {
+      setIsRunning(false);
     }
-    // fallback: look for common words
-    return /\binput\b|\bScanner\b|\bnextInt\b|prompt\(/i.test(c);
-  } catch {
-    return false;
-  }
-}
+  };
 
+  // ---------- Run (initial) ----------
   const handleRun = async () => {
-  const node = getNodeByPath(tree, activePath);
-  if (!node || node.type !== "file") {
-    setOutput("Select a file to run.");
-    return;
-  }
-  const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
-  if (!selectedLang || !RUNNABLE_LANGS.includes(selectedLang)) {
-    setOutput(`⚠️ Run not supported for this file type.`);
-    return;
-  }
-
-  // If code likely needs input and accumStdin is empty, ask for initial input
-  const needs = codeNeedsInput(node.content, selectedLang);
-  if (needs && !accumStdin) {
-    // collect multi-line input: user can paste multiple lines separated by \n
-    const userText = window.prompt(
-      "This program appears to request console input (e.g. input() / Scanner).\n\nEnter input lines separated by a newline (\\n). Leave empty to run without input.",
-      ""
-    );
-    if (userText == null) {
-      // user pressed cancel: proceed but warn
-      appendTerminal("[Run cancelled by user]");
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
+      setOutput("Select a file to run.");
       return;
     }
-    // userText may contain literal backslash-n if pasted; keep it as-is.
-    // Normalize: if the user typed using Enter, it's already multi-line.
-    const prepared = userText.replace(/\\n/g, "\n");
-    setAccumStdin(prepared);
-  }
+    const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
+    if (!selectedLang || !RUNNABLE_LANGS.includes(selectedLang)) {
+      setOutput(`⚠️ Run not supported for this file type.`);
+      return;
+    }
+
+    // If code likely needs input and accumStdin is empty, ask for initial input
+    const needs = codeNeedsInput(node.content, selectedLang);
+    let stdinToSend = accumStdin || stdin || "";
+
+    if (needs && !stdinToSend) {
+      const userText = window.prompt(
+        "This program appears to request console input (e.g. input() / Scanner).\n\nEnter input lines — use Enter for new lines or paste multi-line input. Leave empty to run without input.",
+        ""
+      );
+
+      if (userText === null) {
+        // user cancelled prompt -> do nothing (abort run)
+        setOutput((prev) => prev + "\n[Run cancelled by user]");
+        return;
+      }
+
+      // normalize any literal "\n" sequences into real newlines (helps users pasting)
+      const prepared = userText.replace(/\\n/g, "\n");
+      stdinToSend = prepared;
+      // set accumStdin state (so subsequent interactive sends append to it)
+      setAccumStdin(prepared);
+    }
+
+    // start fresh terminal output but keep accumulated stdin
+    resetTerminal(true);
+    setOutput(`[Running with stdin length=${stdinToSend ? stdinToSend.length : 0}]\n`);
 
-    // clear terminal state and start a fresh run
-    resetTerminal();
     setIsRunning(true);
     setProblems([]);
-    setOutput("");
     try {
-      // call backend with current accumStdin (empty on first run)
-      const res = await runCode(node.content, selectedLang, accumStdin || stdin || "");
+      // IMPORTANT: use local stdinToSend (not state) so the run uses the value right away
+      const res = await runCode(node.content, selectedLang, stdinToSend);
       const out = res.output ?? "";
       setOutput(out);
-      appendTerminal(out);
       setProblems(res.error ? parseProblems(res.output) : []);
-
       if (outputLooksForInput(out)) {
-        // program likely wants input: show prompt
         setAwaitingInput(true);
       } else {
         setAwaitingInput(false);
@@ -295,53 +331,46 @@ function codeNeedsInput(code, langId) {
     } catch (err) {
       const e = String(err);
       setOutput(e);
-      appendTerminal(e);
       setAwaitingInput(false);
     } finally {
       setIsRunning(false);
     }
   };
 
-  // Called when user types input into terminal and presses Enter
+  // Called when user types input into the legacy terminal input box and presses Send
   const sendTerminalInput = async () => {
-  if (!currentNode || currentNode.type !== "file") {
-    appendTerminal("No file selected.");
-    setAwaitingInput(false);
-    return;
-  }
-
-  // If not already in awaitingInput (heuristic missed), still allow sending input:
-  if (!awaitingInput && !isRunning && terminalInput.trim()) {
-    appendTerminal("[Info] Sending input to program (re-run).");
-  }
+    if (!currentNode || currentNode.type !== "file") {
+      setOutput((prev) => prev + "\nNo file selected.");
+      setAwaitingInput(false);
+      return;
+    }
 
-  const userText = terminalInput;
-  appendTerminal(`> ${userText}`);
-  const newAccum = (accumStdin || "") + userText + "\n";
-  setAccumStdin(newAccum);
-  setTerminalInput("");
-  setIsRunning(true);
-  try {
-    const selectedLang = LANGUAGE_OPTIONS.find((l) => currentNode.name.endsWith(l.ext))?.id;
-    const res = await runCode(currentNode.content, selectedLang, newAccum);
-    const out = res.output ?? "";
-    setOutput(out);
-    appendTerminal(out);
-    setProblems(res.error ? parseProblems(res.output) : []);
-    if (outputLooksForInput(out)) {
-      setAwaitingInput(true);
-    } else {
+    const userText = terminalInput;
+    setOutput((prev) => prev + `\n> ${userText}`);
+    const newAccum = (accumStdin || "") + userText + "\n";
+    setAccumStdin(newAccum);
+    setTerminalInput("");
+    setIsRunning(true);
+    try {
+      const selectedLang = LANGUAGE_OPTIONS.find((l) => currentNode.name.endsWith(l.ext))?.id;
+      const res = await runCode(currentNode.content, selectedLang, newAccum);
+      const out = res.output ?? "";
+      setOutput(out);
+      setProblems(res.error ? parseProblems(res.output) : []);
+      if (outputLooksForInput(out)) {
+        setAwaitingInput(true);
+      } else {
+        setAwaitingInput(false);
+      }
+    } catch (err) {
+      setOutput((prev) => prev + "\n" + String(err));
       setAwaitingInput(false);
+    } finally {
+      setIsRunning(false);
     }
-  } catch (err) {
-    appendTerminal(String(err));
-    setAwaitingInput(false);
-  } finally {
-    setIsRunning(false);
-  }
-};
+  };
 
-  // Allow pressing Enter to send input
+  // Allow pressing Enter to send input for legacy input box
   const onTerminalKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -528,20 +557,34 @@ function codeNeedsInput(code, langId) {
 
           {/* Bottom panels */}
           <div className="ide-panels">
-            {/* Terminal output */}
-            <div className="ide-output-terminal" style={{ marginBottom: 8 }}>
+            {/* Terminal (XTerm) */}
+            <div 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 ? (
+              {/* XTerm shows the terminal and accepts input inline.
+                  onData calls runCodeWithUpdatedInput which appends stdin and re-runs */}
+              <XTerm
+                output={output}
+                onData={(line) => {
+                  // runCodeWithUpdatedInput handles accumulation and re-run
+                  runCodeWithUpdatedInput(line);
+                }}
+              />
+
+              {/* legacy input fallback - still available if user prefers box */}
+              {!awaitingInput && (
+                <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>
+              )}
+
+              {/* If using legacy input box to send while awaitingInput */}
+              {awaitingInput && (
                 <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                   <input
                     className="ide-input-box"
-                    placeholder="Type input and press Enter..."
+                    placeholder="Type input and press Send..."
                     value={terminalInput}
                     onChange={(e) => setTerminalInput(e.target.value)}
                     onKeyDown={onTerminalKeyDown}
@@ -549,12 +592,6 @@ function codeNeedsInput(code, langId) {
                   />
                   <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>