feat: Enhanced Outreach UI - Top 5 default + specific role generation

- market_intel_orchestrator.py: Updated generate_outreach_campaign to identify all relevant roles, generate top 5, and return remaining as suggestions. Added specific_role mode.

- types.ts: Added OutreachResponse interface.

- geminiService.ts: Updated to handle new response structure and specificRole parameter.

- StepOutreach.tsx: Added sidebar section for Suggested Roles with on-demand generation buttons.

general-market-intelligence/components/StepOutreach.tsx

@@ -1,8 +1,7 @@
-
 import React, { useState } from 'react';
-import { AnalysisResult, EmailDraft, Language } from '../types';
+import { AnalysisResult, EmailDraft, Language, OutreachResponse } from '../types';
 import { generateOutreachCampaign, translateEmailDrafts } from '../services/geminiService';
-import { Upload, FileText, Sparkles, Copy, Check, Loader2, ArrowRight, CheckCircle2, Download, Languages } from 'lucide-react';
+import { Upload, FileText, Sparkles, Copy, Check, Loader2, ArrowRight, CheckCircle2, Download, Languages, Plus, UserPlus } from 'lucide-react';
 
 interface StepOutreachProps {
   company: AnalysisResult;
@@ -15,9 +14,14 @@ interface StepOutreachProps {
 export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, referenceUrl, onBack, knowledgeBase }) => {
   const [fileContent, setFileContent] = useState<string>(knowledgeBase || '');
   const [fileName, setFileName] = useState<string>(knowledgeBase ? 'Knowledge Base from Strategy Step' : '');
+  
   const [isProcessing, setIsProcessing] = useState(false);
   const [isTranslating, setIsTranslating] = useState(false);
+  const [isGeneratingSpecific, setIsGeneratingSpecific] = useState<string | null>(null); // Track which specific role is loading
+
   const [emails, setEmails] = useState<EmailDraft[]>([]);
+  const [availableRoles, setAvailableRoles] = useState<string[]>([]); // Suggested roles not yet generated
+  
   const [activeTab, setActiveTab] = useState(0);
   const [copied, setCopied] = useState(false);
 
@@ -45,8 +49,10 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
     if (!fileContent) return;
     setIsProcessing(true);
     try {
-      const drafts = await generateOutreachCampaign(company, fileContent, language, referenceUrl);
-      setEmails(drafts);
+      // Initial generation (Top 5 + Suggestions)
+      const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl);
+      setEmails(response.campaigns);
+      setAvailableRoles(response.available_roles || []);
     } catch (e) {
       console.error(e);
       alert('Failed to generate campaign. Please try again.');
@@ -55,6 +61,28 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
     }
   };
 
+  const handleGenerateSpecific = async (role: string) => {
+      if (!fileContent) return;
+      setIsGeneratingSpecific(role);
+      try {
+          // Generate single specific campaign
+          const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl, role);
+          if (response.campaigns && response.campaigns.length > 0) {
+              // Add new campaign to list
+              setEmails(prev => [...prev, response.campaigns[0]]);
+              // Remove from available roles
+              setAvailableRoles(prev => prev.filter(r => r !== role));
+              // Switch view to new campaign
+              setActiveTab(emails.length);
+          }
+      } catch (e) {
+          console.error("Failed to generate specific role", e);
+          alert(`Failed to generate campaign for ${role}`);
+      } finally {
+          setIsGeneratingSpecific(null);
+      }
+  };
+
   const handleTranslate = async (targetLang: Language) => {
     if (emails.length === 0) return;
     setIsTranslating(true);
@@ -103,7 +131,7 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
 
   // Helper to render text with bold syntax **text**
   const renderBoldText = (text: string) => {
-    const parts = text.split(/(\*\*.*?\*\*)/g);
+    const parts = text.split(/(\**.*?\**)/g);
     return parts.map((part, index) => {
       if (part.startsWith('**') && part.endsWith('**')) {
         return <strong key={index} className="font-bold text-slate-900">{part.slice(2, -2)}</strong>;
@@ -167,33 +195,68 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
 
         <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden flex flex-col md:flex-row min-h-[600px]">
           {/* Sidebar Tabs */}
-          <div className="w-full md:w-72 bg-slate-50 border-r border-slate-200 p-2 flex flex-col gap-2 overflow-y-auto max-h-[600px]">
-            {emails.map((email, idx) => (
-              <button
-                key={idx}
-                onClick={() => setActiveTab(idx)}
-                className={`text-left p-3 rounded-lg text-sm font-medium transition-all group ${
-                  activeTab === idx 
-                    ? 'bg-white shadow-sm text-indigo-700 border border-indigo-100 ring-1 ring-indigo-500/20' 
-                    : 'text-slate-600 hover:bg-slate-200/50'
-                }`}
-              >
-                <div className="flex items-center justify-between">
-                    <span className="truncate">{email.persona}</span>
-                    <span className="text-[10px] bg-slate-200 text-slate-500 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">#{idx+1}</span>
+          <div className="w-full md:w-80 bg-slate-50 border-r border-slate-200 flex flex-col">
+            <div className="p-4 border-b border-slate-200">
+                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Generated Campaigns</h3>
+            </div>
+            
+            {/* Generated List */}
+            <div className="flex-1 overflow-y-auto p-2 flex flex-col gap-2">
+                {emails.map((email, idx) => (
+                <button
+                    key={idx}
+                    onClick={() => setActiveTab(idx)}
+                    className={`text-left p-3 rounded-lg text-sm font-medium transition-all group ${activeTab === idx 
+                        ? 'bg-white shadow-sm text-indigo-700 border border-indigo-100 ring-1 ring-indigo-500/20' 
+                        : 'text-slate-600 hover:bg-slate-200/50'
+                    }`}
+                >
+                    <div className="flex items-center justify-between">
+                        <span className="truncate font-semibold">{email.persona}</span>
+                        <span className="text-[10px] bg-slate-200 text-slate-500 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">#{idx+1}</span>
+                    </div>
+                    <div className="text-xs text-slate-400 mt-1 truncate font-normal opacity-80">{email.subject}</div>
+                </button>
+                ))}
+            </div>
+
+            {/* Suggestions List */}
+            {availableRoles.length > 0 && (
+                <div className="border-t border-slate-200 bg-slate-100/50 flex flex-col max-h-[40%]">
+                    <div className="p-3 border-b border-slate-200 flex items-center gap-2">
+                        <Sparkles size={14} className="text-indigo-500" />
+                        <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Other Relevant Roles</h3>
+                    </div>
+                    <div className="overflow-y-auto p-2 gap-2 flex flex-col">
+                        {availableRoles.map((role, i) => (
+                            <div key={i} className="flex items-center justify-between p-2 bg-white border border-slate-200 rounded-lg shadow-sm">
+                                <span className="text-xs font-medium text-slate-700 truncate max-w-[140px]" title={role}>{role}</span>
+                                <button 
+                                    onClick={() => handleGenerateSpecific(role)}
+                                    disabled={!!isGeneratingSpecific}
+                                    className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 p-1.5 rounded-md transition-colors disabled:opacity-50"
+                                    title="Generate Campaign"
+                                >
+                                    {isGeneratingSpecific === role ? (
+                                        <Loader2 size={14} className="animate-spin" />
+                                    ) : (
+                                        <Plus size={14} strokeWidth={3} />
+                                    )}
+                                </button>
+                            </div>
+                        ))}
+                    </div>
                 </div>
-                <div className="text-xs text-slate-400 mt-1 truncate font-normal opacity-80">{email.subject}</div>
-              </button>
-            ))}
+            )}
           </div>
 
           {/* Content Area */}
-          <div className="flex-1 p-8 flex flex-col overflow-y-auto">
+          <div className="flex-1 p-8 flex flex-col overflow-y-auto bg-slate-50/30">
             {activeEmail ? (
                 <>
                     <div className="mb-6">
                     <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Subject Line</label>
-                    <div className="text-lg font-semibold text-slate-800 bg-slate-50 p-4 rounded-lg border border-slate-200 select-text">
+                    <div className="text-lg font-semibold text-slate-800 bg-white p-4 rounded-lg border border-slate-200 select-text shadow-sm">
                         {activeEmail.subject}
                     </div>
                     </div>
@@ -209,14 +272,14 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
                         {copied ? "Copied" : "Copy Content"}
                         </button>
                     </div>
-                    <div className="bg-white border border-slate-200 rounded-xl p-6 text-slate-700 leading-relaxed whitespace-pre-wrap font-serif text-base select-text">
+                    <div className="bg-white border border-slate-200 rounded-xl p-8 text-slate-700 leading-relaxed whitespace-pre-wrap font-serif text-base select-text shadow-sm">
                         {renderBoldText(activeEmail.body)}
                     </div>
                     </div>
 
                     {/* Checklist Section */}
                     {activeEmail.keyPoints && activeEmail.keyPoints.length > 0 && (
-                        <div className="border-t border-slate-100 pt-6">
+                        <div className="border-t border-slate-200 pt-6">
                             <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4 flex items-center gap-2">
                                 <CheckCircle2 size={16} className="text-emerald-500" />
                                 Persona & KPI Analysis
@@ -247,7 +310,7 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
     <div className="max-w-2xl mx-auto mt-16 px-4">
        <div className="text-center mb-10">
         <div className="inline-block p-4 bg-indigo-100 rounded-full mb-4">
-           <Sparkles className="text-indigo-600" size={32} />
+           <UserPlus className="text-indigo-600" size={32} />
         </div>
         <h2 className="text-3xl font-bold text-slate-900 mb-4">Create Outreach Campaign</h2>
         <p className="text-lg text-slate-600">
@@ -261,7 +324,7 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
             <div className="border-2 border-dashed border-slate-300 rounded-xl p-12 text-center hover:border-indigo-400 hover:bg-slate-50 transition-all">
                 <input 
                     type="file" 
-                    accept=".md,.txt,.markdown" 
+                    accept=".md,.txt,.markdown"
                     onChange={handleFileUpload}
                     id="file-upload"
                     className="hidden"
@@ -287,7 +350,7 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
                         <p className="text-sm text-emerald-700">{fileName}</p>
                     </div>
                     <button 
-                        onClick={() => { setFileContent(''); setFileName(''); }} 
+                        onClick={() => { setFileContent(''); setFileName(''); }}
                         className="text-emerald-600 hover:text-emerald-800 text-sm font-medium"
                     >
                         Change
@@ -301,7 +364,7 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
                  >
                     {isProcessing ? (
                         <>
-                            <Loader2 className="animate-spin" /> Synthesizing Insights...
+                            <Loader2 className="animate-spin" /> Identifying Roles & Drafting Campaigns...
                         </>
                     ) : (
                         <>
@@ -319,4 +382,4 @@ export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, r
       </div>
     </div>
   );
-};
+};