Upload 27 files

App.tsx

@@ -0,0 +1,926 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { useAuth } from './services/authService';
+import { CsvInputRow, QueueItem, ResultRow, JobHistoryItem, ProcessedResult, BatchError } from './types';
+import FileUpload from './components/FileUpload';
+import ResultsTable from './components/ResultsTable';
+import SignInPage from './components/SignInPage';
+import { runWorkflow } from './services/difyService';
+import { CheckCircleIcon, XCircleIcon, ClockIcon, UploadIcon, RocketLaunchIcon, PlusIcon, HistoryIcon, DocumentTextIcon, TrashIcon } from './components/Icons';
+import Spinner from './components/Spinner';
+
+// --- UTILS & HOOKS (in-file for simplicity) ---
+
+const generateUUID = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+// Calculate approximate storage size for job results
+const estimateStorageSize = (results: ResultRow[]): number => {
+    return JSON.stringify(results).length;
+};
+
+// Maximum storage size per job (500KB)
+const MAX_JOB_STORAGE_SIZE = 500 * 1024;
+
+// Enhanced localStorage hook with better error handling and data validation
+function useLocalStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            if (item) {
+                const parsed = JSON.parse(item);
+                
+                // Enhanced validation for different data types
+                if (Array.isArray(parsed)) {
+                    // Filter out old items that had the 'results' property which caused storage errors.
+                    let cleanHistory = parsed.filter(p => typeof p === 'object' && p !== null && !p.hasOwnProperty('results'));
+                    
+                    // Remove duplicates based on ID if it's a history array
+                    if (key === 'ace-copywriting-history' && cleanHistory.length > 0) {
+                        const uniqueHistory = cleanHistory.reduce((acc: any[], current: any) => {
+                            const existingIndex = acc.findIndex(item => item.id === current.id);
+                            if (existingIndex === -1) {
+                                acc.push(current);
+                            }
+                            return acc;
+                        }, []);
+                        cleanHistory = uniqueHistory;
+                    }
+                    
+                    return cleanHistory;
+                }
+                return parsed;
+            }
+            return initialValue;
+        } catch (error) {
+            console.error('Error reading from localStorage, resetting to initial value.', error);
+            window.localStorage.removeItem(key); // Clear corrupted item
+            return initialValue;
+        }
+    });
+
+    const setValue: React.Dispatch<React.SetStateAction<T>> = useCallback((value) => {
+        try {
+            setStoredValue(prev => {
+                const valueToStore = value instanceof Function ? value(prev) : value;
+                
+                // Check storage quota before saving
+                const serialized = JSON.stringify(valueToStore);
+                if (serialized.length > 5 * 1024 * 1024) { // 5MB limit
+                    console.warn('Data too large for localStorage, truncating...');
+                    // For history, keep only the most recent items
+                    if (Array.isArray(valueToStore) && key === 'ace-copywriting-history') {
+                        const truncated = (valueToStore as any[]).slice(0, 5); // Keep only 5 most recent
+                        window.localStorage.setItem(key, JSON.stringify(truncated));
+                        return truncated as T;
+                    }
+                }
+                
+                window.localStorage.setItem(key, serialized);
+                return valueToStore;
+            });
+        } catch (error) {
+            console.error('Error writing to localStorage', error);
+            // If quota exceeded, try to clear old data and retry
+            if (error instanceof Error && error.name === 'QuotaExceededError') {
+                try {
+                    // Clear old history items to make space
+                    if (key === 'ace-copywriting-history') {
+                        const currentHistory = window.localStorage.getItem(key);
+                        if (currentHistory) {
+                            const parsed = JSON.parse(currentHistory);
+                            if (Array.isArray(parsed) && parsed.length > 3) {
+                                const truncated = parsed.slice(0, 3); // Keep only 3 most recent
+                                window.localStorage.setItem(key, JSON.stringify(truncated));
+                                setStoredValue(truncated as T);
+                            }
+                        }
+                    }
+                } catch (clearError) {
+                    console.error('Failed to clear storage for new data', clearError);
+                }
+            }
+        }
+    }, [key]);
+    
+    return [storedValue, setValue];
+}
+
+// Hook for user preferences
+function useUserPreferences() {
+    const [preferences, setPreferences] = useLocalStorage('ace-copywriting-preferences', {
+        autoSave: true,
+        maxHistoryItems: 10,
+        showDebugInfo: false,
+        defaultExportFormat: 'csv' as 'csv' | 'pdf' | 'docx' | 'json',
+        theme: 'dark' as 'dark' | 'light'
+    });
+    
+    return [preferences, setPreferences] as const;
+}
+
+// Hook for session data (cleared on browser close)
+function useSessionStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            const item = window.sessionStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error('Error reading from sessionStorage', error);
+            return initialValue;
+        }
+    });
+
+    const setValue: React.Dispatch<React.SetStateAction<T>> = useCallback((value) => {
+        try {
+            setStoredValue(prev => {
+                const valueToStore = value instanceof Function ? value(prev) : value;
+                window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+                return valueToStore;
+            });
+        } catch (error) {
+            console.error('Error writing to sessionStorage', error);
+        }
+    }, [key]);
+    
+    return [storedValue, setValue];
+}
+
+
+// --- TYPES ---
+
+type ProcessingStatus = 'idle' | 'processing' | 'completed' | 'error';
+type ViewState = 
+    | { type: 'welcome' }
+    | { type: 'new_job' }
+    | { type: 'view_history'; jobId: string };
+
+// --- CONSTANTS ---
+const MAX_HISTORY_ITEMS = 10;
+
+// --- MAIN COMPONENT ---
+
+const App: React.FC = () => {
+    const { user, logout } = useAuth();
+    const [history, setHistory] = useLocalStorage<JobHistoryItem[]>('ace-copywriting-history', []);
+    const [preferences, setPreferences] = useUserPreferences();
+    const [view, setView] = useState<ViewState>(() => history.length > 0 ? { type: 'new_job' } : { type: 'welcome' });
+
+    // State for the currently active processing job - persist in sessionStorage
+    const [jobId, setJobId] = useSessionStorage<string | null>('ace-current-job-id', null);
+    const [filename, setFilename] = useSessionStorage<string>('ace-current-filename', '');
+    const [queue, setQueue] = useSessionStorage<QueueItem[]>('ace-current-queue', []);
+    const [results, setResults] = useSessionStorage<ResultRow[]>('ace-current-results', []);
+    const [status, setStatus] = useSessionStorage<ProcessingStatus>('ace-current-status', 'idle');
+    const [error, setError] = useSessionStorage<string | null>('ace-current-error', null);
+    const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+    // New: capture all user-facing errors and show a details modal - persist in sessionStorage
+    const [errors, setErrors] = useSessionStorage<BatchError[]>('ace-current-errors', []);
+    const [showErrorDetails, setShowErrorDetails] = useState(false);
+    const [expandedDebugIndex, setExpandedDebugIndex] = useState<number | null>(null);
+
+    // Auto-save current job state when it changes
+    useEffect(() => {
+        if (preferences.autoSave && jobId) {
+            const jobState = {
+                jobId,
+                filename,
+                queue,
+                results,
+                status,
+                error,
+                errors,
+                timestamp: new Date().toISOString()
+            };
+            
+            try {
+                window.sessionStorage.setItem('ace-current-job-state', JSON.stringify(jobState));
+            } catch (error) {
+                console.warn('Failed to auto-save job state:', error);
+            }
+        }
+    }, [preferences.autoSave, jobId, filename, queue, results, status, error, errors]);
+
+    // Restore job state on app load
+    useEffect(() => {
+        try {
+            const savedState = window.sessionStorage.getItem('ace-current-job-state');
+            if (savedState) {
+                const jobState = JSON.parse(savedState);
+                const stateAge = Date.now() - new Date(jobState.timestamp).getTime();
+                const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+                
+                // Only restore if state is recent
+                if (stateAge < maxAge) {
+                    setJobId(jobState.jobId);
+                    setFilename(jobState.filename);
+                    setQueue(jobState.queue || []);
+                    setResults(jobState.results || []);
+                    setStatus(jobState.status || 'idle');
+                    setError(jobState.error);
+                    setErrors(jobState.errors || []);
+                    
+                    // Set appropriate view based on restored state
+                    if (jobState.status === 'completed' && jobState.results?.length > 0) {
+                        setView({ type: 'new_job' }); // Show results view
+                    } else if (jobState.status === 'processing') {
+                        setView({ type: 'new_job' }); // Show processing view
+                    }
+                } else {
+                    // Clear old state
+                    window.sessionStorage.removeItem('ace-current-job-state');
+                }
+            }
+        } catch (error) {
+            console.warn('Failed to restore job state:', error);
+            // Clear corrupted state
+            window.sessionStorage.removeItem('ace-current-job-state');
+        }
+    }, []);
+
+    const resetNewJobState = useCallback(() => {
+        setJobId(generateUUID());
+        setFilename('');
+        setQueue([]);
+        setResults([]);
+        setStatus('idle');
+        setError(null);
+        setErrors([]);
+        setShowErrorDetails(false);
+        
+        // Clear session storage for new job
+        window.sessionStorage.removeItem('ace-current-job-state');
+    }, [setJobId, setFilename, setQueue, setResults, setStatus, setError, setErrors]);
+
+    const handleStartNewJob = () => {
+        resetNewJobState();
+        setView({ type: 'new_job' });
+    };
+
+    const handleDeleteJob = (jobId: string) => {
+        setHistory(prevHistory => prevHistory.filter(h => h.id !== jobId));
+        setDeleteConfirmId(null);
+        
+        // If we're currently viewing the deleted job, navigate back to new job
+        if (view.type === 'view_history' && view.jobId === jobId) {
+            setView({ type: 'new_job' });
+        }
+    };
+
+    // Enhanced file parsing with better error handling
+    const handleFileParsed = useCallback((data: CsvInputRow[], file: File) => {
+        // Ensure we have a jobId for this processing session
+        if (!jobId) {
+            setJobId(generateUUID());
+        }
+        setFilename(file.name);
+        const initialQueue = data.map((row, index) => ({
+            id: index,
+            data: row,
+            status: 'pending' as const,
+        }));
+        setQueue(initialQueue);
+        setError(null);
+        setErrors([]);
+        
+        // Save file info to history for reference
+        const fileInfo = {
+            filename: file.name,
+            size: file.size,
+            lastModified: file.lastModified,
+            rowCount: data.length
+        };
+        
+        try {
+            const fileHistory = JSON.parse(localStorage.getItem('ace-file-history') || '[]');
+            const updatedHistory = [fileInfo, ...fileHistory.slice(0, 9)]; // Keep last 10 files
+            localStorage.setItem('ace-file-history', JSON.stringify(updatedHistory));
+        } catch (error) {
+            console.warn('Failed to save file history:', error);
+        }
+    }, [jobId, setJobId, setFilename, setQueue, setError, setErrors]);
+    
+    const handleStartProcessing = async () => {
+        console.log('Start processing clicked. JobId:', jobId, 'Queue length:', queue.length);
+        if (!jobId || queue.length === 0) {
+            console.log('Processing aborted - missing jobId or empty queue');
+            return;
+        }
+        console.log('Starting processing...');
+        setStatus('processing');
+        setError(null);
+        setErrors([]);
+        setResults([]); // Clear previous results
+        
+        const newResults: ResultRow[] = [];
+
+        for (const [index, item] of queue.entries()) {
+            setQueue(prev => prev.map(q => q.id === item.id ? { ...q, status: 'processing' } : q));
+            try {
+                const processedData: ProcessedResult = await runWorkflow(item.data);
+                const resultRow: ResultRow = { ...item.data, ...processedData, id: item.id };
+                newResults.push(resultRow);
+                setResults(prev => [...prev, resultRow]); // Add one result at a time
+                setQueue(prev => prev.map(q => q.id === item.id ? { ...q, status: 'completed' } : q));
+            } catch (e) {
+                const msg = e instanceof Error ? e.message : 'An unknown error occurred';
+                setQueue(prev => prev.map(q => q.id === item.id ? { ...q, status: 'failed', error: msg } : q));
+                setError('Some rows failed during processing.');
+                setErrors(prev => ([
+                    ...prev,
+                    { row: item.id + 1, code: e instanceof Error ? (e as any).code || 'UNKNOWN' : 'UNKNOWN', message: msg, at: (e as any).at || 'unknown', suggestion: 'Retry later or check input for this row.' }
+                ]));
+            }
+
+            // Add a delay between requests to avoid overwhelming the API.
+            if (index < queue.length - 1) {
+                await delay(500); // 0.5 second pause
+            }
+        }
+        setStatus('completed');
+    };
+    
+    // Effect to save job summary to history when completed
+    useEffect(() => {
+        console.log('History save effect triggered:', { status, jobId, queueLength: queue.length, resultsLength: results.length });
+        if (status === 'completed' && jobId) {
+            console.log('Saving job to history:', { jobId, filename, queueLength: queue.length, resultsLength: results.length });
+            const completedCount = queue.filter(q => q.status === 'completed').length;
+            const failedCount = queue.filter(q => q.status === 'failed').length;
+            
+            setHistory(prevHistory => {
+                // Check if this job is already in history to prevent duplicates
+                const existingIndex = prevHistory.findIndex(h => h.id === jobId);
+                if (existingIndex !== -1) {
+                    return prevHistory; // Already exists, don't add again
+                }
+
+                // Check if results are too large for storage
+                const storageSize = estimateStorageSize(results);
+                const shouldStoreResults = storageSize <= MAX_JOB_STORAGE_SIZE;
+                
+                if (!shouldStoreResults) {
+                    console.warn(`Job results too large for storage (${Math.round(storageSize / 1024)}KB). Only storing summary.`);
+                }
+
+                const newHistoryItem: JobHistoryItem = {
+                    id: jobId,
+                    filename,
+                    date: new Date().toISOString(),
+                    totalRows: queue.length,
+                    completedCount,
+                    failedCount,
+                    results: shouldStoreResults ? [...results] : undefined, // Store results if not too large
+                };
+
+                const updatedHistory = [newHistoryItem, ...prevHistory];
+                
+                // Prune history to the maximum allowed size from preferences
+                const maxItems = preferences.maxHistoryItems || 10;
+                const prunedHistory = updatedHistory.slice(0, maxItems);
+                
+                console.log('Job saved to history successfully:', newHistoryItem);
+                return prunedHistory;
+            });
+            
+            // Clear session storage after successful save
+            window.sessionStorage.removeItem('ace-current-job-state');
+        }
+    }, [status, jobId, filename, queue.length, results, setHistory, preferences.maxHistoryItems]);
+
+    // Cleanup old history items periodically
+    useEffect(() => {
+        const cleanupHistory = () => {
+            setHistory(prevHistory => {
+                const maxAge = 30 * 24 * 60 * 60 * 1000; // 30 days
+                const now = Date.now();
+                const filtered = prevHistory.filter(item => {
+                    const itemAge = now - new Date(item.date).getTime();
+                    return itemAge < maxAge;
+                });
+                
+                if (filtered.length !== prevHistory.length) {
+                    console.log(`Cleaned up ${prevHistory.length - filtered.length} old history items`);
+                }
+                
+                return filtered;
+            });
+        };
+
+        // Clean up on app start
+        cleanupHistory();
+        
+        // Set up periodic cleanup (every hour)
+        const interval = setInterval(cleanupHistory, 60 * 60 * 1000);
+        
+        return () => clearInterval(interval);
+    }, [setHistory]);
+    
+    // --- RENDER ---
+
+    const renderStatusIcon = (itemStatus: QueueItem['status']) => {
+        switch (itemStatus) {
+            case 'pending': return <ClockIcon className="w-5 h-5 text-gray-400 flex-shrink-0" />;
+            case 'processing': return <Spinner />;
+            case 'completed': return <CheckCircleIcon className="w-5 h-5 text-green-400 flex-shrink-0" />;
+            case 'failed': return <XCircleIcon className="w-5 h-5 text-red-400 flex-shrink-0" />;
+        }
+    };
+
+    const getActiveJobId = () => {
+        if (view.type === 'new_job' && jobId) return jobId;
+        if (view.type === 'view_history') return view.jobId;
+        return null;
+    }
+
+    const ErrorDetailsModal: React.FC<{ onClose: () => void; items: BatchError[] }> = ({ onClose, items }) => (
+        <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50" onClick={onClose}>
+            <div className="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full" onClick={e => e.stopPropagation()}>
+                <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-xl font-bold text-white">Processing Errors</h3>
+                    <div className="flex items-center gap-2">
+                        <button onClick={() => setErrors([])} className="text-xs px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-gray-200">Clear</button>
+                        <button onClick={onClose} className="text-gray-300 hover:text-white">Close</button>
+                    </div>
+                </div>
+                {items.length === 0 ? (
+                    <p className="text-gray-300">No errors recorded.</p>
+                ) : (
+                    <div className="max-h-80 overflow-y-auto divide-y divide-gray-700">
+                        {items.map((e, idx) => (
+                            <div key={idx} className="py-3 text-sm">
+                                <div className="flex items-start justify-between">
+                                    <div>
+                                        <div className="text-white font-medium">{e.row ? `Row ${e.row}` : 'General'} — {e.code}</div>
+                                        <div className="text-gray-300 mt-1">{e.message}</div>
+                                        {e.suggestion && <div className="text-gray-400 mt-1">Suggestion: {e.suggestion}</div>}
+                                        {e.at && <div className="text-gray-500 mt-1 text-xs">Area: {e.at}</div>}
+                                    </div>
+                                    <button
+                                        className="text-xs text-gray-400 hover:text-white"
+                                        onClick={() => setErrors(prev => prev.filter((_, i) => i !== idx))}
+                                        title="Dismiss this error"
+                                    >Dismiss</button>
+                                </div>
+                                {e.debug && (
+                                    <div className="mt-2">
+                                        <button
+                                            className="text-xs text-blue-300 hover:text-blue-200 underline"
+                                            onClick={() => setExpandedDebugIndex(expandedDebugIndex === idx ? null : idx)}
+                                        >
+                                            {expandedDebugIndex === idx ? 'Hide debug' : 'Show debug'}
+                                        </button>
+                                        {expandedDebugIndex === idx && (
+                                            <div className="mt-2 bg-gray-900 rounded border border-gray-700 p-2">
+                                                <pre className="text-xs text-gray-300 whitespace-pre-wrap max-h-48 overflow-auto">{e.debug}</pre>
+                                                <button
+                                                    className="mt-2 text-xs text-gray-300 hover:text-white underline"
+                                                    onClick={() => {
+                                                        navigator.clipboard?.writeText(e.debug || '');
+                                                    }}
+                                                >Copy debug</button>
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    const renderMainContent = () => {
+        if (view.type === 'welcome') {
+            return (
+                <div className="text-center">
+                    <h1 className="text-4xl font-bold text-white">Welcome to the ACE Copywriting Pipeline</h1>
+                    <p className="mt-4 text-lg text-gray-400">Process CSV files, generate optimized copy, and review your job history.</p>
+                    <button
+                        onClick={handleStartNewJob}
+                        className="mt-8 inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200"
+                    >
+                        <PlusIcon className="w-6 h-6"/> Start Your First Job
+                    </button>
+                </div>
+            );
+        }
+
+        if (view.type === 'view_history' && view.jobId) {
+            const job = history.find(h => h.id === view.jobId);
+            if (!job) return <div className="text-center text-red-400">Job not found in history.</div>;
+
+            // If we have stored results, show them; otherwise show summary
+            if (job.results && job.results.length > 0) {
+                return <ResultsTable results={job.results} />;
+            }
+
+            return (
+                 <div className="w-full max-w-4xl mx-auto">
+                     <div className="bg-gray-800 p-8 rounded-xl shadow-2xl">
+                        <h2 className="text-3xl font-bold text-white truncate" title={job.filename}>{job.filename}</h2>
+                        <p className="mt-2 text-md text-gray-400 flex items-center gap-2"><HistoryIcon className="w-5 h-5" /><span>Job processed on {new Date(job.date).toLocaleString()}</span></p>
+        
+                        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+                            <div className="bg-gray-700/50 p-6 rounded-lg">
+                                <p className="text-sm text-gray-400 uppercase tracking-wider">Total Rows</p>
+                                <p className="text-4xl font-semibold text-white mt-1">{job.totalRows}</p>
+                            </div>
+                            <div className="bg-green-900/40 p-6 rounded-lg">
+                                <p className="text-sm text-green-400 uppercase tracking-wider">Succeeded</p>
+                                <p className="text-4xl font-semibold text-green-300 mt-1">{job.completedCount}</p>
+                            </div>
+                             <div className="bg-red-900/40 p-6 rounded-lg">
+                                <p className="text-sm text-red-400 uppercase tracking-wider">Failed</p>
+                                <p className="text-4xl font-semibold text-red-300 mt-1">{job.failedCount}</p>
+                            </div>
+                        </div>
+        
+                        <div className="mt-8 bg-gray-900/50 border border-gray-700 rounded-lg p-4 text-center">
+                            <p className="text-gray-300">
+                                Detailed results are not available for this job.
+                            </p>
+                            <p className="text-gray-400 text-sm mt-1">
+                                This may be due to job size limitations or legacy storage format.
+                            </p>
+                        </div>
+                     </div>
+                </div>
+            )
+        }
+        
+        if (view.type === 'new_job') {
+            if (status === 'completed') {
+                 return <ResultsTable results={results} />;
+            }
+            if (queue.length === 0) {
+                 return <FileUpload onFileParsed={handleFileParsed} onParseError={(msg) => {
+                    setError(msg);
+                    setErrors(prev => ([...prev, { code: 'CSV_PARSE_ERROR', message: msg, at: 'csv', suggestion: 'Check required columns and CSV formatting.' }]));
+                 }} disabled={false} />;
+            }
+            return (
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full">
+                    <div className="lg:col-span-1 bg-gray-800 p-6 rounded-xl shadow-lg self-start">
+                        <h2 className="text-2xl font-semibold mb-4 text-white">Controls</h2>
+                        <div className="space-y-4">
+                            <div className="p-4 bg-gray-700 rounded-lg">
+                                 <p className="font-medium text-white truncate" title={filename}>{filename}</p>
+                                 <p className="text-sm text-gray-300">{queue.length} rows ready for processing.</p>
+                            </div>
+                            <button
+                                onClick={handleStartProcessing}
+                                disabled={status === 'processing'}
+                                className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-bold py-3 px-4 rounded-lg transition-colors duration-200"
+                            >
+                               {status === 'processing' ? <><Spinner /> Processing...</> : <><RocketLaunchIcon className="w-5 h-5"/> Start Processing</>}
+                            </button>
+                            <button
+                                onClick={handleStartNewJob}
+                                disabled={status === 'processing'}
+                                className="w-full flex items-center justify-center gap-2 bg-gray-600 hover:bg-gray-500 disabled:bg-gray-500/50 text-white font-bold py-3 px-4 rounded-lg transition-colors duration-200"
+                            >
+                                <UploadIcon className="w-5 h-5"/> Upload New File
+                            </button>
+                        </div>
+                    </div>
+                    <div className="lg:col-span-2 bg-gray-800 p-6 rounded-xl shadow-lg">
+                        <h2 className="text-2xl font-semibold mb-4 text-white">Processing Queue</h2>
+                        <div className="space-y-1 max-h-96 overflow-y-auto pr-2">
+                            {queue
+                                .filter((item, index, arr) => arr.findIndex(q => q.id === item.id) === index) // Remove any runtime duplicates
+                                .map(item => (
+                                <div key={item.id} className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg" title={item.error}>
+                                    <div className="flex items-center gap-3 overflow-hidden">
+                                        {renderStatusIcon(item.status)}
+                                        <p className="truncate text-gray-300 text-sm">Row {item.id + 1}: <span className="text-gray-400">{item.data.URL}</span></p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                        {status === 'processing' &&
+                          <div className="mt-4 text-blue-300">
+                            <p className="text-sm">Processed: {results.length}/{queue.length}</p>
+                            <div className="w-full bg-gray-700 rounded-full h-2.5 mt-2">
+                              <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${(results.length / queue.length) * 100}%` }}></div>
+                            </div>
+                          </div>
+                        }
+                    </div>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+
+    const DeleteConfirmationDialog: React.FC<{ jobId: string; filename: string; onConfirm: () => void; onCancel: () => void }> = ({ jobId, filename, onConfirm, onCancel }) => (
+        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50" onClick={onCancel}>
+            <div className="bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full" onClick={e => e.stopPropagation()}>
+                <div className="flex items-center gap-3 mb-4">
+                    <TrashIcon className="w-6 h-6 text-red-400" />
+                    <h3 className="text-xl font-bold text-white">Delete Job</h3>
+                </div>
+                <p className="text-gray-300 mb-6">
+                    Are you sure you want to delete the job for <span className="font-medium text-white">"{filename}"</span>? 
+                    This action cannot be undone.
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <button
+                        onClick={onCancel}
+                        className="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded-lg transition-colors"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
+                    >
+                        Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+
+    // Storage management utilities
+    const getStorageInfo = () => {
+        try {
+            const totalSpace = 5 * 1024 * 1024; // 5MB limit
+            const usedSpace = new Blob([JSON.stringify(history)]).size;
+            const usedPercentage = (usedSpace / totalSpace) * 100;
+            
+            return {
+                usedSpace: Math.round(usedSpace / 1024), // KB
+                totalSpace: Math.round(totalSpace / 1024), // KB
+                usedPercentage: Math.round(usedPercentage),
+                historyCount: history.length,
+                maxHistoryItems: preferences.maxHistoryItems
+            };
+        } catch (error) {
+            console.error('Error calculating storage info:', error);
+            return null;
+        }
+    };
+
+    const clearAllData = () => {
+        if (window.confirm('Are you sure you want to clear all stored data? This will remove all job history and cannot be undone.')) {
+            try {
+                // Clear localStorage
+                window.localStorage.removeItem('ace-copywriting-history');
+                window.localStorage.removeItem('ace-copywriting-preferences');
+                window.localStorage.removeItem('ace-file-history');
+                
+                // Clear sessionStorage
+                window.sessionStorage.clear();
+                
+                // Reset state
+                setHistory([]);
+                setPreferences({
+                    autoSave: true,
+                    maxHistoryItems: 10,
+                    showDebugInfo: false,
+                    defaultExportFormat: 'csv',
+                    theme: 'dark'
+                });
+                
+                // Reset current job state
+                resetNewJobState();
+                setView({ type: 'welcome' });
+                
+                alert('All data has been cleared successfully.');
+            } catch (error) {
+                console.error('Error clearing data:', error);
+                alert('Error clearing data. Please try refreshing the page.');
+            }
+        }
+    };
+
+    const StorageInfoComponent: React.FC = () => {
+        const storageInfo = getStorageInfo();
+        
+        if (!storageInfo) return null;
+        
+        return (
+            <div className="bg-gray-700/80 backdrop-blur-sm rounded-lg p-3 border border-gray-600">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-xs font-semibold text-gray-200">Storage</h3>
+                    <button
+                        onClick={clearAllData}
+                        className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded transition-colors"
+                        title="Clear all stored data"
+                    >
+                        Clear
+                    </button>
+                </div>
+                <div className="grid grid-cols-2 gap-3 text-xs">
+                    <div>
+                        <div className="text-gray-400 text-xs">Used</div>
+                        <div className="text-white font-medium">{storageInfo.usedSpace}KB</div>
+                        <div className="w-full bg-gray-600 rounded-full h-1 mt-1">
+                            <div 
+                                className={`h-1 rounded-full transition-all ${storageInfo.usedPercentage > 80 ? 'bg-red-500' : storageInfo.usedPercentage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`}
+                                style={{ width: `${Math.min(storageInfo.usedPercentage, 100)}%` }}
+                            ></div>
+                        </div>
+                    </div>
+                    <div>
+                        <div className="text-gray-400 text-xs">History</div>
+                        <div className="text-white font-medium">{storageInfo.historyCount}/{storageInfo.maxHistoryItems}</div>
+                    </div>
+                </div>
+                {storageInfo.usedPercentage > 80 && (
+                    <div className="text-xs text-yellow-400 mt-2 flex items-center gap-1">
+                        <span>⚠️</span>
+                        <span>Storage full</span>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="flex flex-col h-screen bg-gray-900 text-gray-100">
+            {/* --- HEADER --- */}
+            <header className="bg-gray-800/95 backdrop-blur-sm border-b border-gray-700 px-6 py-3 flex-shrink-0">
+                <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-4">
+                        <h1 className="text-xl font-bold text-white">ACE Pipeline</h1>
+                        <div className="text-sm text-gray-400">
+                            {user?.name && `Welcome, ${user.name}`}
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <StorageInfoComponent />
+                        <button
+                            onClick={() => logout()}
+                            className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded text-sm font-medium transition-colors"
+                        >
+                            Sign Out
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* --- MAIN LAYOUT --- */}
+            <div className="flex flex-1 overflow-hidden">
+                {/* --- SIDEBAR --- */}
+                <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden">
+                    <button
+                        onClick={handleStartNewJob}
+                        className={`w-full flex items-center gap-3 p-3 rounded-lg text-left font-semibold mb-4 transition-colors min-w-0 ${getActiveJobId() === jobId && view.type === 'new_job' ? 'bg-blue-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
+                    >
+                        <PlusIcon className="w-6 h-6 flex-shrink-0"/>
+                        <span className="truncate">New Job</span>
+                    </button>
+                    <h2 className="px-2 text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">History</h2>
+                    <div className="flex-grow overflow-y-auto overflow-x-hidden pr-1">
+                        {history.length === 0 ? (
+                            <div className="text-center text-gray-500 p-4">No jobs completed yet.</div>
+                        ) : (
+                            <ul className="space-y-1">
+                                {history
+                                    .filter((h, index, arr) => arr.findIndex(item => item.id === h.id) === index) // Remove any runtime duplicates
+                                    .map(h => (
+                                    <li key={h.id} className="group">
+                                        <div className="flex items-center min-w-0">
+                                            <button 
+                                                onClick={() => setView({ type: 'view_history', jobId: h.id })} 
+                                                className={`flex-1 min-w-0 text-left p-3 rounded-l-lg transition-colors ${getActiveJobId() === h.id ? 'bg-gray-700' : 'hover:bg-gray-700/50'}`}
+                                            >
+                                                <div className="flex items-start gap-3 min-w-0">
+                                                    <DocumentTextIcon className="w-6 h-6 text-gray-400 mt-0.5 flex-shrink-0"/>
+                                                    <div className="flex-1 min-w-0">
+                                                        <p className="font-medium text-gray-200 truncate" title={h.filename}>{h.filename}</p>
+                                                        <p className="text-xs text-gray-400 truncate">{new Date(h.date).toLocaleDateString()}</p>
+                                                        <div className="text-xs mt-1">
+                                                            <span className="text-green-400">{h.completedCount}</span>
+                                                            <span className="text-gray-500"> / </span>
+                                                            <span className="text-red-400">{h.failedCount}</span>
+                                                            {h.results && h.results.length > 0 && (
+                                                                <span className="text-blue-400 ml-2">• Full Results</span>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </button>
+                                            <button
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    setDeleteConfirmId(h.id);
+                                                }}
+                                                className="p-3 text-gray-500 hover:text-red-400 hover:bg-red-900/20 rounded-r-lg transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
+                                                title="Delete job"
+                                            >
+                                                <TrashIcon className="w-4 h-4" />
+                                            </button>
+                                        </div>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                </aside>
+                
+                {/* --- MAIN CONTENT --- */}
+                <main className="flex-grow p-8 flex items-center justify-center overflow-auto">
+                    {error && view.type === 'new_job' && (
+                        <div className="fixed top-20 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700 z-50">
+                            <div className="flex items-start justify-between gap-3">
+                                <div>
+                                    <div className="font-semibold">Issues detected during processing</div>
+                                    <div className="text-sm mt-1">{error}</div>
+                                    {errors.length > 0 && (
+                                        <button 
+                                            className="mt-3 text-xs underline text-red-200 hover:text-white"
+                                            onClick={() => setShowErrorDetails(true)}
+                                        >
+                                            View details ({errors.length})
+                                        </button>
+                                    )}
+                                </div>
+                                <button
+                                    onClick={() => { setError(null); }}
+                                    className="text-xs px-2 py-1 bg-red-800 hover:bg-red-700 rounded text-red-100"
+                                    title="Dismiss"
+                                >Dismiss</button>
+                            </div>
+                        </div>
+                    )}
+                    {renderMainContent()}
+                </main>
+            </div>
+            
+            {/* --- DELETE CONFIRMATION DIALOG --- */}
+            {deleteConfirmId && (
+                <DeleteConfirmationDialog
+                    jobId={deleteConfirmId}
+                    filename={history.find(h => h.id === deleteConfirmId)?.filename || 'Unknown'}
+                    onConfirm={() => handleDeleteJob(deleteConfirmId)}
+                    onCancel={() => setDeleteConfirmId(null)}
+                />
+            )}
+
+            {/* --- ERROR DETAILS MODAL --- */}
+            {showErrorDetails && <ErrorDetailsModal onClose={() => setShowErrorDetails(false)} items={errors} />}
+        </div>
+    );
+};
+
+// Simple router to handle signin vs main app
+const AppRouter: React.FC = () => {
+    const [currentPath, setCurrentPath] = useState(window.location.pathname);
+    
+    useEffect(() => {
+        const handlePopState = () => {
+            setCurrentPath(window.location.pathname);
+        };
+        
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, []);
+
+    // Route to signin page
+    if (currentPath === '/auth/signin' || currentPath.startsWith('/auth/signin')) {
+        return <SignInPage />;
+    }
+    
+    // Default to main authenticated app
+    return <AuthenticatedApp />;
+};
+
+// Main App component wrapped with authentication
+const AuthenticatedApp: React.FC = () => {
+    const { user, isAuthenticated, isLoading, logout } = useAuth();
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-900">
+                <Spinner />
+            </div>
+        );
+    }
+
+    if (!isAuthenticated || !user) {
+        // Show signin page instead of redirecting
+        return <SignInPage />;
+    }
+
+    return <App />;
+};
+
+// Root component with routing
+const AppWithAuth: React.FC = () => {
+    return <AppRouter />;
+};
+
+export default AppWithAuth;

Dockerfile

@@ -0,0 +1,47 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# ACE Copywriting Pipeline - Optimized for HuggingFace Spaces
+
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Create user for HuggingFace Spaces (user ID 1000 as required)
+# Simple approach: create user with any available UID, HF Spaces will handle the mapping
+RUN adduser -D -s /bin/sh user || echo "User already exists"
+
+# Install serve globally for serving static files
+RUN npm install -g serve
+
+# Copy package files with proper ownership
+COPY --chown=user package*.json ./
+
+# Install dependencies (use npm install since we don't have package-lock.json in git)
+RUN npm install
+
+# Copy source code with proper ownership
+COPY --chown=user . .
+
+# Set authentication environment variables for build
+# These are hashed values so they're safe to include in the build
+ENV VITE_AUTH_USERNAME_HASH=d86c4384ddade642a91c5bd72d1e428879a1e94e707b8c7c7f6242ca5f014dc8 \
+    VITE_AUTH_PASSWORD_HASH=a8e69ee9f4a340cd9c6264569efb4ecbe5f2ebdaac13313338008be2b7c945d8 \
+    VITE_AUTH_USER_ID=1 \
+    VITE_AUTH_USER_NAME="ACE Admin" \
+    VITE_AUTH_USER_EMAIL=admin@aceui.com
+
+# Build the application
+RUN npm run build
+
+# Switch to user (required by HuggingFace Spaces)
+USER user
+
+# Set environment variables for HuggingFace Spaces
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Expose port 7860 (required by HuggingFace Spaces)
+EXPOSE 7860
+
+# Start the application
+CMD ["serve", "-s", "dist", "-l", "7860"] 

app.py

@@ -0,0 +1,8 @@
+# This file is for HuggingFace Spaces compatibility
+# The actual application runs in the Docker container
+
+print("ACE Copywriting Pipeline is running in Docker container on port 7860")
+print("Access the application at: http://localhost:7860")
+
+# This file exists for HF Spaces recognition but the app runs via Docker
+# See Dockerfile for the actual application setup 

components/FileUpload.tsx

@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from 'react';
+import { CsvInputRow, REQUIRED_CSV_HEADERS } from '../types';
+import { UploadIcon } from './Icons';
+
+// This tells TypeScript that `Papa` is available on the global window object.
+declare const Papa: any;
+
+interface FileUploadProps {
+  onFileParsed: (data: CsvInputRow[], file: File) => void;
+  onParseError: (message: string) => void;
+  disabled: boolean;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ onFileParsed, onParseError, disabled }) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFile = useCallback((file: File) => {
+    if (!file) {
+      onParseError('No file selected.');
+      return;
+    }
+    if (file.type !== 'text/csv') {
+      onParseError('Invalid file type. Please upload a CSV file.');
+      return;
+    }
+
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      complete: (results: any) => {
+        if (results.errors.length > 0) {
+          console.error('CSV Parsing Errors:', results.errors);
+          onParseError(`Error parsing CSV: ${results.errors[0].message}`);
+          return;
+        }
+
+        const headers = results.meta.fields;
+        const missingHeaders = REQUIRED_CSV_HEADERS.filter(
+          (requiredHeader) => !headers.includes(requiredHeader)
+        );
+
+        if (missingHeaders.length > 0) {
+          onParseError(`Missing required CSV columns: ${missingHeaders.join(', ')}`);
+          return;
+        }
+
+        onFileParsed(results.data as CsvInputRow[], file);
+      },
+      error: (error: any) => {
+        console.error('PapaParse Error:', error);
+        onParseError('An unexpected error occurred while parsing the file.');
+      },
+    });
+  }, [onFileParsed, onParseError]);
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (disabled) return;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleFile(e.dataTransfer.files[0]);
+      e.dataTransfer.clearData();
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      handleFile(e.target.files[0]);
+    }
+  };
+
+  const borderColor = isDragging ? 'border-blue-500' : 'border-gray-600';
+  const bgColor = isDragging ? 'bg-gray-700' : 'bg-gray-800';
+
+  return (
+    <div
+      className={`relative p-8 border-2 ${borderColor} border-dashed rounded-xl text-center transition-all duration-300 ${bgColor} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <input
+        type="file"
+        id="file-upload"
+        className="hidden"
+        accept=".csv"
+        onChange={handleInputChange}
+        disabled={disabled}
+      />
+      <label htmlFor="file-upload" className={`${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}>
+        <div className="flex flex-col items-center">
+          <UploadIcon className="w-12 h-12 text-gray-400 mb-4" />
+          <p className="text-lg font-semibold text-white">
+            Drag & drop your CSV file here
+          </p>
+          <p className="text-gray-400">or click to browse</p>
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default FileUpload;

components/Icons.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type IconProps = {
+  className?: string;
+};
+
+export const UploadIcon: React.FC<IconProps> = ({ className }) => (
+  <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+  </svg>
+);
+
+export const DownloadIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+    </svg>
+);
+
+export const CheckCircleIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+);
+
+export const XCircleIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+);
+
+export const ClockIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+);
+
+export const RocketLaunchIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.63 2.18a14.98 14.98 0 00-2.58 5.84m2.58 9.24v-4.8m0 0a6 6 0 01-7.38-5.84m0 0a14.98 14.98 0 00-12.12 6.16A14.98 14.98 0 002.18 14.37a14.98 14.98 0 005.84 2.58m8.34-12.73a6 6 0 00-7.38 5.84l-2.58 5.84m0 0a14.98 14.98 0 016.16 12.12 14.98 14.98 0 0110.5-10.5 14.98 14.98 0 01-2.58-5.84m-7.76 11.94a6 6 0 01-5.84-7.38 6 6 0 017.38-5.84m0 0a6 6 0 015.84 7.38 6 6 0 01-7.38 5.84z" />
+    </svg>
+);
+
+export const PlusIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+);
+
+export const HistoryIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+);
+
+export const DocumentTextIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+    </svg>
+);
+
+export const EyeIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+);
+
+export const TrashIcon: React.FC<IconProps> = ({ className }) => (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+    </svg>
+);

components/ResultsTable.tsx

@@ -0,0 +1,1082 @@
+
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { ResultRow, DetailedQaReport, QaSectionResult } from '../types';
+import { DownloadIcon, CheckCircleIcon, XCircleIcon, EyeIcon } from './Icons';
+import jsPDF from 'jspdf';
+import { Document, Packer, Paragraph, TextRun, HeadingLevel, Table, TableRow, TableCell, WidthType, AlignmentType, BorderStyle } from 'docx';
+
+// This tells TypeScript that `Papa` is available on the global window object.
+declare const Papa: any;
+
+interface ResultsTableProps {
+  results: ResultRow[];
+}
+
+type SortConfig = {
+    key: keyof ResultRow;
+    direction: 'ascending' | 'descending';
+} | null;
+
+const QAReportModal: React.FC<{ report: DetailedQaReport; onClose: () => void }> = ({ report, onClose }) => {
+    
+    const Section: React.FC<{ title: string; data: QaSectionResult }> = ({ title, data }) => (
+        <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+            <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-3">
+                {data.pass 
+                    ? <CheckCircleIcon className="w-6 h-6 text-green-400 flex-shrink-0" /> 
+                    : <XCircleIcon className="w-6 h-6 text-red-400 flex-shrink-0" />
+                }
+                {title}
+            </h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm pl-9">
+                <p><span className="font-semibold text-gray-400">Grade:</span> <span className="text-gray-200">{data.grade}</span></p>
+                <p><span className="font-semibold text-gray-400">Pass:</span> <span className={`font-medium ${data.pass ? 'text-green-400' : 'text-red-400'}`}>{data.pass ? 'Yes' : 'No'}</span></p>
+            </div>
+            
+            {/* Enhanced Content Display */}
+            {data.detailedAssessment && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Detailed Assessment:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.detailedAssessment}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {data.keyStrengths && data.keyStrengths.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Key Strengths:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.keyStrengths.map((strength, i) => <li key={i}>{strength}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.recommendations && data.recommendations.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Recommendations:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.recommendations.map((rec, i) => <li key={i}>{rec}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.explanations && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Explanations:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.explanations}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            <div className="pl-9 mt-3 text-sm">
+                <p className="font-semibold text-gray-400">Errors:</p>
+                <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                    {data.errors.map((err, i) => <li key={i}>{err}</li>)}
+                </ul>
+            </div>
+            
+            {data.corrected && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Corrected Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-48">
+                        <div className="prose prose-sm prose-invert max-w-none">
+                            <ReactMarkdown 
+                                components={{
+                                    p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                    ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                    ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                    li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                    code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                    strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                    em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                                    h1: ({ children }) => <h1 className="text-lg font-bold mb-2 text-white">{children}</h1>,
+                                    h2: ({ children }) => <h2 className="text-base font-semibold mb-2 text-white">{children}</h2>,
+                                    h3: ({ children }) => <h3 className="text-sm font-semibold mb-1 text-white">{children}</h3>,
+                                }}
+                            >
+                                {data.corrected}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                </div>
+            )}
+            
+            {/* Raw Content for complete transparency */}
+            {data.rawContent && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Raw QA Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                        <pre className="whitespace-pre-wrap text-gray-400">{data.rawContent}</pre>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+
+    const OverallSection: React.FC<{ data: DetailedQaReport['overall'] }> = ({ data }) => (
+        <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+            <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-3">
+                {data.pass 
+                    ? <CheckCircleIcon className="w-6 h-6 text-green-400 flex-shrink-0" /> 
+                    : <XCircleIcon className="w-6 h-6 text-red-400 flex-shrink-0" />
+                }
+                Overall Assessment
+            </h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm pl-9">
+                <p><span className="font-semibold text-gray-400">Grade:</span> <span className="text-gray-200">{data.grade}</span></p>
+                <p><span className="font-semibold text-gray-400">Pass:</span> <span className={`font-medium ${data.pass ? 'text-green-400' : 'text-red-400'}`}>{data.pass ? 'Yes' : 'No'}</span></p>
+            </div>
+            
+            <div className="pl-9 mt-3 text-sm">
+                <p className="font-semibold text-gray-400">Primary Issue:</p>
+                <p className="text-gray-300 mt-1">{data.primaryIssue}</p>
+            </div>
+            
+            {/* Enhanced Overall Content Display */}
+            {data.detailedAssessment && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Detailed Assessment:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.detailedAssessment}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {data.keyStrengths && data.keyStrengths.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Key Strengths:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.keyStrengths.map((strength, i) => <li key={i}>{strength}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.recommendations && data.recommendations.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Recommendations:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.recommendations.map((rec, i) => <li key={i}>{rec}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.explanations && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Explanations:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.explanations}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {/* Raw Content for complete transparency */}
+            {data.rawContent && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Raw Overall Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                        <pre className="whitespace-pre-wrap text-gray-400">{data.rawContent}</pre>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+
+    const AdditionalSections: React.FC<{ sections: DetailedQaReport['additionalSections'] }> = ({ sections }) => {
+        if (!sections) return null;
+        
+        return (
+            <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+                <h4 className="text-lg font-semibold text-white mb-3">Additional QA Sections</h4>
+                <div className="space-y-3">
+                    {Object.entries(sections).map(([sectionName, sectionData]) => (
+                        <div key={sectionName} className="border-l-2 border-gray-600 pl-3">
+                            <h5 className="text-sm font-semibold text-gray-300 mb-2 capitalize">{sectionName}</h5>
+                            <div className="text-gray-300 text-xs bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                                <ReactMarkdown 
+                                    components={{
+                                        p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                        ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                        ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                        li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                        code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                        strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                        em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                                    }}
+                                >
+                                    {sectionData.content}
+                                </ReactMarkdown>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50" onClick={onClose}>
+            <div className="bg-gray-800 rounded-lg shadow-xl p-6 max-w-6xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+                <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-700">
+                    <h3 className="text-2xl font-bold text-white">Complete QA Report Details</h3>
+                    <button onClick={onClose} className="text-gray-400 hover:text-white text-3xl font-bold">&times;</button>
+                </div>
+                <div className="space-y-2">
+                    <OverallSection data={report.overall} />
+                    <AdditionalSections sections={report.additionalSections} />
+                    
+                    {/* Complete Raw Report */}
+                    {report.completeRawReport && (
+                        <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+                            <h4 className="text-lg font-semibold text-white mb-3">Complete Raw QA Report</h4>
+                            <div className="text-gray-300 text-xs bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-64">
+                                <pre className="whitespace-pre-wrap text-gray-400">{report.completeRawReport}</pre>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+const ResultsTable: React.FC<ResultsTableProps> = ({ results }) => {
+    const [sortConfig, setSortConfig] = useState<SortConfig>(null);
+    const [selectedReport, setSelectedReport] = useState<DetailedQaReport | null>(null);
+    const [showDownloadMenu, setShowDownloadMenu] = useState(false);
+    const downloadMenuRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (downloadMenuRef.current && !downloadMenuRef.current.contains(event.target as Node)) {
+                setShowDownloadMenu(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    const handleDownloadCSV = () => {
+        if (results.length === 0) return;
+
+        const csvData = results.map(row => {
+            const report = row.detailedQaReport;
+            return {
+                'URL': row.URL,
+                'Page': row.Page,
+                'Keywords': row.Keywords,
+                'Original Title': row.Recommended_Title,
+                'Original H1': row.Recommended_H1,
+                'Original Copy': row.Copy,
+                'Internal Links': row.Internal_Links,
+                'Generated Title': row.generatedTitle,
+                'Generated H1': row.generatedH1,
+                'Generated Meta': row.generatedMeta,
+                'Generated Copy': row.generatedCopy,
+                'Overall Pass': report?.overall.pass,
+                'Overall Grade': report?.overall.grade,
+                'Overall Primary Issue': report?.overall.primaryIssue,
+                'Overall Detailed Assessment': report?.overall.detailedAssessment,
+                'Overall Key Strengths': report?.overall.keyStrengths?.join('; '),
+                'Overall Recommendations': report?.overall.recommendations?.join('; '),
+                'Overall Explanations': report?.overall.explanations,
+                'Additional QA Sections': report?.additionalSections ? 
+                    Object.entries(report.additionalSections)
+                        .map(([name, data]) => `${name}: ${data.content.replace(/\r?\n|\r/g, ' ')}`) // Sanitize newlines
+                        .join(' | ') : '',
+                'Complete Raw QA Report': report?.completeRawReport?.replace(/\r?\n|\r/g, ' ') || row.qaReport.replace(/\r?\n|\r/g, ' '), // Sanitize newlines
+            };
+        });
+
+        const csv = Papa.unparse(csvData);
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'ace_copywriting_results.csv');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setShowDownloadMenu(false);
+    };
+
+    const handleDownloadPDF = () => {
+        if (results.length === 0) return;
+
+        const pdf = new jsPDF();
+        const pageWidth = pdf.internal.pageSize.getWidth();
+        const pageHeight = pdf.internal.pageSize.getHeight();
+        const margin = 20;
+        const maxLineWidth = pageWidth - (margin * 2);
+        
+        let currentY = margin;
+        const lineHeight = 6;
+        const sectionSpacing = 10;
+
+        // Helper function to add text with word wrapping and automatic page breaks
+        const addWrappedText = (text: string, x: number, y: number, maxWidth: number, fontSize: number = 12): number => {
+            pdf.setFontSize(fontSize);
+            const lines = pdf.splitTextToSize(text, maxWidth);
+            let currentLineY = y;
+            
+            for (let i = 0; i < lines.length; i++) {
+                // Check if we need a new page for this line
+                if (currentLineY + lineHeight > pageHeight - margin) {
+                    pdf.addPage();
+                    currentLineY = margin;
+                }
+                
+                pdf.text(lines[i], x, currentLineY);
+                currentLineY += lineHeight;
+            }
+            
+            return currentLineY;
+        };
+
+        // Helper function to ensure minimum space on page for section headers
+        const ensureMinSpace = (minHeight: number = 40): number => {
+            if (currentY + minHeight > pageHeight - margin) {
+                pdf.addPage();
+                return margin;
+            }
+            return currentY;
+        };
+
+        // Title
+        pdf.setFontSize(20);
+        pdf.setFont('helvetica', 'bold');
+        pdf.text('ACE Copywriting Pipeline Results', margin, currentY);
+        currentY += 15;
+
+        // Summary
+        pdf.setFontSize(12);
+        pdf.setFont('helvetica', 'normal');
+        const totalResults = results.length;
+        const passedResults = results.filter(r => r.overallPass).length;
+        const summaryText = `Generated ${totalResults} results | ${passedResults} passed QA | ${totalResults - passedResults} failed QA`;
+        currentY = addWrappedText(summaryText, margin, currentY, maxLineWidth);
+        currentY += sectionSpacing;
+
+        // Results
+        results.forEach((row, index) => {
+            // Estimate space needed for this entry based on content length
+            const estimatedHeight = 50 + // Base height for headers and metadata
+                                  Math.ceil((row.generatedTitle?.length || 0) / 80) * 6 + // Title
+                                  Math.ceil((row.generatedH1?.length || 0) / 80) * 6 + // H1  
+                                  Math.ceil((row.generatedMeta?.length || 0) / 80) * 6 + // Meta
+                                  Math.ceil((row.generatedCopy?.length || 0) / 100) * 5; // Copy (smaller font)
+            
+            // Ensure minimum space for section header
+            currentY = ensureMinSpace(40);
+
+            // Page/URL Header
+            pdf.setFontSize(14);
+            pdf.setFont('helvetica', 'bold');
+            currentY = addWrappedText(`${index + 1}. ${row.Page || 'Page'} (${row.URL})`, margin, currentY, maxLineWidth, 14);
+            currentY += 5;
+
+            // Keywords
+            pdf.setFontSize(10);
+            pdf.setFont('helvetica', 'normal');
+            currentY = addWrappedText(`Keywords: ${row.Keywords}`, margin, currentY, maxLineWidth, 10);
+            currentY += 3;
+
+            // Overall QA Status
+            pdf.setFont('helvetica', 'bold');
+            if (row.overallPass) {
+                pdf.setTextColor(0, 128, 0);
+            } else {
+                pdf.setTextColor(255, 0, 0);
+            }
+            currentY = addWrappedText(`Overall QA: ${row.overallPass ? 'PASS' : 'FAIL'} (${row.overallGrade})`, margin, currentY, maxLineWidth, 10);
+            pdf.setTextColor(0, 0, 0);
+            currentY += 5;
+
+            // Generated Content
+            pdf.setFont('helvetica', 'bold');
+            currentY = addWrappedText('Generated Title:', margin, currentY, maxLineWidth, 10);
+            pdf.setFont('helvetica', 'normal');
+            currentY = addWrappedText(row.generatedTitle || '', margin, currentY, maxLineWidth, 9);
+            currentY += 3;
+
+            pdf.setFont('helvetica', 'bold');
+            currentY = addWrappedText('Generated H1:', margin, currentY, maxLineWidth, 10);
+            pdf.setFont('helvetica', 'normal');
+            currentY = addWrappedText(row.generatedH1 || '', margin, currentY, maxLineWidth, 9);
+            currentY += 3;
+
+            pdf.setFont('helvetica', 'bold');
+            currentY = addWrappedText('Generated Meta:', margin, currentY, maxLineWidth, 10);
+            pdf.setFont('helvetica', 'normal');
+            currentY = addWrappedText(row.generatedMeta || '', margin, currentY, maxLineWidth, 9);
+            currentY += 3;
+
+            // Generated Copy (full content)
+            pdf.setFont('helvetica', 'bold');
+            currentY = addWrappedText('Generated Copy:', margin, currentY, maxLineWidth, 10);
+            pdf.setFont('helvetica', 'normal');
+            
+            // Add the full copy content with proper spacing
+            if (row.generatedCopy) {
+                currentY = addWrappedText(row.generatedCopy, margin, currentY, maxLineWidth, 9);
+            }
+            
+            // Add QA Details if available
+            if (row.detailedQaReport) {
+                const report = row.detailedQaReport;
+                currentY = ensureMinSpace(60); // Ensure space for QA header + at least one section
+                currentY += 5;
+                pdf.setFontSize(12);
+                pdf.setFont('helvetica', 'bold');
+                currentY = addWrappedText('QA Report Details:', margin + 5, currentY, maxLineWidth - 5, 12);
+                currentY += 2;
+
+                const addDetailedSection = (title: string, section: QaSectionResult | DetailedQaReport['overall']) => {
+                    const isOverall = 'primaryIssue' in section;
+
+                    currentY = ensureMinSpace(30);
+                    pdf.setFontSize(10);
+                    pdf.setFont('helvetica', 'bold');
+                    
+                    if (section.pass) {
+                        pdf.setTextColor(0, 128, 0); // Green for PASS
+                    } else {
+                        pdf.setTextColor(255, 0, 0); // Red for FAIL
+                    }
+                    currentY = addWrappedText(`${title}: ${section.pass ? 'PASS' : 'FAIL'} (Grade: ${section.grade})`, margin + 5, currentY, maxLineWidth - 5, 10);
+                    pdf.setTextColor(0, 0, 0); // Reset color
+
+                    pdf.setFont('helvetica', 'normal');
+                    
+                    if (isOverall && section.primaryIssue) {
+                        currentY = addWrappedText(`Primary Issue: ${section.primaryIssue}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    }
+
+                    if (!isOverall && section.errors.length > 0) {
+                        currentY = addWrappedText(`Errors: ${section.errors.join(', ')}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    }
+                    
+                    if (section.detailedAssessment) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Detailed Assessment:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(section.detailedAssessment, margin + 15, currentY, maxLineWidth - 15, 7);
+                    }
+                    
+                    if (section.keyStrengths && section.keyStrengths.length > 0) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Key Strengths:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        section.keyStrengths.forEach(strength => {
+                            currentY = addWrappedText(`• ${strength}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                        });
+                    }
+                    
+                    if (section.recommendations && section.recommendations.length > 0) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Recommendations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        section.recommendations.forEach(rec => {
+                            currentY = addWrappedText(`• ${rec}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                        });
+                    }
+                    
+                    if (section.explanations) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Explanations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(section.explanations, margin + 15, currentY, maxLineWidth - 15, 7);
+                    }
+                    
+                    if (!isOverall && section.corrected) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'italic');
+                        currentY = addWrappedText(`Correction/Analysis: ${section.corrected}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                    }
+                    currentY += 4;
+                };
+
+                addDetailedSection('Overall Assessment', report.overall);
+                
+                // Add Additional Sections if available
+                if (report.additionalSections) {
+                    currentY = ensureMinSpace(30);
+                    pdf.setFontSize(10);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Additional QA Sections:', margin + 5, currentY, maxLineWidth - 5, 10);
+                    currentY += 2;
+                    
+                    Object.entries(report.additionalSections).forEach(([sectionName, sectionData]) => {
+                        currentY = ensureMinSpace(25);
+                        pdf.setFontSize(9);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText(`${sectionName}:`, margin + 10, currentY, maxLineWidth - 10, 9);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(sectionData.content, margin + 15, currentY, maxLineWidth - 15, 7);
+                        currentY += 2;
+                    });
+                }
+
+                // Add Complete Raw Report
+                if (report.completeRawReport) {
+                    currentY = ensureMinSpace(30);
+                    pdf.setFontSize(10);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Complete Raw QA Report:', margin + 5, currentY, maxLineWidth - 5, 10);
+                    currentY += 2;
+                    pdf.setFontSize(7);
+                    pdf.setFont('helvetica', 'normal');
+                    pdf.setTextColor(100, 100, 100); // Lighter text for raw content
+                    currentY = addWrappedText(report.completeRawReport, margin + 10, currentY, maxLineWidth - 10, 7);
+                    pdf.setTextColor(0, 0, 0); // Reset color
+                }
+            }
+            
+            currentY += sectionSpacing * 2; // Extra spacing between entries
+        });
+
+        // Footer on last page
+        pdf.setFontSize(8);
+        pdf.setTextColor(128, 128, 128);
+        pdf.text('Generated by ACE Copywriting Pipeline', margin, pageHeight - 10);
+
+        // Save the PDF
+        pdf.save('ace_copywriting_results.pdf');
+        setShowDownloadMenu(false);
+    };
+
+    const handleDownloadJSON = () => {
+        if (results.length === 0) return;
+
+        const jsonData = {
+            metadata: {
+                generatedAt: new Date().toISOString(),
+                totalResults: results.length,
+                passedResults: results.filter(r => r.overallPass).length,
+                failedResults: results.filter(r => !r.overallPass).length
+            },
+            results: results.map(row => ({
+                url: row.URL,
+                page: row.Page,
+                keywords: row.Keywords,
+                original: {
+                    title: row.Recommended_Title,
+                    h1: row.Recommended_H1,
+                    copy: row.Copy,
+                    internalLinks: row.Internal_Links
+                },
+                generated: {
+                    title: row.generatedTitle,
+                    h1: row.generatedH1,
+                    meta: row.generatedMeta,
+                    copy: row.generatedCopy
+                },
+                qa: {
+                    overallPass: row.overallPass,
+                    overallGrade: row.overallGrade,
+                    sections: {
+                        title: {
+                            pass: row.detailedQaReport?.title.pass,
+                            grade: row.detailedQaReport?.title.grade,
+                            errors: row.detailedQaReport?.title.errors
+                        },
+                        meta: {
+                            pass: row.detailedQaReport?.meta.pass,
+                            grade: row.detailedQaReport?.meta.grade,
+                            errors: row.detailedQaReport?.meta.errors
+                        },
+                        h1: {
+                            pass: row.detailedQaReport?.h1.pass,
+                            grade: row.detailedQaReport?.h1.grade,
+                            errors: row.detailedQaReport?.h1.errors
+                        },
+                        copy: {
+                            pass: row.detailedQaReport?.copy.pass,
+                            grade: row.detailedQaReport?.copy.grade,
+                            errors: row.detailedQaReport?.copy.errors
+                        }
+                    },
+                    fullReport: row.qaReport
+                }
+            }))
+        };
+
+        const jsonString = JSON.stringify(jsonData, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'ace_copywriting_results.json');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setShowDownloadMenu(false);
+    };
+
+    const handleDownloadDOCX = async () => {
+        if (results.length === 0) return;
+
+        // Helper function to clean HTML tags and format text
+        const cleanText = (text: string): string => {
+            if (!text) return '';
+            return text
+                .replace(/<[^>]*>/g, '') // Remove HTML tags
+                .replace(/\*\*([^*]+)\*\*/g, '$1') // Remove markdown bold
+                .replace(/\*([^*]+)\*/g, '$1') // Remove markdown italic
+                .replace(/---/g, '') // Remove markdown separators
+                .replace(/\n\s*\n/g, '\n') // Remove extra line breaks
+                .trim();
+        };
+
+        // Helper function to split text into paragraphs
+        const splitIntoParagraphs = (text: string): string[] => {
+            const cleaned = cleanText(text);
+            return cleaned
+                .split(/\n+/)
+                .map(p => p.trim())
+                .filter(p => p.length > 0);
+        };
+
+        const children: any[] = [];
+
+        // Title
+        children.push(
+            new Paragraph({
+                text: "ACE Copywriting Pipeline Results",
+                heading: HeadingLevel.HEADING_1,
+                alignment: AlignmentType.CENTER,
+                spacing: { after: 400 }
+            })
+        );
+
+        // Summary
+        const totalResults = results.length;
+        const passedResults = results.filter(r => r.overallPass).length;
+        const summaryText = `Generated ${totalResults} results | ${passedResults} passed QA | ${totalResults - passedResults} failed QA`;
+        
+        children.push(
+            new Paragraph({
+                text: summaryText,
+                spacing: { after: 400 }
+            })
+        );
+
+        // Results
+        results.forEach((row, index) => {
+            // Page/URL Header
+            children.push(
+                new Paragraph({
+                    text: `${index + 1}. ${row.Page || 'Page'} (${row.URL})`,
+                    heading: HeadingLevel.HEADING_2,
+                    spacing: { before: 400, after: 200 }
+                })
+            );
+
+            // Keywords
+            children.push(
+                new Paragraph({
+                    text: `Keywords: ${row.Keywords}`,
+                    spacing: { after: 200 }
+                })
+            );
+
+            // Overall QA Status
+            children.push(
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: `Overall QA: ${row.overallPass ? 'PASS' : 'FAIL'} (${row.overallGrade})`,
+                            color: row.overallPass ? '008000' : 'FF0000',
+                            bold: true
+                        })
+                    ],
+                    spacing: { after: 200 }
+                })
+            );
+
+            // Generated Content
+            children.push(
+                new Paragraph({
+                    text: "Generated Title:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedTitle || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated H1:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedH1 || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated Meta:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedMeta || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated Copy:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                })
+            );
+
+            // Handle generated copy with proper paragraph breaks
+            if (row.generatedCopy) {
+                const copyParagraphs = splitIntoParagraphs(row.generatedCopy);
+                copyParagraphs.forEach(paragraph => {
+                    children.push(
+                        new Paragraph({
+                            text: paragraph,
+                            spacing: { after: 150 }
+                        })
+                    );
+                });
+            }
+
+            // QA Details if available
+            if (row.detailedQaReport) {
+                const report = row.detailedQaReport;
+                children.push(
+                    new Paragraph({
+                        text: "QA Report Details:",
+                        heading: HeadingLevel.HEADING_3,
+                        spacing: { before: 400, after: 200 }
+                    })
+                );
+
+                const addDetailedSection = (title: string, section: QaSectionResult | DetailedQaReport['overall']) => {
+                    const isOverall = 'primaryIssue' in section;
+
+                    children.push(
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: `${title}: ${section.pass ? 'PASS' : 'FAIL'} (Grade: ${section.grade})`,
+                                    color: section.pass ? '008000' : 'FF0000',
+                                    bold: true
+                                })
+                            ],
+                            heading: HeadingLevel.HEADING_4,
+                            spacing: { before: 300, after: 100 }
+                        })
+                    );
+
+                    if (isOverall && section.primaryIssue) {
+                         children.push(new Paragraph({ text: `Primary Issue: ${cleanText(section.primaryIssue)}`, spacing: { after: 100 } }));
+                    }
+
+                    if (!isOverall && section.errors && section.errors.length > 0) {
+                        children.push(new Paragraph({ text: `Errors: ${section.errors.join(', ')}`, spacing: { after: 100 } }));
+                    }
+
+                    if (section.detailedAssessment) {
+                        children.push(new Paragraph({ children: [new TextRun({ text: "Detailed Assessment:", bold: true })], spacing: { after: 50 } }));
+                        splitIntoParagraphs(section.detailedAssessment).forEach(p => children.push(new Paragraph({ text: p, spacing: { after: 100 } })));
+                    }
+
+                    if (section.keyStrengths && section.keyStrengths.length > 0) {
+                        children.push(new Paragraph({ children: [new TextRun({ text: "Key Strengths:", bold: true })], spacing: { after: 50 } }));
+                        section.keyStrengths.forEach(s => children.push(new Paragraph({ text: `• ${cleanText(s)}`, spacing: { after: 50 }, indent: { left: 400 } })));
+                    }
+
+                    if (section.recommendations && section.recommendations.length > 0) {
+                        children.push(new Paragraph({ children: [new TextRun({ text: "Recommendations:", bold: true })], spacing: { after: 50 } }));
+                        section.recommendations.forEach(r => children.push(new Paragraph({ text: `• ${cleanText(r)}`, spacing: { after: 50 }, indent: { left: 400 } })));
+                    }
+
+                    if (section.explanations) {
+                        children.push(new Paragraph({ children: [new TextRun({ text: "Explanations:", bold: true })], spacing: { after: 50 } }));
+                        splitIntoParagraphs(section.explanations).forEach(p => children.push(new Paragraph({ text: p, spacing: { after: 100 } })));
+                    }
+                    
+                    if (!isOverall && section.corrected) {
+                        children.push(new Paragraph({ children: [new TextRun({ text: "Corrected Content:", bold: true })], spacing: { after: 50 } }));
+                        splitIntoParagraphs(section.corrected).forEach(p => children.push(new Paragraph({ text: p, spacing: { after: 100 } })));
+                    }
+                };
+
+                addDetailedSection('Overall Assessment', report.overall);
+                
+                // Add Additional Sections
+                if (report.additionalSections && Object.keys(report.additionalSections).length > 0) {
+                    children.push(new Paragraph({ text: "Additional QA Sections", heading: HeadingLevel.HEADING_4, spacing: { before: 300, after: 100 } }));
+                    Object.entries(report.additionalSections).forEach(([name, data]) => {
+                        children.push(new Paragraph({ children: [new TextRun({ text: `${name}:`, bold: true })], spacing: { after: 50 } }));
+                        splitIntoParagraphs(data.content).forEach(p => children.push(new Paragraph({ text: p, spacing: { after: 100 }, indent: { left: 400 } })));
+                    });
+                }
+                
+                // Add Complete Raw Report
+                if (report.completeRawReport) {
+                    children.push(new Paragraph({ text: "Complete Raw QA Report", heading: HeadingLevel.HEADING_4, spacing: { before: 300, after: 100 } }));
+                    splitIntoParagraphs(report.completeRawReport).forEach(p => {
+                        children.push(new Paragraph({
+                            children: [ new TextRun({ text: p, size: 16 }) ], // smaller font
+                            spacing: { after: 100 }
+                        }));
+                    });
+                }
+            }
+
+            // Add spacing between entries
+            children.push(
+                new Paragraph({
+                    text: "",
+                    spacing: { after: 400 }
+                })
+            );
+        });
+
+        // Footer
+        children.push(
+            new Paragraph({
+                children: [
+                    new TextRun({
+                        text: "Generated by ACE Copywriting Pipeline",
+                        color: '808080',
+                        size: 16
+                    })
+                ],
+                alignment: AlignmentType.CENTER,
+                spacing: { before: 400 }
+            })
+        );
+
+        const doc = new Document({
+            sections: [{
+                properties: {},
+                children: children
+            }]
+        });
+
+        const blob = await Packer.toBlob(doc);
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'ace_copywriting_results.docx');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        setShowDownloadMenu(false);
+    };
+
+    const sortedResults = useMemo(() => {
+        let sortableItems = [...results];
+        if (sortConfig !== null) {
+            sortableItems.sort((a, b) => {
+                const key = sortConfig.key;
+                const valA = a[key as keyof typeof a];
+                const valB = b[key as keyof typeof b];
+
+                if (typeof valA === 'boolean' && typeof valB === 'boolean') {
+                    if (valA === valB) return 0;
+                    return sortConfig.direction === 'ascending' ? (valA ? -1 : 1) : (valA ? 1 : -1);
+                }
+
+                if (valA < valB) {
+                    return sortConfig.direction === 'ascending' ? -1 : 1;
+                }
+                if (valA > valB) {
+                    return sortConfig.direction === 'ascending' ? 1 : -1;
+                }
+                return 0;
+            });
+        }
+        return sortableItems;
+    }, [results, sortConfig]);
+
+    const requestSort = (key: keyof ResultRow) => {
+        let direction: 'ascending' | 'descending' = 'ascending';
+        if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
+            direction = 'descending';
+        }
+        setSortConfig({ key, direction });
+    };
+
+    const getSortIndicator = (key: keyof ResultRow) => {
+        if (!sortConfig || sortConfig.key !== key) {
+            return ' ↕';
+        }
+        return sortConfig.direction === 'ascending' ? ' ▲' : ' ▼';
+    };
+
+    if (results.length === 0) {
+        return (
+             <div className="bg-gray-800 rounded-xl shadow-lg p-6 text-center">
+                <h2 className="text-2xl font-semibold text-white">Generated Content</h2>
+                <p className="mt-4 text-gray-400">No results to display yet. Process a file to see the output here.</p>
+            </div>
+        )
+    }
+
+    return (
+        <>
+            <div className="bg-gray-800 rounded-xl shadow-lg p-6 w-full">
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-2xl font-semibold text-white">Generated Content</h2>
+                    <div className="relative" ref={downloadMenuRef}>
+                        <button
+                            onClick={() => setShowDownloadMenu(!showDownloadMenu)}
+                            className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200"
+                        >
+                            <DownloadIcon className="w-5 h-5"/>
+                            Download
+                            <svg className="w-4 h-4 ml-1" 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>
+                        
+                        {showDownloadMenu && (
+                            <div className="absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg z-10 border border-gray-600">
+                                <div className="py-1">
+                                    <button
+                                        onClick={handleDownloadCSV}
+                                        className="w-full text-left px-4 py-2 text-white hover:bg-gray-600 flex items-center gap-2"
+                                    >
+                                        📊 Download CSV
+                                    </button>
+                                    <button
+                                        onClick={handleDownloadPDF}
+                                        className="w-full text-left px-4 py-2 text-white hover:bg-gray-600 flex items-center gap-2"
+                                    >
+                                        📄 Download PDF
+                                    </button>
+                                    <button
+                                        onClick={handleDownloadJSON}
+                                        className="w-full text-left px-4 py-2 text-white hover:bg-gray-600 flex items-center gap-2"
+                                    >
+                                        💾 Download JSON
+                                    </button>
+                                    <button
+                                        onClick={handleDownloadDOCX}
+                                        className="w-full text-left px-4 py-2 text-white hover:bg-gray-600 flex items-center gap-2"
+                                    >
+                                        📝 Download DOCX
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left text-gray-300">
+                        <thead className="text-xs text-gray-400 uppercase bg-gray-700">
+                            <tr>
+                                <th scope="col" className="px-6 py-3 cursor-pointer" onClick={() => requestSort('URL')}>URL{getSortIndicator('URL')}</th>
+                                <th scope="col" className="px-6 py-3">Generated Title</th>
+                                <th scope="col" className="px-6 py-3">Generated H1</th>
+                                <th scope="col" className="px-6 py-3 cursor-pointer" onClick={() => requestSort('overallPass')}>Overall Pass{getSortIndicator('overallPass')}</th>
+                                <th scope="col" className="px-6 py-3 text-center">Details</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {sortedResults
+                                .filter((row, index, arr) => arr.findIndex(r => r.id === row.id) === index) // Remove any runtime duplicates
+                                .map((row) => (
+                                <tr key={row.id} className="bg-gray-800 border-b border-gray-700 hover:bg-gray-700/50">
+                                    <td className="px-6 py-4 font-medium text-white max-w-xs truncate" title={row.URL}>{row.URL}</td>
+                                    <td className="px-6 py-4 max-w-xs truncate" title={row.generatedTitle}>{row.generatedTitle}</td>
+                                    <td className="px-6 py-4 max-w-xs truncate" title={row.generatedH1}>{row.generatedH1}</td>
+                                    <td className="px-6 py-4">
+                                        <div className="flex justify-center">
+                                            {row.overallPass 
+                                                ? <CheckCircleIcon className="w-6 h-6 text-green-400" />
+                                                : <XCircleIcon className="w-6 h-6 text-red-400" />
+                                            }
+                                        </div>
+                                    </td>
+                                    <td className="px-6 py-4 text-center">
+                                        <button
+                                            onClick={() => {
+                                                console.log('Opening QA modal with data:', row.detailedQaReport);
+                                                setSelectedReport(row.detailedQaReport || null);
+                                            }}
+                                            disabled={!row.detailedQaReport}
+                                            className="flex items-center justify-center mx-auto gap-1 text-blue-400 hover:text-blue-300 disabled:text-gray-500 disabled:cursor-not-allowed transition-colors"
+                                        >
+                                            <EyeIcon className="w-5 h-5" /> View
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            {selectedReport && <QAReportModal report={selectedReport} onClose={() => setSelectedReport(null)} />}
+        </>
+    );
+};
+
+export default ResultsTable;

components/SignInPage.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react"
+import { useAuth } from "../services/authService"
+
+export default function SignInPage() {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const { login, isAuthenticated, isLoading } = useAuth()
+
+  useEffect(() => {
+    // Redirect if already authenticated
+    if (isAuthenticated) {
+      window.location.href = "/"
+    }
+  }, [isAuthenticated])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+
+    const result = await login({ username, password })
+    
+    if (!result.success) {
+      setError(result.error || "Invalid credentials")
+    } else {
+      // Redirect to main app
+      window.location.href = "/"
+    }
+  }
+
+  // Show loading spinner if checking auth state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="text-white">Loading...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-900">
+      <div className="max-w-md w-full space-y-8 p-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-white">
+            ACE UI Login
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-400">
+            Enter your credentials to access the dashboard
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="sr-only">
+                Username
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                className="relative block w-full px-3 py-2 border border-gray-600 rounded-md placeholder-gray-400 text-white bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="relative block w-full px-3 py-2 border border-gray-600 rounded-md placeholder-gray-400 text-white bg-gray-800 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-red-400 text-sm text-center">{error}</div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? "Signing in..." : "Sign in"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+} 

components/Spinner.tsx

@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+const Spinner: React.FC = () => {
+    return (
+        <div className="w-5 h-5 border-2 border-t-transparent border-white rounded-full animate-spin"></div>
+    );
+};
+
+export default Spinner;

constants.ts

@@ -0,0 +1,4 @@
+
+export const API_URL = 'https://api.dify.ai/v1/workflows/run';
+export const API_TOKEN = 'app-yufQq1vEs336l4r2R5zx4fwo';
+export const API_USER = 'ace-copywriting-frontend-user';

dist/assets/purify.es-C_uT9hQ1.js

@@ -0,0 +1,3 @@
+/*! @license DOMPurify 2.5.8 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.5.8/LICENSE */function I(a){"@babel/helpers - typeof";return I=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(n){return typeof n}:function(n){return n&&typeof Symbol=="function"&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},I(a)}function Fe(a,n){return Fe=Object.setPrototypeOf||function(s,c){return s.__proto__=c,s},Fe(a,n)}function zt(){if(typeof Reflect>"u"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function le(a,n,o){return zt()?le=Reflect.construct:le=function(c,g,y){var D=[null];D.push.apply(D,g);var x=Function.bind.apply(c,D),j=new x;return y&&Fe(j,y.prototype),j},le.apply(null,arguments)}function M(a){return Gt(a)||Wt(a)||Bt(a)||$t()}function Gt(a){if(Array.isArray(a))return Ue(a)}function Wt(a){if(typeof Symbol<"u"&&a[Symbol.iterator]!=null||a["@@iterator"]!=null)return Array.from(a)}function Bt(a,n){if(a){if(typeof a=="string")return Ue(a,n);var o=Object.prototype.toString.call(a).slice(8,-1);if(o==="Object"&&a.constructor&&(o=a.constructor.name),o==="Map"||o==="Set")return Array.from(a);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return Ue(a,n)}}function Ue(a,n){(n==null||n>a.length)&&(n=a.length);for(var o=0,s=new Array(n);o<n;o++)s[o]=a[o];return s}function $t(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var jt=Object.hasOwnProperty,ut=Object.setPrototypeOf,Yt=Object.isFrozen,Xt=Object.getPrototypeOf,Vt=Object.getOwnPropertyDescriptor,E=Object.freeze,b=Object.seal,qt=Object.create,vt=typeof Reflect<"u"&&Reflect,ue=vt.apply,He=vt.construct;ue||(ue=function(n,o,s){return n.apply(o,s)});E||(E=function(n){return n});b||(b=function(n){return n});He||(He=function(n,o){return le(n,M(o))});var Kt=O(Array.prototype.forEach),ft=O(Array.prototype.pop),q=O(Array.prototype.push),se=O(String.prototype.toLowerCase),we=O(String.prototype.toString),ct=O(String.prototype.match),L=O(String.prototype.replace),Zt=O(String.prototype.indexOf),Jt=O(String.prototype.trim),_=O(RegExp.prototype.test),Ce=Qt(TypeError);function O(a){return function(n){for(var o=arguments.length,s=new Array(o>1?o-1:0),c=1;c<o;c++)s[c-1]=arguments[c];return ue(a,n,s)}}function Qt(a){return function(){for(var n=arguments.length,o=new Array(n),s=0;s<n;s++)o[s]=arguments[s];return He(a,o)}}function l(a,n,o){var s;o=(s=o)!==null&&s!==void 0?s:se,ut&&ut(a,null);for(var c=n.length;c--;){var g=n[c];if(typeof g=="string"){var y=o(g);y!==g&&(Yt(n)||(n[c]=y),g=y)}a[g]=!0}return a}function U(a){var n=qt(null),o;for(o in a)ue(jt,a,[o])===!0&&(n[o]=a[o]);return n}function ie(a,n){for(;a!==null;){var o=Vt(a,n);if(o){if(o.get)return O(o.get);if(typeof o.value=="function")return O(o.value)}a=Xt(a)}function s(c){return console.warn("fallback value for",c),null}return s}var mt=E(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),Ie=E(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),xe=E(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),er=E(["animate","color-profile","cursor","discard","fedropshadow","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),ke=E(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover"]),tr=E(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),pt=E(["#text"]),dt=E(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","nonce","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","xmlns","slot"]),Pe=E(["accent-height","accumulate","additive","alignment-baseline","ascent","attributename","attributetype","azimuth","basefrequency","baseline-shift","begin","bias","by","class","clip","clippathunits","clip-path","clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cx","cy","d","dx","dy","diffuseconstant","direction","display","divisor","dur","edgemode","elevation","end","fill","fill-opacity","fill-rule","filter","filterunits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","fx","fy","g1","g2","glyph-name","glyphref","gradientunits","gradienttransform","height","href","id","image-rendering","in","in2","k","k1","k2","k3","k4","kerning","keypoints","keysplines","keytimes","lang","lengthadjust","letter-spacing","kernelmatrix","kernelunitlength","lighting-color","local","marker-end","marker-mid","marker-start","markerheight","markerunits","markerwidth","maskcontentunits","maskunits","max","mask","media","method","mode","min","name","numoctaves","offset","operator","opacity","order","orient","orientation","origin","overflow","paint-order","path","pathlength","patterncontentunits","patterntransform","patternunits","points","preservealpha","preserveaspectratio","primitiveunits","r","rx","ry","radius","refx","refy","repeatcount","repeatdur","restart","result","rotate","scale","seed","shape-rendering","specularconstant","specularexponent","spreadmethod","startoffset","stddeviation","stitchtiles","stop-color","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke","stroke-width","style","surfacescale","systemlanguage","tabindex","targetx","targety","transform","transform-origin","text-anchor","text-decoration","text-rendering","textlength","type","u1","u2","unicode","values","viewbox","visibility","version","vert-adv-y","vert-origin-x","vert-origin-y","width","word-spacing","wrap","writing-mode","xchannelselector","ychannelselector","x","x1","x2","xmlns","y","y1","y2","z","zoomandpan"]),Tt=E(["accent","accentunder","align","bevelled","close","columnsalign","columnlines","columnspan","denomalign","depth","dir","display","displaystyle","encoding","fence","frame","height","href","id","largeop","length","linethickness","lspace","lquote","mathbackground","mathcolor","mathsize","mathvariant","maxsize","minsize","movablelimits","notation","numalign","open","rowalign","rowlines","rowspacing","rowspan","rspace","rquote","scriptlevel","scriptminsize","scriptsizemultiplier","selection","separator","separators","stretchy","subscriptshift","supscriptshift","symmetric","voffset","width","xmlns"]),oe=E(["xlink:href","xml:id","xlink:title","xml:space","xmlns:xlink"]),rr=b(/\{\{[\w\W]*|[\w\W]*\}\}/gm),ar=b(/<%[\w\W]*|[\w\W]*%>/gm),nr=b(/\${[\w\W]*}/gm),ir=b(/^data-[\-\w.\u00B7-\uFFFF]+$/),or=b(/^aria-[\-\w]+$/),lr=b(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),sr=b(/^(?:\w+script|data):/i),ur=b(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),fr=b(/^html$/i),cr=b(/^[a-z][.\w]*(-[.\w]+)+$/i),mr=function(){return typeof window>"u"?null:window},pr=function(n,o){if(I(n)!=="object"||typeof n.createPolicy!="function")return null;var s=null,c="data-tt-policy-suffix";o.currentScript&&o.currentScript.hasAttribute(c)&&(s=o.currentScript.getAttribute(c));var g="dompurify"+(s?"#"+s:"");try{return n.createPolicy(g,{createHTML:function(D){return D},createScriptURL:function(D){return D}})}catch{return console.warn("TrustedTypes policy "+g+" could not be created."),null}};function _t(){var a=arguments.length>0&&arguments[0]!==void 0?arguments[0]:mr(),n=function(e){return _t(e)};if(n.version="2.5.8",n.removed=[],!a||!a.document||a.document.nodeType!==9)return n.isSupported=!1,n;var o=a.document,s=a.document,c=a.DocumentFragment,g=a.HTMLTemplateElement,y=a.Node,D=a.Element,x=a.NodeFilter,j=a.NamedNodeMap,ht=j===void 0?a.NamedNodeMap||a.MozNamedAttrMap:j,Et=a.HTMLFormElement,At=a.DOMParser,K=a.trustedTypes,Z=D.prototype,yt=ie(Z,"cloneNode"),gt=ie(Z,"nextSibling"),St=ie(Z,"childNodes"),fe=ie(Z,"parentNode");if(typeof g=="function"){var ce=s.createElement("template");ce.content&&ce.content.ownerDocument&&(s=ce.content.ownerDocument)}var R=pr(K,o),me=R?R.createHTML(""):"",J=s,pe=J.implementation,bt=J.createNodeIterator,Ot=J.createDocumentFragment,Rt=J.getElementsByTagName,Lt=o.importNode,ze={};try{ze=U(s).documentMode?s.documentMode:{}}catch{}var N={};n.isSupported=typeof fe=="function"&&pe&&pe.createHTMLDocument!==void 0&&ze!==9;var de=rr,Te=ar,ve=nr,Mt=ir,Dt=or,Nt=sr,Ge=ur,wt=cr,_e=lr,p=null,We=l({},[].concat(M(mt),M(Ie),M(xe),M(ke),M(pt))),d=null,Be=l({},[].concat(M(dt),M(Pe),M(Tt),M(oe))),f=Object.seal(Object.create(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Y=null,he=null,$e=!0,Ee=!0,je=!1,Ye=!0,H=!1,Ae=!0,k=!1,ye=!1,ge=!1,z=!1,Q=!1,ee=!1,Xe=!0,Ve=!1,Ct="user-content-",Se=!0,X=!1,G={},W=null,qe=l({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]),Ke=null,Ze=l({},["audio","video","img","source","image","track"]),be=null,Je=l({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),te="http://www.w3.org/1998/Math/MathML",re="http://www.w3.org/2000/svg",w="http://www.w3.org/1999/xhtml",B=w,Oe=!1,Re=null,It=l({},[te,re,w],we),P,xt=["application/xhtml+xml","text/html"],kt="text/html",T,$=null,Pt=s.createElement("form"),Qe=function(e){return e instanceof RegExp||e instanceof Function},Le=function(e){$&&$===e||((!e||I(e)!=="object")&&(e={}),e=U(e),P=xt.indexOf(e.PARSER_MEDIA_TYPE)===-1?P=kt:P=e.PARSER_MEDIA_TYPE,T=P==="application/xhtml+xml"?we:se,p="ALLOWED_TAGS"in e?l({},e.ALLOWED_TAGS,T):We,d="ALLOWED_ATTR"in e?l({},e.ALLOWED_ATTR,T):Be,Re="ALLOWED_NAMESPACES"in e?l({},e.ALLOWED_NAMESPACES,we):It,be="ADD_URI_SAFE_ATTR"in e?l(U(Je),e.ADD_URI_SAFE_ATTR,T):Je,Ke="ADD_DATA_URI_TAGS"in e?l(U(Ze),e.ADD_DATA_URI_TAGS,T):Ze,W="FORBID_CONTENTS"in e?l({},e.FORBID_CONTENTS,T):qe,Y="FORBID_TAGS"in e?l({},e.FORBID_TAGS,T):{},he="FORBID_ATTR"in e?l({},e.FORBID_ATTR,T):{},G="USE_PROFILES"in e?e.USE_PROFILES:!1,$e=e.ALLOW_ARIA_ATTR!==!1,Ee=e.ALLOW_DATA_ATTR!==!1,je=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Ye=e.ALLOW_SELF_CLOSE_IN_ATTR!==!1,H=e.SAFE_FOR_TEMPLATES||!1,Ae=e.SAFE_FOR_XML!==!1,k=e.WHOLE_DOCUMENT||!1,z=e.RETURN_DOM||!1,Q=e.RETURN_DOM_FRAGMENT||!1,ee=e.RETURN_TRUSTED_TYPE||!1,ge=e.FORCE_BODY||!1,Xe=e.SANITIZE_DOM!==!1,Ve=e.SANITIZE_NAMED_PROPS||!1,Se=e.KEEP_CONTENT!==!1,X=e.IN_PLACE||!1,_e=e.ALLOWED_URI_REGEXP||_e,B=e.NAMESPACE||w,f=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&Qe(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(f.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&Qe(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(f.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements=="boolean"&&(f.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),H&&(Ee=!1),Q&&(z=!0),G&&(p=l({},M(pt)),d=[],G.html===!0&&(l(p,mt),l(d,dt)),G.svg===!0&&(l(p,Ie),l(d,Pe),l(d,oe)),G.svgFilters===!0&&(l(p,xe),l(d,Pe),l(d,oe)),G.mathMl===!0&&(l(p,ke),l(d,Tt),l(d,oe))),e.ADD_TAGS&&(p===We&&(p=U(p)),l(p,e.ADD_TAGS,T)),e.ADD_ATTR&&(d===Be&&(d=U(d)),l(d,e.ADD_ATTR,T)),e.ADD_URI_SAFE_ATTR&&l(be,e.ADD_URI_SAFE_ATTR,T),e.FORBID_CONTENTS&&(W===qe&&(W=U(W)),l(W,e.FORBID_CONTENTS,T)),Se&&(p["#text"]=!0),k&&l(p,["html","head","body"]),p.table&&(l(p,["tbody"]),delete Y.tbody),E&&E(e),$=e)},et=l({},["mi","mo","mn","ms","mtext"]),tt=l({},["annotation-xml"]),Ft=l({},["title","style","font","a","script"]),ae=l({},Ie);l(ae,xe),l(ae,er);var Me=l({},ke);l(Me,tr);var Ut=function(e){var t=fe(e);(!t||!t.tagName)&&(t={namespaceURI:B,tagName:"template"});var r=se(e.tagName),u=se(t.tagName);return Re[e.namespaceURI]?e.namespaceURI===re?t.namespaceURI===w?r==="svg":t.namespaceURI===te?r==="svg"&&(u==="annotation-xml"||et[u]):!!ae[r]:e.namespaceURI===te?t.namespaceURI===w?r==="math":t.namespaceURI===re?r==="math"&&tt[u]:!!Me[r]:e.namespaceURI===w?t.namespaceURI===re&&!tt[u]||t.namespaceURI===te&&!et[u]?!1:!Me[r]&&(Ft[r]||!ae[r]):!!(P==="application/xhtml+xml"&&Re[e.namespaceURI]):!1},S=function(e){q(n.removed,{element:e});try{e.parentNode.removeChild(e)}catch{try{e.outerHTML=me}catch{e.remove()}}},ne=function(e,t){try{q(n.removed,{attribute:t.getAttributeNode(e),from:t})}catch{q(n.removed,{attribute:null,from:t})}if(t.removeAttribute(e),e==="is"&&!d[e])if(z||Q)try{S(t)}catch{}else try{t.setAttribute(e,"")}catch{}},rt=function(e){var t,r;if(ge)e="<remove></remove>"+e;else{var u=ct(e,/^[\r\n\t ]+/);r=u&&u[0]}P==="application/xhtml+xml"&&B===w&&(e='<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>'+e+"</body></html>");var A=R?R.createHTML(e):e;if(B===w)try{t=new At().parseFromString(A,P)}catch{}if(!t||!t.documentElement){t=pe.createDocument(B,"template",null);try{t.documentElement.innerHTML=Oe?me:A}catch{}}var h=t.body||t.documentElement;return e&&r&&h.insertBefore(s.createTextNode(r),h.childNodes[0]||null),B===w?Rt.call(t,k?"html":"body")[0]:k?t.documentElement:h},at=function(e){return bt.call(e.ownerDocument||e,e,x.SHOW_ELEMENT|x.SHOW_COMMENT|x.SHOW_TEXT|x.SHOW_PROCESSING_INSTRUCTION|x.SHOW_CDATA_SECTION,null,!1)},De=function(e){return e instanceof Et&&(typeof e.nodeName!="string"||typeof e.textContent!="string"||typeof e.removeChild!="function"||!(e.attributes instanceof ht)||typeof e.removeAttribute!="function"||typeof e.setAttribute!="function"||typeof e.namespaceURI!="string"||typeof e.insertBefore!="function"||typeof e.hasChildNodes!="function")},V=function(e){return I(y)==="object"?e instanceof y:e&&I(e)==="object"&&typeof e.nodeType=="number"&&typeof e.nodeName=="string"},C=function(e,t,r){N[e]&&Kt(N[e],function(u){u.call(n,t,r,$)})},nt=function(e){var t;if(C("beforeSanitizeElements",e,null),De(e)||_(/[\u0080-\uFFFF]/,e.nodeName))return S(e),!0;var r=T(e.nodeName);if(C("uponSanitizeElement",e,{tagName:r,allowedTags:p}),e.hasChildNodes()&&!V(e.firstElementChild)&&(!V(e.content)||!V(e.content.firstElementChild))&&_(/<[/\w]/g,e.innerHTML)&&_(/<[/\w]/g,e.textContent)||r==="select"&&_(/<template/i,e.innerHTML)||e.nodeType===7||Ae&&e.nodeType===8&&_(/<[/\w]/g,e.data))return S(e),!0;if(!p[r]||Y[r]){if(!Y[r]&&ot(r)&&(f.tagNameCheck instanceof RegExp&&_(f.tagNameCheck,r)||f.tagNameCheck instanceof Function&&f.tagNameCheck(r)))return!1;if(Se&&!W[r]){var u=fe(e)||e.parentNode,A=St(e)||e.childNodes;if(A&&u)for(var h=A.length,v=h-1;v>=0;--v){var F=yt(A[v],!0);F.__removalCount=(e.__removalCount||0)+1,u.insertBefore(F,gt(e))}}return S(e),!0}return e instanceof D&&!Ut(e)||(r==="noscript"||r==="noembed"||r==="noframes")&&_(/<\/no(script|embed|frames)/i,e.innerHTML)?(S(e),!0):(H&&e.nodeType===3&&(t=e.textContent,t=L(t,de," "),t=L(t,Te," "),t=L(t,ve," "),e.textContent!==t&&(q(n.removed,{element:e.cloneNode()}),e.textContent=t)),C("afterSanitizeElements",e,null),!1)},it=function(e,t,r){if(Xe&&(t==="id"||t==="name")&&(r in s||r in Pt))return!1;if(!(Ee&&!he[t]&&_(Mt,t))){if(!($e&&_(Dt,t))){if(!d[t]||he[t]){if(!(ot(e)&&(f.tagNameCheck instanceof RegExp&&_(f.tagNameCheck,e)||f.tagNameCheck instanceof Function&&f.tagNameCheck(e))&&(f.attributeNameCheck instanceof RegExp&&_(f.attributeNameCheck,t)||f.attributeNameCheck instanceof Function&&f.attributeNameCheck(t))||t==="is"&&f.allowCustomizedBuiltInElements&&(f.tagNameCheck instanceof RegExp&&_(f.tagNameCheck,r)||f.tagNameCheck instanceof Function&&f.tagNameCheck(r))))return!1}else if(!be[t]){if(!_(_e,L(r,Ge,""))){if(!((t==="src"||t==="xlink:href"||t==="href")&&e!=="script"&&Zt(r,"data:")===0&&Ke[e])){if(!(je&&!_(Nt,L(r,Ge,"")))){if(r)return!1}}}}}}return!0},ot=function(e){return e!=="annotation-xml"&&ct(e,wt)},lt=function(e){var t,r,u,A;C("beforeSanitizeAttributes",e,null);var h=e.attributes;if(!(!h||De(e))){var v={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:d};for(A=h.length;A--;){t=h[A];var F=t,m=F.name,Ne=F.namespaceURI;if(r=m==="value"?t.value:Jt(t.value),u=T(m),v.attrName=u,v.attrValue=r,v.keepAttr=!0,v.forceKeepAttr=void 0,C("uponSanitizeAttribute",e,v),r=v.attrValue,!v.forceKeepAttr&&(ne(m,e),!!v.keepAttr)){if(!Ye&&_(/\/>/i,r)){ne(m,e);continue}H&&(r=L(r,de," "),r=L(r,Te," "),r=L(r,ve," "));var st=T(e.nodeName);if(it(st,u,r)){if(Ve&&(u==="id"||u==="name")&&(ne(m,e),r=Ct+r),Ae&&_(/((--!?|])>)|<\/(style|title)/i,r)){ne(m,e);continue}if(R&&I(K)==="object"&&typeof K.getAttributeType=="function"&&!Ne)switch(K.getAttributeType(st,u)){case"TrustedHTML":{r=R.createHTML(r);break}case"TrustedScriptURL":{r=R.createScriptURL(r);break}}try{Ne?e.setAttributeNS(Ne,m,r):e.setAttribute(m,r),De(e)?S(e):ft(n.removed)}catch{}}}}C("afterSanitizeAttributes",e,null)}},Ht=function i(e){var t,r=at(e);for(C("beforeSanitizeShadowDOM",e,null);t=r.nextNode();)C("uponSanitizeShadowNode",t,null),nt(t),lt(t),t.content instanceof c&&i(t.content);C("afterSanitizeShadowDOM",e,null)};return n.sanitize=function(i){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t,r,u,A,h;if(Oe=!i,Oe&&(i="<!-->"),typeof i!="string"&&!V(i))if(typeof i.toString=="function"){if(i=i.toString(),typeof i!="string")throw Ce("dirty is not a string, aborting")}else throw Ce("toString is not a function");if(!n.isSupported){if(I(a.toStaticHTML)==="object"||typeof a.toStaticHTML=="function"){if(typeof i=="string")return a.toStaticHTML(i);if(V(i))return a.toStaticHTML(i.outerHTML)}return i}if(ye||Le(e),n.removed=[],typeof i=="string"&&(X=!1),X){if(i.nodeName){var v=T(i.nodeName);if(!p[v]||Y[v])throw Ce("root node is forbidden and cannot be sanitized in-place")}}else if(i instanceof y)t=rt("<!---->"),r=t.ownerDocument.importNode(i,!0),r.nodeType===1&&r.nodeName==="BODY"||r.nodeName==="HTML"?t=r:t.appendChild(r);else{if(!z&&!H&&!k&&i.indexOf("<")===-1)return R&&ee?R.createHTML(i):i;if(t=rt(i),!t)return z?null:ee?me:""}t&&ge&&S(t.firstChild);for(var F=at(X?i:t);u=F.nextNode();)u.nodeType===3&&u===A||(nt(u),lt(u),u.content instanceof c&&Ht(u.content),A=u);if(A=null,X)return i;if(z){if(Q)for(h=Ot.call(t.ownerDocument);t.firstChild;)h.appendChild(t.firstChild);else h=t;return(d.shadowroot||d.shadowrootmod)&&(h=Lt.call(o,h,!0)),h}var m=k?t.outerHTML:t.innerHTML;return k&&p["!doctype"]&&t.ownerDocument&&t.ownerDocument.doctype&&t.ownerDocument.doctype.name&&_(fr,t.ownerDocument.doctype.name)&&(m="<!DOCTYPE "+t.ownerDocument.doctype.name+`>
+`+m),H&&(m=L(m,de," "),m=L(m,Te," "),m=L(m,ve," ")),R&&ee?R.createHTML(m):m},n.setConfig=function(i){Le(i),ye=!0},n.clearConfig=function(){$=null,ye=!1},n.isValidAttribute=function(i,e,t){$||Le({});var r=T(i),u=T(e);return it(r,u,t)},n.addHook=function(i,e){typeof e=="function"&&(N[i]=N[i]||[],q(N[i],e))},n.removeHook=function(i){if(N[i])return ft(N[i])},n.removeHooks=function(i){N[i]&&(N[i]=[])},n.removeAllHooks=function(){N={}},n}var Tr=_t();export{Tr as default};

dist/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ACE Copywriting Pipeline</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+
+<link rel="stylesheet" href="/index.css">
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.1",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.1/",
+    "react/": "https://esm.sh/react@^19.1.1/"
+  }
+}
+</script>
+  <script type="module" crossorigin src="/assets/index-D2A424vW.js"></script>
+</head>
+  <body class="bg-gray-900 text-gray-100 font-sans antialiased">
+    <div id="root" class="h-screen"></div>
+  </body>
+
+<script
+ src="https://udify.app/embed.min.js"
+ id="U5KHVj67e4Gum8hd"
+ defer>
+</script>
+<style>
+  #dify-chatbot-bubble-button {
+    background-color: #1C64F2 !important;
+  }
+  #dify-chatbot-bubble-window {
+    width: 24rem !important;
+    height: 40rem !important;
+  }
+</style>
+
+</html>

index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ACE Copywriting Pipeline</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.1",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.1/",
+    "react/": "https://esm.sh/react@^19.1.1/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-gray-900 text-gray-100 font-sans antialiased">
+    <div id="root" class="h-screen"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+
+<script type="module" src="/src/config/difyChatbotConfig.ts"></script>
+<script
+ src="https://udify.app/embed.min.js"
+ id="U5KHVj67e4Gum8hd"
+ defer>
+</script>
+<style>
+  #dify-chatbot-bubble-button {
+    background-color: #1C64F2 !important;
+  }
+  #dify-chatbot-bubble-window {
+    width: 24rem !important;
+    height: 40rem !important;
+  }
+</style>
+
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,21 @@
+{
+  "title": "ACE Copywriting Pipeline",
+  "emoji": "✍️",
+  "colorFrom": "blue",
+  "colorTo": "green",
+  "sdk": "docker",
+  "app_port": 7860,
+  "pinned": false,
+  "license": "mit",
+  "description": "AI-powered copywriting pipeline for generating and quality-assuring content for ACE Hardware pages. Upload CSV files to generate optimized titles, meta descriptions, H1 tags, and full copy content with built-in QA validation.",
+  "tags": [
+    "copywriting",
+    "ai",
+    "content-generation",
+    "seo",
+    "quality-assurance",
+    "react",
+    "typescript",
+    "csv-processing"
+  ]
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ace-copywriting-pipeline",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "docx": "^9.5.1",
+    "jspdf": "^2.5.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-markdown": "^10.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

requirements.txt

@@ -0,0 +1,5 @@
+# This file is for HuggingFace Spaces compatibility
+# The actual application runs in a Docker container with Node.js dependencies
+# defined in package.json
+
+# No Python dependencies required - this is a React/Node.js application 

services/authService.ts

@@ -0,0 +1,251 @@
+// Types
+export interface User {
+  id: string
+  name: string
+  email: string
+}
+
+export interface AuthState {
+  user: User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+}
+
+export interface LoginCredentials {
+  username: string
+  password: string
+}
+
+// Environment-based configuration with fallbacks
+const getAuthConfig = () => {
+  // Get credentials from environment variables using type assertion
+  const env = (import.meta as any).env
+  const usernameHash = env.VITE_AUTH_USERNAME_HASH
+  const passwordHash = env.VITE_AUTH_PASSWORD_HASH
+  
+  // Validate that required environment variables are present
+  if (!usernameHash || !passwordHash) {
+    console.error('Missing required authentication environment variables!')
+    console.error('Please set VITE_AUTH_USERNAME_HASH and VITE_AUTH_PASSWORD_HASH in your .env file')
+    throw new Error('Authentication configuration missing. Check environment variables.')
+  }
+  
+  return {
+    username: usernameHash,
+    password: passwordHash
+  }
+}
+
+const getUserConfig = (): User => {
+  const env = (import.meta as any).env
+  return {
+    id: env.VITE_AUTH_USER_ID || "1",
+    name: env.VITE_AUTH_USER_NAME || "ACE Admin", 
+    email: env.VITE_AUTH_USER_EMAIL || "admin@aceui.com"
+  }
+}
+
+// Helper function to hash input with SHA-256 using Web Crypto API (browser-compatible)
+async function hashInput(input: string): Promise<string> {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(input)
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
+  return hashHex
+}
+
+// JWT-like token management (simplified for client-side)
+const TOKEN_KEY = 'ace_auth_token'
+const USER_KEY = 'ace_auth_user'
+const TOKEN_EXPIRY_HOURS = 24
+
+interface TokenData {
+  user: User
+  timestamp: number
+  expiresAt: number
+}
+
+class AuthService {
+  private listeners: Set<(authState: AuthState) => void> = new Set()
+  private currentState: AuthState = {
+    user: null,
+    isAuthenticated: false,
+    isLoading: true
+  }
+
+  constructor() {
+    this.checkExistingSession()
+  }
+
+  // Check for existing valid session on initialization
+  private checkExistingSession() {
+    try {
+      const token = localStorage.getItem(TOKEN_KEY)
+      const userData = localStorage.getItem(USER_KEY)
+      
+      if (token && userData) {
+        const tokenData: TokenData = JSON.parse(token)
+        const user: User = JSON.parse(userData)
+        
+        // Check if token is still valid
+        if (Date.now() < tokenData.expiresAt) {
+          this.updateState({
+            user,
+            isAuthenticated: true,
+            isLoading: false
+          })
+          return
+        } else {
+          // Token expired, clear storage
+          this.clearSession()
+        }
+      }
+    } catch (error) {
+      console.error('Error checking existing session:', error)
+      this.clearSession()
+    }
+    
+    this.updateState({
+      user: null,
+      isAuthenticated: false,
+      isLoading: false
+    })
+  }
+
+  // Subscribe to auth state changes
+  subscribe(callback: (authState: AuthState) => void) {
+    this.listeners.add(callback)
+    // Immediately call with current state
+    callback(this.currentState)
+    
+    // Return unsubscribe function
+    return () => {
+      this.listeners.delete(callback)
+    }
+  }
+
+  // Update state and notify listeners
+  private updateState(newState: AuthState) {
+    this.currentState = newState
+    this.listeners.forEach(callback => callback(newState))
+  }
+
+  // Get current auth state
+  getState(): AuthState {
+    return this.currentState
+  }
+
+  // Login with credentials
+  async login(credentials: LoginCredentials): Promise<{ success: boolean; error?: string }> {
+    try {
+      this.updateState({ ...this.currentState, isLoading: true })
+
+      // Simulate network delay for UX
+      await new Promise(resolve => setTimeout(resolve, 500))
+
+      const hashedUsername = await hashInput(credentials.username)
+      const hashedPassword = await hashInput(credentials.password)
+
+      // Get auth configuration
+      const validCredentials = getAuthConfig()
+      const validUser = getUserConfig()
+
+      // Validate credentials
+      if (hashedUsername === validCredentials.username && 
+          hashedPassword === validCredentials.password) {
+        
+        // Create session token
+        const now = Date.now()
+        const expiresAt = now + (TOKEN_EXPIRY_HOURS * 60 * 60 * 1000)
+        
+        const tokenData: TokenData = {
+          user: validUser,
+          timestamp: now,
+          expiresAt
+        }
+
+        // Store in localStorage
+        localStorage.setItem(TOKEN_KEY, JSON.stringify(tokenData))
+        localStorage.setItem(USER_KEY, JSON.stringify(validUser))
+
+        this.updateState({
+          user: validUser,
+          isAuthenticated: true,
+          isLoading: false
+        })
+
+        return { success: true }
+      } else {
+        this.updateState({
+          user: null,
+          isAuthenticated: false,
+          isLoading: false
+        })
+        return { success: false, error: 'Invalid username or password' }
+      }
+    } catch (error) {
+      console.error('Login error:', error)
+      this.updateState({
+        user: null,
+        isAuthenticated: false,
+        isLoading: false
+      })
+      return { success: false, error: 'An error occurred during login' }
+    }
+  }
+
+  // Logout
+  async logout(): Promise<void> {
+    this.clearSession()
+    this.updateState({
+      user: null,
+      isAuthenticated: false,
+      isLoading: false
+    })
+  }
+
+  // Clear session data
+  private clearSession() {
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(USER_KEY)
+  }
+
+  // Check if session is valid
+  isSessionValid(): boolean {
+    try {
+      const token = localStorage.getItem(TOKEN_KEY)
+      if (!token) return false
+      
+      const tokenData: TokenData = JSON.parse(token)
+      return Date.now() < tokenData.expiresAt
+    } catch {
+      return false
+    }
+  }
+}
+
+// Create singleton instance
+export const authService = new AuthService()
+
+// React hook for using auth service
+export function useAuth(): AuthState & {
+  login: (credentials: LoginCredentials) => Promise<{ success: boolean; error?: string }>
+  logout: () => Promise<void>
+} {
+  const [authState, setAuthState] = React.useState<AuthState>(authService.getState())
+
+  React.useEffect(() => {
+    const unsubscribe = authService.subscribe(setAuthState)
+    return unsubscribe
+  }, [])
+
+  return {
+    ...authState,
+    login: authService.login.bind(authService),
+    logout: authService.logout.bind(authService)
+  }
+}
+
+// React import for the hook
+import React from 'react' 

services/difyService.ts

@@ -0,0 +1,1468 @@
+import { API_URL, API_TOKEN, API_USER } from '../constants';
+import { ApiInput, ApiResponseOutput, ProcessedResult, QaSectionResult, DetailedQaReport } from '../types';
+
+const MAX_RETRIES = 3;
+const INITIAL_RETRY_DELAY_MS = 1000;
+const RETRYABLE_STATUS_CODES = [429, 502, 503, 504]; // 429: Too Many Requests, 5xx: Server Errors
+
+// Add jitter to delay to prevent thundering herd problem
+const delay = (ms: number) => new Promise(res => setTimeout(res, ms + Math.random() * 500));
+
+// Structured error for workflow failures
+class WorkflowError extends Error {
+	code: string;
+	at: 'network' | 'api' | 'stream' | 'parse' | 'unknown';
+	debug?: string;
+	constructor(code: string, message: string, at: 'network' | 'api' | 'stream' | 'parse' | 'unknown' = 'unknown', debug?: string) {
+		super(message);
+		this.name = 'WorkflowError';
+		this.code = code;
+		this.at = at;
+		this.debug = debug;
+	}
+}
+
+/**
+ * Removes <think>...</think> blocks from a string.
+ */
+const cleanResponseText = (text: string): string => {
+  if (typeof text !== 'string') return '';
+  return text.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+};
+
+/**
+ * Parses a single section of the QA report (e.g., TITLE, H1).
+ * This uses regular expressions to be robust against multiline content and format variations.
+ * @param sectionText The text content of a single QA section.
+ * @returns A structured object with the section's results.
+ */
+const parseSection = (sectionText: string): QaSectionResult => {
+	console.log('Parsing section text:', sectionText.substring(0, 200));
+	
+	// ROBUST GRADE EXTRACTION - handles multiple formats
+	let grade = 'N/A';
+	let gradeMatch = null;
+	
+	// Try various grade patterns in order of specificity
+	const gradePatterns = [
+		/-\s*\*\*Grade:\*\*\s*(.*)/,                    // - **Grade:** 100/100
+		/•\s*\*\*Grade:\*\*\s*(.*)/,                    // • **Grade:** 100/100
+		/\*\s*\*\*Grade:\*\*\s*(.*)/,                 // * **Grade:** 100/100
+		/-\s*\*\*Grade\*\*:\s*(.*)/,                    // - **Grade**: 100/100 (colon without space)
+		/•\s*\*\*Grade\*\*:\s*(.*)/,                    // • **Grade**: 100/100 (colon without space)
+		/\*\s*\*\*Grade\*\*:\s*(.*)/,                  // * **Grade**: 100/100
+		/(?:•|-|\*)\s*\*\*Grade\*\*:?:\s*(.*)/,             // •/**/- **Grade**: 100/100 or - **Grade** 100/100
+		/(?:•|-|\*)\s*Grade:?:\s*(.*)/,                     // • Grade: 100/100 or - Grade 100/100
+		/Grade:?:\s*(\d+\/\d+|\d+)/m,                    // Grade: 100/100 (anywhere in text)
+		/(\d+\/\d+)\s*(?:grade|Grade)/                  // 100/100 grade (reverse order)
+	];
+	
+	for (const pattern of gradePatterns) {
+		gradeMatch = sectionText.match(pattern);
+		if (gradeMatch) {
+			grade = gradeMatch[1].trim();
+			break;
+		}
+	}
+	console.log('Grade match result:', gradeMatch, 'Final grade:', grade);
+	
+	// ROBUST PASS EXTRACTION - handles multiple formats including the actual QA Guard format
+	let pass = false;
+	let passMatch = null;
+	
+	// Try various pass patterns in order of specificity - FIXED TO HANDLE ACTUAL QA GUARD FORMAT
+	const passPatterns = [
+		// First check for the actual QA Guard format: "### **TITLE: PASS** ✅"
+		/###\s*\*\*[^:]+:\s*(PASS|FAIL)\s*\*\*\s*(✅|❌)/i,
+		/###\s*\*\*[^:]+:\s*(PASS|FAIL)\s*\*\*/i,
+		/\*\*[^:]+:\s*(PASS|FAIL)\s*\*\*\s*(✅|❌)/i,
+		/\*\*[^:]+:\s*(PASS|FAIL)\s*\*\*/i,
+		
+		// Then check for traditional patterns
+		/-\s*\*\*Pass:\*\*\s*(.*)/i,                    // - **Pass:** true
+		/•\s*\*\*Pass:\*\*\s*(.*)/i,                    // • **Pass:** true
+		/\*\s*\*\*Pass:\*\*\s*(.*)/i,                 // * **Pass:** true
+		/-\s*\*\*Pass\*\*:\s*(.*)/i,                    // - **Pass**: true (colon without space)
+		/•\s*\*\*Pass\*\*:\s*(.*)/i,                    // • **Pass**: true (colon without space)
+		/\*\s*\*\*Pass\*\*:\s*(.*)/i,                  // * **Pass**: true (colon without space)
+		/(?:•|-|\*)\s*\*\*Pass\*\*:?:\s*(.*)/i,             // •/**/- **Pass**: true
+		/(?:•|-|\*)\s*Pass:?:\s*(.*)/i,                     // • Pass: true
+		/Pass:?:\s*(true|false|✅|❌|TRUE|FALSE)/im,      // Pass: true (anywhere)
+		/(true|false|✅|❌|TRUE|FALSE)\s*pass/im         // true pass (reverse)
+	];
+	
+	for (const pattern of passPatterns) {
+		passMatch = sectionText.match(pattern);
+		if (passMatch) {
+			const passValue = passMatch[1].toLowerCase().trim();
+			pass = passValue.includes('pass') || 
+					passValue.includes('true') || 
+					passValue.includes('✅') || 
+					passValue === 'yes' ||
+					passValue === 'passed';
+			break;
+		}
+	}
+	console.log('Pass match result:', passMatch, 'Final pass:', pass);
+
+	// ROBUST ERRORS EXTRACTION - handles multiple formats
+	let errors: string[] = ['No errors reported.'];
+	let errorsMatch = null;
+	
+	// Try various error patterns
+	const errorPatterns = [
+		/-\s*\*\*Errors:\*\*\s*([\s\S]*?)(?=\n-\s*\*\*|$)/,             // - **Errors:** []
+		/•\s*\*\*Errors:\*\*\s*([\s\S]*?)(?=\n•\s*\*\*|$)/,             // • **Errors:** []
+		/\*\s*\*\*Errors:\*\*\s*([\s\S]*?)(?=\n\*\s*\*\*|$)/,         // * **Errors:** []
+		/(?:•|-|\*)\s*\*\*Errors?\*\*:?:\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/, // Generic bullet/dash/star + bold
+		/(?:•|-|\*)\s*Errors:?:\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/,       // Generic bullet/dash/star + no bold
+		/Errors:?:\s*([\s\S]*?)(?=\n(?:•|-|\*|\*\*)|$)/m                   // Errors: anywhere in text
+	];
+	
+	for (const pattern of errorPatterns) {
+		errorsMatch = sectionText.match(pattern);
+		if (errorsMatch) break;
+	}
+	
+	if (errorsMatch) {
+		const errorsBlock = errorsMatch[1].trim();
+		
+		if (errorsBlock === '[]' || !errorsBlock || errorsBlock.toLowerCase() === 'none') {
+			errors = ['No errors reported.'];
+		} else if (errorsBlock.startsWith('[') && errorsBlock.includes(']')) {
+			// Handle array format: []
+			try {
+				const parsed = JSON.parse(errorsBlock);
+				errors = Array.isArray(parsed) && parsed.length > 0 ? parsed : ['No errors reported.'];
+			} catch {
+				// If JSON parsing fails, treat as plain text
+				errors = [errorsBlock.replace(/[\[\]]/g, '').trim()];
+			}
+		} else {
+			// Handle multi-line bullet format or plain text
+			const lines = errorsBlock.split('\n').map(e => e.trim().replace(/^[-•\*]\s*/, '')).filter(Boolean);
+			errors = lines.length > 0 ? lines : ['No errors reported.'];
+		}
+	}
+
+	// ENHANCED LOGIC: If we have a grade of 100/100 and no errors, but pass is still false, 
+	// we should override the pass status based on the grade and errors
+	if (grade === '100/100' && (!errors || errors.length === 0 || errors[0] === 'No errors reported.')) {
+		console.log('Overriding pass status: Grade is 100/100 and no errors, setting pass to true');
+		pass = true;
+	}
+	
+	// Additional logic: If grade is high (80+) and no errors, likely a pass
+	if (grade !== 'N/A' && grade !== '0/100') {
+		const gradeNum = parseInt(grade.split('/')[0]);
+		if (gradeNum >= 80 && (!errors || errors.length === 0 || errors[0] === 'No errors reported.')) {
+			console.log(`Overriding pass status: Grade is ${grade} (${gradeNum}/100) and no errors, setting pass to true`);
+			pass = true;
+		}
+	}
+
+	// ROBUST ANALYSIS/CORRECTED CONTENT EXTRACTION - handles multiple formats
+	let corrected = 'Content analysis not available.';
+	let contentMatch = null;
+	
+	// Try various content patterns - Analysis, Corrected, or any descriptive text
+	const contentPatterns = [
+		/-\s*\*\*Analysis:\*\*\s*([\s\S]*?)(?=\n-\s*\*\*|$)/,            // - **Analysis:** text
+		/•\s*\*\*Analysis:\*\*\s*([\s\S]*?)(?=\n•\s*\*\*|$)/,            // • **Analysis:** text
+		/\*\s*\*\*Analysis:\*\*\s*([\s\S]*?)(?=\n\*\s*\*\*|$)/,        // * **Analysis:** text
+		/-\s*\*\*Corrected:\*\*\s*([\s\S]*?)(?=\n-\s*\*\*|$)/,          // - **Corrected:** text
+		/•\s*\*\*Corrected:\*\*\s*([\s\S]*?)(?=\n•\s*\*\*|$)/,          // • **Corrected:** text
+		/\*\s*\*\*Corrected:\*\*\s*([\s\S]*?)(?=\n\*\s*\*\*|$)/,      // * **Corrected:** text
+		/(?:•|-|\*)\s*\*\*(?:Analysis|Corrected)\*\*:?:\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/, // Generic
+		/(?:•|-|\*)\s*(?:Analysis|Corrected):?:\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/, // No bold
+		/Analysis:?:\s*([\s\S]*?)(?=\n(?:•|-|\*|\*\*)|$)/m,                  // Analysis: anywhere
+		/Corrected:?:\s*([\s\S]*?)(?=\n(?:•|-|\*|\*\*)|$)/m                  // Corrected: anywhere
+	];
+	
+	for (const pattern of contentPatterns) {
+		contentMatch = sectionText.match(pattern);
+		if (contentMatch) {
+			corrected = contentMatch[1].trim();
+			break;
+		}
+	}
+	
+	// If no Analysis/Corrected found, extract the section title/content as fallback
+	if (!contentMatch || corrected.length < 10) {
+		// Extract title or first meaningful content line
+		const lines = sectionText.split('\n').map(l => l.trim()).filter(Boolean);
+		const titleLine = lines.find(line => !line.startsWith('•') && !line.startsWith('-') && !line.startsWith('*') && !line.includes('**') && line.length > 10);
+		if (titleLine) {
+			corrected = titleLine;
+		}
+	}
+	
+	// Clean up any extra formatting
+	corrected = corrected.replace(/^#\s*/, '').replace(/###\s*\*\*[^*]+\*\*/, '').trim();
+	console.log('Content match result:', contentMatch, 'Final corrected:', corrected.substring(0, 50));
+	
+	console.log('Final section result - Grade:', grade, 'Pass:', pass, 'Errors:', errors);
+	return { grade, pass, errors, corrected };
+};
+
+
+/**
+ * Parses the structured QA report format that comes as plain text with sections.
+ * @param qaText The raw structured QA text from the API.
+ * @returns An object containing the detailed parsed report and top-level pass/grade info.
+ */
+const parseStructuredQaReport = (qaText: string): { detailedQaReport: DetailedQaReport, overallPass: boolean, overallGrade: string } => {
+    const defaultSection: QaSectionResult = { grade: 'N/A', pass: false, errors: ['Parsing failed'], corrected: '' };
+    const defaultReport: DetailedQaReport = {
+        title: { ...defaultSection },
+        meta: { ...defaultSection },
+        h1: { ...defaultSection },
+        copy: { ...defaultSection },
+        overall: { grade: 'N/A', pass: false, primaryIssue: 'Parsing failed' }
+    };
+
+    try {
+        // Split the text into sections by looking for section headers
+        const sections = qaText.split(/(?=^## [A-Z]+)/gm).filter(Boolean);
+        
+        const parsedData: Partial<DetailedQaReport> = {};
+        
+        sections.forEach(sectionText => {
+            const lines = sectionText.trim().split('\n');
+            const header = lines[0]?.replace('## ', '').trim().toLowerCase() || '';
+            
+            // Extract grade
+            const gradeLine = lines.find(line => line.includes('- Grade:'))?.trim() || '';
+            const gradeMatch = gradeLine.match(/- Grade:\s*(\d+)\/100/) || gradeLine.match(/- Grade:\s*([^\n]+)/);
+            const grade = gradeMatch ? gradeMatch[1].trim() : 'N/A';
+            
+            // Extract pass status
+            const passLine = lines.find(line => line.includes('- Pass:'))?.trim() || '';
+            const passMatch = passLine.match(/- Pass:\s*(true|false)/i);
+            const pass = passMatch ? passMatch[1].toLowerCase() === 'true' : false;
+            
+            // Extract errors
+            let errors: string[] = [];
+            const errorsLineIndex = lines.findIndex(line => line.includes('- Errors:'));
+            if (errorsLineIndex !== -1) {
+                const errorsContent = lines[errorsLineIndex].replace('- Errors:', '').trim();
+                if (errorsContent === '[]' || errorsContent === '') {
+                    errors = ['No errors reported.'];
+                } else {
+                    // Look for multi-line errors
+                    let errorText = errorsContent;
+                    for (let i = errorsLineIndex + 1; i < lines.length; i++) {
+                        if (lines[i].startsWith('- ') && !lines[i].startsWith('  ')) break;
+                        errorText += '\n' + lines[i].trim();
+                    }
+                    
+                    // Parse error list
+                    if (errorText.startsWith('[') && errorText.includes(']')) {
+                        // Handle array format
+                        try {
+                            const parsedErrors = JSON.parse(errorText);
+                            errors = Array.isArray(parsedErrors) ? parsedErrors : [errorText];
+                        } catch {
+                            errors = [errorText];
+                        }
+                    } else {
+                        // Handle plain text or bullet list
+                        errors = errorText.split('\n')
+                            .map(e => e.trim().replace(/^- /, ''))
+                            .filter(Boolean);
+                    }
+                    
+                    if (errors.length === 0) {
+                        errors = ['No errors reported.'];
+                    }
+                }
+            } else {
+                errors = ['Errors not found.'];
+            }
+            
+            // Extract corrected content
+            let corrected = '';
+            const correctedLineIndex = lines.findIndex(line => line.includes('- Corrected:'));
+            if (correctedLineIndex !== -1) {
+                corrected = lines.slice(correctedLineIndex)
+                    .join('\n')
+                    .replace('- Corrected:', '')
+                    .trim();
+            } else {
+                corrected = 'Correction not found.';
+            }
+            
+            const sectionResult: QaSectionResult = { grade, pass, errors, corrected };
+            
+            if (header.includes('title')) {
+                parsedData.title = sectionResult;
+            } else if (header.includes('meta')) {
+                parsedData.meta = sectionResult;
+            } else if (header.includes('h1')) {
+                parsedData.h1 = sectionResult;
+            } else if (header.includes('copy')) {
+                parsedData.copy = sectionResult;
+            } else if (header.includes('overall')) {
+                // Extract primary issue for overall section
+                const primaryIssueLine = lines.find(line => line.includes('- Primary Issue:'))?.trim() || '';
+                const primaryIssue = primaryIssueLine.replace('- Primary Issue:', '').trim() || 'Not specified.';
+                parsedData.overall = { grade, pass, primaryIssue };
+            }
+        });
+        
+        const finalReport: DetailedQaReport = {
+            title: parsedData.title || { ...defaultSection, errors: ['Title section not found'] },
+            meta: parsedData.meta || { ...defaultSection, errors: ['Meta section not found'] },
+            h1: parsedData.h1 || { ...defaultSection, errors: ['H1 section not found'] },
+            copy: parsedData.copy || { ...defaultSection, errors: ['Copy section not found'] },
+            overall: parsedData.overall || { grade: 'N/A', pass: false, primaryIssue: 'Overall section not found' }
+        };
+        
+        return { 
+            detailedQaReport: finalReport, 
+            overallPass: finalReport.overall.pass, 
+            overallGrade: finalReport.overall.grade 
+        };
+        
+    } catch (error) {
+        console.error('Error parsing structured QA report:', error);
+        return { detailedQaReport: defaultReport, overallPass: false, overallGrade: 'N/A' };
+    }
+};
+
+/**
+ * Parses single-section format where all content is in one block.
+ * @param sectionText The section containing all embedded QA data.
+ * @param defaultReport Default report structure.
+ * @returns Parsed QA report data.
+ */
+const parseSingleSectionFormat = (sectionText: string, defaultReport: DetailedQaReport): { detailedQaReport: DetailedQaReport, overallPass: boolean, overallGrade: string } => {
+    console.log('Parsing single-section format');
+    
+    // Extract embedded sections by looking for section patterns like "**TITLE:", "**META:", etc.
+    const titleMatch = sectionText.match(/\*\*TITLE[^*]*\*\*([\s\S]*?)(?=\*\*[A-Z]+|$)/i);
+    const metaMatch = sectionText.match(/\*\*META[^*]*\*\*([\s\S]*?)(?=\*\*[A-Z]+|$)/i);
+    const h1Match = sectionText.match(/\*\*H1[^*]*\*\*([\s\S]*?)(?=\*\*[A-Z]+|$)/i);
+    const copyMatch = sectionText.match(/\*\*COPY[^*]*\*\*([\s\S]*?)(?=\*\*[A-Z]+|$)/i);
+    const overallMatch = sectionText.match(/\*\*(?:OVERALL|ASSESSMENT)[^*]*\*\*([\s\S]*?)$/i);
+    
+    const finalReport: DetailedQaReport = {
+        title: titleMatch ? parseSection(titleMatch[1]) : { ...defaultReport.title, errors: ['Title section not found'] },
+        meta: metaMatch ? parseSection(metaMatch[1]) : { ...defaultReport.meta, errors: ['Meta section not found'] },
+        h1: h1Match ? parseSection(h1Match[1]) : { ...defaultReport.h1, errors: ['H1 section not found'] },
+        copy: copyMatch ? parseSection(copyMatch[1]) : { ...defaultReport.copy, errors: ['Copy section not found'] },
+        overall: overallMatch ? { 
+            grade: extractOverallGrade(overallMatch[1]),
+            pass: extractOverallPass(overallMatch[1]),
+            primaryIssue: 'Single-section format parsed'
+        } : { ...defaultReport.overall }
+    };
+    
+    return { 
+        detailedQaReport: finalReport, 
+        overallPass: finalReport.overall.pass, 
+        overallGrade: finalReport.overall.grade 
+    };
+};
+
+/**
+ * Helper function to extract overall grade from text.
+ */
+const extractOverallGrade = (text: string): string => {
+    const gradeMatch = text.match(/Grade[^:]*:?\s*(\d+(?:\.\d+)?\/?\d*)/i) || text.match(/(\d+(?:\.\d+)?\/\d+)/);
+    return gradeMatch ? gradeMatch[1].trim() : 'N/A';
+};
+
+/**
+ * Helper function to extract overall pass from text.
+ */
+const extractOverallPass = (text: string): boolean => {
+    const passMatch = text.match(/Pass[^:]*:?\s*(true|false|✅|❌|TRUE|FALSE)/i);
+    if (passMatch) {
+        const passValue = passMatch[1].toLowerCase().trim();
+        return passValue.includes('true') || passValue.includes('✅');
+    }
+    return false;
+};
+
+/**
+ * Enhanced section parsing that captures ALL QA Guard content
+ */
+const parseEnhancedSection = (sectionBlock: string): QaSectionResult => {
+	const baseSection = parseSection(sectionBlock);
+	
+	// Extract detailed assessment content
+	const detailedAssessmentMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*(?:Detailed\s+)?Assessment\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/i);
+	const explanationsMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*(?:Explanation|Reasoning)\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/i);
+	
+	// Extract key strengths
+	const keyStrengthsMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*Key\s+Strengths\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/i);
+	const strengthsList = keyStrengthsMatch ? 
+		keyStrengthsMatch[1].split('\n')
+			.map(line => line.replace(/^[-•*]\s*/, '').trim())
+			.filter(line => line.length > 0) : undefined;
+	
+	// Extract recommendations
+	const recommendationsMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*(?:Recommendations?|Suggestions?)\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/i);
+	const recommendationsList = recommendationsMatch ? 
+		recommendationsMatch[1].split('\n')
+			.map(line => line.replace(/^[-•*]\s*/, '').trim())
+			.filter(line => line.length > 0) : undefined;
+	
+	return {
+		...baseSection,
+		detailedAssessment: detailedAssessmentMatch ? detailedAssessmentMatch[1].trim() : undefined,
+		explanations: explanationsMatch ? explanationsMatch[1].trim() : undefined,
+		keyStrengths: strengthsList,
+		recommendations: recommendationsList,
+		rawContent: sectionBlock
+	};
+};
+
+/**
+ * Enhanced overall section parsing that captures ALL QA Guard content
+ */
+const parseEnhancedOverallSection = (sectionBlock: string): { grade: string; pass: boolean; primaryIssue: string; detailedAssessment?: string; keyStrengths?: string[]; recommendations?: string[]; explanations?: string; rawContent?: string } => {
+	console.log('Parsing enhanced overall section with actual QA Guard format');
+	console.log('Overall section preview:', sectionBlock.substring(0, 300));
+	
+	let grade = 'N/A';
+	let pass = false;
+	let primaryIssue = 'Overall assessment not available.';
+	let detailedAssessment = '';
+	let keyStrengths: string[] = [];
+	let recommendations: string[] = [];
+	let explanations = '';
+	
+	// COMPREHENSIVE OVERALL GRADE PATTERN MATCHING
+	// Look for the actual QA Guard overall format: "Final Grade: 98.75/100"
+	const overallGradePatterns = [
+		/Final\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                           // Final Grade: 98.75/100
+		/Overall\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                         // Overall Grade: 98.75/100
+		/Total\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                           // Total Grade: 98.75/100
+		/Combined\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                        // Combined Grade: 98.75/100
+		/Average\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                         // Average Grade: 98.75/100
+		/Mean\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                            // Mean Grade: 98.75/100
+		/Composite\s+Grade:\s*(\d+(?:\.\d+)?)\/100/i,                       // Composite Grade: 98.75/100
+		/Final\s+Score:\s*(\d+(?:\.\d+)?)\/100/i,                           // Final Score: 98.75/100
+		/Overall\s+Score:\s*(\d+(?:\.\d+)?)\/100/i,                         // Overall Score: 98.75/100
+		/Total\s+Score:\s*(\d+(?:\.\d+)?)\/100/i,                           // Total Score: 98.75/100
+		/Final\s+Rating:\s*(\d+(?:\.\d+)?)\/100/i,                          // Final Rating: 98.75/100
+		/Overall\s+Rating:\s*(\d+(?:\.\d+)?)\/100/i,                        // Overall Rating: 98.75/100
+		/Final\s+Mark:\s*(\d+(?:\.\d+)?)\/100/i,                            // Final Mark: 98.75/100
+		/Overall\s+Mark:\s*(\d+(?:\.\d+)?)\/100/i,                          // Overall Mark: 98.75/100
+		/Final\s+Points:\s*(\d+(?:\.\d+)?)\/100/i,                          // Final Points: 98.75/100
+		/Overall\s+Points:\s*(\d+(?:\.\d+)?)\/100/i,                        // Overall Points: 98.75/100
+		/-?\s*\*\*Final\s+Grade:\*\*\s*(\d+(?:\.\d+)?)\/100/i,              // - **Final Grade:** 98.75/100
+		/-?\s*\*\*Overall\s+Grade:\*\*\s*(\d+(?:\.\d+)?)\/100/i,            // - **Overall Grade:** 98.75/100
+		/-?\s*\*\*Total\s+Grade:\*\*\s*(\d+(?:\.\d+)?)\/100/i,              // - **Total Grade:** 98.75/100
+		/-?\s*\*\*Final\s+Score:\*\*\s*(\d+(?:\.\d+)?)\/100/i,              // - **Final Score:** 98.75/100
+		/-?\s*\*\*Overall\s+Score:\*\*\s*(\d+(?:\.\d+)?)\/100/i,            // - **Overall Score:** 98.75/100
+		/-?\s*\*\*Final\s+Rating:\*\*\s*(\d+(?:\.\d+)?)\/100/i,             // - **Final Rating:** 98.75/100
+		/-?\s*\*\*Overall\s+Rating:\*\*\s*(\d+(?:\.\d+)?)\/100/i,           // - **Overall Rating:** 98.75/100
+		/Grade:\s*(\d+(?:\.\d+)?)\/100/i,                                   // Grade: 98.75/100
+		/Score:\s*(\d+(?:\.\d+)?)\/100/i,                                   // Score: 98.75/100
+		/Rating:\s*(\d+(?:\.\d+)?)\/100/i,                                  // Rating: 98.75/100
+		/Mark:\s*(\d+(?:\.\d+)?)\/100/i,                                    // Mark: 98.75/100
+		/Points:\s*(\d+(?:\.\d+)?)\/100/i,                                  // Points: 98.75/100
+	];
+	
+	let finalGradeMatch = null;
+	for (const pattern of overallGradePatterns) {
+		finalGradeMatch = sectionBlock.match(pattern);
+		if (finalGradeMatch) {
+			grade = `${finalGradeMatch[1]}/100`;
+			console.log('Found final grade:', grade);
+			break;
+		}
+	}
+	
+	// COMPREHENSIVE OVERALL PASS STATUS PATTERN MATCHING
+	// Look for overall pass status: "Overall Pass: FALSE (due to META violation)"
+	const overallPassPatterns = [
+		/Overall\s+Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,       // Overall Pass: FALSE (due to META violation)
+		/Final\s+Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,         // Final Pass: FALSE (due to META violation)
+		/Total\s+Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,         // Total Pass: FALSE (due to META violation)
+		/Combined\s+Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,      // Combined Pass: FALSE (due to META violation)
+		/Average\s+Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,       // Average Pass: FALSE (due to META violation)
+		/Overall\s+Status:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,     // Overall Status: FALSE (due to META violation)
+		/Final\s+Status:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,       // Final Status: FALSE (due to META violation)
+		/Overall\s+Result:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,     // Overall Result: FALSE (due to META violation)
+		/Final\s+Result:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,       // Final Result: FALSE (due to META violation)
+		/Overall\s+Assessment:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i, // Overall Assessment: FALSE (due to META violation)
+		/Final\s+Assessment:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,   // Final Assessment: FALSE (due to META violation)
+		/-?\s*\*\*Overall\s+Pass:\*\*\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i, // - **Overall Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Final\s+Pass:\*\*\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,   // - **Final Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Total\s+Pass:\*\*\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,   // - **Total Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Overall\s+Status:\*\*\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i, // - **Overall Status:** FALSE (due to META violation)
+		/-?\s*\*\*Final\s+Status:\*\*\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,   // - **Final Status:** FALSE (due to META violation)
+		/Pass:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,                 // Pass: FALSE (due to META violation)
+		/Status:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,               // Status: FALSE (due to META violation)
+		/Result:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,               // Result: FALSE (due to META violation)
+		/Assessment:\s*(TRUE|FALSE|PASS|FAIL)(?:\s*\([^)]+\))?/i,           // Assessment: FALSE (due to META violation)
+	];
+	
+	let overallPassMatch = null;
+	for (const pattern of overallPassPatterns) {
+		overallPassMatch = sectionBlock.match(pattern);
+		if (overallPassMatch) {
+			pass = overallPassMatch[1].toUpperCase() === 'TRUE' || overallPassMatch[1].toUpperCase() === 'PASS';
+			console.log('Found overall pass status:', pass);
+			break;
+		}
+	}
+	
+	// COMPREHENSIVE PRIMARY ISSUE PATTERN MATCHING
+	// Look for primary issue in the pass status explanation
+	const issuePatterns = [
+		/Overall\s+Pass:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,        // Overall Pass: FALSE (due to META violation)
+		/Final\s+Pass:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,          // Final Pass: FALSE (due to META violation)
+		/Total\s+Pass:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,          // Total Pass: FALSE (due to META violation)
+		/Overall\s+Status:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,      // Overall Status: FALSE (due to META violation)
+		/Final\s+Status:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,        // Final Status: FALSE (due to META violation)
+		/Pass:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,                  // Pass: FALSE (due to META violation)
+		/Status:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,                // Status: FALSE (due to META violation)
+		/Result:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,                // Result: FALSE (due to META violation)
+		/Assessment:\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,            // Assessment: FALSE (due to META violation)
+		/-?\s*\*\*Overall\s+Pass:\*\*\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i, // - **Overall Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Final\s+Pass:\*\*\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,   // - **Final Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Total\s+Pass:\*\*\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,   // - **Total Pass:** FALSE (due to META violation)
+		/-?\s*\*\*Overall\s+Status:\*\*\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i, // - **Overall Status:** FALSE (due to META violation)
+		/-?\s*\*\*Final\s+Status:\*\*\s*(?:TRUE|FALSE|PASS|FAIL)\s*\(([^)]+)\)/i,   // - **Final Status:** FALSE (due to META violation)
+		/-?\s*\*\*Primary\s+Issue:\*\*\s*([^\n]+)/i,                        // - **Primary Issue:** Some sections have violations
+		/-?\s*\*\*Main\s+Issue:\*\*\s*([^\n]+)/i,                           // - **Main Issue:** Some sections have violations
+		/-?\s*\*\*Key\s+Issue:\*\*\s*([^\n]+)/i,                            // - **Key Issue:** Some sections have violations
+		/-?\s*\*\*Issue:\*\*\s*([^\n]+)/i,                                  // - **Issue:** Some sections have violations
+		/-?\s*\*\*Problem:\*\*\s*([^\n]+)/i,                                // - **Problem:** Some sections have violations
+		/-?\s*\*\*Concern:\*\*\s*([^\n]+)/i,                                // - **Concern:** Some sections have violations
+		/Primary\s+Issue:\s*([^\n]+)/i,                                     // Primary Issue: Some sections have violations
+		/Main\s+Issue:\s*([^\n]+)/i,                                        // Main Issue: Some sections have violations
+		/Key\s+Issue:\s*([^\n]+)/i,                                         // Key Issue: Some sections have violations
+		/Issue:\s*([^\n]+)/i,                                               // Issue: Some sections have violations
+		/Problem:\s*([^\n]+)/i,                                             // Problem: Some sections have violations
+		/Concern:\s*([^\n]+)/i,                                             // Concern: Some sections have violations
+	];
+	
+	let issueMatch = null;
+	for (const pattern of issuePatterns) {
+		issueMatch = sectionBlock.match(pattern);
+		if (issueMatch) {
+			primaryIssue = issueMatch[1].trim();
+			console.log('Found primary issue:', primaryIssue);
+			break;
+		}
+	}
+	
+	// COMPREHENSIVE DETAILED BREAKDOWN PATTERN MATCHING
+	// Look for detailed breakdown sections
+	const breakdownPatterns = [
+		/##\s+DETAILED\s+BREAKDOWN[^#]*/i,                                 // ## DETAILED BREAKDOWN
+		/##\s+BREAKDOWN[^#]*/i,                                            // ## BREAKDOWN
+		/##\s+ANALYSIS[^#]*/i,                                             // ## ANALYSIS
+		/##\s+ASSESSMENT[^#]*/i,                                           // ## ASSESSMENT
+		/##\s+EVALUATION[^#]*/i,                                           // ## EVALUATION
+		/##\s+REVIEW[^#]*/i,                                               // ## REVIEW
+		/##\s+SUMMARY[^#]*/i,                                              // ## SUMMARY
+		/##\s+DETAILS[^#]*/i,                                              // ## DETAILS
+		/##\s+EXPLANATION[^#]*/i,                                          // ## EXPLANATION
+		/##\s+COMMENTS[^#]*/i,                                             // ## COMMENTS
+		/##\s+NOTES[^#]*/i,                                                // ## NOTES
+		/###\s+DETAILED\s+BREAKDOWN[^#]*/i,                                // ### DETAILED BREAKDOWN
+		/###\s+BREAKDOWN[^#]*/i,                                           // ### BREAKDOWN
+		/###\s+ANALYSIS[^#]*/i,                                            // ### ANALYSIS
+		/###\s+ASSESSMENT[^#]*/i,                                          // ### ASSESSMENT
+		/###\s+EVALUATION[^#]*/i,                                          // ### EVALUATION
+		/###\s+REVIEW[^#]*/i,                                              // ### REVIEW
+		/###\s+SUMMARY[^#]*/i,                                             // ### SUMMARY
+		/###\s+DETAILS[^#]*/i,                                             // ### DETAILS
+		/###\s+EXPLANATION[^#]*/i,                                         // ### EXPLANATION
+		/###\s+COMMENTS[^#]*/i,                                            // ### COMMENTS
+		/###\s+NOTES[^#]*/i,                                               // ### NOTES
+	];
+	
+	let breakdownMatch = null;
+	for (const pattern of breakdownPatterns) {
+		breakdownMatch = sectionBlock.match(pattern);
+		if (breakdownMatch) {
+			detailedAssessment = breakdownMatch[0];
+			console.log('Found detailed breakdown');
+			break;
+		}
+	}
+	
+	// ENHANCED KEY STRENGTHS AND RECOMMENDATIONS EXTRACTION
+	// Extract key strengths and recommendations from the overall assessment
+	const lowerSection = sectionBlock.toLowerCase();
+	
+	// Extract key strengths
+	if (lowerSection.includes('compliance') && lowerSection.includes('requirements')) {
+		keyStrengths.push('Overall compliance with requirements');
+	}
+	if (grade !== 'N/A' && parseFloat(grade.split('/')[0]) >= 80) {
+		keyStrengths.push('High overall grade achieved');
+	}
+	if (lowerSection.includes('successful') || lowerSection.includes('approved')) {
+		keyStrengths.push('Overall assessment successful');
+	}
+	if (lowerSection.includes('meets') && lowerSection.includes('standards')) {
+		keyStrengths.push('Meets overall standards');
+	}
+	if (lowerSection.includes('satisfies') && lowerSection.includes('criteria')) {
+		keyStrengths.push('Satisfies overall criteria');
+	}
+	if (lowerSection.includes('valid') || lowerSection.includes('correct')) {
+		keyStrengths.push('Overall content validation passed');
+	}
+	
+	// Extract recommendations
+	if (lowerSection.includes('violation') || lowerSection.includes('fail')) {
+		recommendations.push('Address identified violations');
+	}
+	if (lowerSection.includes('correction') || lowerSection.includes('fix')) {
+		recommendations.push('Implement suggested corrections');
+	}
+	if (lowerSection.includes('improve') || lowerSection.includes('enhance')) {
+		recommendations.push('Improve overall content quality');
+	}
+	if (lowerSection.includes('adjust') || lowerSection.includes('modify')) {
+		recommendations.push('Adjust content to meet requirements');
+	}
+	if (lowerSection.includes('review') && lowerSection.includes('carefully')) {
+		recommendations.push('Review content carefully');
+	}
+	if (lowerSection.includes('consider') && lowerSection.includes('changes')) {
+		recommendations.push('Consider suggested changes');
+	}
+	
+	// FALLBACK PATTERN MATCHING
+	// If no grade found, try alternative patterns
+	if (grade === 'N/A') {
+		const fallbackGradePatterns = [
+			/Grade:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Score:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Rating:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Mark:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Points:\s*(\d+(?:\.\d+)?)\/100/i,
+			/(\d+(?:\.\d+)?)\/100/i,
+		];
+		
+		for (const pattern of fallbackGradePatterns) {
+			const match = sectionBlock.match(pattern);
+			if (match) {
+				grade = `${match[1]}/100`;
+				console.log('Found fallback grade:', grade);
+				break;
+			}
+		}
+	}
+	
+	// INFER PASS STATUS FROM GRADE IF NOT DETERMINED
+	if (grade !== 'N/A' && !overallPassMatch) {
+		const gradeNum = parseFloat(grade.split('/')[0]);
+		pass = gradeNum >= 80;
+		console.log('Inferred overall pass status from grade:', pass);
+	}
+	
+	// FINAL PRIMARY ISSUE DETERMINATION
+	// If still no primary issue, generate one based on pass status
+	if (primaryIssue === 'Overall assessment not available.') {
+		if (pass) {
+			primaryIssue = 'All sections meet requirements';
+		} else {
+			primaryIssue = 'Some sections have violations';
+		}
+	}
+	
+	console.log('Final overall result - Grade:', grade, 'Pass:', pass, 'Issue:', primaryIssue);
+	
+	return {
+		grade,
+		pass,
+		primaryIssue,
+		detailedAssessment: detailedAssessment || undefined,
+		keyStrengths: keyStrengths.length > 0 ? keyStrengths : undefined,
+		recommendations: recommendations.length > 0 ? recommendations : undefined,
+		explanations: explanations || undefined,
+		rawContent: sectionBlock
+	};
+};
+
+/**
+ * Determine the type of an additional section based on its content
+ */
+const determineSectionType = (sectionBlock: string): 'assessment' | 'strengths' | 'recommendations' | 'explanations' | 'other' => {
+	const lowerContent = sectionBlock.toLowerCase();
+	
+	if (lowerContent.includes('strength') || lowerContent.includes('positive') || lowerContent.includes('excellent')) {
+		return 'strengths';
+	} else if (lowerContent.includes('recommend') || lowerContent.includes('suggest') || lowerContent.includes('improve')) {
+		return 'recommendations';
+	} else if (lowerContent.includes('explain') || lowerContent.includes('reason') || lowerContent.includes('why')) {
+		return 'explanations';
+	} else if (lowerContent.includes('assess') || lowerContent.includes('evaluate') || lowerContent.includes('analysis')) {
+		return 'assessment';
+	} else {
+		return 'other';
+	}
+};
+
+/**
+ * Parses the new, structured QA report format.
+ * @param qaText The raw `qa_gaurd` string from the API.
+ * @returns An object containing the detailed parsed report and top-level pass/grade info.
+ */
+const parseNewQaReport = (qaText: string): { detailedQaReport: DetailedQaReport, overallPass: boolean, overallGrade: string } => {
+	// Default structure in case of parsing failure
+	const defaultSection: QaSectionResult = { grade: 'N/A', pass: false, errors: ['Parsing failed'], corrected: '' };
+	const defaultReport: DetailedQaReport = {
+		title: { ...defaultSection },
+		meta: { ...defaultSection },
+		h1: { ...defaultSection },
+		copy: { ...defaultSection },
+		overall: { grade: 'N/A', pass: false, primaryIssue: 'Parsing failed' },
+		completeRawReport: qaText // Always preserve the complete raw report
+	};
+
+	const cleanedQaText = cleanResponseText(qaText);
+	if (!cleanedQaText || typeof cleanedQaText !== 'string') {
+		return { detailedQaReport: defaultReport, overallPass: false, overallGrade: 'N/A' };
+	}
+	
+	console.log('Enhanced QA parsing - input text preview:', cleanedQaText.substring(0, 500));
+	
+	// COMPLETELY REWRITTEN TO HANDLE ACTUAL QA GUARD FORMAT
+	// The QA Guard uses formats like: "## **TITLE GRADE: 100/100 ✅ PASS**"
+	
+	const parsedData: Partial<DetailedQaReport> = {};
+	const additionalSections: { [sectionName: string]: { content: string; type: 'assessment' | 'strengths' | 'recommendations' | 'explanations' | 'other'; } } = {};
+	
+	// Enhanced section splitting to handle the actual QA Guard format
+	let sections: string[] = [];
+	
+	// First, try to remove any leading overall evaluation header that might interfere with section splitting
+	const contentAfterOverallHeader = cleanedQaText.replace(/^(#\s*FINAL\s+QUALITY\s+ASSURANCE\s+EVALUATION|##\s*Section\s+Grades)\s*/i, '').trim();
+	
+	// Try multiple splitting strategies for robustness
+	// Order matters: more specific patterns should come first
+	const sectionHeaderPatterns = [
+		// Highly specific: ### **SECTION NAME** - GRADE: X/100 ✅ PASS
+		/(?=(?:##|###)\s*\*\*([^*]+)\*\*\s*-\s*GRADE:)/g,
+		// Highly specific: ### **SECTION NAME: PASS** ✅
+		/(?=(?:##|###)\s*\*\*([^*]+):\s*(?:PASS|FAIL)\*\*\s*(?:✅|❌))/g,
+		// Specific: ## **SECTION NAME GRADE:**
+		/(?=(?:##|###)\s*\*\*([^*]+)\s+GRADE:)/g,
+		// Specific: ## **SECTION NAME** (with optional pass/fail indicator)
+		/(?=(?:##|###)\s*\*\*([^*]+)\*\*(?:\s*(?:✅|❌|PASS|FAIL))?)/g,
+		// Generic: ## Section Name
+		/(?=(?:##|###)\s*[^#\n]*)/g,
+	];
+	
+	for (const pattern of sectionHeaderPatterns) {
+		sections = contentAfterOverallHeader.split(pattern).filter(Boolean);
+		if (sections.length > 1) { // If we found more than one section, this split was successful
+			console.log(`Using successful split pattern: ${pattern}`);
+			break;
+		}
+	}
+	
+	// Fallback to paragraph splitting if no suitable header pattern was found
+	if (sections.length <= 1) {
+		sections = contentAfterOverallHeader.split(/\n\n+/).filter(section => section.trim().length > 20);
+		console.log('Using paragraph-based parsing as fallback (no header pattern matched)');
+	}
+	
+	// Ensure sections are not empty after splitting
+	sections = sections.filter(s => s.trim().length > 5); // Minimum length to be considered a valid section
+	
+	console.log(`Found ${sections.length} sections to parse`);
+		sections.forEach((section, index) => {
+		console.log(`Section ${index} preview:`, section.substring(0, 150));
+	});
+	
+	// Parse each section with enhanced logic
+	sections.forEach((sectionBlock, index) => {
+		const lines = sectionBlock.trim().split('\n');
+		const headerRaw = lines[0]?.trim() || '';
+		const header = headerRaw.toLowerCase();
+		
+		console.log(`Processing section ${index} with header:`, headerRaw);
+		
+		let sectionType = ''; // Must be reset for each block
+		let sectionData: QaSectionResult | null = null;
+		
+		// New, more robust section identification logic
+		const headerForTypeCheck = header
+			.replace(/^(#+\s*|\*\*)/, '')
+			.replace(/[:*]/g, '')
+			.replace(/\s*-\s*grade:.*/, '') // also strip grade info
+			.replace(/\s*(✅|❌|pass|fail).*/, '') // and status info
+			.trim();
+
+		const words = headerForTypeCheck.split(/\s+/).filter(Boolean);
+
+		// If the normalized header is just ONE clean word, it's a primary section
+		if (words.length === 1) {
+			const typeWord = words[0];
+			if (typeWord === 'title') sectionType = 'title';
+			else if (typeWord === 'meta') sectionType = 'meta';
+			else if (typeWord === 'h1') sectionType = 'h1';
+			else if (typeWord === 'copy') sectionType = 'copy';
+			else if (['overall', 'final', 'assessment'].includes(typeWord)) sectionType = 'overall';
+		}
+
+		// If not identified, check for specific multi-word headers for 'overall'
+		if (!sectionType) {
+			if (headerForTypeCheck.startsWith('overall assessment') || headerForTypeCheck.startsWith('final assessment')) {
+				sectionType = 'overall';
+			}
+		}
+		
+		// Route to the correct parser or handle as an additional section
+		if (sectionType === 'title') {
+			console.log('Identified as TITLE section');
+			sectionData = parseActualQAGuardSection(sectionBlock, sectionType);
+			if (sectionData) parsedData.title = sectionData;
+		} else if (sectionType === 'meta') {
+			console.log('Identified as META section');
+			sectionData = parseActualQAGuardSection(sectionBlock, sectionType);
+			if (sectionData) parsedData.meta = sectionData;
+		} else if (sectionType === 'h1') {
+			console.log('Identified as H1 section');
+			sectionData = parseActualQAGuardSection(sectionBlock, sectionType);
+			if (sectionData) parsedData.h1 = sectionData;
+		} else if (sectionType === 'copy') {
+			console.log('Identified as COPY section');
+			sectionData = parseActualQAGuardSection(sectionBlock, sectionType);
+			if (sectionData) parsedData.copy = sectionData;
+		} else if (sectionType === 'overall') {
+			console.log('Identified as OVERALL section');
+			const enhancedOverall = parseEnhancedOverallSection(sectionBlock);
+			parsedData.overall = enhancedOverall;
+		} else if (header.includes('grades by section') || header.includes('section grades')) {
+			console.log('Identified as introductory section, skipping.');
+			return; 
+		} else {
+			// Additional sections logic remains here
+			console.log('Identified as additional section');
+			let displayName = headerRaw.replace(/^[#*\s-]+/g, '').trim();
+			// ... (existing additional section mapping logic) ...
+			additionalSections[displayName] = {
+				content: sectionBlock,
+				type: determineSectionType(sectionBlock)
+			};
+		}
+	});
+	
+	// If no sections were found, try to extract from the complete text
+	if (Object.keys(parsedData).length === 0) {
+		console.log('No sections found, attempting full-text extraction');
+		
+		// Try to extract grades and pass status from the raw text
+		const titleMatch = cleanedQaText.match(/TITLE[^:]*:\s*(\d+)\/100[^📋]*?(✅|❌|PASS|FAIL)/i);
+		const metaMatch = cleanedQaText.match(/META[^:]*:\s*(\d+)\/100[^📋]*?(✅|❌|PASS|FAIL)/i);
+		const h1Match = cleanedQaText.match(/H1[^:]*:\s*(\d+)\/100[^📋]*?(✅|❌|PASS|FAIL)/i);
+		const copyMatch = cleanedQaText.match(/COPY[^:]*:\s*(\d+)\/100[^📋]*?(✅|❌|PASS|FAIL)/i);
+		
+		if (titleMatch) {
+			parsedData.title = {
+				grade: `${titleMatch[1]}/100`,
+				pass: titleMatch[2] === '✅' || titleMatch[2].toUpperCase() === 'PASS',
+				errors: titleMatch[2] === '✅' || titleMatch[2].toUpperCase() === 'PASS' ? ['No errors reported.'] : ['Violations detected'],
+				corrected: 'Content analysis extracted from full report',
+				rawContent: cleanedQaText
+			};
+			console.log('Extracted TITLE data:', parsedData.title);
+		}
+		
+		if (metaMatch) {
+			parsedData.meta = {
+				grade: `${metaMatch[1]}/100`,
+				pass: metaMatch[2] === '✅' || metaMatch[2].toUpperCase() === 'PASS',
+				errors: metaMatch[2] === '✅' || metaMatch[2].toUpperCase() === 'PASS' ? ['No errors reported.'] : ['Violations detected'],
+				corrected: 'Content analysis extracted from full report',
+				rawContent: cleanedQaText
+			};
+			console.log('Extracted META data:', parsedData.meta);
+		}
+		
+		if (h1Match) {
+			parsedData.h1 = {
+				grade: `${h1Match[1]}/100`,
+				pass: h1Match[2] === '✅' || h1Match[2].toUpperCase() === 'PASS',
+				errors: h1Match[2] === '✅' || h1Match[2].toUpperCase() === 'PASS' ? ['No errors reported.'] : ['Violations detected'],
+				corrected: 'Content analysis extracted from full report',
+				rawContent: cleanedQaText
+			};
+			console.log('Extracted H1 data:', parsedData.h1);
+		}
+		
+		if (copyMatch) {
+			parsedData.copy = {
+				grade: `${copyMatch[1]}/100`,
+				pass: copyMatch[2] === '✅' || copyMatch[2].toUpperCase() === 'PASS',
+				errors: copyMatch[2] === '✅' || copyMatch[2].toUpperCase() === 'PASS' ? ['No errors reported.'] : ['Violations detected'],
+				corrected: 'Content analysis extracted from full report',
+				rawContent: cleanedQaText
+			};
+			console.log('Extracted COPY data:', parsedData.copy);
+		}
+		
+		// Extract overall assessment
+		const overallMatch = cleanedQaText.match(/(?:OVERALL|Final).*?(\d+)\/100/i);
+		if (overallMatch) {
+			const overallGrade = parseInt(overallMatch[1]);
+				parsedData.overall = {
+				grade: `${overallGrade}/100`,
+				pass: overallGrade >= 80,
+				primaryIssue: overallGrade >= 80 ? 'All sections meet requirements' : 'Some violations detected',
+				rawContent: cleanedQaText
+			};
+			console.log('Extracted OVERALL data:', parsedData.overall);
+		}
+	}
+
+	const finalReport: DetailedQaReport = {
+		title: parsedData.title || { ...defaultSection, errors: ['Title section not found in QA response'] },
+		meta: parsedData.meta || { ...defaultSection, errors: ['Meta section not found in QA response'] },
+		h1: parsedData.h1 || { ...defaultSection, errors: ['H1 section not found in QA response'] },
+		copy: parsedData.copy || { ...defaultSection, errors: ['Copy section not found in QA response'] },
+		overall: parsedData.overall || { grade: 'N/A', pass: false, primaryIssue: 'Overall assessment not found in QA response' },
+		additionalSections: Object.keys(additionalSections).length > 0 ? additionalSections : undefined,
+		completeRawReport: qaText
+	};
+	
+	// Calculate overall pass/grade from individual sections if overall not found
+	if (!parsedData.overall && (parsedData.title || parsedData.meta || parsedData.h1 || parsedData.copy)) {
+		const validSections = [parsedData.title, parsedData.meta, parsedData.h1, parsedData.copy].filter(Boolean);
+		const allPass = validSections.every(section => section?.pass);
+		const grades = validSections.map(section => {
+			if (section?.grade && section.grade !== 'N/A') {
+				const match = section.grade.match(/(\d+)/);
+				return match ? parseInt(match[1]) : 0;
+			}
+			return 0;
+		}).filter(g => g > 0);
+		
+		const avgGrade = grades.length > 0 ? Math.round(grades.reduce((a, b) => a + b, 0) / grades.length) : 0;
+		
+		finalReport.overall = {
+			grade: avgGrade > 0 ? `${avgGrade}/100` : 'N/A',
+			pass: allPass && avgGrade >= 80,
+			primaryIssue: allPass ? 'All sections passed' : 'Some sections have violations',
+			rawContent: cleanedQaText
+		};
+		
+		console.log('Calculated overall from sections:', finalReport.overall);
+	}
+	
+	console.log('Final QA parsing result:', {
+		title: finalReport.title?.grade,
+		meta: finalReport.meta?.grade,
+		h1: finalReport.h1?.grade,
+		copy: finalReport.copy?.grade,
+		overall: finalReport.overall?.grade,
+		overallPass: finalReport.overall?.pass
+	});
+		
+		return { 
+			detailedQaReport: finalReport, 
+			overallPass: finalReport.overall.pass, 
+			overallGrade: finalReport.overall.grade 
+		};
+};
+
+/**
+ * Parses a single section of the QA report (e.g., TITLE, H1) based on the actual QA Guard format.
+ * This is a more robust parser that handles variations in header format and content.
+ */
+const parseActualQAGuardSection = (sectionBlock: string, sectionType: string): QaSectionResult | null => {
+	console.log(`Parsing ${sectionType} section with actual QA Guard format`);
+	console.log('Section block preview:', sectionBlock.substring(0, 200));
+	
+	// Extract grade and pass status from the actual QA Guard format
+				let grade = 'N/A';
+	let pass = false;
+	let errors: string[] = ['No errors reported.'];
+	let corrected = 'Content analysis not available.';
+	let detailedAssessment = '';
+	let keyStrengths: string[] = [];
+	let recommendations: string[] = [];
+	let explanations = '';
+	
+	// COMPREHENSIVE HEADER PATTERN MATCHING
+	// Look for the actual QA Guard format: "### **TITLE** ✅ PASS" or "### **TITLE** ❌ FAIL"
+	// Also handle variations like "## **TITLE: PASS** ✅" or "## **TITLE: FAIL** ❌"
+	const headerPatterns = [
+		/###\s*\*\*([^*]+)\*\*\s*(✅|❌)\s*(PASS|FAIL)/i,                    // ### **TITLE** ✅ PASS
+		/##\s*\*\*([^*]+):\s*(PASS|FAIL)\*\*\s*(✅|❌)/i,                    // ## **TITLE: PASS** ✅
+		/##\s*\*\*([^*]+)\*\*\s*(PASS|FAIL)\s*(✅|❌)/i,                     // ## **TITLE** PASS ✅
+		/###\s*\*\*([^*]+):\s*(PASS|FAIL)\*\*\s*(✅|❌)/i,                   // ### **TITLE: PASS** ✅
+		/##\s*\*\*([^*]+)\*\*\s*(✅|❌)\s*(PASS|FAIL)/i,                     // ## **TITLE** ✅ PASS
+		/###\s*\*\*([^*]+)\*\*\s*(PASS|FAIL)/i,                             // ### **TITLE** PASS
+		/##\s*\*\*([^*]+)\*\*\s*(PASS|FAIL)/i,                              // ## **TITLE** PASS
+		/###\s*\*\*([^*]+):\s*(PASS|FAIL)/i,                                // ### **TITLE: PASS**
+		/##\s*\*\*([^*]+):\s*(PASS|FAIL)/i,                                 // ## **TITLE: PASS**
+		/###\s*([^*]+)\s*(✅|❌)\s*(PASS|FAIL)/i,                            // ### TITLE ✅ PASS
+		/##\s*([^*]+)\s*(✅|❌)\s*(PASS|FAIL)/i,                             // ## TITLE ✅ PASS
+		/###\s*([^*]+):\s*(PASS|FAIL)\s*(✅|❌)/i,                           // ### TITLE: PASS ✅
+		/##\s*([^*]+):\s*(PASS|FAIL)\s*(✅|❌)/i,                            // ## TITLE: PASS ✅
+		/###\s*([^*]+)\s*(PASS|FAIL)/i,                                     // ### TITLE PASS
+		/##\s*([^*]+)\s*(PASS|FAIL)/i,                                      // ## TITLE PASS
+		/###\s*([^*]+):\s*(PASS|FAIL)/i,                                    // ### TITLE: PASS
+		/##\s*([^*]+):\s*(PASS|FAIL)/i,                                     // ## TITLE: PASS
+	];
+	
+	let headerMatch = null;
+	for (const pattern of headerPatterns) {
+		headerMatch = sectionBlock.match(pattern);
+		if (headerMatch) {
+			console.log('Found QA Guard header format:', headerMatch[0]);
+			// Determine pass status from various indicators in the match
+			const passIndicators = [headerMatch[2], headerMatch[3]].filter(Boolean);
+			pass = passIndicators.some(indicator => 
+				indicator === '✅' || indicator.toUpperCase() === 'PASS'
+			);
+			break;
+		}
+	}
+	
+	// COMPREHENSIVE GRADE PATTERN MATCHING
+	// Look for grade in various formats: "- **Grade:** 100/100", "Grade: 100/100", etc.
+	const gradePatterns = [
+		/-?\s*\*\*Grade:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                      // - **Grade:** 100/100
+		/-?\s*\*\*Grade\*\*:\s*(\d+(?:\.\d+)?)\/100/i,                      // - **Grade**: 100/100
+		/-?\s*Grade:\s*(\d+(?:\.\d+)?)\/100/i,                              // - Grade: 100/100
+		/-?\s*Grade\s*:\s*(\d+(?:\.\d+)?)\/100/i,                           // - Grade : 100/100
+		/\*\*Grade:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                           // **Grade:** 100/100
+		/\*\*Grade\*\*:\s*(\d+(?:\.\d+)?)\/100/i,                           // **Grade**: 100/100
+		/Grade:\s*(\d+(?:\.\d+)?)\/100/i,                                   // Grade: 100/100
+		/Grade\s*:\s*(\d+(?:\.\d+)?)\/100/i,                                // Grade : 100/100
+		/-?\s*\*\*Score:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                      // - **Score:** 100/100
+		/-?\s*\*\*Rating:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                     // - **Rating:** 100/100
+		/-?\s*\*\*Mark:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                       // - **Mark:** 100/100
+		/-?\s*\*\*Points:\*\*\s*(\d+(?:\.\d+)?)\/100/i,                     // - **Points:** 100/100
+		/-?\s*\*\*(\d+(?:\.\d+)?)\/100\s*points?\*\*/i,                     // - **100/100 points**
+		/-?\s*(\d+(?:\.\d+)?)\/100\s*points?/i,                             // - 100/100 points
+		/-?\s*\*\*(\d+(?:\.\d+)?)\/100\*\*/i,                               // - **100/100**
+		/-?\s*(\d+(?:\.\d+)?)\/100/i,                                       // - 100/100
+		/\*\*(\d+(?:\.\d+)?)\/100\*\*/i,                                    // **100/100**
+		/(\d+(?:\.\d+)?)\/100/i,                                            // 100/100
+	];
+	
+	let gradeMatch = null;
+	for (const pattern of gradePatterns) {
+					gradeMatch = sectionBlock.match(pattern);
+					if (gradeMatch) {
+			grade = `${gradeMatch[1]}/100`;
+			console.log('Found grade:', grade);
+						break;
+					}
+				}
+	
+	// COMPREHENSIVE COMPLIANCE PATTERN MATCHING
+	// Look for compliance status in various formats
+	const compliancePatterns = [
+		/-?\s*\*\*Compliance:\*\*\s*([^\n]+)/i,                             // - **Compliance:** Full compliance
+		/-?\s*\*\*Status:\*\*\s*([^\n]+)/i,                                 // - **Status:** Passed
+		/-?\s*\*\*Result:\*\*\s*([^\n]+)/i,                                // - **Result:** Successful
+		/-?\s*\*\*Assessment:\*\*\s*([^\n]+)/i,                            // - **Assessment:** Compliant
+		/-?\s*\*\*Evaluation:\*\*\s*([^\n]+)/i,                            // - **Evaluation:** Pass
+		/-?\s*\*\*Check:\*\*\s*([^\n]+)/i,                                 // - **Check:** OK
+		/-?\s*\*\*Verification:\*\*\s*([^\n]+)/i,                          // - **Verification:** Valid
+		/-?\s*\*\*Review:\*\*\s*([^\n]+)/i,                                // - **Review:** Approved
+		/-?\s*\*\*Analysis:\*\*\s*([^\n]+)/i,                              // - **Analysis:** Compliant
+		/-?\s*\*\*Summary:\*\*\s*([^\n]+)/i,                               // - **Summary:** Pass
+	];
+	
+	let complianceMatch = null;
+	for (const pattern of compliancePatterns) {
+		complianceMatch = sectionBlock.match(pattern);
+		if (complianceMatch) {
+			const compliance = complianceMatch[1].trim();
+			console.log('Found compliance:', compliance);
+			
+			// Determine pass status from compliance text
+			const failIndicators = ['violation', 'fail', 'error', 'non-compliant', 'rejected', 'invalid', 'incorrect', 'missing', 'below', 'above', 'out of range'];
+			const passIndicators = ['compliance', 'pass', 'success', 'valid', 'correct', 'approved', 'compliant', 'within range', 'meets', 'satisfies'];
+			
+			const lowerCompliance = compliance.toLowerCase();
+			if (failIndicators.some(indicator => lowerCompliance.includes(indicator))) {
+				pass = false;
+			} else if (passIndicators.some(indicator => lowerCompliance.includes(indicator))) {
+				pass = true;
+			}
+			break;
+		}
+	}
+	
+	// COMPREHENSIVE ANALYSIS PATTERN MATCHING
+	// Look for analysis content in various formats
+	const analysisPatterns = [
+		/-?\s*\*\*Analysis:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,      // - **Analysis:** Detailed text
+		/-?\s*\*\*Review:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,        // - **Review:** Detailed text
+		/-?\s*\*\*Assessment:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,    // - **Assessment:** Detailed text
+		/-?\s*\*\*Evaluation:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,    // - **Evaluation:** Detailed text
+		/-?\s*\*\*Summary:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,       // - **Summary:** Detailed text
+		/-?\s*\*\*Details:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,       // - **Details:** Detailed text
+		/-?\s*\*\*Breakdown:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,     // - **Breakdown:** Detailed text
+		/-?\s*\*\*Explanation:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,   // - **Explanation:** Detailed text
+		/-?\s*\*\*Comments:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,      // - **Comments:** Detailed text
+		/-?\s*\*\*Notes:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,         // - **Notes:** Detailed text
+	];
+	
+	let analysisMatch = null;
+	for (const pattern of analysisPatterns) {
+		analysisMatch = sectionBlock.match(pattern);
+		if (analysisMatch) {
+			detailedAssessment = analysisMatch[1].trim();
+			console.log('Found analysis:', detailedAssessment.substring(0, 100));
+						break;
+					}
+				}
+	
+	// COMPREHENSIVE ERROR PATTERN MATCHING
+	// Look for error information in various formats
+	const errorPatterns = [
+		/-?\s*\*\*Error:\*\*\s*([^\n]+)/i,                                  // - **Error:** Error message
+		/-?\s*\*\*Errors:\*\*\s*([^\n]+)/i,                                 // - **Errors:** Error messages
+		/-?\s*\*\*Issue:\*\*\s*([^\n]+)/i,                                 // - **Issue:** Issue description
+		/-?\s*\*\*Issues:\*\*\s*([^\n]+)/i,                                // - **Issues:** Issue descriptions
+		/-?\s*\*\*Problem:\*\*\s*([^\n]+)/i,                               // - **Problem:** Problem description
+		/-?\s*\*\*Problems:\*\*\s*([^\n]+)/i,                              // - **Problems:** Problem descriptions
+		/-?\s*\*\*Violation:\*\*\s*([^\n]+)/i,                             // - **Violation:** Violation details
+		/-?\s*\*\*Violations:\*\*\s*([^\n]+)/i,                            // - **Violations:** Violation details
+		/-?\s*\*\*Warning:\*\*\s*([^\n]+)/i,                               // - **Warning:** Warning message
+		/-?\s*\*\*Warnings:\*\*\s*([^\n]+)/i,                              // - **Warnings:** Warning messages
+		/-?\s*\*\*Concern:\*\*\s*([^\n]+)/i,                               // - **Concern:** Concern details
+		/-?\s*\*\*Concerns:\*\*\s*([^\n]+)/i,                              // - **Concerns:** Concern details
+	];
+	
+	let errorMatch = null;
+	for (const pattern of errorPatterns) {
+		errorMatch = sectionBlock.match(pattern);
+		if (errorMatch) {
+			errors = [errorMatch[1].trim()];
+			console.log('Found error:', errors[0]);
+			break;
+		}
+	}
+	
+	// ENHANCED: Look for multi-line violation lists
+	const violationsMatch = sectionBlock.match(/-?\s*\*\*(?:Structure|Major|Minor)\s+violations?\*\*:\s*([\s\S]*?)(?=\n-?\s*\*\*|\n\n|---|$)/i);
+	if (violationsMatch) {
+		const violationText = violationsMatch[1].trim();
+		// Split by lines that start with the violation marker
+		const violationErrors = violationText.split(/\n\s*(?:-|\d+\.)\s*(?:❌|\⚠️)?\s*\*\*/g)
+			.map(line => {
+				// Clean up the line to get the core violation text
+				return line.replace(/MAJOR VIOLATION \([^)]+\):/, '')
+						   .replace(/MINOR VIOLATION \([^)]+\):/, '')
+						   .replace(/\*\*$/, '')
+						   .trim();
+			})
+			.filter(line => line.length > 10); // Filter out empty or trivial lines
+
+		if (violationErrors.length > 0) {
+			if (errors[0] === 'No errors reported.') {
+				errors = violationErrors;
+			} else {
+				// Prepend violation details to any existing errors
+				errors = [...violationErrors, ...errors];
+			}
+			console.log('Found detailed violation errors:', violationErrors);
+		}
+	}
+	
+	// COMPREHENSIVE CORRECTED CONTENT PATTERN MATCHING
+	// Look for corrected content in various formats
+	const correctedPatterns = [
+		/\*\*CORRECTED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,           // **CORRECTED META:**\n```\ncontent\n```
+		/\*\*CORRECTED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,         // **CORRECTED META:**\ncontent
+		/\*\*FIXED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,               // **FIXED META:**\n```\ncontent\n```
+		/\*\*FIXED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,           // **FIXED META:**\ncontent
+		/\*\*REVISED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,             // **REVISED META:**\n```\ncontent\n```
+		/\*\*REVISED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,         // **REVISED META:**\ncontent
+		/\*\*UPDATED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,             // **UPDATED META:**\n```\ncontent\n```
+		/\*\*UPDATED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,         // **UPDATED META:**\ncontent
+		/\*\*SUGGESTED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,           // **SUGGESTED META:**\n```\ncontent\n```
+		/\*\*SUGGESTED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,       // **SUGGESTED META:**\ncontent
+		/\*\*RECOMMENDED\s+[A-Z]+\*\*:\s*\n```\n([\s\S]*?)\n```/i,         // **RECOMMENDED META:**\n```\ncontent\n```
+		/\*\*RECOMMENDED\s+[A-Z]+\*\*:\s*\n([\s\S]*?)(?=\n\*\*|$)/i,     // **RECOMMENDED META:**\ncontent
+		/-?\s*\*\*Corrected:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,      // - **Corrected:** content
+		/-?\s*\*\*Fixed:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,         // - **Fixed:** content
+		/-?\s*\*\*Revised:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,       // - **Revised:** content
+		/-?\s*\*\*Updated:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,       // - **Updated:** content
+		/-?\s*\*\*Suggested:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,     // - **Suggested:** content
+		/-?\s*\*\*Recommended:\*\*\s*([^\n]+(?:\n(?!-?\s*\*\*)[^\n]+)*)/i,   // - **Recommended:** content
+	];
+	
+	let correctedMatch = null;
+	for (const pattern of correctedPatterns) {
+		correctedMatch = sectionBlock.match(pattern);
+		if (correctedMatch) {
+			corrected = correctedMatch[1].trim();
+			console.log('Found corrected content:', corrected.substring(0, 100));
+			break;
+		}
+	}
+	
+	// ENHANCED KEY STRENGTHS AND RECOMMENDATIONS EXTRACTION
+	// Extract key strengths and recommendations from the analysis and compliance text
+	if (detailedAssessment) {
+		// Look for positive indicators in analysis
+		const positiveIndicators = [
+			'compliance', 'compliant', 'proper', '✓', 'check', 'valid', 'correct', 'appropriate', 
+			'meets', 'satisfies', 'within range', 'successful', 'approved', 'pass', 'good', 'excellent',
+			'optimal', 'ideal', 'perfect', 'complete', 'thorough', 'comprehensive', 'effective'
+		];
+		
+		const negativeIndicators = [
+			'violation', 'error', 'fail', 'problem', 'issue', 'concern', 'warning', 'missing',
+			'below', 'above', 'out of range', 'incorrect', 'invalid', 'non-compliant', 'rejected',
+			'insufficient', 'inadequate', 'poor', 'weak', 'deficient'
+		];
+		
+		const lowerAnalysis = detailedAssessment.toLowerCase();
+		
+		// Extract key strengths
+		if (positiveIndicators.some(indicator => lowerAnalysis.includes(indicator))) {
+			keyStrengths.push('Meets compliance requirements');
+		}
+		if (lowerAnalysis.includes('keyword') && (lowerAnalysis.includes('included') || lowerAnalysis.includes('present'))) {
+			keyStrengths.push('Proper keyword integration');
+		}
+		if (lowerAnalysis.includes('tone') && lowerAnalysis.includes('appropriate')) {
+			keyStrengths.push('Appropriate tone maintained');
+		}
+		if (lowerAnalysis.includes('character') && lowerAnalysis.includes('within')) {
+			keyStrengths.push('Character count within requirements');
+		}
+		if (lowerAnalysis.includes('length') && lowerAnalysis.includes('✓')) {
+			keyStrengths.push('Length requirements met');
+		}
+		if (lowerAnalysis.includes('structure') && lowerAnalysis.includes('proper')) {
+			keyStrengths.push('Proper structure maintained');
+		}
+		
+		// Extract recommendations
+		if (negativeIndicators.some(indicator => lowerAnalysis.includes(indicator))) {
+			recommendations.push('Address identified violations');
+		}
+		if (lowerAnalysis.includes('character') && (lowerAnalysis.includes('count') || lowerAnalysis.includes('length'))) {
+			recommendations.push('Adjust character count to meet requirements');
+		}
+		if (lowerAnalysis.includes('word') && lowerAnalysis.includes('count')) {
+			recommendations.push('Adjust word count to meet requirements');
+		}
+		if (lowerAnalysis.includes('keyword') && lowerAnalysis.includes('missing')) {
+			recommendations.push('Include required keywords');
+		}
+		if (lowerAnalysis.includes('tone') && lowerAnalysis.includes('inappropriate')) {
+			recommendations.push('Adjust tone to meet requirements');
+		}
+		if (lowerAnalysis.includes('structure') && lowerAnalysis.includes('improve')) {
+			recommendations.push('Improve content structure');
+		}
+	}
+	
+	// FALLBACK PATTERN MATCHING
+	// If no grade found, try alternative patterns
+	if (grade === 'N/A') {
+		const fallbackGradePatterns = [
+			/Grade:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Score:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Rating:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Mark:\s*(\d+(?:\.\d+)?)\/100/i,
+			/Points:\s*(\d+(?:\.\d+)?)\/100/i,
+			/(\d+(?:\.\d+)?)\/100/i,
+		];
+		
+		for (const pattern of fallbackGradePatterns) {
+			const match = sectionBlock.match(pattern);
+			if (match) {
+				grade = `${match[1]}/100`;
+				console.log('Found fallback grade:', grade);
+				break;
+			}
+		}
+	}
+	
+	// INFER PASS STATUS FROM GRADE IF NOT DETERMINED
+	if (grade !== 'N/A' && !headerMatch && !complianceMatch) {
+		const gradeNum = parseFloat(grade.split('/')[0]);
+		pass = gradeNum >= 80;
+		console.log('Inferred pass status from grade:', pass);
+	}
+	
+	// FINAL PASS STATUS DETERMINATION
+	// If still no pass status, check for pass/fail indicators in text
+	if (!headerMatch && !complianceMatch && grade === 'N/A') {
+		const lowerSection = sectionBlock.toLowerCase();
+		if (lowerSection.includes('pass') && !lowerSection.includes('fail')) {
+			pass = true;
+		} else if (lowerSection.includes('fail')) {
+			pass = false;
+		} else if (lowerSection.includes('✅') && !lowerSection.includes('❌')) {
+			pass = true;
+		} else if (lowerSection.includes('❌')) {
+			pass = false;
+		}
+	}
+	
+	// UPDATE ERRORS BASED ON PASS STATUS
+	if (pass && errors[0] === 'No errors reported.') {
+		// Keep as is
+	} else if (!pass && errors[0] === 'No errors reported.') {
+		errors = ['Violations detected'];
+	}
+	
+	console.log(`Final ${sectionType} result - Grade: ${grade}, Pass: ${pass}, Errors: ${errors.length}`);
+		
+		return { 
+		grade, 
+		pass, 
+		errors, 
+		corrected,
+		detailedAssessment: detailedAssessment || undefined,
+		keyStrengths: keyStrengths.length > 0 ? keyStrengths : undefined,
+		recommendations: recommendations.length > 0 ? recommendations : undefined,
+		explanations: explanations || undefined,
+		rawContent: sectionBlock
+	};
+};
+
+
+/**
+ * Runs the Dify workflow for a given input row, with retries for transient errors.
+ * @param inputs - The data from a CSV row.
+ * @returns A promise that resolves to the processed and cleaned results.
+ */
+export const runWorkflow = async (inputs: ApiInput): Promise<ProcessedResult> => {
+    let lastError: Error = new Error('Workflow failed after all retries.');
+
+    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        let responseText = '';
+        try {
+            const payload = {
+                inputs,
+                response_mode: 'streaming',
+                user: API_USER,
+            };
+
+            const response = await fetch(API_URL, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${API_TOKEN}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload),
+            });
+
+            if (!response.ok) {
+                responseText = await response.text();
+                // Check for retryable HTTP status codes.
+                if (RETRYABLE_STATUS_CODES.includes(response.status)) {
+                    throw new WorkflowError(`RETRYABLE_HTTP_${response.status}`, `Temporary service issue (HTTP ${response.status}).`, 'network', responseText);
+                }
+                // For other HTTP errors, fail immediately.
+                throw new WorkflowError(`HTTP_${response.status}`, `API request failed (HTTP ${response.status}).`, 'api', responseText);
+            }
+
+            if (!response.body) {
+                throw new WorkflowError('EMPTY_RESPONSE', 'Empty response from API.', 'network');
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let streamContent = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                streamContent += decoder.decode(value, { stream: true });
+            }
+
+            // The full stream content becomes our responseText for error logging
+            responseText = streamContent;
+
+            const lines = streamContent.trim().split('\n');
+            const finishedLine = lines.find(line => line.includes('"event": "workflow_finished"')) || '';
+
+            if (!finishedLine) {
+                // The gateway might have returned an HTML error page instead of a stream
+                if (streamContent.trim().toLowerCase().startsWith('<html')) {
+                    throw new WorkflowError('RETRYABLE_HTML_RESPONSE', 'Service returned an HTML error page.', 'stream', streamContent.slice(0, 1000));
+                }
+                console.error('Full stream content:', streamContent);
+                throw new WorkflowError('FINISH_EVENT_MISSING', 'Workflow did not finish successfully.', 'stream', streamContent.slice(0, 1000));
+            }
+
+            const jsonString = finishedLine.replace(/^data: /, '');
+            const finishedEventData = JSON.parse(jsonString);
+            
+            if (finishedEventData.data.status !== 'succeeded') {
+                const apiError = finishedEventData.data.error || 'Unknown';
+                const isOverloaded = typeof apiError === 'string' && (apiError.toLowerCase().includes('overloaded') || apiError.toLowerCase().includes('gateway time-out'));
+                
+                // If it's a known transient error, mark it as retryable.
+                if (isOverloaded) {
+                    throw new WorkflowError('RETRYABLE_API_ERROR', 'Service overloaded. Retrying...', 'api', String(apiError));
+                }
+                // Otherwise, it's a permanent failure for this row.
+                throw new WorkflowError('WORKFLOW_FAILED', `Workflow failed: ${apiError}`, 'api', String(apiError));
+            }
+
+            const outputs: ApiResponseOutput = finishedEventData.data.outputs;
+
+            if (!outputs || Object.keys(outputs).length === 0) {
+                throw new WorkflowError('EMPTY_OUTPUTS', 'Workflow succeeded but returned empty outputs.', 'parse');
+            }
+            
+            const rawQaReport = outputs.qa_gaurd || 'QA report not available.';
+            console.log('QA Report length:', rawQaReport.length);
+            
+            const { detailedQaReport, overallPass, overallGrade } = parseNewQaReport(rawQaReport);
+            console.log('Final Parsed QA - Pass:', overallPass, 'Grade:', overallGrade);
+
+            // Success, return the result and exit the loop.
+            return {
+                generatedTitle: cleanResponseText(outputs.title),
+                generatedH1: cleanResponseText(outputs.h1),
+                generatedCopy: cleanResponseText(outputs.copy),
+                generatedMeta: cleanResponseText(outputs.meta),
+                qaReport: rawQaReport,
+                detailedQaReport,
+                overallPass,
+                overallGrade,
+            };
+
+        } catch (error) {
+            lastError = error instanceof Error ? error : new Error(String(error));
+
+            const isRetryable = lastError instanceof WorkflowError && lastError.code.startsWith('RETRYABLE_');
+            
+            if (isRetryable && attempt < MAX_RETRIES) {
+                // Exponential backoff with jitter: 1s, 2s, 4s, ... + random
+                const delayMs = INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
+                console.warn(`Attempt ${attempt}/${MAX_RETRIES} failed due to a transient error. Retrying in ~${Math.round(delayMs / 1000)}s...`, { error: lastError.message });
+                await delay(delayMs);
+                continue; // Move to the next attempt
+            }
+            
+            // For non-retryable errors, or if we've exhausted retries, break the loop to throw the error.
+            console.error(`Failed to process row. Attempt ${attempt}/${MAX_RETRIES}. Error: ${lastError.message}`);
+            if (responseText) {
+                // Log the problematic response that caused the failure
+                console.error('Problematic Response:', responseText);
+            }
+            break;
+        }
+    }
+
+    // If the loop finished without returning, it means all attempts failed.
+    // We re-throw the last captured error, making it more user-friendly if it was a transient one.
+    if (lastError instanceof WorkflowError && lastError.code.startsWith('RETRYABLE_')) {
+        throw new WorkflowError('SERVICE_UNAVAILABLE', `API service is temporarily unavailable. Tried ${MAX_RETRIES} times. Please try again later.`, 'api', lastError.debug || lastError.stack);
+    }
+    
+    throw lastError;
+};

src/config/difyChatbotConfig.ts

@@ -0,0 +1,28 @@
+declare global {
+  interface Window {
+    difyChatbotConfig: {
+      token: string;
+      inputs: Record<string, string>;
+      systemVariables: Record<string, string>;
+      userVariables: Record<string, string>;
+    };
+  }
+}
+
+window.difyChatbotConfig = {
+  token: 'U5KHVj67e4Gum8hd',
+  inputs: {
+    // You can define the inputs from the Start node here
+    // key is the variable name
+    // e.g.
+    // name: "NAME"
+  },
+  systemVariables: {
+    // user_id: 'YOU CAN DEFINE USER ID HERE',
+    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
+  },
+  userVariables: {
+    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
+    // name: 'YOU CAN DEFINE USER NAME HERE',
+  },
+}; 

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,122 @@
+// The expected structure of a row from the input CSV.
+export interface CsvInputRow {
+  URL: string;
+  Page: string;
+  Keywords: string;
+  Recommended_Title: string;
+  Recommended_H1: string;
+  Internal_Links: string;
+  Copy: string;
+}
+
+// The structure of the 'inputs' object for the Dify API call.
+export type ApiInput = CsvInputRow;
+
+
+// The structure of the `outputs` object from the Dify API response.
+export interface ApiResponseOutput {
+  title: string;
+  h1: string;
+  copy: string;
+  meta: string;
+  qa_gaurd: string;
+}
+
+// Represents an item in the processing queue.
+export interface QueueItem {
+  id: number;
+  data: CsvInputRow;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  error?: string;
+}
+
+// Represents the parsed QA results for a single section (e.g., Title, H1).
+export interface QaSectionResult {
+    grade: string;
+    pass: boolean;
+    errors: string[];
+    corrected: string;
+    // Enhanced to capture ALL QA Guard content
+    detailedAssessment?: string; // Full detailed assessment text
+    keyStrengths?: string[]; // List of key strengths identified
+    recommendations?: string[]; // List of recommendations
+    explanations?: string; // Detailed explanations
+    rawContent?: string; // Raw section content for complete preservation
+}
+
+// Represents the full, structured QA report.
+export interface DetailedQaReport {
+    title: QaSectionResult;
+    meta: QaSectionResult;
+    h1: QaSectionResult;
+    copy: QaSectionResult;
+    overall: {
+        grade: string;
+        pass: boolean;
+        primaryIssue: string;
+        // Enhanced to capture ALL overall assessment content
+        detailedAssessment?: string; // Full detailed overall assessment
+        keyStrengths?: string[]; // Overall key strengths
+        recommendations?: string[]; // Overall recommendations
+        explanations?: string; // Detailed overall explanations
+        rawContent?: string; // Raw overall section content
+    };
+    // Capture any additional sections that QA Guard might generate
+    additionalSections?: {
+        [sectionName: string]: {
+            content: string;
+            type: 'assessment' | 'strengths' | 'recommendations' | 'explanations' | 'other';
+        };
+    };
+    // Preserve the complete raw QA report
+    completeRawReport?: string;
+}
+
+
+// Extracted and cleaned data from the API response.
+export interface ProcessedResult {
+    generatedTitle: string;
+    generatedH1: string;
+    generatedCopy: string;
+    generatedMeta: string;
+    qaReport: string; // The raw, original QA report string
+    detailedQaReport?: DetailedQaReport; // The parsed, structured QA report
+    overallPass: boolean; // For quick access in the main table view
+    overallGrade: string; // For quick access in the main table view
+}
+
+// A complete row for the final results table and CSV export.
+export type ResultRow = CsvInputRow & ProcessedResult & { id: number };
+
+// Represents a completed job in the history.
+export interface JobHistoryItem {
+  id: string;
+  filename: string;
+  date: string;
+  totalRows: number;
+  completedCount: number;
+  failedCount: number;
+  results?: ResultRow[]; // Store the full results for review and re-download
+}
+
+
+// Expected headers for the input CSV, used for validation.
+export const REQUIRED_CSV_HEADERS: (keyof CsvInputRow)[] = [
+    'URL',
+    'Page',
+    'Keywords',
+    'Recommended_Title',
+    'Recommended_H1',
+    'Internal_Links',
+    'Copy'
+];
+
+// Structured, user-facing error captured during batching
+export interface BatchError {
+	row?: number; // 1-based row index for per-row errors
+	code: string; // machine-friendly code e.g. CSV_PARSE_ERROR, HTTP_ERROR, SERVICE_UNAVAILABLE
+	message: string; // user-friendly message
+	suggestion?: string; // optional remediation hint
+	at?: 'csv' | 'network' | 'api' | 'stream' | 'parse' | 'unknown';
+	debug?: string; // optional raw/console error text to help diagnose
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});