Upload 27 files

App.tsx

@@ -0,0 +1,638 @@
+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;
+
+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) {
+                 // Basic validation to help clear out old, problematic data.
+                const parsed = JSON.parse(item);
+                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;
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                return valueToStore;
+            });
+        } catch (error) {
+            console.error('Error writing to localStorage', 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 [history, setHistory] = useLocalStorage<JobHistoryItem[]>('ace-copywriting-history', []);
+    const [view, setView] = useState<ViewState>(() => history.length > 0 ? { type: 'new_job' } : { type: 'welcome' });
+
+    // State for the currently active processing job
+    const [jobId, setJobId] = useState<string | null>(null);
+    const [filename, setFilename] = useState<string>('');
+    const [queue, setQueue] = useState<QueueItem[]>([]);
+    const [results, setResults] = useState<ResultRow[]>([]);
+    const [status, setStatus] = useState<ProcessingStatus>('idle');
+    const [error, setError] = useState<string | null>(null);
+    const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+    // New: capture all user-facing errors and show a details modal
+    const [errors, setErrors] = useState<BatchError[]>([]);
+    const [showErrorDetails, setShowErrorDetails] = useState(false);
+    const [expandedDebugIndex, setExpandedDebugIndex] = useState<number | null>(null);
+
+    const resetNewJobState = useCallback(() => {
+        setJobId(generateUUID());
+        setFilename('');
+        setQueue([]);
+        setResults([]);
+        setStatus('idle');
+        setError(null);
+        setErrors([]);
+        setShowErrorDetails(false);
+    }, []);
+
+    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' });
+        }
+    };
+
+    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([]);
+    }, [jobId]);
+    
+    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
+                console.log('Job saved to history successfully:', newHistoryItem);
+                return updatedHistory.slice(0, MAX_HISTORY_ITEMS);
+            });
+            // Stay on the results view for the current job. The user can navigate to history manually.
+        }
+    }, [status, jobId, filename, queue.length, results, 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>
+    );
+
+    return (
+        <div className="flex h-screen bg-gray-900 text-gray-100">
+            {/* --- SIDEBAR --- */}
+            <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden">
+                <header className="px-2 mb-6">
+                     <h1 className="text-2xl font-bold text-white tracking-tight">ACE Pipeline</h1>
+                </header>
+                <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-4 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700">
+                        <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>
+            
+            {/* --- 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 (
+        <div className="min-h-screen bg-gray-900">
+            {/* Header with logout */}
+            <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
+                <div className="flex justify-between items-center">
+                    <h1 className="text-2xl font-bold text-white">ACE UI Dashboard</h1>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-300">Welcome, {user.name}</span>
+                        <button
+                            onClick={() => logout()}
+                            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
+                        >
+                            Sign Out
+                        </button>
+                    </div>
+                </div>
+            </header>
+            <App />
+        </div>
+    );
+};
+
+// 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" \
+    [email protected]
+
+# 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"] 

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,535 @@
+
+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';
+
+// 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>
+            <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>
+             <div className="pl-9 mt-3 text-sm">
+                 <p className="font-semibold text-gray-400">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={{
+                                 // Custom styling for markdown elements
+                                 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>
+        </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-4xl 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">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">
+                    <Section title="Title" data={report.title} />
+                    <Section title="Meta Description" data={report.meta} />
+                    <Section title="H1" data={report.h1} />
+                    <Section title="Copy" data={report.copy} />
+                </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': row.overallPass,
+                'Overall Grade': row.overallGrade,
+                'Title Pass': report?.title.pass,
+                'Title Grade': report?.title.grade,
+                'Title Errors': report?.title.errors.join('; '),
+                'Meta Pass': report?.meta.pass,
+                'Meta Grade': report?.meta.grade,
+                'Meta Errors': report?.meta.errors.join('; '),
+                'H1 Pass': report?.h1.pass,
+                'H1 Grade': report?.h1.grade,
+                'H1 Errors': report?.h1.errors.join('; '),
+                'Copy Pass': report?.copy.pass,
+                'Copy Grade': report?.copy.grade,
+                'Copy Errors': report?.copy.errors.join('; '),
+                'QA Full Report': row.qaReport,
+            };
+        });
+
+        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) {
+                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 addQaSection = (title: string, section: QaSectionResult) => {
+                    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');
+                    currentY = addWrappedText(`Errors: ${section.errors.join(', ')}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    
+                    currentY = ensureMinSpace(20);
+                    pdf.setFont('helvetica', 'italic');
+                    currentY = addWrappedText(`Correction/Analysis: ${section.corrected}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    currentY += 4;
+                };
+
+                addQaSection('Title', row.detailedQaReport.title);
+                addQaSection('Meta', row.detailedQaReport.meta);
+                addQaSection('H1', row.detailedQaReport.h1);
+                addQaSection('Copy', row.detailedQaReport.copy);
+            }
+            
+            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 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>
+                                </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-DQmHHp3O.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,22 @@
+{
+  "name": "ace-copywriting-pipeline",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "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 || "[email protected]"
+  }
+}
+
+// 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,782 @@
+
+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  
+	let pass = false;
+	let passMatch = null;
+	
+	// Try various pass patterns in order of specificity
+	const passPatterns = [
+		/-\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('true') || 
+					passValue.includes('✅') || 
+					passValue === 'yes' ||
+					passValue === 'passed' ||
+					passValue === 'pass';
+			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.'];
+		}
+	}
+
+	// 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));
+	
+	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;
+};
+
+/**
+ * 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' }
+	};
+
+	const cleanedQaText = cleanResponseText(qaText);
+	if (!cleanedQaText || typeof cleanedQaText !== 'string') {
+		return { detailedQaReport: defaultReport, overallPass: false, overallGrade: 'N/A' };
+	}
+	
+	// Check if it's the new markdown format (starts with ##) or contains **TITLE** style sections
+	if (cleanedQaText.startsWith('##') || cleanedQaText.includes('**TITLE**') || cleanedQaText.includes('### **') || cleanedQaText.includes('### TITLE')) {
+		console.log('Using markdown parser for QA report');
+		console.log('QA text starts with:', cleanedQaText.substring(0, 200));
+		
+		// Handle different section header formats
+		let sections;
+		if (cleanedQaText.includes('### **')) {
+			// Split on ### ** and keep the ** in the section content
+			sections = cleanedQaText.split(/(?=### \*\*)/g).slice(1);
+			console.log('Splitting on ### ** (keeping section headers)');
+		} else if (cleanedQaText.includes('**TITLE**')) {
+			// Split on bold section headers like **TITLE**, **META**, etc.
+			sections = cleanedQaText.split(/(?=\*\*(?:TITLE|META|H1|COPY|OVERALL|ASSESSMENT|CORRECTED COPY)[^*]*\*\*)/g).slice(1);
+			console.log('Splitting on **SECTION** headers');
+		} else if (cleanedQaText.includes('### ')) {
+			// Split generic ### headers
+			sections = cleanedQaText.split(/(?=###\s+)/g).slice(1);
+			console.log('Splitting on generic ### headers');
+		} else {
+			sections = cleanedQaText.split('## ').slice(1);
+			console.log('Splitting on ## headers');
+		}
+		console.log('Found sections:', sections.length);
+		sections.forEach((section, index) => {
+			console.log(`Section ${index}:`, section.substring(0, 100));
+		});
+		
+		const parsedData: Partial<DetailedQaReport> = {};
+		let correctedCopyFromSeparateSection = '';
+		
+		// Special handling for single-section format like "## GRADE REPORT"
+		if (sections.length === 1 && (sections[0].includes('GRADE REPORT') || sections[0].includes('QUALITY ASSURANCE'))) {
+			console.log('Detected single-section format, parsing embedded sections');
+			return parseSingleSectionFormat(sections[0], defaultReport);
+		}
+		
+		sections.forEach(sectionBlock => {
+			const lines = sectionBlock.trim().split('\n');
+			let headerRaw = lines[0].trim();
+			let header = headerRaw.toLowerCase();
+			
+			// Clean up header - remove markdown formatting and punctuation
+			header = header.replace(/^#+\s*/, '').replace(/\*\*/g, '').replace(/[:\-–]+$/, '').trim();
+			console.log('Processing header:', header);
+
+			if (header.includes('title')) {
+				console.log('Parsing title section');
+				parsedData.title = parseSection(sectionBlock);
+			} else if (header.includes('meta')) {
+				console.log('Parsing meta section');
+				parsedData.meta = parseSection(sectionBlock);
+			} else if (header.includes('h1')) {
+				console.log('Parsing h1 section');
+				parsedData.h1 = parseSection(sectionBlock);
+			} else if (header.includes('copy') && !header.includes('corrected')) {
+				console.log('Parsing copy section');
+				parsedData.copy = parseSection(sectionBlock);
+			} else if (header.includes('corrected') && header.includes('copy')) {
+				console.log('Capturing separate CORRECTED COPY section');
+				correctedCopyFromSeparateSection = lines.slice(1).join('\n').trim();
+			} else if (header.includes('overall') || header.includes('assessment') || header.includes('pipeline')) {
+				console.log('Parsing overall section');
+				console.log('Overall section text:', sectionBlock.substring(0, 300));
+				
+				// ROBUST OVERALL GRADE EXTRACTION - handles multiple formats
+				let grade = 'N/A';
+				let gradeMatch = null;
+				
+				const overallGradePatterns = [
+					/-\s*\*\*Final Grade:\*\*\s*(.*)/,                       // - **Final Grade:** 100/100
+					/•\s*\*\*Final Grade:\*\*\s*(.*)/,                       // • **Final Grade:** 100/100
+					/\*\s*\*\*Final Grade:\*\*\s*(.*)/,                    // * **Final Grade:** 100/100
+					/-\s*\*\*Total Grade:\*\*\s*(.*)/,                       // - **Total Grade:** 100/100
+					/•\s*\*\*Total Grade:\*\*\s*(.*)/,                       // • **Total Grade:** 100/100
+					/\*\s*\*\*Total Grade:\*\*\s*(.*)/,                    // * **Total Grade:** 100/100
+					/(?:•|-|\*)\s*\*\*(?:Final|Total|Overall)?\s*Grade\*\*:?:\s*(.*)/i, // Generic grade
+					/(?:•|-|\*)\s*(?:Final|Total|Overall)?\s*Grade:?:\s*(.*)/i,  // No bold
+					/(?:Final|Total|Overall)\s*Grade:?:\s*(\d+\/\d+|\d+)/im,   // Anywhere in text
+					/(\d+\/\d+)\s*(?:final|total|overall)?/im                // Number first
+				];
+				
+				for (const pattern of overallGradePatterns) {
+					gradeMatch = sectionBlock.match(pattern);
+					if (gradeMatch) {
+						grade = gradeMatch[1].trim();
+						break;
+					}
+				}
+				console.log('Overall grade match:', gradeMatch, 'Final grade:', grade);
+				
+				// ROBUST OVERALL PASS EXTRACTION - handles multiple formats  
+				let pass = false;
+				let passMatch = null;
+				
+				const overallPassPatterns = [
+					// Exact format variations found in logs
+					/-\s*\*\*Overall Pass:\*\*\s*(.*)/i,                     // - **Overall Pass:** true
+					/•\s*\*\*Overall Pass:\*\*\s*(.*)/i,                     // • **Overall Pass:** true
+					/\*\s*\*\*Overall Pass:\*\*\s*(.*)/i,                    // * **Overall Pass:** true
+					/•\s*\*\*All Sections Pass:\*\*\s*(.*)/i,                // • **All Sections Pass:** true
+					/-\s*\*\*All Sections Pass:\*\*\s*(.*)/i,                // - **All Sections Pass:** true
+					/\*\s*\*\*All Sections Pass:\*\*\s*(.*)/i,               // * **All Sections Pass:** true
+					/•\s*\*\*Final Pass:\*\*\s*(.*)/i,                        // • **Final Pass:** true
+					/-\s*\*\*Final Pass:\*\*\s*(.*)/i,                        // - **Final Pass:** true
+					/\*\s*\*\*Final Pass:\*\*\s*(.*)/i,                       // * **Final Pass:** true
+					
+					// Generic patterns with flexible formatting
+					/(?:•|-|\*)\s*\*\*(?:Overall\s+|All\s+Sections\s+|Final\s+)?Pass\*\*:?:\s*(.*)/i,
+					/(?:•|-|\*)\s*(?:Overall\s+|All\s+Sections\s+|Final\s+)?Pass:?:\s*(.*)/i,
+					
+					// Anywhere in text patterns
+					/Pass:?:\s*(true|false|✅|❌|TRUE|FALSE)/im,
+					/Overall\s*Pass:?:\s*(true|false|✅|❌|TRUE|FALSE)/im,
+					/All\s*Sections\s*Pass:?:\s*(true|false|✅|❌|TRUE|FALSE)/im,
+					/(true|false|✅|❌|TRUE|FALSE)\s*(?:overall|pass)/im,
+					
+					// Handle capitalized boolean values
+					/Pass:?:\s*(True|False|TRUE|FALSE)/im,
+					/Overall\s*Pass:?:\s*(True|False|TRUE|FALSE)/im
+				];
+				
+				for (const pattern of overallPassPatterns) {
+					passMatch = sectionBlock.match(pattern);
+					if (passMatch) {
+						const passValue = passMatch[1].toLowerCase().trim();
+						pass = passValue.includes('true') || 
+								passValue.includes('✅') || 
+								passValue === 'yes' ||
+								passValue === 'passed' ||
+								passValue === 'pass';
+						break;
+					}
+				}
+				console.log('Overall pass match:', passMatch, 'Final pass:', pass);
+				
+				// Look for various primary issue formats
+				const explanationMatch = sectionBlock.match(/\*\*Overall Pass\*\*:\s*[^()]*\(([^)]+)\)/);
+				const statusMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*(?:Pipeline\s+)?Status\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/);
+				const primaryIssueMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*(?:Primary\s+)?Issue\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/) ||
+									 sectionBlock.match(/(?:•|-|\*)\s*(?:Primary\s+)?Issue:?:\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/);
+				const errorsMatch = sectionBlock.match(/(?:•|-|\*)\s*\*\*Total\s+Errors?\*\*?:?\s*([\s\S]*?)(?=\n(?:•|-|\*)\s*\*\*|$)/);
+				const totalSectionsMatch = sectionBlock.match(/Total\s*Sections\s*Passing:?:\s*([^\n]+)/i);
+				
+				let primaryIssue = 'All sections passed successfully.';
+				if (explanationMatch) {
+					primaryIssue = explanationMatch[1].trim();
+				} else if (statusMatch) {
+					primaryIssue = statusMatch[1].trim();
+				} else if (primaryIssueMatch) {
+					primaryIssue = primaryIssueMatch[1].trim();
+				} else if (errorsMatch) {
+					const errorText = errorsMatch[1].trim();
+					if (errorText !== '[]' && errorText !== '') {
+						primaryIssue = `Errors found: ${errorText}`;
+					}
+				}
+				if (totalSectionsMatch) {
+					primaryIssue = `${primaryIssue} | Total Sections Passing: ${totalSectionsMatch[1].trim()}`;
+				}
+				
+				console.log('Primary issue extraction - explanation:', explanationMatch, 'status:', statusMatch, 'issue:', primaryIssueMatch, 'Final issue:', primaryIssue);
+				
+				console.log('Setting overall data - grade:', grade, 'pass:', pass, 'primaryIssue:', primaryIssue);
+				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' }
+		};
+
+		// If we saw a separate CORRECTED COPY section, populate copy.corrected with it when useful
+		if (correctedCopyFromSeparateSection) {
+			const cleanedCorrected = correctedCopyFromSeparateSection.replace(/^###.*$/m, '').trim();
+			if (!finalReport.copy.corrected || finalReport.copy.corrected.length < 20) {
+				finalReport.copy.corrected = cleanedCorrected;
+			}
+		}
+
+		// If no explicit overall section was found, check for inline overall results at end of text
+		if (!parsedData.overall) {
+			// Look for overall results anywhere in the full text (sometimes appears at the end)
+			const inlineOverallGradeMatch = cleanedQaText.match(/##?\s*OVERALL\s*(?:PIPELINE\s*)?GRADE:?:\s*([^#\n]+)/i);
+			const inlineOverallPassMatch = cleanedQaText.match(/##?\s*OVERALL\s*(?:PIPELINE\s*)?PASS:?:\s*([^#\n(]+)/i);
+			
+			if (inlineOverallGradeMatch || inlineOverallPassMatch) {
+				let grade = 'N/A';
+				let pass = false;
+				
+				if (inlineOverallGradeMatch) {
+					grade = inlineOverallGradeMatch[1].trim();
+				}
+				
+				if (inlineOverallPassMatch) {
+					const passValue = inlineOverallPassMatch[1].toLowerCase().trim();
+					pass = passValue.includes('true') || 
+							passValue.includes('✅') || 
+							passValue === 'yes' ||
+							passValue === 'passed';
+				}
+				
+				parsedData.overall = {
+					grade,
+					pass,
+					primaryIssue: pass ? 'All sections passed successfully.' : 'Overall assessment failed.'
+				};
+				
+				console.log('Found inline overall results - grade:', grade, 'pass:', pass);
+			} else {
+				// Calculate overall pass from individual sections
+				const allSectionsPassed = finalReport.title.pass && 
+											finalReport.meta.pass && 
+											finalReport.h1.pass && 
+											finalReport.copy.pass;
+				
+				// Calculate average grade if all sections have numeric grades
+				let averageGrade = 'N/A';
+				const grades = [finalReport.title.grade, finalReport.meta.grade, finalReport.h1.grade, finalReport.copy.grade];
+				const numericGrades = grades.filter(g => g !== 'N/A' && g !== undefined)
+										   .map(g => {
+										   const match = String(g).match(/(\d+(?:\.\d+)?)/);
+										   return match ? parseFloat(match[1]) : null;
+									   })
+									   .filter(g => g !== null) as number[];
+				
+				if (numericGrades.length === 4) {
+					const avg = numericGrades.reduce((sum, grade) => sum + grade, 0) / numericGrades.length;
+					averageGrade = `${avg.toFixed(2)}/100`;
+				}
+				
+				parsedData.overall = {
+					grade: averageGrade,
+					pass: allSectionsPassed,
+					primaryIssue: allSectionsPassed ? 'All sections passed successfully.' : 'One or more sections failed.'
+				};
+				
+				console.log('Calculated overall from individual sections - pass:', allSectionsPassed, 'grade:', averageGrade);
+			}
+			
+			// Update the final report with the calculated/found overall data
+			finalReport.overall = parsedData.overall;
+		}
+		
+		console.log('Final parsed QA data:', finalReport.overall);
+		console.log('Setting overallPass:', finalReport.overall.pass, 'overallGrade:', finalReport.overall.grade);
+		
+		return { 
+			detailedQaReport: finalReport, 
+			overallPass: finalReport.overall.pass, 
+			overallGrade: finalReport.overall.grade 
+		};
+	} else {
+		// Parse the new structured format
+		return parseStructuredQaReport(cleanedQaText);
+	}
+};
+
+
+/**
+ * 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,101 @@
+// 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;
+}
+
+// Represents the full, structured QA report.
+export interface DetailedQaReport {
+    title: QaSectionResult;
+    meta: QaSectionResult;
+    h1: QaSectionResult;
+    copy: QaSectionResult;
+    overall: {
+        grade: string;
+        pass: boolean;
+        primaryIssue: 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, '.'),
+        }
+      }
+    };
+});