feat: Update Quiz App with Passkey and add read_file tool

app/components/QuizApp.tsx

@@ -10,14 +10,20 @@ import {
     Brain,
     Spinner,
     Trophy,
-    ArrowClockwise
+    ArrowClockwise,
+    Lock,
+    Key,
+    Copy,
+    ClipboardText
 } from '@phosphor-icons/react'
 import Window from './Window'
 
 interface QuizQuestion {
-    id: number
+    id: number | string
     question: string
     options: string[]
+    correctAnswer?: string | number | boolean
+    explanation?: string
 }
 
 interface QuizAppProps {
@@ -27,22 +33,45 @@ interface QuizAppProps {
 }
 
 export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
+    const [passkey, setPasskey] = useState('')
+    const [tempPasskey, setTempPasskey] = useState('')
+    const [isLocked, setIsLocked] = useState(true)
+
     const [questions, setQuestions] = useState<QuizQuestion[]>([])
-    const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(false)
     const [error, setError] = useState<string | null>(null)
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
-    const [answers, setAnswers] = useState<Record<number, string>>({})
+    const [answers, setAnswers] = useState<Record<string, string>>({})
     const [completed, setCompleted] = useState(false)
     const [saving, setSaving] = useState(false)
+    const [copySuccess, setCopySuccess] = useState(false)
+
+    // Check if quiz has answers embedded (for immediate feedback)
+    const hasEmbeddedAnswers = questions.some(q => q.correctAnswer !== undefined)
 
-    const loadQuiz = async () => {
+    const handlePasskeySubmit = () => {
+        if (tempPasskey.trim().length >= 4) {
+            setPasskey(tempPasskey.trim())
+            setIsLocked(false)
+            loadQuiz(tempPasskey.trim())
+        } else {
+            alert('Passkey must be at least 4 characters')
+        }
+    }
+
+    const loadQuiz = async (key: string) => {
         setLoading(true)
         setError(null)
         try {
-            // Try to fetch from public folder first
-            const response = await fetch('/api/public?folder=')
+            // Fetch from secure data using passkey
+            const response = await fetch(`/api/data?key=${encodeURIComponent(key)}&folder=`)
             const data = await response.json()
 
+            if (data.error) {
+                throw new Error(data.error)
+            }
+
+            // Look for quiz.json
             const quizFile = data.files?.find((f: any) => f.name === 'quiz.json')
 
             if (!quizFile) {
@@ -51,26 +80,23 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                 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')
+            // Parse content
+            let quizData
+            if (typeof quizFile.content === 'string') {
+                try {
+                    quizData = JSON.parse(quizFile.content)
+                } catch (e) {
+                    // Maybe it's double encoded or raw text
+                    quizData = quizFile.content
+                }
+            } else {
+                quizData = quizFile.content
+            }
+
+            if (!quizData) {
+                throw new Error('Quiz file is empty')
             }
 
-            const quizData = await quizResponse.json()
             if (Array.isArray(quizData)) {
                 setQuestions(quizData)
             } else if (quizData.questions) {
@@ -78,27 +104,19 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
             } else {
                 throw new Error('Invalid quiz format')
             }
-        } catch (err) {
+        } catch (err: any) {
             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)')
+            setError(err.message || 'Could not load quiz.json')
         } finally {
             setLoading(false)
         }
     }
 
-    useEffect(() => {
-        loadQuiz()
-    }, [])
-
     const handleOptionSelect = (option: string) => {
+        const currentQ = questions[currentQuestionIndex]
         setAnswers(prev => ({
             ...prev,
-            [questions[currentQuestionIndex].id]: option
+            [currentQ.id]: option
         }))
     }
 
@@ -119,38 +137,54 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
     const finishQuiz = async () => {
         setSaving(true)
         try {
-            // Save answers to public/quiz_answers.json
-            // We use the upload API to save the file
+            // Save answers to secure storage
             const answersJson = JSON.stringify(
                 Object.entries(answers).map(([id, answer]) => ({
-                    questionId: parseInt(id),
+                    questionId: 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', {
+            await fetch('/api/data', {
                 method: 'POST',
-                body: formData
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    passkey,
+                    action: 'save_file',
+                    fileName: 'quiz_answers.json',
+                    content: answersJson
+                })
             })
 
             setCompleted(true)
         } catch (err) {
             console.error('Error saving answers:', err)
-            alert('Failed to save answers. Please try again.')
+            alert('Failed to save answers locally.')
+            setCompleted(true) // Still show completion screen
         } finally {
             setSaving(false)
         }
     }
 
+    const handleCopyAnswers = async () => {
+        const summary = questions.map((q, idx) => {
+            const answer = answers[q.id]
+            return `Q${idx + 1}: ${answer}`
+        }).join('\n')
+
+        const textToCopy = `Here are my quiz answers:\n\n${summary}\n\nPlease grade my quiz!`
+
+        try {
+            await navigator.clipboard.writeText(textToCopy)
+            setCopySuccess(true)
+            setTimeout(() => setCopySuccess(false), 2000)
+        } catch (err) {
+            console.error('Failed to copy:', err)
+        }
+    }
+
     return (
         <Window
             id="quiz-app"
@@ -161,10 +195,10 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
             zIndex={zIndex}
             width={800}
             height={600}
-            className="bg-[#F5F5F7] font-[-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif]"
+            className="bg-[#F5F5F7] font-sans"
         >
             <div className="h-full flex flex-col">
-                {/* macOS-style Header/Toolbar */}
+                {/* Header */}
                 <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">
@@ -176,7 +210,7 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                         </div>
                     </div>
 
-                    {!loading && !error && !completed && (
+                    {!isLocked && !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>
@@ -184,35 +218,54 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                 </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">
+                <div className="flex-1 p-8 overflow-y-auto flex flex-col items-center justify-center">
+                    {isLocked ? (
+                        <div className="flex flex-col items-center gap-6 max-w-md w-full bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
+                            <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center">
+                                <Lock size={32} weight="duotone" className="text-blue-500" />
+                            </div>
+                            <div className="text-center">
+                                <h2 className="text-xl font-bold text-gray-900 mb-2">Enter Passkey</h2>
+                                <p className="text-gray-500 text-sm">Enter your passkey to load your secure quiz.</p>
+                            </div>
+                            <div className="w-full space-y-4">
+                                <div className="relative">
+                                    <Key size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                                    <input
+                                        type="password"
+                                        value={tempPasskey}
+                                        onChange={(e) => setTempPasskey(e.target.value)}
+                                        onKeyPress={(e) => e.key === 'Enter' && handlePasskeySubmit()}
+                                        placeholder="Your Passkey"
+                                        className="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
+                                        autoFocus
+                                    />
+                                </div>
+                                <button
+                                    onClick={handlePasskeySubmit}
+                                    className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-colors shadow-lg shadow-blue-500/20"
+                                >
+                                    Unlock Quiz
+                                </button>
+                            </div>
+                        </div>
+                    ) : loading ? (
+                        <div className="flex flex-col items-center 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 className="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mb-4">
+                                <XCircle size={32} weight="duotone" className="text-red-500" />
                             </div>
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">No Quiz Found</h3>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">Quiz Load Error</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"
+                                onClick={() => setIsLocked(true)}
+                                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 transition-colors"
                             >
-                                <ArrowClockwise size={16} />
-                                Check Again
+                                Try Different Passkey
                             </button>
                         </div>
                     ) : completed ? (
@@ -220,27 +273,34 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                             <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>
+                            <h2 className="text-2xl font-bold text-gray-900 mb-2">Quiz Completed!</h2>
+                            <p className="text-gray-500 mb-8">
+                                {hasEmbeddedAnswers
+                                    ? "You've finished the quiz."
+                                    : "Answers saved. Copy them below to get your grade from Claude."}
+                            </p>
+
+                            <div className="w-full space-y-3">
+                                <button
+                                    onClick={handleCopyAnswers}
+                                    className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-colors shadow-lg shadow-blue-500/20 flex items-center justify-center gap-2"
+                                >
+                                    {copySuccess ? <CheckCircle size={20} weight="fill" /> : <Copy size={20} weight="bold" />}
+                                    {copySuccess ? 'Copied to Clipboard!' : 'Copy Answers for Claude'}
+                                </button>
+
+                                <button
+                                    onClick={onClose}
+                                    className="w-full py-3 bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 rounded-xl font-medium transition-colors"
+                                >
+                                    Close Quiz
+                                </button>
                             </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="bg-white rounded-xl shadow-sm border border-gray-200 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}
@@ -249,14 +309,15 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
 
                                 <div className="p-4 bg-gray-50/50 space-y-2">
                                     {questions[currentQuestionIndex].options.map((option, idx) => {
-                                        const isSelected = answers[questions[currentQuestionIndex].id] === option
+                                        const currentQId = questions[currentQuestionIndex].id
+                                        const isSelected = answers[currentQId] === 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'
+                                                    ? 'bg-blue-600 border-blue-600 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'
@@ -283,8 +344,8 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                                         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]'
+                                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                                            : 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800'
                                             }`}
                                     >
                                         {currentQuestionIndex === questions.length - 1 ? 'Finish' : 'Next'}
@@ -299,10 +360,10 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                                     <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'
+                                            ? 'w-8 bg-blue-600'
+                                            : idx < currentQuestionIndex
+                                                ? 'w-1.5 bg-gray-300'
+                                                : 'w-1.5 bg-gray-200'
                                             }`}
                                     />
                                 ))}

mcp-server.js

@@ -147,7 +147,7 @@ class ReubenOSMCPServer {
                         explanation: { type: 'string' },
                         points: { type: 'number' },
                       },
-                      required: ['id', 'question', 'type', 'correctAnswer'],
+                      required: ['id', 'question', 'type'],
                     },
                   },
                 },
@@ -157,6 +157,28 @@ class ReubenOSMCPServer {
             required: ['quizData'],
           },
         },
+        {
+          name: 'read_file',
+          description: 'Read the content of a file from secure storage or public folder. Useful for evaluating quiz answers.',
+          inputSchema: {
+            type: 'object',
+            properties: {
+              fileName: {
+                type: 'string',
+                description: 'Name of the file to read (e.g., quiz_answers.json)',
+              },
+              passkey: {
+                type: 'string',
+                description: 'Your passkey (required for secure files)',
+              },
+              isPublic: {
+                type: 'boolean',
+                description: 'Set to true if reading from public folder. Default: false',
+              },
+            },
+            required: ['fileName'],
+          },
+        },
       ],
     }));
 
@@ -173,6 +195,8 @@ class ReubenOSMCPServer {
             return await this.deleteFile(args);
           case 'deploy_quiz':
             return await this.deployQuiz(args);
+          case 'read_file':
+            return await this.readFile(args);
           default:
             throw new Error(`Unknown tool: ${name}`);
         }
@@ -189,6 +213,62 @@ class ReubenOSMCPServer {
     });
   }
 
+  async readFile(args) {
+    try {
+      const { fileName, passkey, isPublic = false } = args;
+
+      if (!fileName) {
+        return {
+          content: [{ type: 'text', text: '❌ fileName is required' }],
+        };
+      }
+
+      if (!isPublic && !passkey) {
+        return {
+          content: [{ type: 'text', text: '❌ Passkey is required (or set isPublic=true)' }],
+        };
+      }
+
+      const url = new URL(API_ENDPOINT);
+      if (passkey) url.searchParams.set('passkey', passkey);
+      if (isPublic) url.searchParams.set('isPublic', 'true');
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        const file = data.files.find(f => f.name === fileName);
+
+        if (!file) {
+          return {
+            content: [{ type: 'text', text: `❌ File '${fileName}' not found in ${data.location}` }],
+          };
+        }
+
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `📄 Content of ${fileName}:\n\n${file.content || '(Empty file)'}`,
+            },
+          ],
+        };
+      } else {
+        return {
+          content: [{ type: 'text', text: `❌ Failed: ${data.error || 'Unknown error'}` }],
+        };
+      }
+    } catch (error) {
+      return {
+        content: [{ type: 'text', text: `❌ Error: ${error.message}` }],
+      };
+    }
+  }
+
   async saveFile(args) {
     try {
       const { fileName, content, passkey, isPublic = false } = args;