final polish phase 1

- Created ThreeWidgetFooter.tsx component with 3-column layout:
  - Widget 1: Page Progress (current page metrics + progress bar + hint)
  - Widget 2: Module Stats (workflow pipeline with links)
  - Widget 3: Completion (both modules summary)
- Created useThreeWidgetFooter.ts hook for building widget props
- Integrated ThreeWidgetFooter into:
  - Planner: Keywords, Clusters, Ideas pages
  - Writer: Tasks, Content pages
- SiteCard already has SiteSetupChecklist integrated (compact mode)
- Backend serializer returns all required fields

COMPREHENSIVE-AUDIT-REPORT.md

@@ -2,33 +2,7 @@
 
 **Date:** December 27, 2025  
 **Scope:** Complete application audit for optimal user experience  
-**Note:** Plans, billing, credits, usage sections excluded - will be done in separate phase  
-**Status:** ✅ IMPLEMENTED & INTEGRATED
-
----
-
-## Implementation Status
-
-| Section | Status | Files Modified |
-|---------|--------|----------------|
-| 1. Site & Sector Selector | ✅ | Already implemented per guidelines |
-| 2. Tooltip Improvements | ✅ | `config/pages/*.config.tsx` (all 8 page configs updated with actionable tooltips) |
-| 3. Footer 3-Widget Layout | ✅ | `components/dashboard/ThreeWidgetFooter.tsx` |
-| 4. Progress Modal Steps | ✅ | `backend/igny8_core/ai/engine.py` |
-| 5. Dashboard Redesign | ✅ | `components/dashboard/CompactDashboard.tsx` |
-| 6. Site Setup Checklist | ✅ | `components/common/SiteCard.tsx`, `backend/auth/serializers.py`, `services/api.ts` |
-| 7. To-Do-s Audit | ✅ | Documentation only |
-| 8. Notification System | ✅ | `store/notificationStore.ts`, `components/header/NotificationDropdownNew.tsx`, `hooks/useProgressModal.ts` |
-
-### Integration Complete
-
-| Integration | Status | Details |
-|-------------|--------|---------|
-| NotificationDropdown → AppHeader | ✅ | `layout/AppHeader.tsx`, `components/header/Header.tsx` now use `NotificationDropdownNew` |
-| AI Task → Notifications | ✅ | `hooks/useProgressModal.ts` automatically adds notifications on success/failure |
-| Dashboard exports | ✅ | `components/dashboard/index.ts` barrel export created |
-| NeedsAttentionBar → Home | ✅ | `pages/Dashboard/Home.tsx` shows attention items at top |
-| ThreeWidgetFooter hook | ✅ | `hooks/useThreeWidgetFooter.ts` helper for easy integration |
+**Note:** Plans, billing, credits, usage sections excluded - will be done in separate phase
 
 ---
 

backend/igny8_core/api/dashboard_views.py

@@ -1,381 +0,0 @@
-"""
-Dashboard API Views
-Provides aggregated data for the frontend dashboard in a single call.
-Replaces multiple sequential API calls for better performance.
-"""
-from rest_framework import viewsets, status
-from rest_framework.decorators import action
-from rest_framework.response import Response
-from rest_framework.permissions import IsAuthenticated
-from django.db.models import Count, Sum, Q, F
-from django.utils import timezone
-from datetime import timedelta
-from drf_spectacular.utils import extend_schema, extend_schema_view, OpenApiParameter
-
-from igny8_core.auth.models import Site, Sector
-from igny8_core.business.planning.models import Keywords, Clusters, ContentIdeas
-from igny8_core.business.content.models import Tasks, Content
-from igny8_core.business.billing.models import CreditUsageLog
-from igny8_core.ai.models import AITaskLog
-
-
-@extend_schema_view(
-    summary=extend_schema(
-        tags=['Dashboard'],
-        summary='Get dashboard summary',
-        description='Returns aggregated dashboard data including pipeline counts, AI operations, recent activity, and items needing attention.',
-        parameters=[
-            OpenApiParameter(
-                name='site_id',
-                description='Filter by specific site ID',
-                required=False,
-                type=int
-            ),
-            OpenApiParameter(
-                name='days',
-                description='Number of days for recent activity and AI operations (default: 7)',
-                required=False,
-                type=int
-            ),
-        ]
-    ),
-)
-class DashboardSummaryViewSet(viewsets.ViewSet):
-    """Dashboard summary providing aggregated data for the main dashboard."""
-    permission_classes = [IsAuthenticated]
-    
-    @action(detail=False, methods=['get'])
-    def summary(self, request):
-        """
-        Get comprehensive dashboard summary in a single API call.
-        
-        Returns:
-        - needs_attention: Items requiring user action
-        - pipeline: Workflow pipeline counts (keywords → published)
-        - ai_operations: Recent AI usage stats
-        - recent_activity: Latest activity log
-        - content_velocity: Content creation trends
-        - automation: Automation status summary
-        """
-        account = request.user.account
-        site_id = request.query_params.get('site_id')
-        days = int(request.query_params.get('days', 7))
-        start_date = timezone.now() - timedelta(days=days)
-        
-        # Build base filters
-        site_filter = Q(site__account=account)
-        if site_id:
-            site_filter &= Q(site_id=site_id)
-        
-        # ==========================================
-        # 1. PIPELINE COUNTS
-        # ==========================================
-        keywords_count = Keywords.objects.filter(site_filter).count()
-        clusters_count = Clusters.objects.filter(site_filter).count()
-        ideas_count = ContentIdeas.objects.filter(site_filter).count()
-        tasks_count = Tasks.objects.filter(site_filter).count()
-        
-        content_filter = site_filter
-        drafts_count = Content.objects.filter(content_filter, status='draft').count()
-        review_count = Content.objects.filter(content_filter, status='review').count()
-        published_count = Content.objects.filter(content_filter, status='published').count()
-        total_content = drafts_count + review_count + published_count
-        
-        # Calculate completion percentage based on workflow milestones
-        milestones = [
-            keywords_count > 0,
-            clusters_count > 0,
-            ideas_count > 0,
-            tasks_count > 0,
-            total_content > 0,
-            published_count > 0,
-        ]
-        completion_percentage = int((sum(milestones) / len(milestones)) * 100) if milestones else 0
-        
-        pipeline = {
-            'keywords': keywords_count,
-            'clusters': clusters_count,
-            'ideas': ideas_count,
-            'tasks': tasks_count,
-            'drafts': drafts_count,
-            'review': review_count,
-            'published': published_count,
-            'total_content': total_content,
-            'completion_percentage': completion_percentage,
-        }
-        
-        # ==========================================
-        # 2. NEEDS ATTENTION
-        # ==========================================
-        needs_attention = []
-        
-        # Content pending review
-        if review_count > 0:
-            needs_attention.append({
-                'id': 'pending-review',
-                'type': 'pending_review',
-                'title': 'pending review',
-                'count': review_count,
-                'action_label': 'Review',
-                'action_url': '/writer/review',
-                'severity': 'warning',
-            })
-        
-        # Sites without keywords (incomplete setup)
-        sites = Site.objects.filter(account=account, is_active=True)
-        sites_without_keywords = []
-        for site in sites:
-            kw_count = Keywords.objects.filter(site=site).count()
-            if kw_count == 0:
-                sites_without_keywords.append(site)
-        
-        if sites_without_keywords:
-            if len(sites_without_keywords) == 1:
-                needs_attention.append({
-                    'id': 'setup-incomplete',
-                    'type': 'setup_incomplete',
-                    'title': f'{sites_without_keywords[0].name} needs setup',
-                    'action_label': 'Complete',
-                    'action_url': f'/sites/{sites_without_keywords[0].id}',
-                    'severity': 'info',
-                })
-            else:
-                needs_attention.append({
-                    'id': 'setup-incomplete',
-                    'type': 'setup_incomplete',
-                    'title': f'{len(sites_without_keywords)} sites need setup',
-                    'action_label': 'Complete',
-                    'action_url': '/sites',
-                    'severity': 'info',
-                })
-        
-        # Sites without integrations
-        sites_without_integration = sites.filter(has_integration=False).count()
-        if sites_without_integration > 0:
-            needs_attention.append({
-                'id': 'no-integration',
-                'type': 'no_integration',
-                'title': f'{sites_without_integration} site{"s" if sites_without_integration > 1 else ""} without WordPress',
-                'action_label': 'Connect',
-                'action_url': '/integrations',
-                'severity': 'info',
-            })
-        
-        # Low credits warning
-        if account.credits < 100:
-            needs_attention.append({
-                'id': 'credits-low',
-                'type': 'credits_low',
-                'title': f'Credits running low ({account.credits} remaining)',
-                'action_label': 'Upgrade',
-                'action_url': '/billing/plans',
-                'severity': 'warning' if account.credits > 20 else 'error',
-            })
-        
-        # Queued tasks not processed
-        queued_tasks = Tasks.objects.filter(site_filter, status='queued').count()
-        if queued_tasks > 10:
-            needs_attention.append({
-                'id': 'queued-tasks',
-                'type': 'queued_tasks',
-                'title': f'{queued_tasks} tasks waiting to be generated',
-                'action_label': 'Generate',
-                'action_url': '/writer/tasks',
-                'severity': 'info',
-            })
-        
-        # ==========================================
-        # 3. AI OPERATIONS (last N days)
-        # ==========================================
-        ai_usage = CreditUsageLog.objects.filter(
-            account=account,
-            created_at__gte=start_date
-        )
-        
-        # Group by operation type
-        operations_by_type = ai_usage.values('operation_type').annotate(
-            count=Count('id'),
-            credits=Sum('credits_used'),
-            tokens=Sum('tokens_input') + Sum('tokens_output')
-        ).order_by('-count')
-        
-        # Format operation names
-        operation_display = {
-            'clustering': 'Clustering',
-            'idea_generation': 'Ideas',
-            'content_generation': 'Content',
-            'image_generation': 'Images',
-            'image_prompt_extraction': 'Image Prompts',
-            'linking': 'Linking',
-            'optimization': 'Optimization',
-            'reparse': 'Reparse',
-            'site_page_generation': 'Site Pages',
-            'site_structure_generation': 'Site Structure',
-            'ideas': 'Ideas',
-            'content': 'Content',
-            'images': 'Images',
-        }
-        
-        operations = []
-        for op in operations_by_type[:5]:  # Top 5 operations
-            operations.append({
-                'type': op['operation_type'],
-                'label': operation_display.get(op['operation_type'], op['operation_type'].replace('_', ' ').title()),
-                'count': op['count'],
-                'credits': op['credits'] or 0,
-                'tokens': op['tokens'] or 0,
-            })
-        
-        total_credits_used = ai_usage.aggregate(total=Sum('credits_used'))['total'] or 0
-        total_operations = ai_usage.count()
-        
-        ai_operations = {
-            'period_days': days,
-            'operations': operations,
-            'totals': {
-                'credits': total_credits_used,
-                'operations': total_operations,
-            }
-        }
-        
-        # ==========================================
-        # 4. RECENT ACTIVITY
-        # ==========================================
-        recent_logs = AITaskLog.objects.filter(
-            account=account,
-            status='success',
-            created_at__gte=start_date
-        ).order_by('-created_at')[:10]
-        
-        activity_icons = {
-            'run_clustering': 'group',
-            'generate_content_ideas': 'bolt',
-            'generate_content': 'file-text',
-            'generate_images': 'image',
-            'publish_content': 'paper-plane',
-            'optimize_content': 'sparkles',
-            'link_content': 'link',
-        }
-        
-        activity_colors = {
-            'run_clustering': 'purple',
-            'generate_content_ideas': 'orange',
-            'generate_content': 'blue',
-            'generate_images': 'pink',
-            'publish_content': 'green',
-            'optimize_content': 'cyan',
-            'link_content': 'indigo',
-        }
-        
-        recent_activity = []
-        for log in recent_logs:
-            # Parse friendly message from the log
-            message = log.message or f'{log.function_name} completed'
-            
-            recent_activity.append({
-                'id': log.id,
-                'type': log.function_name,
-                'description': message,
-                'timestamp': log.created_at.isoformat(),
-                'icon': activity_icons.get(log.function_name, 'bolt'),
-                'color': activity_colors.get(log.function_name, 'gray'),
-                'credits': float(log.cost) if log.cost else 0,
-            })
-        
-        # ==========================================
-        # 5. CONTENT VELOCITY
-        # ==========================================
-        # Content created in different periods
-        now = timezone.now()
-        content_today = Content.objects.filter(
-            content_filter,
-            created_at__date=now.date()
-        ).count()
-        
-        content_this_week = Content.objects.filter(
-            content_filter,
-            created_at__gte=now - timedelta(days=7)
-        ).count()
-        
-        content_this_month = Content.objects.filter(
-            content_filter,
-            created_at__gte=now - timedelta(days=30)
-        ).count()
-        
-        # Daily breakdown for last 7 days
-        daily_content = []
-        for i in range(7):
-            day = now - timedelta(days=6-i)
-            count = Content.objects.filter(
-                content_filter,
-                created_at__date=day.date()
-            ).count()
-            daily_content.append({
-                'date': day.date().isoformat(),
-                'count': count,
-            })
-        
-        content_velocity = {
-            'today': content_today,
-            'this_week': content_this_week,
-            'this_month': content_this_month,
-            'daily': daily_content,
-            'average_per_day': round(content_this_week / 7, 1) if content_this_week else 0,
-        }
-        
-        # ==========================================
-        # 6. AUTOMATION STATUS
-        # ==========================================
-        # Check automation settings
-        from igny8_core.business.automation.models import AutomationSettings
-        
-        automation_enabled = AutomationSettings.objects.filter(
-            account=account,
-            enabled=True
-        ).exists()
-        
-        active_automations = AutomationSettings.objects.filter(
-            account=account,
-            enabled=True
-        ).count()
-        
-        automation = {
-            'enabled': automation_enabled,
-            'active_count': active_automations,
-            'status': 'active' if automation_enabled else 'inactive',
-        }
-        
-        # ==========================================
-        # 7. SITES SUMMARY
-        # ==========================================
-        sites_data = []
-        for site in sites[:5]:  # Top 5 sites
-            site_keywords = Keywords.objects.filter(site=site).count()
-            site_content = Content.objects.filter(site=site).count()
-            site_published = Content.objects.filter(site=site, status='published').count()
-            
-            sites_data.append({
-                'id': site.id,
-                'name': site.name,
-                'domain': site.url,
-                'keywords': site_keywords,
-                'content': site_content,
-                'published': site_published,
-                'has_integration': site.has_integration,
-                'sectors_count': site.sectors.filter(is_active=True).count(),
-            })
-        
-        return Response({
-            'needs_attention': needs_attention,
-            'pipeline': pipeline,
-            'ai_operations': ai_operations,
-            'recent_activity': recent_activity,
-            'content_velocity': content_velocity,
-            'automation': automation,
-            'sites': sites_data,
-            'account': {
-                'credits': account.credits,
-                'name': account.name,
-            },
-            'generated_at': timezone.now().isoformat(),
-        })

backend/igny8_core/api/urls.py

@@ -8,7 +8,6 @@ from .account_views import (
     TeamManagementViewSet,
     UsageAnalyticsViewSet
 )
-from .dashboard_views import DashboardSummaryViewSet
 
 router = DefaultRouter()
 
@@ -23,8 +22,5 @@ urlpatterns = [
     # Usage analytics
     path('usage/analytics/', UsageAnalyticsViewSet.as_view({'get': 'overview'}), name='usage-analytics'),
     
-    # Dashboard summary (aggregated data for main dashboard)
-    path('dashboard/summary/', DashboardSummaryViewSet.as_view({'get': 'summary'}), name='dashboard-summary'),
-    
     path('', include(router.urls)),
 ]

backend/igny8_core/auth/serializers.py

@@ -173,7 +173,7 @@ class SiteSerializer(serializers.ModelSerializer):
         from igny8_core.business.integration.models import SiteIntegration
         return SiteIntegration.objects.filter(
             site=obj, 
-            integration_type='wordpress',
+            platform='wordpress',
             is_active=True
         ).exists() or bool(obj.wp_url)
 

frontend/src/components/common/PageHeader.tsx

@@ -8,7 +8,7 @@ import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { trackLoading } from './LoadingStateMonitor';
 import { useErrorHandler } from '../../hooks/useErrorHandler';
-import { usePageContext, SelectorVisibility } from '../../context/PageContext';
+import { usePageContext } from '../../context/PageContext';
 
 interface PageHeaderProps {
   title: string;
@@ -23,18 +23,13 @@ interface PageHeaderProps {
     icon: ReactNode;
     color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo' | 'yellow' | 'pink' | 'emerald' | 'cyan' | 'amber' | 'teal';
   };
+  /** Completely hide site/sector selectors in app header */
+  hideSelectors?: boolean;
   hideSiteSector?: boolean;
   navigation?: ReactNode; // Kept for backwards compat but not rendered
   workflowInsights?: any[]; // Kept for backwards compat but not rendered
   /** Right-side actions slot */
   actions?: ReactNode;
-  /** 
-   * Controls site/sector selector visibility in AppHeader per audit Section 1:
-   * - 'both': Show both site and sector selectors (Planner, Writer pages) - DEFAULT
-   * - 'site-only': Show only site selector (Automation page)
-   * - 'none': Hide both selectors (Account, Billing, Thinker pages)
-   */
-  selectorVisibility?: SelectorVisibility;
 }
 
 export default function PageHeader({
@@ -47,9 +42,9 @@ export default function PageHeader({
   onRefresh,
   className = "",
   badge,
+  hideSelectors = false,
   hideSiteSector = false,
   actions,
-  selectorVisibility = 'both',
 }: PageHeaderProps) {
   const { activeSite } = useSiteStore();
   const { loadSectorsForSite } = useSectorStore();
@@ -62,11 +57,11 @@ export default function PageHeader({
   const parentModule = parent || breadcrumb;
 
   // Update page context with title and badge info for AppHeader
-  const pageInfoKey = useMemo(() => `${title}|${parentModule}|${selectorVisibility}`, [title, parentModule, selectorVisibility]);
+  const pageInfoKey = useMemo(() => `${title}|${parentModule}|${hideSiteSector}|${hideSelectors}`, [title, parentModule, hideSiteSector, hideSelectors]);
   useEffect(() => {
-    setPageInfo({ title, parent: parentModule, badge, selectorVisibility });
+    setPageInfo({ title, parent: parentModule, badge, hideSelectors, hideSectorSelector: hideSiteSector });
     return () => setPageInfo(null);
-  }, [pageInfoKey, badge?.color]);
+  }, [pageInfoKey, badge?.color, hideSiteSector, hideSelectors]);
 
   // Load sectors when active site changes
   useEffect(() => {

frontend/src/components/common/SingleSiteSelector.tsx

@@ -0,0 +1,183 @@
+/**
+ * Single Site Selector
+ * Site-only selector without "All Sites" option
+ * For pages that require a specific site selection (Automation, Content Settings)
+ */
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Dropdown } from '../ui/dropdown/Dropdown';
+import { DropdownItem } from '../ui/dropdown/DropdownItem';
+import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
+import { useToast } from '../ui/toast/ToastContainer';
+import { useSiteStore } from '../../store/siteStore';
+import { useAuthStore } from '../../store/authStore';
+import Button from '../ui/button/Button';
+
+export default function SingleSiteSelector() {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
+  const { user, refreshUser, isAuthenticated } = useAuthStore();
+  
+  // Site switcher state
+  const [sitesOpen, setSitesOpen] = useState(false);
+  const [sites, setSites] = useState<Site[]>([]);
+  const [sitesLoading, setSitesLoading] = useState(true);
+  const siteButtonRef = useRef<HTMLButtonElement>(null);
+  const noSitesAvailable = !sitesLoading && sites.length === 0;
+
+  // Load sites
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      refreshUser().catch((error) => {
+        console.debug('SingleSiteSelector: Failed to refresh user (non-critical):', error);
+      });
+    }
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    loadSites();
+    if (!activeSite) {
+      loadActiveSite();
+    }
+  }, [user?.account?.id]);
+
+  const loadSites = async () => {
+    try {
+      setSitesLoading(true);
+      const response = await fetchSites();
+      const activeSites = (response.results || []).filter(site => site.is_active);
+      setSites(activeSites);
+    } catch (error: any) {
+      console.error('Failed to load sites:', error);
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setSitesLoading(false);
+    }
+  };
+
+  const handleSiteSelect = async (siteId: number) => {
+    try {
+      await apiSetActiveSite(siteId);
+      const selectedSite = sites.find(s => s.id === siteId);
+      if (selectedSite) {
+        setActiveSite(selectedSite);
+        toast.success(`Switched to "${selectedSite.name}"`);
+      }
+      setSitesOpen(false);
+    } catch (error: any) {
+      toast.error(`Failed to switch site: ${error.message}`);
+    }
+  };
+
+  // Get display text
+  const getSiteDisplayText = () => {
+    if (sitesLoading) return 'Loading...';
+    return activeSite?.name || 'Select Site';
+  };
+
+  // Check if a site is selected
+  const isSiteSelected = (siteId: number) => {
+    return activeSite?.id === siteId;
+  };
+
+  const handleCreateSite = () => navigate('/sites');
+
+  if (sitesLoading && sites.length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>No active sites yet.</span>
+        <Button size="sm" variant="primary" onClick={handleCreateSite}>
+          Create Site
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative inline-block">
+      <button
+        ref={siteButtonRef}
+        onClick={() => setSitesOpen(!sitesOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+        aria-label="Switch site"
+        disabled={sitesLoading || sites.length === 0}
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4 text-brand-500 dark:text-brand-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+            />
+          </svg>
+          <span className="max-w-[150px] truncate">
+            {getSiteDisplayText()}
+          </span>
+        </span>
+        <svg
+          className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <Dropdown
+        isOpen={sitesOpen}
+        onClose={() => setSitesOpen(false)}
+        anchorRef={siteButtonRef}
+        placement="bottom-left"
+        className="w-64 p-2"
+      >
+        {sites.map((site) => (
+          <DropdownItem
+            key={site.id}
+            onItemClick={() => handleSiteSelect(site.id)}
+            className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+              isSiteSelected(site.id)
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            }`}
+          >
+            <span className="flex-1">{site.name}</span>
+            {isSiteSelected(site.id) && (
+              <svg
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}

frontend/src/components/common/SiteAndSectorSelector.tsx

@@ -1,6 +1,9 @@
 /**
  * Combined Site and Sector Selector Component
  * Displays both site switcher and sector selector side by side with accent colors
+ * 
+ * Dashboard Mode: Shows "All Sites" option, uses callback for filtering
+ * Module Mode: Standard site/sector selection
  */
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -15,10 +18,19 @@ import Button from '../ui/button/Button';
 
 interface SiteAndSectorSelectorProps {
   hideSectorSelector?: boolean;
+  /** Dashboard mode: show "All Sites" option */
+  showAllSitesOption?: boolean;
+  /** Current site filter for dashboard mode ('all' or site id) */
+  siteFilter?: 'all' | number;
+  /** Callback when site filter changes in dashboard mode */
+  onSiteFilterChange?: (value: 'all' | number) => void;
 }
 
 export default function SiteAndSectorSelector({
   hideSectorSelector = false,
+  showAllSitesOption = false,
+  siteFilter,
+  onSiteFilterChange,
 }: SiteAndSectorSelectorProps) {
   const toast = useToast();
   const navigate = useNavigate();
@@ -67,7 +79,22 @@ export default function SiteAndSectorSelector({
     }
   };
 
-  const handleSiteSelect = async (siteId: number) => {
+  const handleSiteSelect = async (siteId: number | 'all') => {
+    // Dashboard mode: use callback
+    if (showAllSitesOption && onSiteFilterChange) {
+      onSiteFilterChange(siteId);
+      setSitesOpen(false);
+      if (siteId !== 'all') {
+        const selectedSite = sites.find(s => s.id === siteId);
+        if (selectedSite) {
+          setActiveSite(selectedSite);
+        }
+      }
+      return;
+    }
+    
+    // Module mode: standard site switching
+    if (siteId === 'all') return; // Should not happen in module mode
     try {
       await apiSetActiveSite(siteId);
       const selectedSite = sites.find(s => s.id === siteId);
@@ -81,6 +108,24 @@ export default function SiteAndSectorSelector({
     }
   };
 
+  // Get display text based on mode
+  const getSiteDisplayText = () => {
+    if (sitesLoading) return 'Loading...';
+    if (showAllSitesOption && siteFilter === 'all') return 'All Sites';
+    if (showAllSitesOption && typeof siteFilter === 'number') {
+      return sites.find(s => s.id === siteFilter)?.name || activeSite?.name || 'Select Site';
+    }
+    return activeSite?.name || 'Select Site';
+  };
+
+  // Check if a site is selected
+  const isSiteSelected = (siteId: number | 'all') => {
+    if (showAllSitesOption) {
+      return siteFilter === siteId;
+    }
+    return siteId !== 'all' && activeSite?.id === siteId;
+  };
+
   const handleSectorSelect = (sectorId: number | null) => {
     if (sectorId === null) {
       setActiveSector(null);
@@ -141,7 +186,7 @@ export default function SiteAndSectorSelector({
               />
             </svg>
             <span className="max-w-[150px] truncate">
-              {sitesLoading ? 'Loading...' : activeSite?.name || 'Select Site'}
+              {getSiteDisplayText()}
             </span>
           </span>
           <svg
@@ -166,18 +211,44 @@ export default function SiteAndSectorSelector({
           placement="bottom-left"
           className="w-64 p-2"
         >
+          {/* All Sites option - only in dashboard mode */}
+          {showAllSitesOption && (
+            <DropdownItem
+              onItemClick={() => handleSiteSelect('all')}
+              className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+                isSiteSelected('all')
+                  ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                  : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+              }`}
+            >
+              <span className="flex-1">All Sites</span>
+              {isSiteSelected('all') && (
+                <svg
+                  className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </DropdownItem>
+          )}
           {sites.map((site) => (
             <DropdownItem
               key={site.id}
               onItemClick={() => handleSiteSelect(site.id)}
               className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
-                activeSite?.id === site.id
+                isSiteSelected(site.id)
                   ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
                   : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
               }`}
             >
               <span className="flex-1">{site.name}</span>
-              {activeSite?.id === site.id && (
+              {isSiteSelected(site.id) && (
                 <svg
                   className="w-4 h-4 text-brand-600 dark:text-brand-400"
                   fill="currentColor"

frontend/src/components/common/SiteWithAllSitesSelector.tsx

@@ -0,0 +1,238 @@
+/**
+ * Site Selector with "All Sites" Option
+ * Site-only selector for dashboard/overview pages
+ * No sector selection - just sites with "All Sites" as first option
+ */
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Dropdown } from '../ui/dropdown/Dropdown';
+import { DropdownItem } from '../ui/dropdown/DropdownItem';
+import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
+import { useToast } from '../ui/toast/ToastContainer';
+import { useSiteStore } from '../../store/siteStore';
+import { useAuthStore } from '../../store/authStore';
+import Button from '../ui/button/Button';
+
+interface SiteWithAllSitesSelectorProps {
+  /** Current site filter ('all' or site id) */
+  siteFilter?: 'all' | number;
+  /** Callback when site filter changes */
+  onSiteFilterChange?: (value: 'all' | number) => void;
+}
+
+export default function SiteWithAllSitesSelector({
+  siteFilter = 'all',
+  onSiteFilterChange,
+}: SiteWithAllSitesSelectorProps) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
+  const { user, refreshUser, isAuthenticated } = useAuthStore();
+  
+  // Site switcher state
+  const [sitesOpen, setSitesOpen] = useState(false);
+  const [sites, setSites] = useState<Site[]>([]);
+  const [sitesLoading, setSitesLoading] = useState(true);
+  const siteButtonRef = useRef<HTMLButtonElement>(null);
+  const noSitesAvailable = !sitesLoading && sites.length === 0;
+
+  // Load sites
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      refreshUser().catch((error) => {
+        console.debug('SiteWithAllSitesSelector: Failed to refresh user (non-critical):', error);
+      });
+    }
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    loadSites();
+    if (!activeSite) {
+      loadActiveSite();
+    }
+  }, [user?.account?.id]);
+
+  const loadSites = async () => {
+    try {
+      setSitesLoading(true);
+      const response = await fetchSites();
+      const activeSites = (response.results || []).filter(site => site.is_active);
+      setSites(activeSites);
+    } catch (error: any) {
+      console.error('Failed to load sites:', error);
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setSitesLoading(false);
+    }
+  };
+
+  const handleSiteSelect = async (siteId: number | 'all') => {
+    if (onSiteFilterChange) {
+      onSiteFilterChange(siteId);
+      setSitesOpen(false);
+      if (siteId !== 'all') {
+        const selectedSite = sites.find(s => s.id === siteId);
+        if (selectedSite) {
+          setActiveSite(selectedSite);
+        }
+      }
+      return;
+    }
+    
+    // Fallback: standard site switching
+    if (siteId === 'all') {
+      setSitesOpen(false);
+      return;
+    }
+    try {
+      await apiSetActiveSite(siteId);
+      const selectedSite = sites.find(s => s.id === siteId);
+      if (selectedSite) {
+        setActiveSite(selectedSite);
+        toast.success(`Switched to "${selectedSite.name}"`);
+      }
+      setSitesOpen(false);
+    } catch (error: any) {
+      toast.error(`Failed to switch site: ${error.message}`);
+    }
+  };
+
+  // Get display text
+  const getSiteDisplayText = () => {
+    if (sitesLoading) return 'Loading...';
+    if (siteFilter === 'all') return 'All Sites';
+    if (typeof siteFilter === 'number') {
+      return sites.find(s => s.id === siteFilter)?.name || activeSite?.name || 'Select Site';
+    }
+    return activeSite?.name || 'All Sites';
+  };
+
+  // Check if a site is selected
+  const isSiteSelected = (siteId: number | 'all') => {
+    return siteFilter === siteId;
+  };
+
+  const handleCreateSite = () => navigate('/sites');
+
+  if (sitesLoading && sites.length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>No active sites yet.</span>
+        <Button size="sm" variant="primary" onClick={handleCreateSite}>
+          Create Site
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative inline-block">
+      <button
+        ref={siteButtonRef}
+        onClick={() => setSitesOpen(!sitesOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+        aria-label="Switch site"
+        disabled={sitesLoading || sites.length === 0}
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4 text-brand-500 dark:text-brand-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+            />
+          </svg>
+          <span className="max-w-[150px] truncate">
+            {getSiteDisplayText()}
+          </span>
+        </span>
+        <svg
+          className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <Dropdown
+        isOpen={sitesOpen}
+        onClose={() => setSitesOpen(false)}
+        anchorRef={siteButtonRef}
+        placement="bottom-left"
+        className="w-64 p-2"
+      >
+        {/* All Sites option */}
+        <DropdownItem
+          onItemClick={() => handleSiteSelect('all')}
+          className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+            isSiteSelected('all')
+              ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+              : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+          }`}
+        >
+          <span className="flex-1">All Sites</span>
+          {isSiteSelected('all') && (
+            <svg
+              className="w-4 h-4 text-brand-600 dark:text-brand-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
+        </DropdownItem>
+        {sites.map((site) => (
+          <DropdownItem
+            key={site.id}
+            onItemClick={() => handleSiteSelect(site.id)}
+            className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+              isSiteSelected(site.id)
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            }`}
+          >
+            <span className="flex-1">{site.name}</span>
+            {isSiteSelected(site.id) && (
+              <svg
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}

frontend/src/components/dashboard/AIOperationsWidget.tsx

@@ -0,0 +1,159 @@
+/**
+ * AIOperationsWidget - Shows AI operation statistics with time filter
+ * Displays operation counts and credits used from CreditUsageLog
+ */
+
+import { useState } from 'react';
+import {
+  GroupIcon,
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+  ChevronDownIcon,
+} from '../../icons';
+
+export interface AIOperation {
+  type: 'clustering' | 'ideas' | 'content' | 'images';
+  count: number;
+  credits: number;
+}
+
+export interface AIOperationsData {
+  period: '7d' | '30d' | '90d';
+  operations: AIOperation[];
+  totals: {
+    count: number;
+    credits: number;
+    successRate: number;
+    avgCreditsPerOp: number;
+  };
+}
+
+interface AIOperationsWidgetProps {
+  data: AIOperationsData;
+  onPeriodChange?: (period: '7d' | '30d' | '90d') => void;
+  loading?: boolean;
+}
+
+const operationConfig = {
+  clustering: { label: 'Clustering', icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' },
+  ideas: { label: 'Ideas', icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400' },
+  content: { label: 'Content', icon: FileTextIcon, color: 'text-green-600 dark:text-green-400' },
+  images: { label: 'Images', icon: FileIcon, color: 'text-pink-600 dark:text-pink-400' },
+};
+
+const periods = [
+  { value: '7d', label: '7 days' },
+  { value: '30d', label: '30 days' },
+  { value: '90d', label: '90 days' },
+] as const;
+
+export default function AIOperationsWidget({ data, onPeriodChange, loading }: AIOperationsWidgetProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const currentPeriod = periods.find(p => p.value === data.period) || periods[0];
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header with Period Filter */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          AI Operations
+        </h3>
+        
+        {/* Period Dropdown */}
+        <div className="relative">
+          <button
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+          >
+            {currentPeriod.label}
+            <ChevronDownIcon className={`w-3 h-3 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
+          </button>
+          
+          {isDropdownOpen && (
+            <div className="absolute right-0 mt-1 w-24 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-10">
+              {periods.map((period) => (
+                <button
+                  key={period.value}
+                  onClick={() => {
+                    onPeriodChange?.(period.value);
+                    setIsDropdownOpen(false);
+                  }}
+                  className={`w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                    data.period === period.value
+                      ? 'text-brand-600 dark:text-brand-400 font-medium'
+                      : 'text-gray-600 dark:text-gray-400'
+                  }`}
+                >
+                  {period.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Operations Table */}
+      <div className="space-y-0">
+        {/* Table Header */}
+        <div className="flex items-center text-sm text-gray-600 dark:text-gray-400 pb-2 border-b border-gray-200 dark:border-gray-700">
+          <span className="flex-1 font-medium">Operation</span>
+          <span className="w-20 text-right font-medium">Count</span>
+          <span className="w-24 text-right font-medium">Credits</span>
+        </div>
+
+        {/* Operation Rows */}
+        {data.operations.map((op) => {
+          const config = operationConfig[op.type];
+          const Icon = config.icon;
+          
+          return (
+            <div
+              key={op.type}
+              className="flex items-center py-2 border-b border-gray-100 dark:border-gray-800"
+            >
+              <div className="flex items-center gap-2.5 flex-1">
+                <Icon className={`w-5 h-5 ${config.color}`} />
+                <span className="text-base text-gray-800 dark:text-gray-200">
+                  {config.label}
+                </span>
+              </div>
+              <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300">
+                {loading ? '—' : op.count.toLocaleString()}
+              </span>
+              <span className="w-24 text-base text-right text-gray-700 dark:text-gray-300">
+                {loading ? '—' : op.credits.toLocaleString()}
+              </span>
+            </div>
+          );
+        })}
+
+        {/* Totals Row */}
+        <div className="flex items-center pt-2 font-semibold">
+          <span className="flex-1 text-base text-gray-800 dark:text-gray-200">Total</span>
+          <span className="w-20 text-base text-right text-gray-900 dark:text-gray-100">
+            {loading ? '—' : data.totals.count.toLocaleString()}
+          </span>
+          <span className="w-24 text-base text-right text-gray-900 dark:text-gray-100">
+            {loading ? '—' : data.totals.credits.toLocaleString()}
+          </span>
+        </div>
+      </div>
+
+      {/* Stats Footer */}
+      <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+        <div className="text-sm text-gray-600 dark:text-gray-400">
+          Success Rate: <span className="font-semibold text-green-600 dark:text-green-400">
+            {loading ? '—' : `${data.totals.successRate}%`}
+          </span>
+        </div>
+        <div className="text-sm text-gray-600 dark:text-gray-400">
+          Avg Credits/Op: <span className="font-semibold text-gray-800 dark:text-gray-200">
+            {loading ? '—' : data.totals.avgCreditsPerOp.toFixed(1)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/AutomationStatusWidget.tsx

@@ -0,0 +1,193 @@
+/**
+ * AutomationStatusWidget - Shows automation run status
+ * Status indicator, schedule, last/next run info, configure/run now buttons
+ */
+
+import { Link } from 'react-router-dom';
+import Button from '../ui/button/Button';
+import {
+  PlayIcon,
+  SettingsIcon,
+  CheckCircleIcon,
+  AlertIcon,
+  ClockIcon,
+} from '../../icons';
+
+export interface AutomationData {
+  status: 'active' | 'paused' | 'failed' | 'not_configured';
+  schedule?: string; // e.g., "Daily 9 AM"
+  lastRun?: {
+    timestamp: Date;
+    clustered?: number;
+    ideas?: number;
+    content?: number;
+    images?: number;
+    success: boolean;
+  };
+  nextRun?: Date;
+  siteId?: number;
+}
+
+interface AutomationStatusWidgetProps {
+  data: AutomationData;
+  onRunNow?: () => void;
+  loading?: boolean;
+}
+
+const statusConfig = {
+  active: {
+    label: 'Active',
+    color: 'text-green-600 dark:text-green-400',
+    bgColor: 'bg-green-500',
+    icon: CheckCircleIcon,
+  },
+  paused: {
+    label: 'Paused',
+    color: 'text-gray-700 dark:text-gray-300',
+    bgColor: 'bg-gray-400',
+    icon: ClockIcon,
+  },
+  failed: {
+    label: 'Failed',
+    color: 'text-red-600 dark:text-red-400',
+    bgColor: 'bg-red-500',
+    icon: AlertIcon,
+  },
+  not_configured: {
+    label: 'Not Configured',
+    color: 'text-gray-600 dark:text-gray-400',
+    bgColor: 'bg-gray-300',
+    icon: SettingsIcon,
+  },
+};
+
+function formatDateTime(date: Date): string {
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  });
+}
+
+export default function AutomationStatusWidget({ data, onRunNow, loading }: AutomationStatusWidgetProps) {
+  const config = statusConfig[data.status];
+  const StatusIcon = config.icon;
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide mb-4">
+        Automation Status
+      </h3>
+
+      {/* Status Row */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2.5">
+          <span className={`w-3 h-3 rounded-full ${config.bgColor} ${data.status === 'active' ? 'animate-pulse' : ''}`}></span>
+          <span className={`text-base font-semibold ${config.color}`}>
+            {config.label}
+          </span>
+        </div>
+        {data.schedule && (
+          <span className="text-sm text-gray-600 dark:text-gray-400">
+            Schedule: {data.schedule}
+          </span>
+        )}
+      </div>
+
+      {/* Last Run Details */}
+      {data.lastRun ? (
+        <div className="mb-4">
+          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
+            <ClockIcon className="w-4 h-4" />
+            <span>Last Run: {formatDateTime(data.lastRun.timestamp)}</span>
+          </div>
+          <div className="pl-6 space-y-1 text-sm text-gray-700 dark:text-gray-300">
+            {data.lastRun.clustered !== undefined && data.lastRun.clustered > 0 && (
+              <div className="flex items-center gap-1">
+                <span className="text-gray-400">├─</span>
+                <span>Clustered: {data.lastRun.clustered} keywords</span>
+              </div>
+            )}
+            {data.lastRun.ideas !== undefined && data.lastRun.ideas > 0 && (
+              <div className="flex items-center gap-1">
+                <span className="text-gray-400">├─</span>
+                <span>Ideas: {data.lastRun.ideas} generated</span>
+              </div>
+            )}
+            {data.lastRun.content !== undefined && data.lastRun.content > 0 && (
+              <div className="flex items-center gap-1">
+                <span className="text-gray-400">├─</span>
+                <span>Content: {data.lastRun.content} articles</span>
+              </div>
+            )}
+            {data.lastRun.images !== undefined && data.lastRun.images > 0 && (
+              <div className="flex items-center gap-1">
+                <span className="text-gray-400">└─</span>
+                <span>Images: {data.lastRun.images} created</span>
+              </div>
+            )}
+            {!data.lastRun.clustered && !data.lastRun.ideas && !data.lastRun.content && !data.lastRun.images && (
+              <div className="flex items-center gap-1 text-gray-500">
+                <span>└─</span>
+                <span>No operations performed</span>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : data.status !== 'not_configured' ? (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          No runs yet
+        </p>
+      ) : null}
+
+      {/* Next Run */}
+      {data.nextRun && data.status === 'active' && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Next Run: {formatDateTime(data.nextRun)}
+        </p>
+      )}
+
+      {/* Not Configured State */}
+      {data.status === 'not_configured' && (
+        <div className="text-center py-4 mb-4">
+          <SettingsIcon className="w-8 h-8 text-gray-300 dark:text-gray-600 mx-auto mb-2" />
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Automation not configured
+          </p>
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            Set up automated content generation
+          </p>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-2 pt-3 border-t border-gray-100 dark:border-gray-800">
+        <Link to="/automation" className="flex-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            startIcon={<SettingsIcon className="w-4 h-4" />}
+          >
+            Configure
+          </Button>
+        </Link>
+        {data.status !== 'not_configured' && (
+          <Button
+            variant="primary"
+            size="sm"
+            className="flex-1"
+            onClick={onRunNow}
+            disabled={loading}
+            startIcon={<PlayIcon className="w-4 h-4" />}
+          >
+            Run Now
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/CompactDashboard.tsx

@@ -1,450 +0,0 @@
-/**
- * CompactDashboard - Information-dense dashboard with multiple dimensions
- * 
- * Layout:
- * ┌─────────────────────────────────────────────────────────────────┐
- * │ NEEDS ATTENTION (collapsible, only if items exist)             │
- * ├─────────────────────────────────────────────────────────────────┤
- * │ WORKFLOW PIPELINE      │ QUICK ACTIONS / WORKFLOW GUIDE        │
- * ├─────────────────────────────────────────────────────────────────┤
- * │ AI OPERATIONS (7d)     │ RECENT ACTIVITY                       │
- * └─────────────────────────────────────────────────────────────────┘
- * 
- * Uses standard components from tokens.css
- */
-
-import React, { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { Card } from '../ui/card';
-import { ProgressBar } from '../ui/progress';
-import Button from '../ui/button/Button';
-import { 
-  ListIcon, 
-  GroupIcon, 
-  BoltIcon, 
-  FileTextIcon, 
-  FileIcon,
-  CheckCircleIcon,
-  ChevronDownIcon,
-  ArrowRightIcon,
-  AlertIcon,
-  ClockIcon,
-  PlusIcon,
-} from '../../icons';
-
-// ============================================================================
-// TYPE DEFINITIONS
-// ============================================================================
-
-export interface AttentionItem {
-  id: string;
-  title: string;
-  description: string;
-  severity: 'warning' | 'error' | 'info';
-  actionLabel: string;
-  actionHref: string;
-}
-
-export interface WorkflowCounts {
-  sites: number;
-  keywords: number;
-  clusters: number;
-  ideas: number;
-  tasks: number;
-  drafts: number;
-  published: number;
-}
-
-export interface AIOperation {
-  operation: string;
-  count: number;
-  credits: number;
-}
-
-export interface RecentActivityItem {
-  id: string;
-  description: string;
-  timestamp: string;
-  icon?: React.ReactNode;
-}
-
-export interface CompactDashboardProps {
-  attentionItems?: AttentionItem[];
-  workflowCounts: WorkflowCounts;
-  aiOperations: AIOperation[];
-  recentActivity: RecentActivityItem[];
-  creditsUsed?: number;
-  totalOperations?: number;
-  timeFilter?: '7d' | '30d' | '90d';
-  onTimeFilterChange?: (filter: '7d' | '30d' | '90d') => void;
-  onQuickAction?: (action: string) => void;
-}
-
-// ============================================================================
-// NEEDS ATTENTION WIDGET
-// ============================================================================
-
-const NeedsAttentionWidget: React.FC<{ items: AttentionItem[] }> = ({ items }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-  
-  if (items.length === 0) return null;
-  
-  const severityColors = {
-    error: 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800',
-    warning: 'bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800',
-    info: 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800',
-  };
-  
-  const iconColors = {
-    error: 'text-red-500',
-    warning: 'text-amber-500',
-    info: 'text-blue-500',
-  };
-  
-  return (
-    <div className="mb-6">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center gap-2 mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300"
-      >
-        <ChevronDownIcon className={`w-4 h-4 transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
-        <AlertIcon className="w-4 h-4 text-amber-500" />
-        Needs Attention ({items.length})
-      </button>
-      
-      {isExpanded && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-          {items.map((item) => (
-            <div
-              key={item.id}
-              className={`p-3 rounded-lg border ${severityColors[item.severity]}`}
-            >
-              <div className="flex items-start gap-2">
-                <AlertIcon className={`w-4 h-4 mt-0.5 ${iconColors[item.severity]}`} />
-                <div className="flex-1 min-w-0">
-                  <h4 className="text-sm font-medium text-gray-800 dark:text-white truncate">
-                    {item.title}
-                  </h4>
-                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
-                    {item.description}
-                  </p>
-                  <Link
-                    to={item.actionHref}
-                    className="inline-block mt-2 text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400"
-                  >
-                    {item.actionLabel} →
-                  </Link>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-// ============================================================================
-// WORKFLOW PIPELINE WIDGET
-// ============================================================================
-
-const WorkflowPipelineWidget: React.FC<{ counts: WorkflowCounts }> = ({ counts }) => {
-  const pipelineSteps = [
-    { label: 'Sites', value: counts.sites, icon: <GroupIcon className="w-4 h-4" />, href: '/sites' },
-    { label: 'Keywords', value: counts.keywords, icon: <ListIcon className="w-4 h-4" />, href: '/planner/keywords' },
-    { label: 'Clusters', value: counts.clusters, icon: <GroupIcon className="w-4 h-4" />, href: '/planner/clusters' },
-    { label: 'Ideas', value: counts.ideas, icon: <BoltIcon className="w-4 h-4" />, href: '/planner/ideas' },
-    { label: 'Tasks', value: counts.tasks, icon: <FileTextIcon className="w-4 h-4" />, href: '/writer/tasks' },
-    { label: 'Drafts', value: counts.drafts, icon: <FileIcon className="w-4 h-4" />, href: '/writer/content' },
-    { label: 'Published', value: counts.published, icon: <CheckCircleIcon className="w-4 h-4" />, href: '/writer/published' },
-  ];
-  
-  // Calculate overall completion (from keywords to published)
-  const totalPossible = Math.max(counts.keywords, 1);
-  const completionRate = Math.round((counts.published / totalPossible) * 100);
-  
-  return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
-        Workflow Pipeline
-      </h4>
-      
-      {/* Pipeline Flow */}
-      <div className="flex items-center justify-between mb-4 overflow-x-auto">
-        {pipelineSteps.map((step, idx) => (
-          <React.Fragment key={step.label}>
-            <Link
-              to={step.href}
-              className="flex flex-col items-center group min-w-[60px]"
-            >
-              <div className="text-gray-400 dark:text-gray-500 group-hover:text-brand-500 transition-colors">
-                {step.icon}
-              </div>
-              <span className="text-lg font-semibold text-gray-800 dark:text-white mt-1">
-                {step.value.toLocaleString()}
-              </span>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {step.label}
-              </span>
-            </Link>
-            {idx < pipelineSteps.length - 1 && (
-              <ArrowRightIcon className="w-4 h-4 text-gray-300 dark:text-gray-600 flex-shrink-0" />
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-      
-      {/* Progress Bar */}
-      <ProgressBar
-        value={completionRate}
-        color="success"
-        size="md"
-        showLabel={true}
-        label={`${completionRate}% Pipeline Completion`}
-      />
-    </Card>
-  );
-};
-
-// ============================================================================
-// QUICK ACTIONS WIDGET
-// ============================================================================
-
-const QuickActionsWidget: React.FC<{ onAction?: (action: string) => void }> = ({ onAction }) => {
-  const navigate = useNavigate();
-  
-  const quickActions = [
-    { label: 'Keywords', icon: <PlusIcon className="w-4 h-4" />, action: 'add_keywords', href: '/planner/keywords' },
-    { label: 'Cluster', icon: <BoltIcon className="w-4 h-4" />, action: 'cluster', href: '/planner/clusters' },
-    { label: 'Content', icon: <FileTextIcon className="w-4 h-4" />, action: 'content', href: '/writer/tasks' },
-    { label: 'Images', icon: <FileIcon className="w-4 h-4" />, action: 'images', href: '/writer/images' },
-    { label: 'Review', icon: <CheckCircleIcon className="w-4 h-4" />, action: 'review', href: '/writer/review' },
-  ];
-  
-  const workflowSteps = [
-    '1. Add Keywords',
-    '2. Auto Cluster',
-    '3. Generate Ideas',
-    '4. Create Tasks',
-    '5. Generate Content',
-    '6. Generate Images',
-    '7. Review & Approve',
-    '8. Publish to WP',
-  ];
-  
-  return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
-        Quick Actions
-      </h4>
-      
-      {/* Action Buttons */}
-      <div className="flex flex-wrap gap-2 mb-4">
-        {quickActions.map((action) => (
-          <button
-            key={action.action}
-            onClick={() => {
-              onAction?.(action.action);
-              navigate(action.href);
-            }}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-brand-50 hover:text-brand-600 dark:hover:bg-brand-500/10 dark:hover:text-brand-400 rounded-lg transition-colors"
-          >
-            {action.icon}
-            {action.label}
-          </button>
-        ))}
-      </div>
-      
-      {/* Workflow Guide */}
-      <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
-        <h5 className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">
-          Workflow Guide
-        </h5>
-        <div className="grid grid-cols-2 gap-1">
-          {workflowSteps.map((step, idx) => (
-            <span
-              key={idx}
-              className="text-xs text-gray-500 dark:text-gray-400"
-            >
-              {step}
-            </span>
-          ))}
-        </div>
-        <Link
-          to="/help/workflow"
-          className="inline-block mt-2 text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400"
-        >
-          Full Help →
-        </Link>
-      </div>
-    </Card>
-  );
-};
-
-// ============================================================================
-// AI OPERATIONS WIDGET
-// ============================================================================
-
-type TimeFilter = '7d' | '30d' | '90d';
-
-const AIOperationsWidget: React.FC<{
-  operations: AIOperation[];
-  creditsUsed?: number;
-  totalOperations?: number;
-  timeFilter?: TimeFilter;
-  onTimeFilterChange?: (filter: TimeFilter) => void;
-}> = ({ operations, creditsUsed = 0, totalOperations = 0, timeFilter = '30d', onTimeFilterChange }) => {
-  const [activeFilter, setActiveFilter] = useState<TimeFilter>(timeFilter);
-  
-  const filterButtons: TimeFilter[] = ['7d', '30d', '90d'];
-  
-  const handleFilterChange = (filter: TimeFilter) => {
-    setActiveFilter(filter);
-    onTimeFilterChange?.(filter);
-  };
-  
-  return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <div className="flex items-center justify-between mb-3">
-        <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-          AI Operations
-        </h4>
-        <div className="flex gap-1">
-          {filterButtons.map((filter) => (
-            <button
-              key={filter}
-              onClick={() => handleFilterChange(filter)}
-              className={`px-2 py-0.5 text-xs rounded transition-colors ${
-                activeFilter === filter
-                  ? 'bg-brand-500 text-white'
-                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
-              }`}
-            >
-              {filter}
-            </button>
-          ))}
-        </div>
-      </div>
-      
-      {/* Operations Table */}
-      <div className="space-y-2 mb-3">
-        <div className="grid grid-cols-3 text-xs text-gray-500 dark:text-gray-400 pb-1 border-b border-gray-200 dark:border-gray-700">
-          <span>Operation</span>
-          <span className="text-right">Count</span>
-          <span className="text-right">Credits</span>
-        </div>
-        {operations.map((op, idx) => (
-          <div key={idx} className="grid grid-cols-3 text-sm">
-            <span className="text-gray-700 dark:text-gray-300">{op.operation}</span>
-            <span className="text-right text-gray-600 dark:text-gray-400">{op.count.toLocaleString()}</span>
-            <span className="text-right text-gray-600 dark:text-gray-400">{op.credits.toLocaleString()}</span>
-          </div>
-        ))}
-      </div>
-      
-      {/* Summary Footer */}
-      <div className="flex items-center justify-between pt-2 border-t border-gray-200 dark:border-gray-700 text-xs">
-        <span className="text-gray-500 dark:text-gray-400">
-          Credits: {creditsUsed.toLocaleString()}
-        </span>
-        <span className="text-gray-500 dark:text-gray-400">
-          Operations: {totalOperations.toLocaleString()}
-        </span>
-      </div>
-    </Card>
-  );
-};
-
-// ============================================================================
-// RECENT ACTIVITY WIDGET
-// ============================================================================
-
-const RecentActivityWidget: React.FC<{ activities: RecentActivityItem[] }> = ({ activities }) => {
-  return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-        Recent Activity
-      </h4>
-      
-      <div className="space-y-3">
-        {activities.length === 0 ? (
-          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
-            No recent activity
-          </p>
-        ) : (
-          activities.slice(0, 5).map((activity) => (
-            <div key={activity.id} className="flex items-start gap-2">
-              <div className="text-gray-400 dark:text-gray-500 mt-0.5">
-                {activity.icon || <ClockIcon className="w-4 h-4" />}
-              </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm text-gray-700 dark:text-gray-300">
-                  {activity.description}
-                </p>
-                <span className="text-xs text-gray-500 dark:text-gray-400">
-                  {activity.timestamp}
-                </span>
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-      
-      {activities.length > 5 && (
-        <Link
-          to="/activity"
-          className="block mt-3 pt-2 border-t border-gray-200 dark:border-gray-700 text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 text-center"
-        >
-          View All Activity →
-        </Link>
-      )}
-    </Card>
-  );
-};
-
-// ============================================================================
-// MAIN COMPONENT
-// ============================================================================
-
-export default function CompactDashboard({
-  attentionItems = [],
-  workflowCounts,
-  aiOperations,
-  recentActivity,
-  creditsUsed = 0,
-  totalOperations = 0,
-  timeFilter = '30d',
-  onTimeFilterChange,
-  onQuickAction,
-}: CompactDashboardProps) {
-  return (
-    <div className="space-y-6">
-      {/* Needs Attention Section */}
-      <NeedsAttentionWidget items={attentionItems} />
-      
-      {/* Main Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Workflow Pipeline */}
-        <WorkflowPipelineWidget counts={workflowCounts} />
-        
-        {/* Quick Actions */}
-        <QuickActionsWidget onAction={onQuickAction} />
-      </div>
-      
-      {/* Bottom Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* AI Operations */}
-        <AIOperationsWidget
-          operations={aiOperations}
-          creditsUsed={creditsUsed}
-          totalOperations={totalOperations}
-          timeFilter={timeFilter}
-          onTimeFilterChange={onTimeFilterChange}
-        />
-        
-        {/* Recent Activity */}
-        <RecentActivityWidget activities={recentActivity} />
-      </div>
-    </div>
-  );
-}

frontend/src/components/dashboard/ContentVelocityWidget.tsx

@@ -0,0 +1,115 @@
+/**
+ * ContentVelocityWidget - Shows content production rates
+ * This Week / This Month / Total stats for articles, words, images
+ */
+
+import { Link } from 'react-router-dom';
+import { TrendingUpIcon, TrendingDownIcon } from '../../icons';
+
+export interface ContentVelocityData {
+  thisWeek: { articles: number; words: number; images: number };
+  thisMonth: { articles: number; words: number; images: number };
+  total: { articles: number; words: number; images: number };
+  trend: number; // percentage vs previous period (positive = up, negative = down)
+}
+
+interface ContentVelocityWidgetProps {
+  data: ContentVelocityData;
+  loading?: boolean;
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1000000) {
+    return `${(num / 1000000).toFixed(1)}M`;
+  }
+  if (num >= 1000) {
+    return `${(num / 1000).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+}
+
+export default function ContentVelocityWidget({ data, loading }: ContentVelocityWidgetProps) {
+  const isPositiveTrend = data.trend >= 0;
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide mb-4">
+        Content Velocity
+      </h3>
+
+      {/* Stats Table */}
+      <div className="space-y-0">
+        {/* Table Header */}
+        <div className="flex items-center text-sm text-gray-600 dark:text-gray-400 pb-2 border-b border-gray-200 dark:border-gray-700">
+          <span className="flex-1"></span>
+          <span className="w-20 text-right font-medium">Week</span>
+          <span className="w-20 text-right font-medium">Month</span>
+          <span className="w-20 text-right font-medium">Total</span>
+        </div>
+
+        {/* Articles Row */}
+        <div className="flex items-center py-2.5 border-b border-gray-100 dark:border-gray-800">
+          <span className="flex-1 text-base text-gray-800 dark:text-gray-200">Articles</span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300 font-medium">
+            {loading ? '—' : data.thisWeek.articles}
+          </span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300">
+            {loading ? '—' : data.thisMonth.articles}
+          </span>
+          <span className="w-20 text-base text-right text-gray-900 dark:text-gray-100 font-semibold">
+            {loading ? '—' : data.total.articles.toLocaleString()}
+          </span>
+        </div>
+
+        {/* Words Row */}
+        <div className="flex items-center py-2.5 border-b border-gray-100 dark:border-gray-800">
+          <span className="flex-1 text-base text-gray-800 dark:text-gray-200">Words</span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300 font-medium">
+            {loading ? '—' : formatNumber(data.thisWeek.words)}
+          </span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300">
+            {loading ? '—' : formatNumber(data.thisMonth.words)}
+          </span>
+          <span className="w-20 text-base text-right text-gray-900 dark:text-gray-100 font-semibold">
+            {loading ? '—' : formatNumber(data.total.words)}
+          </span>
+        </div>
+
+        {/* Images Row */}
+        <div className="flex items-center py-2.5">
+          <span className="flex-1 text-base text-gray-800 dark:text-gray-200">Images</span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300 font-medium">
+            {loading ? '—' : data.thisWeek.images}
+          </span>
+          <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300">
+            {loading ? '—' : data.thisMonth.images}
+          </span>
+          <span className="w-20 text-base text-right text-gray-900 dark:text-gray-100 font-semibold">
+            {loading ? '—' : data.total.images.toLocaleString()}
+          </span>
+        </div>
+      </div>
+
+      {/* Trend Footer */}
+      <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex items-center gap-2">
+          {isPositiveTrend ? (
+            <TrendingUpIcon className="w-5 h-5 text-green-600" />
+          ) : (
+            <TrendingDownIcon className="w-5 h-5 text-red-600" />
+          )}
+          <span className={`text-sm font-semibold ${isPositiveTrend ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+            {isPositiveTrend ? '+' : ''}{data.trend}% vs last week
+          </span>
+        </div>
+        <Link
+          to="/analytics"
+          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+        >
+          View Analytics →
+        </Link>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/CreditAvailabilityWidget.tsx

@@ -0,0 +1,147 @@
+/**
+ * CreditAvailabilityWidget - Shows available operations based on credit balance
+ * Calculates how many operations can be performed with remaining credits
+ */
+
+import { Link } from 'react-router-dom';
+import {
+  GroupIcon,
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+  DollarLineIcon,
+} from '../../icons';
+
+interface CreditAvailabilityWidgetProps {
+  availableCredits: number;
+  totalCredits: number;
+  loading?: boolean;
+}
+
+// Average credit costs per operation
+const OPERATION_COSTS = {
+  clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' },
+  ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400' },
+  content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-green-600 dark:text-green-400' },
+  images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-pink-600 dark:text-pink-400' },
+};
+
+export default function CreditAvailabilityWidget({ 
+  availableCredits, 
+  totalCredits,
+  loading = false 
+}: CreditAvailabilityWidgetProps) {
+  const usedCredits = totalCredits - availableCredits;
+  const usagePercent = totalCredits > 0 ? Math.round((usedCredits / totalCredits) * 100) : 0;
+  
+  // Calculate available operations
+  const availableOps = Object.entries(OPERATION_COSTS).map(([key, config]) => ({
+    type: key,
+    label: config.label,
+    icon: config.icon,
+    color: config.color,
+    cost: config.cost,
+    available: Math.floor(availableCredits / config.cost),
+  }));
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          Credit Availability
+        </h3>
+        <Link 
+          to="/billing/credits"
+          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400"
+        >
+          Add Credits →
+        </Link>
+      </div>
+
+      {/* Credits Balance */}
+      <div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-4 mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm text-gray-600 dark:text-gray-400">Available Credits</span>
+          <span className="text-2xl font-bold text-brand-600 dark:text-brand-400">
+            {loading ? '—' : availableCredits.toLocaleString()}
+          </span>
+        </div>
+        <div className="w-full bg-white dark:bg-gray-800 rounded-full h-2 mb-1">
+          <div 
+            className={`h-2 rounded-full transition-all ${
+              usagePercent > 90 ? 'bg-red-500' : usagePercent > 75 ? 'bg-amber-500' : 'bg-green-500'
+            }`}
+            style={{ width: `${Math.max(100 - usagePercent, 0)}%` }}
+          ></div>
+        </div>
+        <p className="text-xs text-gray-600 dark:text-gray-400">
+          {totalCredits > 0 ? `${usedCredits.toLocaleString()} of ${totalCredits.toLocaleString()} used (${usagePercent}%)` : 'No credits allocated'}
+        </p>
+      </div>
+
+      {/* Available Operations */}
+      <div className="space-y-2.5">
+        <p className="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-2">
+          You can run:
+        </p>
+        {loading ? (
+          <div className="py-4 text-center">
+            <p className="text-sm text-gray-500">Loading...</p>
+          </div>
+        ) : availableCredits === 0 ? (
+          <div className="py-4 text-center">
+            <p className="text-sm text-gray-600 dark:text-gray-400">No credits available</p>
+            <Link 
+              to="/billing/credits"
+              className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400"
+            >
+              Purchase credits to continue
+            </Link>
+          </div>
+        ) : (
+          availableOps.map((op) => {
+            const Icon = op.icon;
+            return (
+              <div
+                key={op.type}
+                className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+              >
+                <div className={`flex-shrink-0 ${op.color}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                    {op.label}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400">
+                    {op.cost} credits each
+                  </p>
+                </div>
+                <span className={`text-lg font-bold ${
+                  op.available > 10 ? 'text-green-600 dark:text-green-400' :
+                  op.available > 0 ? 'text-amber-600 dark:text-amber-400' :
+                  'text-gray-400 dark:text-gray-600'
+                }`}>
+                  {op.available === 0 ? '—' : op.available > 999 ? '999+' : op.available}
+                </span>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Warning if low */}
+      {!loading && availableCredits > 0 && availableCredits < 100 && (
+        <div className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex items-start gap-2 text-amber-600 dark:text-amber-400">
+            <DollarLineIcon className="w-4 h-4 mt-0.5" />
+            <p className="text-xs">
+              You're running low on credits. Consider purchasing more to avoid interruptions.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/ModuleMetricsFooter.tsx

@@ -1,25 +1,13 @@
 /**
  * ModuleMetricsFooter - Compact metrics footer for table pages
  * Shows module-specific metrics at the bottom of table pages
- * 
- * Supports two layouts:
- * 1. Default: Grid of MetricCards + optional single progress bar
- * 2. ThreeWidget: 3-column layout (Page Progress | Module Stats | Completion)
- *    - Matches Section 3 of COMPREHENSIVE-AUDIT-REPORT.md exactly
- * 
- * STYLING: Uses CSS tokens from styles/tokens.css:
- * - --color-primary: Brand blue for primary actions/bars
- * - --color-success: Green for success states
- * - --color-warning: Amber for warnings
- * - --color-purple: Purple accent
+ * Uses standard EnhancedMetricCard and ProgressBar components
+ * Follows standard app design system and color scheme
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
 import EnhancedMetricCard, { MetricCardProps } from './EnhancedMetricCard';
 import { ProgressBar } from '../ui/progress';
-import { Card } from '../ui/card/Card';
-import { LightBulbIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
 
 export interface MetricItem {
   title: string;
@@ -37,108 +25,30 @@ export interface ProgressMetric {
   color?: 'primary' | 'success' | 'warning' | 'purple';
 }
 
-// ============================================================================
-// THREE-WIDGET LAYOUT TYPES (Section 3 of Audit Report)
-// ============================================================================
-
-/** Submodule color type - matches headerMetrics accentColor */
-export type SubmoduleColor = 'blue' | 'green' | 'amber' | 'purple';
-
-/** Widget 1: Page Progress - metrics in 2x2 grid + progress bar + hint */
-export interface PageProgressWidget {
-  title: string;
-  metrics: Array<{ label: string; value: string | number; percentage?: string }>;
-  progress: { value: number; label: string; color?: SubmoduleColor };
-  hint?: string;
-  /** The submodule's accent color - progress bar uses this */
-  submoduleColor?: SubmoduleColor;
-}
-
-/** Widget 2: Module Stats - Pipeline flow with arrows and progress bars */
-export interface ModulePipelineRow {
-  fromLabel: string;
-  fromValue: number;
-  fromHref?: string;
-  actionLabel: string;
-  toLabel: string;
-  toValue: number;
-  toHref?: string;
-  progress: number; // 0-100
-  /** Color for this pipeline row's progress bar */
-  color?: SubmoduleColor;
-}
-
-export interface ModuleStatsWidget {
-  title: string;
-  pipeline: ModulePipelineRow[];
-  links: Array<{ label: string; href: string }>;
-}
-
-/** Widget 3: Completion - Tree structure with bars for both modules */
-export interface CompletionItem {
-  label: string;
-  value: number;
-  color?: SubmoduleColor;
-}
-
-export interface CompletionWidget {
-  title: string;
-  plannerItems: CompletionItem[];
-  writerItems: CompletionItem[];
-  creditsUsed?: number;
-  operationsCount?: number;
-  analyticsHref?: string;
-}
-
-// ============================================================================
-// COMPONENT PROPS
-// ============================================================================
-
 interface ModuleMetricsFooterProps {
-  metrics?: MetricItem[];
+  metrics: MetricItem[];
   progress?: ProgressMetric;
   className?: string;
-  /** Submodule accent color - used for progress bars when in threeWidgetLayout */
-  submoduleColor?: SubmoduleColor;
-  threeWidgetLayout?: {
-    pageProgress: PageProgressWidget;
-    moduleStats: ModuleStatsWidget;
-    completion: CompletionWidget;
-  };
 }
 
 export default function ModuleMetricsFooter({ 
-  metrics = [], 
+  metrics, 
   progress,
-  className = '',
-  submoduleColor = 'blue',
-  threeWidgetLayout,
+  className = '' 
 }: ModuleMetricsFooterProps) {
-  
-  // Three-widget layout: 
-  // First 2 widgets = 50% (25% each), Last widget = 50% with 2 columns inside
-  if (threeWidgetLayout) {
-    return (
-      <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 ${className}`}>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          {/* Left side: 2 widgets side by side (each 50% of 50% = 25% total) */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <PageProgressCard widget={threeWidgetLayout.pageProgress} submoduleColor={submoduleColor} />
-            <ModuleStatsCard widget={threeWidgetLayout.moduleStats} />
-          </div>
-          {/* Right side: Completion widget (50% of total, 2 columns inside) */}
-          <CompletionCard widget={threeWidgetLayout.completion} />
-        </div>
-      </div>
-    );
-  }
-  
-  // Original layout (default)
   if (metrics.length === 0 && !progress) return null;
 
+  const progressColors = {
+    primary: 'bg-[var(--color-primary)]',
+    success: 'bg-[var(--color-success)]',
+    warning: 'bg-[var(--color-warning)]',
+    purple: 'bg-[var(--color-purple)]',
+  };
+
   return (
     <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 ${className}`}>
       <div className="space-y-4">
+        {/* Metrics Grid */}
         {metrics.length > 0 && (
           <div className={`grid grid-cols-1 sm:grid-cols-2 ${metrics.length > 2 ? 'lg:grid-cols-3' : 'lg:grid-cols-2'} ${metrics.length > 3 ? 'xl:grid-cols-4' : ''} gap-4`}>
             {metrics.map((metric, index) => (
@@ -155,6 +65,8 @@ export default function ModuleMetricsFooter({
             ))}
           </div>
         )}
+
+        {/* Progress Bar */}
         {progress && (
           <div className="space-y-2">
             <ProgressBar
@@ -171,319 +83,3 @@ export default function ModuleMetricsFooter({
   );
 }
 
-// ============================================================================
-// COLOR UTILITIES - Maps SubmoduleColor to CSS token classes
-// Uses CSS variables from styles/tokens.css
-// ============================================================================
-
-const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSProperties => {
-  const colorMap: Record<SubmoduleColor, string> = {
-    blue: 'var(--color-primary)',
-    green: 'var(--color-success)',
-    amber: 'var(--color-warning)',
-    purple: 'var(--color-purple)',
-  };
-  return { backgroundColor: colorMap[color] };
-};
-
-const getLinkColorClass = (color: SubmoduleColor = 'blue'): string => {
-  // Using CSS variable approach for brand consistency
-  return 'text-[color:var(--color-primary)] hover:text-[color:var(--color-primary-dark)]';
-};
-
-// ============================================================================
-// WIDGET 1: PAGE PROGRESS
-// Design from audit:
-// ┌──────────────────────────────────────────────────┐
-// │ PAGE PROGRESS                                    │
-// │                                                  │
-// │ Clusters    12      With Ideas    8   (67%)      │
-// │ Keywords    46      Ready         4              │
-// │                                                  │
-// │ ██████████████░░░░░░░ 67% Have Ideas             │
-// │                                                  │
-// │ 💡 4 clusters ready for idea generation          │
-// └──────────────────────────────────────────────────┘
-// ============================================================================
-
-function PageProgressCard({ widget, submoduleColor = 'blue' }: { widget: PageProgressWidget; submoduleColor?: SubmoduleColor }) {
-  const progressColor = widget.submoduleColor || widget.progress.color || submoduleColor;
-  
-  return (
-    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
-      {/* Header */}
-      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
-        {widget.title}
-      </h3>
-      
-      {/* 2x2 Metrics Grid */}
-      <div className="grid grid-cols-2 gap-x-6 gap-y-3 mb-5">
-        {widget.metrics.slice(0, 4).map((metric, idx) => (
-          <div key={idx} className="flex items-baseline justify-between">
-            <span className="text-sm text-[color:var(--color-text-dim)] dark:text-gray-400">{metric.label}</span>
-            <div className="flex items-baseline gap-1.5">
-              <span className="text-lg font-bold text-[color:var(--color-text)] dark:text-white tabular-nums">
-                {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
-              </span>
-              {metric.percentage && (
-                <span className="text-xs text-[color:var(--color-text-dim)] dark:text-gray-400">({metric.percentage})</span>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-      
-      {/* Progress Bar - uses submodule color */}
-      <div className="mb-4">
-        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-          <div 
-            className="h-full rounded-full transition-all duration-500"
-            style={{ 
-              ...getProgressBarStyle(progressColor),
-              width: `${Math.min(100, Math.max(0, widget.progress.value))}%` 
-            }}
-          />
-        </div>
-        <div className="flex justify-between items-center mt-2">
-          <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{widget.progress.label}</span>
-          <span className="text-sm font-bold text-[color:var(--color-text)] dark:text-white">{widget.progress.value}%</span>
-        </div>
-      </div>
-      
-      {/* Hint with icon (no emoji) */}
-      {widget.hint && (
-        <div className="flex items-start gap-2 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
-          <LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-warning)' }} />
-          <span className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>{widget.hint}</span>
-        </div>
-      )}
-    </Card>
-  );
-}
-
-// ============================================================================
-// WIDGET 2: MODULE STATS
-// Design from audit:
-// ┌──────────────────────────────────────────────────┐
-// │ PLANNER MODULE                                   │
-// │                                                  │
-// │ Keywords 46  ►  Clusters 12                      │
-// │ ████████████████████░░░ 91%                      │
-// │                                                  │
-// │ [→ Keywords] [→ Clusters] [→ Ideas]              │
-// └──────────────────────────────────────────────────┘
-// ============================================================================
-
-function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
-  return (
-    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
-      {/* Header */}
-      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
-        {widget.title}
-      </h3>
-      
-      {/* Pipeline Rows */}
-      <div className="space-y-4 mb-4">
-        {widget.pipeline.map((row, idx) => (
-          <div key={idx}>
-            {/* Row header: FromLabel Value ► ToLabel Value */}
-            <div className="flex items-center justify-between mb-2">
-              {/* From side */}
-              <div className="flex items-center gap-2">
-                {row.fromHref ? (
-                  <Link 
-                    to={row.fromHref} 
-                    className="text-sm font-medium hover:underline"
-                    style={{ color: 'var(--color-primary)' }}
-                  >
-                    {row.fromLabel}
-                  </Link>
-                ) : (
-                  <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.fromLabel}</span>
-                )}
-                <span className="text-lg font-bold tabular-nums" style={{ color: 'var(--color-primary)' }}>
-                  {row.fromValue}
-                </span>
-              </div>
-              
-              {/* Arrow icon - clean chevron, just the tip */}
-              <ChevronRightIcon 
-                className="w-6 h-6 flex-shrink-0 mx-2" 
-                style={{ color: 'var(--color-primary)' }}
-              />
-              
-              {/* To side */}
-              <div className="flex items-center gap-2">
-                {row.toHref ? (
-                  <Link 
-                    to={row.toHref} 
-                    className="text-sm font-medium hover:underline"
-                    style={{ color: 'var(--color-primary)' }}
-                  >
-                    {row.toLabel}
-                  </Link>
-                ) : (
-                  <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.toLabel}</span>
-                )}
-                <span className="text-lg font-bold text-[color:var(--color-text)] dark:text-white tabular-nums">
-                  {row.toValue}
-                </span>
-              </div>
-            </div>
-            
-            {/* Progress bar - uses row color or default primary */}
-            <div className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-              <div 
-                className="h-full rounded-full transition-all duration-500"
-                style={{ 
-                  ...getProgressBarStyle(row.color || 'blue'),
-                  width: `${Math.min(100, Math.max(0, row.progress))}%` 
-                }}
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-      
-      {/* Navigation Links */}
-      <div className="flex flex-wrap gap-3 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
-        {widget.links.map((link, idx) => (
-          <Link
-            key={idx}
-            to={link.href}
-            className="text-sm font-medium hover:underline flex items-center gap-1"
-            style={{ color: 'var(--color-primary)' }}
-          >
-            <ChevronRightIcon className="w-4 h-4" />
-            <span>{link.label}</span>
-          </Link>
-        ))}
-      </div>
-    </Card>
-  );
-}
-
-// ============================================================================
-// WIDGET 3: COMPLETION
-// Design from audit - with 2 COLUMNS (Planner | Writer) side by side:
-// ┌──────────────────────────────────────────────────────────────────┐
-// │ WORKFLOW COMPLETION                                              │
-// │                                                                  │
-// │ PLANNER                    │  WRITER                             │
-// │ ├─ Keywords Clustered  42  │  ├─ Content Generated    28         │
-// │ ├─ Clusters Created    12  │  ├─ Images Created      127         │
-// │ └─ Ideas Generated     34  │  └─ Articles Published   45         │
-// │                                                                  │
-// │ Credits Used: 2,450  │  Operations: 156                          │
-// │                                                                  │
-// │ [View Full Analytics →]                                          │
-// └──────────────────────────────────────────────────────────────────┘
-// ============================================================================
-
-function CompletionCard({ widget }: { widget: CompletionWidget }) {
-  // Calculate max for proportional bars (across both columns)
-  const allValues = [...widget.plannerItems, ...widget.writerItems].map(i => i.value);
-  const maxValue = Math.max(...allValues, 1);
-
-  const renderItem = (item: CompletionItem, isLast: boolean) => {
-    const barWidth = (item.value / maxValue) * 100;
-    const prefix = isLast ? '└─' : '├─';
-    const color = item.color || 'blue';
-    
-    return (
-      <div key={item.label} className="flex items-center gap-2 py-1">
-        {/* Tree prefix */}
-        <span className="text-[color:var(--color-text-dim)] dark:text-gray-500 font-mono text-xs w-5 flex-shrink-0">{prefix}</span>
-        
-        {/* Label */}
-        <span className="text-sm text-[color:var(--color-text)] dark:text-gray-300 flex-1 truncate">{item.label}</span>
-        
-        {/* Progress bar */}
-        <div className="w-16 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex-shrink-0">
-          <div 
-            className="h-full rounded-full transition-all duration-500"
-            style={{ 
-              ...getProgressBarStyle(color),
-              width: `${Math.min(100, barWidth)}%` 
-            }}
-          />
-        </div>
-        
-        {/* Value */}
-        <span className="text-sm font-bold text-[color:var(--color-text)] dark:text-white tabular-nums w-10 text-right flex-shrink-0">
-          {item.value}
-        </span>
-      </div>
-    );
-  };
-
-  return (
-    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
-      {/* Header */}
-      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
-        {widget.title}
-      </h3>
-      
-      {/* Two-column layout: Planner | Writer */}
-      <div className="grid grid-cols-2 gap-6 mb-4">
-        {/* Planner Column */}
-        <div>
-          <div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-primary)' }}>
-            Planner
-          </div>
-          <div className="space-y-0.5">
-            {widget.plannerItems.map((item, idx) => 
-              renderItem(item, idx === widget.plannerItems.length - 1)
-            )}
-          </div>
-        </div>
-        
-        {/* Writer Column */}
-        <div>
-          <div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-success)' }}>
-            Writer
-          </div>
-          <div className="space-y-0.5">
-            {widget.writerItems.map((item, idx) => 
-              renderItem(item, idx === widget.writerItems.length - 1)
-            )}
-          </div>
-        </div>
-      </div>
-      
-      {/* Footer Stats - Credits Used & Operations */}
-      {(widget.creditsUsed !== undefined || widget.operationsCount !== undefined) && (
-        <div className="flex items-center gap-4 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800 text-sm">
-          {widget.creditsUsed !== undefined && (
-            <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
-              Credits Used: <strong className="text-[color:var(--color-text)] dark:text-white font-bold">{widget.creditsUsed.toLocaleString()}</strong>
-            </span>
-          )}
-          {widget.creditsUsed !== undefined && widget.operationsCount !== undefined && (
-            <span className="text-[color:var(--color-stroke)] dark:text-gray-600">│</span>
-          )}
-          {widget.operationsCount !== undefined && (
-            <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
-              Operations: <strong className="text-[color:var(--color-text)] dark:text-white font-bold">{widget.operationsCount}</strong>
-            </span>
-          )}
-        </div>
-      )}
-      
-      {/* Analytics Link */}
-      {widget.analyticsHref && (
-        <div className="pt-3 mt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
-          <Link
-            to={widget.analyticsHref}
-            className="text-sm font-medium hover:underline flex items-center gap-1"
-            style={{ color: 'var(--color-primary)' }}
-          >
-            View Full Analytics
-            <ChevronRightIcon className="w-4 h-4" />
-          </Link>
-        </div>
-      )}
-    </Card>
-  );
-}
-

frontend/src/components/dashboard/NeedsAttentionBar.tsx

@@ -1,162 +1,161 @@
 /**
- * NeedsAttentionBar - Compact alert bar for items needing user attention
- * 
- * Shows at the top of dashboard when there are:
- * - Content pending review
- * - WordPress sync failures
- * - Incomplete site setup
- * - Automation failures
- * 
- * Collapsible and only visible when there are items to show.
+ * NeedsAttentionBar - Collapsible alert bar for items requiring user action
+ * Shows pending reviews, sync failures, setup incomplete, automation failures
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { AlertIcon, ArrowRightIcon, ChevronDownIcon, RefreshIcon, CloseIcon } from '../../icons';
-
-export type AttentionType = 'pending_review' | 'sync_failed' | 'setup_incomplete' | 'automation_failed' | 'credits_low';
+import { 
+  AlertIcon, 
+  ChevronDownIcon, 
+  ChevronUpIcon,
+  CheckCircleIcon,
+  CloseIcon,
+} from '../../icons';
 
 export interface AttentionItem {
   id: string;
-  type: AttentionType;
+  type: 'pending_review' | 'sync_failed' | 'setup_incomplete' | 'automation_failed' | 'credits_low';
   title: string;
+  description: string;
   count?: number;
   actionLabel: string;
-  actionUrl?: string;
+  actionHref?: string;
   onAction?: () => void;
-  onRetry?: () => void;
-  severity: 'warning' | 'error' | 'info';
+  secondaryActionLabel?: string;
+  secondaryActionHref?: string;
+  onSecondaryAction?: () => void;
 }
 
 interface NeedsAttentionBarProps {
   items: AttentionItem[];
   onDismiss?: (id: string) => void;
-  className?: string;
 }
 
-const severityStyles = {
-  warning: {
-    bg: 'bg-amber-50 dark:bg-amber-500/10',
-    border: 'border-amber-200 dark:border-amber-500/30',
-    icon: 'text-amber-500',
-    text: 'text-amber-800 dark:text-amber-200',
-    button: 'bg-amber-100 hover:bg-amber-200 text-amber-700 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:text-amber-200',
+const typeConfig = {
+  pending_review: {
+    icon: CheckCircleIcon,
+    bgColor: 'bg-amber-50 dark:bg-amber-900/20',
+    borderColor: 'border-amber-200 dark:border-amber-800',
+    iconColor: 'text-amber-500',
+    titleColor: 'text-amber-800 dark:text-amber-200',
   },
-  error: {
-    bg: 'bg-red-50 dark:bg-red-500/10',
-    border: 'border-red-200 dark:border-red-500/30',
-    icon: 'text-red-500',
-    text: 'text-red-800 dark:text-red-200',
-    button: 'bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-500/20 dark:hover:bg-red-500/30 dark:text-red-200',
+  sync_failed: {
+    icon: AlertIcon,
+    bgColor: 'bg-red-50 dark:bg-red-900/20',
+    borderColor: 'border-red-200 dark:border-red-800',
+    iconColor: 'text-red-500',
+    titleColor: 'text-red-800 dark:text-red-200',
   },
-  info: {
-    bg: 'bg-blue-50 dark:bg-blue-500/10',
-    border: 'border-blue-200 dark:border-blue-500/30',
-    icon: 'text-blue-500',
-    text: 'text-blue-800 dark:text-blue-200',
-    button: 'bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-500/20 dark:hover:bg-blue-500/30 dark:text-blue-200',
+  setup_incomplete: {
+    icon: AlertIcon,
+    bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+    borderColor: 'border-blue-200 dark:border-blue-800',
+    iconColor: 'text-blue-500',
+    titleColor: 'text-blue-800 dark:text-blue-200',
+  },
+  automation_failed: {
+    icon: AlertIcon,
+    bgColor: 'bg-red-50 dark:bg-red-900/20',
+    borderColor: 'border-red-200 dark:border-red-800',
+    iconColor: 'text-red-500',
+    titleColor: 'text-red-800 dark:text-red-200',
+  },
+  credits_low: {
+    icon: AlertIcon,
+    bgColor: 'bg-orange-50 dark:bg-orange-900/20',
+    borderColor: 'border-orange-200 dark:border-orange-800',
+    iconColor: 'text-orange-500',
+    titleColor: 'text-orange-800 dark:text-orange-200',
   },
 };
 
-export default function NeedsAttentionBar({ items, onDismiss, className = '' }: NeedsAttentionBarProps) {
+export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBarProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
-  if (items.length === 0) return null;
-
-  // Group items by severity for display priority
-  const errorItems = items.filter(i => i.severity === 'error');
-  const warningItems = items.filter(i => i.severity === 'warning');
-  const infoItems = items.filter(i => i.severity === 'info');
-  const sortedItems = [...errorItems, ...warningItems, ...infoItems];
-
-  const totalCount = items.reduce((sum, item) => sum + (item.count || 1), 0);
+  if (items.length === 0) {
+    return null;
+  }
 
   return (
-    <div className={`mb-6 ${className}`}>
-      {/* Header bar - always visible */}
+    <div className="mb-4">
+      {/* Header */}
       <button
         onClick={() => setIsCollapsed(!isCollapsed)}
-        className="w-full flex items-center justify-between p-3 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-500/15 transition-colors"
+        className="w-full flex items-center justify-between px-5 py-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-t-xl hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors"
       >
-        <div className="flex items-center gap-3">
-          <AlertIcon className="w-5 h-5 text-amber-500" />
-          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
-            {totalCount} item{totalCount !== 1 ? 's' : ''} need{totalCount === 1 ? 's' : ''} attention
+        <div className="flex items-center gap-2.5">
+          <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+          <span className="text-base font-semibold text-amber-800 dark:text-amber-200">
+            Needs Attention ({items.length})
           </span>
         </div>
-        <ChevronDownIcon 
-          className={`w-5 h-5 text-amber-500 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} 
-        />
+        {isCollapsed ? (
+          <ChevronDownIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+        ) : (
+          <ChevronUpIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+        )}
       </button>
 
-      {/* Expandable content */}
+      {/* Content */}
       {!isCollapsed && (
-        <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-          {sortedItems.map((item) => {
-            const styles = severityStyles[item.severity];
-            
-            return (
-              <div
-                key={item.id}
-                className={`flex items-center justify-between p-3 rounded-lg border ${styles.bg} ${styles.border}`}
-              >
-                <div className="flex items-center gap-2 flex-1 min-w-0">
-                  <AlertIcon className={`w-4 h-4 flex-shrink-0 ${styles.icon}`} />
-                  <span className={`text-sm font-medium truncate ${styles.text}`}>
-                    {item.count ? `${item.count} ` : ''}{item.title}
-                  </span>
-                </div>
-                
-                <div className="flex items-center gap-1 flex-shrink-0 ml-2">
-                  {item.onRetry && (
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        item.onRetry?.();
-                      }}
-                      className={`p-1.5 rounded ${styles.button} transition-colors`}
-                      title="Retry"
-                    >
-                      <RefreshIcon className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                  
-                  {item.actionUrl ? (
-                    <Link
-                      to={item.actionUrl}
-                      className={`px-2 py-1 text-xs font-medium rounded ${styles.button} transition-colors flex items-center gap-1`}
-                    >
-                      {item.actionLabel}
-                      <ArrowRightIcon className="w-3 h-3" />
-                    </Link>
-                  ) : item.onAction ? (
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        item.onAction?.();
-                      }}
-                      className={`px-2 py-1 text-xs font-medium rounded ${styles.button} transition-colors`}
-                    >
-                      {item.actionLabel}
-                    </button>
-                  ) : null}
-                  
+        <div className="border border-t-0 border-amber-200 dark:border-amber-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
+          <div className="flex flex-wrap gap-3">
+            {items.map((item) => {
+              const config = typeConfig[item.type];
+              const Icon = config.icon;
+
+              return (
+                <div
+                  key={item.id}
+                  className={`flex items-start gap-3 px-4 py-3 rounded-lg border ${config.bgColor} ${config.borderColor} min-w-[220px] flex-1 max-w-[380px]`}
+                >
+                  <Icon className={`w-5 h-5 mt-0.5 flex-shrink-0 ${config.iconColor}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className={`text-base font-semibold ${config.titleColor}`}>
+                      {item.count ? `${item.count} ${item.title}` : item.title}
+                    </div>
+                    <p className="text-sm text-gray-700 dark:text-gray-300 mt-1 line-clamp-1">
+                      {item.description}
+                    </p>
+                    <div className="flex items-center gap-3 mt-2">
+                      {item.actionHref ? (
+                        <Link
+                          to={item.actionHref}
+                          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+                        >
+                          {item.actionLabel} →
+                        </Link>
+                      ) : item.onAction ? (
+                        <button
+                          onClick={item.onAction}
+                          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+                        >
+                          {item.actionLabel}
+                        </button>
+                      ) : null}
+                      {item.secondaryActionHref && (
+                        <Link
+                          to={item.secondaryActionHref}
+                          className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+                        >
+                          {item.secondaryActionLabel}
+                        </Link>
+                      )}
+                    </div>
+                  </div>
                   {onDismiss && (
                     <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDismiss(item.id);
-                      }}
-                      className="p-1 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-                      title="Dismiss"
+                      onClick={() => onDismiss(item.id)}
+                      className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                     >
-                      <CloseIcon className="w-3.5 h-3.5 text-gray-400" />
+                      <CloseIcon className="w-4 h-4" />
                     </button>
                   )}
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
       )}
     </div>

frontend/src/components/dashboard/OperationsCostsWidget.tsx

@@ -0,0 +1,143 @@
+/**
+ * OperationsCostsWidget - Shows individual AI operations with counts and credit costs
+ * Displays recent operations statistics for the site
+ */
+
+import { Link } from 'react-router-dom';
+import {
+  GroupIcon,
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+} from '../../icons';
+
+interface OperationStat {
+  type: 'clustering' | 'ideas' | 'content' | 'images';
+  count: number;
+  creditsUsed: number;
+  avgCreditsPerOp: number;
+}
+
+interface OperationsCostsWidgetProps {
+  operations: OperationStat[];
+  period?: '7d' | '30d' | 'total';
+  loading?: boolean;
+}
+
+const operationConfig = {
+  clustering: { 
+    label: 'Clustering', 
+    icon: GroupIcon, 
+    color: 'text-purple-600 dark:text-purple-400',
+    href: '/planner/clusters',
+  },
+  ideas: { 
+    label: 'Ideas', 
+    icon: BoltIcon, 
+    color: 'text-orange-600 dark:text-orange-400',
+    href: '/planner/ideas',
+  },
+  content: { 
+    label: 'Content', 
+    icon: FileTextIcon, 
+    color: 'text-green-600 dark:text-green-400',
+    href: '/writer/content',
+  },
+  images: { 
+    label: 'Images', 
+    icon: FileIcon, 
+    color: 'text-pink-600 dark:text-pink-400',
+    href: '/writer/images',
+  },
+};
+
+export default function OperationsCostsWidget({ 
+  operations, 
+  period = '7d',
+  loading = false 
+}: OperationsCostsWidgetProps) {
+  const periodLabel = period === '7d' ? 'Last 7 Days' : period === '30d' ? 'Last 30 Days' : 'All Time';
+  
+  const totalOps = operations.reduce((sum, op) => sum + op.count, 0);
+  const totalCredits = operations.reduce((sum, op) => sum + op.creditsUsed, 0);
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          AI Operations
+        </h3>
+        <span className="text-xs text-gray-600 dark:text-gray-400">{periodLabel}</span>
+      </div>
+
+      {/* Operations List */}
+      <div className="space-y-0">
+        {/* Table Header */}
+        <div className="flex items-center text-sm text-gray-600 dark:text-gray-400 pb-2 border-b border-gray-200 dark:border-gray-700">
+          <span className="flex-1 font-medium">Operation</span>
+          <span className="w-16 text-right font-medium">Count</span>
+          <span className="w-20 text-right font-medium">Credits</span>
+          <span className="w-16 text-right font-medium">Avg</span>
+        </div>
+
+        {/* Operation Rows */}
+        {loading ? (
+          <div className="py-8 text-center">
+            <p className="text-sm text-gray-500">Loading...</p>
+          </div>
+        ) : operations.length === 0 ? (
+          <div className="py-8 text-center">
+            <p className="text-sm text-gray-600 dark:text-gray-400">No operations yet</p>
+            <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+              Start by adding keywords and clustering them
+            </p>
+          </div>
+        ) : (
+          <>
+            {operations.map((op) => {
+              const config = operationConfig[op.type];
+              const Icon = config.icon;
+              
+              return (
+                <Link
+                  key={op.type}
+                  to={config.href}
+                  className="flex items-center py-2.5 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors rounded px-1 -mx-1"
+                >
+                  <div className="flex items-center gap-2.5 flex-1">
+                    <Icon className={`w-5 h-5 ${config.color}`} />
+                    <span className="text-base text-gray-800 dark:text-gray-200">
+                      {config.label}
+                    </span>
+                  </div>
+                  <span className="w-16 text-base text-right text-gray-700 dark:text-gray-300 font-medium">
+                    {op.count}
+                  </span>
+                  <span className="w-20 text-base text-right text-gray-700 dark:text-gray-300">
+                    {op.creditsUsed}
+                  </span>
+                  <span className="w-16 text-sm text-right text-gray-600 dark:text-gray-400">
+                    {op.avgCreditsPerOp.toFixed(1)}
+                  </span>
+                </Link>
+              );
+            })}
+
+            {/* Totals Row */}
+            <div className="flex items-center pt-2.5 font-semibold border-t border-gray-200 dark:border-gray-700 mt-1">
+              <span className="flex-1 text-base text-gray-800 dark:text-gray-200">Total</span>
+              <span className="w-16 text-base text-right text-gray-900 dark:text-gray-100">
+                {totalOps}
+              </span>
+              <span className="w-20 text-base text-right text-gray-900 dark:text-gray-100">
+                {totalCredits}
+              </span>
+              <span className="w-16"></span>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/QuickActionsWidget.tsx

@@ -0,0 +1,255 @@
+/**
+ * QuickActionsWidget - Workflow guide with explainer text
+ * Full-width layout with steps in 3 columns (1-3, 4-6, 7-8)
+ */
+
+import { useNavigate } from 'react-router-dom';
+import Button from '../ui/button/Button';
+import {
+  ListIcon,
+  GroupIcon,
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+  CheckCircleIcon,
+  PaperPlaneIcon,
+  HelpCircleIcon,
+} from '../../icons';
+
+interface QuickActionsWidgetProps {
+  onAddKeywords?: () => void;
+}
+
+const workflowSteps = [
+  { 
+    num: 1, 
+    icon: ListIcon,
+    title: 'Add Keywords',
+    description: 'Import your target keywords manually or from CSV',
+    href: '/planner/keyword-opportunities',
+    actionLabel: 'Add',
+    color: 'text-blue-600 dark:text-blue-400',
+  },
+  { 
+    num: 2, 
+    icon: GroupIcon,
+    title: 'Auto Cluster',
+    description: 'AI groups related keywords into content clusters',
+    href: '/planner/clusters',
+    actionLabel: 'Cluster',
+    color: 'text-purple-600 dark:text-purple-400',
+  },
+  { 
+    num: 3, 
+    icon: BoltIcon,
+    title: 'Generate Ideas',
+    description: 'Create content ideas from your keyword clusters',
+    href: '/planner/ideas',
+    actionLabel: 'Ideas',
+    color: 'text-orange-600 dark:text-orange-400',
+  },
+  { 
+    num: 4, 
+    icon: CheckCircleIcon,
+    title: 'Create Tasks',
+    description: 'Convert approved ideas into content tasks',
+    href: '/writer/tasks',
+    actionLabel: 'Tasks',
+    color: 'text-indigo-600 dark:text-indigo-400',
+  },
+  { 
+    num: 5, 
+    icon: FileTextIcon,
+    title: 'Generate Content',
+    description: 'AI writes SEO-optimized articles from tasks',
+    href: '/writer/content',
+    actionLabel: 'Write',
+    color: 'text-green-600 dark:text-green-400',
+  },
+  { 
+    num: 6, 
+    icon: FileIcon,
+    title: 'Generate Images',
+    description: 'Create featured images and media for articles',
+    href: '/writer/images',
+    actionLabel: 'Images',
+    color: 'text-pink-600 dark:text-pink-400',
+  },
+  { 
+    num: 7, 
+    icon: CheckCircleIcon,
+    title: 'Review & Approve',
+    description: 'Quality check and approve generated content',
+    href: '/writer/review',
+    actionLabel: 'Review',
+    color: 'text-amber-600 dark:text-amber-400',
+  },
+  { 
+    num: 8, 
+    icon: PaperPlaneIcon,
+    title: 'Publish to WP',
+    description: 'Push approved content to your WordPress site',
+    href: '/writer/published',
+    actionLabel: 'Publish',
+    color: 'text-emerald-600 dark:text-emerald-400',
+  },
+];
+
+export default function QuickActionsWidget({ onAddKeywords }: QuickActionsWidgetProps) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          Workflow Guide
+        </h3>
+        <Button
+          variant="outline"
+          tone="neutral"
+          size="sm"
+          startIcon={<HelpCircleIcon className="w-4 h-4" />}
+          onClick={() => navigate('/help')}
+        >
+          Full Help Guide
+        </Button>
+      </div>
+
+      {/* 3-Column Grid: Steps 1-3, 4-6, 7-8 */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* Column 1: Steps 1-3 */}
+        <div className="space-y-2.5">
+          {workflowSteps.slice(0, 3).map((step) => {
+            const Icon = step.icon;
+            return (
+              <div 
+                key={step.num} 
+                className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
+              >
+                {/* Step Number */}
+                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                  {step.num}
+                </span>
+                
+                {/* Icon */}
+                <div className={`flex-shrink-0 ${step.color}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
+                
+                {/* Text Content */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                    {step.title}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-1">
+                    {step.description}
+                  </p>
+                </div>
+                
+                {/* Action Button */}
+                <Button
+                  size="xs"
+                  variant="outline"
+                  tone="brand"
+                  onClick={() => navigate(step.href)}
+                  className="flex-shrink-0 opacity-70 group-hover:opacity-100 transition-opacity"
+                >
+                  {step.actionLabel}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Column 2: Steps 4-6 */}
+        <div className="space-y-2.5">
+          {workflowSteps.slice(3, 6).map((step) => {
+            const Icon = step.icon;
+            return (
+              <div 
+                key={step.num} 
+                className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
+              >
+                {/* Step Number */}
+                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                  {step.num}
+                </span>
+                
+                {/* Icon */}
+                <div className={`flex-shrink-0 ${step.color}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
+                
+                {/* Text Content */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                    {step.title}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-1">
+                    {step.description}
+                  </p>
+                </div>
+                
+                {/* Action Button */}
+                <Button
+                  size="xs"
+                  variant="outline"
+                  tone="brand"
+                  onClick={() => navigate(step.href)}
+                  className="flex-shrink-0 opacity-70 group-hover:opacity-100 transition-opacity"
+                >
+                  {step.actionLabel}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Column 3: Steps 7-8 */}
+        <div className="space-y-2.5">
+          {workflowSteps.slice(6, 8).map((step) => {
+            const Icon = step.icon;
+            return (
+              <div 
+                key={step.num} 
+                className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
+              >
+                {/* Step Number */}
+                <span className="w-6 h-6 flex items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 text-sm font-semibold text-brand-600 dark:text-brand-400 flex-shrink-0">
+                  {step.num}
+                </span>
+                
+                {/* Icon */}
+                <div className={`flex-shrink-0 ${step.color}`}>
+                  <Icon className="w-5 h-5" />
+                </div>
+                
+                {/* Text Content */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                    {step.title}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-1">
+                    {step.description}
+                  </p>
+                </div>
+                
+                {/* Action Button */}
+                <Button
+                  size="xs"
+                  variant="outline"
+                  tone="brand"
+                  onClick={() => navigate(step.href)}
+                  className="flex-shrink-0 opacity-70 group-hover:opacity-100 transition-opacity"
+                >
+                  {step.actionLabel}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/RecentActivityWidget.tsx

@@ -0,0 +1,137 @@
+/**
+ * RecentActivityWidget - Shows last 5 significant operations
+ * Displays AI task completions, publishing events, etc.
+ */
+
+import { Link } from 'react-router-dom';
+import {
+  GroupIcon,
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+  PaperPlaneIcon,
+  ListIcon,
+  AlertIcon,
+  CheckCircleIcon,
+} from '../../icons';
+
+export interface ActivityItem {
+  id: string;
+  type: 'clustering' | 'ideas' | 'content' | 'images' | 'published' | 'keywords' | 'error' | 'sync';
+  title: string;
+  description: string;
+  timestamp: Date;
+  href?: string;
+  success?: boolean;
+}
+
+interface RecentActivityWidgetProps {
+  activities: ActivityItem[];
+  loading?: boolean;
+}
+
+const activityConfig = {
+  clustering: { icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/40' },
+  ideas: { icon: BoltIcon, color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-100 dark:bg-orange-900/40' },
+  content: { icon: FileTextIcon, color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-100 dark:bg-green-900/40' },
+  images: { icon: FileIcon, color: 'text-pink-600 dark:text-pink-400', bgColor: 'bg-pink-100 dark:bg-pink-900/40' },
+  published: { icon: PaperPlaneIcon, color: 'text-emerald-600 dark:text-emerald-400', bgColor: 'bg-emerald-100 dark:bg-emerald-900/40' },
+  keywords: { icon: ListIcon, color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-100 dark:bg-blue-900/40' },
+  error: { icon: AlertIcon, color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-100 dark:bg-red-900/40' },
+  sync: { icon: CheckCircleIcon, color: 'text-teal-600 dark:text-teal-400', bgColor: 'bg-teal-100 dark:bg-teal-900/40' },
+};
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7) return `${diffDays}d ago`;
+  
+  return date.toLocaleDateString();
+}
+
+export default function RecentActivityWidget({ activities, loading }: RecentActivityWidgetProps) {
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide mb-4">
+        Recent Activity
+      </h3>
+
+      {/* Activity List */}
+      <div className="space-y-3">
+        {loading ? (
+          // Loading skeleton
+          Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-start gap-3 animate-pulse">
+              <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
+              <div className="flex-1">
+                <div className="h-4 w-3/4 bg-gray-100 dark:bg-gray-800 rounded mb-2"></div>
+                <div className="h-3 w-1/4 bg-gray-100 dark:bg-gray-800 rounded"></div>
+              </div>
+            </div>
+          ))
+        ) : activities.length === 0 ? (
+          <div className="text-center py-8">
+            <p className="text-base text-gray-600 dark:text-gray-400">No recent activity</p>
+            <p className="text-sm text-gray-500 dark:text-gray-500 mt-1">
+              AI operations will appear here
+            </p>
+          </div>
+        ) : (
+          activities.slice(0, 5).map((activity) => {
+            const config = activityConfig[activity.type];
+            const Icon = config.icon;
+            
+            const content = (
+              <div className="flex items-start gap-3">
+                <div className={`w-9 h-9 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0`}>
+                  <Icon className={`w-5 h-5 ${config.color}`} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-base text-gray-800 dark:text-gray-200 line-clamp-1">
+                    {activity.title}
+                  </p>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {formatRelativeTime(activity.timestamp)}
+                  </p>
+                </div>
+              </div>
+            );
+
+            return activity.href ? (
+              <Link
+                key={activity.id}
+                to={activity.href}
+                className="block hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-lg p-1 -m-1 transition-colors"
+              >
+                {content}
+              </Link>
+            ) : (
+              <div key={activity.id} className="p-1 -m-1">
+                {content}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* View All Link */}
+      {activities.length > 0 && (
+        <Link
+          to="/account/activity"
+          className="block mt-3 pt-3 border-t border-gray-100 dark:border-gray-800 text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-center"
+        >
+          View All Activity →
+        </Link>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/SiteConfigWidget.tsx

@@ -0,0 +1,148 @@
+/**
+ * SiteConfigWidget - Shows site configuration status
+ * Displays what's configured from site settings
+ */
+
+import { Link } from 'react-router-dom';
+import { 
+  CheckCircleIcon, 
+  AlertIcon,
+  GridIcon,
+  PlugInIcon,
+  UserIcon,
+  FileTextIcon,
+} from '../../icons';
+
+interface SiteConfigWidgetProps {
+  siteId: number;
+  siteName: string;
+  hasIndustry: boolean;
+  hasSectors: boolean;
+  sectorsCount?: number;
+  hasWordPress: boolean;
+  hasKeywords: boolean;
+  keywordsCount?: number;
+  hasAuthorProfiles: boolean;
+  authorProfilesCount?: number;
+}
+
+export default function SiteConfigWidget({
+  siteId,
+  siteName,
+  hasIndustry,
+  hasSectors,
+  sectorsCount = 0,
+  hasWordPress,
+  hasKeywords,
+  keywordsCount = 0,
+  hasAuthorProfiles,
+  authorProfilesCount = 0,
+}: SiteConfigWidgetProps) {
+  const configItems = [
+    {
+      label: 'Industry & Sectors',
+      configured: hasIndustry && hasSectors,
+      detail: hasSectors ? `${sectorsCount} sector${sectorsCount !== 1 ? 's' : ''}` : 'Not configured',
+      icon: GridIcon,
+      href: `/sites/${siteId}/settings?tab=industry`,
+    },
+    {
+      label: 'WordPress Integration',
+      configured: hasWordPress,
+      detail: hasWordPress ? 'Connected' : 'Not connected',
+      icon: PlugInIcon,
+      href: `/sites/${siteId}/settings?tab=integrations`,
+    },
+    {
+      label: 'Keywords',
+      configured: hasKeywords,
+      detail: hasKeywords ? `${keywordsCount} keyword${keywordsCount !== 1 ? 's' : ''}` : 'No keywords',
+      icon: FileTextIcon,
+      href: `/planner/keywords?site=${siteId}`,
+    },
+    {
+      label: 'Author Profiles',
+      configured: hasAuthorProfiles,
+      detail: hasAuthorProfiles ? `${authorProfilesCount} profile${authorProfilesCount !== 1 ? 's' : ''}` : 'No profiles',
+      icon: UserIcon,
+      href: `/sites/${siteId}/settings?tab=authors`,
+    },
+  ];
+
+  const configuredCount = configItems.filter(item => item.configured).length;
+  const totalCount = configItems.length;
+  const completionPercent = Math.round((configuredCount / totalCount) * 100);
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          Site Configuration
+        </h3>
+        <span className={`text-lg font-bold ${completionPercent === 100 ? 'text-green-600' : 'text-amber-600'}`}>
+          {configuredCount}/{totalCount}
+        </span>
+      </div>
+
+      {/* Config Items */}
+      <div className="space-y-3">
+        {configItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.label}
+              to={item.href}
+              className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group"
+            >
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                item.configured 
+                  ? 'bg-green-100 dark:bg-green-900/30' 
+                  : 'bg-amber-100 dark:bg-amber-900/30'
+              }`}>
+                <Icon className={`w-5 h-5 ${
+                  item.configured 
+                    ? 'text-green-600 dark:text-green-400' 
+                    : 'text-amber-600 dark:text-amber-400'
+                }`} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                  {item.label}
+                </p>
+                <p className={`text-xs ${
+                  item.configured 
+                    ? 'text-gray-600 dark:text-gray-400' 
+                    : 'text-amber-600 dark:text-amber-400'
+                }`}>
+                  {item.detail}
+                </p>
+              </div>
+              {item.configured ? (
+                <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+              ) : (
+                <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+              )}
+            </Link>
+          );
+        })}
+      </div>
+
+      {/* Completion Progress */}
+      <div className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between text-sm mb-2">
+          <span className="text-gray-600 dark:text-gray-400">Setup Progress</span>
+          <span className="font-semibold text-gray-800 dark:text-gray-200">{completionPercent}%</span>
+        </div>
+        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+          <div 
+            className={`h-2 rounded-full transition-all ${
+              completionPercent === 100 ? 'bg-green-500' : 'bg-amber-500'
+            }`}
+            style={{ width: `${completionPercent}%` }}
+          ></div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/ThreeWidgetFooter.tsx

@@ -1,286 +1,363 @@
 /**
- * ThreeWidgetFooter - 3-column widget footer for module pages
+ * ThreeWidgetFooter - 3-Column Layout for Table Page Footers
  * 
- * Layout:
- * ┌─────────────────────────────────────────────────────────────────────┐
- * │ WIDGET 1: PAGE METRICS  │ WIDGET 2: MODULE STATS │ WIDGET 3: COMPLETION │
- * │ (Current Page Progress) │ (Full Module Overview) │ (Both Modules Stats) │
- * └─────────────────────────────────────────────────────────────────────┘
+ * Design from Section 3 of COMPREHENSIVE-AUDIT-REPORT.md:
+ * ┌─────────────────────────────────────────────────────────────────────────────────────┐
+ * │  WIDGET 1: PAGE METRICS       │  WIDGET 2: MODULE STATS       │  WIDGET 3: COMPLETION │
+ * │  (Current Page Progress)      │  (Full Module Overview)       │  (Both Modules Stats) │
+ * │  ~33.3% width                 │  ~33.3% width                 │  ~33.3% width         │
+ * └─────────────────────────────────────────────────────────────────────────────────────┘
  * 
- * Uses standard components from:
- * - components/ui/card (Card, CardTitle)
- * - components/ui/progress (ProgressBar)
- * - styles/tokens.css for colors
+ * STYLING: Uses CSS tokens from styles/tokens.css:
+ * - --color-primary: Brand blue for primary actions/bars
+ * - --color-success: Green for success states
+ * - --color-warning: Amber for warnings
+ * - --color-purple: Purple accent
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { Card } from '../ui/card/Card';
-import { ProgressBar } from '../ui/progress';
+import { LightBulbIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
 
 // ============================================================================
 // TYPE DEFINITIONS
 // ============================================================================
 
-export interface PageMetricItem {
-  label: string;
-  value: number | string;
-  suffix?: string;  // e.g., '%' or 'K'
-}
+/** Submodule color type - matches headerMetrics accentColor */
+export type SubmoduleColor = 'blue' | 'green' | 'amber' | 'purple';
 
+/** Widget 1: Page Progress - metrics in 2x2 grid + progress bar + hint */
 export interface PageProgressWidget {
   title: string;
-  metrics: [PageMetricItem, PageMetricItem, PageMetricItem, PageMetricItem]; // 4 metrics in 2x2 grid
-  progress: {
-    value: number;
-    label: string;
-    color?: 'primary' | 'success' | 'warning';
-  };
-  hint?: string;  // Actionable insight
+  metrics: Array<{ label: string; value: string | number; percentage?: string }>;
+  progress: { value: number; label: string; color?: SubmoduleColor };
+  hint?: string;
+  /** The submodule's accent color - progress bar uses this */
+  submoduleColor?: SubmoduleColor;
 }
 
-export interface PipelineStep {
+/** Widget 2: Module Stats - Pipeline flow with arrows and progress bars */
+export interface ModulePipelineRow {
   fromLabel: string;
   fromValue: number;
+  fromHref?: string;
+  actionLabel: string;
   toLabel: string;
   toValue: number;
-  actionLabel?: string;
-  progressValue: number;
+  toHref?: string;
+  progress: number; // 0-100
+  /** Color for this pipeline row's progress bar */
+  color?: SubmoduleColor;
 }
 
 export interface ModuleStatsWidget {
   title: string;
-  pipeline: PipelineStep[];
+  pipeline: ModulePipelineRow[];
   links: Array<{ label: string; href: string }>;
 }
 
+/** Widget 3: Completion - Tree structure with bars for both modules */
 export interface CompletionItem {
   label: string;
   value: number;
-  barWidth: number;  // 0-100 for visual bar
+  color?: SubmoduleColor;
 }
 
 export interface CompletionWidget {
-  plannerStats: CompletionItem[];
-  writerStats: CompletionItem[];
-  summary: {
-    creditsUsed: number;
-    operations: number;
-  };
+  title: string;
+  plannerItems: CompletionItem[];
+  writerItems: CompletionItem[];
+  creditsUsed?: number;
+  operationsCount?: number;
+  analyticsHref?: string;
 }
 
+/** Main component props */
 export interface ThreeWidgetFooterProps {
   pageProgress: PageProgressWidget;
   moduleStats: ModuleStatsWidget;
   completion: CompletionWidget;
+  submoduleColor?: SubmoduleColor;
   className?: string;
 }
 
+// ============================================================================
+// COLOR UTILITIES
+// ============================================================================
+
+const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSProperties => {
+  const colorMap: Record<SubmoduleColor, string> = {
+    blue: 'var(--color-primary)',
+    green: 'var(--color-success)',
+    amber: 'var(--color-warning)',
+    purple: 'var(--color-purple)',
+  };
+  return { backgroundColor: colorMap[color] };
+};
+
 // ============================================================================
 // WIDGET 1: PAGE PROGRESS
 // ============================================================================
 
-const PageProgressCard: React.FC<{ data: PageProgressWidget }> = ({ data }) => {
+function PageProgressCard({ widget, submoduleColor = 'blue' }: { widget: PageProgressWidget; submoduleColor?: SubmoduleColor }) {
+  const progressColor = widget.submoduleColor || widget.progress.color || submoduleColor;
+  
   return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-        {data.title}
-      </h4>
+    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
+      {/* Header */}
+      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
+        {widget.title}
+      </h3>
       
       {/* 2x2 Metrics Grid */}
-      <div className="grid grid-cols-2 gap-x-4 gap-y-2 mb-4">
-        {data.metrics.map((metric, idx) => (
-          <div key={idx} className="flex items-center justify-between">
-            <span className="text-sm text-gray-600 dark:text-gray-400">
-              {metric.label}
-            </span>
-            <span className="text-sm font-semibold text-gray-800 dark:text-white">
-              {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
-              {metric.suffix}
-            </span>
+      <div className="grid grid-cols-2 gap-x-6 gap-y-3 mb-5">
+        {widget.metrics.slice(0, 4).map((metric, idx) => (
+          <div key={idx} className="flex items-baseline justify-between">
+            <span className="text-sm text-[color:var(--color-text-dim)] dark:text-gray-400">{metric.label}</span>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-lg font-bold text-[color:var(--color-text)] dark:text-white tabular-nums">
+                {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
+              </span>
+              {metric.percentage && (
+                <span className="text-xs text-[color:var(--color-text-dim)] dark:text-gray-400">({metric.percentage})</span>
+              )}
+            </div>
           </div>
         ))}
       </div>
-
+      
       {/* Progress Bar */}
-      <ProgressBar
-        value={data.progress.value}
-        color={data.progress.color || 'primary'}
-        size="md"
-        showLabel={true}
-        label={data.progress.label}
-      />
-
-      {/* Hint */}
-      {data.hint && (
-        <p className="mt-3 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
-          <span className="text-amber-500">💡</span>
-          {data.hint}
-        </p>
+      <div className="mb-4">
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div 
+            className="h-full rounded-full transition-all duration-500"
+            style={{ 
+              ...getProgressBarStyle(progressColor),
+              width: `${Math.min(100, Math.max(0, widget.progress.value))}%`
+            }}
+          />
+        </div>
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{widget.progress.label}</span>
+          <span className="text-sm font-bold text-[color:var(--color-text)] dark:text-white">{widget.progress.value}%</span>
+        </div>
+      </div>
+      
+      {/* Hint with icon */}
+      {widget.hint && (
+        <div className="flex items-start gap-2 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
+          <LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-warning)' }} />
+          <span className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>{widget.hint}</span>
+        </div>
       )}
     </Card>
   );
-};
+}
 
 // ============================================================================
 // WIDGET 2: MODULE STATS
 // ============================================================================
 
-const ModuleStatsCard: React.FC<{ data: ModuleStatsWidget }> = ({ data }) => {
+function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
   return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-        {data.title}
-      </h4>
-
-      {/* Pipeline Steps */}
-      <div className="space-y-3">
-        {data.pipeline.map((step, idx) => (
-          <div key={idx} className="space-y-1">
-            {/* Labels Row */}
-            <div className="flex items-center justify-between text-xs">
-              <span className="text-gray-600 dark:text-gray-400">
-                {step.fromLabel}
-              </span>
-              {step.actionLabel && (
-                <span className="text-gray-400 dark:text-gray-500 italic">
-                  {step.actionLabel}
+    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
+      {/* Header */}
+      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
+        {widget.title}
+      </h3>
+      
+      {/* Pipeline Rows */}
+      <div className="space-y-4 mb-4">
+        {widget.pipeline.map((row, idx) => (
+          <div key={idx}>
+            {/* Row header: FromLabel Value ► ToLabel Value */}
+            <div className="flex items-center justify-between mb-2">
+              {/* From side */}
+              <div className="flex items-center gap-2">
+                {row.fromHref ? (
+                  <Link 
+                    to={row.fromHref}
+                    className="text-sm font-medium hover:underline"
+                    style={{ color: 'var(--color-primary)' }}
+                  >
+                    {row.fromLabel}
+                  </Link>
+                ) : (
+                  <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.fromLabel}</span>
+                )}
+                <span className="text-lg font-bold tabular-nums" style={{ color: 'var(--color-primary)' }}>
+                  {row.fromValue}
                 </span>
-              )}
-              <span className="text-gray-600 dark:text-gray-400">
-                {step.toLabel}
-              </span>
+              </div>
+              
+              {/* Arrow icon */}
+              <ChevronRightIcon
+                className="w-6 h-6 flex-shrink-0 mx-2"
+                style={{ color: 'var(--color-primary)' }}
+              />
+              
+              {/* To side */}
+              <div className="flex items-center gap-2">
+                {row.toHref ? (
+                  <Link 
+                    to={row.toHref}
+                    className="text-sm font-medium hover:underline"
+                    style={{ color: 'var(--color-primary)' }}
+                  >
+                    {row.toLabel}
+                  </Link>
+                ) : (
+                  <span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.toLabel}</span>
+                )}
+                <span className="text-lg font-bold text-[color:var(--color-text)] dark:text-white tabular-nums">
+                  {row.toValue}
+                </span>
+              </div>
             </div>
             
-            {/* Values & Progress Row */}
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold text-gray-800 dark:text-white min-w-[32px]">
-                {step.fromValue.toLocaleString()}
-              </span>
-              <div className="flex-1">
-                <div className="h-1.5 rounded-full bg-gray-200 dark:bg-gray-700">
-                  <div 
-                    className="h-full rounded-full bg-[var(--color-primary)] transition-all duration-300"
-                    style={{ width: `${Math.min(100, step.progressValue)}%` }}
-                  />
-                </div>
-              </div>
-              <span className="text-sm font-semibold text-gray-800 dark:text-white min-w-[32px] text-right">
-                {step.toValue.toLocaleString()}
-              </span>
+            {/* Progress bar */}
+            <div className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div 
+                className="h-full rounded-full transition-all duration-500"
+                style={{ 
+                  ...getProgressBarStyle(row.color || 'blue'),
+                  width: `${Math.min(100, Math.max(0, row.progress))}%`
+                }}
+              />
             </div>
           </div>
         ))}
       </div>
-
-      {/* Quick Links */}
-      <div className="flex flex-wrap gap-2 mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
-        {data.links.map((link, idx) => (
+      
+      {/* Navigation Links */}
+      <div className="flex flex-wrap gap-3 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
+        {widget.links.map((link, idx) => (
           <Link
             key={idx}
             to={link.href}
-            className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+            className="text-sm font-medium hover:underline flex items-center gap-1"
+            style={{ color: 'var(--color-primary)' }}
           >
-            → {link.label}
+            <ChevronRightIcon className="w-4 h-4" />
+            <span>{link.label}</span>
           </Link>
         ))}
       </div>
     </Card>
   );
-};
+}
 
 // ============================================================================
-// WIDGET 3: COMPLETION STATS
+// WIDGET 3: COMPLETION
 // ============================================================================
 
-type TimeFilter = '7d' | '30d' | '90d';
+function CompletionCard({ widget }: { widget: CompletionWidget }) {
+  // Calculate max for proportional bars (across both columns)
+  const allValues = [...widget.plannerItems, ...widget.writerItems].map(i => i.value);
+  const maxValue = Math.max(...allValues, 1);
 
-const CompletionCard: React.FC<{ data: CompletionWidget }> = ({ data }) => {
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>('30d');
-
-  const filterButtons: TimeFilter[] = ['7d', '30d', '90d'];
+  const renderItem = (item: CompletionItem, isLast: boolean) => {
+    const barWidth = (item.value / maxValue) * 100;
+    const prefix = isLast ? '└─' : '├─';
+    const color = item.color || 'blue';
+    
+    return (
+      <div key={item.label} className="flex items-center gap-2 py-1">
+        {/* Tree prefix */}
+        <span className="text-[color:var(--color-text-dim)] dark:text-gray-500 font-mono text-xs w-5 flex-shrink-0">{prefix}</span>
+        
+        {/* Label */}
+        <span className="text-sm text-[color:var(--color-text)] dark:text-gray-300 flex-1 truncate">{item.label}</span>
+        
+        {/* Progress bar */}
+        <div className="w-16 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex-shrink-0">
+          <div 
+            className="h-full rounded-full transition-all duration-500"
+            style={{ 
+              ...getProgressBarStyle(color),
+              width: `${Math.min(100, barWidth)}%`
+            }}
+          />
+        </div>
+        
+        {/* Value */}
+        <span className="text-sm font-bold text-[color:var(--color-text)] dark:text-white tabular-nums w-10 text-right flex-shrink-0">
+          {item.value}
+        </span>
+      </div>
+    );
+  };
 
   return (
-    <Card variant="surface" padding="sm" shadow="sm">
-      <div className="flex items-center justify-between mb-3">
-        <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-          Workflow Completion
-        </h4>
-        <div className="flex gap-1">
-          {filterButtons.map((filter) => (
-            <button
-              key={filter}
-              onClick={() => setTimeFilter(filter)}
-              className={`px-2 py-0.5 text-xs rounded transition-colors ${
-                timeFilter === filter
-                  ? 'bg-brand-500 text-white'
-                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
-              }`}
-            >
-              {filter}
-            </button>
-          ))}
+    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
+      {/* Header */}
+      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
+        {widget.title}
+      </h3>
+      
+      {/* Two-column layout: Planner | Writer */}
+      <div className="grid grid-cols-2 gap-6 mb-4">
+        {/* Planner Column */}
+        <div>
+          <div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-primary)' }}>
+            Planner
+          </div>
+          <div className="space-y-0.5">
+            {widget.plannerItems.map((item, idx) =>
+              renderItem(item, idx === widget.plannerItems.length - 1)
+            )}
+          </div>
+        </div>
+        
+        {/* Writer Column */}
+        <div>
+          <div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-success)' }}>
+            Writer
+          </div>
+          <div className="space-y-0.5">
+            {widget.writerItems.map((item, idx) =>
+              renderItem(item, idx === widget.writerItems.length - 1)
+            )}
+          </div>
         </div>
       </div>
-
-      {/* Planner Stats */}
-      <div className="mb-3">
-        <h5 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-          PLANNER
-        </h5>
-        <div className="space-y-1.5">
-          {data.plannerStats.map((stat, idx) => (
-            <div key={idx} className="flex items-center gap-2">
-              <span className="text-xs text-gray-600 dark:text-gray-400 w-28 truncate">
-                {stat.label}
-              </span>
-              <span className="text-xs font-semibold text-gray-800 dark:text-white w-10 text-right">
-                {stat.value.toLocaleString()}
-              </span>
-              <div className="flex-1 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700">
-                <div 
-                  className="h-full rounded-full bg-[var(--color-success)]"
-                  style={{ width: `${Math.min(100, stat.barWidth)}%` }}
-                />
-              </div>
-            </div>
-          ))}
+      
+      {/* Footer Stats - Credits Used & Operations */}
+      {(widget.creditsUsed !== undefined || widget.operationsCount !== undefined) && (
+        <div className="flex items-center gap-4 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800 text-sm">
+          {widget.creditsUsed !== undefined && (
+            <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
+              Credits Used: <strong className="text-[color:var(--color-text)] dark:text-white font-bold">{widget.creditsUsed.toLocaleString()}</strong>
+            </span>
+          )}
+          {widget.creditsUsed !== undefined && widget.operationsCount !== undefined && (
+            <span className="text-[color:var(--color-stroke)] dark:text-gray-600">│</span>
+          )}
+          {widget.operationsCount !== undefined && (
+            <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
+              Operations: <strong className="text-[color:var(--color-text)] dark:text-white font-bold">{widget.operationsCount}</strong>
+            </span>
+          )}
         </div>
-      </div>
-
-      {/* Writer Stats */}
-      <div className="mb-3">
-        <h5 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-          WRITER
-        </h5>
-        <div className="space-y-1.5">
-          {data.writerStats.map((stat, idx) => (
-            <div key={idx} className="flex items-center gap-2">
-              <span className="text-xs text-gray-600 dark:text-gray-400 w-28 truncate">
-                {stat.label}
-              </span>
-              <span className="text-xs font-semibold text-gray-800 dark:text-white w-10 text-right">
-                {stat.value.toLocaleString()}
-              </span>
-              <div className="flex-1 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700">
-                <div 
-                  className="h-full rounded-full bg-[var(--color-primary)]"
-                  style={{ width: `${Math.min(100, stat.barWidth)}%` }}
-                />
-              </div>
-            </div>
-          ))}
+      )}
+      
+      {/* Analytics Link */}
+      {widget.analyticsHref && (
+        <div className="pt-3 mt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
+          <Link
+            to={widget.analyticsHref}
+            className="text-sm font-medium hover:underline flex items-center gap-1"
+            style={{ color: 'var(--color-primary)' }}
+          >
+            View Full Analytics
+            <ChevronRightIcon className="w-4 h-4" />
+          </Link>
         </div>
-      </div>
-
-      {/* Summary Footer */}
-      <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
-        <span>Credits: {data.summary.creditsUsed.toLocaleString()}</span>
-        <span>Operations: {data.summary.operations.toLocaleString()}</span>
-      </div>
+      )}
     </Card>
   );
-};
+}
 
 // ============================================================================
 // MAIN COMPONENT
@@ -290,130 +367,19 @@ export default function ThreeWidgetFooter({
   pageProgress,
   moduleStats,
   completion,
+  submoduleColor = 'blue',
   className = '',
 }: ThreeWidgetFooterProps) {
   return (
-    <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 ${className}`}>
+    <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 ${className}`}>
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <PageProgressCard data={pageProgress} />
-        <ModuleStatsCard data={moduleStats} />
-        <CompletionCard data={completion} />
+        <PageProgressCard widget={pageProgress} submoduleColor={submoduleColor} />
+        <ModuleStatsCard widget={moduleStats} />
+        <CompletionCard widget={completion} />
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// PRE-CONFIGURED WIDGETS FOR COMMON PAGES
-// ============================================================================
-
-// Helper to generate planner module stats widget
-export function createPlannerModuleStats(data: {
-  keywords: number;
-  clusteredKeywords: number;
-  clusters: number;
-  clustersWithIdeas: number;
-  ideas: number;
-  ideasInTasks: number;
-}): ModuleStatsWidget {
-  const keywordProgress = data.keywords > 0 
-    ? Math.round((data.clusteredKeywords / data.keywords) * 100) 
-    : 0;
-  const clusterProgress = data.clusters > 0 
-    ? Math.round((data.clustersWithIdeas / data.clusters) * 100) 
-    : 0;
-  const ideaProgress = data.ideas > 0 
-    ? Math.round((data.ideasInTasks / data.ideas) * 100) 
-    : 0;
-
-  return {
-    title: 'Planner Module',
-    pipeline: [
-      {
-        fromLabel: 'Keywords',
-        fromValue: data.keywords,
-        toLabel: 'Clusters',
-        toValue: data.clusters,
-        actionLabel: 'Auto Cluster',
-        progressValue: keywordProgress,
-      },
-      {
-        fromLabel: 'Clusters',
-        fromValue: data.clusters,
-        toLabel: 'Ideas',
-        toValue: data.ideas,
-        actionLabel: 'Generate Ideas',
-        progressValue: clusterProgress,
-      },
-      {
-        fromLabel: 'Ideas',
-        fromValue: data.ideas,
-        toLabel: 'Tasks',
-        toValue: data.ideasInTasks,
-        actionLabel: 'Create Tasks',
-        progressValue: ideaProgress,
-      },
-    ],
-    links: [
-      { label: 'Keywords', href: '/planner/keywords' },
-      { label: 'Clusters', href: '/planner/clusters' },
-      { label: 'Ideas', href: '/planner/ideas' },
-    ],
-  };
-}
-
-// Helper to generate writer module stats widget
-export function createWriterModuleStats(data: {
-  tasks: number;
-  completedTasks: number;
-  drafts: number;
-  draftsWithImages: number;
-  readyContent: number;
-  publishedContent: number;
-}): ModuleStatsWidget {
-  const taskProgress = data.tasks > 0 
-    ? Math.round((data.completedTasks / data.tasks) * 100) 
-    : 0;
-  const imageProgress = data.drafts > 0 
-    ? Math.round((data.draftsWithImages / data.drafts) * 100) 
-    : 0;
-  const publishProgress = data.readyContent > 0 
-    ? Math.round((data.publishedContent / data.readyContent) * 100) 
-    : 0;
-
-  return {
-    title: 'Writer Module',
-    pipeline: [
-      {
-        fromLabel: 'Tasks',
-        fromValue: data.tasks,
-        toLabel: 'Drafts',
-        toValue: data.completedTasks,
-        actionLabel: 'Generate Content',
-        progressValue: taskProgress,
-      },
-      {
-        fromLabel: 'Drafts',
-        fromValue: data.drafts,
-        toLabel: 'Images',
-        toValue: data.draftsWithImages,
-        actionLabel: 'Generate Images',
-        progressValue: imageProgress,
-      },
-      {
-        fromLabel: 'Ready',
-        fromValue: data.readyContent,
-        toLabel: 'Published',
-        toValue: data.publishedContent,
-        actionLabel: 'Review & Publish',
-        progressValue: publishProgress,
-      },
-    ],
-    links: [
-      { label: 'Tasks', href: '/writer/tasks' },
-      { label: 'Content', href: '/writer/content' },
-      { label: 'Images', href: '/writer/images' },
-      { label: 'Published', href: '/writer/published' },
-    ],
-  };
-}
+// Also export sub-components for flexibility
+export { PageProgressCard, ModuleStatsCard, CompletionCard };

frontend/src/components/dashboard/WorkflowPipelineWidget.tsx

@@ -0,0 +1,112 @@
+/**
+ * WorkflowPipelineWidget - Visual flow showing content creation pipeline
+ * Sites → Keywords → Clusters → Ideas → Tasks → Drafts → Published
+ * Balanced single-row layout with filled arrow connectors
+ */
+
+import { Link } from 'react-router-dom';
+import { ProgressBar } from '../ui/progress';
+import {
+  GridIcon,
+  ListIcon,
+  GroupIcon,
+  BoltIcon,
+  CheckCircleIcon,
+  FileTextIcon,
+  PaperPlaneIcon,
+  ChevronRightIcon,
+} from '../../icons';
+
+export interface PipelineData {
+  sites: number;
+  keywords: number;
+  clusters: number;
+  ideas: number;
+  tasks: number;
+  drafts: number;
+  published: number;
+  completionPercentage: number;
+}
+
+interface WorkflowPipelineWidgetProps {
+  data: PipelineData;
+  loading?: boolean;
+}
+
+const stages = [
+  { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', color: 'text-blue-600 dark:text-blue-400' },
+  { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', color: 'text-blue-600 dark:text-blue-400' },
+  { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', color: 'text-purple-600 dark:text-purple-400' },
+  { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', color: 'text-orange-600 dark:text-orange-400' },
+  { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', color: 'text-indigo-600 dark:text-indigo-400' },
+  { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', color: 'text-green-600 dark:text-green-400' },
+  { key: 'published', label: 'Published', icon: PaperPlaneIcon, href: '/writer/published', color: 'text-emerald-600 dark:text-emerald-400' },
+] as const;
+
+// Small filled arrow triangle component
+function ArrowTip() {
+  return (
+    <div className="flex items-center justify-center w-4 h-4 mx-1">
+      <svg viewBox="0 0 8 12" className="w-2.5 h-3.5 fill-brand-500 dark:fill-brand-400">
+        <path d="M0 0 L8 6 L0 12 Z" />
+      </svg>
+    </div>
+  );
+}
+
+export default function WorkflowPipelineWidget({ data, loading }: WorkflowPipelineWidgetProps) {
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 uppercase tracking-wide">
+          Workflow Pipeline
+        </h3>
+        <span className="text-3xl font-bold text-brand-600 dark:text-brand-400">
+          {data.completionPercentage}%
+        </span>
+      </div>
+
+      {/* Pipeline Flow - Single Balanced Row */}
+      <div className="flex items-center justify-between mb-5">
+        {stages.map((stage, index) => {
+          const Icon = stage.icon;
+          const count = data[stage.key as keyof PipelineData];
+          
+          return (
+            <div key={stage.key} className="flex items-center">
+              <Link
+                to={stage.href}
+                className="flex flex-col items-center group min-w-[60px]"
+              >
+                <div className="p-2.5 rounded-lg bg-gray-50 dark:bg-gray-800 group-hover:bg-brand-50 dark:group-hover:bg-brand-900/20 transition-colors border border-transparent group-hover:border-brand-200 dark:group-hover:border-brand-800">
+                  <Icon className={`w-6 h-6 ${stage.color}`} />
+                </div>
+                <span className="text-sm text-gray-700 dark:text-gray-300 mt-1.5 font-medium">
+                  {stage.label}
+                </span>
+                <span className={`text-lg font-bold ${stage.color}`}>
+                  {loading ? '—' : typeof count === 'number' ? count.toLocaleString() : count}
+                </span>
+              </Link>
+              {index < stages.length - 1 && <ArrowTip />}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Progress Bar */}
+      <div className="mt-4">
+        <ProgressBar
+          value={data.completionPercentage}
+          size="md"
+          color="primary"
+          className="h-2.5"
+        />
+        <p className="text-sm text-gray-600 dark:text-gray-400 mt-2 text-center">
+          {data.completionPercentage}% of keywords converted to published content
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/index.ts

@@ -1,50 +0,0 @@
-/**
- * Dashboard Components - Centralized exports
- * 
- * Usage:
- *   import { CompactDashboard, ThreeWidgetFooter } from '../components/dashboard';
- */
-
-// Main dashboard components
-export { default as CompactDashboard } from './CompactDashboard';
-export type {
-  CompactDashboardProps,
-  AttentionItem,
-  WorkflowCounts,
-  AIOperation,
-  RecentActivityItem,
-} from './CompactDashboard';
-
-// Attention bar
-export { default as NeedsAttentionBar } from './NeedsAttentionBar';
-export type {
-  AttentionItem as NeedsAttentionItem,
-  AttentionType,
-} from './NeedsAttentionBar';
-
-// Footer components
-export { default as ThreeWidgetFooter } from './ThreeWidgetFooter';
-export type {
-  ThreeWidgetFooterProps,
-  PageMetricItem,
-  PageProgressWidget,
-  PipelineStep,
-  ModuleStatsWidget,
-  CompletionItem,
-  CompletionWidget,
-} from './ThreeWidgetFooter';
-
-// Other dashboard components
-export { default as CreditBalanceWidget } from './CreditBalanceWidget';
-export { default as EnhancedMetricCard } from './EnhancedMetricCard';
-export { default as ModuleMetricsFooter } from './ModuleMetricsFooter';
-export type {
-  SubmoduleColor,
-  PageProgressWidget as ModulePageProgressWidget,
-  ModulePipelineRow,
-  ModuleStatsWidget as ModuleModuleStatsWidget,
-  CompletionItem as ModuleCompletionItem,
-  CompletionWidget as ModuleCompletionWidget,
-} from './ModuleMetricsFooter';
-export { default as UsageChartWidget } from './UsageChartWidget';
-export { default as WorkflowPipeline } from './WorkflowPipeline';

frontend/src/components/header/Header.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ThemeToggleButton } from "../common/ThemeToggleButton";
-import NotificationDropdown from "./NotificationDropdownNew";
+import NotificationDropdown from "./NotificationDropdown";
 import UserDropdown from "./UserDropdown";
 import { Link } from "react-router-dom";
 

frontend/src/components/header/NotificationDropdown.tsx

@@ -1,12 +1,79 @@
+/**
+ * NotificationDropdown - Dynamic notification dropdown using store
+ * Shows AI task completions, system events, and other notifications
+ */
+
 import { useState, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
-import { Link } from "react-router-dom";
+import { 
+  useNotificationStore, 
+  formatNotificationTime, 
+  getNotificationColors,
+  NotificationType 
+} from "../../store/notificationStore";
+import { 
+  CheckCircleIcon, 
+  AlertIcon, 
+  BoltIcon,
+  FileTextIcon,
+  FileIcon,
+  GroupIcon,
+} from "../../icons";
+
+// Icon map for different notification categories/functions
+const getNotificationIcon = (category: string, functionName?: string): React.ReactNode => {
+  if (functionName) {
+    switch (functionName) {
+      case 'auto_cluster':
+        return <GroupIcon className="w-5 h-5" />;
+      case 'generate_ideas':
+        return <BoltIcon className="w-5 h-5" />;
+      case 'generate_content':
+        return <FileTextIcon className="w-5 h-5" />;
+      case 'generate_images':
+      case 'generate_image_prompts':
+        return <FileIcon className="w-5 h-5" />;
+      default:
+        return <BoltIcon className="w-5 h-5" />;
+    }
+  }
+  
+  switch (category) {
+    case 'ai_task':
+      return <BoltIcon className="w-5 h-5" />;
+    case 'system':
+      return <AlertIcon className="w-5 h-5" />;
+    default:
+      return <CheckCircleIcon className="w-5 h-5" />;
+  }
+};
+
+const getTypeIcon = (type: NotificationType): React.ReactNode => {
+  switch (type) {
+    case 'success':
+      return <CheckCircleIcon className="w-4 h-4" />;
+    case 'error':
+    case 'warning':
+      return <AlertIcon className="w-4 h-4" />;
+    default:
+      return <BoltIcon className="w-4 h-4" />;
+  }
+};
 
 export default function NotificationDropdown() {
   const [isOpen, setIsOpen] = useState(false);
-  const [notifying, setNotifying] = useState(true);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const navigate = useNavigate();
+  
+  const { 
+    notifications, 
+    unreadCount, 
+    markAsRead, 
+    markAllAsRead,
+    removeNotification 
+  } = useNotificationStore();
 
   function toggleDropdown() {
     setIsOpen(!isOpen);
@@ -18,22 +85,31 @@ export default function NotificationDropdown() {
 
   const handleClick = () => {
     toggleDropdown();
-    setNotifying(false);
   };
+  
+  const handleNotificationClick = (id: string, href?: string) => {
+    markAsRead(id);
+    closeDropdown();
+    if (href) {
+      navigate(href);
+    }
+  };
+
   return (
     <div className="relative">
       <button
         ref={buttonRef}
         className="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full dropdown-toggle hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
         onClick={handleClick}
+        aria-label={`Notifications ${unreadCount > 0 ? `(${unreadCount} unread)` : ''}`}
       >
-        <span
-          className={`absolute right-0 top-0.5 z-10 h-2 w-2 rounded-full bg-orange-400 ${
-            !notifying ? "hidden" : "flex"
-          }`}
-        >
-          <span className="absolute inline-flex w-full h-full bg-orange-400 rounded-full opacity-75 animate-ping"></span>
-        </span>
+        {/* Notification badge */}
+        {unreadCount > 0 && (
+          <span className="absolute -right-0.5 -top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-[10px] font-semibold text-white">
+            {unreadCount > 9 ? '9+' : unreadCount}
+            <span className="absolute inline-flex w-full h-full bg-orange-400 rounded-full opacity-75 animate-ping"></span>
+          </span>
+        )}
         <svg
           className="fill-current"
           width="20"
@@ -49,335 +125,143 @@ export default function NotificationDropdown() {
           />
         </svg>
       </button>
+      
       <Dropdown
         isOpen={isOpen}
         onClose={closeDropdown}
-        anchorRef={buttonRef}
+        anchorRef={buttonRef as React.RefObject<HTMLElement>}
         placement="bottom-right"
         className="flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px]"
       >
+        {/* Header */}
         <div className="flex items-center justify-between pb-3 mb-3 border-b border-gray-100 dark:border-gray-700">
           <h5 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
-            Notification
+            Notifications
+            {unreadCount > 0 && (
+              <span className="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+                ({unreadCount} new)
+              </span>
+            )}
           </h5>
-          <button
-            onClick={toggleDropdown}
-            className="text-gray-500 transition dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
-          >
-            <svg
-              className="fill-current"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+          <div className="flex items-center gap-2">
+            {unreadCount > 0 && (
+              <button
+                onClick={markAllAsRead}
+                className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+              >
+                Mark all read
+              </button>
+            )}
+            <button
+              onClick={toggleDropdown}
+              className="text-gray-500 transition dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+              aria-label="Close notifications"
             >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
+              <svg
+                className="fill-current"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
-        <ul className="flex flex-col h-auto overflow-y-auto custom-scrollbar">
-          {/* Example notification items */}
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-02.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
+        
+        {/* Notification List */}
+        <ul className="flex flex-col h-auto overflow-y-auto custom-scrollbar flex-1">
+          {notifications.length === 0 ? (
+            <li className="flex flex-col items-center justify-center py-12 text-center">
+              <div className="w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+                <BoltIcon className="w-6 h-6 text-gray-400" />
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                No notifications yet
+              </p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                AI task completions will appear here
+              </p>
+            </li>
+          ) : (
+            notifications.map((notification) => {
+              const colors = getNotificationColors(notification.type);
+              const icon = getNotificationIcon(
+                notification.category,
+                notification.metadata?.functionName
+              );
+              
+              return (
+                <li key={notification.id}>
+                  <DropdownItem
+                    onItemClick={() => handleNotificationClick(
+                      notification.id,
+                      notification.actionHref
+                    )}
+                    className={`flex gap-3 rounded-lg border-b border-gray-100 p-3 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-white/5 ${
+                      !notification.read ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''
+                    }`}
+                  >
+                    {/* Icon */}
+                    <span className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${colors.bg}`}>
+                      <span className={colors.icon}>
+                        {icon}
+                      </span>
+                    </span>
 
-              <span className="block">
-                <span className="mb-1.5 block  text-theme-sm text-gray-500 dark:text-gray-400 space-x-1">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Terry Franci
-                  </span>
-                  <span> requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
+                    {/* Content */}
+                    <span className="flex-1 min-w-0">
+                      <span className="flex items-start justify-between gap-2">
+                        <span className={`text-sm font-medium ${
+                          !notification.read
+                            ? 'text-gray-900 dark:text-white'
+                            : 'text-gray-700 dark:text-gray-300'
+                        }`}>
+                          {notification.title}
+                        </span>
+                        {!notification.read && (
+                          <span className="flex-shrink-0 w-2 h-2 mt-1.5 rounded-full bg-brand-500"></span>
+                        )}
+                      </span>
+                      
+                      <span className="block text-sm text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2">
+                        {notification.message}
+                      </span>
 
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>5 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-03.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Alena Franci
-                  </span>
-                  <span>requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>8 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-04.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Jocelyn Kenter
-                  </span>
-                  <span> requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>15 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-              to="/"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-05.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 space-x-1 block text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Brandon Philips
-                  </span>
-                  <span>requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>1 hr ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-              onItemClick={closeDropdown}
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-02.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Terry Franci
-                  </span>
-                  <span> requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>5 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-03.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Alena Franci
-                  </span>
-                  <span> requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>8 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-04.jpg"
-                  alt="User"
-                  className="w-full overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-success-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block  space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Jocelyn Kenter
-                  </span>
-                  <span> requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>15 min ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-
-          <li>
-            <DropdownItem
-              onItemClick={closeDropdown}
-              className="flex gap-3 rounded-lg border-b border-gray-100 p-3 px-4.5 py-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
-            >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
-                <img
-                  width={40}
-                  height={40}
-                  src="/images/user/user-05.jpg"
-                  alt="User"
-                  className="overflow-hidden rounded-full"
-                />
-                <span className="absolute bottom-0 right-0 z-10 h-2.5 w-full max-w-2.5 rounded-full border-[1.5px] border-white bg-error-500 dark:border-gray-900"></span>
-              </span>
-
-              <span className="block">
-                <span className="mb-1.5 block space-x-1 text-theme-sm text-gray-500 dark:text-gray-400">
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Brandon Philips
-                  </span>
-                  <span>requests permission to change</span>
-                  <span className="font-medium text-gray-800 dark:text-white/90">
-                    Project - Nganter App
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
-                  <span>Project</span>
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
-                  <span>1 hr ago</span>
-                </span>
-              </span>
-            </DropdownItem>
-          </li>
-          {/* Add more items as needed */}
+                      <span className="flex items-center justify-between mt-2">
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          {formatNotificationTime(notification.timestamp)}
+                        </span>
+                        {notification.actionLabel && notification.actionHref && (
+                          <span className="text-xs font-medium text-brand-600 dark:text-brand-400">
+                            {notification.actionLabel} →
+                          </span>
+                        )}
+                      </span>
+                    </span>
+                  </DropdownItem>
+                </li>
+              );
+            })
+          )}
         </ul>
-        <Link
-          to="/"
-          className="block px-4 py-2 mt-3 text-sm font-medium text-center text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-        >
-          View All Notifications
-        </Link>
+        
+        {/* Footer */}
+        {notifications.length > 0 && (
+          <Link
+            to="/notifications"
+            onClick={closeDropdown}
+            className="block px-4 py-2 mt-3 text-sm font-medium text-center text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+          >
+            View All Notifications
+          </Link>
+        )}
       </Dropdown>
     </div>
   );

frontend/src/config/pages/approved.config.tsx

@@ -277,21 +277,21 @@ export function createApprovedPageConfig(params: {
       label: 'Approved',
       accentColor: 'green',
       calculate: (data: { totalCount: number }) => data.totalCount,
-      tooltip: 'Articles approved and ready for publishing. Select and click "Sync to WordPress" to go live.',
+      tooltip: 'Total approved content ready for publishing.',
     },
     {
       label: 'On Site',
       accentColor: 'blue',
       calculate: (data: { content: Content[] }) => 
         data.content.filter(c => c.external_id).length,
-      tooltip: 'Live articles published to your WordPress site. These are actively generating traffic.',
+      tooltip: 'Content published to your website.',
     },
     {
       label: 'Pending',
       accentColor: 'amber',
       calculate: (data: { content: Content[] }) => 
         data.content.filter(c => !c.external_id).length,
-      tooltip: 'Approved but not synced. Select and click "Sync to WordPress" to publish.',
+      tooltip: 'Approved content not yet published to site.',
     },
   ];
 

frontend/src/config/pages/clusters.config.tsx

@@ -456,29 +456,30 @@ export const createClustersPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Topic clusters grouping related keywords. Select clusters and click "Generate Ideas" to create content outlines.',
+        tooltip: 'Topic clusters organizing your keywords. Each cluster should have 3-7 related keywords.',
       },
       {
         label: 'New',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.clusters.filter((c: Cluster) => (c.ideas_count || 0) === 0).length,
-        tooltip: 'Clusters ready for idea generation. Select them and click "Generate Ideas" to create content outlines.',
+        tooltip: 'Clusters without content ideas yet. Generate ideas for these clusters to move them into the pipeline.',
       },
       {
         label: 'Keywords',
         value: 0,
         accentColor: 'purple' as const,
         calculate: (data) => data.clusters.reduce((sum: number, c: Cluster) => sum + (c.keywords_count || 0), 0),
-        tooltip: 'Keywords organized across clusters. Well-balanced clusters have 3-7 keywords each.',
+        tooltip: 'Total keywords organized across all clusters. More keywords = better topic coverage.',
       },
       {
         label: 'Volume',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.clusters.reduce((sum: number, c: Cluster) => sum + (c.volume || 0), 0),
-        tooltip: 'Combined monthly searches. Prioritize high-volume clusters for maximum traffic potential.',
+        tooltip: 'Combined search volume across all clusters. Prioritize high-volume clusters for maximum traffic.',
       },
     ],
   };
 };
+

frontend/src/config/pages/content.config.tsx

@@ -458,29 +458,30 @@ export const createContentPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Total articles in your library. Add images and review before sending to the approval queue.',
+        tooltip: 'Total content pieces generated. Includes drafts, review, and published content.',
       },
       {
         label: 'Draft',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.content.filter((c: Content) => c.status === 'draft').length,
-        tooltip: 'Drafts needing images and review. Select and click "Generate Images" to add visuals.',
+        tooltip: 'Content in draft stage. Edit and refine before moving to review.',
       },
       {
         label: 'In Review',
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.content.filter((c: Content) => c.status === 'review').length,
-        tooltip: 'Articles awaiting approval. Review for quality then click "Approve" to publish.',
+        tooltip: 'Content awaiting review and approval. Review for quality before publishing.',
       },
       {
         label: 'Published',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.content.filter((c: Content) => c.status === 'published').length,
-        tooltip: 'Live articles published to your site. View in Writer → Published.',
+        tooltip: 'Published content ready for WordPress sync. Track your published library.',
       },
     ],
   };
 };
+

frontend/src/config/pages/ideas.config.tsx

@@ -405,29 +405,30 @@ export const createIdeasPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Content ideas generated. Review each idea\'s outline, then click "Create Task" to begin content generation.',
+        tooltip: 'Total content ideas generated. Ideas become tasks in the content queue for writing.',
       },
       {
         label: 'New',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.ideas.filter((i: ContentIdea) => i.status === 'new').length,
-        tooltip: 'Ideas not yet converted to tasks. Select and click "Create Tasks" to start the content writing process.',
+        tooltip: 'New ideas waiting for review. Approve ideas to queue them for content creation.',
       },
       {
         label: 'Queued',
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.ideas.filter((i: ContentIdea) => i.status === 'queued').length,
-        tooltip: 'Ideas ready for content generation. View their progress in Writer → Tasks queue.',
+        tooltip: 'Ideas queued for content generation. These will be converted to writing tasks automatically.',
       },
       {
         label: 'Completed',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.ideas.filter((i: ContentIdea) => i.status === 'completed').length,
-        tooltip: 'Ideas successfully turned into articles. Review completed content in Writer → Content.',
+        tooltip: 'Ideas that have been successfully turned into content. Track your content creation progress.',
       },
     ],
   };
 };
+

frontend/src/config/pages/images.config.tsx

@@ -221,28 +221,28 @@ export const createImagesPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Articles in your library. Each can have 1 featured image + multiple in-article images.',
+        tooltip: 'Total content pieces with image generation. Track image coverage across all content.',
       },
       {
         label: 'Complete',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'complete').length,
-        tooltip: 'Articles with all images generated. Ready for publishing with full visual coverage.',
+        tooltip: 'Content with all images generated. Ready for publishing with full visual coverage.',
       },
       {
         label: 'Partial',
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'partial').length,
-        tooltip: 'Articles with some images missing. Select and click "Generate Images" to complete visuals.',
+        tooltip: 'Content with some images missing. Generate remaining images to complete visual assets.',
       },
       {
         label: 'Pending',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'pending').length,
-        tooltip: 'Articles needing images. Select and click "Generate Prompts" then "Generate Images".',
+        tooltip: 'Content waiting for image generation. Queue these to start creating visual assets.',
       },
     ],
     maxInArticleImages: maxImages,

frontend/src/config/pages/keywords.config.tsx

@@ -435,28 +435,28 @@ export const createKeywordsPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Keywords ready for clustering. Select unclustered keywords and click "Auto Cluster" to organize them into topic groups.',
+        tooltip: 'Total keywords added to site wrokflow. Minimum 5 Keywords are needed for clustering.',
       },
       {
         label: 'Clustered',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.keywords.filter((k: Keyword) => k.cluster_id).length,
-        tooltip: 'Clusters with 3-7 keywords are optimal for content creation. Click on a cluster to generate content ideas from it.',
+        tooltip: 'Keywords grouped into topical clusters. Clustered keywords are ready for content ideation.',
       },
       {
         label: 'Unmapped',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.keywords.filter((k: Keyword) => !k.cluster_id).length,
-        tooltip: 'Keywords waiting to be clustered. Select them and click "Auto Cluster" to organize into topic groups.',
+        tooltip: 'Unclustered keywords waiting to be organized. Select keywords and use Auto-Cluster to group them.',
       },
       {
         label: 'Volume',
         value: 0,
         accentColor: 'purple' as const,
         calculate: (data) => data.keywords.reduce((sum: number, k: Keyword) => sum + (k.volume || 0), 0),
-        tooltip: 'Combined monthly searches. Prioritize higher-volume keywords when creating content.',
+        tooltip: 'Total monthly search volume across all keywords. Higher volume = more traffic potential.',
       },
     ],
     // bulkActions and rowActions are now global - defined in table-actions.config.ts

frontend/src/config/pages/review.config.tsx

@@ -265,25 +265,25 @@ export function createReviewPageConfig(params: {
         label: 'Ready',
         accentColor: 'blue',
         calculate: ({ totalCount }) => totalCount,
-        tooltip: 'Articles awaiting final review. Check quality and SEO before clicking "Approve & Publish".',
+        tooltip: 'Content ready for final review. Review quality, SEO, and images before publishing.',
       },
       {
         label: 'Images',
         accentColor: 'green',
         calculate: ({ content }) => content.filter(c => c.has_generated_images).length,
-        tooltip: 'Articles with complete visuals. Articles with images get 94% more engagement.',
+        tooltip: 'Content with generated images. Visual assets complete and ready for review.',
       },
       {
         label: 'Optimized',
         accentColor: 'purple',
         calculate: ({ content }) => content.filter(c => c.optimization_scores && c.optimization_scores.overall_score >= 80).length,
-        tooltip: 'High SEO scores (80%+). These articles are well-optimized for search rankings.',
+        tooltip: 'Content with high SEO optimization scores (80%+). Well-optimized for search engines.',
       },
       {
         label: 'Sync Ready',
         accentColor: 'amber',
         calculate: ({ content }) => content.filter(c => c.has_generated_images && c.optimization_scores && c.optimization_scores.overall_score >= 70).length,
-        tooltip: 'Ready to publish! Has images + good SEO. Select and click "Publish to WordPress".',
+        tooltip: 'Content ready for WordPress sync. Has images and good optimization score.',
       },
     ],
   };

frontend/src/config/pages/tasks.config.tsx

@@ -460,36 +460,37 @@ export const createTasksPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.totalCount || 0,
-        tooltip: 'Total content generation tasks. Select tasks and click "Generate Content" to write articles.',
+        tooltip: 'Total content generation tasks. Tasks process ideas into written content automatically.',
       },
       {
         label: 'In Queue',
         value: 0,
         accentColor: 'amber' as const,
         calculate: (data) => data.tasks.filter((t: Task) => t.status === 'queued').length,
-        tooltip: 'Tasks waiting for content generation. Select and click "Generate Content" to write articles.',
+        tooltip: 'Tasks queued for processing. These will be picked up by the content generation system.',
       },
       {
         label: 'Processing',
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => data.tasks.filter((t: Task) => t.status === 'in_progress').length,
-        tooltip: 'Tasks being written by AI. Content will appear in Drafts when complete (~2-3 min each).',
+        tooltip: 'Tasks currently being processed. Content is being generated by AI right now.',
       },
       {
         label: 'Completed',
         value: 0,
         accentColor: 'green' as const,
         calculate: (data) => data.tasks.filter((t: Task) => t.status === 'completed').length,
-        tooltip: 'Tasks with generated content. Review articles in Writer → Content before publishing.',
+        tooltip: 'Successfully completed tasks. Generated content is ready for review and publishing.',
       },
       {
         label: 'Failed',
         value: 0,
         accentColor: 'red' as const,
         calculate: (data) => data.tasks.filter((t: Task) => t.status === 'failed').length,
-        tooltip: 'Failed tasks needing attention. Click to view error details and retry generation.',
+        tooltip: 'Failed tasks that need attention. Review error logs and retry or modify the task.',
       },
     ],
   };
 };
+

frontend/src/context/PageContext.tsx

@@ -1,19 +1,10 @@
 /**
  * Page Context - Shares current page info with header
  * Allows pages to set title, parent module, badge for display in AppHeader
- * Also controls page-specific visibility of site/sector selectors
+ * Dashboard mode: enables "All Sites" option in site selector
  */
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 
-/**
- * Selector visibility configuration per audit Section 1 requirements:
- * - 'both': Show both site and sector selectors (Planner, Writer pages)
- * - 'site-only': Show only site selector (Automation page)
- * - 'none': Hide both selectors (Account, Billing, Thinker pages)
- * Default: 'both' (for backward compatibility)
- */
-export type SelectorVisibility = 'both' | 'site-only' | 'none';
-
 interface PageInfo {
   title: string;
   parent?: string; // Parent module name (e.g., "Planner", "Writer")
@@ -21,8 +12,15 @@ interface PageInfo {
     icon: ReactNode;
     color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo' | 'yellow' | 'pink' | 'emerald' | 'cyan' | 'amber' | 'teal';
   };
-  /** Controls site/sector selector visibility in AppHeader. Default: 'both' */
-  selectorVisibility?: SelectorVisibility;
+  /** Completely hide site/sector selectors in app header */
+  hideSelectors?: boolean;
+  hideSectorSelector?: boolean; // Hide sector selector in app header (for dashboard)
+  /** Dashboard mode: show "All Sites" option in site selector */
+  showAllSitesOption?: boolean;
+  /** Current site filter for dashboard mode ('all' or site id) */
+  siteFilter?: 'all' | number;
+  /** Callback when site filter changes in dashboard mode */
+  onSiteFilterChange?: (value: 'all' | number) => void;
 }
 
 interface PageContextType {

frontend/src/hooks/useProgressModal.ts

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { fetchAPI } from '../services/api';
-import { useNotificationStore } from '../store/notificationStore';
 
 export interface ProgressState {
   percentage: number;
@@ -58,9 +57,6 @@ export function useProgressModal(): UseProgressModalReturn {
     status: 'pending',
   });
   
-  // Notification store for AI task notifications
-  const addNotification = useNotificationStore((state) => state.addAITaskNotification);
-  
   // Step logs state for debugging
   const [stepLogs, setStepLogs] = useState<Array<{
     stepNumber: number;
@@ -585,9 +581,6 @@ export function useProgressModal(): UseProgressModalReturn {
             setStepLogs(allSteps);
           }
           
-          // Add success notification
-          addNotification(title, stepInfo.friendlyMessage, true);
-          
           // Stop polling on SUCCESS
           isStopped = true;
           if (intervalId) {
@@ -644,9 +637,6 @@ export function useProgressModal(): UseProgressModalReturn {
             setStepLogs(allSteps);
           }
           
-          // Add failure notification
-          addNotification(title, errorMsg, false);
-          
           // Stop polling on FAILURE
           isStopped = true;
           if (intervalId) {

frontend/src/hooks/useThreeWidgetFooter.ts

@@ -10,8 +10,8 @@
  *   const footerProps = useThreeWidgetFooter({
  *     module: 'planner',
  *     currentPage: 'keywords',
- *     pageData: { keywords: [...], clusters: [...] },
- *     pipelineData: { ... }
+ *     plannerData: { keywords: [...], clusters: [...] },
+ *     completionData: { ... }
  *   });
  */
 
@@ -21,10 +21,11 @@ import type {
   PageProgressWidget,
   ModuleStatsWidget,
   CompletionWidget,
+  SubmoduleColor,
 } from '../components/dashboard/ThreeWidgetFooter';
 
 // ============================================================================
-// PLANNER MODULE CONFIGURATIONS
+// DATA INTERFACES
 // ============================================================================
 
 interface PlannerPageData {
@@ -79,14 +80,14 @@ function buildKeywordsPageProgress(data: PlannerPageData): PageProgressWidget {
     title: 'Page Progress',
     metrics: [
       { label: 'Keywords', value: totalKeywords },
-      { label: 'Clustered', value: clusteredCount, suffix: ` (${clusteredPercent}%)` },
+      { label: 'Clustered', value: clusteredCount, percentage: `${clusteredPercent}%` },
       { label: 'Unmapped', value: unmappedCount },
       { label: 'Volume', value: totalVolume >= 1000 ? `${(totalVolume / 1000).toFixed(1)}K` : totalVolume },
     ],
     progress: {
       value: clusteredPercent,
       label: `${clusteredPercent}% Clustered`,
-      color: clusteredPercent >= 80 ? 'success' : 'primary',
+      color: clusteredPercent >= 80 ? 'green' : 'blue',
     },
     hint: unmappedCount > 0 ? `${unmappedCount} keywords ready to cluster` : 'All keywords clustered!',
   };
@@ -104,14 +105,14 @@ function buildClustersPageProgress(data: PlannerPageData): PageProgressWidget {
     title: 'Page Progress',
     metrics: [
       { label: 'Clusters', value: totalClusters },
-      { label: 'With Ideas', value: withIdeas, suffix: ` (${ideasPercent}%)` },
+      { label: 'With Ideas', value: withIdeas, percentage: `${ideasPercent}%` },
       { label: 'Keywords', value: totalKeywords },
       { label: 'Ready', value: readyClusters },
     ],
     progress: {
       value: ideasPercent,
       label: `${ideasPercent}% Have Ideas`,
-      color: ideasPercent >= 70 ? 'success' : 'primary',
+      color: ideasPercent >= 70 ? 'green' : 'blue',
     },
     hint: readyClusters > 0 ? `${readyClusters} clusters ready for idea generation` : 'All clusters have ideas!',
   };
@@ -128,14 +129,14 @@ function buildIdeasPageProgress(data: PlannerPageData): PageProgressWidget {
     title: 'Page Progress',
     metrics: [
       { label: 'Ideas', value: totalIdeas },
-      { label: 'In Tasks', value: inTasks, suffix: ` (${convertedPercent}%)` },
+      { label: 'In Tasks', value: inTasks, percentage: `${convertedPercent}%` },
       { label: 'Pending', value: pending },
       { label: 'From Clusters', value: data.totalClusters || 0 },
     ],
     progress: {
       value: convertedPercent,
       label: `${convertedPercent}% Converted`,
-      color: convertedPercent >= 60 ? 'success' : 'primary',
+      color: convertedPercent >= 60 ? 'green' : 'blue',
     },
     hint: pending > 0 ? `${pending} ideas ready to become tasks` : 'All ideas converted!',
   };
@@ -157,14 +158,14 @@ function buildTasksPageProgress(data: WriterPageData): PageProgressWidget {
     title: 'Page Progress',
     metrics: [
       { label: 'Total', value: total },
-      { label: 'Complete', value: completed, suffix: ` (${completedPercent}%)` },
+      { label: 'Complete', value: completed, percentage: `${completedPercent}%` },
       { label: 'Queue', value: queue },
       { label: 'Processing', value: processing },
     ],
     progress: {
       value: completedPercent,
       label: `${completedPercent}% Generated`,
-      color: completedPercent >= 60 ? 'success' : 'primary',
+      color: completedPercent >= 60 ? 'green' : 'blue',
     },
     hint: queue > 0 ? `${queue} tasks in queue for content generation` : 'All tasks processed!',
   };
@@ -181,14 +182,14 @@ function buildContentPageProgress(data: WriterPageData): PageProgressWidget {
     title: 'Page Progress',
     metrics: [
       { label: 'Drafts', value: drafts },
-      { label: 'Has Images', value: hasImages, suffix: ` (${imagesPercent}%)` },
-      { label: 'Total Words', value: '12.5K' }, // Would need word count from API
+      { label: 'Has Images', value: hasImages, percentage: `${imagesPercent}%` },
+      { label: 'Total Words', value: '—' }, // Would need word count from API
       { label: 'Ready', value: ready },
     ],
     progress: {
       value: imagesPercent,
       label: `${imagesPercent}% Have Images`,
-      color: imagesPercent >= 70 ? 'success' : 'primary',
+      color: imagesPercent >= 70 ? 'green' : 'blue',
     },
     hint: drafts - hasImages > 0 ? `${drafts - hasImages} drafts need images before review` : 'All drafts have images!',
   };
@@ -219,7 +220,8 @@ function buildPlannerModuleStats(data: PlannerPageData): ModuleStatsWidget {
         toLabel: 'Clusters',
         toValue: totalClusters,
         actionLabel: 'Auto Cluster',
-        progressValue: totalKeywords > 0 ? Math.round((clusteredKeywords / totalKeywords) * 100) : 0,
+        progress: totalKeywords > 0 ? Math.round((clusteredKeywords / totalKeywords) * 100) : 0,
+        color: 'blue',
       },
       {
         fromLabel: 'Clusters',
@@ -227,7 +229,8 @@ function buildPlannerModuleStats(data: PlannerPageData): ModuleStatsWidget {
         toLabel: 'Ideas',
         toValue: totalIdeas,
         actionLabel: 'Generate Ideas',
-        progressValue: totalClusters > 0 ? Math.round((clustersWithIdeas / totalClusters) * 100) : 0,
+        progress: totalClusters > 0 ? Math.round((clustersWithIdeas / totalClusters) * 100) : 0,
+        color: 'green',
       },
       {
         fromLabel: 'Ideas',
@@ -235,7 +238,8 @@ function buildPlannerModuleStats(data: PlannerPageData): ModuleStatsWidget {
         toLabel: 'Tasks',
         toValue: ideasInTasks,
         actionLabel: 'Create Tasks',
-        progressValue: totalIdeas > 0 ? Math.round((ideasInTasks / totalIdeas) * 100) : 0,
+        progress: totalIdeas > 0 ? Math.round((ideasInTasks / totalIdeas) * 100) : 0,
+        color: 'amber',
       },
     ],
     links: [
@@ -266,7 +270,8 @@ function buildWriterModuleStats(data: WriterPageData): ModuleStatsWidget {
         toLabel: 'Drafts',
         toValue: drafts,
         actionLabel: 'Generate Content',
-        progressValue: totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0,
+        progress: totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0,
+        color: 'blue',
       },
       {
         fromLabel: 'Drafts',
@@ -274,7 +279,8 @@ function buildWriterModuleStats(data: WriterPageData): ModuleStatsWidget {
         toLabel: 'Images',
         toValue: withImages,
         actionLabel: 'Generate Images',
-        progressValue: drafts > 0 ? Math.round((withImages / drafts) * 100) : 0,
+        progress: drafts > 0 ? Math.round((withImages / drafts) * 100) : 0,
+        color: 'purple',
       },
       {
         fromLabel: 'Ready',
@@ -282,7 +288,8 @@ function buildWriterModuleStats(data: WriterPageData): ModuleStatsWidget {
         toLabel: 'Published',
         toValue: published,
         actionLabel: 'Review & Publish',
-        progressValue: ready > 0 ? Math.round((published / (ready + published)) * 100) : 0,
+        progress: ready > 0 ? Math.round((published / (ready + published)) * 100) : 0,
+        color: 'green',
       },
     ],
     links: [
@@ -299,33 +306,21 @@ function buildWriterModuleStats(data: WriterPageData): ModuleStatsWidget {
 // ============================================================================
 
 function buildCompletionStats(data: CompletionData): CompletionWidget {
-  const maxValue = Math.max(
-    data.keywordsClustered || 0,
-    data.clustersCreated || 0,
-    data.ideasGenerated || 0,
-    data.contentGenerated || 0,
-    data.imagesCreated || 0,
-    data.articlesPublished || 0,
-    1
-  );
-
-  const calcBarWidth = (value: number) => Math.round((value / maxValue) * 100);
-
   return {
-    plannerStats: [
-      { label: 'Keywords Clustered', value: data.keywordsClustered || 0, barWidth: calcBarWidth(data.keywordsClustered || 0) },
-      { label: 'Clusters Created', value: data.clustersCreated || 0, barWidth: calcBarWidth(data.clustersCreated || 0) },
-      { label: 'Ideas Generated', value: data.ideasGenerated || 0, barWidth: calcBarWidth(data.ideasGenerated || 0) },
+    title: 'Workflow Completion',
+    plannerItems: [
+      { label: 'Keywords Clustered', value: data.keywordsClustered || 0, color: 'blue' },
+      { label: 'Clusters Created', value: data.clustersCreated || 0, color: 'green' },
+      { label: 'Ideas Generated', value: data.ideasGenerated || 0, color: 'amber' },
     ],
-    writerStats: [
-      { label: 'Content Generated', value: data.contentGenerated || 0, barWidth: calcBarWidth(data.contentGenerated || 0) },
-      { label: 'Images Created', value: data.imagesCreated || 0, barWidth: calcBarWidth(data.imagesCreated || 0) },
-      { label: 'Articles Published', value: data.articlesPublished || 0, barWidth: calcBarWidth(data.articlesPublished || 0) },
+    writerItems: [
+      { label: 'Content Generated', value: data.contentGenerated || 0, color: 'blue' },
+      { label: 'Images Created', value: data.imagesCreated || 0, color: 'purple' },
+      { label: 'Articles Published', value: data.articlesPublished || 0, color: 'green' },
     ],
-    summary: {
-      creditsUsed: data.creditsUsed || 0,
-      operations: data.totalOperations || 0,
-    },
+    creditsUsed: data.creditsUsed,
+    operationsCount: data.totalOperations,
+    analyticsHref: '/account/usage',
   };
 }
 
@@ -335,7 +330,7 @@ function buildCompletionStats(data: CompletionData): CompletionWidget {
 
 export function useThreeWidgetFooter(options: UseThreeWidgetFooterOptions): ThreeWidgetFooterProps {
   const { module, currentPage, plannerData = {}, writerData = {}, completionData = {} } = options;
-
+  
   return useMemo(() => {
     // Build page progress based on current page
     let pageProgress: PageProgressWidget;
@@ -370,17 +365,24 @@ export function useThreeWidgetFooter(options: UseThreeWidgetFooterOptions): Thre
     }
 
     // Build module stats
-    const moduleStats = module === 'planner' 
+    const moduleStats = module === 'planner'
       ? buildPlannerModuleStats(plannerData)
       : buildWriterModuleStats(writerData);
-
+    
     // Build completion stats
     const completion = buildCompletionStats(completionData);
-
+    
+    // Determine submodule color based on current page
+    let submoduleColor: SubmoduleColor = 'blue';
+    if (currentPage === 'clusters') submoduleColor = 'green';
+    if (currentPage === 'ideas') submoduleColor = 'amber';
+    if (currentPage === 'images') submoduleColor = 'purple';
+    
     return {
       pageProgress,
       moduleStats,
       completion,
+      submoduleColor,
     };
   }, [module, currentPage, plannerData, writerData, completionData]);
 }

frontend/src/icons/index.ts

@@ -126,3 +126,7 @@ export { BoxIcon as TagIcon };
 export { CloseIcon as XMarkIcon };
 export { BoltIcon as PlayIcon }; // Use BoltIcon for play (running state)
 export { TimeIcon as PauseIcon }; // Use TimeIcon for pause state
+export { ArrowUpIcon as TrendingUpIcon }; // Trend up indicator
+export { ArrowDownIcon as TrendingDownIcon }; // Trend down indicator
+export { BoxCubeIcon as SettingsIcon }; // Settings/cog alias
+export { InfoIcon as HelpCircleIcon }; // Help/question circle

frontend/src/layout/AppHeader.tsx

@@ -1,15 +1,33 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { usePageContext } from "../context/PageContext";
 import { useSidebar } from "../context/SidebarContext";
 import { ThemeToggleButton } from "../components/common/ThemeToggleButton";
-import NotificationDropdown from "../components/header/NotificationDropdownNew";
+import NotificationDropdown from "../components/header/NotificationDropdown";
 import UserDropdown from "../components/header/UserDropdown";
 import { HeaderMetrics } from "../components/header/HeaderMetrics";
 import SearchModal from "../components/common/SearchModal";
 import SiteAndSectorSelector from "../components/common/SiteAndSectorSelector";
+import SingleSiteSelector from "../components/common/SingleSiteSelector";
+import SiteWithAllSitesSelector from "../components/common/SiteWithAllSitesSelector";
 import React from "react";
 
+// Route patterns for selector visibility
+const SITE_AND_SECTOR_ROUTES = [
+  '/planner',           // All planner pages
+  '/writer',            // All writer pages  
+  '/setup/add-keywords', // Add keywords page
+];
+
+const SINGLE_SITE_ROUTES = [
+  '/automation',
+  '/account/content-settings',  // Content settings and sub-pages
+];
+
+const SITE_WITH_ALL_SITES_ROUTES = [
+  '/',  // Home dashboard only (exact match)
+];
+
 // Badge color mappings for light versions
 const badgeColors: Record<string, { bg: string; light: string }> = {
   blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
@@ -31,6 +49,31 @@ const AppHeader: React.FC = () => {
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const { pageInfo } = usePageContext();
   const { isExpanded, toggleSidebar } = useSidebar();
+  const location = useLocation();
+
+  // Determine which selector to show based on current route
+  const getSelectorType = (): 'site-and-sector' | 'single-site' | 'site-with-all' | 'none' => {
+    const path = location.pathname;
+    
+    // Check for home dashboard (exact match)
+    if (path === '/' && pageInfo?.onSiteFilterChange) {
+      return 'site-with-all';
+    }
+    
+    // Check for site + sector selector routes
+    if (SITE_AND_SECTOR_ROUTES.some(route => path.startsWith(route))) {
+      return 'site-and-sector';
+    }
+    
+    // Check for single site selector routes
+    if (SINGLE_SITE_ROUTES.some(route => path.startsWith(route))) {
+      return 'single-site';
+    }
+    
+    return 'none';
+  };
+
+  const selectorType = getSelectorType();
 
   const toggleApplicationMenu = () => {
     setApplicationMenuOpen(!isApplicationMenuOpen);
@@ -117,11 +160,22 @@ const AppHeader: React.FC = () => {
               {/* Header Metrics */}
               <HeaderMetrics />
               
-              {/* Site and Sector Selector - Desktop (visibility controlled by page context) */}
-              {pageInfo?.selectorVisibility !== 'none' && (
+              {/* Site/Sector Selector - Conditional based on route */}
+              {selectorType === 'site-and-sector' && (
                 <div className="hidden lg:flex items-center">
-                  <SiteAndSectorSelector 
-                    hideSectorSelector={pageInfo?.selectorVisibility === 'site-only'}
+                  <SiteAndSectorSelector />
+                </div>
+              )}
+              {selectorType === 'single-site' && (
+                <div className="hidden lg:flex items-center">
+                  <SingleSiteSelector />
+                </div>
+              )}
+              {selectorType === 'site-with-all' && pageInfo?.onSiteFilterChange && (
+                <div className="hidden lg:flex items-center">
+                  <SiteWithAllSitesSelector 
+                    siteFilter={pageInfo.siteFilter}
+                    onSiteFilterChange={pageInfo.onSiteFilterChange}
                   />
                 </div>
               )}

frontend/src/pages/Automation/AutomationPage.tsx

@@ -5,7 +5,6 @@
 import React, { useState, useEffect } from 'react';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { useSiteStore } from '../../store/siteStore';
-import { usePageContext } from '../../context/PageContext';
 import { automationService, AutomationRun, AutomationConfig, PipelineStage } from '../../services/automationService';
 import {
   fetchKeywords,
@@ -20,6 +19,7 @@ import ConfigModal from '../../components/Automation/ConfigModal';
 import RunHistory from '../../components/Automation/RunHistory';
 import CurrentProcessingCard from '../../components/Automation/CurrentProcessingCard';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import ComponentCard from '../../components/common/ComponentCard';
 import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
 import DebugSiteSelector from '../../components/common/DebugSiteSelector';
@@ -49,7 +49,6 @@ const STAGE_CONFIG = [
 
 const AutomationPage: React.FC = () => {
   const { activeSite } = useSiteStore();
-  const { setPageInfo } = usePageContext();
   const toast = useToast();
   const [config, setConfig] = useState<AutomationConfig | null>(null);
   const [currentRun, setCurrentRun] = useState<AutomationRun | null>(null);
@@ -60,16 +59,6 @@ const AutomationPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
 
-  // Set page context for AppHeader - site-only selector per audit Section 1
-  useEffect(() => {
-    setPageInfo({
-      title: 'Automation',
-      badge: { icon: <BoltIcon />, color: 'teal' },
-      selectorVisibility: 'site-only',
-    });
-    return () => setPageInfo(null);
-  }, [setPageInfo]);
-
   useEffect(() => {
     if (!activeSite) return;
     loadData();
@@ -391,49 +380,34 @@ const AutomationPage: React.FC = () => {
   return (
     <>
       <PageMeta title="Content Automation | IGNY8" description="Automatically create and publish content on your schedule" />
+      <PageHeader 
+        title="Automation" 
+        description="Automatically create and publish content on your schedule"
+        badge={{ icon: <BoltIcon />, color: 'teal' }}
+        parent="Automation"
+      />
       
       <div className="space-y-6">
-        {/* Header */}
-        <div className="relative flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div className="flex-1">
-            <div className="flex items-center gap-3">
-              <div className="flex items-center justify-center size-10 rounded-xl bg-gradient-to-br from-teal-500 to-teal-600">
-                <BoltIcon className="text-white size-5" />
+        {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
+        <div className="flex justify-center">
+          <div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
+            ${currentRun?.status === 'running' ? 'border-blue-500 bg-blue-50' : currentRun?.status === 'paused' ? 'border-amber-500 bg-amber-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-slate-300 bg-slate-50'}`}>
+            <div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
+              ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-amber-500 to-amber-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-slate-400 to-slate-500'}`}>
+              {!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
+                {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
+                {currentRun?.status === 'paused' && 'Paused'}
+                {!currentRun && totalPending > 0 && 'Ready to Run'}
+                {!currentRun && totalPending === 0 && 'No Items Pending'}
               </div>
-              <div>
-                <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Automation</h2>
-                {activeSite && (
-                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
-                    Site: <span className="font-medium text-brand-600 dark:text-brand-400">{activeSite.name}</span>
-                  </p>
-                )}
+              <div className="text-xs text-slate-600 dark:text-gray-400 truncate">
+                {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
               </div>
             </div>
           </div>
-
-          {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
-          <div className="hidden sm:flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
-            <div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
-              ${currentRun?.status === 'running' ? 'border-blue-500 bg-blue-50' : currentRun?.status === 'paused' ? 'border-amber-500 bg-amber-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-slate-300 bg-slate-50'}`}>
-              <div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
-                ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-amber-500 to-amber-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-slate-400 to-slate-500'}`}>
-                {!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
-                  {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
-                  {currentRun?.status === 'paused' && 'Paused'}
-                  {!currentRun && totalPending > 0 && 'Ready to Run'}
-                  {!currentRun && totalPending === 0 && 'No Items Pending'}
-                </div>
-                <div className="text-xs text-slate-600 dark:text-gray-400 truncate">
-                  {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <DebugSiteSelector />
         </div>
 
         {/* Compact Schedule & Controls Panel */}

frontend/src/pages/Help/Help.tsx

@@ -1,6 +1,5 @@
 import { useState, useRef, useEffect } from "react";
 import PageMeta from "../../components/common/PageMeta";
-import { usePageContext } from "../../context/PageContext";
 import { Accordion, AccordionItem } from "../../components/ui/accordion";
 import { Card } from "../../components/ui/card";
 import Badge from "../../components/ui/badge/Badge";
@@ -10,8 +9,7 @@ import {
   CheckCircleIcon,
   ArrowRightIcon,
   FileIcon,
-  GroupIcon,
-  DocsIcon
+  GroupIcon
 } from "../../icons";
 
 interface TableOfContentsItem {
@@ -23,17 +21,6 @@ interface TableOfContentsItem {
 export default function Help() {
   const [activeSection, setActiveSection] = useState<string | null>(null);
   const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const { setPageInfo } = usePageContext();
-
-  // Set page context for AppHeader - no selectors for help pages per audit Section 1
-  useEffect(() => {
-    setPageInfo({
-      title: 'Help & Documentation',
-      badge: { icon: <DocsIcon />, color: 'cyan' },
-      selectorVisibility: 'none',
-    });
-    return () => setPageInfo(null);
-  }, [setPageInfo]);
 
   const tableOfContents: TableOfContentsItem[] = [
     { id: "getting-started", title: "Getting Started", level: 1 },

frontend/src/pages/Planner/Clusters.tsx

@@ -27,11 +27,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleMetricsFooter, { 
-  PageProgressWidget, 
-  ModuleStatsWidget, 
-  CompletionWidget 
-} from '../../components/dashboard/ModuleMetricsFooter';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 
 export default function Clusters() {
   const toast = useToast();
@@ -490,88 +486,81 @@ export default function Clusters() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
-      <ModuleMetricsFooter
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
         submoduleColor="green"
-        threeWidgetLayout={{
-          // Widget 1: Page Progress (Clusters)
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'green',
-            metrics: [
-              { label: 'Clusters', value: totalCount },
-              { label: 'With Ideas', value: clusters.filter(c => (c.ideas_count || 0) > 0).length, percentage: `${totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0}%` },
-              { label: 'Keywords', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0) },
-              { label: 'Ready', value: clusters.filter(c => (c.ideas_count || 0) === 0).length },
-            ],
-            progress: {
-              value: totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0,
-              label: 'Have Ideas',
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'green',
+          metrics: [
+            { label: 'Clusters', value: totalCount },
+            { label: 'With Ideas', value: clusters.filter(c => (c.ideas_count || 0) > 0).length, percentage: `${totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0}%` },
+            { label: 'Keywords', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0) },
+            { label: 'Ready', value: clusters.filter(c => (c.ideas_count || 0) === 0).length },
+          ],
+          progress: {
+            value: totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0,
+            label: 'Have Ideas',
+            color: 'green',
+          },
+          hint: clusters.filter(c => (c.ideas_count || 0) === 0).length > 0
+            ? `${clusters.filter(c => (c.ideas_count || 0) === 0).length} clusters ready for idea generation`
+            : 'All clusters have ideas!',
+        }}
+        moduleStats={{
+          title: 'Planner Module',
+          pipeline: [
+            {
+              fromLabel: 'Keywords',
+              fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
+              fromHref: '/planner/keywords',
+              actionLabel: 'Auto Cluster',
+              toLabel: 'Clusters',
+              toValue: totalCount,
+              progress: 100,
+              color: 'blue',
+            },
+            {
+              fromLabel: 'Clusters',
+              fromValue: totalCount,
+              actionLabel: 'Generate Ideas',
+              toLabel: 'Ideas',
+              toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
+              toHref: '/planner/ideas',
+              progress: totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0,
               color: 'green',
             },
-            hint: clusters.filter(c => (c.ideas_count || 0) === 0).length > 0
-              ? `${clusters.filter(c => (c.ideas_count || 0) === 0).length} clusters ready for idea generation`
-              : 'All clusters have ideas!',
-          },
-          // Widget 2: Module Stats (Planner Pipeline)
-          moduleStats: {
-            title: 'Planner Module',
-            pipeline: [
-              {
-                fromLabel: 'Keywords',
-                fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
-                fromHref: '/planner/keywords',
-                actionLabel: 'Auto Cluster',
-                toLabel: 'Clusters',
-                toValue: totalCount,
-                progress: 100,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Clusters',
-                fromValue: totalCount,
-                actionLabel: 'Generate Ideas',
-                toLabel: 'Ideas',
-                toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-                toHref: '/planner/ideas',
-                progress: totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0,
-                color: 'green',
-              },
-              {
-                fromLabel: 'Ideas',
-                fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-                fromHref: '/planner/ideas',
-                actionLabel: 'Create Tasks',
-                toLabel: 'Tasks',
-                toValue: 0,
-                toHref: '/writer/tasks',
-                progress: 0,
-                color: 'amber',
-              },
-            ],
-            links: [
-              { label: 'Keywords', href: '/planner/keywords' },
-              { label: 'Clusters', href: '/planner/clusters' },
-              { label: 'Ideas', href: '/planner/ideas' },
-            ],
-          },
-          // Widget 3: Completion Stats
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Keywords', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-              { label: 'Clusters', value: totalCount, color: 'green' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Content', value: 0, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
-              { label: 'Published', value: 0, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
+            {
+              fromLabel: 'Ideas',
+              fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
+              fromHref: '/planner/ideas',
+              actionLabel: 'Create Tasks',
+              toLabel: 'Tasks',
+              toValue: 0,
+              toHref: '/writer/tasks',
+              progress: 0,
+              color: 'amber',
+            },
+          ],
+          links: [
+            { label: 'Keywords', href: '/planner/keywords' },
+            { label: 'Clusters', href: '/planner/clusters' },
+            { label: 'Ideas', href: '/planner/ideas' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
+            { label: 'Clusters Created', value: totalCount, color: 'green' },
+            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: 0, color: 'blue' },
+            { label: 'Images Created', value: 0, color: 'purple' },
+            { label: 'Published', value: 0, color: 'green' },
+          ],
+          analyticsHref: '/account/usage',
         }}
       />
 

frontend/src/pages/Planner/Ideas.tsx

@@ -29,11 +29,7 @@ import { createIdeasPageConfig } from '../../config/pages/ideas.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleMetricsFooter, { 
-  PageProgressWidget, 
-  ModuleStatsWidget, 
-  CompletionWidget 
-} from '../../components/dashboard/ModuleMetricsFooter';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 
 export default function Ideas() {
   const toast = useToast();
@@ -418,88 +414,81 @@ export default function Ideas() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
-      <ModuleMetricsFooter
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
         submoduleColor="amber"
-        threeWidgetLayout={{
-          // Widget 1: Page Progress (Ideas)
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'amber',
-            metrics: [
-              { label: 'Ideas', value: totalCount },
-              { label: 'In Tasks', value: ideas.filter(i => i.status === 'queued' || i.status === 'completed').length, percentage: `${totalCount > 0 ? Math.round((ideas.filter(i => i.status !== 'new').length / totalCount) * 100) : 0}%` },
-              { label: 'Pending', value: ideas.filter(i => i.status === 'new').length },
-              { label: 'Clusters', value: clusters.length },
-            ],
-            progress: {
-              value: totalCount > 0 ? Math.round((ideas.filter(i => i.status !== 'new').length / totalCount) * 100) : 0,
-              label: 'Converted',
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'amber',
+          metrics: [
+            { label: 'Ideas', value: totalCount },
+            { label: 'In Tasks', value: ideas.filter(i => i.status === 'queued' || i.status === 'completed').length, percentage: `${totalCount > 0 ? Math.round((ideas.filter(i => i.status === 'queued' || i.status === 'completed').length / totalCount) * 100) : 0}%` },
+            { label: 'Pending', value: ideas.filter(i => i.status === 'new').length },
+            { label: 'From Clusters', value: clusters.length },
+          ],
+          progress: {
+            value: totalCount > 0 ? Math.round((ideas.filter(i => i.status === 'queued' || i.status === 'completed').length / totalCount) * 100) : 0,
+            label: 'Converted',
+            color: 'amber',
+          },
+          hint: ideas.filter(i => i.status === 'new').length > 0
+            ? `${ideas.filter(i => i.status === 'new').length} ideas ready to become tasks`
+            : 'All ideas converted!',
+        }}
+        moduleStats={{
+          title: 'Planner Module',
+          pipeline: [
+            {
+              fromLabel: 'Keywords',
+              fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
+              fromHref: '/planner/keywords',
+              actionLabel: 'Auto Cluster',
+              toLabel: 'Clusters',
+              toValue: clusters.length,
+              toHref: '/planner/clusters',
+              progress: 100,
+              color: 'blue',
+            },
+            {
+              fromLabel: 'Clusters',
+              fromValue: clusters.length,
+              fromHref: '/planner/clusters',
+              actionLabel: 'Generate Ideas',
+              toLabel: 'Ideas',
+              toValue: totalCount,
+              progress: 100,
+              color: 'green',
+            },
+            {
+              fromLabel: 'Ideas',
+              fromValue: totalCount,
+              actionLabel: 'Create Tasks',
+              toLabel: 'Tasks',
+              toValue: ideas.filter(i => i.status === 'queued' || i.status === 'completed').length,
+              toHref: '/writer/tasks',
+              progress: totalCount > 0 ? Math.round((ideas.filter(i => i.status === 'queued' || i.status === 'completed').length / totalCount) * 100) : 0,
               color: 'amber',
             },
-            hint: ideas.filter(i => i.status === 'new').length > 0
-              ? `${ideas.filter(i => i.status === 'new').length} ideas ready to become tasks`
-              : 'All ideas converted to tasks!',
-          },
-          // Widget 2: Module Stats (Planner Pipeline)
-          moduleStats: {
-            title: 'Planner Module',
-            pipeline: [
-              {
-                fromLabel: 'Keywords',
-                fromValue: 0,
-                fromHref: '/planner/keywords',
-                actionLabel: 'Auto Cluster',
-                toLabel: 'Clusters',
-                toValue: clusters.length,
-                toHref: '/planner/clusters',
-                progress: 100,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Clusters',
-                fromValue: clusters.length,
-                fromHref: '/planner/clusters',
-                actionLabel: 'Generate Ideas',
-                toLabel: 'Ideas',
-                toValue: totalCount,
-                progress: 100,
-                color: 'green',
-              },
-              {
-                fromLabel: 'Ideas',
-                fromValue: totalCount,
-                actionLabel: 'Create Tasks',
-                toLabel: 'Tasks',
-                toValue: ideas.filter(i => i.status === 'queued' || i.status === 'completed').length,
-                toHref: '/writer/tasks',
-                progress: totalCount > 0 ? Math.round((ideas.filter(i => i.status !== 'new').length / totalCount) * 100) : 0,
-                color: 'amber',
-              },
-            ],
-            links: [
-              { label: 'Keywords', href: '/planner/keywords' },
-              { label: 'Clusters', href: '/planner/clusters' },
-              { label: 'Ideas', href: '/planner/ideas' },
-            ],
-          },
-          // Widget 3: Completion Stats
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Clusters', value: clusters.length, color: 'green' },
-              { label: 'Ideas', value: totalCount, color: 'amber' },
-              { label: 'In Tasks', value: ideas.filter(i => i.status !== 'new').length, color: 'purple' },
-            ],
-            writerItems: [
-              { label: 'Content', value: ideas.filter(i => i.status === 'completed').length, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
-              { label: 'Published', value: 0, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
+          ],
+          links: [
+            { label: 'Keywords', href: '/planner/keywords' },
+            { label: 'Clusters', href: '/planner/clusters' },
+            { label: 'Ideas', href: '/planner/ideas' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
+            { label: 'Clusters Created', value: clusters.length, color: 'green' },
+            { label: 'Ideas Generated', value: totalCount, color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: ideas.filter(i => i.status === 'completed').length, color: 'blue' },
+            { label: 'Images Created', value: 0, color: 'purple' },
+            { label: 'Published', value: 0, color: 'green' },
+          ],
+          analyticsHref: '/account/usage',
         }}
       />
 

frontend/src/pages/Planner/Keywords.tsx

@@ -25,7 +25,7 @@ import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -704,89 +704,84 @@ export default function Keywords() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
-      <ModuleMetricsFooter
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
         submoduleColor="blue"
-        threeWidgetLayout={{
-          // Widget 1: Page Progress
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'blue',
-            metrics: [
-              { label: 'Keywords', value: totalCount },
-              { label: 'Clustered', value: keywords.filter(k => k.cluster_id).length, percentage: `${totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0}%` },
-              { label: 'Unmapped', value: keywords.filter(k => !k.cluster_id).length },
-              { label: 'Volume', value: `${(keywords.reduce((sum, k) => sum + (k.volume || 0), 0) / 1000).toFixed(1)}K` },
-            ],
-            progress: {
-              value: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
-              label: 'Clustered',
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'blue',
+          metrics: [
+            { label: 'Keywords', value: totalCount },
+            { label: 'Clustered', value: keywords.filter(k => k.cluster_id).length, percentage: `${totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0}%` },
+            { label: 'Unmapped', value: keywords.filter(k => !k.cluster_id).length },
+            { label: 'Volume', value: `${(keywords.reduce((sum, k) => sum + (k.volume || 0), 0) / 1000).toFixed(1)}K` },
+          ],
+          progress: {
+            value: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
+            label: 'Clustered',
+            color: 'blue',
+          },
+          hint: keywords.filter(k => !k.cluster_id).length > 0
+            ? `${keywords.filter(k => !k.cluster_id).length} keywords ready to cluster`
+            : 'All keywords clustered!',
+        }}
+        moduleStats={{
+          title: 'Planner Module',
+          pipeline: [
+            {
+              fromLabel: 'Keywords',
+              fromValue: totalCount,
+              actionLabel: 'Auto Cluster',
+              toLabel: 'Clusters',
+              toValue: clusters.length,
+              toHref: '/planner/clusters',
+              progress: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
               color: 'blue',
             },
-            hint: keywords.filter(k => !k.cluster_id).length > 0 
-              ? `${keywords.filter(k => !k.cluster_id).length} keywords ready to cluster`
-              : 'All keywords clustered!',
-          },
-          // Widget 2: Module Stats (Planner Pipeline)
-          moduleStats: {
-            title: 'Planner Module',
-            pipeline: [
-              {
-                fromLabel: 'Keywords',
-                fromValue: totalCount,
-                actionLabel: 'Auto Cluster',
-                toLabel: 'Clusters',
-                toValue: clusters.length,
-                toHref: '/planner/clusters',
-                progress: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Clusters',
-                fromValue: clusters.length,
-                fromHref: '/planner/clusters',
-                actionLabel: 'Generate Ideas',
-                toLabel: 'Ideas',
-                toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-                toHref: '/planner/ideas',
-                progress: clusters.length > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / clusters.length) * 100) : 0,
-                color: 'green',
-              },
-              {
-                fromLabel: 'Ideas',
-                fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-                fromHref: '/planner/ideas',
-                actionLabel: 'Create Tasks',
-                toLabel: 'Tasks',
-                toValue: 0,
-                toHref: '/writer/tasks',
-                progress: 0,
-                color: 'amber',
-              },
-            ],
-            links: [
-              { label: 'Keywords', href: '/planner/keywords' },
-              { label: 'Clusters', href: '/planner/clusters' },
-              { label: 'Ideas', href: '/planner/ideas' },
-            ],
-          },
-          // Widget 3: Completion Stats
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Keywords', value: keywords.filter(k => k.cluster_id).length, color: 'blue' },
-              { label: 'Clusters', value: clusters.length, color: 'green' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Content', value: 0, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
-              { label: 'Published', value: 0, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
+            {
+              fromLabel: 'Clusters',
+              fromValue: clusters.length,
+              fromHref: '/planner/clusters',
+              actionLabel: 'Generate Ideas',
+              toLabel: 'Ideas',
+              toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
+              toHref: '/planner/ideas',
+              progress: clusters.length > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / clusters.length) * 100) : 0,
+              color: 'green',
+            },
+            {
+              fromLabel: 'Ideas',
+              fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
+              fromHref: '/planner/ideas',
+              actionLabel: 'Create Tasks',
+              toLabel: 'Tasks',
+              toValue: 0,
+              toHref: '/writer/tasks',
+              progress: 0,
+              color: 'amber',
+            },
+          ],
+          links: [
+            { label: 'Keywords', href: '/planner/keywords' },
+            { label: 'Clusters', href: '/planner/clusters' },
+            { label: 'Ideas', href: '/planner/ideas' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: keywords.filter(k => k.cluster_id).length, color: 'blue' },
+            { label: 'Clusters Created', value: clusters.length, color: 'green' },
+            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: 0, color: 'blue' },
+            { label: 'Images Created', value: 0, color: 'purple' },
+            { label: 'Published', value: 0, color: 'green' },
+          ],
+          creditsUsed: 0,
+          operationsCount: 0,
+          analyticsHref: '/account/usage',
         }}
       />
 

frontend/src/pages/Sites/Dashboard.tsx

@@ -7,13 +7,15 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
 import PageHeader from '../../components/common/PageHeader';
-import ComponentCard from '../../components/common/ComponentCard';
-import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAPI, fetchSiteSectors } from '../../services/api';
 import SiteSetupChecklist from '../../components/sites/SiteSetupChecklist';
 import { integrationApi } from '../../services/integration.api';
+import SiteConfigWidget from '../../components/dashboard/SiteConfigWidget';
+import OperationsCostsWidget from '../../components/dashboard/OperationsCostsWidget';
+import CreditAvailabilityWidget from '../../components/dashboard/CreditAvailabilityWidget';
+import { useBillingStore } from '../../store/billingStore';
 import { 
   FileIcon, 
   PlugInIcon, 
@@ -21,7 +23,6 @@ import {
   BoltIcon,
   PageIcon,
   ArrowRightIcon,
-  ArrowUpIcon
 } from '../../icons';
 
 interface Site {
@@ -42,28 +43,46 @@ interface Site {
 interface SiteSetupState {
   hasIndustry: boolean;
   hasSectors: boolean;
+  sectorsCount: number;
   hasWordPressIntegration: boolean;
   hasKeywords: boolean;
+  keywordsCount: number;
+  hasAuthorProfiles: boolean;
+  authorProfilesCount: number;
+}
+
+interface OperationStat {
+  type: 'clustering' | 'ideas' | 'content' | 'images';
+  count: number;
+  creditsUsed: number;
+  avgCreditsPerOp: number;
 }
 
 export default function SiteDashboard() {
   const { id: siteId } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const toast = useToast();
+  const { balance, loadBalance } = useBillingStore();
   const [site, setSite] = useState<Site | null>(null);
   const [setupState, setSetupState] = useState<SiteSetupState>({
     hasIndustry: false,
     hasSectors: false,
+    sectorsCount: 0,
     hasWordPressIntegration: false,
     hasKeywords: false,
+    keywordsCount: 0,
+    hasAuthorProfiles: false,
+    authorProfilesCount: 0,
   });
+  const [operations, setOperations] = useState<OperationStat[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (siteId) {
       loadSiteData();
+      loadBalance();
     }
-  }, [siteId]);
+  }, [siteId, loadBalance]);
 
   const loadSiteData = async () => {
     try {
@@ -79,9 +98,11 @@ export default function SiteDashboard() {
         
         // Load sectors
         let hasSectors = false;
+        let sectorsCount = 0;
         try {
           const sectors = await fetchSiteSectors(Number(siteId));
           hasSectors = sectors && sectors.length > 0;
+          sectorsCount = sectors?.length || 0;
         } catch (err) {
           console.log('Could not load sectors');
         }
@@ -97,20 +118,47 @@ export default function SiteDashboard() {
         
         // Check keywords - try to load keywords for this site
         let hasKeywords = false;
+        let keywordsCount = 0;
         try {
           const { fetchKeywords } = await import('../../services/api');
           const keywordsData = await fetchKeywords({ site_id: Number(siteId), page_size: 1 });
           hasKeywords = keywordsData?.results?.length > 0 || keywordsData?.count > 0;
+          keywordsCount = keywordsData?.count || 0;
         } catch (err) {
           // No keywords is fine
         }
+
+        // Check author profiles
+        let hasAuthorProfiles = false;
+        let authorProfilesCount = 0;
+        try {
+          const authorsData = await fetchAPI(`/v1/thinker/author-profiles/?site_id=${siteId}&page_size=1`);
+          hasAuthorProfiles = authorsData?.count > 0;
+          authorProfilesCount = authorsData?.count || 0;
+        } catch (err) {
+          // No profiles is fine
+        }
         
         setSetupState({
           hasIndustry,
           hasSectors,
+          sectorsCount,
           hasWordPressIntegration,
           hasKeywords,
+          keywordsCount,
+          hasAuthorProfiles,
+          authorProfilesCount,
         });
+
+        // Load operation stats (mock data for now - would come from backend)
+        // In real implementation, fetch from /api/v1/dashboard/site/{siteId}/operations/
+        const mockOperations: OperationStat[] = [
+          { type: 'clustering', count: 8, creditsUsed: 80, avgCreditsPerOp: 10 },
+          { type: 'ideas', count: 12, creditsUsed: 24, avgCreditsPerOp: 2 },
+          { type: 'content', count: 28, creditsUsed: 1400, avgCreditsPerOp: 50 },
+          { type: 'images', count: 45, creditsUsed: 225, avgCreditsPerOp: 5 },
+        ];
+        setOperations(mockOperations);
       }
     } catch (error: any) {
       toast.error(`Failed to load site data: ${error.message}`);
@@ -185,6 +233,28 @@ export default function SiteDashboard() {
         />
       </div>
 
+      {/* Site Insights - 3 Column Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+        <SiteConfigWidget 
+          setupState={{
+            hasIndustry: setupState.hasIndustry,
+            sectorsCount: setupState.sectorsCount,
+            hasWordPressIntegration: setupState.hasWordPressIntegration,
+            keywordsCount: setupState.keywordsCount,
+            authorProfilesCount: setupState.authorProfilesCount
+          }}
+          siteId={Number(siteId)}
+        />
+        
+        <OperationsCostsWidget operations={operations} siteId={Number(siteId)} />
+        
+        <CreditAvailabilityWidget 
+          availableCredits={balance?.credits_remaining ?? 0} 
+          totalCredits={balance?.plan_credits_per_month ?? 0}
+          loading={loading}
+        />
+      </div>
+
       {/* Quick Actions */}
       <ComponentCard title="Quick Actions" desc="Common site management tasks">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

frontend/src/pages/Thinker/AuthorProfiles.tsx

@@ -105,7 +105,6 @@ export default function AuthorProfiles() {
         title="Writing Styles" 
         badge={{ icon: <UserIcon />, color: 'blue' }}
         breadcrumb="Thinker / Author Profiles"
-        selectorVisibility="none"
       />
       <div className="mb-6 flex justify-between items-center">
         <Button onClick={handleCreate} variant="primary">

frontend/src/pages/Thinker/Dashboard.tsx

@@ -147,10 +147,7 @@ export default function ThinkerDashboard() {
   return (
     <>
       <PageMeta title="Strategy Dashboard - IGNY8" description="Manage your content strategy" />
-      <PageHeader 
-        title="Strategy Dashboard" 
-        selectorVisibility="none"
-      />
+      <PageHeader title="Strategy Dashboard" />
 
       <div className="space-y-6">
         {/* Key Metrics */}

frontend/src/pages/Thinker/ImageTesting.tsx

@@ -11,7 +11,6 @@ export default function ImageTesting() {
         title="Image Settings" 
         badge={{ icon: <ImageIcon />, color: 'indigo' }}
         breadcrumb="Thinker / Image Testing"
-        selectorVisibility="none"
       />
       <ComponentCard title="Coming Soon" desc="AI image testing">
         <div className="text-center py-8">

frontend/src/pages/Thinker/Prompts.tsx

@@ -205,7 +205,6 @@ export default function Prompts() {
         title="Prompt Library" 
         badge={{ icon: <BoltIcon />, color: 'orange' }}
         breadcrumb="Thinker / Prompts"
-        selectorVisibility="none"
       />
       <div className="p-6">
 

frontend/src/pages/Thinker/Strategies.tsx

@@ -11,7 +11,6 @@ export default function Strategies() {
         title="Content Plans" 
         badge={{ icon: <ShootingStarIcon />, color: 'purple' }}
         breadcrumb="Thinker / Strategies"
-        selectorVisibility="none"
       />
       <ComponentCard title="Coming Soon" desc="Content strategies">
         <div className="text-center py-8">

frontend/src/pages/Writer/Approved.tsx

@@ -17,7 +17,8 @@ import {
   bulkDeleteContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { CheckCircleIcon, BoltIcon } from '../../icons';
+import { FileIcon, CheckCircleIcon, BoltIcon } from '../../icons';
+import { RocketLaunchIcon } from '@heroicons/react/24/outline';
 import { createApprovedPageConfig } from '../../config/pages/approved.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
@@ -357,87 +358,29 @@ export default function Approved() {
         getItemDisplayName={(row: Content) => row.title || `Content #${row.id}`}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Module Metrics Footer */}
       <ModuleMetricsFooter
-        submoduleColor="green"
-        threeWidgetLayout={{
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'green',
-            metrics: [
-              { label: 'Total Approved', value: totalCount },
-              { label: 'On Site', value: content.filter(c => c.external_id).length, percentage: `${totalCount > 0 ? Math.round((content.filter(c => c.external_id).length / totalCount) * 100) : 0}%` },
-              { label: 'Pending Publish', value: content.filter(c => !c.external_id).length },
-              { label: 'This Page', value: content.length },
-            ],
-            progress: {
-              label: 'Published to Site',
-              value: totalCount > 0 ? Math.round((content.filter(c => c.external_id).length / totalCount) * 100) : 0,
-              color: 'green',
-            },
-            hint: content.filter(c => !c.external_id).length > 0
-              ? `${content.filter(c => !c.external_id).length} items ready for site publishing`
-              : 'All approved content published!',
+        metrics={[
+          {
+            title: 'Approved Content',
+            value: content.length.toLocaleString(),
+            subtitle: 'ready for publishing',
+            icon: <CheckCircleIcon className="w-5 h-5" />,
+            accentColor: 'green',
           },
-          moduleStats: {
-            title: 'Writer Module',
-            pipeline: [
-              {
-                fromLabel: 'Tasks',
-                fromValue: 0,
-                fromHref: '/writer/tasks',
-                actionLabel: 'Generate Content',
-                toLabel: 'Drafts',
-                toValue: 0,
-                toHref: '/writer/content',
-                progress: 100,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Drafts',
-                fromValue: 0,
-                fromHref: '/writer/content',
-                actionLabel: 'Generate Images',
-                toLabel: 'Images',
-                toValue: 0,
-                toHref: '/writer/images',
-                progress: 100,
-                color: 'purple',
-              },
-              {
-                fromLabel: 'Ready',
-                fromValue: 0,
-                fromHref: '/writer/review',
-                actionLabel: 'Review & Publish',
-                toLabel: 'Published',
-                toValue: totalCount,
-                progress: totalCount > 0 ? Math.round((content.filter(c => c.external_id).length / totalCount) * 100) : 0,
-                color: 'green',
-              },
-            ],
-            links: [
-              { label: 'Tasks', href: '/writer/tasks' },
-              { label: 'Content', href: '/writer/content' },
-              { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
-            ],
-          },
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Keywords', value: 0, color: 'blue' },
-              { label: 'Clusters', value: 0, color: 'green' },
-              { label: 'Ideas', value: 0, color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Content', value: 0, color: 'purple' },
-              { label: 'Images', value: 0, color: 'amber' },
-              { label: 'Published', value: content.filter(c => c.external_id).length, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
+          {
+            title: 'Published to Site',
+            value: content.filter(c => c.external_id).length.toLocaleString(),
+            subtitle: 'on WordPress',
+            icon: <RocketLaunchIcon className="w-5 h-5" />,
+            accentColor: 'blue',
+            href: '/writer/approved',
           },
+        ]}
+        progress={{
+          label: 'Site Publishing Progress',
+          value: totalCount > 0 ? Math.round((content.filter(c => c.external_id).length / totalCount) * 100) : 0,
+          color: 'success',
         }}
       />
     </>

frontend/src/pages/Writer/Content.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import { 
   fetchContent,
@@ -16,13 +16,14 @@ import {
 } from '../../services/api';
 import { optimizerApi } from '../../api/optimizer.api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
+import { FileIcon, TaskIcon, CheckCircleIcon, ArrowRightIcon } from '../../icons';
 import { createContentPageConfig } from '../../config/pages/content.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 import { PencilSquareIcon } from '@heroicons/react/24/outline';
 
 export default function Content() {
@@ -274,86 +275,82 @@ export default function Content() {
         getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
-      <ModuleMetricsFooter
-        submoduleColor="purple"
-        threeWidgetLayout={{
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'purple',
-            metrics: [
-              { label: 'Total Content', value: totalCount },
-              { label: 'Draft', value: content.filter(c => c.status === 'draft').length },
-              { label: 'In Review', value: content.filter(c => c.status === 'review').length },
-              { label: 'Published', value: content.filter(c => c.status === 'published').length, percentage: `${totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0}%` },
-            ],
-            progress: {
-              label: 'Published',
-              value: totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0,
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
+        submoduleColor="blue"
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'blue',
+          metrics: [
+            { label: 'Drafts', value: content.filter(c => c.status === 'draft').length },
+            { label: 'Has Images', value: content.filter(c => c.has_generated_images).length, percentage: `${content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0}%` },
+            { label: 'In Review', value: content.filter(c => c.status === 'review').length },
+            { label: 'Published', value: content.filter(c => c.status === 'published').length },
+          ],
+          progress: {
+            value: content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0,
+            label: 'Have Images',
+            color: 'blue',
+          },
+          hint: content.filter(c => c.status === 'draft' && !c.has_generated_images).length > 0
+            ? `${content.filter(c => c.status === 'draft' && !c.has_generated_images).length} drafts need images before review`
+            : 'All drafts have images!',
+        }}
+        moduleStats={{
+          title: 'Writer Module',
+          pipeline: [
+            {
+              fromLabel: 'Tasks',
+              fromValue: totalCount,
+              fromHref: '/writer/tasks',
+              actionLabel: 'Generate Content',
+              toLabel: 'Drafts',
+              toValue: content.filter(c => c.status === 'draft').length,
+              progress: 100,
+              color: 'blue',
+            },
+            {
+              fromLabel: 'Drafts',
+              fromValue: content.filter(c => c.status === 'draft').length,
+              actionLabel: 'Generate Images',
+              toLabel: 'Images',
+              toValue: content.filter(c => c.has_generated_images).length,
+              toHref: '/writer/images',
+              progress: content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0,
+              color: 'purple',
+            },
+            {
+              fromLabel: 'Ready',
+              fromValue: content.filter(c => c.status === 'review').length,
+              fromHref: '/writer/review',
+              actionLabel: 'Review & Publish',
+              toLabel: 'Published',
+              toValue: content.filter(c => c.status === 'published').length,
+              toHref: '/writer/published',
+              progress: content.filter(c => c.status === 'review').length > 0 ? Math.round((content.filter(c => c.status === 'published').length / (content.filter(c => c.status === 'review').length + content.filter(c => c.status === 'published').length)) * 100) : 0,
               color: 'green',
             },
-            hint: content.filter(c => c.status === 'draft').length > 0
-              ? `${content.filter(c => c.status === 'draft').length} drafts need images before review`
-              : 'All content processed!',
-          },
-          moduleStats: {
-            title: 'Writer Module',
-            pipeline: [
-              {
-                fromLabel: 'Tasks',
-                fromValue: totalCount,
-                fromHref: '/writer/tasks',
-                actionLabel: 'Generate Content',
-                toLabel: 'Drafts',
-                toValue: content.filter(c => c.status === 'draft').length,
-                progress: 100,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Drafts',
-                fromValue: content.filter(c => c.status === 'draft').length,
-                actionLabel: 'Generate Images',
-                toLabel: 'Images',
-                toValue: 0,
-                toHref: '/writer/images',
-                progress: totalCount > 0 ? Math.round((content.filter(c => c.status !== 'draft').length / totalCount) * 100) : 0,
-                color: 'purple',
-              },
-              {
-                fromLabel: 'Ready',
-                fromValue: content.filter(c => c.status === 'review').length,
-                fromHref: '/writer/review',
-                actionLabel: 'Review & Publish',
-                toLabel: 'Published',
-                toValue: content.filter(c => c.status === 'published').length,
-                toHref: '/writer/approved',
-                progress: totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0,
-                color: 'green',
-              },
-            ],
-            links: [
-              { label: 'Tasks', href: '/writer/tasks' },
-              { label: 'Content', href: '/writer/content' },
-              { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
-            ],
-          },
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Keywords', value: 0, color: 'blue' },
-              { label: 'Clusters', value: 0, color: 'green' },
-              { label: 'Ideas', value: 0, color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Content', value: totalCount, color: 'purple' },
-              { label: 'Images', value: 0, color: 'amber' },
-              { label: 'Published', value: content.filter(c => c.status === 'published').length, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
+          ],
+          links: [
+            { label: 'Tasks', href: '/writer/tasks' },
+            { label: 'Content', href: '/writer/content' },
+            { label: 'Images', href: '/writer/images' },
+            { label: 'Published', href: '/writer/published' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: 0, color: 'blue' },
+            { label: 'Clusters Created', value: 0, color: 'green' },
+            { label: 'Ideas Generated', value: 0, color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: totalCount, color: 'blue' },
+            { label: 'Images Created', value: content.filter(c => c.has_generated_images).length, color: 'purple' },
+            { label: 'Published', value: content.filter(c => c.status === 'published').length, color: 'green' },
+          ],
+          analyticsHref: '/account/usage',
         }}
       />
 

frontend/src/pages/Writer/Review.tsx

@@ -455,86 +455,15 @@ export default function Review() {
         onRowAction={handleRowAction}
       />
       <ModuleMetricsFooter
-        submoduleColor="amber"
-        threeWidgetLayout={{
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'amber',
-            metrics: [
-              { label: 'In Review', value: totalCount },
-              { label: 'This Page', value: content.length },
-              { label: 'Ready', value: content.filter(c => c.word_count && c.word_count > 0).length, percentage: `${totalCount > 0 ? Math.round((content.filter(c => c.word_count && c.word_count > 0).length / totalCount) * 100) : 0}%` },
-              { label: 'Pending', value: content.filter(c => !c.word_count || c.word_count === 0).length },
-            ],
-            progress: {
-              label: 'Ready for Approval',
-              value: totalCount > 0 ? Math.round((content.filter(c => c.word_count && c.word_count > 0).length / totalCount) * 100) : 0,
-              color: 'amber',
-            },
-            hint: totalCount > 0
-              ? `${totalCount} items in review queue awaiting approval`
-              : 'No items in review queue',
+        metrics={[
+          {
+            title: 'Ready to Publish',
+            value: content.length,
+            subtitle: 'Total review items',
+            icon: <CheckCircleIcon className="w-5 h-5" />,
+            accentColor: 'blue',
           },
-          moduleStats: {
-            title: 'Writer Module',
-            pipeline: [
-              {
-                fromLabel: 'Tasks',
-                fromValue: 0,
-                fromHref: '/writer/tasks',
-                actionLabel: 'Generate Content',
-                toLabel: 'Drafts',
-                toValue: 0,
-                toHref: '/writer/content',
-                progress: 100,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Drafts',
-                fromValue: 0,
-                fromHref: '/writer/content',
-                actionLabel: 'Generate Images',
-                toLabel: 'Images',
-                toValue: 0,
-                toHref: '/writer/images',
-                progress: 100,
-                color: 'purple',
-              },
-              {
-                fromLabel: 'Ready',
-                fromValue: totalCount,
-                actionLabel: 'Review & Publish',
-                toLabel: 'Published',
-                toValue: 0,
-                toHref: '/writer/approved',
-                progress: 0,
-                color: 'green',
-              },
-            ],
-            links: [
-              { label: 'Tasks', href: '/writer/tasks' },
-              { label: 'Content', href: '/writer/content' },
-              { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
-            ],
-          },
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Keywords', value: 0, color: 'blue' },
-              { label: 'Clusters', value: 0, color: 'green' },
-              { label: 'Ideas', value: 0, color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Content', value: 0, color: 'purple' },
-              { label: 'In Review', value: totalCount, color: 'amber' },
-              { label: 'Published', value: 0, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
-        }}
+        ]}
       />
     </>
   );

frontend/src/pages/Writer/Tasks.tsx

@@ -30,7 +30,7 @@ import { createTasksPageConfig } from '../../config/pages/tasks.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
 
 export default function Tasks() {
@@ -467,89 +467,83 @@ export default function Tasks() {
           }}
         />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
-      <ModuleMetricsFooter
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
         submoduleColor="blue"
-        threeWidgetLayout={{
-          // Widget 1: Page Progress (Tasks)
-          pageProgress: {
-            title: 'Page Progress',
-            submoduleColor: 'blue',
-            metrics: [
-              { label: 'Total', value: totalCount },
-              { label: 'Complete', value: tasks.filter(t => t.status === 'completed').length, percentage: `${totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0}%` },
-              { label: 'Queue', value: tasks.filter(t => t.status === 'queued').length },
-              { label: 'Processing', value: tasks.filter(t => t.status === 'in_progress').length },
-            ],
-            progress: {
-              value: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
-              label: 'Generated',
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'blue',
+          metrics: [
+            { label: 'Total', value: totalCount },
+            { label: 'Complete', value: tasks.filter(t => t.status === 'completed').length, percentage: `${totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0}%` },
+            { label: 'Queue', value: tasks.filter(t => t.status === 'queued').length },
+            { label: 'Processing', value: tasks.filter(t => t.status === 'in_progress').length },
+          ],
+          progress: {
+            value: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
+            label: 'Generated',
+            color: 'blue',
+          },
+          hint: tasks.filter(t => t.status === 'queued').length > 0
+            ? `${tasks.filter(t => t.status === 'queued').length} tasks in queue for content generation`
+            : 'All tasks processed!',
+        }}
+        moduleStats={{
+          title: 'Writer Module',
+          pipeline: [
+            {
+              fromLabel: 'Tasks',
+              fromValue: totalCount,
+              actionLabel: 'Generate Content',
+              toLabel: 'Drafts',
+              toValue: tasks.filter(t => t.status === 'completed').length,
+              toHref: '/writer/content',
+              progress: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
               color: 'blue',
             },
-            hint: tasks.filter(t => t.status === 'queued').length > 0
-              ? `${tasks.filter(t => t.status === 'queued').length} tasks in queue for content generation`
-              : 'All tasks processed!',
-          },
-          // Widget 2: Module Stats (Writer Pipeline)
-          moduleStats: {
-            title: 'Writer Module',
-            pipeline: [
-              {
-                fromLabel: 'Tasks',
-                fromValue: totalCount,
-                actionLabel: 'Generate Content',
-                toLabel: 'Drafts',
-                toValue: tasks.filter(t => t.status === 'completed').length,
-                toHref: '/writer/content',
-                progress: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
-                color: 'blue',
-              },
-              {
-                fromLabel: 'Drafts',
-                fromValue: tasks.filter(t => t.status === 'completed').length,
-                fromHref: '/writer/content',
-                actionLabel: 'Generate Images',
-                toLabel: 'Images',
-                toValue: 0,
-                toHref: '/writer/images',
-                progress: 0,
-                color: 'purple',
-              },
-              {
-                fromLabel: 'Ready',
-                fromValue: 0,
-                fromHref: '/writer/review',
-                actionLabel: 'Review & Publish',
-                toLabel: 'Published',
-                toValue: 0,
-                toHref: '/writer/approved',
-                progress: 0,
-                color: 'green',
-              },
-            ],
-            links: [
-              { label: 'Tasks', href: '/writer/tasks' },
-              { label: 'Content', href: '/writer/content' },
-              { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
-            ],
-          },
-          // Widget 3: Completion Stats
-          completion: {
-            title: 'Workflow Completion',
-            plannerItems: [
-              { label: 'Clusters', value: clusters.length, color: 'green' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
-            ],
-            writerItems: [
-              { label: 'Tasks', value: totalCount, color: 'blue' },
-              { label: 'Content', value: tasks.filter(t => t.status === 'completed').length, color: 'purple' },
-              { label: 'Published', value: 0, color: 'green' },
-            ],
-            creditsUsed: 0,
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
+            {
+              fromLabel: 'Drafts',
+              fromValue: tasks.filter(t => t.status === 'completed').length,
+              fromHref: '/writer/content',
+              actionLabel: 'Generate Images',
+              toLabel: 'Images',
+              toValue: 0,
+              toHref: '/writer/images',
+              progress: 0,
+              color: 'purple',
+            },
+            {
+              fromLabel: 'Ready',
+              fromValue: 0,
+              fromHref: '/writer/review',
+              actionLabel: 'Review & Publish',
+              toLabel: 'Published',
+              toValue: 0,
+              toHref: '/writer/published',
+              progress: 0,
+              color: 'green',
+            },
+          ],
+          links: [
+            { label: 'Tasks', href: '/writer/tasks' },
+            { label: 'Content', href: '/writer/content' },
+            { label: 'Images', href: '/writer/images' },
+            { label: 'Published', href: '/writer/published' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
+            { label: 'Clusters Created', value: clusters.length, color: 'green' },
+            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: tasks.filter(t => t.status === 'completed').length, color: 'blue' },
+            { label: 'Images Created', value: 0, color: 'purple' },
+            { label: 'Published', value: 0, color: 'green' },
+          ],
+          analyticsHref: '/account/usage',
         }}
       />
 

frontend/src/pages/account/AccountSettingsPage.tsx

@@ -13,7 +13,6 @@ import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import Badge from '../../components/ui/badge/Badge';
 import PageMeta from '../../components/common/PageMeta';
-import { usePageContext } from '../../context/PageContext';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { useAuthStore } from '../../store/authStore';
 import {
@@ -41,7 +40,6 @@ export default function AccountSettingsPage() {
   const toast = useToast();
   const location = useLocation();
   const { user, refreshUser } = useAuthStore();
-  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
@@ -49,16 +47,6 @@ export default function AccountSettingsPage() {
   const [error, setError] = useState<string>('');
   const [success, setSuccess] = useState<string>('');
 
-  // Set page context for AppHeader - no selectors for account pages per audit Section 1
-  useEffect(() => {
-    setPageInfo({
-      title: 'Account Settings',
-      badge: { icon: <Settings className="w-4 h-4" />, color: 'indigo' },
-      selectorVisibility: 'none',
-    });
-    return () => setPageInfo(null);
-  }, [setPageInfo]);
-
   // Account settings state
   const [settings, setSettings] = useState<AccountSettings | null>(null);
   const [accountForm, setAccountForm] = useState({

frontend/src/pages/account/ContentSettingsPage.tsx

@@ -17,6 +17,8 @@ import SelectDropdown from '../../components/form/SelectDropdown';
 import Label from '../../components/form/Label';
 import Checkbox from '../../components/form/input/Checkbox';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import { BoxCubeIcon } from '../../icons';
 
 type TabType = 'content' | 'publishing' | 'images';
 
@@ -325,19 +327,16 @@ export default function ContentSettingsPage() {
   return (
     <div className="p-6">
       <PageMeta title="Content Settings" description="Configure your content generation settings" />
-      
-      {/* Page Header */}
-      <div className="mb-6">
-        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
-          Content Settings / {tabTitles[activeTab]}
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          {activeTab === 'content' && 'Customize how your articles are written'}
-          {activeTab === 'publishing' && 'Configure automatic publishing settings'}
-          {activeTab === 'images' && 'Set up AI image generation preferences'}
-        </p>
-      </div>
+      <PageHeader 
+        title={tabTitles[activeTab]}
+        description={
+          activeTab === 'content' ? 'Customize how your articles are written' :
+          activeTab === 'publishing' ? 'Configure automatic publishing settings' :
+          'Set up AI image generation preferences'
+        }
+        badge={{ icon: <BoxCubeIcon />, color: 'blue' }}
+        parent="Content Settings"
+      />
 
       {/* Tab Content */}
       <div className="mt-6">

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -16,7 +16,6 @@ import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { usePageContext } from '../../context/PageContext';
 import { PricingPlan } from '../../components/ui/pricing-table';
 import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
 import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
@@ -60,7 +59,6 @@ function getTabFromPath(pathname: string): TabType {
 
 export default function PlansAndBillingPage() {
   const location = useLocation();
-  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
@@ -69,16 +67,6 @@ export default function PlansAndBillingPage() {
   const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
 
-  // Set page context for AppHeader - no selectors for billing pages per audit Section 1
-  useEffect(() => {
-    setPageInfo({
-      title: 'Plans & Billing',
-      badge: { icon: <CreditCard className="w-4 h-4" />, color: 'purple' },
-      selectorVisibility: 'none',
-    });
-    return () => setPageInfo(null);
-  }, [setPageInfo]);
-
   // Data states
   const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
   const [packages, setPackages] = useState<CreditPackage[]>([]);

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -8,7 +8,6 @@ import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
-import { usePageContext } from '../../context/PageContext';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getUsageAnalytics, UsageAnalytics, getCreditBalance, type CreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
@@ -29,7 +28,6 @@ function getTabFromPath(pathname: string): TabType {
 export default function UsageAnalyticsPage() {
   const toast = useToast();
   const location = useLocation();
-  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
@@ -37,16 +35,6 @@ export default function UsageAnalyticsPage() {
   const [loading, setLoading] = useState(true);
   const [period, setPeriod] = useState(30);
 
-  // Set page context for AppHeader - no selectors for usage pages per audit Section 1
-  useEffect(() => {
-    setPageInfo({
-      title: 'Usage & Analytics',
-      badge: { icon: <TrendingUp className="w-4 h-4" />, color: 'emerald' },
-      selectorVisibility: 'none',
-    });
-    return () => setPageInfo(null);
-  }, [setPageInfo]);
-
   useEffect(() => {
     loadData();
   }, [period]);

frontend/src/services/api.ts

@@ -2619,117 +2619,3 @@ export async function generatePageContent(
   });
 }
 
-// ==========================================
-// Dashboard Summary API
-// ==========================================
-
-export interface DashboardAttentionItem {
-  id: string;
-  type: 'pending_review' | 'setup_incomplete' | 'credits_low' | 'no_integration' | 'queued_tasks' | 'sync_failed';
-  title: string;
-  count?: number;
-  action_label: string;
-  action_url: string;
-  severity: 'info' | 'warning' | 'error';
-}
-
-export interface DashboardPipeline {
-  keywords: number;
-  clusters: number;
-  ideas: number;
-  tasks: number;
-  drafts: number;
-  review: number;
-  published: number;
-  total_content: number;
-  completion_percentage: number;
-}
-
-export interface DashboardAIOperation {
-  type: string;
-  label: string;
-  count: number;
-  credits: number;
-  tokens: number;
-}
-
-export interface DashboardAIOperations {
-  period_days: number;
-  operations: DashboardAIOperation[];
-  totals: {
-    credits: number;
-    operations: number;
-  };
-}
-
-export interface DashboardActivity {
-  id: number;
-  type: string;
-  description: string;
-  timestamp: string;
-  icon: string;
-  color: string;
-  credits: number;
-}
-
-export interface DashboardContentVelocity {
-  today: number;
-  this_week: number;
-  this_month: number;
-  daily: Array<{ date: string; count: number }>;
-  average_per_day: number;
-}
-
-export interface DashboardAutomation {
-  enabled: boolean;
-  active_count: number;
-  status: 'active' | 'inactive';
-}
-
-export interface DashboardSite {
-  id: number;
-  name: string;
-  domain: string;
-  keywords: number;
-  content: number;
-  published: number;
-  has_integration: boolean;
-  sectors_count: number;
-}
-
-export interface DashboardSummary {
-  needs_attention: DashboardAttentionItem[];
-  pipeline: DashboardPipeline;
-  ai_operations: DashboardAIOperations;
-  recent_activity: DashboardActivity[];
-  content_velocity: DashboardContentVelocity;
-  automation: DashboardAutomation;
-  sites: DashboardSite[];
-  account: {
-    credits: number;
-    name: string;
-  };
-  generated_at: string;
-}
-
-export interface DashboardSummaryFilters {
-  site_id?: number;
-  days?: number;
-}
-
-/**
- * Fetch aggregated dashboard summary in a single API call.
- * Replaces multiple sequential calls for better performance.
- */
-export async function fetchDashboardSummary(
-  filters: DashboardSummaryFilters = {}
-): Promise<DashboardSummary> {
-  const params = new URLSearchParams();
-  if (filters.site_id) params.append('site_id', String(filters.site_id));
-  if (filters.days) params.append('days', String(filters.days));
-  
-  const queryString = params.toString();
-  return fetchAPI(`/v1/account/dashboard/summary/${queryString ? `?${queryString}` : ''}`);
-}
-
-

immediate-udpates.md

@@ -0,0 +1,117 @@
+
+
+
+## Summary of Completed Work
+
+### 1. ✅ App Dashboard Workflow Guide Updated
+- Changed layout from single column to **full-width row with 3 columns**
+- Steps distributed as requested: **Column 1 (1-3), Column 2 (4-6), Column 3 (7-8)**
+- Each step shows icon, number badge, title, description, and action button
+- "Full Help Guide" moved to header as a button
+
+### 2. ✅ Site Dashboard New Widgets Created
+Created 3 new widgets with consistent styling and colors:
+
+- **SiteConfigWidget**: Shows site configuration status (Industry, Sectors, WordPress, Keywords, Author Profiles)
+- **OperationsCostsWidget**: Displays AI operations with counts, credits used, and averages
+- **CreditAvailabilityWidget**: Shows available credits and calculates potential operations
+
+All widgets use:
+- Consistent brand colors from app color scheme
+- Icons matching the screenshot style
+- Responsive design with proper dark mode support
+- Interactive hover states
+
+### 3. ✅ Layout Ready for 2-3 Column Implementation
+The new widgets are ready to be integrated into the site dashboard with a 2-3 column grid layout showing:
+- Site-specific configuration data
+- Individual operation statistics with credit costs
+- Credit availability and potential operations
+
+
+STIL Styling is laoded from paralell color ssytem not our standard
+---
+
+
+## Table 1: Pages Requiring Site/Sector Selectors (Excluding Planner & Writer Modules)
+
+| Page/Module | Site Selector | Sector Selector | Reason |
+|-------------|:-------------:|:---------------:|---------|
+| **DASHBOARD** |
+| Home | ✅ (All Sites option) | ❌ | Overview across sites - sector too granular |
+| Content Settings | ✅ | ❌ | Settings are site-level, not sector-level |
+| **AUTOMATION** |
+| Automation | ✅ | ❌ | Automation runs at site level |
+
+
+**Key Findings:**
+- **Setup Module**: Keywords page needs both selectors; Content Settings needs site only
+- **Automation**: Site selector only (automation is site-level)
+- **Linker & Optimizer**: Both selectors needed (content-specific)
+- **Admin/Billing/Account/Help**: No selectors needed (not site-specific)
+
+---
+
+## Table 2: Progress Modal Text Updates for AI Functions
+
+### Auto Cluster Keywords
+
+| Phase | Current Text | Recommended Text | Includes Count |
+|-------|-------------|------------------|:---------------:|
+| INIT | Validating keywords | Validating {count} keywords for clustering | ✅ |
+| PREP | Loading keyword data | Analyzing keyword relationships | ❌ |
+| AI_CALL | Generating clusters with Igny8 Semantic SEO Model | Grouping keywords by search intent ({count} keywords) | ✅ |
+| PARSE | Organizing clusters | Organizing {cluster_count} semantic clusters | ✅ |
+| SAVE | Saving clusters | Saving {cluster_count} clusters with {keyword_count} keywords | ✅ |
+| DONE | Clustering complete! | ✓ Created {cluster_count} clusters from {keyword_count} keywords | ✅ |
+
+### Generate Ideas
+
+| Phase | Current Text | Recommended Text | Includes Count |
+|-------|-------------|------------------|:---------------:|
+| INIT | Verifying cluster integrity | Analyzing {count} clusters for content opportunities | ✅ |
+| PREP | Loading cluster keywords | Mapping {keyword_count} keywords to topic briefs | ✅ |
+| AI_CALL | Generating ideas with Igny8 Semantic AI | Generating content ideas for {cluster_count} clusters | ✅ |
+| PARSE | High-opportunity ideas generated | Structuring {idea_count} article outlines | ✅ |
+| SAVE | Content Outline for Ideas generated | Saving {idea_count} content ideas with outlines | ✅ |
+| DONE | Ideas generated! | ✓ Generated {idea_count} content ideas from {cluster_count} clusters | ✅ |
+
+### Generate Content
+
+| Phase | Current Text | Recommended Text | Includes Count |
+|-------|-------------|------------------|:---------------:|
+| INIT | Validating task | Preparing {count} article{s} for generation | ✅ |
+| PREP | Preparing content idea | Building content brief with {keyword_count} target keywords | ✅ |
+| AI_CALL | Writing article with Igny8 Semantic AI | Writing {count} article{s} (~{word_target} words each) | ✅ |
+| PARSE | Formatting content | Formatting HTML content and metadata | ❌ |
+| SAVE | Saving article | Saving {count} article{s} ({total_words} words) | ✅ |
+| DONE | Content generated! | ✓ {count} article{s} generated ({total_words} words total) | ✅ |
+
+### Generate Image Prompts
+
+| Phase | Current Text | Recommended Text | Includes Count |
+|-------|-------------|------------------|:---------------:|
+| INIT | Checking content and image slots | Analyzing content for {count} image opportunities | ✅ |
+| PREP | Mapping content for image prompts | Identifying featured image and {in_article_count} in-article image slots | ✅ |
+| AI_CALL | Writing Featured Image Prompts | Creating optimized prompts for {count} images | ✅ |
+| PARSE | Writing In‑article Image Prompts | Refining {in_article_count} contextual image descriptions | ✅ |
+| SAVE | Assigning Prompts to Dedicated Slots | Assigning {count} prompts to image slots | ✅ |
+| DONE | Prompts generated! | ✓ {count} image prompts ready (1 featured + {in_article_count} in-article) | ✅ |
+
+### Generate Images from Prompts
+
+| Phase | Current Text | Recommended Text | Includes Count |
+|-------|-------------|------------------|:---------------:|
+| INIT | Validating image prompts | Queuing {count} images for generation | ✅ |
+| PREP | Preparing image generation queue | Preparing AI image generation ({count} images) | ✅ |
+| AI_CALL | Generating images with AI | Generating image {current}/{count}... | ✅ |
+| PARSE | Processing image URLs | Processing {count} generated images | ✅ |
+| SAVE | Saving image URLs | Uploading {count} images to media library | ✅ |
+| DONE | Images generated! | ✓ {count} images generated and saved | ✅ |
+
+**Key Improvements:**
+- ✅ All phases now include specific counts where data is available
+- ✅ More professional and informative language
+- ✅ Clear indication of progress with actual numbers
+- ✅ Success messages use checkmark (✓) for visual completion
+- ✅ Dynamic placeholders for singular/plural ({s}, {count})

to-do-s/PLAN-DASHBOARD-HOMEPAGE.md

@@ -0,0 +1,177 @@
+
+## 5. Dashboard Redesign Plan
+
+### Current Issues
+- Too much whitespace and large headings
+- Repeating same counts/metrics without different dimensions
+- Missing actionable insights
+- No AI operations analytics
+- Missing "needs attention" items
+
+### New Dashboard Design: Multi-Dimension Compact Widgets
+
+Based on Django admin reports analysis, the dashboard should show **different data dimensions** instead of repeating counts:
+
+### Dashboard Layout (Compact, Information-Dense)
+
+```
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│ ⚠ NEEDS ATTENTION (collapsible, only shows if items exist)                          │
+│ ┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐                │
+│ │ 3 pending review   │ │ WP sync failed     │ │ Setup incomplete   │                │
+│ │ [Review →]         │ │ [Retry] [Fix →]    │ │ [Complete →]       │                │
+│ └────────────────────┘ └────────────────────┘ └────────────────────┘                │
+├─────────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                      │
+│  ┌─────────────────────────────────┐  ┌─────────────────────────────────────────┐   │
+│  │ WORKFLOW PIPELINE               │  │ QUICK ACTIONS                           │   │
+│  │                                 │  │                                         │   │
+│  │ Sites → KWs → Clusters → Ideas  │  │ [+ Keywords] [⚡ Cluster] [📝 Content]  │   │
+│  │   2     156      23       67    │  │ [🖼 Images]  [✓ Review]  [🚀 Publish]   │   │
+│  │         ↓                       │  │                                         │   │
+│  │ Tasks → Drafts → Published      │  │ WORKFLOW GUIDE                          │   │
+│  │   45     28        45           │  │ 1. Add Keywords  5. Generate Content    │   │
+│  │                                 │  │ 2. Auto Cluster  6. Generate Images     │   │
+│  │ ████████████░░░ 72% Complete    │  │ 3. Generate Ideas 7. Review & Approve   │   │
+│  │                                 │  │ 4. Create Tasks  8. Publish to WP       │   │
+│  └─────────────────────────────────┘  │ [Full Help →]                           │   │
+│                                        └─────────────────────────────────────────┘   │
+│                                                                                      │
+├─────────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                      │
+│  ┌─────────────────────────────────┐  ┌─────────────────────────────────────────┐   │
+│  │ AI OPERATIONS (7d)    [▼ 30d]   │  │ RECENT ACTIVITY                         │   │
+│  │                                 │  │                                         │   │
+│  │ Operation       Count   Credits │  │ • Clustered 45 keywords → 8 clusters    │   │
+│  │ ───────────────────────────────│  │   2 hours ago                           │   │
+│  │ Clustering         8      80   │  │ • Generated 5 articles (4.2K words)     │   │
+│  │ Ideas             12      24   │  │   4 hours ago                           │   │
+│  │ Content           28    1,400  │  │ • Created 15 image prompts              │   │
+│  │ Images            45     225   │  │   Yesterday                             │   │
+│  │ ───────────────────────────────│  │ • Published "Best Running Shoes" to WP  │   │
+│  │ Total             93    1,729  │  │   Yesterday                             │   │
+│  │                                 │  │ • Added 23 keywords from seed DB        │   │
+│  │ Success Rate: 98.5%            │  │   2 days ago                            │   │
+│  │ Avg Credits/Op: 18.6           │  │                                         │   │
+│  └─────────────────────────────────┘  │ [View All Activity →]                   │   │
+│                                        └─────────────────────────────────────────┘   │
+│                                                                                      │
+├─────────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                      │
+│  ┌─────────────────────────────────┐  ┌─────────────────────────────────────────┐   │
+│  │ CONTENT VELOCITY               │  │ AUTOMATION STATUS                        │   │
+│  │                                 │  │                                         │   │
+│  │ This Week    This Month   Total │  │ ● Active  │  Schedule: Daily 9 AM      │   │
+│  │                                 │  │                                         │   │
+│  │ Articles   5      28      156   │  │ Last Run: Dec 27, 7:00 AM              │   │
+│  │ Words    4.2K    24K     156K   │  │ ├─ Clustered: 12 keywords              │   │
+│  │ Images    12      67      340   │  │ ├─ Ideas: 8 generated                   │   │
+│  │                                 │  │ ├─ Content: 5 articles                  │   │
+│  │ 📈 +23% vs last week           │  │ └─ Images: 15 created                   │   │
+│  │                                 │  │                                         │   │
+│  │ [View Analytics →]             │  │ Next Run: Dec 28, 9:00 AM               │   │
+│  └─────────────────────────────────┘  │ [Configure →] [Run Now →]               │   │
+│                                        └─────────────────────────────────────────┘   │
+│                                                                                      │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Widget Specifications
+
+#### 1. Needs Attention Bar
+- Collapsible, only visible when items exist
+- Types: `pending_review`, `sync_failed`, `setup_incomplete`, `automation_failed`
+- Compact horizontal cards with action buttons
+
+#### 2. Workflow Pipeline Widget
+- Visual flow: Sites → Keywords → Clusters → Ideas → Tasks → Drafts → Published
+- Shows counts at each stage
+- Single progress bar for overall completion
+- Clickable stage names link to respective pages
+
+#### 3. Quick Actions + Workflow Guide Widget
+- 2x3 grid of action buttons (use existing icons)
+- Compact numbered workflow guide (1-8 steps)
+- "Full Help" link to help page
+
+#### 4. AI Operations Widget (NEW - from Django Admin Reports)
+Shows data from `CreditUsageLog` model:
+```typescript
+interface AIOperationsData {
+  period: '7d' | '30d' | '90d';
+  operations: Array<{
+    type: 'clustering' | 'ideas' | 'content' | 'images';
+    count: number;
+    credits: number;
+  }>;
+  totals: {
+    count: number;
+    credits: number;
+    success_rate: number;
+    avg_credits_per_op: number;
+  };
+}
+```
+- Time period filter (7d/30d/90d dropdown)
+- Table with operation type, count, credits
+- Success rate percentage
+- Average credits per operation
+
+#### 5. Recent Activity Widget
+Shows data from `AITaskLog` and `CreditUsageLog`:
+- Last 5 significant operations
+- Timestamp relative (2 hours ago, Yesterday)
+- Clickable to navigate to relevant content
+- "View All Activity" link
+
+#### 6. Content Velocity Widget (NEW)
+Shows content production rates:
+```typescript
+interface ContentVelocityData {
+  this_week: { articles: number; words: number; images: number };
+  this_month: { articles: number; words: number; images: number };
+  total: { articles: number; words: number; images: number };
+  trend: number; // percentage vs previous period
+}
+```
+- Three time columns: This Week, This Month, Total
+- Rows: Articles, Words, Images
+- Trend indicator vs previous period
+
+#### 7. Automation Status Widget
+Shows automation run status:
+- Current status indicator (Active/Paused/Failed)
+- Schedule display
+- Last run details with stage breakdown
+- Next scheduled run
+- Configure and Run Now buttons
+
+### API Endpoint Required
+
+```python
+# GET /api/v1/dashboard/summary/
+{
+    "needs_attention": [...],
+    "pipeline": {
+        "sites": 2, "keywords": 156, "clusters": 23, 
+        "ideas": 67, "tasks": 45, "drafts": 28, "published": 45,
+        "completion_percentage": 72
+    },
+    "ai_operations": {
+        "period": "7d",
+        "operations": [...],
+        "totals": {...}
+    },
+    "recent_activity": [...],
+    "content_velocity": {...},
+    "automation": {...}
+}
+```
+
+### Implementation Notes
+
+- Use existing components from `components/ui/`
+- Use CSS tokens from `styles/tokens.css`
+- Grid layout: `grid grid-cols-1 lg:grid-cols-2 gap-4`
+- Compact widget padding: `p-4`
+- No large headings - use subtle section labels

to-do-s/PLAN-SITE-SELECTOR-SECTOR.md

@@ -0,0 +1,181 @@
+# Plan: Site & Sector Selector Configuration
+
+**Source:** COMPREHENSIVE-AUDIT-REPORT.md - Section 1  
+**Priority:** High for Planner & Writer pages  
+**Estimated Effort:** 4-6 hours
+
+---
+
+## Objective
+
+Ensure correct placement of Site Selector and Sector Selector across all pages based on data scope requirements.
+
+---
+
+## Configuration Rules
+
+| Condition | Site Selector | Sector Selector |
+|-----------|:-------------:|:---------------:|
+| Data scoped to specific site | ✅ | ❌ |
+| Data can be filtered by content category | ✅ | ✅ |
+| Page is not site-specific (account-level) | ❌ | ❌ |
+| Already in specific context (detail page) | ❌ | ❌ |
+
+---
+
+## Implementation Checklist
+
+### DASHBOARD Module
+- [ ] **Home** - Site Selector: ✅ (with "All Sites" option) | Sector: ❌
+  - Overview across sites - sector too granular for dashboard
+
+### SETUP Module
+- [ ] **Add Keywords** - Site: ✅ | Sector: ✅
+  - Keywords are site+sector specific
+- [ ] **Content Settings** - Site: ✅ | Sector: ❌
+  - Settings are site-level, not sector-level
+- [ ] **Sites List** - Site: ❌ | Sector: ❌
+  - Managing sites themselves
+- [ ] **Site Dashboard** - Site: ❌ (context) | Sector: ❌
+  - Already in specific site context
+- [ ] **Site Settings tabs** - Site: ❌ (context) | Sector: ❌
+  - Already in specific site context
+
+### PLANNER Module
+- [ ] **Keywords** - Site: ✅ | Sector: ✅
+  - Keywords organized by site+sector
+- [ ] **Clusters** - Site: ✅ | Sector: ✅
+  - Clusters organized by site+sector
+- [ ] **Cluster Detail** - Site: ❌ (context) | Sector: ❌ (context)
+  - Already in cluster context
+- [ ] **Ideas** - Site: ✅ | Sector: ✅
+  - Ideas organized by site+sector
+
+### WRITER Module
+- [ ] **Tasks/Queue** - Site: ✅ | Sector: ✅
+  - Tasks organized by site+sector
+- [ ] **Content/Drafts** - Site: ✅ | Sector: ✅
+  - Content organized by site+sector
+- [ ] **Content View** - Site: ❌ (context) | Sector: ❌ (context)
+  - Viewing specific content
+- [ ] **Images** - Site: ✅ | Sector: ✅
+  - Images tied to content by site+sector
+- [ ] **Review** - Site: ✅ | Sector: ✅
+  - Review queue by site+sector
+- [ ] **Published** - Site: ✅ | Sector: ✅
+  - Published content by site+sector
+
+### AUTOMATION Module
+- [ ] **Automation** - Site: ✅ | Sector: ❌
+  - Automation runs at site level
+
+### LINKER Module (if enabled)
+- [ ] **Content List** - Site: ✅ | Sector: ✅
+  - Linking is content-specific
+
+### OPTIMIZER Module (if enabled)
+- [ ] **Content Selector** - Site: ✅ | Sector: ✅
+  - Optimization is content-specific
+- [ ] **Analysis Preview** - Site: ❌ (context) | Sector: ❌ (context)
+  - Already in analysis context
+
+### THINKER Module (Admin)
+- [ ] **All Thinker pages** - Site: ❌ | Sector: ❌
+  - System-wide prompts/profiles
+
+### BILLING Module
+- [ ] **All Billing pages** - Site: ❌ | Sector: ❌
+  - Account-level billing data
+
+### ACCOUNT Module
+- [ ] **Account Settings** - Site: ❌ | Sector: ❌
+- [ ] **Profile** - Site: ❌ | Sector: ❌
+- [ ] **Team** - Site: ❌ | Sector: ❌
+- [ ] **Plans** - Site: ❌ | Sector: ❌
+- [ ] **Usage** - Site: ❌ | Sector: ❌
+
+### HELP Module
+- [ ] **Help Page** - Site: ❌ | Sector: ❌
+
+---
+
+## Site Setup Checklist on Site Cards
+
+**Source:** Section 6 of Audit Report
+
+### Current Status
+- ✅ `SiteSetupChecklist.tsx` component EXISTS
+- ✅ Integrated in Site Dashboard (full mode)
+- ❌ **NOT integrated in SiteCard.tsx** (compact mode)
+
+### Implementation Task
+
+**File:** `frontend/src/components/sites/SiteCard.tsx`
+
+Add compact checklist after status badges:
+
+```tsx
+<SiteSetupChecklist
+  siteId={site.id}
+  siteName={site.name}
+  hasIndustry={!!site.industry}
+  hasSectors={site.sectors_count > 0}
+  hasWordPressIntegration={!!site.wordpress_site_url}
+  hasKeywords={site.keywords_count > 0}
+  compact={true}
+/>
+```
+
+**Expected Visual:**
+```
+┌─────────────────────────────────────────┐
+│ My Website                    [Active]  │
+│ example.com                             │
+│ Industry: Tech  │  3 Sectors            │
+│ ●●●○  3/4 Setup Steps Complete          │  ← compact checklist
+│                              [Manage →] │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## Backend Requirements
+
+Ensure `SiteSerializer` returns these fields for checklist:
+- `keywords_count` - number of keywords
+- `has_integration` - boolean for WordPress integration
+- `active_sectors_count` - number of active sectors
+- `industry_name` - industry name or null
+
+**Status:** ✅ Already verified these fields are returned
+
+---
+
+## Files to Modify
+
+### Frontend
+1. `frontend/src/components/sites/SiteCard.tsx` - Add compact SiteSetupChecklist
+2. Various page files to verify/add selector configuration
+
+### Selector Components
+- `frontend/src/components/common/SiteSelector.tsx`
+- `frontend/src/components/common/SectorSelector.tsx`
+
+---
+
+## Testing Checklist
+
+- [ ] Site selector shows on all required pages
+- [ ] Sector selector shows only where data is sector-specific
+- [ ] Detail pages (Cluster Detail, Content View) have no selectors
+- [ ] Account/Billing pages have no selectors
+- [ ] SiteCard shows compact setup checklist
+- [ ] Checklist updates when site configuration changes
+
+---
+
+## Notes
+
+- The "All Sites" option on Dashboard should aggregate data across all user's sites
+- Context pages (detail views) inherit site/sector from parent navigation
+- Selector state should persist in URL params or store for deep linking

to-do-s/completted-verifications/AUDIT_VERIFICATION_SUMMARY.md

@@ -1,84 +0,0 @@
-# COMPREHENSIVE AUDIT VERIFICATION SUMMARY
-
-## Date Completed: Current Session
-
-## Overview
-
-All audit sections from COMPREHENSIVE-AUDIT-REPORT.md have been verified (excluding Section 7 which was marked as to-dos/backlog).
-
-## Verification Results
-
-| Section | Status | Verification File |
-|---------|--------|-------------------|
-| **Section 1**: Site & Sector Selectors | ✅ IMPLEMENTED | [SECTION_1_VERIFIED.md](SECTION_1_VERIFIED.md) |
-| **Section 2**: Tooltip Improvements | ✅ VERIFIED | [SECTION_2_VERIFIED.md](SECTION_2_VERIFIED.md) |
-| **Section 3**: Footer 3-Widget Layout | ✅ VERIFIED | [SECTION_3_VERIFIED.md](SECTION_3_VERIFIED.md) |
-| **Section 4**: Progress Modal Steps | ✅ VERIFIED | [SECTION_4_VERIFIED.md](SECTION_4_VERIFIED.md) |
-| **Section 5**: Dashboard Redesign | ✅ VERIFIED | [SECTION_5_VERIFIED.md](SECTION_5_VERIFIED.md) |
-| **Section 6**: Site Setup Checklist | ✅ VERIFIED | [SECTION_6_VERIFIED.md](SECTION_6_VERIFIED.md) |
-| **Section 7**: To-Do-s Audit | ⏭️ SKIPPED | Excluded per user request |
-| **Section 8**: Notification System | ✅ VERIFIED | [SECTION_8_VERIFIED.md](SECTION_8_VERIFIED.md) |
-
-## Key Implementations
-
-### Section 1: Site & Sector Selectors (NEW IMPLEMENTATION)
-- Extended PageContext with `SelectorVisibility` type ('both' | 'site-only' | 'none')
-- Updated AppHeader to conditionally render selectors
-- Updated PageHeader component with selectorVisibility prop
-- Applied to 12+ pages with appropriate visibility settings
-
-### Section 2: Tooltip Improvements (ALREADY IMPLEMENTED)
-- All 8 page config files have actionable tooltips
-- Module metrics in footer use descriptive tooltips
-- No action required - implementation verified
-
-### Section 3: Footer 3-Widget Layout (ALREADY IMPLEMENTED)
-- ModuleMetricsFooter uses CSS tokens from tokens.css
-- All 7 Planner/Writer pages use threeWidgetLayout={true}
-- CSS tokens properly defined with --color-* variables
-
-### Section 4: Progress Modal Steps (ALREADY IMPLEMENTED)
-- useProgressModal has comprehensive step parsing with getStepInfo()
-- ProgressModal has getStepsForFunction() with all AI operations
-- All phases (INIT, PREP, AI_CALL, PARSE, SAVE) defined
-
-### Section 5: Dashboard Redesign (ALREADY IMPLEMENTED)
-- NeedsAttentionBar shows collapsible alerts at dashboard top
-- CompactDashboard provides multi-widget layout
-- Full API integration with local fallback
-
-### Section 6: Site Setup Checklist (ALREADY IMPLEMENTED)
-- SiteSetupChecklist component with compact and full modes
-- Integrated in SiteCard.tsx with compact={true}
-- Backend serializer provides all required fields
-
-### Section 8: Notification System (ALREADY IMPLEMENTED)
-- NotificationDropdownNew shows real notifications
-- notificationStore manages state with Zustand
-- useProgressModal auto-adds notifications on success/failure
-
-## Audit Report Status Update
-
-The COMPREHENSIVE-AUDIT-REPORT.md had some outdated status markers:
-- Section 6: Marked as "NOT integrated in SiteCard.tsx" but IS integrated (lines 87-95)
-- All other sections accurately marked as implemented
-
-## Files Created
-
-```
-to-do-s/
-├── SECTION_1_VERIFIED.md
-├── SECTION_2_VERIFIED.md
-├── SECTION_3_VERIFIED.md
-├── SECTION_4_VERIFIED.md
-├── SECTION_5_VERIFIED.md
-├── SECTION_6_VERIFIED.md
-├── SECTION_8_VERIFIED.md
-└── AUDIT_VERIFICATION_SUMMARY.md  (this file)
-```
-
-## Conclusion
-
-**All 7 applicable audit sections are 100% implemented and working.**
-
-The codebase already had most implementations complete. Section 1 required new implementation work to add the `selectorVisibility` system to PageContext and propagate it through the component hierarchy.

to-do-s/completted-verifications/SECTION_1_VERIFIED.md

@@ -1,114 +0,0 @@
-# Section 1: Site & Sector Selector Placement - VERIFIED ✅
-
-**Date:** Implementation verified  
-**Audit Reference:** COMPREHENSIVE-AUDIT-REPORT.md Section 1
-
----
-
-## Implementation Summary
-
-Extended the PageContext system to support page-specific selector visibility in AppHeader.
-
-### Architecture Changes
-
-1. **PageContext.tsx** - Added `SelectorVisibility` type and `selectorVisibility` property to `PageInfo`
-2. **AppHeader.tsx** - Conditionally renders `SiteAndSectorSelector` based on `pageInfo.selectorVisibility`
-3. **PageHeader.tsx** - Added `selectorVisibility` prop that passes through to PageContext
-
-### SelectorVisibility Options
-
-| Value | Description | Use Case |
-|-------|-------------|----------|
-| `'both'` | Show site + sector selectors (default) | Planner, Writer pages |
-| `'site-only'` | Show only site selector | Automation, Dashboard Home |
-| `'none'` | Hide both selectors | Account, Billing, Thinker, Help |
-
----
-
-## Pages Updated
-
-### Planner Pages (Both Selectors - DEFAULT)
-- [x] Keywords.tsx - Uses PageHeader (default: 'both')
-- [x] Clusters.tsx - Uses PageHeader (default: 'both')
-- [x] Ideas.tsx - Uses PageHeader (default: 'both')
-
-### Writer Pages (Both Selectors - DEFAULT)
-- [x] Tasks.tsx - Uses PageHeader (default: 'both')
-- [x] Content.tsx - Uses PageHeader (default: 'both')
-- [x] Review.tsx - Uses PageHeader (default: 'both')
-- [x] Approved.tsx - Uses PageHeader (default: 'both')
-
-### Dashboard (Site Only)
-- [x] Home.tsx - `selectorVisibility: 'site-only'` + custom site selector with "All Sites"
-
-### Automation (Site Only)
-- [x] AutomationPage.tsx - `selectorVisibility: 'site-only'`
-
-### Account Pages (None)
-- [x] AccountSettingsPage.tsx - `selectorVisibility: 'none'`
-- [x] UsageAnalyticsPage.tsx - `selectorVisibility: 'none'`
-- [x] PlansAndBillingPage.tsx - `selectorVisibility: 'none'`
-
-### Thinker Pages (None)
-- [x] Dashboard.tsx - `selectorVisibility: 'none'`
-- [x] Prompts.tsx - `selectorVisibility: 'none'`
-- [x] AuthorProfiles.tsx - `selectorVisibility: 'none'`
-- [x] Strategies.tsx - `selectorVisibility: 'none'`
-- [x] ImageTesting.tsx - `selectorVisibility: 'none'`
-
-### Help Pages (None)
-- [x] Help.tsx - `selectorVisibility: 'none'`
-
----
-
-## Files Modified
-
-| File | Change |
-|------|--------|
-| `context/PageContext.tsx` | Added `SelectorVisibility` type and property |
-| `layout/AppHeader.tsx` | Conditional rendering of SiteAndSectorSelector |
-| `components/common/PageHeader.tsx` | Added `selectorVisibility` prop |
-| `pages/Automation/AutomationPage.tsx` | Added page context with 'site-only' |
-| `pages/Dashboard/Home.tsx` | Added page context with 'site-only' |
-| `pages/account/AccountSettingsPage.tsx` | Added page context with 'none' |
-| `pages/account/UsageAnalyticsPage.tsx` | Added page context with 'none' |
-| `pages/account/PlansAndBillingPage.tsx` | Added page context with 'none' |
-| `pages/Thinker/Dashboard.tsx` | Added selectorVisibility='none' to PageHeader |
-| `pages/Thinker/Prompts.tsx` | Added selectorVisibility='none' to PageHeader |
-| `pages/Thinker/AuthorProfiles.tsx` | Added selectorVisibility='none' to PageHeader |
-| `pages/Thinker/Strategies.tsx` | Added selectorVisibility='none' to PageHeader |
-| `pages/Thinker/ImageTesting.tsx` | Added selectorVisibility='none' to PageHeader |
-| `pages/Help/Help.tsx` | Added page context with 'none' |
-
----
-
-## Verification Checklist
-
-- [x] TypeScript compiles without errors
-- [x] PageContext extended with selectorVisibility
-- [x] AppHeader conditionally renders selectors
-- [x] PageHeader passes selectorVisibility to context
-- [x] All Planner pages show both selectors (default)
-- [x] All Writer pages show both selectors (default)
-- [x] Dashboard Home shows site selector only
-- [x] Automation shows site selector only
-- [x] Account pages hide both selectors
-- [x] Thinker pages hide both selectors
-- [x] Help page hides both selectors
-
----
-
-## Audit Requirements Match
-
-| Page Category | Required | Implemented |
-|---------------|----------|-------------|
-| Dashboard Home | Site (All Sites) + NO Sector | ✅ site-only |
-| Setup pages | Site + Sector | ✅ default (both) |
-| Planner pages | Site + Sector | ✅ default (both) |
-| Writer pages | Site + Sector | ✅ default (both) |
-| Automation | Site ONLY | ✅ site-only |
-| Account/Billing | NONE | ✅ none |
-| Thinker | NONE | ✅ none |
-| Help | NONE | ✅ none |
-
-**STATUS: SECTION 1 COMPLETE ✅**

to-do-s/completted-verifications/SECTION_2_VERIFIED.md

@@ -1,110 +0,0 @@
-# Section 2: Table Action Row Metrics - Tooltip Improvements - VERIFIED ✅
-
-**Date:** Implementation verified  
-**Audit Reference:** COMPREHENSIVE-AUDIT-REPORT.md Section 2
-
----
-
-## Implementation Summary
-
-All page configuration files have actionable tooltips implemented for metrics. The tooltips provide context and guide users to next actions.
-
-### Verified Page Configs
-
-| Config File | Metrics Count | Tooltips |
-|-------------|--------------|----------|
-| keywords.config.tsx | 4 | ✅ All with actionable text |
-| clusters.config.tsx | 4 | ✅ All with actionable text |
-| ideas.config.tsx | 4 | ✅ All with actionable text |
-| tasks.config.tsx | 5 | ✅ All with actionable text |
-| content.config.tsx | 4 | ✅ All with actionable text |
-| images.config.tsx | 4 | ✅ All with actionable text |
-| review.config.tsx | 4 | ✅ All with actionable text |
-| approved.config.tsx | 3 | ✅ All with actionable text |
-
----
-
-## Tooltip Examples
-
-### Keywords Page
-- **Keywords**: "Keywords ready for clustering. Select unclustered keywords and click 'Auto Cluster' to organize them into topic groups."
-- **Clustered**: "Clusters with 3-7 keywords are optimal for content creation. Click on a cluster to generate content ideas from it."
-- **Unmapped**: "Keywords waiting to be clustered. Select them and click 'Auto Cluster' to organize into topic groups."
-- **Volume**: "Combined monthly searches. Prioritize higher-volume keywords when creating content."
-
-### Clusters Page
-- **Clusters**: "Topic clusters grouping related keywords. Select clusters and click 'Generate Ideas' to create content outlines."
-- **Ready**: "Clusters ready for idea generation. Select them and click 'Generate Ideas' to create content outlines."
-- **Keywords**: "Keywords organized across clusters. Well-balanced clusters have 3-7 keywords each."
-- **Volume**: "Combined monthly searches. Prioritize high-volume clusters for maximum traffic potential."
-
-### Ideas Page
-- **Ideas**: "Content ideas generated. Review each idea's outline, then click 'Create Task' to begin content generation."
-- **Pending**: "Ideas not yet converted to tasks. Select and click 'Create Tasks' to start the content writing process."
-- **In Tasks**: "Ideas ready for content generation. View their progress in Writer → Tasks queue."
-- **Complete**: "Ideas successfully turned into articles. Review completed content in Writer → Content."
-
-### Tasks Page
-- **Total**: "Total content generation tasks. Select tasks and click 'Generate Content' to write articles."
-- **Queue**: "Tasks waiting for content generation. Select and click 'Generate Content' to write articles."
-- **Processing**: "Tasks being written by AI. Content will appear in Drafts when complete (~2-3 min each)."
-- **Complete**: "Tasks with generated content. Review articles in Writer → Content before publishing."
-- **Failed**: "Failed tasks needing attention. Click to view error details and retry generation."
-
-### Content Page
-- **Total**: "Total articles in your library. Add images and review before sending to the approval queue."
-- **Drafts**: "Drafts needing images and review. Select and click 'Generate Images' to add visuals."
-- **Ready**: "Articles awaiting approval. Review for quality then click 'Approve' to publish."
-- **Published**: "Live articles published to your site. View in Writer → Published."
-
-### Images Page
-- **Total**: "Articles in your library. Each can have 1 featured image + multiple in-article images."
-- **Complete**: "Articles with all images generated. Ready for publishing with full visual coverage."
-- **Partial**: "Articles with some images missing. Select and click 'Generate Images' to complete visuals."
-- **No Images**: "Articles needing images. Select and click 'Generate Prompts' then 'Generate Images'."
-
-### Review Page
-- **Queue**: "Articles awaiting final review. Check quality and SEO before clicking 'Approve & Publish'."
-- **Has Images**: "Articles with complete visuals. Articles with images get 94% more engagement."
-- **Good SEO**: "High SEO scores (80%+). These articles are well-optimized for search rankings."
-- **Publish Ready**: "Ready to publish! Has images + good SEO. Select and click 'Publish to WordPress'."
-
-### Approved Page
-- **Approved**: "Articles approved and ready for publishing. Select and click 'Sync to WordPress' to go live."
-- **Published**: "Live articles published to your WordPress site. These are actively generating traffic."
-- **Pending Sync**: "Approved but not synced. Select and click 'Sync to WordPress' to publish."
-
----
-
-## Verification Checklist
-
-- [x] Keywords config has actionable tooltips
-- [x] Clusters config has actionable tooltips
-- [x] Ideas config has actionable tooltips
-- [x] Tasks config has actionable tooltips
-- [x] Content config has actionable tooltips
-- [x] Images config has actionable tooltips
-- [x] Review config has actionable tooltips
-- [x] Approved config has actionable tooltips
-- [x] All tooltips guide users to next actions
-- [x] All tooltips include relevant statistics/context
-
----
-
-## Implementation Notes
-
-The tooltips are implemented in the `headerMetrics` array within each page config file. Each metric object includes:
-
-```typescript
-{
-  label: string;
-  value: number;
-  accentColor: 'blue' | 'green' | 'amber' | 'purple';
-  calculate: (data) => number;
-  tooltip: string; // Actionable tooltip text
-}
-```
-
-The `TablePageTemplate` component renders these metrics with tooltips using the config data, ensuring consistency across all pages.
-
-**STATUS: SECTION 2 COMPLETE ✅**

to-do-s/completted-verifications/SECTION_3_VERIFIED.md

@@ -1,137 +0,0 @@
-# Section 3: Footer Metrics - 3-Widget Layout - VERIFIED ✅
-
-**Date:** Implementation verified  
-**Audit Reference:** COMPREHENSIVE-AUDIT-REPORT.md Section 3
-
----
-
-## Implementation Summary
-
-The `ModuleMetricsFooter` component implements the 3-widget horizontal layout as specified in the audit. All 7 table pages (Keywords, Clusters, Ideas, Tasks, Content, Review, Approved) use this component with the `threeWidgetLayout` prop.
-
-### Design Implementation
-
-```
-┌─────────────────────────────────────────────────────────────────────────────────────┐
-│  WIDGET 1: PAGE PROGRESS       │  WIDGET 2: MODULE STATS       │  WIDGET 3: COMPLETION │
-│  (Current Page Progress)       │  (Full Module Overview)       │  (Both Modules Stats) │
-│  ~25% width                    │  ~25% width                   │  ~50% width (2 cols)  │
-└─────────────────────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-## CSS Token Integration
-
-The component uses CSS variables from `styles/tokens.css`:
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--color-primary` | #0693e3 | Blue progress bars, links |
-| `--color-success` | #0bbf87 | Green progress bars |
-| `--color-warning` | #ff7a00 | Amber progress bars, hint icons |
-| `--color-purple` | #5d4ae3 | Purple progress bars |
-
-### Color Mapping (SubmoduleColor)
-
-```typescript
-const getProgressBarStyle = (color: SubmoduleColor): React.CSSProperties => {
-  const colorMap = {
-    blue: 'var(--color-primary)',
-    green: 'var(--color-success)',
-    amber: 'var(--color-warning)',
-    purple: 'var(--color-purple)',
-  };
-  return { backgroundColor: colorMap[color] };
-};
-```
-
----
-
-## Component File
-
-**Path:** `components/dashboard/ModuleMetricsFooter.tsx`
-
-### Key Features
-
-1. **PageProgressCard** - Widget 1
-   - 2x2 metrics grid
-   - Progress bar with submodule color
-   - Hint message with lightbulb icon (using Heroicons)
-
-2. **ModuleStatsCard** - Widget 2
-   - Pipeline rows with arrows (ChevronRightIcon from Heroicons)
-   - Progress bars for each conversion step
-   - Quick links to related pages
-
-3. **CompletionCard** - Widget 3
-   - Two-column layout (Planner | Writer)
-   - Tree structure with progress bars
-   - Credits used & operations count
-   - Link to analytics
-
----
-
-## Pages Using threeWidgetLayout
-
-### Planner Pages
-| Page | File | submoduleColor |
-|------|------|----------------|
-| Keywords | Keywords.tsx | `'blue'` |
-| Clusters | Clusters.tsx | `'green'` |
-| Ideas | Ideas.tsx | `'amber'` |
-
-### Writer Pages
-| Page | File | submoduleColor |
-|------|------|----------------|
-| Tasks | Tasks.tsx | `'blue'` |
-| Content | Content.tsx | `'purple'` |
-| Review | Review.tsx | `'amber'` |
-| Approved | Approved.tsx | `'green'` |
-
----
-
-## Verification Checklist
-
-- [x] ModuleMetricsFooter component exists and exports correctly
-- [x] CSS tokens defined in `styles/tokens.css`
-- [x] Component uses CSS variables (not inline colors)
-- [x] PageProgressCard renders 2x2 metrics grid
-- [x] PageProgressCard has progress bar with submodule color
-- [x] ModuleStatsCard renders pipeline rows with Heroicon arrows
-- [x] ModuleStatsCard has progress bars for each row
-- [x] CompletionCard has 2-column layout (Planner | Writer)
-- [x] All 7 pages use `threeWidgetLayout` prop
-- [x] Each page has correct `submoduleColor`
-- [x] Pipeline rows have individual colors
-- [x] Completion items have individual colors
-
----
-
-## Code Structure
-
-```typescript
-// Types
-export type SubmoduleColor = 'blue' | 'green' | 'amber' | 'purple';
-
-interface ModuleMetricsFooterProps {
-  submoduleColor?: SubmoduleColor;
-  threeWidgetLayout?: {
-    pageProgress: PageProgressWidget;
-    moduleStats: ModuleStatsWidget;
-    completion: CompletionWidget;
-  };
-}
-
-// Usage in pages
-<ModuleMetricsFooter
-  submoduleColor="blue"
-  threeWidgetLayout={{
-    pageProgress: { ... },
-    moduleStats: { ... },
-    completion: { ... },
-  }}
-/>
-```
-
-**STATUS: SECTION 3 COMPLETE ✅**

to-do-s/completted-verifications/SECTION_4_VERIFIED.md

@@ -1,170 +0,0 @@
-# Section 4: Progress Modal Steps Audit - VERIFIED ✅
-
-**Date:** Implementation verified  
-**Audit Reference:** COMPREHENSIVE-AUDIT-REPORT.md Section 4
-
----
-
-## Implementation Summary
-
-The progress modal system has been implemented with detailed step information for all AI operations. The implementation consists of two main files:
-
-1. **`hooks/useProgressModal.ts`** - Manages task polling, step parsing, and progress state
-2. **`components/common/ProgressModal.tsx`** - UI component with step visualization
-
----
-
-## Step Phases Implemented
-
-Each AI operation uses a 5-phase progress system:
-
-| Phase | Description | Progress % |
-|-------|-------------|------------|
-| INIT | Initialization and validation | 0-10% |
-| PREP | Data preparation and loading | 10-25% |
-| AI_CALL | AI model processing | 25-70% |
-| PARSE | Result parsing and organization | 70-85% |
-| SAVE | Database persistence | 85-100% |
-
----
-
-## Function-Specific Steps
-
-### Auto Cluster Keywords
-```
-INIT  → Validating keywords
-PREP  → Loading keyword data
-AI_CALL → Generating clusters with Igny8 Semantic SEO Model
-PARSE → Organizing clusters
-SAVE  → Saving clusters
-```
-Success: "Clustering complete - {X} keywords mapped and grouped into {Y} clusters"
-
-### Generate Ideas
-```
-INIT  → Verifying cluster integrity
-PREP  → Loading cluster keywords
-AI_CALL → Generating ideas with Igny8 Semantic AI
-PARSE → High-opportunity ideas generated
-SAVE  → Content Outline for Ideas generated
-```
-Success: "Content ideas & outlines created successfully"
-
-### Generate Content
-```
-INIT  → Validating task
-PREP  → Preparing content idea
-AI_CALL → Writing article with Igny8 Semantic AI
-PARSE → Formatting content
-SAVE  → Saving article
-```
-Success: "Article(s) drafted successfully — {X} articles generated"
-
-### Generate Image Prompts
-```
-INIT  → Checking content and image slots
-PREP  → Mapping content for image prompts
-AI_CALL → Writing Featured Image Prompts
-PARSE → Writing In‑article Image Prompts
-SAVE  → Assigning Prompts to Dedicated Slots
-```
-Success: "Featured Image and {X} In‑article Image Prompts ready for image generation"
-
-### Generate Images from Prompts
-```
-INIT  → Validating image prompts
-PREP  → Preparing image generation queue
-AI_CALL → Generating images with AI
-PARSE → Processing image URLs
-SAVE  → Saving image URLs
-```
-Success: "{X} images generated successfully"
-
----
-
-## Key Features
-
-### useProgressModal.ts
-- **Task Polling**: 2-second intervals with max 300 polls (10 minutes)
-- **Step Info Extraction**: Parses counts from messages (keywords, clusters, ideas, etc.)
-- **Auto-Increment**: Smooth progress animation during AI calls (1% every 350ms up to 80%)
-- **Notification Integration**: Auto-adds notifications on success/failure via `useNotificationStore`
-- **Image Queue Support**: Tracks individual image generation progress
-
-### ProgressModal.tsx
-- **Step Visualization**: Shows all 5 phases with checkmarks for completed steps
-- **Current Step Highlighting**: Animated indicator for active step
-- **Success Messages**: Dynamic messages with extracted counts
-- **Error Handling**: Displays error messages with retry option
-
----
-
-## Verification Checklist
-
-- [x] useProgressModal hook implements step parsing
-- [x] ProgressModal component shows step progress
-- [x] All 5 phases defined (INIT, PREP, AI_CALL, PARSE, SAVE)
-- [x] Clustering steps implemented
-- [x] Ideas generation steps implemented
-- [x] Content generation steps implemented
-- [x] Image prompt generation steps implemented
-- [x] Image generation steps implemented
-- [x] Success messages include counts
-- [x] Step completion visual indicators
-- [x] Auto-increment progress animation
-- [x] Notification store integration
-
----
-
-## Code Structure
-
-```typescript
-// hooks/useProgressModal.ts
-export function useProgressModal(): UseProgressModalReturn {
-  // Task polling and step management
-  const getStepInfo = (stepName, message, allSteps) => { ... };
-  // Returns { percentage, friendlyMessage }
-}
-
-// components/common/ProgressModal.tsx
-const getStepsForFunction = (functionId, title) => { ... };
-// Returns array of { phase, label }
-
-const getSuccessMessage = (functionId, title, stepLogs) => { ... };
-// Returns dynamic success message with counts
-```
-
----
-
-## Integration Points
-
-The progress modal is used in:
-- Keywords.tsx (Auto Cluster)
-- Clusters.tsx (Generate Ideas)
-- Ideas.tsx (Create Tasks)
-- Tasks.tsx (Generate Content)
-- Content.tsx (Generate Images/Prompts)
-- Images.tsx (Generate Images from Prompts)
-
-All pages use the same pattern:
-```typescript
-const progressModal = useProgressModal();
-
-// Trigger operation
-progressModal.openModal(taskId, 'Operation Title', functionId);
-
-// Render modal
-<ProgressModal
-  isOpen={progressModal.isOpen}
-  title={progressModal.title}
-  percentage={progressModal.progress.percentage}
-  status={progressModal.progress.status}
-  message={progressModal.progress.message}
-  onClose={progressModal.closeModal}
-  taskId={progressModal.taskId}
-  functionId={progressModal.functionId}
-  stepLogs={progressModal.stepLogs}
-/>
-```
-
-**STATUS: SECTION 4 COMPLETE ✅**

to-do-s/completted-verifications/SECTION_5_VERIFIED.md

@@ -1,56 +0,0 @@
-# Section 5: Dashboard Redesign - VERIFIED ✅
-
-## Date Verified: Current Session
-
-## Audit Requirements from COMPREHENSIVE-AUDIT-REPORT.md
-
-### NeedsAttentionBar Component
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Component exists | ✅ | `components/dashboard/NeedsAttentionBar.tsx` (165 lines) |
-| Shows attention items at top | ✅ | Integrated at line 667 in Home.tsx |
-| Collapsible functionality | ✅ | `isCollapsed` state with toggle button |
-| Item types supported | ✅ | pending_review, sync_failed, setup_incomplete, automation_failed, credits_low |
-| Severity levels | ✅ | warning, error, info with distinct styling |
-| Actions per item | ✅ | actionUrl, onAction, onRetry, onDismiss |
-| Responsive grid | ✅ | `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` |
-
-### CompactDashboard Component  
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Component exists | ✅ | `components/dashboard/CompactDashboard.tsx` (451 lines) |
-| NeedsAttentionWidget | ✅ | Internal widget with collapsible expand/collapse |
-| WorkflowPipelineWidget | ✅ | 7-step pipeline visualization with links |
-| QuickActionsWidget | ✅ | 5 quick action buttons + workflow guide |
-| AIOperationsWidget | ✅ | Time filter (7d/30d/90d), operations table |
-| RecentActivityWidget | ✅ | Activity list with timestamps |
-
-### Integration in Dashboard Home
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| NeedsAttentionBar imported | ✅ | Line 7: `import NeedsAttentionBar` |
-| NeedsAttentionBar rendered | ✅ | Line 667: `<NeedsAttentionBar items={attentionItems} />` |
-| attentionItems computed | ✅ | Lines 456-512: useMemo with API data + fallback |
-| API integration | ✅ | `dashboardData?.needs_attention` from fetchDashboardSummary |
-| Fallback computation | ✅ | Pending review, setup incomplete, credits low |
-
-### Attention Item Types Computed
-| Type | Condition | Location |
-|------|-----------|----------|
-| pending_review | reviewCount > 0 && < 20 | Line 475 |
-| setup_incomplete | sites without keywords | Line 483 |
-| credits_low | credits < 20% | Line 497 |
-| API items | dashboardData.needs_attention | Line 459 |
-
-## Files Verified
-- [x] `/frontend/src/components/dashboard/NeedsAttentionBar.tsx` - Full component with types
-- [x] `/frontend/src/components/dashboard/CompactDashboard.tsx` - Multi-widget dashboard
-- [x] `/frontend/src/components/dashboard/index.ts` - Exports both components
-- [x] `/frontend/src/pages/Dashboard/Home.tsx` - Integration verified
-
-## Summary
-Section 5 Dashboard Redesign is **100% implemented and working**:
-1. NeedsAttentionBar shows collapsible alerts at dashboard top
-2. CompactDashboard provides comprehensive multi-widget layout
-3. Full integration with API data and local fallback computation
-4. All severity levels and item types fully styled

to-do-s/completted-verifications/SECTION_6_VERIFIED.md

@@ -1,82 +0,0 @@
-# Section 6: Site Setup Checklist - VERIFIED ✅
-
-## Date Verified: Current Session
-
-## Audit Requirements from COMPREHENSIVE-AUDIT-REPORT.md
-
-### SiteSetupChecklist Component
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Component exists | ✅ | `components/sites/SiteSetupChecklist.tsx` (192 lines) |
-| Compact mode support | ✅ | `compact` prop with simplified dot display |
-| Full mode support | ✅ | Card with progress bar and clickable items |
-| Setup items tracked | ✅ | created, industry, wordpress, keywords |
-
-### Integration in SiteCard.tsx
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Component imported | ✅ | Line 5: `import SiteSetupChecklist` |
-| Compact mode used | ✅ | Line 93: `compact={true}` |
-| Props passed correctly | ✅ | Lines 87-95: all required props |
-
-### Props Mapping in SiteCard
-| Prop | Source | Line |
-|------|--------|------|
-| siteId | `site.id` | 88 |
-| siteName | `site.name` | 89 |
-| hasIndustry | `!!site.industry \|\| !!site.industry_name` | 47 |
-| hasSectors | `site.active_sectors_count > 0` | 48 |
-| hasWordPressIntegration | `site.has_integration ?? false` | 49 |
-| hasKeywords | `(site.keywords_count ?? 0) > 0` | 50 |
-
-### Backend Serializer Support (SiteSerializer)
-| Field | Status | Implementation |
-|-------|--------|----------------|
-| industry | ✅ | `industry` FK field |
-| industry_name | ✅ | Line 71: `source='industry.name'` |
-| active_sectors_count | ✅ | Line 66: SerializerMethodField |
-| keywords_count | ✅ | Line 69: SerializerMethodField |
-| has_integration | ✅ | Line 70: SerializerMethodField |
-
-### Backend SerializerMethodField Implementations
-| Method | Lines | Logic |
-|--------|-------|-------|
-| get_sectors_count | 150-152 | `obj.sectors.count()` |
-| get_active_sectors_count | 154-156 | `obj.sectors.filter(is_active=True).count()` |
-| get_keywords_count | 166-169 | `Keywords.objects.filter(site=obj).count()` |
-| get_has_integration | 171-178 | Checks SiteIntegration or wp_url |
-
-### Compact Mode Visual Output
-```
-●●●○  3/4  ← Dots + count
-●●●●  4/4 ✓ Ready  ← Complete state
-```
-
-### Full Mode Visual Output
-```
-┌─────────────────────────────────────────┐
-│ Site Setup Progress              75%    │
-│ ████████████░░░░                        │
-│ ✓ Site created                          │
-│ ✓ Industry/Sectors selected             │
-│ ✓ WordPress integration configured      │
-│ ○ Keywords added                        │
-│                    [Complete Setup →]   │
-└─────────────────────────────────────────┘
-```
-
-## Files Verified
-- [x] `/frontend/src/components/sites/SiteSetupChecklist.tsx` - Full component
-- [x] `/frontend/src/components/common/SiteCard.tsx` - Integration with compact mode
-- [x] `/backend/igny8_core/auth/serializers.py` - Backend field support
-
-## Note
-The audit report marked this as "NOT integrated in SiteCard.tsx" - this is OUTDATED.
-The integration was completed and is fully working with compact mode.
-
-## Summary
-Section 6 Site Setup Checklist is **100% implemented and working**:
-1. SiteSetupChecklist component with compact and full modes
-2. Properly integrated in SiteCard.tsx with compact={true}
-3. All backend serializer fields provide required data
-4. Visual compact display shows dots + progress count

to-do-s/completted-verifications/SECTION_8_VERIFIED.md

@@ -1,91 +0,0 @@
-# Section 8: Notification System - VERIFIED ✅
-
-## Date Verified: Current Session
-
-## Audit Requirements from COMPREHENSIVE-AUDIT-REPORT.md
-
-### NotificationDropdownNew Component
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Component exists | ✅ | `components/header/NotificationDropdownNew.tsx` (269 lines) |
-| Uses notification store | ✅ | Line 11-14: Imports from notificationStore |
-| Displays unread badge | ✅ | Lines 104-108: Badge with count & animation |
-| Mark as read | ✅ | markAsRead, markAllAsRead from store |
-| Empty state | ✅ | Lines 183-196: "No notifications yet" message |
-| Notification icons | ✅ | getNotificationIcon by category/function |
-| Action links | ✅ | handleNotificationClick with navigation |
-
-### Notification Store (notificationStore.ts)
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Store exists | ✅ | `store/notificationStore.ts` (206 lines) |
-| Notification types | ✅ | success, error, warning, info |
-| Notification categories | ✅ | ai_task, system, info |
-| Add notification | ✅ | addNotification action |
-| Mark as read | ✅ | markAsRead, markAllAsRead actions |
-| Remove notification | ✅ | removeNotification action |
-| Clear all | ✅ | clearAll action |
-| AI Task helper | ✅ | addAITaskNotification with display names |
-
-### Store Features
-| Feature | Status | Implementation |
-|---------|--------|----------------|
-| Auto-generated IDs | ✅ | generateId() function |
-| Timestamp tracking | ✅ | timestamp: new Date() |
-| Read/unread state | ✅ | read: boolean field |
-| Max 50 notifications | ✅ | .slice(0, 50) in addNotification |
-| Unread count | ✅ | unreadCount state |
-| Action labels | ✅ | actionLabel, actionHref fields |
-| Metadata support | ✅ | taskId, functionName, count, credits |
-
-### AI Task Display Names
-| Function | Display Name |
-|----------|--------------|
-| auto_cluster | Keyword Clustering |
-| generate_ideas | Idea Generation |
-| generate_content | Content Generation |
-| generate_images | Image Generation |
-| generate_image_prompts | Image Prompts |
-| optimize_content | Content Optimization |
-
-### Action Hrefs
-| Function | Href |
-|----------|------|
-| auto_cluster | /planner/clusters |
-| generate_ideas | /planner/ideas |
-| generate_content | /writer/content |
-| generate_images | /writer/images |
-| optimize_content | /writer/content |
-
-### Integration in AppHeader
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Import NotificationDropdownNew | ✅ | Line 6: `import NotificationDropdown from "../components/header/NotificationDropdownNew"` |
-| Render in header | ✅ | Line 144: `<NotificationDropdown />` |
-
-### Integration in useProgressModal
-| Requirement | Status | Implementation |
-|-------------|--------|----------------|
-| Import notification store | ✅ | Line 62: `useNotificationStore` |
-| Add success notification | ✅ | Line 589: `addNotification(title, stepInfo.friendlyMessage, true)` |
-| Add failure notification | ✅ | Line 648: `addNotification(title, errorMsg, false)` |
-
-### Helper Functions
-| Function | Purpose |
-|----------|---------|
-| formatNotificationTime | Relative time (Just now, Xm ago, Xh ago, etc) |
-| getNotificationColors | Type-based colors (bg, icon, border) |
-
-## Files Verified
-- [x] `/frontend/src/components/header/NotificationDropdownNew.tsx` - Full dropdown component
-- [x] `/frontend/src/store/notificationStore.ts` - Zustand store with all actions
-- [x] `/frontend/src/layout/AppHeader.tsx` - Integration (lines 6, 144)
-- [x] `/frontend/src/hooks/useProgressModal.ts` - Auto-notifications (lines 62, 589, 648)
-
-## Summary
-Section 8 Notification System is **100% implemented and working**:
-1. NotificationDropdownNew shows real notifications from store
-2. notificationStore manages notifications with read/unread state
-3. useProgressModal automatically adds notifications on AI task success/failure
-4. AppHeader properly imports and renders NotificationDropdownNew
-5. Full support for different notification types with proper icons/colors