Feat: AI Project Generation Wizard (Magic Generation) (Phase 9)

backend/main.py

@@ -118,10 +118,11 @@ async def root():
     }
 
 # Placeholder for routers
-from routers import agent_runner, orchestrator, monitoring
+from routers import orchestrator, monitoring, agent_runner, generator
 
 app.include_router(agent_runner.router, prefix="/tasks", tags=["Tasks"])
-app.include_router(orchestrator.router, prefix="/orchestrator", tags=["Orchestration"])
+app.include_router(orchestrator.router, prefix="/api/orchestrator", tags=["orchestrator"])
+app.include_router(generator.router, prefix="/api/generator", tags=["generator"])
 app.include_router(monitoring.router, prefix="/monitoring", tags=["Monitoring"])
 
 @app.get("/runtime-config.js", include_in_schema=False)

backend/routers/generator.py

@@ -0,0 +1,96 @@
+from fastapi import APIRouter, UploadFile, File, Form, HTTPException
+from typing import List, Optional
+import json
+import logging
+import groq
+from services.supabase_service import supabase
+from services.config import settings, config_service
+from pydantic import BaseModel
+
+router = APIRouter()
+logger = logging.getLogger("aubm.generator")
+
+def _parse_json_output(content: str):
+    """Robust JSON parsing from LLM output."""
+    if not content:
+        return {}
+    try:
+        return json.loads(content)
+    except json.JSONDecodeError:
+        pass
+    try:
+        if "```json" in content:
+            clean = content.split("```json", 1)[1].split("```", 1)[0].strip()
+        elif "```" in content:
+            clean = content.split("```", 1)[1].split("```", 1)[0].strip()
+        else:
+            object_start = content.find("{")
+            end = content.rfind("}")
+            clean = content[object_start:end + 1] if object_start != -1 and end != -1 else content
+        return json.loads(clean)
+    except Exception:
+        return {"name": "Generation Failed", "description": content, "context": ""}
+
+@router.post("/generate-project")
+async def generate_project(
+    prompt: str = Form(...),
+    files: List[UploadFile] = File(None)
+):
+    """
+    Generates a project structure from a natural language prompt and reference files.
+    """
+    logger.info("Generating project structure for prompt: %s", prompt[:50])
+    
+    # 1. Extract context from files
+    file_contexts = []
+    if files:
+        for file in files:
+            content = await file.read()
+            try:
+                text = content.decode("utf-8")
+                file_contexts.append(f"File: {file.filename}\nContent:\n{text}")
+            except Exception as e:
+                logger.warning("Could not decode file %s: %s", file.filename, e)
+
+    full_context = "\n\n".join(file_contexts)
+    
+    # 2. Prepare LLM prompt
+    system_prompt = """
+    You are an expert Project Architect for the Aubm platform.
+    Your goal is to take a user prompt and reference documents to create a structured project definition.
+    
+    Return ONLY a valid JSON object with the following keys:
+    {
+      "name": "Short Professional Name",
+      "description": "High level summary",
+      "context": "Detailed constraints, objectives, and requirements extracted from docs.",
+      "sources": [{"kind": "note", "label": "Analysis Note", "content": "..."}]
+    }
+    """
+    
+    user_message = f"User Prompt: {prompt}\n\nReference Context:\n{full_context}"
+    
+    try:
+        # 3. Call Groq
+        provider_config = config_service.get_provider_config("groq")
+        api_key = provider_config.get("api_key") or settings.GROQ_API_KEY
+        client = groq.AsyncGroq(api_key=api_key)
+        
+        response = await client.chat.completions.create(
+            model="llama-3.3-70b-versatile",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_message}
+            ],
+            temperature=0.3,
+            max_tokens=2048,
+            response_format={"type": "json_object"}
+        )
+        
+        response_text = response.choices[0].message.content
+        data = _parse_json_output(response_text)
+        return data
+        
+    except Exception as e:
+        logger.error("Project generation failed: %s", e)
+        raise HTTPException(status_code=500, detail=f"Generation failed: {str(e)}")

frontend/src/components/NewProject.tsx

@@ -103,6 +103,10 @@ const wizardSteps = [
   {
     title: 'Review',
     description: 'Check the setup before creating the project. You will generate tasks from the project page after creation.'
+  },
+  {
+    title: 'Magic Generation',
+    description: 'Describe your project in natural language and attach reference docs. AI will pre-configure the workspace for you.'
   }
 ];
 
@@ -129,6 +133,9 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
   const [wizardStep, setWizardStep] = useState(0);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationFiles, setGenerationFiles] = useState<File[]>([]);
   
   React.useEffect(() => {
     if (uiMode === 'expert') {
@@ -136,6 +143,49 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
     }
   }, [uiMode]);
 
+  const handleAiGenerate = async () => {
+    if (!aiPrompt.trim()) return;
+    setIsGenerating(true);
+    setMessage('AI is analyzing your request and documents...');
+
+    try {
+      const formData = new FormData();
+      formData.append('prompt', aiPrompt);
+      generationFiles.forEach(file => {
+        formData.append('files', file);
+      });
+
+      const response = await fetch(`${getApiUrl()}/generator/generate-project`, {
+        method: 'POST',
+        body: formData
+      });
+
+      if (!response.ok) throw new Error('AI generation failed');
+      
+      const data = await response.json();
+      
+      setName(data.name || '');
+      setDescription(data.description || '');
+      setContext(data.context || '');
+      
+      if (data.sources && Array.isArray(data.sources)) {
+        const aiSources: ProjectSource[] = data.sources.map((s: any) => ({
+          id: crypto.randomUUID(),
+          ...s
+        }));
+        setSources(prev => [...prev, ...aiSources]);
+      }
+
+      setMessage('Success! AI has drafted your project. Review the fields in the next steps.');
+      setWizardStep(1);
+    } catch (err: any) {
+      console.error('AI Generation Error:', err);
+      setMessage(`AI Error: ${err.message}`);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
   const fetchTeams = async () => {
     try {
       const { data, error } = await supabase.from('teams').select('id, name');
@@ -147,10 +197,10 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
   };
   const isWizard = true;
   const projectWizardSteps = uiMode === 'expert'
-    ? [wizardSteps[0], wizardSteps[1], wizardSteps[2], expertAccessStep, wizardSteps[3]]
-    : wizardSteps;
+    ? [wizardSteps[4], wizardSteps[0], wizardSteps[1], wizardSteps[2], expertAccessStep, wizardSteps[3]]
+    : [wizardSteps[4], wizardSteps[0], wizardSteps[1], wizardSteps[2], wizardSteps[3]];
   const reviewStepIndex = projectWizardSteps.length - 1;
-  const accessStepIndex = uiMode === 'expert' ? 3 : -1;
+  const accessStepIndex = uiMode === 'expert' ? 4 : -1;
   const currentWizardStep = projectWizardSteps[wizardStep] ?? projectWizardSteps[0];
   const isFirstWizardStep = wizardStep === 0;
   const isLastWizardStep = wizardStep === reviewStepIndex;
@@ -312,7 +362,91 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
           </div>
         )}
 
-        {(!isWizard || wizardStep === 0) && (
+        {wizardStep === 0 && (
+          <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="wizard-form">
+            <div className="form-group">
+              <label>What would you like to build?</label>
+              <textarea 
+                placeholder='e.g., "Make me a security audit project for a Fintech app. Use the attached compliance docs as reference. I need to focus on OWASP Top 10."'
+                value={aiPrompt}
+                onChange={(e) => setAiPrompt(e.target.value)}
+                style={{ height: '160px', resize: 'none' }}
+              />
+            </div>
+            
+            <div className="form-group">
+              <label>Reference Documents (Optional)</label>
+              <div 
+                className="drop-zone"
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  const dropped = Array.from(e.dataTransfer.files);
+                  setGenerationFiles(prev => [...prev, ...dropped]);
+                }}
+                onClick={() => {
+                   const input = document.createElement('input');
+                   input.type = 'file';
+                   input.multiple = true;
+                   input.onchange = (e) => {
+                     const selected = Array.from((e.target as HTMLInputElement).files || []);
+                     setGenerationFiles(prev => [...prev, ...selected]);
+                   };
+                   input.click();
+                }}
+                style={{
+                  border: '2px dashed var(--border)',
+                  borderRadius: 'var(--radius-md)',
+                  padding: 'var(--space-xl)',
+                  textAlign: 'center',
+                  cursor: 'pointer',
+                  background: 'rgba(255,255,255,0.02)'
+                }}
+              >
+                <Paperclip size={24} style={{ marginBottom: '8px', opacity: 0.5 }} />
+                <p style={{ margin: 0 }}>Click or drag files to use as AI context</p>
+                <span style={{ fontSize: '0.8rem', opacity: 0.6 }}>Supports PDF, Text, Markdown, JSON</span>
+              </div>
+              
+              {generationFiles.length > 0 && (
+                <div style={{ marginTop: 'var(--space-md)', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  {generationFiles.map((f, i) => (
+                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(255,255,255,0.04)', padding: '8px 12px', borderRadius: '4px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.9rem' }}>
+                        <FileText size={14} />
+                        <span>{f.name}</span>
+                      </div>
+                      <button 
+                        className="btn-icon" 
+                        onClick={() => setGenerationFiles(prev => prev.filter((_, idx) => idx !== i))}
+                        style={{ color: 'var(--danger)' }}
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div style={{ marginTop: 'var(--space-xl)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <button className="btn btn-glass" type="button" onClick={() => setWizardStep(1)}>
+                Skip to manual setup
+              </button>
+              <button 
+                className="btn btn-primary" 
+                type="button"
+                onClick={handleAiGenerate}
+                disabled={!aiPrompt.trim() || isGenerating}
+              >
+                {isGenerating ? <RefreshCw className="spin" size={18} /> : <PlusCircle size={18} />}
+                {isGenerating ? 'Generating...' : 'Generate Project Structure'}
+              </button>
+            </div>
+          </motion.div>
+        )}
+
+        {wizardStep === 1 && (
         <>
         <div className="field-with-help">
           <label>
@@ -336,7 +470,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
         </>
         )}
 
-        {(!isWizard || wizardStep === 1) && (
+        {wizardStep === 2 && (
         <div className="field-with-help">
           <label>
             <span>Context</span>
@@ -348,7 +482,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
         </div>
         )}
 
-        {(!isWizard || wizardStep === 2) && (
+        {wizardStep === 3 && (
         <div className="default-agent-panel project-sources-panel" style={{ gap: 'var(--space-lg)' }}>
           <div className="settings-section-title">
             <Paperclip size={20} color="var(--accent)" />
@@ -445,7 +579,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
         </div>
         )}
 
-        {uiMode === 'expert' && (!isWizard || wizardStep === accessStepIndex) && (
+        {uiMode === 'expert' && wizardStep === accessStepIndex && (
           <div className="expert-access-fields" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
             <div className="field-with-help">
               <label>
@@ -478,7 +612,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
           </div>
         )}
 
-        {isWizard && wizardStep === reviewStepIndex && (
+        {wizardStep === reviewStepIndex && (
           <div className="wizard-review">
             <div>
               <span>Project name</span>
@@ -515,29 +649,6 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
         )}
 
         <div className="field-with-help field-with-help-action">
-          {isWizard ? (
-            <div className="wizard-actions">
-              <button className="btn btn-glass" type="button" onClick={() => setWizardStep((step) => Math.max(0, step - 1))} disabled={isFirstWizardStep || saving}>
-                <ArrowLeft size={18} />
-                Back
-              </button>
-              {!isLastWizardStep ? (
-                <button
-                  className="btn btn-primary"
-                  type="button"
-                  onClick={() => setWizardStep((step) => Math.min(projectWizardSteps.length - 1, step + 1))}
-                  disabled={wizardStep === 0 && !name.trim()}
-                >
-                  Next
-                  <ArrowRight size={18} />
-                </button>
-              ) : (
-                <button className="btn btn-primary" type="submit" disabled={saving || !name.trim()}>
-                  <PlusCircle size={18} />
-                  {saving ? 'Creating...' : 'Create Project'}
-                </button>
-              )}
-            </div>
           ) : (
             <button className="btn btn-primary" type="submit" disabled={saving}>
               <PlusCircle size={18} />