Upload 14 files

App.tsx

@@ -0,0 +1,475 @@
+
+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 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';
+
+const App: React.FC = () => {
+  // Settings
+  const [settings, setSettings] = useState<AppSettings>({
+    apiKey: '',
+    model: 'gemini-flash-latest',
+    theme: 'light',
+    layoutMode: 'auto',
+    useThinking: false
+  });
+
+  // Inputs
+  const [file, setFile] = useState<File | null>(null);
+  
+  // State
+  const [view, setView] = useState<'input' | 'results'>('input');
+  const [cards, setCards] = useState<BentoCardData[]>([]);
+  const [status, setStatus] = useState<ProcessingStatus>({ state: 'idle' });
+  const [paperContext, setPaperContext] = useState<string>(''); // Stores the raw text/base64
+  const [paperTitle, setPaperTitle] = useState<string>('');
+  
+  // Chat
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [isChatProcessing, setIsChatProcessing] = useState(false);
+
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  const toggleTheme = () => {
+    const newTheme = settings.theme === 'dark' ? 'light' : 'dark';
+    setSettings(prev => ({ ...prev, theme: newTheme }));
+    if (newTheme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleProcess = async () => {
+    if (!settings.apiKey) {
+      setStatus({ state: 'error', message: "Please enter your Gemini API Key." });
+      return;
+    }
+    
+    if (!file) {
+         setStatus({ state: 'error', message: "Please upload a PDF file." });
+         return;
+    }
+
+    setStatus({ state: 'reading', message: 'Reading PDF file...' });
+
+    try {
+      let contentToProcess = "";
+      const contextTitle = file.name;
+
+      // PDF UPLOAD FLOW
+      contentToProcess = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+              const result = reader.result as string;
+              const base64 = result.split(',')[1]; 
+              resolve(base64);
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+      });
+
+      if (file.type !== 'application/pdf') {
+         throw new Error("File must be a PDF.");
+      }
+
+      setPaperContext(contentToProcess);
+      setPaperTitle(contextTitle);
+
+      setStatus({ state: 'analyzing', message: settings.useThinking ? 'Thinking deeply about paper structure...' : 'Analyzing paper structure...' });
+      
+      const generatedCards = await generateBentoCards(
+        settings.apiKey, 
+        settings.model, 
+        contentToProcess, 
+        true,
+        settings.useThinking
+      );
+      
+      setCards(generatedCards);
+      setStatus({ state: 'complete', message: 'Visualization ready.' });
+      setView('results'); 
+
+    } catch (error: any) {
+      console.error(error);
+      setStatus({ state: 'error', message: error.message || "An error occurred processing the paper." });
+    }
+  };
+
+  const handleReset = () => {
+    setView('input');
+    setCards([]);
+    setStatus({ state: 'idle' });
+    setChatHistory([]);
+    setIsChatOpen(false);
+    setPaperTitle('');
+    setPaperContext('');
+    setFile(null);
+  };
+
+  const handleExpandCard = async (card: BentoCardData) => {
+    if (card.expandedContent || card.isLoadingDetails) return;
+
+    setCards(prev => prev.map(c => c.id === card.id ? { ...c, isLoadingDetails: true } : c));
+
+    try {
+      const details = await expandBentoCard(
+        settings.apiKey,
+        settings.model,
+        card.title,
+        card.detailPrompt,
+        paperContext,
+        settings.useThinking
+      );
+
+      setCards(prev => prev.map(c => c.id === card.id ? { ...c, expandedContent: details, isLoadingDetails: false } : c));
+    } catch (error) {
+      setCards(prev => prev.map(c => c.id === card.id ? { ...c, isLoadingDetails: false, expandedContent: "Failed to load details." } : c));
+    }
+  };
+
+  const handleResizeCard = (id: string, deltaCol: number, deltaRow: number) => {
+    setCards(prev => prev.map(c => {
+      if (c.id === id) {
+        const newCol = Math.max(1, Math.min(4, c.colSpan + deltaCol));
+        const newRow = Math.max(1, Math.min(3, c.rowSpan + deltaRow));
+        return { ...c, colSpan: newCol, rowSpan: newRow };
+      }
+      return c;
+    }));
+  };
+
+  const handleRateCard = (id: string, rating: number) => {
+      setCards(prev => prev.map(c => c.id === id ? { ...c, rating } : c));
+      console.log(`Rated card ${id}: ${rating}`);
+  };
+
+  const handleExport = async () => {
+    if (!gridRef.current) 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 link = document.createElement('a');
+        link.download = 'bento-summary.png';
+        link.href = canvas.toDataURL();
+        link.click();
+    } else {
+        alert("Export module not loaded yet.");
+    }
+  };
+
+  const handleShare = async () => {
+    if (navigator.share) {
+        try {
+            await navigator.share({
+                title: 'Paper Summary',
+                text: 'Check out this visual summary generated by BentoMind!',
+                url: window.location.href
+            });
+        } catch (err) {
+            console.error("Share failed", err);
+        }
+    } else {
+        alert("Sharing is not supported on this browser.");
+    }
+  };
+
+  const handleSendMessage = async (text: string) => {
+      const newUserMsg: ChatMessage = { id: Date.now().toString(), role: 'user', text, timestamp: Date.now() };
+      setChatHistory(prev => [...prev, newUserMsg]);
+      setIsChatProcessing(true);
+
+      try {
+          const responseText = await chatWithDocument(settings.apiKey, settings.model, chatHistory, text, paperContext || JSON.stringify(cards));
+          const newBotMsg: ChatMessage = { id: (Date.now()+1).toString(), role: 'model', text: responseText, timestamp: Date.now() };
+          setChatHistory(prev => [...prev, newBotMsg]);
+      } catch (error) {
+          const errorMsg: ChatMessage = { id: (Date.now()+1).toString(), role: 'system', text: "Failed to get response.", timestamp: Date.now() };
+          setChatHistory(prev => [...prev, errorMsg]);
+      } finally {
+          setIsChatProcessing(false);
+      }
+  };
+
+  return (
+    <div className={`min-h-screen w-full text-gray-900 dark:text-gray-100 overflow-x-hidden transition-colors duration-500 ${settings.theme}`}>
+      <Background theme={settings.theme} />
+      
+      {/* Navbar */}
+      <nav className="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center glass-panel border-b border-gray-200 dark:border-white/5">
+        <div className="flex items-center gap-4">
+          {view === 'results' && (
+             <button 
+               onClick={handleReset}
+               className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
+               title="Start Over"
+             >
+               <ChevronLeft size={20} />
+             </button>
+          )}
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-brand-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg">
+               B
+            </div>
+            <span className="text-xl font-display font-bold tracking-tight hidden md:block">BentoMind</span>
+          </div>
+        </div>
+
+        <div className="flex gap-4 items-center">
+          {view === 'results' && (
+            <div className="hidden md:flex items-center gap-2 px-4 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-full border border-gray-200 dark:border-gray-700">
+               <FileText size={14} className="text-gray-500" />
+               <span className="text-sm font-medium max-w-[200px] truncate opacity-80">{paperTitle || 'Analysis'}</span>
+            </div>
+          )}
+          <button onClick={toggleTheme} className="p-2 rounded-full bg-gray-100 dark:bg-white/10 hover:bg-gray-200 dark:hover:bg-white/20 transition-colors shadow-sm">
+            {settings.theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+          </button>
+        </div>
+      </nav>
+
+      <main className="pt-32 pb-20 px-4 md:px-8 max-w-7xl mx-auto relative z-10 min-h-[80vh]">
+        
+        {/* Input View */}
+        {view === 'input' && (
+          <section className="flex flex-col gap-8 animate-in fade-in zoom-in-95 duration-700 items-center justify-center min-h-[60vh]">
+            <div className="text-center space-y-6 mb-4 max-w-3xl">
+              <h1 className="text-5xl md:text-7xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-brand-600 to-purple-600 dark:from-white dark:via-brand-400 dark:to-purple-400 leading-tight pb-2">
+                Visual Research Summaries
+              </h1>
+              <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>.
+              </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>
+
+              {/* 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>
+                 
+                 {/* 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>
+              </div>
+
+              {/* PDF Upload - Main Action */}
+              <div className="relative">
+                <input 
+                  type="file" 
+                  accept=".pdf"
+                  onChange={handleFileChange}
+                  className="hidden"
+                  id="file-upload"
+                />
+                <label 
+                  htmlFor="file-upload" 
+                  className={`
+                    flex flex-col items-center justify-center gap-3 cursor-pointer rounded-2xl border-2 border-dashed transition-all py-12
+                    ${file 
+                      ? 'bg-brand-50 dark:bg-brand-900/10 border-brand-500 text-brand-600 dark:text-brand-400' 
+                      : 'bg-gray-50/50 dark:bg-white/5 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-white/10 text-gray-500 hover:border-brand-400 dark:hover:border-brand-400'}
+                  `}
+                >
+                  {file ? (
+                    <>
+                      <div className="p-3 bg-brand-100 dark:bg-brand-900/30 rounded-full">
+                        <FileText size={32} className="text-brand-600 dark:text-brand-400" />
+                      </div>
+                      <div className="text-center">
+                        <span className="font-bold text-lg">{file.name}</span>
+                        <p className="text-sm opacity-70 mt-1">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
+                      </div>
+                      <div className="mt-2 text-xs bg-brand-200 dark:bg-brand-800/40 px-2 py-1 rounded">
+                        Click to change file
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-full">
+                         <Upload size={32} />
+                      </div>
+                      <div className="text-center">
+                        <span className="font-bold text-lg">Upload PDF Paper</span>
+                        <p className="text-sm opacity-70 mt-1">Max size 10MB</p>
+                      </div>
+                    </>
+                  )}
+                </label>
+              </div>
+              
+              {/* Generate Button */}
+              <button 
+                onClick={handleProcess}
+                disabled={status.state !== 'idle' && status.state !== 'error'}
+                className={`
+                  w-full py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-2xl hover:scale-[1.01] active:scale-[0.99] transition-all disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-3
+                  ${settings.useThinking 
+                    ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white'
+                    : 'bg-gradient-to-r from-gray-900 to-gray-800 dark:from-brand-600 dark:to-purple-600 text-white'
+                  }
+                `}
+              >
+                {status.state !== 'idle' && status.state !== 'error' && status.state !== 'complete' ? (
+                  <>
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                    <span>{status.message}</span>
+                  </>
+                ) : (
+                  <>
+                    <span>{settings.useThinking ? 'Deep Analyze' : 'Generate Bento Grid'}</span>
+                    <ArrowRight size={20} />
+                  </>
+                )}
+              </button>
+
+              {status.state === 'error' && (
+                <div className="flex items-center gap-2 text-red-500 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg text-sm animate-in fade-in slide-in-from-top-2">
+                  <AlertCircle size={16} />
+                  {status.message}
+                </div>
+              )}
+            </div>
+          </section>
+        )}
+
+        {/* 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>
+                  )}
+                </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>
+
+            {/* Floating Chat Trigger */}
+            <button 
+               onClick={() => setIsChatOpen(true)}
+               className="fixed bottom-8 right-8 p-4 bg-brand-600 hover:bg-brand-500 text-white rounded-full shadow-2xl hover:scale-110 transition-all z-40 group"
+            >
+               <MessageSquare size={24} />
+               <span className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-3 py-1 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+                 Chat with Paper
+               </span>
+            </button>
+          </div>
+        )}
+      </main>
+
+      <ChatBot 
+        isOpen={isChatOpen} 
+        onClose={() => setIsChatOpen(false)} 
+        messages={chatHistory}
+        onSendMessage={handleSendMessage}
+        isProcessing={isChatProcessing}
+      />
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,12 +1,20 @@
----
-title: PaperStack
-emoji: 🚀
-colorFrom: indigo
-colorTo: gray
-sdk: static
-pinned: false
-license: apache-2.0
-short_description: A research paper summarizer using bentogrids
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/10fTu3NHihfpsNHHaQcKJcKfCbWtD-ydg
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/Background.tsx

@@ -0,0 +1,111 @@
+
+import React, { useEffect, useRef } from 'react';
+
+const Background: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let animationFrameId: number;
+    let time = 0;
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    window.addEventListener('resize', resize);
+    resize();
+
+    const points: { x: number; y: number; z: number }[] = [];
+    const numPoints = 50; // Reduced count slightly
+    const size = 300;
+
+    // Create a cube of dots
+    for (let i = 0; i < numPoints; i++) {
+      points.push({
+        x: (Math.random() - 0.5) * size,
+        y: (Math.random() - 0.5) * size,
+        z: (Math.random() - 0.5) * size,
+      });
+    }
+
+    const draw = () => {
+      // Varied, slower speed
+      time += 0.001 + Math.sin(Date.now() * 0.0005) * 0.0005; 
+      
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      
+      const cx = canvas.width / 2;
+      const cy = canvas.height / 2;
+
+      // Much lower opacity for better contrast with content
+      const color = theme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)';
+      const connectionColor = theme === 'dark' ? 'rgba(255, 255, 255, 0.02)' : 'rgba(0, 0, 0, 0.02)';
+
+      ctx.fillStyle = color;
+      ctx.strokeStyle = connectionColor;
+
+      // Rotate points
+      const rotatedPoints = points.map(p => {
+        // Rotate Y
+        let x = p.x * Math.cos(time) - p.z * Math.sin(time);
+        let z = p.x * Math.sin(time) + p.z * Math.cos(time);
+        // Rotate X
+        let y = p.y * Math.cos(time * 0.5) - z * Math.sin(time * 0.5);
+        z = p.y * Math.sin(time * 0.5) + z * Math.cos(time * 0.5);
+
+        // Perspective projection
+        const scale = 800 / (800 + z);
+        return {
+          x: cx + x * scale,
+          y: cy + y * scale,
+          scale
+        };
+      });
+
+      // Draw connections
+      ctx.beginPath();
+      for (let i = 0; i < rotatedPoints.length; i++) {
+        for (let j = i + 1; j < rotatedPoints.length; j++) {
+          const dx = rotatedPoints[i].x - rotatedPoints[j].x;
+          const dy = rotatedPoints[i].y - rotatedPoints[j].y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 120) {
+            ctx.moveTo(rotatedPoints[i].x, rotatedPoints[i].y);
+            ctx.lineTo(rotatedPoints[j].x, rotatedPoints[j].y);
+          }
+        }
+      }
+      ctx.stroke();
+
+      // Draw points
+      rotatedPoints.forEach(p => {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 2 * p.scale, 0, Math.PI * 2);
+        ctx.fill();
+      });
+
+      animationFrameId = requestAnimationFrame(draw);
+    };
+
+    draw();
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [theme]);
+
+  return (
+    <canvas 
+      ref={canvasRef} 
+      className="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none transition-opacity duration-1000 opacity-20" 
+    />
+  );
+};
+
+export default Background;

components/BentoCard.tsx

@@ -0,0 +1,263 @@
+
+import React, { useState } from 'react';
+import { BentoCardData } from '../types';
+import { Maximize2, Minimize2, BookOpen, MessageSquare, Activity, Quote, Zap, ThumbsUp, ThumbsDown, ArrowRight, FileText, MoveHorizontal, MoveVertical, Plus, Minus } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import MermaidDiagram from './MermaidDiagram';
+
+interface Props {
+  card: BentoCardData;
+  onExpand: (card: BentoCardData) => void;
+  onRate: (id: string, rating: number) => void;
+  onResize: (id: string, deltaCol: number, deltaRow: number) => void;
+  layoutMode: 'auto' | 'grid' | 'list';
+}
+
+const BentoCard: React.FC<Props> = ({ card, onExpand, onRate, onResize, layoutMode }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Visual Configurations based on Card Type
+  const getTypeConfig = () => {
+    switch (card.type) {
+      case 'stat': 
+        return {
+          icon: <Activity className="w-5 h-5" />,
+          color: 'text-emerald-600 dark:text-emerald-400',
+          bg: 'bg-emerald-100 dark:bg-emerald-900/30',
+          border: 'border-emerald-200 dark:border-emerald-800',
+          gradient: 'from-emerald-500/10 to-teal-500/5',
+          graphic: (
+            <svg viewBox="0 0 100 40" className="w-full h-full opacity-20 text-emerald-500" fill="none" stroke="currentColor" strokeWidth="2">
+               <path d="M0 35 C 20 35, 20 15, 40 15 S 60 25, 80 5 L 100 0" />
+               <path d="M0 40 L 100 40 L 100 0 L 80 5 C 60 25, 60 15, 40 15 C 20 15, 20 35, 0 35 Z" fill="currentColor" stroke="none" opacity="0.2" />
+            </svg>
+          )
+        };
+      case 'quote': 
+        return {
+          icon: <Quote className="w-5 h-5" />,
+          color: 'text-amber-600 dark:text-amber-400',
+          bg: 'bg-amber-100 dark:bg-amber-900/30',
+          border: 'border-amber-200 dark:border-amber-800',
+          gradient: 'from-amber-500/10 to-orange-500/5',
+          graphic: (
+             <svg width="120" height="120" viewBox="0 0 24 24" className="absolute -right-2 -bottom-6 text-amber-500 opacity-10 transform rotate-12" fill="currentColor">
+                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 7.55228 14.017 7V3H19.017C20.6739 3 22.017 4.34315 22.017 6V15C22.017 16.6569 20.6739 18 19.017 18H16.017V21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 7.55228 5.0166 7V3H10.0166C11.6735 3 13.0166 4.34315 13.0166 6V15C13.0166 16.6569 11.6735 18 10.0166 18H7.0166V21H5.0166Z" />
+             </svg>
+          )
+        };
+      case 'process': 
+        return {
+          icon: <Zap className="w-5 h-5" />,
+          color: 'text-purple-600 dark:text-purple-400',
+          bg: 'bg-purple-100 dark:bg-purple-900/30',
+          border: 'border-purple-200 dark:border-purple-800',
+          gradient: 'from-purple-500/10 to-indigo-500/5',
+          graphic: (
+            <svg viewBox="0 0 100 100" className="w-full h-full opacity-10 text-purple-500 absolute right-0 top-0">
+              <circle cx="80" cy="20" r="15" stroke="currentColor" strokeWidth="2" fill="none" />
+              <circle cx="60" cy="50" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
+              <circle cx="80" cy="80" r="20" stroke="currentColor" strokeWidth="2" fill="none" />
+              <line x1="75" y1="33" x2="65" y2="42" stroke="currentColor" strokeWidth="2" />
+              <line x1="65" y1="58" x2="75" y2="65" stroke="currentColor" strokeWidth="2" />
+            </svg>
+          )
+        };
+      case 'insight': 
+        return {
+          icon: <MessageSquare className="w-5 h-5" />,
+          color: 'text-blue-600 dark:text-blue-400',
+          bg: 'bg-blue-100 dark:bg-blue-900/30',
+          border: 'border-blue-200 dark:border-blue-800',
+          gradient: 'from-blue-500/10 to-cyan-500/5',
+          graphic: (
+             <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-bl-full pointer-events-none blur-xl" />
+          )
+        };
+      default: 
+        return {
+          icon: <BookOpen className="w-5 h-5" />,
+          color: 'text-gray-600 dark:text-gray-400',
+          bg: 'bg-gray-100 dark:bg-gray-800',
+          border: 'border-gray-200 dark:border-gray-700',
+          gradient: 'from-gray-500/5 to-slate-500/5',
+          graphic: null
+        };
+    }
+  };
+
+  const config = getTypeConfig();
+
+  const displayRow = card.rowSpan > 3 ? 3 : card.rowSpan < 1 ? 1 : card.rowSpan;
+  
+  const getGridClass = () => {
+    if (layoutMode === 'list') return 'col-span-4 row-span-1';
+    if (isExpanded) return 'col-span-4 row-span-2 md:col-span-4 md:row-span-3 z-30'; 
+    
+    const displayCol = card.colSpan;
+    
+    // Clamping to grid limits
+    const cols = displayCol > 4 ? 4 : displayCol < 1 ? 1 : displayCol;
+    
+    const colClass = cols === 4 ? 'md:col-span-4' : cols === 3 ? 'md:col-span-3' : cols === 2 ? 'md:col-span-2' : 'md:col-span-1';
+    const rowClass = displayRow === 3 ? 'md:row-span-3' : displayRow === 2 ? 'md:row-span-2' : 'md:row-span-1';
+    
+    return `col-span-4 ${colClass} ${rowClass}`;
+  };
+
+  const getLineClampClass = () => {
+    if (isExpanded) return '';
+    switch (displayRow) {
+      case 1: return 'line-clamp-4';
+      case 2: return 'line-clamp-[12]';
+      case 3: return 'line-clamp-[20]';
+      default: return 'line-clamp-4';
+    }
+  };
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.control-btn')) return;
+    e.stopPropagation();
+    if (!isExpanded && !card.expandedContent) {
+      onExpand(card);
+    }
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div 
+      className={`
+        relative group transition-all duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1.0)]
+        ${getGridClass()}
+        ${isExpanded 
+          ? 'scale-[1.02] z-40 shadow-2xl -translate-y-2 h-auto min-h-[400px]' 
+          : 'hover:scale-[1.02] hover:-translate-y-2 hover:shadow-xl hover:shadow-brand-500/10 hover:z-20 h-full'
+        }
+      `}
+      onClick={handleExpandClick}
+    >
+      <div className={`
+        h-full w-full rounded-2xl overflow-hidden flex flex-col 
+        bg-white dark:bg-slate-900 
+        border 
+        ${isExpanded ? 'border-brand-500 ring-1 ring-brand-500' : `${config.border} group-hover:border-opacity-0`}
+        shadow-sm transition-all duration-300
+        relative
+        group-hover:ring-1 group-hover:ring-black/5 dark:group-hover:ring-white/10
+      `}>
+        
+        {/* Mermaid Diagram (Takes priority over default graphics if present) */}
+        {card.mermaid && (
+           <div className={`absolute inset-0 z-0 opacity-20 dark:opacity-30 ${isExpanded ? 'opacity-100 dark:opacity-100 z-10 bg-white/90 dark:bg-slate-900/90' : ''} transition-all duration-500`}>
+              <MermaidDiagram chart={card.mermaid} theme={document.documentElement.classList.contains('dark') ? 'dark' : 'light'} />
+           </div>
+        )}
+
+        {/* Default Graphic / Fallback */}
+        {!card.mermaid && (
+           <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
+             <div className={`absolute inset-0 bg-gradient-to-br ${config.gradient} opacity-100`} />
+             {config.graphic}
+           </div>
+        )}
+
+        {/* Layout & Action Controls (Visible on Hover) */}
+        <div className="absolute top-3 right-12 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20 control-btn">
+             {/* Resize Width */}
+             <div className="flex items-center bg-white/90 dark:bg-black/60 rounded-lg backdrop-blur-sm border border-gray-200 dark:border-gray-700 p-1 shadow-sm">
+                <button onClick={(e) => { e.stopPropagation(); onResize(card.id, -1, 0); }} className="p-1 hover:bg-black/10 dark:hover:bg-white/20 rounded" title="Decrease Width">
+                   <Minus size={12} />
+                </button>
+                <span className="px-1.5 text-[10px] font-mono text-gray-500">W</span>
+                <button onClick={(e) => { e.stopPropagation(); onResize(card.id, 1, 0); }} className="p-1 hover:bg-black/10 dark:hover:bg-white/20 rounded" title="Increase Width">
+                   <Plus size={12} />
+                </button>
+             </div>
+             {/* Resize Height */}
+             <div className="flex items-center bg-white/90 dark:bg-black/60 rounded-lg backdrop-blur-sm border border-gray-200 dark:border-gray-700 p-1 shadow-sm">
+                <button onClick={(e) => { e.stopPropagation(); onResize(card.id, 0, -1); }} className="p-1 hover:bg-black/10 dark:hover:bg-white/20 rounded" title="Decrease Height">
+                   <Minus size={12} />
+                </button>
+                <span className="px-1.5 text-[10px] font-mono text-gray-500">H</span>
+                <button onClick={(e) => { e.stopPropagation(); onResize(card.id, 0, 1); }} className="p-1 hover:bg-black/10 dark:hover:bg-white/20 rounded" title="Increase Height">
+                   <Plus size={12} />
+                </button>
+             </div>
+        </div>
+
+        <div className={`relative p-6 flex flex-col h-full z-10 ${isExpanded && card.mermaid ? 'bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm' : ''}`}>
+            {/* Header */}
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className={`p-2 rounded-lg ${config.bg} ${config.color} backdrop-blur-md shadow-sm transition-transform duration-300 group-hover:scale-110`}>
+                  {config.icon}
+                </div>
+                <h3 className="font-display font-bold text-lg leading-tight text-gray-900 dark:text-gray-50 pr-8 drop-shadow-sm">{card.title}</h3>
+              </div>
+              <button 
+                onClick={handleExpandClick}
+                className="control-btn p-2 rounded-full bg-white/50 dark:bg-black/20 hover:bg-white dark:hover:bg-black/40 transition-all opacity-0 group-hover:opacity-100 absolute right-4 top-4 backdrop-blur-md border border-white/20 shadow-sm"
+              >
+                {isExpanded ? <Minimize2 size={16} className="text-gray-700 dark:text-gray-200" /> : <Maximize2 size={16} className="text-gray-700 dark:text-gray-200" />}
+              </button>
+            </div>
+
+            {/* Main Content (Summary) */}
+            <div className="flex-grow overflow-y-auto custom-scrollbar relative">
+              {/* Use ReactMarkdown for summary to handle bolding/italics if model sends it, but style as simple text */}
+              <div className={`text-base leading-relaxed text-gray-700 dark:text-gray-200 font-medium ${getLineClampClass()} drop-shadow-sm prose prose-sm dark:prose-invert max-w-none prose-p:my-0`}>
+                  <ReactMarkdown>{card.summary}</ReactMarkdown>
+              </div>
+              
+              {!isExpanded && (
+                  <div className="mt-4 flex items-center gap-2 text-xs font-medium uppercase tracking-wider opacity-60 text-gray-600 dark:text-gray-300 group-hover:translate-x-1 transition-transform">
+                    Click to explore <ArrowRight size={12} />
+                  </div>
+              )}
+            </div>
+
+            {/* Expanded Content Area */}
+            {isExpanded && (
+              <div 
+                className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 animate-in fade-in slide-in-from-bottom-4 duration-500 overflow-y-auto custom-scrollbar max-h-[400px]"
+                onClick={(e) => e.stopPropagation()} 
+              >
+                <div className="flex justify-between items-center mb-4">
+                  <div className="flex items-center gap-2 text-brand-600 dark:text-brand-400">
+                    <FileText size={16} />
+                    <h4 className="text-sm uppercase tracking-wider font-bold">First Principles Deep Dive</h4>
+                  </div>
+                </div>
+                
+                {card.isLoadingDetails ? (
+                  <div className="space-y-3 py-2">
+                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded w-full animate-pulse"></div>
+                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded w-5/6 animate-pulse delay-75"></div>
+                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded w-4/6 animate-pulse delay-150"></div>
+                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded w-full animate-pulse delay-100"></div>
+                  </div>
+                ) : (
+                  <div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 bg-gray-50/50 dark:bg-black/20 p-4 rounded-xl">
+                     <ReactMarkdown>{card.expandedContent || "No detailed content available."}</ReactMarkdown>
+                  </div>
+                )}
+
+                {/* Feedback */}
+                <div className="flex items-center justify-end gap-2 mt-4 pt-2">
+                  <span className="text-xs font-medium text-gray-500">Helpful?</span>
+                  <button onClick={() => onRate(card.id, 1)} className={`p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${card.rating === 1 ? 'text-green-600 bg-green-50 dark:bg-green-900/20' : 'text-gray-400'}`}>
+                    <ThumbsUp size={14} />
+                  </button>
+                  <button onClick={() => onRate(card.id, -1)} className={`p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${card.rating === -1 ? 'text-red-600 bg-red-50 dark:bg-red-900/20' : 'text-gray-400'}`}>
+                    <ThumbsDown size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BentoCard;

components/ChatBot.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { MessageSquare, X, Send, Loader2 } from 'lucide-react';
+import { ChatMessage } from '../types';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  messages: ChatMessage[];
+  onSendMessage: (text: string) => void;
+  isProcessing: boolean;
+}
+
+const ChatBot: React.FC<Props> = ({ isOpen, onClose, messages, onSendMessage, isProcessing }) => {
+  const [input, setInput] = useState('');
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isOpen]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isProcessing) return;
+    onSendMessage(input);
+    setInput('');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed bottom-6 right-6 w-80 md:w-96 h-[500px] glass-panel rounded-2xl shadow-2xl flex flex-col z-50 overflow-hidden border border-gray-200 dark:border-gray-700 animate-in fade-in slide-in-from-bottom-10">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center bg-gray-50/50 dark:bg-gray-900/50">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+          <h3 className="font-bold text-sm">Paper Assistant</h3>
+        </div>
+        <button onClick={onClose} className="hover:bg-gray-200 dark:hover:bg-gray-700 p-1 rounded">
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-grow overflow-y-auto p-4 space-y-4 bg-white/50 dark:bg-black/20">
+        {messages.length === 0 && (
+          <div className="text-center text-xs opacity-50 mt-10">
+            Ask me anything about the paper!
+          </div>
+        )}
+        {messages.map((msg) => (
+          <div 
+            key={msg.id} 
+            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div 
+              className={`
+                max-w-[80%] p-3 rounded-2xl text-sm shadow-sm
+                ${msg.role === 'user' 
+                  ? 'bg-brand-600 text-white rounded-br-none' 
+                  : 'bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-bl-none'}
+              `}
+            >
+              {msg.text}
+            </div>
+          </div>
+        ))}
+        {isProcessing && (
+          <div className="flex justify-start">
+            <div className="bg-white dark:bg-gray-800 p-3 rounded-2xl rounded-bl-none border border-gray-100 dark:border-gray-700">
+              <Loader2 className="animate-spin w-4 h-4 opacity-50" />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50">
+        <div className="relative">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type a question..."
+            className="w-full bg-white dark:bg-black/30 border border-gray-200 dark:border-gray-700 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/50"
+          />
+          <button 
+            type="submit"
+            disabled={!input.trim() || isProcessing}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-lg bg-brand-500 text-white hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <Send size={14} />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChatBot;

components/MermaidDiagram.tsx

@@ -0,0 +1,52 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+
+interface Props {
+  chart: string;
+  theme?: 'light' | 'dark';
+}
+
+const MermaidDiagram: React.FC<Props> = ({ chart, theme = 'light' }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = useState<string>('');
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: theme === 'dark' ? 'dark' : 'default',
+      securityLevel: 'loose',
+      fontFamily: 'Inter, sans-serif',
+    });
+  }, [theme]);
+
+  useEffect(() => {
+    const renderChart = async () => {
+      if (!containerRef.current) return;
+      
+      try {
+        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);
+        setSvg(svg);
+      } catch (error) {
+        console.error('Mermaid failed to render:', error);
+        setSvg(''); // Clear on error
+      }
+    };
+
+    renderChart();
+  }, [chart, theme]);
+
+  if (!svg) return null;
+
+  return (
+    <div 
+      className="w-full h-full flex items-center justify-center p-4 mermaid-container overflow-hidden"
+      ref={containerRef}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+};
+
+export default MermaidDiagram;

index.html

@@ -1,19 +1,95 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BentoMind</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.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">
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+      h1, h2, h3, h4, h5, h6, .font-display {
+        font-family: 'Space Grotesk', sans-serif;
+      }
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent; 
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #888; 
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #555; 
+      }
+      .glass-panel {
+        background: rgba(255, 255, 255, 0.7); /* Increased opacity for light mode */
+        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 */
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+      }
+      
+      /* Gradient text helper */
+      .text-gradient {
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    </style>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              brand: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                900: '#0c4a6e',
+              }
+            },
+            animation: {
+              'spin-slow': 'spin 20s linear infinite',
+              'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            }
+          }
+        }
+      }
+    </script>
+  <script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
+    "react-markdown": "https://aistudiocdn.com/react-markdown@^10.1.0",
+    "mermaid": "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="antialiased transition-colors duration-300 bg-slate-50 dark:bg-slate-950">
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "BentoMind - Research Summarizer",
+  "description": "A visually stunning, intelligent research paper summarizer using Gemini API to generate dynamic Bento-style cards with deep-dive capabilities.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bentomind---research-summarizer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "@google/genai": "^1.30.0",
+    "lucide-react": "^0.554.0",
+    "react-markdown": "^10.1.0",
+    "mermaid": "11.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,196 @@
+
+import { GoogleGenAI, Type, Schema } from "@google/genai";
+import { BentoCardData, ChatMessage, ModelType } from "../types";
+
+const RESPONSE_SCHEMA = {
+  type: Type.ARRAY,
+  items: {
+    type: Type.OBJECT,
+    properties: {
+      title: { type: Type.STRING },
+      summary: { type: Type.STRING, description: "Concise summary using Markdown for emphasis (bold/italic) but no headings." },
+      type: { type: Type.STRING, enum: ['stat', 'concept', 'quote', 'insight', 'process'] },
+      colSpan: { type: Type.INTEGER },
+      rowSpan: { type: Type.INTEGER },
+      detailPrompt: { type: Type.STRING },
+      mermaid: { type: Type.STRING, description: "A valid Mermaid.js graph definition (e.g. 'graph TD...') if this card describes a process, workflow, or architecture found in the PDF. Leave empty otherwise." }
+    },
+    required: ['title', 'summary', 'type', 'colSpan', 'rowSpan', 'detailPrompt']
+  }
+};
+
+export const generateBentoCards = async (
+  apiKey: string,
+  model: ModelType,
+  content: string,
+  isPdf: boolean = false,
+  useThinking: boolean = false
+): Promise<BentoCardData[]> => {
+  if (!apiKey) throw new Error("API Key is missing");
+
+  const ai = new GoogleGenAI({ apiKey });
+  
+  let promptParts: any[] = [];
+  
+  if (isPdf) {
+    promptParts.push({
+      inlineData: {
+        data: content, // content is base64 here
+        mimeType: "application/pdf",
+      },
+    });
+    promptParts.push({ text: "Analyze this research paper, paying close attention to any embedded figures, diagrams, and charts." });
+  } else {
+    promptParts.push({ text: `Analyze the following research paper text/content: \n\n${content.substring(0, 40000)}...` }); 
+  }
+
+  const thinkingInstruction = useThinking 
+    ? "You are in THINKING MODE. Use your extended reasoning budget to deeply analyze the methodology and theoretical underpinnings before summarizing. Identify subtle connections and foundational axioms." 
+    : "";
+
+  promptParts.push({
+    text: `
+    ${thinkingInstruction}
+    Create a highly structured, dynamic summary of this paper designed for a rich Bento Grid interface.
+    
+    RULES:
+    1. Generate between 6 to 9 unique cards. Do not generate fewer than 6.
+    2. The 'colSpan' (1-4) and 'rowSpan' (1-2) must vary based on the visual hierarchy and importance of the point. 
+       - Use 2x2 or 3x2 for the "Main Result" or "Core Concept".
+       - Use 1x1 for specific stats or quick quotes.
+       - Use 2x1 or 4x2 for process steps, architectures, or lists.
+       - IF you provide a 'mermaid' diagram, you MUST set colSpan >= 2 and rowSpan >= 2.
+       - Ensure the total grid packs densely (Total grid width is 4 columns).
+    3. 'summary' field: Use clear Markdown. You can use **bold** for emphasis. Keep it concise.
+    4. 'detailPrompt' must be a technical follow-up prompt that asks to explain the "First Principles" of this card's content.
+    5. 'mermaid' field: Look at the figures in the PDF. If there is a flowchart, architecture diagram, or framework overview, translate it into a valid Mermaid.js graph ('graph TD' or 'flowchart LR'). This is highly preferred for 'process' or 'concept' cards.
+    
+    CONTENT TO EXTRACT:
+    - The Main Innovation/Contribution (High importance).
+    - Key Quantitative Results (Accuracy, Speedup, etc.).
+    - The "Secret Sauce" (Methodology details) -> Visualize this with Mermaid if a diagram exists in the PDF.
+    - A provoking Quote from the text.
+    - Limitations or Future Work.
+    - First Principles or Theory involved.
+    
+    Return a valid JSON array.
+    `
+  });
+
+  // Thinking Mode Configuration
+  let effectiveModel = model;
+  let requestConfig: any = {
+    responseMimeType: "application/json",
+    responseSchema: RESPONSE_SCHEMA as any, 
+    systemInstruction: "You are a senior research scientist summarizing papers for a high-tech dashboard. You prioritize density of information, visual hierarchy, and architectural clarity.",
+  };
+
+  if (useThinking) {
+    effectiveModel = 'gemini-3-pro-preview';
+    requestConfig.thinkingConfig = { thinkingBudget: 32768 };
+    // IMPORTANT: Do not set maxOutputTokens when thinking is enabled for 2.5/3.0 models in this context if not strictly needed, 
+    // but ensuring responseSchema is present usually works. 
+  }
+
+  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");
+
+    // If thinking text is included in response.text (depending on SDK version/flags), we might need to clean it, 
+    // but typically response.text returns the model output.
+    // For JSON schema mode, it should be just JSON.
+    
+    // Attempt to find JSON if the model outputted extra chat:
+    let jsonStr = text;
+    const jsonMatch = text.match(/\[.*\]/s);
+    if (jsonMatch) {
+      jsonStr = jsonMatch[0];
+    }
+
+    const parsed = JSON.parse(jsonStr);
+    
+    return parsed.map((item: any, index: number) => ({
+      ...item,
+      id: `card-${index}-${Date.now()}`,
+      expandedContent: undefined,
+      isLoadingDetails: false
+    }));
+
+  } catch (error: any) {
+    console.error("Gemini Bento Error:", error);
+    throw new Error(error.message || "Failed to generate bento cards");
+  }
+};
+
+export const expandBentoCard = async (
+  apiKey: string,
+  model: ModelType,
+  topic: string,
+  detailPrompt: string,
+  originalContext: string,
+  useThinking: boolean = false
+): Promise<string> => {
+  const ai = new GoogleGenAI({ apiKey });
+
+  const prompt = `
+  Context: The user is reading a summary card about "${topic}".
+  Original Paper Context (Excerpt): ${originalContext.substring(0, 5000)}...
+
+  Task: ${detailPrompt}
+  
+  CRITICAL INSTRUCTION: Explain this concept from FIRST PRINCIPLES. 
+  - Return the response in RICH MARKDOWN format.
+  - Use Headers (###), Lists, Bold text, and Code blocks if necessary.
+  - Derive the conclusion from fundamental axioms, physical laws, or basic mathematical truths.
+  - Explain the "mechanistic why" — how does it actually work at the lowest level?
+  - If it's a result, explain the statistical validity and the dataset composition.
+  `;
+
+  let effectiveModel = model;
+  let requestConfig: any = {};
+
+  if (useThinking) {
+    effectiveModel = 'gemini-3-pro-preview';
+    requestConfig.thinkingConfig = { thinkingBudget: 32768 };
+  }
+
+  const response = await ai.models.generateContent({
+    model: effectiveModel,
+    contents: prompt,
+    config: requestConfig
+  });
+
+  return response.text || "Could not generate details.";
+};
+
+export const chatWithDocument = async (
+  apiKey: string,
+  model: ModelType,
+  history: ChatMessage[],
+  newMessage: string,
+  context: string
+): Promise<string> => {
+  const ai = new GoogleGenAI({ apiKey });
+  
+  const chatHistory = history.map(h => ({
+    role: h.role === 'user' ? 'user' : 'model',
+    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.`
+    }
+  });
+
+  const result = await chat.sendMessage({ message: newMessage });
+  return result.text || "";
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,37 @@
+
+export interface BentoCardData {
+  id: string;
+  title: string;
+  summary: string;
+  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
+  mermaid?: string; // Mermaid JS diagram definition
+  expandedContent?: string;
+  isLoadingDetails?: boolean;
+  rating?: number;
+  feedback?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'model' | 'system';
+  text: string;
+  timestamp: number;
+}
+
+export type ModelType = 'gemini-flash-latest' | 'gemini-3-pro-preview';
+
+export interface AppSettings {
+  apiKey: string;
+  model: ModelType;
+  theme: 'light' | 'dark';
+  layoutMode: 'auto' | 'grid' | 'list';
+  useThinking: boolean;
+}
+
+export interface ProcessingStatus {
+  state: 'idle' | 'reading' | 'analyzing' | 'generating' | 'complete' | 'error';
+  message?: string;
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});