commit initial 12-12-2025 0002

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,9 +18,10 @@ import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
 import "xterm/css/xterm.css";
-import XTerm from "./Terminal"; // your existing wrapper
 
-// =================== SUPPORTED LANGUAGES ===================
+// API base (adjust if your Flask runs on different host/port)
+const API_BASE = "";
+
 const LANGUAGE_OPTIONS = [
   { id: "python", ext: ".py", icon: "🐍", monaco: "python" },
   { id: "javascript", ext: ".js", icon: "🟨", monaco: "javascript" },
@@ -33,92 +34,22 @@ const LANGUAGE_OPTIONS = [
   { id: "json", ext: ".json", icon: "🧾", monaco: "json" },
 ];
 
-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));
-}
+const RUNNABLE_LANGS = ["python", "javascript", "java", "ts", "c", "cpp"];
 
-// 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 + selection -----
+  // File tree state
   const [tree, setTree] = useState(loadTree());
   const [activePath, setActivePath] = useState("main.py");
 
-  // ----- terminal / interactive state -----
-  const [accumStdin, setAccumStdin] = useState(""); // accumulated input for interactive runs
+  // Terminal/Session state
+  const [sessionId, setSessionId] = useState(null);
+  const [terminalLines, setTerminalLines] = useState([]);
+  const [terminalOutputProp, setTerminalOutputProp] = useState(""); // last line to send to XTerm
   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([]);
@@ -127,24 +58,21 @@ 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 actions ----------
+  // ------------------ file / folder helpers ------------------
   const collectFolderPaths = (node, acc = []) => {
     if (!node) return acc;
     if (node.type === "folder") acc.push(node.path || "");
@@ -242,141 +170,225 @@ function App() {
     e.target.value = "";
   };
 
-  // ---------- Terminal helpers ----------
+  // ------------------ terminal helpers ------------------
   const appendTerminal = (text) => {
-    // push to visible lines and set `output` (which Terminal writes)
+    if (text == null) return;
+    const lines = String(text).split(/\r?\n/).filter(Boolean);
     setTerminalLines((prev) => {
-      const next = [...prev, text];
-      // also keep the XTerm single-output prop to trigger Terminal.writeln
-      setOutput(text);
+      const next = [...prev, ...lines];
+      // set terminalOutputProp to last line so XTerm writes it
+      setTerminalOutputProp(lines[lines.length - 1] || "");
       return next;
     });
   };
 
-  const clearTerminal = () => {
-    // ANSI sequence to clear screen + move cursor home (xterm will honor)
+  const clearTerminal = async () => {
     setTerminalLines([]);
-    setOutput("\x1b[2J\x1b[H");
-    setAccumStdin("");
+    setTerminalOutputProp("\x1b[2J\x1b[H");
     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);
+    }
   };
 
-  const resetTerminal = (keepAccum = false) => {
-    setTerminalLines([]);
-    setOutput("");
-    if (!keepAccum) {
-      setAccumStdin("");
+  // Poller to /read output
+  const startPoller = (sid) => {
+    if (!sid) return;
+    // clear previous
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
     }
-    setAwaitingInput(false);
-    setInteractivePromptShown(false);
+    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);
   };
 
-  // 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;
-    }
+  // Start session (POST /start)
+  // improved startSession: surfaces backend errors
+const startSession = async (code, filename) => {
+  try {
+    const res = await fetch(`${API_BASE}/start`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code, filename }),
+    });
 
-    // append newline like console
-    const newAccum = (accumStdin || "") + trimmed + "\n";
-    setAccumStdin(newAccum);
-    setInteractivePromptShown(false);
+    // try parse JSON (backend returns JSON even on errors)
+    let data = null;
+    try {
+      data = await res.json();
+    } catch (e) {
+      // non-json response (HTML or other) — surface raw text
+      const text = await res.text();
+      appendTerminal(`[start] unexpected non-json response:\n${text}`);
+      return null;
+    }
 
-    const node = getNodeByPath(tree, activePath);
-    if (!node || node.type !== "file") {
-      appendTerminal("[Error] No file selected to run.");
-      setAwaitingInput(false);
-      return;
+    if (!res.ok || data.error) {
+      // backend signalled an error; try to extract helpful message
+      const msg = Array.isArray(data.output) ? data.output.join("\n") : (data.output || data.message || JSON.stringify(data));
+      appendTerminal(`[start] backend error:\n${msg}`);
+      return null;
     }
 
-    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;
+    const sid = data.session_id;
+    // initial output lines (if any)
+    if (Array.isArray(data.output) && data.output.length) {
+      data.output.forEach((ln) => appendTerminal(ln));
     }
+    // start polling
+    startPoller(sid);
+    return sid;
+  } catch (err) {
+    // network or unexpected error
+    appendTerminal(`[start] fetch failed: ${String(err)}`);
+    console.error("startSession error:", err);
+    return null;
+  }
+};
+
 
-    setIsRunning(true);
+  // Write input to session (POST /write)
+  const writeToSession = async (sid, text) => {
+    if (!sid) return;
     try {
-      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
-      }
-    } catch (err) {
-      appendTerminal(String(err));
-      setAwaitingInput(true);
-    } finally {
-      setIsRunning(false);
+      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}]`);
     }
   };
 
-  // ---------- Initial Run handler (fresh runs) ----------
-  const handleRun = async () => {
-    const node = getNodeByPath(tree, activePath);
-    if (!node || node.type !== "file") {
-      appendTerminal("Select a file to run.");
-      return;
-    }
+  // Run handler — starts session for runnable files; non-runnable will show content
+  // improved handleRun: surfaces backend errors and logs
+const handleRun = async () => {
+  const node = getNodeByPath(tree, activePath);
+  if (!node || node.type !== "file") {
+    appendTerminal("Select a file to run.");
+    return;
+  }
 
-    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;
+  // clear previous session + terminal for a 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 (e) {
+      // ignore
     }
+    setSessionId(null);
+  }
+  setTerminalLines([]);
+  setTerminalOutputProp("");
+  setAwaitingInput(false);
+  setInteractivePromptShown(false);
+  setIsRunning(true);
 
-    // Force fresh run: clear accumulated input and terminal
-    setAccumStdin("");
-    resetTerminal(false);
-    setAwaitingInput(false);
-    setInteractivePromptShown(false);
+  const filename = node.name;
+
+  // start session and show backend errors (if any)
+  const sid = await startSession(node.content || "", filename);
+  setIsRunning(false);
+
+  if (!sid) {
+    appendTerminal("[Failed to start session] (see above server message)");
+    return;
+  }
+
+  setSessionId(sid);
+  appendTerminal(`[Session started: ${sid}]`);
+};
 
-    const needs = codeNeedsInput(node.content, selectedLang);
 
-    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
+  // 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);
+  };
 
-    // Non-interactive: run immediately with empty stdin
-    appendTerminal(`[Running (fresh)]`);
-    setIsRunning(true);
-    setProblems([]);
+  // clear/stop session
+  const stopSession = async () => {
+    if (!sessionId) return;
     try {
-      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);
+      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;
     }
+    setSessionId(null);
+    setAwaitingInput(false);
+    setInteractivePromptShown(false);
+    appendTerminal("[Session stopped]");
   };
 
-  // ---------- Agent functions ----------
+  // ------------------ AI helpers (unchanged) ------------------
   const handleAskFix = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -387,7 +399,7 @@ function App() {
     try {
       const userHint = prompt.trim() ? `User request: ${prompt}` : "";
       const reply = await askAgent(
-        `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}`
+        `Improve, debug, or refactor this file (${node.name}). ${userHint}\nReturn ONLY updated code, no explanation.\n\nCODE:\n${node.content}`
       );
       const updatedTree = updateFileContent(tree, node.path, reply);
       setTree(updatedTree);
@@ -407,10 +419,9 @@ function App() {
     }
     setIsExplaining(true);
     try {
-      const editor = editorRef.current;
       let selectedCode = "";
       try {
-        selectedCode = editor?.getModel()?.getValueInRange(editor.getSelection()) || "";
+        selectedCode = editorRef.current?.getModel()?.getValueInRange(editorRef.current.getSelection()) || "";
       } catch {}
       const code = selectedCode.trim() || node.content;
       const userHint = prompt.trim() ? `Focus on: ${prompt}` : "Give a clear and simple explanation.";
@@ -425,18 +436,16 @@ function App() {
     }
   };
 
-  // AI suggestions for continuation
+  // AI suggestions fetch
   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
-    }
+    } catch {}
   };
 
-  // ---------- Search ----------
+  // ------------------ search ------------------
   const handleSearchToggle = () => setSearchOpen(!searchOpen);
   const handleSearchNow = () => {
     if (!searchQuery) return;
@@ -444,15 +453,12 @@ function App() {
     alert(`Found ${results.length} results:\n` + JSON.stringify(results, null, 2));
   };
 
-  // Editor change
+  // update file content
   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 (
@@ -478,12 +484,9 @@ function App() {
 
   const anyLoading = isRunning || isFixing || isExplaining;
 
-  // ---------- JSX ----------
+  // UI JSX
   return (
-    <div
-      className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}
-      style={{ overflowX: "hidden" }} // prevent horizontal white gap / scroller issue
-    >
+    <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`} style={{ overflowX: "hidden" }}>
       <input ref={fileInputRef} id="file-import-input" type="file" style={{ display: "none" }} onChange={handleFileInputChange} />
 
       <div className="ide-menubar">
@@ -508,6 +511,7 @@ 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>
 
@@ -553,15 +557,17 @@ function App() {
               <div style={{ fontSize: 12, color: "#ccc", marginBottom: 6 }}>Terminal</div>
 
               <XTerm
-                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);
+                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.
                 }}
               />
 
@@ -571,12 +577,26 @@ function App() {
                     This program appears to be interactive and requires console input.
                   </div>
                   <div style={{ display: "flex", gap: 8 }}>
-                    <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>
+                    <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>
                   </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,4 +648,30 @@ 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,123 +4,93 @@ import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import "xterm/css/xterm.css";
 
-/**
- * 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";
+export default function XTerm({ onData, output, autoFocusWhen }) {
   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: 14,
-      disableStdin: false,
+      fontSize: 13,
       convertEol: true,
       theme: {
         background: "#1e1e1e",
-        foreground: "#ffffff",
+        foreground: "#dcdcdc",
       },
     });
+    const fit = new FitAddon();
+    fitRef.current = fit;
 
-    const fitAddon = new FitAddon();
-    fitRef.current = fitAddon;
-
-    term.loadAddon(fitAddon);
+    term.loadAddon(fit);
     term.open(document.getElementById(containerId));
-    fitAddon.fit();
+    fit.fit();
 
-    // Keep a reference
-    termRef.current = term;
-
-    // echo typed characters and detect Enter
     term.onData((data) => {
-      // 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;
-      }
-
-      // 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;
+      // 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.
       }
+    });
 
-      // other control sequences ignore
-      if (data.charCodeAt(0) < 32) {
-        // ignore other ctrl chars
-        return;
-      }
+    termRef.current = term;
 
-      // normal characters: append to buffer
-      bufferRef.current += data;
+    // Resize observer to keep fit updated
+    const ro = new ResizeObserver(() => {
+      try { fit.fit(); } catch {}
     });
-
-    // expose a simple focus method on container element for external focusing
-    const container = document.getElementById(containerId);
-    if (container) container.tabIndex = 0;
+    ro.observe(document.getElementById(containerId));
 
     return () => {
-      try {
-        term.dispose();
-      } catch {}
+      ro.disconnect();
+      try { term.dispose(); } catch {}
     };
-  }, [onData]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  // Append new output when `output` prop changes
+  // Write new output into terminal when `output` prop changes.
   useEffect(() => {
-    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]);
-
-  // 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();
+    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
     }
-  };
+  }, [output]);
 
-  // expose a global method in-case parent wants to call it (not ideal but handy)
+  // Auto-focus when parent asks
   useEffect(() => {
-    window.__xterm_focus = focus;
-    return () => { try { delete window.__xterm_focus } catch {} };
-  }, []);
+    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);
+    }
+  }, [autoFocusWhen]);
 
   return (
     <div
@@ -130,7 +100,6 @@ export default function XTerm({ onData, output }) {
         height: "180px",
         background: "#1e1e1e",
         borderTop: "1px solid #333",
-        outline: "none",
       }}
     />
   );