commit initial 09-12-2025 29

src/App.js

@@ -17,7 +17,7 @@ import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
 import "xterm/css/xterm.css";
-import XTerm from "./Terminal"; // <-- your terminal component
+import XTerm from "./Terminal"; // your xterm wrapper component
 
 // =================== SUPPORTED LANGUAGES ===================
 const LANGUAGE_OPTIONS = [
@@ -38,20 +38,20 @@ const RUNNABLE_LANGS = ["python", "javascript", "java"];
 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
+    /scanner/i,
     /press enter/i,
-    /: $/, // ends with colon + space (e.g. "Enter number: ")
-    /:\n$/, // ends with colon + newline
-    /> $/, // trailing >
+    /: $/,
+    /:\n$/,
+    /> $/,
   ];
   return patterns.some((p) => p.test(o));
 }
 
+// Heuristic: detect input calls inside source
 function codeNeedsInput(code, langId) {
   if (!code) return false;
   try {
@@ -74,44 +74,42 @@ function codeNeedsInput(code, langId) {
 // =================== APP ===================
 function App() {
   const [tree, setTree] = useState(loadTree());
-  const [activePath, setActivePath] = useState("main.py"); // selected file or folder path
+  const [activePath, setActivePath] = useState("main.py");
 
-  // Terminal-ish state
-  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 (passed to XTerm)
+  // Terminal state
+  const [accumStdin, setAccumStdin] = useState("");
+  const [awaitingInput, setAwaitingInput] = useState(false);
+  const [output, setOutput] = useState("");
   const [prompt, setPrompt] = useState("");
   const [explanation, setExplanation] = useState("");
 
-  // legacy/other UI state
+  // legacy and other UI
   const [terminalInput, setTerminalInput] = useState("");
-  const [stdin, setStdin] = useState(""); // optional single-run input
+  const [stdin, setStdin] = useState("");
   const [problems, setProblems] = useState([]);
   const [theme, setTheme] = useState("vs-dark");
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [aiSuggestions, setAiSuggestions] = useState([]);
-  const [contextMenu, setContextMenu] = useState(null); // {x,y,file}
+  const [contextMenu, setContextMenu] = useState(null);
   const editorRef = useRef(null);
   const fileInputRef = useRef(null);
 
-  // NEW: loading states
+  // loading flags
   const [isRunning, setIsRunning] = useState(false);
   const [isFixing, setIsFixing] = useState(false);
   const [isExplaining, setIsExplaining] = useState(false);
 
-  // Always persist tree on change
   useEffect(() => {
     saveTree(tree);
   }, [tree]);
 
-  // helpers
   const currentNode = getNodeByPath(tree, activePath);
   const langMeta =
     LANGUAGE_OPTIONS.find((l) => currentNode?.name?.endsWith(l.ext)) ||
     LANGUAGE_OPTIONS[0];
 
-  // ---------- TREE helpers ----------
+  // ---------- Tree helpers ----------
   const collectFolderPaths = (node, acc = []) => {
     if (!node) return acc;
     if (node.type === "folder") acc.push(node.path || "");
@@ -124,7 +122,6 @@ function App() {
     const filename = window.prompt("Filename (with extension):", "untitled.js");
     if (!filename) return;
 
-    // Determine default parent
     const selected = getNodeByPath(tree, activePath);
     let parentPath = "";
     if (selected?.type === "folder") parentPath = selected.path;
@@ -201,7 +198,7 @@ function App() {
     a.click();
   };
 
-  // Import file from user's machine into selected folder
+  // import file
   const handleImportFileClick = () => fileInputRef.current?.click();
 
   const handleFileInputChange = async (e) => {
@@ -224,9 +221,7 @@ function App() {
 
   // ---------- 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("");
     }
@@ -234,16 +229,13 @@ function App() {
     setTerminalInput("");
   };
 
-  // runCodeWithUpdatedInput:
-  // called when a line is typed in XTerm (onData)
+  // On-line input from XTerm -> append and re-run
   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;
@@ -275,7 +267,7 @@ function App() {
     }
   };
 
-  // ---------- Run (initial) ----------
+  // Initial run — NO browser prompt; rely on XTerm and accumStdin
   const handleRun = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -288,37 +280,27 @@ function App() {
       return;
     }
 
-    // If code likely needs input and accumStdin is empty, ask for initial input
+    // If code likely needs input and accumStdin empty, do NOT prompt — use XTerm
     const needs = codeNeedsInput(node.content, selectedLang);
     let stdinToSend = accumStdin || stdin || "";
 
+    // If it needs input but accumStdin is empty, set awaitingInput true so user can type in XTerm
     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);
+      // Inform user in terminal output and allow them to type in XTerm
+      setOutput("[Interactive program detected — type input directly into the terminal]");
+      setAwaitingInput(true);
+      // We still attempt a run with empty stdin to let the program show initial prompts if any.
+      // This may produce EOF errors for some programs; user can then type into the terminal to continue.
+    } else {
+      // reset terminal output for fresh run but keep accumulated stdin
+      resetTerminal(true);
+      setOutput(`[Running with stdin length=${stdinToSend ? stdinToSend.length : 0}]\n`);
     }
 
-    // start fresh terminal output but keep accumulated stdin
-    resetTerminal(true);
-    setOutput(`[Running with stdin length=${stdinToSend ? stdinToSend.length : 0}]\n`);
-
     setIsRunning(true);
     setProblems([]);
     try {
-      // IMPORTANT: use local stdinToSend (not state) so the run uses the value right away
+      // Use local stdinToSend to avoid setState race
       const res = await runCode(node.content, selectedLang, stdinToSend);
       const out = res.output ?? "";
       setOutput(out);
@@ -331,15 +313,17 @@ function App() {
     } catch (err) {
       const e = String(err);
       setOutput(e);
-      setAwaitingInput(false);
+      // if it fails due to EOF, still allow user to type in XTerm
+      setAwaitingInput(true);
     } finally {
       setIsRunning(false);
     }
   };
 
-  // Called when user types input into the legacy terminal input box and presses Send
+  // Legacy send from input box
   const sendTerminalInput = async () => {
-    if (!currentNode || currentNode.type !== "file") {
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
       setOutput((prev) => prev + "\nNo file selected.");
       setAwaitingInput(false);
       return;
@@ -352,8 +336,8 @@ function App() {
     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 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);
       setProblems(res.error ? parseProblems(res.output) : []);
@@ -370,7 +354,6 @@ function App() {
     }
   };
 
-  // Allow pressing Enter to send input for legacy input box
   const onTerminalKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -427,14 +410,14 @@ function App() {
     }
   };
 
-  // AI suggestions for continuation (simple)
+  // AI suggestions for continuation
   const fetchAiSuggestions = async (code) => {
     if (!code?.trim()) return;
     try {
       const reply = await askAgent(`Suggest possible next lines for continuation. Return 3 short snippets.\n${code}`);
       setAiSuggestions(reply.split("\n").filter((l) => l.trim()));
     } catch {
-      // ignore suggestion errors
+      // ignore
     }
   };
 
@@ -447,7 +430,7 @@ function App() {
     alert(`Found ${results.length} results:\n` + JSON.stringify(results, null, 2));
   };
 
-  // ---------- Editor change ----------
+  // Editor change
   const updateActiveFileContent = (value) => {
     const node = getNodeByPath(tree, activePath);
     if (!node) return;
@@ -455,7 +438,7 @@ function App() {
     setTree(updated);
   };
 
-  // ---------- Render Tree (inside component) ----------
+  // Render tree
   const renderTree = (node, depth = 0) => {
     const isActive = node.path === activePath;
     return (
@@ -479,16 +462,13 @@ function App() {
     );
   };
 
-  // any loading?
   const anyLoading = isRunning || isFixing || isExplaining;
 
-  // ---------- JSX UI ----------
+  // JSX
   return (
     <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}>
-      {/* Hidden file input for import */}
       <input ref={fileInputRef} id="file-import-input" type="file" style={{ display: "none" }} onChange={handleFileInputChange} />
 
-      {/* Top menu */}
       <div className="ide-menubar">
         <div className="ide-menubar-left">
           <span className="ide-logo">⚙️ DevMate IDE</span>
@@ -513,16 +493,13 @@ function App() {
         </div>
       </div>
 
-      {/* Indeterminate progress bar under menubar when busy */}
       {anyLoading && (
         <div className="ide-progress-wrap">
           <div className="ide-progress" />
         </div>
       )}
 
-      {/* Body */}
       <div className="ide-body">
-        {/* Sidebar */}
         <div className="ide-sidebar">
           <div className="ide-sidebar-header">
             <span>EXPLORER</span>
@@ -531,7 +508,6 @@ function App() {
           <div className="ide-file-list" style={{ padding: 6 }}>{renderTree(tree)}</div>
         </div>
 
-        {/* Main (editor + bottom panels) */}
         <div className="ide-main">
           <div className="ide-editor-wrapper">
             <Editor
@@ -546,32 +522,25 @@ function App() {
             />
           </div>
 
-          {/* AI inline suggestions popup */}
           {aiSuggestions.length > 0 && (
             <div className="ai-popup">
               {aiSuggestions.map((s, i) => (
-                <div key={i} className="ai-suggest" onClick={() => updateActiveFileContent((currentNode?.content || "") + "\n" + s)}>{s}</div>
+                <div key={i} className="ai-suggest" onClick={() => updateFileContent(tree, activePath, (currentNode?.content || "") + "\n" + s)}>{s}</div>
               ))}
             </div>
           )}
 
-          {/* Bottom panels */}
           <div className="ide-panels">
-            {/* Terminal (XTerm) */}
             <div style={{ marginBottom: 8 }}>
               <div style={{ fontSize: 12, color: "#ccc", marginBottom: 6 }}>Terminal</div>
 
-              {/* 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)} />
@@ -579,7 +548,6 @@ function App() {
                 </div>
               )}
 
-              {/* If using legacy input box to send while awaitingInput */}
               {awaitingInput && (
                 <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                   <input
@@ -595,7 +563,6 @@ function App() {
               )}
             </div>
 
-            {/* Problems */}
             {problems.length > 0 && (
               <div className="ide-problems-panel">
                 <div>🚨 Problems ({problems.length})</div>
@@ -605,7 +572,6 @@ function App() {
           </div>
         </div>
 
-        {/* Right AI panel */}
         <div className="ide-right-panel">
           <div className="ide-ai-header">🤖 AI Assistant</div>
 
@@ -628,7 +594,6 @@ function App() {
         </div>
       </div>
 
-      {/* Search dialog */}
       {searchOpen && (
         <div className="search-dialog">
           <input placeholder="Search text..." onChange={(e) => setSearchQuery(e.target.value)} />
@@ -636,7 +601,6 @@ function App() {
         </div>
       )}
 
-      {/* Context menu */}
       {contextMenu && (
         <div className="ide-context-menu" style={{ top: contextMenu.y, left: contextMenu.x }} onMouseLeave={() => setContextMenu(null)}>
           <div onClick={() => { setContextMenu(null); handleRename(); }}>✏️ Rename</div>