);
};
/* hold-to-confirm — press and hold 3s to commit a sensitive change */
const HoldButton = ({ label, onConfirm }) => {
const [progress, setProgress] = useState(0);
const raf = useRef(null);
const startT = useRef(0);
const DURATION = 3000;
const stop = (done) => {
if (raf.current) cancelAnimationFrame(raf.current);
raf.current = null;startT.current = 0;
setProgress(0);
if (done) onConfirm();
};
const frame = (t) => {
if (!startT.current) startT.current = t;
const p = Math.min(1, (t - startT.current) / DURATION);
setProgress(p);
if (p >= 1) {stop(true);return;}
raf.current = requestAnimationFrame(frame);
};
const begin = (e) => {e.preventDefault();startT.current = 0;raf.current = requestAnimationFrame(frame);};
const holding = progress > 0 && progress < 1;
return (
);
};
const TILE = { width: 34, height: 34, flex: "none", border: "1px solid var(--rule-2)", borderRadius: 999, display: "grid", placeItems: "center" };
/* whole-Yoshi deletion — no individual account closure exists in Product. */
const DeleteYoshiAccount = () => {
const reviewView = new URLSearchParams(window.location.search).get("view");
const readyExample = reviewView === "delete-yoshi-ready" || reviewView === "delete-yoshi-requested";
const [requested, setRequested] = useState(reviewView === "delete-yoshi-requested");
const blockers = readyExample ? [] : [
"Withdraw the remaining cash from Yoshi Cash",
"Sell or transfer all investments",
"Wait for every in-motion transaction to finish",
];
return (
Delete your Yoshi account
This permanently closes Yoshi Cash and Brokerage, removes your profile, and ends your access to Yoshi. It cannot be undone.
{blockers.length > 0 ?
Not ready to delete
Complete every step before deleting Yoshi.
{blockers.map((blocker, index) =>
{blocker}
)}
:
requested ?
Deletion requested
We'll email you to confirm. Nothing is deleted until you complete that confirmation in Yoshi.
:
<>
Ready to delete
Download any documents you want to keep before confirming deletion.
setRequested(true)} />
}
);
};
/* a tappable hub row with a leading icon tile */
const MenuRow = ({ icon, label, sub, onClick, last }) =>
;
/* a collapsible group — tap the header to expand */
const Accordion = ({ icon, label, sub, children, defaultOpen, last, tag }) => {
const [open, setOpen] = useState(!!defaultOpen);
return (
{open &&
{children}
}
);
};
const COMING_SOON_ACCOUNTS = [
["Crypto", "A dedicated spot wallet"],
["Retirement", "Roth & Traditional IRA"],
["Joint", "Shared with another person"]];
/* ---- profile form fields · Yoshi-styled (sharp, hairline) ----------------- */
const PInput = ({ label, value, onChange, placeholder, mono }) =>
);
};
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.
{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}
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: "delete", icon: "shield", label: "Delete your Yoshi account", sub: "Permanently close Yoshi", 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 }) => (
{window.__YOSHI_WEB ? (
/* drawer header: an X aligned to the top-left hamburger it pulled out from */
) : (
nav.tab("home")} />
)}
{/* identity */}
RL
{PROFILE.name}
{/* 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 />