update

backend/app/database.py

@@ -219,6 +219,38 @@ class SmartleadRun(Base):
     completed_at = Column(DateTime, nullable=True)
 
 
+class UnipileAccount(Base):
+    __tablename__ = "unipile_accounts"
+
+    id = Column(Integer, primary_key=True, index=True)
+    tenant_id = Column(Integer, ForeignKey("tenants.id"), nullable=True, index=True)
+    label = Column(String, default="")
+    provider = Column(String, default="LINKEDIN")
+    unipile_account_id = Column(String, index=True)
+    status = Column(String, default="pending")
+    auth_mode = Column(String, default="hosted")
+    metadata_json = Column(JSON, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
+class LinkedinCampaign(Base):
+    __tablename__ = "linkedin_campaigns"
+
+    id = Column(Integer, primary_key=True, index=True)
+    tenant_id = Column(Integer, ForeignKey("tenants.id"), nullable=True, index=True)
+    name = Column(String, index=True)
+    status = Column(String, default="draft")  # draft | generated | running | completed | failed
+    unipile_account_ref_id = Column(Integer, ForeignKey("unipile_accounts.id"), nullable=False, index=True)
+    file_id = Column(String, index=True, nullable=True)
+    contact_count = Column(Integer, default=0)
+    prompt_template = Column(Text, default="")
+    execution_result = Column(JSON, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    executed_at = Column(DateTime, nullable=True)
+
+
 def run_migrations(connection_engine):
     """Add tenant_id to legacy SQLite tables and attach rows to the default tenant."""
     from sqlalchemy import inspect, text
@@ -232,6 +264,8 @@ def run_migrations(connection_engine):
         "crm_leads",
         "crm_deals",
         "smartlead_runs",
+        "unipile_accounts",
+        "linkedin_campaigns",
     )
 
     with connection_engine.begin() as conn:

backend/app/main.py

@@ -17,6 +17,7 @@ import json
 import asyncio
 import math
 import re
+import requests
 from datetime import datetime, timedelta
 from calendar import monthrange
 
@@ -33,6 +34,8 @@ from .database import (
     Contact,
     CrmLead,
     CrmDeal,
+    UnipileAccount,
+    LinkedinCampaign,
 )
 from pydantic import ValidationError
 
@@ -50,6 +53,10 @@ from .models import (
     ContactCreateRequest,
     ContactPatchRequest,
     WonBillingPayload,
+    UnipileConnectRequest,
+    LinkedinCampaignCreateRequest,
+    LinkedinCampaignGenerateRequest,
+    LinkedinCampaignExecuteRequest,
 )
 from .gmail_invite import send_invite_email_via_gmail
 from .gpt_service import generate_email_sequence, generate_linkedin_sequence, enrich_manual_contact_profile
@@ -94,6 +101,8 @@ app.include_router(tenant_router)
 # Create uploads directory
 UPLOAD_DIR = Path("/data/uploads")
 UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+UNIPILE_API_BASE = os.getenv("UNIPILE_API_BASE", "").rstrip("/")
+UNIPILE_API_KEY = os.getenv("UNIPILE_API_KEY", "")
 
 # ---- API ----
 def _safe_str(value):
@@ -139,6 +148,63 @@ def _pick_from_raw(raw_data: Dict, aliases: List[str]) -> str:
     return ""
 
 
+def _pick_linkedin_url(raw_data: Dict) -> str:
+    return _pick_from_raw(
+        raw_data,
+        [
+            "linkedin",
+            "linkedin url",
+            "linkedin profile",
+            "person linkedin url",
+            "linkedin profile url",
+            "linkedin_url",
+        ],
+    )
+
+
+def _require_unipile_config():
+    if not UNIPILE_API_BASE or not UNIPILE_API_KEY:
+        raise HTTPException(
+            status_code=400,
+            detail="UniPile is not configured. Set UNIPILE_API_BASE and UNIPILE_API_KEY in backend env.",
+        )
+
+
+def _unipile_headers():
+    return {
+        "X-API-KEY": UNIPILE_API_KEY,
+        "accept": "application/json",
+        "content-type": "application/json",
+    }
+
+
+def _unipile_request(method: str, path: str, payload: Optional[dict] = None):
+    _require_unipile_config()
+    url = f"{UNIPILE_API_BASE}{path}"
+    try:
+        resp = requests.request(
+            method=method.upper(),
+            url=url,
+            headers=_unipile_headers(),
+            json=payload,
+            timeout=45,
+        )
+    except requests.RequestException as e:
+        raise HTTPException(status_code=502, detail=f"UniPile request failed: {str(e)}")
+    data = None
+    try:
+        data = resp.json()
+    except Exception:
+        data = {"raw": resp.text}
+    if resp.status_code >= 400:
+        msg = data.get("message") if isinstance(data, dict) else None
+        raise HTTPException(
+            status_code=resp.status_code,
+            detail=msg or f"UniPile error ({resp.status_code})",
+        )
+    return data
+
+
 def _contact_value(contact: Contact, field: str):
     if field == "first_name":
         return contact.first_name or _pick_from_raw(contact.raw_data, ["first name", "firstname", "first_name"])
@@ -914,6 +980,459 @@ async def upload_csv(file: UploadFile = File(...), t: TenantContext = Depends(ge
         raise HTTPException(status_code=500, detail=f"Error uploading file: {str(e)}")
 
 
+@app.get("/api/unipile/linkedin/accounts")
+async def list_unipile_linkedin_accounts(t: TenantContext = Depends(get_tenant_context)):
+    rows = (
+        t.db.query(UnipileAccount)
+        .filter(UnipileAccount.tenant_id == t.tenant_id, UnipileAccount.provider == "LINKEDIN")
+        .order_by(UnipileAccount.created_at.desc(), UnipileAccount.id.desc())
+        .all()
+    )
+    return {
+        "accounts": [
+            {
+                "id": r.id,
+                "label": r.label or "LinkedIn account",
+                "provider": r.provider,
+                "unipile_account_id": r.unipile_account_id,
+                "status": r.status or "unknown",
+                "auth_mode": r.auth_mode or "hosted",
+                "created_at": r.created_at.isoformat() if r.created_at else None,
+            }
+            for r in rows
+        ]
+    }
+
+
+@app.post("/api/unipile/linkedin/connect")
+async def connect_unipile_linkedin(
+    body: UnipileConnectRequest,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    payload = {"provider": "LINKEDIN"}
+    if body.auth_mode == "credentials":
+        if not (body.username and body.password):
+            raise HTTPException(status_code=400, detail="username/password are required for credentials auth")
+        payload["username"] = body.username
+        payload["password"] = body.password
+    else:
+        if not body.access_token:
+            raise HTTPException(status_code=400, detail="access_token is required for cookie auth")
+        payload["access_token"] = body.access_token
+        if body.user_agent:
+            payload["user_agent"] = body.user_agent
+    if body.country:
+        payload["country"] = body.country
+    if body.ip:
+        payload["ip"] = body.ip
+
+    response = _unipile_request("POST", "/api/v1/accounts", payload)
+    account_id = _safe_str(response.get("account_id") if isinstance(response, dict) else "") or _safe_str(
+        response.get("id") if isinstance(response, dict) else ""
+    )
+    if not account_id:
+        # For checkpoint or alt response structures, still persist and expose raw response.
+        account_id = _safe_str((response or {}).get("account", {}).get("id") if isinstance(response, dict) else "")
+    if not account_id:
+        raise HTTPException(status_code=400, detail="UniPile did not return an account_id")
+
+    db_row = UnipileAccount(
+        tenant_id=t.tenant_id,
+        label=(body.label or "LinkedIn account").strip(),
+        provider="LINKEDIN",
+        unipile_account_id=account_id,
+        status=_safe_str(response.get("status") if isinstance(response, dict) else "") or "connected",
+        auth_mode=body.auth_mode,
+        metadata_json=response if isinstance(response, dict) else {"raw": str(response)},
+    )
+    t.db.add(db_row)
+    t.db.commit()
+    t.db.refresh(db_row)
+
+    return {
+        "message": "LinkedIn account connected",
+        "account": {
+            "id": db_row.id,
+            "label": db_row.label,
+            "unipile_account_id": db_row.unipile_account_id,
+            "status": db_row.status,
+        },
+        "unipile_response": response,
+    }
+
+
+@app.get("/api/linkedin-campaigns")
+async def list_linkedin_campaigns(t: TenantContext = Depends(get_tenant_context)):
+    rows = (
+        t.db.query(LinkedinCampaign, UnipileAccount)
+        .join(UnipileAccount, UnipileAccount.id == LinkedinCampaign.unipile_account_ref_id)
+        .filter(LinkedinCampaign.tenant_id == t.tenant_id)
+        .order_by(LinkedinCampaign.created_at.desc(), LinkedinCampaign.id.desc())
+        .all()
+    )
+    return {
+        "campaigns": [
+            {
+                "id": c.id,
+                "name": c.name,
+                "status": c.status,
+                "file_id": c.file_id,
+                "contact_count": c.contact_count or 0,
+                "prompt_template": c.prompt_template or "",
+                "unipile_account_ref_id": c.unipile_account_ref_id,
+                "unipile_account_label": a.label if a else "",
+                "created_at": c.created_at.isoformat() if c.created_at else None,
+                "executed_at": c.executed_at.isoformat() if c.executed_at else None,
+            }
+            for c, a in rows
+        ]
+    }
+
+
+@app.post("/api/linkedin-campaigns")
+async def create_linkedin_campaign(
+    body: LinkedinCampaignCreateRequest,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    account = (
+        t.db.query(UnipileAccount)
+        .filter(UnipileAccount.tenant_id == t.tenant_id, UnipileAccount.id == body.unipile_account_ref_id)
+        .first()
+    )
+    if not account:
+        raise HTTPException(status_code=404, detail="LinkedIn account not found")
+    name = (body.name or "").strip()
+    if not name:
+        raise HTTPException(status_code=400, detail="Campaign name is required")
+    row = LinkedinCampaign(
+        tenant_id=t.tenant_id,
+        name=name,
+        status="draft",
+        unipile_account_ref_id=body.unipile_account_ref_id,
+    )
+    t.db.add(row)
+    t.db.commit()
+    t.db.refresh(row)
+    return {"campaign_id": row.id, "message": "Campaign created"}
+
+
+@app.post("/api/linkedin-campaigns/{campaign_id}/upload-csv")
+async def upload_linkedin_campaign_csv(
+    campaign_id: int,
+    file: UploadFile = File(...),
+    t: TenantContext = Depends(get_tenant_context),
+):
+    db = t.db
+    campaign = (
+        db.query(LinkedinCampaign)
+        .filter(LinkedinCampaign.tenant_id == t.tenant_id, LinkedinCampaign.id == campaign_id)
+        .first()
+    )
+    if not campaign:
+        raise HTTPException(status_code=404, detail="Campaign not found")
+
+    file_id = str(uuid.uuid4())
+    file_path = UPLOAD_DIR / f"{file_id}.csv"
+    content = await file.read()
+    with open(file_path, "wb") as f:
+        f.write(content)
+    df = pd.read_csv(file_path)
+    contact_count = len(df)
+
+    db_file = UploadedFile(
+        tenant_id=t.tenant_id,
+        file_id=file_id,
+        filename=file.filename,
+        contact_count=contact_count,
+        file_path=str(file_path),
+    )
+    db.add(db_file)
+
+    # Replace prior campaign contacts from old file, if any.
+    if campaign.file_id:
+        db.query(Contact).filter(
+            Contact.tenant_id == t.tenant_id,
+            Contact.file_id == campaign.file_id,
+            Contact.source == "linkedin_campaign",
+        ).delete()
+        db.query(GeneratedSequence).filter(
+            GeneratedSequence.tenant_id == t.tenant_id,
+            GeneratedSequence.file_id == campaign.file_id,
+            GeneratedSequence.channel == "linkedin",
+            GeneratedSequence.product == campaign.name,
+        ).delete()
+
+    for idx, row in df.iterrows():
+        row_dict = row.to_dict()
+        sanitized_raw_data = {str(k): _json_safe(v) for k, v in row_dict.items()}
+        contact = Contact(
+            tenant_id=t.tenant_id,
+            file_id=file_id,
+            row_index=idx + 1,
+            first_name=_pick_field(row_dict, ["first name", "firstname", "first_name"]),
+            last_name=_pick_field(row_dict, ["last name", "lastname", "last_name"]),
+            email=_pick_field(row_dict, ["email", "work email", "email address"]),
+            company=_pick_field(row_dict, ["company", "company name", "organization name", "account name"]),
+            title=_pick_field(row_dict, ["title", "job title"]),
+            source="linkedin_campaign",
+            raw_data=sanitized_raw_data,
+        )
+        db.add(contact)
+
+    campaign.file_id = file_id
+    campaign.contact_count = contact_count
+    campaign.status = "draft"
+    campaign.updated_at = datetime.utcnow()
+    db.commit()
+    return {"file_id": file_id, "contact_count": contact_count, "message": "Campaign CSV uploaded"}
+
+
+@app.post("/api/linkedin-campaigns/{campaign_id}/generate")
+async def generate_linkedin_campaign_sequences(
+    campaign_id: int,
+    body: LinkedinCampaignGenerateRequest,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    db = t.db
+    campaign = (
+        db.query(LinkedinCampaign)
+        .filter(LinkedinCampaign.tenant_id == t.tenant_id, LinkedinCampaign.id == campaign_id)
+        .first()
+    )
+    if not campaign:
+        raise HTTPException(status_code=404, detail="Campaign not found")
+    if not campaign.file_id:
+        raise HTTPException(status_code=400, detail="Upload a campaign CSV first")
+
+    db_file = (
+        db.query(UploadedFile)
+        .filter(UploadedFile.tenant_id == t.tenant_id, UploadedFile.file_id == campaign.file_id)
+        .first()
+    )
+    if not db_file:
+        raise HTTPException(status_code=404, detail="Campaign file not found")
+
+    df = pd.read_csv(db_file.file_path)
+    db.query(GeneratedSequence).filter(
+        GeneratedSequence.tenant_id == t.tenant_id,
+        GeneratedSequence.file_id == campaign.file_id,
+        GeneratedSequence.channel == "linkedin",
+    ).delete()
+
+    sequence_id = 1
+    generated_rows = 0
+    for _, row in df.iterrows():
+        contact = row.to_dict()
+        li_list = generate_linkedin_sequence(contact, body.prompt_template, campaign.name)
+        for seq_data in li_list:
+            db.add(
+                GeneratedSequence(
+                    tenant_id=t.tenant_id,
+                    file_id=campaign.file_id,
+                    sequence_id=sequence_id,
+                    email_number=seq_data["email_number"],
+                    channel="linkedin",
+                    first_name=seq_data["first_name"],
+                    last_name=seq_data["last_name"],
+                    email=seq_data["email"],
+                    company=seq_data["company"],
+                    title=seq_data.get("title", ""),
+                    product=campaign.name,
+                    subject=seq_data.get("subject") or "",
+                    email_content=seq_data["email_content"],
+                )
+            )
+            generated_rows += 1
+        sequence_id += 1
+
+    campaign.prompt_template = body.prompt_template
+    campaign.status = "generated"
+    campaign.updated_at = datetime.utcnow()
+    db.commit()
+    return {"message": "LinkedIn sequences generated", "rows": generated_rows, "contacts": len(df)}
+
+
+@app.get("/api/linkedin-campaigns/{campaign_id}/sequences")
+async def get_linkedin_campaign_sequences(campaign_id: int, t: TenantContext = Depends(get_tenant_context)):
+    db = t.db
+    campaign = (
+        db.query(LinkedinCampaign)
+        .filter(LinkedinCampaign.tenant_id == t.tenant_id, LinkedinCampaign.id == campaign_id)
+        .first()
+    )
+    if not campaign:
+        raise HTTPException(status_code=404, detail="Campaign not found")
+    if not campaign.file_id:
+        return {"sequences": []}
+
+    rows = (
+        db.query(GeneratedSequence)
+        .filter(
+            GeneratedSequence.tenant_id == t.tenant_id,
+            GeneratedSequence.file_id == campaign.file_id,
+            GeneratedSequence.channel == "linkedin",
+        )
+        .order_by(GeneratedSequence.sequence_id, GeneratedSequence.email_number)
+        .all()
+    )
+    return {
+        "sequences": [
+            {
+                "id": r.id,
+                "sequence_id": r.sequence_id,
+                "email_number": r.email_number,
+                "first_name": r.first_name or "",
+                "last_name": r.last_name or "",
+                "email": r.email or "",
+                "company": r.company or "",
+                "title": r.title or "",
+                "subject": r.subject or "",
+                "message": r.email_content or "",
+            }
+            for r in rows
+        ]
+    }
+
+
+@app.post("/api/linkedin-campaigns/{campaign_id}/execute")
+async def execute_linkedin_campaign(
+    campaign_id: int,
+    body: LinkedinCampaignExecuteRequest,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    """
+    Execute generated LinkedIn campaign via UniPile.
+    This sends the first generated message per contact using UniPile chat-message route.
+    """
+    db = t.db
+    campaign = (
+        db.query(LinkedinCampaign)
+        .filter(LinkedinCampaign.tenant_id == t.tenant_id, LinkedinCampaign.id == campaign_id)
+        .first()
+    )
+    if not campaign:
+        raise HTTPException(status_code=404, detail="Campaign not found")
+    account = (
+        db.query(UnipileAccount)
+        .filter(UnipileAccount.tenant_id == t.tenant_id, UnipileAccount.id == campaign.unipile_account_ref_id)
+        .first()
+    )
+    if not account:
+        raise HTTPException(status_code=404, detail="Connected LinkedIn account not found")
+    if not campaign.file_id:
+        raise HTTPException(status_code=400, detail="Campaign has no uploaded CSV")
+
+    contacts = (
+        db.query(Contact)
+        .filter(
+            Contact.tenant_id == t.tenant_id,
+            Contact.file_id == campaign.file_id,
+            Contact.source == "linkedin_campaign",
+        )
+        .order_by(Contact.row_index.asc(), Contact.id.asc())
+        .all()
+    )
+    seq_rows = (
+        db.query(GeneratedSequence)
+        .filter(
+            GeneratedSequence.tenant_id == t.tenant_id,
+            GeneratedSequence.file_id == campaign.file_id,
+            GeneratedSequence.channel == "linkedin",
+            GeneratedSequence.email_number == 1,
+        )
+        .order_by(GeneratedSequence.sequence_id.asc())
+        .all()
+    )
+    msg_by_seq = {r.sequence_id: r for r in seq_rows}
+
+    sent = 0
+    skipped = 0
+    failed = 0
+    errors = []
+    attempts = []
+
+    for idx, c in enumerate(contacts, start=1):
+        first_msg = msg_by_seq.get(idx)
+        if not first_msg:
+            skipped += 1
+            continue
+        linkedin_url = _pick_linkedin_url(c.raw_data or {})
+        if not linkedin_url:
+            skipped += 1
+            errors.append(
+                {
+                    "contact_id": c.id,
+                    "reason": "missing_linkedin_url",
+                    "message": "No LinkedIn profile URL column found for this contact.",
+                }
+            )
+            continue
+        if body.dry_run:
+            sent += 1
+            attempts.append({"contact_id": c.id, "linkedin_url": linkedin_url, "status": "dry_run"})
+            continue
+        try:
+            # Best-effort execution path:
+            # 1) resolve profile from identifier
+            profile = _unipile_request(
+                "GET",
+                f"/api/v1/users/{requests.utils.quote(linkedin_url, safe='')}",
+            )
+            attendee_id = _safe_str(
+                profile.get("id") if isinstance(profile, dict) else ""
+            ) or _safe_str(profile.get("provider_id") if isinstance(profile, dict) else "")
+            if not attendee_id:
+                raise ValueError("UniPile profile id not found")
+
+            # 2) start or reuse 1:1 chat
+            chat = _unipile_request(
+                "POST",
+                "/api/v1/chats",
+                {
+                    "account_id": account.unipile_account_id,
+                    "attendees": [attendee_id],
+                },
+            )
+            chat_id = _safe_str(chat.get("id") if isinstance(chat, dict) else "")
+            if not chat_id:
+                raise ValueError("UniPile chat id not found")
+
+            # 3) send first generated LinkedIn message
+            _unipile_request(
+                "POST",
+                f"/api/v1/chats/{chat_id}/messages",
+                {
+                    "text": first_msg.email_content or "",
+                },
+            )
+            sent += 1
+            attempts.append({"contact_id": c.id, "linkedin_url": linkedin_url, "status": "sent"})
+        except Exception as e:
+            failed += 1
+            errors.append(
+                {
+                    "contact_id": c.id,
+                    "reason": "send_failed",
+                    "message": str(e),
+                }
+            )
+
+    result = {
+        "sent": sent,
+        "skipped": skipped,
+        "failed": failed,
+        "errors": errors[:100],
+        "attempts": attempts[:100],
+        "dry_run": body.dry_run,
+    }
+    campaign.status = "completed" if failed == 0 else "failed"
+    campaign.execution_result = result
+    campaign.executed_at = datetime.utcnow()
+    campaign.updated_at = datetime.utcnow()
+    db.commit()
+    return {"message": "Campaign execution finished", **result}
+
+
 @app.get("/api/contact-fields")
 async def contact_fields(t: TenantContext = Depends(get_tenant_context)):
     """Return all available contact field names from uploaded Apollo rows."""

backend/app/models.py

@@ -230,3 +230,27 @@ class SmartleadRunResponse(BaseModel):
     failed: int
     errors: List[Dict] = []
     status: str
+
+
+class UnipileConnectRequest(BaseModel):
+    label: str = "LinkedIn Account"
+    auth_mode: Literal["credentials", "cookie"] = "cookie"
+    username: Optional[str] = None
+    password: Optional[str] = None
+    access_token: Optional[str] = None
+    user_agent: Optional[str] = None
+    country: Optional[str] = None
+    ip: Optional[str] = None
+
+
+class LinkedinCampaignCreateRequest(BaseModel):
+    name: str
+    unipile_account_ref_id: int
+
+
+class LinkedinCampaignGenerateRequest(BaseModel):
+    prompt_template: str = Field(..., min_length=20)
+
+
+class LinkedinCampaignExecuteRequest(BaseModel):
+    dry_run: bool = False

frontend/src/components/campaigns/EmailGeneratorTab.jsx

@@ -0,0 +1,254 @@
+import React, { useMemo, useRef } from 'react';
+import { Sparkles, ArrowRight, ArrowLeft } 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';
+import { apiFetch } from '@/lib/api';
+import { useGeneratorWorkflow } from '@/context/GeneratorWorkflowContext';
+
+export default function EmailGeneratorTab() {
+    const {
+        step,
+        setStep,
+        uploadedFile,
+        setUploadedFile,
+        selectedProducts,
+        setSelectedProducts,
+        prompts,
+        setPrompts,
+        linkedinPrompts,
+        setLinkedinPrompts,
+        includeLinkedin,
+        setIncludeLinkedin,
+        isGenerating,
+        generationComplete,
+        beginGeneration,
+    } = useGeneratorWorkflow();
+
+    const generateButtonRef = useRef(null);
+
+    const canProceedToStep2 = uploadedFile && selectedProducts.length > 0;
+    const canProceedToStep3 = useMemo(() => {
+        const emailOk = selectedProducts.length > 0 && selectedProducts.every((p) => (prompts[p.name] || '').trim());
+        if (!emailOk) return false;
+        if (!includeLinkedin) return true;
+        return selectedProducts.every((p) => (linkedinPrompts[p.name] || '').trim());
+    }, [selectedProducts, prompts, linkedinPrompts, includeLinkedin]);
+
+    const scrollToGenerateButton = () => {
+        if (generateButtonRef.current) {
+            generateButtonRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    };
+
+    const handleGenerate = async () => {
+        if (!uploadedFile?.fileId || !canProceedToStep3) {
+            alert('Please complete all steps before generating sequences.');
+            return;
+        }
+        try {
+            const res = await apiFetch('/api/save-prompts', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_id: uploadedFile.fileId,
+                    prompts,
+                    products: selectedProducts.map((p) => p.name),
+                    linkedin_prompts: includeLinkedin ? linkedinPrompts : {},
+                }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.detail || res.statusText);
+            }
+        } catch (error) {
+            console.error('Error saving prompts:', error);
+            alert('Failed to save templates. Please try again.');
+            return;
+        }
+        setStep(3);
+        beginGeneration(true);
+    };
+
+    return (
+        <div>
+            <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 && (
+                    <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 products for your campaign
+                            </p>
+                        </div>
+                        <UploadStep
+                            onFileUploaded={setUploadedFile}
+                            uploadedFile={uploadedFile}
+                            onRemoveFile={() => setUploadedFile(null)}
+                        />
+                        {uploadedFile && (
+                            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
+                                <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 && (
+                    <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 Prompts</h2>
+                            <p className="text-slate-500">Edit templates before generation.</p>
+                        </div>
+                        <PromptEditor
+                            selectedProducts={selectedProducts}
+                            prompts={prompts}
+                            onPromptsChange={setPrompts}
+                            onSaveComplete={scrollToGenerateButton}
+                            variant="email"
+                        />
+                        <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                            <input
+                                type="checkbox"
+                                className="mt-1 h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-500"
+                                checked={includeLinkedin}
+                                onChange={(e) => setIncludeLinkedin(e.target.checked)}
+                            />
+                            <span>
+                                <span className="font-medium text-slate-800">
+                                    Also generate LinkedIn sequences for the same contacts
+                                </span>
+                            </span>
+                        </label>
+                        {includeLinkedin ? (
+                            <div className="space-y-2">
+                                <h3 className="text-lg font-semibold text-slate-800">LinkedIn prompts</h3>
+                                <PromptEditor
+                                    selectedProducts={selectedProducts}
+                                    prompts={linkedinPrompts}
+                                    onPromptsChange={setLinkedinPrompts}
+                                    onSaveComplete={scrollToGenerateButton}
+                                    variant="linkedin"
+                                />
+                            </div>
+                        ) : null}
+                        <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
+                                ref={generateButtonRef}
+                                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 && (
+                    <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…'}
+                            </h2>
+                            <p className="text-slate-500">
+                                {generationComplete
+                                    ? 'Review and export below.'
+                                    : 'You can navigate away; generation continues in background.'}
+                            </p>
+                        </div>
+                        <SequenceViewer />
+                        {!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>
+        </div>
+    );
+}

frontend/src/components/campaigns/LinkedinCampaignsTab.jsx

@@ -0,0 +1,366 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link2, Play, Upload, Sparkles, PlusCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiFetch } from '@/lib/api';
+
+export default function LinkedinCampaignsTab() {
+    const [accounts, setAccounts] = useState([]);
+    const [campaigns, setCampaigns] = useState([]);
+    const [selectedCampaignId, setSelectedCampaignId] = useState('');
+    const [sequences, setSequences] = useState([]);
+    const [busy, setBusy] = useState(false);
+
+    const [connectForm, setConnectForm] = useState({
+        label: 'LinkedIn Account',
+        auth_mode: 'cookie',
+        access_token: '',
+        user_agent: '',
+        username: '',
+        password: '',
+    });
+    const [createForm, setCreateForm] = useState({
+        name: '',
+        unipile_account_ref_id: '',
+    });
+    const [promptTemplate, setPromptTemplate] = useState(
+        'Write a concise LinkedIn message sequence (3 steps) personalized using first name, company, and title. Keep each message under 500 characters, human and non-spammy.'
+    );
+    const [dryRun, setDryRun] = useState(true);
+
+    const selectedCampaign = useMemo(
+        () => campaigns.find((c) => String(c.id) === String(selectedCampaignId)) || null,
+        [campaigns, selectedCampaignId]
+    );
+
+    const refreshAll = async () => {
+        const [accRes, cmpRes] = await Promise.all([
+            apiFetch('/api/unipile/linkedin/accounts'),
+            apiFetch('/api/linkedin-campaigns'),
+        ]);
+        const accJson = await accRes.json().catch(() => ({ accounts: [] }));
+        const cmpJson = await cmpRes.json().catch(() => ({ campaigns: [] }));
+        if (accRes.ok) setAccounts(accJson.accounts || []);
+        if (cmpRes.ok) setCampaigns(cmpJson.campaigns || []);
+    };
+
+    useEffect(() => {
+        refreshAll().catch((e) => console.error(e));
+    }, []);
+
+    useEffect(() => {
+        if (!selectedCampaignId) {
+            setSequences([]);
+            return;
+        }
+        apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/sequences`)
+            .then((r) => r.json())
+            .then((j) => setSequences(j.sequences || []))
+            .catch(() => setSequences([]));
+    }, [selectedCampaignId]);
+
+    const connectAccount = async () => {
+        setBusy(true);
+        try {
+            const payload =
+                connectForm.auth_mode === 'cookie'
+                    ? {
+                          label: connectForm.label,
+                          auth_mode: 'cookie',
+                          access_token: connectForm.access_token,
+                          user_agent: connectForm.user_agent,
+                      }
+                    : {
+                          label: connectForm.label,
+                          auth_mode: 'credentials',
+                          username: connectForm.username,
+                          password: connectForm.password,
+                      };
+            const res = await apiFetch('/api/unipile/linkedin/connect', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Could not connect LinkedIn account');
+            await refreshAll();
+            alert('LinkedIn account connected.');
+        } catch (e) {
+            alert(e.message || 'Could not connect account');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const createCampaign = async () => {
+        if (!createForm.name.trim() || !createForm.unipile_account_ref_id) return;
+        setBusy(true);
+        try {
+            const res = await apiFetch('/api/linkedin-campaigns', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: createForm.name.trim(),
+                    unipile_account_ref_id: Number(createForm.unipile_account_ref_id),
+                }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Could not create campaign');
+            setCreateForm((s) => ({ ...s, name: '' }));
+            await refreshAll();
+            setSelectedCampaignId(String(data.campaign_id));
+        } catch (e) {
+            alert(e.message || 'Could not create campaign');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const uploadCampaignCsv = async (file) => {
+        if (!selectedCampaignId) {
+            alert('Select a campaign first.');
+            return;
+        }
+        const fd = new FormData();
+        fd.append('file', file);
+        setBusy(true);
+        try {
+            const res = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/upload-csv`, {
+                method: 'POST',
+                body: fd,
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'CSV upload failed');
+            await refreshAll();
+            alert(`Uploaded ${data.contact_count || 0} contacts.`);
+        } catch (e) {
+            alert(e.message || 'CSV upload failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const generateMessages = async () => {
+        if (!selectedCampaignId) return;
+        setBusy(true);
+        try {
+            const res = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/generate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt_template: promptTemplate }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Generation failed');
+            const seqRes = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/sequences`);
+            const seqData = await seqRes.json().catch(() => ({ sequences: [] }));
+            setSequences(seqData.sequences || []);
+            await refreshAll();
+            alert(`Generated ${data.rows || 0} rows.`);
+        } catch (e) {
+            alert(e.message || 'Generation failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const executeCampaign = async () => {
+        if (!selectedCampaignId) return;
+        setBusy(true);
+        try {
+            const res = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/execute`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ dry_run: dryRun }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Execution failed');
+            await refreshAll();
+            alert(`Execution finished: sent=${data.sent}, skipped=${data.skipped}, failed=${data.failed}`);
+        } catch (e) {
+            alert(e.message || 'Execution failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="space-y-6">
+            <div className="rounded-2xl border border-slate-200 bg-white p-5">
+                <div className="mb-3 flex items-center justify-between">
+                    <h3 className="text-lg font-semibold text-slate-800">1) Connect LinkedIn (UniPile)</h3>
+                    <Button variant="outline" size="sm" onClick={refreshAll}>
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        Refresh
+                    </Button>
+                </div>
+                <div className="grid gap-3 md:grid-cols-2">
+                    <Input
+                        placeholder="Account label"
+                        value={connectForm.label}
+                        onChange={(e) => setConnectForm((s) => ({ ...s, label: e.target.value }))}
+                    />
+                    <select
+                        className="h-10 rounded-md border border-slate-200 px-3 text-sm"
+                        value={connectForm.auth_mode}
+                        onChange={(e) => setConnectForm((s) => ({ ...s, auth_mode: e.target.value }))}
+                    >
+                        <option value="cookie">Cookie (li_at)</option>
+                        <option value="credentials">Username / Password</option>
+                    </select>
+                    {connectForm.auth_mode === 'cookie' ? (
+                        <>
+                            <Input
+                                placeholder="li_at access token"
+                                value={connectForm.access_token}
+                                onChange={(e) => setConnectForm((s) => ({ ...s, access_token: e.target.value }))}
+                            />
+                            <Input
+                                placeholder="User-Agent (recommended)"
+                                value={connectForm.user_agent}
+                                onChange={(e) => setConnectForm((s) => ({ ...s, user_agent: e.target.value }))}
+                            />
+                        </>
+                    ) : (
+                        <>
+                            <Input
+                                placeholder="LinkedIn username/email"
+                                value={connectForm.username}
+                                onChange={(e) => setConnectForm((s) => ({ ...s, username: e.target.value }))}
+                            />
+                            <Input
+                                type="password"
+                                placeholder="LinkedIn password"
+                                value={connectForm.password}
+                                onChange={(e) => setConnectForm((s) => ({ ...s, password: e.target.value }))}
+                            />
+                        </>
+                    )}
+                </div>
+                <div className="mt-4">
+                    <Button onClick={connectAccount} disabled={busy}>
+                        <Link2 className="mr-2 h-4 w-4" />
+                        Connect Account
+                    </Button>
+                </div>
+                <div className="mt-3 text-sm text-slate-600">
+                    Connected accounts: {accounts.length}
+                </div>
+            </div>
+
+            <div className="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 className="mb-3 text-lg font-semibold text-slate-800">2) Create New LinkedIn Campaign</h3>
+                <div className="grid gap-3 md:grid-cols-3">
+                    <Input
+                        placeholder="Campaign name"
+                        value={createForm.name}
+                        onChange={(e) => setCreateForm((s) => ({ ...s, name: e.target.value }))}
+                    />
+                    <select
+                        className="h-10 rounded-md border border-slate-200 px-3 text-sm"
+                        value={createForm.unipile_account_ref_id}
+                        onChange={(e) =>
+                            setCreateForm((s) => ({ ...s, unipile_account_ref_id: e.target.value }))
+                        }
+                    >
+                        <option value="">Select LinkedIn account</option>
+                        {accounts.map((a) => (
+                            <option key={a.id} value={a.id}>
+                                {a.label} ({a.status || 'unknown'})
+                            </option>
+                        ))}
+                    </select>
+                    <Button onClick={createCampaign} disabled={busy}>
+                        <PlusCircle className="mr-2 h-4 w-4" />
+                        Create New
+                    </Button>
+                </div>
+                <div className="mt-4">
+                    <select
+                        className="h-10 w-full rounded-md border border-slate-200 px-3 text-sm"
+                        value={selectedCampaignId}
+                        onChange={(e) => setSelectedCampaignId(e.target.value)}
+                    >
+                        <option value="">Select campaign</option>
+                        {campaigns.map((c) => (
+                            <option key={c.id} value={c.id}>
+                                {c.name} · {c.status} · {c.contact_count || 0} contacts
+                            </option>
+                        ))}
+                    </select>
+                </div>
+            </div>
+
+            <div className="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 className="mb-3 text-lg font-semibold text-slate-800">3) Upload Apollo CSV</h3>
+                <div className="flex items-center gap-3">
+                    <Input
+                        type="file"
+                        accept=".csv"
+                        onChange={(e) => {
+                            const f = e.target.files?.[0];
+                            if (f) uploadCampaignCsv(f);
+                        }}
+                    />
+                    <Button variant="outline" disabled={!selectedCampaignId || busy}>
+                        <Upload className="mr-2 h-4 w-4" />
+                        Campaign CSV
+                    </Button>
+                </div>
+                {selectedCampaign ? (
+                    <p className="mt-2 text-sm text-slate-600">
+                        Active campaign: <strong>{selectedCampaign.name}</strong> · {selectedCampaign.contact_count || 0}{' '}
+                        contacts
+                    </p>
+                ) : null}
+            </div>
+
+            <div className="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 className="mb-3 text-lg font-semibold text-slate-800">4) Generate LinkedIn Sequences</h3>
+                <textarea
+                    value={promptTemplate}
+                    onChange={(e) => setPromptTemplate(e.target.value)}
+                    className="min-h-[140px] w-full rounded-md border border-slate-200 px-3 py-2 text-sm"
+                />
+                <div className="mt-3">
+                    <Button onClick={generateMessages} disabled={!selectedCampaignId || busy}>
+                        <Sparkles className="mr-2 h-4 w-4" />
+                        Generate LinkedIn Messages
+                    </Button>
+                </div>
+                {sequences.length > 0 ? (
+                    <div className="mt-4 rounded-md border border-slate-200 p-3 text-sm">
+                        <p className="mb-2 font-medium text-slate-700">
+                            Generated rows: {sequences.length}
+                        </p>
+                        <div className="max-h-56 space-y-2 overflow-auto">
+                            {sequences.slice(0, 12).map((s) => (
+                                <div key={s.id} className="rounded border border-slate-100 bg-slate-50 p-2">
+                                    <div className="font-medium">
+                                        {s.first_name} {s.last_name}
+                                    </div>
+                                    <div className="line-clamp-2 text-slate-600">{s.message}</div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ) : null}
+            </div>
+
+            <div className="rounded-2xl border border-slate-200 bg-white p-5">
+                <h3 className="mb-3 text-lg font-semibold text-slate-800">5) Execute Campaign via UniPile API</h3>
+                <label className="mb-3 flex items-center gap-2 text-sm text-slate-700">
+                    <input
+                        type="checkbox"
+                        checked={dryRun}
+                        onChange={(e) => setDryRun(e.target.checked)}
+                    />
+                    Dry run (recommended first)
+                </label>
+                <Button onClick={executeCampaign} disabled={!selectedCampaignId || busy}>
+                    <Play className="mr-2 h-4 w-4" />
+                    Execute Campaign
+                </Button>
+            </div>
+        </div>
+    );
+}

frontend/src/components/layout/AppHeader.jsx

@@ -4,7 +4,7 @@ import { Zap } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 
 const MENU_ITEMS = [
-    { label: 'Generator', href: '/' },
+    { label: 'Campaigns', href: '/' },
     { label: 'Contacts', href: '/contacts' },
     { label: 'Leads', href: '/leads' },
     { label: 'Deals', href: '/deals' },

frontend/src/components/layout/AppShell.jsx

@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils';
 import GoogleAuthBar from '@/components/layout/GoogleAuthBar';
 
 const NAV_ITEMS = [
-    { label: 'Generator', href: '/', icon: LayoutDashboard },
+    { label: 'Campaigns', href: '/', icon: LayoutDashboard },
     { label: 'Contacts', href: '/contacts', icon: Users },
     { label: 'Leads', href: '/leads', icon: Inbox },
     { label: 'Deals', href: '/deals', icon: Handshake },

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -1,92 +1,21 @@
-import React, { useRef, useMemo } from 'react';
-import { Sparkles, ArrowRight, ArrowLeft } from 'lucide-react';
+import React, { useState } from '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';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import AppShell from '@/components/layout/AppShell';
-import { apiFetch } from '@/lib/api';
+import EmailGeneratorTab from '@/components/campaigns/EmailGeneratorTab';
+import LinkedinCampaignsTab from '@/components/campaigns/LinkedinCampaignsTab';
 import { useGeneratorWorkflow } from '@/context/GeneratorWorkflowContext';
 
 export default function EmailSequenceGenerator() {
-    const {
-        step,
-        setStep,
-        uploadedFile,
-        setUploadedFile,
-        selectedProducts,
-        setSelectedProducts,
-        prompts,
-        setPrompts,
-        linkedinPrompts,
-        setLinkedinPrompts,
-        includeLinkedin,
-        setIncludeLinkedin,
-        isGenerating,
-        generationComplete,
-        beginGeneration,
-        resetWorkflow,
-    } = useGeneratorWorkflow();
-
-    const generateButtonRef = useRef(null);
-
-    const canProceedToStep2 = uploadedFile && selectedProducts.length > 0;
-    const canProceedToStep3 = useMemo(() => {
-        const emailOk = selectedProducts.length > 0 && selectedProducts.every((p) => (prompts[p.name] || '').trim());
-        if (!emailOk) return false;
-        if (!includeLinkedin) return true;
-        return selectedProducts.every((p) => (linkedinPrompts[p.name] || '').trim());
-    }, [selectedProducts, prompts, linkedinPrompts, includeLinkedin]);
-
-    const scrollToGenerateButton = () => {
-        if (generateButtonRef.current) {
-            generateButtonRef.current.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center',
-            });
-        }
-    };
-
-    const handleGenerate = async () => {
-        if (!uploadedFile?.fileId || !canProceedToStep3) {
-            alert('Please complete all steps before generating sequences.');
-            return;
-        }
-
-        try {
-            const res = await apiFetch('/api/save-prompts', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    file_id: uploadedFile.fileId,
-                    prompts,
-                    products: selectedProducts.map((p) => p.name),
-                    linkedin_prompts: includeLinkedin ? linkedinPrompts : {},
-                }),
-            });
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({}));
-                throw new Error(err.detail || res.statusText);
-            }
-        } catch (error) {
-            console.error('Error saving prompts:', error);
-            alert('Failed to save templates. Please try again.');
-            return;
-        }
-
-        setStep(3);
-        beginGeneration(true);
-    };
+    const { resetWorkflow } = useGeneratorWorkflow();
+    const [activeTab, setActiveTab] = useState('generator');
 
     return (
         <AppShell
-            title="Sequence Generator"
-            subtitle="Import Apollo contacts, configure prompts, and generate sequences."
+            title="Campaigns"
+            subtitle="Create and run email + LinkedIn campaigns from one workspace."
             rightContent={
-                step > 1 ? (
+                activeTab === 'generator' ? (
                     <Button
                         variant="ghost"
                         onClick={resetWorkflow}
@@ -97,221 +26,26 @@ export default function EmailSequenceGenerator() {
                 ) : null
             }
         >
-            <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 && (
-                    <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 && (
-                    <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}
-                            onSaveComplete={scrollToGenerateButton}
-                            variant="email"
-                        />
-
-                        <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
-                            <input
-                                type="checkbox"
-                                className="mt-1 h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-500"
-                                checked={includeLinkedin}
-                                onChange={(e) => setIncludeLinkedin(e.target.checked)}
-                            />
-                            <span>
-                                <span className="font-medium text-slate-800">
-                                    Also generate LinkedIn sequences for the same contacts
-                                </span>
-                                <span className="mt-1 block text-sm text-slate-500">
-                                    Runs after email generation. Configure LinkedIn system prompts below — same edit /
-                                    save flow as email.
-                                </span>
-                            </span>
-                        </label>
-
-                        {includeLinkedin ? (
-                            <div className="space-y-2">
-                                <h3 className="text-lg font-semibold text-slate-800">LinkedIn prompts</h3>
-                                <PromptEditor
-                                    selectedProducts={selectedProducts}
-                                    prompts={linkedinPrompts}
-                                    onPromptsChange={setLinkedinPrompts}
-                                    onSaveComplete={scrollToGenerateButton}
-                                    variant="linkedin"
-                                />
-                            </div>
-                        ) : null}
-
-                        <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
-                                ref={generateButtonRef}
-                                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 && (
-                    <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…'}
-                            </h2>
-                            <p className="text-slate-500">
-                                {generationComplete
-                                    ? 'Review your sequences below and download when ready'
-                                    : 'You can navigate to other pages — generation continues in the background.'}
-                            </p>
-                        </div>
-
-                        <SequenceViewer />
-
-                        {!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>
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+                <TabsList className="mb-6">
+                    <TabsTrigger value="generator">Email/AI Generator</TabsTrigger>
+                    <TabsTrigger value="linkedin">LinkedIn Campaigns (UniPile)</TabsTrigger>
+                </TabsList>
+                <TabsContent value="generator">
+                    <EmailGeneratorTab />
+                </TabsContent>
+                <TabsContent value="linkedin">
+                    <LinkedinCampaignsTab />
+                </TabsContent>
+            </Tabs>
 
             <footer className="border-t border-slate-100 mt-16">
                 <div className="w-full px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-6">
                     <p className="text-center text-sm text-slate-400">
-                        Powered by AI • Export ready for Outreaches, Smartlead, and more
+                        Powered by AI • Campaign orchestration for Email and LinkedIn
                     </p>
                 </div>
             </footer>
-
-            <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>
         </AppShell>
     );
 }