// Mobile FIRST-RUN onboarding — 6 screens // 1 Welcome → 2 Password → 3 Profile → 4 Loading → 5 Sync → 6 Success // // Visual language: Ajna dark + accent gradient + Geist/JetBrains Mono. // Designed edge-to-edge (Android 15+); status bar is the host's, no app bar. // Each screen is a self-contained component receiving { onNext, onBack, ctx, setCtx }. const FR_STEPS = [ { id: 'welcome', label: 'Welcome' }, { id: 'default', label: 'Default' }, { id: 'password', label: 'Password' }, { id: 'profile', label: 'Profile' }, { id: 'loading', label: 'Setup' }, { id: 'sync', label: 'Sync' }, { id: 'success', label: 'Done' }, ]; // ── Ajna mark — gradient diamond glyph ───────────────────────── function AjnaMark({ size = 56, glow = true }) { return ( ); } // ── Animated welcome illustration — peer-to-peer constellation ── function FRWelcomeIllo() { const ORBITS = [ { r: 58, speed: 22, dir: 1, border: 'rgba(96,165,250,0.10)', peers: [ { a: 0, c: M_ACCENT_B, size: 10 }, { a: 165, c: M_ACCENT, size: 8 }, ]}, { r: 96, speed: 34, dir: -1, border: 'rgba(110,231,183,0.08)', peers: [ { a: 40, c: '#A78BFA', size: 7 }, { a: 200, c: '#FBBF24', size: 9 }, { a: 310, c: M_ACCENT_B, size: 6 }, ]}, ]; const SIZE = 240; return (
{/* radial ambient glow */}
{/* expanding ripples from center */} {[0, 1.4, 2.8].map((delay, i) => (
))} {/* signal beams between center and an outer peer */} {[ { x2: SIZE/2 + 96, y2: SIZE/2 - 30, delay: 0.4 }, { x2: SIZE/2 - 80, y2: SIZE/2 + 60, delay: 1.6 }, { x2: SIZE/2 + 50, y2: SIZE/2 + 90, delay: 2.8 }, ].map((b, i) => ( ))} {/* orbit rings + peers */} {ORBITS.map((o, oi) => (
0 ? 'frwRot' : 'frwRotR'} ${o.speed}s linear infinite`, }}> {o.peers.map((p, i) => (
))}
))} {/* center mark */}
); } // ── Generic primary CTA ─────────────────────────────────────── function FRPrimary({ children, disabled, onClick, icon, style = {} }) { return ( ); } function FRTextLink({ children, onClick, style = {} }) { return ( ); } // ── 1. WELCOME ──────────────────────────────────────────────── function FRWelcome({ onNext, onSkipToImport }) { return (
Welcome to Ajna
A browser that owns its identity. Yours. End-to-end, peer-to-peer.
{[ { ic: MIc.shield, title: 'Self-sovereign identity', sub: 'Cryptographic keys live on your device' }, { ic: MIc.bluetooth, title: 'Talk to anyone, anywhere', sub: 'Internet, mesh, or Bluetooth — automatic' }, { ic: MIc.bolt, title: 'No accounts, no servers', sub: 'You are the network' }, ].map((b, i) => (
{b.ic({ s: 16 })}
{b.title}
{b.sub}
))}
}>Get started
); } // ── 2. PASSWORD ────────────────────────────────────────────── function FRPassword({ onNext, onBack, ctx, setCtx, onUseExisting }) { const [pw, setPw] = React.useState(ctx.pw || ''); const [pw2, setPw2] = React.useState(ctx.pw2 || ''); const [showA, setShowA] = React.useState(false); const [showB, setShowB] = React.useState(false); const tooShort = pw.length > 0 && pw.length < 8; const mismatch = pw2.length > 0 && pw !== pw2; const valid = pw.length >= 8 && pw === pw2; // strength: chars + variety const score = React.useMemo(() => { let s = 0; if (pw.length >= 8) s++; if (pw.length >= 12) s++; if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++; if (/[0-9]/.test(pw)) s++; if (/[^A-Za-z0-9]/.test(pw)) s++; return Math.min(s, 4); }, [pw]); const strength = score <= 1 ? { label: 'Weak', color: '#F87171', bars: 1 } : score === 2 ? { label: 'Fair', color: '#FBBF24', bars: 2 } : score === 3 ? { label: 'Good', color: '#22D27A', bars: 3 } : { label: 'Strong', color: M_ACCENT, bars: 4 }; const submit = () => { if (!valid) return; setCtx({ ...ctx, pw, pw2 }); onNext(); }; return (
{pw.length > 0 && (
{[1,2,3,4].map(i => (
))}
{strength.label}
)}
{MIc.shield({ s: 14 })}
Try not to lose it — your password stays on this device. If you do, social recovery lets a few trusted contacts help you back in.
Continue {onUseExisting && } ); } function FRPasswordField({ value, onChange, placeholder, show, setShow, error, ok }) { const borderColor = error ? 'rgba(248,113,113,0.45)' : ok ? 'rgba(110,231,183,0.4)' : value ? 'rgba(96,165,250,0.4)' : M_BORDER_SOFT; return (
onChange(e.target.value)} placeholder={placeholder} style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: M_FG, fontSize: 14.5, fontFamily: show ? 'JetBrains Mono, monospace' : 'inherit', letterSpacing: show ? '0.02em' : '0.18em', minWidth: 0, }} />
{error && (
{error}
)}
); } // ── 3. PROFILE ─────────────────────────────────────────────── function FRProfile({ onNext, onBack, ctx, setCtx }) { const [name, setName] = React.useState(ctx.name || ''); const [handle, setHandle] = React.useState(ctx.handle || ''); const valid = name.trim().length >= 1; const initial = (name.trim()[0] || '?').toUpperCase(); const submit = () => { if (!valid) return; setCtx({ ...ctx, name, handle }); onNext(); }; return (
{initial}
Tap to change photo
setHandle(v.replace(/^@/, '').replace(/[^a-z0-9-]/gi, '').toLowerCase())} placeholder="yourname" prefix="@" maxLength={80} mono hint="Others can find you with @your-handle" />
Continue ); } function FRTextField({ label, value, onChange, placeholder, autoFocus, maxLength, prefix, optional, mono, hint }) { const focused = !!value; return (
{label} {optional && · optional}
{prefix && {prefix}} onChange(e.target.value)} placeholder={placeholder} style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: M_FG, fontSize: 15, fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit', minWidth: 0, }} />
{hint &&
{hint}
}
); } // ── 4. LOADING ─────────────────────────────────────────────── function FRLoading({ onNext }) { const stepDefs = [ 'Encrypting with your password', 'Generating identity keys', 'Registering with the network', 'Connecting mediator', ]; const [stepIdx, setStepIdx] = React.useState(0); const [reassureIdx, setReassureIdx] = React.useState(0); const reassures = [ 'This usually takes a few seconds…', 'Strong cryptography, every time.', 'Almost there — securing your keys.', ]; React.useEffect(() => { const t1 = setInterval(() => setReassureIdx(i => (i + 1) % reassures.length), 2400); const advance = (i) => { if (i >= stepDefs.length) { setTimeout(onNext, 600); return; } setStepIdx(i); setTimeout(() => advance(i + 1), 1300); }; advance(1); return () => clearInterval(t1); }, []); return (
{/* spinner orbit */}
Setting up your identity
{reassures[reassureIdx]}
{stepDefs.map((label, i) => { const state = i < stepIdx ? 'done' : i === stepIdx ? 'active' : 'idle'; return (
{state === 'done' && ( )} {state === 'active' && ( )}
{label}
{state === 'active' && ( RUNNING )}
); })}
Ed25519 · X25519 · DID:KEY
); } // ── 5. SYNC ────────────────────────────────────────────────── function FRSync({ onNext, onBack }) { return (
You can pair anytime in Settings › Sync
); } // ── 6. SUCCESS ─────────────────────────────────────────────── function FRSuccess({ onNext, ctx }) { const [copied, setCopied] = React.useState(false); const did = 'did:ajna:k1z' + (ctx.handle ? ctx.handle.slice(0, 3) + 'P9' : 'qX7P9') + '7yA'; const initial = (ctx.name?.trim()?.[0] || 'A').toUpperCase(); const copy = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); }; return (
{/* confetti dots */}
{[ { l: '15%', t: '12%', c: M_ACCENT, d: 0 }, { l: '85%', t: '8%', c: M_ACCENT_B, d: 0.2 }, { l: '20%', t: '38%', c: '#F472B6', d: 0.4 }, { l: '78%', t: '42%', c: '#FBBF24', d: 0.1 }, { l: '8%', t: '58%', c: M_ACCENT_B, d: 0.5 }, { l: '90%', t: '62%', c: M_ACCENT, d: 0.3 }, ].map((p, i) => (
))}
{/* check ring */}
You're all set
Share your address to receive messages from anyone on Ajna.
{/* name pill */}
{initial}
{ctx.name || 'Your name'}
{ctx.handle && @{ctx.handle}}
{/* DID */}
{MIc.shield({ s: 14 })} {did} {copied ? ( <> COPIED ) : ( <> COPY )}
}>Start browsing
); } // ── Page chrome — back button + scroll body ────────────────── function FRPage({ children, onBack }) { return (
{children}
); } function FRHeader({ title, subtitle }) { return (
{title}
{subtitle}
); } function FRFooter({ children }) { return (
{children}
); } // ── Progress bar ───────────────────────────────────────────── function FRProgress({ idx, total }) { const pct = ((idx + 1) / total) * 100; return (
); } // ── Flow shell ─────────────────────────────────────────────── function MFirstRunFlow({ onComplete }) { const [idx, setIdx] = React.useState(0); const [ctx, setCtx] = React.useState({}); const next = () => setIdx(i => Math.min(i + 1, FR_STEPS.length - 1)); const back = () => setIdx(i => Math.max(i - 1, 0)); const finish = () => onComplete && onComplete(); // Skip identity setup entirely — chat / sync / mesh stay locked until the // user completes setup from the Messages gate (MIdentityGate). const skipIdentity = () => { try { localStorage.setItem('ajna-identity-ready', '0'); } catch {} finish(); }; const completeAll = () => { try { localStorage.setItem('ajna-identity-ready', '1'); } catch {} finish(); }; // for loading screen, advance is automatic const screen = FR_STEPS[idx].id; return ( {screen !== 'welcome' && screen !== 'default' && screen !== 'loading' && screen !== 'success' && }
{screen === 'welcome' && } {screen === 'default' && } {screen === 'password' && } {screen === 'profile' && } {screen === 'loading' && } {screen === 'sync' && } {screen === 'success' && } {/* Skip identity — available on the password + profile steps */} {(screen === 'password' || screen === 'profile') && ( )}
); } // ── Default-browser step — Opera-style promo card with Skip ───── function FRDefaultBrowser({ onNext, onSkip }) { const rows = [{ mock: true }, { ajna: true }, { mock: true }, { mock: true }]; const tile = (d) => (
{d}
); return (
{/* Illustration — tilted accent card + default-picker sheet */}
{tile()} {tile()} {tile()}
Set Ajna as your default browser?
{rows.map((r, i) => (
{r.ajna ? <>Ajna : <>} {r.ajna && }
))}
Browse on your terms
Set Ajna as your default browser so every link opens private, encrypted, and mesh-ready.
{/* Why Ajna — feature rows with Ajna ✓ vs Chrome — */}
Chrome
{[ { l: 'Ad blocker', ic: , color: M_ACCENT }, { l: 'Mesh messaging', ic: MIc.mesh({ s: 15 }), color: '#A78BFA' }, { l: 'Your DID identity', ic: , color: M_ACCENT_B }, { l: 'Interactive UI', ic: , color: '#FBBF24' }, ].map((f, i, arr) => (
{f.ic} {f.l}
))}
); } // ── Identity gate — shown on Messages/Chat when setup was skipped ── function MIdentityGate({ onSetup }) { const locked = [ { l: 'Chat & messaging', s: 'End-to-end encrypted DMs', ic: MIc.chat }, { l: 'Mesh & sync', s: 'Peers, devices, shared groups', ic: MIc.mesh }, { l: 'Calls', s: 'DIDComm voice & video', ic: MIc.calls }, ]; return (
{[0, 1].map(i =>
)}
Set up your identity
You skipped setup. Messaging needs your keys — a password, a name, and a handle. Takes about a minute.
{locked.map((f, i) => (
{f.ic({ s: 15 })}
{f.l}
{f.s}
))}
Keys never leave this device
); } // ── In-app identity setup — password → profile → keygen → done ─── function MIdentitySetupFlow({ onComplete, onCancel }) { const steps = ['password', 'profile', 'loading', 'success']; const [idx, setIdx] = React.useState(0); const [ctx, setCtx] = React.useState({}); const screen = steps[idx]; const next = () => { if (idx === steps.length - 1) { try { localStorage.setItem('ajna-identity-ready', '1'); } catch {} onComplete && onComplete(); } else setIdx(i => i + 1); }; const back = () => idx === 0 ? (onCancel && onCancel()) : setIdx(i => i - 1); return (
{(screen === 'password' || screen === 'profile') && (
Step {idx + 1} of 2
)}
{screen === 'password' && } {screen === 'profile' && } {screen === 'loading' && } {screen === 'success' && }
); } Object.assign(window, { MFirstRunFlow, FR_STEPS, FRDefaultBrowser, MIdentityGate, MIdentitySetupFlow });