FIx window dragging and opening

.claude/settings.local.json

@@ -22,7 +22,11 @@
       "Bash(git push:*)",
       "Bash(git filter-branch:*)",
       "Bash(git ls-tree:*)",
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "mcp__puppeteer__puppeteer_navigate",
+      "mcp__puppeteer__puppeteer_screenshot",
+      "mcp__puppeteer__puppeteer_click",
+      "mcp__puppeteer__puppeteer_evaluate"
     ],
     "deny": [],
     "ask": []

app/components/Calendar.tsx

@@ -19,6 +19,8 @@ interface CalendarProps {
   onClose: () => void
   onMinimize?: () => void
   onMaximize?: () => void
+  onFocus?: () => void
+  zIndex?: number
 }
 
 interface CalendarEvent extends Holiday {
@@ -27,7 +29,7 @@ interface CalendarEvent extends Holiday {
 
 type ViewMode = 'day' | 'week' | 'month' | 'year'
 
-export function Calendar({ onClose, onMinimize, onMaximize }: CalendarProps) {
+export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: CalendarProps) {
   const [currentDate, setCurrentDate] = useState(new Date())
   const [view, setView] = useState<ViewMode>('month')
   const [selectedDate, setSelectedDate] = useState<Date | null>(null)
@@ -205,6 +207,8 @@ export function Calendar({ onClose, onMinimize, onMaximize }: CalendarProps) {
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
+      onFocus={onFocus}
+      zIndex={zIndex}
       width={1100}
       height={750}
       x={50}

app/components/Clock.tsx

@@ -7,9 +7,11 @@ interface ClockProps {
   onClose: () => void
   onMinimize?: () => void
   onMaximize?: () => void
+  onFocus?: () => void
+  zIndex?: number
 }
 
-export function Clock({ onClose, onMinimize, onMaximize }: ClockProps) {
+export function Clock({ onClose, onMinimize, onMaximize, onFocus, zIndex }: ClockProps) {
   const [time, setTime] = useState(new Date())
   const [viewMode, setViewMode] = useState<'analog' | 'digital' | 'world'>('analog')
 
@@ -51,6 +53,8 @@ export function Clock({ onClose, onMinimize, onMaximize }: ClockProps) {
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
+      onFocus={onFocus}
+      zIndex={zIndex}
       width={380}
       height={480}
       x={window.innerWidth / 2 - 190}

app/components/Desktop.tsx

@@ -82,12 +82,53 @@ export function Desktop() {
   const [latexEditorMinimized, setLaTeXEditorMinimized] = useState(false)
 
   const [powerState, setPowerState] = useState<'active' | 'sleep' | 'restart' | 'shutdown'>('active')
+  const [globalZIndex, setGlobalZIndex] = useState(1000)
+  const [windowZIndices, setWindowZIndices] = useState<{[key: string]: number}>({})
+
+  const getNextZIndex = () => {
+    const nextZ = globalZIndex + 1
+    setGlobalZIndex(nextZ)
+    return nextZ
+  }
+
+  const bringWindowToFront = (windowId: string) => {
+    setWindowZIndices(prev => ({ ...prev, [windowId]: getNextZIndex() }))
+  }
+
+  const closeAllApps = () => {
+    // Close all apps
+    setFileManagerOpen(false)
+    setCalendarOpen(false)
+    setClockOpen(false)
+    setGeminiChatOpen(false)
+    setSessionManagerOpen(false)
+    setFlutterRunnerOpen(false)
+    setResearchBrowserOpen(false)
+    setFlutterCodeEditorOpen(false)
+    setLaTeXEditorOpen(false)
+
+    // Reset all minimized states
+    setFileManagerMinimized(false)
+    setCalendarMinimized(false)
+    setClockMinimized(false)
+    setGeminiChatMinimized(false)
+    setSessionManagerMinimized(false)
+    setFlutterRunnerMinimized(false)
+    setResearchBrowserMinimized(false)
+    setFlutterCodeEditorMinimized(false)
+    setLaTeXEditorMinimized(false)
+
+    // Reset window z-indices
+    setWindowZIndices({})
+    setGlobalZIndex(1000)
+  }
 
   const openFileManager = (path: string) => {
     console.log('Opening File Manager with path:', path)
     setCurrentPath(path)
     setFileManagerOpen(true)
     setFileManagerMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, fileManager: getNextZIndex() }))
   }
 
   const closeFileManager = () => {
@@ -99,6 +140,7 @@ export function Desktop() {
     console.log('Opening Calendar')
     setCalendarOpen(true)
     setCalendarMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, calendar: getNextZIndex() }))
   }
 
   const closeCalendar = () => {
@@ -109,6 +151,7 @@ export function Desktop() {
   const openClock = () => {
     setClockOpen(true)
     setClockMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, clock: getNextZIndex() }))
   }
 
   const closeClock = () => {
@@ -122,6 +165,7 @@ export function Desktop() {
     console.log('Opening Gemini Chat')
     setGeminiChatOpen(true)
     setGeminiChatMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, gemini: getNextZIndex() }))
   }
 
   const closeGeminiChat = () => {
@@ -134,6 +178,7 @@ export function Desktop() {
   const openSessionManager = () => {
     setSessionManagerOpen(true)
     setSessionManagerMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, sessionManager: getNextZIndex() }))
   }
 
   const closeSessionManager = () => {
@@ -145,6 +190,7 @@ export function Desktop() {
     setActiveFlutterApp(appFile)
     setFlutterRunnerOpen(true)
     setFlutterRunnerMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, flutterRunner: getNextZIndex() }))
   }
 
   const closeFlutterRunner = () => {
@@ -156,6 +202,7 @@ export function Desktop() {
   const openResearchBrowser = () => {
     setResearchBrowserOpen(true)
     setResearchBrowserMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, researchBrowser: getNextZIndex() }))
   }
 
   const closeResearchBrowser = () => {
@@ -166,6 +213,7 @@ export function Desktop() {
   const openFlutterCodeEditor = () => {
     setFlutterCodeEditorOpen(true)
     setFlutterCodeEditorMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, flutterCodeEditor: getNextZIndex() }))
   }
 
   const closeFlutterCodeEditor = () => {
@@ -176,6 +224,7 @@ export function Desktop() {
   const openLaTeXEditor = () => {
     setLaTeXEditorOpen(true)
     setLaTeXEditorMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, latexEditor: getNextZIndex() }))
   }
 
   const closeLaTeXEditor = () => {
@@ -566,6 +615,7 @@ export function Desktop() {
         onOpenCalendar={openCalendar}
         onOpenClock={openClock}
         onOpenGeminiChat={openGeminiChat}
+        onCloseAllApps={closeAllApps}
         openApps={{
           files: fileManagerOpen,
           calendar: calendarOpen,
@@ -609,6 +659,7 @@ export function Desktop() {
               onDoubleClick={openClock}
             />
           </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="calendar"
@@ -630,6 +681,7 @@ export function Desktop() {
               onDoubleClick={() => openFileManager('')}
             />
           </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="sessions"
@@ -640,6 +692,7 @@ export function Desktop() {
               onDoubleClick={openSessionManager}
             />
           </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="research"
@@ -650,6 +703,7 @@ export function Desktop() {
               onDoubleClick={openResearchBrowser}
             />
           </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="flutter-editor"
@@ -660,6 +714,7 @@ export function Desktop() {
               onDoubleClick={openFlutterCodeEditor}
             />
           </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="latex-editor"
@@ -672,127 +727,132 @@ export function Desktop() {
           </div>
         </div>
 
-        <AnimatePresence>
-          {fileManagerOpen && !fileManagerMinimized && (
-            <motion.div
-              key="file-manager"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
-              <FileManager
+        {/* Windows Container */}
+        <div className="fixed inset-0 top-8 pointer-events-none" style={{ position: 'fixed', top: '32px', left: 0, right: 0, bottom: 0 }}>
+          <AnimatePresence>
+            {fileManagerOpen && (
+              <motion.div
+                key="file-manager"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: fileManagerMinimized ? 0 : 1,
+                  scale: fileManagerMinimized ? 0.9 : 1,
+                  y: fileManagerMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: fileManagerMinimized ? 'none' : 'auto',
+                  display: fileManagerMinimized ? 'none' : 'block'
+                }}
+              >
+                <FileManager
                 currentPath={currentPath}
                 onNavigate={setCurrentPath}
                 onClose={closeFileManager}
                 onOpenFlutterApp={openFlutterRunner}
-                onMinimize={() => setFileManagerMinimized(true)}
-                sessionId={userSession}
-                onOpenApp={handleOpenApp}
-              />
-            </motion.div>
-          )}
-
-          {calendarOpen && !calendarMinimized && (
-            <motion.div
-              key="calendar"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
-              <Calendar onClose={closeCalendar} onMinimize={() => setCalendarMinimized(true)} />
-            </motion.div>
-          )}
-
-          {clockOpen && !clockMinimized && (
-            <motion.div
-              key="clock"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
-              <Clock onClose={closeClock} onMinimize={() => setClockMinimized(true)} />
-            </motion.div>
-          )}
-
-
-
-
-
-          {sessionManagerOpen && sessionInitialized && !sessionManagerMinimized && (
-            <motion.div
-              key="session-manager"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
+                  onMinimize={() => setFileManagerMinimized(true)}
+                  onFocus={() => bringWindowToFront('fileManager')}
+                  zIndex={windowZIndices.fileManager || 1000}
+                  sessionId={userSession}
+                  onOpenApp={handleOpenApp}
+                />
+              </motion.div>
+            )}
+
+            {calendarOpen && (
+              <motion.div
+                key="calendar"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: calendarMinimized ? 0 : 1,
+                  scale: calendarMinimized ? 0.9 : 1,
+                  y: calendarMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: calendarMinimized ? 'none' : 'auto',
+                  display: calendarMinimized ? 'none' : 'block'
+                }}
+              >
+                <Calendar
+                  onClose={closeCalendar}
+                  onMinimize={() => setCalendarMinimized(true)}
+                  onFocus={() => bringWindowToFront('calendar')}
+                  zIndex={windowZIndices.calendar || 1000}
+                />
+              </motion.div>
+            )}
+
+            {clockOpen && (
+              <motion.div
+                key="clock"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: clockMinimized ? 0 : 1,
+                  scale: clockMinimized ? 0.9 : 1,
+                  y: clockMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: clockMinimized ? 'none' : 'auto',
+                  display: clockMinimized ? 'none' : 'block'
+                }}
+              >
+                <Clock
+                  onClose={closeClock}
+                  onMinimize={() => setClockMinimized(true)}
+                  onFocus={() => bringWindowToFront('clock')}
+                  zIndex={windowZIndices.clock || 1000}
+                />
+              </motion.div>
+            )}
+
+
+
+            {geminiChatOpen && (
+              <motion.div
+                key="gemini"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: geminiChatMinimized ? 0 : 1,
+                  scale: geminiChatMinimized ? 0.9 : 1,
+                  y: geminiChatMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: geminiChatMinimized ? 'none' : 'auto',
+                  display: geminiChatMinimized ? 'none' : 'block'
+                }}
+              >
+                <GeminiChat
+                  onClose={closeGeminiChat}
+                  onMinimize={() => setGeminiChatMinimized(true)}
+                  onFocus={() => bringWindowToFront('gemini')}
+                  zIndex={windowZIndices.gemini || 1000}
+                />
+              </motion.div>
+            )}
+
+            {sessionManagerOpen && sessionInitialized && (
+              <motion.div
+                key="session-manager"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: sessionManagerMinimized ? 0 : 1,
+                  scale: sessionManagerMinimized ? 0.9 : 1,
+                  y: sessionManagerMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: sessionManagerMinimized ? 'none' : 'auto',
+                  display: sessionManagerMinimized ? 'none' : 'block'
+                }}
+              >
               <SessionManagerWindow
                 onClose={closeSessionManager}
                 sessionId={userSession}
@@ -802,30 +862,22 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {flutterRunnerOpen && activeFlutterApp && !flutterRunnerMinimized && (
-            <motion.div
-              key="flutter-runner"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
+            {flutterRunnerOpen && activeFlutterApp && (
+              <motion.div
+                key="flutter-runner"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: flutterRunnerMinimized ? 0 : 1,
+                  scale: flutterRunnerMinimized ? 0.9 : 1,
+                  y: flutterRunnerMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: flutterRunnerMinimized ? 'none' : 'auto',
+                  display: flutterRunnerMinimized ? 'none' : 'block'
+                }}
+              >
               <FlutterRunner
                 initialCode={activeFlutterApp?.dartCode}
                 sessionId={userSession}
@@ -838,28 +890,20 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {researchBrowserOpen && !researchBrowserMinimized && (
+          {researchBrowserOpen && (
             <motion.div
               key="research-browser"
-              initial={{ scale: 0.9, opacity: 0 }}
+              initial={{ opacity: 0, scale: 0.95 }}
               animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+                opacity: researchBrowserMinimized ? 0 : 1,
+                scale: researchBrowserMinimized ? 0.9 : 1,
+                y: researchBrowserMinimized ? 100 : 0,
               }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
               style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
+                pointerEvents: researchBrowserMinimized ? 'none' : 'auto',
+                display: researchBrowserMinimized ? 'none' : 'block'
               }}
             >
               <ResearchBrowser
@@ -869,90 +913,47 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {flutterCodeEditorOpen && !flutterCodeEditorMinimized && (
+          {flutterCodeEditorOpen && (
             <motion.div
               key="flutter-code-editor"
-              initial={{ scale: 0.9, opacity: 0 }}
+              initial={{ opacity: 0, scale: 0.95 }}
               animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+                opacity: flutterCodeEditorMinimized ? 0 : 1,
+                scale: flutterCodeEditorMinimized ? 0.9 : 1,
+                y: flutterCodeEditorMinimized ? 100 : 0,
               }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
               style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
+                pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto',
+                display: flutterCodeEditorMinimized ? 'none' : 'block'
               }}
             >
               <FlutterCodeEditor onClose={closeFlutterCodeEditor} onMinimize={() => setFlutterCodeEditorMinimized(true)} />
             </motion.div>
           )}
 
-          {latexEditorOpen && !latexEditorMinimized && (
+          {latexEditorOpen && (
             <motion.div
               key="latex-editor"
-              initial={{ scale: 0.9, opacity: 0 }}
+              initial={{ opacity: 0, scale: 0.95 }}
               animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+                opacity: latexEditorMinimized ? 0 : 1,
+                scale: latexEditorMinimized ? 0.9 : 1,
+                y: latexEditorMinimized ? 100 : 0,
               }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
               style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
+                pointerEvents: latexEditorMinimized ? 'none' : 'auto',
+                display: latexEditorMinimized ? 'none' : 'block'
               }}
             >
               <LaTeXEditor onClose={closeLaTeXEditor} sessionId={userSession} onMinimize={() => setLaTeXEditorMinimized(true)} />
             </motion.div>
           )}
-          {geminiChatOpen && !geminiChatMinimized && (
-            <motion.div
-              key="gemini"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{
-                scale: 1,
-                opacity: 1,
-                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
-              }}
-              exit={{
-                scale: 0.2,
-                opacity: 0,
-                y: "80vh",
-                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
-                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
-              }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="absolute"
-              style={{
-                transformOrigin: 'bottom center',
-                pointerEvents: 'auto',
-                zIndex: 1000
-              }}
-            >
-              <GeminiChat onClose={closeGeminiChat} onMinimize={() => setGeminiChatMinimized(true)} />
-            </motion.div>
-          )}
         </AnimatePresence>
-
+        </div>
       </div>
 
       {/* Spotlight Search */}

app/components/Dock.tsx

@@ -31,6 +31,7 @@ interface DockProps {
   onOpenClock: () => void
 
   onOpenGeminiChat: () => void
+  onCloseAllApps?: () => void
   openApps: { [key: string]: boolean }
   minimizedApps?: MinimizedApp[]
 }
@@ -82,6 +83,7 @@ export function Dock({
   onOpenClock,
 
   onOpenGeminiChat,
+  onCloseAllApps,
   openApps,
   minimizedApps = []
 }: DockProps) {
@@ -173,7 +175,7 @@ export function Dock({
             </div>
           }
           label="Trash"
-          onClick={() => { }}
+          onClick={() => onCloseAllApps?.()}
           className=""
           mouseX={mouseX}
         />

app/components/Window.tsx

@@ -10,11 +10,13 @@ interface WindowProps {
   onClose: () => void;
   onMinimize?: () => void;
   onMaximize?: () => void;
+  onFocus?: () => void;
   children: ReactNode;
   width?: number | string;
   height?: number | string;
   x?: number;
   y?: number;
+  zIndex?: number;
   resizable?: boolean;
   className?: string;
   headerClassName?: string;
@@ -28,23 +30,24 @@ const Window: React.FC<WindowProps> = ({
   onClose,
   onMinimize,
   onMaximize,
+  onFocus,
   children,
   width = 800,
   height = 600,
   x = 100,
   y = 100,
+  zIndex = 1000,
   resizable = true,
   className = '',
   headerClassName = '',
   darkMode = false,
 }) => {
   const [isMaximized, setIsMaximized] = React.useState(false);
-  const [previousSize, setPreviousSize] = React.useState({ width, height, x, y });
-  const [currentPosition, setCurrentPosition] = React.useState({ x, y });
+  const [previousSize, setPreviousSize] = React.useState({ width, height, x, y: Math.max(y, 32) });
+  const [currentPosition, setCurrentPosition] = React.useState({ x, y: Math.max(y, 32) });
   const [currentSize, setCurrentSize] = React.useState({ width, height });
   const [isMobile, setIsMobile] = React.useState(false);
   const [isDraggingOrResizing, setIsDraggingOrResizing] = React.useState(false);
-  const [zIndex, setZIndex] = React.useState(1000);
 
   // Detect mobile device
   useEffect(() => {
@@ -99,17 +102,19 @@ const Window: React.FC<WindowProps> = ({
     if (onMaximize) onMaximize();
   };
 
-  // Global z-index counter
+  // Bring window to front
   const bringToFront = () => {
-    // Increment z-index when window is clicked or dragged
-    setZIndex(Date.now());
+    // Call onFocus to bring window to front
+    if (onFocus) {
+      onFocus();
+    }
   };
 
   // Calculate Rnd props based on state
   const rndProps = isMaximized ? {
-    position: { x: 0, y: 40 }, // 40px for TopBar offset
+    position: { x: 0, y: 32 }, // 32px for TopBar offset (h-8 = 32px)
     size: { width: typeof window !== 'undefined' ? window.innerWidth : '100vw',
-           height: typeof window !== 'undefined' ? window.innerHeight - 40 : 'calc(100vh - 40px)' },
+           height: typeof window !== 'undefined' ? window.innerHeight - 32 : 'calc(100vh - 32px)' },
     disableDragging: true,
     enableResizing: false
   } : {
@@ -124,7 +129,6 @@ const Window: React.FC<WindowProps> = ({
       {...rndProps}
       minWidth={400}
       minHeight={300}
-      bounds="parent"
       dragHandleClassName="window-drag-handle"
       enableResizing={!isMaximized && resizable}
       disableDragging={isMaximized}
@@ -133,9 +137,19 @@ const Window: React.FC<WindowProps> = ({
         setIsDraggingOrResizing(true);
         bringToFront();
       }}
+      onDrag={(e, d) => {
+        // Prevent dragging above TopBar during drag
+        if (d.y < 32) {
+          return false;
+        }
+      }}
       onDragStop={(e, d) => {
         setIsDraggingOrResizing(false);
-        if (!isMaximized) setCurrentPosition({ x: d.x, y: d.y });
+        if (!isMaximized) {
+          // Ensure window doesn't go above TopBar
+          const newY = Math.max(d.y, 32);
+          setCurrentPosition({ x: d.x, y: newY });
+        }
       }}
       onResizeStart={() => {
         setIsDraggingOrResizing(true);
@@ -148,14 +162,17 @@ const Window: React.FC<WindowProps> = ({
             width: ref.offsetWidth,
             height: ref.offsetHeight,
           });
-          setCurrentPosition(position);
+          // Ensure window doesn't go above TopBar after resize
+          const newY = Math.max(position.y, 32);
+          setCurrentPosition({ ...position, y: newY });
         }
       }}
       className="absolute"
-      style={{ zIndex }}
+      style={{ zIndex: zIndex || 1000 }}
     >
       <div
         className={`h-full macos-window flex flex-col ${className} ${windowClass}`}
+        onMouseDown={bringToFront}
       >
         <div
           className={`window-drag-handle h-10 flex items-center px-4 space-x-4 border-b cursor-move ${headerClass} ${headerClassName}`}