}
right={
} />
{/* total */}
Total value
setFdicOpen((o) => !o)} style={{ background: "none", border: "none", padding: 4, display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer" }}>
{window.__YOSHI_WEB &&
setFdicOpen(false)} title="FDIC insurance">
{FDIC_DISCLOSURE}
}
{/* what net worth is made of — a flat ledger summary (mobile only; on web the Yoshi/External columns carry this) */}
{!window.__YOSHI_WEB &&
}
{/* docked Accounts: the Link button moves up here, under the total balance */}
{window.__YOSHI_WEB && linkUnderTotal &&
nav.sheet({ type: "link" })} style={{ padding: "11px 0", fontSize: typeSize(13) }}>+ Link account
}
{/* actions — mobile only (web puts Transfer in the top nav, Link in the right column) */}
{!window.__YOSHI_WEB &&
nav.sheet({ type: "transfer" })} style={{ padding: "11px 6px", fontSize: typeSize(13) }}>Transfer
nav.sheet({ type: "link" })} style={{ padding: "11px 6px", fontSize: typeSize(13) }}>+ Link account
}
{window.__YOSHI_WEB ?
:
<>
}
{/* FDIC disclosure · slide-up bottom sheet */}
{fdicOpen && !window.__YOSHI_WEB &&
<>
setFdicOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
{FDIC_DISCLOSURE}
setFdicOpen(false)} style={{ flex: "none", background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer", padding: 2 }}>
}
);
};
/* a row's daily-change chip · shows both % and $ inline */
const RowDelta = ({ pct: p, value }) => {
const dollars = Math.round(value * p / 100);
const c = p >= 0 ? "var(--accent-pos)" : "var(--signal-neg)";
return (
{perf(dollars, p)} );
};
const Group = ({ title, total, live, neg, tag, delta, children }) => {
const [open, setOpen] = useState(true);
const showNeg = neg || total < 0;
return (
setOpen((o) => !o)} style={{ width: "100%", background: "none", border: "none", cursor: "pointer", padding: window.__YOSHI_WEB ? "0 18px 9px 0" : "0 18px 8px", display: "flex", alignItems: "center", gap: 8, textAlign: "left" }}>
{title}
{live && ● {live} }
{tag && {tag} }
{open && {children}
}
);
};
/* group-level performance line under the headline total — matches RowDelta style */
const GroupFlow = ({ text, pos = true }) =>
{text} ;
/* top-level tier header — separates Yoshi-held accounts from external/linked ones */
const Tier = ({ title, tag }) =>
{title}
{tag && {tag} }
;
const Row = ({ bar, logo, name, sub, value, valueColor, chip, onClick, push, reauth }) => {
const web = !!window.__YOSHI_WEB;
const cols = logo ? "30px 1fr auto 16px" : web ? "1fr auto 16px" : "3px 1fr auto 16px";
return (
{logo ?
{logo} :
!web ?
: null}
{reauth ?
{e.stopPropagation();reauth();}}
style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--f-display)", fontSize: typeSize(10), fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--signal-warn)", background: "color-mix(in srgb, var(--signal-warn) 14%, transparent)", border: "1px solid color-mix(in srgb, var(--signal-warn) 38%, transparent)", borderRadius: 999, padding: "5px 11px", cursor: "pointer", whiteSpace: "nowrap" }}>
:
<>
{chip &&
{chip}
}
}
);
};
/* ============================================================
Holding detail
============================================================ */
const RANGES = ["1D", "1W", "1M", "6M", "YTD", "1Y", "5Y", "ALL"];
const buildSeries = (h, range) => {
const yearReturn = typeof securityYearReturn === "function" ? securityYearReturn(h) : h.perf?.["1Y"] ?? 17;
const cfg = {
"1D": [30, h.dch, 0.0011],
"1W": [28, h.perf?.["1W"] ?? +(h.dch * 1.5).toFixed(1), 0.004],
"1M": [32, h.perf?.["1M"] ?? h.dch * 4.5, 0.006],
"6M": [40, yearReturn * 0.55, 0.01],
"YTD": [44, yearReturn * 0.7, 0.011],
"1Y": [52, yearReturn, 0.012],
"5Y": [60, (Math.pow(1 + yearReturn / 100, 5) - 1) * 100, 0.018],
"ALL": [64, (Math.pow(1 + yearReturn / 100, 7) - 1) * 100, 0.02]
}[range] || [32, h.perf?.["1M"] ?? h.dch * 4.5, 0.006];
const [len, movePct, vol] = cfg;
const start = h.last / (1 + movePct / 100);
return { data: series((h.seed || 1) + len, len, start, h.last, vol), movePct };
};
const txFor = (h) => {
const buy = (qty, px, when, note) => ({
side: "BUY",
icon: "trade",
title: `Bought ${h.ticker}`,
detail: `${qty}${h.kind === "crypto" ? "" : " sh"} @ ${usd(px, h.kind === "crypto" ? 0 : 2)}${note ? " · " + note : ""}`,
when,
net: -(Number(qty) * px)
});
if (h.kind === "crypto") return [
buy((h.shares * 0.3).toFixed(4), h.last * 0.94, "Apr 19"),
buy((h.shares * 0.4).toFixed(4), h.avg * 1.1, "Mar 02"),
buy((h.shares * 0.3).toFixed(4), h.avg, "Jan 14")];
return [
buy(Math.round(h.shares * 0.2), h.last * 0.97, "Fri", "auto-invest"),
buy(Math.round(h.shares * 0.3), h.avg * 1.12, "Apr 04"),
{ side: "DIV", icon: "down", title: `Dividend · ${h.ticker}`, detail: "Reinvested", when: "Mar 28", net: h.value * 0.003 },
buy(Math.round(h.shares * 0.5), h.avg, "Feb 11")];
};
/* Yoshi's bespoke, position-aware take for a holding — shown on its detail
page, with a one-tap follow-up into chat. Specific by ticker, with sensible
fallbacks by asset kind + whether the position is at a gain. */
function yoshiTake(h) {
const t = h.ticker,gain = h.pl >= 0,paper = String(h.id).startsWith("pp-");
const named = {
NVDA: ["Your standout winner — and now your largest single position. I'd consider trimming a slice to lock in some of that gain and keep one name from steering the whole portfolio.", `trim some ${t} to lock gains`],
AAPL: ["Steady ballast that's doing its job. Nothing here needs a decision today — hold and let it compound.", `review my ${t} position`],
MSFT: ["Quietly compounding. A reasonable place to add on a dip; otherwise just hold.", `set up a buy-the-dip rule for ${t}`],
VOO: ["Your low-cost index core. Keep the auto-invest running — this is the boring engine that does most of the work.", `review my ${t} auto-invest`],
VTI: ["Total-market index, and it's in your Roth — exactly where it belongs, since the gains compound tax-free. Let it ride.", `review my Roth allocation`],
BTC: ["Up strongly from your cost, and your most volatile sleeve. I'd size it deliberately so a rough week doesn't rattle you — trimming toward a target weight is the clean move.", `set a target weight for ${t}`],
ETH: ["Held at a gain but choppier than Bitcoin. Fine as a smaller satellite; I wouldn't chase it higher from here.", `rebalance my crypto`],
SOL: ["A big run on a high-beta name. Taking a little profit into your cash buffer locks some of it in without trying to call the top.", `take some ${t} profit into cash`]
};
if (named[t]) return { take: named[t][0], cue: named[t][1] };
if (paper) return { take: `This is a paper-trade position — no real money at risk. A good place to test a thesis on ${t} before you put real capital behind it.`, cue: `talk through my ${t} thesis` };
if (h.kind === "crypto") return gain ?
{ take: `${t} is up from your cost, and it's a volatile sleeve. Worth sizing on purpose rather than adding on momentum — I can set a target weight.`, cue: `set a target weight for ${t}` } :
{ take: `${t} is below your cost. If the thesis still holds, waiting is fine; if not, I can harvest the loss to offset gains.`, cue: `harvest the loss on ${t}` };
if (h.kind === "etf") return { take: `${t} is a diversified index position — a sensible core you can keep adding to on a schedule.`, cue: `automate adding to ${t}` };
return gain ?
{ take: `${t} is working for you — up from your cost. No need to touch it unless it's grown into too large a slice of the portfolio.`, cue: `check whether ${t} is overweight` } :
{ take: `${t} is below your cost. If you still believe the story, holding is reasonable; otherwise I can put the loss to work at tax time.`, cue: `weigh holding vs. selling ${t}` };
}
const SECURITY_DETAIL_AUDIT = [
"Equity fundamentals: company profile, valuation, profitability, per-share and market profile",
"Equity events: earnings, analyst view, corporate actions, distributions, estimates and splits",
"ETF exposures: allocation, sector, country, region and top holdings",
"ETF profile: sponsor, type, index, fund flows, trailing returns and volatility",
"News: source, timestamp, sentiment and preview copy"
];
const SECURITY_POSITION_TABS = ["overview", "details"];
const SECURITY_FUNDAMENTAL_TABS = {
stock: ["overview", "events"],
etf: ["overview", "exposure", "etf", "events"],
crypto: ["overview"]
};
const SECURITY_TAB_LABELS = {
overview: "Overview",
details: "Details",
events: "Events",
exposure: "Exposure",
etf: "Details"
};
const equitySecurityDetail = (h) => ({
kindLabel: "Equity",
companyProfile: [
["Sector", h.ticker === "NVDA" ? "Electronic Technology" : "Technology"],
["Industry", h.ticker === "NVDA" ? "Semiconductors" : "Software and Services"],
["Market cap", h.ticker === "NVDA" ? "$4.82T" : "$3.48T"],
["P/E ratio", h.fund?.find(([k]) => k === "P/E ratio")?.[1] || "31.4"],
["Dividend yield", h.ticker === "NVDA" ? "0.02%" : "0.71%"]
],
description: h.ticker === "NVDA"
? "NVIDIA designs graphics processors, accelerated computing platforms and related software used across gaming, data centers, automotive systems and enterprise AI infrastructure."
: `${h.name} is a large-cap operating company. Yoshi tracks fundamentals, estimates and events here so a single security can be reviewed without leaving the app.`,
valuation: [["Enterprise value", h.ticker === "NVDA" ? "$5.01T" : "$3.55T"], ["Price/book", h.ticker === "NVDA" ? "24.66" : "12.40"], ["Book value/share", h.ticker === "NVDA" ? "$8.07" : "$31.20"]],
profitability: [["Revenue", h.ticker === "NVDA" ? "$253.49B" : "$198.27B"], ["Net income", h.ticker === "NVDA" ? "$159.61B" : "$72.18B"], ["Gross margin", h.ticker === "NVDA" ? "74.15%" : "61.22%"], ["Net margin", h.ticker === "NVDA" ? "71.46%" : "36.41%"]],
perShare: [["EPS", h.ticker === "NVDA" ? "$6.53" : "$11.84"], ["Total debt", h.ticker === "NVDA" ? "$12.81B" : "$46.20B"]],
marketProfile: [["Beta", h.ticker === "NVDA" ? "2.11" : "1.08"], ["Employees", h.ticker === "NVDA" ? "42,000" : "221,000"]],
earnings: [["Q1", "05/20/2026"], ["Q2", "08/26/2026"], ["Q3", "11/19/2025"], ["Q4", "02/25/2026"]],
analystView: [["Consensus", "Buy"], ["Analysts", h.ticker === "NVDA" ? "67" : "49"], ["Target price", h.ticker === "NVDA" ? "$310.62" : usd(h.last * 1.18)], ["High target", h.ticker === "NVDA" ? "$743.10" : usd(h.last * 1.65)], ["Low target", h.ticker === "NVDA" ? "$180.00" : usd(h.last * 0.82)], ["Estimate rows", "6"]],
corporateActions: [["Annual General Meeting", "2026-06-24", "—", "EIAG1398783_30DAC726"], ["Distribution", "2026-06-04", "—", "EIDI4815764_30DAC726"], ["Distribution", "2026-03-11", "—", "EIDI4634331_30DAC726"]],
distributions: [["2026-06-04", "2026-06-04", "2026-06-26", "0.25"], ["2026-03-11", "2026-03-11", "2026-04-01", "0.01"], ["2025-12-04", "2025-12-04", "2025-12-26", "0.01"], ["2025-09-11", "2025-09-11", "2025-10-02", "0.01"]],
estimates: [["EPS", "2026FY", "8.938635", "49", "8.12", "9.85"], ["Sales", "2026FY", "392058.904863", "58", "357215", "415524.773224"], ["EPS", "2026Q2", "2.075352", "40", "2.01", "2.20"]],
splits: [],
news: (h.news || []).map(([src, head, when]) => ({ source: src, headline: head, when, tone: h.dch >= 0 ? "Soft" : "Watch", summary: `${head}. Yoshi tracks this alongside your position, analyst view and event calendar.` }))
});
const ETF_DETAIL_BY_TICKER = {
VTI: { sponsor: "Vanguard", etfType: "Total market equity", index: "CRSP US Total Market Index", indexProvider: "CRSP", expense: "0.03%", secYield: "1.31%", ttmYield: "1.37%", category: "US Fund Large Blend", globalCategory: "US Equity", style: "Large Blend", description: "VTI seeks to track the performance of the broad US equity market across large-, mid- and small-cap stocks." },
VOO: { sponsor: "Vanguard", etfType: "S&P 500 equity", index: "S&P 500 Index", indexProvider: "S&P Dow Jones", expense: "0.03%", secYield: "1.27%", ttmYield: "1.31%", category: "US Fund Large Blend", globalCategory: "US Equity", style: "Large Blend", description: "VOO seeks to track the performance of the S&P 500 Index before fees and expenses." },
SPY: { sponsor: "State Street Global Advisors", etfType: "S&P 500 equity", index: "S&P 500 Index", indexProvider: "S&P Dow Jones", expense: "0.09%", secYield: "1.20%", ttmYield: "1.25%", category: "US Fund Large Blend", globalCategory: "US Equity", style: "Large Blend", description: "SPY seeks to track the performance of the S&P 500 Index and is used as broad US large-cap exposure." },
QQQ: { sponsor: "Invesco", etfType: "Nasdaq 100 equity", index: "Nasdaq-100 Index", indexProvider: "Nasdaq", expense: "0.20%", secYield: "0.58%", ttmYield: "0.62%", category: "US Fund Large Growth", globalCategory: "US Equity", style: "Large Growth", description: "QQQ seeks to track the Nasdaq-100 Index, with high exposure to technology and communication services." }
};
const etfSecurityDetail = (h) => {
const meta = ETF_DETAIL_BY_TICKER[h.ticker] || ETF_DETAIL_BY_TICKER.VTI;
return {
kindLabel: "ETF",
companyProfile: [["Sector", "Miscellaneous"], ["Industry", "Investment Trusts or Mutual Funds"], ["Market cap", "—"], ["P/E ratio", "—"], ["Dividend yield", meta.ttmYield]],
fund: [["Expense ratio", meta.expense], ["SEC yield", meta.secYield], ["TTM yield", meta.ttmYield], ["Duration", "—"], ["Fund category", meta.category], ["Global category", meta.globalCategory], ["Style", meta.style]],
etfProfile: [["Sponsor", meta.sponsor], ["ETF type", meta.etfType], ["Asset class", "Equities (Stocks)"], ["Linked index", meta.index], ["Index provider", meta.indexProvider], ["Inception", h.ticker === "SPY" ? "1993-01-22" : "2001-05-24"], ["Listing", h.ticker === "SPY" ? "1993-01-22" : "2001-05-24"], ["Replication", "Physical"], ["Domicile", "US"], ["Base currency", "USD"], ["Prospectus", "sec.gov/Archives/edgar"]],
description: meta.description,
exposures: [
{ title: "Asset allocation", asOf: "Mar. 31, 2026", rows: [["U.S. stocks", "97.42%", "var(--accent)"], ["International stocks", "1.82%", "var(--alloc-cash)"], ["Other", "0.76%", "var(--signal-neg)"]] },
{ title: "Sector", rows: [["Technology", "32.14%", "var(--accent)"], ["Financials", "13.48%", "var(--alloc-cash)"], ["Health care", "11.26%", "var(--signal-neg)"], ["Consumer discretionary", "10.42%", "var(--alloc-crypto)"], ["Industrials", "8.71%", "var(--accent-pos)"]] },
{ title: "Country", asOf: "Mar. 31, 2026", rows: [["United States", "96.44%", "var(--accent)"], ["Canada", "1.02%", "var(--alloc-cash)"], ["United Kingdom", "0.74%", "var(--signal-neg)"], ["Other", "1.80%", "var(--ink-3)"]] },
{ title: "Region", rows: [["North America", "97.46%", "var(--accent)"], ["Europe", "1.12%", "var(--alloc-cash)"], ["Asia", "0.61%", "var(--signal-neg)"], ["Other", "0.81%", "var(--ink-3)"]] }
],
topHoldings: [["Apple Inc", "AAPL", "Technology", "United States", "175.6M", "6.04%"], ["Microsoft Corp", "MSFT", "Technology", "United States", "82.1M", "5.77%"], ["NVIDIA Corp", "NVDA", "Semiconductors", "United States", "65.2M", "5.31%"], ["Amazon.com Inc", "AMZN", "Consumer", "United States", "58.8M", "3.42%"], ["Meta Platforms", "META", "Communication", "United States", "28.1M", "2.54%"]],
fundFlows: [["2026-06-24", "1,074,012,781", "-9,820,000", "283,219,146", "2,933,706,934", "4,376,225,848"], ["2026-06-23", "1,074,012,781", "13,085,750", "283,219,014", "2,933,707,041", "4,470,868,675"], ["2026-06-22", "1,083,189,031", "22,262,000", "292,395,264", "2,942,883,292", "4,563,530,846"]],
trailingReturns: [["Since inception", "0.037", "2026-06-24", "2026-06-25 10:41:03"], ["10 Year", "0.126", "2026-06-24", "2026-06-25 10:41:03"], ["5 Year", "0.197", "2026-06-24", "2026-06-25 10:41:03"], ["3 Year", "0.287", "2026-06-24", "2026-06-25 10:41:03"], ["1 Year", "0.132", "2026-06-24", "2026-06-25 10:41:03"], ["YTD", "-0.038", "2026-06-24", "2026-06-25 10:41:03"]],
volatility: [["5 Year", "0.297", "—", "2026-06-24"], ["3 Year", "0.350", "—", "2026-06-24"], ["1 Year", "0.429", "—", "2026-06-24"], ["3 Month", "—", "474,590,307", "2026-06-24"], ["1 Month", "—", "524,552,729", "2026-06-24"]],
earnings: [["Q1", "—"], ["Q2", "—"], ["Q3", "—"], ["Q4", "—"]],
analystView: [["Consensus", "—"], ["Analysts", "—"], ["Target price", "—"], ["High target", "—"], ["Low target", "—"], ["Estimate rows", "0"]],
corporateActions: [["Distribution", "2025-12-22", "—", "EIDI3845336_6BCBBE1A"], ["Distribution", "2024-12-23", "—", "EIDI3287802_6BCBBE1A"], ["Issuer Name Change", "2022-09-28", "—", "EIIS69852_6BCBBE1A"]],
distributions: [["2025-12-29", "2025-12-29", "2025-12-30", "—"], ["2025-12-22", "2025-12-22", "2025-12-26", "3.1661"], ["2024-12-23", "2024-12-23", "2024-12-24", "0.6142"], ["2023-12-18", "2023-12-19", "2023-12-22", "3.258"]],
estimates: [],
splits: [],
news: (h.news || []).length ? h.news.map(([src, head, when]) => ({ source: src, headline: head, when, tone: "Soft", summary: `${head}. Yoshi pairs this with ETF profile, exposure and flow data.` })) : []
};
};
const cryptoSecurityDetail = (h) => ({
kindLabel: "Crypto",
companyProfile: h.fund || [["Network", h.name], ["Holdings", `${h.shares}`], ["Cost basis", usd(h.avg)]],
news: (h.news || []).map(([src, head, when]) => ({ source: src, headline: head, when, tone: "Soft", summary: `${head}. Yoshi tracks crypto market context separately from ETF and equity fundamentals.` }))
});
const securityDetailData = (h) => h.kind === "etf" ? etfSecurityDetail(h) : h.kind === "crypto" ? cryptoSecurityDetail(h) : equitySecurityDetail(h);
const securityAccountLabel = (h) => h.group === "crypto" ? "Crypto" : h.ticker === "VTI" ? "Roth IRA" : String(h.id).startsWith("sch-") ? "Schwab Brokerage" : String(h.id).startsWith("pp-") ? "Test drive 1" : "Brokerage";
const securityAccountSub = (h) => h.group === "crypto" ? "Spot account" : h.ticker === "VTI" ? "Retirement" : "Individual Taxable";
const securityAccountHoldingRows = (h) => [{
id: `${h.id || h.ticker}-account-position`,
account: securityAccountLabel(h),
sub: securityAccountSub(h),
shares: h.shares,
value: h.value,
dayAbs: h.dayAbs,
dch: h.dch,
avg: h.avg,
pl: h.pl,
plPct: h.plPct,
kind: h.kind,
weight: 100
}];
const DetailSection = ({ title, children, sub }) =>
{title}
{sub && {sub} }
{children}
;
const hasUsefulFundamentalValue = (value, label) => {
const text = String(value ?? "").trim();
if (!text) return false;
if (["-", "—", "--", "n/a", "na", "null", "undefined"].includes(text.toLowerCase())) return false;
if (/estimate rows/i.test(String(label || "")) && Number(text.replace(/,/g, "")) === 0) return false;
return true;
};
const cleanFactRows = (rows = []) => rows.filter(([label, value]) => hasUsefulFundamentalValue(value, label));
const cleanTableRows = (rows = []) => rows.filter((row) => row.slice(1).some((cell) => hasUsefulFundamentalValue(cell)));
const cleanBreakdownRows = (rows = []) => rows.filter(([label, value]) => hasUsefulFundamentalValue(label) && hasUsefulFundamentalValue(value));
const FactGrid = ({ rows, cols = 2 }) => {
const usable = cleanFactRows(rows);
if (!usable.length) return null;
return (
{usable.map(([label, value], i) =>
)}
);
};
const MiniTable = ({ columns, rows = [], strongFirst = false }) => {
rows = cleanTableRows(rows);
if (!rows.length) return null;
return (
4 ? "hcar" : undefined} style={{ border: "1px solid var(--rule)", borderRadius: 12, overflowX: columns.length > 4 ? "auto" : "hidden", overflowY: "hidden", background: "var(--bg-card)" }}>
4 ? columns.length * 92 : "auto" }}>
{columns.map((c) => {c} )}
{rows.map((row, i) =>
{row.map((cell, j) => {cell || "—"} )}
)}
);
};
const renderDetailSection = ({ title, rows = [], cols = 2, sub, description }) => {
const usable = cleanFactRows(rows);
if (!usable.length && !description) return null;
return (
{description}
}
);
};
const renderTableSection = ({ title, columns, rows = [], strongFirst = false, sub }) => {
const usable = cleanTableRows(rows);
if (!usable.length) return null;
return (
);
};
const newsSummaryText = (h, items) => {
if (!items.length) return `No recent headlines were returned for ${h.ticker}.`;
const lead = items[0]?.headline || `${h.ticker} is in focus`;
const extra = items.length > 1 ? ` ${items.length - 1} more headline${items.length === 2 ? "" : "s"} add context around recent movement.` : "";
return `${lead.replace(/[.?!]$/, "")}.${extra}`;
};
const SecurityNewsSummaryCard = ({ h, detail }) => {
const [expanded, setExpanded] = useState(false);
const items = detail.news || [];
return (
News summary
{newsSummaryText(h, items)}
{items.length ? (
<>
setExpanded((open) => !open)} style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 11, background: "none", border: "none", padding: 0, cursor: "pointer", fontFamily: "var(--f-display)", fontSize: typeSize(12.5), fontWeight: 600, color: "var(--ink-2)" }}>
{expanded ? "Hide links" : "See more"}
{expanded &&
}
) : null}
);
};
const SecurityEventsPanel = ({ detail }) =>
<>
{renderDetailSection({ title: "Earnings", rows: detail.earnings || [], cols: 4 })}
{renderDetailSection({ title: "Analyst view", rows: detail.analystView || [] })}
{renderTableSection({ title: "Corporate action summaries", columns: ["Type", "Date", "Status", "Description"], rows: detail.corporateActions || [] })}
{renderTableSection({ title: "Distributions", columns: ["Ex-date", "Record", "Pay", "Amount"], rows: detail.distributions || [] })}
{renderTableSection({ title: "Analyst estimates", columns: ["Type", "Period", "Value", "Analysts", "Low", "High"], rows: detail.estimates || [] })}
{renderTableSection({ title: "Splits", columns: ["Date", "Ratio", "Status"], rows: detail.splits || [] })}
;
const ExposureBreakdownCard = ({ breakdown }) =>
{breakdown.title}
{breakdown.asOf &&
{breakdown.asOf} }
{cleanBreakdownRows(breakdown.rows || []).map(([label, value, color]) =>
{label}
{value}
)}
;
const SecurityExposuresPanel = ({ detail }) => {
const breakdowns = (detail.exposures || []).filter((breakdown) => cleanBreakdownRows(breakdown.rows || []).length);
return (
<>
{breakdowns.length ?
{breakdowns.map((breakdown) =>
: null}
{renderTableSection({ title: "Top holdings", columns: ["Holding", "Symbol", "Industry", "Country", "Shares", "Weight"], rows: detail.topHoldings || [], strongFirst: true })}
);
};
const SecurityEtfPanel = ({ detail }) =>
<>
{renderDetailSection({ title: "ETF profile", rows: detail.etfProfile || [], description: detail.description })}
{renderTableSection({ title: "Fund flows", columns: ["Date", "YTD", "1M", "3M", "1Y", "AUM"], rows: detail.fundFlows || [] })}
{renderTableSection({ title: "Trailing returns", columns: ["Period", "Return", "As of", "Updated"], rows: detail.trailingReturns || [] })}
{renderTableSection({ title: "Volatility", columns: ["Period", "Volatility", "Avg daily volume", "As of"], rows: detail.volatility || [] })}
;
const securityFundamentalTabsFor = (h) => SECURITY_FUNDAMENTAL_TABS[h.kind === "etf" ? "etf" : h.kind === "crypto" ? "crypto" : "stock"];
const securityDetailModel = (security) => {
const held = typeof securityHolding === "function" ? securityHolding(security) : HOLDINGS.find((x) => x.id === security?.id || x.ticker === security?.ticker);
const source = held || security || {};
const market = MARKET.find((m) => m.id === source.id || m.ticker === source.ticker) || source;
const last = source.last ?? market.last ?? 100;
const dch = source.dch ?? market.dch ?? 0;
const yearReturn = typeof securityYearReturn === "function" ? securityYearReturn(source) : source.perf?.["1Y"] ?? 17;
const perfValue = source.perf || { "1W": +(dch * 1.5).toFixed(1), "1M": +(dch * 4.5).toFixed(1), "1Y": yearReturn };
const shares = held?.shares ?? 0;
const avg = held?.avg ?? last;
const value = held?.value ?? shares * last;
const cost = held?.cost ?? shares * avg;
const positionDayAbs = held?.dayAbs ?? (value ? value * dch / 100 : last * dch / 100);
return {
...market,
...source,
ticker: source.ticker || market.ticker || "SEC",
name: source.name || market.name || "Security",
kind: source.kind || market.kind || "stock",
last,
dch,
perf: perfValue,
seed: source.seed ?? Math.round(Math.abs(shares || last) + last),
shares,
avg,
value,
cost,
pl: held?.pl ?? value - cost,
plPct: held?.plPct ?? (cost ? (value - cost) / cost * 100 : 0),
dayAbs: positionDayAbs,
news: source.news || market.news || [[market.kind === "crypto" ? "CoinDesk" : "Markets", `${source.name || market.name || "This security"} in focus as volume picks up`, "1h"]],
hasPosition: !!held
};
};
const SecurityPillTabs = ({ tabs, value, onChange, marker, wrap = false }) =>
{tabs.map((tab) => {
const on = value === tab;
return onChange(tab)} style={{ flex: "none", padding: "7px 13px", borderRadius: 999, cursor: "pointer", background: on ? "var(--accent)" : "color-mix(in srgb, var(--ink) 8%, var(--bg-2))", border: "none", color: on ? "var(--accent-ink)" : "var(--ink-2)", fontFamily: "var(--f-display)", fontSize: typeSize(12), fontWeight: 600 }}>{SECURITY_TAB_LABELS[tab]} ;
})}
;
const SecurityPriceGraphSection = ({ h }) => {
const [range, setRange] = useState("1M");
const [scrub, setScrub] = useState(null);
const { data, movePct } = useMemo(() => buildSeries(h, range), [h, range]);
const accent = data.length > 1 && data[data.length - 1] >= data[0] ? "var(--accent-pos)" : "var(--signal-neg)";
const price = scrub != null ? scrub : h.last;
// $ + % move over the range: 1D trusts the official day change, other
// ranges derive the dollar move from the series behind the chart
const moveAbs = range === "1D" ? h.last - h.last / (1 + h.dch / 100) : data.length > 1 ? data[data.length - 1] - data[0] : 0;
const movePctShown = range === "1D" ? h.dch : movePct;
return (
{range === "1D" ? "Today" : range}
setScrub(idx == null ? null : data[idx])} padY={4} range={range} />
{RANGES.map((r) => {
const on = r === range;
return {setRange(r);setScrub(null);}} style={{ flex: 1, padding: "5px 0", background: on ? "var(--bg-2)" : "transparent", border: "none", borderRadius: 7, fontFamily: "var(--f-mono)", fontSize: typeSize(11), fontWeight: 500, color: on ? "var(--ink)" : "var(--ink-3)", cursor: "pointer" }}>{r} ;
})}
);
};
const SecurityStat = ({ label, value, color = "var(--ink)", right, noBorder }) =>
;
const SecurityActivityRow = ({ activity, last }) => {
const positive = activity.net >= 0;
return (
{activity.title}
{activity.detail}
{signed(activity.net, 0)}
{activity.when}
);
};
const SecurityActivityList = ({ h }) =>
{txFor(h).map((activity, index) =>
;
const ACCOUNT_HOLDING_COLUMNS = [
["Shares", 74, (row) => ({ main: row.kind === "crypto" ? `${row.shares}` : `${row.shares}` })],
["Value", 102, (row) => ({ main: usd(row.value, 2) })],
["Today", 86, (row) => ({ main: signed(row.dayAbs, 0), sub: pct(row.dch), color: row.dch >= 0 ? "var(--accent-pos)" : "var(--signal-neg)" })],
["%Port", 74, (row) => ({ main: row.weight.toFixed(2) + "%" })],
["Cost basis", 92, (row) => ({ main: usd(row.avg, row.kind === "crypto" ? 0 : 2), color: "var(--ink-2)" })],
["Return", 94, (row) => ({ main: signed(row.pl, 0), sub: pct(row.plPct), color: row.pl >= 0 ? "var(--accent-pos)" : "var(--signal-neg)" })]
];
const ACCOUNT_HOLDING_ACCOUNT_WIDTH = 110;
const ACCOUNT_HOLDING_GRID_COLUMNS = [ACCOUNT_HOLDING_ACCOUNT_WIDTH, ...ACCOUNT_HOLDING_COLUMNS.map(([, width]) => width)].map((width) => `${width}px`).join(" ");
const SecurityAccountHoldingsTable = ({ h }) => {
const rows = securityAccountHoldingRows(h);
const W = ACCOUNT_HOLDING_ACCOUNT_WIDTH + ACCOUNT_HOLDING_COLUMNS.reduce((sum, [, width]) => sum + width, 0);
const grid = { display: "grid", gridTemplateColumns: ACCOUNT_HOLDING_GRID_COLUMNS, alignItems: "center", width: W };
const accountPin = { position: "sticky", left: 0, zIndex: 2, background: "var(--bg)", minWidth: 0, boxSizing: "border-box", paddingRight: 12 };
const cell = { minWidth: 0, boxSizing: "border-box", textAlign: "right", paddingLeft: 10 };
return (
Account
{ACCOUNT_HOLDING_COLUMNS.map(([label]) =>
{label}
)}
{rows.map((row, ri) =>
{row.account}
{row.sub}
{ACCOUNT_HOLDING_COLUMNS.map(([label, _width, format]) => {
const cellValue = format(row);
return (
{cellValue.main}
{cellValue.sub &&
{cellValue.sub}
}
);
})}
)}
);
};
const SecurityPositionSection = ({ h }) => {
const [tab, setTab] = useState("overview");
if (!h.hasPosition) return null;
return (
Your position
{tab === "overview" ? (
= 0 ? "var(--accent-pos)" : "var(--signal-neg)"} right />
) : (
)}
);
};
const SecurityFundamentalsOverview = ({ h, detail }) =>
<>
{renderDetailSection({ title: "Overview", rows: detail.companyProfile || [], description: detail.description })}
{h.kind === "etf" ? renderDetailSection({ title: "Fund", rows: detail.fund || [] }) : h.kind === "stock" ? <>
{renderDetailSection({ title: "Valuation", rows: detail.valuation || [] })}
{renderDetailSection({ title: "Profitability", rows: detail.profitability || [] })}
{renderDetailSection({ title: "Per-share and balance sheet", rows: detail.perShare || [] })}
{renderDetailSection({ title: "Market profile", rows: detail.marketProfile || [] })}
: null}
;
const SecurityFundamentalsSection = ({ h, detail }) => {
const tabs = securityFundamentalTabsFor(h);
const [tab, setTab] = useState("overview");
const active = tabs.includes(tab) ? tab : "overview";
return (
Fundamentals
{active === "overview" && );
};
const SecurityDetailHierarchy = ({ security, nav, onTrade }) => {
const h = securityDetailModel(security);
const detail = securityDetailData(h);
if (onTrade) void onTrade;
return (
);
};
const HoldingDetail = ({ id, nav }) => {
const h = HOLDINGS.find((x) => x.id === id);
return (
nav.pop()} aria-label="Back to holdings" style={{ background: "none", border: "none", padding: 4, margin: "0 -4px", color: "var(--ink)", display: "flex", flex: "none" }}>
nav.clearStack ? nav.clearStack() : nav.tab("accounts")} aria-label="Close to Accounts" style={{ background: "none", border: "none", display: "flex", color: "var(--ink-3)", padding: 4, flex: "none" }}>
nav.sheet({ type: "trade", id: h.id, returnToAccounts: true })} />
nav.sheet({ type: "trade", id: h.id, returnToAccounts: true })}>Trade {h.ticker}
);
};
const Stat = ({ label, value, color = "var(--ink)", right, noBorder }) =>
;
/* ============================================================
Account detail · holdings table (h-scroll) + transactions
============================================================ */
/* which holdings live in each Yoshi account. Sums stay consistent with the
group totals shown on the Accounts list. */
const ACCOUNTS = {
cash: { name: "Cash", sub: "Yoshi ••8841", cash: true, routing: "021000021", account: "1500240048841" },
brokerage: { name: "Brokerage", sub: "Yoshi · Individual Taxable", ids: ["nvda", "aapl", "msft", "voo"] },
roth: { name: "Roth IRA", sub: "Yoshi · Retirement", ids: ["vti"] },
crypto: { name: "Crypto", sub: "Yoshi · Spot ••8841", ids: ["btc", "eth", "sol"] },
paper: { name: "Test drive 1", sub: "Yoshi · Simulated", ids: ["pp-tsla", "pp-amzn", "pp-spy"] },
schwab: { name: "Schwab", displayName: "Schwab Brokerage", displaySub: "Schwab •5520", sub: "Brokerage · Connected", ids: ["sch-spy", "sch-qqq"] },
coinbase: { name: "Coinbase", displayName: "Coinbase Crypto", displaySub: "Coinbase •3097", sub: "Crypto · Needs re-auth", ids: ["cb-doge"] },
chase: { name: "Chase", displayName: "Chase Checking", displaySub: "Chase •4417", sub: "Checking · Connected", cash: true, totalLabel: "Balance", note: "External",
accounts: [{ id: "chase-chk", name: "Chase Checking", sub: "••4471", apr: "", value: 8210.32, bar: "var(--rule-2)" }], txns: CHASE_TXNS }
};
const accountDisplayName = (acct) => acct.displayName || acct.name;
const accountDisplaySub = (acct) => acct.displaySub || acct.sub;
const acctValue = (ids) => ids.reduce((s, id) => {const h = HOLDINGS.find((x) => x.id === id);return s + (h ? h.value : 0);}, 0);
const YOSHI_INVESTMENT_ACCOUNTS = [ACCOUNTS.brokerage, ACCOUNTS.roth, ACCOUNTS.crypto].filter(Boolean);
const EXTERNAL_INVESTMENT_ACCOUNTS = [ACCOUNTS.schwab, ACCOUNTS.coinbase].filter(Boolean);
/* combined holdings view across Yoshi and external investment accounts. */
const ALL_HOLDINGS_ACCT = {
name: "All holdings",
sub: "Across your Yoshi and external accounts",
ids: [...new Set([...YOSHI_INVESTMENT_ACCOUNTS.flatMap((account) => account.ids || []), ...EXTERNAL_INVESTMENT_ACCOUNTS.flatMap((account) => account.ids || [])])],
combined: true
};
const ALL_HOLDINGS_SWITCH_ACCOUNTS = [ALL_HOLDINGS_ACCT, ...YOSHI_INVESTMENT_ACCOUNTS, ...EXTERNAL_INVESTMENT_ACCOUNTS];
const allHoldingsStartFor = (acct) => {
if (acct.combined || acct.name === ALL_HOLDINGS_ACCT.name) return ALL_HOLDINGS_ACCT;
return acct;
};
/* holdings flagged as recently added (for the "Recently added" filter) */
const RECENT_ADDS = ["nvda", "voo", "sol", "eth"];
/* build a full holding record (so HoldingDetail works) for paper + external accounts */
const mkH = (id, ticker, name, kind, shares, avg, last, dch) => {
const value = shares * last,cost = shares * avg;
return { id, ticker, name, kind, shares, avg, last, dch, value, cost, pl: value - cost, plPct: (value - cost) / cost * 100, dayAbs: value * dch / 100,
perf: { "1W": +(dch * 1.5).toFixed(1), "1M": +(dch * 3).toFixed(1), "1Y": +(dch * 9).toFixed(1) }, seed: Math.round(Math.abs(shares) + last),
fund: [["Asset class", kind === "crypto" ? "Crypto" : kind === "etf" ? "ETF" : "Equity"], ["Day range", "—"], ["52w range", "—"]],
news: [["Markets", name + " moved with the broader tape.", "2h"]] };
};
const EXTRA_HOLDINGS = [
mkH("sch-spy", "SPY", "SPDR S&P 500 ETF", "etf", 28, 540.10, 597.10, 0.64),
mkH("sch-qqq", "QQQ", "Invesco QQQ Trust", "etf", 13, 470.00, 512.33, 0.88),
mkH("cb-doge", "DOGE", "Dogecoin", "crypto", 4400, 0.31, 0.42, 5.60),
mkH("pp-tsla", "TSLA", "Tesla Inc", "stock", 120, 360.00, 342.18, -1.84),
mkH("pp-amzn", "AMZN", "Amazon.com Inc", "stock", 50, 180.00, 201.40, 1.22),
mkH("pp-spy", "SPY", "SPDR S&P 500 ETF", "etf", 60, 560.00, 597.10, 0.64)];
EXTRA_HOLDINGS.forEach((h) => {if (!HOLDINGS.find((x) => x.id === h.id)) HOLDINGS.push(h);});
const CHASE_TXNS = [
{ id: "h1", icon: "down", title: "Payroll", detail: "Acme Corp · ACH", amt: 3120.00, when: "Jun 1" },
{ id: "h2", icon: "receipt", title: "Groceries", detail: "Whole Foods", amt: -184.22, when: "May 30" },
{ id: "h3", icon: "swap", title: "Transfer to Yoshi", detail: "External ••8841", rail: "Standard ACH", type: "External transfer", amt: -2000.00, when: "May 28" },
{ id: "h4", icon: "card", title: "Utilities", detail: "ConEd · autopay", amt: -142.05, when: "May 26" }];
const DEBT_TXNS = [
{ id: "d1", icon: "down", title: "Payment received", detail: "From Checking · autopay", amt: 300.00, when: "Jun 1" },
{ id: "d2", icon: "receipt", title: "Purchase", detail: "Travel · airline", amt: -642.18, when: "May 27" },
{ id: "d3", icon: "receipt", title: "Purchase", detail: "Dining", amt: -88.40, when: "May 24" },
{ id: "d4", icon: "bank", title: "Interest charged", detail: "Cycle finance charge", amt: -41.90, when: "May 22" }];
/* synthetic per-account transaction ledger, Stream-style */
const acctTxns = (holdings) => {
const rows = [];
holdings.forEach((h) => {
const cr = h.kind === "crypto";
const unit = cr ? "" : " sh";
rows.push({ id: h.id + "-1", side: "BUY", ticker: h.ticker, qty: cr ? (h.shares * 0.3).toFixed(4) : Math.round(h.shares * 0.2), px: h.last * 0.97, when: "Fri", order: 5, note: "auto-invest" });
rows.push({ id: h.id + "-2", side: "BUY", ticker: h.ticker, qty: cr ? (h.shares * 0.4).toFixed(4) : Math.round(h.shares * 0.3), px: h.avg * 1.08, when: "Apr 04", order: 30 });
if (!cr) rows.push({ id: h.id + "-d", side: "DIV", ticker: h.ticker, amt: h.value * 0.003, when: "Mar 28", order: 34, note: "reinvested" });
rows.push({ id: h.id + "-3", side: "BUY", ticker: h.ticker, qty: cr ? (h.shares * 0.3).toFixed(4) : Math.round(h.shares * 0.5), px: h.avg, when: "Feb 11", order: 60 });
});
return rows.sort((a, b) => a.order - b.order);
};
const accountTxnTitle = (t) => {
if (t.title) return t.title;
if (t.side === "DIV") return `Dividend · ${t.ticker}`;
return `${t.side === "BUY" ? "Bought" : "Sold"} ${t.ticker}`;
};
const accountTxnDetail = (t) => {
if (t.detail) return t.detail;
const isDiv = t.side === "DIV";
const isAuto = t.note === "auto-invest";
return isDiv ? `${usd(t.amt)} ${t.note || ""}`.trim() : `${t.qty}${t.ticker && !String(t.qty).includes(".") ? " sh" : ""} @ ${usd(t.px, 2)}${t.note && !isAuto ? " · " + t.note : ""}`;
};
const accountTxnAmount = (t) => t.amt != null ? t.amt : t.side === "DIV" ? t.amt : -(Number(t.qty) * t.px);
const accountTxnCategory = (t) => {
if (t.category) return t.category;
if (t.side === "DIV") return "Income";
if (t.side) return "Investment";
const hay = `${t.title || ""} ${t.detail || ""}`.toLowerCase();
if (t.icon === "swap") return "Transfer";
if (t.icon === "down" || t.amt > 0) return "Income";
if (/whole foods|grocer/.test(hay)) return "Groceries";
if (/travel|airline/.test(hay)) return "Travel";
if (/dining/.test(hay)) return "Dining";
if (/rent|utility|utilities|coned|autopay|bill/.test(hay)) return "Bills";
return t.amt >= 0 ? "Income" : "Spending";
};
const toAccountTxnDetail = (t, external) => ({
id: t.id,
icon: t.icon || (t.side === "DIV" ? "down" : "trade"),
title: accountTxnTitle(t),
detail: accountTxnDetail(t),
when: t.when,
net: accountTxnAmount(t),
rail: t.rail,
type: t.type,
category: accountTxnCategory(t),
accountScope: external ? "external" : "yoshi"
});
/* a compact search bar with an inline filter icon → dropdown of filter options */
const AcctToolbar = ({ q, setQ, placeholder, filters, filter, setFilter }) => {
const [open, setOpen] = useState(false);
const active = filter !== "all";
const activeLabel = (filters.find((f) => f[0] === filter) || [])[1];
return (
setQ("")} style={{ background: "none", border: "none", display: "flex", color: "var(--ink-3)", padding: 0 }}> }
setOpen((o) => !o)} aria-label="Filter" style={{ position: "relative", background: "none", border: "none", display: "flex", padding: 1, color: active || open ? "var(--accent)" : "var(--ink-3)", cursor: "pointer" }}>
{active &&
setFilter("all")} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px", borderRadius: 999, background: "color-mix(in srgb, var(--accent) 12%, var(--bg-2))", border: "1px solid color-mix(in srgb, var(--accent) 40%, var(--rule-2))", fontFamily: "var(--f-display)", fontSize: typeSize(11.5), fontWeight: 600, color: "var(--ink)", cursor: "pointer" }}>
{activeLabel}
}
{open &&
<>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
Filter by
{filters.map(([k, l], i) =>
{setFilter(k);setOpen(false);}} style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "9px 13px", background: k === filter ? "var(--bg-2)" : "none", border: "none", borderTop: i ? "1px solid var(--rule)" : "none", cursor: "pointer", textAlign: "left" }}>
{l}
{k === filter &&
)}
}
);
};
/* horizontally-scrollable holdings table. First column (the holding) is pinned;
scroll right to reveal % of portfolio, avg cost, and total return. */
const HoldingsTable = ({ holdings, total, nav }) => {
const NUMCOLS = [
["Value", 84, (h) => ({ main: usd(h.value, 2) }), (h) => h.value],
["Today", 84, (h) => ({ main: signed(h.dayAbs, 0), sub: pct(h.dch), color: h.dch >= 0 ? "var(--accent-pos)" : "var(--signal-neg)" }), (h) => h.dayAbs],
["%Port", 84, (h) => ({ main: (h.value / total * 100).toFixed(2) + "%" }), (h) => h.value],
["Cost basis", 92, (h) => ({ main: usd(h.avg, h.kind === "crypto" ? 0 : 2), color: "var(--ink-2)" }), (h) => h.avg],
["Return", 84, (h) => ({ main: signed(h.pl, 0), sub: pct(h.plPct), color: h.pl >= 0 ? "var(--accent-pos)" : "var(--signal-neg)" }), (h) => h.pl]];
// sortable: default Value, highest → lowest. Tapping a header toggles
// direction; tapping a new column starts it descending (text starts A→Z).
const [sort, setSort] = useState({ key: "Value", dir: "desc" });
const onSort = (key) => setSort((s) => s.key === key ? { key, dir: s.dir === "desc" ? "asc" : "desc" } : { key, dir: key === "Holding" ? "asc" : "desc" });
const sorted = useMemo(() => {
const acc = sort.key === "Holding" ? null : (NUMCOLS.find((c) => c[0] === sort.key) || [])[3];
const arr = [...holdings].sort((a, b) =>
acc ? acc(a) - acc(b) : String(a.ticker).localeCompare(String(b.ticker)));
return sort.dir === "desc" ? arr.reverse() : arr;
}, [holdings, sort, total]);
const web = !!window.__YOSHI_WEB;
const SEAM = web ? 24 : 20,COLW = web ? 104 : 84,HOLDW = web ? 92 : 72; // edge padding, uniform numeric width, narrower holding column
const last = NUMCOLS.length - 1;
const W = SEAM + HOLDW + NUMCOLS.reduce((s, c, i) => s + (i === last ? COLW + SEAM : COLW), 0);
const stick = { position: "sticky", left: 0, zIndex: 2, background: "var(--bg)", width: SEAM + HOLDW, flex: "none", boxSizing: "border-box", paddingLeft: SEAM };
const cell = (i) => web
? { flex: "1 1 0", minWidth: COLW, boxSizing: "border-box", textAlign: "right", paddingLeft: 8, paddingRight: i === last ? SEAM : 0 }
: { flex: "none", boxSizing: "border-box", textAlign: "right", width: i === last ? COLW + SEAM : COLW, paddingLeft: 8, paddingRight: i === last ? SEAM : 0 };
const headerHeight = 58;
const headerLabelStyle = { fontSize: typeSize(web ? 10.5 : 9.5), lineHeight: 1.35, textAlign: "center", whiteSpace: "normal" };
const Caret = ({ k }) => {
const active = sort.key === k;
return
{active && sort.dir === "asc" ? "▲" : "▼"} ;
};
const headBtn = { background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer", minHeight: headerHeight, display: "inline-flex", alignItems: "center", justifyContent: "center", font: "inherit", color: "inherit", textAlign: "center", WebkitTapHighlightColor: "transparent" };
return (
{/* header · tap a column to sort high ↔ low */}
onSort("Holding")} style={{ ...headBtn, width: HOLDW }}>
Holding
{NUMCOLS.map(([label], i) =>
onSort(label)} style={{ ...headBtn, width: "100%" }}>
{label}
)}
{sorted.length === 0 ?
No holdings match.
:
sorted.map((h, ri) =>
nav.push({ type: "holding", id: h.id })} style={{ width: "100%", display: "flex", alignItems: "center", background: "none", border: "none", borderBottom: ri === sorted.length - 1 ? "none" : "1px solid var(--rule)", padding: "12px 0", cursor: "pointer", textAlign: "left" }}>
{h.ticker}
{h.kind === "crypto" ? h.shares : h.shares + " sh"}
{NUMCOLS.map(([label, w, f], i) => {
const c = f(h);
return (
{c.main}
{c.sub &&
{c.sub}
}
);
})}
)}
);
};
const AcctTxnRow = ({ t, last, nav, external }) => {
const isDiv = t.side === "DIV";
const isAuto = t.note === "auto-invest";
const title = accountTxnTitle(t);
const detail = accountTxnDetail(t);
const amt = accountTxnAmount(t);
return (
nav.sheet({ type: "txn", tx: toAccountTxnDetail(t, external) })} style={{ width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 11, alignItems: "center", padding: window.__YOSHI_WEB ? "11px 32px" : "11px 18px", borderBottom: last ? "none" : "1px solid var(--rule)" }}>
{isAuto ?
= 0 ? "var(--accent-pos)" : "var(--ink)"} dim="var(--ink-3)" />
{t.when}
);
};
/* synthetic recent cash activity */
const CASH_TXNS = [
{ id: "k1", icon: "down", title: "Pay day", detail: "Acme Corp · direct deposit", amt: 6240.00, when: "Jun 1" },
{ id: "k2", icon: "receipt", title: "Rent", detail: "Bill pay · Greystar", amt: -2800.00, when: "Jun 1" },
{ id: "k3", icon: "bank", title: "Interest earned", detail: "Reserve · 3.30% APY", amt: 256.12, when: "May 31" },
{ id: "k4", icon: "card", title: "Card autopay", detail: "Yoshi Card ••2291", amt: -1240.40, when: "May 28" },
{ id: "k5", icon: "swap", title: "Transfer to Brokerage", detail: "Yoshi · auto-invest", rail: "Instant", type: "Between accounts", amt: -1500.00, when: "May 27" },
{ id: "k6", icon: "down", title: "Zelle from Jordan", detail: "Received ••8841", amt: 320.00, when: "May 24" }];
const CashAccountDetail = ({ acct, nav }) => {
const accounts = acct.accounts || CASH;
const txlist = acct.txns || CASH_TXNS;
const total = accounts.reduce((s, a) => s + a.value, 0);
const yearly = accounts.reduce((s, a) => s + (/4\.80/.test(a.apr || "") ? a.value * 0.048 : 0), 0);
const ytd = yearly * (5 / 12);
const [tab, setTab] = useState("balances");
const [q, setQ] = useState("");const [f, setF] = useState("all");
const [shown, setShown] = useState(false);
const [copied, setCopied] = useState("");
const [nick, setNick] = useState(accountDisplayName(acct));
const [editingNick, setEditingNick] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [apyInfo, setApyInfo] = useState(false);
const [fdicOpen, setFdicOpen] = useState(false);
const [hidden, toggleHidden] = useHiddenAccts();
const isHidden = hidden.includes(acct.name);
const external = !!acct.note; // linked / read-only accounts
const canReveal = !!acct.account;
useEffect(() => {setNick(accountDisplayName(acct));}, [acct]);
const copy = (label, val) => {
try {navigator.clipboard && navigator.clipboard.writeText(val);} catch (e) {}
setCopied(label);setTimeout(() => setCopied(""), 1400);
};
const shownTx = txlist.filter((t) => {
if (f === "in" && t.amt < 0) return false;
if (f === "out" && t.amt >= 0) return false;
const s = q.trim().toLowerCase();
return !s || (t.title + " " + t.detail).toLowerCase().includes(s);
});
return (
nav.pop()}
title={nick}
sub={accountDisplaySub(acct)}
right={
{(external || canReveal) &&
setMenuOpen((o) => !o)} style={{ flex: "none", display: "grid", placeItems: "center", width: 30, height: 30, background: menuOpen ? "var(--bg-2)" : "none", border: "1px solid " + (menuOpen ? "var(--rule-2)" : "transparent"), borderRadius: 8, cursor: "pointer", color: "var(--ink-2)" }}> }
acct.debt ? nav.sheet({ type: "transfer", rail: "billpay" }) : nav.sheet({ type: "transfer", from: "cash" })} style={{ background: "none", border: "1px solid var(--rule-2)", borderRadius: 8, padding: "6px 12px", fontFamily: "var(--f-display)", fontSize: typeSize(12), fontWeight: 600, color: "var(--ink)" }}>{acct.debt ? "Pay" : "Transfer"}
} />
{/* Yoshi cash · reveal numbers, rename, documents */}
{menuOpen && canReveal &&
<>
setMenuOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
{ setMenuOpen(false); setShown(true); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
Reveal account & routing number
{ setEditingNick(true); setMenuOpen(false); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", borderTop: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
Edit nickname
{ setMenuOpen(false); nav.sheet({ type: "documents", acct: "savings" }); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", borderTop: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
Documents
}
{/* external-account actions · rename, or drop from totals & summaries */}
{menuOpen && external &&
<>
setMenuOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
{setEditingNick(true);setMenuOpen(false);}} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
Edit nickname
{toggleHidden(acct.name);setMenuOpen(false);}} style={{ width: "100%", display: "flex", alignItems: "flex-start", gap: 10, padding: "12px 13px", background: "none", border: "none", borderTop: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
{isHidden ? "Show in totals & summary" : "Hide from totals & summary"}
{isHidden ? "Count this account again everywhere." : "Remains connected"}
}
{acct.totalLabel || "Total cash"}
{!acct.note && !acct.debt &&
setFdicOpen((o) => !o)} style={{ background: "none", border: "none", padding: 0, display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer", lineHeight: 0 }}>
{window.__YOSHI_WEB && setFdicOpen(false)} title="FDIC insurance">{FDIC_DISCLOSURE} }
}
Hidden from totals }
{acct.note ?
:
+{usd(ytd, 0)}
Interest Jan–May
3.30%
Current APY
setApyInfo((o) => !o)} style={{ background: "none", border: "none", padding: 0, display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer", lineHeight: 0 }}>
{window.__YOSHI_WEB && setApyInfo(false)} title="About your APY" width={274}>APY is an annual rate. Our current base rate is 3.30% and is subject to change. Interest accrues daily and is paid out monthly. }
}
{/* APY disclosure · slide-up bottom sheet */}
{apyInfo && !window.__YOSHI_WEB &&
<>
setApyInfo(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
About your APY
setApyInfo(false)} style={{ marginLeft: "auto", background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer", padding: 2 }}>
APY is an annual rate. Our current base rate as of today's date is 3.30% and is subject to change. Interest accrues daily and is paid out monthly. Payouts can vary month to month based on the APY account balance and the number of days in the month.
}
{/* FDIC disclosure · slide-up bottom sheet */}
{fdicOpen && !window.__YOSHI_WEB &&
<>
setFdicOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
{FDIC_DISCLOSURE}
setFdicOpen(false)} style={{ flex: "none", background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink-3)", cursor: "pointer", padding: 2 }}>
}
{/* nickname editor · bottom sheet */}
{editingNick &&
<>
setEditingNick(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
Edit nickname
Account nickname
setNick(e.target.value)} onKeyDown={(e) => {if (e.key === "Enter") setEditingNick(false);}}
style={{ width: "100%", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
setEditingNick(false)} style={{ width: "100%", marginTop: 14, padding: "12px", background: "var(--accent)", border: "none", borderRadius: 10, fontFamily: "var(--f-display)", fontSize: typeSize(14), fontWeight: 600, cursor: "pointer", color: "var(--accent-ink)" }}>Save
}
{/* debt accounts · loan terms as a clean label/value ledger */}
{acct.debt &&
{[["Outstanding", acct.debt.outstanding], ["Original loan amount", acct.debt.original], ["Term length", acct.debt.term], ["Expected payoff", acct.debt.payoff], ["Amount paid to date", acct.debt.paid], ["Next payment minimum", acct.debt.nextMin]].map(([label, val], i) =>
{label}
{val}
)}
}
{/* account numbers · slide-up bottom sheet */}
{shown &&
<>
setShown(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
Account details
{[["Routing number", acct.routing], ["Account number", acct.account]].map(([label, val]) =>
copy(label, val)} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 10, alignItems: "center", padding: "11px 0", borderBottom: "1px solid var(--rule)", cursor: "pointer" }}>
)}
setShown(false)} style={{ width: "100%", marginTop: 14, padding: "12px", background: "var(--bg-2)", border: "1px solid var(--rule-2)", borderRadius: 10, fontFamily: "var(--f-display)", fontSize: typeSize(14), fontWeight: 600, cursor: "pointer", color: "var(--ink)" }}>Done
}
{shownTx.length ? shownTx.map((t, i) =>
nav.sheet({ type: "txn", tx: toAccountTxnDetail(t, external) })} style={{ width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 11, alignItems: "center", padding: "11px 18px" }}>
{t.title}
{t.detail}{t.rail ? " · " + t.rail : ""}
= 0 ? "var(--accent-pos)" : "var(--ink)"} dim="var(--ink-3)" />
{t.when}
) :
No transactions match.
}
);
};
/* deterministic "last synced" label for a linked account — different accounts
pull at different times, so the time varies by account name but stays stable. */
const SYNC_TIMES = ["6 hours ago", "2 hours ago", "18 minutes ago", "yesterday", "4 hours ago", "1 hour ago", "11 hours ago", "40 minutes ago"];
const syncedAgo = (name) => { let h = 0; for (const c of String(name)) h = (h * 31 + c.charCodeAt(0)) >>> 0; return SYNC_TIMES[h % SYNC_TIMES.length]; };
const AccountDetail = ({ acct, nav }) => {
if (acct.cash) return
;
const YOSHI_INV = YOSHI_INVESTMENT_ACCOUNTS;
const isYoshiInv = YOSHI_INV.some((a) => a.name === acct.name) || acct.combined || acct.opened;
const external = !isYoshiInv && !acct.combined && acct.name !== ALL_HOLDINGS_ACCT.name; // linked / read-only brokerages
const startAcct = allHoldingsStartFor(acct);
const [curAcct, setCurAcct] = useState(startAcct);
const [menuOpen, setMenuOpen] = useState(false);
const [actionsOpen, setActionsOpen] = useState(false);
const [nick, setNick] = useState(accountDisplayName(acct));
const [editingNick, setEditingNick] = useState(false);
const [hidden, toggleHidden] = useHiddenAccts();
const isHidden = hidden.includes(acct.name);
useEffect(() => {setCurAcct(startAcct);setNick(accountDisplayName(acct));}, [acct]);
const SWITCH = (() => {
const base = ALL_HOLDINGS_SWITCH_ACCOUNTS;
return base.find((a) => a.name === curAcct.name) ? base : [curAcct, ...base];
})();
const holdings = curAcct.ids ? curAcct.ids.map((id) => HOLDINGS.find((h) => h.id === id)).filter(Boolean) : curAcct.holdings || [];
const total = curAcct.valueOverride != null ? curAcct.valueOverride : holdings.reduce((s, h) => s + h.value, 0);
const dayAbs = holdings.reduce((s, h) => s + h.dayAbs, 0);
const dayPct = total && total !== dayAbs ? dayAbs / (total - dayAbs) * 100 : 0;
const [tab, setTab] = useState("holdings");
const [valRange, setValRange] = useState("Today");
const [valRangeOpen, setValRangeOpen] = useState(false);
const rangeWord = (r) => r === "Today" ? "today" : `past ${r === "1W" ? "week" : r === "1M" ? "month" : "year"}`;
const rangeMenuLabel = (r) => r === "Today" ? "Today" : `Past ${r === "1W" ? "week" : r === "1M" ? "month" : "year"}`;
// account-level change for the selected period: "Today" uses the live day
// move; longer ranges aggregate each holding's period return into dollars.
const valChange = useMemo(() => {
if (valRange === "Today") return { abs: dayAbs, pct: dayPct };
let abs = 0;
for (const h of holdings) {
const p = (h.perf && h.perf[valRange]) || 0;
abs += h.value - h.value / (1 + p / 100);
}
const base = total - abs;
return { abs, pct: base ? abs / base * 100 : 0 };
}, [valRange, holdings, total, dayAbs, dayPct]);
const [hq, setHq] = useState("");const [hf, setHf] = useState("all");
const [tq, setTq] = useState("");const [tf, setTf] = useState("all");
const shownHoldings = holdings.filter((h) => {
if (hf === "gainers" && h.dch < 0) return false;
if (hf === "losers" && h.dch >= 0) return false;
if (hf === "stock" && h.kind !== "stock") return false;
if (hf === "etf" && h.kind !== "etf") return false;
if (hf === "crypto" && h.kind !== "crypto") return false;
if (hf === "recent" && !RECENT_ADDS.includes(h.id)) return false;
const s = hq.trim().toLowerCase();
return !s || h.ticker.toLowerCase().includes(s) || h.name.toLowerCase().includes(s);
});
const kinds = [...new Set(holdings.map((h) => h.kind))];
const hFilters = [["all", "All"], ["gainers", "Gainers"], ["losers", "Losers"],
...(kinds.includes("stock") ? [["stock", "Stocks"]] : []),
...(kinds.includes("etf") ? [["etf", "ETFs"]] : []),
...(kinds.includes("crypto") ? [["crypto", "Crypto"]] : []),
["recent", "Recently added"]];
const allTxns = useMemo(() => acctTxns(holdings), [curAcct]);
const shownTxns = allTxns.filter((t) => {
if (tf === "buys" && t.side !== "BUY") return false;
if (tf === "sells" && t.side !== "SELL") return false;
if (tf === "div" && t.side !== "DIV") return false;
const s = tq.trim().toLowerCase();
return !s || t.ticker.toLowerCase().includes(s);
});
return (
nav.pop()} sub={accountDisplaySub(curAcct)}
title={external ? nick :
setMenuOpen((o) => !o)} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "none", border: "none", padding: 0, cursor: "pointer", maxWidth: "100%" }}>
{accountDisplayName(curAcct)}
}
right={
{!curAcct.combined && setActionsOpen((o) => !o)} style={{ flex: "none", display: "grid", placeItems: "center", width: 30, height: 30, background: actionsOpen ? "var(--bg-2)" : "none", border: "1px solid " + (actionsOpen ? "var(--rule-2)" : "transparent"), borderRadius: 8, cursor: "pointer", color: "var(--ink-2)" }}> }
nav.tab("trade")} style={{ background: "var(--accent)", border: "none", borderRadius: 8, padding: "7px 13px", fontFamily: "var(--f-display)", fontSize: typeSize(12), fontWeight: 600, color: "var(--accent-ink)" }}>Trade
} />
{/* account options (kebab) · external = rename / hide; Yoshi = rename / documents */}
{actionsOpen && external &&
<>
setActionsOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
{ setEditingNick(true); setActionsOpen(false); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
Edit nickname
{ toggleHidden(acct.name); setActionsOpen(false); }} style={{ width: "100%", display: "flex", alignItems: "flex-start", gap: 10, padding: "12px 13px", background: "none", border: "none", borderTop: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
{isHidden ? "Show in totals & summary" : "Hide from totals & summary"}
{isHidden ? "Count this account again everywhere." : "Remains connected"}
}
{actionsOpen && !external &&
<>
setActionsOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
{ setEditingNick(true); setActionsOpen(false); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
Edit nickname
{ setActionsOpen(false); nav.sheet({ type: "documents", acct: { Brokerage: "brokerage", "Roth IRA": "roth", Crypto: "crypto" }[curAcct.name] }); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "12px 13px", background: "none", border: "none", borderTop: "1px solid var(--rule)", cursor: "pointer", textAlign: "left" }}>
Documents
}
{menuOpen && !external &&
<>
setMenuOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 30 }} />
{SWITCH.map((a, i) => {
const on = a.name === curAcct.name;
return (
{setCurAcct(a);setMenuOpen(false);setTab("holdings");}} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "11px 13px", background: on ? "var(--bg-2)" : "none", border: "none", borderTop: i ? "1px solid var(--rule)" : "none", cursor: "pointer", textAlign: "left" }}>
{accountDisplayName(a)}
{accountDisplaySub(a)}
{on && );
})}
}
{/* value header */}
Account value
Hidden from totals }
= 0 ? "var(--accent-pos)" : "var(--signal-neg)", letterSpacing: "-0.005em" }}>{perf(valChange.abs, valChange.pct)}
setValRangeOpen((o) => !o)} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "none", border: "none", padding: 0, cursor: "pointer" }}>
{rangeWord(valRange)}
{valRangeOpen &&
<>
setValRangeOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
{["Today", "1W", "1M", "1Y"].map((r, i) => {
const on = r === valRange;
return (
{ setValRange(r); setValRangeOpen(false); }} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 13px", background: on ? "var(--bg-2)" : "none", border: "none", borderTop: i ? "1px solid var(--rule)" : "none", cursor: "pointer", textAlign: "left" }}>
{rangeMenuLabel(r)}
{on && );
})}
}
{external &&
}
{/* nickname editor · bottom sheet */}
{editingNick &&
<>
setEditingNick(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 40, animation: "scrim-in 200ms ease both" }} />
Edit nickname
Account nickname
setNick(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") setEditingNick(false); }}
style={{ width: "100%", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: typeSize(15), fontWeight: 600, color: "var(--ink)" }} />
setEditingNick(false)} style={{ width: "100%", marginTop: 14, padding: "12px", background: "var(--accent)", border: "none", borderRadius: 10, fontFamily: "var(--f-display)", fontSize: typeSize(14), fontWeight: 600, cursor: "pointer", color: "var(--accent-ink)" }}>Save
}
{/* tab toggle */}
{tab === "holdings" ?
<>
:
<>
{shownTxns.length ? shownTxns.map((t, i) =>
) :
No transactions match.
}
}
);
};
Object.assign(window, { Accounts, AccountsExternalPanel, HoldingDetail, AccountDetail, SecurityDetailHierarchy, ACCOUNTS, ALL_HOLDINGS_ACCT });