github update

README.md

@@ -1,8 +1,8 @@
 ---
 title: ReubenOS
 emoji: 🖥️
-colorFrom: blue
-colorTo: purple
+colorFrom: red
+colorTo: yellow
 sdk: docker
 app_port: 7860
 pinned: false

app/components/Desktop.tsx

@@ -10,10 +10,10 @@ import { DraggableDesktopIcon } from './DraggableDesktopIcon'
 import { HelpModal } from './HelpModal'
 import { DesktopContextMenu } from './DesktopContextMenu'
 import { BackgroundSelector } from './BackgroundSelector'
-import WebBrowserApp from './WebBrowserApp'
+
 import { GeminiChat } from './GeminiChat'
 import { Clock } from './Clock'
-import { Terminal } from './Terminal'
+
 import { SpotlightSearch } from './SpotlightSearch'
 import { ContextMenu } from './ContextMenu'
 import { AboutModal } from './AboutModal'
@@ -41,9 +41,9 @@ export function Desktop() {
   const [fileManagerOpen, setFileManagerOpen] = useState(true)
   const [calendarOpen, setCalendarOpen] = useState(false)
   const [clockOpen, setClockOpen] = useState(false)
-  const [browserOpen, setBrowserOpen] = useState(false)
+
   const [geminiChatOpen, setGeminiChatOpen] = useState(false)
-  const [terminalOpen, setTerminalOpen] = useState(false)
+
   const [spotlightOpen, setSpotlightOpen] = useState(false)
   const [contextMenuVisible, setContextMenuVisible] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
@@ -69,9 +69,9 @@ export function Desktop() {
   const [fileManagerMinimized, setFileManagerMinimized] = useState(false)
   const [calendarMinimized, setCalendarMinimized] = useState(false)
   const [clockMinimized, setClockMinimized] = useState(false)
-  const [browserMinimized, setBrowserMinimized] = useState(false)
+
   const [geminiChatMinimized, setGeminiChatMinimized] = useState(false)
-  const [terminalMinimized, setTerminalMinimized] = useState(false)
+
   const [sessionManagerMinimized, setSessionManagerMinimized] = useState(false)
   const [flutterRunnerMinimized, setFlutterRunnerMinimized] = useState(false)
   const [researchBrowserMinimized, setResearchBrowserMinimized] = useState(false)
@@ -108,14 +108,7 @@ export function Desktop() {
     setClockOpen(false)
   }
 
-  const openBrowser = () => {
-    setBrowserOpen(true)
-    setBrowserMinimized(false)
-  }
 
-  const closeBrowser = () => {
-    setBrowserOpen(false)
-  }
 
   const openGeminiChat = () => {
     setGeminiChatOpen(true)
@@ -126,14 +119,7 @@ export function Desktop() {
     setGeminiChatOpen(false)
   }
 
-  const openTerminal = () => {
-    setTerminalOpen(true)
-    setTerminalMinimized(false)
-  }
 
-  const closeTerminal = () => {
-    setTerminalOpen(false)
-  }
 
   const openSessionManager = () => {
     setSessionManagerOpen(true)
@@ -193,15 +179,11 @@ export function Desktop() {
       case 'clock':
         openClock()
         break
-      case 'browser':
-        openBrowser()
-        break
+
       case 'gemini':
         openGeminiChat()
         break
-      case 'terminal':
-        openTerminal()
-        break
+
       case 'sessions':
         openSessionManager()
         break
@@ -420,19 +402,7 @@ export function Desktop() {
     })
   }
 
-  if (browserMinimized && browserOpen) {
-    minimizedApps.push({
-      id: 'browser',
-      label: 'Browser',
-      icon: (
-        <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
-          <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
-          <Globe size={20} weight="light" className="text-white relative z-10" />
-        </div>
-      ),
-      onRestore: () => setBrowserMinimized(false)
-    })
-  }
+
 
   if (geminiChatMinimized && geminiChatOpen) {
     minimizedApps.push({
@@ -447,18 +417,7 @@ export function Desktop() {
     })
   }
 
-  if (terminalMinimized && terminalOpen) {
-    minimizedApps.push({
-      id: 'terminal',
-      label: 'Terminal',
-      icon: (
-        <div className="bg-black w-full h-full rounded-xl flex items-center justify-center border border-gray-700">
-          <TerminalIcon size={20} weight="bold" className="text-green-400" />
-        </div>
-      ),
-      onRestore: () => setTerminalMinimized(false)
-    })
-  }
+
 
   if (sessionManagerMinimized && sessionManagerOpen) {
     minimizedApps.push({
@@ -561,13 +520,12 @@ export function Desktop() {
         onOpenFileManager={openFileManager}
         onOpenCalendar={openCalendar}
         onOpenClock={openClock}
-        onOpenBrowser={openBrowser}
+
         onOpenGeminiChat={openGeminiChat}
         openApps={{
           files: fileManagerOpen,
           calendar: calendarOpen,
           clock: clockOpen,
-          browser: browserOpen,
           gemini: geminiChatOpen
         }}
         minimizedApps={minimizedApps}
@@ -586,16 +544,7 @@ export function Desktop() {
               onDoubleClick={() => openFileManager('')}
             />
           </div>
-          <div className="pointer-events-auto w-24 h-24">
-            <DraggableDesktopIcon
-              id="browser"
-              label="Browser"
-              iconType="browser"
-              initialPosition={{ x: 0, y: 0 }}
-              onClick={() => { }}
-              onDoubleClick={openBrowser}
-            />
-          </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="gemini"
@@ -626,16 +575,7 @@ export function Desktop() {
               onDoubleClick={openCalendar}
             />
           </div>
-          <div className="pointer-events-auto w-24 h-24">
-            <DraggableDesktopIcon
-              id="terminal"
-              label="Terminal"
-              iconType="terminal"
-              initialPosition={{ x: 0, y: 0 }}
-              onClick={() => { }}
-              onDoubleClick={openTerminal}
-            />
-          </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="harddrive"
@@ -711,6 +651,7 @@ export function Desktop() {
                 onOpenFlutterApp={openFlutterRunner}
                 onMinimize={() => setFileManagerMinimized(true)}
                 sessionId={userSession}
+                onOpenApp={handleOpenApp}
               />
             </motion.div>
           )}
@@ -753,43 +694,9 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {browserOpen && (
-            <motion.div
-              key="browser"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
-              animate={{
-                scale: browserMinimized ? 0.1 : 1,
-                opacity: browserMinimized ? 0 : 1,
-                y: browserMinimized ? 400 : 0,
-                x: browserMinimized ? '-20%' : 0
-              }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: browserMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
-            >
-              <WebBrowserApp onClose={closeBrowser} onMinimize={() => setBrowserMinimized(true)} />
-            </motion.div>
-          )}
 
-          {terminalOpen && (
-            <motion.div
-              key="terminal"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
-              animate={{
-                scale: terminalMinimized ? 0.1 : 1,
-                opacity: terminalMinimized ? 0 : 1,
-                y: terminalMinimized ? 400 : 0,
-                x: terminalMinimized ? '30%' : 0
-              }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: terminalMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
-            >
-              <Terminal onClose={closeTerminal} onMinimize={() => setTerminalMinimized(true)} />
-            </motion.div>
-          )}
+
+
 
           {sessionManagerOpen && sessionInitialized && (
             <motion.div
@@ -831,8 +738,12 @@ export function Desktop() {
               style={{ pointerEvents: flutterRunnerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FlutterRunner
-                file={activeFlutterApp}
-                onClose={closeFlutterRunner}
+                initialCode={activeFlutterApp?.dartCode}
+                sessionId={userSession}
+                onClose={() => {
+                  setFlutterRunnerOpen(false)
+                  setActiveFlutterApp(null)
+                }}
                 onMinimize={() => setFlutterRunnerMinimized(true)}
               />
             </motion.div>

app/components/Dock.tsx

@@ -5,11 +5,14 @@ import {
   Folder,
   Calendar as CalendarIcon,
   Clock as ClockIcon,
-  Globe,
+
   Sparkle,
   Trash,
   FolderOpen,
-  Compass
+  Compass,
+  Flask,
+  DeviceMobile,
+  Function
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { DynamicClockIcon } from './DynamicClockIcon'
@@ -26,7 +29,7 @@ interface DockProps {
   onOpenFileManager: (path: string) => void
   onOpenCalendar: () => void
   onOpenClock: () => void
-  onOpenBrowser: () => void
+
   onOpenGeminiChat: () => void
   openApps: { [key: string]: boolean }
   minimizedApps?: MinimizedApp[]
@@ -70,7 +73,7 @@ export function Dock({
   onOpenFileManager,
   onOpenCalendar,
   onOpenClock,
-  onOpenBrowser,
+
   onOpenGeminiChat,
   openApps,
   minimizedApps = []
@@ -89,18 +92,6 @@ export function Dock({
       isActive: openApps['files'],
       className: ''
     },
-    {
-      icon: (
-        <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
-          <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
-          <Compass size={28} weight="light" className="text-white relative z-10 md:scale-125" />
-        </div>
-      ),
-      label: 'Browser',
-      onClick: onOpenBrowser,
-      isActive: openApps['browser'],
-      className: ''
-    },
     {
       icon: (
         <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">

app/components/DraggableDesktopIcon.tsx

@@ -8,9 +8,10 @@ import {
   Clock,
   Globe,
   Sparkle,
-  Terminal,
+  Flask,
+  DeviceMobile,
+  Function,
   HardDrives,
-  Compass,
   Code,
   Lightning,
   Key
@@ -65,11 +66,10 @@ export function DraggableDesktopIcon({
             <DynamicClockIcon />
           </div>
         )
-      case 'browser':
+      case 'research':
         return (
-          <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
-            <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
-            <Compass size={36} weight="light" className="text-white relative z-10" />
+          <div className="bg-gradient-to-br from-purple-400 to-pink-500 w-full h-full rounded-xl flex items-center justify-center shadow-lg">
+            <Flask size={32} weight="fill" className="text-white" />
           </div>
         )
       case 'gemini':
@@ -78,12 +78,6 @@ export function DraggableDesktopIcon({
             <Sparkle size={32} weight="fill" className="text-blue-500" />
           </div>
         )
-      case 'terminal':
-        return (
-          <div className="bg-gray-800 w-full h-full rounded-xl flex items-center justify-center border border-gray-600">
-            <span className="text-white font-mono font-bold text-xl">&gt;_</span>
-          </div>
-        )
       case 'harddrive':
         return (
           <div className="bg-gray-200 w-full h-full rounded-lg flex items-center justify-center border border-gray-300 relative">

app/components/FileManager.tsx

@@ -22,7 +22,16 @@ import {
   Eye,
   Users,
   Globe,
-  Code
+  Code,
+  AppWindow,
+  Desktop,
+  DownloadSimple,
+  Flask,
+  DeviceMobile,
+  Function,
+  Calendar as CalendarIcon,
+  Clock as ClockIcon,
+  Sparkle
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { FilePreview } from './FilePreview'
@@ -36,6 +45,7 @@ interface FileManagerProps {
   onMaximize?: () => void
   onOpenFlutterApp?: (appFile: any) => void
   sessionId?: string
+  onOpenApp?: (appId: string) => void
 }
 
 interface FileItem {
@@ -50,7 +60,7 @@ interface FileItem {
   pubspecYaml?: string
 }
 
-export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp, onMinimize, onMaximize, sessionId }: FileManagerProps) {
+export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp, onMinimize, onMaximize, sessionId, onOpenApp }: FileManagerProps) {
   const [files, setFiles] = useState<FileItem[]>([])
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
@@ -58,14 +68,35 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
   const [uploadModalOpen, setUploadModalOpen] = useState(false)
   const [previewFile, setPreviewFile] = useState<FileItem | null>(null)
   const [isPublicFolder, setIsPublicFolder] = useState(false)
+  const [sidebarSelection, setSidebarSelection] = useState('documents') // 'applications', 'desktop', 'documents', 'downloads', 'public'
 
   // Load files when path changes or sessionId becomes available
   useEffect(() => {
     // Check if this is the public folder
     setIsPublicFolder(currentPath === 'public' || currentPath.startsWith('public/'))
 
+    // Update sidebar selection based on path
+    if (currentPath === 'public' || currentPath.startsWith('public/')) {
+      setSidebarSelection('public')
+    } else if (currentPath === 'Applications') {
+      setSidebarSelection('applications')
+    } else if (currentPath === 'Desktop') {
+      setSidebarSelection('desktop')
+    } else if (currentPath === 'Downloads') {
+      setSidebarSelection('downloads')
+    } else {
+      setSidebarSelection('documents')
+    }
+
     // Only load files if we have a sessionId (for non-public folders) or if it's a public folder
     const isPublic = currentPath === 'public' || currentPath.startsWith('public/')
+
+    if (currentPath === 'Applications') {
+      setLoading(false)
+      setFiles([]) // Applications are handled separately
+      return
+    }
+
     if (isPublic || sessionId) {
       loadFiles()
     }
@@ -96,7 +127,7 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         return
       }
 
-      // Add public folder to root directory
+      // Add public folder to root directory if in root
       if (currentPath === '') {
         const publicFolder = {
           name: 'Public Folder',
@@ -230,7 +261,7 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
       if (file.path === 'public' || file.name === 'Public Folder') {
         return <Users size={48} weight="fill" className="text-purple-400" />
       }
-      return <FolderIcon size={48} weight="fill" className="text-orange-400" />
+      return <FolderIcon size={48} weight="fill" className="text-blue-400" />
     }
 
     if (file.type === 'flutter_app') {
@@ -279,6 +310,31 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
     return !relativePath.includes('/')
   })
 
+  const handleSidebarClick = (item: string) => {
+    setSidebarSelection(item)
+    if (item === 'applications') {
+      onNavigate('Applications')
+    } else if (item === 'desktop') {
+      onNavigate('Desktop')
+    } else if (item === 'documents') {
+      onNavigate('')
+    } else if (item === 'downloads') {
+      onNavigate('Downloads')
+    } else if (item === 'public') {
+      onNavigate('public')
+    }
+  }
+
+  const applications = [
+    { id: 'files', name: 'Finder', icon: <FolderIcon size={48} weight="fill" className="text-blue-500" /> },
+    { id: 'calendar', name: 'Calendar', icon: <CalendarIcon size={48} weight="regular" className="text-red-500" /> },
+    { id: 'clock', name: 'Clock', icon: <ClockIcon size={48} weight="regular" className="text-black" /> },
+    { id: 'gemini', name: 'Gemini', icon: <Sparkle size={48} weight="fill" className="text-blue-500" /> },
+    { id: 'research', name: 'Research', icon: <Flask size={48} weight="fill" className="text-purple-500" /> },
+    { id: 'flutter-editor', name: 'Flutter IDE', icon: <DeviceMobile size={48} weight="fill" className="text-cyan-500" /> },
+    { id: 'latex-editor', name: 'LaTeX Studio', icon: <Function size={48} weight="bold" className="text-black" /> },
+  ]
+
   return (
     <>
       <Window
@@ -288,158 +344,222 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         onClose={onClose}
         onMinimize={onMinimize}
         onMaximize={onMaximize}
-        width={900}
-        height={600}
+        width={1000}
+        height={650}
         x={60}
         y={60}
         className="file-manager-window"
       >
-        <div className="flex flex-col h-full">
-          {/* Toolbar */}
-          <div className="h-12 bg-[#fafafa] border-b border-[#e0e0e0] flex items-center px-3 gap-2">
-            <div className="flex items-center gap-1">
+        <div className="flex h-full bg-[#F5F5F5]">
+          {/* Sidebar */}
+          <div className="w-48 bg-[#F3F3F3]/90 backdrop-blur-xl border-r border-gray-200 pt-4 flex flex-col">
+            <div className="px-4 mb-2">
+              <span className="text-xs font-bold text-gray-400">Favorites</span>
+            </div>
+            <nav className="space-y-1 px-2">
               <button
-                onClick={() => {
-                  const parent = currentPath.split('/').slice(0, -1).join('/')
-                  onNavigate(parent)
-                }}
-                disabled={!currentPath}
-                className="p-1.5 hover:bg-[#e8e8e8] rounded disabled:opacity-40 disabled:hover:bg-transparent"
+                onClick={() => handleSidebarClick('applications')}
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm ${sidebarSelection === 'applications' ? 'bg-gray-200 text-black' : 'text-gray-600 hover:bg-gray-100'}`}
               >
-                <CaretLeft size={16} weight="bold" />
+                <AppWindow size={18} weight="fill" className="text-blue-500" />
+                Applications
               </button>
               <button
-                onClick={() => onNavigate('')}
-                className="p-1.5 hover:bg-[#e8e8e8] rounded"
+                onClick={() => handleSidebarClick('desktop')}
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm ${sidebarSelection === 'desktop' ? 'bg-gray-200 text-black' : 'text-gray-600 hover:bg-gray-100'}`}
               >
-                <House size={16} weight="regular" />
+                <Desktop size={18} weight="fill" className="text-cyan-500" />
+                Desktop
               </button>
-            </div>
-
-            <div className="flex items-center gap-1 px-2 py-1.5 bg-white border border-[#ddd] rounded flex-1">
-              <House size={14} weight="regular" className="text-[#666]" />
-              <span className="text-xs text-[#666]">/</span>
-              <span className="text-xs text-[#2c2c2c]">data/documents/{currentPath}</span>
-            </div>
-
-            <div className="flex items-center gap-1">
               <button
-                onClick={handleCreateFolder}
-                className="p-1.5 hover:bg-[#e8e8e8] rounded"
-                title="New Folder"
+                onClick={() => handleSidebarClick('documents')}
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm ${sidebarSelection === 'documents' ? 'bg-gray-200 text-black' : 'text-gray-600 hover:bg-gray-100'}`}
               >
-                <Plus size={16} weight="bold" />
+                <FileText size={18} weight="fill" className="text-gray-500" />
+                Documents
               </button>
               <button
-                onClick={() => setUploadModalOpen(true)}
-                className="p-1.5 hover:bg-[#e8e8e8] rounded"
-                title="Upload File"
+                onClick={() => handleSidebarClick('downloads')}
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm ${sidebarSelection === 'downloads' ? 'bg-gray-200 text-black' : 'text-gray-600 hover:bg-gray-100'}`}
               >
-                <Upload size={16} weight="regular" />
+                <DownloadSimple size={18} weight="fill" className="text-blue-500" />
+                Downloads
               </button>
-              <div className="flex items-center gap-1 px-2 py-1 bg-white border border-[#ddd] rounded">
-                <MagnifyingGlass size={14} weight="regular" className="text-[#666]" />
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="text-xs outline-none w-32"
-                />
-              </div>
-            </div>
+              <button
+                onClick={() => handleSidebarClick('public')}
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm ${sidebarSelection === 'public' ? 'bg-gray-200 text-black' : 'text-gray-600 hover:bg-gray-100'}`}
+              >
+                <Users size={18} weight="fill" className="text-purple-500" />
+                Public
+              </button>
+            </nav>
           </div>
 
-          {/* File List */}
-          <div className="flex-1 overflow-auto p-4 bg-white">
-            {!sessionId && !isPublicFolder ? (
-              <div className="flex items-center justify-center h-full text-[#999] text-sm">
-                Initializing session...
-              </div>
-            ) : loading ? (
-              <div className="flex items-center justify-center h-full text-[#999] text-sm">
-                Loading files...
+          {/* Main Content */}
+          <div className="flex-1 flex flex-col bg-white">
+            {/* Toolbar */}
+            <div className="h-12 bg-white border-b border-gray-200 flex items-center px-4 gap-4 justify-between">
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => {
+                    const parent = currentPath.split('/').slice(0, -1).join('/')
+                    onNavigate(parent)
+                  }}
+                  disabled={!currentPath || currentPath === 'Applications'}
+                  className="p-1.5 hover:bg-gray-100 rounded-md disabled:opacity-30 transition-colors"
+                >
+                  <CaretLeft size={18} weight="bold" className="text-gray-600" />
+                </button>
+                <span className="text-sm font-semibold text-gray-700">
+                  {currentPath === '' ? 'Documents' : currentPath}
+                </span>
               </div>
-            ) : currentLevelFiles.length === 0 ? (
-              <div className="flex items-center justify-center h-full text-[#999] text-sm">
-                {searchQuery ? 'No files found' : 'Folder is empty'}
+
+              <div className="flex items-center gap-2">
+                {currentPath !== 'Applications' && (
+                  <>
+                    <button
+                      onClick={handleCreateFolder}
+                      className="p-1.5 hover:bg-gray-100 rounded-md transition-colors"
+                      title="New Folder"
+                    >
+                      <Plus size={18} weight="bold" className="text-gray-600" />
+                    </button>
+                    <button
+                      onClick={() => setUploadModalOpen(true)}
+                      className="p-1.5 hover:bg-gray-100 rounded-md transition-colors"
+                      title="Upload File"
+                    >
+                      <Upload size={18} weight="bold" className="text-gray-600" />
+                    </button>
+                  </>
+                )}
+                <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-md w-48">
+                  <MagnifyingGlass size={14} weight="bold" className="text-gray-400" />
+                  <input
+                    type="text"
+                    placeholder="Search"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="bg-transparent text-sm outline-none w-full placeholder-gray-400"
+                  />
+                </div>
               </div>
-            ) : (
-              <div className="grid grid-cols-6 gap-4">
-                {currentLevelFiles.map((file) => (
-                  <div
-                    key={file.path}
-                    className="group relative"
-                  >
+            </div>
+
+            {/* File Grid */}
+            <div className="flex-1 overflow-auto p-6">
+              {currentPath === 'Applications' ? (
+                <div className="grid grid-cols-5 gap-6">
+                  {applications.map((app) => (
                     <button
-                      onClick={() => {
-                        if (file.type === 'folder') {
-                          onNavigate(file.path)
-                        } else if (file.type === 'flutter_app' && onOpenFlutterApp) {
-                          onOpenFlutterApp(file)
-                        } else {
-                          handlePreview(file)
-                        }
-                      }}
-                      className="flex flex-col items-center gap-2 p-2 hover:bg-[#f0f0f0] rounded w-full"
+                      key={app.id}
+                      onDoubleClick={() => onOpenApp && onOpenApp(app.id)}
+                      className="flex flex-col items-center gap-3 p-4 hover:bg-blue-50 rounded-xl transition-colors group"
                     >
-                      <div className="w-16 h-16 flex items-center justify-center">
-                        {getFileIcon(file)}
+                      <div className="w-16 h-16 flex items-center justify-center drop-shadow-sm group-hover:scale-105 transition-transform">
+                        {app.icon}
                       </div>
-                      <span className="text-xs text-[#2c2c2c] text-center break-all w-full line-clamp-2">
-                        {file.name}
-                      </span>
-                      {file.size && (
-                        <span className="text-xs text-[#666]">
-                          {formatFileSize(file.size)}
-                        </span>
-                      )}
+                      <span className="text-sm font-medium text-gray-700">{app.name}</span>
                     </button>
-
-                    {/* File Actions */}
-                    {file.type === 'file' && (
-                      <div className="absolute top-1 right-1 hidden group-hover:flex gap-1">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handlePreview(file)
-                          }}
-                          className="p-1 bg-white rounded shadow hover:bg-[#f0f0f0]"
-                          title="Preview"
-                        >
-                          <Eye size={14} />
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handleDownload(file)
-                          }}
-                          className="p-1 bg-white rounded shadow hover:bg-[#f0f0f0]"
-                          title="Download"
+                  ))}
+                </div>
+              ) : (
+                <>
+                  {!sessionId && !isPublicFolder ? (
+                    <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                      Initializing session...
+                    </div>
+                  ) : loading ? (
+                    <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                      Loading files...
+                    </div>
+                  ) : currentLevelFiles.length === 0 ? (
+                    <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                      {searchQuery ? 'No files found' : 'Folder is empty'}
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-5 gap-6">
+                      {currentLevelFiles.map((file) => (
+                        <div
+                          key={file.path}
+                          className="group relative"
                         >
-                          <Download size={14} />
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handleDelete(file)
-                          }}
-                          className="p-1 bg-white rounded shadow hover:bg-red-100"
-                          title="Delete"
-                        >
-                          <Trash size={14} className="text-red-600" />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+                          <button
+                            onDoubleClick={() => {
+                              if (file.type === 'folder') {
+                                onNavigate(file.path)
+                              } else if (file.type === 'flutter_app' && onOpenFlutterApp) {
+                                onOpenFlutterApp(file)
+                              } else {
+                                handlePreview(file)
+                              }
+                            }}
+                            className="flex flex-col items-center gap-3 p-4 hover:bg-blue-50 rounded-xl w-full transition-colors"
+                          >
+                            <div className="w-16 h-16 flex items-center justify-center drop-shadow-sm">
+                              {getFileIcon(file)}
+                            </div>
+                            <span className="text-sm font-medium text-gray-700 text-center break-all w-full line-clamp-2">
+                              {file.name}
+                            </span>
+                            {file.size && (
+                              <span className="text-xs text-gray-400">
+                                {formatFileSize(file.size)}
+                              </span>
+                            )}
+                          </button>
+
+                          {/* File Actions */}
+                          {file.type === 'file' && (
+                            <div className="absolute top-2 right-2 hidden group-hover:flex gap-1 bg-white/90 rounded-lg shadow-sm p-1">
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handlePreview(file)
+                                }}
+                                className="p-1.5 hover:bg-gray-100 rounded-md text-gray-600"
+                                title="Preview"
+                              >
+                                <Eye size={14} weight="bold" />
+                              </button>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleDownload(file)
+                                }}
+                                className="p-1.5 hover:bg-gray-100 rounded-md text-gray-600"
+                                title="Download"
+                              >
+                                <Download size={14} weight="bold" />
+                              </button>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleDelete(file)
+                                }}
+                                className="p-1.5 hover:bg-red-50 rounded-md text-red-500"
+                                title="Delete"
+                              >
+                                <Trash size={14} weight="bold" />
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
 
-          {/* Status Bar */}
-          <div className="h-6 bg-[#f6f5f4] border-t border-[#d0d0d0] flex items-center px-3 text-xs text-[#666]">
-            {currentLevelFiles.length} items • {files.filter(f => f.type === 'folder').length} folders • {files.filter(f => f.type === 'file').length} files
+            {/* Status Bar */}
+            <div className="h-8 bg-white border-t border-gray-200 flex items-center px-4 text-xs text-gray-500 font-medium">
+              {currentPath === 'Applications'
+                ? `${applications.length} items`
+                : `${currentLevelFiles.length} items • ${files.filter(f => f.type === 'folder').length} folders • ${files.filter(f => f.type === 'file').length} files`
+              }
+            </div>
           </div>
         </div>
       </Window>
@@ -485,45 +605,45 @@ function UploadModal({
   }
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 w-[400px]">
-        <h2 className="text-lg font-semibold mb-4">Upload File</h2>
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-[100]">
+      <div className="bg-white rounded-xl shadow-2xl p-6 w-[400px] border border-gray-200">
+        <h2 className="text-lg font-semibold mb-4 text-gray-800">Upload File</h2>
 
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium mb-2">Select File</label>
+            <label className="block text-sm font-medium mb-2 text-gray-600">Select File</label>
             <input
               type="file"
               onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
-              className="w-full p-2 border rounded"
+              className="w-full p-2 border border-gray-300 rounded-lg text-sm"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium mb-2">Upload to Folder</label>
+            <label className="block text-sm font-medium mb-2 text-gray-600">Upload to Folder</label>
             <input
               type="text"
               value={targetFolder}
               onChange={(e) => setTargetFolder(e.target.value)}
               placeholder="e.g., homework/math"
-              className="w-full p-2 border rounded"
+              className="w-full p-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-gray-400 mt-1">
               Leave empty for root, or enter path like "folder/subfolder"
             </p>
           </div>
 
-          <div className="flex justify-end gap-2">
+          <div className="flex justify-end gap-2 pt-2">
             <button
               onClick={onClose}
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm font-medium transition-colors"
             >
               Cancel
             </button>
             <button
               onClick={handleSubmit}
               disabled={!selectedFile}
-              className="px-4 py-2 bg-[#E95420] text-white rounded hover:bg-[#d14818] disabled:opacity-50"
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 text-sm font-medium shadow-lg shadow-blue-500/20 transition-all"
             >
               Upload
             </button>

app/components/FlutterRunner.tsx

@@ -1,288 +1,327 @@
 'use client'
 
-import React, { useState, useRef, useEffect } from 'react'
-import Window from './Window'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Copy, CaretRight, CaretLeft, Code as CodeIcon, Play, FloppyDisk, PencilSimple } from '@phosphor-icons/react'
+import React, { useState, useEffect } from 'react'
 import Editor from '@monaco-editor/react'
-import { DartPadEmbed } from './DartPadEmbed'
+import {
+  Play,
+  Download,
+  X,
+  Minus,
+  Square,
+  DeviceMobile,
+  SidebarSimple,
+  FileCode,
+  ArrowsClockwise,
+  Check,
+  CaretRight,
+  CaretDown
+} from '@phosphor-icons/react'
+import Window from './Window'
 
 interface FlutterRunnerProps {
-  file: {
-    name: string
-    dartCode: string
-    dependencies?: string[]
-    pubspecYaml?: string
-  }
   onClose: () => void
   onMinimize?: () => void
   onMaximize?: () => void
+  initialCode?: string
+  sessionId?: string
 }
 
-export function FlutterRunner({ file, onClose, onMinimize, onMaximize }: FlutterRunnerProps) {
-  const [mode, setMode] = useState<'preview' | 'edit'>('preview') // preview or edit mode
-  const [sidebarOpen, setSidebarOpen] = useState(true)
-  const [copySuccess, setCopySuccess] = useState(false)
-  const [isMobile, setIsMobile] = useState(false)
-  const [code, setCode] = useState(file.dartCode)
-  const [pubspec, setPubspec] = useState(file.pubspecYaml || '')
-  const [saving, setSaving] = useState(false)
-  const [saved, setSaved] = useState(false)
+interface FileNode {
+  id: string
+  name: string
+  type: 'file' | 'folder'
+  content?: string
+  children?: FileNode[]
+  isOpen?: boolean
+}
 
-  // Detect mobile and auto-close sidebar on mobile landscape
-  React.useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth <= 1024
-      setIsMobile(mobile)
-      // Auto-close sidebar on mobile landscape for more iframe space
-      if (mobile && window.innerHeight < window.innerWidth) {
-        setSidebarOpen(false)
-      }
-    }
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
+export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode, sessionId }: FlutterRunnerProps) {
+  const [code, setCode] = useState(initialCode || `import 'package:flutter/material.dart';
 
-  const handleCopyCode = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setCopySuccess(true)
-      setTimeout(() => setCopySuccess(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy code:', err)
-    }
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+        useMaterial3: true,
+      ),
+      home: const MyHomePage(title: 'Flutter Demo Home Page'),
+    );
   }
+}
 
-  const handleCopyPubspec = async () => {
-    if (pubspec) {
-      try {
-        await navigator.clipboard.writeText(pubspec)
-        setCopySuccess(true)
-        setTimeout(() => setCopySuccess(false), 2000)
-      } catch (err) {
-        console.error('Failed to copy pubspec:', err)
-      }
-    }
+class MyHomePage extends StatefulWidget {
+  const MyHomePage({super.key, required this.title});
+
+  final String title;
+
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  int _counter = 0;
+
+  void _incrementCounter() {
+    setState(() {
+      _counter++;
+    });
   }
 
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      // Save the updated Flutter app
-      const response = await fetch('/api/flutter/update', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: file.name,
-          dartCode: code,
-          pubspecYaml: pubspec,
-          dependencies: file.dependencies
-        })
-      })
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const Text(
+              'You have pushed the button this many times:',
+            ),
+            Text(
+              '$_counter',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _incrementCounter,
+        tooltip: 'Increment',
+        child: const Icon(Icons.add),
+      ),
+    );
+  }
+}`)
+
+  const [isRunning, setIsRunning] = useState(false)
+  const [key, setKey] = useState(0)
+  const [showSidebar, setShowSidebar] = 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 [activeFileId, setActiveFileId] = useState('main')
+  const [isSaving, setIsSaving] = useState(false)
 
-      if (response.ok) {
-        setSaved(true)
-        setTimeout(() => setSaved(false), 2000)
+  // Auto-save to session
+  useEffect(() => {
+    const saveToSession = async () => {
+      if (!sessionId) return
+      setIsSaving(true)
+      try {
+        await fetch('/api/session/code', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-session-id': sessionId
+          },
+          body: JSON.stringify({
+            type: 'flutter',
+            code,
+            filename: 'main.dart'
+          })
+        })
+      } catch (error) {
+        console.error('Failed to save to session:', error)
+      } finally {
+        setIsSaving(false)
       }
-    } catch (error) {
-      console.error('Failed to save:', error)
-    } finally {
-      setSaving(false)
     }
+
+    const debounce = setTimeout(saveToSession, 2000)
+    return () => clearTimeout(debounce)
+  }, [code, sessionId])
+
+  const handleRun = () => {
+    setIsRunning(true)
+    setKey(prev => prev + 1)
+  }
+
+  const handleDownload = () => {
+    const blob = new Blob([code], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'main.dart'
+    a.click()
+    URL.revokeObjectURL(url)
   }
 
   return (
     <Window
       id="flutter-runner"
-      title={`Flutter App: ${file.name}`}
+      title="Flutter IDE"
       isOpen={true}
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
       width={1200}
-      height={700}
-      x={100}
-      y={80}
-      className="flutter-runner-window"
+      height={800}
+      x={40}
+      y={40}
+      className="flutter-ide-window"
     >
-      <div className="flex flex-col h-full bg-[#1E1E1E] text-gray-300">
-        {/* Top Toolbar */}
-        <div className="window-drag-handle h-14 bg-[#252526] border-b border-[#333] flex items-center justify-between px-4 shadow-sm cursor-move">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
-              <CodeIcon size={20} weight="bold" className="text-blue-400" />
+      <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
+        {/* Sidebar */}
+        {showSidebar && (
+          <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
+            <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
+              Explorer
             </div>
-            <div>
-              <h3 className="text-white font-medium text-sm">{file.name}</h3>
-              <p className="text-xs text-gray-500">Flutter Project</p>
+            <div className="flex-1 overflow-y-auto py-2">
+              <div className="px-2">
+                <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                  <CaretDown size={12} weight="bold" />
+                  <span className="font-bold">PROJECT</span>
+                </div>
+                <div className="pl-4">
+                  {files.map(file => (
+                    <div key={file.id}>
+                      <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
+                        <CaretDown size={12} weight="bold" />
+                        {file.name}
+                      </div>
+                      {file.children?.map(child => (
+                        <div
+                          key={child.id}
+                          onClick={() => setActiveFileId(child.id)}
+                          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]'
+                            }`}
+                        >
+                          <FileCode size={14} />
+                          {child.name}
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
-          <div className="flex items-center gap-2 bg-[#1E1E1E] p-1 rounded-lg border border-[#333]">
-            <button
-              onClick={() => setMode('preview')}
-              className={`flex items-center gap-2 px-3 py-1.5 rounded-md transition-all text-sm font-medium ${mode === 'preview'
-                ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
-                : 'text-gray-400 hover:text-white hover:bg-white/5'
-                }`}
-            >
-              <Play size={16} weight="bold" />
-              Preview
-            </button>
-            <button
-              onClick={() => setMode('edit')}
-              className={`flex items-center gap-2 px-3 py-1.5 rounded-md transition-all text-sm font-medium ${mode === 'edit'
-                ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
-                : 'text-gray-400 hover:text-white hover:bg-white/5'
-                }`}
-            >
-              <PencilSimple size={16} weight="bold" />
-              Edit Code
-            </button>
-          </div>
-          <div className="flex items-center gap-2">
-            {mode === 'edit' && (
+        )}
+
+        {/* Main Content */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {/* Toolbar */}
+          <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowSidebar(!showSidebar)}
+                className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
+                title="Toggle Sidebar"
+              >
+                <SidebarSimple size={16} />
+              </button>
+              <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
+              </div>
+              {isSaving && (
+                <span className="text-xs text-gray-500 flex items-center gap-1">
+                  <ArrowsClockwise size={12} className="animate-spin" />
+                  Syncing...
+                </span>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleRun}
+                className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
+              >
+                <Play size={14} weight="fill" />
+                Run
+              </button>
               <button
-                onClick={handleSave}
-                disabled={saving}
-                className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-500 text-white rounded-lg transition-all text-sm font-medium disabled:opacity-50 shadow-lg shadow-green-900/20"
+                onClick={handleDownload}
+                className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
+                title="Download Code"
               >
-                <FloppyDisk size={16} weight="bold" />
-                {saving ? 'Saving...' : saved ? 'Saved!' : 'Save Changes'}
+                <Download size={16} />
               </button>
-            )}
+            </div>
           </div>
-        </div>
 
-        {/* Main Content Area */}
-        <div className="flex flex-1 overflow-hidden relative">
-          {/* Left Panel - Code Editor or DartPad Preview */}
-          <div className="flex-1 relative bg-[#1E1E1E]">
-            {mode === 'preview' ? (
-              <div className="w-full h-full overflow-hidden bg-[#1E1E1E] flex items-center justify-center">
-                <div className="w-full h-full relative">
-                  <DartPadEmbed code={code} theme="dark" />
+          {/* Split View: Editor & Preview */}
+          <div className="flex-1 flex overflow-hidden">
+            {/* Editor */}
+            <div className="flex-1 border-r border-[#333]">
+              <Editor
+                height="100%"
+                defaultLanguage="dart"
+                theme="vs-dark"
+                value={code}
+                onChange={(value) => setCode(value || '')}
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 14,
+                  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                  lineNumbers: 'on',
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  padding: { top: 16, bottom: 16 },
+                  renderLineHighlight: 'all',
+                  smoothScrolling: true,
+                  cursorBlinking: 'smooth',
+                  cursorSmoothCaretAnimation: 'on'
+                }}
+              />
+            </div>
+
+            {/* Preview */}
+            <div className="w-[400px] bg-[#1e1e1e] flex flex-col border-l border-[#333]">
+              <div className="h-8 bg-[#252526] border-b border-[#333] flex items-center justify-between px-3">
+                <span className="text-xs font-bold text-gray-500 uppercase">Preview</span>
+                <div className="flex gap-1">
+                  <div className="w-2 h-2 rounded-full bg-red-500/50" />
+                  <div className="w-2 h-2 rounded-full bg-yellow-500/50" />
+                  <div className="w-2 h-2 rounded-full bg-green-500/50" />
                 </div>
               </div>
-            ) : (
-              <div className="w-full h-full bg-[#1E1E1E]">
-                <Editor
-                  height="100%"
-                  defaultLanguage="dart"
-                  value={code}
-                  onChange={(value) => setCode(value || '')}
-                  theme="vs-dark"
-                  options={{
-                    minimap: { enabled: false },
-                    fontSize: 14,
-                    lineNumbers: 'on',
-                    scrollBeyondLastLine: false,
-                    automaticLayout: true,
-                    tabSize: 2,
-                    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                    padding: { top: 20, bottom: 20 }
-                  }}
+              <div className="flex-1 bg-white relative overflow-hidden">
+                <iframe
+                  key={key}
+                  src={`https://dartpad.dev/embed-flutter.html?theme=light&run=true&split=0&code=${encodeURIComponent(code)}`}
+                  className="w-full h-full border-0"
+                  sandbox="allow-scripts allow-same-origin allow-popups"
+                  title="Flutter Preview"
                 />
+                {!isRunning && (
+                  <div className="absolute inset-0 bg-black/5 flex items-center justify-center backdrop-blur-[1px]">
+                    <button
+                      onClick={handleRun}
+                      className="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition-colors flex items-center gap-2 text-sm font-medium"
+                    >
+                      <Play size={16} weight="fill" />
+                      Run App
+                    </button>
+                  </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
-
-          {/* Collapsible Sidebar */}
-          <AnimatePresence>
-            {sidebarOpen && (
-              <motion.div
-                initial={{ width: 0, opacity: 0 }}
-                animate={{ width: isMobile ? '100%' : 350, opacity: 1 }}
-                exit={{ width: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className={`${isMobile ? 'absolute right-0 top-0 bottom-0 z-10' : ''} border-l border-[#333] bg-[#252526] flex flex-col shadow-xl`}
-              >
-                {/* Sidebar Header */}
-                <div className="h-12 border-b border-[#333] flex items-center justify-between px-4">
-                  <span className="font-medium text-sm text-gray-300">Project Details</span>
-                  <button
-                    onClick={() => setSidebarOpen(false)}
-                    className="hover:bg-white/10 p-1.5 rounded-md transition-colors text-gray-400 hover:text-white"
-                  >
-                    <CaretRight size={16} weight="bold" />
-                  </button>
-                </div>
-
-                {/* Sidebar Content */}
-                <div className="flex-1 overflow-y-auto p-4 space-y-6">
-                  {/* Dart Code Section */}
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider">Source Code</h3>
-                      <button
-                        onClick={handleCopyCode}
-                        className="flex items-center gap-1.5 px-2 py-1 bg-[#333] hover:bg-[#444] text-gray-300 text-xs rounded transition-colors border border-[#444]"
-                      >
-                        <Copy size={12} weight="bold" />
-                        {copySuccess ? 'Copied!' : 'Copy'}
-                      </button>
-                    </div>
-                    <div className="bg-[#1E1E1E] rounded-lg p-3 border border-[#333] max-h-48 overflow-y-auto custom-scrollbar">
-                      <pre className="text-xs text-blue-300 font-mono whitespace-pre-wrap break-words">
-                        {code}
-                      </pre>
-                    </div>
-                  </div>
-
-                  {/* Dependencies Section */}
-                  {file.dependencies && file.dependencies.length > 0 && (
-                    <div className="space-y-3">
-                      <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider">Dependencies</h3>
-                      <div className="bg-[#1E1E1E] rounded-lg p-3 border border-[#333]">
-                        <ul className="space-y-2">
-                          {file.dependencies.map((dep, index) => (
-                            <li key={index} className="text-xs font-mono text-green-400 flex items-center gap-2">
-                              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
-                              {dep}
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Pubspec.yaml Section */}
-                  {pubspec && (
-                    <div className="space-y-3">
-                      <div className="flex items-center justify-between">
-                        <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider">pubspec.yaml</h3>
-                        <button
-                          onClick={handleCopyPubspec}
-                          className="flex items-center gap-1.5 px-2 py-1 bg-[#333] hover:bg-[#444] text-gray-300 text-xs rounded transition-colors border border-[#444]"
-                        >
-                          <Copy size={12} weight="bold" />
-                          Copy
-                        </button>
-                      </div>
-                      <div className="bg-[#1E1E1E] rounded-lg p-3 border border-[#333] max-h-48 overflow-y-auto custom-scrollbar">
-                        <pre className="text-xs text-yellow-400 font-mono whitespace-pre-wrap break-words">
-                          {pubspec}
-                        </pre>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-
-          {/* Sidebar Toggle Button (when closed) */}
-          {!sidebarOpen && (
-            <button
-              onClick={() => setSidebarOpen(true)}
-              className="absolute right-0 top-4 bg-[#252526] border-l border-t border-b border-[#333] text-gray-400 hover:text-white p-2 rounded-l-lg shadow-lg transition-all z-10"
-            >
-              <CaretLeft size={20} weight="bold" />
-            </button>
-          )}
         </div>
       </div>
     </Window>
   )
 }
-

app/components/LaTeXEditor.tsx

@@ -223,303 +223,283 @@ This document demonstrates LaTeX capabilities for: ${prompt}
       setDocuments(updatedDocs)
       setCurrentDocument(newDoc)
 
-      // Save to localStorage with session ID
-      const storageKey = `latex_documents_${sessionId}`
-      localStorage.setItem(storageKey, JSON.stringify(updatedDocs))
-
-      // Also save to backend
-      await fetch('/api/latex/save', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          document: newDoc,
-          sessionId
-        })
-      })
-    } catch (error) {
-      console.error('Failed to save:', error)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleLoadDocument = (doc: LaTeXDocument) => {
-    setContent(doc.content)
-    setCurrentDocument(doc)
-  }
-
-  const handleDeleteDocument = async (docId: string) => {
-    const updatedDocs = documents.filter(d => d.id !== docId)
-    setDocuments(updatedDocs)
-
-    const storageKey = `latex_documents_${sessionId}`
-    localStorage.setItem(storageKey, JSON.stringify(updatedDocs))
-
-    if (currentDocument?.id === docId) {
-      setCurrentDocument(null)
-      setContent('\\documentclass{article}\n\\begin{document}\nNew Document\n\\end{document}')
-    }
-
-    // Delete from backend
-    await fetch('/api/latex/delete', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        documentId: docId,
-        sessionId
-      })
-    })
-  }
+      // Auto-save to session
+      useEffect(() => {
+        const saveToSession = async () => {
+          if (!sessionId) return
+          setIsSaving(true)
+          try {
+            await fetch('/api/session/code', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'x-session-id': sessionId
+              },
+              body: JSON.stringify({
+                type: 'latex',
+                code,
+                filename: 'main.tex'
+              })
+            })
+          } catch (error) {
+            console.error('Failed to save to session:', error)
+          } finally {
+            setIsSaving(false)
+          }
+        }
 
-  const handleDownloadPDF = async () => {
-    try {
-      const response = await fetch('/api/latex/compile', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          latex: content,
-          sessionId
-        })
-      })
+        const debounce = setTimeout(saveToSession, 2000)
+        return () => clearTimeout(debounce)
+      }, [code, sessionId])
+
+      // Render LaTeX preview
+      useEffect(() => {
+        if (previewRef.current) {
+          try {
+            // Simple regex-based rendering for demo purposes
+            // In a real app, you'd use a full LaTeX engine or server-side rendering
+            const text = code
+              .replace(/\\section\{([^}]+)\}/g, '<h2>$1</h2>')
+              .replace(/\\subsection\{([^}]+)\}/g, '<h3>$1</h3>')
+              .replace(/\\textbf\{([^}]+)\}/g, '<b>$1</b>')
+              .replace(/\\textit\{([^}]+)\}/g, '<i>$1</i>')
+              .replace(/\\maketitle/, '<div class="title"><h1>My LaTeX Document</h1><p>Reuben OS</p><p>' + new Date().toLocaleDateString() + '</p></div>')
+              .replace(/\\begin\{document\}/, '')
+              .replace(/\\end\{document\}/, '')
+              .replace(/\\documentclass\{[^}]+\}/, '')
+              .replace(/\\usepackage\{[^}]+\}/, '')
+              .replace(/\\title\{[^}]+\}/, '')
+              .replace(/\\author\{[^}]+\}/, '')
+              .replace(/\\date\{[^}]+\}/, '')
+
+            // Split by math delimiters to render KaTeX
+            const parts = text.split(/(\\\[[\s\S]*?\\\]|\$[^$]+\$)/)
+            previewRef.current.innerHTML = ''
+
+            parts.forEach(part => {
+              if (part.startsWith('\\[') || part.startsWith('$')) {
+                const math = part.replace(/^\\\[|\\\]$|^\$|\$$/g, '')
+                const span = document.createElement('span')
+                try {
+                  katex.render(math, span, { throwOnError: false, displayMode: part.startsWith('\\[') })
+                  previewRef.current?.appendChild(span)
+                } catch (e) {
+                  previewRef.current?.appendChild(document.createTextNode(part))
+                }
+              } else {
+                const div = document.createElement('div')
+                div.innerHTML = part
+                previewRef.current?.appendChild(div)
+              }
+            })
+          } catch (e) {
+            console.error('Render error:', e)
+          }
+        }
+      }, [code])
 
-      if (response.ok) {
-        const blob = await response.blob()
-        const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = `${currentDocument?.name || 'document'}.pdf`
-        a.click()
-        URL.revokeObjectURL(url)
-      } else {
-        // Fallback: Download as .tex file
-        const blob = new Blob([content], { type: 'text/plain' })
+      const handleDownload = () => {
+        const blob = new Blob([code], { type: 'text/plain' })
         const url = URL.createObjectURL(blob)
         const a = document.createElement('a')
         a.href = url
-        a.download = `${currentDocument?.name || 'document'}.tex`
+        a.download = 'main.tex'
         a.click()
         URL.revokeObjectURL(url)
       }
-    } catch (error) {
-      console.error('Failed to compile PDF:', error)
-      // Download as .tex file
-      const blob = new Blob([content], { type: 'text/plain' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `${currentDocument?.name || 'document'}.tex`
-      a.click()
-      URL.revokeObjectURL(url)
-    }
-  }
-
-  const handleCopyLaTeX = async () => {
-    try {
-      await navigator.clipboard.writeText(content)
-      setCopySuccess(true)
-      setTimeout(() => setCopySuccess(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy:', err)
-    }
-  }
 
-  return (
-    <Window
-      id="latex-editor"
-      title="LaTeX Studio"
-      isOpen={true}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      width={1400}
-      height={800}
-      x={50}
-      y={50}
-      className="latex-editor-window"
-    >
-      <div className="flex flex-col h-full bg-[#F5F5F7]">
-        {/* Header */}
-        <div className="window-drag-handle h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shadow-sm z-10 cursor-move">
-          <div className="flex items-center gap-4">
-            <div className="w-10 h-10 bg-black rounded-xl flex items-center justify-center shadow-lg">
-              <MathOperations size={24} weight="bold" className="text-white" />
-            </div>
-            <div>
-              <h1 className="text-gray-900 font-bold text-lg leading-tight">LaTeX Studio</h1>
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Project</span>
-                {currentDocument && (
-                  <span className="text-xs text-gray-400">• {currentDocument.name}</span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <div className="h-8 w-px bg-gray-200 mx-2" />
-
-            <button
-              onClick={handleSaveDocument}
-              disabled={saving}
-              className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all text-sm font-medium"
-            >
-              <FloppyDisk size={18} />
-              {saving ? 'Saving...' : 'Save'}
-            </button>
-
-            <button
-              onClick={handleDownloadPDF}
-              className="flex items-center gap-2 px-4 py-2 bg-black hover:bg-gray-800 text-white rounded-lg transition-all text-sm font-medium shadow-lg shadow-black/20"
-            >
-              <Download size={18} weight="bold" />
-              Export PDF
-            </button>
-
-            <button
-              onClick={() => setShowPreview(!showPreview)}
-              className={`p-2 rounded-lg transition-colors ${showPreview ? 'bg-blue-50 text-blue-600' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
-                }`}
-              title="Toggle Preview"
-            >
-              <Eye size={20} weight={showPreview ? "fill" : "regular"} />
-            </button>
-          </div>
-        </div>
-
-        {/* Claude Prompt Bar */}
-        <div className="bg-white border-b border-gray-200 px-6 py-4">
-          <div className="flex gap-3 max-w-4xl mx-auto">
-            <div className="flex-1 flex items-center bg-gray-50 rounded-xl px-4 py-2.5 border border-gray-200 focus-within:border-purple-500 focus-within:ring-2 focus-within:ring-purple-500/20 transition-all">
-              <Sparkle size={20} className="text-purple-500 mr-3" weight="fill" />
-              <input
-                type="text"
-                value={claudePrompt}
-                onChange={(e) => setClaudePrompt(e.target.value)}
-                onKeyPress={(e) => e.key === 'Enter' && handleGenerateLaTeX()}
-                placeholder="Ask AI to generate equations, tables, or entire sections..."
-                className="flex-1 outline-none text-sm bg-transparent text-gray-900 placeholder-gray-400"
-                disabled={isGenerating}
-              />
-            </div>
-            <button
-              onClick={handleGenerateLaTeX}
-              disabled={isGenerating || !claudePrompt.trim()}
-              className="px-6 py-2.5 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-medium text-sm transition-all shadow-lg shadow-purple-600/20 disabled:opacity-50 disabled:shadow-none"
-            >
-              {isGenerating ? 'Generating...' : 'Generate'}
-            </button>
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="flex flex-1 overflow-hidden">
-          {/* Editor Panel */}
-          <div className={`${showPreview ? 'w-1/2' : 'flex-1'} flex flex-col border-r border-gray-200 bg-white`}>
-            <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
-              <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Source Code</span>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleCopyLaTeX}
-                  className="text-xs text-gray-500 hover:text-gray-900 flex items-center gap-1"
-                >
-                  <Copy size={12} />
-                  {copySuccess ? 'Copied' : 'Copy'}
-                </button>
+      return (
+        <Window
+          id="latex-editor"
+          title="LaTeX Studio"
+          isOpen={true}
+          onClose={onClose}
+          onMinimize={onMinimize}
+          onMaximize={onMaximize}
+          width={1200}
+          height={800}
+          x={60}
+          y={60}
+          className="latex-studio-window"
+        >
+          <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
+            {/* Sidebar */}
+            {showSidebar && (
+              <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
+                <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
+                  Explorer
+                </div>
+                <div className="flex-1 overflow-y-auto py-2">
+                  <div className="px-2">
+                    <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                      <CaretDown size={12} weight="bold" />
+                      <span className="font-bold">PROJECT</span>
+                    </div>
+                    <div className="pl-4">
+                      {files.map(file => (
+                        <div key={file.id}>
+                          <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
+                            <CaretDown size={12} weight="bold" />
+                            {file.name}
+                          </div>
+                          {file.children?.map(child => (
+                            <div
+                              key={child.id}
+                              onClick={() => setActiveFileId(child.id)}
+                              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]'
+                                }`}
+                            >
+                              <FileText size={14} />
+                              {child.name}
+                            </div>
+                          ))}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-            <div className="flex-1">
-              <Editor
-                height="100%"
-                defaultLanguage="latex"
-                value={content}
-                onChange={(value) => setContent(value || '')}
-                theme="light"
-                options={{
-                  minimap: { enabled: true },
-                  fontSize: 15,
-                  lineNumbers: 'on',
-                  wordWrap: 'on',
-                  automaticLayout: true,
-                  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                  padding: { top: 20, bottom: 20 },
-                  renderLineHighlight: 'all',
-                }}
-              />
-            </div>
-          </div>
+            )}
+
+            {/* Main Content */}
+            <div className="flex-1 flex flex-col min-w-0">
+              {/* Toolbar */}
+              <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setShowSidebar(!showSidebar)}
+                    className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
+                    title="Toggle Sidebar"
+                  >
+                    <SidebarSimple size={16} />
+                  </button>
+                  <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
+                  </div>
+                  {isSaving && (
+                    <span className="text-xs text-gray-500 flex items-center gap-1">
+                      <ArrowsClockwise size={12} className="animate-spin" />
+                      Syncing...
+                    </span>
+                  )}
+                </div>
 
-          {/* Preview Panel */}
-          {showPreview && (
-            <div className="w-1/2 flex flex-col bg-[#F5F5F7]">
-              <div className="flex items-center justify-between px-4 py-2 bg-white border-b border-gray-200">
-                <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Live Preview</span>
-              </div>
-              <div className="flex-1 overflow-auto p-8">
-                <div
-                  ref={previewRef}
-                  className="bg-white shadow-xl min-h-full p-12 mx-auto max-w-[210mm]"
-                  style={{
-                    fontFamily: "'Latin Modern Roman', 'Computer Modern', serif",
-                    fontSize: '18px',
-                    lineHeight: '1.6',
-                    color: '#1a1a1a'
-                  }}
-                  dangerouslySetInnerHTML={{ __html: renderedContent }}
-                />
+                <div className="flex items-center gap-2">
+                  <button
+                    className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
+                  >
+                    <Play size={14} weight="fill" />
+                    Compile
+                  </button>
+                  <button
+                    onClick={handleDownload}
+                    className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
+                    title="Download PDF"
+                  >
+                    <Download size={16} />
+                  </button>
+                </div>
               </div>
-            </div>
-          )}
 
-          {/* Documents Sidebar */}
-          <div className="w-64 bg-gray-50 border-l border-gray-200 flex flex-col">
-            <div className="p-4 border-b border-gray-200">
-              <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">Saved Documents</span>
-            </div>
+              {/* Split View: Editor & Preview */}
+              <div className="flex-1 flex overflow-hidden">
+                {/* Editor */}
+                <div className="flex-1 border-r border-[#333]">
+                  <Editor
+                    height="100%"
+                    defaultLanguage="latex"
+                    theme="vs-dark"
+                    value={code}
+                    onChange={(value) => setCode(value || '')}
+                    options={{
+                      minimap: { enabled: false },
+                      fontSize: 14,
+                      fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                      lineNumbers: 'on',
+                      scrollBeyondLastLine: false,
+                      automaticLayout: true,
+                      padding: { top: 16, bottom: 16 },
+                      renderLineHighlight: 'all',
+                      smoothScrolling: true,
+                      cursorBlinking: 'smooth',
+                      cursorSmoothCaretAnimation: 'on'
+                    }}
+                  />
+                </div>
 
-            <div className="flex-1 overflow-y-auto p-3 space-y-2">
-              {documents.length === 0 ? (
-                <div className="text-gray-400 text-sm text-center py-8 italic">
-                  No saved documents
+                {/* Preview */}
+                <div className="w-[500px] bg-[#525659] flex flex-col border-l border-[#333]">
+                  <div className="h-8 bg-[#323639] border-b border-[#2b2b2b] flex items-center justify-between px-3 shadow-md z-10">
+                    <span className="text-xs font-bold text-gray-400 uppercase">PDF Preview</span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-gray-400">100%</span>
+                    </div>
+                  </div>
+                  <div className="flex-1 overflow-y-auto p-8 flex justify-center">
+                    <div
+                      className="bg-white w-full max-w-[800px] min-h-[1000px] shadow-2xl p-12 text-black font-serif"
+                      ref={previewRef}
+                      style={{
+                        boxShadow: '0 0 20px rgba(0,0,0,0.5)'
+                      }}
+                      dangerouslySetInnerHTML={{ __html: renderedContent }}
+                    />
+                  </div>
                 </div>
-              ) : (
-                documents.map(doc => (
-                  <div
-                    key={doc.id}
-                    className={`group rounded-lg p-3 cursor-pointer border transition-all ${currentDocument?.id === doc.id
-                      ? 'bg-white border-purple-200 shadow-sm ring-1 ring-purple-500/20'
-                      : 'bg-transparent border-transparent hover:bg-white hover:border-gray-200'
-                      }`}
-                    onClick={() => handleLoadDocument(doc)}
-                  >
-                    <div className="flex items-center justify-between mb-1">
-                      <div className="flex items-center gap-2 overflow-hidden">
-                        <FileText size={16} className={currentDocument?.id === doc.id ? "text-purple-500" : "text-gray-400"} weight={currentDocument?.id === doc.id ? "fill" : "regular"} />
-                        <span className={`text-sm font-medium truncate ${currentDocument?.id === doc.id ? "text-gray-900" : "text-gray-600"}`}>
-                          {doc.name}
-                        </span>
+          )}
+
+                {/* Documents Sidebar */}
+                <div className="w-64 bg-gray-50 border-l border-gray-200 flex flex-col">
+                  <div className="p-4 border-b border-gray-200">
+                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">Saved Documents</span>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                    {documents.length === 0 ? (
+                      <div className="text-gray-400 text-sm text-center py-8 italic">
+                        No saved documents
                       </div>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleDeleteDocument(doc.id)
-                        }}
-                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-50 rounded text-gray-400 hover:text-red-500 transition-all"
-                      >
-                        <Trash size={14} />
-                      </button>
-                    </div>
-                    <div className="text-[10px] text-gray-400 pl-6">
-                      {doc.modifiedAt.toLocaleDateString()}
-                    </div>
+                    ) : (
+                      documents.map(doc => (
+                        <div
+                          key={doc.id}
+                          className={`group rounded-lg p-3 cursor-pointer border transition-all ${currentDocument?.id === doc.id
+                            ? 'bg-white border-purple-200 shadow-sm ring-1 ring-purple-500/20'
+                            : 'bg-transparent border-transparent hover:bg-white hover:border-gray-200'
+                            }`}
+                          onClick={() => handleLoadDocument(doc)}
+                        >
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="flex items-center gap-2 overflow-hidden">
+                              <FileText size={16} className={currentDocument?.id === doc.id ? "text-purple-500" : "text-gray-400"} weight={currentDocument?.id === doc.id ? "fill" : "regular"} />
+                              <span className={`text-sm font-medium truncate ${currentDocument?.id === doc.id ? "text-gray-900" : "text-gray-600"}`}>
+                                {doc.name}
+                              </span>
+                            </div>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                handleDeleteDocument(doc.id)
+                              }}
+                              className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-50 rounded text-gray-400 hover:text-red-500 transition-all"
+                            >
+                              <Trash size={14} />
+                            </button>
+                          </div>
+                          <div className="text-[10px] text-gray-400 pl-6">
+                            {doc.modifiedAt.toLocaleDateString()}
+                          </div>
+                        </div>
+                      ))
+                    )}
                   </div>
-                ))
-              )}
-            </div>
-          </div>
-        </div>
+                </div>
+              </div>
 
-        {/* Style for rendered content */}
-        <style jsx global>{`
+              {/* Style for rendered content */}
+              <style jsx global>{`
           .math-display {
             margin: 1.5em 0;
             text-align: center;
@@ -578,7 +558,7 @@ This document demonstrates LaTeX capabilities for: ${prompt}
             margin-bottom: 0.5em;
           }
         `}</style>
-      </div>
-    </Window>
-  )
-}
+            </div>
+        </Window>
+      )
+    }

app/components/Terminal.tsx

@@ -1,227 +0,0 @@
-'use client'
-
-import React, { useState, useRef, useEffect } from 'react'
-import Window from './Window'
-
-interface TerminalProps {
-  onClose: () => void
-  onMinimize?: () => void
-  onMaximize?: () => void
-}
-
-interface FileSystem {
-  [key: string]: string[]
-}
-
-export function Terminal({ onClose, onMinimize, onMaximize }: TerminalProps) {
-  const [history, setHistory] = useState<string[]>([
-    'Last login: ' + new Date().toLocaleString() + ' on ttys000'
-  ])
-  const [currentInput, setCurrentInput] = useState('')
-  const [currentPath, setCurrentPath] = useState('~')
-  const inputRef = useRef<HTMLInputElement>(null)
-  const outputRef = useRef<HTMLDivElement>(null)
-
-  const fileSystem: FileSystem = {
-    '~': ['Desktop', 'Documents', 'Downloads', 'Pictures', 'Music', 'Videos'],
-    'Desktop': ['screenshot.png', 'notes.txt', 'project'],
-    'Documents': ['resume.pdf', 'budget.xlsx', 'report.docx'],
-    'Downloads': ['installer.dmg', 'image.jpg', 'archive.zip'],
-    'Pictures': ['vacation.jpg', 'family.png'],
-    'Music': ['song.mp3', 'playlist.m3u'],
-    'Videos': ['tutorial.mp4', 'presentation.mov'],
-    'project': ['index.html', 'style.css', 'script.js', 'README.md']
-  }
-
-  useEffect(() => {
-    if (outputRef.current) {
-      outputRef.current.scrollTop = outputRef.current.scrollHeight
-    }
-  }, [history])
-
-  const handleCommand = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      const cmd = currentInput.trim()
-      const newHistory = [...history]
-
-      // Add command to history
-      newHistory.push(`guest@studyos:${currentPath} $ ${cmd}`)
-
-      // Process command
-      const args = cmd.split(' ')
-      const command = args[0].toLowerCase()
-
-      switch (command) {
-        case 'help':
-          newHistory.push('Available commands:')
-          newHistory.push('  help     - Show this help message')
-          newHistory.push('  ls       - List directory contents')
-          newHistory.push('  cd       - Change directory')
-          newHistory.push('  pwd      - Print working directory')
-          newHistory.push('  clear    - Clear terminal')
-          newHistory.push('  date     - Show current date and time')
-          newHistory.push('  whoami   - Display current user')
-          newHistory.push('  echo     - Display message')
-          newHistory.push('  cat      - Display file contents')
-          newHistory.push('  mkdir    - Create directory')
-          newHistory.push('  touch    - Create file')
-          newHistory.push('  rm       - Remove file')
-          newHistory.push('  open     - Open application')
-          break
-
-        case 'ls':
-          const files = fileSystem[currentPath] || []
-          if (files.length > 0) {
-            const fileList = files.map(f => {
-              const isDir = fileSystem[f] !== undefined
-              return isDir ?
-                `\x1b[34m${f}/\x1b[0m` : // Blue for directories
-                f
-            }).join('  ')
-            newHistory.push(fileList)
-          } else {
-            newHistory.push('Directory is empty')
-          }
-          break
-
-        case 'cd':
-          if (args[1] === '..') {
-            setCurrentPath('~')
-          } else if (args[1] === '~' || !args[1]) {
-            setCurrentPath('~')
-          } else if (fileSystem[args[1]]) {
-            setCurrentPath(args[1])
-          } else {
-            newHistory.push(`cd: no such file or directory: ${args[1]}`)
-          }
-          break
-
-        case 'pwd':
-          newHistory.push(currentPath === '~' ? '/home/guest' : `/home/guest/${currentPath}`)
-          break
-
-        case 'clear':
-          setHistory(['Last login: ' + new Date().toLocaleString() + ' on ttys000'])
-          setCurrentInput('')
-          return
-
-        case 'date':
-          newHistory.push(new Date().toString())
-          break
-
-        case 'whoami':
-          newHistory.push('guest')
-          break
-
-        case 'echo':
-          newHistory.push(args.slice(1).join(' '))
-          break
-
-        case 'cat':
-          if (args[1]) {
-            const files = fileSystem[currentPath] || []
-            if (files.includes(args[1])) {
-              newHistory.push(`Contents of ${args[1]}:`)
-              newHistory.push('(This is a simulated file content)')
-            } else {
-              newHistory.push(`cat: ${args[1]}: No such file`)
-            }
-          } else {
-            newHistory.push('Usage: cat <filename>')
-          }
-          break
-
-        case 'mkdir':
-          if (args[1]) {
-            newHistory.push(`Directory '${args[1]}' created`)
-          } else {
-            newHistory.push('Usage: mkdir <dirname>')
-          }
-          break
-
-        case 'touch':
-          if (args[1]) {
-            newHistory.push(`File '${args[1]}' created`)
-          } else {
-            newHistory.push('Usage: touch <filename>')
-          }
-          break
-
-        case 'rm':
-          if (args[1]) {
-            newHistory.push(`File '${args[1]}' removed`)
-          } else {
-            newHistory.push('Usage: rm <filename>')
-          }
-          break
-
-        case 'open':
-          if (args[1]) {
-            newHistory.push(`Opening ${args[1]}...`)
-          } else {
-            newHistory.push('Usage: open <application>')
-          }
-          break
-
-        case '':
-          break
-
-        default:
-          newHistory.push(`zsh: command not found: ${command}`)
-      }
-
-      setHistory(newHistory)
-      setCurrentInput('')
-    }
-  }
-
-  return (
-    <Window
-      id="terminal"
-      title="Terminal — zsh — 80×24"
-      isOpen={true}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      width={600}
-      height={400}
-      x={120}
-      y={120}
-      darkMode={true}
-      className="terminal-window"
-    >
-      <div
-        className="flex-1 bg-[#1e1e1e] p-2 font-mono text-sm text-white overflow-auto"
-        ref={outputRef}
-        onClick={() => inputRef.current?.focus()}
-      >
-        {history.map((line, index) => (
-          <div
-            key={index}
-            className="whitespace-pre-wrap"
-            dangerouslySetInnerHTML={{
-              __html: line
-                .replace(/\x1b\[34m/g, '<span style="color: #4FC3F7;">')
-                .replace(/\x1b\[0m/g, '</span>')
-                .replace(/guest@studyos/g, '<span style="color: #4CAF50;">guest@studyos</span>')
-            }}
-          />
-        ))}
-        <div className="flex">
-          <span className="text-green-400 mr-2">guest@studyos:{currentPath} $</span>
-          <input
-            ref={inputRef}
-            type="text"
-            value={currentInput}
-            onChange={(e) => setCurrentInput(e.target.value)}
-            onKeyDown={handleCommand}
-            className="flex-1 bg-transparent border-none outline-none text-white"
-            autoFocus
-            autoComplete="off"
-            spellCheck={false}
-          />
-        </div>
-      </div>
-    </Window>
-  )
-}

app/components/WebBrowser.tsx

@@ -1,277 +0,0 @@
-'use client'
-
-import React, { useState, useRef } from 'react'
-import { Globe, RefreshCw, ArrowLeft, ArrowRight, Home, Lock, ExternalLink, X, Maximize2, Minimize2 } from 'lucide-react'
-
-interface Tab {
-  id: string
-  url: string
-  title: string
-  isActive: boolean
-}
-
-export default function WebBrowser() {
-  const [tabs, setTabs] = useState<Tab[]>([
-    { id: '1', url: 'https://www.google.com', title: 'Google', isActive: true }
-  ])
-  const [currentUrl, setCurrentUrl] = useState('https://www.google.com')
-  const [inputUrl, setInputUrl] = useState('https://www.google.com')
-  const [isLoading, setIsLoading] = useState(false)
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  const [showBrowser, setShowBrowser] = useState(false)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-
-  const handleNavigate = (url: string) => {
-    // Ensure URL has protocol
-    let finalUrl = url
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      finalUrl = 'https://' + url
-    }
-
-    setCurrentUrl(finalUrl)
-    setInputUrl(finalUrl)
-    setIsLoading(true)
-
-    // Update active tab
-    setTabs(prevTabs =>
-      prevTabs.map(tab =>
-        tab.isActive ? { ...tab, url: finalUrl } : tab
-      )
-    )
-  }
-
-  const handleRefresh = () => {
-    if (iframeRef.current) {
-      const currentSrc = iframeRef.current.src
-      iframeRef.current.src = ''
-      setTimeout(() => {
-        if (iframeRef.current) {
-          iframeRef.current.src = currentSrc
-        }
-      }, 10)
-    }
-  }
-
-  const handleBack = () => {
-    // Browser history would be handled by iframe internally
-    window.history.back()
-  }
-
-  const handleForward = () => {
-    window.history.forward()
-  }
-
-  const handleHome = () => {
-    handleNavigate('https://www.google.com')
-  }
-
-  const addNewTab = () => {
-    const newTab: Tab = {
-      id: Date.now().toString(),
-      url: 'https://www.google.com',
-      title: 'New Tab',
-      isActive: true
-    }
-
-    setTabs(prevTabs => [
-      ...prevTabs.map(tab => ({ ...tab, isActive: false })),
-      newTab
-    ])
-    setCurrentUrl(newTab.url)
-    setInputUrl(newTab.url)
-  }
-
-  const switchTab = (tabId: string) => {
-    const tab = tabs.find(t => t.id === tabId)
-    if (tab) {
-      setTabs(prevTabs =>
-        prevTabs.map(t => ({ ...t, isActive: t.id === tabId }))
-      )
-      setCurrentUrl(tab.url)
-      setInputUrl(tab.url)
-    }
-  }
-
-  const closeTab = (tabId: string) => {
-    if (tabs.length === 1) return // Don't close last tab
-
-    const tabIndex = tabs.findIndex(t => t.id === tabId)
-    const wasActive = tabs[tabIndex].isActive
-
-    const newTabs = tabs.filter(t => t.id !== tabId)
-
-    if (wasActive) {
-      const newActiveIndex = tabIndex > 0 ? tabIndex - 1 : 0
-      newTabs[newActiveIndex].isActive = true
-      setCurrentUrl(newTabs[newActiveIndex].url)
-      setInputUrl(newTabs[newActiveIndex].url)
-    }
-
-    setTabs(newTabs)
-  }
-
-  const openInNewWindow = () => {
-    window.open(currentUrl, '_blank')
-  }
-
-  if (!showBrowser) {
-    return (
-      <button
-        onClick={() => setShowBrowser(true)}
-        className="fixed bottom-4 right-4 z-50 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
-      >
-        <Globe size={20} />
-        Open Browser
-      </button>
-    )
-  }
-
-  return (
-    <div className={`fixed ${isFullscreen ? 'inset-0 z-[9999]' : 'inset-4 z-40'} bg-white rounded-lg shadow-2xl flex flex-col transition-all duration-300`}>
-      {/* Browser Header */}
-      <div className="bg-gray-100 border-b border-gray-300 rounded-t-lg">
-        {/* Tabs */}
-        <div className="flex items-center bg-gray-200 px-2 py-1 overflow-x-auto">
-          {tabs.map(tab => (
-            <div
-              key={tab.id}
-              className={`flex items-center px-3 py-1.5 mr-1 rounded-t-md cursor-pointer transition-colors ${
-                tab.isActive ? 'bg-white' : 'bg-gray-100 hover:bg-gray-50'
-              }`}
-              onClick={() => switchTab(tab.id)}
-            >
-              <Globe size={14} className="mr-2 text-gray-600" />
-              <span className="text-sm max-w-[150px] truncate">{tab.title}</span>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  closeTab(tab.id)
-                }}
-                className="ml-2 p-0.5 hover:bg-gray-200 rounded"
-              >
-                <X size={14} />
-              </button>
-            </div>
-          ))}
-          <button
-            onClick={addNewTab}
-            className="px-2 py-1 text-gray-600 hover:bg-gray-200 rounded"
-          >
-            +
-          </button>
-        </div>
-
-        {/* Navigation Bar */}
-        <div className="flex items-center gap-2 p-2 bg-white">
-          <button
-            onClick={handleBack}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Back"
-          >
-            <ArrowLeft size={18} />
-          </button>
-          <button
-            onClick={handleForward}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Forward"
-          >
-            <ArrowRight size={18} />
-          </button>
-          <button
-            onClick={handleRefresh}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Refresh"
-          >
-            <RefreshCw size={18} className={isLoading ? 'animate-spin' : ''} />
-          </button>
-          <button
-            onClick={handleHome}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Home"
-          >
-            <Home size={18} />
-          </button>
-
-          {/* URL Bar */}
-          <div className="flex-1 flex items-center bg-gray-50 rounded-md px-3 py-1.5 border border-gray-300">
-            <Lock size={14} className="text-green-600 mr-2" />
-            <input
-              type="text"
-              value={inputUrl}
-              onChange={(e) => setInputUrl(e.target.value)}
-              onKeyPress={(e) => {
-                if (e.key === 'Enter') {
-                  handleNavigate(inputUrl)
-                }
-              }}
-              className="flex-1 bg-transparent outline-none text-sm"
-              placeholder="Enter URL..."
-            />
-          </div>
-
-          <button
-            onClick={openInNewWindow}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Open in New Window"
-          >
-            <ExternalLink size={18} />
-          </button>
-          <button
-            onClick={() => setIsFullscreen(!isFullscreen)}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
-          >
-            {isFullscreen ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
-          </button>
-          <button
-            onClick={() => setShowBrowser(false)}
-            className="p-2 hover:bg-gray-100 rounded transition-colors text-red-600"
-            title="Close Browser"
-          >
-            <X size={18} />
-          </button>
-        </div>
-      </div>
-
-      {/* Browser Content */}
-      <div className="flex-1 relative bg-white">
-        {/* Loading Indicator */}
-        {isLoading && (
-          <div className="absolute top-0 left-0 w-full h-1 bg-blue-600 animate-pulse z-10" />
-        )}
-
-        {/* iframe Content */}
-        <iframe
-          ref={iframeRef}
-          src={currentUrl}
-          className="w-full h-full border-0"
-          onLoad={() => {
-            setIsLoading(false)
-            // Try to get the title from the iframe (may be blocked by CORS)
-            try {
-              const title = iframeRef.current?.contentDocument?.title || 'Web Page'
-              setTabs(prevTabs =>
-                prevTabs.map(tab =>
-                  tab.isActive ? { ...tab, title } : tab
-                )
-              )
-            } catch (e) {
-              // CORS will block this for most external sites
-              console.log('Could not access iframe title due to CORS')
-            }
-          }}
-          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-          title="Web Browser"
-        />
-
-        {/* CORS Notice */}
-        <div className="absolute bottom-4 right-4 bg-yellow-100 border border-yellow-400 rounded-lg p-3 max-w-sm">
-          <p className="text-xs text-yellow-800">
-            <strong>Note:</strong> Some websites may not display due to security restrictions (CORS).
-            For full browsing, consider using a proxy service or browser extension.
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}

app/components/WebBrowserApp.tsx

@@ -1,441 +0,0 @@
-'use client'
-
-import React, { useState, useRef } from 'react'
-import { Globe, RefreshCw, ArrowLeft, ArrowRight, Home, Lock, ExternalLink, AlertTriangle, Shield, X } from 'lucide-react'
-import Window from './Window'
-
-interface Tab {
-  id: string
-  url: string
-  title: string
-  isActive: boolean
-}
-
-interface WebBrowserAppProps {
-  onClose: () => void
-  onMinimize?: () => void
-  onMaximize?: () => void
-}
-
-export default function WebBrowserApp({ onClose, onMinimize, onMaximize }: WebBrowserAppProps) {
-  const [tabs, setTabs] = useState<Tab[]>([
-    { id: '1', url: 'https://www.google.com/webhp?igu=1', title: 'Google', isActive: true }
-  ])
-  const [currentUrl, setCurrentUrl] = useState('https://www.google.com/webhp?igu=1')
-  const [inputUrl, setInputUrl] = useState('https://www.google.com')
-  const [isLoading, setIsLoading] = useState(false)
-  const [isMaximized, setIsMaximized] = useState(false)
-  const [useProxy, setUseProxy] = useState(false)
-  const [showSettings, setShowSettings] = useState(false)
-  const [showHomePage, setShowHomePage] = useState(true)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-
-  // List of sites that work well in iframes
-  const iframeFriendlySites = [
-    { name: 'Google', url: 'https://www.google.com/webhp?igu=1' },
-    { name: 'Wikipedia', url: 'https://www.wikipedia.org' },
-    { name: 'MDN Web Docs', url: 'https://developer.mozilla.org' },
-    { name: 'Stack Overflow', url: 'https://stackoverflow.com' },
-    { name: 'GitHub', url: 'https://github.com' },
-    { name: 'DuckDuckGo', url: 'https://duckduckgo.com' }
-  ]
-
-  const getProxiedUrl = (url: string) => {
-    // Use a CORS proxy service - you can replace this with your own proxy
-    if (useProxy) {
-      // Option 1: Use allorigins proxy (free, public) - SLOW but works
-      return `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`
-
-      // Option 2: Use cors-anywhere (may require your own deployment)
-      // return `https://cors-anywhere.herokuapp.com/${url}`
-
-      // Option 3: Use your own backend proxy endpoint
-      // return `/api/proxy?url=${encodeURIComponent(url)}`
-    }
-    return url
-  }
-
-  const handleNavigate = (url: string) => {
-    // Ensure URL has protocol
-    let finalUrl = url
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      // Check if it looks like a search query
-      if (!url.includes('.') || url.includes(' ')) {
-        finalUrl = `https://www.google.com/search?q=${encodeURIComponent(url)}&igu=1`
-      } else {
-        finalUrl = 'https://' + url
-      }
-    }
-
-    setShowHomePage(false)
-    const proxiedUrl = getProxiedUrl(finalUrl)
-    setCurrentUrl(proxiedUrl)
-    setInputUrl(finalUrl)
-    setIsLoading(true)
-
-    // Update active tab
-    setTabs(prevTabs =>
-      prevTabs.map(tab =>
-        tab.isActive ? { ...tab, url: finalUrl, title: new URL(finalUrl).hostname } : tab
-      )
-    )
-  }
-
-  const handleRefresh = () => {
-    if (iframeRef.current) {
-      setIsLoading(true)
-      const currentSrc = iframeRef.current.src
-      iframeRef.current.src = ''
-      setTimeout(() => {
-        if (iframeRef.current) {
-          iframeRef.current.src = currentSrc
-        }
-      }, 10)
-    }
-  }
-
-  const handleBack = () => {
-    window.history.back()
-  }
-
-  const handleForward = () => {
-    window.history.forward()
-  }
-
-  const handleHome = () => {
-    setShowHomePage(true)
-    setCurrentUrl('')
-    setInputUrl('')
-  }
-
-  const addNewTab = () => {
-    const newTab: Tab = {
-      id: Date.now().toString(),
-      url: 'https://www.google.com/webhp?igu=1',
-      title: 'New Tab',
-      isActive: true
-    }
-
-    setTabs(prevTabs => [
-      ...prevTabs.map(tab => ({ ...tab, isActive: false })),
-      newTab
-    ])
-    handleNavigate(newTab.url)
-  }
-
-  const switchTab = (tabId: string) => {
-    const tab = tabs.find(t => t.id === tabId)
-    if (tab) {
-      setTabs(prevTabs =>
-        prevTabs.map(t => ({ ...t, isActive: t.id === tabId }))
-      )
-      handleNavigate(tab.url)
-    }
-  }
-
-  const closeTab = (tabId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (tabs.length === 1) return
-
-    const tabIndex = tabs.findIndex(t => t.id === tabId)
-    const wasActive = tabs[tabIndex].isActive
-
-    const newTabs = tabs.filter(t => t.id !== tabId)
-
-    if (wasActive) {
-      const newActiveIndex = tabIndex > 0 ? tabIndex - 1 : 0
-      newTabs[newActiveIndex].isActive = true
-      handleNavigate(newTabs[newActiveIndex].url)
-    }
-
-    setTabs(newTabs)
-  }
-
-  const openInNewWindow = () => {
-    const activeTab = tabs.find(t => t.isActive)
-    if (activeTab) {
-      window.open(activeTab.url, '_blank')
-    }
-  }
-
-  return (
-    <Window
-      id="browser"
-      title="Web Browser"
-      isOpen={true}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      width={1200}
-      height={700}
-      x={window.innerWidth / 2 - 600}
-      y={window.innerHeight / 2 - 350}
-      className="browser-window"
-    >
-      {/* Browser Header */}
-      <div className="bg-gray-100 border-b border-gray-300">
-        {/* Tabs */}
-        <div className="flex items-center bg-gray-200 px-2 py-1 overflow-x-auto">
-          {tabs.map(tab => (
-            <div
-              key={tab.id}
-              className={`flex items-center px-3 py-1.5 mr-1 rounded-t-md cursor-pointer transition-colors min-w-[150px] max-w-[200px] ${tab.isActive ? 'bg-white' : 'bg-gray-100 hover:bg-gray-50'
-                }`}
-              onClick={() => switchTab(tab.id)}
-            >
-              <Globe size={14} className="mr-2 text-gray-600 flex-shrink-0" />
-              <span className="text-sm truncate flex-1">{tab.title}</span>
-              {tabs.length > 1 && (
-                <button
-                  onClick={(e) => closeTab(tab.id, e)}
-                  className="ml-2 p-0.5 hover:bg-gray-200 rounded flex-shrink-0"
-                >
-                  <X size={14} />
-                </button>
-              )}
-            </div>
-          ))}
-          <button
-            onClick={addNewTab}
-            className="px-2 py-1 text-gray-600 hover:bg-gray-200 rounded"
-          >
-            +
-          </button>
-        </div>
-
-        {/* Navigation Bar */}
-        <div className="flex items-center gap-2 p-2 bg-white">
-          <button
-            onClick={handleBack}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Back"
-          >
-            <ArrowLeft size={18} />
-          </button>
-          <button
-            onClick={handleForward}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Forward"
-          >
-            <ArrowRight size={18} />
-          </button>
-          <button
-            onClick={handleRefresh}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Refresh"
-          >
-            <RefreshCw size={18} className={isLoading ? 'animate-spin' : ''} />
-          </button>
-          <button
-            onClick={handleHome}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Home"
-          >
-            <Home size={18} />
-          </button>
-
-          {/* URL Bar */}
-          <div className="flex-1 flex items-center bg-gray-50 rounded-md px-3 py-1.5 border border-gray-300">
-            {useProxy ? (
-              <Shield size={14} className="text-green-600 mr-2" />
-            ) : (
-              <Lock size={14} className="text-gray-400 mr-2" />
-            )}
-            <input
-              type="text"
-              value={inputUrl}
-              onChange={(e) => setInputUrl(e.target.value)}
-              onKeyPress={(e) => {
-                if (e.key === 'Enter') {
-                  handleNavigate(inputUrl)
-                }
-              }}
-              className="flex-1 bg-transparent outline-none text-sm"
-              placeholder="Enter URL or search..."
-            />
-          </div>
-
-          <button
-            onClick={() => setShowSettings(!showSettings)}
-            className={`p-2 rounded transition-colors ${showSettings ? 'bg-blue-100' : 'hover:bg-gray-100'}`}
-            title="Settings"
-          >
-            <Shield size={18} className={useProxy ? 'text-green-600' : 'text-gray-400'} />
-          </button>
-          <button
-            onClick={openInNewWindow}
-            className="p-2 hover:bg-gray-100 rounded transition-colors"
-            title="Open in New Window"
-          >
-            <ExternalLink size={18} />
-          </button>
-        </div>
-
-        {/* Settings Panel */}
-        {showSettings && (
-          <div className="px-4 py-3 bg-blue-50 border-b border-blue-200">
-            <div className="flex items-center justify-between mb-2">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={useProxy}
-                  onChange={(e) => setUseProxy(e.target.checked)}
-                  className="w-4 h-4"
-                />
-                <span className="text-sm font-medium">Use CORS Proxy</span>
-                <span className="text-xs text-gray-600">(Bypass cross-origin restrictions)</span>
-              </label>
-            </div>
-            <div className="text-xs text-gray-600">
-              <p className="mb-1">• Proxy allows accessing most websites but may affect performance</p>
-              <p>• Some interactive features may not work through proxy</p>
-            </div>
-          </div>
-        )}
-
-        {/* Quick Links */}
-        <div className="px-4 py-2 bg-gray-50 border-b flex items-center gap-2 overflow-x-auto">
-          <span className="text-xs text-gray-600 mr-2">Quick Links:</span>
-          {iframeFriendlySites.map(site => (
-            <button
-              key={site.name}
-              onClick={() => handleNavigate(site.url)}
-              className="px-3 py-1 text-xs bg-white border border-gray-300 rounded hover:bg-blue-50 hover:border-blue-400 transition-colors whitespace-nowrap"
-            >
-              {site.name}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Browser Content */}
-      <div className="flex-1 relative bg-white overflow-hidden">
-        {/* Loading Indicator */}
-        {isLoading && !showHomePage && (
-          <div className="absolute top-0 left-0 w-full h-1 bg-blue-600 z-20">
-            <div className="h-full bg-blue-400 animate-pulse" />
-          </div>
-        )}
-
-        {/* Home Page */}
-        {showHomePage ? (
-          <div className="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 p-8">
-            <div className="max-w-2xl w-full space-y-8">
-              {/* Browser Logo */}
-              <div className="flex flex-col items-center gap-4">
-                <div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg">
-                  <Globe size={48} className="text-white" />
-                </div>
-                <h1 className="text-4xl font-bold text-gray-800">Web Browser</h1>
-                <p className="text-gray-600 text-center">Browse the web with speed and simplicity</p>
-              </div>
-
-              {/* Search Box */}
-              <div className="w-full">
-                <div className="relative">
-                  <input
-                    type="text"
-                    placeholder="Search or enter website address..."
-                    className="w-full px-6 py-4 text-lg rounded-full border-2 border-gray-300 focus:border-blue-500 focus:outline-none shadow-md"
-                    onKeyPress={(e) => {
-                      if (e.key === 'Enter') {
-                        const value = (e.target as HTMLInputElement).value
-                        if (value.trim()) {
-                          handleNavigate(value)
-                        }
-                      }
-                    }}
-                  />
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
-                    Press Enter ↵
-                  </div>
-                </div>
-              </div>
-
-              {/* Quick Access Grid */}
-              <div>
-                <h2 className="text-sm font-medium text-gray-600 mb-3">Quick Access</h2>
-                <div className="grid grid-cols-3 gap-4">
-                  {iframeFriendlySites.map(site => (
-                    <button
-                      key={site.name}
-                      onClick={() => handleNavigate(site.url)}
-                      className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 hover:border-blue-400 group"
-                    >
-                      <div className="flex flex-col items-center gap-2">
-                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center group-hover:from-blue-200 group-hover:to-purple-200 transition-colors">
-                          <Globe size={24} className="text-blue-600" />
-                        </div>
-                        <span className="text-sm font-medium text-gray-700">{site.name}</span>
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Performance Tip */}
-              <div className="bg-blue-100 border border-blue-300 rounded-lg p-4">
-                <div className="flex items-start gap-3">
-                  <Shield size={20} className="text-blue-600 mt-0.5 flex-shrink-0" />
-                  <div className="text-sm">
-                    <p className="text-blue-900 font-medium mb-1">⚡ Fast Direct Access</p>
-                    <p className="text-blue-800">
-                      For best performance, websites are loaded directly without proxy. Some sites may block iframe access due to security policies.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <>
-            {/* iframe Content */}
-            <iframe
-              ref={iframeRef}
-              src={currentUrl}
-              className="w-full h-full border-0"
-              onLoad={() => {
-                setIsLoading(false)
-                // Try to get the title (may be blocked by CORS)
-                try {
-                  if (iframeRef.current?.contentDocument?.title) {
-                    const title = iframeRef.current.contentDocument.title
-                    setTabs(prevTabs =>
-                      prevTabs.map(tab =>
-                        tab.isActive ? { ...tab, title } : tab
-                      )
-                    )
-                  }
-                } catch (e) {
-                  // Expected for cross-origin content
-                }
-              }}
-              onError={() => {
-                setIsLoading(false)
-              }}
-              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
-              title="Web Browser"
-            />
-
-            {/* Info Panel - only show if using proxy */}
-            {useProxy && (
-              <div className="absolute bottom-4 right-4 bg-yellow-100 border border-yellow-400 rounded-lg p-3 max-w-sm z-10">
-                <div className="flex items-start gap-2">
-                  <AlertTriangle size={16} className="text-yellow-700 mt-0.5" />
-                  <div>
-                    <p className="text-xs text-yellow-800 font-medium mb-1">
-                      Using Proxy (Slower)
-                    </p>
-                    <p className="text-xs text-yellow-700">
-                      Proxy adds extra latency. Disable in settings for faster loading.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </Window>
-  )
-}