{/* header strip — same geometry as NavBar so the bell sits identically across tabs */}

{/* BAND 1 · net worth + sparkline */}

Yoshi balance

{nw.label.charAt(0).toUpperCase() + nw.label.slice(1)}

{window.__YOSHI_WEB && window.WebNetWorthChart ? ( { setRange(r); setMarker(null); setScrubVal(null); }} onScrub={(v) => setScrubVal(v)} /> ) : ( <>

{(() => { const chartColor = nw.data[nw.data.length - 1] >= nw.data[0] ? "var(--accent-pos)" : "var(--signal-neg)"; return setScrubVal(idx == null ? null : nw.data[idx])} padY={4} range={range} />; })()}

{/* horizon toggle, understated text buttons, no heavy chrome */}

{NW_RANGES.map((r) => { const on = r === range; return ( ); })}

)} {/* marker tooltip, tap to open the automation in Stream */} {marker != null && nw.markers[marker] &&

}

{/* allocation row */} {/* quick actions — web has these in the top bar */} {!window.__YOSHI_WEB &&

nav.tab("trade")} /> nav.sheet({ type: "transfer" })} />

} {/* BAND 2 · pending, a scroll-snap carousel of proposals */}

Needs you

{proposals.length === 0 ?

You're all caught up

: proposals.length === 1 ?

onApprove(proposals[0].id)} />

: <>

{proposals.map((_, i) => )}

}

{/* BAND 3 · Stream — on web the stream lives in its own right pillar (StreamPanel, mounted by web.jsx); inline here on mobile only. */} {!window.__YOSHI_WEB && }

); }; const QuickAction = ({ icon, logo, label, onClick }) => ; const Allocation = ({ nav }) => { const segs = [ ["Cash", CASH_TOTAL, "var(--alloc-cash)", false, "cash"], ["Stocks", INVEST_TOTAL, "var(--alloc-invest)", false, "investments"], ["Crypto", CRYPTO_TOTAL, "var(--alloc-crypto)", false, "investments"]]; const total = segs.reduce((s, x) => s + x[1], 0); return (

{segs.map(([l, v, c]) =>

{window.__YOSHI_WEB && {usd(v)}}

)}

{segs.map(([l, v, c, debt, sv]) => )}

); }; const PendingCard = ({ p, onReview, fill }) => { const web = window.__YOSHI_WEB; const amountLabel = p.amountLabel || (p.kind === "trade" ? "Trade amount" : "Transfer amount"); const amountValue = p.amount || usd(Math.abs(p.net || 0), 2); return (

{p.agent}

{p.title}

{p.why}

{amountLabel} {amountValue}

{p.cashImpact &&

{p.cashImpactLabel || "Cash impact"} {p.cashImpact}

}

Review

); }; /* ---- pending wheel · a flat 2D carousel of proposals ---------------------- Cards slide horizontally; drag to scroll, neighbours peek in slightly scaled and dimmed at the edges, the active card sits centred. Snaps on release. */ const WHEEL_W = 264; /* A native horizontal scroll-snap carousel, scroll/swipe left or right to move between proposals; each card snaps to centre. Neighbours peek, scaled + dimmed by their distance from centre. Cards stretch to equal height so the CTA always fits. */ const PendingWheel = ({ proposals, onReview, onActive }) => { const N = proposals.length; const web = window.__YOSHI_WEB; const CARD_W = web ? 318 : WHEEL_W; // wider, squarer tiles on web const ref = useRef(null); const [sx, setSx] = useState(0); const STRIDE = CARD_W + 14; const onScroll = () => { const el = ref.current;if (!el) return; setSx(el.scrollLeft); onActive && onActive(Math.max(0, Math.min(N - 1, Math.round(el.scrollLeft / STRIDE)))); }; return (

{proposals.map((p, i) => { const off = i - sx / STRIDE; const ao = Math.min(1, Math.abs(off)); return (

onReview(p.id)} fill />

); })}

); }; const NothingPending = ({ last }) =>

All clear · last move

{last.title}

{last.detail} · {last.when}

; /* ---- coming-up row (forward-looking schedule, no icon) ------------------- */ /* ---- leading category icon · helps scan the feed by type ----------------- Agent/automation rows carry the Yoshi mark; everything else gets a schematic category glyph in a quiet hairline tile. */ const RowIcon = ({ icon, auto }) => { const yoshi = auto || icon === "bolt"; const p = useTheme(); return ( {yoshi ? : } ); }; const ComingRow = ({ c, last, nav, onDetail }) => { const isAuto = !!c.autoId; const open = () => { // web Stream pillar: everything opens in-pillar (full detail) if (onDetail) { onDetail(isAuto ? { kind: "auto", id: c.autoId } : { kind: "txn", tx: c }); return; } isAuto ? nav.sheet({ type: "automation", id: c.autoId }) : nav.sheet({ type: "txn", tx: c }); }; return ( ); }; /* ---- recent-activity transaction row (flat ledger, no pill) --------------- */ const txnAutomationId = (t) => t.autoId || null; const AutomationTxnButton = ({ tx, onClick }) => ; const activityTimestamp = (t) => t.time ? `${t.when} · ${t.time}` : t.when; const TxnRow = ({ t, last, nav, onDetail }) => ; /* ---- transaction / scheduled-item detail · a receipt-style bottom sheet --- */ const TXN_CATEGORY = { receipt: "Spending", down: "Income", swap: "Transfer", trade: "Investment", bolt: "Automation" }; const CATEGORY_OPTIONS = ["Spending", "Groceries", "Dining", "Bills", "Travel", "Shopping", "Income", "Transfer", "Investment", "Health", "Entertainment", "Subscriptions"]; const isExternalLinkedTransaction = (tx) => tx.accountScope === "external"; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; /* Past activity for this merchant / transaction type — a short statement of prior occurrences. Recurring charges repeat at the same amount; variable merchants vary a little (deterministic per merchant, so it stays stable). */ const txHistory = (tx, amount) => { const recurring = /subscription|autopay|membership|recurring/i.test(`${tx.detail || ""} ${tx.sub || ""}`); const baseM = (() => { const i = MONTHS.findIndex((m) => new RegExp(m, "i").test(tx.when || "")); return i >= 0 ? i : 4; })(); const dayM = (tx.when || "").match(/\b(\d{1,2})\b/); const day = dayM ? dayM[1] : "8"; const seed = [...(tx.title || "x")].reduce((a, c) => (a * 31 + c.charCodeAt(0)) >>> 0, 7); const mag = Math.abs(amount) || 0; const rows = []; for (let i = 1; i <= 3; i++) { const mi = ((baseM - i) % 12 + 12) % 12; const jitter = recurring ? 0 : (((seed >> (i * 4)) % 31) - 15) / 100; // ±15% rows.push({ when: `${MONTHS[mi]} ${day}`, amt: Math.round(mag * (1 + jitter) * 100) / 100 }); } return { recurring, rows, mag }; }; const TxnHistory = ({ tx, amount }) => { const { recurring, rows, mag } = txHistory(tx, amount); if (!rows.length) return null; const neg = amount < 0; return (

Past activity {recurring ? "Recurring · monthly" : "Recent"}

{rows.map((r, i) =>

{r.when} {mag > 0 ? {neg ? "−" : "+"}{usd(r.amt)} : Ran}

)}

); }; const TransactionCategoryPicker = ({ category, onSelect }) => { const options = CATEGORY_OPTIONS.includes(category) ? CATEGORY_OPTIONS : [category, ...CATEGORY_OPTIONS]; return (

); }; const EditableCategoryRow = ({ category, open, onToggle, onSelect }) => ( <> {open && } ); const cleanTransactionDetail = (value) => String(value || "").replace(/\s+/g, " ").trim(); const splitTransactionDetail = (value) => cleanTransactionDetail(value).split(/\s+·\s+/).map(cleanTransactionDetail).filter(Boolean); const transactionAccountLike = (value) => /(account|brokerage|cash|reserve|checking|savings|card|ira|yoshi|schwab|chase|coinbase|••|··)/i.test(cleanTransactionDetail(value)); const transactionMethodLike = (value) => /(ach|wire|zelle|order|transfer|deposit|autopay|auto-invest|instant|market|reinvest|round-ups|subscription|bill pay|direct deposit|apy|payroll|notional|received|card)/i.test(cleanTransactionDetail(value)); const splitTransactionMethodAccount = (value) => { const parts = splitTransactionDetail(value); if (parts.length < 2) return { method: cleanTransactionDetail(value), account: "" }; const first = parts[0]; const rest = parts.slice(1).join(" · "); if (transactionAccountLike(first) && !transactionAccountLike(rest) && transactionMethodLike(rest)) return { method: rest, account: first }; return { method: first, account: rest }; }; const inferredTransactionAccount = (tx, category) => { const scope = tx.accountScope || tx.scope; if (scope === "card" || /card/i.test(tx.detail || "")) return cleanTransactionDetail(tx.detail || tx.acct || "Yoshi Card"); if (scope === "yoshi") { if (category === "Trade" || category === "Investment") return "Yoshi Brokerage"; if (category === "Reserve") return "Yoshi Reserve"; return "Yoshi Cash"; } if (scope === "external" && tx.acct) return cleanTransactionDetail(tx.acct); return ""; }; const transactionRouteFromText = (value) => { const text = cleanTransactionDetail(value); if (!text) return ""; if (text.includes("→")) return text; const normalized = text.replace(/\s+to\s+/i, " → "); return normalized.includes("→") ? normalized : ""; }; const transactionRouteAccountName = (value) => { const name = cleanTransactionDetail(value); if (/^yoshi$/i.test(name) || /^cash$/i.test(name)) return "Yoshi Cash"; return name; }; const transactionRouteFromTitle = (title, account, amount) => { const source = transactionRouteAccountName(account); if (!source) return ""; const moveMatch = cleanTransactionDetail(title).match(/^Move\s+\$[\d,.]+\s+to\s+(.+)$/i); const transferMatch = cleanTransactionDetail(title).match(/^Transfer to\s+(.+)$/i); const target = cleanTransactionDetail((moveMatch && moveMatch[1]) || (transferMatch && transferMatch[1])); if (!target) return ""; return amount >= 0 ? `${target} → ${source}` : `${source} → ${target}`; }; const transactionTransferAccountRoute = (tx, account, category) => { if (!category.startsWith("Transfer")) return account; const amount = tx.net != null ? tx.net : tx.tone === "out" ? -tx.amount : tx.amount; const explicitRoute = transactionRouteFromText(tx.accountRoute || tx.route || tx.detail || tx.acct || account); if (explicitRoute) return explicitRoute; const titleRoute = transactionRouteFromTitle(tx.title, account, amount); if (titleRoute) return titleRoute; if (category.startsWith("Transfer") && account && !account.includes("→") && tx.title) { const title = cleanTransactionDetail(tx.title).replace(/^Canceled ·\s*/, ""); return amount >= 0 ? `${title} → ${account}` : `${account} → ${title}`; } return account; }; const transactionDetailRows = (tx, category) => { let method = cleanTransactionDetail(tx.method || tx.rail || tx.type); let account = cleanTransactionDetail(tx.account || tx.accountName || ""); const acctValue = cleanTransactionDetail(tx.acct); if (acctValue) { const split = splitTransactionMethodAccount(acctValue); if (split.account) { if (!method) method = split.method; account = account || split.account; } else if (!account) { account = acctValue; } } const detailValue = cleanTransactionDetail(tx.detail || tx.sub); if (detailValue) { const split = splitTransactionMethodAccount(detailValue); if (!method) method = split.method; if (!account) account = split.account || (transactionAccountLike(detailValue) && !transactionMethodLike(detailValue) ? detailValue : ""); } account = account || inferredTransactionAccount(tx, category); account = transactionTransferAccountRoute(tx, account, category); if (method && account && method.toLowerCase() === account.toLowerCase()) account = ""; return { method, account }; }; const TxnDetailSheet = ({ tx, onClose, nav, onAutomation, backLabel, onCancel }) => { const pending = !!tx.pending; // in motion — settles into the ledger later const upcoming = tx.net == null; // Pending items show when the instruction was submitted, not a speculative // settlement time. Completed transactions use their ledger occurrence. const actionDate = tx.occurredOn || tx.when; const amount = tx.net != null ? tx.net : tx.tone === "out" ? -tx.amount : tx.amount; const instantAvailable = Math.max(tx.instantAvailable || 0, 0); const pendingAmount = Math.max(tx.pendingAmount || 0, 0); const fundingAvailable = pending && instantAvailable > 0; const fundingSplit = pending && instantAvailable > 0 && pendingAmount > 0; const defaultCategory = directionalCategory(tx.category || TXN_CATEGORY[tx.icon] || (tx.cat ? tx.cat.charAt(0).toUpperCase() + tx.cat.slice(1) : "Activity"), amount); const [category, setCategory] = useState(defaultCategory); const [categoryPickerOpen, setCategoryPickerOpen] = useState(false); const categoryEditable = !upcoming && isExternalLinkedTransaction(tx); const automationId = txnAutomationId(tx); const { method, account } = transactionDetailRows(tx, category); const ask = () => {onClose();nav.ask(`Tell me about this ${upcoming ? "scheduled item" : "transaction"}: ${tx.title}.`, `Here's what I have on "${tx.title}" — ${upcoming ? "it's scheduled" : "it settled"} ${transactionStamp(tx)}, ${amount >= 0 ? "a credit" : "a debit"} of ${usd(Math.abs(amount))} via ${method || category}${account ? ` in ${account}` : ""}. Want me to find related activity, set an alert, or categorize it differently?`);}; const openAutomation = () => { if (!automationId) return; if (onAutomation) { onAutomation(automationId); return; } onClose(); nav && nav.automation && nav.automation(automationId); }; const changeCategory = (next) => { setCategory(next); setCategoryPickerOpen(false); }; return ( <> {!window.__YOSHI_WEB &&

}

{!window.__YOSHI_WEB &&

}

{tx.title} {automationId && }

{/* close: the app's standard circle X on web; plain glyph on mobile. No back breadcrumb — the X returns to the list it replaced. */}

0} color={amount > 0 ? "var(--accent-pos)" : "var(--ink)"} dim="var(--ink-3)" />

{pending ? (fundingAvailable ? "Deposit pending" : "Pending") : `${upcoming ? "Scheduled" : "Settled"} · ${transactionStamp(tx)}`} {fundingAvailable && !fundingSplit && (

Available instantly

)}

{fundingSplit && (

{usd(instantAvailable)}

Available instantly

{usd(pendingAmount)}

Pending until settled

)}

{/* a one-time automation is explicit about what kicks it off */} {(pending || upcoming) && tx.trigger && } {!upcoming && } {categoryEditable ? setCategoryPickerOpen((open) => !open)} onSelect={changeCategory} /> : } {method && } {account && } = 0 ? "+" : "−"}${usd(Math.abs(amount))}`} last />

{/* one-time / in-flight items have no past activity — only settled transactions show a history */} {!pending && } {/* pending items note whether they can still be pulled back */} {(pending || upcoming) && (tx.cancelNote || tx.noCancelNote) && (

{onCancel ? tx.cancelNote : tx.noCancelNote}

)} {onCancel ? (

{tx.cancelLabel || (tx.category === "Transfer" ? "Cancel transfer" : "Cancel order")} {/* automation runs route to the rule — its detail carries the thread, so Manage is the door to talking about it */} {automationId ? Manage : Ask Yoshi}

) : (

Ask Yoshi about this

)}

); }; /* ---- automation status pill + row ----------------------------------------- */ const StatusPill = ({ status }) => { const map = { active: ["●", "Active", "var(--accent)"], watching: ["○", "Watching", "var(--ink-3)"], paused: ["○", "Paused", "var(--ink-3)"] }; const [dot, label, color] = map[status] || map.active; return ( {dot}{label} ); }; const AutomationRow = ({ a, onOpen }) => ; /* ---- automation detail sheet ---------------------------------------------- */ /* ============================================================ Automation chat — the in-sheet thread used on MOBILE (web routes to the Automations inbox instead). Pinned context attaches under the header, chat runs below, and a concrete change drafts a proposal you review + approve. ============================================================ */ const AUTO_CHIPS_M = ["Pause it", "Change the amount", "Raise the threshold", "Explain the risk"]; const formatAutomationAmount = (value) => "$" + value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const autoReply = (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?`; }; const autoDraftChange = (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" }; } // pull every amount from the note and prefer the one that isn't the current // amount, so "instead of $500, make it $250" resolves to $250 — not the first // number it sees const base = parseFloat(((a.summary.match(/\$([\d,]+(?:\.\d+)?)/) || [])[1] || "0").replace(/,/g, "")); const nums = (text.replace(/,/g, "").match(/\$?\s?\d+(?:\.\d+)?\s?k?/gi) || []) .map((tok) => { let n = parseFloat(tok.replace(/[^\d.]/g, "")); if (/k/i.test(tok)) n *= 1000; return n; }) .filter((n) => n > 0); 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 (nums.length && (hasContext || bareNumber)) { const notBase = nums.filter((n) => Math.abs(n - base) > 0.01); const val = notBase.length ? notBase[0] : nums[0]; const newAmt = formatAutomationAmount(val); const old = a.summary.match(/\$[\d,]+(?:\.\d+)?/); const newSummary = old ? a.summary.replace(old[0], newAmt) : a.summary; return { kind: "Amount", from: old ? old[0] : "current", to: newAmt, newSummary, newStatus: a.status }; } return null; }; const AutoContextTile = ({ a, onOpen }) => ( ); 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 }

); const ABubble = ({ m }) => { const u = m.from === "user"; return (

{m.t}

); }; const ATyping = () =>

{[0, 1, 2].map((i) => )}

; const AutomationThread = ({ a, msgs, typing, onSend, onBack, onReview }) => { const [draft, setDraft] = useState(""); const scrollRef = useRef(null); const focusRef = useRef(null); const [focusVisible, setFocusVisible] = useState(true); const lastPropIdx = (() => { for (let i = msgs.length - 1; i >= 0; i--) if (msgs[i].kind === "proposal") return i; return -1; })(); const isProp = lastPropIdx >= 0; const focusProp = isProp ? msgs[lastPropIdx] : null; useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, typing]); useEffect(() => { const el = focusRef.current, root = scrollRef.current; if (!el || !root) { setFocusVisible(true); return; } const io = new IntersectionObserver((e) => setFocusVisible(e[0].isIntersecting), { root, threshold: 0.01 }); io.observe(el); return () => io.disconnect(); }, [lastPropIdx, msgs.length]); const scrollToFocus = () => { const root = scrollRef.current, el = focusRef.current; if (!root) return; if (!isProp || !el) { root.scrollTo({ top: 0, behavior: "smooth" }); return; } const top = root.scrollTop + el.getBoundingClientRect().top - root.getBoundingClientRect().top - 14; root.scrollTo({ top: Math.max(0, top), behavior: "smooth" }); }; const send = (t) => { const body = (t != null ? t : draft).trim(); if (!body) return; setDraft(""); onSend(body); }; return (

{focusVisible ? (

{a.name}

Yoshi · automation thread

) : ( )}

{msgs.map((m, i) => m.kind === "proposal" ?

onReview(i)} />

: )} {typing && }

{AUTO_CHIPS_M.map((q) => )}

send()} placeholder="Talk to Yoshi…" onAttach={(doc) => onSend(`Attached ${doc.name}`)} />

); }; const AutoReviewModal = ({ change, name, onCancel, onApply }) => { const lbl = { fontFamily: "var(--f-display)", fontSize: typeSize(11), fontWeight: 500, letterSpacing: "normal", textTransform: "uppercase", color: "var(--ink-3)", flex: "none" }; const val = { fontFamily: "var(--f-mono)", fontSize: typeSize(13), textAlign: "right", fontVariantNumeric: "proportional-nums" }; return (

); }; /* pause/cancel are consequence moments, not toasts — say exactly what stops, what survives (history), and what happens to a pending ask before acting. */ const ConsequenceModal = ({ kind, a, onKeep, onConfirm }) => { const pendingAsk = a.upNext && a.upNext.some((u) => u.briefId); const lines = kind === "pause" ? ["Nothing runs until you turn it back on.", "Past runs are unaffected and stay in Activity."] : ["This deletes the rule — it won't run again.", "Past runs and history stay in Activity."]; if (pendingAsk) lines.push("The pending ask in Needs You is withdrawn."); return (

); }; const AutomationSheet = ({ automation, onClose, onBack, nav, flash, embedded, onThread }) => { const automationRuleUpdate = (a, change) => { const replaceAmount = (value) => typeof value === "string" ? value.split(change.from).join(change.to) : value; const updateEvent = { d: "Today", k: "updated", t: "Rule updated", s: change.kind === "Pause" ? "Paused with Passkey confirmation. Previous runs stay below." : `Amount changed from ${change.from} to ${change.to}. Previous runs stay below.`, amt: "", }; if (change.kind === "Pause") { return { summary: change.newSummary, status: change.newStatus, next: "Paused · nothing runs until you resume it", upNext: [{ k: "watching", t: "Paused after your approval", s: "Nothing runs until you turn it back on. Prior moves remain in the history below." }], runs: [updateEvent, ...(a.runs || [])], }; } return { summary: change.newSummary, status: change.newStatus, next: a.next ? replaceAmount(a.next) : a.next, rule: (a.rule || []).map((row) => row.map(replaceAmount)), upNext: (a.upNext || []).map((u) => ({ ...u, t: replaceAmount(u.t), s: replaceAmount(u.s) })), runs: [updateEvent, ...(a.runs || [])], }; }; const [msg, setMsg] = useState(""); // mobile chats in-sheet; web (onThread) routes to the Automations inbox. const [msgs, setMsgs] = useState([]); const [typing, setTyping] = useState(false); const [applied, setApplied] = useState(null); // approved rule overrides for this automation const [review, setReview] = useState(null); // index of the change msg under review const [ending, setEnding] = useState(null); // "pause" | "cancel" → consequence confirm const [txn, setTxn] = useState(null); // an executed run, opened as its Activity receipt const [threadOpen, setThreadOpen] = useState(false); const a = applied ? { ...automation, ...applied } : automation; const pushChat = (text) => { setThreadOpen(true); setMsgs((m) => [...m, { from: "user", t: text }]); setTyping(true); setTimeout(() => { setTyping(false); const change = autoDraftChange(a, text); setMsgs((m) => { const arr = [...m]; if (change) { arr.push({ from: "agent", t: change.kind === "Pause" ? `I've drafted the pause for "${a.name}". Review it when you're ready.` : `Here's the revised rule for "${a.name}", ready for you to review.` }); arr.push({ kind: "proposal", change }); } else { arr.push({ from: "agent", t: autoReply(a, text) }); } return arr; }); }, 1000); }; const send = (text) => { const t = (typeof text === "string" ? text : msg).trim(); if (!t) return; setMsg(""); if (onThread) { onThread(t); return; } pushChat(t); }; const attachDoc = (doc) => { const t = `Attached ${doc.name}`; if (onThread) { onThread(t); return; } pushChat(t); }; const applyChange = () => { if (review == null) return; const change = msgs[review] && msgs[review].change; if (!change) { setReview(null); return; } const update = automationRuleUpdate(a, change); setApplied((p) => ({ ...(p || {}), ...update })); setMsgs((m) => { const next = m.map((x, i) => (i === review ? { ...x, done: true } : x)); next.push({ from: "agent", t: change.kind === "Pause" ? `Done. "${a.name}" is paused; tell me when to turn it back on.` : `Done. "${a.name}" now reads ${change.to}. It takes effect on the next run.` }); return next; }); flash((change.kind === "Pause" ? "Paused · " : "Updated · ") + a.name); setReview(null); setThreadOpen(false); }; return (

{!embedded && window.StatusBar && } {!embedded && !threadOpen && } />} {threadOpen ? ( setThreadOpen(false)} onReview={(i) => setReview(i)} /> ) : (

{/* "Needs you" vocabulary — agent dot + eyebrow, then title + read. The MODE pill states the rule's authority at a glance. */}

Yoshi agent · {a.status === "active" ? "Active" : a.status === "watching" ? "Watching" : a.status === "attention" ? "Needs attention" : "Paused"} {a.mode && ( {a.mode === "auto" ? "Automatic" : a.mode === "asks" ? "Asks each run" : "Alerts only"} )}

{a.name}

{a.summary}

{a.next}

{/* needs attention — a broken data dependency goes loud: what Yoshi can't see, what's on hold, and the fix inline. */} {a.attention && (

{a.attention.t}

{a.attention.s}

flash("Reconnect flow — out of prototype scope")} style={{ marginTop: 10 }}>{a.attention.cta}

)} {/* the rule you approved — the setup brief's contract, pinned. Same slots (WHEN / IF / DO / LIMITS / MODE), same LegRow rendering. */} {a.rule && (

The rule you approved

{a.rule.map((leg, i) => )}

)} {/* up next — armed & pending states: a brief waiting on you, funds arriving. What the rule is about to do, before it does it. Pending rows only show while their brief is still live — once approved or declined anywhere, the ask row drops instead of dangling. */} {(() => { const live = (typeof window !== "undefined" && window.__liveProposals) || (typeof PROPOSALS !== "undefined" ? PROPOSALS : []); const upNext = (a.upNext || []).filter((u) => !u.briefId || live.some((p) => p.id === u.briefId)); return upNext.length > 0 && (

Up next

{upNext.map((u, i) => { const row = (

{u.t} {u.s && {u.s}} {u.briefId && }

); return u.briefId ? :

{row}

; })}

); })()} {/* run history \u2014 every firing, not just the wins. One outcome verb per run (Ran / Asked\u00b7approved / Asked\u00b7declined / Skipped / Failed), and skips carry the guardrail or condition that stopped them: the evidence that the rule's limits are real. */} {a.runs && a.runs.length > 0 ? (

Run history {a.record && {a.record}}

{a.runs.map((r, i) => { const oc = { ran: { label: "Ran", color: "var(--accent-pos)", dot: "var(--accent-pos)" }, updated: { label: "Rule updated", color: "var(--accent)", dot: "var(--accent)" }, approved: { label: "Asked \u00b7 approved", color: "var(--accent-pos)", dot: "var(--accent-pos)" }, declined: { label: "Asked \u00b7 declined", color: "var(--ink-3)", dot: "transparent", ring: true }, expired: { label: "Asked \u00b7 expired", color: "var(--ink-3)", dot: "transparent", ring: true }, skipped: { label: "Skipped", color: "var(--ink-3)", dot: "transparent", ring: true }, failed: { label: "Failed", color: "var(--signal-neg)", dot: "var(--signal-neg)" }, }[r.k] || { label: "Ran", color: "var(--ink-2)", dot: "var(--ink-3)" }; /* an EXECUTED run is a transaction \u2014 tapping opens the same receipt Activity opens, built from the rule's runTx template */ const executed = a.runTx && (r.k === "ran" || r.k === "approved") && r.amt; const openRun = () => { if (!executed) return; const n = parseFloat((r.amt || "").replace(/[^0-9.]/g, "")) || 0; setTxn({ id: "run-" + a.id + "-" + i, icon: a.runTx.icon, title: r.t, detail: a.runTx.detail, when: r.d, net: a.runTx.sign === 0 ? 0 : a.runTx.sign * n, category: a.runTx.category, type: a.runTx.type, rail: a.runTx.rail, accountScope: a.runTx.accountScope, autoId: a.id }); }; return (

{r.d} {oc.label} {r.t} {r.s && {r.s}} {r.amt} {executed && }

); })}

) : a.ledger && a.ledger.length > 0 &&

Run history {a.record && {a.record}}

{a.ledger.map((row, i) =>

{row[0]} {row[1]} {row[2]}

)}

}

setEnding("cancel")}>Cancel {/* resuming has no consequences to confirm — it just turns back on */} {a.status === "paused" ? { onClose(); flash("Resumed · " + a.name); }}>Resume : setEnding("pause")}>Pause}

{/* free-form Yoshi chat — same bar used in briefs */}

)} {review != null && msgs[review] && msgs[review].change && setReview(null)} onApply={applyChange} />} {ending && setEnding(null)} onConfirm={() => { const k = ending; setEnding(null); onClose(); flash((k === "cancel" ? "Cancelled · " : "Paused · ") + a.name); }} />} {/* an executed run, opened as the same transaction receipt Activity uses; closing returns to the rule */} {txn &&

setTxn(null)} nav={nav} />

}

); }; window.AutomationSheet = AutomationSheet; /* ============================================================ StreamPanel — the activity stream, lifted out of Home so the web shell can mount it as its own right pillar. Inline (mobile) it returns just the

; standalone (web) it wraps itself in a pillar with head + scroll. Same data, filters, search, look — unchanged from the original Home band. ============================================================ */ const StreamPanel = ({ nav, completed, onSeeStream, standalone, onRepin }) => { const [filter, setFilter] = useState("all"); // web pillar: any stream item opens full-pillar, with everything the sheet has const [detail, setDetail] = useState(null); // { kind: "auto", id } | { kind: "txn", tx } const onItemDetail = standalone && window.__YOSHI_WEB ? (d) => setDetail(d) : null; const [searchOpen, setSearchOpen] = useState(false); const [query, setQuery] = useState(""); // recent activity = freshly-approved agent moves prepended onto the ledger const txns = useMemo(() => { const fresh = (completed || []).filter((c) => String(c.id).startsWith("ex_")).map((c) => ({ id: c.id, icon: "bolt", title: c.title, detail: `${c.detail} \u00b7 ${c.by}`, when: c.when, net: c.net })); return [...fresh, ...TRANSACTIONS]; }, [completed]); // one feed: concrete transactions only. Rows triggered by standing rules are // tagged so the Automations filter still surfaces their corresponding money // movement without showing automation cards in Recent activity. const feed = useMemo(() => { const txCat = { receipt: "spending", down: "income", swap: "transfers", trade: "investments", bolt: "automations" }; return txns.map((t) => ({ kind: "txn", t, id: "f_" + t.id, cat: t.cat || txCat[t.icon] || "spending" })); }, [txns]); const shownFeed = useMemo(() => { const q = query.trim().toLowerCase(); return feed.filter((f) => { if (filter !== "all" && f.cat !== filter) return false; if (!q) return true; const hay = f.kind === "auto" ? `${f.a.name} ${f.a.measure}` : `${f.t.title} ${f.t.detail}`; return hay.toLowerCase().includes(q); }); }, [feed, filter, query]); const shownComing = useMemo(() => { const q = query.trim().toLowerCase(); return COMING_UP.filter((c) => { if (filter !== "all" && c.cat !== filter) return false; if (!q) return true; return `${c.title} ${c.sub}`.toLowerCase().includes(q); }); }, [filter, query]); const body = (

{/* sticky header: Stream title · filter pills · search */}

{!standalone &&

{onSeeStream ? "Recent activity" : "Stream"} {onSeeStream && } {onRepin && }

}

{ACTIVITY_FILTERS.map(([k, l]) => { const on = filter === k; return ; })}

{searchOpen &&

setQuery(e.target.value)} placeholder="Search activity" style={{ flex: 1, border: "none", background: "transparent", outline: "none", color: "var(--ink)", fontFamily: "var(--f-display)", fontSize: IOS_TYPE.body }} /> {query && }

}

{/* COMING UP */} {shownComing.length > 0 &&

Coming up

{shownComing.map((c, i) => )}

} {/* RECENT ACTIVITY */}

Recent activity

{shownFeed.length ? shownFeed.map((item, i) => ) :

{query.trim() ? `No activity matches "${query}".` : "Nothing in this filter yet."}

}

); if (!standalone) return body; const openAuto = detail && detail.kind === "auto" ? AUTOMATIONS.find((a) => a.id === detail.id) : null; const openTxn = detail && detail.kind === "txn" ? detail.tx : null; return ( ); }; window.StreamPanel = StreamPanel; window.Home = Home;