Spaces:

FrederickSundeep
/

CodeIDE-Dev

Running

App Files Files Community

FrederickSundeep commited on Dec 12, 2025

Commit

e3e0a75

1 Parent(s): 12db32d

commit initial 12-12-2025 0001

Browse files

Files changed (14) hide show

README.md +1 -1
package-lock.json +0 -0
package.json +7 -1
public/index.html +3 -2
src/App.css +485 -21
src/App.js +623 -17
src/Terminal.js +137 -0
src/agent/assistant.js +12 -0
src/agent/projectGenerator.js +22 -0
src/agent/runner.js +30 -0
src/apiClient.js +7 -0
src/fileStore.js +211 -0
src/problemParser.js +32 -0
src/zipExport.js +25 -0

README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: CodeIDE Dev
 emoji: 🐠
 colorFrom: indigo
 colorTo: red

 ---
+title: CodeIDE
 emoji: 🐠
 colorFrom: indigo
 colorTo: red

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.13.2",
+    "jszip": "^3.10.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.6.0",
     "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html CHANGED Viewed

@@ -7,7 +7,8 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
+      content="DevMate  AI
+      An AI-powered code editor and IDE that helps you write, debug, and optimize code faster."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <title>DevMate IDE</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css CHANGED Viewed

@@ -1,38 +1,502 @@
 .App {
   text-align: center;
 }
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
-.App-link {
-  color: #61dafb;
 }
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
   }
-  to {
-    transform: rotate(360deg);
   }
 }

+/* ============================
+   Global & Base
+============================ */
+html, body, #root {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden; /* prevent page-level horizontal scroll */
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 .App {
   text-align: center;
 }
+/* Root layout */
+.ide-root {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  overflow: hidden;
+  max-width: 100%;
 }
+/* Themes */
+.ide-dark {
+  background: #1e1e1e;
+  color: #ddd;
 }
+.ide-light {
+  background: #f5f5f5;
+  color: #222;
+}
+/* ============================
+   Menubar
+============================ */
+.ide-menubar {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: #252526;
+  color: #eee;
+  font-size: 13px;
+  border-bottom: 1px solid #444;
+  flex: 0 0 auto;
+}
+.ide-menubar-left,
+.ide-menubar-right {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+.ide-logo {
+  font-weight: 600;
+  margin-right: 12px;
+}
+.ide-menubar button {
+  margin-right: 4px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+.ide-menubar button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+/* ============================
+   Body Layout
+============================ */
+.ide-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;    /* prevent children from creating page overflow */
+  min-height: 0;       /* allow children to shrink (important for flex) */
+  max-width: 100%;
+}
+/* ============================
+   Sidebar (Explorer)
+============================ */
+.ide-sidebar {
+  flex: 0 0 210px;     /* fixed sidebar width */
+  min-width: 0;        /* critical for preventing overflow from child */
+  width: 210px;
+  background: #252526;
+  color: #ccc;
+  padding: 5px;
+  border-right: 1px solid #444;
+  overflow-y: auto;
+  font-size: 14px;
+}
+.tree-item {
+  padding: 4px 6px;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tree-item:hover {
+  background: #3a3d41;
+}
+/* ============================
+   Main (Editor + Output)
+============================ */
+.ide-main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;           /* CRITICAL: allow editor to shrink inside flex */
+  overflow: hidden;
+}
+/* Monaco wrapper */
+.ide-editor-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;           /* important for monaco inside flex */
+  overflow: hidden;
+}
+/* Bottom panels (output, stdin, problems) */
+.ide-panels {
+  background: #1e1e1e;
+  border-top: 1px solid #444;
+  padding: 6px;
+  font-size: 13px;
+  height: 28%;
+  overflow: auto;
+  min-height: 120px;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.ide-output {
+  background: #000;
+  color: #0f0;
+  padding: 6px;
+  min-height: 60px;
+  max-height: 120px;
+  overflow-y: auto;
+  border-radius: 4px;
+  font-family: "Consolas", monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-width: 100%;
+}
+.ide-input-box {
+  width: 100%;
+  margin-top: 4px;
+  padding: 6px;
+  background: #111;
+  border: 1px solid #444;
+  color: #eee;
+  border-radius: 3px;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+/* Problems panel */
+.ide-problems-panel {
+  margin-top: 6px;
+  padding: 8px;
+  background: #3c0000;
+  color: #fff;
+  border-left: 3px solid red;
+  font-size: 12px;
+  border-radius: 3px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+/* ============================
+   Terminal / XTerm container
+============================ */
+/* Ensure terminal fits container and doesn't push layout */
+#terminal-container {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+  overflow-x: auto; /* keep horizontal scroll inside terminal only */
+  height: 180px;
+  background: #1e1e1e;
+  border-top: 1px solid #333;
+  border-radius: 4px;
+}
+/* Terminal content wrapper (if you have a wrapper class) */
+.terminal-content {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: "Consolas", monospace;
+}
+/* ============================
+   Right AI Panel
+============================ */
+.ide-right-panel {
+  flex: 0 0 280px;
+  min-width: 0;
+  width: 280px;
+  border-left: 1px solid #444;
+  background: #252526;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 13px;
+  overflow: auto;
+}
+.ide-ai-header {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.ide-ai-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ide-ai-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.8;
+}
+/* AI instruction textarea */
+.ide-agent-textarea {
+  width: 100%;
+  min-height: 80px;
+  max-height: 160px;
+  resize: vertical;
+  padding: 6px;
+  border-radius: 4px;
+  border: 1px solid #444;
+  background: #1e1e1e;
+  color: #eee;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+/* AI buttons */
+.ide-ai-buttons {
+  display: flex;
+  gap: 6px;
+}
+.ide-ai-buttons button {
+  flex: 1;
+  padding: 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #0e639c;
+  color: #fff;
+  cursor: pointer;
+}
+.ide-ai-buttons button:hover {
+  background: #1177bb;
+}
+/* AI explanation box */
+.ide-explain {
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 6px;
+  border-radius: 4px;
+  background: #1e1e1e;
+  border: 1px solid #444;
+  font-size: 12px;
+  color: #eee;
+  font-family: Consolas, monospace;
+}
+/* ============================
+   AI Suggestions Popup
+============================ */
+.ai-popup {
+  position: absolute;
+  bottom: 35%;
+  right: 5px;
+  width: 230px;
+  background: #333;
+  border: 1px solid #444;
+  border-radius: 6px;
+  padding: 4px;
+  animation: fadeIn 0.25s ease-in-out;
+  font-size: 12px;
+  z-index: 200; /* ensure it sits above other UI */
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
+}
+.ai-suggest {
+  padding: 4px;
+  cursor: pointer;
 }
+.ai-suggest:hover {
+  background: #444;
 }
+/* ============================
+   Search Dialog
+============================ */
+.search-dialog {
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  background: #333;
+  padding: 10px;
+  border: 1px solid #444;
+  border-radius: 5px;
+  z-index: 300;
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
+}
+.search-dialog input {
+  width: 200px;
+  padding: 4px 6px;
+  border-radius: 3px;
+  border: 1px solid #555;
+  background: #1e1e1e;
+  color: #eee;
+}
+/* ============================
+   Context Menu
+============================ */
+.ide-context-menu {
+  position: absolute;
+  background: #333;
+  color: #eee;
+  border: 1px solid #555;
+  border-radius: 5px;
+  padding: 4px;
+  z-index: 400;
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
+}
+.ide-context-menu div {
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.ide-context-menu div:hover {
+  background: #555;
+}
+/* ============================
+   Progress / Spinner
+============================ */
+.ide-progress-wrap {
+  height: 3px;
+  background: transparent;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.ide-progress {
+  position: absolute;
+  height: 3px;
+  width: 30%;
+  left: -30%;
+  top: 0;
+  background: linear-gradient(90deg, #0e9, #08f);
+  animation: progress-slide 1.2s linear infinite;
+  border-radius: 2px;
+}
+@keyframes progress-slide {
+  0% { left: -30%; width: 30%; }
+  50% { left: 35%; width: 40%; }
+  100% { left: 100%; width: 30%; }
+}
+/* ---------- small inline spinner (optional) ---------- */
+.button-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255,255,255,0.25);
+  border-top-color: rgba(255,255,255,0.95);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+/* ============================
+   Misc: Text wrapping & safety
+============================ */
+.ide-output, .ide-explain, .ide-problems-panel, .tree-item, .ai-popup, .ai-suggest {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+/* Buttons, inputs, selects must not exceed container */
+button, input, textarea, select {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+/* Final safety: hide any stray horizontal overflow */
+#root, .ide-root, .ide-body, .ide-main { overflow-x: hidden; }
+/* ============================
+   📱 Mobile / Tablet Responsive
+============================ */
+@media (max-width: 900px) {
+  /* Stack layout vertically on small screens */
+  .ide-body { flex-direction: column; }
+  /* Sidebar becomes top strip */
+  .ide-sidebar {
+    width: 100%;
+    flex: 0 0 auto;
+    max-height: 22vh;
+    border-right: none;
+    border-bottom: 1px solid #444;
   }
+  .ide-main { order: 2; min-height: 40vh; }
+  .ide-editor-wrapper { height: 40vh; }
+  /* Bottom panels adapt */
+  .ide-panels { height: auto; max-height: 26vh; }
+  /* Right panel becomes bottom full width */
+  .ide-right-panel {
+    width: 100%;
+    order: 3;
+    border-left: none;
+    border-top: 1px solid #444;
   }
+  .ai-popup { right: 8px; left: 8px; width: auto; max-width: calc(100vw - 16px); }
+  .search-dialog { right: 8px; left: 8px; width: auto; }
+  .ide-context-menu { max-width: 70vw; }
+}
+/* Small-screen tweak for very small devices */
+@media (max-width: 420px) {
+  .ide-menubar { font-size: 12px; padding: 0 6px; }
+  .ide-ai-buttons button, .ide-menubar button { padding: 4px; font-size: 12px; }
 }

src/App.js CHANGED Viewed

@@ -1,23 +1,629 @@
-import logo from './logo.svg';
-import './App.css';
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
         >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

+// src/App.js
+import { useState, useEffect, useRef } from "react";
+import Editor from "@monaco-editor/react";
+import { askAgent } from "./agent/assistant";
+import { runCode } from "./agent/runner";
+import {
+  loadTree,
+  saveTree,
+  addFile,
+  addFolder,
+  renameNode,
+  deleteNode,
+  getNodeByPath,
+  updateFileContent,
+  searchTree,
+} from "./fileStore";
+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 ===================
+const LANGUAGE_OPTIONS = [
+  { id: "python", ext: ".py", icon: "🐍", monaco: "python" },
+  { id: "javascript", ext: ".js", icon: "🟨", monaco: "javascript" },
+  { id: "typescript", ext: ".ts", icon: "🟦", monaco: "typescript" },
+  { id: "cpp", ext: ".cpp", icon: "💠", monaco: "cpp" },
+  { id: "c", ext: ".c", icon: "🔷", monaco: "c" },
+  { id: "java", ext: ".java", icon: "☕", monaco: "java" },
+  { id: "html", ext: ".html", icon: "🌐", monaco: "html" },
+  { id: "css", ext: ".css", icon: "🎨", monaco: "css" },
+  { 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));
+}
+// 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 -----
+  const [tree, setTree] = useState(loadTree());
+  const [activePath, setActivePath] = useState("main.py");
+  // ----- 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);
+  // ----- AI + editor state -----
+  const [prompt, setPrompt] = useState("");
+  const [explanation, setExplanation] = 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);
+  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);
+  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 ----------
+  const collectFolderPaths = (node, acc = []) => {
+    if (!node) return acc;
+    if (node.type === "folder") acc.push(node.path || "");
+    node.children?.forEach((c) => collectFolderPaths(c, acc));
+    return acc;
+  };
+  const handleNewFile = () => {
+    const filename = window.prompt("Filename (with extension):", "untitled.js");
+    if (!filename) return;
+    const selected = getNodeByPath(tree, activePath);
+    let parentPath = "";
+    if (selected?.type === "folder") parentPath = selected.path;
+    else if (selected?.type === "file") {
+      const parts = selected.path.split("/").slice(0, -1);
+      parentPath = parts.join("/");
+    }
+    const folders = collectFolderPaths(tree);
+    const suggestion = parentPath || folders[0] || "";
+    const chosen = window.prompt(
+      `Parent folder (enter path). Available:\n${folders.join("\n")}\n\nLeave empty for root.`,
+      suggestion
+    );
+    const targetParent = chosen == null ? parentPath : (chosen.trim() || "");
+    const updated = addFile(tree, filename, targetParent);
+    setTree(updated);
+    const newPath = (targetParent ? targetParent + "/" : "") + filename;
+    setActivePath(newPath);
+  };
+  const handleNewFolder = () => {
+    const name = window.prompt("Folder name:", "new_folder");
+    if (!name) return;
+    const selected = getNodeByPath(tree, activePath);
+    const parentPath = selected && selected.type === "folder" ? selected.path : "";
+    const updated = addFolder(tree, name, parentPath);
+    setTree(updated);
+  };
+  const handleRename = () => {
+    if (!activePath) return;
+    const node = getNodeByPath(tree, activePath);
+    if (!node) return;
+    const newName = window.prompt("New name:", node.name);
+    if (!newName || newName === node.name) return;
+    const updated = renameNode(tree, activePath, newName);
+    setTree(updated);
+    const parts = activePath.split("/");
+    parts.pop();
+    const parent = parts.join("/");
+    const newPath = (parent ? parent + "/" : "") + newName;
+    setActivePath(newPath);
+  };
+  const handleDelete = () => {
+    if (!activePath) return;
+    const node = getNodeByPath(tree, activePath);
+    if (!node) return;
+    if (node.type === "folder" && node.children?.length > 0) {
+      const ok = window.confirm(`Folder "${node.name}" has ${node.children.length} items. Delete anyway?`);
+      if (!ok) return;
+    } else {
+      const ok = window.confirm(`Delete "${node.name}"?`);
+      if (!ok) return;
+    }
+    const updated = deleteNode(tree, activePath);
+    setTree(updated);
+    setActivePath("");
+  };
+  const downloadFile = () => {
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") return;
+    const blob = new Blob([node.content || ""], { type: "text/plain;charset=utf-8" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = node.name;
+    a.click();
+  };
+  const handleImportFileClick = () => fileInputRef.current?.click();
+  const handleFileInputChange = async (e) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const text = await f.text();
+    const selected = getNodeByPath(tree, activePath);
+    let parentPath = "";
+    if (selected?.type === "folder") parentPath = selected.path;
+    else if (selected?.type === "file") parentPath = selected.path.split("/").slice(0, -1).join("");
+    const updated = addFile(tree, f.name, parentPath);
+    const newPath = (parentPath ? parentPath + "/" : "") + f.name;
+    const finalTree = updateFileContent(updated, newPath, text);
+    setTree(finalTree);
+    setActivePath(newPath);
+    e.target.value = "";
+  };
+  // ---------- Terminal helpers ----------
+  const appendTerminal = (text) => {
+    // push to visible lines and set `output` (which Terminal writes)
+    setTerminalLines((prev) => {
+      const next = [...prev, text];
+      // also keep the XTerm single-output prop to trigger Terminal.writeln
+      setOutput(text);
+      return next;
+    });
+  };
+  const clearTerminal = () => {
+    // ANSI sequence to clear screen + move cursor home (xterm will honor)
+    setTerminalLines([]);
+    setOutput("\x1b[2J\x1b[H");
+    setAccumStdin("");
+    setAwaitingInput(false);
+    setInteractivePromptShown(false);
+  };
+  const resetTerminal = (keepAccum = false) => {
+    setTerminalLines([]);
+    setOutput("");
+    if (!keepAccum) {
+      setAccumStdin("");
+    }
+    setAwaitingInput(false);
+    setInteractivePromptShown(false);
+  };
+  // 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 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);
+    }
+  };
+  // ---------- 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;
+    }
+    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;
+    }
+    // Force fresh run: clear accumulated input and terminal
+    setAccumStdin("");
+    resetTerminal(false);
+    setAwaitingInput(false);
+    setInteractivePromptShown(false);
+    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
+    }
+    // Non-interactive: run immediately with empty stdin
+    appendTerminal(`[Running (fresh)]`);
+    setIsRunning(true);
+    setProblems([]);
+    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);
+    }
+  };
+  // ---------- Agent functions ----------
+  const handleAskFix = async () => {
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
+      appendTerminal("Select a file to apply fix.");
+      return;
+    }
+    setIsFixing(true);
+    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}`
+      );
+      const updatedTree = updateFileContent(tree, node.path, reply);
+      setTree(updatedTree);
+      appendTerminal("[AI] Applied fixes to file.");
+    } catch (err) {
+      appendTerminal(String(err));
+    } finally {
+      setIsFixing(false);
+    }
+  };
+  const handleExplainSelection = async () => {
+    const node = getNodeByPath(tree, activePath);
+    if (!node || node.type !== "file") {
+      setExplanation("Select a file to explain.");
+      return;
+    }
+    setIsExplaining(true);
+    try {
+      const editor = editorRef.current;
+      let selectedCode = "";
+      try {
+        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.";
+      const reply = await askAgent(
+        `Explain what this code does, any risks, and improvements.\n${userHint}\n\nCODE:\n${code}`
+      );
+      setExplanation(reply);
+    } catch (err) {
+      setExplanation(String(err));
+    } finally {
+      setIsExplaining(false);
+    }
+  };
+  // 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
+    }
+  };
+  // ---------- Search ----------
+  const handleSearchToggle = () => setSearchOpen(!searchOpen);
+  const handleSearchNow = () => {
+    if (!searchQuery) return;
+    const results = searchTree(tree, searchQuery);
+    alert(`Found ${results.length} results:\n` + JSON.stringify(results, null, 2));
+  };
+  // 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 (
+      <div key={node.path || node.name} style={{ paddingLeft: depth * 10 }}>
+        <div
+          className={`tree-item ${node.type} ${isActive ? "ide-file-item-active" : ""}`}
+          onClick={() => setActivePath(node.path)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setActivePath(node.path);
+            setContextMenu({ x: e.pageX, y: e.pageY, file: node.path });
+          }}
+          style={{ display: "flex", alignItems: "center", gap: 8 }}
         >
+          <span style={{ width: 18 }}>{node.type === "folder" ? "📁" : "📄"}</span>
+          <span className="ide-file-name">{node.name}</span>
+        </div>
+        {node.children && node.children.map((c) => renderTree(c, depth + 1))}
+      </div>
+    );
+  };
+  const anyLoading = isRunning || isFixing || isExplaining;
+  // ---------- JSX ----------
+  return (
+    <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">
+        <div className="ide-menubar-left">
+          <span className="ide-logo">⚙️ DevMate IDE</span>
+          <button onClick={handleNewFile} disabled={anyLoading}>📄 New File</button>
+          <button onClick={handleNewFolder} disabled={anyLoading}>📁 New Folder</button>
+          <button onClick={handleRename} disabled={anyLoading}>✏️ Rename</button>
+          <button onClick={handleDelete} disabled={anyLoading}>🗑 Delete</button>
+          <button onClick={downloadFile} disabled={anyLoading}>📥 Download</button>
+          <button onClick={() => downloadProjectZip()} disabled={anyLoading}>📦 ZIP</button>
+          <button onClick={handleImportFileClick} disabled={anyLoading}>📤 Import File</button>
+        </div>
+        <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={() => setTheme((t) => (t === "vs-dark" ? "light" : "vs-dark"))} disabled={anyLoading}>
+            {theme === "vs-dark" ? "☀️" : "🌙"}
+          </button>
+          <button onClick={clearTerminal} disabled={anyLoading} title="Clear terminal">🧹 Clear</button>
+        </div>
+      </div>
+      {(isRunning || isFixing || isExplaining) && (
+        <div className="ide-progress-wrap">
+          <div className="ide-progress" />
+        </div>
+      )}
+      <div className="ide-body">
+        <div className="ide-sidebar">
+          <div className="ide-sidebar-header">
+            <span>EXPLORER</span>
+            <button className="ide-icon-button" onClick={handleNewFile} title="New File" disabled={anyLoading}>＋</button>
+          </div>
+          <div className="ide-file-list" style={{ padding: 6 }}>{renderTree(tree)}</div>
+        </div>
+        <div className="ide-main">
+          <div className="ide-editor-wrapper">
+            <Editor
+              height="100%"
+              theme={theme}
+              language={langMeta.monaco}
+              value={currentNode?.content || ""}
+              onChange={updateActiveFileContent}
+              onMount={(editor) => (editorRef.current = editor)}
+              onBlur={() => fetchAiSuggestions(currentNode?.content)}
+              options={{ minimap: { enabled: true }, fontSize: 14, scrollBeyondLastLine: false }}
+            />
+          </div>
+          {aiSuggestions.length > 0 && (
+            <div className="ai-popup">
+              {aiSuggestions.map((s, i) => (
+                <div key={i} className="ai-suggest" onClick={() => updateFileContent(tree, activePath, (currentNode?.content || "") + "\n" + s)}>{s}</div>
+              ))}
+            </div>
+          )}
+          <div className="ide-panels">
+            <div style={{ marginBottom: 8 }}>
+              <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);
+                }}
+              />
+              {awaitingInput && (
+                <div style={{ marginTop: 8, padding: 8, background: "#252526", border: "1px solid #333", borderRadius: 6 }}>
+                  <div style={{ marginBottom: 6, color: "#ddd" }}>
+                    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>
+                  </div>
+                </div>
+              )}
+            </div>
+            {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>)}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="ide-right-panel">
+          <div className="ide-ai-header">🤖 AI Assistant</div>
+          <div className="ide-ai-section">
+            <label className="ide-ai-label">Instruction</label>
+            <textarea className="ide-agent-textarea" placeholder="Ask the AI (optimize, add tests, convert, etc.)" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
+          </div>
+          <div className="ide-ai-buttons">
+            <button onClick={handleAskFix} disabled={isFixing || anyLoading}>{isFixing ? "⏳ Apply Fix" : "💡 Apply Fix"}</button>
+            <button onClick={handleExplainSelection} disabled={isExplaining || anyLoading}>{isExplaining ? "⏳ Explaining" : "📖 Explain Code"}</button>
+          </div>
+          {explanation && (
+            <div className="ide-ai-section">
+              <label className="ide-ai-label">Explanation</label>
+              <div className="ide-explain">{explanation}</div>
+            </div>
+          )}
+        </div>
+      </div>
+      {searchOpen && (
+        <div className="search-dialog">
+          <input placeholder="Search text..." onChange={(e) => setSearchQuery(e.target.value)} />
+          <button onClick={handleSearchNow}>Search</button>
+        </div>
+      )}
+      {contextMenu && (
+        <div className="ide-context-menu" style={{ top: contextMenu.y, left: contextMenu.x }} onMouseLeave={() => setContextMenu(null)}>
+          <div onClick={() => { setContextMenu(null); handleRename(); }}>✏️ Rename</div>
+          <div onClick={() => { setContextMenu(null); handleDelete(); }}>🗑 Delete</div>
+          <div onClick={() => { setContextMenu(null); downloadFile(); }}>📥 Download</div>
+        </div>
+      )}
     </div>
   );
 }

src/Terminal.js ADDED Viewed

	@@ -0,0 +1,137 @@

+// src/Terminal.js
+import { useEffect, useRef } from "react";
+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";
+  const termRef = useRef(null);
+  const bufferRef = useRef(""); // collects user typed chars until Enter
+  const fitRef = useRef(null);
+  useEffect(() => {
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      disableStdin: false,
+      convertEol: true,
+      theme: {
+        background: "#1e1e1e",
+        foreground: "#ffffff",
+      },
+    });
+    const fitAddon = new FitAddon();
+    fitRef.current = fitAddon;
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById(containerId));
+    fitAddon.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;
+      }
+      // other control sequences ignore
+      if (data.charCodeAt(0) < 32) {
+        // ignore other ctrl chars
+        return;
+      }
+      // normal characters: append to buffer
+      bufferRef.current += data;
+    });
+    // expose a simple focus method on container element for external focusing
+    const container = document.getElementById(containerId);
+    if (container) container.tabIndex = 0;
+    return () => {
+      try {
+        term.dispose();
+      } catch {}
+    };
+  }, [onData]);
+  // Append new output 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();
+    }
+  };
+  // 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
+      id={containerId}
+      style={{
+        width: "100%",
+        height: "180px",
+        background: "#1e1e1e",
+        borderTop: "1px solid #333",
+        outline: "none",
+      }}
+    />
+  );
+}

src/agent/assistant.js ADDED Viewed

	@@ -0,0 +1,12 @@

+// src/agent/assistant.js
+import { api } from "../apiClient";
+export async function askAgent(message, history = []) {
+  const res = await api.post(
+    "/chat-stream",
+    { message, history },
+    { responseType: "text" } // backend returns text/plain
+  );
+  return res.data; // whole reply text
+}

src/agent/projectGenerator.js ADDED Viewed

	@@ -0,0 +1,22 @@

+// src/agent/projectGenerator.js
+import { api } from "../apiClient";
+export async function generateProject(file, frontend, backend, database) {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("frontend", frontend);
+  formData.append("backend", backend);
+  formData.append("database", database);
+  const res = await api.post("/chat-stream-doc", formData, {
+    responseType: "blob", // you’re getting ZIP back
+  });
+  // trigger download
+  const url = window.URL.createObjectURL(new Blob([res.data]));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "generated_project.zip";
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

src/agent/runner.js ADDED Viewed

	@@ -0,0 +1,30 @@

+// src/agent/runner.js
+import { api } from "../apiClient";
+// Map language id -> file extension
+const EXT_MAP = {
+  python: ".py",
+  javascript: ".js",
+  typescript: ".ts",
+  c: ".c",
+  cpp: ".cpp",
+  java: ".java",
+  html: ".html",
+  css: ".css",
+  json: ".json",
+};
+export async function runCode(code, language, stdin = "") {
+  const ext = EXT_MAP[language] || ".txt";
+  // Use a consistent name – backend only cares about extension
+  const filename = "main" + ext;
+  const res = await api.post("/execute", {
+    code,
+    filename,
+    input: stdin,
+  });
+  return res.data; // { output, error }
+}

src/apiClient.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import axios from "axios";
+const API_BASE = process.env.REACT_APP_API_BASE; // 👈 CRA uses REACT_APP_
+export const api = axios.create({
+  baseURL: API_BASE,
+});

src/fileStore.js ADDED Viewed

	@@ -0,0 +1,211 @@

+// fileStore.js
+const STORAGE_KEY = "devmate_ide_tree_v2";
+/**
+ * Tree node structure:
+ * {
+ *   type: "folder" | "file",
+ *   name: "src" or "main.py",
+ *   path: "src" or "src/main.py",
+ *   children: [ ... ]  // only for folders
+ *   content: "..."     // only for files
+ * }
+ */
+const defaultTree = {
+  type: "folder",
+  name: "root",
+  path: "",
+  children: [
+    {
+      type: "file",
+      name: "main.py",
+      path: "main.py",
+      content: "# Python\nprint('Hello from IDE')",
+    },
+    {
+      type: "folder",
+      name: "src",
+      path: "src",
+      children: [
+        {
+          type: "file",
+          name: "script.js",
+          path: "src/script.js",
+          content: "console.log('Hello from src');",
+        },
+      ],
+    },
+  ],
+};
+// ---------- persistence ----------
+export function loadTree() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : defaultTree;
+  } catch (e) {
+    console.warn("loadTree failed:", e);
+    return defaultTree;
+  }
+}
+export function saveTree(tree) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tree));
+  } catch (e) {
+    console.warn("saveTree failed:", e);
+  }
+}
+// ---------- traversal helpers ----------
+function clone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+// find node and parent by path
+export function findNodeAndParent(root, path) {
+  if (path === "" || path == null) return { node: root, parent: null };
+  const parts = path.split("/").filter(Boolean);
+  let node = root;
+  let parent = null;
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    parent = node;
+    if (!parent.children) return { node: null, parent: null };
+    node = parent.children.find((c) => c.name === part);
+    if (!node) return { node: null, parent: null };
+  }
+  return { node, parent };
+}
+export function getNodeByPath(root, path) {
+  const r = findNodeAndParent(root, path);
+  return r.node || null;
+}
+// build child path
+function joinPath(parentPath, name) {
+  if (!parentPath) return name;
+  if (!name) return parentPath;
+  return parentPath + "/" + name;
+}
+// ---------- CRUD operations ----------
+// Add file under parentPath (string). If parentPath points to file, use its parent.
+export function addFile(tree, filename, parentPath = "") {
+  const newTree = clone(tree);
+  // find parent
+  const { node: parent } = findNodeAndParent(newTree, parentPath);
+  const target = parent?.type === "folder" ? parent : newTree;
+  // ensure unique name
+  let name = filename;
+  const exists = (name) =>
+    target.children && target.children.some((c) => c.name === name);
+  let idx = 1;
+  const base = name.includes(".") ? name.slice(0, name.lastIndexOf(".")) : name;
+  const ext = name.includes(".") ? name.slice(name.lastIndexOf(".")) : "";
+  while (exists(name)) {
+    name = `${base}_${idx++}${ext}`;
+  }
+  const path = joinPath(target.path, name);
+  const newNode = { type: "file", name, path, content: `// ${name}\n` };
+  target.children = target.children || [];
+  target.children.push(newNode);
+  return newTree;
+}
+// Add folder under parentPath
+export function addFolder(tree, folderName, parentPath = "") {
+  const newTree = clone(tree);
+  const { node: parent } = findNodeAndParent(newTree, parentPath);
+  const target = parent?.type === "folder" ? parent : newTree;
+  let name = folderName;
+  const exists = (name) =>
+    target.children && target.children.some((c) => c.name === name && c.type === "folder");
+  let idx = 1;
+  while (exists(name)) {
+    name = `${folderName}_${idx++}`;
+  }
+  const path = joinPath(target.path, name);
+  const newNode = { type: "folder", name, path, children: [] };
+  target.children = target.children || [];
+  target.children.push(newNode);
+  return newTree;
+}
+// Delete node (file or folder) at given path (recursive for folders)
+export function deleteNode(tree, path) {
+  const newTree = clone(tree);
+  if (!path) return newTree; // cannot delete root
+  const parts = path.split("/").filter(Boolean);
+  const nameToDelete = parts.pop();
+  const parentPath = parts.join("/");
+  const { node: parent } = findNodeAndParent(newTree, parentPath);
+  if (!parent || !parent.children) return newTree;
+  parent.children = parent.children.filter((c) => c.name !== nameToDelete);
+  return newTree;
+}
+// Rename node: change name and update paths recursively for children
+export function renameNode(tree, path, newName) {
+  const newTree = clone(tree);
+  const { node, parent } = findNodeAndParent(newTree, path);
+  if (!node || !parent) {
+    // special case root rename not allowed
+    if (node && !parent) return newTree;
+    return newTree;
+  }
+  // ensure no duplicate under parent
+  if (parent.children.some((c) => c.name === newName && c.path !== node.path)) {
+    // collision: abort
+    return newTree;
+  }
+  const oldPath = node.path;
+  node.name = newName;
+  const newPath = joinPath(parent.path, newName);
+  // update path recursively
+  function updatePaths(n, currPath) {
+    n.path = currPath;
+    if (n.children) {
+      for (let child of n.children) {
+        const childNewPath = currPath ? currPath + "/" + child.name : child.name;
+        updatePaths(child, childNewPath);
+      }
+    }
+  }
+  updatePaths(node, newPath);
+  return newTree;
+}
+// Update file content
+export function updateFileContent(tree, path, content) {
+  const newTree = clone(tree);
+  const { node } = findNodeAndParent(newTree, path);
+  if (node && node.type === "file") {
+    node.content = content;
+  }
+  return newTree;
+}
+// Search within files (returns array of {path, file, excerpt})
+export function searchTree(node, term, results = []) {
+  if (!node) return results;
+  if (node.type === "file" && node.content && node.content.includes(term)) {
+    results.push({
+      path: node.path,
+      file: node.name,
+      excerpt: node.content
+        .split("\n")
+        .filter((l) => l.includes(term))
+        .slice(0, 5)
+        .join("\n"),
+    });
+  }
+  if (node.children) {
+    for (const c of node.children) searchTree(c, term, results);
+  }
+  return results;
+}

src/problemParser.js ADDED Viewed

	@@ -0,0 +1,32 @@

+// problemParser.js
+export function parseProblems(output) {
+  if (!output) return [];
+  const lines = output.split("\n");
+  const problems = [];
+  const regexes = [
+    // Python
+    { re: /(File "(.+)", line (\d+))/, lang: "python" },
+    // Java
+    { re: /(.*\.java):(\d+): (.+)/, lang: "java" },
+    // JS
+    { re: /(.*):(\d+):(\d+)/, lang: "js" },
+  ];
+  for (let line of lines) {
+    for (let { re, lang } of regexes) {
+      const m = line.match(re);
+      if (m) {
+        problems.push({
+          file: m[2] || m[1],
+          line: m[3] || m[2],
+          message: m[4] || m[0],
+          lang,
+        });
+      }
+    }
+  }
+  return problems;
+}

src/zipExport.js ADDED Viewed

	@@ -0,0 +1,25 @@

+// zipExport.js
+import JSZip from "jszip";
+import { loadTree } from "./fileStore";
+export async function downloadProjectZip() {
+  const tree = loadTree();
+  const zip = new JSZip();
+  function addToZip(node, folder) {
+    if (node.type === "file") {
+      folder.file(node.name, node.content || "");
+    } else if (node.type === "folder") {
+      const newFolder = folder.folder(node.name);
+      node.children?.forEach((c) => addToZip(c, newFolder));
+    }
+  }
+  addToZip(tree, zip);
+  const blob = await zip.generateAsync({ type: "blob" });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = "project.zip";
+  a.click();
+}