Plaid signs you in securely. Yoshi never sees your bank password.
)}
{step === "select" && (
<>
Accounts at {bank.name}{requireFunding ? "Pick a checking or savings account to fund Yoshi. Add any others for Yoshi to read." : "Select which accounts Yoshi can see. Add a checking or savings to move money."}
{bank.accts.map((a, i) => {
const on = sel.has(i);
const isFunding = i === fundingIdx;
return (
);
})}
{needsFunding && (
Select a checking or savings account to fund Yoshi.
);
};
/* =============================================================
08 · CONNECT YOUR BANK — link once through Plaid; it pulls every
account at that institution. Pick the one that funds Yoshi (read/write);
the rest ride along read-only. The more you connect, the more Yoshi sees.
============================================================= */
const FUND_PRESETS = [250, 1000, 5000, 10000];
/* What Yoshi can do once it can SEE a given institution — the concrete
payoff for connecting more, surfaced live as accounts come in. */
const INSIGHTS = {
amex: { tag: "Pay down your card", find: "Your Amex balance is accruing interest at 21.99% APR. Yoshi can clear it from cash before it's due.", value: "Stops interest", w: 95 },
schwab: { tag: "Put idle cash to work", find: "Uninvested cash is sitting in your Schwab brokerage. Yoshi can invest it on a schedule.", value: "+$1,240 / yr", w: 82 },
fidelity: { tag: "Fix portfolio drift", find: "Your Fidelity mix has drifted from target after the run-up. Yoshi can propose a rebalance.", value: "Back on target", w: 78 },
chase: { tag: "Sweep idle cash", find: "Cash is sitting in Chase earning almost nothing. Yoshi can sweep it to 4.8% APY.", value: "+$402 / yr", w: 70 },
bofa: { tag: "Sweep idle cash", find: "Idle cash in Bank of America could earn 4.8% instead of sitting still.", value: "+$360 / yr", w: 68 },
coinbase: { tag: "One net worth", find: "Your Coinbase crypto now rolls into a single balance Yoshi watches with everything else.", value: "Tracked", w: 45 },
wells: { tag: "Catch recurring fees", find: "With Wells Fargo visible, Yoshi can flag recurring fees and forgotten subscriptions.", value: "Watching", w: 35 },
capone: { tag: "Catch recurring fees", find: "Capital One spending is now visible. Yoshi spots fees and duplicate subscriptions.", value: "Watching", w: 34 },
};
const isDepository = (a) => a.type === "Checking" || a.type === "Savings";
const acctLabel = (a) => `${a.inst} ${a.type} · ${a.mask}`;
const sameAcct = (a, b) => !!(a && b && a.instId === b.instId && a.mask === b.mask);
/* ---- Connected account row ---- */
const ConnectedRow = ({ a, selected, onSelect, accent }) => (
);
const Funding = ({ funding, setFunding, externals, setExternals, onNext, onSkipToAgent }) => {
const [plaid, setPlaid] = useState(false);
const [attempts, setAttempts] = useState(0); // how many times Plaid was opened
const [plaidFailed, setPlaidFailed] = useState(false); // last attempt failed/exited
const depAccts = externals.filter(isDepository);
const hasBank = depAccts.length > 0;
const hasInvest = externals.some((a) => a.type === "Brokerage" || a.type === "Crypto");
const hasAny = externals.length > 0;
// state 1: bank linked → Next goes to funding page
// state 2: invest-only → Next goes to funding page (will prompt bank link there)
// state 3: failed/exited → Next skips to agent (no retry gating)
const canProceed = hasAny || plaidFailed;
const skipToAgent = !hasAny && plaidFailed;
const onLinked = (accts) => {
const next = [...externals];
accts.forEach((a) => { if (!next.some((x) => sameAcct(x, a))) next.push(a); });
setExternals(next);
if (!funding) { const dep = next.find(isDepository); if (dep) setFunding(dep); }
setPlaid(false);
setPlaidFailed(false);
};
const onPlaidClose = () => {
setPlaid(false);
setPlaidFailed(true);
};
const openPlaid = () => {
setAttempts((n) => n + 1);
setPlaid(true);
};
// idle state: nothing linked yet, no failure
const showIdle = !hasAny && !plaidFailed;
// failure state: exited/errored, haven't succeeded
const showRetry = !hasAny && plaidFailed;
return (
Connect youraccounts.Link securely through Plaid to power Yoshi. The more accounts you connect, the more Yoshi can see and do.
{/* ---- IDLE: nothing linked yet ---- */}
{showIdle && (
<>
Connections run through Plaid. Yoshi never sees your password, and every move still needs your approval.
)}
{/* ---- RETRY: Plaid failed or exited ---- */}
{showRetry && (
<>
Connection didn't complete. That's okay, try again below.
You can always connect accounts later from the Accounts tab.
)}
{/* ---- STATE 1 + 2: Accounts linked ---- */}
{hasAny && (
<>
{/* All linked accounts — bank, brokerage, crypto, side by side */}
Connected accounts
{externals.map((a, i) => (
))}
{/* No bank — callout */}
{!hasBank && (
You'll need to add a checking or savings account to fund Yoshi.
)}
)}
{hasAny ? (
Continue
) : plaidFailed ? (
Skip for now
) : null}
{plaid && }
);
};
/* =============================================================
09 · PUT YOSHI TO WORK — fund the account so Yoshi has something
to work with. Optional; skip and fund later.
============================================================= */
const FundDeposit = ({ funding, setFunding, externals = [], setExternals, deposit, setDeposit, onNext, onSkip }) => {
const [amt, setAmt] = useState(deposit || 0);
const [other, setOther] = useState(false);
const [customStr, setCustomStr] = useState("");
const [confirming, setConfirming] = useState(false);
const [confirmed, setConfirmed] = useState(false);
const [pickerOpen, setPickerOpen] = useState(false);
const [plaid, setPlaid] = useState(false);
const web = usePlatform() === "web";
const banks = externals.filter(isDepository);
const hasMultipleBanks = banks.length > 1;
const onLinked = (accts) => {
const next = [...externals];
accts.forEach((a) => { if (!next.some((x) => sameAcct(x, a))) next.push(a); });
setExternals(next);
if (!funding) { const dep = next.find(isDepository); if (dep) setFunding(dep); }
setPlaid(false);
};
const handleNext = () => {
if (amt > 0 && !confirmed) { setConfirming(true); return; }
setDeposit(amt); onNext();
};
const onPasskeyConfirm = () => {
setConfirming(false);
setConfirmed(true);
setTimeout(() => { setDeposit(amt); onNext(); }, 400);
};
return (
Put Yoshito work.Move money into your Yoshi account so it has something to work with. You can skip and fund anytime later.
{funding && (
)}
Funds at Yoshi are FDIC-insured up to $250,000 through our partner banks. Every move still needs your approval.
{confirmed ? <> Confirmed : <>Confirm with passkey }
Skip for now
{/* Passkey confirm — centered modal on web, bottom sheet on mobile */}
{confirming && (
<>
Authorise a transfer of ${amt.toLocaleString("en-US")} from your {funding ? `${funding.inst} ${funding.type}` : "funding source"}.
Use passkey
) : (
Confirm with passkey
Authorise a transfer of ${amt.toLocaleString("en-US")} from your {funding ? `${funding.inst} ${funding.type}` : "funding source"}.
Use passkey
)}
)}
{plaid && setPlaid(false)} onLinked={onLinked} />}
);
};
/* =============================================================
10 · AGENT — connect an assistant (kept as-is)
============================================================= */
const AGENTS = [
/* Yoshi's own integration methods */
{ id: "mcp", name: "Yoshi MCP", icon: "connect", kind: "copy" },
{ id: "build", name: "Build with Yoshi", icon: "easel", kind: "copy" },
{ id: "sdks", name: "Yoshi SDKs", icon: "terminal", kind: "sdk" },
/* apps you authorize over OAuth */
{ id: "chatgpt", name: "ChatGPT", icon: "message", kind: "oauth" },
{ id: "claude", name: "Claude", icon: "robot", kind: "oauth" },
{ id: "perplexity", name: "Perplexity", icon: "search", kind: "oauth" },
{ id: "cursor", name: "Cursor", icon: "terminal", kind: "oauth" },
{ id: "openclaw", name: "OpenClaw", icon: "bolt", kind: "copy" },
];
const AGENT_SETUP = {
mcp: "yoshi mcp add --key ys_demo_8f3ac2d1",
build: "npm i @yoshi/sdk && yoshi init",
openclaw: "openclaw connect yoshi --key ys_demo_8f3ac2d1",
};
/* one marketplace card — icon, name, and a state-driven footer action */
const AgentCard = ({ a, state, open, onClick }) => {
const web = usePlatform() === "web";
const active = state === "activated" || state === "live" || state === "connected";
const statusLabel = state === "live" ? "Live" : state === "connected" ? "Connected" : "Activated";
const btnLabel = state === "copy" ? "Copy setup" : "Authorize";
return (
);
};
const Agent = ({ agents = [], setAgents, onNext, onSkip }) => {
const [redirecting, setRedirecting] = useState(null); // OAuth agent id mid-authorize
const [setupId, setSetupId] = useState(null); // copy-agent id whose command is shown
const [copied, setCopied] = useState(false);
const web = usePlatform() === "web";
const isConnected = (id) => agents.includes(id);
const markConnected = (id) => setAgents((prev) => (prev.includes(id) ? prev : [...prev, id]));
const cardState = (a) => {
if (a.kind === "sdk") return "sdk";
if (a.kind === "copy") return isConnected(a.id) ? "connected" : "copy";
return isConnected(a.id) ? "activated" : "authorize";
};
const connect = (a) => {
if (a.kind === "sdk") return;
if (isConnected(a.id)) { // tap connected → disconnect
setAgents(agents.filter((x) => x !== a.id));
if (setupId === a.id) setSetupId(null);
return;
}
if (a.kind === "copy") { // MCP / CLI → reveal command to run
setCopied(false);
setSetupId((cur) => (cur === a.id ? null : a.id));
return;
}
setRedirecting(a.id); // OAuth agent → leave & return
setTimeout(() => { markConnected(a.id); setRedirecting(null); }, 1700);
};
const doCopy = () => {
try { navigator.clipboard && navigator.clipboard.writeText(AGENT_SETUP[setupId] || ""); } catch (e) {}
setCopied(true);
markConnected(setupId);
};
const redirectAgent = AGENTS.find((a) => a.id === redirecting);
const setupAgent = AGENTS.find((a) => a.id === setupId);
const count = agents.length;
return (
Bring your AIinto the loop.Connect the assistants you already use and they can draft moves right in your chats. You still approve every one.
{AGENTS.map((a) => {
const st = cardState(a);
const open = setupId === a.id && st === "copy";
return connect(a)} />;
})}
{/* CLI agents — copy the command, run it in your own agent framework to connect */}
{setupAgent && !isConnected(setupAgent.id) && (
{AGENT_SETUP[setupAgent.id]}
)}
Propose-only access. An agent never holds or moves your money on its own. Revoke any connection anytime.
{count > 0 ? (
Continue
) : (
Skip for now
)}
{/* OAuth redirect — leave to the agent's app to authorize, then return */}
{redirectAgent && (
<>
Y{redirectAgent.name[0]}
Opening {redirectAgent.name}…
Authorize Yoshi in {redirectAgent.name}, then you'll come right back here.
)}
);
};
/* =============================================================
11 · DISCLOSURES — the last gate before Yoshi gets to work.
Institutional register: concede the fine print, lay it out plainly.
Tapping continue is the acknowledgment; the seam draws as you sign.
============================================================= */
const AckRow = ({ label, href, children, last }) => (
{label}
{href && (
)}
{children}
);
const PartnerRow = ({ name, role, member, href, onClick, first }) => {
const common = {
textDecoration: "none", width: "100%", display: "grid", gridTemplateColumns: "1fr auto", gap: 12, alignItems: "center",
padding: "13px 0", background: "none", border: "none", borderTop: `1px ${first ? "solid" : "dashed"} var(--rule)`,
color: "var(--ink)", cursor: "pointer", textAlign: "left" };
const body = (
<>
{name}{role} · {member}
Agreements
);
return onClick
?
: {body};
};
/* The Apex agreements + disclosures, as an in-app push screen reached from the
brokerage row. Each document opens its PDF; the disclosures live at the foot. */
const APEX_DOCS = [
["Customer Account Agreement", "https://storage.googleapis.com/apexclearing-account-agreements-prd-00/SCAA-OBD-20260318-EN.pdf"],
["Customer Information Brochure", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Apex-Direct-Customer-Infromation-Brochure.pdf"],
["Privacy Policy", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/AFBS-Privacy-Policy.pdf"],
["Terms of Service", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/AFBS-Terms-of-Service-Template.pdf"],
["CIP Notice", "https://library.apexfintechsolutions.com/wp-content/uploads/2025/04/FINRA-CIP-Notice.pdf"],
["Business Continuity Plan", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Business-Continuity-Plan-Policy-11-08-2024.pdf"],
["Fee Sheet", "https://library.apexfintechsolutions.com/wp-content/uploads/2024/12/Apex-Direct-Misc-Services-Fee-Sheet-11.2024.pdf"],
];
const ApexAgreements = ({ onClose }) => {
const link = { color: "var(--ink-2)", textDecoration: "underline", textUnderlineOffset: 2 };
const disc = { fontFamily: "var(--f-display)", fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.58, marginTop: 12, marginBottom: 0, textWrap: "pretty", letterSpacing: "0.003em" };
return (
Brokerage services are provided by Apex Clearing Corporation, an SEC-registered broker-dealer and member FINRA/SIPC. Learn more about Apex at{" "}
FINRA BrokerCheck.
Investing in securities involves risks, including the potential loss of principal. Securities investments are not FDIC insured, are not bank guaranteed, and may lose value. Before investing, please carefully review your investment objectives, risk tolerance, charges, and expenses. Yoshi is not owned or operated by Apex Clearing Corporation.
For additional information about SIPC coverage, visit{" "}
sipc.org.
You consent to electronic delivery and signature of your account documents.
You've read, acknowledged, and agree to the agreements that govern your Yoshi account.
{/* the institutions behind the account — each opens its agreements */}
Provided by
setShowApex(true)} />
{/* the required fine print, in full */}
Brokerage services are provided by Apex Clearing Corporation, an SEC-registered broker-dealer and member FINRA/SIPC. Learn more about Apex at{" "}
FINRA BrokerCheck. Yoshi is a fintech company, not an FDIC-insured depository institution. Banking services provided through Column N.A., Members FDIC. Deposit insurance covers the failure of an insured bank.
{/* the seam draws across at the moment of signing — the brand's approval signature */}
{signing
? <> Signing…
: <>Confirm & continue }
{showApex && setShowApex(false)} />}
);
};
/* =============================================================
12 · OFF TO WORK — the landing. A calm "you're in" beat, the
mark working like the provisioning screen, then what's waiting.
============================================================= */
const OffToWork = ({ agents = [], accent = "#6c9a5c", showJob = true, onEnter }) => {
const [ready, setReady] = useState(false);
const [shown, setShown] = useState(false);
useEffect(() => { const r = setTimeout(() => setReady(true), 1300); return () => clearTimeout(r); }, []);
useEffect(() => { if (!ready) return; const t = setTimeout(() => setShown(true), 40); return () => clearTimeout(t); }, [ready]);
const ink = "#f3f1ea", m55 = "rgba(243,241,234,0.55)", m18 = "rgba(243,241,234,0.18)";
const mark = `url(${(typeof window !== "undefined" && window.__resources && window.__resources.logoBlack) || "assets/logo-mark-black.png"})`;
const offWeb = usePlatform() === "web";
const enterBtn = (
);
return (
{/* the mark, working — same calm beat as provisioning */}
Your account is live
Yoshi is off to work.
{/* what's genuinely waiting inside — fades in slowly, row by row */}
{ready && (
Inside your account
{[
["bulb", "Yoshi's read of your finances"],
["route", "A short list to get Yoshi working for you"],
["eye", "Eyes on your money, day and night"],
].map(([ic, tx], i) => (