enhance analysis page

src/app/components/analysis/UploadCsvModal.tsx

@@ -0,0 +1,140 @@
+import React, { useMemo, useState } from 'react';
+import { parseCsv } from '../../utils/index.ts';
+
+import type { CsvRow } from '../../types/index.ts';
+
+interface UploadCsvModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAnalyze: (file: File) => Promise<void>;
+  isAnalyzing: boolean;
+}
+
+const UploadCsvModal = ({
+  isOpen,
+  onClose,
+  onAnalyze,
+  isAnalyzing
+}: UploadCsvModalProps) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [rows, setRows] = useState<CsvRow[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileName = useMemo(
+    () => selectedFile?.name ?? 'Select a CSV file with arguments',
+    [selectedFile]
+  );
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] ?? null;
+    setSelectedFile(file);
+    setError(null);
+    setRows([]);
+
+    if (!file) {
+      return;
+    }
+
+    // Parse CSV
+    try {
+      const content = await file.text();
+      const parsed = parseCsv(content);
+
+      setRows(parsed.rows);
+
+      if (parsed.rows.length === 0) {
+        setError('No data found in the CSV file.');
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Unable to read the CSV file.'
+      );
+      setRows([]);
+    }
+  };
+
+  const handleAnalyze = async () => {
+    if (!selectedFile) {
+      setError('Please choose a CSV file to analyze.');
+      return;
+    }
+
+    if (rows.length === 0) {
+      setError('No data found in the CSV file.');
+      return;
+    }
+
+    await onAnalyze(selectedFile);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 dark:bg-black/70">
+      <div
+        className="relative w-full max-w-2xl max-h-[90vh] overflow-hidden rounded-xl border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
+          <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
+            Analyze New Arguments
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-slate-500 dark:text-zinc-400 hover:text-slate-700 dark:hover:text-zinc-200 transition-colors"
+            aria-label="Close"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-140px)]">
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium text-slate-700 dark:text-zinc-300">
+              Upload a CSV file
+            </label>
+
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <label className="flex w-full max-w-xl cursor-pointer items-center justify-between rounded-full border border-slate-300 dark:border-zinc-600 bg-slate-50 dark:bg-zinc-800 px-5 py-3 transition hover:border-slate-400 dark:hover:border-zinc-500">
+                <span className="truncate text-sm font-semibold text-slate-500 dark:text-zinc-400">
+                  {fileName}
+                </span>
+                <input
+                  type="file"
+                  accept=".csv,text/csv"
+                  className="hidden"
+                  onChange={handleFileChange}
+                />
+              </label>
+
+              <div className="flex w-full justify-center">
+                <button
+                  type="button"
+                  onClick={handleAnalyze}
+                  disabled={!selectedFile || rows.length === 0 || isAnalyzing}
+                  className="rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 dark:hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  {isAnalyzing ? 'Analyzing...' : 'Analyze'}
+                </button>
+              </div>
+            </div>
+            {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          </div>
+
+          {isAnalyzing && (
+            <div className="flex items-center justify-center py-8">
+              <div className="flex flex-col items-center">
+                <div className="h-10 w-10 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
+                <p className="mt-3 text-sm text-slate-600 dark:text-zinc-400">Analyzing arguments...</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UploadCsvModal;

src/app/pages/AnalysisPage.tsx

@@ -1,40 +1,33 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { parseCsv, formatError, getCachedAnalysisData, cacheAnalysisData } from '../utils/index.ts';
-import { CsvRow } from '../types/index.ts';
+import { formatError, getCachedAnalysisData, cacheAnalysisData } from '../utils/index.ts';
 import { AnalysisResult } from '../types/analysis.types.ts';
 import { analyzeArgumentsFromCsv, getAnalysisResults } from '../services/analysis.service.ts';
 import {
   calculateStanceStats,
   calculateTopicFrequency,
-  calculateTimeStats,
   getUniqueTopicsCount,
   getAverageArgumentLength,
-  getMostRecentAnalysisDate,
-  getOldestAnalysisDate,
 } from '../utils/analysis.utils.ts';
+import { getCachedRecentAnalysisData, cacheRecentAnalysisData } from '../utils/cache.utils.ts';
 import StanceDistributionChart from '../components/analysis/StanceDistributionChart.tsx';
 import TopicFrequencyChart from '../components/analysis/TopicFrequencyChart.tsx';
-import TimeSeriesChart from '../components/analysis/TimeSeriesChart.tsx';
 import Loading from '../components/common/Loading.tsx';
+import UploadCsvModal from '../components/analysis/UploadCsvModal.tsx';
 
 const AnalysisPage = () => {
-  const [selectedFile, setSelectedFile] = useState(null as File | null);
-  const [headers, setHeaders] = useState(['id', 'argument'] as string[]);
-  const [rows, setRows] = useState([] as CsvRow[]);
-  const [error, setError] = useState(null as string | null);
   const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [analysisResults, setAnalysisResults] = useState([] as AnalysisResult[]);
-  
+  const [analysisResults, setAnalysisResults] = useState<AnalysisResult[]>(() => {
+    const cachedResults = getCachedRecentAnalysisData();
+    return cachedResults || [];
+  });
+  const [showUploadModal, setShowUploadModal] = useState(false);
+
   // User's historical analysis data
   const [userAnalysisData, setUserAnalysisData] = useState([] as AnalysisResult[]);
   const [isLoadingStats, setIsLoadingStats] = useState(true);
   const [isRefreshingStats, setIsRefreshingStats] = useState(false);
   const [statsError, setStatsError] = useState(null as string | null);
 
-  const fileName = useMemo(
-    () => selectedFile?.name ?? 'Select a CSV file with arguments',
-    [selectedFile]
-  );
 
   // Fetch user's analysis data on mount with cache support
   useEffect(() => {
@@ -71,6 +64,17 @@ const AnalysisPage = () => {
     fetchUserAnalysis();
   }, []);
 
+  // Update analysisResults when userAnalysisData changes
+  useEffect(() => {
+    if (userAnalysisData.length > 0) {
+      // Set analysisResults to the most recent items (e.g., last 10 items)
+      const recentResults = userAnalysisData.slice(0, 10);
+      setAnalysisResults(recentResults);
+      // Also cache these to localStorage
+      cacheRecentAnalysisData(recentResults);
+    }
+  }, [userAnalysisData]);
+
   // Calculate statistics from user's analysis data
   const stanceStats = useMemo(
     () => calculateStanceStats(userAnalysisData),
@@ -80,10 +84,6 @@ const AnalysisPage = () => {
     () => calculateTopicFrequency(userAnalysisData, 10),
     [userAnalysisData]
   );
-  const timeStats = useMemo(
-    () => calculateTimeStats(userAnalysisData),
-    [userAnalysisData]
-  );
   const uniqueTopicsCount = useMemo(
     () => getUniqueTopicsCount(userAnalysisData),
     [userAnalysisData]
@@ -92,69 +92,35 @@ const AnalysisPage = () => {
     () => getAverageArgumentLength(userAnalysisData),
     [userAnalysisData]
   );
-  const mostRecentDate = useMemo(
-    () => getMostRecentAnalysisDate(userAnalysisData),
-    [userAnalysisData]
-  );
-  const oldestDate = useMemo(
-    () => getOldestAnalysisDate(userAnalysisData),
-    [userAnalysisData]
-  );
-
-  const handleFileChange = async (event: any) => {
-    const file = event.target.files?.[0] ?? null;
-    setSelectedFile(file);
-    setError(null);
-    setAnalysisResults([]);
-
-    if (!file) {
-      setHeaders(['id', 'argument']);
-      setRows([]);
-      return;
-    }
 
-    // Automatically parse and preview CSV
-    try {
-      const content = await file.text();
-      const parsed = parseCsv(content);
-
-      setHeaders(parsed.headers.length > 0 ? parsed.headers : ['id', 'argument']);
-      setRows(parsed.rows);
-
-      if (parsed.rows.length === 0) {
-        setError('No data found in the CSV file.');
-      }
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : 'Unable to read the CSV file.'
-      );
-      setHeaders(['id', 'argument']);
-      setRows([]);
-    }
+  const handleOpenUploadModal = () => {
+    setShowUploadModal(true);
   };
 
-  const handleAnalyze = async () => {
-    if (!selectedFile) {
-      setError('Please choose a CSV file to analyze.');
-      return;
-    }
+  const handleCloseUploadModal = () => {
+    setShowUploadModal(false);
+  };
 
+  const handleAnalyzeFromModal = async (file: File) => {
     setIsAnalyzing(true);
-    setError(null);
-    setAnalysisResults([]);
 
     try {
-      const response = await analyzeArgumentsFromCsv(selectedFile);
+      const response = await analyzeArgumentsFromCsv(file);
       setAnalysisResults(response.results);
+      // Cache the recent analysis results
+      cacheRecentAnalysisData(response.results);
       // Refresh user analysis data after successful analysis
       const updatedResponse = await getAnalysisResults(1000, 0);
       setUserAnalysisData(updatedResponse.results);
       // Cache the updated data
       cacheAnalysisData(updatedResponse.results);
     } catch (err) {
-      setError(formatError(err));
+      // For now, just log the error since we don't have a state to store it
+      // In a production app, we might want to use a toast notification system
+      console.error('Analysis error:', formatError(err));
     } finally {
       setIsAnalyzing(false);
+      setShowUploadModal(false);
     }
   };
 
@@ -173,12 +139,20 @@ const AnalysisPage = () => {
                   Overview of all your analyzed arguments
                 </p>
               </div>
-              {isRefreshingStats && (
-                <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-zinc-400">
-                  <div className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 dark:border-zinc-600 border-t-blue-600 dark:border-t-blue-500"></div>
-                  <span>Updating...</span>
-                </div>
-              )}
+              <div className="flex items-center gap-2">
+                {isRefreshingStats && (
+                  <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-zinc-400">
+                    <div className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 dark:border-zinc-600 border-t-blue-600 dark:border-t-blue-500"></div>
+                    <span>Updating...</span>
+                  </div>
+                )}
+                <button
+                  onClick={handleOpenUploadModal}
+                  className="rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 dark:hover:bg-blue-600"
+                >
+                  Upload CSV
+                </button>
+              </div>
             </div>
           </div>
 
@@ -227,7 +201,7 @@ const AnalysisPage = () => {
                 </div>
 
                 {/* Charts Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="grid grid-cols-1 gap-6">
                   {/* Stance Distribution */}
                   <div className="rounded-lg border border-slate-200 dark:border-zinc-700 p-4">
                     <h3 className="text-sm font-semibold text-slate-700 dark:text-zinc-300 mb-4">
@@ -247,21 +221,6 @@ const AnalysisPage = () => {
                       </div>
                     </div>
                   </div>
-
-                  {/* Time Series */}
-                  {timeStats.length > 0 && (
-                    <div className="rounded-lg border border-slate-200 dark:border-zinc-700 p-4">
-                      <h3 className="text-sm font-semibold text-slate-700 dark:text-zinc-300 mb-4">
-                        Analysis Timeline
-                      </h3>
-                      <TimeSeriesChart data={timeStats} />
-                      {oldestDate && mostRecentDate && (
-                        <div className="mt-4 text-center text-xs text-slate-500 dark:text-zinc-400">
-                          From {oldestDate} to {mostRecentDate}
-                        </div>
-                      )}
-                    </div>
-                  )}
                 </div>
 
                 {/* Topic Frequency */}
@@ -273,167 +232,90 @@ const AnalysisPage = () => {
                     <TopicFrequencyChart data={topicFrequency} />
                   </div>
                 )}
+
+                {/* Analysis Results Table */}
+                {analysisResults.length > 0 && (
+                  <div className="rounded-lg border border-slate-200 dark:border-zinc-700">
+                    <div className="bg-green-50 dark:bg-green-900/20 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
+                      <h3 className="text-sm font-semibold text-green-800 dark:text-green-400">
+                        Recent Analysis Results ({analysisResults.length} results)
+                      </h3>
+                    </div>
+                    <div className="overflow-x-auto">
+                      <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-700">
+                        <thead className="bg-slate-50 dark:bg-zinc-800">
+                          <tr>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              Argument
+                            </th>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              Topic
+                            </th>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              Stance
+                            </th>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              Confidence
+                            </th>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              PRO
+                            </th>
+                            <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
+                              CON
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-200 dark:divide-zinc-700 bg-white dark:bg-zinc-900">
+                          {analysisResults.map((result) => (
+                            <tr key={result.id} className="hover:bg-slate-50 dark:hover:bg-zinc-800">
+                              <td className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 dark:text-zinc-300 max-w-md">
+                                {result.argument}
+                              </td>
+                              <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
+                                {result.topic}
+                              </td>
+                              <td className="px-4 py-3 text-sm">
+                                <span
+                                  className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${
+                                    result.predicted_stance === 'PRO'
+                                      ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400'
+                                      : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400'
+                                  }`}
+                                >
+                                  {result.predicted_stance}
+                                </span>
+                              </td>
+                              <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
+                                {(result.confidence * 100).toFixed(1)}%
+                              </td>
+                              <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
+                                {(result.probability_pro * 100).toFixed(1)}%
+                              </td>
+                              <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
+                                {(result.probability_con * 100).toFixed(1)}%
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
               </div>
             )}
           </div>
 
         {/* CSV Upload and Analysis Section */}
-        <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
-          <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
-            <h1 className="text-lg font-semibold text-slate-800 dark:text-white">
-              Analyze New Arguments
-            </h1>
-            <p className="text-sm text-slate-500 dark:text-zinc-400">
-              Upload a CSV file containing arguments to analyze them.
-            </p>
-          </div>
-
-          <div className="space-y-6 p-6">
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium text-slate-700 dark:text-zinc-300">
-              Upload a CSV file
-            </label>
-
-            <div className="flex flex-wrap items-center gap-3">
-              <label className="flex w-full max-w-xl cursor-pointer items-center justify-between rounded-full border border-slate-300 dark:border-zinc-600 bg-slate-50 dark:bg-zinc-800 px-5 py-3 transition hover:border-slate-400 dark:hover:border-zinc-500">
-                <span className="truncate text-sm font-semibold text-slate-500 dark:text-zinc-400">
-                  {fileName}
-                </span>
-                <input
-                  type="file"
-                  accept=".csv,text/csv"
-                  className="hidden"
-                  onChange={handleFileChange}
-                />
-              </label>
-
-              <button
-                type="button"
-                onClick={handleAnalyze}
-                disabled={!selectedFile || rows.length === 0 || isAnalyzing}
-                className="rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 dark:hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-60"
-              >
-                {isAnalyzing ? 'Analyzing...' : 'Analyze'}
-              </button>
-            </div>
 
-            {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
-          </div>
-
-          {rows.length > 0 && (
-            <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-zinc-700">
-              <div className="bg-slate-50 dark:bg-zinc-800 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
-                <h2 className="text-sm font-semibold text-slate-700 dark:text-zinc-300">
-                  CSV Preview ({rows.length} rows)
-                </h2>
-              </div>
-              <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-700">
-                <thead className="bg-slate-50 dark:bg-zinc-800">
-                  <tr>
-                    {headers.map((header) => (
-                      <th
-                        key={header}
-                        scope="col"
-                        className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300"
-                      >
-                        {header}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-slate-200 dark:divide-zinc-700 bg-white dark:bg-zinc-900">
-                  {rows.map((row, index) => (
-                    <tr key={row.id ?? `row-${index}`} className="hover:bg-slate-50 dark:hover:bg-zinc-800">
-                      {headers.map((header) => (
-                        <td
-                          key={`${header}-${index}`}
-                          className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 dark:text-zinc-300"
-                        >
-                          {row[header] ?? ''}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          {isAnalyzing && (
-            <div className="flex items-center justify-center py-12">
-              <Loading text="Analyzing arguments..." />
-            </div>
-          )}
-
-          {!isAnalyzing && analysisResults.length > 0 && (
-            <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-zinc-700">
-              <div className="bg-green-50 dark:bg-green-900/20 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
-                <h2 className="text-sm font-semibold text-green-800 dark:text-green-400">
-                  Analysis Results ({analysisResults.length} results)
-                </h2>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-700">
-                  <thead className="bg-slate-50 dark:bg-zinc-800">
-                    <tr>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        Argument
-                      </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        Topic
-                      </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        Stance
-                      </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        Confidence
-                      </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        PRO
-                      </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
-                        CON
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-200 dark:divide-zinc-700 bg-white dark:bg-zinc-900">
-                    {analysisResults.map((result) => (
-                      <tr key={result.id} className="hover:bg-slate-50 dark:hover:bg-zinc-800">
-                        <td className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 dark:text-zinc-300 max-w-md">
-                          {result.argument}
-                        </td>
-                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
-                          {result.topic}
-                        </td>
-                        <td className="px-4 py-3 text-sm">
-                          <span
-                            className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${
-                              result.predicted_stance === 'PRO'
-                                ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400'
-                                : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400'
-                            }`}
-                          >
-                            {result.predicted_stance}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
-                          {(result.confidence * 100).toFixed(1)}%
-                        </td>
-                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
-                          {(result.probability_pro * 100).toFixed(1)}%
-                        </td>
-                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
-                          {(result.probability_con * 100).toFixed(1)}%
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-          </div>
-        </div>
+        {/* Upload CSV Modal */}
+        {showUploadModal && (
+          <UploadCsvModal
+            isOpen={showUploadModal}
+            onClose={handleCloseUploadModal}
+            onAnalyze={handleAnalyzeFromModal}
+            isAnalyzing={isAnalyzing}
+          />
+        )}
       </div>
     </div>
   );

src/app/utils/cache.utils.ts

@@ -117,3 +117,36 @@ export function clearMcpToolsCache(): void {
   }
 }
 
+/**
+ * Cache recent analysis results to localStorage
+ */
+export function cacheRecentAnalysisData(results: AnalysisResult[]): void {
+  try {
+    const cacheData: CachedAnalysisData = {
+      results,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem('recent_analysis_data_cache', JSON.stringify(cacheData));
+  } catch (error) {
+    // Silently fail if localStorage is not available or quota exceeded
+    console.warn('Failed to cache recent analysis data:', error);
+  }
+}
+
+/**
+ * Get cached recent analysis results from localStorage
+ */
+export function getCachedRecentAnalysisData(): AnalysisResult[] | null {
+  try {
+    const cached = localStorage.getItem('recent_analysis_data_cache');
+    if (!cached) return null;
+
+    const cacheData: CachedAnalysisData = JSON.parse(cached);
+    return cacheData.results;
+  } catch (error) {
+    // Silently fail if localStorage is not available or data is corrupted
+    console.warn('Failed to retrieve cached recent analysis data:', error);
+    return null;
+  }
+}
+