/* web.jsx — the DESKTOP web shell for Yoshi. Reuses every mobile screen component (home / chat / briefs / accounts / studio / the approval-seam flow / transfer / automations / …) unchanged, and re-lays them out as three persistent pillars: chat (left, resizable) · home (middle) · briefs (right) with a top bar (menu · Home · Studio · Accounts · Trade / Transfer / Agents). Bottom sheets and the push stack become centered modals / column overlays. The nav API matches app.jsx so the child components route identically. */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* lets reused mobile screens render a few desktop-only affordances (e.g. a clearer "Analyzing" title on Studio) without touching the mobile build. */ window.__YOSHI_WEB = true; /* No phone status bar on web: the sheets render `window.StatusBar &&` — leaving it undefined simply omits it. */ /* ============================================================ Top bar ============================================================ */ const STUDIO_VIEWS = [["investments", "Investments"], ["cash", "Cash"], ["debt", "Debt"], ["automations", "Automations"]]; /* Studio top-nav as a dropdown — Investments / Cash / Debt / Automations. */ const StudioNav = ({ main, studioView, nav }) => { const [open, setOpen] = useState(false); const on = main === "studio"; return ( {open && ( <>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
{STUDIO_VIEWS.map(([k, l]) => { const active = on && studioView === k; return ( ); })}
)} ); }; const Wordmark = ({ palette, onClick, color }) => { const id = palette === "bone" ? "wordmarkBlack" : "wordmarkWhite"; const fb = palette === "bone" ? "assets/logo-wordmark-black.png" : "assets/logo-wordmark-white.png"; const src = (window.__resources && window.__resources[id]) || fb; return ( ); }; const PaletteToggle = ({ palette, setPalette }) => { const bone = palette === "bone"; return ( ); }; const TopBar = ({ main, studioView, palette, setPalette, nav }) => { const TradeBtns = [ ["Trade", "trade", () => nav.sheet({ type: "trade" }), "primary"], ["Transfer", "swap", () => nav.sheet({ type: "transfer" }), "ghost"], ["Agents", "easel", () => nav.sheet({ type: "connect" }), "ghost"], ]; const bellCount = window.useBellCount ? window.useBellCount() : 0; return (
nav.tab("home")} color="var(--ink)" />
{TradeBtns.map(([label, icon, on, kind]) => ( {label} ))}
); }; /* ============================================================ Chat pillar — persistent, resizable, never closes ============================================================ */ const ChatPanel = ({ width, setWidth, palette, nav, children }) => { 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 next = Math.max(280, Math.min(900, drag.current.w + (e.clientX - drag.current.x))); setWidth(next); }; const onUp = (e) => { drag.current = null; e.currentTarget.removeAttribute("data-drag"); }; return ( ); }; /* Drag seam on the LEFT edge of the right pillar. Dragging left widens it; it's capped so the center column never drops below centerMin. */ const RightResizer = ({ width, setWidth, chatW, winW, centerMin }) => { 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 maxW = Math.max(300, winW - chatW - centerMin); const next = Math.max(300, Math.min(maxW, drag.current.w - (e.clientX - drag.current.x))); setWidth(next); }; const onUp = (e) => { drag.current = null; e.currentTarget.removeAttribute("data-drag"); }; return
; }; /* ============================================================ WebInbox — the notifications bell, opened as a full-page takeover. Two-pane email layout: the brief list (BriefsBoard) on the left, the selected brief's body (BriefDetail, chromeless) in the reading pane on the right. Carries its own back + close in the top bar. ============================================================ */ const WebInbox = ({ onClose, nav, proposals, onApprove, onExecute, onDecline, initialBriefId, initialBrief, threadApi }) => { const refreshedAt = (() => { try { return parseInt(localStorage.getItem("yoshi_brief_refreshed_at") || "0", 10) || Date.now(); } catch (e) { return Date.now(); } })(); const asOf = new Date(refreshedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); 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: "Last updated " + asOf } : null; const [sel, setSelRaw] = useState(() => initialBrief || (initialBriefId === "daily-brief" ? dailyBrief : null)); // chatting from a Needs-you brief forks the proposal thread INTO the pane const [threadTid, setThreadTid] = useState(null); const setSel = (x) => { setThreadTid(null); setSelRaw(x); }; const itemFromProposal = (p) => ({ id: p.id, kind: "approve", icon: "bolt", title: p.title, body: p.why.split(". ")[0] + ".", value: p.net, tone: p.net >= 0 ? "in" : "out", sec: "needsyou", when: p.agent, agent: p.agent, legs: p.legs, net: p.net, proposal: p }); // mark-as-read advances to the next brief in the catch-up order, like the phone hub const feedList = window.BRIEF_FEED ? window.BRIEF_FEED() : []; 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); }; // approving / declining a Needs-you proposal happens inline in the reading // pane (no modal); clear the pane afterwards so it returns to the empty state. const execProposal = (id) => { onExecute && onExecute(id); setSel(null); }; const declineProposal = (id) => { onDecline && onDecline(id); setSel(null); }; return (
{/* top bar — back + title on the left, close on the right */}
Briefs
{/* LEFT — the list view */} {/* RIGHT — the selected brief's body: a raised reading card on a grey field */}
{sel && threadTid && threadApi ? (
{ const p = threadApi.findProp(id); if (p) { setSel(itemFromProposal(p)); } }} onModify={threadApi.onModify} onPersist={threadApi.onPersist} onClose={() => setThreadTid(null)} />
) : sel ? (
setSel(null)} onClose={onClose} nav={nav} onAdvance={advance} hasNext={hasNext} onExecute={execProposal} onDecline={declineProposal} onAskProposal={threadApi && sel.proposal ? (text) => setThreadTid(threadApi.seedThread(sel.id, text)) : undefined} />
) : (
Select a brief
Pick anything from the list to read it here.
)}
); }; /* ============================================================ AutomationThread — a forked Yoshi chat tied to one automation. Lives in the automations inbox's LEFT pane, the way proposal threads take the chat pillar. ============================================================ */ const AUTO_THREAD_CHIPS = ["Pause it", "Change the amount", "Raise the threshold", "Explain the risk"]; // Yoshi's conversational reply when the user hasn't named a concrete change yet. const autoThreadReply = (a, t) => { const s = t.toLowerCase(); if (/attached/.test(s)) return `Got it. I've read it and tied it to "${a.name}" as context. Ask me anything about it.`; if (/risk|safe|why|explain|exposure/.test(s)) return `"${a.name}" only does this: ${a.summary} It runs on the schedule you approved and stays inside your limits. I flag anything outside the guardrails before it runs.`; if (/pause|stop|turn it off|disable|halt/.test(s)) return `I can pause it. I'll put the change up for you to approve; nothing runs until you turn it back on.`; if (/amount|raise|lower|threshold|limit|change|schedule|less|more/.test(s)) return `Sure. Tell me the new value for "${a.name}", an amount or a threshold, and I'll write up the revised rule for you to approve.`; return `On "${a.name}": ${a.summary} ${a.next}. I can change the amount, the threshold, the schedule, or pause it. What would you like?`; }; // Detect a concrete change in the user's message and draft the revised rule. const proposeAutoChange = (a, text) => { const s = text.toLowerCase(); if (/\b(pause|stop|turn it off|disable|halt)\b/.test(s)) { return { kind: "Pause", from: a.status === "active" ? "Active" : a.status === "watching" ? "Watching" : "Paused", to: "Paused", newSummary: a.summary, newStatus: "paused" }; } const m = text.replace(/,/g, "").match(/\$?\s?(\d+(?:\.\d+)?)\s?(k)?/i); const bareNumber = /^\s*\$?\s?\d[\d.]*\s?k?\s*$/i.test(text.trim()); const hasContext = /\$|amount|threshold|limit|raise|lower|change|buy|invest|move|sweep|above|to\b|by\b/.test(s); if (m && (hasContext || bareNumber)) { let val = parseFloat(m[1]); if (/k/i.test(m[2] || "")) val *= 1000; const newAmt = "$" + val.toLocaleString("en-US"); const old = a.summary.match(/\$[\d,]+(?:\.\d+)?/); const oldAmt = old ? old[0] : "current"; const newSummary = old ? a.summary.replace(old[0], newAmt) : a.summary; return { kind: "Amount", from: oldAmt, to: newAmt, newSummary, newStatus: a.status }; } return null; }; /* the automation pushed up as context — a flat bar attached under the header */ const AutoContextTile = ({ a }) => (
Automation · pinned {a.status === "active" ? "Active" : a.status === "watching" ? "Watching" : "Paused"}
{a.name}
{a.summary}
{a.next}
); /* a drafted change inside the thread — live (accent, reviewable) or applied (greyed) */ const AutoChangeTile = ({ change, done, onReview }) => (
{done ? "Applied" : "Proposed change"}
{change.kind === "Pause" ? "Pause this automation" : "Change the " + change.kind.toLowerCase()}
{change.from} {change.to}
{done ?
Applied to your automation.
: Review change }
); const AutomationThread = ({ a, msgs, typing, onSend, onBack, onReview }) => { const [draft, setDraft] = useState(""); const scrollRef = useRef(null); const liveTileRef = useRef(null); const [tileVisible, setTileVisible] = useState(true); // newest drafted change that hasn't been applied yet const liveIdx = (() => { for (let i = msgs.length - 1; i >= 0; i--) if (msgs[i].kind === "proposal" && !msgs[i].done) return i; return -1; })(); useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, typing]); // once the live change scrolls off, surface a Review shortcut in the header useEffect(() => { const el = liveTileRef.current, root = scrollRef.current; if (!el || !root) { setTileVisible(true); return; } const io = new IntersectionObserver((e) => setTileVisible(e[0].isIntersecting), { root, threshold: 0.01 }); io.observe(el); return () => io.disconnect(); }, [liveIdx, msgs.length]); const send = (t) => { const body = (t != null ? t : draft).trim(); if (!body) return; setDraft(""); onSend(body); }; return (
{a.name}
Yoshi · automation thread
{liveIdx >= 0 && !tileVisible && ( )}
{msgs.map((m, i) => m.kind === "proposal" ?
onReview(i)} />
: )} {typing && }
{AUTO_THREAD_CHIPS.map((q) => ( ))}
send()} placeholder="Message Yoshi about this…" onAttach={(doc) => onSend(`Attached ${doc.name}`)} />
); }; /* ============================================================ StudioAutomationsInbox — the Studio "Automations" view as a full-page two-pane takeover: the automations list on the left, and on the right either the selected automation's detail or, once you chat, a seamless thread with the automation pinned up top. A drafted change pops a focused review screen. ============================================================ */ const StudioAutomationsInbox = ({ onClose, nav, flash, initialThread }) => { const list = AUTOMATIONS || []; const [sel, setSel] = useState(list[0] || null); // Chatting about an automation pushes it up into a pinned context tile and // opens a seamless thread IN THE READING PANE (mirrors a Needs-you proposal). // The list stays on the left for navigation; an approved change pops a review. const [threads, setThreads] = useState({}); const [threadOpen, setThreadOpen] = useState(false); const [autoTyping, setAutoTyping] = useState(false); const [applied, setApplied] = useState({}); // approved rule changes, by automation id const [review, setReview] = useState(null); // { idx } — change under review const [listW, setListW] = useState(396); const listDrag = useRef(null); const view = (a) => (a ? { ...a, ...(applied[a.id] || {}) } : a); const openAuto = (a) => { setSel(a); setThreadOpen(false); setReview(null); }; const askAutomation = (a, text) => { const av = view(a); setThreadOpen(true); setThreads((ts) => ({ ...ts, [a.id]: [...(ts[a.id] || []), { from: "user", t: text }] })); setAutoTyping(true); setTimeout(() => { setAutoTyping(false); const change = proposeAutoChange(av, text); setThreads((ts) => { const arr = [...(ts[a.id] || [])]; if (change) { arr.push({ from: "agent", t: change.kind === "Pause" ? `I've drafted the pause for "${av.name}". Review it whenever you're ready.` : `Here's the revised rule for "${av.name}", ready for you to review.` }); arr.push({ kind: "proposal", change }); } else { arr.push({ from: "agent", t: autoThreadReply(av, text) }); } return { ...ts, [a.id]: arr }; }); }, 1100); }; const applyChange = () => { if (!sel || !review) return; const arr = threads[sel.id] || []; const change = arr[review.idx] && arr[review.idx].change; if (!change) { setReview(null); return; } setApplied((p) => ({ ...p, [sel.id]: { ...(p[sel.id] || {}), summary: change.newSummary, status: change.newStatus } })); setThreads((ts) => { const next = (ts[sel.id] || []).map((m, i) => (i === review.idx ? { ...m, done: true } : m)); next.push({ from: "agent", t: change.kind === "Pause" ? `Done. "${sel.name}" is paused; tell me when to turn it back on.` : `Done. "${sel.name}" now reads ${change.to}. It takes effect on the next run.` }); return { ...ts, [sel.id]: next }; }); flash((change.kind === "Pause" ? "Paused · " : "Updated · ") + sel.name); setReview(null); }; // arriving from elsewhere (e.g. an automation opened in the Stream pillar): // land with that automation selected, opening the thread if a message seeded it useEffect(() => { if (!initialThread) return; const a = list.find((x) => x.id === initialThread.id); if (!a) return; setSel(a); if (initialThread.text) askAutomation(a, initialThread.text); else { setThreadOpen(false); setReview(null); } }, [initialThread && initialThread.key]); const build = () => nav.ask( "Build a new automation", "Sure. Tell me the rule in plain words, something like \"move anything over $20k in Checking to Savings\" or \"buy $200 of VTI every payday.\" I'll set it up within your limits and show you the first run before it executes." ); return (
Automations
{/* LEFT — the automations list, or the open automation's thread (resizable) */} {/* RIGHT — the selected automation's detail, presented exactly like the briefs reading pane: a raised square card centered on a lighter field. */}
{sel ? (
{threadOpen ? ( askAutomation(sel, t)} onBack={() => setThreadOpen(false)} onReview={(idx) => setReview({ idx })} /> ) : ( setSel(null)} nav={nav} flash={flash} onThread={(t) => askAutomation(sel, t)} /> )}
) : (
Select an automation
Pick a rule to see its performance, run history, and controls.
)}
{/* change review — a focused approval screen for the drafted change */} {review && sel && (() => { const change = (threads[sel.id] || [])[review.idx] && (threads[sel.id] || [])[review.idx].change; if (!change) return null; const av = view(sel); const lbl = { fontFamily: "var(--f-display)", fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", flex: "none" }; const valS = { fontFamily: "var(--f-mono)", fontSize: 13, textAlign: "right", fontVariantNumeric: "tabular-nums" }; return (
setReview(null)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)", animation: "scrim-in 200ms ease both" }} />
Review change
{change.kind === "Pause" ? "Pause this automation" : "Change the " + change.kind.toLowerCase()}
{av.name}
Current{change.from}
New{change.to}
{change.kind === "Pause" ? "Nothing runs until you turn it back on." : change.newSummary}
setReview(null)}>Cancel {change.kind === "Pause" ? "Pause automation" : "Apply change"}
); })()}
); }; /* ============================================================ Toast ============================================================ */ const Toast = ({ msg }) => (
{msg}
); /* ============================================================ Modal host — centers a fixed-size "stage" the reused overlays render into. The overlays position themselves with absolute/inset-0/bottom anchoring, so the stage is their positioning context (just like the phone screen was). ============================================================ */ const Modal = ({ onClose, width = 500, height, bare, children, z = 1200 }) => (
{children}
); /* Trade / Transfer / Agents render as full-screen takeovers (not centered modals): a full-bleed surface with the flow in a centered, hairline-framed column. The reused sheets keep their own header + close. */ const WebFlowTakeover = ({ onClose, children }) => (
{children}
); /* Trade / Transfer / Agents as a PAGE beside the persistent chat: the flow takes the main area (a centered, hairline-framed column), chat stays left. The reused sheet is absolute inset:0 — the relative column hosts it. */ const WebFlowPane = ({ children, wide, onClose }) => (
{onClose && } {wide ? ( /* wide flows (trade / transfer) span the full area between the chat seam and the right edge; their internal layout handles the columns */
{children}
) : (
{children}
)}
); /* one quick-action row in the Accounts right rail */ const AcctAction = ({ icon, label, sub, onClick }) => ( ); /* the Accounts right pillar — quick actions that open the page flows */ const AccountsActPanel = ({ nav }) => ( ); /* canned backtest for a drafted rule — deterministic from the title */ const btStatsFor = (s) => { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return { runs: 4 + h % 6, pl: 320 + h % 900, dd: 4 + h % 9 }; }; const DraftBacktest = ({ title, onAction }) => { const bt = btStatsFor(title); const [acted, setActed] = useState(null); const act = (kind) => { if (acted) return; setActed(kind); onAction(kind === "paper" ? "It's running in your paper account now. I'll report each simulated trigger in your stream, and after two weeks you can turn it on for real in one tap." : "Drafted. The finished rule, with its caps, is waiting for your approval before anything runs."); }; const stat = (k, v, c) => (
{k}
{v}
); return (
Backtest · last 12 months
{stat("Triggers", bt.runs)} {stat("Net P/L", "+" + usd(bt.pl, 0), "var(--accent-pos)")}
Worst drawdown
−{bt.dd}%
); }; /* a fresh thread forked into the chat pillar — used by "Draft an automation" and other idea-starters: pinned context up top, the conversation below. */ const InlineThread = ({ title, seedQ, seedA, onClose }) => { const [msgs, setMsgs] = useState([{ from: "user", t: seedQ }]); const [typing, setTyping] = useState(true); const [draft, setDraft] = useState(""); const scrollRef = useRef(null); useEffect(() => { const t = setTimeout(() => { setTyping(false); setMsgs((m) => [...m, { from: "agent", t: seedA }, { kind: "bt" }]); }, 950); return () => clearTimeout(t); }, []); useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, typing]); const send = (t) => { const body = (t != null ? t : draft).trim(); if (!body) return; setDraft(""); setMsgs((m) => [...m, { from: "user", t: body }]); setTyping(true); setTimeout(() => { setTyping(false); setMsgs((m) => [...m, { from: "agent", t: `Noted — I'll fold that into the draft. I'll show you the full rule with caps before anything turns on.` }]); }, 1000); }; return (
{title}
Yoshi · new thread
◆ Draft · pinned
{title}
Nothing runs until you approve the finished rule.
{msgs.map((m, i) => m.kind === "bt" ? setMsgs((mm) => [...mm, { from: "agent", t }])} /> : )} {typing && }
send()} placeholder="Message Yoshi about this…" onAttach={(doc) => send(`Attached ${doc.name}`)} />
); }; /* push-stack detail (holding / account / card) wants a full-height flex column with a positioned ancestor — give it exactly that inside the stage. */ const DetailFrame = ({ children }) => (
{children}
); /* a small floating close affordance for detail / profile modals (the reused detail screens carry their own Back, but a dismiss for the whole modal helps) */ const ModalClose = ({ onClose }) => ( ); /* ============================================================ App ============================================================ */ /* a few extra real proposals so the desktop "Needs you" coverflow has depth. Web-only (added to the initial deck here, not in shared data.jsx). */ const WEB_EXTRA_PROPOSALS = [ { id: "pw1", agent: "Yoshi agent", channel: "in-app", title: "Harvest a tax loss", why: "AMD is down enough to sell at a loss and offset gains you've realized this year. You'd trim your tax bill, and you can rebuy a similar fund after 31 days.", net: 318.00, settles: "Tomorrow", kind: "trade", cat: "investments", legs: [["SELL", "AMD", "9 sh", "\u2248 $1,520"], ["BUY", "QQQ", "3 sh", "\u2248 $1,537"]] }, { id: "pw2", agent: "Cash agent", channel: "in-app", title: "Top up your emergency fund", why: "Your Savings dipped below your six-month target. Moving $1,500 from Checking refills the buffer, and you still keep enough cash on hand for the month.", net: 0, settles: "Today", kind: "transfer", cat: "cash", legs: [["MOVE", "Checking \u20228841", "To Savings", "$1,500"], ["AFTER", "Savings \u20222207", "Balance", "$65,500"]] }, { id: "pw3", agent: "External agent", channel: "whatsapp", title: "Trim SOL into cash", why: "Solana has run up and is now a large slice of your crypto. Selling a little locks in some of the gain and keeps the sleeve closer to your target weight.", net: 1880.00, settles: "in 2 days", kind: "trade", cat: "investments", legs: [["SELL", "SOL", "10", "\u2248 $1,884"], ["TO", "Cash \u20228841", "Proceeds", "$1,884"]] }, ]; const WEB_PROPOSALS = [...PROPOSALS, ...WEB_EXTRA_PROPOSALS]; const App = () => { // Web is graphite-only (light mode removed); don't read the mobile palette pref. const [palette, setPaletteState] = useState("graphite"); const [main, setMain] = useState("home"); // home | studio | accounts const [studioView, setStudioView] = useState(null); const [stack, setStack] = useState([]); // push: holding / account / card const [overlay, setOverlay] = useState(null); // centered sheet const [profileOpen, setProfileOpen] = useState(false); const [menuPage, setMenuPage] = useState(null); // menu drawer's right-hand page: "settings" | "documents" const [proposals, setProposals] = useState(WEB_PROPOSALS); useEffect(() => { window.setBellCount && window.setBellCount(proposals.length); }, [proposals]); const [completed, setCompleted] = useState(COMPLETED); const [toast, setToast] = useState(null); const [chatInject, setChatInject] = useState(null); const [autoSeed, setAutoSeed] = useState(null); // deep-link: automations page + open thread const [threads, setThreads] = useState({}); const [extraProposals, setExtraProposals] = useState([]); const [expired, setExpired] = useState([]); const MOD_SEQ = useRef(0); const [hasCard, setHasCard] = useState(() => localStorage.getItem("yoshi_card") === "1"); const [chatW, setChatW] = useState(() => { const v = parseInt(localStorage.getItem("yoshi_web_chatw") || "0", 10); return v >= 280 && v <= 900 ? v : 440; }); const [rightW, setRightW] = useState(() => { const v = parseInt(localStorage.getItem("yoshi_web_rightw") || "0", 10); return v >= 300 && v <= 560 ? v : 360; }); useEffect(() => { document.getElementById("app").setAttribute("data-palette", palette); }, [palette]); const setPalette = (p) => { setPaletteState(p); localStorage.setItem("yoshi_palette", p); }; const setChatWidth = (w) => { setChatW(w); localStorage.setItem("yoshi_web_chatw", String(Math.round(w))); }; const setRightWidth = (w) => { setRightW(w); localStorage.setItem("yoshi_web_rightw", String(Math.round(w))); }; const getCard = () => { localStorage.setItem("yoshi_card", "1"); setHasCard(true); }; const flash = useCallback((msg) => { setToast(msg); setTimeout(() => setToast((t) => (t === msg ? null : t)), 2600); }, []); const nav = useMemo(() => ({ tab: (t) => { setStack([]); setOverlay(null); if (t === "profile") { setProfileOpen(true); setMenuPage(null); return; } setProfileOpen(false); setMenuPage(null); if (t === "chat") return; // chat is always-on (left pillar) if (t === "trade") { setOverlay({ type: "trade" }); return; } setMain(["home", "studio", "accounts"].includes(t) ? t : "home"); }, studio: (view) => { setStack([]); setOverlay(null); setProfileOpen(false); setStudioView(view || "investments"); setMain("studio"); }, push: (v) => setStack((s) => [...s, v]), pop: () => setStack((s) => s.slice(0, -1)), sheet: (o) => { setProfileOpen(false); setMenuPage(null); setOverlay(o); }, closeSheet: () => setOverlay(null), closeMenu: () => { setProfileOpen(false); setMenuPage(null); }, // open a page beside the menu drawer (drawer stays open), like the Agents pane menuPage: (p) => { setProfileOpen(true); setMenuPage(p); }, ask: (note, reply) => { setChatInject({ note, reply }); setStack([]); setOverlay(null); setProfileOpen(false); setStudioView((v) => (v === "automations" ? "investments" : v)); }, automation: (id) => { setStack([]); setOverlay({ type: "automation", id }); }, // jump to the Studio Automations page with this automation's thread open automationChat: (id, text) => { setStack([]); setOverlay(null); setProfileOpen(false); setAutoSeed({ id, text, key: Date.now() }); setStudioView("automations"); setMain("studio"); }, signOut: () => { setProfileOpen(false); setStack([]); setOverlay(null); setProposals(WEB_PROPOSALS); setCompleted(COMPLETED); setHasCard(false); localStorage.removeItem("yoshi_card"); setMain("home"); flash("Signed out"); }, }), [flash]); const openApproval = (id) => setOverlay({ type: "approve", id }); // "Build a basket" — the generated basket lands as a real proposal in Needs you const proposeBasket = (b, amount) => { const id = "pb" + Date.now(); const top = b.holdings.slice(0, 3).map((h) => ["BUY", h.ticker, h.weight + "%", "≈ " + usd(amount * h.weight / 100, 0)]); const restW = b.holdings.slice(3).reduce((s, h) => s + h.weight, 0); const legs = restW > 0 ? [...top, ["BUY", "+" + (b.holdings.length - 3) + " more", restW + "%", "≈ " + usd(amount * restW / 100, 0)]] : top; setProposals((ps) => [{ id, agent: "Yoshi agent", channel: "in-app", title: "Buy basket · " + b.name, why: `Funds your "${b.name}" basket across ${b.holdings.length} positions, weighted as generated. No single name above ${b.cap}%.`, net: -amount, settles: "Tomorrow", kind: "trade", cat: "investments", legs }, ...ps]); return id; }; // remember the last non-automations Studio view so closing the Automations // takeover returns the user to where they were. const lastStudioMainView = useRef("investments"); useEffect(() => { if (["investments", "cash", "debt"].includes(studioView)) lastStudioMainView.current = studioView; }, [studioView]); // Esc closes the topmost layer (sheet → detail → profile). useEffect(() => { const onKey = (e) => { if (e.key !== "Escape") return; if (overlay) setOverlay(null); else if (stack.length) setStack([]); else if (profileOpen) setProfileOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [overlay, stack.length, profileOpen]); // ---- proposal threads (identical logic to the mobile shell) ---------------- const findProp = (id) => proposals.find((x) => x.id === id) || extraProposals.find((x) => x.id === id) || PROPOSALS.find((x) => x.id === id); 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 hasThread = (id) => !!threads[tidFor(id)]; const scaleStr = (s, f) => String(s).replace(/\d[\d,]*(\.\d+)?/g, (mm) => { const n = parseFloat(mm.replace(/,/g, "")) * f; if (n >= 1000) return Math.round(n).toLocaleString(); if (n >= 1) return (Math.round(n * 100) / 100).toLocaleString(); return String(Math.round(n * 1000) / 1000); }); const makeRevised = (p) => { MOD_SEQ.current += 1; const f = 0.5; return { ...p, id: p.id + "_m" + MOD_SEQ.current, modifiedFrom: p.id, net: Math.round(p.net * f * 100) / 100, why: "Revised down per your note: about half the original size, same direction. Smaller market impact, and it still moves you toward your target.", legs: p.legs.map((l) => l.map((cell, i) => (i >= 2 ? scaleStr(cell, f) : cell))), }; }; 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 openThread = (pid, userMsg) => { const tid = seedThread(pid, userMsg); setOverlay({ type: "thread", 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 onApproved = (id) => { const p = proposals.find((x) => x.id === id); const rest = proposals.filter((x) => x.id !== id); setProposals(rest); setCompleted((cs) => [{ id: "ex_" + id, title: p.title, detail: p.legs.map((l) => l[1]).join(" · "), when: "May 29", net: p.net, by: p.agent }, ...cs]); if (rest[0]) setOverlay({ type: "approve", id: rest[0].id }); else setOverlay(null); flash("Executed · " + p.title); }; const onDeclined = (id, reason) => { const rest = proposals.filter((x) => x.id !== id); setProposals(rest); if (rest[0]) setOverlay({ type: "approve", id: rest[0].id }); else setOverlay(null); flash("Declined · " + reason); }; const onModified = (id, note) => { const p = proposals.find((x) => x.id === id); setOverlay(null); setChatInject({ note, reply: `Got it — on "${p.title}": "${note}". Let me take a look and come back with an updated proposal you can approve.` }); flash("Sent back to Yoshi"); }; // ---- the active main-column screen ---------------------------------------- const sv = ["investments", "cash", "debt"].includes(studioView) ? studioView : "investments"; const StudioViewComp = { investments: window.InvestmentsView, cash: window.CashView, debt: window.DebtView }[sv]; const studioAutomations = main === "studio" && studioView === "automations"; // Both side pillars (chat on the left, the right pillar) are user-resizable // via drag seams. The right pillar is NOT manually dockable — it docks below // the center column automatically, and only when the window is too narrow to // hold all three at a comfortable center width. const [winW, setWinW] = useState(() => window.innerWidth); useEffect(() => { const onResize = () => setWinW(window.innerWidth); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const studioKey = main === "studio" ? "studio:" + sv : main; // the center pillar is prioritized: it must keep at least CENTER_MIN px. When // chat + right + that minimum no longer fit, the right pillar drops below. const CENTER_MIN = 420; const tooNarrow = winW < chatW + rightW + CENTER_MIN; const pillarDocked = tooNarrow; const mainScreen = main === "home" ? setOverlay({ type: "briefs" })} /> : main === "studio" ?
{sv === "cash" ? "Cash" : sv === "debt" ? "Debt" : "Investments"} Studio
{StudioViewComp && }
: ; // right pillar: Stream on home, the Studio "Act" surface on studio (inv/cash/debt) const rightPillar = main === "home" ? : main === "studio" ? : main === "accounts" ? : null; // inline form of the same pillar, for when it docks below the center column const rightInline = main === "home" ? : main === "studio" ? : main === "accounts" ? : null; // Trade / Transfer / Agents open as a page beside the persistent chat (not a // modal): the flow takes the main area, chat stays on the left. const flowType = overlay && ["trade", "transfer", "connect", "basket"].includes(overlay.type) ? overlay.type : null; const closeAutomations = () => nav.studio(lastStudioMainView.current || "investments"); const detail = stack[stack.length - 1]; return ( {studioAutomations ? ( ) : overlay && overlay.type === "briefs" ? ( { const p = proposals.find((x) => x.id === id); if (!p) return; setProposals((ps) => ps.filter((x) => x.id !== id)); setCompleted((cs) => [{ id: "ex_" + id, title: p.title, detail: p.legs.map((l) => l[1]).join(" \u00b7 "), when: "May 29", net: p.net, by: p.agent }, ...cs]); flash("Executed \u00b7 " + p.title); }} onDecline={(id) => { setProposals((ps) => ps.filter((x) => x.id !== id)); flash("Declined"); }} initialBriefId={overlay.brief} initialBrief={overlay.briefData} threadApi={{ threads, seedThread, findProp, isExpired, onModify: reviseInThread, onPersist: persistThread }} /> ) : ( <>
{overlay && ["approve", "thread", "draft"].includes(overlay.type) ? ( ) : ( setChatInject(null)} /> )} {flowType ? ( {flowType === "trade" && } {flowType === "transfer" && } {flowType === "connect" && } {flowType === "basket" && setOverlay({ type: "approve", id })} />} ) : ( <>
{detail ? ( /* push-stack detail (holding / account / card) renders center-screen; its own NavBar back arrow pops back to the underlying view */
{detail.type === "holding" && } {detail.type === "account" && } {detail.type === "card" && }
) : (
{mainScreen}
)} {pillarDocked && rightInline && ( /* docked: the panel flows on as a continuation of the center column */
{rightInline}
)}
{!pillarDocked && rightPillar && (
{rightPillar}
)} )}
)} {/* ---- Menu drawer — pulls out from the top-left hamburger, takes over the wordmark + nav. Hamburger morphs to an X (in the drawer header). ---- */} {profileOpen && ( <>
{menuPage && ( /* the page beside the drawer — same centered, framed look as Agents */
{menuPage === "settings" && setMenuPage(null)} />} {menuPage === "documents" && setMenuPage(null)} nav={nav} flash={flash} />}
)} )} {/* ---- push-stack detail now renders center-screen in the main column ---- */} {/* ---- Notifications bell — now rendered in the body below the persistent toolbar (see above) ---- */} {/* ---- Trade / Transfer / Agents now render inline as a page beside chat (see flowType + WebFlowPane in the pillars above) ---- */} {/* ---- other sheets / flows (centered modal) ---- */} {overlay && !["briefs", "trade", "transfer", "connect", "approve", "thread", "draft"].includes(overlay.type) && (() => { const close = nav.closeSheet; const wide = overlay.type === "documents" ? 560 : overlay.type === "txn" ? 460 : 500; return ( {overlay.type === "support" && } {overlay.type === "documents" && } {overlay.type === "link" && } {overlay.type === "txn" && } {overlay.type === "automation" && a.id === overlay.id)} onClose={close} nav={nav} flash={flash} />} ); })()} {toast && } ); }; ReactDOM.createRoot(document.getElementById("app")).render();