{kicker}
: null} +
+
+
+
+ )
+}
diff --git a/website/src/components/layout/MarketingShell.tsx b/website/src/components/layout/MarketingShell.tsx
new file mode 100644
index 0000000..d0bb48d
--- /dev/null
+++ b/website/src/components/layout/MarketingShell.tsx
@@ -0,0 +1,89 @@
+import { Link, NavLink } from 'react-router-dom'
+import { usePlatformAuth } from '../../auth/platform-auth'
+import { brandConfig } from '../../site-config'
+import { footerLinks } from '../../site-data'
+
+const marketingLinks = [
+ { to: '/', label: 'Home' },
+ { to: '/about', label: 'About' },
+ { to: '/resources', label: 'Resources' },
+ { to: '/pricing', label: 'Pricing' },
+ { to: '/download', label: 'Download' },
+] as const
+
+export function MarketingShell({
+ title,
+ eyebrow,
+ lede,
+ children,
+}: {
+ title: string
+ eyebrow: string
+ lede: string
+ children: React.ReactNode
+}) {
+ const { isAuthenticated } = usePlatformAuth()
+
+ return (
+
+
+
+
+
+
+
+
+ Operator access
+HyperTwist dashboard
+
+ {user?.name || 'Operator'}
+ {user?.plan || 'free'} plan
+
+
+
+
+ 
+
+ {brandConfig.brandName}
+ {brandConfig.tagline}
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
diff --git a/website/src/components/routes/ProtectedRoute.tsx b/website/src/components/routes/ProtectedRoute.tsx
new file mode 100644
index 0000000..27bbfcc
--- /dev/null
+++ b/website/src/components/routes/ProtectedRoute.tsx
@@ -0,0 +1,18 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { usePlatformAuth } from '../../auth/platform-auth'
+import { GeneralPageLoader } from '../ui/Skeletons'
+
+export function ProtectedRoute() {
+ const { isAuthenticated, isLoading } = usePlatformAuth()
+ const location = useLocation()
+
+ if (isLoading) {
+ return
+
+ {brandConfig.brandName}
+ {brandConfig.tagline}
+
+
+
+
+
+ {isAuthenticated ? 'Open dashboard' : 'Log in'}
+
+
+ Get desktop app
+
+
+ {eyebrow}
+{title}
+{lede}
+
+
+ )
+}
diff --git a/website/src/components/ui/agent-spinners.tsx b/website/src/components/ui/agent-spinners.tsx
new file mode 100644
index 0000000..17d46db
--- /dev/null
+++ b/website/src/components/ui/agent-spinners.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState, type CSSProperties } from 'react'
+
+const spinnerRegistry = {
+ cascade: {
+ frames: [
+ '⠀⠀⠀⠀',
+ '⠁⠀⠀⠀',
+ '⠋⠀⠀⠀',
+ '⠞⠁⠀⠀',
+ '⡴⠋⠀⠀',
+ '⣠⠞⠁⠀',
+ '⢀⡴⠋⠀',
+ '⠀⣠⠞⠁',
+ '⠀⢀⡴⠋',
+ '⠀⠀⣠⠞',
+ '⠀⠀⢀⡴',
+ '⠀⠀⠀⣠',
+ '⠀⠀⠀⢀',
+ ],
+ interval: 60,
+ },
+ orbit: {
+ frames: ['⠃', '⠉', '⠘', '⠰', '⢠', '⣀', '⡄', '⠆'],
+ interval: 90,
+ },
+} as const
+
+function useSpinnerFrame(frames: readonly string[], interval: number) {
+ const [index, setIndex] = useState(0)
+
+ useEffect(() => {
+ const id = window.setInterval(() => {
+ setIndex((current) => (current + 1) % frames.length)
+ }, interval)
+ return () => window.clearInterval(id)
+ }, [frames, interval])
+
+ return frames[index] ?? ''
+}
+
+export function NamedAgentSpinner({
+ name,
+ size = 28,
+ color = 'currentColor',
+ className,
+ style,
+}: {
+ name: keyof typeof spinnerRegistry
+ size?: number
+ color?: string
+ className?: string
+ style?: CSSProperties
+}) {
+ const meta = spinnerRegistry[name]
+ const frame = useSpinnerFrame(meta.frames, meta.interval)
+
+ return (
+
+
+ {title}
+
+
+ {frame}
+
+
+ )
+}
diff --git a/website/src/main.tsx b/website/src/main.tsx
new file mode 100644
index 0000000..c4c5b6d
--- /dev/null
+++ b/website/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+ {healthQuery.isLoading ?
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export function DownloadCenterPage() {
+ const { user } = usePlatformAuth()
+ const canDownload = user?.canDownload === true
+
+ return (
+ {user?.name}
+{user?.email}
+Plan: {user?.plan}
+Role: {user?.role || 'operator'}
+Desktop downloads: {user?.canDownload ? 'enabled' : 'not yet entitled'}
+Checking auth server health...
: null} + {healthQuery.isError ?Auth health probe failed. The local fallback can still keep the dashboard usable.
: null} + {healthQuery.data ? ( +-
+
- Service: {healthQuery.data.service} +
- SuperTokens configured: {healthQuery.data.supertokens.configured ? 'yes' : 'no'} +
- SuperTokens core reachable: {healthQuery.data.supertokens.reachable ? 'yes' : 'no'} +
- SuperTokens ready: {healthQuery.data.supertokens.ready ? 'yes' : 'no'} +
- Fallback enabled: {healthQuery.data.fallback.enabled ? 'yes' : 'no'} +
- Fallback active: {healthQuery.data.fallback.active ? 'yes' : 'no'} +
- Core API version: {healthQuery.data.supertokens.apiVersion || 'unavailable'} +
- OAuth routes: GitHub {healthQuery.data.supertokens.oauth?.github ? 'on' : 'off'}, Google {healthQuery.data.supertokens.oauth?.google ? 'on' : 'off'} +
+ Shared auth core is not fully ready right now. Dashboard fallback posture remains available{healthQuery.data.fallback.reason ? ` (${healthQuery.data.fallback.reason})` : ''}. +
+ ) : null} +Generate a short-lived token so the local desktop runtime can verify your browser session without exposing account credentials.
+ + {desktopLinkMutation.isError ? ( +Could not generate a token. Ensure the auth server is reachable and your session is valid.
+ ) : null} + {desktopLinkMutation.data ? ( +
+
+ ) : null}
+ Token: {desktopLinkMutation.data.token}
Expires: {desktopLinkMutation.data.expires_at}
+Verify URL: {verifyUrl || 'same-origin verify route'}
-
+
- Source: {user?.billing?.source || 'session'} +
- Access status: {user?.billing?.accessStatus || 'session-default'} +
- Desktop download access: {user?.billing?.canDownload ? 'enabled' : 'not yet enabled'} +
- Last billing event: {user?.billing?.lastEventType || 'none recorded'} +
-
+ {roadmapHonestyCards.map((item) => (
+
- {item} + ))} +
+
+ {!canDownload ? (
+
+
+ )
+}
+
+export function BrowserAccessPage() {
+ return (
+ + Your current account does not yet have desktop download entitlement. + Complete the matching checkout or operator provisioning step, then refresh this dashboard. +
+ ) : null} +
+ {downloadTargets.map((target) => (
+
+
+ ))}
+
+ {target.platform}
+{target.details}
+ {target.href && canDownload ? ( + + Download {target.platform} + + ) : ( +
+ {target.href ? 'Account not entitled yet' : 'Release URL not configured yet'}
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+export function AccountPage() {
+ const { user, superTokensConfigured } = usePlatformAuth()
+
+ return (
+ -
+
- The embedded browser/CEF shell is live and owned as part of the current shipping posture. +
- Browser runtime status, runtime-ready typing, and native operator diagnostics are already surfaced in the desktop runtime. +
- The public browser dashboard is for operator/account/release access, not a claim of full simulator parity. +
-
+
- The optional full-browser client remains spec-only. +
- MagicTile native renderer widening remains explicit No-Go until a real browser-host gap is proven. +
- This dashboard intentionally stays above those boundaries instead of silently crossing them. +
+
+
+
+ )
+}
+
+export function NoticesPage() {
+ return (
+ -
+
- Email: {user?.email} +
- Name: {user?.name} +
- Plan: {user?.plan} +
- Desktop downloads: {user?.canDownload ? 'enabled' : 'not yet entitled'} +
- Billing status: {user?.billing?.accessStatus || 'session-default'} +
- Auth stack: {superTokensConfigured ? 'SuperTokens-backed' : 'Local fallback mode'} +
+
+
+
+ )
+}
diff --git a/website/src/pages/auth-pages.tsx b/website/src/pages/auth-pages.tsx
new file mode 100644
index 0000000..9a19b8e
--- /dev/null
+++ b/website/src/pages/auth-pages.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { usePlatformAuth } from '../auth/platform-auth'
+import { isGitHubOAuthEnabled, isGoogleOAuthEnabled, isOrcidOAuthEnabled } from '../auth/supertokens-client'
+
+function AuthShell({
+ title,
+ subtitle,
+ children,
+ footer,
+}: {
+ title: string
+ subtitle: string
+ children: React.ReactNode
+ footer: React.ReactNode
+}) {
+ return (
+ + Pricing, checkout, and download surfaces must expose open-source notices and corresponding-source guidance whenever shipped builds contain MPL-covered material. +
++ Current corresponding-source URL: {mplSourceUrl || 'configure VITE_MPL_SOURCE_URL before public launch'} +
+
+
+ )
+}
+
+function useNextPath() {
+ const [searchParams] = useSearchParams()
+ const next = searchParams.get('next') || '/app'
+ return next.startsWith('/') ? next : '/app'
+}
+
+export function LoginPage() {
+ const navigate = useNavigate()
+ const { login, isAuthenticated } = usePlatformAuth()
+ const nextPath = useNextPath()
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [error, setError] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate(nextPath, { replace: true })
+ }
+ }, [isAuthenticated, navigate, nextPath])
+
+ async function handleSubmit(event: React.FormEvent
+
+ Browser account access
+{title}
+{subtitle}
+ {children} +{footer}
+
+ {isGoogleOAuthEnabled() ? (
+
+ ) : null}
+ {isGitHubOAuthEnabled() ? (
+
+ ) : null}
+ {isOrcidOAuthEnabled() ? (
+
+ ) : null}
+
+
+
+ {children}
+ {title}
+ {description ?{description}
: null} +
+
+
+
+ + HyperTwist is a native training environment for classic cube, higher-dimensional + families, browser-assisted recognition, replay explanation, and desktop packaging. + The public site is intentionally honest: the desktop runtime is real, the browser + account/dashboard is real, and the optional full-browser simulator path remains spec-only. +
+
+
+ Download desktop app
+
+
+ Open operator dashboard
+
+
+ View pricing
+
+
+
+
+
+
+ + Browser account shell outside the simulator. Native Unreal runtime inside the simulator. +
+
+ {heroMetrics.map((metric) => (
+
+ {metric.value}
+ {metric.label}
+
+ ))}
+
+
+ {shippingNowCards.map((item) => (
+
+
+ ))}
+
+ {item}
+
+ {capabilityPillars.map((pillar) => (
+
+
+ ))}
+
+ {pillar.title}
+{pillar.description}
+
+ {roadmapHonestyCards.map((item) => (
+
+
+ ))}
+
+ {item}
+
+
+
+
+
+
+
+
+ Browser account and operator shell
+Authenticated browser access for release posture, desktop pairing, notices, and operator state.
+ + Open dashboardDesktop download and package lane
+Public download posture for the native Unreal build, with legal linkage already wired in.
+ + Open download centerCheckout and notices discipline
+Paddle-ready pricing plus public notices surfaces for any downloadable build containing MPL-covered material.
+ + Review notices
+
+ {companyNarrative.mission}
+{companyNarrative.posture}
+{companyNarrative.distribution}
+
+
+
+
+
+
+
+
+ It treats higher-dimensional puzzles as first-class work
+120-cell and 5D runtime ownership are not hand-wavy aspirations. They are part of the current product truth.
+It stays roadmap-honest
+Shipped, retained, and spec-only surfaces remain clearly separated so public copy matches actual authority.
+It separates browser shell from simulator truth
+The public web surface helps operators access the product without pretending the browser already replaces the desktop runtime.
+
+ {filteredCollections.map((collection) => (
+
+
+ ))}
+
+ {collection.title}
+-
+ {collection.items.map((item) => (
+
- {item} + ))} +
+
+
+ Docs landing
+Product-facing documentation, boundaries, and rollout guidance.
+ + +Support
+Contact, rollout questions, and account/download help.
+ + +Release notes
+Recent public-facing packets and posture updates.
+ +
+
+
+
+
+
+
+
+ Feature truth
+Use documentation derived from the feature registry so shipped capability, retained capability, and spec-only branches are not mixed together.
+Roadmap truth
+Roadmap-facing copy should say the embedded browser shell is live, while the optional full-browser client remains separate and frozen as spec-only.
+Distribution truth
+Pricing, checkout, and download docs must stay linked to open-source notices whenever shipped builds contain MPL-covered material.
++ Email {brandConfig.contact.email} for account activation, + release enablement, pricing configuration, or deployment help. +
+
+ {supportFaqs.map((faq) => (
+
+
+ ))}
+
+ {faq.question}
+{faq.answer}
+
+ {changelogEntries.map((entry) => (
+
+
+ ))}
+
+ {entry.date}
+{entry.title}
+{entry.details}
+
+ {planCatalog.map((plan) => (
+
+
+ ))}
+
+ {plan.name}
+{plan.price}
+{plan.notes}
+-
+ {plan.features.map((feature) => (
+
- {feature} + ))} +
+ Public pricing, checkout, and download pages are distribution surfaces. Before external launch, + keep their legal footer and open-source notices link live and ensure the corresponding-source URL is configured for any downloadable build containing MPL-covered material. +
+
+ {downloadTargets.map((target) => (
+
+
+ ))}
+
+ {target.platform}
+{target.subtitle}
+{target.details}
+ {target.href ? ( + + Sign in for {target.platform} access + + ) : ( +
+ Release URL not configured yet
+
+ )}
+ + HyperTwist treats desktop distribution as an account-gated release surface. + Public pages can describe supported targets and release posture, but the actual + download links live behind the protected dashboard where plan and entitlement + state are resolved. +
+ + Sign in to check access + ++ After sign-in, open the operator dashboard to generate a desktop-link token. + That token is designed to hand browser identity and plan posture over to the local desktop app without exposing your password. +
+ + Open dashboard + +
+ {openSourceNotices.map((item) => (
+
+
+ ))}
+
+ {item.component}
+{item.license}
+{item.whyItMatters}
+
+
+ + MPL-covered shipped builds need a stable corresponding-source location for the exact distributed material. +
+-
+
- + Public corresponding-source URL:{' '} + {sourceAvailability.mplSourceUrl ? ( + {sourceAvailability.mplSourceUrl} + ) : ( + 'configure VITE_MPL_SOURCE_URL before public launch' + )} + +
- + Public repository / notices reference:{' '} + {sourceAvailability.openSourceRepoUrl ? ( + {sourceAvailability.openSourceRepoUrl} + ) : ( + 'configure VITE_OPEN_SOURCE_REPO_URL before public launch' + )} + +
+ Official MPL 2.0 license text:{' '} + + https://www.mozilla.org/en-US/MPL/2.0/ + +
+-
+
- The public website stores account/session data needed for authentication, plan access, and desktop-link issuance. +
- The browser shell does not claim ownership over the full simulator runtime state unless a future browser-client packet is explicitly opened. +
- Support, billing, and release operations should collect only the data required to deliver digital access and maintain legal compliance. +
-
+
- Browser access covers public pages, account, release, download, and operator/dashboard surfaces. +
- The simulator itself is delivered through the desktop lane unless a later browser-client branch is explicitly opened. +
- Downloaded builds and their public distribution pages remain subject to open-source notice and corresponding-source disclosure rules where applicable. +
{paddleReadyDescription}
+-
+
- No physical goods ship through this site. +
- Pricing and checkout are structured for Paddle-backed digital plans. +
- Desktop downloads must remain paired with public notices and legal links when required by shipped-code obligations. +