update

Dockerfile

@@ -10,6 +10,9 @@ RUN npm run build
 FROM python:3.11-slim
 WORKDIR /app
 
+# Create data directory for persistent storage
+RUN mkdir -p /data/uploads
+
 # Backend deps
 COPY backend/requirements.txt /app/backend/requirements.txt
 RUN pip install --no-cache-dir -r /app/backend/requirements.txt

README.md

@@ -8,4 +8,43 @@ pinned: false
 license: mit
 ---
 
+# EMAILOUT - AI-Powered Email Sequence Generator
+
+A Hugging Face Space application for generating personalized email outreach sequences using GPT.
+
+## Features
+
+- 📤 Upload CSV files from Apollo with contact information
+- 🎯 Select and customize products for outreach campaigns
+- ✏️ Edit email prompt templates for each product
+- 🤖 AI-powered sequence generation using GPT
+- 📊 Real-time streaming of generated sequences
+- 💾 Download sequences as CSV for use in Klenty and other email tools
+
+## Setup
+
+1. Set your OpenAI API key as a secret in Hugging Face Spaces:
+   - Go to Settings → Secrets
+   - Add `OPENAI_API_KEY` with your API key value
+
+2. The app will automatically:
+   - Create SQLite database in `/data/emailout.db`
+   - Store uploaded CSV files in `/data/uploads/`
+   - Generate and store email sequences
+
+## Usage
+
+1. **Upload CSV**: Upload your Apollo CSV file with contacts
+2. **Select Products**: Choose which products to focus on for outreach
+3. **Configure Prompts**: Customize email templates for each product
+4. **Generate**: Let AI create personalized sequences for each contact
+5. **Download**: Export sequences as CSV for your email tools
+
+## Tech Stack
+
+- **Frontend**: React + Vite + Tailwind CSS + Framer Motion
+- **Backend**: FastAPI + Python
+- **AI**: OpenAI GPT API
+- **Database**: SQLite (Hugging Face Spaces persistent storage)
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

SETUP.md

@@ -0,0 +1,108 @@
+# EMAILOUT Setup Guide
+
+## Prerequisites
+
+1. OpenAI API Key - Get one from https://platform.openai.com/api-keys
+
+## Hugging Face Spaces Setup
+
+1. **Create a new Space**:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Select "Docker" as the SDK
+   - Name it "EMAILOUT" (or your preferred name)
+
+2. **Add OpenAI API Key as Secret**:
+   - Go to your Space Settings
+   - Navigate to "Secrets" section
+   - Add a new secret:
+     - Key: `OPENAI_API_KEY`
+     - Value: Your OpenAI API key
+
+3. **Upload Files**:
+   - Upload all project files to your Space
+   - The Dockerfile will handle the build process
+
+4. **Deploy**:
+   - The Space will automatically build and deploy
+   - Monitor the logs for any build errors
+
+## Local Development
+
+1. **Install Dependencies**:
+   ```bash
+   # Backend
+   cd backend
+   pip install -r requirements.txt
+   
+   # Frontend
+   cd ../frontend
+   npm install
+   ```
+
+2. **Set Environment Variables**:
+   ```bash
+   export OPENAI_API_KEY=your_api_key_here
+   ```
+
+3. **Run Backend**:
+   ```bash
+   cd backend
+   uvicorn app.main:app --reload --port 8000
+   ```
+
+4. **Run Frontend**:
+   ```bash
+   cd frontend
+   npm run dev
+   ```
+
+## Project Structure
+
+```
+EMAILOUT/
+├── backend/
+│   ├── app/
+│   │   ├── __init__.py
+│   │   ├── main.py          # FastAPI application
+│   │   ├── database.py      # SQLite database models
+│   │   ├── models.py         # Pydantic models
+│   │   └── gpt_service.py   # OpenAI GPT integration
+│   └── requirements.txt
+├── frontend/
+│   ├── src/
+│   │   ├── pages/
+│   │   │   └── EmailSequenceGenerator.jsx
+│   │   ├── components/
+│   │   │   ├── upload/
+│   │   │   ├── products/
+│   │   │   ├── prompts/
+│   │   │   ├── sequences/
+│   │   │   └── ui/
+│   │   └── ...
+│   └── package.json
+├── Dockerfile
+└── README.md
+```
+
+## Features
+
+- ✅ CSV Upload from Apollo
+- ✅ Product Selection with Custom Products
+- ✅ Prompt Template Editor
+- ✅ GPT-Powered Sequence Generation
+- ✅ Real-time Streaming Results
+- ✅ CSV Export for Klenty/Outreach
+
+## API Endpoints
+
+- `POST /api/upload-csv` - Upload CSV file
+- `POST /api/save-prompts` - Save prompt templates
+- `GET /api/generate-sequences` - Generate sequences (SSE stream)
+- `GET /api/download-sequences` - Download sequences as CSV
+
+## Database
+
+SQLite database is stored at `/data/emailout.db` (persistent in HF Spaces).
+
+Uploaded files are stored at `/data/uploads/`.

backend/app/database.py

@@ -0,0 +1,65 @@
+from sqlalchemy import create_engine, Column, Integer, String, Text, DateTime, JSON
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+from datetime import datetime
+import os
+from pathlib import Path
+
+# SQLite database path (Hugging Face Spaces provides persistent storage)
+DATA_DIR = Path("/data")
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+DB_PATH = os.getenv("HF_DATABASE_PATH", str(DATA_DIR / "emailout.db"))
+
+engine = create_engine(f"sqlite:///{DB_PATH}", connect_args={"check_same_thread": False})
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+
+class UploadedFile(Base):
+    __tablename__ = "uploaded_files"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    file_id = Column(String, unique=True, index=True)
+    filename = Column(String)
+    contact_count = Column(Integer)
+    file_path = Column(String)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
+class Prompt(Base):
+    __tablename__ = "prompts"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    file_id = Column(String, index=True)
+    product_name = Column(String)
+    prompt_template = Column(Text)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
+class GeneratedSequence(Base):
+    __tablename__ = "generated_sequences"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    file_id = Column(String, index=True)
+    sequence_id = Column(Integer)
+    first_name = Column(String)
+    last_name = Column(String)
+    email = Column(String)
+    company = Column(String)
+    title = Column(String)
+    product = Column(String)
+    subject = Column(String)
+    email_content = Column(Text)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
+# Create tables
+Base.metadata.create_all(bind=engine)
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/app/gpt_service.py

@@ -0,0 +1,109 @@
+import os
+from openai import OpenAI
+from typing import Dict, List
+import re
+
+# Initialize OpenAI client
+client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+
+def generate_email_sequence(contact: Dict, prompt_template: str, product_name: str) -> Dict:
+    """
+    Generate a personalized email sequence for a contact using GPT.
+    """
+    try:
+        # Extract variables from contact
+        first_name = contact.get("first_name", contact.get("First Name", ""))
+        last_name = contact.get("last_name", contact.get("Last Name", ""))
+        company = contact.get("company", contact.get("Company", contact.get("Organization", "")))
+        email = contact.get("email", contact.get("Email", ""))
+        title = contact.get("title", contact.get("Title", contact.get("Job Title", "")))
+        
+        # Prepare the prompt for GPT
+        system_prompt = """You are an expert email outreach specialist. Your task is to personalize email templates for B2B sales outreach. 
+        Replace template variables with actual contact information and make the email sound natural and personalized.
+        Return the email in the same format as the template, with subject line and body separated."""
+        
+        user_prompt = f"""Given this contact information:
+- Name: {first_name} {last_name}
+- Company: {company}
+- Title: {title}
+- Email: {email}
+- Product Focus: {product_name}
+
+Personalize this email template:
+{prompt_template}
+
+Replace all variables like {{first_name}}, {{company}}, {{sender_name}} with the actual information.
+Make it sound natural and personalized. Keep the same structure and format.
+If sender_name is not provided, use "Alex Thompson" as the sender name."""
+
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",  # Using gpt-4o-mini for cost efficiency, can be changed to gpt-4
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_prompt}
+            ],
+            temperature=0.7,
+            max_tokens=1000
+        )
+        
+        generated_text = response.choices[0].message.content
+        
+        # Parse the generated email to extract subject and body
+        lines = generated_text.split('\n')
+        subject = ""
+        email_content = ""
+        
+        # Extract subject line
+        for i, line in enumerate(lines):
+            if line.strip().startswith("Subject:"):
+                subject = line.replace("Subject:", "").strip()
+                email_content = '\n'.join(lines[i+1:]).strip()
+                break
+        
+        # If no subject found, use first line or generate one
+        if not subject:
+            if lines:
+                subject = lines[0].replace("Subject:", "").strip()
+                email_content = '\n'.join(lines[1:]).strip()
+            else:
+                subject = f"{first_name}, let's talk about {product_name}"
+                email_content = generated_text
+        
+        # Replace any remaining template variables
+        email_content = email_content.replace("{{first_name}}", first_name)
+        email_content = email_content.replace("{{company}}", company)
+        email_content = email_content.replace("{{sender_name}}", "Alex Thompson")
+        
+        subject = subject.replace("{{first_name}}", first_name)
+        subject = subject.replace("{{company}}", company)
+        subject = subject.replace("{{sender_name}}", "Alex Thompson")
+        
+        return {
+            "first_name": first_name,
+            "last_name": last_name,
+            "email": email,
+            "company": company,
+            "title": title,
+            "product": product_name,
+            "subject": subject,
+            "email_content": email_content
+        }
+        
+    except Exception as e:
+        print(f"Error generating sequence: {e}")
+        # Return a fallback email
+        first_name = contact.get("first_name", contact.get("First Name", "there"))
+        company = contact.get("company", contact.get("Company", contact.get("Organization", "your company")))
+        
+        return {
+            "first_name": first_name,
+            "last_name": contact.get("last_name", contact.get("Last Name", "")),
+            "email": contact.get("email", contact.get("Email", "")),
+            "company": company,
+            "title": contact.get("title", contact.get("Title", contact.get("Job Title", ""))),
+            "product": product_name,
+            "subject": f"{first_name}, let's talk about {product_name}",
+            "email_content": f"Hi {first_name},\n\nI wanted to reach out about how {product_name} could benefit {company}.\n\nBest,\nAlex Thompson"
+        }

backend/app/main.py

@@ -1,8 +1,22 @@
-from fastapi import FastAPI
-from fastapi.responses import FileResponse
+from fastapi import FastAPI, UploadFile, File, Depends, HTTPException, Query
+from fastapi.responses import FileResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pathlib import Path
+from sqlalchemy.orm import Session
+import pandas as pd
+import uuid
+import os
+import csv
+import io
+import concurrent.futures
+from typing import Dict, List
+import json
+import asyncio
+
+from app.database import get_db, UploadedFile, Prompt, GeneratedSequence
+from app.models import UploadResponse, PromptSaveRequest, SequenceResponse
+from app.gpt_service import generate_email_sequence
 
 app = FastAPI()
 
@@ -14,6 +28,10 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Create uploads directory
+UPLOAD_DIR = Path("/data/uploads")
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
 # ---- API ----
 @app.get("/api/health")
 def health():
@@ -23,6 +41,220 @@ def health():
 def hello():
     return {"message": "Hello from FastAPI"}
 
+
+@app.post("/api/upload-csv")
+async def upload_csv(file: UploadFile = File(...), db: Session = Depends(get_db)):
+    """Upload and parse CSV file from Apollo"""
+    try:
+        # Generate unique file ID
+        file_id = str(uuid.uuid4())
+        file_path = UPLOAD_DIR / f"{file_id}.csv"
+        
+        # Save file
+        content = await file.read()
+        with open(file_path, "wb") as f:
+            f.write(content)
+        
+        # Parse CSV to count contacts
+        df = pd.read_csv(file_path)
+        contact_count = len(df)
+        
+        # Save to database
+        db_file = UploadedFile(
+            file_id=file_id,
+            filename=file.filename,
+            contact_count=contact_count,
+            file_path=str(file_path)
+        )
+        db.add(db_file)
+        db.commit()
+        
+        return {
+            "file_id": file_id,
+            "contact_count": contact_count,
+            "message": "File uploaded successfully"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error uploading file: {str(e)}")
+
+
+@app.post("/api/save-prompts")
+async def save_prompts(request: PromptSaveRequest, db: Session = Depends(get_db)):
+    """Save prompt templates for products"""
+    try:
+        # Delete existing prompts for this file
+        db.query(Prompt).filter(Prompt.file_id == request.file_id).delete()
+        
+        # Save new prompts
+        for product_name, prompt_template in request.prompts.items():
+            prompt = Prompt(
+                file_id=request.file_id,
+                product_name=product_name,
+                prompt_template=prompt_template
+            )
+            db.add(prompt)
+        
+        db.commit()
+        return {"message": "Prompts saved successfully"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error saving prompts: {str(e)}")
+
+
+@app.get("/api/generate-sequences")
+async def generate_sequences(
+    file_id: str = Query(...),
+    db: Session = Depends(get_db)
+):
+    """Generate email sequences using GPT with Server-Sent Events streaming"""
+    
+    async def event_generator():
+        try:
+            # Get uploaded file
+            db_file = db.query(UploadedFile).filter(UploadedFile.file_id == file_id).first()
+            if not db_file:
+                yield f"data: {json.dumps({'type': 'error', 'error': 'File not found'})}\n\n"
+                return
+            
+            # Read CSV
+            df = pd.read_csv(db_file.file_path)
+            
+            # Get prompts for this file
+            prompts = db.query(Prompt).filter(Prompt.file_id == file_id).all()
+            prompt_dict = {p.product_name: p.prompt_template for p in prompts}
+            
+            if not prompt_dict:
+                yield f"data: {json.dumps({'type': 'error', 'error': 'No prompts found'})}\n\n"
+                return
+            
+            # Get products from prompts
+            products = list(prompt_dict.keys())
+            
+            # Clear existing sequences
+            db.query(GeneratedSequence).filter(GeneratedSequence.file_id == file_id).delete()
+            db.commit()
+            
+            sequence_id = 1
+            total_contacts = len(df)
+            
+            # Process each contact
+            for idx, row in df.iterrows():
+                # Convert row to dict
+                contact = row.to_dict()
+                
+                # Select product (round-robin or random)
+                product_name = products[sequence_id % len(products)]
+                prompt_template = prompt_dict[product_name]
+                
+                # Generate sequence using GPT (run in executor to avoid blocking)
+                loop = asyncio.get_event_loop()
+                with concurrent.futures.ThreadPoolExecutor() as executor:
+                    sequence_data = await loop.run_in_executor(
+                        executor, 
+                        generate_email_sequence, 
+                        contact, 
+                        prompt_template, 
+                        product_name
+                    )
+                
+                # Save to database
+                db_sequence = GeneratedSequence(
+                    file_id=file_id,
+                    sequence_id=sequence_id,
+                    first_name=sequence_data["first_name"],
+                    last_name=sequence_data["last_name"],
+                    email=sequence_data["email"],
+                    company=sequence_data["company"],
+                    title=sequence_data.get("title", ""),
+                    product=sequence_data["product"],
+                    subject=sequence_data["subject"],
+                    email_content=sequence_data["email_content"]
+                )
+                db.add(db_sequence)
+                db.commit()
+                
+                # Stream the sequence
+                sequence_response = {
+                    "id": sequence_id,
+                    "firstName": sequence_data["first_name"],
+                    "lastName": sequence_data["last_name"],
+                    "email": sequence_data["email"],
+                    "company": sequence_data["company"],
+                    "title": sequence_data.get("title", ""),
+                    "product": sequence_data["product"],
+                    "subject": sequence_data["subject"],
+                    "emailContent": sequence_data["email_content"]
+                }
+                
+                yield f"data: {json.dumps({'type': 'sequence', 'sequence': sequence_response})}\n\n"
+                
+                # Send progress update
+                progress = (sequence_id / total_contacts) * 100
+                yield f"data: {json.dumps({'type': 'progress', 'progress': progress})}\n\n"
+                
+                sequence_id += 1
+                
+                # Small delay to prevent overwhelming the API
+                await asyncio.sleep(0.1)
+            
+            # Send completion
+            yield f"data: {json.dumps({'type': 'complete'})}\n\n"
+            
+        except Exception as e:
+            yield f"data: {json.dumps({'type': 'error', 'error': str(e)})}\n\n"
+    
+    return StreamingResponse(event_generator(), media_type="text/event-stream")
+
+
+@app.get("/api/download-sequences")
+async def download_sequences(file_id: str = Query(...), db: Session = Depends(get_db)):
+    """Download generated sequences as CSV"""
+    try:
+        # Get all sequences for this file
+        sequences = db.query(GeneratedSequence).filter(
+            GeneratedSequence.file_id == file_id
+        ).order_by(GeneratedSequence.sequence_id).all()
+        
+        if not sequences:
+            raise HTTPException(status_code=404, detail="No sequences found")
+        
+        # Create CSV in memory
+        output = io.StringIO()
+        writer = csv.writer(output)
+        
+        # Write header
+        writer.writerow([
+            'First Name', 'Last Name', 'Email', 'Company', 'Title', 
+            'Product', 'Subject', 'Email Content'
+        ])
+        
+        # Write rows
+        for seq in sequences:
+            writer.writerow([
+                seq.first_name,
+                seq.last_name,
+                seq.email,
+                seq.company,
+                seq.title or '',
+                seq.product,
+                seq.subject,
+                seq.email_content.replace('\n', ' ').replace('\r', '')
+            ])
+        
+        output.seek(0)
+        
+        # Return as downloadable file
+        return StreamingResponse(
+            iter([output.getvalue()]),
+            media_type="text/csv",
+            headers={
+                "Content-Disposition": f"attachment; filename=email_sequences_{file_id}.csv"
+            }
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error downloading sequences: {str(e)}")
+
+
 # ---- Frontend static serving ----
 FRONTEND_DIST = Path(__file__).resolve().parents[2] / "frontend" / "dist"
 INDEX_FILE = FRONTEND_DIST / "index.html"

backend/app/models.py

@@ -0,0 +1,27 @@
+from pydantic import BaseModel
+from typing import Optional, List, Dict
+from datetime import datetime
+
+
+class UploadResponse(BaseModel):
+    file_id: str
+    contact_count: int
+    message: str
+
+
+class PromptSaveRequest(BaseModel):
+    file_id: str
+    prompts: Dict[str, str]
+    products: List[str]
+
+
+class SequenceResponse(BaseModel):
+    id: int
+    firstName: str
+    lastName: str
+    email: str
+    company: str
+    title: Optional[str] = None
+    product: str
+    subject: str
+    emailContent: str

backend/requirements.txt

@@ -1,2 +1,7 @@
 fastapi
 uvicorn
+python-multipart
+openai
+pandas
+aiofiles
+sqlalchemy

frontend/package.json

@@ -10,10 +10,18 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.344.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.17"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -1,23 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
+import "./index.css";
 
 export default function App() {
-  const [apiMsg, setApiMsg] = useState("");
-
-  useEffect(() => {
-    fetch("/api/hello")
-      .then((r) => r.json())
-      .then((d) => setApiMsg(d.message))
-      .catch(() => setApiMsg("API not reachable yet"));
-  }, []);
-
-  return (
-    <div style={{ fontFamily: "system-ui", padding: 24, lineHeight: 1.5 }}>
-      <h1>EMAILOUT - React + FastAPI (Docker, HF Spaces)</h1>
-      <p>This is a plain starter page. Customize freely.</p>
-
-      <div style={{ marginTop: 16, padding: 12, border: "1px solid #ddd", borderRadius: 8 }}>
-        <strong>API says:</strong> {apiMsg}
-      </div>
-    </div>
-  );
+  return <EmailSequenceGenerator />;
 }

frontend/src/components/UserNotRegisteredError.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const UserNotRegisteredError = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-white to-slate-50">
+      <div className="max-w-md w-full p-8 bg-white rounded-lg shadow-lg border border-slate-100">
+        <div className="text-center">
+          <div className="inline-flex items-center justify-center w-16 h-16 mb-6 rounded-full bg-orange-100">
+            <svg className="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 mb-4">Access Restricted</h1>
+          <p className="text-slate-600 mb-8">
+            You are not registered to use this application. Please contact the app administrator to request access.
+          </p>
+          <div className="p-4 bg-slate-50 rounded-md text-sm text-slate-600">
+            <p>If you believe this is an error, you can:</p>
+            <ul className="list-disc list-inside mt-2 space-y-1">
+              <li>Verify you are logged in with the correct account</li>
+              <li>Contact the app administrator for access</li>
+              <li>Try logging out and back in again</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserNotRegisteredError;

frontend/src/components/products/ProductSelector.jsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import { Check, Plus, X, Package } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { motion, AnimatePresence } from 'framer-motion';
+
+const DEFAULT_PRODUCTS = [
+    { id: 1, name: 'Accounts Payable Automation', color: 'violet' },
+    { id: 2, name: 'Sales Order Processing', color: 'blue' },
+    { id: 3, name: 'Document Management', color: 'emerald' },
+    { id: 4, name: 'Invoice Processing', color: 'amber' },
+    { id: 5, name: 'Expense Management', color: 'rose' },
+    { id: 6, name: 'Procurement Automation', color: 'cyan' },
+];
+
+const colorClasses = {
+    violet: 'bg-violet-100 text-violet-700 border-violet-200 hover:bg-violet-200',
+    blue: 'bg-blue-100 text-blue-700 border-blue-200 hover:bg-blue-200',
+    emerald: 'bg-emerald-100 text-emerald-700 border-emerald-200 hover:bg-emerald-200',
+    amber: 'bg-amber-100 text-amber-700 border-amber-200 hover:bg-amber-200',
+    rose: 'bg-rose-100 text-rose-700 border-rose-200 hover:bg-rose-200',
+    cyan: 'bg-cyan-100 text-cyan-700 border-cyan-200 hover:bg-cyan-200',
+    slate: 'bg-slate-100 text-slate-700 border-slate-200 hover:bg-slate-200',
+};
+
+const selectedColorClasses = {
+    violet: 'bg-violet-600 text-white border-violet-600',
+    blue: 'bg-blue-600 text-white border-blue-600',
+    emerald: 'bg-emerald-600 text-white border-emerald-600',
+    amber: 'bg-amber-600 text-white border-amber-600',
+    rose: 'bg-rose-600 text-white border-rose-600',
+    cyan: 'bg-cyan-600 text-white border-cyan-600',
+    slate: 'bg-slate-600 text-white border-slate-600',
+};
+
+export default function ProductSelector({ selectedProducts, onProductsChange }) {
+    const [products, setProducts] = useState(DEFAULT_PRODUCTS);
+    const [showAddNew, setShowAddNew] = useState(false);
+    const [newProductName, setNewProductName] = useState('');
+
+    const toggleProduct = (product) => {
+        if (selectedProducts.find(p => p.id === product.id)) {
+            onProductsChange(selectedProducts.filter(p => p.id !== product.id));
+        } else {
+            onProductsChange([...selectedProducts, product]);
+        }
+    };
+
+    const addNewProduct = () => {
+        if (newProductName.trim()) {
+            const colors = Object.keys(colorClasses);
+            const newProduct = {
+                id: Date.now(),
+                name: newProductName.trim(),
+                color: colors[Math.floor(Math.random() * colors.length)]
+            };
+            setProducts([...products, newProduct]);
+            setNewProductName('');
+            setShowAddNew(false);
+        }
+    };
+
+    const removeProduct = (productId) => {
+        setProducts(products.filter(p => p.id !== productId));
+        onProductsChange(selectedProducts.filter(p => p.id !== productId));
+    };
+
+    return (
+        <div className="w-full">
+            <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-2">
+                    <Package className="h-5 w-5 text-slate-400" />
+                    <span className="text-sm font-medium text-slate-600">
+                        Select products for outreach
+                    </span>
+                </div>
+                {selectedProducts.length > 0 && (
+                    <Badge variant="secondary" className="bg-violet-100 text-violet-700">
+                        {selectedProducts.length} selected
+                    </Badge>
+                )}
+            </div>
+
+            <div className="flex flex-wrap gap-2 mb-4">
+                <AnimatePresence>
+                    {products.map((product) => {
+                        const isSelected = selectedProducts.find(p => p.id === product.id);
+                        return (
+                            <motion.button
+                                key={product.id}
+                                initial={{ opacity: 0, scale: 0.8 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                exit={{ opacity: 0, scale: 0.8 }}
+                                whileHover={{ scale: 1.02 }}
+                                whileTap={{ scale: 0.98 }}
+                                onClick={() => toggleProduct(product)}
+                                className={`
+                                    group relative flex items-center gap-2 px-4 py-2.5 rounded-xl 
+                                    border transition-all duration-200 font-medium text-sm
+                                    ${isSelected 
+                                        ? selectedColorClasses[product.color] 
+                                        : colorClasses[product.color]
+                                    }
+                                `}
+                            >
+                                {isSelected && (
+                                    <Check className="h-4 w-4" />
+                                )}
+                                <span>{product.name}</span>
+                                {!DEFAULT_PRODUCTS.find(p => p.id === product.id) && (
+                                    <button
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            removeProduct(product.id);
+                                        }}
+                                        className={`
+                                            ml-1 rounded-full p-0.5 transition-colors
+                                            ${isSelected 
+                                                ? 'hover:bg-white/20' 
+                                                : 'hover:bg-black/10'
+                                            }
+                                        `}
+                                    >
+                                        <X className="h-3 w-3" />
+                                    </button>
+                                )}
+                            </motion.button>
+                        );
+                    })}
+                </AnimatePresence>
+
+                <AnimatePresence>
+                    {showAddNew ? (
+                        <motion.div
+                            initial={{ opacity: 0, width: 0 }}
+                            animate={{ opacity: 1, width: 'auto' }}
+                            exit={{ opacity: 0, width: 0 }}
+                            className="flex items-center gap-2"
+                        >
+                            <Input
+                                value={newProductName}
+                                onChange={(e) => setNewProductName(e.target.value)}
+                                placeholder="Product name..."
+                                className="h-10 w-48 text-sm"
+                                onKeyDown={(e) => e.key === 'Enter' && addNewProduct()}
+                                autoFocus
+                            />
+                            <Button
+                                size="sm"
+                                onClick={addNewProduct}
+                                className="bg-violet-600 hover:bg-violet-700"
+                            >
+                                Add
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => {
+                                    setShowAddNew(false);
+                                    setNewProductName('');
+                                }}
+                            >
+                                Cancel
+                            </Button>
+                        </motion.div>
+                    ) : (
+                        <motion.button
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            onClick={() => setShowAddNew(true)}
+                            className="flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 border-dashed 
+                                       border-slate-200 text-slate-400 hover:border-violet-300 hover:text-violet-500
+                                       transition-colors duration-200 text-sm font-medium"
+                        >
+                            <Plus className="h-4 w-4" />
+                            <span>Add Product</span>
+                        </motion.button>
+                    )}
+                </AnimatePresence>
+            </div>
+        </div>
+    );
+}

frontend/src/components/prompts/PromptEditor.jsx

@@ -0,0 +1,268 @@
+import React, { useState, useEffect } from 'react';
+import { FileText, Save, RotateCcw, Sparkles, CheckCircle2 } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { motion, AnimatePresence } from 'framer-motion';
+
+const DEFAULT_TEMPLATES = {
+    'Accounts Payable Automation': `Subject: Transform Your AP Process, {{first_name}}
+
+Hi {{first_name}},
+
+I noticed {{company}} is scaling fast—congrats! With growth often comes invoice chaos.
+
+Our AP Automation solution helps companies like yours:
+• Cut invoice processing time by 80%
+• Eliminate manual data entry errors
+• Get real-time visibility into cash flow
+
+Would you be open to a quick 15-minute call to see if this could work for {{company}}?
+
+Best,
+{{sender_name}}`,
+    
+    'Sales Order Processing': `Subject: Faster Order-to-Cash for {{company}}
+
+Hi {{first_name}},
+
+Managing sales orders manually? I've seen how that slows down teams at growing companies like {{company}}.
+
+Our Sales Order Processing solution automates:
+• Order capture from any channel
+• Inventory checks and allocation
+• Fulfillment workflows
+
+Companies see 60% faster order processing on average.
+
+Worth a quick chat?
+
+Best,
+{{sender_name}}`,
+    
+    'Document Management': `Subject: {{first_name}}, stop losing documents
+
+Hi {{first_name}},
+
+Quick question: How much time does your team at {{company}} spend searching for documents?
+
+Our Document Management system gives you:
+• Instant search across all files
+• Automated organization and tagging
+• Secure access controls
+
+Most teams save 5+ hours per week.
+
+Interested in seeing a quick demo?
+
+Best,
+{{sender_name}}`,
+    
+    'Invoice Processing': `Subject: {{company}}'s invoice backlog solved
+
+Hi {{first_name}},
+
+Processing invoices shouldn't take your team's entire day.
+
+Our Invoice Processing solution uses AI to:
+• Extract data from any invoice format
+• Auto-match with POs and receipts
+• Route for approval automatically
+
+Result: 90% less manual work.
+
+Can I show you how it works?
+
+Best,
+{{sender_name}}`,
+    
+    'Expense Management': `Subject: Expense reports without the headache
+
+Hi {{first_name}},
+
+Chasing receipts and approvals is nobody's favorite task at {{company}}.
+
+Our Expense Management platform:
+• Captures receipts via mobile
+• Enforces policies automatically
+• Syncs with your accounting system
+
+Teams close books 3 days faster on average.
+
+Quick call to discuss?
+
+Best,
+{{sender_name}}`,
+    
+    'Procurement Automation': `Subject: Smarter purchasing for {{company}}
+
+Hi {{first_name}},
+
+Is your procurement process as efficient as it could be?
+
+Our Procurement Automation helps:
+• Streamline purchase requests
+• Manage vendor relationships
+• Track spend in real-time
+
+Companies typically save 15% on procurement costs.
+
+Would love to show you how.
+
+Best,
+{{sender_name}}`,
+};
+
+export default function PromptEditor({ selectedProducts, prompts, onPromptsChange }) {
+    const [activeTab, setActiveTab] = useState(selectedProducts[0]?.name || '');
+    const [savedStatus, setSavedStatus] = useState({});
+    const [localPrompts, setLocalPrompts] = useState({});
+
+    useEffect(() => {
+        if (selectedProducts.length > 0 && !activeTab) {
+            setActiveTab(selectedProducts[0].name);
+        }
+        if (selectedProducts.length > 0 && !selectedProducts.find(p => p.name === activeTab)) {
+            setActiveTab(selectedProducts[0].name);
+        }
+    }, [selectedProducts, activeTab]);
+
+    useEffect(() => {
+        // Initialize prompts for selected products
+        const newPrompts = {};
+        selectedProducts.forEach(product => {
+            newPrompts[product.name] = prompts[product.name] || DEFAULT_TEMPLATES[product.name] || 
+                `Subject: {{first_name}}, let's talk about ${product.name}\n\nHi {{first_name}},\n\nI wanted to reach out about how ${product.name} could benefit {{company}}.\n\n[Your personalized message here]\n\nBest,\n{{sender_name}}`;
+        });
+        setLocalPrompts(newPrompts);
+    }, [selectedProducts]);
+
+    const handlePromptChange = (productName, value) => {
+        setLocalPrompts(prev => ({
+            ...prev,
+            [productName]: value
+        }));
+        setSavedStatus(prev => ({
+            ...prev,
+            [productName]: false
+        }));
+    };
+
+    const handleSave = (productName) => {
+        onPromptsChange({
+            ...prompts,
+            [productName]: localPrompts[productName]
+        });
+        setSavedStatus(prev => ({
+            ...prev,
+            [productName]: true
+        }));
+        setTimeout(() => {
+            setSavedStatus(prev => ({
+                ...prev,
+                [productName]: false
+            }));
+        }, 2000);
+    };
+
+    const handleReset = (productName) => {
+        const defaultTemplate = DEFAULT_TEMPLATES[productName] || 
+            `Subject: {{first_name}}, let's talk about ${productName}\n\nHi {{first_name}},\n\nI wanted to reach out about how ${productName} could benefit {{company}}.\n\n[Your personalized message here]\n\nBest,\n{{sender_name}}`;
+        handlePromptChange(productName, defaultTemplate);
+    };
+
+    if (selectedProducts.length === 0) {
+        return (
+            <div className="rounded-2xl border border-slate-200 bg-slate-50/50 p-12 text-center">
+                <div className="mx-auto w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                    <FileText className="h-8 w-8 text-slate-300" />
+                </div>
+                <h3 className="text-lg font-semibold text-slate-400 mb-2">No products selected</h3>
+                <p className="text-sm text-slate-400">Select at least one product above to configure the prompt template</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className="w-full h-auto flex-wrap justify-start gap-2 bg-transparent p-0 mb-4">
+                    {selectedProducts.map((product) => (
+                        <TabsTrigger
+                            key={product.id}
+                            value={product.name}
+                            className="rounded-lg px-4 py-2 text-sm font-medium transition-all bg-transparent data-[state=active]:bg-violet-600 data-[state=active]:text-white"
+                        >
+                            {product.name}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+
+                <AnimatePresence mode="wait">
+                    {selectedProducts.map((product) => (
+                        <TabsContent key={product.id} value={product.name} className="mt-0">
+                            <motion.div
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -10 }}
+                                transition={{ duration: 0.2 }}
+                                className="rounded-2xl border border-slate-200 bg-white overflow-hidden"
+                            >
+                                <div className="border-b border-slate-100 bg-slate-50/50 px-6 py-4 flex items-center justify-between">
+                                    <div className="flex items-center gap-3">
+                                        <div className="rounded-lg bg-violet-100 p-2">
+                                            <Sparkles className="h-4 w-4 text-violet-600" />
+                                        </div>
+                                        <div>
+                                            <h4 className="font-semibold text-slate-800">Email Template</h4>
+                                            <p className="text-xs text-slate-500">
+                                                Use variables: {"{{first_name}}"}, {"{{company}}"}, {"{{sender_name}}"}
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => handleReset(product.name)}
+                                            className="text-slate-500 hover:text-slate-700"
+                                        >
+                                            <RotateCcw className="h-4 w-4 mr-1" />
+                                            Reset
+                                        </Button>
+                                        <Button
+                                            size="sm"
+                                            onClick={() => handleSave(product.name)}
+                                            className="bg-violet-600 hover:bg-violet-700"
+                                        >
+                                            {savedStatus[product.name] ? (
+                                                <>
+                                                    <CheckCircle2 className="h-4 w-4 mr-1" />
+                                                    Saved!
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Save className="h-4 w-4 mr-1" />
+                                                    Save Template
+                                                </>
+                                            )}
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="p-6">
+                                    <Textarea
+                                        value={localPrompts[product.name] || ''}
+                                        onChange={(e) => handlePromptChange(product.name, e.target.value)}
+                                        placeholder="Enter your email template here..."
+                                        className="min-h-[320px] font-mono text-sm leading-relaxed resize-none 
+                                                   border-slate-200 focus:border-violet-300 focus:ring-violet-200"
+                                    />
+                                </div>
+                            </motion.div>
+                        </TabsContent>
+                    ))}
+                </AnimatePresence>
+            </Tabs>
+        </div>
+    );
+}

frontend/src/components/sequences/SequenceCard.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { User, Building2, Mail, ChevronDown, ChevronUp, Copy, CheckCircle2 } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { motion } from 'framer-motion';
+
+export default function SequenceCard({ sequence, index }) {
+    const [isExpanded, setIsExpanded] = useState(index < 3);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(sequence.emailContent);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: index * 0.05 }}
+            className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:shadow-md transition-shadow"
+        >
+            <div 
+                className="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-slate-50/50 transition-colors"
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className="flex items-center gap-4">
+                    <div className="h-10 w-10 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 
+                                    flex items-center justify-center text-white font-semibold text-sm">
+                        {sequence.firstName?.[0]}{sequence.lastName?.[0]}
+                    </div>
+                    <div>
+                        <h4 className="font-semibold text-slate-800">
+                            {sequence.firstName} {sequence.lastName}
+                        </h4>
+                        <div className="flex items-center gap-3 text-sm text-slate-500">
+                            <span className="flex items-center gap-1">
+                                <Building2 className="h-3.5 w-3.5" />
+                                {sequence.company}
+                            </span>
+                            <span className="flex items-center gap-1">
+                                <Mail className="h-3.5 w-3.5" />
+                                {sequence.email}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                    <Badge className="bg-violet-100 text-violet-700 hover:bg-violet-100">
+                        {sequence.product}
+                    </Badge>
+                    {isExpanded ? (
+                        <ChevronUp className="h-5 w-5 text-slate-400" />
+                    ) : (
+                        <ChevronDown className="h-5 w-5 text-slate-400" />
+                    )}
+                </div>
+            </div>
+
+            {isExpanded && (
+                <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="border-t border-slate-100"
+                >
+                    <div className="px-5 py-4 bg-slate-50/50">
+                        <div className="flex items-center justify-between mb-3">
+                            <h5 className="text-sm font-medium text-slate-600">Generated Email</h5>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleCopy();
+                                }}
+                                className="h-8 text-slate-500 hover:text-violet-600"
+                            >
+                                {copied ? (
+                                    <>
+                                        <CheckCircle2 className="h-4 w-4 mr-1 text-green-500" />
+                                        Copied!
+                                    </>
+                                ) : (
+                                    <>
+                                        <Copy className="h-4 w-4 mr-1" />
+                                        Copy
+                                    </>
+                                )}
+                            </Button>
+                        </div>
+                        <div className="bg-white rounded-lg border border-slate-200 p-4">
+                            <div className="mb-3 pb-3 border-b border-slate-100">
+                                <span className="text-xs text-slate-400 uppercase tracking-wide">Subject</span>
+                                <p className="text-sm font-medium text-slate-800 mt-1">{sequence.subject}</p>
+                            </div>
+                            <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
+                                {sequence.emailContent}
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            )}
+        </motion.div>
+    );
+}

frontend/src/components/sequences/SequenceViewer.jsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { Download, Mail, Loader2, CheckCircle2, Search, Filter } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { motion, AnimatePresence } from 'framer-motion';
+import SequenceCard from './SequenceCard';
+
+export default function SequenceViewer({ isGenerating, contactCount, selectedProducts, uploadedFile, prompts, onComplete }) {
+    const [sequences, setSequences] = useState([]);
+    const [progress, setProgress] = useState(0);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filterProduct, setFilterProduct] = useState('all');
+    const [isComplete, setIsComplete] = useState(false);
+
+    useEffect(() => {
+        if (isGenerating && uploadedFile?.fileId) {
+            setSequences([]);
+            setProgress(0);
+            setIsComplete(false);
+            
+            // Start streaming sequences from API
+            const eventSource = new EventSource(`/api/generate-sequences?file_id=${uploadedFile.fileId}`, {
+                withCredentials: false
+            });
+            
+            eventSource.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    
+                    if (data.type === 'sequence') {
+                        setSequences(prev => [...prev, data.sequence]);
+                        setProgress((data.sequence.id / contactCount) * 100);
+                    } else if (data.type === 'progress') {
+                        setProgress(data.progress);
+                    } else if (data.type === 'complete') {
+                        setIsComplete(true);
+                        onComplete?.();
+                        eventSource.close();
+                    } else if (data.type === 'error') {
+                        console.error('Generation error:', data.error);
+                        alert('Error generating sequences: ' + data.error);
+                        eventSource.close();
+                    }
+                } catch (error) {
+                    console.error('Error parsing SSE data:', error);
+                }
+            };
+            
+            eventSource.onerror = (error) => {
+                console.error('SSE error:', error);
+                eventSource.close();
+                if (!isComplete) {
+                    alert('Connection error. Please try again.');
+                }
+            };
+            
+            return () => {
+                eventSource.close();
+            };
+        }
+    }, [isGenerating, uploadedFile, contactCount, selectedProducts, prompts, onComplete, isComplete]);
+
+    const handleDownload = async () => {
+        try {
+            const response = await fetch(`/api/download-sequences?file_id=${uploadedFile.fileId}`);
+            if (response.ok) {
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'email_sequences.csv';
+                a.click();
+                URL.revokeObjectURL(url);
+            } else {
+                alert('Failed to download CSV. Please try again.');
+            }
+        } catch (error) {
+            console.error('Download error:', error);
+            alert('Error downloading CSV. Please try again.');
+        }
+    };
+
+    const filteredSequences = sequences.filter(seq => {
+        const matchesSearch = searchQuery === '' || 
+            seq.firstName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            seq.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            seq.company?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            seq.email?.toLowerCase().includes(searchQuery.toLowerCase());
+        
+        const matchesFilter = filterProduct === 'all' || seq.product === filterProduct;
+        
+        return matchesSearch && matchesFilter;
+    });
+
+    return (
+        <div className="w-full">
+            {/* Progress Header */}
+            <div className="rounded-2xl border border-slate-200 bg-white p-6 mb-6">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                        {isComplete ? (
+                            <div className="rounded-xl bg-green-100 p-3">
+                                <CheckCircle2 className="h-6 w-6 text-green-600" />
+                            </div>
+                        ) : (
+                            <div className="rounded-xl bg-violet-100 p-3">
+                                <Loader2 className="h-6 w-6 text-violet-600 animate-spin" />
+                            </div>
+                        )}
+                        <div>
+                            <h3 className="font-semibold text-slate-800">
+                                {isComplete ? 'Generation Complete!' : 'Generating Email Sequences...'}
+                            </h3>
+                            <p className="text-sm text-slate-500">
+                                {sequences.length} of {contactCount} sequences generated
+                            </p>
+                        </div>
+                    </div>
+                    {isComplete && (
+                        <Button
+                            onClick={handleDownload}
+                            className="bg-green-600 hover:bg-green-700"
+                        >
+                            <Download className="h-4 w-4 mr-2" />
+                            Download CSV for Klenty
+                        </Button>
+                    )}
+                </div>
+                <Progress value={progress} className="h-2" />
+            </div>
+
+            {/* Filters */}
+            {sequences.length > 0 && (
+                <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="flex flex-col sm:flex-row gap-3 mb-6"
+                >
+                    <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                        <Input
+                            placeholder="Search contacts..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="pl-10"
+                        />
+                    </div>
+                    <Select value={filterProduct} onValueChange={setFilterProduct}>
+                        <SelectTrigger className="w-full sm:w-48">
+                            <Filter className="h-4 w-4 mr-2 text-slate-400" />
+                            <SelectValue placeholder="Filter by product" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all">All Products</SelectItem>
+                            {selectedProducts.map(product => (
+                                <SelectItem key={product.id} value={product.name}>
+                                    {product.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </motion.div>
+            )}
+
+            {/* Sequence List */}
+            <div className="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
+                <AnimatePresence>
+                    {filteredSequences.map((sequence, index) => (
+                        <SequenceCard key={sequence.id} sequence={sequence} index={index} />
+                    ))}
+                </AnimatePresence>
+            </div>
+
+            {/* Empty State */}
+            {!isGenerating && sequences.length === 0 && (
+                <div className="text-center py-16">
+                    <div className="mx-auto w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                        <Mail className="h-8 w-8 text-slate-300" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-slate-400 mb-2">No sequences yet</h3>
+                    <p className="text-sm text-slate-400">Click "Generate Sequences" to start</p>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/ui/badge.jsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Badge = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80",
+    secondary: "border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80",
+    destructive: "border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80",
+    outline: "text-slate-950 border-slate-200",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2",
+        variants[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+Badge.displayName = "Badge"
+
+export { Badge }

frontend/src/components/ui/button.jsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Button = React.forwardRef(({ className, variant = "default", size = "default", ...props }, ref) => {
+  const variants = {
+    default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90",
+    destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90",
+    outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900",
+    secondary: "bg-slate-100 text-slate-900 hover:bg-slate-100/80",
+    ghost: "hover:bg-slate-100 hover:text-slate-900",
+    link: "text-slate-900 underline-offset-4 hover:underline",
+  }
+  
+  const sizes = {
+    default: "h-10 px-4 py-2",
+    sm: "h-9 rounded-md px-3",
+    lg: "h-11 rounded-md px-8",
+    icon: "h-10 w-10",
+  }
+
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50",
+        variants[variant],
+        sizes[size],
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+
+export { Button }

frontend/src/components/ui/input.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }

frontend/src/components/ui/progress.jsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative h-4 w-full overflow-hidden rounded-full bg-slate-200",
+        className
+      )}
+      {...props}
+    >
+      <div
+        className="h-full w-full flex-1 bg-violet-600 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </div>
+  )
+})
+Progress.displayName = "Progress"
+
+export { Progress }

frontend/src/components/ui/select.jsx

@@ -0,0 +1,95 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ChevronDown } from "lucide-react"
+
+const SelectContext = React.createContext(null)
+
+const Select = ({ value, onValueChange, children, ...props }) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [internalValue, setInternalValue] = React.useState("")
+  const currentValue = value !== undefined ? value : internalValue
+  const handleValueChange = (newValue) => {
+    if (onValueChange) {
+      onValueChange(newValue)
+    } else {
+      setInternalValue(newValue)
+    }
+    setIsOpen(false)
+  }
+
+  return (
+    <SelectContext.Provider value={{ value: currentValue, onValueChange: handleValueChange, isOpen, setIsOpen }}>
+      <div className="relative" {...props}>
+        {children}
+      </div>
+    </SelectContext.Provider>
+  )
+}
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+  const context = React.useContext(SelectContext)
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={() => context?.setIsOpen(!context.isOpen)}
+      className={cn(
+        "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </button>
+  )
+})
+SelectTrigger.displayName = "SelectTrigger"
+
+const SelectValue = ({ placeholder, ...props }) => {
+  const context = React.useContext(SelectContext)
+  const displayValue = context?.value || placeholder
+  return <span {...props}>{displayValue}</span>
+}
+
+const SelectContent = React.forwardRef(({ className, children, ...props }, ref) => {
+  const context = React.useContext(SelectContext)
+  if (!context?.isOpen) return null
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-slate-950 shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <div className="p-1">{children}</div>
+    </div>
+  )
+})
+SelectContent.displayName = "SelectContent"
+
+const SelectItem = React.forwardRef(({ className, value, children, ...props }, ref) => {
+  const context = React.useContext(SelectContext)
+  const isSelected = context?.value === value
+
+  return (
+    <div
+      ref={ref}
+      onClick={() => context?.onValueChange(value)}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-slate-100 focus:bg-slate-100",
+        isSelected && "bg-slate-100",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

frontend/src/components/ui/tabs.jsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const TabsContext = React.createContext(null)
+
+const Tabs = ({ defaultValue, value, onValueChange, className, children, ...props }) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue || "")
+  const currentValue = value !== undefined ? value : internalValue
+  const handleValueChange = onValueChange || setInternalValue
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <div className={cn("w-full", className)} {...props}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsList.displayName = "TabsList"
+
+const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => {
+  const context = React.useContext(TabsContext)
+  const isActive = context?.value === value
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={() => context?.onValueChange(value)}
+      data-state={isActive ? "active" : "inactive"}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        isActive ? "bg-white text-slate-950 shadow-sm" : "text-slate-500 hover:text-slate-950",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => {
+  const context = React.useContext(TabsContext)
+  const isActive = context?.value === value
+
+  if (!isActive) return null
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

frontend/src/components/ui/textarea.jsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

frontend/src/components/upload/UploadStep.jsx

@@ -0,0 +1,159 @@
+import React, { useState, useRef } from 'react';
+import { Upload, FileSpreadsheet, CheckCircle2, X, Users } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function UploadStep({ onFileUploaded, uploadedFile, onRemoveFile }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const file = e.dataTransfer.files[0];
+        if (file && file.name.endsWith('.csv')) {
+            await handleFileUpload(file);
+        }
+    };
+
+    const handleFileSelect = async (e) => {
+        const file = e.target.files[0];
+        if (file && file.name.endsWith('.csv')) {
+            await handleFileUpload(file);
+        }
+    };
+
+    const handleFileUpload = async (file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const response = await fetch('/api/upload-csv', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                onFileUploaded({
+                    name: file.name,
+                    size: file.size,
+                    contactCount: data.contact_count,
+                    fileId: data.file_id
+                });
+            } else {
+                alert('Failed to upload file. Please try again.');
+            }
+        } catch (error) {
+            console.error('Upload error:', error);
+            alert('Error uploading file. Please try again.');
+        }
+    };
+
+    return (
+        <div className="w-full">
+            <AnimatePresence mode="wait">
+                {!uploadedFile ? (
+                    <motion.div
+                        key="upload"
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -10 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <div
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={handleDrop}
+                            onClick={() => fileInputRef.current?.click()}
+                            className={`
+                                relative cursor-pointer rounded-2xl border-2 border-dashed 
+                                transition-all duration-300 ease-out
+                                ${isDragging 
+                                    ? 'border-violet-500 bg-violet-50 scale-[1.02]' 
+                                    : 'border-slate-200 bg-slate-50/50 hover:border-violet-300 hover:bg-violet-50/30'
+                                }
+                            `}
+                        >
+                            <div className="flex flex-col items-center justify-center py-16 px-8">
+                                <div className={`
+                                    mb-6 rounded-2xl p-4 transition-all duration-300
+                                    ${isDragging ? 'bg-violet-100' : 'bg-white shadow-sm'}
+                                `}>
+                                    <Upload className={`
+                                        h-8 w-8 transition-colors duration-300
+                                        ${isDragging ? 'text-violet-600' : 'text-slate-400'}
+                                    `} />
+                                </div>
+                                <h3 className="text-lg font-semibold text-slate-800 mb-2">
+                                    Upload your Apollo CSV
+                                </h3>
+                                <p className="text-sm text-slate-500 text-center max-w-sm">
+                                    Drag and drop your contact list here, or click to browse
+                                </p>
+                                <div className="mt-6 flex items-center gap-2 text-xs text-slate-400">
+                                    <FileSpreadsheet className="h-4 w-4" />
+                                    <span>Supports .csv files exported from Apollo</span>
+                                </div>
+                            </div>
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept=".csv"
+                                onChange={handleFileSelect}
+                                className="hidden"
+                            />
+                        </div>
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        key="uploaded"
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        transition={{ duration: 0.3 }}
+                        className="rounded-2xl border border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-6"
+                    >
+                        <div className="flex items-start justify-between">
+                            <div className="flex items-start gap-4">
+                                <div className="rounded-xl bg-green-100 p-3">
+                                    <CheckCircle2 className="h-6 w-6 text-green-600" />
+                                </div>
+                                <div>
+                                    <h3 className="font-semibold text-slate-800 mb-1">
+                                        {uploadedFile.name}
+                                    </h3>
+                                    <div className="flex items-center gap-4 text-sm text-slate-500">
+                                        <span>{(uploadedFile.size / 1024).toFixed(1)} KB</span>
+                                        <div className="flex items-center gap-1.5 text-green-600 font-medium">
+                                            <Users className="h-4 w-4" />
+                                            <span>{uploadedFile.contactCount} contacts found</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={onRemoveFile}
+                                className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50"
+                            >
+                                <X className="h-4 w-4" />
+                            </Button>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}

frontend/src/index.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -0,0 +1,302 @@
+import React, { useState } from 'react';
+import { Sparkles, ArrowRight, ArrowLeft, Mail, Zap } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from 'framer-motion';
+
+import UploadStep from '@/components/upload/UploadStep';
+import ProductSelector from '@/components/products/ProductSelector';
+import PromptEditor from '@/components/prompts/PromptEditor';
+import SequenceViewer from '@/components/sequences/SequenceViewer';
+
+export default function EmailSequenceGenerator() {
+    const [step, setStep] = useState(1);
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [selectedProducts, setSelectedProducts] = useState([]);
+    const [prompts, setPrompts] = useState({});
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [generationComplete, setGenerationComplete] = useState(false);
+
+    const canProceedToStep2 = uploadedFile && selectedProducts.length > 0;
+    const canProceedToStep3 = Object.keys(prompts).length > 0;
+
+    const handleGenerate = async () => {
+        if (!uploadedFile?.fileId || selectedProducts.length === 0 || Object.keys(prompts).length === 0) {
+            alert('Please complete all steps before generating sequences.');
+            return;
+        }
+
+        setStep(3);
+        setIsGenerating(true);
+        
+        // Save prompts to backend
+        try {
+            await fetch('/api/save-prompts', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_id: uploadedFile.fileId,
+                    prompts: prompts,
+                    products: selectedProducts.map(p => p.name)
+                })
+            });
+        } catch (error) {
+            console.error('Error saving prompts:', error);
+        }
+    };
+
+    const handleGenerationComplete = () => {
+        setIsGenerating(false);
+        setGenerationComplete(true);
+    };
+
+    const handleReset = () => {
+        setStep(1);
+        setUploadedFile(null);
+        setSelectedProducts([]);
+        setPrompts({});
+        setIsGenerating(false);
+        setGenerationComplete(false);
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-violet-50">
+            {/* Header */}
+            <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
+                <div className="max-w-6xl mx-auto px-6 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 
+                                            flex items-center justify-center shadow-lg shadow-violet-200">
+                                <Zap className="h-5 w-5 text-white" />
+                            </div>
+                            <div>
+                                <h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
+                                <p className="text-xs text-slate-500">Personalized Email Outreach</p>
+                            </div>
+                        </div>
+                        {step > 1 && (
+                            <Button
+                                variant="ghost"
+                                onClick={handleReset}
+                                className="text-slate-500 hover:text-slate-700"
+                            >
+                                Start Over
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-6xl mx-auto px-6 py-8">
+                {/* Progress Steps */}
+                <div className="mb-10">
+                    <div className="flex items-center justify-center gap-4">
+                        {[
+                            { num: 1, label: 'Upload & Select' },
+                            { num: 2, label: 'Configure Prompts' },
+                            { num: 3, label: 'Generate & Export' }
+                        ].map((s, idx) => (
+                            <React.Fragment key={s.num}>
+                                <div className="flex items-center gap-2">
+                                    <div className={`
+                                        h-8 w-8 rounded-full flex items-center justify-center text-sm font-semibold
+                                        transition-all duration-300
+                                        ${step >= s.num 
+                                            ? 'bg-violet-600 text-white shadow-lg shadow-violet-200' 
+                                            : 'bg-slate-100 text-slate-400'
+                                        }
+                                    `}>
+                                        {s.num}
+                                    </div>
+                                    <span className={`text-sm font-medium hidden sm:block ${
+                                        step >= s.num ? 'text-slate-800' : 'text-slate-400'
+                                    }`}>
+                                        {s.label}
+                                    </span>
+                                </div>
+                                {idx < 2 && (
+                                    <div className={`h-0.5 w-12 rounded-full transition-colors duration-300 ${
+                                        step > s.num ? 'bg-violet-600' : 'bg-slate-200'
+                                    }`} />
+                                )}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                </div>
+
+                <AnimatePresence mode="wait">
+                    {/* Step 1: Upload & Product Selection */}
+                    {step === 1 && (
+                        <motion.div
+                            key="step1"
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            exit={{ opacity: 0, x: 20 }}
+                            transition={{ duration: 0.3 }}
+                            className="space-y-8"
+                        >
+                            <div className="text-center mb-8">
+                                <h2 className="text-2xl font-bold text-slate-800 mb-2">
+                                    Upload Your Contacts
+                                </h2>
+                                <p className="text-slate-500">
+                                    Import your Apollo CSV and select the products for your outreach campaign
+                                </p>
+                            </div>
+
+                            <UploadStep
+                                onFileUploaded={setUploadedFile}
+                                uploadedFile={uploadedFile}
+                                onRemoveFile={() => setUploadedFile(null)}
+                            />
+
+                            {uploadedFile && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: 20 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    transition={{ delay: 0.2 }}
+                                >
+                                    <ProductSelector
+                                        selectedProducts={selectedProducts}
+                                        onProductsChange={setSelectedProducts}
+                                    />
+                                </motion.div>
+                            )}
+
+                            <div className="flex justify-end pt-4">
+                                <Button
+                                    onClick={() => setStep(2)}
+                                    disabled={!canProceedToStep2}
+                                    className="bg-violet-600 hover:bg-violet-700 px-6"
+                                >
+                                    Continue to Prompts
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            </div>
+                        </motion.div>
+                    )}
+
+                    {/* Step 2: Prompt Configuration */}
+                    {step === 2 && (
+                        <motion.div
+                            key="step2"
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            exit={{ opacity: 0, x: 20 }}
+                            transition={{ duration: 0.3 }}
+                            className="space-y-8"
+                        >
+                            <div className="text-center mb-8">
+                                <h2 className="text-2xl font-bold text-slate-800 mb-2">
+                                    Customize Your Email Templates
+                                </h2>
+                                <p className="text-slate-500">
+                                    Edit the prompt templates for each product. The AI will personalize these for each contact.
+                                </p>
+                            </div>
+
+                            <PromptEditor
+                                selectedProducts={selectedProducts}
+                                prompts={prompts}
+                                onPromptsChange={setPrompts}
+                            />
+
+                            <div className="flex justify-between pt-4">
+                                <Button
+                                    variant="outline"
+                                    onClick={() => setStep(1)}
+                                    className="px-6"
+                                >
+                                    <ArrowLeft className="h-4 w-4 mr-2" />
+                                    Back
+                                </Button>
+                                <Button
+                                    onClick={handleGenerate}
+                                    disabled={!canProceedToStep3}
+                                    className="bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 
+                                               hover:to-purple-700 px-8 shadow-lg shadow-violet-200"
+                                >
+                                    <Sparkles className="h-4 w-4 mr-2" />
+                                    Generate Sequences
+                                </Button>
+                            </div>
+                        </motion.div>
+                    )}
+
+                    {/* Step 3: Generation & Results */}
+                    {step === 3 && (
+                        <motion.div
+                            key="step3"
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            exit={{ opacity: 0, x: 20 }}
+                            transition={{ duration: 0.3 }}
+                            className="space-y-8"
+                        >
+                            <div className="text-center mb-8">
+                                <h2 className="text-2xl font-bold text-slate-800 mb-2">
+                                    {generationComplete ? 'Your Sequences Are Ready!' : 'Generating Personalized Emails'}
+                                </h2>
+                                <p className="text-slate-500">
+                                    {generationComplete 
+                                        ? 'Review your sequences below and download when ready'
+                                        : 'Our AI is crafting personalized emails for each contact'
+                                    }
+                                </p>
+                            </div>
+
+                            <SequenceViewer
+                                isGenerating={isGenerating}
+                                contactCount={uploadedFile?.contactCount || 50}
+                                selectedProducts={selectedProducts}
+                                uploadedFile={uploadedFile}
+                                prompts={prompts}
+                                onComplete={handleGenerationComplete}
+                            />
+
+                            {!isGenerating && (
+                                <div className="flex justify-start pt-4">
+                                    <Button
+                                        variant="outline"
+                                        onClick={() => setStep(2)}
+                                        className="px-6"
+                                    >
+                                        <ArrowLeft className="h-4 w-4 mr-2" />
+                                        Edit Templates
+                                    </Button>
+                                </div>
+                            )}
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </main>
+
+            {/* Footer */}
+            <footer className="border-t border-slate-100 mt-16">
+                <div className="max-w-6xl mx-auto px-6 py-6">
+                    <p className="text-center text-sm text-slate-400">
+                        Powered by AI • Export ready for Klenty, Outreach, and more
+                    </p>
+                </div>
+            </footer>
+
+            {/* Custom Scrollbar Styles */}
+            <style>{`
+                .custom-scrollbar::-webkit-scrollbar {
+                    width: 6px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-track {
+                    background: #f1f5f9;
+                    border-radius: 3px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb {
+                    background: #cbd5e1;
+                    border-radius: 3px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+                    background: #94a3b8;
+                }
+            `}</style>
+        </div>
+    );
+}

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -1,9 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
 
 // IMPORTANT: proxy API calls to backend when running both inside one container
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   server: {
     proxy: {
       "/api": "http://127.0.0.1:8000"