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

); })}

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

); /* ---------- compact approval sheet — the brand's wow ---------------------- */ const ApprovalSheet = ({ proposal: p, onApprove, onClose }) => { const [approving, setApproving] = useState(false); const go = () => { setApproving(true); setTimeout(() => onApprove(p.id), 900); }; return ( <>

{p.agent} · proposes

{p.title}

{p.why}

The move

{p.legs.map((l, i) => (

{l[0]} {l[1]} · {l[2]} {l[3]}

))}

Net to you · settles {p.settles} = 0 ? "var(--accent-pos)" : "var(--ink)"} />

{/* the seam draws across at the moment of approval */}

{approving ? (

Executing…

) : (

Not now Approve & sign

)}

); }; /* ---------- focus picker — the day-one "point Yoshi at something" ---------- */ const FOCI = [ { id: "cash", icon: "swap", t: "Grow my idle cash", s: "Earn more on cash you're not using." }, { id: "tax", icon: "receipt", t: "Stay ahead of taxes", s: "Set aside the right amount as you earn." }, { id: "invest", icon: "trade", t: "Invest on a schedule", s: "Put money in on autopilot, on target." }, { id: "simplify", icon: "bolt", t: "Simplify everything", s: "Steady income, bills paid, less to watch." }, ]; const FocusSheet = ({ onPick, onClose }) => ( <>

What should Yoshi focus on first?

Pick one to start. Yoshi will draft a first move for you to approve, you can change focus anytime.

{FOCI.map((f) => ( ))}

); /* ---------- the orchestrator ---------------------------------------------- */ const STEPS = [ { key: "welcome", rail: false }, { key: "verifyIntro", rail: true, phase: 0, fill: 0.5 }, { key: "plaid", rail: false }, { key: "provision", rail: false }, { key: "success", rail: true, phase: 0, fill: 1 }, { key: "income", rail: true, phase: 1, fill: 0.5 }, { key: "checks", rail: true, phase: 1, fill: 1 }, { key: "security", rail: true, phase: 2, fill: 1 }, { key: "link", rail: true, phase: 3, fill: 0.34 }, { key: "funding", rail: true, phase: 3, fill: 0.67 }, { key: "agent", rail: true, phase: 3, fill: 1 }, { key: "disclosures", rail: true, phase: 3, fill: 1 }, { key: "offToWork", rail: false }, ]; const idxOf = (k) => STEPS.findIndex((s) => s.key === k); const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "graphite", "accent": "#deb24e", "showRail": true, "account": "dayone" }/*EDITMODE-END*/; const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const qp = new URLSearchParams(location.search); const startStep = qp.get("step"); const [step, setStep] = useState(startStep && idxOf(startStep) >= 0 ? startStep : "welcome"); const [app, setApp] = useState(qp.get("app") === "1"); const [tab, setTab] = useState("home"); const [overlay, setOverlay] = useState(null); const [toast, setToast] = useState(null); // flow data const [idv, setIdv] = useState({ phone: "", dob: "", first: "Rivka", last: "Lipson", street: "1452 Valencia St", city: "San Francisco", state: "CA", zip: "94110" }); const [income, setIncome] = useState({ status: "Employed", company: "Northwind Labs", title2: "Product Designer", source: "Salary", incomeBand: "" }); const [checks, setChecks] = useState({ none: false, flags: {} }); const [funding, setFunding] = useState(null); const [deposit, setDeposit] = useState(() => { const d = parseInt(qp.get("deposit") || "0", 10); return Number.isFinite(d) ? d : 0; }); const [externals, setExternals] = useState(() => { const a = qp.get("accts"); if (!a) return []; const seed = []; if (/cash/.test(a)) seed.push({ inst: "Chase", instId: "chase", tint: "#1156a3", name: "Chase Total Checking", type: "Checking", mask: "••4471", bal: 14231 }); if (/invest/.test(a)) seed.push({ inst: "Schwab", instId: "schwab", tint: "#0a7d3e", name: "Schwab Brokerage", type: "Brokerage", mask: "••9920", bal: 38400 }); return seed; }); const [agents, setAgents] = useState([]); const [goal, setGoal] = useState(null); // post-onboarding live state const [proposals, setProposals] = useState(PROPOSALS); const [completed, setCompleted] = useState(COMPLETED); const dark = t.palette === "graphite"; useEffect(() => { const r = document.getElementById("root"); r.setAttribute("data-palette", t.palette); if (t.accent) r.style.setProperty("--accent", t.accent); }, [t.palette, t.accent]); useEffect(() => { const id = setTimeout(() => document.body.classList.add("anim-ready"), 800); return () => clearTimeout(id); }, []); // the celebratory screen is full-bleed dark — extend it behind the status bar useEffect(() => { const r = document.getElementById("root"); r.style.background = (!app && step === "offToWork") ? "#141310" : ""; }, [app, step]); const flash = (m) => { setToast(m); setTimeout(() => setToast((x) => (x === m ? null : x)), 2400); }; const goto = (k) => setStep(k); // back: previous navigable rail step (skip plaid + provision + the auto success screen) const back = () => { let i = idxOf(step) - 1; while (i >= 0 && (STEPS[i].key === "plaid" || STEPS[i].key === "provision" || STEPS[i].key === "success")) i--; if (i >= 0) setStep(STEPS[i].key); }; const enter = () => { setApp(true); setTab("home"); }; const onApproved = (id) => { const pr = proposals.find((x) => x.id === id); setProposals((ps) => ps.filter((x) => x.id !== id)); if (pr) setCompleted((cs) => [{ id: "ex_" + id, title: pr.title, detail: pr.legs.map((l) => l[1]).join(" · "), when: "Today", net: pr.net, by: pr.agent }, ...cs]); setOverlay(null); flash("Executed · " + (pr ? pr.title : "move")); }; // nav stub for the live Home — most destinations flash, proposals open for real const nav = useMemo(() => ({ tab: (x) => { if (x === "home") setTab(x); else flash("That lives in the full app"); }, studio: () => flash("Studio lives in the full app"), push: () => flash("Opens in the full app"), pop: () => {}, sheet: () => flash("Opens in the full app"), closeSheet: () => setOverlay(null), ask: () => flash("Yoshi chat lives in the full app"), automation: () => flash("Opens in the full app"), }), []); const openApproval = (id) => setOverlay({ type: "approve", id }); const cur = STEPS[idxOf(step)] || STEPS[0]; const onboardScreens = { welcome: goto("verifyIntro")} />, verifyIntro: goto("plaid")} />, provision: goto("success")} />, success: goto("income")} />, income: goto("checks")} />, checks: goto("security")} />, security: goto("link")} />, link: goto("funding")} onSkipToAgent={() => goto("agent")} />, funding: goto("agent")} onSkip={() => goto("agent")} />, agent: goto("disclosures")} onSkip={() => { setAgents([]); goto("disclosures"); }} />, disclosures: goto("offToWork")} />, offToWork: , }; // status bar color: dark celebratory screen + plaid takeover want light text const sbColor = (!app && (step === "offToWork" || step === "plaid")) ? "#f3f1ea" : "var(--ink)"; return ( {!app ? (

{cur.rail && t.showRail && ( )}

{onboardScreens[step]}

{step === "plaid" && ( goto("provision")} onCancel={() => goto("verifyIntro")} /> )}

) : ( <>

{t.account === "dayone" && }

{t.account === "dayone" ? flash("Add money opens in the full app")} onConnect={() => setOverlay({ type: "plaidlink" })} onPickGoal={() => setOverlay({ type: "focus" })} /> : }

{toast && }

)} {/* approval overlay (works in both phases) */} {overlay?.type === "approve" && (proposals.find((p) => p.id === overlay.id) || PROPOSALS.find((p) => p.id === overlay.id)) && ( p.id === overlay.id) || PROPOSALS.find((p) => p.id === overlay.id)} onApprove={onApproved} onClose={() => setOverlay(null)} /> )} {!app && toast && } {/* day-one app overlays */} {overlay?.type === "plaidlink" && ( setOverlay(null)} onLinked={(accts) => { setExternals((p) => [...p, ...accts]); setOverlay(null); flash("Connected · " + accts[0].inst); }} /> )} {overlay?.type === "focus" && ( { setGoal(id); setOverlay(null); flash("Yoshi is on it · " + label); }} onClose={() => setOverlay(null)} /> )} setTweak("showRail", v)} /> setTweak("account", v)} />

{STEPS.map((s) => ( ))}

); }; const Toast = ({ msg }) => (

{msg}

); /* tab bar (from the app shell) */ 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 ( ); })}

); ReactDOM.createRoot(document.getElementById("root")).render();