mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-18 14:27:20 +00:00
6889 lines
304 KiB
TypeScript
6889 lines
304 KiB
TypeScript
import { useState, useRef, useCallback, useEffect } from "react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { motion, AnimatePresence, useMotionValue, useTransform, PanInfo } from "framer-motion";
|
||
import { useLocation } from "wouter";
|
||
import { useAuth } from "@/lib/auth";
|
||
import { useWebSocket } from "@/hooks/use-websocket";
|
||
import { getIcon } from "@/lib/iconMap";
|
||
import { usePlatformLayout, PlatformSwitch } from "@/hooks/use-platform-layout";
|
||
import { useHaptics } from "@/hooks/use-haptics";
|
||
import { useMobileNative } from "@/hooks/use-mobile-native";
|
||
import * as dataService from "@/lib/data-service";
|
||
import * as tauriNative from "@/lib/tauri-native";
|
||
import { isDesktop } from "@/lib/platform";
|
||
import { useNativeFeatures } from "@/hooks/use-native-features";
|
||
import { useBiometricAuth } from "@/hooks/use-biometric-auth";
|
||
import { StatusBar, Style } from '@capacitor/status-bar';
|
||
import { MobileQuickActions } from "@/components/MobileQuickActions";
|
||
import { Minesweeper } from "@/components/games/Minesweeper";
|
||
import { CookieClicker } from "@/components/games/CookieClicker";
|
||
import {
|
||
Terminal, FileText, IdCard, Music, Settings, Globe,
|
||
X, Minus, Square, Maximize2, Volume2, Wifi, Battery,
|
||
ChevronUp, FolderOpen, Award, MessageCircle, Send,
|
||
ExternalLink, User, LogOut, BarChart3, Loader2, Layers,
|
||
Presentation, Bell, Image, Monitor, Play, Pause, ChevronRight,
|
||
Network, Activity, Code2, Radio, Newspaper, Gamepad2,
|
||
Users, Trophy, Calculator, StickyNote, Cpu, Camera,
|
||
Eye, Shield, Zap, Skull, Lock, Unlock, Server, Database,
|
||
TrendingUp, ArrowUp, ArrowDown, Hash, Key, HardDrive, FolderSearch,
|
||
AlertTriangle, Briefcase, CalendarDays, FolderGit2, MessageSquare,
|
||
ShoppingCart, Folder, Code, Home, Flag, Cookie, ChevronLeft,
|
||
MoreVertical, Search, Mic, ArrowLeft, RefreshCw, Star, Clock, MapPin,
|
||
Target, Check, Save, Download, FileCode
|
||
} from "lucide-react";
|
||
|
||
interface WindowState {
|
||
id: string;
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
component: string;
|
||
x: number;
|
||
y: number;
|
||
width: number;
|
||
height: number;
|
||
minimized: boolean;
|
||
maximized: boolean;
|
||
zIndex: number;
|
||
accentColor?: string;
|
||
desktopId: number;
|
||
iframeUrl?: string;
|
||
}
|
||
|
||
interface Toast {
|
||
id: string;
|
||
message: string;
|
||
type: 'info' | 'success' | 'warning' | 'error';
|
||
}
|
||
|
||
interface ThemeSettings {
|
||
mode: 'dark' | 'light' | 'system';
|
||
accentColor: string;
|
||
transparency: number;
|
||
}
|
||
|
||
interface DesktopLayout {
|
||
name: string;
|
||
windows: Array<{ appId: string; x: number; y: number; width: number; height: number }>;
|
||
desktop: number;
|
||
}
|
||
|
||
const ACCENT_COLORS = [
|
||
{ id: 'cyan', name: 'Cyan', color: '#06b6d4', ring: 'ring-cyan-400/50', shadow: 'shadow-cyan-500/20', bg: 'bg-cyan-500' },
|
||
{ id: 'purple', name: 'Purple', color: '#a855f7', ring: 'ring-purple-400/50', shadow: 'shadow-purple-500/20', bg: 'bg-purple-500' },
|
||
{ id: 'green', name: 'Green', color: '#22c55e', ring: 'ring-green-400/50', shadow: 'shadow-green-500/20', bg: 'bg-green-500' },
|
||
{ id: 'orange', name: 'Orange', color: '#f97316', ring: 'ring-orange-400/50', shadow: 'shadow-orange-500/20', bg: 'bg-orange-500' },
|
||
{ id: 'pink', name: 'Pink', color: '#ec4899', ring: 'ring-pink-400/50', shadow: 'shadow-pink-500/20', bg: 'bg-pink-500' },
|
||
{ id: 'red', name: 'Red', color: '#ef4444', ring: 'ring-red-400/50', shadow: 'shadow-red-500/20', bg: 'bg-red-500' },
|
||
];
|
||
|
||
type ClearanceMode = 'foundation' | 'corp';
|
||
|
||
interface ClearanceTheme {
|
||
id: ClearanceMode;
|
||
name: string;
|
||
title: string;
|
||
subtitle: string;
|
||
primary: string;
|
||
secondary: string;
|
||
accent: string;
|
||
accentSecondary: string;
|
||
wallpaper: string;
|
||
borderStyle: string;
|
||
fontStyle: string;
|
||
}
|
||
|
||
const DAILY_TIPS = [
|
||
{ title: "Quick Launch", tip: "Press Ctrl+Space to open Spotlight search and quickly find apps." },
|
||
{ title: "Virtual Desktops", tip: "Use the numbered buttons (1-4) in the taskbar to switch between virtual desktops." },
|
||
{ title: "Window Management", tip: "Double-click a window title bar to maximize/restore it." },
|
||
{ title: "Keyboard Shortcuts", tip: "Ctrl+T opens Terminal, Ctrl+S opens Settings, Ctrl+F opens Files." },
|
||
{ title: "Theme Switching", tip: "Click the Start menu and use 'Switch Clearance' to change between Foundation and Corp modes." },
|
||
{ title: "Sound Settings", tip: "Toggle system sounds in Settings to enable audio feedback for actions." },
|
||
{ title: "Dock Apps", tip: "Your most-used apps are pinned to the quick-launch dock for easy access." },
|
||
{ title: "Right-Click Menu", tip: "Right-click on the desktop to access quick options like refresh and settings." },
|
||
{ title: "Calculator", tip: "Need quick math? Open Calculator from the app menu or dock." },
|
||
{ title: "Notifications", tip: "Click the bell icon in the taskbar to view system notifications." },
|
||
];
|
||
|
||
const PINNED_APPS = ['terminal', 'networkneighborhood', 'calculator', 'settings'];
|
||
|
||
const CLEARANCE_THEMES: Record<ClearanceMode, ClearanceTheme> = {
|
||
foundation: {
|
||
id: 'foundation',
|
||
name: 'The Foundation',
|
||
title: 'FOUNDATION',
|
||
subtitle: 'The Architect\'s Domain',
|
||
primary: '#DC2626',
|
||
secondary: '#D4AF37',
|
||
accent: '#DC2626',
|
||
accentSecondary: '#D4AF37',
|
||
wallpaper: 'radial-gradient(ellipse at 30% 20%, #4a1515 0%, #1a0505 40%, #0a0202 100%)',
|
||
borderStyle: 'border-yellow-600/40',
|
||
fontStyle: 'font-mono',
|
||
},
|
||
corp: {
|
||
id: 'corp',
|
||
name: 'The Corp',
|
||
title: 'CORPORATION',
|
||
subtitle: 'Executive Operations',
|
||
primary: '#0F172A',
|
||
secondary: '#C0C0C0',
|
||
accent: '#3B82F6',
|
||
accentSecondary: '#C0C0C0',
|
||
wallpaper: 'radial-gradient(ellipse at 70% 80%, #1e3a5f 0%, #0f172a 40%, #050a14 100%)',
|
||
borderStyle: 'border-slate-400/30',
|
||
fontStyle: 'font-sans',
|
||
},
|
||
};
|
||
|
||
interface DesktopApp {
|
||
id: string;
|
||
title: string;
|
||
icon: React.ReactNode;
|
||
component: string;
|
||
defaultWidth: number;
|
||
defaultHeight: number;
|
||
}
|
||
|
||
interface ContextMenuState {
|
||
x: number;
|
||
y: number;
|
||
type: 'desktop' | 'icon';
|
||
appId?: string;
|
||
}
|
||
|
||
const WALLPAPERS = [
|
||
{ id: 'default', name: 'Cyber Grid', bg: 'linear-gradient(to bottom right, #0f172a, #1e1b4b, #0f172a)', secret: false },
|
||
{ id: 'matrix', name: 'Matrix', bg: 'linear-gradient(to bottom, #001100, #002200, #001100)', secret: false },
|
||
{ id: 'sunset', name: 'Neon Sunset', bg: 'linear-gradient(to bottom, #1a0533, #4a1942, #0f172a)', secret: false },
|
||
{ id: 'ocean', name: 'Deep Ocean', bg: 'linear-gradient(to bottom, #0a1628, #0d3b66, #0a1628)', secret: false },
|
||
{ id: 'vaporwave', name: '⚡ Vaporwave', bg: 'linear-gradient(135deg, #ff71ce, #01cdfe, #05ffa1, #b967ff)', secret: true },
|
||
{ id: 'bloodmoon', name: '🔥 Blood Moon', bg: 'linear-gradient(to bottom, #1a0000, #4a0000, #1a0000)', secret: true },
|
||
{ id: 'galaxy', name: '🌌 Galaxy', bg: 'radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%)', secret: true },
|
||
];
|
||
|
||
const KONAMI_CODE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
|
||
|
||
export default function AeThexOS() {
|
||
const layout = usePlatformLayout();
|
||
const { impact, notification } = useHaptics();
|
||
const { keyboardVisible, deviceInfo } = useMobileNative('dark');
|
||
const native = useNativeFeatures();
|
||
const biometric = useBiometricAuth();
|
||
|
||
// Skip boot sequence on mobile
|
||
const [isBooting, setIsBooting] = useState(!layout.isMobile);
|
||
const [bootProgress, setBootProgress] = useState(0);
|
||
const [bootStep, setBootStep] = useState('');
|
||
const [windows, setWindows] = useState<WindowState[]>([]);
|
||
const [activeWindowId, setActiveWindowId] = useState<string | null>(null);
|
||
const [maxZIndex, setMaxZIndex] = useState(1);
|
||
const [showStartMenu, setShowStartMenu] = useState(false);
|
||
const [time, setTime] = useState(new Date());
|
||
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
|
||
const [wallpaper, setWallpaper] = useState(WALLPAPERS[0]);
|
||
const [soundEnabled, setSoundEnabled] = useState(false);
|
||
const [showScreensaver, setShowScreensaver] = useState(false);
|
||
const [notifications, setNotifications] = useState<string[]>([]);
|
||
const [showNotifications, setShowNotifications] = useState(false);
|
||
const [secretsUnlocked, setSecretsUnlocked] = useState(false);
|
||
const [konamiProgress, setKonamiProgress] = useState<string[]>([]);
|
||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||
const [showSpotlight, setShowSpotlight] = useState(false);
|
||
const [spotlightQuery, setSpotlightQuery] = useState('');
|
||
const [currentDesktop, setCurrentDesktop] = useState(0);
|
||
const [showOnboarding, setShowOnboarding] = useState(false);
|
||
const [onboardingStep, setOnboardingStep] = useState(0);
|
||
const [desktopIcons, setDesktopIcons] = useState<string[]>([]);
|
||
const [theme, setTheme] = useState<ThemeSettings>(() => {
|
||
const saved = localStorage.getItem('aethex-theme');
|
||
return saved ? JSON.parse(saved) : { mode: 'dark', accentColor: 'cyan', transparency: 80 };
|
||
});
|
||
const [savedLayouts, setSavedLayouts] = useState<DesktopLayout[]>(() => {
|
||
const saved = localStorage.getItem('aethex-layouts');
|
||
return saved ? JSON.parse(saved) : [];
|
||
});
|
||
const [clearanceMode, setClearanceMode] = useState<ClearanceMode>(() => {
|
||
const saved = localStorage.getItem('aethex-clearance');
|
||
return (saved as ClearanceMode) || 'foundation';
|
||
});
|
||
const [isSwitchingClearance, setIsSwitchingClearance] = useState(false);
|
||
const [showDailyTip, setShowDailyTip] = useState(false);
|
||
const [dailyTip, setDailyTip] = useState(DAILY_TIPS[0]);
|
||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||
const audioContextRef = useRef<AudioContext | null>(null);
|
||
const clearanceTheme = CLEARANCE_THEMES[clearanceMode];
|
||
const desktopRef = useRef<HTMLDivElement>(null);
|
||
const idleTimer = useRef<NodeJS.Timeout | null>(null);
|
||
const spotlightRef = useRef<HTMLInputElement>(null);
|
||
const { user, isAuthenticated, logout } = useAuth();
|
||
const [, setLocation] = useLocation();
|
||
const [activeTrayPanel, setActiveTrayPanel] = useState<'wifi' | 'volume' | 'battery' | 'notifications' | 'upgrade' | null>(null);
|
||
const [volume, setVolume] = useState(75);
|
||
const [isMuted, setIsMuted] = useState(false);
|
||
|
||
// WebSocket connection for real-time updates
|
||
const {
|
||
connected: wsConnected,
|
||
metrics: wsMetrics,
|
||
alerts: wsAlerts,
|
||
achievements: wsAchievements,
|
||
notifications: wsNotifications
|
||
} = useWebSocket();
|
||
const [batteryInfo, setBatteryInfo] = useState<{ level: number; charging: boolean } | null>(null);
|
||
|
||
useEffect(() => {
|
||
let battery: any = null;
|
||
let levelChangeHandler: (() => void) | null = null;
|
||
let chargingChangeHandler: (() => void) | null = null;
|
||
|
||
if ('getBattery' in navigator) {
|
||
(navigator as any).getBattery().then((bat: any) => {
|
||
battery = bat;
|
||
setBatteryInfo({ level: Math.round(battery.level * 100), charging: battery.charging });
|
||
|
||
levelChangeHandler = () => {
|
||
setBatteryInfo(prev => prev ? { ...prev, level: Math.round(battery.level * 100) } : null);
|
||
};
|
||
chargingChangeHandler = () => {
|
||
setBatteryInfo(prev => prev ? { ...prev, charging: battery.charging } : null);
|
||
};
|
||
|
||
battery.addEventListener('levelchange', levelChangeHandler);
|
||
battery.addEventListener('chargingchange', chargingChangeHandler);
|
||
});
|
||
}
|
||
|
||
// Cleanup: remove battery event listeners to prevent memory leak
|
||
return () => {
|
||
if (battery) {
|
||
if (levelChangeHandler) battery.removeEventListener('levelchange', levelChangeHandler);
|
||
if (chargingChangeHandler) battery.removeEventListener('chargingchange', chargingChangeHandler);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
const { data: weatherData, isFetching: weatherFetching } = useQuery({
|
||
queryKey: ['weather'],
|
||
queryFn: async () => {
|
||
const res = await fetch('https://api.open-meteo.com/v1/forecast?latitude=40.7128&longitude=-74.0060¤t_weather=true&temperature_unit=fahrenheit');
|
||
return res.json();
|
||
},
|
||
refetchInterval: 600000,
|
||
staleTime: 300000,
|
||
});
|
||
|
||
const addToast = useCallback((message: string, type: Toast['type'] = 'info') => {
|
||
const id = Date.now().toString();
|
||
setToasts(prev => [...prev, { id, message, type }]);
|
||
setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 4000);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem('aethex-theme', JSON.stringify(theme));
|
||
}, [theme]);
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem('aethex-layouts', JSON.stringify(savedLayouts));
|
||
}, [savedLayouts]);
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem('aethex-clearance', clearanceMode);
|
||
}, [clearanceMode]);
|
||
|
||
useEffect(() => {
|
||
const handleMouseMove = (e: MouseEvent) => {
|
||
setMousePosition({ x: e.clientX, y: e.clientY });
|
||
};
|
||
window.addEventListener('mousemove', handleMouseMove);
|
||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||
}, []);
|
||
|
||
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
|
||
const [isDesktopLocked, setIsDesktopLocked] = useState(true);
|
||
const [detectedIdentity, setDetectedIdentity] = useState<{ username?: string; passportId?: string } | null>(null);
|
||
const [threatLevel, setThreatLevel] = useState<'scanning' | 'low' | 'medium' | 'high'>('scanning');
|
||
const [bootLogs, setBootLogs] = useState<string[]>([]);
|
||
|
||
useEffect(() => {
|
||
const bootSequence = async () => {
|
||
const addLog = (text: string) => setBootLogs(prev => [...prev.slice(-8), text]);
|
||
|
||
// Phase 1: Hardware initialization
|
||
const phase1 = [
|
||
{ text: 'POST: Power-On Self Test...', progress: 3 },
|
||
{ text: 'CPU: AMD Ryzen 9 7950X3D @ 4.2GHz... OK', progress: 5 },
|
||
{ text: 'RAM: 64GB DDR5-6000 ECC... OK', progress: 8 },
|
||
{ text: 'GPU: Quantum Accelerator v2.1... OK', progress: 10 },
|
||
{ text: 'NVME: AeThex Vault 2TB... OK', progress: 12 },
|
||
];
|
||
|
||
for (const step of phase1) {
|
||
setBootStep(step.text);
|
||
addLog(step.text);
|
||
setBootProgress(step.progress);
|
||
await new Promise(r => setTimeout(r, 150));
|
||
}
|
||
|
||
// Phase 2: Kernel & filesystem
|
||
const phase2 = [
|
||
{ text: 'Loading AeThex Kernel v4.2.1...', progress: 18 },
|
||
{ text: 'Initializing virtual memory manager...', progress: 22 },
|
||
{ text: 'Mounting encrypted file systems...', progress: 26 },
|
||
{ text: 'Loading device drivers...', progress: 30 },
|
||
];
|
||
|
||
for (const step of phase2) {
|
||
setBootStep(step.text);
|
||
addLog(step.text);
|
||
setBootProgress(step.progress);
|
||
await new Promise(r => setTimeout(r, 200));
|
||
}
|
||
|
||
// Phase 3: Passport Identity Detection
|
||
setBootStep('INITIATING AETHEX PASSPORT SUBSYSTEM...');
|
||
addLog('▸ PASSPORT: Initializing identity subsystem...');
|
||
setBootProgress(35);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
|
||
// Check for existing session/identity
|
||
let foundIdentity = false;
|
||
try {
|
||
// Use auth context instead of API call for desktop compatibility
|
||
if (user) {
|
||
foundIdentity = true;
|
||
setDetectedIdentity({
|
||
username: user.email?.split('@')[0] || 'User',
|
||
passportId: user.id?.slice(0, 8).toUpperCase()
|
||
});
|
||
addLog(`▸ PASSPORT: Identity token detected`);
|
||
setBootStep('PASSPORT: IDENTITY TOKEN DETECTED');
|
||
setBootProgress(40);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
|
||
addLog(`▸ PASSPORT: Verifying credentials for ${sessionData.user.username}...`);
|
||
setBootStep(`Verifying credentials for ${sessionData.user.username}...`);
|
||
setBootProgress(45);
|
||
await new Promise(r => setTimeout(r, 400));
|
||
|
||
addLog(`▸ PASSPORT: Welcome back, ARCHITECT ${sessionData.user.username.toUpperCase()}`);
|
||
setBootStep(`WELCOME BACK, ARCHITECT ${sessionData.user.username.toUpperCase()}`);
|
||
setBootProgress(50);
|
||
await new Promise(r => setTimeout(r, 500));
|
||
}
|
||
} catch (err) {
|
||
// Session fetch failed, continue with guest mode
|
||
if (import.meta.env.DEV) console.debug('[Boot] Session check failed:', err);
|
||
}
|
||
|
||
if (!foundIdentity) {
|
||
addLog('▸ PASSPORT: No active identity token found');
|
||
setBootStep('PASSPORT: NO ACTIVE IDENTITY TOKEN');
|
||
setBootProgress(42);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
|
||
addLog('▸ PASSPORT: Guest access mode available');
|
||
setBootStep('Guest access mode available');
|
||
setBootProgress(48);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
}
|
||
|
||
// Phase 4: Aegis Security Layer
|
||
addLog('▸ AEGIS: Initializing security layer...');
|
||
setBootStep('AEGIS: INITIALIZING SECURITY LAYER...');
|
||
setBootProgress(55);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
|
||
addLog('▸ AEGIS: Loading threat detection modules...');
|
||
setBootStep('Loading threat detection modules...');
|
||
setBootProgress(60);
|
||
await new Promise(r => setTimeout(r, 250));
|
||
|
||
addLog('▸ AEGIS: Scanning network perimeter...');
|
||
setBootStep('AEGIS: SCANNING NETWORK PERIMETER...');
|
||
setBootProgress(65);
|
||
setThreatLevel('scanning');
|
||
await new Promise(r => setTimeout(r, 600));
|
||
|
||
// Simulate threat assessment result
|
||
const threatResult = Math.random();
|
||
if (threatResult < 0.7) {
|
||
setThreatLevel('low');
|
||
addLog('▸ AEGIS: Threat level LOW - All systems nominal');
|
||
setBootStep('THREAT LEVEL: LOW - ALL SYSTEMS NOMINAL');
|
||
} else if (threatResult < 0.95) {
|
||
setThreatLevel('medium');
|
||
addLog('▸ AEGIS: Threat level MEDIUM - Enhanced monitoring active');
|
||
setBootStep('THREAT LEVEL: MEDIUM - MONITORING ACTIVE');
|
||
} else {
|
||
setThreatLevel('high');
|
||
addLog('▸ AEGIS: Threat level ELEVATED - Defensive protocols engaged');
|
||
setBootStep('THREAT LEVEL: ELEVATED - PROTOCOLS ENGAGED');
|
||
}
|
||
|
||
// Schedule upgrade alert in system tray once per session
|
||
try {
|
||
const shown = localStorage.getItem('aethex-upgrade-alert-shown');
|
||
if (!shown) {
|
||
setTimeout(() => {
|
||
try {
|
||
if (!localStorage.getItem('aethex-upgrade-alert-shown')) {
|
||
setActiveTrayPanel('upgrade');
|
||
addToast('⚠️ Architect Access Available — Use tray to upgrade', 'info');
|
||
localStorage.setItem('aethex-upgrade-alert-shown', 'true');
|
||
}
|
||
} catch (err) {
|
||
if (import.meta.env.DEV) console.debug('[Boot] localStorage access failed:', err);
|
||
}
|
||
}, 30000);
|
||
}
|
||
} catch (err) {
|
||
if (import.meta.env.DEV) console.debug('[Boot] Upgrade check failed:', err);
|
||
}
|
||
setBootProgress(75);
|
||
await new Promise(r => setTimeout(r, 400));
|
||
|
||
// Phase 5: Network & Final
|
||
addLog('▸ NEXUS: Connecting to AeThex network...');
|
||
setBootStep('Connecting to Nexus network...');
|
||
setBootProgress(82);
|
||
await new Promise(r => setTimeout(r, 300));
|
||
|
||
addLog('▸ NEXUS: Syncing with distributed nodes...');
|
||
setBootStep('Syncing with distributed nodes...');
|
||
setBootProgress(88);
|
||
await new Promise(r => setTimeout(r, 250));
|
||
|
||
addLog('▸ NEXUS: Connection established - 42 peers online');
|
||
setBootStep('NEXUS: 42 PEERS ONLINE');
|
||
setBootProgress(94);
|
||
await new Promise(r => setTimeout(r, 200));
|
||
|
||
addLog('▸ SYSTEM: AeThex OS ready');
|
||
setBootStep('AETHEX OS READY');
|
||
setBootProgress(100);
|
||
await new Promise(r => setTimeout(r, 500));
|
||
|
||
setShowLoginPrompt(true);
|
||
};
|
||
|
||
bootSequence();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => setTime(new Date()), 1000);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const fetchNotifications = async () => {
|
||
try {
|
||
if (user) {
|
||
const data = await dataService.fetchNotifications(user.id);
|
||
if (Array.isArray(data)) {
|
||
setNotifications(data.map((n: any) => n.message));
|
||
}
|
||
}
|
||
} catch (err) {
|
||
// Notifications fetch failed, not critical
|
||
if (import.meta.env.DEV) console.debug('[OS] Notifications fetch failed:', err);
|
||
}
|
||
};
|
||
fetchNotifications();
|
||
const interval = setInterval(fetchNotifications, 60000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Listen for system tray quick action events
|
||
// TEMPORARILY DISABLED FOR DEBUGGING
|
||
/*
|
||
useEffect(() => {
|
||
if (!isDesktop()) return;
|
||
|
||
let unlisten: (() => void) | null = null;
|
||
|
||
const setupListener = async () => {
|
||
try {
|
||
const tauriEvent = await import('@tauri-apps/api/event');
|
||
|
||
unlisten = await tauriEvent.listen('open-app', (event: any) => {
|
||
const appName = event.payload as string;
|
||
const appMap: Record<string, string> = {
|
||
'projects': 'Files',
|
||
'terminal': 'Terminal',
|
||
'achievements': 'Achievements'
|
||
};
|
||
|
||
const appToOpen = appMap[appName] || appName;
|
||
const existingApp = openApps.find((a: any) => a.name === appToOpen);
|
||
|
||
if (!existingApp) {
|
||
handleLaunchApp(appToOpen);
|
||
} else {
|
||
setActiveApp(appToOpen);
|
||
}
|
||
});
|
||
} catch (err) {
|
||
// Not on desktop, ignore
|
||
console.debug('[OS] Tray listener not available:', err);
|
||
}
|
||
};
|
||
|
||
setupListener();
|
||
|
||
return () => {
|
||
if (unlisten) {
|
||
unlisten();
|
||
}
|
||
};
|
||
}, [handleLaunchApp, openApps, setActiveApp]);
|
||
*/
|
||
|
||
useEffect(() => {
|
||
const resetIdle = () => {
|
||
if (showScreensaver) setShowScreensaver(false);
|
||
if (idleTimer.current) clearTimeout(idleTimer.current);
|
||
idleTimer.current = setTimeout(() => setShowScreensaver(true), 5 * 60 * 1000);
|
||
};
|
||
|
||
window.addEventListener('mousemove', resetIdle);
|
||
window.addEventListener('keydown', resetIdle);
|
||
resetIdle();
|
||
|
||
return () => {
|
||
window.removeEventListener('mousemove', resetIdle);
|
||
window.removeEventListener('keydown', resetIdle);
|
||
if (idleTimer.current) clearTimeout(idleTimer.current);
|
||
};
|
||
}, [showScreensaver]);
|
||
|
||
useEffect(() => {
|
||
const handleKonami = (e: KeyboardEvent) => {
|
||
setKonamiProgress(prev => {
|
||
const newProgress = [...prev, e.key].slice(-10);
|
||
if (newProgress.length === 10 && newProgress.every((k, i) => k === KONAMI_CODE[i])) {
|
||
setSecretsUnlocked(true);
|
||
setNotifications(prev => ['🎮 SECRETS UNLOCKED! Check Settings for new wallpapers.', ...prev]);
|
||
return [];
|
||
}
|
||
return newProgress;
|
||
});
|
||
};
|
||
const handleTerminalUnlock = () => {
|
||
setSecretsUnlocked(true);
|
||
setNotifications(prev => ['🔓 Terminal unlock activated! Check Settings.', ...prev]);
|
||
};
|
||
window.addEventListener('keydown', handleKonami);
|
||
window.addEventListener('aethex-unlock-secrets', handleTerminalUnlock);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleKonami);
|
||
window.removeEventListener('aethex-unlock-secrets', handleTerminalUnlock);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (showSpotlight && spotlightRef.current) {
|
||
spotlightRef.current.focus();
|
||
}
|
||
}, [showSpotlight]);
|
||
|
||
useEffect(() => {
|
||
const saved = localStorage.getItem('aethex-window-positions');
|
||
if (saved) {
|
||
try {
|
||
const positions = JSON.parse(saved);
|
||
setWindows(prev => prev.map(w => {
|
||
const savedPos = positions[w.id];
|
||
return savedPos ? { ...w, ...savedPos } : w;
|
||
}));
|
||
} catch (err) {
|
||
// Corrupted localStorage data, ignore and use defaults
|
||
if (import.meta.env.DEV) console.debug('[OS] Failed to restore window positions:', err);
|
||
}
|
||
}
|
||
const hasVisited = localStorage.getItem('aethex-visited');
|
||
if (!hasVisited) {
|
||
setShowOnboarding(true);
|
||
localStorage.setItem('aethex-visited', 'true');
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (windows.length > 0) {
|
||
const positions: Record<string, { x: number; y: number; width: number; height: number }> = {};
|
||
windows.forEach(w => {
|
||
positions[w.id] = { x: w.x, y: w.y, width: w.width, height: w.height };
|
||
});
|
||
localStorage.setItem('aethex-window-positions', JSON.stringify(positions));
|
||
}
|
||
}, [windows]);
|
||
|
||
const foundationApps: DesktopApp[] = [
|
||
{ id: "networkneighborhood", title: "Network Neighborhood", icon: <Network className="w-8 h-8" />, component: "networkneighborhood", defaultWidth: 500, defaultHeight: 450 },
|
||
{ id: "mission", title: "README.TXT", icon: <FileText className="w-8 h-8" />, component: "mission", defaultWidth: 500, defaultHeight: 500 },
|
||
{ id: "passport", title: "Passport", icon: <Key className="w-8 h-8" />, component: "passport", defaultWidth: 650, defaultHeight: 500 },
|
||
{ id: "achievements", title: "Achievements", icon: <Trophy className="w-8 h-8" />, component: "achievements", defaultWidth: 800, defaultHeight: 600 },
|
||
{ id: "projects", title: "Projects", icon: <FolderGit2 className="w-8 h-8" />, component: "projects", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "opportunities", title: "Opportunities", icon: <Briefcase className="w-8 h-8" />, component: "opportunities", defaultWidth: 850, defaultHeight: 650 },
|
||
{ id: "events", title: "Events", icon: <CalendarDays className="w-8 h-8" />, component: "events", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "messaging", title: "Messages", icon: <MessageSquare className="w-8 h-8" />, component: "messaging", defaultWidth: 850, defaultHeight: 600 },
|
||
{ id: "marketplace", title: "Marketplace", icon: <ShoppingCart className="w-8 h-8" />, component: "marketplace", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "foundry", title: "FOUNDRY.EXE", icon: <Award className="w-8 h-8" />, component: "foundry", defaultWidth: 450, defaultHeight: 500 },
|
||
{ id: "intel", title: "INTEL", icon: <FolderSearch className="w-8 h-8" />, component: "intel", defaultWidth: 550, defaultHeight: 450 },
|
||
{ id: "filemanager", title: "File Manager", icon: <Folder className="w-8 h-8" />, component: "filemanager", defaultWidth: 800, defaultHeight: 600 },
|
||
{ id: "codegallery", title: "Code Gallery", icon: <Code className="w-8 h-8" />, component: "codegallery", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "drives", title: "My Computer", icon: <HardDrive className="w-8 h-8" />, component: "drives", defaultWidth: 450, defaultHeight: 400 },
|
||
{ id: "chat", title: "AeThex AI", icon: <MessageCircle className="w-8 h-8" />, component: "chat", defaultWidth: 400, defaultHeight: 500 },
|
||
{ id: "terminal", title: "Terminal", icon: <Terminal className="w-8 h-8" />, component: "terminal", defaultWidth: 750, defaultHeight: 500 },
|
||
{ id: "notifications", title: "Notifications", icon: <Bell className="w-8 h-8" />, component: "notifications", defaultWidth: 700, defaultHeight: 600 },
|
||
{ id: "analytics", title: "Analytics", icon: <BarChart3 className="w-8 h-8" />, component: "analytics", defaultWidth: 1000, defaultHeight: 700 },
|
||
{ id: "metrics", title: "System Status", icon: <Activity className="w-8 h-8" />, component: "metrics", defaultWidth: 750, defaultHeight: 550 },
|
||
{ id: "devtools", title: "Dev Tools", icon: <Code2 className="w-8 h-8" />, component: "devtools", defaultWidth: 450, defaultHeight: 400 },
|
||
{ id: "music", title: "Radio AeThex", icon: <Radio className="w-8 h-8" />, component: "music", defaultWidth: 400, defaultHeight: 350 },
|
||
{ id: "codeeditor", title: "The Lab", icon: <Code2 className="w-8 h-8" />, component: "codeeditor", defaultWidth: 700, defaultHeight: 500 },
|
||
{ id: "arcade", title: "Snake", icon: <Gamepad2 className="w-8 h-8" />, component: "arcade", defaultWidth: 420, defaultHeight: 520 },
|
||
{ id: "minesweeper", title: "Minesweeper", icon: <Flag className="w-8 h-8" />, component: "minesweeper", defaultWidth: 400, defaultHeight: 500 },
|
||
{ id: "cookieclicker", title: "Cookie Clicker", icon: <Cookie className="w-8 h-8" />, component: "cookieclicker", defaultWidth: 420, defaultHeight: 600 },
|
||
{ id: "calculator", title: "Calculator", icon: <Calculator className="w-8 h-8" />, component: "calculator", defaultWidth: 320, defaultHeight: 450 },
|
||
{ id: "settings", title: "Settings", icon: <Settings className="w-8 h-8" />, component: "settings", defaultWidth: 550, defaultHeight: 500 },
|
||
];
|
||
|
||
const corpApps: DesktopApp[] = [
|
||
{ id: "networkneighborhood", title: "Network Neighborhood", icon: <Network className="w-8 h-8" />, component: "networkneighborhood", defaultWidth: 500, defaultHeight: 450 },
|
||
{ id: "mission", title: "README.TXT", icon: <FileText className="w-8 h-8" />, component: "mission", defaultWidth: 500, defaultHeight: 500 },
|
||
{ id: "passport", title: "Passport", icon: <Key className="w-8 h-8" />, component: "passport", defaultWidth: 650, defaultHeight: 500 },
|
||
{ id: "achievements", title: "Achievements", icon: <Trophy className="w-8 h-8" />, component: "achievements", defaultWidth: 800, defaultHeight: 600 },
|
||
{ id: "projects", title: "Projects", icon: <FolderGit2 className="w-8 h-8" />, component: "projects", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "opportunities", title: "Opportunities", icon: <Briefcase className="w-8 h-8" />, component: "opportunities", defaultWidth: 850, defaultHeight: 650 },
|
||
{ id: "events", title: "Events", icon: <CalendarDays className="w-8 h-8" />, component: "events", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "messaging", title: "Messages", icon: <MessageSquare className="w-8 h-8" />, component: "messaging", defaultWidth: 850, defaultHeight: 600 },
|
||
{ id: "marketplace", title: "Marketplace", icon: <ShoppingCart className="w-8 h-8" />, component: "marketplace", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "foundry", title: "FOUNDRY.EXE", icon: <Award className="w-8 h-8" />, component: "foundry", defaultWidth: 450, defaultHeight: 500 },
|
||
{ id: "intel", title: "INTEL", icon: <FolderSearch className="w-8 h-8" />, component: "intel", defaultWidth: 550, defaultHeight: 450 },
|
||
{ id: "filemanager", title: "File Manager", icon: <Folder className="w-8 h-8" />, component: "filemanager", defaultWidth: 800, defaultHeight: 600 },
|
||
{ id: "codegallery", title: "Code Gallery", icon: <Code className="w-8 h-8" />, component: "codegallery", defaultWidth: 900, defaultHeight: 650 },
|
||
{ id: "drives", title: "My Computer", icon: <HardDrive className="w-8 h-8" />, component: "drives", defaultWidth: 450, defaultHeight: 400 },
|
||
{ id: "devtools", title: "Dev Tools", icon: <Code2 className="w-8 h-8" />, component: "devtools", defaultWidth: 450, defaultHeight: 400 },
|
||
{ id: "notifications", title: "Notifications", icon: <Bell className="w-8 h-8" />, component: "notifications", defaultWidth: 700, defaultHeight: 600 },
|
||
{ id: "analytics", title: "Analytics", icon: <BarChart3 className="w-8 h-8" />, component: "analytics", defaultWidth: 1000, defaultHeight: 700 },
|
||
{ id: "metrics", title: "System Status", icon: <Activity className="w-8 h-8" />, component: "metrics", defaultWidth: 750, defaultHeight: 550 },
|
||
{ id: "network", title: "Global Ops", icon: <Globe className="w-8 h-8" />, component: "network", defaultWidth: 700, defaultHeight: 550 },
|
||
{ id: "files", title: "Asset Library", icon: <Database className="w-8 h-8" />, component: "files", defaultWidth: 700, defaultHeight: 500 },
|
||
{ id: "pitch", title: "Contracts", icon: <FileText className="w-8 h-8" />, component: "pitch", defaultWidth: 500, defaultHeight: 400 },
|
||
{ id: "sysmonitor", title: "Infrastructure", icon: <Server className="w-8 h-8" />, component: "sysmonitor", defaultWidth: 450, defaultHeight: 400 },
|
||
{ id: "leaderboard", title: "Performance", icon: <BarChart3 className="w-8 h-8" />, component: "leaderboard", defaultWidth: 500, defaultHeight: 550 },
|
||
{ id: "calculator", title: "Calculator", icon: <Calculator className="w-8 h-8" />, component: "calculator", defaultWidth: 320, defaultHeight: 450 },
|
||
{ id: "settings", title: "Settings", icon: <Settings className="w-8 h-8" />, component: "settings", defaultWidth: 550, defaultHeight: 500 },
|
||
];
|
||
|
||
const apps = clearanceMode === 'foundation' ? foundationApps : corpApps;
|
||
|
||
// Handle WebSocket notifications
|
||
useEffect(() => {
|
||
if (wsNotifications && wsNotifications.length > 0) {
|
||
wsNotifications.forEach((notification: any) => {
|
||
if (notification.message) {
|
||
addToast(notification.message, notification.type || 'info');
|
||
}
|
||
});
|
||
}
|
||
}, [wsNotifications]);
|
||
|
||
// Handle WebSocket alerts for admins
|
||
useEffect(() => {
|
||
if (user?.isAdmin && wsAlerts && wsAlerts.length > 0) {
|
||
const newAlertMessages = wsAlerts.map((alert: any) =>
|
||
`[AEGIS] ${alert.severity?.toUpperCase()}: ${alert.message}`
|
||
);
|
||
setNotifications(prev => [...new Set([...newAlertMessages, ...prev])].slice(0, 10));
|
||
}
|
||
}, [wsAlerts, user?.isAdmin]);
|
||
|
||
// Show WebSocket connection status
|
||
useEffect(() => {
|
||
if (wsConnected && !isBooting) {
|
||
addToast('Real-time connection established', 'success');
|
||
}
|
||
}, [wsConnected, isBooting]);
|
||
|
||
const playSound = useCallback((type: 'open' | 'close' | 'minimize' | 'click' | 'notification' | 'switch') => {
|
||
if (!soundEnabled) return;
|
||
try {
|
||
if (!audioContextRef.current) {
|
||
audioContextRef.current = new AudioContext();
|
||
}
|
||
const ctx = audioContextRef.current;
|
||
const oscillator = ctx.createOscillator();
|
||
const gainNode = ctx.createGain();
|
||
oscillator.connect(gainNode);
|
||
gainNode.connect(ctx.destination);
|
||
|
||
const sounds: Record<string, { freq: number; duration: number; type: OscillatorType }> = {
|
||
open: { freq: 523, duration: 0.1, type: 'sine' },
|
||
close: { freq: 392, duration: 0.1, type: 'sine' },
|
||
minimize: { freq: 330, duration: 0.08, type: 'sine' },
|
||
click: { freq: 800, duration: 0.03, type: 'square' },
|
||
notification: { freq: 880, duration: 0.15, type: 'sine' },
|
||
switch: { freq: 440, duration: 0.2, type: 'sawtooth' },
|
||
};
|
||
|
||
const sound = sounds[type] || sounds.click;
|
||
oscillator.type = sound.type;
|
||
oscillator.frequency.setValueAtTime(sound.freq, ctx.currentTime);
|
||
gainNode.gain.setValueAtTime(0.1, ctx.currentTime);
|
||
gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + sound.duration);
|
||
|
||
oscillator.start(ctx.currentTime);
|
||
oscillator.stop(ctx.currentTime + sound.duration);
|
||
} catch (e) {
|
||
console.log('Audio not available');
|
||
}
|
||
}, [soundEnabled]);
|
||
|
||
const switchClearance = useCallback(() => {
|
||
const newMode: ClearanceMode = clearanceMode === 'foundation' ? 'corp' : 'foundation';
|
||
setIsSwitchingClearance(true);
|
||
setShowStartMenu(false);
|
||
playSound('switch');
|
||
|
||
setTimeout(() => {
|
||
setClearanceMode(newMode);
|
||
setIsSwitchingClearance(false);
|
||
addToast(`Switched to ${CLEARANCE_THEMES[newMode].name}`, 'success');
|
||
}, 600);
|
||
}, [clearanceMode, addToast, playSound]);
|
||
|
||
const openApp = useCallback((app: DesktopApp) => {
|
||
const appToOpen = (isDesktopLocked && app.id !== 'passport')
|
||
? apps.find(a => a.id === 'passport') || app
|
||
: app;
|
||
|
||
playSound('open');
|
||
const existingWindow = windows.find(w => w.id === appToOpen.id);
|
||
if (existingWindow) {
|
||
setWindows(prev => prev.map(w =>
|
||
w.id === appToOpen.id ? { ...w, minimized: false, zIndex: maxZIndex + 1, desktopId: currentDesktop } : w
|
||
));
|
||
setMaxZIndex(prev => prev + 1);
|
||
setActiveWindowId(appToOpen.id);
|
||
return;
|
||
}
|
||
|
||
const offsetX = (windows.length % 5) * 40 + 100;
|
||
const offsetY = (windows.length % 5) * 40 + 50;
|
||
|
||
const newWindow: WindowState = {
|
||
id: appToOpen.id,
|
||
title: appToOpen.title,
|
||
icon: appToOpen.icon,
|
||
component: appToOpen.component,
|
||
x: offsetX,
|
||
y: offsetY,
|
||
width: appToOpen.defaultWidth,
|
||
height: appToOpen.defaultHeight,
|
||
minimized: false,
|
||
maximized: false,
|
||
zIndex: maxZIndex + 1,
|
||
desktopId: currentDesktop
|
||
};
|
||
|
||
setWindows(prev => [...prev, newWindow]);
|
||
setMaxZIndex(prev => prev + 1);
|
||
setActiveWindowId(appToOpen.id);
|
||
setShowStartMenu(false);
|
||
}, [windows, maxZIndex, playSound, currentDesktop, isDesktopLocked, apps]);
|
||
|
||
const closeWindow = useCallback((id: string) => {
|
||
playSound('close');
|
||
setWindows(prev => prev.filter(w => w.id !== id));
|
||
if (activeWindowId === id) setActiveWindowId(null);
|
||
}, [activeWindowId, playSound]);
|
||
|
||
const minimizeWindow = useCallback((id: string) => {
|
||
playSound('minimize');
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, minimized: true } : w));
|
||
}, [playSound]);
|
||
|
||
const toggleMaximize = useCallback((id: string) => {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, maximized: !w.maximized } : w));
|
||
}, []);
|
||
|
||
const focusWindow = useCallback((id: string) => {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, zIndex: maxZIndex + 1 } : w));
|
||
setMaxZIndex(prev => prev + 1);
|
||
setActiveWindowId(id);
|
||
}, [maxZIndex]);
|
||
|
||
const handleDesktopClick = (e: React.MouseEvent) => {
|
||
setShowStartMenu(false);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const handleDesktopContextMenu = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
setContextMenu({ x: e.clientX, y: e.clientY, type: 'desktop' });
|
||
};
|
||
|
||
const handleIconContextMenu = (e: React.MouseEvent, appId: string) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setContextMenu({ x: e.clientX, y: e.clientY, type: 'icon', appId });
|
||
};
|
||
|
||
const handleWindowSnap = useCallback((id: string, x: number, y: number, width: number, height: number) => {
|
||
const screenWidth = window.innerWidth;
|
||
const screenHeight = window.innerHeight - 48;
|
||
|
||
if (x <= 10) {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, x: 0, y: 0, width: screenWidth / 2, height: screenHeight } : w));
|
||
return true;
|
||
}
|
||
if (x + width >= screenWidth - 10) {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, x: screenWidth / 2, y: 0, width: screenWidth / 2, height: screenHeight } : w));
|
||
return true;
|
||
}
|
||
if (y <= 10) {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, x: 0, y: 0, width: screenWidth, height: screenHeight, maximized: true } : w));
|
||
return true;
|
||
}
|
||
return false;
|
||
}, []);
|
||
|
||
const handleLogout = async () => {
|
||
await logout();
|
||
setLocation("/");
|
||
};
|
||
|
||
useEffect(() => {
|
||
const handleGlobalKeys = (e: KeyboardEvent) => {
|
||
if ((e.metaKey || e.ctrlKey) && e.key === ' ') {
|
||
e.preventDefault();
|
||
setShowSpotlight(prev => !prev);
|
||
setSpotlightQuery('');
|
||
}
|
||
if (e.key === 'Escape') {
|
||
setShowSpotlight(false);
|
||
setShowStartMenu(false);
|
||
setContextMenu(null);
|
||
}
|
||
if ((e.metaKey || e.ctrlKey) && !e.shiftKey) {
|
||
const shortcuts: Record<string, string> = { 't': 'terminal', 'n': 'notes', 'e': 'codeeditor', 'p': 'passport', 'm': 'metrics' };
|
||
if (shortcuts[e.key]) {
|
||
e.preventDefault();
|
||
const app = apps.find(a => a.id === shortcuts[e.key]);
|
||
if (app) openApp(app);
|
||
}
|
||
}
|
||
if ((e.metaKey || e.ctrlKey) && e.key >= '1' && e.key <= '4') {
|
||
e.preventDefault();
|
||
setCurrentDesktop(parseInt(e.key) - 1);
|
||
addToast(`Switched to Desktop ${e.key}`, 'info');
|
||
}
|
||
};
|
||
window.addEventListener('keydown', handleGlobalKeys);
|
||
return () => window.removeEventListener('keydown', handleGlobalKeys);
|
||
}, [apps, openApp, addToast]);
|
||
|
||
const renderAppContent = (component: string) => {
|
||
switch (component) {
|
||
case 'terminal': return <TerminalApp />;
|
||
case 'passport': return <PassportApp onLoginSuccess={unlockDesktop} isDesktopLocked={isDesktopLocked} />;
|
||
case 'files': return <FilesApp />;
|
||
case 'network': return <NetworkMapApp />;
|
||
case 'metrics': return <MetricsDashboardApp />;
|
||
case 'codeeditor': return <CodeEditorApp />;
|
||
case 'newsfeed': return <NewsFeedApp />;
|
||
case 'arcade': return <ArcadeApp />;
|
||
case 'minesweeper': return <Minesweeper />;
|
||
case 'cookieclicker': return <CookieClicker />;
|
||
case 'profiles': return <ProfilesApp />;
|
||
case 'leaderboard': return <LeaderboardApp />;
|
||
case 'calculator': return <CalculatorApp />;
|
||
case 'notes': return <NotesApp />;
|
||
case 'sysmonitor': return <SystemMonitorApp />;
|
||
case 'webcam': return <WebcamApp />;
|
||
case 'achievements': return <AchievementsApp />;
|
||
case 'projects': return <ProjectsAppWrapper />;
|
||
case 'opportunities': return <OpportunitiesApp />;
|
||
case 'events': return <EventsApp />;
|
||
case 'messaging': return <MessagingAppWrapper />;
|
||
case 'marketplace': return <MarketplaceAppWrapper />;
|
||
case 'chat': return <ChatApp />;
|
||
case 'music': return <MusicApp />;
|
||
case 'pitch': return <PitchApp onNavigate={() => setLocation('/pitch')} />;
|
||
case 'networkneighborhood': return <NetworkNeighborhoodApp openIframeWindow={openIframeWindow} />;
|
||
case 'foundry': return <FoundryApp openIframeWindow={openIframeWindow} />;
|
||
case 'devtools': return <DevToolsApp openIframeWindow={openIframeWindow} />;
|
||
case 'mission': return <MissionApp />;
|
||
case 'intel': return <IntelApp />;
|
||
case 'filemanager': return <FileManagerAppWrapper />;
|
||
case 'codegallery': return <CodeGalleryAppWrapper />;
|
||
case 'notifications': return <NotificationsAppWrapper />;
|
||
case 'analytics': return <AnalyticsAppWrapper />;
|
||
case 'drives': return <DrivesApp openIframeWindow={openIframeWindow} />;
|
||
case 'iframe': return null;
|
||
case 'settings': return <SettingsApp
|
||
wallpaper={wallpaper}
|
||
setWallpaper={setWallpaper}
|
||
soundEnabled={soundEnabled}
|
||
setSoundEnabled={setSoundEnabled}
|
||
secretsUnlocked={secretsUnlocked}
|
||
theme={theme}
|
||
setTheme={setTheme}
|
||
savedLayouts={savedLayouts}
|
||
onSaveLayout={(name) => {
|
||
const layout: DesktopLayout = {
|
||
name,
|
||
windows: windows.map(w => ({ appId: w.component, x: w.x, y: w.y, width: w.width, height: w.height })),
|
||
desktop: currentDesktop,
|
||
};
|
||
setSavedLayouts(prev => [...prev.filter(l => l.name !== name), layout]);
|
||
addToast(`Layout "${name}" saved`, 'success');
|
||
}}
|
||
onLoadLayout={(layout) => {
|
||
setWindows([]);
|
||
setTimeout(() => {
|
||
layout.windows.forEach((w, i) => {
|
||
const app = apps.find(a => a.component === w.appId);
|
||
if (app) {
|
||
const windowId = `${app.id}-${Date.now()}-${i}`;
|
||
setWindows(prev => [...prev, {
|
||
id: windowId,
|
||
title: app.title,
|
||
icon: app.icon,
|
||
component: app.component,
|
||
x: w.x,
|
||
y: w.y,
|
||
width: w.width,
|
||
height: w.height,
|
||
minimized: false,
|
||
maximized: false,
|
||
zIndex: i + 1,
|
||
desktopId: layout.desktop
|
||
}]);
|
||
}
|
||
});
|
||
setCurrentDesktop(layout.desktop);
|
||
addToast(`Layout "${layout.name}" loaded`, 'success');
|
||
}, 100);
|
||
}}
|
||
onDeleteLayout={(name) => {
|
||
setSavedLayouts(prev => prev.filter(l => l.name !== name));
|
||
addToast(`Layout "${name}" deleted`, 'info');
|
||
}}
|
||
/>;
|
||
default: return null;
|
||
}
|
||
};
|
||
|
||
const handleGuestContinue = () => {
|
||
setShowLoginPrompt(false);
|
||
setIsBooting(false);
|
||
setIsDesktopLocked(false);
|
||
const randomTip = DAILY_TIPS[Math.floor(Math.random() * DAILY_TIPS.length)];
|
||
setDailyTip(randomTip);
|
||
setTimeout(() => setShowDailyTip(true), 1000);
|
||
};
|
||
|
||
const handleLoginFromBoot = () => {
|
||
setShowLoginPrompt(false);
|
||
setIsBooting(false);
|
||
// Keep desktop locked until login succeeds
|
||
const randomTip = DAILY_TIPS[Math.floor(Math.random() * DAILY_TIPS.length)];
|
||
setDailyTip(randomTip);
|
||
setTimeout(() => {
|
||
setShowDailyTip(true);
|
||
const passportApp = apps.find(a => a.id === 'passport');
|
||
if (passportApp) openApp(passportApp);
|
||
}, 500);
|
||
};
|
||
|
||
const unlockDesktop = () => {
|
||
setIsDesktopLocked(false);
|
||
};
|
||
|
||
const openIframeWindow = (url: string, title: string) => {
|
||
// Most external sites block iframe embedding - open in new tab instead
|
||
window.open(url, '_blank', 'noopener,noreferrer');
|
||
};
|
||
|
||
// ========== ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURNS ==========
|
||
// Motion values for mobile gestures and desktop parallax (framer-motion hooks)
|
||
const dragX = useMotionValue(0);
|
||
const dragOpacity = useTransform(dragX, [-200, 0, 200], [0.5, 1, 0.5]);
|
||
|
||
// Parallax calculations for desktop background
|
||
const parallaxX = (mousePosition.x / window.innerWidth - 0.5) * 10;
|
||
const parallaxY = (mousePosition.y / window.innerHeight - 0.5) * 10;
|
||
|
||
// Hide system navigation bar on mount (Android only)
|
||
useEffect(() => {
|
||
if (!layout.isMobile) return;
|
||
|
||
const setupStatusBar = async () => {
|
||
try {
|
||
await StatusBar.hide();
|
||
if ((window as any).NavigationBar) {
|
||
await (window as any).NavigationBar.backgroundColorByHexString('#00000000', false);
|
||
await (window as any).NavigationBar.hide();
|
||
}
|
||
document.documentElement.style.setProperty('--safe-area-inset-bottom', 'env(safe-area-inset-bottom)');
|
||
} catch (error) {
|
||
console.log('StatusBar not available on this platform');
|
||
}
|
||
};
|
||
|
||
setupStatusBar();
|
||
return () => { StatusBar.show().catch(() => {}); };
|
||
}, [layout.isMobile]);
|
||
// ========== END OF HOOKS - Conditional returns can happen after this point ==========
|
||
|
||
if (isBooting) {
|
||
const threatColors = {
|
||
scanning: 'text-cyan-400',
|
||
low: 'text-green-400',
|
||
medium: 'text-yellow-400',
|
||
high: 'text-red-400'
|
||
};
|
||
const threatBgColors = {
|
||
scanning: 'bg-cyan-500/20 border-cyan-500/50',
|
||
low: 'bg-green-500/20 border-green-500/50',
|
||
medium: 'bg-yellow-500/20 border-yellow-500/50',
|
||
high: 'bg-red-500/20 border-red-500/50'
|
||
};
|
||
|
||
return (
|
||
<div className="h-screen w-screen bg-black relative overflow-hidden">
|
||
{/* Scan lines overlay */}
|
||
<div
|
||
className="absolute inset-0 pointer-events-none z-50"
|
||
style={{
|
||
background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px)',
|
||
}}
|
||
/>
|
||
|
||
{/* CRT flicker effect */}
|
||
<motion.div
|
||
className="absolute inset-0 bg-white/[0.02] pointer-events-none z-40"
|
||
animate={{ opacity: [0, 0.02, 0, 0.01, 0] }}
|
||
transition={{ duration: 0.1, repeat: Infinity, repeatDelay: Math.random() * 3 + 1 }}
|
||
/>
|
||
|
||
{/* Vignette effect */}
|
||
<div
|
||
className="absolute inset-0 pointer-events-none z-30"
|
||
style={{
|
||
background: 'radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.4) 100%)',
|
||
}}
|
||
/>
|
||
|
||
<div className="h-full w-full flex flex-col lg:flex-row">
|
||
{/* Left side - Boot logs */}
|
||
<div className="hidden lg:flex w-80 h-full flex-col p-4 border-r border-cyan-500/20">
|
||
<div className="text-cyan-400 font-mono text-xs uppercase tracking-wider mb-3 flex items-center gap-2">
|
||
<Terminal className="w-3 h-3" />
|
||
System Log
|
||
</div>
|
||
<div className="flex-1 overflow-hidden">
|
||
<div className="space-y-1 font-mono text-xs">
|
||
{bootLogs.map((log, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: i === bootLogs.length - 1 ? 1 : 0.5, x: 0 }}
|
||
className={`${i === bootLogs.length - 1 ? 'text-cyan-300' : 'text-white/40'}`}
|
||
>
|
||
{log}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Threat Level Indicator */}
|
||
<div className={`mt-4 p-3 border rounded ${threatBgColors[threatLevel]}`}>
|
||
<div className="text-xs font-mono uppercase tracking-wider text-white/60 mb-1">Aegis Status</div>
|
||
<div className={`font-mono font-bold ${threatColors[threatLevel]} flex items-center gap-2`}>
|
||
<Shield className="w-4 h-4" />
|
||
{threatLevel === 'scanning' ? 'SCANNING...' : `THREAT: ${threatLevel.toUpperCase()}`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Center - Main boot display */}
|
||
<div className="flex-1 flex flex-col items-center justify-center p-4">
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="text-center max-w-md"
|
||
>
|
||
{/* Logo with glow */}
|
||
<div className="w-28 h-28 mx-auto mb-8 relative">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-xl blur-lg opacity-50" />
|
||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-xl animate-pulse" />
|
||
<div className="absolute inset-2 bg-black rounded-lg flex items-center justify-center">
|
||
<motion.span
|
||
className="text-5xl font-display font-bold text-white"
|
||
animate={{ textShadow: ['0 0 10px rgba(0,255,255,0.5)', '0 0 20px rgba(0,255,255,0.8)', '0 0 10px rgba(0,255,255,0.5)'] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
>
|
||
A
|
||
</motion.span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Current step with typing effect */}
|
||
<motion.div
|
||
key={bootStep}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="text-cyan-400 font-mono text-sm mb-6 h-6"
|
||
>
|
||
{bootStep}
|
||
<motion.span
|
||
animate={{ opacity: [1, 0] }}
|
||
transition={{ duration: 0.5, repeat: Infinity }}
|
||
>
|
||
_
|
||
</motion.span>
|
||
</motion.div>
|
||
|
||
{/* Progress bar */}
|
||
<div className="w-72 mx-auto">
|
||
<div className="flex justify-between text-xs font-mono text-white/40 mb-2">
|
||
<span>BOOT SEQUENCE</span>
|
||
<span>{bootProgress}%</span>
|
||
</div>
|
||
<div className="h-2 bg-slate-800/80 rounded-full overflow-hidden border border-white/10">
|
||
<motion.div
|
||
className="h-full bg-gradient-to-r from-cyan-500 via-cyan-400 to-purple-600 relative"
|
||
initial={{ width: 0 }}
|
||
animate={{ width: `${bootProgress}%` }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse" />
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Detected identity badge */}
|
||
{detectedIdentity && (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
className="mt-6 inline-flex items-center gap-2 px-4 py-2 bg-green-500/20 border border-green-500/50 rounded-full"
|
||
>
|
||
<User className="w-4 h-4 text-green-400" />
|
||
<span className="text-green-400 font-mono text-sm">
|
||
{detectedIdentity.username} • ID:{detectedIdentity.passportId}
|
||
</span>
|
||
</motion.div>
|
||
)}
|
||
|
||
<div className="text-white/30 text-xs mt-6 font-mono">AeThex OS v4.2.1 • Aegis Security Layer Active</div>
|
||
|
||
<AnimatePresence>
|
||
{showLoginPrompt && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="mt-8 space-y-4"
|
||
>
|
||
<div className={`font-mono text-sm mb-6 flex items-center justify-center gap-2 ${threatColors[threatLevel]}`}>
|
||
<Shield className="w-4 h-4" />
|
||
{detectedIdentity
|
||
? `IDENTITY VERIFIED • THREAT LEVEL: ${threatLevel.toUpperCase()}`
|
||
: `SYSTEM READY • THREAT LEVEL: ${threatLevel.toUpperCase()}`
|
||
}
|
||
</div>
|
||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||
<motion.button
|
||
onClick={detectedIdentity ? handleGuestContinue : handleLoginFromBoot}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-cyan-400 hover:from-cyan-400 hover:to-cyan-300 text-black font-mono font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-2 shadow-lg shadow-cyan-500/30"
|
||
data-testid="boot-login-button"
|
||
>
|
||
<Key className="w-4 h-4" />
|
||
{detectedIdentity ? `Enter as ${detectedIdentity.username}` : 'Login with Passport'}
|
||
</motion.button>
|
||
{!detectedIdentity && (
|
||
<motion.button
|
||
onClick={handleGuestContinue}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className="px-6 py-3 border border-white/30 hover:bg-white/10 text-white/70 font-mono uppercase tracking-wider transition-colors"
|
||
data-testid="boot-guest-button"
|
||
>
|
||
Continue as Guest
|
||
</motion.button>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Right side - System specs (hidden on mobile) */}
|
||
<div className="hidden lg:flex w-64 h-full flex-col p-4 border-l border-purple-500/20 text-right">
|
||
<div className="text-purple-400 font-mono text-xs uppercase tracking-wider mb-3">
|
||
System Info
|
||
</div>
|
||
<div className="space-y-2 font-mono text-xs text-white/40">
|
||
<div>BUILD: 2025.12.21</div>
|
||
<div>KERNEL: 4.2.1-aethex</div>
|
||
<div>ARCH: x86_64</div>
|
||
<div className="pt-2 border-t border-white/10 mt-2">
|
||
<div className="text-purple-400">NEXUS NETWORK</div>
|
||
<div>Peers: 42 online</div>
|
||
<div>Latency: 12ms</div>
|
||
</div>
|
||
<div className="pt-2 border-t border-white/10 mt-2">
|
||
<div className="text-cyan-400">PASSPORT</div>
|
||
<div>{detectedIdentity ? 'Token: VALID' : 'Token: NONE'}</div>
|
||
<div>Mode: {detectedIdentity ? 'ARCHITECT' : 'GUEST'}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (showScreensaver) {
|
||
return (
|
||
<div
|
||
className="h-screen w-screen bg-black flex items-center justify-center cursor-pointer"
|
||
onClick={() => setShowScreensaver(false)}
|
||
>
|
||
<motion.div
|
||
animate={{
|
||
x: [0, 100, -100, 50, -50, 0],
|
||
y: [0, -50, 50, -25, 25, 0],
|
||
}}
|
||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||
className="text-center"
|
||
>
|
||
<div className="text-6xl font-display font-bold bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 text-transparent bg-clip-text">
|
||
AeThex
|
||
</div>
|
||
<div className="text-white/30 text-sm mt-2 font-mono">Click to wake</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Native Android App Layout
|
||
if (layout.isMobile) {
|
||
const activeWindows = windows.filter(w => !w.minimized);
|
||
const currentWindow = activeWindows[activeWindows.length - 1];
|
||
|
||
return (
|
||
<div className="h-screen w-screen bg-black overflow-hidden flex flex-col">
|
||
<style>{`
|
||
@keyframes scan {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100%); }
|
||
}
|
||
@keyframes pulse-border {
|
||
0%, 100% { opacity: 0.3; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
`}</style>
|
||
|
||
{/* Ingress Status Bar - Minimal */}
|
||
<div className="relative h-8 bg-black/90 border-b border-emerald-500/50 shrink-0">
|
||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-500/5 to-transparent"></div>
|
||
<div className="relative flex items-center justify-between px-4 h-full">
|
||
<div className="flex items-center gap-3">
|
||
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
||
<Wifi className="w-3.5 h-3.5 text-cyan-400" />
|
||
<div className="flex items-center gap-0.5">
|
||
{[...Array(4)].map((_, i) => (
|
||
<div key={i} className="w-0.5 h-1.5 bg-emerald-400 rounded-full" style={{ height: `${(i + 1) * 2}px` }} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4 text-cyan-400 text-xs font-mono font-bold tracking-wider">
|
||
<span>{batteryInfo?.level || 100}%</span>
|
||
<Battery className="w-4 h-4 text-green-400" />
|
||
<span className="font-mono text-cyan-400">{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 overflow-hidden relative bg-black">
|
||
<AnimatePresence mode="wait">
|
||
{currentWindow ? (
|
||
// Fullscreen App View with 3D Card Flip
|
||
<motion.div
|
||
key={currentWindow.id}
|
||
initial={{ rotateY: 90, opacity: 0 }}
|
||
animate={{ rotateY: 0, opacity: 1 }}
|
||
exit={{ rotateY: -90, opacity: 0 }}
|
||
transition={{ duration: 0.4, type: "spring" }}
|
||
style={{ transformStyle: "preserve-3d" }}
|
||
className="h-full w-full flex flex-col relative"
|
||
>
|
||
{/* Ingress Style - Minimal App Bar */}
|
||
<div className="relative h-12 bg-black/95 border-b-2 border-emerald-500/50 shrink-0">
|
||
<div className="absolute inset-0" style={{ animation: 'pulse-border 2s ease-in-out infinite' }}>
|
||
<div className="absolute inset-x-0 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent"></div>
|
||
</div>
|
||
<div className="relative flex items-center px-3 h-full">
|
||
<button
|
||
onClick={() => {
|
||
impact('light');
|
||
closeWindow(currentWindow.id);
|
||
}}
|
||
className="w-10 h-10 flex items-center justify-center border border-emerald-500/50 active:bg-emerald-500/20"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<ChevronLeft className="w-5 h-5 text-emerald-400" />
|
||
</button>
|
||
<div className="flex-1 px-4">
|
||
<h1 className="text-cyan-400 font-mono font-bold text-lg uppercase tracking-widest">
|
||
{currentWindow.title}
|
||
</h1>
|
||
</div>
|
||
<button
|
||
className="w-10 h-10 flex items-center justify-center border border-cyan-500/50 active:bg-cyan-500/20"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<MoreVertical className="w-5 h-5 text-cyan-400" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* App Content */}
|
||
<div className="flex-1 overflow-auto relative bg-black">
|
||
{renderAppContent(currentWindow.component)}
|
||
</div>
|
||
</motion.div>
|
||
) : (
|
||
// ULTRA FUTURISTIC LAUNCHER
|
||
<motion.div
|
||
key="launcher"
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.9 }}
|
||
className="h-full flex flex-col relative"
|
||
>
|
||
{/* Ingress Style Search Bar */}
|
||
<div className="px-4 pt-6 pb-4">
|
||
<div className="relative bg-black/80 border border-emerald-500/50 p-3">
|
||
<div className="absolute inset-0 border border-cyan-500/30" style={{ clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))' }}></div>
|
||
<div className="relative flex items-center gap-3">
|
||
<Search className="w-5 h-5 text-emerald-400" />
|
||
<input
|
||
type="text"
|
||
placeholder="SCANNER SEARCH..."
|
||
className="flex-1 bg-transparent text-emerald-400 placeholder:text-emerald-400/40 outline-none text-sm font-mono uppercase tracking-wide"
|
||
onFocus={() => impact('light')}
|
||
/>
|
||
<Mic className="w-5 h-5 text-cyan-400" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* App Grid - Hexagonal */}
|
||
<div className="flex-1 overflow-auto px-4 pb-24">
|
||
<div className="mb-6">
|
||
<div className="flex items-center gap-2 mb-3 px-2">
|
||
<div className="w-2 h-2 bg-emerald-400"></div>
|
||
<h2 className="text-emerald-400 text-xs uppercase tracking-widest font-mono font-bold">
|
||
Quick Access
|
||
</h2>
|
||
<div className="flex-1 h-[1px] bg-emerald-500/30"></div>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-3">
|
||
{apps.slice(0, 8).map((app) => (
|
||
<button
|
||
key={app.id}
|
||
onClick={() => {
|
||
impact('medium');
|
||
openApp(app);
|
||
}}
|
||
className="flex flex-col items-center gap-2 p-2 active:bg-emerald-500/10"
|
||
>
|
||
<div
|
||
className="relative w-16 h-16 bg-black border-2 border-emerald-500/50 flex items-center justify-center active:border-cyan-400"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<div className="text-emerald-400 scale-75">{app.icon}</div>
|
||
<div className="absolute inset-0 border border-cyan-500/20" style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}></div>
|
||
</div>
|
||
<span className="text-cyan-400 text-[9px] font-mono text-center line-clamp-2 leading-tight uppercase">
|
||
{app.title}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* All Apps - Minimal List */}
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-3 px-2">
|
||
<div className="w-2 h-2 bg-cyan-400"></div>
|
||
<h2 className="text-cyan-400 text-xs uppercase tracking-widest font-mono font-bold">
|
||
All Systems
|
||
</h2>
|
||
<div className="flex-1 h-[1px] bg-cyan-500/30"></div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{apps.slice(8).map((app) => (
|
||
<button
|
||
key={app.id}
|
||
onClick={() => {
|
||
impact('medium');
|
||
openApp(app);
|
||
}}
|
||
className="relative w-full flex items-center gap-3 p-3 border border-emerald-500/30 active:bg-emerald-500/10 active:border-cyan-500"
|
||
>
|
||
<div className="w-10 h-10 bg-black border border-emerald-500/50 flex items-center justify-center shrink-0">
|
||
<div className="text-emerald-400 scale-75">{app.icon}</div>
|
||
</div>
|
||
<span className="text-cyan-400 font-mono text-sm text-left flex-1 uppercase tracking-wide">{app.title}</span>
|
||
<ChevronRight className="w-4 h-4 text-emerald-400" />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{/* INGRESS STYLE NAVIGATION BAR - Lightweight */}
|
||
<div
|
||
className="relative bg-black/95 border-t-2 border-emerald-500/50 shrink-0 z-50"
|
||
style={{
|
||
paddingTop: '0.75rem',
|
||
paddingBottom: 'calc(0.75rem + env(safe-area-inset-bottom))',
|
||
}}
|
||
>
|
||
<div className="absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent" style={{ animation: 'pulse-border 2s ease-in-out infinite' }}></div>
|
||
<div className="relative flex items-center justify-around px-6">
|
||
<button
|
||
onClick={() => {
|
||
impact('medium');
|
||
windows.forEach(w => closeWindow(w.id));
|
||
}}
|
||
className="relative w-14 h-14 bg-black border-2 border-emerald-500/70 flex items-center justify-center active:bg-emerald-500/20 active:border-cyan-400"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<Home className="w-6 h-6 text-emerald-400" />
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => {
|
||
impact('medium');
|
||
const minimized = windows.filter(w => w.minimized);
|
||
if (minimized.length > 0) {
|
||
setWindows(prev => prev.map(w =>
|
||
w.id === minimized[0].id ? { ...w, minimized: false } : w
|
||
));
|
||
}
|
||
}}
|
||
className="relative w-14 h-14 bg-black border-2 border-cyan-500/70 flex items-center justify-center active:bg-cyan-500/20 active:border-emerald-400"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<Square className="w-6 h-6 text-cyan-400" />
|
||
{windows.filter(w => w.minimized).length > 0 && (
|
||
<span className="absolute -top-1 -right-1 w-5 h-5 bg-emerald-500 text-black text-xs flex items-center justify-center font-bold">
|
||
{windows.filter(w => w.minimized).length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => {
|
||
impact('medium');
|
||
if (currentWindow) {
|
||
closeWindow(currentWindow.id);
|
||
}
|
||
}}
|
||
className="relative w-14 h-14 bg-black border-2 border-emerald-500/70 flex items-center justify-center active:bg-emerald-500/20 active:border-cyan-400"
|
||
style={{ clipPath: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)' }}
|
||
>
|
||
<ArrowLeft className="w-6 h-6 text-emerald-400" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Floating Action Button with Orbital Menu */}
|
||
<MobileQuickActions />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
console.log('🖥️ [OS] Rendering DESKTOP layout (isMobile=false)');
|
||
|
||
// Desktop/Web layout
|
||
return (
|
||
<div
|
||
className="h-screen w-screen overflow-hidden select-none relative transition-all duration-700"
|
||
style={{
|
||
background: clearanceTheme.wallpaper,
|
||
backgroundPosition: `${50 + parallaxX}% ${50 + parallaxY}%`,
|
||
backgroundSize: '110% 110%'
|
||
}}
|
||
>
|
||
<div
|
||
ref={desktopRef}
|
||
className="h-[calc(100vh-48px)] w-full relative"
|
||
onClick={handleDesktopClick}
|
||
onContextMenu={handleDesktopContextMenu}
|
||
>
|
||
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,255,170,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,170,0.02)_1px,transparent_1px)] bg-[size:50px_50px] pointer-events-none" />
|
||
|
||
<DesktopWidgets time={time} weather={weatherData} notifications={notifications} />
|
||
|
||
<div className="absolute top-4 left-4 grid grid-cols-2 gap-2 w-48">
|
||
{apps.slice(0, 9).map((app) => (
|
||
<DesktopIcon
|
||
key={app.id}
|
||
icon={app.icon}
|
||
label={app.title}
|
||
onClick={() => openApp(app)}
|
||
onContextMenu={(e) => handleIconContextMenu(e, app.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{isDesktopLocked && windows.length === 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="absolute inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"
|
||
>
|
||
<div className="text-center">
|
||
<div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-cyan-500 to-purple-600 flex items-center justify-center mb-4">
|
||
<Lock className="w-10 h-10 text-white" />
|
||
</div>
|
||
<h2 className="text-xl font-display text-white uppercase tracking-wider mb-2">Desktop Locked</h2>
|
||
<p className="text-white/60 text-sm font-mono mb-6">Sign in with your Passport to continue</p>
|
||
<button
|
||
onClick={() => {
|
||
const passportApp = apps.find(a => a.id === 'passport');
|
||
if (passportApp) openApp(passportApp);
|
||
}}
|
||
className="px-6 py-3 bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold uppercase tracking-wider transition-colors"
|
||
data-testid="unlock-desktop-btn"
|
||
>
|
||
Open Passport
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
<AnimatePresence>
|
||
{windows.filter(w => !w.minimized && w.desktopId === currentDesktop).map((window) => (
|
||
<Window
|
||
key={window.id}
|
||
window={window}
|
||
isActive={activeWindowId === window.id}
|
||
onClose={() => closeWindow(window.id)}
|
||
onMinimize={() => minimizeWindow(window.id)}
|
||
onMaximize={() => toggleMaximize(window.id)}
|
||
onFocus={() => focusWindow(window.id)}
|
||
onMove={(x, y) => setWindows(prev => prev.map(w => w.id === window.id ? { ...w, x, y } : w))}
|
||
onResize={(width, height) => setWindows(prev => prev.map(w => w.id === window.id ? { ...w, width, height } : w))}
|
||
onSnap={(x, y) => handleWindowSnap(window.id, x, y, window.width, window.height)}
|
||
content={window.component === 'iframe' && window.iframeUrl ? (
|
||
<iframe
|
||
src={window.iframeUrl}
|
||
className="w-full h-full border-0"
|
||
title={window.title}
|
||
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
||
/>
|
||
) : renderAppContent(window.component)}
|
||
/>
|
||
))}
|
||
</AnimatePresence>
|
||
|
||
<AnimatePresence>
|
||
{contextMenu && (
|
||
<ContextMenuComponent
|
||
menu={contextMenu}
|
||
apps={apps}
|
||
onClose={() => setContextMenu(null)}
|
||
onOpenApp={openApp}
|
||
onRefresh={() => window.location.reload()}
|
||
onChangeWallpaper={() => {
|
||
const idx = WALLPAPERS.findIndex(w => w.id === wallpaper.id);
|
||
setWallpaper(WALLPAPERS[(idx + 1) % WALLPAPERS.length]);
|
||
setContextMenu(null);
|
||
}}
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
<Taskbar
|
||
windows={windows.filter(w => w.desktopId === currentDesktop)}
|
||
activeWindowId={activeWindowId}
|
||
apps={apps}
|
||
time={time}
|
||
showStartMenu={showStartMenu}
|
||
user={user}
|
||
isAuthenticated={isAuthenticated}
|
||
notifications={notifications}
|
||
showNotifications={showNotifications}
|
||
onToggleStartMenu={() => { setShowStartMenu(!showStartMenu); setActiveTrayPanel(null); }}
|
||
onToggleNotifications={() => setShowNotifications(!showNotifications)}
|
||
onWindowClick={(id) => {
|
||
const window = windows.find(w => w.id === id);
|
||
if (window?.minimized) {
|
||
setWindows(prev => prev.map(w => w.id === id ? { ...w, minimized: false, zIndex: maxZIndex + 1 } : w));
|
||
setMaxZIndex(prev => prev + 1);
|
||
}
|
||
focusWindow(id);
|
||
}}
|
||
onAppClick={openApp}
|
||
onLogout={handleLogout}
|
||
onNavigate={setLocation}
|
||
currentDesktop={currentDesktop}
|
||
onDesktopChange={(d) => {
|
||
setCurrentDesktop(d);
|
||
setActiveTrayPanel(null);
|
||
}}
|
||
clearanceTheme={clearanceTheme}
|
||
onSwitchClearance={switchClearance}
|
||
activeTrayPanel={activeTrayPanel}
|
||
onTrayPanelToggle={(panel) => setActiveTrayPanel(activeTrayPanel === panel ? null : panel)}
|
||
volume={volume}
|
||
onVolumeChange={setVolume}
|
||
isMuted={isMuted}
|
||
onMuteToggle={() => setIsMuted(!isMuted)}
|
||
batteryInfo={batteryInfo}
|
||
onClearNotification={(idx) => setNotifications(prev => prev.filter((_, i) => i !== idx))}
|
||
onClearAllNotifications={() => setNotifications([])}
|
||
desktopWindowCounts={[0, 1, 2, 3].map(d => windows.filter(w => w.desktopId === d).length)}
|
||
openIframeWindow={openIframeWindow}
|
||
/>
|
||
|
||
<AnimatePresence>
|
||
{isSwitchingClearance && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="fixed inset-0 z-[99999] flex items-center justify-center"
|
||
style={{ background: clearanceMode === 'foundation' ? '#0F172A' : '#1a0505' }}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.8, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
exit={{ scale: 1.2, opacity: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="text-center"
|
||
>
|
||
<motion.div
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||
className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center"
|
||
style={{
|
||
border: `3px solid ${clearanceMode === 'foundation' ? '#3B82F6' : '#D4AF37'}`,
|
||
borderTopColor: 'transparent'
|
||
}}
|
||
/>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="font-display text-2xl uppercase tracking-[0.3em]"
|
||
style={{ color: clearanceMode === 'foundation' ? '#C0C0C0' : '#D4AF37' }}
|
||
>
|
||
{clearanceMode === 'foundation' ? 'Entering Corp' : 'Entering Foundation'}
|
||
</motion.div>
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
animate={{ width: '100%' }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="h-0.5 mt-4 mx-auto max-w-[200px]"
|
||
style={{ background: `linear-gradient(90deg, transparent, ${clearanceMode === 'foundation' ? '#3B82F6' : '#DC2626'}, transparent)` }}
|
||
/>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<ParticleField />
|
||
|
||
<AnimatePresence>
|
||
{showSpotlight && (
|
||
<SpotlightSearch
|
||
query={spotlightQuery}
|
||
setQuery={setSpotlightQuery}
|
||
apps={apps}
|
||
onSelectApp={(app) => { openApp(app); setShowSpotlight(false); }}
|
||
onClose={() => setShowSpotlight(false)}
|
||
inputRef={spotlightRef}
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<ToastContainer toasts={toasts} />
|
||
|
||
<AnimatePresence>
|
||
{showDailyTip && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 50 }}
|
||
className="fixed bottom-20 right-4 z-[9998] w-80 rounded-xl overflow-hidden shadow-2xl"
|
||
style={{
|
||
background: clearanceTheme.id === 'foundation' ? 'rgba(26, 5, 5, 0.95)' : 'rgba(15, 23, 42, 0.95)',
|
||
border: `1px solid ${clearanceTheme.accent}40`
|
||
}}
|
||
>
|
||
<div
|
||
className="px-4 py-3 flex items-center justify-between"
|
||
style={{ borderBottom: `1px solid ${clearanceTheme.accent}30` }}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Zap className="w-4 h-4" style={{ color: clearanceTheme.accent }} />
|
||
<span className="text-sm font-semibold text-white">Daily Tip</span>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowDailyTip(false)}
|
||
className="text-white/40 hover:text-white transition-colors"
|
||
data-testid="close-daily-tip"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="text-xs uppercase tracking-wider mb-2" style={{ color: clearanceTheme.accent }}>
|
||
{dailyTip.title}
|
||
</div>
|
||
<p className="text-sm text-white/80 leading-relaxed">
|
||
{dailyTip.tip}
|
||
</p>
|
||
</div>
|
||
<div className="px-4 pb-4">
|
||
<button
|
||
onClick={() => setShowDailyTip(false)}
|
||
className="w-full py-2 rounded-lg text-sm font-medium transition-all hover:scale-[1.02]"
|
||
style={{
|
||
background: `${clearanceTheme.accent}20`,
|
||
color: clearanceTheme.accent,
|
||
border: `1px solid ${clearanceTheme.accent}40`
|
||
}}
|
||
data-testid="dismiss-daily-tip"
|
||
>
|
||
Got it!
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{weatherFetching && (
|
||
<div className="fixed top-4 right-4 z-[9999] flex items-center gap-2 px-3 py-2 rounded-lg bg-black/50 backdrop-blur-sm" data-testid="loading-indicator">
|
||
<Loader2 className="w-4 h-4 animate-spin" style={{ color: clearanceTheme.accent }} />
|
||
<span className="text-xs text-white/60">Syncing...</span>
|
||
</div>
|
||
)}
|
||
|
||
<AnimatePresence>
|
||
{showOnboarding && (
|
||
<OnboardingTour
|
||
step={onboardingStep}
|
||
onNext={() => setOnboardingStep(s => s + 1)}
|
||
onClose={() => setShowOnboarding(false)}
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface WidgetPosition {
|
||
x: number;
|
||
y: number;
|
||
}
|
||
|
||
interface WidgetPositions {
|
||
[key: string]: WidgetPosition;
|
||
}
|
||
|
||
function getDefaultWidgetPositions(): WidgetPositions {
|
||
const w = typeof window !== 'undefined' ? window.innerWidth : 1200;
|
||
const h = typeof window !== 'undefined' ? window.innerHeight : 800;
|
||
return {
|
||
clock: { x: w - 220, y: 16 },
|
||
weather: { x: w - 220, y: 100 },
|
||
status: { x: w - 220, y: 200 },
|
||
notifications: { x: w - 220, y: 320 },
|
||
leaderboard: { x: w - 440, y: 16 },
|
||
pipeline: { x: w - 440, y: 180 },
|
||
kpi: { x: w - 440, y: 340 },
|
||
heartbeat: { x: 16, y: h - 180 },
|
||
};
|
||
}
|
||
|
||
function DraggableWidget({
|
||
id,
|
||
children,
|
||
positions,
|
||
onPositionChange,
|
||
className = ""
|
||
}: {
|
||
id: string;
|
||
children: React.ReactNode;
|
||
positions: WidgetPositions;
|
||
onPositionChange: (id: string, pos: WidgetPosition) => void;
|
||
className?: string;
|
||
}) {
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
||
const widgetRef = useRef<HTMLDivElement>(null);
|
||
|
||
const defaultPositions = getDefaultWidgetPositions();
|
||
const position = positions[id] || defaultPositions[id] || { x: 100, y: 100 };
|
||
|
||
const handleMouseDown = (e: React.MouseEvent) => {
|
||
if ((e.target as HTMLElement).closest('.widget-drag-handle')) {
|
||
e.preventDefault();
|
||
setIsDragging(true);
|
||
setDragOffset({
|
||
x: e.clientX - position.x,
|
||
y: e.clientY - position.y
|
||
});
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!isDragging) return;
|
||
|
||
const handleMouseMove = (e: MouseEvent) => {
|
||
const newX = Math.max(0, Math.min(window.innerWidth - 50, e.clientX - dragOffset.x));
|
||
const newY = Math.max(0, Math.min(window.innerHeight - 60, e.clientY - dragOffset.y));
|
||
onPositionChange(id, { x: newX, y: newY });
|
||
};
|
||
|
||
const handleMouseUp = () => {
|
||
setIsDragging(false);
|
||
};
|
||
|
||
document.addEventListener('mousemove', handleMouseMove);
|
||
document.addEventListener('mouseup', handleMouseUp);
|
||
return () => {
|
||
document.removeEventListener('mousemove', handleMouseMove);
|
||
document.removeEventListener('mouseup', handleMouseUp);
|
||
};
|
||
}, [isDragging, dragOffset, id, onPositionChange]);
|
||
|
||
return (
|
||
<motion.div
|
||
ref={widgetRef}
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
className={`fixed bg-slate-900/80 backdrop-blur-xl border border-white/10 rounded-lg overflow-hidden ${isDragging ? 'cursor-grabbing shadow-lg shadow-cyan-500/20' : ''} ${className}`}
|
||
style={{
|
||
left: position.x,
|
||
top: position.y,
|
||
zIndex: isDragging ? 50 : 5,
|
||
pointerEvents: 'auto'
|
||
}}
|
||
onMouseDown={handleMouseDown}
|
||
data-testid={`widget-${id}`}
|
||
>
|
||
<div className="widget-drag-handle h-5 bg-white/5 flex items-center justify-center cursor-grab hover:bg-white/10 transition-colors">
|
||
<div className="flex gap-0.5">
|
||
<div className="w-1 h-1 rounded-full bg-white/30" />
|
||
<div className="w-1 h-1 rounded-full bg-white/30" />
|
||
<div className="w-1 h-1 rounded-full bg-white/30" />
|
||
</div>
|
||
</div>
|
||
{children}
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
function DesktopWidgets({ time, weather, notifications }: {
|
||
time: Date;
|
||
weather?: { current_weather?: { temperature: number; windspeed: number; weathercode: number } };
|
||
notifications?: string[];
|
||
}) {
|
||
const [widgetPositions, setWidgetPositions] = useState<WidgetPositions>(() => {
|
||
const saved = localStorage.getItem('aethex-widget-positions');
|
||
return saved ? JSON.parse(saved) : getDefaultWidgetPositions();
|
||
});
|
||
const [positionResetKey, setPositionResetKey] = useState(0);
|
||
const [widgetVisibility, setWidgetVisibility] = useState<Record<string, boolean>>(() => {
|
||
const saved = localStorage.getItem('aethex-widget-visibility');
|
||
return saved ? JSON.parse(saved) : { clock: true, weather: true, status: true, notifications: true, leaderboard: true, pipeline: true, kpi: true, heartbeat: true };
|
||
});
|
||
const [showWidgetSettings, setShowWidgetSettings] = useState(false);
|
||
const [mobileWidgetsOpen, setMobileWidgetsOpen] = useState(false);
|
||
const [isMobile, setIsMobile] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
||
checkMobile();
|
||
window.addEventListener('resize', checkMobile);
|
||
return () => window.removeEventListener('resize', checkMobile);
|
||
}, []);
|
||
|
||
const toggleWidgetVisibility = (id: string) => {
|
||
setWidgetVisibility(prev => {
|
||
const updated = { ...prev, [id]: !prev[id] };
|
||
localStorage.setItem('aethex-widget-visibility', JSON.stringify(updated));
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const resetWidgetPositions = () => {
|
||
const defaults = getDefaultWidgetPositions();
|
||
setWidgetPositions(defaults);
|
||
setPositionResetKey(k => k + 1);
|
||
localStorage.setItem('aethex-widget-positions', JSON.stringify(defaults));
|
||
};
|
||
|
||
const widgetOptions = [
|
||
{ id: 'clock', label: 'Clock' },
|
||
{ id: 'weather', label: 'Weather' },
|
||
{ id: 'status', label: 'System Status' },
|
||
{ id: 'notifications', label: 'Notifications' },
|
||
{ id: 'leaderboard', label: 'Leaderboard' },
|
||
{ id: 'pipeline', label: 'Pipeline' },
|
||
{ id: 'kpi', label: 'KPI Dashboard' },
|
||
{ id: 'heartbeat', label: 'Network Heartbeat' },
|
||
];
|
||
|
||
const { data: metrics } = useQuery({
|
||
queryKey: ['os-metrics'],
|
||
queryFn: () => dataService.fetchMetrics(),
|
||
refetchInterval: 30000,
|
||
});
|
||
|
||
const { data: leaderboard } = useQuery({
|
||
queryKey: ['os-leaderboard'],
|
||
queryFn: async () => {
|
||
const data = await dataService.fetchLeaderboard();
|
||
return data.slice(0, 5);
|
||
},
|
||
refetchInterval: 60000,
|
||
});
|
||
|
||
const handlePositionChange = useCallback((id: string, pos: WidgetPosition) => {
|
||
setWidgetPositions(prev => {
|
||
const updated = { ...prev, [id]: pos };
|
||
localStorage.setItem('aethex-widget-positions', JSON.stringify(updated));
|
||
return updated;
|
||
});
|
||
}, []);
|
||
|
||
const getWeatherIcon = (code: number) => {
|
||
if (code === 0) return '☀️';
|
||
if (code <= 3) return '⛅';
|
||
if (code <= 48) return '🌫️';
|
||
if (code <= 67) return '🌧️';
|
||
if (code <= 77) return '🌨️';
|
||
if (code <= 82) return '🌧️';
|
||
if (code <= 86) return '🌨️';
|
||
return '⛈️';
|
||
};
|
||
|
||
const getNotificationCategory = (text: string) => {
|
||
if (text.toLowerCase().includes('security') || text.toLowerCase().includes('aegis'))
|
||
return { color: 'text-green-400', icon: <Shield className="w-3 h-3" /> };
|
||
if (text.toLowerCase().includes('project'))
|
||
return { color: 'text-purple-400', icon: <FolderOpen className="w-3 h-3" /> };
|
||
return { color: 'text-cyan-400', icon: <Users className="w-3 h-3" /> };
|
||
};
|
||
|
||
if (isMobile) {
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={() => setMobileWidgetsOpen(!mobileWidgetsOpen)}
|
||
className="fixed top-4 right-4 z-50 w-10 h-10 bg-slate-900/90 backdrop-blur-xl border border-white/20 rounded-lg flex items-center justify-center text-white/70 hover:text-white transition-colors pointer-events-auto"
|
||
data-testid="mobile-widgets-toggle"
|
||
>
|
||
<BarChart3 className="w-5 h-5" />
|
||
</button>
|
||
<AnimatePresence>
|
||
{mobileWidgetsOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 300 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
exit={{ opacity: 0, x: 300 }}
|
||
className="fixed top-0 right-0 bottom-12 w-72 bg-slate-900/95 backdrop-blur-xl border-l border-white/10 overflow-y-auto z-40 pointer-events-auto"
|
||
>
|
||
<div className="p-4 border-b border-white/10 flex items-center justify-between sticky top-0 bg-slate-900/95">
|
||
<span className="text-sm text-white/70 uppercase tracking-wider">Widgets</span>
|
||
<button onClick={() => setMobileWidgetsOpen(false)} className="text-white/50 hover:text-white">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
{widgetVisibility.clock !== false && (
|
||
<div className="bg-white/5 rounded-lg p-3">
|
||
<div className="text-2xl font-mono text-white font-bold">
|
||
{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
<div className="text-xs text-white/50 font-mono">
|
||
{time.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' })}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{widgetVisibility.weather !== false && weather?.current_weather && (
|
||
<div className="bg-white/5 rounded-lg p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">Weather</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">{getWeatherIcon(weather.current_weather.weathercode)}</span>
|
||
<div>
|
||
<div className="text-xl font-mono text-white">{Math.round(weather.current_weather.temperature)}°F</div>
|
||
<div className="text-xs text-white/50">Wind: {weather.current_weather.windspeed} mph</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{widgetVisibility.status !== false && metrics && (
|
||
<div className="bg-white/5 rounded-lg p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">System Status</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs font-mono">
|
||
<div className="flex justify-between">
|
||
<span className="text-white/60">Architects</span>
|
||
<span className="text-cyan-400">{metrics.totalProfiles || 0}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-white/60">Projects</span>
|
||
<span className="text-purple-400">{metrics.totalProjects || 0}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-white/60">Verified</span>
|
||
<span className="text-yellow-400">{metrics.verifiedUsers || 0}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-white/60">Online</span>
|
||
<span className="text-green-400">{metrics.onlineUsers || 0}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{widgetVisibility.notifications !== false && notifications && notifications.length > 0 && (
|
||
<div className="bg-white/5 rounded-lg p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">Notifications</div>
|
||
<div className="space-y-1.5 text-xs">
|
||
{notifications.slice(0, 4).map((n, i) => {
|
||
const cat = getNotificationCategory(n);
|
||
return (
|
||
<div key={i} className={`flex items-center gap-2 ${cat.color}`}>
|
||
{cat.icon}
|
||
<span className="truncate text-white/70">{n}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{widgetVisibility.leaderboard !== false && leaderboard && leaderboard.length > 0 && (
|
||
<div className="bg-white/5 rounded-lg p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||
<Award className="w-3 h-3 text-yellow-400" />
|
||
Top Architects
|
||
</div>
|
||
<div className="space-y-1.5 text-xs font-mono">
|
||
{leaderboard.map((arch: any, i: number) => (
|
||
<div key={arch.id} className="flex items-center gap-2">
|
||
<span className={`w-4 text-center ${i === 0 ? 'text-yellow-400' : i === 1 ? 'text-gray-300' : i === 2 ? 'text-amber-600' : 'text-white/40'}`}>
|
||
{i + 1}
|
||
</span>
|
||
<span className="flex-1 truncate text-white/80">{arch.username || arch.display_name}</span>
|
||
<span className="text-cyan-400">Lv{arch.level || 1}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="pointer-events-none absolute inset-0 hidden md:block">
|
||
<button
|
||
onClick={() => setShowWidgetSettings(true)}
|
||
className="fixed top-4 left-4 z-50 w-8 h-8 bg-slate-900/80 backdrop-blur-xl border border-white/20 rounded-lg flex items-center justify-center text-white/50 hover:text-white transition-colors pointer-events-auto"
|
||
data-testid="widget-settings-btn"
|
||
>
|
||
<Settings className="w-4 h-4" />
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{showWidgetSettings && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-auto"
|
||
onClick={() => setShowWidgetSettings(false)}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.9, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
exit={{ scale: 0.9, opacity: 0 }}
|
||
className="bg-slate-900/95 backdrop-blur-xl border border-white/20 rounded-xl p-6 w-80"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-white font-display uppercase tracking-wider">Widget Settings</h3>
|
||
<button onClick={() => setShowWidgetSettings(false)} className="text-white/50 hover:text-white">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-2 mb-4">
|
||
{widgetOptions.map(opt => (
|
||
<label key={opt.id} className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={widgetVisibility[opt.id] !== false}
|
||
onChange={() => toggleWidgetVisibility(opt.id)}
|
||
className="w-4 h-4 rounded border-white/30 bg-white/10 text-cyan-500 focus:ring-cyan-500"
|
||
/>
|
||
<span className="text-white/80 text-sm">{opt.label}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={resetWidgetPositions}
|
||
className="w-full py-2 bg-white/10 hover:bg-white/20 text-white/80 rounded-lg text-sm transition-colors"
|
||
>
|
||
Reset Positions
|
||
</button>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{widgetVisibility.clock !== false && (
|
||
<DraggableWidget key={`clock-${positionResetKey}`} id="clock" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-48">
|
||
<div className="p-3">
|
||
<div className="text-2xl font-mono text-white font-bold">
|
||
{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
<div className="text-xs text-white/50 font-mono">
|
||
{time.toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' })}
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.weather !== false && weather?.current_weather && (
|
||
<DraggableWidget key={`weather-${positionResetKey}`} id="weather" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-48">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">Weather</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">{getWeatherIcon(weather.current_weather.weathercode)}</span>
|
||
<div>
|
||
<div className="text-xl font-mono text-white">{Math.round(weather.current_weather.temperature)}°F</div>
|
||
<div className="text-xs text-white/50">Wind: {weather.current_weather.windspeed} mph</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.status !== false && metrics && (
|
||
<DraggableWidget key={`status-${positionResetKey}`} id="status" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-48">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">System Status</div>
|
||
<div className="space-y-1.5 text-xs font-mono">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-white/60">Architects</span>
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-cyan-400">{metrics.totalProfiles || 0}</span>
|
||
<TrendingUp className="w-3 h-3 text-green-400" />
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-white/60">Projects</span>
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-purple-400">{metrics.totalProjects || 0}</span>
|
||
<TrendingUp className="w-3 h-3 text-green-400" />
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-white/60">Online</span>
|
||
<span className="text-green-400">{metrics.onlineUsers || 0}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-white/60">Verified</span>
|
||
<span className="text-yellow-400">{metrics.verifiedUsers || 0}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.notifications !== false && notifications && notifications.length > 0 && (
|
||
<DraggableWidget key={`notifications-${positionResetKey}`} id="notifications" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-52">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2">Notifications</div>
|
||
<div className="space-y-1.5 text-xs max-h-24 overflow-y-auto">
|
||
{notifications.slice(0, 4).map((n, i) => {
|
||
const cat = getNotificationCategory(n);
|
||
return (
|
||
<div key={i} className={`flex items-center gap-2 ${cat.color}`}>
|
||
{cat.icon}
|
||
<span className="truncate text-white/70">{n}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.leaderboard !== false && leaderboard && leaderboard.length > 0 && (
|
||
<DraggableWidget key={`leaderboard-${positionResetKey}`} id="leaderboard" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-52">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||
<Award className="w-3 h-3 text-yellow-400" />
|
||
Top Architects
|
||
</div>
|
||
<div className="space-y-1.5 text-xs font-mono">
|
||
{leaderboard.map((arch: any, i: number) => (
|
||
<div key={arch.id} className="flex items-center gap-2">
|
||
<span className={`w-4 text-center ${i === 0 ? 'text-yellow-400' : i === 1 ? 'text-gray-300' : i === 2 ? 'text-amber-600' : 'text-white/40'}`}>
|
||
{i + 1}
|
||
</span>
|
||
<span className="flex-1 truncate text-white/80">{arch.username || arch.display_name}</span>
|
||
<span className="text-cyan-400">Lv{arch.level || 1}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.pipeline !== false && metrics && (
|
||
<DraggableWidget key={`pipeline-${positionResetKey}`} id="pipeline" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-52">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||
<Layers className="w-3 h-3 text-purple-400" />
|
||
Project Pipeline
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div>
|
||
<div className="flex justify-between text-xs mb-1">
|
||
<span className="text-white/60">Active</span>
|
||
<span className="text-green-400">{metrics.totalProjects || 0}</span>
|
||
</div>
|
||
<div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||
<div className="h-full bg-green-500 rounded-full" style={{ width: '75%' }} />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-xs mb-1">
|
||
<span className="text-white/60">In Review</span>
|
||
<span className="text-yellow-400">2</span>
|
||
</div>
|
||
<div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||
<div className="h-full bg-yellow-500 rounded-full" style={{ width: '40%' }} />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-xs mb-1">
|
||
<span className="text-white/60">Completed</span>
|
||
<span className="text-cyan-400">12</span>
|
||
</div>
|
||
<div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||
<div className="h-full bg-cyan-500 rounded-full" style={{ width: '100%' }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.kpi !== false && metrics && (
|
||
<DraggableWidget key={`kpi-${positionResetKey}`} id="kpi" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-52">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||
<BarChart3 className="w-3 h-3 text-cyan-400" />
|
||
Key Metrics
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="bg-white/5 rounded p-2 text-center">
|
||
<div className="text-lg font-mono text-cyan-400">{metrics.totalXP || 0}</div>
|
||
<div className="text-[10px] text-white/50">Total XP</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded p-2 text-center">
|
||
<div className="text-lg font-mono text-purple-400">{metrics.avgLevel || 1}</div>
|
||
<div className="text-[10px] text-white/50">Avg Level</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded p-2 text-center">
|
||
<div className="text-lg font-mono text-green-400">{metrics.verifiedUsers || 0}</div>
|
||
<div className="text-[10px] text-white/50">Verified</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded p-2 text-center">
|
||
<div className="text-lg font-mono text-yellow-400">98%</div>
|
||
<div className="text-[10px] text-white/50">Uptime</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
|
||
{widgetVisibility.heartbeat !== false && (
|
||
<DraggableWidget key={`heartbeat-${positionResetKey}`} id="heartbeat" positions={widgetPositions} onPositionChange={handlePositionChange} className="w-48">
|
||
<div className="p-3">
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-2 flex items-center gap-2">
|
||
<Activity className="w-3 h-3 text-red-400" />
|
||
Network Pulse
|
||
</div>
|
||
<div className="flex items-center justify-center py-2">
|
||
<motion.div
|
||
animate={{ scale: [1, 1.2, 1] }}
|
||
transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" }}
|
||
className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center"
|
||
>
|
||
<motion.div
|
||
animate={{ scale: [1, 1.1, 1] }}
|
||
transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut", delay: 0.1 }}
|
||
className="w-4 h-4 rounded-full bg-red-500"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
<div className="text-center text-xs text-white/60 font-mono">
|
||
<span className="text-green-400">●</span> All Systems Operational
|
||
</div>
|
||
</div>
|
||
</DraggableWidget>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DesktopIcon({ icon, label, onClick, onContextMenu }: {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
onClick: () => void;
|
||
onContextMenu?: (e: React.MouseEvent) => void;
|
||
}) {
|
||
return (
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
onDoubleClick={onClick}
|
||
onContextMenu={onContextMenu}
|
||
className="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-white/10 transition-colors cursor-pointer group"
|
||
data-testid={`desktop-icon-${label.toLowerCase().replace(/\s/g, '-')}`}
|
||
>
|
||
<div className="text-cyan-400 group-hover:text-cyan-300 transition-colors">
|
||
{icon}
|
||
</div>
|
||
<span className="text-xs text-white/80 text-center leading-tight font-mono">
|
||
{label}
|
||
</span>
|
||
</motion.button>
|
||
);
|
||
}
|
||
|
||
function ContextMenuComponent({ menu, apps, onClose, onOpenApp, onRefresh, onChangeWallpaper }: {
|
||
menu: ContextMenuState;
|
||
apps: DesktopApp[];
|
||
onClose: () => void;
|
||
onOpenApp: (app: DesktopApp) => void;
|
||
onRefresh: () => void;
|
||
onChangeWallpaper: () => void;
|
||
}) {
|
||
const app = menu.appId ? apps.find(a => a.id === menu.appId) : null;
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.95 }}
|
||
className="fixed bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-lg py-1 shadow-2xl min-w-[160px]"
|
||
style={{ left: menu.x, top: menu.y, zIndex: 99999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{menu.type === 'icon' && app ? (
|
||
<>
|
||
<MenuItem icon={<ChevronRight className="w-4 h-4" />} label="Open" onClick={() => { onOpenApp(app); onClose(); }} />
|
||
<div className="border-t border-white/10 my-1" />
|
||
<MenuItem icon={<Image className="w-4 h-4" />} label="Properties" onClick={onClose} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<MenuItem icon={<Monitor className="w-4 h-4" />} label="Refresh" onClick={() => { onRefresh(); onClose(); }} />
|
||
<MenuItem icon={<Image className="w-4 h-4" />} label="Change Wallpaper" onClick={onChangeWallpaper} />
|
||
<div className="border-t border-white/10 my-1" />
|
||
<MenuItem icon={<Settings className="w-4 h-4" />} label="Settings" onClick={() => {
|
||
const settingsApp = apps.find(a => a.id === 'settings');
|
||
if (settingsApp) onOpenApp(settingsApp);
|
||
onClose();
|
||
}} />
|
||
</>
|
||
)}
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
function MenuItem({ icon, label, onClick }: { icon: React.ReactNode; label: string; onClick: () => void }) {
|
||
return (
|
||
<button
|
||
onClick={onClick}
|
||
className="w-full flex items-center gap-3 px-3 py-2 text-sm text-white/80 hover:text-white hover:bg-white/10 transition-colors"
|
||
>
|
||
{icon}
|
||
{label}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
interface WindowProps {
|
||
window: WindowState;
|
||
isActive: boolean;
|
||
onClose: () => void;
|
||
onMinimize: () => void;
|
||
onMaximize: () => void;
|
||
onFocus: () => void;
|
||
onMove: (x: number, y: number) => void;
|
||
onResize: (width: number, height: number) => void;
|
||
onSnap: (x: number, y: number) => boolean;
|
||
content: React.ReactNode;
|
||
}
|
||
|
||
function Window({ window, isActive, onClose, onMinimize, onMaximize, onFocus, onMove, onResize, onSnap, content }: WindowProps) {
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [isResizing, setIsResizing] = useState(false);
|
||
const dragStart = useRef({ x: 0, y: 0, windowX: 0, windowY: 0 });
|
||
const resizeStart = useRef({ x: 0, y: 0, width: 0, height: 0 });
|
||
|
||
const handleDragStart = (e: React.MouseEvent) => {
|
||
if (window.maximized) return;
|
||
e.preventDefault();
|
||
setIsDragging(true);
|
||
dragStart.current = { x: e.clientX, y: e.clientY, windowX: window.x, windowY: window.y };
|
||
onFocus();
|
||
};
|
||
|
||
const handleResizeStart = (e: React.MouseEvent) => {
|
||
if (window.maximized) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsResizing(true);
|
||
resizeStart.current = { x: e.clientX, y: e.clientY, width: window.width, height: window.height };
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!isDragging && !isResizing) return;
|
||
|
||
const handleMouseMove = (e: MouseEvent) => {
|
||
if (isDragging) {
|
||
const dx = e.clientX - dragStart.current.x;
|
||
const dy = e.clientY - dragStart.current.y;
|
||
onMove(dragStart.current.windowX + dx, Math.max(0, dragStart.current.windowY + dy));
|
||
}
|
||
if (isResizing) {
|
||
const dx = e.clientX - resizeStart.current.x;
|
||
const dy = e.clientY - resizeStart.current.y;
|
||
onResize(Math.max(300, resizeStart.current.width + dx), Math.max(200, resizeStart.current.height + dy));
|
||
}
|
||
};
|
||
|
||
const handleMouseUp = (e: MouseEvent) => {
|
||
if (isDragging) {
|
||
const newX = dragStart.current.windowX + (e.clientX - dragStart.current.x);
|
||
const newY = Math.max(0, dragStart.current.windowY + (e.clientY - dragStart.current.y));
|
||
onSnap(newX, newY);
|
||
}
|
||
setIsDragging(false);
|
||
setIsResizing(false);
|
||
};
|
||
|
||
document.addEventListener("mousemove", handleMouseMove);
|
||
document.addEventListener("mouseup", handleMouseUp);
|
||
return () => {
|
||
document.removeEventListener("mousemove", handleMouseMove);
|
||
document.removeEventListener("mouseup", handleMouseUp);
|
||
};
|
||
}, [isDragging, isResizing, onMove, onResize, onSnap]);
|
||
|
||
const style = window.maximized
|
||
? { top: 0, left: 0, width: "100%", height: "calc(100vh - 48px)", zIndex: window.zIndex }
|
||
: { top: window.y, left: window.x, width: window.width, height: window.height, zIndex: window.zIndex };
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.9 }}
|
||
transition={{ duration: 0.15 }}
|
||
className={`absolute flex flex-col overflow-hidden ${isActive ? 'ring-1 ring-cyan-400/50 shadow-lg shadow-cyan-500/20' : 'ring-1 ring-white/10'}`}
|
||
style={{ ...style, background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95))', backdropFilter: 'blur(20px)', borderRadius: window.maximized ? 0 : '8px' }}
|
||
onMouseDown={onFocus}
|
||
data-testid={`window-${window.id}`}
|
||
>
|
||
<div
|
||
className="flex items-center justify-between px-3 py-2 bg-gradient-to-r from-slate-800/80 to-slate-900/80 border-b border-white/5 cursor-move"
|
||
onMouseDown={handleDragStart}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="text-cyan-400 w-4 h-4 flex items-center justify-center">{window.icon}</div>
|
||
<span className="text-sm font-mono text-white/90">{window.title}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<button onClick={onMinimize} className="w-6 h-6 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/10 rounded transition-colors">
|
||
<Minus className="w-3 h-3" />
|
||
</button>
|
||
<button onClick={onMaximize} className="w-6 h-6 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/10 rounded transition-colors">
|
||
{window.maximized ? <Square className="w-3 h-3" /> : <Maximize2 className="w-3 h-3" />}
|
||
</button>
|
||
<button onClick={onClose} className="w-6 h-6 flex items-center justify-center text-white/60 hover:text-red-400 hover:bg-red-400/20 rounded transition-colors">
|
||
<X className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 overflow-auto">{content}</div>
|
||
{!window.maximized && (
|
||
<div className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize" onMouseDown={handleResizeStart}>
|
||
<div className="absolute bottom-1 right-1 w-2 h-2 border-r-2 border-b-2 border-cyan-400/40" />
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
interface TaskbarProps {
|
||
windows: WindowState[];
|
||
activeWindowId: string | null;
|
||
apps: DesktopApp[];
|
||
time: Date;
|
||
showStartMenu: boolean;
|
||
user: any;
|
||
isAuthenticated: boolean;
|
||
notifications: string[];
|
||
showNotifications: boolean;
|
||
onToggleStartMenu: () => void;
|
||
onToggleNotifications: () => void;
|
||
onWindowClick: (id: string) => void;
|
||
onAppClick: (app: DesktopApp) => void;
|
||
onLogout: () => void;
|
||
onNavigate: (path: string) => void;
|
||
currentDesktop: number;
|
||
onDesktopChange: (d: number) => void;
|
||
clearanceTheme: ClearanceTheme;
|
||
onSwitchClearance: () => void;
|
||
activeTrayPanel: 'wifi' | 'volume' | 'battery' | 'notifications' | 'upgrade' | null;
|
||
onTrayPanelToggle: (panel: 'wifi' | 'volume' | 'battery' | 'notifications' | 'upgrade') => void;
|
||
volume: number;
|
||
onVolumeChange: (v: number) => void;
|
||
isMuted: boolean;
|
||
onMuteToggle: () => void;
|
||
batteryInfo: { level: number; charging: boolean } | null;
|
||
onClearNotification: (index: number) => void;
|
||
onClearAllNotifications: () => void;
|
||
desktopWindowCounts: number[];
|
||
openIframeWindow?: (url: string, title: string) => void;
|
||
}
|
||
|
||
function Skeleton({ className = "", animate = true }: { className?: string; animate?: boolean }) {
|
||
return (
|
||
<div className={`bg-white/10 rounded ${animate ? 'animate-pulse' : ''} ${className}`} />
|
||
);
|
||
}
|
||
|
||
function LoadingSkeleton() {
|
||
return (
|
||
<div className="p-4 space-y-4">
|
||
<Skeleton className="h-8 w-3/4" />
|
||
<Skeleton className="h-4 w-full" />
|
||
<Skeleton className="h-4 w-5/6" />
|
||
<div className="flex gap-4 mt-6">
|
||
<Skeleton className="h-24 w-24 rounded-lg" />
|
||
<div className="flex-1 space-y-2">
|
||
<Skeleton className="h-4 w-full" />
|
||
<Skeleton className="h-4 w-4/5" />
|
||
<Skeleton className="h-4 w-3/4" />
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-4 mt-4">
|
||
<Skeleton className="h-20 rounded-lg" />
|
||
<Skeleton className="h-20 rounded-lg" />
|
||
<Skeleton className="h-20 rounded-lg" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ParticleField() {
|
||
const particles = Array.from({ length: 30 }, (_, i) => ({
|
||
id: i,
|
||
x: Math.random() * 100,
|
||
y: Math.random() * 100,
|
||
size: Math.random() * 2 + 1,
|
||
duration: Math.random() * 20 + 10,
|
||
delay: Math.random() * 5,
|
||
}));
|
||
|
||
return (
|
||
<div className="fixed inset-0 pointer-events-none overflow-hidden" style={{ zIndex: 0 }}>
|
||
{particles.map(p => (
|
||
<motion.div
|
||
key={p.id}
|
||
className="absolute rounded-full bg-cyan-400/20"
|
||
style={{ left: `${p.x}%`, top: `${p.y}%`, width: p.size, height: p.size }}
|
||
animate={{
|
||
y: [0, -30, 0],
|
||
opacity: [0.2, 0.5, 0.2],
|
||
}}
|
||
transition={{
|
||
duration: p.duration,
|
||
repeat: Infinity,
|
||
delay: p.delay,
|
||
ease: "easeInOut",
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SpotlightSearch({ query, setQuery, apps, onSelectApp, onClose, inputRef }: {
|
||
query: string;
|
||
setQuery: (q: string) => void;
|
||
apps: DesktopApp[];
|
||
onSelectApp: (app: DesktopApp) => void;
|
||
onClose: () => void;
|
||
inputRef: React.RefObject<HTMLInputElement | null>;
|
||
}) {
|
||
const filtered = apps.filter(a => a.title.toLowerCase().includes(query.toLowerCase()));
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||
className="fixed inset-0 flex items-start justify-center pt-[20vh] z-[99999]"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="w-[500px] bg-slate-900/95 backdrop-blur-2xl border border-white/20 rounded-2xl shadow-2xl overflow-hidden"
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div className="p-4 border-b border-white/10 flex items-center gap-3">
|
||
<Globe className="w-5 h-5 text-cyan-400" />
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={query}
|
||
onChange={e => setQuery(e.target.value)}
|
||
placeholder="Search apps... (Ctrl+Space)"
|
||
className="flex-1 bg-transparent text-white text-lg outline-none placeholder:text-white/30"
|
||
autoFocus
|
||
/>
|
||
<kbd className="px-2 py-1 text-xs text-white/40 bg-white/5 rounded">ESC</kbd>
|
||
</div>
|
||
<div className="max-h-[300px] overflow-y-auto">
|
||
{filtered.length === 0 ? (
|
||
<div className="p-4 text-center text-white/40">No apps found</div>
|
||
) : (
|
||
filtered.map(app => (
|
||
<button
|
||
key={app.id}
|
||
onClick={() => onSelectApp(app)}
|
||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 transition-colors text-left"
|
||
>
|
||
<div className="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center text-cyan-400">
|
||
{app.icon}
|
||
</div>
|
||
<span className="text-white font-mono">{app.title}</span>
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
<div className="p-2 border-t border-white/10 text-xs text-white/30 text-center">
|
||
Ctrl+T Terminal • Ctrl+N Notes • Ctrl+E Code • Ctrl+P Passport
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
function ToastContainer({ toasts }: { toasts: Toast[] }) {
|
||
const colors = {
|
||
info: 'border-cyan-500/50 bg-cyan-500/10',
|
||
success: 'border-green-500/50 bg-green-500/10',
|
||
warning: 'border-yellow-500/50 bg-yellow-500/10',
|
||
error: 'border-red-500/50 bg-red-500/10',
|
||
};
|
||
|
||
return (
|
||
<div className="fixed top-4 right-4 z-[99999] space-y-2" style={{ pointerEvents: 'none' }}>
|
||
<AnimatePresence>
|
||
{toasts.map(toast => (
|
||
<motion.div
|
||
key={toast.id}
|
||
initial={{ opacity: 0, x: 100, scale: 0.9 }}
|
||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||
exit={{ opacity: 0, x: 100, scale: 0.9 }}
|
||
className={`px-4 py-3 rounded-lg border backdrop-blur-xl ${colors[toast.type]}`}
|
||
style={{ pointerEvents: 'auto' }}
|
||
>
|
||
<span className="text-white text-sm font-mono">{toast.message}</span>
|
||
</motion.div>
|
||
))}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OnboardingTour({ step, onNext, onClose }: { step: number; onNext: () => void; onClose: () => void }) {
|
||
const steps = [
|
||
{ title: 'Welcome to AeThex OS', content: 'Your operating system for the Metaverse. Double-click icons to open apps.' },
|
||
{ title: 'Desktop Navigation', content: 'Use Ctrl+Space to open Spotlight search. Press Ctrl+1-4 to switch desktops.' },
|
||
{ title: 'Keyboard Shortcuts', content: 'Ctrl+T for Terminal, Ctrl+N for Notes, Ctrl+E for Code Editor.' },
|
||
{ title: 'Discover Secrets', content: 'Try the Konami code or explore Terminal commands. There are hidden surprises!' },
|
||
];
|
||
|
||
if (step >= steps.length) {
|
||
onClose();
|
||
return null;
|
||
}
|
||
|
||
const current = steps[step];
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 bg-black/60 flex items-center justify-center z-[99999]"
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.9, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
className="w-[400px] bg-slate-900 border border-cyan-500/30 rounded-xl p-6 shadow-2xl"
|
||
>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||
<Zap className="w-5 h-5 text-white" />
|
||
</div>
|
||
<h3 className="text-lg font-display text-white uppercase tracking-wider">{current.title}</h3>
|
||
</div>
|
||
<p className="text-white/70 text-sm mb-6">{current.content}</p>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex gap-1">
|
||
{steps.map((_, i) => (
|
||
<div key={i} className={`w-2 h-2 rounded-full ${i === step ? 'bg-cyan-400' : 'bg-white/20'}`} />
|
||
))}
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={onClose} className="px-4 py-2 text-white/60 hover:text-white transition-colors text-sm">
|
||
Skip
|
||
</button>
|
||
<button onClick={onNext} className="px-4 py-2 bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition-colors text-sm">
|
||
{step === steps.length - 1 ? 'Get Started' : 'Next'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
function Taskbar({ windows, activeWindowId, apps, time, showStartMenu, user, isAuthenticated, notifications, showNotifications, onToggleStartMenu, onToggleNotifications, onWindowClick, onAppClick, onLogout, onNavigate, currentDesktop, onDesktopChange, clearanceTheme, onSwitchClearance, activeTrayPanel, onTrayPanelToggle, volume, onVolumeChange, isMuted, onMuteToggle, batteryInfo, onClearNotification, onClearAllNotifications, desktopWindowCounts, openIframeWindow }: TaskbarProps) {
|
||
return (
|
||
<>
|
||
<AnimatePresence>
|
||
{showStartMenu && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 20 }}
|
||
className="absolute bottom-12 left-2 w-72 backdrop-blur-xl rounded-lg overflow-hidden shadow-2xl transition-all duration-300"
|
||
style={{
|
||
zIndex: 9999,
|
||
background: clearanceTheme.id === 'foundation' ? 'rgba(26, 5, 5, 0.95)' : 'rgba(15, 23, 42, 0.95)',
|
||
border: `1px solid ${clearanceTheme.id === 'foundation' ? 'rgba(212, 175, 55, 0.3)' : 'rgba(192, 192, 192, 0.2)'}`
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3" style={{ borderBottom: `1px solid ${clearanceTheme.id === 'foundation' ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255,255,255,0.1)'}` }}>
|
||
<div className="flex items-center gap-3">
|
||
<div
|
||
className="w-10 h-10 rounded-lg flex items-center justify-center"
|
||
style={{ background: `linear-gradient(135deg, ${clearanceTheme.accent}, ${clearanceTheme.accentSecondary})` }}
|
||
>
|
||
{isAuthenticated ? <User className="w-5 h-5 text-white" /> : <span className="text-white font-bold text-lg">A</span>}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className={`text-white text-sm ${clearanceTheme.fontStyle}`}>{isAuthenticated ? user?.username : 'Guest'}</div>
|
||
<div className="text-xs" style={{ color: clearanceTheme.accentSecondary }}>
|
||
{clearanceTheme.title}
|
||
</div>
|
||
</div>
|
||
{isAuthenticated && (
|
||
<button onClick={onLogout} className="p-2 text-white/50 hover:text-red-400 transition-colors">
|
||
<LogOut className="w-4 h-4" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-2 max-h-64 overflow-y-auto">
|
||
{apps.map(app => (
|
||
<button
|
||
key={app.id}
|
||
onClick={() => onAppClick(app)}
|
||
className={`w-full flex items-center gap-3 px-3 py-2 text-white/80 hover:text-white rounded-lg transition-colors ${clearanceTheme.fontStyle}`}
|
||
style={{ '--hover-bg': `${clearanceTheme.accent}20` } as any}
|
||
onMouseEnter={(e) => e.currentTarget.style.background = `${clearanceTheme.accent}20`}
|
||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||
data-testid={`start-menu-${app.id}`}
|
||
>
|
||
<div className="w-5 h-5" style={{ color: clearanceTheme.accent }}>{app.icon}</div>
|
||
<span className="text-sm">{app.title}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{isAuthenticated && user?.isAdmin && (
|
||
<div className="p-2 border-t border-white/10">
|
||
<div className="text-xs text-white/30 uppercase tracking-wider px-3 py-1">Admin</div>
|
||
<button onClick={() => onNavigate('/admin')} className="w-full flex items-center gap-3 px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
|
||
<BarChart3 className="w-5 h-5 text-cyan-400" />
|
||
<span className="text-sm font-mono">Command Center</span>
|
||
<ExternalLink className="w-3 h-3 ml-auto text-white/30" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="p-2 border-t border-white/10">
|
||
<button
|
||
onClick={onSwitchClearance}
|
||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all group"
|
||
style={{
|
||
background: `linear-gradient(135deg, ${clearanceTheme.id === 'foundation' ? '#3B82F6' : '#DC2626'}20, ${clearanceTheme.id === 'foundation' ? '#C0C0C0' : '#D4AF37'}10)`,
|
||
border: `1px solid ${clearanceTheme.id === 'foundation' ? '#3B82F640' : '#D4AF3740'}`
|
||
}}
|
||
data-testid="switch-clearance-btn"
|
||
>
|
||
<div className="relative">
|
||
<Shield className="w-5 h-5" style={{ color: clearanceTheme.id === 'foundation' ? '#3B82F6' : '#D4AF37' }} />
|
||
<div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full animate-pulse" style={{ background: clearanceTheme.id === 'foundation' ? '#3B82F6' : '#DC2626' }} />
|
||
</div>
|
||
<div className="flex-1 text-left">
|
||
<div className="text-xs uppercase tracking-wider font-bold" style={{ color: clearanceTheme.id === 'foundation' ? '#3B82F6' : '#D4AF37' }}>
|
||
Switch Clearance
|
||
</div>
|
||
<div className="text-[10px] text-white/40">
|
||
{clearanceTheme.id === 'foundation' ? 'Enter Corp Mode' : 'Enter Foundation Mode'}
|
||
</div>
|
||
</div>
|
||
<ChevronRight className="w-4 h-4 text-white/30 group-hover:translate-x-0.5 transition-transform" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-2 border-t border-white/10">
|
||
<div className="flex items-center justify-center gap-4">
|
||
<a
|
||
href="https://twitter.com/aethex_hq"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 text-white/50 hover:text-cyan-400 transition-colors"
|
||
data-testid="social-twitter"
|
||
>
|
||
<Globe className="w-4 h-4" />
|
||
</a>
|
||
<a
|
||
href="https://discord.gg/aethex"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 text-white/50 hover:text-purple-400 transition-colors"
|
||
data-testid="social-discord"
|
||
>
|
||
<MessageCircle className="w-4 h-4" />
|
||
</a>
|
||
<a
|
||
href="https://github.com/aethex"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 text-white/50 hover:text-white transition-colors"
|
||
data-testid="social-github"
|
||
>
|
||
<Code2 className="w-4 h-4" />
|
||
</a>
|
||
</div>
|
||
<div className="text-center text-[10px] text-white/30 mt-1">
|
||
AeThex OS v1.0.0
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div
|
||
className="h-12 backdrop-blur-xl border-t flex items-center px-2 gap-2 transition-all duration-500"
|
||
style={{
|
||
background: clearanceTheme.id === 'foundation' ? 'rgba(26, 5, 5, 0.9)' : 'rgba(15, 23, 42, 0.9)',
|
||
borderColor: clearanceTheme.id === 'foundation' ? 'rgba(212, 175, 55, 0.2)' : 'rgba(192, 192, 192, 0.2)'
|
||
}}
|
||
>
|
||
<button
|
||
onClick={onToggleStartMenu}
|
||
className={`h-9 px-4 flex items-center gap-2 rounded-lg transition-colors`}
|
||
style={{
|
||
background: showStartMenu ? `${clearanceTheme.accent}30` : 'transparent',
|
||
color: showStartMenu ? clearanceTheme.accent : 'rgba(255,255,255,0.8)'
|
||
}}
|
||
data-testid="start-button"
|
||
>
|
||
<div
|
||
className="w-5 h-5 rounded flex items-center justify-center"
|
||
style={{ background: `linear-gradient(135deg, ${clearanceTheme.accent}, ${clearanceTheme.accentSecondary})` }}
|
||
>
|
||
<ChevronUp className="w-3 h-3 text-white" />
|
||
</div>
|
||
<span className={`text-sm hidden sm:inline ${clearanceTheme.fontStyle}`}>
|
||
{clearanceTheme.id === 'foundation' ? 'Foundation' : 'Corp'}
|
||
</span>
|
||
</button>
|
||
|
||
<div className="w-px h-6 bg-white/10" />
|
||
|
||
<div className="flex items-center gap-1 px-1">
|
||
{PINNED_APPS.map(appId => {
|
||
const app = apps.find(a => a.id === appId);
|
||
if (!app) return null;
|
||
const isOpen = windows.some(w => w.id === appId);
|
||
return (
|
||
<motion.button
|
||
key={appId}
|
||
onClick={() => onAppClick(app)}
|
||
whileHover={{ scale: 1.1, y: -2 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
className="w-7 h-7 rounded-md flex items-center justify-center relative transition-colors"
|
||
style={{
|
||
background: isOpen ? `${clearanceTheme.accent}20` : 'rgba(255,255,255,0.05)',
|
||
border: isOpen ? `1px solid ${clearanceTheme.accent}40` : '1px solid transparent'
|
||
}}
|
||
data-testid={`dock-${appId}`}
|
||
>
|
||
<div
|
||
className="w-4 h-4 flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4"
|
||
style={{ color: isOpen ? clearanceTheme.accent : 'rgba(255,255,255,0.7)' }}
|
||
>
|
||
{app.icon}
|
||
</div>
|
||
{isOpen && (
|
||
<div
|
||
className="absolute -bottom-1 w-1 h-1 rounded-full"
|
||
style={{ background: clearanceTheme.accent }}
|
||
/>
|
||
)}
|
||
</motion.button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="w-px h-6 bg-white/10" />
|
||
|
||
<div className="flex-1 flex items-center gap-1 overflow-x-auto">
|
||
{windows.map(window => (
|
||
<motion.button
|
||
key={window.id}
|
||
onClick={() => onWindowClick(window.id)}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors relative ${
|
||
activeWindowId === window.id && !window.minimized
|
||
? 'bg-cyan-500/20'
|
||
: window.minimized ? 'bg-white/5 hover:bg-white/10' : 'bg-white/10 hover:bg-white/15'
|
||
}`}
|
||
title={window.title}
|
||
data-testid={`taskbar-${window.id}`}
|
||
>
|
||
<div
|
||
className="w-4 h-4 flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4"
|
||
style={{ color: activeWindowId === window.id && !window.minimized ? '#06b6d4' : window.minimized ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.7)' }}
|
||
>
|
||
{window.icon}
|
||
</div>
|
||
{!window.minimized && (
|
||
<div className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-3 h-0.5 rounded-full bg-cyan-400" />
|
||
)}
|
||
</motion.button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1 mr-2">
|
||
{[0, 1, 2, 3].map(d => (
|
||
<button
|
||
key={d}
|
||
onClick={() => onDesktopChange(d)}
|
||
className={`relative w-7 h-5 rounded text-[10px] font-mono transition-all ${
|
||
currentDesktop === d
|
||
? 'bg-cyan-500 text-white scale-110'
|
||
: 'bg-white/10 text-white/40 hover:bg-white/20'
|
||
}`}
|
||
title={`Desktop ${d + 1}${(desktopWindowCounts?.[d] || 0) > 0 ? ` (${desktopWindowCounts[d]} windows)` : ''}`}
|
||
>
|
||
{d + 1}
|
||
{(desktopWindowCounts?.[d] || 0) > 0 && currentDesktop !== d && (
|
||
<div className="absolute -top-1 -right-1 w-2 h-2 bg-cyan-400 rounded-full" />
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1 text-white/60 relative">
|
||
<button
|
||
onClick={() => onTrayPanelToggle('upgrade')}
|
||
className={`p-1.5 rounded transition-colors relative ${activeTrayPanel === 'upgrade' ? 'bg-yellow-500/30 text-yellow-400' : 'hover:bg-yellow-500/20 text-yellow-400'}`}
|
||
data-testid="tray-upgrade"
|
||
>
|
||
<motion.div
|
||
animate={{ scale: [1, 1.2, 1] }}
|
||
transition={{ repeat: Infinity, duration: 2 }}
|
||
>
|
||
<Zap className="w-4 h-4" />
|
||
</motion.div>
|
||
<div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full animate-ping" />
|
||
</button>
|
||
<button
|
||
onClick={() => onTrayPanelToggle('notifications')}
|
||
className={`p-1.5 rounded transition-colors relative ${activeTrayPanel === 'notifications' ? 'bg-white/20 text-white' : 'hover:bg-white/10'}`}
|
||
>
|
||
<Bell className="w-4 h-4" />
|
||
{notifications.length > 0 && (
|
||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full text-[8px] text-white flex items-center justify-center">
|
||
{notifications.length}
|
||
</div>
|
||
)}
|
||
</button>
|
||
<button
|
||
onClick={() => onTrayPanelToggle('wifi')}
|
||
className={`p-1.5 rounded transition-colors ${activeTrayPanel === 'wifi' ? 'bg-white/20 text-white' : 'hover:bg-white/10'}`}
|
||
>
|
||
<Wifi className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => onTrayPanelToggle('volume')}
|
||
className={`p-1.5 rounded transition-colors ${activeTrayPanel === 'volume' ? 'bg-white/20 text-white' : 'hover:bg-white/10'}`}
|
||
>
|
||
{isMuted ? <Volume2 className="w-4 h-4 text-red-400" /> : <Volume2 className="w-4 h-4" />}
|
||
</button>
|
||
<button
|
||
onClick={() => onTrayPanelToggle('battery')}
|
||
className={`p-1.5 rounded transition-colors ${activeTrayPanel === 'battery' ? 'bg-white/20 text-white' : 'hover:bg-white/10'}`}
|
||
>
|
||
<Battery className={`w-4 h-4 ${batteryInfo?.charging ? 'text-green-400' : batteryInfo && batteryInfo.level < 20 ? 'text-red-400' : ''}`} />
|
||
</button>
|
||
<div className="text-xs font-mono px-2">
|
||
{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||
</div>
|
||
|
||
<AnimatePresence>
|
||
{activeTrayPanel === 'notifications' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 10 }}
|
||
className="absolute bottom-10 right-0 w-72 bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg shadow-2xl overflow-hidden"
|
||
style={{ zIndex: 9999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3 border-b border-cyan-500/20 flex items-center justify-between">
|
||
<span className="text-white text-sm font-mono">Notifications</span>
|
||
{notifications.length > 0 && (
|
||
<button onClick={onClearAllNotifications} className="text-xs text-cyan-400 hover:text-cyan-300">
|
||
Clear all
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="max-h-64 overflow-y-auto">
|
||
{notifications.length === 0 ? (
|
||
<div className="p-4 text-center text-white/50 text-sm">No notifications</div>
|
||
) : (
|
||
notifications.map((notif, idx) => (
|
||
<div key={idx} className="p-3 border-b border-white/5 hover:bg-white/5 flex items-start gap-3">
|
||
<Bell className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
|
||
<p className="text-white/80 text-sm flex-1">{notif}</p>
|
||
<button onClick={() => onClearNotification(idx)} className="text-white/30 hover:text-white/60">
|
||
<X className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activeTrayPanel === 'wifi' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 10 }}
|
||
className="absolute bottom-10 right-0 w-64 bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg shadow-2xl overflow-hidden"
|
||
style={{ zIndex: 9999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3 border-b border-cyan-500/20">
|
||
<span className="text-white text-sm font-mono">Network Status</span>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
||
<Wifi className="w-5 h-5 text-cyan-400" />
|
||
</div>
|
||
<div>
|
||
<div className="text-white text-sm font-medium">AeThex Network</div>
|
||
<div className="text-cyan-400 text-xs">Connected</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2 text-xs">
|
||
<div className="flex justify-between text-white/60">
|
||
<span>Signal Strength</span>
|
||
<span className="text-cyan-400">Excellent</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/60">
|
||
<span>Protocol</span>
|
||
<span className="text-white">AEGIS-256</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/60">
|
||
<span>Latency</span>
|
||
<span className="text-green-400">2ms</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/60">
|
||
<span>Node</span>
|
||
<span className="text-white">AXIOM-CORE-01</span>
|
||
</div>
|
||
</div>
|
||
<div className="pt-2 border-t border-white/10">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||
<span className="text-green-400 text-xs">Secure Connection Active</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activeTrayPanel === 'volume' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 10 }}
|
||
className="absolute bottom-10 right-0 w-56 bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg shadow-2xl overflow-hidden"
|
||
style={{ zIndex: 9999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3 border-b border-cyan-500/20">
|
||
<span className="text-white text-sm font-mono">Sound</span>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={onMuteToggle}
|
||
className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${isMuted ? 'bg-red-500/20' : 'bg-cyan-500/20'}`}
|
||
>
|
||
<Volume2 className={`w-5 h-5 ${isMuted ? 'text-red-400' : 'text-cyan-400'}`} />
|
||
</button>
|
||
<div className="flex-1">
|
||
<div className="text-white text-sm font-medium">{isMuted ? 'Muted' : 'Volume'}</div>
|
||
<div className="text-white/50 text-xs">{isMuted ? 'Click to unmute' : `${volume}%`}</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="100"
|
||
value={volume}
|
||
onChange={(e) => onVolumeChange(parseInt(e.target.value))}
|
||
className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-cyan-500"
|
||
style={{ accentColor: '#06b6d4' }}
|
||
/>
|
||
<div className="flex justify-between text-[10px] text-white/40">
|
||
<span>0</span>
|
||
<span>50</span>
|
||
<span>100</span>
|
||
</div>
|
||
</div>
|
||
<div className="pt-2 border-t border-white/10 text-xs text-white/50">
|
||
<div className="flex items-center justify-between">
|
||
<span>OS Sounds</span>
|
||
<span className={isMuted ? 'text-red-400' : 'text-cyan-400'}>{isMuted ? 'OFF' : 'ON'}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activeTrayPanel === 'battery' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 10 }}
|
||
className="absolute bottom-10 right-0 w-56 bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg shadow-2xl overflow-hidden"
|
||
style={{ zIndex: 9999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3 border-b border-cyan-500/20">
|
||
<span className="text-white text-sm font-mono">Power</span>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${batteryInfo?.charging ? 'bg-green-500/20' : 'bg-cyan-500/20'}`}>
|
||
<Battery className={`w-5 h-5 ${batteryInfo?.charging ? 'text-green-400' : 'text-cyan-400'}`} />
|
||
</div>
|
||
<div>
|
||
<div className="text-white text-sm font-medium">
|
||
{batteryInfo ? `${batteryInfo.level}%` : 'Unknown'}
|
||
</div>
|
||
<div className={`text-xs ${batteryInfo?.charging ? 'text-green-400' : 'text-white/50'}`}>
|
||
{batteryInfo?.charging ? 'Charging' : 'On Battery'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{batteryInfo && (
|
||
<div className="space-y-2">
|
||
<div className="h-3 bg-white/10 rounded-full overflow-hidden">
|
||
<div
|
||
className={`h-full rounded-full transition-all ${
|
||
batteryInfo.level > 50 ? 'bg-green-500' :
|
||
batteryInfo.level > 20 ? 'bg-yellow-500' : 'bg-red-500'
|
||
}`}
|
||
style={{ width: `${batteryInfo.level}%` }}
|
||
/>
|
||
</div>
|
||
<div className="flex justify-between text-[10px] text-white/40">
|
||
<span>0%</span>
|
||
<span>50%</span>
|
||
<span>100%</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{!batteryInfo && (
|
||
<div className="text-center text-white/50 text-sm py-2">
|
||
Battery API not available
|
||
</div>
|
||
)}
|
||
<div className="pt-2 border-t border-white/10 space-y-1 text-xs">
|
||
<div className="flex items-center justify-between text-white/60">
|
||
<span>Power Mode</span>
|
||
<span className="text-cyan-400">Balanced</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-white/60">
|
||
<span>Status</span>
|
||
<span className="text-green-400">Optimal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activeTrayPanel === 'upgrade' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 10 }}
|
||
className="absolute bottom-10 right-0 w-72 bg-slate-900/95 backdrop-blur-xl border border-yellow-500/50 rounded-lg shadow-2xl overflow-hidden"
|
||
style={{ zIndex: 9999 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="p-3 border-b border-yellow-500/30 bg-yellow-500/10">
|
||
<div className="flex items-center gap-2">
|
||
<AlertTriangle className="w-4 h-4 text-yellow-400" />
|
||
<span className="text-yellow-400 text-sm font-mono uppercase">System Alert</span>
|
||
</div>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 mx-auto rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center mb-3">
|
||
<Zap className="w-8 h-8 text-yellow-400" />
|
||
</div>
|
||
<div className="text-white font-bold mb-1">Architect Access Available</div>
|
||
<div className="text-white/60 text-sm">
|
||
Upgrade your permissions to access the Source Code.
|
||
</div>
|
||
</div>
|
||
<div className="border border-yellow-500/20 bg-yellow-500/5 rounded p-3 text-xs space-y-1">
|
||
<div className="flex items-center gap-2 text-white/70">
|
||
<Shield className="w-3 h-3 text-yellow-400" /> Full system access
|
||
</div>
|
||
<div className="flex items-center gap-2 text-white/70">
|
||
<Network className="w-3 h-3 text-yellow-400" /> Network directory slot
|
||
</div>
|
||
<div className="flex items-center gap-2 text-white/70">
|
||
<Globe className="w-3 h-3 text-yellow-400" /> .aethex namespace
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={async () => {
|
||
try {
|
||
await dataService.trackEvent('upgrade-click', {
|
||
source: 'tray-upgrade',
|
||
timestamp: new Date().toISOString()
|
||
});
|
||
} catch {}
|
||
try {
|
||
const resp = await fetch('/api/payments/create-checkout-session', { method: 'POST' });
|
||
if (resp.ok) {
|
||
const data = await resp.json();
|
||
if (data?.url) {
|
||
openIframeWindow?.(data.url, 'Architect Access');
|
||
return;
|
||
}
|
||
}
|
||
} catch {}
|
||
openIframeWindow?.('https://aethex.studio', 'The Foundry');
|
||
}}
|
||
className="block w-full text-center px-4 py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-bold uppercase tracking-wider transition-colors text-sm"
|
||
>
|
||
Upgrade Now — $500
|
||
</button>
|
||
<div className="text-center text-xs text-white/40">
|
||
Hint: Check the terminal for promo codes
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function TerminalApp() {
|
||
const ASCII_BANNER = [
|
||
" _ _____ _____ _ _ _______ __",
|
||
" / \\ | ____|_ _| | | | ____\\ \\/ /",
|
||
" / _ \\ | _| | | | |_| | _| \\ / ",
|
||
" / ___ \\| |___ | | | _ | |___ / \\ ",
|
||
"/_/ \\_\\_____| |_| |_| |_|_____/_/\\_\\",
|
||
"",
|
||
];
|
||
const [history, setHistory] = useState<string[]>([...ASCII_BANNER, "AeThex Terminal v3.0.0 - Secure Shell", "Type 'help' for available commands.", ""]);
|
||
const [input, setInput] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [commandHistory, setCommandHistory] = useState<string[]>([]);
|
||
const [historyIndex, setHistoryIndex] = useState(-1);
|
||
const terminalRef = useRef<HTMLDivElement>(null);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (terminalRef.current) {
|
||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||
}
|
||
}, [history]);
|
||
|
||
const delay = (ms: number) => new Promise(r => setTimeout(r, ms));
|
||
|
||
const typeEffect = async (lines: string[], setFn: React.Dispatch<React.SetStateAction<string[]>>) => {
|
||
for (const line of lines) {
|
||
setFn(prev => [...prev, line]);
|
||
await delay(50);
|
||
}
|
||
};
|
||
|
||
const progressBar = async (label: string, steps = 10) => {
|
||
for (let i = 0; i <= steps; i++) {
|
||
const pct = Math.round((i / steps) * 100);
|
||
const bar = '█'.repeat(i) + '░'.repeat(steps - i);
|
||
setHistory(prev => {
|
||
const newHist = [...prev];
|
||
if (newHist.length > 0 && newHist[newHist.length - 1].startsWith(label)) {
|
||
newHist[newHist.length - 1] = `${label} [${bar}] ${pct}%`;
|
||
} else {
|
||
newHist.push(`${label} [${bar}] ${pct}%`);
|
||
}
|
||
return newHist;
|
||
});
|
||
await delay(100);
|
||
}
|
||
};
|
||
|
||
const runCommand = async (cmd: string): Promise<void> => {
|
||
const args = cmd.split(' ');
|
||
const baseCmd = args[0];
|
||
|
||
switch (baseCmd) {
|
||
case 'help':
|
||
await typeEffect([
|
||
"╔═══════════════════════════════════════════╗",
|
||
"║ AETHEX TERMINAL COMMANDS ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ status - System status from server ║",
|
||
"║ architects - List architects in network ║",
|
||
"║ projects - List active projects ║",
|
||
"║ scan - Scan network for nodes ║",
|
||
"║ ping - Check network status ║",
|
||
"║ whois - Look up architect profile ║",
|
||
"║ passport - View passport status ║",
|
||
"║ tour - AeThex guided tour ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ 🛡️ AEGIS SECURITY COMMANDS ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ aegis - Aegis security dashboard ║",
|
||
"║ threat - Check current threat level ║",
|
||
"║ firewall - View firewall status ║",
|
||
"║ shield - Activate/check shield ║",
|
||
"║ trace - Trace network connection ║",
|
||
"║ encrypt - Encrypt a message ║",
|
||
"║ decrypt - Decrypt secure message ║",
|
||
"║ analyze - Run security analysis ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ 🎮 FUN COMMANDS ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ hack - ??? (try it) ║",
|
||
"║ fortune - Random architect wisdom ║",
|
||
"║ matrix - Enter the matrix ║",
|
||
"║ dice - Roll two dice ║",
|
||
"║ cowsay - Make a cow say something ║",
|
||
"║ joke - Tell a programmer joke ║",
|
||
"║ coffee - Brew some coffee ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ whoami - Current user info ║",
|
||
"║ neofetch - System information ║",
|
||
"║ weather - Metaverse weather report ║",
|
||
"║ uptime - System uptime ║",
|
||
"║ banner - Show AeThex banner ║",
|
||
"║ clear - Clear terminal ║",
|
||
"╚═══════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'status':
|
||
try {
|
||
setHistory(prev => [...prev, "Fetching system status..."]);
|
||
await delay(300);
|
||
const data = await dataService.fetchMetrics();
|
||
await typeEffect([
|
||
"┌─────────────────────────────────┐",
|
||
"│ SYSTEM STATUS │",
|
||
"├─────────────────────────────────┤",
|
||
`│ Architects: ${String(data.totalProfiles || 0).padEnd(18)}│`,
|
||
`│ Projects: ${String(data.totalProjects || 0).padEnd(18)}│`,
|
||
`│ Online: ${String(data.onlineUsers || 0).padEnd(18)}│`,
|
||
`│ Verified: ${String(data.verifiedUsers || 0).padEnd(18)}│`,
|
||
`│ Total XP: ${String(data.totalXP || 0).padEnd(18)}│`,
|
||
"└─────────────────────────────────┘",
|
||
""
|
||
], setHistory);
|
||
} catch {
|
||
setHistory(prev => [...prev, "ERROR: Failed to fetch status", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'architects':
|
||
try {
|
||
setHistory(prev => [...prev, "Querying architect database..."]);
|
||
await delay(400);
|
||
const data = await dataService.fetchAllProfiles();
|
||
if (!data.length) {
|
||
setHistory(prev => [...prev, "No architects found in network.", ""]);
|
||
return;
|
||
}
|
||
const lines = ["", "ARCHITECTS IN NETWORK:", "─".repeat(40)];
|
||
data.forEach((a: any) => {
|
||
const status = a.verified ? '\x1b[32m●\x1b[0m' : '\x1b[33m○\x1b[0m';
|
||
lines.push(` ${a.username || 'Unknown'} │ Lv.${a.level} │ ${a.xp} XP ${a.verified ? '[VERIFIED]' : ''}`);
|
||
});
|
||
lines.push("─".repeat(40), "");
|
||
await typeEffect(lines, setHistory);
|
||
} catch {
|
||
setHistory(prev => [...prev, "ERROR: Database connection failed", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'projects':
|
||
try {
|
||
setHistory(prev => [...prev, "Loading project registry..."]);
|
||
await delay(300);
|
||
const data = await dataService.fetchProjects();
|
||
if (!data.length) {
|
||
setHistory(prev => [...prev, "No projects found.", ""]);
|
||
return;
|
||
}
|
||
const lines = ["", "ACTIVE PROJECTS:", "─".repeat(50)];
|
||
data.forEach((p: any) => {
|
||
const statusColor = p.status === 'active' ? '[ACTIVE]' : `[${(p.status || 'unknown').toUpperCase()}]`;
|
||
lines.push(` ► ${p.title} ${statusColor}${p.engine ? ` - ${p.engine}` : ''}`);
|
||
});
|
||
lines.push("─".repeat(50), "");
|
||
await typeEffect(lines, setHistory);
|
||
} catch {
|
||
setHistory(prev => [...prev, "ERROR: Registry unavailable", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'scan':
|
||
setHistory(prev => [...prev, "Initiating network scan..."]);
|
||
await delay(200);
|
||
await progressBar("SCANNING", 15);
|
||
await delay(300);
|
||
const nodes = Math.floor(Math.random() * 20) + 10;
|
||
await typeEffect([
|
||
"",
|
||
`Scan complete. ${nodes} nodes discovered.`,
|
||
"",
|
||
" NODE-001 ─── AEGIS-CORE ─── [SECURE]",
|
||
" NODE-002 ─── CODEX-AUTH ─── [SECURE]",
|
||
" NODE-003 ─── AXIOM-DB ───── [SECURE]",
|
||
` ... ${nodes - 3} additional nodes`,
|
||
"",
|
||
"All systems operational. No threats detected.",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'analyze':
|
||
setHistory(prev => [...prev, "Running security analysis..."]);
|
||
await progressBar("ANALYZING", 20);
|
||
await delay(200);
|
||
await typeEffect([
|
||
"",
|
||
"╔═══════════════════════════════════════╗",
|
||
"║ SECURITY ANALYSIS REPORT ║",
|
||
"╠═══════════════════════════════════════╣",
|
||
"║ Firewall Status: ██████████ 100% ║",
|
||
"║ Encryption Level: ██████████ AES ║",
|
||
"║ Intrusion Attempts: 0 BLOCKED ║",
|
||
"║ AEGIS Shield: ACTIVE ║",
|
||
"╚═══════════════════════════════════════╝",
|
||
"",
|
||
"System integrity: VERIFIED",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'decrypt':
|
||
setHistory(prev => [...prev, "Decrypting secure message..."]);
|
||
await progressBar("DECRYPTING", 12);
|
||
await delay(500);
|
||
const messages = [
|
||
"The future belongs to those who build it.",
|
||
"In the Metaverse, architects are gods.",
|
||
"AEGIS protects. CODEX certifies. AXIOM guides.",
|
||
"Welcome to the new reality, Architect.",
|
||
];
|
||
const msg = messages[Math.floor(Math.random() * messages.length)];
|
||
await typeEffect([
|
||
"",
|
||
"MESSAGE DECRYPTED:",
|
||
`"${msg}"`,
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'hack':
|
||
setHistory(prev => [...prev, "Initiating hack sequence..."]);
|
||
await delay(300);
|
||
const hackLines = [];
|
||
for (let i = 0; i < 8; i++) {
|
||
let line = "";
|
||
for (let j = 0; j < 40; j++) {
|
||
line += String.fromCharCode(Math.floor(Math.random() * 26) + 65);
|
||
}
|
||
hackLines.push(line);
|
||
}
|
||
await typeEffect(hackLines, setHistory);
|
||
await delay(500);
|
||
await typeEffect([
|
||
"",
|
||
"ACCESS DENIED",
|
||
"",
|
||
"Nice try, but AEGIS is watching.",
|
||
"This incident has been logged. 👁️",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'fortune':
|
||
const fortunes = [
|
||
"A great architect once said: 'First, solve the problem. Then, write the code.'",
|
||
"The Metaverse remembers those who build with purpose.",
|
||
"Your next commit will be legendary.",
|
||
"Trust in AEGIS, for it watches over all.",
|
||
"Level up, Architect. The network awaits your greatness.",
|
||
"In the digital realm, creativity is the ultimate currency.",
|
||
];
|
||
setHistory(prev => [...prev, "", `🔮 ${fortunes[Math.floor(Math.random() * fortunes.length)]}`, ""]);
|
||
break;
|
||
|
||
case 'whoami':
|
||
await typeEffect([
|
||
"",
|
||
"╭──────────────────────────────────╮",
|
||
"│ USER: architect@aethex-os │",
|
||
"│ ROLE: Metaverse Architect │",
|
||
"│ CLEARANCE: LEVEL-7 │",
|
||
"│ STATUS: ACTIVE │",
|
||
"╰──────────────────────────────────╯",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'neofetch':
|
||
await typeEffect([
|
||
"",
|
||
" ▄▄▄ .▄▄ · ▄▄▄▄▄▄ .▄▄▄▄ ▄▄▄ .▐▄• ▄ ",
|
||
" ▐█ ▀█ ▐█ ▀. •██ █▌·▐█ ▀█ █▌•█▌ █▌█▌▪",
|
||
" ▄█▀▀█ ▄▀▀▀█▄ ▐█. ▐▀▀▀ ██▀ ▐█ ▐█▌ ·██· ",
|
||
" ██ ▪▄▌ ▐█▄▪▐█ ▐█▌·▐█▄▄▌██ ██▪▪▐█·█▌ ",
|
||
" ▀▀▀▀ ▀▀▀▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀▀ ▀▀▀ · ",
|
||
"───────────────────────────────────────────────",
|
||
" OS: AeThex OS v3.0.0",
|
||
" Kernel: AEGIS-CORE 2025.12",
|
||
" Shell: aethex-terminal",
|
||
" CPU: Quantum Neural Net @ ∞GHz",
|
||
" Memory: ∞ PB / ∞ PB",
|
||
" Uptime: Always",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'matrix':
|
||
await typeEffect([
|
||
"",
|
||
"Wake up, Architect...",
|
||
"",
|
||
"The Matrix has you...",
|
||
""
|
||
], setHistory);
|
||
await delay(1000);
|
||
setHistory(prev => [...prev, "Follow the white rabbit.", "", "🐇", ""]);
|
||
break;
|
||
|
||
case 'tour':
|
||
await typeEffect([
|
||
"",
|
||
"════════════════════════════════════════════",
|
||
" WELCOME TO AETHEX ECOSYSTEM ",
|
||
"════════════════════════════════════════════",
|
||
"",
|
||
"► AXIOM - The foundational layer",
|
||
" Core principles and values that guide",
|
||
" everything we build in the Metaverse.",
|
||
"",
|
||
"► CODEX - The certification system",
|
||
" Earn credentials, level up, and prove",
|
||
" your expertise as a Metaverse Architect.",
|
||
"",
|
||
"► AEGIS - The security shield",
|
||
" Advanced protection layer keeping the",
|
||
" ecosystem safe from threats.",
|
||
"",
|
||
"Explore the OS apps to learn more!",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'sudo':
|
||
if (args[1] === 'unlock' && args[2] === 'secrets') {
|
||
setHistory(prev => [...prev, "Verifying administrator credentials..."]);
|
||
await progressBar("UNLOCKING", 15);
|
||
await delay(500);
|
||
window.dispatchEvent(new CustomEvent('aethex-unlock-secrets'));
|
||
await typeEffect([
|
||
"",
|
||
"╔═══════════════════════════════════════════╗",
|
||
"║ 🎉 SECRETS UNLOCKED! 🎉 ║",
|
||
"╠═══════════════════════════════════════════╣",
|
||
"║ New wallpapers are now available in ║",
|
||
"║ Settings. Congratulations, Architect! ║",
|
||
"╚═══════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
} else {
|
||
setHistory(prev => [...prev, "Usage: sudo unlock secrets", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'secret':
|
||
await typeEffect([
|
||
"",
|
||
"🔐 SECRET COMMANDS:",
|
||
" - sudo unlock secrets : Unlock hidden features",
|
||
" - Try the Konami Code on the desktop",
|
||
" - ↑↑↓↓←→←→BA",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'dice':
|
||
const d1 = Math.floor(Math.random() * 6) + 1;
|
||
const d2 = Math.floor(Math.random() * 6) + 1;
|
||
const diceArt: Record<number, string[]> = {
|
||
1: ["┌───────┐", "│ │", "│ ● │", "│ │", "└───────┘"],
|
||
2: ["┌───────┐", "│ ● │", "│ │", "│ ● │", "└───────┘"],
|
||
3: ["┌───────┐", "│ ● │", "│ ● │", "│ ● │", "└───────┘"],
|
||
4: ["┌───────┐", "│ ● ● │", "│ │", "│ ● ● │", "└───────┘"],
|
||
5: ["┌───────┐", "│ ● ● │", "│ ● │", "│ ● ● │", "└───────┘"],
|
||
6: ["┌───────┐", "│ ● ● │", "│ ● ● │", "│ ● ● │", "└───────┘"],
|
||
};
|
||
await typeEffect(["", "🎲 Rolling dice..."], setHistory);
|
||
await delay(500);
|
||
for (let i = 0; i < 5; i++) {
|
||
await typeEffect([` ${diceArt[d1][i]} ${diceArt[d2][i]}`], setHistory);
|
||
}
|
||
await typeEffect([``, `Result: ${d1} + ${d2} = ${d1 + d2}`, ""], setHistory);
|
||
break;
|
||
|
||
case 'cowsay':
|
||
const cowMsg = args.slice(1).join(' ') || 'Hello, Architect!';
|
||
const border = '─'.repeat(cowMsg.length + 2);
|
||
await typeEffect([
|
||
"",
|
||
`┌${border}┐`,
|
||
`│ ${cowMsg} │`,
|
||
`└${border}┘`,
|
||
" \\ ^__^",
|
||
" \\ (oo)\\_______",
|
||
" (__)\\ )\\/\\",
|
||
" ||----w |",
|
||
" || ||",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'joke':
|
||
const jokes = [
|
||
{ q: "Why do programmers prefer dark mode?", a: "Because light attracts bugs." },
|
||
{ q: "Why did the developer go broke?", a: "Because he used up all his cache." },
|
||
{ q: "What's a programmer's favorite hangout place?", a: "Foo Bar." },
|
||
{ q: "Why do Java developers wear glasses?", a: "Because they can't C#." },
|
||
];
|
||
const joke = jokes[Math.floor(Math.random() * jokes.length)];
|
||
await typeEffect(["", `Q: ${joke.q}`], setHistory);
|
||
await delay(1500);
|
||
await typeEffect([`A: ${joke.a}`, ""], setHistory);
|
||
break;
|
||
|
||
case 'weather':
|
||
const conditions = ['☀️ Sunny', '🌤️ Partly Cloudy', '☁️ Cloudy', '🌧️ Rainy', '⚡ Thunderstorms', '🌈 Rainbow'];
|
||
const temp = Math.floor(Math.random() * 30) + 15;
|
||
await typeEffect([
|
||
"",
|
||
"┌────────────────────────────┐",
|
||
"│ METAVERSE WEATHER │",
|
||
"├────────────────────────────┤",
|
||
`│ ${conditions[Math.floor(Math.random() * conditions.length)].padEnd(24)}│`,
|
||
`│ Temperature: ${temp}°C │`,
|
||
"│ Humidity: Always optimal │",
|
||
"│ Wind: Digital breeze │",
|
||
"└────────────────────────────┘",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'uptime':
|
||
const days = Math.floor(Math.random() * 365) + 100;
|
||
const hours = Math.floor(Math.random() * 24);
|
||
await typeEffect([
|
||
"",
|
||
`System uptime: ${days} days, ${hours} hours`,
|
||
"The Metaverse never sleeps.",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'banner':
|
||
await typeEffect([
|
||
"",
|
||
"█████╗ ███████╗████████╗██╗ ██╗███████╗██╗ ██╗",
|
||
"██╔══██╗██╔════╝╚══██╔══╝██║ ██║██╔════╝╚██╗██╔╝",
|
||
"███████║█████╗ ██║ ███████║█████╗ ╚███╔╝ ",
|
||
"██╔══██║██╔══╝ ██║ ██╔══██║██╔══╝ ██╔██╗ ",
|
||
"██║ ██║███████╗ ██║ ██║ ██║███████╗██╔╝ ██╗",
|
||
"╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝",
|
||
"",
|
||
" Operating System for the Metaverse",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'coffee':
|
||
await typeEffect([
|
||
"",
|
||
" ( (",
|
||
" ) )",
|
||
" ........",
|
||
" | |]",
|
||
" \\ /",
|
||
" `----'",
|
||
"",
|
||
"☕ Coffee brewed! Stay caffeinated, Architect.",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'ping':
|
||
await typeEffect(["", "Pinging AeThex Network..."], setHistory);
|
||
await delay(500);
|
||
await typeEffect([
|
||
"PING aethex.network (42.42.42.42): 56 data bytes",
|
||
"64 bytes from 42.42.42.42: icmp_seq=0 ttl=64 time=0.042 ms",
|
||
"64 bytes from 42.42.42.42: icmp_seq=1 ttl=64 time=0.037 ms",
|
||
"64 bytes from 42.42.42.42: icmp_seq=2 ttl=64 time=0.041 ms",
|
||
"",
|
||
"--- aethex.network ping statistics ---",
|
||
"3 packets transmitted, 3 packets received, 0.0% packet loss",
|
||
"",
|
||
"✓ AeThex Network: ONLINE",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'whois':
|
||
const target = args[1]?.toLowerCase();
|
||
if (target === 'mrpiglr') {
|
||
await typeEffect([
|
||
"",
|
||
"╔══════════════════════════════════════════════════╗",
|
||
"║ ARCHITECT PROFILE ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ CODENAME: mrpiglr ║",
|
||
"║ REAL NAME: [CLASSIFIED] ║",
|
||
"║ ROLE: Founder & Chief Architect ║",
|
||
"║ CLEARANCE: OVERSEE (Highest) ║",
|
||
"║ STATUS: ACTIVE ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ SKILLS: Metaverse Architecture, Web3, ║",
|
||
"║ Game Development, System Design ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ 'Building the operating system for ║",
|
||
"║ the Metaverse, one line at a time.' ║",
|
||
"╚══════════════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
} else if (target === 'trevorjoey' || target === 'dylan' || target === 'fadedlatte') {
|
||
await typeEffect([
|
||
"",
|
||
`╔══════════════════════════════════════════════════╗`,
|
||
`║ ARCHITECT PROFILE ║`,
|
||
`╠══════════════════════════════════════════════════╣`,
|
||
`║ CODENAME: ${(target || '').padEnd(35)}║`,
|
||
`║ ROLE: Founding Architect ║`,
|
||
`║ CLEARANCE: ADMIN ║`,
|
||
`║ STATUS: ACTIVE ║`,
|
||
`╚══════════════════════════════════════════════════╝`,
|
||
""
|
||
], setHistory);
|
||
} else {
|
||
setHistory(prev => [...prev, "Usage: whois <username>", "Try: whois mrpiglr", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'foundry':
|
||
await typeEffect([
|
||
"",
|
||
"╔══════════════════════════════════════════════════╗",
|
||
"║ 🔥 THE FOUNDRY - ARCHITECT BOOTCAMP ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ ║",
|
||
"║ Transform yourself into a certified ║",
|
||
"║ Metaverse Architect in 8 weeks. ║",
|
||
"║ ║",
|
||
"║ Learn: Game Dev, Web3, System Design ║",
|
||
"║ ║",
|
||
"║ Price: $500 (Limited Cohort) ║",
|
||
"║ ║",
|
||
"║ Use code TERMINAL10 for 10% off! ║",
|
||
"║ ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ Visit: aethex.studio ║",
|
||
"╚══════════════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'discount':
|
||
await typeEffect([
|
||
"",
|
||
"🎉 SECRET FOUND!",
|
||
"",
|
||
"Use code: TERMINAL10",
|
||
"For 10% off The Foundry bootcamp!",
|
||
"",
|
||
"Visit aethex.studio to enroll.",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'aegis':
|
||
await typeEffect([
|
||
"",
|
||
"╔══════════════════════════════════════════════════╗",
|
||
"║ 🛡️ AEGIS SECURITY DASHBOARD 🛡️ ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ ║",
|
||
"║ Status: ████████████ ACTIVE ║",
|
||
"║ Shield Level: ████████████ MAXIMUM ║",
|
||
"║ Encryption: AES-256-GCM ║",
|
||
"║ Protocol: QUANTUM-RESISTANT ║",
|
||
"║ ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ RECENT ACTIVITY: ║",
|
||
"║ ├─ 0 intrusion attempts blocked (24h) ║",
|
||
"║ ├─ 42 secure sessions active ║",
|
||
"║ ├─ Last scan: 2 minutes ago ║",
|
||
"║ └─ Next scheduled: 5 minutes ║",
|
||
"║ ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ COMMANDS: threat, firewall, shield, trace ║",
|
||
"╚══════════════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'threat':
|
||
setHistory(prev => [...prev, "Analyzing threat landscape..."]);
|
||
await progressBar("SCANNING", 12);
|
||
await delay(300);
|
||
const threatLevels = ['LOW', 'LOW', 'LOW', 'MINIMAL', 'MEDIUM'];
|
||
const currentThreat = threatLevels[Math.floor(Math.random() * threatLevels.length)];
|
||
const threatColor = currentThreat === 'LOW' || currentThreat === 'MINIMAL' ? '🟢' : currentThreat === 'MEDIUM' ? '🟡' : '🔴';
|
||
await typeEffect([
|
||
"",
|
||
"┌─────────────────────────────────────────┐",
|
||
"│ AEGIS THREAT ASSESSMENT │",
|
||
"├─────────────────────────────────────────┤",
|
||
`│ Current Level: ${threatColor} ${currentThreat.padEnd(20)}│`,
|
||
"│ │",
|
||
"│ Perimeter: ✓ Secure │",
|
||
"│ Endpoints: ✓ Protected │",
|
||
"│ Data Layer: ✓ Encrypted │",
|
||
"│ Identity: ✓ Verified │",
|
||
"│ │",
|
||
"│ Last Incident: None recorded │",
|
||
"└─────────────────────────────────────────┘",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'firewall':
|
||
await typeEffect([
|
||
"",
|
||
"╔══════════════════════════════════════════════════╗",
|
||
"║ AEGIS FIREWALL STATUS ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
"║ ║",
|
||
"║ ┌─────────────────────────────────────────────┐ ║",
|
||
"║ │ RULE SET: PARANOID │ ║",
|
||
"║ └─────────────────────────────────────────────┘ ║",
|
||
"║ ║",
|
||
"║ ACTIVE RULES: ║",
|
||
"║ ├─ DENY all inbound (default) ║",
|
||
"║ ├─ ALLOW 443/tcp (HTTPS) ║",
|
||
"║ ├─ ALLOW 80/tcp (HTTP redirect) ║",
|
||
"║ ├─ ALLOW aethex.network (trusted) ║",
|
||
"║ └─ DROP known-attackers (blocklist) ║",
|
||
"║ ║",
|
||
"║ Packets Inspected: 1,247,892 ║",
|
||
"║ Threats Blocked: 0 ║",
|
||
"║ ║",
|
||
"╚══════════════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'shield':
|
||
const shieldMode = args[1]?.toLowerCase();
|
||
if (shieldMode === 'activate' || shieldMode === 'on') {
|
||
setHistory(prev => [...prev, "Activating enhanced shield mode..."]);
|
||
await progressBar("DEPLOYING SHIELD", 15);
|
||
await delay(300);
|
||
await typeEffect([
|
||
"",
|
||
" ╔════════════════════╗",
|
||
" ╔╝ ╚╗",
|
||
" ╔╝ 🛡️ AEGIS SHIELD ╚╗",
|
||
" ╔╝ ACTIVE ╚╗",
|
||
" ╔╝ ╚╗",
|
||
" ╔╝ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ╚╗",
|
||
" ║ QUANTUM BARRIER ║",
|
||
" ╚╗ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ╔╝",
|
||
" ╚╗ ╔╝",
|
||
" ╚╗ Protection: MAXIMUM ╔╝",
|
||
" ╚╗ ╔╝",
|
||
" ╚╗ ╔╝",
|
||
" ╚══════════════════════╝",
|
||
"",
|
||
"Shield mode activated. You are now protected.",
|
||
""
|
||
], setHistory);
|
||
} else if (shieldMode === 'status') {
|
||
await typeEffect([
|
||
"",
|
||
"Shield Status: ACTIVE",
|
||
"Protection Level: MAXIMUM",
|
||
"Uptime: 99.999%",
|
||
""
|
||
], setHistory);
|
||
} else {
|
||
setHistory(prev => [...prev, "Usage: shield <activate|status>", ""]);
|
||
}
|
||
break;
|
||
|
||
case 'trace':
|
||
const traceTarget = args[1] || 'aethex.network';
|
||
setHistory(prev => [...prev, `Initiating trace route to ${traceTarget}...`]);
|
||
await delay(200);
|
||
const hops = [
|
||
{ ip: '192.168.1.1', name: 'local-gateway', time: '0.5ms' },
|
||
{ ip: '10.0.0.1', name: 'isp-router', time: '12ms' },
|
||
{ ip: '72.14.192.1', name: 'core-switch', time: '18ms' },
|
||
{ ip: '42.42.42.1', name: 'aegis-gateway', time: '22ms' },
|
||
{ ip: '42.42.42.42', name: 'aethex.network', time: '24ms' },
|
||
];
|
||
await typeEffect(["", `traceroute to ${traceTarget} (42.42.42.42), 30 hops max`, ""], setHistory);
|
||
for (let i = 0; i < hops.length; i++) {
|
||
await delay(300);
|
||
setHistory(prev => [...prev, ` ${i + 1} ${hops[i].ip.padEnd(15)} ${hops[i].name.padEnd(20)} ${hops[i].time}`]);
|
||
}
|
||
await typeEffect([
|
||
"",
|
||
"✓ Trace complete. Connection secure.",
|
||
` End-to-end encryption: VERIFIED`,
|
||
` Route integrity: VERIFIED`,
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'encrypt':
|
||
const msgToEncrypt = args.slice(1).join(' ');
|
||
if (!msgToEncrypt) {
|
||
setHistory(prev => [...prev, "Usage: encrypt <message>", ""]);
|
||
break;
|
||
}
|
||
setHistory(prev => [...prev, "Encrypting message..."]);
|
||
await progressBar("ENCRYPTING", 8);
|
||
await delay(200);
|
||
// Generate fake encrypted output efficiently (fixed length)
|
||
const encryptedParts: string[] = [];
|
||
for (let i = 0; i < 24; i++) {
|
||
encryptedParts.push(Math.random().toString(16).substr(2, 2));
|
||
}
|
||
const encrypted = encryptedParts.join('');
|
||
await typeEffect([
|
||
"",
|
||
"╔════════════════════════════════════════════════╗",
|
||
"║ AEGIS ENCRYPTION COMPLETE ║",
|
||
"╠════════════════════════════════════════════════╣",
|
||
"║ Algorithm: AES-256-GCM ║",
|
||
"║ Key Size: 256-bit ║",
|
||
"╠════════════════════════════════════════════════╣",
|
||
"║ ENCRYPTED OUTPUT: ║",
|
||
`║ ${encrypted.slice(0, 44)}... ║`,
|
||
"╚════════════════════════════════════════════════╝",
|
||
"",
|
||
"Message encrypted. Only authorized recipients can decrypt.",
|
||
""
|
||
], setHistory);
|
||
break;
|
||
|
||
case 'passport':
|
||
try {
|
||
const sessRes = await fetch('/api/auth/session', { credentials: 'include' });
|
||
const sessData = await sessRes.json();
|
||
if (sessData?.authenticated) {
|
||
await typeEffect([
|
||
"",
|
||
"╔══════════════════════════════════════════════════╗",
|
||
"║ AETHEX PASSPORT - VERIFIED ║",
|
||
"╠══════════════════════════════════════════════════╣",
|
||
`║ Username: ${(sessData.user.username || 'Unknown').padEnd(35)}║`,
|
||
`║ Status: AUTHENTICATED ║`,
|
||
`║ Role: ${(sessData.user.isAdmin ? 'ADMINISTRATOR' : 'ARCHITECT').padEnd(35)}║`,
|
||
"║ Session: ACTIVE ║",
|
||
"╚══════════════════════════════════════════════════╝",
|
||
""
|
||
], setHistory);
|
||
} else {
|
||
setHistory(prev => [...prev, "", "PASSPORT: No active session", "Use the Passport app to authenticate.", ""]);
|
||
}
|
||
} catch {
|
||
setHistory(prev => [...prev, "ERROR: Could not verify passport status", ""]);
|
||
}
|
||
break;
|
||
|
||
default:
|
||
setHistory(prev => [...prev, `Command not found: ${cmd}`, "Type 'help' for available commands.", ""]);
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
if (commandHistory.length > 0) {
|
||
const newIndex = historyIndex < commandHistory.length - 1 ? historyIndex + 1 : historyIndex;
|
||
setHistoryIndex(newIndex);
|
||
setInput(commandHistory[commandHistory.length - 1 - newIndex] || '');
|
||
}
|
||
} else if (e.key === 'ArrowDown') {
|
||
e.preventDefault();
|
||
if (historyIndex > 0) {
|
||
const newIndex = historyIndex - 1;
|
||
setHistoryIndex(newIndex);
|
||
setInput(commandHistory[commandHistory.length - 1 - newIndex] || '');
|
||
} else {
|
||
setHistoryIndex(-1);
|
||
setInput('');
|
||
}
|
||
} else if (e.key === 'Tab') {
|
||
e.preventDefault();
|
||
const cmds = ['help', 'status', 'architects', 'projects', 'scan', 'analyze', 'decrypt', 'hack', 'fortune', 'whoami', 'neofetch', 'matrix', 'clear', 'tour', 'dice', 'cowsay', 'joke', 'weather', 'uptime', 'banner', 'coffee', 'sudo', 'secret', 'ping', 'whois', 'foundry', 'discount'];
|
||
const match = cmds.find(c => c.startsWith(input.toLowerCase()));
|
||
if (match) setInput(match);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const cmd = input.trim().toLowerCase();
|
||
if (!cmd) return;
|
||
setInput("");
|
||
setHistoryIndex(-1);
|
||
setCommandHistory(prev => [...prev, cmd]);
|
||
|
||
if (cmd === 'clear') {
|
||
setHistory([]);
|
||
return;
|
||
}
|
||
|
||
setHistory(prev => [...prev, `$ ${input}`]);
|
||
setIsLoading(true);
|
||
await runCommand(cmd);
|
||
setIsLoading(false);
|
||
};
|
||
|
||
return (
|
||
<div ref={terminalRef} className="h-full bg-black p-4 font-mono text-sm text-green-400 overflow-auto" onClick={() => inputRef.current?.focus()}>
|
||
{history.map((line, i) => (
|
||
<div key={i} className={`whitespace-pre-wrap ${line.includes('ERROR') ? 'text-red-400' : line.includes('╔') || line.includes('╚') || line.includes('═') ? 'text-cyan-400' : ''}`}>
|
||
{line}
|
||
</div>
|
||
))}
|
||
{isLoading && <div className="text-cyan-400 animate-pulse">Processing...</div>}
|
||
<form onSubmit={handleSubmit} className="flex items-center mt-1">
|
||
<span className="text-cyan-400">$</span>
|
||
<input
|
||
ref={inputRef}
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
className="flex-1 ml-2 bg-transparent outline-none text-green-400 caret-green-400"
|
||
autoFocus
|
||
disabled={isLoading}
|
||
data-testid="terminal-input"
|
||
autoComplete="off"
|
||
spellCheck={false}
|
||
/>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PassportApp({ onLoginSuccess, isDesktopLocked }: { onLoginSuccess?: () => void; isDesktopLocked?: boolean }) {
|
||
const { user, isAuthenticated, login, signup, logout } = useAuth();
|
||
const [mode, setMode] = useState<'view' | 'login' | 'signup'>(() =>
|
||
isDesktopLocked && !isAuthenticated ? 'login' : 'view'
|
||
);
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [username, setUsername] = useState('');
|
||
const [error, setError] = useState('');
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
const { data: metrics } = useQuery({
|
||
queryKey: ['os-metrics'],
|
||
queryFn: () => dataService.fetchMetrics(),
|
||
});
|
||
|
||
const { data: userProfile } = useQuery({
|
||
queryKey: ['os-my-profile'],
|
||
queryFn: async () => {
|
||
if (!user?.id) return null;
|
||
return dataService.fetchUserProfile(user.id);
|
||
},
|
||
enabled: isAuthenticated,
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (isAuthenticated && isDesktopLocked && onLoginSuccess) {
|
||
onLoginSuccess();
|
||
}
|
||
}, [isAuthenticated, isDesktopLocked, onLoginSuccess]);
|
||
|
||
useEffect(() => {
|
||
if (isAuthenticated) {
|
||
setMode('view');
|
||
}
|
||
}, [isAuthenticated]);
|
||
|
||
const handleLogin = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
setIsSubmitting(true);
|
||
try {
|
||
await login(email, password);
|
||
setMode('view');
|
||
if (onLoginSuccess) onLoginSuccess();
|
||
} catch (err: any) {
|
||
setError(err.message || 'Login failed');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleSignup = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
setIsSubmitting(true);
|
||
try {
|
||
await signup(email, password, username || undefined);
|
||
setMode('login');
|
||
setError('Account created! Please sign in.');
|
||
} catch (err: any) {
|
||
setError(err.message || 'Signup failed');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
if (mode === 'login' || mode === 'signup') {
|
||
return (
|
||
<div className="h-full p-6 bg-gradient-to-b from-slate-900 to-slate-950 overflow-auto">
|
||
<div className="border border-cyan-400/30 rounded-lg p-6 bg-slate-900/50 max-w-sm mx-auto">
|
||
<div className="text-center mb-6">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-cyan-500 to-purple-600 mb-4">
|
||
<Key className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h2 className="text-xl font-display text-white uppercase tracking-wider">
|
||
{mode === 'login' ? 'Sign In' : 'Create Account'}
|
||
</h2>
|
||
<p className="text-cyan-400 text-sm font-mono mt-1">AeThex Passport</p>
|
||
</div>
|
||
|
||
<form onSubmit={mode === 'login' ? handleLogin : handleSignup} className="space-y-4">
|
||
{mode === 'signup' && (
|
||
<div>
|
||
<label className="block text-white/50 text-xs mb-1 font-mono">USERNAME</label>
|
||
<input
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
className="w-full bg-black/50 border border-cyan-500/30 rounded px-3 py-2 text-white font-mono text-sm focus:border-cyan-400 focus:outline-none"
|
||
placeholder="architect_name"
|
||
data-testid="passport-username"
|
||
/>
|
||
</div>
|
||
)}
|
||
<div>
|
||
<label className="block text-white/50 text-xs mb-1 font-mono">EMAIL</label>
|
||
<input
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="w-full bg-black/50 border border-cyan-500/30 rounded px-3 py-2 text-white font-mono text-sm focus:border-cyan-400 focus:outline-none"
|
||
placeholder="you@example.com"
|
||
required
|
||
data-testid="passport-email"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-white/50 text-xs mb-1 font-mono">PASSWORD</label>
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
className="w-full bg-black/50 border border-cyan-500/30 rounded px-3 py-2 text-white font-mono text-sm focus:border-cyan-400 focus:outline-none"
|
||
placeholder="••••••••"
|
||
required
|
||
data-testid="passport-password"
|
||
/>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className={`text-sm font-mono p-2 rounded ${error.includes('created') ? 'text-green-400 bg-green-500/10' : 'text-red-400 bg-red-500/10'}`}>
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isSubmitting}
|
||
className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold uppercase tracking-wider transition-colors disabled:opacity-50"
|
||
data-testid="passport-submit"
|
||
>
|
||
{isSubmitting ? 'Processing...' : mode === 'login' ? 'Sign In' : 'Create Account'}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="mt-4 text-center">
|
||
<button
|
||
onClick={() => { setMode(mode === 'login' ? 'signup' : 'login'); setError(''); }}
|
||
className="text-cyan-400 hover:text-cyan-300 text-sm font-mono"
|
||
data-testid="passport-toggle-mode"
|
||
>
|
||
{mode === 'login' ? 'Need an account? Sign up' : 'Already have an account? Sign in'}
|
||
</button>
|
||
</div>
|
||
|
||
{isDesktopLocked && (
|
||
<div className="mt-4 pt-4 border-t border-white/10 text-center">
|
||
<button
|
||
onClick={onLoginSuccess}
|
||
className="text-white/40 hover:text-white/60 text-xs font-mono"
|
||
data-testid="passport-skip-guest"
|
||
>
|
||
Continue as Guest
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Calculate XP progress for current level (with safe guards)
|
||
const currentLevel = Math.max(1, userProfile?.level || 1);
|
||
const totalXp = Math.max(0, userProfile?.total_xp || 0);
|
||
const xpPerLevel = 1000;
|
||
const xpForCurrentLevel = (currentLevel - 1) * xpPerLevel;
|
||
const xpForNextLevel = currentLevel * xpPerLevel;
|
||
const xpDelta = xpForNextLevel - xpForCurrentLevel;
|
||
const xpProgress = xpDelta > 0 ? Math.min(100, Math.max(0, ((totalXp - xpForCurrentLevel) / xpDelta) * 100)) : 0;
|
||
const passportId = userProfile?.aethex_passport_id || user?.id?.slice(0, 8).toUpperCase() || 'GUEST';
|
||
const skills = Array.isArray(userProfile?.skills) ? userProfile.skills : [];
|
||
|
||
return (
|
||
<div className="h-full p-4 bg-gradient-to-b from-slate-900 via-slate-950 to-black overflow-auto">
|
||
{/* Credential Card */}
|
||
<div className="relative max-w-sm mx-auto">
|
||
{/* Holographic background effect */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/20 via-purple-500/20 to-pink-500/20 rounded-xl blur-xl" />
|
||
|
||
<motion.div
|
||
className="relative border-2 border-cyan-400/50 rounded-xl overflow-hidden bg-gradient-to-br from-slate-900/95 to-slate-950/95 backdrop-blur-xl"
|
||
initial={{ rotateY: -5 }}
|
||
animate={{ rotateY: 0 }}
|
||
style={{ transformStyle: 'preserve-3d' }}
|
||
>
|
||
{/* Holographic stripe */}
|
||
<div className="h-2 bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500" />
|
||
|
||
{/* Card header */}
|
||
<div className="p-4 pb-0">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-purple-600 flex items-center justify-center">
|
||
<span className="text-xl font-display font-bold text-white">A</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider">AeThex</div>
|
||
<div className="text-sm font-display text-cyan-400">PASSPORT</div>
|
||
</div>
|
||
</div>
|
||
{isAuthenticated && (
|
||
<motion.div
|
||
className="flex items-center gap-1 px-2 py-1 bg-green-500/20 border border-green-500/50 rounded-full"
|
||
animate={{ scale: [1, 1.05, 1] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
>
|
||
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||
<span className="text-xs font-mono text-green-400">VERIFIED</span>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Avatar and name section */}
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<div className="relative">
|
||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-cyan-500 to-purple-600 p-0.5">
|
||
<div className="w-full h-full rounded-full bg-slate-900 flex items-center justify-center overflow-hidden">
|
||
{userProfile?.avatar_url ? (
|
||
<img src={userProfile.avatar_url} alt="Avatar" className="w-full h-full object-cover" />
|
||
) : (
|
||
<User className="w-8 h-8 text-white/70" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
{isAuthenticated && (
|
||
<div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-cyan-500 to-purple-600 flex items-center justify-center border-2 border-slate-900">
|
||
<span className="text-xs font-bold text-white">{currentLevel}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-lg font-display text-white uppercase tracking-wide">
|
||
{isAuthenticated ? (userProfile?.full_name || user?.username) : 'Guest'}
|
||
</div>
|
||
<div className="text-sm text-cyan-400 font-mono">
|
||
@{isAuthenticated ? user?.username : 'visitor'}
|
||
</div>
|
||
<div className="text-xs text-purple-400 font-mono mt-0.5">
|
||
{isAuthenticated ? (user?.isAdmin ? 'ADMINISTRATOR' : (userProfile?.role?.toUpperCase() || 'ARCHITECT')) : 'VISITOR'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Passport ID */}
|
||
<div className="px-4 pb-3">
|
||
<div className="flex items-center justify-between p-2 bg-black/40 rounded border border-white/10">
|
||
<div>
|
||
<div className="text-[10px] text-white/40 uppercase tracking-wider">Passport ID</div>
|
||
<div className="text-sm font-mono text-cyan-300 tracking-wider">{passportId}</div>
|
||
</div>
|
||
<IdCard className="w-5 h-5 text-white/30" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* XP Progress - Only for authenticated users */}
|
||
{isAuthenticated && (
|
||
<div className="px-4 pb-3">
|
||
<div className="flex justify-between text-xs font-mono mb-1">
|
||
<span className="text-white/50">Level {currentLevel}</span>
|
||
<span className="text-cyan-400">{totalXp.toLocaleString()} XP</span>
|
||
</div>
|
||
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
|
||
<motion.div
|
||
className="h-full bg-gradient-to-r from-cyan-500 to-purple-500"
|
||
initial={{ width: 0 }}
|
||
animate={{ width: `${xpProgress}%` }}
|
||
transition={{ duration: 1, ease: 'easeOut' }}
|
||
/>
|
||
</div>
|
||
<div className="text-[10px] text-white/30 text-right mt-0.5 font-mono">
|
||
{Math.round(xpForNextLevel - totalXp)} XP to Level {currentLevel + 1}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Skills */}
|
||
{isAuthenticated && skills.length > 0 && (
|
||
<div className="px-4 pb-3">
|
||
<div className="text-[10px] text-white/40 uppercase tracking-wider mb-2">Skills</div>
|
||
<div className="flex flex-wrap gap-1">
|
||
{(skills as string[]).slice(0, 6).map((skill, i) => (
|
||
<span key={i} className="px-2 py-0.5 bg-purple-500/20 border border-purple-500/30 rounded text-xs text-purple-300 font-mono">
|
||
{skill}
|
||
</span>
|
||
))}
|
||
{skills.length > 6 && (
|
||
<span className="px-2 py-0.5 text-xs text-white/40 font-mono">+{skills.length - 6}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Stats row */}
|
||
<div className="px-4 pb-4">
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<div className="text-center p-2 bg-white/5 rounded">
|
||
<div className="text-lg font-bold text-cyan-400">{metrics?.totalProfiles || 0}</div>
|
||
<div className="text-[10px] text-white/40 uppercase">Network</div>
|
||
</div>
|
||
<div className="text-center p-2 bg-white/5 rounded">
|
||
<div className="text-lg font-bold text-purple-400">{metrics?.totalProjects || 0}</div>
|
||
<div className="text-[10px] text-white/40 uppercase">Projects</div>
|
||
</div>
|
||
<div className="text-center p-2 bg-white/5 rounded">
|
||
<div className="text-lg font-bold text-green-400">{userProfile?.loyalty_points || 0}</div>
|
||
<div className="text-[10px] text-white/40 uppercase">Points</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="px-4 pb-4">
|
||
{!isAuthenticated ? (
|
||
<motion.button
|
||
onClick={() => setMode('login')}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className="w-full py-3 bg-gradient-to-r from-cyan-500 to-cyan-400 hover:from-cyan-400 hover:to-cyan-300 text-black font-mono font-bold uppercase tracking-wider transition-all shadow-lg shadow-cyan-500/30"
|
||
data-testid="passport-signin-btn"
|
||
>
|
||
Authenticate
|
||
</motion.button>
|
||
) : (
|
||
<button
|
||
onClick={() => logout()}
|
||
className="w-full py-2 border border-red-500/30 text-red-400/80 hover:bg-red-500/10 font-mono uppercase tracking-wider transition-colors text-sm"
|
||
data-testid="passport-logout-btn"
|
||
>
|
||
Sign Out
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="px-4 pb-3 pt-2 border-t border-white/10 flex items-center justify-between">
|
||
<div className="text-[10px] text-white/30 font-mono">
|
||
Issued by Codex Authority
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<Shield className="w-3 h-3 text-cyan-400/50" />
|
||
<span className="text-[10px] text-cyan-400/50 font-mono">AEGIS</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FilesApp() {
|
||
const { data: projects, isLoading } = useQuery({
|
||
queryKey: ['os-projects-list'],
|
||
queryFn: () => dataService.fetchProjects(),
|
||
});
|
||
|
||
const { data: metrics } = useQuery({
|
||
queryKey: ['os-metrics'],
|
||
queryFn: () => dataService.fetchMetrics(),
|
||
});
|
||
|
||
const handleExportProject = async (project: any) => {
|
||
try {
|
||
await tauriNative.saveProject(project);
|
||
await tauriNative.showNotification(
|
||
'Project Exported',
|
||
`${project.title} saved successfully`
|
||
);
|
||
} catch (err) {
|
||
console.error('Export failed:', err);
|
||
}
|
||
};
|
||
|
||
const handleSelectFolder = async () => {
|
||
try {
|
||
const folder = await tauriNative.selectFolder();
|
||
if (folder) {
|
||
await tauriNative.showNotification('Folder Selected', folder);
|
||
}
|
||
} catch (err) {
|
||
console.error('Folder selection failed:', err);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-2 bg-slate-900 border-b border-white/10">
|
||
<div className="flex-1 bg-slate-800 rounded px-3 py-1.5 text-white/60 text-xs md:text-sm font-mono overflow-x-auto whitespace-nowrap">
|
||
/home/architect/projects
|
||
</div>
|
||
<button
|
||
onClick={handleSelectFolder}
|
||
className="px-2 md:px-3 py-1 bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-400 text-xs rounded flex items-center gap-1 transition-colors shrink-0"
|
||
title="Select Export Folder"
|
||
>
|
||
<FolderOpen className="w-3 h-3" />
|
||
<span className="hidden sm:inline">Select Folder</span>
|
||
</button>
|
||
</div>
|
||
<div className="flex-1 p-3 md:p-4 overflow-auto">
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center h-40">
|
||
<Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-4">
|
||
<div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
|
||
<FolderOpen className="w-5 h-5 md:w-6 md:h-6 text-cyan-400 mb-2" />
|
||
<div className="text-xs text-white/50">Total Projects</div>
|
||
<div className="text-lg md:text-xl font-bold text-white">{metrics?.totalProjects || 0}</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
|
||
<User className="w-5 h-5 md:w-6 md:h-6 text-purple-400 mb-2" />
|
||
<div className="text-xs text-white/50">Architects</div>
|
||
<div className="text-lg md:text-xl font-bold text-white">{metrics?.totalProfiles || 0}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-xs text-white/50 uppercase tracking-wider">Project Files</div>
|
||
{projects?.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{projects.map((p: any) => (
|
||
<div key={p.id} className="flex items-center gap-3 p-3 bg-white/5 rounded border border-white/10 hover:border-cyan-500/30 transition-colors group">
|
||
<FolderOpen className="w-5 h-5 text-cyan-400 shrink-0" />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-white text-sm truncate">{p.title}</div>
|
||
<div className="text-white/40 text-xs">{p.engine || 'Unknown engine'}</div>
|
||
</div>
|
||
<span className={`text-xs px-2 py-0.5 rounded shrink-0 ${p.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'}`}>
|
||
{p.status || 'unknown'}
|
||
</span>
|
||
<button
|
||
onClick={() => handleExportProject(p)}
|
||
className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-cyan-500/20 text-cyan-400 rounded transition-all"
|
||
title="Export Project"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-white/50 text-sm text-center py-4">No projects found</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AchievementsApp() {
|
||
const { user } = useAuth();
|
||
|
||
const { data: userAchievements = [], isLoading: achievementsLoading } = useQuery({
|
||
queryKey: ['user-achievements', user?.id],
|
||
queryFn: () => user?.id ? dataService.fetchUserAchievements(user.id) : Promise.resolve([]),
|
||
enabled: !!user,
|
||
});
|
||
|
||
const { data: allAchievements = [], isLoading: allLoading } = useQuery({
|
||
queryKey: ['all-achievements'],
|
||
queryFn: () => dataService.fetchAllAchievements(),
|
||
enabled: !!user,
|
||
});
|
||
|
||
const isLoading = achievementsLoading || allLoading;
|
||
|
||
// Create a set of unlocked achievement IDs
|
||
const unlockedIds = new Set((Array.isArray(userAchievements) ? userAchievements : []).map((a: any) => a.achievement_id || a.id));
|
||
|
||
// Combine unlocked and locked achievements
|
||
const achievements = [
|
||
...(Array.isArray(userAchievements) ? userAchievements : []).map((a: any) => ({ ...a, unlocked: true })),
|
||
...(Array.isArray(allAchievements) ? allAchievements : []).filter((a: any) => !unlockedIds.has(a.id)).map((a: any) => ({ ...a, unlocked: false }))
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Trophy className="w-5 h-5 md:w-6 md:h-6 text-yellow-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Achievements</h2>
|
||
<span className="ml-auto text-xs text-white/40 font-mono shrink-0">
|
||
{(Array.isArray(userAchievements) ? userAchievements : []).length} / {(Array.isArray(allAchievements) ? allAchievements : []).length}
|
||
</span>
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center h-40">
|
||
<Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
|
||
</div>
|
||
) : !user ? (
|
||
<div className="text-center text-white/40 py-8">
|
||
<Lock className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||
<p>Please log in to view achievements</p>
|
||
</div>
|
||
) : achievements.length === 0 ? (
|
||
<div className="text-center text-white/40 py-8">
|
||
<Trophy className="w-12 h-12 mx-auto mb-2 opacity-30" />
|
||
<p>No achievements available yet</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{achievements.map((achievement: any, index: number) => (
|
||
<div key={achievement.id || index} className={`flex items-center gap-4 p-3 rounded-lg border ${achievement.unlocked ? 'bg-cyan-500/10 border-cyan-500/30' : 'bg-white/5 border-white/10 opacity-50'}`}>
|
||
<div className={`w-12 h-12 rounded-lg flex items-center justify-center ${achievement.unlocked ? 'bg-cyan-500/20' : 'bg-white/10'}`}>
|
||
{achievement.unlocked ? <Trophy className="w-6 h-6 text-yellow-400" /> : <Lock className="w-6 h-6 text-white/30" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className={`font-mono text-sm ${achievement.unlocked ? 'text-white' : 'text-white/50'}`}>
|
||
{achievement.title || achievement.name}
|
||
</div>
|
||
<div className="text-xs text-white/40">{achievement.description}</div>
|
||
{achievement.xp_reward && (
|
||
<div className="text-xs text-cyan-400 mt-1">+{achievement.xp_reward} XP</div>
|
||
)}
|
||
</div>
|
||
{achievement.unlocked && (
|
||
<div className="text-green-400 text-xs font-mono uppercase tracking-wider">Unlocked</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OpportunitiesApp() {
|
||
const { data: opportunities, isLoading } = useQuery<any[]>({
|
||
queryKey: ['/api/opportunities'],
|
||
queryFn: () => dataService.fetchOpportunities(),
|
||
});
|
||
|
||
const formatSalary = (min?: number, max?: number) => {
|
||
if (!min && !max) return "Competitive";
|
||
if (min && max) return `$${(min / 1000).toFixed(0)}k-${(max / 1000).toFixed(0)}k`;
|
||
if (min) return `$${(min / 1000).toFixed(0)}k+`;
|
||
return `$${(max! / 1000).toFixed(0)}k`;
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Briefcase className="w-5 h-5 md:w-6 md:h-6 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Opportunities</h2>
|
||
<span className="ml-auto text-xs text-white/40 font-mono shrink-0">
|
||
{opportunities?.length || 0}
|
||
</span>
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center h-40">
|
||
<Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
|
||
</div>
|
||
) : !opportunities || opportunities.length === 0 ? (
|
||
<div className="text-center text-white/40 py-8">
|
||
<Briefcase className="w-12 h-12 mx-auto mb-2 opacity-30" />
|
||
<p>No opportunities available</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{opportunities.map((opp: any) => (
|
||
<div key={opp.id} className="bg-white/5 border border-white/10 p-3 md:p-4 hover:border-cyan-400/30 active:border-cyan-400 transition-all">
|
||
<div className="flex items-start justify-between gap-2 mb-2">
|
||
<h3 className="font-mono text-sm text-white font-semibold line-clamp-2 flex-1">{opp.title}</h3>
|
||
<span className="text-cyan-400 font-mono text-xs whitespace-nowrap shrink-0">
|
||
{formatSalary(opp.salary_min, opp.salary_max)}
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-white/60 mb-3 line-clamp-2">{opp.description}</p>
|
||
<div className="flex flex-wrap items-center gap-2 text-xs">
|
||
<span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-400 border border-cyan-400/30 uppercase font-mono text-[10px]">
|
||
{opp.arm_affiliation}
|
||
</span>
|
||
<span className="text-white/40">{opp.job_type || 'Full-time'}</span>
|
||
{opp.status === 'open' && (
|
||
<span className="ml-auto text-green-400 font-mono">● Open</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EventsApp() {
|
||
const { data: events, isLoading } = useQuery<any[]>({
|
||
queryKey: ['/api/events'],
|
||
queryFn: () => dataService.fetchEvents(),
|
||
});
|
||
|
||
const formatDate = (dateStr: string) => {
|
||
const date = new Date(dateStr);
|
||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<CalendarDays className="w-5 h-5 md:w-6 md:h-6 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Events</h2>
|
||
<span className="ml-auto text-xs text-white/40 font-mono shrink-0">
|
||
{events?.length || 0}
|
||
</span>
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center h-40">
|
||
<Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
|
||
</div>
|
||
) : !events || events.length === 0 ? (
|
||
<div className="text-center text-white/40 py-8">
|
||
<CalendarDays className="w-12 h-12 mx-auto mb-2 opacity-30" />
|
||
<p>No events scheduled</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{events.map((event: any) => (
|
||
<div key={event.id} className="bg-white/5 border border-white/10 p-3 md:p-4 hover:border-cyan-400/30 active:border-cyan-400 transition-all">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-shrink-0 w-12 h-12 bg-cyan-500/20 border border-cyan-400/50 flex flex-col items-center justify-center text-cyan-400">
|
||
<div className="text-xs font-mono">{formatDate(event.date).split(' ')[0]}</div>
|
||
<div className="text-lg font-bold font-mono leading-none">{formatDate(event.date).split(' ')[1]}</div>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-start justify-between gap-2 mb-1">
|
||
<h3 className="font-mono text-sm text-white font-semibold">{event.title}</h3>
|
||
{event.featured && <Star className="w-4 h-4 text-yellow-400 fill-current flex-shrink-0" />}
|
||
</div>
|
||
{event.description && (
|
||
<p className="text-xs text-white/60 mb-2 line-clamp-2">{event.description}</p>
|
||
)}
|
||
<div className="flex items-center gap-3 text-xs text-white/40">
|
||
{event.time && (
|
||
<span className="flex items-center gap-1">
|
||
<Clock className="w-3 h-3" /> {event.time}
|
||
</span>
|
||
)}
|
||
{event.location && (
|
||
<span className="flex items-center gap-1 truncate">
|
||
<MapPin className="w-3 h-3 flex-shrink-0" /> {event.location}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ChatApp() {
|
||
const [messages, setMessages] = useState<{ role: 'user' | 'assistant'; content: string }[]>([
|
||
{ role: 'assistant', content: "Hi! I'm the AeThex assistant. How can I help you today?" }
|
||
]);
|
||
const [input, setInput] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
const sendMessage = async () => {
|
||
if (!input.trim() || isLoading) return;
|
||
|
||
const userMsg = input.trim();
|
||
setMessages(prev => [...prev, { role: 'user', content: userMsg }]);
|
||
setInput("");
|
||
setIsLoading(true);
|
||
|
||
try {
|
||
const res = await fetch('/api/chat', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({ message: userMsg, history: messages.slice(-10) }),
|
||
});
|
||
const data = await res.json();
|
||
setMessages(prev => [...prev, { role: 'assistant', content: data.response || "I'm having trouble responding right now." }]);
|
||
} catch {
|
||
setMessages(prev => [...prev, { role: 'assistant', content: "Sorry, I encountered an error. Please try again." }]);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex-1 p-3 md:p-4 overflow-auto space-y-3">
|
||
{messages.map((msg, i) => (
|
||
<div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||
<div className={`max-w-[80%] p-3 rounded-lg text-sm ${msg.role === 'user' ? 'bg-cyan-500/20 text-white' : 'bg-white/10 text-white/80'}`}>
|
||
{msg.content}
|
||
</div>
|
||
</div>
|
||
))}
|
||
{isLoading && (
|
||
<div className="flex justify-start">
|
||
<div className="bg-white/10 p-3 rounded-lg">
|
||
<Loader2 className="w-4 h-4 text-cyan-400 animate-spin" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="p-3 border-t border-white/10">
|
||
<form onSubmit={(e) => { e.preventDefault(); sendMessage(); }} className="flex gap-2">
|
||
<input
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
placeholder="Type a message..."
|
||
className="flex-1 bg-white/10 border border-white/10 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-cyan-500/50"
|
||
disabled={isLoading}
|
||
/>
|
||
<button type="submit" disabled={isLoading} className="bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-400 p-2 rounded-lg transition-colors">
|
||
<Send className="w-4 h-4" />
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ManifestoApp() {
|
||
return (
|
||
<div className="min-h-full p-4 md:p-6 bg-slate-950 overflow-auto">
|
||
<div className="max-w-lg mx-auto font-mono text-xs md:text-sm leading-relaxed">
|
||
<h1 className="text-xl md:text-2xl font-display text-cyan-400 uppercase tracking-wider mb-4 md:mb-6">The AeThex Manifesto</h1>
|
||
<div className="space-y-4 text-white/80">
|
||
<p>We are the architects of tomorrow.</p>
|
||
<p>In a world where the digital and physical converge, we stand at the frontier of a new reality. The Metaverse is not just a destination - it is a canvas for human potential.</p>
|
||
<p className="text-cyan-400 font-bold">Our Three Pillars:</p>
|
||
<p><span className="text-purple-400">AXIOM</span> - The foundational truths that guide our work.</p>
|
||
<p><span className="text-yellow-400">CODEX</span> - The certification of excellence.</p>
|
||
<p><span className="text-green-400">AEGIS</span> - The shield that protects.</p>
|
||
<p className="mt-6 text-white italic">"Build. Certify. Protect. This is the way of the Architect."</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MusicApp() {
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
const [currentTrack, setCurrentTrack] = useState(0);
|
||
const tracks = [
|
||
{ name: "Neon Dreams", artist: "Synth Collective", duration: "3:42" },
|
||
{ name: "Digital Rain", artist: "Matrix OST", duration: "4:15" },
|
||
{ name: "Architect's Theme", artist: "AeThex Audio", duration: "5:01" },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full p-3 md:p-4 bg-gradient-to-b from-purple-950/50 to-slate-950 flex flex-col">
|
||
<div className="text-center mb-4">
|
||
<div className="w-20 h-20 mx-auto bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-3">
|
||
<Music className="w-10 h-10 text-white" />
|
||
</div>
|
||
<div className="text-white font-mono text-sm">{tracks[currentTrack].name}</div>
|
||
<div className="text-white/50 text-xs">{tracks[currentTrack].artist}</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center gap-4 mb-4">
|
||
<button onClick={() => setCurrentTrack((currentTrack - 1 + tracks.length) % tracks.length)} className="p-2 text-white/60 hover:text-white transition-colors">
|
||
<ChevronUp className="w-5 h-5 rotate-[270deg]" />
|
||
</button>
|
||
<button onClick={() => setIsPlaying(!isPlaying)} className="w-12 h-12 bg-purple-500 hover:bg-purple-400 rounded-full flex items-center justify-center transition-colors">
|
||
{isPlaying ? <Pause className="w-5 h-5 text-white" /> : <Play className="w-5 h-5 text-white ml-0.5" />}
|
||
</button>
|
||
<button onClick={() => setCurrentTrack((currentTrack + 1) % tracks.length)} className="p-2 text-white/60 hover:text-white transition-colors">
|
||
<ChevronUp className="w-5 h-5 rotate-90" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-auto">
|
||
{tracks.map((track, i) => (
|
||
<button key={i} onClick={() => { setCurrentTrack(i); setIsPlaying(true); }} className={`w-full flex items-center gap-3 p-2 rounded hover:bg-white/10 transition-colors text-left ${i === currentTrack ? 'bg-white/10' : ''}`}>
|
||
<div className="w-8 h-8 bg-purple-500/20 rounded flex items-center justify-center">
|
||
<Music className="w-4 h-4 text-purple-400" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-white text-sm truncate">{track.name}</div>
|
||
<div className="text-white/50 text-xs truncate">{track.artist}</div>
|
||
</div>
|
||
<div className="text-white/30 text-xs">{track.duration}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="mt-2 p-2 bg-white/5 rounded text-center text-white/40 text-xs">Audio playback simulated</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PitchApp({ onNavigate }: { onNavigate: () => void }) {
|
||
return (
|
||
<div className="h-full p-6 bg-slate-950 flex flex-col items-center justify-center">
|
||
<Presentation className="w-16 h-16 text-cyan-400 mb-4" />
|
||
<h2 className="text-xl font-display text-white uppercase tracking-wider mb-2">Investor Pitch Deck</h2>
|
||
<p className="text-white/50 text-sm text-center mb-6 max-w-sm">
|
||
View the complete AeThex investor presentation with metrics, projections, and the dual-entity model.
|
||
</p>
|
||
<button onClick={onNavigate} className="flex items-center gap-2 bg-gradient-to-r from-cyan-500 to-purple-600 text-white px-6 py-3 rounded-lg hover:opacity-90 transition-opacity">
|
||
Open Full Pitch <ExternalLink className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SettingsApp({ wallpaper, setWallpaper, soundEnabled, setSoundEnabled, secretsUnlocked, theme, setTheme, savedLayouts, onSaveLayout, onLoadLayout, onDeleteLayout }: {
|
||
wallpaper: typeof WALLPAPERS[0];
|
||
setWallpaper: (w: typeof WALLPAPERS[0]) => void;
|
||
soundEnabled: boolean;
|
||
setSoundEnabled: (v: boolean) => void;
|
||
secretsUnlocked: boolean;
|
||
theme: ThemeSettings;
|
||
setTheme: (t: ThemeSettings) => void;
|
||
savedLayouts: DesktopLayout[];
|
||
onSaveLayout: (name: string) => void;
|
||
onLoadLayout: (layout: DesktopLayout) => void;
|
||
onDeleteLayout: (name: string) => void;
|
||
}) {
|
||
const [layoutName, setLayoutName] = useState('');
|
||
const [activeTab, setActiveTab] = useState<'appearance' | 'layouts' | 'system'>('appearance');
|
||
const visibleWallpapers = WALLPAPERS.filter(wp => !wp.secret || secretsUnlocked);
|
||
|
||
return (
|
||
<div className="h-full bg-slate-950 flex flex-col">
|
||
<div className="flex border-b border-white/10">
|
||
{(['appearance', 'layouts', 'system'] as const).map(tab => (
|
||
<button
|
||
key={tab}
|
||
onClick={() => setActiveTab(tab)}
|
||
className={`px-4 py-3 text-sm font-mono uppercase tracking-wider transition-colors ${
|
||
activeTab === tab ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-white/50 hover:text-white/80'
|
||
}`}
|
||
>
|
||
{tab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex-1 p-6 overflow-auto">
|
||
{activeTab === 'appearance' && (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">
|
||
Accent Color
|
||
</div>
|
||
<div className="flex gap-2 flex-wrap">
|
||
{ACCENT_COLORS.map(color => (
|
||
<button
|
||
key={color.id}
|
||
onClick={() => setTheme({ ...theme, accentColor: color.id })}
|
||
className={`w-10 h-10 rounded-full transition-all ${color.bg} ${
|
||
theme.accentColor === color.id ? 'ring-2 ring-white ring-offset-2 ring-offset-slate-950 scale-110' : 'hover:scale-105'
|
||
}`}
|
||
title={color.name}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">
|
||
Theme Mode
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{(['dark', 'light', 'system'] as const).map(mode => (
|
||
<button
|
||
key={mode}
|
||
onClick={() => setTheme({ ...theme, mode })}
|
||
className={`px-4 py-2 rounded-lg text-sm font-mono capitalize transition-colors ${
|
||
theme.mode === mode ? 'bg-cyan-500 text-white' : 'bg-white/10 text-white/70 hover:bg-white/20'
|
||
}`}
|
||
>
|
||
{mode}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="text-white/30 text-xs mt-2">Note: Light mode is preview only</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">
|
||
Wallpaper {secretsUnlocked && <span className="text-yellow-400 ml-2">✨ UNLOCKED</span>}
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{visibleWallpapers.map(wp => (
|
||
<button
|
||
key={wp.id}
|
||
onClick={() => setWallpaper(wp)}
|
||
className={`p-3 rounded-lg border transition-colors ${wallpaper.id === wp.id ? 'border-cyan-500 bg-cyan-500/10' : wp.secret ? 'border-yellow-500/30 hover:border-yellow-500/50' : 'border-white/10 hover:border-white/20'}`}
|
||
>
|
||
<div className="w-full h-12 rounded mb-2" style={{ background: wp.bg }} />
|
||
<div className="text-xs text-white/80">{wp.name}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">
|
||
Transparency
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="50"
|
||
max="100"
|
||
value={theme.transparency}
|
||
onChange={e => setTheme({ ...theme, transparency: parseInt(e.target.value) })}
|
||
className="w-full accent-cyan-500"
|
||
/>
|
||
<div className="flex justify-between text-xs text-white/40 mt-1">
|
||
<span>More glass</span>
|
||
<span>{theme.transparency}%</span>
|
||
<span>More solid</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'layouts' && (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">Save Current Layout</div>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={layoutName}
|
||
onChange={e => setLayoutName(e.target.value)}
|
||
placeholder="Layout name..."
|
||
className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:border-cyan-500 focus:outline-none"
|
||
/>
|
||
<button
|
||
onClick={() => { if (layoutName.trim()) { onSaveLayout(layoutName.trim()); setLayoutName(''); }}}
|
||
className="px-4 py-2 bg-cyan-500 text-white rounded-lg text-sm hover:bg-cyan-400 transition-colors"
|
||
>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="text-xs text-white/50 uppercase tracking-wider mb-3">Saved Layouts</div>
|
||
{savedLayouts.length === 0 ? (
|
||
<div className="text-white/30 text-sm p-4 text-center bg-white/5 rounded-lg">
|
||
No saved layouts yet. Arrange your windows and save a layout above.
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{savedLayouts.map(layout => (
|
||
<div key={layout.name} className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10">
|
||
<div>
|
||
<div className="text-white text-sm font-mono">{layout.name}</div>
|
||
<div className="text-white/40 text-xs">{layout.windows.length} windows • Desktop {layout.desktop + 1}</div>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={() => onLoadLayout(layout)} className="px-3 py-1 bg-cyan-500/20 text-cyan-400 rounded text-xs hover:bg-cyan-500/30">
|
||
Load
|
||
</button>
|
||
<button onClick={() => onDeleteLayout(layout.name)} className="px-3 py-1 bg-red-500/20 text-red-400 rounded text-xs hover:bg-red-500/30">
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'system' && (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
<div>
|
||
<div className="text-white text-sm">Sound Effects</div>
|
||
<div className="text-white/50 text-xs">UI interaction feedback</div>
|
||
</div>
|
||
<button onClick={() => setSoundEnabled(!soundEnabled)} className={`w-10 h-6 rounded-full relative transition-colors ${soundEnabled ? 'bg-cyan-500' : 'bg-slate-600'}`}>
|
||
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${soundEnabled ? 'right-1' : 'left-1'}`} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-3 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
|
||
<div className="text-cyan-400 text-sm font-mono">AeThex OS v3.0.0</div>
|
||
<div className="text-white/50 text-xs mt-1">Build 2025.12.17</div>
|
||
</div>
|
||
|
||
{!secretsUnlocked && (
|
||
<div className="p-3 bg-white/5 border border-white/10 rounded-lg text-center">
|
||
<div className="text-white/40 text-xs font-mono">🔒 Hidden features available...</div>
|
||
<div className="text-white/20 text-[10px] mt-1">Try the Konami Code or find secrets in Terminal</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NetworkMapApp() {
|
||
const { data: architects } = useQuery({
|
||
queryKey: ['os-network-architects'],
|
||
queryFn: () => dataService.fetchAllProfiles(),
|
||
});
|
||
|
||
const nodes = architects?.slice(0, 8) || [];
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto relative">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Network className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Network Map</h2>
|
||
</div>
|
||
|
||
<div className="relative min-h-[400px] md:h-[calc(100%-60px)] flex items-center justify-center py-8">
|
||
<div className="absolute inset-0 opacity-20">
|
||
<svg className="w-full h-full">
|
||
{nodes.map((_: any, i: number) => {
|
||
const angle = (i / nodes.length) * 2 * Math.PI;
|
||
const x1 = 50 + 35 * Math.cos(angle);
|
||
const y1 = 50 + 35 * Math.sin(angle);
|
||
return (
|
||
<line key={i} x1="50%" y1="50%" x2={`${x1}%`} y2={`${y1}%`} stroke="#22d3ee" strokeWidth="1" strokeDasharray="4,4" className="animate-pulse" />
|
||
);
|
||
})}
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/30 z-10">
|
||
<Server className="w-8 h-8 text-white" />
|
||
</div>
|
||
|
||
{nodes.map((node: any, i: number) => {
|
||
const angle = (i / nodes.length) * 2 * Math.PI - Math.PI / 2;
|
||
const radius = 140;
|
||
const x = Math.cos(angle) * radius;
|
||
const y = Math.sin(angle) * radius;
|
||
return (
|
||
<motion.div
|
||
key={node.id}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: i * 0.1 }}
|
||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||
style={{ transform: `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))` }}
|
||
>
|
||
<div className="flex flex-col items-center">
|
||
<div className={`w-12 h-12 rounded-full flex items-center justify-center ${node.verified ? 'bg-green-500/20 border-2 border-green-500' : 'bg-cyan-500/20 border border-cyan-500/50'}`}>
|
||
<User className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div className="mt-1 text-xs text-white/70 font-mono truncate max-w-[80px]">{node.username}</div>
|
||
<div className="text-[10px] text-cyan-400">Lv.{node.level}</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="absolute bottom-4 left-4 text-xs text-white/40 font-mono">
|
||
{nodes.length} nodes connected
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MetricsDashboardApp() {
|
||
const { data: metrics, isLoading } = useQuery({
|
||
queryKey: ['os-dashboard-metrics'],
|
||
queryFn: () => dataService.fetchMetrics(),
|
||
refetchInterval: 30000,
|
||
});
|
||
|
||
const [animatedValues, setAnimatedValues] = useState({ profiles: 0, projects: 0, xp: 0 });
|
||
|
||
useEffect(() => {
|
||
if (metrics) {
|
||
const duration = 1000;
|
||
const steps = 20;
|
||
const interval = duration / steps;
|
||
let step = 0;
|
||
const timer = setInterval(() => {
|
||
step++;
|
||
const progress = step / steps;
|
||
setAnimatedValues({
|
||
profiles: Math.round(progress * (metrics.totalProfiles || 0)),
|
||
projects: Math.round(progress * (metrics.totalProjects || 0)),
|
||
xp: Math.round(progress * (metrics.totalXP || 0)),
|
||
});
|
||
if (step >= steps) clearInterval(timer);
|
||
}, interval);
|
||
return () => clearInterval(timer);
|
||
}
|
||
}, [metrics]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Activity className="w-5 h-5 text-cyan-400" />
|
||
<Skeleton className="h-6 w-32" />
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3 md:gap-4">
|
||
<Skeleton className="h-24 md:h-28 rounded-lg" />
|
||
<Skeleton className="h-24 md:h-28 rounded-lg" />
|
||
<Skeleton className="h-24 md:h-28 rounded-lg" />
|
||
<Skeleton className="h-24 md:h-28 rounded-lg" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Activity className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Live Metrics</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-4">
|
||
<div className="bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 rounded-lg p-3 md:p-4 border border-cyan-500/30">
|
||
<div className="text-xs text-cyan-400 uppercase">Architects</div>
|
||
<div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.profiles}</div>
|
||
<div className="flex items-center gap-1 text-green-400 text-xs mt-1">
|
||
<ArrowUp className="w-3 h-3" /> +{Math.floor(Math.random() * 5) + 1} today
|
||
</div>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-purple-500/20 to-purple-500/5 rounded-lg p-3 md:p-4 border border-purple-500/30">
|
||
<div className="text-xs text-purple-400 uppercase">Projects</div>
|
||
<div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.projects}</div>
|
||
<div className="flex items-center gap-1 text-green-400 text-xs mt-1">
|
||
<TrendingUp className="w-3 h-3" /> Active
|
||
</div>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-green-500/20 to-green-500/5 rounded-lg p-3 md:p-4 border border-green-500/30">
|
||
<div className="text-xs text-green-400 uppercase">Total XP</div>
|
||
<div className="text-2xl md:text-3xl font-bold text-white font-mono">{animatedValues.xp.toLocaleString()}</div>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-yellow-500/20 to-yellow-500/5 rounded-lg p-3 md:p-4 border border-yellow-500/30">
|
||
<div className="text-xs text-yellow-400 uppercase">Online</div>
|
||
<div className="text-2xl md:text-3xl font-bold text-white font-mono">{metrics?.onlineUsers || 0}</div>
|
||
<div className="flex items-center gap-1 text-yellow-400 text-xs mt-1">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" /> Live
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white/5 rounded-lg p-3 md:p-4 border border-white/10">
|
||
<div className="text-xs text-white/50 uppercase mb-3">Network Activity</div>
|
||
<div className="flex items-end gap-1 h-24">
|
||
{Array.from({ length: 20 }).map((_, i) => {
|
||
const height = Math.random() * 80 + 20;
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ height: 0 }}
|
||
animate={{ height: `${height}%` }}
|
||
transition={{ delay: i * 0.05, duration: 0.3 }}
|
||
className="flex-1 bg-gradient-to-t from-cyan-500 to-purple-500 rounded-t"
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CodeEditorApp() {
|
||
const defaultCode = `// AeThex Smart Contract
|
||
import { Aegis } from '@aethex/core';
|
||
|
||
interface Architect {
|
||
id: string;
|
||
level: number;
|
||
xp: number;
|
||
verified: boolean;
|
||
}
|
||
|
||
class MetaverseRegistry {
|
||
private architects: Map<string, Architect>;
|
||
|
||
constructor() {
|
||
this.architects = new Map();
|
||
Aegis.initialize();
|
||
}
|
||
|
||
async registerArchitect(
|
||
address: string,
|
||
credentials: Credential[]
|
||
): Promise<Architect> {
|
||
const architect: Architect = {
|
||
id: generateId(),
|
||
level: 1,
|
||
xp: 0,
|
||
verified: false
|
||
};
|
||
|
||
await Aegis.verify(architect);
|
||
this.architects.set(address, architect);
|
||
|
||
return architect;
|
||
}
|
||
}`;
|
||
|
||
const [code, setCode] = useState(defaultCode);
|
||
const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
|
||
const [showAutocomplete, setShowAutocomplete] = useState(false);
|
||
const [autocompleteItems, setAutocompleteItems] = useState<string[]>([]);
|
||
const [fileName, setFileName] = useState('untitled.ts');
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
|
||
const handleSaveFile = async () => {
|
||
try {
|
||
await tauriNative.saveFile(fileName, code);
|
||
} catch (err) {
|
||
console.error('Save failed:', err);
|
||
}
|
||
};
|
||
|
||
const handleOpenFile = async () => {
|
||
try {
|
||
const result = await tauriNative.openFile();
|
||
if (result) {
|
||
setCode(result.content);
|
||
// Extract filename from path
|
||
const pathParts = result.path.split(/[\\/]/);
|
||
setFileName(pathParts[pathParts.length - 1] || 'untitled.ts');
|
||
}
|
||
} catch (err) {
|
||
console.error('Open failed:', err);
|
||
}
|
||
};
|
||
|
||
const keywords = ['const', 'let', 'var', 'function', 'class', 'interface', 'type', 'async', 'await',
|
||
'return', 'import', 'export', 'from', 'if', 'else', 'for', 'while', 'switch', 'case', 'break',
|
||
'new', 'this', 'super', 'extends', 'implements', 'private', 'public', 'protected', 'static'];
|
||
|
||
const snippets = ['console.log()', 'Aegis.verify()', 'Aegis.initialize()', 'generateId()',
|
||
'Promise<>', 'Map<>', 'Array<>', 'string', 'number', 'boolean'];
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Tab') {
|
||
e.preventDefault();
|
||
const start = textareaRef.current?.selectionStart || 0;
|
||
const end = textareaRef.current?.selectionEnd || 0;
|
||
setCode(code.substring(0, start) + ' ' + code.substring(end));
|
||
setTimeout(() => {
|
||
if (textareaRef.current) {
|
||
textareaRef.current.selectionStart = textareaRef.current.selectionEnd = start + 2;
|
||
}
|
||
}, 0);
|
||
} else if (e.ctrlKey && e.key === ' ') {
|
||
e.preventDefault();
|
||
const cursorIndex = textareaRef.current?.selectionStart || 0;
|
||
const textBefore = code.substring(0, cursorIndex);
|
||
const lastWord = textBefore.split(/[\s\n\(\)\{\}\[\];:,]/).pop() || '';
|
||
const matches = [...keywords, ...snippets].filter(k => k.toLowerCase().startsWith(lastWord.toLowerCase()));
|
||
setAutocompleteItems(matches.slice(0, 8));
|
||
setShowAutocomplete(matches.length > 0);
|
||
} else if (e.key === 'Escape') {
|
||
setShowAutocomplete(false);
|
||
}
|
||
};
|
||
|
||
const insertAutocomplete = (item: string) => {
|
||
const cursorIndex = textareaRef.current?.selectionStart || 0;
|
||
const textBefore = code.substring(0, cursorIndex);
|
||
const lastWordMatch = textBefore.match(/[\w]+$/);
|
||
const lastWordStart = lastWordMatch ? cursorIndex - lastWordMatch[0].length : cursorIndex;
|
||
setCode(code.substring(0, lastWordStart) + item + code.substring(cursorIndex));
|
||
setShowAutocomplete(false);
|
||
textareaRef.current?.focus();
|
||
};
|
||
|
||
const updateCursorPos = () => {
|
||
if (!textareaRef.current) return;
|
||
const pos = textareaRef.current.selectionStart;
|
||
const lines = code.substring(0, pos).split('\n');
|
||
setCursorPos({ line: lines.length, col: (lines[lines.length - 1]?.length || 0) + 1 });
|
||
};
|
||
|
||
const highlightLine = (line: string) => {
|
||
const parts: { text: string; color: string }[] = [];
|
||
let remaining = line;
|
||
|
||
const patterns = [
|
||
{ regex: /^(\/\/.*)$/, color: 'text-green-500' },
|
||
{ regex: /^(\s*)(import|export|from|as)(\s)/, color: 'text-purple-400', capture: 2 },
|
||
{ regex: /(interface|class|type|enum)(\s+)(\w+)/, colors: ['text-purple-400', '', 'text-yellow-300'] },
|
||
{ regex: /(const|let|var|function|async|await|return|if|else|for|while|new|this|private|public|static)/, color: 'text-purple-400' },
|
||
{ regex: /('[^']*'|"[^"]*"|`[^`]*`)/, color: 'text-orange-400' },
|
||
{ regex: /(\d+)/, color: 'text-cyan-300' },
|
||
{ regex: /(@\w+)/, color: 'text-yellow-400' },
|
||
];
|
||
|
||
if (line.trim().startsWith('//')) {
|
||
return [{ text: line, color: 'text-green-500' }];
|
||
}
|
||
|
||
let result = line;
|
||
result = result.replace(/(import|export|from|as|interface|class|type|const|let|var|function|async|await|return|if|else|for|while|new|this|private|public|static|extends|implements)\b/g,
|
||
'<span class="text-purple-400">$1</span>');
|
||
result = result.replace(/('[^']*'|"[^"]*"|`[^`]*`)/g, '<span class="text-orange-400">$1</span>');
|
||
result = result.replace(/\b(\d+)\b/g, '<span class="text-cyan-300">$1</span>');
|
||
result = result.replace(/(@\w+)/g, '<span class="text-yellow-400">$1</span>');
|
||
result = result.replace(/\b(string|number|boolean|void|any|never|unknown|null|undefined|true|false)\b/g,
|
||
'<span class="text-cyan-400">$1</span>');
|
||
result = result.replace(/\b([A-Z]\w*)\b(?!<span)/g, '<span class="text-yellow-300">$1</span>');
|
||
|
||
return result;
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-[#1e1e1e] flex flex-col">
|
||
<div className="flex items-center gap-2 px-2 md:px-4 py-2 bg-[#252526] border-b border-[#3c3c3c] overflow-x-auto">
|
||
<div className="flex items-center gap-2 px-2 md:px-3 py-1 bg-[#1e1e1e] rounded-t border-t-2 border-cyan-500 shrink-0">
|
||
<Code2 className="w-3 h-3 md:w-4 md:h-4 text-cyan-400" />
|
||
<span className="text-xs md:text-sm text-white/80">{fileName}</span>
|
||
<span className="text-white/30 text-xs">~</span>
|
||
</div>
|
||
<div className="ml-auto flex items-center gap-1 md:gap-2 shrink-0">
|
||
<button
|
||
onClick={handleOpenFile}
|
||
className="text-[10px] md:text-xs text-white/50 hover:text-white px-1.5 md:px-2 py-1 bg-white/5 hover:bg-white/10 rounded flex items-center gap-1 transition-colors"
|
||
title="Open File"
|
||
>
|
||
<FolderOpen className="w-3 h-3" />
|
||
<span className="hidden sm:inline">Open</span>
|
||
</button>
|
||
<button
|
||
onClick={handleSaveFile}
|
||
className="text-[10px] md:text-xs text-white/50 hover:text-white px-1.5 md:px-2 py-1 bg-white/5 hover:bg-white/10 rounded flex items-center gap-1 transition-colors"
|
||
title="Save File"
|
||
>
|
||
<Save className="w-3 h-3" />
|
||
<span className="hidden sm:inline">Save</span>
|
||
</button>
|
||
<button className="text-[10px] md:text-xs text-white/50 hover:text-white/80 px-1.5 md:px-2 py-1 bg-white/5 rounded">Run</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-hidden relative touch-pan-x touch-pan-y">
|
||
<div className="absolute inset-0 flex">
|
||
<div className="w-8 md:w-12 bg-[#1e1e1e] border-r border-[#3c3c3c] pt-2 md:pt-4 text-right pr-1 md:pr-2 text-white/30 text-[10px] md:text-sm font-mono select-none overflow-hidden">
|
||
{code.split('\n').map((_, i) => (
|
||
<div key={i} className={`h-[1.5rem] ${cursorPos.line === i + 1 ? 'text-white/60' : ''}`}>{i + 1}</div>
|
||
))}
|
||
</div>
|
||
<div className="flex-1 relative">
|
||
<div className="absolute inset-0 p-2 md:p-4 font-mono text-xs md:text-sm leading-5 md:leading-6 pointer-events-none overflow-auto whitespace-pre" style={{ color: '#d4d4d4' }}>
|
||
{code.split('\n').map((line, i) => (
|
||
<div key={i} className={`h-5 md:h-6 ${cursorPos.line === i + 1 ? 'bg-white/5' : ''}`}
|
||
dangerouslySetInnerHTML={{ __html: highlightLine(line) || ' ' }} />
|
||
))}
|
||
</div>
|
||
<textarea
|
||
ref={textareaRef}
|
||
value={code}
|
||
onChange={e => setCode(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
onKeyUp={updateCursorPos}
|
||
onClick={updateCursorPos}
|
||
className="absolute inset-0 p-2 md:p-4 font-mono text-xs md:text-sm leading-5 md:leading-6 bg-transparent text-transparent caret-white resize-none focus:outline-none"
|
||
spellCheck={false}
|
||
/>
|
||
{showAutocomplete && autocompleteItems.length > 0 && (
|
||
<div className="absolute bg-[#252526] border border-[#3c3c3c] rounded shadow-xl z-50" style={{ top: cursorPos.line * 24 + 16, left: 60 }}>
|
||
{autocompleteItems.map((item, i) => (
|
||
<button
|
||
key={item}
|
||
onClick={() => insertAutocomplete(item)}
|
||
className="w-full px-3 py-1 text-left text-sm font-mono text-white/80 hover:bg-cyan-500/20 flex items-center gap-2"
|
||
>
|
||
<span className="text-purple-400 text-xs">fn</span>
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-2 md:px-4 py-1.5 md:py-2 bg-[#007acc] text-white text-[10px] md:text-xs flex items-center gap-2 md:gap-4 overflow-x-auto">
|
||
<span>TypeScript</span>
|
||
<span>UTF-8</span>
|
||
<span className="hidden sm:inline">Spaces: 2</span>
|
||
<span className="ml-auto shrink-0">Ln {cursorPos.line}, Col {cursorPos.col}</span>
|
||
<span className="text-white/60 hidden md:inline">Ctrl+Space for suggestions</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NewsFeedApp() {
|
||
const { data: activities, isLoading, refetch } = useQuery({
|
||
queryKey: ['activity-feed'],
|
||
queryFn: () => dataService.fetchActivities(20),
|
||
});
|
||
|
||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||
|
||
const handleRefresh = async () => {
|
||
setIsRefreshing(true);
|
||
await refetch();
|
||
setTimeout(() => setIsRefreshing(false), 500);
|
||
};
|
||
|
||
const formatTime = (timestamp: string) => {
|
||
const date = new Date(timestamp);
|
||
const now = new Date();
|
||
const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
|
||
if (diff < 60) return 'Just now';
|
||
if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
|
||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||
return `${Math.floor(diff / 86400)}d ago`;
|
||
};
|
||
|
||
const getEventType = (eventType: string) => {
|
||
if (eventType.includes('achievement') || eventType.includes('unlock')) return 'success';
|
||
if (eventType.includes('error') || eventType.includes('fail')) return 'warning';
|
||
return 'info';
|
||
};
|
||
|
||
const formatEventTitle = (event: any) => {
|
||
if (event.event_type === 'page_view') return `User viewed ${event.payload?.page || 'page'}`;
|
||
if (event.event_type === 'app_open') return `${event.payload?.app || 'App'} opened`;
|
||
if (event.event_type === 'achievement_unlock') return `Achievement unlocked: ${event.payload?.name || 'unknown'}`;
|
||
return event.event_type.replace(/_/g, ' ');
|
||
};
|
||
|
||
const newsItems = activities?.length ? activities.map((a: any) => ({
|
||
time: formatTime(a.timestamp),
|
||
title: formatEventTitle(a),
|
||
type: getEventType(a.event_type),
|
||
})) : [
|
||
{ time: '2 min ago', title: 'New architect joined the network', type: 'info' },
|
||
{ time: '15 min ago', title: 'Project "Genesis" reached milestone', type: 'success' },
|
||
{ time: '1 hour ago', title: 'AEGIS blocked 3 intrusion attempts', type: 'warning' },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
|
||
<Newspaper className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">News Feed</h2>
|
||
<button
|
||
onClick={handleRefresh}
|
||
disabled={isRefreshing}
|
||
className="ml-auto p-1.5 hover:bg-white/10 rounded transition-colors disabled:opacity-50"
|
||
>
|
||
<RefreshCw className={`w-4 h-4 text-cyan-400 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||
</button>
|
||
</div>
|
||
{isLoading ? (
|
||
<div className="flex-1 flex items-center justify-center">
|
||
<Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
|
||
</div>
|
||
) : (
|
||
<div className="flex-1 overflow-auto p-3 md:p-4 space-y-3">
|
||
{newsItems.map((item: any, i: number) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: i * 0.05 }}
|
||
className="p-3 bg-white/5 rounded-lg border border-white/10 hover:border-cyan-500/30 active:border-cyan-500/50 transition-colors"
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<div className={`w-2 h-2 mt-2 rounded-full shrink-0 ${item.type === 'success' ? 'bg-green-500' : item.type === 'warning' ? 'bg-yellow-500' : 'bg-cyan-500'}`} />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-white text-sm line-clamp-2">{item.title}</div>
|
||
<div className="text-white/40 text-xs mt-1">{item.time}</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ArcadeApp() {
|
||
const [snake, setSnake] = useState([{ x: 10, y: 10 }]);
|
||
const [food, setFood] = useState({ x: 15, y: 15 });
|
||
const [direction, setDirection] = useState({ x: 1, y: 0 });
|
||
const [gameOver, setGameOver] = useState(false);
|
||
const [score, setScore] = useState(0);
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!isPlaying || gameOver) return;
|
||
const interval = setInterval(() => {
|
||
setSnake(prev => {
|
||
const newHead = { x: prev[0].x + direction.x, y: prev[0].y + direction.y };
|
||
if (newHead.x < 0 || newHead.x >= 20 || newHead.y < 0 || newHead.y >= 20) {
|
||
setGameOver(true);
|
||
setIsPlaying(false);
|
||
return prev;
|
||
}
|
||
if (prev.some(s => s.x === newHead.x && s.y === newHead.y)) {
|
||
setGameOver(true);
|
||
setIsPlaying(false);
|
||
return prev;
|
||
}
|
||
const newSnake = [newHead, ...prev];
|
||
if (newHead.x === food.x && newHead.y === food.y) {
|
||
setScore(s => s + 10);
|
||
setFood({ x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) });
|
||
} else {
|
||
newSnake.pop();
|
||
}
|
||
return newSnake;
|
||
});
|
||
}, 150);
|
||
return () => clearInterval(interval);
|
||
}, [isPlaying, gameOver, direction, food]);
|
||
|
||
useEffect(() => {
|
||
const handleKey = (e: KeyboardEvent) => {
|
||
if (!isPlaying) return;
|
||
switch (e.key) {
|
||
case 'ArrowUp': if (direction.y !== 1) setDirection({ x: 0, y: -1 }); break;
|
||
case 'ArrowDown': if (direction.y !== -1) setDirection({ x: 0, y: 1 }); break;
|
||
case 'ArrowLeft': if (direction.x !== 1) setDirection({ x: -1, y: 0 }); break;
|
||
case 'ArrowRight': if (direction.x !== -1) setDirection({ x: 1, y: 0 }); break;
|
||
}
|
||
};
|
||
window.addEventListener('keydown', handleKey);
|
||
return () => window.removeEventListener('keydown', handleKey);
|
||
}, [isPlaying, direction]);
|
||
|
||
const startGame = () => {
|
||
setSnake([{ x: 10, y: 10 }]);
|
||
setFood({ x: 15, y: 15 });
|
||
setDirection({ x: 1, y: 0 });
|
||
setGameOver(false);
|
||
setScore(0);
|
||
setIsPlaying(true);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 flex flex-col items-center overflow-auto">
|
||
<div className="flex items-center gap-2 mb-3 md:mb-4">
|
||
<Gamepad2 className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Cyber Snake</h2>
|
||
</div>
|
||
|
||
<div className="text-cyan-400 font-mono text-sm md:text-base mb-2">Score: {score}</div>
|
||
|
||
<div className="grid gap-px bg-cyan-900/20 border border-cyan-500/30 rounded" style={{ gridTemplateColumns: 'repeat(20, 12px)' }}>
|
||
{Array.from({ length: 400 }).map((_, i) => {
|
||
const x = i % 20;
|
||
const y = Math.floor(i / 20);
|
||
const isSnake = snake.some(s => s.x === x && s.y === y);
|
||
const isHead = snake[0]?.x === x && snake[0]?.y === y;
|
||
const isFood = food.x === x && food.y === y;
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`w-3 h-3 ${isHead ? 'bg-cyan-400' : isSnake ? 'bg-green-500' : isFood ? 'bg-red-500' : 'bg-slate-900'}`}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{!isPlaying && (
|
||
<button onClick={startGame} className="mt-3 md:mt-4 px-4 md:px-6 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-400 rounded-lg border border-cyan-500/50 transition-colors font-mono text-sm md:text-base">
|
||
{gameOver ? 'Play Again' : 'Start Game'}
|
||
</button>
|
||
)}
|
||
|
||
{isPlaying && (
|
||
<div className="mt-3 md:mt-4 grid grid-cols-3 gap-2 md:hidden">
|
||
<div />
|
||
<button
|
||
onClick={() => direction.y !== 1 && setDirection({ x: 0, y: -1 })}
|
||
className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
|
||
>
|
||
<ChevronUp className="w-5 h-5 text-cyan-400 mx-auto" />
|
||
</button>
|
||
<div />
|
||
<button
|
||
onClick={() => direction.x !== 1 && setDirection({ x: -1, y: 0 })}
|
||
className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
|
||
>
|
||
<ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-[270deg]" />
|
||
</button>
|
||
<div />
|
||
<button
|
||
onClick={() => direction.x !== -1 && setDirection({ x: 1, y: 0 })}
|
||
className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
|
||
>
|
||
<ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-90" />
|
||
</button>
|
||
<div />
|
||
<button
|
||
onClick={() => direction.y !== -1 && setDirection({ x: 0, y: 1 })}
|
||
className="p-3 bg-cyan-500/20 active:bg-cyan-500/40 rounded border border-cyan-500/50 transition-colors"
|
||
>
|
||
<ChevronUp className="w-5 h-5 text-cyan-400 mx-auto rotate-180" />
|
||
</button>
|
||
<div />
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-2 text-white/40 text-xs text-center">
|
||
<span className="md:inline hidden">Use arrow keys to move</span>
|
||
<span className="md:hidden">Tap buttons to move</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ProfilesApp() {
|
||
const { data: profiles, isLoading } = useQuery({
|
||
queryKey: ['os-profiles-list'],
|
||
queryFn: () => dataService.fetchAllProfiles(),
|
||
});
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
|
||
<Users className="w-5 h-5 text-cyan-400" />
|
||
<Skeleton className="h-5 md:h-6 w-32 md:w-40" />
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4 grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
|
||
{[1,2,3,4].map(i => (
|
||
<div key={i} className="bg-slate-800/50 rounded-lg p-3 md:p-4 border border-white/10">
|
||
<div className="flex items-center gap-3">
|
||
<Skeleton className="w-12 h-12 rounded-full shrink-0" />
|
||
<div className="flex-1 space-y-2">
|
||
<Skeleton className="h-4 w-24" />
|
||
<Skeleton className="h-3 w-16" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex items-center justify-between">
|
||
<Skeleton className="h-3 w-12" />
|
||
<Skeleton className="h-3 w-16" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
|
||
<Users className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Architect Profiles</h2>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4 grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
|
||
{profiles?.map((profile: any) => (
|
||
<motion.div
|
||
key={profile.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-4 border border-white/10 hover:border-cyan-500/30 active:border-cyan-500 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${profile.verified ? 'bg-green-500/20 border-2 border-green-500' : 'bg-cyan-500/20 border border-cyan-500/50'}`}>
|
||
<User className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="text-white font-mono truncate">{profile.username || 'Anonymous'}</div>
|
||
<div className="text-cyan-400 text-xs">Level {profile.level}</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex items-center justify-between text-xs">
|
||
<span className="text-white/50">{profile.xp} XP</span>
|
||
{profile.verified && <span className="text-green-400 flex items-center gap-1"><Shield className="w-3 h-3" /> Verified</span>}
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NetworkNeighborhoodApp({ openIframeWindow }: { openIframeWindow?: (url: string, title: string) => void }) {
|
||
const { data: founders = [], isLoading } = useQuery({
|
||
queryKey: ['network-neighborhood'],
|
||
queryFn: () => dataService.fetchLeaderboard(),
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (!isLoading) {
|
||
dataService.trackEvent('directory_view', {
|
||
source: 'networkneighborhood',
|
||
payload: { count: founders.length },
|
||
timestamp: new Date().toISOString()
|
||
});
|
||
}
|
||
}, [isLoading]);
|
||
|
||
const reservedSlots = Array.from({ length: Math.max(0, 7 - founders.length) }, (_, i) => ({
|
||
id: `reserved-${i}`,
|
||
name: "[LOCKED - REQUIRES ARCHITECT ACCESS]",
|
||
role: "locked",
|
||
isReserved: true,
|
||
}));
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="min-h-full bg-black flex flex-col font-mono">
|
||
<div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
|
||
<Network className="w-4 h-4 text-cyan-400" />
|
||
<span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">Network Neighborhood</span>
|
||
</div>
|
||
<div className="flex-1 p-4 flex items-center justify-center">
|
||
<Loader2 className="w-6 h-6 text-cyan-400 animate-spin" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-full bg-black flex flex-col font-mono">
|
||
<div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
|
||
<Network className="w-4 h-4 text-cyan-400" />
|
||
<span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">Network Neighborhood</span>
|
||
<span className="text-cyan-500/40 text-xs ml-auto">{founders.length} nodes online</span>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-2 space-y-1">
|
||
{founders.map((architect: any, idx: number) => (
|
||
<motion.div
|
||
key={architect.id}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: idx * 0.05 }}
|
||
className="flex items-center justify-between py-2 px-2 md:px-3 border-l-2 border-cyan-500/40 bg-cyan-500/5 hover:bg-cyan-500/10 active:bg-cyan-500/15 transition-colors cursor-pointer"
|
||
>
|
||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||
<span className="text-cyan-500/60 text-xs shrink-0">[{String(idx + 1).padStart(3, '0')}]</span>
|
||
<div className="min-w-0">
|
||
<span className="text-white font-bold text-xs md:text-sm truncate block">{architect.name}</span>
|
||
<span className="text-cyan-500/50 text-xs hidden sm:inline">— {architect.role}</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-1.5 md:gap-2 shrink-0">
|
||
<span className="text-xs text-cyan-500/40">Lv.{architect.level || 1}</span>
|
||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
{reservedSlots.map((slot: any, idx: number) => (
|
||
<div
|
||
key={slot.id}
|
||
className="flex items-center justify-between py-2 px-2 md:px-3 border-l-2 border-yellow-500/30 bg-yellow-500/5 hover:bg-yellow-500/10 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
|
||
<span className="text-yellow-500/50 text-xs shrink-0">[{String(founders.length + idx + 1).padStart(3, '0')}]</span>
|
||
<span className="text-yellow-500/70 text-xs md:text-sm truncate">{slot.name}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
|
||
className="text-xs text-yellow-500 hover:text-yellow-400 transition-colors uppercase tracking-wider flex items-center gap-1 shrink-0"
|
||
>
|
||
<span className="hidden sm:inline">Join</span> <ExternalLink className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="p-2 border-t border-cyan-500/20 text-center">
|
||
<span className="text-cyan-500/40 text-xs">AETHEX.NETWORK // PUBLIC DIRECTORY</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FoundryApp({ openIframeWindow }: { openIframeWindow?: (url: string, title: string) => void }) {
|
||
const [viewMode, setViewMode] = useState<'info' | 'enroll'>('info');
|
||
const [promoCode, setPromoCode] = useState('');
|
||
const [promoApplied, setPromoApplied] = useState(false);
|
||
|
||
const basePrice = 500;
|
||
const discount = promoApplied && promoCode.toUpperCase() === 'TERMINAL10' ? 0.10 : 0;
|
||
const finalPrice = basePrice * (1 - discount);
|
||
|
||
useEffect(() => {
|
||
dataService.trackEvent('foundry_open', {
|
||
source: 'foundry-app',
|
||
timestamp: new Date().toISOString()
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-full bg-gradient-to-br from-yellow-950 to-black flex flex-col font-mono">
|
||
<div className="flex items-center justify-between p-2.5 md:p-3 border-b border-yellow-500/30 bg-yellow-500/5">
|
||
<div className="flex items-center gap-2">
|
||
<Award className="w-4 h-4 text-yellow-400" />
|
||
<span className="text-yellow-400 text-xs md:text-sm uppercase tracking-wider">FOUNDRY.EXE</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 md:gap-2">
|
||
<button
|
||
onClick={() => setViewMode('info')}
|
||
className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'info' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
|
||
>
|
||
Info
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('enroll')}
|
||
className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'enroll' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
|
||
>
|
||
Enroll
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{viewMode === 'info' ? (
|
||
<div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 text-center overflow-auto">
|
||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center mb-4 md:mb-6">
|
||
<Award className="w-8 h-8 md:w-10 md:h-10 text-yellow-400" />
|
||
</div>
|
||
<h2 className="text-xl md:text-2xl font-bold text-yellow-400 mb-2">The Foundry</h2>
|
||
<p className="text-white/70 text-xs md:text-sm mb-4 md:mb-6 max-w-xs px-4 md:px-0">
|
||
Train to become a certified Metaverse Architect. Learn the protocols. Join the network.
|
||
</p>
|
||
<div className="space-y-2 text-left text-xs md:text-sm text-white/60 mb-4 md:mb-6">
|
||
<div className="flex items-center gap-2"><Zap className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> 8-week intensive curriculum</div>
|
||
<div className="flex items-center gap-2"><Shield className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> AeThex Passport certification</div>
|
||
<div className="flex items-center gap-2"><Users className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> Join the architect network</div>
|
||
</div>
|
||
<button
|
||
onClick={() => setViewMode('enroll')}
|
||
className="px-4 md:px-6 py-2.5 md:py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-bold text-sm md:text-base uppercase tracking-wider transition-colors flex items-center gap-2"
|
||
>
|
||
Enroll Now <ChevronRight className="w-4 h-4" />
|
||
</button>
|
||
<div className="mt-3 md:mt-4 text-xs text-yellow-500/50">
|
||
Hint: Check the terminal for secret codes
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex-1 flex flex-col p-6 overflow-auto">
|
||
<div className="max-w-sm mx-auto w-full space-y-6">
|
||
<div className="text-center">
|
||
<h3 className="text-xl font-bold text-yellow-400 mb-1">Architect Bootcamp</h3>
|
||
<p className="text-white/50 text-sm">Cohort Starting Soon</p>
|
||
</div>
|
||
|
||
<div className="border border-yellow-500/30 bg-yellow-500/5 p-4 space-y-3">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-white/70">Bootcamp Access</span>
|
||
<span className="text-white">${basePrice}</span>
|
||
</div>
|
||
{promoApplied && discount > 0 && (
|
||
<div className="flex justify-between text-sm text-green-400">
|
||
<span>Discount (TERMINAL10)</span>
|
||
<span>-${(basePrice * discount).toFixed(0)}</span>
|
||
</div>
|
||
)}
|
||
<div className="border-t border-yellow-500/20 pt-2 flex justify-between font-bold">
|
||
<span className="text-white">Total</span>
|
||
<span className="text-yellow-400">${finalPrice.toFixed(0)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-white/70 text-xs uppercase tracking-wider">Promo Code</label>
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={promoCode}
|
||
onChange={(e) => setPromoCode(e.target.value)}
|
||
placeholder="Enter code"
|
||
className="flex-1 bg-black/50 border border-yellow-500/30 px-3 py-2 text-white text-sm focus:outline-none focus:border-yellow-500"
|
||
/>
|
||
<button
|
||
onClick={() => setPromoApplied(true)}
|
||
className="px-4 py-2 bg-yellow-500/20 text-yellow-400 text-sm hover:bg-yellow-500/30 transition-colors"
|
||
>
|
||
Apply
|
||
</button>
|
||
</div>
|
||
{promoApplied && promoCode.toUpperCase() === 'TERMINAL10' && (
|
||
<p className="text-green-400 text-xs">Code applied! 10% discount.</p>
|
||
)}
|
||
{promoApplied && promoCode && promoCode.toUpperCase() !== 'TERMINAL10' && (
|
||
<p className="text-red-400 text-xs">Invalid code. Try the terminal.</p>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
|
||
className="block w-full px-6 py-3 bg-yellow-500 hover:bg-yellow-400 text-black text-center font-bold uppercase tracking-wider transition-colors"
|
||
>
|
||
Complete Enrollment
|
||
</button>
|
||
|
||
<p className="text-center text-white/40 text-xs">
|
||
Opens enrollment form
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DevToolsApp({ openIframeWindow }: { openIframeWindow?: (url: string, title: string) => void }) {
|
||
const tools = [
|
||
{ name: "Documentation", desc: "API reference & guides", url: "https://aethex.dev", icon: <FileText className="w-5 h-5" /> },
|
||
{ name: "GitHub", desc: "Open source repositories", url: "https://github.com/aethex", icon: <Code2 className="w-5 h-5" /> },
|
||
{ name: "Status Page", desc: "System uptime & health", url: "#", icon: <Activity className="w-5 h-5" /> },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col font-mono">
|
||
<div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-purple-500/30 bg-purple-500/5">
|
||
<Code2 className="w-4 h-4 text-purple-400" />
|
||
<span className="text-purple-400 text-xs md:text-sm uppercase tracking-wider">Dev Tools</span>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4 space-y-2 md:space-y-3">
|
||
{tools.map((tool, idx) => (
|
||
<button
|
||
key={idx}
|
||
onClick={() => tool.url !== '#' && openIframeWindow?.(tool.url, tool.name)}
|
||
className="w-full flex items-center gap-3 md:gap-4 p-3 md:p-4 border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/10 active:bg-purple-500/15 transition-colors rounded-lg text-left"
|
||
>
|
||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400 shrink-0">
|
||
{tool.icon}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-white font-bold text-sm md:text-base truncate">{tool.name}</div>
|
||
<div className="text-purple-400/60 text-xs md:text-sm truncate">{tool.desc}</div>
|
||
</div>
|
||
<ExternalLink className="w-3 h-3 md:w-4 md:h-4 text-purple-400/40 shrink-0" />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function IntelApp() {
|
||
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
||
|
||
const files = [
|
||
{
|
||
name: "CROSS_PLATFORM_REPORT.TXT",
|
||
icon: <FileText className="w-4 h-4" />,
|
||
content: `// INTERCEPTED REPORT //
|
||
SOURCE: NAAVIK RESEARCH
|
||
SUBJECT: THE FUTURE OF CROSS-PLATFORM
|
||
|
||
========================================
|
||
KEY FINDINGS
|
||
========================================
|
||
|
||
1. The "Walled Gardens" (Sony/MSFT) are failing.
|
||
|
||
Platform holders are losing grip on exclusive
|
||
ecosystems. Users demand portability.
|
||
|
||
2. Users demand a "Neutral Identity Layer."
|
||
|
||
Cross-platform identity is the #1 requested
|
||
feature among gaming audiences globally.
|
||
|
||
3. Developers need "Direct-to-Consumer" infrastructure.
|
||
|
||
30% platform cuts are unsustainable. The next
|
||
generation of creators will build direct.
|
||
|
||
========================================
|
||
AETHEX ANALYSIS
|
||
========================================
|
||
|
||
This validates the AEGIS Protocol.
|
||
|
||
The industry is currently seeking the exact
|
||
solution we have already built:
|
||
|
||
- Neutral identity layer ✓ DEPLOYED
|
||
- Cross-platform passport ✓ DEPLOYED
|
||
- Direct-to-consumer infra ✓ IN PROGRESS
|
||
|
||
========================================
|
||
STATUS
|
||
========================================
|
||
|
||
- Passport: DEPLOYED
|
||
- CloudOS: DEPLOYED
|
||
- Foundry: OPEN FOR ENROLLMENT
|
||
|
||
// END TRANSMISSION //`
|
||
},
|
||
{
|
||
name: "MARKET_THESIS.TXT",
|
||
icon: <TrendingUp className="w-4 h-4" />,
|
||
content: `// MARKET THESIS //
|
||
CLASSIFICATION: INTERNAL
|
||
|
||
========================================
|
||
THE OPPORTUNITY
|
||
========================================
|
||
|
||
Total Addressable Market (TAM):
|
||
$200B+ Metaverse Economy by 2030
|
||
|
||
Our Position:
|
||
Identity & Infrastructure Layer
|
||
|
||
========================================
|
||
COMPETITIVE MOAT
|
||
========================================
|
||
|
||
1. First-mover on neutral identity
|
||
2. Architect certification network
|
||
3. .aethex TLD namespace ownership
|
||
4. Aegis security protocol
|
||
|
||
========================================
|
||
REVENUE MODEL
|
||
========================================
|
||
|
||
- Foundry Certifications: $500/architect
|
||
- Enterprise Licensing: TBD
|
||
- Namespace Reservations: TBD
|
||
|
||
// END DOCUMENT //`
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full bg-black flex flex-col font-mono">
|
||
<div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-amber-500/30 bg-amber-500/5">
|
||
<FolderSearch className="w-4 h-4 text-amber-400" />
|
||
<span className="text-amber-400 text-xs md:text-sm uppercase tracking-wider">INTEL</span>
|
||
<span className="text-amber-500/40 text-xs ml-auto">CLASSIFIED</span>
|
||
</div>
|
||
|
||
{!selectedFile ? (
|
||
<div className="flex-1 overflow-auto p-2.5 md:p-3 space-y-2">
|
||
<div className="text-amber-500/60 text-xs mb-3 border-b border-amber-500/20 pb-2">
|
||
📁 /intel/market_data/
|
||
</div>
|
||
{files.map((file, idx) => (
|
||
<motion.button
|
||
key={file.name}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
onClick={() => {
|
||
setSelectedFile(file.name);
|
||
try {
|
||
dataService.trackEvent('intel_open', {
|
||
source: 'intel-app',
|
||
payload: { file: file.name },
|
||
timestamp: new Date().toISOString()
|
||
});
|
||
} catch (err) {
|
||
if (import.meta.env.DEV) console.debug('[IntelApp] Track event failed:', err);
|
||
}
|
||
}}
|
||
className="w-full flex items-center gap-2 md:gap-3 py-2 px-2.5 md:px-3 border-l-2 border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/15 active:bg-amber-500/20 transition-colors text-left"
|
||
>
|
||
<span className="text-amber-400 shrink-0">{file.icon}</span>
|
||
<span className="text-white text-xs md:text-sm truncate">{file.name}</span>
|
||
<span className="text-amber-500/40 text-xs ml-auto shrink-0">OPEN</span>
|
||
</motion.button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex-1 flex flex-col overflow-hidden">
|
||
<div className="flex items-center gap-2 p-2 border-b border-amber-500/20 bg-amber-500/5">
|
||
<button
|
||
onClick={() => setSelectedFile(null)}
|
||
className="text-amber-400 hover:text-amber-300 text-xs uppercase"
|
||
>
|
||
← Back
|
||
</button>
|
||
<span className="text-white text-xs md:text-sm truncate">{selectedFile}</span>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4">
|
||
<pre className="text-green-400 text-[10px] md:text-xs whitespace-pre-wrap leading-relaxed">
|
||
{files.find(f => f.name === selectedFile)?.content}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DrivesApp({ openIframeWindow }: { openIframeWindow?: (url: string, title: string) => void }) {
|
||
const [selectedDrive, setSelectedDrive] = useState<string | null>(null);
|
||
|
||
const drives = [
|
||
{ id: 'C', name: 'Local System', size: '128 GB', used: '64 GB', status: 'online', icon: <HardDrive className="w-5 h-5" /> },
|
||
{ id: 'D', name: '.aethex TLD', size: '∞', used: '0 GB', status: 'not_mounted', icon: <Globe className="w-5 h-5" /> },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col font-mono">
|
||
<div className="flex items-center gap-2 p-2.5 md:p-3 border-b border-cyan-500/30 bg-cyan-500/5">
|
||
<HardDrive className="w-4 h-4 text-cyan-400" />
|
||
<span className="text-cyan-400 text-xs md:text-sm uppercase tracking-wider">My Computer</span>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-auto p-3 md:p-4">
|
||
<div className="text-white/50 text-xs mb-3 md:mb-4 uppercase tracking-wider">Storage Devices</div>
|
||
<div className="space-y-2 md:space-y-3">
|
||
{drives.map((drive) => (
|
||
<motion.div
|
||
key={drive.id}
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className={`border rounded-lg p-3 md:p-4 cursor-pointer transition-all ${
|
||
drive.status === 'online'
|
||
? 'border-cyan-500/30 bg-cyan-500/5 hover:bg-cyan-500/10'
|
||
: 'border-red-500/30 bg-red-500/5 hover:bg-red-500/10'
|
||
}`}
|
||
onClick={() => {
|
||
setSelectedDrive(drive.id);
|
||
if (drive.id === 'D') {
|
||
dataService.trackEvent('drive_d_open', {
|
||
source: 'drives-app',
|
||
timestamp: new Date().toISOString()
|
||
});
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-3 md:gap-4">
|
||
<div className={`w-10 h-10 md:w-12 md:h-12 rounded-lg flex items-center justify-center shrink-0 ${
|
||
drive.status === 'online' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-500/20 text-red-400'
|
||
}`}>
|
||
{drive.icon}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-white font-bold text-sm md:text-base">({drive.id}:)</span>
|
||
<span className="text-white/70 text-sm md:text-base truncate">{drive.name}</span>
|
||
</div>
|
||
<div className="text-xs mt-1">
|
||
{drive.status === 'online' ? (
|
||
<span className="text-cyan-400">{drive.used} / {drive.size} used</span>
|
||
) : (
|
||
<span className="text-red-400 flex items-center gap-1">
|
||
<Lock className="w-3 h-3" /> Not Mounted
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className={`w-2 h-2 rounded-full ${
|
||
drive.status === 'online' ? 'bg-green-500 animate-pulse' : 'bg-red-500'
|
||
}`} />
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<AnimatePresence>
|
||
{selectedDrive === 'D' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
className="mt-4 md:mt-6 border border-red-500/30 bg-red-500/10 rounded-lg p-3 md:p-4"
|
||
>
|
||
<div className="flex items-start gap-2 md:gap-3">
|
||
<AlertTriangle className="w-4 h-4 md:w-5 md:h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||
<div>
|
||
<div className="text-red-400 font-bold text-sm md:text-base mb-1">ERROR: Drive Not Mounted</div>
|
||
<div className="text-white/70 text-xs md:text-sm mb-2 md:mb-3">
|
||
No .aethex domain detected for this identity.
|
||
</div>
|
||
<div className="text-white/50 text-xs mb-3 md:mb-4">
|
||
Join The Foundry to reserve your namespace in the AeThex ecosystem.
|
||
</div>
|
||
<button
|
||
onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
|
||
className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-yellow-500 hover:bg-yellow-400 text-black text-xs md:text-sm font-bold uppercase tracking-wider transition-colors"
|
||
>
|
||
Join The Foundry <ExternalLink className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
{selectedDrive === 'C' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
className="mt-4 md:mt-6 border border-cyan-500/30 bg-cyan-500/5 rounded-lg p-3 md:p-4"
|
||
>
|
||
<div className="text-cyan-400 font-bold text-sm md:text-base mb-2">Local System Storage</div>
|
||
<div className="space-y-2 text-xs md:text-sm">
|
||
<div className="flex justify-between text-white/70">
|
||
<span>/system</span><span>32 GB</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/70">
|
||
<span>/apps</span><span>16 GB</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/70">
|
||
<span>/user</span><span>12 GB</span>
|
||
</div>
|
||
<div className="flex justify-between text-white/70">
|
||
<span>/cache</span><span>4 GB</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MissionApp() {
|
||
return (
|
||
<div className="min-h-full bg-gradient-to-br from-yellow-500 to-orange-500 p-3 md:p-6 flex items-center justify-center">
|
||
<div className="text-center max-w-2xl">
|
||
<motion.div
|
||
initial={{ scale: 0 }}
|
||
animate={{ scale: 1 }}
|
||
className="w-16 h-16 md:w-24 md:h-24 mx-auto mb-4 md:mb-6 bg-black rounded-full flex items-center justify-center"
|
||
>
|
||
<Target className="w-8 h-8 md:w-12 md:h-12 text-yellow-400" />
|
||
</motion.div>
|
||
<h1 className="text-2xl md:text-4xl font-display text-black uppercase tracking-wider mb-3 md:mb-4">THE MISSION</h1>
|
||
<p className="text-base md:text-lg text-black/80 mb-4 md:mb-6 leading-relaxed px-2 md:px-0">
|
||
Build the <strong>neutral identity layer</strong> for the next generation of digital creators.
|
||
</p>
|
||
<p className="text-sm md:text-base text-black/70 mb-4 md:mb-6 px-4 md:px-0">
|
||
No platform lock-in. No 30% cuts. Just architects, their work, and their audience.
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 md:gap-4 justify-center text-black/60 text-xs md:text-sm">
|
||
<span className="flex items-center gap-1">
|
||
<Check className="w-3 h-3 md:w-4 md:h-4" /> Cross-Platform Identity
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<Check className="w-3 h-3 md:w-4 md:h-4" /> Direct-to-Consumer
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<Check className="w-3 h-3 md:w-4 md:h-4" /> Open Protocol
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LeaderboardApp() {
|
||
const { data: architects, isLoading } = useQuery({
|
||
queryKey: ['os-leaderboard'],
|
||
queryFn: () => dataService.fetchLeaderboard(),
|
||
});
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
|
||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||
<Skeleton className="h-5 md:h-6 w-28 md:w-32" />
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4 space-y-2">
|
||
{[1,2,3,4,5].map(i => (
|
||
<div key={i} className="flex items-center gap-4 p-3 rounded-lg bg-white/5 border border-white/10">
|
||
<Skeleton className="w-8 h-8 rounded" />
|
||
<Skeleton className="w-10 h-10 rounded-full" />
|
||
<div className="flex-1 space-y-2">
|
||
<Skeleton className="h-4 w-28" />
|
||
<Skeleton className="h-3 w-16" />
|
||
</div>
|
||
<Skeleton className="h-6 w-12" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 border-b border-white/10">
|
||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">Leaderboard</h2>
|
||
</div>
|
||
<div className="flex-1 overflow-auto p-3 md:p-4">
|
||
{architects?.map((architect: any, i: number) => {
|
||
const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : null;
|
||
return (
|
||
<motion.div
|
||
key={architect.id}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: i * 0.05 }}
|
||
className={`flex items-center gap-3 md:gap-4 p-2.5 md:p-3 rounded-lg mb-2 ${i < 3 ? 'bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/20' : 'bg-white/5 border border-white/10'}`}
|
||
>
|
||
<div className="w-6 md:w-8 text-center font-mono text-base md:text-lg shrink-0">
|
||
{medal || <span className="text-white/40">{i + 1}</span>}
|
||
</div>
|
||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-cyan-500/20 flex items-center justify-center shrink-0">
|
||
<User className="w-4 h-4 md:w-5 md:h-5 text-cyan-400" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-white font-mono text-sm md:text-base truncate">{architect.username || 'Anonymous'}</div>
|
||
<div className="text-white/50 text-xs">Level {architect.level}</div>
|
||
</div>
|
||
<div className="text-right shrink-0">
|
||
<div className="text-cyan-400 font-mono font-bold text-sm md:text-base">{architect.xp || 0}</div>
|
||
<div className="text-white/40 text-xs">XP</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CalculatorApp() {
|
||
const [display, setDisplay] = useState('0');
|
||
const [prev, setPrev] = useState<number | null>(null);
|
||
const [op, setOp] = useState<string | null>(null);
|
||
const [newNumber, setNewNumber] = useState(true);
|
||
|
||
const handleNumber = (n: string) => {
|
||
if (newNumber) {
|
||
setDisplay(n);
|
||
setNewNumber(false);
|
||
} else {
|
||
setDisplay(display === '0' ? n : display + n);
|
||
}
|
||
};
|
||
|
||
const handleOp = (operator: string) => {
|
||
setPrev(parseFloat(display));
|
||
setOp(operator);
|
||
setNewNumber(true);
|
||
};
|
||
|
||
const calculate = () => {
|
||
if (prev === null || !op) return;
|
||
const current = parseFloat(display);
|
||
let result = 0;
|
||
switch (op) {
|
||
case '+': result = prev + current; break;
|
||
case '-': result = prev - current; break;
|
||
case '×': result = prev * current; break;
|
||
case '÷': result = current !== 0 ? prev / current : 0; break;
|
||
}
|
||
setDisplay(String(result));
|
||
setPrev(null);
|
||
setOp(null);
|
||
setNewNumber(true);
|
||
};
|
||
|
||
const clear = () => {
|
||
setDisplay('0');
|
||
setPrev(null);
|
||
setOp(null);
|
||
setNewNumber(true);
|
||
};
|
||
|
||
const buttons = ['C', '±', '%', '÷', '7', '8', '9', '×', '4', '5', '6', '-', '1', '2', '3', '+', '0', '.', '='];
|
||
|
||
return (
|
||
<div className="min-h-full bg-gradient-to-br from-blue-950 to-slate-950 p-3 md:p-6 flex flex-col">
|
||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-2xl p-4 md:p-6 mb-4 md:mb-6 border border-cyan-500/30 shadow-2xl">
|
||
<div className="text-right text-3xl md:text-5xl font-mono text-cyan-400 min-h-[60px] md:min-h-[80px] flex items-center justify-end font-bold tracking-wider break-all">{display}</div>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-2 md:gap-4 flex-1">
|
||
{buttons.map(btn => (
|
||
<button
|
||
key={btn}
|
||
onClick={() => {
|
||
if (btn === 'C') clear();
|
||
else if (btn === '=') calculate();
|
||
else if (['+', '-', '×', '÷'].includes(btn)) handleOp(btn);
|
||
else if (btn === '±') setDisplay(String(-parseFloat(display)));
|
||
else if (btn === '%') setDisplay(String(parseFloat(display) / 100));
|
||
else handleNumber(btn);
|
||
}}
|
||
className={`rounded-xl md:rounded-2xl font-mono text-lg md:text-2xl font-bold transition-all active:scale-95 shadow-lg ${
|
||
btn === '0' ? 'col-span-2' : ''
|
||
} ${
|
||
['+', '-', '×', '÷', '='].includes(btn)
|
||
? 'bg-gradient-to-br from-cyan-500 to-blue-500 active:from-cyan-600 active:to-blue-600 text-white'
|
||
: btn === 'C'
|
||
? 'bg-gradient-to-br from-red-500 to-red-600 active:from-red-600 active:to-red-700 text-white'
|
||
: 'bg-slate-800 active:bg-slate-700 text-white'
|
||
}`}
|
||
>
|
||
{btn}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NotesApp() {
|
||
const [notes, setNotes] = useState(() => {
|
||
const saved = localStorage.getItem('aethex-notes');
|
||
return saved || 'Welcome to AeThex Notes!\n\nStart typing here...';
|
||
});
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem('aethex-notes', notes);
|
||
}, [notes]);
|
||
|
||
const wordCount = notes.trim().split(/\s+/).filter(w => w).length;
|
||
const charCount = notes.length;
|
||
|
||
const handleClear = () => {
|
||
if (confirm('Clear all notes?')) {
|
||
setNotes('');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-gradient-to-br from-amber-50 to-yellow-100 flex flex-col">
|
||
<div className="flex items-center gap-2 p-3 md:p-4 bg-amber-200/50 border-b border-amber-300">
|
||
<StickyNote className="w-5 h-5 md:w-6 md:h-6 text-amber-700" />
|
||
<span className="text-amber-900 font-semibold text-sm md:text-base">notes.txt</span>
|
||
<button
|
||
onClick={handleClear}
|
||
className="ml-auto px-2 py-1 text-xs bg-amber-300 hover:bg-amber-400 text-amber-900 rounded transition-colors"
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
<textarea
|
||
value={notes}
|
||
onChange={(e) => setNotes(e.target.value)}
|
||
className="flex-1 bg-transparent p-4 md:p-6 text-gray-900 text-sm md:text-base resize-none outline-none leading-relaxed"
|
||
placeholder="Type your notes here..."
|
||
style={{ fontFamily: 'system-ui' }}
|
||
/>
|
||
<div className="px-4 md:px-6 py-2 md:py-3 bg-amber-200/50 border-t border-amber-300 text-amber-700 text-xs md:text-sm flex items-center gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||
<span>Auto-saved</span>
|
||
</div>
|
||
<div className="ml-auto flex items-center gap-3 text-[10px] md:text-xs">
|
||
<span>{wordCount} words</span>
|
||
<span>{charCount} chars</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SystemMonitorApp() {
|
||
const [cpu, setCpu] = useState(45);
|
||
const [ram, setRam] = useState(62);
|
||
const [network, setNetwork] = useState(78);
|
||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||
|
||
const handleRefresh = () => {
|
||
setIsRefreshing(true);
|
||
setCpu(Math.floor(Math.random() * 40) + 30);
|
||
setRam(Math.floor(Math.random() * 40) + 40);
|
||
setNetwork(Math.floor(Math.random() * 30) + 60);
|
||
setTimeout(() => setIsRefreshing(false), 800);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setCpu(Math.floor(Math.random() * 30) + 35);
|
||
setRam(Math.floor(Math.random() * 20) + 55);
|
||
setNetwork(Math.floor(Math.random() * 40) + 50);
|
||
}, 2000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
const Gauge = ({ label, value, color }: { label: string; value: number; color: string }) => (
|
||
<div className="flex flex-col items-center">
|
||
<div className="relative w-24 h-24">
|
||
<svg className="w-full h-full transform -rotate-90">
|
||
<circle cx="48" cy="48" r="40" stroke="#1e293b" strokeWidth="8" fill="none" />
|
||
<circle
|
||
cx="48" cy="48" r="40"
|
||
stroke={color}
|
||
strokeWidth="8"
|
||
fill="none"
|
||
strokeDasharray={`${value * 2.51} 251`}
|
||
className="transition-all duration-500"
|
||
/>
|
||
</svg>
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<span className="text-white font-mono text-lg">{value}%</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-white/60 text-sm mt-2">{label}</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 p-3 md:p-4 overflow-auto">
|
||
<div className="flex items-center gap-2 mb-4 md:mb-6">
|
||
<Cpu className="w-5 h-5 text-cyan-400" />
|
||
<h2 className="text-base md:text-lg font-display text-white uppercase tracking-wider">System Monitor</h2>
|
||
<button
|
||
onClick={handleRefresh}
|
||
disabled={isRefreshing}
|
||
className="ml-auto p-1.5 hover:bg-white/10 rounded transition-colors disabled:opacity-50"
|
||
>
|
||
<RefreshCw className={`w-4 h-4 text-cyan-400 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap justify-center md:justify-around gap-4 md:gap-0 mb-4 md:mb-6">
|
||
<Gauge label="CPU" value={cpu} color="#22d3ee" />
|
||
<Gauge label="RAM" value={ram} color="#a855f7" />
|
||
<Gauge label="NET" value={network} color="#22c55e" />
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="bg-white/5 rounded-lg p-2.5 md:p-3">
|
||
<div className="flex justify-between text-xs md:text-sm mb-2">
|
||
<span className="text-white/60">Aegis Shield</span>
|
||
<span className="text-green-400">ACTIVE</span>
|
||
</div>
|
||
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
|
||
<div className="h-full bg-gradient-to-r from-green-500 to-cyan-500 w-full" />
|
||
</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-lg p-2.5 md:p-3">
|
||
<div className="flex justify-between text-xs md:text-sm mb-2">
|
||
<span className="text-white/60">Network Nodes</span>
|
||
<span className="text-cyan-400">24 Connected</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function WebcamApp() {
|
||
const videoRef = useRef<HTMLVideoElement>(null);
|
||
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
|
||
const [isScanning, setIsScanning] = useState(false);
|
||
|
||
const startCamera = async () => {
|
||
try {
|
||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||
if (videoRef.current) {
|
||
videoRef.current.srcObject = stream;
|
||
setHasPermission(true);
|
||
}
|
||
} catch {
|
||
setHasPermission(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (videoRef.current?.srcObject) {
|
||
const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
|
||
tracks.forEach(track => track.stop());
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
const runScan = () => {
|
||
setIsScanning(true);
|
||
setTimeout(() => setIsScanning(false), 3000);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-full bg-black flex flex-col">
|
||
<div className="flex items-center justify-between p-2.5 md:p-3 bg-slate-900 border-b border-red-500/30">
|
||
<div className="flex items-center gap-2">
|
||
<Eye className="w-4 h-4 md:w-5 md:h-5 text-red-500" />
|
||
<span className="text-red-400 font-mono text-xs md:text-sm">AEGIS SURVEILLANCE</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5 md:gap-2 text-red-400 text-xs">
|
||
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
|
||
<span className="hidden sm:inline">MONITORING</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 relative flex items-center justify-center bg-slate-950">
|
||
{hasPermission === null && (
|
||
<button onClick={startCamera} className="px-6 py-3 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg border border-red-500/50 transition-colors flex items-center gap-2">
|
||
<Camera className="w-5 h-5" />
|
||
Enable Camera
|
||
</button>
|
||
)}
|
||
|
||
{hasPermission === false && (
|
||
<div className="text-center p-6">
|
||
<Camera className="w-12 h-12 text-red-500/50 mx-auto mb-3" />
|
||
<div className="text-red-400">Camera access denied</div>
|
||
<div className="text-white/40 text-sm mt-1">Enable camera to use AEGIS surveillance</div>
|
||
</div>
|
||
)}
|
||
|
||
{hasPermission && (
|
||
<>
|
||
<video ref={videoRef} autoPlay playsInline className="max-w-full max-h-full" />
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<div className="absolute top-0 left-0 w-16 h-16 border-l-2 border-t-2 border-red-500/50" />
|
||
<div className="absolute top-0 right-0 w-16 h-16 border-r-2 border-t-2 border-red-500/50" />
|
||
<div className="absolute bottom-0 left-0 w-16 h-16 border-l-2 border-b-2 border-red-500/50" />
|
||
<div className="absolute bottom-0 right-0 w-16 h-16 border-r-2 border-b-2 border-red-500/50" />
|
||
{isScanning && (
|
||
<motion.div
|
||
initial={{ top: 0 }}
|
||
animate={{ top: '100%' }}
|
||
transition={{ duration: 2, repeat: 1 }}
|
||
className="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-red-500 to-transparent"
|
||
/>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{hasPermission && (
|
||
<div className="p-2.5 md:p-3 bg-slate-900 border-t border-red-500/30 flex justify-center">
|
||
<button onClick={runScan} disabled={isScanning} className="px-3 md:px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded border border-red-500/50 transition-colors text-xs md:text-sm flex items-center gap-2 disabled:opacity-50">
|
||
<Shield className="w-3 h-3 md:w-4 md:h-4" />
|
||
{isScanning ? 'Scanning...' : 'Run Biometric Scan'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Wrapper components for new apps
|
||
function ProjectsAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/projects" className="w-full h-full border-0" title="Projects" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MessagingAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/messaging" className="w-full h-full border-0" title="Messages" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MarketplaceAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/marketplace" className="w-full h-full border-0" title="Marketplace" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FileManagerAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/file-manager" className="w-full h-full border-0" title="File Manager" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CodeGalleryAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/code-gallery" className="w-full h-full border-0" title="Code Gallery" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NotificationsAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/notifications" className="w-full h-full border-0" title="Notifications" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AnalyticsAppWrapper() {
|
||
return (
|
||
<div className="h-full w-full overflow-auto">
|
||
<iframe src="/hub/analytics" className="w-full h-full border-0" title="Analytics" />
|
||
</div>
|
||
);
|
||
}
|