fix: credit tracking, voice clone TTL, avatar upload ui, asset serving fallback, OAuth encryption, free plan video renders, backlink outreach sprint

frontend/src/api/backlinkOutreachApi.ts

@@ -1,5 +1,7 @@
 import { apiClient } from './client';
 
+// -- Shared Types --
+
 export interface BacklinkModuleRecord {
   identifier: 'backlink' | 'outreach' | 'guest_post' | string;
   module_path: string;
@@ -24,6 +26,8 @@ export interface BacklinkQueryTemplatesResponse {
   queries: string[];
 }
 
+// -- Discovery --
+
 export interface BacklinkDiscoveryRequest {
   keyword: string;
   max_results?: number;
@@ -36,77 +40,12 @@ export interface BacklinkOpportunity {
   confidence_score: number;
 }
 
-
-
-export interface BacklinkPolicyValidationRequest {
-  user_id: string;
-  workspace_id: string;
-  campaign_id: string;
-  recipient_email: string;
-  recipient_domain: string;
-  recipient_region: string;
-  legal_basis: string;
-  approved_by_human: boolean;
-  unsubscribe_url?: string;
-  sender_identity: string;
-  idempotency_key: string;
-}
-
-export interface BacklinkPolicyValidationResponse {
-  allowed: boolean;
-  reasons: string[];
-  final_status: string;
-}
-
-export interface BacklinkReportingSnapshot {
-  send_volume: number;
-  decision_events: number;
-  response_rate: number;
-  placement_conversion: number;
-}
-
 export interface BacklinkDiscoveryResponse {
   keyword: string;
   queries: string[];
   opportunities: BacklinkOpportunity[];
 }
 
-export interface BacklinkCampaignRecord {
-  campaign_id: string;
-  name: string;
-  status: string;
-  created_at?: string;
-}
-
-export interface BacklinkCampaignCreateRequest {
-  user_id: string;
-  workspace_id: string;
-  name: string;
-}
-
-export interface BacklinkCampaignCreateResponse {
-  campaign_id: string;
-  name: string;
-  status: string;
-}
-
-export interface BacklinkCampaignListResponse {
-  campaigns: BacklinkCampaignRecord[];
-}
-
-export const fetchBacklinkModuleRegistry = async (): Promise<BacklinkModuleRegistryResponse> => (await apiClient.get('/api/backlink-outreach/modules')).data;
-export const fetchBacklinkMigrationCoverage = async (): Promise<BacklinkCoverageResponse> => (await apiClient.get('/api/backlink-outreach/migration-coverage')).data;
-export const fetchBacklinkQueryTemplates = async (keyword: string): Promise<BacklinkQueryTemplatesResponse> => (await apiClient.get('/api/backlink-outreach/query-templates', { params: { keyword } })).data;
-export const discoverBacklinkOpportunities = async (payload: BacklinkDiscoveryRequest): Promise<BacklinkDiscoveryResponse> => (await apiClient.post('/api/backlink-outreach/discover', payload)).data;
-
-export const validateBacklinkPolicy = async (payload: BacklinkPolicyValidationRequest): Promise<BacklinkPolicyValidationResponse> => (await apiClient.post('/api/backlink-outreach/policy-validate', payload)).data;
-export const fetchBacklinkReportingSnapshot = async (): Promise<BacklinkReportingSnapshot> => (await apiClient.get('/api/backlink-outreach/reporting')).data;
-
-export const createBacklinkCampaign = async (payload: BacklinkCampaignCreateRequest): Promise<BacklinkCampaignCreateResponse> => (await apiClient.post('/api/backlink-outreach/campaigns', payload)).data;
-export const listBacklinkCampaigns = async (user_id: string, workspace_id: string): Promise<BacklinkCampaignListResponse> => (await apiClient.get('/api/backlink-outreach/campaigns', { params: { user_id, workspace_id } })).data;
-
-// -- Deep Discovery --
-
 export interface EnrichedOpportunity {
   url: string;
   domain: string;
@@ -135,7 +74,58 @@ export interface DeepDiscoveryResponse {
   opportunities: EnrichedOpportunity[];
 }
 
-export const discoverDeepBacklinkOpportunities = async (payload: DeepDiscoveryRequest): Promise<DeepDiscoveryResponse> => (await apiClient.post('/api/backlink-outreach/discover/deep', payload)).data;
+// -- Policy --
+
+export interface BacklinkPolicyValidationRequest {
+  user_id: string;
+  workspace_id: string;
+  campaign_id: string;
+  recipient_email: string;
+  recipient_domain: string;
+  recipient_region: string;
+  legal_basis: string;
+  approved_by_human: boolean;
+  unsubscribe_url?: string;
+  sender_identity: string;
+  idempotency_key: string;
+}
+
+export interface BacklinkPolicyValidationResponse {
+  allowed: boolean;
+  reasons: string[];
+  final_status: string;
+}
+
+export interface BacklinkReportingSnapshot {
+  send_volume: number;
+  decision_events: number;
+  response_rate: number;
+  placement_conversion: number;
+}
+
+// -- Campaigns --
+
+export interface BacklinkCampaignRecord {
+  campaign_id: string;
+  name: string;
+  status: string;
+  created_at?: string;
+}
+
+export interface BacklinkCampaignCreateRequest {
+  workspace_id: string;
+  name: string;
+}
+
+export interface BacklinkCampaignCreateResponse {
+  campaign_id: string;
+  name: string;
+  status: string;
+}
+
+export interface BacklinkCampaignListResponse {
+  campaigns: BacklinkCampaignRecord[];
+}
 
 // -- Leads --
 
@@ -184,7 +174,248 @@ export interface CampaignDetailResponse {
   leads: LeadRecord[];
 }
 
-export const fetchCampaignDetail = async (campaign_id: string, user_id: string): Promise<CampaignDetailResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}`, { params: { user_id } })).data;
-export const fetchCampaignLeads = async (campaign_id: string, user_id: string, status?: string): Promise<LeadListResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/leads`, { params: { user_id, status } })).data;
+// -- Outreach Attempts --
+
+export interface SendOutreachRequest {
+  lead_id: string;
+  campaign_id: string;
+  sender_email: string;
+  subject: string;
+  body: string;
+  idempotency_key: string;
+  template_id?: string;
+  template_variables?: Record<string, string>;
+}
+
+export interface SendOutreachResponse {
+  attempt_id: string;
+  status: string;
+  policy_allowed: boolean;
+  policy_reasons: string[];
+}
+
+export interface OutreachAttemptRecord {
+  attempt_id: string;
+  lead_id: string;
+  campaign_id: string;
+  idempotency_key: string;
+  sender_email: string;
+  subject: string;
+  status: string;
+  decision_reason: string | null;
+  sent_at: string | null;
+  created_at: string | null;
+}
+
+export interface OutreachAttemptListResponse {
+  attempts: OutreachAttemptRecord[];
+  total: number;
+}
+
+// -- Replies --
+
+export interface OutreachReplyRecord {
+  reply_id: string;
+  attempt_id: string;
+  from_email: string;
+  subject: string;
+  received_at: string | null;
+  classification: string;
+  body: string;
+}
+
+export interface OutreachReplyListResponse {
+  replies: OutreachReplyRecord[];
+  total: number;
+}
+
+// -- Follow-ups --
+
+export interface ScheduleFollowUpRequest {
+  attempt_id: string;
+  scheduled_for: string;
+  subject?: string;
+  body?: string;
+}
+
+export interface FollowUpScheduleRecord {
+  schedule_id: string;
+  attempt_id: string;
+  subject: string;
+  scheduled_for: string | null;
+  sent: boolean;
+}
+
+// -- Email Templates --
+
+export interface EmailTemplateRequest {
+  name: string;
+  subject_template: string;
+  body_template: string;
+  variables?: string[];
+}
+
+export interface EmailTemplateRecord {
+  template_id: string;
+  user_id: string;
+  name: string;
+  subject_template: string;
+  body_template: string;
+  variables: string[];
+  created_at: string | null;
+}
+
+export interface GenerateEmailRequest {
+  topic: string;
+  target_site?: string;
+  tone?: 'professional' | 'friendly' | 'casual' | 'formal';
+  existing_template_id?: string;
+}
+
+export interface GeneratedEmailResponse {
+  subject: string;
+  body: string;
+}
+
+export interface PersonalizeEmailRequest {
+  lead_name: string;
+  lead_site: string;
+  lead_content_topic: string;
+  pitch_topic: string;
+  existing_body?: string;
+}
+
+export interface SubjectLinesRequest {
+  body: string;
+  count?: number;
+}
+
+export interface SubjectLinesResponse {
+  subjects: string[];
+}
+
+export interface FollowUpRequest {
+  original_subject: string;
+  original_body: string;
+  days_elapsed?: number;
+  reply_context?: string;
+}
+
+// -- Campaign Analytics --
+
+export interface BulkStatusUpdateRequest {
+  lead_ids: string[];
+  status: string;
+  notes?: string;
+}
+
+export interface BulkStatusUpdateResponse {
+  updated: number;
+  failed: string[];
+}
+
+export interface CampaignVolumePoint {
+  date: string;
+  count: number;
+}
+
+export interface CampaignVolumeResponse {
+  campaign_id: string;
+  days: number;
+  volume: CampaignVolumePoint[];
+}
+
+export interface FunnelStage {
+  status: string;
+  count: number;
+}
+
+export interface ConversionFunnelResponse {
+  campaign_id: string;
+  stages: FunnelStage[];
+}
+
+export interface CampaignAnalyticsResponse {
+  campaign_id: string;
+  lead_count: number;
+  send_volume: number;
+  blocked_count: number;
+  reply_count: number;
+  response_rate: number;
+  placement_rate: number;
+  reply_classification: Record<string, number>;
+}
+
+// ============================================================
+// API Functions
+// ============================================================
+
+// Discovery
+export const fetchBacklinkModuleRegistry = async (): Promise<BacklinkModuleRegistryResponse> => (await apiClient.get('/api/backlink-outreach/modules')).data;
+export const fetchBacklinkMigrationCoverage = async (): Promise<BacklinkCoverageResponse> => (await apiClient.get('/api/backlink-outreach/migration-coverage')).data;
+export const fetchBacklinkQueryTemplates = async (keyword: string): Promise<BacklinkQueryTemplatesResponse> => (await apiClient.get('/api/backlink-outreach/query-templates', { params: { keyword } })).data;
+export const discoverBacklinkOpportunities = async (payload: BacklinkDiscoveryRequest): Promise<BacklinkDiscoveryResponse> => (await apiClient.post('/api/backlink-outreach/discover', payload)).data;
+export const discoverDeepBacklinkOpportunities = async (payload: DeepDiscoveryRequest): Promise<DeepDiscoveryResponse> => (await apiClient.post('/api/backlink-outreach/discover/deep', payload)).data;
+
+// Policy & Reporting
+export const validateBacklinkPolicy = async (payload: BacklinkPolicyValidationRequest): Promise<BacklinkPolicyValidationResponse> => (await apiClient.post('/api/backlink-outreach/policy-validate', payload)).data;
+export const fetchBacklinkReportingSnapshot = async (): Promise<BacklinkReportingSnapshot> => (await apiClient.get('/api/backlink-outreach/reporting')).data;
+
+// Campaigns (auth handled by backend via Clerk)
+export const createBacklinkCampaign = async (payload: BacklinkCampaignCreateRequest): Promise<BacklinkCampaignCreateResponse> => (await apiClient.post('/api/backlink-outreach/campaigns', payload)).data;
+export const listBacklinkCampaigns = async (workspace_id: string): Promise<BacklinkCampaignListResponse> => (await apiClient.get('/api/backlink-outreach/campaigns', { params: { workspace_id } })).data;
+export const fetchCampaignDetail = async (campaign_id: string): Promise<CampaignDetailResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}`)).data;
+export const fetchCampaignLeads = async (campaign_id: string, status?: string): Promise<LeadListResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/leads`, { params: { status } })).data;
 export const addLeadToCampaign = async (campaign_id: string, payload: LeadCreateRequest): Promise<LeadRecord> => (await apiClient.post(`/api/backlink-outreach/campaigns/${campaign_id}/leads`, payload)).data;
 export const updateLeadStatus = async (lead_id: string, payload: LeadStatusUpdateRequest): Promise<LeadRecord> => (await apiClient.patch(`/api/backlink-outreach/leads/${lead_id}/status`, payload)).data;
+export const bulkUpdateLeadStatus = async (payload: BulkStatusUpdateRequest): Promise<BulkStatusUpdateResponse> => (await apiClient.post('/api/backlink-outreach/leads/bulk-status', payload)).data;
+
+// Outreach
+export const sendOutreach = async (payload: SendOutreachRequest): Promise<SendOutreachResponse> => (await apiClient.post('/api/backlink-outreach/send-outreach', payload)).data;
+export const fetchCampaignAttempts = async (campaign_id: string): Promise<OutreachAttemptListResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/attempts`)).data;
+export const fetchCampaignReplies = async (campaign_id: string): Promise<OutreachReplyListResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/replies`)).data;
+export const pollReplies = async (sent_from_email: string): Promise<{ polled: number; stored: number; replies: OutreachReplyRecord[] }> => (await apiClient.post('/api/backlink-outreach/replies/poll', null, { params: { sent_from_email } })).data;
+
+// Follow-ups
+export const scheduleFollowUp = async (campaign_id: string, payload: ScheduleFollowUpRequest): Promise<{ campaign_id: string; schedule: FollowUpScheduleRecord }> => (await apiClient.post(`/api/backlink-outreach/campaigns/${campaign_id}/schedule-followup`, payload)).data;
+export const fetchFollowUps = async (campaign_id: string): Promise<{ followups: FollowUpScheduleRecord[]; total: number }> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/followups`)).data;
+
+// Email Templates
+export const createEmailTemplate = async (payload: EmailTemplateRequest): Promise<EmailTemplateRecord> => (await apiClient.post('/api/backlink-outreach/templates', payload)).data;
+export const listEmailTemplates = async (): Promise<{ templates: EmailTemplateRecord[] }> => (await apiClient.get('/api/backlink-outreach/templates')).data;
+export const fetchEmailTemplate = async (template_id: string): Promise<EmailTemplateRecord> => (await apiClient.get(`/api/backlink-outreach/templates/${template_id}`)).data;
+export const deleteEmailTemplate = async (template_id: string): Promise<{ deleted: boolean }> => (await apiClient.delete(`/api/backlink-outreach/templates/${template_id}`)).data;
+export const generateEmailTemplate = async (payload: GenerateEmailRequest): Promise<GeneratedEmailResponse> => (await apiClient.post('/api/backlink-outreach/templates/generate', payload)).data;
+export const personalizeEmail = async (payload: PersonalizeEmailRequest): Promise<GeneratedEmailResponse> => (await apiClient.post('/api/backlink-outreach/generate/personalized', payload)).data;
+export const generateSubjectLines = async (payload: SubjectLinesRequest): Promise<SubjectLinesResponse> => (await apiClient.post('/api/backlink-outreach/generate/subject-lines', payload)).data;
+export const generateFollowUp = async (payload: FollowUpRequest): Promise<GeneratedEmailResponse> => (await apiClient.post('/api/backlink-outreach/generate/follow-up', payload)).data;
+
+// Campaign Analytics
+export const fetchCampaignAnalytics = async (campaign_id: string): Promise<CampaignAnalyticsResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/analytics`)).data;
+export const fetchCampaignAnalyticsVolume = async (campaign_id: string, days: number = 30): Promise<CampaignVolumeResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/analytics/volume`, { params: { days } })).data;
+export const fetchCampaignAnalyticsFunnel = async (campaign_id: string): Promise<ConversionFunnelResponse> => (await apiClient.get(`/api/backlink-outreach/campaigns/${campaign_id}/analytics/funnel`)).data;
+async function csvFetch(url: string): Promise<Blob> {
+  try {
+    const res = await apiClient.get(url, { responseType: 'blob' });
+    return res.data;
+  } catch (err: any) {
+    if (err?.response?.data instanceof Blob) {
+      try {
+        const text = await err.response.data.text();
+        const json = JSON.parse(text);
+        throw new Error(json.detail || json.message || 'Export failed');
+      } catch (parseErr: any) {
+        if (parseErr.message && parseErr.message !== 'Export failed') throw parseErr;
+      }
+    }
+    throw err;
+  }
+}
+
+export const exportCampaignLeadsCsv = async (campaign_id: string): Promise<Blob> => csvFetch(`/api/backlink-outreach/campaigns/${campaign_id}/export/leads`);
+export const exportCampaignAttemptsCsv = async (campaign_id: string): Promise<Blob> => csvFetch(`/api/backlink-outreach/campaigns/${campaign_id}/export/attempts`);
+export const exportCampaignRepliesCsv = async (campaign_id: string): Promise<Blob> => csvFetch(`/api/backlink-outreach/campaigns/${campaign_id}/export/replies`);
+
+// Suppression
+export const fetchSuppressionList = async (): Promise<{ suppressed: any[] }> => (await apiClient.get('/api/backlink-outreach/suppression')).data;
+export const addSuppression = async (email: string, reason?: string): Promise<any> => (await apiClient.post('/api/backlink-outreach/suppression', null, { params: { email, reason } })).data;

frontend/src/api/client.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 const sanitizeUrlForLogging = (url: string | undefined): string => {
   if (!url) return '';
@@ -62,26 +63,8 @@ export const getAuthTokenGetter = (): (() => Promise<string | null>) | null => {
   return authTokenGetter;
 };
 
-// Get API URL from environment variables
-export const getApiUrl = () => {
-  const apiUrl = process.env.REACT_APP_API_URL;
-  const isProduction = process.env.NODE_ENV === 'production';
-  
-  // In production, require REACT_APP_API_URL to be set
-  if (isProduction && !apiUrl) {
-    console.error('[apiClient] ❌ REACT_APP_API_URL is not set for production! Please configure in Vercel environment variables.');
-    throw new Error('REACT_APP_API_URL environment variable is required for production. Please set it in your Vercel project settings.');
-  }
-  
-  // Always respect REACT_APP_API_URL if explicitly set — behavior is independent of
-  // whether the browser is on localhost, ngrok, or any other hostname.
-  if (apiUrl) {
-    return apiUrl;
-  }
-  
-  // Development fallback when no env var is configured
-  return 'http://localhost:8000';
-};
+// Get API URL using shared utility that handles localhost vs ngrok detection
+export const getApiUrl = getApiBaseUrl;
 
 // Create a shared axios instance for all API calls
 const apiBaseUrl = getApiUrl();

frontend/src/api/enterpriseSeoApi.ts

@@ -0,0 +1,409 @@
+/**
+ * Enterprise SEO API client for ALwrity frontend
+ * Handles Phase 2A endpoints: Enterprise Audit and GSC Analysis
+ */
+
+import { longRunningApiClient, apiClient } from './client';
+
+// ============================================================================
+// Type Definitions
+// ============================================================================
+
+export interface AuditIssue {
+  type: string;
+  severity: 'critical' | 'high' | 'medium' | 'low';
+  description: string;
+  affected_pages?: number;
+  estimated_impact?: string;
+  recommendation?: string;
+}
+
+export interface TechnicalAuditResult {
+  status: string;
+  pages_audited: number;
+  avg_score: number;
+  issues: AuditIssue[];
+  core_web_vitals?: {
+    lcp: number; // Largest Contentful Paint
+    fid: number; // First Input Delay
+    cls: number; // Cumulative Layout Shift
+  };
+}
+
+export interface PagePerformance {
+  url: string;
+  score: number;
+  status: string;
+  issues_count: number;
+  priority: string;
+}
+
+export interface KeywordAnalysis {
+  keyword: string;
+  volume: number;
+  difficulty: number;
+  current_ranking: number;
+  trend: string;
+  opportunity_score: number;
+}
+
+export interface ContentOpportunity {
+  type: string; // 'low_ctr', 'ready_to_rank', 'long_tail', etc.
+  keyword: string;
+  current_position: number;
+  impressions: number;
+  clicks: number;
+  ctr: number;
+  estimated_traffic_gain: number;
+  difficulty_score: number;
+  recommended_action: string;
+  priority: 'high' | 'medium' | 'low';
+}
+
+export interface PerformanceOverview {
+  clicks: number;
+  impressions: number;
+  ctr: number;
+  avg_position: number;
+  traffic_trend: string;
+  top_keywords: KeywordAnalysis[];
+}
+
+export interface CompetitiveAnalysis {
+  competitor_keywords: string[];
+  content_gaps: string[];
+  opportunity_score: number;
+  positioning_strength: string;
+  recommendations: string[];
+}
+
+export interface AIInsight {
+  category: string;
+  insight: string;
+  priority: 'high' | 'medium' | 'low';
+  action_required: boolean;
+  estimated_impact: string;
+  implementation_difficulty: string;
+}
+
+export interface ExecutiveSummary {
+  overall_score: number;
+  key_findings: string[];
+  top_opportunities: string[];
+  critical_issues: string[];
+  estimated_traffic_potential: string;
+  timeframe_to_implement: string;
+}
+
+export interface EnterpriseAuditResult {
+  website_url: string;
+  audit_date: string;
+  executive_summary: ExecutiveSummary;
+  technical_audit: TechnicalAuditResult;
+  on_page_analysis: {
+    pages_analyzed: number;
+    avg_score: number;
+    top_issues: AuditIssue[];
+    top_performers: PagePerformance[];
+  };
+  content_strategy: {
+    current_strategy: string;
+    gaps_identified: string[];
+    recommendations: string[];
+    content_calendar_suggestion?: string;
+  };
+  competitive_analysis: CompetitiveAnalysis;
+  keyword_research: {
+    target_keywords: KeywordAnalysis[];
+    long_tail_opportunities: KeywordAnalysis[];
+    competitor_keywords: KeywordAnalysis[];
+  };
+  ai_insights: AIInsight[];
+  implementation_roadmap: {
+    phase1_quick_wins: string[];
+    phase2_medium_term: string[];
+    phase3_long_term: string[];
+  };
+  metrics_summary: {
+    current_organic_traffic: number;
+    estimated_traffic_potential: number;
+    estimated_growth_percentage: number;
+  };
+}
+
+export interface GSCAnalysisResult {
+  site_url: string;
+  analysis_date: string;
+  analysis_period_days: number;
+  performance_overview: PerformanceOverview;
+  page_performance: PagePerformance[];
+  keyword_analysis: {
+    top_performers: KeywordAnalysis[];
+    opportunities: KeywordAnalysis[];
+    declining_keywords: KeywordAnalysis[];
+  };
+  content_opportunities: ContentOpportunity[];
+  technical_signals: {
+    core_web_vitals_score: number;
+    mobile_usability_issues: number;
+    indexing_issues: number;
+    security_issues: number;
+  };
+  competitive_positioning: CompetitiveAnalysis;
+  ai_recommendations: AIInsight[];
+  traffic_potential: {
+    low_hanging_fruit: string; // Quick wins
+    medium_term_opportunities: string;
+    long_term_growth: string;
+    estimated_additional_traffic: number;
+  };
+}
+
+export interface ContentOpportunitiesReport {
+  site_url: string;
+  report_date: string;
+  analysis_period_days: number;
+  total_opportunities: number;
+  opportunities_by_priority: {
+    high: ContentOpportunity[];
+    medium: ContentOpportunity[];
+    low: ContentOpportunity[];
+  };
+  phased_roadmap: {
+    phase1: {
+      target: string;
+      opportunities: ContentOpportunity[];
+      estimated_traffic_gain: number;
+      timeframe_weeks: number;
+    };
+    phase2: {
+      target: string;
+      opportunities: ContentOpportunity[];
+      estimated_traffic_gain: number;
+      timeframe_weeks: number;
+    };
+    phase3: {
+      target: string;
+      opportunities: ContentOpportunity[];
+      estimated_traffic_gain: number;
+      timeframe_weeks: number;
+    };
+  };
+  implementation_guide: string[];
+  success_metrics: string[];
+}
+
+export interface BaseResponse<T> {
+  success: boolean;
+  message: string;
+  data: T;
+  execution_time?: number;
+}
+
+// ============================================================================
+// API Client
+// ============================================================================
+
+export const enterpriseSeoAPI = {
+  /**
+   * Execute comprehensive enterprise SEO audit
+   */
+  async executeEnterpriseAudit(
+    websiteUrl: string,
+    options?: {
+      competitors?: string[];
+      targetKeywords?: string[];
+      includeContentAnalysis?: boolean;
+      includeCompetitiveAnalysis?: boolean;
+      generateExecutiveReport?: boolean;
+    }
+  ): Promise<BaseResponse<EnterpriseAuditResult>> {
+    try {
+      const request = {
+        website_url: websiteUrl,
+        competitors: options?.competitors || [],
+        target_keywords: options?.targetKeywords || [],
+        include_content_analysis: options?.includeContentAnalysis ?? true,
+        include_competitive_analysis: options?.includeCompetitiveAnalysis ?? true,
+        generate_executive_report: options?.generateExecutiveReport ?? true,
+      };
+
+      console.log('Starting enterprise audit request:', request);
+      const response = await longRunningApiClient.post(
+        '/api/seo-tools/enterprise/complete-audit',
+        request
+      );
+      console.log('Enterprise audit response:', response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Error executing enterprise audit:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Execute quick enterprise audit (faster version)
+   */
+  async executeQuickAudit(
+    websiteUrl: string,
+    options?: {
+      targetKeywords?: string[];
+    }
+  ): Promise<BaseResponse<EnterpriseAuditResult>> {
+    try {
+      const request = {
+        website_url: websiteUrl,
+        target_keywords: options?.targetKeywords || [],
+      };
+
+      console.log('Starting quick audit request:', request);
+      const response = await longRunningApiClient.post(
+        '/api/seo-tools/enterprise/quick-audit',
+        request
+      );
+      console.log('Quick audit response:', response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Error executing quick audit:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Analyze GSC search performance with comprehensive insights
+   */
+  async analyzeGSCSearchPerformance(
+    siteUrl: string,
+    options?: {
+      dateRangeDays?: number;
+      includeOpportunities?: boolean;
+      includeCompetitive?: boolean;
+    }
+  ): Promise<BaseResponse<GSCAnalysisResult>> {
+    try {
+      const request = {
+        site_url: siteUrl,
+        date_range_days: options?.dateRangeDays || 90,
+        include_opportunities: options?.includeOpportunities ?? true,
+        include_competitive: options?.includeCompetitive ?? true,
+      };
+
+      console.log('Starting GSC analysis request:', request);
+      const response = await longRunningApiClient.post(
+        '/api/seo-tools/gsc/analyze-search-performance',
+        request
+      );
+      console.log('GSC analysis response:', response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Error analyzing GSC search performance:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Generate content opportunities report from GSC data
+   */
+  async getContentOpportunitiesReport(
+    siteUrl: string,
+    options?: {
+      minImpressions?: number;
+      dateRangeDays?: number;
+    }
+  ): Promise<BaseResponse<ContentOpportunitiesReport>> {
+    try {
+      const request = {
+        site_url: siteUrl,
+        min_impressions: options?.minImpressions || 100,
+        date_range_days: options?.dateRangeDays || 90,
+      };
+
+      console.log('Starting content opportunities request:', request);
+      const response = await longRunningApiClient.post(
+        '/api/seo-tools/gsc/content-opportunities',
+        request
+      );
+      console.log('Content opportunities response:', response.data);
+      return response.data;
+    } catch (error) {
+      console.error('Error getting content opportunities report:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Check health of enterprise services
+   */
+  async checkServicesHealth(): Promise<BaseResponse<any>> {
+    try {
+      const response = await apiClient.get('/api/seo-tools/enterprise/health');
+      return response.data;
+    } catch (error) {
+      console.error('Error checking enterprise services health:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Generate LLM-powered actionable insights for audit results
+   */
+  async generateAuditInsights(
+    auditResult: EnterpriseAuditResult
+  ): Promise<{ insights: AIInsight[]; recommendations: string[] }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/generate-insights', {
+        audit_data: auditResult,
+        insight_type: 'enterprise_audit',
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error generating audit insights:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Generate LLM-powered actionable insights for GSC analysis results
+   */
+  async generateGSCInsights(
+    analysisResult: GSCAnalysisResult
+  ): Promise<{ insights: AIInsight[]; recommendations: string[] }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/generate-insights', {
+        gsc_data: analysisResult,
+        insight_type: 'gsc_analysis',
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error generating GSC insights:', error);
+      throw error;
+    }
+  },
+
+  /**
+   * Get actionable traffic improvement strategies
+   */
+  async getTrafficImprovementStrategies(
+    siteUrl: string,
+    options?: {
+      currentTraffic?: number;
+      targetTraffic?: number;
+      timeframe?: 'month' | 'quarter' | 'year';
+    }
+  ): Promise<{ strategies: string[]; expected_growth: string; priority_actions: string[] }> {
+    try {
+      const request = {
+        site_url: siteUrl,
+        current_traffic: options?.currentTraffic,
+        target_traffic: options?.targetTraffic,
+        timeframe: options?.timeframe || 'quarter',
+      };
+
+      const response = await apiClient.post('/api/seo-tools/traffic-strategies', request);
+      return response.data;
+    } catch (error) {
+      console.error('Error getting traffic improvement strategies:', error);
+      throw error;
+    }
+  },
+};

frontend/src/api/llmInsightsGenerator.ts

@@ -0,0 +1,410 @@
+/**
+ * LLM Insights Generator Service
+ * Generates actionable, business-focused insights from SEO audit and analysis data
+ * Uses LLM prompts to provide personalized, traffic-focused recommendations
+ */
+
+import { apiClient, longRunningApiClient } from './client';
+import {
+  EnterpriseAuditResult,
+  GSCAnalysisResult,
+  AIInsight,
+  ContentOpportunity,
+  KeywordAnalysis,
+} from './enterpriseSeoApi';
+
+export interface ActionableInsight {
+  title: string;
+  description: string;
+  impact: 'high' | 'medium' | 'low';
+  effort: 'easy' | 'medium' | 'complex';
+  timeToImplement: string;
+  estimatedTrafficGain: number;
+  steps: string[];
+  tools?: string[];
+  priority: number; // 1-10, where 10 is highest priority
+}
+
+export interface TrafficImprovementStrategy {
+  phase: 'quick_wins' | 'medium_term' | 'long_term';
+  title: string;
+  description: string;
+  targetKeywords: string[];
+  estimatedTrafficGain: number;
+  timeframe: string;
+  keyActions: string[];
+  expectedROI: string;
+}
+
+export interface InsightGenerationResult {
+  insights: AIInsight[];
+  actionableInsights: ActionableInsight[];
+  trafficStrategies: TrafficImprovementStrategy[];
+  summary: string;
+}
+
+class LLMInsightsGenerator {
+  /**
+   * Generate actionable insights from enterprise audit results
+   * Focuses on traffic improvement and conversion opportunities
+   */
+  async generateEnterpriseAuditInsights(
+    auditResult: EnterpriseAuditResult,
+    websiteContext?: {
+      currentMonthlyTraffic?: number;
+      targetAudience?: string;
+      primaryGoal?: string;
+      budget?: 'startup' | 'small' | 'medium' | 'enterprise';
+    }
+  ): Promise<InsightGenerationResult> {
+    try {
+      const prompt = this.buildAuditInsightPrompt(auditResult, websiteContext);
+
+      const response = await apiClient.post('/api/seo-tools/llm/generate-audit-insights', {
+        audit_data: auditResult,
+        context: websiteContext,
+        prompt_template: 'enterprise_audit_insights',
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating audit insights:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate actionable insights from GSC analysis results
+   * Focuses on quick wins and keyword optimization
+   */
+  async generateGSCAnalysisInsights(
+    analysisResult: GSCAnalysisResult,
+    websiteContext?: {
+      currentMonthlyTraffic?: number;
+      targetKeywords?: string[];
+      primaryGoal?: string;
+    }
+  ): Promise<InsightGenerationResult> {
+    try {
+      const prompt = this.buildGSCInsightPrompt(analysisResult, websiteContext);
+
+      const response = await apiClient.post('/api/seo-tools/llm/generate-gsc-insights', {
+        gsc_data: analysisResult,
+        context: websiteContext,
+        prompt_template: 'gsc_analysis_insights',
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating GSC insights:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate content strategy recommendations
+   * Provides specific content ideas and gaps to address
+   */
+  async generateContentStrategy(
+    auditOrAnalysisResult: EnterpriseAuditResult | GSCAnalysisResult,
+    options?: {
+      focusArea?: 'keywords' | 'content_gaps' | 'long_tail' | 'featured_snippets';
+      contentType?: 'blog' | 'guides' | 'product_pages' | 'mixed';
+      targetTraffic?: number;
+    }
+  ): Promise<{
+    contentIdeas: string[];
+    gapAnalysis: string[];
+    prioritizedTopics: { topic: string; estimatedTraffic: number; difficulty: string }[];
+    contentCalendar: {
+      month: string;
+      topics: string[];
+      expectedTraffic: number;
+    }[];
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/generate-content-strategy', {
+        data: auditOrAnalysisResult,
+        options,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating content strategy:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate traffic improvement roadmap
+   * Provides phased approach to increasing organic traffic
+   */
+  async generateTrafficRoadmap(
+    auditOrAnalysisResult: EnterpriseAuditResult | GSCAnalysisResult,
+    targetTraffic: number,
+    timeframe: 'quarter' | 'semi_annual' | 'annual'
+  ): Promise<{
+    currentTraffic: number;
+    targetTraffic: number;
+    timeframe: string;
+    phases: TrafficImprovementStrategy[];
+    keyMetrics: {
+      metric: string;
+      baseline: number;
+      target: number;
+      unit: string;
+    }[];
+    risks: string[];
+    opportunities: string[];
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/generate-traffic-roadmap', {
+        data: auditOrAnalysisResult,
+        target_traffic: targetTraffic,
+        timeframe,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating traffic roadmap:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate priority-ranked recommendations
+   * Ranks all possible improvements by impact vs effort
+   */
+  async generatePrioritizedRecommendations(
+    auditOrAnalysisResult: EnterpriseAuditResult | GSCAnalysisResult
+  ): Promise<ActionableInsight[]> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/prioritized-recommendations', {
+        data: auditOrAnalysisResult,
+      });
+
+      return response.data.recommendations || [];
+    } catch (error) {
+      console.error('Error generating prioritized recommendations:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate quick wins recommendations
+   * Focus on 1-2 week implementation timeline
+   */
+  async generateQuickWins(
+    auditOrAnalysisResult: EnterpriseAuditResult | GSCAnalysisResult
+  ): Promise<ActionableInsight[]> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/quick-wins', {
+        data: auditOrAnalysisResult,
+        filter: 'quick_wins',
+      });
+
+      return response.data.insights || [];
+    } catch (error) {
+      console.error('Error generating quick wins:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate competitive positioning insights
+   * Helps understand how to outrank competitors
+   */
+  async generateCompetitiveInsights(
+    auditOrAnalysisResult: EnterpriseAuditResult | GSCAnalysisResult,
+    competitors?: string[]
+  ): Promise<{
+    positioning: string;
+    whiteSpaceOpportunities: string[];
+    competitiveAdvantages: string[];
+    recommendedActions: string[];
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/competitive-insights', {
+        data: auditOrAnalysisResult,
+        competitors,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating competitive insights:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate keyword expansion recommendations
+   * Helps find related keywords and long-tail opportunities
+   */
+  async generateKeywordExpansion(
+    targetKeywords: string[],
+    analysisData?: GSCAnalysisResult | EnterpriseAuditResult
+  ): Promise<{
+    expandedKeywords: KeywordAnalysis[];
+    longTailVariations: string[];
+    relatedSearches: string[];
+    semanticVariations: string[];
+    recommendedContent: string[];
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/keyword-expansion', {
+        target_keywords: targetKeywords,
+        analysis_data: analysisData,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating keyword expansion:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate content optimization recommendations
+   * Provides specific guidance on improving existing content
+   */
+  async generateContentOptimization(
+    pageUrl: string,
+    currentContent: string,
+    analysisContext?: GSCAnalysisResult | EnterpriseAuditResult
+  ): Promise<{
+    currentPerformance: string;
+    optimizationPriorities: string[];
+    keywordInsertions: { keyword: string; placement: string; context: string }[];
+    contentExpansionIdeas: string[];
+    structuredDataRecommendations: string[];
+    estimatedImpact: string;
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/content-optimization', {
+        page_url: pageUrl,
+        current_content: currentContent,
+        analysis_context: analysisContext,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating content optimization:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Generate technical SEO improvement plan
+   * Addresses technical issues with actionable steps
+   */
+  async generateTechnicalImprovementPlan(
+    auditResult: EnterpriseAuditResult
+  ): Promise<{
+    criticalFixes: { issue: string; solution: string; timeToFix: string; impact: string }[];
+    performanceOptimizations: string[];
+    mobileOptimizations: string[];
+    implementationSequence: string[];
+    expectedImpactOnRankings: string;
+  }> {
+    try {
+      const response = await apiClient.post('/api/seo-tools/llm/technical-improvement-plan', {
+        audit_result: auditResult,
+      });
+
+      return response.data;
+    } catch (error) {
+      console.error('Error generating technical improvement plan:', error);
+      throw error;
+    }
+  }
+
+  // ============================================================================
+  // Helper Methods - Prompt Building
+  // ============================================================================
+
+  private buildAuditInsightPrompt(
+    auditResult: EnterpriseAuditResult,
+    context?: any
+  ): string {
+    return `
+As an expert SEO strategist, analyze this enterprise audit and provide actionable, traffic-focused insights.
+
+AUDIT DATA:
+- Overall Score: ${auditResult.executive_summary.overall_score}/100
+- Traffic Potential: ${auditResult.executive_summary.estimated_traffic_potential}
+- Critical Issues: ${auditResult.executive_summary.critical_issues.length}
+- Top Opportunities: ${auditResult.executive_summary.top_opportunities.join('; ')}
+
+WEBSITE CONTEXT:
+- Current Monthly Traffic: ${context?.currentMonthlyTraffic || 'Unknown'}
+- Target Audience: ${context?.targetAudience || 'Not specified'}
+- Primary Goal: ${context?.primaryGoal || 'Increase organic traffic'}
+- Budget Level: ${context?.budget || 'Not specified'}
+
+TASK:
+1. Generate 5-7 high-impact, actionable insights (prioritize quick wins first)
+2. For each insight, provide:
+   - Clear title and description
+   - Expected traffic impact (number or percentage)
+   - Implementation difficulty (easy/medium/complex)
+   - Estimated time to implement
+   - Step-by-step implementation guide
+
+3. Identify the top 3 traffic improvement strategies with specific, measurable outcomes
+4. Provide competitive positioning recommendations
+5. Highlight any urgent/critical items that need immediate attention
+
+Focus on traffic improvement and revenue impact. Make recommendations specific and actionable, not generic.
+Return structured JSON with insights array containing objects with: title, description, impact, effort, timeToImplement, estimatedTraffic, steps[], priority (1-10).
+    `;
+  }
+
+  private buildGSCInsightPrompt(
+    analysisResult: GSCAnalysisResult,
+    context?: any
+  ): string {
+    return `
+As an expert SEO strategist specializing in GSC optimization, analyze this search performance data and provide traffic-focused recommendations.
+
+SEARCH PERFORMANCE DATA:
+- Total Clicks: ${analysisResult.performance_overview.clicks}
+- Total Impressions: ${analysisResult.performance_overview.impressions}
+- Average CTR: ${(analysisResult.performance_overview.ctr * 100).toFixed(2)}%
+- Average Position: ${analysisResult.performance_overview.avg_position}
+- Content Opportunities: ${analysisResult.content_opportunities.length}
+
+KEYWORD DATA:
+- Top Keywords: ${analysisResult.keyword_analysis.top_performers.slice(0, 3).map(k => k.keyword).join(', ')}
+- Keywords Ready for Improvement: ${analysisResult.keyword_analysis.opportunities.length}
+- Declining Keywords: ${analysisResult.keyword_analysis.declining_keywords.length}
+
+WEBSITE CONTEXT:
+- Current Monthly Traffic: ${context?.currentMonthlyTraffic || 'Unknown'}
+- Target Keywords: ${context?.targetKeywords?.join(', ') || 'Not specified'}
+- Primary Goal: ${context?.primaryGoal || 'Increase click-through rate'}
+
+TASK:
+1. Identify 5-10 high-potential opportunities for traffic growth
+2. Prioritize by: (a) Current position (rank 4-10), (b) Volume, (c) CTR improvement potential
+
+3. For each top opportunity, provide:
+   - Keyword and current metrics
+   - Specific on-page optimization recommendations
+   - Estimated traffic gain
+   - Implementation timeframe
+
+4. Generate quick wins (things that can be done in 1-2 weeks)
+5. Identify any technical SEO issues affecting CTR or rankings
+6. Provide long-tail keyword expansion opportunities
+
+Focus on practical, measurable improvements to clicks and rankings.
+Return structured JSON with insights array and trafficStrategies array.
+    `;
+  }
+}
+
+// Export singleton instance
+export const llmInsightsGenerator = new LLMInsightsGenerator();
+
+// For React component usage
+export { LLMInsightsGenerator };

frontend/src/api/styleDetection.ts

@@ -51,8 +51,8 @@ export interface StyleDetectionResponse {
   timestamp: string;
 }
 
-// Consistent API URL pattern - no hardcoded localhost fallback
-const API_BASE_URL = process.env.REACT_APP_API_URL || process.env.REACT_APP_BACKEND_URL || '';
+// API URL is handled by the shared apiClient which uses the centralized getApiBaseUrl utility
+// so we don't need a separate API_BASE_URL here
 
 /**
  * Analyze content style using AI

frontend/src/components/BlogWriter/BlogWriter.tsx

@@ -36,6 +36,7 @@ import { useBlogWriterRefs } from './BlogWriterUtils/useBlogWriterRefs';
 import { BlogWriterLandingSection } from './BlogWriterUtils/BlogWriterLandingSection';
 import { CopilotKitComponents } from './BlogWriterUtils/CopilotKitComponents';
 import { useBlogAsset } from '../../hooks/useBlogAsset';
+import { blogAssetAPI } from '../../api/blogAsset';
 
 const BlogWriter: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -210,6 +211,12 @@ const BlogWriter: React.FC = () => {
   // When true (Re-Content), polling callback skips auto-confirm and SEO navigation
   const skipContentAutoConfirmRef = React.useRef<boolean>(false);
 
+  // Lifted keywords from ManualResearchForm (for header chip "Click To Research" label)
+  const [researchKeywords, setResearchKeywords] = useState<string>('');
+  const researchBlogLengthRef = useRef<string>('1000');
+  // Shared ref exposed by ManualResearchForm / ResearchAction for header-triggered research
+  const startResearchRef = useRef<((keywords: string, blogLength?: string) => Promise<any>) | null>(null);
+
   // Normalize section keys to match outline IDs when updating from API responses
   const handleSectionsUpdate = useCallback((newSections: Record<string, string>) => {
     if (outline && outline.length > 0 && Object.keys(newSections).length > 0) {
@@ -271,17 +278,46 @@ const BlogWriter: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Create/get blog asset before research starts (saves to Asset Library immediately)
-  const handleBeforeResearchSubmit = useCallback(async (keywords: string, blogLength: string) => {
-    const id = await createAsset(keywords, keywords, parseInt(blogLength));
-    if (id) saveLastAssetId(id);
-  }, [createAsset, saveLastAssetId]);
-
   // Wrap handlers to also update the blog ContentAsset
-  const wrappedHandleResearchComplete = useCallback((researchData: any) => {
+  const wrappedHandleResearchComplete = useCallback(async (researchData: any) => {
     handleResearchComplete(researchData);
-    if (assetId) { updatePhase('research', researchData); saveLastAssetId(assetId); }
-  }, [handleResearchComplete, assetId, updatePhase, saveLastAssetId]);
+    const kw = researchData?.original_keywords
+      ? (Array.isArray(researchData.original_keywords) ? researchData.original_keywords.join(', ') : researchData.original_keywords)
+      : (researchKeywords || '');
+    const bl = researchBlogLengthRef.current || researchData?.word_count_target?.toString() || '1000';
+    if (assetId) {
+      // Re-Research: update existing asset
+      updatePhase('research', researchData);
+      saveLastAssetId(assetId);
+    } else {
+      // First research: create blog asset AFTER research completes
+      const id = await createAsset(kw, kw, parseInt(bl));
+      if (id) {
+        saveLastAssetId(id);
+        // Direct API call: createAsset sets React state but the closure is stale
+        await blogAssetAPI.update(id, { phase: 'research', research_data: researchData });
+      }
+    }
+  }, [handleResearchComplete, researchKeywords, assetId, createAsset, saveLastAssetId, updatePhase]);
+
+  // Handler for header chip "Click To Research" / "Re-Research"
+  const handleResearchStartAction = useCallback(async () => {
+    // Navigate first so ManualResearchForm mounts and sets the ref (for non-CopilotKit path)
+    navigateToPhase('research');
+    let kw = researchKeywords;
+    if (!kw && research) {
+      kw = Array.isArray(research.original_keywords)
+        ? research.original_keywords.join(', ')
+        : research.original_keywords || '';
+    }
+    const bl = researchBlogLengthRef.current || (research as any)?.word_count_target?.toString() || '1000';
+    if (!kw) return;
+    // Yield to React so the navigation renders and the form sets startResearchRef
+    await new Promise(resolve => setTimeout(resolve, 0));
+    if (startResearchRef.current) {
+      await startResearchRef.current(kw, bl);
+    }
+  }, [navigateToPhase, researchKeywords, research]);
 
   const wrappedHandleSEOAnalysisComplete = useCallback((analysis: any) => {
     handleSEOAnalysisComplete(analysis);
@@ -386,6 +422,7 @@ const BlogWriter: React.FC = () => {
     currentPhase,
     isSEOAnalysisModalOpen,
     resetUserSelection,
+    restoreAttempted,
   });
 
   const handlePhaseClick = useCallback((phaseId: string) => {
@@ -483,6 +520,7 @@ const BlogWriter: React.FC = () => {
   const {
     handleResearchAction,
     handleOutlineAction,
+    handleOutlineStartAction,
     handleContentAction,
     handleSEOAction,
     handleApplySEORecommendations,
@@ -555,7 +593,8 @@ const BlogWriter: React.FC = () => {
           outlineConfirmed={outlineConfirmed}
           sections={sections}
           selectedTitle={selectedTitle}
-           onResearchComplete={wrappedHandleResearchComplete}
+          onResearchComplete={wrappedHandleResearchComplete}
+          startResearchRef={startResearchRef}
           onOutlineCreated={setOutline}
           onOutlineUpdated={setOutline}
           onTitleOptionsSet={setTitleOptions}
@@ -636,12 +675,15 @@ const BlogWriter: React.FC = () => {
         copilotKitAvailable={copilotKitAvailable}
         actionHandlers={{
           onResearchAction: handleResearchAction,
+          onResearchStartAction: handleResearchStartAction,
           onOutlineAction: handleOutlineAction,
+          onOutlineStartAction: handleOutlineStartAction,
           onContentAction: handleContentAction,
           onSEOAction: handleSEOAction,
           onApplySEORecommendations: handleApplySEORecommendations,
           onPublishAction: handlePublishAction,
         }}
+        researchKeywords={researchKeywords}
         hasResearch={!!research}
         hasOutline={outline.length > 0}
         outlineConfirmed={outlineConfirmed}
@@ -663,7 +705,9 @@ const BlogWriter: React.FC = () => {
         currentPhase={currentPhase}
         navigateToPhase={navigateToPhase}
         onResearchComplete={wrappedHandleResearchComplete}
-        onBeforeResearchSubmit={handleBeforeResearchSubmit}
+        onKeywordsChange={setResearchKeywords}
+        blogLengthRef={researchBlogLengthRef}
+        startResearchRef={startResearchRef}
         restoreAttempted={restoreAttempted}
       />
 
@@ -699,6 +743,9 @@ const BlogWriter: React.FC = () => {
         onCustomTitle={handleCustomTitle}
         copilotKitAvailable={copilotKitAvailable}
         onResearchComplete={wrappedHandleResearchComplete}
+        onKeywordsChange={setResearchKeywords}
+        blogLengthRef={researchBlogLengthRef}
+        startResearchRef={startResearchRef}
         onOutlineGenerationStart={(taskId) => {
           setOutlineTaskId(taskId);
           outlinePolling.startPolling(taskId);

frontend/src/components/BlogWriter/BlogWriterUtils/BlogWriterLandingSection.tsx

@@ -9,7 +9,9 @@ interface BlogWriterLandingSectionProps {
   currentPhase: string;
   navigateToPhase: (phase: string) => void;
   onResearchComplete: (research: any) => void;
-  onBeforeResearchSubmit?: (keywords: string, blogLength: string) => Promise<void>;
+  onKeywordsChange?: (kw: string) => void;
+  blogLengthRef?: React.MutableRefObject<string>;
+  startResearchRef?: React.MutableRefObject<((keywords: string, blogLength?: string) => Promise<any>) | null>;
   restoreAttempted?: boolean;
 }
 
@@ -21,12 +23,21 @@ export const BlogWriterLandingSection: React.FC<BlogWriterLandingSectionProps> =
   currentPhase,
   navigateToPhase,
   onResearchComplete,
-  onBeforeResearchSubmit,
+  onKeywordsChange,
+  blogLengthRef,
+  startResearchRef,
   restoreAttempted = false,
 }) => {
   if (!research) {
     if (currentPhase === 'research') {
-      return <ManualResearchForm onResearchComplete={onResearchComplete} onBeforeResearchSubmit={onBeforeResearchSubmit} />;
+      return (
+        <ManualResearchForm
+          onResearchComplete={onResearchComplete}
+          onKeywordsChange={onKeywordsChange}
+          blogLengthRef={blogLengthRef}
+          researchRef={startResearchRef}
+        />
+      );
     }
 
     if (currentPhase === '' || !VALID_PHASES.includes(currentPhase)) {

frontend/src/components/BlogWriter/BlogWriterUtils/CopilotKitComponents.tsx

@@ -14,6 +14,7 @@ interface CopilotKitComponentsProps {
   sections: Record<string, string>;
   selectedTitle: string | null;
   onResearchComplete: (research: any) => void;
+  startResearchRef?: React.MutableRefObject<((keywords: string, blogLength?: string) => Promise<any>) | null>;
   onOutlineCreated: (outline: any[]) => void;
   onOutlineUpdated: (outline: any[]) => void;
   onTitleOptionsSet: (titles: any[]) => void;
@@ -37,6 +38,7 @@ export const CopilotKitComponents: React.FC<CopilotKitComponentsProps> = ({
   sections,
   selectedTitle,
   onResearchComplete,
+  startResearchRef,
   onOutlineCreated,
   onOutlineUpdated,
   onTitleOptionsSet,
@@ -59,7 +61,7 @@ export const CopilotKitComponents: React.FC<CopilotKitComponentsProps> = ({
         onTaskStart={(taskId) => researchPolling.startPolling(taskId)}
       />
       <CustomOutlineForm onOutlineCreated={onOutlineCreated} />
-      <ResearchAction onResearchComplete={onResearchComplete} navigateToPhase={navigateToPhase} />
+      <ResearchAction onResearchComplete={onResearchComplete} researchRef={startResearchRef} navigateToPhase={navigateToPhase} />
       
       <ResearchDataActions 
         research={research} 

frontend/src/components/BlogWriter/BlogWriterUtils/HeaderBar.tsx

@@ -24,6 +24,7 @@ interface HeaderBarProps {
   onPhaseClick: (phaseId: string) => void;
   copilotKitAvailable?: boolean;
   actionHandlers?: PhaseActionHandlers;
+  researchKeywords?: string;
   hasResearch?: boolean;
   hasOutline?: boolean;
   outlineConfirmed?: boolean;
@@ -39,7 +40,7 @@ interface HeaderBarProps {
 
 export const HeaderBar: React.FC<HeaderBarProps> = ({ 
   phases, currentPhase, onPhaseClick, copilotKitAvailable = true, actionHandlers,
-  hasResearch = false, hasOutline = false, outlineConfirmed = false,
+  researchKeywords = '', hasResearch = false, hasOutline = false, outlineConfirmed = false,
   hasContent = false, contentConfirmed = false, hasSEOAnalysis = false,
   seoRecommendationsApplied = false, hasSEOMetadata = false,
   onNewBlog, onMyBlogs, onHelp,
@@ -168,6 +169,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
           onPhaseClick={onPhaseClick}
           copilotKitAvailable={copilotKitAvailable}
           actionHandlers={actionHandlers}
+          researchKeywords={researchKeywords}
           hasResearch={hasResearch}
           hasOutline={hasOutline}
           outlineConfirmed={outlineConfirmed}

frontend/src/components/BlogWriter/BlogWriterUtils/PhaseContent.tsx

@@ -3,9 +3,7 @@ import ResearchResults from '../ResearchResults';
 import EnhancedTitleSelector from '../EnhancedTitleSelector';
 import EnhancedOutlineEditor from '../EnhancedOutlineEditor';
 import { BlogEditor } from '../WYSIWYG';
-import OutlineCtaBanner from './OutlineCtaBanner';
 import ManualResearchForm from '../ManualResearchForm';
-import ManualOutlineButton from '../ManualOutlineButton';
 import ManualContentButton from '../ManualContentButton';
 import PublishContent from './PublishContent';
 
@@ -39,6 +37,9 @@ interface PhaseContentProps {
   setSectionImages?: (images: Record<string, string> | ((prev: Record<string, string>) => Record<string, string>)) => void;
   copilotKitAvailable?: boolean; // Whether CopilotKit is available
   onResearchComplete?: (research: any) => void; // Callback when research completes (for manual form)
+  onKeywordsChange?: (kw: string) => void; // Sync keywords to parent for header chip label
+  blogLengthRef?: React.MutableRefObject<string>; // Ref to sync blog length to parent
+  startResearchRef?: React.MutableRefObject<((keywords: string, blogLength?: string) => Promise<any>) | null>; // Ref to expose startResearch
   onOutlineGenerationStart?: (taskId: string) => void; // Callback when outline generation starts
   onContentGenerationStart?: (taskId: string) => void; // Callback when content generation starts
   buildFullMarkdown?: () => string;
@@ -75,6 +76,9 @@ export const PhaseContent: React.FC<PhaseContentProps> = ({
   setSectionImages,
   copilotKitAvailable = true,
   onResearchComplete,
+  onKeywordsChange,
+  blogLengthRef,
+  startResearchRef,
   onOutlineGenerationStart,
   onContentGenerationStart,
   buildFullMarkdown,
@@ -95,7 +99,12 @@ export const PhaseContent: React.FC<PhaseContentProps> = ({
                     <p>Use the copilot to begin researching your blog topic.</p>
                   </div>
                 ) : (
-                  <ManualResearchForm onResearchComplete={onResearchComplete} />
+                  <ManualResearchForm
+                    onResearchComplete={onResearchComplete}
+                    onKeywordsChange={onKeywordsChange}
+                    blogLengthRef={blogLengthRef}
+                    researchRef={startResearchRef}
+                  />
                 )}
               </>
             )}
@@ -104,20 +113,16 @@ export const PhaseContent: React.FC<PhaseContentProps> = ({
 
         {currentPhase === 'outline' && research && (
           <>
-            {outline.length === 0 && (
-              <>
-                {copilotKitAvailable ? (
-                  <OutlineCtaBanner onGenerate={() => outlineGenRef.current?.generateNow()} />
-                ) : (
-                  <ManualOutlineButton
-                    outlineGenRef={outlineGenRef}
-                    hasResearch={!!research}
-                    onGenerationStart={onOutlineGenerationStart}
-                  />
-                )}
-              </>
-            )}
-            {outline.length > 0 ? (
+            {outline.length === 0 ? (
+              <div style={{ padding: '40px 20px', textAlign: 'center', color: '#64748b' }}>
+                <div style={{ fontSize: '32px', marginBottom: '12px' }}>📝</div>
+                <h3 style={{ margin: '0 0 8px 0', color: '#334155' }}>Creating Your Outline</h3>
+                <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.6' }}>
+                  Your outline is being generated from the research data. 
+                  The progress modal shows detailed status — once complete, you can review and refine the sections here.
+                </p>
+              </div>
+            ) : (
               <>
                 <EnhancedTitleSelector
                   titleOptions={titleOptions}
@@ -141,17 +146,6 @@ export const PhaseContent: React.FC<PhaseContentProps> = ({
                   setSectionImages={setSectionImages}
                 />
               </>
-            ) : !copilotKitAvailable ? (
-              <ManualOutlineButton
-                outlineGenRef={outlineGenRef}
-                hasResearch={!!research}
-                onGenerationStart={onOutlineGenerationStart}
-              />
-            ) : (
-              <div style={{ padding: '20px', textAlign: 'center' }}>
-                <h3>Create Your Outline</h3>
-                <p>Use the copilot to generate an outline based on your research.</p>
-              </div>
             )}
           </>
         )}

frontend/src/components/BlogWriter/BlogWriterUtils/useBlogWriterRefs.ts

@@ -10,6 +10,7 @@ interface UseBlogWriterRefsProps {
   currentPhase: string;
   isSEOAnalysisModalOpen: boolean;
   resetUserSelection: () => void;
+  restoreAttempted?: boolean;
 }
 
 export const useBlogWriterRefs = ({
@@ -21,7 +22,23 @@ export const useBlogWriterRefs = ({
   currentPhase,
   isSEOAnalysisModalOpen,
   resetUserSelection,
+  restoreAttempted,
 }: UseBlogWriterRefsProps) => {
+  // Skip resetUserSelection during state restoration to avoid overriding
+  // the user's last known phase. After restoration completes, we allow
+  // resets for natural user-driven transitions.
+  const isRestoringRef = useRef(true);
+
+  useEffect(() => {
+    if (restoreAttempted) {
+      // Give React a render cycle to settle before allowing resets
+      const timer = setTimeout(() => {
+        isRestoringRef.current = false;
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [restoreAttempted]);
+
   // Track when outlines/content become available for the first time
   const prevOutlineLenRef = useRef<number>(outline.length);
   const prevOutlineConfirmedRef = useRef<boolean>(outlineConfirmed);
@@ -30,7 +47,9 @@ export const useBlogWriterRefs = ({
   useEffect(() => {
     const prevLen = prevOutlineLenRef.current;
     if (research && prevLen === 0 && outline.length > 0) {
-      resetUserSelection();
+      if (!isRestoringRef.current) {
+        resetUserSelection();
+      }
     }
     prevOutlineLenRef.current = outline.length;
   }, [research, outline.length, resetUserSelection]);
@@ -39,7 +58,9 @@ export const useBlogWriterRefs = ({
   useEffect(() => {
     const wasConfirmed = prevOutlineConfirmedRef.current;
     if (!wasConfirmed && outlineConfirmed && Object.keys(sections).length > 0) {
-      resetUserSelection(); // Allow auto-progression to content phase
+      if (!isRestoringRef.current) {
+        resetUserSelection();
+      }
     }
     prevOutlineConfirmedRef.current = outlineConfirmed;
   }, [outlineConfirmed, sections, resetUserSelection]);
@@ -47,7 +68,9 @@ export const useBlogWriterRefs = ({
   useEffect(() => {
     const wasConfirmed = prevContentConfirmedRef.current;
     if (!wasConfirmed && contentConfirmed) {
-      resetUserSelection(); // Allow auto-progression to SEO phase
+      if (!isRestoringRef.current) {
+        resetUserSelection();
+      }
     }
     prevContentConfirmedRef.current = contentConfirmed;
   }, [contentConfirmed, resetUserSelection]);

frontend/src/components/BlogWriter/BlogWriterUtils/usePhaseActionHandlers.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { debug } from '../../../utils/debug';
 import { mediumBlogApi } from '../../../services/blogWriterApi';
-import { researchCache } from '../../../services/researchCache';
 import { blogWriterCache } from '../../../services/blogWriterCache';
 
 interface UsePhaseActionHandlersProps {
@@ -58,27 +57,20 @@ export const usePhaseActionHandlers = ({
       alert('Please complete research first before generating an outline.');
       return;
     }
-    
-    // Check cache first (shared utility)
-    const researchKeywords = research.original_keywords || research.keyword_analysis?.primary || [];
-    const cachedOutline = blogWriterCache.getCachedOutline(researchKeywords);
-    
-    if (cachedOutline) {
-      debug.log('[BlogWriter] Using cached outline from localStorage', { sections: cachedOutline.outline.length });
-      setOutline(cachedOutline.outline);
-      if (onOutlineComplete) {
-        onOutlineComplete({ outline: cachedOutline.outline, title_options: cachedOutline.title_options });
-      }
-      navigateToPhase('outline');
-      return;
-    }
-    
     navigateToPhase('outline');
     if (outlineGenRef.current) {
       try {
         const result = await outlineGenRef.current.generateNow();
         if (!result.success) {
           alert(result.message || 'Failed to generate outline');
+        } else if (result.cached && result.outline) {
+          // Cached result: set state directly (onOutlineCreated was already called by generateNow)
+          setOutline(result.outline);
+          if (result.title_options) {
+            if (onOutlineComplete) {
+              onOutlineComplete({ outline: result.outline, title_options: result.title_options });
+            }
+          }
         }
       } catch (error) {
         console.error('Outline generation failed:', error);
@@ -88,6 +80,37 @@ export const usePhaseActionHandlers = ({
     debug.log('[BlogWriter] Outline action triggered');
   }, [research, navigateToPhase, outlineGenRef, setOutline, onOutlineComplete]);
 
+  const handleOutlineStartAction = useCallback(async () => {
+    if (!research) {
+      alert('Please complete research first before generating an outline.');
+      return;
+    }
+    navigateToPhase('outline');
+    // Clear cached outline + title options to force re-generation
+    try {
+      localStorage.removeItem('blog_outline');
+      localStorage.removeItem('blog_title_options');
+    } catch { /* noop */ }
+    if (outlineGenRef.current) {
+      try {
+        const result = await outlineGenRef.current.generateNow();
+        if (!result.success) {
+          alert(result.message || 'Failed to generate outline');
+        } else if (result.cached && result.outline) {
+          // Should not normally happen since we cleared cache, but handle defensively
+          setOutline(result.outline);
+          if (result.title_options && onOutlineComplete) {
+            onOutlineComplete({ outline: result.outline, title_options: result.title_options });
+          }
+        }
+      } catch (error) {
+        console.error('Outline re-generation failed:', error);
+        alert(`Outline re-generation failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      }
+    }
+    debug.log('[BlogWriter] Outline re-generation triggered');
+  }, [research, navigateToPhase, outlineGenRef, setOutline, onOutlineComplete]);
+
   const handleContentAction = useCallback(async () => {
     if (!outline || outline.length === 0) {
       alert('Please generate an outline first.');
@@ -207,6 +230,7 @@ export const usePhaseActionHandlers = ({
   return {
     handleResearchAction,
     handleOutlineAction,
+    handleOutlineStartAction,
     handleContentAction,
     handleSEOAction,
     handleApplySEORecommendations,

frontend/src/components/BlogWriter/BlogWriterUtils/usePhaseRestoration.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { debug } from '../../../utils/debug';
 
 interface UsePhaseRestorationProps {
@@ -18,10 +18,12 @@ export const usePhaseRestoration = ({
   navigateToPhase,
   setCurrentPhase,
 }: UsePhaseRestorationProps) => {
-  // When CopilotKit is unavailable and there's no research, ensure we're on research phase
+  const hasRestoredRef = useRef(false);
+
   useEffect(() => {
-    if (!copilotKitAvailable && !research && phases.length > 0 && currentPhase !== 'research') {
+    if (!copilotKitAvailable && !research && phases.length > 0 && currentPhase !== 'research' && !hasRestoredRef.current) {
       navigateToPhase('research');
+      hasRestoredRef.current = true;
       debug.log('[BlogWriter] Auto-navigating to research phase (CopilotKit unavailable)');
     }
   }, [copilotKitAvailable, research, phases.length, currentPhase, navigateToPhase]);

frontend/src/components/BlogWriter/BlogWriterUtils/useSEOManager.ts

@@ -482,17 +482,16 @@ export const useSEOManager = ({
   // Mark SEO phase as completed when recommendations are applied
   useEffect(() => {
     if (seoRecommendationsApplied && seoAnalysis) {
-      // SEO phase is considered complete when recommendations are applied
-      // But stay in SEO phase to show updated content
       debug.log('[BlogWriter] SEO recommendations applied, SEO phase marked as complete');
       
-      // Ensure we stay in SEO phase to show updated content (override auto-progression)
+      // Ensure we stay in SEO phase only once when recommendations are first applied
       if (currentPhase !== 'seo' && Object.keys(sections).length > 0) {
         navigateToPhase('seo');
-        debug.log('[BlogWriter] Forced stay in SEO phase to show updated content');
+        debug.log('[BlogWriter] Navigated to SEO phase to show updated content');
       }
     }
-  }, [seoRecommendationsApplied, seoAnalysis, currentPhase, sections, navigateToPhase]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [seoRecommendationsApplied, seoAnalysis]);
 
   const confirmBlogContent = useCallback(() => {
     debug.log('[BlogWriter] Blog content confirmed by user');

frontend/src/components/BlogWriter/ManualResearchForm.tsx

@@ -6,13 +6,25 @@ import { BrainstormButton } from './BrainstormButton';
 
 interface ManualResearchFormProps {
   onResearchComplete?: (research: BlogResearchResponse) => void;
-  onBeforeResearchSubmit?: (keywords: string, blogLength: string) => Promise<void>;
+  onKeywordsChange?: (kw: string) => void;
+  blogLengthRef?: React.MutableRefObject<string>;
+  researchRef?: React.MutableRefObject<((keywords: string, blogLength?: string) => Promise<any>) | null>;
 }
 
-export const ManualResearchForm: React.FC<ManualResearchFormProps> = ({ onResearchComplete, onBeforeResearchSubmit }) => {
+export const ManualResearchForm: React.FC<ManualResearchFormProps> = ({ onResearchComplete, onKeywordsChange, blogLengthRef, researchRef }) => {
   const [keywords, setKeywords] = useState('');
   const [blogLength, setBlogLength] = useState('1000');
 
+  // Sync keywords to parent for header chip label
+  React.useEffect(() => {
+    onKeywordsChange?.(keywords);
+  }, [keywords, onKeywordsChange]);
+
+  // Sync blog length to parent ref
+  React.useEffect(() => {
+    if (blogLengthRef) blogLengthRef.current = blogLength;
+  }, [blogLength, blogLengthRef]);
+
   const {
     startResearch,
     isSubmitting,
@@ -24,6 +36,12 @@ export const ManualResearchForm: React.FC<ManualResearchFormProps> = ({ onResear
     error,
   } = useResearchSubmit({ onResearchComplete });
 
+  // Expose startResearch to parent for header chip "Click To Research"
+  React.useEffect(() => {
+    if (researchRef) researchRef.current = startResearch;
+    return () => { if (researchRef) researchRef.current = null; };
+  }, [startResearch, researchRef]);
+
   const handleSubmit = async () => {
     const trimmed = keywords.trim();
     if (!trimmed) {
@@ -31,7 +49,6 @@ export const ManualResearchForm: React.FC<ManualResearchFormProps> = ({ onResear
       return;
     }
     try {
-      await onBeforeResearchSubmit?.(trimmed, blogLength);
       await startResearch(trimmed, blogLength);
     } catch (err) {
       alert(`Research failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
@@ -112,7 +129,7 @@ export const ManualResearchForm: React.FC<ManualResearchFormProps> = ({ onResear
               opacity: isSubmitting ? 0.7 : 1
             }}
           >
-            {isSubmitting ? '⏳ Starting Research...' : '🚀 Start Research'}
+            {isSubmitting ? '⏳ Researching...' : '🔍 Click To Research'}
           </button>
         </div>
       </div>

frontend/src/components/BlogWriter/OutlineGenerator.tsx

@@ -42,6 +42,11 @@ export const OutlineGenerator = forwardRef<any, OutlineGeneratorProps>(({
       
       if (cachedOutline) {
         console.log('[OutlineGenerator] Using cached outline', { sections: cachedOutline.outline.length });
+        // Update parent state and navigate — same as CopilotKit action for cached outlines
+        navigateToPhase?.('outline');
+        if (onOutlineCreated) {
+          onOutlineCreated(cachedOutline.outline, cachedOutline.title_options);
+        }
         return { 
           success: true, 
           cached: true,

frontend/src/components/BlogWriter/OutlineProgressModal.tsx

@@ -30,46 +30,46 @@ export const OutlineProgressModal: React.FC<OutlineProgressModalProps> = ({
     
     // Outline phase messages
     if (message.includes('Starting outline generation')) {
-      return '🧩 Starting to create your blog outline...';
+      return '🧩 Launching outline generation — analyzing your research to build a structured blog plan. This usually takes 20–40 seconds. Next up: you will review and refine the outline, then generate each section.';
     }
     if (message.includes('Analyzing research data and building content strategy')) {
-      return '📊 Analyzing your research data to build the perfect content strategy...';
+      return '📊 Analyzing your research data — identifying key themes, content gaps, and strategic angles for your blog. This shapes the structure and flow of your outline.';
     }
     if (message.includes('Generating AI-powered outline with research insights')) {
-      return '🤖 Creating an intelligent outline using AI and your research insights...';
+      return '🤖 AI is generating your outline using research insights — selecting the best structure, ordering sections logically, and incorporating source citations.';
     }
     if (message.includes('Making AI request to generate structured outline')) {
-      return '🔄 Generating your structured blog outline...';
+      return '🔄 Sending request to AI — crafting a structured outline with section headings, key points, and word-count targets.';
     }
     if (message.includes('Calling Gemini API for outline generation')) {
-      return '🤖 AI is crafting your personalized blog structure...';
+      return '🤖 AI is crafting your personalized blog structure — this step involves complex reasoning about your research topic.';
     }
     if (message.includes('Processing outline structure and validating sections')) {
-      return '📝 Processing and validating your outline sections...';
+      return '📝 Processing and validating your outline — checking section ordering, heading clarity, and ensuring each section has actionable key points.';
     }
     if (message.includes('Running parallel processing for maximum speed')) {
-      return '⚡ Optimizing processing speed for faster results...';
+      return '⚡ Running parallel processing — optimizing multiple sections simultaneously for faster results.';
     }
     if (message.includes('Applying intelligent source-to-section mapping')) {
-      return '🔗 Intelligently matching your research sources to outline sections...';
+      return '🔗 Mapping research sources to outline sections — each section is linked to the most relevant sources for credibility.';
     }
     if (message.includes('Extracting grounding metadata insights')) {
-      return '🧠 Extracting valuable insights from your research data...';
+      return '🧠 Extracting grounding insights — identifying statistics, quotes, and expert opinions from your research to include in each section.';
     }
     if (message.includes('Enhancing sections with grounding insights')) {
-      return '✨ Enhancing your outline sections with research-backed insights...';
+      return '✨ Enhancing outline sections with research-backed insights — adding data points, expert quotes, and content angles for stronger sections.';
     }
     if (message.includes('Optimizing outline for better flow and engagement')) {
-      return '🎯 Optimizing your outline for maximum reader engagement...';
+      return '🎯 Optimizing outline flow — ensuring smooth transitions between sections, logical progression of ideas, and maximum reader engagement.';
     }
     if (message.includes('Rebalancing word count distribution')) {
-      return '⚖️ Balancing content distribution across sections...';
+      return '⚖️ Rebalancing word counts — distributing content across sections to ensure depth where needed and concise treatment of supporting points.';
     }
     if (message.includes('Outline generation and optimization completed successfully')) {
-      return '✅ Your blog outline has been successfully created and optimized!';
+      return '✅ Outline complete! Review and confirm your sections, then proceed to the Content phase to generate full blog text for each section.';
     }
     if (message.includes('Outline generated successfully')) {
-      return '🎉 Success! Your personalized blog outline is ready!';
+      return '🎉 Outline ready! You can now review the section structure, adjust headings, and confirm before generating content.';
     }
     
     // Content generation phase messages
@@ -163,7 +163,11 @@ export const OutlineProgressModal: React.FC<OutlineProgressModalProps> = ({
             }}>
               {titleOverride
                 ? (status === 'complete' ? '🎉 Content Ready!' : status === 'error' ? '❌ Generation Failed' : '📝 Generating Your Blog Content')
-                : (status === 'complete' ? '🎉 Outline Ready!' : status === 'error' ? '❌ Generation Failed' : '🧩 Creating Your Blog Outline')}
+                : (status === 'complete' 
+                    ? '🎉 Outline Ready! Review it, then proceed to the Content phase.'
+                    : status === 'error' 
+                      ? '❌ Outline Generation Failed — you can retry from the Outline chip.'
+                      : '🧩 Creating Your Blog Outline (20–40 seconds)')}
             </h2>
             
             {/* Progress Bar */}
@@ -196,10 +200,10 @@ export const OutlineProgressModal: React.FC<OutlineProgressModalProps> = ({
                       ? 'Content generation encountered an issue. You can retry from the content phase.'
                       : 'Alwrity is writing your blog content using AI...')
                 : (status === 'complete' 
-                    ? '✅ Your blog outline is ready! Review and confirm it, then proceed to generate content.'
+                    ? '✅ Your outline is ready! Review section headings and key points, then confirm to proceed to the Content phase.'
                     : status === 'error' 
-                      ? 'Outline generation encountered an issue. Please try again.'
-                      : 'Alwrity is analyzing your research and building your blog structure...')}
+                      ? 'Outline generation encountered an issue. Please try again from the Outline chip.'
+                      : 'Analyzing your research and building a structured outline. After this, you will confirm the outline, generate content for each section, then optimize for SEO.')}
             </p>
           </div>
         </div>

frontend/src/components/BlogWriter/PhaseNavigation.tsx

@@ -16,7 +16,9 @@ export interface Phase {
 
 export interface PhaseActionHandlers {
   onResearchAction?: () => void;
+  onResearchStartAction?: () => void;
   onOutlineAction?: () => void;
+  onOutlineStartAction?: () => void;
   onContentAction?: () => void;
   onSEOAction?: () => void;
   onApplySEORecommendations?: () => void;
@@ -29,6 +31,7 @@ interface PhaseNavigationProps {
   currentPhase: string;
   copilotKitAvailable?: boolean;
   actionHandlers?: PhaseActionHandlers;
+  researchKeywords?: string;
   hasResearch?: boolean;
   hasOutline?: boolean;
   outlineConfirmed?: boolean;
@@ -71,6 +74,7 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
   currentPhase,
   copilotKitAvailable = true,
   actionHandlers,
+  researchKeywords = '',
   hasResearch = false,
   hasOutline = false,
   outlineConfirmed = false,
@@ -91,13 +95,22 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
 
     switch (phaseId) {
       case 'research':
-        if (!hasResearch) {
-          return { label: 'Start Research', handler: actionHandlers.onResearchAction || null };
+        if (!hasResearch && !researchKeywords) {
+          return { label: 'Start Now', handler: actionHandlers.onResearchAction || null };
+        }
+        if (!hasResearch && researchKeywords) {
+          return { label: 'Click To Research', handler: actionHandlers.onResearchStartAction || null };
+        }
+        if (hasResearch) {
+          return { label: 'Re-Research', handler: actionHandlers.onResearchStartAction || null };
         }
         break;
       case 'outline':
-        if (hasResearch && !outlineConfirmed) {
-          return { label: 'Create Outline', handler: actionHandlers.onOutlineAction || null };
+        if (!hasOutline) {
+          return { label: 'Create Now', handler: actionHandlers.onOutlineAction || null };
+        }
+        if (hasOutline) {
+          return { label: 'Re-Generate', handler: actionHandlers.onOutlineStartAction || null };
         }
         break;
       case 'content':
@@ -181,10 +194,6 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
           const isDisabled = phase.disabled;
           const action = getActionForPhase(phase.id);
 
-          const isResearchPhase = phase.id === 'research' && action.handler;
-          const isOutlinePhase = phase.id === 'outline' && hasResearch && action.handler;
-          const isSEOPhase = phase.id === 'seo' && action.handler;
-
           /* Phase state derivation:
              - Active: phase is current AND not yet completed (user needs to work on it)
              - Done: phase is completed (show green regardless of whether it's current)
@@ -204,16 +213,9 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
             }
           };
 
-          /* Show action button only when phase is NOT completed.
-             Research action: only on landing page (not current), to invite start.
-             Other phase actions: show when current, pending, or next-actionable.
-             Content and SEO phases use only the chip (no separate action button). */
-          const showAction = action.handler && !isDone && phase.id !== 'content' && phase.id !== 'seo' && (
-            (!isCurrent && phase.id === 'research' && !hasResearch) ||
-            (isCurrent && phase.id !== 'research') ||
-            (!isCurrent && !isDisabled && phase.id !== 'research') ||
-            (phase.id !== 'research' && (isResearchPhase || isOutlinePhase || isSEOPhase))
-          );
+          /* No separate action buttons — every phase chip is self-contained.
+             Chip click directly triggers the action (create, run analysis, publish, etc.). */
+          const showAction = false;
 
           const iconOnly = isDone && !isCurrent;
 
@@ -334,7 +336,7 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
                 title={
                   <Box>
                     <Box sx={{ fontWeight: 700, mb: 0.5, fontSize: '0.875rem' }}>
-                      {phase.id === 'content' && hasContent ? 'Re-Content' : phase.id === 'seo' ? (hasSEOAnalysis ? 'Re-Analyze SEO' : 'SEO Analysis') : phase.name}
+                      {phase.id === 'research' && hasResearch ? 'Re-Research' : phase.id === 'research' && !hasResearch && researchKeywords ? 'Click To Research' : phase.id === 'research' && !hasResearch ? 'Start Now' : phase.id === 'outline' && hasOutline ? 'Re-Generate' : phase.id === 'outline' && !hasOutline ? 'Create Now' : phase.id === 'content' && hasContent ? 'Re-Content' : phase.id === 'seo' ? (hasSEOAnalysis ? 'Re-Analyze SEO' : 'SEO Analysis') : phase.name}
                     </Box>
                     <Box sx={{ fontSize: '0.75rem', opacity: 0.9 }}>
                       {isDisabled
@@ -358,7 +360,9 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
                   sx={chipSx}
                 >
                   <Box component="span" sx={iconSx}>{phase.icon}</Box>
-                  <Box component="span" sx={{ flexShrink: 0 }}>{phase.id === 'content' && hasContent ? 'Re-Content' : phase.id === 'seo' ? (hasSEOAnalysis ? 'Re-Analyze SEO' : 'SEO Analysis') : phase.name}</Box>
+                  <Box component="span" sx={{ flexShrink: 0 }}>
+                    {phase.id === 'research' && hasResearch ? 'Re-Research' : phase.id === 'research' && !hasResearch && researchKeywords ? 'Click To Research' : phase.id === 'research' && !hasResearch ? 'Start Now' : phase.id === 'outline' && hasOutline ? 'Re-Generate' : phase.id === 'outline' && !hasOutline ? 'Create Now' : phase.id === 'content' && hasContent ? 'Re-Content' : phase.id === 'seo' ? (hasSEOAnalysis ? 'Re-Analyze SEO' : 'SEO Analysis') : phase.name}
+                  </Box>
                   {isDone && (
                     <Box component="span" sx={{ fontSize: '12px', flexShrink: 0, ml: 0.25 }}>✓</Box>
                   )}

frontend/src/components/BlogWriter/ResearchAction.tsx

@@ -10,9 +10,10 @@ const useCopilotActionTyped = useCopilotAction as any;
 interface ResearchActionProps {
   onResearchComplete?: (research: BlogResearchResponse) => void;
   navigateToPhase?: (phase: string) => void;
+  researchRef?: React.MutableRefObject<((keywords: string, blogLength?: string) => Promise<any>) | null>;
 }
 
-export const ResearchAction: React.FC<ResearchActionProps> = ({ onResearchComplete, navigateToPhase }) => {
+export const ResearchAction: React.FC<ResearchActionProps> = ({ onResearchComplete, navigateToPhase, researchRef }) => {
   const [copilotKeywords, setCopilotKeywords] = useState('');
   const [copilotBlogLength, setCopilotBlogLength] = useState('1000');
   const hasNavigatedRef = useRef<boolean>(false);
@@ -30,6 +31,12 @@ export const ResearchAction: React.FC<ResearchActionProps> = ({ onResearchComple
     result,
   } = useResearchSubmit({ onResearchComplete, navigateToPhase });
 
+  // Expose startResearch to parent for header chip "Re-Research"
+  React.useEffect(() => {
+    if (researchRef) researchRef.current = startResearch;
+    return () => { if (researchRef) researchRef.current = null; };
+  }, [startResearch, researchRef]);
+
   // Close modal when research completes (status becomes a completed state or polling stops with a result)
   const COMPLETED_STATUSES = React.useMemo(
     () => new Set(['completed', 'success', 'succeeded', 'finished']),
@@ -141,21 +148,21 @@ export const ResearchAction: React.FC<ResearchActionProps> = ({ onResearchComple
               onKeywordsChange={setCopilotKeywords}
               disabled={isSubmitting}
             />
-            <button
-onClick={async () => {
-                   const kw = copilotKeywords.trim();
-                   const bl = copilotBlogLength;
-                   if (!kw) return;
-                   try {
-                     await startResearch(kw, bl);
-                   } catch (error) {
-                     console.error(`Research failed: ${error}`);
-                   }
-                 }}
+<button
+                  onClick={async () => {
+                    const kw = copilotKeywords.trim();
+                    const bl = copilotBlogLength;
+                    if (!kw) return;
+                    try {
+                      await startResearch(kw, bl);
+                    } catch (error) {
+                      console.error(`Research failed: ${error}`);
+                    }
+                  }}
                 disabled={isSubmitting}
               style={{ padding: '12px 24px', backgroundColor: isSubmitting ? '#ccc' : '#1976d2', color: 'white', border: 'none', borderRadius: '6px', fontSize: '14px', fontWeight: '500', cursor: isSubmitting ? 'not-allowed' : 'pointer' }}
             >
-              {isSubmitting ? '⏳ Starting Research...' : '🚀 Start Research'}
+              {isSubmitting ? '⏳ Researching...' : '🔍 Click To Research'}
             </button>
           </div>
         </div>

frontend/src/components/BlogWriter/ResearchProgressModal.tsx

@@ -77,25 +77,39 @@ const stageDefinitions = [
     keywords: ['cache', 'cached', 'stored']
   },
   {
-    id: 'discovery',
-    label: 'Source Discovery',
-    description: 'Exploring trusted sources across the web.',
-    icon: '🔎',
-    keywords: ['search', 'source', 'gather', 'google', 'discover']
+    id: 'validation',
+    label: 'Request Validation',
+    description: 'Verifying your topic and preparing the research pipeline.',
+    icon: '✅',
+    keywords: ['starting', 'launching', 'bootstrap', 'validat']
+  },
+  {
+    id: 'exa',
+    label: 'Deep Web Search (Exa)',
+    description: 'Searching academic databases, research papers, and structured content.',
+    icon: '🌐',
+    keywords: ['exa', 'neural search']
+  },
+  {
+    id: 'tavily',
+    label: 'AI Web Search (Tavily)',
+    description: 'Scanning news, blogs, and real-time web content.',
+    icon: '🔍',
+    keywords: ['tavily', 'ai search']
   },
   {
     id: 'analysis',
-    label: 'Insight Extraction',
-    description: 'Extracting data points, statistics, and quotes.',
+    label: 'Content Analysis',
+    description: 'Extracting key data points, statistics, and actionable insights.',
     icon: '🧠',
-    keywords: ['analysis', 'analyz', 'extract', 'insight', 'processing']
+    keywords: ['analyz', 'analyz', 'extract', 'insight', 'keywords', 'angles', 'filter']
   },
   {
     id: 'assembly',
-    label: 'Structuring Findings',
-    description: 'Packaging insights and preparing summaries.',
-    icon: '📝',
-    keywords: ['assembling', 'structuring', 'summary', 'completed', 'ready', 'post-processing']
+    label: 'Structuring Results',
+    description: 'Packaging findings into a ready-to-use research brief.',
+    icon: '📦',
+    keywords: ['caching', 'assembling', 'structuring', 'post-processing', 'completed', 'ready']
   }
 ] as const;
 
@@ -144,72 +158,205 @@ const friendlyMappings: Array<{
   tone: Tone;
   stage?: StageId;
 }> = [
+  // ── Cache stage ─────────────────────────────────────────────────
   {
-    keywords: ['checking cache', 'cache'],
-    title: 'Checking existing research cache',
-    subtitle: 'Looking for previously generated insights so we can respond instantly.',
+    keywords: ['checking cache', 'looking for saved'],
+    title: 'Checking for saved research results',
+    subtitle: 'If you have run this topic before, we skip straight to the cached results — saving 30–50 seconds.',
     icon: '🗂️',
     tone: 'info',
     stage: 'cache'
   },
   {
-    keywords: ['found cached research', 'loading cached'],
-    title: 'Loaded cached research results',
-    subtitle: 'Serving saved insights to keep things fast.',
+    keywords: ['found cached research', 'found cached', 'loading cached', 'returning instantly'],
+    title: 'Using cached research — no fresh search needed',
+    subtitle: 'Previous results loaded instantly. You can review them and proceed directly to the Outline phase.',
     icon: '⚡',
     tone: 'success',
     stage: 'cache'
   },
   {
-    keywords: ['starting research'],
-    title: 'Launching fresh research',
-    subtitle: 'Bootstrapping the workflow and validating your request.',
+    keywords: ['cache miss', 'no cached'],
+    title: 'No cached results found — starting fresh research',
+    subtitle: 'This will take 40–60 seconds as we search multiple sources, extract insights, and build your research brief.',
+    icon: '🔍',
+    tone: 'active',
+    stage: 'cache'
+  },
+
+  // ── Validation / Start stage ──────────────────────────────────
+  {
+    keywords: ['starting research', 'starting research operation', 'launching fresh'],
+    title: 'Launching research pipeline',
+    subtitle: 'We validate your topic, then fan out across multiple search engines (Exa, Tavily) to gather diverse perspectives. This runs in parallel so you get results faster.',
     icon: '🚀',
     tone: 'active',
-    stage: 'discovery'
+    stage: 'validation'
   },
   {
-    keywords: ['search', 'query', 'sources', 'web'],
-    title: 'Collecting authoritative sources',
-    subtitle: 'Evaluating top-ranked pages, studies, and reports.',
-    icon: '🔎',
+    keywords: ['user id is required', 'validation error'],
+    title: 'Validation check in progress',
+    subtitle: 'Ensuring your account and request parameters are properly configured before the search begins.',
+    icon: '🔐',
+    tone: 'info',
+    stage: 'validation'
+  },
+
+  // ── Exa neural search stage ──────────────────────────────────
+  {
+    keywords: ['connecting to exa', 'exa neural search'],
+    title: 'Connecting to deep-web search engine (Exa)',
+    subtitle: 'Exa searches academic databases, technical documentation, and structured content repositories. This is the most thorough search layer and typically takes 10–15 seconds.',
+    icon: '🌐',
     tone: 'active',
-    stage: 'discovery'
+    stage: 'exa'
   },
   {
-    keywords: ['extracting', 'analyzing', 'analysis', 'insight'],
-    title: 'Extracting key insights',
-    subtitle: 'Summarising statistics, trends, and quotes that matter.',
+    keywords: ['executing exa neural search', 'exa research'],
+    title: 'Running deep-web search via Exa AI',
+    subtitle: 'Exa scans millions of indexed pages for authoritative, high-signal content. Results feed into your research brief with source citations and relevance scores.',
+    icon: '🤖',
+    tone: 'active',
+    stage: 'exa'
+  },
+  {
+    keywords: ['exa research failed', 'exa research did not return'],
+    title: 'Exa search completed with limited results',
+    subtitle: 'This is normal for niche topics. We fall back to Tavily for broader web coverage. Your research will still be comprehensive.',
+    icon: '⚠️',
+    tone: 'warning',
+    stage: 'exa'
+  },
+
+  // ── Tavily AI search stage ────────────────────────────────────
+  {
+    keywords: ['connecting to tavily', 'tavily ai search'],
+    title: 'Connecting to real-time web search (Tavily)',
+    subtitle: 'Tavily searches news articles, blog posts, and current web content. It provides up-to-date information from a broader range of sources than traditional search.',
+    icon: '🔍',
+    tone: 'active',
+    stage: 'tavily'
+  },
+  {
+    keywords: ['executing tavily ai search', 'tavily research'],
+    title: 'Running real-time web search via Tavily AI',
+    subtitle: 'Tavily fetches and ranks results based on relevance, authority, and recency. Combined with Exa results, this gives you both depth and breadth of coverage.',
+    icon: '🤖',
+    tone: 'active',
+    stage: 'tavily'
+  },
+  {
+    keywords: ['tavily research failed', 'tavily api call limit'],
+    title: 'Tavily search hit a rate limit',
+    subtitle: 'We already have results from Exa. Continuing with what we have — your research will still contain valuable data.',
+    icon: '⚠️',
+    tone: 'warning',
+    stage: 'tavily'
+  },
+  {
+    keywords: ['tavily research did not return'],
+    title: 'Tavily returned minimal results for this topic',
+    subtitle: 'Combining available Exa and Tavily data to build a complete picture. Niche or emerging topics sometimes have sparse web coverage.',
+    icon: 'ℹ️',
+    tone: 'info',
+    stage: 'tavily'
+  },
+
+  // ── Analysis / Processing stage ───────────────────────────────
+  {
+    keywords: ['analyz', 'analyz', 'keywords and content angles'],
+    title: 'Analyzing keywords and content angles',
+    subtitle: 'We cross-reference your search results to identify the strongest angles, key statistics, trending subtopics, and gaps in existing coverage. This shapes the strategic direction of your blog.',
     icon: '🧠',
     tone: 'active',
     stage: 'analysis'
   },
   {
-    keywords: ['assembling', 'compiling', 'structuring', 'post-processing'],
-    title: 'Structuring the research package',
-    subtitle: 'Organising findings into ready-to-use sections.',
-    icon: '🧩',
+    keywords: ['filtering', 'cleaning research data'],
+    title: 'Filtering and ranking research data',
+    subtitle: 'Removing duplicates, low-authority sources, and irrelevant content. Every source gets a quality score so the Outline phase can prioritize the best material.',
+    icon: '🔬',
+    tone: 'active',
+    stage: 'analysis'
+  },
+  {
+    keywords: ['extracting', 'insight'],
+    title: 'Extracting key insights and statistics',
+    subtitle: 'Pulling out data points, quotes, statistics, and authoritative references. Your outline will use these to build credible, well-supported content.',
+    icon: '📊',
+    tone: 'active',
+    stage: 'analysis'
+  },
+
+  // ── Assembly / Caching stage ─────────────────────────────────
+  {
+    keywords: ['caching results', 'caching for future'],
+    title: 'Saving results to cache for next time',
+    subtitle: 'Your research is being cached so revisiting or regenerating this topic will be instant next time.',
+    icon: '💾',
     tone: 'info',
     stage: 'assembly'
   },
   {
-    keywords: ['completed successfully', 'research completed', 'ready'],
-    title: 'Research completed successfully',
-    subtitle: 'All insights are ready for the outline phase.',
+    keywords: ['post-processing', 'assembling', 'structuring'],
+    title: 'Assembling the final research brief',
+    subtitle: 'Organizing all findings into a structured brief with source mappings, competitor analysis, and suggested angles — ready for the Outline phase.',
+    icon: '🧩',
+    tone: 'info',
+    stage: 'assembly'
+  },
+
+  // ── Completion ────────────────────────────────────────────────
+  {
+    keywords: ['completed successfully', 'research completed', 'found', 'sources'],
+    title: 'Research complete! Ready for Outline phase.',
+    subtitle: 'Your research brief is ready. Next up: the Outline phase turns this research into a structured blog outline. Click the Outline chip or navigate to it to continue.',
     icon: '✅',
     tone: 'success',
     stage: 'assembly'
   },
   {
-    keywords: ['failed', 'error', 'limit exceeded'],
-    title: 'Research encountered an issue',
-    subtitle: 'Review the error message below and try again.',
+    keywords: ['subscription limit exceeded', '429'],
+    title: 'Search provider rate limit hit',
+    subtitle: 'One of our search providers is temporarily rate-limited. The system will retry automatically. If it persists, try again in a few minutes.',
+    icon: '⏳',
+    tone: 'warning'
+  },
+
+  // ── Errors ────────────────────────────────────────────────────
+  {
+    keywords: ['failed with error', 'research failed'],
+    title: 'Research encountered an error',
+    subtitle: 'Something went wrong during the research process. Review the error details below and try again. Common causes: network issues, API timeouts, or invalid keywords.',
+    icon: '❌',
+    tone: 'error'
+  },
+  {
+    keywords: ['failed', 'error', 'unknown status'],
+    title: 'Research operation reported an issue',
+    subtitle: 'The research pipeline encountered a problem. Please check the error details below and consider refining your keywords before trying again.',
     icon: '⚠️',
     tone: 'error'
   }
 ];
 
-const sanitizeTitle = (text: string) => text.replace(/^[^a-zA-Z0-9]+/, '').trim();
+const sanitizeTitle = (text: string) => {
+  // Strip leading emoji/whitespace, capitalize first letter
+  const cleaned = text.replace(/^[^\w\s]+/, '').trim();
+  if (!cleaned) return '';
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+};
+
+// Fallback icons based on message content
+const inferFallbackIcon = (text: string): string => {
+  const lower = text.toLowerCase();
+  if (/error|fail|timeout|limit/i.test(lower)) return '⚠️';
+  if (/done|complete|success|finish|ready/i.test(lower)) return '✅';
+  if (/fetch|load|retriev|download/i.test(lower)) return '📥';
+  if (/writ|generat|creat|build/i.test(lower)) return '✍️';
+  if (/check|validat|verif/i.test(lower)) return '🔍';
+  return '📝';
+};
 
 const mapMessageToMeta = (message: { timestamp: string; message: string }): MessageMeta => {
   const raw = message.message || '';
@@ -233,13 +380,15 @@ const mapMessageToMeta = (message: { timestamp: string; message: string }): Mess
   }
 
   const stage = inferStage(raw);
+  const fallbackTitle = sanitizeTitle(raw);
 
   return {
     timestamp: message.timestamp,
     timeLabel: formatTime(message.timestamp),
     raw,
-    title: sanitizeTitle(raw) || 'Update received',
-    icon: '📝',
+    title: fallbackTitle || 'Processing research data…',
+    subtitle: 'Your research is being assembled. This may take a moment as we process multiple data sources in parallel.',
+    icon: inferFallbackIcon(raw),
     tone: 'info',
     stage
   };
@@ -416,7 +565,10 @@ const ResearchProgressModal: React.FC<ResearchProgressModalProps> = ({
                 {title}
               </h3>
               <p style={{ margin: '8px 0 0 0', color: '#475569', fontSize: 14 }}>
-                We are gathering sources, extracting insights, and assembling a research brief tailored to your topic.
+                Research takes 40–60 seconds. We search multiple engines (Exa, Tavily), extract key insights, 
+                and assemble a structured research brief. After this, you will move to the <strong>Outline phase</strong> 
+                where AI generates a blog structure, then <strong>Content</strong> writes each section, followed by 
+                <strong> SEO</strong> optimization and <strong>Publish</strong>.
               </p>
               <div
                 style={{

frontend/src/components/BlogWriter/SEOMetadataModal.tsx

@@ -369,7 +369,7 @@ export const SEOMetadataModal: React.FC<SEOMetadataModalProps> = ({
 
   // Precompute hash when modal opens and trigger cache check
   useEffect(() => {
-    if (isOpen) {
+    if (isOpen && !contentHash) {
       (async () => {
         const h = await hashContent(`${blogTitle || ''}\n${blogContent}`);
         setContentHash(h);
@@ -381,18 +381,17 @@ export const SEOMetadataModal: React.FC<SEOMetadataModalProps> = ({
           }, 100);
         }
       })();
-    } else {
-      // Reset hash when modal closes
-      setContentHash('');
     }
-  }, [isOpen, blogContent, blogTitle, metadataResult, generateMetadata]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, blogContent, blogTitle]);
 
   // Fallback: if modal opens and hash is already computed, check cache immediately
   useEffect(() => {
     if (isOpen && !metadataResult && contentHash) {
       generateMetadata(false);
     }
-  }, [isOpen, metadataResult, contentHash, generateMetadata]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, contentHash]);
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
     setTabValue(newValue);

frontend/src/components/PodcastMaker/CreateStep/AvatarSelector.tsx

@@ -13,7 +13,6 @@ import {
 } from "@mui/icons-material";
 import { AvatarAssetBrowser } from "../AvatarAssetBrowser";
 import { CameraSelfie } from "../CameraSelfie";
-import { SecondaryButton } from "../ui";
 import { PodcastMode } from "../types";
 
 interface AvatarSelectorProps {
@@ -65,8 +64,8 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
 
   // Shorter tab labels for mobile
   const tabLabels = isMobile 
-    ? ["Brand", "Library", "Selfie", "Upload"]
-    : ["Use Brand Avatar", "Asset Library", "Take Selfie", "Upload Your Photo"];
+    ? ["Brand", "Library", "Selfie", avatarFile && avatarPreview ? "Uploaded" : "Upload"]
+    : ["Use Brand Avatar", "Asset Library", "Take Selfie", avatarFile && avatarPreview ? "Successfully Uploaded" : "Upload Your Photo"];
 
   if (podcastMode === "audio_only") {
     return (
@@ -538,7 +537,7 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
           {avatarTab === 3 && (
             <Stack spacing={2}>
               <Box>
-                {avatarFile && avatarPreview ? (
+                  {avatarFile && avatarPreview ? (
                   <Stack spacing={2} alignItems="center" sx={{ bgcolor: "#f8fafc", borderRadius: 2, p: { xs: 1.5, sm: 2 } }}>
                     <Box sx={{ position: "relative", display: "inline-block" }}>
                       <Box
@@ -550,8 +549,8 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
                           height: { xs: 120, sm: 160 },
                           objectFit: "cover",
                           borderRadius: 2.5,
-                          border: "2px solid #e2e8f0",
-                          boxShadow: "0 2px 8px rgba(15, 23, 42, 0.08)",
+                          border: "2px solid #667eea",
+                          boxShadow: "0 4px 12px rgba(102, 126, 234, 0.25)",
                         }}
                       />
                       <IconButton
@@ -574,6 +573,12 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
                         <DeleteIcon fontSize="small" />
                       </IconButton>
                     </Box>
+                    <Stack direction="row" alignItems="center" spacing={1}>
+                      <CheckCircleIcon color="primary" fontSize="small" />
+                      <Typography variant="body2" sx={{ color: "#475569", fontStyle: "italic" }}>
+                        Photo uploaded successfully
+                      </Typography>
+                    </Stack>
 
                     {avatarUrl && (
                       <Tooltip
@@ -582,15 +587,37 @@ export const AvatarSelector: React.FC<AvatarSelectorProps> = ({
                         placement="top"
                       >
                         <Box sx={{ width: "100%", maxWidth: { xs: 200, sm: 280 } }}>
-                          <SecondaryButton
+                          <Button
                             onClick={handleMakePresentable}
                             disabled={makingPresentable}
-                            loading={makingPresentable}
-                            startIcon={!makingPresentable ? <AutoAwesomeIcon fontSize="small" /> : undefined}
-                            sx={{ width: "100%" }}
+                            variant="contained"
+                            startIcon={!makingPresentable ? <AutoAwesomeIcon fontSize="small" /> : <CircularProgress size={14} thickness={5} sx={{ color: "rgba(255,255,255,0.92)" }} />}
+                            sx={{
+                              width: "100%",
+                              textTransform: "none",
+                              fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                              fontWeight: 600,
+                              borderRadius: 2.5,
+                              color: "#f8fbff",
+                              px: 1.8,
+                              border: "1px solid rgba(148, 211, 255, 0.6)",
+                              background: "linear-gradient(120deg, #0ea5e9 0%, #2563eb 55%, #1d4ed8 100%)",
+                              boxShadow: "0 8px 18px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255,255,255,0.22)",
+                              "&:hover": {
+                                background: "linear-gradient(120deg, #38bdf8 0%, #2563eb 50%, #1e40af 100%)",
+                                boxShadow: "0 12px 24px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255,255,255,0.26)",
+                                transform: "translateY(-1px)",
+                              },
+                              "&.Mui-disabled": {
+                                color: "#e2e8f0",
+                                borderColor: "rgba(186, 230, 253, 0.7)",
+                                background: "linear-gradient(120deg, #0ea5e9 0%, #2563eb 55%, #1d4ed8 100%)",
+                                opacity: 0.78,
+                              },
+                            }}
                           >
                             {makingPresentable ? "Transforming..." : "Make Presentable"}
-                          </SecondaryButton>
+                          </Button>
                         </Box>
                       </Tooltip>
                     )}

frontend/src/components/PodcastMaker/types.ts

@@ -6,6 +6,7 @@ export type Knobs = {
   is_voice_clone?: boolean;
   voice_sample_url?: string;
   voice_clone_engine?: string;
+  voice_clone_stale?: boolean;
   resolution: string;
   scene_length_target: number;
   sample_rate: number;

frontend/src/components/Pricing/PricingPage/PlanCard.tsx

@@ -652,36 +652,36 @@ const PlanCard: React.FC<PlanCardProps> = ({
             </Box>
           </ListItem>
 
-          {(plan.tier === 'basic' || plan.tier === 'pro' || plan.tier === 'enterprise') && (
-            <>
-              <ListItem>
-                <ListItemIcon sx={{ minWidth: 24 }}>
-                  <AudioIcon color="primary" fontSize="small" />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Audio Generation"
-                  secondary={
-                    plan.tier === 'basic'
-                      ? 'AI voice synthesis for podcasts, stories, and narration'
-                      : 'AI-powered audio content creation and voice synthesis'
-                  }
-                />
-              </ListItem>
+          {(plan.limits.audio_calls ?? 0) > 0 && (
+            <ListItem>
+              <ListItemIcon sx={{ minWidth: 24 }}>
+                <AudioIcon color="primary" fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Audio Generation"
+                secondary={
+                  plan.tier === 'basic'
+                    ? 'AI voice synthesis for podcasts, stories, and narration'
+                    : 'AI-powered audio content creation and voice synthesis'
+                }
+              />
+            </ListItem>
+          )}
 
-              <ListItem>
-                <ListItemIcon sx={{ minWidth: 24 }}>
-                  <VideoIcon color="primary" fontSize="small" />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Video Generation"
-                  secondary={
-                    plan.tier === 'basic'
-                      ? 'Create AI videos for YouTube, social media, and stories'
-                      : 'AI video creation with script writing and editing'
-                  }
-                />
-              </ListItem>
-            </>
+          {(plan.limits.video_calls ?? 0) > 0 && (
+            <ListItem>
+              <ListItemIcon sx={{ minWidth: 24 }}>
+                <VideoIcon color="primary" fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Video Generation"
+                secondary={
+                  plan.tier === 'basic'
+                    ? 'Create AI videos for YouTube, social media, and stories'
+                    : 'AI video creation with script writing and editing'
+                }
+              />
+            </ListItem>
           )}
 
           {plan.tier !== 'free' && (

frontend/src/components/SEODashboard/BacklinkOutreachModuleList.tsx

@@ -21,12 +21,12 @@ const BacklinkOutreachModuleList: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    fetchCampaigns('default', 'default').catch(() => {});
+    fetchCampaigns('default').catch(() => {});
   }, [fetchCampaigns]);
 
   const handleCreateCampaign = useCallback(async () => {
     if (!newCampaignName.trim()) return;
-    await createCampaign('default', 'default', newCampaignName.trim());
+    await createCampaign('default', newCampaignName.trim());
     setNewCampaignName('');
   }, [newCampaignName, createCampaign]);
 

frontend/src/components/SEODashboard/SEOAnalysisController.tsx

@@ -0,0 +1,580 @@
+/**
+ * SEO Analysis Controller Component
+ * Main component that orchestrates enterprise audit and GSC analysis
+ * with LLM insights generation and traffic improvement strategies
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Container,
+  Typography,
+  Button,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  CircularProgress,
+  Alert,
+  Stepper,
+  Step,
+  StepLabel,
+  Card,
+  CardContent,
+  Grid,
+  Tab,
+  Tabs,
+  Paper,
+  Chip,
+  Stack,
+  LinearProgress,
+} from '@mui/material';
+import {
+  PlayArrow as PlayArrowIcon,
+  Refresh as RefreshIcon,
+  Settings as SettingsIcon,
+  Assessment as AssessmentIcon,
+  AutoAwesome as AutoAwesomeIcon,
+  TrendingUp as TrendingUpIcon,
+  Download as DownloadIcon,
+} from '@mui/icons-material';
+import { motion, AnimatePresence } from 'framer-motion';
+import { enterpriseSeoAPI, EnterpriseAuditResult, GSCAnalysisResult } from '../../api/enterpriseSeoApi';
+import { llmInsightsGenerator } from '../../api/llmInsightsGenerator';
+import { EnterpriseAuditResults } from './components/EnterpriseAuditResults';
+import { GSCAnalysisResults } from './components/GSCAnalysisResults';
+import { ActionableInsightsDisplay } from './components/ActionableInsightsDisplay';
+
+interface AnalysisStep {
+  label: string;
+  description: string;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index } = props;
+  return (
+    <div hidden={value !== index} style={{ width: '100%' }}>
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const analysisSteps: AnalysisStep[] = [
+  { label: 'Website Input', description: 'Enter your website URL' },
+  { label: 'Enterprise Audit', description: 'Comprehensive SEO audit' },
+  { label: 'GSC Analysis', description: 'Search performance analysis' },
+  { label: 'Insights', description: 'AI-powered recommendations' },
+  { label: 'Review', description: 'Review results and strategy' },
+];
+
+export const SEOAnalysisController: React.FC = () => {
+  // UI State
+  const [activeStep, setActiveStep] = useState(0);
+  const [tabValue, setTabValue] = useState(0);
+  const [websiteUrl, setWebsiteUrl] = useState('');
+  const [competitors, setCompetitors] = useState<string[]>([]);
+  const [targetKeywords, setTargetKeywords] = useState<string[]>([]);
+
+  // Analysis State
+  const [auditResult, setAuditResult] = useState<EnterpriseAuditResult | null>(null);
+  const [gscResult, setGscResult] = useState<GSCAnalysisResult | null>(null);
+  const [insights, setInsights] = useState<any[]>([]);
+
+  // Loading & Error State
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+
+  // Dialog State
+  const [openOptionsDialog, setOpenOptionsDialog] = useState(false);
+  const [options, setOptions] = useState({
+    includeContentAnalysis: true,
+    includeCompetitiveAnalysis: true,
+    generateExecutiveReport: true,
+    dateRangeDays: 90,
+  });
+
+  // Validation
+  const isUrlValid = websiteUrl && websiteUrl.startsWith('http');
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  /**
+   * Execute enterprise audit
+   */
+  const handleStartAudit = async () => {
+    if (!isUrlValid) {
+      setError('Please enter a valid website URL starting with http:// or https://');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setProgress(20);
+    setActiveStep(1);
+
+    try {
+      // Execute enterprise audit
+      console.log('Starting enterprise audit for', websiteUrl);
+      const auditResponse = await enterpriseSeoAPI.executeEnterpriseAudit(websiteUrl, {
+        competitors: competitors.filter(c => c.trim()),
+        targetKeywords: targetKeywords.filter(k => k.trim()),
+        includeContentAnalysis: options.includeContentAnalysis,
+        includeCompetitiveAnalysis: options.includeCompetitiveAnalysis,
+        generateExecutiveReport: options.generateExecutiveReport,
+      });
+
+      if (!auditResponse.success) {
+        throw new Error(auditResponse.message || 'Audit failed');
+      }
+
+      setAuditResult(auditResponse.data);
+      setProgress(50);
+      setActiveStep(2);
+
+      // Execute GSC analysis
+      console.log('Starting GSC analysis for', websiteUrl);
+      const gscResponse = await enterpriseSeoAPI.analyzeGSCSearchPerformance(websiteUrl, {
+        dateRangeDays: options.dateRangeDays,
+        includeOpportunities: true,
+        includeCompetitive: true,
+      });
+
+      if (!gscResponse.success) {
+        throw new Error(gscResponse.message || 'GSC analysis failed');
+      }
+
+      setGscResult(gscResponse.data);
+      setProgress(75);
+      setActiveStep(3);
+
+      // Skip insights generation for now - user can generate manually
+      setProgress(100);
+      setActiveStep(4);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'An error occurred';
+      console.error('Analysis error:', err);
+      setError(errorMsg);
+      setActiveStep(activeStep);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Generate AI-powered insights
+   */
+  const handleGenerateInsights = async () => {
+    if (!auditResult && !gscResult) {
+      setError('No analysis results available');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      let insightResults = [];
+
+      if (auditResult) {
+        const auditInsights = await llmInsightsGenerator.generateEnterpriseAuditInsights(
+          auditResult,
+          { currentMonthlyTraffic: 1000 } // TODO: Get from user
+        );
+        insightResults.push(...auditInsights.insights);
+      }
+
+      if (gscResult) {
+        const gscInsights = await llmInsightsGenerator.generateGSCAnalysisInsights(
+          gscResult,
+          { currentMonthlyTraffic: 1000 } // TODO: Get from user
+        );
+        insightResults.push(...gscInsights.insights);
+      }
+
+      setInsights(insightResults);
+      setActiveStep(4);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Failed to generate insights';
+      console.error('Insights generation error:', err);
+      setError(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Download report
+   */
+  const handleDownloadReport = () => {
+    const reportData = {
+      website: websiteUrl,
+      timestamp: new Date().toISOString(),
+      audit: auditResult,
+      gscAnalysis: gscResult,
+      insights: insights,
+    };
+
+    const dataStr = JSON.stringify(reportData, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `seo-analysis-${new Date().getTime()}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  /**
+   * Reset analysis
+   */
+  const handleReset = () => {
+    setWebsiteUrl('');
+    setCompetitors([]);
+    setTargetKeywords([]);
+    setAuditResult(null);
+    setGscResult(null);
+    setInsights([]);
+    setError(null);
+    setProgress(0);
+    setActiveStep(0);
+    setTabValue(0);
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+        {/* Header */}
+        <Box sx={{ mb: 4 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+            <AssessmentIcon sx={{ fontSize: 32 }} color="primary" />
+            <Typography variant="h4" sx={{ fontWeight: 600 }}>
+              Enterprise SEO Analysis
+            </Typography>
+          </Box>
+          <Typography variant="body2" color="textSecondary">
+            Comprehensive audit with AI-powered insights to improve organic traffic and rankings
+          </Typography>
+        </Box>
+
+        {/* Progress Indicator */}
+        {loading && (
+          <Card sx={{ mb: 3, bgcolor: 'info.lighter' }}>
+            <CardContent>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
+                <CircularProgress size={24} />
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {activeStep === 1 && 'Running enterprise audit...'}
+                  {activeStep === 2 && 'Analyzing search performance...'}
+                  {activeStep === 3 && 'Generating insights...'}
+                </Typography>
+              </Box>
+              <LinearProgress variant="determinate" value={progress} />
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Error Display */}
+        <AnimatePresence>
+          {error && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+              <Alert
+                severity="error"
+                onClose={() => setError(null)}
+                sx={{ mb: 3 }}
+                action={
+                  <Button color="inherit" size="small" onClick={() => setError(null)}>
+                    DISMISS
+                  </Button>
+                }
+              >
+                {error}
+              </Alert>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Stepper */}
+        <Paper sx={{ mb: 4, p: 2 }}>
+          <Stepper activeStep={activeStep} alternativeLabel>
+            {analysisSteps.map((step, index) => (
+              <Step key={index}>
+                <StepLabel>{step.label}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+        </Paper>
+
+        {/* Main Content */}
+        <Grid container spacing={3}>
+          {/* Left Panel: Input & Controls */}
+          <Grid item xs={12} md={3}>
+            <Card>
+              <CardContent>
+                <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                  Analysis Configuration
+                </Typography>
+
+                {/* URL Input */}
+                <TextField
+                  fullWidth
+                  label="Website URL"
+                  placeholder="https://example.com"
+                  value={websiteUrl}
+                  onChange={(e) => setWebsiteUrl(e.target.value)}
+                  size="small"
+                  sx={{ mb: 2 }}
+                  disabled={loading}
+                  helperText="Include http:// or https://"
+                />
+
+                {/* Competitors Input */}
+                <TextField
+                  fullWidth
+                  label="Competitor URLs (comma-separated)"
+                  placeholder="https://competitor1.com, https://competitor2.com"
+                  multiline
+                  rows={2}
+                  value={competitors.join(', ')}
+                  onChange={(e) => setCompetitors(e.target.value.split(',').map(c => c.trim()))}
+                  size="small"
+                  sx={{ mb: 2 }}
+                  disabled={loading}
+                />
+
+                {/* Keywords Input */}
+                <TextField
+                  fullWidth
+                  label="Target Keywords (comma-separated)"
+                  placeholder="keyword1, keyword2, keyword3"
+                  multiline
+                  rows={2}
+                  value={targetKeywords.join(', ')}
+                  onChange={(e) => setTargetKeywords(e.target.value.split(',').map(k => k.trim()))}
+                  size="small"
+                  sx={{ mb: 3 }}
+                  disabled={loading}
+                />
+
+                {/* Control Buttons */}
+                <Stack spacing={1}>
+                  <Button
+                    fullWidth
+                    variant="contained"
+                    startIcon={<PlayArrowIcon />}
+                    onClick={handleStartAudit}
+                    disabled={!isUrlValid || loading}
+                  >
+                    {loading ? 'Running...' : 'Start Analysis'}
+                  </Button>
+
+                  <Button
+                    fullWidth
+                    variant="outlined"
+                    startIcon={<SettingsIcon />}
+                    onClick={() => setOpenOptionsDialog(true)}
+                    disabled={loading}
+                  >
+                    Analysis Options
+                  </Button>
+
+                  {(auditResult || gscResult) && (
+                    <>
+                      <Button
+                        fullWidth
+                        variant="outlined"
+                        startIcon={<AutoAwesomeIcon />}
+                        onClick={handleGenerateInsights}
+                        disabled={loading}
+                      >
+                        Generate Insights
+                      </Button>
+
+                      <Button
+                        fullWidth
+                        variant="outlined"
+                        startIcon={<DownloadIcon />}
+                        onClick={handleDownloadReport}
+                        disabled={loading}
+                      >
+                        Download Report
+                      </Button>
+
+                      <Button
+                        fullWidth
+                        variant="outlined"
+                        color="secondary"
+                        startIcon={<RefreshIcon />}
+                        onClick={handleReset}
+                        disabled={loading}
+                      >
+                        New Analysis
+                      </Button>
+                    </>
+                  )}
+                </Stack>
+
+                {/* Quick Stats */}
+                {(auditResult || gscResult) && (
+                  <Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'divider' }}>
+                    <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                      Quick Stats
+                    </Typography>
+                    <Stack spacing={1}>
+                      {auditResult && (
+                        <Chip
+                          icon={<AssessmentIcon />}
+                          label={`Audit Score: ${auditResult.executive_summary.overall_score}`}
+                          variant="outlined"
+                          size="small"
+                        />
+                      )}
+                      {gscResult && (
+                        <Chip
+                          icon={<TrendingUpIcon />}
+                          label={`Clicks: ${gscResult.performance_overview.clicks.toLocaleString()}`}
+                          variant="outlined"
+                          size="small"
+                        />
+                      )}
+                      {insights.length > 0 && (
+                        <Chip
+                          icon={<AutoAwesomeIcon />}
+                          label={`${insights.length} Insights Generated`}
+                          variant="outlined"
+                          size="small"
+                          color="success"
+                        />
+                      )}
+                    </Stack>
+                  </Box>
+                )}
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* Right Panel: Results */}
+          <Grid item xs={12} md={9}>
+            {!auditResult && !gscResult ? (
+              <Card sx={{ textAlign: 'center', py: 8 }}>
+                <CardContent>
+                  <AssessmentIcon sx={{ fontSize: 64, color: 'action.disabled', mb: 2 }} />
+                  <Typography variant="h6" color="textSecondary">
+                    No analysis yet
+                  </Typography>
+                  <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+                    Enter a website URL and click "Start Analysis" to begin
+                  </Typography>
+                </CardContent>
+              </Card>
+            ) : (
+              <Box>
+                {/* Tabs */}
+                <Paper sx={{ mb: 2 }}>
+                  <Tabs value={tabValue} onChange={handleTabChange}>
+                    {auditResult && <Tab label="Enterprise Audit" />}
+                    {gscResult && <Tab label="GSC Analysis" />}
+                    {insights.length > 0 && <Tab label="AI Insights" />}
+                  </Tabs>
+                </Paper>
+
+                {/* Tab Content */}
+                <TabPanel value={tabValue} index={0}>
+                  {auditResult && (
+                    <EnterpriseAuditResults
+                      auditResult={auditResult}
+                      insights={insights}
+                      onGenerateInsights={handleGenerateInsights}
+                      onDownloadReport={handleDownloadReport}
+                    />
+                  )}
+                </TabPanel>
+
+                {auditResult && gscResult && (
+                  <TabPanel value={tabValue} index={1}>
+                    {gscResult && (
+                      <GSCAnalysisResults
+                        analysisResult={gscResult}
+                        insights={insights}
+                        onGenerateInsights={handleGenerateInsights}
+                        onDownloadReport={handleDownloadReport}
+                      />
+                    )}
+                  </TabPanel>
+                )}
+
+                {!auditResult && gscResult && (
+                  <TabPanel value={tabValue} index={0}>
+                    {gscResult && (
+                      <GSCAnalysisResults
+                        analysisResult={gscResult}
+                        insights={insights}
+                        onGenerateInsights={handleGenerateInsights}
+                        onDownloadReport={handleDownloadReport}
+                      />
+                    )}
+                  </TabPanel>
+                )}
+              </Box>
+            )}
+          </Grid>
+        </Grid>
+      </motion.div>
+
+      {/* Options Dialog */}
+      <Dialog open={openOptionsDialog} onClose={() => setOpenOptionsDialog(false)} maxWidth="sm" fullWidth>
+        <DialogTitle>Analysis Options</DialogTitle>
+        <DialogContent sx={{ py: 2 }}>
+          <Stack spacing={2} sx={{ mt: 1 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Typography variant="body2">Include Content Analysis</Typography>
+              <input
+                type="checkbox"
+                checked={options.includeContentAnalysis}
+                onChange={(e) => setOptions({ ...options, includeContentAnalysis: e.target.checked })}
+              />
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Typography variant="body2">Include Competitive Analysis</Typography>
+              <input
+                type="checkbox"
+                checked={options.includeCompetitiveAnalysis}
+                onChange={(e) => setOptions({ ...options, includeCompetitiveAnalysis: e.target.checked })}
+              />
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Typography variant="body2">Generate Executive Report</Typography>
+              <input
+                type="checkbox"
+                checked={options.generateExecutiveReport}
+                onChange={(e) => setOptions({ ...options, generateExecutiveReport: e.target.checked })}
+              />
+            </Box>
+            <TextField
+              label="GSC Analysis Period (days)"
+              type="number"
+              value={options.dateRangeDays}
+              onChange={(e) => setOptions({ ...options, dateRangeDays: parseInt(e.target.value) })}
+              inputProps={{ min: 7, max: 365 }}
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenOptionsDialog(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default SEOAnalysisController;

frontend/src/components/SEODashboard/SEODashboard.tsx

@@ -32,8 +32,10 @@ import {
   Schedule as ScheduleIcon,
   Info as InfoIcon,
   ExpandMore as ExpandMoreIcon,
-  AutoAwesome as AIIcon
+  AutoAwesome as AIIcon,
+  Tab as TabIcon,
 } from '@mui/icons-material';
+import { Tabs, Tab as MuiTab } from '@mui/material';
 
 // Shared components
 import { DashboardContainer, GlassCard } from '../shared/styled';
@@ -67,6 +69,9 @@ import { AdvertoolsInsights } from './components/AdvertoolsInsights';
 import SemanticHealthCard from './components/SemanticHealthCard';
 import SemanticInsights from './components/SemanticInsights';
 
+// Phase 2A: Enterprise SEO Analysis
+import SEOAnalysisController from './SEOAnalysisController';
+
 const SEODashboard: React.FC = () => {
   // Clerk authentication hooks
   const { isSignedIn, isLoaded } = useAuth();
@@ -110,6 +115,9 @@ const SEODashboard: React.FC = () => {
   const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null);
   const [statusMenuAnchor, setStatusMenuAnchor] = useState<null | HTMLElement>(null);
   
+  // Dashboard Tab State for Enterprise Analysis
+  const [dashboardTab, setDashboardTab] = useState<number>(0);
+  
   // Competitor analysis data from onboarding step 3
   const [competitorAnalysisData, setCompetitorAnalysisData] = useState<any>(null);
   const [deepCompetitorAnalysisData, setDeepCompetitorAnalysisData] = useState<any>(null);
@@ -779,6 +787,40 @@ const SEODashboard: React.FC = () => {
 
               {/* CopilotKit Test Panel removed */}
 
+              {/* Dashboard Tabs */}
+              <Box sx={{ mb: 4, display: 'flex', gap: 1, borderBottom: '1px solid rgba(255, 255, 255, 0.1)', pb: 1 }}>
+                <Button
+                  variant={dashboardTab === 0 ? 'contained' : 'text'}
+                  onClick={() => setDashboardTab(0)}
+                  sx={{
+                    color: dashboardTab === 0 ? 'white' : 'rgba(255, 255, 255, 0.7)',
+                    bgcolor: dashboardTab === 0 ? 'rgba(33, 150, 243, 0.3)' : 'transparent',
+                    borderBottom: dashboardTab === 0 ? '2px solid #2196F3' : 'none',
+                    borderRadius: 0,
+                    '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.05)' }
+                  }}
+                >
+                  📊 Overview
+                </Button>
+                <Button
+                  variant={dashboardTab === 1 ? 'contained' : 'text'}
+                  onClick={() => setDashboardTab(1)}
+                  sx={{
+                    color: dashboardTab === 1 ? 'white' : 'rgba(255, 255, 255, 0.7)',
+                    bgcolor: dashboardTab === 1 ? 'rgba(33, 150, 243, 0.3)' : 'transparent',
+                    borderBottom: dashboardTab === 1 ? '2px solid #2196F3' : 'none',
+                    borderRadius: 0,
+                    '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.05)' }
+                  }}
+                >
+                  🔍 Enterprise Analysis
+                </Button>
+              </Box>
+
+              {/* Tab Content: Overview */}
+              {dashboardTab === 0 && (
+              <>
+
               {/* Search Performance Overview */}
               <Box sx={{ mb: 4 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
@@ -1535,6 +1577,13 @@ const SEODashboard: React.FC = () => {
               
               {/* SEO Copilot Component for data loading and error handling */}
               <SEOCopilot />
+              </>
+              )}
+
+              {/* Tab Content: Enterprise Analysis */}
+              {dashboardTab === 1 && (
+                <SEOAnalysisController />
+              )}
             </motion.div>
           </AnimatePresence>
         </Container>

frontend/src/components/SEODashboard/components/ActionableInsightsDisplay.tsx

@@ -0,0 +1,519 @@
+/**
+ * Actionable Insights & Recommendations Display Component
+ * Shows AI-powered, traffic-focused insights with implementation steps
+ */
+
+import React, { useState } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  CardActions,
+  Typography,
+  Chip,
+  Button,
+  Stack,
+  Grid,
+  LinearProgress,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Alert,
+  Badge,
+  Tooltip,
+  IconButton,
+  Divider,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import {
+  ExpandMore as ExpandMoreIcon,
+  TrendingUp as TrendingUpIcon,
+  Lightbulb as LightbulbIcon,
+  CheckCircle as CheckCircleIcon,
+  Schedule as ScheduleIcon,
+  Flag as FlagIcon,
+  BookmarkAdd as BookmarkAddIcon,
+  Share as ShareIcon,
+  OpenInNew as OpenInNewIcon,
+  ArrowRight as ArrowRightIcon,
+} from '@mui/icons-material';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ActionableInsight, TrafficImprovementStrategy } from '../../../api/llmInsightsGenerator';
+
+interface ActionableInsightsDisplayProps {
+  insights: ActionableInsight[];
+  strategies?: TrafficImprovementStrategy[];
+  onSaveInsight?: (insight: ActionableInsight) => void;
+  onShareInsight?: (insight: ActionableInsight) => void;
+  loading?: boolean;
+  empty?: boolean;
+}
+
+const getEffortColor = (effort: 'easy' | 'medium' | 'complex'): string => {
+  const colors: Record<string, string> = {
+    easy: '#4caf50',
+    medium: '#ff9800',
+    complex: '#f44336',
+  };
+  return colors[effort];
+};
+
+const getEffortLabel = (effort: 'easy' | 'medium' | 'complex'): string => {
+  const labels: Record<string, string> = {
+    easy: 'Easy',
+    medium: 'Medium',
+    complex: 'Complex',
+  };
+  return labels[effort];
+};
+
+const getImpactColor = (impact: 'high' | 'medium' | 'low'): string => {
+  const colors: Record<string, string> = {
+    high: '#d32f2f',
+    medium: '#f57c00',
+    low: '#388e3c',
+  };
+  return colors[impact];
+};
+
+export const ActionableInsightsDisplay: React.FC<ActionableInsightsDisplayProps> = ({
+  insights,
+  strategies,
+  onSaveInsight,
+  onShareInsight,
+  loading = false,
+  empty = false,
+}) => {
+  const [savedInsights, setSavedInsights] = useState<Set<string>>(new Set());
+  const [expandedInsight, setExpandedInsight] = useState<string | null>(null);
+  const [filterImpact, setFilterImpact] = useState<'all' | 'high' | 'medium' | 'low'>('all');
+  const [filterEffort, setFilterEffort] = useState<'all' | 'easy' | 'medium' | 'complex'>('all');
+
+  const handleSaveInsight = (insight: ActionableInsight) => {
+    const id = `${insight.title}-${insight.priority}`;
+    setSavedInsights(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+    onSaveInsight?.(insight);
+  };
+
+  const handleShareInsight = (insight: ActionableInsight) => {
+    const text = `🎯 ${insight.title}\n\n📊 Impact: ${insight.impact}\n⚙️ Effort: ${insight.effort}\n⏱️ Time: ${insight.timeToImplement}\n\n💡 ${insight.description}`;
+    if (navigator.share) {
+      navigator.share({
+        title: 'SEO Insight',
+        text,
+      });
+    } else {
+      // Fallback: copy to clipboard
+      navigator.clipboard.writeText(text);
+    }
+    onShareInsight?.(insight);
+  };
+
+  const filteredInsights = insights.filter(insight => {
+    if (filterImpact !== 'all' && insight.impact !== filterImpact) return false;
+    if (filterEffort !== 'all' && insight.effort !== filterEffort) return false;
+    return true;
+  });
+
+  // Sort by priority (highest first)
+  const sortedInsights = [...filteredInsights].sort((a, b) => b.priority - a.priority);
+
+  if (loading) {
+    return (
+      <Box sx={{ py: 4, textAlign: 'center' }}>
+        <Typography variant="body2" color="textSecondary">
+          Generating insights...
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (empty || insights.length === 0) {
+    return (
+      <Alert severity="info">
+        No insights generated yet. Run an audit or analysis to get personalized recommendations.
+      </Alert>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Box sx={{ py: 3 }}>
+        {/* Header */}
+        <Box sx={{ mb: 4 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+            <LightbulbIcon sx={{ fontSize: 32, color: '#fbc02d' }} />
+            <Typography variant="h5" sx={{ fontWeight: 600 }}>
+              Actionable Insights & Recommendations
+            </Typography>
+            <Badge
+              badgeContent={filteredInsights.length}
+              color="primary"
+              sx={{ ml: 'auto' }}
+            />
+          </Box>
+          <Typography variant="body2" color="textSecondary">
+            {sortedInsights.length} prioritized recommendations to improve your organic traffic
+          </Typography>
+        </Box>
+
+        {/* Traffic Impact Summary */}
+        <Card sx={{ mb: 4, bgcolor: 'success.lighter', border: '1px solid rgba(76, 175, 80, 0.3)' }}>
+          <CardContent>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <Box>
+                  <Typography variant="body2" color="textSecondary" sx={{ mb: 0.5 }}>
+                    Estimated Total Traffic Gain
+                  </Typography>
+                  <Typography variant="h4" sx={{ color: '#4caf50', fontWeight: 600 }}>
+                    +{sortedInsights.reduce((sum, i) => sum + i.estimatedTrafficGain, 0).toLocaleString()} visits/month
+                  </Typography>
+                </Box>
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <Box>
+                  <Typography variant="body2" color="textSecondary" sx={{ mb: 0.5 }}>
+                    Quick Wins Available
+                  </Typography>
+                  <Typography variant="h4" sx={{ color: '#2196f3', fontWeight: 600 }}>
+                    {sortedInsights.filter(i => i.effort === 'easy').length} easy implementations
+                  </Typography>
+                </Box>
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Card>
+
+        {/* Filters */}
+        <Box sx={{ mb: 3, display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+            Filter by:
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+            <Chip
+              label="All"
+              size="small"
+              variant={filterImpact === 'all' && filterEffort === 'all' ? 'filled' : 'outlined'}
+              onClick={() => {
+                setFilterImpact('all');
+                setFilterEffort('all');
+              }}
+            />
+            <Chip
+              label="High Impact"
+              size="small"
+              variant={filterImpact === 'high' ? 'filled' : 'outlined'}
+              color={filterImpact === 'high' ? 'error' : 'default'}
+              onClick={() => setFilterImpact('high')}
+            />
+            <Chip
+              label="Easy to Implement"
+              size="small"
+              variant={filterEffort === 'easy' ? 'filled' : 'outlined'}
+              color={filterEffort === 'easy' ? 'success' : 'default'}
+              onClick={() => setFilterEffort('easy')}
+            />
+            <Chip
+              label="Quick Wins"
+              size="small"
+              variant={filterImpact === 'high' && filterEffort === 'easy' ? 'filled' : 'outlined'}
+              color={filterImpact === 'high' && filterEffort === 'easy' ? 'primary' : 'default'}
+              onClick={() => {
+                setFilterImpact('high');
+                setFilterEffort('easy');
+              }}
+            />
+          </Box>
+        </Box>
+
+        {/* Insights Grid */}
+        <Grid container spacing={2} sx={{ mb: 4 }}>
+          <AnimatePresence>
+            {sortedInsights.map((insight, idx) => {
+              const insightId = `${insight.title}-${insight.priority}`;
+              const isSaved = savedInsights.has(insightId);
+              const effortScore = (insight.effort === 'easy' ? 30 : insight.effort === 'medium' ? 60 : 90);
+              const impactScore = insight.priority * 10; // priority is 1-10
+
+              return (
+                <Grid item xs={12} md={6} key={idx}>
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    transition={{ delay: idx * 0.05 }}
+                  >
+                    <Card
+                      sx={{
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        border: `2px solid ${getImpactColor(insight.impact)}`,
+                        bgcolor: insight.impact === 'high' ? 'error.lighter' : 'background.paper',
+                        transition: 'all 0.3s ease',
+                        '&:hover': {
+                          boxShadow: 3,
+                          transform: 'translateY(-2px)',
+                        },
+                      }}
+                    >
+                      <CardContent sx={{ flexGrow: 1 }}>
+                        {/* Header */}
+                        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 2 }}>
+                          <Box sx={{ flex: 1 }}>
+                            <Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
+                              {insight.title}
+                            </Typography>
+                            <Typography variant="body2" color="textSecondary">
+                              {insight.description}
+                            </Typography>
+                          </Box>
+                          <Tooltip title={isSaved ? 'Remove bookmark' : 'Save insight'}>
+                            <IconButton
+                              size="small"
+                              onClick={() => handleSaveInsight(insight)}
+                              sx={{
+                                color: isSaved ? '#fbc02d' : 'action.disabled',
+                              }}
+                            >
+                              <BookmarkAddIcon />
+                            </IconButton>
+                          </Tooltip>
+                        </Box>
+
+                        {/* Metrics */}
+                        <Grid container spacing={1} sx={{ mb: 2 }}>
+                          <Grid item xs={6}>
+                            <Box>
+                              <Typography variant="caption" color="textSecondary">
+                                Impact
+                              </Typography>
+                              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
+                                <TrendingUpIcon
+                                  sx={{
+                                    fontSize: 16,
+                                    color: getImpactColor(insight.impact),
+                                  }}
+                                />
+                                <Chip
+                                  label={insight.impact.toUpperCase()}
+                                  size="small"
+                                  sx={{
+                                    bgcolor: getImpactColor(insight.impact),
+                                    color: 'white',
+                                  }}
+                                />
+                              </Box>
+                            </Box>
+                          </Grid>
+                          <Grid item xs={6}>
+                            <Box>
+                              <Typography variant="caption" color="textSecondary">
+                                Effort
+                              </Typography>
+                              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
+                                <Chip
+                                  label={getEffortLabel(insight.effort)}
+                                  size="small"
+                                  sx={{
+                                    bgcolor: getEffortColor(insight.effort),
+                                    color: 'white',
+                                  }}
+                                />
+                              </Box>
+                            </Box>
+                          </Grid>
+                        </Grid>
+
+                        {/* Traffic Gain */}
+                        <Box sx={{ mb: 2, p: 1.5, bgcolor: 'success.lighter', borderRadius: 1 }}>
+                          <Typography variant="caption" color="textSecondary" display="block">
+                            Estimated Monthly Traffic Gain
+                          </Typography>
+                          <Typography variant="h6" sx={{ color: '#4caf50', fontWeight: 600 }}>
+                            +{insight.estimatedTrafficGain.toLocaleString()} visits/month
+                          </Typography>
+                        </Box>
+
+                        {/* Time to Implement */}
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                          <ScheduleIcon sx={{ fontSize: 18, color: 'action.disabled' }} />
+                          <Typography variant="body2">
+                            <strong>Implementation:</strong> {insight.timeToImplement}
+                          </Typography>
+                        </Box>
+
+                        {/* Implementation Steps (Expandable) */}
+                        <Accordion
+                          onChange={() =>
+                            setExpandedInsight(
+                              expandedInsight === insightId ? null : insightId
+                            )
+                          }
+                          sx={{
+                            boxShadow: 'none',
+                            border: '1px solid',
+                            borderColor: 'divider',
+                            bgcolor: 'transparent',
+                          }}
+                        >
+                          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                            <FlagIcon sx={{ mr: 1, fontSize: 18 }} />
+                            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                              Implementation Steps
+                            </Typography>
+                          </AccordionSummary>
+                          <AccordionDetails>
+                            <List sx={{ py: 0 }}>
+                              {insight.steps.map((step: string, stepIdx: number) => (
+                                <ListItem key={stepIdx} sx={{ py: 1, px: 0 }}>
+                                  <ListItemIcon sx={{ minWidth: 32 }}>
+                                    <CheckCircleIcon
+                                      sx={{ fontSize: 18, color: '#4caf50' }}
+                                    />
+                                  </ListItemIcon>
+                                  <ListItemText
+                                    primary={step}
+                                    primaryTypographyProps={{ variant: 'body2' }}
+                                  />
+                                </ListItem>
+                              ))}
+                            </List>
+                          </AccordionDetails>
+                        </Accordion>
+
+                        {/* Tools/Resources */}
+                        {insight.tools && insight.tools.length > 0 && (
+                          <Box sx={{ mt: 2 }}>
+                            <Typography variant="caption" color="textSecondary" display="block" sx={{ mb: 0.5 }}>
+                              Recommended Tools:
+                            </Typography>
+                            <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+                              {insight.tools.map((tool: string, toolIdx: number) => (
+                                <Chip key={toolIdx} label={tool} size="small" variant="outlined" />
+                              ))}
+                            </Box>
+                          </Box>
+                        )}
+
+                        {/* Priority Badge */}
+                        <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
+                          <Typography variant="caption" color="textSecondary">
+                            Priority Score:
+                          </Typography>
+                          <LinearProgress
+                            variant="determinate"
+                            value={Math.min(insight.priority * 10, 100)}
+                            sx={{ flex: 1 }}
+                          />
+                          <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                            {insight.priority}/10
+                          </Typography>
+                        </Box>
+                      </CardContent>
+
+                      <Divider />
+
+                      <CardActions>
+                        <Button
+                          size="small"
+                          startIcon={<ShareIcon />}
+                          onClick={() => handleShareInsight(insight)}
+                        >
+                          Share
+                        </Button>
+                        <Button
+                          size="small"
+                          startIcon={<OpenInNewIcon />}
+                          href="#"
+                          target="_blank"
+                        >
+                          Learn More
+                        </Button>
+                      </CardActions>
+                    </Card>
+                  </motion.div>
+                </Grid>
+              );
+            })}
+          </AnimatePresence>
+        </Grid>
+
+        {/* Traffic Improvement Strategies */}
+        {strategies && strategies.length > 0 && (
+          <Box sx={{ mt: 6 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
+              🚀 Traffic Improvement Strategies
+            </Typography>
+
+            <Grid container spacing={2}>
+              {strategies.map((strategy, idx) => (
+                <Grid item xs={12} md={6} key={idx}>
+                  <Card
+                    sx={{
+                      border: `2px solid ${strategy.phase === 'quick_wins' ? '#4caf50' : strategy.phase === 'medium_term' ? '#2196f3' : '#ff9800'}`,
+                    }}
+                  >
+                    <CardContent>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                        {strategy.phase === 'quick_wins' && <FlagIcon sx={{ color: '#4caf50' }} />}
+                        {strategy.phase === 'medium_term' && <ScheduleIcon sx={{ color: '#2196f3' }} />}
+                        {strategy.phase === 'long_term' && <TrendingUpIcon sx={{ color: '#ff9800' }} />}
+                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                          {strategy.title}
+                        </Typography>
+                      </Box>
+                      <Typography variant="body2" sx={{ mb: 2 }}>
+                        {strategy.description}
+                      </Typography>
+                      <Divider sx={{ my: 1 }} />
+                      <Box sx={{ mt: 2 }}>
+                        <Typography variant="caption" color="textSecondary" display="block" sx={{ mb: 0.5 }}>
+                          Key Actions:
+                        </Typography>
+                        <Stack spacing={0.5}>
+                          {strategy.keyActions.map((action: string, actionIdx: number) => (
+                            <Box key={actionIdx} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
+                              <ArrowRightIcon sx={{ fontSize: 16, mt: 0.3, flexShrink: 0 }} />
+                              <Typography variant="body2">{action}</Typography>
+                            </Box>
+                          ))}
+                        </Stack>
+                      </Box>
+                      <Box sx={{ mt: 2, p: 1, bgcolor: 'primary.lighter', borderRadius: 1 }}>
+                        <Typography variant="caption" color="textSecondary" display="block">
+                          Timeframe: {strategy.timeframe}
+                        </Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                          Expected ROI: {strategy.expectedROI}
+                        </Typography>
+                      </Box>
+                    </CardContent>
+                  </Card>
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        )}
+      </Box>
+    </motion.div>
+  );
+};
+
+export default ActionableInsightsDisplay;

frontend/src/components/SEODashboard/components/EnterpriseAuditResults.tsx

@@ -0,0 +1,658 @@
+/**
+ * Enterprise Audit Results Component
+ * Displays comprehensive enterprise SEO audit results with insights and recommendations
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Grid,
+  Chip,
+  LinearProgress,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Button,
+  Alert,
+  Divider,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Stack,
+  Skeleton,
+  CircularProgress,
+} from '@mui/material';
+import {
+  ExpandMore as ExpandMoreIcon,
+  CheckCircle as CheckCircleIcon,
+  Warning as WarningIcon,
+  Error as ErrorIcon,
+  TrendingUp as TrendingUpIcon,
+  Lightbulb as LightbulbIcon,
+  Assessment as AssessmentIcon,
+  Speed as SpeedIcon,
+  Search as SearchIcon,
+  Gavel as GavelIcon,
+} from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { EnterpriseAuditResult, AIInsight, AuditIssue } from '../../../api/enterpriseSeoApi';
+
+interface EnterpriseAuditResultsProps {
+  auditResult?: EnterpriseAuditResult | null;
+  loading?: boolean;
+  error?: string | null;
+  insights?: AIInsight[];
+  onGenerateInsights?: () => Promise<void>;
+  onDownloadReport?: () => void;
+}
+
+const getSeverityColor = (severity: 'critical' | 'high' | 'medium' | 'low'): string => {
+  const colors: Record<string, string> = {
+    critical: '#d32f2f',
+    high: '#f57c00',
+    medium: '#fbc02d',
+    low: '#388e3c',
+  };
+  return colors[severity] || '#757575';
+};
+
+const getSeverityIcon = (severity: 'critical' | 'high' | 'medium' | 'low') => {
+  if (severity === 'critical') return <ErrorIcon />;
+  if (severity === 'high') return <WarningIcon />;
+  return <CheckCircleIcon />;
+};
+
+const getPriorityColor = (priority: 'high' | 'medium' | 'low'): string => {
+  const colors: Record<string, string> = {
+    high: '#d32f2f',
+    medium: '#f57c00',
+    low: '#388e3c',
+  };
+  return colors[priority] || '#757575';
+};
+
+export const EnterpriseAuditResults: React.FC<EnterpriseAuditResultsProps> = ({
+  auditResult,
+  loading = false,
+  error = null,
+  insights = [],
+  onGenerateInsights,
+  onDownloadReport,
+}) => {
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    executive: true,
+    technical: false,
+    content: false,
+    keywords: false,
+    competitive: false,
+    insights: false,
+    roadmap: false,
+  });
+
+  const handleSectionToggle = (section: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  if (error) {
+    return (
+      <Alert severity="error" sx={{ my: 2 }}>
+        <Typography variant="body2">{error}</Typography>
+      </Alert>
+    );
+  }
+
+  if (loading || !auditResult) {
+    return (
+      <Box sx={{ p: 3 }}>
+        <Skeleton variant="text" sx={{ mb: 2 }} height={40} />
+        <Skeleton variant="rectangular" height={200} />
+      </Box>
+    );
+  }
+
+  const { executive_summary, technical_audit, on_page_analysis, keyword_research, competitive_analysis, ai_insights } = auditResult;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Box sx={{ py: 3 }}>
+        {/* Header Section */}
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
+            Enterprise SEO Audit Report
+          </Typography>
+          <Typography variant="body2" color="textSecondary">
+            {auditResult.website_url} • {new Date(auditResult.audit_date).toLocaleDateString()}
+          </Typography>
+          {onDownloadReport && (
+            <Button
+              size="small"
+              startIcon={<AssessmentIcon />}
+              onClick={onDownloadReport}
+              sx={{ mt: 1 }}
+            >
+              Download Report
+            </Button>
+          )}
+        </Box>
+
+        {/* Executive Summary Section */}
+        <Accordion
+          expanded={expandedSections.executive}
+          onChange={() => handleSectionToggle('executive')}
+          sx={{ mb: 2 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <AssessmentIcon color="primary" />
+              <Typography variant="h6">Executive Summary</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container spacing={3}>
+              {/* Overall Score */}
+              <Grid item xs={12} sm={6} md={3}>
+                <Card>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography color="textSecondary" gutterBottom>
+                      Overall Score
+                    </Typography>
+                    <Box sx={{ position: 'relative', display: 'inline-flex', my: 2 }}>
+                      <CircularProgress
+                        variant="determinate"
+                        value={executive_summary.overall_score}
+                        size={100}
+                        sx={{
+                          color:
+                            executive_summary.overall_score >= 80
+                              ? '#388e3c'
+                              : executive_summary.overall_score >= 60
+                              ? '#f57c00'
+                              : '#d32f2f',
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          top: 0,
+                          left: 0,
+                          bottom: 0,
+                          right: 0,
+                          position: 'absolute',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <Typography variant="h4" component="div" color="textPrimary">
+                          {executive_summary.overall_score}
+                        </Typography>
+                      </Box>
+                    </Box>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Traffic Potential */}
+              <Grid item xs={12} sm={6} md={3}>
+                <Card>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography color="textSecondary" gutterBottom>
+                      Traffic Potential
+                    </Typography>
+                    <TrendingUpIcon sx={{ fontSize: 40, color: '#388e3c', my: 1 }} />
+                    <Typography variant="h6">{executive_summary.estimated_traffic_potential}</Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Implementation Timeline */}
+              <Grid item xs={12} sm={6} md={3}>
+                <Card>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography color="textSecondary" gutterBottom>
+                      Implementation
+                    </Typography>
+                    <SpeedIcon sx={{ fontSize: 40, color: '#1976d2', my: 1 }} />
+                    <Typography variant="h6">{executive_summary.timeframe_to_implement}</Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Critical Issues Count */}
+              <Grid item xs={12} sm={6} md={3}>
+                <Card>
+                  <CardContent sx={{ textAlign: 'center' }}>
+                    <Typography color="textSecondary" gutterBottom>
+                      Critical Issues
+                    </Typography>
+                    <ErrorIcon sx={{ fontSize: 40, color: '#d32f2f', my: 1 }} />
+                    <Typography variant="h6">{executive_summary.critical_issues.length}</Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Key Findings */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                  Key Findings
+                </Typography>
+                <Stack spacing={1}>
+                  {executive_summary.key_findings.map((finding, idx) => (
+                    <Box
+                      key={idx}
+                      sx={{
+                        p: 1.5,
+                        bgcolor: 'background.paper',
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 1,
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 1,
+                      }}
+                    >
+                      <CheckCircleIcon
+                        sx={{ mt: 0.5, color: '#388e3c', flexShrink: 0 }}
+                        fontSize="small"
+                      />
+                      <Typography variant="body2">{finding}</Typography>
+                    </Box>
+                  ))}
+                </Stack>
+              </Grid>
+
+              {/* Top Opportunities */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                  Top Opportunities
+                </Typography>
+                <Stack spacing={1}>
+                  {executive_summary.top_opportunities.map((opp, idx) => (
+                    <Box
+                      key={idx}
+                      sx={{
+                        p: 1.5,
+                        bgcolor: 'success.lighter',
+                        border: '1px solid',
+                        borderColor: 'success.main',
+                        borderRadius: 1,
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 1,
+                      }}
+                    >
+                      <LightbulbIcon sx={{ mt: 0.5, color: '#fbc02d', flexShrink: 0 }} fontSize="small" />
+                      <Typography variant="body2">{opp}</Typography>
+                    </Box>
+                  ))}
+                </Stack>
+              </Grid>
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+
+        {/* Technical Audit Section */}
+        <Accordion
+          expanded={expandedSections.technical}
+          onChange={() => handleSectionToggle('technical')}
+          sx={{ mb: 2 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <SpeedIcon color="primary" />
+              <Typography variant="h6">Technical SEO Audit</Typography>
+              <Chip
+                label={`${technical_audit.issues.length} Issues`}
+                size="small"
+                color={technical_audit.issues.length > 0 ? 'error' : 'success'}
+                variant="outlined"
+              />
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                  Pages Audited
+                </Typography>
+                <Typography variant="h5">{technical_audit.pages_audited}</Typography>
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                  Average Score
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <LinearProgress
+                    variant="determinate"
+                    value={technical_audit.avg_score}
+                    sx={{ flex: 1 }}
+                  />
+                  <Typography variant="h6">{technical_audit.avg_score}</Typography>
+                </Box>
+              </Grid>
+
+              {/* Core Web Vitals */}
+              {technical_audit.core_web_vitals && (
+                <Grid item xs={12}>
+                  <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                    Core Web Vitals
+                  </Typography>
+                  <Grid container spacing={2}>
+                    <Grid item xs={12} sm={4}>
+                      <Card>
+                        <CardContent sx={{ textAlign: 'center' }}>
+                          <Typography color="textSecondary" variant="caption" display="block">
+                            LCP (Largest Contentful Paint)
+                          </Typography>
+                          <Typography variant="h6">{technical_audit.core_web_vitals.lcp}ms</Typography>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                    <Grid item xs={12} sm={4}>
+                      <Card>
+                        <CardContent sx={{ textAlign: 'center' }}>
+                          <Typography color="textSecondary" variant="caption" display="block">
+                            FID (First Input Delay)
+                          </Typography>
+                          <Typography variant="h6">{technical_audit.core_web_vitals.fid}ms</Typography>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                    <Grid item xs={12} sm={4}>
+                      <Card>
+                        <CardContent sx={{ textAlign: 'center' }}>
+                          <Typography color="textSecondary" variant="caption" display="block">
+                            CLS (Cumulative Layout Shift)
+                          </Typography>
+                          <Typography variant="h6">{technical_audit.core_web_vitals.cls}</Typography>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              )}
+
+              {/* Issues Table */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+                  Top Issues
+                </Typography>
+                <TableContainer component={Paper}>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow sx={{ bgcolor: 'background.paper' }}>
+                        <TableCell>Issue Type</TableCell>
+                        <TableCell>Severity</TableCell>
+                        <TableCell>Affected Pages</TableCell>
+                        <TableCell>Recommendation</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {technical_audit.issues.slice(0, 5).map((issue, idx) => (
+                        <TableRow key={idx}>
+                          <TableCell>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                              {getSeverityIcon(issue.severity)}
+                              <Typography variant="body2">{issue.type}</Typography>
+                            </Box>
+                          </TableCell>
+                          <TableCell>
+                            <Chip
+                              label={issue.severity}
+                              size="small"
+                              sx={{ bgcolor: getSeverityColor(issue.severity), color: 'white' }}
+                            />
+                          </TableCell>
+                          <TableCell>{issue.affected_pages || 'N/A'}</TableCell>
+                          <TableCell>
+                            <Typography variant="caption">{issue.recommendation || issue.description}</Typography>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Grid>
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+
+        {/* Keyword Research Section */}
+        <Accordion
+          expanded={expandedSections.keywords}
+          onChange={() => handleSectionToggle('keywords')}
+          sx={{ mb: 2 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <SearchIcon color="primary" />
+              <Typography variant="h6">Keyword Research</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container spacing={3}>
+              {/* Target Keywords */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+                  Target Keywords
+                </Typography>
+                <TableContainer component={Paper}>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow sx={{ bgcolor: 'background.paper' }}>
+                        <TableCell>Keyword</TableCell>
+                        <TableCell align="right">Volume</TableCell>
+                        <TableCell align="right">Difficulty</TableCell>
+                        <TableCell align="right">Current Rank</TableCell>
+                        <TableCell align="center">Trend</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {keyword_research.target_keywords.map((kw, idx) => (
+                        <TableRow key={idx}>
+                          <TableCell>{kw.keyword}</TableCell>
+                          <TableCell align="right">{kw.volume.toLocaleString()}</TableCell>
+                          <TableCell align="right">{kw.difficulty}</TableCell>
+                          <TableCell align="right">#{kw.current_ranking}</TableCell>
+                          <TableCell align="center">
+                            {kw.trend === 'up' && <TrendingUpIcon sx={{ color: '#388e3c' }} fontSize="small" />}
+                            {kw.trend === 'down' && <TrendingUpIcon sx={{ color: '#d32f2f', transform: 'rotate(180deg)' }} fontSize="small" />}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </Grid>
+
+              {/* Long Tail Opportunities */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+                  Long Tail Opportunities
+                </Typography>
+                <Grid container spacing={1}>
+                  {keyword_research.long_tail_opportunities.map((kw, idx) => (
+                    <Grid item xs={12} sm={6} md={4} key={idx}>
+                      <Card>
+                        <CardContent>
+                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            {kw.keyword}
+                          </Typography>
+                          <Typography variant="caption" color="textSecondary" display="block" sx={{ mt: 0.5 }}>
+                            Volume: {kw.volume.toLocaleString()}
+                          </Typography>
+                          <Typography variant="caption" color="textSecondary">
+                            Opportunity Score: {kw.opportunity_score}/100
+                          </Typography>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                  ))}
+                </Grid>
+              </Grid>
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+
+        {/* AI Insights Section */}
+        <Accordion
+          expanded={expandedSections.insights}
+          onChange={() => handleSectionToggle('insights')}
+          sx={{ mb: 2 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <LightbulbIcon color="primary" />
+              <Typography variant="h6">AI-Powered Insights & Recommendations</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            {insights.length > 0 ? (
+              <Stack spacing={2}>
+                {insights.map((insight, idx) => (
+                  <Box
+                    key={idx}
+                    sx={{
+                      p: 2,
+                      border: '1px solid',
+                      borderColor: insight.priority === 'high' ? '#d32f2f' : 'divider',
+                      borderRadius: 1,
+                      bgcolor: insight.priority === 'high' ? 'error.lighter' : 'background.paper',
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                      <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                        {insight.category}
+                      </Typography>
+                      <Chip
+                        label={insight.priority}
+                        size="small"
+                        sx={{
+                          bgcolor: getPriorityColor(insight.priority),
+                          color: 'white',
+                        }}
+                      />
+                    </Box>
+                    <Typography variant="body2" sx={{ mb: 1 }}>
+                      {insight.insight}
+                    </Typography>
+                    <Typography variant="caption" color="textSecondary" display="block">
+                      Implementation Difficulty: {insight.implementation_difficulty}
+                    </Typography>
+                    <Typography variant="caption" color="textSecondary">
+                      Estimated Impact: {insight.estimated_impact}
+                    </Typography>
+                  </Box>
+                ))}
+              </Stack>
+            ) : (
+              <Box sx={{ textAlign: 'center', py: 3 }}>
+                <Typography color="textSecondary" sx={{ mb: 2 }}>
+                  No insights generated yet. Generate AI-powered insights from the audit data.
+                </Typography>
+                {onGenerateInsights && (
+                  <Button
+                    variant="contained"
+                    startIcon={<LightbulbIcon />}
+                    onClick={onGenerateInsights}
+                  >
+                    Generate Insights
+                  </Button>
+                )}
+              </Box>
+            )}
+          </AccordionDetails>
+        </Accordion>
+
+        {/* Implementation Roadmap */}
+        <Accordion
+          expanded={expandedSections.roadmap}
+          onChange={() => handleSectionToggle('roadmap')}
+          sx={{ mb: 2 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <GavelIcon color="primary" />
+              <Typography variant="h6">Implementation Roadmap</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container spacing={3}>
+              {/* Phase 1: Quick Wins */}
+              <Grid item xs={12} md={4}>
+                <Card sx={{ border: '2px solid #4caf50' }}>
+                  <CardContent>
+                    <Typography variant="h6" sx={{ mb: 2, color: '#4caf50', fontWeight: 600 }}>
+                      🚀 Phase 1: Quick Wins (1-2 weeks)
+                    </Typography>
+                    <Stack spacing={1}>
+                      {auditResult.implementation_roadmap.phase1_quick_wins.map((item, idx) => (
+                        <Box key={idx} sx={{ display: 'flex', gap: 1 }}>
+                          <CheckCircleIcon sx={{ color: '#4caf50', fontSize: 20 }} />
+                          <Typography variant="body2">{item}</Typography>
+                        </Box>
+                      ))}
+                    </Stack>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Phase 2: Medium Term */}
+              <Grid item xs={12} md={4}>
+                <Card sx={{ border: '2px solid #2196f3' }}>
+                  <CardContent>
+                    <Typography variant="h6" sx={{ mb: 2, color: '#2196f3', fontWeight: 600 }}>
+                      📈 Phase 2: Medium Term (1-3 months)
+                    </Typography>
+                    <Stack spacing={1}>
+                      {auditResult.implementation_roadmap.phase2_medium_term.map((item, idx) => (
+                        <Box key={idx} sx={{ display: 'flex', gap: 1 }}>
+                          <CheckCircleIcon sx={{ color: '#2196f3', fontSize: 20 }} />
+                          <Typography variant="body2">{item}</Typography>
+                        </Box>
+                      ))}
+                    </Stack>
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              {/* Phase 3: Long Term */}
+              <Grid item xs={12} md={4}>
+                <Card sx={{ border: '2px solid #ff9800' }}>
+                  <CardContent>
+                    <Typography variant="h6" sx={{ mb: 2, color: '#ff9800', fontWeight: 600 }}>
+                      🎯 Phase 3: Long Term (3+ months)
+                    </Typography>
+                    <Stack spacing={1}>
+                      {auditResult.implementation_roadmap.phase3_long_term.map((item, idx) => (
+                        <Box key={idx} sx={{ display: 'flex', gap: 1 }}>
+                          <CheckCircleIcon sx={{ color: '#ff9800', fontSize: 20 }} />
+                          <Typography variant="body2">{item}</Typography>
+                        </Box>
+                      ))}
+                    </Stack>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+      </Box>
+    </motion.div>
+  );
+};
+
+export default EnterpriseAuditResults;

frontend/src/components/SEODashboard/components/GSCAnalysisResults.tsx

@@ -0,0 +1,634 @@
+/**
+ * GSC Analysis Results Component
+ * Displays Google Search Console analysis with opportunities and insights
+ */
+
+import React, { useState } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Grid,
+  Chip,
+  LinearProgress,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Stack,
+  Skeleton,
+  Button,
+  Alert,
+  Tab,
+  Tabs,
+  CircularProgress,
+  Tooltip,
+} from '@mui/material';
+import {
+  ExpandMore as ExpandMoreIcon,
+  TrendingUp as TrendingUpIcon,
+  TrendingDown as TrendingDownIcon,
+  Search as SearchIcon,
+  Visibility as VisibilityIcon,
+  Mouse as MouseIcon,
+  Psychology as PsychologyIcon,
+  LocalOffer as LocalOfferIcon,
+  Lightbulb as LightbulbIcon,
+  Speed as SpeedIcon
+} from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { GSCAnalysisResult, KeywordAnalysis, ContentOpportunity, AIInsight } from '../../../api/enterpriseSeoApi';
+
+interface GSCAnalysisResultsProps {
+  analysisResult?: GSCAnalysisResult | null;
+  loading?: boolean;
+  error?: string | null;
+  insights?: AIInsight[];
+  onGenerateInsights?: () => Promise<void>;
+  onDownloadReport?: () => void;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export const GSCAnalysisResults: React.FC<GSCAnalysisResultsProps> = ({
+  analysisResult,
+  loading = false,
+  error = null,
+  insights = [],
+  onGenerateInsights,
+  onDownloadReport,
+}) => {
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    performance: true,
+    keywords: false,
+    opportunities: false,
+    technical: false,
+    competitive: false,
+    insights: false,
+  });
+  const [tabValue, setTabValue] = useState(0);
+
+  const handleSectionToggle = (section: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  if (error) {
+    return (
+      <Alert severity="error" sx={{ my: 2 }}>
+        <Typography variant="body2">{error}</Typography>
+      </Alert>
+    );
+  }
+
+  if (loading || !analysisResult) {
+    return (
+      <Box sx={{ p: 3 }}>
+        <Skeleton variant="text" sx={{ mb: 2 }} height={40} />
+        <Skeleton variant="rectangular" height={200} />
+      </Box>
+    );
+  }
+
+  const {
+    performance_overview,
+    page_performance,
+    keyword_analysis,
+    content_opportunities,
+    technical_signals,
+    traffic_potential,
+  } = analysisResult;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Box sx={{ py: 3 }}>
+        {/* Header Section */}
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h4" sx={{ mb: 1, fontWeight: 600 }}>
+            Google Search Console Analysis
+          </Typography>
+          <Typography variant="body2" color="textSecondary">
+            {analysisResult.site_url} • {new Date(analysisResult.analysis_date).toLocaleDateString()} •
+            Last {analysisResult.analysis_period_days} days
+          </Typography>
+          {onDownloadReport && (
+            <Button
+              size="small"
+              startIcon={<SearchIcon />}
+              onClick={onDownloadReport}
+              sx={{ mt: 1 }}
+            >
+              Download Report
+            </Button>
+          )}
+        </Box>
+
+        {/* Performance Overview Cards */}
+        <Grid container spacing={2} sx={{ mb: 4 }}>
+          <Grid item xs={12} sm={6} md={3}>
+            <Card sx={{ height: '100%' }}>
+              <CardContent sx={{ textAlign: 'center' }}>
+                <MouseIcon sx={{ fontSize: 32, color: '#1976d2', mb: 1 }} />
+                <Typography color="textSecondary" variant="caption" display="block">
+                  Total Clicks
+                </Typography>
+                <Typography variant="h6" sx={{ mt: 1 }}>
+                  {performance_overview.clicks.toLocaleString()}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <Card sx={{ height: '100%' }}>
+              <CardContent sx={{ textAlign: 'center' }}>
+                <VisibilityIcon sx={{ fontSize: 32, color: '#388e3c', mb: 1 }} />
+                <Typography color="textSecondary" variant="caption" display="block">
+                  Total Impressions
+                </Typography>
+                <Typography variant="h6" sx={{ mt: 1 }}>
+                  {performance_overview.impressions.toLocaleString()}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <Card sx={{ height: '100%' }}>
+              <CardContent sx={{ textAlign: 'center' }}>
+                <PsychologyIcon sx={{ fontSize: 32, color: '#f57c00', mb: 1 }} />
+                <Typography color="textSecondary" variant="caption" display="block">
+                  Average CTR
+                </Typography>
+                <Typography variant="h6" sx={{ mt: 1 }}>
+                  {(performance_overview.ctr * 100).toFixed(2)}%
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          <Grid item xs={12} sm={6} md={3}>
+            <Card sx={{ height: '100%' }}>
+              <CardContent sx={{ textAlign: 'center' }}>
+                <LocalOfferIcon sx={{ fontSize: 32, color: '#d32f2f', mb: 1 }} />
+                <Typography color="textSecondary" variant="caption" display="block">
+                  Avg Position
+                </Typography>
+                <Typography variant="h6" sx={{ mt: 1 }}>
+                  #{performance_overview.avg_position.toFixed(1)}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+
+        {/* Tabs for different analyses */}
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
+          <Tabs value={tabValue} onChange={handleTabChange} aria-label="analysis tabs">
+            <Tab label="Performance" id="tab-0" aria-controls="tabpanel-0" />
+            <Tab label="Keywords" id="tab-1" aria-controls="tabpanel-1" />
+            <Tab label="Opportunities" id="tab-2" aria-controls="tabpanel-2" />
+            <Tab label="Technical" id="tab-3" aria-controls="tabpanel-3" />
+          </Tabs>
+        </Box>
+
+        {/* Tab 1: Performance Overview */}
+        <TabPanel value={tabValue} index={0}>
+          <Grid container spacing={3}>
+            {/* Top Keywords */}
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                Top Performing Keywords
+              </Typography>
+              <TableContainer component={Paper}>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow sx={{ bgcolor: 'background.paper' }}>
+                      <TableCell>Keyword</TableCell>
+                      <TableCell align="right">Clicks</TableCell>
+                      <TableCell align="right">Impressions</TableCell>
+                      <TableCell align="right">CTR</TableCell>
+                      <TableCell align="right">Position</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {performance_overview.top_keywords.map((kw: any, idx: number) => (
+                      <TableRow key={idx}>
+                        <TableCell>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <SearchIcon sx={{ fontSize: 18, color: '#1976d2' }} />
+                            {kw.keyword}
+                          </Box>
+                        </TableCell>
+                        <TableCell align="right">{kw.volume}</TableCell>
+                        <TableCell align="right">{kw.difficulty}</TableCell>
+                        <TableCell align="right">{(kw.current_ranking / 100).toFixed(2)}%</TableCell>
+                        <TableCell align="right">#{kw.current_ranking}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Grid>
+
+            {/* Top Performing Pages */}
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                Top Performing Pages
+              </Typography>
+              <Grid container spacing={2}>
+                {page_performance.slice(0, 5).map((page: any, idx: number) => (
+                  <Grid item xs={12} sm={6} md={4} key={idx}>
+                    <Card>
+                      <CardContent>
+                        <Tooltip title={page.url}>
+                          <Typography variant="body2" noWrap sx={{ fontWeight: 600, mb: 1 }}>
+                            {new URL(page.url).pathname}
+                          </Typography>
+                        </Tooltip>
+                        <Box sx={{ mb: 1 }}>
+                          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                            <Typography variant="caption" color="textSecondary">
+                              Score
+                            </Typography>
+                            <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                              {page.score}
+                            </Typography>
+                          </Box>
+                          <LinearProgress variant="determinate" value={page.score} />
+                        </Box>
+                        <Chip
+                          label={page.priority}
+                          size="small"
+                          color={page.priority === 'high' ? 'error' : page.priority === 'medium' ? 'warning' : 'success'}
+                        />
+                      </CardContent>
+                    </Card>
+                  </Grid>
+                ))}
+              </Grid>
+            </Grid>
+
+            {/* Traffic Trend */}
+            <Grid item xs={12}>
+              <Card>
+                <CardContent>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+                    <TrendingUpIcon />
+                    <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                      Traffic Trend
+                    </Typography>
+                  </Box>
+                  <Typography variant="h5" sx={{ color: performance_overview.traffic_trend.includes('up') ? '#388e3c' : '#d32f2f' }}>
+                    {performance_overview.traffic_trend}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </TabPanel>
+
+        {/* Tab 2: Keywords Analysis */}
+        <TabPanel value={tabValue} index={1}>
+          <Grid container spacing={3}>
+            {/* Opportunities Tab */}
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                Keywords Ready for Ranking Improvement
+              </Typography>
+              <TableContainer component={Paper}>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow sx={{ bgcolor: 'background.paper' }}>
+                      <TableCell>Keyword</TableCell>
+                      <TableCell align="right">Volume</TableCell>
+                      <TableCell align="right">Current Position</TableCell>
+                      <TableCell align="right">Difficulty</TableCell>
+                      <TableCell align="right">Opportunity Score</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {keyword_analysis.opportunities.map((kw: any, idx: number) => (
+                      <TableRow key={idx}>
+                        <TableCell>{kw.keyword}</TableCell>
+                        <TableCell align="right">{kw.volume.toLocaleString()}</TableCell>
+                        <TableCell align="right">#{kw.current_ranking}</TableCell>
+                        <TableCell align="right">{kw.difficulty}</TableCell>
+                        <TableCell align="right">
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <LinearProgress
+                              variant="determinate"
+                              value={Math.min(kw.opportunity_score, 100)}
+                              sx={{ width: 50 }}
+                            />
+                            <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                              {kw.opportunity_score}
+                            </Typography>
+                          </Box>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Grid>
+
+            {/* Declining Keywords */}
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                Keywords Needing Attention
+              </Typography>
+              {keyword_analysis.declining_keywords.length > 0 ? (
+                <Grid container spacing={2}>
+                  {keyword_analysis.declining_keywords.map((kw: any, idx: number) => (
+                    <Grid item xs={12} sm={6} key={idx}>
+                      <Card sx={{ border: '1px solid #ff6f00' }}>
+                        <CardContent>
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                            <TrendingDownIcon sx={{ color: '#d32f2f' }} />
+                            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                              {kw.keyword}
+                            </Typography>
+                          </Box>
+                          <Typography variant="caption" color="textSecondary">
+                            Position: #{kw.current_ranking} • Volume: {kw.volume.toLocaleString()}
+                          </Typography>
+                        </CardContent>
+                      </Card>
+                    </Grid>
+                  ))}
+                </Grid>
+              ) : (
+                <Alert severity="success">No declining keywords detected</Alert>
+              )}
+            </Grid>
+          </Grid>
+        </TabPanel>
+
+        {/* Tab 3: Content Opportunities */}
+        <TabPanel value={tabValue} index={2}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                High-Priority Content Opportunities ({content_opportunities.length})
+              </Typography>
+              <Stack spacing={2}>
+                {content_opportunities.slice(0, 10).map((opp: any, idx: number) => (
+                  <Card key={idx} sx={{ border: opp.priority === 'high' ? '2px solid #d32f2f' : '1px solid' }}>
+                    <CardContent>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                          {opp.keyword}
+                        </Typography>
+                        <Chip
+                          label={opp.priority}
+                          size="small"
+                          color={opp.priority === 'high' ? 'error' : opp.priority === 'medium' ? 'warning' : 'success'}
+                        />
+                      </Box>
+                      <Grid container spacing={2} sx={{ mb: 2 }}>
+                        <Grid item xs={6} sm={3}>
+                          <Typography variant="caption" color="textSecondary" display="block">
+                            Current Position
+                          </Typography>
+                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            #{opp.current_position}
+                          </Typography>
+                        </Grid>
+                        <Grid item xs={6} sm={3}>
+                          <Typography variant="caption" color="textSecondary" display="block">
+                            Impressions
+                          </Typography>
+                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            {opp.impressions.toLocaleString()}
+                          </Typography>
+                        </Grid>
+                        <Grid item xs={6} sm={3}>
+                          <Typography variant="caption" color="textSecondary" display="block">
+                            Current CTR
+                          </Typography>
+                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            {(opp.ctr * 100).toFixed(2)}%
+                          </Typography>
+                        </Grid>
+                        <Grid item xs={6} sm={3}>
+                          <Typography variant="caption" color="textSecondary" display="block">
+                            Est. Traffic Gain
+                          </Typography>
+                          <Typography variant="body2" sx={{ fontWeight: 600, color: '#388e3c' }}>
+                            +{opp.estimated_traffic_gain}
+                          </Typography>
+                        </Grid>
+                      </Grid>
+                      <Typography variant="body2" sx={{ mb: 1 }}>
+                        <strong>Recommended Action:</strong> {opp.recommended_action}
+                      </Typography>
+                      <Chip
+                        label={`Difficulty: ${opp.difficulty_score}`}
+                        size="small"
+                        variant="outlined"
+                      />
+                    </CardContent>
+                  </Card>
+                ))}
+              </Stack>
+            </Grid>
+
+            {/* Traffic Potential Summary */}
+            <Grid item xs={12}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                Traffic Growth Potential
+              </Typography>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={6} md={4}>
+                  <Card>
+                    <CardContent>
+                      <Typography variant="caption" color="textSecondary" display="block">
+                        Quick Wins
+                      </Typography>
+                      <Typography variant="body2" sx={{ mt: 1 }}>
+                        {traffic_potential.low_hanging_fruit}
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <Card>
+                    <CardContent>
+                      <Typography variant="caption" color="textSecondary" display="block">
+                        Medium Term
+                      </Typography>
+                      <Typography variant="body2" sx={{ mt: 1 }}>
+                        {traffic_potential.medium_term_opportunities}
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <Card>
+                    <CardContent>
+                      <Typography variant="caption" color="textSecondary" display="block">
+                        Long Term Growth
+                      </Typography>
+                      <Typography variant="body2" sx={{ mt: 1 }}>
+                        {traffic_potential.long_term_growth}
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        </TabPanel>
+
+        {/* Tab 4: Technical Signals */}
+        <TabPanel value={tabValue} index={3}>
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6} md={3}>
+              <Card>
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <SpeedIcon sx={{ fontSize: 40, color: '#1976d2', mb: 1 }} />
+                  <Typography variant="caption" color="textSecondary" display="block">
+                    Core Web Vitals
+                  </Typography>
+                  <Typography variant="h6" sx={{ mt: 1, color: '#388e3c' }}>
+                    {technical_signals.core_web_vitals_score}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <Card>
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <Typography variant="caption" color="textSecondary" display="block">
+                    Mobile Usability Issues
+                  </Typography>
+                  <Typography variant="h6" sx={{ mt: 1 }}>
+                    {technical_signals.mobile_usability_issues}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <Card>
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <Typography variant="caption" color="textSecondary" display="block">
+                    Indexing Issues
+                  </Typography>
+                  <Typography variant="h6" sx={{ mt: 1 }}>
+                    {technical_signals.indexing_issues}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <Card>
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <Typography variant="caption" color="textSecondary" display="block">
+                    Security Issues
+                  </Typography>
+                  <Typography variant="h6" sx={{ mt: 1 }}>
+                    {technical_signals.security_issues}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </TabPanel>
+
+        {/* AI Insights Section */}
+        <Accordion
+          expanded={expandedSections.insights}
+          onChange={() => handleSectionToggle('insights')}
+          sx={{ mt: 3 }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+              <LightbulbIcon color="primary" />
+              <Typography variant="h6">AI-Powered Insights</Typography>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            {insights.length > 0 ? (
+              <Stack spacing={2}>
+                {insights.map((insight, idx) => (
+                  <Box
+                    key={idx}
+                    sx={{
+                      p: 2,
+                      border: '1px solid',
+                      borderColor: insight.priority === 'high' ? '#d32f2f' : 'divider',
+                      borderRadius: 1,
+                      bgcolor: insight.priority === 'high' ? 'error.lighter' : 'background.paper',
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                      <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                        {insight.category}
+                      </Typography>
+                      <Chip
+                        label={insight.priority}
+                        size="small"
+                        color={insight.priority === 'high' ? 'error' : insight.priority === 'medium' ? 'warning' : 'success'}
+                      />
+                    </Box>
+                    <Typography variant="body2">{insight.insight}</Typography>
+                  </Box>
+                ))}
+              </Stack>
+            ) : (
+              <Box sx={{ textAlign: 'center', py: 3 }}>
+                <Typography color="textSecondary" sx={{ mb: 2 }}>
+                  Generate AI-powered insights to get actionable recommendations.
+                </Typography>
+                {onGenerateInsights && (
+                  <Button variant="contained" startIcon={<LightbulbIcon />} onClick={onGenerateInsights}>
+                    Generate Insights
+                  </Button>
+                )}
+              </Box>
+            )}
+          </AccordionDetails>
+        </Accordion>
+      </Box>
+    </motion.div>
+  );
+};
+
+export default GSCAnalysisResults;

frontend/src/contexts/SubscriptionContext.tsx

@@ -35,6 +35,7 @@ export interface SubscriptionStatus {
   can_use_api: boolean;
   reason?: string;
   limits: SubscriptionLimits;
+  currentUsage?: Partial<SubscriptionLimits>;
 }
 
 interface SubscriptionContextType {
@@ -153,10 +154,58 @@ export const SubscriptionProvider: React.FC<SubscriptionProviderProps> = ({ chil
       const subscriptionData = response.data.data;
 
       if (process.env.NODE_ENV === 'development') console.log('SubscriptionContext: Subscription data received:', { active: subscriptionData?.active, plan: subscriptionData?.plan });
+
+      try {
+        const usageResponse = await apiClient.get(`/api/subscription/usage/${userId}`);
+        const usagePayload = usageResponse.data?.data || usageResponse.data || {};
+        const providerBreakdown = usagePayload.provider_breakdown || {};
+        const reverseMapping: Record<string, string> = {
+          gemini: 'gemini_calls',
+          openai: 'openai_calls',
+          anthropic: 'anthropic_calls',
+          huggingface: 'mistral_calls',
+          wavespeed: 'wavespeed_calls',
+          exa: 'exa_calls',
+          tavily: 'tavily_calls',
+          serper: 'serper_calls',
+          firecrawl: 'firecrawl_calls',
+          metaphor: 'metaphor_calls',
+          stability: 'stability_calls',
+          video: 'video_calls',
+          image_edit: 'image_edit_calls',
+          audio: 'audio_calls',
+        };
+        const currentUsage: Partial<SubscriptionLimits> = {};
+        for (const [provider, data] of Object.entries(providerBreakdown)) {
+          const limitKey = reverseMapping[provider];
+          if (limitKey) {
+            (currentUsage as Record<string, number>)[limitKey] = (data as { calls: number })?.calls ?? 0;
+          }
+        }
+        subscriptionData.currentUsage = currentUsage;
+      } catch (usageErr) {
+        console.warn('SubscriptionContext: Could not fetch usage stats, proceeding without current usage data');
+      }
+
       setSubscription(subscriptionData);
       // Update ref immediately so callbacks can access latest value
       subscriptionRef.current = subscriptionData;
 
+      if (subscriptionData && (subscriptionData.plan === 'free' || subscriptionData.plan === 'none')) {
+        try {
+          const verifyResponse = await apiClient.get(`/api/subscription/verify-checkout/${userId}`);
+          const verifiedData = verifyResponse.data?.data;
+          if (verifiedData && verifiedData.plan && verifiedData.plan !== 'free' && verifiedData.plan !== 'none') {
+            subscriptionData = { ...subscriptionData, ...verifiedData };
+            setSubscription(subscriptionData);
+            subscriptionRef.current = subscriptionData;
+            console.log('SubscriptionContext: Plan corrected via Stripe re-verification:', verifiedData.plan);
+          }
+        } catch {
+          // Silently ignore — Stripe may not be configured or user has no Stripe customer
+        }
+      }
+
       // Check if subscription is expired/inactive and show modal
       // Show modal if subscription is inactive on initial load (when subscription was null before)
       // This ensures the modal shows when an end user navigates to the app

frontend/src/hooks/useBlogWriterState.ts

@@ -8,16 +8,115 @@ const MINOR_TITLE_WORDS = new Set([
   'of', 'in', 'with', 'as', 'vs', 'vs.', 'into', 'over', 'under'
 ]);
 
+// Helper: read and parse localStorage synchronously (safe for useState initializer)
+const readLS = <T>(key: string, fallback: T): T => {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return fallback;
+    return JSON.parse(raw) as T;
+  } catch {
+    return fallback;
+  }
+};
+
+const readLSString = (key: string, fallback: string): string => {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw !== null ? raw : fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+const readLSBool = (key: string, fallback: boolean): boolean => {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw !== null ? raw === 'true' : fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+// Perform synchronous restoration from localStorage/caches so that
+// phase-navigation hooks see real data on the very first render.
+const restoreInitialState = () => {
+  let research: BlogResearchResponse | null = null;
+  let outline: BlogOutlineSection[] = [];
+  let titleOptions: string[] = [];
+  let selectedTitle: string = '';
+  let sections: Record<string, string> = {};
+  let seoAnalysis: BlogSEOAnalyzeResponse | null = null;
+  let seoMetadata: BlogSEOMetadataResponse | null = null;
+  let outlineConfirmed: boolean = false;
+  let contentConfirmed: boolean = false;
+
+  try {
+    // Restore research from the research cache (synchronous localStorage reads)
+    const cachedEntries = researchCache.getAllCachedEntries();
+    if (cachedEntries.length > 0) {
+      research = cachedEntries[0].result;
+    }
+
+    // Restore outline from localStorage
+    const savedOutline = readLS<BlogOutlineSection[] | null>('blog_outline', null);
+    if (savedOutline && savedOutline.length > 0) {
+      outline = savedOutline;
+
+      // Restore content sections from cache
+      const outlineIds = savedOutline.map((s: any) => String(s.id));
+      const cachedContent = blogWriterCache.getCachedContent(outlineIds);
+      if (cachedContent && Object.keys(cachedContent).length > 0) {
+        sections = cachedContent;
+      }
+    }
+
+    // Restore titles
+    titleOptions = readLS<string[]>('blog_title_options', []);
+    selectedTitle = readLSString('blog_selected_title', '');
+
+    // Restore confirmation flags
+    outlineConfirmed = readLSBool('blog_outline_confirmed', false);
+    // Backward compatibility: if outline exists but confirmation wasn't saved, assume confirmed
+    if (!outlineConfirmed && outline.length > 0) {
+      outlineConfirmed = true;
+    }
+    contentConfirmed = readLSBool('blog_content_confirmed', false);
+
+    // Restore SEO data
+    seoAnalysis = readLS<BlogSEOAnalyzeResponse | null>('blog_seo_analysis', null);
+    seoMetadata = readLS<BlogSEOMetadataResponse | null>('blog_seo_metadata', null);
+  } catch (error) {
+    console.error('Error during initial state restoration:', error);
+  }
+
+  return {
+    research,
+    outline,
+    titleOptions,
+    selectedTitle,
+    sections,
+    seoAnalysis,
+    seoMetadata,
+    outlineConfirmed,
+    contentConfirmed,
+  };
+};
+
 export const useBlogWriterState = () => {
-  // Core state
-  const [research, setResearch] = useState<BlogResearchResponse | null>(null);
-  const [outline, setOutline] = useState<BlogOutlineSection[]>([]);
-  const [titleOptions, setTitleOptions] = useState<string[]>([]);
-  const [selectedTitle, setSelectedTitle] = useState<string>('');
-  const [sections, setSections] = useState<Record<string, string>>({});
-  const [seoAnalysis, setSeoAnalysis] = useState<BlogSEOAnalyzeResponse | null>(null);
+  // Restore initial state synchronously from localStorage (like StoryWriter pattern)
+  // This ensures phase-navigation hooks see real data on the first render,
+  // preventing unwanted redirects during the async restoration gap.
+  const initialState = restoreInitialState();
+
+  // Core state — initialized from localStorage when available
+  const [research, setResearch] = useState<BlogResearchResponse | null>(initialState.research);
+  const [outline, setOutline] = useState<BlogOutlineSection[]>(initialState.outline);
+  const [titleOptions, setTitleOptions] = useState<string[]>(initialState.titleOptions);
+  const [selectedTitle, setSelectedTitle] = useState<string>(initialState.selectedTitle);
+  const [sections, setSections] = useState<Record<string, string>>(initialState.sections);
+  const [seoAnalysis, setSeoAnalysis] = useState<BlogSEOAnalyzeResponse | null>(initialState.seoAnalysis);
   const [genMode, setGenMode] = useState<'draft' | 'polished'>('polished');
-  const [seoMetadata, setSeoMetadata] = useState<BlogSEOMetadataResponse | null>(null);
+  const [seoMetadata, setSeoMetadata] = useState<BlogSEOMetadataResponse | null>(initialState.seoMetadata);
   const [continuityRefresh, setContinuityRefresh] = useState<number>(0);
   const [outlineTaskId, setOutlineTaskId] = useState<string | null>(null);
   const [flowAnalysisCompleted, setFlowAnalysisCompleted] = useState<boolean>(false);
@@ -34,10 +133,10 @@ export const useBlogWriterState = () => {
   const [aiGeneratedTitles, setAiGeneratedTitles] = useState<string[]>([]);
   
   // Outline confirmation state
-  const [outlineConfirmed, setOutlineConfirmed] = useState<boolean>(false);
+  const [outlineConfirmed, setOutlineConfirmed] = useState<boolean>(initialState.outlineConfirmed);
   
   // Content confirmation state
-  const [contentConfirmed, setContentConfirmed] = useState<boolean>(false);
+  const [contentConfirmed, setContentConfirmed] = useState<boolean>(initialState.contentConfirmed);
 
   // Section images state - persists images generated in outline phase to content phase
   const [sectionImages, setSectionImages] = useState<Record<string, string>>({});
@@ -93,79 +192,7 @@ export const useBlogWriterState = () => {
     return result;
   }, []);
 
-  const [restoreAttempted, setRestoreAttempted] = useState(false);
-
-  // Cache recovery - restore most recent research on page load
-  useEffect(() => {
-    const restoreState = async () => {
-      const cachedEntries = researchCache.getAllCachedEntries();
-      if (cachedEntries.length > 0) {
-        // Get the most recent cached research
-        const mostRecent = cachedEntries[0];
-        console.log('Restoring cached research from page load:', mostRecent.keywords);
-        setResearch(mostRecent.result);
-        
-        // Also try to restore outline if it exists in localStorage
-        try {
-          const savedOutline = localStorage.getItem('blog_outline');
-          const savedTitleOptions = localStorage.getItem('blog_title_options');
-          const savedSelectedTitle = localStorage.getItem('blog_selected_title');
-          
-          if (savedOutline) {
-            const parsedOutline = JSON.parse(savedOutline);
-            setOutline(parsedOutline);
-            
-            // Restore content sections from cache when outline is available
-            const outlineIds = parsedOutline.map((s: any) => String(s.id));
-            const cachedContent = blogWriterCache.getCachedContent(outlineIds);
-            if (cachedContent && Object.keys(cachedContent).length > 0) {
-              setSections(cachedContent);
-              console.log('Restored content sections from cache', { sections: Object.keys(cachedContent).length });
-            }
-          }
-          if (savedTitleOptions) {
-            setTitleOptions(JSON.parse(savedTitleOptions));
-          }
-          if (savedSelectedTitle) {
-            setSelectedTitle(savedSelectedTitle);
-          }
-          
-          // Restore contentConfirmed from localStorage
-          const savedContentConfirmed = localStorage.getItem('blog_content_confirmed');
-          if (savedContentConfirmed === 'true') {
-            setContentConfirmed(true);
-          }
-          
-          console.log('Restored outline, content, and title data from localStorage');
-          // Restore seoAnalysis and seoMetadata from localStorage
-        const savedSeoAnalysis = localStorage.getItem('blog_seo_analysis');
-        if (savedSeoAnalysis) {
-          try { setSeoAnalysis(JSON.parse(savedSeoAnalysis)); } catch {}
-        }
-        const savedSeoMetadata = localStorage.getItem('blog_seo_metadata');
-        if (savedSeoMetadata) {
-          try { setSeoMetadata(JSON.parse(savedSeoMetadata)); } catch {}
-        }
-
-        // Restore outlineConfirmed - if outline exists and was previously confirmed, mark as confirmed.
-        // The user had to confirm outline to reach content/SEO/publish phases.
-        const savedOutlineConfirmed = localStorage.getItem('blog_outline_confirmed');
-        if (savedOutlineConfirmed === 'true') {
-          setOutlineConfirmed(true);
-        } else if (savedOutline) {
-          // Backward compatibility: if outline exists but outline_confirmed wasn't saved,
-          // assume it was confirmed (user wouldn't have progressed without confirming).
-          setOutlineConfirmed(true);
-        }
-      } catch (error) {
-          console.error('Error restoring outline data:', error);
-        }
-      }
-      setRestoreAttempted(true);
-    };
-
-    restoreState();
-  }, []);
+  const [restoreAttempted, setRestoreAttempted] = useState(true); // Always true — state is restored synchronously
 
   // Persist contentConfirmed to localStorage whenever it changes
   useEffect(() => {

frontend/src/hooks/useCollections.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '@clerk/clerk-react';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 export interface Collection {
   id: number;
@@ -26,14 +27,6 @@ export interface CollectionUpdateRequest {
   cover_asset_id?: number;
 }
 
-const getApiBaseUrl = () => {
-  const url = process.env.REACT_APP_API_URL;
-  if (process.env.NODE_ENV === 'production' && !url) {
-    throw new Error('REACT_APP_API_URL environment variable is required for production');
-  }
-  return url || 'http://localhost:8000';
-};
-
 const API_BASE_URL = getApiBaseUrl();
 
 export const useCollections = () => {

frontend/src/hooks/useContentAssets.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useAuth } from '@clerk/clerk-react';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 export interface ContentAsset {
   id: number;
@@ -49,14 +50,6 @@ export interface AssetListResponse {
   offset: number;
 }
 
-const getApiBaseUrl = () => {
-  const url = process.env.REACT_APP_API_URL;
-  if (process.env.NODE_ENV === 'production' && !url) {
-    throw new Error('REACT_APP_API_URL environment variable is required for production');
-  }
-  return url || 'http://localhost:8000';
-};
-
 const API_BASE_URL = getApiBaseUrl();
 
 export const useContentAssets = (filters: AssetFilters = {}) => {

frontend/src/hooks/usePhaseNavigation.ts

@@ -1,7 +1,10 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useEffect, useMemo, useCallback } from 'react';
 import { BlogResearchResponse, BlogOutlineSection } from '../services/blogWriterApi';
+import { readLSString } from '../utils/persistence';
+import { usePhaseNavigationCore, usePhaseValidation } from './usePhaseNavigationCore';
+import type { PhaseBase } from './usePhaseNavigationCore';
 
-export interface Phase {
+export interface Phase extends PhaseBase {
   id: string;
   name: string;
   icon: string;
@@ -21,48 +24,26 @@ export const usePhaseNavigation = (
   seoMetadata: any,
   seoRecommendationsApplied?: boolean
 ) => {
-  // Initialize from localStorage if available
-  // If no research exists, default to empty string to show landing page
-  // Only default to 'research' if research already exists (resuming a session)
-  const VALID_PHASES = ['research', 'outline', 'content', 'seo', 'publish'];
+  // Compute adjusted initial phase: if stored as 'research' but no research
+  // data exists yet (cross-origin restore), show landing page instead.
+  const adjustedInitialPhase = ((): string => {
+    const stored = readLSString('blogwriter_current_phase', '');
+    if (stored === 'research' && !research) return '';
+    return stored;
+  })();
 
-  const getInitialPhase = (): string => {
-    try {
-      if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem('blogwriter_current_phase');
-        if (stored) {
-          if (stored === 'research' && !research) {
-            return '';
-          }
-          return stored;
-        }
-        const hashPhase = window.location.hash.replace('#', '');
-        if (hashPhase && VALID_PHASES.includes(hashPhase)) {
-          return hashPhase;
-        }
-      }
-    } catch {}
-    return research ? 'research' : '';
-  };
-
-  const [currentPhase, setCurrentPhase] = useState<string>(getInitialPhase());
-  const [userSelectedPhase, setUserSelectedPhase] = useState<boolean>(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem('blogwriter_user_selected_phase');
-        return stored === 'true';
-      }
-    } catch {}
-    return false;
+  const core = usePhaseNavigationCore({
+    phaseKey: 'blogwriter_current_phase',
+    userSelectedKey: 'blogwriter_user_selected_phase',
+    emptyPhaseId: '',
+    initialPhase: adjustedInitialPhase,
   });
-  const lastClickAtRef = useRef<number>(0);
 
   // Determine phase states based on current data
   const phases = useMemo((): Phase[] => {
     const researchCompleted = !!research;
     const outlineCompleted = outline.length > 0;
     const contentCompleted = hasContent && contentConfirmed;
-    // SEO is complete when analysis exists AND recommendations are applied
     const seoCompleted = !!seoAnalysis && (seoRecommendationsApplied === true || !!seoMetadata);
 
     return [
@@ -72,8 +53,8 @@ export const usePhaseNavigation = (
         icon: '🔍',
         description: 'Research your topic and gather data',
         completed: researchCompleted,
-        current: currentPhase === 'research',
-        disabled: false // Research is always accessible
+        current: core.currentPhase === 'research',
+        disabled: false,
       },
       {
         id: 'outline',
@@ -81,8 +62,8 @@ export const usePhaseNavigation = (
         icon: '📝',
         description: 'Create and refine your blog outline',
         completed: outlineCompleted,
-        current: currentPhase === 'outline',
-        disabled: !researchCompleted // Disabled only if research not completed (can always go back if completed)
+        current: core.currentPhase === 'outline',
+        disabled: !researchCompleted,
       },
       {
         id: 'content',
@@ -90,8 +71,8 @@ export const usePhaseNavigation = (
         icon: '✍️',
         description: 'Generate and edit your blog content',
         completed: contentCompleted,
-        current: currentPhase === 'content',
-        disabled: !outlineCompleted // Disabled only if outline not completed (can always go back if completed)
+        current: core.currentPhase === 'content',
+        disabled: !outlineCompleted,
       },
       {
         id: 'seo',
@@ -99,145 +80,88 @@ export const usePhaseNavigation = (
         icon: '📈',
         description: 'Optimize for search engines',
         completed: seoCompleted,
-        current: currentPhase === 'seo',
-        disabled: !contentCompleted // Disabled only if content not completed (can always go back if completed)
+        current: core.currentPhase === 'seo',
+        disabled: !contentCompleted,
       },
       {
         id: 'publish',
         name: 'Publish',
         icon: '🚀',
         description: 'Publish your blog post',
-        completed: false, // This would be set when actually published
-        current: currentPhase === 'publish',
-        disabled: !seoCompleted // Can access if SEO done
-      }
+        completed: false,
+        current: core.currentPhase === 'publish',
+        disabled: !seoCompleted,
+      },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [research, outline, outlineConfirmed, hasContent, contentConfirmed, seoAnalysis, seoMetadata, seoRecommendationsApplied, currentPhase]);
+  }, [research, outline, outlineConfirmed, hasContent, contentConfirmed, seoAnalysis, seoMetadata, seoRecommendationsApplied, core.currentPhase]);
 
-  // Persist current phase and user selection
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem('blogwriter_current_phase', currentPhase);
-        window.localStorage.setItem('blogwriter_user_selected_phase', String(userSelectedPhase));
-      }
-    } catch {}
-  }, [currentPhase, userSelectedPhase]);
-
-  // Validate stored phase against current availability (quiet)
-  useEffect(() => {
-    // Allow empty string as a valid phase (landing page state)
-    if (currentPhase === '') {
-      return; // Don't validate empty phase - it's intentional for landing page
-    }
-
-    // If user manually selected this phase, respect their choice even if data
-    // hasn't been restored yet (e.g., on page load before cache restoration).
-    // The data restoration effects will populate the necessary state shortly.
-    if (userSelectedPhase) {
-      return;
-    }
-    
-    const current = phases.find(p => p.id === currentPhase);
-    if (!current) {
-      // If phase not found and no research exists, go to landing (empty string)
-      // Otherwise, default to research
-      setCurrentPhase(research ? 'research' : '');
-      return;
-    }
-    if (current.disabled) {
-      // Find the first non-disabled phase in order of progression the user qualifies for
-      // If no research exists, default to landing (empty string) instead of research
-      const fallback = phases.find(p => !p.disabled) || ({ id: research ? 'research' : '' } as Phase);
-      if (fallback.id !== currentPhase) {
-        setCurrentPhase(fallback.id);
-      }
-    }
-  }, [phases, currentPhase, research, userSelectedPhase]);
+  // Shared validation: redirect if current phase is disabled
+  usePhaseValidation(
+    phases,
+    core.currentPhase,
+    core.userSelectedPhase,
+    core.setCurrentPhase,
+    core.oscillationGuardRef,
+    '',
+    research,
+  );
 
   // Auto-update current phase based on completion status (only if user hasn't manually selected a phase)
   useEffect(() => {
-    if (userSelectedPhase) {
-      return; // Don't auto-update if user has manually selected a phase
-    }
-    
-    // If no research exists and phase is empty/landing, stay on landing
-    if (!research && currentPhase === '') {
-      return; // Keep showing landing page
+    if (core.userSelectedPhase) {
+      return;
     }
 
-    // Auto-progress to the next available phase when conditions are met
+    if (!research && core.currentPhase === '') {
+      return;
+    }
+
+    const canNavigateTo = (phaseId: string): boolean => {
+      const phase = phases.find(p => p.id === phaseId);
+      return !!phase && !phase.disabled;
+    };
+
     if (research && outline.length === 0) {
-      // Research completed, but no outline yet - stay on research
-      if (currentPhase !== 'research') {
-        setCurrentPhase('research');
+      if (core.currentPhase !== 'research') {
+        core.setCurrentPhase('research');
       }
     } else if (research && outline.length > 0 && !outlineConfirmed) {
-      // Outline created but not confirmed - move to outline phase
-      if (currentPhase !== 'outline') {
-        setCurrentPhase('outline');
+      if (core.currentPhase !== 'outline' && canNavigateTo('outline')) {
+        core.setCurrentPhase('outline');
       }
     } else if (outlineConfirmed && hasContent && !contentConfirmed) {
-      // Content generated but not confirmed - move to content phase
-      if (currentPhase !== 'content') {
-        setCurrentPhase('content');
+      if (core.currentPhase !== 'content' && canNavigateTo('content')) {
+        core.setCurrentPhase('content');
       }
     } else if (contentConfirmed && !seoAnalysis) {
-      // Content confirmed but no SEO analysis yet - move to SEO phase
-      if (currentPhase !== 'seo') {
-        setCurrentPhase('seo');
+      if (core.currentPhase !== 'seo' && canNavigateTo('seo')) {
+        core.setCurrentPhase('seo');
       }
     } else if (seoAnalysis && !seoRecommendationsApplied && !seoMetadata) {
-      // SEO analysis done but recommendations not applied - stay on SEO phase
-      if (currentPhase !== 'seo') {
-        setCurrentPhase('seo');
+      if (core.currentPhase !== 'seo' && canNavigateTo('seo')) {
+        core.setCurrentPhase('seo');
       }
     } else if (seoAnalysis && (seoRecommendationsApplied || seoMetadata)) {
-      // SEO recommendations applied or metadata generated
-      if (currentPhase === 'seo') {
-        // CRITICAL: Stay in SEO phase so user can review updated content - don't auto-progress
-        // User will manually navigate to publish when ready
-        // This prevents blank screen by keeping user in SEO phase where BlogEditor is visible
-        // No action needed - already in SEO phase, stay here
-      } else {
-        // User is NOT in SEO phase - can progress to publish
-        // This handles cases where user navigates away and comes back
-        // Only auto-progress if user is already in a different phase (not actively in SEO)
-      if (currentPhase !== 'publish') {
-        setCurrentPhase('publish');
-        }
+      if (core.currentPhase === 'seo') {
+        // Stay in SEO phase so user can review — don't auto-progress
+      } else if (core.currentPhase !== 'publish' && canNavigateTo('publish')) {
+        core.setCurrentPhase('publish');
       }
     }
-  }, [research, outline, outlineConfirmed, hasContent, contentConfirmed, seoAnalysis, seoMetadata, seoRecommendationsApplied, currentPhase, userSelectedPhase]);
+  }, [research, outline, outlineConfirmed, hasContent, contentConfirmed, seoAnalysis, seoMetadata, seoRecommendationsApplied, core.currentPhase, core.userSelectedPhase, phases]);
 
-  const navigateToPhase = useCallback((phaseId: string) => {
-    // Minimal debounce (200ms) to avoid race conditions on rapid clicks
-    const now = Date.now();
-    if (now - lastClickAtRef.current < 200) { return; }
-    lastClickAtRef.current = now;
-
-    const phase = phases.find(p => p.id === phaseId);
-
-    if (phase && !phase.disabled) {
-      setCurrentPhase(phaseId);
-      setUserSelectedPhase(true); // Mark that user has manually selected a phase
-    } else {
-      // Quietly ignore blocked navigation
-    }
-  }, [phases, currentPhase]);
-
-  // Reset user selection when a new phase is completed (to allow auto-progression)
-  const resetUserSelection = () => {
-    setUserSelectedPhase(false);
-  };
+  const navigateToPhase = useCallback(
+    (phaseId: string) => core.navigateToPhase(phaseId, phases),
+    [core.navigateToPhase, phases],
+  );
 
   return {
     phases,
-    currentPhase,
+    currentPhase: core.currentPhase,
     navigateToPhase,
-    setCurrentPhase,
-    resetUserSelection
+    setCurrentPhase: core.setCurrentPhase,
+    resetUserSelection: core.resetUserSelection,
   };
 };
 

frontend/src/hooks/usePhaseNavigationCore.ts

@@ -0,0 +1,183 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { readLSString, readLSBool } from '../utils/persistence';
+
+export interface PhaseBase {
+  id: string;
+  disabled: boolean;
+}
+
+export interface PhaseNavigationConfig {
+  /** localStorage key for the current phase */
+  phaseKey: string;
+  /** localStorage key for the user-selected flag */
+  userSelectedKey: string;
+  /**
+   * Default phase shown when no progress exists.
+   * BlogWriter uses `''` (landing page), StoryWriter uses `'setup'`.
+   */
+  emptyPhaseId?: string;
+  /**
+   * Override the initial phase instead of reading from localStorage.
+   * Used when the stored phase is stale (e.g., 'research' stored but no
+   * research data exists yet on a different origin).
+   */
+  initialPhase?: string;
+}
+
+interface OscillationState {
+  from: string;
+  to: string;
+  count: number;
+  lastTime: number;
+}
+
+export interface UsePhaseNavigationCoreReturn {
+  currentPhase: string;
+  setCurrentPhase: (phase: string) => void;
+  userSelectedPhase: boolean;
+  navigateToPhase: (phaseId: string, phases: PhaseBase[]) => void;
+  resetUserSelection: () => void;
+  oscillationGuardRef: React.MutableRefObject<OscillationState>;
+  lastClickAtRef: React.MutableRefObject<number>;
+}
+
+/**
+ * Core phase navigation state management shared across BlogWriter,
+ * StoryWriter, etc.
+ *
+ * Handles:
+ * - Initializing phase + user-selected state from localStorage
+ * - Persisting state back to localStorage on changes
+ * - User-tracking flag (auto-progression vs. manual selection)
+ * - Click debouncing (200ms)
+ *
+ * Does NOT handle:
+ * - Phase definitions (phases array) — product-specific
+ * - Phase validation effect — use usePhaseValidation() separately
+ * - Auto-update / auto-progression effect — product-specific
+ */
+export const usePhaseNavigationCore = (
+  config: PhaseNavigationConfig,
+): UsePhaseNavigationCoreReturn => {
+  const { phaseKey, userSelectedKey, emptyPhaseId = '' } = config;
+
+  const [currentPhase, setCurrentPhase] = useState<string>(() => {
+    if (config.initialPhase !== undefined) return config.initialPhase;
+    try {
+      if (typeof window === 'undefined') return emptyPhaseId;
+      return readLSString(phaseKey, emptyPhaseId);
+    } catch {
+      return emptyPhaseId;
+    }
+  });
+
+  const [userSelectedPhase, setUserSelectedPhase] = useState<boolean>(() => {
+    try {
+      if (typeof window !== 'undefined') {
+        return readLSBool(userSelectedKey, false);
+      }
+    } catch { /* noop */ }
+    return false;
+  });
+
+  const lastClickAtRef = useRef<number>(0);
+  const oscillationGuardRef = useRef<OscillationState>({
+    from: '', to: '', count: 0, lastTime: 0,
+  });
+
+  // Persist to localStorage on change
+  useEffect(() => {
+    try { localStorage.setItem(phaseKey, currentPhase); } catch { /* noop */ }
+  }, [currentPhase, phaseKey]);
+
+  useEffect(() => {
+    try { localStorage.setItem(userSelectedKey, String(userSelectedPhase)); } catch { /* noop */ }
+  }, [userSelectedPhase, userSelectedKey]);
+
+  const navigateToPhase = useCallback((phaseId: string, phases: PhaseBase[]) => {
+    const now = Date.now();
+    if (now - lastClickAtRef.current < 200) return;
+    lastClickAtRef.current = now;
+
+    const phase = phases.find(p => p.id === phaseId);
+    if (phase && !phase.disabled) {
+      setCurrentPhase(phaseId);
+      setUserSelectedPhase(true);
+    }
+  }, []);
+
+  const resetUserSelection = useCallback(() => {
+    setUserSelectedPhase(false);
+  }, []);
+
+  return {
+    currentPhase,
+    setCurrentPhase,
+    userSelectedPhase,
+    navigateToPhase,
+    resetUserSelection,
+    oscillationGuardRef,
+    lastClickAtRef,
+  };
+};
+
+/**
+ * Shared phase validation effect.
+ *
+ * Checks that the current phase is still valid (not disabled) given the
+ * latest data. If the phase is disabled, redirects to the first
+ * non-disabled phase with oscillation detection to prevent bouncing.
+ */
+export function usePhaseValidation(
+  phases: PhaseBase[],
+  currentPhase: string,
+  userSelectedPhase: boolean,
+  setCurrentPhase: (phase: string) => void,
+  oscillationGuardRef: React.MutableRefObject<OscillationState>,
+  emptyPhaseId: string,
+  research?: any,
+): void {
+  useEffect(() => {
+    if (currentPhase === emptyPhaseId) return;
+    if (userSelectedPhase) return;
+
+    const current = phases.find(p => p.id === currentPhase);
+    if (!current) {
+      setCurrentPhase(research ? 'research' : emptyPhaseId);
+      return;
+    }
+    if (current.disabled) {
+      const guard = oscillationGuardRef.current;
+      const now = Date.now();
+
+      // Oscillation guard: detect rapid bouncing between two phases
+      if (guard.from === currentPhase && guard.count >= 3 && (now - guard.lastTime) < 1000) {
+        return;
+      }
+      if (guard.to !== currentPhase) {
+        oscillationGuardRef.current = { from: currentPhase, to: '', count: 1, lastTime: now };
+      }
+
+      const fallback = phases.find(p => !p.disabled);
+      if (fallback && fallback.id !== currentPhase) {
+        oscillationGuardRef.current = {
+          ...oscillationGuardRef.current,
+          to: fallback.id,
+          count: guard.from === currentPhase ? guard.count + 1 : 1,
+          lastTime: now,
+        };
+        setCurrentPhase(fallback.id);
+      }
+    }
+  }, [
+    phases,
+    currentPhase,
+    userSelectedPhase,
+    setCurrentPhase,
+    oscillationGuardRef,
+    emptyPhaseId,
+    research,
+  ]);
+}
+
+export default usePhaseNavigationCore;

frontend/src/hooks/usePodcastProjectState.ts

@@ -73,6 +73,7 @@ const DEFAULT_KNOBS: Knobs = {
   is_voice_clone: undefined,
   voice_sample_url: undefined,
   voice_clone_engine: undefined,
+  voice_clone_stale: false,
   resolution: "720p",
   scene_length_target: 45,
   sample_rate: 24000,
@@ -85,7 +86,6 @@ const DEFAULT_KNOBS: Knobs = {
  * automatically pick up the latest voice clone info.
  */
 function mergeVoiceCloneCacheIntoKnobs(knobs: Knobs): Knobs {
-  // If knobs already has a custom voice ID, trust it (user explicitly set it)
   if (knobs.custom_voice_id) {
     return knobs;
   }
@@ -100,6 +100,7 @@ function mergeVoiceCloneCacheIntoKnobs(knobs: Knobs): Knobs {
     is_voice_clone: true,
     voice_sample_url: cached.voiceSampleUrl,
     voice_clone_engine: cached.engine || "qwen3",
+    voice_clone_stale: cached.stale || false,
   };
 }
 

frontend/src/hooks/useRealTimeData.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 interface RealTimeDataOptions {
   strategyId: number;
@@ -50,14 +51,6 @@ export const useRealTimeData = (options: RealTimeDataOptions) => {
 
     try {
       // Build WebSocket URL from environment variables
-      const getApiBaseUrl = () => {
-        const url = process.env.REACT_APP_API_URL;
-        if (process.env.NODE_ENV === 'production' && !url) {
-          throw new Error('REACT_APP_API_URL environment variable is required for production');
-        }
-        return url || 'http://localhost:8000';
-      };
-      
       const apiUrl = getApiBaseUrl();
       
       // In development, use proxy (empty string means use same origin)

frontend/src/hooks/useResearchSubmit.ts

@@ -1,8 +1,23 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { blogWriterApi, BlogResearchRequest, BlogResearchResponse } from '../services/blogWriterApi';
 import { useBlogWriterResearchPolling } from './usePolling';
 import { researchCache } from '../services/researchCache';
 
+// Simulated progress messages shown while waiting for real backend updates.
+// Research takes 40-60s; the backend sends 5-8 messages. These bridge the gaps
+// so the user always sees something helpful.
+const SIMULATED_MESSAGES: Array<{ delaySec: number; message: string }> = [
+  { delaySec: 3,  message: '🔍 Validating keywords and preparing search queries…' },
+  { delaySec: 8,  message: '🌐 Connecting to Exa deep-web search for authoritative sources…' },
+  { delaySec: 14, message: '📊 Analyzing top-ranking pages and extracting structured data…' },
+  { delaySec: 20, message: '🔍 Running Tavily real-time web search for current coverage…' },
+  { delaySec: 26, message: '🧠 Cross-referencing results from multiple search engines…' },
+  { delaySec: 32, message: '📋 Extracting key statistics, quotes, and content angles…' },
+  { delaySec: 38, message: '🔬 Filtering and ranking sources by authority and relevance…' },
+  { delaySec: 44, message: '📦 Assembling your research brief with source citations…' },
+  { delaySec: 50, message: '💾 Caching results for future use — next up: Outline phase' },
+];
+
 export interface UseResearchSubmitOptions {
   onResearchComplete?: (research: BlogResearchResponse) => void;
   navigateToPhase?: (phase: string) => void;
@@ -29,6 +44,8 @@ export const useResearchSubmit = ({
   const [showProgressModal, setShowProgressModal] = useState(false);
   const [currentMessage, setCurrentMessage] = useState('');
   const keywordListRef = useRef<string[]>([]);
+  const simulatedTimersRef = useRef<NodeJS.Timeout[]>([]);
+  const startedAtRef = useRef<number>(0);
 
   const polling = useBlogWriterResearchPolling({
     onProgress: (message) => {
@@ -43,18 +60,43 @@ export const useResearchSubmit = ({
           result
         );
       }
+      // Clear any pending simulated messages
+      simulatedTimersRef.current.forEach(clearTimeout);
+      simulatedTimersRef.current = [];
       onResearchComplete?.(result);
       setCurrentMessage('');
       setShowProgressModal(false);
       setIsSubmitting(false);
     },
     onError: (error) => {
+      simulatedTimersRef.current.forEach(clearTimeout);
+      simulatedTimersRef.current = [];
       setCurrentMessage('');
       setShowProgressModal(false);
       setIsSubmitting(false);
     },
   });
 
+  // Schedule simulated progress messages when modal is open and polling is active
+  useEffect(() => {
+    if (!showProgressModal || !isSubmitting) {
+      return;
+    }
+    const elapsed = Date.now() - startedAtRef.current;
+    SIMULATED_MESSAGES.forEach(({ delaySec, message }) => {
+      const msUntil = (delaySec * 1000) - elapsed;
+      if (msUntil <= 0) return; // already past this point
+      const timer = setTimeout(() => {
+        setCurrentMessage(message);
+      }, msUntil);
+      simulatedTimersRef.current.push(timer);
+    });
+    return () => {
+      simulatedTimersRef.current.forEach(clearTimeout);
+      simulatedTimersRef.current = [];
+    };
+  }, [showProgressModal, isSubmitting]);
+
   const startResearch = useCallback(async (
     keywords: string,
     blogLength: string = '1000',
@@ -65,6 +107,7 @@ export const useResearchSubmit = ({
     if (!trimmed) return null;
 
     setIsSubmitting(true);
+    startedAtRef.current = Date.now();
 
     try {
       const keywordList = trimmed.includes(',')
@@ -83,7 +126,7 @@ export const useResearchSubmit = ({
       navigateToPhase?.('research');
 
       setShowProgressModal(true);
-      setCurrentMessage('Starting research...');
+      setCurrentMessage('🔍 Research pipeline initializing — validating your topic and preparing search queries…');
 
       const payload: BlogResearchRequest = {
         keywords: keywordList,
@@ -96,6 +139,8 @@ export const useResearchSubmit = ({
       polling.startPolling(task_id);
       return null;
     } catch (error) {
+      simulatedTimersRef.current.forEach(clearTimeout);
+      simulatedTimersRef.current = [];
       setCurrentMessage('');
       setShowProgressModal(false);
       setIsSubmitting(false);

frontend/src/hooks/useStoryWriterPhaseNavigation.ts

@@ -1,6 +1,8 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useEffect, useMemo, useCallback } from 'react';
+import { usePhaseNavigationCore, usePhaseValidation } from './usePhaseNavigationCore';
+import type { PhaseBase } from './usePhaseNavigationCore';
 
-export interface StoryPhase {
+export interface StoryPhase extends PhaseBase {
   id: 'setup' | 'outline' | 'writing' | 'export';
   name: string;
   icon: string;
@@ -23,32 +25,15 @@ export const useStoryWriterPhaseNavigation = ({
   hasStoryContent,
   isComplete,
 }: UseStoryWriterPhaseNavigationParams) => {
-  // Initialize from localStorage if available
-  const getInitialPhase = (): string => {
-    try {
-      if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem('storywriter_current_phase');
-        if (stored) return stored;
-      }
-    } catch {}
-    return 'setup';
-  };
-
-  const [currentPhase, setCurrentPhase] = useState<string>(getInitialPhase());
-  const [userSelectedPhase, setUserSelectedPhase] = useState<boolean>(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem('storywriter_user_selected_phase');
-        return stored === 'true';
-      }
-    } catch {}
-    return false;
+  const core = usePhaseNavigationCore({
+    phaseKey: 'storywriter_current_phase',
+    userSelectedKey: 'storywriter_user_selected_phase',
+    emptyPhaseId: 'setup',
   });
-  const lastClickAtRef = useRef<number>(0);
 
   // Determine phase states based on current data
   const phases = useMemo((): StoryPhase[] => {
-    const setupCompleted = hasPremise; // Setup is complete when premise exists
+    const setupCompleted = hasPremise;
     const outlineCompleted = hasOutline;
     const writingCompleted = hasStoryContent && isComplete;
     const exportCompleted = isComplete;
@@ -60,8 +45,8 @@ export const useStoryWriterPhaseNavigation = ({
         icon: '⚙️',
         description: 'Configure your story parameters and premise',
         completed: setupCompleted,
-        current: currentPhase === 'setup',
-        disabled: false, // Always accessible
+        current: core.currentPhase === 'setup',
+        disabled: false,
       },
       {
         id: 'outline',
@@ -69,8 +54,8 @@ export const useStoryWriterPhaseNavigation = ({
         icon: '📝',
         description: 'Generate and refine story outline',
         completed: outlineCompleted,
-        current: currentPhase === 'outline',
-        disabled: !hasPremise, // Need premise first
+        current: core.currentPhase === 'outline',
+        disabled: !hasPremise,
       },
       {
         id: 'writing',
@@ -78,8 +63,8 @@ export const useStoryWriterPhaseNavigation = ({
         icon: '✍️',
         description: 'Generate and edit your story',
         completed: writingCompleted,
-        current: currentPhase === 'writing',
-        disabled: !hasOutline, // Need outline first
+        current: core.currentPhase === 'writing',
+        disabled: !hasOutline,
       },
       {
         id: 'export',
@@ -87,97 +72,58 @@ export const useStoryWriterPhaseNavigation = ({
         icon: '📤',
         description: 'Export your completed story',
         completed: exportCompleted,
-        current: currentPhase === 'export',
-        disabled: !hasStoryContent, // Need story content first
+        current: core.currentPhase === 'export',
+        disabled: !hasStoryContent,
       },
     ];
-  }, [hasPremise, hasOutline, hasStoryContent, isComplete, currentPhase]);
+  }, [hasPremise, hasOutline, hasStoryContent, isComplete, core.currentPhase]);
 
-  // Persist current phase and user selection
-  useEffect(() => {
-    try {
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem('storywriter_current_phase', currentPhase);
-        window.localStorage.setItem('storywriter_user_selected_phase', String(userSelectedPhase));
-      }
-    } catch {}
-  }, [currentPhase, userSelectedPhase]);
-
-  // Validate stored phase against current availability (quiet)
-  // Also migrate old 'premise' phase to 'outline' if needed
-  useEffect(() => {
-    // Migrate old 'premise' phase to 'outline' if stored
-    if (currentPhase === 'premise') {
-      if (hasPremise) {
-        setCurrentPhase('outline');
-      } else {
-        setCurrentPhase('setup');
-      }
-      return;
-    }
-    
-    const current = phases.find((p) => p.id === currentPhase);
-    if (!current) {
-      setCurrentPhase('setup');
-      return;
-    }
-    if (current.disabled) {
-      // Find the first non-disabled phase in order of progression
-      const fallback = phases.find((p) => !p.disabled) || ({ id: 'setup' } as StoryPhase);
-      if (fallback.id !== currentPhase) {
-        setCurrentPhase(fallback.id);
-      }
-    }
-  }, [phases, currentPhase, hasPremise]);
-
-  // Auto-update current phase based on completion status (only if user hasn't manually selected)
-  useEffect(() => {
-    if (userSelectedPhase) {
-      return; // Don't auto-update if user has manually selected a phase
-    }
-
-    // Auto-progress to the next available phase when conditions are met
-    if (!hasPremise && currentPhase !== 'setup') {
-      setCurrentPhase('setup');
-    } else if (hasPremise && !hasOutline && currentPhase !== 'outline') {
-      setCurrentPhase('outline');
-    } else if (hasOutline && !hasStoryContent && currentPhase !== 'writing') {
-      setCurrentPhase('writing');
-    } else if (hasStoryContent && !isComplete && currentPhase !== 'export') {
-      setCurrentPhase('export');
-    }
-  }, [hasPremise, hasOutline, hasStoryContent, isComplete, currentPhase, userSelectedPhase]);
-
-  const navigateToPhase = useCallback(
-    (phaseId: string) => {
-      // Minimal debounce (200ms) to avoid race conditions on rapid clicks
-      const now = Date.now();
-      if (now - lastClickAtRef.current < 200) {
-        return;
-      }
-      lastClickAtRef.current = now;
-
-      const phase = phases.find((p) => p.id === phaseId);
-
-      if (phase && !phase.disabled) {
-        setCurrentPhase(phaseId);
-        setUserSelectedPhase(true); // Mark that user has manually selected a phase
-      }
-    },
-    [phases]
+  // Shared validation: redirect if current phase is disabled
+  usePhaseValidation(
+    phases,
+    core.currentPhase,
+    core.userSelectedPhase,
+    core.setCurrentPhase,
+    core.oscillationGuardRef,
+    'setup',
   );
 
-  // Reset user selection when a new phase is completed (to allow auto-progression)
-  const resetUserSelection = useCallback(() => {
-    setUserSelectedPhase(false);
-  }, []);
+  // Migration: old 'premise' phase → 'outline' or 'setup'
+  // Runs after usePhaseValidation so it overrides the redirect to 'setup'.
+  useEffect(() => {
+    if (core.currentPhase === 'premise') {
+      core.setCurrentPhase(hasPremise ? 'outline' : 'setup');
+    }
+  }, [core.currentPhase, core.setCurrentPhase, hasPremise]);
+
+  // Auto-update current phase based on completion status
+  useEffect(() => {
+    if (core.userSelectedPhase) {
+      return;
+    }
+
+    if (!hasPremise && core.currentPhase !== 'setup') {
+      core.setCurrentPhase('setup');
+    } else if (hasPremise && !hasOutline && core.currentPhase !== 'outline') {
+      core.setCurrentPhase('outline');
+    } else if (hasOutline && !hasStoryContent && core.currentPhase !== 'writing') {
+      core.setCurrentPhase('writing');
+    } else if (hasStoryContent && !isComplete && core.currentPhase !== 'export') {
+      core.setCurrentPhase('export');
+    }
+  }, [hasPremise, hasOutline, hasStoryContent, isComplete, core.currentPhase, core.userSelectedPhase]);
+
+  const navigateToPhase = useCallback(
+    (phaseId: string) => core.navigateToPhase(phaseId, phases),
+    [core.navigateToPhase, phases],
+  );
 
   return {
     phases,
-    currentPhase,
+    currentPhase: core.currentPhase,
     navigateToPhase,
-    setCurrentPhase,
-    resetUserSelection,
+    setCurrentPhase: core.setCurrentPhase,
+    resetUserSelection: core.resetUserSelection,
   };
 };
 

frontend/src/hooks/useSubscriptionGuard.ts

@@ -59,44 +59,10 @@ export const useSubscriptionGuard = (options: SubscriptionGuardOptions = {}) =>
   const getRemainingUsage = (feature: string): number => {
     if (!subscription?.active) return 0;
 
-    // This would typically come from usage tracking
-    // For now, return the limit as remaining usage
-    switch (feature) {
-      case 'gemini_calls':
-        return subscription.limits.gemini_calls;
-      case 'openai_calls':
-        return subscription.limits.openai_calls;
-      case 'anthropic_calls':
-        return subscription.limits.anthropic_calls;
-      case 'mistral_calls':
-        return subscription.limits.mistral_calls;
-      case 'tavily_calls':
-        return subscription.limits.tavily_calls;
-      case 'serper_calls':
-        return subscription.limits.serper_calls;
-      case 'metaphor_calls':
-        return subscription.limits.metaphor_calls;
-      case 'firecrawl_calls':
-        return subscription.limits.firecrawl_calls;
-      case 'stability_calls':
-        return subscription.limits.stability_calls;
-      case 'video_calls':
-        return subscription.limits.video_calls || 0;
-      case 'image_edit_calls':
-        return subscription.limits.image_edit_calls || 0;
-      case 'audio_calls':
-        return subscription.limits.audio_calls || 0;
-      case 'ai_text_generation_calls':
-        return subscription.limits.ai_text_generation_calls || 0;
-      case 'exa_calls':
-        return subscription.limits.exa_calls || 0;
-      case 'wavespeed_calls':
-        return subscription.limits.wavespeed_calls || 0;
-      case 'monthly_cost':
-        return subscription.limits.monthly_cost;
-      default:
-        return 0;
-    }
+    const limit = subscription.limits[feature as keyof typeof subscription.limits] ?? 0;
+    const used = subscription.currentUsage?.[feature as keyof typeof subscription.limits] ?? 0;
+    const remaining = Math.max(0, limit - used);
+    return remaining;
   };
 
   return {

frontend/src/services/chartApi.ts

@@ -1,4 +1,5 @@
 import { aiApiClient, getAuthTokenGetter } from '../api/client';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 export interface ChartGenerateRequest {
   chart_data?: Record<string, any>;
@@ -23,11 +24,7 @@ class ChartApiService {
   private baseUrl: string;
 
   constructor() {
-    const url = process.env.REACT_APP_API_URL;
-    if (process.env.NODE_ENV === 'production' && !url) {
-      throw new Error('REACT_APP_API_URL environment variable is required for production');
-    }
-    this.baseUrl = url || 'http://localhost:8000';
+    this.baseUrl = getApiBaseUrl();
   }
 
   async generateChartExplicit(params: {

frontend/src/services/hallucinationDetectorService.ts

@@ -3,6 +3,7 @@
  */
 
 import { longRunningApiClient } from '../api/client';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 export interface SourceDocument {
   title: string;
@@ -79,13 +80,6 @@ class HallucinationDetectorService {
   private baseUrl: string;
 
   constructor() {
-    const getApiBaseUrl = () => {
-      const url = process.env.REACT_APP_API_URL;
-      if (process.env.NODE_ENV === 'production' && !url) {
-        throw new Error('REACT_APP_API_URL environment variable is required for production');
-      }
-      return url || 'http://localhost:8000';
-    };
     this.baseUrl = getApiBaseUrl();
   }
 

frontend/src/services/linkApi.ts

@@ -1,4 +1,5 @@
 import { aiApiClient } from '../api/client';
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 export interface LinkSearchRequest {
   query: string;
@@ -37,11 +38,7 @@ class LinkApiService {
   private baseUrl: string;
 
   constructor() {
-    const url = process.env.REACT_APP_API_URL;
-    if (process.env.NODE_ENV === 'production' && !url) {
-      throw new Error('REACT_APP_API_URL environment variable is required for production');
-    }
-    this.baseUrl = url || 'http://localhost:8000';
+    this.baseUrl = getApiBaseUrl();
   }
 
   async searchLinks(params: LinkSearchRequest): Promise<LinkSearchResponse> {

frontend/src/services/podcastApi.ts

@@ -39,14 +39,14 @@ const DEFAULT_KNOBS: Knobs = {
 };
 
 const VOICE_CLONE_STORAGE_KEY = "alwrity_voice_clone_info";
-const VOICE_CLONE_CACHE_TTL = 30 * 60 * 1000; // 30 minutes
+const VOICE_CLONE_CACHE_TTL = 2 * 60 * 60 * 1000; // 2 hours (WaveSpeed IDs last longer than documented 30 min)
 
 function _readVoiceCloneCache() {
   try {
     const raw = localStorage.getItem(VOICE_CLONE_STORAGE_KEY);
     if (!raw) return null;
     const parsed = JSON.parse(raw);
-    if (parsed && typeof parsed.timestamp === "number" && Date.now() - parsed.timestamp < VOICE_CLONE_CACHE_TTL) {
+    if (parsed && typeof parsed.timestamp === "number") {
       return parsed;
     }
   } catch {
@@ -78,10 +78,14 @@ function _clearVoiceCloneCache() {
 
 /**
  * Get cached voice clone info from localStorage (survives page refresh).
- * Returns null if expired (>30 min) or not set.
+ * Returns null if not set. Includes `stale` flag if older than 2 hours
+ * so consumers can proactively re-clone before the API rejects the ID.
  */
-export function getCachedVoiceCloneInfo() {
-  return _readVoiceCloneCache();
+export function getCachedVoiceCloneInfo(): (ReturnType<typeof _readVoiceCloneCache> & { stale?: boolean }) | null {
+  const cached = _readVoiceCloneCache();
+  if (!cached) return null;
+  const stale = typeof cached.timestamp === "number" && Date.now() - cached.timestamp > VOICE_CLONE_CACHE_TTL;
+  return { ...cached, stale };
 }
 
 /**

frontend/src/services/seoApiService.ts

@@ -11,15 +11,7 @@ import {
   CopilotActionResponse,
   CopilotSuggestion
 } from '../types/seoCopilotTypes';
-
-// API URL - require REACT_APP_API_URL in production
-const getApiBaseUrl = () => {
-  const url = process.env.REACT_APP_API_URL;
-  if (process.env.NODE_ENV === 'production' && !url) {
-    throw new Error('REACT_APP_API_URL environment variable is required for production');
-  }
-  return url || 'http://localhost:8000';
-};
+import { getApiBaseUrl } from '../utils/apiUrl';
 
 const API_BASE_URL = getApiBaseUrl();
 

frontend/src/services/writingAssistantService.ts

@@ -1,3 +1,5 @@
+import { getApiBaseUrl } from '../utils/apiUrl';
+
 export interface WASource {
   title: string;
   url: string;
@@ -22,13 +24,6 @@ class WritingAssistantService {
   private baseUrl: string;
   private authTokenGetter: (() => Promise<string | null>) | null = null;
   constructor() {
-    const getApiBaseUrl = () => {
-      const url = process.env.REACT_APP_API_URL;
-      if (process.env.NODE_ENV === 'production' && !url) {
-        throw new Error('REACT_APP_API_URL environment variable is required for production');
-      }
-      return url || 'http://localhost:8000';
-    };
     this.baseUrl = getApiBaseUrl();
   }
 

frontend/src/stores/backlinkOutreachStore.ts

@@ -5,16 +5,44 @@ import {
   BacklinkCoverageResponse,
   BacklinkModuleRecord,
   CampaignDetailResponse,
+  CampaignAnalyticsResponse,
   createBacklinkCampaign,
   discoverDeepBacklinkOpportunities,
   EnrichedOpportunity,
   fetchBacklinkMigrationCoverage,
   fetchBacklinkModuleRegistry,
   fetchCampaignDetail,
+  fetchCampaignAnalytics,
+  FollowUpScheduleRecord,
   LeadRecord,
   listBacklinkCampaigns,
+  sendOutreach,
+  SendOutreachRequest,
+  SendOutreachResponse,
+  OutreachAttemptRecord,
+  fetchCampaignAttempts,
+  OutreachReplyRecord,
+  fetchCampaignReplies,
+  fetchFollowUps as apiFetchFollowUps,
 } from '../api/backlinkOutreachApi';
 
+async function withRetry<T>(fn: () => Promise<T>, retries = 1, delayMs = 1000): Promise<T> {
+  let lastErr: any;
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    try {
+      return await fn();
+    } catch (err: any) {
+      lastErr = err;
+      if (attempt < retries && (!err?.response || err.response.status >= 500)) {
+        await new Promise(r => setTimeout(r, delayMs * (attempt + 1)));
+        continue;
+      }
+      throw err;
+    }
+  }
+  throw lastErr;
+}
+
 interface BacklinkOutreachStore {
   modules: BacklinkModuleRecord[];
   coverage: BacklinkCoverageResponse | null;
@@ -22,15 +50,27 @@ interface BacklinkOutreachStore {
   selectedCampaign: CampaignDetailResponse | null;
   discoveredOpportunities: EnrichedOpportunity[];
   leads: LeadRecord[];
+  attempts: OutreachAttemptRecord[];
+  replies: OutreachReplyRecord[];
+  followups: FollowUpScheduleRecord[];
+  analytics: CampaignAnalyticsResponse | null;
   isLoading: boolean;
   isDiscovering: boolean;
+  isAttemptsLoading: boolean;
+  isRepliesLoading: boolean;
+  isAnalyticsLoading: boolean;
   error: string | null;
   refreshBacklinkRegistry: () => Promise<void>;
-  fetchCampaigns: (userId: string, workspaceId: string) => Promise<void>;
-  createCampaign: (userId: string, workspaceId: string, name: string) => Promise<string | null>;
-  selectCampaign: (campaignId: string, userId: string) => Promise<void>;
+  fetchCampaigns: (workspaceId: string) => Promise<void>;
+  createCampaign: (workspaceId: string, name: string) => Promise<string | null>;
+  selectCampaign: (campaignId: string) => Promise<void>;
   deepDiscover: (keyword: string, maxResults?: number, campaignId?: string) => Promise<EnrichedOpportunity[]>;
   clearDiscoveries: () => void;
+  sendOutreachEmail: (req: SendOutreachRequest) => Promise<SendOutreachResponse | null>;
+  fetchAttempts: (campaignId: string) => Promise<void>;
+  fetchReplies: (campaignId: string) => Promise<void>;
+  fetchFollowUps: (campaignId: string) => Promise<void>;
+  fetchAnalytics: (campaignId: string) => Promise<void>;
 }
 
 export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => ({
@@ -40,8 +80,15 @@ export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => (
   selectedCampaign: null,
   discoveredOpportunities: [],
   leads: [],
+  attempts: [],
+  replies: [],
+  followups: [],
+  analytics: null,
   isLoading: false,
   isDiscovering: false,
+  isAttemptsLoading: false,
+  isRepliesLoading: false,
+  isAnalyticsLoading: false,
   error: null,
   refreshBacklinkRegistry: async () => {
     set({ isLoading: true, error: null });
@@ -58,10 +105,10 @@ export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => (
       });
     }
   },
-  fetchCampaigns: async (userId: string, workspaceId: string) => {
+  fetchCampaigns: async (workspaceId: string) => {
     set({ isLoading: true, error: null });
     try {
-      const response = await listBacklinkCampaigns(userId, workspaceId);
+      const response = await withRetry(() => listBacklinkCampaigns(workspaceId));
       set({ campaigns: response.campaigns, isLoading: false });
     } catch (error: any) {
       set({
@@ -70,10 +117,10 @@ export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => (
       });
     }
   },
-  createCampaign: async (userId: string, workspaceId: string, name: string) => {
+  createCampaign: async (workspaceId: string, name: string) => {
     set({ isLoading: true, error: null });
     try {
-      const result = await createBacklinkCampaign({ user_id: userId, workspace_id: workspaceId, name });
+      const result = await createBacklinkCampaign({ workspace_id: workspaceId, name });
       set((state) => ({
         campaigns: [...state.campaigns, { campaign_id: result.campaign_id, name: result.name, status: result.status }],
         isLoading: false,
@@ -87,10 +134,10 @@ export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => (
       return null;
     }
   },
-  selectCampaign: async (campaignId: string, userId: string) => {
+  selectCampaign: async (campaignId: string) => {
     set({ isLoading: true, error: null });
     try {
-      const detail = await fetchCampaignDetail(campaignId, userId);
+      const detail = await withRetry(() => fetchCampaignDetail(campaignId));
       set({ selectedCampaign: detail, leads: detail.leads, isLoading: false });
     } catch (error: any) {
       set({
@@ -114,4 +161,63 @@ export const useBacklinkOutreachStore = create<BacklinkOutreachStore>((set) => (
     }
   },
   clearDiscoveries: () => set({ discoveredOpportunities: [] }),
-}));
+  sendOutreachEmail: async (req: SendOutreachRequest) => {
+    set({ isLoading: true, error: null });
+    try {
+      const result = await sendOutreach(req);
+      set({ isLoading: false });
+      return result;
+    } catch (error: any) {
+      set({
+        isLoading: false,
+        error: error?.message ?? 'Failed to send outreach',
+      });
+      return null;
+    }
+  },
+  fetchAttempts: async (campaignId: string) => {
+    set({ isAttemptsLoading: true, error: null });
+    try {
+      const result = await withRetry(() => fetchCampaignAttempts(campaignId));
+      set({ attempts: result.attempts, isAttemptsLoading: false });
+    } catch (error: any) {
+      set({
+        isAttemptsLoading: false,
+        error: error?.message ?? 'Failed to load attempts',
+      });
+    }
+  },
+  fetchReplies: async (campaignId: string) => {
+    set({ isRepliesLoading: true, error: null });
+    try {
+      const result = await withRetry(() => fetchCampaignReplies(campaignId));
+      set({ replies: result.replies, isRepliesLoading: false });
+    } catch (error: any) {
+      set({
+        isRepliesLoading: false,
+        error: error?.message ?? 'Failed to load replies',
+      });
+    }
+  },
+  fetchFollowUps: async (campaignId: string) => {
+    set({ error: null });
+    try {
+      const result = await withRetry(() => apiFetchFollowUps(campaignId));
+      set({ followups: result.followups });
+    } catch (error: any) {
+      set({ error: error?.message ?? 'Failed to load follow-ups' });
+    }
+  },
+  fetchAnalytics: async (campaignId: string) => {
+    set({ isAnalyticsLoading: true, error: null });
+    try {
+      const result = await withRetry(() => fetchCampaignAnalytics(campaignId));
+      set({ analytics: result, isAnalyticsLoading: false });
+    } catch (error: any) {
+      set({
+        isAnalyticsLoading: false,
+        error: error?.message ?? 'Failed to load analytics',
+      });
+    }
+  },
+}));

frontend/src/utils/apiUrl.ts

@@ -0,0 +1,84 @@
+/**
+ * Shared API URL resolution utility.
+ *
+ * Determines the correct backend URL based on:
+ *  1. Explicit REACT_APP_API_URL env var (production)
+ *  2. Browser origin when accessed via localhost (development)
+ *  3. Fallback to http://localhost:8000
+ *
+ * This ensures that when a developer accesses the app via
+ * `http://localhost:3000`, the API calls go to `http://localhost:8000`
+ * regardless of what REACT_APP_API_URL (e.g. an ngrok URL) is set to.
+ * Conversely, when accessed via an ngrok URL, the API calls go to that
+ * same ngrok URL.
+ */
+
+const LOCALHOST_PORTS = [3000, 3001, 5173, 5174, 8080, 4173];
+
+function isLocalhostAccess(): boolean {
+  try {
+    if (typeof window === 'undefined') return false;
+    const { hostname } = window.location;
+    return hostname === 'localhost' || hostname === '127.0.0.1';
+  } catch {
+    return false;
+  }
+}
+
+function getLocalhostApiUrl(): string {
+  try {
+    if (typeof window === 'undefined') return 'http://localhost:8000';
+    const { port } = window.location;
+    const numericPort = parseInt(port, 10);
+    // If the frontend is running on a common dev port, assume backend is on 8000
+    if (LOCALHOST_PORTS.includes(numericPort) || isNaN(numericPort)) {
+      return 'http://localhost:8000';
+    }
+    // If on port 8000 itself (served by backend), use same origin
+    if (numericPort === 8000) {
+      return `${window.location.origin}`;
+    }
+    return 'http://localhost:8000';
+  } catch {
+    return 'http://localhost:8000';
+  }
+}
+
+/**
+ * Returns the appropriate API base URL.
+ *
+ * In production: always uses REACT_APP_API_URL (required).
+ * In development, when the browser is on localhost: uses http://localhost:8000
+ * In development, when the browser is NOT on localhost (e.g. ngrok):
+ *   uses REACT_APP_API_URL if set, otherwise http://localhost:8000.
+ */
+export const getApiBaseUrl = (): string => {
+  const envUrl = process.env.REACT_APP_API_URL;
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  if (isProduction) {
+    if (!envUrl) {
+      console.error('[getApiBaseUrl] REACT_APP_API_URL is not set for production!');
+      throw new Error('REACT_APP_API_URL environment variable is required for production.');
+    }
+    return envUrl;
+  }
+
+  // Development: if accessing from localhost, always use localhost backend
+  if (isLocalhostAccess()) {
+    const localUrl = getLocalhostApiUrl();
+    if (envUrl && envUrl !== localUrl) {
+      console.info(`[getApiBaseUrl] Browser on localhost — using local backend ${localUrl} instead of env URL ${envUrl}`);
+    }
+    return localUrl;
+  }
+
+  // Development: not on localhost (e.g. ngrok) — use env URL if set
+  if (envUrl) {
+    return envUrl;
+  }
+
+  return 'http://localhost:8000';
+};
+
+export default getApiBaseUrl;

frontend/src/utils/persistence.ts

@@ -0,0 +1,68 @@
+/**
+ * Shared persistence utilities.
+ *
+ * Provides generic localStorage read/write helpers used by BlogWriter,
+ * StoryWriter, and other feature modules for synchronous state
+ * serialization and deserialization.
+ */
+
+export function readLS<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return fallback;
+    return JSON.parse(raw) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+export function readLSString(key: string, fallback: string): string {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw !== null ? raw : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+export function readLSBool(key: string, fallback: boolean): boolean {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw !== null ? raw === 'true' : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+export function writeLS<T>(key: string, value: T): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch { /* noop */ }
+}
+
+export function writeLSString(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch { /* noop */ }
+}
+
+export function writeLSBool(key: string, value: boolean): void {
+  try {
+    localStorage.setItem(key, String(value));
+  } catch { /* noop */ }
+}
+
+export function removeLS(key: string): void {
+  try {
+    localStorage.removeItem(key);
+  } catch { /* noop */ }
+}
+
+/**
+ * Persist any value to localStorage each time it changes.
+ * Returns a cleanup function that removes the key.
+ */
+export function persistToLS<T>(key: string, value: T): () => void {
+  writeLS(key, value);
+  return () => removeLS(key);
+}