// app.jsx — Root app: auth pages, routing, global state const { useState, useEffect, useCallback, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accentColor": "#06B6D4" }/*EDITMODE-END*/; const CLERK_PLAN_KEY = 'rosteath'; const CLERK_APPEARANCE = { variables: { colorPrimary: '#06B6D4', colorBackground: '#000000', colorText: '#F1F2F7', colorTextSecondary: '#5C5E72', colorInputBackground: '#111111', colorInputText: '#F1F2F7', colorNeutral: '#5C5E72', colorDanger: '#F87171', borderRadius: '10px', fontFamily: 'Inter, sans-serif', fontSize: '14px', }, elements: { card: { boxShadow: 'none', background: 'transparent', border: 'none', padding: 0 }, rootBox: { width: '100%' }, // hide clerk's built-in header — we render our own above the mount div cardHeader: { display: 'none' }, formButtonPrimary: { background: 'linear-gradient(135deg, #0891B2 0%, #06B6D4 100%)', boxShadow: '0 4px 20px rgba(6,182,212,0.35)', fontFamily: 'Inter, sans-serif', fontWeight: 600, letterSpacing: '-0.01em', transition: 'all 0.2s ease', }, socialButtonsBlockButton: { background: '#111', border: '1px solid rgba(255,255,255,0.1)', color: '#F1F2F7', fontFamily: 'Inter, sans-serif', fontWeight: 500, transition: 'all 0.2s ease', }, dividerLine: { background: 'rgba(255,255,255,0.07)' }, dividerText: { color: '#3A3A50', fontSize: '12px' }, formFieldLabel: { color: 'rgba(255,255,255,0.45)', fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: 500, letterSpacing: '-0.005em', textTransform: 'none' }, formFieldInput: { background: '#111', border: '1px solid rgba(255,255,255,0.09)', color: '#F1F2F7', fontFamily: 'Inter, sans-serif', fontSize: '14px', }, footerActionLink: { color: '#22D3EE', fontWeight: 600 }, footerActionText: { color: '#3A3A50' }, footer: { borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '16px', marginTop: '8px' }, identityPreviewText: { color: '#F1F2F7' }, identityPreviewEditButtonIcon: { color: '#9496A8' }, alert: { background: 'rgba(248,113,113,0.07)', border: '1px solid rgba(248,113,113,0.18)', borderRadius: '8px' }, alertText: { color: '#F87171', fontSize: '13px' }, }, }; function clerkUserToApp(u) { const hasClerkPlan = u.has?.({ plan: CLERK_PLAN_KEY }) ?? false; const hasMetaPlan = u.publicMetadata?.plan === 'Pro'; return { username: u.username || u.firstName || (u.emailAddresses[0]?.emailAddress || '').split('@')[0], email: u.emailAddresses[0]?.emailAddress || '', plan: (hasClerkPlan || hasMetaPlan) ? 'Pro' : 'Free', id: u.id, createdAt: u.createdAt, }; } // ─── TOAST HOOK ─────────────────────────────────────────────────────────────── function useToasts() { const [toasts, setToasts] = useState([]); const nextId = useRef(1); const add = useCallback(({ type = 'info', msg }) => { const id = nextId.current++; setToasts(prev => [...prev, { id, type, msg, out: false }]); setTimeout(() => { setToasts(prev => prev.map(t => t.id === id ? { ...t, out: true } : t)); setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 280); }, 3200); }, []); const remove = useCallback((id) => { setToasts(prev => prev.map(t => t.id === id ? { ...t, out: true } : t)); setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 280); }, []); return [toasts, add, remove]; } // ─── AUTH ASIDE — animated live-feed panel ─────────────────────────────────── const FEED_MEMBERS = [ { name: 'xShadowReaper', initStatus: 'online', game: null }, { name: 'FrostClan_Leader', initStatus: 'in-game', game: 'Arsenal' }, { name: 'Phantom_Wolf', initStatus: 'offline', game: null }, { name: 'VelocityX99', initStatus: 'online', game: null }, { name: 'DarkMatter_X', initStatus: 'in-game', game: 'Da Hood' }, { name: 'NightOwl99', initStatus: 'offline', game: null }, ]; const GAMES = ['Arsenal', 'Da Hood', 'Bloxburg', 'Brookhaven', 'Adopt Me']; const STATUSES = ['online', 'in-game', 'offline']; const StatusChip = ({ status, game }) => { const cfg = { 'online': { color: '#34D399', bg: 'rgba(52,211,153,0.1)', label: 'Online' }, 'in-game': { color: '#22D3EE', bg: 'rgba(34,211,238,0.1)', label: game || 'In Game' }, 'offline': { color: '#3F3F52', bg: 'rgba(255,255,255,0.04)', label: 'Offline' }, }[status] || {}; return ( {cfg.label} ); }; const AuthAside = ({ mode }) => { const [members, setMembers] = useState(FEED_MEMBERS.map(m => ({ ...m, status: m.initStatus }))); const [feed, setFeed] = useState([]); const feedRef = useRef([]); useEffect(() => { const tick = setInterval(() => { const idx = Math.floor(Math.random() * members.length); const next = STATUSES[Math.floor(Math.random() * STATUSES.length)]; const game = next === 'in-game' ? GAMES[Math.floor(Math.random() * GAMES.length)] : null; setMembers(prev => prev.map((m, i) => i === idx ? { ...m, status: next, game } : m)); const name = FEED_MEMBERS[idx].name; const event = next === 'online' ? 'came online' : next === 'in-game' ? `joined ${game}` : 'went offline'; const entry = { id: Date.now(), name, event, status: next }; feedRef.current = [entry, ...feedRef.current.slice(0, 3)]; setFeed([...feedRef.current]); }, 2200); return () => clearInterval(tick); }, []); return (
{/* bg glows */}
{/* dot grid */}
{/* spinning ring */}
{/* scan line */}
{/* Logo lockup */}
RoStealth
Community Intelligence
{/* Headline */}

{mode === 'login' ? <>Your board is
live & waiting. : <>Know exactly
who's online now.}

{mode === 'login' ? 'Real-time status for every member, right where you left off.' : 'Track your entire Roblox community with zero bots or passwords.'}

{/* Live feed card */}
{/* card header */}
Live Feed
{members.filter(m => m.status !== 'offline').length}/{members.length} online
{/* members */}
{members.slice(0, 5).map((m, i) => (
{m.name[0]}
{m.name.length > 14 ? m.name.slice(0,14)+'…' : m.name}
))}
{/* live events */} {feed.length > 0 && (
{feed.slice(0,2).map((f, i) => (
{f.name.split('_')[0]} {f.event}
))}
)}
{/* stats strip */}
{[['2,300+','owners'],['12K+','tracked'],['30s','refresh']].map(([v,l], i) => (
0 ? '1px solid rgba(255,255,255,0.07)' : 'none' }}>
{v}
{l}
))}
); }; // ─── AUTH SHELL (split: form left, brand right) ────────────────────────────── const AuthShell = ({ mode = 'login', title, altText, altLabel, onAlt, onBack, children, legal }) => (
{/* LEFT — form */}
{/* faint glow behind form */}
{onBack && ( )}
{/* logo */}
RoStealth

{title}

{altText}{' '}

{children} {legal &&

{legal}

}
{/* RIGHT — brand showcase */}
); // ─── AUTH ERROR + SUBMIT ───────────────────────────────────────────────────── const AuthError = ({ msg }) => (
{msg}
); const AuthSubmit = ({ loading, idle, busy }) => ( ); // ─── FIELD ─────────────────────────────────────────────────────────────────── const AuthField = ({ label, value, onChange, placeholder, type = 'text', icon, autoFocus, onKeyDown, hint }) => { const [focus, setFocus] = useState(false); const [show, setShow] = useState(false); const inputType = type === 'password' ? (show ? 'text' : 'password') : type; return (
{hint && {hint}}
{icon && ( {icon} )} onChange(e.target.value)} placeholder={placeholder} onKeyDown={onKeyDown} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ width:'100%', padding: icon ? '10px 38px 10px 34px' : '10px 38px 10px 12px', background: focus ? 'var(--bg3)' : 'var(--bg2)', border:`1.5px solid ${focus ? 'var(--p5)' : 'var(--border)'}`, borderRadius:10, color:'var(--t1)', fontSize:14, fontFamily:'var(--font)', outline:'none', boxShadow: focus ? '0 0 0 3px rgba(6,182,212,0.14)' : 'none', transition:'all 0.2s var(--ease-out-expo)', }} /> {type === 'password' && ( )}
); }; // ─── LOGIN PAGE ─────────────────────────────────────────────────────────────── const LoginPage = ({ onAuth, onGoRegister, onBack }) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [shake, setShake] = useState(false); const triggerError = (msg) => { setError(msg); setShake(true); setTimeout(() => setShake(false), 500); }; const handleSubmit = async (e) => { e.preventDefault(); if (!username.trim() || !password) { triggerError('Please fill in all fields.'); return; } if (username === 'admin' && password === 'admin') { onAuth({ username:'admin', email:'admin@rostealth.site', plan:'Pro', id:1 }); return; } setLoading(true); setError(''); await new Promise(r => setTimeout(r, 850)); onAuth({ username:username.trim(), email:`${username.trim()}@example.com`, plan:'Pro', id:Date.now() }); }; return (
} autoFocus /> {error && }
); }; // ─── SIGNUP PAGE ────────────────────────────────────────────────────────────── const SignupPage = ({ onAuth, onGoLogin, onBack }) => { const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [shake, setShake] = useState(false); const triggerError = (msg) => { setError(msg); setShake(true); setTimeout(() => setShake(false), 500); }; const pwStrength = password.length === 0 ? 0 : password.length < 6 ? 1 : password.length < 10 ? 2 : 3; const strengthLabel = ['', 'Weak', 'Fair', 'Strong']; const strengthColor = ['', 'var(--red)', 'var(--amber)', 'var(--green)']; const handleSubmit = async (e) => { e.preventDefault(); if (!username.trim()) { triggerError('Please enter a username.'); return; } if (!email.trim() || !email.includes('@')) { triggerError('Enter a valid email address.'); return; } if (!password || password.length < 6) { triggerError('Password must be at least 6 characters.'); return; } setLoading(true); setError(''); await new Promise(r => setTimeout(r, 950)); onAuth({ username:username.trim(), email:email.trim(), plan:'Pro', id:Date.now() }); }; return ( By continuing you agree to our Terms of Service. Public data only.} >
} autoFocus /> } />
{password.length > 0 && (
{[1,2,3].map(i => (
= i ? strengthColor[pwStrength] : 'transparent', transition:'background 0.3s' }}/> ))}
{strengthLabel[pwStrength]}
)}
{error && } ); }; // ─── CLERK AUTH PAGES ──────────────────────────────────────────────────────── const ClerkAuthLeft = ({ onBack, mode, children }) => { const copy = mode === 'signup' ? { title: 'Create your account', sub: 'Start tracking your Roblox community in minutes.' } : { title: 'Welcome back', sub: 'Sign in to pick up right where you left off.' }; return (
{/* ambient glow — top left only, very faint */}
{/* back */} {onBack && ( )}
{/* logo — fades in first */}
RoStealth
{/* custom heading */}

{copy.title}

{copy.sub}

{/* clerk form mount — its own card header is hidden via appearance */}
{children}
{/* bottom legal */}

Public Roblox data only · Not affiliated with Roblox Corporation

); }; const ClerkSignInPage = ({ onBack }) => { const ref = useRef(null); useEffect(() => { if (!ref.current || !window.clerk) return; window.clerk.mountSignIn(ref.current, { appearance: CLERK_APPEARANCE }); return () => { try { if (ref.current) window.clerk.unmountSignIn(ref.current); } catch(e) {} }; }, []); return (
); }; const ClerkSignUpPage = ({ onBack }) => { const ref = useRef(null); useEffect(() => { if (!ref.current || !window.clerk) return; window.clerk.mountSignUp(ref.current, { appearance: CLERK_APPEARANCE }); return () => { try { if (ref.current) window.clerk.unmountSignUp(ref.current); } catch(e) {} }; }, []); return (
); }; // ─── APP LAYOUT ─────────────────────────────────────────────────────────────── const AppLayout = ({ user, setUser, page, setPage, children, alertCount, alerts, onClearAlerts, onCmdK }) => { const [collapsed, setCollapsed] = useState(false); return (
setUser(null)} user={user} alertCount={alertCount} alerts={alerts} onClearAlerts={onClearAlerts} onCmdK={onCmdK} />
{children}
); }; // ─── ROOT APP ───────────────────────────────────────────────────────────────── const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [user, setUser] = useState(null); const [clerkLoaded, setClerkLoaded] = useState(false); const [needsOnboard, setNeedsOnboard] = useState(false); const path = window.location.pathname.replace(/\/$/, ''); const [authView, setAuthView] = useState( path === '/terms' ? 'terms' : path === '/privacy' ? 'privacy' : null ); const navTo = (view) => { const url = view === 'terms' ? '/terms' : view === 'privacy' ? '/privacy' : '/'; window.history.pushState({}, '', url); setAuthView(view); }; const [page, setPage] = useState('dashboard'); const [trackedUsers, setTrackedUsers] = useState([]); const [alertRules, setAlertRules] = useState([]); const [firedAlerts, setFiredAlerts] = useState([]); const [syncAge, setSyncAge] = useState(0); const [refreshing, setRefreshing] = useState(false); const [cmdkOpen, setCmdkOpen] = useState(false); const [drawerUser, setDrawerUser] = useState(null); const [drawerOpen, setDrawerOpen] = useState(false); const [toasts, addToast, removeToast] = useToasts(); const API_BASE = 'https://api.rostealth.site'; const apiGet = useCallback(async (path) => { const token = await window.clerk?.session?.getToken(); const res = await fetch(API_BASE + path, { headers: token ? { Authorization: `Bearer ${token}` } : {} }); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }, []); const loadAll = useCallback(async () => { if (!window.clerk?.user) return; setRefreshing(true); try { const [users, rules, fired] = await Promise.all([ apiGet('/api/users'), apiGet('/api/alerts'), apiGet('/api/alerts/fired'), ]); setTrackedUsers(users || []); setAlertRules(rules || []); setFiredAlerts(fired || []); setSyncAge(0); } catch (err) { console.warn('[RoStealth] data load failed:', err.message); } finally { setRefreshing(false); } }, [apiGet]); // poll every 30s, age counter every 1s useEffect(() => { if (!user) return; loadAll(); const poll = setInterval(loadAll, 30000); const ticker = setInterval(() => setSyncAge(a => a + 1), 1000); return () => { clearInterval(poll); clearInterval(ticker); }; }, [user, loadAll]); // global Cmd+K useEffect(() => { const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmdkOpen(v => !v); } if (e.key === 'Escape') setCmdkOpen(false); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, []); const openUser = useCallback((u) => { setDrawerUser(u); setDrawerOpen(true); }, []); // Initialize Clerk useEffect(() => { if (!window.Clerk) { console.error('[RoStealth] Clerk SDK not loaded — check CDN script in index.html'); setClerkLoaded(true); return; } const clerk = window.Clerk; window.clerk = clerk; clerk.load().then(() => { setClerkLoaded(true); if (clerk.user) { setUser(clerkUserToApp(clerk.user)); } clerk.addListener(({ user: clerkUser }) => { if (clerkUser) { setUser(prev => { if (!prev) { const isNew = clerkUser.createdAt && (Date.now() - new Date(clerkUser.createdAt).getTime() < 90000); setNeedsOnboard(isNew); setAuthView(null); } return clerkUserToApp(clerkUser); }); } else { setUser(null); setPage('dashboard'); setAuthView(null); } }); }).catch(err => { console.error('[RoStealth] Clerk load failed:', err); setClerkLoaded(true); }); }, []); const handleOnboardComplete = () => { setNeedsOnboard(false); setPage('dashboard'); addToast({ type:'success', msg:'Welcome to RoStealth! Your pass is now active.' }); loadAll(); }; const handleLogout = () => { if (window.clerk) window.clerk.signOut(); }; const accentCSS = `:root { --p6:${t.accentColor}; --p5:${t.accentColor}; --p4:${t.accentColor}cc; --p3:${t.accentColor}99; --p-dim:${t.accentColor}18; --border-bright:${t.accentColor}55; }`; // ── clerk loading ── if (!clerkLoaded) { return (
); } // ── onboarding ── if (user && needsOnboard) { return ( <> ); } // ── auth pages (full screen, no modal) ── if (!user) { if (authView === 'login') { return ( <> setAuthView('register')} onBack={() => setAuthView(null)} /> ); } if (authView === 'register') { return ( <> setAuthView('login')} onBack={() => setAuthView(null)} /> ); } if (authView === 'terms') { return <> navTo(null)} />; } if (authView === 'privacy') { return <> navTo(null)} />; } return (
setAuthView('login')} onSignup={() => setAuthView('register')} onTerms={() => navTo('terms')} onPrivacy={() => navTo('privacy')} /> setTweak('accentColor', v)} />
); } // ── subscription gate ── if (user.plan !== 'Pro') { const handleGateComplete = async () => { if (window.clerk?.user) { await window.clerk.user.reload(); setUser(clerkUserToApp(window.clerk.user)); } setPage('dashboard'); }; return (
); } // ── dashboard ── const pageProps = { user, setPage, trackedUsers, setTrackedUsers, onOpenUser:openUser, addToast }; const renderPage = () => { switch (page) { case 'dashboard': return ; case 'tracking': return ; case 'analytics': return ; case 'alerts': return ; case 'settings': return ; case 'admin': return ; case 'pricing': return ; default: return ; } }; return (
setFiredAlerts([])} onCmdK={() => setCmdkOpen(true)}> {renderPage()} setDrawerOpen(false)} onFlag={(id) => setTrackedUsers(prev => prev.map(u => u.id===id ? { ...u, flagged:!u.flagged } : u))} onRemove={(id) => { setTrackedUsers(prev => prev.filter(u => u.id!==id)); setDrawerOpen(false); }} addToast={addToast} /> setCmdkOpen(false)} trackedUsers={trackedUsers} setPage={(p) => { setPage(p); setCmdkOpen(false); }} onOpenUser={(u) => { openUser(u); setCmdkOpen(false); }} /> setTweak('accentColor', v)} />
); }; const appRoot = ReactDOM.createRoot(document.getElementById('root')); appRoot.render();