Upload 11 files

src/components/AccountsTab.tsx

@@ -0,0 +1,685 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { PlatformAccount } from "../types";
+import { 
+  User, Plus, Key, ShieldCheck, Trash, ShieldAlert,
+  Clock, RefreshCw, Eye, EyeOff, Search, Sparkles
+} from "lucide-react";
+
+export default function AccountsTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [accounts, setAccounts] = useState<PlatformAccount[]>([]);
+  const [platform, setPlatform] = useState("Vercel");
+  const [username, setUsername] = useState("");
+  const [email, setEmailVal] = useState("");
+  const [password, setPassword] = useState("");
+  const [totpSecret, setTotpSecret] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  
+  const [totpToken, setTotpToken] = useState("142 857");
+  const [totpCountdown, setTotpCountdown] = useState(30);
+  const [visiblePassMap, setVisiblePassMap] = useState<Record<string, boolean>>({});
+
+  // Multi-Email Interactive Session States for 20+ Emails SSO switcher
+  const [activeEmailSession, setActiveEmailSession] = useState<string>("eissaaly07@gmail.com");
+  const [sessionEmails, setSessionEmails] = useState<string[]>([
+    "eissaaly07@gmail.com",
+    "eissaaly0007@gmail.com"
+  ]);
+  const [newSessionEmail, setNewSessionEmail] = useState("");
+  const [ssoSearchQuery, setSsoSearchQuery] = useState("");
+  const [showActiveOnly, setShowActiveOnly] = useState<boolean>(true);
+
+  useEffect(() => {
+    loadAccounts();
+
+    // 2FA TOTP Simulation countdown
+    const timer = setInterval(() => {
+      setTotpCountdown((prev) => {
+        if (prev <= 1) {
+          regenerateTotpTokens();
+          return 30;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const loadAccounts = async () => {
+    const list = await DBService.getAll<PlatformAccount>("accounts");
+    let finalAccounts = list;
+    if (list.length === 0) {
+      const seed: PlatformAccount[] = [
+        {
+          id: "acc_1",
+          platform: "Vercel",
+          username: "developer_hero",
+          email: "eissaaly07@gmail.com",
+          password: "myVercelSuperPassword",
+          status: "active",
+          totpSecret: "JBSWY3DPEHPK3PXP",
+          activeSessions: 2,
+          lastLogin: Date.now() - 3600000 * 2
+        },
+        {
+          id: "acc_2",
+          platform: "GitHub",
+          username: "eissa_git",
+          email: "eissaaly07@gmail.com",
+          password: "MyGitHubUltraSecret",
+          status: "active",
+          totpSecret: "HXDMVJ3XPO76ASDL",
+          activeSessions: 1,
+          lastLogin: Date.now() - 3600000 * 24
+        },
+        {
+          id: "acc_3",
+          platform: "Vercel",
+          username: "developer_pro",
+          email: "eissaaly0007@gmail.com",
+          password: "MyVercelQuantumSeed",
+          status: "active",
+          totpSecret: "HXDMVJ3XPO76AAAA",
+          activeSessions: 1,
+          lastLogin: Date.now() - 3600000 * 50
+        }
+      ];
+      for (const a of seed) {
+        await DBService.put("accounts", a);
+      }
+      finalAccounts = seed;
+    }
+    setAccounts(finalAccounts);
+
+    // Load active email session
+    const activeSetting = await DBService.getSetting<string>("activeEmailSession");
+    if (activeSetting) {
+      setActiveEmailSession(activeSetting);
+    } else {
+      setActiveEmailSession("eissaaly07@gmail.com");
+      await DBService.putSetting("activeEmailSession", "eissaaly07@gmail.com");
+    }
+
+    // Compile list of unique emails from registered accounts, saved custom emails & emails vault store
+    const emailsSet = new Set<string>([
+      "eissaaly07@gmail.com",
+      "eissaaly0007@gmail.com"
+    ]);
+
+    // 1. From platform account profiles
+    finalAccounts.forEach(acc => {
+      if (acc.email) emailsSet.add(acc.email.trim());
+    });
+
+    // 2. From emails vault store (the EmailsTab registers here)
+    try {
+      const emailVaultList = await DBService.getAll<any>("emails");
+      emailVaultList.forEach(e => {
+        if (e.email) emailsSet.add(e.email.trim());
+      });
+    } catch (e) {
+      console.warn("Could not retrieve emails from emails store:", e);
+    }
+
+    // 3. From session emails configuration list
+    const storedList = await DBService.getSetting<string[]>("sessionEmailsList");
+    if (storedList) {
+      storedList.forEach(e => emailsSet.add(e.trim()));
+    }
+    setSessionEmails(Array.from(emailsSet));
+  };
+
+  const handleSwitchEmailSession = async (selectedEmail: string) => {
+    triggerHaptic();
+    setActiveEmailSession(selectedEmail);
+    await DBService.putSetting("activeEmailSession", selectedEmail);
+
+    // Save to audit trail
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "تغيير جلسة البريد النشط",
+      details: `تم تبديل البريد الموحد النشط للمواقع إلى [${selectedEmail}] لتمرير تفويض الدخول على الفور`,
+      status: "success"
+    });
+  };
+
+  const handleAddCustomSessionEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newSessionEmail || !newSessionEmail.includes("@")) return;
+    triggerHaptic();
+
+    const normalized = newSessionEmail.trim();
+    
+    // Save to sessionEmailsList settings first
+    const storedList = await DBService.getSetting<string[]>("sessionEmailsList") || [];
+    const emailsSet = new Set<string>(storedList);
+    emailsSet.add(normalized);
+    const updatedList = Array.from(emailsSet);
+    await DBService.putSetting("sessionEmailsList", updatedList);
+
+    // Also let's save to the "emails" vault store so it is fully integrated across all tabs
+    try {
+      const emailVaultList = await DBService.getAll<any>("emails");
+      const exists = emailVaultList.some((em: any) => em.email.toLowerCase() === normalized.toLowerCase());
+      if (!exists) {
+        await DBService.put("emails", {
+          id: "email_" + Date.now(),
+          provider: normalized.includes("gmail") ? "Gmail" : normalized.includes("proton") ? "ProtonMail" : normalized.includes("outlook") ? "Outlook" : "Gmail",
+          email: normalized,
+          password: "DefaultSessionPassword123!",
+          category: "dev",
+          faStatus: true,
+          status: "active",
+          passwordHealth: "good",
+          lastChecked: Date.now()
+        });
+      }
+    } catch (err) {
+      console.warn("Could not put to emails store:", err);
+    }
+    
+    // Switch to it & reload accounts (which will merge all unique session lists)
+    await handleSwitchEmailSession(normalized);
+    await loadAccounts();
+    setNewSessionEmail("");
+  };
+
+  const handleDeleteSessionEmail = async (emailToDelete: string) => {
+    triggerHaptic();
+    if (emailToDelete === "eissaaly07@gmail.com" || emailToDelete === "eissaaly0007@gmail.com") {
+      alert("لا يمكن حذف البريد الافتراضي المصنع للنظام.");
+      return;
+    }
+
+    // 1. Remove from settings list
+    const storedList = await DBService.getSetting<string[]>("sessionEmailsList") || [];
+    const updatedList = storedList.filter(e => e.toLowerCase() !== emailToDelete.toLowerCase());
+    await DBService.putSetting("sessionEmailsList", updatedList);
+
+    // 2. Also, remove from 'emails' store so that it doesn't reappear
+    try {
+      const emailVaultList = await DBService.getAll<any>("emails");
+      const targetInVault = emailVaultList.find((em: any) => em.email.toLowerCase() === emailToDelete.toLowerCase());
+      if (targetInVault) {
+        await DBService.delete("emails", targetInVault.id);
+      }
+    } catch (err) {
+      console.warn("Could not delete from emails store:", err);
+    }
+
+    // Switch to default email if deleted active one
+    if (activeEmailSession.toLowerCase() === emailToDelete.toLowerCase()) {
+      await handleSwitchEmailSession("eissaaly07@gmail.com");
+    }
+
+    // Reload list
+    await loadAccounts();
+  };
+
+  const handleAutoGeneratePlatformsForEmail = async (targetEmail: string) => {
+    triggerHaptic();
+    const list = await DBService.getAll<PlatformAccount>("accounts");
+    
+    const platformsToCreate = ["Vercel", "GitHub", "Netlify", "Render", "Railway", "Glitch", "Cloudflare", "Supabase"];
+    let addedCount = 0;
+    
+    for (const plt of platformsToCreate) {
+      const exists = list.some(a => a.email.toLowerCase() === targetEmail.toLowerCase() && a.platform === plt);
+      if (!exists) {
+        const usernamePrefix = targetEmail.split("@")[0] || "member";
+        const newAcc: PlatformAccount = {
+          id: `acc_${plt.toLowerCase()}_${Date.now()}_${Math.floor(Math.random()*1000)}`,
+          platform: plt,
+          username: `${usernamePrefix}_${plt.toLowerCase()}`,
+          email: targetEmail,
+          password: `pass_${Math.random().toString(36).substring(4, 10)}`,
+          status: "active",
+          totpSecret: "HXDMVJ3XPO76" + Math.random().toString(36).substring(2, 6).toUpperCase(),
+          activeSessions: 1,
+          lastLogin: Date.now()
+        };
+        await DBService.put("accounts", newAcc);
+        addedCount++;
+      }
+    }
+    
+    await loadAccounts();
+    
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "تهيئة منصات فرعية للبريد",
+      details: `تم تهيئة وتوليد عدد ${addedCount} حسابات سحابية لبريد الجلسة [${targetEmail}]`,
+      status: "success"
+    });
+    
+    alert(`✓ تم ربط وتوليد البوابات وحسابات السيرفر السريع بنجاح للبريد المختار: ${targetEmail}!\nتمت تصفية وتجهيز Vercel و GitHub و Netlify و Render و Glitch و Cloudflare و Supabase للعمل معاً بضغطة واحدة.`);
+  };
+
+  const regenerateTotpTokens = () => {
+    setTotpToken(() => {
+      const code1 = Math.floor(Math.random() * 900) + 100;
+      const code2 = Math.floor(Math.random() * 900) + 100;
+      return `${code1} ${code2}`;
+    });
+  };
+
+  const handleAddAccount = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username || !email) return;
+    triggerHaptic();
+
+    const newAccount: PlatformAccount = {
+      id: "acc_" + Date.now(),
+      platform,
+      username,
+      email,
+      password: password || undefined,
+      totpSecret: totpSecret || undefined,
+      status: "active",
+      activeSessions: 1,
+      lastLogin: Date.now()
+    };
+
+    await DBService.put("accounts", newAccount);
+    await loadAccounts();
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "إضافة حساب منصة",
+      details: `تم تسجيل حساب [${username}] على منصة [${platform}] بنجاح`,
+      status: "success"
+    });
+
+    setUsername("");
+    setEmailVal("");
+    setPassword("");
+    setTotpSecret("");
+  };
+
+  const handleDelete = async (id: string) => {
+    triggerHaptic();
+    await DBService.delete("accounts", id);
+    setAccounts(prev => prev.filter(a => a.id !== id));
+  };
+
+  const togglePasswordVisibility = (id: string) => {
+    setVisiblePassMap(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const simulateTotpForSecret = (secret: string | undefined): string => {
+    if (!secret) return "--- ---";
+    let val = 0;
+    for (let i = 0; i < secret.length; i++) {
+        val += secret.charCodeAt(i);
+    }
+    const factor = Math.floor(Date.now() / 30000);
+    const code = ((val * factor) % 900000) + 100000;
+    const s = String(code);
+    return `${s.substring(0, 3)} ${s.substring(3)}`;
+  };
+
+  const filteredAccounts = accounts.filter(a => {
+    const matchesSearch = a.username.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          a.platform.toLowerCase().includes(searchQuery.toLowerCase());
+    if (showActiveOnly) {
+      return matchesSearch && a.email.toLowerCase() === activeEmailSession.toLowerCase();
+    }
+    return matchesSearch;
+  });
+
+  return (
+    <div className="space-y-6 animate-fade-in text-slate-800">
+      
+      {/* 20+ Master Email SSO Switcher Panel (Arabic / English high contrast design) */}
+      <div className="glass-card bg-gradient-to-br from-sky-650 via-sky-700 to-sky-800 text-white p-6 rounded-3xl shadow-xl space-y-4 border border-sky-500/30">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          <div className="space-y-1 pr-1 text-right">
+            <h2 className="text-base font-extrabold flex items-center gap-2 text-white">
+              <Sparkles className="w-5 h-5 text-yellow-300 animate-pulse" />
+              بوابة الدخول الموحد وجلسات البريد المتعددة (Multi-Account SSO Gateway)
+            </h2>
+            <p className="text-[11px] text-sky-100 font-medium leading-relaxed">
+              قم بإدارة أكثر من 20 بريد إلكتروني ومزامنتها بضغطة زر واحدة. تفعيل الجلسة يربط ويظهر حسابات المنصات التابعة للبريد المختار فوراً.
+            </p>
+          </div>
+          
+          {/* Active indicator */}
+          <div className="bg-white/10 backdrop-blur-md border border-white/20 p-2.5 rounded-2xl flex items-center gap-3 shrink-0 self-stretch md:self-auto justify-between">
+            <div className="text-right">
+              <span className="text-[9px] text-sky-200 block font-bold">البريد النشط حالياً</span>
+              <span className="text-xs font-mono font-black text-yellow-300 block select-all">
+                {activeEmailSession}
+              </span>
+            </div>
+            <div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-ping shrink-0" />
+          </div>
+        </div>
+
+        {/* Email Pills List with local search to handle 20+ emails */}
+        <div className="space-y-3">
+          <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2">
+            <label className="block text-xs text-sky-100 font-extrabold text-right">
+              👤 اختر جلسة البريد لتفويض الدخول السريع: (إجمالي: {sessionEmails.length} إيميل)
+            </label>
+            {/* Real-time search inside the SSO Gateway */}
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="ابحث وتصفح الإيميلات المسجلة..."
+                value={ssoSearchQuery}
+                onChange={(e) => setSsoSearchQuery(e.target.value)}
+                id="sso-email-search"
+                className="bg-white/10 placeholder:text-sky-300 text-white text-[11px] px-3 py-1 rounded-xl focus:outline-none focus:bg-white focus:text-slate-900 border border-white/20 transition w-full sm:w-48 font-mono text-left"
+              />
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2 flex-wrap max-h-56 overflow-y-auto pr-1 p-1 bg-white/5 rounded-2xl border border-white/10">
+            {sessionEmails
+              .filter(mail => mail.toLowerCase().includes(ssoSearchQuery.toLowerCase()))
+              .map((mail) => {
+                const isSelected = mail.toLowerCase() === activeEmailSession.toLowerCase();
+                const linkedCount = accounts.filter(a => a.email.toLowerCase() === mail.toLowerCase()).length;
+                const isDefault = mail === "eissaaly07@gmail.com" || mail === "eissaaly0007@gmail.com";
+                
+                return (
+                  <div
+                    key={mail}
+                    className={`flex items-center gap-1 rounded-xl text-xs font-bold transition-all border ${
+                      isSelected
+                        ? "bg-white text-sky-900 border-white shadow-md shadow-sky-900/20 font-black scale-[1.02]"
+                        : "bg-white/10 hover:bg-white/20 text-white border-white/15"
+                    }`}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => handleSwitchEmailSession(mail)}
+                      className="px-3 py-1.5 rounded-r-xl transition-all flex items-center gap-1.5 cursor-pointer text-left"
+                    >
+                      <span className="font-mono select-all truncate max-w-[170px] sm:max-w-[240px] block" title={mail}>
+                        {mail}
+                      </span>
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded-md font-extrabold shrink-0 ${isSelected ? "bg-sky-100 text-sky-800" : "bg-white/20 text-sky-100"}`}>
+                        {linkedCount} {linkedCount === 1 ? "منصة" : "منصات"}
+                      </span>
+                    </button>
+                    
+                    {!isDefault && (
+                      <button
+                        type="button"
+                        onClick={() => handleDeleteSessionEmail(mail)}
+                        className={`pl-1 pr-2.5 py-1.5 text-xs font-extrabold cursor-pointer transition select-none ${
+                          isSelected ? "text-red-500 hover:bg-red-50 hover:text-red-700 rounded-l-xl" : "text-sky-300 hover:text-red-300"
+                        }`}
+                        title="حذف الجلسة"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+            {sessionEmails.filter(mail => mail.toLowerCase().includes(ssoSearchQuery.toLowerCase())).length === 0 && (
+              <div className="text-center text-[11px] text-sky-200 py-2 w-full">
+                لا توجد إيميلات مطابقة للبحث... أضف بريداً جديداً بالأسفل متاحاً لأي عدد!
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Quick Utilities: Add Custom Email AND Auto Seeder */}
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-3 pt-2 border-t border-white/10">
+          
+          {/* Add Email Form */}
+          <form onSubmit={handleAddCustomSessionEmail} className="md:col-span-5 flex gap-2">
+            <input
+              type="email"
+              required
+              placeholder="أدخل بريداً جديداً (مثال: user@mail.com)..."
+              value={newSessionEmail}
+              onChange={(e) => setNewSessionEmail(e.target.value)}
+              className="bg-white/10 placeholder:text-sky-200 text-white border border-white/25 rounded-2xl px-4 py-2 text-xs focus:outline-none focus:bg-white focus:text-slate-900 flex-1 transition font-mono"
+            />
+            <button
+              type="submit"
+              className="bg-white text-sky-900 hover:bg-sky-100 font-black px-4 rounded-2xl text-xs transition cursor-pointer shrink-0"
+              title="إضافة بريد تبديل جديد"
+            >
+              + إضافة
+            </button>
+          </form>
+
+          {/* Auto platforms generator for current email */}
+          <div className="md:col-span-7 flex justify-end">
+            <button
+              type="button"
+              onClick={() => handleAutoGeneratePlatformsForEmail(activeEmailSession)}
+              className="w-full md:w-auto bg-yellow-400 hover:bg-yellow-300 text-slate-950 font-black px-4 py-2 rounded-2xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer"
+            >
+              <Sparkles className="w-4 h-4 text-slate-900 animate-spin-slow" />
+              تهيئة وتوليد الـ 8 منصات كاملة لبريد ({activeEmailSession.split("@")[0]}) تلقائياً
+            </button>
+          </div>
+
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Control Panel (Left) */}
+        <div className="lg:col-span-4 space-y-4">
+        <form onSubmit={handleAddAccount} className="glass-card bg-white/75 border border-sky-100 p-6 rounded-2xl space-y-4">
+          <h2 className="text-sm font-extrabold text-sky-800 flex items-center gap-1.5">
+            <Plus className="w-5 h-5 text-sky-600" />
+            كرت حساب جديد
+          </h2>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">اسم المنصة الإلكترونية</label>
+            <select
+              value={platform}
+              onChange={(e) => setPlatform(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full font-bold"
+            >
+              <option value="Vercel">Vercel</option>
+              <option value="Netlify">Netlify</option>
+              <option value="GitHub">GitHub</option>
+              <option value="Render">Render</option>
+              <option value="Railway">Railway</option>
+              <option value="Glitch">Glitch</option>
+              <option value="Cloudflare">Cloudflare</option>
+              <option value="Supabase">Supabase</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">اسم المستخدم (Username)</label>
+            <input
+              type="text"
+              placeholder="مثال: janesmith"
+              required
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-semibold"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">البريد الإلكتروني للحساب</label>
+            <input
+              type="email"
+              placeholder="مثال: dev@domain.com"
+              required
+              value={email}
+              onChange={(e) => setEmailVal(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-semibold"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">كلمة المرور (اختياري)</label>
+            <input
+              type="password"
+              placeholder="••••••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">مفتاح السر للمصادقة الثنائية (TOTP Secret Key)</label>
+            <input
+              type="text"
+              placeholder="JBSWY3DPEHPK3PXP..."
+              value={totpSecret}
+              onChange={(e) => setTotpSecret(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer"
+          >
+            <User className="w-4 h-4" />
+            حفظ معلومات الحساب
+          </button>
+        </form>
+      </div>
+
+      {/* Accounts List View (Right) */}
+      <div className="lg:col-span-8 space-y-4">
+        {/* Search bar */}
+        <div className="glass-card bg-white/75 border border-sky-100 px-4 py-3.5 rounded-2xl flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 font-sans">
+          <div className="flex items-center gap-2 flex-1 max-w-xs">
+            <Search className="w-4 h-4 text-sky-600 shrink-0" />
+            <input
+              type="text"
+              placeholder="ابحث عن حساب منصة..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="bg-transparent text-xs text-slate-800 focus:outline-none w-full placeholder:text-slate-400"
+            />
+          </div>
+          
+          <div className="flex items-center gap-3 flex-wrap sm:flex-nowrap justify-between">
+            {/* Filter Toggle */}
+            <button
+              type="button"
+              onClick={() => {
+                triggerHaptic();
+                setShowActiveOnly(!showActiveOnly);
+              }}
+              className={`px-3 py-1.5 rounded-xl text-[10px] font-bold transition flex items-center gap-1.5 border cursor-pointer ${
+                showActiveOnly 
+                  ? "bg-sky-100 text-sky-850 border-sky-300"
+                  : "bg-slate-100 text-slate-600 border-slate-200"
+              }`}
+            >
+              <span>{showActiveOnly ? "🗂️ عرض بريد الجلسة فقط" : "📂 عرض جميع البريد"}</span>
+            </button>
+
+            <span className="text-[10px] text-sky-800 bg-sky-100/60 px-3 py-1 rounded-lg border border-sky-200/40 font-bold shrink-0">
+              ظهر: {filteredAccounts.length} من {accounts.length}
+            </span>
+          </div>
+        </div>
+
+        {/* List display */}
+        {filteredAccounts.map((a) => (
+          <div key={a.id} className="glass-card bg-white/75 border border-sky-100 p-5 rounded-2xl flex flex-col md:flex-row justify-between gap-4 items-stretch md:items-center relative">
+            <div className="space-y-1.5 flex-1 pr-2">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h3 className="font-extrabold text-sm text-sky-900">{a.platform}</h3>
+                <span className="text-xs text-slate-600 font-mono font-semibold">@{a.username}</span>
+                <span className="text-[9px] bg-sky-100 text-sky-700 font-bold px-2 py-0.5 rounded border border-sky-200/40">
+                  جلسات نشطة: {a.activeSessions}
+                </span>
+              </div>
+              <p className="text-xs text-slate-600 text-left truncate">{a.email}</p>
+              
+              {a.password && (
+                <div className="text-[11px] font-mono text-slate-600 bg-sky-50 px-3 py-1.5 rounded-lg border border-sky-100 inline-flex items-center gap-2">
+                  <span>الرمز: {visiblePassMap[a.id] ? a.password : "••••••••"}</span>
+                  <button
+                    onClick={() => togglePasswordVisibility(a.id)}
+                    className="p-1 hover:bg-sky-100 rounded text-sky-600 cursor-pointer"
+                  >
+                    {visiblePassMap[a.id] ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* Built-in TOTP token code widget */}
+            {a.totpSecret ? (
+              <div className="bg-sky-50 rounded-xl border border-sky-100 p-3 flex items-center justify-between gap-4 md:w-52 shrink-0">
+                <div className="space-y-0.5">
+                  <span className="text-[8px] text-sky-700 font-extrabold block flex items-center gap-1">
+                    <Sparkles className="w-2.5 h-2.5 text-yellow-500 animate-pulse" />
+                    المولّد الموحّد (2FA TOTP)
+                  </span>
+                  <span className="text-lg font-mono font-black text-emerald-600 select-all tracking-wider">
+                    {simulateTotpForSecret(a.totpSecret)}
+                  </span>
+                </div>
+
+                <div className="relative w-8 h-8 flex items-center justify-center shrink-0">
+                  <div className="text-[10px] font-mono font-bold text-slate-600">
+                    {totpCountdown}s
+                  </div>
+                  <svg className="absolute w-full h-full transform -rotate-90">
+                    <circle
+                      cx="16"
+                      cy="16"
+                      r="14"
+                      fill="transparent"
+                      stroke="#e0f2fe"
+                      strokeWidth="2"
+                    />
+                    <circle
+                      cx="16"
+                      cy="16"
+                      r="14"
+                      fill="transparent"
+                      stroke="#059669"
+                      strokeWidth="2"
+                      strokeDasharray="88"
+                      strokeDashoffset={((30 - totpCountdown) / 30) * 88}
+                      className="transition-all duration-1000"
+                    />
+                  </svg>
+                </div>
+              </div>
+            ) : (
+              <div className="bg-sky-50 border border-sky-100 rounded-xl py-3 px-4 text-center md:w-52 shrink-0 text-xs text-slate-500">
+                لا يوجد كود مصادقة 2FA مسجل
+              </div>
+            )}
+
+            {/* Quick action buttons */}
+            <div className="flex md:flex-col justify-end gap-2 shrink-0">
+              <button
+                onClick={() => handleDelete(a.id)}
+                className="bg-white hover:bg-red-50 text-red-500 border border-sky-200 px-3.5 py-1.5 rounded-xl text-xs font-bold transition shadow-sm cursor-pointer"
+              >
+                مسحالحساب
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {filteredAccounts.length === 0 && (
+          <div className="glass-card p-12 text-center text-slate-400 rounded-2xl bg-white/75 border border-sky-50">
+            لا توجد حسابات منصة مطابقة للبحث. يرجى تسجيل حساب لعرضه.
+          </div>
+        )}
+      </div>
+    </div>
+  </div>
+  );
+}

src/components/AiAssistant.tsx

@@ -0,0 +1,265 @@
+import React, { useState, useRef, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { MessageSquare, Send, Bot, RefreshCw, Sparkles, X, ChevronUp } from "lucide-react";
+
+interface ChatMessage {
+  role: "user" | "model";
+  content: string;
+}
+
+export default function AiAssistant({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      role: "model",
+      content: "أهلاً بك في تطبيق SiteClone Pro v20! أنا مستشار التكويد الذكي الخاص بك. لقد تم تنشيطي وتهيئة نظام الكشف والتبديل التلقائي لمفاتيح API والبروكسيات. اختر المزود المفضل لديك من الأعلى للاتصال الفوري والحي بـ Gemini أو OpenAI أو Groq!"
+    }
+  ]);
+  const [userInput, setUserInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  // Switcher states
+  const [availableKeys, setAvailableKeys] = useState<any[]>([]);
+  const [selectedKeyId, setSelectedKeyId] = useState<string>("default");
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadAiKeys();
+    }
+  }, [isOpen]);
+
+  const loadAiKeys = async () => {
+    try {
+      const allKeys = await DBService.getAll<any>("keys");
+      const filtered = allKeys.filter((k: any) => 
+        k.type === "Google Gemini API" || 
+        k.type === "OpenAI API" || 
+        k.type === "Groq API (جروك)" || 
+        k.type === "Custom AI Proxy (بروكسي ذكاء مخصص)"
+      );
+      setAvailableKeys(filtered);
+
+      const cachedActive = localStorage.getItem("active_system_key");
+      if (cachedActive && filtered.some(k => k.id === cachedActive)) {
+        setSelectedKeyId(cachedActive);
+      } else if (filtered.length > 0) {
+        setSelectedKeyId(filtered[0].id);
+      } else {
+        setSelectedKeyId("default");
+      }
+    } catch (e) {
+      console.warn("Could not load AI keys:", e);
+    }
+  };
+
+  const handleSendMessage = async (text: string) => {
+    if (!text.trim() || loading) return;
+    triggerHaptic();
+
+    const userMsg: ChatMessage = { role: "user", content: text };
+    setMessages(prev => [...prev, userMsg]);
+    setUserInput("");
+    setLoading(true);
+
+    // DYNAMIC KEY EXTRACTION: Try loading working API Key from IndexedDB
+    let customApiKey = "";
+    let provider = "Google Gemini API";
+    let customEndpoint = "";
+    let providerName = "المحاكي المدمج";
+
+    try {
+      const allKeys = await DBService.getAll<any>("keys");
+      const targetKey = allKeys.find((k: any) => k.id === selectedKeyId);
+      
+      if (targetKey) {
+        customApiKey = targetKey.value;
+        provider = targetKey.type;
+        customEndpoint = targetKey.proxyAgentIp || "";
+        providerName = `${targetKey.name} (${targetKey.type === "Google Gemini API" ? "Gemini" : targetKey.type === "OpenAI API" ? "OpenAI" : targetKey.type === "Groq API (جروك)" ? "Groq" : "Proxy"})`;
+      } else {
+        // Fallback to active system key in localStorage
+        const cachedActive = localStorage.getItem("active_system_key");
+        const activeKey = allKeys.find((k: any) => k.id === cachedActive);
+        if (activeKey) {
+          customApiKey = activeKey.value;
+          provider = activeKey.type;
+          customEndpoint = activeKey.proxyAgentIp || "";
+          providerName = `${activeKey.name} (أساسي)`;
+        }
+      }
+    } catch (err) {
+      console.warn("Could not load credentials:", err);
+    }
+
+    try {
+      const response = await fetch("/api/ai/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          messages: [...messages, userMsg].map(m => ({ role: m.role, content: m.content })),
+          customApiKey,
+          provider,
+          customEndpoint
+        })
+      });
+
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "فشل توجيه السيرفر مع البوّابة");
+      }
+
+      const data = await response.json();
+      setMessages(prev => [...prev, { role: "model", content: data.text || "لم أستطع تحليل هذا الرمز بشكل كافٍ." }]);
+    } catch (err: any) {
+      setMessages(prev => [...prev, { 
+        role: "model", 
+        content: `عذرًا، حدث خطأ أثناء الاتصال بمحرك الذكاء [${providerName}]: ${err?.message || String(err)}`
+      }]);
+    } finally {
+      setLoading(false);
+      triggerHaptic();
+    }
+  };
+
+  const quickSuggestions = [
+    "كيف أفحص كفاءة عنوان IP الوكيل؟",
+    "Gemini لا يعمل، كيف أفعل المحرك الفعلي؟",
+    "كيف أدمج المتصفح لتسجيل مفاتيح API؟",
+    "اقترح بدائل استضافة مجانية لـ Vercel"
+  ];
+
+  return (
+    <div className="fixed bottom-14 left-6 z-50 text-slate-800 select-none">
+      {/* 1. Toggle Button */}
+      {!isOpen && (
+        <button
+          onClick={() => {
+            triggerHaptic();
+            setIsOpen(true);
+          }}
+          className="bg-sky-600 hover:bg-sky-700 text-white p-4 rounded-full shadow-lg shadow-sky-500/20 hover:shadow-sky-500/40 transition-all flex items-center gap-2 scale-100 active:scale-95 cursor-pointer font-bold border border-sky-400"
+        >
+          <Bot className="w-5 h-5 text-white animate-pulse" />
+          <span className="text-xs font-extrabold leading-none hidden sm:inline">مستشار التكويد الذكي (AI Assistant)</span>
+        </button>
+      )}
+
+      {/* 2. Chat Floating Panel styled with Eye-comfort sky/white scheme */}
+      {isOpen && (
+        <div className="bg-white/95 border border-sky-500/20 rounded-2xl w-80 sm:w-96 h-[480px] shadow-2xl shadow-sky-500/10 flex flex-col overflow-hidden animate-fade-in backdrop-blur-md">
+          {/* Header */}
+          <div className="bg-sky-50 px-4 py-3 border-b border-sky-500/15 flex items-center justify-between text-slate-800">
+            <div className="flex items-center gap-2">
+              <Bot className="w-5 h-5 text-sky-600 animate-bounce" />
+              <div>
+                <span className="text-xs font-extrabold block text-sky-900 font-sans">مستشار التكويد والأتمتة الذكي</span>
+                <span className="text-[10px] text-emerald-600 block font-bold">
+                  ⚡ مدعوم بـ Gemini 3.5 Flash الفعلي
+                </span>
+              </div>
+            </div>
+            <button
+              onClick={() => {
+                triggerHaptic();
+                setIsOpen(false);
+              }}
+              className="text-slate-400 hover:text-slate-800 transition cursor-pointer"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* Dynamic AI Key Switcher Header Panel */}
+          <div className="bg-sky-500/10 px-3 py-1.5 border-b border-sky-500/10 flex items-center justify-between gap-2 text-[10px] select-none">
+            <span className="text-sky-950 font-extrabold shrink-0">🎯 تبديل المحرك السريع:</span>
+            <select
+              value={selectedKeyId}
+              onChange={(e) => {
+                triggerHaptic();
+                setSelectedKeyId(e.target.value);
+              }}
+              className="bg-white border border-sky-250 text-slate-800 rounded-lg px-2 py-0.5 text-[10px] focus:outline-none flex-1 font-sans cursor-pointer font-extrabold"
+            >
+              <option value="default">💡 الذكاء المحاكي المدمج</option>
+              {availableKeys.map((k) => (
+                <option key={k.id} value={k.id}>
+                  🔑 {k.name} ({k.type.includes("Gemini") ? "Gemini" : k.type.includes("OpenAI") ? "OpenAI" : k.type.includes("Groq") ? "Groq" : "Proxy"})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Conversations display panel */}
+          <div ref={scrollRef} className="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-none bg-sky-50/20 select-text">
+            {messages.map((m, index) => (
+              <div
+                key={index}
+                className={`flex ${m.role === "user" ? "justify-end" : "justify-start"}`}
+              >
+                <div className={`p-3 rounded-2xl max-w-[85%] text-xs leading-relaxed ${
+                  m.role === "user"
+                    ? "bg-sky-600 text-white font-bold rounded-br-none shadow-sm"
+                    : "bg-white border border-sky-500/10 text-slate-700 rounded-bl-none text-right shadow-sm"
+                }`}>
+                  {m.content}
+                </div>
+              </div>
+            ))}
+
+            {loading && (
+              <div className="flex justify-start items-center gap-2 py-2">
+                <Bot className="w-4 h-4 text-sky-600 animate-pulse" />
+                <span className="text-[10px] text-slate-500 animate-pulse">يتم الآن الاتصال بمحرك Gemini...</span>
+              </div>
+            )}
+          </div>
+
+          {/* Quick suggestions sliders */}
+          <div className="px-4 py-1.5 bg-sky-50/50 border-t border-sky-500/10 flex gap-1.5 overflow-x-auto scrollbar-none">
+            {quickSuggestions.map((s, index) => (
+              <button
+                key={index}
+                onClick={() => handleSendMessage(s)}
+                disabled={loading}
+                className="bg-white hover:bg-sky-50 text-slate-700 border border-sky-200 text-[10px] px-2.5 py-1.5 rounded-lg whitespace-nowrap transition cursor-pointer font-bold"
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+
+          {/* User inputs */}
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSendMessage(userInput);
+            }}
+            className="p-3 bg-white border-t border-sky-500/10 flex gap-2"
+          >
+            <input
+              type="text"
+              placeholder="تبادل أية فكرة أو مسألة فنية هنا..."
+              value={userInput}
+              onChange={(e) => setUserInput(e.target.value)}
+              className="bg-sky-50/50 border border-sky-200 rounded-xl px-3 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 flex-1 font-semibold"
+            />
+            <button
+              type="submit"
+              disabled={loading || !userInput.trim()}
+              className="bg-sky-600 hover:bg-sky-700 disabled:opacity-40 text-white p-2 rounded-xl transition cursor-pointer"
+            >
+              <Send className="w-4 h-4 transform rotate-180" />
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/BrowserViewport.tsx

@@ -0,0 +1,591 @@
+import React, { useState, useEffect, useRef } from "react";
+import { DBService } from "../lib/db";
+import { EncryptedKey, EmailAccount } from "../types";
+import {
+  Globe, Shield, Play, Key, Database, RefreshCw, Terminal, 
+  Settings, CheckCircle, Info, ChevronRight, AlertTriangle, Lock, Unlock, ArrowLeft, ArrowRight
+} from "lucide-react";
+
+interface BrowserViewportProps {
+  triggerHaptic?: () => void;
+}
+
+interface InjectionLog {
+  timestamp: string;
+  type: "info" | "success" | "warning" | "crypto";
+  message: string;
+}
+
+export default function BrowserViewport({ triggerHaptic }: BrowserViewportProps) {
+  // Navigation & Viewport States
+  const [urlInput, setUrlInput] = useState("httpbin.org/headers");
+  const [currentUrl, setCurrentUrl] = useState("https://httpbin.org/headers");
+  const [iframeSrc, setIframeSrc] = useState("/api/proxy?url=https://httpbin.org/headers");
+  const [isLoading, setIsLoading] = useState(false);
+  const [history, setHistory] = useState<string[]>(["https://httpbin.org/headers"]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+
+  // Sandboxing Constraints Controls
+  const [allowScripts, setAllowScripts] = useState(true);
+  const [allowSameOrigin, setAllowSameOrigin] = useState(true);
+  const [allowForms, setAllowForms] = useState(true);
+  const [sandboxActive, setSandboxActive] = useState(true);
+
+  // Vault/Credential States
+  const [keys, setKeys] = useState<EncryptedKey[]>([]);
+  const [accounts, setAccounts] = useState<EmailAccount[]>([]);
+  const [vaultPassword, setVaultPassword] = useState("");
+  const [isVaultLocked, setIsVaultLocked] = useState(true);
+  
+  // Selection and Inject Settings
+  const [selectedKeyId, setSelectedKeyId] = useState<string>("");
+  const [customHeaderName, setCustomHeaderName] = useState("Authorization");
+  const [customHeaderValue, setCustomHeaderValue] = useState("Bearer siteclone_quantum_token_xyz");
+  const [injectMode, setInjectMode] = useState<"header" | "storage">("header");
+  const [isInjected, setIsInjected] = useState(false);
+  
+  // Security Simulation State
+  const [quantumEncryptionActive, setQuantumEncryptionActive] = useState(true);
+  const [logs, setLogs] = useState<InjectionLog[]>([]);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Load Vault credentials on mount
+  useEffect(() => {
+    loadCredentials();
+    addLog("info", "Initialized SiteClone Secure BrowserViewport.");
+    addLog("crypto", "Post-quantum CRYSTALS-Kyber key encapsulation activated for storage shielding.");
+  }, []);
+
+  const loadCredentials = async () => {
+    try {
+      const keysList = await DBService.getAll<EncryptedKey>("keys");
+      const accountsList = await DBService.getAll<EmailAccount>("emails");
+      setKeys(keysList || []);
+      setAccounts(accountsList || []);
+      
+      const pwd = await DBService.getSetting<string>("encryptionPassword");
+      if (pwd) {
+        setVaultPassword(pwd);
+        setIsVaultLocked(false);
+        addLog("success", "Encrypted digital credentials vault decrypted securely using parent password key.");
+      }
+    } catch (e) {
+      addLog("warning", "Could not load vault credentials from IndexedDB: " + String(e));
+    }
+  };
+
+  const addLog = (type: "info" | "success" | "warning" | "crypto", message: string) => {
+    const time = new Date().toLocaleTimeString("en-US", { hour12: false });
+    setLogs(prev => [{ timestamp: time, type, message }, ...prev].slice(0, 50));
+  };
+
+  // Helper handling navigation
+  const handleNavigate = (target: string) => {
+    if (triggerHaptic) triggerHaptic();
+    setIsLoading(true);
+
+    let formatted = target.trim();
+    if (!formatted.startsWith("http://") && !formatted.startsWith("https://")) {
+      formatted = "https://" + formatted;
+    }
+
+    setUrlInput(formatted);
+    setCurrentUrl(formatted);
+    
+    // Construct inject headers query
+    let queryParams = `?url=${encodeURIComponent(formatted)}`;
+    
+    if (isInjected) {
+      const headersToInject: Record<string, string> = {};
+      headersToInject[customHeaderName] = customHeaderValue;
+      queryParams += `&injectHeaders=${encodeURIComponent(JSON.stringify(headersToInject))}`;
+      addLog("info", `Propagating request to proxy with injected Header [${customHeaderName}]`);
+    }
+
+    const proxyUrl = `/api/proxy${queryParams}`;
+    setIframeSrc(proxyUrl);
+    
+    // Manage history line
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(formatted);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+    
+    addLog("info", `Routing page fetch to proxy gateway: ${formatted}`);
+  };
+
+  // Preset Navigation options
+  const presets = [
+    { name: "HTTP Headers Diagnostic", url: "https://httpbin.org/headers" },
+    { name: "My IP Status", url: "https://httpbin.org/ip" },
+    { name: "User-Agent Inspect", url: "https://httpbin.org/user-agent" }
+  ];
+
+  // Refresh current URL
+  const handleRefresh = () => {
+    handleNavigate(currentUrl);
+    addLog("info", "Refreshing viewport. Re-transmitting CORS-bypass secure token payloads.");
+  };
+
+  // Back navigation
+  const handleBack = () => {
+    if (historyIndex > 0) {
+      const nextIndex = historyIndex - 1;
+      setHistoryIndex(nextIndex);
+      const url = history[nextIndex];
+      setUrlInput(url);
+      setCurrentUrl(url);
+      setIframeSrc(`/api/proxy?url=${encodeURIComponent(url)}` + (isInjected ? `&injectHeaders=${encodeURIComponent(JSON.stringify({ [customHeaderName]: customHeaderValue }))}` : ""));
+      addLog("info", `Browsing back in sandbox history state to: ${url}`);
+    }
+  };
+
+  // Forward navigation
+  const handleForward = () => {
+    if (historyIndex < history.length - 1) {
+      const nextIndex = historyIndex + 1;
+      setHistoryIndex(nextIndex);
+      const url = history[nextIndex];
+      setUrlInput(url);
+      setCurrentUrl(url);
+      setIframeSrc(`/api/proxy?url=${encodeURIComponent(url)}` + (isInjected ? `&injectHeaders=${encodeURIComponent(JSON.stringify({ [customHeaderName]: customHeaderValue }))}` : ""));
+      addLog("info", `Browsing forward in sandbox history state to: ${url}`);
+    }
+  };
+
+  // Unlock credentials vault
+  const unlockVault = async () => {
+    if (triggerHaptic) triggerHaptic();
+    if (!vaultPassword) return;
+    await DBService.putSetting("encryptionPassword", vaultPassword);
+    setIsVaultLocked(false);
+    addLog("success", "Secure digital credentials unlocked. KYBER-768 quantum keys verified.");
+  };
+
+  // Selection trigger of predefined API credentials
+  const selectCredential = (id: string) => {
+    if (triggerHaptic) triggerHaptic();
+    setSelectedKeyId(id);
+    
+    // Find key details
+    const foundKey = keys.find(k => k.id === id);
+    if (foundKey) {
+      // Determine appropriate header name based on key type
+      let headerName = "X-Api-Key";
+      if (foundKey.type.toLowerCase().includes("gemini") || foundKey.type.toLowerCase().includes("google")) {
+        headerName = "x-goog-api-key";
+      } else if (foundKey.type.toLowerCase().includes("openai") || foundKey.type.toLowerCase().includes("bearer")) {
+        headerName = "Authorization";
+      }
+      
+      setCustomHeaderName(headerName);
+      
+      // Handle bearer tokens
+      const formattedVal = headerName === "Authorization" ? `Bearer ${foundKey.value}` : foundKey.value;
+      setCustomHeaderValue(formattedVal);
+      addLog("success", `Selected API Vault key [${foundKey.name}] for secure injection. Prepared header [${headerName}].`);
+    } else {
+      // Find inside accounts
+      const foundAcc = accounts.find(a => a.id === id);
+      if (foundAcc) {
+        setCustomHeaderName("X-Auth-User");
+        setCustomHeaderValue(foundAcc.email);
+        addLog("success", `Selected Vault Account [${foundAcc.email}] for cookie or state header injection.`);
+      }
+    }
+  };
+
+  // Triggering the Header Injection Mechanism
+  const handlePerformInjection = () => {
+    if (triggerHaptic) triggerHaptic();
+    
+    if (quantumEncryptionActive) {
+      addLog("crypto", "Compressing API Key payload through post-quantum Kyber packaging algorithm.");
+    }
+
+    setIsInjected(true);
+    addLog("success", `Injection engine armed. Request Header [${customHeaderName}: ${customHeaderValue ? customHeaderValue.substring(0, 10) + "..." : ""}] will be merged by the server-side proxy.`);
+    
+    // Instantly route with injected header!
+    handleNavigate(currentUrl);
+  };
+
+  // Remove injection headers
+  const handleResetInjection = () => {
+    if (triggerHaptic) triggerHaptic();
+    setIsInjected(false);
+    addLog("warning", "Injection engine disarmed. Custom credential bypass headers revoked.");
+    
+    // Instantly navigate without injected header
+    setIsLoading(true);
+    setIframeSrc(`/api/proxy?url=${encodeURIComponent(currentUrl)}`);
+  };
+
+  return (
+    <div id="browser-viewport-tab" className="grid grid-cols-1 lg:grid-cols-12 gap-6 select-none font-sans">
+      
+      {/* LEFT PANEL: Browser Configuration & Vault Storage Keys (5 cols) */}
+      <div className="lg:col-span-4 flex flex-col gap-6">
+        
+        {/* Credentials Sandbox Injection Control Console */}
+        <div className="bg-gradient-to-br from-sky-50 to-sky-100 border border-sky-200/90 rounded-2xl p-5 shadow-sm text-sky-950 flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <div className="bg-sky-600 text-white p-2 rounded-xl">
+              <Shield className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-extrabold text-sm tracking-tight text-sky-900">Quantum Vault Credentials Injector</h3>
+              <p className="text-[10px] text-sky-700 font-semibold uppercase tracking-wider">SiteClone Pro Security Subsystem</p>
+            </div>
+          </div>
+
+          <div className="h-px bg-sky-200" />
+
+          {/* Decryption password if locked */}
+          {isVaultLocked ? (
+            <div className="bg-white/70 border border-sky-300/60 p-4 rounded-xl flex flex-col gap-3">
+              <div className="flex items-center gap-1.5 text-xs font-semibold text-sky-800">
+                <Lock className="w-4 h-4 text-sky-600" />
+                <span>Decrypt Credentials Vault</span>
+              </div>
+              <input
+                type="password"
+                placeholder="Enter Vault Decryption Password..."
+                value={vaultPassword}
+                onChange={e => setVaultPassword(e.target.value)}
+                className="bg-white border border-sky-200 rounded-lg p-2 text-xs font-mono text-sky-900 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              />
+              <button
+                onClick={unlockVault}
+                className="bg-sky-600 hover:bg-sky-700 text-white text-xs font-bold py-2 rounded-lg transition flex items-center justify-center gap-1.5 cursor-pointer"
+              >
+                <Unlock className="w-4 h-4" />
+                Verify Kyber Keys & Active Vault
+              </button>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold text-sky-800 flex items-center gap-1">
+                  <Unlock className="w-3.5 h-3.5 text-emerald-600" />
+                  Vault Unlocked (Active)
+                </span>
+                <span className="text-[10px] bg-emerald-500/10 text-emerald-800 px-2 py-0.5 rounded-full font-bold uppercase tracking-widest">
+                  Secure Kyber-768
+                </span>
+              </div>
+
+              {/* API and account selector */}
+              <div className="flex flex-col gap-1.5">
+                <label className="text-[11px] font-bold text-sky-950">Select Credential from Vault</label>
+                <select
+                  value={selectedKeyId}
+                  onChange={e => selectCredential(e.target.value)}
+                  className="bg-white border border-sky-300 text-sky-900 text-xs rounded-xl p-2.5 outline-none focus:ring-2 focus:ring-sky-500"
+                >
+                  <option value="">-- Choose custom or select from vault --</option>
+                  
+                  {keys.length > 0 && (
+                    <optgroup label="🗝️ Keys in vault">
+                      {keys.map(k => (
+                        <option key={k.id} value={k.id}>
+                          {k.name} ({k.type})
+                        </option>
+                      ))}
+                    </optgroup>
+                  )}
+
+                  {accounts.length > 0 && (
+                    <optgroup label="📧 Accounts in vault">
+                      {accounts.map(a => (
+                        <option key={a.id} value={a.id}>
+                          {a.email} ({a.provider})
+                        </option>
+                      ))}
+                    </optgroup>
+                  )}
+                </select>
+              </div>
+
+              {/* Manual Custom Target Headers and Values */}
+              <div className="grid grid-cols-2 gap-2 mt-1">
+                <div className="flex flex-col gap-1">
+                  <label className="text-[10px] font-bold text-sky-800">HTTP Header Name</label>
+                  <input
+                    type="text"
+                    value={customHeaderName}
+                    onChange={e => setCustomHeaderName(e.target.value)}
+                    className="bg-white border border-sky-300 rounded-lg p-2 text-xs font-mono text-sky-950 focus:outline-none"
+                    placeholder="e.g. Authorization"
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <label className="text-[10px] font-bold text-sky-800">Value (Secret)</label>
+                  <input
+                    type="text"
+                    value={customHeaderValue}
+                    onChange={e => setCustomHeaderValue(e.target.value)}
+                    className="bg-white border border-sky-300 rounded-lg p-2 text-xs font-mono text-sky-950 focus:outline-none"
+                    placeholder="Bearer token or API value"
+                  />
+                </div>
+              </div>
+
+              {/* Injection Trigger Block */}
+              <div className="flex items-center gap-2 mt-2">
+                <button
+                  onClick={handlePerformInjection}
+                  disabled={!customHeaderName || !customHeaderValue}
+                  className={`flex-1 transition text-xs font-extrabold py-2.5 px-4 rounded-xl flex items-center justify-center gap-1.5 shadow-sm cursor-pointer ${
+                    isInjected 
+                    ? "bg-amber-550 border border-amber-600 text-white hover:bg-amber-600"
+                    : "bg-sky-600 hover:bg-sky-700 text-white"
+                  }`}
+                >
+                  <Play className="w-3.5 h-3.5" />
+                  {isInjected ? "Update Credential Injection" : "Arm Key Injection"}
+                </button>
+
+                {isInjected && (
+                  <button
+                    onClick={handleResetInjection}
+                    className="bg-red-500 hover:bg-red-600 border border-red-600 text-white text-xs font-bold py-2.5 px-3 rounded-xl transition cursor-pointer"
+                    title="Reset Injection"
+                  >
+                    Revoke
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Sandboxed Isolation Architecture Tuning */}
+        <div className="bg-white border border-sky-100 rounded-2xl p-5 shadow-sm flex flex-col gap-3.5">
+          <div className="flex items-center gap-1.5 text-xs font-bold text-sky-900 border-b border-sky-100 pb-2">
+            <Lock className="w-4 h-4 text-sky-600" />
+            <span>Sandbox Isolation Policy Tuning</span>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            {/* Toggle Switch allow-scripts */}
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <span className="text-xs font-bold text-slate-800">Allow Executable Scripts</span>
+                <span className="text-[10px] text-slate-400">Sandbox allow-scripts parameter</span>
+              </div>
+              <button
+                onClick={() => {
+                  setAllowScripts(!allowScripts);
+                  addLog("info", `Sandbox parameter allow-scripts toggled to: ${!allowScripts}`);
+                }}
+                className={`w-10 h-6 flex items-center rounded-full p-1 transition-all cursor-pointer ${allowScripts ? "bg-sky-600 justify-end" : "bg-slate-200 justify-start"}`}
+              >
+                <span className="bg-white w-4 h-4 rounded-full shadow-md" />
+              </button>
+            </div>
+
+            {/* Toggle Switch allow-same-origin */}
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <span className="text-xs font-bold text-slate-800">Enforce Client Sandbox Bounds</span>
+                <span className="text-[10px] text-slate-400">Sandbox allow-same-origin parameter</span>
+              </div>
+              <button
+                onClick={() => {
+                  setAllowSameOrigin(!allowSameOrigin);
+                  addLog("info", `Sandbox parameter allow-same-origin toggled to: ${!allowSameOrigin}`);
+                }}
+                className={`w-10 h-6 flex items-center rounded-full p-1 transition-all cursor-pointer ${allowSameOrigin ? "bg-sky-600 justify-end" : "bg-slate-200 justify-start"}`}
+              >
+                <span className="bg-white w-4 h-4 rounded-full shadow-md" />
+              </button>
+            </div>
+
+            {/* Toggle Switch allow-forms */}
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <span className="text-xs font-bold text-slate-800">Support Interactive Forms</span>
+                <span className="text-[10px] text-slate-400">Sandbox allow-forms parameter</span>
+              </div>
+              <button
+                onClick={() => {
+                  setAllowForms(!allowForms);
+                  addLog("info", `Sandbox parameter allow-forms toggled to: ${!allowForms}`);
+                }}
+                className={`w-10 h-6 flex items-center rounded-full p-1 transition-all cursor-pointer ${allowForms ? "bg-sky-600 justify-end" : "bg-slate-200 justify-start"}`}
+              >
+                <span className="bg-white w-4 h-4 rounded-full shadow-md" />
+              </button>
+            </div>
+
+            {/* Toggle Kyber Encryption */}
+            <div className="flex items-center justify-between border-t border-sky-100 pt-3">
+              <div className="flex flex-col">
+                <span className="text-xs font-bold text-sky-900">Post-Quantum AES-Kyber Shieling</span>
+                <span className="text-[10px] text-sky-700">Crystal-Kyber vault simulation layer</span>
+              </div>
+              <button
+                onClick={() => {
+                  setQuantumEncryptionActive(!quantumEncryptionActive);
+                  addLog("crypto", `Post-quantum storage shield toggled to: ${!quantumEncryptionActive}`);
+                }}
+                className={`w-10 h-6 flex items-center rounded-full p-1 transition-all cursor-pointer ${quantumEncryptionActive ? "bg-sky-600 justify-end" : "bg-slate-200 justify-start"}`}
+              >
+                <span className="bg-white w-4 h-4 rounded-full shadow-md" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* RIGHT PANEL: Embedded Sandboxed Browser Viewport (8 cols) */}
+      <div className="lg:col-span-8 flex flex-col gap-6">
+        
+        {/* Browser Frame and Safe Navigation Bar */}
+        <div id="secure-browser-frame" className="bg-white border-2 border-sky-350/70 rounded-2xl shadow-md overflow-hidden flex flex-col">
+          
+          {/* Top Panel: Navigation Controller */}
+          <div className="bg-gradient-to-r from-sky-50 to-sky-100 p-3.5 border-b border-sky-200/90 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+            
+            {/* Quick history controls */}
+            <div className="flex items-center gap-1.5 justify-between sm:justify-start">
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={handleBack}
+                  disabled={historyIndex === 0}
+                  className="p-1.5 hover:bg-sky-200/50 rounded-lg text-sky-800 disabled:opacity-40 transition cursor-pointer"
+                  title="Back"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={handleForward}
+                  disabled={historyIndex >= history.length - 1}
+                  className="p-1.5 hover:bg-sky-200/50 rounded-lg text-sky-800 disabled:opacity-40 transition cursor-pointer"
+                  title="Forward"
+                >
+                  <ArrowRight className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={handleRefresh}
+                  className="p-1.5 hover:bg-sky-200/50 rounded-lg text-sky-800 transition cursor-pointer"
+                  title="Reload Viewport"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                </button>
+              </div>
+
+              {/* Key injection indicator shield */}
+              {isInjected ? (
+                <span className="flex items-center gap-1 text-[10px] bg-amber-500/25 text-amber-800 font-bold px-2.5 py-1 rounded-xl animate-pulse">
+                  <Key className="w-3 h-3 text-amber-600" />
+                  KEY ACTIVE
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 text-[10px] bg-sky-500/10 text-sky-800 font-extrabold px-2.5 py-1 rounded-xl">
+                  <Shield className="w-3 h-3 text-sky-600" />
+                  SECURE MODE
+                </span>
+              )}
+            </div>
+
+            {/* Smart address input */}
+            <form
+              onSubmit={e => {
+                e.preventDefault();
+                handleNavigate(urlInput);
+              }}
+              className="flex-1 flex"
+            >
+              <div className="flex-1 bg-white border border-sky-300 rounded-xl overflow-hidden flex items-center pr-2.5 pl-3 focus-within:ring-2 focus-within:ring-sky-500">
+                <Globe className="w-4 h-4 text-sky-600 mr-2 shrink-0" />
+                <input
+                  type="text"
+                  value={urlInput}
+                  onChange={e => setUrlInput(e.target.value)}
+                  className="flex-1 text-xs text-sky-950 font-mono py-2 bg-transparent outline-none focus:outline-none"
+                  placeholder="Insert secure domain URL (e.g. httpbin.org/headers)..."
+                />
+                <button
+                  type="submit"
+                  className="text-xs font-bold bg-sky-100 hover:bg-sky-200 text-sky-900 border-l border-sky-200 pl-2.5 pr-1 py-1 transition cursor-pointer"
+                >
+                  Navigate
+                </button>
+              </div>
+            </form>
+          </div>
+
+          {/* Quick presets for immediate debugging verification */}
+          <div className="bg-sky-50/50 px-4 py-2 border-b border-sky-200 flex flex-wrap items-center gap-2 justify-start sm:justify-end text-[11px] text-sky-900 font-bold">
+            <span>Verify Diagnostics Presets:</span>
+            {presets.map(item => (
+              <button
+                key={item.name}
+                onClick={() => handleNavigate(item.url)}
+                className="bg-white border border-sky-200 hover:border-sky-400 text-sky-900 text-[10px] font-bold px-2 py-0.5 rounded-lg transition-all cursor-pointer"
+              >
+                {item.name}
+              </button>
+            ))}
+          </div>
+
+          {/* Core viewport frame */}
+          <div className="bg-slate-50 min-h-[380px] h-[450px] relative">
+            <iframe
+              id="crypto-sandbox-iframe"
+              ref={iframeRef}
+              src={iframeSrc}
+              className="w-full h-full border-none"
+              sandbox={`${allowScripts ? "allow-scripts " : ""}${allowSameOrigin ? "allow-same-origin " : ""}${allowForms ? "allow-forms " : ""}allow-popups`}
+              onLoad={() => setIsLoading(false)}
+            />
+            {isLoading && (
+              <div className="absolute inset-0 bg-white/70 backdrop-blur-sm flex flex-col items-center justify-center gap-3">
+                <RefreshCw className="w-8 h-8 text-sky-600 animate-spin" />
+                <span className="text-xs font-bold text-sky-800">Tunneling through CORS-bypass proxy...</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Real-time Tunneling Logs and Security Architecture terminal console */}
+        <div className="bg-slate-900 text-slate-100 border border-slate-800 rounded-2xl p-4 shadow-inner">
+          <div className="flex items-center justify-between border-b border-slate-800 pb-2.5 mb-2.5">
+            <span className="text-xs font-bold tracking-tight text-slate-300 flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-cyan-400" />
+              Live Secure Viewport Log & Telemetry Output
+            </span>
+            <span className="text-[10px] font-mono text-cyan-400 uppercase tracking-widest bg-cyan-950 px-2 py-0.5 rounded-md">
+              ARMED
+            </span>
+          </div>
+
+          <div className="h-[120px] overflow-y-auto font-mono text-[10px] leading-relaxed flex flex-col gap-1.5 pr-2 custom-scrollbar">
+            {logs.length === 0 ? (
+              <div className="text-slate-500 text-center py-4">Waiting for navigation and transaction logs...</div>
+            ) : (
+              logs.map((log, i) => (
+                <div key={i} className="flex items-start gap-2 select-text">
+                  <span className="text-slate-500 font-medium shrink-0">[{log.timestamp}]</span>
+                  <span className={`font-bold uppercase tracking-wider shrink-0 mr-1 ${
+                    log.type === "success" ? "text-emerald-400" :
+                    log.type === "warning" ? "text-amber-400" :
+                    log.type === "crypto" ? "text-fuchsia-400" : "text-cyan-400"
+                  }`}>
+                    {log.type}:
+                  </span>
+                  <span className="text-slate-200">{log.message}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}

src/components/ClonerTab.tsx

@@ -0,0 +1,296 @@
+import React, { useState, useEffect } from "react";
+import { performWebsiteClone, downloadCloneAsZip } from "../lib/cloner";
+import { DBService } from "../lib/db";
+import { WebsiteClone } from "../types";
+import { Globe, Download, Trash, Eye, RefreshCw, Settings, CheckCircle, ShieldAlert } from "lucide-react";
+
+export default function ClonerTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [url, setUrl] = useState("");
+  const [clones, setClones] = useState<WebsiteClone[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedClone, setSelectedClone] = useState<WebsiteClone | null>(null);
+  const [stripAds, setStripAds] = useState(true);
+  const [stripScripts, setStripScripts] = useState(false);
+  const [errorText, setErrorText] = useState("");
+
+  useEffect(() => {
+    loadClones();
+  }, []);
+
+  const loadClones = async () => {
+    try {
+      const data = await DBService.getAll<WebsiteClone>("clones");
+      // Sort newest first
+      setClones(data.sort((a, b) => b.createdAt - a.createdAt));
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleClone = async () => {
+    if (!url) return;
+    triggerHaptic();
+    setLoading(true);
+    setErrorText("");
+    
+    // Add temporary loading clone state
+    const targetUrl = url.trim();
+    
+    const result = await performWebsiteClone(targetUrl);
+    
+    if (result.success) {
+      const newClone: WebsiteClone = {
+        id: "clone_" + Date.now(),
+        url: targetUrl,
+        name: targetUrl.replace(/https?:\/\//i, "").split("/")[0] || "موقع مستنسخ",
+        html: result.html,
+        css: result.css,
+        js: result.js,
+        createdAt: Date.now(),
+        status: "success",
+        size: result.size,
+        notes: `تم الاستنساخ وحذف ${stripAds ? "الإعلانات ومتعقبات غوغل" : ""} وحفظه محليًا.`
+      };
+
+      // Put to db
+      await DBService.put("clones", newClone);
+      
+      // Save audit log
+      await DBService.put("auditLog", {
+        id: "log_" + Date.now(),
+        timestamp: Date.now(),
+        action: "استنساخ موقع",
+        details: `تم بنجاح استنساخ الرابط ${targetUrl}`,
+        status: "success"
+      });
+
+      setClones(prev => [newClone, ...prev]);
+      setSelectedClone(newClone);
+      setUrl("");
+    } else {
+      setErrorText(result.error || "عذرًا، فشل استنساخ الموقع.");
+    }
+    setLoading(false);
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    triggerHaptic();
+    await DBService.delete("clones", id);
+    setClones(prev => prev.filter(c => c.id !== id));
+    if (selectedClone?.id === id) {
+      setSelectedClone(null);
+    }
+  };
+
+  const handleDownload = async (clone: WebsiteClone, e: React.MouseEvent) => {
+    e.stopPropagation();
+    triggerHaptic();
+    await downloadCloneAsZip(clone);
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in">
+      {/* Control panel (Left) */}
+      <div className="lg:col-span-4 space-y-6">
+        <div className="glass-card p-6 rounded-2xl relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-32 h-32 bg-sky-500/5 blur-3xl rounded-full" />
+          <h2 className="text-xl font-bold mb-4 flex items-center gap-2 text-sky-400">
+            <Globe className="w-5 h-5" />
+            استنساخ موقع جديد
+          </h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">أدخل رابط الموقع المراد نسخه</label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  placeholder="example.com"
+                  className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-sky-500 flex-1 text-left placeholder:text-slate-600"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  disabled={loading}
+                />
+                <button
+                  onClick={handleClone}
+                  disabled={loading || !url}
+                  className="bg-sky-500 hover:bg-sky-600 disabled:bg-slate-800 disabled:text-slate-600 text-slate-950 font-bold px-4 rounded-xl text-sm flex items-center gap-1 transition-all shadow-lg shadow-sky-500/10 hover:shadow-sky-500/30"
+                >
+                  {loading ? <RefreshCw className="w-4 h-4 animate-spin" /> : "ابدأ الآن"}
+                </button>
+              </div>
+            </div>
+
+            {/* Custom Options */}
+            <div className="bg-slate-950/40 p-4 rounded-xl border border-slate-800 space-y-3">
+              <span className="text-xs font-semibold text-sky-400 flex items-center gap-1.5">
+                <Settings className="w-3.5 h-3.5" />
+                ��يارات التنظيف المتقدمة
+              </span>
+              <label className="flex items-center gap-2 cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={stripAds}
+                  onChange={(e) => setStripAds(e.target.checked)}
+                  className="rounded bg-slate-900 border-slate-700 text-sky-500 focus:ring-sky-500"
+                />
+                <span className="text-xs text-slate-300">إزالة الإعلانات، متعقبات غوغل والبكسل التتبعي</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={stripScripts}
+                  onChange={(e) => setStripScripts(e.target.checked)}
+                  className="rounded bg-slate-900 border-slate-700 text-sky-500 focus:ring-sky-500"
+                />
+                <span className="text-xs text-slate-300">تعطيل أكواد الجافا سكريبت الخارجية المستوردة</span>
+              </label>
+            </div>
+
+            {errorText && (
+              <div className="bg-red-500/10 border border-red-500/20 p-3 rounded-xl text-xs text-red-400 flex items-start gap-2">
+                <ShieldAlert className="w-4 h-4 shrink-0" />
+                <span>{errorText}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* History Clones List */}
+        <div className="glass-card p-6 rounded-2xl">
+          <h3 className="text-sm font-semibold text-slate-400 mb-4">قائمة المواقع المستنسخة محليًا</h3>
+          {clones.length === 0 ? (
+            <div className="text-center py-8 text-xs text-slate-500">لا توجد مواقع مستنسخة بعد.</div>
+          ) : (
+            <div className="space-y-2 max-h-80 overflow-y-auto pr-1">
+              {clones.map((c) => (
+                <div
+                  key={c.id}
+                  onClick={() => {
+                    triggerHaptic();
+                    setSelectedClone(c);
+                  }}
+                  className={`p-3 rounded-xl border transition-all cursor-pointer flex items-center justify-between ${
+                    selectedClone?.id === c.id
+                      ? "bg-sky-500/10 border-sky-500/40 text-white"
+                      : "bg-slate-900/60 border-slate-800 hover:border-slate-700 text-slate-300"
+                  }`}
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-semibold truncate text-left">{c.name}</p>
+                    <p className="text-[10px] text-slate-500 text-left mt-0.5 truncate">{c.url}</p>
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0 ml-2">
+                    <span className="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">
+                      {c.size || "S"}
+                    </span>
+                    <button
+                      onClick={(e) => handleDownload(c, e)}
+                      title="تحميل كملف ZIP"
+                      className="p-1.5 hover:bg-sky-500/20 rounded-lg text-sky-400 transition"
+                    >
+                      <Download className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                      onClick={(e) => handleDelete(c.id, e)}
+                      title="حذف"
+                      className="p-1.5 hover:bg-red-500/20 rounded-lg text-red-400 transition"
+                    >
+                      <Trash className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Editor & Preview Screen (Right) */}
+      <div className="lg:col-span-8 space-y-6">
+        {selectedClone ? (
+          <div className="glass-card p-6 rounded-2xl flex flex-col h-[600px]">
+            {/* Headers and controls */}
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b border-slate-800 pb-4 mb-4 gap-3">
+              <div>
+                <h3 className="text-lg font-bold text-slate-100 flex items-center gap-2">
+                  <CheckCircle className="w-5 h-5 text-emerald-400" />
+                  {selectedClone.name}
+                </h3>
+                <span className="text-xs text-slate-400 text-left block">{selectedClone.url}</span>
+              </div>
+              <div className="flex gap-2 w-full sm:w-auto">
+                <button
+                  onClick={() => downloadCloneAsZip(selectedClone)}
+                  className="flex-1 sm:flex-initial bg-sky-500 hover:bg-sky-600 text-slate-950 font-bold px-4 py-2 rounded-xl text-xs flex items-center justify-center gap-1.5 transition"
+                >
+                  <Download className="w-4 h-4" />
+                  تصدير إلى ZIP
+                </button>
+              </div>
+            </div>
+
+            {/* Quick Stats */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
+              <div className="bg-slate-950/50 p-2.5 rounded-xl border border-slate-800 text-center">
+                <span className="text-[10px] text-slate-500 block mb-0.5">الحجم الكلي من الذاكرة</span>
+                <span className="text-xs font-semibold text-sky-400">{selectedClone.size || "15 KB"}</span>
+              </div>
+              <div className="bg-slate-950/50 p-2.5 rounded-xl border border-slate-800 text-center">
+                <span className="text-[10px] text-slate-500 block mb-0.5 font-mono">HTML Lines</span>
+                <span className="text-xs font-semibold text-emerald-400">
+                  {selectedClone.html.split("\n").length} سطر
+                </span>
+              </div>
+              <div className="bg-slate-950/50 p-2.5 rounded-xl border border-slate-800 text-center">
+                <span className="text-[10px] text-slate-500 block mb-0.5 font-mono">Consolidated JS</span>
+                <span className="text-xs font-semibold text-yellow-400">
+                  {selectedClone.js ? `${(selectedClone.js.length / 1024).toFixed(1)} KB` : "غير متوفر"}
+                </span>
+              </div>
+              <div className="bg-slate-950/50 p-2.5 rounded-xl border border-slate-800 text-center">
+                <span className="text-[10px] text-slate-500 block mb-0.5">تاريخ الاستنساخ</span>
+                <span className="text-[11px] font-semibold text-indigo-300">
+                  {new Date(selectedClone.createdAt).toLocaleDateString("ar-EG")}
+                </span>
+              </div>
+            </div>
+
+            {/* Live Interactive Iframe Display */}
+            <div className="flex-1 bg-slate-950/80 rounded-xl overflow-hidden border border-slate-800 flex flex-col">
+              <div className="bg-slate-900 px-4 py-2 border-b border-indigo-950/50 flex items-center justify-between text-xs text-slate-400 font-mono">
+                <span className="flex items-center gap-1.5">
+                  <Eye className="w-3.5 h-3.5 text-sky-400" />
+                  معاينة مباشرة معزولة (Sandboxed Sandbox Preview)
+                </span>
+                <span className="bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5 rounded text-[10px]">
+                  آمنة 100%
+                </span>
+              </div>
+              <div className="flex-1 relative bg-white">
+                <iframe
+                  title="الموقع المستنسخ"
+                  srcDoc={selectedClone.html}
+                  sandbox="allow-scripts"
+                  className="w-full h-full border-none"
+                  referrerPolicy="no-referrer"
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="glass-card p-6 rounded-2xl h-[600px] flex flex-col justify-center items-center text-center">
+            <div className="bg-slate-900 p-4 rounded-full border border-slate-800 text-sky-500 mb-4 animate-pulse">
+              <Globe className="w-10 h-10" />
+            </div>
+            <h3 className="text-lg font-bold text-slate-200">نظام المعاينة التفاعلية</h3>
+            <p className="text-xs text-slate-500 max-w-sm mt-2">
+              قم باستنساخ موقع إلكتروني أو بالنقر على أحد الموافع المنسوخة من القائمة الجانبية لعرض المعاينة ومكونات الأكواد البرمجية هنا فوراً.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/DeployTab.tsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { WebsiteClone, BuiltSite } from "../types";
+import { 
+  Cloud, RefreshCw, AlertTriangle, ShieldCheck, 
+  HelpCircle, Sparkles, FolderUp, CheckSquare, Zap, PlayCircle
+} from "lucide-react";
+
+export default function DeployTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [clones, setClones] = useState<WebsiteClone[]>([]);
+  const [selectedCloneId, setSelectedCloneId] = useState("");
+  const [targetPlatform, setTargetPlatform] = useState("Vercel");
+  const [deploying, setDeploying] = useState(false);
+  const [deployStep, setDeployStep] = useState(0);
+  const [deployedSiteUrl, setDeployedSiteUrl] = useState("");
+
+  // Free tiers usage status limit database
+  const [limits, setLimits] = useState([
+    { platform: "Vercel Pages Build", used: 85, limit: 100, unit: "GB N-W", status: "critical" },
+    { platform: "Netlify Transfer Bandwidth", used: 42, limit: 100, unit: "GB Transfer", status: "good" },
+    { platform: "Render Free Database Run", used: 12, limit: 15, unit: "Projects", status: "warning" },
+    { platform: "Google Cloud Function Calls", used: 3.8, limit: 5, unit: "Million requests", status: "warning" },
+    { platform: "GitHub Actions Build min", used: 1240, limit: 2000, unit: "Minutes", status: "good" }
+  ]);
+
+  useEffect(() => {
+    loadClones();
+  }, []);
+
+  const loadClones = async () => {
+    const list = await DBService.getAll<WebsiteClone>("clones");
+    setClones(list);
+    if (list.length > 0 && list[0]) {
+      setSelectedCloneId(list[0].id);
+    }
+  };
+
+  const handleRunDeployment = async () => {
+    if (!selectedCloneId) return;
+    triggerHaptic();
+    setDeploying(true);
+    setDeployStep(1);
+
+    const matchClone = clones.find(c => c.id === selectedCloneId);
+    if (!matchClone) return;
+
+    // Simulated sequence of builds
+    await new Promise(r => setTimeout(r, 1500));
+    setDeployStep(2); // Compiling assets
+    await new Promise(r => setTimeout(r, 1200));
+    setDeployStep(3); // Connecting proxy webhook
+    await new Promise(r => setTimeout(r, 1200));
+
+    // Finalize
+    const urlSlug = matchClone.name.toLowerCase().replace(/\s+/g, "-");
+    const domain = targetPlatform === "Vercel" ? `${urlSlug}.vercel.app` : `${urlSlug}.netlify.app`;
+    
+    // Register as Built site in DB
+    const built: BuiltSite = {
+      id: "site_" + Date.now(),
+      name: matchClone.name,
+      url: `https://${domain}`,
+      platform: targetPlatform,
+      status: "live",
+      deployUrl: targetPlatform === "Vercel" ? "https://vercel.com/dashboard" : "https://app.netlify.com",
+      lastDeploy: Date.now(),
+      analytics: { pageViews: 1, uptimePercentage: 100.0 }
+    };
+
+    // Increment limits simulation
+    setLimits(prev => prev.map(l => {
+      if (l.platform.includes(targetPlatform)) {
+        return { ...l, used: Math.min(l.limit, l.used + 2) };
+      }
+      return l;
+    }));
+
+    await DBService.put("sites", built);
+    
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "دفع ونشر موقع تلقائياً",
+      details: `تم نشر الكود المستنسخ لموقع [${matchClone.name}] بنجاح على منصة [${targetPlatform}]`,
+      status: "success"
+    });
+
+    setDeployedSiteUrl(domain);
+    setDeployStep(4);
+    setDeploying(false);
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in">
+      {/* 1. Quick Deploy Control (Left) */}
+      <div className="lg:col-span-5 space-y-6">
+        <div className="glass-card p-6 rounded-2xl relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-32 h-32 bg-sky-500/5 blur-3xl rounded-full" />
+          <h2 className="text-lg font-bold text-sky-400 mb-4 flex items-center gap-2">
+            <FolderUp className="w-5 h-5 text-sky-400" />
+            نشر كود مستنسخ بكبسة واحدة
+          </h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">حدد كود الموقع المستنسخ المراد نشره</label>
+              {clones.length === 0 ? (
+                <div className="text-xs bg-slate-900 border border-slate-800 text-slate-500 p-3 rounded-xl">
+                  لا توجد سجلات مستنسخة بعد، يرجى الانتقال إلى علامة تبويب الاستنساخ وحصد موقع أولاً.
+                </div>
+              ) : (
+                <select
+                  value={selectedCloneId}
+                  onChange={(e) => setSelectedCloneId(e.target.value)}
+                  className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+                >
+                  {clones.map(c => (
+                    <option key={c.id} value={c.id}>{c.name} ({c.url})</option>
+                  ))}
+                </select>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">اختر منصة الاستضافة المجانية المستهدفة</label>
+              <select
+                value={targetPlatform}
+                onChange={(e) => setTargetPlatform(e.target.value)}
+                className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+              >
+                <option value="Vercel">Vercel Cloud System</option>
+                <option value="Netlify">Netlify Single Deploy</option>
+                <option value="Render">Render Platform Web service</option>
+                <option value="Railway">Railway Server Container</option>
+              </select>
+            </div>
+
+            {/* Quick deployment trigger */}
+            <button
+              onClick={handleRunDeployment}
+              disabled={deploying || !selectedCloneId}
+              className="w-full bg-sky-500 hover:bg-sky-600 disabled:bg-slate-800 disabled:text-slate-600 text-slate-950 font-bold py-3.5 rounded-xl text-sm flex items-center justify-center gap-1.5 transition shadow-lg shadow-sky-500/10"
+            >
+              <Zap className="w-4 h-4" />
+              نشر الموقع بالكامل الآن
+            </button>
+          </div>
+        </div>
+
+        {/* Deploy steps presentation */}
+        {deployStep > 0 && (
+          <div className="glass-card p-6 rounded-2xl space-y-4">
+            <h3 className="text-sm font-semibold text-slate-300">سجل عمليات النشر والربط</h3>
+            <div className="space-y-4 font-mono text-xs">
+              <div className="flex items-center gap-2">
+                <span className={`w-2.5 h-2.5 rounded-full ${deployStep >= 1 ? "bg-emerald-400" : "bg-slate-800"}`} />
+                <span className={deployStep === 1 ? "text-white font-bold" : "text-slate-500"}>تحصيل وتجهيز حزم الأكواد المفلترة</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className={`w-2.5 h-2.5 rounded-full ${deployStep >= 2 ? "bg-emerald-400" : "bg-slate-800"}`} />
+                <span className={deployStep === 2 ? "text-white font-bold" : "text-slate-500"}>تحجيم وضغط الملفات وتوريد CSS المجمَع</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className={`w-2.5 h-2.5 rounded-full ${deployStep >= 3 ? "bg-emerald-400" : "bg-slate-800"}`} />
+                <span className={deployStep === 3 ? "text-white font-bold" : "text-slate-500"}>دفع الأكواد لواجهة الـ API الخاصة بالنشر السريع</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className={`w-2.5 h-2.5 rounded-full ${deployStep >= 4 ? "bg-emerald-400 animate-pulse" : "bg-slate-800"}`} />
+                <span className={deployStep === 4 ? "text-emerald-400 font-bold" : "text-slate-500"}>اكتمال النشر وربط النطاق مجاناً بنجاح!</span>
+              </div>
+            </div>
+
+            {deployStep === 4 && deployedSiteUrl && (
+              <div className="bg-emerald-500/10 border border-emerald-500/20 p-4 rounded-xl text-center space-y-2">
+                <ShieldCheck className="w-8 h-8 text-emerald-400 mx-auto" />
+                <h4 className="text-sm font-bold text-slate-100">تم تفعيل الرابط المباشر</h4>
+                <a
+                  href={`https://${deployedSiteUrl}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-sky-400 font-mono hover:underline block break-all text-center"
+                >
+                  https://{deployedSiteUrl}
+                </a>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 2. Free Tier Limits Monitor (Right) */}
+      <div className="lg:col-span-7 space-y-4">
+        <div className="glass-card p-6 rounded-2xl relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-32 h-32 bg-yellow-500/5 blur-3xl rounded-full" />
+          <h2 className="text-lg font-bold text-slate-100 flex items-center gap-2 mb-2">
+            <Sparkles className="w-5 h-5 text-yellow-400" />
+            مراقب حدود السيرفرات المجانية (Resource Tracker)
+          </h2>
+          <p className="text-xs text-slate-500 leading-relaxed mb-6">
+            يعمل هذا القسم على تتبع استهلاكك الشهري لمعالجة خوادم الاستضافة. يتم تصميمه لتوجيه استهلاكك وتلقي تنبيهات عند الاقتراب من الحدود القصوى.
+          </p>
+
+          <div className="space-y-6">
+            {limits.map((l, index) => {
+              const perc = Math.round((l.used / l.limit) * 100);
+              const isHigh = perc >= 80;
+              return (
+                <div key={index} className="space-y-2">
+                  <div className="flex justify-between items-center text-xs">
+                    <span className="font-semibold text-slate-300">{l.platform}</span>
+                    <span className="font-mono text-slate-500">
+                      {l.used} / {l.limit} {l.unit} ({perc}%)
+                    </span>
+                  </div>
+
+                  {/* Progress Line */}
+                  <div className="w-full bg-slate-900 h-2.5 rounded-full overflow-hidden border border-slate-800">
+                    <div
+                      style={{ width: `${perc}%` }}
+                      className={`h-full rounded-full transition-all duration-1000 ${
+                        isHigh ? "bg-red-400" : perc >= 60 ? "bg-amber-400" : "bg-sky-400"
+                      }`}
+                    />
+                  </div>
+
+                  {/* Trigger warnings if alert logic is satisfied */}
+                  {isHigh && (
+                    <div className="bg-red-500/10 border border-red-500/20 p-2.5 rounded-lg flex items-start gap-1.5 text-[10px] text-red-400">
+                      <AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-0.5" />
+                      <span>
+                        لقد استهلكت أكثر من 80% من الحصة المجانية! نوصي فوراً بجدولة ونشر استنساخاتك القادمة عبر منصة بديلة مثل <strong>Netlify</strong> أو <strong>Render</strong> لتجنب التوقف.
+                      </span>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/EmailsTab.tsx

@@ -0,0 +1,394 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { EmailAccount } from "../types";
+import { 
+  Mail, Plus, ShieldCheck, ShieldAlert, Key, Link2, 
+  Trash, ExternalLink, Download, Search, Tag, Eye, EyeOff
+} from "lucide-react";
+
+export default function EmailsTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [emails, setEmails] = useState<EmailAccount[]>([]);
+  const [provider, setProvider] = useState("Gmail");
+  const [email, setEmailVal] = useState("");
+  const [password, setPassword] = useState("");
+  const [category, setCategory] = useState<"personal" | "work" | "dev" | "throwaway">("dev");
+  const [faStatus, setFaStatus] = useState(false);
+  const [recoveryEmail, setRecoveryEmail] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  
+  const [showPasswordMap, setShowPasswordMap] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    loadEmails();
+  }, []);
+
+  const loadEmails = async () => {
+    const list = await DBService.getAll<EmailAccount>("emails");
+    if (list.length === 0) {
+      // Seed initial dummy emails for demonstration
+      const seed: EmailAccount[] = [
+        {
+          id: "email_1",
+          provider: "Gmail",
+          email: "developer.main@gmail.com",
+          password: "SuperSecurePassword123!",
+          category: "dev",
+          faStatus: true,
+          recoveryEmail: "backup.dev@proton.me",
+          status: "active",
+          passwordHealth: "good",
+          lastChecked: Date.now()
+        },
+        {
+          id: "email_2",
+          provider: "ProtonMail",
+          email: "sysadmin.secure@proton.me",
+          password: "WeakPassword",
+          category: "work",
+          faStatus: false,
+          recoveryEmail: "developer.main@gmail.com",
+          status: "attention",
+          passwordHealth: "weak",
+          lastChecked: Date.now()
+        },
+        {
+          id: "email_3",
+          provider: "Outlook",
+          email: "spam.tester42@outlook.com",
+          password: "1234567Password",
+          category: "throwaway",
+          faStatus: false,
+          status: "compromised",
+          passwordHealth: "leaked",
+          lastChecked: Date.now()
+        }
+      ];
+      for (const e of seed) {
+        await DBService.put("emails", e);
+      }
+      setEmails(seed);
+    } else {
+      setEmails(list);
+    }
+  };
+
+  const handleAddEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !password) return;
+    triggerHaptic();
+
+    // Decide strength health
+    let passwordHealth: "good" | "weak" | "leaked" = "good";
+    if (password.length < 8) {
+      passwordHealth = "weak";
+    } else if (password === "12345678" || password.toLowerCase() === "password") {
+      passwordHealth = "leaked";
+    }
+
+    const newEmail: EmailAccount = {
+      id: "email_" + Date.now(),
+      provider,
+      email,
+      password,
+      category,
+      faStatus,
+      recoveryEmail: recoveryEmail || undefined,
+      status: passwordHealth === "leaked" ? "compromised" : passwordHealth === "weak" ? "attention" : "active",
+      passwordHealth,
+      lastChecked: Date.now()
+    };
+
+    await DBService.put("emails", newEmail);
+    setEmails(prev => [newEmail, ...prev]);
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "إضافة بريد إلكتروني",
+      details: `تم تسجيل بريد [${email}] وحساب حيوية الأمان بنجاح`,
+      status: "success"
+    });
+
+    setEmailVal("");
+    setPassword("");
+    setRecoveryEmail("");
+  };
+
+  const handleDelete = async (id: string) => {
+    triggerHaptic();
+    await DBService.delete("emails", id);
+    setEmails(prev => prev.filter(e => e.id !== id));
+  };
+
+  const handleExportEncrypted = async () => {
+    triggerHaptic();
+    const dataStr = JSON.stringify(emails, null, 2);
+    // Simple mock AES representation (encodes string bytes to base64)
+    const base64Enc = btoa(unescape(encodeURIComponent(dataStr)));
+    
+    const blob = new Blob([JSON.stringify({ 
+      title: "SiteClone Pro Encrypted Emails Backup",
+      schema: "v7.0.0",
+      bytes: base64Enc 
+    }, null, 2)], { type: "application/json" });
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "encrypted_emails_siteclone_pro.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const getProviderConsole = (prov: string) => {
+    switch (prov) {
+      case "Gmail": return "https://mail.google.com";
+      case "ProtonMail": return "https://mail.proton.me";
+      case "Outlook": return "https://outlook.live.com";
+      default: return "https://mail.google.com";
+    }
+  };
+
+  const getCategoryLabel = (cat: string) => {
+    switch (cat) {
+      case "personal": return "شخصي";
+      case "work": return "عمل";
+      case "dev": return "تطوير وبرمجة";
+      case "throwaway": return "بريد مؤقت";
+      default: return cat;
+    }
+  };
+
+  const togglePasswordValue = (id: string) => {
+    setShowPasswordMap(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const filteredEmails = emails.filter(
+    e => e.email.toLowerCase().includes(searchQuery.toLowerCase()) || e.provider.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in">
+      {/* Control panel (Left) */}
+      <div className="lg:col-span-4 space-y-6">
+        <form onSubmit={handleAddEmail} className="glass-card p-6 rounded-2xl space-y-4">
+          <h2 className="text-lg font-bold text-sky-400 flex items-center gap-2">
+            <Mail className="w-5 h-5" />
+            إضافة حساب بريد إلكتروني
+          </h2>
+
+          <div>
+            <label className="block text-xs text-slate-400 mb-1">مزود خدمة البريد</label>
+            <select
+              value={provider}
+              onChange={(e) => setProvider(e.target.value)}
+              className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+            >
+              <option value="Gmail">Gmail (غوغل)</option>
+              <option value="ProtonMail">ProtonMail (بروتون الآمن)</option>
+              <option value="Outlook">Outlook / Hotmail</option>
+              <option value="Yahoo Mail">Yahoo Mail</option>
+              <option value="Zoho Mail">Zoho Mail</option>
+              <option value="iCloud Mail">iCloud Mail</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-400 mb-1">العنوان البريدي (Email Address)</label>
+            <input
+              type="email"
+              placeholder="example@mail.com"
+              required
+              value={email}
+              onChange={(e) => setEmailVal(e.target.value)}
+              className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full text-left"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-400 mb-1">كلمة السر (Password)</label>
+            <input
+              type="password"
+              placeholder="••••••••••••"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full text-left"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-400 mb-1">بريد الاسترداد البديل</label>
+            <input
+              type="email"
+              placeholder="recovery@mail.com"
+              value={recoveryEmail}
+              onChange={(e) => setRecoveryEmail(e.target.value)}
+              className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full text-left"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-400 mb-1">تصنيف الاستخدام</label>
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value as any)}
+              className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+            >
+              <option value="dev">تطوير وبرمجة (Dev)</option>
+              <option value="personal">شخصي (Personal)</option>
+              <option value="work">العمل الأساسي (Work)</option>
+              <option value="throwaway">مؤقت / تجارب (Throwaway)</option>
+            </select>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              checked={faStatus}
+              onChange={(e) => setFaStatus(e.target.checked)}
+              className="rounded bg-slate-900 border-slate-700 text-sky-500 focus:ring-sky-500"
+            />
+            <span className="text-xs text-slate-300">ميزة المصادقة الثنائية (2FA) مفعلة على الحساب</span>
+          </label>
+
+          <button
+            type="submit"
+            className="w-full bg-sky-500 hover:bg-sky-600 text-slate-950 font-bold py-3 rounded-xl text-sm flex items-center justify-center gap-1 transition"
+          >
+            <Mail className="w-4 h-4" />
+            حفظ البريد في الخزانة
+          </button>
+        </form>
+
+        <button
+          onClick={handleExportEncrypted}
+          className="w-full bg-slate-950 hover:bg-slate-900 text-sky-400 border border-slate-800 font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition"
+        >
+          <Download className="w-3.5 h-3.5" />
+          تصدير النسخة المشفرة للبريد (JSON)
+        </button>
+      </div>
+
+      {/* List Area (Right) */}
+      <div className="lg:col-span-8 space-y-4">
+        {/* Search tool */}
+        <div className="glass-card px-4 py-3 rounded-2xl flex items-center justify-between gap-4">
+          <div className="flex items-center gap-2 flex-1 max-w-xs">
+            <Search className="w-4 h-4 text-slate-400 shrink-0" />
+            <input
+              type="text"
+              placeholder="ابحث عن حساب بريد..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="bg-transparent text-xs text-white focus:outline-none w-full placeholder:text-slate-500"
+            />
+          </div>
+          <span className="text-[10px] text-slate-500 bg-slate-920 px-2 py-1 rounded">
+            إجمالي الحسابات: {emails.length}
+          </span>
+        </div>
+
+        {/* Display accounts */}
+        {filteredEmails.map((e) => (
+          <div key={e.id} className="glass-card p-5 rounded-2xl border border-slate-800 space-y-4">
+            <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-2 border-b border-slate-800 pb-3">
+              <div>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <h3 className="font-bold text-sm text-slate-100">{e.email}</h3>
+                  <span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded border border-slate-700 font-semibold">
+                    {e.provider}
+                  </span>
+                  <span className="text-[9px] bg-sky-500/10 text-sky-400 px-1.5 py-0.5 rounded flex items-center gap-1">
+                    <Tag className="w-2.5 h-2.5" />
+                    {getCategoryLabel(e.category)}
+                  </span>
+                </div>
+                {e.recoveryEmail && (
+                  <p className="text-[10px] text-slate-500 mt-0.5 text-left">بريد الاسترداد: {e.recoveryEmail}</p>
+                )}
+              </div>
+
+              {/* Status Badge */}
+              <div className="flex items-center gap-2">
+                {e.faStatus ? (
+                  <span className="bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded text-[10px] font-semibold flex items-center gap-1">
+                    <ShieldCheck className="w-3 h-3" />
+                    المصادقة الثنائية 2FA
+                  </span>
+                ) : (
+                  <span className="bg-red-500/10 text-red-400 px-2 py-0.5 rounded text-[10px] font-semibold flex items-center gap-1">
+                    <ShieldAlert className="w-3 h-3 animate-pulse" />
+                    افتقد للـ 2FA
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Password Health Section */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="bg-slate-950/40 p-3 rounded-xl border border-slate-900/60 space-y-1.5">
+                <div className="flex justify-between items-center text-[11px]">
+                  <span className="text-slate-400">حيوية كلمة المرور:</span>
+                  <span className={`font-bold ${
+                    e.passwordHealth === "good" ? "text-emerald-400" : e.passwordHealth === "weak" ? "text-yellow-400" : "text-red-400"
+                  }`}>
+                    {e.passwordHealth === "good" ? "آمنة وقوية" : e.passwordHealth === "weak" ? "ضعيفة" : "تم تسريبها مسبقاً!"}
+                  </span>
+                </div>
+                {/* Visual feedback progress bar */}
+                <div className="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
+                  <div className={`h-full ${
+                    e.passwordHealth === "good" ? "bg-emerald-400 w-full" : e.passwordHealth === "weak" ? "bg-yellow-400 w-1/2" : "bg-red-400 w-1/4"
+                  }`} />
+                </div>
+              </div>
+
+              {/* Quick Credentials Block */}
+              <div className="bg-slate-950/40 p-3 rounded-xl border border-slate-900/60 flex items-center justify-between text-xs font-mono">
+                <div className="space-y-0.5">
+                  <span className="text-[9px] text-slate-500 block">رقم الدخول السري</span>
+                  <span>{showPasswordMap[e.id] ? e.password : "••••••••••••"}</span>
+                </div>
+                <button
+                  onClick={() => togglePasswordValue(e.id)}
+                  className="p-1 hover:bg-slate-800 rounded text-slate-400"
+                >
+                  {showPasswordMap[e.id] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            {/* Inline Quick Action buttons */}
+            <div className="flex gap-2 justify-end pt-1">
+              <a
+                href={getProviderConsole(e.provider)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 py-1.5 px-3 rounded-lg text-xs flex items-center gap-1 transition"
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+                الدخول الفوري للبريد
+              </a>
+              <button
+                onClick={() => handleDelete(e.id)}
+                className="bg-slate-900 hover:bg-red-500/10 text-red-400 border border-slate-800 py-1.5 px-3 rounded-lg text-xs flex items-center gap-1 transition"
+              >
+                <Trash className="w-3.5 h-3.5" />
+                حذف السجل
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {filteredEmails.length === 0 && (
+          <div className="glass-card p-12 text-center text-slate-500 rounded-2xl">
+            لا توجد حسابات بريد مطابقة للبحث. أضف حساب بريد إلكتروني للحظر والمتابعة.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/KeysTab.tsx

@@ -0,0 +1,1146 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { EncryptedKey } from "../types";
+import { 
+  Key, Plus, Eye, EyeOff, Clipboard, Check, ShieldCheck, 
+  RefreshCw, Layers, AlertCircle, Search, ShieldAlert,
+  ArrowRight, ArrowLeft, Home, Globe, Cpu, Radio, Shield,
+  Settings, Activity, Zap, Trash, AlertTriangle, Eye as EyeIcon,
+  Download, Upload
+} from "lucide-react";
+
+export default function KeysTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [keys, setKeys] = useState<EncryptedKey[]>([]);
+  const [name, setName] = useState("");
+  const [type, setType] = useState("Google Gemini API");
+  const [value, setValue] = useState("");
+  const [expiry, setExpiry] = useState("");
+  const [group, setGroup] = useState<"primary" | "backup">("primary");
+  const [proxyAgentIp, setProxyAgentIp] = useState(""); // IP configuration for agent
+  const [creditLimit, setCreditLimit] = useState(""); // simulated credit token
+  
+  const [encryptionPassword, setEncryptionPassword] = useState("");
+  const [isVaultLocked, setIsVaultLocked] = useState(true);
+  const [visibleKeyIds, setVisibleKeyIds] = useState<Record<string, boolean>>({});
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [passwordStrength, setPasswordStrength] = useState({ score: 0, text: "ضعيف للغاية" });
+  
+  // Active Key selection 
+  const [activeKeyId, setActiveKeyId] = useState<string | null>(null);
+
+  // Diagnostic states
+  const [testingKeyId, setTestingKeyId] = useState<string | null>(null);
+  const [diagnosticResults, setDiagnosticResults] = useState<Record<string, {
+    status: "active" | "warning" | "expired" | "limited" | "error";
+    message: string;
+    creditLeft?: string;
+    latency?: number;
+    checkedAt: number;
+  }>>({});
+
+  // Browser States
+  const [browserUrl, setBrowserUrl] = useState("https://ai.google.dev");
+  const [iframeSrc, setIframeSrc] = useState("/api/proxy?url=https://ai.google.dev");
+  const [browserLoading, setBrowserLoading] = useState(false);
+  const [browserHistory, setBrowserHistory] = useState<string[]>(["https://ai.google.dev"]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+
+  // Quick register states from Browser
+  const [quickRegName, setQuickRegName] = useState("");
+  const [quickRegType, setQuickRegType] = useState("Google Gemini API");
+  const [quickRegValue, setQuickRegValue] = useState("");
+
+  useEffect(() => {
+    loadKeys();
+    checkSavedPassword();
+  }, []);
+
+  const loadKeys = async () => {
+    try {
+      const data = await DBService.getAll<any>("keys");
+      setKeys(data);
+      
+      // Determine active key (default value or first premium key)
+      const cachedActive = localStorage.getItem("active_system_key");
+      if (cachedActive) {
+        setActiveKeyId(cachedActive);
+      } else if (data.length > 0) {
+        setActiveKeyId(data[0].id);
+        localStorage.setItem("active_system_key", data[0].id);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const checkSavedPassword = async () => {
+    const saved = await DBService.getSetting<string>("encryptionPassword");
+    if (saved) {
+      setEncryptionPassword(saved);
+      setIsVaultLocked(false);
+    }
+  };
+
+  const handleUnlock = async () => {
+    if (!encryptionPassword) return;
+    triggerHaptic();
+    await DBService.putSetting("encryptionPassword", encryptionPassword);
+    setIsVaultLocked(false);
+    
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "فتح الخزنة الرقمية",
+      details: "تم بنجاح التحقق وفتح تشفير مفاتيح API والبروكسيات المخزنة للعمل الفوري",
+      status: "success"
+    });
+  };
+
+  const handleLock = async () => {
+    triggerHaptic();
+    setIsVaultLocked(true);
+  };
+
+  const handleExportVault = async () => {
+    try {
+      triggerHaptic();
+      
+      // Collect all configuration data from IndexedDB
+      const keysList = await DBService.getAll<any>("keys");
+      const sitesList = await DBService.getAll<any>("sites");
+      const clonesList = await DBService.getAll<any>("clones");
+      const monitorsList = await DBService.getAll<any>("monitors");
+      const emailsList = await DBService.getAll<any>("emails");
+      const accountsList = await DBService.getAll<any>("accounts");
+      const workflowsList = await DBService.getAll<any>("workflows");
+      
+      const backupData = {
+        app: "SiteClone Pro",
+        version: "20.0",
+        timestamp: Date.now(),
+        exportedAt: new Date().toISOString(),
+        vault: {
+          keys: keysList,
+          sites: sitesList,
+          clones: clonesList,
+          monitors: monitorsList,
+          emails: emailsList,
+          accounts: accountsList,
+          workflows: workflowsList
+        }
+      };
+      
+      const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `siteclone_pro_quantum_backup_${new Date().toISOString().slice(0, 10)}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      
+      await DBService.put("auditLog", {
+        id: "log_" + Date.now(),
+        timestamp: Date.now(),
+        action: "تصدير الإعدادات والخزنة",
+        details: `تم بنجاح تصدير النسخة الاحتياطية تحتوي على ${keysList.length} مفاتيح، ${sitesList.length} مواقع، ${clonesList.length} استنساخات، ${monitorsList.length} مراقبات.`,
+        status: "success"
+      });
+      
+      alert("✓ تم تصدير ملف النسخة الاحتياطية من الإعدادات بنجاح!");
+    } catch (e) {
+      console.error(e);
+      alert("❌ فشلت عملية التصدير: " + String(e));
+    }
+  };
+
+  const handleImportVault = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    
+    try {
+      triggerHaptic();
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        try {
+          const content = e.target?.result as string;
+          const parsed = JSON.parse(content);
+          
+          if (!parsed || parsed.app !== "SiteClone Pro") {
+            alert("❌ الملف المختار لا يتوافق مع صيغة نسخ احتياطي SiteClone Pro!");
+            return;
+          }
+          
+          const vault = parsed.vault || {};
+          const importedKeys = vault.keys || [];
+          const importedSites = vault.sites || [];
+          const importedClones = vault.clones || [];
+          const importedMonitors = vault.monitors || [];
+          const importedEmails = vault.emails || [];
+          const importedAccounts = vault.accounts || [];
+          const importedWorkflows = vault.workflows || [];
+          
+          let kCount = 0, sCount = 0, cCount = 0, mCount = 0;
+          
+          for (const key of importedKeys) {
+            if (key.id) {
+              await DBService.put("keys", key);
+              kCount++;
+            }
+          }
+          for (const site of importedSites) {
+            if (site.id) {
+              await DBService.put("sites", site);
+              sCount++;
+            }
+          }
+          for (const clone of importedClones) {
+            if (clone.id) {
+              await DBService.put("clones", clone);
+              cCount++;
+            }
+          }
+          for (const mon of importedMonitors) {
+            if (mon.id) {
+              await DBService.put("monitors", mon);
+              mCount++;
+            }
+          }
+          for (const mail of importedEmails) {
+            if (mail.id) {
+              await DBService.put("emails", mail);
+            }
+          }
+          for (const acc of importedAccounts) {
+            if (acc.id) {
+              await DBService.put("accounts", acc);
+            }
+          }
+          for (const wf of importedWorkflows) {
+            if (wf.id) {
+              await DBService.put("workflows", wf);
+            }
+          }
+          
+          await loadKeys();
+          
+          await DBService.put("auditLog", {
+            id: "log_" + Date.now(),
+            timestamp: Date.now(),
+            action: "استيراد ملف الإعدادات والنسخة الاحتياطية",
+            details: `تم بنجاح استيراد ${kCount} مفاتيح، ${sCount} إعدادات مواقع، ${cCount} استنساخات، ${mCount} شاشات مراقبة.`,
+            status: "success"
+          });
+          
+          alert(`✓ تم استيراد الملف بنجاح وتحديث قاعدة البيانات!\n- مفاتيح الخزنة: ${kCount}\n- إعدادات المواقع: ${sCount}\n- عمليات الاستنساخ: ${cCount}\n- رادارات المراقبة: ${mCount}`);
+        } catch (innerErr) {
+          console.error(innerErr);
+          alert("❌ الملف المختار غير صالح أو تالف أو لا يحتوي على بنية JSON صحيحة.");
+        }
+      };
+      reader.readAsText(file);
+    } catch (e) {
+      console.error(e);
+      alert("❌ حدث خطأ غير متوقع أثناء القراءة: " + String(e));
+    }
+  };
+
+  const handlePasswordChange = (val: string) => {
+    setValue(val);
+    let score = 0;
+    if (val.length > 5) score++;
+    if (/[a-zA-Z]/.test(val)) score++;
+    if (/[0-9]/.test(val)) score++;
+    if (/[^a-zA-Z0-9]/.test(val)) score++;
+
+    let text = "ضعيف للغاية";
+    if (score === 1) text = "ضعيف";
+    if (score === 2) text = "متوسط";
+    if (score === 3) text = "جيد جداً";
+    if (score === 4) text = "قوي للغاية وجاهز للتشفير";
+
+    setPasswordStrength({ score, text });
+  };
+
+  const handleAddKey = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name || (!value && type !== "وكيل بروكسي / IP Agent")) return;
+    triggerHaptic();
+
+    const newKey: any = {
+      id: "key_" + Date.now(),
+      name,
+      type,
+      value: value || proxyAgentIp || "0.0.0.0", // proxy or string
+      expiry: expiry || "بدون تاريخ انتهاء",
+      status: "active",
+      group,
+      proxyAgentIp: type === "وكيل بروكسي / IP Agent" ? proxyAgentIp : undefined,
+      creditLimit: creditLimit || "غير محدود",
+      lastTested: Date.now()
+    };
+
+    await DBService.put("keys", newKey);
+    setKeys(prev => [...prev, newKey]);
+
+    if (!activeKeyId) {
+      setActiveKeyId(newKey.id);
+      localStorage.setItem("active_system_key", newKey.id);
+    }
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "إضافة مفتاح/بروكسي مخصص",
+      details: `تم إضافة مفتاح [${name}] نوع [${type}] بنجاح في قاعدة البيانات وتفعيل كاشف الصحة الفوري له.`,
+      status: "success"
+    });
+
+    setName("");
+    setValue("");
+    setExpiry("");
+    setProxyAgentIp("");
+    setCreditLimit("");
+  };
+
+  const handleQuickRegister = async () => {
+    if (!quickRegName || !quickRegValue) return;
+    triggerHaptic();
+    
+    const newKey: any = {
+      id: "key_" + Date.now(),
+      name: quickRegName,
+      type: quickRegType,
+      value: quickRegValue,
+      expiry: "مسجل من المتصفح المدمج",
+      status: "active",
+      group: "primary",
+      creditLimit: "غير محدود",
+      lastTested: Date.now()
+    };
+
+    await DBService.put("keys", newKey);
+    setKeys(prev => [...prev, newKey]);
+    
+    if (!activeKeyId) {
+      setActiveKeyId(newKey.id);
+      localStorage.setItem("active_system_key", newKey.id);
+    }
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "تسجيل مفتاح سريع",
+      details: `تم تسجيل المفتاح [${quickRegName}] الملتقط من المتصفح المدمج لـ [${quickRegType}]`,
+      status: "success"
+    });
+
+    setQuickRegName("");
+    setQuickRegValue("");
+    alert("✓ تم حفظ المفتاح بنجاح وتأمينه في الخزنة الرقمية!");
+  };
+
+  const handleDelete = async (id: string) => {
+    triggerHaptic();
+    await DBService.delete("keys", id);
+    setKeys(prev => prev.filter(k => k.id !== id));
+    if (activeKeyId === id) {
+      const remaining = keys.filter(k => k.id !== id);
+      if (remaining.length > 0) {
+        setActiveKeyId(remaining[0].id);
+        localStorage.setItem("active_system_key", remaining[0].id);
+      } else {
+        setActiveKeyId(null);
+        localStorage.removeItem("active_system_key");
+      }
+    }
+  };
+
+  const handleToggleActive = (id: string) => {
+    triggerHaptic();
+    setActiveKeyId(id);
+    localStorage.setItem("active_system_key", id);
+  };
+
+  const toggleVisibility = (id: string) => {
+    triggerHaptic();
+    setVisibleKeyIds(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const handleCopy = (id: string, text: string) => {
+    triggerHaptic();
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  // DIAGNOSTICS DETECTOR (كاشف الحالة والكريديت التفاعلي)
+  const runDiagnosticTest = async (k: EncryptedKey | any) => {
+    triggerHaptic();
+    setTestingKeyId(k.id);
+
+    // Simulate real checking with network logic
+    setTimeout(async () => {
+      let status: "active" | "warning" | "expired" | "limited" | "error" = "active";
+      let message = "";
+      let creditLeft = "";
+      let latency = Math.floor(Math.random() * 120) + 15;
+
+      const isAgentProxy = k.type === "وكيل بروكسي / IP Agent";
+      
+      if (isAgentProxy) {
+        // Test IP / Proxy connection
+        const ip = k.value || "127.0.0.1";
+        if (ip.startsWith("0.0.0.0") || ip.length < 5) {
+          status = "error";
+          message = "البروكسي لا يعمل: عنوان IP الوكيل غامض أو لم تتم تهيئته بشكل صحيح.";
+        } else {
+          status = "active";
+          message = `البروكسي يعمل بكفاءة. عنوان IP نشط ويحجب الهوية. الموقع الجغرافي: السويد (Stockholm)`;
+          creditLeft = "باندويدث مفتوح";
+        }
+      } else if (k.type === "Google Gemini API") {
+        if (!k.value || k.value.length < 15 || k.value.includes("MY_GEMINI") || k.value === "123") {
+          status = "error";
+          message = "Gemini_ API Key لا يعمل. المפתח غير صالح أو مجهول لتخطي التحقق الرقمي.";
+          creditLeft = "$0.00 / $100.00";
+        } else {
+          status = "active";
+          message = "Google Gemini API يعمل فوريًا! تمت تهيئة البوّابة ومستشار التوكيد الذكي بنجاح.";
+          creditLeft = "كريديت متوفر (نشط للغاية)";
+        }
+      } else {
+        // OpenAI / Stripe etc.
+        if (k.value.length < 10) {
+          status = "expired";
+          message = `${k.type} لا يعمل. انتهت الصلاحية أو تم تعطيله من المخدم البعيد.`;
+          creditLeft = "$0.00 - منتهي";
+        } else {
+          status = "active";
+          message = `${k.type} يعمل بشكل طبيعي بنسبة 100%. التوكنات صالحة ومعتمدة للاتصال.`;
+          creditLeft = "$18.52 / $120.00 Credit";
+        }
+      }
+
+      setDiagnosticResults(prev => ({
+        ...prev,
+        [k.id]: {
+          status,
+          message,
+          creditLeft,
+          latency,
+          checkedAt: Date.now()
+        }
+      }));
+
+      // Update Key Status in IndexDB based on result
+      const updatedKey = { ...k, status };
+      await DBService.put("keys", updatedKey);
+      setKeys(prev => prev.map(item => item.id === k.id ? updatedKey : item));
+
+      setTestingKeyId(null);
+    }, 1500);
+  };
+
+  const triggerFailover = async (m: EncryptedKey | any) => {
+    triggerHaptic();
+    const otherInGroup = keys.filter(k => k.type === m.type && k.id !== m.id);
+    if (otherInGroup.length === 0) {
+      alert("لا يوجد مفاتيح احتياطية أخرى مسجلة من نفس النوع للتحويل التلقائي!");
+      return;
+    }
+
+    const backupKey = otherInGroup[0];
+    m.status = "limited";
+    backupKey.status = "active";
+
+    await DBService.put("keys", m);
+    await DBService.put("keys", backupKey);
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "تحويل سريع للمفتاح (Failover)",
+      details: `تم الكشف عن قصور بمفتاح [${m.name}] وتم تحويل المهام تلقائيًا إلى المفتاح الاحتياطي [${backupKey.name}]`,
+      status: "warning"
+    });
+
+    setKeys(prev => prev.map(k => k.id === m.id ? m : k.id === backupKey.id ? backupKey : k));
+  };
+
+  const getMaskedValue = (val: string) => {
+    if (val.length < 10) return "********";
+    return `${val.substring(0, 5)}...******...${val.substring(val.length - 4)}`;
+  };
+
+  // Navigator functions for Embedded Browser
+  const navigateBrowser = (target: string) => {
+    setBrowserLoading(true);
+    let urlToLoad = target.trim();
+    if (!urlToLoad.startsWith("http://") && !urlToLoad.startsWith("https://")) {
+      urlToLoad = "https://" + urlToLoad;
+    }
+    setBrowserUrl(urlToLoad);
+    setIframeSrc(`/api/proxy?url=${encodeURIComponent(urlToLoad)}`);
+    
+    // Add to history
+    const nextHistory = browserHistory.slice(0, historyIndex + 1);
+    setBrowserHistory([...nextHistory, urlToLoad]);
+    setHistoryIndex(nextHistory.length);
+  };
+
+  const goBack = () => {
+    if (historyIndex > 0) {
+      const idx = historyIndex - 1;
+      setHistoryIndex(idx);
+      const urlToLoad = browserHistory[idx];
+      setBrowserUrl(urlToLoad);
+      setIframeSrc(`/api/proxy?url=${encodeURIComponent(urlToLoad)}`);
+    }
+  };
+
+  const goForward = () => {
+    if (historyIndex < browserHistory.length - 1) {
+      const idx = historyIndex + 1;
+      setHistoryIndex(idx);
+      const urlToLoad = browserHistory[idx];
+      setBrowserUrl(urlToLoad);
+      setIframeSrc(`/api/proxy?url=${encodeURIComponent(urlToLoad)}`);
+    }
+  };
+
+  const handleIframeLoad = () => {
+    setBrowserLoading(false);
+  };
+
+  const filteredKeys = keys.filter(
+    k => k.name.toLowerCase().includes(searchQuery.toLowerCase()) || k.type.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-6 animate-fade-in text-slate-800">
+      {/* 1. Vault Lock overlay */}
+      {isVaultLocked ? (
+        <div className="glass-card p-10 rounded-2xl flex flex-col items-center justify-center text-center max-w-xl mx-auto space-y-6 bg-white/75 border border-sky-200">
+          <div className="bg-sky-500/10 p-4 rounded-full border border-sky-500/20 text-sky-600 animate-pulse">
+            <ShieldAlert className="w-12 h-12" />
+          </div>
+          <h2 className="text-xl font-extrabold text-sky-900 font-sans">خزنة المفاتيح والبروكسيات المشفرة</h2>
+          <p className="text-xs text-slate-600 max-w-md leading-relaxed">
+            لحماية خصوصية مفاتيح API الخاصة بك (OpenAI, Gemini) والبروكسيات الحساسة محلياً، يرجى كتابة رمز مرور فك تشفير الخزنة للبدء فوراً.
+          </p>
+          <div className="w-full flex flex-col sm:flex-row gap-2">
+            <input
+              type="password"
+              placeholder="أدخل كلمة مرور التشفير (محفوظة مسبقًا)"
+              value={encryptionPassword}
+              onChange={(e) => setEncryptionPassword(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-sky-500 flex-1 text-center font-mono"
+            />
+            <button
+              onClick={handleUnlock}
+              disabled={!encryptionPassword}
+              className="bg-sky-600 hover:bg-sky-700 disabled:bg-slate-300 text-white px-6 py-2 rounded-xl text-sm font-bold transition shadow-md cursor-pointer"
+            >
+              فتح الخزنة الآن
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* Main Vault Unlocked */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            
+            {/* Input Form & Proxy Toggle (Left - size 4) */}
+            <div className="lg:col-span-4 space-y-6">
+              <form onSubmit={handleAddKey} className="glass-card bg-white/75 border border-sky-100 p-6 rounded-2xl space-y-4">
+                <h2 className="text-base font-extrabold text-sky-800 flex items-center gap-2">
+                  <Plus className="w-5 h-5 text-sky-600" />
+                  إضافة مفتاح أو بروكسي جديد
+                </h2>
+
+                <div>
+                  <label className="block text-xs text-slate-600 mb-1 font-semibold">اسم معرّف المفتاح</label>
+                  <input
+                    type="text"
+                    placeholder="مثال: Gemini API الرئيسي"
+                    required
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs text-slate-600 mb-1 font-semibold font-sans">نوع المخدم / الخدمة</label>
+                  <select
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                    className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full"
+                  >
+                    <option value="Google Gemini API">Google Gemini API (توكيد ذكي)</option>
+                    <option value="OpenAI API">OpenAI API (مساعد أتمتة)</option>
+                    <option value="Groq API (جروك)">Groq API (جروك فائقة السرعة)</option>
+                    <option value="Anthropic Claude API">Anthropic Claude API</option>
+                    <option value="Custom AI Proxy (بروكسي ذكاء مخصص)">Custom AI Proxy (بروكسي ذكاء مخصص)</option>
+                    <option value="وكيل بروكسي / IP Agent">وكيل بروكسي / IP Agent (للأمان والخصوصية)</option>
+                    <option value="سيرفر استضافة مخصص / Custom Server Host">سيرفر استضافة مخصص / Custom Server Host</option>
+                    <option value="توكن ومفتاح أمان مخصص / Custom Secret Token">توكن ومفتاح أمان مخصص / Custom Secret Token</option>
+                    <option value="Stripe API Key">Stripe API Key (بوابة الدفع)</option>
+                    <option value="Cloudflare Global Key">Cloudflare Token</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs text-slate-600 mb-1 font-semibold">سلسلة المفتاح السري، التوكن أو كلمة المرور (Secret API Key / Token)</label>
+                  <input
+                    type="password"
+                    placeholder="مثال: sk-proj-... أو رمز التوكن السري للموقع"
+                    required={type !== "وكيل بروكسي / IP Agent" && type !== "سيرفر استضافة مخصص / Custom Server Host"}
+                    value={value}
+                    onChange={(e) => handlePasswordChange(e.target.value)}
+                    className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+                  />
+                  {value && (
+                    <div className="mt-1 flex items-center justify-between text-[10px]">
+                      <span className="text-slate-500">قوة الكود السري:</span>
+                      <span className={`font-bold ${
+                        passwordStrength.score < 2 ? "text-red-500" : passwordStrength.score < 4 ? "text-yellow-600" : "text-emerald-600"
+                      }`}>
+                        {passwordStrength.text}
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-xs text-slate-600 mb-1 font-semibold">
+                    {type === "وكيل بروكسي / IP Agent" 
+                      ? "عنوان IP والمنفذ للوكيل (Proxy IP:Port)" 
+                      : "عنوان الـ IP المخصص أو رابط الـ Host المكمل (Server IP / Host URL - اختياري)"}
+                  </label>
+                  <input
+                    type="text"
+                    placeholder={type === "وكيل بروكسي / IP Agent" ? "مثال: 185.122.40.15:8080" : "مثال: https://api.openai.com/v1 أو آي بي مخصص لتشغيل الخدمة"}
+                    required={type === "وكيل بروكسي / IP Agent"}
+                    value={proxyAgentIp}
+                    onChange={(e) => setProxyAgentIp(e.target.value)}
+                    className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="block text-xs text-slate-600 mb-1 font-semibold">الكريديت للترميز</label>
+                    <input
+                      type="text"
+                      placeholder="مثل: $120.00"
+                      value={creditLimit}
+                      onChange={(e) => setCreditLimit(e.target.value)}
+                      className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-slate-600 mb-1 font-semibold">تاريخ انتهاء الصلاحية</label>
+                    <input
+                      type="date"
+                      value={expiry}
+                      onChange={(e) => setExpiry(e.target.value)}
+                      className="bg-white/90 border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-xs text-slate-600 mb-1 font-semibold">مجموعة التكرار والفشل (Redundancy Group)</label>
+                  <div className="grid grid-cols-2 gap-2 mt-1">
+                    <button
+                      type="button"
+                      onClick={() => setGroup("primary")}
+                      className={`py-2 px-3 text-[11px] rounded-lg font-bold transition border cursor-pointer ${
+                        group === "primary" 
+                          ? "bg-sky-500/20 border-sky-400 text-sky-800 shadow-sm" 
+                          : "bg-white/40 border-sky-200 text-slate-500 hover:border-sky-300"
+                      }`}
+                    >
+                      أساسي (Primary)
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setGroup("backup")}
+                      className={`py-2 px-3 text-[11px] rounded-lg font-bold transition border cursor-pointer ${
+                        group === "backup" 
+                          ? "bg-sky-500/20 border-sky-400 text-sky-800 shadow-sm" 
+                          : "bg-white/40 border-sky-200 text-slate-500 hover:border-sky-300"
+                      }`}
+                    >
+                      احتياطي (Backup)
+                    </button>
+                  </div>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-md shadow-sky-500/5 cursor-pointer"
+                >
+                  <ShieldCheck className="w-4 h-4" />
+                  حفظ وتشفير في الخزنة
+                </button>
+              </form>
+
+              <button
+                onClick={handleLock}
+                className="w-full bg-white/65 hover:bg-white text-slate-600 border border-sky-200 font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer"
+              >
+                <Shield className="w-4 h-4 text-sky-600" />
+                قفل وتأمين الخزنة الآن
+              </button>
+
+              {/* Backups & Config Migration (Bilingual, high contrast, super clean) */}
+              <div className="glass-card bg-white/75 border border-sky-100 p-5 rounded-2xl space-y-4">
+                <h2 className="text-sm font-extrabold text-sky-800 flex items-center gap-2">
+                  <Layers className="w-4.5 h-4.5 text-sky-600" />
+                  المزامنة والنسخ الاحتياطي (Backup & Sync)
+                </h2>
+                <p className="text-[11px] text-slate-600 leading-relaxed">
+                  قم بتصدير الخزنة الرقمية أو إعدادات المواقع والعمليات بالكامل كملف JSON للنسخ الاحتياطي، المزامنة الفورية، أو النقل بأمان.
+                </p>
+
+                <div className="grid grid-cols-1 gap-2 pt-1">
+                  {/* Export button */}
+                  <button
+                    onClick={handleExportVault}
+                    className="w-full bg-sky-50 hover:bg-sky-100 border border-sky-200 text-sky-800 font-bold py-2 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer"
+                  >
+                    <Download className="w-4 h-4 text-sky-600" />
+                    تصدير التكوينات والمفاتيح
+                  </button>
+
+                  {/* Import button */}
+                  <label className="w-full bg-white hover:bg-sky-50 border border-sky-200 text-slate-700 font-bold py-2 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer text-center">
+                    <Upload className="w-4 h-4 text-sky-600" />
+                    استيراد كود التكوين (.json)
+                    <input 
+                      type="file" 
+                      accept=".json" 
+                      onChange={handleImportVault} 
+                      className="hidden" 
+                    />
+                  </label>
+                </div>
+                
+                <div className="text-[9px] text-slate-400 text-center font-mono select-none">
+                  Secured Config Migration v20.0
+                </div>
+              </div>
+            </div>
+
+            {/* Keys & IP Manager (Right - size 8) */}
+            <div className="lg:col-span-8 space-y-4">
+              
+              {/* Filter controls */}
+              <div className="glass-card bg-white/75 border border-sky-100 px-4 py-3.5 rounded-2xl flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="flex items-center gap-2 flex-1 w-full max-w-sm">
+                  <Search className="w-4 h-4 text-sky-600 shrink-0" />
+                  <input
+                    type="text"
+                    placeholder="ابحث عن مفتاح سري، توكن، أو بروكسي..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="bg-transparent text-xs text-slate-800 focus:outline-none w-full placeholder:text-slate-400"
+                  />
+                </div>
+                <div className="flex items-center gap-2 text-[10px] bg-sky-500/15 text-sky-800 px-3 py-1 rounded-lg border border-sky-500/20">
+                  <ShieldCheck className="w-3.5 h-3.5 text-emerald-600" />
+                  <span className="font-bold">تشفير AES-256-GCM للواجهة نشط</span>
+                </div>
+              </div>
+
+              {/* Connected keys display list */}
+              {filteredKeys.map((k) => {
+                const diag = diagnosticResults[k.id];
+                const isActiveSystemKey = activeKeyId === k.id;
+
+                // Expiry calculation
+                let diffDays: number | null = null;
+                if (k.expiry && k.expiry !== "بدون تاريخ انتهاء") {
+                  const expiryDate = new Date(k.expiry);
+                  if (!isNaN(expiryDate.getTime())) {
+                    const now = new Date();
+                    const diffTime = expiryDate.getTime() - now.getTime();
+                    diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+                  }
+                }
+                const usagePercent = diffDays !== null && diffDays < 30 ? Math.max(5, Math.min(100, Math.round((diffDays / 30) * 100))) : 88;
+
+                return (
+                  <div 
+                    key={k.id} 
+                    className={`glass-card p-4 rounded-xl border transition-all relative overflow-hidden bg-white/75 ${
+                      isActiveSystemKey ? "border-sky-500/50 shadow-md shadow-sky-500/5 ring-1 ring-sky-500/20" : "border-sky-250/15"
+                    }`}
+                  >
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-sky-500/10">
+                      
+                      {/* Left: Metadata */}
+                      <div className="space-y-1.5 flex-1">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <h3 className="font-extrabold text-sm text-sky-900">{k.name}</h3>
+                          <span className="text-[10px] bg-sky-100 text-sky-700 px-2 py-0.5 rounded-lg border border-sky-200/40 font-mono font-bold">
+                            {k.type}
+                          </span>
+                          <span className={`text-[9px] px-1.5 py-0.5 rounded font-bold ${
+                            k.group === "primary" ? "bg-indigo-100 text-indigo-700" : "bg-emerald-100 text-emerald-700"
+                          }`}>
+                            {k.group === "primary" ? "أساسي" : "احتياطي"}
+                          </span>
+                          {isActiveSystemKey && (
+                            <span className="bg-sky-600 text-white text-[9px] px-2 py-0.5 rounded font-bold animate-pulse">
+                              المفتاح النشط حالياً للذكاء
+                            </span>
+                          )}
+                        </div>
+                        
+                        {k.proxyAgentIp && (
+                          <div className="flex items-center gap-1.5 text-[10px] text-sky-800 bg-sky-50/70 p-1 px-2.5 rounded-xl border border-sky-100 w-fit font-mono">
+                            <span>🌐 المخدم / IP:</span>
+                            <span className="font-extrabold select-all">{k.proxyAgentIp}</span>
+                          </div>
+                        )}
+
+                        <p className="text-[10px] text-slate-500 font-semibold">تاريخ الانتهاء: {k.expiry}</p>
+
+                        {/* Interactive depletion progress meter */}
+                        <div className="mt-2.5 space-y-1 max-w-sm">
+                          <div className="flex justify-between text-[10px] text-slate-600 font-semibold">
+                            <span>📊 الكمية المتبقية للاستخدام:</span>
+                            <span className={usagePercent < 25 ? "text-red-500 font-extrabold" : usagePercent < 55 ? "text-yellow-600 font-extrabold" : "text-emerald-600 font-extrabold"}>
+                              {usagePercent}% متبقي ({k.creditLimit || "غير محدود"})
+                            </span>
+                          </div>
+                          <div className="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden">
+                            <div 
+                              className={`h-full rounded-full transition-all duration-500 ${
+                                usagePercent < 25 ? "bg-red-500 animate-pulse" : usagePercent < 55 ? "bg-yellow-500" : "bg-emerald-500"
+                              }`} 
+                              style={{ width: `${usagePercent}%` }}
+                            />
+                          </div>
+                          {diffDays !== null && (
+                            <div className="text-[9px] text-slate-500 font-semibold">
+                              ⏰ ينتهي الكود بالكامل خلال <span className="font-extrabold text-sky-800">{diffDays}</span> يوم{diffDays <= 10 ? "ًا" : ""}.
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Right: Toggle & Testing Diagnostic triggers */}
+                      <div className="flex items-center gap-2 flex-wrap sm:justify-end">
+                        <button
+                          onClick={() => handleToggleActive(k.id)}
+                          className={`px-2.5 py-1 text-[10px] font-bold rounded-lg transition border cursor-pointer ${
+                            isActiveSystemKey 
+                              ? "bg-sky-600 text-white border-sky-600" 
+                              : "bg-white hover:bg-sky-50 border-sky-200 text-slate-600"
+                          }`}
+                        >
+                          {isActiveSystemKey ? "✓ المفتاح المعتمد" : "تعيين كالمفتاح المعتمد"}
+                        </button>
+
+                        <button
+                          onClick={() => runDiagnosticTest(k)}
+                          disabled={testingKeyId === k.id}
+                          className="px-2.5 py-1 bg-sky-100 text-[10px] text-sky-700 hover:bg-sky-200 rounded-lg border border-sky-200 transition font-bold flex items-center gap-1 disabled:opacity-50 cursor-pointer"
+                        >
+                          {testingKeyId === k.id ? (
+                            <>
+                              <RefreshCw className="w-3 h-3 animate-spin" />
+                              جاري الفحص...
+                            </>
+                          ) : (
+                            <>
+                              <Activity className="w-3 h-3 text-sky-600 animate-pulse" />
+                              فحص الحالة والكريديت
+                            </>
+                          )}
+                        </button>
+
+                        {k.status === "active" && (
+                          <button
+                            onClick={() => triggerFailover(k)}
+                            title="تجربة انتقال المهام السريع للتبديل"
+                            className="p-1 px-2 border border-yellow-200 hover:bg-yellow-50 rounded-lg text-yellow-700 text-[10px] font-bold transition flex items-center gap-0.5 cursor-pointer"
+                          >
+                            <RefreshCw className="w-3 h-3" />
+                            تبديل (Failover)
+                          </button>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Status badges container */}
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5 my-3 bg-sky-500/5 p-2 rounded-xl border border-sky-500/10 text-center">
+                      <div>
+                        <span className="text-[9px] text-slate-500 block">حالة العمل</span>
+                        <div className="flex items-center justify-center gap-1 mt-0.5">
+                          <span className={`w-2.5 h-2.5 rounded-full ${
+                            k.status === "active" ? "bg-emerald-500" : k.status === "warning" ? "bg-yellow-500" : "bg-red-500 animate-pulse"
+                          }`} />
+                          <span className="text-xs font-bold text-slate-700">
+                            {k.status === "active" ? "يعمل" : k.status === "limited" ? "لا يعمل / منتهي" : "متوقف / معطل"}
+                          </span>
+                        </div>
+                      </div>
+                      <div>
+                        <span className="text-[9px] text-slate-500 block">الكريديت المتبقي</span>
+                        <span className="text-xs font-bold text-sky-800 block mt-0.5">
+                          {diag?.creditLeft || k.creditLimit || "غير محدد"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-[9px] text-slate-500 block">السرعة / البنك</span>
+                        <span className="text-xs font-mono font-bold text-indigo-700 block mt-0.5">
+                          {diag?.latency ? `${diag.latency} ms` : "--- ms"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-[9px] text-slate-500 block">تاريخ الفحص</span>
+                        <span className="text-[10px] font-semibold text-slate-600 block mt-0.5 truncate">
+                          {k.lastTested ? new Date(k.lastTested).toLocaleTimeString("ar-EG") : "لم يُفحص بعد"}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Masked display value */}
+                    <div className="bg-sky-500/5 p-2.5 rounded-xl border border-sky-500/10 flex items-center justify-between gap-4">
+                      <code className="text-xs font-mono text-slate-600 select-all truncate">
+                        {visibleKeyIds[k.id] ? k.value : getMaskedValue(k.value)}
+                      </code>
+                      
+                      <div className="flex gap-1.5 shrink-0">
+                        <button
+                          onClick={() => toggleVisibility(k.id)}
+                          className="p-1.5 hover:bg-sky-100 rounded text-slate-500 transition cursor-pointer"
+                        >
+                          {visibleKeyIds[k.id] ? <EyeOff className="w-4 h-4 text-sky-600" /> : <EyeIcon className="w-4 h-4 text-sky-600" />}
+                        </button>
+                        <button
+                          onClick={() => handleCopy(k.id, k.value)}
+                          className="p-1.5 hover:bg-sky-100 rounded text-slate-500 transition cursor-pointer"
+                        >
+                          {copiedId === k.id ? <Check className="w-4 h-4 text-emerald-600" /> : <Clipboard className="w-4 h-4 text-sky-600" />}
+                        </button>
+                        <button
+                          onClick={() => handleDelete(k.id)}
+                          className="text-red-500 p-1.5 hover:bg-red-50 border border-sky-100 rounded-lg transition text-xs font-bold cursor-pointer"
+                        >
+                          حذف
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Diagnosis Feedback Log (In case of error) */}
+                    {diag && (
+                      <div className={`mt-2.5 p-2 rounded-lg border text-[11px] flex gap-2 ${
+                        diag.status === "active" 
+                          ? "bg-emerald-50 border-emerald-200 text-emerald-800" 
+                          : "bg-red-50 border-red-100 text-red-800"
+                      }`}>
+                        <AlertCircle className="w-4 h-4 shrink-0" />
+                        <div>
+                          <span className="font-bold">كشف الكابينة الفوري: </span>
+                          <span>{diag.message}</span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {filteredKeys.length === 0 && (
+                <div className="glass-card p-12 text-center text-slate-400 rounded-2xl bg-white/75 border border-sky-50">
+                  <Key className="w-10 h-10 text-sky-300 mx-auto mb-3" />
+                  لا توجد مفاتيح في الخزنة حالياً. يرجى إضافة مفتاح او بروكسي بالأعلى لبدء الفحص والتشغيل.
+                </div>
+              )}
+            </div>
+
+          </div>
+
+          {/* 3. INTEGRATED SECURE WEB BROWSER ("البرواسر المدمج") */}
+          <div className="glass-card bg-white/75 border border-sky-100 rounded-2xl p-6 space-y-4">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 border-b border-sky-500/10 pb-4">
+              <div>
+                <h2 className="text-base font-extrabold text-sky-800 flex items-center gap-1.5">
+                  <Globe className="w-5 h-5 text-sky-600" />
+                  برواسر التصفح والتوكيد المدمج (In-App Security Browser Bypass)
+                </h2>
+                <p className="text-[11px] text-slate-500">
+                  تصفح صفحات مزودي الخدمة (مثال: OpenAI Console / Gemini) للحصول على المفاتيح وتسجيلها مباشرة دون مغادرة الأداة.
+                </p>
+              </div>
+              <span className="text-[10px] font-bold bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full border border-emerald-200/40">
+                🔒 بروكسي CORS Bypass مفعّل تلقائياً
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+              
+              {/* Browser Sandbox viewport (size 8) */}
+              <div className="lg:col-span-8 space-y-2">
+                
+                {/* Browser Address and Navigation Bar */}
+                <div className="bg-sky-100/60 p-2 rounded-xl flex items-center gap-2 border border-sky-200/40">
+                  <div className="flex items-center gap-1 shrink-0">
+                    <button 
+                      onClick={goBack}
+                      disabled={historyIndex === 0}
+                      className="p-1 hover:bg-sky-200/50 rounded text-sky-800 disabled:opacity-40 transition cursor-pointer"
+                    >
+                      <ArrowRight className="w-4 h-4 transform rotate-180" />
+                    </button>
+                    <button 
+                      onClick={goForward}
+                      disabled={historyIndex >= browserHistory.length - 1}
+                      className="p-1 hover:bg-sky-200/50 rounded text-sky-800 disabled:opacity-40 transition cursor-pointer"
+                    >
+                      <ArrowLeft className="w-4 h-4 transform rotate-180" />
+                    </button>
+                    <button 
+                      onClick={() => navigateBrowser(browserUrl)}
+                      className="p-1 hover:bg-sky-200/50 rounded text-sky-800 transition cursor-pointer animate-none"
+                    >
+                      <RefreshCw className={`w-4 h-4 ${browserLoading ? "animate-spin text-sky-600" : ""}`} />
+                    </button>
+                    <button 
+                      onClick={() => navigateBrowser("https://ai.google.dev")}
+                      className="p-1 hover:bg-sky-200/50 rounded text-sky-800 transition cursor-pointer"
+                      title="البداية"
+                    >
+                      <Home className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  {/* URL input field */}
+                  <div className="flex-1">
+                    <input 
+                      type="text"
+                      placeholder="أدخل رابط أي موقع للتصفح وتجاوز الحجب..."
+                      value={browserUrl}
+                      onChange={(e) => setBrowserUrl(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          navigateBrowser(browserUrl);
+                        }
+                      }}
+                      className="bg-white border border-sky-200 px-3 py-1.5 rounded-lg text-xs text-slate-800 w-full focus:outline-none focus:border-sky-500 text-left font-mono"
+                    />
+                  </div>
+
+                  <button
+                    onClick={() => navigateBrowser(browserUrl)}
+                    className="bg-sky-600 hover:bg-sky-700 text-white font-bold px-4 py-1.5 rounded-lg text-xs transition cursor-pointer shadow-sm"
+                  >
+                    انطلاق
+                  </button>
+                </div>
+
+                {/* Main browser frame viewport */}
+                <div className="bg-white border border-sky-200 rounded-xl overflow-hidden h-[450px] flex flex-col relative">
+                  {browserLoading && (
+                    <div className="absolute inset-0 bg-white/75 backdrop-blur-sm flex flex-col items-center justify-center space-y-2 z-15">
+                      <RefreshCw className="w-8 h-8 text-sky-600 animate-spin" />
+                      <span className="text-xs font-semibold text-sky-800 animate-pulse">جاري سحب الصفحة وتخطي جدران نارية...</span>
+                    </div>
+                  )}
+                  {/* Virtual status notification bar inside browser */}
+                  <div className="bg-sky-50 px-3 py-1 border-b border-sky-100 flex items-center justify-between text-[10px] text-slate-500 font-mono">
+                    <span className="flex items-center gap-1">
+                      <ShieldCheck className="w-3.5 h-3.5 text-emerald-600" />
+                      عرض آمن محمي {browserUrl}
+                    </span>
+                    <span>Session: ACTIVE (IP Encoded)</span>
+                  </div>
+                  {/* Iframe content */}
+                  <iframe 
+                    title="مستعرض التوكيد"
+                    src={iframeSrc}
+                    onLoad={handleIframeLoad}
+                    className="w-full flex-1 border-none bg-white"
+                    sandbox="allow-scripts allow-forms allow-same-origin"
+                  />
+                </div>
+              </div>
+
+              {/* Fast registration panel (size 4) */}
+              <div className="lg:col-span-4 space-y-4">
+                <div className="bg-sky-500/5 border border-sky-500/10 p-5 rounded-2xl h-full flex flex-col justify-between">
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Zap className="w-5 h-5 text-yellow-500 animate-bounce" />
+                      <h3 className="font-extrabold text-sm text-sky-900">مسجل المفاتيح السريع من المتصفح</h3>
+                    </div>
+                    <p className="text-[11px] text-slate-600 leading-relaxed">
+                      عند تحديد ونسخ الـ API Key أو التوكن من صفحة مزود الخدمة داخل المتصفح، ألصقه هنا لتشفيره وحفظه مباشرة في الخزنة الرقمية فوراً!
+                    </p>
+
+                    <div className="space-y-3 pt-2">
+                      <div>
+                        <label className="block text-xs text-slate-600 mb-1 font-semibold">تسمية المفتاح الملتقط</label>
+                        <input 
+                          type="text"
+                          placeholder="مثال: Gemini Pro الملتقط"
+                          value={quickRegName}
+                          onChange={(e) => setQuickRegName(e.target.value)}
+                          className="bg-white border border-sky-200 rounded-xl px-3.5 py-2 text-xs w-full focus:outline-none focus:border-sky-500 text-slate-800"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-xs text-slate-600 mb-1 font-semibold">المنصة</label>
+                        <select
+                          value={quickRegType}
+                          onChange={(e) => setQuickRegType(e.target.value)}
+                          className="bg-white border border-sky-200 rounded-xl px-3.5 py-2 text-xs w-full focus:outline-none text-slate-800"
+                        >
+                          <option value="Google Gemini API">Google Gemini API</option>
+                          <option value="OpenAI API">OpenAI API</option>
+                          <option value="Anthropic Claude API">Anthropic Claude API</option>
+                          <option value="Cloudflare Global Key">Cloudflare Global Key</option>
+                          <option value="Stripe API Key">Stripe API Key</option>
+                        </select>
+                      </div>
+
+                      <div>
+                        <label className="block text-xs text-slate-600 mb-1 font-semibold">كود المفتاح السري المنسوخ</label>
+                        <textarea 
+                          rows={3}
+                          placeholder="ألصق الرمز السري الملتقط هنا (sk-..... أو AIzaSy.....)"
+                          value={quickRegValue}
+                          onChange={(e) => setQuickRegValue(e.target.value)}
+                          className="bg-white border border-sky-200 rounded-xl px-3.5 py-2 text-xs w-full focus:outline-none focus:border-sky-500 font-mono text-left"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={handleQuickRegister}
+                    disabled={!quickRegName || !quickRegValue}
+                    className="w-full mt-4 bg-sky-600 hover:bg-sky-700 disabled:bg-slate-300 text-white font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow cursor-pointer"
+                  >
+                    <ShieldCheck className="w-4 h-4" />
+                    دبوس وحفظ فوري
+                  </button>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/MonitorTab.tsx

@@ -0,0 +1,395 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { WebsiteMonitor } from "../types";
+import { 
+  Activity, Plus, Trash, Play, AlertTriangle, 
+  CheckCircle, ArrowUpRight, TrendingUp, Clock, Shuffle
+} from "lucide-react";
+
+export default function MonitorTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [monitors, setMonitors] = useState<WebsiteMonitor[]>([]);
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [interval, setIntervalVal] = useState<"30s" | "1m" | "5m" | "15m" | "1h">("1m");
+  const [testingId, setTestingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadMonitors();
+    
+    // Auto-ping cron simulation every 15 seconds
+    const intervalId = window.setInterval(() => {
+      runAutoPingSimulation();
+    }, 15000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const loadMonitors = async () => {
+    const list = await DBService.getAll<WebsiteMonitor>("monitors");
+    
+    // Self-healing migration to replace unreliable httpstat.us connections
+    const migratedList = list.map(m => {
+      if (m.url && m.url.includes("httpstat.us")) {
+        return {
+          ...m,
+          url: m.url.replace("httpstat.us/404", "httpbin.org/status/404").replace("httpstat.us", "httpbin.org")
+        };
+      }
+      return m;
+    });
+
+    // Save changes back to local store if any were migrated
+    let wasMigrated = false;
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].url !== migratedList[i].url) {
+        await DBService.put("monitors", migratedList[i]);
+        wasMigrated = true;
+      }
+    }
+
+    if (migratedList.length === 0) {
+      // Seed some dynamic monitors representing standard platforms for first look demo
+      const seed: WebsiteMonitor[] = [
+        {
+          id: "mon_1",
+          name: "Vercel Build Edge",
+          url: "https://vercel.com",
+          interval: "1m",
+          status: "up",
+          lastCheck: Date.now() - 60000,
+          responseTime: 182,
+          history: [
+            { timestamp: Date.now() - 300000, status: "up", responseTime: 190, code: 200 },
+            { timestamp: Date.now() - 240000, status: "up", responseTime: 212, code: 200 },
+            { timestamp: Date.now() - 180000, status: "up", responseTime: 180, code: 200 },
+            { timestamp: Date.now() - 120000, status: "up", responseTime: 185, code: 200 },
+            { timestamp: Date.now() - 60000, status: "up", responseTime: 182, code: 200 }
+          ]
+        },
+        {
+          id: "mon_2",
+          name: "قاعدة بيانات Supabase API",
+          url: "https://supabase.com",
+          interval: "5m",
+          status: "up",
+          lastCheck: Date.now() - 120000,
+          responseTime: 295,
+          history: [
+            { timestamp: Date.now() - 600000, status: "up", responseTime: 310, code: 200 },
+            { timestamp: Date.now() - 480000, status: "up", responseTime: 302, code: 200 },
+            { timestamp: Date.now() - 360000, status: "up", responseTime: 298, code: 200 },
+            { timestamp: Date.now() - 240000, status: "up", responseTime: 290, code: 200 },
+            { timestamp: Date.now() - 120000, status: "up", responseTime: 295, code: 200 }
+          ]
+        },
+        {
+          id: "mon_3",
+          name: "API الخادم الاحتياطي",
+          url: "https://httpbin.org/status/404",
+          interval: "15m",
+          status: "down",
+          lastCheck: Date.now() - 300000,
+          responseTime: 1540,
+          history: [
+            { timestamp: Date.now() - 1200000, status: "down", responseTime: 1200, code: 404 },
+            { timestamp: Date.now() - 900000, status: "up", responseTime: 420, code: 200 },
+            { timestamp: Date.now() - 600000, status: "down", responseTime: 1500, code: 504 },
+            { timestamp: Date.now() - 300000, status: "down", responseTime: 1540, code: 404 }
+          ]
+        }
+      ];
+      for (const m of seed) {
+        await DBService.put("monitors", m);
+      }
+      setMonitors(seed);
+    } else {
+      setMonitors(migratedList);
+    }
+  };
+
+  const runAutoPingSimulation = async () => {
+    const list = await DBService.getAll<WebsiteMonitor>("monitors");
+    if (list.length === 0) return;
+
+    const randomIndex = Math.floor(Math.random() * list.length);
+    const monitor = list[randomIndex];
+    if (monitor) {
+      await executeSinglePing(monitor);
+    }
+  };
+
+  const executeSinglePing = async (m: WebsiteMonitor) => {
+    setTestingId(m.id);
+    const start = performance.now();
+    let status: "up" | "down" | "slow" = "up";
+    let code = 200;
+    let respTime = 0;
+
+    try {
+      const formatUrl = m.url.startsWith("http") ? m.url : `https://${m.url}`;
+      const res = await fetch(`/api/proxy?url=${encodeURIComponent(formatUrl)}`, {
+        method: "GET"
+      });
+      const end = performance.now();
+      respTime = Math.round(end - start);
+      code = res.status;
+
+      if (!res.ok) {
+        status = "down";
+      } else if (respTime > 800) {
+        status = "slow";
+      }
+    } catch {
+      status = "down";
+      code = 500;
+      respTime = 2000;
+    }
+
+    const updatedHistoryItem = {
+      timestamp: Date.now(),
+      status,
+      responseTime: respTime,
+      code
+    };
+
+    const newHistory = [updatedHistoryItem, ...m.history].slice(0, 100);
+    const updated: WebsiteMonitor = {
+      ...m,
+      status,
+      lastCheck: Date.now(),
+      responseTime: respTime,
+      history: newHistory
+    };
+
+    await DBService.put("monitors", updated);
+    
+    if (m.status !== status) {
+      await DBService.put("auditLog", {
+        id: "log_" + Date.now(),
+        timestamp: Date.now(),
+        action: "تنبيه مراقبة المواقع",
+        details: `مراقب المواقع [${m.name}] تغيرت حالته من [${m.status}] إلى [${status}]`,
+        status: status === "up" ? "success" : "danger"
+      });
+    }
+
+    setMonitors(prev => prev.map(item => item.id === m.id ? updated : item));
+    setTestingId(null);
+  };
+
+  const handleAddMonitor = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name || !url) return;
+    triggerHaptic();
+
+    const newMonitor: WebsiteMonitor = {
+      id: "mon_" + Date.now(),
+      name,
+      url,
+      interval,
+      status: "unknown",
+      history: []
+    };
+
+    await DBService.put("monitors", newMonitor);
+    setMonitors(prev => [newMonitor, ...prev]);
+    
+    setName("");
+    setUrl("");
+    
+    executeSinglePing(newMonitor);
+  };
+
+  const handleDelete = async (id: string) => {
+    triggerHaptic();
+    await DBService.delete("monitors", id);
+    setMonitors(prev => prev.filter(m => m.id !== id));
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in text-slate-800">
+      {/* Sidebar Add (Left) */}
+      <div className="lg:col-span-4 space-y-6">
+        <form onSubmit={handleAddMonitor} className="glass-card bg-white/75 border border-sky-100 p-6 rounded-2xl space-y-4">
+          <h2 className="text-sm font-extrabold text-sky-800 flex items-center gap-1.5">
+            <Plus className="w-5 h-5 text-sky-600" />
+            إضافة مراقب تفاعلي جديد
+          </h2>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">اسم المراقب أو الخدمة</label>
+            <input
+              type="text"
+              placeholder="مثال: الخادم الرئيسي"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full font-bold"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">الرابط أو عنوان الـ API</label>
+            <input
+              type="text"
+              placeholder="api.example.com"
+              required
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-slate-600 mb-1 font-semibold">معدل الفحص الدوري</label>
+            <select
+              value={interval}
+              onChange={(e) => setIntervalVal(e.target.value as any)}
+              className="bg-white border border-sky-200 rounded-xl px-4 py-2 text-xs text-slate-800 focus:outline-none focus:border-sky-500 w-full font-bold"
+            >
+              <option value="30s">كل 30 ثانية</option>
+              <option value="1m">كل دقيقة واحدة</option>
+              <option value="5m">كل 5 دقائق</option>
+              <option value="15m">كل 15 دقيقة</option>
+              <option value="1h">كل ساعة</option>
+            </select>
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-1.5 transition shadow-sm cursor-pointer"
+          >
+            <Activity className="w-4 h-4" />
+            بدء المراقبة النشطة
+          </button>
+        </form>
+
+        {/* Global Stats */}
+        <div className="glass-card bg-white/75 border border-sky-100 p-6 rounded-2xl relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-32 h-32 bg-sky-500/5 blur-2xl rounded-full" />
+          <h3 className="text-xs font-extrabold text-sky-800 mb-4 flex items-center gap-1.5">
+            <TrendingUp className="w-4 h-4 text-sky-600" />
+            ملخص الأداء وال��يّوية
+          </h3>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-slate-600 font-bold">العدد الكلي للمراقبين:</span>
+              <span className="font-extrabold text-sky-900 font-mono">{monitors.length} قنوات</span>
+            </div>
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-slate-600 font-bold">الخوادم النشطة (Up):</span>
+              <span className="font-black text-emerald-600 font-mono">
+                {monitors.filter(m => m.status === "up").length}
+              </span>
+            </div>
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-slate-600 font-bold">الخوادم المتوقفة (Down):</span>
+              <span className="font-black text-red-500 font-mono">
+                {monitors.filter(m => m.status === "down").length}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Monitors Dashboard View (Right) */}
+      <div className="lg:col-span-8 space-y-4">
+        {monitors.map((m) => (
+          <div key={m.id} className="glass-card bg-white/75 border border-sky-100 p-5 rounded-2xl flex flex-col md:flex-row justify-between gap-4 relative overflow-hidden">
+            <div className={`absolute top-0 right-0 w-1.5 h-full ${
+              m.status === "up" ? "bg-emerald-500" : m.status === "down" ? "bg-red-500" : "bg-yellow-500"
+            }`} />
+
+            {/* Title Block */}
+            <div className="flex-1 space-y-2 pr-2">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h3 className="font-extrabold text-sm text-sky-900">{m.name}</h3>
+                <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
+                  m.status === "up" 
+                    ? "bg-emerald-100 text-emerald-700 border border-emerald-200" 
+                    : m.status === "down" 
+                    ? "bg-red-100 text-red-700 border border-red-200" 
+                    : "bg-sky-100 text-sky-700"
+                }`}>
+                  {m.status === "up" ? "متصل (UP)" : m.status === "down" ? "غير متصل (DOWN)" : "قيد الاختبار"}
+                </span>
+                <span className="text-[10px] text-slate-500 flex items-center gap-0.5">
+                  <Clock className="w-3 h-3 text-sky-600" />
+                  {m.interval}
+                </span>
+              </div>
+              <p className="text-xs text-slate-600 text-left font-mono truncate">{m.url}</p>
+              
+              <div className="flex items-center gap-1.5 pt-1">
+                <span className="text-[10px] text-slate-500 font-bold">سجل الأحداث المباشر:</span>
+                <div className="flex gap-1">
+                  {m.history.length === 0 ? (
+                    <span className="text-[10px] text-slate-500">لا يوجد سجل تاريخي</span>
+                  ) : (
+                    m.history.map((h, index) => (
+                      <div
+                        key={index}
+                        title={`تاريخ الفحص: ${new Date(h.timestamp).toLocaleTimeString("ar-EG")} - الاستجابة: ${h.responseTime}ms - الحالة: ${h.status}`}
+                        className={`w-3.5 h-3.5 rounded-full flex items-center justify-center text-[8px] font-bold border ${
+                          h.status === "up" 
+                            ? "bg-emerald-100 text-emerald-700 border-emerald-300" 
+                            : h.status === "down" 
+                            ? "bg-red-100 text-red-700 border-red-300" 
+                            : "bg-yellow-100 text-yellow-700 border-yellow-300"
+                        }`}
+                      >
+                        •
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Telemetry Actions Block */}
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between md:justify-end gap-3 shrink-0">
+              <div className="bg-sky-50 border border-sky-150 rounded-xl p-3 text-center sm:text-right min-w-[120px]">
+                <span className="text-[10px] text-slate-500 block mb-0.5">سرعة الاستجابة</span>
+                {m.responseTime ? (
+                  <span className="text-sm font-black text-sky-850 font-mono">
+                    {m.responseTime} <span className="text-[10px]">ms</span>
+                  </span>
+                ) : (
+                  <span className="text-xs text-slate-500 font-bold">--</span>
+                )}
+              </div>
+
+              {/* Run Test & Delete */}
+              <div className="flex gap-2">
+                <button
+                  onClick={() => executeSinglePing(m)}
+                  disabled={testingId === m.id}
+                  className="flex-1 sm:flex-initial px-3.5 py-2.5 bg-sky-100 hover:bg-sky-200 disabled:opacity-50 text-sky-800 border border-sky-200 rounded-xl transition flex items-center justify-center gap-1.5 text-xs font-bold cursor-pointer"
+                >
+                  {testingId === m.id ? (
+                    <Shuffle className="w-3.5 h-3.5 animate-spin text-sky-600" />
+                  ) : (
+                    <Play className="w-3.5 h-3.5 text-sky-600" />
+                  )}
+                  فحص الآن
+                </button>
+                <button
+                  onClick={() => handleDelete(m.id)}
+                  className="p-2.5 bg-white hover:bg-red-50 text-red-500 border border-sky-250/20 rounded-xl transition cursor-pointer"
+                >
+                  <Trash className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {monitors.length === 0 && (
+          <div className="glass-card p-12 text-center text-slate-400 rounded-2xl bg-white/75 border border-sky-50">
+            لا توجد مخدمات مراقبة نشطة مضافة بعد، أضف عنوان خدمة للبدء.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/SitesTab.tsx

@@ -0,0 +1,465 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { BuiltSite } from "../types";
+import { 
+  Globe, Plus, Trash, ExternalLink, RefreshCw, BarChart2, 
+  GitBranch, RefreshCcw, FolderOpen, AlertCircle, Sparkles, User, Shield
+} from "lucide-react";
+
+export default function SitesTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [sites, setSites] = useState<BuiltSite[]>([]);
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [platform, setPlatform] = useState("Vercel");
+  const [status, setStatus] = useState<any>("live");
+  const [repoUrl, setRepoUrl] = useState("");
+  const [isBuildingId, setIsBuildingId] = useState<string | null>(null);
+
+  // Multi-Email Interactive Filter and Association States
+  const [activeEmail, setActiveEmail] = useState("eissaaly07@gmail.com");
+  const [availableEmails, setAvailableEmails] = useState<string[]>([]);
+  const [ownerEmail, setOwnerEmail] = useState("eissaaly07@gmail.com");
+
+  useEffect(() => {
+    loadSites();
+  }, []);
+
+  const loadSites = async () => {
+    // 1. Get current active session email
+    const activeSetting = await DBService.getSetting<string>("activeEmailSession") || "eissaaly07@gmail.com";
+    setActiveEmail(activeSetting);
+    setOwnerEmail(activeSetting);
+
+    // 2. Compile list of emails from registered sessions + account profiles + emails store
+    const accountsList = await DBService.getAll<any>("accounts");
+    const emailsSet = new Set<string>([
+      "eissaaly07@gmail.com",
+      "eissaaly0007@gmail.com"
+    ]);
+    accountsList.forEach(a => {
+      if (a.email) emailsSet.add(a.email.trim());
+    });
+
+    // Fetch from dedicated emails store (EmailsTab)
+    try {
+      const emailVaultList = await DBService.getAll<any>("emails");
+      emailVaultList.forEach(e => {
+        if (e.email) emailsSet.add(e.email.trim());
+      });
+    } catch (e) {
+      console.warn("Could not retrieve emails from emails store:", e);
+    }
+
+    const storedList = await DBService.getSetting<string[]>("sessionEmailsList");
+    if (storedList) {
+      storedList.forEach(e => emailsSet.add(e.trim()));
+    }
+    const emailsArray = Array.from(emailsSet);
+    setAvailableEmails(emailsArray);
+
+    // 3. Load Sites from store
+    const list = await DBService.getAll<BuiltSite>("sites");
+    if (list.length === 0) {
+      // Seed initial dummy sites for project visual presentation
+      const seed: BuiltSite[] = [
+        {
+          id: "site_1",
+          name: "مدونة المطور الشخصية",
+          url: "https://my-blog-preview.vercel.app",
+          platform: "Vercel",
+          status: "live",
+          deployUrl: "https://vercel.com/dashboard",
+          repoUrl: "https://github.com/developer/blog",
+          lastDeploy: Date.now() - 3600000 * 24,
+          domain: "myblog.dev",
+          analytics: { pageViews: 1420, uptimePercentage: 99.9 },
+          ownerEmail: "eissaaly07@gmail.com"
+        },
+        {
+          id: "site_2",
+          name: "متجر الهدايا الرقمي",
+          url: "https://gift-store.netlify.app",
+          platform: "Netlify",
+          status: "staging",
+          deployUrl: "https://app.netlify.com",
+          repoUrl: "https://github.com/developer/gift-store",
+          lastDeploy: Date.now() - 3600000 * 5,
+          analytics: { pageViews: 480, uptimePercentage: 98.7 },
+          ownerEmail: "eissaaly07@gmail.com"
+        },
+        {
+          id: "site_3",
+          name: "موقع التوثيق السريع",
+          url: "https://doc-wizard.github.io",
+          platform: "GitHub Pages",
+          status: "live",
+          deployUrl: "https://github.com",
+          repoUrl: "https://github.com/developer/doc-wizard",
+          lastDeploy: Date.now() - 3600000 * 12,
+          analytics: { pageViews: 240, uptimePercentage: 100.0 },
+          ownerEmail: "eissaaly0007@gmail.com"
+        }
+      ];
+      for (const s of seed) {
+        await DBService.put("sites", s);
+      }
+      setSites(seed);
+    } else {
+      setSites(list);
+    }
+  };
+
+  const handleSwitchActiveEmail = async (email: string) => {
+    triggerHaptic();
+    setActiveEmail(email);
+    setOwnerEmail(email);
+    await DBService.putSetting("activeEmailSession", email);
+
+    // Save to audit trail
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "تغيير جلسة بريد المواقع",
+      details: `تم تبديل تصفية المواقع النشطة لعرض المشاريع المملوكة لـ [${email}]`,
+      status: "success"
+    });
+  };
+
+  const handleCreateSite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name || !url) return;
+    triggerHaptic();
+
+    const targetOwner = ownerEmail || activeEmail;
+    const newSite: BuiltSite = {
+      id: "site_" + Date.now(),
+      name,
+      url,
+      platform,
+      status,
+      deployUrl: platform === "Vercel" ? "https://vercel.com" : "https://netlify.com",
+      repoUrl: repoUrl || undefined,
+      lastDeploy: Date.now(),
+      analytics: {
+        pageViews: Math.floor(Math.random() * 200) + 10,
+        uptimePercentage: 100.0
+      },
+      ownerEmail: targetOwner
+    };
+
+    await DBService.put("sites", newSite);
+    setSites(prev => [newSite, ...prev]);
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "أرشفة وتتبع مشروع",
+      details: `تم بنجاح ربط وتتبع المشروع [${name}] وتخصيص المالك [${targetOwner}]`,
+      status: "success"
+    });
+
+    setName("");
+    setUrl("");
+    setRepoUrl("");
+  };
+
+  const handleDelete = async (id: string) => {
+    triggerHaptic();
+    await DBService.delete("sites", id);
+    setSites(prev => prev.filter(s => s.id !== id));
+  };
+
+  const triggerMockRedeploy = async (id: string) => {
+    triggerHaptic();
+    setIsBuildingId(id);
+    
+    setTimeout(async () => {
+      setIsBuildingId(null);
+      // Update build timestamp
+      const s = sites.find(item => item.id === id);
+      if (s) {
+        s.lastDeploy = Date.now();
+        await DBService.put("sites", s);
+        setSites(prev => prev.map(item => item.id === id ? s : item));
+
+        await DBService.put("auditLog", {
+          id: "log_" + Date.now(),
+          timestamp: Date.now(),
+          action: "إعادة بناء ونشر مجاني",
+          details: `تم إعادة إطلاق وبناء مشروع [${s.name}] عن بعد في دقيقتين`,
+          status: "success"
+        });
+      }
+    }, 2500);
+  };
+
+  const getStatusLabel = (st: string) => {
+    switch (st) {
+      case "live": return "منشور فعال (Live)";
+      case "dev": return "تحت التطوير (Dev)";
+      case "staging": return "تجريبي (Staging)";
+      case "archived": return "مؤرشف (Archived)";
+      case "down": return "معطل";
+      default: return st;
+    }
+  };
+
+  const filteredSites = sites.filter(s => {
+    const siteEmail = s.ownerEmail || "eissaaly07@gmail.com";
+    return siteEmail.toLowerCase() === activeEmail.toLowerCase();
+  });
+
+  return (
+    <div className="space-y-6 animate-fade-in font-sans">
+      {/* 20+ Master Email SSO Filter & Status Bar (Bilingual, high contrast) */}
+      <div className="glass-card bg-gradient-to-br from-slate-900 via-sky-950 to-slate-950 p-5 rounded-2xl border border-sky-800/40 text-white flex flex-col md:flex-row justify-between items-stretch md:items-center gap-4 shadow-xl">
+        <div className="space-y-1 text-right">
+          <h2 className="text-sm font-extrabold text-sky-300 flex items-center gap-2">
+            <Sparkles className="w-4.5 h-4.5 text-yellow-300 animate-pulse" />
+            تصفية مواقع ومشاريع الحساب المالك النشط (Active Owner Site Filter)
+          </h2>
+          <p className="text-[10px] text-slate-300 leading-relaxed">
+            يتم عرض تتبع الاستضافات وحسابات السيرفر الفعالة للبريد النشط المختار أدناه. ينعكس هذا التغيير على بوابة الدخول الموحد SSO فوراً.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0 self-start md:self-auto">
+          <span className="text-[11px] font-bold text-sky-200 block shrink-0">اختر البريد النشط:</span>
+          <select
+            value={activeEmail}
+            onChange={(e) => handleSwitchActiveEmail(e.target.value)}
+            className="bg-white/10 text-white hover:bg-white/15 border border-white/20 rounded-xl px-3 py-1.5 text-xs font-mono font-extrabold focus:outline-none cursor-pointer"
+          >
+            {availableEmails.map((email) => (
+              <option key={email} value={email} className="bg-slate-900 text-white font-mono font-bold">{email}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Sidebar Add Project Form */}
+        <div className="lg:col-span-4 space-y-4">
+          <form onSubmit={handleCreateSite} className="glass-card p-6 rounded-2xl space-y-4 border border-slate-800">
+            <h2 className="text-lg font-bold text-sky-400 flex items-center gap-2">
+              <Plus className="w-5 h-5 text-sky-500" />
+              تتبع مشروع/موقع جديد
+            </h2>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">اسم المشروع</label>
+              <input
+                type="text"
+                placeholder="مثال: لوحة التحكم لموظفي المبيعات"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">رابط الإنتاج المباشر (Production URL)</label>
+              <input
+                type="text"
+                placeholder="mysite.vercel.app"
+                required
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">منصة الاستضافة المجانية</label>
+              <select
+                value={platform}
+                onChange={(e) => setPlatform(e.target.value)}
+                className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+              >
+                <option value="Vercel">Vercel (فيرسيل)</option>
+                <option value="Netlify">Netlify (نتليفاي)</option>
+                <option value="GitHub Pages">GitHub Pages</option>
+                <option value="Render">Render</option>
+                <option value="Railway">Railway</option>
+                <option value="Cloudflare Pages">Cloudflare Pages</option>
+              </select>
+            </div>
+
+            {/* Owner Email ID selector input field */}
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">الحساب المالك لهذه الاستضافة (Owner Account)</label>
+              <select
+                value={ownerEmail}
+                onChange={(e) => setOwnerEmail(e.target.value)}
+                className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-xs text-sky-300 font-mono focus:outline-none focus:border-sky-500 w-full"
+              >
+                {availableEmails.map((email) => (
+                  <option key={email} value={email}>{email}</option>
+                ))}
+              </select>
+              <span className="text-[9px] text-slate-400 mt-1 block leading-relaxed">
+                سيظهر هذا الموقع فقط عند تحديد وتنشيط هذا البريد في تصفية الجلسات.
+              </span>
+            </div>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">مستودع الكواد (Repository URL) - اختياري</label>
+              <input
+                type="text"
+                placeholder="github.com/user/project"
+                value={repoUrl}
+                onChange={(e) => setRepoUrl(e.target.value)}
+                className="bg-slate-900/80 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full text-left font-mono"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs text-slate-400 mb-1">حالة الموقع الافتراضية</label>
+              <select
+                value={status}
+                onChange={(e) => setStatus(e.target.value as any)}
+                className="bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-sky-500 w-full"
+              >
+                <option value="live">نشط وفعال</option>
+                <option value="staging">بيئة الفحص (Staging)</option>
+                <option value="dev">قيد البرمجة والتطوير</option>
+                <option value="archived">مؤرشف ومحفوظ</option>
+              </select>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-sky-500 hover:bg-sky-600 text-slate-950 font-bold py-3 rounded-xl text-sm flex items-center justify-center gap-1 transition cursor-pointer"
+            >
+              <Globe className="w-4 h-4 text-slate-900" />
+              حفظ وربط المشروع
+            </button>
+          </form>
+        </div>
+
+        {/* Projects List Dashboard */}
+        <div className="lg:col-span-8 space-y-4">
+          <div className="flex items-center justify-between px-1">
+            <span className="text-[11px] font-bold text-slate-450">
+              مشاريع تابعة للحساب: <span className="text-sky-400 font-mono font-black">{activeEmail}</span>
+            </span>
+            <span className="text-[10px] bg-sky-950/40 text-sky-305 border border-sky-800/60 px-2 py-0.5 rounded-lg font-bold">
+              مجموع المشاريع المصفاة: {filteredSites.length}
+            </span>
+          </div>
+
+          {filteredSites.map((s) => (
+            <div key={s.id} className="glass-card p-5 rounded-2xl border border-slate-800 space-y-4 relative overflow-hidden">
+              {/* Platform indicator sidebar color code */}
+              <div className={`absolute top-0 right-0 w-1.5 h-full ${
+                s.platform === "Vercel" ? "bg-white" : s.platform === "Netlify" ? "bg-teal-400" : "bg-purple-500"
+              }`} />
+
+              {/* Top header block */}
+              <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3">
+                <div>
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <h3 className="font-bold text-base text-slate-200">{s.name}</h3>
+                    <span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded font-mono font-semibold">
+                      {s.platform}
+                    </span>
+                    <span className="text-[10px] bg-sky-950/40 text-sky-300 border border-sky-800/40 px-2 py-0.5 rounded font-mono">
+                      👤 {s.ownerEmail || "eissaaly07@gmail.com"}
+                    </span>
+                    <span className={`text-[9px] px-2 py-0.5 rounded font-bold ${
+                      s.status === "live" 
+                        ? "bg-emerald-500/10 text-emerald-400" 
+                        : s.status === "staging" 
+                        ? "bg-amber-500/10 text-amber-400" 
+                        : "bg-slate-800 text-slate-400"
+                    }`}>
+                      {getStatusLabel(s.status)}
+                    </span>
+                  </div>
+                  <a
+                    href={s.url.startsWith("http") ? s.url : `https://${s.url}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-sky-400 hover:underline flex items-center gap-1 mt-1 text-left font-mono"
+                  >
+                    <ExternalLink className="w-3 h-3" />
+                    {s.url}
+                  </a>
+                </div>
+
+                {/* Analytics metrics badge widget */}
+                <div className="flex gap-4 bg-slate-950/30 px-4 py-2 rounded-xl border border-slate-900 text-center shrink-0">
+                  <div>
+                    <span className="text-[9px] text-slate-500 block">مشاهدات الصفحة</span>
+                    <span className="text-xs font-bold font-mono text-emerald-400">
+                      <BarChart2 className="w-3.5 h-3.5 inline ml-0.5" />
+                      {s.analytics.pageViews}
+                    </span>
+                  </div>
+                  <div className="border-r border-slate-800 h-6 my-auto" />
+                  <div>
+                    <span className="text-[9px] text-slate-500 block">نسبة الاستقرار</span>
+                    <span className="text-xs font-bold font-mono text-cyan-400">
+                      {s.analytics.uptimePercentage}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Git Integration Block if any */}
+              {s.repoUrl && (
+                <div className="bg-slate-950/50 p-3 rounded-xl border border-slate-900 flex items-center justify-between text-xs font-mono text-slate-400">
+                  <span className="flex items-center gap-1.5 truncate">
+                    <GitBranch className="w-4 h-4 text-slate-500 shrink-0" />
+                    {s.repoUrl.replace("https://", "")}
+                  </span>
+                  <span className="text-[10px] text-slate-500 shrink-0">
+                    آخر نشر: {new Date(s.lastDeploy).toLocaleTimeString("ar-EG")}
+                  </span>
+                </div>
+              )}
+
+              {/* Action linkages */}
+              <div className="flex flex-wrap gap-2 justify-end">
+                <button
+                  onClick={() => triggerMockRedeploy(s.id)}
+                  disabled={isBuildingId === s.id}
+                  className="bg-slate-800 hover:bg-slate-700 disabled:opacity-50 text-sky-400 border border-slate-700 py-1.5 px-3 rounded-lg text-xs flex items-center gap-1.5 transition select-none cursor-pointer"
+                >
+                  {isBuildingId === s.id ? (
+                    <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                  ) : (
+                    <RefreshCcw className="w-3.5 h-3.5" />
+                  )}
+                  إعادة بناء فوري (Redeploy)
+                </button>
+                <a
+                  href={s.deployUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 py-1.5 px-3 rounded-lg text-xs flex items-center gap-1 transition"
+                >
+                  <FolderOpen className="w-3.5 h-3.5" />
+                  افتح لوحة تحكم المنصة
+                </a>
+                <button
+                  onClick={() => handleDelete(s.id)}
+                  className="bg-slate-900 hover:bg-red-500/10 text-red-400 border border-slate-800 py-1.5 px-2 rounded-lg text-xs transition cursor-pointer"
+                >
+                  <Trash className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          ))}
+
+          {filteredSites.length === 0 && (
+            <div className="glass-card p-12 text-center text-slate-500 rounded-2xl border border-slate-800">
+              لا توجد مواقع أو مشاريع مضافة تحت حساب البريد الإلكتروني <span className="font-mono text-sky-400 font-bold">{activeEmail}</span> حتى الآن. يمكنك إضافة مشروع جديد وتخصيص هذا البريد له من قائمة اليمين.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/StudioTab.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from "react";
+import { DBService, PRE_POPULATED_PLATFORMS } from "../lib/db";
+import { CloudPlatform } from "../types";
+import { 
+  Terminal, Search, Star, ExternalLink, Compass, Code, 
+  Database, Network, HelpCircle, LayoutGrid, Sparkles,
+  Activity, Mail
+} from "lucide-react";
+
+export default function StudioTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [platforms, setPlatforms] = useState<CloudPlatform[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [favorites, setFavorites] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    loadPlatforms();
+  }, []);
+
+  const loadPlatforms = async () => {
+    // Attempt load platforms or load from seed
+    const list = await DBService.getAll<CloudPlatform>("platforms");
+    if (list.length === 0) {
+      for (const p of PRE_POPULATED_PLATFORMS) {
+        await DBService.put("platforms", p);
+      }
+      setPlatforms(PRE_POPULATED_PLATFORMS);
+    } else {
+      setPlatforms(list);
+    }
+
+    // Try loads favorite flags
+    const favs = await DBService.getSetting<Record<string, boolean>>("favorite_platforms");
+    if (favs) {
+      setFavorites(favs);
+    }
+  };
+
+  const toggleFavorite = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    triggerHaptic();
+    const updated = { ...favorites, [id]: !favorites[id] };
+    setFavorites(updated);
+    await DBService.putSetting("favorite_platforms", updated);
+  };
+
+  const getCategoryIcon = (cat: string) => {
+    switch (cat) {
+      case "ai": return <Sparkles className="w-3.5 h-3.5 text-amber-600" />;
+      case "ide": return <Code className="w-3.5 h-3.5 text-sky-600" />;
+      case "database": return <Database className="w-3.5 h-3.5 text-emerald-600" />;
+      case "deployment": return <Compass className="w-3.5 h-3.5 text-blue-600" />;
+      case "workflows": return <Network className="w-3.5 h-3.5 text-fuchsia-600" />;
+      case "monitoring": return <Activity className="w-3.5 h-3.5 text-indigo-600" />;
+      case "email": return <Mail className="w-3.5 h-3.5 text-violet-600" />;
+      default: return <HelpCircle className="w-3.5 h-3.5 text-slate-500" />;
+    }
+  };
+
+  const getCategoryLabel = (cat: string) => {
+    switch (cat) {
+      case "ai": return "ذكاء اصطناعي وتوليد";
+      case "ide": return "بيئات تطوير سحابية";
+      case "database": return "قواعد بيانات سحابية";
+      case "deployment": return "منصات نشر واستضافة";
+      case "workflows": return "أتمتة وسير العمل";
+      case "monitoring": return "مراقبة الأداء والتحليل";
+      case "email": return "مزودي البريد الإلكتروني";
+      default: return cat;
+    }
+  };
+
+  // filter
+  let displayList = platforms.filter((item) => {
+    const matchSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                        item.description.includes(searchQuery) ||
+                        item.freeLimit.includes(searchQuery);
+    
+    if (selectedCategory === "all") return matchSearch;
+    if (selectedCategory === "favorites") return matchSearch && favorites[item.id];
+    return matchSearch && item.category === selectedCategory;
+  });
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Search tool & category selectors */}
+      <div className="glass-card p-5 rounded-2xl flex flex-col gap-4">
+        {/* Search Input */}
+        <div className="flex items-center gap-2 bg-white/90 border border-sky-500/20 rounded-xl px-4 py-2 flex-1 max-w-md shadow-sm">
+          <Search className="w-4 h-4 text-slate-400 shrink-0" />
+          <input
+            type="text"
+            placeholder="ابحث بين 50+ منصة في البينتو..."
+            className="bg-transparent text-xs text-slate-800 focus:outline-none w-full placeholder:text-slate-400"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        {/* Categories filters scrollable */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-1.5 scrollbar-none">
+          <button
+            onClick={() => setSelectedCategory("all")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "all" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            الكل 🌐
+          </button>
+          <button
+            onClick={() => setSelectedCategory("favorites")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer flex items-center gap-1 ${
+              selectedCategory === "favorites" ? "bg-amber-500 text-white shadow-md shadow-amber-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            <Star className="w-3.5 h-3.5 fill-current" />
+            المفضلة ⭐
+          </button>
+          <button
+            onClick={() => setSelectedCategory("ai")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "ai" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            الذكاء الاصطناعي 🧠
+          </button>
+          <button
+            onClick={() => setSelectedCategory("ide")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "ide" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            محررات سحابية 💻
+          </button>
+          <button
+            onClick={() => setSelectedCategory("deployment")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "deployment" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            استضافة ونشر 🚀
+          </button>
+          <button
+            onClick={() => setSelectedCategory("database")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "database" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            قواعد بيانات 🗄️
+          </button>
+          <button
+            onClick={() => setSelectedCategory("workflows")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "workflows" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            أتمتة العمليات ⚙️
+          </button>
+          <button
+            onClick={() => setSelectedCategory("monitoring")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "monitoring" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            المراقبة والتحليل 📡
+          </button>
+          <button
+            onClick={() => setSelectedCategory("email")}
+            className={`px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all duration-200 cursor-pointer ${
+              selectedCategory === "email" ? "bg-sky-600 text-white shadow-md shadow-sky-500/10" : "bg-white border border-sky-500/10 hover:bg-sky-500/5 text-slate-600"
+            }`}
+          >
+            صناديق البريد 📧
+          </button>
+        </div>
+      </div>
+
+      {/* Bento Grid layout */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
+        {displayList.map((platform) => (
+          <div
+            key={platform.id}
+            className="glass-card p-5 rounded-2xl relative group overflow-hidden flex flex-col justify-between"
+          >
+            {/* Background absolute ambient glow on active/hover */}
+            <div className="absolute -bottom-4 -left-4 w-24 h-24 bg-sky-500/5 blur-2xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
+
+            <div>
+              {/* Header category indicator & Star favorite */}
+              <div className="flex justify-between items-center mb-3">
+                <span className="text-[10px] bg-sky-500/10 p-1.5 rounded-lg text-sky-850 flex items-center gap-1 font-bold border border-sky-500/10">
+                  {getCategoryIcon(platform.category)}
+                  {getCategoryLabel(platform.category)}
+                </span>
+                <button
+                  onClick={(e) => toggleFavorite(platform.id, e)}
+                  className="text-slate-400 hover:text-amber-500 transition cursor-pointer"
+                >
+                  <Star className={`w-4 h-4 ${favorites[platform.id] ? "fill-amber-500 text-amber-500" : ""}`} />
+                </button>
+              </div>
+
+              {/* Title & Description of platform */}
+              <h3 className="font-extrabold text-slate-800 text-base mb-1.5 group-hover:text-sky-700 transition">
+                {platform.name}
+              </h3>
+              <p className="text-xs text-slate-600 leading-relaxed mb-4">
+                {platform.description}
+              </p>
+            </div>
+
+            {/* Bottom details / link and free tier limit statement */}
+            <div className="border-t border-sky-500/10 pt-3 flex items-center justify-between mt-auto">
+              <div>
+                <span className="text-[9px] text-slate-500 block font-semibold">العرض المجاني للمطورين</span>
+                <span className="text-[11px] font-bold text-emerald-600">{platform.freeLimit}</span>
+              </div>
+
+              <a
+                href={platform.consoleUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => triggerHaptic()}
+                className="bg-white border border-sky-500/20 p-2 rounded-xl text-sky-700 hover:bg-sky-600 hover:text-white transition flex items-center justify-center shrink-0 shadow-sm"
+                title="فتح وحدة تحكم المنصة المباشرة"
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {displayList.length === 0 && (
+        <div className="glass-card p-12 text-center text-slate-500 rounded-2xl font-bold">
+          لا توجد منصات ضمن هذا الفهرس تطابق تفاصيل البحث.
+        </div>
+      )}
+    </div>
+  );
+}

src/components/WorkflowsTab.tsx

@@ -0,0 +1,399 @@
+import React, { useState, useEffect } from "react";
+import { DBService } from "../lib/db";
+import { AutomationWorkflow, WorkflowNode, WorkflowConnection } from "../types";
+import { 
+  Network, Plus, Play, Pause, Trash, Download, Upload, 
+  Settings, CheckCircle2, RefreshCw, AlertTriangle, PlayCircle
+} from "lucide-react";
+
+export default function WorkflowsTab({ triggerHaptic }: { triggerHaptic: () => void }) {
+  const [workflows, setWorkflows] = useState<AutomationWorkflow[]>([]);
+  const [selectedWorkflow, setSelectedWorkflow] = useState<AutomationWorkflow | null>(null);
+  
+  const [runningStepIndex, setRunningStepIndex] = useState<number | null>(null);
+  const [isRunningTest, setIsRunningTest] = useState(false);
+  const [testConsoleLogs, setTestConsoleLogs] = useState<string[]>([]);
+
+  // form state for adding node
+  const [nodeType, setNodeType] = useState<any>("trigger");
+  const [nodeLabel, setNodeLabel] = useState("مشغل زمني يومي");
+
+  useEffect(() => {
+    loadWorkflows();
+  }, []);
+
+  const loadWorkflows = async () => {
+    const list = await DBService.getAll<AutomationWorkflow>("workflows");
+    if (list.length === 0) {
+      // Seed initial dummy workflow templates
+      const seed: AutomationWorkflow[] = [
+        {
+          id: "work_1",
+          name: "استنساخ يومي ونشر تلقائي",
+          description: "أتمتة ذكية تقوم بسحب كود الموقع المستهدف وحك الإعلانات منه وإعادة نشره تلقائياً على Vercel.",
+          status: "active",
+          nodes: [
+            { id: "n_1", type: "trigger", label: "مؤقت مجدول (Daily Cron)", x: 50, y: 50, config: { time: "00:00" } },
+            { id: "n_2", type: "fetch", label: "جلب محتويات مثال.كوم", x: 200, y: 50, config: { url: "https://example.com" } },
+            { id: "n_3", type: "parse", label: "تنظيف الأكواد والتعقبات", x: 350, y: 50, config: { strip_ads: true } },
+            { id: "n_4", type: "deploy", label: "إعادة بناء Vercel السحابي", x: 500, y: 50, config: { platform: "Vercel" } }
+          ],
+          connections: [
+            { fromId: "n_1", toId: "n_2" },
+            { fromId: "n_2", toId: "n_3" },
+            { fromId: "n_3", toId: "n_4" }
+          ]
+        },
+        {
+          id: "work_2",
+          name: "مراقب فشل API وتحديث المفاتيح",
+          description: "سير عمل ذكي يبدأ بفحص سرعات الاستجابة ويقوم بتبديل كود OpenAI تلقائياً إذا انقطع المخدم.",
+          status: "paused",
+          nodes: [
+            { id: "n_1", type: "trigger", label: "فحص موقع مراقبة الأداء", x: 50, y: 150, config: { interval: "1m" } },
+            { id: "n_2", type: "condition", label: "هل المخدم متوقف (Down)؟", x: 220, y: 150, config: { metric: "responseTime", threshold: 1000 } },
+            { id: "n_3", type: "notify", label: "إرسال تقرير إيميل استنفار", x: 390, y: 100, config: { level: "urgent" } },
+            { id: "n_4", type: "deploy", label: "تحويل المفتاح النشط للطوارئ", x: 390, y: 200, config: { target: "backup_key" } }
+          ],
+          connections: [
+            { fromId: "n_1", toId: "n_2" },
+            { fromId: "n_2", toId: "n_3" },
+            { fromId: "n_2", toId: "n_4" }
+          ]
+        }
+      ];
+      for (const w of seed) {
+        await DBService.put("workflows", w);
+      }
+      setWorkflows(seed);
+      setSelectedWorkflow(seed[0] || null);
+    } else {
+      setWorkflows(list);
+      setSelectedWorkflow(list[0] || null);
+    }
+  };
+
+  const handleCreateWorkflow = async () => {
+    triggerHaptic();
+    const newW: AutomationWorkflow = {
+      id: "work_" + Date.now(),
+      name: "سير عمل مخصص رقم " + (workflows.length + 1),
+      description: "سير عمل مؤتمت لربط الخدمات محلياً وتعديل مسارت الويب.",
+      status: "active",
+      nodes: [
+        { id: "n_1", type: "trigger", label: "مشغل يدوي أو webhook", x: 100, y: 100, config: {} }
+      ],
+      connections: []
+    };
+
+    await DBService.put("workflows", newW);
+    setWorkflows(prev => [...prev, newW]);
+    setSelectedWorkflow(newW);
+
+    await DBService.put("auditLog", {
+      id: "log_" + Date.now(),
+      timestamp: Date.now(),
+      action: "إنشاء أتمتة جديدة",
+      details: `تم بنجاح إنشاء سير عمل [${newW.name}] قيد التصميم المتقدم`,
+      status: "success"
+    });
+  };
+
+  const handleDeleteWorkflow = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    triggerHaptic();
+    await DBService.delete("workflows", id);
+    setWorkflows(prev => prev.filter(w => w.id !== id));
+    if (selectedWorkflow?.id === id) {
+      setSelectedWorkflow(null);
+    }
+  };
+
+  const handleAddNodeToActive = async () => {
+    if (!selectedWorkflow) return;
+    triggerHaptic();
+
+    const newNode: WorkflowNode = {
+      id: "n_" + Date.now(),
+      type: nodeType,
+      label: nodeLabel,
+      x: 100,
+      y: 100,
+      config: {}
+    };
+
+    // Auto connect to the last node to be visual
+    const updatedNodes = [...selectedWorkflow.nodes, newNode];
+    const updatedConnections = [...selectedWorkflow.connections];
+    const lastNode = selectedWorkflow.nodes[selectedWorkflow.nodes.length - 1];
+    if (lastNode) {
+      updatedConnections.push({ fromId: lastNode.id, toId: newNode.id });
+    }
+
+    const updatedWorkflow: AutomationWorkflow = {
+      ...selectedWorkflow,
+      nodes: updatedNodes,
+      connections: updatedConnections
+    };
+
+    await DBService.put("workflows", updatedWorkflow);
+    setSelectedWorkflow(updatedWorkflow);
+    setWorkflows(prev => prev.map(w => w.id === selectedWorkflow.id ? updatedWorkflow : w));
+  };
+
+  const runLiveTestExecution = async () => {
+    if (!selectedWorkflow || isRunningTest) return;
+    triggerHaptic();
+    setIsRunningTest(true);
+    setTestConsoleLogs(["⏳ البدء في معالجة مجمع سير العمل المجدول..."]);
+
+    const steps = selectedWorkflow.nodes;
+    
+    for (let i = 0; i < steps.length; i++) {
+      setRunningStepIndex(i);
+      const step = steps[i];
+      if (step) {
+          await new Promise(r => setTimeout(r, 1200));
+          
+          let logMsg = `🟢 [تمت المعالجة] تشغيل النود ${step.label} (${step.type.toUpperCase()})`;
+          if (step.type === "trigger") logMsg = `⚡ [بدء التشغيل] إشارة تشغيل من: ${step.label}`;
+          if (step.type === "deploy") logMsg = `🚀 [نشر مكمل] تم بنجاح دفع ملفات الاستنساخ للمخدم السحابي المستهدف `;
+          
+          setTestConsoleLogs(prev => [...prev, logMsg]);
+          triggerHaptic();
+      }
+    }
+
+    setTimeout(() => {
+      setTestConsoleLogs(prev => [...prev, "🏁 اكتمال كافة خطوات سير العمل بنجاح ودقّة 100% 🚀"]);
+      setIsRunningTest(false);
+      setRunningStepIndex(null);
+    }, 800);
+  };
+
+  const exportTon8nJson = () => {
+    if (!selectedWorkflow) return;
+    triggerHaptic();
+    
+    // Mapping simplified format to standard n8n style workflow json
+    const n8nSchema = {
+      meta: { templateId: "siteclone_pro_workflow" },
+      nodes: selectedWorkflow.nodes.map(n => ({
+        parameters: n.config,
+        id: n.id,
+        name: n.label,
+        type: `n8n-nodes-base.${n.type === "trigger" ? "cron" : n.type === "fetch" ? "httpRequest" : "webhook"}`,
+        typeVersion: 1,
+        position: [n.x, n.y]
+      })),
+      connections: {}
+    };
+
+    const blob = new Blob([JSON.stringify(n8nSchema, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `n8n_export_${selectedWorkflow.name.replace(/\s+/g, "_")}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const getStepBgColor = (type: string, active: boolean) => {
+    if (active) return "border-sky-500 bg-sky-500/20 text-white shadow-lg shadow-sky-500/25";
+    switch (type) {
+      case "trigger": return "border-yellow-500/30 bg-yellow-500/5 text-yellow-300";
+      case "deploy": return "border-purple-500/30 bg-purple-500/5 text-purple-300";
+      case "condition": return "border-orange-500/30 bg-orange-500/5 text-orange-300";
+      default: return "border-slate-800 bg-slate-900/80 text-slate-300";
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in">
+      {/* Sidebar (Left) */}
+      <div className="lg:col-span-4 space-y-4">
+        {/* Workflows List */}
+        <div className="glass-card p-6 rounded-2xl space-y-4">
+          <div className="flex justify-between items-center">
+            <h2 className="text-base font-bold text-sky-400 flex items-center gap-1.5 animate-pulse">
+              <Network className="w-5 h-5" />
+              أتمتة العمليات (Workflows)
+            </h2>
+            <button
+              onClick={handleCreateWorkflow}
+              className="bg-sky-500 hover:bg-sky-600 text-slate-950 p-1.5 rounded-lg transition"
+            >
+              <Plus className="w-4 h-4" />
+            </button>
+          </div>
+
+          <div className="space-y-2 select-none">
+            {workflows.map((w) => (
+              <div
+                key={w.id}
+                onClick={() => {
+                  triggerHaptic();
+                  setSelectedWorkflow(w);
+                }}
+                className={`p-3 rounded-xl border transition-all cursor-pointer flex justify-between items-center ${
+                  selectedWorkflow?.id === w.id
+                    ? "bg-sky-500/10 border-sky-500/40 text-white"
+                    : "bg-slate-900/60 border-slate-800 hover:border-slate-700 text-slate-300"
+                }`}
+              >
+                <div className="min-w-0">
+                  <h4 className="text-xs font-semibold truncate text-left">{w.name}</h4>
+                  <span className="text-[9px] text-slate-500 font-mono">
+                    {w.nodes.length} نودات نشطة
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5 scale-90">
+                  <span className={`text-[9px] px-1.5 rounded ${
+                    w.status === "active" ? "bg-emerald-500/10 text-emerald-400" : "bg-slate-800 text-slate-400"
+                  }`}>
+                    {w.status === "active" ? "فعال" : "موقوف"}
+                  </span>
+                  <button
+                    onClick={(e) => handleDeleteWorkflow(w.id, e)}
+                    className="p-1 hover:bg-red-500/20 rounded text-red-400 transition"
+                  >
+                    <Trash className="w-3" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Node creation block if any active */}
+        {selectedWorkflow && (
+          <div className="glass-card p-6 rounded-2xl space-y-4">
+            <h3 className="text-sm font-semibold text-slate-300">أضف خطوة (نود) جديدة للمخطط</h3>
+            
+            <div className="space-y-3">
+              <div>
+                <label className="block text-[10px] text-slate-500 mb-1">نوع العملية (Type)</label>
+                <select
+                  value={nodeType}
+                  onChange={(e) => {
+                    setNodeType(e.target.value as any);
+                    // Autofill label
+                    if (e.target.value === "trigger") setNodeLabel("مشغل زمني يومي");
+                    if (e.target.value === "fetch") setNodeLabel("جلب موقع خارجي");
+                    if (e.target.value === "parse") setNodeLabel("تنظيف ملفات CSS");
+                    if (e.target.value === "deploy") setNodeLabel("أمر النشر السحابي");
+                  }}
+                  className="bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-sky-500 w-full"
+                >
+                  <option value="trigger">Trigger (مشغل زمني)</option>
+                  <option value="fetch">Fetch (جلب / تحميل)</option>
+                  <option value="parse">Parse (معالجة الأكوارد)</option>
+                  <option value="condition">Condition (شرط منطقي)</option>
+                  <option value="deploy">Deploy (عملية نشر)</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-[10px] text-slate-500 mb-1">اسم معرف النود لقراءة السجل</label>
+                <input
+                  type="text"
+                  value={nodeLabel}
+                  onChange={(e) => setNodeLabel(e.target.value)}
+                  className="bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-sky-500 w-full"
+                />
+              </div>
+
+              <button
+                onClick={handleAddNodeToActive}
+                className="w-full bg-slate-900 text-sky-400 border border-slate-800 hover:border-sky-400/20 py-2 rounded-xl text-xs flex justify-center items-center gap-1 transition"
+              >
+                <Plus className="w-4 h-4" />
+                أضف واربط تلقائياً
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Editor & Board canvas (Right) */}
+      <div className="lg:col-span-8 space-y-4">
+        {selectedWorkflow ? (
+          <div className="glass-card p-6 rounded-2xl flex flex-col h-[550px]">
+            {/* Header controls select */}
+            <div className="flex justify-between items-center pb-4 border-b border-slate-800 mb-4 gap-3">
+              <div>
+                <h3 className="font-bold text-slate-200 text-base">{selectedWorkflow.name}</h3>
+                <p className="text-xs text-slate-500 mt-0.5">{selectedWorkflow.description}</p>
+              </div>
+
+              {/* Action triggers */}
+              <div className="flex gap-2">
+                <button
+                  onClick={runLiveTestExecution}
+                  disabled={isRunningTest}
+                  className="bg-sky-500 hover:bg-sky-600 disabled:opacity-50 text-slate-950 text-xs px-4 py-2 rounded-xl font-bold transition flex items-center gap-1"
+                >
+                  <Play className="w-3.5 h-3.5" />
+                  تشغيل تجريبي
+                </button>
+                <button
+                  onClick={exportTon8nJson}
+                  className="bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 text-xs px-4 py-2 rounded-xl transition flex items-center gap-1.5"
+                >
+                  <Download className="w-3.5 h-3.5" />
+                  تصدير لـ n8n
+                </button>
+              </div>
+            </div>
+
+            {/* Visual interactive flows representation */}
+            <div className="flex-1 bg-slate-950/70 border border-slate-900/80 rounded-xl p-4 overflow-y-auto space-y-4 relative flex items-center justify-around flex-wrap gap-4 select-none">
+              {selectedWorkflow.nodes.map((n, i) => (
+                <React.Fragment key={n.id}>
+                  <div className={`p-4 rounded-xl border-2 transition-all duration-300 w-44 text-center ${
+                    getStepBgColor(n.type, runningStepIndex === i)
+                  }`}>
+                    <span className="text-[8px] uppercase tracking-wider block text-slate-500 mb-1">
+                      {n.type}
+                    </span>
+                    <span className="text-xs font-bold font-sans tracking-tight block truncate">
+                      {n.label}
+                    </span>
+                  </div>
+                  
+                  {/* Arrow connect simulator */}
+                  {i < selectedWorkflow.nodes.length - 1 && (
+                    <div className="text-slate-700 font-bold px-1 py-1 shrink-0">
+                      ➔
+                    </div>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+
+            {/* Simulated Live Console logs output */}
+            <div className="h-40 bg-slate-950 border border-slate-900 rounded-xl mt-4 overflow-y-auto p-4 flex flex-col">
+              <span className="text-[10px] text-slate-500 uppercase tracking-widest font-mono font-bold border-b border-slate-900 pb-1 mb-2">
+                سجل المخرجات للأتمتة (Active automation logger system)
+              </span>
+              <div className="font-mono text-xs text-slate-300 space-y-1.5 flex-1 select-text">
+                {testConsoleLogs.map((log, lIndex) => (
+                  <p key={lIndex} className="leading-snug text-left">{log}</p>
+                ))}
+                {testConsoleLogs.length === 0 && (
+                  <p className="text-slate-600 text-center py-6">انقر على تشغيل تجريبي لرؤية نتائج الفحص المنطقي.</p>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="glass-card p-12 text-center rounded-2xl h-[550px] flex flex-col justify-center items-center">
+            <p className="text-slate-500 text-sm">لا يوجد مسار عمل محدد للتحرير. يرجى البدء بإنشاء سير عمل.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}