);
};
/* ============================================================
Trade sheet · search → explore → order entry → success
============================================================ */
const TradeSheet = ({ onClose, id, side: presetSide, nav, embedded }) => {
// resolve the launch id against the market catalog; an unknown id (e.g. a
// paper / linked holding's own id) drops to search instead of a blank sheet
const launchSel = id && MARKET.find((x) => x.id === id) ? id : null;
const [phase, setPhase] = useState(launchSel ? "entry" : "search");
const [query, setQuery] = useState("");
const [selId, setSelId] = useState(launchSel);
const [side, setSide] = useState(presetSide || "BUY");
const [amt, setAmt] = useState("");
const [unit, setUnit] = useState("usd"); // SELL can switch to "shares"; BUY is always usd
const [stopOn, setStopOn] = useState(false); // SELL only — stop (limit) order
const [stop, setStop] = useState("");
const [focus, setFocus] = useState("amt"); // which field the keypad edits: amt | stop
const [sector, setSector] = useState(null);
const sel = MARKET.find((x) => x.id === selId);
const amtNum = parseFloat(amt || "0");
const isShares = side === "SELL" && unit === "shares";
const shares = sel ? isShares ? amtNum : amtNum / sel.last : 0;
const key = (k) => {
const maxDp = focus === "amt" && isShares ? 4 : 2;
const upd = (prev) => k === "⌫" ? prev.slice(0, -1) : prev.includes(".") && prev.split(".")[1]?.length >= maxDp ? prev : prev + k;
(focus === "stop" ? setStop : setAmt)(upd);
};
const chooseSide = (s) => {setSide(s);if (s === "BUY") {setUnit("usd");setStopOn(false);}setFocus("amt");};
const explore = (mid) => {setSelId(mid);setPhase("detail");};
const startOrder = (s) => {setAmt("");setStop("");setStopOn(false);setUnit("usd");setFocus("amt");if (s) setSide(s);setPhase("entry");};
const body =
<>
{phase === "search" && setPhase("holdings")} onSector={(area, name) => {setSector({ area, name });setPhase("sector");}} />}
{phase === "sector" && sector &&
setPhase("search")} onClose={onClose} onPick={explore} nav={nav} />
}
{phase === "holdings" && setPhase("search")} onClose={onClose} />}
{phase === "detail" && sel &&
setPhase("search")} onClose={onClose} onTrade={startOrder} nav={nav} />
}
{phase === "entry" && sel &&
setPhase(id ? "search" : "detail")} onClose={onClose} onReview={() => setPhase("success")} nav={nav} />
}
{phase === "success" && sel &&
}
;
/* Web: Trade is a two-pane page — browse on the left, the order ticket on the
right. Picking a symbol on the left opens its ticket on the right.
(Falls back to the single-column flow on narrow windows.) */
if (window.__YOSHI_WEB && !embedded && window.innerWidth >= 1100) {
const pickWeb = (mid) => { setSelId(mid); setPhase("detail"); };
const left =
phase === "sector" && sector
? setPhase("search")} onClose={onClose} onPick={pickWeb} nav={nav} />
: phase === "holdings"
? setPhase("search")} onClose={onClose} />
: setPhase("holdings")} onSector={(area, name) => { setSector({ area, name }); setPhase("sector"); }} />;
const right =
sel && phase === "success"
?
);
}
/* Embedded mode: Trade is a first-class tab. Render inside the viewport
so the persistent tab bar (a sibling) stays visible & tappable, exactly
like Home / Accounts. No own StatusBar — the app's already shows above. */
if (embedded) {
return (
{body}
);
}
/* Overlay mode: launched from a holding's Buy/Sell — a focused modal flow. */
return (
<>
{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 (
);
})}
);
};
/* full-screen list of all holdings — reached via "See all" */
const TradeHoldings = ({ onPick, onBack, onClose }) => {
const all = [...HOLDINGS].sort((a, b) => b.value - a.value).map((h) => MARKET.find((m) => m.id === h.id)).filter(Boolean);
return (
<>
Your holdings
{all.map((m, i) => )}
);
};
const TradeSearch = ({ query, setQuery, onPick, onClose, nav, onSeeAll, embedded, onSector, web }) => {
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);
const allHoldings = [...HOLDINGS].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 $15k sitting idle in Savings that could earn about 5.1% 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 &&
Executes as a market order. Verified with Passkey
Yoshi is a fintech company, not an FDIC-insured depository institution. Deposits in Yoshi Cash are FDIC-insured through Column N.A., Member FDIC. FDIC deposit insurance covers the failure of an insured depository institution. Certain conditions must be satisfied for pass-through FDIC insurance to apply.
{gate && { setGate(false); onReview(); }} onCancel={() => setGate(false)} />}
{/* keypad sheet — opens on a field tap */}
{padOpen &&
<>
;
Object.assign(window, { TradeSheet, LinkSheet });
/* ============================================================
Connect an external agent · MCP / CLI / API
The portability promise made tangible: scoped, propose-only
access an outside agent can wire up in one of three ways.
============================================================ */
/* The three ways an outside agent wires up to Yoshi. The config a connection
shows is built from its own name + key, so the credential travels with it. */
const METHOD_OPTIONS = [{ value: "MCP", label: "MCP" }, { value: "SDK", label: "SDK" }, { value: "API", label: "API" }];
const METHOD_HINT = {
MCP: "Paste Yoshi into your agent's MCP config, then authorize it inside the agent. The connection shows up in Active connections once you approve.",
SDK: "Call Yoshi from your own code. SDKs authenticate with an API key, so there's nothing to register here.",
API: "Call the REST API directly. Name the connection and mint its scoped key.",
};
// MCP config is identical for everyone — a server URL, authorized inside the
// agent over OAuth. No token to paste, no name to choose: the agent reports its
// own name back over the protocol.
const MCP_CONFIG = `{
"mcpServers": {
"yoshi": {
"url": "https://prototype-agents.yoshi.invalid/mcp"
}
}
}`;
// The Yoshi SDK across languages — each authenticates with a scoped API key.
// The Yoshi SDK + CLI, installed with your package manager. Each authenticates
// with a scoped API key.
const SDK_MANAGERS = [
{ id: "pip", label: "pip", cmd: "pip install yoshi" },
{ id: "npm", label: "npm", cmd: "npm install @yoshi-ai/sdk" },
{ id: "brew", label: "Homebrew", cmd: "brew install yoshi-ai-dev/yoshi-cli/yoshi" },
{ id: "go", label: "Go", cmd: "go install github.com/yoshi-ai-dev/yoshi-cli/cmd/yoshi@latest" },
];
const OPENCLAW_SETUP = "mcporter auth https://prototype-agents.yoshi.invalid/mcp/";
const BUILD_SETUP = "npx create-yoshi-agent@latest";
const CHATGPT_APP_URL = "https://chatgpt.example.invalid/yoshi";
// Legacy multi-language snippets (unused).
const SDK_LANGS = [
{ value: "python", label: "Python" },
{ value: "cli", label: "CLI" },
{ value: "npm", label: "npm" },
{ value: "go", label: "Go" },
];
const SDK_CODE = {
python: `$ pip install yoshi
from yoshi import Yoshi
client = Yoshi(api_key="")
client.propose.trade(symbol="VTI", usd=500)`,
cli: `$ npm i -g @yoshi/cli
$ export YOSHI_API_KEY=
$ yoshi propose trade --symbol VTI --usd 500`,
npm: `$ npm i @yoshi/sdk
import { Yoshi } from "@yoshi/sdk";
const yoshi = new Yoshi({ apiKey: "" });
await yoshi.propose.trade({ symbol: "VTI", usd: 500 });`,
go: `$ go get github.com/yoshi/yoshi-go
client := yoshi.New("")
client.Propose.Trade(yoshi.Trade{Symbol: "VTI", USD: 500})`,
};
// A copy-paste API quickstart — the docs snippet that used to live here.
const API_DOCS = `$ curl https://api.prototype.yoshi.invalid/v1/propose/trade \\
-H "Authorization: Bearer " \\
-d symbol=VTI -d usd=500`;
const API_DOCS_URL = "https://docs.prototype.yoshi.invalid/api";
const CodeBlock = ({ code }) => {
const [copied, setCopied] = useState(false);
const copy = () => { try { navigator.clipboard && navigator.clipboard.writeText(code); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1600); };
return (
{code}
);
};
/* small muted explainer line used across the setup panels */
const SetupNote = ({ children }) =>
{children}
;
/* A direct shortcut into the ChatGPT Yoshi app — gets MCP users closest to done. */
const ChatGptShortcut = () =>
;
/* MCP setup · copy the config, authorize inside the agent. No name, no commit —
the connection lands in Active connections once the user approves. */
const McpSetup = ({ shortcut }) =>
<>
;
/* SDK setup · pick a language, copy the snippet. SDKs authenticate with an API
key, so there's no registration step. */
const SdkSetup = () => {
const [lang, setLang] = useState("python");
return (
<>
SDKs authenticate with a scoped API key. Create one under the API tab, then drop it in.
);
};
/* The API quickstart docs, with a copy action and a link to the full reference. */
const ApiDocs = () =>
<>
API reference
View full API reference
;
const AGENT_PROVIDERS = [
{ id: "chatgpt", name: "ChatGPT", icon: "message" },
{ id: "claude", name: "Claude", icon: "robot" },
{ id: "perplexity", name: "Perplexity", icon: "search" },
{ id: "cursor", name: "Cursor", icon: "terminal" },
{ id: "openclaw", name: "OpenClaw", icon: "bolt" },
{ id: "hermes", name: "Hermes Agent", icon: "send" }];
const PROVIDER_IDS = AGENT_PROVIDERS.map((p) => p.id);
const PROVIDER_ICON = Object.fromEntries(AGENT_PROVIDERS.map((p) => [p.id, p.icon]));
const ICON_FOR_VIA = { MCP: "connect", SDK: "terminal", API: "key" };
const iconForConn = (c) => c.icon || PROVIDER_ICON[c.id] || ICON_FOR_VIA[c.via] || "connect";
// A connection is one authorized link to Yoshi. MCP connections are named by
// the service that reports in over the protocol (ChatGPT, OpenClaw, …); API
// connections are named by you when you mint the key. Some are authorized
// entirely outside the app and simply appear here once they land.
const AGENT_CONNECTIONS_SEED = [
{ id: "chatgpt", name: "ChatGPT", via: "MCP", scope: "Propose-only", last: "Active now", status: "active" },
{ id: "claude", name: "Claude", via: "MCP", scope: "Propose-only", last: "Active now", status: "active" },
{ id: "openclaw", name: "OpenClaw", via: "MCP", scope: "Propose-only", last: "Connected May 30", status: "active" },
{ id: "k_ray", name: "Raycast agent", via: "API", scope: "Propose-only", last: "Used 2h ago", status: "active", custom: true, token: "ys_demo_7f3a9c2b6d14e8f0a7c92" },
{ id: "k_scripts", name: "Personal scripts", via: "API", scope: "Read-only", last: "Used May 28", status: "active", custom: true, token: "ys_demo_2b8e44170c9ad3f6b8e41d" }];
const maskKey = (t) => {
const i = t.indexOf("_demo_");
const prefix = i >= 0 ? t.slice(0, i + 6) : t.slice(0, 8);
return prefix + "••••••••" + t.slice(-4);
};
const genToken = () => {
const hex = "0123456789abcdef";
let s = "ys_demo_";
for (let i = 0; i < 28; i++) s += hex[Math.floor(Math.random() * 16)];
return s;
};
/* API key UI for one connection: mint the key, reveal it once, then it stays
masked. The key belongs to the connection, not a separate registry. */
const ApiKeyArea = ({ token, fresh, onCreate, onRegenerate, ctaLabel }) => {
const [copied, setCopied] = useState(false);
const copy = (val) => { try { navigator.clipboard && navigator.clipboard.writeText(val); } catch (_) {} setCopied(true); setTimeout(() => setCopied(false), 1600); };
// a key was just minted this session — revealed in full, exactly once
if (fresh)
return (
Key created. Copy it now; you won't see it in full again.
{fresh}
);
// an existing key, kept masked for safety
if (token)
return (
{maskKey(token)}
Hidden for safety. Regenerate to issue a new key; the old one stops working.
);
// no key yet
return (
This connection authenticates with a scoped API key.
{ctaLabel || "Create key"}
);
};
/* Add a connection · choose how the agent talks to Yoshi. MCP and SDK are
copy-only (they authorize elsewhere and land in Active connections later);
API is the one type you actually create here, minting a named, scoped key. */
const AddConnectionView = ({ onCancel, onCreateApi }) => {
const [via, setVia] = useState("MCP");
const [name, setName] = useState("");
const [token, setToken] = useState(null);
const [fresh, setFresh] = useState(null);
const named = name.trim().length > 0;
const createKey = () => {
if (!named || token) return;
const t = genToken();
setToken(t); setFresh(t);
onCreateApi({ name: name.trim(), token: t });
};
return (
);
};
const ConnectAgentsSheetOld = ({ onClose, nav }) => {
const [conns, setConns] = useState(AGENT_CONNECTIONS_SEED);
const [view, setView] = useState(null); // null | "add" | { detail: id }
const connById = (id) => conns.find((c) => c.id === id);
// API is the only type created in-app: minting its key registers it. MCP and
// SDK connections aren't added here at all — they arrive once authorized.
const addApi = ({ name, token }) => {
const id = "c_" + Date.now();
setConns((cs) => [...cs, { id, name, via: "API", scope: "Propose-only", last: "Active now", status: "active", custom: true, token }]);
};
const renameConn = (id, name) => setConns((cs) => cs.map((c) => c.id === id ? { ...c, name } : c));
const setToken = (id, token) => setConns((cs) => cs.map((c) => c.id === id ? { ...c, token } : c));
const revokeConn = (id) => { setConns((cs) => cs.filter((c) => c.id !== id)); setView(null); };
const detailConn = view && view.detail ? connById(view.detail) : null;
const ConnTile = ({ c }) => (
);
return (
<>
{window.StatusBar && }
Agents
Connect Yoshi to your agents over MCP, an SDK, or an API key. Authorize Yoshi inside the agent and the connection turns up here, named by the service itself.
{/* Active connections — service-named MCP links + your own API keys, including
anything authorized entirely outside the app. */}
Active connections{conns.length}
{conns.map((c) => )}
{/* add tile */}
{/* scoped-access note */}
Propose-only access. An agent never holds or moves your money on its own. Revoke any connection anytime.
Mint a scoped, propose-only key for your own scripts and SDK calls. You'll see it in full once; store it somewhere safe.
Propose-only access. An agent never holds or moves your money on its own. Revoke anytime.
);
};
/* 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 },
];
/* 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 }) => (
LIVE
);
const AgentConnectionsSection = () => (
<>
Agent connections
{AGENT_CONNECTIONS_LIVE.map((c, i) => (
{c.name}
{c.sub}
LIVE
))}
A connection lands here after the agent completes the handshake from a copied setup. You name it during setup.
);
/* API keys — a flat registry at the bottom of the page. Generate, name, copy
once, then rename or revoke any time. */
const API_KEYS_SEED = [
{ id: "k1", name: "Local scripts", token: "ys_demo_8c2e96b1d4f07a35ce12", created: "May 12" },
];
const maskToken = (t) => "ys_demo_••••••••" + String(t).slice(-4);
const ApiKeysSection = () => {
const [keys, setKeys] = useState(API_KEYS_SEED);
const [creating, setCreating] = useState(false);
const [newName, setNewName] = useState("");
const [freshId, setFreshId] = useState(null);
const [renamingId, setRenamingId] = useState(null);
const [renameVal, setRenameVal] = useState("");
const [copiedId, setCopiedId] = useState(null);
const copy = (id, val) => { try { navigator.clipboard && navigator.clipboard.writeText(val); } catch (_) {} setCopiedId(id); setTimeout(() => setCopiedId(null), 1600); };
const create = () => {
const nm = newName.trim(); if (!nm) return;
const id = "k" + Date.now();
setKeys((ks) => [...ks, { id, name: nm, token: genToken(), created: "Just now" }]);
setFreshId(id); setCreating(false); setNewName("");
};
const saveRename = () => {
const nm = renameVal.trim();
if (nm) setKeys((ks) => ks.map((k) => k.id === renamingId ? { ...k, name: nm } : k));
setRenamingId(null);
};
const txtBtn = { background: "none", border: "none", padding: 0, cursor: "pointer", fontFamily: "var(--f-display)", fontSize: 11, fontWeight: 600, color: "var(--ink-3)" };
return (
<>
Copy it now. For your security, you won't see the full key again.
) : (
{maskToken(k.token)} · Created {k.created}
)}
))}
Keys are scoped and propose-only. An agent calling with your key can draft moves; only you can approve them.
);
};
const ConnectAgentsSheet = ({ onClose, nav }) => {
const [view, setView] = useState(null);
return (
<>