update

frontend/src/components/campaigns/CampaignSequenceBuilder.jsx

@@ -0,0 +1,391 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+    Play,
+    Plus,
+    ChevronRight,
+    Flag,
+    Mail,
+    UserPlus,
+    MessageCircle,
+    Clock,
+    X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function uid() {
+    return typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `s_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+/** Default sequence matching the reference layout */
+export function createDefaultSequenceSteps() {
+    return [
+        {
+            id: uid(),
+            type: 'action',
+            channel: 'gmail',
+            action: 'email',
+            title: 'Send Email',
+            subtitle: 'Subject: Introduction to SequenceAI Efficiency',
+        },
+        { id: uid(), type: 'wait', days: 1 },
+        {
+            id: uid(),
+            type: 'action',
+            channel: 'linkedin',
+            action: 'linkedin_connect',
+            title: 'LinkedIn Connection Request',
+            subtitle: 'Personalized note using {first_name}',
+        },
+        { id: uid(), type: 'wait', days: 2 },
+        {
+            id: uid(),
+            type: 'action',
+            channel: 'linkedin',
+            action: 'linkedin_dm',
+            title: 'Follow up Message',
+            subtitle: 'Reference the previous email content',
+        },
+        {
+            id: uid(),
+            type: 'action',
+            channel: 'gmail',
+            action: 'email',
+            title: 'Send Email Followup',
+            subtitle: 'Re: Introduction to SequenceAI Efficiency',
+        },
+    ];
+}
+
+const ACTION_PRESETS = {
+    email: {
+        channel: 'gmail',
+        action: 'email',
+        title: 'Send Email',
+        subtitle: 'Subject: Your outreach subject line',
+    },
+    linkedin_connect: {
+        channel: 'linkedin',
+        action: 'linkedin_connect',
+        title: 'LinkedIn Connection Request',
+        subtitle: 'Personalized note using {first_name}',
+    },
+    linkedin_dm: {
+        channel: 'linkedin',
+        action: 'linkedin_dm',
+        title: 'LinkedIn Message',
+        subtitle: 'Follow-up message body preview',
+    },
+};
+
+/** Uppercase labels like the reference UI */
+function platformBadge(channel) {
+    if (channel === 'gmail') return 'GMAIL';
+    if (channel === 'linkedin') return 'LINKEDIN';
+    return '—';
+}
+
+function ActionIcon({ action }) {
+    const wrap = 'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-800';
+    if (action === 'linkedin_connect') {
+        return (
+            <div className={wrap}>
+                <UserPlus className="h-5 w-5" strokeWidth={2} />
+            </div>
+        );
+    }
+    if (action === 'linkedin_dm') {
+        return (
+            <div className={wrap}>
+                <MessageCircle className="h-5 w-5" strokeWidth={2} />
+            </div>
+        );
+    }
+    return (
+        <div className={wrap}>
+            <Mail className="h-5 w-5" strokeWidth={2} />
+        </div>
+    );
+}
+
+function InsertStepPicker({ open, onPick, onClose }) {
+    if (!open) return null;
+    return (
+        <div
+            className="absolute left-1/2 top-full z-20 mt-2 w-[min(100vw-2rem,22rem)] -translate-x-1/2 rounded-xl border border-slate-200 bg-white p-2 shadow-lg"
+            role="menu"
+        >
+            <p className="mb-2 px-2 text-[11px] font-medium uppercase tracking-wide text-slate-500">
+                Add step
+            </p>
+            <div className="flex flex-col gap-1">
+                <button
+                    type="button"
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-slate-800 hover:bg-slate-50"
+                    onClick={() => onPick('email')}
+                >
+                    <Mail className="h-4 w-4 text-sky-600" />
+                    Send Email (Gmail)
+                </button>
+                <button
+                    type="button"
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-slate-800 hover:bg-slate-50"
+                    onClick={() => onPick('linkedin_connect')}
+                >
+                    <UserPlus className="h-4 w-4 text-sky-600" />
+                    LinkedIn connection request
+                </button>
+                <button
+                    type="button"
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-slate-800 hover:bg-slate-50"
+                    onClick={() => onPick('linkedin_dm')}
+                >
+                    <MessageCircle className="h-4 w-4 text-sky-600" />
+                    LinkedIn message
+                </button>
+                <button
+                    type="button"
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-slate-800 hover:bg-slate-50"
+                    onClick={() => onPick('wait')}
+                >
+                    <Clock className="h-4 w-4 text-blue-600" />
+                    Wait / delay
+                </button>
+            </div>
+            <button
+                type="button"
+                className="mt-1 w-full rounded-lg py-1.5 text-xs text-slate-500 hover:bg-slate-50"
+                onClick={onClose}
+            >
+                Cancel
+            </button>
+        </div>
+    );
+}
+
+function WaitCard({ step, onRemove, onDaysChange }) {
+    return (
+        <div className="relative w-full max-w-md">
+            <div className="flex items-center justify-center gap-3 rounded-xl border border-dashed border-blue-300 bg-sky-50/90 px-4 py-3 text-sm text-slate-800 shadow-sm">
+                <Clock className="h-4 w-4 shrink-0 text-blue-600" />
+                <span className="font-medium">Wait</span>
+                <label className="flex items-center gap-1 font-medium tabular-nums">
+                    <input
+                        type="number"
+                        min={1}
+                        max={365}
+                        className="w-12 rounded-md border border-blue-200 bg-white px-2 py-1 text-center text-sm"
+                        value={step.days}
+                        onChange={(e) => onDaysChange?.(Number(e.target.value))}
+                    />
+                    {step.days === 1 ? 'day' : 'days'}
+                </label>
+                {onRemove ? (
+                    <button
+                        type="button"
+                        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:bg-sky-100 hover:text-slate-700"
+                        aria-label="Remove step"
+                        onClick={onRemove}
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                ) : null}
+            </div>
+        </div>
+    );
+}
+
+function ActionCard({ step, onConfigure, onRemove }) {
+    return (
+        <div className="relative w-full max-w-md">
+            <button
+                type="button"
+                className="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-slate-300 hover:bg-slate-50/80"
+                onClick={() => onConfigure?.(step)}
+            >
+                <ActionIcon action={step.action} />
+                <div className="min-w-0 flex-1">
+                    <div className="flex items-start justify-between gap-2">
+                        <p className="font-semibold text-slate-900">{step.title}</p>
+                        <span className="shrink-0 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
+                            {platformBadge(step.channel)}
+                        </span>
+                    </div>
+                    <p className="mt-0.5 truncate text-sm text-slate-500">{step.subtitle}</p>
+                </div>
+                <ChevronRight className="h-5 w-5 shrink-0 text-slate-300" aria-hidden />
+            </button>
+            {onRemove ? (
+                <button
+                    type="button"
+                    className="absolute -right-1 -top-1 rounded-full border border-slate-200 bg-white p-1 text-slate-400 shadow-sm hover:border-red-200 hover:bg-red-50 hover:text-red-600"
+                    aria-label="Remove step"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onRemove();
+                    }}
+                >
+                    <X className="h-3.5 w-3.5" />
+                </button>
+            ) : null}
+        </div>
+    );
+}
+
+/**
+ * Vertical sequence builder: START → steps (+ inserts) → END with dashed spine.
+ */
+export default function CampaignSequenceBuilder({ value, onChange }) {
+    const steps = value;
+    const setSteps = onChange;
+    const [pickerIndex, setPickerIndex] = useState(null);
+
+    const closePicker = useCallback(() => setPickerIndex(null), []);
+
+    const insertAt = useCallback(
+        (index, kind) => {
+            let newStep;
+            if (kind === 'wait') {
+                newStep = { id: uid(), type: 'wait', days: 1 };
+            } else {
+                const preset = ACTION_PRESETS[kind];
+                newStep = {
+                    id: uid(),
+                    type: 'action',
+                    ...preset,
+                };
+            }
+            const next = [...steps];
+            next.splice(index, 0, newStep);
+            setSteps(next);
+            closePicker();
+        },
+        [steps, setSteps, closePicker]
+    );
+
+    const removeAt = useCallback(
+        (index) => {
+            const next = steps.filter((_, i) => i !== index);
+            setSteps(next);
+        },
+        [steps, setSteps]
+    );
+
+    const updateWaitDays = useCallback(
+        (index, days) => {
+            const n = Math.max(1, Math.min(365, Number(days) || 1));
+            const next = steps.map((s, i) => (i === index ? { ...s, days: n } : s));
+            setSteps(next);
+        },
+        [steps, setSteps]
+    );
+
+    const stepCount = useMemo(() => steps.filter((s) => s.type === 'action').length, [steps]);
+
+    return (
+        <div className="mx-auto w-full max-w-md pb-4">
+            <div className="mb-4">
+                <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-500">
+                    Configure sequence
+                </span>
+                <p className="mt-2 text-sm text-slate-600">
+                    Build your outreach flow. Use <strong>+</strong> to add emails, LinkedIn steps, or delays. Click a box to
+                    edit preview text (saved with the campaign).
+                </p>
+            </div>
+
+            <div className="relative flex flex-col items-center">
+                {/* Vertical dashed spine */}
+                <div
+                    className="pointer-events-none absolute left-1/2 top-8 bottom-8 z-0 w-px -translate-x-1/2 border-l-2 border-dashed border-slate-300"
+                    aria-hidden
+                />
+
+                <div className="relative z-10 flex w-full flex-col items-center">
+                    {/* START */}
+                    <div className="flex flex-col items-center">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-violet-600 text-white shadow-md shadow-violet-200">
+                            <Play className="ml-0.5 h-5 w-5" strokeWidth={2.5} />
+                        </div>
+                        <span className="mt-1 text-xs font-bold uppercase tracking-wide text-slate-500">Start</span>
+                    </div>
+
+                    {/* Insert after START */}
+                    <div className="relative my-3 flex h-10 w-full items-center justify-center">
+                        <button
+                            type="button"
+                            className="relative z-10 flex h-9 w-9 items-center justify-center rounded-full border-2 border-slate-200 bg-white text-slate-500 shadow-sm transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700"
+                            aria-label="Add step"
+                            onClick={() => setPickerIndex((i) => (i === 0 ? null : 0))}
+                        >
+                            <Plus className="h-4 w-4" />
+                        </button>
+                        <InsertStepPicker
+                            open={pickerIndex === 0}
+                            onClose={closePicker}
+                            onPick={(k) => insertAt(0, k)}
+                        />
+                    </div>
+
+                    {steps.map((step, index) => (
+                        <React.Fragment key={step.id}>
+                            {step.type === 'wait' ? (
+                                <WaitCard
+                                    step={step}
+                                    onRemove={() => removeAt(index)}
+                                    onDaysChange={(d) => updateWaitDays(index, d)}
+                                />
+                            ) : (
+                                <ActionCard
+                                    step={step}
+                                    onConfigure={(s) => {
+                                        const title = window.prompt('Step title', s.title);
+                                        if (title === null) return;
+                                        const subtitle = window.prompt('Description / preview', s.subtitle);
+                                        if (subtitle === null) return;
+                                        const next = steps.map((x, i) =>
+                                            i === index ? { ...x, title, subtitle } : x
+                                        );
+                                        setSteps(next);
+                                    }}
+                                    onRemove={() => removeAt(index)}
+                                />
+                            )}
+
+                            <div className="relative my-3 flex h-10 w-full items-center justify-center">
+                                <button
+                                    type="button"
+                                    className="relative z-10 flex h-9 w-9 items-center justify-center rounded-full border-2 border-slate-200 bg-white text-slate-500 shadow-sm transition hover:border-violet-300 hover:bg-violet-50 hover:text-violet-700"
+                                    aria-label="Add step"
+                                    onClick={() =>
+                                        setPickerIndex((cur) => (cur === index + 1 ? null : index + 1))
+                                    }
+                                >
+                                    <Plus className="h-4 w-4" />
+                                </button>
+                                <InsertStepPicker
+                                    open={pickerIndex === index + 1}
+                                    onClose={closePicker}
+                                    onPick={(k) => insertAt(index + 1, k)}
+                                />
+                            </div>
+                        </React.Fragment>
+                    ))}
+
+                    {/* END */}
+                    <div className="mt-1 flex flex-col items-center">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-violet-100 text-slate-500 ring-4 ring-violet-50">
+                            <Flag className="h-5 w-5" />
+                        </div>
+                        <span className="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-400">End</span>
+                    </div>
+                </div>
+            </div>
+
+            <p className="mt-6 text-center text-xs text-slate-500">
+                {steps.length} sequence nodes · {stepCount} action step{stepCount !== 1 ? 's' : ''}
+            </p>
+        </div>
+    );
+}

frontend/src/components/campaigns/CreateCampaignWizard.jsx

@@ -4,6 +4,7 @@ import { X, Upload, ArrowRight, ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
+import CampaignSequenceBuilder, { createDefaultSequenceSteps } from '@/components/campaigns/CampaignSequenceBuilder';
 
 const STEPS = [
     { id: 1, label: 'Upload & Select' },
@@ -32,6 +33,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
     const [prospectFile, setProspectFile] = useState(null);
     const [dragOver, setDragOver] = useState(false);
     const [estimatedContacts, setEstimatedContacts] = useState(0);
+    const [sequenceSteps, setSequenceSteps] = useState(() => createDefaultSequenceSteps());
 
     const reset = useCallback(() => {
         setStep(1);
@@ -39,6 +41,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
         setProspectFile(null);
         setEstimatedContacts(0);
         setDragOver(false);
+        setSequenceSteps(createDefaultSequenceSteps());
     }, []);
 
     useEffect(() => {
@@ -96,6 +99,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
             name: campaignName.trim(),
             contacts: estimatedContacts || 0,
             prospectFileName: prospectFile?.name || '',
+            sequence: sequenceSteps,
         });
         onOpenChange(false);
         reset();
@@ -116,7 +120,12 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                 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={cn(
+                    'relative z-[101] flex max-h-[min(92vh,900px)] w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-violet-200/30',
+                    step === 2 ? 'max-w-4xl' : 'max-w-3xl'
+                )}
+            >
                 <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
@@ -261,10 +270,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                             </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."
-                        />
+                        <CampaignSequenceBuilder value={sequenceSteps} onChange={setSequenceSteps} />
                     ) : step === 3 ? (
                         <PlaceholderStep
                             title="Generate Contents"
@@ -296,6 +302,12 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                                         <span className="text-slate-500">File</span>
                                         <p className="font-medium text-slate-800">{prospectFile?.name || '—'}</p>
                                     </div>
+                                    <div className="sm:col-span-2">
+                                        <span className="text-slate-500">Sequence</span>
+                                        <p className="font-medium text-slate-800">
+                                            {sequenceSteps.length} step{sequenceSteps.length !== 1 ? 's' : ''} configured
+                                        </p>
+                                    </div>
                                 </div>
                             </div>
                             <div className="flex justify-end">

frontend/src/pages/EmailSequenceGenerator.jsx

@@ -1,31 +1,17 @@
 import React, { useState } from 'react';
-import { Button } from '@/components/ui/button';
 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() {
-    const { resetWorkflow } = useGeneratorWorkflow();
     const [activeTab, setActiveTab] = useState('generator');
 
     return (
         <AppShell
             title="Campaigns"
             subtitle="Create and run email + LinkedIn campaigns from one workspace."
-            rightContent={
-                activeTab === 'generator' ? (
-                    <Button
-                        variant="ghost"
-                        onClick={resetWorkflow}
-                        className="text-slate-500 hover:text-slate-700"
-                    >
-                        Start Over
-                    </Button>
-                ) : undefined
-            }
         >
             <Tabs value={activeTab} onValueChange={setActiveTab}>
                 <TabsList className="mb-6 flex-wrap gap-1">