}
{/* BAND 3 · Stream — sticky header (title + pills + search), then
Coming up and Recent activity as sub-sections in one endless scroll. */}
{/* sticky header: Stream title · filter pills · search */}
;
/* ---- 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 ref = useRef(null);
const [sx, setSx] = useState(0);
const STRIDE = WHEEL_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 }) => {
const isAuto = !!c.autoId;
const open = () => isAuto ? nav.sheet({ type: "automation", id: c.autoId }) : nav.sheet({ type: "txn", tx: c });
return (
);
};
/* ---- recent-activity transaction row (flat ledger, no pill) --------------- */
const TxnRow = ({ t, last, nav }) =>
;
/* ---- transaction / scheduled-item detail · a receipt-style bottom sheet --- */
const TXN_CATEGORY = { receipt: "Spending", down: "Income", swap: "Transfer", trade: "Investment", bolt: "Automation" };
const TxnDetailSheet = ({ tx, onClose, nav }) => {
const upcoming = tx.net == null;
const amount = tx.net != null ? tx.net : (tx.tone === "out" ? -tx.amount : tx.amount);
const category = TXN_CATEGORY[tx.icon] || (tx.cat ? tx.cat.charAt(0).toUpperCase() + tx.cat.slice(1) : "Activity");
const method = tx.detail || tx.sub || "";
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"} ${tx.when}, ${amount >= 0 ? "a credit" : "a debit"} of ${usd(Math.abs(amount))} via ${method || category}. Want me to find related activity, set an alert, or categorize it differently?`); };
return (
<>
{onClose();nav.ask(`Analyze my "${a.name}" automation`, `Here's how "${a.name}" is doing: ${a.perf.map((p) => p.join(" ")).join(", ")}. Net it's pulling its weight. Want me to tune the cadence or the limits?`);}}>Analyze {onClose();nav.ask(`Edit my "${a.name}" automation`, `Sure, what should change on "${a.name}"? Right now it's set to: ${a.summary} (${a.next}). You can tell me a new schedule, amount, or scope (for example "make it $750 every other Friday" or "only run when cash is above $20k") and I'll update it and confirm.`);}}>Edit