/* simple/core.jsx — the redesigned app's spine. ConfirmSheet is THE execution primitive: every money action — agent proposal or manual order — funnels into the same review → passkey → success flow. Two doors, one primitive. Also: the agent card library rendered inline in the Yoshi thread. Each card replaces a killed screen (Studio, Trade browse, Briefs). */ /* ---------- shared money rows ---------------------------------------------- */ const LegRow = ({ leg, last }) => { const [tag, label, detail, amount] = leg; const tagColor = tag === "SELL" ? "var(--signal-neg)" : tag === "BUY" ? "var(--accent-pos)" : "var(--ink-2)"; // newer proposals put a security object in the label slot ({ ticker, price, change, name, valueLabel }) const sec = label && typeof label === "object" ? label : null; return (
{tag}
{sec ? ( <>
{sec.ticker} {sec.price ? {sec.price} : null} {sec.change ? {sec.change} : null}
{(sec.name || sec.valueLabel) ?
{[sec.name, sec.valueLabel].filter(Boolean).join(" · ")}
: null} ) : ( <>
{label}
{detail ?
{detail}
: null} )}
{amount}
); }; const StatCell = ({ label, value, color = "var(--ink)", border }) => (
{label}
{value}
); /* One receipt language for every instruction. Manual queued orders, transfers, and approved briefs all pass through this model before Activity takes over. */ const outcomeTicker = (row) => { if (row.ticker) return row.ticker; const match = String(row.title || "").match(/\b(?:Buy|Sell)\s+([A-Z]{1,6})\b/i); return match ? match[1].toUpperCase() : null; }; const outcomeIsTrade = (row) => ["BUY", "SELL"].includes(String(row.tag || "").toUpperCase()); const outcomeAmount = (row) => Number(String(row.amt || "").replace(/[^\d.]/g, "")) || 0; const outcomeNet = (row) => { const raw = String(row.amt || ""); const value = outcomeAmount(row); const tag = String(row.tag || "").toUpperCase(); if (tag === "BUY" || tag === "PAY") return -value; if (tag === "SELL" || tag === "PULL") return value; if (/[-−]/.test(raw)) return -value; if (/\+/.test(raw)) return value; return 0; }; const transactionRowsForBrief = (action) => { if (action.series) return action.series; if (action.kind === "trade" && action.legs) { const account = action.legs.find((leg) => leg[0] === "ACCOUNT" || leg[0] === "FROM"); return action.legs.filter((leg) => ["BUY", "SELL"].includes(leg[0])).map((leg) => { const security = leg[1] && typeof leg[1] === "object" ? leg[1] : null; const ticker = security ? security.ticker : String(leg[1] || ""); return { tag: leg[0], ticker, title: `${leg[0] === "BUY" ? "Buy" : "Sell"} ${ticker}`, sub: [security && security.name, security && security.valueLabel, account && account[1]].filter(Boolean).join(" · "), amt: leg[3] }; }); } return [{ tag: action.kind === "trade" ? "BUY" : action.kind === "automation" ? "RULE" : "MOVE", title: action.title, sub: action.rail || action.settles || "Submitted to Yoshi", amt: action.amount || (action.net ? usd(Math.abs(action.net)) : ""), }]; }; const briefOutcomeItems = (action) => { const rows = transactionRowsForBrief(action); return rows.map((row) => { const trade = outcomeIsTrade(row) || (!action.series && action.kind === "trade"); const scheduled = !action.series && action.kind === "automation"; const queued = trade && !MARKET_OPEN; const submittedDetail = [row.amt, row.sub].filter(Boolean).join(" · "); const detail = trade ? [row.amt, queued ? "Queued for tomorrow at market open" : "Executing at market", row.sub].filter(Boolean).join(" · ") : [row.amt, row.sub].filter(Boolean).join(" · "); return { ...row, submittedDetail, detail, status: scheduled ? "Scheduled" : "In motion", trade }; }); }; const transactionStatusForTracker = (item) => { const trade = item.category === "Trade"; const queuedTrade = trade && item.state === "queued"; const scheduled = item.kind === "recurring"; const amountValue = Math.abs(item.amount || item.net || 0); const amount = amountValue ? usd(amountValue) : ""; return { title: scheduled ? "Automation scheduled" : `${trade ? "Trade" : "Transfer"} submitted`, summary: scheduled ? "Your recurring transfer is scheduled. You can follow its next run in Activity." : trade ? queuedTrade ? "Your one-time order is queued for tomorrow at market open." : "Your order is in motion. You can follow it in Activity." : "Your transfer is processing. You can follow it in Activity.", items: [{ title: item.title, submittedDetail: [amount, item.rail || item.acct].filter(Boolean).join(" · "), detail: [amount, item.rail || item.acct, item.chip].filter(Boolean).join(" · "), status: scheduled ? "Scheduled" : "In motion" }], }; }; const transactionStatusForBrief = (action) => { const items = briefOutcomeItems(action); const inMotion = items.filter((item) => item.status === "In motion").length; const scheduled = items.filter((item) => item.status === "Scheduled").length; const summary = [ inMotion ? `${inMotion} ${inMotion === 1 ? "is" : "are"} in motion` : "", scheduled ? `${scheduled} scheduled` : "", ].filter(Boolean).join(". ") + "."; return { title: items.length > 1 ? "Transactions submitted" : action.kind === "trade" ? "Trade submitted" : action.kind === "automation" ? "Automation scheduled" : "Transfer submitted", submittedSummary: items.length === 1 ? "Your transaction was submitted." : `${items.length} transactions were submitted.`, summary, items, }; }; const seriesInflightItem = (row) => { const trade = outcomeIsTrade(row); const queued = trade && !MARKET_OPEN; const net = outcomeNet(row); const ticker = outcomeTicker(row); const quote = ticker && MARKET.find((security) => security.ticker === ticker); return { icon: trade ? "trade" : "swap", title: row.title, category: trade ? "Trade" : "Transfer", kind: "once", state: trade ? (queued ? "queued" : "working") : "pending", agent: false, when: trade ? (queued ? "Tomorrow · market open" : "Executing now") : "Processing", chip: trade ? (queued ? "Queued · tomorrow 9:30 AM" : "In motion · executing") : "In motion · processing", net, amount: outcomeAmount(row), scope: "yoshi", rail: trade ? "Market order" : "Brief transaction", acct: row.sub, cancelNote: queued ? "Cancellation is best efforts before market open." : trade ? "Cancellation is best efforts." : undefined, steps: trade ? queued ? [["Submitted", "Just now"], ["Queued for market open", "You are here"], ["Executes", "Tomorrow · 9:30 AM"]] : [["Submitted", "Just now"], ["Order in motion", "You are here"], ["Executes", "Market open"]] : [["Submitted", "Just now"], ["Processing", "You are here"], ["Completes", "Soon"]], stepAt: 1, settleMs: trade ? (queued ? undefined : 6000) : 25000, settle: { icon: trade ? "trade" : "swap", title: trade ? String(row.title).replace(/^Buy\b/i, "Bought").replace(/^Sell\b/i, "Sold") : row.title, detail: trade ? [row.amt, quote ? `Executed at ${usd(quote.last)}` : "Market order executed", row.sub].filter(Boolean).join(" · ") : row.sub, category: trade ? "Investment" : "Transfer", accountScope: "yoshi", net, amount: outcomeAmount(row), }, }; }; const automationInflightItem = (action) => ({ icon: "clock", title: action.title, category: "Automation", kind: "recurring", state: "scheduled", agent: true, when: action.settles || "Next run", chip: `Scheduled · ${action.settles || "next run"}`, net: action.net || 0, amount: outcomeAmount({ amt: action.amount }), scope: "yoshi", acct: "Yoshi automation", }); const TransactionSubmissionScreen = ({ status, onDone }) => { useEffect(() => { const doneTimer = setTimeout(onDone, 2200); return () => clearTimeout(doneTimer); }, [status]); const destinationCopy = status.destination === "automations" ? "Opening Automations…" : "Opening Activity…"; return (
Submitted
{status.title}
{status.submittedSummary || status.summary}
{status.items.map((item, index) => (
{item.title} {item.submittedDetail} Submitted
))}
{destinationCopy}
); }; /* ============================================================ ConfirmSheet · the one execution primitive. `action` = { title, why, legs, net, settles, settlesVerb, kind, agent } agent falsy → a manual order (your own trade/move); truthy → a proposal. Both render identically: same review, same passkey, same success. ============================================================ */ const CONFIRM_DECLINES = ["Not now", "Too large", "I'll do it manually", "Don't trust the timing"]; /* multi-transaction series — the brief shows the legs for review only. The footer owns the single confirmation decision for the whole series. */ const seriesReviewTag = (item, index) => item.tag || String(index + 1); const seriesReviewTone = (tag) => tag === "BUY" || tag === "PULL" || tag === "MOVE" ? "var(--accent-pos)" : tag === "PAY" ? "var(--signal-neg)" : "var(--ink-2)"; const SeriesReviewRows = ({ items }) => { return (
{items.map((s, i) => (
{seriesReviewTag(s, i)} {s.title} {s.sub} {s.amt}
))}
); }; const ConfirmSheet = ({ action, onClose, onApproved, onDeclined, onAsk, onSource }) => { const [phase, setPhase] = useState("review"); const [msg, setMsg] = useState(""); const [graduated, setGraduated] = useState(false); // "switch to automatic" accepted in-brief const a = action; const manual = !a.agent; // markets closed → an approved trade queues as a one-time order, and every // phase of this sheet says so instead of pretending it executed const queues = a.kind === "trade" && !MARKET_OPEN; return (
{window.StatusBar && } {/* the shared brief nav bar (back chevron + "Briefs" title + rule) so a needs-you review reads exactly like the alert/insight brief detail. */} {phase !== "success" && } {/* who initiated — the same header for both doors builds one habit. Rule-fired briefs show provenance instead: which rule asked, tappable through to the automation it came from. */} {phase !== "success" && (
{a.source ? ( /* rule-fired — the glyph stays Yoshi: your rules run inside Yoshi */ ) : (
{a.agentIcon && typeof AGENT_ICON !== "undefined" && AGENT_ICON[a.agentIcon] ? : } {manual ? "Your order" : a.agent}
)}
)} {phase === "review" && ( <>
{a.title}
{a.why &&
{a.why}
} {a.series ? "Series" : manual ? "Order" : "Proposal"} {a.series ? ( ) : (
{a.legs.map((leg, i) => )}
)} {/* first-run preview — the rule resolved against today's numbers: what would move right now, or why it wouldn't fire yet */} {a.preview && (
{a.preview.t} {a.preview.s}
)} {/* amount summary — plain label + value text (no boxes), matching the reference app's brief detail */}
{a.kind === "automation" ? "Turns on only after you approve. Future runs follow these parameters and limits." : queues ? "Markets are closed, so this queues as a one-time order for tomorrow's market open. Cancel free anytime before then." : manual ? "Executes immediately after your passkey. It lands in Activity like everything else." : "Yoshi makes the move, only after you confirm."}
{/* the trust ladder — after a streak of approvals on an ask-each-time rule, offer the switch to automatic right in the moment of trust */} {a.source && a.source.approvals >= 3 && (
{graduated ? (
Done — future runs execute automatically within the rule's limits. This one still needs your approval below.
) : ( <>
You've approved this rule {a.source.approvals} runs in a row
Let it run automatically within its limits — {a.source.limits}. You can switch back anytime.
setGraduated(true)} style={{ marginTop: 9 }}>Switch to automatic )}
)}
{manual ? Cancel : setPhase("decline")}>Decline} {/* one button → native passkey handles auth; then the action runs and a toast confirms it (no full-screen success page). */} onApproved(a)}>Confirm with passkey
{!manual && onAsk && (
{ const t = msg.trim(); if (t) { setMsg(""); onAsk(a, t); } }} placeholder="Talk to Yoshi…" />
)}
)} {phase === "decline" && ( setPhase("review")} onDeclined={onDeclined} /> )}
); }; const DeclineBody = ({ a, onBack, onDeclined }) => { const [r, setR] = useState(null); const [note, setNote] = useState(""); return ( <>
Why decline?
Yoshi learns from this. It won't run.
{CONFIRM_DECLINES.map((reason) => ( ))}