componenets standardization 1

frontend/src/components/Automation/ActivityLog.tsx

@@ -5,6 +5,7 @@
 import React, { useState, useEffect } from 'react';
 import { automationService } from '../../services/automationService';
 import ComponentCard from '../common/ComponentCard';
+import Select from '../form/Select';
 
 interface ActivityLogProps {
   runId: string;
@@ -39,16 +40,16 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <label className="text-sm text-gray-600 dark:text-gray-400">Lines:</label>
-          <select
-            value={lines}
-            onChange={(e) => setLines(parseInt(e.target.value))}
-            className="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-          >
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-            <option value={200}>200</option>
-            <option value={500}>500</option>
-          </select>
+          <Select
+            options={[
+              { value: '50', label: '50' },
+              { value: '100', label: '100' },
+              { value: '200', label: '200' },
+              { value: '500', label: '500' },
+            ]}
+            defaultValue={String(lines)}
+            onChange={(val) => setLines(parseInt(val))}
+          />
         </div>
       </div>
       <div className="bg-gray-900 dark:bg-gray-950 text-success-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">

frontend/src/components/Automation/ConfigModal.tsx

@@ -6,6 +6,9 @@ import React, { useState } from 'react';
 import { AutomationConfig } from '../../services/automationService';
 import { Modal } from '../ui/modal';
 import Button from '../ui/button/Button';
+import Checkbox from '../form/input/Checkbox';
+import Select from '../form/Select';
+import InputField from '../form/input/InputField';
 
 interface ConfigModalProps {
   config: AutomationConfig;
@@ -51,17 +54,13 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
         <form onSubmit={handleSubmit}>
           {/* Enable/Disable */}
           <div className="mb-4">
-            <label className="flex items-center">
-              <input
-                type="checkbox"
-                checked={formData.is_enabled || false}
-                onChange={(e) =>
-                  setFormData({ ...formData, is_enabled: e.target.checked })
-                }
-                className="mr-2"
-              />
-              <span className="font-semibold">Enable Automation</span>
-            </label>
+            <Checkbox
+              label="Enable Automation"
+              checked={formData.is_enabled || false}
+              onChange={(checked) =>
+                setFormData({ ...formData, is_enabled: checked })
+              }
+            />
             <p className="text-sm text-gray-600 ml-6">
               When enabled, automation will run on the configured schedule
             </p>
@@ -70,36 +69,33 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
           {/* Frequency */}
           <div className="mb-4">
             <label className="block font-semibold mb-1">Frequency</label>
-            <select
-              value={formData.frequency || 'daily'}
-              onChange={(e) =>
+            <Select
+              options={[
+                { value: 'daily', label: 'Daily' },
+                { value: 'weekly', label: 'Weekly (Mondays)' },
+                { value: 'monthly', label: 'Monthly (1st of month)' },
+              ]}
+              defaultValue={formData.frequency || 'daily'}
+              onChange={(val) =>
                 setFormData({
                   ...formData,
-                  frequency: e.target.value as 'daily' | 'weekly' | 'monthly',
+                  frequency: val as 'daily' | 'weekly' | 'monthly',
                 })
               }
-              className="border rounded px-3 py-2 w-full"
-            >
-              <option value="daily">Daily</option>
-              <option value="weekly">Weekly (Mondays)</option>
-              <option value="monthly">Monthly (1st of month)</option>
-            </select>
+            />
           </div>
 
           {/* Scheduled Time */}
           <div className="mb-4">
-            <label className="block font-semibold mb-1">Scheduled Time</label>
-            <input
+            <InputField
+              label="Scheduled Time"
               type="time"
               value={formData.scheduled_time || '02:00'}
               onChange={(e) =>
                 setFormData({ ...formData, scheduled_time: e.target.value })
               }
-              className="border rounded px-3 py-2 w-full"
+              hint="Time of day to run automation (24-hour format)"
             />
-            <p className="text-sm text-gray-600 mt-1">
-              Time of day to run automation (24-hour format)
-            </p>
           </div>
 
           {/* Batch Sizes */}
@@ -111,10 +107,8 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 1: Keywords → Clusters
-                </label>
-                <input
+                <InputField
+                  label="Stage 1: Keywords → Clusters"
                   type="number"
                   value={formData.stage_1_batch_size || 20}
                   onChange={(e) =>
@@ -123,17 +117,14 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_1_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={100}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="100"
                 />
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 2: Clusters → Ideas
-                </label>
-                <input
+                <InputField
+                  label="Stage 2: Clusters → Ideas"
                   type="number"
                   value={formData.stage_2_batch_size || 1}
                   onChange={(e) =>
@@ -142,17 +133,14 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_2_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={10}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="10"
                 />
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 3: Ideas → Tasks
-                </label>
-                <input
+                <InputField
+                  label="Stage 3: Ideas → Tasks"
                   type="number"
                   value={formData.stage_3_batch_size || 20}
                   onChange={(e) =>
@@ -161,17 +149,14 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_3_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={100}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="100"
                 />
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 4: Tasks → Content
-                </label>
-                <input
+                <InputField
+                  label="Stage 4: Tasks → Content"
                   type="number"
                   value={formData.stage_4_batch_size || 1}
                   onChange={(e) =>
@@ -180,17 +165,14 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_4_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={10}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="10"
                 />
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 5: Content → Image Prompts
-                </label>
-                <input
+                <InputField
+                  label="Stage 5: Content → Image Prompts"
                   type="number"
                   value={formData.stage_5_batch_size || 1}
                   onChange={(e) =>
@@ -199,17 +181,14 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_5_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={10}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="10"
                 />
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Stage 6: Image Prompts → Images
-                </label>
-                <input
+                <InputField
+                  label="Stage 6: Image Prompts → Images"
                   type="number"
                   value={formData.stage_6_batch_size || 1}
                   onChange={(e) =>
@@ -218,9 +197,8 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       stage_6_batch_size: parseInt(e.target.value),
                     })
                   }
-                  min={1}
-                  max={10}
-                  className="border rounded px-3 py-2 w-full"
+                  min="1"
+                  max="10"
                 />
               </div>
             </div>
@@ -235,10 +213,8 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm mb-1">
-                  Within-Stage Delay (seconds)
-                </label>
-                <input
+                <InputField
+                  label="Within-Stage Delay (seconds)"
                   type="number"
                   value={formData.within_stage_delay || 3}
                   onChange={(e) =>
@@ -247,20 +223,15 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       within_stage_delay: parseInt(e.target.value),
                     })
                   }
-                  min={0}
-                  max={30}
-                  className="border rounded px-3 py-2 w-full"
+                  min="0"
+                  max="30"
+                  hint="Delay between batches within a stage"
                 />
-                <p className="text-xs text-gray-500 mt-1">
-                  Delay between batches within a stage
-                </p>
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
-                  Between-Stage Delay (seconds)
-                </label>
-                <input
+                <InputField
+                  label="Between-Stage Delay (seconds)"
                   type="number"
                   value={formData.between_stage_delay || 5}
                   onChange={(e) =>
@@ -269,13 +240,10 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
                       between_stage_delay: parseInt(e.target.value),
                     })
                   }
-                  min={0}
-                  max={60}
-                  className="border rounded px-3 py-2 w-full"
+                  min="0"
+                  max="60"
+                  hint="Delay between stage transitions"
                 />
-                <p className="text-xs text-gray-500 mt-1">
-                  Delay between stage transitions
-                </p>
               </div>
             </div>
           </div>

frontend/src/components/Automation/CurrentProcessingCard.tsx

@@ -14,6 +14,7 @@ import {
 } from '../../services/api';
 import { useToast } from '../ui/toast/ToastContainer';
 import Button from '../ui/button/Button';
+import IconButton from '../ui/button/IconButton';
 import { 
   PlayIcon, 
   PauseIcon, 
@@ -243,12 +244,14 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
       <div className="bg-error-50 dark:bg-error-900/20 border-2 border-error-500 rounded-lg p-4 mb-6">
         <div className="flex items-center justify-between">
           <p className="text-error-700 dark:text-error-300 text-sm">{error}</p>
-          <button
+          <IconButton
+            icon={<XMarkIcon className="w-5 h-5" />}
+            variant="ghost"
+            tone="danger"
+            size="sm"
+            title="Close"
             onClick={onClose}
-            className="text-error-500 hover:text-error-700 dark:hover:text-error-300"
-          >
-            <XMarkIcon className="w-5 h-5" />
-          </button>
+          />
         </div>
       </div>
     );
@@ -564,13 +567,15 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
         </div>
         {/* Debug table toggle + table for stage data */}
         <div className="mt-4">
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            tone="neutral"
+            size="xs"
             onClick={() => setShowDebugTable(!showDebugTable)}
-            className="text-xs text-gray-600 hover:underline"
           >
             {showDebugTable ? 'Hide' : 'Show'} debug table
-          </button>
+          </Button>
           {showDebugTable && (
             <div className="mt-3 bg-white dark:bg-gray-800 p-3 rounded border">
               <div className="text-sm font-semibold mb-2">Stage Data</div>

frontend/src/components/Automation/CurrentProcessingCardV2.tsx

@@ -7,6 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { automationService, ProcessingState, AutomationRun, PipelineStage } from '../../services/automationService';
 import { useToast } from '../ui/toast/ToastContainer';
 import Button from '../ui/button/Button';
+import IconButton from '../ui/button/IconButton';
 import { 
   PlayIcon, 
   PauseIcon, 
@@ -228,13 +229,14 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
         </div>
         
         {/* Close Button - Top Right */}
-        <button
-          onClick={onClose}
-          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-1"
+        <IconButton
+          icon={<XMarkIcon className="w-5 h-5" />}
+          variant="ghost"
+          tone="neutral"
+          size="sm"
           title="Close"
-        >
-          <XMarkIcon className="w-5 h-5" />
-        </button>
+          onClick={onClose}
+        />
       </div>
 
       {/* Progress Section */}