/* simple/app.jsx — the redesigned shell, DESKTOP edition.
Same state machine as the mobile simple app, re-laid out as three
persistent pillars: Yoshi chat (left) · Home (center) · Activity (right),
under a slim top bar (menu · wordmark · bell). A selection takes over the
area right of chat; Trade / Transfer render their WIDE desktop two-pane
layouts (market context + ticket, form + more ways), the rest center.
No phone chrome: window.StatusBar stays undefined so reused screens skip
their status-bar row, and the pillar wraps hide per-screen headers. */
/* identify as the web build — flips reused components (Trade / Transfer /
detail screens) to their desktop layouts and the type scale to web sizes,
exactly like the main web app. Set before first render. */
window.__YOSHI_WEB = true;
/* a floating confirmation pill — dark elevated surface, rounded, with a check
glyph. Quiet acknowledgment, not an alert. */
const Toast = ({ msg }) => (
{msg}
);
/* the reused phone sheets are position:absolute inset:0 with their own header +
close. Instead of a modal, a selection (Move / Trade / Accounts / …) takes
over the whole area to the right of chat — the center AND the Activity pillar,
like the main web app's flow panes — with the sheet content centered. Close /
back returns to Home. willChange:transform makes the inner frame a containing
block so the sheets' fixed-position sub-sheets (kebab / info / options) anchor
inside the pane instead of escaping to the browser viewport. */
const CenterPage = ({ wide, onClose, children }) => (
{children}
{/* flows whose reused web layout carries no close of its own (Trade /
Transfer) get one here, so there's always a way back to Home */}
{onClose && (
)}
);
/* Header actions use black for the active section and neutral for the rest. */
const TOPBAR_ACTION_WIDTH = 118;
const TopAction = ({ icon, label, onClick, filled }) => (
{label}
);
/* column geometry — chat (act) and Activity (verify) are resizable; the center
(see) is prioritized and never drops below CENTER_MIN. Below the 3-column
threshold the Activity pillar drops away (two columns); below MOBILE_MIN the
web app blocks and points to the phone. Mirrors the main web app. */
const CHAT_MIN = 300, CHAT_MAX = 560;
const ACT_MIN = 300, ACT_MAX = 520;
const CENTER_MIN = 460;
const MOBILE_MIN = 768;
/* a draggable seam. side="right" sits on a column's right edge (chat),
side="left" on the left edge (Activity). clamp() keeps every column within
its bounds AND preserves CENTER_MIN for the middle. */
const ColResizer = ({ side, width, setWidth, clamp }) => {
const drag = useRef(null);
const onDown = (e) => { drag.current = { x: e.clientX, w: width }; e.currentTarget.setAttribute("data-drag", "1"); try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} };
const onMove = (e) => { if (!drag.current) return; const dx = e.clientX - drag.current.x; setWidth(clamp(drag.current.w + (side === "left" ? -dx : dx))); };
const onUp = (e) => { drag.current = null; e.currentTarget.removeAttribute("data-drag"); };
return ;
};
/* below MOBILE_MIN the desktop pillars don't fit — explain both recovery paths. */
const MobileBlock = () => (
More room needed
Continue on a larger screen
If you’re on desktop, widen your browser window. If you’re on a phone or small tablet, open the Yoshi mobile app to continue.
);
/* the empty reading-pane state shared by the Briefs / Automations takeovers */
const InboxEmpty = ({ title, sub }) => (
{title}
{sub}
);
/* the raised reading card the selected item renders into */
const InboxCard = ({ children }) => (
{children}
);
/* Briefs on web — the same full-width two-pane takeover as the main web app.
It REPLACES the chat pillar (the brief's own thread lives in the reading
card), with the inbox list on the left (BriefsBoard) and the selected brief
on the right (BriefDetail, embedded). Reuses the exact briefs.jsx components
so it tracks main as briefs evolve. */
const WebBriefs = ({ proposals, nav, onClose, onExecute, onDecline, onReviseProposal, initialBriefId, readingPane, onApplyAutomationRevision }) => {
const itemFromProposal = (p) => ({ id: p.id, kind: "approve", icon: "bolt", agentIcon: p.agentIcon, series: p.series, title: p.title, body: p.briefBody || p.why.split(". ")[0] + ".", detail: p.detail, value: null, tone: p.net >= 0 ? "in" : "out", sec: "needsyou", when: p.when || "Today", agent: p.agent, source: p.source, preview: p.preview, legs: p.legs, net: p.net, amountLabel: p.amountLabel, amount: p.amount, cashImpactLabel: p.cashImpactLabel, cashImpact: p.cashImpact, proposal: p });
const firstNeedsYou = proposals && proposals.length ? itemFromProposal(proposals[0]) : null;
const feedList = window.BRIEF_FEED ? window.BRIEF_FEED() : [];
const initialProposal = initialBriefId ? (proposals || []).find((p) => p.id === initialBriefId) : null;
const initialFeed = initialProposal ? null : (initialBriefId ? feedList.find((x) => x.id === initialBriefId) : null);
const [sel, setSel] = useState(() => (initialProposal ? itemFromProposal(initialProposal) : initialFeed) || firstNeedsYou);
useEffect(() => {
if (!initialBriefId) return;
const selectedProposal = (proposals || []).find((proposal) => proposal.id === initialBriefId);
if (selectedProposal) { setSel(itemFromProposal(selectedProposal)); return; }
const selectedFeed = feedList.find((brief) => brief.id === initialBriefId);
if (selectedFeed) setSel(selectedFeed);
}, [initialBriefId]);
const idx = sel ? feedList.findIndex((x) => x.id === sel.id) : -1;
const hasNext = idx >= 0 && idx < feedList.length - 1;
const advance = () => { if (hasNext) setSel(feedList[idx + 1]); else setSel(null); };
// Declining a needs-you brief advances to the next one. Approvals leave the
// current selection behind the submitted receipt, which then routes to
// Activity or Automations based on the approved action.
const nextNeedsYou = (id) => {
const ny = (proposals || []);
const i = ny.findIndex((p) => p.id === id);
const remaining = ny.filter((p) => p.id !== id);
const next = remaining[i] || remaining[0];
return next ? itemFromProposal(next) : null;
};
const pick = (b) => { setSel(b); };
const exec = (id) => { onExecute && onExecute(id); };
const decline = (id) => { const nx = nextNeedsYou(id); onDecline && onDecline(id); setSel(nx); };
return (
{/* exit the whole takeover — top-right, the app's standard circle X */}
{/* LEFT — the inbox list */}
{/* RIGHT — the selected brief or its submitted receipt on a raised
reading card. The Briefs inbox stays visible through approval. */}
{readingPane || (sel ? (
);
};
/* Automations on web — the same full-width two-pane takeover: the automations
list on the left, the selected automation's detail on the right (the reused
AutomationSheet in embedded mode, which carries its own modify/pause thread).
Mirrors main's Studio → Automations. */
const WebAutomations = ({ nav, onClose, flash, initialId, automations = AUTOMATIONS }) => {
const list = automations;
const [sel, setSel] = useState(() => list.find((a) => a.id === initialId) || list[0] || null);
// the aggregate authority line — the one-glance answer to "which of my
// rules can move money without asking me?" Paused rules count in none of
// the mode buckets; they get their own tail segment.
const running = list.filter((a) => a.status !== "paused");
const autos = running.filter((a) => a.mode === "auto").length;
const asks = running.filter((a) => a.mode === "asks").length;
const alerts = running.filter((a) => a.mode === "alert").length;
const attention = list.filter((a) => a.status === "attention").length;
const paused = list.filter((a) => a.status === "paused").length;
const build = () => { onClose(); nav.ask("Build a new automation", "Sure. Tell me the rule in plain words — like “invest $200 every Friday” or “keep my spendable cash near $15k and move the rest to Reserve.” I'll set it up inside your limits and show you the first run before it executes."); };
return (
{/* exit the whole takeover — top-right, the app's standard circle X */}
{/* LEFT — the automations list */}
{/* RIGHT — the selected automation on a raised reading card */}
{sel ? (
setSel(null)} nav={nav} flash={flash} />
) : }
);
};
const SimpleWebApp = () => {
const palette = "bone"; // Lucid Dreaming Phase 1: light only
const [stack, setStack] = useState([]); // push stack: holding / account / card
const [overlay, setOverlay] = useState(() => {
const view = new URLSearchParams(window.location.search).get("view");
if (view === "transfer-pending-visibility") return { type: "transfer", intent: "withdraw" };
if (["delete-yoshi-blocked", "delete-yoshi-ready", "delete-yoshi-requested"].includes(view)) {
return { type: "profile", section: "delete" };
}
const previewBrief = {
"bnk-checking-buffer": "p-checking-buffer",
"price-move": "b-price-move",
"price-move-up": "b-price-move-up",
"automation-move-review": "b-automation-move-review",
"earnings-pre": "b-earnings-pre",
"earnings-post": "b-earnings-post",
"earnings-post-example": "b-earnings-post-example",
"portfolio-update-daily": "b-portfolio-update-daily",
"bnk-account-review-v2": "b-weekly-financial-review-causal",
"investor-profile": "b-investor-profile-new",
"investor-profile-new": "b-investor-profile-new",
"bnk-payday-automations": "b-payday-with-automations",
"bnk-payday-no-automations": "b-payday-without-automations",
"bnk-debt-overview-personalized": "b-debt-overview-personalized",
"bnk-debt-overview-personalized-895c": "b-debt-overview-personalized-895c",
"bnk-debt-overview-personalized-2d6b": "b-debt-overview-personalized-2d6b"
}[view];
return previewBrief ? { type: "briefs", brief: previewBrief } : null;
}); // modal sheets
const [txnOverlay, setTxnOverlay] = useState(null); // txn/receipt detail — a modal that layers OVER the current view (e.g. Accounts) rather than replacing it
const [reviewedAutomations, setReviewedAutomations] = useState(() => BRIEFS.find((b) => b.id === "b-automation-move-review").automationMoveReview.automations.map(window.AutomationReview.asAutomation));
const [proposals, setProposals] = useState(PROPOSALS);
// ---- legacy proposal-thread state, still used by older reference paths ----
// The active Briefs flow keeps needs-you chat inline inside the brief detail.
const [threads, setThreads] = useState({});
const [expired, setExpired] = useState([]);
const [extraProposals, setExtraProposals] = useState([]);
const [threadTid, setThreadTid] = useState(null);
const MOD_SEQ = useRef(0);
const TRADE_LAUNCH_SEQ = useRef(0);
const [activityExtra, setActivityExtra] = useState([]);
const [extraAccounts, setExtraAccounts] = useState([]); // Yoshi accounts opened from the menu ("Open another …")
const [inflight, setInflight] = useState(COMING_UP_SEED); // the In motion / Coming up queue
const [transactionStatus, setTransactionStatus] = useState(null);
const INFLIGHT_SEQ = useRef(0);
const [actFilter, setActFilter] = useState("all"); // Activity type filter
const inflightRef = useRef(inflight);
useEffect(() => { inflightRef.current = inflight; }, [inflight]);
const [toastQueue, setToastQueue] = useState([]);
const toast = toastQueue[0] || null;
const [chatInject, setChatInject] = useState(null);
const instantFundingUsed = [...inflight, ...activityExtra].reduce((sum, item) => sum + (item.instantFundsUsed || 0), 0);
const instantFundingGranted = Math.min(
INSTANT_FUNDING_CAP,
inflight.filter((item) => item.category === "Transfer" && (item.net || 0) > 0).reduce((sum, item) => sum + (item.instantAvailable || 0), 0),
);
const instantFundingAvailable = Math.max(0, instantFundingGranted - instantFundingUsed);
const unsettledSaleProceeds = [...inflight, ...activityExtra].reduce((sum, item) => sum + (item.unsettledSaleProceeds || 0), 0);
const unsettledSaleProceedsUsed = [...inflight, ...activityExtra].reduce((sum, item) => sum + (item.unsettledSaleProceedsUsed || 0), 0);
const settledCashUsed = [...inflight, ...activityExtra].reduce((sum, item) => sum + (item.settledCashUsed || 0), 0);
const unsettledSaleProceedsAvailable = Math.max(0, unsettledSaleProceeds - unsettledSaleProceedsUsed);
const settledCashAvailable = Math.max(0, CASH_TOTAL - settledCashUsed);
const isPendingTransferPreview = new URLSearchParams(window.location.search).get("view") === "transfer-pending-visibility";
const transferSettledCashAvailable = isPendingTransferPreview ? 13924.16 : settledCashAvailable;
const transferPendingIncomingAmount = isPendingTransferPreview ? 99995.06 : unsettledSaleProceedsAvailable;
const [hasCard, setHasCard] = useState(() => localStorage.getItem("yoshi_card") === "1");
// resizable columns (persisted). center absorbs the rest, floored at CENTER_MIN.
const [winW, setWinW] = useState(() => window.innerWidth);
const [chatW, setChatW] = useState(() => { const v = parseInt(localStorage.getItem("yoshi_web_chatw") || "0", 10); return v >= CHAT_MIN && v <= CHAT_MAX ? v : 420; });
const [actW, setActW] = useState(() => { const v = parseInt(localStorage.getItem("yoshi_web_actw") || "0", 10); return v >= ACT_MIN && v <= ACT_MAX ? v : 400; });
useEffect(() => { const onResize = () => setWinW(window.innerWidth); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []);
const setChatWidth = (w) => { setChatW(w); localStorage.setItem("yoshi_web_chatw", String(Math.round(w))); };
const setActWidth = (w) => { setActW(w); localStorage.setItem("yoshi_web_actw", String(Math.round(w))); };
useEffect(() => { document.getElementById("app").setAttribute("data-palette", palette); }, [palette]);
useEffect(() => { window.__liveProposals = proposals; window.setBellCount && window.setBellCount(window.totalBriefCount ? window.totalBriefCount(proposals.length) : proposals.length); }, [proposals]);
const setPalette = () => {}; // Legacy settings prop; no alternate theme.
const flash = (msg) => setToastQueue((queue) => [...queue, msg]);
useEffect(() => {
if (!toast) return;
const timer = setTimeout(() => setToastQueue((queue) => queue.slice(1)), 2600);
return () => clearTimeout(timer);
}, [toast]);
const getCard = () => { localStorage.setItem("yoshi_card", "1"); setHasCard(true); };
const nav = useMemo(() => ({
// pillars are persistent — "switching tabs" just clears the layers
tab: () => { setStack([]); setOverlay(null); setActFilter("all"); },
// a transaction/receipt detail layers over whatever's showing (Home,
// Accounts, …) as a modal; every other sheet replaces the work area
sheet: (o) => (o && (o.type === "txn" || o.type === "receipt")) ? setTxnOverlay(o) : setOverlay(o),
closeSheet: () => setOverlay(null),
push: (v) => setStack((s) => [...s, v]),
pop: () => setStack((s) => s.slice(0, -1)),
clearStack: () => setStack([]),
// selecting a security ANYWHERE opens the Trade view with it preselected —
// same as opening Trade and picking it (the detail shows on the left, ticket
// on the right). Holdings resolve because MARKET includes them (held: true).
security: (id) => { setStack([]); setOverlay({ type: "trade", id }); },
// The top-bar action is a root navigation: relaunch Trade even when its
// current instance is showing the all-holdings phase.
trade: () => { setStack([]); TRADE_LAUNCH_SEQ.current += 1; setOverlay({ type: "trade", launch: TRADE_LAUNCH_SEQ.current }); },
ask: (note, reply) => { setChatInject({ note, reply }); setStack([]); setOverlay(null); },
transfer: (preset = {}) => { setStack([]); setOverlay({ type: "transfer", intent: preset.intent, from: preset.from, rail: preset.rail, retry: preset.retry }); },
automation: (id) => { setStack([]); setOverlay({ type: "automation", id }); },
studio: (view) => { setOverlay(view === "automations" ? { type: "automations" } : null); if (view !== "automations") nav.ask("Show me the markets", "Ask me about anything you hold or want to research — I'll pull the chart, the comparison, or the trade right here."); },
accountsRoot: () => { setOverlay(null); setStack([]); },
// open another Yoshi account from the menu: auto-name it (Cash / Brokerage /
// Crypto, incrementing to "Cash 2", "Brokerage 2", … when the name is taken),
// add it, and jump to the Accounts view with the new account highlighted.
openAccount: (family) => {
if (!["cash", "brokerage", "crypto"].includes(family)) return;
const base = family === "cash" ? "Cash" : family === "crypto" ? "Crypto" : "Brokerage";
const seed = ["Cash", "Reserve", "Brokerage", "High Risk", "Crypto"];
const id = "extra-" + family + "-" + Date.now();
setExtraAccounts((prev) => {
const taken = new Set([...seed, ...prev.map((a) => a.name)]);
let name = base, n = 2;
while (taken.has(name)) { name = base + " " + n; n += 1; }
return [...prev, { id, family, name }];
});
setStack([]); setTxnOverlay(null);
setOverlay({ type: "accounts", focus: id });
flash(base + " account opened");
},
signOut: () => { setStack([]); setOverlay(null); setProposals(PROPOSALS); setActivityExtra([]); setExtraAccounts([]); setInflight(COMING_UP_SEED); setActFilter("all"); flash("Signed out"); },
}), []);
const findProp = (id) => proposals.find((p) => p.id === id) || extraProposals.find((p) => p.id === id) || PROPOSALS.find((p) => p.id === id);
// ---- proposal / brief revision helpers ------------------------------------
const rootOf = (id) => { let p = findProp(id), guard = 0; while (p && p.modifiedFrom && guard++ < 12) p = findProp(p.modifiedFrom); return p ? p.id : id; };
const tidFor = (id) => "th_" + rootOf(id);
const isExpired = (id) => expired.includes(id);
const parseMoney = (s) => {
const m = String(s || "").match(/\$([\d,]+(?:\.\d+)?)/);
return m ? parseFloat(m[1].replace(/,/g, "")) : 0;
};
const proposalBaseAmount = (p) => Math.abs(parseMoney(p && p.amount) || p && p.net || 0);
// a target amount in a revise note ("$250", "$250 instead of $500") drives the
// resize — pick the figure that isn't the current per-run amount
const parseTarget = (note, base) => {
const nums = (String(note || "").match(/\$\s?[\d,]+(?:\.\d+)?/g) || [])
.map((x) => parseFloat(x.replace(/[^\d.]/g, ""))).filter((n) => n > 0);
if (!nums.length) return null;
const notBase = nums.filter((n) => Math.abs(n - base) > 0.01);
return notBase.length ? notBase[0] : nums[0];
};
const fmtUsd = (n) => "$" + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const formatScaledMoney = (prefix, raw, decimals, f) => {
const n = parseFloat(raw.replace(/,/g, "")) * f;
return prefix + "$" + n.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
};
const shouldScaleMoney = (n, base, text) => {
if (!base) return true;
if (Math.abs(n - base) < 0.01) return true;
if (/current balance|available|current holding/i.test(text)) return false;
const ratio = n / base;
return ratio > 1 && ratio <= 25 && Math.abs(ratio - Math.round(ratio)) < 0.001;
};
const scaleStr = (value, f, base = 0) => String(value).replace(/([+-]?)\$([\d,]+)(\.\d+)?/g, (match, prefix, whole, cents) => {
const n = parseFloat((whole + (cents || "")).replace(/,/g, ""));
return shouldScaleMoney(n, base, String(value)) ? formatScaledMoney(prefix, whole + (cents || ""), cents ? cents.length - 1 : 0, f) : match;
}).replace(/(about\s+)(\d+(?:\.\d+)?)(\s+shares\b)/gi, (match, lead, raw, tail) => {
const n = parseFloat(raw) * f;
return lead + n.toLocaleString(undefined, { minimumFractionDigits: raw.includes(".") ? 2 : 0, maximumFractionDigits: raw.includes(".") ? 2 : 0 }) + tail;
});
const scaleCell = (cell, f, base) => {
if (typeof cell === "string") return scaleStr(cell, f, base);
if (!cell || typeof cell !== "object") return cell;
return Object.fromEntries(Object.entries(cell).map(([k, v]) => [k, typeof v === "string" ? scaleStr(v, f, base) : v]));
};
const makeRevised = (p) => {
MOD_SEQ.current += 1;
const f = 0.5;
const base = proposalBaseAmount(p);
return { ...p, id: p.id + "_m" + MOD_SEQ.current, modifiedFrom: p.id,
net: Math.round(p.net * f * 100) / 100,
title: scaleStr(p.title, f, base),
why: scaleStr(p.why, f, base),
preview: p.preview ? { ...p.preview, t: scaleStr(p.preview.t, f, base), s: scaleStr(p.preview.s, f, base) } : p.preview,
legs: p.legs.map((l) => l.map((cell) => scaleCell(cell, f, base))),
series: p.series ? p.series.map((row) => scaleCell(row, f, base)) : p.series,
amount: p.amount ? scaleStr(p.amount, f, base) : p.amount,
cashImpact: p.cashImpact ? scaleStr(p.cashImpact, f, base) : p.cashImpact };
};
const makeBriefRevision = (p, note) => {
const s = (note || "").toLowerCase();
const base = proposalBaseAmount(p);
const smaller = /smaller|less|half|reduce|lower|trim|too large/.test(s);
const safer = /safe|safest|only the/.test(s);
const later = /wait|push|friday|monday|tomorrow|timing/.test(s);
// a specific amount in the note wins ("$250" → resize $500 → $250); else the
// qualitative keywords set the factor
const target = parseTarget(note, base);
const f = target && base > 0 ? target / base : smaller ? 0.5 : safer ? 0.65 : 1;
const resized = base > 0 && Math.abs(f - 1) > 0.001;
const timing = later ? " Timing moved later per your note; nothing runs until you confirm." : "";
// lead the brief with the actual change so the card is unambiguous
const change = resized
? `Resized from ${fmtUsd(base)} to ${fmtUsd(base * f)} per run, per your chat request.`
: `I updated this brief from your chat request: "${note}".`;
return {
...p,
title: resized ? "Updated · " + scaleStr(p.title, f, base) : safer ? "Safer version · " + p.title : later ? p.title + " · Friday" : "Updated · " + p.title,
net: Math.round((p.net || 0) * f * 100) / 100,
why: `${change}${safer ? " I kept the lower-risk leg emphasis and removed the aggressive posture." : ""}${timing} Review the revised proposal below, then confirm with passkey or decline it here.`,
settles: later ? "Friday" : p.settles,
preview: resized && p.preview ? { ...p.preview, t: scaleStr(p.preview.t, f, base), s: scaleStr(p.preview.s, f, base) } :
p.preview ? { ...p.preview, t: "Updated proposal", s: `${change}${timing}` } :
{ t: "Updated proposal", s: change },
legs: p.legs.map((l) => l.map((cell) => scaleCell(cell, f, base))),
series: p.series ? p.series.map((row) => scaleCell(row, f, base)) : p.series,
amount: p.amount ? scaleStr(p.amount, f, base) : p.amount,
cashImpact: p.cashImpact ? scaleStr(p.cashImpact, f, base) : p.cashImpact,
};
};
const seedThread = (pid, userMsg) => {
const tid = tidFor(pid);
setThreads((ts) => {
const existing = ts[tid];
let msgs = existing ? existing.msgs : [{ kind: "proposal", id: rootOf(pid) }];
if (userMsg) msgs = [...msgs, { from: "user", t: userMsg, time: "now" }, { from: "agent", t: window.threadReply(userMsg).t, time: "now" }];
return { ...ts, [tid]: { id: tid, msgs } };
});
return tid;
};
const persistThread = (tid, msgs) => setThreads((ts) => ({ ...ts, [tid]: { ...(ts[tid] || { id: tid }), msgs } }));
const reviseInThread = (origId) => {
const p = findProp(origId);
const pm = makeRevised(p);
setExtraProposals((xs) => [...xs, pm]);
setProposals((ps) => ps.some((x) => x.id === origId) ? ps.map((x) => x.id === origId ? pm : x) : [...ps, pm]);
setExpired((e) => e.includes(origId) ? e : [...e, origId]);
flash("Proposal revised");
return pm.id;
};
const reviseBriefProposal = (id, note) => {
const p = findProp(id);
if (!p) return null;
const pm = makeBriefRevision(p, note);
setProposals((ps) => ps.map((x) => x.id === id ? pm : x));
flash("Brief updated");
return pm;
};
const proposalActivity = (p) => p.activity || { icon: p.kind === "trade" ? "trade" : "swap", title: p.title, detail: p.legs.map((l) => l[1] && typeof l[1] === "object" ? l[1].ticker : l[1]).filter(Boolean).slice(0, 2).join(" · "), category: p.kind === "trade" ? "Investment" : "Transfer", by: p.agent, net: p.net };
/* ---- In motion queue ---------------------------------------------------- */
const settleInflight = (id) => {
const it = inflightRef.current.find((x) => x.id === id);
if (!it) return; // canceled before it settled
const row = it.settle || { icon: it.icon, title: it.title, detail: it.acct, category: it.category, net: it.net, accountScope: it.scope === "yoshi" ? "yoshi" : "external" };
setInflight((xs) => xs.filter((x) => x.id !== id));
setActivityExtra((xs) => [{ id: "x" + Date.now() + "-" + INFLIGHT_SEQ.current++, when: "Today", ...row, ...currentTransactionOccurrence() }, ...xs]);
flash((it.category === "Trade" ? "Executed · " : "Cleared · ") + row.title);
};
const enqueueInflight = (item) => {
const id = `f${Date.now()}-${INFLIGHT_SEQ.current++}`;
setInflight((xs) => [{ ...item, ...currentTransactionOccurrence(), id, fresh: true }, ...xs]);
setTimeout(() => setInflight((xs) => xs.map((x) => x.fresh ? { ...x, fresh: false } : x)), 2600);
if (item.settleMs) setTimeout(() => settleInflight(id), item.settleMs);
};
const placeOrder = (item) => {
enqueueInflight(item);
setOverlay(null); setStack([]); setActFilter("all");
setTransactionStatus(transactionStatusForTracker(item));
};
useEffect(() => { window.yoshiTrack = { placed: placeOrder }; return () => { delete window.yoshiTrack; }; }, []);
const cancelInflight = (it) => {
setInflight((xs) => xs.filter((x) => x.id !== it.id));
setActivityExtra((xs) => [{ id: "x" + Date.now(), icon: it.icon, title: "Canceled · " + it.title, detail: it.acct, category: it.category, when: "Today", net: 0, amount: Math.abs(it.net || 0), accountScope: it.scope === "yoshi" ? "yoshi" : "external", by: "You", ...currentTransactionOccurrence() }, ...xs]);
setOverlay(null); setTxnOverlay(null);
flash("Canceled · " + it.title);
};
const skipInflight = (it) => {
setInflight((xs) => xs.map((x) => x.id === it.id ? { ...x, when: x.nextWhen || x.when, chip: x.nextChip || x.chip } : x));
setOverlay(null);
flash("Skipped this run · next " + (it.nextWhen || it.when));
};
const pendingTransfer = (a) => a.kind === "transfer";
const needsYouApprovalDestination = (action) => action.kind === "automation" ? "automations" : "activity";
const addRecentRow = (row) => {
const id = "x" + Date.now() + "-" + INFLIGHT_SEQ.current++;
setActivityExtra((xs) => [{ ...row, id, when: "Today", fresh: true, ...currentTransactionOccurrence() }, ...xs]);
setTimeout(() => setActivityExtra((xs) => xs.map((item) => item.id === id ? { ...item, fresh: false } : item)), 1800);
};
/* Every approved brief produces the same submitted receipt as a manual
transaction. A series expands into real individual Activity outcomes. */
const submitApprovedBrief = (a) => {
if (a.automationRevision) {
const revision = a.automationRevision;
window.AutomationReview.complete(revision.automationId);
setReviewedAutomations((items) => items.map((item) => item.id === revision.automationId ? window.AutomationReview.asAutomation(revision.revised) : item));
setOverlay({ type: "automation", id: revision.automationId });
flash(revision.choice === "stop" ? "Automation paused" : "Automation updated");
return;
}
const expandedRows = transactionRowsForBrief(a);
if (a.series || a.kind === "trade") {
expandedRows.map(seriesInflightItem).filter(Boolean).forEach(enqueueInflight);
}
else if (a.kind === "automation") enqueueInflight(automationInflightItem(a));
else if (pendingTransfer(a)) {
const outgoing = (a.net || 0) < 0; // money leaving Yoshi can still be pulled back
const rail = a.rail || "Standard ACH";
const instant = /second|instant/i.test(a.settles || "");
enqueueInflight({
icon: "swap", title: a.title, category: "Transfer", kind: "once", state: "pending",
agent: false, when: instant ? "Usually in seconds" : "Clears " + a.settles, chip: instant ? "Processing · usually in seconds" : "Pending · clears " + a.settles,
net: a.net || 0, scope: "yoshi", acct: rail, cancelable: outgoing,
cancelNote: outgoing ? "You can cancel while it's still pending. Once it's handed to the bank network it can't be recalled." : undefined,
noCancelNote: outgoing ? undefined : "This transfer is already at the bank network, so it can't be recalled.",
steps: [["Submitted", "Just now"], [instant ? "Processing" : "Pending at the bank network", "You are here"], ["Clears", a.settles]], stepAt: 1,
settleMs: instant ? 6500 : 22000,
settle: { icon: "swap", title: a.title, detail: rail + " · cleared", category: "Transfer", accountScope: "yoshi", net: a.net || 0 },
});
}
else if (a.activity) addRecentRow(a.activity);
const remaining = a.id ? proposals.filter((proposal) => proposal.id !== a.id) : proposals;
if (a.id) setProposals(remaining);
setStack([]); setActFilter("all");
setTransactionStatus({ ...transactionStatusForBrief(a), origin: "brief", destination: needsYouApprovalDestination(a) });
};
// on web, "Review" opens the Briefs UI with that exact brief selected — its
// detail + approve/decline live in the reading pane (web's only proposal-
// review surface; there is no separate ConfirmSheet modal)
const reviewInBriefs = (p) => p && nav.sheet({ type: "briefs", brief: p.id });
// briefs approve/decline inline in the reading pane (web two-pane)
const execFromBrief = (id) => { const p = findProp(id); if (p) submitApprovedBrief({ ...p, activity: proposalActivity(p) }); };
const declineFromBrief = (id) => { const p = findProp(id); setProposals((ps) => ps.filter((x) => x.id !== id)); flash("Declined" + (p ? " · " + p.title : "")); };
const completeTransactionStatus = () => {
setTransactionStatus(null); setStack([]); setActFilter("all");
if (transactionStatus.destination === "automations") {
setOverlay({ type: "automations" });
return;
}
setOverlay(null);
};
// Esc closes the topmost layer (sheet → push detail)
useEffect(() => {
const onKey = (e) => {
if (e.key !== "Escape") return;
if (txnOverlay) setTxnOverlay(null);
else if (threadTid) setThreadTid(null);
else if (overlay) setOverlay(null);
else if (stack.length) setStack((s) => s.slice(0, -1));
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [txnOverlay, threadTid, overlay, stack.length]);
/* the active center page — a selection shifts the center column to this
inline instead of opening a modal. Precedence: push detail > overlay
sheet. null → the Home pane shows. */
const briefTransactionStatus = transactionStatus?.origin === "brief" && overlay?.type === "briefs";
const centerNode = transactionStatus && !briefTransactionStatus ? (
) : stack.length > 0 ? (
stack.map((v, i) => (
{fullTakeover ? (
/* Briefs / Automations take over the full width (chat included) */
overlay.type === "briefs"
?
) : null} />
:
) : (
{/* Yoshi chat — persistent left pillar (act), resizable; no header,
the chat starts at the top (its phone header stays hidden by CSS) */}
{centerNode ? (
/* a selection takes over the whole area right of chat — the center
AND the Activity column (like main's flow panes) */
{centerNode}
) : docked ? (
/* two columns: Activity docks below the Home center and the whole
center column scrolls as one region */
{/* menu — a left drawer over a grey scrim (like main). ProfileSheet's own
X (top-left) or a click on the scrim closes it. */}
{overlay?.type === "profile" && (
<>
)}
{/* Center details replace the Activity pane, so their transaction receipts
need an overlay above the center, including security History. */}
{centerNode && txnOverlay?.type === "txn" && (