// Fluentra Console v2 — app shell with auth, login, tenant selector & router. const AuthCtx = React.createContext({}); window._AuthCtx = AuthCtx; window.useAuth = () => React.useContext(AuthCtx); function getPasswordStrength(pw) { let score = 0; if (pw.length >= 8) score++; if (/[A-Z]/.test(pw)) score++; if (/[a-z]/.test(pw)) score++; if (/[0-9]/.test(pw)) score++; if (/[^A-Za-z0-9]/.test(pw)) score++; const labels = ['Very weak','Weak','Medium','Strong','Very strong']; const colors = ['#F87171','#F87171','#FBBF24','#34D399','#34D399']; return { score, label: labels[score-1] || '', color: colors[score-1] || 'transparent' }; } /* ══════════════════════════════════════════════════════════════ FORGOT PASSWORD PAGE ══════════════════════════════════════════════════════════ */ function ForgotPasswordPage() { const [email, setEmail] = React.useState(''); const [loading, setLoading] = React.useState(false); const [sent, setSent] = React.useState(false); const [error, setError] = React.useState(''); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(''); try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/forgot-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), credentials: 'include', }); if (!res.ok) { const e2 = await res.json().catch(() => ({})); throw new Error(e2.detail || 'Request failed'); } setSent(true); } catch(err) { setError(err.message); } finally { setLoading(false); } }; return (

Fluentra

Reset your password

{sent ? (

If an account exists for {email}, you will receive a password reset link.

) : (

); } /* ══════════════════════════════════════════════════════════════ RESET PASSWORD PAGE ══════════════════════════════════════════════════════════ */ function ResetPasswordPage() { const [password, setPassword] = React.useState(''); const [loading, setLoading] = React.useState(false); const [done, setDone] = React.useState(false); const [error, setError] = React.useState(''); const token = new URLSearchParams(window.location.search).get('token'); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(''); try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/reset-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token, new_password: password }), credentials: 'include', }); if (!res.ok) { const e2 = await res.json().catch(() => ({})); throw new Error(e2.detail || 'Reset failed'); } setDone(true); } catch(err) { setError(err.message); } finally { setLoading(false); } }; return (

Fluentra

Set a new password

{done ? (

Your password has been updated successfully.

) : (
{error && (
{error}
)} {!token && (
Missing reset token in URL.
)}
New Password setPassword(e.target.value)}/>

{window.location.hash='';window.location.search='';}} style={{color:'var(--accent-2)',borderBottom:'1px dashed currentColor',cursor:'pointer'}}>Back to sign in
)}

); } /* ══════════════════════════════════════════════════════════════ LOGIN PAGE ══════════════════════════════════════════════════════════ */ function LoginPage({ onLogin }) { const [mode, setMode] = React.useState('login'); const [username, setUsername] = React.useState(''); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [confirmPassword, setConfirmPassword] = React.useState(''); const [tenantName, setTenantName] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const [message, setMessage] = React.useState(''); const strength = getPasswordStrength(password); // Check for invitation token in URL const urlParams = React.useMemo(() => new URLSearchParams(window.location.search), []); const invitationId = urlParams.get('invitation'); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(''); setMessage(''); try { if (mode === 'register') { if (password !== confirmPassword) { throw new Error('Passwords do not match'); } const payload = { username, email, password }; if (invitationId) { payload.invitation_id = invitationId; } else if (tenantName.trim()) { payload.tenant_name = tenantName.trim(); } const res = await fetch(window.FLUENTRA_API + '/api/v1/users/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), credentials: 'include', }); if (!res.ok) { const e2 = await res.json().catch(() => ({})); throw new Error(e2.detail || 'Registration failed'); } const data = await res.json().catch(() => ({})); if (invitationId) { setMessage('Account created and invitation accepted! You can now sign in.'); } else if (data.tenant_request_id) { setMessage('Account created! Your tenant request has been submitted for approval. You can now sign in.'); } else { setMessage('Account created! You can now sign in.'); } setMode('login'); setPassword(''); setConfirmPassword(''); setTenantName(''); } else { // OAuth2 form login (cookie is set automatically by backend) const tr = await fetch(window.FLUENTRA_API + '/api/v1/users/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'username=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password), credentials: 'include', }); if (!tr.ok) { const e2 = await tr.json().catch(() => ({})); throw new Error(e2.detail || 'Invalid credentials'); } // Fetch /me + tenants in parallel (cookie sends token automatically) const [meRes, tenantsRes] = await Promise.all([ fetch(window.FLUENTRA_API + '/api/v1/users/me', { credentials: 'include' }), fetch(window.FLUENTRA_API + '/api/v1/users/me/tenants', { credentials: 'include' }), ]); const user = await meRes.json(); const tenants = await tenantsRes.json().catch(() => []); let activeTenantId = user.active_tenant_id; // Auto-switch if single tenant and no active tenant yet if (!activeTenantId && Array.isArray(tenants) && tenants.length === 1) { const sr = await fetch(window.FLUENTRA_API + '/api/v1/users/me/tenants/switch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tenant_id: tenants[0].tenant_id }), credentials: 'include', }); if (sr.ok) { activeTenantId = tenants[0].tenant_id; } } const stored = { ...user, active_tenant_id: activeTenantId, tenants: Array.isArray(tenants) ? tenants : [] }; localStorage.setItem('fluentra_user', JSON.stringify(stored)); onLogin(stored); } } catch(err) { setError(err.message); } finally { setLoading(false); } }; return (
{/* grid bg */}

{/* Logo */}

Fluentra

{mode === 'register' ? (invitationId ? 'Create your account to join the team' : 'Create your account') : 'Sign in to your console'}

{message && (
{message}
)} {error && (
{error}
)} {mode === 'register' && (
Username setUsername(e.target.value)}/>
)}
Email setEmail(e.target.value)}/>

Password setPassword(e.target.value)}/> {mode === 'register' && password && (

Strength {strength.label}

)}
{mode === 'register' && (
Confirm Password setConfirmPassword(e.target.value)}/>
)} {mode === 'register' && !invitationId && (
Tenant Name (optional — your workspace) setTenantName(e.target.value)}/>
)}
{mode === 'login' ? ( <> {window.location.hash='#forgot-password';}} style={{color:'var(--accent-2)',borderBottom:'1px dashed currentColor',cursor:'pointer'}}>Forgot password?
Don't have an account? setMode('register')} style={{color:'var(--accent-2)',borderBottom:'1px dashed currentColor',cursor:'pointer'}}>Sign up ) : ( <> Already have an account? setMode('login')} style={{color:'var(--accent-2)',borderBottom:'1px dashed currentColor',cursor:'pointer'}}>Log in )}

); } /* ══════════════════════════════════════════════════════════════ TENANT REQUEST FORM ══════════════════════════════════════════════════════════ */ function TenantRequestForm() { const [tenantName, setTenantName] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const [success, setSuccess] = React.useState(''); const [requests, setRequests] = React.useState([]); const loadRequests = async () => { try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/my-tenant-requests', { credentials: 'include' }); if (res.ok) { const data = await res.json(); setRequests(Array.isArray(data) ? data : []); } } catch(e) {} }; React.useEffect(() => { loadRequests(); }, []); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(''); setSuccess(''); try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/tenant-request', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tenant_name: tenantName }), credentials: 'include', }); if (!res.ok) { const e2 = await res.json().catch(() => ({})); throw new Error(e2.detail || 'Request failed'); } setSuccess('Tenant request submitted for approval.'); setTenantName(''); loadRequests(); } catch(err) { setError(err.message); } finally { setLoading(false); } }; return (

{success && (
{success}
)} {error && (
{error}
)}
Tenant Name setTenantName(e.target.value)}/>
{requests.length > 0 && (

My Requests

{requests.map((r, i) => (
{r.tenant_name} {r.status}
))}

)}
); } /* ══════════════════════════════════════════════════════════════ TENANT SELECTOR ══════════════════════════════════════════════════════════ */ function TenantSelector({ user, tenants, onSelect }) { const [loading, setLoading] = React.useState(null); const pick = async (tenantId) => { setLoading(tenantId); try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/me/tenants/switch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tenant_id: tenantId }), credentials: 'include', }); if (!res.ok) throw new Error('Switch failed'); const stored = JSON.parse(localStorage.getItem('fluentra_user') || '{}'); stored.active_tenant_id = tenantId; localStorage.setItem('fluentra_user', JSON.stringify(stored)); onSelect({ ...user, active_tenant_id: tenantId }); } catch(e) { if (window.modalAlert) window.modalAlert('Failed to select tenant: ' + e.message); else alert('Failed to select tenant: ' + e.message); } finally { setLoading(null); } }; return (

Select workspace

Choose a tenant to continue

{tenants.map(t => ( ))}

); } /* ══════════════════════════════════════════════════════════════ CHANGE PASSWORD MODAL ══════════════════════════════════════════════════════════ */ function ChangePasswordModal({ onClose }) { const [current, setCurrent] = React.useState(''); const [next, setNext] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const [done, setDone] = React.useState(false); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(''); try { const res = await fetch(window.FLUENTRA_API + '/api/v1/users/me/change-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current_password: current, new_password: next }), credentials: 'include', }); if (!res.ok) { const e2 = await res.json().catch(() => ({})); throw new Error(e2.detail || 'Failed to change password'); } setDone(true); } catch(err) { setError(err.message); } finally { setLoading(false); } }; if (done) return (

e.stopPropagation()}>
Password updated successfully.

); return (

e.stopPropagation()}>
Change Password
{error &&
{error}
}
Current Password setCurrent(e.target.value)}/>

New Password setNext(e.target.value)}/>

); } /* ══════════════════════════════════════════════════════════════ NOTIFICATIONS BELL ══════════════════════════════════════════════════════════ */ function NotificationsBell() { const [open, setOpen] = React.useState(false); const [notifs, setNotifs] = React.useState([]); const [unread, setUnread] = React.useState(0); const ref = React.useRef(null); const load = async () => { try { const r = await fetch(window.FLUENTRA_API + '/api/v1/users/me/notifications', { credentials: 'include' }); if (!r.ok) return; const data = await r.json(); const arr = Array.isArray(data) ? data : []; setNotifs(arr); setUnread(arr.filter(n => !n.read).length); } catch(e) {} }; React.useEffect(() => { load(); const iv = setInterval(load, 30000); return () => clearInterval(iv); }, []); React.useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const markOne = async (id) => { await fetch(window.FLUENTRA_API + '/api/v1/users/me/notifications/' + id + '/mark-read', { method: 'POST', credentials: 'include' }); load(); }; const markAll = async () => { await fetch(window.FLUENTRA_API + '/api/v1/users/me/notifications/mark-all-read', { method: 'POST', credentials: 'include' }); load(); }; return (
{open && (

Notifications {unread > 0 && }

{notifs.length === 0 ?
No notifications
: ( notifs.map(n => (
markOne(n.id)} style={{padding:'8px 10px',borderRadius:8,cursor:'pointer',background:n.read?'transparent':'rgba(99,102,241,.06)',marginBottom:4,transition:'background .15s'}}>
{n.message||n.title||'Notification'}

{n.created_at ? new Date(n.created_at).toLocaleString() : ''}

)) )}

)}
); } /* ══════════════════════════════════════════════════════════════ INVITATIONS PANEL ══════════════════════════════════════════════════════════ */ function InvitationsPanel() { const [invites, setInvites] = React.useState([]); const [busy, setBusy] = React.useState(false); const load = async () => { try { const r = await fetch(window.FLUENTRA_API + '/api/v1/users/me/invitations', { credentials: 'include' }); if (!r.ok) return; const data = await r.json(); setInvites(Array.isArray(data) ? data : []); } catch(e) {} }; React.useEffect(() => { load(); }, []); const respond = async (id, action) => { setBusy(true); try { const r = await fetch(window.FLUENTRA_API + '/api/v1/invitations/' + id + '/' + action, { method: 'POST', credentials: 'include' }); if (!r.ok) throw new Error('Failed'); if (action === 'accept') { const tenantsRes = await fetch(window.FLUENTRA_API + '/api/v1/users/me/tenants', { credentials: 'include' }); const tenants = await tenantsRes.json().catch(() => []); const stored = JSON.parse(localStorage.getItem('fluentra_user') || '{}'); stored.tenants = Array.isArray(tenants) ? tenants : []; const inv = invites.find(i => i.id === id); if (inv && inv.tenant_id) { stored.active_tenant_id = inv.tenant_id; await fetch(window.FLUENTRA_API + '/api/v1/users/me/tenants/switch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tenant_id: inv.tenant_id }), credentials: 'include', }); } localStorage.setItem('fluentra_user', JSON.stringify(stored)); window.location.reload(); } else { load(); } } catch(e) { if (window.modalAlert) window.modalAlert('Failed to ' + action + ' invitation'); } finally { setBusy(false); } }; if (invites.length === 0) return null; return (

Invitations
{invites.map(inv => (
{inv.tenant_name||inv.tenant_id}

))}
); } /* ══════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════ */ function Sidebar({ page, setPage, user, tenantName }) { const items = [ { id:'dashboard', icon:'grid', label:'Dashboard' }, { id:'diagrams', icon:'diagram', label:'Diagrams' }, { id:'instances', icon:'play', label:'Instances' }, { id:'history', icon:'history', label:'Instance history' }, { id:'editor', icon:'edit', label:'Diagram editor' }, ]; const initials = (user?.email||'U').slice(0,2).toUpperCase(); const [menuOpen, setMenuOpen] = React.useState(false); const [showChangePw, setShowChangePw] = React.useState(false); const handleLogout = async () => { await fetch(window.FLUENTRA_API + '/api/v1/users/logout', { method: 'POST', credentials: 'include' }); localStorage.removeItem('fluentra_user'); window.location.reload(); }; return (

Fluentra v2.0

Workspace
{items.map(it => (
setPage(it.id)}> {it.label}
))}
Settings

setPage('tenant')}> Manage tenant

setMenuOpen(v=>!v)}>
{initials}

{(user?.email||'').split('@')[0]||'User'} {tenantName||'No tenant'}

{menuOpen && (

{user?.email}

{user?.email_verified === false && ( )}
)} {showChangePw && setShowChangePw(false)}/>}

); } /* ══════════════════════════════════════════════════════════════ TOPBAR ══════════════════════════════════════════════════════════ */ function Topbar({ page, tenantTab, tenantName, onRefresh }) { const titles = { dashboard:'Dashboard', diagrams:'Diagrams', instances:'Instances', history:'Instance history', editor:'Diagram editor', tenant:'Tenant', instance:'Instance details' }; return (

{tenantName||'—'} / {titles[page]||page} {page==='tenant' && tenantTab && (<>/{tenantTab})}

{tenantName||'—'}
{onRefresh && }
); } /* ══════════════════════════════════════════════════════════════ ERROR BOUNDARY ══════════════════════════════════════════════════════════ */ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, info) { console.error('[ErrorBoundary]', error, info); } render() { if (this.state.hasError) { return (

Something went wrong

The application encountered an unexpected error. Please refresh the page to try again.

); } return this.props.children; } } /* ══════════════════════════════════════════════════════════════ APP ROOT ══════════════════════════════════════════════════════════ */ function App() { const [authState, setAuthState] = React.useState(() => { try { const stored = localStorage.getItem('fluentra_user'); if (stored) return JSON.parse(stored); } catch(e){} return null; }); const [page, setPage] = React.useState('dashboard'); const [tenantTab, setTenantTab] = React.useState('details'); const [tenantName, setTenantName] = React.useState(''); const [refreshKey, setRefreshKey] = React.useState(0); const [selectedInstanceId, setSelectedInstanceId] = React.useState(null); const [modal, setModal] = React.useState(null); // ── Modal API ───────────────────────────────────────────────── React.useEffect(() => { window.modalConfirm = (msg) => new Promise((resolve) => setModal({type:'confirm', msg, resolve})); window.modalPrompt = (msg, def='') => new Promise((resolve) => setModal({type:'prompt', msg, defaultValue:def, resolve})); window.modalAlert = (msg) => new Promise((resolve) => setModal({type:'alert', msg, resolve})); window.setAppPage = (p) => setPage(p); }, []); // ── Derived (safe even when authState is null) ──────────────── const tenantId = authState?.active_tenant_id || null; const tenants = authState?.tenants || []; // ── ALL hooks BEFORE any conditional return (Rules of Hooks) ── // Load tenant name whenever tenantId becomes known React.useEffect(() => { if (!tenantId) return; window.__FETCH__('/api/v1/tenants/' + tenantId) .then(r => r?.json()) .then(d => { if (d?.tenant_name) setTenantName(d.tenant_name); }) .catch(()=>{}); }, [tenantId]); // Hash-based routing (read once on mount) React.useEffect(() => { try { const h = location.hash.replace('#',''); if (h && ['dashboard','diagrams','instances','instance','history','editor','tenant'].includes(h)) setPage(h); } catch(e){} }, []); // Keep URL hash in sync with current page React.useEffect(() => { try { history.replaceState(null,'','#'+page); } catch(e){} }, [page]); // Email verification redirect handling React.useEffect(() => { try { const params = new URLSearchParams(window.location.search); const verified = params.get('verified'); if (verified === 'success') { // Refetch user data so email_verified is updated in state fetch(window.FLUENTRA_API + '/api/v1/users/me', { credentials: 'include' }) .then(r => r.ok ? r.json() : null) .then(user => { if (user && authState) { const stored = JSON.parse(localStorage.getItem('fluentra_user') || '{}'); stored.email_verified = user.email_verified; localStorage.setItem('fluentra_user', JSON.stringify(stored)); setAuthState(stored); } }) .catch(()=>{}) .finally(() => { if (window.modalAlert) window.modalAlert('Your email has been verified successfully.'); else alert('Your email has been verified successfully.'); history.replaceState(null, '', window.location.pathname + window.location.hash); }); } else if (verified === 'error') { const msg = params.get('message') || 'Email verification failed.'; if (window.modalAlert) window.modalAlert(msg); else alert(msg); history.replaceState(null, '', window.location.pathname + window.location.hash); } } catch(e){} }, []); // Track hash in state so child components can navigate via window.location.hash const [hash, setHash] = React.useState(window.location.hash); React.useEffect(() => { const onHashChange = () => setHash(window.location.hash); window.addEventListener('hashchange', onHashChange); return () => window.removeEventListener('hashchange', onHashChange); }, []); // ── Conditional rendering AFTER all hooks ───────────────────── if (!authState) { if (hash === '#forgot-password') return ; if (hash === '#reset-password') return ; return setAuthState(u)}/>; } if (!tenantId) { if (tenants.length === 0) return (

No Tenant Access

You don't belong to any tenant yet.

Once approved by a platform admin, you'll be able to access your tenant.

); return setAuthState(u)}/>; } const sidebarPage = page === 'instance' ? 'instances' : page; const auth = { userId: authState.user_id, email: authState.email, tenantId, tenants, token: authState.token, isAdmin: authState.is_platform_admin || false, email_verified: authState.email_verified, }; const goInstance = (id) => { setSelectedInstanceId(id); setPage('instance'); }; const closeModal = (value) => { if (modal) { modal.resolve(value); setModal(null); } }; return (

setRefreshKey(k=>k+1)}/>

{page==='dashboard' && } {page==='diagrams' && } {page==='instances' && } {page==='instance' && setPage('instances')}/>} {page==='history' && } {page==='editor' && } {page==='tenant' && }

{/* Custom Modals */} {modal && (
closeModal(modal.type==='confirm'?false:null)}>
e.stopPropagation()}> {modal.type==='confirm' && ( <>
{modal.msg}

)} {modal.type==='alert' && ( <>
{modal.msg}

)} {modal.type==='prompt' && ( closeModal(v)} onCancel={()=>closeModal(null)}/> )}

)} ); } function PromptModalContent({ msg, defaultValue, onSubmit, onCancel }) { const [val, setVal] = React.useState(defaultValue||''); const ref = React.useRef(null); React.useEffect(() => { setTimeout(()=>ref.current?.focus(), 50); }, []); return ( <>
{msg}
setVal(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')onSubmit(val);}} style={{marginBottom:20,width:'100%'}}/>

); } ReactDOM.createRoot(document.getElementById('app')).render();