fixing MCP quiz

app/api/data/route.ts

@@ -53,13 +53,25 @@ export async function GET(request: NextRequest) {
             const stats = await stat(itemPath)
             const relativePath = path.relative(userDir, itemPath)
 
+            // Read content for JSON files (like quiz.json, quiz_answers.json)
+            let content = undefined
+            if (!stats.isDirectory() && path.extname(item).toLowerCase() === '.json') {
+                try {
+                    const fileContent = await fs.promises.readFile(itemPath, 'utf-8')
+                    content = fileContent
+                } catch (err) {
+                    console.error(`Error reading ${item}:`, err)
+                }
+            }
+
             return {
                 name: item,
                 type: stats.isDirectory() ? 'folder' : 'file',
                 size: stats.size,
                 modified: stats.mtime.toISOString(),
                 path: relativePath,
-                extension: path.extname(item).substring(1)
+                extension: path.extname(item).substring(1),
+                ...(content !== undefined && { content })
             }
         }))
 
@@ -72,6 +84,39 @@ export async function GET(request: NextRequest) {
 
 export async function POST(request: NextRequest) {
     try {
+        const contentType = request.headers.get('content-type')
+
+        // Handle JSON body (for save_file action)
+        if (contentType?.includes('application/json')) {
+            const body = await request.json()
+            const { passkey, action, fileName, content, folder = '' } = body
+
+            if (!passkey) {
+                return NextResponse.json({ error: 'Passkey is required' }, { status: 400 })
+            }
+
+            if (action === 'save_file') {
+                if (!fileName || !content) {
+                    return NextResponse.json({ error: 'fileName and content are required' }, { status: 400 })
+                }
+
+                const sanitizedKey = passkey.replace(/[^a-zA-Z0-9_-]/g, '')
+                const userDir = path.join(DATA_DIR, sanitizedKey)
+                const targetDir = path.join(userDir, folder)
+
+                // Ensure directories exist
+                await mkdir(targetDir, { recursive: true })
+
+                const filePath = path.join(targetDir, fileName)
+                await writeFile(filePath, content, 'utf-8')
+
+                return NextResponse.json({ success: true })
+            }
+
+            return NextResponse.json({ error: 'Unknown action' }, { status: 400 })
+        }
+
+        // Handle FormData (for file uploads)
         const formData = await request.formData()
         const file = formData.get('file') as File
         const key = formData.get('key') as string
@@ -99,8 +144,8 @@ export async function POST(request: NextRequest) {
 
         return NextResponse.json({ success: true })
     } catch (error) {
-        console.error('Error uploading file:', error)
-        return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
+        console.error('Error in POST handler:', error)
+        return NextResponse.json({ error: 'Operation failed' }, { status: 500 })
     }
 }
 

app/components/Calendar.tsx

@@ -235,9 +235,9 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                     {['Home', 'Work', 'Holidays', 'Birthdays'].map((cal, i) => (
                       <div key={cal} className="flex items-center gap-3 px-2 py-1.5 rounded-md hover:bg-white/5 cursor-pointer group">
                         <div className={`w-3 h-3 rounded-full border-2 ${i === 0 ? 'border-blue-500 bg-blue-500' :
-                            i === 1 ? 'border-purple-500 bg-purple-500' :
-                              i === 2 ? 'border-green-500 bg-green-500' :
-                                'border-red-500 bg-red-500'
+                          i === 1 ? 'border-purple-500 bg-purple-500' :
+                            i === 2 ? 'border-green-500 bg-green-500' :
+                              'border-red-500 bg-red-500'
                           }`} />
                         <span className="text-sm text-gray-300">{cal}</span>
                         <Check size={12} className="ml-auto opacity-0 group-hover:opacity-100 text-gray-500" />
@@ -308,61 +308,63 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 1.02 }}
                   transition={{ duration: 0.2 }}
-                  className="h-full flex flex-col"
+                  className="h-full flex flex-col overflow-auto"
                 >
-                  <div className="grid grid-cols-7 border-b border-white/5 bg-black/10">
-                    {weekDays.map(day => (
-                      <div key={day} className="py-2 text-right pr-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        {day}
-                      </div>
-                    ))}
-                  </div>
-                  <div className="flex-1 grid grid-cols-7 grid-rows-6">
-                    {calendarDays.map((dateObj, index) => {
-                      const dateStr = `${dateObj.year}-${String(dateObj.month + 1).padStart(2, '0')}-${String(dateObj.day).padStart(2, '0')}`
-                      const dayEvents = getEventsForDate(dateStr)
-                      const isCurrentDay = isToday(dateObj.day, dateObj.month, dateObj.year)
-
-                      return (
-                        <div
-                          key={index}
-                          className={`
+                  <div className="min-w-[600px] h-full flex flex-col">
+                    <div className="grid grid-cols-7 border-b border-white/5 bg-black/10">
+                      {weekDays.map(day => (
+                        <div key={day} className="py-2 text-right pr-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {day}
+                        </div>
+                      ))}
+                    </div>
+                    <div className="flex-1 grid grid-cols-7 grid-rows-6">
+                      {calendarDays.map((dateObj, index) => {
+                        const dateStr = `${dateObj.year}-${String(dateObj.month + 1).padStart(2, '0')}-${String(dateObj.day).padStart(2, '0')}`
+                        const dayEvents = getEventsForDate(dateStr)
+                        const isCurrentDay = isToday(dateObj.day, dateObj.month, dateObj.year)
+
+                        return (
+                          <div
+                            key={index}
+                            className={`
                             border-b border-r border-white/5 p-1 relative group transition-colors
                             ${!dateObj.isCurrentMonth ? 'bg-black/20 text-gray-600' : 'hover:bg-white/5'}
                           `}
-                          onClick={() => {
-                            setCurrentDate(new Date(dateObj.year, dateObj.month, dateObj.day))
-                            setView('day')
-                          }}
-                        >
-                          <div className="flex justify-end mb-1">
-                            <span
-                              className={`
+                            onClick={() => {
+                              setCurrentDate(new Date(dateObj.year, dateObj.month, dateObj.day))
+                              setView('day')
+                            }}
+                          >
+                            <div className="flex justify-end mb-1">
+                              <span
+                                className={`
                                 text-sm font-medium w-7 h-7 flex items-center justify-center rounded-full
                                 ${isCurrentDay
-                                  ? 'bg-red-500 text-white shadow-lg shadow-red-900/50'
-                                  : dateObj.isCurrentMonth ? 'text-gray-300' : 'text-gray-600'}
+                                    ? 'bg-red-500 text-white shadow-lg shadow-red-900/50'
+                                    : dateObj.isCurrentMonth ? 'text-gray-300' : 'text-gray-600'}
                               `}
-                            >
-                              {dateObj.day}
-                            </span>
-                          </div>
-                          <div className="space-y-1 overflow-y-auto max-h-[calc(100%-2rem)] [&::-webkit-scrollbar]:hidden">
-                            {dayEvents.map((event, i) => (
-                              <div
-                                key={i}
-                                className={`
+                              >
+                                {dateObj.day}
+                              </span>
+                            </div>
+                            <div className="space-y-1 overflow-y-auto max-h-[calc(100%-2rem)] [&::-webkit-scrollbar]:hidden">
+                              {dayEvents.map((event, i) => (
+                                <div
+                                  key={i}
+                                  className={`
                                   text-[10px] px-1.5 py-0.5 rounded-sm truncate cursor-pointer hover:opacity-80
                                   ${event.color || 'bg-blue-500'} text-white font-medium shadow-sm backdrop-blur-sm bg-opacity-80
                                 `}
-                              >
-                                {event.title}
-                              </div>
-                            ))}
+                                >
+                                  {event.title}
+                                </div>
+                              ))}
+                            </div>
                           </div>
-                        </div>
-                      )
-                    })}
+                        )
+                      })}
+                    </div>
                   </div>
                 </motion.div>
               )}
@@ -373,9 +375,9 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
-                  className="h-full overflow-y-auto p-8 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2"
+                  className="h-full overflow-y-auto p-4 md:p-8 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2"
                 >
-                  <div className="grid grid-cols-4 gap-x-8 gap-y-12">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-12">
                     {monthNames.map((month, monthIndex) => {
                       const days = getDaysInMonth(currentDate.getFullYear(), monthIndex)
                       return (

app/components/Messages.tsx

@@ -115,7 +115,7 @@ export function Messages({ onClose, onMinimize, onMaximize, onFocus, zIndex }: M
             width={800}
             height={600}
             x={100}
-            y={100}
+            y={50}
             className="messages-window !bg-[#1e1e1e]/80 !backdrop-blur-2xl border border-white/10 shadow-2xl !rounded-xl overflow-hidden"
             contentClassName="!bg-transparent"
             headerClassName="!bg-transparent border-b border-white/5"