UX Text Improvements: Automation Page - User-Friendly Language

IMPROVEMENTS - Automation Page:
- Page title: 'AI Automation Pipeline' → 'Automate Everything'
- Page description updated to be more conversational
- Status badge: 'Ready to Run' → 'Ready to Go!' with expanded explanation
- Schedule display: More conversational format (e.g., 'Runs every day at 2:00 AM | Last run: Never | Uses about 5 credits per run')
- Pipeline stage names completely rewritten with descriptions:
  - 'Keywords → Clusters' → 'ORGANIZE KEYWORDS' (Group related search terms into topic clusters)
  - 'Clusters → Ideas' → 'CREATE ARTICLE IDEAS' (Generate article titles and outlines for each cluster)
  - 'Ideas → Tasks' → 'PREPARE WRITING JOBS' (Convert ideas into tasks for the AI writer)
  - 'Tasks → Content' → 'WRITE ARTICLES' (AI generates full, complete articles)
  - 'Content → Image Prompts' → 'CREATE IMAGE DESCRIPTIONS' (Generate descriptions for AI to create images)
  - 'Image Prompts → Images' → 'GENERATE IMAGES' (AI creates custom images for your articles)
  - 'Manual Review Gate' → 'REVIEW & PUBLISH ⚠️' (Review articles before they go live)
- Button updates:
  - 'Configure' → '⚙️ Adjust Settings' (with tooltip)
  - 'Run Now' now has tooltip explaining it starts immediately
- Pipeline statistics section:
  - Added header: 'Here's what's in your automation pipeline:'
  - Metric labels updated with context:
    - 'Keywords' → 'Search Terms (waiting to organize)'
    - 'Clusters' → 'Topic Groups (ready for ideas)'
    - 'Ideas' → 'Article Ideas (waiting to write)'
    - 'Content' → 'Articles (in various stages)'
    - 'Images' → 'Images (created and waiting)'

NO CODE CHANGES: Only visible user-facing text updates

frontend/src/pages/Automation/AutomationPage.tsx

@@ -37,13 +37,13 @@ import {
 } from '../../icons';
 
 const STAGE_CONFIG = [
-  { icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Keywords → Clusters' },
+  { icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'ORGANIZE KEYWORDS', desc: 'Group related search terms into topic clusters' },
-  { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
+  { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'CREATE ARTICLE IDEAS', desc: 'Generate article titles and outlines for each cluster' },
-  { icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' },
+  { icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'PREPARE WRITING JOBS', desc: 'Convert ideas into tasks for the AI writer' },
-  { icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' },
+  { icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'WRITE ARTICLES', desc: 'AI generates full, complete articles' },
-  { icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' },
+  { icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'CREATE IMAGE DESCRIPTIONS', desc: 'Generate descriptions for AI to create images' },
-  { icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' },
+  { icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'GENERATE IMAGES', desc: 'AI creates custom images for your articles' },
-  { icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Manual Review Gate' },
+  { icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'REVIEW & PUBLISH ⚠️', desc: 'Review articles before they go live (manual approval needed)' },
 ];
 
 const AutomationPage: React.FC = () => {
@@ -378,7 +378,7 @@ const AutomationPage: React.FC = () => {
   };
   return (
     <>
-      <PageMeta title="AI Automation Pipeline | IGNY8" description="Automated content creation from keywords to published articles" />
+      <PageMeta title="Automate Everything | IGNY8" description="Set your content on automatic - Let our AI create and publish content on a schedule" />
       
       <div className="space-y-6">
         {/* Header */}
@@ -389,7 +389,7 @@ const AutomationPage: React.FC = () => {
                 <BoltIcon className="text-white size-5" />
               </div>
               <div>
-                <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
+                <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Automate Everything</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>
@@ -411,11 +411,11 @@ const AutomationPage: React.FC = () => {
                 <div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
                   {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
                   {currentRun?.status === 'paused' && 'Paused'}
-                  {!currentRun && totalPending > 0 && 'Ready to Run'}
+                  {!currentRun && totalPending > 0 && 'Ready to Go!'}
                   {!currentRun && totalPending === 0 && 'No Items Pending'}
                 </div>
                 <div className="text-xs text-slate-600 dark:text-gray-400 truncate">
-                  {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
+                  {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items waiting - Everything is queued up and ready for the next run` : 'All stages clear')}
                 </div>
               </div>
             </div>
@@ -444,16 +444,15 @@ const AutomationPage: React.FC = () => {
                 </div>
                 <div className="h-4 w-px bg-white/25"></div>
                 <div className="text-sm text-white/90">
-                  <span className="font-medium capitalize">{config.frequency}</span> at <span className="font-medium">{config.scheduled_time}</span>
+                  Runs <span className="font-medium capitalize">{config.frequency === 'daily' ? 'every day' : config.frequency}</span> at <span className="font-medium">{config.scheduled_time}</span>
                 </div>
                 <div className="h-4 w-px bg-white/25"></div>
                 <div className="text-sm text-white/80">
-                  Last: <span className="font-medium">{config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}</span>
+                  Last run: <span className="font-medium">{config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}</span>
                 </div>
                 <div className="h-4 w-px bg-white/25"></div>
                 <div className="text-sm text-white/90">
-                  <span className="font-medium">Est:</span>{' '}
+                  Uses about <span className="font-semibold text-white">{estimate?.estimated_credits || 0} credits</span> per run
-                  <span className="font-semibold text-white">{estimate?.estimated_credits || 0} credits</span>
                   {estimate && !estimate.sufficient && (
                     <span className="ml-1 text-white/90 font-semibold">(Low)</span>
                   )}
@@ -465,9 +464,10 @@ const AutomationPage: React.FC = () => {
                   variant="outline"
                   tone="brand"
                   size="sm"
+                  title="Change when this automation runs and how many credits it uses"
                   className="!border-white !text-white hover:!bg-white hover:!text-brand-700"
                 >
-                  Configure
+                  ⚙️ Adjust Settings
                 </Button>
                 {currentRun?.status === 'running' && (
                   <Button
@@ -498,6 +498,7 @@ const AutomationPage: React.FC = () => {
                     tone="success"
                     size="sm"
                     disabled={!config?.is_enabled}
+                    title="Start the automation immediately instead of waiting for the scheduled time"
                     className="!bg-white !text-brand-700 hover:!bg-success-600 hover:!text-white"
                   >
                     Run Now
@@ -508,6 +509,11 @@ const AutomationPage: React.FC = () => {
           </ComponentCard>
         )}
 
+        {/* Pipeline Statistics Header */}
+        <div className="mb-4">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white">Here's what's in your automation pipeline:</h3>
+        </div>
+
         {/* Metrics Summary Cards */}
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           {/* Keywords */}
@@ -517,7 +523,7 @@ const AutomationPage: React.FC = () => {
                 <div className="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                   <ListIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-blue-900 dark:text-blue-100">Keywords</div>
+                <div className="text-sm font-bold text-blue-900 dark:text-blue-100">Search Terms</div>
               </div>
               {(() => {
                 const res = getStageResult(1);
@@ -525,6 +531,7 @@ const AutomationPage: React.FC = () => {
                 return (
                   <div className="text-right">
                     <div className="text-3xl font-bold text-blue-900">{total}</div>
+                    <div className="text-xs text-blue-700 dark:text-blue-300">waiting to organize</div>
                   </div>
                 );
               })()}
@@ -549,7 +556,7 @@ const AutomationPage: React.FC = () => {
                 <div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
                   <GroupIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-purple-900 dark:text-purple-100">Clusters</div>
+                <div className="text-sm font-bold text-purple-900 dark:text-purple-100">Topic Groups</div>
               </div>
               {(() => {
                 const res = getStageResult(2);
@@ -557,6 +564,7 @@ const AutomationPage: React.FC = () => {
                 return (
                   <div className="text-right">
                     <div className="text-3xl font-bold text-purple-900">{total}</div>
+                    <div className="text-xs text-purple-700 dark:text-purple-300">ready for ideas</div>
                   </div>
                 );
               })()}
@@ -581,7 +589,7 @@ const AutomationPage: React.FC = () => {
                 <div className="size-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
                   <CheckCircleIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Ideas</div>
+                <div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Article Ideas</div>
               </div>
               {(() => {
                 const res = getStageResult(3);
@@ -589,6 +597,7 @@ const AutomationPage: React.FC = () => {
                 return (
                   <div className="text-right">
                     <div className="text-3xl font-bold text-indigo-900">{total}</div>
+                    <div className="text-xs text-indigo-700 dark:text-indigo-300">waiting to write</div>
                   </div>
                 );
               })()}
@@ -615,7 +624,7 @@ const AutomationPage: React.FC = () => {
                 <div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
                   <FileTextIcon className="size-5 text-white" />
                 </div>
-                <div className="text-sm font-bold text-green-900 dark:text-green-100">Content</div>
+                <div className="text-sm font-bold text-green-900 dark:text-green-100">Articles</div>
               </div>
               {(() => {
                 const res = getStageResult(4);
@@ -623,6 +632,7 @@ const AutomationPage: React.FC = () => {
                 return (
                   <div className="text-right">
                       <div className="text-3xl font-bold text-green-900">{total}</div>
+                      <div className="text-xs text-green-700 dark:text-green-300">in various stages</div>
                     </div>
                 );
               })()}
@@ -657,6 +667,7 @@ const AutomationPage: React.FC = () => {
                 return (
                   <div className="text-right">
                     <div className="text-3xl font-bold text-pink-900">{total}</div>
+                    <div className="text-xs text-pink-700 dark:text-pink-300">created and waiting</div>
                   </div>
                 );
               })()}