update

frontend/src/components/campaigns/CreateCampaignWizard.jsx

@@ -79,6 +79,7 @@ function WizardSequencePreview({
     sequences,
     isGenerating,
     generationComplete,
+    generationStarted,
     progress,
     contactCount,
     selectedProducts,
@@ -105,7 +106,8 @@ function WizardSequencePreview({
     });
     const displayedContacts = filteredContacts.slice(0, displayedCount);
     const hasMore = filteredContacts.length > displayedCount;
-    const showProgress = isGenerating || !generationComplete;
+    const showProgress =
+        generationStarted && (isGenerating || !generationComplete);
     const phaseLabel =
         sequenceHasLinkedin && genPhase === 'linkedin' && isGenerating
             ? 'LinkedIn sequences'
@@ -113,31 +115,33 @@ function WizardSequencePreview({
 
     return (
         <div className="w-full space-y-4">
-            <div className="mb-2 rounded-2xl border border-slate-200 bg-white p-6">
-                <div className="mb-4 flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                        {generationComplete ? (
-                            <div className="rounded-xl bg-green-100 p-3">
-                                <CheckCircle2 className="h-6 w-6 text-green-600" />
-                            </div>
-                        ) : (
-                            <div className="rounded-xl bg-violet-100 p-3">
-                                <Loader2 className="h-6 w-6 animate-spin text-violet-600" />
+            {generationStarted ? (
+                <div className="mb-2 rounded-2xl border border-slate-200 bg-white p-6">
+                    <div className="mb-4 flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            {generationComplete ? (
+                                <div className="rounded-xl bg-green-100 p-3">
+                                    <CheckCircle2 className="h-6 w-6 text-green-600" />
+                                </div>
+                            ) : (
+                                <div className="rounded-xl bg-violet-100 p-3">
+                                    <Loader2 className="h-6 w-6 animate-spin text-violet-600" />
+                                </div>
+                            )}
+                            <div>
+                                <h3 className="font-semibold text-slate-800">
+                                    {generationComplete ? 'Generation complete!' : `Generating ${phaseLabel}…`}
+                                </h3>
+                                <p className="text-sm text-slate-500">
+                                    {contacts.length} contacts · {sequences.length} generated rows
+                                    {contactCount ? ` · ~${contactCount} contacts in file` : ''}
+                                </p>
                             </div>
-                        )}
-                        <div>
-                            <h3 className="font-semibold text-slate-800">
-                                {generationComplete ? 'Generation complete!' : `Generating ${phaseLabel}…`}
-                            </h3>
-                            <p className="text-sm text-slate-500">
-                                {contacts.length} contacts · {sequences.length} generated rows
-                                {contactCount ? ` · ~${contactCount} contacts in file` : ''}
-                            </p>
                         </div>
                     </div>
+                    {showProgress ? <Progress value={progress} className="h-2" /> : null}
                 </div>
-                {showProgress ? <Progress value={progress} className="h-2" /> : null}
-            </div>
+            ) : null}
 
             {sequences.length > 0 && (
                 <div className="flex flex-col gap-3 sm:flex-row">
@@ -188,10 +192,10 @@ function WizardSequencePreview({
                 )}
             </div>
 
-            {!isGenerating && contacts.length === 0 && sequences.length === 0 && (
+            {!generationStarted && contacts.length === 0 && sequences.length === 0 && (
                 <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/80 py-12 text-center text-sm text-slate-500">
-                    Generated messages will appear here. You can continue to the next step while generation runs in the
-                    background.
+                    Generated messages will appear here after you click Generate. You can continue to the next step
+                    while generation runs in the background.
                 </div>
             )}
         </div>
@@ -766,6 +770,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                                         sequences={genSequences}
                                         isGenerating={genRunning}
                                         generationComplete={genComplete}
+                                        generationStarted={genRunId > 0}
                                         progress={genProgress}
                                         contactCount={wizardUpload?.contactCount}
                                         selectedProducts={selectedProducts}

frontend/src/components/prompts/PromptEditor.jsx

@@ -1052,77 +1052,98 @@ const PromptEditor = forwardRef(function PromptEditor(
                                 transition={{ duration: 0.2 }}
                                 className="rounded-2xl border border-slate-200 bg-white overflow-hidden"
                             >
-                                <div className="border-b border-slate-100 bg-slate-50/50 px-6 py-4 flex items-center justify-between">
-                                    <div className="flex items-center gap-3">
-                                        <div className="rounded-lg bg-violet-100 p-2">
-                                            {variant === 'linkedin' ? (
-                                                <Linkedin className="h-4 w-4 text-violet-600" />
-                                            ) : variant === 'campaign' ? (
-                                                <div className="flex gap-0.5">
-                                                    <Sparkles className="h-4 w-4 text-violet-600" />
-                                                    <Linkedin className="h-4 w-4 text-sky-600" />
+                                <div
+                                    className={`flex items-center justify-between border-b border-slate-100 bg-slate-50/50 px-6 ${
+                                        variant === 'campaign' ? 'py-3' : 'py-4'
+                                    }`}
+                                >
+                                    {variant === 'campaign' ? (
+                                        <>
+                                            <div>
+                                                <h4 className="text-sm font-semibold text-slate-800">Prompt</h4>
+                                                <p className="text-xs text-slate-500">Edit the prompt as desired.</p>
+                                            </div>
+                                            <div className="flex shrink-0 items-center gap-1">
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    onClick={() => handleRestoreDefault(product.name)}
+                                                    className="text-slate-600 hover:text-slate-900"
+                                                >
+                                                    <RotateCcw className="mr-1 h-4 w-4" />
+                                                    Restore Default
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() => handleSave(product.name)}
+                                                    className="bg-violet-600 hover:bg-violet-700"
+                                                >
+                                                    {savedStatus[product.name] ? (
+                                                        <>
+                                                            <CheckCircle2 className="mr-1 h-4 w-4" />
+                                                            Saved
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <Save className="mr-1 h-4 w-4" />
+                                                            Save
+                                                        </>
+                                                    )}
+                                                </Button>
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <div className="flex items-center gap-3">
+                                                <div className="rounded-lg bg-violet-100 p-2">
+                                                    {variant === 'linkedin' ? (
+                                                        <Linkedin className="h-4 w-4 text-violet-600" />
+                                                    ) : (
+                                                        <Sparkles className="h-4 w-4 text-violet-600" />
+                                                    )}
                                                 </div>
-                                            ) : (
-                                                <Sparkles className="h-4 w-4 text-violet-600" />
-                                            )}
-                                        </div>
-                                        <div>
-                                            <h4 className="font-semibold text-slate-800">
-                                                {variant === 'linkedin'
-                                                    ? 'LinkedIn sequence prompt'
-                                                    : variant === 'campaign'
-                                                      ? includeLinkedinInCampaign
-                                                          ? 'Gmail + LinkedIn prompts'
-                                                          : 'Gmail prompts'
-                                                      : 'Email Template'}
-                                            </h4>
-                                            <p className="text-xs text-slate-500">
-                                                {variant === 'campaign' && includeLinkedinInCampaign ? (
-                                                    <>
-                                                        Above the line{' '}
-                                                        <code className="rounded bg-slate-100 px-1 text-[10px]">
-                                                            {`<<<CAMPAIGN_LINKEDIN_PROMPT>>>`}
-                                                        </code>{' '}
-                                                        = Gmail (email generation). Below = LinkedIn system prompt.
-                                                        Keep that divider on its own line.
-                                                    </>
-                                                ) : (
-                                                    <>
+                                                <div>
+                                                    <h4 className="font-semibold text-slate-800">
+                                                        {variant === 'linkedin'
+                                                            ? 'LinkedIn sequence prompt'
+                                                            : 'Email Template'}
+                                                    </h4>
+                                                    <p className="text-xs text-slate-500">
                                                         Use variables: {"{{first_name}}"}, {"{{company}}"},{" "}
                                                         {"{{sender_name}}"}
-                                                    </>
-                                                )}
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <Button
-                                            variant="ghost"
-                                            size="sm"
-                                            onClick={() => handleRestoreDefault(product.name)}
-                                            className="text-slate-500 hover:text-slate-700"
-                                        >
-                                            <RotateCcw className="h-4 w-4 mr-1" />
-                                            Restore Default Prompt
-                                        </Button>
-                                        <Button
-                                            size="sm"
-                                            onClick={() => handleSave(product.name)}
-                                            className="bg-violet-600 hover:bg-violet-700"
-                                        >
-                                            {savedStatus[product.name] ? (
-                                                <>
-                                                    <CheckCircle2 className="h-4 w-4 mr-1" />
-                                                    Saved!
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <Save className="h-4 w-4 mr-1" />
-                                                    Save Template
-                                                </>
-                                            )}
-                                        </Button>
-                                    </div>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    onClick={() => handleRestoreDefault(product.name)}
+                                                    className="text-slate-500 hover:text-slate-700"
+                                                >
+                                                    <RotateCcw className="mr-1 h-4 w-4" />
+                                                    Restore Default
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() => handleSave(product.name)}
+                                                    className="bg-violet-600 hover:bg-violet-700"
+                                                >
+                                                    {savedStatus[product.name] ? (
+                                                        <>
+                                                            <CheckCircle2 className="mr-1 h-4 w-4" />
+                                                            Saved
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <Save className="mr-1 h-4 w-4" />
+                                                            Save
+                                                        </>
+                                                    )}
+                                                </Button>
+                                            </div>
+                                        </>
+                                    )}
                                 </div>
                                 <div className="p-6">
                                     <Textarea
@@ -1138,8 +1159,8 @@ const PromptEditor = forwardRef(function PromptEditor(
                                                 ? 'Enter your LinkedIn sequence system prompt…'
                                                 : variant === 'campaign'
                                                   ? includeLinkedinInCampaign
-                                                      ? 'Gmail prompt above the divider, then LinkedIn prompt below…'
-                                                      : 'Enter your Gmail / email generation prompt…'
+                                                      ? 'Email content above the divider; LinkedIn below.'
+                                                      : 'Your email generation prompt…'
                                                   : 'Enter your email template here...'
                                         }
                                         className={`${
@@ -1157,13 +1178,13 @@ const PromptEditor = forwardRef(function PromptEditor(
                                     >
                                         {savedStatus[product.name] ? (
                                             <>
-                                                <CheckCircle2 className="h-4 w-4 mr-1" />
-                                                Saved!
+                                                <CheckCircle2 className="mr-1 h-4 w-4" />
+                                                Saved
                                             </>
                                         ) : (
                                             <>
-                                                <Save className="h-4 w-4 mr-1" />
-                                                Save Template
+                                                <Save className="mr-1 h-4 w-4" />
+                                                Save
                                             </>
                                         )}
                                     </Button>

frontend/src/lib/mergeSequenceIntoContacts.js

@@ -1,15 +1,17 @@
 /**
  * Merge one generated sequence row (email or LinkedIn) into grouped contacts for previews.
  * When stepOrder is present (campaign wizard), dedupe by stepOrder + channel so merged timelines stay stable.
+ * Always returns new references (immutable) so React re-renders when LinkedIn rows stream in after emails.
  */
 export function mergeSequenceIntoContacts(prev, sequence) {
     const ch = sequence.channel || 'email';
-    const existingContact = prev.find(
+    const matchIdx = prev.findIndex(
         (c) =>
             c.firstName === sequence.firstName &&
             c.lastName === sequence.lastName &&
             c.email === sequence.email
     );
+
     const stepOrder =
         sequence.stepOrder != null && sequence.stepOrder !== undefined ? sequence.stepOrder : null;
     const step = {
@@ -22,33 +24,7 @@ export function mergeSequenceIntoContacts(prev, sequence) {
     const dedupeKey =
         stepOrder != null ? `ord-${stepOrder}-${ch}` : `${ch}-${step.emailNumber}`;
 
-    let updatedContacts;
-    if (existingContact) {
-        if (ch === 'linkedin') {
-            if (!existingContact.linkedin) existingContact.linkedin = [];
-            if (
-                !existingContact.linkedin.some((e) => {
-                    const k =
-                        e.stepOrder != null ? `ord-${e.stepOrder}-${ch}` : `${ch}-${e.emailNumber}`;
-                    return k === dedupeKey;
-                })
-            ) {
-                existingContact.linkedin.push(step);
-            }
-        } else {
-            if (!existingContact.emails) existingContact.emails = [];
-            if (
-                !existingContact.emails.some((e) => {
-                    const k =
-                        e.stepOrder != null ? `ord-${e.stepOrder}-${ch}` : `${ch}-${e.emailNumber}`;
-                    return k === dedupeKey;
-                })
-            ) {
-                existingContact.emails.push(step);
-            }
-        }
-        updatedContacts = [...prev];
-    } else {
+    if (matchIdx === -1) {
         const base = {
             id: sequence.id,
             firstName: sequence.firstName,
@@ -65,7 +41,39 @@ export function mergeSequenceIntoContacts(prev, sequence) {
         } else {
             base.emails = [step];
         }
-        updatedContacts = [...prev, base];
+        return [...prev, base];
     }
-    return updatedContacts;
+
+    const existing = prev[matchIdx];
+    const emails = [...(existing.emails || [])];
+    const linkedin = [...(existing.linkedin || [])];
+
+    if (ch === 'linkedin') {
+        if (
+            !linkedin.some((e) => {
+                const k =
+                    e.stepOrder != null ? `ord-${e.stepOrder}-${ch}` : `${ch}-${e.emailNumber}`;
+                return k === dedupeKey;
+            })
+        ) {
+            linkedin.push(step);
+        }
+    } else {
+        if (
+            !emails.some((e) => {
+                const k =
+                    e.stepOrder != null ? `ord-${e.stepOrder}-${ch}` : `${ch}-${e.emailNumber}`;
+                return k === dedupeKey;
+            })
+        ) {
+            emails.push(step);
+        }
+    }
+
+    const updated = {
+        ...existing,
+        emails,
+        linkedin,
+    };
+    return prev.map((c, i) => (i === matchIdx ? updated : c));
 }