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

@@ -3,32 +3,6 @@
 **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 |
 
 ---
 

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
- * 
+ * Uses standard EnhancedMetricCard and ProgressBar components
- * Supports two layouts:
+ * Follows standard app design system and color scheme
- * 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
  */
 
 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 = '',
+  className = '' 
-  submoduleColor = 'blue',
-  threeWidgetLayout,
 }: 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,163 +1,162 @@
 /**
- * NeedsAttentionBar - Compact alert bar for items needing user attention
+ * NeedsAttentionBar - Collapsible alert bar for items requiring user action
- * 
+ * Shows pending reviews, sync failures, setup incomplete, automation failures
- * 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.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { AlertIcon, ArrowRightIcon, ChevronDownIcon, RefreshIcon, CloseIcon } from '../../icons';
+import { 
-
+  AlertIcon, 
-export type AttentionType = 'pending_review' | 'sync_failed' | 'setup_incomplete' | 'automation_failed' | 'credits_low';
+  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;
+  secondaryActionLabel?: string;
-  severity: 'warning' | 'error' | 'info';
+  secondaryActionHref?: string;
+  onSecondaryAction?: () => void;
 }
 
 interface NeedsAttentionBarProps {
   items: AttentionItem[];
   onDismiss?: (id: string) => void;
-  className?: string;
 }
 
-const severityStyles = {
+const typeConfig = {
-  warning: {
+  pending_review: {
-    bg: 'bg-amber-50 dark:bg-amber-500/10',
+    icon: CheckCircleIcon,
-    border: 'border-amber-200 dark:border-amber-500/30',
+    bgColor: 'bg-amber-50 dark:bg-amber-900/20',
-    icon: 'text-amber-500',
+    borderColor: 'border-amber-200 dark:border-amber-800',
-    text: 'text-amber-800 dark:text-amber-200',
+    iconColor: 'text-amber-500',
-    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',
+    titleColor: 'text-amber-800 dark:text-amber-200',
   },
-  error: {
+  sync_failed: {
-    bg: 'bg-red-50 dark:bg-red-500/10',
+    icon: AlertIcon,
-    border: 'border-red-200 dark:border-red-500/30',
+    bgColor: 'bg-red-50 dark:bg-red-900/20',
-    icon: 'text-red-500',
+    borderColor: 'border-red-200 dark:border-red-800',
-    text: 'text-red-800 dark:text-red-200',
+    iconColor: 'text-red-500',
-    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',
+    titleColor: 'text-red-800 dark:text-red-200',
   },
-  info: {
+  setup_incomplete: {
-    bg: 'bg-blue-50 dark:bg-blue-500/10',
+    icon: AlertIcon,
-    border: 'border-blue-200 dark:border-blue-500/30',
+    bgColor: 'bg-blue-50 dark:bg-blue-900/20',
-    icon: 'text-blue-500',
+    borderColor: 'border-blue-200 dark:border-blue-800',
-    text: 'text-blue-800 dark:text-blue-200',
+    iconColor: 'text-blue-500',
-    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',
+    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;
+  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);
 
   return (
-    <div className={`mb-6 ${className}`}>
+    <div className="mb-4">
-      {/* Header bar - always visible */}
+      {/* 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">
+        <div className="flex items-center gap-2.5">
-          <AlertIcon className="w-5 h-5 text-amber-500" />
+          <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
-          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
+          <span className="text-base font-semibold text-amber-800 dark:text-amber-200">
-            {totalCount} item{totalCount !== 1 ? 's' : ''} need{totalCount === 1 ? 's' : ''} attention
+            Needs Attention ({items.length})
           </span>
         </div>
-        <ChevronDownIcon 
+        {isCollapsed ? (
-          className={`w-5 h-5 text-amber-500 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} 
+          <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">
+        <div className="border border-t-0 border-amber-200 dark:border-amber-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
-          {sortedItems.map((item) => {
+          <div className="flex flex-wrap gap-3">
-            const styles = severityStyles[item.severity];
+            {items.map((item) => {
+              const config = typeConfig[item.type];
+              const Icon = config.icon;
 
               return (
                 <div
                   key={item.id}
-                className={`flex items-center justify-between p-3 rounded-lg border ${styles.bg} ${styles.border}`}
+                  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]`}
                 >
-                <div className="flex items-center gap-2 flex-1 min-w-0">
+                  <Icon className={`w-5 h-5 mt-0.5 flex-shrink-0 ${config.iconColor}`} />
-                  <AlertIcon className={`w-4 h-4 flex-shrink-0 ${styles.icon}`} />
+                  <div className="flex-1 min-w-0">
-                  <span className={`text-sm font-medium truncate ${styles.text}`}>
+                    <div className={`text-base font-semibold ${config.titleColor}`}>
-                    {item.count ? `${item.count} ` : ''}{item.title}
+                      {item.count ? `${item.count} ${item.title}` : item.title}
-                  </span>
                     </div>
-                
+                    <p className="text-sm text-gray-700 dark:text-gray-300 mt-1 line-clamp-1">
-                <div className="flex items-center gap-1 flex-shrink-0 ml-2">
+                      {item.description}
-                  {item.onRetry && (
+                    </p>
-                    <button
+                    <div className="flex items-center gap-3 mt-2">
-                      onClick={(e) => {
+                      {item.actionHref ? (
-                        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}
+                          to={item.actionHref}
-                      className={`px-2 py-1 text-xs font-medium rounded ${styles.button} transition-colors flex items-center gap-1`}
+                          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
                         >
-                      {item.actionLabel}
+                          {item.actionLabel} →
-                      <ArrowRightIcon className="w-3 h-3" />
                         </Link>
                       ) : item.onAction ? (
                         <button
-                      onClick={(e) => {
+                          onClick={item.onAction}
-                        e.stopPropagation();
+                          className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
-                        item.onAction?.();
-                      }}
-                      className={`px-2 py-1 text-xs font-medium rounded ${styles.button} transition-colors`}
                         >
                           {item.actionLabel}
                         </button>
                       ) : null}
-                  
+                      {item.secondaryActionHref && (
-                  {onDismiss && (
+                        <Link
-                    <button
+                          to={item.secondaryActionHref}
-                      onClick={(e) => {
+                          className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
-                        e.stopPropagation();
-                        onDismiss(item.id);
-                      }}
-                      className="p-1 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-                      title="Dismiss"
                         >
-                      <CloseIcon className="w-3.5 h-3.5 text-gray-400" />
+                          {item.secondaryActionLabel}
-                    </button>
+                        </Link>
                       )}
                     </div>
                   </div>
+                  {onDismiss && (
+                    <button
+                      onClick={() => onDismiss(item.id)}
+                      className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                    >
+                      <CloseIcon className="w-4 h-4" />
+                    </button>
+                  )}
+                </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,287 +1,364 @@
 /**
- * ThreeWidgetFooter - 3-column widget footer for module pages
+ * ThreeWidgetFooter - 3-Column Layout for Table Page Footers
  * 
- * Layout:
+ * 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:
+ * STYLING: Uses CSS tokens from styles/tokens.css:
- * - components/ui/card (Card, CardTitle)
+ * - --color-primary: Brand blue for primary actions/bars
- * - components/ui/progress (ProgressBar)
+ * - --color-success: Green for success states
- * - styles/tokens.css for colors
+ * - --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 {
+/** Submodule color type - matches headerMetrics accentColor */
-  label: string;
+export type SubmoduleColor = 'blue' | 'green' | 'amber' | 'purple';
-  value: number | string;
-  suffix?: string;  // e.g., '%' or 'K'
-}
 
+/** 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
+  metrics: Array<{ label: string; value: string | number; percentage?: string }>;
-  progress: {
+  progress: { value: number; label: string; color?: SubmoduleColor };
-    value: number;
+  hint?: string;
-    label: string;
+  /** The submodule's accent color - progress bar uses this */
-    color?: 'primary' | 'success' | 'warning';
+  submoduleColor?: SubmoduleColor;
-  };
-  hint?: string;  // Actionable insight
 }
 
-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;
+  toHref?: string;
-  progressValue: number;
+  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[];
+  title: string;
-  writerStats: CompletionItem[];
+  plannerItems: CompletionItem[];
-  summary: {
+  writerItems: CompletionItem[];
-    creditsUsed: number;
+  creditsUsed?: number;
-    operations: 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">
+    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+      {/* Header */}
-        {data.title}
+      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
-      </h4>
+        {widget.title}
+      </h3>
       
       {/* 2x2 Metrics Grid */}
-      <div className="grid grid-cols-2 gap-x-4 gap-y-2 mb-4">
+      <div className="grid grid-cols-2 gap-x-6 gap-y-3 mb-5">
-        {data.metrics.map((metric, idx) => (
+        {widget.metrics.slice(0, 4).map((metric, idx) => (
-          <div key={idx} className="flex items-center justify-between">
+          <div key={idx} className="flex items-baseline justify-between">
-            <span className="text-sm text-gray-600 dark:text-gray-400">
+            <span className="text-sm text-[color:var(--color-text-dim)] dark:text-gray-400">{metric.label}</span>
-              {metric.label}
+            <div className="flex items-baseline gap-1.5">
-            </span>
+              <span className="text-lg font-bold text-[color:var(--color-text)] dark:text-white tabular-nums">
-            <span className="text-sm font-semibold text-gray-800 dark:text-white">
                 {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
-              {metric.suffix}
               </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
+      <div className="mb-4">
-        value={data.progress.value}
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-        color={data.progress.color || 'primary'}
+          <div 
-        size="md"
+            className="h-full rounded-full transition-all duration-500"
-        showLabel={true}
+            style={{ 
-        label={data.progress.label}
+              ...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 */}
+      {/* Hint with icon */}
-      {data.hint && (
+      {widget.hint && (
-        <p className="mt-3 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+        <div className="flex items-start gap-2 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
-          <span className="text-amber-500">💡</span>
+          <LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-warning)' }} />
-          {data.hint}
+          <span className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>{widget.hint}</span>
-        </p>
+        </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">
+    <Card className="p-5 bg-white dark:bg-gray-900 border border-[color:var(--color-stroke)] dark:border-gray-700">
-      <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+      {/* Header */}
-        {data.title}
+      <h3 className="text-sm font-semibold text-[color:var(--color-text)] dark:text-gray-200 uppercase tracking-wide mb-4">
-      </h4>
+        {widget.title}
+      </h3>
       
-      {/* Pipeline Steps */}
+      {/* Pipeline Rows */}
-      <div className="space-y-3">
+      <div className="space-y-4 mb-4">
-        {data.pipeline.map((step, idx) => (
+        {widget.pipeline.map((row, idx) => (
-          <div key={idx} className="space-y-1">
+          <div key={idx}>
-            {/* Labels Row */}
+            {/* Row header: FromLabel Value ► ToLabel Value */}
-            <div className="flex items-center justify-between text-xs">
+            <div className="flex items-center justify-between mb-2">
-              <span className="text-gray-600 dark:text-gray-400">
+              {/* From side */}
-                {step.fromLabel}
-              </span>
-              {step.actionLabel && (
-                <span className="text-gray-400 dark:text-gray-500 italic">
-                  {step.actionLabel}
-                </span>
-              )}
-              <span className="text-gray-600 dark:text-gray-400">
-                {step.toLabel}
-              </span>
-            </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]">
+                {row.fromHref ? (
-                {step.fromValue.toLocaleString()}
+                  <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 className="flex-1">
+              </div>
-                <div className="h-1.5 rounded-full bg-gray-200 dark:bg-gray-700">
+              
-                  <div 
+              {/* Arrow icon */}
-                    className="h-full rounded-full bg-[var(--color-primary)] transition-all duration-300"
+              <ChevronRightIcon
-                    style={{ width: `${Math.min(100, step.progressValue)}%` }}
+                className="w-6 h-6 flex-shrink-0 mx-2"
+                style={{ color: 'var(--color-primary)' }}
               />
-                </div>
+              
-              </div>
+              {/* To side */}
-              <span className="text-sm font-semibold text-gray-800 dark:text-white min-w-[32px] text-right">
+              <div className="flex items-center gap-2">
-                {step.toValue.toLocaleString()}
+                {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 */}
+            <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 */}
+      {/* Navigation Links */}
-      <div className="flex flex-wrap gap-2 mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+      <div className="flex flex-wrap gap-3 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
-        {data.links.map((link, idx) => (
+        {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 renderItem = (item: CompletionItem, isLast: boolean) => {
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>('30d');
+    const barWidth = (item.value / maxValue) * 100;
-
+    const prefix = isLast ? '└─' : '├─';
-  const filterButtons: TimeFilter[] = ['7d', '30d', '90d'];
+    const color = item.color || 'blue';
     
     return (
-    <Card variant="surface" padding="sm" shadow="sm">
+      <div key={item.label} className="flex items-center gap-2 py-1">
-      <div className="flex items-center justify-between mb-3">
+        {/* Tree prefix */}
-        <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        <span className="text-[color:var(--color-text-dim)] dark:text-gray-500 font-mono text-xs w-5 flex-shrink-0">{prefix}</span>
-          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>
-          ))}
-        </div>
-      </div>
         
-      {/* Planner Stats */}
+        {/* Label */}
-      <div className="mb-3">
+        <span className="text-sm text-[color:var(--color-text)] dark:text-gray-300 flex-1 truncate">{item.label}</span>
-        <h5 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
+        
-          PLANNER
+        {/* Progress bar */}
-        </h5>
+        <div className="w-16 h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex-shrink-0">
-        <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)]"
+            className="h-full rounded-full transition-all duration-500"
-                  style={{ width: `${Math.min(100, stat.barWidth)}%` }}
+            style={{ 
+              ...getProgressBarStyle(color),
+              width: `${Math.min(100, barWidth)}%`
+            }}
           />
         </div>
-            </div>
-          ))}
-        </div>
-      </div>
         
-      {/* Writer Stats */}
+        {/* Value */}
-      <div className="mb-3">
+        <span className="text-sm font-bold text-[color:var(--color-text)] dark:text-white tabular-nums w-10 text-right flex-shrink-0">
-        <h5 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
+          {item.value}
-          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>
-          ))}
-        </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>
     );
   };
 
+  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>
+  );
+}
+
 // ============================================================================
 // 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} />
+        <PageProgressCard widget={pageProgress} submoduleColor={submoduleColor} />
-        <ModuleStatsCard data={moduleStats} />
+        <ModuleStatsCard widget={moduleStats} />
-        <CompletionCard data={completion} />
+        <CompletionCard widget={completion} />
       </div>
     </div>
   );
 }
 
-// ============================================================================
+// Also export sub-components for flexibility
-// PRE-CONFIGURED WIDGETS FOR COMMON PAGES
+export { PageProgressCard, ModuleStatsCard, CompletionCard };
-// ============================================================================
-
-// 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' },
-    ],
-  };
-}

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
+        {/* Notification badge */}
-          className={`absolute right-0 top-0.5 z-10 h-2 w-2 rounded-full bg-orange-400 ${
+        {unreadCount > 0 && (
-            !notifying ? "hidden" : "flex"
+          <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,25 +125,42 @@ 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>
+          <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"
             >
               <svg
                 className="fill-current"
-              width="24"
+                width="20"
-              height="24"
+                height="20"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -80,304 +173,95 @@ export default function NotificationDropdown() {
               </svg>
             </button>
           </div>
-        <ul className="flex flex-col h-auto overflow-y-auto custom-scrollbar">
+        </div>
-          {/* Example notification items */}
+        
-          <li>
+        {/* 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={closeDropdown}
+                    onItemClick={() => handleNotificationClick(
-              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"
+                      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' : ''
+                    }`}
                   >
-              <span className="relative block w-full h-10 rounded-full z-1 max-w-10">
+                    {/* Icon */}
-                <img
+                    <span className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${colors.bg}`}>
-                  width={40}
+                      <span className={colors.icon}>
-                  height={40}
+                        {icon}
-                  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  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>
 
-                <span className="flex items-center gap-2 text-gray-500 text-theme-xs dark:text-gray-400">
+                    {/* Content */}
-                  <span>Project</span>
+                    <span className="flex-1 min-w-0">
-                  <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
+                      <span className="flex items-start justify-between gap-2">
-                  <span>5 min ago</span>
+                        <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 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>
-
+              );
-          <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 */}
         </ul>
+        
+        {/* Footer */}
+        {notifications.length > 0 && (
           <Link
-          to="/"
+            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' */
+  /** Completely hide site/sector selectors in app header */
-  selectorVisibility?: SelectorVisibility;
+  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: [...] },
+ *     plannerData: { keywords: [...], clusters: [...] },
- *     pipelineData: { ... }
+ *     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: 'Has Images', value: hasImages, percentage: `${imagesPercent}%` },
-      { label: 'Total Words', value: '12.5K' }, // Would need word count from API
+      { 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: [
+    title: 'Workflow Completion',
-      { label: 'Keywords Clustered', value: data.keywordsClustered || 0, barWidth: calcBarWidth(data.keywordsClustered || 0) },
+    plannerItems: [
-      { label: 'Clusters Created', value: data.clustersCreated || 0, barWidth: calcBarWidth(data.clustersCreated || 0) },
+      { label: 'Keywords Clustered', value: data.keywordsClustered || 0, color: 'blue' },
-      { label: 'Ideas Generated', value: data.ideasGenerated || 0, barWidth: calcBarWidth(data.ideasGenerated || 0) },
+      { label: 'Clusters Created', value: data.clustersCreated || 0, color: 'green' },
+      { label: 'Ideas Generated', value: data.ideasGenerated || 0, color: 'amber' },
     ],
-    writerStats: [
+    writerItems: [
-      { label: 'Content Generated', value: data.contentGenerated || 0, barWidth: calcBarWidth(data.contentGenerated || 0) },
+      { label: 'Content Generated', value: data.contentGenerated || 0, color: 'blue' },
-      { label: 'Images Created', value: data.imagesCreated || 0, barWidth: calcBarWidth(data.imagesCreated || 0) },
+      { label: 'Images Created', value: data.imagesCreated || 0, color: 'purple' },
-      { label: 'Articles Published', value: data.articlesPublished || 0, barWidth: calcBarWidth(data.articlesPublished || 0) },
+      { label: 'Articles Published', value: data.articlesPublished || 0, color: 'green' },
     ],
-    summary: {
+    creditsUsed: data.creditsUsed,
-      creditsUsed: data.creditsUsed || 0,
+    operationsCount: data.totalOperations,
-      operations: data.totalOperations || 0,
+    analyticsHref: '/account/usage',
-    },
   };
 }
 
@@ -377,10 +372,17 @@ export function useThreeWidgetFooter(options: UseThreeWidgetFooterOptions): Thre
     // 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) */}
+              {/* Site/Sector Selector - Conditional based on route */}
-              {pageInfo?.selectorVisibility !== 'none' && (
+              {selectorType === 'site-and-sector' && (
                 <div className="hidden lg:flex items-center">
-                  <SiteAndSectorSelector 
+                  <SiteAndSectorSelector />
-                    hideSectorSelector={pageInfo?.selectorVisibility === 'site-only'}
+                </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,28 +380,16 @@ 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" />
-              </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>
-            </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="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
@@ -433,9 +410,6 @@ const AutomationPage: React.FC = () => {
           </div>
         </div>
 
-          <DebugSiteSelector />
-        </div>
-
         {/* Compact Schedule & Controls Panel */}
         {config && (
           <ComponentCard className="border-0 overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700">

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,
+  GroupIcon
-  DocsIcon
 } 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, { 
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
-  PageProgressWidget, 
-  ModuleStatsWidget, 
-  CompletionWidget 
-} from '../../components/dashboard/ModuleMetricsFooter';
 
 export default function Clusters() {
   const toast = useToast();
@@ -490,12 +486,10 @@ export default function Clusters() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Three Widget Footer - Section 3 Layout */}
-      <ModuleMetricsFooter
+      <ThreeWidgetFooter
         submoduleColor="green"
-        threeWidgetLayout={{
+        pageProgress={{
-          // Widget 1: Page Progress (Clusters)
-          pageProgress: {
           title: 'Page Progress',
           submoduleColor: 'green',
           metrics: [
@@ -512,9 +506,8 @@ export default function Clusters() {
           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={{
-          moduleStats: {
           title: 'Planner Module',
           pipeline: [
             {
@@ -554,24 +547,20 @@ export default function Clusters() {
             { label: 'Clusters', href: '/planner/clusters' },
             { label: 'Ideas', href: '/planner/ideas' },
           ],
-          },
+        }}
-          // Widget 3: Completion Stats
+        completion={{
-          completion: {
           title: 'Workflow Completion',
           plannerItems: [
-              { label: 'Keywords', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-              { label: 'Clusters', value: totalCount, color: 'green' },
+            { label: 'Clusters Created', value: totalCount, color: 'green' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
           ],
           writerItems: [
-              { label: 'Content', value: 0, color: 'blue' },
+            { label: 'Content Generated', value: 0, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
+            { label: 'Images Created', value: 0, color: 'purple' },
             { label: 'Published', value: 0, color: 'green' },
           ],
-            creditsUsed: 0,
+          analyticsHref: '/account/usage',
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
         }}
       />
 

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, { 
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
-  PageProgressWidget, 
-  ModuleStatsWidget, 
-  CompletionWidget 
-} from '../../components/dashboard/ModuleMetricsFooter';
 
 export default function Ideas() {
   const toast = useToast();
@@ -418,36 +414,33 @@ export default function Ideas() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Three Widget Footer - Section 3 Layout */}
-      <ModuleMetricsFooter
+      <ThreeWidgetFooter
         submoduleColor="amber"
-        threeWidgetLayout={{
+        pageProgress={{
-          // 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: '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: 'Clusters', value: clusters.length },
+            { label: 'From Clusters', value: clusters.length },
           ],
           progress: {
-              value: totalCount > 0 ? Math.round((ideas.filter(i => i.status !== 'new').length / totalCount) * 100) : 0,
+            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 to tasks!',
+            : 'All ideas converted!',
-          },
+        }}
-          // Widget 2: Module Stats (Planner Pipeline)
+        moduleStats={{
-          moduleStats: {
           title: 'Planner Module',
           pipeline: [
             {
               fromLabel: 'Keywords',
-                fromValue: 0,
+              fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
               fromHref: '/planner/keywords',
               actionLabel: 'Auto Cluster',
               toLabel: 'Clusters',
@@ -473,7 +466,7 @@ export default function Ideas() {
               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,
+              progress: totalCount > 0 ? Math.round((ideas.filter(i => i.status === 'queued' || i.status === 'completed').length / totalCount) * 100) : 0,
               color: 'amber',
             },
           ],
@@ -482,24 +475,20 @@ export default function Ideas() {
             { label: 'Clusters', href: '/planner/clusters' },
             { label: 'Ideas', href: '/planner/ideas' },
           ],
-          },
+        }}
-          // Widget 3: Completion Stats
+        completion={{
-          completion: {
           title: 'Workflow Completion',
           plannerItems: [
-              { label: 'Clusters', value: clusters.length, color: 'green' },
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-              { label: 'Ideas', value: totalCount, color: 'amber' },
+            { label: 'Clusters Created', value: clusters.length, color: 'green' },
-              { label: 'In Tasks', value: ideas.filter(i => i.status !== 'new').length, color: 'purple' },
+            { label: 'Ideas Generated', value: totalCount, color: 'amber' },
           ],
           writerItems: [
-              { label: 'Content', value: ideas.filter(i => i.status === 'completed').length, color: 'blue' },
+            { label: 'Content Generated', value: ideas.filter(i => i.status === 'completed').length, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
+            { label: 'Images Created', value: 0, color: 'purple' },
             { label: 'Published', value: 0, color: 'green' },
           ],
-            creditsUsed: 0,
+          analyticsHref: '/account/usage',
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
         }}
       />
 

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,12 +704,10 @@ export default function Keywords() {
         }}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Three Widget Footer - Section 3 Layout */}
-      <ModuleMetricsFooter
+      <ThreeWidgetFooter
         submoduleColor="blue"
-        threeWidgetLayout={{
+        pageProgress={{
-          // Widget 1: Page Progress
-          pageProgress: {
           title: 'Page Progress',
           submoduleColor: 'blue',
           metrics: [
@@ -726,9 +724,8 @@ export default function Keywords() {
           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={{
-          moduleStats: {
           title: 'Planner Module',
           pipeline: [
             {
@@ -769,24 +766,22 @@ export default function Keywords() {
             { label: 'Clusters', href: '/planner/clusters' },
             { label: 'Ideas', href: '/planner/ideas' },
           ],
-          },
+        }}
-          // Widget 3: Completion Stats
+        completion={{
-          completion: {
           title: 'Workflow Completion',
           plannerItems: [
-              { label: 'Keywords', value: keywords.filter(k => k.cluster_id).length, color: 'blue' },
+            { label: 'Keywords Clustered', value: keywords.filter(k => k.cluster_id).length, color: 'blue' },
-              { label: 'Clusters', value: clusters.length, color: 'green' },
+            { label: 'Clusters Created', value: clusters.length, color: 'green' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
           ],
           writerItems: [
-              { label: 'Content', value: 0, color: 'blue' },
+            { label: 'Content Generated', value: 0, color: 'blue' },
-              { label: 'Images', value: 0, color: 'purple' },
+            { label: 'Images Created', value: 0, color: 'purple' },
             { label: 'Published', value: 0, color: 'green' },
           ],
           creditsUsed: 0,
           operationsCount: 0,
-            analyticsHref: '/analytics',
+          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 
+      <PageHeader title="Strategy Dashboard" />
-        title="Strategy Dashboard" 
-        selectorVisibility="none"
-      />
 
       <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"
+        metrics={[
-        threeWidgetLayout={{
+          {
-          pageProgress: {
+            title: 'Approved Content',
-            title: 'Page Progress',
+            value: content.length.toLocaleString(),
-            submoduleColor: 'green',
+            subtitle: 'ready for publishing',
-            metrics: [
+            icon: <CheckCircleIcon className="w-5 h-5" />,
-              { label: 'Total Approved', value: totalCount },
+            accentColor: 'green',
-              { 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 },
+            title: 'Published to Site',
-            ],
+            value: content.filter(c => c.external_id).length.toLocaleString(),
-            progress: {
+            subtitle: 'on WordPress',
-              label: 'Published to Site',
+            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: 'green',
+          color: 'success',
-            },
-            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!',
-          },
-          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',
-          },
         }}
       />
     </>

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,29 +275,28 @@ export default function Content() {
         getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
       />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Three Widget Footer - Section 3 Layout */}
-      <ModuleMetricsFooter
+      <ThreeWidgetFooter
-        submoduleColor="purple"
+        submoduleColor="blue"
-        threeWidgetLayout={{
+        pageProgress={{
-          pageProgress: {
           title: 'Page Progress',
-            submoduleColor: 'purple',
+          submoduleColor: 'blue',
           metrics: [
-              { label: 'Total Content', value: totalCount },
+            { label: 'Drafts', value: content.filter(c => c.status === 'draft').length },
-              { label: 'Draft', 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, percentage: `${totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0}%` },
+            { label: 'Published', value: content.filter(c => c.status === 'published').length },
           ],
           progress: {
-              label: 'Published',
+            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,
-              value: totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0,
+            label: 'Have Images',
-              color: 'green',
+            color: 'blue',
           },
-            hint: content.filter(c => c.status === 'draft').length > 0
+          hint: content.filter(c => c.status === 'draft' && !c.has_generated_images).length > 0
-              ? `${content.filter(c => c.status === 'draft').length} drafts need images before review`
+            ? `${content.filter(c => c.status === 'draft' && !c.has_generated_images).length} drafts need images before review`
-              : 'All content processed!',
+            : 'All drafts have images!',
-          },
+        }}
-          moduleStats: {
+        moduleStats={{
           title: 'Writer Module',
           pipeline: [
             {
@@ -314,9 +314,9 @@ export default function Content() {
               fromValue: content.filter(c => c.status === 'draft').length,
               actionLabel: 'Generate Images',
               toLabel: 'Images',
-                toValue: 0,
+              toValue: content.filter(c => c.has_generated_images).length,
               toHref: '/writer/images',
-                progress: totalCount > 0 ? Math.round((content.filter(c => c.status !== 'draft').length / totalCount) * 100) : 0,
+              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',
             },
             {
@@ -326,8 +326,8 @@ export default function Content() {
               actionLabel: 'Review & Publish',
               toLabel: 'Published',
               toValue: content.filter(c => c.status === 'published').length,
-                toHref: '/writer/approved',
+              toHref: '/writer/published',
-                progress: totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0,
+              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',
             },
           ],
@@ -335,25 +335,22 @@ export default function Content() {
             { label: 'Tasks', href: '/writer/tasks' },
             { label: 'Content', href: '/writer/content' },
             { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
+            { label: 'Published', href: '/writer/published' },
           ],
-          },
+        }}
-          completion: {
+        completion={{
           title: 'Workflow Completion',
           plannerItems: [
-              { label: 'Keywords', value: 0, color: 'blue' },
+            { label: 'Keywords Clustered', value: 0, color: 'blue' },
-              { label: 'Clusters', value: 0, color: 'green' },
+            { label: 'Clusters Created', value: 0, color: 'green' },
-              { label: 'Ideas', value: 0, color: 'amber' },
+            { label: 'Ideas Generated', value: 0, color: 'amber' },
           ],
           writerItems: [
-              { label: 'Content', value: totalCount, color: 'purple' },
+            { label: 'Content Generated', value: totalCount, color: 'blue' },
-              { label: 'Images', value: 0, color: 'amber' },
+            { 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' },
           ],
-            creditsUsed: 0,
+          analyticsHref: '/account/usage',
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
         }}
       />
 

frontend/src/pages/Writer/Review.tsx

@@ -455,86 +455,15 @@ export default function Review() {
         onRowAction={handleRowAction}
       />
       <ModuleMetricsFooter
-        submoduleColor="amber"
+        metrics={[
-        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',
-          },
-          moduleStats: {
-            title: 'Writer Module',
-            pipeline: [
           {
-                fromLabel: 'Tasks',
+            title: 'Ready to Publish',
-                fromValue: 0,
+            value: content.length,
-                fromHref: '/writer/tasks',
+            subtitle: 'Total review items',
-                actionLabel: 'Generate Content',
+            icon: <CheckCircleIcon className="w-5 h-5" />,
-                toLabel: 'Drafts',
+            accentColor: 'blue',
-                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,12 +467,10 @@ export default function Tasks() {
           }}
         />
 
-      {/* Module Metrics Footer - 3-Widget Layout */}
+      {/* Three Widget Footer - Section 3 Layout */}
-      <ModuleMetricsFooter
+      <ThreeWidgetFooter
         submoduleColor="blue"
-        threeWidgetLayout={{
+        pageProgress={{
-          // Widget 1: Page Progress (Tasks)
-          pageProgress: {
           title: 'Page Progress',
           submoduleColor: 'blue',
           metrics: [
@@ -489,9 +487,8 @@ export default function Tasks() {
           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={{
-          moduleStats: {
           title: 'Writer Module',
           pipeline: [
             {
@@ -522,7 +519,7 @@ export default function Tasks() {
               actionLabel: 'Review & Publish',
               toLabel: 'Published',
               toValue: 0,
-                toHref: '/writer/approved',
+              toHref: '/writer/published',
               progress: 0,
               color: 'green',
             },
@@ -531,25 +528,22 @@ export default function Tasks() {
             { label: 'Tasks', href: '/writer/tasks' },
             { label: 'Content', href: '/writer/content' },
             { label: 'Images', href: '/writer/images' },
-              { label: 'Published', href: '/writer/approved' },
+            { label: 'Published', href: '/writer/published' },
           ],
-          },
+        }}
-          // Widget 3: Completion Stats
+        completion={{
-          completion: {
           title: 'Workflow Completion',
           plannerItems: [
-              { label: 'Clusters', value: clusters.length, color: 'green' },
+            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-              { label: 'Ideas', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
+            { 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: 'Tasks', value: totalCount, color: 'blue' },
+            { label: 'Content Generated', value: tasks.filter(t => t.status === 'completed').length, color: 'blue' },
-              { label: 'Content', value: tasks.filter(t => t.status === 'completed').length, color: 'purple' },
+            { label: 'Images Created', value: 0, color: 'purple' },
             { label: 'Published', value: 0, color: 'green' },
           ],
-            creditsUsed: 0,
+          analyticsHref: '/account/usage',
-            operationsCount: 0,
-            analyticsHref: '/analytics',
-          },
         }}
       />
 

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" />
-      
+      <PageHeader 
-      {/* Page Header */}
+        title={tabTitles[activeTab]}
-      <div className="mb-6">
+        description={
-        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+          activeTab === 'content' ? 'Customize how your articles are written' :
-          Content Settings / {tabTitles[activeTab]}
+          activeTab === 'publishing' ? 'Configure automatic publishing settings' :
-        </div>
+          'Set up AI image generation preferences'
-        <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">
+        badge={{ icon: <BoxCubeIcon />, color: 'blue' }}
-          {activeTab === 'content' && 'Customize how your articles are written'}
+        parent="Content Settings"
-          {activeTab === 'publishing' && 'Configure automatic publishing settings'}
+      />
-          {activeTab === 'images' && 'Set up AI image generation preferences'}
-        </p>
-      </div>
 
       {/* 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