update

README.md

@@ -17,34 +17,60 @@ A Hugging Face Space application for generating personalized email outreach sequ
 - 📤 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
+- 🤖 AI-powered sequence generation using GPT (up to 10 emails per contact)
 - 📊 Real-time streaming of generated sequences
 - 💾 Download sequences as CSV for use in Klenty and other email tools
+- 🚀 Smartlead integration for direct campaign creation and lead pushing
+- 📈 Run history tracking for all Smartlead pushes
 
 ## Setup
 
-1. Set your OpenAI API key as a secret in Hugging Face Spaces:
+1. Set your API keys as secrets in Hugging Face Spaces:
    - Go to Settings → Secrets
-   - Add `OPENAI_API_KEY` with your API key value
+   - Add `OPENAI_API_KEY` with your OpenAI API key value
+   - Add `SMARTLEAD_API_KEY` with your Smartlead API key value (optional, for Smartlead integration)
 
 2. The app will automatically:
    - Create SQLite database in `/data/emailout.db`
    - Store uploaded CSV files in `/data/uploads/`
    - Generate and store email sequences
+   - Track Smartlead run history
 
 ## 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
+4. **Generate**: Let AI create personalized sequences for each contact (up to 10 emails per contact)
+5. **Export Options**:
+   - **Download CSV**: Export sequences as CSV for Klenty, Outreach, etc.
+   - **Push to Smartlead**: Directly create campaigns and push leads to Smartlead
+6. **View History**: Check run history for all Smartlead pushes
 
 ## Tech Stack
 
-- **Frontend**: React + Vite + Tailwind CSS + Framer Motion
+- **Frontend**: React + Vite + Tailwind CSS + Framer Motion + React Router
 - **Backend**: FastAPI + Python
 - **AI**: OpenAI GPT API
 - **Database**: SQLite (Hugging Face Spaces persistent storage)
+- **Integration**: Smartlead API for campaign management
+
+## 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 (with all subject/body columns)
+- `POST /api/push-to-smartlead` - Push sequences to Smartlead campaign
+- `GET /api/smartlead-runs` - Get Smartlead run history
+
+## Smartlead Integration
+
+The app supports direct integration with Smartlead:
+- Create new campaigns or use existing ones
+- Automatically build sequence templates with variables ({{subject_1}}..{{subject_10}}, {{body_1}}..{{body_10}})
+- Push leads with custom variables for personalized sequences
+- Track all runs in the Run History page
+- Dry run mode for testing without sending to Smartlead
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

backend/app/database.py

@@ -54,6 +54,27 @@ class GeneratedSequence(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class SmartleadRun(Base):
+    __tablename__ = "smartlead_runs"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    file_id = Column(String, index=True)
+    run_id = Column(String, unique=True, index=True)
+    campaign_id = Column(String, index=True)
+    campaign_name = Column(String)
+    mode = Column(String)  # 'existing' or 'new'
+    steps_count = Column(Integer)
+    dry_run = Column(Integer, default=0)  # 0 = false, 1 = true
+    total_leads = Column(Integer)
+    added_leads = Column(Integer, default=0)
+    skipped_leads = Column(Integer, default=0)
+    failed_leads = Column(Integer, default=0)
+    error_details = Column(Text)  # JSON string of errors
+    status = Column(String)  # 'pending', 'completed', 'failed'
+    created_at = Column(DateTime, default=datetime.utcnow)
+    completed_at = Column(DateTime, nullable=True)
+
+
 # Create tables
 Base.metadata.create_all(bind=engine)
 

backend/app/main.py

@@ -13,10 +13,12 @@ import concurrent.futures
 from typing import Dict, List
 import json
 import asyncio
+from datetime import datetime
 
-from .database import get_db, UploadedFile, Prompt, GeneratedSequence
-from .models import UploadResponse, PromptSaveRequest, SequenceResponse
+from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun
+from .models import UploadResponse, PromptSaveRequest, SequenceResponse, SmartleadPushRequest, SmartleadRunResponse
 from .gpt_service import generate_email_sequence
+from .smartlead_client import SmartleadClient
 
 app = FastAPI()
 
@@ -212,7 +214,7 @@ async def generate_sequences(
 
 @app.get("/api/download-sequences")
 async def download_sequences(file_id: str = Query(...), db: Session = Depends(get_db)):
-    """Download generated sequences as CSV"""
+    """Download generated sequences as CSV with all subject/body fields"""
     try:
         # Get all sequences for this file, grouped by contact
         sequences = db.query(GeneratedSequence).filter(
@@ -222,29 +224,48 @@ async def download_sequences(file_id: str = Query(...), db: Session = Depends(ge
         if not sequences:
             raise HTTPException(status_code=404, detail="No sequences found")
         
+        # Group sequences by contact
+        contacts = {}
+        for seq in sequences:
+            contact_key = f"{seq.sequence_id}"
+            if contact_key not in contacts:
+                contacts[contact_key] = {
+                    'first_name': seq.first_name,
+                    'last_name': seq.last_name,
+                    'email': seq.email,
+                    'company': seq.company,
+                    'title': seq.title or '',
+                    'product': seq.product,
+                    'subjects': {},
+                    'bodies': {}
+                }
+            contacts[contact_key]['subjects'][seq.email_number] = seq.subject
+            contacts[contact_key]['bodies'][seq.email_number] = seq.email_content
+        
         # Create CSV in memory
         output = io.StringIO()
         writer = csv.writer(output)
         
-        # Write header
-        writer.writerow([
-            'First Name', 'Last Name', 'Email', 'Company', 'Title', 
-            'Product', 'Email Number', 'Subject', 'Email Content'
-        ])
+        # Write header with all subject/body columns
+        header = ['First Name', 'Last Name', 'Email', 'Company', 'Title', 'Product']
+        for i in range(1, 11):
+            header.extend([f'Subject {i}', f'Body {i}'])
+        writer.writerow(header)
         
-        # Write rows (one row per email in sequence)
-        for seq in sequences:
-            writer.writerow([
-                seq.first_name,
-                seq.last_name,
-                seq.email,
-                seq.company,
-                seq.title or '',
-                seq.product,
-                seq.email_number,
-                seq.subject,
-                seq.email_content.replace('\n', ' ').replace('\r', '')
-            ])
+        # Write rows (one row per contact with all subjects/bodies)
+        for contact in contacts.values():
+            row = [
+                contact['first_name'],
+                contact['last_name'],
+                contact['email'],
+                contact['company'],
+                contact['title'],
+                contact['product']
+            ]
+            for i in range(1, 11):
+                row.append(contact['subjects'].get(i, ''))
+                row.append(contact['bodies'].get(i, '').replace('\n', ' ').replace('\r', ''))
+            writer.writerow(row)
         
         output.seek(0)
         
@@ -261,6 +282,217 @@ async def download_sequences(file_id: str = Query(...), db: Session = Depends(ge
         raise HTTPException(status_code=500, detail=f"Error downloading sequences: {str(e)}")
 
 
+@app.post("/api/push-to-smartlead")
+async def push_to_smartlead(request: SmartleadPushRequest, db: Session = Depends(get_db)):
+    """Push generated sequences to Smartlead campaign"""
+    import uuid
+    
+    try:
+        # Get all sequences for this file
+        sequences = db.query(GeneratedSequence).filter(
+            GeneratedSequence.file_id == request.file_id
+        ).order_by(GeneratedSequence.sequence_id, GeneratedSequence.email_number).all()
+        
+        if not sequences:
+            raise HTTPException(status_code=404, detail="No sequences found")
+        
+        # Group sequences by contact
+        contacts = {}
+        for seq in sequences:
+            contact_key = f"{seq.sequence_id}"
+            if contact_key not in contacts:
+                contacts[contact_key] = {
+                    'first_name': seq.first_name,
+                    'last_name': seq.last_name,
+                    'email': seq.email,
+                    'company': seq.company,
+                    'title': seq.title or '',
+                    'subjects': {},
+                    'bodies': {}
+                }
+            contacts[contact_key]['subjects'][seq.email_number] = seq.subject
+            contacts[contact_key]['bodies'][seq.email_number] = seq.email_content
+        
+        # Create run record
+        run_id = str(uuid.uuid4())
+        run = SmartleadRun(
+            run_id=run_id,
+            file_id=request.file_id,
+            mode=request.mode,
+            campaign_id=request.campaign_id or '',
+            campaign_name=request.campaign_name or '',
+            steps_count=request.steps_count,
+            dry_run=1 if request.dry_run else 0,
+            total_leads=len(contacts),
+            status='pending'
+        )
+        db.add(run)
+        db.commit()
+        
+        if request.dry_run:
+            # Dry run - just return what would be sent
+            return {
+                "run_id": run_id,
+                "campaign_id": request.campaign_id,
+                "campaign_name": request.campaign_name,
+                "steps_count": request.steps_count,
+                "total": len(contacts),
+                "added": 0,
+                "skipped": 0,
+                "failed": 0,
+                "errors": [],
+                "status": "dry_run_completed",
+                "message": "Dry run completed. No leads were sent to Smartlead."
+            }
+        
+        # Initialize Smartlead client
+        try:
+            client = SmartleadClient()
+        except ValueError as e:
+            run.status = 'failed'
+            run.error_details = str(e)
+            db.commit()
+            raise HTTPException(status_code=400, detail=str(e))
+        
+        campaign_id = request.campaign_id
+        
+        # Create campaign if mode is 'new'
+        if request.mode == 'new':
+            try:
+                campaign_response = client.create_campaign(request.campaign_name)
+                campaign_id = campaign_response.get('campaign_id') or campaign_response.get('id')
+                if not campaign_id:
+                    raise Exception("Campaign creation failed: No campaign_id returned")
+                
+                run.campaign_id = campaign_id
+                db.commit()
+                
+                # Build and save sequences
+                sequences_data = client.build_sequences(request.steps_count)
+                client.save_campaign_sequence(campaign_id, sequences_data)
+                
+            except Exception as e:
+                run.status = 'failed'
+                run.error_details = str(e)
+                db.commit()
+                raise HTTPException(status_code=500, detail=f"Failed to create campaign: {str(e)}")
+        
+        # Prepare leads for Smartlead
+        leads = []
+        errors = []
+        added_count = 0
+        skipped_count = 0
+        failed_count = 0
+        
+        for contact in contacts.values():
+            try:
+                # Build custom variables
+                custom_variables = {}
+                for i in range(1, 11):
+                    if i in contact['subjects']:
+                        custom_variables[f'subject_{i}'] = contact['subjects'][i]
+                    if i in contact['bodies']:
+                        custom_variables[f'body_{i}'] = contact['bodies'][i]
+                
+                lead = {
+                    "email": contact['email'],
+                    "first_name": contact['first_name'],
+                    "last_name": contact['last_name'],
+                    "company": contact['company'],
+                    "title": contact['title'],
+                    "custom_variables": custom_variables
+                }
+                leads.append(lead)
+                
+            except Exception as e:
+                errors.append({
+                    "email": contact.get('email', 'unknown'),
+                    "error": str(e)
+                })
+                failed_count += 1
+        
+        # Batch add leads (chunk in batches of 50)
+        batch_size = 50
+        for i in range(0, len(leads), batch_size):
+            batch = leads[i:i + batch_size]
+            try:
+                response = client.add_leads_to_campaign(campaign_id, batch)
+                # TODO: Parse response to get added/skipped counts
+                added_count += len(batch)
+            except Exception as e:
+                # Mark batch as failed
+                for lead in batch:
+                    errors.append({
+                        "email": lead.get('email', 'unknown'),
+                        "error": str(e)
+                    })
+                    failed_count += 1
+        
+        # Update run record
+        run.status = 'completed'
+        run.added_leads = added_count
+        run.skipped_leads = skipped_count
+        run.failed_leads = failed_count
+        run.error_details = json.dumps(errors) if errors else None
+        run.completed_at = datetime.utcnow()
+        db.commit()
+        
+        return {
+            "run_id": run_id,
+            "campaign_id": campaign_id,
+            "campaign_name": request.campaign_name or '',
+            "steps_count": request.steps_count,
+            "total": len(contacts),
+            "added": added_count,
+            "skipped": skipped_count,
+            "failed": failed_count,
+            "errors": errors[:10],  # Return first 10 errors
+            "status": "completed"
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        if 'run' in locals():
+            run.status = 'failed'
+            run.error_details = str(e)
+            db.commit()
+        raise HTTPException(status_code=500, detail=f"Error pushing to Smartlead: {str(e)}")
+
+
+@app.get("/api/smartlead-runs")
+async def get_smartlead_runs(file_id: str = Query(None), db: Session = Depends(get_db)):
+    """Get Smartlead run history"""
+    try:
+        query = db.query(SmartleadRun)
+        if file_id:
+            query = query.filter(SmartleadRun.file_id == file_id)
+        
+        runs = query.order_by(SmartleadRun.created_at.desc()).limit(50).all()
+        
+        return [
+            {
+                "run_id": run.run_id,
+                "file_id": run.file_id,
+                "campaign_id": run.campaign_id,
+                "campaign_name": run.campaign_name,
+                "mode": run.mode,
+                "steps_count": run.steps_count,
+                "dry_run": bool(run.dry_run),
+                "total_leads": run.total_leads,
+                "added_leads": run.added_leads,
+                "skipped_leads": run.skipped_leads,
+                "failed_leads": run.failed_leads,
+                "status": run.status,
+                "created_at": run.created_at.isoformat() if run.created_at else None,
+                "completed_at": run.completed_at.isoformat() if run.completed_at else None
+            }
+            for run in runs
+        ]
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error fetching runs: {str(e)}")
+
+
 # ---- Frontend static serving ----
 FRONTEND_DIST = Path(__file__).resolve().parents[2] / "frontend" / "dist"
 INDEX_FILE = FRONTEND_DIST / "index.html"

backend/app/models.py

@@ -25,3 +25,25 @@ class SequenceResponse(BaseModel):
     product: str
     subject: str
     emailContent: str
+
+
+class SmartleadPushRequest(BaseModel):
+    file_id: str
+    mode: str  # 'existing' or 'new'
+    campaign_id: Optional[str] = None
+    campaign_name: Optional[str] = None
+    steps_count: int = 4
+    dry_run: bool = False
+
+
+class SmartleadRunResponse(BaseModel):
+    run_id: str
+    campaign_id: Optional[str] = None
+    campaign_name: Optional[str] = None
+    steps_count: int
+    total: int
+    added: int
+    skipped: int
+    failed: int
+    errors: List[Dict] = []
+    status: str

backend/app/smartlead_client.py

@@ -0,0 +1,95 @@
+import os
+import requests
+import time
+from typing import Dict, List, Optional
+from datetime import datetime
+
+
+class SmartleadClient:
+    """Client for Smartlead API integration"""
+    
+    BASE_URL = "https://server.smartlead.ai/api/v1"
+    
+    def __init__(self, api_key: Optional[str] = None):
+        self.api_key = api_key or os.getenv("SMARTLEAD_API_KEY")
+        if not self.api_key:
+            raise ValueError("SMARTLEAD_API_KEY environment variable is required")
+        
+        self.headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+    
+    def _make_request(self, method: str, endpoint: str, data: Optional[Dict] = None, max_retries: int = 3) -> Dict:
+        """Make API request with retry logic for 429/5xx errors"""
+        url = f"{self.BASE_URL}{endpoint}"
+        
+        for attempt in range(max_retries):
+            try:
+                response = requests.request(
+                    method=method,
+                    url=url,
+                    headers=self.headers,
+                    json=data,
+                    timeout=30
+                )
+                
+                # Handle rate limiting
+                if response.status_code == 429:
+                    retry_after = int(response.headers.get("Retry-After", 60))
+                    if attempt < max_retries - 1:
+                        time.sleep(retry_after)
+                        continue
+                
+                # Handle server errors
+                if response.status_code >= 500:
+                    if attempt < max_retries - 1:
+                        time.sleep(2 ** attempt)  # Exponential backoff
+                        continue
+                
+                response.raise_for_status()
+                return response.json() if response.content else {}
+                
+            except requests.exceptions.RequestException as e:
+                if attempt == max_retries - 1:
+                    raise Exception(f"Smartlead API error after {max_retries} attempts: {str(e)}")
+                time.sleep(2 ** attempt)
+        
+        raise Exception("Failed to make request after retries")
+    
+    def create_campaign(self, name: str) -> Dict:
+        """Create a new campaign"""
+        data = {
+            "campaign_name": name,
+            # TODO: Add other campaign settings if needed
+        }
+        return self._make_request("POST", "/campaigns/create", data)
+    
+    def save_campaign_sequence(self, campaign_id: str, sequences: List[Dict]) -> Dict:
+        """Save campaign sequence steps"""
+        data = {
+            "sequences": sequences
+        }
+        return self._make_request("POST", f"/campaigns/{campaign_id}/sequences", data)
+    
+    def add_leads_to_campaign(self, campaign_id: str, leads: List[Dict]) -> Dict:
+        """Add leads to a campaign"""
+        data = {
+            "leads": leads
+        }
+        return self._make_request("POST", f"/campaigns/{campaign_id}/leads", data)
+    
+    def update_campaign_settings(self, campaign_id: str, settings: Dict) -> Dict:
+        """Update campaign settings"""
+        return self._make_request("POST", f"/campaigns/{campaign_id}/settings", settings)
+    
+    def build_sequences(self, steps_count: int) -> List[Dict]:
+        """Build sequence templates for campaign"""
+        sequences = []
+        for i in range(1, steps_count + 1):
+            sequences.append({
+                "step": i,
+                "subject": f"{{{{subject_{i}}}}}",
+                "email_body": f"Hi {{{{first_name}}}},\n\n{{{{body_{i}}}}}\n\nAnna"
+            })
+        return sequences

backend/requirements.txt

@@ -4,4 +4,5 @@ python-multipart
 openai
 pandas
 aiofiles
-sqlalchemy
+sqlalchemy
+requests

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.0",
     "framer-motion": "^11.0.0",
     "lucide-react": "^0.344.0",
     "class-variance-authority": "^0.7.0",

frontend/src/App.jsx

@@ -1,7 +1,16 @@
 import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
+import RunHistory from "./pages/RunHistory";
 import "./index.css";
 
 export default function App() {
-  return <EmailSequenceGenerator />;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<EmailSequenceGenerator />} />
+        <Route path="/history" element={<RunHistory />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }

frontend/src/components/smartlead/SmartleadPanel.jsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import { Send, Download, Loader2, CheckCircle2, AlertCircle, Settings } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { motion } from 'framer-motion';
+
+export default function SmartleadPanel({ uploadedFile, sequencesCount, onPushComplete }) {
+    const [mode, setMode] = useState('existing');
+    const [campaignId, setCampaignId] = useState('');
+    const [campaignName, setCampaignName] = useState('');
+    const [stepsCount, setStepsCount] = useState(4);
+    const [dryRun, setDryRun] = useState(false);
+    const [isPushing, setIsPushing] = useState(false);
+    const [pushResult, setPushResult] = useState(null);
+    const [error, setError] = useState(null);
+
+    const handlePushToSmartlead = async () => {
+        if (!uploadedFile?.fileId) {
+            setError('No file uploaded');
+            return;
+        }
+
+        if (mode === 'existing' && !campaignId.trim()) {
+            setError('Campaign ID is required');
+            return;
+        }
+
+        if (mode === 'new' && !campaignName.trim()) {
+            setError('Campaign name is required');
+            return;
+        }
+
+        setIsPushing(true);
+        setError(null);
+        setPushResult(null);
+
+        try {
+            const response = await fetch('/api/push-to-smartlead', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_id: uploadedFile.fileId,
+                    mode: mode,
+                    campaign_id: mode === 'existing' ? campaignId.trim() : null,
+                    campaign_name: mode === 'new' ? campaignName.trim() : null,
+                    steps_count: stepsCount,
+                    dry_run: dryRun
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                setPushResult(data);
+                onPushComplete?.(data);
+            } else {
+                setError(data.detail || 'Failed to push to Smartlead');
+            }
+        } catch (err) {
+            setError('Network error: ' + err.message);
+        } finally {
+            setIsPushing(false);
+        }
+    };
+
+    const handleDownloadCSV = 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.');
+        }
+    };
+
+    return (
+        <div className="w-full">
+            <div className="rounded-2xl border border-slate-200 bg-white p-6">
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="rounded-xl bg-blue-100 p-3">
+                        <Settings className="h-6 w-6 text-blue-600" />
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-slate-800">Send via Smartlead</h3>
+                        <p className="text-sm text-slate-500">Push sequences to Smartlead campaign</p>
+                    </div>
+                </div>
+
+                {/* Mode Selector */}
+                <div className="mb-6">
+                    <label className="text-sm font-medium text-slate-700 mb-2 block">
+                        Campaign Mode
+                    </label>
+                    <Select value={mode} onValueChange={setMode}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="existing">Use Existing Campaign ID</SelectItem>
+                            <SelectItem value="new">Create New Campaign</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                {/* Campaign ID (Mode 1) */}
+                {mode === 'existing' && (
+                    <div className="mb-4">
+                        <label className="text-sm font-medium text-slate-700 mb-2 block">
+                            Campaign ID
+                        </label>
+                        <Input
+                            value={campaignId}
+                            onChange={(e) => setCampaignId(e.target.value)}
+                            placeholder="Enter existing campaign ID"
+                            className="w-full"
+                        />
+                    </div>
+                )}
+
+                {/* Campaign Name (Mode 2) */}
+                {mode === 'new' && (
+                    <div className="mb-4">
+                        <label className="text-sm font-medium text-slate-700 mb-2 block">
+                            Campaign Name
+                        </label>
+                        <Input
+                            value={campaignName}
+                            onChange={(e) => setCampaignName(e.target.value)}
+                            placeholder="Enter campaign name"
+                            className="w-full"
+                        />
+                    </div>
+                )}
+
+                {/* Steps Count */}
+                <div className="mb-4">
+                    <label className="text-sm font-medium text-slate-700 mb-2 block">
+                        Steps to Use
+                    </label>
+                    <Select value={stepsCount.toString()} onValueChange={(v) => setStepsCount(parseInt(v))}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => (
+                                <SelectItem key={num} value={num.toString()}>
+                                    {num} {num === 1 ? 'step' : 'steps'}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <p className="text-xs text-slate-500 mt-1">
+                        Must align with generated sequences (max {sequencesCount || 10})
+                    </p>
+                </div>
+
+                {/* Dry Run Toggle */}
+                <div className="mb-6 flex items-center gap-2">
+                    <input
+                        type="checkbox"
+                        id="dry-run"
+                        checked={dryRun}
+                        onChange={(e) => setDryRun(e.target.checked)}
+                        className="rounded border-slate-300"
+                    />
+                    <label htmlFor="dry-run" className="text-sm text-slate-700">
+                        Dry run (generate but do not call Smartlead)
+                    </label>
+                </div>
+
+                {/* Error Display */}
+                {error && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2"
+                    >
+                        <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
+                        <div className="flex-1">
+                            <p className="text-sm font-medium text-red-800">Error</p>
+                            <p className="text-sm text-red-600">{error}</p>
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* Success Result */}
+                {pushResult && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="mb-4 p-4 rounded-lg bg-green-50 border border-green-200"
+                    >
+                        <div className="flex items-start gap-2 mb-3">
+                            <CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5" />
+                            <div className="flex-1">
+                                <p className="text-sm font-medium text-green-800 mb-2">
+                                    {pushResult.status === 'dry_run_completed' ? 'Dry Run Completed' : 'Push Successful'}
+                                </p>
+                                {pushResult.campaign_id && (
+                                    <p className="text-xs text-green-700 mb-1">
+                                        Campaign ID: <span className="font-mono">{pushResult.campaign_id}</span>
+                                    </p>
+                                )}
+                                {pushResult.campaign_name && (
+                                    <p className="text-xs text-green-700 mb-1">
+                                        Campaign: {pushResult.campaign_name}
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2 text-xs">
+                            <div>
+                                <span className="text-green-600">Total:</span> {pushResult.total}
+                            </div>
+                            <div>
+                                <span className="text-green-600">Added:</span> {pushResult.added}
+                            </div>
+                            {pushResult.skipped > 0 && (
+                                <div>
+                                    <span className="text-green-600">Skipped:</span> {pushResult.skipped}
+                                </div>
+                            )}
+                            {pushResult.failed > 0 && (
+                                <div>
+                                    <span className="text-red-600">Failed:</span> {pushResult.failed}
+                                </div>
+                            )}
+                        </div>
+                        {pushResult.errors && pushResult.errors.length > 0 && (
+                            <div className="mt-2 pt-2 border-t border-green-200">
+                                <p className="text-xs font-medium text-green-800 mb-1">Errors:</p>
+                                <div className="max-h-32 overflow-y-auto">
+                                    {pushResult.errors.slice(0, 5).map((err, idx) => (
+                                        <p key={idx} className="text-xs text-red-600">
+                                            {err.email}: {err.error}
+                                        </p>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </motion.div>
+                )}
+
+                {/* Actions */}
+                <div className="flex gap-3">
+                    <Button
+                        onClick={handlePushToSmartlead}
+                        disabled={isPushing || !uploadedFile?.fileId}
+                        className="flex-1 bg-blue-600 hover:bg-blue-700"
+                    >
+                        {isPushing ? (
+                            <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Pushing...
+                            </>
+                        ) : (
+                            <>
+                                <Send className="h-4 w-4 mr-2" />
+                                Generate + Push to Smartlead
+                            </>
+                        )}
+                    </Button>
+                    <Button
+                        onClick={handleDownloadCSV}
+                        variant="outline"
+                        className="flex-1"
+                    >
+                        <Download className="h-4 w-4 mr-2" />
+                        Download CSV
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -7,6 +7,7 @@ import UploadStep from '@/components/upload/UploadStep';
 import ProductSelector from '@/components/products/ProductSelector';
 import PromptEditor from '@/components/prompts/PromptEditor';
 import SequenceViewer from '@/components/sequences/SequenceViewer';
+import SmartleadPanel from '@/components/smartlead/SmartleadPanel';
 
 export default function EmailSequenceGenerator() {
     const [step, setStep] = useState(1);
@@ -254,8 +255,25 @@ export default function EmailSequenceGenerator() {
                                 onComplete={handleGenerationComplete}
                             />
 
+                            {generationComplete && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: 20 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    transition={{ delay: 0.3 }}
+                                    className="mt-8"
+                                >
+                                    <SmartleadPanel
+                                        uploadedFile={uploadedFile}
+                                        sequencesCount={uploadedFile?.contactCount || 0}
+                                        onPushComplete={(result) => {
+                                            console.log('Push completed:', result);
+                                        }}
+                                    />
+                                </motion.div>
+                            )}
+
                             {!isGenerating && (
-                                <div className="flex justify-start pt-4">
+                                <div className="flex justify-between pt-4">
                                     <Button
                                         variant="outline"
                                         onClick={() => setStep(2)}
@@ -264,6 +282,13 @@ export default function EmailSequenceGenerator() {
                                         <ArrowLeft className="h-4 w-4 mr-2" />
                                         Edit Templates
                                     </Button>
+                                    <Button
+                                        variant="outline"
+                                        onClick={() => window.location.href = '/history'}
+                                        className="px-6"
+                                    >
+                                        View Run History
+                                    </Button>
                                 </div>
                             )}
                         </motion.div>

frontend/src/pages/RunHistory.jsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from 'react';
+import { History, CheckCircle2, XCircle, Clock, ExternalLink, Filter } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { motion } from 'framer-motion';
+
+export default function RunHistory() {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [filterStatus, setFilterStatus] = useState('all');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    useEffect(() => {
+        fetchRuns();
+    }, []);
+
+    const fetchRuns = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch('/api/smartlead-runs');
+            if (response.ok) {
+                const data = await response.json();
+                setRuns(data);
+            }
+        } catch (error) {
+            console.error('Error fetching runs:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const filteredRuns = runs.filter(run => {
+        const matchesStatus = filterStatus === 'all' || run.status === filterStatus;
+        const matchesSearch = searchQuery === '' || 
+            run.campaign_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            run.campaign_id?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            run.run_id?.toLowerCase().includes(searchQuery.toLowerCase());
+        return matchesStatus && matchesSearch;
+    });
+
+    const getStatusBadge = (status) => {
+        const variants = {
+            'completed': 'bg-green-100 text-green-700',
+            'failed': 'bg-red-100 text-red-700',
+            'pending': 'bg-yellow-100 text-yellow-700',
+            'dry_run_completed': 'bg-blue-100 text-blue-700'
+        };
+        return variants[status] || 'bg-slate-100 text-slate-700';
+    };
+
+    const getStatusIcon = (status) => {
+        if (status === 'completed' || status === 'dry_run_completed') {
+            return <CheckCircle2 className="h-4 w-4" />;
+        } else if (status === 'failed') {
+            return <XCircle className="h-4 w-4" />;
+        } else {
+            return <Clock className="h-4 w-4" />;
+        }
+    };
+
+    const formatDate = (dateString) => {
+        if (!dateString) return 'N/A';
+        const date = new Date(dateString);
+        return date.toLocaleString();
+    };
+
+    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">
+                                <History className="h-5 w-5 text-white" />
+                            </div>
+                            <div>
+                                <h1 className="font-bold text-slate-800 text-lg">Run History</h1>
+                                <p className="text-xs text-slate-500">Smartlead campaign push history</p>
+                            </div>
+                        </div>
+                        <Button
+                            variant="outline"
+                            onClick={() => window.location.href = '/'}
+                            className="text-slate-500 hover:text-slate-700"
+                        >
+                            Back to Generator
+                        </Button>
+                    </div>
+                </div>
+            </header>
+
+            <main className="max-w-6xl mx-auto px-6 py-8">
+                {/* Filters */}
+                <div className="mb-6 flex flex-col sm:flex-row gap-3">
+                    <div className="relative flex-1">
+                        <Input
+                            placeholder="Search by campaign name, ID, or run ID..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="pl-10"
+                        />
+                    </div>
+                    <Select value={filterStatus} onValueChange={setFilterStatus}>
+                        <SelectTrigger className="w-full sm:w-48">
+                            <Filter className="h-4 w-4 mr-2 text-slate-400" />
+                            <SelectValue placeholder="Filter by status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all">All Status</SelectItem>
+                            <SelectItem value="completed">Completed</SelectItem>
+                            <SelectItem value="failed">Failed</SelectItem>
+                            <SelectItem value="pending">Pending</SelectItem>
+                            <SelectItem value="dry_run_completed">Dry Run</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                {/* Runs List */}
+                {loading ? (
+                    <div className="text-center py-16">
+                        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-violet-600"></div>
+                        <p className="text-sm text-slate-500 mt-2">Loading runs...</p>
+                    </div>
+                ) : filteredRuns.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">
+                            <History className="h-8 w-8 text-slate-300" />
+                        </div>
+                        <h3 className="text-lg font-semibold text-slate-400 mb-2">No runs found</h3>
+                        <p className="text-sm text-slate-400">Push sequences to Smartlead to see history here</p>
+                    </div>
+                ) : (
+                    <div className="space-y-3">
+                        {filteredRuns.map((run, index) => (
+                            <motion.div
+                                key={run.run_id}
+                                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 p-5 hover:shadow-md transition-shadow"
+                            >
+                                <div className="flex items-start justify-between mb-4">
+                                    <div className="flex items-start gap-4 flex-1">
+                                        <div className={`rounded-lg p-2 ${getStatusBadge(run.status)}`}>
+                                            {getStatusIcon(run.status)}
+                                        </div>
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-2 mb-1">
+                                                <h4 className="font-semibold text-slate-800">
+                                                    {run.campaign_name || 'Unnamed Campaign'}
+                                                </h4>
+                                                <Badge className={getStatusBadge(run.status)}>
+                                                    {run.status}
+                                                </Badge>
+                                                {run.dry_run && (
+                                                    <Badge variant="outline" className="text-xs">
+                                                        Dry Run
+                                                    </Badge>
+                                                )}
+                                            </div>
+                                            <div className="flex flex-wrap items-center gap-4 text-sm text-slate-500">
+                                                {run.campaign_id && (
+                                                    <span className="font-mono text-xs">
+                                                        Campaign: {run.campaign_id}
+                                                    </span>
+                                                )}
+                                                <span>
+                                                    {run.mode === 'new' ? 'New Campaign' : 'Existing Campaign'}
+                                                </span>
+                                                <span>
+                                                    {run.steps_count} {run.steps_count === 1 ? 'step' : 'steps'}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="text-right text-xs text-slate-500">
+                                        <div>{formatDate(run.created_at)}</div>
+                                        {run.completed_at && (
+                                            <div className="text-slate-400 mt-1">
+                                                Completed: {formatDate(run.completed_at)}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Stats */}
+                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-4 border-t border-slate-100">
+                                    <div>
+                                        <div className="text-xs text-slate-500 mb-1">Total Leads</div>
+                                        <div className="text-lg font-semibold text-slate-800">{run.total_leads}</div>
+                                    </div>
+                                    <div>
+                                        <div className="text-xs text-slate-500 mb-1">Added</div>
+                                        <div className="text-lg font-semibold text-green-600">{run.added_leads}</div>
+                                    </div>
+                                    {run.skipped_leads > 0 && (
+                                        <div>
+                                            <div className="text-xs text-slate-500 mb-1">Skipped</div>
+                                            <div className="text-lg font-semibold text-yellow-600">{run.skipped_leads}</div>
+                                        </div>
+                                    )}
+                                    {run.failed_leads > 0 && (
+                                        <div>
+                                            <div className="text-xs text-slate-500 mb-1">Failed</div>
+                                            <div className="text-lg font-semibold text-red-600">{run.failed_leads}</div>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Run ID */}
+                                <div className="mt-3 pt-3 border-t border-slate-100">
+                                    <div className="flex items-center justify-between">
+                                        <span className="text-xs text-slate-400 font-mono">
+                                            Run ID: {run.run_id}
+                                        </span>
+                                        {run.campaign_id && (
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => {
+                                                    // TODO: Open Smartlead campaign URL if available
+                                                    window.open(`https://app.smartlead.ai/campaigns/${run.campaign_id}`, '_blank');
+                                                }}
+                                                className="h-7 text-xs"
+                                            >
+                                                <ExternalLink className="h-3 w-3 mr-1" />
+                                                View in Smartlead
+                                            </Button>
+                                        )}
+                                    </div>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+}