Update App.tsx

App.tsx

@@ -28,13 +28,15 @@ const estimateStorageSize = (results: ResultRow[]): number => {
 // Maximum storage size per job (500KB)
 const MAX_JOB_STORAGE_SIZE = 500 * 1024;
 
+// Enhanced localStorage hook with better error handling and data validation
 function useLocalStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
     const [storedValue, setStoredValue] = useState<T>(() => {
         try {
             const item = window.localStorage.getItem(key);
             if (item) {
-                 // Basic validation to help clear out old, problematic data.
                 const parsed = JSON.parse(item);
+                
+                // Enhanced validation for different data types
                 if (Array.isArray(parsed)) {
                     // Filter out old items that had the 'results' property which caused storage errors.
                     let cleanHistory = parsed.filter(p => typeof p === 'object' && p !== null && !p.hasOwnProperty('results'));
@@ -67,13 +69,86 @@ function useLocalStorage<T>(key: string, initialValue: T): [T, React.Dispatch<Re
         try {
             setStoredValue(prev => {
                 const valueToStore = value instanceof Function ? value(prev) : value;
-                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                
+                // Check storage quota before saving
+                const serialized = JSON.stringify(valueToStore);
+                if (serialized.length > 5 * 1024 * 1024) { // 5MB limit
+                    console.warn('Data too large for localStorage, truncating...');
+                    // For history, keep only the most recent items
+                    if (Array.isArray(valueToStore) && key === 'ace-copywriting-history') {
+                        const truncated = (valueToStore as any[]).slice(0, 5); // Keep only 5 most recent
+                        window.localStorage.setItem(key, JSON.stringify(truncated));
+                        return truncated as T;
+                    }
+                }
+                
+                window.localStorage.setItem(key, serialized);
                 return valueToStore;
             });
         } catch (error) {
             console.error('Error writing to localStorage', error);
+            // If quota exceeded, try to clear old data and retry
+            if (error instanceof Error && error.name === 'QuotaExceededError') {
+                try {
+                    // Clear old history items to make space
+                    if (key === 'ace-copywriting-history') {
+                        const currentHistory = window.localStorage.getItem(key);
+                        if (currentHistory) {
+                            const parsed = JSON.parse(currentHistory);
+                            if (Array.isArray(parsed) && parsed.length > 3) {
+                                const truncated = parsed.slice(0, 3); // Keep only 3 most recent
+                                window.localStorage.setItem(key, JSON.stringify(truncated));
+                                setStoredValue(truncated as T);
+                            }
+                        }
+                    }
+                } catch (clearError) {
+                    console.error('Failed to clear storage for new data', clearError);
+                }
+            }
         }
     }, [key]);
+    
+    return [storedValue, setValue];
+}
+
+// Hook for user preferences
+function useUserPreferences() {
+    const [preferences, setPreferences] = useLocalStorage('ace-copywriting-preferences', {
+        autoSave: true,
+        maxHistoryItems: 10,
+        showDebugInfo: false,
+        defaultExportFormat: 'csv' as 'csv' | 'pdf' | 'docx' | 'json',
+        theme: 'dark' as 'dark' | 'light'
+    });
+    
+    return [preferences, setPreferences] as const;
+}
+
+// Hook for session data (cleared on browser close)
+function useSessionStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            const item = window.sessionStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error('Error reading from sessionStorage', error);
+            return initialValue;
+        }
+    });
+
+    const setValue: React.Dispatch<React.SetStateAction<T>> = useCallback((value) => {
+        try {
+            setStoredValue(prev => {
+                const valueToStore = value instanceof Function ? value(prev) : value;
+                window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+                return valueToStore;
+            });
+        } catch (error) {
+            console.error('Error writing to sessionStorage', error);
+        }
+    }, [key]);
+    
     return [storedValue, setValue];
 }
 
@@ -93,22 +168,82 @@ const MAX_HISTORY_ITEMS = 10;
 
 const App: React.FC = () => {
     const [history, setHistory] = useLocalStorage<JobHistoryItem[]>('ace-copywriting-history', []);
+    const [preferences, setPreferences] = useUserPreferences();
     const [view, setView] = useState<ViewState>(() => history.length > 0 ? { type: 'new_job' } : { type: 'welcome' });
 
-    // State for the currently active processing job
-    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);
+    // State for the currently active processing job - persist in sessionStorage
+    const [jobId, setJobId] = useSessionStorage<string | null>('ace-current-job-id', null);
+    const [filename, setFilename] = useSessionStorage<string>('ace-current-filename', '');
+    const [queue, setQueue] = useSessionStorage<QueueItem[]>('ace-current-queue', []);
+    const [results, setResults] = useSessionStorage<ResultRow[]>('ace-current-results', []);
+    const [status, setStatus] = useSessionStorage<ProcessingStatus>('ace-current-status', 'idle');
+    const [error, setError] = useSessionStorage<string | null>('ace-current-error', null);
     const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
 
-    // New: capture all user-facing errors and show a details modal
-    const [errors, setErrors] = useState<BatchError[]>([]);
+    // New: capture all user-facing errors and show a details modal - persist in sessionStorage
+    const [errors, setErrors] = useSessionStorage<BatchError[]>('ace-current-errors', []);
     const [showErrorDetails, setShowErrorDetails] = useState(false);
     const [expandedDebugIndex, setExpandedDebugIndex] = useState<number | null>(null);
 
+    // Auto-save current job state when it changes
+    useEffect(() => {
+        if (preferences.autoSave && jobId) {
+            const jobState = {
+                jobId,
+                filename,
+                queue,
+                results,
+                status,
+                error,
+                errors,
+                timestamp: new Date().toISOString()
+            };
+            
+            try {
+                window.sessionStorage.setItem('ace-current-job-state', JSON.stringify(jobState));
+            } catch (error) {
+                console.warn('Failed to auto-save job state:', error);
+            }
+        }
+    }, [preferences.autoSave, jobId, filename, queue, results, status, error, errors]);
+
+    // Restore job state on app load
+    useEffect(() => {
+        try {
+            const savedState = window.sessionStorage.getItem('ace-current-job-state');
+            if (savedState) {
+                const jobState = JSON.parse(savedState);
+                const stateAge = Date.now() - new Date(jobState.timestamp).getTime();
+                const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+                
+                // Only restore if state is recent
+                if (stateAge < maxAge) {
+                    setJobId(jobState.jobId);
+                    setFilename(jobState.filename);
+                    setQueue(jobState.queue || []);
+                    setResults(jobState.results || []);
+                    setStatus(jobState.status || 'idle');
+                    setError(jobState.error);
+                    setErrors(jobState.errors || []);
+                    
+                    // Set appropriate view based on restored state
+                    if (jobState.status === 'completed' && jobState.results?.length > 0) {
+                        setView({ type: 'new_job' }); // Show results view
+                    } else if (jobState.status === 'processing') {
+                        setView({ type: 'new_job' }); // Show processing view
+                    }
+                } else {
+                    // Clear old state
+                    window.sessionStorage.removeItem('ace-current-job-state');
+                }
+            }
+        } catch (error) {
+            console.warn('Failed to restore job state:', error);
+            // Clear corrupted state
+            window.sessionStorage.removeItem('ace-current-job-state');
+        }
+    }, []);
+
     const resetNewJobState = useCallback(() => {
         setJobId(generateUUID());
         setFilename('');
@@ -118,7 +253,10 @@ const App: React.FC = () => {
         setError(null);
         setErrors([]);
         setShowErrorDetails(false);
-    }, []);
+        
+        // Clear session storage for new job
+        window.sessionStorage.removeItem('ace-current-job-state');
+    }, [setJobId, setFilename, setQueue, setResults, setStatus, setError, setErrors]);
 
     const handleStartNewJob = () => {
         resetNewJobState();
@@ -135,6 +273,7 @@ const App: React.FC = () => {
         }
     };
 
+    // Enhanced file parsing with better error handling
     const handleFileParsed = useCallback((data: CsvInputRow[], file: File) => {
         // Ensure we have a jobId for this processing session
         if (!jobId) {
@@ -149,7 +288,23 @@ const App: React.FC = () => {
         setQueue(initialQueue);
         setError(null);
         setErrors([]);
-    }, [jobId]);
+        
+        // Save file info to history for reference
+        const fileInfo = {
+            filename: file.name,
+            size: file.size,
+            lastModified: file.lastModified,
+            rowCount: data.length
+        };
+        
+        try {
+            const fileHistory = JSON.parse(localStorage.getItem('ace-file-history') || '[]');
+            const updatedHistory = [fileInfo, ...fileHistory.slice(0, 9)]; // Keep last 10 files
+            localStorage.setItem('ace-file-history', JSON.stringify(updatedHistory));
+        } catch (error) {
+            console.warn('Failed to save file history:', error);
+        }
+    }, [jobId, setJobId, setFilename, setQueue, setError, setErrors]);
     
     const handleStartProcessing = async () => {
         console.log('Start processing clicked. JobId:', jobId, 'Queue length:', queue.length);
@@ -225,13 +380,47 @@ const App: React.FC = () => {
                 };
 
                 const updatedHistory = [newHistoryItem, ...prevHistory];
-                // Prune history to the maximum allowed size
+                
+                // Prune history to the maximum allowed size from preferences
+                const maxItems = preferences.maxHistoryItems || 10;
+                const prunedHistory = updatedHistory.slice(0, maxItems);
+                
                 console.log('Job saved to history successfully:', newHistoryItem);
-                return updatedHistory.slice(0, MAX_HISTORY_ITEMS);
+                return prunedHistory;
             });
-            // Stay on the results view for the current job. The user can navigate to history manually.
+            
+            // Clear session storage after successful save
+            window.sessionStorage.removeItem('ace-current-job-state');
         }
-    }, [status, jobId, filename, queue.length, results, setHistory]);
+    }, [status, jobId, filename, queue.length, results, setHistory, preferences.maxHistoryItems]);
+
+    // Cleanup old history items periodically
+    useEffect(() => {
+        const cleanupHistory = () => {
+            setHistory(prevHistory => {
+                const maxAge = 30 * 24 * 60 * 60 * 1000; // 30 days
+                const now = Date.now();
+                const filtered = prevHistory.filter(item => {
+                    const itemAge = now - new Date(item.date).getTime();
+                    return itemAge < maxAge;
+                });
+                
+                if (filtered.length !== prevHistory.length) {
+                    console.log(`Cleaned up ${prevHistory.length - filtered.length} old history items`);
+                }
+                
+                return filtered;
+            });
+        };
+
+        // Clean up on app start
+        cleanupHistory();
+        
+        // Set up periodic cleanup (every hour)
+        const interval = setInterval(cleanupHistory, 60 * 60 * 1000);
+        
+        return () => clearInterval(interval);
+    }, [setHistory]);
     
     // --- RENDER ---
 
@@ -462,6 +651,100 @@ const App: React.FC = () => {
         </div>
     );
 
+    // Storage management utilities
+    const getStorageInfo = () => {
+        try {
+            const totalSpace = 5 * 1024 * 1024; // 5MB limit
+            const usedSpace = new Blob([JSON.stringify(history)]).size;
+            const usedPercentage = (usedSpace / totalSpace) * 100;
+            
+            return {
+                usedSpace: Math.round(usedSpace / 1024), // KB
+                totalSpace: Math.round(totalSpace / 1024), // KB
+                usedPercentage: Math.round(usedPercentage),
+                historyCount: history.length,
+                maxHistoryItems: preferences.maxHistoryItems
+            };
+        } catch (error) {
+            console.error('Error calculating storage info:', error);
+            return null;
+        }
+    };
+
+    const clearAllData = () => {
+        if (window.confirm('Are you sure you want to clear all stored data? This will remove all job history and cannot be undone.')) {
+            try {
+                // Clear localStorage
+                window.localStorage.removeItem('ace-copywriting-history');
+                window.localStorage.removeItem('ace-copywriting-preferences');
+                window.localStorage.removeItem('ace-file-history');
+                
+                // Clear sessionStorage
+                window.sessionStorage.clear();
+                
+                // Reset state
+                setHistory([]);
+                setPreferences({
+                    autoSave: true,
+                    maxHistoryItems: 10,
+                    showDebugInfo: false,
+                    defaultExportFormat: 'csv',
+                    theme: 'dark'
+                });
+                
+                // Reset current job state
+                resetNewJobState();
+                setView({ type: 'welcome' });
+                
+                alert('All data has been cleared successfully.');
+            } catch (error) {
+                console.error('Error clearing data:', error);
+                alert('Error clearing data. Please try refreshing the page.');
+            }
+        }
+    };
+
+    const StorageInfoComponent: React.FC = () => {
+        const storageInfo = getStorageInfo();
+        
+        if (!storageInfo) return null;
+        
+        return (
+            <div className="bg-gray-700 rounded-lg p-4 mb-4">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-sm font-semibold text-gray-200">Storage Status</h3>
+                    <button
+                        onClick={clearAllData}
+                        className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded"
+                    >
+                        Clear All Data
+                    </button>
+                </div>
+                <div className="grid grid-cols-2 gap-4 text-xs">
+                    <div>
+                        <div className="text-gray-400">Storage Used</div>
+                        <div className="text-white">{storageInfo.usedSpace}KB / {storageInfo.totalSpace}KB</div>
+                        <div className="w-full bg-gray-600 rounded-full h-1 mt-1">
+                            <div 
+                                className={`h-1 rounded-full ${storageInfo.usedPercentage > 80 ? 'bg-red-500' : storageInfo.usedPercentage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`}
+                                style={{ width: `${Math.min(storageInfo.usedPercentage, 100)}%` }}
+                            ></div>
+                        </div>
+                    </div>
+                    <div>
+                        <div className="text-gray-400">Job History</div>
+                        <div className="text-white">{storageInfo.historyCount} / {storageInfo.maxHistoryItems}</div>
+                    </div>
+                </div>
+                {storageInfo.usedPercentage > 80 && (
+                    <div className="text-xs text-yellow-400 mt-2">
+                        ⚠️ Storage is getting full. Consider clearing old jobs.
+                    </div>
+                )}
+            </div>
+        );
+    };
+
     return (
         <div className="flex h-screen bg-gray-900 text-gray-100">
             {/* --- SIDEBAR --- */}
@@ -551,6 +834,7 @@ const App: React.FC = () => {
                     </div>
                 )}
                 {renderMainContent()}
+                <StorageInfoComponent />
             </main>
             
             {/* --- DELETE CONFIRMATION DIALOG --- */}