; const PersonalInfoForm = () => { const [f, setF] = useState({ preferred: "Rivka", first: "Rivka", last: "Lipson", tcFirst: "", tcLast: "", tcEmail: "" }); const set = (k) => (v) => setF((s) => ({ ...s, [k]: v })); return (

Trusted contact

Address

148 Mercer St, New York, NY

{}} style={{ padding: "8px 13px", fontSize: typeSize(12) }}>Edit address

); }; const INVESTOR_PROFILE = { version: 3, source: "User attested", status: "Complete", attested: "Jun 24, 2026", risk: "Moderate", horizon: "10 years", objectives: ["Growth", "Balanced"], liquidity: "Moderate", income: "$100k–$249k", liquid: "$250k–$999k", netWorth: "$1M–$4.99M", tax: "High", experience: "Good", employment: "Employed", dependents: "2", expenses: [{ description: "Home down payment", timeframe: "3 years", amount: "$100,000.00" }], constraints: ["Avoid single-stock concentration"], considerations: "Prefers ESG-aligned holdings.", facts: [ "Would stay invested or rebalance rather than sell during a 20.00% market decline.", "No material external concentrated stock, crypto, options, margin, or private investment exposure disclosed." ] }; const ReadOnlyPill = ({ children, tone }) => {children}; const ReadOnlyField = ({ label, value, children }) =>

{label}

{children || value}

; const ReadOnlySection = ({ title, children }) =>

{title}

{children}

; const InvestorProfileForm = ({ nav }) => { const p = INVESTOR_PROFILE; const chatUpdate = () => { if (!nav) return; nav.ask("Update my investor profile.", "Of course. Tell me what changed about your goals, risk comfort, time horizon, liquidity needs, income, net worth, tax picture, investing experience, constraints, or special considerations. I'll update the profile from the conversation and ask you to confirm anything material."); }; return (

Yoshi's view of your investor profile

Built from conversations with Yoshi. Changes happen through chat, not this settings form.

{p.status}

{[ ["Source", p.source], ["Profile version", p.version], ["Attested", p.attested] ].map(([label, value], i) => (

{label}

{value}

))}

This is the profile Yoshi uses for suitability and advice context.

{p.objectives.map((x) => {x})}

{p.facts.map((fact, i) => (

{fact}

))}

Large planned expense

{p.expenses[0].description} · {p.expenses[0].amount} in {p.expenses[0].timeframe}

Investment constraints

{p.constraints.map((x) => {x})}

Special considerations

{p.considerations}

Chat with Yoshi to update

); }; /* ============ SETTINGS — its own screen, collapsible sections. On web it renders as a page beside the menu drawer (like the Agents pane); on mobile it pushes over the You hub. ============ */ /* ---- settings section bodies, each self-contained so it can render either as an accordion (mobile) or as a focused pane beside the drawer (web) ---- */ const NotificationsSettings = () => { const [channels, setChannels] = useState(PROFILE.channels.map((c) => c[2])); const [emailNotif, setEmailNotif] = useState(true); return ( <> {PROFILE.channels.map(([name, detail], i) => { const web = window.__YOSHI_WEB && i === 0; return setChannels((c) => c.map((x, j) => j === i ? v : x))} />} />; })} } /> ); }; const PasskeyRecoveryPanel = ({ step, onCancel, onPlaidSuccess, onGenerated, onDone }) => { const [busy, setBusy] = useState(false); const run = (next) => { if (busy) return; setBusy(true); setTimeout(() => { setBusy(false); next(); }, 900); }; const plaid = step === "plaid"; const done = step === "done"; return (

{plaid ? "Plaid identity" : done ? "Recovered" : "Yoshi passkey"}

{plaid ? "Liveness check" : done ? "New passkey ready" : "Generate new passkey"}

{!done && Required}

{plaid ? "Verify it's you with Plaid, then you'll return to Yoshi to create a new passkey." : done ? "This device now has a new passkey. Your previous device passkeys stay active unless you remove them." : "Plaid confirmed it's you. Create a new passkey in Yoshi."}

{plaid && run(onPlaidSuccess)} disabled={busy}>{busy ? "Checking…" : "Complete liveness check"}} {step === "generate" && run(onGenerated)} disabled={busy}>{busy ? "Generating…" : "Generate new passkey"}} {done && Done} {!done && Back to security}

); }; const SecuritySettings = () => { const [recoveryStep, setRecoveryStep] = useState(null); if (recoveryStep) { return ( setRecoveryStep(null)} onPlaidSuccess={() => setRecoveryStep("generate")} onGenerated={() => setRecoveryStep("done")} onDone={() => setRecoveryStep(null)} /> ); } return ( <> setRecoveryStep("plaid")} style={{ padding: "8px 13px", fontSize: typeSize(12), whiteSpace: "nowrap" }}>Recover passkey} /> {}} style={{ padding: "8px 13px", fontSize: typeSize(12), whiteSpace: "nowrap" }}>Change} /> ); }; const AppearanceSettings = ({ palette, setPalette }) => (

Theme {palette === "graphite" ? "Graphite · dark" : "Bone · light"}

); const AutomationsSettings = () => { const [dailyCap, setDailyCap] = useState(5000); const [pendingCap, setPendingCap] = useState(5000); const [autoOn, setAutoOn] = useState(true); return ( <> } />

Daily autonomous cap {usd(pendingCap, 0)}

setPendingCap(parseInt(e.target.value, 10))} style={{ marginTop: 11 }} />

The most your agents can move in a day without asking. Per-automation limits are set on each proposal.

{pendingCap !== dailyCap &&

setDailyCap(pendingCap)} />

}

); }; /* the section catalog — order matters; shared by the mobile screen, the web drawer list, and the web focused pane */ const settingsSections = (palette, setPalette, nav) => [ { id: "personal", icon: "profile", label: "Personal information", sub: "Contact details and trusted contact", body: }, { id: "investor", icon: "doc", label: "Investor profile", sub: "Suitability and advisory state", body: }, { id: "notifications", icon: "bell", label: "Notifications", sub: "How Yoshi reaches you", body: }, { id: "security", icon: "shield", label: "Security", sub: "Passkeys and sign-in", body: }, { id: "appearance", icon: "display", label: "Appearance", sub: "Theme and palette", body: }, { id: "automations", icon: "gear", label: "Automations", sub: "Daily autonomous cap", tag: "Soon", body: }, { id: "hidden", icon: "eye", label: "Hidden accounts", sub: "Accounts kept out of your totals", body: }, { id: "close", icon: "shield", label: "Close accounts", sub: "Permanently close an account", body: }, ]; /* mobile: the full settings screen, sections as accordions */ const SettingsScreen = ({ palette, setPalette, nav, onClose }) => (

{settingsSections(palette, setPalette, nav).map((s, i, arr) => ( {s.body} ))}

); window.SettingsScreen = SettingsScreen; /* web: the drawer's settings list — replaces the menu contents; each row opens its section as a focused pane beside the drawer */ const SettingsList = ({ palette, setPalette, nav, onBack, onOpen }) => (

Settings

{settingsSections(palette, setPalette, nav).map((s, i, arr) => ( onOpen(s.id)} last={i === arr.length - 1} /> ))}

); window.SettingsList = SettingsList; /* web: a single settings section, rendered as a focused pane beside the drawer */ const SettingsSectionPane = ({ id, palette, setPalette, nav, onClose }) => { const sec = settingsSections(palette, setPalette, nav).find((s) => s.id === id); if (!sec) return null; return (

{sec.body}

); }; window.SettingsSectionPane = SettingsSectionPane; const Profile = ({ palette, setPalette, nav, onClose }) => { const [view, setView] = useState("menu"); const openBrokerage = () => nav.openAccount("brokerage"); const openPaper = () => nav.openAccount("paper"); if (view === "settings") { return window.__YOSHI_WEB ? { setView("menu"); nav.menuPage(null); }} onOpen={(id) => nav.menuPage("settings:" + id)} /> : setView("menu")} />; } return (

{window.__YOSHI_WEB ? ( /* drawer header: an X aligned to the top-left hamburger it pulled out from */

) : ( nav.tab("home")} /> )}

{/* identity */}

{PROFILE.name}

nav.sheet({ type: "link" })} /> nav.sheet({ type: "connect" })} /> {/* open a new account — surfaced directly in the menu */} setView("settings")} /> (window.__YOSHI_WEB ? nav.menuPage("documents") : nav.sheet({ type: "documents" }))} /> nav.sheet({ type: "support" })} last />

nav.signOut()}>Sign out

); }; window.Profile = Profile;