/* simple/tabs.jsx — the three surfaces.
HOME: your money at Yoshi. 7 elements, no scrolling required.
YOSHI: the interface. Research, trades, moves, automations, docs,
support — all conversation, rendered as inline cards.
ACTIVITY: the audit trail. Everything that touched money, one feed,
tagged with who acted. */
/* ============================================================
HOME
============================================================ */
const HOME_RANGES = ["Today", "1W", "1M", "6M", "YTD", "1Y", "ALL"];
const HOME_RETS = { "Today": DAY_PCT, "1W": 1.2, "1M": 3.1, "6M": 9.4, "YTD": 11.2, "1Y": 18.9, "ALL": 64.0 };
const homeSeries = (range) => series(101 + HOME_RANGES.indexOf(range) * 31, 36, NET_WORTH / (1 + HOME_RETS[range] / 100), NET_WORTH, range === "Today" ? 0.0016 : 0.006);
const AllocStrip = ({ nav }) => {
const allHoldings = [...GROUPS.investments.items];
const investmentValue = allHoldings.reduce((sum, holding) => sum + holding.value, 0);
const investmentDay = allHoldings.reduce((sum, holding) => sum + holding.dayAbs, 0);
const accountSummary = [
{
id: CASH[0].id,
name: "Cash",
icon: "bank",
value: CASH_TOTAL,
apy: CASH[0].apr,
},
{
id: "brokerage",
name: "Investment",
icon: "trade",
value: investmentValue,
dayAbs: investmentDay,
dayPct: (investmentDay / (investmentValue - investmentDay)) * 100,
},
];
return (
{accountSummary.map((account) => (
))}
);
};
const HoldingMark = ({ h, size = 38, label }) => {
const color = "var(--accent)";
const content = label === null ? = 38 ? 16 : 14} stroke={1.6} color={color} /> : (label || h.ticker.slice(0, 4));
return (
= 38 ? 12 : 10, fontWeight: 400, lineHeight: 1, color }}>{content}
);
};
const HoldingsHeader = ({ nav }) => (
);
/* holdings — what you hold, with live day moves. Below the pulse so the
number up top is the summary and this is the detail beneath it. */
const HoldingRow = ({ h, nav, first, onPick }) => (
);
const HoldingsList = ({ nav }) => {
const rows = [...GROUPS.investments.items].sort((a, b) => b.value - a.value);
return (
{rows.map((h, i) => )}
);
};
/* Manual fast paths — same centered icon + label as before, just more
presence: a hairline border, a touch more height, and an accent-lit icon. */
const FastBtn = ({ icon, label, onClick }) => (
);
const INSTANT_FUNDING_DISCLOSURE = "Once your pending deposit settles, the full amount will be available for your use. If your pending deposit doesn't settle, the instant funding amount will be removed, which could cause a negative balance. Instant funding availability isn't guaranteed.";
const PendingFundsTip = () => {
const [open, setOpen] = useState(false);
const containerRef = useRef(null);
const tipId = "pending-funds-tip";
useEffect(() => {
if (!open) return undefined;
const dismissOutside = (event) => {
if (!containerRef.current?.contains(event.target)) setOpen(false);
};
document.addEventListener("pointerdown", dismissOutside);
return () => document.removeEventListener("pointerdown", dismissOutside);
}, [open]);
return (
);
};
const HomeTab = ({ nav, proposals, onReview, hideFastPaths, inflight = [], instantFundingUsed = 0 }) => {
const [range, setRange] = useState("Today");
const [scrub, setScrub] = useState(null);
// money in motion — one-time instructions still in flight ("one balance"
// means moving money is neither here nor there; say where it is)
const moving = inflight.filter((x) => x.kind === "once");
const pendingTransfers = moving.filter((x) => x.category === "Transfer" && !x.fundedBy);
const pendingIncoming = pendingTransfers.filter((x) => (x.net || 0) > 0).reduce((sum, x) => sum + (x.net || 0), 0);
const pendingOutgoing = Math.abs(pendingTransfers.filter((x) => (x.net || 0) < 0).reduce((sum, x) => sum + (x.net || 0), 0));
// The tooltip states the capped amount provisionally available to invest.
// The pill separately names the remainder included in the balance as
// instant funding, using the approved compact label.
const provisionalAvailable = Math.min(pendingIncoming, INSTANT_FUNDING_CAP);
const instantFundingIncluded = Math.max(0, provisionalAvailable - instantFundingUsed);
// pending transfers move real money in/out of Yoshi, so the balance reflects
// them immediately (+ in / − out). A trade is cash ↔ security — net-zero on
// total value until the position moves after it executes — so it doesn't shift
// the balance here.
// a queued one-time automation gated on incoming funds (fundedBy) hasn't run
// yet, so it doesn't move the balance — only genuinely in-flight transfers do
const balanceDelta = pendingIncoming - pendingOutgoing;
const liveNetWorth = NET_WORTH + balanceDelta;
const data = useMemo(() => homeSeries(range), [range]);
const ret = HOME_RETS[range];
const abs = NET_WORTH - NET_WORTH / (1 + ret / 100);
const shown = proposals.slice(0, 1);
// drag across the chart → read the value + change at that point in time
const scrubbing = scrub != null && data[scrub] != null;
// headline = live balance, which already reflects the inbound transfer via
// balanceDelta (In motion item f2). Instant funding makes only the capped
// provisional slice investable before the rest of the deposit lands.
const dispVal = scrubbing ? data[scrub] : liveNetWorth;
const dispAbs = scrubbing ? data[scrub] - data[0] : abs;
const dispPct = scrubbing ? ((data[scrub] - data[0]) / data[0]) * 100 : ret;
const chartColor = dispAbs < 0 ? "var(--signal-neg)" : "var(--accent-pos)";
return (
{/* header: hamburger (settings) · bell (briefs) — logo lives in the Yoshi tab */}
{/* 1+2 · the number and the day — tap to see the accounts behind it
(isolated up here, away from Move/Trade, so no mis-taps) */}
{/* Keep the definition and disclosure control beside the instant-funding
status so the relationship is explicit. */}
{instantFundingIncluded > 0 &&
{/* 5 · manual fast paths — the two doors, above the fold.
Original TransferFlow / TradeSheet, unchanged. On web these live
in the top bar instead, so the shell hides them here. */}
{!hideFastPaths && (
{/* 7 · holdings — what you hold, live day moves */}
);
};
/* ============================================================
YOSHI · the interface. The reply engine renders capability
cards inline — each one a screen this redesign deleted.
============================================================ */
const YOSHI_QUICK = ["What's my full net worth?", "How am I doing vs the S&P?", "Move $2,000 to savings", "Show my automations"];
const yoshiReply = (t, ctx) => {
const s = t.toLowerCase();
if (/net worth|everything|total|full picture|external/.test(s)) return {
t: `Everything together: ${usd(NET_WORTH + 8210.32 + 186400 + 12840 - LIAB_TOTAL)}. That's ${usd(NET_WORTH)} here at Yoshi, plus ${usd(8210.32 + 186400 + 12840)} across Chase, Schwab, and Coinbase, minus ${usd(LIAB_TOTAL)} of debt (the mortgage and two cards). Your biggest lever: the Schwab account is earning almost nothing in its cash sweep — want me to draft a consolidation?`,
};
if (/s&p|compare|vs |versus|how am i doing|performance/.test(s)) return {
t: "You're ahead of the index this year — concentration in NVDA did most of that, which cuts both ways.",
card: { type: "compare" },
};
if (/nvda|nvidia/.test(s)) return { t: securityTake("nvda").take, card: { type: "quote", id: "nvda" } };
if (/bitcoin|btc/.test(s)) return { t: securityTake("btc").take, card: { type: "quote", id: "btc" } };
if (/tsla|tesla/.test(s)) return { t: securityTake("tsla").take, card: { type: "quote", id: "tsla" } };
if (/move|transfer|send/.test(s)) {
const amt = parseFloat((s.match(/\$?([\d,]+(?:\.\d+)?)/) || [])[1]?.replace(/,/g, "")) || 2000;
return {
t: `Drafted. ${usd(amt)} from Cash to Reserve, instant, no fee. Approve when ready.`,
proposal: {
id: "pm_" + Date.now(), agent: "Yoshi agent", title: `Move ${usd(amt)} to Reserve`,
why: `One-time instant transfer from Yoshi Cash ••8841 to Yoshi Reserve ••2207. Both earn 3.30% APY. This will not repeat.`,
net: 0, settles: "In seconds", settlesVerb: "arrives", kind: "transfer",
legs: [["FROM", "Yoshi Cash ••8841", `Balance ${usd(18420.55)}`, "−" + usd(amt)], ["TO", "Yoshi Reserve ••2207", `Balance ${usd(64000)}`, "+" + usd(amt)], ["TIMING", "Instant transfer", "Arrives in seconds", "$0.00 fee"]],
activity: { icon: "arrow-left-right", title: "Reserve", detail: `${usd(amt)} · Instant`, category: "Transfer", by: "Yoshi agent", net: 0, amount: amt },
},
};
}
if (/automat|rules|recurring/.test(s)) return { t: "Six rules running, all inside your limits. They've earned you $841.00 this quarter between interest, the VTI streak, and harvested losses.", card: { type: "autos" } };
if (/spend|dining|budget/.test(s)) return { t: "Good news, actually:", card: { type: "insight", i: 0 } };
if (/1099|tax|statement|document|doc/.test(s)) return { t: "Here you go — I can also send these straight to your accountant.", card: { type: "doc", name: "1099-B · 2025", sub: "Yoshi Securities · consolidated" } };
if (/pay|sapphire|card|debt/.test(s)) return { t: "Your Sapphire statement is $2,340.18, due Friday at 21.99% APR. Paying in full from your Cash keeps you at zero interest — it's ready below.", proposal: PROPOSALS.find((p) => p.id === "p2") };
if (/cash|idle|savings rate|yield/.test(s)) return { t: "Your cash is working: every Yoshi cash account earns 3.30% APY, and the buffer rule keeps your spendable Cash lean while the excess sits in your Reserve. One idea — $15,000.00 has sat past your buffer for 9 days; short-term Treasuries would add about $760.00 a year and stay liquid. Want the proposal?" };
return { t: "On it. I can research anything you hold, move money, place trades, set up rules, pull documents, or just explain what's happening — all from right here. What do you want to do?" };
};
const YoshiCardFor = ({ card, nav, flash }) => {
if (!card) return null;
if (card.type === "quote") return ;
if (card.type === "compare") return ;
if (card.type === "autos") return ;
if (card.type === "insight") { const ins = BRIEF_INSIGHTS[card.i || 0]; return ; }
if (card.type === "doc") return ;
return null;
};
const YOSHI_SEED = [
{ from: "agent", t: "Morning. You're up " + perf(DAY_ABS, DAY_PCT) + " today — NVDA and BTC did most of it. One thing needs you: your stocks drifted past the mix you set, so I'd like to even things out.", time: "9:24" },
{ from: "user", t: "what would that do", time: "9:25" },
{ from: "agent", t: "Three trades: trim NVDA and BTC, add VOO. You'd come out about $1,153.00 ahead, done by tomorrow. Approve whenever you're ready.", time: "9:25", proposal: "p1" },
];
const YoshiTab = ({ nav, proposals, onReview, inject, onInjected, flash }) => {
const [msgs, setMsgs] = useState(YOSHI_SEED);
const [input, setInput] = useState("");
const [typing, setTyping] = useState(false);
const endRef = useRef(null);
const replyTimer = useRef(null);
useEffect(() => () => clearTimeout(replyTimer.current), []);
useEffect(() => { endRef.current && endRef.current.scrollIntoView({ behavior: "smooth" }); }, [msgs, typing]);
useEffect(() => {
if (!inject) return;
setMsgs((m) => [...m, ...(inject.note ? [{ from: "user", t: inject.note, time: "now" }] : []), { from: "agent", t: inject.reply, time: "now" }]);
onInjected();
}, [inject]);
const send = (text) => {
const t = (text != null ? text : input).trim();
if (!t) return;
setInput("");
setMsgs((m) => [...m, { from: "user", t, time: "now" }]);
setTyping(true);
replyTimer.current = setTimeout(() => {
const r = yoshiReply(t);
setTyping(false);
setMsgs((m) => [...m, { from: "agent", t: r.t, time: "now", card: r.card, proposalObj: r.proposal }]);
}, 10000);
};
const stop = () => {
clearTimeout(replyTimer.current);
replyTimer.current = null;
setTyping(false);
};
const findP = (idOrObj) => typeof idOrObj === "string" ? proposals.find((p) => p.id === idOrObj) || PROPOSALS.find((p) => p.id === idOrObj) : idOrObj;
return (
{/* In motion — trades and transfers in flight right now. Tap for the
stepper + cancel; on settlement the row drops into Recent. */}
{!q && inMotion.length > 0 && (
<>