quiz master

app/components/Desktop.tsx

@@ -19,9 +19,10 @@ import { ContextMenu } from './ContextMenu'
 import { AboutModal } from './AboutModal'
 import { SessionManagerWindow } from './SessionManagerWindow'
 import { FlutterRunner } from './FlutterRunner'
-import { ResearchBrowser } from './ResearchBrowser'
+
 import { FlutterCodeEditor } from './FlutterCodeEditor'
 import { LaTeXEditor } from './LaTeXEditor'
+import { QuizApp } from './QuizApp'
 import { motion, AnimatePresence } from 'framer-motion'
 import { SystemPowerOverlay } from './SystemPowerOverlay'
 import {
@@ -64,9 +65,10 @@ export function Desktop() {
   const [sessionManagerOpen, setSessionManagerOpen] = useState(false)
   const [flutterRunnerOpen, setFlutterRunnerOpen] = useState(false)
   const [activeFlutterApp, setActiveFlutterApp] = useState<any>(null)
-  const [researchBrowserOpen, setResearchBrowserOpen] = useState(false)
+
   const [flutterCodeEditorOpen, setFlutterCodeEditorOpen] = useState(false)
   const [latexEditorOpen, setLaTeXEditorOpen] = useState(false)
+  const [quizAppOpen, setQuizAppOpen] = useState(false)
 
   // Minimized states
   const [fileManagerMinimized, setFileManagerMinimized] = useState(false)
@@ -77,13 +79,14 @@ export function Desktop() {
 
   const [sessionManagerMinimized, setSessionManagerMinimized] = useState(false)
   const [flutterRunnerMinimized, setFlutterRunnerMinimized] = useState(false)
-  const [researchBrowserMinimized, setResearchBrowserMinimized] = useState(false)
+
   const [flutterCodeEditorMinimized, setFlutterCodeEditorMinimized] = useState(false)
   const [latexEditorMinimized, setLaTeXEditorMinimized] = useState(false)
+  const [quizAppMinimized, setQuizAppMinimized] = useState(false)
 
   const [powerState, setPowerState] = useState<'active' | 'sleep' | 'restart' | 'shutdown'>('active')
   const [globalZIndex, setGlobalZIndex] = useState(1000)
-  const [windowZIndices, setWindowZIndices] = useState<{[key: string]: number}>({})
+  const [windowZIndices, setWindowZIndices] = useState<{ [key: string]: number }>({})
 
   const getNextZIndex = () => {
     const nextZ = globalZIndex + 1
@@ -103,9 +106,10 @@ export function Desktop() {
     setGeminiChatOpen(false)
     setSessionManagerOpen(false)
     setFlutterRunnerOpen(false)
-    setResearchBrowserOpen(false)
+
     setFlutterCodeEditorOpen(false)
     setLaTeXEditorOpen(false)
+    setQuizAppOpen(false)
 
     // Reset all minimized states
     setFileManagerMinimized(false)
@@ -114,9 +118,10 @@ export function Desktop() {
     setGeminiChatMinimized(false)
     setSessionManagerMinimized(false)
     setFlutterRunnerMinimized(false)
-    setResearchBrowserMinimized(false)
+
     setFlutterCodeEditorMinimized(false)
     setLaTeXEditorMinimized(false)
+    setQuizAppMinimized(false)
 
     // Reset window z-indices
     setWindowZIndices({})
@@ -199,16 +204,7 @@ export function Desktop() {
     setActiveFlutterApp(null)
   }
 
-  const openResearchBrowser = () => {
-    setResearchBrowserOpen(true)
-    setResearchBrowserMinimized(false)
-    setWindowZIndices(prev => ({ ...prev, researchBrowser: getNextZIndex() }))
-  }
 
-  const closeResearchBrowser = () => {
-    setResearchBrowserOpen(false)
-    setResearchBrowserMinimized(false)
-  }
 
   const openFlutterCodeEditor = () => {
     setFlutterCodeEditorOpen(true)
@@ -232,6 +228,17 @@ export function Desktop() {
     setLaTeXEditorMinimized(false)
   }
 
+  const openQuizApp = () => {
+    setQuizAppOpen(true)
+    setQuizAppMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, quizApp: getNextZIndex() }))
+  }
+
+  const closeQuizApp = () => {
+    setQuizAppOpen(false)
+    setQuizAppMinimized(false)
+  }
+
   const handleOpenApp = (appId: string) => {
     switch (appId) {
       case 'files':
@@ -251,15 +258,16 @@ export function Desktop() {
       case 'sessions':
         openSessionManager()
         break
-      case 'research':
-        openResearchBrowser()
-        break
+
       case 'flutter-editor':
         openFlutterCodeEditor()
         break
       case 'latex-editor':
         openLaTeXEditor()
         break
+      case 'quiz':
+        openQuizApp()
+        break
     }
   }
 
@@ -513,22 +521,7 @@ export function Desktop() {
     })
   }
 
-  if (researchBrowserMinimized && researchBrowserOpen) {
-    minimizedApps.push({
-      id: 'research',
-      label: 'Research',
-      icon: (
-        <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
-          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
-          <Globe size={20} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
-          <div className="absolute bottom-1 right-1 bg-white/20 p-0.5 rounded-full backdrop-blur-md shadow-sm">
-            <Sparkle size={6} weight="fill" className="text-yellow-300" />
-          </div>
-        </div>
-      ),
-      onRestore: () => setResearchBrowserMinimized(false)
-    })
-  }
+
 
   if (flutterCodeEditorMinimized && flutterCodeEditorOpen) {
     minimizedApps.push({
@@ -564,6 +557,20 @@ export function Desktop() {
     })
   }
 
+  if (quizAppMinimized && quizAppOpen) {
+    minimizedApps.push({
+      id: 'quiz',
+      label: 'Quiz Master',
+      icon: (
+        <div className="bg-gradient-to-br from-teal-400 to-emerald-500 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <Brain size={20} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+        </div>
+      ),
+      onRestore: () => setQuizAppMinimized(false)
+    })
+  }
+
   // Debug info
   useEffect(() => {
     console.log('App States:', {
@@ -693,16 +700,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
-            <DraggableDesktopIcon
-              id="research"
-              label="Research"
-              iconType="research"
-              initialPosition={{ x: 0, y: 0 }}
-              onClick={() => { }}
-              onDoubleClick={openResearchBrowser}
-            />
-          </div>
+
 
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
@@ -725,6 +723,17 @@ export function Desktop() {
               onDoubleClick={openLaTeXEditor}
             />
           </div>
+
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="quiz"
+              label="Quiz Master"
+              iconType="quiz"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={openQuizApp}
+            />
+          </div>
         </div>
 
         {/* Windows Container */}
@@ -747,10 +756,10 @@ export function Desktop() {
                 }}
               >
                 <FileManager
-                currentPath={currentPath}
-                onNavigate={setCurrentPath}
-                onClose={closeFileManager}
-                onOpenFlutterApp={openFlutterRunner}
+                  currentPath={currentPath}
+                  onNavigate={setCurrentPath}
+                  onClose={closeFileManager}
+                  onOpenFlutterApp={openFlutterRunner}
                   onMinimize={() => setFileManagerMinimized(true)}
                   onFocus={() => bringWindowToFront('fileManager')}
                   zIndex={windowZIndices.fileManager || 1000}
@@ -853,14 +862,14 @@ export function Desktop() {
                   display: sessionManagerMinimized ? 'none' : 'block'
                 }}
               >
-              <SessionManagerWindow
-                onClose={closeSessionManager}
-                sessionId={userSession}
-                sessionKey={sessionKey}
-                onMinimize={() => setSessionManagerMinimized(true)}
-              />
-            </motion.div>
-          )}
+                <SessionManagerWindow
+                  onClose={closeSessionManager}
+                  sessionId={userSession}
+                  sessionKey={sessionKey}
+                  onMinimize={() => setSessionManagerMinimized(true)}
+                />
+              </motion.div>
+            )}
 
             {flutterRunnerOpen && activeFlutterApp && (
               <motion.div
@@ -878,81 +887,84 @@ export function Desktop() {
                   display: flutterRunnerMinimized ? 'none' : 'block'
                 }}
               >
-              <FlutterRunner
-                initialCode={activeFlutterApp?.dartCode}
-                sessionId={userSession}
-                onClose={() => {
-                  setFlutterRunnerOpen(false)
-                  setActiveFlutterApp(null)
+                <FlutterRunner
+                  initialCode={activeFlutterApp?.dartCode}
+                  sessionId={userSession}
+                  onClose={() => {
+                    setFlutterRunnerOpen(false)
+                    setActiveFlutterApp(null)
+                  }}
+                  onMinimize={() => setFlutterRunnerMinimized(true)}
+                />
+              </motion.div>
+            )}
+
+
+
+            {flutterCodeEditorOpen && (
+              <motion.div
+                key="flutter-code-editor"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: flutterCodeEditorMinimized ? 0 : 1,
+                  scale: flutterCodeEditorMinimized ? 0.9 : 1,
+                  y: flutterCodeEditorMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto',
+                  display: flutterCodeEditorMinimized ? 'none' : 'block'
                 }}
-                onMinimize={() => setFlutterRunnerMinimized(true)}
-              />
-            </motion.div>
-          )}
-
-          {researchBrowserOpen && (
-            <motion.div
-              key="research-browser"
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{
-                opacity: researchBrowserMinimized ? 0 : 1,
-                scale: researchBrowserMinimized ? 0.9 : 1,
-                y: researchBrowserMinimized ? 100 : 0,
-              }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.2 }}
-              style={{
-                pointerEvents: researchBrowserMinimized ? 'none' : 'auto',
-                display: researchBrowserMinimized ? 'none' : 'block'
-              }}
-            >
-              <ResearchBrowser
-                onClose={closeResearchBrowser}
-                onMinimize={() => setResearchBrowserMinimized(true)}
-              />
-            </motion.div>
-          )}
-
-          {flutterCodeEditorOpen && (
-            <motion.div
-              key="flutter-code-editor"
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{
-                opacity: flutterCodeEditorMinimized ? 0 : 1,
-                scale: flutterCodeEditorMinimized ? 0.9 : 1,
-                y: flutterCodeEditorMinimized ? 100 : 0,
-              }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.2 }}
-              style={{
-                pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto',
-                display: flutterCodeEditorMinimized ? 'none' : 'block'
-              }}
-            >
-              <FlutterCodeEditor onClose={closeFlutterCodeEditor} onMinimize={() => setFlutterCodeEditorMinimized(true)} />
-            </motion.div>
-          )}
-
-          {latexEditorOpen && (
-            <motion.div
-              key="latex-editor"
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{
-                opacity: latexEditorMinimized ? 0 : 1,
-                scale: latexEditorMinimized ? 0.9 : 1,
-                y: latexEditorMinimized ? 100 : 0,
-              }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.2 }}
-              style={{
-                pointerEvents: latexEditorMinimized ? 'none' : 'auto',
-                display: latexEditorMinimized ? 'none' : 'block'
-              }}
-            >
-              <LaTeXEditor onClose={closeLaTeXEditor} sessionId={userSession} onMinimize={() => setLaTeXEditorMinimized(true)} />
-            </motion.div>
-          )}
-        </AnimatePresence>
+              >
+                <FlutterCodeEditor onClose={closeFlutterCodeEditor} onMinimize={() => setFlutterCodeEditorMinimized(true)} />
+              </motion.div>
+            )}
+
+            {latexEditorOpen && (
+              <motion.div
+                key="latex-editor"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: latexEditorMinimized ? 0 : 1,
+                  scale: latexEditorMinimized ? 0.9 : 1,
+                  y: latexEditorMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: latexEditorMinimized ? 'none' : 'auto',
+                  display: latexEditorMinimized ? 'none' : 'block'
+                }}
+              >
+                <LaTeXEditor onClose={closeLaTeXEditor} sessionId={userSession} onMinimize={() => setLaTeXEditorMinimized(true)} />
+              </motion.div>
+            )}
+
+            {quizAppOpen && (
+              <motion.div
+                key="quiz-app"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: quizAppMinimized ? 0 : 1,
+                  scale: quizAppMinimized ? 0.9 : 1,
+                  y: quizAppMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: quizAppMinimized ? 'none' : 'auto',
+                  display: quizAppMinimized ? 'none' : 'block'
+                }}
+              >
+                <QuizApp
+                  onClose={closeQuizApp}
+                  onMinimize={() => setQuizAppMinimized(true)}
+                  zIndex={windowZIndices.quizApp || 1000}
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </div>
 

app/components/DraggableDesktopIcon.tsx

@@ -14,7 +14,8 @@ import {
   HardDrives,
   Code,
   Lightning,
-  Key
+  Key,
+  Brain
 } from '@phosphor-icons/react'
 import { DynamicClockIcon } from './DynamicClockIcon'
 import { DynamicCalendarIcon } from './DynamicCalendarIcon'
@@ -66,16 +67,7 @@ export function DraggableDesktopIcon({
             <DynamicClockIcon />
           </div>
         )
-      case 'research':
-        return (
-          <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
-            <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
-            <Globe size={36} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
-            <div className="absolute bottom-1.5 right-1.5 bg-white/20 p-1 rounded-full backdrop-blur-md shadow-sm">
-              <Sparkle size={10} weight="fill" className="text-yellow-300" />
-            </div>
-          </div>
-        )
+
       case 'flutter':
         return (
           <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
@@ -128,6 +120,13 @@ export function DraggableDesktopIcon({
             <Key size={32} weight="bold" className="text-white" />
           </div>
         )
+      case 'quiz':
+        return (
+          <div className="bg-gradient-to-br from-teal-400 to-emerald-500 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+            <Brain size={36} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+          </div>
+        )
       default:
         return (
           <div className="bg-gray-400 w-full h-full rounded-xl flex items-center justify-center">

app/components/FileManager.tsx

@@ -32,7 +32,8 @@ import {
   Calendar as CalendarIcon,
   Clock as ClockIcon,
   Sparkle,
-  Lightning
+  Lightning,
+  Brain
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { FilePreview } from './FilePreview'
@@ -351,17 +352,7 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         </div>
       )
     },
-    {
-      id: 'research', name: 'Research', icon: (
-        <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
-          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
-          <Globe size={32} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
-          <div className="absolute bottom-1.5 right-1.5 bg-white/20 p-1 rounded-full backdrop-blur-md shadow-sm">
-            <Sparkle size={10} weight="fill" className="text-yellow-300" />
-          </div>
-        </div>
-      )
-    },
+
     {
       id: 'flutter-editor', name: 'Flutter IDE', icon: (
         <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
@@ -384,6 +375,14 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         </div>
       )
     },
+    {
+      id: 'quiz', name: 'Quiz Master', icon: (
+        <div className="bg-gradient-to-br from-teal-400 to-emerald-500 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <Brain size={32} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+        </div>
+      )
+    },
   ]
 
   return (

app/components/QuizApp.tsx

@@ -0,0 +1,320 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+    CheckCircle,
+    XCircle,
+    CaretRight,
+    CaretLeft,
+    Brain,
+    Spinner,
+    Trophy,
+    ArrowClockwise
+} from '@phosphor-icons/react'
+import Window from './Window'
+
+interface QuizQuestion {
+    id: number
+    question: string
+    options: string[]
+}
+
+interface QuizAppProps {
+    onClose: () => void
+    onMinimize: () => void
+    zIndex: number
+}
+
+export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
+    const [questions, setQuestions] = useState<QuizQuestion[]>([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
+    const [answers, setAnswers] = useState<Record<number, string>>({})
+    const [completed, setCompleted] = useState(false)
+    const [saving, setSaving] = useState(false)
+
+    const loadQuiz = async () => {
+        setLoading(true)
+        setError(null)
+        try {
+            // Try to fetch from public folder first
+            const response = await fetch('/api/public?folder=')
+            const data = await response.json()
+
+            const quizFile = data.files?.find((f: any) => f.name === 'quiz.json')
+
+            if (!quizFile) {
+                setError('No quiz found. Ask Claude to "create a quiz" first!')
+                setLoading(false)
+                return
+            }
+
+            // Fetch the actual content
+            // Since we don't have a direct "read file content" API for public files easily exposed here without downloading,
+            // we might need to rely on the download endpoint or a specific content endpoint.
+            // However, for this hackathon context, let's assume we can fetch it via the download URL or a direct public URL if served statically.
+            // If it's in public/, it might be served statically by Next.js if in the public folder of the project.
+            // But the 'public' folder in FileManager is virtual or mapped. 
+            // Let's try to fetch via the download API which returns the file content if we use the right headers or just fetch it if it's static.
+
+            // Actually, the best way is to use the same mechanism the FileManager uses or just assume Claude writes to 'public/quiz.json' which maps to the real public folder.
+            // If Claude writes to the real 'public' folder, it's available at /quiz.json
+
+            const quizResponse = await fetch('/quiz.json')
+            if (!quizResponse.ok) {
+                // Fallback: try to read via the API if it was uploaded via the file manager API
+                // This is a bit tricky without a direct "read content" API. 
+                // Let's assume for this demo that Claude writes to 'public/quiz.json' and it's available at root.
+                throw new Error('Could not load quiz.json')
+            }
+
+            const quizData = await quizResponse.json()
+            if (Array.isArray(quizData)) {
+                setQuestions(quizData)
+            } else if (quizData.questions) {
+                setQuestions(quizData.questions)
+            } else {
+                throw new Error('Invalid quiz format')
+            }
+        } catch (err) {
+            console.error('Error loading quiz:', err)
+            // Fallback for demo purposes if file not found
+            // setError('Could not load quiz.json. Please ask Claude to generate one.')
+
+            // For testing/demo, let's provide a mock if fetch fails, or just show the error.
+            // The user specifically wants the flow with Claude, so showing the error is better to prompt the user.
+            setError('Waiting for Claude to generate a quiz... (File public/quiz.json not found)')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        loadQuiz()
+    }, [])
+
+    const handleOptionSelect = (option: string) => {
+        setAnswers(prev => ({
+            ...prev,
+            [questions[currentQuestionIndex].id]: option
+        }))
+    }
+
+    const handleNext = () => {
+        if (currentQuestionIndex < questions.length - 1) {
+            setCurrentQuestionIndex(prev => prev + 1)
+        } else {
+            finishQuiz()
+        }
+    }
+
+    const handlePrev = () => {
+        if (currentQuestionIndex > 0) {
+            setCurrentQuestionIndex(prev => prev - 1)
+        }
+    }
+
+    const finishQuiz = async () => {
+        setSaving(true)
+        try {
+            // Save answers to public/quiz_answers.json
+            // We use the upload API to save the file
+            const answersJson = JSON.stringify(
+                Object.entries(answers).map(([id, answer]) => ({
+                    questionId: parseInt(id),
+                    answer
+                })),
+                null,
+                2
+            )
+
+            const blob = new Blob([answersJson], { type: 'application/json' })
+            const file = new File([blob], 'quiz_answers.json', { type: 'application/json' })
+
+            const formData = new FormData()
+            formData.append('file', file)
+            formData.append('folder', '') // Root of public
+
+            await fetch('/api/public', {
+                method: 'POST',
+                body: formData
+            })
+
+            setCompleted(true)
+        } catch (err) {
+            console.error('Error saving answers:', err)
+            alert('Failed to save answers. Please try again.')
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    return (
+        <Window
+            id="quiz-app"
+            title="Quiz Master"
+            isOpen={true}
+            onClose={onClose}
+            onMinimize={onMinimize}
+            zIndex={zIndex}
+            width={800}
+            height={600}
+            className="bg-[#F5F5F7] font-[-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif]"
+        >
+            <div className="h-full flex flex-col">
+                {/* macOS-style Header/Toolbar */}
+                <div className="bg-[#F5F5F7]/80 backdrop-blur-xl border-b border-[#000000]/10 p-4 flex items-center justify-between sticky top-0 z-10">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-gradient-to-br from-teal-400 to-emerald-500 rounded-lg shadow-sm flex items-center justify-center border border-white/10">
+                            <Brain size={24} weight="fill" className="text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-lg font-semibold text-gray-900 tracking-tight">Quiz Master</h1>
+                            <p className="text-xs text-gray-500">Knowledge Check</p>
+                        </div>
+                    </div>
+
+                    {!loading && !error && !completed && (
+                        <div className="flex items-center gap-2 bg-white/50 px-3 py-1 rounded-md border border-black/5">
+                            <span className="text-xs font-medium text-gray-500">Question {currentQuestionIndex + 1} of {questions.length}</span>
+                        </div>
+                    )}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 p-8 overflow-y-auto flex flex-col items-center">
+                    {loading ? (
+                        <div className="flex flex-col items-center justify-center h-full gap-4 text-gray-500">
+                            <Spinner size={32} className="animate-spin text-gray-400" />
+                            <p className="text-sm font-medium">Loading quiz...</p>
+                        </div>
+                    ) : error ? (
+                        <div className="flex flex-col items-center justify-center h-full max-w-md text-center">
+                            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                                <Brain size={32} weight="duotone" className="text-gray-400" />
+                            </div>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">No Quiz Found</h3>
+                            <p className="text-sm text-gray-500 mb-6 leading-relaxed">{error}</p>
+
+                            <div className="bg-white p-4 rounded-xl border border-gray-200 shadow-sm w-full text-left mb-6">
+                                <p className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">How to start</p>
+                                <ol className="text-sm text-gray-600 space-y-2 list-decimal pl-4">
+                                    <li>Open <span className="font-semibold text-gray-900">Claude Desktop</span></li>
+                                    <li>Ask: "Create a quiz about [Topic]"</li>
+                                    <li>Wait for the file to be generated</li>
+                                </ol>
+                            </div>
+
+                            <button
+                                onClick={loadQuiz}
+                                className="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors flex items-center gap-2"
+                            >
+                                <ArrowClockwise size={16} />
+                                Check Again
+                            </button>
+                        </div>
+                    ) : completed ? (
+                        <div className="flex flex-col items-center justify-center h-full max-w-md text-center animate-in fade-in zoom-in duration-300">
+                            <div className="w-20 h-20 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mb-6 shadow-lg shadow-green-500/20">
+                                <Trophy size={40} weight="fill" className="text-white" />
+                            </div>
+                            <h2 className="text-2xl font-bold text-gray-900 mb-2">Quiz Completed</h2>
+                            <p className="text-gray-500 mb-8">Your answers have been saved successfully.</p>
+
+                            <div className="bg-blue-50 p-5 rounded-xl border border-blue-100 mb-8 w-full">
+                                <p className="font-medium text-blue-900 text-sm mb-1">Next Step</p>
+                                <p className="text-blue-700 text-sm">
+                                    Ask Claude to <span className="font-semibold">"Grade my quiz answers"</span>
+                                </p>
+                            </div>
+
+                            <button
+                                onClick={onClose}
+                                className="px-6 py-2 bg-[#007AFF] text-white rounded-lg shadow-sm hover:bg-[#0062CC] active:bg-[#0051A8] transition-colors text-sm font-medium"
+                            >
+                                Done
+                            </button>
+                        </div>
+                    ) : questions.length > 0 ? (
+                        <div className="w-full max-w-2xl flex flex-col h-full justify-center">
+                            {/* Question Card */}
+                            <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.08)] border border-gray-200/60 overflow-hidden">
+                                <div className="p-8 border-b border-gray-100">
+                                    <h3 className="text-xl font-semibold text-gray-900 leading-relaxed">
+                                        {questions[currentQuestionIndex].question}
+                                    </h3>
+                                </div>
+
+                                <div className="p-4 bg-gray-50/50 space-y-2">
+                                    {questions[currentQuestionIndex].options.map((option, idx) => {
+                                        const isSelected = answers[questions[currentQuestionIndex].id] === option
+                                        return (
+                                            <button
+                                                key={idx}
+                                                onClick={() => handleOptionSelect(option)}
+                                                className={`w-full text-left px-4 py-3.5 rounded-lg border transition-all duration-200 flex items-center gap-3 text-[15px] ${isSelected
+                                                        ? 'bg-[#007AFF] border-[#007AFF] text-white shadow-md shadow-blue-500/20'
+                                                        : 'bg-white border-gray-200 hover:border-gray-300 hover:bg-gray-50 text-gray-700'
+                                                    }`}
+                                            >
+                                                <div className={`w-5 h-5 rounded-full border flex items-center justify-center flex-shrink-0 ${isSelected ? 'border-white bg-white/20' : 'border-gray-300'
+                                                    }`}>
+                                                    {isSelected && <div className="w-2.5 h-2.5 bg-white rounded-full" />}
+                                                </div>
+                                                <span className="font-medium">{option}</span>
+                                            </button>
+                                        )
+                                    })}
+                                </div>
+
+                                <div className="px-6 py-4 bg-white border-t border-gray-100 flex justify-between items-center">
+                                    <button
+                                        onClick={handlePrev}
+                                        disabled={currentQuestionIndex === 0}
+                                        className="flex items-center gap-1.5 px-3 py-1.5 text-gray-500 hover:text-gray-800 disabled:opacity-30 disabled:hover:text-gray-500 transition-colors text-sm font-medium"
+                                    >
+                                        <CaretLeft size={16} weight="bold" />
+                                        Back
+                                    </button>
+
+                                    <button
+                                        onClick={handleNext}
+                                        disabled={!answers[questions[currentQuestionIndex].id]}
+                                        className={`flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium shadow-sm transition-all ${!answers[questions[currentQuestionIndex].id]
+                                                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                                                : 'bg-[#007AFF] text-white hover:bg-[#0062CC] active:bg-[#0051A8]'
+                                            }`}
+                                    >
+                                        {currentQuestionIndex === questions.length - 1 ? 'Finish' : 'Next'}
+                                        {currentQuestionIndex !== questions.length - 1 && <CaretRight size={16} weight="bold" />}
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* Progress Indicator */}
+                            <div className="mt-8 flex items-center justify-center gap-1.5">
+                                {questions.map((_, idx) => (
+                                    <div
+                                        key={idx}
+                                        className={`h-1.5 rounded-full transition-all duration-300 ${idx === currentQuestionIndex
+                                                ? 'w-8 bg-[#007AFF]'
+                                                : idx < currentQuestionIndex
+                                                    ? 'w-1.5 bg-gray-300'
+                                                    : 'w-1.5 bg-gray-200'
+                                            }`}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="text-center text-gray-500">
+                            <p>No questions available.</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Window>
+    )
+}

app/components/ResearchBrowser.tsx

@@ -1,657 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import Window from './Window'
-import { Search, Globe, Brain, Loader2, X, ChevronDown, ChevronUp, Sparkles, AlertCircle, Mic, Scan, ArrowLeft, Bot } from 'lucide-react'
-
-interface ResearchAgent {
-  id: string
-  name: string
-  status: 'idle' | 'searching' | 'analyzing' | 'complete' | 'error'
-  query: string
-  results: string[]
-  progress: number
-  currentUrl?: string
-}
-
-interface ResearchResult {
-  id: string
-  title: string
-  summary: string
-  source: string
-  url: string
-  relevance: number
-  timestamp: Date
-  agentId: string
-}
-
-interface ResearchBrowserProps {
-  onClose?: () => void
-  onMinimize?: () => void
-  onMaximize?: () => void
-}
-
-export function ResearchBrowser({ onClose, onMinimize, onMaximize }: ResearchBrowserProps) {
-  const [prompt, setPrompt] = useState('')
-  const [isResearching, setIsResearching] = useState(false)
-  const [hasSearched, setHasSearched] = useState(false)
-  const [agents, setAgents] = useState<ResearchAgent[]>([])
-  const [results, setResults] = useState<ResearchResult[]>([])
-  const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set())
-  const [selectedResult, setSelectedResult] = useState<ResearchResult | null>(null)
-  const resultsRef = useRef<HTMLDivElement>(null)
-
-  // Initialize research agents
-  const initializeAgents = (query: string) => {
-    const newAgents: ResearchAgent[] = [
-      {
-        id: 'web-search',
-        name: 'Web Search Agent',
-        status: 'idle',
-        query: query,
-        results: [],
-        progress: 0
-      },
-      {
-        id: 'academic',
-        name: 'Academic Research Agent',
-        status: 'idle',
-        query: query,
-        results: [],
-        progress: 0
-      },
-      {
-        id: 'news',
-        name: 'News & Current Events Agent',
-        status: 'idle',
-        query: query,
-        results: [],
-        progress: 0
-      },
-      {
-        id: 'deep-analysis',
-        name: 'Deep Analysis Agent',
-        status: 'idle',
-        query: query,
-        results: [],
-        progress: 0
-      },
-      {
-        id: 'fact-check',
-        name: 'Fact Checking Agent',
-        status: 'idle',
-        query: query,
-        results: [],
-        progress: 0
-      }
-    ]
-    setAgents(newAgents)
-    return newAgents
-  }
-
-  // Simulate agent research process
-  const runAgent = async (agent: ResearchAgent) => {
-    // Update agent status to searching
-    setAgents(prev => prev.map(a =>
-      a.id === agent.id ? { ...a, status: 'searching', progress: 10 } : a
-    ))
-
-    // Simulate search phase
-    await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000))
-
-    setAgents(prev => prev.map(a =>
-      a.id === agent.id ? { ...a, status: 'analyzing', progress: 50 } : a
-    ))
-
-    // Simulate analysis phase
-    await new Promise(resolve => setTimeout(resolve, 1500 + Math.random() * 2000))
-
-    // Generate mock results based on agent type
-    const mockResults = generateMockResults(agent)
-
-    setAgents(prev => prev.map(a =>
-      a.id === agent.id ? {
-        ...a,
-        status: 'complete',
-        progress: 100,
-        results: mockResults.map(r => r.title)
-      } : a
-    ))
-
-    // Add results to global results
-    setResults(prev => [...prev, ...mockResults])
-  }
-
-  // Generate mock research results
-  const generateMockResults = (agent: ResearchAgent): ResearchResult[] => {
-    const baseResults = {
-      'web-search': [
-        {
-          title: `Understanding ${agent.query}: A Comprehensive Overview`,
-          summary: `Detailed analysis of ${agent.query} including recent developments, key concepts, and practical applications in various fields.`,
-          source: 'Wikipedia',
-          url: `https://en.wikipedia.org/wiki/${agent.query.replace(' ', '_')}`
-        },
-        {
-          title: `${agent.query} - Latest Research and Insights`,
-          summary: `Recent studies show significant advancements in ${agent.query}. Experts predict continued growth and innovation in this area.`,
-          source: 'Research Gate',
-          url: `https://www.researchgate.net/search/${agent.query}`
-        }
-      ],
-      'academic': [
-        {
-          title: `Peer-Reviewed Study on ${agent.query}`,
-          summary: `A comprehensive academic analysis examining the theoretical foundations and empirical evidence related to ${agent.query}.`,
-          source: 'Google Scholar',
-          url: `https://scholar.google.com/search?q=${agent.query}`
-        },
-        {
-          title: `${agent.query}: A Systematic Review`,
-          summary: `Meta-analysis of 50+ studies on ${agent.query}, revealing key patterns and future research directions.`,
-          source: 'PubMed',
-          url: `https://pubmed.ncbi.nlm.nih.gov/?term=${agent.query}`
-        }
-      ],
-      'news': [
-        {
-          title: `Breaking: New Developments in ${agent.query}`,
-          summary: `Recent news coverage highlights important changes and updates in the field of ${agent.query}.`,
-          source: 'Reuters',
-          url: `https://www.reuters.com/search/news?q=${agent.query}`
-        },
-        {
-          title: `${agent.query} Industry Report 2024`,
-          summary: `Market analysis shows growing interest in ${agent.query} with implications for various sectors.`,
-          source: 'Bloomberg',
-          url: `https://www.bloomberg.com/search?query=${agent.query}`
-        }
-      ],
-      'deep-analysis': [
-        {
-          title: `Deep Dive: The Complexity of ${agent.query}`,
-          summary: `An in-depth exploration of ${agent.query}, examining multiple perspectives, historical context, and future implications.`,
-          source: 'Analysis Engine',
-          url: '#'
-        },
-        {
-          title: `${agent.query}: Patterns and Connections`,
-          summary: `AI-powered analysis reveals hidden patterns and connections in ${agent.query} across multiple domains.`,
-          source: 'Deep Learning Analysis',
-          url: '#'
-        }
-      ],
-      'fact-check': [
-        {
-          title: `Fact Check: Common Myths about ${agent.query}`,
-          summary: `Verification of common claims and misconceptions about ${agent.query} using authoritative sources.`,
-          source: 'FactCheck.org',
-          url: `https://www.factcheck.org/search/${agent.query}`
-        },
-        {
-          title: `Verified Information on ${agent.query}`,
-          summary: `Cross-referenced facts and verified data about ${agent.query} from multiple trusted sources.`,
-          source: 'Snopes',
-          url: `https://www.snopes.com/search/?q=${agent.query}`
-        }
-      ]
-    }
-
-    return (baseResults[agent.id as keyof typeof baseResults] || []).map((result, index) => ({
-      ...result,
-      id: `${agent.id}-${index}`,
-      relevance: 0.9 - (index * 0.1),
-      timestamp: new Date(),
-      agentId: agent.id
-    }))
-  }
-
-  // Handle research submission
-  const handleResearch = async () => {
-    if (!prompt.trim()) return
-
-    setIsResearching(true)
-    setHasSearched(true)
-    setResults([])
-
-    // Initialize agents
-    const newAgents = initializeAgents(prompt)
-
-    try {
-      // Call Gemini to perform "Deep Research"
-      const response = await fetch('/api/gemini/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          message: `Perform a deep research on: "${prompt}". 
-          Return a JSON object with:
-          1. "crawledUrls": a list of 5-10 plausible URLs that were "crawled".
-          2. "results": a list of 5-8 research findings. Each finding has:
-             - title
-             - summary (2-3 sentences)
-             - source (domain name)
-             - url
-             - relevance (0.8 to 1.0)
-             - agentId (assign one of: 'web-search', 'academic', 'news', 'deep-analysis', 'fact-check')
-          Return ONLY raw JSON, no markdown formatting.`
-        })
-      })
-
-      const data = await response.json()
-      let parsedData
-
-      try {
-        // Clean up markdown code blocks if present
-        const cleanText = data.response.replace(/```json/g, '').replace(/```/g, '').trim()
-        parsedData = JSON.parse(cleanText)
-      } catch (e) {
-        console.error('Failed to parse Gemini response, falling back to mocks', e)
-        parsedData = null
-      }
-
-      if (parsedData && parsedData.results) {
-        // Simulate crawling and processing
-        const totalDuration = 4000 // 4 seconds total simulation
-        const interval = totalDuration / newAgents.length
-
-        // Update agents with crawling status
-        newAgents.forEach((agent, index) => {
-          setTimeout(() => {
-            setAgents(prev => prev.map(a => {
-              if (a.id === agent.id) {
-                // Assign random crawled URLs to this agent
-                const agentUrls = parsedData.crawledUrls
-                  ? parsedData.crawledUrls.slice(index * 2, (index * 2) + 2)
-                  : [`https://example.com/search?q=${encodeURIComponent(prompt)}`]
-
-                return {
-                  ...a,
-                  status: 'searching',
-                  progress: 30,
-                  currentUrl: agentUrls[0] || 'Scanning web...'
-                  // We could store these URLs to show what's being crawled if we added a UI for it
-                }
-              }
-              return a
-            }))
-          }, index * interval)
-
-          setTimeout(() => {
-            setAgents(prev => prev.map(a =>
-              a.id === agent.id ? { ...a, status: 'analyzing', progress: 70, currentUrl: 'Analyzing content...' } : a
-            ))
-          }, (index * interval) + (interval / 2))
-
-          setTimeout(() => {
-            setAgents(prev => prev.map(a => {
-              if (a.id === agent.id) {
-                const agentResults = parsedData.results.filter((r: any) => r.agentId === agent.id)
-                return {
-                  ...a,
-                  status: 'complete',
-                  progress: 100,
-                  results: agentResults.map((r: any) => r.title)
-                }
-              }
-              return a
-            }))
-          }, totalDuration + (index * 200))
-        })
-
-        // Set final results after simulation
-        setTimeout(() => {
-          const formattedResults = parsedData.results.map((r: any, i: number) => ({
-            ...r,
-            id: `res-${i}`,
-            timestamp: new Date(),
-            relevance: r.relevance || 0.9
-          }))
-          setResults(formattedResults)
-          setIsResearching(false)
-        }, totalDuration + 1000)
-
-      } else {
-        // Fallback to mocks if Gemini fails or returns invalid data
-        runMockSimulation(newAgents)
-      }
-
-    } catch (error) {
-      console.error('Research failed', error)
-      runMockSimulation(newAgents)
-    }
-  }
-
-  const runMockSimulation = async (currentAgents: ResearchAgent[]) => {
-    const agentPromises = currentAgents.map((agent, index) => {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          runAgent(agent).then(resolve)
-        }, index * 500)
-      })
-    })
-    await Promise.all(agentPromises)
-    setIsResearching(false)
-  }
-
-  // Toggle agent expansion
-  const toggleAgentExpansion = (agentId: string) => {
-    setExpandedAgents(prev => {
-      const newSet = new Set(prev)
-      if (newSet.has(agentId)) {
-        newSet.delete(agentId)
-      } else {
-        newSet.add(agentId)
-      }
-      return newSet
-    })
-  }
-
-  // Get agent status icon
-  const getAgentStatusIcon = (status: ResearchAgent['status']) => {
-    switch (status) {
-      case 'searching':
-        return <Loader2 className="animate-spin" size={16} />
-      case 'analyzing':
-        return <Brain className="animate-pulse" size={16} />
-      case 'complete':
-        return <Sparkles className="text-green-400" size={16} />
-      case 'error':
-        return <AlertCircle className="text-red-400" size={16} />
-      default:
-        return <Globe size={16} />
-    }
-  }
-
-  const resetSearch = () => {
-    setHasSearched(false)
-    setPrompt('')
-    setResults([])
-    setAgents([])
-  }
-
-  return (
-    <Window
-      id="research-browser"
-      title="AI Research Browser"
-      isOpen={true}
-      onClose={onClose || (() => { })}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      width={1200}
-      height={800}
-      x={100}
-      y={100}
-      darkMode={true}
-      className="research-browser-window"
-      contentClassName="bg-[#050505] text-white"
-    >
-      <div className="flex flex-col h-full relative overflow-hidden">
-        {/* Background Effects */}
-        <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
-          <div className="absolute top-[-20%] left-[20%] w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px]" />
-          <div className="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[100px]" />
-        </div>
-
-        {!hasSearched ? (
-          // Initial Home View
-          <div className="flex-1 flex flex-col items-center justify-center p-8 relative z-10 animate-in fade-in duration-700">
-            {/* Logo */}
-            <div className="mb-8 relative group">
-              <div className="absolute inset-0 bg-blue-500/30 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500" />
-              <div className="relative bg-gradient-to-br from-blue-500 to-cyan-400 p-4 rounded-2xl shadow-lg shadow-blue-500/20 border border-white/10">
-                <Bot size={48} className="text-white" />
-              </div>
-            </div>
-
-            {/* Greeting */}
-            <h1 className="text-5xl font-bold text-white mb-12 tracking-tight">Welcome to DeepResearch</h1>
-
-            {/* Search Bar */}
-            <div className="w-full max-w-2xl relative group">
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-md group-hover:blur-lg transition-all duration-500 opacity-0 group-hover:opacity-100" />
-              <div className="relative bg-[#1a1a1a]/80 backdrop-blur-xl border border-white/10 rounded-full p-2 flex items-center shadow-2xl">
-                <div className="pl-4 pr-2">
-                  <div className="w-6 h-6 border-l-2 border-blue-500/50 h-4 mx-2" />
-                </div>
-                <input
-                  type="text"
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                  onKeyPress={(e) => e.key === 'Enter' && handleResearch()}
-                  placeholder="Search now"
-                  className="flex-1 bg-transparent border-none outline-none text-white placeholder-gray-500 text-lg px-2 h-12"
-                  autoFocus
-                />
-                <div className="flex items-center gap-2 pr-2">
-                  <button className="p-2 text-gray-400 hover:text-white transition-colors rounded-full hover:bg-white/5">
-                    <Scan size={20} />
-                  </button>
-                  <button
-                    onClick={handleResearch}
-                    className="p-3 bg-white text-black rounded-full hover:bg-gray-200 transition-colors"
-                  >
-                    {isResearching ? <Loader2 size={20} className="animate-spin" /> : <Mic size={20} />}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          // Results View
-          <div className="flex flex-col h-full relative z-10">
-            {/* Top Bar */}
-            <div className="flex items-center gap-4 p-4 border-b border-white/10 bg-[#0a0a0a]/50 backdrop-blur-md">
-              <button
-                onClick={resetSearch}
-                className="p-2 hover:bg-white/10 rounded-lg transition-colors"
-              >
-                <ArrowLeft size={20} className="text-gray-400" />
-              </button>
-              <div className="flex-1 relative">
-                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
-                <input
-                  type="text"
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                  onKeyPress={(e) => e.key === 'Enter' && !isResearching && handleResearch()}
-                  className="w-full bg-[#1a1a1a] border border-white/10 rounded-lg pl-10 pr-4 py-2 text-sm text-white focus:outline-none focus:border-blue-500/50 transition-colors"
-                />
-              </div>
-            </div>
-
-            <div className="flex-1 flex overflow-hidden">
-              {/* Left Panel - Agents */}
-              <div className="w-80 border-r border-white/10 bg-[#0a0a0a]/30 overflow-y-auto p-4">
-                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Research Agents</h3>
-                <div className="space-y-3">
-                  {agents.map(agent => (
-                    <div
-                      key={agent.id}
-                      className="bg-[#1a1a1a] rounded-lg border border-white/5 overflow-hidden"
-                    >
-                      <button
-                        onClick={() => toggleAgentExpansion(agent.id)}
-                        className="w-full px-3 py-3 flex items-center justify-between hover:bg-white/5 transition-colors"
-                      >
-                        <div className="flex items-center gap-3">
-                          <div className={`p-1.5 rounded-md ${agent.status === 'complete' ? 'bg-green-500/10 text-green-400' :
-                            agent.status === 'error' ? 'bg-red-500/10 text-red-400' :
-                              agent.status === 'searching' || agent.status === 'analyzing' ? 'bg-blue-500/10 text-blue-400' :
-                                'bg-gray-500/10 text-gray-400'
-                            }`}>
-                            {getAgentStatusIcon(agent.status)}
-                          </div>
-                          <span className="text-sm font-medium text-gray-200">{agent.name}</span>
-                        </div>
-                        {expandedAgents.has(agent.id) ? <ChevronUp size={14} className="text-gray-500" /> : <ChevronDown size={14} className="text-gray-500" />}
-                      </button>
-
-                      {expandedAgents.has(agent.id) && (
-                        <div className="px-3 py-3 border-t border-white/5 bg-black/20">
-                          <div className="text-xs text-gray-600 mb-2">
-                            <div className="flex justify-between items-center mb-1">
-                              <span>Status: <span className="font-medium capitalize text-gray-300">{agent.status}</span></span>
-                            </div>
-                            {agent.currentUrl && (agent.status === 'searching' || agent.status === 'analyzing') && (
-                              <div className="text-blue-400 truncate max-w-full mb-2 font-mono text-[10px]">
-                                Crawling: {agent.currentUrl}
-                              </div>
-                            )}
-                          </div>
-                          {agent.progress > 0 && agent.progress < 100 && (
-                            <div className="mb-2">
-                              <div className="w-full bg-gray-800 rounded-full h-1">
-                                <div
-                                  className="bg-blue-500 h-1 rounded-full transition-all duration-500"
-                                  style={{ width: `${agent.progress}%` }}
-                                />
-                              </div>
-                            </div>
-                          )}
-                          {agent.results.length > 0 && (
-                            <div className="text-xs text-gray-500">
-                              Found <span className="text-white">{agent.results.length}</span> results
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Right Panel - Results */}
-              <div className="flex-1 overflow-y-auto p-6" ref={resultsRef}>
-                <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
-                  <Sparkles size={20} className="text-blue-400" />
-                  Research Results
-                </h3>
-
-                <div className="space-y-4">
-                  {results
-                    .sort((a, b) => b.relevance - a.relevance)
-                    .map(result => (
-                      <div
-                        key={result.id}
-                        className="group bg-[#1a1a1a] border border-white/5 rounded-xl p-5 hover:border-blue-500/30 hover:bg-[#202020] transition-all cursor-pointer"
-                        onClick={() => setSelectedResult(result)}
-                      >
-                        <div className="flex items-start justify-between mb-3">
-                          <h4 className="text-lg font-medium text-blue-400 group-hover:text-blue-300 transition-colors flex-1">
-                            {result.title}
-                          </h4>
-                          <span className="text-xs bg-blue-500/10 text-blue-400 px-2 py-1 rounded ml-4 border border-blue-500/20">
-                            {Math.round(result.relevance * 100)}% match
-                          </span>
-                        </div>
-
-                        <p className="text-sm text-gray-400 mb-4 line-clamp-2 leading-relaxed">
-                          {result.summary}
-                        </p>
-
-                        <div className="flex items-center justify-between text-xs text-gray-500">
-                          <div className="flex items-center gap-4">
-                            <span className="flex items-center gap-1.5">
-                              <Globe size={12} />
-                              {result.source}
-                            </span>
-                            <span className="flex items-center gap-1.5">
-                              <Bot size={12} />
-                              {agents.find(a => a.id === result.agentId)?.name}
-                            </span>
-                          </div>
-                          {result.url !== '#' && (
-                            <span className="text-blue-500/50 group-hover:text-blue-400 flex items-center gap-1 transition-colors">
-                              View Source <ArrowLeft size={12} className="rotate-180" />
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Selected Result Modal */}
-        {selectedResult && (
-          <div
-            className="absolute inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-8"
-            onClick={() => setSelectedResult(null)}
-          >
-            <div
-              className="bg-[#1a1a1a] border border-white/10 rounded-2xl w-full max-w-3xl max-h-full overflow-hidden flex flex-col shadow-2xl"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="p-6 border-b border-white/10 flex items-center justify-between bg-[#202020]">
-                <h3 className="text-xl font-semibold text-white pr-8">{selectedResult.title}</h3>
-                <button
-                  onClick={() => setSelectedResult(null)}
-                  className="p-2 hover:bg-white/10 rounded-lg text-gray-400 hover:text-white transition-colors"
-                >
-                  <X size={20} />
-                </button>
-              </div>
-
-              <div className="p-8 overflow-y-auto">
-                <div className="flex items-center gap-4 mb-6 text-sm text-gray-500">
-                  <span className="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-full">
-                    <Globe size={14} />
-                    {selectedResult.source}
-                  </span>
-                  <span className="flex items-center gap-2 px-3 py-1.5 bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20">
-                    <Sparkles size={14} />
-                    {Math.round(selectedResult.relevance * 100)}% relevance
-                  </span>
-                </div>
-
-                <div className="prose prose-invert max-w-none">
-                  <p className="text-gray-300 text-lg leading-relaxed">{selectedResult.summary}</p>
-
-                  <div className="mt-8 p-6 bg-black/30 rounded-xl border border-white/5">
-                    <h4 className="font-semibold text-white mb-4 flex items-center gap-2">
-                      <Scan size={18} className="text-purple-400" />
-                      Research Details
-                    </h4>
-                    <ul className="space-y-3 text-sm text-gray-400">
-                      <li className="flex items-center gap-2">
-                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
-                        Agent: <span className="text-gray-300">{agents.find(a => a.id === selectedResult.agentId)?.name}</span>
-                      </li>
-                      <li className="flex items-center gap-2">
-                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
-                        Timestamp: <span className="text-gray-300">{selectedResult.timestamp.toLocaleString()}</span>
-                      </li>
-                      <li className="flex items-center gap-2">
-                        <span className="w-1.5 h-1.5 bg-gray-600 rounded-full" />
-                        Source URL:
-                        {selectedResult.url !== '#' ? (
-                          <a href={selectedResult.url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 ml-1">
-                            {selectedResult.url}
-                          </a>
-                        ) : <span className="text-gray-300 ml-1">Internal Analysis</span>}
-                      </li>
-                    </ul>
-                  </div>
-
-                  {selectedResult.url !== '#' && (
-                    <div className="mt-8 flex justify-end">
-                      <a
-                        href={selectedResult.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-500 transition-all shadow-lg shadow-blue-600/20 font-medium"
-                      >
-                        View Full Source
-                        <Globe size={18} />
-                      </a>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </Window>
-  )
-}

app/components/SpotlightSearch.tsx

@@ -10,7 +10,8 @@ import {
   Sparkle,
   Globe,
   DeviceMobile,
-  Function as FunctionIcon
+  Function as FunctionIcon,
+  Brain
 } from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
 
@@ -37,9 +38,10 @@ export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchP
     { id: 'calendar', name: 'Calendar', type: 'app', icon: <div className="w-6 h-6 bg-white rounded-md flex items-center justify-center border border-gray-200"><Calendar size={16} weight="regular" className="text-red-500" /></div> },
     { id: 'clock', name: 'Clock', type: 'app', icon: <div className="w-6 h-6 bg-white rounded-full flex items-center justify-center border border-gray-200"><Clock size={16} weight="regular" className="text-black" /></div> },
     { id: 'gemini', name: 'Gemini Chat', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-white to-blue-50 rounded-md flex items-center justify-center border border-white/50"><Sparkle size={16} weight="fill" className="text-blue-500" /></div> },
-    { id: 'research', name: 'Research', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-purple-500 to-indigo-600 rounded-md flex items-center justify-center border border-white/20"><Globe size={16} weight="duotone" className="text-white" /></div> },
+
     { id: 'flutter-editor', name: 'Flutter IDE', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] rounded-md flex items-center justify-center border border-white/20"><DeviceMobile size={16} weight="fill" className="text-white" /></div> },
     { id: 'latex-editor', name: 'LaTeX Studio', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-slate-700 to-slate-900 rounded-md flex items-center justify-center border border-white/20"><FunctionIcon size={16} weight="bold" className="text-green-400" /></div> },
+    { id: 'quiz', name: 'Quiz Master', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-br from-teal-400 to-emerald-500 rounded-md flex items-center justify-center border border-white/20"><Brain size={16} weight="fill" className="text-white" /></div> },
   ]
 
   const files: SearchResult[] = [
@@ -102,7 +104,7 @@ export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchP
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/20 z-[60]"
+            className="fixed inset-0 bg-black/20 z-[9998]"
             onClick={onClose}
           />
 
@@ -112,7 +114,7 @@ export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchP
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.95, y: -20 }}
             transition={{ duration: 0.15, ease: 'easeOut' }}
-            className="fixed top-[20%] left-1/2 -translate-x-1/2 w-[600px] max-w-[90%] glass rounded-xl shadow-2xl z-[70]"
+            className="fixed top-[20%] left-1/2 -translate-x-1/2 w-[600px] max-w-[90%] glass rounded-xl shadow-2xl z-[9999]"
           >
             <div className="flex items-center px-4 py-3 gap-3 border-b border-gray-200/20">
               <MagnifyingGlass size={24} weight="regular" className="text-gray-600" />