Upload 26 files

App.tsx

@@ -1,18 +1,17 @@
-
 import React, { useState, useRef } from 'react';
-import { Moon, Sun, Upload, FileText, Download, Share2, MessageSquare, AlertCircle, LayoutGrid, List, Grid, ChevronLeft, ArrowRight, X, BrainCircuit, BookOpen, Layers } from 'lucide-react';
+import { Moon, Sun, Upload, FileText, Download, Share2, MessageSquare, AlertCircle, LayoutGrid, List, Grid, ChevronLeft, ArrowRight, X, BrainCircuit, BookOpen, Layers, Key, ChevronDown } from 'lucide-react';
 import Background from './components/Background';
 import BentoCard from './components/BentoCard';
 import ChatBot from './components/ChatBot';
 import BlogView from './components/BlogView';
-import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure } from './types';
-import { generateBentoCards, expandBentoCard, chatWithDocument, analyzePaperStructure, generateSingleBlogSection } from './services/geminiService';
+import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure, GeminiModel } from './types';
+import { generateBentoCards, expandBentoCard, chatWithDocument, analyzePaperStructure, generateAndValidateSection, MODEL_INFO } from './services/aiService';
 
 const App: React.FC = () => {
   // Settings
   const [settings, setSettings] = useState<AppSettings>({
     apiKey: '',
-    model: 'gemini-flash-latest',
+    model: 'gemini-2.5-flash',
     theme: 'light',
     layoutMode: 'auto',
     useThinking: false
@@ -28,11 +27,13 @@ const App: React.FC = () => {
   const [blogSections, setBlogSections] = useState<BlogSection[]>([]);
   const [paperStructure, setPaperStructure] = useState<PaperStructure | null>(null);
   const [isBlogLoading, setIsBlogLoading] = useState(false);
-  const [blogLoadingStage, setBlogLoadingStage] = useState<'idle' | 'analyzing' | 'generating'>('idle');
+  const [blogLoadingStage, setBlogLoadingStage] = useState<'idle' | 'analyzing' | 'generating' | 'validating'>('idle');
   const [currentGeneratingSection, setCurrentGeneratingSection] = useState<number>(-1);
+  const [sectionStatus, setSectionStatus] = useState<string>('');
   const [status, setStatus] = useState<ProcessingStatus>({ state: 'idle' });
   const [paperContext, setPaperContext] = useState<string>(''); // Stores the raw text/base64
   const [paperTitle, setPaperTitle] = useState<string>('');
+  const [retryingSectionIndex, setRetryingSectionIndex] = useState<number>(-1);
   
   // Chat
   const [isChatOpen, setIsChatOpen] = useState(false);
@@ -40,6 +41,7 @@ const App: React.FC = () => {
   const [isChatProcessing, setIsChatProcessing] = useState(false);
 
   const gridRef = useRef<HTMLDivElement>(null);
+  const blogRef = useRef<HTMLDivElement>(null);
 
   const toggleTheme = () => {
     const newTheme = settings.theme === 'dark' ? 'light' : 'dark';
@@ -59,7 +61,7 @@ const App: React.FC = () => {
 
   const handleProcess = async () => {
     if (!settings.apiKey) {
-      setStatus({ state: 'error', message: "Please enter your Gemini API Key." });
+      setStatus({ state: 'error', message: 'Please enter your Gemini API Key.' });
       return;
     }
     
@@ -162,7 +164,7 @@ const App: React.FC = () => {
       }));
       setBlogSections(placeholderSections);
 
-      // Step 2: Generate each section progressively
+      // Step 2: Generate, validate, and repair each section progressively
       setBlogLoadingStage('generating');
       const paperContextInfo = {
         title: structure.paperTitle,
@@ -175,7 +177,7 @@ const App: React.FC = () => {
         setCurrentGeneratingSection(i);
         
         try {
-          const generatedSection = await generateSingleBlogSection(
+          const generatedSection = await generateAndValidateSection(
             settings.apiKey,
             settings.model,
             paperContext,
@@ -184,7 +186,17 @@ const App: React.FC = () => {
             structure.sections.length,
             paperContextInfo,
             true,
-            settings.useThinking
+            settings.useThinking,
+            2, // max repair attempts
+            (stage, message) => {
+              // Update UI with current status
+              if (stage === 'validating') {
+                setBlogLoadingStage('validating');
+              } else if (stage === 'generating' || stage === 'repairing') {
+                setBlogLoadingStage('generating');
+              }
+              setSectionStatus(message);
+            }
           );
 
           // Update the specific section in state
@@ -205,6 +217,7 @@ const App: React.FC = () => {
       }
 
       setCurrentGeneratingSection(-1);
+      setSectionStatus('');
       setBlogLoadingStage('idle');
 
     } catch (error: any) {
@@ -216,6 +229,59 @@ const App: React.FC = () => {
     }
   };
 
+  // Retry a failed section
+  const handleRetrySection = async (sectionIndex: number) => {
+    if (!paperStructure || !paperStructure.sections[sectionIndex]) {
+      console.error('Cannot retry: missing paper structure or section plan');
+      return;
+    }
+
+    setRetryingSectionIndex(sectionIndex);
+
+    try {
+      const sectionPlan = paperStructure.sections[sectionIndex];
+      const paperContextInfo = {
+        title: paperStructure.paperTitle,
+        abstract: paperStructure.paperAbstract,
+        mainContribution: paperStructure.mainContribution,
+        keyTerms: paperStructure.keyTerms
+      };
+
+      const generatedSection = await generateAndValidateSection(
+        settings.apiKey,
+        settings.model,
+        paperContext,
+        sectionPlan,
+        sectionIndex,
+        paperStructure.sections.length,
+        paperContextInfo,
+        true,
+        settings.useThinking,
+        2,
+        (stage, message) => {
+          setSectionStatus(message);
+        }
+      );
+
+      // Update the section in state
+      setBlogSections(prev => prev.map((section, idx) =>
+        idx === sectionIndex ? { ...generatedSection, isLoading: false, error: undefined } : section
+      ));
+      setSectionStatus('');
+    } catch (error: any) {
+      console.error(`Failed to retry section ${sectionIndex}:`, error);
+      setBlogSections(prev => prev.map((section, idx) =>
+        idx === sectionIndex ? {
+          ...section,
+          isLoading: false,
+          error: error.message || 'Retry failed. Please try again.'
+        } : section
+      ));
+    } finally {
+      setRetryingSectionIndex(-1);
+    }
+  };
+
   const handleExpandCard = async (card: BentoCardData) => {
     if (card.expandedContent || card.isLoadingDetails) return;
 
@@ -254,22 +320,70 @@ const App: React.FC = () => {
   };
 
   const handleExport = async () => {
-    if (!gridRef.current) return;
+    const targetRef = resultViewMode === 'blog' ? blogRef.current : gridRef.current;
+    if (!targetRef) return;
+    
+    // @ts-ignore
+    if (!window.html2canvas) {
+        alert("Export module not loaded yet.");
+        return;
+    }
+
     // @ts-ignore
-    if (window.html2canvas) {
-         // @ts-ignore
-        const canvas = await window.html2canvas(gridRef.current, {
-            backgroundColor: settings.theme === 'dark' ? '#0f172a' : '#f8fafc',
-            scale: 2,
-            useCORS: true, 
-            logging: false
+    const canvas = await window.html2canvas(targetRef, {
+        backgroundColor: settings.theme === 'dark' ? '#0f172a' : '#f8fafc',
+        scale: 2,
+        useCORS: true, 
+        logging: false,
+        windowWidth: targetRef.scrollWidth,
+        windowHeight: targetRef.scrollHeight,
+    });
+
+    if (resultViewMode === 'blog') {
+        // Export as PDF for blog view
+        // @ts-ignore
+        if (!window.jspdf) {
+            alert("PDF export module not loaded yet.");
+            return;
+        }
+        // @ts-ignore
+        const { jsPDF } = window.jspdf;
+        const imgData = canvas.toDataURL('image/png');
+        
+        // A4 dimensions in mm
+        const pdfWidth = 210;
+        const pdfHeight = 297;
+        
+        // Calculate the scaled dimensions to fit width
+        const ratio = pdfWidth / (canvas.width / 2); // Divide by scale factor (2)
+        const scaledHeight = (canvas.height / 2) * ratio;
+        
+        // Create PDF
+        const pdf = new jsPDF({
+            orientation: 'portrait',
+            unit: 'mm',
+            format: 'a4'
         });
+        
+        // Calculate how many pages we need
+        const pageCount = Math.ceil(scaledHeight / pdfHeight);
+        
+        for (let page = 0; page < pageCount; page++) {
+            if (page > 0) {
+                pdf.addPage();
+            }
+            // Position the image so the correct portion shows on each page
+            const yOffset = -(page * pdfHeight);
+            pdf.addImage(imgData, 'PNG', 0, yOffset, pdfWidth, scaledHeight);
+        }
+        
+        pdf.save('paper-blog.pdf');
+    } else {
+        // Export as PNG for grid view
         const link = document.createElement('a');
         link.download = 'bento-summary.png';
         link.href = canvas.toDataURL();
         link.click();
-    } else {
-        alert("Export module not loaded yet.");
     }
   };
 
@@ -355,68 +469,79 @@ const App: React.FC = () => {
               <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto font-light">
                 Upload your research paper (PDF) and instantly transform it into a rich, interactive Bento grid. 
                 <br className="hidden md:block" />
-                Powered by <span className="font-semibold text-brand-600 dark:text-brand-400">Gemini 3.0 Pro</span>.
+                Powered by <span className="font-semibold text-brand-600 dark:text-brand-400">Google Gemini</span>.
               </p>
             </div>
 
             <div className="w-full max-w-2xl space-y-6 p-8 glass-panel rounded-3xl shadow-2xl border border-gray-200 dark:border-white/10 backdrop-blur-xl bg-white/80 dark:bg-black/40">
-              {/* API Key */}
-              <div className="relative">
-                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                    <span className="text-xs font-bold bg-gray-200 dark:bg-gray-800 px-2 py-0.5 rounded text-gray-600 dark:text-gray-400">KEY</span>
-                 </div>
-                 <input 
-                  type="password" 
-                  placeholder="Enter Gemini API Key" 
-                  value={settings.apiKey}
-                  onChange={(e) => setSettings({...settings, apiKey: e.target.value})}
-                  className="w-full bg-white dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-xl py-4 pl-16 pr-4 focus:ring-2 focus:ring-brand-500 outline-none transition-all text-sm font-mono"
-                />
-              </div>
+              {/* API Keys & Model Selection */}
+              <div className="space-y-6">
+                {/* Model Selection Dropdown */}
+                <div className="space-y-2">
+                  <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1">
+                    Select Model
+                  </label>
+                  <div className="relative">
+                    <select
+                      value={settings.model}
+                      onChange={(e) => setSettings({ ...settings, model: e.target.value as GeminiModel })}
+                      className="w-full appearance-none bg-white dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-xl py-4 pl-4 pr-10 focus:ring-2 focus:ring-brand-500 outline-none transition-all text-sm font-medium text-gray-700 dark:text-gray-200"
+                    >
+                      <option value="gemini-2.5-flash">⚡ Gemini Flash (Fastest)</option>
+                      <option value="gemini-3-pro-preview">🧠 Gemini Pro (Best Reasoning)</option>
+                    </select>
+                    <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
+                      <ChevronDown size={16} />
+                    </div>
+                  </div>
+                </div>
 
-              {/* Model Select & Thinking Toggle */}
-              <div className="flex flex-col md:flex-row gap-3">
-                 <div className="grid grid-cols-2 gap-3 flex-grow">
-                   <button 
-                     onClick={() => setSettings({...settings, model: 'gemini-flash-latest'})}
-                     className={`py-3 px-4 rounded-xl text-sm font-semibold transition-all flex flex-col md:flex-row items-center justify-center gap-2 border ${settings.model === 'gemini-flash-latest' ? 'bg-brand-50 dark:bg-brand-900/20 border-brand-500 text-brand-700 dark:text-brand-400' : 'bg-gray-50 dark:bg-gray-800 border-transparent hover:bg-gray-100 dark:hover:bg-gray-700'}`}
-                   >
-                     <span>⚡ Flash</span>
-                     <span className="text-xs opacity-60 font-normal">(Fast)</span>
-                   </button>
-                   <button 
-                     onClick={() => setSettings({...settings, model: 'gemini-3-pro-preview'})}
-                     className={`py-3 px-4 rounded-xl text-sm font-semibold transition-all flex flex-col md:flex-row items-center justify-center gap-2 border ${settings.model === 'gemini-3-pro-preview' ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-500 text-purple-700 dark:text-purple-400' : 'bg-gray-50 dark:bg-gray-800 border-transparent hover:bg-gray-100 dark:hover:bg-gray-700'}`}
-                   >
-                     <span>🧠 Pro</span>
-                     <span className="text-xs opacity-60 font-normal">(Smart)</span>
-                   </button>
-                 </div>
+                {/* API Key Input */}
+                <div className="space-y-2">
+                  <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide ml-1">
+                    Gemini API Key
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                      <Key size={16} className="text-blue-500" />
+                    </div>
+                    <input
+                      type="password"
+                      placeholder="Enter your Gemini API Key"
+                      value={settings.apiKey}
+                      onChange={(e) => setSettings({ ...settings, apiKey: e.target.value })}
+                      className="w-full bg-white dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-xl py-4 pl-12 pr-4 outline-none transition-all text-sm font-mono focus:ring-2 focus:ring-blue-500"
+                    />
+                  </div>
+                  <p className="text-xs text-gray-400 px-1">
+                    Get your key from Google AI Studio
+                  </p>
+                </div>
+              </div>
                  
-                 {/* Thinking Toggle Switch */}
-                 <div 
-                    className={`
-                        flex items-center justify-between px-4 py-2 rounded-xl border transition-all md:min-w-[180px]
-                        ${settings.useThinking ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}
-                    `}
-                 >
-                     <div className="flex items-center gap-3 mr-4">
-                        <BrainCircuit size={20} className={settings.useThinking ? 'text-indigo-500 animate-pulse' : 'text-gray-400'} />
-                        <div className="flex flex-col leading-none">
-                             <span className={`text-sm font-bold ${settings.useThinking ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400'}`}>Thinking</span>
-                             <span className="text-[10px] opacity-60">32k Budget</span>
-                        </div>
-                     </div>
-
-                     <button
-                        onClick={() => setSettings(s => ({ ...s, useThinking: !s.useThinking }))}
-                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${settings.useThinking ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}
-                     >
-                        <span
-                            className={`${settings.useThinking ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out`}
-                        />
-                     </button>
-                 </div>
+              {/* Thinking Toggle Switch */}
+              <div 
+                className={`
+                    flex items-center justify-between px-4 py-2 rounded-xl border transition-all
+                    ${settings.useThinking ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}
+                `}
+              >
+                  <div className="flex items-center gap-3 mr-4">
+                    <BrainCircuit size={20} className={settings.useThinking ? 'text-indigo-500 animate-pulse' : 'text-gray-400'} />
+                    <div className="flex flex-col leading-none">
+                          <span className={`text-sm font-bold ${settings.useThinking ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-600 dark:text-gray-400'}`}>Thinking</span>
+                          <span className="text-[10px] opacity-60">32k Budget</span>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={() => setSettings(s => ({ ...s, useThinking: !s.useThinking }))}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${settings.useThinking ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}
+                  >
+                    <span
+                        className={`${settings.useThinking ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out`}
+                    />
+                  </button>
               </div>
 
               {/* PDF Upload - Main Action */}
@@ -606,6 +731,10 @@ const App: React.FC = () => {
                 loadingStage={blogLoadingStage}
                 currentSection={currentGeneratingSection}
                 paperStructure={paperStructure}
+                sectionStatus={sectionStatus}
+                onRetrySection={handleRetrySection}
+                retryingSectionIndex={retryingSectionIndex}
+                contentRef={blogRef}
               />
             )}
 

components/BlogSection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { BlogSection as BlogSectionType } from '../types';
 import MermaidDiagram from './MermaidDiagram';
@@ -6,7 +6,7 @@ import InteractiveChart from './InteractiveChart';
 import EquationBlock from './EquationBlock';
 import Collapsible from './Collapsible';
 import Tooltip from './Tooltip';
-import { Info, Lightbulb, AlertTriangle, BookOpen } from 'lucide-react';
+import { Info, Lightbulb, AlertTriangle, BookOpen, CheckCircle, XCircle, Shield, ChevronDown, Wrench } from 'lucide-react';
 
 interface Props {
   section: BlogSectionType;
@@ -14,6 +14,108 @@ interface Props {
   index: number;
 }
 
+// Validation Badge Component
+const ValidationBadge: React.FC<{ section: BlogSectionType }> = ({ section }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const validation = section.validationStatus;
+  
+  if (!validation?.isValidated) return null;
+
+  const getScoreColor = (score: number) => {
+    if (score >= 80) return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+    if (score >= 60) return 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800';
+    return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
+  };
+
+  const getScoreIcon = (score: number) => {
+    if (score >= 80) return <CheckCircle size={12} />;
+    if (score >= 60) return <AlertTriangle size={12} />;
+    return <XCircle size={12} />;
+  };
+
+  return (
+    <div className="mt-6">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={`
+          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all
+          ${getScoreColor(validation.overallScore)}
+          hover:opacity-80
+        `}
+      >
+        <Shield size={12} />
+        <span>Quality Score: {validation.overallScore}/100</span>
+        {validation.wasRepaired && (
+          <span className="flex items-center gap-1 ml-1 px-1.5 py-0.5 bg-white/50 dark:bg-black/20 rounded">
+            <Wrench size={10} />
+            Repaired
+          </span>
+        )}
+        <ChevronDown size={12} className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isExpanded && (
+        <div className="mt-3 p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 animate-in fade-in slide-in-from-top-2 duration-200">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Content Relevance */}
+            <div className={`p-3 rounded-lg border ${getScoreColor(validation.contentRelevance.score)}`}>
+              <div className="flex items-center gap-2 mb-2">
+                {getScoreIcon(validation.contentRelevance.score)}
+                <span className="font-semibold">Content Relevance</span>
+                <span className="ml-auto">{validation.contentRelevance.score}/100</span>
+              </div>
+              {validation.contentRelevance.issues.length > 0 && (
+                <ul className="text-xs space-y-1 opacity-80">
+                  {validation.contentRelevance.issues.slice(0, 3).map((issue, i) => (
+                    <li key={i} className="flex items-start gap-1">
+                      <span className="mt-1">•</span>
+                      <span>{issue}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {validation.contentRelevance.passed && validation.contentRelevance.issues.length === 0 && (
+                <p className="text-xs opacity-80">✓ Content verified against source paper</p>
+              )}
+            </div>
+
+            {/* Visualization Validity */}
+            <div className={`p-3 rounded-lg border ${getScoreColor(validation.visualizationValidity.score)}`}>
+              <div className="flex items-center gap-2 mb-2">
+                {getScoreIcon(validation.visualizationValidity.score)}
+                <span className="font-semibold">Visualization</span>
+                <span className="ml-auto">{validation.visualizationValidity.score}/100</span>
+              </div>
+              {validation.visualizationValidity.issues.length > 0 && (
+                <ul className="text-xs space-y-1 opacity-80">
+                  {validation.visualizationValidity.issues.slice(0, 3).map((issue, i) => (
+                    <li key={i} className="flex items-start gap-1">
+                      <span className="mt-1">•</span>
+                      <span>{issue}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {validation.visualizationValidity.passed && validation.visualizationValidity.issues.length === 0 && (
+                <p className="text-xs opacity-80">✓ Visualization syntax valid</p>
+              )}
+            </div>
+          </div>
+
+          {validation.wasRepaired && (
+            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+              <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                <Wrench size={12} />
+                This section was automatically repaired ({validation.repairAttempts} attempt{validation.repairAttempts !== 1 ? 's' : ''})
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
 const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
   const getMarginNoteIcon = (icon?: 'info' | 'warning' | 'tip' | 'note') => {
     switch (icon) {
@@ -42,10 +144,13 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
         
         {/* Technical Terms Legend */}
         {section.technicalTerms.length > 0 && (
-          <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
-            <h5 className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
-              Key Terms
-            </h5>
+          <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900/30 rounded-2xl border border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-1 h-4 bg-brand-500 rounded-full"></div>
+              <h5 className="text-sm font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">
+                Key Terms
+              </h5>
+            </div>
             <div className="flex flex-wrap gap-2">
               {section.technicalTerms.map((term, idx) => (
                 <Tooltip key={idx} term={term.term} definition={term.definition}>
@@ -71,39 +176,58 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
         {/* Main Content */}
         <article className="flex-1 min-w-0">
           {/* Section Header */}
-          <header className="mb-8">
-            <div className="flex items-center gap-4 mb-4">
-              <span className="flex-shrink-0 w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-brand-500/20">
+          <header className="mb-12">
+            <div className="flex items-start gap-6 mb-6">
+              <span className="flex-shrink-0 w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-brand-500/20 mt-1">
                 {index + 1}
               </span>
-              <h2 className="text-2xl md:text-3xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight">
-                {section.title}
-              </h2>
+              <div className="flex-1">
+                <h2 className="text-3xl md:text-4xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight mb-4 tracking-tight">
+                  {section.title}
+                </h2>
+                <div className="h-1 w-24 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full opacity-80" />
+              </div>
             </div>
-            <div className="w-20 h-1 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full" />
           </header>
 
           {/* Content */}
           <div className="prose prose-lg dark:prose-invert max-w-none 
-            prose-headings:font-display prose-headings:font-bold
-            prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4
-            prose-p:text-gray-700 prose-p:dark:text-gray-300 prose-p:leading-relaxed
-            prose-strong:text-gray-900 prose-strong:dark:text-white
-            prose-a:text-brand-600 prose-a:dark:text-brand-400 prose-a:no-underline hover:prose-a:underline
-            prose-blockquote:border-l-brand-500 prose-blockquote:bg-gray-50 prose-blockquote:dark:bg-gray-800/50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic
-            prose-code:bg-gray-100 prose-code:dark:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
-            prose-pre:bg-gray-900 prose-pre:dark:bg-black prose-pre:border prose-pre:border-gray-800
-            prose-li:text-gray-700 prose-li:dark:text-gray-300
+            prose-headings:font-display prose-headings:font-bold prose-headings:tracking-tight
+            prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4 prose-h3:text-gray-900 prose-h3:dark:text-gray-100
+            prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-3 prose-h4:text-gray-800 prose-h4:dark:text-gray-200
+            prose-p:font-serif prose-p:text-[1.125rem] prose-p:text-gray-700 prose-p:dark:text-gray-300 prose-p:leading-[1.85] prose-p:mb-6
+            prose-strong:font-semibold prose-strong:text-gray-900 prose-strong:dark:text-white
+            prose-em:text-gray-700 prose-em:dark:text-gray-300
+            prose-a:text-brand-600 prose-a:dark:text-brand-400 prose-a:no-underline prose-a:border-b prose-a:border-brand-300 prose-a:dark:border-brand-700 hover:prose-a:border-brand-500 hover:prose-a:dark:border-brand-400 prose-a:transition-colors
+            prose-blockquote:border-l-4 prose-blockquote:border-brand-500 prose-blockquote:bg-gradient-to-r prose-blockquote:from-brand-50 prose-blockquote:to-transparent prose-blockquote:dark:from-brand-900/20 prose-blockquote:dark:to-transparent prose-blockquote:py-4 prose-blockquote:px-6 prose-blockquote:my-8 prose-blockquote:rounded-r-xl prose-blockquote:font-serif prose-blockquote:italic prose-blockquote:text-xl prose-blockquote:leading-relaxed prose-blockquote:text-gray-700 prose-blockquote:dark:text-gray-300
+            prose-code:font-mono prose-code:bg-gray-100 prose-code:dark:bg-gray-800 prose-code:px-2 prose-code:py-1 prose-code:rounded-md prose-code:text-sm prose-code:text-brand-600 prose-code:dark:text-brand-400 prose-code:before:content-none prose-code:after:content-none prose-code:font-medium
+            prose-pre:bg-gray-900 prose-pre:dark:bg-black prose-pre:border prose-pre:border-gray-800 prose-pre:rounded-xl prose-pre:shadow-lg prose-pre:my-8
+            prose-li:font-serif prose-li:text-[1.1rem] prose-li:text-gray-700 prose-li:dark:text-gray-300 prose-li:leading-relaxed prose-li:my-2
+            prose-ul:my-6 prose-ul:pl-0
+            prose-ol:my-6 prose-ol:pl-0
+            prose-li:marker:text-brand-500 prose-li:marker:dark:text-brand-400
+            prose-img:rounded-2xl prose-img:shadow-xl prose-img:border prose-img:border-gray-200 prose-img:dark:border-gray-800 prose-img:my-10
+            prose-hr:my-12 prose-hr:border-gray-200 prose-hr:dark:border-gray-800
           ">
             {renderContent()}
           </div>
 
           {/* Visualization */}
           {section.visualizationType && section.visualizationType !== 'none' && (
-            <div className="my-10">
-              <div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-lg shadow-gray-200/50 dark:shadow-none">
+            <div className="my-12">
+              <div className="p-8 rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-900/50 border border-gray-200 dark:border-gray-700 shadow-lg shadow-gray-200/50 dark:shadow-none overflow-hidden">
+                {/* Visualization Header */}
+                <div className="flex items-center gap-2 mb-6 pb-4 border-b border-gray-100 dark:border-gray-800">
+                  <div className="w-2 h-2 rounded-full bg-brand-500"></div>
+                  <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                    {section.visualizationType === 'mermaid' ? 'Diagram' : 
+                     section.visualizationType === 'chart' ? 'Data Visualization' : 
+                     section.visualizationType === 'equation' ? 'Mathematical Formulation' : 'Visual'}
+                  </span>
+                </div>
+                
                 {section.visualizationType === 'mermaid' && section.visualizationData && (
-                  <div className="min-h-[200px]">
+                  <div className="min-h-[200px] flex items-center justify-center">
                     <MermaidDiagram chart={section.visualizationData} theme={theme} />
                   </div>
                 )}
@@ -113,7 +237,9 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
                 )}
                 
                 {section.visualizationType === 'equation' && section.visualizationData && (
-                  <EquationBlock equation={section.visualizationData} label={`${index + 1}`} />
+                  <div className="py-4">
+                    <EquationBlock equation={section.visualizationData} label={`${index + 1}`} />
+                  </div>
                 )}
               </div>
             </div>
@@ -133,6 +259,9 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
               ))}
             </div>
           )}
+
+          {/* Validation Badge */}
+          <ValidationBadge section={section} />
         </article>
 
         {/* Margin Notes */}

components/BlogView.tsx

@@ -2,108 +2,142 @@ import React, { useEffect, useState, useRef } from 'react';
 import { BlogSection as BlogSectionType, PaperStructure } from '../types';
 import BlogSectionComponent from './BlogSection';
 import Sidebar from './Sidebar';
-import { Clock, BookOpen, FileText, Share2, Download, Sparkles, CheckCircle2, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import { Clock, BookOpen, FileText, Share2, Download, Sparkles, CheckCircle2, Loader2, AlertCircle, RefreshCw, RotateCcw } from 'lucide-react';
 
 // Loading placeholder for sections being generated
-const SectionLoadingPlaceholder: React.FC<{ title: string; index: number; isCurrentlyGenerating: boolean }> = ({ 
+const SectionLoadingPlaceholder: React.FC<{ 
+  title: string; 
+  index: number; 
+  isCurrentlyGenerating: boolean;
+  statusMessage?: string;
+}> = ({ 
   title, 
   index, 
-  isCurrentlyGenerating 
+  isCurrentlyGenerating,
+  statusMessage
 }) => (
-  <section className="relative scroll-mt-32 animate-in fade-in duration-500">
-    <div className="flex gap-8">
+  <section className="relative scroll-mt-32 animate-in fade-in duration-500 mb-24">
+    <div className="flex flex-col md:flex-row gap-8">
       <article className="flex-1 min-w-0">
-        <header className="mb-8">
-          <div className="flex items-center gap-4 mb-4">
+        <header className="mb-12">
+          <div className="flex items-start gap-6 mb-6">
             <span className={`
-              flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg
+              flex-shrink-0 w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold text-xl shadow-lg
               ${isCurrentlyGenerating 
-                ? 'bg-gradient-to-br from-brand-500 to-purple-600 animate-pulse' 
-                : 'bg-gray-300 dark:bg-gray-700'
+                ? 'bg-gradient-to-br from-brand-500 to-purple-600 animate-pulse shadow-brand-500/20' 
+                : 'bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-600'
               }
             `}>
               {isCurrentlyGenerating ? (
-                <Loader2 size={20} className="animate-spin" />
+                <Loader2 size={24} className="animate-spin" />
               ) : (
                 index + 1
               )}
             </span>
-            <h2 className={`text-2xl md:text-3xl font-display font-bold leading-tight ${
-              isCurrentlyGenerating ? 'text-gray-900 dark:text-gray-50' : 'text-gray-400 dark:text-gray-600'
-            }`}>
-              {title}
-            </h2>
+            <div className="flex-1 pt-1">
+              <h2 className={`text-3xl md:text-4xl font-display font-bold leading-tight mb-4 ${
+                isCurrentlyGenerating ? 'text-gray-900 dark:text-gray-50' : 'text-gray-300 dark:text-gray-700'
+              }`}>
+                {title}
+              </h2>
+              <div className={`h-1 rounded-full max-w-[100px] ${
+                isCurrentlyGenerating 
+                  ? 'bg-gradient-to-r from-brand-500 to-purple-500 animate-pulse' 
+                  : 'bg-gray-100 dark:bg-gray-800'
+              }`} />
+            </div>
           </div>
-          <div className={`w-20 h-1 rounded-full ${
-            isCurrentlyGenerating 
-              ? 'bg-gradient-to-r from-brand-500 to-purple-500 animate-pulse' 
-              : 'bg-gray-200 dark:bg-gray-800'
-          }`} />
         </header>
 
         {/* Loading skeleton */}
-        <div className="space-y-4">
+        <div className="space-y-8 pl-0 md:pl-[4.5rem]">
           {isCurrentlyGenerating ? (
             <>
-              <div className="flex items-center gap-2 text-sm text-brand-600 dark:text-brand-400 mb-4">
-                <Loader2 size={14} className="animate-spin" />
-                <span>Generating content...</span>
+              <div className="flex items-center gap-3 text-sm font-medium text-brand-600 dark:text-brand-400 mb-6 px-4 py-2 rounded-lg bg-brand-50 dark:bg-brand-900/10 w-fit">
+                <Loader2 size={16} className="animate-spin" />
+                <span className="font-mono">{statusMessage || 'Generating content...'}</span>
               </div>
-              <div className="space-y-3">
+              
+              <div className="space-y-4 max-w-3xl">
                 <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-full animate-pulse" />
-                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-11/12 animate-pulse delay-75" />
-                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-4/5 animate-pulse delay-100" />
-                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-full animate-pulse delay-150" />
-                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-3/4 animate-pulse delay-200" />
+                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-[98%] animate-pulse delay-75" />
+                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-[95%] animate-pulse delay-100" />
+                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-[90%] animate-pulse delay-150" />
+                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded-lg w-[92%] animate-pulse delay-200" />
               </div>
-              <div className="mt-6 p-4 rounded-xl bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
-                <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse" />
+
+              <div className="mt-8 p-8 rounded-2xl bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">
+                <div className="h-40 bg-gray-200 dark:bg-gray-800 rounded-xl animate-pulse" />
               </div>
             </>
           ) : (
-            <div className="p-8 rounded-xl border-2 border-dashed border-gray-200 dark:border-gray-800 text-center">
-              <p className="text-gray-400 dark:text-gray-600 text-sm">
-                Waiting to be generated...
+            <div className="p-12 rounded-3xl border-2 border-dashed border-gray-200 dark:border-gray-800 text-center bg-gray-50/50 dark:bg-gray-900/20">
+              <p className="text-gray-400 dark:text-gray-600 font-medium">
+                Waiting to be analyzed...
               </p>
             </div>
           )}
         </div>
       </article>
     </div>
-
-    {/* Section Divider */}
-    <div className="my-16 flex items-center gap-4">
-      <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-gray-800 to-transparent" />
-    </div>
   </section>
 );
 
 // Error state for failed sections
-const SectionErrorState: React.FC<{ title: string; error: string; index: number }> = ({ title, error, index }) => (
-  <section className="relative scroll-mt-32">
+const SectionErrorState: React.FC<{ 
+  title: string; 
+  error: string; 
+  index: number;
+  onRetry?: () => void;
+  isRetrying?: boolean;
+}> = ({ title, error, index, onRetry, isRetrying }) => (
+  <section className="relative scroll-mt-32 mb-24">
     <div className="flex gap-8">
       <article className="flex-1 min-w-0">
         <header className="mb-8">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="flex-shrink-0 w-10 h-10 rounded-xl bg-red-500 flex items-center justify-center text-white font-bold text-lg shadow-lg">
-              <AlertCircle size={20} />
+          <div className="flex items-start gap-6 mb-4">
+            <span className="flex-shrink-0 w-12 h-12 rounded-2xl bg-red-500 flex items-center justify-center text-white font-bold text-lg shadow-lg">
+              {isRetrying ? <Loader2 size={24} className="animate-spin" /> : <AlertCircle size={24} />}
             </span>
-            <h2 className="text-2xl md:text-3xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight">
-              {title}
-            </h2>
+            <div className="flex-1">
+              <h2 className="text-3xl md:text-4xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight mb-2">
+                {title}
+              </h2>
+              <div className="h-1 w-20 bg-red-500/30 rounded-full" />
+            </div>
           </div>
         </header>
 
-        <div className="p-6 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
-          <div className="flex items-start gap-3">
-            <AlertCircle size={20} className="text-red-500 flex-shrink-0 mt-0.5" />
-            <div>
-              <p className="font-semibold text-red-700 dark:text-red-300">
+        <div className="p-6 rounded-2xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
+          <div className="flex items-start gap-4">
+            <AlertCircle size={24} className="text-red-500 flex-shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <p className="font-semibold text-red-700 dark:text-red-300 text-lg">
                 Failed to generate this section
               </p>
-              <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+              <p className="mt-2 text-sm text-red-600 dark:text-red-400 leading-relaxed">
                 {error}
               </p>
+              
+              {onRetry && (
+                <button
+                  onClick={onRetry}
+                  disabled={isRetrying}
+                  className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-800/40 text-red-700 dark:text-red-300 font-semibold text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isRetrying ? (
+                    <>
+                      <Loader2 size={16} className="animate-spin" />
+                      <span>Retrying...</span>
+                    </>
+                  ) : (
+                    <>
+                      <RotateCcw size={16} />
+                      <span>Try Again</span>
+                    </>
+                  )}
+                </button>
+              )}
             </div>
           </div>
         </div>
@@ -123,9 +157,13 @@ interface Props {
   onExport: () => void;
   onShare: () => void;
   isLoading?: boolean;
-  loadingStage?: 'idle' | 'analyzing' | 'generating';
+  loadingStage?: 'idle' | 'analyzing' | 'generating' | 'validating';
   currentSection?: number;
   paperStructure?: PaperStructure | null;
+  sectionStatus?: string;
+  onRetrySection?: (sectionIndex: number) => Promise<void>;
+  retryingSectionIndex?: number;
+  contentRef?: React.RefObject<HTMLDivElement>;
 }
 
 const BlogView: React.FC<Props> = ({ 
@@ -137,11 +175,16 @@ const BlogView: React.FC<Props> = ({
   isLoading = false,
   loadingStage = 'idle',
   currentSection = -1,
-  paperStructure = null
+  paperStructure = null,
+  sectionStatus = '',
+  onRetrySection,
+  retryingSectionIndex = -1,
+  contentRef
 }) => {
   const [activeSection, setActiveSection] = useState<string>(sections[0]?.id || '');
   const [readProgress, setReadProgress] = useState(0);
-  const contentRef = useRef<HTMLDivElement>(null);
+  const internalContentRef = useRef<HTMLDivElement>(null);
+  const effectiveContentRef = contentRef || internalContentRef;
 
   // Calculate reading time (rough estimate: 200 words per minute)
   const completedSections = sections.filter(s => !s.isLoading && s.content);
@@ -212,53 +255,83 @@ const BlogView: React.FC<Props> = ({
 
       {/* Main Content */}
       <div className="lg:ml-72 xl:mr-8">
-        <div ref={contentRef} className="max-w-3xl mx-auto px-6 py-8">
+        <div ref={effectiveContentRef} className="max-w-4xl mx-auto px-6 py-12 md:py-20">
           
           {/* Loading State - Paper Analysis */}
           {loadingStage === 'analyzing' && (
             <div className="flex flex-col items-center justify-center min-h-[60vh] animate-in fade-in duration-500">
               <div className="relative">
-                <div className="w-24 h-24 rounded-full bg-gradient-to-r from-brand-500 to-purple-600 animate-pulse flex items-center justify-center">
+                <div className="w-24 h-24 rounded-full bg-gradient-to-r from-brand-500 to-purple-600 animate-pulse flex items-center justify-center shadow-2xl shadow-brand-500/30">
                   <Sparkles size={40} className="text-white animate-bounce" />
                 </div>
                 <div className="absolute inset-0 rounded-full bg-gradient-to-r from-brand-500 to-purple-600 animate-ping opacity-20" />
               </div>
-              <h2 className="mt-8 text-2xl font-display font-bold text-gray-900 dark:text-white">
-                Analyzing Paper Structure
+              <h2 className="mt-8 text-3xl font-display font-bold text-gray-900 dark:text-white text-center">
+                Deconstructing Research
               </h2>
-              <p className="mt-3 text-gray-500 dark:text-gray-400 text-center max-w-md">
-                Understanding the paper's key contributions, methodology, and findings to create the optimal narrative structure...
+              <p className="mt-4 text-lg text-gray-500 dark:text-gray-400 text-center max-w-md font-light">
+                Analyzing the paper's structure to craft a comprehensive narrative...
               </p>
             </div>
           )}
 
           {/* Generation Progress Banner */}
-          {loadingStage === 'generating' && (
-            <div className="mb-8 p-4 rounded-2xl bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border border-brand-200 dark:border-brand-800 animate-in slide-in-from-top duration-500">
-              <div className="flex items-center gap-4">
+          {(loadingStage === 'generating' || loadingStage === 'validating') && (
+            <div className={`mb-12 p-6 rounded-2xl border animate-in slide-in-from-top duration-500 backdrop-blur-sm ${
+              loadingStage === 'validating' 
+                ? 'bg-amber-50/80 dark:bg-amber-900/10 border-amber-200 dark:border-amber-800'
+                : 'bg-brand-50/80 dark:bg-brand-900/10 border-brand-200 dark:border-brand-800'
+            }`}>
+              <div className="flex items-center gap-5">
                 <div className="flex-shrink-0">
-                  <div className="w-10 h-10 rounded-full bg-brand-500 flex items-center justify-center">
-                    <Loader2 size={20} className="text-white animate-spin" />
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center shadow-sm ${
+                    loadingStage === 'validating' ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-600' : 'bg-brand-100 dark:bg-brand-900/30 text-brand-600'
+                  }`}>
+                    {loadingStage === 'validating' ? (
+                      <CheckCircle2 size={24} className="animate-pulse" />
+                    ) : (
+                      <Loader2 size={24} className="animate-spin" />
+                    )}
                   </div>
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-semibold text-brand-700 dark:text-brand-300">
-                      Generating sections...
+                    <span className={`text-base font-semibold ${
+                      loadingStage === 'validating' 
+                        ? 'text-amber-800 dark:text-amber-300' 
+                        : 'text-brand-800 dark:text-brand-300'
+                    }`}>
+                      {loadingStage === 'validating' ? 'Validating scientific accuracy...' : 'Generating insights...'}
                     </span>
-                    <span className="text-sm text-brand-600 dark:text-brand-400">
+                    <span className={`text-sm font-medium font-mono ${
+                      loadingStage === 'validating' 
+                        ? 'text-amber-600 dark:text-amber-400' 
+                        : 'text-brand-600 dark:text-brand-400'
+                    }`}>
                       {completedCount} / {sections.length}
                     </span>
                   </div>
-                  <div className="h-2 bg-brand-100 dark:bg-brand-900/30 rounded-full overflow-hidden">
+                  <div className={`h-2 rounded-full overflow-hidden ${
+                    loadingStage === 'validating' 
+                      ? 'bg-amber-200 dark:bg-amber-900/30' 
+                      : 'bg-brand-200 dark:bg-brand-900/30'
+                  }`}>
                     <div 
-                      className="h-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-500"
+                      className={`h-full rounded-full transition-all duration-500 ${
+                        loadingStage === 'validating'
+                          ? 'bg-gradient-to-r from-amber-500 to-orange-500'
+                          : 'bg-gradient-to-r from-brand-500 to-purple-500'
+                      }`}
                       style={{ width: `${(completedCount / sections.length) * 100}%` }}
                     />
                   </div>
-                  {currentSection >= 0 && sections[currentSection] && (
-                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 truncate">
-                      Currently writing: <span className="font-medium">{sections[currentSection].title}</span>
+                  {sectionStatus ? (
+                    <p className="mt-2 text-sm text-gray-600 dark:text-gray-400 font-mono">
+                      {sectionStatus}
+                    </p>
+                  ) : currentSection >= 0 && sections[currentSection] && (
+                    <p className="mt-2 text-sm text-gray-600 dark:text-gray-400 truncate">
+                      Currently analyzing: <span className="font-medium text-gray-900 dark:text-gray-200">{sections[currentSection].title}</span>
                     </p>
                   )}
                 </div>
@@ -268,85 +341,84 @@ const BlogView: React.FC<Props> = ({
 
           {/* Article Header */}
           {(sections.length > 0 || paperStructure) && (
-            <header className="mb-16 animate-in fade-in slide-in-from-bottom-8 duration-700">
+            <header className="mb-20 animate-in fade-in slide-in-from-bottom-8 duration-700">
               {/* Paper Badge */}
-              <div className="flex items-center gap-2 mb-6">
-                <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300 text-xs font-semibold uppercase tracking-wider">
+              <div className="flex items-center gap-3 mb-8">
+                <span className="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs font-bold uppercase tracking-widest border border-gray-200 dark:border-gray-700">
                   <FileText size={12} />
-                  Research Summary
+                  Research Paper
+                </span>
+                <span className="h-px w-8 bg-gray-200 dark:bg-gray-700"></span>
+                <span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                   {new Date().toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}
                 </span>
-                {loadingStage === 'generating' && (
-                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 text-xs font-semibold">
-                    <Loader2 size={12} className="animate-spin" />
-                    Generating...
-                  </span>
-                )}
               </div>
 
               {/* Title */}
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-bold text-gray-900 dark:text-white leading-[1.1] mb-8">
+              <h1 className="text-4xl md:text-6xl lg:text-7xl font-display font-bold text-gray-900 dark:text-white leading-[1.1] mb-10 tracking-tight">
                 {(paperStructure?.paperTitle || paperTitle).replace('.pdf', '')}
               </h1>
 
               {/* Abstract Preview */}
               {paperStructure?.paperAbstract && (
-                <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed mb-8 italic border-l-4 border-brand-500 pl-4">
-                  {paperStructure.paperAbstract}
-                </p>
+                <div className="relative">
+                  <div className="absolute left-0 top-0 bottom-0 w-1 bg-brand-500 rounded-full opacity-30"></div>
+                  <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed pl-8 font-serif italic text-opacity-90">
+                    {paperStructure.paperAbstract}
+                  </p>
+                </div>
               )}
 
-              {/* Meta Info */}
-              <div className="flex flex-wrap items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
-                <div className="flex items-center gap-2">
-                  <Clock size={16} />
-                  <span>{readingTime} min read</span>
+              {/* Meta Info & Actions */}
+              <div className="mt-12 flex flex-wrap items-center justify-between gap-6 pt-8 border-t border-gray-100 dark:border-gray-800">
+                <div className="flex items-center gap-8 text-sm font-medium text-gray-500 dark:text-gray-400">
+                  <div className="flex items-center gap-2">
+                    <Clock size={18} className="text-brand-500" />
+                    <span>{readingTime} min read</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <BookOpen size={18} className="text-purple-500" />
+                    <span>{sections.length} sections</span>
+                  </div>
                 </div>
+                
                 <div className="flex items-center gap-2">
-                  <BookOpen size={16} />
-                  <span>{sections.length} sections</span>
-                </div>
-                {completedCount === sections.length && sections.length > 0 && (
-                  <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
-                    <CheckCircle2 size={16} />
-                    <span>Complete</span>
-                  </div>
-                )}
-                <div className="flex items-center gap-1 ml-auto">
                   <button 
                     onClick={onShare}
-                    className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                    title="Share"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium text-gray-700 dark:text-gray-300"
                   >
-                    <Share2 size={18} />
+                    <Share2 size={16} />
+                    Share
                   </button>
                   <button 
                     onClick={onExport}
-                    className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                    title="Export"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-gray-900 dark:bg-white text-white dark:text-gray-900 hover:opacity-90 transition-opacity text-sm font-medium"
                   >
-                    <Download size={18} />
+                    <Download size={16} />
+                    Export
                   </button>
                 </div>
               </div>
-
-              {/* Decorative Line */}
-              <div className="mt-10 flex items-center gap-4">
-                <div className="flex-1 h-px bg-gradient-to-r from-brand-500 via-purple-500 to-transparent" />
-                <div className="w-2 h-2 rounded-full bg-brand-500 animate-pulse" />
-              </div>
             </header>
           )}
 
           {/* Key Contribution Highlight */}
           {paperStructure?.mainContribution && (
-            <div className="mb-16 p-8 rounded-2xl bg-gradient-to-br from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border border-brand-200 dark:border-brand-800 shadow-xl shadow-brand-200/20 dark:shadow-none animate-in fade-in slide-in-from-bottom-4 duration-700">
-              <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400 mb-4">
-                <Sparkles size={14} />
-                Key Contribution
+            <div className="mb-24 relative overflow-hidden rounded-3xl bg-slate-900 dark:bg-slate-900 text-white p-8 md:p-12 shadow-2xl shadow-slate-900/20 animate-in fade-in slide-in-from-bottom-4 duration-700 group">
+              <div className="absolute top-0 right-0 p-32 bg-brand-500/20 rounded-full blur-3xl -mr-16 -mt-16 group-hover:bg-brand-500/30 transition-colors duration-1000"></div>
+              <div className="absolute bottom-0 left-0 p-24 bg-purple-500/20 rounded-full blur-3xl -ml-12 -mb-12 group-hover:bg-purple-500/30 transition-colors duration-1000"></div>
+              
+              <div className="relative z-10">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 rounded-lg bg-white/10 backdrop-blur-md border border-white/10">
+                    <Sparkles size={20} className="text-brand-300" />
+                  </div>
+                  <span className="text-sm font-bold uppercase tracking-widest text-brand-200">Core Contribution</span>
+                </div>
+                <p className="text-2xl md:text-3xl leading-relaxed font-display font-medium text-slate-50">
+                  {paperStructure.mainContribution}
+                </p>
               </div>
-              <p className="text-xl md:text-2xl leading-relaxed text-gray-800 dark:text-gray-200 font-medium">
-                {paperStructure.mainContribution}
-              </p>
             </div>
           )}
 
@@ -359,9 +431,16 @@ const BlogView: React.FC<Props> = ({
                     title={section.title} 
                     index={index}
                     isCurrentlyGenerating={index === currentSection}
+                    statusMessage={index === currentSection ? sectionStatus : undefined}
                   />
                 ) : section.error ? (
-                  <SectionErrorState title={section.title} error={section.error} index={index} />
+                  <SectionErrorState 
+                    title={section.title} 
+                    error={section.error} 
+                    index={index}
+                    onRetry={onRetrySection ? () => onRetrySection(index) : undefined}
+                    isRetrying={retryingSectionIndex === index}
+                  />
                 ) : (
                   <BlogSectionComponent 
                     section={section}

components/InteractiveChart.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ChartData } from '../types';
+import { AlertTriangle } from 'lucide-react';
 
 interface Props {
   data: ChartData;
@@ -10,6 +11,25 @@ interface Props {
 const InteractiveChart: React.FC<Props> = ({ data, theme }) => {
   const isDark = theme === 'dark';
   
+  // Validate data
+  if (!data || !data.data || data.data.length === 0) {
+    return (
+      <div className="w-full p-6 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+        <div className="flex items-start gap-3">
+          <AlertTriangle size={20} className="text-amber-500 flex-shrink-0 mt-0.5" />
+          <div>
+            <p className="font-semibold text-amber-700 dark:text-amber-300 text-sm">
+              No chart data available
+            </p>
+            <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
+              The chart could not be rendered because no data was provided.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
   // Default colors palette
   const defaultColors = [
     '#0ea5e9', // brand blue

components/MermaidDiagram.tsx

@@ -1,6 +1,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
+import { AlertTriangle } from 'lucide-react';
 
 interface Props {
   chart: string;
@@ -10,6 +11,7 @@ interface Props {
 const MermaidDiagram: React.FC<Props> = ({ chart, theme = 'light' }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string>('');
 
   useEffect(() => {
     mermaid.initialize({
@@ -24,25 +26,68 @@ const MermaidDiagram: React.FC<Props> = ({ chart, theme = 'light' }) => {
     const renderChart = async () => {
       if (!containerRef.current) return;
       
+      setError('');
+      
       try {
+        // Clean up the chart string - remove any markdown code fences
+        let cleanChart = chart.trim();
+        if (cleanChart.startsWith('```')) {
+          cleanChart = cleanChart.replace(/^```(?:mermaid)?\n?/, '').replace(/\n?```$/, '');
+        }
+        
         const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
         // Mermaid render returns an object with svg property in newer versions
-        const { svg } = await mermaid.render(id, chart);
+        const { svg } = await mermaid.render(id, cleanChart);
         setSvg(svg);
-      } catch (error) {
-        console.error('Mermaid failed to render:', error);
-        setSvg(''); // Clear on error
+      } catch (err: any) {
+        console.error('Mermaid failed to render:', err);
+        setError(err.message || 'Failed to render diagram');
+        setSvg('');
       }
     };
 
-    renderChart();
+    if (chart) {
+      renderChart();
+    }
   }, [chart, theme]);
 
-  if (!svg) return null;
+  if (error) {
+    return (
+      <div className="w-full p-6 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+        <div className="flex items-start gap-3">
+          <AlertTriangle size={20} className="text-amber-500 flex-shrink-0 mt-0.5" />
+          <div>
+            <p className="font-semibold text-amber-700 dark:text-amber-300 text-sm">
+              Diagram could not be rendered
+            </p>
+            <p className="mt-1 text-xs text-amber-600 dark:text-amber-400 font-mono">
+              {error}
+            </p>
+            <details className="mt-3">
+              <summary className="text-xs text-amber-600 dark:text-amber-400 cursor-pointer hover:underline">
+                Show raw diagram code
+              </summary>
+              <pre className="mt-2 p-3 bg-white dark:bg-gray-900 rounded-lg text-xs overflow-auto max-h-40 border border-amber-100 dark:border-amber-900">
+                {chart}
+              </pre>
+            </details>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className="w-full h-40 flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-gray-300 border-t-brand-500 rounded-full animate-spin" />
+      </div>
+    );
+  }
 
   return (
     <div 
-      className="w-full h-full flex items-center justify-center p-4 mermaid-container overflow-hidden"
+      className="w-full h-full flex items-center justify-center p-4 mermaid-container overflow-hidden [&_svg]:max-w-full [&_svg]:h-auto"
       ref={containerRef}
       dangerouslySetInnerHTML={{ __html: svg }}
     />

components/Sidebar.tsx

@@ -83,7 +83,7 @@ const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) =
                 
                 {isCollapsed ? (
                   <div className={`
-                    w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold
+                    w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold relative
                     ${isLoading ? 'bg-gray-200 dark:bg-gray-700' : ''}
                     ${isActive && !isLoading
                       ? 'bg-brand-500 text-white' 
@@ -95,11 +95,18 @@ const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) =
                     ) : (
                       index + 1
                     )}
+                    {/* Validation indicator dot */}
+                    {section.validationStatus?.isValidated && (
+                      <span className={`absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900 ${
+                        section.validationStatus.overallScore >= 80 ? 'bg-green-500' :
+                        section.validationStatus.overallScore >= 60 ? 'bg-amber-500' : 'bg-red-500'
+                      }`} />
+                    )}
                   </div>
                 ) : (
                   <div className="flex items-start gap-3">
                     <span className={`
-                      flex-shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-xs font-bold mt-0.5
+                      flex-shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-xs font-bold mt-0.5 relative
                       ${isLoading ? 'bg-gray-200 dark:bg-gray-700 animate-pulse' : ''}
                       ${isActive && !isLoading
                         ? 'bg-brand-500 text-white' 
@@ -114,13 +121,29 @@ const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) =
                         index + 1
                       )}
                     </span>
-                    <span className={`
-                      text-sm leading-snug transition-colors
-                      ${isLoading ? 'text-gray-400 dark:text-gray-600' : ''}
-                      ${isActive && !isLoading ? 'font-semibold' : 'font-medium'}
-                    `}>
-                      {section.title}
-                    </span>
+                    <div className="flex-1 min-w-0">
+                      <span className={`
+                        text-sm leading-snug transition-colors block
+                        ${isLoading ? 'text-gray-400 dark:text-gray-600' : ''}
+                        ${isActive && !isLoading ? 'font-semibold' : 'font-medium'}
+                      `}>
+                        {section.title}
+                      </span>
+                      {/* Validation score badge */}
+                      {section.validationStatus?.isValidated && (
+                        <span className={`inline-flex items-center gap-1 text-[10px] mt-0.5 px-1.5 py-0.5 rounded ${
+                          section.validationStatus.overallScore >= 80 
+                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' 
+                            : section.validationStatus.overallScore >= 60 
+                            ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400'
+                            : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
+                        }`}>
+                          {section.validationStatus.overallScore >= 80 ? '✓' : section.validationStatus.overallScore >= 60 ? '!' : '✗'}
+                          {section.validationStatus.overallScore}%
+                          {section.validationStatus.wasRepaired && ' 🔧'}
+                        </span>
+                      )}
+                    </div>
                   </div>
                 )}
               </button>

index.css

@@ -0,0 +1,220 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base Typography Improvements */
+body {
+	font-family: 'Inter', system-ui, -apple-system, sans-serif;
+	font-feature-settings: 'cv11', 'ss01';
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Improved serif font for content */
+.font-serif {
+	font-family: 'Georgia', 'Times New Roman', serif;
+	font-feature-settings: 'liga', 'kern';
+}
+
+/* Glass Panel Effect */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
+}
+
+.dark .glass-panel {
+  background: rgba(15, 23, 42, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+}
+
+/* Smooth Focus States */
+*:focus-visible {
+	outline: 2px solid rgba(99, 102, 241, 0.5);
+	outline-offset: 2px;
+}
+
+/* Better Text Selection */
+::selection {
+	background-color: rgba(99, 102, 241, 0.3);
+}
+
+.dark ::selection {
+	background-color: rgba(99, 102, 241, 0.4);
+}
+
+/* Improved Scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(156, 163, 175, 0.4);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(156, 163, 175, 0.6);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+	background: rgba(75, 85, 99, 0.5);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+	background: rgba(75, 85, 99, 0.7);
+}
+
+/* Blog Content Improvements */
+.prose {
+	--tw-prose-bullets: theme('colors.brand.500');
+	--tw-prose-counters: theme('colors.brand.600');
+}
+
+.dark .prose {
+	--tw-prose-invert-bullets: theme('colors.brand.400');
+	--tw-prose-invert-counters: theme('colors.brand.400');
+}
+
+/* List styling for better readability */
+.prose ul > li::marker {
+	color: var(--tw-prose-bullets);
+}
+
+.prose ol > li::marker {
+	color: var(--tw-prose-counters);
+	font-weight: 600;
+}
+
+/* Blockquote improvements */
+.prose blockquote {
+	position: relative;
+	quotes: none;
+}
+
+.prose blockquote::before {
+	content: '"';
+	position: absolute;
+	left: -0.5rem;
+	top: -0.5rem;
+	font-size: 3rem;
+	color: theme('colors.brand.200');
+	font-family: Georgia, serif;
+	line-height: 1;
+}
+
+.dark .prose blockquote::before {
+	color: theme('colors.brand.800');
+}
+
+/* Smooth animations */
+@keyframes fade-in-up {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in-up {
+	animation: fade-in-up 0.5s ease-out;
+}
+
+/* Pulse effect for loading states */
+@keyframes gentle-pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.7;
+	}
+}
+
+.animate-gentle-pulse {
+	animation: gentle-pulse 2s ease-in-out infinite;
+}
+
+/* Better link hover effect */
+.prose a {
+	transition: all 0.2s ease;
+}
+
+/* Code block improvements */
+.prose pre {
+	position: relative;
+}
+
+.prose pre code {
+	font-size: 0.875rem;
+	line-height: 1.7;
+}
+
+/* Improved heading spacing in blog content */
+.prose h2 {
+	margin-top: 2.5em;
+	margin-bottom: 0.75em;
+}
+
+.prose h3 {
+	margin-top: 2em;
+	margin-bottom: 0.5em;
+}
+
+.prose h4 {
+	margin-top: 1.5em;
+	margin-bottom: 0.5em;
+}
+
+/* First paragraph after heading - no margin top */
+.prose h2 + p,
+.prose h3 + p,
+.prose h4 + p {
+	margin-top: 0;
+}
+
+/* Better paragraph spacing */
+.prose p + p {
+	margin-top: 1.25em;
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+	.prose {
+		font-size: 1rem;
+	}
+	
+	.prose blockquote {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+	
+	.prose blockquote::before {
+		font-size: 2rem;
+		left: -0.25rem;
+	}
+}
+
+/* Print styles */
+@media print {
+	.glass-panel {
+		background: white;
+		backdrop-filter: none;
+		box-shadow: none;
+		border: 1px solid #e5e7eb;
+	}
+	
+	nav, aside, .no-print {
+		display: none !important;
+	}
+}

index.html

@@ -6,9 +6,10 @@
     <title>PaperStack</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
       body {
         font-family: 'Inter', sans-serif;
@@ -16,6 +17,12 @@
       h1, h2, h3, h4, h5, h6, .font-display {
         font-family: 'Space Grotesk', sans-serif;
       }
+      .font-serif {
+        font-family: 'Merriweather', serif;
+      }
+      .font-mono {
+        font-family: 'JetBrains Mono', monospace;
+      }
       /* Custom Scrollbar */
       ::-webkit-scrollbar {
         width: 8px;
@@ -150,15 +157,70 @@
         darkMode: 'class',
         theme: {
           extend: {
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+              serif: ['Merriweather', 'serif'],
+              display: ['Space Grotesk', 'sans-serif'],
+              mono: ['JetBrains Mono', 'monospace'],
+            },
             colors: {
               brand: {
-                50: '#f0f9ff',
-                100: '#e0f2fe',
-                500: '#0ea5e9',
-                600: '#0284c7',
-                900: '#0c4a6e',
+                50: '#eff6ff',
+                100: '#dbeafe',
+                200: '#bfdbfe',
+                300: '#93c5fd',
+                400: '#60a5fa',
+                500: '#3b82f6', // Blue-500
+                600: '#2563eb',
+                700: '#1d4ed8',
+                800: '#1e40af',
+                900: '#1e3a8a',
+                950: '#172554',
+              },
+              gray: {
+                 // Cool grays for a cleaner look
+                50: '#f9fafb',
+                100: '#f3f4f6',
+                200: '#e5e7eb',
+                300: '#d1d5db',
+                400: '#9ca3af',
+                500: '#6b7280',
+                600: '#4b5563',
+                700: '#374151',
+                800: '#1f2937',
+                900: '#111827',
+                950: '#030712',
               }
             },
+            typography: (theme) => ({
+              DEFAULT: {
+                css: {
+                  color: theme('colors.gray.700'),
+                  fontFamily: theme('fontFamily.serif'),
+                  a: {
+                    color: theme('colors.brand.600'),
+                    '&:hover': {
+                      color: theme('colors.brand.700'),
+                    },
+                  },
+                  h1: { fontFamily: theme('fontFamily.display') },
+                  h2: { fontFamily: theme('fontFamily.display') },
+                  h3: { fontFamily: theme('fontFamily.display') },
+                  h4: { fontFamily: theme('fontFamily.display') },
+                },
+              },
+              dark: {
+                css: {
+                  color: theme('colors.gray.300'),
+                  a: {
+                    color: theme('colors.brand.400'),
+                    '&:hover': {
+                      color: theme('colors.brand.300'),
+                    },
+                  },
+                }
+              }
+            }),
             animation: {
               'spin-slow': 'spin 20s linear infinite',
               'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',

package-lock.json

@@ -11,6 +11,7 @@
         "@google/genai": "^1.30.0",
         "lucide-react": "^0.554.0",
         "mermaid": "11.4.0",
+        "openai": "^4.77.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-markdown": "^10.1.0"
@@ -1622,12 +1623,21 @@
       "version": "22.19.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
       "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.13",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
+      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^4.0.4"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
@@ -1677,6 +1687,18 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1698,6 +1720,18 @@
         "node": ">= 14"
       }
     },
+    "node_modules/agentkeepalive": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
+      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "humanize-ms": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
@@ -1722,6 +1756,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -1826,6 +1866,19 @@
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001757",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
@@ -1941,6 +1994,18 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2556,6 +2621,15 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2584,6 +2658,20 @@
       "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
       "license": "(MPL-2.0 OR Apache-2.0)"
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2612,6 +2700,51 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -2674,6 +2807,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
@@ -2743,6 +2885,50 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data-encoder": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
+      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
+      "license": "MIT"
+    },
+    "node_modules/formdata-node": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
+      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "1.0.0",
+        "web-streams-polyfill": "4.0.0-beta.3"
+      },
+      "engines": {
+        "node": ">= 12.20"
+      }
+    },
+    "node_modules/formdata-node/node_modules/web-streams-polyfill": {
+      "version": "4.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
+      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -2770,6 +2956,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gaxios": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.3.tgz",
@@ -2809,6 +3004,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
@@ -2868,6 +3100,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gtoken": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz",
@@ -2887,6 +3131,45 @@
       "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
       "license": "MIT"
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -2950,6 +3233,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -3248,6 +3540,15 @@
         "node": ">= 18"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -3872,6 +4173,27 @@
       ],
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -3995,6 +4317,71 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/openai": {
+      "version": "4.104.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.104.0.tgz",
+      "integrity": "sha512-p99EFNsA/yX6UhVO93f5kJsDRLAg+CTA2RBqdHK4RtK8u5IJw32Hyb2dTGKbnnFmnuoBv5r7Z2CURI9sGZpSuA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/node": "^18.11.18",
+        "@types/node-fetch": "^2.6.4",
+        "abort-controller": "^3.0.0",
+        "agentkeepalive": "^4.2.1",
+        "form-data-encoder": "1.7.2",
+        "formdata-node": "^4.3.2",
+        "node-fetch": "^2.6.7"
+      },
+      "bin": {
+        "openai": "bin/cli"
+      },
+      "peerDependencies": {
+        "ws": "^8.18.0",
+        "zod": "^3.23.8"
+      },
+      "peerDependenciesMeta": {
+        "ws": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/openai/node_modules/@types/node": {
+      "version": "18.19.130",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.130.tgz",
+      "integrity": "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/openai/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/openai/node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "license": "MIT"
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -4604,6 +4991,12 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -4657,7 +5050,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unified": {
@@ -4952,6 +5344,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^19.2.0",
     "react": "^19.2.0",
     "@google/genai": "^1.30.0",
+    "openai": "^4.77.0",
     "lucide-react": "^0.554.0",
     "react-markdown": "^10.1.0",
     "mermaid": "11.4.0"

services/aiService.ts

@@ -0,0 +1,194 @@
+/**
+ * AI Service - Gemini-based implementation
+ */
+
+import { 
+  GeminiModel,
+  BentoCardData,
+  BlogSection,
+  ChatMessage,
+  PaperStructure,
+  SectionPlan,
+  ValidationStatus,
+  ChartData
+} from '../types';
+
+// Gemini functions
+import {
+  generateBentoCards as geminiGenerateBentoCards,
+  expandBentoCard as geminiExpandBentoCard,
+  chatWithDocument as geminiChatWithDocument,
+  analyzePaperStructure as geminiAnalyzePaperStructure,
+  generateSingleBlogSection as geminiGenerateSingleBlogSection,
+  validateVisualization as geminiValidateVisualization,
+  repairVisualization as geminiRepairVisualization,
+  generateAndValidateSection as geminiGenerateAndValidateSection,
+  // Legacy exports
+  validateBlogSection as geminiValidateBlogSection,
+  repairBlogSection as geminiRepairBlogSection
+} from './geminiService';
+
+/**
+ * Generate Bento Cards
+ */
+export const generateBentoCards = async (
+  apiKey: string,
+  model: GeminiModel,
+  content: string,
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<BentoCardData[]> => {
+  return geminiGenerateBentoCards(apiKey, model, content, isPdf, useThinking);
+};
+
+/**
+ * Expand Bento Card
+ */
+export const expandBentoCard = async (
+  apiKey: string,
+  model: GeminiModel,
+  topic: string,
+  detailPrompt: string,
+  originalContext: string,
+  useThinking: boolean = false
+): Promise<string> => {
+  return geminiExpandBentoCard(apiKey, model, topic, detailPrompt, originalContext, useThinking);
+};
+
+/**
+ * Chat with Document
+ */
+export const chatWithDocument = async (
+  apiKey: string,
+  model: GeminiModel,
+  history: ChatMessage[],
+  newMessage: string,
+  context: string
+): Promise<string> => {
+  return geminiChatWithDocument(apiKey, model, history, newMessage, context);
+};
+
+/**
+ * Analyze Paper Structure
+ */
+export const analyzePaperStructure = async (
+  apiKey: string,
+  model: GeminiModel,
+  content: string,
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<PaperStructure> => {
+  return geminiAnalyzePaperStructure(apiKey, model, content, isPdf, useThinking);
+};
+
+/**
+ * Generate Single Blog Section
+ */
+export const generateSingleBlogSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  content: string,
+  sectionPlan: SectionPlan,
+  sectionIndex: number,
+  totalSections: number,
+  paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<BlogSection> => {
+  return geminiGenerateSingleBlogSection(
+    apiKey, model, content, sectionPlan, sectionIndex,
+    totalSections, paperContext, isPdf, useThinking
+  );
+};
+
+/**
+ * Validate visualization only (local syntax check)
+ */
+export const validateVisualization = (section: BlogSection): ValidationStatus => {
+  return geminiValidateVisualization(section);
+};
+
+/**
+ * Repair visualization using AI
+ */
+export const repairVisualization = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  validationErrors: string[],
+  paperContent: string,
+  isPdf: boolean = false
+): Promise<{ visualizationData?: string; chartData?: ChartData }> => {
+  return geminiRepairVisualization(apiKey, model, section, validationErrors, paperContent, isPdf);
+};
+
+/**
+ * Validate Blog Section (legacy - now just validates visualization)
+ */
+export const validateBlogSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  sectionPlan: SectionPlan,
+  paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  paperContent: string,
+  isPdf: boolean = false
+): Promise<ValidationStatus> => {
+  return geminiValidateBlogSection(
+    apiKey, model, section, sectionPlan, paperContext, paperContent, isPdf
+  );
+};
+
+/**
+ * Repair Blog Section
+ */
+export const repairBlogSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  validationStatus: ValidationStatus & { correctedVisualization?: string },
+  sectionPlan: SectionPlan,
+  paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  paperContent: string,
+  isPdf: boolean = false
+): Promise<BlogSection> => {
+  return geminiRepairBlogSection(
+    apiKey, model, section, validationStatus, sectionPlan, paperContext, paperContent, isPdf
+  );
+};
+
+/**
+ * Generate and Validate Section
+ */
+export const generateAndValidateSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  content: string,
+  sectionPlan: SectionPlan,
+  sectionIndex: number,
+  totalSections: number,
+  paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  isPdf: boolean = false,
+  useThinking: boolean = false,
+  maxRepairAttempts: number = 2,
+  onStatusUpdate?: (status: 'generating' | 'validating' | 'repairing' | 'complete', message: string) => void
+): Promise<BlogSection> => {
+  return geminiGenerateAndValidateSection(
+    apiKey, model, content, sectionPlan, sectionIndex, totalSections,
+    paperContext, isPdf, useThinking, maxRepairAttempts, onStatusUpdate
+  );
+};
+
+// Model info
+export const MODEL_INFO: Record<GeminiModel, { name: string; description: string; icon: string }> = {
+  'gemini-2.5-flash': {
+    name: 'Gemini 2.5 Flash',
+    description: 'Fast & efficient',
+    icon: '⚡'
+  },
+  'gemini-3-pro-preview': {
+    name: 'Gemini 3 Pro',
+    description: 'Advanced reasoning',
+    icon: '🧠'
+  }
+};

services/geminiService.ts

@@ -1,6 +1,134 @@
 
 import { GoogleGenAI, Type, Schema } from "@google/genai";
-import { BentoCardData, BlogSection, ChatMessage, ModelType, ChartData, PaperStructure, SectionPlan } from "../types";
+import { BentoCardData, BlogSection, ChatMessage, GeminiModel, ChartData, PaperStructure, SectionPlan, ValidationStatus, ValidationResult } from "../types";
+
+// ============================================================================
+// RETRY UTILITY WITH EXPONENTIAL BACKOFF
+// ============================================================================
+
+interface RetryConfig {
+  maxRetries: number;
+  baseDelay: number; // in ms
+  maxDelay: number; // in ms
+  retryableErrors: string[];
+}
+
+const DEFAULT_RETRY_CONFIG: RetryConfig = {
+  maxRetries: 3,
+  baseDelay: 1000,
+  maxDelay: 10000,
+  retryableErrors: [
+    'RESOURCE_EXHAUSTED',
+    'UNAVAILABLE', 
+    'DEADLINE_EXCEEDED',
+    'INTERNAL',
+    'rate limit',
+    'quota',
+    '429',
+    '500',
+    '502',
+    '503',
+    '504',
+    'timeout',
+    'network',
+    'ECONNRESET',
+    'ETIMEDOUT'
+  ]
+};
+
+/**
+ * Check if an error is retryable
+ */
+const isRetryableError = (error: any, config: RetryConfig = DEFAULT_RETRY_CONFIG): boolean => {
+  const errorMessage = error?.message?.toLowerCase() || '';
+  const errorCode = error?.code?.toLowerCase() || '';
+  const statusCode = error?.status?.toString() || '';
+  
+  return config.retryableErrors.some(pattern => 
+    errorMessage.includes(pattern.toLowerCase()) ||
+    errorCode.includes(pattern.toLowerCase()) ||
+    statusCode.includes(pattern)
+  );
+};
+
+/**
+ * Sleep for a given duration
+ */
+const sleep = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * Calculate delay with exponential backoff and jitter
+ */
+const calculateBackoff = (attempt: number, config: RetryConfig): number => {
+  const exponentialDelay = config.baseDelay * Math.pow(2, attempt);
+  const jitter = Math.random() * 0.3 * exponentialDelay; // Add 0-30% jitter
+  return Math.min(exponentialDelay + jitter, config.maxDelay);
+};
+
+/**
+ * Execute a function with retry logic
+ */
+async function withRetry<T>(
+  fn: () => Promise<T>,
+  operationName: string,
+  config: RetryConfig = DEFAULT_RETRY_CONFIG
+): Promise<T> {
+  let lastError: any;
+  
+  for (let attempt = 0; attempt <= config.maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error: any) {
+      lastError = error;
+      
+      if (attempt === config.maxRetries || !isRetryableError(error, config)) {
+        // Don't retry if max attempts reached or error is not retryable
+        console.error(`[${operationName}] Failed after ${attempt + 1} attempt(s):`, error.message);
+        throw new Error(formatUserFriendlyError(error, operationName));
+      }
+      
+      const delay = calculateBackoff(attempt, config);
+      console.warn(`[${operationName}] Attempt ${attempt + 1} failed, retrying in ${Math.round(delay)}ms...`, error.message);
+      await sleep(delay);
+    }
+  }
+  
+  throw lastError;
+}
+
+/**
+ * Format error message for user display
+ */
+const formatUserFriendlyError = (error: any, operation: string): string => {
+  const errorMsg = error?.message?.toLowerCase() || '';
+  
+  if (errorMsg.includes('api key') || errorMsg.includes('invalid key') || errorMsg.includes('unauthorized')) {
+    return 'Invalid API key. Please check your Gemini API key and try again.';
+  }
+  
+  if (errorMsg.includes('rate limit') || errorMsg.includes('quota') || errorMsg.includes('429')) {
+    return 'API rate limit exceeded. Please wait a moment and try again.';
+  }
+  
+  if (errorMsg.includes('timeout') || errorMsg.includes('deadline')) {
+    return `Request timed out during ${operation}. The paper may be too large or complex. Try again or use a smaller document.`;
+  }
+  
+  if (errorMsg.includes('network') || errorMsg.includes('econnreset') || errorMsg.includes('etimedout')) {
+    return 'Network error. Please check your connection and try again.';
+  }
+  
+  if (errorMsg.includes('resource_exhausted')) {
+    return 'Server resources are temporarily exhausted. Please wait a few seconds and try again.';
+  }
+  
+  if (errorMsg.includes('unavailable') || errorMsg.includes('500') || errorMsg.includes('502') || errorMsg.includes('503')) {
+    return 'The AI service is temporarily unavailable. Please try again in a moment.';
+  }
+  
+  // Default message with original error
+  return error.message || `An error occurred during ${operation}. Please try again.`;
+};
 
 const RESPONSE_SCHEMA = {
   type: Type.ARRAY,
@@ -21,7 +149,7 @@ const RESPONSE_SCHEMA = {
 
 export const generateBentoCards = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   content: string,
   isPdf: boolean = false,
   useThinking: boolean = false
@@ -92,7 +220,7 @@ export const generateBentoCards = async (
     // but ensuring responseSchema is present usually works. 
   }
 
-  try {
+  return withRetry(async () => {
     const response = await ai.models.generateContent({
       model: effectiveModel,
       contents: { parts: promptParts },
@@ -121,16 +249,12 @@ export const generateBentoCards = async (
       expandedContent: undefined,
       isLoadingDetails: false
     }));
-
-  } catch (error: any) {
-    console.error("Gemini Bento Error:", error);
-    throw new Error(error.message || "Failed to generate bento cards");
-  }
+  }, 'generateBentoCards');
 };
 
 export const expandBentoCard = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   topic: string,
   detailPrompt: string,
   originalContext: string,
@@ -160,22 +284,26 @@ export const expandBentoCard = async (
     requestConfig.thinkingConfig = { thinkingBudget: 32768 };
   }
 
-  const response = await ai.models.generateContent({
-    model: effectiveModel,
-    contents: prompt,
-    config: requestConfig
-  });
+  return withRetry(async () => {
+    const response = await ai.models.generateContent({
+      model: effectiveModel,
+      contents: prompt,
+      config: requestConfig
+    });
 
-  return response.text || "Could not generate details.";
+    return response.text || "Could not generate details.";
+  }, 'expandBentoCard');
 };
 
 export const chatWithDocument = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   history: ChatMessage[],
   newMessage: string,
   context: string
 ): Promise<string> => {
+  if (!apiKey) throw new Error("API Key is missing");
+  
   const ai = new GoogleGenAI({ apiKey });
   
   const chatHistory = history.map(h => ({
@@ -183,16 +311,18 @@ export const chatWithDocument = async (
     parts: [{ text: h.text }]
   }));
 
-  const chat = ai.chats.create({
-    model: model,
-    history: chatHistory,
-    config: {
-      systemInstruction: `You are a helpful research assistant. You have read the following paper content/summary: ${context.substring(0, 20000)}. Answer the user's questions accurately based on this context.`
-    }
-  });
+  return withRetry(async () => {
+    const chat = ai.chats.create({
+      model: model,
+      history: chatHistory,
+      config: {
+        systemInstruction: `You are a helpful research assistant. You have read the following paper content/summary: ${context.substring(0, 20000)}. Answer the user's questions accurately based on this context.`
+      }
+    });
 
-  const result = await chat.sendMessage({ message: newMessage });
-  return result.text || "";
+    const result = await chat.sendMessage({ message: newMessage });
+    return result.text || "";
+  }, 'chatWithDocument');
 };
 
 // Paper Structure Analysis Schema
@@ -315,7 +445,7 @@ const SINGLE_SECTION_SCHEMA = {
  */
 export const analyzePaperStructure = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   content: string,
   isPdf: boolean = false,
   useThinking: boolean = false
@@ -385,7 +515,7 @@ export const analyzePaperStructure = async (
     requestConfig.thinkingConfig = { thinkingBudget: 16384 };
   }
 
-  try {
+  return withRetry(async () => {
     const response = await ai.models.generateContent({
       model: effectiveModel,
       contents: { parts: promptParts },
@@ -410,11 +540,7 @@ export const analyzePaperStructure = async (
         id: `plan-${index}-${Date.now()}`
       }))
     };
-
-  } catch (error: any) {
-    console.error("Paper Structure Analysis Error:", error);
-    throw new Error(error.message || "Failed to analyze paper structure");
-  }
+  }, 'analyzePaperStructure');
 };
 
 /**
@@ -422,7 +548,7 @@ export const analyzePaperStructure = async (
  */
 export const generateSingleBlogSection = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   content: string,
   sectionPlan: SectionPlan,
   sectionIndex: number,
@@ -525,7 +651,7 @@ export const generateSingleBlogSection = async (
     requestConfig.thinkingConfig = { thinkingBudget: 8192 };
   }
 
-  try {
+  return withRetry(async () => {
     const response = await ai.models.generateContent({
       model: effectiveModel,
       contents: { parts: promptParts },
@@ -560,11 +686,7 @@ export const generateSingleBlogSection = async (
         id: `collapse-${sectionIndex}-${secIdx}-${Date.now()}`
       }))
     };
-
-  } catch (error: any) {
-    console.error(`Section ${sectionIndex + 1} Generation Error:`, error);
-    throw new Error(error.message || `Failed to generate section: ${sectionPlan.title}`);
-  }
+  }, `generateSection:${sectionPlan.title}`);
 };
 
 /**
@@ -572,7 +694,7 @@ export const generateSingleBlogSection = async (
  */
 export const generateBlogContent = async (
   apiKey: string,
-  model: ModelType,
+  model: GeminiModel,
   content: string,
   isPdf: boolean = false,
   useThinking: boolean = false
@@ -606,3 +728,394 @@ export const generateBlogContent = async (
 
   return sections;
 };
+
+// ============================================================================
+// VALIDATION SYSTEM - Focused on Coded Visualizations Only
+// ============================================================================
+
+/**
+ * Validate Mermaid syntax locally (basic check)
+ */
+const validateMermaidSyntax = (mermaidCode: string): { valid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  if (!mermaidCode || mermaidCode.trim() === '') {
+    return { valid: true, errors: [] };
+  }
+
+  const code = mermaidCode.trim();
+  
+  // Check for valid start
+  const validStarts = ['graph ', 'flowchart ', 'sequenceDiagram', 'classDiagram', 'stateDiagram', 'erDiagram', 'gantt', 'pie', 'mindmap'];
+  const hasValidStart = validStarts.some(start => code.toLowerCase().startsWith(start.toLowerCase()));
+  
+  if (!hasValidStart) {
+    errors.push('Mermaid diagram must start with a valid type (graph, flowchart, sequenceDiagram, etc.)');
+  }
+
+  // Check for basic structure in graph/flowchart
+  if (code.toLowerCase().startsWith('graph') || code.toLowerCase().startsWith('flowchart')) {
+    const hasNodes = /\w+\[.+\]/.test(code) || /\w+\(.+\)/.test(code) || /\w+\{.+\}/.test(code);
+    if (!hasNodes && !code.includes('-->') && !code.includes('---')) {
+      errors.push('Graph should contain node definitions or connections');
+    }
+    
+    // Check for unbalanced brackets
+    const openBrackets = (code.match(/\[/g) || []).length;
+    const closeBrackets = (code.match(/\]/g) || []).length;
+    if (openBrackets !== closeBrackets) {
+      errors.push(`Unbalanced square brackets: ${openBrackets} open, ${closeBrackets} close`);
+    }
+  }
+
+  // Check for markdown code fences (common error)
+  if (code.includes('```')) {
+    errors.push('Mermaid code should not contain markdown code fences');
+  }
+
+  return { valid: errors.length === 0, errors };
+};
+
+/**
+ * Validate chart data structure
+ */
+const validateChartData = (chartData: ChartData | undefined): { valid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  if (!chartData) {
+    return { valid: true, errors: [] };
+  }
+
+  const validTypes = ['bar', 'line', 'pie', 'area', 'scatter'];
+  if (!validTypes.includes(chartData.type)) {
+    errors.push(`Invalid chart type: ${chartData.type}. Must be one of: ${validTypes.join(', ')}`);
+  }
+
+  if (!chartData.data || !Array.isArray(chartData.data)) {
+    errors.push('Chart data must be an array');
+  } else if (chartData.data.length === 0) {
+    errors.push('Chart data cannot be empty');
+  } else {
+    chartData.data.forEach((point, index) => {
+      if (typeof point.label !== 'string') {
+        errors.push(`Data point ${index}: label must be a string`);
+      }
+      if (typeof point.value !== 'number' || isNaN(point.value)) {
+        errors.push(`Data point ${index}: value must be a valid number`);
+      }
+    });
+
+    if (chartData.type === 'pie') {
+      const total = chartData.data.reduce((sum, p) => sum + (p.value || 0), 0);
+      if (total <= 0) {
+        errors.push('Pie chart values must sum to a positive number');
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+};
+
+/**
+ * Validate equation syntax (basic LaTeX check)
+ */
+const validateEquationSyntax = (equation: string): { valid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  if (!equation || equation.trim() === '') {
+    return { valid: true, errors: [] };
+  }
+
+  // Check for unbalanced braces
+  let braceCount = 0;
+  for (const char of equation) {
+    if (char === '{') braceCount++;
+    if (char === '}') braceCount--;
+    if (braceCount < 0) {
+      errors.push('Unbalanced curly braces: closing brace without opening');
+      break;
+    }
+  }
+  if (braceCount > 0) {
+    errors.push(`Unbalanced curly braces: ${braceCount} unclosed`);
+  }
+
+  return { valid: errors.length === 0, errors };
+};
+
+/**
+ * Validate visualization only - no content validation needed
+ */
+export const validateVisualization = (section: BlogSection): ValidationStatus => {
+  // Only validate if there's a coded visualization
+  if (section.visualizationType === 'none' || !section.visualizationType) {
+    return {
+      isValidated: true,
+      contentRelevance: { passed: true, score: 100, issues: [] },
+      visualizationValidity: { passed: true, score: 100, issues: [] },
+      overallScore: 100
+    };
+  }
+
+  let vizValidation = { valid: true, errors: [] as string[] };
+
+  switch (section.visualizationType) {
+    case 'mermaid':
+      vizValidation = validateMermaidSyntax(section.visualizationData || '');
+      break;
+    case 'chart':
+      vizValidation = validateChartData(section.chartData);
+      break;
+    case 'equation':
+      vizValidation = validateEquationSyntax(section.visualizationData || '');
+      break;
+  }
+
+  return {
+    isValidated: true,
+    contentRelevance: { passed: true, score: 100, issues: [] },
+    visualizationValidity: {
+      passed: vizValidation.valid,
+      score: vizValidation.valid ? 100 : 30,
+      issues: vizValidation.errors
+    },
+    overallScore: vizValidation.valid ? 100 : 50
+  };
+};
+
+// Visualization Repair Schema
+const VISUALIZATION_REPAIR_SCHEMA = {
+  type: Type.OBJECT,
+  properties: {
+    visualizationData: { 
+      type: Type.STRING, 
+      description: "The corrected visualization code (Mermaid, LaTeX equation, etc.)"
+    },
+    chartData: {
+      type: Type.OBJECT,
+      nullable: true,
+      properties: {
+        type: { type: Type.STRING, enum: ['bar', 'line', 'pie', 'area'] },
+        title: { type: Type.STRING },
+        data: {
+          type: Type.ARRAY,
+          items: {
+            type: Type.OBJECT,
+            properties: {
+              label: { type: Type.STRING },
+              value: { type: Type.NUMBER }
+            },
+            required: ['label', 'value']
+          }
+        },
+        xAxis: { type: Type.STRING },
+        yAxis: { type: Type.STRING }
+      }
+    }
+  },
+  required: ['visualizationData']
+};
+
+/**
+ * Repair only the visualization - focused and direct
+ */
+export const repairVisualization = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  validationErrors: string[],
+  paperContent: string,
+  isPdf: boolean = false
+): Promise<{ visualizationData?: string; chartData?: ChartData }> => {
+  if (!apiKey) throw new Error("API Key is missing");
+
+  const ai = new GoogleGenAI({ apiKey });
+
+  let promptParts: any[] = [];
+  
+  if (isPdf) {
+    promptParts.push({
+      inlineData: { data: paperContent, mimeType: "application/pdf" },
+    });
+  } else {
+    promptParts.push({ text: `Paper context: ${paperContent.substring(0, 20000)}` });
+  }
+
+  promptParts.push({
+    text: `
+    FIX THIS ${section.visualizationType?.toUpperCase()} VISUALIZATION.
+
+    ORIGINAL CODE:
+    """
+    ${section.visualizationType === 'chart' ? JSON.stringify(section.chartData, null, 2) : section.visualizationData}
+    """
+
+    ERRORS FOUND:
+    ${validationErrors.map(e => `- ${e}`).join('\n')}
+
+    ${section.visualizationType === 'mermaid' ? `
+    MERMAID REQUIREMENTS:
+    - Start with 'graph TD' or 'flowchart LR'
+    - Use proper syntax: A[Label] --> B[Label]
+    - No markdown code fences
+    - Balance all brackets
+    ` : ''}
+
+    ${section.visualizationType === 'chart' ? `
+    CHART REQUIREMENTS:
+    - Valid type: bar, line, pie, or area
+    - Data array with {label: string, value: number} objects
+    - Non-empty data array
+    ` : ''}
+
+    ${section.visualizationType === 'equation' ? `
+    EQUATION REQUIREMENTS:
+    - Valid LaTeX syntax
+    - Balanced curly braces
+    - Use \\frac{}{}, \\sum, \\alpha, etc.
+    ` : ''}
+
+    Return ONLY the fixed visualization.
+    `
+  });
+
+  const requestConfig: any = {
+    responseMimeType: "application/json",
+    responseSchema: VISUALIZATION_REPAIR_SCHEMA as any,
+    systemInstruction: "You fix visualization syntax errors. Return only the corrected code.",
+  };
+
+  return withRetry(async () => {
+    const response = await ai.models.generateContent({
+      model: model,
+      contents: { parts: promptParts },
+      config: requestConfig
+    });
+
+    const text = response.text;
+    if (!text) throw new Error("No repair response");
+
+    let jsonStr = text;
+    const jsonMatch = text.match(/\{.*\}/s);
+    if (jsonMatch) {
+      jsonStr = jsonMatch[0];
+    }
+
+    return JSON.parse(jsonStr);
+  }, 'repairVisualization');
+};
+
+/**
+ * Generate section content and validate/repair visualization only
+ */
+export const generateAndValidateSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  content: string,
+  sectionPlan: SectionPlan,
+  sectionIndex: number,
+  totalSections: number,
+  paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  isPdf: boolean = false,
+  useThinking: boolean = false,
+  maxRepairAttempts: number = 2,
+  onStatusUpdate?: (status: 'generating' | 'validating' | 'repairing' | 'complete', message: string) => void
+): Promise<BlogSection> => {
+  
+  // Step 1: Generate section content
+  onStatusUpdate?.('generating', `Generating section: ${sectionPlan.title}`);
+  let section = await generateSingleBlogSection(
+    apiKey, model, content, sectionPlan, sectionIndex, totalSections, paperContext, isPdf, useThinking
+  );
+
+  // Step 2: Validate visualization only (no content validation - trust the LLM)
+  const validation = validateVisualization(section);
+  section.validationStatus = validation;
+
+  // Step 3: Repair visualization if needed
+  if (!validation.visualizationValidity.passed && section.visualizationType !== 'none') {
+    let attempts = 0;
+    while (!validation.visualizationValidity.passed && attempts < maxRepairAttempts) {
+      attempts++;
+      onStatusUpdate?.('repairing', `Fixing visualization (attempt ${attempts}/${maxRepairAttempts})...`);
+      
+      try {
+        const repaired = await repairVisualization(
+          apiKey, model, section, validation.visualizationValidity.issues, content, isPdf
+        );
+        
+        // Apply the repaired visualization
+        if (section.visualizationType === 'chart' && repaired.chartData) {
+          section.chartData = repaired.chartData;
+        } else if (repaired.visualizationData) {
+          section.visualizationData = repaired.visualizationData;
+        }
+        
+        // Re-validate
+        const newValidation = validateVisualization(section);
+        section.validationStatus = {
+          ...newValidation,
+          wasRepaired: true,
+          repairAttempts: attempts
+        };
+        
+        if (newValidation.visualizationValidity.passed) break;
+      } catch (error) {
+        console.error('Visualization repair failed:', error);
+        break;
+      }
+    }
+  }
+
+  onStatusUpdate?.('complete', `Section complete`);
+  return section;
+};
+
+// Legacy exports for backward compatibility
+export const validateBlogSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  _sectionPlan: SectionPlan,
+  _paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  _paperContent: string,
+  _isPdf: boolean = false
+): Promise<ValidationStatus> => {
+  // Simplified: just do local validation
+  return validateVisualization(section);
+};
+
+export const repairBlogSection = async (
+  apiKey: string,
+  model: GeminiModel,
+  section: BlogSection,
+  validationStatus: ValidationStatus,
+  _sectionPlan: SectionPlan,
+  _paperContext: { title: string; abstract: string; mainContribution: string; keyTerms: string[] },
+  paperContent: string,
+  isPdf: boolean = false
+): Promise<BlogSection> => {
+  // Only repair visualization
+  if (validationStatus.visualizationValidity.passed) {
+    return section;
+  }
+  
+  try {
+    const repaired = await repairVisualization(
+      apiKey, model, section, validationStatus.visualizationValidity.issues, paperContent, isPdf
+    );
+    
+    return {
+      ...section,
+      visualizationData: repaired.visualizationData || section.visualizationData,
+      chartData: repaired.chartData || section.chartData,
+      validationStatus: {
+        ...validationStatus,
+        wasRepaired: true,
+        repairAttempts: (section.validationStatus?.repairAttempts || 0) + 1
+      }
+    };
+  } catch (error) {
+    return section;
+  }
+};

style.css

@@ -1,28 +1,22 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+body {
+	font-family: 'Inter', sans-serif;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom utilities if needed, but prefer Tailwind classes */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark .glass-panel {
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
 }

types.ts

@@ -6,7 +6,7 @@ export interface BentoCardData {
   type: 'stat' | 'concept' | 'quote' | 'insight' | 'process';
   colSpan: number; // 1 to 4
   rowSpan: number; // 1 to 2
-  detailPrompt: string; // The prompt to send to Gemini to get more details
+  detailPrompt: string; // The prompt to send to the AI to get more details
   mermaid?: string; // Mermaid JS diagram definition
   expandedContent?: string;
   isLoadingDetails?: boolean;
@@ -21,11 +21,12 @@ export interface ChatMessage {
   timestamp: number;
 }
 
-export type ModelType = 'gemini-flash-latest' | 'gemini-3-pro-preview';
+// Model types
+export type GeminiModel = 'gemini-2.5-flash' | 'gemini-3-pro-preview';
 
 export interface AppSettings {
   apiKey: string;
-  model: ModelType;
+  model: GeminiModel;
   theme: 'light' | 'dark';
   layoutMode: 'auto' | 'grid' | 'list';
   useThinking: boolean;
@@ -49,6 +50,24 @@ export interface BlogSection {
   collapsibleSections?: CollapsibleContent[];
   isLoading?: boolean;
   error?: string;
+  // Validation status
+  validationStatus?: ValidationStatus;
+}
+
+export interface ValidationStatus {
+  isValidated: boolean;
+  contentRelevance: ValidationResult;
+  visualizationValidity: ValidationResult;
+  overallScore: number; // 0-100
+  wasRepaired?: boolean;
+  repairAttempts?: number;
+}
+
+export interface ValidationResult {
+  passed: boolean;
+  score: number; // 0-100
+  issues: string[];
+  suggestions?: string[];
 }
 
 // Structure plan from paper analysis