First Push

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(dir:*)",
+      "Bash(del nul)",
+      "Bash(rm:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

APPLICATIONS_GUIDE.md

@@ -0,0 +1,200 @@
+# Applications Guide
+
+## Integrated Desktop Applications
+
+Your web-based desktop OS now includes the following applications:
+
+### 1. **Web Browser** 🌐
+- **Icon**: Globe icon (blue/cyan gradient)
+- **Location**: Desktop + Dock
+- **Features**:
+  - Multi-tab browsing
+  - Navigation controls (back, forward, refresh, home)
+  - URL bar with HTTPS indicator
+  - Quick links to iframe-friendly sites
+  - CORS proxy option for better website compatibility
+  - Fullscreen mode
+  - Open in new window option
+  - Resizable and draggable window
+
+**CORS Proxy Solution**:
+- Toggle in settings to enable/disable
+- Uses `allorigins.win` proxy by default
+- Bypasses cross-origin restrictions
+- May affect performance slightly
+
+**Quick Access Sites**:
+- Google
+- Wikipedia
+- MDN Web Docs
+- Stack Overflow
+- GitHub
+- DuckDuckGo
+
+### 2. **Gemini Chat** ✨
+- **Icon**: Sparkle icon (orange gradient #E95420)
+- **Location**: Desktop + Dock
+- **Features**:
+  - AI-powered chat interface
+  - Conversation history (saved to localStorage)
+  - Message timestamps
+  - Draggable and resizable window
+  - Clean, modern UI matching Ubuntu style
+  - API key management (stored locally)
+
+**Setup**:
+1. Click the Gemini Chat icon on desktop or dock
+2. Enter your Gemini API key (get from [Google AI Studio](https://makersuite.google.com/app/apikey))
+3. Start chatting!
+
+**Features**:
+- Context-aware responses (last 10 messages)
+- Real-time typing indicators
+- Clear chat history option
+- Persistent chat across sessions
+- Secure API key storage
+
+### 3. **File Manager** 📁
+- Document management
+- File browsing
+- Multiple file type support
+
+### 4. **Calendar** 📅
+- Exam scheduling
+- Date management
+- Event tracking
+
+### 5. **Help** ❓
+- System help and information
+- Usage guides
+
+## API Integration
+
+### Gemini API Routes
+
+**Chat Endpoint**: `/api/gemini/chat`
+- Method: POST
+- Body: `{ message, apiKey, history }`
+- Response: `{ response }` or `{ error }`
+- Uses: Gemini 1.5 Flash model
+
+**Transcription Endpoint**: `/api/gemini/transcribe`
+- Method: POST
+- Body: FormData with audio file and apiKey
+- Response: `{ transcription }` or `{ error }`
+- Note: Full audio support requires Gemini 1.5 Pro
+
+## Accessing Applications
+
+### Desktop Icons
+Click any icon on the desktop (center of screen):
+- Documents
+- Exam Calendar
+- Web Browser
+- Gemini Chat
+
+### Dock (Left sidebar)
+Quick access to all applications:
+- Applications menu
+- Documents
+- Exam Calendar
+- Web Browser
+- Gemini Chat
+- Help
+
+## Window Management
+
+All applications support:
+- **Dragging**: Click and drag the title bar
+- **Resizing**: Drag from edges or corners
+- **Closing**: Click the red close button (top-left)
+- **Minimize/Maximize**: Click window control buttons
+
+## Browser Usage Tips
+
+1. **For Best Compatibility**: Enable CORS proxy in browser settings
+2. **Interactive Sites**: Some features may not work through proxy
+3. **Performance**: Direct access (no proxy) is faster but limited
+4. **Quick Links**: Use provided shortcuts for reliable access
+
+## Gemini Chat Tips
+
+1. **API Key**: Keep it secure, it's stored locally in your browser
+2. **Context**: The AI remembers last 10 messages in conversation
+3. **Clear History**: Use "Clear" button to start fresh conversation
+4. **Error Handling**: Check API key if you encounter errors
+5. **Conversation**: Chat naturally, Gemini understands context
+
+## Technical Details
+
+### Technologies Used
+- **Frontend**: React 19, Next.js 16, TypeScript
+- **Styling**: Tailwind CSS 4
+- **Icons**: Phosphor Icons
+- **Animations**: Framer Motion
+- **State**: React hooks + localStorage
+
+### File Structure
+```
+app/
+├── components/
+│   ├── Desktop.tsx          # Main desktop container
+│   ├── Dock.tsx             # Application dock
+│   ├── DesktopIcon.tsx      # Desktop icon component
+│   ├── WebBrowserApp.tsx    # Browser application
+│   ├── GeminiChat.tsx       # Gemini chat application
+│   └── ...
+├── api/
+│   └── gemini/
+│       ├── chat/route.ts    # Chat API endpoint
+│       └── transcribe/route.ts # Transcription endpoint
+└── page.tsx                 # Main entry point
+```
+
+## Future Enhancements
+
+Potential improvements:
+- [ ] Browser bookmarks system
+- [ ] Download manager
+- [ ] Browser history
+- [ ] Gemini voice input
+- [ ] Gemini image analysis
+- [ ] Multiple chat sessions
+- [ ] Chat export/import
+- [ ] Custom themes
+- [ ] Keyboard shortcuts
+- [ ] Window snapping
+
+## Troubleshooting
+
+### Browser Not Loading Sites
+- Enable CORS proxy in settings
+- Try quick link sites first
+- Some sites block iframe embedding
+
+### Gemini Chat Not Working
+- Verify API key is correct
+- Check internet connection
+- Ensure API key has proper permissions
+- Try clearing chat and starting fresh
+
+### Window Issues
+- Refresh page if window becomes unresponsive
+- Check that window isn't dragged off-screen
+- Clear localStorage if persistent issues
+
+## Development
+
+To run the application:
+```bash
+npm run dev
+```
+
+Access at: `http://localhost:3000`
+
+## API Keys
+
+You'll need:
+- **Gemini API Key**: From [Google AI Studio](https://makersuite.google.com/app/apikey)
+
+Keys are stored locally in browser's localStorage for convenience.

CLAUDE_DESKTOP_SETUP.md

@@ -0,0 +1,99 @@
+# Setting Up MCP with Claude Desktop
+
+## Step 1: Find Your Claude Desktop Config File
+
+Open File Explorer and navigate to:
+```
+C:\Users\[YourUsername]\AppData\Roaming\Claude\
+```
+
+Or press `Win+R` and type:
+```
+%APPDATA%\Claude
+```
+
+## Step 2: Edit claude_desktop_config.json
+
+If the file doesn't exist, create it. Add this content:
+
+```json
+{
+  "mcpServers": {
+    "semsoon": {
+      "command": "python",
+      "args": ["E:\\mpc-hackathon\\backend\\mcp_server.py"],
+      "env": {
+        "UPLOAD_PASSCODE": "semsoon-secure-2025",
+        "DATA_DIR": "E:\\mpc-hackathon\\data"
+      }
+    }
+  }
+}
+```
+
+## Step 3: Restart Claude Desktop
+
+1. Completely close Claude Desktop (check system tray)
+2. Open Claude Desktop again
+3. The MCP server should start automatically
+
+## Step 4: Test in Claude Desktop
+
+Open a new conversation and try these:
+
+1. **Basic test**: "What MCP servers are available?"
+   - Claude should mention "semsoon"
+
+2. **List documents**: "Using semsoon, show me all available documents"
+   - Should list the sample documents
+
+3. **Check exams**: "Using semsoon, what exams are scheduled?"
+   - Should show the sample exams
+
+4. **Read a file**: "Using semsoon, read the study_tips.md file"
+   - Should display the content
+
+## If It's Not Working
+
+### Check 1: Python Path
+Make sure Python is in your PATH:
+```cmd
+python --version
+```
+
+If not, use full path in config:
+```json
+"command": "C:\\Python311\\python.exe"
+```
+
+### Check 2: Dependencies
+```cmd
+pip install fastmcp PyPDF2 python-docx python-dotenv
+```
+
+### Check 3: Test Server Manually
+```cmd
+cd E:\mpc-hackathon\backend
+python mcp_server.py
+```
+Should show: "Uvicorn running on http://127.0.0.1:8000"
+
+### Check 4: Claude Desktop Logs
+In Claude Desktop, press `Ctrl+Shift+I` to open DevTools and check Console for errors.
+
+## What Success Looks Like
+
+When properly connected, Claude Desktop will:
+1. Show "semsoon" as an available MCP server
+2. Be able to list documents
+3. Be able to show exam schedules
+4. Be able to read files
+5. Be able to upload files (with passcode)
+
+## Current Server Status
+
+✅ Your MCP server is currently running at http://localhost:8000
+✅ Sample documents have been created in E:\mpc-hackathon\data\documents
+✅ Sample exams have been added to the database
+
+Just add the config to Claude Desktop and restart it!

DEPLOYMENT.md

@@ -0,0 +1,107 @@
+# Deployment Guide for Hugging Face Spaces
+
+## Prerequisites
+- Hugging Face account
+- Hugging Face Spaces access
+- Git installed locally
+
+## Deployment Steps
+
+### 1. Create a New Space on Hugging Face
+1. Go to https://huggingface.co/spaces
+2. Click "Create new Space"
+3. Choose a name for your space
+4. Select "Docker" as the SDK
+5. Choose visibility (public/private)
+6. Click "Create Space"
+
+### 2. Configure Environment Variables
+In your Hugging Face Space settings:
+1. Go to Settings → Variables and Secrets
+2. Add the following secrets:
+   - `GEMINI_API_KEY`: Your Google Gemini API key
+   - `UPLOAD_PASSCODE`: Your secure upload passcode
+   - `MCP_SERVER_URL`: The MCP backend URL (if external)
+
+### 3. Prepare Your Repository
+```bash
+# Clone your HF Space repository
+git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+cd YOUR_SPACE_NAME
+
+# Copy all project files
+cp -r /path/to/mpc-hackathon/* .
+
+# Make sure Dockerfile is in root
+ls Dockerfile
+
+# Add all files
+git add .
+git commit -m "Initial deployment"
+```
+
+### 4. Deploy to Hugging Face Spaces
+```bash
+# Push to Hugging Face
+git push origin main
+```
+
+### 5. Monitor Deployment
+- Check the build logs in your Space
+- The app will be available at: https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space
+
+## Docker Configuration
+
+The Dockerfile is configured to:
+1. Build the Next.js application
+2. Install Python backend dependencies
+3. Run both frontend (port 3000) and backend (port 8000)
+4. Create necessary data directories
+5. Run as non-root user for security
+
+## File Structure for Deployment
+```
+/
+├── app/                 # Next.js application
+├── backend/            # Python MCP backend
+├── public/             # Static assets
+├── data/               # Data storage (created at runtime)
+├── Dockerfile          # Docker configuration
+├── package.json        # Node dependencies
+├── requirements.txt    # Python dependencies
+├── next.config.mjs     # Next.js configuration
+└── .env               # Environment variables (create from .env.example)
+```
+
+## Troubleshooting
+
+### Build Failures
+- Check Dockerfile syntax
+- Verify all dependencies in package.json and requirements.txt
+- Check HF Space logs for specific errors
+
+### Runtime Issues
+- Verify environment variables are set
+- Check port configurations
+- Ensure data directories have proper permissions
+
+### Performance
+- HF Spaces have resource limits
+- Consider optimizing images and assets
+- Use production builds
+
+## Security Notes
+- Never commit `.env` files with real credentials
+- Use HF Spaces secrets for sensitive data
+- The app runs as non-root user for security
+- Upload passcode protects write operations
+
+## Updates
+To update your deployed app:
+```bash
+git add .
+git commit -m "Update description"
+git push origin main
+```
+
+The Space will automatically rebuild and redeploy.

Dockerfile

@@ -0,0 +1,69 @@
+# Use Node.js 20 as the base image
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Build the application
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Set environment variables for build
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Build Next.js application
+RUN npm run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Create a non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built application
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Create data directory for file uploads
+RUN mkdir -p /app/data/documents /app/data/public /app/data/exams
+RUN chown -R nextjs:nodejs /app/data
+
+# Install Python for MCP backend
+RUN apk add --no-cache python3 py3-pip
+
+# Copy Python backend
+COPY --chown=nextjs:nodejs backend /app/backend
+WORKDIR /app/backend
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip3 install --no-cache-dir -r requirements.txt
+
+WORKDIR /app
+
+# Switch to non-root user
+USER nextjs
+
+# Expose ports
+EXPOSE 3000 8000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/api/health', (res) => process.exit(res.statusCode === 200 ? 0 : 1))"
+
+# Start both services
+CMD ["sh", "-c", "python3 backend/mcp_server.py & node server.js"]

Empc-hackathonpublicbackground_readme.txt

@@ -0,0 +1 @@
+Please add your background.webp file to the public directory at E:\mpc-hackathon\public\background.webp

HACKATHON_README.md

@@ -0,0 +1,215 @@
+# 🎓 Exam Hub - AI-Powered Academic Assistant
+
+## 🏆 MCP Hackathon Submission
+
+An innovative exam calendar and document management system that integrates with Claude through the Model Context Protocol (MCP), featuring a stunning Ubuntu-styled desktop interface.
+
+## 🌟 What Makes This Special
+
+### 🚀 First-Mover Innovation
+- **Early MCP Adopter**: One of the first applications built with Anthropic's brand-new Model Context Protocol
+- **AI-Native Design**: Not just AI-enabled, but designed from the ground up for AI interaction
+- **Practical Application**: Solves real problems students face every day
+
+### 💡 Key Features
+
+#### 📚 Smart Document Management
+- Upload and organize study materials
+- AI-powered document search and extraction
+- PDF and DOCX text extraction
+- Full-text search within documents
+- Automatic categorization by subject
+
+#### 📅 Intelligent Exam Calendar
+- Track all upcoming exams in one place
+- Get AI-generated study schedules
+- Find related documents for each exam
+- Urgency-based exam prioritization
+- Study session tracking
+
+#### 🤖 Claude Integration (MCP)
+- Natural language queries: "What exams do I have this week?"
+- Smart document retrieval: "Find all chemistry notes"
+- Study assistance: "Create a study plan for my math midterm"
+- Document summarization: "Summarize the key points from chapter 5"
+
+#### 🎨 Beautiful Ubuntu-Style Desktop UI
+- Familiar desktop metaphor
+- File manager with folder navigation
+- Calendar application
+- Matrix rain effect (because why not!)
+- Responsive and intuitive design
+
+## 🛠️ Technical Stack
+
+### Frontend
+- **Next.js 14** - React framework with App Router
+- **Tailwind CSS** - Utility-first styling
+- **Framer Motion** - Smooth animations
+- **Phosphor Icons** - Beautiful icon set
+
+### Backend
+- **FastMCP** - Model Context Protocol server
+- **Python** - Backend logic
+- **SQLite** - Exam database
+- **FastAPI** - REST API for demos
+
+### AI Integration
+- **MCP Tools** - 20+ custom tools for Claude
+- **Document Intelligence** - PDF/DOCX extraction
+- **Natural Language Interface** - Talk to your documents
+
+## 🚦 Quick Start
+
+### 1. Install Dependencies
+
+```bash
+# Frontend
+npm install
+
+# Backend
+pip install -r requirements.txt
+```
+
+### 2. Run the Application
+
+```bash
+# Start Next.js UI (Terminal 1)
+npm run dev
+
+# Start MCP Server (Terminal 2)
+cd backend
+python mcp_server.py
+
+# Optional: Start Demo API (Terminal 3)
+cd backend
+python demo_api.py
+```
+
+### 3. Access the Application
+
+- **Web UI**: http://localhost:3000
+- **MCP Server**: http://localhost:8000
+- **Demo API**: http://localhost:8001/docs
+
+## 🎮 Demo Instructions
+
+### Web UI Demo
+1. Open http://localhost:3000
+2. Click on the File Manager icon
+3. Browse through the virtual file system
+4. Open the Calendar to see upcoming exams
+
+### Claude Desktop Integration
+1. Install Claude Desktop
+2. The configuration has been added to: `%APPDATA%\Claude\claude_desktop_config.json`
+3. Restart Claude Desktop
+4. Try: "Show me all documents in the exam hub"
+
+### API Demo
+1. Open http://localhost:8001/docs
+2. Try the interactive API documentation
+3. Test endpoints like `/exams/upcoming` or `/documents`
+
+## 📊 MCP Tools Available
+
+### Document Tools (11 tools)
+- `list_all_documents` - View all files
+- `get_folder_structure` - Browse folders
+- `search_documents` - Find files by name
+- `extract_pdf_text` - Read PDFs
+- `extract_docx_text` - Read Word docs
+- `read_text_file` - Read text files
+- `search_in_document` - Search within files
+- `get_document_summary` - Get file previews
+- `upload_file` - Upload new files (secured)
+- `create_folder` - Create directories
+- `delete_file` - Remove files
+
+### Calendar Tools (10 tools)
+- `get_all_exams` - List all exams
+- `get_exams_this_week` - Current week
+- `get_exams_next_week` - Next week
+- `get_exams_by_month` - Monthly view
+- `find_exam_by_subject` - Subject search
+- `get_exams_by_date` - Specific date
+- `get_upcoming_exams` - Next N days
+- `search_related_documents` - Find study materials
+- `get_study_schedule` - Study sessions
+- `get_exam_statistics` - Analytics
+
+## 🎯 Use Cases
+
+### For Students
+- "What exams are coming up this week?"
+- "Find all my chemistry notes"
+- "Create a study schedule for finals"
+- "Summarize this PDF for me"
+
+### For Educators
+- Track student exam schedules
+- Organize course materials
+- Generate study guides
+- Monitor academic calendars
+
+## 🔒 Security
+
+- **Passcode Protection**: Upload operations require authentication
+- **Local Storage**: All data stays on your machine
+- **Secure Design**: No external data transmission
+
+## 🌍 Deployment Options
+
+### Hugging Face Spaces
+- Ready for deployment with Docker
+- Persistent storage configured
+- Environment variables set
+
+### Local Installation
+- Works on Windows, Mac, Linux
+- No internet required
+- Full privacy control
+
+## 📈 Future Enhancements
+
+- [ ] Mobile app version
+- [ ] Collaborative study groups
+- [ ] AI-generated practice exams
+- [ ] Integration with university systems
+- [ ] Voice commands
+- [ ] Smart notifications
+
+## 🏗️ Architecture
+
+```
+┌─────────────────┐     ┌─────────────────┐
+│   Next.js UI    │────▶│   REST API      │
+└─────────────────┘     └─────────────────┘
+         │                       │
+         │                       ▼
+         │              ┌─────────────────┐
+         └─────────────▶│   MCP Server    │
+                        └─────────────────┘
+                                 │
+                        ┌────────┴────────┐
+                        ▼                 ▼
+                 ┌──────────┐      ┌──────────┐
+                 │ Documents│      │  SQLite  │
+                 └──────────┘      └──────────┘
+```
+
+## 👏 Acknowledgments
+
+- Built for the Anthropic MCP Hackathon
+- Powered by Claude and the Model Context Protocol
+- Ubuntu desktop design inspiration
+
+## 📝 License
+
+MIT License - Feel free to use and modify!
+
+---
+
+**Built with ❤️ for students everywhere**
+
+*Making exam preparation smarter with AI*

MCP_SETUP_GUIDE.md

@@ -0,0 +1,201 @@
+# MCP Integration Setup Guide for Claude Desktop
+
+## Quick Start
+
+### 1. Locate Claude Desktop Config File
+
+The Claude Desktop configuration file is located at:
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Linux**: `~/.config/Claude/claude_desktop_config.json`
+
+### 2. Add MCP Server Configuration
+
+Open the config file and add this configuration:
+
+```json
+{
+  "mcpServers": {
+    "exam-hub": {
+      "command": "python",
+      "args": ["E:\\mpc-hackathon\\backend\\mcp_server.py"],
+      "env": {
+        "UPLOAD_PASSCODE": "exam-hub-secure-2025",
+        "DATA_DIR": "E:\\mpc-hackathon\\data"
+      }
+    }
+  }
+}
+```
+
+**Note**: Adjust the path to match your actual project location.
+
+### 3. Install Python Dependencies
+
+Make sure you have Python installed and run:
+
+```bash
+cd E:\mpc-hackathon
+pip install -r requirements.txt
+```
+
+### 4. Restart Claude Desktop
+
+After updating the configuration:
+1. Completely close Claude Desktop
+2. Reopen Claude Desktop
+3. The MCP server should start automatically
+
+## Testing the MCP Integration
+
+### Test Commands to Try in Claude Desktop
+
+Once connected, try these commands in a new Claude Desktop conversation:
+
+#### 1. Check Server Status
+Ask: "Can you check the exam hub server status?"
+- Claude should use the `get_server_info` tool
+
+#### 2. List Documents
+Ask: "What documents are available?"
+- Claude should use the `list_all_documents` tool
+
+#### 3. View Exam Schedule
+Ask: "What exams are coming up this week?"
+- Claude should use the `get_exams_this_week` tool
+
+#### 4. Search for Documents
+Ask: "Find all PDF files"
+- Claude should use the `search_documents` tool with file_type="pdf"
+
+#### 5. Get Exam Statistics
+Ask: "Show me exam statistics"
+- Claude should use the `get_exam_statistics` tool
+
+#### 6. Read a Document
+Ask: "Read the study_tips.md file"
+- Claude should use the `read_text_file` tool
+
+#### 7. Search Within Documents
+Ask: "Search for 'exam' in all documents"
+- Claude should use the `search_in_document` tool
+
+#### 8. Upload a File (Requires Passcode)
+Ask: "Upload a test file with content 'Hello World' as test.txt"
+- Claude will ask for the passcode
+- Provide: `exam-hub-secure-2025`
+- Claude should use the `upload_file` tool
+
+## Available MCP Tools
+
+### Document Management Tools (No Passcode)
+- `list_all_documents()` - List all files with metadata
+- `get_folder_structure()` - View folder hierarchy
+- `search_documents(query, file_type)` - Search files by name
+- `extract_pdf_text(filename, max_pages)` - Extract PDF content
+- `extract_docx_text(filename)` - Extract Word document content
+- `read_text_file(filename)` - Read text files
+- `search_in_document(filename, query)` - Search within files
+- `get_document_summary(filename)` - Get file preview and metadata
+
+### Document Management Tools (Passcode Required)
+- `upload_file(filename, file_data, passcode)` - Upload new files
+- `create_folder(folder_path, passcode)` - Create folders
+- `delete_file(filename, passcode)` - Delete files
+
+### Exam Calendar Tools
+- `get_all_exams()` - List all exams
+- `get_exams_this_week()` - Current week's exams
+- `get_exams_next_week()` - Next week's exams
+- `get_exams_by_month(year, month)` - Exams by month
+- `find_exam_by_subject(subject)` - Search by subject
+- `get_exams_by_date(date)` - Exams on specific date
+- `get_upcoming_exams(days)` - Upcoming exams in N days
+- `search_related_documents(subject)` - Find related study materials
+- `get_study_schedule(exam_id)` - View study sessions
+- `get_exam_statistics()` - Exam statistics and analytics
+
+## Troubleshooting
+
+### MCP Server Not Connecting
+
+1. **Check Python Installation**:
+   ```bash
+   python --version
+   ```
+   Should show Python 3.8 or higher
+
+2. **Check Dependencies**:
+   ```bash
+   pip list | grep fastmcp
+   ```
+   Should show fastmcp installed
+
+3. **Test Server Manually**:
+   ```bash
+   cd E:\mpc-hackathon\backend
+   python mcp_server.py
+   ```
+   Should show "Uvicorn running on http://127.0.0.1:8000"
+
+4. **Check Claude Desktop Logs**:
+   - Open Developer Tools in Claude Desktop (Ctrl+Shift+I or Cmd+Option+I)
+   - Look for MCP-related errors in the console
+
+### Common Issues
+
+**Issue**: "MCP server failed to start"
+**Solution**: Check the Python path in the config file is correct
+
+**Issue**: "No tools available"
+**Solution**: Restart Claude Desktop after updating config
+
+**Issue**: "Invalid passcode" when uploading
+**Solution**: Check the UPLOAD_PASSCODE in your .env file matches what you're using
+
+## Environment Variables
+
+The MCP server uses these environment variables (set in `.env` file):
+
+```env
+UPLOAD_PASSCODE=exam-hub-secure-2025  # Required for upload operations
+MCP_PORT=8000                         # Server port (default: 8000)
+DATA_DIR=./data                       # Data directory path
+```
+
+## Sample Data
+
+The server automatically creates sample files on first run:
+- `README.txt` - Welcome message
+- `study_tips.md` - Study tips document
+- `exam_schedule.txt` - Sample exam schedule
+
+Sample exams are also added to the database:
+- Mathematics Midterm (Feb 15)
+- Physics Final (Feb 20)
+- Computer Science Quiz (Feb 10)
+- Chemistry Midterm (Feb 18)
+- History Essay (Feb 25)
+- Biology Lab Exam (Feb 22)
+
+## Security Notes
+
+- The upload passcode (`exam-hub-secure-2025`) protects write operations
+- Change this passcode in production
+- Files are stored locally in the `data/documents` directory
+- The exam database is stored in `data/exams/exams.db`
+
+## Next Steps
+
+1. **Test Basic Operations**: Try the test commands above
+2. **Upload Real Documents**: Use the upload tool with your study materials
+3. **Customize Exam Data**: Add your actual exam schedule
+4. **Integrate with Web UI**: The Next.js frontend can be updated to use the same data directory
+
+## Support
+
+If you encounter issues:
+1. Check the logs in Claude Desktop's Developer Tools
+2. Verify the MCP server is running manually
+3. Ensure all paths in the config are absolute paths
+4. Make sure Python and all dependencies are installed correctly

TEST_MCP_CONNECTION.md

@@ -0,0 +1,76 @@
+# Testing MCP Connection in Claude
+
+## Your MCP Server is Running!
+
+The MCP server is currently running at: `http://localhost:8000/sse`
+
+## How to Connect in Claude
+
+Since you're using Claude in the browser, you can test the MCP tools directly here! The server is already running in the background.
+
+## Test Commands to Try Right Now
+
+Try asking me these questions to test the MCP integration:
+
+### 1. Basic Server Check
+"Can you check what tools are available on the exam hub server?"
+
+### 2. List Documents
+"Show me all documents in the exam hub"
+
+### 3. View Exams
+"What exams are scheduled this week?"
+
+### 4. Read a File
+"Read the study_tips.md file from the exam hub"
+
+### 5. Search Documents
+"Search for PDF files in the document repository"
+
+### 6. Get Exam Statistics
+"Show me statistics about upcoming exams"
+
+### 7. Upload Test (Requires Passcode)
+"Upload a test file called 'hello.txt' with content 'Hello from Claude!'"
+(Use passcode: exam-hub-secure-2025)
+
+## Server Details
+
+- **Status**: Running ✅
+- **URL**: http://localhost:8000
+- **SSE Endpoint**: http://localhost:8000/sse
+- **Data Directory**: E:\mpc-hackathon\data
+- **Documents**: E:\mpc-hackathon\data\documents
+- **Database**: E:\mpc-hackathon\data\exams\exams.db
+
+## Available Tools Summary
+
+### Document Tools (No Auth Required)
+- list_all_documents
+- get_folder_structure
+- search_documents
+- extract_pdf_text
+- extract_docx_text
+- read_text_file
+- search_in_document
+- get_document_summary
+
+### Document Tools (Passcode Required)
+- upload_file (passcode: exam-hub-secure-2025)
+- create_folder
+- delete_file
+
+### Calendar/Exam Tools
+- get_all_exams
+- get_exams_this_week
+- get_exams_next_week
+- get_exams_by_month
+- find_exam_by_subject
+- get_exams_by_date
+- get_upcoming_exams
+- search_related_documents
+- get_study_schedule
+- get_exam_statistics
+- get_server_info
+
+The server is ready for testing! Just ask me to use any of these tools.

TTT_CLAUDE_DESKTOP_GUIDE.md

@@ -0,0 +1,257 @@
+# Playing Tic Tac Toe with Claude via MCP
+
+This guide explains how to play Tic Tac Toe with Claude Desktop using the Semsoon MCP server.
+
+## Overview
+
+The Tic Tac Toe game has been integrated into the **Semsoon MCP Server**. You can play directly through:
+1. **Claude Desktop** (via MCP tools)
+2. **Web UI** (browser interface)
+ 
+Both interfaces connect to the same game backend, so you could even start a game in one and continue in the other!
+
+---
+
+## Playing via Claude Desktop (MCP)
+
+### Prerequisites
+
+1. **Start the Semsoon MCP Server:**
+   ```bash
+   cd backend
+   python mcp_server.py
+   ```
+
+2. **Ensure Claude Desktop is configured** to connect to the Semsoon MCP server (see `CLAUDE_DESKTOP_SETUP.md`)
+
+### How to Play
+
+Once connected, you can play Tic Tac Toe by simply talking to Claude! Here are the available commands:
+
+#### 1. Start a New Game
+Just ask Claude to start a game:
+```
+"Let's play Tic Tac Toe!"
+```
+
+Or be more explicit:
+```
+"Start a new Tic Tac Toe game"
+```
+
+Claude will call `ttt_new_game()` and show you:
+- A game ID
+- The empty board
+- Board position numbers (0-8)
+
+#### 2. Make Your Move
+Tell Claude where you want to place your X:
+```
+"I'll take position 4" (center)
+"Place my X at position 0" (top-left)
+"I choose 8" (bottom-right)
+```
+
+Claude will:
+1. Place your X at the chosen position
+2. Automatically make its own move (O)
+3. Show you the updated board
+4. Check for a winner or draw
+
+#### 3. Continue Playing
+Keep making moves until someone wins or it's a draw!
+
+#### 4. Game Help
+Ask Claude for help anytime:
+```
+"How do I play Tic Tac Toe?"
+"Show me the board positions"
+"What are the TTT commands?"
+```
+
+### Board Layout
+
+```
+0 | 1 | 2
+---------
+3 | 4 | 5
+---------
+6 | 7 | 8
+```
+
+- **Position 0**: Top-left
+- **Position 4**: Center
+- **Position 8**: Bottom-right
+
+---
+
+## Available MCP Tools
+
+If you want to call the tools directly, here they are:
+
+### `ttt_new_game()`
+Start a new game. Returns a game ID and initial board.
+
+### `ttt_make_move(game_id, position)`
+Make your move and Claude responds automatically.
+- `game_id`: The ID from `ttt_new_game()`
+- `position`: 0-8 (see board layout above)
+
+### `ttt_get_game_state(game_id)`
+View the current state of a game.
+
+### `ttt_list_games()`
+List all active games.
+
+### `ttt_claude_move(game_id)`
+Make Claude play (if it's Claude's turn).
+
+### `ttt_help()`
+Get detailed help and instructions.
+
+---
+
+## Example Conversation
+
+**You:** Let's play Tic Tac Toe!
+
+**Claude:** *[Calls ttt_new_game()]*
+Great! I've started a new game. You are X, and I'm O. You go first!
+
+```
+0 | 1 | 2
+---------
+3 | 4 | 5
+---------
+6 | 7 | 8
+```
+
+Where would you like to place your X?
+
+**You:** I'll take the center, position 4
+
+**Claude:** *[Calls ttt_make_move(game_id, 4)]*
+You placed X at position 4 (center). I'll place O at position 0 (top-left).
+
+```
+O | 1 | 2
+---------
+3 | X | 5
+---------
+6 | 7 | 8
+```
+
+Your turn! Where would you like to go?
+
+**You:** Position 8
+
+**Claude:** *[Calls ttt_make_move(game_id, 8)]*
+You placed X at position 8. I'll block you with O at position 2!
+
+```
+O | 1 | O
+---------
+3 | X | 5
+---------
+6 | 7 | X
+```
+
+And so on...
+
+---
+
+## Playing via Web UI
+
+The TTT game is also available as a desktop app in your Web OS!
+
+1. **Start the Web UI** (if not already running)
+2. **Click the Tic Tac Toe icon** (pink game controller) on the desktop or dock
+3. **Play directly in the window** - click any empty cell to make your move
+4. Claude (AI) will automatically respond
+
+The web version uses the same game engine but provides a visual interface with:
+- Visual board with clickable cells
+- Score tracking
+- New game button
+- Animated moves
+
+---
+
+## Backend Architecture
+
+### Game State Storage
+- Games are stored in-memory in `backend/ttt_game.py`
+- Each game has a unique ID
+- Game state includes: board, current player, winner, game status
+
+### AI Algorithm
+Claude uses the **Minimax algorithm** with alpha-beta pruning to play optimally. This means:
+- Claude will never lose if it plays perfectly
+- Best you can do is draw (if you play perfectly too)
+- Good luck! 🎮
+
+### API Endpoints (for Web UI)
+- `POST /ttt/new` - Create new game
+- `POST /ttt/{game_id}/move` - Make a move
+- `GET /ttt/{game_id}/state` - Get game state
+- `GET /ttt/games` - List all games
+
+---
+
+## Troubleshooting
+
+### Claude doesn't have TTT tools
+1. Make sure the Semsoon MCP server is running
+2. Check Claude Desktop config includes Semsoon server
+3. Restart Claude Desktop
+4. Try: "What tools do you have available?" to verify
+
+### Game not responding
+1. Check if MCP server is still running
+2. Look for errors in server console
+3. Try starting a new game
+
+### Can't find my game
+- Games are stored in-memory, so they're lost if server restarts
+- Use `ttt_list_games()` to see all active games
+
+---
+
+## Tips for Playing
+
+1. **Center first** (position 4) is often a strong opening
+2. **Watch for two in a row** - block Claude or complete your own line
+3. **Control corners** - positions 0, 2, 6, 8 are strategic
+4. **Think ahead** - Claude is using minimax, so play carefully!
+
+---
+
+## Integration Details
+
+### File Structure
+```
+backend/
+├── mcp_server.py           # Main Semsoon MCP server
+├── ttt_game.py             # Game logic and AI
+├── demo_api.py             # REST API endpoints
+└── tools/
+    └── ttt_tools.py        # MCP tool registrations
+```
+
+### How It Works
+1. You talk to Claude Desktop
+2. Claude calls MCP tools (e.g., `ttt_make_move`)
+3. Tools execute game logic in `ttt_game.py`
+4. Results returned to Claude
+5. Claude shows you the board and responds naturally
+
+---
+
+## Have Fun!
+
+Enjoy playing Tic Tac Toe with Claude! It's a great way to:
+- Take study breaks
+- Test the MCP integration
+- Challenge yourself against perfect AI play
+
+Remember: You're X, Claude is O. May the best player win! 🏆

USE_NGROK.md

@@ -0,0 +1,27 @@
+# Using ngrok for HTTPS Access
+
+If you need an HTTPS endpoint for your MCP server:
+
+## 1. Install ngrok
+Download from: https://ngrok.com/download
+
+## 2. Start your MCP server
+```bash
+cd backend
+python mcp_server.py
+```
+
+## 3. Create HTTPS tunnel
+```bash
+ngrok http 8000
+``` 
+
+This will give you a public HTTPS URL like:
+`https://abc123.ngrok.io`
+
+## 4. Use the HTTPS URL
+You can then use `https://abc123.ngrok.io/sse` as your MCP endpoint.
+
+---
+
+**BUT REMEMBER**: Claude's web interface doesn't support custom MCP connectors. You need Claude Desktop for MCP integration!

app/api/code/execute/route.ts

@@ -0,0 +1,186 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { exec } from 'child_process'
+import { promisify } from 'util'
+import fs from 'fs/promises'
+import path from 'path'
+import crypto from 'crypto'
+
+const execAsync = promisify(exec)
+
+// Session storage (in production, use a proper database)
+const sessions = new Map<string, any>()
+
+export async function POST(request: NextRequest) {
+  try {
+    const { sessionId, language, code, timestamp } = await request.json()
+
+    if (!sessionId || !language || !code) {
+      return NextResponse.json(
+        { error: 'Missing required parameters' },
+        { status: 400 }
+      )
+    }
+
+    // Create a temporary directory for this execution
+    const tempDir = path.join(process.cwd(), 'temp', sessionId)
+    await fs.mkdir(tempDir, { recursive: true })
+
+    let output = ''
+    let error = null
+
+    try {
+      switch (language) {
+        case 'python': {
+          const fileName = path.join(tempDir, `script_${timestamp}.py`)
+          await fs.writeFile(fileName, code)
+
+          try {
+            const result = await execAsync(`python "${fileName}"`, {
+              timeout: 10000, // 10 second timeout
+              maxBuffer: 1024 * 1024 // 1MB buffer
+            })
+            output = result.stdout
+            if (result.stderr) {
+              error = result.stderr
+            }
+          } catch (execError: any) {
+            error = execError.message || 'Execution failed'
+            output = execError.stdout || ''
+          }
+
+          // Clean up
+          await fs.unlink(fileName).catch(() => {})
+          break
+        }
+
+        case 'javascript':
+        case 'typescript': {
+          const fileName = path.join(tempDir, `script_${timestamp}.${language === 'typescript' ? 'ts' : 'js'}`)
+          await fs.writeFile(fileName, code)
+
+          try {
+            const command = language === 'typescript'
+              ? `npx ts-node "${fileName}"`
+              : `node "${fileName}"`
+
+            const result = await execAsync(command, {
+              timeout: 10000,
+              maxBuffer: 1024 * 1024
+            })
+            output = result.stdout
+            if (result.stderr) {
+              error = result.stderr
+            }
+          } catch (execError: any) {
+            error = execError.message || 'Execution failed'
+            output = execError.stdout || ''
+          }
+
+          await fs.unlink(fileName).catch(() => {})
+          break
+        }
+
+        case 'react':
+        case 'flutter': {
+          // For React and Flutter, we'll return a message since they need build processes
+          output = `${language === 'react' ? 'React' : 'Flutter'} code saved successfully.
+To run ${language} applications, use the integrated development server.`
+
+          // Save the code for later use
+          const fileName = path.join(tempDir, `app_${timestamp}.${language === 'react' ? 'jsx' : 'dart'}`)
+          await fs.writeFile(fileName, code)
+          break
+        }
+
+        case 'html':
+        case 'css': {
+          // HTML and CSS don't execute, just save them
+          const extension = language === 'html' ? 'html' : 'css'
+          const fileName = path.join(tempDir, `file_${timestamp}.${extension}`)
+          await fs.writeFile(fileName, code)
+          output = `${language.toUpperCase()} file saved successfully. Use the preview pane to see the result.`
+          break
+        }
+
+        default:
+          error = `Unsupported language: ${language}`
+      }
+
+      // Store in session
+      if (!sessions.has(sessionId)) {
+        sessions.set(sessionId, {
+          files: [],
+          executions: []
+        })
+      }
+
+      const session = sessions.get(sessionId)
+      session.executions.push({
+        language,
+        code,
+        output,
+        error,
+        timestamp
+      })
+
+      // Keep only last 50 executions
+      if (session.executions.length > 50) {
+        session.executions = session.executions.slice(-50)
+      }
+
+      return NextResponse.json({
+        output,
+        error,
+        timestamp,
+        sessionId
+      })
+
+    } catch (err: any) {
+      return NextResponse.json(
+        { error: err.message || 'Execution failed' },
+        { status: 500 }
+      )
+    } finally {
+      // Clean up temp directory after some time
+      setTimeout(async () => {
+        try {
+          await fs.rmdir(tempDir, { recursive: true })
+        } catch {}
+      }, 60000) // Clean after 1 minute
+    }
+
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message || 'Request failed' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const sessionId = searchParams.get('sessionId')
+
+  if (!sessionId) {
+    return NextResponse.json(
+      { error: 'Session ID required' },
+      { status: 400 }
+    )
+  }
+
+  const session = sessions.get(sessionId)
+
+  if (!session) {
+    return NextResponse.json({
+      sessionId,
+      executions: [],
+      files: []
+    })
+  }
+
+  return NextResponse.json({
+    sessionId,
+    executions: session.executions || [],
+    files: session.files || []
+  })
+}

app/api/code/public/route.ts

@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs/promises'
+import path from 'path'
+
+const PUBLIC_DIR = path.join(process.cwd(), 'public', 'shared-code')
+
+// Initialize public directory
+async function ensurePublicDir() {
+  await fs.mkdir(PUBLIC_DIR, { recursive: true })
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    await ensurePublicDir()
+
+    // Read all public files
+    const files = await fs.readdir(PUBLIC_DIR)
+    const publicFiles = []
+
+    for (const file of files) {
+      if (file.endsWith('.json')) {
+        try {
+          const content = await fs.readFile(path.join(PUBLIC_DIR, file), 'utf-8')
+          const fileData = JSON.parse(content)
+          publicFiles.push(fileData)
+        } catch (err) {
+          console.error(`Error reading file ${file}:`, err)
+        }
+      }
+    }
+
+    // Sort by timestamp (newest first)
+    publicFiles.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0))
+
+    return NextResponse.json(publicFiles)
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: 'Failed to load public files' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { sessionId, file } = await request.json()
+
+    if (!sessionId || !file) {
+      return NextResponse.json(
+        { error: 'Missing required parameters' },
+        { status: 400 }
+      )
+    }
+
+    await ensurePublicDir()
+
+    // Add metadata
+    const publicFile = {
+      ...file,
+      id: `public_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      timestamp: Date.now(),
+      author: sessionId,
+      downloads: 0,
+      likes: 0
+    }
+
+    // Save to public directory
+    const fileName = `${publicFile.id}.json`
+    const filePath = path.join(PUBLIC_DIR, fileName)
+
+    await fs.writeFile(filePath, JSON.stringify(publicFile, null, 2))
+
+    return NextResponse.json({
+      success: true,
+      file: publicFile,
+      path: `/shared-code/${fileName}`
+    })
+
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: err.message || 'Failed to save public file' },
+      { status: 500 }
+    )
+  }
+}

app/api/code/save/route.ts

@@ -0,0 +1,130 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { sessionId, code, timestamp } = body
+
+    // Define the base path for saved code (accessible by MCP)
+    const baseDir = path.join(process.cwd(), 'data', 'vscode_sessions')
+
+    // Create directory if it doesn't exist
+    if (!fs.existsSync(baseDir)) {
+      fs.mkdirSync(baseDir, { recursive: true })
+    }
+
+    // Create session directory
+    const sessionDir = path.join(baseDir, sessionId)
+    if (!fs.existsSync(sessionDir)) {
+      fs.mkdirSync(sessionDir, { recursive: true })
+    }
+
+    // Save each file
+    for (const file of code) {
+      const filePath = path.join(sessionDir, file.name)
+      fs.writeFileSync(filePath, file.content, 'utf-8')
+    }
+
+    // Create metadata file
+    const metadata = {
+      sessionId,
+      timestamp,
+      files: code.map((f: any) => ({
+        name: f.name,
+        language: f.language,
+        size: f.content.length
+      })),
+      created: new Date().toISOString()
+    }
+
+    fs.writeFileSync(
+      path.join(sessionDir, 'metadata.json'),
+      JSON.stringify(metadata, null, 2),
+      'utf-8'
+    )
+
+    return NextResponse.json({
+      success: true,
+      message: 'Code saved successfully',
+      path: sessionDir,
+      sessionId
+    })
+  } catch (error) {
+    console.error('Error saving code:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to save code' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const sessionId = searchParams.get('sessionId')
+
+    if (!sessionId) {
+      // List all sessions
+      const baseDir = path.join(process.cwd(), 'data', 'vscode_sessions')
+
+      if (!fs.existsSync(baseDir)) {
+        return NextResponse.json({ sessions: [] })
+      }
+
+      const sessions = fs.readdirSync(baseDir)
+        .filter(dir => fs.statSync(path.join(baseDir, dir)).isDirectory())
+        .map(dir => {
+          const metadataPath = path.join(baseDir, dir, 'metadata.json')
+          if (fs.existsSync(metadataPath)) {
+            const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'))
+            return {
+              sessionId: dir,
+              ...metadata
+            }
+          }
+          return { sessionId: dir }
+        })
+
+      return NextResponse.json({ sessions })
+    }
+
+    // Get specific session
+    const sessionDir = path.join(process.cwd(), 'data', 'vscode_sessions', sessionId)
+
+    if (!fs.existsSync(sessionDir)) {
+      return NextResponse.json(
+        { error: 'Session not found' },
+        { status: 404 }
+      )
+    }
+
+    const files = fs.readdirSync(sessionDir)
+      .filter(file => file !== 'metadata.json')
+      .map(filename => {
+        const content = fs.readFileSync(path.join(sessionDir, filename), 'utf-8')
+        return {
+          name: filename,
+          content
+        }
+      })
+
+    const metadataPath = path.join(sessionDir, 'metadata.json')
+    const metadata = fs.existsSync(metadataPath)
+      ? JSON.parse(fs.readFileSync(metadataPath, 'utf-8'))
+      : {}
+
+    return NextResponse.json({
+      sessionId,
+      files,
+      metadata
+    })
+  } catch (error) {
+    console.error('Error reading code:', error)
+    return NextResponse.json(
+      { error: 'Failed to read code' },
+      { status: 500 }
+    )
+  }
+}

app/api/download/route.ts

@@ -0,0 +1,99 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+const DATA_DIR = path.join(process.cwd(), 'data')
+const DOCS_DIR = path.join(DATA_DIR, 'documents')
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const filePath = searchParams.get('path')
+    const preview = searchParams.get('preview') === 'true'
+
+    if (!filePath) {
+      return NextResponse.json({ error: 'File path required' }, { status: 400 })
+    }
+
+    const fullPath = path.join(DOCS_DIR, filePath)
+
+    // Security check
+    if (!fullPath.startsWith(DOCS_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (!fs.existsSync(fullPath)) {
+      return NextResponse.json({ error: 'File not found' }, { status: 404 })
+    }
+
+    const stats = fs.statSync(fullPath)
+    if (stats.isDirectory()) {
+      return NextResponse.json({ error: 'Cannot download directory' }, { status: 400 })
+    }
+
+    const fileBuffer = fs.readFileSync(fullPath)
+    const fileName = path.basename(filePath)
+    const ext = path.extname(fileName).toLowerCase()
+
+    // Determine content type
+    let contentType = 'application/octet-stream'
+    const mimeTypes: Record<string, string> = {
+      '.pdf': 'application/pdf',
+      '.doc': 'application/msword',
+      '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      '.xls': 'application/vnd.ms-excel',
+      '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      '.ppt': 'application/vnd.ms-powerpoint',
+      '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      '.txt': 'text/plain',
+      '.md': 'text/markdown',
+      '.json': 'application/json',
+      '.html': 'text/html',
+      '.css': 'text/css',
+      '.js': 'text/javascript',
+      '.ts': 'text/typescript',
+      '.py': 'text/x-python',
+      '.java': 'text/x-java',
+      '.cpp': 'text/x-c++',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.gif': 'image/gif',
+      '.svg': 'image/svg+xml',
+      '.mp3': 'audio/mpeg',
+      '.mp4': 'video/mp4',
+      '.zip': 'application/zip',
+      '.rar': 'application/x-rar-compressed'
+    }
+
+    if (mimeTypes[ext]) {
+      contentType = mimeTypes[ext]
+    }
+
+    const headers = new Headers({
+      'Content-Type': contentType,
+      'Content-Length': fileBuffer.length.toString(),
+    })
+
+    // If not preview mode, add download header
+    if (!preview) {
+      headers.set('Content-Disposition', `attachment; filename="${fileName}"`)
+    } else {
+      // For preview, use inline disposition for supported types
+      if (['application/pdf', 'text/plain', 'text/markdown', 'application/json'].includes(contentType) ||
+          contentType.startsWith('image/') || contentType.startsWith('text/')) {
+        headers.set('Content-Disposition', `inline; filename="${fileName}"`)
+      } else {
+        headers.set('Content-Disposition', `attachment; filename="${fileName}"`)
+      }
+    }
+
+    return new NextResponse(fileBuffer, { headers })
+  } catch (error) {
+    console.error('Error downloading file:', error)
+    return NextResponse.json(
+      { error: 'Failed to download file' },
+      { status: 500 }
+    )
+  }
+}

app/api/files/route.ts

@@ -0,0 +1,183 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+const DATA_DIR = path.join(process.cwd(), 'data')
+const DOCS_DIR = path.join(DATA_DIR, 'documents')
+
+// Ensure directories exist
+if (!fs.existsSync(DATA_DIR)) {
+  fs.mkdirSync(DATA_DIR, { recursive: true })
+}
+if (!fs.existsSync(DOCS_DIR)) {
+  fs.mkdirSync(DOCS_DIR, { recursive: true })
+}
+
+interface FileItem {
+  name: string
+  type: 'file' | 'folder'
+  size?: number
+  modified?: string
+  path: string
+  extension?: string
+}
+
+function getFileExtension(filename: string): string {
+  const ext = path.extname(filename).toLowerCase()
+  return ext.startsWith('.') ? ext.substring(1) : ext
+}
+
+function getFilesRecursively(dir: string, basePath: string = ''): FileItem[] {
+  const files: FileItem[] = []
+
+  try {
+    const items = fs.readdirSync(dir)
+
+    for (const item of items) {
+      // Skip hidden files and system files
+      if (item.startsWith('.') || item === 'exams.db') continue
+
+      const fullPath = path.join(dir, item)
+      const relativePath = path.join(basePath, item).replace(/\\/g, '/')
+      const stats = fs.statSync(fullPath)
+
+      if (stats.isDirectory()) {
+        files.push({
+          name: item,
+          type: 'folder',
+          path: relativePath,
+          modified: stats.mtime.toISOString()
+        })
+        // Recursively get files from subdirectories
+        const subFiles = getFilesRecursively(fullPath, relativePath)
+        files.push(...subFiles)
+      } else {
+        files.push({
+          name: item,
+          type: 'file',
+          size: stats.size,
+          modified: stats.mtime.toISOString(),
+          path: relativePath,
+          extension: getFileExtension(item)
+        })
+      }
+    }
+  } catch (error) {
+    console.error('Error reading directory:', error)
+  }
+
+  return files
+}
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const folder = searchParams.get('folder') || ''
+
+  try {
+    const targetDir = path.join(DOCS_DIR, folder)
+
+    // Security check - prevent directory traversal
+    if (!targetDir.startsWith(DOCS_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (!fs.existsSync(targetDir)) {
+      // If directory doesn't exist, create it
+      fs.mkdirSync(targetDir, { recursive: true })
+    }
+
+    const files = getFilesRecursively(targetDir, folder)
+
+    return NextResponse.json({
+      files,
+      currentPath: folder,
+      dataDir: DATA_DIR
+    })
+  } catch (error) {
+    console.error('Error listing files:', error)
+    return NextResponse.json(
+      { error: 'Failed to list files' },
+      { status: 500 }
+    )
+  }
+}
+
+// Create folder endpoint
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { folderName, parentPath = '' } = body
+
+    if (!folderName) {
+      return NextResponse.json({ error: 'Folder name required' }, { status: 400 })
+    }
+
+    const folderPath = path.join(DOCS_DIR, parentPath, folderName)
+
+    // Security check
+    if (!folderPath.startsWith(DOCS_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (fs.existsSync(folderPath)) {
+      return NextResponse.json({ error: 'Folder already exists' }, { status: 400 })
+    }
+
+    fs.mkdirSync(folderPath, { recursive: true })
+
+    return NextResponse.json({
+      success: true,
+      path: path.join(parentPath, folderName).replace(/\\/g, '/')
+    })
+  } catch (error) {
+    console.error('Error creating folder:', error)
+    return NextResponse.json(
+      { error: 'Failed to create folder' },
+      { status: 500 }
+    )
+  }
+}
+
+// Delete file endpoint
+export async function DELETE(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const filePath = searchParams.get('path')
+
+    if (!filePath) {
+      return NextResponse.json({ error: 'File path required' }, { status: 400 })
+    }
+
+    const fullPath = path.join(DOCS_DIR, filePath)
+
+    // Security check
+    if (!fullPath.startsWith(DOCS_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (!fs.existsSync(fullPath)) {
+      return NextResponse.json({ error: 'File not found' }, { status: 404 })
+    }
+
+    // Move to trash instead of permanent delete
+    const trashDir = path.join(DATA_DIR, '.trash')
+    if (!fs.existsSync(trashDir)) {
+      fs.mkdirSync(trashDir, { recursive: true })
+    }
+
+    const timestamp = Date.now()
+    const trashPath = path.join(trashDir, `${timestamp}_${path.basename(filePath)}`)
+    fs.renameSync(fullPath, trashPath)
+
+    return NextResponse.json({
+      success: true,
+      message: 'File moved to trash'
+    })
+  } catch (error) {
+    console.error('Error deleting file:', error)
+    return NextResponse.json(
+      { error: 'Failed to delete file' },
+      { status: 500 }
+    )
+  }
+}

app/api/gemini/chat/route.ts

@@ -0,0 +1,113 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent'
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message, imageUrl, history, generateImage } = await request.json()
+
+    if (!GEMINI_API_KEY) {
+      return NextResponse.json(
+        { error: 'Gemini API key not configured on server. Please set GEMINI_API_KEY environment variable.' },
+        { status: 500 }
+      )
+    }
+
+    // For image generation requests
+    if (generateImage) {
+      // Note: Gemini doesn't directly generate images, but we can use a prompt to describe what an image should contain
+      // You would typically integrate with an image generation service like Stable Diffusion or DALL-E here
+      return NextResponse.json({
+        response: `I can describe the image for you: "${message}". For actual image generation, you would need to integrate with services like DALL-E or Stable Diffusion.`,
+        imageDescription: message,
+        note: 'Image generation requires integration with specialized services.'
+      })
+    }
+
+    // Prepare the request body for Gemini API
+    const requestBody: any = {
+      contents: [],
+      generationConfig: {
+        temperature: 0.9,
+        topK: 1,
+        topP: 1,
+        maxOutputTokens: 2048,
+      }
+    }
+
+    // Add conversation history if available
+    if (history && history.length > 0) {
+      history.forEach((msg: any) => {
+        requestBody.contents.push({
+          role: msg.role === 'user' ? 'user' : 'model',
+          parts: [{ text: msg.content }]
+        })
+      })
+    }
+
+    // Prepare the current message
+    const parts: any[] = []
+
+    if (message) {
+      parts.push({ text: message })
+    }
+
+    if (imageUrl) {
+      // Extract base64 data from data URL
+      const base64Data = imageUrl.split(',')[1]
+      parts.push({
+        inline_data: {
+          mime_type: imageUrl.split(':')[1].split(';')[0],
+          data: base64Data
+        }
+      })
+    }
+
+    requestBody.contents.push({
+      role: 'user',
+      parts: parts
+    })
+
+    // Make request to Gemini API
+    const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody)
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error('Gemini API error:', errorText)
+      return NextResponse.json(
+        { error: 'Failed to get response from Gemini', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+
+    if (!data.candidates || data.candidates.length === 0) {
+      return NextResponse.json(
+        { error: 'No response generated' },
+        { status: 500 }
+      )
+    }
+
+    const generatedText = data.candidates[0].content.parts[0].text
+
+    return NextResponse.json({
+      response: generatedText
+    })
+
+  } catch (error) {
+    console.error('Error in Gemini chat API:', error)
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'
+    return NextResponse.json(
+      { error: 'Failed to process request', details: errorMessage },
+      { status: 500 }
+    )
+  }
+}

app/api/gemini/transcribe/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+// Note: For audio transcription, we'll use Gemini's multimodal capabilities
+// In production, you might want to use Google Cloud Speech-to-Text API for better accuracy
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const audioFile = formData.get('audio') as File
+    const apiKey = formData.get('apiKey') as string
+
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: 'API key is required' },
+        { status: 400 }
+      )
+    }
+
+    if (!audioFile) {
+      return NextResponse.json(
+        { error: 'Audio file is required' },
+        { status: 400 }
+      )
+    }
+
+    // Convert audio file to base64
+    const bytes = await audioFile.arrayBuffer()
+    const buffer = Buffer.from(bytes)
+    const base64Audio = buffer.toString('base64')
+
+    // Use Gemini API to transcribe
+    // Note: Gemini 1.5 Pro supports audio, but Flash might have limitations
+    const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent'
+
+    const requestBody = {
+      contents: [{
+        role: 'user',
+        parts: [
+          {
+            text: 'Please transcribe the following audio accurately. Only return the transcription text, nothing else.'
+          },
+          {
+            inline_data: {
+              mime_type: audioFile.type || 'audio/wav',
+              data: base64Audio
+            }
+          }
+        ]
+      }],
+      generationConfig: {
+        temperature: 0.1,
+        topK: 1,
+        topP: 1,
+        maxOutputTokens: 2048,
+      }
+    }
+
+    const response = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody)
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+
+      // If Gemini doesn't support audio, provide alternative solution
+      if (error.error?.message?.includes('audio') || error.error?.message?.includes('unsupported')) {
+        return NextResponse.json({
+          transcription: '[Audio transcription requires Gemini 1.5 Pro or Google Cloud Speech-to-Text API. Please upgrade your API access or use the chat feature with text input.]',
+          warning: 'Audio transcription not fully supported with current model'
+        })
+      }
+
+      throw new Error(error.error?.message || 'Failed to transcribe audio')
+    }
+
+    const data = await response.json()
+    const transcription = data.candidates?.[0]?.content?.parts?.[0]?.text || 'Could not transcribe audio'
+
+    return NextResponse.json({ transcription })
+
+  } catch (error) {
+    console.error('Transcription error:', error)
+
+    // Provide a helpful fallback message
+    return NextResponse.json({
+      transcription: '',
+      error: error instanceof Error ? error.message : 'Transcription failed. Note: Audio transcription requires Gemini 1.5 Pro or a dedicated speech-to-text API.'
+    }, { status: 500 })
+  }
+}

app/api/public/route.ts

@@ -0,0 +1,178 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+const DATA_DIR = path.join(process.cwd(), 'data')
+const PUBLIC_DIR = path.join(DATA_DIR, 'public')
+
+// Ensure public directory exists
+if (!fs.existsSync(PUBLIC_DIR)) {
+  fs.mkdirSync(PUBLIC_DIR, { recursive: true })
+}
+
+interface FileItem {
+  name: string
+  type: 'file' | 'folder'
+  size?: number
+  modified?: string
+  path: string
+  extension?: string
+  uploadedBy?: string
+  uploadedAt?: string
+}
+
+function getFileExtension(filename: string): string {
+  const ext = path.extname(filename).toLowerCase()
+  return ext.startsWith('.') ? ext.substring(1) : ext
+}
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const folder = searchParams.get('folder') || ''
+
+  try {
+    const targetDir = path.join(PUBLIC_DIR, folder)
+
+    // Security check - prevent directory traversal
+    if (!targetDir.startsWith(PUBLIC_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true })
+    }
+
+    const files: FileItem[] = []
+    const items = fs.readdirSync(targetDir)
+
+    for (const item of items) {
+      // Skip hidden files
+      if (item.startsWith('.')) continue
+
+      const fullPath = path.join(targetDir, item)
+      const relativePath = path.join(folder, item).replace(/\\/g, '/')
+      const stats = fs.statSync(fullPath)
+
+      if (stats.isDirectory()) {
+        files.push({
+          name: item,
+          type: 'folder',
+          path: relativePath,
+          modified: stats.mtime.toISOString()
+        })
+      } else {
+        // Try to read metadata if it exists
+        const metadataPath = fullPath + '.meta.json'
+        let metadata: any = {}
+        if (fs.existsSync(metadataPath)) {
+          try {
+            metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'))
+          } catch (e) {
+            // Ignore metadata errors
+          }
+        }
+
+        files.push({
+          name: item,
+          type: 'file',
+          size: stats.size,
+          modified: stats.mtime.toISOString(),
+          path: relativePath,
+          extension: getFileExtension(item),
+          uploadedBy: metadata.uploadedBy || 'Anonymous',
+          uploadedAt: metadata.uploadedAt || stats.birthtime.toISOString()
+        })
+      }
+    }
+
+    return NextResponse.json({
+      files,
+      currentPath: folder,
+      isPublic: true
+    })
+  } catch (error) {
+    console.error('Error listing public files:', error)
+    return NextResponse.json(
+      { error: 'Failed to list public files' },
+      { status: 500 }
+    )
+  }
+}
+
+// Upload to public folder
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const file = formData.get('file') as File
+    const folder = formData.get('folder') as string || ''
+    const uploadedBy = formData.get('uploadedBy') as string || 'Anonymous'
+
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided' }, { status: 400 })
+    }
+
+    const targetDir = path.join(PUBLIC_DIR, folder)
+
+    // Security check
+    if (!targetDir.startsWith(PUBLIC_DIR)) {
+      return NextResponse.json({ error: 'Invalid path' }, { status: 400 })
+    }
+
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true })
+    }
+
+    const fileName = file.name
+    const filePath = path.join(targetDir, fileName)
+
+    // Check if file already exists
+    if (fs.existsSync(filePath)) {
+      // Add timestamp to filename
+      const timestamp = Date.now()
+      const ext = path.extname(fileName)
+      const baseName = path.basename(fileName, ext)
+      const newFileName = `${baseName}_${timestamp}${ext}`
+      const newFilePath = path.join(targetDir, newFileName)
+
+      const buffer = Buffer.from(await file.arrayBuffer())
+      fs.writeFileSync(newFilePath, buffer)
+
+      // Save metadata
+      const metadataPath = newFilePath + '.meta.json'
+      fs.writeFileSync(metadataPath, JSON.stringify({
+        uploadedBy,
+        uploadedAt: new Date().toISOString(),
+        originalName: fileName
+      }))
+
+      return NextResponse.json({
+        success: true,
+        message: 'File uploaded to public folder',
+        path: path.join(folder, newFileName).replace(/\\/g, '/'),
+        renamed: true
+      })
+    } else {
+      const buffer = Buffer.from(await file.arrayBuffer())
+      fs.writeFileSync(filePath, buffer)
+
+      // Save metadata
+      const metadataPath = filePath + '.meta.json'
+      fs.writeFileSync(metadataPath, JSON.stringify({
+        uploadedBy,
+        uploadedAt: new Date().toISOString()
+      }))
+
+      return NextResponse.json({
+        success: true,
+        message: 'File uploaded to public folder',
+        path: path.join(folder, fileName).replace(/\\/g, '/')
+      })
+    }
+  } catch (error) {
+    console.error('Error uploading to public folder:', error)
+    return NextResponse.json(
+      { error: 'Failed to upload file' },
+      { status: 500 }
+    )
+  }
+}

app/api/upload/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+const DATA_DIR = path.join(process.cwd(), 'data')
+const DOCS_DIR = path.join(DATA_DIR, 'documents')
+const MAX_FILE_SIZE = 50 * 1024 * 1024 // 50MB
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const file = formData.get('file') as File
+    const folderPath = formData.get('folder') as string || ''
+
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided' }, { status: 400 })
+    }
+
+    // Check file size
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json(
+        { error: `File size exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit` },
+        { status: 400 }
+      )
+    }
+
+    // Sanitize filename
+    const fileName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_')
+    const uploadDir = path.join(DOCS_DIR, folderPath)
+    const filePath = path.join(uploadDir, fileName)
+
+    // Security check
+    if (!filePath.startsWith(DOCS_DIR)) {
+      return NextResponse.json({ error: 'Invalid upload path' }, { status: 400 })
+    }
+
+    // Create directory if it doesn't exist
+    if (!fs.existsSync(uploadDir)) {
+      fs.mkdirSync(uploadDir, { recursive: true })
+    }
+
+    // Check if file already exists
+    if (fs.existsSync(filePath)) {
+      // Add timestamp to filename if it exists
+      const timestamp = Date.now()
+      const ext = path.extname(fileName)
+      const baseName = path.basename(fileName, ext)
+      const newFileName = `${baseName}_${timestamp}${ext}`
+      const newFilePath = path.join(uploadDir, newFileName)
+
+      // Convert file to buffer and save
+      const bytes = await file.arrayBuffer()
+      const buffer = Buffer.from(bytes)
+      fs.writeFileSync(newFilePath, buffer)
+
+      return NextResponse.json({
+        success: true,
+        message: 'File uploaded (renamed due to conflict)',
+        fileName: newFileName,
+        path: path.join(folderPath, newFileName).replace(/\\/g, '/'),
+        size: file.size
+      })
+    }
+
+    // Convert file to buffer and save
+    const bytes = await file.arrayBuffer()
+    const buffer = Buffer.from(bytes)
+    fs.writeFileSync(filePath, buffer)
+
+    return NextResponse.json({
+      success: true,
+      message: 'File uploaded successfully',
+      fileName: fileName,
+      path: path.join(folderPath, fileName).replace(/\\/g, '/'),
+      size: file.size
+    })
+  } catch (error) {
+    console.error('Error uploading file:', error)
+    return NextResponse.json(
+      { error: 'Failed to upload file' },
+      { status: 500 }
+    )
+  }
+}

app/components/AboutModal.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { X, Info, HardDrive, Cpu, Globe, Key } from '@phosphor-icons/react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface AboutModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+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 (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 bg-black/50 z-[100]" onClick={onClose} />
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            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>
+
+              {/* 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>
+
+                <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>
+              </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"
+              >
+                <X size={20} weight="bold" />
+              </button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/BackgroundSelector.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import React, { useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X, Upload, Image, Check } from '@phosphor-icons/react'
+
+interface BackgroundSelectorProps {
+  isOpen: boolean
+  onClose: () => void
+  onSelectBackground: (background: string | File) => void
+  currentBackground: string
+}
+
+const presetBackgrounds = [
+  {
+    id: 'gradient-purple',
+    name: 'Ubuntu Purple',
+    style: 'linear-gradient(135deg, #77216F 0%, #5E2750 50%, #2C001E 100%)'
+  },
+  {
+    id: 'gradient-blue',
+    name: 'Ocean Blue',
+    style: 'linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%)'
+  },
+  {
+    id: 'gradient-green',
+    name: 'Forest Green',
+    style: 'linear-gradient(135deg, #134e5e 0%, #71b280 50%, #a8e063 100%)'
+  },
+  {
+    id: 'gradient-orange',
+    name: 'Sunset Orange',
+    style: 'linear-gradient(135deg, #ff512f 0%, #dd2476 50%, #f09819 100%)'
+  },
+  {
+    id: 'gradient-dark',
+    name: 'Dark Mode',
+    style: 'linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%)'
+  },
+  {
+    id: 'gradient-cosmic',
+    name: 'Cosmic',
+    style: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'
+  }
+]
+
+export function BackgroundSelector({
+  isOpen,
+  onClose,
+  onSelectBackground,
+  currentBackground
+}: BackgroundSelectorProps) {
+  const [selectedTab, setSelectedTab] = useState<'presets' | 'upload'>('presets')
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const result = e.target?.result as string
+        setUploadedImage(result)
+        onSelectBackground(file)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+          />
+
+          {/* Modal */}
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: "spring", damping: 20, stiffness: 300 }}
+            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-2xl bg-[#2C2C2C]/95 backdrop-blur-md rounded-xl shadow-2xl z-50 border border-white/10"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-6 border-b border-white/10">
+              <h2 className="text-xl font-semibold text-white">Change Desktop Background</h2>
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-white transition-colors p-1 hover:bg-white/10 rounded-lg"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-white/10">
+              <button
+                onClick={() => setSelectedTab('presets')}
+                className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+                  selectedTab === 'presets'
+                    ? 'text-white border-b-2 border-blue-500'
+                    : 'text-gray-400 hover:text-white'
+                }`}
+              >
+                Gallery
+              </button>
+              <button
+                onClick={() => setSelectedTab('upload')}
+                className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+                  selectedTab === 'upload'
+                    ? 'text-white border-b-2 border-blue-500'
+                    : 'text-gray-400 hover:text-white'
+                }`}
+              >
+                Upload Image
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-6">
+              {selectedTab === 'presets' ? (
+                <div className="grid grid-cols-3 gap-4">
+                  {presetBackgrounds.map((bg) => (
+                    <button
+                      key={bg.id}
+                      onClick={() => onSelectBackground(bg.id)}
+                      className={`relative aspect-video rounded-lg overflow-hidden border-2 transition-all ${
+                        currentBackground === bg.id
+                          ? 'border-blue-500 scale-105'
+                          : 'border-white/20 hover:border-white/40'
+                      }`}
+                    >
+                      <div
+                        className="w-full h-full"
+                        style={{ background: bg.style }}
+                      />
+                      {currentBackground === bg.id && (
+                        <div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                          <Check size={14} weight="bold" className="text-white" />
+                        </div>
+                      )}
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/50 backdrop-blur-sm px-2 py-1">
+                        <span className="text-xs text-white">{bg.name}</span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-12">
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleFileUpload}
+                    className="hidden"
+                  />
+
+                  {uploadedImage ? (
+                    <div className="relative w-full max-w-md">
+                      <img
+                        src={uploadedImage}
+                        alt="Uploaded background"
+                        className="w-full h-48 object-cover rounded-lg"
+                      />
+                      <button
+                        onClick={() => fileInputRef.current?.click()}
+                        className="mt-4 w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
+                      >
+                        Choose Different Image
+                      </button>
+                    </div>
+                  ) : (
+                    <>
+                      <div
+                        onClick={() => fileInputRef.current?.click()}
+                        className="w-32 h-32 border-2 border-dashed border-white/30 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-white/50 transition-colors"
+                      >
+                        <Upload size={32} className="text-gray-400 mb-2" />
+                        <span className="text-sm text-gray-400">Click to upload</span>
+                      </div>
+                      <p className="mt-4 text-sm text-gray-400">
+                        Supported formats: JPG, PNG, WEBP, GIF
+                      </p>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="p-6 pt-0 flex gap-3 justify-end">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 text-gray-300 hover:text-white transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-600 transition-all"
+              >
+                Apply
+              </button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/Calendar.tsx

@@ -0,0 +1,301 @@
+'use client'
+
+import React, { useState } from 'react'
+import { X, Minus, Square, CaretLeft, CaretRight } from '@phosphor-icons/react'
+import { motion } from 'framer-motion'
+import { useKV } from '../hooks/useKV'
+
+interface CalendarProps {
+  onClose: () => void
+}
+
+interface Event {
+  id: string
+  date: string
+  title: string
+  type: 'holiday' | 'custom'
+}
+
+const defaultHolidays: Event[] = [
+  { id: '1', date: '2025-01-01', title: 'New Year\'s Day', type: 'holiday' },
+  { id: '2', date: '2025-02-14', title: 'Valentine\'s Day', type: 'holiday' },
+  { id: '3', date: '2025-03-17', title: 'St. Patrick\'s Day', type: 'holiday' },
+  { id: '4', date: '2025-04-20', title: 'Easter Sunday', type: 'holiday' },
+  { id: '5', date: '2025-05-11', title: 'Mother\'s Day', type: 'holiday' },
+  { id: '6', date: '2025-06-15', title: 'Father\'s Day', type: 'holiday' },
+  { id: '7', date: '2025-07-04', title: 'Independence Day', type: 'holiday' },
+  { id: '8', date: '2025-10-31', title: 'Halloween', type: 'holiday' },
+  { id: '9', date: '2025-11-27', title: 'Thanksgiving', type: 'holiday' },
+  { id: '10', date: '2025-12-25', title: 'Christmas Day', type: 'holiday' },
+  { id: '11', date: '2025-12-31', title: 'New Year\'s Eve', type: 'holiday' },
+]
+
+export function Calendar({ onClose }: CalendarProps) {
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [windowPos, setWindowPos] = useState({ x: 100, y: 100 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [events, setEvents] = useKV<Event[]>('calendar-events', defaultHolidays)
+  const [selectedDay, setSelectedDay] = useState<number | null>(null)
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.window-controls')) return
+    setIsDragging(true)
+    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (isDragging) {
+      setWindowPos({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      })
+    }
+  }
+
+  const handleMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  }, [isDragging, dragStart])
+
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ]
+
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+  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 today = new Date()
+  const isToday = (day: number | null) => {
+    if (!day) return false
+    return (
+      day === today.getDate() &&
+      currentDate.getMonth() === today.getMonth() &&
+      currentDate.getFullYear() === today.getFullYear()
+    )
+  }
+
+  const getEventsForDay = (day: number | null) => {
+    if (!day || !events) return []
+    const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+    return events.filter(event => event.date === dateStr)
+  }
+
+  const hasEvent = (day: number | null) => {
+    return getEventsForDay(day).length > 0
+  }
+
+  const previousMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1))
+    setSelectedDay(null)
+  }
+
+  const nextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1))
+    setSelectedDay(null)
+  }
+
+  const handleDayClick = (day: number | null) => {
+    if (day) {
+      setSelectedDay(day)
+    }
+  }
+
+  const selectedDayEvents = selectedDay ? getEventsForDay(selectedDay) : []
+
+  return (
+    <motion.div
+      style={{ left: windowPos.x, top: windowPos.y }}
+      className="fixed w-[420px] bg-white rounded-lg shadow-2xl overflow-hidden flex flex-col z-30 select-none"
+    >
+      <div
+        onMouseDown={handleMouseDown}
+        className="h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-3 cursor-move"
+      >
+        <div className="flex items-center gap-2 flex-1">
+          <div className="flex items-center gap-1 window-controls">
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                onClose()
+              }}
+              className="w-5 h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group transition-colors"
+            >
+              <X size={12} weight="bold" className="text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+            </button>
+            <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group transition-colors">
+              <Minus size={12} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 transition-opacity" />
+            </button>
+            <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group transition-colors">
+              <Square size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 transition-opacity" />
+            </button>
+          </div>
+          <span className="text-sm font-medium text-[#2c2c2c] ml-2">Calendar</span>
+        </div>
+      </div>
+
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-4">
+          <button
+            onClick={previousMonth}
+            className="p-2 hover:bg-[#f0f0f0] rounded"
+          >
+            <CaretLeft size={20} weight="bold" />
+          </button>
+          <div className="text-base font-semibold text-[#2c2c2c]">
+            {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
+          </div>
+          <button
+            onClick={nextMonth}
+            className="p-2 hover:bg-[#f0f0f0] rounded"
+          >
+            <CaretRight size={20} weight="bold" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-7 gap-1 mb-2">
+          {daysOfWeek.map((day) => (
+            <div
+              key={day}
+              className="text-center text-xs font-medium text-[#666] py-1"
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-1">
+          {days.map((day, index) => (
+            day ? (
+              <button
+                key={index}
+                onClick={() => handleDayClick(day)}
+                className={`
+                  aspect-square flex flex-col items-center justify-center text-sm rounded relative
+                  hover:bg-[#f0f0f0]
+                  ${isToday(day) ? 'bg-[#E95420] text-white hover:bg-[#d14818] font-bold' : 'text-[#2c2c2c]'}
+                  ${selectedDay === day && !isToday(day) ? 'bg-[#f0f0f0] ring-2 ring-[#E95420]' : ''}
+                `}
+              >
+                <span>{day}</span>
+                {hasEvent(day) && (
+                  <div className="absolute bottom-1 flex gap-0.5">
+                    {getEventsForDay(day).slice(0, 3).map((event, i) => (
+                      <div
+                        key={i}
+                        className={`w-1 h-1 rounded-full ${
+                          event.type === 'holiday'
+                            ? isToday(day) ? 'bg-white' : 'bg-purple-500'
+                            : isToday(day) ? 'bg-white' : 'bg-blue-500'
+                        }`}
+                      />
+                    ))}
+                  </div>
+                )}
+              </button>
+            ) : (
+              <div
+                key={index}
+                className="aspect-square"
+              />
+            )
+          ))}
+        </div>
+
+        {selectedDayEvents.length > 0 && (
+          <div className="mt-4 pt-4 border-t border-[#e0e0e0]">
+            <div className="text-xs text-[#666] mb-2">
+              {monthNames[currentDate.getMonth()]} {selectedDay}, {currentDate.getFullYear()}
+            </div>
+            <div className="space-y-2 max-h-32 overflow-y-auto">
+              {selectedDayEvents.map((event) => (
+                <div
+                  key={event.id}
+                  className="flex items-start gap-2 p-2 bg-[#f9f9f9] rounded"
+                >
+                  <div
+                    className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
+                      event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
+                    }`}
+                  />
+                  <div className="flex-1">
+                    <div className="text-sm font-medium text-[#2c2c2c]">
+                      {event.title}
+                    </div>
+                    <div className="text-xs text-[#666]">
+                      {event.type === 'holiday' ? 'Holiday' : 'Event'}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {!selectedDay && (
+          <div className="mt-4 pt-4 border-t border-[#e0e0e0]">
+            <div className="text-xs text-[#666] mb-2">Today</div>
+            <div className="text-sm font-medium text-[#2c2c2c]">
+              {today.toLocaleDateString('en-US', { 
+                weekday: 'long', 
+                year: 'numeric', 
+                month: 'long', 
+                day: 'numeric' 
+              })}
+            </div>
+            {getEventsForDay(today.getDate()).length > 0 && (
+              <div className="mt-3 space-y-2">
+                {getEventsForDay(today.getDate()).map((event) => (
+                  <div
+                    key={event.id}
+                    className="flex items-start gap-2 p-2 bg-[#fff3e6] rounded"
+                  >
+                    <div
+                      className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
+                        event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
+                      }`}
+                    />
+                    <div className="flex-1">
+                      <div className="text-sm font-medium text-[#2c2c2c]">
+                        {event.title}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+}

app/components/ClaudeIntegration.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import {
+  Upload,
+  Robot,
+  FileText,
+  CheckCircle,
+  Warning,
+  Info,
+  Copy,
+  Download
+} from '@phosphor-icons/react'
+
+interface ClaudeIntegrationProps {
+  file: File | null
+  onClose: () => void
+}
+
+export function ClaudeIntegration({ file, onClose }: ClaudeIntegrationProps) {
+  const [uploadMethod, setUploadMethod] = useState<'direct' | 'chunked' | 'reference'>('direct')
+  const [processing, setProcessing] = useState(false)
+  const [result, setResult] = useState<string>('')
+
+  const handleProcess = async () => {
+    if (!file) return
+
+    setProcessing(true)
+
+    try {
+      if (uploadMethod === 'direct') {
+        // Direct upload - best for small files < 1MB
+        const content = await file.text()
+        setResult(`File: ${file.name}\n\nContent:\n${content}`)
+      } else if (uploadMethod === 'chunked') {
+        // Chunked upload - for larger files, split into manageable chunks
+        const CHUNK_SIZE = 50000 // 50KB chunks
+        const content = await file.text()
+        const chunks = []
+
+        for (let i = 0; i < content.length; i += CHUNK_SIZE) {
+          chunks.push(content.slice(i, i + CHUNK_SIZE))
+        }
+
+        setResult(
+          `File: ${file.name}\n` +
+          `Total chunks: ${chunks.length}\n` +
+          `Chunk size: ${CHUNK_SIZE} characters\n\n` +
+          `Instructions for Claude:\n` +
+          `This file has been split into ${chunks.length} chunks.\n` +
+          `You can process each chunk sequentially.\n\n` +
+          `First chunk:\n${chunks[0].slice(0, 500)}...`
+        )
+      } else {
+        // Reference method - store file and provide reference
+        setResult(
+          `File Reference Created:\n` +
+          `Name: ${file.name}\n` +
+          `Size: ${formatFileSize(file.size)}\n` +
+          `Type: ${file.type}\n\n` +
+          `This file has been stored in the system.\n` +
+          `You can reference it by name in your conversation with Claude.\n` +
+          `Claude can access and analyze the file content when needed.`
+        )
+      }
+    } catch (error) {
+      console.error('Error processing file:', error)
+      setResult('Error processing file')
+    } finally {
+      setProcessing(false)
+    }
+  }
+
+  const formatFileSize = (bytes: number) => {
+    const units = ['B', 'KB', 'MB', 'GB']
+    let size = bytes
+    let unitIndex = 0
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024
+      unitIndex++
+    }
+
+    return `${size.toFixed(2)} ${units[unitIndex]}`
+  }
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(result)
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <motion.div
+        initial={{ scale: 0.9 }}
+        animate={{ scale: 1 }}
+        className="bg-[#2C2C2C]/95 backdrop-blur-md rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden border border-white/10"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="p-6 border-b border-white/10">
+          <div className="flex items-center gap-3">
+            <Robot size={24} className="text-blue-400" />
+            <h2 className="text-xl font-semibold text-white">Claude Integration</h2>
+          </div>
+          <p className="text-sm text-gray-400 mt-2">
+            Optimize file upload for Claude to preserve context
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
+          {file && (
+            <div className="bg-white/5 rounded-lg p-4">
+              <div className="flex items-center gap-3">
+                <FileText size={24} className="text-gray-400" />
+                <div>
+                  <p className="text-white font-medium">{file.name}</p>
+                  <p className="text-sm text-gray-400">{formatFileSize(file.size)}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Upload Methods */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-gray-300 uppercase tracking-wider">
+              Upload Method
+            </h3>
+
+            <label className="flex items-start gap-3 p-3 rounded-lg border border-white/10 hover:border-white/20 cursor-pointer transition-colors">
+              <input
+                type="radio"
+                value="direct"
+                checked={uploadMethod === 'direct'}
+                onChange={(e) => setUploadMethod(e.target.value as any)}
+                className="mt-1"
+              />
+              <div>
+                <p className="text-white font-medium">Direct Upload</p>
+                <p className="text-xs text-gray-400">
+                  Best for small files (&lt; 1MB). Uploads entire content at once.
+                </p>
+              </div>
+            </label>
+
+            <label className="flex items-start gap-3 p-3 rounded-lg border border-white/10 hover:border-white/20 cursor-pointer transition-colors">
+              <input
+                type="radio"
+                value="chunked"
+                checked={uploadMethod === 'chunked'}
+                onChange={(e) => setUploadMethod(e.target.value as any)}
+                className="mt-1"
+              />
+              <div>
+                <p className="text-white font-medium">Chunked Upload</p>
+                <p className="text-xs text-gray-400">
+                  For larger files. Splits content into manageable chunks.
+                </p>
+              </div>
+            </label>
+
+            <label className="flex items-start gap-3 p-3 rounded-lg border border-white/10 hover:border-white/20 cursor-pointer transition-colors">
+              <input
+                type="radio"
+                value="reference"
+                checked={uploadMethod === 'reference'}
+                onChange={(e) => setUploadMethod(e.target.value as any)}
+                className="mt-1"
+              />
+              <div>
+                <p className="text-white font-medium">Reference Method</p>
+                <p className="text-xs text-gray-400">
+                  Store file and provide reference. Claude accesses when needed.
+                </p>
+              </div>
+            </label>
+          </div>
+
+          {/* Info Box */}
+          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 flex gap-3">
+            <Info size={20} className="text-blue-400 flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-gray-300">
+              <p className="font-medium mb-1">Context Preservation Tips:</p>
+              <ul className="space-y-1 text-xs text-gray-400">
+                <li>• Use direct upload for code files and short documents</li>
+                <li>• Use chunked upload for large documents or datasets</li>
+                <li>• Use reference method for binary files or archives</li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Result */}
+          {result && (
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <CheckCircle size={20} className="text-green-400" />
+                  <span className="text-sm font-medium text-green-400">Ready for Claude</span>
+                </div>
+                <button
+                  onClick={copyToClipboard}
+                  className="text-gray-400 hover:text-white transition-colors p-1"
+                  title="Copy to clipboard"
+                >
+                  <Copy size={18} />
+                </button>
+              </div>
+              <pre className="text-xs text-gray-300 whitespace-pre-wrap font-mono max-h-40 overflow-y-auto">
+                {result}
+              </pre>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-6 pt-0 flex gap-3 justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-gray-300 hover:text-white transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleProcess}
+            disabled={!file || processing}
+            className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-600 transition-all disabled:opacity-50"
+          >
+            {processing ? 'Processing...' : 'Process File'}
+          </button>
+        </div>
+      </motion.div>
+    </motion.div>
+  )
+}

app/components/Clock.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Window from './Window'
+
+interface ClockProps {
+  onClose: () => void
+}
+
+export function Clock({ onClose }: ClockProps) {
+  const [time, setTime] = useState(new Date())
+  const [viewMode, setViewMode] = useState<'analog' | 'digital' | 'world'>('analog')
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date())
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  // Calculate rotation angles for clock hands
+  const seconds = time.getSeconds()
+  const minutes = time.getMinutes()
+  const hours = time.getHours()
+
+  const secondDegrees = (seconds / 60) * 360 - 90
+  const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) - 90
+  const hourDegrees = ((hours % 12 / 12) * 360) + ((minutes / 60) * 30) - 90
+
+  const worldClocks = [
+    { city: 'New York', offset: -5 },
+    { city: 'London', offset: 0 },
+    { city: 'Tokyo', offset: 9 },
+    { city: 'Sydney', offset: 11 }
+  ]
+
+  const getWorldTime = (offset: number) => {
+    const utc = time.getTime() + (time.getTimezoneOffset() * 60000)
+    const cityTime = new Date(utc + (3600000 * offset))
+    return cityTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  return (
+    <Window
+      id="clock"
+      title="Clock"
+      isOpen={true}
+      onClose={onClose}
+      width={380}
+      height={480}
+      x={window.innerWidth / 2 - 190}
+      y={window.innerHeight / 2 - 240}
+      darkMode={true}
+      className="clock-app-window"
+    >
+      <div className="flex flex-col h-full bg-gradient-to-b from-gray-900 via-gray-800 to-black">
+        {/* Tab Bar */}
+        <div className="flex border-b border-gray-700 bg-gray-900/50">
+          <button
+            onClick={() => setViewMode('analog')}
+            className={`flex-1 py-3 text-sm font-medium transition-all ${
+              viewMode === 'analog'
+                ? 'text-orange-400 border-b-2 border-orange-400'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Analog
+          </button>
+          <button
+            onClick={() => setViewMode('digital')}
+            className={`flex-1 py-3 text-sm font-medium transition-all ${
+              viewMode === 'digital'
+                ? 'text-orange-400 border-b-2 border-orange-400'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            Digital
+          </button>
+          <button
+            onClick={() => setViewMode('world')}
+            className={`flex-1 py-3 text-sm font-medium transition-all ${
+              viewMode === 'world'
+                ? 'text-orange-400 border-b-2 border-orange-400'
+                : 'text-gray-400 hover:text-white'
+            }`}
+          >
+            World Clock
+          </button>
+        </div>
+
+        {/* Clock Display */}
+        <div className="flex-1 flex items-center justify-center p-6">
+          {viewMode === 'analog' && (
+            <div className="flex flex-col items-center">
+              <div className="relative w-64 h-64">
+                {/* Clock Face */}
+                <div className="absolute inset-0 rounded-full bg-gradient-to-br from-gray-800 to-black shadow-inner border-4 border-gray-700">
+                  {/* Hour Markers */}
+                  {[...Array(12)].map((_, i) => (
+                    <div key={i}>
+                      <div
+                        className="absolute bg-white"
+                        style={{
+                          width: i % 3 === 0 ? '3px' : '1px',
+                          height: i % 3 === 0 ? '12px' : '8px',
+                          top: '10px',
+                          left: '50%',
+                          transform: `translateX(-50%) rotate(${i * 30}deg)`,
+                          transformOrigin: '50% 118px'
+                        }}
+                      />
+                    </div>
+                  ))}
+
+                  {/* Clock Hands */}
+                  <div
+                    className="absolute top-1/2 left-1/2 w-2 h-20 bg-white rounded-full origin-bottom shadow-lg"
+                    style={{
+                      transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)`
+                    }}
+                  />
+                  <div
+                    className="absolute top-1/2 left-1/2 w-1.5 h-28 bg-gray-300 rounded-full origin-bottom shadow-lg"
+                    style={{
+                      transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)`
+                    }}
+                  />
+                  <div
+                    className="absolute top-1/2 left-1/2 w-0.5 h-32 bg-orange-500 rounded-full origin-bottom"
+                    style={{
+                      transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)`
+                    }}
+                  />
+
+                  {/* Center Dot */}
+                  <div className="absolute top-1/2 left-1/2 w-4 h-4 bg-orange-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg z-10" />
+                </div>
+              </div>
+
+              {/* Digital Time Below Analog Clock */}
+              <div className="mt-6 text-center">
+                <div className="text-2xl font-mono text-gray-300">
+                  {time.toLocaleTimeString()}
+                </div>
+                <div className="text-sm text-gray-500 mt-2">
+                  {time.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {viewMode === 'digital' && (
+            <div className="text-center">
+              <div className="text-7xl font-mono font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">
+                {time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </div>
+              <div className="mt-8 text-2xl text-gray-400">
+                {time.toLocaleDateString('en-US', { weekday: 'long' })}
+              </div>
+              <div className="text-lg text-gray-500">
+                {time.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+              </div>
+            </div>
+          )}
+
+          {viewMode === 'world' && (
+            <div className="w-full max-w-sm">
+              <div className="space-y-4">
+                {worldClocks.map((clock) => (
+                  <div key={clock.city} className="bg-gray-800 rounded-lg p-4 flex justify-between items-center">
+                    <div>
+                      <div className="text-white font-medium">{clock.city}</div>
+                      <div className="text-xs text-gray-400">UTC{clock.offset >= 0 ? '+' : ''}{clock.offset}</div>
+                    </div>
+                    <div className="text-2xl font-mono text-orange-400">
+                      {getWorldTime(clock.offset)}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/CodeExecutor.tsx

@@ -0,0 +1,306 @@
+'use client'
+
+import React, { useState } from 'react'
+import Window from './Window'
+import Editor from '@monaco-editor/react'
+import {
+  Play,
+  Code,
+  FileText,
+  Download,
+  Copy,
+  CheckCircle,
+  Warning,
+  CloudArrowUp
+} from '@phosphor-icons/react'
+
+interface CodeExecutorProps {
+  onClose: () => void
+  initialCode?: string
+  language?: string
+}
+
+export function CodeExecutor({ onClose, initialCode = '', language = 'python' }: CodeExecutorProps) {
+  const [code, setCode] = useState(initialCode || `# Reuben OS Code Executor
+# Write your Python code here and click Run to execute
+
+import matplotlib.pyplot as plt
+import numpy as np
+
+# Create sample data
+x = np.linspace(0, 10, 100)
+y = np.sin(x)
+
+# Create plot
+plt.figure(figsize=(10, 6))
+plt.plot(x, y, 'b-', linewidth=2, label='sin(x)')
+plt.grid(True, alpha=0.3)
+plt.xlabel('X axis')
+plt.ylabel('Y axis')
+plt.title('Sample Plot in Reuben OS')
+plt.legend()
+
+# This will automatically save and display the plot
+plt.show()
+
+print("Plot generated successfully!")
+print(f"X range: {x[0]:.2f} to {x[-1]:.2f}")
+print(f"Y range: {y.min():.2f} to {y.max():.2f}")`)
+
+  const [output, setOutput] = useState('')
+  const [isRunning, setIsRunning] = useState(false)
+  const [error, setError] = useState('')
+  const [plotPath, setPlotPath] = useState('')
+  const [selectedLanguage, setSelectedLanguage] = useState(language)
+
+  const executeCode = async () => {
+    setIsRunning(true)
+    setOutput('')
+    setError('')
+    setPlotPath('')
+
+    try {
+      // Save code to file system first
+      const sessionId = `exec_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+      const saveResponse = await fetch('/api/code/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          code: [{
+            name: `script.${selectedLanguage === 'python' ? 'py' : selectedLanguage === 'javascript' ? 'js' : 'html'}`,
+            language: selectedLanguage,
+            content: code
+          }],
+          timestamp: Date.now()
+        })
+      })
+
+      if (!saveResponse.ok) {
+        throw new Error('Failed to save code')
+      }
+
+      // Execute based on language
+      if (selectedLanguage === 'python') {
+        // For Python, we need MCP to execute it
+        setOutput('Python code saved! Use MCP tools to execute:\n')
+        setOutput(prev => prev + `\nSession ID: ${sessionId}\n`)
+        setOutput(prev => prev + `\nFile saved to: data/vscode_sessions/${sessionId}/script.py\n`)
+        setOutput(prev => prev + '\n📝 Note: To execute Python code, use the MCP execute_python_code tool from Claude Desktop.')
+
+        // Show sample MCP command
+        setOutput(prev => prev + '\n\n💡 MCP Command Example:\n')
+        setOutput(prev => prev + 'execute_python_code(code=<your_code>, save_output=true)\n')
+
+        // If it's matplotlib code, suggest using execute_matplotlib_code
+        if (code.includes('matplotlib') || code.includes('plt.')) {
+          setOutput(prev => prev + '\n🎨 For matplotlib plots, use:\n')
+          setOutput(prev => prev + 'execute_matplotlib_code(code=<your_code>, output_format="png")')
+        }
+      } else if (selectedLanguage === 'html' || selectedLanguage === 'javascript') {
+        // For HTML/JS, we can execute in browser
+        executeWebCode()
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error occurred')
+    } finally {
+      setIsRunning(false)
+    }
+  }
+
+  const executeWebCode = () => {
+    if (selectedLanguage === 'html') {
+      // Create iframe for HTML preview
+      const iframe = document.createElement('iframe')
+      iframe.style.width = '100%'
+      iframe.style.height = '100%'
+      iframe.style.border = 'none'
+      iframe.srcdoc = code
+
+      const outputElement = document.getElementById('code-output')
+      if (outputElement) {
+        outputElement.innerHTML = ''
+        outputElement.appendChild(iframe)
+      }
+      setOutput('HTML rendered in preview pane')
+    } else if (selectedLanguage === 'javascript') {
+      // Execute JavaScript in sandboxed environment
+      try {
+        // Capture console.log outputs
+        const logs: string[] = []
+        const originalLog = console.log
+        console.log = (...args) => {
+          logs.push(args.map(arg => String(arg)).join(' '))
+        }
+
+        // Execute the code
+        const func = new Function(code)
+        const result = func()
+
+        // Restore console.log
+        console.log = originalLog
+
+        // Display output
+        let outputText = logs.join('\n')
+        if (result !== undefined) {
+          outputText += `\n\nReturn value: ${JSON.stringify(result, null, 2)}`
+        }
+        setOutput(outputText || 'Code executed successfully (no output)')
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'JavaScript execution error')
+      }
+    }
+  }
+
+  const copyOutput = () => {
+    navigator.clipboard.writeText(output || error)
+
+    // Show copied feedback
+    const copiedDiv = document.createElement('div')
+    copiedDiv.className = 'fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg z-[200] flex items-center gap-2'
+    copiedDiv.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h8a2 2 0 100-4 1 1 0 100-2 2 2 0 00-2 2H8a2 2 0 00-2-2z" clip-rule="evenodd"></path></svg> Copied!'
+    document.body.appendChild(copiedDiv)
+
+    setTimeout(() => {
+      copiedDiv.remove()
+    }, 2000)
+  }
+
+  return (
+    <Window
+      id="code-executor"
+      title="Code Executor - Reuben OS"
+      isOpen={true}
+      onClose={onClose}
+      width={1200}
+      height={700}
+      x={100}
+      y={50}
+      darkMode={true}
+    >
+      <div className="flex flex-col h-full bg-[#1e1e1e]">
+        {/* Header */}
+        <div className="flex items-center justify-between bg-[#2d2d2d] px-4 py-2 border-b border-[#3e3e3e]">
+          <div className="flex items-center gap-4">
+            <Code size={20} weight="bold" className="text-blue-400" />
+            <select
+              value={selectedLanguage}
+              onChange={(e) => setSelectedLanguage(e.target.value)}
+              className="bg-[#1e1e1e] text-white px-3 py-1 rounded border border-[#3e3e3e] text-sm"
+            >
+              <option value="python">Python</option>
+              <option value="javascript">JavaScript</option>
+              <option value="html">HTML</option>
+            </select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={executeCode}
+              disabled={isRunning}
+              className="px-4 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 text-white rounded text-sm flex items-center gap-2"
+            >
+              <Play size={16} weight="fill" />
+              {isRunning ? 'Running...' : 'Run'}
+            </button>
+
+            <button
+              onClick={() => setCode('')}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Code Editor */}
+          <div className="w-1/2 border-r border-[#3e3e3e]">
+            <Editor
+              theme="vs-dark"
+              language={selectedLanguage}
+              value={code}
+              onChange={(value) => setCode(value || '')}
+              options={{
+                minimap: { enabled: false },
+                fontSize: 14,
+                lineNumbers: 'on',
+                roundedSelection: false,
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                wordWrap: 'on'
+              }}
+            />
+          </div>
+
+          {/* Output Panel */}
+          <div className="w-1/2 flex flex-col bg-[#1e1e1e]">
+            <div className="flex items-center justify-between bg-[#252526] px-4 py-2 border-b border-[#3e3e3e]">
+              <span className="text-sm text-gray-300 flex items-center gap-2">
+                <FileText size={16} />
+                Output
+              </span>
+              <button
+                onClick={copyOutput}
+                className="text-gray-400 hover:text-white transition-colors"
+                disabled={!output && !error}
+              >
+                <Copy size={16} />
+              </button>
+            </div>
+
+            <div id="code-output" className="flex-1 p-4 font-mono text-sm overflow-auto">
+              {error ? (
+                <div className="text-red-400">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Warning size={16} />
+                    Error:
+                  </div>
+                  <pre className="whitespace-pre-wrap">{error}</pre>
+                </div>
+              ) : output ? (
+                <div className="text-green-400">
+                  <pre className="whitespace-pre-wrap">{output}</pre>
+                  {plotPath && (
+                    <div className="mt-4">
+                      <p className="text-blue-400 mb-2">Plot saved to:</p>
+                      <code className="bg-[#2d2d2d] px-2 py-1 rounded">{plotPath}</code>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="text-gray-500 flex items-center justify-center h-full">
+                  <div className="text-center">
+                    <Code size={48} className="mx-auto mb-4 opacity-20" />
+                    <p>Write code and click Run to see output</p>
+                    <p className="text-xs mt-2 text-gray-600">
+                      Python execution requires MCP tools from Claude Desktop
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Info Panel */}
+            <div className="bg-[#252526] p-3 border-t border-[#3e3e3e]">
+              <div className="text-xs text-gray-400">
+                {selectedLanguage === 'python' ? (
+                  <div className="flex items-center gap-2">
+                    <CloudArrowUp size={14} />
+                    <span>Python code is saved to disk. Use MCP tools to execute.</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <CheckCircle size={14} />
+                    <span>HTML/JS executes directly in browser sandbox.</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/CodePlayground.tsx

@@ -0,0 +1,668 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import Window from './Window'
+import Editor from '@monaco-editor/react'
+import {
+  Code,
+  Play,
+  FileHtml,
+  FileCss,
+  FileJs,
+  FilePy,
+  FileCode,
+  Download,
+  Upload,
+  FloppyDisk,
+  Eye,
+  EyeSlash,
+  ArrowsOutSimple,
+  ArrowsInSimple,
+  Plus,
+  X,
+  Globe,
+  Lock,
+  Users,
+  Folder,
+  Terminal as TerminalIcon,
+  Lightning
+} from '@phosphor-icons/react'
+
+interface CodePlaygroundProps {
+  onClose: () => void
+  userSession: string
+}
+
+interface Tab {
+  id: string
+  name: string
+  language: string
+  content: string
+  isPublic?: boolean
+  type: 'html' | 'css' | 'javascript' | 'python' | 'react' | 'flutter' | 'typescript'
+}
+
+interface ExecutionResult {
+  output: string
+  error?: string
+  timestamp: number
+}
+
+export function CodePlayground({ onClose, userSession }: CodePlaygroundProps) {
+  const [activeTab, setActiveTab] = useState<string>('main')
+  const [showPreview, setShowPreview] = useState(true)
+  const [showConsole, setShowConsole] = useState(true)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [executionResults, setExecutionResults] = useState<ExecutionResult[]>([])
+  const [publicFiles, setPublicFiles] = useState<Tab[]>([])
+  const previewRef = useRef<HTMLIFrameElement>(null)
+  const [draggedTab, setDraggedTab] = useState<string | null>(null)
+  const [dragOverTab, setDragOverTab] = useState<string | null>(null)
+
+  // Enhanced tab icons with more languages
+  const getTabIcon = (type: string) => {
+    const icons: Record<string, JSX.Element> = {
+      'html': <FileHtml size={16} weight="fill" className="text-orange-500" />,
+      'css': <FileCss size={16} weight="fill" className="text-blue-500" />,
+      'javascript': <FileJs size={16} weight="fill" className="text-yellow-500" />,
+      'typescript': <FileCode size={16} weight="fill" className="text-blue-600" />,
+      'python': <FilePy size={16} weight="fill" className="text-green-500" />,
+      'react': <FileJs size={16} weight="fill" className="text-cyan-500" />,
+      'flutter': <FileCode size={16} weight="fill" className="text-blue-400" />
+    }
+    return icons[type] || <Code size={16} weight="fill" className="text-gray-500" />
+  }
+
+  const [tabs, setTabs] = useState<Tab[]>([
+    {
+      id: 'main',
+      name: 'main.py',
+      language: 'python',
+      type: 'python',
+      content: `# Welcome to WebOS Code Playground!
+# You can write and execute Python code here
+
+def greet(name):
+    return f"Hello, {name}! Welcome to WebOS"
+
+# Example usage
+result = greet("Developer")
+print(result)
+
+# Your code here
+for i in range(5):
+    print(f"Count: {i}")
+`,
+      isPublic: false
+    }
+  ])
+
+  // Load public files from backend
+  useEffect(() => {
+    loadPublicFiles()
+  }, [])
+
+  const loadPublicFiles = async () => {
+    try {
+      const response = await fetch('/api/code/public')
+      if (response.ok) {
+        const files = await response.json()
+        setPublicFiles(files)
+      }
+    } catch (error) {
+      console.error('Failed to load public files:', error)
+    }
+  }
+
+  // Tab drag and drop handlers
+  const handleDragStart = (e: React.DragEvent, tabId: string) => {
+    setDraggedTab(tabId)
+    e.dataTransfer.effectAllowed = 'move'
+  }
+
+  const handleDragOver = (e: React.DragEvent, tabId: string) => {
+    e.preventDefault()
+    if (draggedTab && draggedTab !== tabId) {
+      setDragOverTab(tabId)
+    }
+  }
+
+  const handleDragLeave = () => {
+    setDragOverTab(null)
+  }
+
+  const handleDrop = (e: React.DragEvent, targetTabId: string) => {
+    e.preventDefault()
+
+    if (draggedTab && draggedTab !== targetTabId) {
+      const draggedIndex = tabs.findIndex(t => t.id === draggedTab)
+      const targetIndex = tabs.findIndex(t => t.id === targetTabId)
+
+      if (draggedIndex !== -1 && targetIndex !== -1) {
+        const newTabs = [...tabs]
+        const [draggedTabObj] = newTabs.splice(draggedIndex, 1)
+        newTabs.splice(targetIndex, 0, draggedTabObj)
+        setTabs(newTabs)
+      }
+    }
+
+    setDraggedTab(null)
+    setDragOverTab(null)
+  }
+
+  const handleDragEnd = () => {
+    setDraggedTab(null)
+    setDragOverTab(null)
+  }
+
+  // Create new tab with language selection
+  const createNewTab = (language: Tab['type']) => {
+    const templates: Record<Tab['type'], { name: string, content: string, lang: string }> = {
+      'python': {
+        name: 'script.py',
+        lang: 'python',
+        content: `# Python Script
+def main():
+    print("Hello from Python!")
+
+if __name__ == "__main__":
+    main()
+`
+      },
+      'javascript': {
+        name: 'script.js',
+        lang: 'javascript',
+        content: `// JavaScript Code
+console.log("Hello from JavaScript!");
+
+function calculate(a, b) {
+    return a + b;
+}
+
+console.log("Result:", calculate(5, 3));
+`
+      },
+      'typescript': {
+        name: 'script.ts',
+        lang: 'typescript',
+        content: `// TypeScript Code
+interface User {
+    name: string;
+    age: number;
+}
+
+function greetUser(user: User): void {
+    console.log(\`Hello, \${user.name}! You are \${user.age} years old.\`);
+}
+
+greetUser({ name: "Alice", age: 25 });
+`
+      },
+      'react': {
+        name: 'App.jsx',
+        lang: 'javascript',
+        content: `// React Component
+import React, { useState } from 'react';
+
+function App() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div>
+            <h1>React Counter</h1>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+
+export default App;
+`
+      },
+      'flutter': {
+        name: 'main.dart',
+        lang: 'dart',
+        content: `// Flutter Widget
+import 'package:flutter/material.dart';
+
+class MyWidget extends StatefulWidget {
+  @override
+  _MyWidgetState createState() => _MyWidgetState();
+}
+
+class _MyWidgetState extends State<MyWidget> {
+  int counter = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Flutter App')),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('Counter: $counter'),
+            ElevatedButton(
+              onPressed: () => setState(() => counter++),
+              child: Text('Increment'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+`
+      },
+      'html': {
+        name: 'index.html',
+        lang: 'html',
+        content: `<!DOCTYPE html>
+<html>
+<head>
+    <title>HTML Page</title>
+</head>
+<body>
+    <h1>Hello WebOS!</h1>
+</body>
+</html>`
+      },
+      'css': {
+        name: 'style.css',
+        lang: 'css',
+        content: `/* CSS Styles */
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+`
+      }
+    }
+
+    const template = templates[language]
+    const newTab: Tab = {
+      id: `tab_${Date.now()}`,
+      name: template.name,
+      language: template.lang,
+      type: language,
+      content: template.content,
+      isPublic: false
+    }
+
+    setTabs(prev => [...prev, newTab])
+    setActiveTab(newTab.id)
+  }
+
+  // Execute code based on language
+  const executeCode = async () => {
+    setIsExecuting(true)
+    const activeTabData = tabs.find(t => t.id === activeTab)
+
+    if (!activeTabData) {
+      setIsExecuting(false)
+      return
+    }
+
+    try {
+      const response = await fetch('/api/code/execute', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId: userSession,
+          language: activeTabData.type,
+          code: activeTabData.content,
+          timestamp: Date.now()
+        })
+      })
+
+      const result = await response.json()
+
+      setExecutionResults(prev => [...prev, {
+        output: result.output || 'No output',
+        error: result.error,
+        timestamp: Date.now()
+      }])
+    } catch (error) {
+      setExecutionResults(prev => [...prev, {
+        output: '',
+        error: `Execution failed: ${error}`,
+        timestamp: Date.now()
+      }])
+    }
+
+    setIsExecuting(false)
+  }
+
+  // Save to public folder
+  const saveToPublic = async () => {
+    const activeTabData = tabs.find(t => t.id === activeTab)
+    if (!activeTabData) return
+
+    setIsSaving(true)
+    try {
+      const response = await fetch('/api/code/public/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId: userSession,
+          file: {
+            ...activeTabData,
+            isPublic: true,
+            author: userSession
+          }
+        })
+      })
+
+      if (response.ok) {
+        setTabs(prev => prev.map(tab =>
+          tab.id === activeTab ? { ...tab, isPublic: true } : tab
+        ))
+        await loadPublicFiles()
+      }
+    } catch (error) {
+      console.error('Failed to save to public:', error)
+    }
+    setIsSaving(false)
+  }
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (!value) return
+
+    setTabs(prev => prev.map(tab =>
+      tab.id === activeTab ? { ...tab, content: value } : tab
+    ))
+  }
+
+  const activeTabContent = tabs.find(t => t.id === activeTab)
+
+  // Close tab
+  const closeTab = (tabId: string) => {
+    if (tabs.length === 1) return // Keep at least one tab
+
+    setTabs(prev => prev.filter(t => t.id !== tabId))
+    if (activeTab === tabId) {
+      setActiveTab(tabs[0].id)
+    }
+  }
+
+  // Load file from public
+  const loadPublicFile = (file: Tab) => {
+    const newTab: Tab = {
+      ...file,
+      id: `tab_${Date.now()}`,
+      isPublic: false
+    }
+    setTabs(prev => [...prev, newTab])
+    setActiveTab(newTab.id)
+  }
+
+  return (
+    <Window
+      id="code-playground"
+      title={`Code Playground - Session: ${userSession.substring(0, 8)}...`}
+      isOpen={true}
+      onClose={onClose}
+      width={isFullscreen ? window.innerWidth : 1400}
+      height={isFullscreen ? window.innerHeight - 32 : 850}
+      x={isFullscreen ? 0 : 50}
+      y={isFullscreen ? 32 : 30}
+      darkMode={true}
+      className="code-playground-window"
+    >
+      <div className="flex flex-col h-full bg-[#1e1e1e]">
+        {/* Toolbar */}
+        <div className="flex items-center justify-between bg-[#2d2d2d] px-4 py-2 border-b border-[#3e3e3e]">
+          <div className="flex items-center gap-3">
+            <Lightning size={20} weight="bold" className="text-yellow-400" />
+            <span className="text-gray-300 text-sm font-medium">Multi-Language Playground</span>
+            <div className="flex items-center gap-1 px-2 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400">
+              <Users size={14} />
+              <span>{userSession.substring(0, 8)}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={executeCode}
+              disabled={isExecuting}
+              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm flex items-center gap-2 disabled:opacity-50"
+            >
+              <Play size={16} weight="fill" />
+              {isExecuting ? 'Running...' : 'Run'}
+            </button>
+
+            <button
+              onClick={saveToPublic}
+              disabled={isSaving}
+              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm flex items-center gap-2 disabled:opacity-50"
+            >
+              <Globe size={16} />
+              {isSaving ? 'Publishing...' : 'Publish'}
+            </button>
+
+            <button
+              onClick={() => setShowConsole(!showConsole)}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm flex items-center gap-2"
+            >
+              <TerminalIcon size={16} />
+              Console
+            </button>
+
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm flex items-center gap-2"
+            >
+              {showPreview ? <EyeSlash size={16} /> : <Eye size={16} />}
+              Preview
+            </button>
+
+            <button
+              onClick={() => setIsFullscreen(!isFullscreen)}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
+            >
+              {isFullscreen ? <ArrowsInSimple size={16} /> : <ArrowsOutSimple size={16} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Main Content Area */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar - Public Files */}
+          <div className="w-64 bg-[#252526] border-r border-[#3e3e3e] flex flex-col">
+            <div className="p-3 border-b border-[#3e3e3e]">
+              <div className="flex items-center gap-2 text-gray-300 text-sm font-medium">
+                <Folder size={16} />
+                Public Files
+              </div>
+            </div>
+            <div className="flex-1 overflow-y-auto p-2">
+              {publicFiles.map(file => (
+                <button
+                  key={file.id}
+                  onClick={() => loadPublicFile(file)}
+                  className="w-full text-left px-2 py-1.5 text-xs text-gray-400 hover:bg-[#2d2d2d] rounded flex items-center gap-2"
+                >
+                  {getTabIcon(file.type)}
+                  <span className="truncate">{file.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Editor Section */}
+          <div className={`flex flex-col ${showPreview ? 'w-1/2' : 'flex-1'}`}>
+            {/* Tabs with drag and drop */}
+            <div className="flex bg-[#252526] border-b border-[#3e3e3e] items-center">
+              <div className="flex-1 flex overflow-x-auto">
+                {tabs.map(tab => (
+                  <div
+                    key={tab.id}
+                    draggable
+                    onDragStart={(e) => handleDragStart(e, tab.id)}
+                    onDragOver={(e) => handleDragOver(e, tab.id)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, tab.id)}
+                    onDragEnd={handleDragEnd}
+                    className={`
+                      flex items-center gap-2 px-3 py-2 text-sm border-r border-[#3e3e3e]
+                      cursor-move transition-all select-none
+                      ${activeTab === tab.id ? 'bg-[#1e1e1e] text-white' : 'text-gray-400 hover:text-white hover:bg-[#2d2d2d]'}
+                      ${dragOverTab === tab.id ? 'border-l-2 border-l-blue-500' : ''}
+                    `}
+                    onClick={() => setActiveTab(tab.id)}
+                  >
+                    {getTabIcon(tab.type)}
+                    <span>{tab.name}</span>
+                    {tab.isPublic && (
+                      <Globe size={12} className="text-green-400" />
+                    )}
+                    {tabs.length > 1 && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          closeTab(tab.id)
+                        }}
+                        className="ml-1 hover:bg-[#3e3e3e] rounded p-0.5"
+                      >
+                        <X size={12} />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              {/* Add new tab dropdown */}
+              <div className="relative group">
+                <button className="px-3 py-2 text-gray-400 hover:text-white hover:bg-[#2d2d2d]">
+                  <Plus size={16} />
+                </button>
+                <div className="absolute right-0 top-full mt-1 bg-[#252526] border border-[#3e3e3e] rounded shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
+                  <button
+                    onClick={() => createNewTab('python')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    Python
+                  </button>
+                  <button
+                    onClick={() => createNewTab('javascript')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    JavaScript
+                  </button>
+                  <button
+                    onClick={() => createNewTab('typescript')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    TypeScript
+                  </button>
+                  <button
+                    onClick={() => createNewTab('react')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    React
+                  </button>
+                  <button
+                    onClick={() => createNewTab('flutter')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    Flutter/Dart
+                  </button>
+                  <button
+                    onClick={() => createNewTab('html')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    HTML
+                  </button>
+                  <button
+                    onClick={() => createNewTab('css')}
+                    className="block w-full px-3 py-2 text-sm text-gray-300 hover:bg-[#2d2d2d] text-left"
+                  >
+                    CSS
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Monaco Editor */}
+            <div className={`flex-1 ${showConsole ? 'h-3/5' : ''}`}>
+              <Editor
+                height="100%"
+                language={activeTabContent?.language || 'python'}
+                value={activeTabContent?.content || ''}
+                onChange={handleEditorChange}
+                theme="vs-dark"
+                options={{
+                  minimap: { enabled: true },
+                  fontSize: 14,
+                  wordWrap: 'on',
+                  automaticLayout: true,
+                  scrollBeyondLastLine: false,
+                  tabSize: 4
+                }}
+              />
+            </div>
+
+            {/* Console Output */}
+            {showConsole && (
+              <div className="h-2/5 bg-[#1e1e1e] border-t border-[#3e3e3e] flex flex-col">
+                <div className="flex items-center justify-between px-3 py-1 bg-[#252526] border-b border-[#3e3e3e]">
+                  <span className="text-xs text-gray-400">Console Output</span>
+                  <button
+                    onClick={() => setExecutionResults([])}
+                    className="text-xs text-gray-400 hover:text-white"
+                  >
+                    Clear
+                  </button>
+                </div>
+                <div className="flex-1 overflow-y-auto p-3 font-mono text-xs">
+                  {executionResults.map((result, index) => (
+                    <div key={index} className="mb-2">
+                      <div className="text-gray-500 text-xs mb-1">
+                        [{new Date(result.timestamp).toLocaleTimeString()}]
+                      </div>
+                      {result.error ? (
+                        <div className="text-red-400">{result.error}</div>
+                      ) : (
+                        <div className="text-green-400 whitespace-pre-wrap">{result.output}</div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Preview Section (for HTML/CSS/JS) */}
+          {showPreview && (activeTabContent?.type === 'html' || activeTabContent?.type === 'css' || activeTabContent?.type === 'javascript') && (
+            <div className="flex-1 flex flex-col bg-white">
+              <div className="bg-gray-100 px-4 py-2 border-b border-gray-300 flex items-center justify-between">
+                <span className="text-sm font-medium">Live Preview</span>
+                <button
+                  onClick={() => {
+                    if (previewRef.current) {
+                      previewRef.current.src = previewRef.current.src
+                    }
+                  }}
+                  className="p-1 hover:bg-gray-200 rounded"
+                >
+                  <Play size={16} className="text-gray-600" />
+                </button>
+              </div>
+              <iframe
+                ref={previewRef}
+                className="flex-1 w-full bg-white"
+                sandbox="allow-scripts"
+                srcDoc={activeTabContent?.content}
+                title="Code Preview"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/ContextMenu.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+  FolderPlus,
+  Info,
+  Image,
+  Broom,
+  ArrowsClockwise,
+  Desktop
+} from '@phosphor-icons/react'
+
+interface ContextMenuProps {
+  isOpen: boolean
+  position: { x: number; y: number }
+  onClose: () => void
+  onAction: (action: string) => void
+}
+
+export function ContextMenu({ isOpen, position, onClose, onAction }: ContextMenuProps) {
+  const menuItems = [
+    { id: 'new-folder', label: 'New Folder', icon: FolderPlus },
+    { id: 'get-info', label: 'Get Info', icon: Info },
+    { type: 'separator' },
+    { id: 'change-wallpaper', label: 'Change Wallpaper', icon: Image },
+    { id: 'clean-up', label: 'Clean Up', icon: Broom },
+    { id: 'refresh', label: 'Refresh', icon: ArrowsClockwise },
+    { type: 'separator' },
+    { id: 'display-settings', label: 'Display Settings', icon: Desktop },
+  ]
+
+  const handleAction = (actionId: string) => {
+    onAction(actionId)
+    onClose()
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Invisible backdrop to detect outside clicks */}
+          <div
+            className="fixed inset-0 z-[79]"
+            onClick={onClose}
+          />
+
+          {/* Context Menu */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.1 }}
+            className="fixed glass rounded-lg shadow-xl py-1 z-[80] min-w-[200px]"
+            style={{
+              left: position.x,
+              top: position.y,
+              // Prevent menu from going off-screen
+              maxWidth: `calc(100vw - ${position.x}px - 20px)`,
+              maxHeight: `calc(100vh - ${position.y}px - 20px)`
+            }}
+          >
+            {menuItems.map((item, index) => {
+              if (item.type === 'separator') {
+                return (
+                  <div
+                    key={`separator-${index}`}
+                    className="h-px bg-gray-300/50 my-1 mx-2"
+                  />
+                )
+              }
+
+              const Icon = item.icon!
+              return (
+                <button
+                  key={item.id}
+                  onClick={() => handleAction(item.id!)}
+                  className="w-full text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors flex items-center gap-3 text-sm"
+                >
+                  <Icon size={16} weight="regular" />
+                  <span>{item.label}</span>
+                </button>
+              )
+            })}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/Desktop.tsx

@@ -0,0 +1,498 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { Dock } from './Dock'
+import { TopBar } from './TopBar'
+import { FileManager } from './FileManager'
+import { Calendar } from './Calendar'
+import { DraggableDesktopIcon } from './DraggableDesktopIcon'
+import { MatrixRain } from './MatrixRain'
+import { HelpModal } from './HelpModal'
+import { DesktopContextMenu } from './DesktopContextMenu'
+import { BackgroundSelector } from './BackgroundSelector'
+import WebBrowserApp from './WebBrowserApp'
+import { GeminiChat } from './GeminiChat'
+import { Clock } from './Clock'
+import { Terminal } from './Terminal'
+import { SpotlightSearch } from './SpotlightSearch'
+import { ContextMenu } from './ContextMenu'
+import { VSCodeEditor } from './VSCodeEditor'
+import { CodePlayground } from './CodePlayground'
+import { AboutModal } from './AboutModal'
+import { CodeExecutor } from './CodeExecutor'
+import { motion } from 'framer-motion'
+
+export function Desktop() {
+  const [fileManagerOpen, setFileManagerOpen] = useState(true)
+  const [calendarOpen, setCalendarOpen] = useState(false)
+  const [clockOpen, setClockOpen] = useState(false)
+  const [browserOpen, setBrowserOpen] = useState(false)
+  const [geminiChatOpen, setGeminiChatOpen] = useState(false)
+  const [terminalOpen, setTerminalOpen] = useState(false)
+  const [vscodeOpen, setVscodeOpen] = useState(false)
+  const [codePlaygroundOpen, setCodePlaygroundOpen] = useState(false)
+  const [spotlightOpen, setSpotlightOpen] = useState(false)
+  const [contextMenuVisible, setContextMenuVisible] = useState(false)
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+  const [userSession, setUserSession] = useState<string>(`session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`)
+  const [currentPath, setCurrentPath] = useState('')
+  const [matrixActive, setMatrixActive] = useState(false)
+  const [helpModalOpen, setHelpModalOpen] = useState(false)
+  const [contextMenuOpen, setContextMenuOpen] = useState(false)
+  const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 })
+  const [backgroundSelectorOpen, setBackgroundSelectorOpen] = useState(false)
+  const [currentBackground, setCurrentBackground] = useState('/background.webp')
+  const [aboutModalOpen, setAboutModalOpen] = useState(false)
+  const [codeExecutorOpen, setCodeExecutorOpen] = useState(false)
+
+  const openFileManager = (path: string) => {
+    setCurrentPath(path)
+    setFileManagerOpen(true)
+  }
+
+  const closeFileManager = () => {
+    setFileManagerOpen(false)
+  }
+
+  const openCalendar = () => {
+    setCalendarOpen(true)
+  }
+
+  const closeCalendar = () => {
+    setCalendarOpen(false)
+  }
+
+  const openClock = () => {
+    setClockOpen(true)
+  }
+
+  const closeClock = () => {
+    setClockOpen(false)
+  }
+
+  const openBrowser = () => {
+    setBrowserOpen(true)
+  }
+
+  const closeBrowser = () => {
+    setBrowserOpen(false)
+  }
+
+  const openGeminiChat = () => {
+    setGeminiChatOpen(true)
+  }
+
+  const closeGeminiChat = () => {
+    setGeminiChatOpen(false)
+  }
+
+  const openTerminal = () => {
+    setTerminalOpen(true)
+  }
+
+  const closeTerminal = () => {
+    setTerminalOpen(false)
+  }
+
+  const openVSCode = () => {
+    setVscodeOpen(true)
+  }
+
+  const closeVSCode = () => {
+    setVscodeOpen(false)
+  }
+
+  const openCodePlayground = () => {
+    setCodePlaygroundOpen(true)
+  }
+
+  const closeCodePlayground = () => {
+    setCodePlaygroundOpen(false)
+  }
+
+  const openCodeExecutor = () => {
+    setCodeExecutorOpen(true)
+  }
+
+  const closeCodeExecutor = () => {
+    setCodeExecutorOpen(false)
+  }
+
+  const handleOpenApp = (appId: string) => {
+    switch(appId) {
+      case 'files':
+        openFileManager('')
+        break
+      case 'calendar':
+        openCalendar()
+        break
+      case 'clock':
+        openClock()
+        break
+      case 'browser':
+        openBrowser()
+        break
+      case 'gemini':
+        openGeminiChat()
+        break
+      case 'terminal':
+        openTerminal()
+        break
+      case 'vscode':
+        openVSCode()
+        break
+      case 'playground':
+        openCodePlayground()
+        break
+      case 'executor':
+        openCodeExecutor()
+        break
+    }
+  }
+
+  const handleContextMenuAction = (action: string) => {
+    switch(action) {
+      case 'change-wallpaper':
+        setBackgroundSelectorOpen(true)
+        break
+      case 'new-folder':
+        // Add folder creation logic if needed
+        break
+      case 'refresh':
+        window.location.reload()
+        break
+    }
+  }
+
+  const triggerMatrix = () => {
+    setMatrixActive(true)
+  }
+
+  const handleMatrixComplete = () => {
+    setMatrixActive(false)
+  }
+
+  const openHelpModal = () => {
+    setHelpModalOpen(true)
+  }
+
+  const closeHelpModal = () => {
+    setHelpModalOpen(false)
+  }
+
+  const handleDesktopRightClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setContextMenuPosition({ x: e.clientX, y: e.clientY })
+    setContextMenuVisible(true)
+  }
+
+  const handleChangeBackground = (type: 'upload' | 'preset') => {
+    setContextMenuOpen(false)
+    setBackgroundSelectorOpen(true)
+  }
+
+  const handleSelectBackground = (background: string | File) => {
+    if (typeof background === 'string') {
+      // Handle preset backgrounds
+      if (background.startsWith('gradient-')) {
+        setCurrentBackground(background)
+      } else {
+        setCurrentBackground(background)
+      }
+    } else {
+      // Handle uploaded file
+      const url = URL.createObjectURL(background)
+      setCurrentBackground(url)
+    }
+  }
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + Space for Spotlight Search
+      if ((e.metaKey || e.ctrlKey) && e.key === ' ') {
+        e.preventDefault()
+        setSpotlightOpen(true)
+      }
+      // Cmd/Ctrl + K for Spotlight Search (alternative)
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setSpotlightOpen(true)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  const getBackgroundStyle = () => {
+    if (currentBackground.startsWith('gradient-')) {
+      const gradients: Record<string, string> = {
+        'gradient-purple': 'linear-gradient(135deg, #77216F 0%, #5E2750 50%, #2C001E 100%)',
+        'gradient-blue': 'linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%)',
+        'gradient-green': 'linear-gradient(135deg, #134e5e 0%, #71b280 50%, #a8e063 100%)',
+        'gradient-orange': 'linear-gradient(135deg, #ff512f 0%, #dd2476 50%, #f09819 100%)',
+        'gradient-dark': 'linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #2d2d2d 100%)',
+        'gradient-cosmic': 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'
+      }
+      return { background: gradients[currentBackground] || gradients['gradient-purple'] }
+    } else {
+      return {
+        backgroundImage: `url('${currentBackground}')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat'
+      }
+    }
+  }
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden flex" onContextMenu={handleDesktopRightClick}>
+      <div
+        className="absolute inset-0"
+        style={getBackgroundStyle()}
+      >
+        {/* Overlay for better text visibility */}
+        {!currentBackground.startsWith('gradient-') && (
+          <div
+            className="absolute inset-0 bg-black/20"
+            style={{
+              mixBlendMode: 'multiply'
+            }}
+          />
+        )}
+        <svg className="absolute inset-0 w-full h-full opacity-10" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="ubuntu-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
+              <circle cx="50" cy="50" r="2" fill="white" opacity="0.3"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#ubuntu-pattern)" />
+        </svg>
+      </div>
+
+      <TopBar onPowerAction={triggerMatrix} onAboutClick={() => setAboutModalOpen(true)} />
+
+      <Dock onOpenFileManager={openFileManager} onOpenCalendar={openCalendar} onOpenClock={openClock} onOpenBrowser={openBrowser} onOpenGeminiChat={openGeminiChat} onOpenVSCode={openVSCode} onOpenCodePlayground={openCodePlayground} />
+
+      <div className="flex-1">
+        {/* Desktop Icons - Positioned in a grid layout */}
+        <div className="absolute top-20 left-8">
+          <DraggableDesktopIcon
+            id="files"
+            label="Files"
+            iconType="files"
+            initialPosition={{ x: 20, y: 20 }}
+            onClick={() => {}}
+            onDoubleClick={() => openFileManager('')}
+          />
+          <DraggableDesktopIcon
+            id="browser"
+            label="Browser"
+            iconType="browser"
+            initialPosition={{ x: 120, y: 20 }}
+            onClick={() => {}}
+            onDoubleClick={openBrowser}
+          />
+          <DraggableDesktopIcon
+            id="gemini"
+            label="Gemini"
+            iconType="gemini"
+            initialPosition={{ x: 220, y: 20 }}
+            onClick={() => {}}
+            onDoubleClick={openGeminiChat}
+          />
+          <DraggableDesktopIcon
+            id="clock"
+            label="Clock"
+            iconType="clock"
+            initialPosition={{ x: 20, y: 120 }}
+            onClick={() => {}}
+            onDoubleClick={openClock}
+          />
+          <DraggableDesktopIcon
+            id="calendar"
+            label="Calendar"
+            iconType="calendar"
+            initialPosition={{ x: 120, y: 120 }}
+            onClick={() => {}}
+            onDoubleClick={openCalendar}
+          />
+          <DraggableDesktopIcon
+            id="terminal"
+            label="Terminal"
+            iconType="terminal"
+            initialPosition={{ x: 20, y: 220 }}
+            onClick={() => {}}
+            onDoubleClick={openTerminal}
+          />
+          <DraggableDesktopIcon
+            id="harddrive"
+            label="System"
+            iconType="harddrive"
+            initialPosition={{ x: 120, y: 220 }}
+            onClick={() => {}}
+            onDoubleClick={() => openFileManager('')}
+          />
+          <DraggableDesktopIcon
+            id="vscode"
+            label="VS Code"
+            iconType="vscode"
+            initialPosition={{ x: 320, y: 20 }}
+            onClick={() => {}}
+            onDoubleClick={openVSCode}
+          />
+          <DraggableDesktopIcon
+            id="playground"
+            label="Code Playground"
+            iconType="playground"
+            initialPosition={{ x: 220, y: 220 }}
+            onClick={() => {}}
+            onDoubleClick={openCodePlayground}
+          />
+          <DraggableDesktopIcon
+            id="executor"
+            label="Code Executor"
+            iconType="terminal"
+            initialPosition={{ x: 320, y: 120 }}
+            onClick={() => {}}
+            onDoubleClick={openCodeExecutor}
+          />
+        </div>
+
+        {fileManagerOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <FileManager 
+              currentPath={currentPath}
+              onNavigate={setCurrentPath}
+              onClose={closeFileManager}
+            />
+          </motion.div>
+        )}
+
+        {calendarOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <Calendar onClose={closeCalendar} />
+          </motion.div>
+        )}
+
+        {clockOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <Clock onClose={closeClock} />
+          </motion.div>
+        )}
+
+        {browserOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <WebBrowserApp onClose={closeBrowser} />
+          </motion.div>
+        )}
+
+        {geminiChatOpen && (
+          <GeminiChat onClose={closeGeminiChat} />
+        )}
+
+        {terminalOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <Terminal onClose={closeTerminal} />
+          </motion.div>
+        )}
+
+        {vscodeOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <VSCodeEditor onClose={closeVSCode} userSession={userSession} />
+          </motion.div>
+        )}
+
+        {codePlaygroundOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <CodePlayground onClose={closeCodePlayground} userSession={userSession} />
+          </motion.div>
+        )}
+
+        {codeExecutorOpen && (
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.15 }}
+          >
+            <CodeExecutor onClose={closeCodeExecutor} />
+          </motion.div>
+        )}
+      </div>
+
+      {/* Spotlight Search */}
+      <SpotlightSearch
+        isOpen={spotlightOpen}
+        onClose={() => setSpotlightOpen(false)}
+        onOpenApp={handleOpenApp}
+      />
+
+      {/* Context Menu */}
+      <ContextMenu
+        isOpen={contextMenuVisible}
+        position={contextMenuPosition}
+        onClose={() => setContextMenuVisible(false)}
+        onAction={handleContextMenuAction}
+      />
+
+      {/* Matrix Rain Effect */}
+      <div onClick={handleMatrixComplete} style={{ cursor: matrixActive ? 'pointer' : 'default' }}>
+        <MatrixRain isActive={matrixActive} onComplete={handleMatrixComplete} />
+      </div>
+
+      {/* Help Modal */}
+      <HelpModal isOpen={helpModalOpen} onClose={closeHelpModal} />
+
+      {/* Desktop Context Menu */}
+      <DesktopContextMenu
+        isOpen={contextMenuOpen}
+        position={contextMenuPos}
+        onClose={() => setContextMenuOpen(false)}
+        onChangeBackground={handleChangeBackground}
+      />
+
+      {/* Background Selector Modal */}
+      <BackgroundSelector
+        isOpen={backgroundSelectorOpen}
+        onClose={() => setBackgroundSelectorOpen(false)}
+        onSelectBackground={handleSelectBackground}
+        currentBackground={currentBackground}
+      />
+
+      {/* About Modal */}
+      <AboutModal
+        isOpen={aboutModalOpen}
+        onClose={() => setAboutModalOpen(false)}
+      />
+    </div>
+  )
+}

app/components/DesktopContextMenu.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import React, { useRef, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import {
+  Image,
+  PaintBrush,
+  Upload,
+  Palette,
+  Desktop as DesktopIcon,
+  Gradient
+} from '@phosphor-icons/react'
+
+interface DesktopContextMenuProps {
+  isOpen: boolean
+  position: { x: number; y: number }
+  onClose: () => void
+  onChangeBackground: (type: 'upload' | 'preset') => void
+}
+
+const presetBackgrounds = [
+  { name: 'Ubuntu Purple', value: 'gradient-purple' },
+  { name: 'Ocean Blue', value: 'gradient-blue' },
+  { name: 'Forest Green', value: 'gradient-green' },
+  { name: 'Sunset Orange', value: 'gradient-orange' },
+  { name: 'Dark Mode', value: 'gradient-dark' },
+]
+
+export function DesktopContextMenu({
+  isOpen,
+  position,
+  onClose,
+  onChangeBackground
+}: DesktopContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      document.addEventListener('keydown', handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          ref={menuRef}
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.95 }}
+          transition={{ duration: 0.1 }}
+          className="fixed z-50 bg-[#2C2C2C]/95 backdrop-blur-md rounded-lg shadow-2xl border border-white/10 py-2 min-w-[240px]"
+          style={{
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            maxHeight: 'calc(100vh - 20px)',
+            overflowY: 'auto'
+          }}
+        >
+          {/* Change Background Section */}
+          <div className="px-3 py-1.5 text-xs font-medium text-gray-400 uppercase tracking-wider">
+            Change Background
+          </div>
+
+          <button
+            onClick={() => onChangeBackground('upload')}
+            className="w-full px-3 py-2 flex items-center gap-3 hover:bg-white/10 transition-colors text-left"
+          >
+            <Upload size={18} className="text-blue-400" />
+            <span className="text-sm text-gray-200">Upload Image</span>
+          </button>
+
+          <button
+            onClick={() => onChangeBackground('preset')}
+            className="w-full px-3 py-2 flex items-center gap-3 hover:bg-white/10 transition-colors text-left"
+          >
+            <Palette size={18} className="text-purple-400" />
+            <span className="text-sm text-gray-200">Choose from Gallery</span>
+          </button>
+
+          <div className="h-px bg-white/10 my-2" />
+
+          {/* Display Settings */}
+          <div className="px-3 py-1.5 text-xs font-medium text-gray-400 uppercase tracking-wider">
+            Display
+          </div>
+
+          <button
+            className="w-full px-3 py-2 flex items-center gap-3 hover:bg-white/10 transition-colors text-left"
+          >
+            <DesktopIcon size={18} className="text-green-400" />
+            <span className="text-sm text-gray-200">Desktop Icons</span>
+          </button>
+
+          <button
+            className="w-full px-3 py-2 flex items-center gap-3 hover:bg-white/10 transition-colors text-left"
+          >
+            <Gradient size={18} className="text-orange-400" />
+            <span className="text-sm text-gray-200">Visual Effects</span>
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/DesktopIcon.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React from 'react'
+import { House, Trash, Calendar as CalendarIcon, Clock, Folder, Globe, Sparkle, GameController } from '@phosphor-icons/react'
+
+interface DesktopIconProps {
+  icon: 'home' | 'trash' | 'calendar' | 'clock' | 'game' | 'folder' | 'browser' | 'gemini'
+  label: string
+  onClick: () => void
+}
+
+export function DesktopIcon({ icon, label, onClick }: DesktopIconProps) {
+  const getIcon = () => {
+    switch(icon) {
+      case 'home': return House
+      case 'calendar': return CalendarIcon
+      case 'clock': return Clock
+      case 'game': return GameController
+      case 'folder': return Folder
+      case 'browser': return Globe
+      case 'gemini': return Sparkle
+      case 'trash': return Trash
+      default: return Folder
+    }
+  }
+
+  const Icon = getIcon()
+
+  const getGradient = () => {
+    if (icon === 'calendar') {
+      return 'from-purple-500/80 to-purple-700/80 group-hover:from-purple-400/80 group-hover:to-purple-600/80'
+    }
+    if (icon === 'clock') {
+      return 'from-teal-500/80 to-cyan-600/80 group-hover:from-teal-400/80 group-hover:to-cyan-500/80'
+    }
+    if (icon === 'game') {
+      return 'from-pink-500/80 to-rose-600/80 group-hover:from-pink-400/80 group-hover:to-rose-500/80'
+    }
+    if (icon === 'folder') {
+      return 'from-orange-500/80 to-orange-700/80 group-hover:from-orange-400/80 group-hover:to-orange-600/80'
+    }
+    if (icon === 'browser') {
+      return 'from-blue-500/80 to-cyan-600/80 group-hover:from-blue-400/80 group-hover:to-cyan-500/80'
+    }
+    if (icon === 'gemini') {
+      return 'from-[#E95420]/80 to-[#d14818]/80 group-hover:from-[#E95420] group-hover:to-[#d14818]'
+    }
+    return 'from-gray-600/80 to-gray-700/80 group-hover:from-gray-500/80 group-hover:to-gray-600/80'
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className="flex flex-col items-center gap-1 p-2 rounded hover:bg-white/10 transition-colors w-24 group mb-2"
+    >
+      <div className={`w-16 h-16 rounded-lg bg-gradient-to-br ${getGradient()} backdrop-blur-sm flex items-center justify-center transition-all`}>
+        <Icon size={32} weight="regular" className="text-white" />
+      </div>
+      <span className="text-white text-xs text-center drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] font-medium">
+        {label}
+      </span>
+    </button>
+  )
+}

app/components/Dock.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Folder,
+  Calendar as CalendarIcon,
+  Clock as ClockIcon,
+  Globe,
+  Sparkle,
+  Trash,
+  FolderOpen,
+  Compass,
+  Code,
+  Lightning
+} from '@phosphor-icons/react'
+
+interface DockProps {
+  onOpenFileManager: (path: string) => void
+  onOpenCalendar: () => void
+  onOpenClock: () => void
+  onOpenBrowser: () => void
+  onOpenGeminiChat: () => void
+  onOpenVSCode?: () => void
+  onOpenCodePlayground?: () => void
+}
+
+interface DockItemProps {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+  isActive?: boolean
+  className?: string
+}
+
+const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = false, className = '' }) => {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <div className="dock-item group">
+      <button
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={onClick}
+        className={`app-icon w-12 h-12 rounded-xl shadow-lg flex items-center justify-center cursor-pointer border transition-all ${className}`}
+        title={label}
+      >
+        {icon}
+      </button>
+      <div
+        className={`dock-dot ${isActive ? 'opacity-100' : ''}`}
+        id={`dot-${label.toLowerCase().replace(/\s+/g, '-')}`}
+      />
+    </div>
+  )
+}
+
+export function Dock({
+  onOpenFileManager,
+  onOpenCalendar,
+  onOpenClock,
+  onOpenBrowser,
+  onOpenGeminiChat,
+  onOpenVSCode,
+  onOpenCodePlayground
+}: DockProps) {
+  const dockItems = [
+    {
+      icon: (
+        <div className="bg-gradient-to-br from-blue-400 to-cyan-200 w-full h-full rounded-xl flex items-center justify-center border border-white/30">
+          <Folder size={28} weight="regular" className="text-blue-900" />
+        </div>
+      ),
+      label: 'Files',
+      onClick: () => onOpenFileManager(''),
+      className: ''
+    },
+    {
+      icon: (
+        <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
+          <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
+          <Compass size={36} weight="light" className="text-white relative z-10" />
+        </div>
+      ),
+      label: 'Browser',
+      onClick: onOpenBrowser,
+      className: ''
+    },
+    {
+      icon: (
+        <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
+          <Sparkle size={28} weight="fill" className="text-blue-500" />
+        </div>
+      ),
+      label: 'Gemini',
+      onClick: onOpenGeminiChat,
+      className: ''
+    },
+    {
+      icon: (
+        <div className="bg-black w-full h-full rounded-full flex items-center justify-center border border-gray-600">
+          <div className="w-10 h-10 rounded-full border border-gray-600 relative bg-black">
+            <div className="absolute top-1/2 left-1/2 w-0.5 h-2.5 bg-white origin-bottom -translate-x-1/2 -translate-y-full" />
+            <div className="absolute top-1/2 left-1/2 w-0.5 h-3.5 bg-gray-300 origin-bottom -translate-x-1/2 -translate-y-full" />
+            <div className="absolute top-1/2 left-1/2 w-0.5 h-4 bg-orange-500 origin-bottom -translate-x-1/2 -translate-y-full animate-spin" style={{ animationDuration: '60s' }} />
+          </div>
+        </div>
+      ),
+      label: 'Clock',
+      onClick: onOpenClock,
+      className: 'rounded-full'
+    },
+    {
+      icon: (
+        <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
+          <CalendarIcon size={28} weight="regular" className="text-white" />
+        </div>
+      ),
+      label: 'Calendar',
+      onClick: onOpenCalendar,
+      className: ''
+    },
+    {
+      icon: (
+        <div className="bg-gradient-to-br from-blue-600 to-blue-800 w-full h-full rounded-xl flex items-center justify-center border border-blue-900/30 shadow-inner">
+          <Code size={28} weight="bold" className="text-white" />
+        </div>
+      ),
+      label: 'VS Code',
+      onClick: onOpenVSCode || (() => {}),
+      className: ''
+    },
+    {
+      icon: (
+        <div className="bg-gradient-to-br from-yellow-500 to-orange-600 w-full h-full rounded-xl flex items-center justify-center border border-orange-700/30 shadow-inner">
+          <Lightning size={28} weight="fill" className="text-white" />
+        </div>
+      ),
+      label: 'Code Playground',
+      onClick: onOpenCodePlayground || (() => {}),
+      className: ''
+    }
+  ]
+
+  return (
+    <div className="dock-container">
+      <div className="dock-glass px-3 pb-2 pt-3 rounded-2xl flex items-end gap-2 shadow-2xl border border-white/20 transition-all duration-300">
+        {dockItems.map((item, index) => (
+          <React.Fragment key={item.label}>
+            <DockItem {...item} />
+            {index === dockItems.length - 1 && (
+              <>
+                <div className="w-px h-10 bg-gray-400/30 mx-1" />
+                <DockItem
+                  icon={
+                    <div className="bg-gradient-to-b from-gray-200 to-gray-300 w-full h-full rounded-xl flex items-center justify-center border border-white/40">
+                      <Trash size={24} weight="regular" className="text-gray-600" />
+                    </div>
+                  }
+                  label="Trash"
+                  onClick={() => {}}
+                  className=""
+                />
+              </>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  )
+}

app/components/DraggableDesktopIcon.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import React, { useState, useRef } from 'react'
+import Draggable from 'react-draggable'
+import {
+  Folder,
+  Calendar,
+  Clock,
+  Globe,
+  Sparkle,
+  Terminal,
+  HardDrives,
+  Compass,
+  Code,
+  Lightning
+} from '@phosphor-icons/react'
+
+interface DraggableDesktopIconProps {
+  id: string
+  label: string
+  iconType: string
+  initialPosition?: { x: number; y: number }
+  onClick: () => void
+  onDoubleClick: () => void
+}
+
+export function DraggableDesktopIcon({
+  id,
+  label,
+  iconType,
+  initialPosition = { x: 0, y: 0 },
+  onClick,
+  onDoubleClick
+}: DraggableDesktopIconProps) {
+  const [selected, setSelected] = useState(false)
+  const nodeRef = useRef<HTMLDivElement>(null) as React.MutableRefObject<HTMLDivElement>
+
+  const handleClick = () => {
+    setSelected(true)
+    onClick()
+    // Deselect after a short time
+    setTimeout(() => setSelected(false), 3000)
+  }
+
+  const getIcon = () => {
+    switch (iconType) {
+      case 'files':
+        return (
+          <div className="bg-gradient-to-br from-blue-400 to-cyan-200 w-full h-full rounded-xl flex items-center justify-center border border-white/30">
+            <Folder size={32} weight="regular" className="text-blue-900" />
+          </div>
+        )
+      case 'calendar':
+        return (
+          <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
+            <Calendar size={32} weight="regular" className="text-white" />
+          </div>
+        )
+      case 'clock':
+        return (
+          <div className="bg-black w-full h-full rounded-full flex items-center justify-center border-2 border-gray-600">
+            <Clock size={32} weight="regular" className="text-white" />
+          </div>
+        )
+      case 'browser':
+        return (
+          <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
+            <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
+            <Compass size={36} weight="light" className="text-white relative z-10" />
+          </div>
+        )
+      case 'gemini':
+        return (
+          <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
+            <Sparkle size={32} weight="fill" className="text-blue-500" />
+          </div>
+        )
+      case 'terminal':
+        return (
+          <div className="bg-gray-800 w-full h-full rounded-xl flex items-center justify-center border border-gray-600">
+            <span className="text-white font-mono font-bold text-xl">&gt;_</span>
+          </div>
+        )
+      case 'harddrive':
+        return (
+          <div className="bg-gray-200 w-full h-full rounded-lg flex items-center justify-center border border-gray-300 relative">
+            <HardDrives size={32} weight="regular" className="text-gray-600" />
+            <div className="absolute bottom-2 right-2 w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+          </div>
+        )
+      case 'vscode':
+        return (
+          <div className="bg-gradient-to-br from-blue-600 to-blue-800 w-full h-full rounded-xl flex items-center justify-center border border-blue-900/30 shadow-inner">
+            <Code size={32} weight="bold" className="text-white" />
+          </div>
+        )
+      case 'playground':
+        return (
+          <div className="bg-gradient-to-br from-yellow-500 to-orange-600 w-full h-full rounded-xl flex items-center justify-center border border-orange-700/30 shadow-inner">
+            <Lightning size={32} weight="fill" className="text-white" />
+          </div>
+        )
+      default:
+        return (
+          <div className="bg-gray-400 w-full h-full rounded-xl flex items-center justify-center">
+            <Folder size={32} weight="regular" className="text-white" />
+          </div>
+        )
+    }
+  }
+
+  return (
+    <Draggable
+      nodeRef={nodeRef}
+      defaultPosition={initialPosition}
+      grid={[25, 25]}
+      handle=".icon-handle"
+    >
+      <div
+        ref={nodeRef}
+        className="absolute flex flex-col items-center w-20 group cursor-pointer transition-all hover:bg-white/10 rounded p-1"
+        onClick={handleClick}
+        onDoubleClick={onDoubleClick}
+      >
+        <div className="icon-handle">
+          <div
+            className={`w-14 h-14 shadow-lg transition-transform hover:scale-110 ${
+              iconType === 'clock' ? '' : 'rounded-xl'
+            }`}
+          >
+            {getIcon()}
+          </div>
+        </div>
+        <span
+          className={`mt-1 text-xs font-medium drop-shadow-lg text-center leading-tight px-1 py-0.5 rounded transition-colors ${
+            selected
+              ? 'bg-blue-600/80 text-white'
+              : 'text-white bg-black/20 group-hover:bg-blue-600/80'
+          }`}
+        >
+          {label}
+        </span>
+      </div>
+    </Draggable>
+  )
+}

app/components/FileManager.tsx

@@ -0,0 +1,542 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import {
+  X,
+  Minus,
+  Square,
+  CaretLeft,
+  CaretRight,
+  House,
+  MagnifyingGlass,
+  Folder as FolderIcon,
+  File,
+  Image as ImageIcon,
+  FilePdf,
+  FileDoc,
+  FileText,
+  Upload,
+  Download,
+  Trash,
+  Plus,
+  Eye,
+  Users,
+  Globe
+} from '@phosphor-icons/react'
+import { motion } from 'framer-motion'
+import { FilePreview } from './FilePreview'
+
+interface FileManagerProps {
+  currentPath: string
+  onNavigate: (path: string) => void
+  onClose: () => void
+}
+
+interface FileItem {
+  name: string
+  type: 'folder' | 'file'
+  size?: number
+  modified?: string
+  path: string
+  extension?: string
+}
+
+export function FileManager({ currentPath, onNavigate, onClose }: FileManagerProps) {
+  const [files, setFiles] = useState<FileItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
+  const [uploadModalOpen, setUploadModalOpen] = useState(false)
+  const [previewFile, setPreviewFile] = useState<FileItem | null>(null)
+  const [windowPos, setWindowPos] = useState({ x: 60, y: 60 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [isPublicFolder, setIsPublicFolder] = useState(false)
+
+  // Load files when path changes
+  useEffect(() => {
+    // Check if this is the public folder
+    setIsPublicFolder(currentPath === 'public' || currentPath.startsWith('public/'))
+    loadFiles()
+  }, [currentPath])
+
+  const loadFiles = async () => {
+    setLoading(true)
+    try {
+      let response
+      if (currentPath === 'public' || currentPath.startsWith('public/')) {
+        // Load from public folder API
+        const publicPath = currentPath === 'public' ? '' : currentPath.replace('public/', '')
+        response = await fetch(`/api/public?folder=${encodeURIComponent(publicPath)}`)
+      } else {
+        // Load from regular files API
+        response = await fetch(`/api/files?folder=${encodeURIComponent(currentPath)}`)
+      }
+
+      const data = await response.json()
+
+      // Add public folder to root directory
+      if (currentPath === '') {
+        const publicFolder = {
+          name: 'Public Folder',
+          type: 'folder' as const,
+          path: 'public',
+          modified: new Date().toISOString()
+        }
+
+        // Add public folder if it doesn't exist
+        if (!data.files.some((f: FileItem) => f.path === 'public')) {
+          data.files.unshift(publicFolder)
+        }
+      }
+
+      setFiles(data.files || [])
+    } catch (error) {
+      console.error('Error loading files:', error)
+      setFiles([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleUpload = async (file: File, targetFolder: string) => {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    try {
+      let response
+      if (isPublicFolder) {
+        // Upload to public folder
+        const publicPath = currentPath === 'public' ? '' : currentPath.replace('public/', '')
+        formData.append('folder', publicPath)
+        formData.append('uploadedBy', 'User') // You can customize this
+        response = await fetch('/api/public', {
+          method: 'POST',
+          body: formData
+        })
+      } else {
+        // Upload to regular folder
+        formData.append('folder', targetFolder)
+        response = await fetch('/api/upload', {
+          method: 'POST',
+          body: formData
+        })
+      }
+
+      const result = await response.json()
+      if (result.success) {
+        loadFiles() // Reload files
+        setUploadModalOpen(false)
+      } else {
+        alert(`Upload failed: ${result.error}`)
+      }
+    } catch (error) {
+      console.error('Error uploading file:', error)
+      alert('Failed to upload file')
+    }
+  }
+
+  const handleDownload = (file: FileItem) => {
+    window.open(`/api/download?path=${encodeURIComponent(file.path)}`, '_blank')
+  }
+
+  const handlePreview = (file: FileItem) => {
+    setPreviewFile(file)
+  }
+
+  const handleDelete = async (file: FileItem) => {
+    if (!confirm(`Delete ${file.name}?`)) return
+
+    try {
+      const response = await fetch(`/api/files?path=${encodeURIComponent(file.path)}`, {
+        method: 'DELETE'
+      })
+
+      const result = await response.json()
+      if (result.success) {
+        loadFiles()
+      } else {
+        alert(`Delete failed: ${result.error}`)
+      }
+    } catch (error) {
+      console.error('Error deleting file:', error)
+      alert('Failed to delete file')
+    }
+  }
+
+  const handleCreateFolder = async () => {
+    const folderName = prompt('Enter folder name:')
+    if (!folderName) return
+
+    try {
+      const response = await fetch('/api/files', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          folderName,
+          parentPath: currentPath
+        })
+      })
+
+      const result = await response.json()
+      if (result.success) {
+        loadFiles()
+      } else {
+        alert(`Create folder failed: ${result.error}`)
+      }
+    } catch (error) {
+      console.error('Error creating folder:', error)
+      alert('Failed to create folder')
+    }
+  }
+
+  const getFileIcon = (file: FileItem) => {
+    if (file.type === 'folder') {
+      // Special icon for public folder
+      if (file.path === 'public' || file.name === 'Public Folder') {
+        return <Users size={48} weight="fill" className="text-purple-400" />
+      }
+      return <FolderIcon size={48} weight="fill" className="text-orange-400" />
+    }
+
+    const ext = file.extension?.toLowerCase()
+    switch (ext) {
+      case 'pdf':
+        return <FilePdf size={48} weight="fill" className="text-red-500" />
+      case 'doc':
+      case 'docx':
+        return <FileDoc size={48} weight="fill" className="text-blue-500" />
+      case 'txt':
+      case 'md':
+        return <FileText size={48} weight="fill" className="text-gray-600" />
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+        return <ImageIcon size={48} weight="fill" className="text-green-500" />
+      default:
+        return <File size={48} weight="regular" className="text-gray-500" />
+    }
+  }
+
+  const formatFileSize = (bytes?: number) => {
+    if (!bytes) return ''
+    const units = ['B', 'KB', 'MB', 'GB']
+    let size = bytes
+    let unitIndex = 0
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024
+      unitIndex++
+    }
+    return `${size.toFixed(1)} ${units[unitIndex]}`
+  }
+
+  const filteredFiles = files.filter(file =>
+    file.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  // Group files by current directory level
+  const currentLevelFiles = filteredFiles.filter(file => {
+    const relativePath = currentPath ? file.path.replace(currentPath + '/', '') : file.path
+    return !relativePath.includes('/')
+  })
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.window-controls')) return
+    setIsDragging(true)
+    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (isDragging) {
+      setWindowPos({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      })
+    }
+  }
+
+  const handleMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  }, [isDragging, dragStart])
+
+  return (
+    <>
+      <motion.div
+        style={{ left: windowPos.x, top: windowPos.y }}
+        className="fixed w-[800px] h-[600px] bg-white rounded-lg shadow-2xl overflow-hidden flex flex-col z-30 select-none"
+      >
+        {/* Title Bar */}
+        <div
+          onMouseDown={handleMouseDown}
+          className="h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-3 cursor-move"
+        >
+          <div className="flex items-center gap-2 flex-1">
+            <div className="flex items-center gap-1 window-controls">
+              <button
+                onClick={onClose}
+                className="w-5 h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group"
+              >
+                <X size={12} weight="bold" className="text-white opacity-0 group-hover:opacity-100" />
+              </button>
+              <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
+                <Minus size={12} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+              </button>
+              <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
+                <Square size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+              </button>
+            </div>
+            <span className="text-sm font-medium text-[#2c2c2c] ml-2 flex items-center gap-2">
+              File Manager - {isPublicFolder ? (
+                <>
+                  <Globe size={16} className="text-purple-500" />
+                  Public Folder {currentPath.replace('public', '').replace('/', '')}
+                </>
+              ) : (currentPath || 'Documents')}
+            </span>
+          </div>
+        </div>
+
+        {/* Toolbar */}
+        <div className="h-12 bg-[#fafafa] border-b border-[#e0e0e0] flex items-center px-3 gap-2">
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => {
+                const parent = currentPath.split('/').slice(0, -1).join('/')
+                onNavigate(parent)
+              }}
+              disabled={!currentPath}
+              className="p-1.5 hover:bg-[#e8e8e8] rounded disabled:opacity-40 disabled:hover:bg-transparent"
+            >
+              <CaretLeft size={16} weight="bold" />
+            </button>
+            <button
+              onClick={() => onNavigate('')}
+              className="p-1.5 hover:bg-[#e8e8e8] rounded"
+            >
+              <House size={16} weight="regular" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-1 px-2 py-1.5 bg-white border border-[#ddd] rounded flex-1">
+            <House size={14} weight="regular" className="text-[#666]" />
+            <span className="text-xs text-[#666]">/</span>
+            <span className="text-xs text-[#2c2c2c]">data/documents/{currentPath}</span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <button
+              onClick={handleCreateFolder}
+              className="p-1.5 hover:bg-[#e8e8e8] rounded"
+              title="New Folder"
+            >
+              <Plus size={16} weight="bold" />
+            </button>
+            <button
+              onClick={() => setUploadModalOpen(true)}
+              className="p-1.5 hover:bg-[#e8e8e8] rounded"
+              title="Upload File"
+            >
+              <Upload size={16} weight="regular" />
+            </button>
+            <div className="flex items-center gap-1 px-2 py-1 bg-white border border-[#ddd] rounded">
+              <MagnifyingGlass size={14} weight="regular" className="text-[#666]" />
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="text-xs outline-none w-32"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* File List */}
+        <div className="flex-1 overflow-auto p-4">
+          {loading ? (
+            <div className="flex items-center justify-center h-full text-[#999] text-sm">
+              Loading files...
+            </div>
+          ) : currentLevelFiles.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-[#999] text-sm">
+              {searchQuery ? 'No files found' : 'Folder is empty'}
+            </div>
+          ) : (
+            <div className="grid grid-cols-6 gap-4">
+              {currentLevelFiles.map((file) => (
+                <div
+                  key={file.path}
+                  className="group relative"
+                >
+                  <button
+                    onClick={() => {
+                      if (file.type === 'folder') {
+                        onNavigate(file.path)
+                      } else {
+                        handlePreview(file)
+                      }
+                    }}
+                    className="flex flex-col items-center gap-2 p-2 hover:bg-[#f0f0f0] rounded w-full"
+                  >
+                    <div className="w-16 h-16 flex items-center justify-center">
+                      {getFileIcon(file)}
+                    </div>
+                    <span className="text-xs text-[#2c2c2c] text-center break-all w-full line-clamp-2">
+                      {file.name}
+                    </span>
+                    {file.size && (
+                      <span className="text-xs text-[#666]">
+                        {formatFileSize(file.size)}
+                      </span>
+                    )}
+                  </button>
+
+                  {/* File Actions */}
+                  {file.type === 'file' && (
+                    <div className="absolute top-1 right-1 hidden group-hover:flex gap-1">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handlePreview(file)
+                        }}
+                        className="p-1 bg-white rounded shadow hover:bg-[#f0f0f0]"
+                        title="Preview"
+                      >
+                        <Eye size={14} />
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDownload(file)
+                        }}
+                        className="p-1 bg-white rounded shadow hover:bg-[#f0f0f0]"
+                        title="Download"
+                      >
+                        <Download size={14} />
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDelete(file)
+                        }}
+                        className="p-1 bg-white rounded shadow hover:bg-red-100"
+                        title="Delete"
+                      >
+                        <Trash size={14} className="text-red-600" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Status Bar */}
+        <div className="h-6 bg-[#f6f5f4] border-t border-[#d0d0d0] flex items-center px-3 text-xs text-[#666]">
+          {currentLevelFiles.length} items • {files.filter(f => f.type === 'folder').length} folders • {files.filter(f => f.type === 'file').length} files
+        </div>
+      </motion.div>
+
+      {/* Upload Modal */}
+      {uploadModalOpen && (
+        <UploadModal
+          currentPath={currentPath}
+          onUpload={handleUpload}
+          onClose={() => setUploadModalOpen(false)}
+        />
+      )}
+
+      {/* File Preview Modal */}
+      {previewFile && (
+        <FilePreview
+          file={previewFile}
+          onClose={() => setPreviewFile(null)}
+          onDownload={() => handleDownload(previewFile)}
+        />
+      )}
+    </>
+  )
+}
+
+// Upload Modal Component
+function UploadModal({
+  currentPath,
+  onUpload,
+  onClose
+}: {
+  currentPath: string
+  onUpload: (file: File, folder: string) => void
+  onClose: () => void
+}) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [targetFolder, setTargetFolder] = useState(currentPath)
+
+  const handleSubmit = () => {
+    if (selectedFile) {
+      onUpload(selectedFile, targetFolder)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-[400px]">
+        <h2 className="text-lg font-semibold mb-4">Upload File</h2>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Select File</label>
+            <input
+              type="file"
+              onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+              className="w-full p-2 border rounded"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Upload to Folder</label>
+            <input
+              type="text"
+              value={targetFolder}
+              onChange={(e) => setTargetFolder(e.target.value)}
+              placeholder="e.g., homework/math"
+              className="w-full p-2 border rounded"
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              Leave empty for root, or enter path like "folder/subfolder"
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={!selectedFile}
+              className="px-4 py-2 bg-[#E95420] text-white rounded hover:bg-[#d14818] disabled:opacity-50"
+            >
+              Upload
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

app/components/FilePreview.tsx

@@ -0,0 +1,372 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { X, Download, MagnifyingGlassPlus, MagnifyingGlassMinus } from '@phosphor-icons/react'
+import mammoth from 'mammoth'
+import * as XLSX from 'xlsx'
+import { PDFViewer } from './PDFViewer'
+
+interface FilePreviewProps {
+  file: {
+    name: string
+    path: string
+    extension?: string
+    size?: number
+  }
+  onClose: () => void
+  onDownload: () => void
+}
+
+export function FilePreview({ file, onClose, onDownload }: FilePreviewProps) {
+  const [content, setContent] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [scale, setScale] = useState(1)
+
+  // Excel specific state
+  const [activeSheet, setActiveSheet] = useState(0)
+
+  const previewUrl = `/api/download?path=${encodeURIComponent(file.path)}&preview=true`
+  const ext = file.extension?.toLowerCase() || ''
+
+  useEffect(() => {
+    loadFileContent()
+  }, [file])
+
+  const loadFileContent = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      switch (ext) {
+        case 'docx':
+        case 'doc':
+          await loadWordDocument()
+          break
+        case 'xlsx':
+        case 'xls':
+          await loadExcelDocument()
+          break
+        case 'pptx':
+        case 'ppt':
+          await loadPowerPointDocument()
+          break
+        case 'txt':
+        case 'md':
+        case 'json':
+        case 'js':
+        case 'ts':
+        case 'jsx':
+        case 'tsx':
+        case 'css':
+        case 'html':
+        case 'xml':
+        case 'py':
+        case 'java':
+        case 'cpp':
+        case 'c':
+        case 'h':
+        case 'sh':
+        case 'yaml':
+        case 'yml':
+          await loadTextFile()
+          break
+        case 'csv':
+          await loadCSVFile()
+          break
+        default:
+          setContent(null)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load file')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadWordDocument = async () => {
+    try {
+      const response = await fetch(previewUrl)
+      const arrayBuffer = await response.arrayBuffer()
+      const result = await mammoth.convertToHtml({ arrayBuffer })
+      setContent({ type: 'html', data: result.value })
+    } catch (err) {
+      throw new Error('Failed to load Word document')
+    }
+  }
+
+  const loadExcelDocument = async () => {
+    try {
+      const response = await fetch(previewUrl)
+      const arrayBuffer = await response.arrayBuffer()
+      const workbook = XLSX.read(arrayBuffer, { type: 'array' })
+
+      // Convert all sheets to HTML
+      const sheets = workbook.SheetNames.map(name => ({
+        name,
+        html: XLSX.utils.sheet_to_html(workbook.Sheets[name], {
+          header: '<table class="excel-table">',
+          footer: '</table>'
+        })
+      }))
+
+      setContent({ type: 'excel', data: sheets })
+    } catch (err) {
+      throw new Error('Failed to load Excel document')
+    }
+  }
+
+  const loadPowerPointDocument = async () => {
+    // For PowerPoint, we'll show a message to download
+    // Full PowerPoint rendering requires more complex libraries
+    setContent({ type: 'powerpoint', data: null })
+  }
+
+  const loadTextFile = async () => {
+    try {
+      const response = await fetch(previewUrl)
+      const text = await response.text()
+      setContent({ type: 'text', data: text })
+    } catch (err) {
+      throw new Error('Failed to load text file')
+    }
+  }
+
+  const loadCSVFile = async () => {
+    try {
+      const response = await fetch(previewUrl)
+      const text = await response.text()
+      const workbook = XLSX.read(text, { type: 'string' })
+      const sheet = workbook.Sheets[workbook.SheetNames[0]]
+      const html = XLSX.utils.sheet_to_html(sheet, {
+        header: '<table class="csv-table">',
+        footer: '</table>'
+      })
+      setContent({ type: 'html', data: html })
+    } catch (err) {
+      throw new Error('Failed to load CSV file')
+    }
+  }
+
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <div className="text-gray-600">Loading...</div>
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full">
+          <p className="text-red-600 mb-4">{error}</p>
+          <button
+            onClick={onDownload}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Download to View
+          </button>
+        </div>
+      )
+    }
+
+    // PDF files
+    if (ext === 'pdf') {
+      return (
+        <PDFViewer
+          url={previewUrl}
+          scale={scale}
+          onZoomIn={() => setScale(prev => Math.min(2, prev + 0.1))}
+          onZoomOut={() => setScale(prev => Math.max(0.5, prev - 0.1))}
+        />
+      )
+    }
+
+    // Image files
+    if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'].includes(ext)) {
+      return (
+        <div className="flex items-center justify-center h-full p-4">
+          <img
+            src={previewUrl}
+            alt={file.name}
+            className="max-w-full max-h-full object-contain"
+            style={{ transform: `scale(${scale})` }}
+          />
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-white rounded-lg shadow-lg p-2">
+            <button
+              onClick={() => setScale(prev => Math.max(0.5, prev - 0.1))}
+              className="p-1 rounded hover:bg-gray-100"
+            >
+              <MagnifyingGlassMinus size={16} />
+            </button>
+            <span className="text-sm px-2">{Math.round(scale * 100)}%</span>
+            <button
+              onClick={() => setScale(prev => Math.min(3, prev + 0.1))}
+              className="p-1 rounded hover:bg-gray-100"
+            >
+              <MagnifyingGlassPlus size={16} />
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    // HTML content (Word docs, converted HTML)
+    if (content?.type === 'html') {
+      return (
+        <div className="p-4 overflow-auto h-full">
+          <div
+            dangerouslySetInnerHTML={{ __html: content.data }}
+            className="prose max-w-none"
+          />
+        </div>
+      )
+    }
+
+    // Excel sheets
+    if (content?.type === 'excel') {
+      return (
+        <div className="flex flex-col h-full">
+          <div className="flex gap-2 p-2 border-b">
+            {content.data.map((sheet: any, index: number) => (
+              <button
+                key={index}
+                onClick={() => setActiveSheet(index)}
+                className={`px-3 py-1 rounded ${
+                  activeSheet === index ? 'bg-blue-500 text-white' : 'bg-gray-100'
+                }`}
+              >
+                {sheet.name}
+              </button>
+            ))}
+          </div>
+          <div className="flex-1 overflow-auto p-4">
+            <div
+              dangerouslySetInnerHTML={{ __html: content.data[activeSheet].html }}
+              className="excel-preview"
+            />
+          </div>
+        </div>
+      )
+    }
+
+    // Text files
+    if (content?.type === 'text') {
+      return (
+        <div className="h-full overflow-auto">
+          <pre className="p-4 text-sm font-mono whitespace-pre-wrap">
+            {content.data}
+          </pre>
+        </div>
+      )
+    }
+
+    // PowerPoint placeholder
+    if (content?.type === 'powerpoint') {
+      return (
+        <div className="flex flex-col items-center justify-center h-full">
+          <div className="text-6xl mb-4">📊</div>
+          <p className="text-gray-600 mb-4">PowerPoint presentation</p>
+          <p className="text-sm text-gray-500 mb-4">Preview requires download</p>
+          <button
+            onClick={onDownload}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Download to View
+          </button>
+        </div>
+      )
+    }
+
+    // Default fallback
+    return (
+      <iframe
+        src={previewUrl}
+        className="w-full h-full border-0"
+        title={file.name}
+      />
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg w-[90%] h-[90%] flex flex-col">
+        <div className="flex items-center justify-between p-4 border-b">
+          <div>
+            <h2 className="text-lg font-semibold">{file.name}</h2>
+            <p className="text-sm text-gray-500">
+              {ext.toUpperCase()} • {file.size ? formatFileSize(file.size) : 'Unknown size'}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={onDownload}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center gap-2"
+            >
+              <Download size={20} />
+              Download
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded"
+            >
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-hidden relative">
+          {renderContent()}
+        </div>
+      </div>
+
+      <style jsx global>{`
+        .excel-table, .csv-table {
+          border-collapse: collapse;
+          width: 100%;
+        }
+        .excel-table td, .excel-table th,
+        .csv-table td, .csv-table th {
+          border: 1px solid #ddd;
+          padding: 8px;
+          text-align: left;
+        }
+        .excel-table th, .csv-table th {
+          background-color: #f2f2f2;
+          font-weight: bold;
+        }
+        .excel-table tr:nth-child(even),
+        .csv-table tr:nth-child(even) {
+          background-color: #f9f9f9;
+        }
+        .excel-preview {
+          font-family: 'Arial', sans-serif;
+        }
+        .prose {
+          max-width: none;
+        }
+        .prose h1 { font-size: 2em; font-weight: bold; margin: 1em 0 0.5em; }
+        .prose h2 { font-size: 1.5em; font-weight: bold; margin: 1em 0 0.5em; }
+        .prose h3 { font-size: 1.2em; font-weight: bold; margin: 1em 0 0.5em; }
+        .prose p { margin: 1em 0; }
+        .prose ul, .prose ol { margin: 1em 0; padding-left: 2em; }
+        .prose li { margin: 0.5em 0; }
+        .prose strong { font-weight: bold; }
+        .prose em { font-style: italic; }
+      `}</style>
+    </div>
+  )
+}
+
+function formatFileSize(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB']
+  let size = bytes
+  let unitIndex = 0
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex++
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`
+}

app/components/GeminiChat.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import Window from './Window'
+import {
+  PaperPlaneRight,
+  Sparkle,
+  ArrowUp
+} from '@phosphor-icons/react'
+
+interface GeminiChatProps {
+  onClose: () => void
+}
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  timestamp: number
+}
+
+export function GeminiChat({ onClose }: GeminiChatProps) {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: '1',
+      role: 'assistant',
+      content: "Hello! I'm Gemini. How can I help you today?",
+      timestamp: Date.now()
+    }
+  ])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    // Load messages from localStorage
+    const savedMessages = localStorage.getItem('gemini-chat-messages')
+    if (savedMessages) {
+      try {
+        const parsed = JSON.parse(savedMessages)
+        if (parsed.length > 0) {
+          setMessages(parsed)
+        }
+      } catch (e) {
+        console.error('Failed to load messages')
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    // Save messages to localStorage
+    if (messages.length > 1) {
+      localStorage.setItem('gemini-chat-messages', JSON.stringify(messages.slice(-20))) // Keep last 20 messages
+    }
+  }, [messages])
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input.trim(),
+      timestamp: Date.now()
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      // Get conversation history (last 10 messages)
+      const history = messages.slice(-10).map(msg => ({
+        role: msg.role,
+        content: msg.content
+      }))
+
+      const response = await fetch('/api/gemini/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: userMessage.content,
+          history
+        }),
+      })
+
+      const data = await response.json()
+
+      if (response.ok && data.response) {
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: data.response,
+          timestamp: Date.now()
+        }
+        setMessages(prev => [...prev, assistantMessage])
+      } else {
+        // Fallback response if API fails
+        const fallbackResponses = [
+          "I'm here to help! What would you like to know?",
+          "That's interesting! Tell me more about it.",
+          "I can help with that! Let me think about the best approach.",
+          "Great question! Here's what I think...",
+          "I understand. Let me help you with that."
+        ]
+        const randomResponse = fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)]
+
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: randomResponse,
+          timestamp: Date.now()
+        }
+        setMessages(prev => [...prev, assistantMessage])
+      }
+    } catch (error) {
+      console.error('Error sending message:', error)
+      const errorMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: "I'm currently running in demo mode. For full functionality, please ensure the API is configured.",
+        timestamp: Date.now()
+      }
+      setMessages(prev => [...prev, errorMessage])
+    }
+
+    setIsLoading(false)
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  const clearChat = () => {
+    setMessages([
+      {
+        id: Date.now().toString(),
+        role: 'assistant',
+        content: "Chat history cleared. How can I help you today?",
+        timestamp: Date.now()
+      }
+    ])
+    localStorage.removeItem('gemini-chat-messages')
+  }
+
+  return (
+    <Window
+      id="gemini"
+      title="Gemini Ultra"
+      isOpen={true}
+      onClose={onClose}
+      width={700}
+      height={500}
+      x={100}
+      y={100}
+      className="gemini-window"
+      headerClassName="bg-white border-b border-gray-100"
+    >
+      <div className="flex flex-col h-full bg-white">
+        {/* Chat Header */}
+        <div className="px-4 py-2 border-b border-gray-100 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-pink-600 flex items-center justify-center">
+              <Sparkle size={18} weight="fill" className="text-white" />
+            </div>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-pink-600 font-bold">
+              Gemini Ultra
+            </span>
+          </div>
+          <button
+            onClick={clearChat}
+            className="text-xs text-gray-500 hover:text-gray-700"
+          >
+            Clear chat
+          </button>
+        </div>
+
+        {/* Messages Area */}
+        <div
+          ref={scrollRef}
+          className="flex-1 overflow-y-auto p-4 space-y-4"
+        >
+          {messages.map(message => (
+            <div
+              key={message.id}
+              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-[80%] ${
+                  message.role === 'user'
+                    ? 'bg-blue-600 text-white rounded-2xl rounded-tr-none'
+                    : 'bg-gray-100 text-gray-800 rounded-2xl rounded-tl-none'
+                } px-4 py-2 text-sm`}
+              >
+                {message.role === 'assistant' && (
+                  <p className="font-semibold text-blue-600 mb-1 text-xs">Gemini</p>
+                )}
+                <p className="whitespace-pre-wrap">{message.content}</p>
+              </div>
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="flex justify-start">
+              <div className="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 text-sm">
+                <p className="font-semibold text-blue-600 mb-1 text-xs">Gemini</p>
+                <div className="flex gap-1">
+                  <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></span>
+                  <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></span>
+                  <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Input Area */}
+        <div className="border-t border-gray-100 p-4">
+          <div className="flex items-center gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder="Ask Gemini..."
+              className="flex-1 bg-gray-100 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 transition-all"
+              disabled={isLoading}
+            />
+            <button
+              onClick={handleSend}
+              disabled={!input.trim() || isLoading}
+              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
+                input.trim() && !isLoading
+                  ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                  : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              <ArrowUp size={16} weight="bold" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/HelpModal.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import React, { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X, Minus, Square, Info, UserCircle, Target } from '@phosphor-icons/react'
+
+interface HelpModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function HelpModal({ isOpen, onClose }: HelpModalProps) {
+  const [windowPos, setWindowPos] = useState({ x: 100, y: 100 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.window-controls')) return
+    setIsDragging(true)
+    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (isDragging) {
+      setWindowPos({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      })
+    }
+  }
+
+  const handleMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  React.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  }, [isDragging, dragStart, windowPos])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50"
+          />
+
+          {/* Modal */}
+          <motion.div
+            style={{ left: windowPos.x, top: windowPos.y }}
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: "spring", damping: 20, stiffness: 300 }}
+            className="fixed w-[600px] bg-white rounded-lg shadow-2xl z-50 select-none"
+          >
+            {/* Ubuntu-style Window Header */}
+            <div
+              onMouseDown={handleMouseDown}
+              className="h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-3 cursor-move rounded-t-lg"
+            >
+              <div className="flex items-center gap-2 flex-1">
+                <div className="flex items-center gap-1 window-controls">
+                  <button
+                    onClick={onClose}
+                    className="w-5 h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group"
+                  >
+                    <X size={12} weight="bold" className="text-white opacity-0 group-hover:opacity-100" />
+                  </button>
+                  <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
+                    <Minus size={12} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+                  </button>
+                  <button className="w-5 h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
+                    <Square size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100" />
+                  </button>
+                </div>
+                <div className="flex items-center gap-2 ml-2">
+                  <Info size={18} weight="fill" className="text-[#E95420]" />
+                  <span className="text-sm font-medium text-[#2c2c2c]">About This Application</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-5 bg-white rounded-b-lg">
+              {/* Creator Info */}
+              <div className="flex items-start gap-4 p-4 bg-gradient-to-r from-[#E95420]/10 to-orange-100 rounded-lg border border-[#E95420]/20">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#E95420] to-[#d14818] flex items-center justify-center flex-shrink-0">
+                  <UserCircle size={24} weight="fill" className="text-white" />
+                </div>
+                <div>
+                  <h3 className="text-base font-semibold text-[#2c2c2c] mb-1">Created By</h3>
+                  <p className="text-[#555] font-medium">Reuben Chagas Fernandes</p>
+                </div>
+              </div>
+
+              {/* Purpose */}
+              <div className="flex items-start gap-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
+                  <Target size={24} weight="fill" className="text-white" />
+                </div>
+                <div>
+                  <h3 className="text-base font-semibold text-[#2c2c2c] mb-2">Purpose</h3>
+                  <p className="text-[#555] leading-relaxed text-sm">
+                    This application was created for sharing study material and making it easily
+                    accessible through Claude. Our goal is to provide a seamless platform for
+                    students to collaborate, share resources, and enhance their learning experience.
+                  </p>
+                </div>
+              </div>
+
+              {/* Features */}
+              <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
+                <h4 className="text-sm font-semibold text-[#2c2c2c] uppercase tracking-wider mb-3 flex items-center gap-2">
+                  <span className="w-1 h-4 bg-[#E95420] rounded-full"></span>
+                  Key Features
+                </h4>
+                <ul className="space-y-2.5 text-[#555]">
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0" />
+                    <span className="text-sm">Easy file upload and sharing</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-purple-500 rounded-full flex-shrink-0" />
+                    <span className="text-sm">Integration with Claude AI</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-green-500 rounded-full flex-shrink-0" />
+                    <span className="text-sm">Public folder for community sharing</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-[#E95420] rounded-full flex-shrink-0" />
+                    <span className="text-sm">Exam calendar and organization tools</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-cyan-500 rounded-full flex-shrink-0" />
+                    <span className="text-sm">Web browser with CORS proxy support</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <span className="w-2 h-2 bg-orange-500 rounded-full flex-shrink-0" />
+                    <span className="text-sm">Gemini AI chat assistant</span>
+                  </li>
+                </ul>
+              </div>
+
+              {/* Footer Button */}
+              <div className="pt-2">
+                <button
+                  onClick={onClose}
+                  className="w-full py-2.5 bg-[#E95420] hover:bg-[#d14818] text-white rounded-lg font-medium transition-colors shadow-sm"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/MatrixRain.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface MatrixRainProps {
+  isActive: boolean
+  onComplete?: () => void
+}
+
+export function MatrixRain({ isActive, onComplete }: MatrixRainProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [showText, setShowText] = useState(false)
+
+  useEffect(() => {
+    if (!isActive) return
+
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    // Set canvas size
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+
+    // Matrix rain configuration
+    const fontSize = 14
+    const columns = Math.floor(canvas.width / fontSize)
+    const drops: number[] = []
+
+    // Initialize drops
+    for (let i = 0; i < columns; i++) {
+      drops[i] = Math.random() * -100
+    }
+
+    // Characters to use in the rain
+    const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-=[]{}|;:<>,.?/~`'
+    const matrixArray = matrix.split('')
+
+    // Special word to display
+    const specialWord = 'REUBENOS'
+    let specialWordTimer: NodeJS.Timeout
+
+    // Show the special text after 1.5 seconds
+    if (isActive) {
+      specialWordTimer = setTimeout(() => {
+        setShowText(true)
+      }, 1500)
+    }
+
+    // Drawing function
+    function draw() {
+      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)
+
+      // Green text
+      ctx.fillStyle = '#0F0'
+      ctx.font = `${fontSize}px monospace`
+
+      // Draw drops
+      for (let i = 0; i < drops.length; i++) {
+        // Random character
+        const text = matrixArray[Math.floor(Math.random() * matrixArray.length)]
+
+        // Draw the character
+        ctx.fillText(text, i * fontSize, drops[i] * fontSize)
+
+        // Reset drop when it goes off screen
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0
+        }
+
+        // Move drop down
+        drops[i]++
+      }
+    }
+
+    // Animation loop
+    const interval = setInterval(draw, 35)
+
+    // Cleanup
+    return () => {
+      clearInterval(interval)
+      clearTimeout(specialWordTimer)
+      setShowText(false)
+    }
+  }, [isActive])
+
+  // Handle window resize
+  useEffect(() => {
+    if (!isActive) return
+
+    const handleResize = () => {
+      const canvas = canvasRef.current
+      if (canvas) {
+        canvas.width = window.innerWidth
+        canvas.height = window.innerHeight
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [isActive])
+
+  // Auto-complete after 5 seconds
+  useEffect(() => {
+    if (!isActive) return
+
+    const timer = setTimeout(() => {
+      if (onComplete) {
+        onComplete()
+      }
+    }, 5000)
+
+    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, 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"
+                >
+                  <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>
+                </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>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/PDFViewer.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import React, { useState } from 'react'
+import dynamic from 'next/dynamic'
+import { MagnifyingGlassPlus, MagnifyingGlassMinus, ArrowLeft, ArrowRight } from '@phosphor-icons/react'
+
+// Dynamically import react-pdf with no SSR
+const Document = dynamic(
+  () => import('react-pdf').then((mod) => mod.Document),
+  { ssr: false }
+)
+const Page = dynamic(
+  () => import('react-pdf').then((mod) => mod.Page),
+  { ssr: false }
+)
+
+// Configure PDF.js worker
+if (typeof window !== 'undefined') {
+  import('react-pdf').then((pdfjs) => {
+    pdfjs.pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.pdfjs.version}/build/pdf.worker.min.mjs`
+  })
+}
+
+interface PDFViewerProps {
+  url: string
+  scale: number
+  onZoomIn: () => void
+  onZoomOut: () => void
+}
+
+export function PDFViewer({ url, scale, onZoomIn, onZoomOut }: PDFViewerProps) {
+  const [numPages, setNumPages] = useState<number | null>(null)
+  const [pageNumber, setPageNumber] = useState(1)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+    setNumPages(numPages)
+    setPageNumber(1)
+    setError(null)
+    setIsLoading(false)
+  }
+
+  const changePage = (offset: number) => {
+    setPageNumber(prevPageNumber => {
+      const newPageNumber = prevPageNumber + offset
+      if (newPageNumber < 1 || newPageNumber > (numPages || 1)) {
+        return prevPageNumber
+      }
+      return newPageNumber
+    })
+  }
+
+  if (!url) {
+    return <div className="flex items-center justify-center h-full text-gray-500">No PDF to display</div>
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-2 p-3 border-b border-gray-200 bg-gray-50">
+        <button
+          onClick={onZoomOut}
+          className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+          title="Zoom Out"
+        >
+          <MagnifyingGlassMinus className="h-5 w-5" />
+        </button>
+        <span className="text-sm text-gray-600 min-w-[60px] text-center">{Math.round(scale * 100)}%</span>
+        <button
+          onClick={onZoomIn}
+          className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
+          title="Zoom In"
+        >
+          <MagnifyingGlassPlus className="h-5 w-5" />
+        </button>
+        {numPages && (
+          <>
+            <div className="mx-4 h-6 w-px bg-gray-300" />
+            <button
+              onClick={() => changePage(-1)}
+              disabled={pageNumber <= 1}
+              className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Previous Page"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </button>
+            <span className="text-sm text-gray-600 min-w-[80px] text-center">
+              Page {pageNumber} of {numPages}
+            </span>
+            <button
+              onClick={() => changePage(1)}
+              disabled={pageNumber >= numPages}
+              className="p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Next Page"
+            >
+              <ArrowRight className="h-5 w-5" />
+            </button>
+          </>
+        )}
+      </div>
+      <div className="flex-1 overflow-auto p-4 bg-gray-50">
+        {typeof window !== 'undefined' && url && (
+          <Document
+            file={url}
+            onLoadSuccess={onDocumentLoadSuccess}
+            onLoadError={(err) => {
+              console.warn('PDF load error:', err)
+              setError('Unable to load PDF. The file might be corrupted or in an unsupported format.')
+              setIsLoading(false)
+            }}
+            loading={
+              <div className="flex items-center justify-center h-full">
+                <div className="text-gray-600">Loading PDF...</div>
+              </div>
+            }
+            error={
+              <div className="flex flex-col items-center justify-center h-full">
+                <div className="text-red-500 mb-2">Failed to load PDF</div>
+                <div className="text-sm text-gray-600">{error || 'The file might be corrupted or in an unsupported format.'}</div>
+              </div>
+            }
+            className="flex justify-center"
+          >
+            {!isLoading && !error && (
+              <Page
+                pageNumber={pageNumber}
+                scale={scale}
+                renderTextLayer={false}
+                renderAnnotationLayer={false}
+                className="shadow-lg bg-white"
+                loading={
+                  <div className="flex items-center justify-center h-96 bg-white shadow-lg">
+                    <div className="text-gray-400">Loading page...</div>
+                  </div>
+                }
+              />
+            )}
+          </Document>
+        )}
+      </div>
+    </div>
+  )
+}

app/components/SpotlightSearch.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import { MagnifyingGlass, X } from '@phosphor-icons/react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface SpotlightSearchProps {
+  isOpen: boolean
+  onClose: () => void
+  onOpenApp: (appId: string) => void
+}
+
+interface SearchResult {
+  id: string
+  name: string
+  type: 'app' | 'file' | 'setting'
+  icon?: React.ReactNode
+}
+
+export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchProps) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<SearchResult[]>([])
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const apps: SearchResult[] = [
+    { id: 'files', name: 'Files', type: 'app' },
+    { id: 'calendar', name: 'Calendar', type: 'app' },
+    { id: 'clock', name: 'Clock', type: 'app' },
+    { id: 'browser', name: 'Web Browser', type: 'app' },
+    { id: 'gemini', name: 'Gemini Chat', type: 'app' },
+    { id: 'terminal', name: 'Terminal', type: 'app' },
+    { id: 'vscode', name: 'VS Code', type: 'app' },
+  ]
+
+  const files: SearchResult[] = [
+    { id: 'document', name: 'Document.pdf', type: 'file' },
+    { id: 'resume', name: 'Resume.docx', type: 'file' },
+    { id: 'budget', name: 'Budget.xlsx', type: 'file' },
+    { id: 'presentation', name: 'Presentation.pptx', type: 'file' },
+  ]
+
+  const settings: SearchResult[] = [
+    { id: 'wallpaper', name: 'Change Wallpaper', type: 'setting' },
+    { id: 'theme', name: 'Dark Mode', type: 'setting' },
+    { id: 'display', name: 'Display Settings', type: 'setting' },
+  ]
+
+  const allItems = [...apps, ...files, ...settings]
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('')
+      setResults([])
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    if (query.trim() === '') {
+      setResults([])
+      return
+    }
+
+    const filtered = allItems.filter(item =>
+      item.name.toLowerCase().includes(query.toLowerCase())
+    )
+    setResults(filtered.slice(0, 8))
+  }, [query])
+
+  const handleSelect = (result: SearchResult) => {
+    if (result.type === 'app') {
+      onOpenApp(result.id)
+    }
+    onClose()
+    setQuery('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose()
+    } else if (e.key === 'Enter' && results.length > 0) {
+      handleSelect(results[0])
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/20 z-[60]"
+            onClick={onClose}
+          />
+
+          {/* Search Box */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            transition={{ duration: 0.15, ease: 'easeOut' }}
+            className="fixed top-[20%] left-1/2 -translate-x-1/2 w-[600px] max-w-[90%] glass rounded-xl shadow-2xl z-[70]"
+          >
+            <div className="flex items-center px-4 py-3 gap-3 border-b border-gray-200/20">
+              <MagnifyingGlass size={24} weight="regular" className="text-gray-600" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="flex-1 bg-transparent text-xl focus:outline-none text-gray-800 placeholder-gray-400"
+                placeholder="Spotlight Search"
+                autoComplete="off"
+                spellCheck={false}
+              />
+              <button
+                onClick={onClose}
+                className="text-gray-500 hover:text-gray-700 transition-colors"
+              >
+                <X size={20} weight="regular" />
+              </button>
+            </div>
+
+            {/* Results */}
+            {results.length > 0 && (
+              <div className="max-h-96 overflow-y-auto p-2">
+                {results.map((result, index) => (
+                  <div
+                    key={result.id}
+                    onClick={() => handleSelect(result)}
+                    className={`flex items-center px-3 py-2.5 hover:bg-blue-500 hover:text-white rounded-lg cursor-pointer transition-colors ${
+                      index === 0 ? 'bg-blue-500/10' : ''
+                    }`}
+                  >
+                    <div className="flex-1 flex flex-col">
+                      <span className="font-medium">{result.name}</span>
+                      <span className="text-xs opacity-70 capitalize">{result.type}</span>
+                    </div>
+                    {result.type === 'app' && (
+                      <span className="text-xs opacity-50">⌘ Enter</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* No results */}
+            {query.trim() !== '' && results.length === 0 && (
+              <div className="p-4 text-center text-gray-500">
+                No results found for "{query}"
+              </div>
+            )}
+
+            {/* Quick Actions (when no query) */}
+            {query === '' && (
+              <div className="p-4">
+                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
+                  Suggestions
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  {apps.slice(0, 4).map(app => (
+                    <div
+                      key={app.id}
+                      onClick={() => handleSelect(app)}
+                      className="flex items-center px-3 py-2 hover:bg-gray-100 rounded-lg cursor-pointer transition-colors"
+                    >
+                      <span className="text-sm">{app.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

app/components/Terminal.tsx

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

app/components/TopBar.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import {
+  SpeakerHigh,
+  WifiHigh,
+  BatteryFull,
+  MagnifyingGlass,
+  Desktop,
+  CirclesFour
+} from '@phosphor-icons/react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface TopBarProps {
+  onPowerAction?: () => void
+  activeAppName?: string
+  onAboutClick?: () => void
+}
+
+export function TopBar({ onPowerAction, activeAppName = 'Finder', onAboutClick }: TopBarProps) {
+  const [appleMenuOpen, setAppleMenuOpen] = useState(false)
+  const [currentTime, setCurrentTime] = useState('')
+
+  useEffect(() => {
+    const updateTime = () => {
+      const now = new Date()
+      const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+      const timeString = now.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+      })
+      const dateString = `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]}`
+      setCurrentTime(`${dateString}  ${timeString}`)
+    }
+
+    updateTime()
+    const interval = setInterval(updateTime, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="fixed top-0 left-0 right-0 h-8 glass flex items-center justify-between px-4 text-sm z-50 shadow-sm">
+      <div className="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>
+        <span className="font-bold text-gray-800">Reuben OS</span>
+        <span className="text-gray-600 text-xs ml-2">{activeAppName}</span>
+      </div>
+
+      <div className="flex items-center space-x-4">
+        <BatteryFull size={16} weight="fill" className="text-gray-700" />
+        <WifiHigh size={16} weight="fill" className="text-gray-700" />
+        <MagnifyingGlass size={16} weight="regular" className="text-gray-700" />
+        <div className="font-medium text-gray-800">{currentTime}</div>
+      </div>
+
+      <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-8 left-2 w-48 glass rounded-lg shadow-xl flex flex-col py-1 z-[60] text-sm"
+            >
+              <button
+                onClick={() => {
+                  if (onAboutClick) onAboutClick()
+                  setAppleMenuOpen(false)
+                }}
+                className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                About Reuben OS
+              </button>
+              <div className="h-px bg-gray-300 my-1 mx-2" />
+              <button className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                System Settings...
+              </button>
+              <div className="h-px bg-gray-300 my-1 mx-2" />
+              <button className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800">
+                Sleep
+              </button>
+              <button className="text-left px-4 py-1 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 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+              >
+                Shut Down...
+              </button>
+              <div className="h-px bg-gray-300 my-1 mx-2" />
+              <button
+                onClick={() => {
+                  if (onPowerAction) onPowerAction()
+                  setAppleMenuOpen(false)
+                }}
+                className="text-left px-4 py-1 hover:bg-blue-500 hover:text-white transition-colors text-gray-800"
+              >
+                Log Out...
+              </button>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

app/components/VSCodeEditor.tsx

@@ -0,0 +1,458 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import Window from './Window'
+import Editor from '@monaco-editor/react'
+import {
+  Code,
+  Play,
+  FileHtml,
+  FileCss,
+  FileJs,
+  Download,
+  Upload,
+  FloppyDisk,
+  Eye,
+  EyeSlash,
+  ArrowsOutSimple,
+  ArrowsInSimple,
+  X
+} from '@phosphor-icons/react'
+
+interface VSCodeEditorProps {
+  onClose: () => void
+  userSession?: string
+}
+
+interface Tab {
+  id: string
+  name: string
+  language: string
+  content: string
+}
+
+export function VSCodeEditor({ onClose, userSession }: VSCodeEditorProps) {
+  const [activeTab, setActiveTab] = useState('html')
+  const [showPreview, setShowPreview] = useState(true)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const previewRef = useRef<HTMLIFrameElement>(null)
+
+  // Generate unique session ID if not provided
+  const sessionId = userSession || `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+
+  // Function to get icon for each tab
+  const getTabIcon = (tabId: string) => {
+    switch (tabId) {
+      case 'html':
+        return <FileHtml size={16} weight="fill" className="text-orange-500" />
+      case 'css':
+        return <FileCss size={16} weight="fill" className="text-blue-500" />
+      case 'js':
+        return <FileJs size={16} weight="fill" className="text-yellow-500" />
+      default:
+        return <Code size={16} weight="fill" className="text-gray-500" />
+    }
+  }
+
+  const [tabs, setTabs] = useState<Tab[]>([
+    {
+      id: 'html',
+      name: 'index.html',
+      language: 'html',
+      content: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Awesome Page</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to Reuben OS Editor!</h1>
+        <p>Start coding and see your changes live!</p>
+        <button onclick="showMessage()">Click Me!</button>
+        <div id="output"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>`
+    },
+    {
+      id: 'css',
+      name: 'style.css',
+      language: 'css',
+      content: `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    max-width: 500px;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 2.5em;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+p {
+    color: #666;
+    margin-bottom: 30px;
+    font-size: 1.1em;
+}
+
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 50px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+#output {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f7f7f7;
+    border-radius: 10px;
+    min-height: 50px;
+    font-family: 'Courier New', monospace;
+}`
+    },
+    {
+      id: 'js',
+      name: 'script.js',
+      language: 'javascript',
+      content: `// Welcome to Reuben OS Code Editor!
+
+function showMessage() {
+    const messages = [
+        "Hello from Reuben OS! 🚀",
+        "You're doing great! 💪",
+        "Keep coding! 🎉",
+        "Awesome work! ⭐",
+        "Reuben OS is amazing! 🌟"
+    ];
+
+    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+    const output = document.getElementById('output');
+
+    output.innerHTML = \`
+        <strong>Message:</strong> \${randomMessage}<br>
+        <small>Generated at: \${new Date().toLocaleTimeString()}</small>
+    \`;
+
+    // Add animation
+    output.style.opacity = '0';
+    setTimeout(() => {
+        output.style.transition = 'opacity 0.5s ease';
+        output.style.opacity = '1';
+    }, 10);
+}
+
+// Log to console when page loads
+console.log('Reuben OS Editor initialized!');
+console.log('Session ID:', '\${sessionId}');`
+    }
+  ])
+
+  // Load saved code from localStorage based on session
+  useEffect(() => {
+    const savedCode = localStorage.getItem(`vscode_${sessionId}`)
+    if (savedCode) {
+      try {
+        const parsed = JSON.parse(savedCode)
+        setTabs(parsed)
+      } catch (e) {
+        console.error('Failed to load saved code')
+      }
+    }
+  }, [sessionId])
+
+  // Save code to localStorage
+  useEffect(() => {
+    if (tabs.length > 0) {
+      localStorage.setItem(`vscode_${sessionId}`, JSON.stringify(tabs))
+    }
+  }, [tabs, sessionId])
+
+  // Update preview when code changes
+  useEffect(() => {
+    if (previewRef.current && showPreview) {
+      updatePreview()
+    }
+  }, [tabs, showPreview])
+
+  const updatePreview = () => {
+    if (!previewRef.current) return
+
+    const htmlTab = tabs.find(t => t.id === 'html')
+    const cssTab = tabs.find(t => t.id === 'css')
+    const jsTab = tabs.find(t => t.id === 'js')
+
+    const previewContent = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <style>${cssTab?.content || ''}</style>
+      </head>
+      <body>
+        ${htmlTab?.content.replace(/<link.*?>/g, '').replace(/<script.*?src=.*?><\/script>/g, '') || ''}
+        <script>
+          const sessionId = '${sessionId}';
+          ${jsTab?.content || ''}
+        </script>
+      </body>
+      </html>
+    `
+
+    const blob = new Blob([previewContent], { type: 'text/html' })
+    const url = URL.createObjectURL(blob)
+    previewRef.current.src = url
+  }
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (!value) return
+
+    setTabs(prev => prev.map(tab =>
+      tab.id === activeTab
+        ? { ...tab, content: value }
+        : tab
+    ))
+  }
+
+  const downloadCode = () => {
+    const htmlTab = tabs.find(t => t.id === 'html')
+    const cssTab = tabs.find(t => t.id === 'css')
+    const jsTab = tabs.find(t => t.id === 'js')
+
+    const fullHTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Reuben OS Project</title>
+    <style>
+${cssTab?.content || ''}
+    </style>
+</head>
+<body>
+${htmlTab?.content.replace(/<.*?html.*?>|<.*?head.*?>|<.*?body.*?>|<\/.*?html.*?>|<\/.*?head.*?>|<\/.*?body.*?>/gi, '').replace(/<link.*?>/g, '').replace(/<script.*?src=.*?><\/script>/g, '') || ''}
+    <script>
+${jsTab?.content || ''}
+    </script>
+</body>
+</html>`
+
+    const blob = new Blob([fullHTML], { type: 'text/html' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `webos-project-${sessionId}.html`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const saveToMCP = async () => {
+    setIsSaving(true)
+    try {
+      const response = await fetch('/api/code/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId,
+          code: tabs,
+          timestamp: Date.now()
+        })
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        console.log('Code saved successfully!', result)
+
+        // Show success message
+        const successDiv = document.createElement('div')
+        successDiv.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg z-[200]'
+        successDiv.textContent = `Saved to: data/vscode_sessions/${sessionId}`
+        document.body.appendChild(successDiv)
+
+        setTimeout(() => {
+          successDiv.remove()
+        }, 3000)
+
+        // Also save to localStorage
+        localStorage.setItem(`vscode_${sessionId}`, JSON.stringify(tabs))
+      }
+    } catch (error) {
+      console.error('Failed to save code:', error)
+
+      // Show error message
+      const errorDiv = document.createElement('div')
+      errorDiv.className = 'fixed bottom-4 right-4 bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg z-[200]'
+      errorDiv.textContent = 'Failed to save code'
+      document.body.appendChild(errorDiv)
+
+      setTimeout(() => {
+        errorDiv.remove()
+      }, 3000)
+    }
+    setIsSaving(false)
+  }
+
+  const activeTabContent = tabs.find(t => t.id === activeTab)
+
+  return (
+    <Window
+      id="vscode"
+      title="VS Code - Reuben OS Editor"
+      isOpen={true}
+      onClose={onClose}
+      width={isFullscreen ? window.innerWidth : 1400}
+      height={isFullscreen ? window.innerHeight - 32 : 800}
+      x={isFullscreen ? 0 : 50}
+      y={isFullscreen ? 32 : 50}
+      darkMode={true}
+      className="vscode-window"
+    >
+      <div className="flex flex-col h-full bg-[#1e1e1e]">
+        {/* Editor Header */}
+        <div className="flex items-center justify-between bg-[#2d2d2d] px-4 py-2 border-b border-[#3e3e3e]">
+          <div className="flex items-center gap-2">
+            <Code size={20} weight="bold" className="text-blue-400" />
+            <span className="text-gray-300 text-sm">Session: {sessionId.substring(0, 8)}...</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={saveToMCP}
+              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm flex items-center gap-2"
+              disabled={isSaving}
+            >
+              <FloppyDisk size={16} />
+              {isSaving ? 'Saving...' : 'Save'}
+            </button>
+
+            <button
+              onClick={downloadCode}
+              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm flex items-center gap-2"
+            >
+              <Download size={16} />
+              Download
+            </button>
+
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm flex items-center gap-2"
+            >
+              {showPreview ? <EyeSlash size={16} /> : <Eye size={16} />}
+              Preview
+            </button>
+
+            <button
+              onClick={() => setIsFullscreen(!isFullscreen)}
+              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm flex items-center gap-2"
+            >
+              {isFullscreen ? <ArrowsInSimple size={16} /> : <ArrowsOutSimple size={16} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Editor Section */}
+          <div className={`flex flex-col ${showPreview ? 'w-1/2' : 'w-full'} border-r border-[#3e3e3e]`}>
+            {/* Tabs */}
+            <div className="flex bg-[#252526] border-b border-[#3e3e3e]">
+              {tabs.map(tab => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`px-4 py-2 text-sm flex items-center gap-2 border-r border-[#3e3e3e] transition-colors ${
+                    activeTab === tab.id
+                      ? 'bg-[#1e1e1e] text-white'
+                      : 'text-gray-400 hover:text-white hover:bg-[#2d2d2d]'
+                  }`}
+                >
+                  {getTabIcon(tab.id)}
+                  {tab.name}
+                </button>
+              ))}
+            </div>
+
+            {/* Monaco Editor */}
+            <div className="flex-1">
+              <Editor
+                height="100%"
+                language={activeTabContent?.language}
+                value={activeTabContent?.content}
+                onChange={handleEditorChange}
+                theme="vs-dark"
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 14,
+                  wordWrap: 'on',
+                  automaticLayout: true,
+                  scrollBeyondLastLine: false
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Preview Section */}
+          {showPreview && (
+            <div className="flex-1 flex flex-col bg-white">
+              <div className="bg-gray-100 px-4 py-2 border-b border-gray-300 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Eye size={16} className="text-gray-600" />
+                  <span className="text-sm font-medium">Live Preview</span>
+                </div>
+                <button
+                  onClick={updatePreview}
+                  className="p-1 hover:bg-gray-200 rounded transition-colors"
+                >
+                  <Play size={16} className="text-gray-600" />
+                </button>
+              </div>
+
+              <iframe
+                ref={previewRef}
+                className="flex-1 w-full bg-white"
+                sandbox="allow-scripts"
+                title="Code Preview"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/WebBrowser.tsx

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

app/components/WebBrowserApp.tsx

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

app/components/Window.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+import { Rnd } from 'react-rnd';
+
+interface WindowProps {
+  id: string;
+  title: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onMinimize?: () => void;
+  onMaximize?: () => void;
+  children: ReactNode;
+  width?: number | string;
+  height?: number | string;
+  x?: number;
+  y?: number;
+  resizable?: boolean;
+  className?: string;
+  headerClassName?: string;
+  darkMode?: boolean;
+}
+
+const Window: React.FC<WindowProps> = ({
+  id,
+  title,
+  isOpen,
+  onClose,
+  onMinimize,
+  onMaximize,
+  children,
+  width = 800,
+  height = 600,
+  x = 100,
+  y = 100,
+  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 [currentSize, setCurrentSize] = React.useState({ width, height });
+
+  if (!isOpen) return null;
+
+  const handleMaximize = () => {
+    if (!onMaximize) return;
+
+    if (!isMaximized) {
+      setPreviousSize({ width, height, x, y });
+      setIsMaximized(true);
+    } else {
+      setIsMaximized(false);
+    }
+    onMaximize();
+  };
+
+  const windowClass = darkMode ? 'bg-gray-900 border-gray-700' : 'bg-[#f5f5f5] border-gray-300/50';
+  const headerClass = darkMode ? 'bg-gray-800 border-gray-700' : 'bg-[#f1f1f1] border-gray-300';
+
+  if (isMaximized) {
+    return (
+      <div
+        className={`fixed inset-0 top-8 z-50 flex flex-col overflow-hidden ${windowClass} ${className}`}
+      >
+        <div
+          className={`h-12 flex items-center px-4 space-x-4 border-b ${headerClass} ${headerClassName}`}
+        >
+          <div className="flex space-x-2">
+            <div className="traffic-light traffic-close" onClick={onClose} />
+            <div className="traffic-light traffic-min" onClick={onMinimize} />
+            <div className="traffic-light traffic-max" onClick={handleMaximize} />
+          </div>
+          <span className="font-semibold text-gray-700 flex-1 text-center pr-16">{title}</span>
+        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    <Rnd
+      default={{
+        x: currentPosition.x,
+        y: currentPosition.y,
+        width: typeof currentSize.width === 'number' ? currentSize.width : 800,
+        height: typeof currentSize.height === 'number' ? currentSize.height : 600,
+      }}
+      position={undefined}
+      size={undefined}
+      minWidth={400}
+      minHeight={300}
+      bounds="parent"
+      dragHandleClassName="window-drag-handle"
+      enableResizing={resizable}
+      onDragStop={(e, d) => {
+        setCurrentPosition({ x: d.x, y: d.y });
+      }}
+      onResizeStop={(e, direction, ref, delta, position) => {
+        setCurrentSize({
+          width: ref.offsetWidth,
+          height: ref.offsetHeight,
+        });
+        setCurrentPosition(position);
+      }}
+      className="window-transition"
+      style={{ zIndex: 50 }}
+    >
+      <div
+        className={`h-full rounded-xl shadow-2xl overflow-hidden border ${windowClass} ${className}`}
+      >
+        <div
+          className={`window-drag-handle h-12 flex items-center px-4 space-x-4 border-b cursor-move ${headerClass} ${headerClassName}`}
+        >
+          <div className="flex space-x-2">
+            <div className="traffic-light traffic-close" onClick={onClose} />
+            <div className="traffic-light traffic-min" onClick={onMinimize} />
+            <div className="traffic-light traffic-max" onClick={handleMaximize} />
+          </div>
+          <span className="font-semibold text-gray-700 flex-1 text-center pr-16">{title}</span>
+        </div>
+        <div className="flex-1 overflow-auto bg-white" style={{ height: 'calc(100% - 3rem)' }}>
+          {children}
+        </div>
+      </div>
+    </Rnd>
+  );
+};
+
+export default Window;

app/gemini/page.tsx

@@ -0,0 +1,426 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+import { Upload, Mic, MicOff, Send, Image as ImageIcon, FileText, Loader2, X } from 'lucide-react'
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  type: 'text' | 'image' | 'audio'
+  imageUrl?: string
+  timestamp: Date
+}
+
+export default function GeminiAIApp() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [inputText, setInputText] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isRecording, setIsRecording] = useState(false)
+  const [selectedImage, setSelectedImage] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<'chat' | 'transcribe' | 'image'>('chat')
+  const [apiKey, setApiKey] = useState('')
+  const [showApiKeyInput, setShowApiKeyInput] = useState(true)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const audioInputRef = useRef<HTMLInputElement>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const audioChunksRef = useRef<Blob[]>([])
+
+  useEffect(() => {
+    // Check for stored API key
+    const storedKey = localStorage.getItem('gemini_api_key')
+    if (storedKey) {
+      setApiKey(storedKey)
+      setShowApiKeyInput(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const saveApiKey = () => {
+    if (apiKey.trim()) {
+      localStorage.setItem('gemini_api_key', apiKey)
+      setShowApiKeyInput(false)
+    }
+  }
+
+  const handleSendMessage = async () => {
+    if (!inputText.trim() && !selectedImage) return
+
+    const newMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputText || 'Image uploaded',
+      type: selectedImage ? 'image' : 'text',
+      imageUrl: selectedImage || undefined,
+      timestamp: new Date()
+    }
+
+    setMessages(prev => [...prev, newMessage])
+    setInputText('')
+    setSelectedImage(null)
+    setIsLoading(true)
+
+    try {
+      const response = await fetch('/api/gemini/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: inputText,
+          imageUrl: selectedImage,
+          apiKey: apiKey,
+          history: messages.slice(-10) // Send last 10 messages for context
+        })
+      })
+
+      const data = await response.json()
+
+      if (data.error) {
+        throw new Error(data.error)
+      }
+
+      const aiMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: data.response,
+        type: 'text',
+        timestamp: new Date()
+      }
+
+      setMessages(prev => [...prev, aiMessage])
+    } catch (error) {
+      console.error('Error:', error)
+      const errorMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: `Error: ${error instanceof Error ? error.message : 'Failed to get response'}`,
+        type: 'text',
+        timestamp: new Date()
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        setSelectedImage(reader.result as string)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const mediaRecorder = new MediaRecorder(stream)
+      mediaRecorderRef.current = mediaRecorder
+      audioChunksRef.current = []
+
+      mediaRecorder.ondataavailable = (event) => {
+        audioChunksRef.current.push(event.data)
+      }
+
+      mediaRecorder.onstop = async () => {
+        const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' })
+        await transcribeAudio(audioBlob)
+        stream.getTracks().forEach(track => track.stop())
+      }
+
+      mediaRecorder.start()
+      setIsRecording(true)
+    } catch (error) {
+      console.error('Error accessing microphone:', error)
+      alert('Error accessing microphone. Please check permissions.')
+    }
+  }
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop()
+      setIsRecording(false)
+    }
+  }
+
+  const transcribeAudio = async (audioBlob: Blob) => {
+    setIsLoading(true)
+    const formData = new FormData()
+    formData.append('audio', audioBlob, 'recording.wav')
+    formData.append('apiKey', apiKey)
+
+    try {
+      const response = await fetch('/api/gemini/transcribe', {
+        method: 'POST',
+        body: formData
+      })
+
+      const data = await response.json()
+
+      if (data.error) {
+        throw new Error(data.error)
+      }
+
+      setInputText(data.transcription)
+    } catch (error) {
+      console.error('Transcription error:', error)
+      alert('Failed to transcribe audio')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleAudioFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      await transcribeAudio(file)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 p-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
+          {/* Header */}
+          <div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
+            <h1 className="text-3xl font-bold mb-2">Gemini AI Assistant</h1>
+            <p className="text-blue-100">Chat, Transcribe, and Analyze Images with AI</p>
+          </div>
+
+          {/* API Key Input */}
+          {showApiKeyInput && (
+            <div className="p-4 bg-yellow-50 border-b border-yellow-200">
+              <div className="flex gap-2">
+                <input
+                  type="password"
+                  placeholder="Enter your Gemini API Key"
+                  value={apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                  onClick={saveApiKey}
+                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Save Key
+                </button>
+              </div>
+              <p className="text-sm text-gray-600 mt-2">
+                Get your API key from <a href="https://makersuite.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Google AI Studio</a>
+              </p>
+            </div>
+          )}
+
+          {/* Tabs */}
+          <div className="flex border-b border-gray-200">
+            <button
+              onClick={() => setActiveTab('chat')}
+              className={`flex-1 py-3 px-4 font-medium transition-colors ${
+                activeTab === 'chat'
+                  ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              Chat
+            </button>
+            <button
+              onClick={() => setActiveTab('transcribe')}
+              className={`flex-1 py-3 px-4 font-medium transition-colors ${
+                activeTab === 'transcribe'
+                  ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              Transcribe
+            </button>
+            <button
+              onClick={() => setActiveTab('image')}
+              className={`flex-1 py-3 px-4 font-medium transition-colors ${
+                activeTab === 'image'
+                  ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              Image Analysis
+            </button>
+          </div>
+
+          {/* Chat Messages */}
+          <div className="h-[500px] overflow-y-auto p-4 space-y-4">
+            {messages.length === 0 && (
+              <div className="text-center text-gray-500 mt-20">
+                <div className="mb-4">
+                  {activeTab === 'chat' && <FileText size={48} className="mx-auto text-gray-300" />}
+                  {activeTab === 'transcribe' && <Mic size={48} className="mx-auto text-gray-300" />}
+                  {activeTab === 'image' && <ImageIcon size={48} className="mx-auto text-gray-300" />}
+                </div>
+                <p className="text-lg font-medium">
+                  {activeTab === 'chat' && 'Start a conversation with Gemini AI'}
+                  {activeTab === 'transcribe' && 'Record or upload audio to transcribe'}
+                  {activeTab === 'image' && 'Upload an image for AI analysis'}
+                </p>
+              </div>
+            )}
+
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div
+                  className={`max-w-[70%] p-4 rounded-2xl ${
+                    message.role === 'user'
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}
+                >
+                  {message.imageUrl && (
+                    <img
+                      src={message.imageUrl}
+                      alt="Uploaded"
+                      className="mb-2 rounded-lg max-h-64 object-contain"
+                    />
+                  )}
+                  <p className="whitespace-pre-wrap">{message.content}</p>
+                  <p className={`text-xs mt-2 ${
+                    message.role === 'user' ? 'text-blue-100' : 'text-gray-500'
+                  }`}>
+                    {new Date(message.timestamp).toLocaleTimeString()}
+                  </p>
+                </div>
+              </div>
+            ))}
+
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-gray-100 p-4 rounded-2xl">
+                  <Loader2 className="animate-spin h-5 w-5 text-gray-600" />
+                </div>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Selected Image Preview */}
+          {selectedImage && (
+            <div className="px-4 pb-2">
+              <div className="relative inline-block">
+                <img
+                  src={selectedImage}
+                  alt="Selected"
+                  className="h-20 rounded-lg border-2 border-blue-500"
+                />
+                <button
+                  onClick={() => setSelectedImage(null)}
+                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Input Area */}
+          <div className="border-t border-gray-200 p-4">
+            <div className="flex gap-2">
+              {/* File Inputs */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={handleImageUpload}
+                className="hidden"
+              />
+              <input
+                ref={audioInputRef}
+                type="file"
+                accept="audio/*"
+                onChange={handleAudioFileUpload}
+                className="hidden"
+              />
+
+              {/* Action Buttons */}
+              {activeTab === 'image' && (
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="p-3 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-colors"
+                  title="Upload Image"
+                >
+                  <ImageIcon size={20} />
+                </button>
+              )}
+
+              {activeTab === 'transcribe' && (
+                <>
+                  <button
+                    onClick={isRecording ? stopRecording : startRecording}
+                    className={`p-3 rounded-lg transition-colors ${
+                      isRecording
+                        ? 'bg-red-100 text-red-600 hover:bg-red-200 animate-pulse'
+                        : 'bg-green-100 text-green-600 hover:bg-green-200'
+                    }`}
+                    title={isRecording ? 'Stop Recording' : 'Start Recording'}
+                  >
+                    {isRecording ? <MicOff size={20} /> : <Mic size={20} />}
+                  </button>
+                  <button
+                    onClick={() => audioInputRef.current?.click()}
+                    className="p-3 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors"
+                    title="Upload Audio File"
+                  >
+                    <Upload size={20} />
+                  </button>
+                </>
+              )}
+
+              {/* Text Input */}
+              <input
+                type="text"
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && !e.shiftKey && handleSendMessage()}
+                placeholder={
+                  activeTab === 'chat' ? 'Type your message...' :
+                  activeTab === 'transcribe' ? 'Transcribed text will appear here...' :
+                  'Describe what you want to analyze...'
+                }
+                className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                disabled={isLoading}
+              />
+
+              {/* Send Button */}
+              <button
+                onClick={handleSendMessage}
+                disabled={isLoading || (!inputText.trim() && !selectedImage)}
+                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
+              >
+                {isLoading ? <Loader2 className="animate-spin h-5 w-5" /> : <Send size={20} />}
+              </button>
+            </div>
+
+            {/* Feature Instructions */}
+            <div className="mt-4 text-sm text-gray-600">
+              {activeTab === 'chat' && (
+                <p>Chat with Gemini AI. Ask questions, get creative responses, or have a conversation.</p>
+              )}
+              {activeTab === 'transcribe' && (
+                <p>Record audio or upload an audio file to transcribe it to text using AI.</p>
+              )}
+              {activeTab === 'image' && (
+                <p>Upload an image to get AI-powered analysis, descriptions, or answers about the image content.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -1,26 +1,315 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "./styles/theme.css";
 
+/* Tailwind base layer for compatibility */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+/* Custom variant for dark mode */
+@custom-variant dark (&:is(.dark *));
+
+/* CSS Variables for theming */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
   }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-inter, 'Inter'), 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Ubuntu', ui-sans-serif, system-ui, sans-serif;
+    overflow: hidden;
+    touch-action: none;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* Sonoma Background */
+.bg-sonoma {
+  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
+  background-size: cover;
+  background-position: center;
+}
+
+/* Glassmorphism utilities */
+.glass {
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.glass-dark {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dock-glass {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* App Icon Styles */
+.app-icon {
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.app-icon:hover {
+  transform: scale(1.2) translateY(-10px);
+}
+.app-icon:active {
+  transform: scale(0.95);
+}
+
+/* Window Animations */
+.window-transition {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.window-hidden {
+  opacity: 0;
+  transform: scale(0.95);
+  pointer-events: none;
+}
+
+/* Traffic Lights */
+.traffic-light {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.traffic-close {
+  background-color: #ff5f56;
+  border: 1px solid #e0443e;
+}
+.traffic-min {
+  background-color: #ffbd2e;
+  border: 1px solid #dea123;
+}
+.traffic-max {
+  background-color: #27c93f;
+  border: 1px solid #1aab29;
+}
+
+.traffic-light:hover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  color: rgba(0,0,0,0.5);
+  font-weight: bold;
+}
+.traffic-close:hover::after { content: '×'; }
+.traffic-min:hover::after { content: '−'; }
+.traffic-max:hover::after { content: '+'; }
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.2);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0,0,0,0.3);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* Desktop Icon Grid */
+.desktop-icon {
+  @apply flex flex-col items-center gap-1 cursor-pointer transition-all;
 }
+.desktop-icon:hover {
+  transform: scale(1.05);
+}
+.desktop-icon-label {
+  @apply text-xs text-white font-medium px-2 py-0.5 rounded;
+  background: rgba(0,0,0,0.3);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+}
+
+/* macOS style window */
+.macos-window {
+  @apply rounded-xl shadow-2xl overflow-hidden;
+  background: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.macos-window-header {
+  @apply h-10 flex items-center px-4 justify-between;
+  background: #f1f1f1;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Dock styles */
+.dock-container {
+  @apply fixed bottom-2 left-0 right-0 flex justify-center z-50;
+}
+
+.dock-item {
+  @apply relative flex flex-col items-center gap-1;
+}
+
+.dock-dot {
+  @apply w-1 h-1 rounded-full mt-1 opacity-0 transition-opacity;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.dock-item:hover .dock-dot {
+  @apply opacity-100;
+}

app/hooks/useKV.ts

@@ -0,0 +1,37 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+// Custom implementation of useKV hook for key-value storage
+export function useKV<T>(key: string, defaultValue: T): [T, (value: T) => void] {
+  // Initialize state with the default value
+  const [value, setValue] = useState<T>(() => {
+    // Try to get the value from localStorage on initial load
+    if (typeof window !== 'undefined') {
+      try {
+        const storedValue = localStorage.getItem(key)
+        if (storedValue !== null) {
+          return JSON.parse(storedValue)
+        }
+      } catch (error) {
+        console.error(`Error reading from localStorage for key "${key}":`, error)
+      }
+    }
+    return defaultValue
+  })
+
+  // Update localStorage whenever the value changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem(key, JSON.stringify(value))
+      } catch (error) {
+        console.error(`Error writing to localStorage for key "${key}":`, error)
+      }
+    }
+  }, [key, value])
+
+  return [value, setValue]
+}
+
+export default useKV