/* inbox.jsx, agent inbox (proposals + activity) and the approval flow.
ApprovalSheet runs the moment the brand is built around:
review → confirm (Face ID) → the seam draws → executed. Plus
Decline (with a reason) and Modify (bounce back to the agent in chat). */
const Inbox = ({ nav, proposals, completed, onApprove, initialTab = "needs" }) => {
const [tab, setTab] = useState(initialTab);
const [open, setOpen] = useState(null);
const activityCount = ACTIVITY.reduce((s, g) => s + g.items.length, 0) + completed.filter((c) => String(c.id).startsWith("ex_")).length;
const TABS = [["needs", "Needs you"], ["briefs", "Briefs"], ["autos", "Automations"], ["activity", "All activity"]];
return (
Stream
{TABS.map(([k, l], i) => {
const on = tab === k;
return setTab(k)} style={{ flex: "none", position: "relative", textAlign: "center", padding: "6px 0 10px", background: "none", border: "none", color: on ? "var(--ink)" : "var(--ink-3)", fontFamily: "var(--f-display)", fontSize: 13, fontWeight: on ? 700 : 500, cursor: "pointer", whiteSpace: "nowrap" }}>
{l}
{on && ;
})}
{tab === "needs" ?
proposals.length ? proposals.map((p, i) =>
onApprove(p.id)} />
) :
You're all caught up.
Your agents will surface the next thing that needs you here.
:
tab === "briefs" ?
{open &&
setOpen(null)} onClose={() => setOpen(null)} nav={nav} />}
);
};
/* ---- automations · the standing-rules summary tab ------------------------- */
const AUTO_STATUS = {
active: ["●", "Active", "var(--accent)"],
watching: ["○", "Watching", "var(--ink-3)"],
paused: ["○", "Paused", "var(--ink-3)"]
};
const AutoStat = ({ status }) => {
return null;
const [dot, label, color] = AUTO_STATUS[status] || AUTO_STATUS.active;
return (
{dot} {label}
);
};
const AutomationsTab = ({ nav }) => {
const active = AUTOMATIONS.filter((a) => a.status === "active").length;
const watching = AUTOMATIONS.filter((a) => a.status === "watching").length;
const buildWithYoshi = () => 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 (
Your active automations
Rules you approved that Yoshi continues to run in the background, within your limits. Update them any time.
Build with Yoshi
{AUTOMATIONS.map((a, i) =>
nav.sheet({ type: "automation", id: a.id })} />
)}
);
};
const AutoRow = ({ a, onOpen, last }) =>
;
const ProposalCard = ({ p, onReview, delay = 0 }) =>
{p.agent}
{p.title}
{p.why}
{/* legs preview */}
{p.legs.map((leg, i) =>
Net
= 0 ? "var(--accent-pos)" : "var(--ink)"} dim="var(--ink-3)" />
Review
;
const Leg = ({ leg, last }) => {
const [tag, label, detail, amount] = leg;
const tagColor = tag === "SELL" ? "var(--signal-neg)" : tag === "BUY" ? "var(--accent-pos)" : "var(--ink-2)";
return (
);
};
/* ---- activity · the full stream, grouped by day --------------------------- */
const Activity = ({ completed }) => {
// proposals approved this session get prepended into Today
const fresh = completed.
filter((c) => String(c.id).startsWith("ex_")).
map((c) => ({ type: "exec", title: c.title, detail: c.detail, when: c.when, net: c.net, by: c.by }));
const groups = ACTIVITY.map((g, i) => i === 0 ? { ...g, items: [...fresh, ...g.items] } : g);
return (
{groups.map((g) =>
{g.day}
{g.items.length} {g.items.length === 1 ? "event" : "events"}
{g.items.map((it, j) =>
)}
◆ {it.kind}
{it.title}
{it.detail}
View
);
}
const isDeposit = it.type === "deposit";
return (
● {isDeposit ? "Deposit" : "Executed"}
{it.title}
{it.detail}
{it.net !== 0 ?
0 ? "var(--accent-pos)" : "var(--ink)"} dim="var(--ink-3)" /> :
it.amount ?
:
Done }
);
};
/* ============================================================
Approval flow · the moment.
phases: review → confirm → success | decline | modify
============================================================ */
const DECLINE_REASONS = ["Not now", "Too large", "I'll do it manually", "Don't trust the timing"];
const MODIFY_CHIPS = ["Make it smaller", "Wait until Friday", "Only the safest leg", "Explain the risk first"];
const ApprovalSheet = ({ proposal, onClose, onApproved, onDeclined, onModified, onOpenThread, hasThread }) => {
const [phase, setPhase] = useState("review");
const [authing, setAuthing] = useState(false);
const [note, setNote] = useState("");
const p = proposal;
const doConfirm = () => {
setAuthing(true);
setTimeout(() => {setAuthing(false);setPhase("success");}, 950);
};
return (
{window.StatusBar &&
}
{phase !== "success" &&
}
{phase === "review" &&
setPhase("confirm")} onDecline={() => setPhase("decline")} onAsk={(t) => onOpenThread(p.id, t)} hasThread={hasThread} onThread={() => onOpenThread(p.id)} />}
{phase === "confirm" && setPhase("review")} onConfirm={doConfirm} />}
{phase === "success" && {onApproved(p.id);}} />}
{phase === "decline" && setPhase("review")} onDeclined={(r) => onDeclined(p.id, r)} />}
{phase === "modify" && setPhase("review")} onSend={() => onModified(p.id, note)} />}
{p.agent}
{label &&
{label} }
);
};
const MiniToggle = ({ on, onChange }) =>
onChange(!on)} style={{ width: 40, height: 23, padding: 0, position: "relative", background: on ? "var(--accent)" : "var(--rule-2)", border: "none", borderRadius: 999, cursor: "pointer", flex: "none", transition: "background 180ms ease" }}>
;
const ReviewPhase = ({ p, onClose, onApprove, onDecline, onAsk, hasThread, onThread }) => {
const [autoOn, setAutoOn] = useState(false);
const [cap, setCap] = useState(5000);
const [msg, setMsg] = useState("");
const ask = () => {const t = msg.trim();if (!t) return;setMsg("");onAsk(t);};
return (
<>
{p.title}
{p.why}
Proposal
{p.legs.map((leg, i) =>
= 0 ? "var(--accent-pos)" : "var(--ink)"} />
Yoshi makes the move, only after you approve.
{/* per-automation autonomy — the rule's own limits, set here on the proposal */}
Do this automatically next time
Yoshi will handle a move like this on its own, up to the limit you set.
{autoOn &&
Do it without asking up to
{usd(cap, 0)}
setCap(parseInt(e.target.value, 10))} style={{ marginTop: 10 }} />
Any move above this will still ask for your approval.
}
{/* the seam, between the proposal and the approve */}
Decline
Approve
{/* free-form question — opens (or continues) this proposal's forked thread.
When a thread already exists, the chat icon jumps straight into it. */}
onAsk(`I attached ${doc.name} — use it as context for this proposal.`)}
onThreadJump={hasThread ? onThread : null} />
);
};
const SummaryCell = ({ label, value, color = "var(--ink)", border }) =>
;
const ConfirmPhase = ({ p, authing, onBack, onConfirm }) =>
<>
{p.title}
Net effect
= 0 ? "var(--accent-pos)" : "var(--ink)"} style={{ marginLeft: "auto" }} />
{authing ? "Authenticating…" : "Confirm with your passkey to authorize.\nYoshi will execute immediately."}
{authing ? "Confirming…" : "Confirm with passkey"}
Back
;
const SuccessPhase = ({ p, onDone }) =>
Executed
{p.title}
Yoshi handled the move. Net {signed(p.net)} · {p.settlesVerb || "settles"} {p.settles}. You'll see it in your stream.
Done
;
const DeclinePhase = ({ p, onBack, onDeclined }) => {
const [r, setR] = useState(null);
const [note, setNote] = useState("");
return (
<>
Why decline?
The agent learns from this. It won't run.
{DECLINE_REASONS.map((reason) =>
setR(reason)} style={{ padding: "9px 13px", borderRadius: 999, background: r === reason ? "var(--ink)" : "transparent", color: r === reason ? "var(--bg)" : "var(--ink)", border: "1px solid var(--rule-2)", fontFamily: "var(--f-display)", fontSize: 12.5, fontWeight: 500, cursor: "pointer" }}>{reason}
)}