update

backend/app/database.py

@@ -129,7 +129,14 @@ class Contact(Base):
     title = Column(String)
     source = Column(String, default="apollo_csv")
     raw_data = Column(JSON)
-    created_at = Column(DateTime, default=datetime.utcnow)
+    # UniPile LinkedIn outreach (set when a campaign invite/DM is executed)
+    unipile_provider_id = Column(String, nullable=True, index=True)
+    linkedin_invite_sent_at = Column(DateTime, nullable=True)
+    linkedin_invite_pending = Column(Integer, default=0)  # 1 = waiting on acceptance webhook
+    linkedin_connection_accepted_at = Column(DateTime, nullable=True)
+    linkedin_last_followup_sent_at = Column(DateTime, nullable=True)
+    linkedin_followup_next_email_number = Column(Integer, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow())
 
 
 class CrmLead(Base):
@@ -248,6 +255,7 @@ class LinkedinCampaign(Base):
     contact_count = Column(Integer, default=0)
     prompt_template = Column(Text, default="")
     execution_result = Column(JSON, nullable=True)
+    followup_interval_hours = Column(Integer, default=72)
     created_at = Column(DateTime, default=datetime.utcnow)
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
     executed_at = Column(DateTime, nullable=True)
@@ -399,6 +407,31 @@ def run_migrations(connection_engine):
             lccols = [c["name"] for c in insp.get_columns("linkedin_campaigns")]
             if "user_id" not in lccols:
                 conn.execute(text("ALTER TABLE linkedin_campaigns ADD COLUMN user_id INTEGER"))
+            if "followup_interval_hours" not in lccols:
+                conn.execute(
+                    text("ALTER TABLE linkedin_campaigns ADD COLUMN followup_interval_hours INTEGER DEFAULT 72")
+                )
+                conn.execute(
+                    text(
+                        "UPDATE linkedin_campaigns SET followup_interval_hours = 72 WHERE followup_interval_hours IS NULL"
+                    )
+                )
+
+        insp = inspect(connection_engine)
+        if insp.has_table("contacts"):
+            ctcols = [c["name"] for c in insp.get_columns("contacts")]
+            if "unipile_provider_id" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN unipile_provider_id TEXT"))
+            if "linkedin_invite_sent_at" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN linkedin_invite_sent_at DATETIME"))
+            if "linkedin_invite_pending" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN linkedin_invite_pending INTEGER DEFAULT 0"))
+            if "linkedin_connection_accepted_at" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN linkedin_connection_accepted_at DATETIME"))
+            if "linkedin_last_followup_sent_at" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN linkedin_last_followup_sent_at DATETIME"))
+            if "linkedin_followup_next_email_number" not in ctcols:
+                conn.execute(text("ALTER TABLE contacts ADD COLUMN linkedin_followup_next_email_number INTEGER"))
 
 
 # Create tables then migrate legacy SQLite schemas

backend/app/main.py

@@ -60,6 +60,7 @@ from .models import (
     LinkedinCampaignCreateRequest,
     LinkedinCampaignGenerateRequest,
     LinkedinCampaignExecuteRequest,
+    LinkedinCampaignPatchRequest,
 )
 from .gmail_invite import send_invite_email_via_gmail
 from .gpt_service import generate_email_sequence, generate_linkedin_sequence, enrich_manual_contact_profile
@@ -107,6 +108,7 @@ 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", "")
 FRONTEND_ORIGIN = os.getenv("FRONTEND_ORIGIN", "").rstrip("/")
+UNIPILE_WEBHOOK_SECRET = os.getenv("UNIPILE_WEBHOOK_SECRET", "").strip()
 
 # ---- API ----
 def _safe_str(value):
@@ -276,6 +278,23 @@ def _linkedin_invite_note(text: str) -> str:
     return t[:277].rstrip() + "..."
 
 
+def _send_unipile_dm(account_id: str, provider_id: str, text: str):
+    """Open (or reuse) a 1:1 LinkedIn chat and send a message."""
+    chat = _unipile_request(
+        "POST",
+        "/api/v1/chats",
+        {"account_id": account_id, "attendees": [provider_id]},
+    )
+    chat_id = _safe_str(chat.get("id") if isinstance(chat, dict) else "")
+    if not chat_id:
+        raise ValueError("UniPile chat id not found")
+    _unipile_request(
+        "POST",
+        f"/api/v1/chats/{requests.utils.quote(chat_id, safe='')}/messages",
+        {"text": text or ""},
+    )
+
+
 def _public_origin_from_request(request: Request) -> str:
     """
     Resolve browser-facing origin behind proxies (HF Spaces, ingress).
@@ -1248,6 +1267,73 @@ async def unipile_linkedin_hosted_callback(request: Request, db: Session = Depen
     return {"ok": True}
 
 
+@app.post("/api/webhooks/unipile")
+async def unipile_users_webhook(request: Request, db: Session = Depends(get_db)):
+    """
+    Receive UniPile USERS webhook events (e.g. new_relation when an invitation is accepted).
+    Register `request_url` in UniPile to this path (POST /api/v1/webhooks, source: users).
+    See: https://developer.unipile.com/docs/detecting-accepted-invitations
+    """
+    if UNIPILE_WEBHOOK_SECRET:
+        auth_h = request.headers.get("Unipile-Auth") or request.headers.get("X-Unipile-Auth") or ""
+        if auth_h != UNIPILE_WEBHOOK_SECRET:
+            raise HTTPException(status_code=401, detail="Invalid webhook secret")
+
+    try:
+        body = await request.json()
+    except Exception:
+        raise HTTPException(status_code=400, detail="Expected JSON body")
+
+    event = _safe_str((body or {}).get("event"))
+    if event != "new_relation":
+        return {"ok": True, "ignored": True, "reason": "unsupported_event"}
+
+    account_id = _safe_str((body or {}).get("account_id"))
+    provider_id = _safe_str((body or {}).get("user_provider_id"))
+    if not account_id or not provider_id:
+        return {"ok": True, "ignored": True, "reason": "missing_ids"}
+
+    ua = (
+        db.query(UnipileAccount)
+        .filter(UnipileAccount.unipile_account_id == account_id)
+        .first()
+    )
+    if not ua:
+        return {"ok": True, "ignored": True, "reason": "unknown_account"}
+
+    now = datetime.utcnow()
+    contacts = (
+        db.query(Contact)
+        .filter(
+            Contact.tenant_id == ua.tenant_id,
+            Contact.unipile_provider_id == provider_id,
+            Contact.source == "linkedin_campaign",
+        )
+        .all()
+    )
+    updated = 0
+    for ct in contacts:
+        if ct.linkedin_connection_accepted_at:
+            continue
+        ct.linkedin_invite_pending = 0
+        ct.linkedin_connection_accepted_at = now
+        updated += 1
+    db.commit()
+    return {"ok": True, "updated_contacts": updated}
+
+
+@app.get("/api/unipile/webhook-url-hint")
+async def unipile_webhook_url_hint(request: Request):
+    """Public URL your UniPile webhook should POST to (same host as this API)."""
+    root = _public_origin_from_request(request)
+    return {
+        "post_url": f"{root}/api/webhooks/unipile",
+        "unipile_dashboard": "Create webhook source `users` → event new_relation (default for USERS webhook).",
+        "optional_auth_header": "Unipile-Auth or X-Unipile-Auth matching UNIPILE_WEBHOOK_SECRET",
+        "latency_note": "UniPile may deliver new_relation many hours after acceptance; LinkedIn has no real-time connection API.",
+    }
+
+
 @app.post("/api/unipile/linkedin/connect")
 async def connect_unipile_linkedin(
     body: UnipileConnectRequest,
@@ -1338,12 +1424,38 @@ async def list_linkedin_campaigns(t: TenantContext = Depends(get_tenant_context)
                 "created_at": c.created_at.isoformat() if c.created_at else None,
                 "executed_at": c.executed_at.isoformat() if c.executed_at else None,
                 "execution_result": c.execution_result,
+                "followup_interval_hours": c.followup_interval_hours if c.followup_interval_hours is not None else 72,
             }
             for c, a in rows
         ]
     }
 
 
+@app.patch("/api/linkedin-campaigns/{campaign_id}")
+async def patch_linkedin_campaign(
+    campaign_id: int,
+    body: LinkedinCampaignPatchRequest,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    db = t.db
+    row = (
+        db.query(LinkedinCampaign)
+        .filter(
+            LinkedinCampaign.tenant_id == t.tenant_id,
+            LinkedinCampaign.user_id == t.user_id,
+            LinkedinCampaign.id == campaign_id,
+        )
+        .first()
+    )
+    if not row:
+        raise HTTPException(status_code=404, detail="Campaign not found")
+    if body.followup_interval_hours is not None:
+        row.followup_interval_hours = body.followup_interval_hours
+    row.updated_at = datetime.utcnow()
+    db.commit()
+    return {"message": "Campaign updated", "followup_interval_hours": row.followup_interval_hours}
+
+
 @app.post("/api/linkedin-campaigns")
 async def create_linkedin_campaign(
     body: LinkedinCampaignCreateRequest,
@@ -1782,6 +1894,11 @@ async def execute_linkedin_campaign(
 
         if st_inv < 400:
             invite_sent += 1
+            ts = datetime.utcnow()
+            c.unipile_provider_id = provider_id
+            c.linkedin_invite_pending = 1
+            c.linkedin_invite_sent_at = ts
+            c.linkedin_followup_next_email_number = 2
             attempts.append(
                 {
                     "contact_id": c.id,
@@ -1805,20 +1922,14 @@ async def execute_linkedin_campaign(
                 inv_err = inv_err or json.dumps(inv_res.get("errors"))[:400]
 
         try:
-            chat = _unipile_request(
-                "POST",
-                "/api/v1/chats",
-                {"account_id": acc_uid, "attendees": [provider_id]},
-            )
-            chat_id = _safe_str(chat.get("id") if isinstance(chat, dict) else "")
-            if not chat_id:
-                raise ValueError("UniPile chat id not found")
-            _unipile_request(
-                "POST",
-                f"/api/v1/chats/{requests.utils.quote(chat_id, safe='')}/messages",
-                {"text": first_msg.email_content or ""},
-            )
+            _send_unipile_dm(acc_uid, provider_id, first_msg.email_content or "")
             dm_sent += 1
+            ts = datetime.utcnow()
+            c.unipile_provider_id = provider_id
+            c.linkedin_invite_pending = 0
+            c.linkedin_connection_accepted_at = ts
+            c.linkedin_last_followup_sent_at = ts
+            c.linkedin_followup_next_email_number = 2
             attempts.append(
                 {
                     "contact_id": c.id,
@@ -1867,7 +1978,11 @@ async def execute_linkedin_campaign(
         "errors": errors[:200],
         "attempts": attempts[:500],
         "execution_kind": "linkedin_connection_invite",
-        "help": "Invites appear under LinkedIn → My Network → Manage invitations → Sent. Dry run performs zero UniPile calls.",
+        "help": (
+            "Invites appear under LinkedIn → My Network → Manage invitations → Sent. "
+            "Follow-up steps are sent via POST /api/linkedin-campaigns/{id}/process-followups after acceptance "
+            "(UniPile users webhook new_relation marks acceptance; can lag hours)."
+        ),
     }
     campaign.status = "completed" if failed == 0 else "failed"
     campaign.execution_result = result
@@ -1877,6 +1992,155 @@ async def execute_linkedin_campaign(
     return {"message": "Campaign execution finished", **result}
 
 
+@app.post("/api/linkedin-campaigns/{campaign_id}/process-followups")
+async def process_linkedin_campaign_followups(
+    campaign_id: int,
+    t: TenantContext = Depends(get_tenant_context),
+):
+    """
+    Deliver generated sequence steps 2+ as LinkedIn DMs when due.
+
+    * Invite flow: waits for `linkedin_connection_accepted_at` (set by UniPile `new_relation` webhook or DM fallback).
+    * First follow-up (step 2) after invite: `accepted_at + followup_interval_hours`.
+    * If execute fell back to DM for step 1: step 2 waits `last_followup_sent_at + interval`.
+
+    Run this endpoint on a schedule (e.g. hourly cron); it only sends when the interval has elapsed.
+    """
+    db = t.db
+    campaign = (
+        db.query(LinkedinCampaign)
+        .filter(
+            LinkedinCampaign.tenant_id == t.tenant_id,
+            LinkedinCampaign.user_id == t.user_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.user_id == t.user_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")
+
+    interval_h = campaign.followup_interval_hours if campaign.followup_interval_hours else 72
+    now = datetime.utcnow()
+    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()
+    )
+
+    sent = 0
+    skipped = 0
+    failed = 0
+    details = []
+
+    for c in contacts:
+        n = c.linkedin_followup_next_email_number
+        if not n or not c.unipile_provider_id:
+            skipped += 1
+            continue
+
+        max_step = (
+            db.query(func.max(GeneratedSequence.email_number))
+            .filter(
+                GeneratedSequence.tenant_id == t.tenant_id,
+                GeneratedSequence.file_id == campaign.file_id,
+                GeneratedSequence.channel == "linkedin",
+                GeneratedSequence.sequence_id == c.row_index,
+            )
+            .scalar()
+        ) or 0
+
+        if max_step < 2:
+            skipped += 1
+            continue
+
+        if n > max_step:
+            c.linkedin_followup_next_email_number = None
+            skipped += 1
+            continue
+
+        if c.linkedin_invite_pending and not c.linkedin_connection_accepted_at:
+            skipped += 1
+            continue
+
+        if n == 2:
+            if c.linkedin_last_followup_sent_at is None:
+                if not c.linkedin_connection_accepted_at:
+                    skipped += 1
+                    continue
+                if now < c.linkedin_connection_accepted_at + timedelta(hours=interval_h):
+                    skipped += 1
+                    continue
+            else:
+                if now < c.linkedin_last_followup_sent_at + timedelta(hours=interval_h):
+                    skipped += 1
+                    continue
+        else:
+            if not c.linkedin_last_followup_sent_at:
+                skipped += 1
+                continue
+            if now < c.linkedin_last_followup_sent_at + timedelta(hours=interval_h):
+                skipped += 1
+                continue
+
+        msg_row = (
+            db.query(GeneratedSequence)
+            .filter(
+                GeneratedSequence.tenant_id == t.tenant_id,
+                GeneratedSequence.file_id == campaign.file_id,
+                GeneratedSequence.channel == "linkedin",
+                GeneratedSequence.sequence_id == c.row_index,
+                GeneratedSequence.email_number == n,
+            )
+            .first()
+        )
+        if not msg_row:
+            skipped += 1
+            continue
+
+        try:
+            _send_unipile_dm(
+                account.unipile_account_id,
+                c.unipile_provider_id,
+                msg_row.email_content or "",
+            )
+            c.linkedin_last_followup_sent_at = now
+            c.linkedin_followup_next_email_number = n + 1 if n < max_step else None
+            sent += 1
+            details.append({"contact_id": c.id, "step": n, "status": "sent"})
+        except Exception as e:
+            failed += 1
+            details.append({"contact_id": c.id, "step": n, "status": "failed", "error": str(e)})
+
+    campaign.updated_at = datetime.utcnow()
+    db.commit()
+    return {
+        "message": "Follow-up pass finished",
+        "sent": sent,
+        "skipped": skipped,
+        "failed": failed,
+        "followup_interval_hours": interval_h,
+        "details": details[:200],
+    }
+
+
 @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

@@ -258,3 +258,9 @@ class LinkedinCampaignGenerateRequest(BaseModel):
 
 class LinkedinCampaignExecuteRequest(BaseModel):
     dry_run: bool = False
+
+
+class LinkedinCampaignPatchRequest(BaseModel):
+    """Update LinkedIn campaign automation settings."""
+
+    followup_interval_hours: Optional[int] = Field(None, ge=1, le=720)

frontend/src/components/campaigns/CampaignsDashboardTab.jsx

@@ -0,0 +1,364 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    Plus,
+    MoreVertical,
+    Play,
+    Pause,
+    Pencil,
+    Trash2,
+    TrendingUp,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import CreateCampaignWizard from '@/components/campaigns/CreateCampaignWizard';
+import { cn } from '@/lib/utils';
+
+const STORAGE_KEY = 'emailout_campaigns_dashboard_v1';
+
+function uid() {
+    return typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `c_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+const DEMO_CAMPAIGNS = [
+    {
+        id: 'demo_1',
+        name: 'Q4 Enterprise SaaS Reachout',
+        status: 'running',
+        contacts: 2450,
+        openRate: 58,
+        replyRate: 12.4,
+        teamExtra: 12,
+        lastEditedLabel: null,
+    },
+    {
+        id: 'demo_2',
+        name: 'Inbound Demo Follow-up',
+        status: 'paused',
+        contacts: 840,
+        openRate: 42,
+        replyRate: 5.1,
+        teamExtra: 4,
+        lastEditedLabel: null,
+    },
+    {
+        id: 'demo_3',
+        name: 'Holiday Special Offer',
+        status: 'draft',
+        contacts: 5000,
+        openRate: null,
+        replyRate: null,
+        teamExtra: 0,
+        lastEditedLabel: 'Last edited 2 hours ago',
+    },
+];
+
+function loadCampaigns() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed) && parsed.length) return parsed;
+        }
+    } catch {
+        /* ignore */
+    }
+    return DEMO_CAMPAIGNS;
+}
+
+function saveCampaigns(list) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+    } catch {
+        /* ignore */
+    }
+}
+
+function StatusDot({ status }) {
+    const map = {
+        running: 'bg-emerald-500',
+        paused: 'bg-amber-500',
+        draft: 'bg-slate-400',
+    };
+    return <span className={cn('inline-block h-2 w-2 rounded-full', map[status] || map.draft)} />;
+}
+
+function MetricBar({ value, colorClass }) {
+    const v = Math.min(100, Math.max(0, value));
+    return (
+        <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-100">
+            <div className={cn('h-full rounded-full transition-all', colorClass)} style={{ width: `${v}%` }} />
+        </div>
+    );
+}
+
+export default function CampaignsDashboardTab() {
+    const [campaigns, setCampaigns] = useState(() => loadCampaigns());
+    const [wizardOpen, setWizardOpen] = useState(false);
+    const [menuOpenId, setMenuOpenId] = useState(null);
+
+    useEffect(() => {
+        saveCampaigns(campaigns);
+    }, [campaigns]);
+
+    const metrics = useMemo(() => {
+        const withOpen = campaigns.filter((c) => c.openRate != null);
+        const avgOpen =
+            withOpen.length > 0
+                ? withOpen.reduce((s, c) => s + (c.openRate || 0), 0) / withOpen.length
+                : 0;
+        const withReply = campaigns.filter((c) => c.replyRate != null);
+        const avgReply =
+            withReply.length > 0
+                ? withReply.reduce((s, c) => s + (c.replyRate || 0), 0) / withReply.length
+                : 0;
+        const totalReach = campaigns.reduce((s, c) => s + (c.contacts || 0), 0);
+        return {
+            totalReach,
+            avgOpen,
+            avgReply,
+        };
+    }, [campaigns]);
+
+    const toggleStatus = useCallback((id) => {
+        setCampaigns((prev) =>
+            prev.map((c) => {
+                if (c.id !== id) return c;
+                if (c.status === 'running') return { ...c, status: 'paused' };
+                if (c.status === 'paused') return { ...c, status: 'running' };
+                return c;
+            })
+        );
+    }, []);
+
+    const deleteCampaign = useCallback((id) => {
+        setCampaigns((prev) => prev.filter((c) => c.id !== id));
+        setMenuOpenId(null);
+    }, []);
+
+    const onWizardComplete = useCallback((payload) => {
+        const contacts = payload.contacts || 0;
+        setCampaigns((prev) => [
+            {
+                id: uid(),
+                name: payload.name,
+                status: 'running',
+                contacts,
+                openRate: null,
+                replyRate: null,
+                teamExtra: 0,
+                lastEditedLabel: 'Just now',
+            },
+            ...prev,
+        ]);
+    }, []);
+
+    return (
+        <div className="space-y-8">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <p className="text-sm text-slate-600 sm:max-w-xl">
+                    Manage and monitor your automated outreach performance. Open the wizard to name a campaign, upload
+                    your list, and continue through the next steps as you define them.
+                </p>
+                <Button
+                    type="button"
+                    className="shrink-0 bg-violet-600 text-white hover:bg-violet-700"
+                    onClick={() => setWizardOpen(true)}
+                >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Create New Campaign
+                </Button>
+            </div>
+
+            {/* Top metrics */}
+            <div className="grid gap-4 md:grid-cols-3">
+                <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                    <div className="pointer-events-none absolute -right-4 -top-4 opacity-[0.07]">
+                        <TrendingUp className="h-24 w-24 text-violet-600" />
+                    </div>
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Active reach</p>
+                    <p className="mt-2 text-3xl font-bold tabular-nums text-violet-600">
+                        {metrics.totalReach.toLocaleString()}
+                    </p>
+                    <span className="mt-2 inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">
+                        ↑ 14% vs last month
+                    </span>
+                </div>
+                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Avg. open rate</p>
+                    <p className="mt-2 text-3xl font-bold tabular-nums text-slate-900">
+                        {metrics.avgOpen > 0 ? `${metrics.avgOpen.toFixed(1)}%` : '—'}
+                    </p>
+                    <MetricBar value={metrics.avgOpen} colorClass="bg-violet-500" />
+                </div>
+                <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">Response goal</p>
+                    <p className="mt-2 text-3xl font-bold tabular-nums text-slate-900">
+                        {metrics.avgReply > 0 ? `${metrics.avgReply.toFixed(1)}%` : '—'}
+                    </p>
+                    <MetricBar value={metrics.avgReply} colorClass="bg-amber-700/80" />
+                </div>
+            </div>
+
+            {/* Campaign cards */}
+            {campaigns.length === 0 ? (
+                <div className="rounded-2xl border border-dashed border-slate-200 bg-white/60 py-16 text-center">
+                    <p className="text-slate-600">No campaigns yet. Create your first campaign to get started.</p>
+                    <Button
+                        type="button"
+                        className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
+                        onClick={() => setWizardOpen(true)}
+                    >
+                        <Plus className="mr-2 h-4 w-4" />
+                        Create New Campaign
+                    </Button>
+                </div>
+            ) : (
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+                {campaigns.map((c) => (
+                    <article
+                        key={c.id}
+                        className="relative flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-slate-300 hover:shadow-md"
+                    >
+                        <div className="flex items-start justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                                <StatusDot status={c.status} />
+                                <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-600">
+                                    {c.status === 'running'
+                                        ? 'Running'
+                                        : c.status === 'paused'
+                                          ? 'Paused'
+                                          : 'Draft'}
+                                </span>
+                            </div>
+                            <div className="relative">
+                                <button
+                                    type="button"
+                                    className="rounded-md p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
+                                    aria-label="Campaign menu"
+                                    onClick={() => setMenuOpenId((id) => (id === c.id ? null : c.id))}
+                                >
+                                    <MoreVertical className="h-4 w-4" />
+                                </button>
+                                {menuOpenId === c.id ? (
+                                    <>
+                                        <button
+                                            type="button"
+                                            className="fixed inset-0 z-10 cursor-default"
+                                            aria-label="Close menu"
+                                            onClick={() => setMenuOpenId(null)}
+                                        />
+                                        <div className="absolute right-0 z-20 mt-1 w-40 rounded-lg border border-slate-200 bg-white py-1 text-sm shadow-lg">
+                                            <button
+                                                type="button"
+                                                className="block w-full px-3 py-2 text-left hover:bg-slate-50"
+                                                onClick={() => setMenuOpenId(null)}
+                                            >
+                                                Rename (soon)
+                                            </button>
+                                            <button
+                                                type="button"
+                                                className="block w-full px-3 py-2 text-left text-red-600 hover:bg-red-50"
+                                                onClick={() => deleteCampaign(c.id)}
+                                            >
+                                                Delete
+                                            </button>
+                                        </div>
+                                    </>
+                                ) : null}
+                            </div>
+                        </div>
+
+                        <h3 className="mt-3 text-lg font-semibold text-slate-900">{c.name}</h3>
+
+                        <div className="mt-4 grid grid-cols-3 gap-2 text-center">
+                            <div>
+                                <p className="text-[11px] font-medium uppercase text-slate-500">Contacts</p>
+                                <p className="mt-0.5 font-semibold text-slate-900 tabular-nums">
+                                    {(c.contacts || 0).toLocaleString()}
+                                </p>
+                            </div>
+                            <div>
+                                <p className="text-[11px] font-medium uppercase text-slate-500">Open rate</p>
+                                <p className="mt-0.5 font-semibold text-slate-900 tabular-nums">
+                                    {c.openRate != null ? `${c.openRate}%` : '—'}
+                                </p>
+                            </div>
+                            <div>
+                                <p className="text-[11px] font-medium uppercase text-slate-500">Reply</p>
+                                <p className="mt-0.5 font-semibold text-slate-900 tabular-nums">
+                                    {c.replyRate != null ? `${c.replyRate}%` : '—'}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="mt-5 flex items-center justify-between border-t border-slate-100 pt-4">
+                            <div className="flex items-center gap-1">
+                                {c.lastEditedLabel ? (
+                                    <span className="text-xs text-slate-500">{c.lastEditedLabel}</span>
+                                ) : (
+                                    <>
+                                        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-violet-100 text-xs font-semibold text-violet-800">
+                                            Y
+                                        </span>
+                                        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-slate-200 text-xs font-semibold text-slate-700">
+                                            T
+                                        </span>
+                                        {c.teamExtra > 0 ? (
+                                            <span className="ml-1 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
+                                                +{c.teamExtra}
+                                            </span>
+                                        ) : null}
+                                    </>
+                                )}
+                            </div>
+                            <div className="flex items-center gap-1">
+                                {c.status === 'running' ? (
+                                    <button
+                                        type="button"
+                                        onClick={() => toggleStatus(c.id)}
+                                        className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                        title="Pause"
+                                    >
+                                        <Pause className="h-4 w-4" />
+                                    </button>
+                                ) : c.status === 'paused' ? (
+                                    <button
+                                        type="button"
+                                        onClick={() => toggleStatus(c.id)}
+                                        className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                        title="Resume"
+                                    >
+                                        <Play className="h-4 w-4" />
+                                    </button>
+                                ) : null}
+                                <button
+                                    type="button"
+                                    className="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
+                                    title="Edit"
+                                >
+                                    <Pencil className="h-4 w-4" />
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => deleteCampaign(c.id)}
+                                    className="rounded-lg p-2 text-slate-500 hover:bg-red-50 hover:text-red-600"
+                                    title="Delete"
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </button>
+                            </div>
+                        </div>
+                    </article>
+                ))}
+            </div>
+            )}
+
+            <CreateCampaignWizard
+                open={wizardOpen}
+                onOpenChange={setWizardOpen}
+                onComplete={onWizardComplete}
+            />
+        </div>
+    );
+}

frontend/src/components/campaigns/CreateCampaignWizard.jsx

@@ -0,0 +1,361 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, CloudUpload, ArrowRight, ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+const STEPS = [
+    { id: 1, label: 'Upload & Select' },
+    { id: 2, label: 'Configure Sequence' },
+    { id: 3, label: 'Generate Contents' },
+    { id: 4, label: 'Review & Launch' },
+];
+
+function estimateCsvRows(file) {
+    if (!file) return 0;
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const text = String(e.target?.result || '');
+            const lines = text.split(/\r?\n/).filter((line) => line.trim().length > 0);
+            resolve(Math.max(0, lines.length - 1));
+        };
+        reader.onerror = () => resolve(0);
+        reader.readAsText(file.slice(0, Math.min(file.size, 512 * 1024)));
+    });
+}
+
+export default function CreateCampaignWizard({ open, onOpenChange, onComplete }) {
+    const [step, setStep] = useState(1);
+    const [campaignName, setCampaignName] = useState('');
+    const [prospectFile, setProspectFile] = useState(null);
+    const [dragOver, setDragOver] = useState(false);
+    const [estimatedContacts, setEstimatedContacts] = useState(0);
+
+    const reset = useCallback(() => {
+        setStep(1);
+        setCampaignName('');
+        setProspectFile(null);
+        setEstimatedContacts(0);
+        setDragOver(false);
+    }, []);
+
+    useEffect(() => {
+        if (!open) reset();
+    }, [open, reset]);
+
+    useEffect(() => {
+        if (!prospectFile) {
+            setEstimatedContacts(0);
+            return;
+        }
+        let cancelled = false;
+        estimateCsvRows(prospectFile).then((n) => {
+            if (!cancelled) setEstimatedContacts(n);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [prospectFile]);
+
+    useEffect(() => {
+        if (!open) return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') onOpenChange(false);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, onOpenChange]);
+
+    const pickFile = (file) => {
+        if (!file) return;
+        const ok =
+            file.name.toLowerCase().endsWith('.csv') || file.name.toLowerCase().endsWith('.xlsx');
+        if (!ok) return;
+        setProspectFile(file);
+    };
+
+    const canContinueStep1 = campaignName.trim().length > 0 && prospectFile;
+
+    const handleContinue = () => {
+        if (step === 1 && !canContinueStep1) return;
+        if (step < 4) setStep((s) => s + 1);
+    };
+
+    const handleBack = () => {
+        if (step > 1) setStep((s) => s - 1);
+    };
+
+    const handleLaunch = () => {
+        if (!onComplete) {
+            onOpenChange(false);
+            return;
+        }
+        onComplete({
+            name: campaignName.trim(),
+            contacts: estimatedContacts || 0,
+            prospectFileName: prospectFile?.name || '',
+        });
+        onOpenChange(false);
+        reset();
+    };
+
+    if (!open) return null;
+
+    const modal = (
+        <div
+            className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="create-campaign-title"
+        >
+            <button
+                type="button"
+                className="absolute inset-0 bg-slate-900/40 backdrop-blur-[2px]"
+                aria-label="Close"
+                onClick={() => onOpenChange(false)}
+            />
+            <div className="relative z-[101] flex max-h-[min(92vh,880px)] w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-violet-200/30">
+                <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4">
+                    <h2 id="create-campaign-title" className="text-lg font-semibold text-slate-900">
+                        Create Campaign
+                    </h2>
+                    <button
+                        type="button"
+                        onClick={() => onOpenChange(false)}
+                        className="rounded-lg p-2 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                    >
+                        <X className="h-5 w-5" />
+                    </button>
+                </div>
+
+                {/* Stepper */}
+                <div className="border-b border-slate-100 bg-slate-50/80 px-4 py-4 sm:px-6">
+                    <div className="flex flex-wrap items-start justify-between gap-4">
+                        {STEPS.map((s) => {
+                            const active = step === s.id;
+                            const done = step > s.id;
+                            return (
+                                <div key={s.id} className="flex min-w-[120px] flex-1 flex-col items-center gap-2">
+                                    <div
+                                        className={cn(
+                                            'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition',
+                                            active &&
+                                                'bg-violet-600 text-white ring-4 ring-violet-100',
+                                            done && !active && 'bg-violet-100 text-violet-800',
+                                            !active && !done && 'border-2 border-slate-200 bg-white text-slate-400'
+                                        )}
+                                    >
+                                        {s.id}
+                                    </div>
+                                    <span
+                                        className={cn(
+                                            'text-center text-xs font-medium sm:text-sm',
+                                            active ? 'text-violet-700' : 'text-slate-500'
+                                        )}
+                                    >
+                                        {s.label}
+                                    </span>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-y-auto px-5 py-6 sm:px-8">
+                    {step === 1 ? (
+                        <div className="space-y-6">
+                            <div>
+                                <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-500">
+                                    Step 1
+                                </span>
+                                <p className="mt-2 text-sm text-slate-600">
+                                    Provide a name for your outreach campaign and upload your prospect list to begin.
+                                </p>
+                            </div>
+                            <div>
+                                <label className="mb-1.5 block text-sm font-medium text-slate-800">
+                                    Campaign Name
+                                </label>
+                                <Input
+                                    placeholder="e.g., Q4 Enterprise Tech Outreach"
+                                    value={campaignName}
+                                    onChange={(e) => setCampaignName(e.target.value)}
+                                    className="max-w-lg"
+                                />
+                            </div>
+                            <div>
+                                <label className="mb-1.5 block text-sm font-medium text-slate-800">
+                                    Prospect List (Apollo CSV)
+                                </label>
+                                <div
+                                    className={cn(
+                                        'relative flex min-h-[200px] cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed px-4 py-8 transition',
+                                        dragOver
+                                            ? 'border-violet-400 bg-violet-50/50'
+                                            : 'border-slate-200 bg-slate-50/50 hover:border-violet-300'
+                                    )}
+                                    onDragOver={(e) => {
+                                        e.preventDefault();
+                                        setDragOver(true);
+                                    }}
+                                    onDragLeave={() => setDragOver(false)}
+                                    onDrop={(e) => {
+                                        e.preventDefault();
+                                        setDragOver(false);
+                                        const f = e.dataTransfer.files?.[0];
+                                        pickFile(f);
+                                    }}
+                                    onClick={() => document.getElementById('wizard-csv-input')?.click()}
+                                >
+                                    <input
+                                        id="wizard-csv-input"
+                                        type="file"
+                                        accept=".csv,.xlsx"
+                                        className="hidden"
+                                        onChange={(e) => pickFile(e.target.files?.[0])}
+                                    />
+                                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-violet-100 text-violet-600">
+                                        <CloudUpload className="h-6 w-6" />
+                                    </div>
+                                    <p className="mt-3 text-center text-sm font-semibold text-slate-800">
+                                        Drag and drop your CSV here
+                                    </p>
+                                    <p className="mt-1 max-w-md text-center text-xs text-slate-500">
+                                        Supported formats: .csv, .xlsx. Ensure your file contains headers for &quot;Email&quot;,
+                                        &quot;First Name&quot;, and &quot;Company&quot;.
+                                    </p>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        className="mt-4"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            document.getElementById('wizard-csv-input')?.click();
+                                        }}
+                                    >
+                                        Browse Files
+                                    </Button>
+                                    {prospectFile ? (
+                                        <p className="mt-3 text-xs font-medium text-violet-700">
+                                            {prospectFile.name}
+                                            {estimatedContacts > 0
+                                                ? ` · ~${estimatedContacts.toLocaleString()} rows`
+                                                : ''}
+                                        </p>
+                                    ) : null}
+                                </div>
+                            </div>
+                            <div className="flex flex-col gap-3 rounded-xl border border-violet-100 bg-violet-50/60 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+                                <p className="text-sm text-slate-700">
+                                    <span className="font-medium text-violet-900">Direct Apollo Sync.</span>{' '}
+                                    Want to skip the export? Connect your Apollo account in settings for direct lead importing.
+                                </p>
+                                <button
+                                    type="button"
+                                    className="shrink-0 text-sm font-semibold text-violet-700 hover:text-violet-900"
+                                >
+                                    Configure Settings
+                                </button>
+                            </div>
+                        </div>
+                    ) : step === 2 ? (
+                        <PlaceholderStep
+                            title="Configure Sequence"
+                            body="Define steps, delays, and channels for this campaign. You’ll set this up in the next iteration."
+                        />
+                    ) : step === 3 ? (
+                        <PlaceholderStep
+                            title="Generate Contents"
+                            body="AI-generated messages and personalization will live here. Details coming soon."
+                        />
+                    ) : (
+                        <div className="space-y-6">
+                            <PlaceholderStep
+                                title="Review & Launch"
+                                body="Confirm prospect counts and delivery settings before going live."
+                            />
+                            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm">
+                                <div className="grid gap-2 sm:grid-cols-2">
+                                    <div>
+                                        <span className="text-slate-500">Campaign</span>
+                                        <p className="font-semibold text-slate-900">{campaignName || '—'}</p>
+                                    </div>
+                                    <div>
+                                        <span className="text-slate-500">Prospects (estimate)</span>
+                                        <p className="font-semibold text-slate-900">
+                                            {estimatedContacts > 0
+                                                ? estimatedContacts.toLocaleString()
+                                                : prospectFile
+                                                  ? 'Calculating…'
+                                                  : '—'}
+                                        </p>
+                                    </div>
+                                    <div className="sm:col-span-2">
+                                        <span className="text-slate-500">File</span>
+                                        <p className="font-medium text-slate-800">{prospectFile?.name || '—'}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex justify-end">
+                                <Button
+                                    type="button"
+                                    className="bg-violet-600 text-white hover:bg-violet-700"
+                                    onClick={handleLaunch}
+                                >
+                                    Launch campaign
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4 sm:px-8">
+                    <button
+                        type="button"
+                        onClick={() => {
+                            onOpenChange(false);
+                            reset();
+                        }}
+                        className="text-sm font-medium text-slate-600 hover:text-slate-900"
+                    >
+                        Cancel
+                    </button>
+                    <div className="flex flex-wrap items-center gap-2">
+                        {step > 1 ? (
+                            <Button type="button" variant="outline" onClick={handleBack}>
+                                <ArrowLeft className="mr-2 h-4 w-4" />
+                                Back
+                            </Button>
+                        ) : null}
+                        {step < 4 ? (
+                            <Button
+                                type="button"
+                                disabled={step === 1 && !canContinueStep1}
+                                className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-40"
+                                onClick={handleContinue}
+                            >
+                                {step === 1
+                                    ? 'Continue to Sequence'
+                                    : `Continue to ${STEPS[step]?.label ?? 'next'}`}
+                                <ArrowRight className="ml-2 h-4 w-4" />
+                            </Button>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+
+    return typeof document !== 'undefined' ? createPortal(modal, document.body) : null;
+}
+
+function PlaceholderStep({ title, body }) {
+    return (
+        <div className="flex min-h-[240px] flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 py-12 text-center">
+            <p className="text-base font-semibold text-slate-800">{title}</p>
+            <p className="mt-2 max-w-md text-sm text-slate-600">{body}</p>
+        </div>
+    );
+}

frontend/src/components/campaigns/LinkedinCampaignsTab.jsx

@@ -23,6 +23,8 @@ export default function LinkedinCampaignsTab() {
     );
     /** When true, the backend never calls UniPile — use once to validate rows, then turn off to send invites. */
     const [dryRun, setDryRun] = useState(false);
+    const [webhookPostUrl, setWebhookPostUrl] = useState('');
+    const [followupHours, setFollowupHours] = useState(72);
 
     const selectedCampaign = useMemo(
         () => campaigns.find((c) => String(c.id) === String(selectedCampaignId)) || null,
@@ -48,6 +50,19 @@ export default function LinkedinCampaignsTab() {
         refreshAll().catch((e) => console.error(e));
     }, []);
 
+    useEffect(() => {
+        apiFetch('/api/unipile/webhook-url-hint')
+            .then((r) => r.json())
+            .then((j) => setWebhookPostUrl(j.post_url || ''))
+            .catch(() => {});
+    }, []);
+
+    useEffect(() => {
+        if (selectedCampaign?.followup_interval_hours != null) {
+            setFollowupHours(selectedCampaign.followup_interval_hours);
+        }
+    }, [selectedCampaign]);
+
     useEffect(() => {
         if (!selectedCampaignId) {
             setSequences([]);
@@ -154,6 +169,45 @@ export default function LinkedinCampaignsTab() {
         }
     };
 
+    const saveFollowupInterval = async () => {
+        if (!selectedCampaignId) return;
+        setBusy(true);
+        try {
+            const res = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ followup_interval_hours: Number(followupHours) || 72 }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Could not save interval');
+            await refreshAll();
+        } catch (e) {
+            alert(e.message || 'Save failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const runFollowups = async () => {
+        if (!selectedCampaignId) return;
+        setBusy(true);
+        try {
+            const res = await apiFetch(`/api/linkedin-campaigns/${selectedCampaignId}/process-followups`, {
+                method: 'POST',
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) throw new Error(data.detail || 'Follow-up run failed');
+            await refreshAll();
+            alert(
+                `Follow-ups: sent ${data.sent ?? 0}, skipped ${data.skipped ?? 0}, failed ${data.failed ?? 0} (interval ${data.followup_interval_hours ?? '?'}h)`
+            );
+        } catch (e) {
+            alert(e.message || 'Follow-up run failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
     const executeCampaign = async () => {
         if (!selectedCampaignId) return;
         setBusy(true);
@@ -435,12 +489,55 @@ export default function LinkedinCampaignsTab() {
                             </table>
                         </div>
                         <div className="mt-2 text-xs text-slate-500">
-                            LinkedIn does not expose “accepted” here in real time; check My Network for new connections. UniPile
-                            may include network distance on the profile response when available.
+                            Acceptance timing: register the webhook URL below so UniPile can POST when someone becomes a
+                            connection (often delayed hours). Until then, step 2+ messages stay queued.
                         </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">6) Follow-up messages</h3>
+                <p className="mb-3 text-sm text-slate-600">
+                    After a connection request is accepted, UniPile can notify this app via the{' '}
+                    <strong>users / new_relation</strong> webhook (not instant — LinkedIn does not stream acceptances). Step 2+
+                    of your generated sequence is sent as LinkedIn DMs when you run the processor below, respecting the delay
+                    between steps.
+                </p>
+                <div className="mb-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-700">
+                    <div className="font-medium text-slate-800">Register this URL in UniPile</div>
+                    <code className="mt-1 block break-all text-slate-600">{webhookPostUrl || '…loading…'}</code>
+                    <div className="mt-1 text-slate-500">
+                        Create a USERS webhook pointing here; optionally set header Unipile-Auth ={' '}
+                        <code className="rounded bg-white px-1">UNIPILE_WEBHOOK_SECRET</code> on your server.
+                    </div>
+                </div>
+                <div className="mb-3 flex flex-wrap items-end gap-3">
+                    <div>
+                        <label className="mb-1 block text-xs font-medium text-slate-600">Hours between follow-up steps</label>
+                        <Input
+                            type="number"
+                            min={1}
+                            max={720}
+                            className="w-28"
+                            value={followupHours}
+                            onChange={(e) => setFollowupHours(Number(e.target.value))}
+                        />
+                    </div>
+                    <Button type="button" variant="outline" onClick={saveFollowupInterval} disabled={!selectedCampaignId || busy}>
+                        Save interval
+                    </Button>
+                    <Button type="button" onClick={runFollowups} disabled={!selectedCampaignId || busy}>
+                        Send due follow-ups now
+                    </Button>
+                </div>
+                <p className="text-xs text-slate-500">
+                    For production, call{' '}
+                    <code className="rounded bg-slate-100 px-1">POST /api/linkedin-campaigns/&#123;id&#125;/process-followups</code>{' '}
+                    on a schedule (e.g. hourly). Invites with a note also create a chat on accept — UniPile documents using the
+                    new-message webhook as a faster signal in some cases.
+                </p>
+            </div>
         </div>
     );
 }

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -4,6 +4,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import AppShell from '@/components/layout/AppShell';
 import EmailGeneratorTab from '@/components/campaigns/EmailGeneratorTab';
 import LinkedinCampaignsTab from '@/components/campaigns/LinkedinCampaignsTab';
+import CampaignsDashboardTab from '@/components/campaigns/CampaignsDashboardTab';
 import { useGeneratorWorkflow } from '@/context/GeneratorWorkflowContext';
 
 export default function EmailSequenceGenerator() {
@@ -23,13 +24,14 @@ export default function EmailSequenceGenerator() {
                     >
                         Start Over
                     </Button>
-                ) : null
+                ) : undefined
             }
         >
             <Tabs value={activeTab} onValueChange={setActiveTab}>
-                <TabsList className="mb-6">
+                <TabsList className="mb-6 flex-wrap gap-1">
                     <TabsTrigger value="generator">Email/AI Generator</TabsTrigger>
                     <TabsTrigger value="linkedin">LinkedIn Campaigns (UniPile)</TabsTrigger>
+                    <TabsTrigger value="campaigns">Campaigns</TabsTrigger>
                 </TabsList>
                 <TabsContent value="generator">
                     <EmailGeneratorTab />
@@ -37,6 +39,9 @@ export default function EmailSequenceGenerator() {
                 <TabsContent value="linkedin">
                     <LinkedinCampaignsTab />
                 </TabsContent>
+                <TabsContent value="campaigns">
+                    <CampaignsDashboardTab />
+                </TabsContent>
             </Tabs>
 
             <footer className="border-t border-slate-100 mt-16">