made some changes with respect to quiz and flutter MCP

app/components/Calendar.tsx

@@ -30,6 +30,7 @@ interface CalendarEvent extends Holiday {
 type ViewMode = 'day' | 'week' | 'month' | 'year'
 
 export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: CalendarProps) {
+  const [windowSize, setWindowSize] = useState({ width: 1100, height: 750 })
   const [currentDate, setCurrentDate] = useState(new Date())
   const [view, setView] = useState<ViewMode>('month')
   const [customEvents, setCustomEvents] = useKV<CalendarEvent[]>('custom-calendar-events', [])
@@ -38,6 +39,25 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const [sidebarOpen, setSidebarOpen] = useState(true)
 
+  // Handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768
+      setWindowSize({
+        width: Math.min(1100, window.innerWidth - (isMobile ? 20 : 40)),
+        height: Math.min(750, window.innerHeight - (isMobile ? 20 : 40))
+      })
+      // Auto-close sidebar on mobile
+      if (isMobile && sidebarOpen) {
+        setSidebarOpen(false)
+      }
+    }
+
+    handleResize() // Set initial size
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [sidebarOpen])
+
   // Scroll to 8 AM on mount for day/week views
   useEffect(() => {
     if ((view === 'day' || view === 'week') && scrollContainerRef.current) {
@@ -184,8 +204,8 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
       onMaximize={onMaximize}
       onFocus={onFocus}
       zIndex={zIndex}
-      width={1100}
-      height={750}
+      width={windowSize.width}
+      height={windowSize.height}
       x={50}
       y={50}
       className="calendar-window !bg-[#1e1e1e]/80 !backdrop-blur-2xl border border-white/10 shadow-2xl !rounded-xl overflow-hidden"
@@ -253,28 +273,34 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
         {/* Main Content */}
         <div className="flex-1 flex flex-col bg-transparent">
           {/* Toolbar */}
-          <div className="h-14 flex items-center justify-between px-6 border-b border-white/10 bg-[#252525]/30 backdrop-blur-sm">
-            <div className="flex items-center gap-4">
-              <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white">
-                <List size={20} />
+          <div className="h-12 sm:h-14 flex items-center justify-between px-2 sm:px-6 border-b border-white/10 bg-[#252525]/30 backdrop-blur-sm">
+            <div className="flex items-center gap-2 sm:gap-4">
+              <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-1.5 sm:p-2 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white">
+                <List size={18} className="sm:w-5 sm:h-5" />
               </button>
-              <div className="text-2xl font-light tracking-tight">{renderHeaderTitle()}</div>
+              <div className="text-base sm:text-2xl font-light tracking-tight hidden sm:block">{renderHeaderTitle()}</div>
+              <div className="text-sm font-medium tracking-tight sm:hidden">
+                {view === 'month' && `${monthNames[currentDate.getMonth()].substr(0, 3)} ${currentDate.getFullYear()}`}
+                {view === 'year' && currentDate.getFullYear()}
+                {view === 'day' && `${currentDate.getDate()} ${monthNames[currentDate.getMonth()].substr(0, 3)}`}
+                {view === 'week' && 'Week View'}
+              </div>
             </div>
 
-            <div className="flex items-center gap-4">
-              <div className="flex items-center bg-black/20 rounded-lg p-1 border border-white/5">
-                <button onClick={handlePrev} className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
-                  <CaretLeft size={16} />
+            <div className="flex items-center gap-1 sm:gap-4">
+              <div className="flex items-center bg-black/20 rounded-lg p-0.5 sm:p-1 border border-white/5">
+                <button onClick={handlePrev} className="p-1 sm:p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
+                  <CaretLeft size={14} className="sm:w-4 sm:h-4" />
                 </button>
-                <button onClick={handleToday} className="px-3 py-1 text-sm font-medium text-gray-300 hover:text-white transition-colors">
+                <button onClick={handleToday} className="hidden sm:block px-3 py-1 text-sm font-medium text-gray-300 hover:text-white transition-colors">
                   Today
                 </button>
-                <button onClick={handleNext} className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
-                  <CaretRight size={16} />
+                <button onClick={handleNext} className="p-1 sm:p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
+                  <CaretRight size={14} className="sm:w-4 sm:h-4" />
                 </button>
               </div>
 
-              <div className="flex items-center bg-black/20 rounded-lg p-1 border border-white/5">
+              <div className="hidden sm:flex items-center bg-black/20 rounded-lg p-1 border border-white/5">
                 {(['day', 'week', 'month', 'year'] as ViewMode[]).map((v) => (
                   <button
                     key={v}
@@ -289,10 +315,22 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                 ))}
               </div>
 
-              <button className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+              {/* Mobile view selector */}
+              <select
+                value={view}
+                onChange={(e) => setView(e.target.value as ViewMode)}
+                className="sm:hidden bg-black/20 border border-white/5 rounded-lg px-2 py-1 text-xs text-gray-300 focus:outline-none focus:ring-1 focus:ring-white/20"
+              >
+                <option value="day">Day</option>
+                <option value="week">Week</option>
+                <option value="month">Month</option>
+                <option value="year">Year</option>
+              </select>
+
+              <button className="hidden sm:block p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
                 <Plus size={20} />
               </button>
-              <button className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+              <button className="hidden sm:block p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
                 <MagnifyingGlass size={20} />
               </button>
             </div>
@@ -310,11 +348,12 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                   transition={{ duration: 0.2 }}
                   className="h-full flex flex-col overflow-auto [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2"
                 >
-                  <div className="min-w-[700px] min-h-[600px] flex-1 flex flex-col">
+                  <div className="flex-1 flex flex-col">
                     <div className="grid grid-cols-7 border-b border-white/5 bg-black/10 sticky top-0 z-10 backdrop-blur-sm">
                       {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 key={day} className="py-1 sm:py-2 text-center sm:text-right pr-1 sm:pr-4 text-[10px] sm:text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          <span className="hidden sm:inline">{day}</span>
+                          <span className="sm:hidden">{day.charAt(0)}</span>
                         </div>
                       ))}
                     </div>
@@ -328,7 +367,7 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                           <div
                             key={index}
                             className={`
-                            border-b border-r border-white/5 p-1 relative group transition-colors
+                            border-b border-r border-white/5 p-0.5 sm:p-1 relative group transition-colors min-h-[50px] sm:min-h-[80px]
                             ${!dateObj.isCurrentMonth ? 'bg-black/20 text-gray-600' : 'hover:bg-white/5'}
                           `}
                             onClick={() => {
@@ -336,10 +375,10 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                               setView('day')
                             }}
                           >
-                            <div className="flex justify-end mb-1">
+                            <div className="flex justify-center sm:justify-end mb-0.5 sm:mb-1">
                               <span
                                 className={`
-                                text-sm font-medium w-7 h-7 flex items-center justify-center rounded-full
+                                text-xs sm:text-sm font-medium w-5 h-5 sm:w-7 sm: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'}
@@ -348,18 +387,24 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
                                 {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 className="hidden sm:block space-y-0.5 overflow-y-auto max-h-[calc(100%-1.5rem)] [&::-webkit-scrollbar]:hidden px-0.5">
+                              {dayEvents.slice(0, 3).map((event, i) => (
                                 <div
                                   key={i}
                                   className={`
-                                  text-[10px] px-1.5 py-0.5 rounded-sm truncate cursor-pointer hover:opacity-80
+                                  text-[9px] px-1 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
                                 `}
+                                  title={event.title}
                                 >
                                   {event.title}
                                 </div>
                               ))}
+                              {dayEvents.length > 3 && (
+                                <div className="text-[8px] text-gray-400 px-1">
+                                  +{dayEvents.length - 3} more
+                                </div>
+                              )}
                             </div>
                           </div>
                         )

app/components/FlutterRunner.tsx

@@ -27,8 +27,7 @@ interface FileNode {
   isOpen?: boolean
 }
 
-export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }: FlutterRunnerProps) {
-  const [code, setCode] = useState(initialCode || `import 'package:flutter/material.dart';
+const DEFAULT_FLUTTER_CODE = `import 'package:flutter/material.dart';
 
 void main() {
   runApp(const MyApp());
@@ -95,53 +94,146 @@ class _MyHomePageState extends State<MyHomePage> {
       ),
     );
   }
-}`)
+}`
 
+export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }: FlutterRunnerProps) {
+  const [code, setCode] = useState(initialCode || DEFAULT_FLUTTER_CODE)
   const [key, setKey] = useState(0)
   const [showFiles, setShowFiles] = useState(true)
-  const [files, setFiles] = useState<FileNode[]>([
-    {
-      id: 'root',
-      name: 'lib',
-      type: 'folder',
-      isOpen: true,
-      children: [
-        { id: 'main', name: 'main.dart', type: 'file', content: code }
-      ]
-    }
-  ])
+  const [files, setFiles] = useState<FileNode[]>([])
   const [activeFileId, setActiveFileId] = useState('main')
+  const [activeFileName, setActiveFileName] = useState('main.dart')
   const [lastSaved, setLastSaved] = useState<Date | null>(null)
+  const [passkey, setPasskey] = useState('')
+  const [isUnlocked, setIsUnlocked] = useState(false)
+  const [tempPasskey, setTempPasskey] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  // Load files from secure storage
+  const loadFiles = async (key: string) => {
+    setLoading(true)
+    try {
+      const response = await fetch(`/api/data?key=${encodeURIComponent(key)}&folder=`)
+      const data = await response.json()
+
+      if (data.error) {
+        throw new Error(data.error)
+      }
+
+      // Filter for .dart files
+      const dartFiles = data.files?.filter((f: any) => f.name.endsWith('.dart')) || []
+
+      if (dartFiles.length > 0) {
+        const fileNodes: FileNode[] = dartFiles.map((file: any, index: number) => ({
+          id: `file_${index}`,
+          name: file.name,
+          type: 'file' as const,
+          content: file.content
+        }))
+
+        setFiles([{
+          id: 'root',
+          name: 'Dart Files',
+          type: 'folder',
+          isOpen: true,
+          children: fileNodes
+        }])
+
+        // Load first file
+        if (fileNodes.length > 0) {
+          setActiveFileId(fileNodes[0].id)
+          setActiveFileName(fileNodes[0].name)
+          setCode(fileNodes[0].content || DEFAULT_FLUTTER_CODE)
+        }
+      } else {
+        // No files found, create default
+        setFiles([{
+          id: 'root',
+          name: 'lib',
+          type: 'folder',
+          isOpen: true,
+          children: [
+            { id: 'main', name: 'main.dart', type: 'file', content: DEFAULT_FLUTTER_CODE }
+          ]
+        }])
+        setCode(DEFAULT_FLUTTER_CODE)
+        setActiveFileName('main.dart')
+      }
+    } catch (err) {
+      console.error('Error loading files:', err)
+      // Create default on error
+      setFiles([{
+        id: 'root',
+        name: 'lib',
+        type: 'folder',
+        isOpen: true,
+        children: [
+          { id: 'main', name: 'main.dart', type: 'file', content: DEFAULT_FLUTTER_CODE }
+        ]
+      }])
+      setCode(DEFAULT_FLUTTER_CODE)
+      setActiveFileName('main.dart')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleUnlock = async () => {
+    if (tempPasskey.trim().length >= 4) {
+      setPasskey(tempPasskey.trim())
+      setIsUnlocked(true)
+      await loadFiles(tempPasskey.trim())
+    } else {
+      alert('Passkey must be at least 4 characters')
+    }
+  }
+
+  const handleFileClick = (file: FileNode) => {
+    if (file.type === 'file') {
+      setActiveFileId(file.id)
+      setActiveFileName(file.name)
+      setCode(file.content || '')
+    }
+  }
+
+  // Check for initial passkey on mount
+  useEffect(() => {
+    const sessionPasskey = sessionStorage.getItem('currentPasskey')
+    if (sessionPasskey) {
+      setPasskey(sessionPasskey)
+      setIsUnlocked(true)
+      loadFiles(sessionPasskey)
+    } else if (initialCode) {
+      setCode(initialCode)
+    }
+  }, [initialCode])
 
   // Auto-save to file every 2 seconds when code changes
   useEffect(() => {
+    if (!passkey || !isUnlocked || !activeFileName) return
+
     const saveTimer = setTimeout(async () => {
-      // Check if we loaded this from a file
-      const passkey = sessionStorage.getItem('currentPasskey')
-      const fileName = sessionStorage.getItem('currentFileName')
-
-      if (passkey && fileName && initialCode) {
-        try {
-          // Save to secure data
-          await fetch('/api/data', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              key: passkey,
-              action: 'save',
-              fileName: fileName,
-              content: code
-            })
+      try {
+        // Save to secure data
+        await fetch('/api/data', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            key: passkey,
+            passkey: passkey,
+            action: 'save_file',
+            fileName: activeFileName,
+            content: code
           })
-          setLastSaved(new Date())
-        } catch (error) {
-          console.error('Auto-save failed:', error)
-        }
+        })
+        setLastSaved(new Date())
+      } catch (error) {
+        console.error('Auto-save failed:', error)
       }
     }, 2000)
 
     return () => clearTimeout(saveTimer)
-  }, [code, initialCode])
+  }, [code, passkey, activeFileName, isUnlocked])
 
   const handleRun = () => {
     setKey(prev => prev + 1)
@@ -152,7 +244,7 @@ class _MyHomePageState extends State<MyHomePage> {
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
-    a.download = 'main.dart'
+    a.download = activeFileName || 'main.dart'
     a.click()
     URL.revokeObjectURL(url)
   }
@@ -171,6 +263,30 @@ class _MyHomePageState extends State<MyHomePage> {
       y={40}
       className="flutter-ide-window"
     >
+      {!isUnlocked ? (
+        <div className="flex h-full bg-[#1e1e1e] items-center justify-center">
+          <div className="bg-[#252526] p-8 rounded-lg shadow-xl border border-[#333] max-w-md w-full">
+            <h2 className="text-xl font-bold text-white mb-4">Enter Passkey</h2>
+            <p className="text-gray-400 mb-6">Enter your passkey to access Dart/Flutter files</p>
+            <input
+              type="password"
+              value={tempPasskey}
+              onChange={(e) => setTempPasskey(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleUnlock()}
+              placeholder="Your passkey"
+              className="w-full px-4 py-2 bg-[#1e1e1e] border border-[#333] rounded text-white focus:outline-none focus:border-blue-500"
+              autoFocus
+            />
+            <button
+              onClick={handleUnlock}
+              disabled={loading}
+              className="w-full mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium disabled:opacity-50"
+            >
+              {loading ? 'Loading...' : 'Unlock'}
+            </button>
+          </div>
+        </div>
+      ) : (
       <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
         {/* Code Editor - Left Side */}
         <div className="w-[600px] flex flex-col border-r border-[#333]">
@@ -187,7 +303,7 @@ class _MyHomePageState extends State<MyHomePage> {
               <div className="h-4 w-[1px] bg-gray-600 mx-2" />
               <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400 border border-[#333]">
                 <FileCode size={14} className="text-blue-400" />
-                main.dart
+                {activeFileName}
               </div>
               {lastSaved && (
                 <span className="text-xs text-green-400">
@@ -278,7 +394,7 @@ class _MyHomePageState extends State<MyHomePage> {
                       {file.children?.map(child => (
                         <div
                           key={child.id}
-                          onClick={() => setActiveFileId(child.id)}
+                          onClick={() => handleFileClick(child)}
                           className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
                             }`}
                         >
@@ -294,6 +410,7 @@ class _MyHomePageState extends State<MyHomePage> {
           </div>
         )}
       </div>
+      )}
     </Window>
   )
 }

app/components/LaTeXEditor.tsx

@@ -58,60 +58,146 @@ Here is an equation:
 export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }: LaTeXEditorProps) {
   const [code, setCode] = useState(initialContent || DEFAULT_LATEX)
   const [showSidebar, setShowSidebar] = useState(true)
-  const [files, setFiles] = useState<FileNode[]>([
-    {
-      id: 'root',
-      name: 'Project',
-      type: 'folder',
-      isOpen: true,
-      children: [
-        { id: 'main', name: 'main.tex', type: 'file', content: code }
-      ]
-    }
-  ])
+  const [files, setFiles] = useState<FileNode[]>([])
   const [activeFileId, setActiveFileId] = useState('main')
+  const [activeFileName, setActiveFileName] = useState('main.tex')
   const previewRef = useRef<HTMLDivElement>(null)
   const [lastSaved, setLastSaved] = useState<Date | null>(null)
   const [isSaving, setIsSaving] = useState(false)
+  const [passkey, setPasskey] = useState('')
+  const [isUnlocked, setIsUnlocked] = useState(false)
+  const [tempPasskey, setTempPasskey] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  // Load files from secure storage
+  const loadFiles = async (key: string) => {
+    setLoading(true)
+    try {
+      const response = await fetch(`/api/data?key=${encodeURIComponent(key)}&folder=`)
+      const data = await response.json()
+
+      if (data.error) {
+        throw new Error(data.error)
+      }
+
+      // Filter for .tex files
+      const texFiles = data.files?.filter((f: any) => f.name.endsWith('.tex')) || []
+
+      if (texFiles.length > 0) {
+        const fileNodes: FileNode[] = texFiles.map((file: any, index: number) => ({
+          id: `file_${index}`,
+          name: file.name,
+          type: 'file' as const,
+          content: file.content
+        }))
+
+        setFiles([{
+          id: 'root',
+          name: 'LaTeX Files',
+          type: 'folder',
+          isOpen: true,
+          children: fileNodes
+        }])
+
+        // Load first file
+        if (fileNodes.length > 0) {
+          setActiveFileId(fileNodes[0].id)
+          setActiveFileName(fileNodes[0].name)
+          setCode(fileNodes[0].content || DEFAULT_LATEX)
+        }
+      } else {
+        // No files found, create default
+        setFiles([{
+          id: 'root',
+          name: 'LaTeX Files',
+          type: 'folder',
+          isOpen: true,
+          children: [
+            { id: 'main', name: 'main.tex', type: 'file', content: DEFAULT_LATEX }
+          ]
+        }])
+        setCode(DEFAULT_LATEX)
+        setActiveFileName('main.tex')
+      }
+    } catch (err) {
+      console.error('Error loading files:', err)
+      // Create default on error
+      setFiles([{
+        id: 'root',
+        name: 'LaTeX Files',
+        type: 'folder',
+        isOpen: true,
+        children: [
+          { id: 'main', name: 'main.tex', type: 'file', content: DEFAULT_LATEX }
+        ]
+      }])
+      setCode(DEFAULT_LATEX)
+      setActiveFileName('main.tex')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleUnlock = async () => {
+    if (tempPasskey.trim().length >= 4) {
+      setPasskey(tempPasskey.trim())
+      setIsUnlocked(true)
+      await loadFiles(tempPasskey.trim())
+    } else {
+      alert('Passkey must be at least 4 characters')
+    }
+  }
+
+  const handleFileClick = (file: FileNode) => {
+    if (file.type === 'file') {
+      setActiveFileId(file.id)
+      setActiveFileName(file.name)
+      setCode(file.content || '')
+    }
+  }
 
   // Update code if initialContent changes (e.g. opening a new file)
   useEffect(() => {
     if (initialContent) {
       setCode(initialContent)
+      // Check if we have a passkey from session
+      const sessionPasskey = sessionStorage.getItem('currentPasskey')
+      if (sessionPasskey) {
+        setPasskey(sessionPasskey)
+        setIsUnlocked(true)
+        loadFiles(sessionPasskey)
+      }
     }
   }, [initialContent])
 
   // Auto-save functionality
   useEffect(() => {
-    const saveTimer = setTimeout(async () => {
-      const passkey = sessionStorage.getItem('currentPasskey')
-      const fileName = sessionStorage.getItem('currentFileName')
+    if (!passkey || !isUnlocked || !activeFileName) return
 
-      if (passkey && fileName) {
-        setIsSaving(true)
-        try {
-          await fetch('/api/data', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              key: passkey, // Support both key and passkey params
-              passkey: passkey,
-              action: 'save_file',
-              fileName,
-              content: code
-            })
+    const saveTimer = setTimeout(async () => {
+      setIsSaving(true)
+      try {
+        await fetch('/api/data', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            key: passkey,
+            passkey: passkey,
+            action: 'save_file',
+            fileName: activeFileName,
+            content: code
           })
-          setLastSaved(new Date())
-        } catch (err) {
-          console.error('Auto-save failed:', err)
-        } finally {
-          setIsSaving(false)
-        }
+        })
+        setLastSaved(new Date())
+      } catch (err) {
+        console.error('Auto-save failed:', err)
+      } finally {
+        setIsSaving(false)
       }
     }, 2000) // Debounce 2s
 
     return () => clearTimeout(saveTimer)
-  }, [code])
+  }, [code, passkey, activeFileName, isUnlocked])
 
   // Render LaTeX preview
   useEffect(() => {
@@ -164,7 +250,7 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
-    a.download = 'main.tex'
+    a.download = activeFileName || 'main.tex'
     a.click()
     URL.revokeObjectURL(url)
   }
@@ -183,6 +269,30 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
       y={60}
       className="latex-studio-window"
     >
+      {!isUnlocked ? (
+        <div className="flex h-full bg-[#1e1e1e] items-center justify-center">
+          <div className="bg-[#252526] p-8 rounded-lg shadow-xl border border-[#333] max-w-md w-full">
+            <h2 className="text-xl font-bold text-white mb-4">Enter Passkey</h2>
+            <p className="text-gray-400 mb-6">Enter your passkey to access LaTeX files</p>
+            <input
+              type="password"
+              value={tempPasskey}
+              onChange={(e) => setTempPasskey(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleUnlock()}
+              placeholder="Your passkey"
+              className="w-full px-4 py-2 bg-[#1e1e1e] border border-[#333] rounded text-white focus:outline-none focus:border-blue-500"
+              autoFocus
+            />
+            <button
+              onClick={handleUnlock}
+              disabled={loading}
+              className="w-full mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium disabled:opacity-50"
+            >
+              {loading ? 'Loading...' : 'Unlock'}
+            </button>
+          </div>
+        </div>
+      ) : (
       <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
         {/* Sidebar */}
         {showSidebar && (
@@ -206,7 +316,7 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
                       {file.children?.map(child => (
                         <div
                           key={child.id}
-                          onClick={() => setActiveFileId(child.id)}
+                          onClick={() => handleFileClick(child)}
                           className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
                             }`}
                         >
@@ -237,7 +347,7 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
               <div className="h-4 w-[1px] bg-gray-600 mx-2" />
               <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400 border border-[#333]">
                 <FileText size={14} className="text-green-400" />
-                main.tex
+                {activeFileName}
               </div>
               {lastSaved && (
                 <div className="flex items-center gap-1 text-xs text-gray-500 ml-2">
@@ -319,6 +429,7 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
           </div>
         </div>
       </div>
+      )}
     </Window>
   )
 }

app/components/QuizApp.tsx

@@ -31,6 +31,7 @@ interface QuizAppProps {
 }
 
 export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
+    const [windowSize, setWindowSize] = useState({ width: 800, height: 600 })
     const [passkey, setPasskey] = useState('')
     const [tempPasskey, setTempPasskey] = useState('')
     const [isLocked, setIsLocked] = useState(true)
@@ -47,6 +48,19 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
     const [completed, setCompleted] = useState(false)
     const [saving, setSaving] = useState(false)
 
+    // Handle window resize
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowSize({
+                width: Math.min(800, window.innerWidth - 40),
+                height: Math.min(600, window.innerHeight - 40)
+            })
+        }
+
+        handleResize() // Set initial size
+        window.addEventListener('resize', handleResize)
+        return () => window.removeEventListener('resize', handleResize)
+    }, [])
 
     const handlePasskeySubmit = () => {
         if (tempPasskey.trim().length >= 4) {
@@ -246,11 +260,11 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
             onClose={onClose}
             onMinimize={onMinimize}
             zIndex={zIndex}
-            width={800}
-            height={600}
+            width={windowSize.width}
+            height={windowSize.height}
             className="bg-[#F5F5F7] font-sans"
         >
-            <div className="h-full flex flex-col">
+            <div className="h-full flex flex-col overflow-hidden">
                 {/* 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">
@@ -280,7 +294,7 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                 </div>
 
                 {/* Content */}
-                <div className="flex-1 p-8 overflow-y-auto flex flex-col items-center justify-center">
+                <div className="flex-1 p-4 sm:p-6 md:p-8 overflow-y-auto flex flex-col items-center justify-center min-h-0">
                     {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">
@@ -366,72 +380,74 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                             </div>
                         </div>
                     ) : questions.length > 0 ? (
-                        <div className="w-full max-w-2xl flex flex-col h-full justify-center">
+                        <div className="w-full max-w-2xl flex flex-col h-full justify-between py-2">
                             {/* Question Card */}
-                            <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">
+                            <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex-1 flex flex-col">
+                                <div className="p-3 sm:p-4 md:p-6 border-b border-gray-100 flex-shrink-0">
+                                    <h3 className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 leading-snug">
                                         {questions[currentQuestionIndex].question}
                                     </h3>
                                 </div>
 
-                                <div className="p-4 bg-gray-50/50 space-y-2">
-                                    {questions[currentQuestionIndex].options.map((option, idx) => {
-                                        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-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'
-                                                    }`}>
-                                                    {isSelected && <div className="w-2.5 h-2.5 bg-white rounded-full" />}
-                                                </div>
-                                                <span className="font-medium">{option}</span>
-                                            </button>
-                                        )
-                                    })}
+                                <div className="p-3 sm:p-4 bg-gray-50/50 overflow-y-auto flex-1 min-h-0">
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
+                                        {questions[currentQuestionIndex].options.map((option, idx) => {
+                                            const currentQId = questions[currentQuestionIndex].id
+                                            const isSelected = answers[currentQId] === option
+                                            return (
+                                                <button
+                                                    key={idx}
+                                                    onClick={() => handleOptionSelect(option)}
+                                                    className={`text-left px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg border transition-all duration-200 flex items-start gap-2 text-sm ${isSelected
+                                                        ? '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-4 h-4 rounded-full border flex items-center justify-center flex-shrink-0 mt-0.5 ${isSelected ? 'border-white bg-white/20' : 'border-gray-300'
+                                                        }`}>
+                                                        {isSelected && <div className="w-2 h-2 bg-white rounded-full" />}
+                                                    </div>
+                                                    <span className="font-medium break-words flex-1 leading-tight">{option}</span>
+                                                </button>
+                                            )
+                                        })}
+                                    </div>
                                 </div>
 
-                                <div className="px-6 py-4 bg-white border-t border-gray-100 flex justify-between items-center">
+                                <div className="px-3 sm:px-6 py-3 sm:py-4 bg-white border-t border-gray-100 flex justify-between items-center flex-shrink-0">
                                     <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"
+                                        className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 text-gray-500 hover:text-gray-800 disabled:opacity-30 disabled:hover:text-gray-500 transition-colors text-xs sm:text-sm font-medium"
                                     >
-                                        <CaretLeft size={16} weight="bold" />
-                                        Back
+                                        <CaretLeft size={14} className="sm:w-4 sm:h-4" weight="bold" />
+                                        <span className="hidden sm:inline">Back</span>
                                     </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]
+                                        className={`flex items-center gap-1 sm:gap-2 px-3 sm:px-5 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium shadow-sm transition-all ${!answers[questions[currentQuestionIndex]?.id]
                                             ? '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'}
-                                        {currentQuestionIndex !== questions.length - 1 && <CaretRight size={16} weight="bold" />}
+                                        {currentQuestionIndex !== questions.length - 1 && <CaretRight size={14} className="sm:w-4 sm:h-4" weight="bold" />}
                                     </button>
                                 </div>
                             </div>
 
                             {/* Progress Indicator */}
-                            <div className="mt-8 flex items-center justify-center gap-1.5">
+                            <div className="mt-2 sm:mt-3 flex items-center justify-center gap-1 flex-shrink-0">
                                 {questions.map((_, idx) => (
                                     <div
                                         key={idx}
-                                        className={`h-1.5 rounded-full transition-all duration-300 ${idx === currentQuestionIndex
-                                            ? 'w-8 bg-blue-600'
+                                        className={`h-1 rounded-full transition-all duration-300 ${idx === currentQuestionIndex
+                                            ? 'w-6 bg-blue-600'
                                             : idx < currentQuestionIndex
-                                                ? 'w-1.5 bg-gray-300'
-                                                : 'w-1.5 bg-gray-200'
+                                                ? 'w-1 bg-gray-300'
+                                                : 'w-1 bg-gray-200'
                                             }`}
                                     />
                                 ))}