checkpoint-2

App.tsx

@@ -1,11 +1,12 @@
 
 import React, { useState, useRef } from 'react';
-import { Moon, Sun, Upload, FileText, Download, Share2, MessageSquare, AlertCircle, LayoutGrid, List, Grid, ChevronLeft, ArrowRight, X, BrainCircuit } from 'lucide-react';
+import { Moon, Sun, Upload, FileText, Download, Share2, MessageSquare, AlertCircle, LayoutGrid, List, Grid, ChevronLeft, ArrowRight, X, BrainCircuit, BookOpen, Layers } from 'lucide-react';
 import Background from './components/Background';
 import BentoCard from './components/BentoCard';
 import ChatBot from './components/ChatBot';
-import { BentoCardData, ChatMessage, AppSettings, ProcessingStatus } from './types';
-import { generateBentoCards, expandBentoCard, chatWithDocument } from './services/geminiService';
+import BlogView from './components/BlogView';
+import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure } from './types';
+import { generateBentoCards, expandBentoCard, chatWithDocument, analyzePaperStructure, generateSingleBlogSection } from './services/geminiService';
 
 const App: React.FC = () => {
   // Settings
@@ -22,7 +23,13 @@ const App: React.FC = () => {
   
   // State
   const [view, setView] = useState<'input' | 'results'>('input');
+  const [resultViewMode, setResultViewMode] = useState<ViewMode>('grid');
   const [cards, setCards] = useState<BentoCardData[]>([]);
+  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 [currentGeneratingSection, setCurrentGeneratingSection] = useState<number>(-1);
   const [status, setStatus] = useState<ProcessingStatus>({ state: 'idle' });
   const [paperContext, setPaperContext] = useState<string>(''); // Stores the raw text/base64
   const [paperTitle, setPaperTitle] = useState<string>('');
@@ -108,7 +115,12 @@ const App: React.FC = () => {
 
   const handleReset = () => {
     setView('input');
+    setResultViewMode('grid');
     setCards([]);
+    setBlogSections([]);
+    setPaperStructure(null);
+    setBlogLoadingStage('idle');
+    setCurrentGeneratingSection(-1);
     setStatus({ state: 'idle' });
     setChatHistory([]);
     setIsChatOpen(false);
@@ -117,6 +129,93 @@ const App: React.FC = () => {
     setFile(null);
   };
 
+  const handleSwitchToBlogView = async () => {
+    // If we already have fully generated sections, just switch view
+    if (blogSections.length > 0 && blogSections.every(s => !s.isLoading)) {
+      setResultViewMode('blog');
+      return;
+    }
+
+    setIsBlogLoading(true);
+    setResultViewMode('blog');
+
+    try {
+      // Step 1: Analyze paper structure
+      setBlogLoadingStage('analyzing');
+      const structure = await analyzePaperStructure(
+        settings.apiKey,
+        settings.model,
+        paperContext,
+        true,
+        settings.useThinking
+      );
+      setPaperStructure(structure);
+      setPaperTitle(structure.paperTitle || paperTitle);
+
+      // Create placeholder sections with loading state
+      const placeholderSections: BlogSection[] = structure.sections.map((plan, index) => ({
+        id: plan.id,
+        title: plan.title,
+        content: '',
+        isLoading: true,
+        visualizationType: plan.suggestedVisualization
+      }));
+      setBlogSections(placeholderSections);
+
+      // Step 2: Generate each section progressively
+      setBlogLoadingStage('generating');
+      const paperContextInfo = {
+        title: structure.paperTitle,
+        abstract: structure.paperAbstract,
+        mainContribution: structure.mainContribution,
+        keyTerms: structure.keyTerms
+      };
+
+      for (let i = 0; i < structure.sections.length; i++) {
+        setCurrentGeneratingSection(i);
+        
+        try {
+          const generatedSection = await generateSingleBlogSection(
+            settings.apiKey,
+            settings.model,
+            paperContext,
+            structure.sections[i],
+            i,
+            structure.sections.length,
+            paperContextInfo,
+            true,
+            settings.useThinking
+          );
+
+          // Update the specific section in state
+          setBlogSections(prev => prev.map((section, idx) => 
+            idx === i ? { ...generatedSection, isLoading: false } : section
+          ));
+        } catch (sectionError: any) {
+          // Mark section as errored but continue with others
+          setBlogSections(prev => prev.map((section, idx) => 
+            idx === i ? { 
+              ...section, 
+              isLoading: false, 
+              error: sectionError.message,
+              content: `Failed to generate this section: ${sectionError.message}` 
+            } : section
+          ));
+        }
+      }
+
+      setCurrentGeneratingSection(-1);
+      setBlogLoadingStage('idle');
+
+    } catch (error: any) {
+      console.error('Failed to generate blog view:', error);
+      setStatus({ state: 'error', message: 'Failed to analyze paper: ' + error.message });
+      setBlogLoadingStage('idle');
+    } finally {
+      setIsBlogLoading(false);
+    }
+  };
+
   const handleExpandCard = async (card: BentoCardData) => {
     if (card.expandedContent || card.isLoadingDetails) return;
 
@@ -403,49 +502,112 @@ const App: React.FC = () => {
         {/* Results View */}
         {view === 'results' && (
           <div className="animate-in fade-in slide-in-from-bottom-8 duration-700">
-             {/* Controls */}
-            <div className="flex justify-between items-center mb-6">
-                <h2 className="text-2xl font-display font-bold flex items-center gap-3">
-                  Summary Grid
-                  {settings.useThinking && (
-                    <span className="text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-full border border-indigo-200 dark:border-indigo-800 flex items-center gap-1">
-                      <BrainCircuit size={12} /> Deep Thought
-                    </span>
+            {/* View Mode Toggle - Grid vs Blog */}
+            <div className="flex justify-center mb-8">
+              <div className="inline-flex items-center p-1.5 rounded-2xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                <button
+                  onClick={() => setResultViewMode('grid')}
+                  className={`
+                    flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300
+                    ${resultViewMode === 'grid' 
+                      ? 'bg-white dark:bg-gray-900 text-brand-600 dark:text-brand-400 shadow-lg' 
+                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                    }
+                  `}
+                >
+                  <Layers size={18} />
+                  <span>Bento Grid</span>
+                </button>
+                <button
+                  onClick={handleSwitchToBlogView}
+                  disabled={isBlogLoading && resultViewMode !== 'blog'}
+                  className={`
+                    flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300
+                    ${resultViewMode === 'blog' 
+                      ? 'bg-white dark:bg-gray-900 text-brand-600 dark:text-brand-400 shadow-lg' 
+                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+                    }
+                    disabled:opacity-50
+                  `}
+                >
+                  {isBlogLoading && resultViewMode !== 'blog' ? (
+                    <>
+                      <div className="w-4 h-4 border-2 border-gray-400 border-t-brand-500 rounded-full animate-spin" />
+                      <span>Analyzing...</span>
+                    </>
+                  ) : (
+                    <>
+                      <BookOpen size={18} />
+                      <span>Blog View</span>
+                    </>
                   )}
-                </h2>
-                <div className="flex gap-2">
-                    <button onClick={handleShare} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
-                        <Share2 size={18} />
-                    </button>
-                    <button onClick={handleExport} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
-                        <Download size={18} />
-                    </button>
-                    <div className="w-px h-8 bg-gray-200 dark:bg-gray-700 mx-2"></div>
-                     <button onClick={() => setSettings({...settings, layoutMode: 'grid'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'grid' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
-                        <Grid size={18} />
-                    </button>
-                     <button onClick={() => setSettings({...settings, layoutMode: 'list'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'list' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
-                        <List size={18} />
-                    </button>
-                </div>
+                </button>
+              </div>
             </div>
 
-            {/* Grid */}
-            <div 
-              ref={gridRef}
-              className="grid grid-cols-1 md:grid-cols-4 auto-rows-[minmax(180px,auto)] gap-4 md:gap-6 p-1 grid-flow-dense"
-            >
-              {cards.map((card) => (
-                <BentoCard 
-                  key={card.id} 
-                  card={card} 
-                  onExpand={handleExpandCard} 
-                  onRate={handleRateCard}
-                  onResize={handleResizeCard}
-                  layoutMode={settings.layoutMode}
-                />
-              ))}
-            </div>
+            {/* Grid View */}
+            {resultViewMode === 'grid' && (
+              <>
+                {/* Controls */}
+                <div className="flex justify-between items-center mb-6">
+                    <h2 className="text-2xl font-display font-bold flex items-center gap-3">
+                      Summary Grid
+                      {settings.useThinking && (
+                        <span className="text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-full border border-indigo-200 dark:border-indigo-800 flex items-center gap-1">
+                          <BrainCircuit size={12} /> Deep Thought
+                        </span>
+                      )}
+                    </h2>
+                    <div className="flex gap-2">
+                        <button onClick={handleShare} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
+                            <Share2 size={18} />
+                        </button>
+                        <button onClick={handleExport} className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 transition-colors text-gray-600 dark:text-gray-300">
+                            <Download size={18} />
+                        </button>
+                        <div className="w-px h-8 bg-gray-200 dark:bg-gray-700 mx-2"></div>
+                         <button onClick={() => setSettings({...settings, layoutMode: 'grid'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'grid' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
+                            <Grid size={18} />
+                        </button>
+                         <button onClick={() => setSettings({...settings, layoutMode: 'list'})} className={`p-2 rounded-lg border transition-colors ${settings.layoutMode === 'list' ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-500 text-brand-600' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500'}`}>
+                            <List size={18} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Grid */}
+                <div 
+                  ref={gridRef}
+                  className="grid grid-cols-1 md:grid-cols-4 auto-rows-[minmax(180px,auto)] gap-4 md:gap-6 p-1 grid-flow-dense"
+                >
+                  {cards.map((card) => (
+                    <BentoCard 
+                      key={card.id} 
+                      card={card} 
+                      onExpand={handleExpandCard} 
+                      onRate={handleRateCard}
+                      onResize={handleResizeCard}
+                      layoutMode={settings.layoutMode}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+
+            {/* Blog View */}
+            {resultViewMode === 'blog' && (
+              <BlogView 
+                sections={blogSections}
+                paperTitle={paperStructure?.paperTitle || paperTitle}
+                theme={settings.theme}
+                onExport={handleExport}
+                onShare={handleShare}
+                isLoading={isBlogLoading}
+                loadingStage={blogLoadingStage}
+                currentSection={currentGeneratingSection}
+                paperStructure={paperStructure}
+              />
+            )}
 
             {/* Floating Chat Trigger */}
             <button 

components/BlogSection.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { BlogSection as BlogSectionType } from '../types';
+import MermaidDiagram from './MermaidDiagram';
+import InteractiveChart from './InteractiveChart';
+import EquationBlock from './EquationBlock';
+import Collapsible from './Collapsible';
+import Tooltip from './Tooltip';
+import { Info, Lightbulb, AlertTriangle, BookOpen } from 'lucide-react';
+
+interface Props {
+  section: BlogSectionType;
+  theme: 'light' | 'dark';
+  index: number;
+}
+
+const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
+  const getMarginNoteIcon = (icon?: 'info' | 'warning' | 'tip' | 'note') => {
+    switch (icon) {
+      case 'warning':
+        return <AlertTriangle size={14} className="text-amber-500" />;
+      case 'tip':
+        return <Lightbulb size={14} className="text-green-500" />;
+      case 'info':
+        return <Info size={14} className="text-blue-500" />;
+      default:
+        return <BookOpen size={14} className="text-gray-400" />;
+    }
+  };
+
+  // Apply tooltips to content
+  const renderContent = () => {
+    if (!section.technicalTerms || section.technicalTerms.length === 0) {
+      return <ReactMarkdown>{section.content}</ReactMarkdown>;
+    }
+
+    // For complex tooltip integration, we'll render ReactMarkdown
+    // and let users hover on specially marked terms
+    return (
+      <div className="relative">
+        <ReactMarkdown>{section.content}</ReactMarkdown>
+        
+        {/* 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="flex flex-wrap gap-2">
+              {section.technicalTerms.map((term, idx) => (
+                <Tooltip key={idx} term={term.term} definition={term.definition}>
+                  <span className="inline-flex items-center px-2.5 py-1 rounded-lg bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300 text-sm font-medium cursor-help">
+                    {term.term}
+                  </span>
+                </Tooltip>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <section 
+      id={`section-${section.id}`}
+      className="relative scroll-mt-32 animate-in fade-in slide-in-from-bottom-4 duration-700"
+      style={{ animationDelay: `${index * 100}ms` }}
+    >
+      <div className="flex gap-8">
+        {/* 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">
+                {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>
+            <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
+          ">
+            {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">
+                {section.visualizationType === 'mermaid' && section.visualizationData && (
+                  <div className="min-h-[200px]">
+                    <MermaidDiagram chart={section.visualizationData} theme={theme} />
+                  </div>
+                )}
+                
+                {section.visualizationType === 'chart' && section.chartData && (
+                  <InteractiveChart data={section.chartData} theme={theme} />
+                )}
+                
+                {section.visualizationType === 'equation' && section.visualizationData && (
+                  <EquationBlock equation={section.visualizationData} label={`${index + 1}`} />
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Collapsible Deep Dives */}
+          {section.collapsibleSections && section.collapsibleSections.length > 0 && (
+            <div className="mt-8 space-y-4">
+              {section.collapsibleSections.map((collapsible, idx) => (
+                <Collapsible 
+                  key={collapsible.id} 
+                  title={collapsible.title}
+                  variant={idx === 0 ? 'deep-dive' : 'default'}
+                >
+                  <ReactMarkdown>{collapsible.content}</ReactMarkdown>
+                </Collapsible>
+              ))}
+            </div>
+          )}
+        </article>
+
+        {/* Margin Notes */}
+        {section.marginNotes && section.marginNotes.length > 0 && (
+          <aside className="hidden xl:block w-64 flex-shrink-0">
+            <div className="sticky top-32 space-y-4">
+              {section.marginNotes.map((note, idx) => (
+                <div 
+                  key={note.id}
+                  className="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-right-4 duration-500"
+                  style={{ animationDelay: `${(index * 100) + (idx * 50)}ms` }}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                      {getMarginNoteIcon(note.icon)}
+                    </div>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+                      {note.text}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </aside>
+        )}
+      </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-300 dark:via-gray-700 to-transparent" />
+        <div className="flex gap-1">
+          <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700" />
+          <div className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-600" />
+          <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700" />
+        </div>
+        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
+      </div>
+    </section>
+  );
+};
+
+export default BlogSectionComponent;
+

components/BlogView.tsx

@@ -0,0 +1,399 @@
+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';
+
+// Loading placeholder for sections being generated
+const SectionLoadingPlaceholder: React.FC<{ title: string; index: number; isCurrentlyGenerating: boolean }> = ({ 
+  title, 
+  index, 
+  isCurrentlyGenerating 
+}) => (
+  <section className="relative scroll-mt-32 animate-in fade-in duration-500">
+    <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 flex items-center justify-center text-white font-bold text-lg shadow-lg
+              ${isCurrentlyGenerating 
+                ? 'bg-gradient-to-br from-brand-500 to-purple-600 animate-pulse' 
+                : 'bg-gray-300 dark:bg-gray-700'
+              }
+            `}>
+              {isCurrentlyGenerating ? (
+                <Loader2 size={20} 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>
+          <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">
+          {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>
+              <div className="space-y-3">
+                <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>
+              <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>
+            </>
+          ) : (
+            <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...
+              </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">
+    <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} />
+            </span>
+            <h2 className="text-2xl md:text-3xl font-display font-bold text-gray-900 dark:text-gray-50 leading-tight">
+              {title}
+            </h2>
+          </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">
+                Failed to generate this section
+              </p>
+              <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                {error}
+              </p>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+
+    <div className="my-16 flex items-center gap-4">
+      <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
+    </div>
+  </section>
+);
+
+interface Props {
+  sections: BlogSectionType[];
+  paperTitle: string;
+  theme: 'light' | 'dark';
+  onExport: () => void;
+  onShare: () => void;
+  isLoading?: boolean;
+  loadingStage?: 'idle' | 'analyzing' | 'generating';
+  currentSection?: number;
+  paperStructure?: PaperStructure | null;
+}
+
+const BlogView: React.FC<Props> = ({ 
+  sections, 
+  paperTitle, 
+  theme, 
+  onExport, 
+  onShare,
+  isLoading = false,
+  loadingStage = 'idle',
+  currentSection = -1,
+  paperStructure = null
+}) => {
+  const [activeSection, setActiveSection] = useState<string>(sections[0]?.id || '');
+  const [readProgress, setReadProgress] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Calculate reading time (rough estimate: 200 words per minute)
+  const completedSections = sections.filter(s => !s.isLoading && s.content);
+  const totalWords = completedSections.reduce((acc, section) => {
+    return acc + (section.content?.split(/\s+/).length || 0);
+  }, 0);
+  const readingTime = Math.max(1, Math.ceil(totalWords / 200));
+  
+  // Count completed sections
+  const completedCount = sections.filter(s => !s.isLoading && !s.error).length;
+
+  // Intersection Observer for active section tracking
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '-20% 0px -60% 0px',
+      threshold: 0
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const id = entry.target.id.replace('section-', '');
+          setActiveSection(id);
+        }
+      });
+    }, options);
+
+    sections.forEach((section) => {
+      const element = document.getElementById(`section-${section.id}`);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, [sections]);
+
+  // Scroll progress tracking
+  useEffect(() => {
+    const handleScroll = () => {
+      const winScroll = document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      setReadProgress(scrolled);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      {/* Reading Progress Bar */}
+      <div className="fixed top-0 left-0 right-0 h-1 bg-gray-200 dark:bg-gray-800 z-50">
+        <div 
+          className="h-full bg-gradient-to-r from-brand-500 via-purple-500 to-pink-500 transition-all duration-150"
+          style={{ width: `${readProgress}%` }}
+        />
+      </div>
+
+      {/* Sidebar Navigation */}
+      {sections.length > 0 && (
+        <Sidebar 
+          sections={sections} 
+          activeSection={activeSection}
+          onSectionClick={setActiveSection}
+        />
+      )}
+
+      {/* Main Content */}
+      <div className="lg:ml-72 xl:mr-8">
+        <div ref={contentRef} className="max-w-3xl mx-auto px-6 py-8">
+          
+          {/* 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">
+                  <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>
+              <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>
+            </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">
+                <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>
+                </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>
+                    <span className="text-sm 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-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-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>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Article Header */}
+          {(sections.length > 0 || paperStructure) && (
+            <header className="mb-16 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">
+                  <FileText size={12} />
+                  Research Summary
+                </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">
+                {(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>
+              )}
+
+              {/* 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>
+                </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"
+                  >
+                    <Share2 size={18} />
+                  </button>
+                  <button 
+                    onClick={onExport}
+                    className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                    title="Export"
+                  >
+                    <Download size={18} />
+                  </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>
+              <p className="text-xl md:text-2xl leading-relaxed text-gray-800 dark:text-gray-200 font-medium">
+                {paperStructure.mainContribution}
+              </p>
+            </div>
+          )}
+
+          {/* Sections */}
+          <div className="space-y-4">
+            {sections.map((section, index) => (
+              <div key={section.id}>
+                {section.isLoading ? (
+                  <SectionLoadingPlaceholder 
+                    title={section.title} 
+                    index={index}
+                    isCurrentlyGenerating={index === currentSection}
+                  />
+                ) : section.error ? (
+                  <SectionErrorState title={section.title} error={section.error} index={index} />
+                ) : (
+                  <BlogSectionComponent 
+                    section={section}
+                    theme={theme}
+                    index={index}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Footer */}
+          <footer className="mt-20 pt-10 border-t border-gray-200 dark:border-gray-800">
+            <div className="text-center">
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                Generated with PaperStack • Powered by Gemini AI
+              </p>
+              <div className="flex justify-center gap-4">
+                <button 
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  className="px-6 py-3 rounded-xl bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-semibold transition-colors"
+                >
+                  Back to Top ↑
+                </button>
+              </div>
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogView;
+

components/Collapsible.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { ChevronDown, Lightbulb, BookOpen, Info } from 'lucide-react';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  variant?: 'default' | 'info' | 'deep-dive';
+}
+
+const Collapsible: React.FC<Props> = ({ 
+  title, 
+  children, 
+  defaultOpen = false,
+  variant = 'default'
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'info':
+        return {
+          wrapper: 'border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10',
+          header: 'hover:bg-blue-100/50 dark:hover:bg-blue-900/20',
+          icon: <Info size={16} className="text-blue-500" />,
+          title: 'text-blue-700 dark:text-blue-300'
+        };
+      case 'deep-dive':
+        return {
+          wrapper: 'border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10',
+          header: 'hover:bg-purple-100/50 dark:hover:bg-purple-900/20',
+          icon: <Lightbulb size={16} className="text-purple-500" />,
+          title: 'text-purple-700 dark:text-purple-300'
+        };
+      default:
+        return {
+          wrapper: 'border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/30',
+          header: 'hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
+          icon: <BookOpen size={16} className="text-gray-500" />,
+          title: 'text-gray-700 dark:text-gray-300'
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  return (
+    <div className={`rounded-xl border overflow-hidden transition-all duration-300 ${styles.wrapper}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          w-full flex items-center justify-between p-4 text-left
+          transition-colors duration-200 ${styles.header}
+        `}
+      >
+        <div className="flex items-center gap-3">
+          {styles.icon}
+          <span className={`font-semibold text-sm ${styles.title}`}>
+            {title}
+          </span>
+        </div>
+        <ChevronDown 
+          size={18}
+          className={`
+            transition-transform duration-300 ease-out text-gray-400
+            ${isOpen ? 'rotate-180' : ''}
+          `}
+        />
+      </button>
+      
+      <div 
+        className={`
+          overflow-hidden transition-all duration-300 ease-out
+          ${isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}
+        `}
+      >
+        <div className="p-4 pt-0 border-t border-gray-100 dark:border-gray-800">
+          <div className="pt-4 prose prose-sm dark:prose-invert max-w-none">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collapsible;
+

components/EquationBlock.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Copy, Check } from 'lucide-react';
+
+interface Props {
+  equation: string;
+  label?: string;
+  inline?: boolean;
+}
+
+const EquationBlock: React.FC<Props> = ({ equation, label, inline = false }) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(equation);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Simple LaTeX-like rendering (for demonstration)
+  // In production, integrate KaTeX for proper math rendering
+  const formatEquation = (eq: string): string => {
+    return eq
+      .replace(/\^(\{[^}]+\}|\d)/g, '<sup>$1</sup>')
+      .replace(/\_(\{[^}]+\}|\d)/g, '<sub>$1</sub>')
+      .replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '<span class="frac"><span>$1</span><span>$2</span></span>')
+      .replace(/\\sqrt\{([^}]+)\}/g, '√($1)')
+      .replace(/\\sum/g, 'Σ')
+      .replace(/\\prod/g, 'Π')
+      .replace(/\\int/g, '∫')
+      .replace(/\\infty/g, '∞')
+      .replace(/\\alpha/g, 'α')
+      .replace(/\\beta/g, 'β')
+      .replace(/\\gamma/g, 'γ')
+      .replace(/\\delta/g, 'δ')
+      .replace(/\\theta/g, 'θ')
+      .replace(/\\lambda/g, 'λ')
+      .replace(/\\mu/g, 'μ')
+      .replace(/\\sigma/g, 'σ')
+      .replace(/\\pi/g, 'π')
+      .replace(/\\omega/g, 'ω')
+      .replace(/\\partial/g, '∂')
+      .replace(/\\nabla/g, '∇')
+      .replace(/\\cdot/g, '·')
+      .replace(/\\times/g, '×')
+      .replace(/\\leq/g, '≤')
+      .replace(/\\geq/g, '≥')
+      .replace(/\\neq/g, '≠')
+      .replace(/\\approx/g, '≈')
+      .replace(/\\rightarrow/g, '→')
+      .replace(/\\leftarrow/g, '←')
+      .replace(/\\Rightarrow/g, '⇒')
+      .replace(/\\in/g, '∈')
+      .replace(/\\forall/g, '∀')
+      .replace(/\\exists/g, '∃');
+  };
+
+  if (inline) {
+    return (
+      <span 
+        className="inline-flex items-center px-2 py-0.5 mx-1 font-mono text-sm bg-gray-100 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
+        dangerouslySetInnerHTML={{ __html: formatEquation(equation) }}
+      />
+    );
+  }
+
+  return (
+    <div className="relative group my-6">
+      <div className="flex items-stretch rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
+        {/* Equation Number/Label */}
+        {label && (
+          <div className="flex items-center px-4 bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+            <span className="text-xs font-mono text-gray-500 dark:text-gray-400">
+              ({label})
+            </span>
+          </div>
+        )}
+        
+        {/* Equation Content */}
+        <div className="flex-1 flex items-center justify-center py-6 px-8">
+          <div 
+            className="font-mono text-lg md:text-xl text-gray-800 dark:text-gray-200 tracking-wide"
+            dangerouslySetInnerHTML={{ __html: formatEquation(equation) }}
+          />
+        </div>
+        
+        {/* Copy Button */}
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+          title="Copy equation"
+        >
+          {copied ? (
+            <Check size={14} className="text-green-500" />
+          ) : (
+            <Copy size={14} className="text-gray-400" />
+          )}
+        </button>
+      </div>
+      
+      {/* Decorative elements */}
+      <div className="absolute -left-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-brand-400 to-purple-400 rounded-full opacity-60" />
+    </div>
+  );
+};
+
+export default EquationBlock;
+

components/InteractiveChart.tsx

@@ -0,0 +1,315 @@
+import React from 'react';
+import { ChartData } from '../types';
+
+interface Props {
+  data: ChartData;
+  theme: 'light' | 'dark';
+}
+
+// Simple SVG-based chart implementation that works without external dependencies
+const InteractiveChart: React.FC<Props> = ({ data, theme }) => {
+  const isDark = theme === 'dark';
+  
+  // Default colors palette
+  const defaultColors = [
+    '#0ea5e9', // brand blue
+    '#8b5cf6', // purple
+    '#10b981', // emerald
+    '#f59e0b', // amber
+    '#ef4444', // red
+    '#ec4899', // pink
+    '#06b6d4', // cyan
+    '#84cc16', // lime
+  ];
+  
+  const colors = data.colors || defaultColors;
+  const maxValue = Math.max(...data.data.map(d => d.value));
+  const chartHeight = 200;
+  const chartWidth = 400;
+  const barWidth = Math.min(60, (chartWidth - 40) / data.data.length - 10);
+
+  const renderBarChart = () => (
+    <svg viewBox={`0 0 ${chartWidth} ${chartHeight + 60}`} className="w-full h-auto">
+      {/* Y-axis labels */}
+      {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => (
+        <g key={i}>
+          <text
+            x="30"
+            y={chartHeight - (ratio * chartHeight) + 5}
+            className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-500'}`}
+            textAnchor="end"
+          >
+            {Math.round(maxValue * ratio)}
+          </text>
+          <line
+            x1="40"
+            y1={chartHeight - (ratio * chartHeight)}
+            x2={chartWidth - 10}
+            y2={chartHeight - (ratio * chartHeight)}
+            className={isDark ? 'stroke-gray-700' : 'stroke-gray-200'}
+            strokeDasharray="4,4"
+          />
+        </g>
+      ))}
+      
+      {/* Bars */}
+      {data.data.map((item, index) => {
+        const barHeight = (item.value / maxValue) * chartHeight;
+        const x = 50 + index * ((chartWidth - 60) / data.data.length);
+        const y = chartHeight - barHeight;
+        
+        return (
+          <g key={index} className="group cursor-pointer">
+            {/* Bar */}
+            <rect
+              x={x}
+              y={y}
+              width={barWidth}
+              height={barHeight}
+              fill={colors[index % colors.length]}
+              rx="4"
+              className="transition-all duration-300 hover:opacity-80"
+            />
+            
+            {/* Value on hover */}
+            <text
+              x={x + barWidth / 2}
+              y={y - 8}
+              textAnchor="middle"
+              className={`text-[11px] font-bold opacity-0 group-hover:opacity-100 transition-opacity ${isDark ? 'fill-gray-200' : 'fill-gray-700'}`}
+            >
+              {item.value}
+            </text>
+            
+            {/* Label */}
+            <text
+              x={x + barWidth / 2}
+              y={chartHeight + 20}
+              textAnchor="middle"
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-600'}`}
+            >
+              {item.label.length > 10 ? item.label.substring(0, 10) + '...' : item.label}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+
+  const renderLineChart = () => {
+    const points = data.data.map((item, index) => {
+      const x = 50 + index * ((chartWidth - 80) / (data.data.length - 1 || 1));
+      const y = chartHeight - (item.value / maxValue) * chartHeight;
+      return { x, y, ...item };
+    });
+
+    const pathD = points
+      .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+      .join(' ');
+
+    // Area fill path
+    const areaD = `${pathD} L ${points[points.length - 1]?.x || 0} ${chartHeight} L ${points[0]?.x || 0} ${chartHeight} Z`;
+
+    return (
+      <svg viewBox={`0 0 ${chartWidth} ${chartHeight + 60}`} className="w-full h-auto">
+        {/* Grid lines */}
+        {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => (
+          <g key={i}>
+            <text
+              x="30"
+              y={chartHeight - (ratio * chartHeight) + 5}
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-500'}`}
+              textAnchor="end"
+            >
+              {Math.round(maxValue * ratio)}
+            </text>
+            <line
+              x1="40"
+              y1={chartHeight - (ratio * chartHeight)}
+              x2={chartWidth - 10}
+              y2={chartHeight - (ratio * chartHeight)}
+              className={isDark ? 'stroke-gray-700' : 'stroke-gray-200'}
+              strokeDasharray="4,4"
+            />
+          </g>
+        ))}
+
+        {/* Area fill */}
+        <path
+          d={areaD}
+          fill={colors[0]}
+          fillOpacity="0.1"
+        />
+
+        {/* Line */}
+        <path
+          d={pathD}
+          fill="none"
+          stroke={colors[0]}
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Points and labels */}
+        {points.map((point, index) => (
+          <g key={index} className="group cursor-pointer">
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r="6"
+              fill={colors[0]}
+              className="transition-all duration-200 hover:r-8"
+            />
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r="3"
+              fill={isDark ? '#1e293b' : 'white'}
+            />
+            
+            {/* Tooltip on hover */}
+            <text
+              x={point.x}
+              y={point.y - 14}
+              textAnchor="middle"
+              className={`text-[11px] font-bold opacity-0 group-hover:opacity-100 transition-opacity ${isDark ? 'fill-gray-200' : 'fill-gray-700'}`}
+            >
+              {point.value}
+            </text>
+            
+            {/* X-axis label */}
+            <text
+              x={point.x}
+              y={chartHeight + 20}
+              textAnchor="middle"
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-600'}`}
+            >
+              {point.label.length > 8 ? point.label.substring(0, 8) + '..' : point.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    );
+  };
+
+  const renderPieChart = () => {
+    const total = data.data.reduce((sum, item) => sum + item.value, 0);
+    const centerX = 150;
+    const centerY = 120;
+    const radius = 80;
+    let startAngle = -90;
+
+    return (
+      <svg viewBox="0 0 300 280" className="w-full h-auto max-w-[300px] mx-auto">
+        {data.data.map((item, index) => {
+          const angle = (item.value / total) * 360;
+          const endAngle = startAngle + angle;
+          
+          const startRad = (startAngle * Math.PI) / 180;
+          const endRad = (endAngle * Math.PI) / 180;
+          
+          const x1 = centerX + radius * Math.cos(startRad);
+          const y1 = centerY + radius * Math.sin(startRad);
+          const x2 = centerX + radius * Math.cos(endRad);
+          const y2 = centerY + radius * Math.sin(endRad);
+          
+          const largeArc = angle > 180 ? 1 : 0;
+          
+          const pathD = `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+          
+          const midAngle = startAngle + angle / 2;
+          const midRad = (midAngle * Math.PI) / 180;
+          const labelRadius = radius + 25;
+          const labelX = centerX + labelRadius * Math.cos(midRad);
+          const labelY = centerY + labelRadius * Math.sin(midRad);
+          
+          startAngle = endAngle;
+          
+          return (
+            <g key={index} className="group cursor-pointer">
+              <path
+                d={pathD}
+                fill={colors[index % colors.length]}
+                className="transition-all duration-200 hover:opacity-80"
+                style={{ transformOrigin: `${centerX}px ${centerY}px` }}
+              />
+            </g>
+          );
+        })}
+        
+        {/* Center circle for donut effect */}
+        <circle
+          cx={centerX}
+          cy={centerY}
+          r={radius * 0.5}
+          className={isDark ? 'fill-gray-900' : 'fill-white'}
+        />
+        
+        {/* Legend */}
+        <g transform={`translate(10, ${centerY * 2 + 20})`}>
+          {data.data.map((item, index) => (
+            <g key={index} transform={`translate(${index * 90}, 0)`}>
+              <rect
+                x="0"
+                y="0"
+                width="12"
+                height="12"
+                rx="2"
+                fill={colors[index % colors.length]}
+              />
+              <text
+                x="18"
+                y="10"
+                className={`text-[10px] ${isDark ? 'fill-gray-300' : 'fill-gray-600'}`}
+              >
+                {item.label.length > 8 ? item.label.substring(0, 8) + '..' : item.label}
+              </text>
+            </g>
+          ))}
+        </g>
+      </svg>
+    );
+  };
+
+  const renderChart = () => {
+    switch (data.type) {
+      case 'bar':
+        return renderBarChart();
+      case 'line':
+      case 'area':
+        return renderLineChart();
+      case 'pie':
+        return renderPieChart();
+      default:
+        return renderBarChart();
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {/* Chart Title */}
+      {data.title && (
+        <h4 className="text-center text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
+          {data.title}
+        </h4>
+      )}
+      
+      {/* Chart */}
+      <div className="relative">
+        {renderChart()}
+      </div>
+      
+      {/* Axis Labels */}
+      {(data.xAxis || data.yAxis) && (
+        <div className="flex justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
+          {data.yAxis && <span className="italic">{data.yAxis}</span>}
+          {data.xAxis && <span className="italic">{data.xAxis}</span>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InteractiveChart;
+

components/Sidebar.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { BookOpen, ChevronRight, Loader2, CheckCircle } from 'lucide-react';
+import { BlogSection } from '../types';
+
+interface Props {
+  sections: BlogSection[];
+  activeSection: string;
+  onSectionClick: (id: string) => void;
+}
+
+const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const handleClick = (id: string) => {
+    onSectionClick(id);
+    const element = document.getElementById(`section-${id}`);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <nav 
+      className={`
+        hidden lg:block fixed left-0 top-24 h-[calc(100vh-8rem)] z-40
+        transition-all duration-300 ease-out
+        ${isCollapsed ? 'w-16' : 'w-72'}
+      `}
+    >
+      <div className="h-full flex flex-col ml-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6 pr-4">
+          {!isCollapsed && (
+            <div className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
+              <BookOpen size={14} />
+              <span>Contents</span>
+            </div>
+          )}
+          <button
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <ChevronRight 
+              size={16} 
+              className={`transition-transform duration-300 ${isCollapsed ? '' : 'rotate-180'}`}
+            />
+          </button>
+        </div>
+
+        {/* Navigation Items */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar pr-4 space-y-1">
+          {sections.map((section, index) => {
+            const isActive = activeSection === section.id;
+            const isLoading = section.isLoading;
+            const isComplete = !section.isLoading && section.content && !section.error;
+            const hasError = section.error;
+            
+            return (
+              <button
+                key={section.id}
+                onClick={() => !isLoading && handleClick(section.id)}
+                disabled={isLoading}
+                className={`
+                  w-full text-left transition-all duration-200 group relative
+                  ${isCollapsed ? 'px-2 py-3' : 'px-4 py-3'}
+                  rounded-xl
+                  ${isLoading ? 'opacity-60 cursor-wait' : ''}
+                  ${hasError ? 'opacity-70' : ''}
+                  ${isActive 
+                    ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300' 
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-600 dark:text-gray-400'
+                  }
+                `}
+              >
+                {/* Active Indicator */}
+                <div 
+                  className={`
+                    absolute left-0 top-1/2 -translate-y-1/2 w-1 rounded-r-full
+                    transition-all duration-300
+                    ${isActive ? 'h-8 bg-brand-500' : 'h-0 bg-transparent'}
+                  `}
+                />
+                
+                {isCollapsed ? (
+                  <div className={`
+                    w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold
+                    ${isLoading ? 'bg-gray-200 dark:bg-gray-700' : ''}
+                    ${isActive && !isLoading
+                      ? 'bg-brand-500 text-white' 
+                      : 'bg-gray-100 dark:bg-gray-800 text-gray-500'
+                    }
+                  `}>
+                    {isLoading ? (
+                      <Loader2 size={14} className="animate-spin" />
+                    ) : (
+                      index + 1
+                    )}
+                  </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
+                      ${isLoading ? 'bg-gray-200 dark:bg-gray-700 animate-pulse' : ''}
+                      ${isActive && !isLoading
+                        ? 'bg-brand-500 text-white' 
+                        : 'bg-gray-100 dark:bg-gray-800 text-gray-500 group-hover:bg-gray-200 dark:group-hover:bg-gray-700'
+                      }
+                    `}>
+                      {isLoading ? (
+                        <Loader2 size={10} className="animate-spin" />
+                      ) : isComplete ? (
+                        <CheckCircle size={10} className="text-green-500" />
+                      ) : (
+                        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>
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Progress Indicator */}
+        {!isCollapsed && (
+          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800 pr-4 space-y-3">
+            {/* Generation Progress */}
+            {sections.some(s => s.isLoading) && (
+              <div>
+                <div className="flex items-center justify-between text-xs text-brand-600 dark:text-brand-400 mb-2">
+                  <span className="flex items-center gap-1">
+                    <Loader2 size={10} className="animate-spin" />
+                    Generating
+                  </span>
+                  <span>
+                    {sections.filter(s => !s.isLoading).length}/{sections.length}
+                  </span>
+                </div>
+                <div className="h-1.5 bg-brand-100 dark:bg-brand-900/30 rounded-full overflow-hidden">
+                  <div 
+                    className="h-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-500"
+                    style={{ 
+                      width: `${(sections.filter(s => !s.isLoading).length / sections.length) * 100}%` 
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            
+            {/* Reading Progress */}
+            <div>
+              <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
+                <span>Reading</span>
+                <span>
+                  {sections.findIndex(s => s.id === activeSection) + 1}/{sections.length}
+                </span>
+              </div>
+              <div className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
+                <div 
+                  className="h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-500 rounded-full transition-all duration-500"
+                  style={{ 
+                    width: `${((sections.findIndex(s => s.id === activeSection) + 1) / sections.length) * 100}%` 
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Sidebar;
+

components/Tooltip.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface Props {
+  term: string;
+  definition: string;
+  children: React.ReactNode;
+}
+
+const Tooltip: React.FC<Props> = ({ term, definition, children }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isVisible && triggerRef.current && tooltipRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      
+      // Check if tooltip would go off-screen at the top
+      if (triggerRect.top - tooltipRect.height - 12 < 0) {
+        setPosition('bottom');
+      } else {
+        setPosition('top');
+      }
+    }
+  }, [isVisible]);
+
+  return (
+    <span className="relative inline-block">
+      <span
+        ref={triggerRef}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        className="border-b-2 border-dashed border-brand-400 dark:border-brand-500 cursor-help transition-colors hover:border-brand-600 dark:hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400"
+      >
+        {children}
+      </span>
+      
+      {isVisible && (
+        <div
+          ref={tooltipRef}
+          className={`
+            absolute z-50 w-72 p-4 rounded-xl shadow-2xl
+            bg-white dark:bg-gray-900 
+            border border-gray-200 dark:border-gray-700
+            animate-in fade-in zoom-in-95 duration-200
+            ${position === 'top' 
+              ? 'bottom-full mb-3 left-1/2 -translate-x-1/2' 
+              : 'top-full mt-3 left-1/2 -translate-x-1/2'
+            }
+          `}
+        >
+          {/* Arrow */}
+          <div 
+            className={`
+              absolute w-3 h-3 bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700
+              transform rotate-45
+              ${position === 'top' 
+                ? 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1.5 border-r border-b' 
+                : 'top-0 left-1/2 -translate-x-1/2 -translate-y-1.5 border-l border-t'
+              }
+            `}
+          />
+          
+          <div className="relative">
+            <div className="text-xs font-bold uppercase tracking-wider text-brand-600 dark:text-brand-400 mb-2">
+              Definition
+            </div>
+            <div className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
+              {term}
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+              {definition}
+            </div>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+};
+
+export default Tooltip;
+

index.html

@@ -32,14 +32,14 @@
         background: #555; 
       }
       .glass-panel {
-        background: rgba(255, 255, 255, 0.7); /* Increased opacity for light mode */
+        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);
       }
       .dark .glass-panel {
-        background: rgba(15, 23, 42, 0.6); /* Darker background for dark mode contrast */
+        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);
       }
@@ -50,6 +50,100 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
+
+      /* Blog View - Prose Enhancements */
+      .prose blockquote {
+        font-style: normal;
+        quotes: none;
+      }
+      .prose blockquote::before {
+        content: none;
+      }
+
+      /* Equation Fraction Styling */
+      .frac {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        vertical-align: middle;
+        margin: 0 0.2em;
+      }
+      .frac > span:first-child {
+        border-bottom: 1px solid currentColor;
+        padding: 0 0.3em 0.1em;
+      }
+      .frac > span:last-child {
+        padding: 0.1em 0.3em 0;
+      }
+
+      /* Smooth scroll behavior */
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Animation utilities */
+      @keyframes fade-in-up {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .animate-fade-in-up {
+        animation: fade-in-up 0.6s ease-out forwards;
+      }
+
+      /* Stagger delays */
+      .delay-100 { animation-delay: 100ms; }
+      .delay-200 { animation-delay: 200ms; }
+      .delay-300 { animation-delay: 300ms; }
+      .delay-400 { animation-delay: 400ms; }
+      .delay-500 { animation-delay: 500ms; }
+
+      /* Line clamp utilities */
+      .line-clamp-4 {
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .line-clamp-\[12\] {
+        display: -webkit-box;
+        -webkit-line-clamp: 12;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .line-clamp-\[20\] {
+        display: -webkit-box;
+        -webkit-line-clamp: 20;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      /* Mermaid container */
+      .mermaid-container svg {
+        max-width: 100%;
+        height: auto;
+      }
+
+      /* Custom scrollbar for specific containers */
+      .custom-scrollbar::-webkit-scrollbar {
+        width: 6px;
+      }
+      .custom-scrollbar::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: rgba(0,0,0,0.2);
+        border-radius: 3px;
+      }
+      .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: rgba(255,255,255,0.2);
+      }
     </style>
     <script>
       tailwind.config = {

services/geminiService.ts

@@ -1,6 +1,6 @@
 
 import { GoogleGenAI, Type, Schema } from "@google/genai";
-import { BentoCardData, ChatMessage, ModelType } from "../types";
+import { BentoCardData, BlogSection, ChatMessage, ModelType, ChartData, PaperStructure, SectionPlan } from "../types";
 
 const RESPONSE_SCHEMA = {
   type: Type.ARRAY,
@@ -194,3 +194,415 @@ export const chatWithDocument = async (
   const result = await chat.sendMessage({ message: newMessage });
   return result.text || "";
 };
+
+// Paper Structure Analysis Schema
+const PAPER_STRUCTURE_SCHEMA = {
+  type: Type.OBJECT,
+  properties: {
+    paperTitle: { type: Type.STRING, description: "The title of the paper" },
+    paperAbstract: { type: Type.STRING, description: "A 2-3 sentence summary of the paper" },
+    mainContribution: { type: Type.STRING, description: "The key innovation or finding in one sentence" },
+    keyTerms: {
+      type: Type.ARRAY,
+      items: { type: Type.STRING },
+      description: "5-10 important technical terms used throughout the paper"
+    },
+    sections: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          title: { type: Type.STRING, description: "Engaging section title" },
+          sectionType: { 
+            type: Type.STRING, 
+            enum: ['intro', 'background', 'methodology', 'results', 'analysis', 'applications', 'conclusion', 'custom']
+          },
+          focusPoints: {
+            type: Type.ARRAY,
+            items: { type: Type.STRING },
+            description: "3-5 key points this section should cover"
+          },
+          suggestedVisualization: {
+            type: Type.STRING,
+            enum: ['mermaid', 'chart', 'equation', 'none']
+          },
+          visualizationHint: { 
+            type: Type.STRING, 
+            description: "What specifically should be visualized (e.g., 'architecture diagram from Figure 2', 'accuracy comparison from Table 1')"
+          },
+          estimatedLength: { type: Type.STRING, enum: ['short', 'medium', 'long'] }
+        },
+        required: ['title', 'sectionType', 'focusPoints', 'suggestedVisualization', 'estimatedLength']
+      }
+    }
+  },
+  required: ['paperTitle', 'paperAbstract', 'mainContribution', 'sections', 'keyTerms']
+};
+
+// Single Blog Section Schema
+const SINGLE_SECTION_SCHEMA = {
+  type: Type.OBJECT,
+  properties: {
+    content: { type: Type.STRING, description: "Rich Markdown content (300-500 words). Use **bold**, *italics*, bullet points, numbered lists, and ### subheadings." },
+    visualizationType: { 
+      type: Type.STRING, 
+      enum: ['mermaid', 'chart', 'equation', 'none']
+    },
+    visualizationData: { 
+      type: Type.STRING, 
+      description: "For 'mermaid': valid Mermaid.js graph. For 'equation': LaTeX-style string. Empty for 'chart' or 'none'."
+    },
+    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 }
+      }
+    },
+    marginNotes: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          text: { type: Type.STRING },
+          icon: { type: Type.STRING, enum: ['info', 'warning', 'tip', 'note'] }
+        },
+        required: ['text']
+      }
+    },
+    technicalTerms: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          term: { type: Type.STRING },
+          definition: { type: Type.STRING }
+        },
+        required: ['term', 'definition']
+      }
+    },
+    collapsibleSections: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          title: { type: Type.STRING },
+          content: { type: Type.STRING }
+        },
+        required: ['title', 'content']
+      }
+    }
+  },
+  required: ['content', 'visualizationType']
+};
+
+/**
+ * Step 1: Analyze the paper and determine the best structure
+ */
+export const analyzePaperStructure = async (
+  apiKey: string,
+  model: ModelType,
+  content: string,
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<PaperStructure> => {
+  if (!apiKey) throw new Error("API Key is missing");
+
+  const ai = new GoogleGenAI({ apiKey });
+  
+  let promptParts: any[] = [];
+  
+  if (isPdf) {
+    promptParts.push({
+      inlineData: {
+        data: content,
+        mimeType: "application/pdf",
+      },
+    });
+    promptParts.push({ text: "Carefully analyze this research paper, including all figures, tables, diagrams, and equations." });
+  } else {
+    promptParts.push({ text: `Analyze this research paper: \n\n${content.substring(0, 50000)}` });
+  }
+
+  const thinkingInstruction = useThinking 
+    ? "Use deep reasoning to understand the paper's structure, contributions, and the best way to present it to a general technical audience." 
+    : "";
+
+  promptParts.push({
+    text: `
+    ${thinkingInstruction}
+    
+    You are planning a distill.pub-style interactive article. Analyze this paper and create an OPTIMAL STRUCTURE for presenting it.
+    
+    YOUR TASK:
+    1. Identify the paper's core contribution and why it matters
+    2. Determine 5-8 sections that best tell the story of this paper
+    3. For each section, identify what visualization would be most impactful
+    
+    SECTION PLANNING GUIDELINES:
+    - Start with a hook that explains WHY this research matters
+    - Include background only if essential for understanding
+    - The methodology section should explain the "how" clearly
+    - Results sections should reference SPECIFIC figures/tables from the paper
+    - Include practical applications or implications
+    - End with limitations and future directions
+    
+    VISUALIZATION PLANNING:
+    - 'mermaid': Use for architectures, pipelines, workflows, decision trees
+    - 'chart': Use when there are quantitative comparisons (accuracy, speed, etc.)
+    - 'equation': Use for key mathematical formulations
+    - 'none': Use for narrative sections
+    
+    Look at the paper's figures and tables - reference them in visualizationHint so we can recreate them!
+    
+    Return a structured JSON plan.
+    `
+  });
+
+  let effectiveModel = model;
+  let requestConfig: any = {
+    responseMimeType: "application/json",
+    responseSchema: PAPER_STRUCTURE_SCHEMA as any,
+    systemInstruction: "You are a senior science editor who plans engaging, accessible articles from complex research. You identify the narrative arc and visual opportunities in papers.",
+  };
+
+  if (useThinking) {
+    effectiveModel = 'gemini-3-pro-preview';
+    requestConfig.thinkingConfig = { thinkingBudget: 16384 };
+  }
+
+  try {
+    const response = await ai.models.generateContent({
+      model: effectiveModel,
+      contents: { parts: promptParts },
+      config: requestConfig
+    });
+
+    const text = response.text;
+    if (!text) throw new Error("No response from Gemini");
+
+    let jsonStr = text;
+    const jsonMatch = text.match(/\{.*\}/s);
+    if (jsonMatch) {
+      jsonStr = jsonMatch[0];
+    }
+
+    const parsed = JSON.parse(jsonStr);
+    
+    return {
+      ...parsed,
+      sections: parsed.sections.map((section: any, index: number) => ({
+        ...section,
+        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");
+  }
+};
+
+/**
+ * Step 2: Generate a single section based on the plan
+ */
+export const generateSingleBlogSection = async (
+  apiKey: string,
+  model: ModelType,
+  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> => {
+  if (!apiKey) throw new Error("API Key is missing");
+
+  const ai = new GoogleGenAI({ apiKey });
+  
+  let promptParts: any[] = [];
+  
+  if (isPdf) {
+    promptParts.push({
+      inlineData: {
+        data: content,
+        mimeType: "application/pdf",
+      },
+    });
+  } else {
+    promptParts.push({ text: `Paper content: \n\n${content.substring(0, 40000)}` });
+  }
+
+  const lengthGuide = {
+    'short': '200-300 words',
+    'medium': '300-450 words', 
+    'long': '450-600 words'
+  };
+
+  const sectionTypeGuide: Record<string, string> = {
+    'intro': 'Write an engaging opening that hooks the reader. Explain WHY this research matters to the world. Be provocative and inspiring.',
+    'background': 'Provide essential context. Explain prerequisite concepts clearly. Define technical terms for a smart but non-expert reader.',
+    'methodology': 'Explain HOW it works step by step. Use clear analogies. Break down complex processes into digestible parts.',
+    'results': 'Present the key findings with specifics. Use actual numbers from the paper. Compare to baselines meaningfully.',
+    'analysis': 'Go deeper. Discuss implications, trade-offs, and surprising findings. Address limitations honestly.',
+    'applications': 'Describe real-world use cases. Be concrete about how this could be applied. Include potential impact.',
+    'conclusion': 'Synthesize the key takeaways. Discuss open questions and future directions. End with a forward-looking statement.',
+    'custom': 'Write compelling content following the focus points provided.'
+  };
+
+  promptParts.push({
+    text: `
+    PAPER CONTEXT:
+    - Title: ${paperContext.title}
+    - Main Contribution: ${paperContext.mainContribution}
+    - Key Terms: ${paperContext.keyTerms.join(', ')}
+    
+    SECTION TO GENERATE (${sectionIndex + 1} of ${totalSections}):
+    - Title: "${sectionPlan.title}"
+    - Type: ${sectionPlan.sectionType}
+    - Focus Points: ${sectionPlan.focusPoints.map((p, i) => `\n  ${i + 1}. ${p}`).join('')}
+    - Target Length: ${lengthGuide[sectionPlan.estimatedLength]}
+    - Visualization: ${sectionPlan.suggestedVisualization}${sectionPlan.visualizationHint ? ` - ${sectionPlan.visualizationHint}` : ''}
+    
+    WRITING INSTRUCTIONS:
+    ${sectionTypeGuide[sectionPlan.sectionType]}
+    
+    CONTENT REQUIREMENTS:
+    - Write in distill.pub style: accessible yet technically accurate
+    - Use Markdown formatting: **bold** for emphasis, bullet points for lists, ### for subheadings
+    - Include 1-2 margin notes with helpful asides (use 'tip' for pro tips, 'info' for context, 'warning' for caveats)
+    - Define 2-3 technical terms that readers might not know
+    - Add 1 collapsible "deep dive" section for readers who want more detail
+    
+    VISUALIZATION REQUIREMENTS:
+    ${sectionPlan.suggestedVisualization === 'mermaid' ? `
+    Create a Mermaid.js diagram. Use this format:
+    - Start with 'graph TD' (top-down) or 'graph LR' (left-right)
+    - Use descriptive node labels: A[Input Data] --> B[Process Step]
+    - Keep it clear and not too complex (5-10 nodes max)
+    ` : ''}
+    ${sectionPlan.suggestedVisualization === 'chart' ? `
+    Extract ACTUAL data from the paper to create a chart:
+    - Use real numbers from tables/figures
+    - Choose the right chart type (bar for comparisons, line for trends)
+    - Include axis labels
+    ` : ''}
+    ${sectionPlan.suggestedVisualization === 'equation' ? `
+    Write the key equation in LaTeX-style notation:
+    - Use \\frac{}{} for fractions
+    - Use \\sum, \\prod for summations/products
+    - Use Greek letters: \\alpha, \\beta, \\theta, etc.
+    ` : ''}
+    
+    Generate the section content now.
+    `
+  });
+
+  let effectiveModel = model;
+  let requestConfig: any = {
+    responseMimeType: "application/json",
+    responseSchema: SINGLE_SECTION_SCHEMA as any,
+    systemInstruction: "You are an expert science writer for distill.pub. You write clear, engaging, and technically accurate content that makes complex research accessible.",
+  };
+
+  if (useThinking) {
+    effectiveModel = 'gemini-3-pro-preview';
+    requestConfig.thinkingConfig = { thinkingBudget: 8192 };
+  }
+
+  try {
+    const response = await ai.models.generateContent({
+      model: effectiveModel,
+      contents: { parts: promptParts },
+      config: requestConfig
+    });
+
+    const text = response.text;
+    if (!text) throw new Error("No response from Gemini");
+
+    let jsonStr = text;
+    const jsonMatch = text.match(/\{.*\}/s);
+    if (jsonMatch) {
+      jsonStr = jsonMatch[0];
+    }
+
+    const parsed = JSON.parse(jsonStr);
+    
+    return {
+      id: sectionPlan.id,
+      title: sectionPlan.title,
+      content: parsed.content,
+      visualizationType: parsed.visualizationType,
+      visualizationData: parsed.visualizationData,
+      chartData: parsed.chartData,
+      marginNotes: (parsed.marginNotes || []).map((note: any, noteIdx: number) => ({
+        ...note,
+        id: `note-${sectionIndex}-${noteIdx}-${Date.now()}`
+      })),
+      technicalTerms: parsed.technicalTerms || [],
+      collapsibleSections: (parsed.collapsibleSections || []).map((section: any, secIdx: number) => ({
+        ...section,
+        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}`);
+  }
+};
+
+/**
+ * Legacy function - kept for compatibility but now uses the progressive approach internally
+ */
+export const generateBlogContent = async (
+  apiKey: string,
+  model: ModelType,
+  content: string,
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<BlogSection[]> => {
+  // First, analyze the structure
+  const structure = await analyzePaperStructure(apiKey, model, content, isPdf, useThinking);
+  
+  // Then generate each section
+  const sections: BlogSection[] = [];
+  const paperContext = {
+    title: structure.paperTitle,
+    abstract: structure.paperAbstract,
+    mainContribution: structure.mainContribution,
+    keyTerms: structure.keyTerms
+  };
+
+  for (let i = 0; i < structure.sections.length; i++) {
+    const section = await generateSingleBlogSection(
+      apiKey,
+      model,
+      content,
+      structure.sections[i],
+      i,
+      structure.sections.length,
+      paperContext,
+      isPdf,
+      useThinking
+    );
+    sections.push(section);
+  }
+
+  return sections;
+};

types.ts

@@ -35,3 +35,66 @@ export interface ProcessingStatus {
   state: 'idle' | 'reading' | 'analyzing' | 'generating' | 'complete' | 'error';
   message?: string;
 }
+
+// Blog View Types
+export interface BlogSection {
+  id: string;
+  title: string;
+  content: string; // Markdown
+  visualizationType?: 'mermaid' | 'chart' | 'equation' | 'none';
+  visualizationData?: string;
+  chartData?: ChartData;
+  marginNotes?: MarginNote[];
+  technicalTerms?: TechnicalTerm[];
+  collapsibleSections?: CollapsibleContent[];
+  isLoading?: boolean;
+  error?: string;
+}
+
+// Structure plan from paper analysis
+export interface SectionPlan {
+  id: string;
+  title: string;
+  sectionType: 'intro' | 'background' | 'methodology' | 'results' | 'analysis' | 'applications' | 'conclusion' | 'custom';
+  focusPoints: string[]; // Key points to cover
+  suggestedVisualization: 'mermaid' | 'chart' | 'equation' | 'none';
+  visualizationHint?: string; // What to visualize
+  estimatedLength: 'short' | 'medium' | 'long';
+}
+
+export interface PaperStructure {
+  paperTitle: string;
+  paperAbstract: string;
+  mainContribution: string;
+  sections: SectionPlan[];
+  keyTerms: string[]; // Important terms across the paper
+}
+
+export interface MarginNote {
+  id: string;
+  text: string;
+  icon?: 'info' | 'warning' | 'tip' | 'note';
+}
+
+export interface TechnicalTerm {
+  term: string;
+  definition: string;
+}
+
+export interface CollapsibleContent {
+  id: string;
+  title: string;
+  content: string;
+}
+
+// Chart Types
+export interface ChartData {
+  type: 'bar' | 'line' | 'pie' | 'scatter' | 'area';
+  title: string;
+  data: Array<{ label: string; value: number; [key: string]: any }>;
+  xAxis?: string;
+  yAxis?: string;
+  colors?: string[];
+}
+
+export type ViewMode = 'grid' | 'blog';