some changes made

app/api/sessions/verify/route.ts

@@ -4,20 +4,21 @@ import { SessionManager } from '@/lib/sessionManager';
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { sessionKey } = body;
+    const { sessionKey, sessionId } = body;
+    const idToVerify = sessionId || sessionKey;
 
-    if (!sessionKey) {
+    if (!idToVerify) {
       return NextResponse.json(
-        { success: false, error: 'Session key is required' },
+        { success: false, error: 'Session ID or key is required' },
         { status: 400 }
       );
     }
 
     const sessionManager = SessionManager.getInstance();
-    const isValid = await sessionManager.validateSession(sessionKey);
+    const isValid = await sessionManager.validateSession(idToVerify);
 
     if (isValid) {
-      const session = await sessionManager.getSession(sessionKey);
+      const session = await sessionManager.getSession(idToVerify);
       return NextResponse.json({
         success: true,
         valid: true,

app/components/AboutModal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
-import { X, Info, HardDrive, Cpu, Globe, Key } from '@phosphor-icons/react'
+import React from 'react'
+import { X } from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
 
 interface AboutModalProps {
@@ -10,45 +10,6 @@ interface AboutModalProps {
 }
 
 export function AboutModal({ isOpen, onClose }: AboutModalProps) {
-  const [systemId, setSystemId] = useState<string>('')
-  const [publicPath, setPublicPath] = useState<string>('')
-  const [tempPath, setTempPath] = useState<string>('')
-
-  useEffect(() => {
-    // Generate unique system ID based on browser fingerprint
-    const generateSystemId = () => {
-      const nav = window.navigator
-      const screen = window.screen
-      const fingerprint = [
-        nav.userAgent,
-        nav.language,
-        screen.colorDepth,
-        screen.width,
-        screen.height,
-        new Date().getTimezoneOffset(),
-        nav.hardwareConcurrency,
-        nav.platform
-      ].join('|')
-
-      // Create a simple hash
-      let hash = 0
-      for (let i = 0; i < fingerprint.length; i++) {
-        const char = fingerprint.charCodeAt(i)
-        hash = ((hash << 5) - hash) + char
-        hash = hash & hash // Convert to 32-bit integer
-      }
-
-      // Convert to hex and make it look like a system ID
-      const hexHash = Math.abs(hash).toString(16).toUpperCase()
-      return `REUBEN-${hexHash.substring(0, 4)}-${hexHash.substring(4, 8)}-${Date.now().toString(36).toUpperCase()}`
-    }
-
-    // Set system paths
-    setSystemId(generateSystemId())
-    setPublicPath('E:\\mpc-hackathon\\public')
-    setTempPath(`E:\\mpc-hackathon\\data\\temp_${Date.now()}`)
-  }, [])
-
   if (!isOpen) return null
 
   return (
@@ -63,107 +24,22 @@ export function AboutModal({ isOpen, onClose }: AboutModalProps) {
             transition={{ duration: 0.2 }}
             className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[101]"
           >
-            <div className="bg-white rounded-2xl shadow-2xl p-8 min-w-[500px] max-w-[600px]">
-              {/* Logo and Title */}
-              <div className="text-center mb-6">
-                <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center">
-                  <span className="text-white font-bold text-3xl">R</span>
-                </div>
-                <h1 className="text-3xl font-bold text-gray-900">Reuben OS</h1>
-                <p className="text-gray-500 mt-2">Advanced Desktop Environment</p>
-                <p className="text-sm text-gray-400 mt-1">Version 1.0.0</p>
+            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 w-[400px] border border-white/40 text-center relative">
+              {/* Logo */}
+              <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
+                <span className="text-white font-bold text-4xl">R</span>
               </div>
 
-              {/* System Information */}
-              <div className="space-y-4 mb-6">
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex items-center mb-2">
-                    <Key className="text-purple-600 mr-2" size={20} weight="fill" />
-                    <span className="font-semibold text-gray-700">System ID</span>
-                  </div>
-                  <code className="text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-mono block">
-                    {systemId || 'Generating...'}
-                  </code>
-                </div>
-
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex items-center mb-2">
-                    <HardDrive className="text-blue-600 mr-2" size={20} weight="fill" />
-                    <span className="font-semibold text-gray-700">Storage Paths</span>
-                  </div>
-                  <div className="space-y-2">
-                    <div>
-                      <span className="text-xs text-gray-500">Public:</span>
-                      <code className="text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-mono block mt-1">
-                        {publicPath}
-                      </code>
-                    </div>
-                    <div>
-                      <span className="text-xs text-gray-500">Temp:</span>
-                      <code className="text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-mono block mt-1">
-                        {tempPath}
-                      </code>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex items-center mb-2">
-                    <Cpu className="text-green-600 mr-2" size={20} weight="fill" />
-                    <span className="font-semibold text-gray-700">Capabilities</span>
-                  </div>
-                  <div className="text-xs text-gray-600 space-y-1">
-                    <div className="flex items-center">
-                      <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
-                      Python Code Execution (via MCP)
-                    </div>
-                    <div className="flex items-center">
-                      <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
-                      HTML/CSS/JS Preview
-                    </div>
-                    <div className="flex items-center">
-                      <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
-                      File Management System
-                    </div>
-                    <div className="flex items-center">
-                      <span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
-                      Claude AI Integration
-                    </div>
-                    <div className="flex items-center">
-                      <span className="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
-                      Flutter/Dart (Coming Soon)
-                    </div>
-                  </div>
-                </div>
+              {/* Title */}
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">Reuben OS</h1>
+              <p className="text-gray-500 text-sm mb-6">Version 1.0.0</p>
 
-                <div className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex items-center mb-2">
-                    <Globe className="text-indigo-600 mr-2" size={20} weight="fill" />
-                    <span className="font-semibold text-gray-700">MCP Server</span>
-                  </div>
-                  <div className="text-xs text-gray-600">
-                    <div>Status: <span className="text-green-600 font-semibold">Connected</span></div>
-                    <div>Endpoint: <code className="font-mono">reuben-os</code></div>
-                    <div>Tools: 25+ available</div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Footer */}
-              <div className="text-center text-xs text-gray-400 mb-4">
-                <p>© 2024 Reuben OS. All rights reserved.</p>
-                <p className="mt-1">Built with Next.js, React, and MCP Technology</p>
+              {/* Creator Info */}
+              <div className="text-gray-600 font-medium text-sm">
+                Created by a huggingface user Reubencf
               </div>
 
               {/* Close Button */}
-              <button
-                onClick={onClose}
-                className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
-              >
-                Close
-              </button>
-
-              {/* X button in corner */}
               <button
                 onClick={onClose}
                 className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"

app/components/CalendarWidget.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import React, { useState } from 'react'
+import { CaretLeft, CaretRight } from '@phosphor-icons/react'
+import { motion } from 'framer-motion'
+
+export function CalendarWidget() {
+    const [currentDate, setCurrentDate] = useState(new Date())
+    const today = new Date()
+
+    const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ]
+
+    const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+
+    const getDaysInMonth = (date: Date) => {
+        const year = date.getFullYear()
+        const month = date.getMonth()
+        const firstDay = new Date(year, month, 1)
+        const lastDay = new Date(year, month + 1, 0)
+        const daysInMonth = lastDay.getDate()
+        const startingDayOfWeek = firstDay.getDay()
+
+        const days: (number | null)[] = []
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            days.push(null)
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(i)
+        }
+        return days
+    }
+
+    const days = getDaysInMonth(currentDate)
+
+    const isToday = (day: number | null) => {
+        if (!day) return false
+        return (
+            day === today.getDate() &&
+            currentDate.getMonth() === today.getMonth() &&
+            currentDate.getFullYear() === today.getFullYear()
+        )
+    }
+
+    const previousMonth = () => {
+        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1))
+    }
+
+    const nextMonth = () => {
+        setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1))
+    }
+
+    return (
+        <div className="w-80 bg-white/80 backdrop-blur-xl rounded-xl shadow-2xl border border-white/40 p-4 text-gray-800">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-4">
+                <div className="font-bold text-lg">
+                    {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
+                </div>
+                <div className="flex space-x-1">
+                    <button
+                        onClick={previousMonth}
+                        className="p-1 hover:bg-gray-200/50 rounded-full transition-colors"
+                    >
+                        <CaretLeft size={16} weight="bold" />
+                    </button>
+                    <button
+                        onClick={nextMonth}
+                        className="p-1 hover:bg-gray-200/50 rounded-full transition-colors"
+                    >
+                        <CaretRight size={16} weight="bold" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Days of Week */}
+            <div className="grid grid-cols-7 mb-2">
+                {daysOfWeek.map((day, i) => (
+                    <div key={i} className="text-center text-xs font-semibold text-gray-500">
+                        {day}
+                    </div>
+                ))}
+            </div>
+
+            {/* Calendar Grid */}
+            <div className="grid grid-cols-7 gap-1">
+                {days.map((day, index) => (
+                    <div
+                        key={index}
+                        className={`
+              aspect-square flex items-center justify-center text-sm rounded-full
+              ${day ? 'cursor-default' : ''}
+              ${isToday(day) ? 'bg-blue-500 text-white font-bold shadow-md' : 'text-gray-700'}
+              ${day && !isToday(day) ? 'hover:bg-gray-200/50' : ''}
+            `}
+                    >
+                        {day}
+                    </div>
+                ))}
+            </div>
+
+            {/* Event Dots (Mock) */}
+            <div className="mt-4 pt-3 border-t border-gray-200/50">
+                <div className="text-xs font-semibold text-gray-500 mb-2">UPCOMING EVENTS</div>
+                <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                        <div className="w-1 h-8 rounded-full bg-blue-500"></div>
+                        <div>
+                            <div className="text-xs font-bold">Team Meeting</div>
+                            <div className="text-[10px] text-gray-500">10:00 AM - 11:00 AM</div>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <div className="w-1 h-8 rounded-full bg-purple-500"></div>
+                        <div>
+                            <div className="text-xs font-bold">Project Review</div>
+                            <div className="text-[10px] text-gray-500">2:00 PM - 3:30 PM</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

app/components/MatrixRain.tsx

@@ -11,6 +11,7 @@ interface MatrixRainProps {
 export function MatrixRain({ isActive, onComplete }: MatrixRainProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const [showText, setShowText] = useState(false)
+  const requestRef = useRef<number>(0)
 
   useEffect(() => {
     if (!isActive) return
@@ -22,214 +23,214 @@ export function MatrixRain({ isActive, onComplete }: MatrixRainProps) {
     if (!ctx) return
 
     // Set canvas size
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth
+      canvas.height = window.innerHeight
+    }
+    resizeCanvas()
+    window.addEventListener('resize', resizeCanvas)
+
+    // Configuration
+    const fontSize = 16
+    const columns = Math.ceil(canvas.width / fontSize)
 
-    // Matrix rain configuration
-    const fontSize = 14
-    const columns = Math.floor(canvas.width / fontSize)
-    const drops: number[] = []
+    // State for each column
+    // y: current vertical position
+    // speed: speed of the drop
+    // chars: array of characters in this column (for potential future complex effects, currently just generating on fly)
+    // lastDraw: timestamp of last update to control speed
+    const drops: { y: number; speed: number; lastDraw: number }[] = []
 
-    // Initialize drops
     for (let i = 0; i < columns; i++) {
-      drops[i] = Math.random() * -100
+      drops[i] = {
+        y: Math.random() * -1000, // Start above screen randomly
+        speed: Math.random() * 0.5 + 0.5, // Random speed between 0.5 and 1.0
+        lastDraw: 0
+      }
     }
 
-    // Characters to use in the rain
-    const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-=[]{}|;:<>,.?/~`'
-    const matrixArray = matrix.split('')
+    // Katakana + Latin + Numbers
+    const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'
+    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+    const nums = '0123456789'
+    const alphabet = katakana + latin + nums
 
-    // Special word to display
-    const specialWord = 'REUBENOS'
-    let specialWordTimer: NodeJS.Timeout
+    let lastTime = 0
+    const fps = 30
+    const frameInterval = 1000 / fps
 
-    // Show the special text after 1.5 seconds
-    if (isActive) {
-      specialWordTimer = setTimeout(() => {
-        setShowText(true)
-      }, 1500)
-    }
-
-    // Drawing function
-    function draw() {
+    const draw = (timestamp: number) => {
       if (!ctx || !canvas) return
 
-      // Semi-transparent black to create fade effect
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      const deltaTime = timestamp - lastTime
 
-      // Green text
-      ctx.fillStyle = '#0F0'
-      ctx.font = `${fontSize}px monospace`
+      if (deltaTime > frameInterval) {
+        lastTime = timestamp - (deltaTime % frameInterval)
 
-      // Draw drops
-      for (let i = 0; i < drops.length; i++) {
-        // Random character
-        const text = matrixArray[Math.floor(Math.random() * matrixArray.length)]
+        // Semi-transparent black to create fade effect
+        // Adjust opacity for trail length (lower = longer trails)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
 
-        // Draw the character
-        ctx.fillText(text, i * fontSize, drops[i] * fontSize)
+        ctx.font = `${fontSize}px monospace`
+        ctx.textAlign = 'center'
 
-        // Reset drop when it goes off screen
-        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
-          drops[i] = 0
-        }
+        for (let i = 0; i < drops.length; i++) {
+          const drop = drops[i]
 
-        // Move drop down
-        drops[i]++
-      }
-    }
+          // Draw character
+          const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length))
+          const x = i * fontSize
 
-    // Animation loop
-    const interval = setInterval(draw, 35)
+          // Glowing head effect
+          ctx.fillStyle = '#FFF' // White head
+          ctx.shadowBlur = 8
+          ctx.shadowColor = '#FFF'
+          ctx.fillText(text, x, drop.y * fontSize)
 
-    // Cleanup
-    return () => {
-      clearInterval(interval)
-      clearTimeout(specialWordTimer)
-      setShowText(false)
-    }
-  }, [isActive])
+          // Reset shadow for next characters (though we are clearing screen, this is for the trail effect if we were drawing full columns)
+          ctx.shadowBlur = 0
 
-  // Handle window resize
-  useEffect(() => {
-    if (!isActive) return
+          // Draw the trail character (slightly above the head)
+          // Actually, the fade effect handles the trail. We just need to draw the new head.
+          // To make it look "better", we can draw a green character at the same spot in the NEXT frame, 
+          // but the fade rect handles the "turning green" part naturally if we just draw white.
+          // However, standard matrix is: Head is white, immediate trail is bright green, tail is dark green.
+          // With the fade rect method, everything drawn turns darker green over time.
+          // So drawing White is correct for the head.
 
-    const handleResize = () => {
-      const canvas = canvasRef.current
-      if (canvas) {
-        canvas.width = window.innerWidth
-        canvas.height = window.innerHeight
+          // Let's also draw a green character strictly at the previous position to ensure it stays green and not just faded white
+          ctx.fillStyle = '#0F0'
+          ctx.fillText(text, x, (drop.y - 1) * fontSize)
+
+          // Move drop
+          if (drop.y * fontSize > canvas.height && Math.random() > 0.975) {
+            drop.y = 0
+            drop.speed = Math.random() * 0.5 + 0.5 // New random speed
+          }
+
+          drop.y += drop.speed
+        }
       }
+
+      requestRef.current = requestAnimationFrame(draw)
     }
 
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
+    requestRef.current = requestAnimationFrame(draw)
+
+    // Special text timer
+    const specialWordTimer = setTimeout(() => {
+      setShowText(true)
+    }, 1500)
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas)
+      if (requestRef.current) cancelAnimationFrame(requestRef.current)
+      clearTimeout(specialWordTimer)
+    }
   }, [isActive])
 
-  // Auto-complete after 5 seconds
+  // Auto-complete
   useEffect(() => {
     if (!isActive) return
-
     const timer = setTimeout(() => {
-      if (onComplete) {
-        onComplete()
-      }
-    }, 5000)
-
+      onComplete?.()
+    }, 8000) // Extended to 8s to enjoy the view
     return () => clearTimeout(timer)
   }, [isActive, onComplete])
 
   return (
     <AnimatePresence>
       {isActive && (
-        <>
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-            className="fixed inset-0 z-[9999] bg-black"
-          >
-            <canvas
-              ref={canvasRef}
-              className="absolute inset-0"
-              style={{ display: 'block' }}
-            />
-
-            {/* REUBENOS Text */}
-            <AnimatePresence>
-              {showText && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 1 }}
+          className="fixed inset-0 z-[9999] bg-black cursor-pointer"
+          onClick={onComplete}
+        >
+          <canvas
+            ref={canvasRef}
+            className="absolute inset-0 block"
+          />
+
+          <AnimatePresence>
+            {showText && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.8, filter: 'blur(10px)' }}
+                animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+                exit={{ opacity: 0, scale: 1.2, filter: 'blur(20px)' }}
+                transition={{ duration: 1.5, ease: "easeOut" }}
+                className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-10"
+              >
+                <div className="relative">
+                  <motion.h1
+                    className="text-transparent font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl"
+                    style={{
+                      WebkitTextStroke: '2px #0F0',
+                      textShadow: '0 0 20px rgba(0, 255, 0, 0.5)'
+                    }}
+                    animate={{
+                      textShadow: [
+                        '0 0 20px rgba(0, 255, 0, 0.5)',
+                        '0 0 40px rgba(0, 255, 0, 0.8)',
+                        '0 0 20px rgba(0, 255, 0, 0.5)'
+                      ]
+                    }}
+                    transition={{ duration: 2, repeat: Infinity }}
+                  >
+                    REUBENOS
+                  </motion.h1>
+
+                  {/* Glitch effect layers */}
+                  <motion.h1
+                    className="absolute top-0 left-0 text-[#0F0] font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl opacity-50 mix-blend-screen"
+                    animate={{
+                      x: [-2, 2, -2],
+                      y: [1, -1, 1],
+                      opacity: [0.5, 0.3, 0.5]
+                    }}
+                    transition={{ duration: 0.2, repeat: Infinity, repeatType: "mirror" }}
+                  >
+                    REUBENOS
+                  </motion.h1>
+                  <motion.h1
+                    className="absolute top-0 left-0 text-[#F00] font-mono font-bold tracking-[0.2em] text-6xl md:text-8xl lg:text-9xl opacity-30 mix-blend-screen"
+                    animate={{
+                      x: [2, -2, 2],
+                      y: [-1, 1, -1],
+                    }}
+                    transition={{ duration: 0.3, repeat: Infinity, repeatType: "mirror" }}
+                  >
+                    REUBENOS
+                  </motion.h1>
+                </div>
+
                 <motion.div
-                  initial={{ opacity: 0, scale: 0.5 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={{
-                    duration: 0.8,
-                    ease: 'easeOut'
-                  }}
-                  className="absolute inset-0 flex items-center justify-center pointer-events-none"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.5, duration: 0.8 }}
+                  className="mt-8 flex flex-col items-center gap-2"
                 >
-                  <div className="text-center">
-                    <motion.h1
-                      className="text-[#0F0] font-mono font-bold select-none"
-                      style={{
-                        fontSize: 'clamp(3rem, 10vw, 8rem)',
-                        textShadow: `
-                          0 0 10px #0F0,
-                          0 0 20px #0F0,
-                          0 0 30px #0F0,
-                          0 0 40px #0A0,
-                          0 0 70px #0A0,
-                          0 0 80px #0A0,
-                          0 0 100px #0A0,
-                          0 0 150px #0A0
-                        `,
-                        letterSpacing: '0.2em'
-                      }}
-                      initial={{ y: 20 }}
-                      animate={{
-                        y: [20, -10, 0],
-                        textShadow: [
-                          `0 0 10px #0F0, 0 0 20px #0F0, 0 0 30px #0F0, 0 0 40px #0A0, 0 0 70px #0A0, 0 0 80px #0A0, 0 0 100px #0A0, 0 0 150px #0A0`,
-                          `0 0 20px #0F0, 0 0 30px #0F0, 0 0 40px #0F0, 0 0 50px #0A0, 0 0 80px #0A0, 0 0 90px #0A0, 0 0 120px #0A0, 0 0 180px #0A0`,
-                          `0 0 10px #0F0, 0 0 20px #0F0, 0 0 30px #0F0, 0 0 40px #0A0, 0 0 70px #0A0, 0 0 80px #0A0, 0 0 100px #0A0, 0 0 150px #0A0`
-                        ]
-                      }}
-                      transition={{
-                        duration: 2,
-                        repeat: Infinity,
-                        repeatType: 'reverse',
-                        ease: 'easeInOut'
-                      }}
-                    >
-                      REUBENOS
-                    </motion.h1>
-
-                    <motion.div
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: [0, 1, 0] }}
-                      transition={{
-                        duration: 1.5,
-                        repeat: Infinity,
-                        repeatDelay: 0.5
-                      }}
-                      className="mt-8 text-[#0F0] font-mono text-xl"
-                      style={{
-                        textShadow: '0 0 5px #0F0, 0 0 10px #0F0'
-                      }}
-                    >
-                      SYSTEM BREACH DETECTED
-                    </motion.div>
-
-                    <motion.div
-                      initial={{ width: 0 }}
-                      animate={{ width: '100%' }}
-                      transition={{
-                        duration: 3,
-                        ease: 'linear'
-                      }}
-                      className="mt-4 h-1 bg-gradient-to-r from-transparent via-[#0F0] to-transparent mx-auto max-w-md"
-                      style={{
-                        boxShadow: '0 0 10px #0F0'
-                      }}
-                    />
+                  <div className="text-[#0F0] font-mono text-xl tracking-widest uppercase">
+                    System Breach Detected
+                  </div>
+                  <div className="h-px w-64 bg-gradient-to-r from-transparent via-[#0F0] to-transparent animate-pulse" />
+                  <div className="text-[#0F0] font-mono text-xs opacity-70 mt-2">
+                    ACCESS GRANTED_
                   </div>
                 </motion.div>
-              )}
-            </AnimatePresence>
-
-            {/* Click to exit hint */}
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 3, duration: 1 }}
-              className="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-[#0F0] font-mono text-sm opacity-50"
-            >
-              Click anywhere to exit the Matrix
-            </motion.div>
-          </motion.div>
-        </>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div className="absolute bottom-8 left-0 right-0 text-center">
+            <p className="text-[#0F0] font-mono text-xs opacity-40 animate-pulse">
+              [ CLICK TO INITIALIZE ]
+            </p>
+          </div>
+        </motion.div>
       )}
     </AnimatePresence>
   )

app/components/SessionManager.tsx

@@ -63,10 +63,10 @@ export function SessionManager() {
 
       if (data.success) {
         setCurrentSession(data.session)
-        setSessionKey(data.session.key)
+        setSessionKey(data.session.id) // Use ID as key for consistency
         setSuccess('Session created successfully!')
-        localStorage.setItem('reubenOS_sessionKey', data.session.key)
-        await loadSessionFiles(data.session.key)
+        localStorage.setItem('reubenOS_sessionId', data.session.id)
+        await loadSessionFiles(data.session.id)
       } else {
         setError(data.error || 'Failed to create session')
       }
@@ -286,10 +286,10 @@ export function SessionManager() {
 
   // Load saved session on mount
   useEffect(() => {
-    const savedKey = localStorage.getItem('reubenOS_sessionKey')
-    if (savedKey) {
-      setSessionKey(savedKey)
-      loadSessionFiles(savedKey)
+    const savedId = localStorage.getItem('reubenOS_sessionId')
+    if (savedId) {
+      setSessionKey(savedId)
+      loadSessionFiles(savedId)
     }
     loadPublicFiles()
   }, [])
@@ -309,6 +309,21 @@ export function SessionManager() {
     }
   }, [error])
 
+  // Clear messages after 3 seconds
+  useEffect(() => {
+    if (success) {
+      const timer = setTimeout(() => setSuccess(null), 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [success])
+
+  useEffect(() => {
+    if (error) {
+      const timer = setTimeout(() => setError(null), 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [error])
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-900/20 via-black to-purple-900/20 p-8">
       <div className="max-w-6xl mx-auto">
@@ -445,22 +460,20 @@ export function SessionManager() {
           <div className="flex gap-4 mb-6">
             <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})

app/components/SessionManagerWindow.tsx

@@ -1,40 +1,12 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
+import React, { useState } from 'react'
 import {
-  Key,
-  Upload,
-  Download,
-  File,
-  Folder,
-  Globe,
-  Lock,
   Copy,
   Check,
-  X,
-  FileText,
-  Table as FileSpreadsheet,
-  Presentation as FilePresentation,
-  FilePdf,
-  ArrowsClockwise as RefreshCw,
 } from '@phosphor-icons/react'
 import Window from './Window'
 
-interface Session {
-  id: string
-  key: string
-  createdAt: string
-  message?: string
-}
-
-interface FileItem {
-  name: string
-  size: number
-  modified: string
-  created: string
-}
-
 interface SessionManagerWindowProps {
   onClose: () => void
   sessionId: string
@@ -42,244 +14,7 @@ interface SessionManagerWindowProps {
 }
 
 export function SessionManagerWindow({ onClose, sessionId }: SessionManagerWindowProps) {
-  const [files, setFiles] = useState<FileItem[]>([])
-  const [publicFiles, setPublicFiles] = useState<FileItem[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState<string | null>(null)
   const [copiedKey, setCopiedKey] = useState(false)
-  const [copiedId, setCopiedId] = useState(false)
-  const [activeTab, setActiveTab] = useState<'session' | 'public'>('session')
-  const [uploadFile, setUploadFile] = useState<File | null>(null)
-  const [isPublicUpload, setIsPublicUpload] = useState(false)
-  const [sessionValid, setSessionValid] = useState<boolean | null>(null)
-  const [validating, setValidating] = useState(false)
-
-  // Session is automatically created - no manual creation needed!
-
-  // Validate session on component mount
-  useEffect(() => {
-    if (sessionId) {
-      validateSession()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Validate session
-  const validateSession = async () => {
-    setValidating(true)
-    setError(null)
-    try {
-      const response = await fetch('/api/sessions/verify', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ sessionId })
-      })
-      const data = await response.json()
-      
-      if (data.success && data.valid) {
-        setSessionValid(true)
-        setSuccess('✅ Session is VALID! You can safely copy and use this Session ID with Claude Desktop.')
-        setTimeout(() => setSuccess(null), 5000)
-      } else {
-        setSessionValid(false)
-        setError('⚠️ Session is INVALID. The page will auto-refresh in 3 seconds to get a fresh session...')
-        // Auto-refresh the page to get a new valid session
-        setTimeout(() => {
-          window.location.reload()
-        }, 3000)
-      }
-    } catch (err) {
-      setError('❌ Failed to validate session. Refreshing page...')
-      setSessionValid(false)
-      setTimeout(() => {
-        window.location.reload()
-      }, 2000)
-    } finally {
-      setValidating(false)
-    }
-  }
-
-  // Load files for current session
-  const loadSessionFiles = async (key: string) => {
-    try {
-      const response = await fetch('/api/sessions/files', {
-        headers: { 'x-session-key': key }
-      })
-      const data = await response.json()
-
-      if (data.success) {
-        setFiles(data.files || [])
-      }
-    } catch (err) {
-      console.error('Failed to load session files:', err)
-    }
-  }
-
-  // Load public files
-  const loadPublicFiles = async () => {
-    try {
-      const response = await fetch('/api/sessions/files?public=true')
-      const data = await response.json()
-
-      if (data.success) {
-        setPublicFiles(data.files || [])
-      }
-    } catch (err) {
-      console.error('Failed to load public files:', err)
-    }
-  }
-
-  // Handle file upload
-  const handleFileUpload = async () => {
-    if (!uploadFile || !sessionId) {
-      setError('No file selected or session not active')
-      return
-    }
-
-    setLoading(true)
-    setError(null)
-    const formData = new FormData()
-    formData.append('file', uploadFile)
-    formData.append('public', isPublicUpload.toString())
-
-    try {
-      const response = await fetch('/api/sessions/upload', {
-        method: 'POST',
-        headers: { 'x-session-id': sessionId },
-        body: formData
-      })
-      const data = await response.json()
-
-      if (data.success) {
-        setSuccess(`File uploaded successfully: ${data.fileName}`)
-        setUploadFile(null)
-        if (isPublicUpload) {
-          await loadPublicFiles()
-        } else {
-          await loadSessionFiles(sessionId)
-        }
-      } else {
-        setError(data.error || 'Failed to upload file')
-      }
-    } catch (err) {
-      setError('Failed to upload file')
-    }
-    setLoading(false)
-  }
-
-  // Download file
-  const downloadFile = async (fileName: string, isPublic: boolean) => {
-    const url = `/api/sessions/download?file=${encodeURIComponent(fileName)}${isPublic ? '&public=true' : ''}`
-    const headers: HeadersInit = isPublic ? {} : { 'x-session-id': sessionId }
-
-    try {
-      const response = await fetch(url, { headers })
-      if (response.ok) {
-        const blob = await response.blob()
-        const downloadUrl = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = downloadUrl
-        a.download = fileName
-        document.body.appendChild(a)
-        a.click()
-        window.URL.revokeObjectURL(downloadUrl)
-        document.body.removeChild(a)
-        setSuccess(`Downloaded: ${fileName}`)
-      } else {
-        setError('Failed to download file')
-      }
-    } catch (err) {
-      setError('Failed to download file')
-    }
-  }
-
-  // Generate document
-  const generateSampleDocument = async (type: string) => {
-    if (!sessionId) {
-      setError('No active session')
-      return
-    }
-
-    setLoading(true)
-    setError(null)
-
-    const sampleContent: any = {
-      docx: {
-        type: 'docx',
-        fileName: 'sample-document',
-        content: {
-          title: 'Sample Document',
-          content: '# Introduction\n\nThis is a sample document generated by ReubenOS.\n\n## Features\n\n- Session-based isolation\n- Document generation\n- File management\n\n## Conclusion\n\nThank you for using ReubenOS!'
-        }
-      },
-      pdf: {
-        type: 'pdf',
-        fileName: 'sample-report',
-        content: {
-          title: 'Sample PDF Report',
-          content: 'This is a sample PDF report.\n\n# Section 1\n\nLorem ipsum dolor sit amet.\n\n# Section 2\n\nConclusion and summary.'
-        }
-      },
-      ppt: {
-        type: 'ppt',
-        fileName: 'sample-presentation',
-        content: {
-          slides: [
-            { title: 'Welcome', content: 'Welcome to ReubenOS', bullets: ['Feature 1', 'Feature 2'] },
-            { title: 'Overview', content: 'System Overview', bullets: ['Session Management', 'Document Generation'] },
-            { title: 'Thank You', content: 'Questions?' }
-          ]
-        }
-      },
-      excel: {
-        type: 'excel',
-        fileName: 'sample-data',
-        content: {
-          sheets: [{
-            name: 'Sample Data',
-            data: {
-              headers: ['Name', 'Value', 'Status'],
-              rows: [
-                ['Item 1', '100', 'Active'],
-                ['Item 2', '200', 'Pending'],
-                ['Item 3', '150', 'Active']
-              ]
-            }
-          }]
-        }
-      }
-    }
-
-    const documentData = sampleContent[type]
-    if (!documentData) {
-      setError('Invalid document type')
-      setLoading(false)
-      return
-    }
-
-    try {
-      const response = await fetch('/api/documents/generate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-session-id': sessionId
-        },
-        body: JSON.stringify({ ...documentData, isPublic: false })
-      })
-      const data = await response.json()
-
-      if (data.success) {
-        setSuccess(`Generated ${type.toUpperCase()}: ${data.fileName}`)
-        await loadSessionFiles(sessionId)
-      } else {
-        setError(data.error || `Failed to generate ${type}`)
-      }
-    } catch (err) {
-      setError(`Failed to generate ${type}`)
-    }
-    setLoading(false)
-  }
 
   // Copy session ID
   const copySessionId = () => {
@@ -288,67 +23,14 @@ export function SessionManagerWindow({ onClose, sessionId }: SessionManagerWindo
     setTimeout(() => setCopiedKey(false), 2000)
   }
 
-  // Get file icon based on extension
-  const getFileIcon = (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLowerCase()
-    switch (ext) {
-      case 'docx':
-      case 'doc':
-        return <FileText size={20} weight="fill" className="text-blue-500" />
-      case 'xlsx':
-      case 'xls':
-        return <FileSpreadsheet size={20} weight="fill" className="text-green-500" />
-      case 'pptx':
-      case 'ppt':
-        return <FilePresentation size={20} weight="fill" className="text-orange-500" />
-      case 'pdf':
-        return <FilePdf size={20} weight="fill" className="text-red-500" />
-      default:
-        return <File size={20} weight="fill" className="text-gray-500" />
-    }
-  }
-
-  // Load files on mount and handle Escape key
-  useEffect(() => {
-    // Load files for the current session
-    if (sessionId) {
-      loadSessionFiles(sessionId)
-    }
-    loadPublicFiles()
-
-    // Handle Escape key to close window
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      }
-    }
-    window.addEventListener('keydown', handleEscape)
-    return () => window.removeEventListener('keydown', handleEscape)
-  }, [onClose, sessionId])
-
-  // Clear messages after 3 seconds
-  useEffect(() => {
-    if (success) {
-      const timer = setTimeout(() => setSuccess(null), 3000)
-      return () => clearTimeout(timer)
-    }
-  }, [success])
-
-  useEffect(() => {
-    if (error) {
-      const timer = setTimeout(() => setError(null), 3000)
-      return () => clearTimeout(timer)
-    }
-  }, [error])
-
   return (
     <Window
       id="session-manager"
       title="Session Manager"
       isOpen={true}
       onClose={onClose}
-      width={900}
-      height={600}
+      width={600}
+      height={350}
       x={100}
       y={100}
       className="session-manager-window"
@@ -357,7 +39,7 @@ export function SessionManagerWindow({ onClose, sessionId }: SessionManagerWindo
     >
       <div className="flex flex-col h-full bg-gray-900/95 backdrop-blur-xl">
         {/* Window Content */}
-        <div className="p-6 flex-1 overflow-auto">
+        <div className="p-6 flex-1 overflow-auto flex flex-col justify-center">
           {/* Session Info */}
           <div className="mb-6">
             <div>
@@ -369,40 +51,6 @@ export function SessionManagerWindow({ onClose, sessionId }: SessionManagerWindo
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-gray-300 text-base font-semibold">Your Session ID</span>
                     <div className="flex gap-2">
-                      <button
-                        onClick={validateSession}
-                        disabled={validating}
-                        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors text-sm font-medium ${
-                          sessionValid === true 
-                            ? 'bg-green-600/20 hover:bg-green-600/30 text-green-400' 
-                            : sessionValid === false 
-                            ? 'bg-red-600/20 hover:bg-red-600/30 text-red-400'
-                            : 'bg-blue-600/20 hover:bg-blue-600/30 text-blue-400'
-                        }`}
-                        title="Check if this session is valid on the server"
-                      >
-                        {validating ? (
-                          <>
-                            <RefreshCw size={16} className="animate-spin" />
-                            <span>Checking...</span>
-                          </>
-                        ) : sessionValid === true ? (
-                          <>
-                            <Check size={16} />
-                            <span>Valid ✓</span>
-                          </>
-                        ) : sessionValid === false ? (
-                          <>
-                            <X size={16} />
-                            <span>Invalid</span>
-                          </>
-                        ) : (
-                          <>
-                            <RefreshCw size={16} />
-                            <span>Validate</span>
-                          </>
-                        )}
-                      </button>
                       <button
                         onClick={copySessionId}
                         className="flex items-center gap-2 px-4 py-1.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors text-sm font-medium shadow-lg"
@@ -431,172 +79,7 @@ export function SessionManagerWindow({ onClose, sessionId }: SessionManagerWindo
               </div>
             </div>
           </div>
-
-          {/* File Upload */}
-          <div className="mb-6">
-            <h3 className="text-lg font-semibold text-white mb-4">Upload File</h3>
-            <div className="flex gap-4">
-              <input
-                type="file"
-                onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
-                className="flex-1 text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-purple-600 file:text-white hover:file:bg-purple-700"
-              />
-              <label className="flex items-center gap-2 text-white">
-                <input
-                  type="checkbox"
-                  checked={isPublicUpload}
-                  onChange={(e) => setIsPublicUpload(e.target.checked)}
-                  className="rounded"
-                />
-                Public
-              </label>
-              <button
-                onClick={handleFileUpload}
-                disabled={!uploadFile || loading}
-                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
-              >
-                <Upload size={20} className="inline mr-2" />
-                Upload
-              </button>
-            </div>
-          </div>
-
-          {/* Document Generation */}
-          <div className="mb-6">
-            <h3 className="text-lg font-semibold text-white mb-4">Generate Documents</h3>
-            <div className="grid grid-cols-4 gap-4">
-              <button
-                onClick={() => generateSampleDocument('docx')}
-                disabled={loading}
-                className="p-4 bg-blue-600/20 border border-blue-500/30 rounded-lg hover:bg-blue-600/30 transition-colors disabled:opacity-50"
-              >
-                <FileText size={32} className="text-blue-400 mx-auto mb-2" />
-                <span className="text-white text-sm">Word Doc</span>
-              </button>
-              <button
-                onClick={() => generateSampleDocument('pdf')}
-                disabled={loading}
-                className="p-4 bg-red-600/20 border border-red-500/30 rounded-lg hover:bg-red-600/30 transition-colors disabled:opacity-50"
-              >
-                <FilePdf size={32} className="text-red-400 mx-auto mb-2" />
-                <span className="text-white text-sm">PDF</span>
-              </button>
-              <button
-                onClick={() => generateSampleDocument('ppt')}
-                disabled={loading}
-                className="p-4 bg-orange-600/20 border border-orange-500/30 rounded-lg hover:bg-orange-600/30 transition-colors disabled:opacity-50"
-              >
-                <FilePresentation size={32} className="text-orange-400 mx-auto mb-2" />
-                <span className="text-white text-sm">PowerPoint</span>
-              </button>
-              <button
-                onClick={() => generateSampleDocument('excel')}
-                disabled={loading}
-                className="p-4 bg-green-600/20 border border-green-500/30 rounded-lg hover:bg-green-600/30 transition-colors disabled:opacity-50"
-              >
-                <FileSpreadsheet size={32} className="text-green-400 mx-auto mb-2" />
-                <span className="text-white text-sm">Excel</span>
-              </button>
-            </div>
-          </div>
-
-          {/* Files List */}
-          <div>
-            {/* Tabs */}
-            <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'
-                  }`}
-              >
-                <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'
-                  }`}
-              >
-                <Globe size={20} />
-                Public Files ({publicFiles.length})
-              </button>
-              <button
-                onClick={() => {
-                  if (activeTab === 'session' && sessionId) {
-                    loadSessionFiles(sessionId)
-                  } else {
-                    loadPublicFiles()
-                  }
-                }}
-                className="ml-auto p-2 bg-gray-800 text-gray-400 rounded-lg hover:bg-gray-700 transition-colors"
-              >
-                <RefreshCw size={20} />
-              </button>
-            </div>
-
-            {/* File List */}
-            <div className="space-y-2">
-              {(activeTab === 'session' ? files : publicFiles).map((file) => (
-                <div
-                  key={file.name}
-                  className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg hover:bg-gray-800/70 transition-colors"
-                >
-                  <div className="flex items-center gap-3">
-                    {getFileIcon(file.name)}
-                    <div>
-                      <p className="text-white font-medium">{file.name}</p>
-                      <p className="text-gray-400 text-sm">
-                        {(file.size / 1024).toFixed(2)} KB • {new Date(file.modified).toLocaleDateString()}
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => downloadFile(file.name, activeTab === 'public')}
-                    className="p-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition-colors"
-                  >
-                    <Download size={20} />
-                  </button>
-                </div>
-              ))}
-              {(activeTab === 'session' ? files : publicFiles).length === 0 && (
-                <div className="text-center py-8">
-                  <Folder size={48} className="text-gray-600 mx-auto mb-4" />
-                  <p className="text-gray-400">No files in {activeTab === 'session' ? 'session' : 'public'} folder</p>
-                </div>
-              )}
-            </div>
-          </div>
         </div>
-
-        {/* Messages */}
-        <AnimatePresence>
-          {success && (
-            <motion.div
-              initial={{ opacity: 0, y: 50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 50 }}
-              className="absolute bottom-4 right-4 px-4 py-2 bg-green-600 text-white rounded-lg shadow-lg"
-            >
-              <Check size={16} className="inline mr-2" />
-              {success}
-            </motion.div>
-          )}
-          {error && (
-            <motion.div
-              initial={{ opacity: 0, y: 50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 50 }}
-              className="absolute bottom-4 right-4 px-4 py-2 bg-red-600 text-white rounded-lg shadow-lg"
-            >
-              <X size={16} className="inline mr-2" />
-              {error}
-            </motion.div>
-          )}
-        </AnimatePresence>
       </div>
     </Window>
   )

app/components/TopBar.tsx

@@ -1,15 +1,18 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   SpeakerHigh,
   WifiHigh,
   BatteryFull,
   MagnifyingGlass,
   Desktop,
-  CirclesFour
+  CirclesFour,
+  Check,
+  Warning
 } from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
+import { CalendarWidget } from './CalendarWidget'
 
 interface TopBarProps {
   onPowerAction?: () => void
@@ -18,8 +21,9 @@ interface TopBarProps {
 }
 
 export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }: TopBarProps) {
-  const [appleMenuOpen, setAppleMenuOpen] = useState(false)
+  const [activeMenu, setActiveMenu] = useState<'apple' | 'battery' | 'wifi' | 'clock' | null>(null)
   const [currentTime, setCurrentTime] = useState('')
+  const menuRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const updateTime = () => {
@@ -38,87 +42,212 @@ export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }
 
     updateTime()
     const interval = setInterval(updateTime, 1000)
-    return () => clearInterval(interval)
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setActiveMenu(null)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      clearInterval(interval)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
   }, [])
 
+  const toggleMenu = (menu: 'apple' | 'battery' | 'wifi' | 'clock') => {
+    setActiveMenu(activeMenu === menu ? null : menu)
+  }
+
   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 backdrop-blur-xl bg-white/40 border-b border-white/20">
-      <div className="flex items-center space-x-4">
-        <button
-          onClick={() => setAppleMenuOpen(!appleMenuOpen)}
-          className="font-bold text-lg hover:text-blue-600 transition-colors relative"
-        >
-          <CirclesFour size={20} weight="fill" className="text-blue-600" />
-        </button>
+    <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 select-none">
+      <div className="flex items-center space-x-4" ref={menuRef}>
+        <div className="relative">
+          <button
+            onClick={() => toggleMenu('apple')}
+            className={`font-bold text-lg hover:text-blue-600 transition-colors relative ${activeMenu === 'apple' ? 'text-blue-600' : ''}`}
+          >
+            <CirclesFour size={20} weight="fill" />
+          </button>
+
+          <AnimatePresence>
+            {activeMenu === 'apple' && (
+              <motion.div
+                initial={{ opacity: 0, y: 5, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                transition={{ duration: 0.1 }}
+                className="absolute top-8 left-0 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()
+                    setActiveMenu(null)
+                  }}
+                  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/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/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.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                  Restart...
+                </button>
+                <button
+                  onClick={() => {
+                    if (onPowerAction) onPowerAction()
+                    setActiveMenu(null)
+                  }}
+                  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/50 my-1 mx-2" />
+                <button
+                  onClick={() => {
+                    if (onPowerAction) onPowerAction()
+                    setActiveMenu(null)
+                  }}
+                  className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+                >
+                  Log Out...
+                </button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
         <span className="font-bold text-gray-800">Reuben OS</span>
         <span className="text-gray-600 text-xs ml-2 font-medium">{activeAppName}</span>
       </div>
 
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-4" ref={menuRef}>
         <div className="flex items-center space-x-3 text-gray-700">
-          <BatteryFull size={18} weight="fill" />
-          <WifiHigh size={18} weight="bold" />
+          {/* Battery */}
+          <div className="relative">
+            <button
+              onClick={() => toggleMenu('battery')}
+              className={`hover:bg-black/5 rounded px-1 py-0.5 transition-colors ${activeMenu === 'battery' ? 'bg-black/10' : ''}`}
+            >
+              <BatteryFull size={18} weight="fill" />
+            </button>
+            <AnimatePresence>
+              {activeMenu === 'battery' && (
+                <motion.div
+                  initial={{ opacity: 0, y: 5, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                  transition={{ duration: 0.1 }}
+                  className="absolute top-8 right-0 w-64 glass rounded-lg shadow-2xl flex flex-col py-2 z-[60] text-sm border border-white/40 backdrop-blur-2xl bg-white/80"
+                >
+                  <div className="px-4 py-2 flex justify-between items-center border-b border-gray-200/50">
+                    <span className="font-bold text-gray-700">Battery</span>
+                    <span className="text-gray-500">85%</span>
+                  </div>
+                  <div className="px-4 py-2 text-xs text-gray-500">
+                    Power Source: Battery
+                  </div>
+                  <div className="px-4 py-2 text-xs text-gray-500">
+                    Using Significant Energy:
+                    <div className="mt-1 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-gray-400 rounded-sm"></div>
+                      <span>Chrome</span>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
+          {/* WiFi */}
+          <div className="relative">
+            <button
+              onClick={() => toggleMenu('wifi')}
+              className={`hover:bg-black/5 rounded px-1 py-0.5 transition-colors ${activeMenu === 'wifi' ? 'bg-black/10' : ''}`}
+            >
+              <WifiHigh size={18} weight="bold" />
+            </button>
+            <AnimatePresence>
+              {activeMenu === 'wifi' && (
+                <motion.div
+                  initial={{ opacity: 0, y: 5, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                  transition={{ duration: 0.1 }}
+                  className="absolute top-8 right-0 w-72 glass rounded-lg shadow-2xl flex flex-col py-2 z-[60] text-sm border border-white/40 backdrop-blur-2xl bg-white/80"
+                >
+                  <div className="px-4 py-2 flex justify-between items-center border-b border-gray-200/50">
+                    <span className="font-bold text-gray-700">Wi-Fi</span>
+                    <div className="w-8 h-4 bg-blue-500 rounded-full relative cursor-pointer">
+                      <div className="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full shadow-sm"></div>
+                    </div>
+                  </div>
+                  <div className="py-1">
+                    <div className="px-4 py-1.5 bg-blue-500/10 flex justify-between items-center">
+                      <div className="flex items-center gap-2">
+                        <Check size={14} weight="bold" className="text-blue-600" />
+                        <span className="font-medium text-gray-800">Reuben's WiFi</span>
+                      </div>
+                      <WifiHigh size={14} weight="bold" className="text-gray-600" />
+                    </div>
+                    <div className="h-px bg-gray-200/50 my-1 mx-4" />
+                    <div className="px-4 py-1.5 text-gray-500 text-xs font-semibold">Personal Hotspots</div>
+                    <div className="px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors flex justify-between items-center group cursor-pointer">
+                      <span className="pl-6">iPhone 15 Pro</span>
+                      <WifiHigh size={14} weight="bold" className="text-gray-400 group-hover:text-white" />
+                    </div>
+                    <div className="h-px bg-gray-200/50 my-1 mx-4" />
+                    <div className="px-4 py-1.5 text-gray-500 text-xs font-semibold">Other Networks</div>
+                    <div className="px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors flex justify-between items-center group cursor-pointer">
+                      <span className="pl-6">Guest Network</span>
+                      <WifiHigh size={14} weight="bold" className="text-gray-400 group-hover:text-white" />
+                    </div>
+                    <div className="px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors flex justify-between items-center group cursor-pointer">
+                      <span className="pl-6">Starbucks WiFi</span>
+                      <WifiHigh size={14} weight="bold" className="text-gray-400 group-hover:text-white" />
+                    </div>
+                  </div>
+                  <div className="h-px bg-gray-200/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">
+                    Wi-Fi Settings...
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
           <MagnifyingGlass size={18} weight="bold" />
         </div>
-        <div className="font-medium text-gray-800 min-w-[140px] text-right">{currentTime}</div>
-      </div>
 
-      <AnimatePresence>
-        {appleMenuOpen && (
-          <>
-            <div
-              className="fixed inset-0 z-[55]"
-              onClick={() => setAppleMenuOpen(false)}
-            />
-            <motion.div
-              initial={{ opacity: 0, y: -5 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -5 }}
-              transition={{ duration: 0.15 }}
-              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.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/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/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.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
-                Restart...
-              </button>
-              <button
-                onClick={() => {
-                  if (onPowerAction) onPowerAction()
-                  setAppleMenuOpen(false)
-                }}
-                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/50 my-1 mx-2" />
-              <button
-                onClick={() => {
-                  if (onPowerAction) onPowerAction()
-                  setAppleMenuOpen(false)
-                }}
-                className="text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+        {/* Clock */}
+        <div className="relative">
+          <button
+            onClick={() => toggleMenu('clock')}
+            className={`font-medium text-gray-800 min-w-[140px] text-right hover:bg-black/5 rounded px-2 py-0.5 transition-colors ${activeMenu === 'clock' ? 'bg-black/10' : ''}`}
+          >
+            {currentTime}
+          </button>
+          <AnimatePresence>
+            {activeMenu === 'clock' && (
+              <motion.div
+                initial={{ opacity: 0, y: 5, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                transition={{ duration: 0.1 }}
+                className="absolute top-8 right-0 z-[60]"
               >
-                Log Out...
-              </button>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
+                <CalendarWidget />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
     </div>
   )
 }

lib/sessionManager.ts

@@ -80,7 +80,7 @@ export class SessionManager {
     if (sessionIdOrKey.startsWith('session_')) {
       return this.validateSessionById(sessionIdOrKey);
     }
-    
+
     // Otherwise treat as session key for backward compatibility
     if (this.sessions.has(sessionIdOrKey)) {
       const session = this.sessions.get(sessionIdOrKey)!;
@@ -126,7 +126,7 @@ export class SessionManager {
       const sessionPath = path.join(this.sessionDir, sessionId, 'session.json');
       const sessionData = await fs.readFile(sessionPath, 'utf-8');
       const session = JSON.parse(sessionData) as Session;
-      
+
       // Load into memory
       session.lastAccessed = new Date();
       this.sessions.set(session.key, session);
@@ -146,7 +146,7 @@ export class SessionManager {
           return session;
         }
       }
-      
+
       // Try loading from disk
       try {
         const sessionPath = path.join(this.sessionDir, sessionIdOrKey, 'session.json');
@@ -158,7 +158,7 @@ export class SessionManager {
         return null;
       }
     }
-    
+
     // Otherwise treat as key
     if (await this.validateSession(sessionIdOrKey)) {
       return this.sessions.get(sessionIdOrKey) || null;
@@ -177,7 +177,7 @@ export class SessionManager {
         return null;
       }
     }
-    
+
     // Otherwise get session by key
     const session = await this.getSession(sessionIdOrKey);
     if (session) {
@@ -245,7 +245,7 @@ export class SessionManager {
 
     try {
       await fs.rm(sessionPath, { recursive: true, force: true });
-      
+
       // Remove from memory by finding the right key
       if (sessionIdOrKey.startsWith('session_')) {
         for (const [key, session] of this.sessions.entries()) {
@@ -257,7 +257,7 @@ export class SessionManager {
       } else {
         this.sessions.delete(sessionIdOrKey);
       }
-      
+
       return true;
     } catch (error) {
       console.error('Error deleting session:', error);