commit initial 09-12-2025 013

src/App.css

@@ -545,4 +545,99 @@
   border-radius: 4px;
   max-height: 120px;
   overflow-y: auto;
-}
+}
+
+/* Ensure body is flex row: left tree, center editor, right AI */
+.ide-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Center main area already exists, ensure it flexes */
+.ide-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* Editor wrapper to fill center */
+.ide-editor-wrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Right AI panel */
+.ide-right-panel {
+  width: 280px;
+  border-left: 1px solid #444;
+  background: #252526;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.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;
+}
+
+.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;
+}
+
+.ide-ai-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.ide-ai-buttons button {
+  flex: 1;
+  padding: 4px 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid #555;
+  background: #0e639c;
+  color: #fff;
+  cursor: pointer;
+}
+
+.ide-ai-buttons button:hover {
+  background: #1177bb;
+}
+
+.ide-explain {
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 6px;
+  border-radius: 4px;
+  background: #1e1e1e;
+  border: 1px solid #444;
+  font-size: 12px;
+}

src/App.js

@@ -2,7 +2,17 @@ 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 {
+  loadTree,
+  saveTree,
+  addFile,
+  addFolder,
+  renameNode,
+  deleteNode,
+  getNodeByPath,
+  updateFileContent,
+  searchTree,
+} from "./fileStore";
 import { downloadProjectZip } from "./zipExport";
 import { parseProblems } from "./problemParser";
 import "./App.css";
@@ -40,9 +50,8 @@ function App() {
 
   const currentFile = getNodeByPath(tree, activePath);
   const langMeta =
-    LANGUAGE_OPTIONS.find((l) =>
-      currentFile?.name.endsWith(l.ext)
-    ) || LANGUAGE_OPTIONS[0];
+    LANGUAGE_OPTIONS.find((l) => currentFile?.name.endsWith(l.ext)) ||
+    LANGUAGE_OPTIONS[0];
 
   // Save after tree change
   useEffect(() => {
@@ -78,7 +87,9 @@ function App() {
 
   const downloadFile = () => {
     if (!currentFile?.content) return;
-    const blob = new Blob([currentFile.content], { type: "text/plain;charset=utf-8" });
+    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;
@@ -102,38 +113,40 @@ function App() {
 
   // =================== AI ===================
   const handleAskFix = async () => {
-  const userHint = prompt.trim() ? `User request: ${prompt}` : "";
-  const reply = await askAgent(
-    `Improve, debug, or refactor this ${langMeta.id} file. 
+    if (!currentFile) return;
+    const userHint = prompt.trim() ? `User request: ${prompt}` : "";
+    const reply = await askAgent(
+      `Improve, debug, or refactor this ${langMeta.id} file.
 ${userHint}
 Return ONLY updated code, no explanation.
 
 CODE:
 ${currentFile.content}`
-  );
-  updateActiveFileContent(reply);
-};
-
+    );
+    updateActiveFileContent(reply);
+  };
 
   const handleExplainSelection = async () => {
-  const editor = editorRef.current;
-  const selected = editor.getModel().getValueInRange(editor.getSelection());
-  const code = selected.trim() || currentFile.content;
+    if (!currentFile) return;
+    const editor = editorRef.current;
+    const selected = editor
+      .getModel()
+      .getValueInRange(editor.getSelection());
+    const code = selected.trim() || currentFile.content;
 
-  const userHint = prompt.trim()
-    ? `Focus on: ${prompt}`
-    : "Give a clear and simple explanation.";
+    const userHint = prompt.trim()
+      ? `Focus on: ${prompt}`
+      : "Give a clear and simple explanation.";
 
-  const reply = await askAgent(
-    `Explain what this ${langMeta.id} code does, any risks, and improvements. 
+    const reply = await askAgent(
+      `Explain what this ${langMeta.id} code does, any risks, and improvements.
 ${userHint}
 
 CODE:
 ${code}`
-  );
-  setExplanation(reply);
-};
-
+    );
+    setExplanation(reply);
+  };
 
   const updateActiveFileContent = (value) => {
     const updated = updateFileContent(tree, activePath, value);
@@ -142,7 +155,7 @@ ${code}`
 
   // ===== AI Autocomplete Suggestions (Popup) =====
   const fetchAiSuggestions = async (code) => {
-    if (!code.trim()) return;
+    if (!code?.trim()) return;
     const reply = await askAgent(
       `Suggest possible next lines for continuation. Return 3 short snippets.\n${code}`
     );
@@ -165,7 +178,11 @@ ${code}`
 
   // =================== UI ===================
   return (
-    <div className={`ide-root ${theme === "vs-dark" ? "ide-dark" : "ide-light"}`}>
+    <div
+      className={`ide-root ${
+        theme === "vs-dark" ? "ide-dark" : "ide-light"
+      }`}
+    >
       {/* ==== TOP BAR ==== */}
       <div className="ide-menubar">
         <div className="ide-menubar-left">
@@ -183,7 +200,11 @@ ${code}`
           <button onClick={handleRun}>▶ Run</button>
           <button onClick={handleAskFix}>🤖 Fix</button>
           <button onClick={handleExplainSelection}>📖 Explain</button>
-          <button onClick={() => setTheme(theme === "vs-dark" ? "light" : "vs-dark")}>
+          <button
+            onClick={() =>
+              setTheme(theme === "vs-dark" ? "light" : "vs-dark")
+            }
+          >
             {theme === "vs-dark" ? "☀️" : "🌙"}
           </button>
         </div>
@@ -191,23 +212,24 @@ ${code}`
 
       {/* ==== BODY ==== */}
       <div className="ide-body">
-
-        {/* ==== TREE VIEW ==== */}
+        {/* ==== TREE VIEW (LEFT) ==== */}
         <div className="ide-sidebar">
           {renderTree(tree, setActivePath, setContextMenu)}
         </div>
 
-        {/* ==== EDITOR ==== */}
+        {/* ==== MAIN CENTER (EDITOR + OUTPUT) ==== */}
         <div className="ide-main">
-          <Editor
-            height="100%"
-            theme={theme}
-            language={langMeta.monaco}
-            value={currentFile?.content || ""}
-            onChange={updateActiveFileContent}
-            onMount={(editor) => (editorRef.current = editor)}
-            onBlur={() => fetchAiSuggestions(currentFile?.content)}
-          />
+          <div className="ide-editor-wrapper">
+            <Editor
+              height="100%"
+              theme={theme}
+              language={langMeta.monaco}
+              value={currentFile?.content || ""}
+              onChange={updateActiveFileContent}
+              onMount={(editor) => (editorRef.current = editor)}
+              onBlur={() => fetchAiSuggestions(currentFile?.content)}
+            />
+          </div>
 
           {/* AI Suggestions Tooltip */}
           {aiSuggestions.length > 0 && (
@@ -216,7 +238,11 @@ ${code}`
                 <div
                   key={i}
                   className="ai-suggest"
-                  onClick={() => updateActiveFileContent(currentFile.content + "\n" + s)}
+                  onClick={() =>
+                    updateActiveFileContent(
+                      (currentFile?.content || "") + "\n" + s
+                    )
+                  }
                 >
                   {s}
                 </div>
@@ -224,7 +250,7 @@ ${code}`
             </div>
           )}
 
-          {/* Bottom Panels */}
+          {/* Bottom Panels: Output + stdin + Problems */}
           <div className="ide-panels">
             <pre className="ide-output">{output}</pre>
 
@@ -235,29 +261,44 @@ ${code}`
               onChange={(e) => setStdin(e.target.value)}
             />
 
-           {/* NEW AI PROMPT INPUT */}
-  <textarea
-    className="ide-agent-textarea"
-    placeholder="Ask the AI (e.g., 'optimize', 'add docstring', 'convert to JS'...)"
-    value={prompt}
-    onChange={(e) => setPrompt(e.target.value)}
-  />
-
-  {/* EXPLANATION PANEL */}
-  {explanation && (
-    <div className="ide-explain">{explanation}</div>
-  )}
-
-  {/* PROBLEMS PANEL */}
-  {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>
-  )}
+            {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>
+
+        {/* ==== RIGHT AI PANEL ==== */}
+        <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 (e.g., 'optimize this function', 'add comments', 'convert to JS'...)"
+              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>
           </div>
+
+          {explanation && (
+            <div className="ide-ai-section">
+              <label className="ide-ai-label">Explanation</label>
+              <div className="ide-explain">{explanation}</div>
+            </div>
+          )}
         </div>
       </div>