{PHASES.map((_, i) => { const f = i < phase ? 1 : i === phase ? fill : 0; return (

); })}

{canBack ? ( ) : null} {PHASES[phase]} ≈ {mins} min

); /* ---------- tab bar (happy path only, once in the live app) --------------- */ const TABS = [["home", "Home"], ["trade", "Trade"], ["chat", "Yoshi"], ["studio", "Studio"], ["accounts", "Accounts"]]; const TabBar = ({ 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. Order is the happy path; the unhappy branches diverge at named points. ============================================================= */ const ORDER = ["welcome", "verifyIntro", "plaid", "provision", "success", "income", "checks", "security", "funding", "link", "agent", "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 }, }; /* where each path comes to rest when you "jump to outcome" */ const REVIEW_PATHS = ["identity", "screening", "watchlist", "mismatch", "records"]; const TERMINAL = { happy: "offToWork", declined: "declined" }; REVIEW_PATHS.forEach((p) => { TERMINAL[p] = "reviewHold"; }); /* which paths flag during the automated KYC checks at provisioning, and the review reason each path lands the hold on */ const PROVISION_REVIEW = { watchlist: "watchlist", mismatch: "mismatch", records: "records" }; const REVIEW_REASON = { identity: "identity", screening: "screening", watchlist: "watchlist", mismatch: "mismatch", records: "records" }; /* ============================================================= Build + spec metadata — so humans and coding agents inspecting this prototype know which export they're looking at, which behaviour is simulated, and how to reach every state. Mirrored onto window.__YOSHI_SPEC below for programmatic crawling. ============================================================= */ const BUILD = { id: "onb-unhappy-2026.06.13", exported: "2026-06-13", source: "Unhappy Paths · compare.jsx", channel: "design-prototype", }; /* Human labels for every reachable state — also the set of valid ?step= values. */ 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", offToWork: "Account live", reviewHold: "Manual review hold", reviewApproved: "Review approved · resume", declined: "Declined · hard stop", }; const DEEP_STEPS = Object.keys(STEP_LABELS); /* Simulated mechanics — labelled so inspectors don't treat demo timing or placeholder catalogs as v1 product / API requirements. */ 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." }, ]; /* States the inspection brief asked about that this build does NOT model. */ 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" }); /* ============================================================= Device — one phone running the flow on a chosen path. Fully self-contained: tap the real UI to walk it. The board can also restart it or jump it straight to its end state. ============================================================= */ const Device = React.forwardRef(({ path, palette, accent, initialStep, onStep }, ref) => { const [step, setStep] = useState(initialStep || "welcome"); const [cleared, setCleared] = useState(false); // manual review resolved → don't re-route const [holdReason, setHoldReason] = useState(null); // which trigger sent us to review const [app, setApp] = useState(false); const [tab, setTab] = useState("home"); const [toast, setToast] = useState(null); // flow data — seeded per path so the branch reads honestly 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); 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]); // surface the live state to the board (URL sync + state chip) 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: () => {}, }), []); 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("offToWork")} onSkip={() => { setAgents([]); 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"; const sbColor = (!app && (step === "offToWork" || step === "plaid")) ? "#f3f1ea" : "var(--ink)"; return (

{!app ? (

{showRail && }

{screens[step]}

{step === "plaid" && ( goto("provision")} onFail={() => { setHoldReason("identity"); goto("reviewHold"); }} onCancel={() => goto("verifyIntro")} /> )} {toast && }

) : ( <>

flash("Add money opens in the full app")} onConnect={() => flash("Opens in the full app")} onPickGoal={() => flash("Pick a focus in the full app")} />

{toast && }

)}

); }); /* ============================================================= Board chrome — captions + per-device controls on the canvas. ============================================================= */ const PATHS = [ { id: "happy", cap: "Happy path", desc: "Verified, funded — account goes live", tone: "var(--cv-pos)" }, { id: "identity", cap: "Identity unverified", desc: "IDV retried, still no match → manual review", tone: "var(--cv-warn)" }, { id: "screening", cap: "Screening flag", desc: "PEP / insider / FINRA answer → manual review", tone: "var(--cv-warn)" }, { id: "watchlist", cap: "Watchlist hit", desc: "Name matches a watchlist → manual review", tone: "var(--cv-warn)" }, { id: "mismatch", cap: "Info mismatch", desc: "Details don't match records → manual review", tone: "var(--cv-warn)" }, { id: "records", cap: "Records unverified", desc: "Address / SSN can't be verified → manual review", tone: "var(--cv-warn)" }, { id: "declined", cap: "Declined", desc: "Application can't be approved → hard stop", tone: "var(--cv-neg)" }, ]; const pathInfo = (id) => PATHS.find((p) => p.id === id) || PATHS[0]; /* Mirror the spec onto the window so coding agents can crawl scenarios, states and mocked behaviour without scraping the DOM. */ 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 CtrlBtn = ({ children, onClick, primary, testid }) => ( ); /* ============================================================= Inspector notes — build metadata, the scenario index (with deep-link shortcuts), and a labelled list of simulated behaviour. Lives outside the scaled board so its text stays crisp. ============================================================= */ 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 ( <>

Inspector notes

Build Scenario index

{PATHS.map((p) => (

{p.id === path && }

{p.cap}

ends · {STEP_LABELS[term(p.id)]}

))}

Review scenarios resume via the in-screen mail tap: hold → → income. Not modeled in this build: {NOT_MODELED.join(" · ")}.

Simulated behavior {MOCKS.map((m) => )}

); }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "graphite", "accent": "#deb24e", "path": "screening" }/*EDITMODE-END*/; const VALID_PATHS = PATHS.map((p) => p.id); const Board = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // deep link: ?scenario=watchlist&step=reviewHold 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); // forces a fresh Device mount for deep-link jumps const [curState, setCurState] = useState(boot.step || "welcome"); const [notesOpen, setNotesOpen] = useState(false); const [copied, setCopied] = useState(false); const ref = useRef(null); const scalerRef = useRef(null); useEffect(() => { if (t.path !== path) { setPath(t.path); setBootStep(null); } }, [t.path]); // keep the URL in sync so any state is deep-linkable and shareable 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); useEffect(() => { const fit = () => { const el = scalerRef.current; if (!el) return; const W = 412 + 96; // one phone + side padding const H = 1040; // header + controls + bezel const s = Math.min(window.innerWidth / W, window.innerHeight / H, 1); el.style.transform = `scale(${s})`; }; fit(); window.addEventListener("resize", fit); const id = setTimeout(() => document.body.classList.add("anim-ready"), 800); return () => { window.removeEventListener("resize", fit); clearTimeout(id); }; }, []); return ( <>

{/* board header */}

Onboarding · unhappy paths

{/* controls — above the prototype */}

ref.current && ref.current.restart()}>Restart ref.current && ref.current.jump()}>Jump to outcome →

{info.cap}

{info.desc}

{BUILD.id} state · {curState}

{copied ? "Copied ✓" : "Copy link"} setNotesOpen(true)}>Inspector notes

{/* the prototype */}

setNotesOpen(false)} onOpenState={openState} path={path} /> ({ value: p.id, label: p.cap }))} onChange={pick} /> setTweak({ palette: v, accent: v === "graphite" ? "#deb24e" : "#4a6b3f" })} /> setTweak("accent", v)} /> ); }; ReactDOM.createRoot(document.getElementById("board")).render();