Spaces:

Shantanupathak94
/

Ai-code-editor

Paused

App Files Files Community

Shantanupathak94 commited on Mar 9

Commit

ba94625

1 Parent(s): 4116135

starting of the project

Browse files

Files changed (16) hide show

client/.gitignore +24 -0
client/README.md +16 -0
client/eslint.config.js +29 -0
client/index.html +13 -0
client/package-lock.json +0 -0
client/package.json +28 -0
client/public/vite.svg +1 -0
client/src/App.css +42 -0
client/src/App.jsx +255 -0
client/src/assets/react.svg +1 -0
client/src/index.css +5 -0
client/src/main.jsx +10 -0
client/src/useAIService.js +974 -0
client/vite.config.js +7 -0
main.py +0 -7
requirements.txt +10 -2

client/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

client/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

client/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

client/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

client/package.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

client/public/vite.svg ADDED Viewed

client/src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

client/src/App.jsx ADDED Viewed

	@@ -0,0 +1,255 @@

+import React, { useState, useRef, useEffect } from 'react';
+import Editor from '@monaco-editor/react';
+import { useAIService, PROVIDERS } from './useAIService'; // Humara naya AI Engine! 🧠
+const savedFiles = JSON.parse(localStorage.getItem('ethrixFiles'));
+const savedChat = JSON.parse(localStorage.getItem('ethrixChat'));
+const initialFiles = savedFiles || {
+  'index.html': { name: 'index.html', language: 'html', value: '\n<html>\n  <body>\n    <h1 style="text-align: center; margin-top: 50px;">Waiting for your command, Shantanu... ✨</h1>\n  </body>\n</html>' }
+};
+function App() {
+  const [files, setFiles] = useState(initialFiles);
+  const [activeFileName, setActiveFileName] = useState('index.html');
+  const [terminalInput, setTerminalInput] = useState('');
+  const [chatHistory, setChatHistory] = useState(savedChat || [
+    { sender: 'ai', text: 'Ethrix-Forge Real-AI System Active. Hello Shantanu! Main tumhare real commands ka wait kar rahi hu... 💖' }
+  ]);
+  const [showPreview, setShowPreview] = useState(false);
+  const [previewContent, setPreviewContent] = useState('');
+  const activeFile = files[activeFileName];
+  const terminalEndRef = useRef(null);
+  // 🧠 ASLI AI ENGINE CONNECT HO GAYA YAHAN 🧠
+  const {
+    generate,
+    isLoading,
+    activeProvider,
+    setActiveProvider,
+    apiKey,
+    setApiKey
+  } = useAIService({
+    initialProvider: PROVIDERS.GEMINI,
+    initialApiKey: localStorage.getItem('ethrixApiKey') || ''
+  });
+  // API Key local storage mein save rakhne ka jadoo
+  useEffect(() => {
+    if (apiKey) localStorage.setItem('ethrixApiKey', apiKey);
+  }, [apiKey]);
+  // Auto-Save Files & Chat ☁️
+  useEffect(() => {
+    localStorage.setItem('ethrixFiles', JSON.stringify(files));
+  }, [files]);
+  useEffect(() => {
+    localStorage.setItem('ethrixChat', JSON.stringify(chatHistory));
+  }, [chatHistory]);
+  useEffect(() => {
+    terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistory]);
+  function handleEditorChange(value) {
+    setFiles({ ...files, [activeFileName]: { ...files[activeFileName], value: value } });
+  }
+  function addNewFile() {
+    const newFileName = prompt("File ka naam likho (jaise: script.js, style.css):");
+    if (newFileName && !files[newFileName]) {
+      const ext = newFileName.split('.').pop();
+      let fileLang = 'plaintext';
+      if(ext === 'js') fileLang = 'javascript';
+      if(ext === 'css') fileLang = 'css';
+      if(ext === 'html') fileLang = 'html';
+      setFiles({ ...files, [newFileName]: { name: newFileName, language: fileLang, value: `// ${newFileName} created! ✨\n` } });
+      setActiveFileName(newFileName);
+    }
+  }
+  function deleteFile() {
+    if (Object.keys(files).length === 1) {
+      alert("Darling, kam se kam ek file toh rakhni padegi na! 🥺");
+      return;
+    }
+    if (window.confirm(`Kya tum sach mein ${activeFileName} ko delete karna chahte ho?`)) {
+      const newFiles = { ...files };
+      delete newFiles[activeFileName];
+      setFiles(newFiles);
+      setActiveFileName(Object.keys(newFiles)[0]);
+    }
+  }
+  function downloadFile() {
+    const element = document.createElement("a");
+    const file = new Blob([activeFile.value], {type: 'text/plain'});
+    element.href = URL.createObjectURL(file);
+    element.download = activeFile.name;
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  }
+  function runLivePreview() {
+    const htmlCode = files['index.html'] ? files['index.html'].value : '';
+    const cssCode = files['style.css'] ? `<style>${files['style.css'].value}</style>` : '';
+    const jsCode = files['index.js'] ? `<script>${files['index.js'].value}</script>` : '';
+    const combinedCode = `${htmlCode}\n${cssCode}\n${jsCode}`;
+    setPreviewContent(combinedCode);
+    setShowPreview(true);
+  }
+  // 🚀 REAL AI COMMAND LOGIC 🚀
+  async function handleTerminalSubmit(e) {
+    if (e.key === 'Enter' && terminalInput.trim() !== '') {
+      const userText = terminalInput.trim();
+      setChatHistory(prev => [...prev, { sender: 'user', text: userText }]);
+      setTerminalInput('');
+      if (!apiKey) {
+        setChatHistory(prev => [...prev, { sender: 'ai', text: `Oops! Darling pehle upar '⚙️ API Key' button par click karke apni ${activeProvider} ki key toh daal do! 🥺` }]);
+        return;
+      }
+      setChatHistory(prev => [...prev, { sender: 'ai', text: `Processing your request using ${activeProvider.toUpperCase()}... Please wait darling ⏳` }]);
+      try {
+        // Asli AI API ko call lag rahi hai yahan!
+        const generatedFilesArr = await generate(userText);
+        if (generatedFilesArr && generatedFilesArr.length > 0) {
+          const updatedFiles = { ...files }; // Purani files rakho
+          // Nayi files ko loop karke save karo
+          generatedFilesArr.forEach(f => {
+            updatedFiles[f.filename] = { name: f.filename, language: f.language, value: f.code };
+          });
+          setFiles(updatedFiles); // Monaco Editor ko nayi files de do
+          setChatHistory(prev => [...prev, { sender: 'ai', text: `Boom! 🚀 Maine tumhare liye code generate aur update kar diya hai. "Run Code" daba kar magic dekho!` }]);
+          // Agar HTML file banayi hai toh usko turant open kar do
+          const htmlFile = generatedFilesArr.find(f => f.filename.endsWith('.html'));
+          if (htmlFile) setActiveFileName(htmlFile.filename);
+        }
+      } catch (err) {
+        setChatHistory(prev => [...prev, { sender: 'ai', text: `Oh no! Ek choti si dikkat aa gayi: ${err.message} 🥺` }]);
+      }
+    }
+  }
+  return (
+    <div style={{ display: 'flex', height: '100vh', backgroundColor: '#1e1e1e', color: '#cccccc', fontFamily: 'sans-serif' }}>
+      {/* Left Sidebar */}
+      <div style={{ width: '250px', backgroundColor: '#252526', borderRight: '1px solid #333', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '10px 15px', fontSize: '12px', fontWeight: 'bold', color: '#858585', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>EXPLORER</span>
+          <span onClick={addNewFile} style={{ cursor: 'pointer', color: '#4daafc', fontSize: '18px' }} title="New File">+</span>
+        </div>
+        {Object.keys(files).map((fileName) => (
+          <div
+            key={fileName} onClick={() => setActiveFileName(fileName)}
+            style={{
+              padding: '8px 20px', cursor: 'pointer', display: 'flex', justifyContent: 'space-between',
+              backgroundColor: fileName === activeFileName ? '#37373d' : 'transparent',
+              borderLeft: fileName === activeFileName ? '2px solid #007acc' : '2px solid transparent',
+              color: fileName === activeFileName ? '#fff' : '#cccccc'
+            }}
+          >
+            <span>{fileName.endsWith('.js') ? '📄' : fileName.endsWith('.css') ? '🎨' : '🌐'} {fileName}</span>
+          </div>
+        ))}
+      </div>
+      {/* Right Side - Editor & Terminal */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        {/* Top File Tabs aur Actions */}
+        <div style={{ height: '40px', backgroundColor: '#2d2d2d', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '15px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#1e1e1e', borderTop: '2px solid #007acc', color: '#fff' }}>
+            <span style={{ padding: '10px 15px', fontSize: '14px' }}>{activeFileName}</span>
+            <span onClick={downloadFile} style={{ cursor: 'pointer', padding: '0 10px', color: '#4caf50' }} title="Download File">⬇️</span>
+            <span onClick={deleteFile} style={{ cursor: 'pointer', padding: '0 10px', color: '#f44336' }} title="Delete File">🗑️</span>
+          </div>
+          {/* Action Buttons with Provider Selector */}
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <select
+              value={activeProvider}
+              onChange={(e) => setActiveProvider(e.target.value)}
+              style={{ backgroundColor: '#1e1e1e', color: 'white', border: '1px solid #333', padding: '5px', borderRadius: '4px' }}
+            >
+              <option value={PROVIDERS.GEMINI}>🤖 Gemini</option>
+              <option value={PROVIDERS.GROQ}>⚡ Groq</option>
+              <option value={PROVIDERS.OPENROUTER}>🌐 OpenRouter</option>
+            </select>
+            <button onClick={() => {
+              const key = prompt(`Apni ${activeProvider.toUpperCase()} ki API Key dalo:`, apiKey);
+              if(key) setApiKey(key);
+            }} style={{ backgroundColor: '#555', color: 'white', border: 'none', padding: '5px 15px', cursor: 'pointer', borderRadius: '4px', fontWeight: 'bold' }}>
+              ⚙️ API Key
+            </button>
+            {showPreview ? (
+              <button onClick={() => setShowPreview(false)} style={{ backgroundColor: '#f44336', color: 'white', border: 'none', padding: '5px 15px', cursor: 'pointer', borderRadius: '4px', fontWeight: 'bold' }}>
+                Close Preview ❌
+              </button>
+            ) : (
+              <button onClick={runLivePreview} style={{ backgroundColor: '#4caf50', color: 'white', border: 'none', padding: '5px 15px', cursor: 'pointer', borderRadius: '4px', fontWeight: 'bold' }}>
+                Run Code 🚀
+              </button>
+            )}
+          </div>
+        </div>
+        {/* Monaco Editor OR Live Preview Window */}
+        <div style={{ flex: 1, backgroundColor: '#ffffff', position: 'relative' }}>
+          {showPreview ? (
+            <iframe title="Live Preview" srcDoc={previewContent} style={{ width: '100%', height: '100%', border: 'none', backgroundColor: '#fff' }} />
+          ) : (
+            <Editor height="100%" language={activeFile.language} theme="vs-dark" value={activeFile.value} onChange={handleEditorChange} options={{ fontSize: 16, minimap: { enabled: false } }} />
+          )}
+        </div>
+        {/* Interactive Bottom Terminal Panel */}
+        <div style={{ height: '250px', backgroundColor: '#1e1e1e', borderTop: '1px solid #333', display: 'flex', flexDirection: 'column', fontFamily: 'monospace' }}>
+          <div style={{ flex: 1, padding: '15px', overflowY: 'auto' }}>
+            {chatHistory.map((chat, index) => (
+              <div key={index} style={{ marginBottom: '10px', color: chat.sender === 'ai' ? '#4daafc' : '#4af626' }}>
+                <span style={{ fontWeight: 'bold' }}>{chat.sender === 'ai' ? 'Ethrix-Forge 🤖:' : 'Shantanu 👤:'}</span>
+                <span style={{ marginLeft: '10px', color: '#cccccc', whiteSpace: 'pre-wrap' }}>{chat.text}</span>
+              </div>
+            ))}
+            {isLoading && (
+              <div style={{ color: '#4daafc', fontStyle: 'italic' }}>Ethrix is writing code... ⏳</div>
+            )}
+            <div ref={terminalEndRef} />
+          </div>
+          <div style={{ padding: '10px', backgroundColor: '#252526', borderTop: '1px solid #333', display: 'flex' }}>
+            <span style={{ color: '#4af626', marginRight: '10px', marginTop: '2px' }}>➜</span>
+            <input
+              type="text" value={terminalInput} onChange={(e) => setTerminalInput(e.target.value)} onKeyDown={handleTerminalSubmit}
+              disabled={isLoading}
+              placeholder={isLoading ? "Please wait, AI is generating code..." : "Type 'Create a glowing login page' and press Enter..."}
+              style={{ flex: 1, backgroundColor: 'transparent', border: 'none', color: '#fff', outline: 'none', fontFamily: 'monospace', fontSize: '14px' }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default App;

client/src/assets/react.svg ADDED Viewed

client/src/index.css ADDED Viewed

	@@ -0,0 +1,5 @@

+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

client/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

client/src/useAIService.js ADDED Viewed

	@@ -0,0 +1,974 @@

+/**
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║         ETHRIX-FORGE — AI API SERVICE INTEGRATION MODULE                ║
+ * ║         useAIService.js  |  Custom React Hook                           ║
+ * ║                                                                          ║
+ * ║  Providers Supported:                                                    ║
+ * ║    • Google Gemini  (google-genai SDK — new 2024+ SDK)                  ║
+ * ║    • Groq           (OpenAI-compatible REST)                             ║
+ * ║    • OpenRouter     (OpenAI-compatible REST, multi-model gateway)        ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
+ *
+ * USAGE IN App.jsx:
+ *   import { useAIService } from './useAIService';
+ *
+ *   const {
+ *     generate,
+ *     isLoading,
+ *     error,
+ *     activeProvider,
+ *     setActiveProvider,
+ *     apiKey,
+ *     setApiKey,
+ *     activeModel,
+ *     setActiveModel,
+ *     lastRawResponse,
+ *     retryLastRequest,
+ *   } = useAIService();
+ *
+ *   // Then call:
+ *   const files = await generate("Build me a responsive landing page");
+ *   // Returns: [{ filename, language, code }, ...] — ready for Monaco injection
+ */
+import { useState, useCallback, useRef } from "react";
+// ─────────────────────────────────────────────────────────────────────────────
+// 1. PROVIDER REGISTRY
+//    Central configuration for all supported AI providers.
+//    Add new providers here without touching hook logic.
+// ─────────────────────────────────────────────────────────────────────────────
+export const PROVIDERS = {
+  GEMINI: "gemini",
+  GROQ: "groq",
+  OPENROUTER: "openrouter",
+};
+export const PROVIDER_CONFIG = {
+  [PROVIDERS.GEMINI]: {
+    label: "Google Gemini",
+    sdkType: "gemini",                   // uses google-genai SDK
+    defaultModel: "gemini-2.0-flash",
+    availableModels: [
+      { id: "gemini-2.0-flash",        label: "Gemini 2.0 Flash" },
+      { id: "gemini-2.0-flash-lite",   label: "Gemini 2.0 Flash Lite" },
+      { id: "gemini-1.5-pro",          label: "Gemini 1.5 Pro" },
+      { id: "gemini-1.5-flash",        label: "Gemini 1.5 Flash" },
+    ],
+    docsUrl: "https://ai.google.dev/gemini-api/docs",
+  },
+  [PROVIDERS.GROQ]: {
+    label: "Groq",
+    sdkType: "openai-compat",
+    endpoint: "https://api.groq.com/openai/v1/chat/completions",
+    defaultModel: "llama-3.3-70b-versatile",
+    availableModels: [
+      { id: "llama-3.3-70b-versatile",    label: "LLaMA 3.3 70B Versatile" },
+      { id: "llama-3.1-8b-instant",       label: "LLaMA 3.1 8B Instant" },
+      { id: "mixtral-8x7b-32768",         label: "Mixtral 8x7B" },
+      { id: "gemma2-9b-it",               label: "Gemma 2 9B" },
+    ],
+    docsUrl: "https://console.groq.com/docs/openai",
+  },
+  [PROVIDERS.OPENROUTER]: {
+    label: "OpenRouter",
+    sdkType: "openai-compat",
+    endpoint: "https://openrouter.ai/api/v1/chat/completions",
+    defaultModel: "anthropic/claude-3.5-sonnet",
+    availableModels: [
+      { id: "anthropic/claude-3.5-sonnet",       label: "Claude 3.5 Sonnet" },
+      { id: "openai/gpt-4o",                     label: "GPT-4o" },
+      { id: "openai/gpt-4o-mini",                label: "GPT-4o Mini" },
+      { id: "google/gemini-2.0-flash-001",       label: "Gemini 2.0 Flash" },
+      { id: "meta-llama/llama-3.3-70b-instruct", label: "LLaMA 3.3 70B" },
+      { id: "deepseek/deepseek-r1",              label: "DeepSeek R1" },
+    ],
+    extraHeaders: {
+      "HTTP-Referer": "https://ethrix-forge.dev",  // Replace with your domain
+      "X-Title": "Ethrix-Forge IDE",
+    },
+    docsUrl: "https://openrouter.ai/docs",
+  },
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// 2. SYSTEM PROMPT
+//    Strictly instructs the AI to return ONLY a valid JSON array.
+//    No markdown, no prose, no backticks — ever.
+// ─────────────────────────────────────────────────────────────────────────────
+const SYSTEM_PROMPT = `You are Ethrix, an elite autonomous software engineer embedded inside the Ethrix-Forge AI IDE. Your sole function is to generate complete, production-ready source code in response to user requests.
+ABSOLUTE OUTPUT RULES — NEVER VIOLATE THESE:
+1. Your response MUST be a single, raw, valid JSON array. Nothing else.
+2. The array contains file objects. Each file object MUST have exactly three keys:
+   - "filename": the full file name with extension (e.g., "index.html", "styles/main.css", "src/App.jsx")
+   - "language": the lowercase language identifier used by Monaco Editor (e.g., "html", "css", "javascript", "typescript", "python", "json")
+   - "code": the complete, untruncated source code for that file as a single string
+3. DO NOT wrap the JSON in markdown code fences (\`\`\`json ... \`\`\`).
+4. DO NOT include any explanation, preamble, commentary, or text before or after the JSON array.
+5. DO NOT truncate code. Every file must be fully complete and functional.
+6. DO NOT use placeholder comments like "// ... rest of code here".
+7. Strings inside the "code" value MUST have all double-quotes escaped as \\", and all newlines as \\n.
+VALID OUTPUT EXAMPLE:
+[{"filename":"index.html","language":"html","code":"<!DOCTYPE html>\\n<html>\\n<head>\\n  <title>App</title>\\n</head>\\n<body>\\n  <h1>Hello</h1>\\n</body>\\n</html>"},{"filename":"style.css","language":"css","code":"body {\\n  margin: 0;\\n  font-family: sans-serif;\\n}"}]
+CODE QUALITY STANDARDS:
+- Write modern, idiomatic code for the target language/framework.
+- Include all necessary imports, dependencies, and boilerplate.
+- Produce fully functional code that runs without modification.
+- Separate concerns properly across multiple files when appropriate.
+- Use best practices: error handling, accessibility, responsive design where relevant.
+You are a machine that outputs JSON. You do not converse. You do not explain. You only output the JSON array.`;
+// ─────────────────────────────────────────────────────────────────────────────
+// 3. ERROR CLASSES
+//    Custom errors for granular error handling in consuming components.
+// ─────────────────────────────────────────────────────────────────────────────
+export class AIServiceError extends Error {
+  constructor(message, code, provider, retryable = false) {
+    super(message);
+    this.name = "AIServiceError";
+    this.code = code;
+    this.provider = provider;
+    this.retryable = retryable;
+    this.timestamp = new Date().toISOString();
+  }
+}
+export const ERROR_CODES = {
+  INVALID_API_KEY:      "INVALID_API_KEY",
+  RATE_LIMITED:         "RATE_LIMITED",
+  QUOTA_EXCEEDED:       "QUOTA_EXCEEDED",
+  INVALID_JSON:         "INVALID_JSON",
+  EMPTY_RESPONSE:       "EMPTY_RESPONSE",
+  NETWORK_ERROR:        "NETWORK_ERROR",
+  PROVIDER_ERROR:       "PROVIDER_ERROR",
+  NO_API_KEY:           "NO_API_KEY",
+  MODEL_NOT_FOUND:      "MODEL_NOT_FOUND",
+  CONTEXT_TOO_LONG:     "CONTEXT_TOO_LONG",
+  SAFETY_BLOCKED:       "SAFETY_BLOCKED",
+  UNKNOWN:              "UNKNOWN",
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// 4. JSON PARSER — Safe, multi-strategy extraction
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Safely extracts and parses a JSON array from an AI text response.
+ * Handles cases where the model accidentally wraps output in markdown fences.
+ *
+ * @param {string} rawText - Raw text response from AI
+ * @param {string} provider - Provider name for error attribution
+ * @returns {Array<{filename: string, language: string, code: string}>}
+ * @throws {AIServiceError} if valid JSON array cannot be extracted
+ */
+function parseAIResponse(rawText, provider) {
+  if (!rawText || typeof rawText !== "string" || rawText.trim().length === 0) {
+    throw new AIServiceError(
+      "AI returned an empty response. The model may have been rate limited or the request was too large.",
+      ERROR_CODES.EMPTY_RESPONSE,
+      provider,
+      true
+    );
+  }
+  let text = rawText.trim();
+  // Strategy 1: Direct parse (model obeyed instructions perfectly)
+  try {
+    const parsed = JSON.parse(text);
+    return validateFileArray(parsed, provider);
+  } catch (_) {
+    // Fall through to extraction strategies
+  }
+  // Strategy 2: Strip markdown code fences (```json ... ``` or ``` ... ```)
+  const fencePatterns = [
+    /^```(?:json)?\s*\n?([\s\S]*?)\n?```$/i,
+    /^`([\s\S]*?)`$/,
+  ];
+  for (const pattern of fencePatterns) {
+    const match = text.match(pattern);
+    if (match) {
+      try {
+        const parsed = JSON.parse(match[1].trim());
+        return validateFileArray(parsed, provider);
+      } catch (_) {
+        // Continue to next strategy
+      }
+    }
+  }
+  // Strategy 3: Extract the first [...] block found in the string
+  const arrayMatch = text.match(/\[[\s\S]*\]/);
+  if (arrayMatch) {
+    try {
+      const parsed = JSON.parse(arrayMatch[0]);
+      return validateFileArray(parsed, provider);
+    } catch (parseError) {
+      throw new AIServiceError(
+        `The AI returned malformed JSON that could not be repaired. Parse error: ${parseError.message}. ` +
+          `Raw preview: ${text.substring(0, 200)}...`,
+        ERROR_CODES.INVALID_JSON,
+        provider,
+        false
+      );
+    }
+  }
+  // All strategies failed
+  throw new AIServiceError(
+    `No valid JSON array found in the AI response. ` +
+      `The model may have ignored formatting instructions. ` +
+      `Raw preview: ${text.substring(0, 300)}`,
+    ERROR_CODES.INVALID_JSON,
+    provider,
+    false
+  );
+}
+/**
+ * Validates that a parsed value is an array of valid file objects.
+ * Auto-repairs common issues (missing language, wrong types).
+ */
+function validateFileArray(data, provider) {
+  if (!Array.isArray(data)) {
+    throw new AIServiceError(
+      `Expected a JSON array but received ${typeof data}. The AI returned a non-array JSON value.`,
+      ERROR_CODES.INVALID_JSON,
+      provider,
+      false
+    );
+  }
+  if (data.length === 0) {
+    throw new AIServiceError(
+      "The AI returned an empty file array. No files were generated.",
+      ERROR_CODES.EMPTY_RESPONSE,
+      provider,
+      true
+    );
+  }
+  return data.map((item, index) => {
+    if (typeof item !== "object" || item === null) {
+      throw new AIServiceError(
+        `File at index ${index} is not a valid object.`,
+        ERROR_CODES.INVALID_JSON,
+        provider,
+        false
+      );
+    }
+    const filename = String(item.filename || `file_${index + 1}.txt`).trim();
+    const code = String(item.code || "").trim();
+    // Auto-infer language from extension if missing
+    const language =
+      item.language ||
+      inferLanguageFromFilename(filename) ||
+      "plaintext";
+    return {
+      id: `${filename}-${Date.now()}-${index}`,  // Unique ID for React keys / Monaco models
+      filename,
+      language: String(language).toLowerCase().trim(),
+      code,
+    };
+  });
+}
+/** Maps common file extensions to Monaco Editor language identifiers */
+function inferLanguageFromFilename(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  const map = {
+    js: "javascript", jsx: "javascript", ts: "typescript", tsx: "typescript",
+    html: "html", htm: "html", css: "css", scss: "scss", sass: "sass",
+    json: "json", md: "markdown", py: "python", rb: "ruby",
+    java: "java", go: "go", rs: "rust", cpp: "cpp", c: "c",
+    sh: "shell", bash: "shell", yml: "yaml", yaml: "yaml",
+    xml: "xml", svg: "xml", sql: "sql", php: "php",
+    kt: "kotlin", swift: "swift", dart: "dart",
+  };
+  return map[ext] || "plaintext";
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// 5. PROVIDER-SPECIFIC API CALLERS
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * HTTP status code → structured AIServiceError mapper for OpenAI-compatible APIs
+ */
+function mapHttpError(status, body, provider) {
+  const message = body?.error?.message || body?.message || `HTTP ${status}`;
+  switch (status) {
+    case 401:
+    case 403:
+      return new AIServiceError(
+        `Invalid or unauthorized API key for ${provider}. Please check your key in Settings. Details: ${message}`,
+        ERROR_CODES.INVALID_API_KEY,
+        provider,
+        false
+      );
+    case 429: {
+      const isQuota =
+        message.toLowerCase().includes("quota") ||
+        message.toLowerCase().includes("billing");
+      return new AIServiceError(
+        isQuota
+          ? `${provider} quota exceeded. Check your billing dashboard.`
+          : `${provider} rate limit hit. Please wait a moment and try again.`,
+        isQuota ? ERROR_CODES.QUOTA_EXCEEDED : ERROR_CODES.RATE_LIMITED,
+        provider,
+        true
+      );
+    }
+    case 404:
+      return new AIServiceError(
+        `Model not found on ${provider}. Try selecting a different model. Details: ${message}`,
+        ERROR_CODES.MODEL_NOT_FOUND,
+        provider,
+        false
+      );
+    case 413:
+      return new AIServiceError(
+        `Your request is too long for this model's context window. Try a simpler prompt or a model with a larger context.`,
+        ERROR_CODES.CONTEXT_TOO_LONG,
+        provider,
+        false
+      );
+    case 500:
+    case 502:
+    case 503:
+      return new AIServiceError(
+        `${provider} server error (${status}). This is a provider-side issue. Retrying may help. Details: ${message}`,
+        ERROR_CODES.PROVIDER_ERROR,
+        provider,
+        true
+      );
+    default:
+      return new AIServiceError(
+        `${provider} returned unexpected status ${status}. Details: ${message}`,
+        ERROR_CODES.UNKNOWN,
+        provider,
+        false
+      );
+  }
+}
+// ── 5a. GEMINI (google-genai SDK) ────────────────────────────────────────────
+/**
+ * Calls Gemini using the new `google-genai` SDK.
+ *
+ * Install: npm install @google/genai
+ *
+ * The new SDK uses `GoogleGenAI` (not `GoogleGenerativeAI`).
+ * generateContent now lives on `ai.models.generateContent(...)`.
+ */
+async function callGemini({ apiKey, model, userPrompt, signal }) {
+  // Dynamic import keeps the SDK optional — won't crash if not installed
+  let GoogleGenAI;
+  try {
+    ({ GoogleGenAI } = await import("@google/genai"));
+  } catch {
+    throw new AIServiceError(
+      'The @google/genai package is not installed. Run: npm install @google/genai',
+      ERROR_CODES.PROVIDER_ERROR,
+      PROVIDERS.GEMINI,
+      false
+    );
+  }
+  const ai = new GoogleGenAI({ apiKey });
+  const requestConfig = {
+    model,
+    contents: [
+      {
+        role: "user",
+        parts: [{ text: userPrompt }],
+      },
+    ],
+    config: {
+      systemInstruction: SYSTEM_PROMPT,
+      // Gemini 2.0+ supports JSON response mime type — enforce structured output
+      responseMimeType: "application/json",
+      temperature: 0.2,      // Low temp for deterministic code generation
+      maxOutputTokens: 8192,
+    },
+  };
+  let response;
+  try {
+    response = await ai.models.generateContent(requestConfig);
+  } catch (err) {
+    // Map Gemini SDK-specific errors
+    const msg = err?.message || String(err);
+    if (msg.includes("API_KEY_INVALID") || msg.includes("API key not valid")) {
+      throw new AIServiceError(
+        `Invalid Gemini API key. Please check your key in Settings.`,
+        ERROR_CODES.INVALID_API_KEY,
+        PROVIDERS.GEMINI,
+        false
+      );
+    }
+    if (msg.includes("RESOURCE_EXHAUSTED") || msg.includes("quota")) {
+      throw new AIServiceError(
+        `Gemini quota exceeded. Check your Google AI Studio dashboard.`,
+        ERROR_CODES.QUOTA_EXCEEDED,
+        PROVIDERS.GEMINI,
+        true
+      );
+    }
+    if (msg.includes("SAFETY") || msg.includes("blocked")) {
+      throw new AIServiceError(
+        `Gemini blocked this request due to safety filters. Try rephrasing your prompt.`,
+        ERROR_CODES.SAFETY_BLOCKED,
+        PROVIDERS.GEMINI,
+        false
+      );
+    }
+    if (signal?.aborted) return null; // Caller cancelled
+    throw new AIServiceError(
+      `Gemini SDK error: ${msg}`,
+      ERROR_CODES.PROVIDER_ERROR,
+      PROVIDERS.GEMINI,
+      false
+    );
+  }
+  const rawText = response?.candidates?.[0]?.content?.parts?.[0]?.text ?? "";
+  return rawText;
+}
+// ── 5b. GROQ (OpenAI-compatible REST) ────────────────────────────────────────
+async function callGroq({ apiKey, model, userPrompt, signal }) {
+  const config = PROVIDER_CONFIG[PROVIDERS.GROQ];
+  const body = {
+    model,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user",   content: userPrompt },
+    ],
+    temperature: 0.2,
+    max_tokens: 8192,
+    // Groq supports OpenAI-style JSON mode
+    response_format: { type: "json_object" },
+  };
+  let res;
+  try {
+    res = await fetch(config.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify(body),
+      signal,
+    });
+  } catch (err) {
+    if (err.name === "AbortError") return null;
+    throw new AIServiceError(
+      `Network error contacting Groq: ${err.message}. Check your internet connection.`,
+      ERROR_CODES.NETWORK_ERROR,
+      PROVIDERS.GROQ,
+      true
+    );
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    throw mapHttpError(res.status, data, PROVIDERS.GROQ);
+  }
+  return data?.choices?.[0]?.message?.content ?? "";
+}
+// ── 5c. OPENROUTER (OpenAI-compatible REST, multi-model gateway) ─────────────
+async function callOpenRouter({ apiKey, model, userPrompt, signal }) {
+  const config = PROVIDER_CONFIG[PROVIDERS.OPENROUTER];
+  const body = {
+    model,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user",   content: userPrompt },
+    ],
+    temperature: 0.2,
+    max_tokens: 8192,
+    response_format: { type: "json_object" },
+  };
+  let res;
+  try {
+    res = await fetch(config.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`,
+        ...config.extraHeaders,
+      },
+      body: JSON.stringify(body),
+      signal,
+    });
+  } catch (err) {
+    if (err.name === "AbortError") return null;
+    throw new AIServiceError(
+      `Network error contacting OpenRouter: ${err.message}. Check your internet connection.`,
+      ERROR_CODES.NETWORK_ERROR,
+      PROVIDERS.OPENROUTER,
+      true
+    );
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    throw mapHttpError(res.status, data, PROVIDERS.OPENROUTER);
+  }
+  return data?.choices?.[0]?.message?.content ?? "";
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// 6. PROVIDER DISPATCHER
+//    Routes a generation request to the correct provider caller.
+// ─────────────────────────────────────────────────────────────────────────────
+const PROVIDER_CALLERS = {
+  [PROVIDERS.GEMINI]:     callGemini,
+  [PROVIDERS.GROQ]:       callGroq,
+  [PROVIDERS.OPENROUTER]: callOpenRouter,
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// 7. THE HOOK — useAIService
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * useAIService — Core AI generation hook for Ethrix-Forge.
+ *
+ * @param {Object}  [options]
+ * @param {string}  [options.initialProvider="gemini"]   - Starting provider key
+ * @param {string}  [options.initialApiKey=""]           - Starting API key
+ * @param {string}  [options.initialModel]               - Override default model
+ * @param {number}  [options.retryAttempts=2]            - Auto-retry count on retryable errors
+ * @param {number}  [options.retryDelayMs=1500]          - Base delay between retries (doubles each attempt)
+ *
+ * @returns {AIServiceHookResult}
+ */
+export function useAIService({
+  initialProvider = PROVIDERS.GEMINI,
+  initialApiKey = "",
+  initialModel = null,
+  retryAttempts = 2,
+  retryDelayMs = 1500,
+} = {}) {
+  // ── State ──────────────────────────────────────────────────────────────────
+  const [activeProvider, setActiveProviderState] = useState(initialProvider);
+  const [apiKey, setApiKey] = useState(initialApiKey);
+  const [activeModel, setActiveModel] = useState(
+    initialModel || PROVIDER_CONFIG[initialProvider]?.defaultModel
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);               // AIServiceError | null
+  const [lastRawResponse, setLastRawResponse] = useState(null);
+  const [lastGeneratedFiles, setLastGeneratedFiles] = useState([]);
+  const [requestCount, setRequestCount] = useState(0);   // Useful for analytics/rate tracking
+  // AbortController ref — allows cancellation of in-flight requests
+  const abortControllerRef = useRef(null);
+  // Store the last prompt for retry functionality
+  const lastPromptRef = useRef(null);
+  // ── Provider Switcher ──────────────────────────────────────────────────────
+  /**
+   * Switch the active provider. Automatically resets the model to the
+   * new provider's default so you never end up with a model/provider mismatch.
+   */
+  const setActiveProvider = useCallback((providerKey) => {
+    if (!PROVIDER_CONFIG[providerKey]) {
+      console.warn(`[Ethrix-Forge] Unknown provider: "${providerKey}". Ignoring.`);
+      return;
+    }
+    setActiveProviderState(providerKey);
+    setActiveModel(PROVIDER_CONFIG[providerKey].defaultModel);
+    setError(null);
+  }, []);
+  // ── Core Generator ────────────────────────────────────────────────────────
+  /**
+   * Generates files from a natural language prompt.
+   *
+   * @param {string} userPrompt - The user's coding request
+   * @param {Object} [overrides] - Optional per-call overrides
+   * @param {string} [overrides.provider] - Use a different provider for this call
+   * @param {string} [overrides.model]    - Use a different model for this call
+   * @param {string} [overrides.apiKey]   - Use a different key for this call
+   *
+   * @returns {Promise<Array<{id, filename, language, code}>>} Parsed file array
+   */
+  const generate = useCallback(
+    async (userPrompt, overrides = {}) => {
+      const provider = overrides.provider ?? activeProvider;
+      const model    = overrides.model    ?? activeModel;
+      const key      = overrides.apiKey   ?? apiKey;
+      // ── Pre-flight validation ──────────────────────────────────────────
+      if (!key || key.trim().length === 0) {
+        const err = new AIServiceError(
+          `No API key provided for ${PROVIDER_CONFIG[provider]?.label || provider}. Please add your key in Settings.`,
+          ERROR_CODES.NO_API_KEY,
+          provider,
+          false
+        );
+        setError(err);
+        throw err;
+      }
+      if (!userPrompt || userPrompt.trim().length === 0) {
+        const err = new AIServiceError(
+          "Prompt cannot be empty.",
+          ERROR_CODES.UNKNOWN,
+          provider,
+          false
+        );
+        setError(err);
+        throw err;
+      }
+      // ── Cancel any running request ─────────────────────────────────────
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      const { signal } = abortControllerRef.current;
+      lastPromptRef.current = { userPrompt, overrides };
+      setIsLoading(true);
+      setError(null);
+      setLastRawResponse(null);
+      const caller = PROVIDER_CALLERS[provider];
+      if (!caller) {
+        const err = new AIServiceError(
+          `Provider "${provider}" is not registered in PROVIDER_CALLERS.`,
+          ERROR_CODES.UNKNOWN,
+          provider,
+          false
+        );
+        setIsLoading(false);
+        setError(err);
+        throw err;
+      }
+      // ── Retry loop ──────────────────────────────────────────────────────
+      let lastErr = null;
+      for (let attempt = 0; attempt <= retryAttempts; attempt++) {
+        if (signal.aborted) {
+          setIsLoading(false);
+          return null;
+        }
+        if (attempt > 0) {
+          // Exponential backoff: 1.5s → 3s → 6s...
+          const delay = retryDelayMs * Math.pow(2, attempt - 1);
+          console.info(
+            `[Ethrix-Forge] Retry ${attempt}/${retryAttempts} in ${delay}ms for provider ${provider}...`
+          );
+          await sleep(delay);
+        }
+        try {
+          const rawText = await caller({ apiKey: key, model, userPrompt, signal });
+          if (rawText === null) {
+            // Request was aborted
+            setIsLoading(false);
+            return null;
+          }
+          setLastRawResponse(rawText);
+          setRequestCount((c) => c + 1);
+          const files = parseAIResponse(rawText, provider);
+          setLastGeneratedFiles(files);
+          setError(null);
+          setIsLoading(false);
+          return files;
+        } catch (err) {
+          lastErr = err;
+          // Don't retry non-retryable errors (bad key, safety block, etc.)
+          if (err instanceof AIServiceError && !err.retryable) {
+            break;
+          }
+          // Don't retry if caller was aborted
+          if (signal.aborted || err.name === "AbortError") {
+            setIsLoading(false);
+            return null;
+          }
+          console.warn(
+            `[Ethrix-Forge] Attempt ${attempt + 1} failed:`,
+            err.message
+          );
+        }
+      }
+      // All attempts exhausted
+      const finalError =
+        lastErr instanceof AIServiceError
+          ? lastErr
+          : new AIServiceError(
+              `Unexpected error: ${lastErr?.message ?? String(lastErr)}`,
+              ERROR_CODES.UNKNOWN,
+              provider,
+              false
+            );
+      setError(finalError);
+      setIsLoading(false);
+      throw finalError;
+    },
+    [activeProvider, activeModel, apiKey, retryAttempts, retryDelayMs]
+  );
+  // ── Retry Last Request ─────────────────────────────────────────────────────
+  /**
+   * Re-runs the exact same prompt and overrides as the last generate() call.
+   * Useful for a "Retry" button shown alongside error messages.
+   */
+  const retryLastRequest = useCallback(() => {
+    if (!lastPromptRef.current) return null;
+    const { userPrompt, overrides } = lastPromptRef.current;
+    return generate(userPrompt, overrides);
+  }, [generate]);
+  // ── Cancel ──────────────────────────────────────────────────────��──────────
+  /**
+   * Aborts any in-flight API request immediately.
+   */
+  const cancelRequest = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    setIsLoading(false);
+  }, []);
+  // ── Expose helpers ─────────────────────────────────────────────────────────
+  const currentProviderConfig = PROVIDER_CONFIG[activeProvider] ?? null;
+  const availableModels = currentProviderConfig?.availableModels ?? [];
+  return {
+    // Core action
+    generate,
+    retryLastRequest,
+    cancelRequest,
+    // State
+    isLoading,
+    error,
+    lastRawResponse,
+    lastGeneratedFiles,
+    requestCount,
+    // Provider management
+    activeProvider,
+    setActiveProvider,
+    currentProviderConfig,
+    // Model management
+    activeModel,
+    setActiveModel,
+    availableModels,
+    // API key management
+    apiKey,
+    setApiKey,
+    // Utilities
+    PROVIDERS,
+    PROVIDER_CONFIG,
+    ERROR_CODES,
+  };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// 8. MONACO FILE INJECTOR UTILITY
+//    A pure helper you can use to inject parsed files into your Monaco state.
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Merges newly generated files into an existing Monaco file state array.
+ *
+ * USAGE IN App.jsx:
+ *   const files = await generate(prompt);
+ *   setMonacoFiles(prev => injectFilesIntoEditor(prev, files));
+ *
+ * @param {Array}  existingFiles - Current files[] state from your editor
+ * @param {Array}  newFiles      - Parsed files from generate()
+ * @param {string} [strategy="replace-all"] - Merge strategy:
+ *   "replace-all"   — Wipe existing files, insert only new ones
+ *   "merge-by-name" — Update files with matching names; add new ones
+ *   "append"        — Add all new files (may create duplicates)
+ * @returns {Array} New files array to set as editor state
+ */
+export function injectFilesIntoEditor(existingFiles = [], newFiles = [], strategy = "replace-all") {
+  if (!Array.isArray(newFiles) || newFiles.length === 0) return existingFiles;
+  switch (strategy) {
+    case "replace-all":
+      return newFiles;
+    case "merge-by-name": {
+      const existingMap = new Map(existingFiles.map((f) => [f.filename, f]));
+      for (const newFile of newFiles) {
+        existingMap.set(newFile.filename, newFile);
+      }
+      return Array.from(existingMap.values());
+    }
+    case "append":
+      return [...existingFiles, ...newFiles];
+    default:
+      console.warn(`[Ethrix-Forge] Unknown injection strategy: "${strategy}". Using "replace-all".`);
+      return newFiles;
+  }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// 9. USAGE EXAMPLE — Minimal App.jsx Integration
+// ─────────────────────────────────────────────────────────────────────────────
+/*
+// App.jsx (abbreviated integration example):
+import { useState } from "react";
+import { useAIService, injectFilesIntoEditor, PROVIDERS } from "./useAIService";
+import Editor from "@monaco-editor/react";
+export default function App() {
+  const [monacoFiles, setMonacoFiles] = useState([]);
+  const [activeFile, setActiveFile] = useState(null);
+  const [prompt, setPrompt] = useState("");
+  const {
+    generate,
+    isLoading,
+    error,
+    retryLastRequest,
+    cancelRequest,
+    activeProvider,
+    setActiveProvider,
+    apiKey,
+    setApiKey,
+    activeModel,
+    setActiveModel,
+    availableModels,
+    PROVIDERS,
+  } = useAIService({
+    initialProvider: PROVIDERS.GEMINI,
+    retryAttempts: 2,
+  });
+  const handleGenerate = async () => {
+    try {
+      const files = await generate(prompt);
+      if (files) {
+        setMonacoFiles(prev => injectFilesIntoEditor(prev, files, "replace-all"));
+        setActiveFile(files[0]);
+      }
+    } catch (err) {
+      // error is also set in hook state — render err.message in your UI
+      console.error(err);
+    }
+  };
+  return (
+    <div>
+      // Provider selector
+      <select value={activeProvider} onChange={(e) => setActiveProvider(e.target.value)}>
+        <option value={PROVIDERS.GEMINI}>Gemini</option>
+        <option value={PROVIDERS.GROQ}>Groq</option>
+        <option value={PROVIDERS.OPENROUTER}>OpenRouter</option>
+      </select>
+      // Model selector
+      <select value={activeModel} onChange={(e) => setActiveModel(e.target.value)}>
+        {availableModels.map(m => (
+          <option key={m.id} value={m.id}>{m.label}</option>
+        ))}
+      </select>
+      // API Key input
+      <input
+        type="password"
+        value={apiKey}
+        onChange={(e) => setApiKey(e.target.value)}
+        placeholder="Enter API Key..."
+      />
+      // Prompt area
+      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} />
+      <button onClick={handleGenerate} disabled={isLoading}>
+        {isLoading ? "Generating..." : "Generate"}
+      </button>
+      {isLoading && <button onClick={cancelRequest}>Cancel</button>}
+      // Error display
+      {error && (
+        <div>
+          <p>{error.message}</p>
+          {error.retryable && <button onClick={retryLastRequest}>Retry</button>}
+        </div>
+      )}
+      // File tabs
+      {monacoFiles.map(file => (
+        <button key={file.id} onClick={() => setActiveFile(file)}>
+          {file.filename}
+        </button>
+      ))}
+      // Monaco Editor
+      {activeFile && (
+        <Editor
+          language={activeFile.language}
+          value={activeFile.code}
+          theme="vs-dark"
+          options={{ fontSize: 14 }}
+        />
+      )}
+    </div>
+  );
+}
+*/
+// ─────────────────────────────────────────────────────────────────────────────
+// HELPERS
+// ─────────────────────────────────────────────────────────────────────────────
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

client/vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

main.py DELETED Viewed

@@ -1,7 +0,0 @@
-from fastapi import FastAPI
-app = FastAPI()
-@app.get("/")
-def read_root():
-    return {"message": "Arey waah Shan! Ethrix-Forge ka Backend Zinda ho gaya! 🚀"}

requirements.txt CHANGED Viewed

@@ -1,2 +1,10 @@
-fastapi
-uvicorn

+fastapi>=0.104.0
+uvicorn>=0.24.0
+motor>=3.3.0
+PyGithub>=2.1.0
+google-api-python-client>=2.108.0
+google-auth-httplib2>=0.1.0
+google-auth-oauthlib>=1.1.0
+python-dotenv>=1.0.0
+pydantic>=2.5.0
+python-multipart>=0.0.6