, document.body ); const CenterDialog = ({ label, onClose, width = 390, children }) => (

); const EditActionsMenu = ({ anchor, subject, icon, iconSrc, iconFilter, showRename = false, onClose, onRename, onRevoke }) => ( {showRename && } ); const InstallRow = ({ m }) => { const [copied, copy] = useCopy(); return (

{m.label}

$ {m.cmd}

); }; const SdkDialog = ({ onClose }) => (

Yoshi SDKs

Install commands

Install the Yoshi SDK and CLI with your package manager. Each authenticates with a scoped API key.

{SDK_MANAGERS.map((m) => )} Create a scoped key under Yoshi API key, then drop it into your environment as YOSHI_API_KEY.

); const ApiKeyView = ({ onBack }) => { const [token, setToken] = useState(null); const [fresh, setFresh] = useState(null); const mint = () => { const t = genToken(); setToken(t); setFresh(t); }; return (

{window.StatusBar && }

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 }, ]; 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, event)}> onEdit && onEdit(c.id, event)}>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 (

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: 15, fontWeight: 600, color: "var(--ink)" }} />

); }; const RevokeConnectionConfirmDialog = ({ subject, onBack, onApprove }) => (

Revoke connection?

Are you sure you want to revoke the connection to {subject}?

); 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

{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 ApiKeyActionsMenu = ({ apiKey, anchor, onClose, onRename, onRevoke }) => ( ); const ApiKeyRenameDialog = ({ draft, onDraft, onBack, onSave }) => (

Edit nickname

API key nickname

onDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") onSave(); }} style={{ width: "100%", padding: "12px 13px", background: "var(--bg-2)", border: "1px solid var(--accent)", borderRadius: 10, outline: "none", fontFamily: "var(--f-display)", fontSize: 15, fontWeight: 600, color: "var(--ink)" }} />

); const ApiKeyRevokeDialog = ({ apiKey, onBack, onApprove }) => (

Revoke API key?

Are you sure you want to revoke this API key?

{apiKey.name} loses access immediately.

); 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 [managedKeyId, setManagedKeyId] = useState(null); const [managedKeyAnchor, setManagedKeyAnchor] = useState(null); const [revokingKeyId, setRevokingKeyId] = useState(null); const [copiedId, setCopiedId] = useState(null); const keyTarget = managedKeyId && keys.find((k) => k.id === managedKeyId); const renamingKey = renamingId && keys.find((k) => k.id === renamingId); const revokingKey = revokingKeyId && keys.find((k) => k.id === revokingKeyId); 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); setRenameVal(""); }; const revokeKey = (id) => { setKeys((ks) => ks.filter((x) => x.id !== id)); setRevokingKeyId(null); setManagedKeyId(null); setManagedKeyAnchor(null); }; const closeKeyActions = () => { setManagedKeyId(null); setManagedKeyAnchor(null); }; const keyEditBtn = { flex: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 66, height: TILE_ACTION_HEIGHT, boxSizing: "border-box", padding: "0 12px", background: "color-mix(in srgb, var(--ink) 4%, var(--bg-card))", border: "1px solid var(--rule-2)", borderRadius: 9, cursor: "pointer", fontFamily: "var(--f-display)", fontSize: 11, fontWeight: 600, color: "var(--ink)" }; return ( <>

API keys {!creating && }

{creating &&

Name this key

setNewName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") create(); }} placeholder="e.g. Trading bot" style={{ flex: 1, minWidth: 0, padding: "9px 11px", background: "var(--bg-2)", border: "1px solid var(--rule-2)", borderRadius: 9, outline: "none", color: "var(--ink)", fontFamily: "var(--f-display)", fontSize: 13 }} />

} {keys.length === 0 && !creating &&

No keys yet. Generate one to call the API directly.

} {keys.map((k, i) => { const canEditKey = freshId !== k.id; const openKeyActions = (event) => { setManagedKeyId(k.id); setManagedKeyAnchor(getActionAnchor(event)); }; return (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openKeyActions(e); } } : undefined} className={canEditKey ? "press" : undefined} style={{ padding: "12px 14px", borderTop: i || creating ? "1px solid var(--rule)" : "none", cursor: canEditKey ? "pointer" : "default" }}>

{k.name}

{canEditKey && }

{freshId === k.id ? (

{k.token}

Copy it now. For your security, you won't see the full key again.

) : (

{maskToken(k.token)} · Created {k.created}

)}

); })}

{managedKeyId && keyTarget && { setRenamingId(keyTarget.id); setRenameVal(keyTarget.name); closeKeyActions(); }} onRevoke={() => { setRevokingKeyId(keyTarget.id); closeKeyActions(); }} />} {renamingId && renamingKey && { setRenamingId(null); setRenameVal(""); }} onSave={saveRename} />} {revokingKeyId && revokingKey && setRevokingKeyId(null)} onApprove={() => revokeKey(revokingKey.id)} />} 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); const [apps, setApps] = useState(() => AGENT_APPS.map((app) => ({ ...app, connected: app.kind === "connected" }))); const [managedAppId, setManagedAppId] = useState(null); const [managedAppAnchor, setManagedAppAnchor] = 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); setManagedAppAnchor(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); }; const openAppActions = (id, event) => { setManagedAppId(id); setManagedAppAnchor(getActionAnchor(event)); }; const closeAppActions = () => { setManagedAppId(null); setManagedAppAnchor(null); }; return ( <>

{window.StatusBar && }

{!window.__YOSHI_WEB && } Agents {!window.__YOSHI_WEB && }

Connect Yoshi to your agents. Set it up yourself over MCP, an SDK, or an API key, or authorize a supported app.

{YOSHI_METHODS.map((m) => )} {apps.map((a) => )} {connections.map((c) => setManagedConnection({ type: "actions", id, anchor: getActionAnchor(event) })} />)}

Propose-only access. An agent never holds or moves your money on its own. Revoke any connection anytime.

{view === "sdk" && setView(null)} />} {view === "api" && setView(null)} />} {managedAppId && appTarget && { closeAppActions(); 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} />} ); }; Object.assign(window, { ConnectAgentsSheet });