commit initial 09-12-2025 001

package.json

@@ -3,12 +3,15 @@
   "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",
     "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"
   },

src/App.js

@@ -1,23 +1,65 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState } from "react";
+import Editor from "@monaco-editor/react";
+import { askAgent } from "./agent/assistant";
+import { runCode } from "./agent/runner";
 
 function App() {
+  const [code, setCode] = useState("# Python\nprint('Hello from IDE')");
+  const [output, setOutput] = useState("");
+  const [prompt, setPrompt] = useState("");
+
+  const handleRun = async () => {
+    const res = await runCode(code);
+    setOutput(res.output);
+  };
+
+  const handleAsk = async () => {
+    const reply = await askAgent(
+      `Improve or fix this code and return only the updated code.\n\n${prompt}`,
+      [{ role: "user", content: code }]
+    );
+    setCode(reply);
+  };
+
   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"
+    <div style={{ display: "flex", height: "100vh", background: "#111" }}>
+      <div style={{ flex: 3 }}>
+        <Editor
+          height="100vh"
+          theme="vs-dark"
+          defaultLanguage="python"
+          value={code}
+          onChange={setCode}
+          options={{ minimap: { enabled: true }, fontSize: 14 }}
+        />
+      </div>
+
+      <div style={{ flex: 1, padding: 16, color: "#fff" }}>
+        <h3>💻 Output</h3>
+        <pre
+          style={{
+            background: "#000",
+            padding: 8,
+            height: "40vh",
+            overflow: "auto",
+            borderRadius: 4,
+          }}
         >
-          Learn React
-        </a>
-      </header>
+          {output}
+        </pre>
+        <button onClick={handleRun}>▶ Run</button>
+
+        <h3 style={{ marginTop: 24 }}>🤖 Agent Prompt</h3>
+        <textarea
+          style={{ width: "100%", height: "20vh" }}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Explain, optimize, or add a feature..."
+        />
+        <button onClick={handleAsk} style={{ marginTop: 8 }}>
+          Ask Agent
+        </button>
+      </div>
     </div>
   );
 }

src/agent/assistant.js

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

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

@@ -0,0 +1,7 @@
+// src/agent/runner.js
+import { api } from "../apiClient";
+
+export async function runCode(code, filename = "main.py") {
+  const res = await api.post("/execute", { code, filename });
+  return res.data; // { output, error }
+}

src/apiClient.js

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