commit initial 09-12-2025 46

src/App.js

@@ -1,8 +1,8 @@
 // src/App.js
 import { useState, useEffect, useRef } from "react";
 import Editor from "@monaco-editor/react";
-import XTerm from "./Terminal";
 import { askAgent } from "./agent/assistant";
+import { runCode } from "./agent/runner";
 import {
   loadTree,
   saveTree,
@@ -18,10 +18,9 @@ import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
 import "xterm/css/xterm.css";
+import XTerm from "./Terminal"; // your existing wrapper
 
-// API base (adjust if your Flask runs on different host/port)
-const API_BASE = "";
-
+// =================== SUPPORTED LANGUAGES ===================
 const LANGUAGE_OPTIONS = [
   { id: "python", ext: ".py", icon: "🐍", monaco: "python" },
   { id: "javascript", ext: ".js", icon: "🟨", monaco: "javascript" },
@@ -34,22 +33,92 @@ const LANGUAGE_OPTIONS = [
   { id: "json", ext: ".json", icon: "🧾", monaco: "json" },
 ];
 
-const RUNNABLE_LANGS = ["python", "javascript", "java", "ts", "c", "cpp"];
+const RUNNABLE_LANGS = ["python", "javascript", "java"];
+
+// =================== Heuristics ===================
+// patterns that indicate program is waiting for input
+function outputLooksForInput(output) {
+  if (!output) return false;
+  const o = output.toString();
+  const patterns = [
+    /enter.*:/i,
+    /input.*:/i,
+    /please enter/i,
+    /scanner/i,
+    /press enter/i,
+    /: $/,
+    /:\n$/,
+    /> $/,
+    /awaiting input/i,
+    /provide input/i,
+    /stdin/i,
+    /enter a value/i,
+  ];
+  return patterns.some((p) => p.test(o));
+}
+
+// code-level heuristics to detect input calls
+function codeNeedsInput(code, langId) {
+  if (!code) return false;
+  try {
+    const c = code.toString();
+    if (langId === "python") {
+      if (/\binput\s*\(/i.test(c)) return true;
+      if (/\bsys\.stdin\.(read|readline|readlines)\s*\(/i.test(c)) return true;
+      if (/\braw_input\s*\(/i.test(c)) return true;
+    }
+    if (langId === "java") {
+      if (/\bScanner\s*\(/i.test(c)) return true;
+      if (/\bBufferedReader\b.*readLine/i.test(c)) return true;
+      if (/\bSystem\.console\(\)/i.test(c)) return true;
+      if (/\bnext(Int|Line|Double|)\b/i.test(c)) return true;
+    }
+    if (langId === "javascript") {
+      if (/process\.stdin|readline|readlineSync|prompt\(|require\(['"]readline['"]\)/i.test(c)) return true;
+    }
+    if (langId === "cpp" || langId === "c") {
+      if (/\bscanf\s*\(/i.test(c)) return true;
+      if (/\bstd::cin\b|cin\s*>>/i.test(c)) return true;
+      if (/\bgets?\s*\(/i.test(c)) return true;
+    }
+    if (/\binput\b|\bscanf\b|\bscanf_s\b|\bcin\b|\bScanner\b|readLine|readline/i.test(c)) return true;
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+// Helper: focus xterm's hidden textarea (works with xterm.js default markup)
+function focusXtermHelper() {
+  setTimeout(() => {
+    const ta = document.querySelector("#terminal-container .xterm-helper-textarea");
+    if (ta) {
+      try {
+        ta.focus();
+        const len = ta.value?.length ?? 0;
+        ta.setSelectionRange(len, len);
+      } catch {}
+    } else {
+      const cont = document.getElementById("terminal-container");
+      if (cont) cont.focus();
+    }
+  }, 120);
+}
 
+// =================== APP ===================
 function App() {
-  // File tree state
+  // ----- file tree + selection -----
   const [tree, setTree] = useState(loadTree());
   const [activePath, setActivePath] = useState("main.py");
 
-  // Terminal/Session state
-  const [sessionId, setSessionId] = useState(null);
-  const [terminalLines, setTerminalLines] = useState([]);
-  const [terminalOutputProp, setTerminalOutputProp] = useState(""); // last line to send to XTerm
+  // ----- terminal / interactive state -----
+  const [accumStdin, setAccumStdin] = useState(""); // accumulated input for interactive runs
   const [awaitingInput, setAwaitingInput] = useState(false);
+  const [terminalLines, setTerminalLines] = useState([]); // visible lines in terminal area
+  const [output, setOutput] = useState(""); // "write" prop for XTerm (Terminal component picks this up)
   const [interactivePromptShown, setInteractivePromptShown] = useState(false);
-  const [isRunning, setIsRunning] = useState(false);
 
-  // AI/editor state
+  // ----- AI + editor state -----
   const [prompt, setPrompt] = useState("");
   const [explanation, setExplanation] = useState("");
   const [problems, setProblems] = useState([]);
@@ -58,21 +127,24 @@ function App() {
   const [searchQuery, setSearchQuery] = useState("");
   const [aiSuggestions, setAiSuggestions] = useState([]);
   const [contextMenu, setContextMenu] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
   const [isFixing, setIsFixing] = useState(false);
   const [isExplaining, setIsExplaining] = useState(false);
 
+  // refs & helpers
   const editorRef = useRef(null);
   const fileInputRef = useRef(null);
-  const pollRef = useRef(null);
 
-  useEffect(() => saveTree(tree), [tree]);
+  useEffect(() => {
+    saveTree(tree);
+  }, [tree]);
 
   const currentNode = getNodeByPath(tree, activePath);
   const langMeta =
     LANGUAGE_OPTIONS.find((l) => currentNode?.name?.endsWith(l.ext)) ||
     LANGUAGE_OPTIONS[0];
 
-  // ------------------ file / folder helpers ------------------
+  // ---------- File / Folder actions ----------
   const collectFolderPaths = (node, acc = []) => {
     if (!node) return acc;
     if (node.type === "folder") acc.push(node.path || "");
@@ -170,127 +242,86 @@ function App() {
     e.target.value = "";
   };
 
-  // ------------------ terminal helpers ------------------
+  // ---------- Terminal helpers ----------
   const appendTerminal = (text) => {
-    if (text == null) return;
-    const lines = String(text).split(/\r?\n/).filter(Boolean);
+    // push to visible lines and set `output` (which Terminal writes)
     setTerminalLines((prev) => {
-      const next = [...prev, ...lines];
-      // set terminalOutputProp to last line so XTerm writes it
-      setTerminalOutputProp(lines[lines.length - 1] || "");
+      const next = [...prev, text];
+      // also keep the XTerm single-output prop to trigger Terminal.writeln
+      setOutput(text);
       return next;
     });
   };
 
-  const clearTerminal = async () => {
+  const clearTerminal = () => {
+    // ANSI sequence to clear screen + move cursor home (xterm will honor)
     setTerminalLines([]);
-    setTerminalOutputProp("\x1b[2J\x1b[H");
+    setOutput("\x1b[2J\x1b[H");
+    setAccumStdin("");
     setAwaitingInput(false);
     setInteractivePromptShown(false);
-    // stop any existing session
-    if (sessionId) {
-      try {
-        await fetch(`${API_BASE}/stop`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ session_id: sessionId }),
-        });
-      } catch {}
-      setSessionId(null);
-    }
   };
 
-  // Poller to /read output
-  const startPoller = (sid) => {
-    if (!sid) return;
-    // clear previous
-    if (pollRef.current) {
-      clearInterval(pollRef.current);
-      pollRef.current = null;
+  const resetTerminal = (keepAccum = false) => {
+    setTerminalLines([]);
+    setOutput("");
+    if (!keepAccum) {
+      setAccumStdin("");
     }
-    pollRef.current = setInterval(async () => {
-      try {
-        const res = await fetch(`${API_BASE}/read`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ session_id: sid }),
-        });
-        const data = await res.json();
-        if (!data) return;
-        if (Array.isArray(data.output) && data.output.length) {
-          data.output.forEach((ln) => appendTerminal(ln));
-        }
-        if (data.finished) {
-          // stop poller, clear sessionId
-          if (pollRef.current) {
-            clearInterval(pollRef.current);
-            pollRef.current = null;
-          }
-          setSessionId(null);
-          setAwaitingInput(false);
-          setInteractivePromptShown(false);
-          appendTerminal("[Process finished]");
-        } else {
-          // heuristics: if last output line looks like input prompt, set awaitingInput
-          // we'll check the terminal lines
-          const last = terminalLines[terminalLines.length - 1] || "";
-          const maybePrompt = last + (data.output && data.output.length ? data.output[data.output.length - 1] : "");
-          const promptWords = /(enter|input|please enter|provide input|number|value|scanner|press enter)/i;
-          if (promptWords.test(maybePrompt)) {
-            setAwaitingInput(true);
-            setInteractivePromptShown(true);
-            // focus XTerm by toggling a prop (we pass autoFocusWhen = awaitingInput below)
-          }
-        }
-      } catch (e) {
-        // ignore transient errors
-      }
-    }, 250);
+    setAwaitingInput(false);
+    setInteractivePromptShown(false);
   };
 
-  // Start session (POST /start)
-  const startSession = async (code, filename) => {
+  // Unified runner used when terminal provides input (or small input)
+  const runCodeWithUpdatedInput = async (inputLine) => {
+    if (typeof inputLine !== "string") inputLine = String(inputLine || "");
+    const trimmed = inputLine.replace(/\r$/, "");
+    // if user pressed Enter with empty line and no accum, ignore
+    if (trimmed.length === 0 && !accumStdin) {
+      return;
+    }
+
+    // append newline like console
+    const newAccum = (accumStdin || "") + trimmed + "\n";
+    setAccumStdin(newAccum);
+    setInteractivePromptShown(false);
+
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
+      appendTerminal("[Error] No file selected to run.");
+      setAwaitingInput(false);
+      return;
+    }
+
+    const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
+    if (!selectedLang || !RUNNABLE_LANGS.includes(selectedLang)) {
+      appendTerminal(`[Error] Run not supported for ${node.name}`);
+      setAwaitingInput(false);
+      return;
+    }
+
+    setIsRunning(true);
     try {
-      const res = await fetch(`${API_BASE}/start`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ code, filename }),
-      });
-      const data = await res.json();
-      if (!res.ok || data.error) {
-        appendTerminal(data.output ? data.output.join("\n") : `[Failed starting session]`);
-        return null;
+      const res = await runCode(node.content, selectedLang, newAccum);
+      const out = res.output ?? "";
+      if (out) appendTerminal(out);
+      setProblems(res.error ? parseProblems(res.output) : []);
+      if (outputLooksForInput(out)) {
+        setAwaitingInput(true);
+        focusXtermHelper();
+      } else {
+        setAwaitingInput(false);
+        setAccumStdin(""); // finished -> clear accumulated input so next Run is fresh
       }
-      const sid = data.session_id;
-      setSessionId(sid);
-      // initial output if any
-      if (Array.isArray(data.output) && data.output.length) {
-        data.output.forEach((ln) => appendTerminal(ln));
-      }
-      // poll for more output
-      startPoller(sid);
-      return sid;
     } catch (err) {
       appendTerminal(String(err));
-      return null;
-    }
-  };
-
-  // Write input to session (POST /write)
-  const writeToSession = async (sid, text) => {
-    if (!sid) return;
-    try {
-      await fetch(`${API_BASE}/write`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session_id: sid, text }),
-      });
-    } catch (e) {
-      appendTerminal(`[Error sending input: ${e}]`);
+      setAwaitingInput(true);
+    } finally {
+      setIsRunning(false);
     }
   };
 
-  // Run handler — starts session for runnable files; non-runnable will show content
+  // ---------- Initial Run handler (fresh runs) ----------
   const handleRun = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -298,77 +329,54 @@ function App() {
       return;
     }
 
-    // always clear previous session and terminal for fresh run
-    if (pollRef.current) {
-      clearInterval(pollRef.current);
-      pollRef.current = null;
-    }
-    if (sessionId) {
-      try {
-        await fetch(`${API_BASE}/stop`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ session_id: sessionId }),
-        });
-      } catch {}
-      setSessionId(null);
+    const selectedLang = LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id;
+    if (!selectedLang || !RUNNABLE_LANGS.includes(selectedLang)) {
+      appendTerminal(`⚠️ Run not supported for this file type.`);
+      return;
     }
-    setTerminalLines([]);
-    setTerminalOutputProp("");
+
+    // Force fresh run: clear accumulated input and terminal
+    setAccumStdin("");
+    resetTerminal(false);
     setAwaitingInput(false);
     setInteractivePromptShown(false);
-    setIsRunning(true);
 
-    // pick filename for extension; if path contains folders, use actual filename
-    const filename = node.name;
+    const needs = codeNeedsInput(node.content, selectedLang);
 
-    // try start session
-    const sid = await startSession(node.content || "", filename);
-    setIsRunning(false);
-    if (!sid) {
-      appendTerminal("[Failed to start session]");
-      return;
+    if (needs) {
+      appendTerminal("[Interactive program detected — type input directly into the terminal]");
+      setAwaitingInput(true);
+      setInteractivePromptShown(true);
+      focusXtermHelper();
+      return; // wait for user's input to avoid EOFError
     }
-    // session started; the poller will pick up outputs
-    setSessionId(sid);
-    setAwaitingInput(false);
-    setInteractivePromptShown(false);
-  };
 
-  // Called when XTerm or small Send triggers input
-  const onTerminalInput = async (line) => {
-    if (!sessionId) {
-      appendTerminal("[No active session. Press Run first]");
-      return;
-    }
-    // echo to terminal & send
-    appendTerminal(`> ${line}`);
-    await writeToSession(sessionId, line);
-    setAwaitingInput(false);
-    setInteractivePromptShown(false);
-  };
-
-  // clear/stop session
-  const stopSession = async () => {
-    if (!sessionId) return;
+    // Non-interactive: run immediately with empty stdin
+    appendTerminal(`[Running (fresh)]`);
+    setIsRunning(true);
+    setProblems([]);
     try {
-      await fetch(`${API_BASE}/stop`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session_id: sessionId }),
-      });
-    } catch {}
-    if (pollRef.current) {
-      clearInterval(pollRef.current);
-      pollRef.current = null;
+      const res = await runCode(node.content, selectedLang, "");
+      const out = res.output ?? "";
+      if (out) appendTerminal(out);
+      setProblems(res.error ? parseProblems(res.output) : []);
+      if (outputLooksForInput(out)) {
+        setAwaitingInput(true);
+        focusXtermHelper();
+      } else {
+        setAwaitingInput(false);
+        setAccumStdin("");
+      }
+    } catch (err) {
+      appendTerminal(String(err));
+      setAwaitingInput(true);
+      focusXtermHelper();
+    } finally {
+      setIsRunning(false);
     }
-    setSessionId(null);
-    setAwaitingInput(false);
-    setInteractivePromptShown(false);
-    appendTerminal("[Session stopped]");
   };
 
-  // ------------------ AI helpers (unchanged) ------------------
+  // ---------- Agent functions ----------
   const handleAskFix = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -379,7 +387,7 @@ function App() {
     try {
       const userHint = prompt.trim() ? `User request: ${prompt}` : "";
       const reply = await askAgent(
-        `Improve, debug, or refactor this file (${node.name}). ${userHint}\nReturn ONLY updated code, no explanation.\n\nCODE:\n${node.content}`
+        `Improve, debug, or refactor this ${LANGUAGE_OPTIONS.find((l) => node.name.endsWith(l.ext))?.id || "file"} file.\n${userHint}\nReturn ONLY updated code, no explanation.\n\nCODE:\n${node.content}`
       );
       const updatedTree = updateFileContent(tree, node.path, reply);
       setTree(updatedTree);
@@ -399,9 +407,10 @@ function App() {
     }
     setIsExplaining(true);
     try {
+      const editor = editorRef.current;
       let selectedCode = "";
       try {
-        selectedCode = editorRef.current?.getModel()?.getValueInRange(editorRef.current.getSelection()) || "";
+        selectedCode = editor?.getModel()?.getValueInRange(editor.getSelection()) || "";
       } catch {}
       const code = selectedCode.trim() || node.content;
       const userHint = prompt.trim() ? `Focus on: ${prompt}` : "Give a clear and simple explanation.";
@@ -416,16 +425,18 @@ function App() {
     }
   };
 
-  // AI suggestions fetch
+  // 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 {}
+    } catch {
+      // ignore
+    }
   };
 
-  // ------------------ search ------------------
+  // ---------- Search ----------
   const handleSearchToggle = () => setSearchOpen(!searchOpen);
   const handleSearchNow = () => {
     if (!searchQuery) return;
@@ -433,12 +444,15 @@ function App() {
     alert(`Found ${results.length} results:\n` + JSON.stringify(results, null, 2));
   };
 
-  // update file content
+  // Editor change
   const updateActiveFileContent = (value) => {
+    const node = getNodeByPath(tree, activePath);
+    if (!node) return;
     const updated = updateFileContent(tree, activePath, value ?? "");
     setTree(updated);
   };
 
+  // Render tree
   const renderTree = (node, depth = 0) => {
     const isActive = node.path === activePath;
     return (
@@ -464,9 +478,12 @@ function App() {
 
   const anyLoading = isRunning || isFixing || isExplaining;
 
-  // UI JSX
+  // ---------- JSX ----------
   return (
-    <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`} style={{ overflowX: "hidden" }}>
+    <div
+      className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}
+      style={{ overflowX: "hidden" }} // prevent horizontal white gap / scroller issue
+    >
       <input ref={fileInputRef} id="file-import-input" type="file" style={{ display: "none" }} onChange={handleFileInputChange} />
 
       <div className="ide-menubar">
@@ -491,7 +508,6 @@ function App() {
             {theme === "vs-dark" ? "☀️" : "🌙"}
           </button>
           <button onClick={clearTerminal} disabled={anyLoading} title="Clear terminal">🧹 Clear</button>
-          <button onClick={stopSession} disabled={!sessionId}>⏹ Stop</button>
         </div>
       </div>
 
@@ -537,17 +553,15 @@ function App() {
               <div style={{ fontSize: 12, color: "#ccc", marginBottom: 6 }}>Terminal</div>
 
               <XTerm
-                output={terminalOutputProp}
-                autoFocusWhen={awaitingInput}
-                onData={(data) => {
-                  // XTerm will fire onData when Enter pressed (wrapper behavior)
-                  // data may be newline or typed chunks; for safety, only trigger when newline or non-empty
-                  const trimmed = String(data || "").replace(/\r/g, "");
-                  if (!trimmed) return;
-                  // When wrapper sends "\n" for Enter, treat it as "send what user typed in last visible line"
-                  // Simpler approach: the wrapper isn't buffering; rely on user to type line and press Send (small input), OR
-                  // handle newline by sending the last terminal input we have (not tracked here).
-                  // We'll not call runCodeWithUpdatedInput here to avoid double semantics; instead, user uses small send box below.
+                output={output}
+                onData={(line) => {
+                  // line is the typed content (no CR), pass to unified runner
+                  const trimmed = (line || "").replace(/\r$/, "");
+                  if (!trimmed && !awaitingInput) {
+                    // nothing typed and not expecting input
+                    return;
+                  }
+                  runCodeWithUpdatedInput(trimmed);
                 }}
               />
 
@@ -557,26 +571,12 @@ function App() {
                     This program appears to be interactive and requires console input.
                   </div>
                   <div style={{ display: "flex", gap: 8 }}>
-                    <button onClick={() => {
-                      // focus XTerm via DOM helper
-                      const ta = document.querySelector("#terminal-container .xterm-helper-textarea");
-                      if (ta) ta.focus();
-                    }} className="ide-button">▶ Focus Terminal</button>
-                    <button onClick={() => {
-                      clearTerminal();
-                      appendTerminal("[Interactive session started — type into the terminal]");
-                      setAwaitingInput(true);
-                      const ta = document.querySelector("#terminal-container .xterm-helper-textarea");
-                      if (ta) ta.focus();
-                    }} className="ide-button">▶ Start interactive session</button>
-                    <div style={{ color: "#999", alignSelf: "center" }}>Type & press Enter in terminal or use the small input below.</div>
+                    <button onClick={() => { focusXtermHelper(); }} className="ide-button">▶ Focus Terminal</button>
+                    <button onClick={() => { resetTerminal(true); appendTerminal("[Interactive session started — type into the terminal]"); setAwaitingInput(true); focusXtermHelper(); }} className="ide-button">▶ Start interactive session</button>
+                    <div style={{ color: "#999", alignSelf: "center" }}>Type & press Enter in terminal.</div>
                   </div>
                 </div>
               )}
-
-              {/* Small input (optional): user can type a line and press Send to forward to backend */}
-              <TerminalSend onSend={onTerminalInput} disabled={!sessionId && !awaitingInput} isRunning={isRunning} />
-
             </div>
 
             {problems.length > 0 && (
@@ -628,30 +628,4 @@ function App() {
   );
 }
 
-// Small send component (kept in same file to avoid extra imports)
-function TerminalSend({ onSend, disabled, isRunning }) {
-  const [val, setVal] = useState("");
-  return (
-    <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
-      <input
-        className="ide-input-box"
-        placeholder="Type input and press Send (or press Enter in terminal)"
-        value={val}
-        onChange={(e) => setVal(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            if (!val) return;
-            onSend(val);
-            setVal("");
-          }
-        }}
-      />
-      <button onClick={() => { if (val) { onSend(val); setVal(""); } }} className="ide-button" disabled={disabled || isRunning}>
-        {isRunning ? "⏳" : "Send"}
-      </button>
-    </div>
-  );
-}
-
 export default App;

src/Terminal.js

@@ -4,93 +4,123 @@ import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import "xterm/css/xterm.css";
 
-export default function XTerm({ onData, output, autoFocusWhen }) {
+/**
+ * Props:
+ * - onData(line: string)  -> called when user presses Enter with the typed line (no trailing \r)
+ * - output (string)       -> append output to the terminal when it changes
+ */
+export default function XTerm({ onData, output }) {
+  const containerId = "terminal-container";
   const termRef = useRef(null);
+  const bufferRef = useRef(""); // collects user typed chars until Enter
   const fitRef = useRef(null);
-  const containerId = "terminal-container";
 
   useEffect(() => {
     const term = new Terminal({
       cursorBlink: true,
-      fontSize: 13,
+      fontSize: 14,
+      disableStdin: false,
       convertEol: true,
       theme: {
         background: "#1e1e1e",
-        foreground: "#dcdcdc",
+        foreground: "#ffffff",
       },
     });
-    const fit = new FitAddon();
-    fitRef.current = fit;
 
-    term.loadAddon(fit);
+    const fitAddon = new FitAddon();
+    fitRef.current = fitAddon;
+
+    term.loadAddon(fitAddon);
     term.open(document.getElementById(containerId));
-    fit.fit();
+    fitAddon.fit();
 
+    // Keep a reference
+    termRef.current = term;
+
+    // echo typed characters and detect Enter
     term.onData((data) => {
-      // echo input for feedback
-      // don't echo CR as blank line; xterm handles newline
-      if (data === "\r") {
-        // pass the collected line to parent via onData
-        // xterm doesn't provide line buffer, so parent may rely on onData chunks (expected)
-        onData("\n"); // send newline signal (caller will interpret)
-      } else {
-        // For regular characters, echo them and also forward individual characters
-        term.write(data);
-        // forward characters to parent if needed
-        // It's often better to send full line when Enter pressed; the parent code in App.js
-        // expects the onData to receive the full line — our App.js uses trimmed lines.
-        // Here, for simplicity, also forward characters so parent can capture typed content if desired.
+      // xterm sends strings including characters and control chars like '\r'
+      // append to visible terminal
+      term.write(data);
+
+      // common Enter is '\r' (CR)
+      if (data === "\r" || data === "\n") {
+        // capture current buffer as line, trim trailing CR/LF
+        const line = (bufferRef.current || "").replace(/\r?\n$/, "");
+        bufferRef.current = ""; // reset buffer
+        // echo newline if not already
+        // (we already wrote the '\r' above)
+        // call parent handler
+        try {
+          if (typeof onData === "function" && line !== null) onData(line);
+        } catch (e) {
+          // swallow
+          console.error("XTerm onData handler threw:", e);
+        }
+        return;
       }
-    });
 
-    termRef.current = term;
+      // backspace handling: if user presses backspace key, it may come as '\x7f' or '\b'
+      if (data === "\x7f" || data === "\b") {
+        bufferRef.current = bufferRef.current.slice(0, -1);
+        return;
+      }
 
-    // Resize observer to keep fit updated
-    const ro = new ResizeObserver(() => {
-      try { fit.fit(); } catch {}
+      // other control sequences ignore
+      if (data.charCodeAt(0) < 32) {
+        // ignore other ctrl chars
+        return;
+      }
+
+      // normal characters: append to buffer
+      bufferRef.current += data;
     });
-    ro.observe(document.getElementById(containerId));
+
+    // expose a simple focus method on container element for external focusing
+    const container = document.getElementById(containerId);
+    if (container) container.tabIndex = 0;
 
     return () => {
-      ro.disconnect();
-      try { term.dispose(); } catch {}
+      try {
+        term.dispose();
+      } catch {}
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onData]);
 
-  // Write new output into terminal when `output` prop changes.
+  // Append new output when `output` prop changes
   useEffect(() => {
-    if (!termRef.current || output == null) return;
-    try {
-      // print with newline separation
-      // ensure not to double newlines if the output already has trailing newline
-      const text = String(output);
-      termRef.current.writeln(text.replace(/\r/g, ""));
-    } catch (e) {
-      // ignore
-    }
+    const term = termRef.current;
+    if (!term || !output) return;
+    // write a newline and the output text (preserves newlines)
+    term.writeln("");
+    // if output includes multiple lines, write each
+    const lines = output.split(/\r?\n/);
+    lines.forEach((ln, idx) => {
+      // avoid extra blank at very start
+      if (idx === 0 && ln === "") return;
+      term.writeln(ln);
+    });
   }, [output]);
 
-  // Auto-focus when parent asks
-  useEffect(() => {
-    if (!termRef.current) return;
-    if (autoFocusWhen) {
-      // focus xterm helper
-      setTimeout(() => {
-        const ta = document.querySelector(`#${containerId} .xterm-helper-textarea`);
-        if (ta) {
-          try {
-            ta.focus();
-            const len = ta.value?.length || 0;
-            ta.setSelectionRange(len, len);
-          } catch {}
-        } else {
-          const cont = document.getElementById(containerId);
-          if (cont) cont.focus();
-        }
-      }, 50);
+  // helper to focus the hidden xterm textarea
+  const focus = () => {
+    // xterm's helper textarea is what receives keyboard input
+    const ta = document.querySelector(`#${containerId} .xterm-helper-textarea`);
+    if (ta) {
+      ta.focus();
+      const len = ta.value?.length ?? 0;
+      try { ta.setSelectionRange(len, len); } catch {}
+    } else {
+      const cont = document.getElementById(containerId);
+      if (cont) cont.focus();
     }
-  }, [autoFocusWhen]);
+  };
+
+  // expose a global method in-case parent wants to call it (not ideal but handy)
+  useEffect(() => {
+    window.__xterm_focus = focus;
+    return () => { try { delete window.__xterm_focus } catch {} };
+  }, []);
 
   return (
     <div
@@ -100,6 +130,7 @@ export default function XTerm({ onData, output, autoFocusWhen }) {
         height: "180px",
         background: "#1e1e1e",
         borderTop: "1px solid #333",
+        outline: "none",
       }}
     />
   );