commit initial 09-12-2025 017

src/App.css

@@ -406,3 +406,46 @@
     width: auto;
   }
 }
+
+
+/* ---------- progress bar under menubar ---------- */
+.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); }
+}

src/App.js

@@ -49,6 +49,11 @@ function App() {
   const editorRef = useRef(null);
   const fileInputRef = useRef(null);
 
+  // NEW: loading states
+  const [isRunning, setIsRunning] = useState(false);
+  const [isFixing, setIsFixing] = useState(false);
+  const [isExplaining, setIsExplaining] = useState(false);
+
   // Always persist tree on change
   useEffect(() => {
     saveTree(tree);
@@ -69,8 +74,6 @@ function App() {
   };
 
   // ---------- File / Folder actions ----------
-
-  // Create a new file inside selected folder (or root)
   const handleNewFile = () => {
     const filename = window.prompt("Filename (with extension):", "untitled.js");
     if (!filename) return;
@@ -84,7 +87,6 @@ function App() {
       parentPath = parts.join("/");
     }
 
-    // Offer user to choose another parent folder
     const folders = collectFolderPaths(tree);
     const suggestion = parentPath || folders[0] || "";
     const chosen = window.prompt(
@@ -96,12 +98,10 @@ function App() {
     const updated = addFile(tree, filename, targetParent);
     setTree(updated);
 
-    // Set active to newly created file
     const newPath = (targetParent ? targetParent + "/" : "") + filename;
     setActivePath(newPath);
   };
 
-  // Create a folder under selected folder or root
   const handleNewFolder = () => {
     const name = window.prompt("Folder name:", "new_folder");
     if (!name) return;
@@ -111,7 +111,6 @@ function App() {
     setTree(updated);
   };
 
-  // Rename selected node (file or folder)
   const handleRename = () => {
     if (!activePath) return;
     const node = getNodeByPath(tree, activePath);
@@ -121,7 +120,6 @@ function App() {
     const updated = renameNode(tree, activePath, newName);
     setTree(updated);
 
-    // compute new activePath (preserve parent)
     const parts = activePath.split("/");
     parts.pop();
     const parent = parts.join("/");
@@ -129,7 +127,6 @@ function App() {
     setActivePath(newPath);
   };
 
-  // Delete selected node (confirm if folder not empty)
   const handleDelete = () => {
     if (!activePath) return;
     const node = getNodeByPath(tree, activePath);
@@ -145,10 +142,9 @@ function App() {
 
     const updated = deleteNode(tree, activePath);
     setTree(updated);
-    setActivePath(""); // deselect / fallback
+    setActivePath("");
   };
 
-  // Download single file
   const downloadFile = () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") return;
@@ -167,16 +163,11 @@ function App() {
     if (!f) return;
     const text = await f.text();
 
-    // decide parent folder
     const selected = getNodeByPath(tree, activePath);
     let parentPath = "";
-    if (selected?.type === "folder") parentPath = selected.path; // fallback
-    // (above line intentionally split to maintain code clarity)
-    // compute parent path correctly:
     if (selected?.type === "folder") parentPath = selected.path;
     else if (selected?.type === "file") parentPath = selected.path.split("/").slice(0, -1).join("");
 
-    // create file under parent and write content
     const updated = addFile(tree, f.name, parentPath);
     const newPath = (parentPath ? parentPath + "/" : "") + f.name;
     const finalTree = updateFileContent(updated, newPath, text);
@@ -185,8 +176,7 @@ function App() {
     e.target.value = "";
   };
 
-  // ---------- Run & Agent ----------
-
+  // ---------- Run & Agent (with progress flags) ----------
   const handleRun = async () => {
     const node = getNodeByPath(tree, activePath);
     if (!node || node.type !== "file") {
@@ -199,9 +189,18 @@ function App() {
       return;
     }
 
-    const res = await runCode(node.content, selectedLang, stdin);
-    setOutput(res.output || "");
-    setProblems(res.error ? parseProblems(res.output) : []);
+    setIsRunning(true);
+    setOutput(""); // clear previous
+    setProblems([]);
+    try {
+      const res = await runCode(node.content, selectedLang, stdin);
+      setOutput(res.output || "");
+      setProblems(res.error ? parseProblems(res.output) : []);
+    } catch (err) {
+      setOutput(String(err));
+    } finally {
+      setIsRunning(false);
+    }
   };
 
   const handleAskFix = async () => {
@@ -210,12 +209,19 @@ function App() {
       setOutput("Select a file to apply fix.");
       return;
     }
-    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);
+    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);
+    } catch (err) {
+      setOutput(String(err));
+    } finally {
+      setIsFixing(false);
+    }
   };
 
   const handleExplainSelection = async () => {
@@ -224,24 +230,35 @@ function App() {
       setExplanation("Select a file to explain.");
       return;
     }
-    const editor = editorRef.current;
-    let selectedCode = "";
+    setIsExplaining(true);
     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);
+      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 (simple)
   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()));
+    try {
+      const reply = await askAgent(`Suggest possible next lines for continuation. Return 3 short snippets.\n${code}`);
+      setAiSuggestions(reply.split("\n").filter((l) => l.trim()));
+    } catch {
+      // ignore suggestion errors
+    }
   };
 
   // ---------- Search ----------
@@ -261,7 +278,7 @@ function App() {
     setTree(updated);
   };
 
-  // ---------- Render Tree (moved inside component so it sees activePath) ----------
+  // ---------- Render Tree (inside component) ----------
   const renderTree = (node, depth = 0) => {
     const isActive = node.path === activePath;
     return (
@@ -280,60 +297,71 @@ function App() {
           <span className="ide-file-name">{node.name}</span>
         </div>
 
-        {node.children &&
-          node.children.map((c) => renderTree(c, depth + 1))}
+        {node.children && node.children.map((c) => renderTree(c, depth + 1))}
       </div>
     );
   };
 
+  // any loading?
+  const anyLoading = isRunning || isFixing || isExplaining;
+
   // ---------- JSX UI ----------
   return (
     <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}>
       {/* Hidden file input for import */}
-      <input
-        ref={fileInputRef}
-        id="file-import-input"
-        type="file"
-        style={{ display: "none" }}
-        onChange={handleFileInputChange}
-      />
+      <input ref={fileInputRef} id="file-import-input" type="file" style={{ display: "none" }} onChange={handleFileInputChange} />
 
       {/* Top menu */}
       <div className="ide-menubar">
         <div className="ide-menubar-left">
           <span className="ide-logo">⚙️ DevMate IDE</span>
 
-          <button onClick={handleNewFile}>📄 New File</button>
-          <button onClick={handleNewFolder}>📁 New Folder</button>
-          <button onClick={handleRename}>✏️ Rename</button>
-          <button onClick={handleDelete}>🗑 Delete</button>
-          <button onClick={downloadFile}>📥 Download</button>
-          <button onClick={() => downloadProjectZip()}>📦 ZIP</button>
-          <button onClick={handleImportFileClick}>📤 Import File</button>
+          <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}>🔍 Search</button>
-          <button onClick={handleRun}>▶ Run</button>
-          <button onClick={handleAskFix}>🤖 Fix</button>
-          <button onClick={handleExplainSelection}>📖 Explain</button>
-          <button onClick={() => setTheme((t) => (t === "vs-dark" ? "light" : "vs-dark"))}>
+          <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>
         </div>
       </div>
 
+      {/* Indeterminate progress bar under menubar when busy */}
+      {anyLoading && (
+        <div className="ide-progress-wrap">
+          <div className="ide-progress" />
+        </div>
+      )}
+
       {/* Body */}
       <div className="ide-body">
         {/* Sidebar */}
         <div className="ide-sidebar">
           <div className="ide-sidebar-header">
             <span>EXPLORER</span>
-            <button className="ide-icon-button" onClick={handleNewFile} title="New File">＋</button>
-          </div>
-          <div className="ide-file-list" style={{ padding: 6 }}>
-            {renderTree(tree)}
+            <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>
 
         {/* Main (editor + bottom panels) */}
@@ -359,15 +387,7 @@ function App() {
           {aiSuggestions.length > 0 && (
             <div className="ai-popup">
               {aiSuggestions.map((s, i) => (
-                <div
-                  key={i}
-                  className="ai-suggest"
-                  onClick={() =>
-                    updateActiveFileContent((currentNode?.content || "") + "\n" + s)
-                  }
-                >
-                  {s}
-                </div>
+                <div key={i} className="ai-suggest" onClick={() => updateActiveFileContent((currentNode?.content || "") + "\n" + s)}>{s}</div>
               ))}
             </div>
           )}
@@ -376,12 +396,7 @@ function App() {
           <div className="ide-panels">
             <pre className="ide-output">{output}</pre>
 
-            <input
-              className="ide-input-box"
-              placeholder="Program input..."
-              value={stdin}
-              onChange={(e) => setStdin(e.target.value)}
-            />
+            <input className="ide-input-box" placeholder="Program input..." value={stdin} onChange={(e) => setStdin(e.target.value)} />
 
             {problems.length > 0 && (
               <div className="ide-problems-panel">
@@ -402,17 +417,12 @@ function App() {
 
           <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)}
-            />
+            <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}>💡 Apply Fix</button>
-            <button onClick={handleExplainSelection}>📖 Explain Code</button>
+            <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 && (
@@ -427,45 +437,17 @@ function App() {
       {/* Search dialog */}
       {searchOpen && (
         <div className="search-dialog">
-          <input
-            placeholder="Search text..."
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
+          <input placeholder="Search text..." onChange={(e) => setSearchQuery(e.target.value)} />
           <button onClick={handleSearchNow}>Search</button>
         </div>
       )}
 
       {/* Context menu */}
       {contextMenu && (
-        <div
-          className="ide-context-menu"
-          style={{ top: contextMenu.y, left: contextMenu.x }}
-          onMouseLeave={() => setContextMenu(null)}
-        >
-          <div
-            onClick={() => {
-              setContextMenu(null);
-              handleRename();
-            }}
-          >
-            ✏️ Rename
-          </div>
-          <div
-            onClick={() => {
-              setContextMenu(null);
-              handleDelete();
-            }}
-          >
-            🗑 Delete
-          </div>
-          <div
-            onClick={() => {
-              setContextMenu(null);
-              downloadFile();
-            }}
-          >
-            📥 Download
-          </div>
+        <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>