{/* not a dead-end "success" — the confirmation IS the tracking card */}
:
{left}
{right}
{body}
);
}
/* Overlay mode: launched from a holding's Buy/Sell — a focused modal flow. */
return (
<>
{window.StatusBar &&
);
};
/* ---- search + explore ----------------------------------------------------- */
/* sector heat map · tiles tinted by move over the selected period, mono numbers */
const SECTOR_PERIODS = ["1D", "1W", "1M", "6M", "YTD", "1Y", "5Y", "ALL"];
const SECTORS = [
["Technology", "tech", { "1D": 1.84, "1W": 3.20, "1M": 6.10, "6M": 14.30, "YTD": 22.40, "1Y": 31.80, "5Y": 146.20, "ALL": 238.00 }],
["Financials", "fin", { "1D": 0.42, "1W": 1.10, "1M": 2.30, "6M": 5.80, "YTD": 9.80, "1Y": 13.40, "5Y": 54.00, "ALL": 91.00 }],
["Comms", "comm", { "1D": 1.12, "1W": 0.80, "1M": 4.40, "6M": 9.70, "YTD": 15.20, "1Y": 24.10, "5Y": 83.00, "ALL": 137.00 }],
["Energy", "ener", { "1D": -1.27, "1W": -2.40, "1M": 1.20, "6M": -1.80, "YTD": -3.60, "1Y": 4.70, "5Y": 44.00, "ALL": 68.00 }],
["Healthcare", "heal", { "1D": -0.38, "1W": 0.60, "1M": -1.80, "6M": 2.70, "YTD": 4.10, "1Y": 8.60, "5Y": 62.00, "ALL": 109.00 }],
["Consumer", "cons", { "1D": 0.61, "1W": -0.90, "1M": 2.10, "6M": 4.90, "YTD": 7.30, "1Y": 12.80, "5Y": 58.00, "ALL": 104.00 }],
["Industrials", "indu", { "1D": 0.24, "1W": 1.40, "1M": 3.00, "6M": 7.90, "YTD": 11.00, "1Y": 17.60, "5Y": 71.00, "ALL": 122.00 }],
["Materials", "mats", { "1D": -0.74, "1W": -1.20, "1M": -2.60, "6M": 0.80, "YTD": 1.90, "1Y": 6.20, "5Y": 38.00, "ALL": 63.00 }],
["Utilities", "util", { "1D": -0.19, "1W": 0.30, "1M": -0.90, "6M": 3.20, "YTD": 5.40, "1Y": 9.10, "5Y": 35.00, "ALL": 57.00 }]];
const SECTOR_AREAS = '"tech tech fin fin" "tech tech comm heal" "ener cons cons indu" "ener mats util util"';
/* Yoshi's shortlist per sector · used when a heat-map tile is tapped */
const SECTOR_PICKS = {
tech: ["NVDA", "MSFT", "AAPL"],
fin: ["JPM", "V", "BRK.B"],
comm: ["GOOGL", "META", "NFLX"],
heal: ["LLY", "UNH", "ABBV"],
ener: ["XOM", "CVX", "NEE"],
cons: ["AMZN", "COST", "WMT"],
indu: ["CAT", "GE", "UBER"],
mats: ["LIN", "FCX", "NEM"],
util: ["NEE", "DUK", "SO"]
};
const SectorHeatmap = ({ onSector }) => {
const [period, setPeriod] = useState("1D");
const [open, setOpen] = useState(false);
const maxAbs = Math.max(...SECTORS.map(([,, v]) => Math.abs(v[period]))) || 1;
const tint = (d) => {
const mag = Math.min(Math.abs(d) / maxAbs, 1);
const color = d >= 0 ? "var(--ld-gain)" : "var(--ld-loss)";
return `color-mix(in srgb, ${color} ${70 + mag * 30}%, var(--ld-surface))`;
};
return (
{open &&
{SECTOR_PERIODS.map((p) =>
)}
}
{SECTORS.map(([name, area, vals]) => {
const d = vals[period];
const tileName = name === "Healthcare" ? "Health care" : name;
return (
);
})}
{name}
{/* sector summary · same hierarchy as All holdings */}
= 0 ? "var(--accent-pos)" : "var(--signal-neg)" }}>{pct(periods[period])}
{rangeOpen && <>
setRangeOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
{SECTOR_PERIODS.map((p, i) => )}
}
Advancing today
{advancing} of {rows.length}
Declining today
{declining} of {rows.length}
{COLS.map(([label], i) => )}
{movers.map((r, ri) => {
// every mover opens its stock detail (same as picking a search result);
// tickers outside the tradeable catalog get a synthesized instrument.
const open = () => {
let inst = MARKET.find((m) => m.ticker === r.ticker);
if (!inst) {
inst = { id: "sx-" + r.ticker.toLowerCase().replace(/[^a-z0-9]/g, ""), ticker: r.ticker, name: r.nm, last: r.last, dch: r.dch, kind: "stock" };
if (!MARKET.find((m) => m.id === inst.id)) MARKET.push(inst);
}
onPick(inst.id);
};
return (
);
})}
Your holdings
{all.map((m, i) =>
);
};
const TradeSearch = ({ query, setQuery, onPick, onClose, nav, onSeeAll, embedded, onSector, web, hideMenu }) => {
const q = query.trim().toLowerCase();
const [focused, setFocused] = useState(false);
const results = q ? MARKET.filter((m) => m.ticker.toLowerCase().includes(q) || m.name.toLowerCase().includes(q)) : [];
const topHoldings = [...HOLDINGS].sort((a, b) => b.value - a.value).slice(0, 4).map((h) => MARKET.find((m) => m.id === h.id)).filter(Boolean);
// the user's actual Yoshi positions only, matching Home's holdings list
const allHoldings = [...GROUPS.investments.items, ...GROUPS.crypto.items].sort((a, b) => b.value - a.value).map((h) => {const m = MARKET.find((x) => x.id === h.id);return m ? { ...m, posValue: h.value } : null;}).filter(Boolean);
const moversSorted = [...MARKET].sort((a, b) => b.dch - a.dch);
const gainers = moversSorted.slice(0, 3);
const losers = moversSorted.slice(-3).reverse();
// interleave biggest gainers and biggest losers so strong negatives surface up front
const moversMixed = (() => {
const up = moversSorted.filter((m) => m.dch >= 0);
const down = moversSorted.filter((m) => m.dch < 0).sort((a, b) => a.dch - b.dch);
const out = [];const max = Math.max(up.length, down.length);
for (let i = 0; i < max; i++) {if (up[i]) out.push(up[i]);if (down[i]) out.push(down[i]);}
return out;
})();
const askYoshi = () => {onClose();nav && nav.ask("Got any trade ideas for me?", "A few, based on your accounts. You're leaning heavy on NVDA, so moving some of it into VOO would spread out your risk. You've got $15,000.00 sitting idle in Savings that could earn about 5.10% in short-term Treasuries, and SOL has run up a lot if you want to take a little off the table. Want me to put any of these together for you to approve?");};
return (
<>
{web && Trade
} {!web &&
{!hideMenu &&
}
{/* free-form search */}
{allHoldings.map((m, i) =>
)}
{q ?
results.length ? results.map((m) => Market movers
onSector(area, name)} />
{/* explore · AI news brief across the whole market, cited */}
Market news brief
);
};
/* the impactful "chat with Yoshi" entry point */
const YoshiPrompt = ({ onClick, sub }) => {
const logo = window.__resources && window.__resources[useTheme() === "bone" ? "logoWhite" : "logoBlack"] || "assets/logo-mark-white.png";
return (
);
};
/* tiny axis-less sparkline · seeded walk, color by direction */
const RowSpark = ({ seed, up, w = 54, h = 22 }) => {
const n = 18;
let s = (Number(seed) || 1) % 233280,v = 50,min = Infinity,max = -Infinity;
const pts = [];
for (let i = 0; i < n; i++) {
s = (s * 9301 + 49297) % 233280;
v += (s / 233280 - 0.5) * 13 + (up ? 1.2 : -1.2);
pts.push(v);
if (v < min) min = v;
if (v > max) max = v;
}
const span = max - min || 1;
const d = pts.map((p, i) => `${i ? "L" : "M"}${(i / (n - 1) * w).toFixed(1)} ${(h - (p - min) / span * h).toFixed(1)}`).join(" ");
return (
);
};
const InstrumentRow = ({ m, onPick, last }) =>
;
/* ---- instrument detail · the "explore" view ------------------------------- */
const TD_RANGES = ["1D", "1W", "1M", "6M", "YTD", "1Y", "5Y", "ALL"];
const yrReturn = (m) => typeof securityYearReturn === "function" ? securityYearReturn(m) : (() => {const h = HOLDINGS.find((x) => x.id === m.id);return h ? h.perf["1Y"] : m.kind === "crypto" ? 72 : m.kind === "etf" ? 17 : 31;})();
const tdSeries = (m, range) => {
const seed = (m.ticker.charCodeAt(0) + (m.ticker.charCodeAt(1) || 0)) * 7;
const yr = yrReturn(m);
const cfg = {
"1D": [30, m.dch, 0.0012],
"1W": [28, m.dch * 1.5, 0.0045],
"1M": [32, m.dch * 4.5, 0.007],
"6M": [40, yr * 0.55, 0.011],
"YTD": [44, yr * 0.7, 0.012],
"1Y": [54, yr, 0.014],
"5Y": [60, (Math.pow(1 + yr / 100, 5) - 1) * 100, 0.02],
"ALL": [64, (Math.pow(1 + yr / 100, 7) - 1) * 100, 0.022]
}[range];
const [len, movePct, vol] = cfg;
const start = m.last / (1 + movePct / 100);
return { data: series(seed + len, len, start, m.last, vol), movePct };
};
const tdStats = (m) => {
if (typeof securityFundamentals === "function") return securityFundamentals(m);
const cap = m.last * (m.kind === "crypto" ? 19e6 : 2.4e9);
return [["Asset class", m.kind === "crypto" ? "Crypto" : m.kind === "etf" ? "ETF" : "Equity"], ["Market cap", "$" + (cap / 1e9).toFixed(2) + "B"], ["Day range", `${usd(m.last * 0.99)} – ${usd(m.last * 1.01)}`], ["1Y return", pct(yrReturn(m))]];
};
const tdNews = (m) => {
const h = HOLDINGS.find((x) => x.id === m.id);
if (h && h.news) return h.news;
return [[m.kind === "crypto" ? "CoinDesk" : "Bloomberg", `${m.name} in focus as volume picks up`, "1h"], ["Reuters", `Analysts revisit ${m.ticker} after the move`, "4h"]];
};
const TradeDetail = ({ sel, onBack, onClose, onTrade, nav, showClose = true, showTradeFooter = true }) => {
return (
<>
No matches for "{query}".
{moversMixed.map((m) => {
const up = m.dch >= 0;
return (
);
})}
{/* explore · the user's largest positions — the chevron swaps the
middle column to the same full all-holdings list Home opens
in place; the order ticket stays on the right */}
{allHoldings.slice(0, 3).map((m, i) => (
holding.id === m.id)?.shares }} onPick={onPick} first={i === 0} />
))}
{/* explore · sector heat map */}
{sel.ticker}
{sel.name}
{label}
{value}
{label}
{detail}
{closed && One-time automation
}
Last
{usd(sel.last)}
{positive ? "+" : "−"}{usd(Math.abs(dayAbs))} ({positive ? "+" : "−"}{Math.abs(sel.dch).toFixed(2)}%) today
{quote.lastMarket &&
{quote.lastSize} shares · {quote.lastMarket}
}
Bid{quote.bidMarket && <> · {quote.bidMarket}}
${quote.bid.toFixed(quote.decimals)} ×{quote.bidSize}
Ask{quote.askMarket && <> · {quote.askMarket}}
${quote.ask.toFixed(quote.decimals)} ×{quote.askSize}
Day Volume {quote.volume}
As of {quote.asOfDate}, {quote.snapshotTime} ET
Trade
}
{/* account · dropdown to pick which Yoshi account you trade into/from */}
Account
Symbol
{sel ? (
) : (
Action
{setUnit(u);setAmt("");}} />
}
{/* amount */}
Amount ({availLabel})
{ if (!e.currentTarget.contains(e.relatedTarget)) setAcctOpen(false); }} onKeyDown={(e) => { if (e.key === "Escape") { e.stopPropagation(); setAcctOpen(false); e.currentTarget.querySelector("button").focus(); } }}>
{acctOpen &&
{/* symbol */}
{accts.map((a, i) =>
)}
}
Pick a symbol on the left — search, movers, or your holdings
}
{symResults.map((m, i) =>
)}
}
openPad("amt")} style={{ ...fieldStyle(focus === "amt" && padOpen), marginTop: 7 }}>
{!isShares && $}
{amt ? commaAmt(amt) : "Enter amount"}
{sel && isShares && amt && {sel.kind === "crypto" ? sel.ticker : "sh"}}
{amt && }
{[["25%", 0.25], ["50%", 0.5], ["75%", 0.75], ["Max", 1]].map(([lbl, f]) =>
)}
{sel && insufficient &&
Insufficient funds — you can trade up to {usd(avail)}.
}
{marketClosed ? "Markets closed — this order executes tomorrow at market open." : "Executes as a market order."}
setPadOpen(false)} style={{ position: "absolute", inset: 0, zIndex: 40 }} />
);
const ConnectTile = ({ icon, iconSrc, iconFilter, name, desc, primary, onClick, children }) => {
const web = !!window.__YOSHI_WEB;
return (
{copied ? Copied : {m.cta} }
: {m.cta} ;
return {body} ;
};
const ConnectedStatus = ({ label = "Connected", mono = false }) => (
{label}
);
const AppTile = ({ app, onAuthorize, onEdit }) => {
const [copied, copy] = useCopy();
const [soon, setSoon] = useState(false);
const authorize = () => onAuthorize && onAuthorize(app.id);
const openAuthorizedApp = () => {
authorize();
if (app.url) window.open(app.url, "_blank", "noopener,noreferrer");
};
const copySetup = () => copy(app.copy);
const markSoon = () => { setSoon(true); setTimeout(() => setSoon(false), 1600); };
const tileAction = app.connected
? () => onEdit && onEdit(app.id)
: app.kind === "connected"
? authorize
: app.kind === "authorize"
? openAuthorizedApp
: app.kind === "copy"
? copySetup
: markSoon;
let action;
if (app.connected)
action = onEdit && onEdit(app.id)}>Revoke ;
else if (app.kind === "connected")
action = Authorize ;
else if (app.kind === "authorize")
action = Authorize ;
else if (app.kind === "copy")
action = {copied ? Copied : Copy } ;
else
action = {soon ? "Coming soon" : "Authorize"} ;
return {action} ;
};
const SubHead = ({ title, onBack }) => (
Cancel
);
/* the example live connection — created from a Copy setup and named by the
user during the MCP handshake. */
const AGENT_CONNECTIONS_LIVE = [
{ id: "c1", name: "portfolio-copilot", sub: "Yoshi MCP · named at setup · connected May 28", live: true },
];
const ConnectionMiniButton = ({ children, onClick, tone = "default" }) => {children} ;
/* a live connection renders as a tile alongside the others — the user named
it during the MCP handshake after tapping Copy setup */
const ConnectionTile = ({ c, onEdit }) => (
onEdit && onEdit(c.id)}>
onEdit && onEdit(c.id)}>Edit
);
const ConnectionRenameView = ({ conn, onBack, onSave }) => {
const [draft, setDraft] = useState(conn.name);
const nextName = draft.trim();
const save = () => { if (!nextName) return; onSave(conn.id, nextName); };
return (
<>
);
};
const RevokeConnectionConfirmSheet = ({ subject, onBack, onApprove }) => (
<>
);
const ConnectionRevokeView = ({ conn, onBack, onConfirm }) => {
const [gate, setGate] = useState(false);
return (
<>
setGate(true)} />
{gate && { setGate(false); onConfirm(conn.id); }} onCancel={() => setGate(false)} />}
);
};
const AgentConnectionsSection = () => (
<>
Agent connections
A connection lands here after the agent completes the handshake from a copied setup. You name it during setup.
);
/* The agents controls, extracted so they can live either as a standalone
sheet (ConnectAgentsSheet) or inline inside the hamburger menu (ProfileSheet).
The manage/authorize/revoke sub-sheets overlay at zIndex 320+, so they sit
above both the standalone sheet and the menu. */
const AgentsPanel = ({ intro = true }) => {
const [view, setView] = useState(null);
const [apps, setApps] = useState(() => AGENT_APPS.map((app) => ({ ...app, connected: app.kind === "connected" })));
const [managedAppId, setManagedAppId] = useState(null);
const [revokingAppId, setRevokingAppId] = useState(null);
const [connections, setConnections] = useState(AGENT_CONNECTIONS_LIVE);
const [managedConnection, setManagedConnection] = useState(null);
const appTarget = managedAppId && apps.find((app) => app.id === managedAppId);
const revokingApp = revokingAppId && apps.find((app) => app.id === revokingAppId);
const connectionTarget = managedConnection && connections.find((c) => c.id === managedConnection.id);
const authorizeApp = (id) => {
setApps((as) => as.map((app) => app.id === id ? { ...app, connected: true } : app));
};
const revokeApp = (id) => {
setApps((as) => as.map((app) => app.id === id ? { ...app, connected: false } : app));
setManagedAppId(null);
setRevokingAppId(null);
};
const renameConnection = (id, name) => {
setConnections((cs) => cs.map((c) => c.id === id ? { ...c, name } : c));
setManagedConnection(null);
};
const revokeConnection = (id) => {
setConnections((cs) => cs.filter((x) => x.id !== id));
setManagedConnection(null);
};
return (
<>
{intro &&
setManagedAppId(null)} onRevoke={() => { setManagedAppId(null); setRevokingAppId(appTarget.id); }} />}
{revokingAppId && revokingApp && setRevokingAppId(null)} onApprove={() => revokeApp(revokingApp.id)} />}
{managedConnection?.type === "actions" && connectionTarget && setManagedConnection(null)} onRename={() => setManagedConnection({ type: "rename", id: connectionTarget.id })} onRevoke={() => setManagedConnection({ type: "revoke", id: connectionTarget.id })} />}
{managedConnection?.type === "rename" && connectionTarget && setManagedConnection(null)} onSave={renameConnection} />}
{managedConnection?.type === "revoke" && connectionTarget && setManagedConnection(null)} onConfirm={revokeConnection} />}
);
};
const ConnectAgentsSheet = ({ onClose }) => (
{focus === "stop" ? "Stop price" : "Amount"}
{label}
{hint && · {hint}}
{value}
;
/* ============================================================
Link external account sheet
============================================================ */
const LinkSheet = ({ onClose }) =>
<>
Link an account
Pick an institution to link with Plaid.
{[["Chase", "C"], ["BofA", "B"], ["Schwab", "S"], ["Fidelity", "F"], ["Wells", "W"], ["Coinbase", "₿"]].map(([n, g]) =>
)}
{children}
;
/* ============================================================
Agents · MCP + supported apps
============================================================ */
const useCopy = () => {
const [copied, setCopied] = useState(false);
const copy = (val) => { try { navigator.clipboard && navigator.clipboard.writeText(val); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1600); };
return [copied, copy];
};
const YOSHI_METHODS = [
{ id: "mcp", name: "Yoshi MCP", icon: "connect", desc: "agents.yoshi.invalid/mcp", action: "copy", copy: MCP_CONFIG, cta: "Copy URL" },
];
const AGENT_APP_ICONS = {
chatgpt: "assets/agent-chatgpt.svg",
claude: "assets/agent-claude.svg",
perplexity: "assets/agent-perplexity.svg",
};
const AGENT_APP_ICON_FILTER = "brightness(0) invert(1)";
const AGENT_APPS = [
{ id: "chatgpt", name: "ChatGPT", icon: "message", iconSrc: AGENT_APP_ICONS.chatgpt, iconFilter: AGENT_APP_ICON_FILTER, kind: "authorize", url: CHATGPT_APP_URL },
{ id: "claude", name: "Claude", icon: "robot", iconSrc: AGENT_APP_ICONS.claude, iconFilter: AGENT_APP_ICON_FILTER, kind: "connected" },
{ id: "perplexity", name: "Perplexity", icon: "search", iconSrc: AGENT_APP_ICONS.perplexity, iconFilter: AGENT_APP_ICON_FILTER, kind: "soon" },
{ id: "cursor", name: "Cursor", icon: "terminal", kind: "soon" },
];
const TILE_ACTION_HEIGHT = window.__YOSHI_WEB ? 38 : 28;
const CopyButtonLabel = ({ copied = false, size = 12 }) =>
{children}
);
const AppIcon = ({ src, alt = "", size, filter }) => (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } } : undefined} className={onClick ? "press" : undefined} style={{ position: "relative", display: "flex", flexDirection: "column", gap: web ? 10 : 6, padding: web ? 16 : 9, aspectRatio: "1 / 1", borderRadius: 14, overflow: "hidden", cursor: onClick ? "pointer" : "default", background: primary ? "color-mix(in srgb, var(--accent-pos) 9%, var(--bg-card))" : "var(--bg-card)", border: "1px solid " + (primary ? "color-mix(in srgb, var(--accent-pos) 45%, var(--rule-2))" : "var(--rule-2)") }}>
{primary && }
{iconSrc ? {children}
);
};
const MethodTile = ({ m, onOpen }) => {
const [copied, copy] = useCopy();
const activate = () => {
if (m.action === "copy") copy(m.copy);
else onOpen(m.action);
};
const body = m.action === "copy"
? {name}
{title}
);
const SheetActionRow = ({ icon, label, tone = "default", onClick }) => {
const danger = tone === "danger";
return (
);
};
const EditActionsSheet = ({ subject, icon, iconSrc, iconFilter, statusLabel, statusMono, showRename = false, onClose, onRename, onRevoke }) => (
{iconSrc ?
{subject}
{showRename &&
Edit nickname
Agent nickname
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") save(); }}
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: 500, color: "var(--ink)" }} />
Revoke connection?
Are you sure you want to revoke the connection to {subject}?
{AGENT_CONNECTIONS_LIVE.map((c, i) => (
LIVE
))}
{c.name}
{c.sub}
Connect Yoshi over MCP, or authorize a supported app.
}
{YOSHI_METHODS.map((m) => setManagedAppId(id)} />)}
{connections.map((c) => setManagedConnection({ type: "actions", id })} />)}
{window.StatusBar &&
);
Object.assign(window, { ConnectAgentsSheet, AgentsPanel });
Agents
{!window.__YOSHI_WEB && }