wp plugin and app fixes adn automation page update

frontend/src/App.tsx

@@ -102,6 +102,7 @@ const Sites = lazy(() => import("./pages/Settings/Sites"));
 const SiteList = lazy(() => import("./pages/Sites/List"));
 const SiteDashboard = lazy(() => import("./pages/Sites/Dashboard"));
 const SiteContent = lazy(() => import("./pages/Sites/Content"));
+const SiteContentStructure = lazy(() => import("./pages/Sites/ContentStructure"));
 const PageManager = lazy(() => import("./pages/Sites/PageManager"));
 const PostEditor = lazy(() => import("./pages/Sites/PostEditor"));
 const SiteSettings = lazy(() => import("./pages/Sites/Settings"));
@@ -288,6 +289,7 @@ export default function App() {
             <Route path="/sites/:id/pages/new" element={<PageManager />} />
             <Route path="/sites/:id/pages/:pageId/edit" element={<PageManager />} />
             <Route path="/sites/:id/content" element={<SiteContent />} />
+            <Route path="/sites/:id/content/structure" element={<SiteContentStructure />} />
             <Route path="/sites/:id/settings" element={<SiteSettings />} />
             <Route path="/sites/:id/sync" element={<SyncDashboard />} />
             <Route path="/sites/:id/deploy" element={<DeploymentPanel />} />

frontend/src/pages/Automation/AutomationPage.tsx

@@ -72,28 +72,78 @@ const AutomationPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
   
+  // Eligibility check - site must have data to use automation
+  const [isEligible, setIsEligible] = useState<boolean | null>(null);
+  const [eligibilityMessage, setEligibilityMessage] = useState<string | null>(null);
+  const [eligibilityChecked, setEligibilityChecked] = useState(false);
+  
   // New state for unified progress data
   const [globalProgress, setGlobalProgress] = useState<GlobalProgress | null>(null);
   const [stageProgress, setStageProgress] = useState<StageProgress[]>([]);
   const [initialSnapshot, setInitialSnapshot] = useState<InitialSnapshot | null>(null);
 
+  // Track site ID to avoid duplicate calls when activeSite object reference changes
+  const siteId = activeSite?.id;
+
   useEffect(() => {
+    if (!siteId) return;
+    // Reset state when site changes
+    setConfig(null);
+    setCurrentRun(null);
+    setEstimate(null);
+    setPipelineOverview([]);
+    setMetrics(null);
+    setIsEligible(null);
+    setEligibilityMessage(null);
+    setEligibilityChecked(false);
+    // First check eligibility, then load data only if eligible
+    checkEligibilityAndLoad();
+  }, [siteId]);
+
+  const checkEligibilityAndLoad = async () => {
     if (!activeSite) return;
-    loadData();
-    
-    const interval = setInterval(() => {
-      if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
-        // When automation is running, refresh both run and metrics
-        loadCurrentRun();
-        loadPipelineOverview();
-        loadMetrics(); // Add metrics refresh during run
+    try {
+      setLoading(true);
+      const eligibility = await automationService.checkEligibility(activeSite.id);
+      setIsEligible(eligibility.is_eligible);
+      setEligibilityMessage(eligibility.message);
+      setEligibilityChecked(true);
+      
+      // Only load full data if site is eligible
+      if (eligibility.is_eligible) {
+        await loadData();
       } else {
-        loadPipelineOverview();
+        setLoading(false);
       }
+    } catch (error) {
+      console.error('Failed to check eligibility:', error);
+      // On error, fall back to loading data anyway
+      setIsEligible(true);
+      setEligibilityChecked(true);
+      await loadData();
+    }
+  };
+
+  // Separate polling effect - only run if eligible
+  useEffect(() => {
+    if (!siteId || !isEligible) return;
+    if (!currentRun || (currentRun.status !== 'running' && currentRun.status !== 'paused')) {
+      // Only poll pipeline overview when not running
+      const interval = setInterval(() => {
+        loadPipelineOverview();
+      }, 5000);
+      return () => clearInterval(interval);
+    }
+
+    // When automation is running, refresh both run and metrics
+    const interval = setInterval(() => {
+      loadCurrentRun();
+      loadPipelineOverview();
+      loadMetrics();
     }, 5000);
     
     return () => clearInterval(interval);
-  }, [activeSite, currentRun?.status]);
+  }, [siteId, isEligible, currentRun?.status]);
 
   const loadData = async () => {
     if (!activeSite) return;
@@ -172,8 +222,8 @@ const AutomationPage: React.FC = () => {
         setShowProcessingCard(true);
       }
     } catch (error: any) {
+      console.error('Failed to load automation data:', error);
       toast.error('Failed to load automation data');
-      console.error(error);
     } finally {
       setLoading(false);
     }
@@ -434,6 +484,39 @@ const AutomationPage: React.FC = () => {
         parent="Automation"
       />
       
+      {/* Show eligibility notice when site has no data */}
+      {eligibilityChecked && !isEligible && (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] p-8">
+          <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-2xl p-8 max-w-2xl text-center">
+            <div className="size-16 mx-auto mb-4 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
+              <BoltIcon className="size-8 text-amber-600 dark:text-amber-400" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
+              Site Not Eligible for Automation Yet
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              {eligibilityMessage || 'This site doesn\'t have any data yet. Start by adding keywords in the Planner module to enable automation.'}
+            </p>
+            <Button
+              variant="primary"
+              tone="brand"
+              onClick={() => window.location.href = '/planner/keywords'}
+            >
+              Go to Keyword Planner
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Show loading state */}
+      {loading && !eligibilityChecked && (
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-gray-500 dark:text-gray-400">Loading automation data...</div>
+        </div>
+      )}
+
+      {/* Main content - only show when eligible */}
+      {eligibilityChecked && isEligible && (
       <div className="space-y-6">
         {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
        
@@ -1143,6 +1226,7 @@ const AutomationPage: React.FC = () => {
           <ConfigModal config={config} onSave={handleSaveConfig} onCancel={() => setShowConfigModal(false)} />
         )}
       </div>
+      )}
     </>
   );
 };

frontend/src/pages/Sites/Content.tsx

@@ -2,9 +2,10 @@
  * Site Content Manager (Advanced)
  * Phase 7: Advanced Site Management
  * Features: Search, filters, content listing for a site
+ * Updated: Post type filters and Structure page link
  */
 import React, { useState, useEffect, useMemo } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
 import PageHeader from '../../components/common/PageHeader';
 import { Card } from '../../components/ui/card';
@@ -22,7 +23,8 @@ import {
   PlusIcon,
   FileIcon,
   GridIcon,
-  GlobeIcon
+  GlobeIcon,
+  LayersIcon
 } from '../../icons';
 import SiteInfoBar from '../../components/common/SiteInfoBar';
 
@@ -39,6 +41,12 @@ interface ContentItem {
   created_at: string;
 }
 
+interface PostTypeCount {
+  post_type: string;
+  label: string;
+  count: number;
+}
+
 export default function SiteContentManager() {
   const { id: siteId } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -49,6 +57,8 @@ export default function SiteContentManager() {
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
   const [sourceFilter, setSourceFilter] = useState('');
+  const [postTypeFilter, setPostTypeFilter] = useState('post'); // Default to posts
+  const [postTypeCounts, setPostTypeCounts] = useState<PostTypeCount[]>([]);
   const [sortBy, setSortBy] = useState<'created_at' | 'updated_at' | 'title'>('created_at');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
   const [currentPage, setCurrentPage] = useState(1);
@@ -67,7 +77,7 @@ export default function SiteContentManager() {
     if (siteId) {
       loadContent();
     }
-  }, [currentPage, statusFilter, sourceFilter, searchTerm, sortBy, sortDirection]);
+  }, [currentPage, statusFilter, sourceFilter, searchTerm, sortBy, sortDirection, postTypeFilter]);
 
   const loadSiteAndContent = async () => {
     try {
@@ -77,6 +87,16 @@ export default function SiteContentManager() {
         setSite(siteData);
         setActiveSite(siteData);
         await apiSetActiveSite(siteData.id).catch(() => {});
+        
+        // Load post type counts (simulated based on content_type field)
+        // In future, this could come from WordPress plugin metadata
+        const postTypes: PostTypeCount[] = [
+          { post_type: 'post', label: 'Posts', count: 0 }
+        ];
+        
+        // Check if integration has other post types enabled
+        // For now, default to just posts
+        setPostTypeCounts(postTypes);
       }
       // Then load content
       await loadContent();
@@ -104,6 +124,9 @@ export default function SiteContentManager() {
       if (sourceFilter) {
         params.append('source', sourceFilter);
       }
+      if (postTypeFilter) {
+        params.append('content_type', postTypeFilter);
+      }
 
       const data = await fetchAPI(`/v1/writer/content/?${params.toString()}`);
       const contentList = Array.isArray(data?.results) ? data.results : Array.isArray(data) ? data : [];
@@ -162,6 +185,41 @@ export default function SiteContentManager() {
       {/* Site Info Bar */}
       <SiteInfoBar site={site} currentPage="content" itemsCount={totalCount} showNewPostButton />
 
+      {/* Post Type Filters Row with Structure Button */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          {/* Post Type Buttons - Only show if more than 1 post type */}
+          {postTypeCounts.length > 0 && (
+            <>
+              {postTypeCounts.map((pt) => (
+                <Button
+                  key={pt.post_type}
+                  variant={postTypeFilter === pt.post_type ? 'primary' : 'outline'}
+                  size="sm"
+                  onClick={() => {
+                    setPostTypeFilter(pt.post_type);
+                    setCurrentPage(1);
+                  }}
+                >
+                  {pt.label}
+                </Button>
+              ))}
+            </>
+          )}
+        </div>
+        
+        {/* Structure Button - Far Right */}
+        <Link to={`/sites/${siteId}/content/structure`}>
+          <Button
+            variant="outline"
+            size="sm"
+            startIcon={<LayersIcon className="w-4 h-4" />}
+          >
+            Structure
+          </Button>
+        </Link>
+      </div>
+
       {/* Filters */}
       <Card className="p-4 mb-6">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">

frontend/src/pages/Sites/ContentStructure.tsx

@@ -0,0 +1,416 @@
+/**
+ * Site Content Structure Page
+ * Shows site content organized by Clusters with Keywords and Content list
+ * Route: /sites/:id/content/structure
+ */
+
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import { Card } from '../../components/ui/card';
+import Button from '../../components/ui/button/Button';
+import Badge from '../../components/ui/badge/Badge';
+import Select from '../../components/form/Select';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { fetchAPI, Cluster, Content, setActiveSite as apiSetActiveSite } from '../../services/api';
+import { useSiteStore } from '../../store/siteStore';
+import SiteInfoBar from '../../components/common/SiteInfoBar';
+import { 
+  ChevronLeftIcon,
+  EyeIcon,
+  PencilIcon,
+  GridIcon,
+  LayersIcon,
+  GlobeIcon
+} from '../../icons';
+
+interface KeywordWithCount {
+  id: number;
+  keyword: string;
+  content_count: number;
+  volume?: number;
+  difficulty?: number;
+}
+
+export default function SiteContentStructure() {
+  const { id: siteId } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { setActiveSite } = useSiteStore();
+  
+  const [site, setSite] = useState<any>(null);
+  const [clusters, setClusters] = useState<Cluster[]>([]);
+  const [selectedClusterId, setSelectedClusterId] = useState<number | null>(null);
+  const [selectedCluster, setSelectedCluster] = useState<Cluster | null>(null);
+  const [keywords, setKeywords] = useState<KeywordWithCount[]>([]);
+  const [content, setContent] = useState<Content[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [contentLoading, setContentLoading] = useState(false);
+
+  useEffect(() => {
+    if (siteId) {
+      loadSiteAndClusters();
+    }
+  }, [siteId]);
+
+  useEffect(() => {
+    if (selectedClusterId) {
+      loadClusterData(selectedClusterId);
+    }
+  }, [selectedClusterId]);
+
+  const loadSiteAndClusters = async () => {
+    try {
+      setLoading(true);
+      
+      // Load site data
+      const siteData = await fetchAPI(`/v1/auth/sites/${siteId}/`);
+      if (siteData) {
+        setSite(siteData);
+        setActiveSite(siteData);
+        await apiSetActiveSite(siteData.id).catch(() => {});
+      }
+      
+      // Load clusters for this site
+      const clustersResponse = await fetchAPI(`/v1/planner/clusters/?site_id=${siteId}`);
+      const clusterList = Array.isArray(clustersResponse?.results) 
+        ? clustersResponse.results 
+        : Array.isArray(clustersResponse) 
+        ? clustersResponse 
+        : [];
+      setClusters(clusterList);
+      
+      // Auto-select first cluster if available
+      if (clusterList.length > 0) {
+        setSelectedClusterId(clusterList[0].id);
+      }
+    } catch (error: any) {
+      console.error('Failed to load site and clusters:', error);
+      toast.error(`Failed to load data: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadClusterData = async (clusterId: number) => {
+    try {
+      setContentLoading(true);
+      
+      // Load cluster details
+      const clusterData = await fetchAPI(`/v1/planner/clusters/${clusterId}/`);
+      setSelectedCluster(clusterData);
+      
+      // Load keywords for this cluster
+      const keywordsResponse = await fetchAPI(`/v1/planner/keywords/?cluster_id=${clusterId}`);
+      const keywordList = Array.isArray(keywordsResponse?.results) 
+        ? keywordsResponse.results 
+        : Array.isArray(keywordsResponse) 
+        ? keywordsResponse 
+        : [];
+      
+      // Map keywords with content count
+      const keywordsWithCounts: KeywordWithCount[] = keywordList.map((kw: any) => ({
+        id: kw.id,
+        keyword: kw.keyword,
+        content_count: kw.content_count || 0,
+        volume: kw.volume,
+        difficulty: kw.difficulty
+      }));
+      setKeywords(keywordsWithCounts);
+      
+      // Load content for this cluster
+      const contentResponse = await fetchAPI(`/v1/writer/content/?cluster_id=${clusterId}&site_id=${siteId}`);
+      const contentList = Array.isArray(contentResponse?.results) 
+        ? contentResponse.results 
+        : Array.isArray(contentResponse) 
+        ? contentResponse 
+        : [];
+      setContent(contentList);
+      
+    } catch (error: any) {
+      console.error('Failed to load cluster data:', error);
+      toast.error(`Failed to load cluster data: ${error.message}`);
+    } finally {
+      setContentLoading(false);
+    }
+  };
+
+  const handleClusterChange = (value: string) => {
+    const clusterId = parseInt(value, 10);
+    if (!isNaN(clusterId)) {
+      setSelectedClusterId(clusterId);
+    }
+  };
+
+  const clusterOptions = [
+    { value: '', label: 'Select a Cluster...' },
+    ...clusters.map(c => ({
+      value: c.id.toString(),
+      label: `${c.name} (${c.content_count || 0} articles)`
+    }))
+  ];
+
+  // Calculate content stats
+  const publishedCount = content.filter(c => c.status === 'published').length;
+  const pendingCount = content.filter(c => c.status === 'review' || c.status === 'approved').length;
+  const draftCount = content.filter(c => c.status === 'draft').length;
+
+  if (loading) {
+    return (
+      <>
+        <PageMeta title="Content Structure - IGNY8" description="View site content organized by clusters and keywords" />
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600 mb-3"></div>
+            <p className="text-gray-500">Loading content structure...</p>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <PageMeta 
+        title={`Content Structure - ${site?.name || 'Site'} - IGNY8`} 
+        description="View site content organized by clusters and keywords"
+      />
+
+      {/* Back Button */}
+      <div className="mb-4">
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          onClick={() => navigate(`/sites/${siteId}/content`)}
+          startIcon={<ChevronLeftIcon className="w-4 h-4" />}
+        >
+          Back to Content
+        </Button>
+      </div>
+
+      <PageHeader 
+        title="Content Structure"
+        badge={{ icon: <LayersIcon />, color: 'purple' }}
+        hideSiteSector
+      />
+
+      {/* Site Info Bar */}
+      <SiteInfoBar site={site} currentPage="content" />
+
+      {/* Cluster Selector */}
+      <Card className="p-6 mb-6">
+        <div className="flex items-center gap-4">
+          <label className="font-medium text-gray-700 dark:text-gray-300">
+            Select Cluster:
+          </label>
+          <div className="flex-1 max-w-md">
+            <Select
+              options={clusterOptions}
+              defaultValue={selectedClusterId?.toString() || ''}
+              onChange={handleClusterChange}
+            />
+          </div>
+          {clusters.length === 0 && (
+            <p className="text-sm text-gray-500">
+              No clusters found for this site. <Link to="/planner/clusters" className="text-brand-600 hover:underline">Create clusters</Link> first.
+            </p>
+          )}
+        </div>
+      </Card>
+
+      {selectedCluster && (
+        <>
+          {/* Cluster Summary */}
+          <Card className="p-6 mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {selectedCluster.name}
+              </h2>
+              <Link to={`/planner/clusters/${selectedCluster.id}`}>
+                <Button variant="outline" size="sm">
+                  View Full Cluster
+                </Button>
+              </Link>
+            </div>
+            
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
+              <div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Keywords</div>
+                <div className="text-2xl font-semibold text-gray-900 dark:text-white">
+                  {selectedCluster.keywords_count || 0}
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Volume</div>
+                <div className="text-2xl font-semibold text-gray-900 dark:text-white">
+                  {(selectedCluster.volume || 0).toLocaleString()}
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Published</div>
+                <div className="text-2xl font-semibold text-success-600">
+                  {publishedCount}
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Pending</div>
+                <div className="text-2xl font-semibold text-warning-600">
+                  {pendingCount}
+                </div>
+              </div>
+              <div>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Draft</div>
+                <div className="text-2xl font-semibold text-gray-600">
+                  {draftCount}
+                </div>
+              </div>
+            </div>
+
+            {selectedCluster.description && (
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {selectedCluster.description}
+              </p>
+            )}
+          </Card>
+
+          {/* Keywords List */}
+          {keywords.length > 0 && (
+            <Card className="p-6 mb-6">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-4">
+                Keywords in this Cluster ({keywords.length})
+              </h3>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-gray-200 dark:border-gray-700">
+                      <th className="text-left py-2 px-3 font-medium text-gray-600 dark:text-gray-400">Keyword</th>
+                      <th className="text-center py-2 px-3 font-medium text-gray-600 dark:text-gray-400">Volume</th>
+                      <th className="text-center py-2 px-3 font-medium text-gray-600 dark:text-gray-400">Difficulty</th>
+                      <th className="text-center py-2 px-3 font-medium text-gray-600 dark:text-gray-400">Content</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {keywords.map((kw) => (
+                      <tr key={kw.id} className="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                        <td className="py-2 px-3 text-gray-900 dark:text-white">{kw.keyword}</td>
+                        <td className="py-2 px-3 text-center text-gray-600 dark:text-gray-400">
+                          {kw.volume?.toLocaleString() || '-'}
+                        </td>
+                        <td className="py-2 px-3 text-center">
+                          {kw.difficulty !== undefined && (
+                            <Badge 
+                              variant="light" 
+                              color={kw.difficulty < 30 ? 'success' : kw.difficulty < 60 ? 'warning' : 'error'}
+                              size="sm"
+                            >
+                              {kw.difficulty}
+                            </Badge>
+                          )}
+                        </td>
+                        <td className="py-2 px-3 text-center">
+                          <Badge variant="soft" color={kw.content_count > 0 ? 'success' : 'neutral'} size="sm">
+                            {kw.content_count}
+                          </Badge>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </Card>
+          )}
+
+          {/* Content List - Reusing style from ClusterDetail */}
+          <Card className="p-6">
+            <h3 className="font-semibold text-gray-900 dark:text-white mb-4">
+              Cluster Content ({content.length})
+            </h3>
+            
+            {contentLoading ? (
+              <div className="text-center py-8 text-gray-500">
+                Loading content...
+              </div>
+            ) : content.length === 0 ? (
+              <div className="text-center py-12 text-gray-500">
+                <p className="mb-4">No content found for this cluster</p>
+                <Button onClick={() => navigate('/writer/tasks')} variant="primary">
+                  Create Content
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {content.map((item) => (
+                  <div
+                    key={item.id}
+                    className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  >
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">
+                        {item.title || `Content #${item.id}`}
+                      </h4>
+                      <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
+                        <Badge 
+                          variant={item.status === 'published' ? 'soft' : 'light'}
+                          color={item.status === 'published' ? 'success' : item.status === 'draft' || item.status === 'review' ? 'warning' : 'neutral'}
+                          size="sm"
+                        >
+                          {item.status}
+                        </Badge>
+                        {item.content_type && (
+                          <Badge variant="light" color="info" size="sm">
+                            {item.content_type}
+                          </Badge>
+                        )}
+                        <span>{item.source}</span>
+                        {item.external_url && (
+                          <a 
+                            href={item.external_url} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-brand-600 dark:text-brand-400 hover:underline flex items-center gap-1"
+                          >
+                            <GlobeIcon className="w-3 h-3" />
+                            View Live
+                          </a>
+                        )}
+                        <span>
+                          {new Date(item.created_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex gap-2 ml-4">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(`/writer/content/${item.id}`)}
+                      >
+                        <EyeIcon className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={() => navigate(`/sites/${siteId}/posts/${item.id}/edit`)}
+                      >
+                        <PencilIcon className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </Card>
+        </>
+      )}
+
+      {!selectedCluster && clusters.length > 0 && (
+        <Card className="p-12 text-center">
+          <GridIcon className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+          <p className="text-gray-600 dark:text-gray-400 mb-4">
+            Select a cluster from the dropdown above to view its content structure
+          </p>
+        </Card>
+      )}
+    </>
+  );
+}

frontend/src/pages/Sites/Settings.tsx

@@ -54,11 +54,9 @@ export default function SiteSettings() {
   const [isSiteSelectorOpen, setIsSiteSelectorOpen] = useState(false);
   const siteSelectorRef = useRef<HTMLButtonElement>(null);
 
-  // Check for tab parameter in URL - image-settings merged into content-generation (renamed to ai-settings)
-  const initialTab = (searchParams.get('tab') as 'general' | 'ai-settings' | 'integrations' | 'publishing' | 'content-types') || 'general';
-  const [activeTab, setActiveTab] = useState<'general' | 'ai-settings' | 'integrations' | 'publishing' | 'content-types'>(initialTab);
-  const [contentTypes, setContentTypes] = useState<any>(null);
-  const [contentTypesLoading, setContentTypesLoading] = useState(false);
+  // Check for tab parameter in URL - content-types removed, redirects to integrations
+  const initialTab = (searchParams.get('tab') as 'general' | 'ai-settings' | 'integrations' | 'publishing') || 'general';
+  const [activeTab, setActiveTab] = useState<'general' | 'ai-settings' | 'integrations' | 'publishing'>(initialTab);
   
   // Advanced Settings toggle
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
@@ -137,7 +135,6 @@ export default function SiteSettings() {
     if (siteId) {
       // Clear state when site changes
       setWordPressIntegration(null);
-      setContentTypes(null);
       setSite(null);
       
       // Load new site data
@@ -150,20 +147,18 @@ export default function SiteSettings() {
   useEffect(() => {
     // Update tab if URL parameter changes
     const tab = searchParams.get('tab');
-    if (tab && ['general', 'ai-settings', 'integrations', 'publishing', 'content-types'].includes(tab)) {
+    if (tab && ['general', 'ai-settings', 'integrations', 'publishing'].includes(tab)) {
       setActiveTab(tab as typeof activeTab);
     }
-    // Handle legacy tab names
+    // Handle legacy tab names - redirect content-types to integrations
     if (tab === 'content-generation' || tab === 'image-settings') {
       setActiveTab('ai-settings');
     }
-  }, [searchParams]);
-
-  useEffect(() => {
-    if (activeTab === 'content-types' && wordPressIntegration) {
-      loadContentTypes();
+    if (tab === 'content-types') {
+      // Redirect to content structure page instead
+      navigate(`/sites/${siteId}/content/structure`, { replace: true });
     }
-  }, [activeTab, wordPressIntegration]);
+  }, [searchParams]);
 
   useEffect(() => {
     if (activeTab === 'publishing' && siteId && !publishingSettings) {
@@ -505,19 +500,6 @@ export default function SiteSettings() {
     await loadIntegrations();
   };
 
-  const loadContentTypes = async () => {
-    if (!wordPressIntegration?.id) return;
-    try {
-      setContentTypesLoading(true);
-      const data = await fetchAPI(`/v1/integration/integrations/${wordPressIntegration.id}/content-types/`);
-      setContentTypes(data);
-    } catch (error: any) {
-      toast.error(`Failed to load content types: ${error.message}`);
-    } finally {
-      setContentTypesLoading(false);
-    }
-  };
-
   const formatRelativeTime = (iso: string | null) => {
     if (!iso) return '-';
     const then = new Date(iso).getTime();
@@ -745,23 +727,6 @@ export default function SiteSettings() {
           >
             Publishing
           </Button>
-          {(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress') && (
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setActiveTab('content-types');
-                navigate(`/sites/${siteId}/settings?tab=content-types`, { replace: true });
-              }}
-              className={`px-4 py-2 font-medium border-b-2 rounded-none transition-colors whitespace-nowrap ${
-                activeTab === 'content-types'
-                  ? 'border-error-500 text-error-600 dark:text-error-400'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
-              }`}
-              startIcon={<FileIcon className={`w-4 h-4 ${activeTab === 'content-types' ? 'text-error-500' : ''}`} />}
-            >
-              Content Types
-            </Button>
-          )}
           </div>
           
           {/* Integration Status Indicator - Larger */}
@@ -1331,143 +1296,8 @@ export default function SiteSettings() {
         </div>
       )}
 
-      {/* Content Types Tab */}
-      {activeTab === 'content-types' && (
-        <Card>
-          <div className="p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <h2 className="text-lg font-semibold">WordPress Content Types</h2>
-                <p className="text-sm text-gray-500 mt-1">View WordPress site structure and content counts</p>
-              </div>
-              {wordPressIntegration && (
-                <div className="flex items-center gap-3">
-                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
-                    <div className={`w-2 h-2 rounded-full ${
-                      wordPressIntegration.sync_status === 'success' ? 'bg-success-500' :
-                      wordPressIntegration.sync_status === 'failed' ? 'bg-error-500' :
-                      'bg-warning-500'
-                    }`}></div>
-                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
-                      {wordPressIntegration.sync_status === 'success' ? 'Synced' :
-                       wordPressIntegration.sync_status === 'failed' ? 'Failed' : 'Pending'}
-                    </span>
-                  </div>
-                  {(lastSyncTime || wordPressIntegration.last_sync_at) && (
-                    <div className="text-xs text-gray-500">
-                      {formatRelativeTime(lastSyncTime || wordPressIntegration.last_sync_at)}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-            {contentTypesLoading ? (
-              <div className="text-center py-8 text-gray-500">
-                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600 mb-3"></div>
-                <p>Loading content types...</p>
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center justify-end gap-3 mb-6">
-                  <Button
-                    variant="outline"
-                    disabled={syncLoading || !(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress')}
-                    onClick={handleManualSync}
-                    startIcon={syncLoading ? <RefreshCwIcon className="w-4 h-4 animate-spin" /> : <RefreshCwIcon className="w-4 h-4" />}
-                  >
-                    {syncLoading ? 'Syncing...' : 'Sync Structure'}
-                  </Button>
-                </div>
-
-                {!contentTypes ? (
-                  <div className="text-center py-12 text-gray-500">
-                    <svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-                    </svg>
-                    <p className="font-medium mb-1">No content types data available</p>
-                    <p className="text-sm">Click "Sync Structure" to fetch WordPress content types</p>
-                  </div>
-                ) : (
-                  <>
-                    {/* Post Types Section */}
-                    <div>
-                      <h3 className="text-md font-medium mb-3">Post Types</h3>
-                      <div className="space-y-3">
-                        {Object.entries(contentTypes.post_types || {}).map(([key, data]: [string, any]) => (
-                          <div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
-                            <div className="flex-1">
-                              <div className="flex items-center gap-3">
-                                <h4 className="font-medium">{data.label}</h4>
-                                <span className="text-sm text-gray-500">
-                                  {data.count} total · {data.synced_count} synced
-                                </span>
-                              </div>
-                              {data.last_synced && (
-                                <p className="text-xs text-gray-500 mt-1">
-                                  Last synced: {new Date(data.last_synced).toLocaleString()}
-                                </p>
-                              )}
-                            </div>
-                            <div className="flex items-center gap-3">
-                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
-                                {data.enabled ? 'Enabled' : 'Disabled'}
-                              </span>
-                              <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Taxonomies Section */}
-                    <div>
-                      <h3 className="text-md font-medium mb-3">Taxonomies</h3>
-                      <div className="space-y-3">
-                        {Object.entries(contentTypes.taxonomies || {}).map(([key, data]: [string, any]) => (
-                          <div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
-                            <div className="flex-1">
-                              <div className="flex items-center gap-3">
-                                <h4 className="font-medium">{data.label}</h4>
-                                <span className="text-sm text-gray-500">
-                                  {data.count} total · {data.synced_count} synced
-                                </span>
-                              </div>
-                              {data.last_synced && (
-                                <p className="text-xs text-gray-500 mt-1">
-                                  Last synced: {new Date(data.last_synced).toLocaleString()}
-                                </p>
-                              )}
-                            </div>
-                            <div className="flex items-center gap-3">
-                              <span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
-                                {data.enabled ? 'Enabled' : 'Disabled'}
-                              </span>
-                              <span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Summary */}
-                    {contentTypes.last_structure_fetch && (
-                      <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                          Structure last fetched: {new Date(contentTypes.last_structure_fetch).toLocaleString()}
-                        </p>
-                      </div>
-                    )}
-                  </>
-                )}
-              </>
-            )}
-          </div>
-        </Card>
-      )}
-
-      {/* Original tab content below */}
-      {activeTab !== 'content-types' && (
-        <div className="space-y-6">
+      {/* Tab content */}
+      <div className="space-y-6">
         {/* General Tab */}
         {activeTab === 'general' && (
           <>
@@ -2050,8 +1880,7 @@ export default function SiteSettings() {
             onIntegrationUpdate={handleIntegrationUpdate}
           />
         )}
-        </div>
-      )}
+      </div>
 
     </>
   );

frontend/src/pages/account/UsageLogsPage.tsx

@@ -25,8 +25,8 @@ import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import SelectDropdown from '../../components/form/SelectDropdown';
 import Input from '../../components/form/input/InputField';
+import { Pagination } from '../../components/ui/pagination/Pagination';
 import { getCreditUsage, getCreditUsageSummary, type CreditUsageLog } from '../../services/billing.api';
-import { getCreditUsage, type CreditUsageLog } from '../../services/billing.api';
 
 // User-friendly operation names (no model/token details)
 const OPERATION_LABELS: Record<string, string> = {

frontend/src/services/automationService.ts

@@ -282,4 +282,24 @@ export const automationService = {
     }
     return fetchAPI(buildUrl('/run_progress/', params));
   },
+
+  /**
+   * Check if site is eligible for automation
+   * A site is eligible if it has any data in the pipeline (keywords, clusters, ideas, etc.)
+   */
+  checkEligibility: async (siteId: number): Promise<{
+    is_eligible: boolean;
+    totals: {
+      keywords: number;
+      clusters: number;
+      ideas: number;
+      tasks: number;
+      content: number;
+      images: number;
+    };
+    total_items: number;
+    message: string | null;
+  }> => {
+    return fetchAPI(buildUrl('/eligibility/', { site_id: siteId }));
+  },
 };

frontend/src/store/moduleStore.ts

@@ -27,10 +27,8 @@ export const useModuleStore = create<ModuleState>()((set, get) => ({
     set({ loading: true, error: null });
     try {
       const settings = await fetchGlobalModuleSettings();
-      console.log('Loaded global module settings:', settings);
       set({ settings, loading: false });
     } catch (error: any) {
-      console.error('Failed to load global module settings:', error);
       set({ 
         error: error.message || 'Failed to load module settings', 
         loading: false 
@@ -49,7 +47,6 @@ export const useModuleStore = create<ModuleState>()((set, get) => ({
     
     const fieldName = `${moduleName.toLowerCase()}_enabled` as keyof GlobalModuleSettings;
     const enabled = settings[fieldName] === true;
-    console.log(`Module check for '${moduleName}' (${fieldName}): ${enabled}`);
     return enabled;
   },