Fix: Show missing key areas in brief review message

When the agent says 'I've captured X of 9 key areas', now lists
which areas are missing (e.g., 'You are missing: Target Audience,
Key Message, Tone and Style, etc.')

Added fieldLabels mapping and missingFields calculation to display
user-friendly names of the fields that still need to be provided.

Author: hunterjam

content-gen/src/app/frontend/src/components/BriefReview.tsx

@@ -21,6 +21,19 @@ const briefFields: { key: keyof CreativeBrief; label: string; prefix?: string }[
   { key: 'cta', label: 'Call to Action', prefix: '• ' },
 ];
 
+// Mapping of field keys to user-friendly labels for the 9 key areas
+const fieldLabels: Record<keyof CreativeBrief, string> = {
+  overview: 'Overview',
+  objectives: 'Objectives',
+  target_audience: 'Target Audience',
+  key_message: 'Key Message',
+  tone_and_style: 'Tone and Style',
+  deliverable: 'Deliverable',
+  timelines: 'Timelines',
+  visual_guidelines: 'Visual Guidelines',
+  cta: 'Call to Action',
+};
+
 export function BriefReview({
   brief,
   onConfirm,
@@ -32,6 +45,7 @@ export function BriefReview({
     'tone_and_style', 'deliverable', 'timelines', 'visual_guidelines', 'cta'
   ];
   const populatedFields = allFields.filter(key => brief[key]?.trim()).length;
+  const missingFields = allFields.filter(key => !brief[key]?.trim());
 
   return (
     <div className="message assistant" style={{ 
@@ -274,6 +288,8 @@ export function BriefReview({
           {populatedFields < 5 ? (
             <>
               I've captured <strong>{populatedFields}</strong> of 9 key areas. Would you like to add more details? 
+              You are missing: <strong>{missingFields.map(f => fieldLabels[f]).join(', ')}</strong>.
+              <br /><br />
               You can tell me things like:
               <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
                 <li>"The target audience should be homeowners aged 35-55"</li>