Updated SEO Analysis Modal

frontend/src/components/BlogWriter/SEO/KeywordAnalysis.tsx

@@ -0,0 +1,240 @@
+/**
+ * Keyword Analysis Component
+ * 
+ * Displays comprehensive keyword analysis including keyword types, densities,
+ * missing keywords, over-optimization, and distribution analysis.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Grid,
+  Chip,
+  IconButton,
+  Tooltip
+} from '@mui/material';
+import { 
+  GpsFixed,
+  Search,
+  Warning
+} from '@mui/icons-material';
+
+interface KeywordAnalysisProps {
+  detailedAnalysis?: {
+    keyword_analysis?: {
+      primary_keywords: string[];
+      long_tail_keywords: string[];
+      semantic_keywords: string[];
+      keyword_density: Record<string, number>;
+      keyword_distribution: Record<string, any>;
+      missing_keywords: string[];
+      over_optimization: string[];
+      recommendations: string[];
+    };
+  };
+}
+
+export const KeywordAnalysis: React.FC<KeywordAnalysisProps> = ({ detailedAnalysis }) => {
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <GpsFixed sx={{ color: 'primary.main' }} />
+        <Typography variant="h6" component="h3" sx={{ fontWeight: 600 }}>
+          Keyword Analysis
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+        {/* Keyword Types Overview */}
+        <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+            Keyword Types Found
+          </Typography>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={4}>
+              <Box sx={{ p: 2, background: 'rgba(76, 175, 80, 0.1)', borderRadius: 2, border: '1px solid rgba(76, 175, 80, 0.3)' }}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'success.main', mb: 1 }}>
+                  Primary Keywords
+                </Typography>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  {detailedAnalysis?.keyword_analysis?.primary_keywords?.length || 0} found
+                </Typography>
+                {detailedAnalysis?.keyword_analysis?.primary_keywords?.slice(0, 3).map((keyword: string) => (
+                  <Chip key={keyword} label={keyword} size="small" sx={{ mr: 0.5, mb: 0.5 }} />
+                ))}
+              </Box>
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Box sx={{ p: 2, background: 'rgba(33, 150, 243, 0.1)', borderRadius: 2, border: '1px solid rgba(33, 150, 243, 0.3)' }}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'primary.main', mb: 1 }}>
+                  Long-tail Keywords
+                </Typography>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  {detailedAnalysis?.keyword_analysis?.long_tail_keywords?.length || 0} found
+                </Typography>
+                {detailedAnalysis?.keyword_analysis?.long_tail_keywords?.slice(0, 2).map((keyword: string) => (
+                  <Chip key={keyword} label={keyword} size="small" variant="outlined" sx={{ mr: 0.5, mb: 0.5 }} />
+                ))}
+              </Box>
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Box sx={{ p: 2, background: 'rgba(156, 39, 176, 0.1)', borderRadius: 2, border: '1px solid rgba(156, 39, 176, 0.3)' }}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'secondary.main', mb: 1 }}>
+                  Semantic Keywords
+                </Typography>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  {detailedAnalysis?.keyword_analysis?.semantic_keywords?.length || 0} found
+                </Typography>
+                {detailedAnalysis?.keyword_analysis?.semantic_keywords?.slice(0, 2).map((keyword: string) => (
+                  <Chip key={keyword} label={keyword} size="small" variant="outlined" color="secondary" sx={{ mr: 0.5, mb: 0.5 }} />
+                ))}
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+
+        {/* Keyword Densities */}
+        <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Keyword Densities
+            </Typography>
+            <Tooltip
+              title={
+                <Box sx={{ p: 1 }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                    Keyword Density Analysis
+                  </Typography>
+                  <Typography variant="body2" sx={{ mb: 1 }}>
+                    Shows how frequently each keyword appears in your content as a percentage of total words.
+                  </Typography>
+                  <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
+                    <strong>Optimal Range:</strong> 1-3% for primary keywords
+                  </Typography>
+                  <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
+                    <strong>Too Low (&lt;1%):</strong> Keyword may not be prominent enough
+                  </Typography>
+                  <Typography variant="caption" sx={{ display: 'block' }}>
+                    <strong>Too High (&gt;3%):</strong> Risk of keyword stuffing
+                  </Typography>
+                </Box>
+              }
+              arrow
+            >
+              <IconButton size="small" sx={{ color: 'primary.main' }}>
+                <Search />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {detailedAnalysis?.keyword_analysis?.keyword_density && Object.keys(detailedAnalysis.keyword_analysis.keyword_density).length > 0 ? (
+              Object.entries(detailedAnalysis.keyword_analysis.keyword_density).map(([keyword, density]) => (
+                <Box key={keyword} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 1, borderRadius: 1, background: 'rgba(0,0,0,0.02)' }}>
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>{keyword}</Typography>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                      {density > 3 ? 'Over-optimized' : density < 1 ? 'Under-optimized' : 'Optimal'}
+                    </Typography>
+                    <Chip 
+                      label={`${density.toFixed(1)}%`}
+                      color={density > 3 ? 'error' : density < 1 ? 'warning' : 'success'}
+                      size="small"
+                    />
+                  </Box>
+                </Box>
+              ))
+            ) : (
+              <Typography variant="body2" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
+                No keyword density data available. Make sure your research data includes target keywords.
+              </Typography>
+            )}
+          </Box>
+        </Paper>
+        
+        {/* Missing Keywords */}
+        {detailedAnalysis?.keyword_analysis?.missing_keywords && detailedAnalysis.keyword_analysis.missing_keywords.length > 0 && (
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+              <Typography variant="subtitle1" sx={{ fontWeight: 600, color: 'error.main' }}>
+                Missing Keywords
+              </Typography>
+              <Tooltip
+                title="Keywords from your research that are not found in the content. Consider adding these to improve SEO."
+                arrow
+              >
+                <IconButton size="small" sx={{ color: 'error.main' }}>
+                  <Warning />
+                </IconButton>
+              </Tooltip>
+            </Box>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+              {detailedAnalysis.keyword_analysis.missing_keywords.map((keyword: string) => (
+                <Chip key={keyword} label={keyword} color="error" variant="outlined" />
+              ))}
+            </Box>
+          </Paper>
+        )}
+        
+        {/* Over-Optimized Keywords */}
+        {detailedAnalysis?.keyword_analysis?.over_optimization && detailedAnalysis.keyword_analysis.over_optimization.length > 0 && (
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+              <Typography variant="subtitle1" sx={{ fontWeight: 600, color: 'warning.main' }}>
+                Over-Optimized Keywords
+              </Typography>
+              <Tooltip
+                title="Keywords that appear too frequently (over 3% density). Consider reducing their usage to avoid keyword stuffing penalties."
+                arrow
+              >
+                <IconButton size="small" sx={{ color: 'warning.main' }}>
+                  <Warning />
+                </IconButton>
+              </Tooltip>
+            </Box>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+              {detailedAnalysis.keyword_analysis.over_optimization.map((keyword: string) => (
+                <Chip key={keyword} label={keyword} color="warning" variant="outlined" />
+              ))}
+            </Box>
+          </Paper>
+        )}
+
+        {/* Keyword Distribution Analysis */}
+        {detailedAnalysis?.keyword_analysis?.keyword_distribution && Object.keys(detailedAnalysis.keyword_analysis.keyword_distribution).length > 0 && (
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Keyword Distribution Analysis
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              {Object.entries(detailedAnalysis.keyword_analysis.keyword_distribution).map(([keyword, data]: [string, any]) => (
+                <Box key={keyword} sx={{ p: 2, background: 'rgba(0,0,0,0.02)', borderRadius: 2 }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                    "{keyword}"
+                  </Typography>
+                  <Grid container spacing={2}>
+                    <Grid item xs={6}>
+                      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                        Density: {data.density?.toFixed(1)}%
+                      </Typography>
+                    </Grid>
+                    <Grid item xs={6}>
+                      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                        In Headings: {data.in_headings ? 'Yes' : 'No'}
+                      </Typography>
+                    </Grid>
+                    <Grid item xs={12}>
+                      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                        First Occurrence: Character {data.first_occurrence || 'Not found'}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                </Box>
+              ))}
+            </Box>
+          </Paper>
+        )}
+      </Box>
+    </Box>
+  );
+};

frontend/src/components/BlogWriter/SEO/README.md

@@ -0,0 +1,103 @@
+# SEO Components
+
+This folder contains extracted SEO analysis components that were refactored from the main `SEOAnalysisModal` component to improve maintainability and code organization.
+
+## Components
+
+### KeywordAnalysis
+- **File**: `KeywordAnalysis.tsx`
+- **Purpose**: Displays comprehensive keyword analysis including:
+  - Keyword types overview (primary, long-tail, semantic)
+  - Keyword density analysis with optimal range indicators
+  - Missing keywords detection
+  - Over-optimized keywords detection
+  - Keyword distribution analysis
+
+### ReadabilityAnalysis
+- **File**: `ReadabilityAnalysis.tsx`
+- **Purpose**: Displays comprehensive readability analysis including:
+  - 6 different readability metrics with tooltips
+  - Content statistics (word count, sections, paragraphs, etc.)
+  - Sentence and paragraph analysis
+  - Target audience determination
+  - Content quality metrics
+
+### StructureAnalysis
+- **File**: `StructureAnalysis.tsx`
+- **Purpose**: Displays comprehensive content structure analysis including:
+  - Structure overview (sections, paragraphs, sentences, structure score)
+  - Content elements detection (introduction, conclusion, call-to-action)
+  - Heading structure analysis (H1, H2, H3 counts and actual headings)
+  - Heading hierarchy score
+
+### Recommendations
+- **File**: `Recommendations.tsx`
+- **Purpose**: Displays actionable SEO recommendations including:
+  - Priority-based recommendation cards (High, Medium, Low)
+  - Category tags for each recommendation
+  - Impact descriptions
+  - Visual priority indicators with icons
+
+### SEOProcessor
+- **File**: `SEOProcessor.tsx`
+- **Purpose**: Provides CopilotKit actions for SEO functionality including:
+  - `generateSEOMetadata` - Generate SEO metadata for blog content
+  - `optimizeSection` - Optimize individual sections for SEO
+  - Interactive UI components for user feedback
+
+## Refactoring Benefits
+
+1. **Improved Maintainability**: Each component is focused on a single responsibility
+2. **Better Code Organization**: Related functionality is grouped together
+3. **Easier Testing**: Individual components can be tested in isolation
+4. **Reusability**: Components can be reused in other parts of the application
+5. **Reduced File Size**: Main modal component reduced by ~600+ lines
+6. **Modular Architecture**: Clean separation of concerns
+
+## Usage
+
+```tsx
+import { 
+  KeywordAnalysis, 
+  ReadabilityAnalysis, 
+  StructureAnalysis, 
+  Recommendations,
+  SEOProcessor 
+} from './SEO';
+
+// In your component
+<KeywordAnalysis detailedAnalysis={analysisResult.detailed_analysis} />
+<ReadabilityAnalysis 
+  detailedAnalysis={analysisResult.detailed_analysis} 
+  visualizationData={analysisResult.visualization_data}
+/>
+<StructureAnalysis detailedAnalysis={analysisResult.detailed_analysis} />
+<Recommendations recommendations={analysisResult.actionable_recommendations} />
+<SEOProcessor 
+  buildFullMarkdown={buildFullMarkdown}
+  seoMetadata={seoMetadata}
+  onSEOAnalysis={onSEOAnalysis}
+  onSEOMetadata={onSEOMetadata}
+/>
+```
+
+## Props
+
+### KeywordAnalysis Props
+- `detailedAnalysis?: { keyword_analysis?: {...} }` - Detailed analysis data from backend
+
+### ReadabilityAnalysis Props
+- `detailedAnalysis?: { readability_analysis?: {...}, content_quality?: {...}, content_structure?: {...} }` - Detailed analysis data
+- `visualizationData?: { content_stats?: {...} }` - Visualization data for fallback values
+
+### StructureAnalysis Props
+- `detailedAnalysis?: { content_structure?: {...}, heading_structure?: {...} }` - Detailed analysis data
+
+### Recommendations Props
+- `recommendations: Recommendation[]` - Array of actionable recommendations with priority and impact
+
+### SEOProcessor Props
+- `buildFullMarkdown: () => string` - Function to build full markdown content
+- `seoMetadata: BlogSEOMetadataResponse | null` - Current SEO metadata
+- `onSEOAnalysis: (analysis: any) => void` - Callback for SEO analysis results
+- `onSEOMetadata: (metadata: BlogSEOMetadataResponse) => void` - Callback for SEO metadata results

frontend/src/components/BlogWriter/SEO/ReadabilityAnalysis.tsx

@@ -0,0 +1,286 @@
+/**
+ * Readability Analysis Component
+ * 
+ * Displays comprehensive readability analysis including readability metrics,
+ * content statistics, sentence/paragraph analysis, and target audience information.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Grid,
+  IconButton,
+  Tooltip
+} from '@mui/material';
+import { 
+  MenuBook
+} from '@mui/icons-material';
+
+interface ReadabilityAnalysisProps {
+  detailedAnalysis?: {
+    readability_analysis?: {
+      metrics: Record<string, number>;
+      avg_sentence_length: number;
+      avg_paragraph_length: number;
+      readability_score: number;
+      target_audience: string;
+      recommendations: string[];
+    };
+    content_quality?: {
+      word_count: number;
+      unique_words: number;
+      vocabulary_diversity: number;
+      transition_words_used: number;
+      content_depth_score: number;
+      flow_score: number;
+      recommendations: string[];
+    };
+    content_structure?: {
+      total_sections: number;
+      total_paragraphs: number;
+      total_sentences: number;
+      has_introduction: boolean;
+      has_conclusion: boolean;
+      has_call_to_action: boolean;
+      structure_score: number;
+      recommendations: string[];
+    };
+  };
+  visualizationData?: {
+    content_stats: {
+      word_count: number;
+      sections: number;
+      paragraphs: number;
+    };
+  };
+}
+
+export const ReadabilityAnalysis: React.FC<ReadabilityAnalysisProps> = ({ 
+  detailedAnalysis, 
+  visualizationData 
+}) => {
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <MenuBook sx={{ color: 'primary.main' }} />
+        <Typography variant="h6" component="h3" sx={{ fontWeight: 600 }}>
+          Readability Analysis
+        </Typography>
+      </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+              <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                Readability Metrics
+              </Typography>
+              <Tooltip
+                title={
+                  <Box sx={{ p: 1 }}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                      Readability Analysis
+                    </Typography>
+                    <Typography variant="body2" sx={{ mb: 1 }}>
+                      Measures how easy your content is to read and understand.
+                    </Typography>
+                    <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
+                      <strong>Flesch Reading Ease:</strong> 90-100 (Very Easy), 80-89 (Easy), 70-79 (Fairly Easy), 60-69 (Standard)
+                    </Typography>
+                    <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
+                      <strong>Average Sentence Length:</strong> 15-20 words is optimal
+                    </Typography>
+                    <Typography variant="caption" sx={{ display: 'block' }}>
+                      <strong>Average Syllables per Word:</strong> 1.5-1.7 is ideal
+                    </Typography>
+                  </Box>
+                }
+                arrow
+              >
+                <IconButton size="small" sx={{ color: 'primary.main' }}>
+                  <MenuBook />
+                </IconButton>
+              </Tooltip>
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              {detailedAnalysis?.readability_analysis?.metrics && Object.keys(detailedAnalysis.readability_analysis.metrics).length > 0 ? (
+                Object.entries(detailedAnalysis.readability_analysis.metrics).map(([metric, value]) => {
+                  const getReadabilityTooltip = (metric: string, value: number) => {
+                    const tooltips = {
+                      flesch_reading_ease: {
+                        description: "Measures how easy text is to read (0-100 scale)",
+                        interpretation: value >= 80 ? "Very Easy" : value >= 60 ? "Standard" : "Difficult"
+                      },
+                      flesch_kincaid_grade: {
+                        description: "U.S. grade level needed to understand the text",
+                        interpretation: value <= 8 ? "Easy" : value <= 12 ? "Moderate" : "Difficult"
+                      },
+                      gunning_fog: {
+                        description: "Years of formal education needed to understand the text",
+                        interpretation: value <= 12 ? "Easy" : value <= 16 ? "Moderate" : "Difficult"
+                      },
+                      smog_index: {
+                        description: "Simple Measure of Gobbledygook - readability formula",
+                        interpretation: value <= 8 ? "Easy" : value <= 12 ? "Moderate" : "Difficult"
+                      },
+                      automated_readability: {
+                        description: "Automated Readability Index based on character count",
+                        interpretation: value <= 8 ? "Easy" : value <= 12 ? "Moderate" : "Difficult"
+                      },
+                      coleman_liau: {
+                        description: "Readability test based on average sentence length and characters per word",
+                        interpretation: value <= 8 ? "Easy" : value <= 12 ? "Moderate" : "Difficult"
+                      }
+                    };
+                    return tooltips[metric as keyof typeof tooltips] || { description: "Readability metric", interpretation: "N/A" };
+                  };
+                  
+                  const tooltip = getReadabilityTooltip(metric, value);
+                  return (
+                    <Tooltip
+                      key={metric}
+                      title={
+                        <Box sx={{ p: 1 }}>
+                          <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                            {metric.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                          </Typography>
+                          <Typography variant="body2" sx={{ mb: 1 }}>
+                            {tooltip.description}
+                          </Typography>
+                          <Typography variant="caption">
+                            <strong>Interpretation:</strong> {tooltip.interpretation}
+                          </Typography>
+                        </Box>
+                      }
+                      arrow
+                    >
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 1, borderRadius: 1, background: 'rgba(0,0,0,0.02)', cursor: 'help' }}>
+                        <Typography variant="body2" sx={{ textTransform: 'capitalize' }}>
+                          {metric.replace('_', ' ')}
+                        </Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                          {value.toFixed(1)}
+                        </Typography>
+                      </Box>
+                    </Tooltip>
+                  );
+                })
+              ) : (
+                <Typography variant="body2" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>
+                  No readability metrics available. This may indicate an issue with the content analysis.
+                </Typography>
+              )}
+            </Box>
+          </Paper>
+        </Grid>
+        
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Content Statistics
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Word Count</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.word_count || visualizationData?.content_stats.word_count}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Sections</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_sections || visualizationData?.content_stats.sections}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Paragraphs</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_paragraphs || visualizationData?.content_stats.paragraphs}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Sentences</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_sentences || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Unique Words</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.unique_words || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Vocabulary Diversity</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.vocabulary_diversity ? 
+                    (detailedAnalysis.content_quality.vocabulary_diversity * 100).toFixed(1) + '%' : 'N/A'}
+                </Typography>
+              </Box>
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Additional Readability Metrics */}
+      <Grid container spacing={3} sx={{ mt: 2 }}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Sentence & Paragraph Analysis
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Avg Sentence Length</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.readability_analysis?.avg_sentence_length?.toFixed(1) || 'N/A'} words
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Avg Paragraph Length</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.readability_analysis?.avg_paragraph_length?.toFixed(1) || 'N/A'} words
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Transition Words</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.transition_words_used || 'N/A'}
+                </Typography>
+              </Box>
+            </Box>
+          </Paper>
+        </Grid>
+        
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Target Audience
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Reading Level</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.readability_analysis?.target_audience || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Content Depth Score</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.content_depth_score || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Flow Score</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_quality?.flow_score || 'N/A'}
+                </Typography>
+              </Box>
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

frontend/src/components/BlogWriter/SEO/Recommendations.tsx

@@ -0,0 +1,108 @@
+/**
+ * Recommendations Component
+ * 
+ * Displays actionable SEO recommendations with priority indicators,
+ * category tags, and impact descriptions.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Chip
+} from '@mui/material';
+import { 
+  Lightbulb,
+  CheckCircle,
+  Cancel,
+  Warning
+} from '@mui/icons-material';
+
+interface Recommendation {
+  category: string;
+  priority: 'High' | 'Medium' | 'Low';
+  recommendation: string;
+  impact: string;
+}
+
+interface RecommendationsProps {
+  recommendations: Recommendation[];
+}
+
+export const Recommendations: React.FC<RecommendationsProps> = ({ recommendations }) => {
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'High': return 'error.main';
+      case 'Medium': return 'warning.main';
+      case 'Low': return 'success.main';
+      default: return 'text.secondary';
+    }
+  };
+
+  const getPriorityIcon = (priority: string) => {
+    switch (priority) {
+      case 'High': return <Cancel sx={{ fontSize: 16 }} />;
+      case 'Medium': return <Warning sx={{ fontSize: 16 }} />;
+      case 'Low': return <CheckCircle sx={{ fontSize: 16 }} />;
+      default: return <Warning sx={{ fontSize: 16 }} />;
+    }
+  };
+
+  const getScoreBadgeVariant = (score: number) => {
+    if (score >= 80) return 'success';
+    if (score >= 60) return 'warning';
+    return 'error';
+  };
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <Lightbulb sx={{ color: 'primary.main' }} />
+        <Typography variant="h6" component="h3" sx={{ fontWeight: 600 }}>
+          Actionable Recommendations
+        </Typography>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {recommendations.map((rec, index) => (
+          <Paper 
+            key={index} 
+            sx={{ 
+              p: 3, 
+              border: '1px solid rgba(255,255,255,0.1)',
+              background: 'rgba(255,255,255,0.03)',
+              borderRadius: 2
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
+              <Box sx={{ color: getPriorityColor(rec.priority), mt: 0.5 }}>
+                {getPriorityIcon(rec.priority)}
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                  <Chip 
+                    label={rec.category} 
+                    variant="outlined" 
+                    size="small"
+                    sx={{ borderColor: 'rgba(255,255,255,0.3)' }}
+                  />
+                  <Chip 
+                    label={rec.priority}
+                    color={getScoreBadgeVariant(rec.priority === 'High' ? 30 : 70)}
+                    size="small"
+                  />
+                </Box>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  {rec.recommendation}
+                </Typography>
+                <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                  {rec.impact}
+                </Typography>
+              </Box>
+            </Box>
+          </Paper>
+        ))}
+      </Box>
+    </Box>
+  );
+};

frontend/src/components/BlogWriter/SEO/SEOProcessor.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useCopilotAction } from '@copilotkit/react-core';
+import { blogWriterApi, BlogSEOMetadataResponse } from '../../../services/blogWriterApi';
+
+interface SEOProcessorProps {
+  buildFullMarkdown: () => string;
+  seoMetadata: BlogSEOMetadataResponse | null;
+  onSEOAnalysis: (analysis: any) => void;
+  onSEOMetadata: (metadata: BlogSEOMetadataResponse) => void;
+}
+
+const useCopilotActionTyped = useCopilotAction as any;
+
+export const SEOProcessor: React.FC<SEOProcessorProps> = ({
+  buildFullMarkdown,
+  seoMetadata,
+  onSEOAnalysis,
+  onSEOMetadata
+}) => {
+  // Removed old runSEOAnalyze action - now using runComprehensiveSEOAnalysis in BlogWriter.tsx
+
+  useCopilotActionTyped({
+    name: 'generateSEOMetadata',
+    description: 'Generate SEO metadata for the full draft',
+    parameters: [ { name: 'title', type: 'string', description: 'Preferred title', required: false } ],
+    handler: async ({ title }: { title?: string }) => {
+      const content = buildFullMarkdown();
+      const res = await blogWriterApi.seoMetadata({ content, title, keywords: [] });
+      onSEOMetadata(res);
+      return { success: true };
+    },
+    renderAndWaitForResponse: ({ respond }: any) => (
+      <div style={{ padding: 12 }}>
+        <div style={{ fontWeight: 600, marginBottom: 8 }}>SEO Metadata Ready</div>
+        <div style={{ marginBottom: 8 }}>Review the generated title, meta description, and OG/Twitter tags in the editor.</div>
+        <button onClick={() => respond?.('accept')}>Accept Metadata</button>
+      </div>
+    )
+  });
+
+  useCopilotActionTyped({
+    name: 'optimizeSection',
+    description: 'Optimize a section for readability/EEAT/examples/data with HITL diff',
+    parameters: [
+      { name: 'sectionId', type: 'string', description: 'Section ID', required: true },
+      { name: 'goals', type: 'string', description: 'Comma-separated goals', required: false },
+    ],
+    handler: async ({ sectionId, goals }: { sectionId: string; goals?: string }) => {
+      const current = buildFullMarkdown();
+      if (!current) return { success: false, message: 'No content yet for this section' };
+      
+      // Use comprehensive SEO analysis endpoint
+      const response = await fetch('/api/blog-writer/seo/analyze', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: current,
+          keywords: []
+        })
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to analyze blog content');
+      }
+      
+      const res = await response.json();
+      onSEOAnalysis(res);
+      return { success: true, message: 'Analysis ready' };
+    },
+    renderAndWaitForResponse: ({ respond, args, status }: any) => {
+      if (status === 'complete') return <div>Optimization applied.</div>;
+      return (
+        <div style={{ padding: 12 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>Optimization preview</div>
+          <div style={{ marginBottom: 8 }}>Goals: {args.goals || 'readability, EEAT'}</div>
+          <button onClick={() => respond?.('apply')}>Apply Changes</button>
+        </div>
+      );
+    }
+  });
+
+  return null; // This component only provides the copilot actions
+};
+
+export default SEOProcessor;

frontend/src/components/BlogWriter/SEO/StructureAnalysis.tsx

@@ -0,0 +1,196 @@
+/**
+ * Structure Analysis Component
+ * 
+ * Displays comprehensive content structure analysis including structure overview,
+ * content elements detection, and heading structure analysis.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Grid,
+  Chip
+} from '@mui/material';
+import { 
+  BarChart
+} from '@mui/icons-material';
+
+interface StructureAnalysisProps {
+  detailedAnalysis?: {
+    content_structure?: {
+      total_sections: number;
+      total_paragraphs: number;
+      total_sentences: number;
+      has_introduction: boolean;
+      has_conclusion: boolean;
+      has_call_to_action: boolean;
+      structure_score: number;
+      recommendations: string[];
+    };
+    heading_structure?: {
+      h1_count: number;
+      h2_count: number;
+      h3_count: number;
+      h1_headings: string[];
+      h2_headings: string[];
+      h3_headings: string[];
+      heading_hierarchy_score: number;
+      recommendations: string[];
+    };
+  };
+}
+
+export const StructureAnalysis: React.FC<StructureAnalysisProps> = ({ detailedAnalysis }) => {
+  // Debug logging
+  console.log('🏗️ StructureAnalysis received data:', detailedAnalysis);
+  console.log('📊 Content Structure:', detailedAnalysis?.content_structure);
+  console.log('📋 Heading Structure:', detailedAnalysis?.heading_structure);
+  
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <BarChart sx={{ color: 'primary.main' }} />
+        <Typography variant="h6" component="h3" sx={{ fontWeight: 600 }}>
+          Content Structure Analysis
+        </Typography>
+      </Box>
+      <Grid container spacing={3}>
+        {/* Content Structure Overview */}
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Structure Overview
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Total Sections</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_sections || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Total Paragraphs</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_paragraphs || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Total Sentences</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.total_sentences || 'N/A'}
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Structure Score</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {detailedAnalysis?.content_structure?.structure_score || 'N/A'}
+                </Typography>
+              </Box>
+            </Box>
+          </Paper>
+        </Grid>
+
+        {/* Content Elements */}
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Content Elements
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Has Introduction</Typography>
+                <Chip 
+                  label={detailedAnalysis?.content_structure?.has_introduction ? 'Yes' : 'No'}
+                  color={detailedAnalysis?.content_structure?.has_introduction ? 'success' : 'error'}
+                  size="small"
+                />
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Has Conclusion</Typography>
+                <Chip 
+                  label={detailedAnalysis?.content_structure?.has_conclusion ? 'Yes' : 'No'}
+                  color={detailedAnalysis?.content_structure?.has_conclusion ? 'success' : 'error'}
+                  size="small"
+                />
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="body2">Has Call to Action</Typography>
+                <Chip 
+                  label={detailedAnalysis?.content_structure?.has_call_to_action ? 'Yes' : 'No'}
+                  color={detailedAnalysis?.content_structure?.has_call_to_action ? 'success' : 'error'}
+                  size="small"
+                />
+              </Box>
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Heading Structure */}
+      <Grid container spacing={3} sx={{ mt: 2 }}>
+        <Grid item xs={12}>
+          <Paper sx={{ p: 3, background: 'rgba(255,255,255,0.8)', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+              Heading Structure Analysis
+            </Typography>
+            <Grid container spacing={2}>
+              <Grid item xs={12} md={4}>
+                <Box sx={{ p: 2, background: 'rgba(76, 175, 80, 0.1)', borderRadius: 2, border: '1px solid rgba(76, 175, 80, 0.3)' }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'success.main', mb: 1 }}>
+                    H1 Headings ({detailedAnalysis?.heading_structure?.h1_count || 0})
+                  </Typography>
+                  {detailedAnalysis?.heading_structure?.h1_headings?.map((heading: string, index: number) => (
+                    <Typography key={index} variant="caption" sx={{ display: 'block', mb: 0.5 }}>
+                      • {heading}
+                    </Typography>
+                  ))}
+                </Box>
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <Box sx={{ p: 2, background: 'rgba(33, 150, 243, 0.1)', borderRadius: 2, border: '1px solid rgba(33, 150, 243, 0.3)' }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'primary.main', mb: 1 }}>
+                    H2 Headings ({detailedAnalysis?.heading_structure?.h2_count || 0})
+                  </Typography>
+                  {detailedAnalysis?.heading_structure?.h2_headings?.slice(0, 3).map((heading: string, index: number) => (
+                    <Typography key={index} variant="caption" sx={{ display: 'block', mb: 0.5 }}>
+                      • {heading}
+                    </Typography>
+                  ))}
+                  {detailedAnalysis?.heading_structure?.h2_headings && detailedAnalysis.heading_structure.h2_headings.length > 3 && (
+                    <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                      ... and {detailedAnalysis.heading_structure.h2_headings.length - 3} more
+                    </Typography>
+                  )}
+                </Box>
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <Box sx={{ p: 2, background: 'rgba(156, 39, 176, 0.1)', borderRadius: 2, border: '1px solid rgba(156, 39, 176, 0.3)' }}>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'secondary.main', mb: 1 }}>
+                    H3 Headings ({detailedAnalysis?.heading_structure?.h3_count || 0})
+                  </Typography>
+                  {detailedAnalysis?.heading_structure?.h3_headings?.slice(0, 3).map((heading: string, index: number) => (
+                    <Typography key={index} variant="caption" sx={{ display: 'block', mb: 0.5 }}>
+                      • {heading}
+                    </Typography>
+                  ))}
+                  {detailedAnalysis?.heading_structure?.h3_headings && detailedAnalysis.heading_structure.h3_headings.length > 3 && (
+                    <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                      ... and {detailedAnalysis.heading_structure.h3_headings.length - 3} more
+                    </Typography>
+                  )}
+                </Box>
+              </Grid>
+            </Grid>
+            <Box sx={{ mt: 2, p: 2, background: 'rgba(0,0,0,0.02)', borderRadius: 2 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
+                Heading Hierarchy Score: {detailedAnalysis?.heading_structure?.heading_hierarchy_score || 'N/A'}
+              </Typography>
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

frontend/src/components/BlogWriter/SEO/index.ts

@@ -0,0 +1,11 @@
+/**
+ * SEO Components Index
+ * 
+ * Exports all SEO-related components for easy importing.
+ */
+
+export { KeywordAnalysis } from './KeywordAnalysis';
+export { ReadabilityAnalysis } from './ReadabilityAnalysis';
+export { StructureAnalysis } from './StructureAnalysis';
+export { Recommendations } from './Recommendations';
+export { SEOProcessor } from './SEOProcessor';