/* fs_board.jsx — the FULL-SCREEN version of the onboarding · unhappy paths. Same flow + scenario logic as web_board.jsx, but the flow is NOT a floating focus card: it fills the whole viewport edge-to-edge. Content stays in a centered column for readability, and the entire surface is transform-scaled up (~1.3×) so type and feature sizes read at desktop scale. */ /* ---------- full-screen progress rail ------------------------------------- */ const PHASES = ["Verify", "Profile", "Secure", "Connect"]; const FsRail = ({ phase, fill, mins, onBack, canBack }) => (
≈ {mins} min left
{PHASES.map((_, i) => { const f = i < phase ? 1 : i === phase ? fill : 0; return (
); })}
{canBack ? ( ) : null}
); /* ---------- web tab bar (once the account is live) ------------------------ */ const TABS = [["home", "Home"], ["trade", "Trade"], ["chat", "Yoshi"], ["studio", "Studio"], ["accounts", "Accounts"]]; const FsTabBar = ({ tab, onTab }) => (
{TABS.map(([id, label]) => { const on = id === tab; if (id === "chat") { return ( ); } return ( ); })}
); const Toast = ({ msg }) => (
{msg}
); /* ============================================================= The flow, as a state machine. Identical to the other boards. ============================================================= */ const ORDER = ["welcome", "verifyIntro", "plaid", "provision", "success", "income", "checks", "security", "funding", "link", "agent", "disclosures", "offToWork"]; const idxOf = (k) => ORDER.indexOf(k); const STEP_META = { verifyIntro: { rail: true, phase: 0, fill: 0.5 }, success: { rail: true, phase: 0, fill: 1 }, income: { rail: true, phase: 1, fill: 0.5 }, checks: { rail: true, phase: 1, fill: 1 }, security: { rail: true, phase: 2, fill: 1 }, funding: { rail: true, phase: 3, fill: 0.34 }, link: { rail: true, phase: 3, fill: 0.67 }, agent: { rail: true, phase: 3, fill: 1 }, disclosures: { rail: true, phase: 3, fill: 1 }, }; const REVIEW_PATHS = ["identity", "screening", "watchlist", "mismatch", "records"]; const TERMINAL = { happy: "offToWork", declined: "declined" }; REVIEW_PATHS.forEach((p) => { TERMINAL[p] = "reviewHold"; }); const PROVISION_REVIEW = { watchlist: "watchlist", mismatch: "mismatch", records: "records" }; const REVIEW_REASON = { identity: "identity", screening: "screening", watchlist: "watchlist", mismatch: "mismatch", records: "records" }; const BUILD = { id: "onb-fullscreen-unhappy-2026.06.15", exported: "2026-06-15", source: "Onboarding · web · full screen · fs_board.jsx", channel: "design-prototype", }; const STEP_LABELS = { welcome: "Welcome", verifyIntro: "Verify intro", plaid: "Identity (Plaid)", provision: "Provisioning", success: "Identity confirmed", income: "Income & employment", checks: "Screening questions", security: "Security", funding: "Funding source", link: "Deposit", agent: "Connect assistant", disclosures: "Disclosures", offToWork: "Account live", reviewHold: "Manual review hold", reviewApproved: "Review approved · resume", declined: "Declined · hard stop", }; const DEEP_STEPS = Object.keys(STEP_LABELS); /* Ordered screen list for the Tweaks "Jump to" selector: the linear flow first, then the branch/terminal states. */ const SCREEN_OPTIONS = [ ...ORDER.map((k) => ({ value: k, label: STEP_LABELS[k] || k })), { value: "reviewHold", label: STEP_LABELS.reviewHold }, { value: "reviewApproved", label: STEP_LABELS.reviewApproved }, { value: "declined", label: STEP_LABELS.declined }, ]; const MOCKS = [ { k: "Identity (Plaid)", v: "Liveness + document capture are simulated; timing compressed to ~3s. No Plaid Link is opened." }, { k: "Phone / SMS", v: "No code is sent; phone verification is simulated." }, { k: "Manual review", v: "The hold and the ready-email are demo-compressed (email lands ~3s). Real reviews can take up to one business day." }, { k: "Assistant providers", v: "ChatGPT · Claude · OpenClaw · Hermes are illustrative, not the v1 external-connections catalog. Align before treating as a spec." }, { k: "Assistant connect", v: "OAuth redirect and CLI keys are simulated; no real authorization or live key is issued." }, { k: "Balances & funding", v: "Deposit and balance figures are sample data." }, ]; const NOT_MODELED = ["blocked", "retry", "empty", "error"]; const freshIdv = () => ({ phone: "", dob: "", first: "Rivka", last: "Lipson", street: "1452 Valencia St", city: "San Francisco", state: "CA", zip: "94110" }); /* ============================================================= FsDevice — the onboarding flow, full-bleed. Content held to a centered column; the whole surface is scaled up by the page CSS. ============================================================= */ const FsDevice = React.forwardRef(({ path, palette, accent, initialStep, onStep }, ref) => { const [step, setStep] = useState(initialStep || "welcome"); const [cleared, setCleared] = useState(false); const [holdReason, setHoldReason] = useState(null); const [app, setApp] = useState(false); const [tab, setTab] = useState("home"); const [toast, setToast] = useState(null); const [overlay, setOverlay] = useState(null); const [idv, setIdv] = useState(freshIdv); const [income, setIncome] = useState({ status: "Employed", company: "Northwind Labs", title2: "Product Designer", source: "Salary", incomeBand: "" }); const [checks, setChecks] = useState(() => path === "screening" ? { none: false, flags: { pep: true }, pepOrg: "", pepName: "" } : { none: false, flags: {} }); const [funding, setFunding] = useState(null); const [deposit, setDeposit] = useState(0); const [externals, setExternals] = useState([]); const [agents, setAgents] = useState([]); const reset = () => { setApp(false); setTab("home"); setToast(null); setCleared(false); setHoldReason(null); setOverlay(null); setIdv(freshIdv()); setIncome({ status: "Employed", company: "Northwind Labs", title2: "Product Designer", source: "Salary", incomeBand: "" }); setChecks(path === "screening" ? { none: false, flags: { pep: true }, pepOrg: "", pepName: "" } : { none: false, flags: {} }); setFunding(null); setDeposit(0); setExternals([]); setAgents([]); }; React.useImperativeHandle(ref, () => ({ restart: () => { reset(); setStep("welcome"); }, jump: () => { reset(); setStep(TERMINAL[path] || "welcome"); }, goTo: (s) => { reset(); setStep(DEEP_STEPS.includes(s) ? s : "welcome"); }, }), [path]); useEffect(() => { if (onStep) onStep(app ? ("app:" + tab) : step); }, [step, app, tab]); const flash = (m) => { setToast(m); setTimeout(() => setToast((x) => (x === m ? null : x)), 2200); }; const goto = (k) => setStep(k); const back = () => { let i = idxOf(step) - 1; while (i >= 0 && (ORDER[i] === "plaid" || ORDER[i] === "provision" || ORDER[i] === "success")) i--; if (i >= 0) setStep(ORDER[i]); }; const nav = useMemo(() => ({ tab: (x) => { if (x === "home") setTab("home"); else flash("That lives in the full app"); }, push: () => flash("Opens in the full app"), pop: () => {}, sheet: (s) => setOverlay(s), closeSheet: () => setOverlay(null), }), []); const screens = { welcome: goto("verifyIntro")} />, verifyIntro: goto("plaid")} />, provision: { setHoldReason(r); goto("reviewHold"); }} onDone={() => goto(path === "declined" ? "declined" : "success")} />, success: goto("income")} />, income: goto("checks")} />, checks: { const flagged = !checks.none && Object.values(checks.flags || {}).some(Boolean); if (!cleared && (path === "screening" || flagged)) { setHoldReason("screening"); goto("reviewHold"); } else goto("security"); }} />, security: goto("funding")} />, funding: goto("link")} onSkipToAgent={() => goto("agent")} />, link: goto("agent")} onSkip={() => goto("agent")} />, agent: goto("disclosures")} onSkip={() => { setAgents([]); goto("disclosures"); }} />, disclosures: goto("offToWork")} />, offToWork: { setApp(true); setTab("home"); }} />, reviewHold: goto("reviewApproved")} />, reviewApproved: { setCleared(true); goto("income"); }} />, declined: , }; const meta = STEP_META[step] || {}; const showRail = !app && meta.rail; const mins = Math.max(1, Math.ceil((idxOf("agent") - idxOf(step) + 1) / 3)); const darkScreen = !app && step === "offToWork"; return (
{!app ? ( <> {showRail && }
{screens[step]} {step === "plaid" && ( goto("provision")} onFail={() => { setHoldReason("identity"); goto("reviewHold"); }} onCancel={() => goto("verifyIntro")} /> )} {toast && }
) : ( <>
setOverlay({ type: "addmoney" })} onConnect={() => setOverlay({ type: "plaid" })} /> {overlay?.type === "plaid" && ( setOverlay(null)} onLinked={(accts) => { setExternals((p) => [...p, ...accts]); setOverlay(null); flash("Connected · " + accts[0].inst); }} /> )} {overlay?.type === "addmoney" && ( setOverlay({ type: "plaid" })} onClose={() => setOverlay(null)} /> )} {overlay?.type === "activity" && ( setOverlay(null)} /> )} {toast && }
)}
); }); /* ============================================================= Board chrome — scenarios + spec/notes panel (shared design). ============================================================= */ const PATHS = [ { id: "happy", cap: "Happy path", desc: "Verified, funded — account goes live", tone: "var(--accent-pos)" }, { id: "identity", cap: "Identity unverified", desc: "IDV retried, still no match → manual review", tone: "var(--signal-warn)" }, { id: "screening", cap: "Screening flag", desc: "PEP / insider / FINRA answer → manual review", tone: "var(--signal-warn)" }, { id: "watchlist", cap: "Watchlist hit", desc: "Name matches a watchlist → manual review", tone: "var(--signal-warn)" }, { id: "mismatch", cap: "Info mismatch", desc: "Details don't match records → manual review", tone: "var(--signal-warn)" }, { id: "records", cap: "Records unverified", desc: "Address / SSN can't be verified → manual review", tone: "var(--signal-warn)" }, { id: "declined", cap: "Declined", desc: "Application can't be approved → hard stop", tone: "var(--signal-neg)" }, ]; const pathInfo = (id) => PATHS.find((p) => p.id === id) || PATHS[0]; if (typeof window !== "undefined") { window.__YOSHI_SPEC = { build: BUILD, scenarios: PATHS.map((p) => ({ id: p.id, label: p.cap, desc: p.desc, terminal: TERMINAL[p.id] || "offToWork" })), steps: STEP_LABELS, deepLink: { params: ["scenario", "step"], example: "?scenario=watchlist&step=reviewHold" }, mocks: MOCKS, notModeled: NOT_MODELED, }; } const SpecRow = ({ k, v }) => (
{k}
{v}
); const NotesHead = ({ children }) => (
{children}
); const NotesPanel = ({ open, onClose, onOpenState, path }) => { if (!open) return null; const term = (id) => TERMINAL[id] || "offToWork"; return ( <>
); }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "graphite", "accent": "#deb24e", "path": "happy" }/*EDITMODE-END*/; const VALID_PATHS = PATHS.map((p) => p.id); const CtrlBtn = ({ children, onClick, primary, testid }) => ( ); const FsBoard = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const boot = useMemo(() => { const q = new URLSearchParams(window.location.search); const sc = q.get("scenario"); const stp = q.get("step"); return { path: VALID_PATHS.includes(sc) ? sc : null, step: DEEP_STEPS.includes(stp) ? stp : null, }; }, []); const [path, setPath] = useState(boot.path || t.path); const [bootStep, setBootStep] = useState(boot.step || null); const [bootNonce, setBootNonce] = useState(0); const [curState, setCurState] = useState(boot.step || "welcome"); const [notesOpen, setNotesOpen] = useState(false); const [copied, setCopied] = useState(false); const ref = useRef(null); useEffect(() => { if (t.path !== path) { setPath(t.path); setBootStep(null); } }, [t.path]); useEffect(() => { document.documentElement.setAttribute("data-palette", t.palette); }, [t.palette]); useEffect(() => { const q = new URLSearchParams(window.location.search); q.set("scenario", path); if (curState && curState !== "welcome") q.set("step", curState); else q.delete("step"); window.history.replaceState(null, "", window.location.pathname + "?" + q.toString()); }, [path, curState]); useEffect(() => { document.documentElement.setAttribute("data-build-id", BUILD.id); }, []); const pick = (v) => { setPath(v); setBootStep(null); setTweak("path", v); }; const openState = (sc, stp) => { setTweak("path", sc); setPath(sc); setBootStep(stp); setBootNonce((n) => n + 1); setNotesOpen(false); }; const copyLink = () => { try { navigator.clipboard && navigator.clipboard.writeText(window.location.href); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1600); }; const info = pathInfo(path); return ( <>
{/* slim utility bar — the prototype controls live here so the flow stays full-bleed */}
Onboarding · unhappy paths
ref.current && ref.current.restart()}>Restart ref.current && ref.current.jump()}>Jump to outcome → state · {curState} {copied ? "Copied ✓" : "Copy link"} setNotesOpen(true)}>Inspector notes
{/* the full-bleed, scaled-up flow surface */}
setNotesOpen(false)} onOpenState={openState} path={path} /> ({ value: p.id, label: p.cap }))} onChange={pick} /> openState(path, s)} /> setTweak({ palette: v, accent: v === "graphite" ? "#deb24e" : "#4a6b3f" })} /> setTweak("accent", v)} /> ); }; ReactDOM.createRoot(document.getElementById("board")).render();