made some changes

app/api/files/route.ts

@@ -18,11 +18,14 @@ if (!fs.existsSync(DOCS_DIR)) {
 
 interface FileItem {
   name: string
-  type: 'file' | 'folder'
+  type: 'file' | 'folder' | 'flutter_app'
   size?: number
   modified?: string
   path: string
   extension?: string
+  dartCode?: string
+  dependencies?: string[]
+  pubspecYaml?: string
 }
 
 function getFileExtension(filename: string): string {
@@ -55,14 +58,45 @@ function getFilesRecursively(dir: string, basePath: string = ''): FileItem[] {
         const subFiles = getFilesRecursively(fullPath, relativePath)
         files.push(...subFiles)
       } else {
-        files.push({
-          name: item,
-          type: 'file',
-          size: stats.size,
-          modified: stats.mtime.toISOString(),
-          path: relativePath,
-          extension: getFileExtension(item)
-        })
+        // Check if this is a Flutter app file
+        if (item.endsWith('.flutter.json')) {
+          try {
+            const fileContent = fs.readFileSync(fullPath, 'utf-8')
+            const flutterAppData = JSON.parse(fileContent)
+            
+            files.push({
+              name: flutterAppData.name || item.replace('.flutter.json', ''),
+              type: 'flutter_app',
+              size: stats.size,
+              modified: stats.mtime.toISOString(),
+              path: relativePath,
+              extension: 'flutter',
+              dartCode: flutterAppData.dartCode,
+              dependencies: flutterAppData.dependencies,
+              pubspecYaml: flutterAppData.pubspecYaml
+            })
+          } catch (error) {
+            // If parsing fails, treat it as a regular file
+            console.error('Error parsing Flutter app file:', error)
+            files.push({
+              name: item,
+              type: 'file',
+              size: stats.size,
+              modified: stats.mtime.toISOString(),
+              path: relativePath,
+              extension: getFileExtension(item)
+            })
+          }
+        } else {
+          files.push({
+            name: item,
+            type: 'file',
+            size: stats.size,
+            modified: stats.mtime.toISOString(),
+            path: relativePath,
+            extension: getFileExtension(item)
+          })
+        }
       }
     }
   } catch (error) {

app/components/Calendar.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import React, { useState } from 'react'
-import { X, Minus, Square, CaretLeft, CaretRight } from '@phosphor-icons/react'
+import { CaretLeft, CaretRight } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { useKV } from '../hooks/useKV'
+import Window from './Window'
 
 interface CalendarProps {
   onClose: () => void
@@ -32,42 +33,9 @@ const defaultHolidays: Event[] = [
 
 export function Calendar({ onClose }: CalendarProps) {
   const [currentDate, setCurrentDate] = useState(new Date())
-  const [windowPos, setWindowPos] = useState({ x: 100, y: 100 })
-  const [isDragging, setIsDragging] = useState(false)
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
   const [events, setEvents] = useKV<Event[]>('calendar-events', defaultHolidays)
   const [selectedDay, setSelectedDay] = useState<number | null>(null)
 
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('.window-controls')) return
-    setIsDragging(true)
-    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
-  }
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (isDragging) {
-      setWindowPos({
-        x: e.clientX - dragStart.x,
-        y: e.clientY - dragStart.y,
-      })
-    }
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  React.useEffect(() => {
-    if (isDragging) {
-      window.addEventListener('mousemove', handleMouseMove)
-      window.addEventListener('mouseup', handleMouseUp)
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove)
-        window.removeEventListener('mouseup', handleMouseUp)
-      }
-    }
-  }, [isDragging, dragStart])
-
   const monthNames = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -133,37 +101,18 @@ export function Calendar({ onClose }: CalendarProps) {
   const selectedDayEvents = selectedDay ? getEventsForDay(selectedDay) : []
 
   return (
-    <motion.div
-      style={{ left: windowPos.x, top: windowPos.y }}
-      className="fixed w-[420px] bg-white rounded-lg shadow-2xl overflow-hidden flex flex-col z-30 select-none"
+    <Window
+      id="calendar"
+      title="Calendar"
+      isOpen={true}
+      onClose={onClose}
+      width={420}
+      height={500}
+      x={100}
+      y={100}
+      className="calendar-window"
     >
-      <div
-        onMouseDown={handleMouseDown}
-        className="h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-3 cursor-move"
-      >
-        <div className="flex items-center gap-2 flex-1">
-          <div className="flex items-center gap-1 window-controls">
-            <button
-              onClick={(e) => {
-                e.stopPropagation()
-                onClose()
-              }}
-              className="w-5 h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group transition-colors"
-            >
-              <X size={12} weight="bold" className="text-white opacity-0 group-hover:opacity-100 transition-opacity" />
-            </button>
-            <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group transition-colors">
-              <Minus size={12} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 transition-opacity" />
-            </button>
-            <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group transition-colors">
-              <Square size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 transition-opacity" />
-            </button>
-          </div>
-          <span className="text-sm font-medium text-[#2c2c2c] ml-2">Calendar</span>
-        </div>
-      </div>
-
-      <div className="p-6">
+      <div className="p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
           <button
             onClick={previousMonth}
@@ -212,11 +161,10 @@ export function Calendar({ onClose }: CalendarProps) {
                     {getEventsForDay(day).slice(0, 3).map((event, i) => (
                       <div
                         key={i}
-                        className={`w-1 h-1 rounded-full ${
-                          event.type === 'holiday'
+                        className={`w-1 h-1 rounded-full ${event.type === 'holiday'
                             ? isToday(day) ? 'bg-white' : 'bg-purple-500'
                             : isToday(day) ? 'bg-white' : 'bg-blue-500'
-                        }`}
+                          }`}
                       />
                     ))}
                   </div>
@@ -232,20 +180,19 @@ export function Calendar({ onClose }: CalendarProps) {
         </div>
 
         {selectedDayEvents.length > 0 && (
-          <div className="mt-4 pt-4 border-t border-[#e0e0e0]">
+          <div className="mt-4 pt-4 border-t border-[#e0e0e0] flex-1 overflow-y-auto">
             <div className="text-xs text-[#666] mb-2">
               {monthNames[currentDate.getMonth()]} {selectedDay}, {currentDate.getFullYear()}
             </div>
-            <div className="space-y-2 max-h-32 overflow-y-auto">
+            <div className="space-y-2">
               {selectedDayEvents.map((event) => (
                 <div
                   key={event.id}
                   className="flex items-start gap-2 p-2 bg-[#f9f9f9] rounded"
                 >
                   <div
-                    className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
-                      event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
-                    }`}
+                    className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
+                      }`}
                   />
                   <div className="flex-1">
                     <div className="text-sm font-medium text-[#2c2c2c]">
@@ -262,14 +209,14 @@ export function Calendar({ onClose }: CalendarProps) {
         )}
 
         {!selectedDay && (
-          <div className="mt-4 pt-4 border-t border-[#e0e0e0]">
+          <div className="mt-4 pt-4 border-t border-[#e0e0e0] flex-1 overflow-y-auto">
             <div className="text-xs text-[#666] mb-2">Today</div>
             <div className="text-sm font-medium text-[#2c2c2c]">
-              {today.toLocaleDateString('en-US', { 
-                weekday: 'long', 
-                year: 'numeric', 
-                month: 'long', 
-                day: 'numeric' 
+              {today.toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
               })}
             </div>
             {getEventsForDay(today.getDate()).length > 0 && (
@@ -280,9 +227,8 @@ export function Calendar({ onClose }: CalendarProps) {
                     className="flex items-start gap-2 p-2 bg-[#fff3e6] rounded"
                   >
                     <div
-                      className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
-                        event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
-                      }`}
+                      className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
+                        }`}
                     />
                     <div className="flex-1">
                       <div className="text-sm font-medium text-[#2c2c2c]">
@@ -296,6 +242,6 @@ export function Calendar({ onClose }: CalendarProps) {
           </div>
         )}
       </div>
-    </motion.div>
+    </Window>
   )
 }

app/components/Desktop.tsx

@@ -18,6 +18,7 @@ import { SpotlightSearch } from './SpotlightSearch'
 import { ContextMenu } from './ContextMenu'
 import { AboutModal } from './AboutModal'
 import { SessionManagerWindow } from './SessionManagerWindow'
+import { FlutterRunner } from './FlutterRunner'
 import { motion, AnimatePresence } from 'framer-motion'
 
 export function Desktop() {
@@ -39,9 +40,11 @@ export function Desktop() {
   const [contextMenuOpen, setContextMenuOpen] = useState(false)
   const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 })
   const [backgroundSelectorOpen, setBackgroundSelectorOpen] = useState(false)
-  const [currentBackground, setCurrentBackground] = useState('/background.png')
+  const [currentBackground, setCurrentBackground] = useState('gradient-sonoma')
   const [aboutModalOpen, setAboutModalOpen] = useState(false)
   const [sessionManagerOpen, setSessionManagerOpen] = useState(false)
+  const [flutterRunnerOpen, setFlutterRunnerOpen] = useState(false)
+  const [activeFlutterApp, setActiveFlutterApp] = useState<any>(null)
 
   const openFileManager = (path: string) => {
     setCurrentPath(path)
@@ -100,8 +103,18 @@ export function Desktop() {
     setSessionManagerOpen(false)
   }
 
+  const openFlutterRunner = (appFile: any) => {
+    setActiveFlutterApp(appFile)
+    setFlutterRunnerOpen(true)
+  }
+
+  const closeFlutterRunner = () => {
+    setFlutterRunnerOpen(false)
+    setActiveFlutterApp(null)
+  }
+
   const handleOpenApp = (appId: string) => {
-    switch(appId) {
+    switch (appId) {
       case 'files':
         openFileManager('')
         break
@@ -127,7 +140,7 @@ export function Desktop() {
   }
 
   const handleContextMenuAction = (action: string) => {
-    switch(action) {
+    switch (action) {
       case 'change-wallpaper':
         setBackgroundSelectorOpen(true)
         break
@@ -253,6 +266,7 @@ export function Desktop() {
   const getBackgroundStyle = () => {
     if (currentBackground.startsWith('gradient-')) {
       const gradients: Record<string, string> = {
+        'gradient-sonoma': 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
         'gradient-purple': 'linear-gradient(135deg, #77216F 0%, #5E2750 50%, #2C001E 100%)',
         'gradient-blue': 'linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%)',
         'gradient-green': 'linear-gradient(135deg, #134e5e 0%, #71b280 50%, #a8e063 100%)',
@@ -260,7 +274,7 @@ export function Desktop() {
         'gradient-dark': 'linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%)',
         'gradient-cosmic': 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'
       }
-      return { background: gradients[currentBackground] || gradients['gradient-purple'] }
+      return { background: gradients[currentBackground] || gradients['gradient-sonoma'] }
     } else {
       return {
         backgroundImage: `url('${currentBackground}')`,
@@ -274,7 +288,7 @@ export function Desktop() {
   return (
     <div className="relative h-screen w-screen overflow-hidden flex" onContextMenu={handleDesktopRightClick}>
       <div
-        className="absolute inset-0"
+        className="absolute inset-0 transition-all duration-500 ease-in-out"
         style={getBackgroundStyle()}
       >
         {/* Overlay for better text visibility */}
@@ -286,10 +300,10 @@ export function Desktop() {
             }}
           />
         )}
-        <svg className="absolute inset-0 w-full h-full opacity-10" xmlns="http://www.w3.org/2000/svg">
+        <svg className="absolute inset-0 w-full h-full opacity-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg">
           <defs>
             <pattern id="ubuntu-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
-              <circle cx="50" cy="50" r="2" fill="white" opacity="0.3"/>
+              <circle cx="50" cy="50" r="2" fill="white" opacity="0.3" />
             </pattern>
           </defs>
           <rect width="100%" height="100%" fill="url(#ubuntu-pattern)" />
@@ -300,140 +314,170 @@ export function Desktop() {
 
       <Dock onOpenFileManager={openFileManager} onOpenCalendar={openCalendar} onOpenClock={openClock} onOpenBrowser={openBrowser} onOpenGeminiChat={openGeminiChat} />
 
-      <div className="flex-1">
+      <div className="flex-1 z-10 relative">
         {/* Desktop Icons - Positioned in a grid layout */}
-        <div className="absolute top-20 left-8">
-          <DraggableDesktopIcon
-            id="files"
-            label="Files"
-            iconType="files"
-            initialPosition={{ x: 20, y: 20 }}
-            onClick={() => {}}
-            onDoubleClick={() => openFileManager('')}
-          />
-          <DraggableDesktopIcon
-            id="browser"
-            label="Browser"
-            iconType="browser"
-            initialPosition={{ x: 120, y: 20 }}
-            onClick={() => {}}
-            onDoubleClick={openBrowser}
-          />
-          <DraggableDesktopIcon
-            id="gemini"
-            label="Gemini"
-            iconType="gemini"
-            initialPosition={{ x: 220, y: 20 }}
-            onClick={() => {}}
-            onDoubleClick={openGeminiChat}
-          />
-          <DraggableDesktopIcon
-            id="clock"
-            label="Clock"
-            iconType="clock"
-            initialPosition={{ x: 20, y: 120 }}
-            onClick={() => {}}
-            onDoubleClick={openClock}
-          />
-          <DraggableDesktopIcon
-            id="calendar"
-            label="Calendar"
-            iconType="calendar"
-            initialPosition={{ x: 120, y: 120 }}
-            onClick={() => {}}
-            onDoubleClick={openCalendar}
-          />
-          <DraggableDesktopIcon
-            id="terminal"
-            label="Terminal"
-            iconType="terminal"
-            initialPosition={{ x: 20, y: 220 }}
-            onClick={() => {}}
-            onDoubleClick={openTerminal}
-          />
-          <DraggableDesktopIcon
-            id="harddrive"
-            label="System"
-            iconType="harddrive"
-            initialPosition={{ x: 120, y: 220 }}
-            onClick={() => {}}
-            onDoubleClick={() => openFileManager('')}
-          />
-          <DraggableDesktopIcon
-            id="sessions"
-            label="Sessions"
-            iconType="key"
-            initialPosition={{ x: 220, y: 120 }}
-            onClick={() => {}}
-            onDoubleClick={openSessionManager}
-          />
-        </div>
-
-        {fileManagerOpen && (
-          <motion.div
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.15 }}
-          >
-            <FileManager 
-              currentPath={currentPath}
-              onNavigate={setCurrentPath}
-              onClose={closeFileManager}
+        <div className="absolute top-16 left-6 grid grid-flow-col grid-rows-[repeat(auto-fill,100px)] gap-x-4 gap-y-2 h-[calc(100vh-140px)] w-full pointer-events-none">
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="files"
+              label="Files"
+              iconType="files"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={() => openFileManager('')}
             />
-          </motion.div>
-        )}
+          </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"
+              label="Gemini"
+              iconType="gemini"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={openGeminiChat}
+            />
+          </div>
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="clock"
+              label="Clock"
+              iconType="clock"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={openClock}
+            />
+          </div>
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="calendar"
+              label="Calendar"
+              iconType="calendar"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              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"
+              label="System"
+              iconType="harddrive"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={() => openFileManager('')}
+            />
+          </div>
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="sessions"
+              label="Sessions"
+              iconType="key"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={openSessionManager}
+            />
+          </div>
+        </div>
 
-        {calendarOpen && (
-          <motion.div
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.15 }}
-          >
-            <Calendar onClose={closeCalendar} />
-          </motion.div>
-        )}
+        <AnimatePresence>
+          {fileManagerOpen && (
+            <motion.div
+              key="file-manager"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <FileManager
+                currentPath={currentPath}
+                onNavigate={setCurrentPath}
+                onClose={closeFileManager}
+                onOpenFlutterApp={openFlutterRunner}
+              />
+            </motion.div>
+          )}
 
-        {clockOpen && (
-          <motion.div
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.15 }}
-          >
-            <Clock onClose={closeClock} />
-          </motion.div>
-        )}
+          {calendarOpen && (
+            <motion.div
+              key="calendar"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <Calendar onClose={closeCalendar} />
+            </motion.div>
+          )}
 
-        {browserOpen && (
-          <motion.div
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.15 }}
-          >
-            <WebBrowserApp onClose={closeBrowser} />
-          </motion.div>
-        )}
+          {clockOpen && (
+            <motion.div
+              key="clock"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <Clock onClose={closeClock} />
+            </motion.div>
+          )}
 
-        {geminiChatOpen && (
-          <GeminiChat onClose={closeGeminiChat} />
-        )}
+          {browserOpen && (
+            <motion.div
+              key="browser"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <WebBrowserApp onClose={closeBrowser} />
+            </motion.div>
+          )}
 
-        {terminalOpen && (
-          <motion.div
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ duration: 0.15 }}
-          >
-            <Terminal onClose={closeTerminal} />
-          </motion.div>
-        )}
+          {terminalOpen && (
+            <motion.div
+              key="terminal"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <Terminal onClose={closeTerminal} />
+            </motion.div>
+          )}
 
-        <AnimatePresence>
           {sessionManagerOpen && sessionInitialized && (
             <motion.div
+              key="session-manager"
               initial={{ scale: 0.9, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
-              transition={{ duration: 0.2, ease: "easeInOut" }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
             >
               <SessionManagerWindow
                 onClose={closeSessionManager}
@@ -442,8 +486,37 @@ export function Desktop() {
               />
             </motion.div>
           )}
+
+          {flutterRunnerOpen && activeFlutterApp && (
+            <motion.div
+              key="flutter-runner"
+              initial={{ scale: 0.95, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.95, opacity: 0 }}
+              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              className="absolute inset-0 pointer-events-none"
+            >
+              <FlutterRunner
+                file={activeFlutterApp}
+                onClose={closeFlutterRunner}
+              />
+            </motion.div>
+          )}
         </AnimatePresence>
 
+        {geminiChatOpen && (
+          <motion.div
+            key="gemini"
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.95, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            className="absolute inset-0 pointer-events-none"
+          >
+            <GeminiChat onClose={closeGeminiChat} />
+          </motion.div>
+        )}
+
       </div>
 
       {/* Spotlight Search */}

app/components/Dock.tsx

@@ -11,6 +11,7 @@ import {
   FolderOpen,
   Compass
 } from '@phosphor-icons/react'
+import { motion } from 'framer-motion'
 
 interface DockProps {
   onOpenFileManager: (path: string) => void
@@ -26,14 +27,18 @@ interface DockItemProps {
   onClick: () => void
   isActive?: boolean
   className?: string
+  mouseX: React.MutableRefObject<number | null>
 }
 
-const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = false, className = '' }) => {
+const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = false, className = '', mouseX }) => {
   const [isHovered, setIsHovered] = useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
 
   return (
-    <div className="dock-item group">
-      <button
+    <div className="dock-item group" ref={ref}>
+      <motion.button
+        whileHover={{ scale: 1.2, y: -10 }}
+        whileTap={{ scale: 0.95 }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={onClick}
@@ -41,7 +46,7 @@ const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = fa
         title={label}
       >
         {icon}
-      </button>
+      </motion.button>
       <div
         className={`dock-dot ${isActive ? 'opacity-100' : ''}`}
         id={`dot-${label.toLowerCase().replace(/\s+/g, '-')}`}
@@ -57,6 +62,8 @@ export function Dock({
   onOpenBrowser,
   onOpenGeminiChat
 }: DockProps) {
+  const mouseX = React.useRef<number | null>(null)
+
   const dockItems = [
     {
       icon: (
@@ -117,10 +124,14 @@ export function Dock({
 
   return (
     <div className="dock-container">
-      <div className="dock-glass px-3 pb-2 pt-3 rounded-2xl flex items-end gap-2 shadow-2xl border border-white/20 transition-all duration-300">
+      <div
+        className="dock-glass px-3 pb-2 pt-3 rounded-2xl flex items-end gap-3 shadow-2xl border border-white/20 transition-all duration-300"
+        onMouseMove={(e) => mouseX.current = e.pageX}
+        onMouseLeave={() => mouseX.current = null}
+      >
         {dockItems.map((item, index) => (
           <React.Fragment key={item.label}>
-            <DockItem {...item} />
+            <DockItem {...item} mouseX={mouseX} />
             {index === dockItems.length - 1 && (
               <>
                 <div className="w-px h-10 bg-gray-400/30 mx-1" />
@@ -131,8 +142,9 @@ export function Dock({
                     </div>
                   }
                   label="Trash"
-                  onClick={() => {}}
+                  onClick={() => { }}
                   className=""
+                  mouseX={mouseX}
                 />
               </>
             )}

app/components/DraggableDesktopIcon.tsx

@@ -107,6 +107,12 @@ export function DraggableDesktopIcon({
             <Key size={32} weight="bold" className="text-white" />
           </div>
         )
+      case 'flutter':
+        return (
+          <div className="bg-gradient-to-br from-cyan-400 to-blue-500 w-full h-full rounded-xl flex items-center justify-center shadow-inner border border-cyan-300/30">
+            <Code size={32} weight="bold" className="text-white" />
+          </div>
+        )
       default:
         return (
           <div className="bg-gray-400 w-full h-full rounded-xl flex items-center justify-center">

app/components/FileManager.tsx

@@ -21,36 +21,39 @@ import {
   Plus,
   Eye,
   Users,
-  Globe
+  Globe,
+  Code
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { FilePreview } from './FilePreview'
+import Window from './Window'
 
 interface FileManagerProps {
   currentPath: string
   onNavigate: (path: string) => void
   onClose: () => void
+  onOpenFlutterApp?: (appFile: any) => void
 }
 
 interface FileItem {
   name: string
-  type: 'folder' | 'file'
+  type: 'folder' | 'file' | 'flutter_app'
   size?: number
   modified?: string
   path: string
   extension?: string
+  dartCode?: string
+  dependencies?: string[]
+  pubspecYaml?: string
 }
 
-export function FileManager({ currentPath, onNavigate, onClose }: FileManagerProps) {
+export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp }: FileManagerProps) {
   const [files, setFiles] = useState<FileItem[]>([])
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
   const [uploadModalOpen, setUploadModalOpen] = useState(false)
   const [previewFile, setPreviewFile] = useState<FileItem | null>(null)
-  const [windowPos, setWindowPos] = useState({ x: 60, y: 60 })
-  const [isDragging, setIsDragging] = useState(false)
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
   const [isPublicFolder, setIsPublicFolder] = useState(false)
 
   // Load files when path changes
@@ -199,6 +202,10 @@ export function FileManager({ currentPath, onNavigate, onClose }: FileManagerPro
       return <FolderIcon size={48} weight="fill" className="text-orange-400" />
     }
 
+    if (file.type === 'flutter_app') {
+      return <Code size={48} weight="fill" className="text-cyan-500" />
+    }
+
     const ext = file.extension?.toLowerCase()
     switch (ext) {
       case 'pdf':
@@ -241,214 +248,164 @@ export function FileManager({ currentPath, onNavigate, onClose }: FileManagerPro
     return !relativePath.includes('/')
   })
 
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('.window-controls')) return
-    setIsDragging(true)
-    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
-  }
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (isDragging) {
-      setWindowPos({
-        x: e.clientX - dragStart.x,
-        y: e.clientY - dragStart.y,
-      })
-    }
-  }
-
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  useEffect(() => {
-    if (isDragging) {
-      window.addEventListener('mousemove', handleMouseMove)
-      window.addEventListener('mouseup', handleMouseUp)
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove)
-        window.removeEventListener('mouseup', handleMouseUp)
-      }
-    }
-  }, [isDragging, dragStart])
-
   return (
     <>
-      <motion.div
-        style={{ left: windowPos.x, top: windowPos.y }}
-        className="fixed w-[800px] h-[600px] bg-white rounded-lg shadow-2xl overflow-hidden flex flex-col z-30 select-none"
+      <Window
+        id="files"
+        title={isPublicFolder ? `Public Folder ${currentPath.replace('public', '').replace('/', '')}` : (currentPath || 'Documents')}
+        isOpen={true}
+        onClose={onClose}
+        width={800}
+        height={600}
+        x={60}
+        y={60}
+        className="file-manager-window"
       >
-        {/* Title Bar */}
-        <div
-          onMouseDown={handleMouseDown}
-          className="h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-3 cursor-move"
-        >
-          <div className="flex items-center gap-2 flex-1">
-            <div className="flex items-center gap-1 window-controls">
+        <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">
               <button
-                onClick={onClose}
-                className="w-5 h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group"
+                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"
               >
-                <X size={12} weight="bold" className="text-white opacity-0 group-hover:opacity-100" />
-              </button>
-              <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
-                <Minus size={12} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+                <CaretLeft size={16} weight="bold" />
               </button>
-              <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
-                <Square size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+              <button
+                onClick={() => onNavigate('')}
+                className="p-1.5 hover:bg-[#e8e8e8] rounded"
+              >
+                <House size={16} weight="regular" />
               </button>
             </div>
-            <span className="text-sm font-medium text-[#2c2c2c] ml-2 flex items-center gap-2">
-              File Manager - {isPublicFolder ? (
-                <>
-                  <Globe size={16} className="text-purple-500" />
-                  Public Folder {currentPath.replace('public', '').replace('/', '')}
-                </>
-              ) : (currentPath || 'Documents')}
-            </span>
-          </div>
-        </div>
-
-        {/* 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">
-            <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"
-            >
-              <CaretLeft size={16} weight="bold" />
-            </button>
-            <button
-              onClick={() => onNavigate('')}
-              className="p-1.5 hover:bg-[#e8e8e8] rounded"
-            >
-              <House size={16} weight="regular" />
-            </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 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"
-            >
-              <Plus size={16} weight="bold" />
-            </button>
-            <button
-              onClick={() => setUploadModalOpen(true)}
-              className="p-1.5 hover:bg-[#e8e8e8] rounded"
-              title="Upload File"
-            >
-              <Upload size={16} weight="regular" />
-            </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 className="flex items-center gap-1">
+              <button
+                onClick={handleCreateFolder}
+                className="p-1.5 hover:bg-[#e8e8e8] rounded"
+                title="New Folder"
+              >
+                <Plus size={16} weight="bold" />
+              </button>
+              <button
+                onClick={() => setUploadModalOpen(true)}
+                className="p-1.5 hover:bg-[#e8e8e8] rounded"
+                title="Upload File"
+              >
+                <Upload size={16} weight="regular" />
+              </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>
           </div>
-        </div>
 
-        {/* File List */}
-        <div className="flex-1 overflow-auto p-4">
-          {loading ? (
-            <div className="flex items-center justify-center h-full text-[#999] text-sm">
-              Loading files...
-            </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>
-          ) : (
-            <div className="grid grid-cols-6 gap-4">
-              {currentLevelFiles.map((file) => (
-                <div
-                  key={file.path}
-                  className="group relative"
-                >
-                  <button
-                    onClick={() => {
-                      if (file.type === 'folder') {
-                        onNavigate(file.path)
-                      } else {
-                        handlePreview(file)
-                      }
-                    }}
-                    className="flex flex-col items-center gap-2 p-2 hover:bg-[#f0f0f0] rounded w-full"
+          {/* File List */}
+          <div className="flex-1 overflow-auto p-4 bg-white">
+            {loading ? (
+              <div className="flex items-center justify-center h-full text-[#999] text-sm">
+                Loading files...
+              </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>
+            ) : (
+              <div className="grid grid-cols-6 gap-4">
+                {currentLevelFiles.map((file) => (
+                  <div
+                    key={file.path}
+                    className="group relative"
                   >
-                    <div className="w-16 h-16 flex items-center justify-center">
-                      {getFileIcon(file)}
-                    </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)}
+                    <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"
+                    >
+                      <div className="w-16 h-16 flex items-center justify-center">
+                        {getFileIcon(file)}
+                      </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>
+                      )}
+                    </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"
+                        >
+                          <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>
                     )}
-                  </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"
-                      >
-                        <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>
+                  </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-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
+          </div>
         </div>
-      </motion.div>
+      </Window>
 
       {/* Upload Modal */}
       {uploadModalOpen && (

app/components/FlutterRunner.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import React, { useState } from 'react'
+import Window from './Window'
+import { Copy, CaretRight, CaretLeft, Code as CodeIcon } from '@phosphor-icons/react'
+
+interface FlutterRunnerProps {
+  file: {
+    name: string
+    dartCode: string
+    dependencies?: string[]
+    pubspecYaml?: string
+  }
+  onClose: () => void
+}
+
+export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [copySuccess, setCopySuccess] = useState(false)
+
+  const handleCopyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(file.dartCode)
+      setCopySuccess(true)
+      setTimeout(() => setCopySuccess(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy code:', err)
+    }
+  }
+
+  const handleCopyPubspec = async () => {
+    if (file.pubspecYaml) {
+      try {
+        await navigator.clipboard.writeText(file.pubspecYaml)
+        setCopySuccess(true)
+        setTimeout(() => setCopySuccess(false), 2000)
+      } catch (err) {
+        console.error('Failed to copy pubspec:', err)
+      }
+    }
+  }
+
+  return (
+    <Window
+      id="flutter-runner"
+      title={`Flutter App: ${file.name}`}
+      isOpen={true}
+      onClose={onClose}
+      width={1200}
+      height={700}
+      x={100}
+      y={80}
+      className="flutter-runner-window"
+    >
+      <div className="flex h-full bg-white relative">
+        {/* Main Zapp iframe area */}
+        <div className="flex-1 relative">
+          <iframe
+            src="https://zapp.run"
+            className="w-full h-full border-0"
+            allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write"
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"
+            title="Zapp Flutter IDE"
+          />
+          
+          {/* Instruction overlay */}
+          <div className="absolute top-4 left-4 right-4 bg-blue-500/90 backdrop-blur-sm text-white px-4 py-3 rounded-lg shadow-lg border border-blue-400/50">
+            <div className="flex items-center gap-2">
+              <CodeIcon size={20} weight="bold" />
+              <p className="text-sm font-medium">
+                Use the sidebar to copy your Flutter code and dependencies, then paste into Zapp's editor.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Collapsible Sidebar */}
+        {sidebarOpen && (
+          <div className="w-[350px] border-l border-gray-200 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-lg">
+            {/* Sidebar Header */}
+            <div className="h-12 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between px-4 text-white">
+              <div className="flex items-center gap-2">
+                <CodeIcon size={20} weight="bold" />
+                <span className="font-semibold text-sm">Source Code</span>
+              </div>
+              <button
+                onClick={() => setSidebarOpen(false)}
+                className="hover:bg-white/20 p-1 rounded transition-colors"
+                title="Close sidebar"
+              >
+                <CaretRight size={20} weight="bold" />
+              </button>
+            </div>
+
+            {/* Sidebar Content */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              {/* Dart Code Section */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold text-gray-700">Main Dart Code</h3>
+                  <button
+                    onClick={handleCopyCode}
+                    className="flex items-center gap-1 px-3 py-1.5 bg-cyan-500 hover:bg-cyan-600 text-white text-xs rounded-md transition-colors shadow-sm"
+                  >
+                    <Copy size={14} weight="bold" />
+                    {copySuccess ? 'Copied!' : 'Copy'}
+                  </button>
+                </div>
+                <div className="bg-gray-900 rounded-lg p-3 max-h-64 overflow-y-auto">
+                  <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap break-words">
+                    {file.dartCode}
+                  </pre>
+                </div>
+                <p className="text-xs text-gray-600 italic">
+                  💡 Paste this code into <code className="bg-gray-100 px-1 py-0.5 rounded">lib/main.dart</code> in Zapp
+                </p>
+              </div>
+
+              {/* Dependencies Section */}
+              {file.dependencies && file.dependencies.length > 0 && (
+                <div className="space-y-2">
+                  <h3 className="text-sm font-semibold text-gray-700">Dependencies</h3>
+                  <div className="bg-blue-50 rounded-lg p-3 border border-blue-100">
+                    <ul className="space-y-1">
+                      {file.dependencies.map((dep, index) => (
+                        <li key={index} className="text-xs font-mono text-blue-900">
+                          • {dep}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <p className="text-xs text-gray-600 italic">
+                    💡 Add these to <code className="bg-gray-100 px-1 py-0.5 rounded">pubspec.yaml</code> in Zapp
+                  </p>
+                </div>
+              )}
+
+              {/* Pubspec.yaml Section */}
+              {file.pubspecYaml && (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-semibold text-gray-700">pubspec.yaml</h3>
+                    <button
+                      onClick={handleCopyPubspec}
+                      className="flex items-center gap-1 px-3 py-1.5 bg-purple-500 hover:bg-purple-600 text-white text-xs rounded-md transition-colors shadow-sm"
+                    >
+                      <Copy size={14} weight="bold" />
+                      Copy
+                    </button>
+                  </div>
+                  <div className="bg-gray-900 rounded-lg p-3 max-h-48 overflow-y-auto">
+                    <pre className="text-xs text-yellow-400 font-mono whitespace-pre-wrap break-words">
+                      {file.pubspecYaml}
+                    </pre>
+                  </div>
+                  <p className="text-xs text-gray-600 italic">
+                    💡 Replace the entire <code className="bg-gray-100 px-1 py-0.5 rounded">pubspec.yaml</code> file
+                  </p>
+                </div>
+              )}
+
+              {/* Instructions */}
+              <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-4 border border-green-200">
+                <h3 className="text-sm font-semibold text-green-800 mb-2">Quick Start</h3>
+                <ol className="text-xs text-green-900 space-y-1.5 list-decimal list-inside">
+                  <li>Copy the Dart code above</li>
+                  <li>In Zapp, open <code className="bg-white px-1 py-0.5 rounded text-xs">lib/main.dart</code></li>
+                  <li>Paste and replace all content</li>
+                  <li>Add dependencies to <code className="bg-white px-1 py-0.5 rounded text-xs">pubspec.yaml</code></li>
+                  <li>Click the run button in Zapp!</li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Sidebar Toggle Button (when closed) */}
+        {!sidebarOpen && (
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="absolute right-0 top-1/2 -translate-y-1/2 bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-2 rounded-l-lg shadow-lg hover:from-cyan-600 hover:to-blue-600 transition-all"
+            title="Open sidebar"
+          >
+            <CaretLeft size={20} weight="bold" />
+          </button>
+        )}
+      </div>
+    </Window>
+  )
+}
+

app/components/SessionManagerWindow.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useRef } from 'react'
-import Draggable from 'react-draggable'
+import React, { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   Key,
@@ -14,17 +13,13 @@ import {
   Copy,
   Check,
   X,
-  Trash,
   FileText,
   Table as FileSpreadsheet,
   Presentation as FilePresentation,
   FilePdf,
-  Plus,
   ArrowsClockwise as RefreshCw,
-  Minus,
-  Square,
-  XCircle
 } from '@phosphor-icons/react'
+import Window from './Window'
 
 interface Session {
   id: string
@@ -47,7 +42,6 @@ interface SessionManagerWindowProps {
 }
 
 export function SessionManagerWindow({ onClose, sessionId, sessionKey: initialSessionKey }: SessionManagerWindowProps) {
-  const [isMaximized, setIsMaximized] = useState(false)
   const [sessionKey] = useState(initialSessionKey)
   const [files, setFiles] = useState<FileItem[]>([])
   const [publicFiles, setPublicFiles] = useState<FileItem[]>([])
@@ -59,7 +53,6 @@ export function SessionManagerWindow({ onClose, sessionId, sessionKey: initialSe
   const [activeTab, setActiveTab] = useState<'session' | 'public'>('session')
   const [uploadFile, setUploadFile] = useState<File | null>(null)
   const [isPublicUpload, setIsPublicUpload] = useState(false)
-  const nodeRef = useRef(null)
 
   // Session is automatically created - no manual creation needed!
 
@@ -305,61 +298,22 @@ export function SessionManagerWindow({ onClose, sessionId, sessionKey: initialSe
   }, [error])
 
   return (
-    <Draggable
-      handle=".window-header"
-      defaultPosition={{ x: 100, y: 100 }}
-      disabled={isMaximized}
-      nodeRef={nodeRef}
+    <Window
+      id="session-manager"
+      title="Session Manager"
+      isOpen={true}
+      onClose={onClose}
+      width={900}
+      height={600}
+      x={100}
+      y={100}
+      className="session-manager-window"
+      headerClassName="bg-gradient-to-r from-purple-600/20 to-purple-800/20 border-b border-purple-500/20"
+      darkMode={true}
     >
-      <div
-        ref={nodeRef}
-        className={`bg-gray-900/95 backdrop-blur-xl rounded-xl shadow-2xl border border-purple-500/30 overflow-hidden ${
-          isMaximized ? 'fixed inset-4' : 'w-[900px]'
-        }`}
-        style={{ zIndex: 1000 }}
-      >
-        {/* Window Header */}
-        <div className="window-header bg-gradient-to-r from-purple-600/20 to-purple-800/20 p-3 flex items-center justify-between border-b border-purple-500/20 cursor-move">
-          <div className="flex items-center gap-2">
-            <Key size={20} className="text-purple-400" />
-            <span className="text-white font-semibold">Session Manager</span>
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsMaximized(false);
-              }}
-              className="w-7 h-7 flex items-center justify-center hover:bg-yellow-500/20 rounded-md transition-colors group"
-              title="Minimize"
-            >
-              <Minus size={14} className="text-yellow-400 group-hover:text-yellow-300" />
-            </button>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsMaximized(!isMaximized);
-              }}
-              className="w-7 h-7 flex items-center justify-center hover:bg-green-500/20 rounded-md transition-colors group"
-              title={isMaximized ? "Restore" : "Maximize"}
-            >
-              <Square size={14} className="text-green-400 group-hover:text-green-300" />
-            </button>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onClose();
-              }}
-              className="w-7 h-7 flex items-center justify-center hover:bg-red-500/30 rounded-md transition-colors group"
-              title="Close Window"
-            >
-              <X size={14} className="text-red-400 group-hover:text-red-300" />
-            </button>
-          </div>
-        </div>
-
+      <div className="flex flex-col h-full bg-gray-900/95 backdrop-blur-xl">
         {/* Window Content */}
-        <div className={`p-6 ${isMaximized ? 'h-[calc(100%-50px)] overflow-auto' : 'h-[600px] overflow-auto'}`}>
+        <div className="p-6 flex-1 overflow-auto">
           {/* Session Info */}
           <div className="mb-6">
             <div>
@@ -503,22 +457,20 @@ export function SessionManagerWindow({ onClose, sessionId, sessionKey: initialSe
             <div className="flex gap-4 mb-4">
               <button
                 onClick={() => setActiveTab('session')}
-                className={`px-4 py-2 rounded-lg transition-colors flex items-center gap-2 ${
-                  activeTab === 'session'
-                    ? 'bg-purple-600 text-white'
-                    : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
-                }`}
+                className={`px-4 py-2 rounded-lg transition-colors flex items-center gap-2 ${activeTab === 'session'
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+                  }`}
               >
                 <Lock size={20} />
                 Session Files ({files.length})
               </button>
               <button
                 onClick={() => setActiveTab('public')}
-                className={`px-4 py-2 rounded-lg transition-colors flex items-center gap-2 ${
-                  activeTab === 'public'
-                    ? 'bg-purple-600 text-white'
-                    : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
-                }`}
+                className={`px-4 py-2 rounded-lg transition-colors flex items-center gap-2 ${activeTab === 'public'
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+                  }`}
               >
                 <Globe size={20} />
                 Public Files ({publicFiles.length})
@@ -597,6 +549,6 @@ export function SessionManagerWindow({ onClose, sessionId, sessionKey: initialSe
           )}
         </AnimatePresence>
       </div>
-    </Draggable>
+    </Window>
   )
 }

app/components/TopBar.tsx

@@ -42,7 +42,7 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
   }, [])
 
   return (
-    <div className="fixed top-0 left-0 right-0 h-8 glass flex items-center justify-between px-4 text-sm z-50 shadow-sm">
+    <div className="fixed top-0 left-0 right-0 h-8 glass flex items-center justify-between px-4 text-sm z-50 shadow-sm backdrop-blur-xl bg-white/40 border-b border-white/20">
       <div className="flex items-center space-x-4">
         <button
           onClick={() => setAppleMenuOpen(!appleMenuOpen)}
@@ -51,14 +51,16 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
           <CirclesFour size={20} weight="fill" className="text-blue-600" />
         </button>
         <span className="font-bold text-gray-800">Reuben OS</span>
-        <span className="text-gray-600 text-xs ml-2">{activeAppName}</span>
+        <span className="text-gray-600 text-xs ml-2 font-medium">{activeAppName}</span>
       </div>
 
       <div className="flex items-center space-x-4">
-        <BatteryFull size={16} weight="fill" className="text-gray-700" />
-        <WifiHigh size={16} weight="fill" className="text-gray-700" />
-        <MagnifyingGlass size={16} weight="regular" className="text-gray-700" />
-        <div className="font-medium text-gray-800">{currentTime}</div>
+        <div className="flex items-center space-x-3 text-gray-700">
+          <BatteryFull size={18} weight="fill" />
+          <WifiHigh size={18} weight="bold" />
+          <MagnifyingGlass size={18} weight="bold" />
+        </div>
+        <div className="font-medium text-gray-800 min-w-[140px] text-right">{currentTime}</div>
       </div>
 
       <AnimatePresence>
@@ -73,25 +75,25 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -5 }}
               transition={{ duration: 0.15 }}
-              className="absolute top-8 left-2 w-48 glass rounded-lg shadow-xl flex flex-col py-1 z-[60] text-sm"
+              className="absolute top-9 left-2 w-56 glass rounded-lg shadow-2xl flex flex-col py-1.5 z-[60] text-sm border border-white/40 backdrop-blur-2xl bg-white/80"
             >
               <button
                 onClick={() => {
                   if (onAboutClick) onAboutClick()
                   setAppleMenuOpen(false)
                 }}
-                className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800 font-medium">
                 About Reuben OS
               </button>
-              <div className="h-px bg-gray-300 my-1 mx-2" />
-              <button className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+              <div className="h-px bg-gray-300/50 my-1 mx-2" />
+              <button className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
                 System Settings...
               </button>
-              <div className="h-px bg-gray-300 my-1 mx-2" />
-              <button className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+              <div className="h-px bg-gray-300/50 my-1 mx-2" />
+              <button className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
                 Sleep
               </button>
-              <button className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+              <button className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
                 Restart...
               </button>
               <button
@@ -99,17 +101,17 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
                   if (onPowerAction) onPowerAction()
                   setAppleMenuOpen(false)
                 }}
-                className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+                className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
               >
                 Shut Down...
               </button>
-              <div className="h-px bg-gray-300 my-1 mx-2" />
+              <div className="h-px bg-gray-300/50 my-1 mx-2" />
               <button
                 onClick={() => {
                   if (onPowerAction) onPowerAction()
                   setAppleMenuOpen(false)
                 }}
-                className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+                className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
               >
                 Log Out...
               </button>

app/components/Window.tsx

@@ -58,7 +58,7 @@ const Window: React.FC<WindowProps> = ({
   };
 
   const windowClass = darkMode ? 'bg-gray-900 border-gray-700' : 'bg-[#f5f5f5] border-gray-300/50';
-  const headerClass = darkMode ? 'bg-gray-800 border-gray-700' : 'bg-[#f1f1f1] border-gray-300';
+  const headerClass = darkMode ? 'bg-gray-800 border-gray-700' : 'macos-window-header';
 
   if (isMaximized) {
     return (
@@ -66,14 +66,14 @@ const Window: React.FC<WindowProps> = ({
         className={`fixed inset-0 top-8 z-50 flex flex-col overflow-hidden ${windowClass} ${className}`}
       >
         <div
-          className={`h-12 flex items-center px-4 space-x-4 border-b ${headerClass} ${headerClassName}`}
+          className={`h-10 flex items-center px-4 space-x-4 border-b ${headerClass} ${headerClassName}`}
         >
-          <div className="flex space-x-2">
+          <div className="flex space-x-2 group">
             <div className="traffic-light traffic-close" onClick={onClose} />
             <div className="traffic-light traffic-min" onClick={onMinimize} />
             <div className="traffic-light traffic-max" onClick={handleMaximize} />
           </div>
-          <span className="font-semibold text-gray-700 flex-1 text-center pr-16">{title}</span>
+          <span className="font-semibold text-gray-700 flex-1 text-center pr-16 text-sm">{title}</span>
         </div>
         <div className="flex-1 overflow-auto">{children}</div>
       </div>
@@ -105,23 +105,23 @@ const Window: React.FC<WindowProps> = ({
         });
         setCurrentPosition(position);
       }}
-      className="window-transition"
+      className="pointer-events-auto"
       style={{ zIndex: 50 }}
     >
       <div
-        className={`h-full rounded-xl shadow-2xl overflow-hidden border ${windowClass} ${className}`}
+        className={`h-full macos-window flex flex-col ${className}`}
       >
         <div
-          className={`window-drag-handle h-12 flex items-center px-4 space-x-4 border-b cursor-move ${headerClass} ${headerClassName}`}
+          className={`window-drag-handle h-10 flex items-center px-4 space-x-4 border-b cursor-move ${headerClass} ${headerClassName}`}
         >
-          <div className="flex space-x-2">
+          <div className="flex space-x-2 group">
             <div className="traffic-light traffic-close" onClick={onClose} />
             <div className="traffic-light traffic-min" onClick={onMinimize} />
             <div className="traffic-light traffic-max" onClick={handleMaximize} />
           </div>
-          <span className="font-semibold text-gray-700 flex-1 text-center pr-16">{title}</span>
+          <span className="font-semibold text-gray-700 flex-1 text-center pr-16 text-sm select-none">{title}</span>
         </div>
-        <div className="flex-1 overflow-auto bg-white" style={{ height: 'calc(100% - 3rem)' }}>
+        <div className="flex-1 overflow-auto bg-white/90 backdrop-blur-sm" style={{ height: 'calc(100% - 2.5rem)' }}>
           {children}
         </div>
       </div>

app/globals.css

@@ -4,6 +4,7 @@
 
 /* Tailwind base layer for compatibility */
 @layer base {
+
   *,
   ::after,
   ::before,
@@ -132,6 +133,7 @@
     from {
       height: 0;
     }
+
     to {
       height: var(--radix-accordion-content-height);
     }
@@ -141,6 +143,7 @@
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
@@ -163,50 +166,49 @@
   }
 }
 
-/* Sonoma Background */
-.bg-sonoma {
-  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
-  background-size: cover;
-  background-position: center;
-}
-
 /* Glassmorphism utilities */
 .glass {
-  background: rgba(255, 255, 255, 0.65);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
 }
 
 .glass-dark {
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(20, 20, 20, 0.75);
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
 }
 
 .dock-glass {
   background: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(15px);
-  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
 }
 
 /* App Icon Styles */
 .app-icon {
-  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+
 .app-icon:hover {
-  transform: scale(1.2) translateY(-10px);
+  transform: scale(1.15) translateY(-8px);
 }
+
 .app-icon:active {
   transform: scale(0.95);
 }
 
 /* Window Animations */
 .window-transition {
-  transition: opacity 0.2s, transform 0.2s;
+  transition: opacity 0.2s ease-out;
 }
+
 .window-hidden {
   opacity: 0;
   transform: scale(0.95);
@@ -223,14 +225,17 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
+
 .traffic-close {
   background-color: #ff5f56;
   border: 1px solid #e0443e;
 }
+
 .traffic-min {
   background-color: #ffbd2e;
   border: 1px solid #dea123;
 }
+
 .traffic-max {
   background-color: #27c93f;
   border: 1px solid #1aab29;
@@ -247,40 +252,61 @@
   align-items: center;
   justify-content: center;
   font-size: 8px;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
   font-weight: bold;
 }
-.traffic-close:hover::after { content: '×'; }
-.traffic-min:hover::after { content: '−'; }
-.traffic-max:hover::after { content: '+'; }
+
+.traffic-close:hover::after {
+  content: '×';
+}
+
+.traffic-min:hover::after {
+  content: '−';
+}
+
+.traffic-max:hover::after {
+  content: '+';
+}
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
-  background: rgba(0,0,0,0.2);
-  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 5px;
+  border: 2px solid transparent;
+  background-clip: content-box;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0,0,0,0.3);
+  background-color: rgba(0, 0, 0, 0.25);
 }
 
 /* Desktop Icon Grid */
 .desktop-icon {
-  @apply flex flex-col items-center gap-1 cursor-pointer transition-all;
+  @apply flex flex-col items-center gap-1.5 cursor-pointer transition-all;
 }
+
 .desktop-icon:hover {
-  transform: scale(1.05);
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
 }
+
 .desktop-icon-label {
   @apply text-xs text-white font-medium px-2 py-0.5 rounded;
-  background: rgba(0,0,0,0.3);
-  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+}
+
+.desktop-icon:hover .desktop-icon-label {
+  background: rgba(0, 0, 0, 0.5);
 }
 
 /* macOS style window */
@@ -288,17 +314,18 @@
   @apply rounded-xl shadow-2xl overflow-hidden;
   background: #f5f5f5;
   border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }
 
 .macos-window-header {
   @apply h-10 flex items-center px-4 justify-between;
-  background: #f1f1f1;
+  background: linear-gradient(to bottom, #f6f6f6, #e8e8e8);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 /* Dock styles */
 .dock-container {
-  @apply fixed bottom-2 left-0 right-0 flex justify-center z-50;
+  @apply fixed bottom-4 left-0 right-0 flex justify-center z-50;
 }
 
 .dock-item {
@@ -307,7 +334,7 @@
 
 .dock-dot {
   @apply w-1 h-1 rounded-full mt-1 opacity-0 transition-opacity;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .dock-item:hover .dock-dot {

backend/mcp_server.py

@@ -14,6 +14,7 @@ from tools.document_tools import register_document_tools
 from tools.calendar_tools import register_calendar_tools
 from tools.ai_study_tools import register_ai_study_tools
 from tools.claude_integration_tools import register_claude_integration_tools
+from tools.flutter_tools import register_flutter_tools
 
 # Setup logging
 logging.basicConfig(level=logging.INFO)
@@ -68,6 +69,9 @@ register_ai_study_tools(mcp)
 logger.info("Registering Claude integration tools")
 register_claude_integration_tools(mcp, DATA_DIR)
 
+logger.info("Registering Flutter app tools")
+register_flutter_tools(mcp, DATA_DIR, UPLOAD_PASSCODE)
+
 # Add server information tool
 @mcp.tool()
 def get_server_info() -> dict:
@@ -115,6 +119,13 @@ def get_server_info() -> dict:
                 "execute_matplotlib_code",
                 "list_claude_generated_content",
                 "get_code_output"
+            ],
+            "flutter_tools": [
+                "create_flutter_app (requires passcode)",
+                "get_flutter_app",
+                "list_flutter_apps",
+                "update_flutter_app (requires passcode)",
+                "delete_flutter_app (requires passcode)"
             ]
         },
         "tips": [
@@ -123,7 +134,9 @@ def get_server_info() -> dict:
             "Use 'execute_matplotlib_code' for data visualization with matplotlib",
             "Use 'list_claude_generated_content' to see all saved content",
             "Upload operations require a passcode for security",
-            "Reuben OS can execute your Python code and save outputs automatically!"
+            "Reuben OS can execute your Python code and save outputs automatically!",
+            "Use 'create_flutter_app' to create Flutter apps that run in Zapp",
+            "Use 'list_flutter_apps' to see all available Flutter applications"
         ]
     }
 

backend/tools/flutter_tools.py

@@ -0,0 +1,327 @@
+"""
+Flutter App Tools for Reuben OS MCP Server
+Provides tools for creating, retrieving, and managing Flutter apps
+"""
+
+import os
+import json
+from pathlib import Path
+from typing import Dict, Any, Optional, List
+import datetime
+
+def register_flutter_tools(mcp, data_dir: str, upload_passcode: str):
+    """Register Flutter app related MCP tools"""
+    
+    # Create flutter_apps directory
+    flutter_apps_dir = os.path.join(data_dir, "documents", "flutter_apps")
+    os.makedirs(flutter_apps_dir, exist_ok=True)
+    
+    def validate_passcode(passcode: str) -> bool:
+        """Validate the upload passcode"""
+        return passcode == upload_passcode
+    
+    @mcp.tool()
+    def create_flutter_app(
+        name: str,
+        dart_code: str,
+        dependencies: Optional[List[str]] = None,
+        pubspec_yaml: Optional[str] = None,
+        passcode: str = ""
+    ) -> Dict[str, Any]:
+        """
+        Create a new Flutter app and save it to storage
+        
+        Args:
+            name: Name of the Flutter app (will be used as filename)
+            dart_code: The Dart/Flutter code (typically main.dart content)
+            dependencies: List of dependencies (e.g., ["http: ^0.13.0", "provider: ^6.0.0"])
+            pubspec_yaml: Complete pubspec.yaml content (optional)
+            passcode: Upload passcode for authentication
+            
+        Returns:
+            Dictionary with success status and file path
+        """
+        # Validate passcode
+        if not validate_passcode(passcode):
+            return {
+                "status": "error",
+                "message": "Invalid passcode"
+            }
+        
+        # Validate inputs
+        if not name or not dart_code:
+            return {
+                "status": "error",
+                "message": "Name and dart_code are required"
+            }
+        
+        # Sanitize name
+        safe_name = "".join(c for c in name if c.isalnum() or c in ('-', '_')).lower()
+        if not safe_name:
+            return {
+                "status": "error",
+                "message": "Invalid app name"
+            }
+        
+        # Generate default pubspec.yaml if not provided
+        if not pubspec_yaml:
+            dep_lines = []
+            if dependencies:
+                for dep in dependencies:
+                    dep_lines.append(f"  {dep}")
+            
+            deps_section = "\n".join(dep_lines) if dep_lines else ""
+            pubspec_yaml = f"""name: {safe_name}
+description: A Flutter application created via Reuben OS
+version: 1.0.0
+
+environment:
+  sdk: '>=3.0.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+{deps_section}
+
+flutter:
+  uses-material-design: true
+"""
+        
+        # Create Flutter app object
+        flutter_app = {
+            "type": "flutter_app",
+            "name": safe_name,
+            "dartCode": dart_code,
+            "dependencies": dependencies or [],
+            "pubspecYaml": pubspec_yaml,
+            "metadata": {
+                "created": datetime.datetime.now().isoformat(),
+                "modified": datetime.datetime.now().isoformat(),
+                "author": "claude"
+            }
+        }
+        
+        # Save to file
+        filename = f"{safe_name}.flutter.json"
+        file_path = os.path.join(flutter_apps_dir, filename)
+        
+        # Check if file exists
+        if os.path.exists(file_path):
+            return {
+                "status": "error",
+                "message": f"Flutter app '{safe_name}' already exists. Use update_flutter_app to modify it."
+            }
+        
+        try:
+            with open(file_path, 'w', encoding='utf-8') as f:
+                json.dump(flutter_app, f, indent=2, ensure_ascii=False)
+            
+            return {
+                "status": "success",
+                "message": f"Flutter app '{safe_name}' created successfully",
+                "app_name": safe_name,
+                "file_path": file_path,
+                "app_data": flutter_app
+            }
+        except Exception as e:
+            return {
+                "status": "error",
+                "message": f"Failed to save Flutter app: {str(e)}"
+            }
+    
+    @mcp.tool()
+    def get_flutter_app(name: str) -> Dict[str, Any]:
+        """
+        Retrieve a Flutter app by name
+        
+        Args:
+            name: Name of the Flutter app
+            
+        Returns:
+            Dictionary with app data or error
+        """
+        # Sanitize name
+        safe_name = "".join(c for c in name if c.isalnum() or c in ('-', '_')).lower()
+        filename = f"{safe_name}.flutter.json"
+        file_path = os.path.join(flutter_apps_dir, filename)
+        
+        if not os.path.exists(file_path):
+            return {
+                "status": "error",
+                "message": f"Flutter app '{safe_name}' not found"
+            }
+        
+        try:
+            with open(file_path, 'r', encoding='utf-8') as f:
+                app_data = json.load(f)
+            
+            return {
+                "status": "success",
+                "app_name": safe_name,
+                "app_data": app_data
+            }
+        except Exception as e:
+            return {
+                "status": "error",
+                "message": f"Failed to read Flutter app: {str(e)}"
+            }
+    
+    @mcp.tool()
+    def list_flutter_apps() -> Dict[str, Any]:
+        """
+        List all available Flutter apps
+        
+        Returns:
+            Dictionary with list of Flutter apps
+        """
+        try:
+            apps = []
+            
+            if not os.path.exists(flutter_apps_dir):
+                return {
+                    "status": "success",
+                    "apps": [],
+                    "count": 0
+                }
+            
+            for filename in os.listdir(flutter_apps_dir):
+                if filename.endswith('.flutter.json'):
+                    file_path = os.path.join(flutter_apps_dir, filename)
+                    try:
+                        with open(file_path, 'r', encoding='utf-8') as f:
+                            app_data = json.load(f)
+                        
+                        apps.append({
+                            "name": app_data.get("name", filename.replace('.flutter.json', '')),
+                            "created": app_data.get("metadata", {}).get("created"),
+                            "modified": app_data.get("metadata", {}).get("modified"),
+                            "dependencies_count": len(app_data.get("dependencies", [])),
+                            "file_path": file_path
+                        })
+                    except Exception as e:
+                        # Skip malformed files
+                        continue
+            
+            return {
+                "status": "success",
+                "apps": apps,
+                "count": len(apps)
+            }
+        except Exception as e:
+            return {
+                "status": "error",
+                "message": f"Failed to list Flutter apps: {str(e)}"
+            }
+    
+    @mcp.tool()
+    def update_flutter_app(
+        name: str,
+        dart_code: Optional[str] = None,
+        dependencies: Optional[List[str]] = None,
+        pubspec_yaml: Optional[str] = None,
+        passcode: str = ""
+    ) -> Dict[str, Any]:
+        """
+        Update an existing Flutter app
+        
+        Args:
+            name: Name of the Flutter app to update
+            dart_code: New Dart/Flutter code (optional, keeps existing if not provided)
+            dependencies: New dependencies list (optional, keeps existing if not provided)
+            pubspec_yaml: New pubspec.yaml content (optional, keeps existing if not provided)
+            passcode: Upload passcode for authentication
+            
+        Returns:
+            Dictionary with success status
+        """
+        # Validate passcode
+        if not validate_passcode(passcode):
+            return {
+                "status": "error",
+                "message": "Invalid passcode"
+            }
+        
+        # Sanitize name
+        safe_name = "".join(c for c in name if c.isalnum() or c in ('-', '_')).lower()
+        filename = f"{safe_name}.flutter.json"
+        file_path = os.path.join(flutter_apps_dir, filename)
+        
+        if not os.path.exists(file_path):
+            return {
+                "status": "error",
+                "message": f"Flutter app '{safe_name}' not found"
+            }
+        
+        try:
+            # Read existing app
+            with open(file_path, 'r', encoding='utf-8') as f:
+                app_data = json.load(f)
+            
+            # Update fields if provided
+            if dart_code is not None:
+                app_data["dartCode"] = dart_code
+            if dependencies is not None:
+                app_data["dependencies"] = dependencies
+            if pubspec_yaml is not None:
+                app_data["pubspecYaml"] = pubspec_yaml
+            
+            # Update metadata
+            app_data["metadata"]["modified"] = datetime.datetime.now().isoformat()
+            
+            # Save updated app
+            with open(file_path, 'w', encoding='utf-8') as f:
+                json.dump(app_data, f, indent=2, ensure_ascii=False)
+            
+            return {
+                "status": "success",
+                "message": f"Flutter app '{safe_name}' updated successfully",
+                "app_data": app_data
+            }
+        except Exception as e:
+            return {
+                "status": "error",
+                "message": f"Failed to update Flutter app: {str(e)}"
+            }
+    
+    @mcp.tool()
+    def delete_flutter_app(name: str, passcode: str) -> Dict[str, Any]:
+        """
+        Delete a Flutter app
+        
+        Args:
+            name: Name of the Flutter app to delete
+            passcode: Upload passcode for authentication
+            
+        Returns:
+            Dictionary with success status
+        """
+        # Validate passcode
+        if not validate_passcode(passcode):
+            return {
+                "status": "error",
+                "message": "Invalid passcode"
+            }
+        
+        # Sanitize name
+        safe_name = "".join(c for c in name if c.isalnum() or c in ('-', '_')).lower()
+        filename = f"{safe_name}.flutter.json"
+        file_path = os.path.join(flutter_apps_dir, filename)
+        
+        if not os.path.exists(file_path):
+            return {
+                "status": "error",
+                "message": f"Flutter app '{safe_name}' not found"
+            }
+        
+        try:
+            os.remove(file_path)
+            return {
+                "status": "success",
+                "message": f"Flutter app '{safe_name}' deleted successfully"
+            }
+        except Exception as e:
+            return {
+                "status": "error",
+                "message": f"Failed to delete Flutter app: {str(e)}"
+            }
+