commit initial 09-12-2025 018

src/App.js

@@ -32,14 +32,38 @@ const LANGUAGE_OPTIONS = [
 
 const RUNNABLE_LANGS = ["python", "javascript", "java"];
 
+// Utility: detect whether output likely requests input
+function outputLooksForInput(output) {
+  if (!output) return false;
+  const o = output.toString();
+  // common prompt words / patterns and trailing prompt char
+  const patterns = [
+    /enter.*:/i,
+    /input.*:/i,
+    /please enter/i,
+    /scanner/i, // java Scanner exceptions or prompts
+    /press enter/i,
+    /: $/, // ends with colon + space (e.g. "Enter number: ")
+    /:\n$/, // ends with colon + newline
+    /> $/, // trailing >
+  ];
+  return patterns.some((p) => p.test(o));
+}
+
 // =================== APP ===================
 function App() {
   const [tree, setTree] = useState(loadTree());
   const [activePath, setActivePath] = useState("main.py"); // selected file or folder path
-  const [output, setOutput] = useState("");
+  // 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 [prompt, setPrompt] = useState("");
   const [explanation, setExplanation] = useState("");
-  const [stdin, setStdin] = useState("");
+  // other states
+  const [stdin, setStdin] = useState(""); // legacy single-run input (kept for compatibility)
   const [problems, setProblems] = useState([]);
   const [theme, setTheme] = useState("vs-dark");
   const [searchOpen, setSearchOpen] = useState(false);
@@ -65,7 +89,7 @@ function App() {
     LANGUAGE_OPTIONS.find((l) => currentNode?.name?.endsWith(l.ext)) ||
     LANGUAGE_OPTIONS[0];
 
-  // ---------- Tree utilities ----------
+  // ---------- TREE helpers ----------
   const collectFolderPaths = (node, acc = []) => {
     if (!node) return acc;
     if (node.type === "folder") acc.push(node.path || "");
@@ -176,7 +200,23 @@ function App() {
     e.target.value = "";
   };
 
-  // ---------- Run & Agent (with progress flags) ----------
+  // ---------- 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 = () => {
+    setTerminalLines([]);
+    setTerminalInput("");
+    setAccumStdin("");
+    setAwaitingInput(false);
+  };
+
+  const appendTerminal = (text) => {
+    setTerminalLines((prev) => [...prev, text]);
+  };
+
   const handleRun = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -189,20 +229,83 @@ function App() {
       return;
     }
 
+    // clear terminal state and start a fresh run
+    resetTerminal();
     setIsRunning(true);
-    setOutput(""); // clear previous
     setProblems([]);
+    setOutput("");
     try {
-      const res = await runCode(node.content, selectedLang, stdin);
-      setOutput(res.output || "");
+      // call backend with current accumStdin (empty on first run)
+      const res = await runCode(node.content, selectedLang, accumStdin || stdin || "");
+      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);
+      }
     } catch (err) {
-      setOutput(String(err));
+      const e = String(err);
+      setOutput(e);
+      appendTerminal(e);
+      setAwaitingInput(false);
     } finally {
       setIsRunning(false);
     }
   };
 
+  // Called when user types input into terminal and presses Enter
+  const sendTerminalInput = async () => {
+    if (!awaitingInput) return;
+    const userText = terminalInput;
+    // echo user input in terminal
+    appendTerminal(`> ${userText}`);
+    const newAccum = (accumStdin || "") + userText + "\n";
+    setAccumStdin(newAccum);
+    setTerminalInput("");
+    setIsRunning(true);
+    try {
+      // re-run program with updated stdin
+      const node = getNodeByPath(tree, activePath);
+      if (!node || node.type !== "file") {
+        appendTerminal("No file selected.");
+        setAwaitingInput(false);
+        return;
+      }
+      const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
+      const res = await runCode(node.content, selectedLang, newAccum);
+      const out = res.output ?? "";
+      setOutput(out);
+      appendTerminal(out);
+      setProblems(res.error ? parseProblems(res.output) : []);
+      // detect if program still waiting
+      if (outputLooksForInput(out)) {
+        setAwaitingInput(true);
+      } else {
+        setAwaitingInput(false);
+      }
+    } catch (err) {
+      appendTerminal(String(err));
+      setAwaitingInput(false);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  // Allow pressing Enter to send input
+  const onTerminalKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (!awaitingInput) return;
+      sendTerminalInput();
+    }
+  };
+
+  // ---------- Agent functions ----------
   const handleAskFix = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -327,19 +430,9 @@ function App() {
 
         <div className="ide-menubar-right">
           <button onClick={handleSearchToggle} disabled={anyLoading}>🔍 Search</button>
-
-          <button onClick={handleRun} disabled={isRunning || anyLoading}>
-            {isRunning ? "⏳ Running..." : "▶ Run"}
-          </button>
-
-          <button onClick={handleAskFix} disabled={isFixing || anyLoading}>
-            {isFixing ? "⏳ Fixing..." : "🤖 Fix"}
-          </button>
-
-          <button onClick={handleExplainSelection} disabled={isExplaining || anyLoading}>
-            {isExplaining ? "⏳ Explaining..." : "📖 Explain"}
-          </button>
-
+          <button onClick={handleRun} disabled={isRunning || anyLoading}>{isRunning ? "⏳ Running..." : "▶ Run"}</button>
+          <button onClick={handleAskFix} disabled={isFixing || anyLoading}>{isFixing ? "⏳ Fixing..." : "🤖 Fix"}</button>
+          <button onClick={handleExplainSelection} disabled={isExplaining || anyLoading}>{isExplaining ? "⏳ Explaining..." : "📖 Explain"}</button>
           <button onClick={() => setTheme((t) => (t === "vs-dark" ? "light" : "vs-dark"))} disabled={anyLoading}>
             {theme === "vs-dark" ? "☀️" : "🌙"}
           </button>
@@ -375,11 +468,7 @@ function App() {
               onChange={updateActiveFileContent}
               onMount={(editor) => (editorRef.current = editor)}
               onBlur={() => fetchAiSuggestions(currentNode?.content)}
-              options={{
-                minimap: { enabled: true },
-                fontSize: 14,
-                scrollBeyondLastLine: false,
-              }}
+              options={{ minimap: { enabled: true }, fontSize: 14, scrollBeyondLastLine: false }}
             />
           </div>
 
@@ -394,18 +483,41 @@ function App() {
 
           {/* Bottom panels */}
           <div className="ide-panels">
-            <pre className="ide-output">{output}</pre>
+            {/* 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>
 
-            <input className="ide-input-box" placeholder="Program input..." value={stdin} onChange={(e) => setStdin(e.target.value)} />
+              {/* 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>
 
+            {/* Problems */}
             {problems.length > 0 && (
               <div className="ide-problems-panel">
                 <div>🚨 Problems ({problems.length})</div>
-                {problems.map((p, i) => (
-                  <div key={i}>
-                    {p.path}:{p.line} — {p.message}
-                  </div>
-                ))}
+                {problems.map((p, i) => <div key={i}>{p.path}:{p.line} — {p.message}</div>)}
               </div>
             )}
           </div>