Spaces:

PrinceShadow003
/

codegalaxy

Running

App Files Files Community

codegalaxy / index.html

PrinceShadow003

Manual changes saved

020e4a3 verified about 2 months ago

raw

history blame

56.5 kB

	import React, { useState, useEffect, useRef, useCallback } from 'react';

	// --- Enhanced Icon Components with Modern Styling ---
	const IconNova = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M12 2L2 7l10 5 10-5-10-5z" />
	<path d="M2 17l10 5 10-5" />
	<path d="M2 12l10 5 10-5" />
	</svg>
	);

	const IconHome = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
	<polyline points="9 22 9 12 15 12 15 22" />
	</svg>
	);

	const IconTabs = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<rect width="18" height="18" x="3" y="3" rx="2" />
	<path d="M21 12H3" />
	<path d="M12 3v18" />
	</svg>
	);

	const IconSparkles = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="m12 3-1.9 4.8-4.8 1.9 4.8 1.9L12 16l1.9-4.8 4.8-1.9-4.8-1.9L12 3z" />
	<path d="M5 21v-3.8" />
	<path d="M19 21v-3.8" />
	<path d="M3 12H7.8" />
	<path d="M16.2 12H21" />
	</svg>
	);

	const IconSettings = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l-.15-.09a2 2 0 0 0 .73 2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
	<circle cx="12" cy="12" r="3" />
	</svg>
	);

	const IconPlus = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M5 12h14" />
	<path d="M12 5v14" />
	</svg>
	);

	const IconX = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M18 6 6 18" />
	<path d="m6 6 12 12" />
	</svg>
	);

	const IconSearch = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<circle cx="11" cy="11" r="8" />
	<path d="m21 21-4.3-4.3" />
	</svg>
	);

	const IconMic = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
	<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
	<line x1="12" x2="12" y1="19" y2="22" />
	</svg>
	);

	const IconSend = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="m22 2-7 20-4-9-9-4Z" />
	<path d="m22 2-11 11" />
	</svg>
	);

	const IconGrid = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<rect width="7" height="7" x="3" y="3" rx="1" />
	<rect width="7" height="7" x="14" y="3" rx="1" />
	<rect width="7" height="7" x="14" y="14" rx="1" />
	<rect width="7" height="7" x="3" y="14" rx="1" />
	</svg>
	);

	const IconLayers = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<polygon points="12 2 2 7 12 12 22 7 12 2" />
	<polyline points="2 17 12 22 22 17" />
	<polyline points="2 12 12 17 22 12" />
	</svg>
	);

	const IconCheckSquare = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<polyline points="9 11 12 14 22 4" />
	<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
	</svg>
	);

	const IconCalendar = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
	<line x1="16" x2="16" y1="2" y2="6" />
	<line x1="8" x2="8" y1="2" y2="6" />
	<line x1="3" x2="21" y1="10" y2="10" />
	</svg>
	);

	const IconCloud = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
	</svg>
	);

	const IconSun = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<circle cx="12" cy="12" r="5" />
	<line x1="12" x2="12" y1="1" y2="3" />
	<line x1="12" x2="12" y1="21" y2="23" />
	<line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
	<line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
	<line x1="1" x2="3" y1="12" y2="12" />
	<line x1="21" x2="23" y1="12" y2="12" />
	<line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
	<line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
	</svg>
	);

	const IconMoon = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
	</svg>
	);

	const IconCode = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<polyline points="16 18 22 12 16 6" />
	<polyline points="8 6 2 12 8 18" />
	</svg>
	);

	const IconBrain = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 2.5 2.5 0 0 1-.34-5.99 2.5 2.5 0 0 1 5.76-1.24Z"/>
	<path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 2.5 2.5 0 0 0 .34-5.99 2.5 2.5 0 0 0-5.76-1.24Z"/>
	</svg>
	);

	const IconZap = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
	</svg>
	);

	const IconShield = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
	</svg>
	);

	const IconDownload = (props) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
	<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
	<polyline points="7 10 12 15 17 10"/>
	<line x1="12" y1="15" x2="12" y2="3"/>
	</svg>
	);

	// --- Search Engines Configuration ---
	const SEARCH_ENGINES = {
	google: {
	name: "Google",
	url: "https://www.google.com/search?q=",
	icon: "🔍",
	suggestionUrl: "https://suggestqueries.google.com/complete/search?client=firefox&q="
	},
	bing: {
	name: "Bing",
	url: "https://www.bing.com/search?q=",
	icon: "🔎",
	suggestionUrl: "https://api.bing.com/osjson.aspx?query="
	},
	duckduckgo: {
	name: "DuckDuckGo",
	url: "https://duckduckgo.com/?q=",
	icon: "🦆",
	suggestionUrl: "https://duckduckgo.com/ac/?q="
	},
	brave: {
	name: "Brave",
	url: "https://search.brave.com/search?q=",
	icon: "🦁",
	suggestionUrl: "https://search.brave.com/api/suggest?q="
	},
	youtube: {
	name: "YouTube",
	url: "https://www.youtube.com/results?search_query=",
	icon: "📺",
	suggestionUrl: "https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q="
	}
	};

	// --- Enhanced Mock Data ---
	const initialTabs = [
	{
	id: 1,
	title: "NovaBrowse AI Dashboard",
	url: "nova://dashboard",
	topic: "home",
	favicon: "🚀",
	lastActive: "now",
	isProtected: true
	},
	{
	id: 2,
	title: "Google",
	url: "https://www.google.com",
	topic: "search",
	favicon: "🔍",
	lastActive: "5m ago",
	searchEngine: "google"
	}
	];

	const topicColorsMap = {
	home: { border: "border-blue-500", text: "text-blue-400", bg: "bg-blue-500", gradient: "from-blue-500 to-cyan-500" },
	research: { border: "border-purple-500", text: "text-purple-400", bg: "bg-purple-500", gradient: "from-purple-500 to-pink-500" },
	work: { border: "border-green-500", text: "text-green-400", bg: "bg-green-500", gradient: "from-green-500 to-emerald-500" },
	entertainment: { border: "border-red-500", text: "text-red-400", bg: "bg-red-500", gradient: "from-red-500 to-orange-500" },
	search: { border: "border-yellow-500", text: "text-yellow-400", bg: "bg-yellow-500", gradient: "from-yellow-500 to-orange-500" },
	default: { border: "border-gray-500", text: "text-gray-400", bg: "bg-gray-500", gradient: "from-gray-500 to-slate-500" },
	};

	const mockWidgets = [
	{ id: 1, icon: <IconCalendar className="w-6 h-6" />, title: "Calendar", content: "3 Meetings Today", metric: "+2 from yesterday", trend: "up" },
	{ id: 2, icon: <IconCheckSquare className="w-6 h-6" />, title: "To-Do", content: "Finish browser prototype.", metric: "75% completed", trend: "up" },
	{ id: 3, icon: <IconCloud className="w-6 h-6" />, title: "Weather", content: "24°C, Clear", metric: "Perfect for focus", trend: "stable" },
	{ id: 4, icon: <IconSparkles className="w-6 h-6" />, title: "AI Tip", content: "Try 'Summarize this' on any article.", metric: "Saves 5min avg", trend: "up" },
	];

	const aiCommands = [
	{ command: "Summarize this page", icon: "📄", description: "Get key points from current tab" },
	{ command: "Organize my tabs", icon: "🗂️", description: "AI-powered tab grouping" },
	{ command: "Find research papers", icon: "🔍", description: "Academic search optimization" },
	{ command: "Translate to Spanish", icon: "🌎", description: "Real-time page translation" },
	];

	// --- Main Component ---
	export default function AdvancedBrowser() {
	const [tabs, setTabs] = useState(initialTabs);
	const [activeTabId, setActiveTabId] = useState(1);
	const [activePage, setActivePage] = useState('dashboard');
	const [isCopilotOpen, setIsCopilotOpen] = useState(false);
	const [copilotMessages, setCopilotMessages] = useState([
	{ from: "ai", text: "Hello! I am Nova, your AI assistant. How can I help you browse today?" }
	]);
	const [copilotInput, setCopilotInput] = useState("");
	const [isAiThinking, setIsAiThinking] = useState(false);
	const [searchTerm, setSearchTerm] = useState("");
	const [theme, setTheme] = useState('dark');
	const [isListening, setIsListening] = useState(false);
	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
	const [showCommandPalette, setShowCommandPalette] = useState(false);
	const [performanceMetrics, setPerformanceMetrics] = useState({
	memory: "1.2GB", cpu: "15%", network: "45ms", tabs: "2 open"
	});
	const [currentUrl, setCurrentUrl] = useState("nova://dashboard");
	const [isLoading, setIsLoading] = useState(false);
	const [searchSuggestions, setSearchSuggestions] = useState([]);
	const [showSuggestions, setShowSuggestions] = useState(false);
	const [currentSearchEngine, setCurrentSearchEngine] = useState("google");
	const [downloads, setDownloads] = useState([]);
	const [securityStatus, setSecurityStatus] = useState("secure");
	const [bookmarks, setBookmarks] = useState([]);
	const [history, setHistory] = useState([]);

	const copilotMessagesEndRef = useRef(null);
	const speechRecognitionRef = useRef(null);
	const searchInputRef = useRef(null);
	const iframeRef = useRef(null);

	const activeTab = tabs.find(t => t.id === activeTabId);

	// Enhanced theme simulation
	useEffect(() => {
	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
	setTheme(mediaQuery.matches ? 'dark' : 'light');

	const handler = (e) => setTheme(e.matches ? 'dark' : 'light');
	mediaQuery.addEventListener('change', handler);
	return () => mediaQuery.removeEventListener('change', handler);
	}, []);

	// Enhanced scroll effect
	useEffect(() => {
	copilotMessagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
	}, [copilotMessages]);

	// Enhanced speech recognition
	useEffect(() => {
	const SpeechRecognition = window.SpeechRecognition \|\| window.webkitSpeechRecognition;
	if (SpeechRecognition) {
	const recognition = new SpeechRecognition();
	recognition.continuous = false;
	recognition.interimResults = false;
	recognition.lang = 'en-US';

	recognition.onstart = () => setIsListening(true);
	recognition.onend = () => setIsListening(false);
	recognition.onresult = (event) => {
	const transcript = event.results[0][0].transcript;
	setSearchTerm(transcript);
	handleSearch(transcript);
	};
	recognition.onerror = (event) => {
	console.error("Speech recognition error:", event.error);
	setIsListening(false);
	};

	speechRecognitionRef.current = recognition;
	}
	}, []);

	// Command palette shortcut
	useEffect(() => {
	const handleKeyDown = (e) => {
	if ((e.metaKey \|\| e.ctrlKey) && e.key === 'k') {
	e.preventDefault();
	setShowCommandPalette(true);
	setTimeout(() => searchInputRef.current?.focus(), 100);
	}
	if (e.key === 'Escape') {
	setShowCommandPalette(false);
	setShowSuggestions(false);
	}
	if ((e.metaKey \|\| e.ctrlKey) && e.key === 't') {
	e.preventDefault();
	handleNewTab();
	}
	if ((e.metaKey \|\| e.ctrlKey) && e.key === 'w') {
	e.preventDefault();
	if (tabs.length > 1) {
	handleCloseTab(null, activeTabId);
	}
	}
	};
	window.addEventListener('keydown', handleKeyDown);
	return () => window.removeEventListener('keydown', handleKeyDown);
	}, [tabs, activeTabId]);

	// Search suggestions
	useEffect(() => {
	if (searchTerm.length > 2) {
	fetchSearchSuggestions(searchTerm);
	} else {
	setSearchSuggestions([]);
	}
	}, [searchTerm]);

	const fetchSearchSuggestions = async (query) => {
	try {
	const engine = SEARCH_ENGINES[currentSearchEngine];
	const response = await fetch(`${engine.suggestionUrl}${encodeURIComponent(query)}`);
	const data = await response.json();
	setSearchSuggestions(data[1] \|\| []);
	setShowSuggestions(true);
	} catch (error) {
	console.error("Failed to fetch suggestions:", error);
	}
	};

	const toggleTheme = () => {
	setTheme(t => (t === 'dark' ? 'light' : 'dark'));
	};

	const getTopicColor = useCallback((topic, type = 'border') => {
	const colors = topicColorsMap[topic] \|\| topicColorsMap.default;
	return colors[type];
	}, []);

	const handleTabClick = (id) => {
	setActiveTabId(id);
	const tab = tabs.find(t => t.id === id);
	setCurrentUrl(tab.url);
	setActivePage(tab.url === "nova://dashboard" ? 'dashboard' : 'web');
	};

	const handleNewTab = (url = "nova://dashboard", title = "New Tab") => {
	const newId = Math.max(0, ...tabs.map(t => t.id)) + 1;
	const newTab = {
	id: newId,
	title: title,
	url: url,
	topic: url === "nova://dashboard" ? "home" : "default",
	favicon: "🌐",
	lastActive: "now"
	};
	setTabs([...tabs, newTab]);
	setActiveTabId(newId);
	setCurrentUrl(url);
	setActivePage(url === "nova://dashboard" ? 'dashboard' : 'web');
	};

	const handleCloseTab = (e, id) => {
	e?.stopPropagation();

	if (tabs.length === 1) {
	handleNewTab();
	setTabs(tabs.filter(t => t.id !== id));
	return;
	}

	const newTabs = tabs.filter(t => t.id !== id);
	setTabs(newTabs);

	if (activeTabId === id) {
	const newActiveId = newTabs[newTabs.length - 1].id;
	setActiveTabId(newActiveId);
	const newActiveTab = newTabs.find(t => t.id === newActiveId);
	setCurrentUrl(newActiveTab.url);
	setActivePage(newActiveTab.url === "nova://dashboard" ? 'dashboard' : 'web');
	}
	};

	const organizeTabsByAi = () => {
	const sortedTabs = [...tabs].sort((a, b) => a.topic.localeCompare(b.topic));
	setTabs(sortedTabs);
	};

	const handleSearch = (query, engine = currentSearchEngine) => {
	if (!query?.trim()) return;

	setIsLoading(true);
	setSearchTerm(query);

	const searchUrl = SEARCH_ENGINES[engine].url + encodeURIComponent(query);
	const searchTab = tabs.find(t => t.url.includes(SEARCH_ENGINES[engine].url));

	if (searchTab) {
	const updatedTabs = tabs.map(t =>
	t.id === searchTab.id ? { ...t, url: searchUrl, title: `${SEARCH_ENGINES[engine].name} Search` } : t
	);
	setTabs(updatedTabs);
	setActiveTabId(searchTab.id);
	} else {
	handleNewTab(searchUrl, `${SEARCH_ENGINES[engine].name} Search`);
	}

	setCurrentUrl(searchUrl);
	setActivePage('web');
	setShowSuggestions(false);

	// Add to history
	setHistory(prev => [...prev, {
	url: searchUrl,
	title: `${query} - ${SEARCH_ENGINES[engine].name} Search`,
	timestamp: new Date().toISOString()
	}]);
	};

	const handleUrlNavigation = (url) => {
	if (!url) return;

	let finalUrl = url;
	if (!url.startsWith('http') && !url.startsWith('nova://')) {
	finalUrl = SEARCH_ENGINES[currentSearchEngine].url + encodeURIComponent(url);
	}

	setIsLoading(true);
	setCurrentUrl(finalUrl);

	const updatedTabs = tabs.map(t =>
	t.id === activeTabId ? { ...t, url: finalUrl, title: "Loading..." } : t
	);
	setTabs(updatedTabs);

	if (finalUrl.startsWith('nova://')) {
	setActivePage('dashboard');
	} else {
	setActivePage('web');
	}
	};

	const handleVoiceSearch = () => {
	if (speechRecognitionRef.current && !isListening) {
	speechRecognitionRef.current.start();
	} else if (isListening) {
	speechRecognitionRef.current.stop();
	}
	};

	const handleDownload = (url, filename) => {
	const downloadId = Date.now();
	const newDownload = {
	id: downloadId,
	url,
	filename: filename \|\| `download-${downloadId}`,
	progress: 0,
	status: 'downloading'
	};

	setDownloads(prev => [...prev, newDownload]);

	// Simulate download progress
	const interval = setInterval(() => {
	setDownloads(prev => prev.map(d =>
	d.id === downloadId
	? { ...d, progress: Math.min(d.progress + 10, 100) }
	: d
	));
	}, 200);

	setTimeout(() => {
	clearInterval(interval);
	setDownloads(prev => prev.map(d =>
	d.id === downloadId
	? { ...d, progress: 100, status: 'completed' }
	: d
	));
	}, 2000);
	};

	const addBookmark = (url, title) => {
	const newBookmark = {
	id: Date.now(),
	url,
	title,
	favicon: "🔖",
	dateAdded: new Date().toISOString()
	};
	setBookmarks(prev => [...prev, newBookmark]);
	};

	const removeBookmark = (id) => {
	setBookmarks(prev => prev.filter(b => b.id !== id));
	};

	const handleIframeLoad = () => {
	setIsLoading(false);
	const updatedTabs = tabs.map(t =>
	t.id === activeTabId ? { ...t, title: iframeRef.current?.contentDocument?.title \|\| t.title } : t
	);
	setTabs(updatedTabs);

	// Update security status based on URL
	const isSecure = currentUrl.startsWith('https://');
	setSecurityStatus(isSecure ? 'secure' : 'insecure');
	};

	const Sidebar = () => (
	<nav className={`flex flex-col h-full py-4 glass-ui transition-all duration-300 ${
	sidebarCollapsed ? 'w-16' : 'w-20'
	} ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} flex-shrink-0`}>
	<div className={`p-2 mb-6 transition-all duration-300 ${
	theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
	} hover:opacity-80 hover:scale-110 cursor-pointer`}>
	<IconNova className="w-8 h-8" />
	</div>

	<div className="flex flex-col items-center space-y-4 flex-1">
	{[
	{ icon: <IconHome />, page: 'dashboard', label: 'Home' },
	{ icon: <IconGrid />, page: 'tabs', label: 'Tabs' },
	{ icon: <IconLayers />, page: 'bookmarks', label: 'Bookmarks' },
	{ icon: <IconDownload />, page: 'downloads', label: 'Downloads' },
	{ icon: <IconCode />, page: 'developer', label: 'Dev Tools' },
	{ icon: <IconBrain />, page: 'ai', label: 'AI Studio' },
	].map((item) => (
	<button
	key={item.page}
	onClick={() => {
	setActivePage(item.page);
	if (item.page === 'dashboard') {
	handleNewTab("nova://dashboard", "NovaBrowse Dashboard");
	}
	}}
	className={`p-3 rounded-xl transition-all duration-300 group relative ${
	activePage === item.page
	? 'bg-gradient-to-br from-blue-500 to-purple-600 text-white shadow-lg'
	: 'hover:bg-gray-500/20'
	}`}
	title={item.label}
	>
	{React.cloneElement(item.icon, { className: "w-6 h-6" })}
	{!sidebarCollapsed && (
	<span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
	{item.label}
	</span>
	)}
	</button>
	))}
	</div>

	<div className="space-y-4">
	<button
	onClick={toggleTheme}
	className="p-3 rounded-xl transition-all duration-300 hover:bg-gray-500/20 group relative"
	title="Toggle Theme"
	>
	{theme === 'dark' ? <IconSun className="w-6 h-6" /> : <IconMoon className="w-6 h-6" />}
	{!sidebarCollapsed && (
	<span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
	Toggle Theme
	</span>
	)}
	</button>

	<button
	className="p-3 rounded-xl transition-all duration-300 hover:bg-gray-500/20 group relative"
	title="Settings"
	>
	<IconSettings className="w-6 h-6" />
	{!sidebarCollapsed && (
	<span className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
	Settings
	</span>
	)}
	</button>
	</div>
	</nav>
	);

	const TabStrip = () => (
	<div className={`flex items-center w-full h-14 overflow-x-auto glass-ui-top border-b ${
	theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
	}`}>
	<div className="flex h-full">
	{tabs.map(tab => (
	<div
	key={tab.id}
	onClick={() => handleTabClick(tab.id)}
	className={`group relative flex items-center justify-between px-4 h-full min-w-[180px] max-w-[240px] cursor-pointer transition-all duration-300 border-r ${
	activeTabId === tab.id
	? 'bg-gradient-to-r from-blue-500/20 to-purple-500/10'
	: (theme === 'dark' ? 'bg-gray-800/10 hover:bg-gray-500/20' : 'bg-white/10 hover:bg-gray-200/20')
	} ${theme === 'dark' ? 'border-gray-700/30' : 'border-gray-300/30'}`}
	>
	<div className={`absolute inset-0 rounded-t-lg ${
	activeTabId === tab.id ? getTopicColor(tab.topic, 'border') : 'border-transparent'
	} border-t-2`}></div>

	<div className="flex items-center space-x-3 flex-1 min-w-0">
	<span className="text-lg">{tab.favicon}</span>
	<span className={`text-sm truncate font-medium ${
	theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
	}`}>{tab.title}</span>
	</div>

	<button
	onClick={(e) => handleCloseTab(e, tab.id)}
	className={`ml-2 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all ${
	theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
	} hover:bg-red-500/50 hover:text-white`}
	>
	<IconX className="w-3 h-3" />
	</button>
	</div>
	))}
	</div>

	<button
	onClick={() => handleNewTab()}
	className={`px-4 h-full transition-all duration-300 ${
	theme === 'dark'
	? 'bg-gray-800/20 text-gray-400 hover:bg-blue-500/20 hover:text-white'
	: 'bg-gray-100/20 text-gray-600 hover:bg-blue-500/20 hover:text-white'
	}`}
	>
	<IconPlus className="w-5 h-5" />
	</button>
	</div>
	);

	const AddressBar = () => (
	<div className="flex items-center w-full h-16 p-3 glass-ui-top">
	<div className="flex items-center space-x-2 mr-4">
	<button
	onClick={() => activeTabId && handleCloseTab(null, activeTabId)}
	className={`p-2 rounded-xl transition-all ${
	theme === 'dark' ? 'hover:bg-gray-700/50 text-gray-400' : 'hover:bg-gray-300/50 text-gray-600'
	}`}
	title="Close Tab (Ctrl+W)"
	>
	<IconX className="w-4 h-4" />
	</button>

	<button
	onClick={() => handleNewTab()}
	className={`p-2 rounded-xl transition-all ${
	theme === 'dark' ? 'hover:bg-gray-700/50 text-gray-400' : 'hover:bg-gray-300/50 text-gray-600'
	}`}
	title="New Tab (Ctrl+T)"
	>
	<IconPlus className="w-4 h-4" />
	</button>
	</div>

	<div className={`flex items-center w-full max-w-4xl rounded-2xl glass-ui-inset p-1 ${
	theme === 'dark' ? 'shadow-inner-dark' : 'shadow-inner'
	} relative`}>
	{/* Search Engine Selector */}
	<div className="relative group">
	<button className="flex items-center px-3 py-2 rounded-xl mr-2 transition-all bg-gray-500/20 hover:bg-gray-500/30">
	<span className="text-lg mr-2">{SEARCH_ENGINES[currentSearchEngine].icon}</span>
	<span className="text-sm font-medium">{SEARCH_ENGINES[currentSearchEngine].name}</span>
	</button>

	<div className="absolute top-full left-0 mt-2 w-48 rounded-2xl glass-ui-copilot border border-gray-500/30 shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
	{Object.entries(SEARCH_ENGINES).map(([key, engine]) => (
	<button
	key={key}
	onClick={() => setCurrentSearchEngine(key)}
	className={`w-full text-left p-3 flex items-center space-x-3 transition-all ${
	currentSearchEngine === key
	? 'bg-blue-500/20 text-blue-300'
	: 'hover:bg-gray-500/20 text-gray-300'
	}`}
	>
	<span className="text-lg">{engine.icon}</span>
	<span>{engine.name}</span>
	</button>
	))}
	</div>
	</div>

	<input
	ref={searchInputRef}
	type="text"
	placeholder={`Search with ${SEARCH_ENGINES[currentSearchEngine].name} or enter address...`}
	className={`flex-1 py-3 bg-transparent ${
	theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
	} focus:outline-none font-body text-lg`}
	value={searchTerm}
	onChange={(e) => setSearchTerm(e.target.value)}
	onKeyDown={(e) => e.key === 'Enter' && handleSearch(searchTerm)}
	onFocus={() => searchTerm.length > 2 && setShowSuggestions(true)}
	/>

	{isLoading && (
	<div className="absolute right-16 top-1/2 transform -translate-y-1/2">
	<div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
	</div>
	)}

	<button
	onClick={handleVoiceSearch}
	className={`p-3 mx-1 rounded-xl transition-all ${
	theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
	} hover:bg-blue-500/30 hover:text-white ${isListening ? 'animate-pulse-glow bg-red-500/20' : ''}`}
	title="Voice Command"
	>
	<IconMic className="w-5 h-5" />
	</button>

	{/* Security Indicator */}
	<div className={`px-3 py-1 rounded-lg mr-2 ${
	securityStatus === 'secure'
	? 'bg-green-500/20 text-green-400'
	: 'bg-red-500/20 text-red-400'
	}`}>
	<IconShield className="w-4 h-4" />
	</div>
	</div>

	{/* Search Suggestions */}
	{showSuggestions && searchSuggestions.length > 0 && (
	<div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 w-full max-w-2xl rounded-2xl glass-ui-copilot border border-gray-500/30 shadow-2xl z-40">
	{searchSuggestions.slice(0, 8).map((suggestion, index) => (
	<button
	key={index}
	onClick={() => {
	setSearchTerm(suggestion);
	handleSearch(suggestion);
	}}
	className="w-full text-left p-4 hover:bg-gray-500/20 transition-all border-b border-gray-500/10 last:border-b-0"
	>
	<div className="flex items-center space-x-3">
	<IconSearch className="w-4 h-4 text-gray-400" />
	<span className="text-gray-200">{suggestion}</span>
	</div>
	</button>
	))}
	</div>
	)}

	<div className="flex items-center space-x-2 ml-4">
	<button
	onClick={() => currentUrl && addBookmark(currentUrl, activeTab?.title)}
	className={`p-3 rounded-xl transition-all duration-300 ${
	theme === 'dark' ? 'text-yellow-400 hover:bg-yellow-500/20' : 'text-yellow-600 hover:bg-yellow-500/10'
	}`}
	title="Bookmark this page"
	>
	🔖
	</button>

	<button
	onClick={() => setIsCopilotOpen(true)}
	className="relative p-3 text-blue-300 rounded-xl transition-all duration-300 hover:bg-blue-500/30 hover:text-blue-100 neon-button-glow group"
	title="AI Copilot"
	>
	<IconSparkles className="w-6 h-6" />
	<span className="absolute -top-1 -right-1 w-3 h-3 bg-blue-400 rounded-full animate-pulse"></span>
	<span className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
	AI Assistant
	</span>
	</button>
	</div>
	</div>
	);

	const WebView = () => (
	<div className="w-full h-full relative">
	{isLoading && (
	<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 z-10">
	<div className="h-full bg-blue-400 animate-pulse" style={{ width: '80%' }}></div>
	</div>
	)}

	{currentUrl.startsWith('nova://') ? (
	<EnhancedDashboard />
	) : (
	<iframe
	ref={iframeRef}
	src={currentUrl}
	className="w-full h-full border-0"
	onLoad={handleIframeLoad}
	title="Web Content"
	sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
	/>
	)}
	</div>
	);

	const EnhancedDashboard = () => (
	<div className="h-full overflow-y-auto">
	<div className="absolute inset-0 -z-10">
	<div className={`absolute inset-0 opacity-20 ${
	theme === 'dark'
	? 'bg-gradient-to-br from-blue-900/30 via-purple-900/20 to-cyan-900/30'
	: 'bg-gradient-to-br from-blue-100/50 via-purple-100/30 to-cyan-100/50'
	}`}></div>
	</div>

	<div className="container mx-auto px-8 py-12">
	<div className="text-center mb-16">
	<h1 className="text-7xl font-black bg-gradient-to-r from-blue-400 via-purple-500 to-cyan-400 bg-clip-text text-transparent mb-6 animate-gradient">
	NovaBrowse AI
	</h1>
	<p className={`text-2xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} font-light mb-8`}>
	The Future of Intelligent Browsing
	</p>

	<div className="w-full max-w-3xl mx-auto mb-16">
	<div className={`relative rounded-3xl glass-ui p-2 shadow-2xl neon-focus-glow ${
	theme === 'light' ? 'border-gray-300/50' : ''
	}`}>
	<IconSearch className={`absolute left-6 top-1/2 transform -translate-y-1/2 w-6 h-6 ${
	theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
	}`} />
	<input
	type="text"
	placeholder="Ask Nova anything or search the web..."
	className={`w-full p-4 pl-16 text-xl bg-transparent ${
	theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
	} focus:outline-none font-body`}
	value={searchTerm}
	onChange={(e) => setSearchTerm(e.target.value)}
	onKeyDown={(e) => e.key === 'Enter' && handleSearch(searchTerm)}
	/>
	<button
	onClick={handleVoiceSearch}
	className={`absolute right-4 top-1/2 transform -translate-y-1/2 p-3 rounded-2xl transition-all ${
	theme === 'dark' ? 'text-gray-300' : 'text-gray-700'
	} hover:bg-blue-500/30 hover:text-white ${isListening ? 'animate-pulse-glow bg-red-500/20' : ''}`}
	>
	<IconMic className="w-6 h-6" />
	</button>
	</div>
	</div>
	</div>

	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
	{mockWidgets.map((widget, i) => (
	<div
	key={widget.id}
	className="group p-6 rounded-2xl glass-ui hover-3d-tilt transition-all duration-500 animate-fade-in-up cursor-pointer border border-gray-500/10 hover:border-blue-500/30"
	style={{ animationDelay: `${i * 100}ms` }}
	>
	<div className="flex items-center justify-between mb-4">
	<div className={`p-3 rounded-xl bg-gradient-to-br ${getTopicColor('home', 'gradient')}`}>
	{widget.icon}
	</div>
	<div className={`text-sm px-2 py-1 rounded-lg ${
	widget.trend === 'up' ? 'bg-green-500/20 text-green-400' :
	widget.trend === 'down' ? 'bg-red-500/20 text-red-400' :
	'bg-blue-500/20 text-blue-400'
	}`}>
	{widget.metric}
	</div>
	</div>

	<h3 className={`text-lg font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
	{widget.title}
	</h3>
	<p className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'} mb-4`}>
	{widget.content}
	</p>

	<div className="w-full bg-gray-500/20 rounded-full h-1">
	<div className={`h-1 rounded-full bg-gradient-to-r ${getTopicColor('home', 'gradient')} ${
	widget.trend === 'up' ? 'w-3/4' : 'w-1/2'
	}`}></div>
	</div>
	</div>
	))}
	</div>

	<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
	{aiCommands.slice(0, 4).map((cmd, i) => (
	<button
	key={i}
	onClick={() => {
	setCopilotInput(cmd.command);
	setIsCopilotOpen(true);
	}}
	className={`p-4 rounded-2xl glass-ui transition-all duration-300 hover:scale-105 group ${
	theme === 'dark' ? 'hover:bg-blue-500/20' : 'hover:bg-blue-500/10'
	}`}
	>
	<div className="text-2xl mb-2">{cmd.icon}</div>
	<div className={`text-sm font-medium text-left ${
	theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
	}`}>{cmd.command}</div>
	<div className={`text-xs text-left ${
	theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
	}`}>{cmd.description}</div>
	</button>
	))}
	</div>

	{/* Quick Access Sites */}
	<div className="mt-16">
	<h2 className={`text-3xl font-bold mb-8 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
	Quick Access
	</h2>
	<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
	{Object.entries(SEARCH_ENGINES).map(([key, engine]) => (
	<button
	key={key}
	onClick={() => handleNewTab(engine.url, `${engine.name} Home`)}
	className="p-6 rounded-2xl glass-ui transition-all duration-300 hover:scale-105 group text-center"
	>
	<div className="text-3xl mb-3">{engine.icon}</div>
	<div className={`text-sm font-medium ${
	theme === 'dark' ? 'text-gray-200' : 'text-gray-800'
	}`}>{engine.name}</div>
	</button>
	))}
	</div>
	</div>
	</div>
	</div>
	);

	const BookmarksView = () => (
	<div className="p-8">
	<div className="flex items-center justify-between mb-8">
	<h1 className="text-5xl font-black bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
	Bookmarks
	</h1>
	<button
	onClick={() => currentUrl && addBookmark(currentUrl, activeTab?.title)}
	className="px-6 py-3 rounded-2xl bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold hover:scale-105 transition-transform shadow-lg"
	>
	+ Add Current Page
	</button>
	</div>

	{bookmarks.length === 0 ? (
	<div className="text-center py-16">
	<div className="text-6xl mb-4">🔖</div>
	<h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
	No bookmarks yet
	</h3>
	<p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
	Bookmark your favorite sites for quick access
	</p>
	</div>
	) : (
	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
	{bookmarks.map(bookmark => (
	<div
	key={bookmark.id}
	className="group p-6 rounded-2xl glass-ui h-32 flex flex-col justify-between cursor-pointer transition-all duration-300 hover-3d-tilt border-2 border-transparent hover:border-yellow-500/50"
	onClick={() => handleNewTab(bookmark.url, bookmark.title)}
	>
	<div className="flex items-start justify-between">
	<div className="flex-1 min-w-0">
	<div className="text-2xl mb-2">{bookmark.favicon}</div>
	<p className={`font-semibold text-lg truncate ${
	theme === 'dark' ? 'text-white' : 'text-gray-900'
	}`}>{bookmark.title}</p>
	<p className={`text-sm mt-1 truncate ${
	theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
	}`}>{new URL(bookmark.url).hostname}</p>
	</div>

	<button
	onClick={(e) => {
	e.stopPropagation();
	removeBookmark(bookmark.id);
	}}
	className={`p-2 rounded-xl opacity-0 group-hover:opacity-100 transition-all ${
	theme === 'dark' ? 'bg-gray-700 text-gray-400' : 'bg-gray-300 text-gray-600'
	} hover:bg-red-500 hover:text-white`}
	>
	<IconX className="w-4 h-4" />
	</button>
	</div>
	</div>
	))}
	</div>
	)}
	</div>
	);

	const DownloadsView = () => (
	<div className="p-8">
	<h1 className="text-5xl font-black bg-gradient-to-r from-green-400 to-cyan-400 bg-clip-text text-transparent mb-8">
	Downloads
	</h1>

	{downloads.length === 0 ? (
	<div className="text-center py-16">
	<IconDownload className="w-16 h-16 mx-auto mb-4 text-gray-400" />
	<h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
	No downloads yet
	</h3>
	<p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
	Your downloaded files will appear here
	</p>
	</div>
	) : (
	<div className="space-y-4">
	{downloads.map(download => (
	<div key={download.id} className="p-6 rounded-2xl glass-ui">
	<div className="flex items-center justify-between">
	<div className="flex items-center space-x-4">
	<IconDownload className="w-8 h-8 text-green-400" />
	<div>
	<h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
	{download.filename}
	</h3>
	<p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
	{download.status === 'completed' ? 'Completed' : 'Downloading...'}
	</p>
	</div>
	</div>

	<div className="flex items-center space-x-4">
	<div className="w-32 bg-gray-500/20 rounded-full h-2">
	<div
	className="h-2 rounded-full bg-gradient-to-r from-green-500 to-cyan-500 transition-all duration-300"
	style={{ width: `${download.progress}%` }}
	></div>
	</div>
	<span className={`text-sm font-mono ${
	theme === 'dark' ? 'text-gray-400' : 'text-gray-600'
	}`}>
	{download.progress}%
	</span>
	</div>
	</div>
	</div>
	))}
	</div>
	)}
	</div>
	);

	const MainContent = () => (
	<div className="flex-1 w-full h-full overflow-y-auto">
	{activePage === 'dashboard' && <EnhancedDashboard />}
	{activePage === 'web' && <WebView />}
	{activePage === 'tabs' && <EnhancedTabGridView />}
	{activePage === 'bookmarks' && <BookmarksView />}
	{activePage === 'downloads' && <DownloadsView />}
	{activePage === 'developer' && <EnhancedDeveloperView />}
	{activePage === 'ai' && <AIStudioView />}
	</div>
	);

	// ... (Other view components like EnhancedTabGridView, EnhancedDeveloperView, AIStudioView remain similar but updated)

	const Copilot = () => (
	<div
	className={`fixed top-0 right-0 h-full w-full max-w-md z-50 transform transition-all duration-500 ease-out ${
	isCopilotOpen ? 'translate-x-0' : 'translate-x-full'
	}`}
	>
	<div className="flex flex-col h-full glass-ui-copilot border-l border-blue-500/30 shadow-2xl shadow-black/50 backdrop-blur-xl">
	<div className={`flex items-center justify-between p-6 border-b ${
	theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
	} flex-shrink-0`}>
	<div className="flex items-center space-x-3">
	<div className="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500">
	<IconSparkles className="w-6 h-6 text-white" />
	</div>
	<div>
	<h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
	Nova Copilot
	</h2>
	<p className={`text-sm ${theme === 'dark' ? 'text-blue-300' : 'text-blue-600'}`}>
	{isAiThinking ? 'Thinking...' : 'Always learning'}
	</p>
	</div>
	</div>
	<button
	onClick={() => setIsCopilotOpen(false)}
	className={`p-2 rounded-xl transition-all ${
	theme === 'dark'
	? 'text-gray-400 hover:bg-gray-700/50 hover:text-white'
	: 'text-gray-600 hover:bg-gray-300/50 hover:text-gray-900'
	}`}
	>
	<IconX className="w-5 h-5" />
	</button>
	</div>

	<div className="flex-1 p-6 space-y-6 overflow-y-auto">
	{copilotMessages.map((msg, i) => (
	<div key={i} className={`flex ${msg.from === 'user' ? 'justify-end' : 'justify-start'}`}>
	<div
	className={`max-w-xs px-6 py-4 rounded-3xl transition-all duration-300 ${
	msg.from === 'user'
	? 'bg-gradient-to-br from-blue-500 to-cyan-500 text-white rounded-br-lg shadow-lg'
	: (theme === 'dark'
	? 'bg-gray-700/70 text-gray-200 rounded-bl-lg border border-gray-600/50'
	: 'bg-gray-200/70 text-gray-800 rounded-bl-lg border border-gray-300/50')
	} group hover:scale-105 cursor-pointer`}
	>
	<div className="flex items-center space-x-2 mb-2">
	{msg.from === 'ai' && (
	<div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
	<IconSparkles className="w-3 h-3 text-white" />
	</div>
	)}
	<span className={`text-xs font-semibold ${
	msg.from === 'user' ? 'text-blue-100' : (theme === 'dark' ? 'text-purple-300' : 'text-purple-600')
	}`}>
	{msg.from === 'user' ? 'You' : 'Nova AI'}
	</span>
	</div>
	<p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
	</div>
	</div>
	))}

	{isAiThinking && (
	<div className="flex justify-start">
	<div className={`max-w-xs px-6 py-4 rounded-3xl rounded-bl-lg ${
	theme === 'dark' ? 'bg-gray-700/70' : 'bg-gray-200/70'
	} border ${theme === 'dark' ? 'border-gray-600/50' : 'border-gray-300/50'}`}>
	<div className="flex items-center space-x-2">
	<div className="flex space-x-1">
	<div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce"></div>
	<div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
	<div className="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
	</div>
	<span className="text-sm text-blue-400">Nova is thinking...</span>
	</div>
	</div>
	</div>
	)}
	<div ref={copilotMessagesEndRef} />
	</div>

	<form onSubmit={(e) => {
	e.preventDefault();
	if (copilotInput.trim()) {
	setCopilotMessages(prev => [...prev, { from: 'user', text: copilotInput }]);
	setCopilotInput('');
	setIsAiThinking(true);
	setTimeout(() => {
	setCopilotMessages(prev => [...prev, {
	from: 'ai',
	text: "I'm an AI assistant in NovaBrowse. In a real implementation, I would connect to services like Gemini API to provide intelligent responses to your queries about browsing, searching, and productivity."
	}]);
	setIsAiThinking(false);
	}, 2000);
	}
	}} className={`p-6 border-t ${
	theme === 'dark' ? 'border-gray-500/20' : 'border-gray-300/30'
	} flex-shrink-0`}>
	<div className="flex items-center space-x-3">
	<div className="flex-1 rounded-2xl glass-ui-inset p-1">
	<input
	type="text"
	value={copilotInput}
	onChange={(e) => setCopilotInput(e.target.value)}
	placeholder="Ask Nova anything..."
	className={`w-full px-4 py-3 bg-transparent ${
	theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-black placeholder-gray-500'
	} focus:outline-none text-lg`}
	disabled={isAiThinking}
	/>
	</div>
	<button
	type="submit"
	className={`p-4 rounded-2xl transition-all duration-300 ${
	isAiThinking \|\| !copilotInput.trim()
	? 'bg-gray-500/20 text-gray-500 cursor-not-allowed'
	: 'bg-gradient-to-br from-blue-500 to-purple-500 text-white hover:scale-105 shadow-lg'
	}`}
	disabled={isAiThinking \|\| !copilotInput.trim()}
	>
	<IconSend className="w-5 h-5" />
	</button>
	</div>
	</form>
	</div>
	</div>
	);

	return (
	<>
	<style>{`
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Nunito+Sans:wght@400;700&family=Orbitron:wght@500;700;900&family=Poppins:wght@500;700;900&display=swap');

	body {
	font-family: 'Inter', sans-serif;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.font-heading {
	font-family: 'Orbitron', sans-serif;
	}

	.font-body {
	font-family: 'Nunito Sans', sans-serif;
	}

	.font-mono {
	font-family: 'Orbitron', sans-serif;
	}

	/* Enhanced Glassmorphism */
	.glass-ui {
	background: ${theme === 'dark' ? 'rgba(30, 30, 40, 0.4)' : 'rgba(255, 255, 255, 0.3)'};
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid ${theme === 'dark' ? 'rgba(255, 255, 255, 0.125)' : 'rgba(255, 255, 255, 0.3)'};
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	.glass-ui-light {
	background: ${theme === 'dark' ? 'rgba(40, 40, 50, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid ${theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.2)'};
	}

	.glass-ui-top {
	background: ${theme === 'dark' ? 'rgba(23, 23, 33, 0.6)' : 'rgba(240, 240, 255, 0.5)'};
	backdrop-filter: blur(24px) saturate(200%);
	-webkit-backdrop-filter: blur(24px) saturate(200%);
	}

	.glass-ui-copilot {
	background: ${theme === 'dark' ? 'rgba(15, 15, 25, 0.85)' : 'rgba(230, 230, 245, 0.9)'};
	backdrop-filter: blur(32px) saturate(200%);
	-webkit-backdrop-filter: blur(32px) saturate(200%);
	}

	.glass-ui-inset {
	background: ${theme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
	box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
	}

	/* Enhanced Animations */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.animate-fade-in-up {
	animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	opacity: 0;
	}

	@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
	}

	.animate-gradient {
	background-size: 200% 200%;
	animation: gradient 6s ease infinite;
	}

	@keyframes pulseGlow {
	0%, 100% {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
	}
	50% {
	box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
	}
	}

	.animate-pulse-glow {
	animation: pulseGlow 2s infinite;
	}

	.hover-3d-tilt {
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.hover-3d-tilt:hover {
	transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
	}

	.neon-button-glow {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3);
	}

	.neon-focus-glow:focus-within {
	box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.4);
	border-color: rgba(59, 130, 246, 0.8);
	}

	/* Custom scrollbar */
	::-webkit-scrollbar {
	width: 8px;
	}
	::-webkit-scrollbar-track {
	background: ${theme === 'dark' ? '#1a1a2e' : '#f1f1f1'};
	border-radius: 4px;
	}
	::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
	border-radius: 4px;
	}
	::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #2563eb, #7c3aed);
	}

	::selection {
	background: rgba(59, 130, 246, 0.3);
	}
	`}</style>

	<div className={`flex w-full h-screen overflow-hidden transition-colors duration-500 ${
	theme === 'dark' ? 'text-white bg-gray-900' : 'text-gray-900 bg-gray-100'
	}`}>

	<div className="fixed inset-0 -z-10">
	<div className={`absolute inset-0 transition-all duration-1000 ${
	theme === 'dark'
	? 'bg-gradient-to-br from-gray-900 via-[#0a0a2a] to-[#1a0033]'
	: 'bg-gradient-to-br from-blue-50 via-purple-50 to-cyan-50'
	}`}></div>
	<div className={`absolute inset-0 opacity-30 ${
	theme === 'dark'
	? 'bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent'
	: 'bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-200/30 via-transparent to-transparent'
	}`}></div>
	</div>

	<Sidebar />

	<main className="relative flex flex-col flex-1 h-full overflow-hidden">
	<TabStrip />
	<AddressBar />
	<div className="relative flex-1 w-full h-full overflow-hidden">
	<MainContent />
	</div>
	<Copilot />
	</main>
	</div>
	</>
	);
	}