{/* 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.sheet({ type: "trade" })} />
nav.sheet({ type: "transfer" })} />
nav.sheet({ type: "connect" })} />
}
{/* BAND 2 · pending, a scroll-snap carousel of proposals */}
{proposals.length === 0 ?
You're caught up :
Needs you}
}
{/* MORNING READ */}
{/* 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 && }
);
};
/* ---- 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 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 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"}
);
};
/* ---- 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 row in the merged feed (flat, tappable, ◆ marker) ---------
Mirrors TxnRow's two-line layout on both sides so row heights line up. */
const FeedAutoRow = ({ a, onOpen, last }) =>
;
/* ---- 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 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" };
}
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 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 AutoPinBar = ({ a }) => (