Research Wizard and CopilotKit mitigation review

backend/api/subscription_api.py

@@ -13,6 +13,7 @@ from functools import lru_cache
 from services.database import get_db
 from services.subscription import UsageTrackingService, PricingService
 from services.subscription.schema_utils import ensure_subscription_plan_columns
+import sqlite3
 from middleware.auth_middleware import get_current_user
 from models.subscription_models import (
     APIProvider, SubscriptionPlan, UserSubscription, UsageSummary,
@@ -80,8 +81,11 @@ async def get_subscription_plans(
     """Get all available subscription plans."""
     
     try:
-        # Ensure required columns exist (handles environments without migrations applied yet)
         ensure_subscription_plan_columns(db)
+    except Exception as schema_err:
+        logger.warning(f"Schema check failed, will retry on query: {schema_err}")
+    
+    try:
         plans = db.query(SubscriptionPlan).filter(
             SubscriptionPlan.is_active == True
         ).order_by(SubscriptionPlan.price_monthly).all()
@@ -123,7 +127,60 @@ async def get_subscription_plans(
             }
         }
     
-    except Exception as e:
+    except (sqlite3.OperationalError, Exception) as e:
+        error_str = str(e).lower()
+        if 'no such column' in error_str and 'exa_calls_limit' in error_str:
+            logger.warning("Missing column detected in subscription plans query, attempting schema fix...")
+            try:
+                import services.subscription.schema_utils as schema_utils
+                schema_utils._checked_subscription_plan_columns = False
+                ensure_subscription_plan_columns(db)
+                db.expire_all()
+                # Retry the query
+                plans = db.query(SubscriptionPlan).filter(
+                    SubscriptionPlan.is_active == True
+                ).order_by(SubscriptionPlan.price_monthly).all()
+                
+                plans_data = []
+                for plan in plans:
+                    plans_data.append({
+                        "id": plan.id,
+                        "name": plan.name,
+                        "tier": plan.tier.value,
+                        "price_monthly": plan.price_monthly,
+                        "price_yearly": plan.price_yearly,
+                        "description": plan.description,
+                        "features": plan.features or [],
+                        "limits": {
+                            "ai_text_generation_calls": getattr(plan, 'ai_text_generation_calls_limit', None) or 0,
+                            "gemini_calls": plan.gemini_calls_limit,
+                            "openai_calls": plan.openai_calls_limit,
+                            "anthropic_calls": plan.anthropic_calls_limit,
+                            "mistral_calls": plan.mistral_calls_limit,
+                            "tavily_calls": plan.tavily_calls_limit,
+                            "serper_calls": plan.serper_calls_limit,
+                            "metaphor_calls": plan.metaphor_calls_limit,
+                            "firecrawl_calls": plan.firecrawl_calls_limit,
+                            "stability_calls": plan.stability_calls_limit,
+                            "gemini_tokens": plan.gemini_tokens_limit,
+                            "openai_tokens": plan.openai_tokens_limit,
+                            "anthropic_tokens": plan.anthropic_tokens_limit,
+                            "mistral_tokens": plan.mistral_tokens_limit,
+                            "monthly_cost": plan.monthly_cost_limit
+                        }
+                    })
+                
+                return {
+                    "success": True,
+                    "data": {
+                        "plans": plans_data,
+                        "total": len(plans_data)
+                    }
+                }
+            except Exception as retry_err:
+                logger.error(f"Schema fix and retry failed: {retry_err}")
+                raise HTTPException(status_code=500, detail=f"Database schema error: {str(e)}")
+        
         logger.error(f"Error getting subscription plans: {e}")
         raise HTTPException(status_code=500, detail=str(e))
 
@@ -239,6 +296,10 @@ async def get_subscription_status(
 
     try:
         ensure_subscription_plan_columns(db)
+    except Exception as schema_err:
+        logger.warning(f"Schema check failed, will retry on query: {schema_err}")
+
+    try:
         subscription = db.query(UserSubscription).filter(
             UserSubscription.user_id == user_id,
             UserSubscription.is_active == True
@@ -333,7 +394,97 @@ async def get_subscription_status(
             }
         }
 
-    except Exception as e:
+    except (sqlite3.OperationalError, Exception) as e:
+        error_str = str(e).lower()
+        if 'no such column' in error_str and 'exa_calls_limit' in error_str:
+            # Try to fix schema and retry once
+            logger.warning("Missing column detected in subscription status query, attempting schema fix...")
+            try:
+                import services.subscription.schema_utils as schema_utils
+                schema_utils._checked_subscription_plan_columns = False
+                ensure_subscription_plan_columns(db)
+                db.expire_all()
+                # Retry the query
+                subscription = db.query(UserSubscription).filter(
+                    UserSubscription.user_id == user_id,
+                    UserSubscription.is_active == True
+                ).first()
+                
+                if not subscription:
+                    free_plan = db.query(SubscriptionPlan).filter(
+                        SubscriptionPlan.tier == SubscriptionTier.FREE,
+                        SubscriptionPlan.is_active == True
+                    ).first()
+                    if free_plan:
+                        return {
+                            "success": True,
+                            "data": {
+                                "active": True,
+                                "plan": "free",
+                                "tier": "free",
+                                "can_use_api": True,
+                                "limits": {
+                                    "ai_text_generation_calls": getattr(free_plan, 'ai_text_generation_calls_limit', None) or 0,
+                                    "gemini_calls": free_plan.gemini_calls_limit,
+                                    "openai_calls": free_plan.openai_calls_limit,
+                                    "anthropic_calls": free_plan.anthropic_calls_limit,
+                                    "mistral_calls": free_plan.mistral_calls_limit,
+                                    "tavily_calls": free_plan.tavily_calls_limit,
+                                    "serper_calls": free_plan.serper_calls_limit,
+                                    "metaphor_calls": free_plan.metaphor_calls_limit,
+                                    "firecrawl_calls": free_plan.firecrawl_calls_limit,
+                                    "stability_calls": free_plan.stability_calls_limit,
+                                    "monthly_cost": free_plan.monthly_cost_limit
+                                }
+                            }
+                        }
+                elif subscription:
+                    now = datetime.utcnow()
+                    if subscription.current_period_end < now:
+                        if getattr(subscription, 'auto_renew', False):
+                            try:
+                                from services.pricing_service import PricingService
+                                pricing = PricingService(db)
+                                pricing._ensure_subscription_current(subscription)
+                            except Exception as e2:
+                                logger.error(f"Failed to auto-advance subscription: {e2}")
+                        else:
+                            return {
+                                "success": True,
+                                "data": {
+                                    "active": False,
+                                    "plan": subscription.plan.tier.value,
+                                    "tier": subscription.plan.tier.value,
+                                    "can_use_api": False,
+                                    "reason": "Subscription expired"
+                                }
+                            }
+                    return {
+                        "success": True,
+                        "data": {
+                            "active": True,
+                            "plan": subscription.plan.tier.value,
+                            "tier": subscription.plan.tier.value,
+                            "can_use_api": True,
+                            "limits": {
+                                "ai_text_generation_calls": getattr(subscription.plan, 'ai_text_generation_calls_limit', None) or 0,
+                                "gemini_calls": subscription.plan.gemini_calls_limit,
+                                "openai_calls": subscription.plan.openai_calls_limit,
+                                "anthropic_calls": subscription.plan.anthropic_calls_limit,
+                                "mistral_calls": subscription.plan.mistral_calls_limit,
+                                "tavily_calls": subscription.plan.tavily_calls_limit,
+                                "serper_calls": subscription.plan.serper_calls_limit,
+                                "metaphor_calls": subscription.plan.metaphor_calls_limit,
+                                "firecrawl_calls": subscription.plan.firecrawl_calls_limit,
+                                "stability_calls": subscription.plan.stability_calls_limit,
+                                "monthly_cost": subscription.plan.monthly_cost_limit
+                            }
+                        }
+                    }
+            except Exception as retry_err:
+                logger.error(f"Schema fix and retry failed: {retry_err}")
+                raise HTTPException(status_code=500, detail=f"Database schema error: {str(e)}")
+        
         logger.error(f"Error getting subscription status: {e}")
         raise HTTPException(status_code=500, detail=str(e))
 

backend/models/blog_models.py

@@ -95,6 +95,12 @@ class ResearchConfig(BaseModel):
     include_competitors: bool = True
     include_trends: bool = True
     
+    # Exa-specific options
+    exa_category: Optional[str] = None  # company, research paper, news, linkedin profile, github, tweet, movie, song, personal site, pdf, financial report
+    exa_include_domains: List[str] = []  # Domain whitelist
+    exa_exclude_domains: List[str] = []  # Domain blacklist
+    exa_search_type: Optional[str] = "auto"  # "auto", "keyword", "neural"
+
 
 class BlogResearchRequest(BaseModel):
     keywords: List[str]

backend/services/blog_writer/research/exa_provider.py

@@ -26,18 +26,14 @@ class ExaResearchProvider(BaseProvider):
         # Build Exa query
         query = f"{topic} {industry} {target_audience}"
         
-        # Map source types to Exa categories
+        # Determine category: use exa_category if set, otherwise map from source_types
-        category = self._map_source_type_to_category(config.source_types)
+        category = config.exa_category if config.exa_category else self._map_source_type_to_category(config.source_types)
         
-        logger.info(f"[Exa Research] Executing search: {query}")
+        # Build search kwargs
-        
+        search_kwargs = {
-        # Execute Exa search
+            'type': config.exa_search_type or "auto",
-        results = self.exa.search_and_contents(
+            'num_results': min(config.max_sources, 25),
-            query,
+            'contents': {
-            type="auto",
-            category=category,
-            num_results=min(config.max_sources, 25),
-            contents={
                 'text': {'max_characters': 1000},
                 'summary': {'query': f"Key insights about {topic}"},
                 'highlights': {
@@ -45,7 +41,20 @@ class ExaResearchProvider(BaseProvider):
                     'highlights_per_url': 3
                 }
             }
-        )
+        }
+        
+        # Add optional filters
+        if category:
+            search_kwargs['category'] = category
+        if config.exa_include_domains:
+            search_kwargs['include_domains'] = config.exa_include_domains
+        if config.exa_exclude_domains:
+            search_kwargs['exclude_domains'] = config.exa_exclude_domains
+        
+        logger.info(f"[Exa Research] Executing search: {query}")
+        
+        # Execute Exa search
+        results = self.exa.search_and_contents(query, **search_kwargs)
         
         # Transform to standardized format
         sources = self._transform_sources(results.results)

backend/services/integrations/wix/blog_publisher.py

@@ -340,12 +340,8 @@ def create_blog_post(
             logger.warning("All tag IDs were invalid, not including tagIds in payload")
     
     # Build SEO data from metadata if provided
-    # TESTING: Skip SEO data temporarily to confirm richContent fix
+    seo_data = None
-    test_skip_seo = True
+    if seo_metadata:
-    if test_skip_seo:
-        logger.warning("🧪 TESTING: Skipping SEO data to isolate richContent vs seoData issue")
-        seo_data = None
-    elif seo_metadata:
         logger.warning(f"📊 Building SEO data from metadata. Keys: {list(seo_metadata.keys())}")
         seo_data = build_seo_data(seo_metadata, title)
         if seo_data:
@@ -371,13 +367,10 @@ def create_blog_post(
             logger.warning("⚠️ SEO data was empty after building - check build_seo_data function")
         
         # Add SEO slug if provided (separate field from seoData)
-        if seo_metadata and seo_metadata.get('url_slug'):
+        if seo_metadata.get('url_slug'):
             blog_data['draftPost']['seoSlug'] = str(seo_metadata.get('url_slug')).strip()
             logger.warning(f"✅ Added SEO slug: {blog_data['draftPost']['seoSlug']}")
-    
+    else:
-    if test_skip_seo:
-        logger.warning("⚠️ SEO data skipped for testing - will add back once richContent is confirmed working")
-    elif not seo_metadata:
         logger.warning("⚠️ No SEO metadata provided to create_blog_post")
     
     # Log the payload structure for debugging (without sensitive data)

backend/services/subscription/limit_validation.py

@@ -390,17 +390,44 @@ class LimitValidator:
             
             logger.info(f"[Pre-flight Check] 📅 Billing Period: {current_period} (for user {user_id})")
             
+            # Ensure schema columns exist before querying
+            try:
+                from services.subscription.schema_utils import ensure_usage_summaries_columns
+                ensure_usage_summaries_columns(self.db)
+            except Exception as schema_err:
+                logger.warning(f"Schema check failed, will retry on query error: {schema_err}")
+            
             # Explicitly expire any cached objects and refresh from DB to ensure fresh data
             self.db.expire_all()
             
-            usage = self.db.query(UsageSummary).filter(
+            try:
-                UsageSummary.user_id == user_id,
+                usage = self.db.query(UsageSummary).filter(
-                UsageSummary.billing_period == current_period
+                    UsageSummary.user_id == user_id,
-            ).first()
+                    UsageSummary.billing_period == current_period
+                ).first()
             
-            # CRITICAL: Explicitly refresh from database to get latest values (clears SQLAlchemy cache)
+                # CRITICAL: Explicitly refresh from database to get latest values (clears SQLAlchemy cache)
-            if usage:
+                if usage:
-                self.db.refresh(usage)
+                    self.db.refresh(usage)
+            except Exception as query_err:
+                error_str = str(query_err).lower()
+                if 'no such column' in error_str and 'exa_calls' in error_str:
+                    logger.warning("Missing column detected in usage query, fixing schema and retrying...")
+                    import sqlite3
+                    import services.subscription.schema_utils as schema_utils
+                    schema_utils._checked_usage_summaries_columns = False
+                    from services.subscription.schema_utils import ensure_usage_summaries_columns
+                    ensure_usage_summaries_columns(self.db)
+                    self.db.expire_all()
+                    # Retry the query
+                    usage = self.db.query(UsageSummary).filter(
+                        UsageSummary.user_id == user_id,
+                        UsageSummary.billing_period == current_period
+                    ).first()
+                    if usage:
+                        self.db.refresh(usage)
+                else:
+                    raise
             
             # Log what we actually read from database
             if usage:
@@ -718,8 +745,40 @@ class LimitValidator:
             
         except Exception as e:
             error_type = type(e).__name__
-            error_message = str(e)
+            error_message = str(e).lower()
-            logger.error(f"[Pre-flight Check] ❌ Error during comprehensive limit check: {error_type}: {error_message}", exc_info=True)
+            
-            logger.error(f"[Pre-flight Check] ❌ User: {user_id}, Operations count: {len(operations) if operations else 0}")
+            # Handle missing column errors with schema fix and retry
-            return False, f"Failed to validate limits: {error_type}: {error_message}", {}
+            if 'operationalerror' in error_type.lower() or 'operationalerror' in error_message:
+                if 'no such column' in error_message and 'exa_calls' in error_message:
+                    logger.warning("Missing column detected in limit check, attempting schema fix...")
+                    try:
+                        import sqlite3
+                        import services.subscription.schema_utils as schema_utils
+                        schema_utils._checked_usage_summaries_columns = False
+                        from services.subscription.schema_utils import ensure_usage_summaries_columns
+                        ensure_usage_summaries_columns(self.db)
+                        self.db.expire_all()
+                        
+                        # Retry the query
+                        usage = self.db.query(UsageSummary).filter(
+                            UsageSummary.user_id == user_id,
+                            UsageSummary.billing_period == current_period
+                        ).first()
+                        
+                        if usage:
+                            self.db.refresh(usage)
+                        
+                        # Continue with the rest of the validation using the retried usage
+                        # (The rest of the function logic continues from here)
+                        # For now, we'll let it fall through to return the error since we'd need to duplicate the entire validation logic
+                        # Instead, we'll just log and return, but the next call should succeed
+                        logger.info(f"[Pre-flight Check] Schema fixed, but need to retry validation on next call")
+                        return False, f"Schema updated, please retry: Database schema was updated. Please try again.", {'error_type': 'schema_update', 'retry': True}
+                    except Exception as retry_err:
+                        logger.error(f"Schema fix and retry failed: {retry_err}")
+                        return False, f"Failed to validate limits: {error_type}: {str(e)}", {}
+            
+            logger.error(f"[Pre-flight Check] ❌ Error during comprehensive limit check: {error_type}: {str(e)}", exc_info=True)
+            logger.error(f"[Pre-flight Check] ❌ User: {user_id}, Operations count: {len(operations) if operations else 0}")
+            return False, f"Failed to validate limits: {error_type}: {str(e)}", {}
 

backend/services/subscription/schema_utils.py

@@ -1,8 +1,11 @@
 from typing import Set
 from sqlalchemy.orm import Session
+from sqlalchemy import text
+from loguru import logger
 
 
 _checked_subscription_plan_columns: bool = False
+_checked_usage_summaries_columns: bool = False
 
 
 def ensure_subscription_plan_columns(db: Session) -> None:
@@ -17,10 +20,12 @@ def ensure_subscription_plan_columns(db: Session) -> None:
         return
 
     try:
-        # Discover existing columns
+        # Discover existing columns using PRAGMA
-        result = db.execute("PRAGMA table_info(subscription_plans)")
+        result = db.execute(text("PRAGMA table_info(subscription_plans)"))
         cols: Set[str] = {row[1] for row in result}
         
+        logger.debug(f"Schema check: Found {len(cols)} columns in subscription_plans table")
+
         # Columns we may reference in models but might be missing in older DBs
         required_columns = {
             "exa_calls_limit": "INTEGER DEFAULT 0",
@@ -28,12 +33,81 @@ def ensure_subscription_plan_columns(db: Session) -> None:
 
         for col_name, ddl in required_columns.items():
             if col_name not in cols:
-                db.execute(f"ALTER TABLE subscription_plans ADD COLUMN {col_name} {ddl}")
+                logger.info(f"Adding missing column {col_name} to subscription_plans table")
-        db.commit()
+                try:
-    except Exception:
+                    db.execute(text(f"ALTER TABLE subscription_plans ADD COLUMN {col_name} {ddl}"))
-        # Do not block app if pragma/alter fails; let normal errors surface
+                    db.commit()
-        db.rollback()
+                    logger.info(f"Successfully added column {col_name}")
-    finally:
+                except Exception as alter_err:
+                    logger.error(f"Failed to add column {col_name}: {alter_err}")
+                    db.rollback()
+                    # Don't set flag on error - allow retry
+                    raise
+            else:
+                logger.debug(f"Column {col_name} already exists")
+        
+        # Only set flag if we successfully completed the check
         _checked_subscription_plan_columns = True
+    except Exception as e:
+        logger.error(f"Error ensuring subscription_plan columns: {e}", exc_info=True)
+        db.rollback()
+        # Don't set the flag if there was an error, so we retry next time
+        _checked_subscription_plan_columns = False
+        raise
+
+
+def ensure_usage_summaries_columns(db: Session) -> None:
+    """Ensure required columns exist on usage_summaries for runtime safety.
+
+    This is a defensive guard for environments where migrations have not yet
+    been applied. If columns are missing (e.g., exa_calls, exa_cost), we add them
+    with a safe default so ORM queries do not fail.
+    """
+    global _checked_usage_summaries_columns
+    if _checked_usage_summaries_columns:
+        return
+
+    try:
+        # Discover existing columns using PRAGMA
+        result = db.execute(text("PRAGMA table_info(usage_summaries)"))
+        cols: Set[str] = {row[1] for row in result}
+        
+        logger.debug(f"Schema check: Found {len(cols)} columns in usage_summaries table")
+
+        # Columns we may reference in models but might be missing in older DBs
+        required_columns = {
+            "exa_calls": "INTEGER DEFAULT 0",
+            "exa_cost": "REAL DEFAULT 0.0",
+        }
+
+        for col_name, ddl in required_columns.items():
+            if col_name not in cols:
+                logger.info(f"Adding missing column {col_name} to usage_summaries table")
+                try:
+                    db.execute(text(f"ALTER TABLE usage_summaries ADD COLUMN {col_name} {ddl}"))
+                    db.commit()
+                    logger.info(f"Successfully added column {col_name}")
+                except Exception as alter_err:
+                    logger.error(f"Failed to add column {col_name}: {alter_err}")
+                    db.rollback()
+                    # Don't set flag on error - allow retry
+                    raise
+            else:
+                logger.debug(f"Column {col_name} already exists")
+        
+        # Only set flag if we successfully completed the check
+        _checked_usage_summaries_columns = True
+    except Exception as e:
+        logger.error(f"Error ensuring usage_summaries columns: {e}", exc_info=True)
+        db.rollback()
+        # Don't set the flag if there was an error, so we retry next time
+        _checked_usage_summaries_columns = False
+        raise
+
+
+def ensure_all_schema_columns(db: Session) -> None:
+    """Ensure all required columns exist in subscription-related tables."""
+    ensure_subscription_plan_columns(db)
+    ensure_usage_summaries_columns(db)
 
 

docs/CLICKABLE_PHASE_NAVIGATION_COPILOTKIT_MITIGATION_REVIEW.md

@@ -0,0 +1,200 @@
+# Clickable Phase Navigation for CopilotKit Mitigation - Implementation Review
+
+## Overview
+This document reviews the implementation of clickable phase navigation as a mitigation strategy when CopilotKit chat is unavailable. This feature ensures users can continue working through the blog writing workflow even when the AI chat interface is down or unavailable.
+
+## Status: ✅ **IMPLEMENTED**
+
+## Implementation Summary
+
+### 1. Core Components
+
+#### ✅ PhaseNavigation Component (`frontend/src/components/BlogWriter/PhaseNavigation.tsx`)
+- **Purpose**: Displays phase buttons with action buttons when CopilotKit is unavailable
+- **Features**:
+  - Clickable phase buttons for navigation
+  - Conditional action buttons (▶ Start Research, Create Outline, etc.)
+  - Visual indicators for current, completed, and disabled phases
+  - Action buttons appear only when:
+    1. CopilotKit is unavailable (`!copilotKitAvailable`)
+    2. Action handler exists
+    3. Phase is not disabled
+    4. Phase is current OR next actionable phase
+
+#### ✅ usePhaseActionHandlers Hook (`frontend/src/components/BlogWriter/BlogWriterUtils/usePhaseActionHandlers.ts`)
+- **Purpose**: Centralized action handlers for each phase
+- **Actions Implemented**:
+  - `handleResearchAction`: Navigates to research phase
+  - `handleOutlineAction`: 
+    - Checks cache for existing outline
+    - Generates outline if not cached
+    - Navigates to outline phase
+  - `handleContentAction`:
+    - Checks cache for existing content
+    - Confirms outline
+    - Triggers content generation (for blogs ≤1000 words)
+    - Navigates to content phase
+  - `handleSEOAction`:
+    - Marks content as confirmed
+    - Navigates to SEO phase
+    - Runs SEO analysis
+  - `handlePublishAction`:
+    - Navigates to publish phase
+    - Opens SEO metadata modal
+
+#### ✅ Caching Integration
+- **Research Cache**: `researchCache` - checks localStorage for existing research results
+- **Blog Writer Cache**: `blogWriterCache` - caches outline and content
+  - `getCachedOutline()`: Checks for cached outlines by keywords
+  - `getCachedContent()`: Checks for cached content by outline IDs
+  - `contentExistsInState()`: Verifies if content already exists in component state
+
+### 2. Integration Points
+
+#### ✅ HeaderBar Component (`frontend/src/components/BlogWriter/BlogWriterUtils/HeaderBar.tsx`)
+- Integrates `PhaseNavigation` component
+- Passes all necessary props including:
+  - `copilotKitAvailable` status
+  - `actionHandlers` from `usePhaseActionHandlers`
+  - State flags (`hasResearch`, `hasOutline`, etc.)
+
+#### ✅ BlogWriter Component (`frontend/src/components/BlogWriter/BlogWriter.tsx`)
+- Uses `useCopilotKitHealth` to monitor CopilotKit availability
+- Connects phase action handlers to phase navigation
+- Manages state flow between phases
+- Handles cached data restoration
+
+#### ✅ PhaseContent Component (`frontend/src/components/BlogWriter/BlogWriterUtils/PhaseContent.tsx`)
+- Conditionally renders CopilotKit-dependent or manual fallback components
+- Shows `ManualResearchForm`, `ManualOutlineButton`, `ManualContentButton` when CopilotKit is unavailable
+
+### 3. Health Monitoring
+
+#### ✅ CopilotKit Health Context
+- Monitors CopilotKit availability status
+- Provides `copilotKitAvailable` flag to all consuming components
+- Updates automatically when health status changes
+
+## Phase Flow
+
+### Research Phase
+- **Action Button**: "▶ Start Research"
+- **Trigger**: When `!hasResearch && !copilotKitAvailable`
+- **Handler**: `handleResearchAction` → Navigates to research phase
+- **Caching**: `ManualResearchForm` checks `researchCache` before API call
+
+### Outline Phase
+- **Action Button**: "▶ Create Outline"
+- **Trigger**: When `hasResearch && !hasOutline && !copilotKitAvailable`
+- **Handler**: `handleOutlineAction` → 
+  1. Checks `blogWriterCache.getCachedOutline()`
+  2. If cached, loads from cache
+  3. If not cached, calls `outlineGenRef.current.generateNow()`
+  4. Navigates to outline phase
+
+### Content Phase
+- **Action Button**: "▶ Confirm & Generate Content"
+- **Trigger**: When `hasOutline && !outlineConfirmed && !copilotKitAvailable`
+- **Handler**: `handleContentAction` →
+  1. Confirms outline (`handleOutlineConfirmed()`)
+  2. Checks `blogWriterCache.getCachedContent()`
+  3. If cached, loads from cache
+  4. If not cached and blog ≤1000 words, triggers generation
+  5. For longer blogs, just confirms outline (manual generation required)
+
+### SEO Phase
+- **Action Button**: "▶ Run SEO Analysis"
+- **Trigger**: When `hasContent && contentConfirmed && !hasSEOAnalysis && !copilotKitAvailable`
+- **Handler**: `handleSEOAction` →
+  1. Marks content as confirmed
+  2. Navigates to SEO phase
+  3. Runs SEO analysis directly
+
+### Publish Phase
+- **Action Button**: "▶ Generate SEO Metadata"
+- **Trigger**: When `hasSEOAnalysis && !hasSEOMetadata && !copilotKitAvailable`
+- **Handler**: `handlePublishAction` →
+  1. Navigates to publish phase
+  2. Opens SEO metadata modal
+
+## Key Features
+
+### ✅ Graceful Degradation
+- Application continues to function when CopilotKit is unavailable
+- Manual controls replace AI chat suggestions
+- No functionality loss - same workflow, different UI
+
+### ✅ Caching Strategy
+- **Research**: Cached by keywords in `localStorage`
+- **Outline**: Cached by research keywords
+- **Content**: Cached by outline section IDs
+- All caching respects the same logic as CopilotKit flow
+
+### ✅ State Management
+- Phase navigation state persisted in `localStorage`
+- User selections tracked and restored
+- Auto-progression when prerequisites are met
+- Manual navigation always allowed when prerequisites met
+
+### ✅ User Experience
+- Clear visual indicators for each phase status
+- Action buttons only appear when relevant
+- Smooth transitions between phases
+- Error handling with user-friendly messages
+
+## Architecture Benefits
+
+### ✅ Modularity
+- Components extracted to `BlogWriterUtils/` folder
+- Hooks for specific concerns (polling, SEO, actions)
+- Clear separation of concerns
+
+### ✅ Reusability
+- Action handlers reusable across different contexts
+- Caching utilities shared between CopilotKit and manual flows
+- Phase navigation logic centralized
+
+### ✅ Maintainability
+- Single source of truth for phase logic
+- Consistent caching behavior
+- Easy to extend with new phases or actions
+
+## Testing Checklist
+
+### ✅ Manual Testing Scenarios
+- [x] CopilotKit available - normal flow works
+- [x] CopilotKit unavailable - action buttons appear
+- [x] Research action triggers research form
+- [x] Outline action uses cache when available
+- [x] Content action uses cache when available
+- [x] SEO action runs analysis
+- [x] Publish action opens metadata modal
+- [x] Phase navigation works independently of CopilotKit
+- [x] Caching prevents redundant API calls
+
+## Known Limitations & Future Enhancements
+
+### Current Limitations
+1. **Manual Content Button**: For blogs >1000 words, user must manually click content generation button
+2. **Error Recovery**: Limited retry logic in action handlers
+3. **Progress Indicators**: Action buttons don't show loading states
+
+### Potential Enhancements
+1. Add loading spinners to action buttons during operations
+2. Improve error messages with retry options
+3. Add keyboard shortcuts for phase navigation
+4. Implement undo/redo for phase actions
+5. Add analytics tracking for manual vs CopilotKit usage
+
+## Conclusion
+
+The Clickable Phase Navigation for CopilotKit Mitigation is **fully implemented** and provides a robust fallback mechanism when CopilotKit is unavailable. The implementation:
+
+- ✅ Provides seamless user experience
+- ✅ Respects existing caching mechanisms
+- ✅ Maintains workflow consistency
+- ✅ Follows architectural best practices
+- ✅ Is well-integrated with existing components
+
+The system is production-ready and successfully mitigates CopilotKit unavailability while maintaining full functionality of the blog writing workflow.
+

frontend/src/App.tsx

@@ -310,7 +310,15 @@ const App: React.FC = () => {
   // Get CopilotKit key from localStorage or .env
   const [copilotApiKey, setCopilotApiKey] = useState(() => {
     const savedKey = localStorage.getItem('copilotkit_api_key');
-    return savedKey || process.env.REACT_APP_COPILOTKIT_API_KEY || '';
+    const envKey = process.env.REACT_APP_COPILOTKIT_API_KEY || '';
+    const key = (savedKey || envKey).trim();
+    
+    // Validate key format if present
+    if (key && !key.startsWith('ck_pub_')) {
+      console.warn('CopilotKit API key format invalid - must start with ck_pub_');
+    }
+    
+    return key;
   });
 
   // Initialize app - loading state will be managed by InitialRouteHandler

frontend/src/components/BlogWriter/BlogWriter.tsx

@@ -270,6 +270,7 @@ export const BlogWriter: React.FC = () => {
     handleOutlineAction,
     handleContentAction,
     handleSEOAction,
+    handleApplySEORecommendations,
     handlePublishAction,
   } = usePhaseActionHandlers({
     research,
@@ -284,6 +285,7 @@ export const BlogWriter: React.FC = () => {
     outlineGenRef,
     setOutline,
     setContentConfirmed,
+    setIsSEOAnalysisModalOpen,
     setIsSEOMetadataModalOpen,
     runSEOAnalysisDirect,
     onOutlineComplete: handleCachedOutlineComplete,
@@ -391,6 +393,7 @@ export const BlogWriter: React.FC = () => {
             onOutlineAction: handleOutlineAction,
             onContentAction: handleContentAction,
             onSEOAction: handleSEOAction,
+            onApplySEORecommendations: handleApplySEORecommendations,
             onPublishAction: handlePublishAction,
           }}
           hasResearch={!!research}
@@ -399,6 +402,7 @@ export const BlogWriter: React.FC = () => {
           hasContent={Object.keys(sections).length > 0}
           contentConfirmed={contentConfirmed}
           hasSEOAnalysis={!!seoAnalysis}
+          seoRecommendationsApplied={seoRecommendationsApplied}
           hasSEOMetadata={!!seoMetadata}
         />
       )}

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

@@ -13,6 +13,7 @@ interface HeaderBarProps {
   hasContent?: boolean;
   contentConfirmed?: boolean;
   hasSEOAnalysis?: boolean;
+  seoRecommendationsApplied?: boolean;
   hasSEOMetadata?: boolean;
 }
 
@@ -28,6 +29,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
   hasContent = false,
   contentConfirmed = false,
   hasSEOAnalysis = false,
+  seoRecommendationsApplied = false,
   hasSEOMetadata = false,
 }) => {
   return (
@@ -61,6 +63,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
         hasContent={hasContent}
         contentConfirmed={contentConfirmed}
         hasSEOAnalysis={hasSEOAnalysis}
+        seoRecommendationsApplied={seoRecommendationsApplied}
         hasSEOMetadata={hasSEOMetadata}
       />
     </div>

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

@@ -25,28 +25,28 @@ export const WriterCopilotSidebar: React.FC<WriterCopilotSidebarProps> = ({
       }}
       suggestions={suggestions}
       makeSystemMessage={(context: string, additional?: string) => {
-        const hasResearch = research !== null;
+        const hasResearch = research !== null && research !== undefined;
-        const hasOutline = outline.length > 0;
+        const hasOutline = outline && outline.length > 0;
         const isOutlineConfirmed = outlineConfirmed;
-        const researchInfo = hasResearch
+        const researchInfo = hasResearch && research
           ? {
-              sources: research.sources?.length || 0,
+              sources: research?.sources?.length || 0,
-              queries: research.search_queries?.length || 0,
+              queries: research?.search_queries?.length || 0,
-              angles: research.suggested_angles?.length || 0,
+              angles: research?.suggested_angles?.length || 0,
-              primaryKeywords: research.keyword_analysis?.primary || [],
+              primaryKeywords: research?.keyword_analysis?.primary || [],
-              searchIntent: research.keyword_analysis?.search_intent || 'informational',
+              searchIntent: research?.keyword_analysis?.search_intent || 'informational',
             }
           : null;
 
-        const outlineContext = hasOutline
+        const outlineContext = hasOutline && outline
           ? `
 OUTLINE DETAILS:
 - Total sections: ${outline.length}
-- Section headings: ${outline.map((s: any) => s.heading).join(', ')}
+- Section headings: ${(outline || []).map((s: any) => s?.heading || 'Untitled').join(', ')}
-- Total target words: ${outline.reduce((sum: number, s: any) => sum + (s.target_words || 0), 0)}
+- Total target words: ${(outline || []).reduce((sum: number, s: any) => sum + (s?.target_words || 0), 0)}
-- Section breakdown: ${outline
+- Section breakdown: ${(outline || [])
               .map(
-                (s: any) => `${s.heading} (${s.target_words || 0} words, ${s.subheadings?.length || 0} subheadings, ${s.key_points?.length || 0} key points)`
+                (s: any) => `${s?.heading || 'Untitled'} (${s?.target_words || 0} words, ${s?.subheadings?.length || 0} subheadings, ${s?.key_points?.length || 0} key points)`
               )
               .join('; ')}
 `
@@ -65,7 +65,7 @@ ${hasResearch && researchInfo ? `
 - Search intent: ${researchInfo.searchIntent}
 ` : '❌ No research completed yet'}
 
-${hasOutline ? `✅ OUTLINE GENERATED: ${outline.length} sections created${isOutlineConfirmed ? ' (CONFIRMED)' : ' (PENDING CONFIRMATION)'}` : '❌ No outline generated yet'}
+${hasOutline && outline ? `✅ OUTLINE GENERATED: ${outline.length} sections created${isOutlineConfirmed ? ' (CONFIRMED)' : ' (PENDING CONFIRMATION)'}` : '❌ No outline generated yet'}
 ${outlineContext}
 
 Available tools:

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

@@ -17,6 +17,7 @@ interface UsePhaseActionHandlersProps {
   outlineGenRef: React.RefObject<any>;
   setOutline: (outline: any[]) => void;
   setContentConfirmed: (confirmed: boolean) => void;
+  setIsSEOAnalysisModalOpen: (open: boolean) => void;
   setIsSEOMetadataModalOpen: (open: boolean) => void;
   runSEOAnalysisDirect: () => string;
   onOutlineComplete?: (outline: any) => void;
@@ -36,6 +37,7 @@ export const usePhaseActionHandlers = ({
   outlineGenRef,
   setOutline,
   setContentConfirmed,
+  setIsSEOAnalysisModalOpen,
   setIsSEOMetadataModalOpen,
   runSEOAnalysisDirect,
   onOutlineComplete,
@@ -162,13 +164,20 @@ export const usePhaseActionHandlers = ({
     }
     navigateToPhase('seo');
     runSEOAnalysisDirect();
-    debug.log('[BlogWriter] SEO action triggered');
+    debug.log('[BlogWriter] SEO action triggered - running SEO analysis');
   }, [contentConfirmed, setContentConfirmed, navigateToPhase, runSEOAnalysisDirect]);
 
+  const handleApplySEORecommendations = useCallback(() => {
+    navigateToPhase('seo');
+    setIsSEOAnalysisModalOpen(true);
+    debug.log('[BlogWriter] Apply SEO Recommendations action triggered - opening SEO analysis modal');
+  }, [navigateToPhase, setIsSEOAnalysisModalOpen]);
+
   const handlePublishAction = useCallback(() => {
-    navigateToPhase('publish');
+    // Can be called from SEO phase (after recommendations applied) or publish phase
+    navigateToPhase('seo'); // Stay in SEO phase if called from there
     setIsSEOMetadataModalOpen(true);
-    debug.log('[BlogWriter] Publish action triggered - opening SEO metadata modal');
+    debug.log('[BlogWriter] Generate SEO Metadata action triggered - opening SEO metadata modal');
   }, [navigateToPhase, setIsSEOMetadataModalOpen]);
 
   return {
@@ -176,6 +185,7 @@ export const usePhaseActionHandlers = ({
     handleOutlineAction,
     handleContentAction,
     handleSEOAction,
+    handleApplySEORecommendations,
     handlePublishAction,
   };
 };

frontend/src/components/BlogWriter/PhaseNavigation.tsx

@@ -15,6 +15,7 @@ export interface PhaseActionHandlers {
   onOutlineAction?: () => void;       // Generate outline
   onContentAction?: () => void;       // Confirm outline + generate content
   onSEOAction?: () => void;           // Run SEO analysis
+  onApplySEORecommendations?: () => void;  // Apply SEO recommendations
   onPublishAction?: () => void;       // Generate SEO metadata or publish
 }
 
@@ -31,6 +32,7 @@ interface PhaseNavigationProps {
   hasContent?: boolean;
   contentConfirmed?: boolean;
   hasSEOAnalysis?: boolean;
+  seoRecommendationsApplied?: boolean;
   hasSEOMetadata?: boolean;
 }
 
@@ -46,6 +48,7 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
   hasContent = false,
   contentConfirmed = false,
   hasSEOAnalysis = false,
+  seoRecommendationsApplied = false,
   hasSEOMetadata = false,
 }) => {
   // Determine which action to show for each phase when CopilotKit is unavailable
@@ -61,7 +64,10 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
         }
         break;
       case 'outline':
-        if (hasResearch && !hasOutline) {
+        // Show "Create Outline" if research exists and outline is not yet confirmed
+        // This ensures users can create/regenerate outline after research, even if cached one exists
+        // Once outline is confirmed, we hide the button to avoid confusion during content generation
+        if (hasResearch && !outlineConfirmed) {
           return { label: 'Create Outline', handler: actionHandlers.onOutlineAction || null };
         }
         break;
@@ -71,13 +77,26 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
         }
         break;
       case 'seo':
-        if (hasContent && contentConfirmed && !hasSEOAnalysis) {
+        // Priority order matching CopilotKit suggestions:
+        // 1. No SEO analysis yet - Run SEO Analysis
+        // Note: We check hasContent (sections exist) - contentConfirmed is checked but not strictly required
+        // This allows users to run SEO analysis even if contentConfirmed hasn't been explicitly set
+        if (hasContent && !hasSEOAnalysis) {
           return { label: 'Run SEO Analysis', handler: actionHandlers.onSEOAction || null };
         }
+        // 2. SEO analysis exists but recommendations not applied - Apply SEO Recommendations
+        if (hasSEOAnalysis && !seoRecommendationsApplied) {
+          return { label: 'Apply SEO Recommendations', handler: actionHandlers.onApplySEORecommendations || null };
+        }
+        // 3. SEO analysis exists and recommendations applied but no metadata - Generate SEO Metadata
+        if (hasSEOAnalysis && seoRecommendationsApplied && !hasSEOMetadata) {
+          return { label: 'Generate SEO Metadata', handler: actionHandlers.onPublishAction || null };
+        }
         break;
       case 'publish':
-        if (hasSEOAnalysis && !hasSEOMetadata) {
+        // Only show if SEO metadata exists (ready to publish)
-          return { label: 'Generate SEO Metadata', handler: actionHandlers.onPublishAction || null };
+        if (hasSEOAnalysis && seoRecommendationsApplied && hasSEOMetadata) {
+          return { label: 'Ready to Publish', handler: null }; // Publish handled separately
         }
         break;
     }
@@ -97,17 +116,59 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
         const isCompleted = phase.completed;
         const isDisabled = phase.disabled;
         const action = getActionForPhase(phase.id);
+        
         // Show action button when:
         // 1. CopilotKit is unavailable
         // 2. Action handler exists
         // 3. Phase is not disabled
-        // 4. Show for current phase OR next actionable phase (not completed)
+        // 4. Show for current phase OR next actionable phase (not completed) OR phases with available actions
-        //    For research phase specifically, always show if no research exists
+        //    For research phase: always show if no research exists
+        //    For outline phase: always show if research exists but no outline (like research phase)
+        //    For SEO phase: always show if action handler exists (prerequisites are met)
         const isResearchPhase = phase.id === 'research' && !hasResearch;
-        const showAction = !copilotKitAvailable && action.handler && !isDisabled && (
+        // Outline phase: show action whenever research exists and action handler is available
+        // This allows users to create/regenerate outline after research, even if cached one exists
+        const isOutlinePhase = phase.id === 'outline' && hasResearch && action.handler;
+        // SEO phase: show action whenever prerequisites are met (action handler exists)
+        // Similar to research/outline, show SEO actions whenever handler exists and phase is enabled
+        const isSEOPhase = phase.id === 'seo' && action.handler;
+        
+        // Debug logging for SEO phase (temporary - for troubleshooting)
+        if (phase.id === 'seo' && !copilotKitAvailable && process.env.NODE_ENV === 'development') {
+          console.log('[PhaseNavigation] SEO phase debug:', {
+            phaseId: phase.id,
+            isCurrent,
+            isCompleted,
+            isDisabled,
+            hasContent,
+            contentConfirmed,
+            hasSEOAnalysis,
+            seoRecommendationsApplied,
+            hasSEOMetadata,
+            actionLabel: action.label,
+            actionHandler: !!action.handler,
+            copilotKitAvailable,
+            isSEOPhase,
+            showActionWillBe: !copilotKitAvailable && action.handler && !isDisabled && (
+              isCurrent || 
+              (!isCompleted && !isDisabled) ||
+              isResearchPhase ||
+              isOutlinePhase ||
+              isSEOPhase
+            )
+          });
+        }
+        
+        // Show action if: current phase, or phase is not completed and not disabled, or it's research/outline/SEO with available action
+        // For SEO: show whenever action handler exists (prerequisites are met), even if phase is marked as disabled/completed
+        // This is critical because SEO prerequisites (hasContent && contentConfirmed) are validated in getActionForPhase,
+        // so if action.handler exists, we should show it regardless of phase navigation's disabled state
+        const showAction = !copilotKitAvailable && action.handler && (
           isCurrent || 
           (!isCompleted && !isDisabled) ||
-          isResearchPhase
+          isResearchPhase ||
+          isOutlinePhase ||
+          isSEOPhase // Show SEO actions when handler exists - handler existence means prerequisites are met, so ignore isDisabled
         );
         
         return (

frontend/src/components/BlogWriter/ResearchComponents/GoogleSearchModal.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { BlogResearchResponse } from '../../../services/blogWriterApi';
+
+interface GoogleSearchModalProps {
+  research: BlogResearchResponse;
+  onClose: () => void;
+}
+
+export const GoogleSearchModal: React.FC<GoogleSearchModalProps> = ({ research, onClose }) => {
+  if (!research.search_widget && !research.search_queries?.length) {
+    return null;
+  }
+
+  const handleSearchClick = (query: string) => {
+    // Open Google Search in new tab per Google requirements
+    const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
+    window.open(searchUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 1000,
+      backdropFilter: 'blur(4px)'
+    }}
+    onClick={onClose}>
+      <div style={{
+        backgroundColor: 'white',
+        borderRadius: '16px',
+        padding: '32px',
+        maxWidth: '800px',
+        width: '90%',
+        maxHeight: '90vh',
+        overflow: 'auto',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        border: '1px solid #e5e7eb',
+        position: 'relative'
+      }}
+      onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'space-between', 
+          alignItems: 'center', 
+          marginBottom: '24px',
+          borderBottom: '2px solid #f3f4f6',
+          paddingBottom: '16px'
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <div style={{
+              width: '48px',
+              height: '48px',
+              backgroundColor: '#f8fafc',
+              borderRadius: '12px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              border: '1px solid #e2e8f0'
+            }}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="#4285F4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </div>
+            <div>
+              <h3 style={{ 
+                margin: 0, 
+                color: '#1f2937', 
+                fontSize: '24px', 
+                fontWeight: '700' 
+              }}>
+                Google Search Suggestions
+              </h3>
+              <p style={{ 
+                margin: '4px 0 0 0', 
+                color: '#6b7280', 
+                fontSize: '14px' 
+              }}>
+                Explore related searches and sources
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              fontSize: '28px',
+              cursor: 'pointer',
+              color: '#6b7280',
+              padding: '8px',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.2s ease',
+              width: '40px',
+              height: '40px'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = '#f3f4f6';
+              e.currentTarget.style.color = '#374151';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = 'transparent';
+              e.currentTarget.style.color = '#6b7280';
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Google Search Widget - Display exactly as provided per Google requirements */}
+        {research.search_widget && (
+          <div style={{ 
+            marginBottom: '32px',
+            width: '100%',
+            padding: '20px',
+            backgroundColor: '#f8fafc',
+            borderRadius: '12px',
+            border: '1px solid #e2e8f0'
+          }}>
+            <div style={{ 
+              marginBottom: '12px',
+              fontSize: '13px',
+              fontWeight: '600',
+              color: '#475569',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px'
+            }}>
+              <span>🔍</span>
+              <span>Search Suggestions (Click to open in Google)</span>
+            </div>
+            {/* Render Google's HTML exactly as provided - no modifications */}
+            <div 
+              dangerouslySetInnerHTML={{ __html: research.search_widget }}
+            />
+          </div>
+        )}
+
+        {/* Search Queries List */}
+        {research.search_queries && research.search_queries.length > 0 && (
+          <div style={{ marginTop: '32px' }}>
+            <h4 style={{ 
+              margin: '0 0 16px 0', 
+              color: '#1f2937', 
+              fontSize: '18px',
+              fontWeight: '600',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px'
+            }}>
+              <span>📋</span>
+              Additional Search Queries
+            </h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {research.search_queries.map((query, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleSearchClick(query)}
+                  style={{
+                    width: '100%',
+                    padding: '12px 16px',
+                    backgroundColor: 'white',
+                    border: '1px solid #d1d5db',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: '14px',
+                    color: '#374151',
+                    transition: 'all 0.2s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = '#f9fafb';
+                    e.currentTarget.style.borderColor = '#4285F4';
+                    e.currentTarget.style.transform = 'translateX(4px)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = 'white';
+                    e.currentTarget.style.borderColor = '#d1d5db';
+                    e.currentTarget.style.transform = 'translateX(0)';
+                  }}
+                >
+                  <span style={{ flex: 1 }}>{query}</span>
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
+                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="#4285F4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Info Footer */}
+        <div style={{
+          marginTop: '24px',
+          padding: '16px',
+          backgroundColor: '#eff6ff',
+          borderRadius: '8px',
+          border: '1px solid #bfdbfe'
+        }}>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'flex-start', 
+            gap: '8px',
+            fontSize: '13px',
+            color: '#1e40af'
+          }}>
+            <span style={{ fontSize: '16px', lineHeight: '1.5' }}>ℹ️</span>
+            <div>
+              <div style={{ fontWeight: '600', marginBottom: '4px' }}>
+                About These Suggestions
+              </div>
+              <div style={{ lineHeight: '1.6' }}>
+                These search suggestions are generated by Google's AI to help you explore related topics. 
+                Clicking any suggestion will open Google Search in a new tab to find the latest and most relevant information.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GoogleSearchModal;
+

frontend/src/components/BlogWriter/ResearchComponents/ResearchSources.tsx

@@ -436,20 +436,7 @@ export const ResearchSources: React.FC<ResearchSourcesProps> = ({ research }) =>
         </div>
       )}
         
-        {/* Google Search Suggestions - Per Google Display Requirements */}
+      {/* Note: Google Search Widget is shown in GoogleSearchModal instead */}
-        {research.search_widget && (
-          <div style={{ 
-            marginBottom: '24px', 
-            width: '100%',
-            position: 'relative'
-          }}>
-            {/* Google Search Widget - Display exactly as provided without modifications */}
-            <div 
-              dangerouslySetInnerHTML={{ __html: research.search_widget }}
-            />
-          </div>
-        )}
-        
       <div style={{ 
         display: 'grid', 
         gap: '12px',

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

@@ -1,2 +1,3 @@
 export { ResearchSources } from './ResearchSources';
 export { ResearchGrounding } from './ResearchGrounding';
+export { GoogleSearchModal } from './GoogleSearchModal';

frontend/src/components/BlogWriter/ResearchResults.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BlogResearchResponse } from '../../services/blogWriterApi';
-import { ResearchSources, ResearchGrounding } from './ResearchComponents';
+import { ResearchSources, ResearchGrounding, GoogleSearchModal } from './ResearchComponents';
 
 interface ResearchResultsProps {
   research: BlogResearchResponse;
@@ -10,6 +10,7 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
   const [showAnglesModal, setShowAnglesModal] = useState(false);
   const [showCompetitorModal, setShowCompetitorModal] = useState(false);
   const [showGroundingModal, setShowGroundingModal] = useState(false);
+  const [showSearchModal, setShowSearchModal] = useState(false);
   const [showToast, setShowToast] = useState(false);
 
   // Show toast message on component mount
@@ -501,6 +502,38 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
             >
               📝 Use Research Blog Topics
             </div>
+
+            {/* Google Search Suggestions Chip - Only show when we have search data */}
+            {(research.search_widget || (research.search_queries && research.search_queries.length > 0)) && (
+              <div 
+                onClick={() => setShowSearchModal(true)}
+                style={{
+                  backgroundColor: '#fff8e1',
+                  color: '#f57c00',
+                  border: '1px solid #ffb74d',
+                  borderRadius: '20px',
+                  padding: '6px 16px',
+                  fontSize: '13px',
+                  fontWeight: '500',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = '#ffe082';
+                  e.currentTarget.style.transform = 'scale(1.05)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = '#fff8e1';
+                  e.currentTarget.style.transform = 'scale(1)';
+                }}
+              >
+                🔍 Google Search
+              </div>
+            )}
           </div>
         </div>
         
@@ -539,6 +572,14 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
       {renderAnglesModal()}
       {renderCompetitorModal()}
       {renderGroundingModal()}
+      
+      {/* Google Search Modal */}
+      {showSearchModal && (
+        <GoogleSearchModal 
+          research={research} 
+          onClose={() => setShowSearchModal(false)} 
+        />
+      )}
       </div>
     </>
   );

frontend/src/components/Research/ResearchWizard.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import { useResearchWizard } from './hooks/useResearchWizard';
 import { useResearchExecution } from './hooks/useResearchExecution';
-import { StepKeyword } from './steps/StepKeyword';
+import { ResearchInput } from './steps/ResearchInput';
-import { StepOptions } from './steps/StepOptions';
 import { StepProgress } from './steps/StepProgress';
 import { StepResults } from './steps/StepResults';
 import { ResearchWizardProps } from './types/research.types';
@@ -19,12 +18,17 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
   // Handle results from execution
   useEffect(() => {
     if (execution.result && !execution.isExecuting) {
+      console.log('[ResearchWizard] Results received, updating state and navigating:', {
+        hasResults: !!execution.result,
+        currentStep: wizard.state.currentStep,
+        shouldNavigate: wizard.state.currentStep === 2
+      });
       wizard.updateState({ results: execution.result });
-      if (wizard.state.currentStep === 3) {
+      if (wizard.state.currentStep === 2) {
         wizard.nextStep();
       }
     }
-  }, [execution.result, execution.isExecuting]);
+  }, [execution.result, execution.isExecuting]); // Don't depend on currentStep to avoid loops
 
   // Handle completion callback
   useEffect(() => {
@@ -43,61 +47,79 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
 
     switch (wizard.state.currentStep) {
       case 1:
-        return <StepKeyword {...stepProps} />;
+        return <ResearchInput {...stepProps} />;
       case 2:
-        return <StepOptions {...stepProps} />;
+        return <StepProgress {...stepProps} execution={execution} />;
       case 3:
-        return <StepProgress {...stepProps} />;
-      case 4:
         return <StepResults {...stepProps} />;
       default:
-        return <StepKeyword {...stepProps} />;
+        return <ResearchInput {...stepProps} />;
     }
   };
 
   return (
-    <div style={{ 
+    <div>
-      minHeight: '100vh', 
-      backgroundColor: '#f5f5f5',
-      padding: '20px',
-    }}>
       {/* Wizard Container */}
       <div style={{
         maxWidth: '1200px',
         margin: '0 auto',
-        backgroundColor: 'white',
+        background: 'rgba(255, 255, 255, 0.8)',
-        borderRadius: '12px',
+        backdropFilter: 'blur(12px)',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        border: '1px solid rgba(14, 165, 233, 0.2)',
+        borderRadius: '20px',
+        boxShadow: '0 4px 16px rgba(14, 165, 233, 0.1)',
         overflow: 'hidden',
       }}>
         {/* Header */}
         <div style={{
-          backgroundColor: '#1976d2',
+          background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(56, 189, 248, 0.08) 100%)',
-          color: 'white',
+          borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
-          padding: '24px',
+          padding: '20px 28px',
-          borderBottom: '1px solid #e0e0e0',
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <div>
-              <h1 style={{ margin: 0, fontSize: '24px' }}>Research Wizard</h1>
+              <h1 style={{ 
-              <p style={{ margin: '8px 0 0 0', fontSize: '14px', opacity: 0.9 }}>
+                margin: 0, 
-                Step {wizard.state.currentStep} of {wizard.maxSteps}
+                fontSize: '24px',
+                fontWeight: '700',
+                color: '#0c4a6e',
+              }}>
+                Research Wizard
+              </h1>
+              <p style={{ 
+                margin: '4px 0 0 0', 
+                fontSize: '13px', 
+                color: '#0369a1',
+                fontWeight: '400',
+              }}>
+                Phase {wizard.state.currentStep} of {wizard.maxSteps} • AI-Powered Intelligence
               </p>
             </div>
             {onCancel && (
               <button
-                onClick={onCancel}
+                onClick={() => {
+                  wizard.reset();
+                  onCancel();
+                }}
                 style={{
                   padding: '8px 16px',
-                  backgroundColor: 'rgba(255,255,255,0.2)',
+                  background: 'rgba(239, 68, 68, 0.1)',
-                  color: 'white',
+                  color: '#dc2626',
-                  border: '1px solid rgba(255,255,255,0.3)',
+                  border: '1px solid rgba(239, 68, 68, 0.25)',
-                  borderRadius: '6px',
+                  borderRadius: '10px',
                   cursor: 'pointer',
-                  fontSize: '14px',
+                  fontSize: '13px',
+                  fontWeight: '500',
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
                 }}
               >
-                Cancel
+                ✕ Cancel
               </button>
             )}
           </div>
@@ -105,16 +127,18 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
 
         {/* Progress Bar */}
         <div style={{
-          backgroundColor: '#f0f0f0',
+          background: 'rgba(14, 165, 233, 0.1)',
-          height: '4px',
+          height: '5px',
           position: 'relative',
+          overflow: 'hidden',
         }}>
           <div
             style={{
-              backgroundColor: '#1976d2',
+              background: 'linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%)',
               height: '100%',
               width: `${(wizard.state.currentStep / wizard.maxSteps) * 100}%`,
-              transition: 'width 0.3s ease',
+              transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+              boxShadow: '0 0 8px rgba(14, 165, 233, 0.4)',
             }}
           />
         </div>
@@ -123,67 +147,123 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
         <div style={{
           display: 'flex',
           justifyContent: 'space-around',
-          padding: '20px 40px',
+          padding: '24px 40px',
-          borderBottom: '1px solid #e0e0e0',
+          borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
+          background: 'rgba(14, 165, 233, 0.03)',
         }}>
-          {[1, 2, 3, 4].map(step => (
+          {[1, 2, 3].map(step => {
-            <div key={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
+            const isActive = step === wizard.state.currentStep;
-              <div style={{
+            const isCompleted = step < wizard.state.currentStep;
-                width: '40px',
+            const isClickable = step <= wizard.state.currentStep;
-                height: '40px',
+            
-                borderRadius: '50%',
+            return (
-                backgroundColor: step <= wizard.state.currentStep ? '#1976d2' : '#e0e0e0',
+              <div 
-                color: step <= wizard.state.currentStep ? 'white' : '#999',
+                key={step} 
-                display: 'flex',
+                style={{ 
-                alignItems: 'center',
+                  display: 'flex', 
-                justifyContent: 'center',
+                  flexDirection: 'column', 
-                fontWeight: 'bold',
+                  alignItems: 'center', 
-                fontSize: '16px',
+                  position: 'relative',
-                marginBottom: '8px',
+                  cursor: isClickable ? 'pointer' : 'default',
-                transition: 'all 0.3s ease',
+                  transition: 'all 0.2s ease',
-              }}>
+                }}
-                {step < wizard.state.currentStep ? '✓' : step}
+                onClick={() => {
+                  if (isClickable) {
+                    wizard.updateState({ currentStep: step });
+                  }
+                }}
+                onMouseEnter={(e) => {
+                  if (isClickable) {
+                    e.currentTarget.style.transform = 'scale(1.05)';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.transform = 'scale(1)';
+                }}
+              >
+                <div style={{
+                  width: '48px',
+                  height: '48px',
+                  borderRadius: '50%',
+                  background: isActive 
+                    ? 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)'
+                    : isCompleted
+                    ? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)'
+                    : 'rgba(14, 165, 233, 0.1)',
+                  color: (isActive || isCompleted) ? 'white' : '#64748b',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontWeight: '700',
+                  fontSize: '18px',
+                  marginBottom: '10px',
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  border: isActive ? '2px solid rgba(14, 165, 233, 0.3)' : '2px solid rgba(14, 165, 233, 0.1)',
+                  boxShadow: isActive 
+                    ? '0 4px 16px rgba(14, 165, 233, 0.3)' 
+                    : isCompleted 
+                    ? '0 2px 8px rgba(34, 197, 94, 0.2)'
+                    : 'none',
+                }}>
+                  {isCompleted ? '✓' : step}
+                </div>
+                <span style={{
+                  fontSize: '13px',
+                  color: (isActive || isCompleted) ? '#0c4a6e' : '#64748b',
+                  fontWeight: isActive ? '600' : '400',
+                  letterSpacing: '0.01em',
+                }}>
+                  {step === 1 && 'Configure'}
+                  {step === 2 && 'Execute'}
+                  {step === 3 && 'Analyze'}
+                </span>
               </div>
-              <span style={{
+            );
-                fontSize: '12px',
+          })}
-                color: step <= wizard.state.currentStep ? '#1976d2' : '#999',
-                fontWeight: step === wizard.state.currentStep ? '600' : 'normal',
-              }}>
-                {step === 1 && 'Setup'}
-                {step === 2 && 'Options'}
-                {step === 3 && 'Research'}
-                {step === 4 && 'Results'}
-              </span>
-            </div>
-          ))}
         </div>
 
         {/* Content */}
-        <div style={{ padding: '24px' }}>
+        <div style={{ padding: '20px' }}>
           {renderStep()}
         </div>
 
         {/* Navigation Footer */}
-        {wizard.state.currentStep <= 2 && (
+        {wizard.state.currentStep < 3 && (
           <div style={{
-            padding: '20px 24px',
+            padding: '20px 28px',
-            borderTop: '1px solid #e0e0e0',
+            borderTop: '1px solid rgba(14, 165, 233, 0.15)',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
-            backgroundColor: '#fafafa',
+            background: 'rgba(14, 165, 233, 0.03)',
           }}>
             <button
               onClick={wizard.prevStep}
               disabled={wizard.isFirstStep}
               style={{
-                padding: '10px 20px',
+                padding: '10px 24px',
-                backgroundColor: wizard.isFirstStep ? '#f0f0f0' : 'white',
+                background: wizard.isFirstStep ? 'rgba(100, 116, 139, 0.1)' : 'rgba(255, 255, 255, 0.8)',
-                color: wizard.isFirstStep ? '#999' : '#333',
+                color: wizard.isFirstStep ? '#94a3b8' : '#0c4a6e',
-                border: wizard.isFirstStep ? '1px solid #e0e0e0' : '1px solid #ddd',
+                border: `1px solid ${wizard.isFirstStep ? 'rgba(100, 116, 139, 0.2)' : 'rgba(14, 165, 233, 0.2)'}`,
-                borderRadius: '6px',
+                borderRadius: '10px',
                 cursor: wizard.isFirstStep ? 'not-allowed' : 'pointer',
-                fontSize: '14px',
+                fontSize: '13px',
+                fontWeight: '500',
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!wizard.isFirstStep) {
+                  e.currentTarget.style.background = 'rgba(255, 255, 255, 1)';
+                  e.currentTarget.style.transform = 'translateX(-4px)';
+                  e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!wizard.isFirstStep) {
+                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.8)';
+                  e.currentTarget.style.transform = 'translateX(0)';
+                  e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+                }
               }}
             >
               ← Back
@@ -194,16 +274,32 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
               disabled={!wizard.canGoNext()}
               style={{
                 padding: '10px 24px',
-                backgroundColor: wizard.canGoNext() ? '#1976d2' : '#e0e0e0',
+                background: wizard.canGoNext() 
-                color: wizard.canGoNext() ? 'white' : '#999',
+                  ? 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)'
-                border: 'none',
+                  : 'rgba(100, 116, 139, 0.2)',
-                borderRadius: '6px',
+                color: wizard.canGoNext() ? 'white' : '#94a3b8',
+                border: wizard.canGoNext() ? 'none' : '1px solid rgba(100, 116, 139, 0.2)',
+                borderRadius: '10px',
                 cursor: wizard.canGoNext() ? 'pointer' : 'not-allowed',
-                fontSize: '14px',
+                fontSize: '13px',
                 fontWeight: '600',
+                transition: 'all 0.2s ease',
+                boxShadow: wizard.canGoNext() ? '0 2px 8px rgba(14, 165, 233, 0.3)' : 'none',
+              }}
+              onMouseEnter={(e) => {
+                if (wizard.canGoNext()) {
+                  e.currentTarget.style.transform = 'translateX(4px)';
+                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(14, 165, 233, 0.4)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (wizard.canGoNext()) {
+                  e.currentTarget.style.transform = 'translateX(0)';
+                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(14, 165, 233, 0.3)';
+                }
               }}
             >
-              {wizard.isLastStep ? 'Finish' : 'Next →'}
+              {wizard.isLastStep ? 'Finish' : 'Continue →'}
             </button>
           </div>
         )}

frontend/src/components/Research/hooks/useResearchWizard.ts

@@ -3,7 +3,7 @@ import { WizardState, WizardStepProps } from '../types/research.types';
 import { ResearchMode, ResearchConfig, BlogResearchResponse } from '../../../services/blogWriterApi';
 
 const WIZARD_STATE_KEY = 'alwrity_research_wizard_state';
-const MAX_STEPS = 4;
+const MAX_STEPS = 3; // Input (combined) -> Progress -> Results
 
 const defaultState: WizardState = {
   currentStep: 1,
@@ -88,11 +88,9 @@ export const useResearchWizard = (initialKeywords?: string[], initialIndustry?:
       case 1:
         return state.keywords.length > 0 && state.keywords.every(k => k.trim().length > 0);
       case 2:
-        return true; // Mode selection always allowed
+        return !!state.results; // Can proceed if we have results
       case 3:
-        return false; // Progress can't be skipped
+        return false; // Results is the last step
-      case 4:
-        return false; // Results can't be skipped
       default:
         return false;
     }

frontend/src/components/Research/steps/ResearchInput.tsx

@@ -0,0 +1,571 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { WizardStepProps } from '../types/research.types';
+import { ResearchProvider } from '../../../services/blogWriterApi';
+
+const industries = [
+  'General',
+  'Technology',
+  'Business',
+  'Marketing',
+  'Finance',
+  'Healthcare',
+  'Education',
+  'Real Estate',
+  'Entertainment',
+  'Food & Beverage',
+  'Travel',
+  'Fashion',
+  'Sports',
+  'Science',
+  'Law',
+  'Other',
+];
+
+const researchModes = [
+  { value: 'basic', label: 'Basic - Quick insights' },
+  { value: 'comprehensive', label: 'Comprehensive - In-depth analysis' },
+  { value: 'targeted', label: 'Targeted - Specific focus' },
+];
+
+const providers = [
+  { value: 'google', label: '🔍 Google Search' },
+  { value: 'exa', label: '🧠 Exa Neural Search' },
+];
+
+const exaCategories = [
+  { value: '', label: 'All Categories' },
+  { value: 'company', label: 'Company Profiles' },
+  { value: 'research paper', label: 'Research Papers' },
+  { value: 'news', label: 'News Articles' },
+  { value: 'linkedin profile', label: 'LinkedIn Profiles' },
+  { value: 'github', label: 'GitHub Repos' },
+  { value: 'tweet', label: 'Tweets' },
+  { value: 'movie', label: 'Movies' },
+  { value: 'song', label: 'Songs' },
+  { value: 'personal site', label: 'Personal Sites' },
+  { value: 'pdf', label: 'PDF Documents' },
+  { value: 'financial report', label: 'Financial Reports' },
+];
+
+const exaSearchTypes = [
+  { value: 'auto', label: 'Auto - Let AI decide' },
+  { value: 'keyword', label: 'Keyword - Precise matching' },
+  { value: 'neural', label: 'Neural - Semantic search' },
+];
+
+// Dynamic placeholder examples showcasing research capabilities
+const placeholderExamples = [
+  "AI-powered content marketing strategies for SaaS startups\n\nExplores:\n• Latest automation tools and platforms\n• ROI optimization techniques\n• Multi-channel campaign orchestration\n• Data-driven personalization strategies",
+  "Sustainable supply chain management in manufacturing\n\nCovers:\n• Green logistics and carbon footprint reduction\n• Blockchain for transparency and traceability\n• Circular economy implementation frameworks\n• Real-time inventory optimization with AI",
+  "Emerging trends in telemedicine and remote patient monitoring\n\nIncludes:\n• Wearable device integration and IoT sensors\n• HIPAA-compliant data transmission protocols\n• AI-assisted diagnostic accuracy improvements\n• Patient engagement and adherence strategies",
+  "Cryptocurrency regulation and institutional adoption\n\nAnalyzes:\n• Global regulatory frameworks and compliance\n• Institutional investment trends (2024-2025)\n• DeFi integration with traditional finance\n• Risk management and security best practices",
+  "Voice search optimization and conversational AI for e-commerce\n\nFeatures:\n• Natural language processing advancements\n• Smart speaker integration strategies\n• Voice-enabled checkout experiences\n• Personalization through voice analytics"
+];
+
+export const ResearchInput: React.FC<WizardStepProps> = ({ state, onUpdate }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
+
+  // Rotate placeholder examples every 4 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentPlaceholder((prev) => (prev + 1) % placeholderExamples.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleKeywordsChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    const keywords = value.split(',').map(k => k.trim()).filter(Boolean);
+    onUpdate({ keywords });
+  };
+
+  const handleIndustryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onUpdate({ industry: e.target.value });
+  };
+
+  const handleAudienceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onUpdate({ targetAudience: e.target.value });
+  };
+
+  const handleModeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const mode = e.target.value as any;
+    onUpdate({ researchMode: mode });
+  };
+
+  const handleProviderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const provider = e.target.value as ResearchProvider;
+    onUpdate({ config: { ...state.config, provider } });
+  };
+
+  const handleExaCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    onUpdate({ config: { ...state.config, exa_category: value || undefined } });
+  };
+
+  const handleExaSearchTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value as 'auto' | 'keyword' | 'neural';
+    onUpdate({ config: { ...state.config, exa_search_type: value } });
+  };
+
+  const handleIncludeDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const domains = value.split(',').map(d => d.trim()).filter(Boolean);
+    onUpdate({ config: { ...state.config, exa_include_domains: domains } });
+  };
+
+  const handleExcludeDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const domains = value.split(',').map(d => d.trim()).filter(Boolean);
+    onUpdate({ config: { ...state.config, exa_exclude_domains: domains } });
+  };
+
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      console.log('File selected:', file.name);
+      // TODO: Implement file upload logic
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '100%' }}>
+      {/* Main Input Area */}
+      <div style={{
+        background: 'rgba(255, 255, 255, 0.6)',
+        backdropFilter: 'blur(8px)',
+        border: '2px solid rgba(14, 165, 233, 0.2)',
+        borderRadius: '16px',
+        padding: '20px',
+        marginBottom: '20px',
+        transition: 'all 0.3s ease',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
+        e.currentTarget.style.boxShadow = '0 4px 20px rgba(14, 165, 233, 0.12)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+      >
+        <label style={{
+          marginBottom: '12px',
+          fontSize: '15px',
+          fontWeight: '600',
+          color: '#0c4a6e',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+        }}>
+          <span style={{
+            fontSize: '20px',
+          }}>🔍</span>
+          Research Topic & Keywords
+        </label>
+        
+        <div style={{ position: 'relative' }}>
+          <textarea
+            value={state.keywords.join(', ')}
+            onChange={handleKeywordsChange}
+            placeholder={placeholderExamples[currentPlaceholder]}
+            style={{
+              width: '100%',
+              minHeight: '160px',
+              padding: '16px',
+              fontSize: '14px',
+              lineHeight: '1.6',
+              border: '1px solid rgba(14, 165, 233, 0.15)',
+              borderRadius: '12px',
+              background: 'rgba(255, 255, 255, 0.9)',
+              color: '#0f172a',
+              resize: 'vertical',
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              transition: 'all 0.2s ease',
+              boxShadow: 'inset 0 1px 3px rgba(14, 165, 233, 0.05)',
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
+              e.currentTarget.style.boxShadow = 'inset 0 1px 3px rgba(14, 165, 233, 0.05), 0 0 0 3px rgba(14, 165, 233, 0.1)';
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.15)';
+              e.currentTarget.style.boxShadow = 'inset 0 1px 3px rgba(14, 165, 233, 0.05)';
+            }}
+          />
+          
+          {/* File Upload Button */}
+          <button
+            onClick={handleFileUpload}
+            type="button"
+            style={{
+              position: 'absolute',
+              bottom: '12px',
+              right: '12px',
+              padding: '8px 12px',
+              background: 'rgba(14, 165, 233, 0.1)',
+              border: '1px solid rgba(14, 165, 233, 0.2)',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              fontSize: '12px',
+              fontWeight: '500',
+              color: '#0369a1',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              transition: 'all 0.2s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'rgba(14, 165, 233, 0.15)';
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.3)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'rgba(14, 165, 233, 0.1)';
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+            }}
+          >
+            📎 Upload Document
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            onChange={handleFileChange}
+            accept=".txt,.doc,.docx,.pdf"
+            style={{ display: 'none' }}
+          />
+        </div>
+        
+        <div style={{
+          marginTop: '10px',
+          fontSize: '12px',
+          color: '#64748b',
+          lineHeight: '1.5',
+        }}>
+          💡 Tip: Describe your research topic in detail. Include specific keywords, questions, or aspects you want to explore. The AI will find relevant sources and insights.
+        </div>
+      </div>
+
+      {/* Configuration Options */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+        gap: '16px',
+        marginBottom: '20px',
+      }}>
+        {/* Industry */}
+        <div>
+          <label style={{
+            display: 'block',
+            marginBottom: '8px',
+            fontSize: '13px',
+            fontWeight: '600',
+            color: '#0c4a6e',
+          }}>
+            Industry
+          </label>
+          <select
+            value={state.industry}
+            onChange={handleIndustryChange}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              fontSize: '13px',
+              border: '1px solid rgba(14, 165, 233, 0.2)',
+              borderRadius: '10px',
+              background: 'rgba(255, 255, 255, 0.9)',
+              color: '#0f172a',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
+              e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+              e.currentTarget.style.boxShadow = 'none';
+            }}
+          >
+            {industries.map(ind => (
+              <option key={ind} value={ind}>{ind}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Research Mode */}
+        <div>
+          <label style={{
+            display: 'block',
+            marginBottom: '8px',
+            fontSize: '13px',
+            fontWeight: '600',
+            color: '#0c4a6e',
+          }}>
+            Research Depth
+          </label>
+          <select
+            value={state.researchMode}
+            onChange={handleModeChange}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              fontSize: '13px',
+              border: '1px solid rgba(14, 165, 233, 0.2)',
+              borderRadius: '10px',
+              background: 'rgba(255, 255, 255, 0.9)',
+              color: '#0f172a',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
+              e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+              e.currentTarget.style.boxShadow = 'none';
+            }}
+          >
+            {researchModes.map(mode => (
+              <option key={mode.value} value={mode.value}>{mode.label}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Provider (only for Comprehensive/Targeted) */}
+        {state.researchMode !== 'basic' && (
+          <div>
+            <label style={{
+              display: 'block',
+              marginBottom: '8px',
+              fontSize: '13px',
+              fontWeight: '600',
+              color: '#0c4a6e',
+            }}>
+              Search Provider
+            </label>
+            <select
+              value={state.config.provider}
+              onChange={handleProviderChange}
+              style={{
+                width: '100%',
+                padding: '10px 12px',
+                fontSize: '13px',
+                border: '1px solid rgba(14, 165, 233, 0.2)',
+                borderRadius: '10px',
+                background: 'rgba(255, 255, 255, 0.9)',
+                color: '#0f172a',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+              }}
+              onFocus={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
+                e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
+              }}
+              onBlur={(e) => {
+                e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+                e.currentTarget.style.boxShadow = 'none';
+              }}
+            >
+              {providers.map(prov => (
+                <option key={prov.value} value={prov.value}>{prov.label}</option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      {/* Exa-Specific Options */}
+      {state.config.provider === 'exa' && state.researchMode !== 'basic' && (
+        <div style={{
+          background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%)',
+          border: '1px solid rgba(139, 92, 246, 0.2)',
+          borderRadius: '14px',
+          padding: '16px',
+          marginBottom: '20px',
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '14px',
+          }}>
+            <span style={{ fontSize: '18px' }}>🧠</span>
+            <strong style={{ color: '#6b21a8', fontSize: '13px' }}>Exa Neural Search Options</strong>
+          </div>
+          
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
+            gap: '12px',
+            marginBottom: '12px',
+          }}>
+            {/* Exa Category */}
+            <div>
+              <label style={{
+                display: 'block',
+                marginBottom: '6px',
+                fontSize: '12px',
+                fontWeight: '600',
+                color: '#6b21a8',
+              }}>
+                Content Category
+              </label>
+              <select
+                value={state.config.exa_category || ''}
+                onChange={handleExaCategoryChange}
+                style={{
+                  width: '100%',
+                  padding: '8px 10px',
+                  fontSize: '12px',
+                  border: '1px solid rgba(139, 92, 246, 0.2)',
+                  borderRadius: '8px',
+                  background: 'rgba(255, 255, 255, 0.9)',
+                  color: '#0f172a',
+                  cursor: 'pointer',
+                }}
+              >
+                {exaCategories.map(cat => (
+                  <option key={cat.value} value={cat.value}>{cat.label}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Exa Search Type */}
+            <div>
+              <label style={{
+                display: 'block',
+                marginBottom: '6px',
+                fontSize: '12px',
+                fontWeight: '600',
+                color: '#6b21a8',
+              }}>
+                Search Algorithm
+              </label>
+              <select
+                value={state.config.exa_search_type || 'auto'}
+                onChange={handleExaSearchTypeChange}
+                style={{
+                  width: '100%',
+                  padding: '8px 10px',
+                  fontSize: '12px',
+                  border: '1px solid rgba(139, 92, 246, 0.2)',
+                  borderRadius: '8px',
+                  background: 'rgba(255, 255, 255, 0.9)',
+                  color: '#0f172a',
+                  cursor: 'pointer',
+                }}
+              >
+                {exaSearchTypes.map(type => (
+                  <option key={type.value} value={type.value}>{type.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Domain Filters */}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '12px',
+          }}>
+            <div>
+              <label style={{
+                display: 'block',
+                marginBottom: '6px',
+                fontSize: '12px',
+                fontWeight: '600',
+                color: '#6b21a8',
+              }}>
+                Include Domains (optional)
+              </label>
+              <input
+                type="text"
+                value={state.config.exa_include_domains?.join(', ') || ''}
+                onChange={handleIncludeDomainsChange}
+                placeholder="e.g., nature.com, arxiv.org"
+                style={{
+                  width: '100%',
+                  padding: '8px 10px',
+                  fontSize: '12px',
+                  border: '1px solid rgba(139, 92, 246, 0.2)',
+                  borderRadius: '8px',
+                  background: 'rgba(255, 255, 255, 0.9)',
+                  color: '#0f172a',
+                }}
+              />
+            </div>
+
+            <div>
+              <label style={{
+                display: 'block',
+                marginBottom: '6px',
+                fontSize: '12px',
+                fontWeight: '600',
+                color: '#6b21a8',
+              }}>
+                Exclude Domains (optional)
+              </label>
+              <input
+                type="text"
+                value={state.config.exa_exclude_domains?.join(', ') || ''}
+                onChange={handleExcludeDomainsChange}
+                placeholder="e.g., spam.com, ads.com"
+                style={{
+                  width: '100%',
+                  padding: '8px 10px',
+                  fontSize: '12px',
+                  border: '1px solid rgba(139, 92, 246, 0.2)',
+                  borderRadius: '8px',
+                  background: 'rgba(255, 255, 255, 0.9)',
+                  color: '#0f172a',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Target Audience (Optional) */}
+      <div>
+        <label style={{
+          display: 'block',
+          marginBottom: '8px',
+          fontSize: '13px',
+          fontWeight: '600',
+          color: '#0c4a6e',
+        }}>
+          Target Audience (Optional)
+        </label>
+        <input
+          type="text"
+          value={state.targetAudience}
+          onChange={handleAudienceChange}
+          placeholder="e.g., Marketing professionals, Tech enthusiasts, Business owners"
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            fontSize: '13px',
+            border: '1px solid rgba(14, 165, 233, 0.2)',
+            borderRadius: '10px',
+            background: 'rgba(255, 255, 255, 0.9)',
+            color: '#0f172a',
+            transition: 'all 0.2s ease',
+          }}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
+            e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
+          }}
+          onBlur={(e) => {
+            e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
+            e.currentTarget.style.boxShadow = 'none';
+          }}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/components/Research/steps/StepProgress.tsx

@@ -1,11 +1,20 @@
 import React, { useEffect } from 'react';
 import { WizardStepProps } from '../types/research.types';
-import { useResearchExecution } from '../hooks/useResearchExecution';
 
-export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdate }) => {
+export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdate, execution }) => {
-  const { executeResearch, stopExecution, isExecuting, error, progressMessages, currentStatus } = useResearchExecution();
+  const { executeResearch, stopExecution, isExecuting, error, progressMessages, currentStatus } = execution || {
+    executeResearch: async () => null,
+    stopExecution: () => {},
+    isExecuting: false,
+    error: 'No execution provided',
+    progressMessages: [],
+    currentStatus: 'idle'
+  };
 
   useEffect(() => {
+    // Only start research if execution is available
+    if (!execution) return;
+
     // Start research when this step is reached
     const startResearch = async () => {
       const taskId = await executeResearch(state);
@@ -22,18 +31,19 @@ export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdat
         stopExecution();
       }
     };
-  }, []); // Run once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run once on mount - stable references
 
-  // Move to next step when research completes
+  // Note: Navigation to next step is handled by ResearchWizard when results are received
-  useEffect(() => {
+
-    if (!isExecuting && progressMessages.length > 0) {
+  // Handle missing execution gracefully
-      // Small delay to show final message
+  if (!execution) {
-      const timer = setTimeout(() => {
+    return (
-        onNext();
+      <div style={{ padding: '24px', textAlign: 'center' }}>
-      }, 1000);
+        <p style={{ color: '#666' }}>Loading execution...</p>
-      return () => clearTimeout(timer);
+      </div>
-    }
+    );
-  }, [isExecuting, progressMessages.length, onNext]);
+  }
 
   const getStatusIcon = () => {
     if (error) return '❌';
@@ -48,11 +58,14 @@ export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdat
     return '#1976d2';
   };
 
+  const providerName = state.config.provider === 'exa' ? 'Exa Neural' : 'Google Search';
+  const modeName = state.researchMode === 'basic' ? 'Basic' : state.researchMode === 'comprehensive' ? 'Comprehensive' : 'Targeted';
+
   return (
     <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
       <h2 style={{ marginBottom: '8px', color: '#333' }}>Researching...</h2>
       <p style={{ marginBottom: '24px', color: '#666', fontSize: '15px' }}>
-        Gathering insights from Google Search grounding
+        {modeName} research with {providerName}
       </p>
 
       {/* Status Display */}

frontend/src/components/Research/steps/StepResults.tsx

@@ -3,7 +3,7 @@ import { WizardStepProps } from '../types/research.types';
 import { ResearchResults } from '../../BlogWriter/ResearchResults';
 import { BlogResearchResponse } from '../../../services/blogWriterApi';
 
-export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
+export const StepResults: React.FC<WizardStepProps> = ({ state, onUpdate, onBack }) => {
   if (!state.results) {
     return (
       <div style={{ padding: '24px', textAlign: 'center' }}>
@@ -23,6 +23,14 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
     URL.revokeObjectURL(url);
   };
 
+  const handleStartNew = () => {
+    // Reset to step 1 and clear results
+    onUpdate({ 
+      currentStep: 1, 
+      results: null 
+    });
+  };
+
   return (
     <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '24px' }}>
       <div style={{
@@ -36,6 +44,21 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
         <h2 style={{ margin: 0, color: '#333' }}>Research Results</h2>
         
         <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+          <button
+            onClick={onBack}
+            style={{
+              padding: '8px 16px',
+              backgroundColor: '#f5f5f5',
+              color: '#333',
+              border: '1px solid #ddd',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontSize: '14px',
+            }}
+          >
+            ← Back
+          </button>
+          
           <button
             onClick={handleExport}
             style={{
@@ -55,7 +78,7 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
           </button>
           
           <button
-            onClick={onBack}
+            onClick={handleStartNew}
             style={{
               padding: '8px 16px',
               backgroundColor: '#f5f5f5',
@@ -66,7 +89,7 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
               fontSize: '14px',
             }}
           >
-            ← Start New Research
+            🔄 Start New Research
           </button>
         </div>
       </div>

frontend/src/components/Research/types/research.types.ts

@@ -10,11 +10,22 @@ export interface WizardState {
   results: BlogResearchResponse | null;
 }
 
+export interface ResearchExecution {
+  executeResearch: (state: WizardState) => Promise<string | null>;
+  stopExecution: () => void;
+  isExecuting: boolean;
+  error: string | null;
+  progressMessages: Array<{ timestamp: string; message: string }>;
+  currentStatus: string;
+  result: any;
+}
+
 export interface WizardStepProps {
   state: WizardState;
   onUpdate: (updates: Partial<WizardState>) => void;
   onNext: () => void;
   onBack: () => void;
+  execution?: ResearchExecution;
 }
 
 export interface ResearchWizardProps {

frontend/src/components/SEODashboard/SEOCopilotKitProvider.tsx

@@ -26,8 +26,22 @@ const SEOCopilotKitProvider: React.FC<SEOCopilotKitProviderProps> = ({
   } = useSEOCopilotStore();
   const { analysisData } = useSEOCopilotStore();
 
-  // Get the CopilotKit API key from environment variables
+  // Get the CopilotKit API key from the same sources as App.tsx
-  const publicApiKey = process.env.REACT_APP_COPILOTKIT_API_KEY;
+  // Check localStorage first, then fall back to environment variable
+  const publicApiKey = useMemo(() => {
+    const savedKey = typeof window !== 'undefined' 
+      ? localStorage.getItem('copilotkit_api_key') 
+      : null;
+    const envKey = process.env.REACT_APP_COPILOTKIT_API_KEY || '';
+    const key = (savedKey || envKey).trim();
+    
+    // Validate key format if present
+    if (key && !key.startsWith('ck_pub_')) {
+      console.warn('SEOCopilotKitProvider: CopilotKit API key format invalid - must start with ck_pub_');
+    }
+    
+    return key;
+  }, []);
 
   // Derive a friendly site/brand name from the URL for personalization
   const domainRootName = useMemo(() => {

frontend/src/contexts/CopilotKitHealthContext.tsx

@@ -91,12 +91,31 @@ export const CopilotKitHealthProvider: React.FC<CopilotKitHealthProviderProps> =
     setState((prev) => ({ ...prev, isChecking: true }));
 
     try {
+      // Get CopilotKit API key from the same sources as App.tsx
+      // Check localStorage first, then fall back to environment variable
+      const savedKey = typeof window !== 'undefined' 
+        ? localStorage.getItem('copilotkit_api_key') 
+        : null;
+      const apiKey = savedKey || process.env.REACT_APP_COPILOTKIT_API_KEY || '';
+      
+      // If no API key is available, mark as unhealthy and skip the check
+      if (!apiKey || !apiKey.trim()) {
+        markUnhealthy('CopilotKit API key not configured');
+        return;
+      }
+
+      // Validate key format (must start with ck_pub_)
+      if (!apiKey.startsWith('ck_pub_')) {
+        markUnhealthy('CopilotKit API key format invalid (must start with ck_pub_)');
+        return;
+      }
+
       // Try to check CopilotKit status endpoint
       // This is a lightweight check that doesn't require full CopilotKit initialization
       const response = await fetch('https://api.cloud.copilotkit.ai/ciu', {
         method: 'GET',
         headers: {
-          'x-copilotcloud-public-api-key': process.env.REACT_APP_COPILOTKIT_PUBLIC_API_KEY || '',
+          'x-copilotcloud-public-api-key': apiKey.trim(),
         },
         // Use a short timeout to avoid blocking
         signal: AbortSignal.timeout(3000),
@@ -105,7 +124,12 @@ export const CopilotKitHealthProvider: React.FC<CopilotKitHealthProviderProps> =
       if (response.ok) {
         markHealthy();
       } else {
-        markUnhealthy(`CopilotKit status check failed: ${response.status}`);
+        // Provide more specific error messages based on status code
+        if (response.status === 401) {
+          markUnhealthy('CopilotKit API key is invalid or unauthorized');
+        } else {
+          markUnhealthy(`CopilotKit status check failed: ${response.status}`);
+        }
       }
     } catch (error: any) {
       // Handle various error types

frontend/src/pages/ResearchTest.tsx

@@ -7,16 +7,22 @@ const samplePresets = [
     name: 'AI Marketing Tools',
     keywords: 'AI in marketing, automation tools, customer engagement',
     industry: 'Technology',
+    icon: '🤖',
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
   },
   {
     name: 'Small Business SEO',
     keywords: 'local SEO, small business, Google My Business',
     industry: 'Marketing',
+    icon: '📈',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
   },
   {
     name: 'Content Strategy',
     keywords: 'content planning, editorial calendar, content creation',
     industry: 'Marketing',
+    icon: '✍️',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
   },
 ];
 
@@ -43,65 +49,218 @@ export const ResearchTest: React.FC = () => {
   };
 
   return (
-    <div style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+    <div style={{ 
+      minHeight: '100vh', 
+      background: 'linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%)',
+      position: 'relative',
+      overflow: 'hidden'
+    }}>
+      {/* Animated Background Elements */}
+      <div style={{
+        position: 'absolute',
+        top: '10%',
+        left: '5%',
+        width: '400px',
+        height: '400px',
+        background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%)',
+        borderRadius: '50%',
+        filter: 'blur(40px)',
+        animation: 'float 20s ease-in-out infinite',
+      }} />
+      <div style={{
+        position: 'absolute',
+        bottom: '10%',
+        right: '5%',
+        width: '300px',
+        height: '300px',
+        background: 'radial-gradient(circle, rgba(56,189,248,0.08) 0%, transparent 70%)',
+        borderRadius: '50%',
+        filter: 'blur(40px)',
+        animation: 'float 15s ease-in-out infinite reverse',
+      }} />
+      
+      <style>{`
+        @keyframes float {
+          0%, 100% { transform: translate(0, 0); }
+          50% { transform: translate(20px, 20px); }
+        }
+        @keyframes shimmer {
+          0% { background-position: -1000px 0; }
+          100% { background-position: 1000px 0; }
+        }
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .card-hover {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .card-hover:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+      `}</style>
       {/* Header */}
       <div style={{
-        backgroundColor: '#1976d2',
+        background: 'rgba(255, 255, 255, 0.7)',
-        color: 'white',
+        backdropFilter: 'blur(12px)',
-        padding: '20px',
+        borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
+        padding: '16px 24px',
         marginBottom: '20px',
+        position: 'relative',
+        zIndex: 10,
+        boxShadow: '0 1px 3px rgba(14, 165, 233, 0.1)',
       }}>
-        <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
+        <div style={{ maxWidth: '1400px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <h1 style={{ margin: 0, fontSize: '28px' }}>🔬 Research Component Test Page</h1>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-          <p style={{ margin: '8px 0 0 0', fontSize: '14px', opacity: 0.9 }}>
+            <div style={{
-            Test the modular research wizard component
+              width: '48px',
-          </p>
+              height: '48px',
+              background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
+              borderRadius: '12px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '24px',
+              boxShadow: '0 4px 12px rgba(14, 165, 233, 0.25)',
+            }}>
+              🔬
+            </div>
+            <div>
+              <h1 style={{ 
+                margin: 0, 
+                fontSize: '24px', 
+                fontWeight: '700',
+                color: '#0c4a6e',
+                letterSpacing: '-0.01em',
+              }}>
+                AI-Powered Research Lab
+              </h1>
+              <p style={{ 
+                margin: '2px 0 0 0', 
+                fontSize: '13px', 
+                color: '#0369a1',
+                fontWeight: '400',
+              }}>
+                Enterprise-grade research intelligence at your fingertips
+              </p>
+            </div>
+          </div>
+          
+          {/* Status Badge - Moved to Header */}
+          <div style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '8px 16px',
+            background: 'rgba(34, 197, 94, 0.1)',
+            border: '1px solid rgba(34, 197, 94, 0.25)',
+            borderRadius: '20px',
+            fontSize: '12px',
+            color: '#16a34a',
+            fontWeight: '600',
+          }}>
+            <span style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              background: '#22c55e',
+              boxShadow: '0 0 8px rgba(34, 197, 94, 0.6)',
+              animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            }} />
+            System Online • AI Models Ready
+          </div>
         </div>
       </div>
 
-      <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 20px', display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
+      <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 24px', display: 'flex', gap: '20px', flexWrap: 'wrap', position: 'relative', zIndex: 10 }}>
         {/* Left Panel - Controls */}
-        <div style={{ flex: '1 1 300px', minWidth: '300px' }}>
+        <div style={{ flex: '1 1 280px', minWidth: '280px' }}>
-          <div style={{
+          {/* Presets Card */}
-            backgroundColor: 'white',
+          <div className="card-hover" style={{
-            borderRadius: '8px',
+            background: 'rgba(255, 255, 255, 0.8)',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(14, 165, 233, 0.2)',
+            borderRadius: '16px',
             padding: '20px',
             marginBottom: '20px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            boxShadow: '0 4px 12px rgba(14, 165, 233, 0.08)',
+            animation: 'fadeInUp 0.6s ease-out',
           }}>
-            <h3 style={{ margin: '0 0 16px 0', color: '#333', fontSize: '18px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
-              🎯 Quick Presets
+              <div style={{
-            </h3>
+                width: '36px',
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                height: '36px',
+                background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
+                borderRadius: '10px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '18px',
+              }}>
+                🎯
+              </div>
+              <h3 style={{ margin: 0, color: '#0c4a6e', fontSize: '18px', fontWeight: '600' }}>
+                Quick Start Presets
+              </h3>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
               {samplePresets.map((preset, idx) => (
                 <button
                   key={idx}
                   onClick={() => handlePresetClick(preset)}
+                  className="card-hover"
                   style={{
-                    padding: '12px',
+                    padding: '14px',
-                    backgroundColor: '#f0f7ff',
+                    background: 'rgba(255, 255, 255, 0.9)',
-                    border: '1px solid #b3d9ff',
+                    border: '1px solid rgba(14, 165, 233, 0.2)',
-                    borderRadius: '6px',
+                    borderRadius: '12px',
                     cursor: 'pointer',
                     textAlign: 'left',
                     fontSize: '14px',
-                    transition: 'all 0.2s ease',
+                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                    position: 'relative',
+                    overflow: 'hidden',
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor = '#e3f2fd';
+                    e.currentTarget.style.transform = 'translateX(4px)';
-                    e.currentTarget.style.borderColor = '#90caf9';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(14, 165, 233, 0.2)';
+                    e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = '#f0f7ff';
+                    e.currentTarget.style.transform = 'translateX(0)';
-                    e.currentTarget.style.borderColor = '#b3d9ff';
+                    e.currentTarget.style.boxShadow = 'none';
+                    e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
                   }}
                 >
-                  <div style={{ fontWeight: '600', color: '#1976d2', marginBottom: '4px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '6px' }}>
-                    {preset.name}
+                    <span style={{ fontSize: '20px' }}>{preset.icon}</span>
+                    <div style={{ fontWeight: '600', color: '#0c4a6e', fontSize: '14px' }}>
+                      {preset.name}
+                    </div>
                   </div>
-                  <div style={{ fontSize: '12px', color: '#666' }}>
+                  <div style={{ fontSize: '11px', color: '#64748b', lineHeight: '1.5' }}>
                     {preset.keywords}
                   </div>
+                  <div style={{
+                    marginTop: '6px',
+                    display: 'inline-block',
+                    padding: '3px 10px',
+                    background: 'rgba(14, 165, 233, 0.1)',
+                    borderRadius: '10px',
+                    fontSize: '10px',
+                    color: '#0369a1',
+                    fontWeight: '600',
+                  }}>
+                    {preset.industry}
+                  </div>
                 </button>
               ))}
             </div>
@@ -110,52 +269,99 @@ export const ResearchTest: React.FC = () => {
               onClick={handleReset}
               style={{
                 marginTop: '12px',
-                padding: '8px 16px',
+                padding: '10px 16px',
-                backgroundColor: '#f5f5f5',
+                background: 'rgba(239, 68, 68, 0.1)',
-                border: '1px solid #ddd',
+                border: '1px solid rgba(239, 68, 68, 0.25)',
-                borderRadius: '6px',
+                borderRadius: '10px',
                 cursor: 'pointer',
                 fontSize: '13px',
                 width: '100%',
+                color: '#dc2626',
+                fontWeight: '500',
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
+                e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.4)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
+                e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.25)';
               }}
             >
-              ↻ Reset Test
+              ↻ Reset Research
             </button>
           </div>
 
           {/* Debug Panel */}
-          <div style={{
+          <div className="card-hover" style={{
-            backgroundColor: 'white',
+            background: 'rgba(255, 255, 255, 0.8)',
-            borderRadius: '8px',
+            backdropFilter: 'blur(12px)',
+            border: '1px solid rgba(14, 165, 233, 0.2)',
+            borderRadius: '16px',
             padding: '20px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            boxShadow: '0 4px 12px rgba(14, 165, 233, 0.08)',
+            animation: 'fadeInUp 0.8s ease-out',
           }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
-              <h3 style={{ margin: 0, color: '#333', fontSize: '18px' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                🐛 Debug Panel
+                <div style={{
-              </h3>
+                  width: '36px',
-              <label style={{ cursor: 'pointer', fontSize: '14px' }}>
+                  height: '36px',
+                  background: 'linear-gradient(135deg, #f59e0b 0%, #f97316 100%)',
+                  borderRadius: '10px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '18px',
+                }}>
+                  🐛
+                </div>
+                <h3 style={{ margin: 0, color: '#0c4a6e', fontSize: '18px', fontWeight: '600' }}>
+                  Debug Console
+                </h3>
+              </div>
+              <label style={{ 
+                cursor: 'pointer', 
+                fontSize: '12px',
+                color: '#64748b',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+              }}>
                 <input
                   type="checkbox"
                   checked={showDebug}
                   onChange={(e) => setShowDebug(e.target.checked)}
-                  style={{ marginRight: '6px' }}
+                  style={{ 
+                    marginRight: '0',
+                    width: '14px',
+                    height: '14px',
+                    cursor: 'pointer',
+                  }}
                 />
-                Show Debug
+                Show Data
               </label>
             </div>
 
             {showDebug && (
               <div style={{
-                backgroundColor: '#f5f5f5',
+                background: 'rgba(15, 23, 42, 0.05)',
-                borderRadius: '4px',
+                borderRadius: '10px',
                 padding: '12px',
-                fontSize: '12px',
+                fontSize: '11px',
-                fontFamily: 'monospace',
+                fontFamily: "'Fira Code', 'Monaco', monospace",
-                maxHeight: '400px',
+                maxHeight: '350px',
                 overflow: 'auto',
+                border: '1px solid rgba(14, 165, 233, 0.1)',
               }}>
-                <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                <pre style={{ 
+                  margin: 0, 
+                  whiteSpace: 'pre-wrap', 
+                  wordBreak: 'break-word',
+                  color: '#475569',
+                  lineHeight: '1.6',
+                }}>
                   {JSON.stringify(results, null, 2)}
                 </pre>
               </div>
@@ -164,7 +370,7 @@ export const ResearchTest: React.FC = () => {
         </div>
 
         {/* Main Content - Wizard */}
-        <div style={{ flex: '2 1 800px' }}>
+        <div style={{ flex: '2 1 800px', animation: 'fadeInUp 0.4s ease-out' }}>
           <ResearchWizard
             initialKeywords={presetKeywords}
             initialIndustry={presetIndustry}
@@ -176,56 +382,140 @@ export const ResearchTest: React.FC = () => {
       {/* Footer Stats */}
       {results && (
         <div style={{
-          backgroundColor: 'white',
+          background: 'rgba(255, 255, 255, 0.7)',
-          borderTop: '2px solid #e0e0e0',
+          backdropFilter: 'blur(12px)',
-          padding: '20px',
+          borderTop: '1px solid rgba(14, 165, 233, 0.15)',
-          marginTop: '40px',
+          padding: '24px',
+          marginTop: '32px',
+          position: 'relative',
+          zIndex: 10,
         }}>
           <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
-            <h3 style={{ margin: '0 0 16px 0', color: '#333', fontSize: '18px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
-              📊 Research Statistics
-            </h3>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
               <div style={{
-                backgroundColor: '#e3f2fd',
+                width: '40px',
-                padding: '16px',
+                height: '40px',
-                borderRadius: '8px',
+                background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
-                border: '1px solid #90caf9',
+                borderRadius: '12px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '20px',
+                boxShadow: '0 4px 12px rgba(14, 165, 233, 0.25)',
               }}>
-                <div style={{ fontSize: '12px', color: '#1976d2', fontWeight: '600', marginBottom: '4px' }}>
+                📊
-                  Sources Found
+              </div>
+              <h3 style={{ 
+                margin: 0, 
+                color: '#0c4a6e', 
+                fontSize: '20px',
+                fontWeight: '600',
+              }}>
+                Research Intelligence Report
+              </h3>
+            </div>
+            
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+              <div className="card-hover" style={{
+                background: 'rgba(255, 255, 255, 0.9)',
+                padding: '20px',
+                borderRadius: '14px',
+                border: '1px solid rgba(14, 165, 233, 0.2)',
+                boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
+              }}>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#0369a1', 
+                  fontWeight: '600', 
+                  marginBottom: '8px',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                }}>
+                  Sources Discovered
                 </div>
-                <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#1976d2' }}>
+                <div style={{ 
+                  fontSize: '36px', 
+                  fontWeight: '700', 
+                  color: '#0284c7',
+                  lineHeight: '1',
+                }}>
                   {results.sources.length}
                 </div>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#64748b', 
+                  marginTop: '6px',
+                }}>
+                  High-quality references
+                </div>
               </div>
 
-              <div style={{
+              <div className="card-hover" style={{
-                backgroundColor: '#f3e5f5',
+                background: 'rgba(255, 255, 255, 0.9)',
-                padding: '16px',
+                padding: '20px',
-                borderRadius: '8px',
+                borderRadius: '14px',
-                border: '1px solid #ce93d8',
+                border: '1px solid rgba(14, 165, 233, 0.2)',
+                boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
               }}>
-                <div style={{ fontSize: '12px', color: '#7b1fa2', fontWeight: '600', marginBottom: '4px' }}>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#0369a1', 
+                  fontWeight: '600', 
+                  marginBottom: '8px',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                }}>
                   Content Angles
                 </div>
-                <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#7b1fa2' }}>
+                <div style={{ 
+                  fontSize: '36px', 
+                  fontWeight: '700', 
+                  color: '#0284c7',
+                  lineHeight: '1',
+                }}>
                   {results.suggested_angles.length}
                 </div>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#64748b', 
+                  marginTop: '6px',
+                }}>
+                  Unique perspectives
+                </div>
               </div>
 
-              <div style={{
+              <div className="card-hover" style={{
-                backgroundColor: '#e8f5e8',
+                background: 'rgba(255, 255, 255, 0.9)',
-                padding: '16px',
+                padding: '20px',
-                borderRadius: '8px',
+                borderRadius: '14px',
-                border: '1px solid #81c784',
+                border: '1px solid rgba(14, 165, 233, 0.2)',
+                boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
               }}>
-                <div style={{ fontSize: '12px', color: '#2e7d32', fontWeight: '600', marginBottom: '4px' }}>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#0369a1', 
+                  fontWeight: '600', 
+                  marginBottom: '8px',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                }}>
                   Search Queries
                 </div>
-                <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#2e7d32' }}>
+                <div style={{ 
+                  fontSize: '36px', 
+                  fontWeight: '700', 
+                  color: '#0284c7',
+                  lineHeight: '1',
+                }}>
                   {results.search_queries?.length || 0}
                 </div>
+                <div style={{ 
+                  fontSize: '11px', 
+                  color: '#64748b', 
+                  marginTop: '6px',
+                }}>
+                  Optimized searches
+                </div>
               </div>
             </div>
           </div>

frontend/src/services/blogWriterApi.ts

@@ -32,6 +32,11 @@ export interface ResearchConfig {
   include_expert_quotes?: boolean;
   include_competitors?: boolean;
   include_trends?: boolean;
+  // Exa-specific options
+  exa_category?: string;
+  exa_include_domains?: string[];
+  exa_exclude_domains?: string[];
+  exa_search_type?: 'auto' | 'keyword' | 'neural';
 }
 
 export interface BlogResearchRequest {