أريد منك إنشاء واجهة ويب متكاملة لنظام FahadNeo AI - نظام ذكاء اصطناعي متعدد الوكلاء. ## المتطلبات الأساسية: 1. صفحة HTML واحدة تحتوي على كل شيء (Single Page Application) 2. تصميم عصري جداً باستخدام Glassmorphism و Neumorphism 3. Dark Mode كإعداد افتراضي مع زر للتبديل إلى Light Mode 4. دعم كامل للغة العربية (RTL) والإنجليزية (LTR) مع زر تبديل 5. Responsive Design يعمل على جميع الأجهزة (موبايل، تابلت، ديسكتوب) 6. يعمل مع Backend على http://localhost:5000 ## التقنيات المطلوبة: - HTML5 + CSS3 (inline في نفس الملف) - JavaScript ES6+ (inline في نفس الملف) - Tailwind CSS من CDN - Socket.io من CDN للاتصال المباشر - Lucide Icons من CDN - Chart.js من CDN للرسوم البيانية ## أقسام الواجهة المطلوبة: ### 1. Header (ثابت في الأعلى): - شعار "FahadNeo AI" مع أيقونة دماغ متحركة - مؤشر حالة الاتصال (أخضر = متصل، أحمر = غير متصل) - زر تبديل اللغة (عربي/English) - زر تبديل الثيم (Dark/Light) - زر الأوامر الصوتية مع مؤشر بصري عند التحدث - شريط بحث ذكي ### 2. Sidebar الأيسر (أو الأيمن في RTL): - قائمة بـ 9 Agents مع: - اسم الـ Agent - أيقونة مميزة لكل واحد - حالة (نشط/مشغول/متوقف) مع لون مختلف - عداد المهام المنجزة - زر لتشغيل/إيقاف - إمكانية سحب وإفلات لترتيب الـ Agents ### 3. المحتوى الرئيسي (وسط الصفحة): - Live Activity Feed: - آخر 50 نشاط مع تحديث فوري - أيقونة ملونة لكل نوع نشاط - وقت النشاط بالعربي - تأثير fade in عند إضافة نشاط جديد - Quick Stats Dashboard: - 6 بطاقات إحصائيات: - إجمالي المهام اليوم - معدل النجاح - الوقت الموفر - الرسائل المعالجة - الأكواد المكتوبة - المحتوى المنشأ - رسم بياني دائري للأداء - رسم بياني خطي للنشاط عبر الوقت ### 4. لوحة التحكم السفلية: - Command Input: - حقل إدخال كبير للأوامر - اقتراحات تلقائية أثناء الكتابة - تاريخ الأوامر (سهم لأعلى/أسفل) - Quick Actions: - 8 أزرار سريعة قابلة للتخصيص - أيقونات واضحة - Tooltip عند التمرير ### 5. النافذة الجانبية اليمنى (قابلة للإخفاء): - Unified Inbox: - كل الرسائل من جميع المنصات - فلترة حسب المصدر - بحث سريع - عدادات غير المقروء - Connected Devices: - الأجهزة المتصلة مع أيقونات - حالة كل جهاز - زر إضافة جهاز جديد ## الميزات التفاعلية المطلوبة: 1. **Animations:** - Loading spinner عند انتظار الرد - Pulse effect على الـ Agents النشطين - Smooth transitions عند التنقل - Parallax scrolling في الخلفية - Particle.js effect في الخلفية 2. **Real-time Updates:** - Socket.io connection للتحديثات الفورية - Auto-reconnect عند انقطاع الاتصال - Notification sound للأحداث المهمة - Browser notifications 3. **Voice Commands:** - Web Speech API للأوامر الصوتية - Visual feedback أثناء الاستماع - دعم العربية والإنجليزية - عرض النص المفهوم 4. **Drag & Drop:** - سحب الملفات للمعالجة - إعادة ترتيب الـ Agents - نقل المهام بين الـ Agents 5. **Keyboard Shortcuts:** - Ctrl/Cmd + K: فتح البحث السريع - Ctrl/Cmd + /: فتح الأوامر الصوتية - Ctrl/Cmd + 1-9: التنقل بين الـ Agents - Esc: إغلاق النوافذ المنبثقة ## التصميم والألوان: ### Dark Mode: - Background: gradient من #0a0a0a إلى #1a1a2e - Cards: rgba(255,255,255,0.05) مع backdrop-filter: blur(10px) - Text: #ffffff للرئيسي، #a0a0a0 للثانوي - Accent Colors: - Blue: #3b82f6 (Primary) - Purple: #8b5cf6 (Secondary) - Green: #10b981 (Success) - Yellow: #f59e0b (Warning) - Red: #ef4444 (Error) ### Light Mode: - Background: gradient من #f8f9fa إلى #e9ecef - Cards: rgba(0,0,0,0.03) مع box-shadow - Text: #1a1a1a للرئيسي، #6c757d للثانوي - نفس Accent Colors لكن أكثر إشراقاً ## كود JavaScript المطلوب: 1. Socket.io connection مع error handling 2. دالة لإرسال الأوامر للـ Agents 3. دالة لاستقبال وعرض النتائج 4. دالة للأوامر الصوتية 5. دالة لتحديث الإحصائيات 6. دالة لإدارة الثيم واللغة 7. LocalStorage للحفظ التفضيلات ## الـ Agents التسعة: 1. CodeMaster (أيقونة: code) - لون أخضر 2. MessageBot (أيقونة: message-circle) - لون أزرق 3. TradeMaster (أيقونة: trending-up) - لون أصفر 4. ContentCreator (أيقونة: palette) - لون بنفسجي 5. PublishPro (أيقونة: send) - لون وردي 6. BlogMaster (أيقونة: file-text) - لون نيلي 7. YouTubeGuru (أيقونة: video) - لون أحمر 8. EmailMaster (أيقونة: mail) - لون برتقالي 9. DesignPro (أيقونة: pen-tool) - لون سماوي ## متطلبات إضافية: - كل الكود في ملف HTML واحد - تعليقات بالعربية والإنجليزية - معالجة جميع الأخطاء المحتملة - Loading states لجميع العمليات - Empty states عند عدم وجود بيانات - Success/Error messages واضحة - يعمل offline مع cached data - PWA ready مع manifest الرجاء إنشاء هذا الملف كاملاً مع كل التفاصيل المذكورة. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Fahadai
-emoji: 📈
-colorFrom: gray
-colorTo: yellow
+title: fahadai
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,1452 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FahadNeo AI - نظام الذكاء الاصطناعي متعدد الوكلاء</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
+    <style>
+        /* Custom CSS for Glassmorphism and Neumorphism effects */
+        .glass-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .light-glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .neumorphism {
+            border-radius: 10px;
+            background: linear-gradient(145deg, #1a1a2e, #151525);
+            box-shadow:  5px 5px 10px #0d0d17, -5px -5px 10px #272745;
+        }
+        
+        .light-neumorphism {
+            border-radius: 10px;
+            background: linear-gradient(145deg, #e9ecef, #f8f9fa);
+            box-shadow:  5px 5px 10px #d1d3d4, -5px -5px 10px #ffffff;
+        }
+        
+        .pulse-active {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+            }
+        }
+        
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        /* RTL and LTR specific styles */
+        [dir="rtl"] .sidebar {
+            border-right: none;
+            border-left: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        [dir="ltr"] .sidebar {
+            border-left: none;
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .light-mode [dir="rtl"] .sidebar {
+            border-left: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        
+        .light-mode [dir="ltr"] .sidebar {
+            border-right: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        
+        .light-mode ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.05);
+        }
+        
+        .light-mode ::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.2);
+        }
+        
+        .light-mode ::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+        
+        /* Voice command animation */
+        @keyframes listening {
+            0% { opacity: 0.5; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.1); }
+            100% { opacity: 0.5; transform: scale(1); }
+        }
+        
+        .listening-animation {
+            animation: listening 1.5s infinite;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-white min-h-screen flex flex-col transition-colors duration-300" id="body">
+    <!-- Particles.js Background -->
+    <div id="particles-js" class="fixed inset-0 z-0 opacity-20"></div>
+    
+    <!-- Header -->
+    <header class="glass-card sticky top-0 z-50 p-4 flex items-center justify-between border-b border-gray-800">
+        <div class="flex items-center space-x-4 rtl:space-x-reverse">
+            <div class="flex items-center">
+                <i data-lucide="brain" class="w-8 h-8 text-blue-400 animate-pulse"></i>
+                <h1 class="text-xl font-bold ml-2 rtl:mr-2 rtl:ml-0">FahadNeo AI</h1>
+            </div>
+            
+            <div class="flex items-center space-x-2 rtl:space-x-reverse" id="connection-status">
+                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                <span class="text-sm">غير متصل</span>
+            </div>
+        </div>
+        
+        <div class="flex items-center space-x-4 rtl:space-x-reverse">
+            <div class="relative">
+                <input type="text" placeholder="ابحث..." class="bg-gray-800 bg-opacity-50 rounded-full py-2 px-4 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <i data-lucide="search" class="absolute left-3 top-2.5 rtl:right-3 rtl:left-auto text-gray-400"></i>
+            </div>
+            
+            <button id="voice-command-btn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 relative">
+                <i data-lucide="mic" class="w-5 h-5"></i>
+                <div id="voice-indicator" class="hidden absolute -top-1 -right-1 w-3 h-3 rounded-full bg-red-500"></div>
+            </button>
+            
+            <button id="theme-toggle" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
+                <i data-lucide="sun" class="w-5 h-5 hidden"></i>
+                <i data-lucide="moon" class="w-5 h-5"></i>
+            </button>
+            
+            <button id="language-toggle" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
+                <span class="text-sm font-medium">EN</span>
+            </button>
+        </div>
+    </header>
+    
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Left Sidebar - Agents -->
+        <aside class="sidebar w-64 bg-gray-900 bg-opacity-50 flex-shrink-0 overflow-y-auto hidden md:block">
+            <div class="p-4">
+                <h2 class="text-lg font-semibold mb-4 flex items-center">
+                    <i data-lucide="users" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i>
+                    <span>الوكلاء</span>
+                </h2>
+                
+                <div id="agents-list" class="space-y-3">
+                    <!-- Agents will be added here dynamically -->
+                </div>
+            </div>
+        </aside>
+        
+        <!-- Main Content -->
+        <main class="flex-1 overflow-auto p-4">
+            <!-- Quick Stats Dashboard -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">إجمالي المهام اليوم</p>
+                            <h3 class="text-2xl font-bold" id="total-tasks">0</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-blue-500 bg-opacity-20">
+                            <i data-lucide="check-circle" class="w-6 h-6 text-blue-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+12% من الأمس</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">معدل النجاح</p>
+                            <h3 class="text-2xl font-bold" id="success-rate">0%</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-green-500 bg-opacity-20">
+                            <i data-lucide="award" class="w-6 h-6 text-green-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+5% من الأسبوع الماضي</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">الوقت الموفر</p>
+                            <h3 class="text-2xl font-bold" id="time-saved">0 ساعة</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-purple-500 bg-opacity-20">
+                            <i data-lucide="clock" class="w-6 h-6 text-purple-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+3 ساعات من الأمس</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">الرسائل المعالجة</p>
+                            <h3 class="text-2xl font-bold" id="messages-processed">0</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-pink-500 bg-opacity-20">
+                            <i data-lucide="message-square" class="w-6 h-6 text-pink-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+24% من الأسبوع الماضي</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">الأكواد المكتوبة</p>
+                            <h3 class="text-2xl font-bold" id="code-written">0 سطر</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-indigo-500 bg-opacity-20">
+                            <i data-lucide="code" class="w-6 h-6 text-indigo-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+15% من الأسبوع الماضي</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <div class="glass-card rounded-lg p-4">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-400 text-sm">المحتوى المنشأ</p>
+                            <h3 class="text-2xl font-bold" id="content-created">0 قطعة</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-yellow-500 bg-opacity-20">
+                            <i data-lucide="file-text" class="w-6 h-6 text-yellow-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <p class="text-sm text-green-400 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                            <span>+8% من الأسبوع الماضي</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Charts Row -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
+                <div class="glass-card rounded-lg p-4">
+                    <h3 class="font-semibold mb-4">توزيع الأداء</h3>
+                    <canvas id="performanceChart" height="250"></canvas>
+                </div>
+                <div class="glass-card rounded-lg p-4">
+                    <h3 class="font-semibold mb-4">النشاط عبر الوقت</h3>
+                    <canvas id="activityChart" height="250"></canvas>
+                </div>
+            </div>
+            
+            <!-- Activity Feed -->
+            <div class="glass-card rounded-lg p-4 mb-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="font-semibold text-lg flex items-center">
+                        <i data-lucide="activity" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i>
+                        <span>سجل النشاط الحي</span>
+                    </h3>
+                    <button class="text-sm text-blue-400 hover:text-blue-300 flex items-center">
+                        <i data-lucide="filter" class="w-4 h-4 mr-1 rtl:ml-1 rtl:mr-0"></i>
+                        <span>تصفية</span>
+                    </button>
+                </div>
+                
+                <div id="activity-feed" class="space-y-3 max-h-96 overflow-y-auto">
+                    <!-- Activity items will be added here dynamically -->
+                    <div class="text-center py-8 text-gray-500" id="empty-activity">
+                        <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2"></i>
+                        <p>لا يوجد نشاط حتى الآن</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <!-- Right Sidebar - Inbox & Devices -->
+        <aside class="sidebar w-72 bg-gray-900 bg-opacity-50 flex-shrink-0 overflow-y-auto hidden lg:block">
+            <div class="p-4">
+                <!-- Unified Inbox -->
+                <div class="mb-8">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-lg font-semibold flex items-center">
+                            <i data-lucide="inbox" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i>
+                            <span>صندوق الوارد الموحد</span>
+                        </h2>
+                        <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">12 جديد</span>
+                    </div>
+                    
+                    <div class="mb-3">
+                        <div class="relative">
+                            <input type="text" placeholder="ابحث في الرسائل..." class="bg-gray-800 bg-opacity-50 rounded-full py-2 px-4 pl-10 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <i data-lucide="search" class="absolute left-3 top-2.5 rtl:right-3 rtl:left-auto text-gray-400"></i>
+                        </div>
+                    </div>
+                    
+                    <div class="flex space-x-2 mb-4 rtl:space-x-reverse">
+                        <button class="text-xs bg-blue-500 text-white px-3 py-1 rounded-full">الكل</button>
+                        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full">البريد</button>
+                        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full">الدردشة</button>
+                        <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-full">التنبيهات</button>
+                    </div>
+                    
+                    <div id="inbox-messages" class="space-y-3 max-h-64 overflow-y-auto">
+                        <!-- Messages will be added here dynamically -->
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 hover:bg-gray-700 cursor-pointer border-l-4 border-blue-500">
+                            <div class="flex items-start justify-between">
+                                <div class="flex items-start space-x-3 rtl:space-x-reverse">
+                                    <div class="p-1 bg-blue-500 bg-opacity-20 rounded-full">
+                                        <i data-lucide="mail" class="w-4 h-4 text-blue-400"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-medium">رسالة جديدة من محمد</h4>
+                                        <p class="text-sm text-gray-400 truncate">مرحباً، هل يمكنك مساعدتي في مشروع...</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs text-gray-500">منذ 5 دقائق</span>
+                            </div>
+                        </div>
+                        
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 hover:bg-gray-700 cursor-pointer">
+                            <div class="flex items-start justify-between">
+                                <div class="flex items-start space-x-3 rtl:space-x-reverse">
+                                    <div class="p-1 bg-green-500 bg-opacity-20 rounded-full">
+                                        <i data-lucide="message-square" class="w-4 h-4 text-green-400"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-medium">رسالة واتساب</h4>
+                                        <p class="text-sm text-gray-400 truncate">أهلاً، متى سيكون الاجتماع...</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs text-gray-500">منذ 15 دقيقة</span>
+                            </div>
+                        </div>
+                        
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 hover:bg-gray-700 cursor-pointer">
+                            <div class="flex items-start justify-between">
+                                <div class="flex items-start space-x-3 rtl:space-x-reverse">
+                                    <div class="p-1 bg-yellow-500 bg-opacity-20 rounded-full">
+                                        <i data-lucide="alert-circle" class="w-4 h-4 text-yellow-400"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-medium">تنبيه النظام</h4>
+                                        <p class="text-sm text-gray-400 truncate">تم الانتهاء من معالجة المهمة #1234</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs text-gray-500">منذ ساعة</span>
+                            </div>
+                        </div>
+                        
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 hover:bg-gray-700 cursor-pointer">
+                            <div class="flex items-start justify-between">
+                                <div class="flex items-start space-x-3 rtl:space-x-reverse">
+                                    <div class="p-1 bg-purple-500 bg-opacity-20 rounded-full">
+                                        <i data-lucide="slack" class="w-4 h-4 text-purple-400"></i>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-medium">إشعار من Slack</h4>
+                                        <p class="text-sm text-gray-400 truncate">لديك 3 رسائل غير مقروءة في #general</p>
+                                    </div>
+                                </div>
+                                <span class="text-xs text-gray-500">منذ 3 ساعات</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Connected Devices -->
+                <div>
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-lg font-semibold flex items-center">
+                            <i data-lucide="smartphone" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i>
+                            <span>الأجهزة المتصلة</span>
+                        </h2>
+                        <button class="text-blue-400 hover:text-blue-300">
+                            <i data-lucide="plus" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    
+                    <div id="connected-devices" class="space-y-3">
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 flex items-center justify-between">
+                            <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                                <div class="p-2 bg-blue-500 bg-opacity-20 rounded-lg">
+                                    <i data-lucide="laptop" class="w-5 h-5 text-blue-400"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium">MacBook Pro</h4>
+                                    <p class="text-sm text-gray-400">متصل الآن</p>
+                                </div>
+                            </div>
+                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                        </div>
+                        
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 flex items-center justify-between">
+                            <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                                <div class="p-2 bg-purple-500 bg-opacity-20 rounded-lg">
+                                    <i data-lucide="smartphone" class="w-5 h-5 text-purple-400"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium">iPhone 13</h4>
+                                    <p class="text-sm text-gray-400">متصل الآن</p>
+                                </div>
+                            </div>
+                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                        </div>
+                        
+                        <div class="p-3 rounded-lg bg-gray-800 bg-opacity-50 flex items-center justify-between">
+                            <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                                <div class="p-2 bg-yellow-500 bg-opacity-20 rounded-lg">
+                                    <i data-lucide="tablet" class="w-5 h-5 text-yellow-400"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium">iPad Air</h4>
+                                    <p class="text-sm text-gray-400">غير متصل</p>
+                                </div>
+                            </div>
+                            <div class="w-2 h-2 rounded-full bg-red-500"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+    
+    <!-- Bottom Control Panel -->
+    <div class="glass-card border-t border-gray-800 p-4">
+        <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
+            <!-- Quick Actions -->
+            <div class="flex-shrink-0 flex items-center space-x-2 md:space-x-0 md:grid md:grid-cols-4 gap-2 rtl:space-x-reverse">
+                <button class="quick-action p-2 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" data-tooltip="إنشاء محتوى">
+                    <i data-lucide="file-text" class="w-5 h-5 mb-1 text-blue-400"></i>
+                    <span class="text-xs">محتوى</span>
+                </button>
+                <button class="quick-action p-2 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" data-tooltip="إرسال بريد">
+                    <i data-lucide="mail" class="w-5 h-5 mb-1 text-green-400"></i>
+                    <span class="text-xs">بريد</span>
+                </button>
+                <button class="quick-action p-2 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" data-tooltip="جدولة مهمة">
+                    <i data-lucide="calendar" class="w-5 h-5 mb-1 text-yellow-400"></i>
+                    <span class="text-xs">جدولة</span>
+                </button>
+                <button class="quick-action p-2 rounded-lg bg-gray-800 hover:bg-gray-700 flex flex-col items-center justify-center" data-tooltip="تحليل بيانات">
+                    <i data-lucide="bar-chart-2" class="w-5 h-5 mb-1 text-purple-400"></i>
+                    <span class="text-xs">تحليل</span>
+                </button>
+            </div>
+            
+            <!-- Command Input -->
+            <div class="flex-1 relative">
+                <input type="text" id="command-input" placeholder="اكتب أمراً هنا أو اضغط / للأوامر الصوتية..." class="bg-gray-800 bg-opacity-50 rounded-full py-3 px-5 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button class="absolute left-3 top-3 rtl:right-3 rtl:left-auto text-gray-400 hover:text-white">
+                    <i data-lucide="chevron-right" class="w-5 h-5 rtl:rotate-180"></i>
+                </button>
+                <div class="absolute right-3 top-3 rtl:left-3 rtl:right-auto flex space-x-2 rtl:space-x-reverse">
+                    <button id="command-history-btn" class="text-gray-400 hover:text-white">
+                        <i data-lucide="history" class="w-5 h-5"></i>
+                    </button>
+                    <button id="voice-command-btn-bottom" class="text-gray-400 hover:text-white">
+                        <i data-lucide="mic" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Voice Command Modal -->
+    <div id="voice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="glass-card rounded-xl p-8 max-w-md w-full text-center">
+            <div class="mb-6">
+                <div id="voice-animation" class="w-20 h-20 mx-auto mb-4 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center">
+                    <i data-lucide="mic" class="w-10 h-10 text-blue-400"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">الأوامر الصوتية</h3>
+                <p id="voice-status" class="text-gray-400">اضغط على الميكروفون لبدء الاستماع...</p>
+                <div id="voice-transcript" class="mt-4 p-3 bg-gray-800 rounded-lg min-h-16 hidden"></div>
+            </div>
+            <div class="flex justify-center space-x-4 rtl:space-x-reverse">
+                <button id="cancel-voice-btn" class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">إلغاء</button>
+                <button id="start-voice-btn" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg flex items-center">
+                    <i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i>
+                    <span>بدء الاستماع</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Command History Modal -->
+    <div id="history-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="glass-card rounded-xl p-6 max-w-md w-full">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold">سجل الأوامر</h3>
+                <button id="close-history-btn" class="text-gray-400 hover:text-white">
+                    <i data-lucide="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <div id="command-history-list" class="space-y-2 max-h-96 overflow-y-auto">
+                <!-- Command history will be added here dynamically -->
+                <div class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 cursor-pointer">
+                    <p class="text-sm">إنشاء محتوى عن الذكاء الاصطناعي</p>
+                    <p class="text-xs text-gray-400 mt-1">منذ 5 دقائق</p>
+                </div>
+                <div class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 cursor-pointer">
+                    <p class="text-sm">تحليل بيانات المبيعات لشهر يناير</p>
+                    <p class="text-xs text-gray-400 mt-1">منذ ساعة</p>
+                </div>
+                <div class="p-3 rounded-lg bg-gray-800 hover:bg-gray-700 cursor-pointer">
+                    <p class="text-sm">إرسال بريد إلى فريق التسويق</p>
+                    <p class="text-xs text-gray-400 mt-1">منذ 3 ساعات</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Loading Overlay -->
+    <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="text-center">
+            <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
+            <p id="loading-text" class="text-xl">جاري المعالجة...</p>
+        </div>
+    </div>
+    
+    <!-- Notification Toast -->
+    <div id="toast-notification" class="fixed bottom-4 right-4 rtl:right-auto rtl:left-4 glass-card rounded-lg p-4 shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50 hidden">
+        <div class="flex items-start">
+            <div id="toast-icon" class="mr-3 rtl:ml-3 rtl:mr-0">
+                <i data-lucide="info" class="w-6 h-6 text-blue-400"></i>
+            </div>
+            <div class="flex-1">
+                <h4 id="toast-title" class="font-semibold">إشعار</h4>
+                <p id="toast-message" class="text-sm">هذه رسالة إشعار نموذجية</p>
+            </div>
+            <button id="close-toast" class="ml-4 rtl:mr-4 rtl:ml-0 text-gray-400 hover:text-white">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+        
+        // System configuration
+        const config = {
+            backendUrl: 'http://localhost:5000',
+            isDarkMode: true,
+            isRTL: true,
+            language: 'ar',
+            agents: [
+                { id: 1, name: 'CodeMaster', icon: 'code', color: 'green', status: 'active', tasksCompleted: 42 },
+                { id: 2, name: 'MessageBot', icon: 'message-circle', color: 'blue', status: 'busy', tasksCompleted: 38 },
+                { id: 3, name: 'TradeMaster', icon: 'trending-up', color: 'yellow', status: 'inactive', tasksCompleted: 15 },
+                { id: 4, name: 'ContentCreator', icon: 'palette', color: 'purple', status: 'active', tasksCompleted: 27 },
+                { id: 5, name: 'PublishPro', icon: 'send', color: 'pink', status: 'active', tasksCompleted: 19 },
+                { id: 6, name: 'BlogMaster', icon: 'file-text', color: 'indigo', status: 'inactive', tasksCompleted: 8 },
+                { id: 7, name: 'YouTubeGuru', icon: 'video', color: 'red', status: 'busy', tasksCompleted: 23 },
+                { id: 8, name: 'EmailMaster', icon: 'mail', color: 'orange', status: 'active', tasksCompleted: 31 },
+                { id: 9, name: 'DesignPro', icon: 'pen-tool', color: 'cyan', status: 'inactive', tasksCompleted: 12 }
+            ],
+            activityTypes: [
+                { type: 'task-completed', icon: 'check-circle', color: 'green' },
+                { type: 'error', icon: 'alert-circle', color: 'red' },
+                { type: 'warning', icon: 'alert-triangle', color: 'yellow' },
+                { type: 'info', icon: 'info', color: 'blue' },
+                { type: 'message', icon: 'message-square', color: 'purple' },
+                { type: 'code', icon: 'code', color: 'green' },
+                { type: 'content', icon: 'file-text', color: 'indigo' },
+                { type: 'system', icon: 'server', color: 'gray' }
+            ],
+            quickStats: {
+                totalTasks: 0,
+                successRate: 0,
+                timeSaved: 0,
+                messagesProcessed: 0,
+                codeWritten: 0,
+                contentCreated: 0
+            }
+        };
+        
+        // DOM Elements
+        const elements = {
+            body: document.getElementById('body'),
+            themeToggle: document.getElementById('theme-toggle'),
+            languageToggle: document.getElementById('language-toggle'),
+            voiceCommandBtn: document.getElementById('voice-command-btn'),
+            voiceCommandBtnBottom: document.getElementById('voice-command-btn-bottom'),
+            voiceIndicator: document.getElementById('voice-indicator'),
+            connectionStatus: document.getElementById('connection-status'),
+            agentsList: document.getElementById('agents-list'),
+            activityFeed: document.getElementById('activity-feed'),
+            emptyActivity: document.getElementById('empty-activity'),
+            commandInput: document.getElementById('command-input'),
+            voiceModal: document.getElementById('voice-modal'),
+            voiceAnimation: document.getElementById('voice-animation'),
+            voiceStatus: document.getElementById('voice-status'),
+            voiceTranscript: document.getElementById('voice-transcript'),
+            startVoiceBtn: document.getElementById('start-voice-btn'),
+            cancelVoiceBtn: document.getElementById('cancel-voice-btn'),
+            historyModal: document.getElementById('history-modal'),
+            commandHistoryBtn: document.getElementById('command-history-btn'),
+            closeHistoryBtn: document.getElementById('close-history-btn'),
+            commandHistoryList: document.getElementById('command-history-list'),
+            loadingOverlay: document.getElementById('loading-overlay'),
+            loadingText: document.getElementById('loading-text'),
+            toastNotification: document.getElementById('toast-notification'),
+            toastTitle: document.getElementById('toast-title'),
+            toastMessage: document.getElementById('toast-message'),
+            toastIcon: document.getElementById('toast-icon'),
+            closeToast: document.getElementById('close-toast'),
+            totalTasks: document.getElementById('total-tasks'),
+            successRate: document.getElementById('success-rate'),
+            timeSaved: document.getElementById('time-saved'),
+            messagesProcessed: document.getElementById('messages-processed'),
+            codeWritten: document.getElementById('code-written'),
+            contentCreated: document.getElementById('content-created')
+        };
+        
+        // Initialize charts
+        let performanceChart, activityChart;
+        
+        // Initialize socket.io connection
+        let socket;
+        
+        // Initialize Speech Recognition
+        let recognition;
+        
+        // Command history
+        let commandHistory = [];
+        let historyIndex = -1;
+        
+        // Initialize the application
+        function init() {
+            // Load saved preferences
+            loadPreferences();
+            
+            // Initialize UI components
+            initUI();
+            
+            // Initialize charts
+            initCharts();
+            
+            // Initialize socket connection
+            initSocket();
+            
+            // Initialize voice recognition
+            initVoiceRecognition();
+            
+            // Set up event listeners
+            setupEventListeners();
+            
+            // Load initial data
+            loadInitialData();
+            
+            // Initialize particles.js
+            particlesJS('particles-js', {
+                particles: {
+                    number: { value: 30, density: { enable: true, value_area: 800 } },
+                    color: { value: config.isDarkMode ? "#3b82f6" : "#2563eb" },
+                    shape: { type: "circle" },
+                    opacity: { value: 0.5, random: true },
+                    size: { value: 3, random: true },
+                    line_linked: { enable: true, distance: 150, color: config.isDarkMode ? "#3b82f6" : "#2563eb", opacity: 0.4, width: 1 },
+                    move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
+                },
+                interactivity: {
+                    detect_on: "canvas",
+                    events: {
+                        onhover: { enable: true, mode: "grab" },
+                        onclick: { enable: true, mode: "push" }
+                    },
+                    modes: {
+                        grab: { distance: 140, line_linked: { opacity: 1 } },
+                        push: { particles_nb: 4 }
+                    }
+                }
+            });
+        }
+        
+        // Load user preferences from localStorage
+        function loadPreferences() {
+            const darkMode = localStorage.getItem('darkMode');
+            const language = localStorage.getItem('language');
+            
+            if (darkMode !== null) {
+                config.isDarkMode = darkMode === 'true';
+            }
+            
+            if (language !== null) {
+                config.language = language;
+                config.isRTL = language === 'ar';
+            }
+            
+            // Apply preferences
+            applyTheme();
+            applyLanguage();
+        }
+        
+        // Initialize UI components
+        function initUI() {
+            // Render agents
+            renderAgents();
+            
+            // Update quick stats
+            updateQuickStats();
+            
+            // Add tooltips to quick actions
+            document.querySelectorAll('.quick-action').forEach(button => {
+                const tooltip = document.createElement('div');
+                tooltip.className = 'hidden absolute z-10 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap -top-8';
+                tooltip.textContent = button.dataset.tooltip;
+                button.appendChild(tooltip);
+                
+                button.addEventListener('mouseenter', () => {
+                    tooltip.classList.remove('hidden');
+                });
+                
+                button.addEventListener('mouseleave', () => {
+                    tooltip.classList.add('hidden');
+                });
+            });
+        }
+        
+        // Initialize charts
+        function initCharts() {
+            // Performance Chart (Doughnut)
+            const performanceCtx = document.getElementById('performanceChart').getContext('2d');
+            performanceChart = new Chart(performanceCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['CodeMaster', 'MessageBot', 'TradeMaster', 'ContentCreator', 'PublishPro', 'BlogMaster', 'YouTubeGuru', 'EmailMaster', 'DesignPro'],
+                    datasets: [{
+                        data: [42, 38, 15, 27, 19, 8, 23, 31, 12],
+                        backgroundColor: [
+                            '#10b981', '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#6366f1', '#ef4444', '#f97316', '#06b6d4'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    cutout: '70%',
+                    plugins: {
+                        legend: {
+                            position: 'right',
+                            rtl: config.isRTL,
+                            labels: {
+                                usePointStyle: true,
+                                pointStyle: 'circle',
+                                padding: 20,
+                                font: {
+                                    family: 'Tajawal, sans-serif'
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            
+            // Activity Chart (Line)
+            const activityCtx = document.getElementById('activityChart').getContext('2d');
+            activityChart = new Chart(activityCtx, {
+                type: 'line',
+                data: {
+                    labels: ['1am', '4am', '7am', '10am', '1pm', '4pm', '7pm', '10pm'],
+                    datasets: [{
+                        label: 'النشاط',
+                        data: [5, 8, 12, 18, 22, 15, 10, 7],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        fill: true,
+                        tension: 0.4,
+                        pointBackgroundColor: '#3b82f6',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: config.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            },
+                            ticks: {
+                                color: config.isDarkMode ? '#a0a0a0' : '#6c757d'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                color: config.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            },
+                            ticks: {
+                                color: config.isDarkMode ? '#a0a0a0' : '#6c757d'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // Initialize socket.io connection
+        function initSocket() {
+            try {
+                socket = io(config.backendUrl, {
+                    reconnectionAttempts: 5,
+                    reconnectionDelay: 1000,
+                    transports: ['websocket']
+                });
+                
+                socket.on('connect', () => {
+                    updateConnectionStatus(true);
+                    showToast('تم الاتصال', 'تم الاتصال بنجاح بالخادم الخلفي', 'check-circle', 'green');
+                });
+                
+                socket.on('disconnect', () => {
+                    updateConnectionStatus(false);
+                    showToast('ا��قطع الاتصال', 'تم فقدان الاتصال بالخادم الخلفي', 'alert-circle', 'red');
+                });
+                
+                socket.on('connect_error', (err) => {
+                    console.error('Connection error:', err);
+                    showToast('خطأ في الاتصال', 'فشل الاتصال بالخادم الخلفي', 'alert-triangle', 'yellow');
+                });
+                
+                socket.on('activity', (activity) => {
+                    addActivity(activity);
+                });
+                
+                socket.on('stats', (stats) => {
+                    updateStats(stats);
+                });
+                
+                socket.on('agent-update', (agent) => {
+                    updateAgentStatus(agent);
+                });
+                
+                socket.on('command-result', (result) => {
+                    hideLoading();
+                    showToast('تم تنفيذ الأمر', result.message, 'check-circle', 'green');
+                });
+                
+                socket.on('error', (error) => {
+                    hideLoading();
+                    showToast('خطأ', error.message, 'alert-circle', 'red');
+                });
+            } catch (err) {
+                console.error('Socket initialization error:', err);
+                showToast('خطأ', 'فشل في تهيئة اتصال Socket', 'alert-triangle', 'yellow');
+            }
+        }
+        
+        // Initialize voice recognition
+        function initVoiceRecognition() {
+            try {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                
+                if (!SpeechRecognition) {
+                    console.warn('Speech recognition not supported');
+                    elements.voiceCommandBtn.disabled = true;
+                    elements.voiceCommandBtnBottom.disabled = true;
+                    return;
+                }
+                
+                recognition = new SpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = true;
+                recognition.lang = config.language === 'ar' ? 'ar-SA' : 'en-US';
+                
+                recognition.onstart = () => {
+                    elements.voiceStatus.textContent = config.isRTL ? 'جاري الاستماع...' : 'Listening...';
+                    elements.voiceAnimation.classList.add('listening-animation');
+                    elements.voiceTranscript.classList.remove('hidden');
+                    elements.startVoiceBtn.disabled = true;
+                    elements.startVoiceBtn.innerHTML = `<i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i><span>${config.isRTL ? 'جاري الاستماع...' : 'Listening...'}</span>`;
+                    lucide.createIcons();
+                };
+                
+                recognition.onresult = (event) => {
+                    const transcript = Array.from(event.results)
+                        .map(result => result[0])
+                        .map(result => result.transcript)
+                        .join('');
+                    
+                    elements.voiceTranscript.textContent = transcript;
+                    
+                    if (event.results[0].isFinal) {
+                        elements.commandInput.value = transcript;
+                    }
+                };
+                
+                recognition.onend = () => {
+                    elements.voiceStatus.textContent = config.isRTL ? 'اضغط على الميكروفون لبدء الاستماع...' : 'Press the microphone to start listening...';
+                    elements.voiceAnimation.classList.remove('listening-animation');
+                    elements.startVoiceBtn.disabled = false;
+                    elements.startVoiceBtn.innerHTML = `<i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i><span>${config.isRTL ? 'بدء الاستماع' : 'Start Listening'}</span>`;
+                    lucide.createIcons();
+                };
+                
+                recognition.onerror = (event) => {
+                    console.error('Speech recognition error', event.error);
+                    elements.voiceStatus.textContent = config.isRTL ? `خطأ: ${getVoiceError(event.error)}` : `Error: ${getVoiceError(event.error)}`;
+                    elements.voiceAnimation.classList.remove('listening-animation');
+                    elements.startVoiceBtn.disabled = false;
+                    elements.startVoiceBtn.innerHTML = `<i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i><span>${config.isRTL ? 'بدء الاستماع' : 'Start Listening'}</span>`;
+                    lucide.createIcons();
+                    
+                    showToast('خطأ في التعرف الصوتي', getVoiceError(event.error), 'alert-circle', 'red');
+                };
+            } catch (err) {
+                console.error('Voice recognition initialization error:', err);
+                showToast('خطأ', 'فشل في تهيئة التعرف الصوتي', 'alert-triangle', 'yellow');
+            }
+        }
+        
+        // Get voice recognition error message
+        function getVoiceError(error) {
+            const errors = {
+                'no-speech': config.isRTL ? 'لم يتم اكتشاف أي كلام' : 'No speech was detected',
+                'audio-capture': config.isRTL ? 'لا يوجد ميكروفون متاح' : 'No microphone was found',
+                'not-allowed': config.isRTL ? 'تم رفض إذن الميكروفون' : 'Permission to use microphone was denied',
+                'aborted': config.isRTL ? 'تم إيقاف التعرف الصوتي' : 'Speech recognition was aborted',
+                'network': config.isRTL ? 'خطأ في الشبكة' : 'Network error occurred',
+                'language-not-supported': config.isRTL ? 'اللغة غير مدعومة' : 'Language not supported'
+            };
+            
+            return errors[error] || (config.isRTL ? 'حدث خطأ غير معروف' : 'An unknown error occurred');
+        }
+        
+        // Set up event listeners
+        function setupEventListeners() {
+            // Theme toggle
+            elements.themeToggle.addEventListener('click', toggleTheme);
+            
+            // Language toggle
+            elements.languageToggle.addEventListener('click', toggleLanguage);
+            
+            // Voice command buttons
+            elements.voiceCommandBtn.addEventListener('click', showVoiceModal);
+            elements.voiceCommandBtnBottom.addEventListener('click', showVoiceModal);
+            
+            // Voice modal buttons
+            elements.startVoiceBtn.addEventListener('click', startVoiceRecognition);
+            elements.cancelVoiceBtn.addEventListener('click', hideVoiceModal);
+            
+            // Command history
+            elements.commandHistoryBtn.addEventListener('click', showHistoryModal);
+            elements.closeHistoryBtn.addEventListener('click', hideHistoryModal);
+            
+            // Command input
+            elements.commandInput.addEventListener('keydown', (e) => {
+                // Up arrow - navigate command history
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    navigateHistory('up');
+                }
+                
+                // Down arrow - navigate command history
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    navigateHistory('down');
+                }
+                
+                // Enter - send command
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    sendCommand();
+                }
+                
+                // Ctrl/Cmd + K - focus search
+                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                    e.preventDefault();
+                    document.querySelector('header input[type="text"]').focus();
+                }
+                
+                // Ctrl/Cmd + / - voice command
+                if ((e.ctrlKey || e.metaKey) && e.key === '/') {
+                    e.preventDefault();
+                    showVoiceModal();
+                }
+            });
+            
+            // Close toast
+            elements.closeToast.addEventListener('click', hideToast);
+            
+            // Keyboard shortcuts for agents (1-9)
+            document.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key >= '1' && e.key <= '9') {
+                    e.preventDefault();
+                    const agentIndex = parseInt(e.key) - 1;
+                    if (agentIndex < config.agents.length) {
+                        const agent = config.agents[agentIndex];
+                        showToast('وكيل مختار', agent.name, agent.icon, agent.color);
+                    }
+                }
+                
+                // Esc - close modals
+                if (e.key === 'Escape') {
+                    hideVoiceModal();
+                    hideHistoryModal();
+                }
+            });
+        }
+        
+        // Load initial data
+        function loadInitialData() {
+            // Simulate loading initial activities
+            setTimeout(() => {
+                const initialActivities = [
+                    { type: 'system', message: 'تم تشغيل النظام بنجاح', timestamp: new Date(), agent: 'System' },
+                    { type: 'info', message: 'جاري تحميل الوكلاء...', timestamp: new Date(), agent: 'System' },
+                    { type: 'task-completed', message: 'تم تحميل 9 وكلاء بنجاح', timestamp: new Date(), agent: 'System' }
+                ];
+                
+                initialActivities.forEach(activity => addActivity(activity));
+                
+                // Update quick stats
+                updateStats({
+                    totalTasks: 215,
+                    successRate: 92,
+                    timeSaved: 47,
+                    messagesProcessed: 128,
+                    codeWritten: 5420,
+                    contentCreated: 38
+                });
+            }, 1000);
+        }
+        
+        // Render agents list
+        function renderAgents() {
+            elements.agentsList.innerHTML = '';
+            
+            config.agents.forEach(agent => {
+                const agentElement = document.createElement('div');
+                agentElement.className = `agent-item p-3 rounded-lg bg-gray-800 bg-opacity-50 hover:bg-gray-700 cursor-move ${agent.status === 'active' ? 'pulse-active' : ''}`;
+                agentElement.dataset.id = agent.id;
+                agentElement.draggable = true;
+                
+                agentElement.innerHTML = `
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                            <div class="p-2 rounded-full bg-${agent.color}-500 bg-opacity-20">
+                                <i data-lucide="${agent.icon}" class="w-5 h-5 text-${agent.color}-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium">${agent.name}</h4>
+                                <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                    <div class="w-2 h-2 rounded-full ${getStatusColor(agent.status)}"></div>
+                                    <span class="text-xs text-gray-400">${getStatusText(agent.status)}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                            <span class="text-xs bg-gray-700 px-2 py-1 rounded-full">${agent.tasksCompleted} مهام</span>
+                            <button class="agent-toggle p-1 rounded-full ${agent.status === 'active' ? 'bg-green-500 bg-opacity-20 text-green-400' : 'bg-gray-700 text-gray-400'}">
+                                <i data-lucide="${agent.status === 'active' ? 'power' : 'power-off'}" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                
+                elements.agentsList.appendChild(agentElement);
+                
+                // Add event listener for toggle button
+                const toggleBtn = agentElement.querySelector('.agent-toggle');
+                toggleBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    toggleAgentStatus(agent.id);
+                });
+                
+                // Add drag events
+                agentElement.addEventListener('dragstart', handleDragStart);
+                agentElement.addEventListener('dragover', handleDragOver);
+                agentElement.addEventListener('drop', handleDrop);
+                agentElement.addEventListener('dragend', handleDragEnd);
+            });
+            
+            lucide.createIcons();
+        }
+        
+        // Get status color
+        function getStatusColor(status) {
+            switch (status) {
+                case 'active': return 'bg-green-500';
+                case 'busy': return 'bg-yellow-500';
+                case 'inactive': return 'bg-red-500';
+                default: return 'bg-gray-500';
+            }
+        }
+        
+        // Get status text
+        function getStatusText(status) {
+            if (config.isRTL) {
+                switch (status) {
+                    case 'active': return 'نشط';
+                    case 'busy': return 'مشغول';
+                    case 'inactive': return 'متوقف';
+                    default: return 'غير معروف';
+                }
+            } else {
+                switch (status) {
+                    case 'active': return 'Active';
+                    case 'busy': return 'Busy';
+                    case 'inactive': return 'Inactive';
+                    default: return 'Unknown';
+                }
+            }
+        }
+        
+        // Toggle agent status
+        function toggleAgentStatus(agentId) {
+            const agent = config.agents.find(a => a.id === agentId);
+            if (!agent) return;
+            
+            const newStatus = agent.status === 'active' ? 'inactive' : 'active';
+            
+            // Simulate API call
+            showLoading(config.isRTL ? 'جاري تحديث حالة الوكيل...' : 'Updating agent status...');
+            
+            setTimeout(() => {
+                agent.status = newStatus;
+                renderAgents();
+                hideLoading();
+                
+                if (socket && socket.connected) {
+                    socket.emit('agent-status', { agentId, status: newStatus });
+                }
+                
+                showToast(
+                    config.isRTL ? 'تم تحديث الحالة' : 'Status updated',
+                    config.isRTL ? `${agent.name} الآن ${getStatusText(newStatus)}` : `${agent.name} is now ${getStatusText(newStatus)}`,
+                    newStatus === 'active' ? 'power' : 'power-off',
+                    newStatus === 'active' ? 'green' : 'red'
+                );
+            }, 500);
+        }
+        
+        // Update agent status
+        function updateAgentStatus(updatedAgent) {
+            const agentIndex = config.agents.findIndex(a => a.id === updatedAgent.id);
+            if (agentIndex !== -1) {
+                config.agents[agentIndex] = { ...config.agents[agentIndex], ...updatedAgent };
+                renderAgents();
+            }
+        }
+        
+        // Add activity to feed
+        function addActivity(activity) {
+            if (elements.emptyActivity) {
+                elements.emptyActivity.remove();
+                elements.emptyActivity = null;
+            }
+            
+            const activityType = config.activityTypes.find(t => t.type === activity.type) || config.activityTypes[0];
+            
+            const activityElement = document.createElement('div');
+            activityElement.className = 'fade-in p-3 rounded-lg bg-gray-800 bg-opacity-50 flex items-start space-x-3 rtl:space-x-reverse';
+            
+            activityElement.innerHTML = `
+                <div class="p-2 rounded-full bg-${activityType.color}-500 bg-opacity-20 flex-shrink-0">
+                    <i data-lucide="${activityType.icon}" class="w-5 h-5 text-${activityType.color}-400"></i>
+                </div>
+                <div class="flex-1">
+                    <p class="text-sm">${activity.message}</p>
+                    <div class="flex items-center justify-between mt-1">
+                        <span class="text-xs text-gray-400">${formatTime(activity.timestamp)}</span>
+                        <span class="text-xs bg-gray-700 px-2 py-1 rounded-full">${activity.agent || 'System'}</span>
+                    </div>
+                </div>
+            `;
+            
+            // Add to top of activity feed
+            if (elements.activityFeed.firstChild) {
+                elements.activityFeed.insertBefore(activityElement, elements.activityFeed.firstChild);
+            } else {
+                elements.activityFeed.appendChild(activityElement);
+            }
+            
+            // Limit to 50 activities
+            if (elements.activityFeed.children.length > 50) {
+                elements.activityFeed.removeChild(elements.activityFeed.lastChild);
+            }
+            
+            lucide.createIcons();
+        }
+        
+        // Format time
+        function formatTime(timestamp) {
+            const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+            const now = new Date();
+            const diff = now - date;
+            
+            if (config.isRTL) {
+                if (diff < 60000) { // Less than 1 minute
+                    return 'الآن';
+                } else if (diff < 3600000) { // Less than 1 hour
+                    const minutes = Math.floor(diff / 60000);
+                    return `منذ ${minutes} دقيقة${minutes > 1 ? 'ات' : ''}`;
+                } else if (diff < 86400000) { // Less than 1 day
+                    const hours = Math.floor(diff / 3600000);
+                    return `منذ ${hours} ساعة${hours > 1 ? 'ات' : ''}`;
+                } else {
+                    const days = Math.floor(diff / 86400000);
+                    return `منذ ${days} يوم${days > 1 ? 'ين' : ''}`;
+                }
+            } else {
+                if (diff < 60000) { // Less than 1 minute
+                    return 'Just now';
+                } else if (diff < 3600000) { // Less than 1 hour
+                    const minutes = Math.floor(diff / 60000);
+                    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+                } else if (diff < 86400000) { // Less than 1 day
+                    const hours = Math.floor(diff / 3600000);
+                    return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+                } else {
+                    const days = Math.floor(diff / 86400000);
+                    return `${days} day${days > 1 ? 's' : ''} ago`;
+                }
+            }
+        }
+        
+        // Update quick stats
+        function updateStats(stats) {
+            config.quickStats = { ...config.quickStats, ...stats };
+            
+            elements.totalTasks.textContent = config.quickStats.totalTasks;
+            elements.successRate.textContent = `${config.quickStats.successRate}%`;
+            elements.timeSaved.textContent = config.isRTL ? 
+                `${config.quickStats.timeSaved} ساعة` : 
+                `${config.quickStats.timeSaved} hour${config.quickStats.timeSaved > 1 ? 's' : ''}`;
+            elements.messagesProcessed.textContent = config.quickStats.messagesProcessed;
+            elements.codeWritten.textContent = config.isRTL ? 
+                `${config.quickStats.codeWritten} سطر` : 
+                `${config.quickStats.codeWritten} line${config.quickStats.codeWritten > 1 ? 's' : ''}`;
+            elements.contentCreated.textContent = config.isRTL ? 
+                `${config.quickStats.contentCreated} قطعة` : 
+                `${config.quickStats.contentCreated} piece${config.quickStats.contentCreated > 1 ? 's' : ''}`;
+            
+            // Update charts
+            updateCharts();
+        }
+        
+        // Update charts with new data
+        function updateCharts() {
+            // Update performance chart
+            performanceChart.data.datasets[0].data = config.agents.map(agent => agent.tasksCompleted);
+            performanceChart.update();
+            
+            // Update activity chart with random data for demo
+            activityChart.data.datasets[0].data = Array(8).fill().map(() => Math.floor(Math.random() * 30));
+            activityChart.update();
+        }
+        
+        // Toggle theme
+        function toggleTheme() {
+            config.isDarkMode = !config.isDarkMode;
+            localStorage.setItem('darkMode', config.isDarkMode);
+            applyTheme();
+        }
+        
+        // Apply theme
+        function applyTheme() {
+            if (config.isDarkMode) {
+                elements.body.classList.remove('light-mode');
+                elements.body.classList.add('bg-gradient-to-br', 'from-gray-900', 'to-gray-800', 'text-white');
+                elements.themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
+            } else {
+                elements.body.classList.add('light-mode');
+                elements.body.classList.remove('bg-gradient-to-br', 'from-gray-900', 'to-gray-800', 'text-white');
+                elements.body.classList.add('bg-gradient-to-br', 'from-gray-50', 'to-gray-100', 'text-gray-900');
+                elements.themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
+            }
+            
+            // Update charts theme
+            if (activityChart) {
+                activityChart.options.scales.x.grid.color = config.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+                activityChart.options.scales.x.ticks.color = config.isDarkMode ? '#a0a0a0' : '#6c757d';
+                activityChart.options.scales.y.grid.color = config.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+                activityChart.options.scales.y.ticks.color = config.isDarkMode ? '#a0a0a0' : '#6c757d';
+                activityChart.update();
+            }
+            
+            lucide.createIcons();
+        }
+        
+        // Toggle language
+        function toggleLanguage() {
+            config.language = config.language === 'ar' ? 'en' : 'ar';
+            config.isRTL = config.language === 'ar';
+            localStorage.setItem('language', config.language);
+            applyLanguage();
+        }
+        
+        // Apply language
+        function applyLanguage() {
+            // Change HTML direction
+            document.documentElement.dir = config.isRTL ? 'rtl' : 'ltr';
+            document.documentElement.lang = config.language;
+            
+            // Update language toggle button
+            elements.languageToggle.textContent = config.isRTL ? 'EN' : 'AR';
+            
+            // Update UI texts (simplified for demo)
+            if (config.isRTL) {
+                document.querySelector('title').textContent = 'FahadNeo AI - نظام الذكاء الاصطناعي متعدد الوكلاء';
+                elements.connectionStatus.querySelector('span').textContent = 'غير متصل';
+                elements.commandInput.placeholder = 'اكتب أمراً هنا أو اضغط / للأوامر الصوتية...';
+                document.querySelector('header input[type="text"]').placeholder = 'ابحث...';
+                elements.loadingText.textContent = 'جاري المعالجة...';
+                elements.voiceStatus.textContent = 'اضغط على الميكروفون لبدء الاستماع...';
+                elements.startVoiceBtn.innerHTML = '<i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i><span>بدء الاستماع</span>';
+            } else {
+                document.querySelector('title').textContent = 'FahadNeo AI - Multi-Agent AI System';
+                elements.connectionStatus.querySelector('span').textContent = 'Disconnected';
+                elements.commandInput.placeholder = 'Type a command here or press / for voice commands...';
+                document.querySelector('header input[type="text"]').placeholder = 'Search...';
+                elements.loadingText.textContent = 'Processing...';
+                elements.voiceStatus.textContent = 'Press the microphone to start listening...';
+                elements.startVoiceBtn.innerHTML = '<i data-lucide="mic" class="w-5 h-5 mr-2 rtl:ml-2 rtl:mr-0"></i><span>Start Listening</span>';
+            }
+            
+            // Re-render agents to update status texts
+            renderAgents();
+            
+            // Re-render activities to update timestamps
+            if (elements.activityFeed.children.length > 0) {
+                const activities = Array.from(elements.activityFeed.children).map(el => {
+                    return {
+                        message: el.querySelector('p').textContent,
+                        timestamp: new Date(), // Simplified for demo
+                        agent: el.querySelector('.bg-gray-700').textContent,
+                        type: el.querySelector('i').getAttribute('data-lucide') === 'check-circle' ? 'task-completed' : 'info'
+                    };
+                });
+                
+                elements.activityFeed.innerHTML = '';
+                activities.forEach(activity => addActivity(activity));
+            }
+            
+            lucide.createIcons();
+        }
+        
+        // Update connection status
+        function updateConnectionStatus(connected) {
+            const statusElement = elements.connectionStatus;
+            const dot = statusElement.querySelector('div');
+            const text = statusElement.querySelector('span');
+            
+            if (connected) {
+                dot.classList.remove('bg-red-500');
+                dot.classList.add('bg-green-500');
+                text.textContent = config.isRTL ? 'متصل' : 'Connected';
+            } else {
+                dot.classList.remove('bg-green-500');
+                dot.classList.add('bg-red-500');
+                text.textContent = config.isRTL ? 'غير متصل' : 'Disconnected';
+            }
+        }
+        
+        // Show voice modal
+        function showVoiceModal() {
+            elements.voiceModal.classList.remove('hidden');
+            elements.voiceTranscript.classList.add('hidden');
+            elements.voiceTranscript.textContent = '';
+            elements.voiceStatus.textContent = config.isRTL ? 'اضغط على الميكروفون لبدء الاستماع...' : 'Press the microphone to start listening...';
+        }
+        
+        // Hide voice modal
+        function hideVoiceModal() {
+            elements.voiceModal.classList.add('hidden');
+            if (recognition) {
+                recognition.stop();
+            }
+        }
+        
+        // Start voice recognition
+        function startVoiceRecognition() {
+            if (!recognition) {
+                showToast('خطأ', 'التعرف الصوتي غير مدعوم في متصفحك', 'alert-circle', 'red');
+                return;
+            }
+            
+            try {
+                recognition.lang = config.language === 'ar' ? 'ar-SA' : 'en-US';
+                recognition.start();
+                
+                // Show voice indicator in header
+                elements.voiceIndicator.classList.remove('hidden');
+            } catch (err) {
+                console.error('Voice recognition error:', err);
+                showToast
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fsalmansour/fahadai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>