// MCP Hero โ app shell with real API integration and session management
const { useState: useAppState, useEffect: useAppEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"role": "guest",
"homeStyle": "Editorial",
"credits": "Normal",
"dark": false,
"accent": "#5B5BD6",
"typeset": "Sora + Source Sans"
}/*EDITMODE-END*/;
const MH_TYPESETS = {
'Bricolage + Instrument': { display: "'Bricolage Grotesque', sans-serif", body: "'Instrument Sans', sans-serif" },
'Space Grotesk + Plex': { display: "'Space Grotesk', sans-serif", body: "'IBM Plex Sans', sans-serif" },
'Sora + Source Sans': { display: "'Sora', sans-serif", body: "'Source Sans 3', sans-serif" },
};
// ---------- Auth Hook with Real API ----------
function useAuth() {
const [user, setUser] = useAppState(null);
const [loading, setLoading] = useAppState(true);
useAppEffect(() => {
// Check for existing session on mount
const session = window.apiService?.getSession();
if (session && session.token && session.user) {
setUser(session.user);
}
setLoading(false);
// Listen for auth changes
const handleAuthChange = (event) => {
setUser(event.detail.user);
};
window.addEventListener('auth-change', handleAuthChange);
return () => window.removeEventListener('auth-change', handleAuthChange);
}, []);
const logout = async (nav) => {
try {
await window.apiService?.logout();
setUser(null);
window.dispatchEvent(new CustomEvent('auth-change', {
detail: { user: null, token: null }
}));
nav('/login');
} catch (error) {
console.error('Logout error:', error);
// Force logout even if API fails
window.apiService?.clearSession();
setUser(null);
nav('/login');
}
};
return { user, loading, logout };
}
// ---------- tiny hash router ----------
function useRoute() {
const get = () => {
const h = window.location.hash.replace(/^#/, '');
return h || '/';
};
const [route, setRoute] = useAppState(get);
useAppEffect(() => {
const fn = () => setRoute(get());
window.addEventListener('hashchange', fn);
return () => window.removeEventListener('hashchange', fn);
}, []);
const nav = (path) => {
window.location.hash = path;
window.scrollTo({ top: 0 });
};
return [route, nav];
}
// ---------- public header with real user data ----------
function PublicHeader({ route, nav, user, dark, setTweak, onLogout }) {
const loggedIn = !!user;
const NavLink = ({ path, children, match }) => {
const active = match ? route.startsWith(match) : route === path;
return (
);
};
// Get user initials for avatar
const getInitials = (name) => {
if (!name) return 'U';
return name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase()
.slice(0, 2);
};
return (
{loggedIn && user ? (
) : (
nav('/login')}>Sign in
nav('/register')}>Get started
)}
);
}
function PublicFooter({ nav }) {
return (
);
}
// ---------- App with Real API Integration ----------
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [route, nav] = useRoute();
const { user, loading: authLoading, logout } = useAuth();
// strip entrance-animation classes once they've played
useAppEffect(() => {
const id = setTimeout(() => {
document.querySelectorAll('.mh-anim').forEach((el) => el.classList.remove('mh-anim'));
}, 600);
return () => clearTimeout(id);
}, [route, t.homeStyle, user]);
// apply theme + tokens
useAppEffect(() => {
const r = document.documentElement;
r.setAttribute('data-theme', t.dark ? 'dark' : 'light');
r.style.setProperty('--accent', t.accent);
r.style.setProperty('--accent-strong', `color-mix(in oklch, ${t.accent} 84%, black)`);
const ts = MH_TYPESETS[t.typeset] || MH_TYPESETS['Bricolage + Instrument'];
r.style.setProperty('--font-display', ts.display);
r.style.setProperty('--font-body', ts.body);
}, [t.dark, t.accent, t.typeset]);
// Show loading state while checking auth
if (authLoading) {
return (
);
}
const isAuth = route === '/login' || route === '/register' || route === '/forgot' || route.startsWith('/invitation');
const isAdmin = route.startsWith('/admin');
const isDash = route.startsWith('/dashboard');
// Protected route check
if ((isDash || isAdmin) && !user) {
// Redirect to login if trying to access protected routes
useAppEffect(() => {
nav('/login');
}, []);
return null;
}
let page = null;
if (isAdmin) {
page = ;
} else if (route === '/login') {
page =
;
} else if (route === '/register') {
page =
;
} else if (route === '/forgot') {
page =
;
} else if (route.startsWith('/invitation')) {
page =
;
} else {
const mcpMatch = route.match(/^\/mcps\/([\w-]+)$/);
let inner = null;
if (isDash) {
inner = ;
} else if (mcpMatch) {
inner =
;
} else if (route === '/pricing') {
inner = ;
} else {
inner =
;
}
page = (
);
}
return (
{page}
);
}
// Add spin animation
if (typeof document !== 'undefined') {
const style = document.createElement('style');
style.textContent = `
@keyframes spin {
to { transform: rotate(360deg); }
}
`;
document.head.appendChild(style);
}
ReactDOM.createRoot(document.getElementById('root')).render();