/* profile.jsx — the "You" hamburger hub. A clean menu: identity, open-a-new
account (accordion), and entries into Settings / Documents / Help. Settings
is its own screen with collapsible sections. */
const Toggle = ({ on, onChange }) =>
;
const SettingRow = ({ label, sub, right, last }) =>
{label}
{sub &&
{sub}
}
{right}
;
/* 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" };
/* square check control used by the close-accounts list */
const CheckBox = ({ on, disabled }) =>
{on && }
;
/* close-accounts — multi-select with eligibility gating. An account can be
closed only when (1) it has no pending trades, transfers, or unsettled funds
and (2) its balance is $0. Ineligible accounts are dimmed and locked with the
blocking reason; eligible ones are tappable and selectable (incl. select-all). */
const CLOSEABLE = [
{ id: "ca-bro", name: "Brokerage", sub: "Yoshi · Individual Taxable", bal: 48210.33, pending: 0, holds: true },
{ id: "ca-roth", name: "Roth IRA", sub: "Yoshi · Retirement", bal: 22640.10, pending: 0, holds: true },
{ id: "ca-crypto", name: "Crypto", sub: "Yoshi · Spot ••8841", bal: 5121.74, pending: 1, holds: true },
{ id: "ca-cash", name: "Cash", sub: "Yoshi ••8841", bal: 1284.50, pending: 0, holds: false },
{ id: "ca-legacy", name: "Brokerage (2023)", sub: "Yoshi · Individual Taxable", bal: 0, pending: 0, holds: true },
{ id: "ca-paper", name: "Test drive 1", sub: "Yoshi · Simulated", bal: 0, pending: 0, holds: true }];
const closeBlocker = (a) =>
a.pending ? `${a.pending} pending item${a.pending > 1 ? "s" : ""} — must settle before closing` :
a.bal > 0 ? a.holds ? "Sell or transfer holdings to reach $0" : "Withdraw balance to $0 first" :
null;
/* ---- hidden-accounts (shared store with the Accounts tab) ----------------
The Accounts tab hides an account via ••• → eye; it persists to this same
localStorage key and broadcasts "yoshi-hidden". Surfaced here read+unhide. */
const P_HIDDEN_KEY = "yoshi_hidden_accts";
const HIDEABLE_META = {
Chase: "Checking ••4417 · external",
Schwab: "Brokerage ••5520 · external",
Coinbase: "Crypto ••3097 · external"
};
const useHiddenP = () => {
const read = () => {try {return JSON.parse(localStorage.getItem(P_HIDDEN_KEY) || "[]");} catch (e) {return [];}};
const [hidden, setHidden] = useState(read);
useEffect(() => {const f = () => setHidden(read());window.addEventListener("yoshi-hidden", f);return () => window.removeEventListener("yoshi-hidden", f);}, []);
const unhide = (name) => {try {const cur = read();localStorage.setItem(P_HIDDEN_KEY, JSON.stringify(cur.filter((n) => n !== name)));} catch (e) {}window.dispatchEvent(new CustomEvent("yoshi-hidden"));};
return [hidden, unhide];
};
const HiddenAccounts = () => {
const [hidden, unhide] = useHiddenP();
const list = hidden.filter((n) => HIDEABLE_META[n]);
return (
Accounts you've hidden from your totals and summaries. .
}
{/* danger zone — delete the entire Yoshi account */}
Delete your Yoshi account
Permanently closes every Yoshi account and removes your profile. All balances must be withdrawn first. Statements and tax documents stay downloadable for seven years.
{deleted ?
Deletion requested — we'll email you to confirm.
:
setDeleted(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 }) =>
);
};
/* ============ 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. ============ */
const SettingsScreen = ({ palette, setPalette, onClose }) => {
const [channels, setChannels] = useState(PROFILE.channels.map((c) => c[2]));
const [dailyCap, setDailyCap] = useState(5000);
const [pendingCap, setPendingCap] = useState(5000);
const [autoOn, setAutoOn] = useState(true);
const [emailNotif, setEmailNotif] = useState(true);
return (
The most your agents can move in a day without asking. Per-automation limits are set on each proposal.
{pendingCap !== dailyCap &&
setDailyCap(pendingCap)} />
}
);
};
window.SettingsScreen = SettingsScreen;
const Profile = ({ palette, setPalette, nav, onClose }) => {
const [view, setView] = useState("menu");
const openBrokerage = () => nav.ask("Open a new Brokerage account", "Happy to. A second brokerage account keeps a strategy separate, so you can hold long-term positions apart from active trades. It opens instantly under your existing KYC, so want me to set it up?");
const openPaper = () => nav.ask("Open a Paper trading account", "Done. I can open a paper trading account with $100,000 in virtual funds so you can test strategies with no real money at risk. Orders fill at live prices, and you can mirror any paper trade into your real brokerage in one tap. Want me to set it up?");
if (view === "settings") return setView("menu")} />;
return (
{window.__YOSHI_WEB ? (
/* drawer header: an X aligned to the top-left hamburger it pulled out from */
) : (
nav.tab("home")} />
)}
{/* identity */}
RL
{PROFILE.name}
nav.sheet({ type: "link" })} />
nav.sheet({ type: "connect" })} />
{/* open a new account — surfaced directly in the menu */}
(window.__YOSHI_WEB ? nav.menuPage("settings") : setView("settings"))} />
(window.__YOSHI_WEB ? nav.menuPage("documents") : nav.sheet({ type: "documents" }))} />
nav.sheet({ type: "support" })} last />