update

frontend/src/components/campaigns/CreateCampaignWizard.jsx

@@ -222,6 +222,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
     const [genPhase, setGenPhase] = useState('email');
     const [genRunId, setGenRunId] = useState(0);
     const eventSourceRef = useRef(null);
+    const promptEditorRef = useRef(null);
     const prevGenRunIdRef = useRef(null);
 
     const sequenceHasLinkedin = useMemo(
@@ -510,6 +511,7 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
             alert('Select products and fill all prompt templates before generating.');
             return;
         }
+        promptEditorRef.current?.commitCampaignPrompts?.();
         try {
             const res = await apiFetch('/api/save-prompts', {
                 method: 'POST',
@@ -720,9 +722,11 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                                 </span>
                                 <h3 className="mt-2 text-lg font-semibold text-slate-900">Prompts & generation</h3>
                                 <p className="mt-1 text-sm text-slate-600">
-                                    Same experience as Email / AI Generator: templates follow your product defaults, with
-                                    an added block that mirrors the sequence you configured (Gmail + LinkedIn). Touch
-                                    counts in the prompt are ignored — the wizard sequence is authoritative.
+                                    One template per product: Gmail prompt above the divider, LinkedIn system prompt
+                                    below (when your sequence includes LinkedIn). Touch counts in the text are ignored —
+                                    the wizard sequence is authoritative. Click{' '}
+                                    <span className="font-medium text-slate-800">Save template</span> or{' '}
+                                    <span className="font-medium text-slate-800">Generate</span> to apply edits.
                                 </p>
                             </div>
                             <ProductSelector
@@ -732,25 +736,15 @@ export default function CreateCampaignWizard({ open, onOpenChange, onComplete })
                             {selectedProducts.length > 0 ? (
                                 <>
                                     <PromptEditor
+                                        ref={promptEditorRef}
                                         selectedProducts={selectedProducts}
                                         prompts={prompts}
                                         onPromptsChange={setPrompts}
-                                        variant="email"
+                                        variant="campaign"
+                                        includeLinkedinInCampaign={sequenceHasLinkedin}
+                                        linkedinPrompts={linkedinPrompts}
+                                        onLinkedinPromptsChange={setLinkedinPrompts}
                                     />
-                                    {sequenceHasLinkedin ? (
-                                        <div className="space-y-2">
-                                            <h4 className="text-base font-semibold text-slate-800">LinkedIn prompts</h4>
-                                            <p className="text-sm text-slate-500">
-                                                Required because this campaign includes LinkedIn steps.
-                                            </p>
-                                            <PromptEditor
-                                                selectedProducts={selectedProducts}
-                                                prompts={linkedinPrompts}
-                                                onPromptsChange={setLinkedinPrompts}
-                                                variant="linkedin"
-                                            />
-                                        </div>
-                                    ) : null}
                                     <div className="flex flex-wrap items-center gap-3">
                                         <Button
                                             type="button"

frontend/src/components/prompts/PromptEditor.jsx

@@ -1,10 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { FileText, Save, RotateCcw, Sparkles, CheckCircle2, Linkedin } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { motion, AnimatePresence } from 'framer-motion';
 
+/** Do not remove this line in combined campaign prompts — it separates Gmail vs LinkedIn system context. */
+export const CAMPAIGN_COMBINED_PROMPT_SPLIT = '\n\n<<<CAMPAIGN_LINKEDIN_PROMPT>>>\n\n';
+
+function splitCampaignRaw(raw, includeLinkedinSection) {
+    if (!includeLinkedinSection) {
+        return { email: raw, linkedin: '' };
+    }
+    const idx = raw.indexOf(CAMPAIGN_COMBINED_PROMPT_SPLIT);
+    return {
+        email: (idx === -1 ? raw : raw.slice(0, idx)).trimEnd(),
+        linkedin: (idx === -1 ? '' : raw.slice(idx + CAMPAIGN_COMBINED_PROMPT_SPLIT.length)).trim(),
+    };
+}
+
 export const DEFAULT_TEMPLATES = {
     'Accounts Payable Automation': `🔒 SYSTEM PROMPT (DO NOT MODIFY)
 
@@ -817,13 +831,19 @@ LinkedIn DMs for finance teams about expense workflows. 3 messages, professional
 Procurement-focused LinkedIn sequence in 3 messages. Practical questions only. Label Message 1, 2, 3.`,
 };
 
-export default function PromptEditor({
-    selectedProducts,
-    prompts,
-    onPromptsChange,
-    onSaveComplete,
-    variant = 'email',
-}) {
+const PromptEditor = forwardRef(function PromptEditor(
+    {
+        selectedProducts,
+        prompts,
+        onPromptsChange,
+        onSaveComplete,
+        variant = 'email',
+        linkedinPrompts = {},
+        onLinkedinPromptsChange,
+        includeLinkedinInCampaign = false,
+    },
+    ref
+) {
     const [activeTab, setActiveTab] = useState(selectedProducts[0]?.name || '');
     const [savedStatus, setSavedStatus] = useState({});
     const [localPrompts, setLocalPrompts] = useState({});
@@ -838,6 +858,26 @@ export default function PromptEditor({
     }, [selectedProducts, activeTab]);
 
     useEffect(() => {
+        if (variant === 'campaign') {
+            const newLocal = {};
+            selectedProducts.forEach((product) => {
+                const savedEmail = prompts[product.name];
+                const savedLi = linkedinPrompts[product.name];
+                const emailDefault = DEFAULT_TEMPLATES[product.name];
+                const liDefault = LINKEDIN_DEFAULT_TEMPLATES[product.name];
+                const emailFallback = `Subject: {{first_name}}, let's talk about ${product.name}\n\nHi {{first_name}},\n\nI wanted to reach out about how ${product.name} could benefit {{company}}.\n\n[Your personalized message here]\n\nBest,\n{{sender_name}}`;
+                const liFallback = `🔒 LINKEDIN SYSTEM PROMPT\n\nGenerate a 3-message LinkedIn sequence for ${product.name}.\nLabel: Message 1, Message 2, Message 3.\nUse {{first_name}}, {{company}}. Sender: Anna.`;
+                const email = savedEmail || emailDefault || emailFallback;
+                if (includeLinkedinInCampaign) {
+                    const li = savedLi || liDefault || liFallback;
+                    newLocal[product.name] = `${email}${CAMPAIGN_COMBINED_PROMPT_SPLIT}${li}`;
+                } else {
+                    newLocal[product.name] = email;
+                }
+            });
+            setLocalPrompts(newLocal);
+            return;
+        }
         const library = variant === 'linkedin' ? LINKEDIN_DEFAULT_TEMPLATES : DEFAULT_TEMPLATES;
         const newPrompts = {};
         selectedProducts.forEach((product) => {
@@ -855,7 +895,7 @@ export default function PromptEditor({
             }
         });
         setLocalPrompts(newPrompts);
-    }, [selectedProducts, prompts, variant]);
+    }, [selectedProducts, prompts, linkedinPrompts, variant, includeLinkedinInCampaign]);
 
     const handlePromptChange = (productName, value) => {
         setLocalPrompts(prev => ({
@@ -868,11 +908,30 @@ export default function PromptEditor({
         }));
     };
 
+    const flushProductToParent = useCallback(
+        (productName) => {
+            if (variant !== 'campaign') return;
+            const raw = localPrompts[productName] ?? '';
+            if (!includeLinkedinInCampaign || !onLinkedinPromptsChange) {
+                onPromptsChange((prev) => ({ ...prev, [productName]: raw }));
+                return;
+            }
+            const { email, linkedin } = splitCampaignRaw(raw, true);
+            onPromptsChange((prev) => ({ ...prev, [productName]: email }));
+            onLinkedinPromptsChange((prev) => ({ ...prev, [productName]: linkedin }));
+        },
+        [variant, localPrompts, includeLinkedinInCampaign, onPromptsChange, onLinkedinPromptsChange]
+    );
+
     const handleSave = (productName) => {
-        onPromptsChange({
-            ...prompts,
-            [productName]: localPrompts[productName]
-        });
+        if (variant === 'campaign') {
+            flushProductToParent(productName);
+        } else {
+            onPromptsChange({
+                ...prompts,
+                [productName]: localPrompts[productName] ?? '',
+            });
+        }
         setSavedStatus(prev => ({
             ...prev,
             [productName]: true
@@ -894,6 +953,23 @@ export default function PromptEditor({
     };
 
     const handleRestoreDefault = (productName) => {
+        if (variant === 'campaign') {
+            const emailDefault =
+                DEFAULT_TEMPLATES[productName] ||
+                `Subject: {{first_name}}, let's talk about ${productName}\n\nHi {{first_name}},\n\nI wanted to reach out about how ${productName} could benefit {{company}}.\n\n[Your personalized message here]\n\nBest,\n{{sender_name}}`;
+            if (includeLinkedinInCampaign) {
+                const liDefault =
+                    LINKEDIN_DEFAULT_TEMPLATES[productName] ||
+                    `🔒 LINKEDIN SYSTEM PROMPT\n\nGenerate a 3-message LinkedIn sequence for ${productName}.\nLabel: Message 1, Message 2, Message 3.\nUse {{first_name}}, {{company}}. Sender: Anna.`;
+                handlePromptChange(
+                    productName,
+                    `${emailDefault}${CAMPAIGN_COMBINED_PROMPT_SPLIT}${liDefault}`
+                );
+            } else {
+                handlePromptChange(productName, emailDefault);
+            }
+            return;
+        }
         const library = variant === 'linkedin' ? LINKEDIN_DEFAULT_TEMPLATES : DEFAULT_TEMPLATES;
         const defaultTemplate =
             library[productName] ||
@@ -903,6 +979,42 @@ export default function PromptEditor({
         handlePromptChange(productName, defaultTemplate);
     };
 
+    useImperativeHandle(
+        ref,
+        () => ({
+            commitCampaignPrompts() {
+                if (variant !== 'campaign') return;
+                const nextP = { ...prompts };
+                const nextLi = { ...linkedinPrompts };
+                selectedProducts.forEach((product) => {
+                    const name = product.name;
+                    const raw = localPrompts[name] ?? '';
+                    if (!includeLinkedinInCampaign || !onLinkedinPromptsChange) {
+                        nextP[name] = raw;
+                    } else {
+                        const { email, linkedin } = splitCampaignRaw(raw, true);
+                        nextP[name] = email;
+                        nextLi[name] = linkedin;
+                    }
+                });
+                onPromptsChange(nextP);
+                if (includeLinkedinInCampaign && onLinkedinPromptsChange) {
+                    onLinkedinPromptsChange(nextLi);
+                }
+            },
+        }),
+        [
+            variant,
+            selectedProducts,
+            localPrompts,
+            prompts,
+            linkedinPrompts,
+            includeLinkedinInCampaign,
+            onPromptsChange,
+            onLinkedinPromptsChange,
+        ]
+    );
+
     if (selectedProducts.length === 0) {
         return (
             <div className="rounded-2xl border border-slate-200 bg-slate-50/50 p-12 text-center">
@@ -945,6 +1057,11 @@ export default function PromptEditor({
                                         <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>
                                             ) : (
                                                 <Sparkles className="h-4 w-4 text-violet-600" />
                                             )}
@@ -953,10 +1070,28 @@ export default function PromptEditor({
                                             <h4 className="font-semibold text-slate-800">
                                                 {variant === 'linkedin'
                                                     ? 'LinkedIn sequence prompt'
-                                                    : 'Email Template'}
+                                                    : variant === 'campaign'
+                                                      ? includeLinkedinInCampaign
+                                                          ? 'Gmail + LinkedIn prompts'
+                                                          : 'Gmail prompts'
+                                                      : 'Email Template'}
                                             </h4>
                                             <p className="text-xs text-slate-500">
-                                                Use variables: {"{{first_name}}"}, {"{{company}}"}, {"{{sender_name}}"}
+                                                {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.
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        Use variables: {"{{first_name}}"}, {"{{company}}"},{" "}
+                                                        {"{{sender_name}}"}
+                                                    </>
+                                                )}
                                             </p>
                                         </div>
                                     </div>
@@ -993,13 +1128,24 @@ export default function PromptEditor({
                                     <Textarea
                                         value={localPrompts[product.name] || ''}
                                         onChange={(e) => handlePromptChange(product.name, e.target.value)}
+                                        onBlur={() => {
+                                            if (variant === 'campaign') {
+                                                flushProductToParent(product.name);
+                                            }
+                                        }}
                                         placeholder={
                                             variant === 'linkedin'
                                                 ? 'Enter your LinkedIn sequence system prompt…'
-                                                : 'Enter your email template here...'
+                                                : variant === 'campaign'
+                                                  ? includeLinkedinInCampaign
+                                                      ? 'Gmail prompt above the divider, then LinkedIn prompt below…'
+                                                      : 'Enter your Gmail / email generation prompt…'
+                                                  : 'Enter your email template here...'
                                         }
-                                        className="min-h-[320px] font-mono text-sm leading-relaxed resize-none 
-                                                   border-slate-200 focus:border-violet-300 focus:ring-violet-200"
+                                        className={`${
+                                            variant === 'campaign' ? 'min-h-[420px]' : 'min-h-[320px]'
+                                        } font-mono text-sm leading-relaxed resize-none 
+                                                   border-slate-200 focus:border-violet-300 focus:ring-violet-200`}
                                     />
                                 </div>
                                 {/* Save button at bottom for easy access after scrolling */}
@@ -1029,4 +1175,6 @@ export default function PromptEditor({
             </Tabs>
         </div>
     );
-}
+});
+
+export default PromptEditor;