update

backend/app/database.py

@@ -70,6 +70,29 @@ class Contact(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class CrmLead(Base):
+    """Lead synced from Smartlead replies (webhook) — CRM pipeline status is local."""
+    __tablename__ = "crm_leads"
+
+    id = Column(Integer, primary_key=True, index=True)
+    smartlead_lead_id = Column(String, index=True)
+    campaign_id = Column(String, index=True)
+    campaign_name = Column(String)
+    email = Column(String, index=True)
+    first_name = Column(String)
+    last_name = Column(String)
+    company_name = Column(String)
+    title = Column(String)
+    last_reply_subject = Column(String)
+    last_reply_body = Column(Text)
+    last_reply_at = Column(DateTime, nullable=True)
+    crm_status = Column(String, default="new_lead")  # new_lead|attempted_to_contact|contacted|qualified|unqualified|none
+    contact_id = Column(Integer, nullable=True)  # links to contacts.id after "Move to Contacts"
+    raw_webhook = Column(JSON)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
 class SmartleadRun(Base):
     __tablename__ = "smartlead_runs"
     

backend/app/main.py

@@ -1,23 +1,32 @@
-from fastapi import FastAPI, UploadFile, File, Depends, HTTPException, Query
+from fastapi import FastAPI, UploadFile, File, Depends, HTTPException, Query, Request
 from fastapi.responses import FileResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pathlib import Path
 from sqlalchemy.orm import Session
+from sqlalchemy import func, or_
 import pandas as pd
 import uuid
 import os
 import csv
 import io
 import concurrent.futures
-from typing import Dict, List
+from typing import Dict, List, Optional
 import json
 import asyncio
 import math
+import re
 from datetime import datetime
 
-from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun, Contact
-from .models import UploadResponse, PromptSaveRequest, SequenceResponse, SmartleadPushRequest, SmartleadRunResponse
+from .database import get_db, UploadedFile, Prompt, GeneratedSequence, SmartleadRun, Contact, CrmLead
+from .models import (
+    UploadResponse,
+    PromptSaveRequest,
+    SequenceResponse,
+    SmartleadPushRequest,
+    SmartleadRunResponse,
+    CrmLeadPatchRequest,
+)
 from .gpt_service import generate_email_sequence
 from .smartlead_client import SmartleadClient
 
@@ -117,6 +126,140 @@ def _to_datetime(val):
         return None
 
 
+CRM_STATUS_ALLOWED = frozenset({
+    "none",
+    "new_lead",
+    "attempted_to_contact",
+    "contacted",
+    "qualified",
+    "unqualified",
+})
+SMARTLEAD_IMPORT_FILE_ID = "smartlead-imports"
+
+
+def _strip_html_simple(text: str) -> str:
+    if not text:
+        return ""
+    t = re.sub(r"<[^>]+>", " ", text)
+    return re.sub(r"\s+", " ", t).strip()
+
+
+def _parse_smartlead_reply_payload(body: dict) -> Optional[dict]:
+    """Normalize Smartlead webhook JSON into fields for CrmLead. Returns None if not a reply or missing identity."""
+    if not isinstance(body, dict):
+        return None
+    nest = body.get("data") if isinstance(body.get("data"), dict) else {}
+    lead = body.get("lead") or nest.get("lead") or {}
+    if not isinstance(lead, dict):
+        lead = {}
+    reply = body.get("reply") or nest.get("reply") or {}
+    if not isinstance(reply, dict):
+        reply = {}
+
+    event = str(body.get("event") or body.get("event_type") or body.get("type") or "").upper()
+    has_reply_content = bool(
+        reply.get("body")
+        or reply.get("html_body")
+        or reply.get("text_body")
+        or body.get("reply_body")
+        or body.get("message")
+        or nest.get("reply_body")
+    )
+    is_reply_event = "REPLIED" in event or event in ("EMAIL_REPLIED", "LEAD_REPLIED")
+    if not is_reply_event and not has_reply_content:
+        return None
+
+    campaign_id = _safe_str(
+        body.get("campaign_id")
+        or nest.get("campaign_id")
+        or lead.get("campaign_id")
+        or body.get("campaignId")
+    )
+    sl_id = lead.get("lead_id") or lead.get("id") or body.get("lead_id") or nest.get("lead_id")
+    sl_id_str = _safe_str(sl_id) if sl_id is not None else ""
+
+    email = (
+        lead.get("email")
+        or lead.get("email_address")
+        or body.get("lead_email")
+        or body.get("email")
+        or nest.get("email")
+    )
+    email = _safe_str(email).lower()
+    if not email and not sl_id_str:
+        return None
+
+    reply_body = (
+        reply.get("body")
+        or reply.get("html_body")
+        or reply.get("text_body")
+        or body.get("reply_body")
+        or body.get("message")
+        or nest.get("reply_body")
+        or ""
+    )
+    reply_body = _strip_html_simple(_safe_str(reply_body))
+    subject = _safe_str(reply.get("subject") or body.get("subject") or body.get("reply_subject") or "")
+    if not reply_body and not subject:
+        return None
+
+    received_raw = (
+        reply.get("received_at")
+        or reply.get("created_at")
+        or body.get("received_at")
+        or body.get("timestamp")
+        or nest.get("received_at")
+    )
+    received_at = _to_datetime(received_raw) if received_raw else datetime.utcnow()
+
+    fn = _safe_str(lead.get("first_name") or body.get("first_name"))
+    ln = _safe_str(lead.get("last_name") or body.get("last_name"))
+    company = _safe_str(
+        lead.get("company_name")
+        or lead.get("company")
+        or body.get("company_name")
+        or nest.get("company_name")
+    )
+    title = _safe_str(lead.get("title") or lead.get("job_title") or body.get("title"))
+    campaign_name = _safe_str(body.get("campaign_name") or nest.get("campaign_name") or "")
+
+    return {
+        "smartlead_lead_id": sl_id_str,
+        "campaign_id": campaign_id,
+        "campaign_name": campaign_name,
+        "email": email,
+        "first_name": fn,
+        "last_name": ln,
+        "company_name": company,
+        "title": title,
+        "last_reply_subject": subject,
+        "last_reply_body": reply_body,
+        "last_reply_at": received_at,
+        "raw_webhook": body,
+    }
+
+
+def _crm_lead_to_dict(row: CrmLead) -> dict:
+    return {
+        "id": row.id,
+        "smartlead_lead_id": row.smartlead_lead_id,
+        "campaign_id": row.campaign_id,
+        "campaign_name": row.campaign_name or "",
+        "email": row.email or "",
+        "first_name": row.first_name or "",
+        "last_name": row.last_name or "",
+        "company_name": row.company_name or "",
+        "title": row.title or "",
+        "last_reply_subject": row.last_reply_subject or "",
+        "last_reply_body": row.last_reply_body or "",
+        "last_reply_at": row.last_reply_at.isoformat() if row.last_reply_at else None,
+        "crm_status": row.crm_status or "new_lead",
+        "contact_id": row.contact_id,
+        "created_at": row.created_at.isoformat() if row.created_at else None,
+        "updated_at": row.updated_at.isoformat() if row.updated_at else None,
+    }
+
+
 @app.get("/api/health")
 def health():
     return {"status": "ok"}
@@ -883,6 +1026,251 @@ async def get_smartlead_runs(file_id: str = Query(None), db: Session = Depends(g
         raise HTTPException(status_code=500, detail=f"Error fetching runs: {str(e)}")
 
 
+@app.post("/api/webhooks/smartlead")
+async def smartlead_webhook(request: Request, db: Session = Depends(get_db)):
+    """
+    Smartlead webhook — configure in Smartlead to POST reply events to this URL when a lead replies.
+    Optional: set SMARTLEAD_WEBHOOK_SECRET and send the same value in header X-Webhook-Token (or Bearer).
+    """
+    secret = os.getenv("SMARTLEAD_WEBHOOK_SECRET")
+    if secret:
+        token = request.headers.get("X-Webhook-Token") or ""
+        if not token:
+            auth = request.headers.get("Authorization") or ""
+            if auth.lower().startswith("bearer "):
+                token = auth[7:].strip()
+        if token != secret:
+            raise HTTPException(status_code=401, detail="Invalid webhook token")
+
+    try:
+        body = await request.json()
+    except Exception:
+        raise HTTPException(status_code=400, detail="Expected JSON body")
+
+    parsed = _parse_smartlead_reply_payload(body)
+    if not parsed:
+        return {"ok": True, "ignored": True, "reason": "not_a_reply_or_missing_fields"}
+
+    q = db.query(CrmLead)
+    row = None
+    if parsed["smartlead_lead_id"] and parsed["campaign_id"]:
+        row = q.filter(
+            CrmLead.smartlead_lead_id == parsed["smartlead_lead_id"],
+            CrmLead.campaign_id == parsed["campaign_id"],
+        ).first()
+    if row is None and parsed["email"] and parsed["campaign_id"]:
+        row = q.filter(
+            CrmLead.email == parsed["email"],
+            CrmLead.campaign_id == parsed["campaign_id"],
+        ).first()
+
+    if parsed["email"]:
+        apollo = (
+            db.query(Contact)
+            .filter(func.lower(Contact.email) == parsed["email"].lower())
+            .first()
+        )
+        if apollo:
+            if not parsed["company_name"] and apollo.company:
+                parsed["company_name"] = apollo.company
+            if not parsed["title"] and apollo.title:
+                parsed["title"] = apollo.title
+            if not parsed["first_name"] and apollo.first_name:
+                parsed["first_name"] = apollo.first_name
+            if not parsed["last_name"] and apollo.last_name:
+                parsed["last_name"] = apollo.last_name
+
+    new_ts = parsed["last_reply_at"]
+    if row:
+        old_ts = row.last_reply_at
+        if not old_ts or (new_ts and new_ts >= old_ts):
+            row.last_reply_subject = parsed["last_reply_subject"]
+            row.last_reply_body = parsed["last_reply_body"]
+            row.last_reply_at = new_ts
+            row.raw_webhook = parsed["raw_webhook"]
+            row.email = parsed["email"] or row.email
+            row.first_name = parsed["first_name"] or row.first_name
+            row.last_name = parsed["last_name"] or row.last_name
+            row.company_name = parsed["company_name"] or row.company_name
+            row.title = parsed["title"] or row.title
+            row.campaign_name = parsed["campaign_name"] or row.campaign_name
+            if parsed["smartlead_lead_id"]:
+                row.smartlead_lead_id = parsed["smartlead_lead_id"]
+    else:
+        row = CrmLead(
+            smartlead_lead_id=parsed["smartlead_lead_id"] or "",
+            campaign_id=parsed["campaign_id"] or "",
+            campaign_name=parsed["campaign_name"] or "",
+            email=parsed["email"] or "",
+            first_name=parsed["first_name"] or "",
+            last_name=parsed["last_name"] or "",
+            company_name=parsed["company_name"] or "",
+            title=parsed["title"] or "",
+            last_reply_subject=parsed["last_reply_subject"] or "",
+            last_reply_body=parsed["last_reply_body"] or "",
+            last_reply_at=new_ts,
+            crm_status="new_lead",
+            raw_webhook=parsed["raw_webhook"],
+        )
+        db.add(row)
+
+    db.commit()
+    db.refresh(row)
+    return {"ok": True, "lead_id": row.id}
+
+
+@app.get("/api/leads")
+async def list_leads(
+    search: str = Query("", description="Search email, name, company"),
+    status: str = Query("", description="crm_status filter"),
+    sort_by: str = Query("last_reply_at"),
+    sort_dir: str = Query("desc"),
+    limit: int = Query(50, ge=1, le=200),
+    offset: int = Query(0, ge=0),
+    db: Session = Depends(get_db),
+):
+    q = db.query(CrmLead)
+    if search.strip():
+        term = f"%{search.strip().lower()}%"
+        q = q.filter(
+            or_(
+                func.lower(CrmLead.email).like(term),
+                func.lower(func.coalesce(CrmLead.company_name, "")).like(term),
+                func.lower(func.coalesce(CrmLead.first_name, "")).like(term),
+                func.lower(func.coalesce(CrmLead.last_name, "")).like(term),
+            )
+        )
+    if status.strip() and status in CRM_STATUS_ALLOWED:
+        q = q.filter(CrmLead.crm_status == status)
+
+    total = q.count()
+
+    col_map = {
+        "last_reply_at": CrmLead.last_reply_at,
+        "created_at": CrmLead.created_at,
+        "email": CrmLead.email,
+        "company_name": CrmLead.company_name,
+    }
+    col = col_map.get(sort_by, CrmLead.last_reply_at)
+    if sort_dir == "asc":
+        q = q.order_by(col.asc())
+    else:
+        q = q.order_by(col.desc())
+
+    rows = q.offset(offset).limit(limit).all()
+    return {
+        "total": total,
+        "leads": [_crm_lead_to_dict(r) for r in rows],
+    }
+
+
+@app.get("/api/leads/{lead_id}")
+async def get_lead(lead_id: int, db: Session = Depends(get_db)):
+    row = db.query(CrmLead).filter(CrmLead.id == lead_id).first()
+    if not row:
+        raise HTTPException(status_code=404, detail="Lead not found")
+    d = _crm_lead_to_dict(row)
+    if row.contact_id:
+        c = db.query(Contact).filter(Contact.id == row.contact_id).first()
+        if c:
+            d["contact"] = {
+                "id": c.id,
+                "email": c.email,
+                "company": c.company,
+                "title": c.title,
+            }
+    return d
+
+
+@app.patch("/api/leads/{lead_id}")
+async def patch_lead(lead_id: int, body: CrmLeadPatchRequest, db: Session = Depends(get_db)):
+    if body.crm_status not in CRM_STATUS_ALLOWED:
+        raise HTTPException(
+            status_code=400,
+            detail=f"crm_status must be one of: {sorted(CRM_STATUS_ALLOWED)}",
+        )
+    row = db.query(CrmLead).filter(CrmLead.id == lead_id).first()
+    if not row:
+        raise HTTPException(status_code=404, detail="Lead not found")
+    row.crm_status = body.crm_status
+    db.commit()
+    db.refresh(row)
+    return _crm_lead_to_dict(row)
+
+
+@app.post("/api/leads/{lead_id}/move-to-contacts")
+async def move_lead_to_contacts(lead_id: int, db: Session = Depends(get_db)):
+    lead = db.query(CrmLead).filter(CrmLead.id == lead_id).first()
+    if not lead:
+        raise HTTPException(status_code=404, detail="Lead not found")
+    if lead.contact_id:
+        return {"contact_id": lead.contact_id, "message": "Already linked to Contacts"}
+
+    email = (lead.email or "").strip()
+    if not email:
+        raise HTTPException(status_code=400, detail="Lead has no email")
+
+    existing = (
+        db.query(Contact)
+        .filter(func.lower(Contact.email) == email.lower())
+        .first()
+    )
+    if existing:
+        lead.contact_id = existing.id
+        db.commit()
+        return {"contact_id": existing.id, "message": "Linked to existing contact"}
+
+    raw = {
+        "Company Name": lead.company_name or "",
+        "Title": lead.title or "",
+        "source": "smartlead_reply",
+        "smartlead_lead_id": lead.smartlead_lead_id,
+        "campaign_id": lead.campaign_id,
+        "last_reply_subject": lead.last_reply_subject,
+        "last_reply_body": lead.last_reply_body,
+        "smartlead_webhook": lead.raw_webhook,
+    }
+    contact = Contact(
+        file_id=SMARTLEAD_IMPORT_FILE_ID,
+        row_index=lead_id,
+        first_name=lead.first_name or "",
+        last_name=lead.last_name or "",
+        email=email,
+        company=lead.company_name or "",
+        title=lead.title or "",
+        source="smartlead",
+        raw_data=raw,
+    )
+    db.add(contact)
+    db.commit()
+    db.refresh(contact)
+    lead.contact_id = contact.id
+    db.commit()
+    return {"contact_id": contact.id, "message": "Contact created"}
+
+
+@app.get("/api/leads/{lead_id}/smartlead-thread")
+async def lead_smartlead_thread(lead_id: int, db: Session = Depends(get_db)):
+    """Fetch full thread from Smartlead API (Admin API key required)."""
+    row = db.query(CrmLead).filter(CrmLead.id == lead_id).first()
+    if not row:
+        raise HTTPException(status_code=404, detail="Lead not found")
+    if not row.smartlead_lead_id or not row.campaign_id:
+        raise HTTPException(status_code=400, detail="Lead missing Smartlead campaign/lead id")
+    try:
+        lid = int(row.smartlead_lead_id)
+    except (TypeError, ValueError):
+        raise HTTPException(status_code=400, detail="Invalid smartlead_lead_id")
+    try:
+        client = SmartleadClient()
+        hist = client.get_message_history(str(row.campaign_id), lid)
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=str(e))
+    return {"history": hist}
+
+
 # ---- Frontend static serving ----
 FRONTEND_DIST = Path(__file__).resolve().parents[2] / "frontend" / "dist"
 INDEX_FILE = FRONTEND_DIST / "index.html"

backend/app/models.py

@@ -33,6 +33,10 @@ class SmartleadPushRequest(BaseModel):
     dry_run: bool = False
 
 
+class CrmLeadPatchRequest(BaseModel):
+    crm_status: str
+
+
 class SmartleadRunResponse(BaseModel):
     run_id: str
     campaign_id: Optional[str] = None

backend/app/smartlead_client.py

@@ -190,6 +190,13 @@ class SmartleadClient:
         
         return None
     
+    def get_message_history(self, campaign_id: str, lead_id: int) -> Dict:
+        """Full email thread for a lead (SENT / REPLY). See Smartlead API docs."""
+        return self._make_request(
+            "GET",
+            f"/campaigns/{campaign_id}/leads/{lead_id}/message-history",
+        )
+    
     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)

frontend/src/App.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
-import RunHistory from "./pages/RunHistory";
 import Contacts from "./pages/Contacts";
+import Leads from "./pages/Leads";
 import "./index.css";
 
 export default function App() {
@@ -11,7 +11,8 @@ export default function App() {
       <Routes>
         <Route path="/" element={<EmailSequenceGenerator />} />
         <Route path="/contacts" element={<Contacts />} />
-        <Route path="/history" element={<RunHistory />} />
+        <Route path="/leads" element={<Leads />} />
+        <Route path="/history" element={<Navigate to="/leads" replace />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/components/layout/AppHeader.jsx

@@ -6,9 +6,14 @@ import { Button } from "@/components/ui/button";
 const MENU_ITEMS = [
     { label: 'Generator', href: '/' },
     { label: 'Contacts', href: '/contacts' },
-    { label: 'Run History', href: '/history' },
+    { label: 'Leads', href: '/leads' },
 ];
 
+function pathMatches(locationPath, href) {
+    if (href === '/') return locationPath === '/';
+    return locationPath === href || locationPath.startsWith(`${href}/`);
+}
+
 export default function AppHeader({ rightContent }) {
     const location = useLocation();
 
@@ -28,7 +33,7 @@ export default function AppHeader({ rightContent }) {
                         </div>
                         <nav className="hidden md:flex items-center gap-2">
                             {MENU_ITEMS.map((item) => {
-                                const isActive = location.pathname === item.href;
+                                const isActive = pathMatches(location.pathname, item.href);
                                 return (
                                     <Button
                                         key={item.href}
@@ -49,7 +54,7 @@ export default function AppHeader({ rightContent }) {
                 </div>
                 <nav className="md:hidden flex items-center gap-2 mt-3">
                     {MENU_ITEMS.map((item) => {
-                        const isActive = location.pathname === item.href;
+                        const isActive = pathMatches(location.pathname, item.href);
                         return (
                             <Button
                                 key={item.href}

frontend/src/components/layout/AppShell.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Zap, LayoutDashboard, Users, History } from 'lucide-react';
+import { Zap, LayoutDashboard, Users, Inbox } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 
 const NAV_ITEMS = [
     { label: 'Generator', href: '/', icon: LayoutDashboard },
     { label: 'Contacts', href: '/contacts', icon: Users },
-    { label: 'Run History', href: '/history', icon: History },
+    { label: 'Leads', href: '/leads', icon: Inbox },
 ];
 
+function pathMatches(locationPath, href) {
+    if (href === '/') return locationPath === '/';
+    return locationPath === href || locationPath.startsWith(`${href}/`);
+}
+
 export default function AppShell({ title, subtitle, rightContent, children }) {
     const location = useLocation();
 
@@ -28,7 +33,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                     <nav className="space-y-2">
                         {NAV_ITEMS.map((item) => {
                             const Icon = item.icon;
-                            const active = location.pathname === item.href;
+                            const active = pathMatches(location.pathname, item.href);
                             return (
                                 <Link
                                     to={item.href}
@@ -69,7 +74,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                             </div>
                             <nav className="md:hidden flex items-center gap-2 mt-3">
                                 {NAV_ITEMS.map((item) => {
-                                    const active = location.pathname === item.href;
+                                    const active = pathMatches(location.pathname, item.href);
                                     return (
                                         <Button
                                             asChild

frontend/src/pages/Leads.jsx

@@ -0,0 +1,470 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    Inbox,
+    Search,
+    ChevronDown,
+    ChevronRight,
+    Building2,
+    Briefcase,
+    Mail,
+    ExternalLink,
+    Loader2,
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
+import AppShell from '@/components/layout/AppShell';
+import { cn } from '@/lib/utils';
+
+const CRM_STATUSES = [
+    { value: 'none', label: '—', className: 'bg-slate-300 text-slate-800' },
+    { value: 'new_lead', label: 'New Lead', className: 'bg-amber-200 text-amber-950' },
+    { value: 'attempted_to_contact', label: 'Attempted to contact', className: 'bg-rose-100 text-rose-800' },
+    { value: 'contacted', label: 'Contacted', className: 'bg-orange-500 text-white' },
+    { value: 'qualified', label: 'Qualified', className: 'bg-lime-500 text-white' },
+    { value: 'unqualified', label: 'Unqualified', className: 'bg-fuchsia-900 text-white' },
+];
+
+function statusMeta(value) {
+    return CRM_STATUSES.find((s) => s.value === value) || CRM_STATUSES[1];
+}
+
+export default function Leads() {
+    const [leads, setLeads] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [sectionOpen, setSectionOpen] = useState(true);
+    const [selected, setSelected] = useState(null);
+    const [threadLoading, setThreadLoading] = useState(false);
+    const [threadData, setThreadData] = useState(null);
+    const [moveBusy, setMoveBusy] = useState(null);
+
+    const webhookUrl = useMemo(() => {
+        if (typeof window === 'undefined') return '';
+        return `${window.location.origin}/api/webhooks/smartlead`;
+    }, []);
+
+    const fetchLeads = useCallback(async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams();
+            params.set('limit', '100');
+            params.set('offset', '0');
+            params.set('sort_by', 'last_reply_at');
+            params.set('sort_dir', 'desc');
+            if (search.trim()) params.set('search', search.trim());
+            if (statusFilter && statusFilter !== 'all') params.set('status', statusFilter);
+            const res = await fetch(`/api/leads?${params.toString()}`);
+            if (res.ok) {
+                const data = await res.json();
+                setLeads(data.leads || []);
+                setTotal(data.total ?? 0);
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    }, [search, statusFilter]);
+
+    useEffect(() => {
+        const t = setTimeout(() => fetchLeads(), 250);
+        return () => clearTimeout(t);
+    }, [fetchLeads]);
+
+    const updateStatus = async (leadId, crmStatus) => {
+        try {
+            const res = await fetch(`/api/leads/${leadId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ crm_status: crmStatus }),
+            });
+            if (!res.ok) throw new Error(await res.text());
+            const updated = await res.json();
+            setLeads((prev) => prev.map((l) => (l.id === leadId ? { ...l, ...updated } : l)));
+            setSelected((s) => (s && s.id === leadId ? { ...s, ...updated } : s));
+        } catch (e) {
+            console.error(e);
+            alert('Could not update status');
+        }
+    };
+
+    const moveToContacts = async (leadId) => {
+        setMoveBusy(leadId);
+        try {
+            const res = await fetch(`/api/leads/${leadId}/move-to-contacts`, { method: 'POST' });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || res.statusText);
+            await fetchLeads();
+            setSelected((s) =>
+                s && s.id === leadId ? { ...s, contact_id: data.contact_id } : s
+            );
+        } catch (e) {
+            console.error(e);
+            alert(e.message || 'Move failed');
+        } finally {
+            setMoveBusy(null);
+        }
+    };
+
+    const loadThread = async (leadId) => {
+        setThreadLoading(true);
+        setThreadData(null);
+        try {
+            const res = await fetch(`/api/leads/${leadId}/smartlead-thread`);
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.detail || 'Failed to load thread');
+            setThreadData(data.history);
+        } catch (e) {
+            console.error(e);
+            alert(e.message || 'Could not load Smartlead thread (check API key)');
+        } finally {
+            setThreadLoading(false);
+        }
+    };
+
+    const openDetail = async (lead) => {
+        setSelected(lead);
+        setThreadData(null);
+        try {
+            const res = await fetch(`/api/leads/${lead.id}`);
+            if (res.ok) {
+                const d = await res.json();
+                setSelected(d);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    return (
+        <AppShell
+            title="Leads"
+            subtitle={
+                <>
+                    Replies from Smartlead campaigns appear here. Webhook URL:{' '}
+                    <code className="text-xs bg-slate-100 px-1.5 py-0.5 rounded">{webhookUrl}</code>
+                </>
+            }
+        >
+            <div className="space-y-6">
+                <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
+                    <div className="relative flex-1 max-w-md">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                        <Input
+                            className="pl-9"
+                            placeholder="Search leads…"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                        />
+                    </div>
+                    <div className="flex gap-2 items-center">
+                        <Select value={statusFilter} onValueChange={setStatusFilter}>
+                            <SelectTrigger className="w-[200px]">
+                                <span>
+                                    {statusFilter === 'all'
+                                        ? 'All statuses'
+                                        : statusMeta(statusFilter).label}
+                                </span>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All statuses</SelectItem>
+                                {CRM_STATUSES.map((s) => (
+                                    <SelectItem key={s.value} value={s.value}>
+                                        <span
+                                            className={cn(
+                                                'rounded-full px-2 py-0.5 text-xs font-medium',
+                                                s.className
+                                            )}
+                                        >
+                                            {s.label}
+                                        </span>
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <Button variant="outline" size="sm" onClick={() => fetchLeads()}>
+                            Refresh
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden">
+                    <button
+                        type="button"
+                        onClick={() => setSectionOpen(!sectionOpen)}
+                        className="w-full flex items-center gap-2 px-4 py-3 text-left font-semibold text-slate-800 border-b border-slate-100 hover:bg-slate-50"
+                    >
+                        {sectionOpen ? (
+                            <ChevronDown className="h-5 w-5 text-violet-600" />
+                        ) : (
+                            <ChevronRight className="h-5 w-5 text-violet-600" />
+                        )}
+                        <Inbox className="h-5 w-5 text-slate-500" />
+                        New Leads
+                        <span className="text-slate-400 font-normal text-sm ml-2">
+                            {total} total
+                        </span>
+                    </button>
+
+                    {sectionOpen && (
+                        <div className="overflow-x-auto">
+                            {loading ? (
+                                <div className="flex justify-center py-16 text-slate-500">
+                                    <Loader2 className="h-8 w-8 animate-spin" />
+                                </div>
+                            ) : leads.length === 0 ? (
+                                <p className="text-center py-16 text-slate-500">
+                                    No leads yet. When a prospect replies in Smartlead, they will show up
+                                    here via webhook.
+                                </p>
+                            ) : (
+                                <table className="w-full text-sm">
+                                    <thead>
+                                        <tr className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
+                                            <th className="px-3 py-2 font-medium w-10" />
+                                            <th className="px-3 py-2 font-medium">Lead</th>
+                                            <th className="px-3 py-2 font-medium">Status</th>
+                                            <th className="px-3 py-2 font-medium">Create a contact</th>
+                                            <th className="px-3 py-2 font-medium">Company</th>
+                                            <th className="px-3 py-2 font-medium">Title</th>
+                                            <th className="px-3 py-2 font-medium">Email</th>
+                                            <th className="px-3 py-2 font-medium">Last reply</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {leads.map((lead) => {
+                                            const meta = statusMeta(lead.crm_status);
+                                            const displayName =
+                                                [lead.first_name, lead.last_name].filter(Boolean).join(' ') ||
+                                                lead.email;
+                                            const busy = moveBusy === lead.id;
+                                            return (
+                                                <tr
+                                                    key={lead.id}
+                                                    className={cn(
+                                                        'border-b border-slate-100 hover:bg-violet-50/40',
+                                                        selected?.id === lead.id && 'bg-violet-50/60'
+                                                    )}
+                                                >
+                                                    <td className="px-3 py-2">
+                                                        <input type="checkbox" className="rounded border-slate-300" />
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        <button
+                                                            type="button"
+                                                            onClick={() => openDetail(lead)}
+                                                            className="text-left text-violet-700 hover:underline font-medium"
+                                                        >
+                                                            {displayName}
+                                                        </button>
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        <Select
+                                                            value={
+                                                                CRM_STATUSES.some(
+                                                                    (s) => s.value === lead.crm_status
+                                                                )
+                                                                    ? lead.crm_status
+                                                                    : 'new_lead'
+                                                            }
+                                                            onValueChange={(v) => updateStatus(lead.id, v)}
+                                                        >
+                                                            <SelectTrigger
+                                                                className={cn(
+                                                                    'h-9 w-[min(100%,200px)] border-slate-200',
+                                                                    'shadow-none'
+                                                                )}
+                                                            >
+                                                                <span
+                                                                    className={cn(
+                                                                        'rounded-full px-2.5 py-0.5 text-xs font-medium',
+                                                                        meta.className
+                                                                    )}
+                                                                >
+                                                                    {meta.label}
+                                                                </span>
+                                                            </SelectTrigger>
+                                                            <SelectContent className="min-w-[240px]">
+                                                                {CRM_STATUSES.map((s) => (
+                                                                    <SelectItem
+                                                                        key={s.value}
+                                                                        value={s.value}
+                                                                        className="cursor-pointer"
+                                                                    >
+                                                                        <span
+                                                                            className={cn(
+                                                                                'rounded-full px-2.5 py-0.5 text-xs font-medium inline-block',
+                                                                                s.className
+                                                                            )}
+                                                                        >
+                                                                            {s.label}
+                                                                        </span>
+                                                                    </SelectItem>
+                                                                ))}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        {lead.contact_id ? (
+                                                            <a
+                                                                href={`/contacts`}
+                                                                className="text-xs text-emerald-700 font-medium"
+                                                            >
+                                                                In Contacts (#{lead.contact_id})
+                                                            </a>
+                                                        ) : (
+                                                            <Button
+                                                                size="sm"
+                                                                className="bg-emerald-600 hover:bg-emerald-700 text-white h-8"
+                                                                disabled={busy}
+                                                                onClick={() => moveToContacts(lead.id)}
+                                                            >
+                                                                {busy ? (
+                                                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                                                ) : (
+                                                                    'Move to Contacts'
+                                                                )}
+                                                            </Button>
+                                                        )}
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-700">
+                                                        <span className="inline-flex items-center gap-1">
+                                                            <Building2 className="h-3.5 w-3.5 text-slate-400" />
+                                                            {lead.company_name || '—'}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-700">
+                                                        <span className="inline-flex items-center gap-1">
+                                                            <Briefcase className="h-3.5 w-3.5 text-slate-400" />
+                                                            {lead.title || '—'}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-3 py-2">
+                                                        {lead.email ? (
+                                                            <a
+                                                                href={`mailto:${lead.email}`}
+                                                                className="text-violet-600 hover:underline inline-flex items-center gap-1"
+                                                            >
+                                                                <Mail className="h-3.5 w-3.5" />
+                                                                {lead.email}
+                                                            </a>
+                                                        ) : (
+                                                            '—'
+                                                        )}
+                                                    </td>
+                                                    <td className="px-3 py-2 text-slate-600 max-w-[200px] truncate" title={lead.last_reply_body}>
+                                                        {lead.last_reply_body
+                                                            ? lead.last_reply_body.slice(0, 80) +
+                                                              (lead.last_reply_body.length > 80 ? '…' : '')
+                                                            : '—'}
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                {selected && (
+                    <div className="fixed inset-0 z-50 flex justify-end bg-black/30" role="dialog">
+                        <button
+                            type="button"
+                            className="flex-1 cursor-default"
+                            aria-label="Close"
+                            onClick={() => setSelected(null)}
+                        />
+                        <div className="w-full max-w-lg bg-white shadow-xl h-full overflow-y-auto border-l border-slate-200 p-6">
+                            <div className="flex justify-between items-start gap-4 mb-6">
+                                <div>
+                                    <h3 className="text-lg font-bold text-slate-900">Lead detail</h3>
+                                    <p className="text-sm text-slate-500 mt-1">
+                                        Campaign: {selected.campaign_name || selected.campaign_id || '—'}
+                                    </p>
+                                </div>
+                                <Button variant="ghost" size="sm" onClick={() => setSelected(null)}>
+                                    Close
+                                </Button>
+                            </div>
+
+                            <dl className="space-y-3 text-sm">
+                                <div>
+                                    <dt className="text-slate-500">Name</dt>
+                                    <dd className="font-medium">
+                                        {[selected.first_name, selected.last_name].filter(Boolean).join(' ') ||
+                                            '—'}
+                                    </dd>
+                                </div>
+                                <div>
+                                    <dt className="text-slate-500">Email</dt>
+                                    <dd>{selected.email || '—'}</dd>
+                                </div>
+                                <div>
+                                    <dt className="text-slate-500">Company</dt>
+                                    <dd>{selected.company_name || '—'}</dd>
+                                </div>
+                                <div>
+                                    <dt className="text-slate-500">Title</dt>
+                                    <dd>{selected.title || '—'}</dd>
+                                </div>
+                                {selected.contact && (
+                                    <div>
+                                        <dt className="text-slate-500">Linked contact</dt>
+                                        <dd>
+                                            <a href="/contacts" className="text-violet-600 hover:underline">
+                                                View in Contacts
+                                            </a>
+                                        </dd>
+                                    </div>
+                                )}
+                            </dl>
+
+                            <div className="mt-6">
+                                <div className="flex items-center justify-between mb-2">
+                                    <h4 className="font-semibold text-slate-800">Their reply</h4>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="gap-1"
+                                        onClick={() => loadThread(selected.id)}
+                                        disabled={threadLoading}
+                                    >
+                                        {threadLoading ? (
+                                            <Loader2 className="h-4 w-4 animate-spin" />
+                                        ) : (
+                                            <ExternalLink className="h-4 w-4" />
+                                        )}
+                                        Full thread (Smartlead)
+                                    </Button>
+                                </div>
+                                {selected.last_reply_subject && (
+                                    <p className="text-xs text-slate-500 mb-1">
+                                        Subject: {selected.last_reply_subject}
+                                    </p>
+                                )}
+                                <div className="rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm whitespace-pre-wrap text-slate-800">
+                                    {selected.last_reply_body || '—'}
+                                </div>
+                            </div>
+
+                            {threadData != null && (
+                                <div className="mt-4 rounded-lg border border-slate-200 p-3 bg-white overflow-x-auto">
+                                    <pre className="text-xs text-slate-700 whitespace-pre-wrap break-all">
+                                        {typeof threadData === 'string'
+                                            ? threadData
+                                            : JSON.stringify(threadData, null, 2)}
+                                    </pre>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </AppShell>
+    );
+}