/* 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;
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 && (
)}
);
/* compact accent action for the top bar (Move / Trade), matching the labeled
Briefs bell so the three read as one cluster */
/* topbar quick action on the Btn atom — filled = solid accent (primary);
otherwise an accent outline with white (ink) icon + label */
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 — point to the phone app. */
const MobileBlock = () => (
Mobile app required
Use Yoshi on your phone
Yoshi’s web app is built for desktop. To manage your money on this device, open the Yoshi mobile app.
);
/* 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, initialBriefId }) => {
const itemFromProposal = (p) => ({ id: p.id, kind: "approve", icon: "bolt", title: p.title, body: p.why.split(". ")[0] + ".", value: null, tone: p.net >= 0 ? "in" : "out", sec: "needsyou", when: p.agent, agent: p.agent, legs: p.legs, net: p.net, amountLabel: p.amountLabel, amount: p.amount, 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;
// deep-link can also target the pulse's "daily-brief" (Today's read), which
// BriefsBoard builds from window.MORNING_BRIEF, or any other feed brief
const dailyBrief = window.MORNING_BRIEF ? { id: "daily-brief", kind: "insight", icon: "bulb", title: "Today's read", body: window.MORNING_BRIEF.body, ask: window.MORNING_BRIEF.ask, when: "Today", sec: "insights" } : null;
const initialFeed = initialProposal ? null : (initialBriefId === "daily-brief" ? dailyBrief : (initialBriefId ? feedList.find((x) => x.id === initialBriefId) : null));
const [sel, setSel] = useState(() => (initialProposal ? itemFromProposal(initialProposal) : initialFeed) || firstNeedsYou);
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); };
const exec = (id) => { onExecute && onExecute(id); setSel(null); };
const decline = (id) => { onDecline && onDecline(id); setSel(null); };
return (
{/* LEFT — the inbox list */}
{/* RIGHT — the selected brief on a raised reading card */}
{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 }) => {
const list = AUTOMATIONS || [];
const [sel, setSel] = useState(() => list.find((a) => a.id === initialId) || list[0] || null);
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 (
{/* LEFT — the automations list */}
{/* RIGHT — the selected automation on a raised reading card */}
{sel ? (
setSel(null)} nav={nav} flash={flash} />
) : }
);
};
const SimpleWebApp = () => {
const [palette, setPaletteState] = useState("graphite"); // web is graphite-first
const [stack, setStack] = useState([]); // push stack: holding / account / card
const [overlay, setOverlay] = useState(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 [confirming, setConfirming] = useState(null); // action in the ConfirmSheet
const [proposals, setProposals] = useState(PROPOSALS);
const [activityExtra, setActivityExtra] = useState([]);
const [toast, setToast] = useState(null);
const [chatInject, setChatInject] = useState(null);
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.setBellCount && window.setBellCount(window.totalBriefCount ? window.totalBriefCount(proposals.length) : proposals.length); }, [proposals]);
const setPalette = (p) => setPaletteState(p);
const flash = (msg) => { setToast(msg); setTimeout(() => setToast((t) => (t === msg ? null : t)), 2600); };
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); setConfirming(null); },
// 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([]); setConfirming(null); setOverlay({ type: "trade", id }); },
ask: (note, reply) => { setChatInject({ note, reply }); setStack([]); setOverlay(null); setConfirming(null); },
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([]); },
openAccount: () => flash("Opening an account — out of prototype scope"),
signOut: () => { setStack([]); setOverlay(null); setConfirming(null); setProposals(PROPOSALS); setActivityExtra([]); flash("Signed out"); },
}), []);
const findProp = (id) => proposals.find((p) => p.id === id) || PROPOSALS.find((p) => p.id === id);
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 };
/* both doors of the ConfirmSheet end here — a completed action lands in Activity */
const onExecuted = (a) => {
if (a.activity) setActivityExtra((xs) => [{ ...a.activity, id: "x" + Date.now(), when: "Just now" }, ...xs]);
if (a.id) setProposals((ps) => ps.filter((p) => p.id !== a.id));
setConfirming(null);
flash((a.kind === "automation" ? "Scheduled · " : "Executed · ") + a.title);
};
const onDeclined = (a, reason) => {
if (a.id) setProposals((ps) => ps.filter((p) => p.id !== a.id));
setConfirming(null);
flash("Declined · " + reason);
};
const review = (p) => p && setConfirming({ ...p, activity: proposalActivity(p) });
// on web, "Review" opens the Briefs UI with that exact brief selected (its
// detail + approve/decline live in the reading pane), rather than a 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) onExecuted({ ...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 askAboutProposal = (a, text) => {
setConfirming(null);
const q = text && text.trim() ? text.trim() : `Question about "${a.title}"`;
nav.ask(q, `Sure — ${a.why || "here's the thinking."} The short version: it moves you toward the mix you set, inside your limits, and nothing runs until you approve. What would you like changed?`);
};
// Esc closes the topmost layer (confirm → sheet → detail)
useEffect(() => {
const onKey = (e) => {
if (e.key !== "Escape") return;
if (txnOverlay) setTxnOverlay(null);
else if (confirming) setConfirming(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, confirming, overlay, stack.length]);
/* the active center page — a selection shifts the center column to this
inline instead of opening a modal. Precedence: confirm > push detail >
overlay sheet. null → the Home pane shows. */
const centerNode = confirming ? (
setConfirming(null)}
onApproved={onExecuted} onDeclined={onDeclined} onAsk={askAboutProposal} />
) : stack.length > 0 ? (
stack.map((v, i) => (
))
) : (overlay && !["profile", "briefs", "automations", "automation", "txn", "receipt"].includes(overlay.type)) ? (
<>
{overlay.type === "holding" && }
{overlay.type === "holdings" && }
{overlay.type === "accounts" && }
{overlay.type === "transfer" && }
{overlay.type === "trade" && }
{overlay.type === "link" && }
{overlay.type === "connect" && }
{overlay.type === "support" && }
{overlay.type === "documents" && }
) : null;
// too narrow for the desktop pillars → block and point to the phone
if (winW < MOBILE_MIN) return ;
// a flow / detail takes over the whole area right of chat (center + Activity),
// so Activity isn't its own column then. Otherwise Activity is a third column
// while it fits; below that it docks BELOW the center (two columns).
const wideEnough = winW >= chatW + actW + CENTER_MIN;
const actVisible = !centerNode && wideEnough; // Activity as its own right column
const docked = !centerNode && !wideEnough; // Activity flows below the center
// Briefs / Automations replace the WHOLE work area including chat — the
// reading pane carries its own thread, so the chat pillar isn't needed (like
// main's WebInbox / Studio Automations).
const fullTakeover = !confirming && stack.length === 0 && !!overlay && (overlay.type === "briefs" || overlay.type === "automations" || overlay.type === "automation");
// Trade / Transfer / Accounts carry their own desktop two-pane layout, so
// they fill the takeover area right of chat; other sheets center in a column
const wideFlow = !confirming && stack.length === 0 && !!overlay && (overlay.type === "trade" || overlay.type === "transfer" || overlay.type === "accounts");
// Trade/Transfer's reused web layout has no close of its own; every other
// hosted sheet (accounts, briefs, details, confirm) carries one already
const paneClose = !confirming && stack.length === 0 && !!overlay && (overlay.type === "trade" || overlay.type === "transfer") ? nav.closeSheet : undefined;
// effective width keeps the center at CENTER_MIN even when a window resize
// (not a drag) leaves the stored chat width too large
const effChatW = actVisible ? chatW : Math.max(CHAT_MIN, Math.min(chatW, winW - CENTER_MIN));
const clampChat = (w) => Math.max(CHAT_MIN, Math.min(CHAT_MAX, Math.min(w, winW - CENTER_MIN - (actVisible ? actW : 0))));
const clampAct = (w) => Math.max(ACT_MIN, Math.min(ACT_MAX, Math.min(w, winW - chatW - CENTER_MIN)));
return (
{/* top bar — menu (left) · wordmark · bell (right) */}
{/* just the wordmark (bigger), like main — masked so it follows the
theme's ink color; no separate glyph */}
{/* quick actions live in the top bar on web (Home hides its own pair) */}
{fullTakeover ? (
/* Briefs / Automations take over the full width (chat included) */
overlay.type === "briefs"
?
:
) : (
{/* 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 */
{txnOverlay?.type === "txn" && setTxnOverlay(null)} nav={nav} />}
{txnOverlay?.type === "receipt" && setTxnOverlay(null)} />}
) : (
/* three columns: Home center + Activity right pillar (resizable) */
<>
)}
)}
{/* 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" && (
<>
)}
{toast && }
);
};
ReactDOM.createRoot(document.getElementById("app")).render();