commit initial 09-12-2025 009

package-lock.json

@@ -14,6 +14,7 @@
         "@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",
@@ -9109,6 +9110,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immer": {
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -10968,6 +10975,54 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11054,6 +11109,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -11903,6 +11967,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -14848,6 +14918,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -16359,9 +16435,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -16369,7 +16445,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

package.json

@@ -9,6 +9,7 @@
     "@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",

src/App.css

@@ -364,3 +364,162 @@
   gap: 16px;
   padding: 0 10px;
 }
+
+
+/* Global layout */
+.ide-root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  font-family: "Consolas", monospace;
+}
+
+/* Dark & light themes */
+.ide-dark { background: #1e1e1e; color: #eee; }
+.ide-light { background: #fafafa; color: #111; }
+
+/* Menubar */
+.ide-menubar {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 10px;
+  background: #252526;
+  color: #eee;
+  font-size: 14px;
+  border-bottom: 1px solid #444;
+}
+.ide-menubar button {
+  margin-right: 6px;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}
+.ide-logo {
+  font-weight: bold;
+  margin-right: 12px;
+}
+
+/* Body */
+.ide-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.ide-sidebar {
+  width: 210px;
+  background: #252526;
+  padding: 5px;
+  border-right: 1px solid #444;
+  overflow-y: auto;
+  font-size: 14px;
+}
+.tree-item {
+  padding: 4px 6px;
+  cursor: pointer;
+  user-select: none;
+}
+.tree-item:hover {
+  background: #3a3d41;
+}
+
+/* Editor */
+.ide-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Bottom panels */
+.ide-panels {
+  background: #1e1e1e;
+  border-top: 1px solid #444;
+  padding: 6px;
+  font-size: 13px;
+  height: 28%;
+  overflow-y: auto;
+}
+
+.ide-output {
+  background: #000;
+  color: #0f0;
+  padding: 6px;
+  min-height: 60px;
+  max-height: 120px;
+  overflow-y: auto;
+  border-radius: 4px;
+}
+.ide-input-box {
+  width: 100%;
+  margin-top: 4px;
+  padding: 4px;
+}
+
+/* Problems panel */
+.ide-problems-panel {
+  margin-top: 6px;
+  padding: 4px;
+  background: #3c0000;
+  color: #fff;
+  border-left: 3px solid red;
+  font-size: 12px;
+}
+
+/* AI 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;
+}
+.ai-suggest {
+  padding: 4px;
+  cursor: pointer;
+}
+.ai-suggest:hover {
+  background: #444;
+}
+
+/* Search popup */
+.search-dialog {
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  background: #333;
+  padding: 10px;
+  border: 1px solid #444;
+  border-radius: 5px;
+}
+.search-dialog input {
+  width: 200px;
+}
+
+/* Context menu */
+.ide-context-menu {
+  position: absolute;
+  background: #333;
+  color: #eee;
+  border: 1px solid #555;
+  border-radius: 5px;
+  padding: 4px;
+}
+.ide-context-menu div {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+.ide-context-menu div:hover {
+  background: #555;
+}
+
+/* Animation */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}

src/App.js

@@ -2,502 +2,285 @@ 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 } from "./fileStore";
+import { downloadProjectZip } from "./zipExport";
+import { parseProblems } from "./problemParser";
 import "./App.css";
 
-// Supported languages in the IDE
+// =================== SUPPORTED LANGUAGES ===================
 const LANGUAGE_OPTIONS = [
-  { id: "python", label: "Python", ext: ".py", icon: "🐍", monaco: "python" },
-  { id: "javascript", label: "JavaScript", ext: ".js", icon: "🟨", monaco: "javascript" },
-  { id: "typescript", label: "TypeScript", ext: ".ts", icon: "🟦", monaco: "typescript" },
-  { id: "cpp", label: "C++", ext: ".cpp", icon: "💠", monaco: "cpp" },
-  { id: "c", label: "C", ext: ".c", icon: "🔷", monaco: "c" },
-  { id: "java", label: "Java", ext: ".java", icon: "☕", monaco: "java" },
-  { id: "html", label: "HTML", ext: ".html", icon: "🌐", monaco: "html" },
-  { id: "css", label: "CSS", ext: ".css", icon: "🎨", monaco: "css" },
-  { id: "json", label: "JSON", ext: ".json", icon: "🧾", monaco: "json" },
+  { 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" },
 ];
 
-// Languages we actually can run on the backend right now
-const RUNNABLE_LANGS = ["python", "javascript","java"];
-
-// LocalStorage key
-const STORAGE_KEY = "devmate_ide_files";
+const RUNNABLE_LANGS = ["python", "javascript", "java"];
 
+// =================== APP ===================
 function App() {
-  const [files, setFiles] = useState({
-    "main.py": {
-      language: "python",
-      content: "# Python\nprint('Hello from IDE')",
-    },
-    "script.js": {
-      language: "javascript",
-      content: "console.log('Hello from JS');",
-    },
-  });
-  const [activeFile, setActiveFile] = useState("main.py");
+  const [tree, setTree] = useState(loadTree());
+  const [activePath, setActivePath] = useState("main.py");
   const [output, setOutput] = useState("");
   const [prompt, setPrompt] = useState("");
   const [explanation, setExplanation] = useState("");
-  const [theme, setTheme] = useState("vs-dark"); // "vs-dark" | "light"
-  const [openMenu, setOpenMenu] = useState(null); // "file" | "run" | "ai" | null
   const [stdin, setStdin] = useState("");
+  const [problems, setProblems] = useState([]);
+  const [theme, setTheme] = useState("vs-dark");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [aiSuggestions, setAiSuggestions] = useState([]);
+  const [contextMenu, setContextMenu] = useState(null); // right-click menu
   const editorRef = useRef(null);
 
-  const currentFile = files[activeFile];
-  const currentLangId = currentFile?.language || "python";
+  const currentFile = getNodeByPath(tree, activePath);
   const langMeta =
-    LANGUAGE_OPTIONS.find((l) => l.id === currentLangId) || LANGUAGE_OPTIONS[0];
+    LANGUAGE_OPTIONS.find((l) =>
+      currentFile?.name.endsWith(l.ext)
+    ) || LANGUAGE_OPTIONS[0];
 
-  // ----- LocalStorage: load on mount -----
+  // Save after tree change
   useEffect(() => {
-    try {
-      const saved = localStorage.getItem(STORAGE_KEY);
-      if (saved) {
-        const parsed = JSON.parse(saved);
-        if (parsed && typeof parsed === "object") {
-          setFiles(parsed.files || files);
-          setActiveFile(parsed.activeFile || Object.keys(parsed.files || files)[0]);
-        }
-      }
-    } catch (e) {
-      console.warn("Failed to load saved files:", e);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    saveTree(tree);
+  }, [tree]);
 
-  // ----- LocalStorage: save whenever files/activeFile change -----
-  useEffect(() => {
-    try {
-      localStorage.setItem(
-        STORAGE_KEY,
-        JSON.stringify({ files, activeFile })
-      );
-    } catch (e) {
-      console.warn("Failed to save files:", e);
-    }
-  }, [files, activeFile]);
-
-  const updateActiveFileContent = (value) => {
-    if (!activeFile) return;
-    setFiles((prev) => ({
-      ...prev,
-      [activeFile]: {
-        ...prev[activeFile],
-        content: value ?? "",
-      },
-    }));
+  // =================== FILE ACTIONS ===================
+  const handleNewFile = () => {
+    const name = window.prompt("Filename (with extension):");
+    if (!name) return;
+    setTree(addFile(tree, name));
   };
 
-  const handleRun = async () => {
-    if (!currentFile) return;
-
-    if (!RUNNABLE_LANGS.includes(currentLangId)) {
-      setOutput(
-        `⚠️ Run is only supported for: ${RUNNABLE_LANGS.join(
-          ", "
-        )}.\nSelected language: ${currentLangId}`
-      );
-      return;
-    }
-
-    try {
-      const res = await runCode(currentFile.content, currentLangId, stdin);
-      setOutput(res.output ?? "");
-    } catch (err) {
-      setOutput(`Error running code: ${String(err)}`);
-    }
-    setOpenMenu(null);
+  const handleNewFolder = () => {
+    const name = window.prompt("Folder name:");
+    if (!name) return;
+    setTree(addFolder(tree, name));
   };
 
-  const handleAskFix = async () => {
-    if (!currentFile) return;
-
-    const fullPrompt = `
-You are an AI coding assistant inside an online IDE.
-Improve, debug, or refactor the following ${currentLangId} code.
-Return ONLY the updated code, with no explanation.
-
-User request/hint (optional):
-${prompt || "(no extra hint)"}
-
-Code:
-${currentFile.content}
-`.trim();
-
-    const reply = await askAgent(fullPrompt, [
-      { role: "user", content: currentFile.content },
-    ]);
-
-    updateActiveFileContent(reply);
-    setOpenMenu(null);
+  const handleRename = () => {
+    if (!activePath) return;
+    const newName = window.prompt("New name:", currentFile.name);
+    if (!newName) return;
+    setTree(renameNode(tree, activePath, newName));
+    setActivePath(newName);
   };
 
-  const handleExplainSelection = async () => {
-    if (!currentFile) return;
-    const editor = editorRef.current;
-
-    let selectedCode = "";
-    if (editor) {
-      const model = editor.getModel();
-      const selection = editor.getSelection();
-      if (model && selection) {
-        selectedCode = model.getValueInRange(selection);
-      }
-    }
-
-    if (!selectedCode.trim()) {
-      selectedCode = currentFile.content;
-    }
-
-    const explainPrompt = `
-You are an AI code explainer inside an IDE.
-Explain clearly and concisely what the following ${currentLangId} code does,
-including edge cases and any potential issues.
-
-Code:
-${selectedCode}
-`.trim();
-
-    const reply = await askAgent(explainPrompt, [
-      { role: "user", content: selectedCode },
-    ]);
-
-    setExplanation(reply);
-    setOpenMenu(null);
-  };
-
-  const handleNewFile = () => {
-    const base = "untitled";
-    let idx = 1;
-    let name = `${base}${idx}${langMeta.ext}`;
-    while (files[name]) {
-      idx += 1;
-      name = `${base}${idx}${langMeta.ext}`;
-    }
-
-    setFiles((prev) => ({
-      ...prev,
-      [name]: {
-        language: currentLangId,
-        content: `// ${langMeta.label} file\n`,
-      },
-    }));
-    setActiveFile(name);
-    setOpenMenu(null);
+  const handleDelete = () => {
+    if (!activePath) return;
+    setTree(deleteNode(tree, activePath));
+    setActivePath(""); // unselect
   };
 
-  const handleDeleteFile = () => {
-    if (!activeFile) return;
-    if (Object.keys(files).length === 1) return; // keep at least one
-
-    const newFiles = { ...files };
-    delete newFiles[activeFile];
-
-    const remaining = Object.keys(newFiles);
-    setFiles(newFiles);
-    setActiveFile(remaining[0] || "");
+  const downloadFile = () => {
+    if (!currentFile?.content) return;
+    const blob = new Blob([currentFile.content], { type: "text/plain;charset=utf-8" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = currentFile.name;
+    a.click();
   };
 
-    // 🔁 NEW: Rename file
-  const handleRenameFile = () => {
-    if (!activeFile) return;
-
-    const newName = window.prompt(
-      "Enter new file name (with extension):",
-      activeFile
-    );
-    if (!newName || newName === activeFile) return;
+  // =================== RUN ===================
+  const handleRun = async () => {
+    if (!currentFile?.content) return;
 
-    // prevent overwriting other file
-    if (files[newName]) {
-      setOutput(`❌ A file named "${newName}" already exists.`);
-      setOpenMenu(null);
+    const selectedLang = langMeta.id;
+    if (!RUNNABLE_LANGS.includes(selectedLang)) {
+      setOutput(`⚠️ Cannot run ${selectedLang}.`);
       return;
     }
 
-    const oldFile = files[activeFile];
-
-    // infer language from new extension if possible
-    let newLangId = oldFile.language;
-    const dotIndex = newName.lastIndexOf(".");
-    if (dotIndex !== -1) {
-      const newExt = newName.slice(dotIndex);
-      const match = LANGUAGE_OPTIONS.find((l) => l.ext === newExt);
-      if (match) {
-        newLangId = match.id;
-      }
-    }
-
-    setFiles((prev) => {
-      const copy = { ...prev };
-      delete copy[activeFile];
-      copy[newName] = {
-        ...oldFile,
-        language: newLangId,
-      };
-      return copy;
-    });
-
-    setActiveFile(newName);
-    setOpenMenu(null);
-    setOutput(`✅ Renamed "${activeFile}" to "${newName}".`);
+    const res = await runCode(currentFile.content, selectedLang, stdin);
+    setOutput(res.output || "");
+    setProblems(res.error ? parseProblems(res.output) : []);
   };
 
-  const handleChangeLanguage = (langId) => {
-    setFiles((prev) => ({
-      ...prev,
-      [activeFile]: {
-        ...prev[activeFile],
-        language: langId,
-      },
-    }));
+  // =================== AI ===================
+  const handleAskFix = async () => {
+    const reply = await askAgent(
+      `Fix or improve the following code and return only updated code.\n\n${currentFile.content}`
+    );
+    updateActiveFileContent(reply);
   };
 
-  const toggleTheme = () => {
-    setTheme((prev) => (prev === "vs-dark" ? "light" : "vs-dark"));
+  const handleExplainSelection = async () => {
+    const editor = editorRef.current;
+    const selected = editor.getModel().getValueInRange(editor.getSelection());
+    const code = selected.trim() || currentFile.content;
+    const reply = await askAgent(
+      `Explain this ${langMeta.id} code:\n${code}`
+    );
+    setExplanation(reply);
   };
 
-  const toggleMenu = (menuName) => {
-    setOpenMenu((prev) => (prev === menuName ? null : menuName));
+  const updateActiveFileContent = (value) => {
+    const updated = updateFileContent(tree, activePath, value);
+    setTree(updated);
   };
 
-  const handleSaveLocal = () => {
-    // Already persisted automatically; this is more like a user-triggered "save" action
-    try {
-      localStorage.setItem(
-        STORAGE_KEY,
-        JSON.stringify({ files, activeFile })
-      );
-      setOutput("💾 Saved project to browser storage.");
-    } catch (e) {
-      setOutput(`Failed to save: ${String(e)}`);
-    }
-    setOpenMenu(null);
+  // ===== AI Autocomplete Suggestions (Popup) =====
+  const fetchAiSuggestions = async (code) => {
+    if (!code.trim()) return;
+    const reply = await askAgent(
+      `Suggest possible next lines for continuation. Return 3 short snippets.\n${code}`
+    );
+    setAiSuggestions(reply.split("\n").filter((l) => l.trim()));
   };
 
-  const handleDownloadFile = () => {
-    if (!currentFile || !activeFile) return;
-    const blob = new Blob([currentFile.content], { type: "text/plain;charset=utf-8" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = activeFile;
-    a.click();
-    window.URL.revokeObjectURL(url);
-    setOpenMenu(null);
+  // =================== SEARCH ===================
+  const handleSearchToggle = () => setSearchOpen(!searchOpen);
+
+  const handleSearchNow = () => {
+    if (!searchQuery) return;
+    alert(
+      `Found occurrences:\n${JSON.stringify(
+        searchTree(tree, searchQuery),
+        null,
+        2
+      )}`
+    );
   };
 
+  // =================== UI ===================
   return (
     <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}>
-      {/* Top Menu Bar */}
+      {/* ==== TOP BAR ==== */}
       <div className="ide-menubar">
         <div className="ide-menubar-left">
           <span className="ide-logo">⚙️ DevMate IDE</span>
 
-          {/* File menu */}
-          <div className="ide-menu-wrapper">
-            <button
-              className="ide-menu-item"
-              onClick={() => toggleMenu("file")}
-            >
-              File ▾
-            </button>
-            {openMenu === "file" && (
-              <div className="ide-menu-dropdown">
-                <button onClick={handleNewFile}>New File</button>
-                <button onClick={handleRenameFile}>Rename File</button>
-                <button onClick={handleSaveLocal}>Save (Local)</button>
-                <button onClick={handleDownloadFile}>Download File</button>
-              </div>
-            )}
-          </div>
-
-          {/* Run menu */}
-          <div className="ide-menu-wrapper">
-            <button
-              className="ide-menu-item"
-              onClick={() => toggleMenu("run")}
-            >
-              Run ▾
-            </button>
-            {openMenu === "run" && (
-              <div className="ide-menu-dropdown">
-                <button onClick={handleRun}>Run Current File</button>
-              </div>
-            )}
-          </div>
-
-          {/* AI menu */}
-          <div className="ide-menu-wrapper">
-            <button
-              className="ide-menu-item"
-              onClick={() => toggleMenu("ai")}
-            >
-              AI ▾
-            </button>
-            {openMenu === "ai" && (
-              <div className="ide-menu-dropdown">
-                <button onClick={handleAskFix}>Fix Current File</button>
-                <button onClick={handleExplainSelection}>Explain Selection</button>
-              </div>
-            )}
-          </div>
-
-          <button className="ide-menu-item" onClick={() => setOutput("DevMate IDE - simple VS Code style IDE with AI agent and runner.")}>
-            Help
-          </button>
+          <button onClick={handleNewFile}>📄 New File</button>
+          <button onClick={handleNewFolder}>📁 New Folder</button>
+          <button onClick={handleRename}>✏️ Rename</button>
+          <button onClick={downloadFile}>📥 Download</button>
+          <button onClick={downloadProjectZip}>📦 ZIP</button>
         </div>
 
         <div className="ide-menubar-right">
-          <span className="ide-menu-item" onClick={toggleTheme}>
-            {theme === "vs-dark" ? "☀️ Light" : "🌙 Dark"}
-          </span>
+          <button onClick={handleSearchToggle}>🔍 Search</button>
+          <button onClick={handleRun}>▶ Run</button>
+          <button onClick={handleAskFix}>🤖 Fix</button>
+          <button onClick={handleExplainSelection}>📖 Explain</button>
+          <button onClick={() => setTheme(theme === "vs-dark" ? "light" : "vs-dark")}>
+            {theme === "vs-dark" ? "☀️" : "🌙"}
+          </button>
         </div>
       </div>
 
-      {/* Main body: sidebar + editor + panel */}
+      {/* ==== BODY ==== */}
       <div className="ide-body">
-        {/* Explorer Sidebar */}
+
+        {/* ==== TREE VIEW ==== */}
         <div className="ide-sidebar">
-          <div className="ide-sidebar-header">
-            <span>EXPLORER</span>
-            <button className="ide-icon-button" onClick={handleNewFile} title="New File">
-              ＋
-            </button>
-          </div>
-          <div className="ide-file-list">
-            {Object.keys(files).map((fname) => {
-              const fLang = files[fname].language;
-              const fMeta =
-                LANGUAGE_OPTIONS.find((l) => l.id === fLang) ||
-                LANGUAGE_OPTIONS[0];
-
-              return (
-                <div
-                  key={fname}
-                  className={
-                    "ide-file-item" +
-                    (fname === activeFile ? " ide-file-item-active" : "")
-                  }
-                  onClick={() => setActiveFile(fname)}
-                >
-                  <span className="ide-file-icon">{fMeta.icon}</span>
-                  <span className="ide-file-name">{fname}</span>
-                </div>
-              );
-            })}
-          </div>
+          {renderTree(tree, setActivePath, setContextMenu)}
         </div>
 
-        {/* Editor & bottom panel */}
+        {/* ==== EDITOR ==== */}
         <div className="ide-main">
-          {/* Tabs + quick actions */}
-          <div className="ide-tabs">
-            <div className="ide-tab-list">
-              {Object.keys(files).map((fname) => (
+          <Editor
+            height="100%"
+            theme={theme}
+            language={langMeta.monaco}
+            value={currentFile?.content || ""}
+            onChange={updateActiveFileContent}
+            onMount={(editor) => (editorRef.current = editor)}
+            onBlur={() => fetchAiSuggestions(currentFile?.content)}
+          />
+
+          {/* AI Suggestions Tooltip */}
+          {aiSuggestions.length > 0 && (
+            <div className="ai-popup">
+              {aiSuggestions.map((s, i) => (
                 <div
-                  key={fname}
-                  className={
-                    "ide-tab" + (fname === activeFile ? " ide-tab-active" : "")
-                  }
-                  onClick={() => setActiveFile(fname)}
+                  key={i}
+                  className="ai-suggest"
+                  onClick={() => updateActiveFileContent(currentFile.content + "\n" + s)}
                 >
-                  <span>{fname}</span>
-                  {fname === activeFile && (
-                    <button
-                      className="ide-tab-close"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleDeleteFile();
-                      }}
-                    >
-                      ×
-                    </button>
-                  )}
+                  {s}
                 </div>
               ))}
             </div>
+          )}
 
-            <div className="ide-tab-actions">
-              <select
-                value={currentLangId}
-                onChange={(e) => handleChangeLanguage(e.target.value)}
-                className="ide-select"
-              >
-                {LANGUAGE_OPTIONS.map((lang) => (
-                  <option key={lang.id} value={lang.id}>
-                    {lang.label}
-                  </option>
-                ))}
-              </select>
-              <button className="ide-button" onClick={handleRun}>
-                ▶ Run
-              </button>
-              <button className="ide-button" onClick={handleAskFix}>
-                🤖 Fix with AI
-              </button>
-              <button className="ide-button" onClick={handleExplainSelection}>
-                📖 Explain Selection
-              </button>
-            </div>
-          </div>
+          {/* Bottom Panels */}
+          <div className="ide-panels">
+            <pre className="ide-output">{output}</pre>
 
-          {/* Editor */}
-          <div className="ide-editor-wrapper">
-            <Editor
-              height="100%"
-              theme={theme}
-              language={langMeta.monaco}
-              value={currentFile?.content}
-              onChange={updateActiveFileContent}
-              onMount={(editor) => {
-                editorRef.current = editor;
-              }}
-              options={{
-                minimap: { enabled: true },
-                fontSize: 14,
-                scrollBeyondLastLine: false,
-              }}
+            <input
+              className="ide-input-box"
+              placeholder="Program input..."
+              value={stdin}
+              onChange={(e) => setStdin(e.target.value)}
             />
-          </div>
 
-          {/* Bottom Panel: Output + Agent Prompt + Explanation */}
-          <div className="ide-bottom-panel">
-            <div className="ide-output-panel">
-              <div className="ide-panel-header">TERMINAL / OUTPUT</div>
-              <pre className="ide-output-content">{output}</pre>
-              <input
-  placeholder="Program input here..."
-  value={stdin}
-  onChange={(e) => setStdin(e.target.value)}
-  className="ide-input-box"
-/>
-            </div>
-            <div className="ide-agent-panel">
-              <div className="ide-panel-header">AI PROMPT</div>
-              <textarea
-                className="ide-agent-textarea"
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder="Ask AI to refactor, explain, or add features..."
-              />
-              {explanation && (
-                <div className="ide-explanation">
-                  <div className="ide-panel-header">AI EXPLANATION</div>
-                  <pre className="ide-output-content">{explanation}</pre>
-                </div>
-              )}
-            </div>
+            {explanation && (
+              <div className="ide-explain">{explanation}</div>
+            )}
+
+            {problems.length > 0 && (
+              <div className="ide-problems-panel">
+                <div>🚨 Problems ({problems.length})</div>
+                {problems.map((p, i) => (
+                  <div key={i}>{p.file}:{p.line} — {p.message}</div>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </div>
 
-      {/* Status Bar */}
-      <div className="ide-statusbar">
-        <span>{activeFile}</span>
-        <span>{langMeta.label}</span>
-        <span>Theme: {theme === "vs-dark" ? "Dark" : "Light"}</span>
+      {/* ==== SEARCH PANEL ==== */}
+      {searchOpen && (
+        <div className="search-dialog">
+          <input
+            placeholder="Search text..."
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          <button onClick={handleSearchNow}>Search</button>
+        </div>
+      )}
+
+      {/* ==== RIGHT-CLICK CONTEXT MENU ==== */}
+      {contextMenu && (
+        <div
+          className="ide-context-menu"
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+          onMouseLeave={() => setContextMenu(null)}
+        >
+          <div onClick={handleRename}>✏️ Rename</div>
+          <div onClick={handleDelete}>🗑 Delete</div>
+          <div onClick={downloadFile}>📥 Download</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// =======================================================
+// Tree Renderer UI
+// =======================================================
+function renderTree(node, setActivePath, setContextMenu, depth = 0) {
+  return (
+    <div key={node.name} style={{ paddingLeft: depth * 10 }}>
+      <div
+        className={`tree-item ${node.type}`}
+        onClick={() => node.type === "file" && setActivePath(node.path)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu({ x: e.pageX, y: e.pageY, file: node.path });
+        }}
+      >
+        {node.type === "folder" ? "📁" : "📄"} {node.name}
       </div>
+      {node.children &&
+        node.children.map((child) =>
+          renderTree(child, setActivePath, setContextMenu, depth + 1)
+        )}
     </div>
   );
 }

src/fileStore.js

@@ -0,0 +1,125 @@
+// fileStore.js
+
+const STORAGE_KEY = "devmate_ide_tree";
+
+// Default starter tree
+const defaultTree = {
+  type: "folder",
+  name: "root",
+  path: "",
+  children: [
+    {
+      type: "file",
+      name: "main.py",
+      path: "main.py",
+      content: "# Python\nprint('Hello from IDE')",
+    },
+    {
+      type: "file",
+      name: "script.js",
+      path: "script.js",
+      content: "console.log('Hello from JS');",
+    },
+  ],
+};
+
+// ============ HELPERS ============
+
+export function loadTree() {
+  try {
+    const data = localStorage.getItem(STORAGE_KEY);
+    return data ? JSON.parse(data) : defaultTree;
+  } catch {
+    return defaultTree;
+  }
+}
+
+export function saveTree(tree) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(tree));
+}
+
+export function getNodeByPath(node, path) {
+  if (!path) return null;
+  if (node.path === path) return node;
+  if (!node.children) return null;
+  for (let c of node.children) {
+    const result = getNodeByPath(c, path);
+    if (result) return result;
+  }
+  return null;
+}
+
+function buildPath(parent, name) {
+  return parent.path ? `${parent.path}/${name}` : name;
+}
+
+// ============ ADD ============
+
+export function addFile(tree, name) {
+  const newTree = JSON.parse(JSON.stringify(tree));
+  newTree.children.push({
+    type: "file",
+    name,
+    path: name,
+    content: `// ${name}`,
+  });
+  return newTree;
+}
+
+export function addFolder(tree, name) {
+  const newTree = JSON.parse(JSON.stringify(tree));
+  newTree.children.push({
+    type: "folder",
+    name,
+    path: name,
+    children: [],
+  });
+  return newTree;
+}
+
+// ============ DELETE ============
+
+export function deleteNode(tree, path) {
+  const clone = JSON.parse(JSON.stringify(tree));
+  clone.children = clone.children.filter((c) => c.path !== path);
+  return clone;
+}
+
+// ============ RENAME ============
+
+export function renameNode(tree, path, newName) {
+  const clone = JSON.parse(JSON.stringify(tree));
+  function renameRec(node) {
+    if (node.path === path) {
+      node.name = newName;
+      node.path = newName;
+    }
+    node.children?.forEach(renameRec);
+  }
+  renameRec(clone);
+  return clone;
+}
+
+// ============ UPDATE CONTENT ============
+
+export function updateFileContent(tree, path, content) {
+  const clone = JSON.parse(JSON.stringify(tree));
+  function update(node) {
+    if (node.path === path && node.type === "file") {
+      node.content = content;
+    }
+    node.children?.forEach(update);
+  }
+  update(clone);
+  return clone;
+}
+
+// ============ SEARCH ============
+
+export function searchTree(node, term, result = []) {
+  if (node.type === "file" && node.content?.includes(term)) {
+    result.push({ file: node.name, path: node.path });
+  }
+  node.children?.forEach((c) => searchTree(c, term, result));
+  return result;
+}

src/problemParser.js

@@ -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

@@ -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();
+}