diff --git a/emailDashboard.html b/emailDashboard.html
new file mode 100644
index 0000000..4232bb5
--- /dev/null
+++ b/emailDashboard.html
@@ -0,0 +1,956 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Email & Task Assistant</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+  
+  <style>
+    body {
+      font-family: 'Plus Jakarta Sans', sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+    }
+
+    .glass-effect {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .card-hover {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .card-hover:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .gradient-text {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .fade-up {
+      animation: fadeUp 0.4s ease-out;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .pulse-animation {
+      animation: pulse 2s infinite;
+    }
+
+    .agent-card {
+      background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .priority-high { border-left: 4px solid #ef4444; }
+    .priority-medium { border-left: 4px solid #f59e0b; }
+    .priority-low { border-left: 4px solid #10b981; }
+
+    .status-completed { background: #dcfce7; color: #166534; }
+    .status-pending { background: #fef3c7; color: #92400e; }
+    .status-overdue { background: #fee2e2; color: #991b1b; }
+
+    /* Mobile responsiveness */
+    @media (max-width: 768px) {
+      .mobile-grid {
+        grid-template-columns: 1fr;
+      }
+      
+      .mobile-stats {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+      }
+    }
+
+    /* Custom scrollbar */
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 2px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 2px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  </style>
+</head>
+
+<body class="bg-gray-50">
+  <!-- Mobile Header -->
+  <div class="lg:hidden bg-white shadow-sm border-b sticky top-0 z-50">
+    <div class="px-4 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
+          <i class="fas fa-brain text-white text-lg"></i>
+        </div>
+        <div>
+          <h1 class="text-lg font-bold text-gray-800">AI Assistant</h1>
+          <p class="text-xs text-gray-500">Email & Task Manager</p>
+        </div>
+      </div>
+      <button id="mobileMenuBtn" class="p-2 rounded-lg hover:bg-gray-100">
+        <i class="fas fa-bars text-gray-600"></i>
+      </button>
+    </div>
+  </div>
+
+  <div class="min-h-screen flex">
+    <!-- Sidebar -->
+    <div id="sidebar" class="hidden lg:flex fixed lg:relative z-40 w-64 bg-white shadow-xl border-r border-gray-200 flex-col">
+      <div class="p-6 border-b border-gray-100">
+        <div class="flex items-center gap-3">
+          <div class="w-12 h-12 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
+            <i class="fas fa-brain text-white text-xl"></i>
+          </div>
+          <div>
+            <h1 class="text-xl font-bold gradient-text">AI Assistant</h1>
+            <p class="text-sm text-gray-500">Email & Task Manager</p>
+          </div>
+        </div>
+      </div>
+      
+      <nav class="flex-1 p-4 space-y-2">
+        <a href="#" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
+          <i class="fas fa-tachometer-alt w-4"></i>
+          <span>Dashboard</span>
+        </a>
+        <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
+          <i class="fas fa-envelope w-4"></i>
+          <span>Email Manager</span>
+        </a>
+        <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
+          <i class="fas fa-calendar w-4"></i>
+          <span>Calendar</span>
+        </a>
+        <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
+          <i class="fas fa-tasks w-4"></i>
+          <span>Tasks</span>
+        </a>
+        <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
+          <i class="fas fa-chart-bar w-4"></i>
+          <span>Analytics</span>
+        </a>
+        <a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
+          <i class="fas fa-cog w-4"></i>
+          <span>Settings</span>
+        </a>
+      </nav>
+      
+      <div class="p-4 border-t border-gray-100">
+        <div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl">
+          <h3 class="font-semibold text-gray-800 mb-2">AI Status</h3>
+          <p class="text-sm text-gray-600 mb-3">All agents active</p>
+          <div class="flex items-center gap-2">
+            <div class="w-2 h-2 bg-green-500 rounded-full pulse-animation"></div>
+            <span class="text-xs text-green-600 font-medium">Online</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Sidebar Overlay -->
+    <div id="sidebarOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"></div>
+
+    <!-- Main Content -->
+    <div class="flex-1 lg:ml-0">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-8">
+        
+        <!-- Desktop Header -->
+        <div class="hidden lg:block mb-8">
+          <div class="flex items-center justify-between">
+            <div>
+              <h1 class="text-3xl font-bold text-gray-800 mb-2">AI Email & Task Dashboard</h1>
+              <p class="text-white">Manage your emails, calendar, and tasks with AI assistance</p>
+            </div>
+            <div class="text-right">
+              <p class="text-sm text-white">Last sync</p>
+              <p class="font-semibold text-gray-800" id="lastSync">Just now</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- AI Agent Command Center -->
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 lg:p-6 mb-6 lg:mb-8">
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-lg flex items-center justify-center">
+              <i class="fas fa-robot text-white"></i>
+            </div>
+            <h2 class="text-xl font-bold text-gray-800">AI Command Center</h2>
+          </div>
+          
+          <div class="flex flex-col sm:flex-row gap-3">
+            <div class="flex-1">
+              <input 
+                id="aiCommand" 
+                type="text" 
+                placeholder="Ask AI: 'Summarize today's emails', 'Schedule meeting with John', 'Show overdue tasks'" 
+                class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm lg:text-base" 
+              />
+            </div>
+            <button 
+              onclick="executeAICommand()" 
+              class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
+              id="aiBtn"
+            >
+              <i class="fas fa-brain"></i>
+              <span>Execute</span>
+            </button>
+          </div>
+          
+          <!-- Quick Commands -->
+          <div class="mt-4 flex flex-wrap gap-2">
+            <span class="text-sm text-gray-500 mr-2">Quick commands:</span>
+            <button onclick="setQuickCommand('Summarize today\'s emails')" class="text-xs bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 py-1 rounded-full transition-colors">
+              Email Summary
+            </button>
+            <button onclick="setQuickCommand('Show today\'s schedule')" class="text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 px-3 py-1 rounded-full transition-colors">
+              Today's Schedule
+            </button>
+            <button onclick="setQuickCommand('List overdue tasks')" class="text-xs bg-orange-100 hover:bg-orange-200 text-orange-700 px-3 py-1 rounded-full transition-colors">
+              Overdue Tasks
+            </button>
+          </div>
+        </div>
+
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6 lg:mb-8 mobile-stats">
+          <div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-gray-500">Unread Emails</p>
+                <p class="text-xl lg:text-2xl font-bold text-gray-800" id="unreadEmails">23</p>
+              </div>
+              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                <i class="fas fa-envelope text-blue-600"></i>
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-gray-500">Today's Meetings</p>
+                <p class="text-xl lg:text-2xl font-bold text-gray-800" id="todayMeetings">5</p>
+              </div>
+              <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                <i class="fas fa-calendar text-green-600"></i>
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-gray-500">Pending Tasks</p>
+                <p class="text-xl lg:text-2xl font-bold text-gray-800" id="pendingTasks">12</p>
+              </div>
+              <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+                <i class="fas fa-tasks text-orange-600"></i>
+              </div>
+            </div>
+          </div>
+          
+          <div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-gray-500">AI Actions</p>
+                <p class="text-xl lg:text-2xl font-bold text-gray-800" id="aiActions">47</p>
+              </div>
+              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
+                <i class="fas fa-robot text-purple-600"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AI Agents Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+          
+          <!-- Email Summary Agent -->
+          <div class="agent-card rounded-2xl p-6 card-hover">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+                  <i class="fas fa-envelope-open-text text-blue-600 text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="font-bold text-white">Email Agent</h3>
+                  <p class="text-sm text-gray-200">Smart email management</p>
+                </div>
+              </div>
+              <div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
+            </div>
+            
+            <div class="space-y-3 mb-4">
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Priority Emails</span>
+                  <span class="text-white font-semibold">5</span>
+                </div>
+              </div>
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Auto-Sorted</span>
+                  <span class="text-white font-semibold">18</span>
+                </div>
+              </div>
+            </div>
+            
+            <button onclick="openEmailAgent()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
+              Open Email Manager
+            </button>
+          </div>
+
+          <!-- Calendar Agent -->
+          <div class="agent-card rounded-2xl p-6 card-hover">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
+                  <i class="fas fa-calendar-alt text-green-600 text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="font-bold text-white">Calendar Agent</h3>
+                  <p class="text-sm text-gray-200">Smart scheduling</p>
+                </div>
+              </div>
+              <div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
+            </div>
+            
+            <div class="space-y-3 mb-4">
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Next Meeting</span>
+                  <span class="text-white font-semibold">2:30 PM</span>
+                </div>
+              </div>
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Free Slots</span>
+                  <span class="text-white font-semibold">3</span>
+                </div>
+              </div>
+            </div>
+            
+            <button onclick="openCalendarAgent()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
+              Open Calendar
+            </button>
+          </div>
+
+          <!-- Task Agent -->
+          <div class="agent-card rounded-2xl p-6 card-hover">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center gap-3">
+                <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
+                  <i class="fas fa-clipboard-list text-orange-600 text-xl"></i>
+                </div>
+                <div>
+                  <h3 class="font-bold text-white">Task Agent</h3>
+                  <p class="text-sm text-gray-200">Intelligent task management</p>
+                </div>
+              </div>
+              <div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
+            </div>
+            
+            <div class="space-y-3 mb-4">
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Due Today</span>
+                  <span class="text-white font-semibold">4</span>
+                </div>
+              </div>
+              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-gray-200">Completed</span>
+                  <span class="text-white font-semibold">8</span>
+                </div>
+              </div>
+            </div>
+            
+            <button onclick="openTaskAgent()" class="w-full bg-orange-600 hover:bg-orange-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
+              Open Task Manager
+            </button>
+          </div>
+        </div>
+
+        <!-- Recent Activity & Quick Actions -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          
+          <!-- Recent AI Actions -->
+          <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-bold text-gray-800">Recent AI Actions</h3>
+              <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
+            </div>
+            
+            <div class="space-y-3 custom-scrollbar max-h-64 overflow-y-auto">
+              <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-envelope text-blue-600 text-sm"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-800">Summarized 15 emails</p>
+                  <p class="text-xs text-gray-500">2 minutes ago</p>
+                </div>
+              </div>
+              
+              <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-calendar text-green-600 text-sm"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-800">Scheduled team meeting</p>
+                  <p class="text-xs text-gray-500">5 minutes ago</p>
+                </div>
+              </div>
+              
+              <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-tasks text-orange-600 text-sm"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-800">Created 3 task reminders</p>
+                  <p class="text-xs text-gray-500">10 minutes ago</p>
+                </div>
+              </div>
+              
+              <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-robot text-purple-600 text-sm"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-800">Auto-archived old emails</p>
+                  <p class="text-xs text-gray-500">15 minutes ago</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Actions -->
+          <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
+            <h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
+            
+            <div class="grid grid-cols-2 gap-3">
+              <button onclick="quickAction('compose')" class="p-4 bg-blue-50 hover:bg-blue-100 rounded-xl border border-blue-200 transition-colors group">
+                <div class="w-8 h-8 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center mx-auto mb-2">
+                  <i class="fas fa-edit text-blue-600"></i>
+                </div>
+                <p class="text-sm font-medium text-blue-700">Compose Email</p>
+              </button>
+              
+              <button onclick="quickAction('schedule')" class="p-4 bg-green-50 hover:bg-green-100 rounded-xl border border-green-200 transition-colors group">
+                <div class="w-8 h-8 bg-green-100 group-hover:bg-green-200 rounded-lg flex items-center justify-center mx-auto mb-2">
+                  <i class="fas fa-plus text-green-600"></i>
+                </div>
+                <p class="text-sm font-medium text-green-700">Schedule Meeting</p>
+              </button>
+              
+              <button onclick="quickAction('task')" class="p-4 bg-orange-50 hover:bg-orange-100 rounded-xl border border-orange-200 transition-colors group">
+                <div class="w-8 h-8 bg-orange-100 group-hover:bg-orange-200 rounded-lg flex items-center justify-center mx-auto mb-2">
+                  <i class="fas fa-plus-circle text-orange-600"></i>
+                </div>
+                <p class="text-sm font-medium text-orange-700">Add Task</p>
+              </button>
+              
+              <button onclick="quickAction('analyze')" class="p-4 bg-purple-50 hover:bg-purple-100 rounded-xl border border-purple-200 transition-colors group">
+                <div class="w-8 h-8 bg-purple-100 group-hover:bg-purple-200 rounded-lg flex items-center justify-center mx-auto mb-2">
+                  <i class="fas fa-chart-bar text-purple-600"></i>
+                </div>
+                <p class="text-sm font-medium text-purple-700">Analyze Trends</p>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- AI Response Modal -->
+  <div id="aiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
+      <div class="p-6 border-b border-gray-200">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
+              <i class="fas fa-brain text-indigo-600"></i>
+            </div>
+            <h3 class="text-lg font-bold text-gray-800">AI Response</h3>
+          </div>
+          <button onclick="closeAIModal()" class="text-gray-400 hover:text-gray-600">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      <div class="p-6 overflow-y-auto custom-scrollbar" id="aiResponse">
+        <!-- AI response content will be loaded here -->
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Global variables
+    let aiActionCount = 47;
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      updateLastSync();
+      initializeMobileMenu();
+      initializeEventListeners();
+    });
+
+    // Mobile menu functionality
+    function initializeMobileMenu() {
+      const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+      const sidebar = document.getElementById('sidebar');
+      const overlay = document.getElementById('sidebarOverlay');
+
+      mobileMenuBtn.addEventListener('click', function() {
+        sidebar.classList.toggle('hidden');
+        overlay.classList.toggle('hidden');
+      });
+
+      overlay.addEventListener('click', function() {
+        sidebar.classList.add('hidden');
+        overlay.classList.add('hidden');
+      });
+    }
+
+    // Event listeners
+    function initializeEventListeners() {
+      document.getElementById('aiCommand').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          executeAICommand();
+        }
+      });
+    }
+
+    // Update last sync time
+    function updateLastSync() {
+      const now = new Date();
+      document.getElementById('lastSync').textContent = now.toLocaleTimeString();
+    }
+
+    // Set quick command
+    function setQuickCommand(command) {
+      document.getElementById('aiCommand').value = command;
+      executeAICommand();
+    }
+
+    // Execute AI command
+    async function executeAICommand() {
+      const command = document.getElementById('aiCommand').value.trim();
+      if (!command) {
+        alert('Please enter a command');
+        return;
+      }
+
+      const btn = document.getElementById('aiBtn');
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+      btn.disabled = true;
+
+      try {
+        // Simulate AI processing
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // Generate response based on command
+        const response = generateAIResponse(command);
+        showAIModal(response);
+        
+        // Update stats
+        aiActionCount++;
+        document.getElementById('aiActions').textContent = aiActionCount;
+        updateLastSync();
+
+      } catch (error) {
+        alert('Error processing command: ' + error.message);
+      } finally {
+        btn.innerHTML = '<i class="fas fa-brain"></i> <span>Execute</span>';
+        btn.disabled = false;
+        document.getElementById('aiCommand').value = '';
+      }
+    }
+
+    // Generate AI response based on command
+    function generateAIResponse(command) {
+      const lowerCommand = command.toLowerCase();
+      
+      if (lowerCommand.includes('email') && lowerCommand.includes('summary')) {
+        return `
+          <div class="space-y-4">
+            <h4 class="text-lg font-semibold text-gray-800">📧 Email Summary</h4>
+            <div class="bg-blue-50 p-4 rounded-lg">
+              <h5 class="font-medium text-blue-800 mb-2">Priority Emails (5)</h5>
+              <ul class="space-y-2 text-sm text-blue-700">
+                <li>• Meeting request from Sarah Johnson - Project Kickoff</li>
+                <li>• Invoice approval needed - $2,500 vendor payment</li>
+                <li>• Client feedback on proposal - Urgent response required</li>
+                <li>• Security alert - Password reset request</li>
+                <li>• Team update from Marketing - Q4 campaign results</li>
+              </ul>
+            </div>
+            <div class="bg-gray-50 p-4 rounded-lg">
+              <h5 class="font-medium text-gray-800 mb-2">Other Emails (18)</h5>
+              <p class="text-sm text-gray-600">Newsletters (8), Social notifications (5), Automated reports (3), Other (2)</p>
+            </div>
+          </div>
+        `;
+      }
+      
+      if (lowerCommand.includes('schedule') || lowerCommand.includes('calendar')) {
+        return `
+          <div class="space-y-4">
+            <h4 class="text-lg font-semibold text-gray-800">📅 Today's Schedule</h4>
+            <div class="space-y-3">
+              <div class="border-l-4 border-green-500 bg-green-50 p-4 rounded-r-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h5 class="font-medium text-green-800">Team Standup</h5>
+                    <p class="text-sm text-green-600">Daily sync with development team</p>
+                  </div>
+                  <span class="text-sm font-medium text-green-700">9:00 AM</span>
+                </div>
+              </div>
+              <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-r-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h5 class="font-medium text-blue-800">Client Presentation</h5>
+                    <p class="text-sm text-blue-600">Q4 strategy review with ABC Corp</p>
+                  </div>
+                  <span class="text-sm font-medium text-blue-700">2:30 PM</span>
+                </div>
+              </div>
+              <div class="border-l-4 border-orange-500 bg-orange-50 p-4 rounded-r-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h5 class="font-medium text-orange-800">Budget Review</h5>
+                    <p class="text-sm text-orange-600">Monthly financial planning session</p>
+                  </div>
+                  <span class="text-sm font-medium text-orange-700">4:00 PM</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+      
+      if (lowerCommand.includes('task') && lowerCommand.includes('overdue')) {
+        return `
+          <div class="space-y-4">
+            <h4 class="text-lg font-semibold text-gray-800">⚠️ Overdue Tasks</h4>
+            <div class="space-y-3">
+              <div class="bg-red-50 border border-red-200 p-4 rounded-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h5 class="font-medium text-red-800">Website Security Audit</h5>
+                    <p class="text-sm text-red-600">Complete security assessment and report</p>
+                    <span class="inline-block mt-2 px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">High Priority</span>
+                  </div>
+                  <span class="text-sm text-red-600">Due: 2 days ago</span>
+                </div>
+              </div>
+              <div class="bg-orange-50 border border-orange-200 p-4 rounded-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h5 class="font-medium text-orange-800">Update Employee Handbook</h5>
+                    <p class="text-sm text-orange-600">Revise policies and procedures section</p>
+                    <span class="inline-block mt-2 px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">Medium Priority</span>
+                  </div>
+                  <span class="text-sm text-orange-600">Due: 1 day ago</span>
+                </div>
+              </div>
+            </div>
+            <div class="bg-blue-50 p-4 rounded-lg">
+              <p class="text-sm text-blue-700">💡 <strong>AI Suggestion:</strong> I can automatically reschedule these tasks and send reminder notifications to relevant team members.</p>
+            </div>
+          </div>
+        `;
+      }
+      
+      // Default response
+      return `
+        <div class="space-y-4">
+          <h4 class="text-lg font-semibold text-gray-800">🤖 AI Assistant Response</h4>
+          <div class="bg-indigo-50 p-4 rounded-lg">
+            <p class="text-indigo-700">I understand you want to: "<em>${command}</em>"</p>
+            <p class="text-sm text-indigo-600 mt-2">I'm processing your request and will provide a detailed response shortly. Here are some things I can help you with:</p>
+            <ul class="mt-3 space-y-1 text-sm text-indigo-700">
+              <li>• Summarize and prioritize emails</li>
+              <li>• Schedule meetings and manage calendar</li>
+              <li>• Create, organize, and track tasks</li>
+              <li>• Analyze productivity patterns</li>
+              <li>• Send automated reminders</li>
+            </ul>
+          </div>
+        </div>
+      `;
+    }
+
+    // Show AI modal
+    function showAIModal(content) {
+      document.getElementById('aiResponse').innerHTML = content;
+      document.getElementById('aiModal').classList.remove('hidden');
+    }
+
+    // Close AI modal
+    function closeAIModal() {
+      document.getElementById('aiModal').classList.add('hidden');
+    }
+
+    // Agent functions
+    function openEmailAgent() {
+      showAIModal(`
+        <div class="space-y-4">
+          <h4 class="text-lg font-semibold text-gray-800">📧 Email Management Center</h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="bg-blue-50 p-4 rounded-lg">
+              <h5 class="font-medium text-blue-800 mb-3">Quick Actions</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📩 Compose New Email</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📋 Bulk Archive</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🔍 Smart Search</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">⚙️ Auto-Reply Setup</button>
+              </div>
+            </div>
+            <div class="bg-green-50 p-4 rounded-lg">
+              <h5 class="font-medium text-green-800 mb-3">AI Features</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🧠 Smart Categorization</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📊 Sentiment Analysis</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">⚡ Quick Responses</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📅 Schedule from Email</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+
+    function openCalendarAgent() {
+      showAIModal(`
+        <div class="space-y-4">
+          <h4 class="text-lg font-semibold text-gray-800">📅 Calendar Management Center</h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="bg-green-50 p-4 rounded-lg">
+              <h5 class="font-medium text-green-800 mb-3">Schedule Management</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">➕ Schedule Meeting</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🔄 Reschedule Events</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🎯 Find Optimal Times</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📋 Block Focus Time</button>
+              </div>
+            </div>
+            <div class="bg-purple-50 p-4 rounded-lg">
+              <h5 class="font-medium text-purple-800 mb-3">AI Insights</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">📈 Meeting Analytics</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">⚡ Smart Suggestions</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">🔔 Intelligent Reminders</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">🎨 Calendar Optimization</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+
+    function openTaskAgent() {
+      showAIModal(`
+        <div class="space-y-4">
+          <h4 class="text-lg font-semibold text-gray-800">✅ Task Management Center</h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="bg-orange-50 p-4 rounded-lg">
+              <h5 class="font-medium text-orange-800 mb-3">Task Operations</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">➕ Create Task</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">📋 Bulk Edit</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">🔄 Auto-Assign</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">⏰ Set Reminders</button>
+              </div>
+            </div>
+            <div class="bg-blue-50 p-4 rounded-lg">
+              <h5 class="font-medium text-blue-800 mb-3">Smart Features</h5>
+              <div class="space-y-2">
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🎯 Priority Scoring</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📊 Progress Tracking</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🤖 Auto-Categorization</button>
+                <button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📈 Productivity Insights</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+
+    // Quick action functions
+    function quickAction(action) {
+      switch(action) {
+        case 'compose':
+          showAIModal(`
+            <div class="space-y-4">
+              <h4 class="text-lg font-semibold text-gray-800">✍️ Compose Email</h4>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">To:</label>
+                  <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="recipient@example.com">
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Subject:</label>
+                  <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Email subject">
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Message:</label>
+                  <textarea rows="6" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Type your message here..."></textarea>
+                </div>
+                <div class="flex gap-3">
+                  <button class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors">Send Email</button>
+                  <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Save Draft</button>
+                </div>
+              </div>
+            </div>
+          `);
+          break;
+        case 'schedule':
+          showAIModal(`
+            <div class="space-y-4">
+              <h4 class="text-lg font-semibold text-gray-800">📅 Schedule Meeting</h4>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Meeting Title:</label>
+                  <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Team sync meeting">
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Date:</label>
+                    <input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Time:</label>
+                    <input type="time" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
+                  </div>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Attendees:</label>
+                  <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="john@company.com, sarah@company.com">
+                </div>
+                <button class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition-colors">Schedule Meeting</button>
+              </div>
+            </div>
+          `);
+          break;
+        case 'task':
+          showAIModal(`
+            <div class="space-y-4">
+              <h4 class="text-lg font-semibold text-gray-800">✅ Add New Task</h4>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Task Title:</label>
+                  <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="Complete project documentation">
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1">Description:</label>
+                  <textarea rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="Task details and requirements..."></textarea>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Priority:</label>
+                    <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
+                      <option value="low">Low</option>
+                      <option value="medium" selected>Medium</option>
+                      <option value="high">High</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Due Date:</label>
+                    <input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
+                  </div>
+                </div>
+                <button class="w-full bg-orange-600 text-white py-2 px-4 rounded-lg hover:bg-orange-700 transition-colors">Create Task</button>
+              </div>
+            </div>
+          `);
+          break;
+        case 'analyze':
+          showAIModal(`
+            <div class="space-y-4">
+              <h4 class="text-lg font-semibold text-gray-800">📊 Productivity Analysis</h4>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="bg-blue-50 p-4 rounded-lg">
+                  <h5 class="font-medium text-blue-800 mb-2">Email Trends</h5>
+                  <ul class="text-sm text-blue-700 space-y-1">
+                    <li>• Peak email hours: 9-11 AM</li>
+                    <li>• Average response time: 2.3 hours</li>
+                    <li>• Most productive day: Tuesday</li>
+                    <li>• Email volume down 15% this week</li>
+                  </ul>
+                </div>
+                <div class="bg-green-50 p-4 rounded-lg">
+                  <h5 class="font-medium text-green-800 mb-2">Meeting Insights</h5>
+                  <ul class="text-sm text-green-700 space-y-1">
+                    <li>• Total meeting time: 12.5 hours/week</li>
+                    <li>• Average meeting length: 45 minutes</li>
+                    <li>• Most meetings on: Wednesday</li>
+                    <li>• Focus time blocks: 65% utilized</li>
+                  </ul>
+                </div>
+                <div class="bg-orange-50 p-4 rounded-lg">
+                  <h5 class="font-medium text-orange-800 mb-2">Task Performance</h5>
+                  <ul class="text-sm text-orange-700 space-y-1">
+                    <li>• Completion rate: 87%</li>
+                    <li>• Average task duration: 2.1 days</li>
+                    <li>• Overdue tasks: 8%</li>
+                    <li>• High priority completion: 95%</li>
+                  </ul>
+                </div>
+                <div class="bg-purple-50 p-4 rounded-lg">
+                  <h5 class="font-medium text-purple-800 mb-2">AI Recommendations</h5>
+                  <ul class="text-sm text-purple-700 space-y-1">
+                    <li>• Schedule focus time in mornings</li>
+                    <li>• Reduce meeting frequency by 20%</li>
+                    <li>• Automate routine email responses</li>
+                    <li>• Break large tasks into smaller ones</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          `);
+          break;
+      }
+    }
+
+    // Make functions global
+    window.executeAICommand = executeAICommand;
+    window.setQuickCommand = setQuickCommand;
+    window.openEmailAgent = openEmailAgent;
+    window.openCalendarAgent = openCalendarAgent;
+    window.openTaskAgent = openTaskAgent;
+    window.quickAction = quickAction;
+    window.closeAIModal = closeAIModal;
+  </script>
+</body>
+</html>
