commit initial 09-12-2025 011

src/App.css

@@ -522,4 +522,27 @@
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(5px); }
   to { opacity: 1; transform: translateY(0); }
+}
+
+.ide-agent-textarea {
+  width: 100%;
+  height: 70px;
+  margin-top: 6px;
+  padding: 6px;
+  background: #111;
+  border: 1px solid #444;
+  color: #fff;
+  font-family: Consolas, monospace;
+  resize: vertical;
+  border-radius: 4px;
+}
+.ide-explain {
+  margin-top: 6px;
+  padding: 6px;
+  background: #222;
+  border: 1px solid #444;
+  color: #fff;
+  border-radius: 4px;
+  max-height: 120px;
+  overflow-y: auto;
 }

src/App.js

@@ -102,21 +102,38 @@ function App() {
 
   // =================== 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 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);
+};
+
+
+ const handleExplainSelection = async () => {
+  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 reply = await askAgent(
+    `Explain what this ${langMeta.id} code does, any risks, and improvements. 
+${userHint}
+
+CODE:
+${code}`
+  );
+  setExplanation(reply);
+};
 
-  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 updateActiveFileContent = (value) => {
     const updated = updateFileContent(tree, activePath, value);
@@ -208,31 +225,42 @@ function App() {
           )}
 
           {/* Bottom Panels */}
-          <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)}
-            />
-
-            {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>
+<div className="ide-panels">
+
+  {/* OUTPUT WINDOW */}
+  <pre className="ide-output">{output}</pre>
+
+  {/* STDIN INPUT */}
+  <input
+    className="ide-input-box"
+    placeholder="Program input..."
+    value={stdin}
+    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>
+  )}
+</div>
 
       {/* ==== SEARCH PANEL ==== */}
       {searchOpen && (