From 293182da317ec06577b9bb7642a2f0ee1514fdeb Mon Sep 17 00:00:00 2001 From: "IGNY8 VPS (Salman)" Date: Thu, 25 Dec 2025 06:09:03 +0000 Subject: [PATCH] UX Text Improvements: Automation Page - User-Friendly Language MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../src/pages/Automation/AutomationPage.tsx | 51 +++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/frontend/src/pages/Automation/AutomationPage.tsx b/frontend/src/pages/Automation/AutomationPage.tsx index b30a165a..f1e82416 100644 --- a/frontend/src/pages/Automation/AutomationPage.tsx +++ b/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: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' }, - { icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' }, - { icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' }, - { icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' }, - { icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' }, - { icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Manual Review Gate' }, + { 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: '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: '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: '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: '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: '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: '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 ( <> - +
{/* Header */} @@ -389,7 +389,7 @@ const AutomationPage: React.FC = () => {
-

AI Automation Pipeline

+

Automate Everything

{activeSite && (

Site: {activeSite.name} @@ -411,11 +411,11 @@ const AutomationPage: React.FC = () => {

{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'}
- {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')}
@@ -444,16 +444,15 @@ const AutomationPage: React.FC = () => {
- {config.frequency} at {config.scheduled_time} + Runs {config.frequency === 'daily' ? 'every day' : config.frequency} at {config.scheduled_time}
- Last: {config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'} + Last run: {config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}
- Est:{' '} - {estimate?.estimated_credits || 0} credits + Uses about {estimate?.estimated_credits || 0} credits per run {estimate && !estimate.sufficient && ( (Low) )} @@ -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 {currentRun?.status === 'running' && (
{(() => { const res = getStageResult(2); @@ -557,6 +564,7 @@ const AutomationPage: React.FC = () => { return (
{total}
+
ready for ideas
); })()} @@ -581,7 +589,7 @@ const AutomationPage: React.FC = () => {
-
Ideas
+
Article Ideas
{(() => { const res = getStageResult(3); @@ -589,6 +597,7 @@ const AutomationPage: React.FC = () => { return (
{total}
+
waiting to write
); })()} @@ -615,7 +624,7 @@ const AutomationPage: React.FC = () => {
-
Content
+
Articles
{(() => { const res = getStageResult(4); @@ -623,6 +632,7 @@ const AutomationPage: React.FC = () => { return (
{total}
+
in various stages
); })()} @@ -657,6 +667,7 @@ const AutomationPage: React.FC = () => { return (
{total}
+
created and waiting
); })()}