onAsk(`About my spending — "${f.title}": ${f.detail} Can you help me think through this?`)} style={{ display: "flex", gap: 11, padding: "12px 14px", borderRadius: 14, background: T.fill2, cursor: "pointer" }}>
{meta.icon}
{f.title}
{f.amount > 0 && {fmt(f.amount)}}
{f.detail}
);
})}
{(result.questions || []).length > 0 && (
SYRUP WANTS TO KNOW
{result.questions.map((q, i) => (
))}
)}
)}
);
}
function InsightsView({ metrics, config, saveConfig, hideScore, tx, income, onAsk }) {
const ring = useCountUp(metrics.overall); const C = 2 * Math.PI * 54;
const used = [...metrics.cats].filter((c) => c.budget > 0).sort((a, b) => a.score - b.score);
return (
{!hideScore && (
{Math.round(ring)}
SCORE
{(() => {
const over = used.filter((c) => c.spent > c.budget).sort((a, b) => (b.spent - b.budget) - (a.spent - a.budget));
const tight = used.filter((c) => c.spent <= c.budget && c.budget > 0 && c.spent / c.budget > 0.85);
if (over.length) return <>You're over on {over[0].name} by {fmt(over[0].spent - over[0].budget)}{over.length > 1 ? ` (and ${over.length - 1} other${over.length > 2 ? "s" : ""})` : ""}. That's where the score's leaking.;
if (tight.length) return <>{tight[0].name} is close to its limit — keep an eye on it.;
if (metrics.overall >= 80) return <>Dialed in — every category's comfortably under budget.;
return <>Add budgets to your categories to start scoring your month.;
})()}
)}
{used.map((c, i) => (
{c.score}
{c.name}{fmt(c.spent)} / {fmt(c.budget)}
))}
);
}
/* Finance "gems" — general principles the coach can surface and the Learn
section lists. `when` tells the coach the rough context to mention it in.
These are EDUCATION, never personalized advice. */
const GEMS = [
{ id: "match", path: "foundations", icon: "ISpark", title: "Always capture the full employer match", short: "It's a 50–100% instant return — the best you'll ever get.", body: "If your employer matches retirement contributions (401k, 457, etc.), contributing at least enough to get the full match is usually the highest-return move available — you're turning down free money otherwise. It comes before almost any other investing priority.", step: "Check your benefits portal for the match formula (e.g. '50% up to 6%') and confirm you're contributing at least enough to get all of it.", when: "retirement, 401k, employer benefits, raises" },
{ id: "idle", path: "foundations", icon: "IWallet", title: "Idle cash loses value every day", short: "Cash beyond your buffer should be working.", body: "Money sitting in a checking account earns nothing while inflation chips at it. Beyond your emergency buffer, parking cash in a high-yield savings account, money market, or short-term treasuries keeps it safe and actually earning. Idle cash is a quiet, daily cost.", step: "Note your checking balance. Anything well above your buffer is a candidate to move into a high-yield savings account.", when: "large savings balance, idle cash, where to keep savings" },
{ id: "hsa", path: "foundations", icon: "ICheck", title: "Max your HSA — triple tax advantage", short: "Deductible going in, grows tax-free, tax-free for medical.", body: "If you have a high-deductible health plan, an HSA is the only account that's tax-advantaged three ways: contributions reduce taxable income, growth is untaxed, and withdrawals for medical costs are tax-free. Many people treat it as a stealth retirement account by paying medical costs out of pocket and letting it grow.", step: "Check whether your health plan is HSA-eligible. If so, see if you can route even a small monthly contribution into it.", when: "health, HSA, medical, taxes, retirement" },
{ id: "roth457", path: "investing", icon: "ITrend", title: "Know your Roth vs. pre-tax order", short: "Roth IRA and 457s are powerful, often-overlooked buckets.", body: "Tax-advantaged accounts each have a role: a Roth grows tax-free, traditional accounts cut today's taxable income, and a 457 (common for public employees) has unusually flexible early-access rules. The right order depends on your bracket now vs. later — worth understanding, not guessing.", step: "Identify which tax-advantaged accounts you have access to, and ask Syrup how the typical funding order would apply to your bracket.", when: "retirement, IRA, taxes, public-sector job" },
{ id: "allocation", path: "investing", icon: "IChart", title: "Your allocation matters more than your contribution", short: "What it's invested in beats how much you add.", body: "People obsess over contribution amounts but ignore what the money is actually invested in. A retirement account sitting in a default money-market option barely grows. Over decades, your asset allocation drives the outcome far more than small changes in how much you put in.", step: "Log into your retirement account and check what it's actually invested in — not the balance, the holdings. A default cash/money-market option is a red flag.", when: "investing, 401k, allocation, portfolio" },
{ id: "brokerage", path: "investing", icon: "ISpark", title: "Brokerage accounts aren't just for the rich", short: "A taxable brokerage is flexible, accessible investing.", body: "Beyond retirement accounts, a regular taxable brokerage lets anyone invest with no contribution caps and no withdrawal penalties — useful for goals before retirement age. You don't need to be wealthy; you need to start. It's one of the most underused tools for ordinary savers.", step: "If your retirement match and buffer are handled, look up what opening a taxable brokerage account involves — it's usually a 10-minute process.", when: "investing, beyond retirement, mid-term goals" },
{ id: "taxstrategy", path: "leverage", icon: "ITrend", title: "Income up means tax strategy up", short: "More income unlocks moves that weren't worth it before.", body: "As your income grows, strategies that didn't matter at lower earnings start to pay off — tax-loss harvesting, pre-tax contributions to drop a bracket, timing income. Rising income is the trigger to revisit how much you're handing over unnecessarily.", step: "If your income has jumped, jot down roughly what you paid in tax last year — that's the number a strategy conversation starts from.", when: "raise, more income, high earner, taxes" },
{ id: "entity", path: "leverage", icon: "ISliders", title: "The wrong entity structure costs thousands", short: "Side income? How it's structured changes your tax bill.", body: "If you earn self-employment or business income, whether it's a sole proprietorship, LLC, or S-corp can mean thousands in taxes saved or wasted at higher income levels. It's worth understanding once your side income becomes real — a one-time setup with lasting payoff.", step: "If your side income is becoming real (roughly five figures), note your annual self-employment total — that's the threshold where entity choice starts to matter.", when: "business income, self-employed, side business, LLC" },
{ id: "equity", path: "leverage", icon: "IHome", title: "Idle home equity is wasted leverage", short: "Equity sitting still can sometimes be put to work.", body: "Home equity that just sits there is dormant capital. Depending on rates and goals, it can sometimes be tapped responsibly — for higher-return investments, debt consolidation, or property — though it carries real risk. The point: equity is an asset to think about, not just a number that grows passively.", step: "If you own a home, estimate your equity (value minus mortgage balance). Knowing the number is the first step to deciding whether it should stay idle.", when: "home, mortgage, equity, real estate" },
];
/* Learning paths group the gems into a sense of progression. */
const LEARN_PATHS = [
{ id: "foundations", title: "Foundations", sub: "Stop the leaks, lock in free money", icon: "ICheck" },
{ id: "investing", title: "Make it grow", sub: "Put money to work the right way", icon: "ITrend" },
{ id: "leverage", title: "Level up", sub: "Moves that matter as you earn more", icon: "ISpark" },
];
/* Which gems apply to a given profile. Anything universal returns true;
account- or situation-specific gems only show when relevant. We err toward
showing — only hide a gem when the profile clearly rules it out. */
function gemRelevant(id, profile) {
const p = profile || {};
const acct = Array.isArray(p.accounts) ? p.accounts : [];
const has = (a) => acct.includes(a);
const selfEmployed = p.employment === "1099" || p.employment === "self" || p.employment === "mix" || p.sideBusiness;
switch (id) {
case "match": return p.employment === "w2" || p.employment === "mix" || has("401k") || has("457"); // employer match only exists with an employer
case "hsa": return has("hsa") || acct.length === 0; // show if they have one, or haven't told us yet
case "roth457": return has("457") || has("ira") || acct.length === 0;
case "allocation": return has("401k") || has("457") || has("ira") || has("brokerage") || acct.length === 0;
case "brokerage": return true; // universal — anyone can open one
case "idle": return true; // universal
case "taxstrategy": return true; // universal as income grows
case "entity": return selfEmployed; // only relevant with self-employment/business income
case "equity": return p.ownsHome; // only relevant to homeowners
default: return true;
}
}
const gemsForProfile = (profile) => GEMS.filter((g) => gemRelevant(g.id, profile));
const STARTERS = [
{ label: "Tweak my spending", prompt: "Where did I run hot this month? Suggest one realistic budget tweak." },
{ label: "Reach my goal faster", prompt: "How can I hit my primary goal sooner without making my month miserable?" },
{ label: "Save for something new", prompt: "I want to start saving for something new." },
{ label: "What should I do next?", prompt: "Based on everything you know about me, what's the single most impactful thing I should do with my money right now?" },
];
function CoachSheet({ metrics, config, saveConfig, seed, tx, income, onLogExpense, onLogIncome, onStatementBatch, onNavigate, onClose }) {
return (
}>
);
}
function CoachChat({ metrics, config, saveConfig, seed, tx, income, onLogExpense, onLogIncome, onStatementBatch, onNavigate, embedded }) {
const [msgs, setMsgs] = useState(() => (Array.isArray(config.coachHistory) ? config.coachHistory.map((m) => ({ role: m.role, text: m.text, batch: m.batch })) : []));
const [pending, setPending] = useState(false);
const [input, setInput] = useState("");
const [err, setErr] = useState(false);
const scrollRef = useRef(null);
const seeded = useRef(false);
const fileRef = useRef(null);
const recurSummary = (config.recurring || []).slice(0, 15).map((r) => ({ kind: r.kind, who: r.who || r.source, amount: r.amount, cadence: r.cadence, category: r.category }));
const ctx = {
autoAdjust: !!config.autoAdjust,
tone: (config.prefs && config.prefs.coachTone) || "balanced",
categoryNames: (config.categories || []).map((c) => c.name),
data: {
projectedIncome: Math.round(metrics.projIncome),
incomeRange: [Math.round(metrics.incLow), Math.round(metrics.incHigh)],
savingPerMonth: Math.round(metrics.saveRate),
goals: metrics.goals.map((g) => ({ name: g.name, target: g.target, saved: g.saved, isPrimary: g.isPrimary, monthsToGo: g.months })),
categories: metrics.cats.filter((c) => c.budget > 0).map((c) => ({ name: c.name, spent: Math.round(c.spent), budget: c.budget, score: c.score, essential: c.essential })),
profile: config.profile || null,
hasTaxableIncome: !!metrics.hasTaxableIncome,
taxSetAside: Math.round(metrics.taxSetAside || 0),
plan: config.plan || {},
recurring: recurSummary,
accounts: (config.accounts || []).map((a) => a.name),
},
};
useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs, pending]);
const send = async (text) => {
if (!text.trim() || pending) return;
setErr(false);
const history = msgs.map((m) => ({ role: m.role === "user" ? "user" : "assistant", content: m.text }));
setMsgs((m) => [...m, { role: "user", text: text.trim() }]);
setInput("");
setPending(true);
try {
const raw = await callClaudeMessages([...history, { role: "user", content: text.trim() }], coachSystem(ctx));
const { prose, actions } = extractAction(raw);
// Separate silent learn_about_user actions from user-facing actions
const silentActions = actions.filter((a) => a.type === "learn_about_user");
const userActions = actions.filter((a) => a.type !== "learn_about_user");
// Apply silent actions immediately
silentActions.forEach((sa) => {
if (sa.updates && typeof sa.updates === "object") {
const profile = { ...(config.profile || {}), ...sa.updates };
saveConfig({ ...config, profile });
}
});
// Handle navigate actions — apply immediately and close
const navAction = userActions.find((a) => a.type === "navigate");
if (navAction && onNavigate) {
const replyText = prose || "Taking you there now.";
setMsgs((m) => {
const next = [...m, { role: "assistant", text: replyText }];
const hist = next.map((x) => ({ role: x.role, text: x.text })).slice(-20);
saveConfig({ ...config, coachHistory: hist });
return next;
});
setPending(false);
setTimeout(() => onNavigate(navAction.to), 300);
return;
}
const acts = ctx.autoAdjust ? userActions.map((a) => ({ a, applied: false })) : [];
const replyText = prose || (acts.length ? "Here's what I can do:" : "Done.");
setMsgs((m) => {
const next = [...m, { role: "assistant", text: replyText, acts }];
const hist = next.map((x) => ({ role: x.role, text: x.text })).slice(-20);
saveConfig({ ...config, coachHistory: hist });
return next;
});
} catch (e) { setErr(true); }
finally { setPending(false); }
};
// If opened with a seed (e.g. tapping a reconciliation finding), send it automatically
// so Syrup actually responds — rather than leaving the text sitting in the input.
useEffect(() => { if (seed && seed.trim() && !seeded.current) { seeded.current = true; send(seed); } }, [seed]);
const applyAction = (idx, ai) => {
const msg = msgs[idx]; if (!msg || !msg.acts || !msg.acts[ai]) return;
const a = msg.acts[ai].a; if (!a) return;
if (a.type === "budget" && Array.isArray(a.changes)) {
const budgets = { ...config.budgets };
a.changes.forEach((ch) => { if (ch && ch.category in budgets && typeof ch.to === "number") budgets[ch.category] = Math.max(0, Math.round(ch.to)); });
saveConfig({ ...config, budgets });
} else if (a.type === "add_goal" && a.goal && a.goal.name) {
const ng = { id: "g" + Date.now().toString(36), name: String(a.goal.name).slice(0, 40), target: Math.max(1, Math.round(a.goal.target || 0)), saved: Math.max(0, Math.round(a.goal.saved || 0)) };
saveConfig({ ...config, goals: [...config.goals, ng] });
} else if (a.type === "add_category" && Array.isArray(a.categories)) {
const cats = (config.categories || []).slice();
const budgets = { ...config.budgets };
const names = new Set(cats.map((x) => x.name.toLowerCase()));
const usedColors = new Set(cats.map((x) => x.color));
a.categories.forEach((nc) => {
const nm = String((nc && nc.name) || "").trim().slice(0, 30);
if (!nm || names.has(nm.toLowerCase())) return;
const color = PALETTE.find((p) => !usedColors.has(p)) || PALETTE[cats.length % PALETTE.length];
usedColors.add(color); names.add(nm.toLowerCase());
cats.push({ name: nm, color, essential: !!(nc && nc.essential) });
budgets[nm] = Math.max(0, Math.round((nc && nc.budget) || 0));
});
saveConfig({ ...config, categories: cats, budgets });
} else if (a.type === "contribute" && a.contribute && typeof a.contribute.amount === "number") {
const amt = Math.max(0, Math.round(a.contribute.amount));
const goals = (config.goals || []).slice();
let gi = goals.findIndex((g) => g.name === a.contribute.goal);
if (gi < 0) gi = goals.findIndex((g) => g.isPrimary); if (gi < 0) gi = 0;
if (goals[gi]) { goals[gi] = { ...goals[gi], saved: (goals[gi].saved || 0) + amt }; saveConfig({ ...config, goals }); }
} else if (a.type === "log_expense" && a.expense && onLogExpense) {
onLogExpense({ who: String(a.expense.who || "Expense").slice(0, 50), amount: Math.max(0, Number(a.expense.amount) || 0), category: a.expense.category, date: /^\d{4}-\d{2}-\d{2}$/.test(a.expense.date) ? a.expense.date : new Date().toISOString().slice(0, 10) });
} else if (a.type === "log_income" && a.income && onLogIncome) {
onLogIncome({ source: String(a.income.source || "Income").slice(0, 50), amount: Math.max(0, Number(a.income.amount) || 0), date: /^\d{4}-\d{2}-\d{2}$/.test(a.income.date) ? a.income.date : new Date().toISOString().slice(0, 10) });
} else if (a.type === "toggle_feature") {
const hidden = [...(config.prefs && config.prefs.hiddenFeatures || [])];
const feat = a.feature;
if (a.visible) {
const idx2 = hidden.indexOf(feat); if (idx2 >= 0) hidden.splice(idx2, 1);
} else {
if (!hidden.includes(feat)) hidden.push(feat);
}
saveConfig({ ...config, prefs: { ...config.prefs, hiddenFeatures: hidden } });
} else if (a.type === "update_profile" && a.changes) {
saveConfig({ ...config, profile: { ...(config.profile || {}), ...a.changes } });
} else if (a.type === "set_budget_batch" && a.budgets) {
const budgets = { ...config.budgets };
Object.entries(a.budgets).forEach(([cat, val]) => { if (typeof val === "number") budgets[cat] = Math.max(0, Math.round(val)); });
saveConfig({ ...config, budgets });
} else if (a.type === "update_plan" && a.changes) {
saveConfig({ ...config, plan: { ...(config.plan || {}), ...a.changes } });
} else if (a.type === "navigate" && onNavigate) {
onNavigate(a.to);
return; // don't mark as applied — navigation closes the sheet
} else if (a.type === "set_recurring" && a.recurring) {
const r = a.recurring;
const newRec = { id: "rec" + Date.now().toString(36) + Math.random().toString(36).slice(2, 5), kind: r.kind || "expense", cadence: r.cadence || "monthly", anchor: new Date().toISOString().slice(0, 10), lastPosted: "", who: r.who, amount: Math.max(0, Number(r.amount) || 0), category: r.category || "Other" };
if (r.kind === "income") { newRec.source = r.who; delete newRec.who; delete newRec.category; }
saveConfig({ ...config, recurring: [...(config.recurring || []), newRec] });
} else if (a.type === "remove_category" && a.name) {
const cats = (config.categories || []).filter((c) => c.name !== a.name);
const budgets = { ...config.budgets }; delete budgets[a.name];
saveConfig({ ...config, categories: cats, budgets });
} else if (a.type === "rename_category" && a.from && a.to) {
const cats = (config.categories || []).map((c) => c.name === a.from ? { ...c, name: a.to } : c);
const budgets = { ...config.budgets };
if (a.from in budgets) { budgets[a.to] = budgets[a.from]; delete budgets[a.from]; }
saveConfig({ ...config, categories: cats, budgets });
} else if (a.type === "reorder_goals" && a.primary) {
saveConfig({ ...config, primaryGoalId: a.primary });
} else if (a.type === "set_essential" && a.category) {
const cats = (config.categories || []).map((c) => c.name === a.category ? { ...c, essential: !!a.essential } : c);
saveConfig({ ...config, categories: cats });
} else return;
setMsgs((m) => m.map((x, i) => (i === idx ? { ...x, acts: x.acts.map((it, j) => (j === ai ? { ...it, applied: true } : it)) } : x)));
};
// File upload handler
const handleFileUpload = async (e) => {
const file = e.target.files && e.target.files[0];
if (fileRef.current) fileRef.current.value = "";
if (!file) return;
const names = (config.categories || []).map((c) => c.name);
setMsgs((m) => [...m, { role: "user", text: "📎 " + file.name }]);
setPending(true);
setErr(false);
try {
const fname = (file.name || "").toLowerCase();
const isImage = file.type.startsWith("image/");
const isPDF = fname.endsWith(".pdf") || file.type === "application/pdf";
const isCSV = fname.endsWith(".csv") || fname.endsWith(".txt") || file.type === "text/csv";
let result;
if (isImage) {
const b64 = await fileToB64(file);
result = await aiReadStatement(b64, file.type, names);
} else if (isPDF) {
const text = await extractFileText(file);
if (text && text.trim().length > 50) {
result = await aiReadStatementText(text, names);
} else {
const pages = await pdfPagesToImages(file, 6);
if (pages.length) {
result = await aiReadStatement(pages[0], "image/jpeg", names);
for (let pi = 1; pi < pages.length; pi++) {
try {
const more = await aiReadStatement(pages[pi], "image/jpeg", names);
if (more && more.tx) result.tx = [...(result.tx || []), ...more.tx];
} catch (_) {}
}
} else {
throw new Error("Could not read this PDF.");
}
}
} else if (isCSV) {
const text = await extractFileText(file);
if (!text || !text.trim()) throw new Error("Could not read this file.");
result = await aiReadStatementText(text, names);
} else {
throw new Error("Unsupported file type. Try an image, PDF, or CSV.");
}
const rows = (result && result.tx) || [];
if (!rows.length) {
setMsgs((m) => [...m, { role: "assistant", text: "I read the document but couldn't find any transactions. Try a clearer image or a different format." }]);
} else {
const expCount = rows.filter((r) => r.kind === "expense").length;
const incCount = rows.filter((r) => r.kind === "income").length;
const acct = (result && result.account && result.account.name) || "";
const total = rows.reduce((s, r) => s + (r.amount || 0), 0);
let summary = `I found **${rows.length} transaction${rows.length === 1 ? "" : "s"}**`;
if (acct) summary += ` from ${acct}`;
summary += ` totaling **${fmt(total)}**`;
if (expCount && incCount) summary += ` (${expCount} expenses, ${incCount} income)`;
summary += ". Tap below to add them.";
const taggedRows = rows.map((r) => (acct ? { ...r, account: acct } : r));
setMsgs((m) => {
const next = [...m, { role: "assistant", text: summary, batch: taggedRows }];
const hist = next.map((x) => ({ role: x.role, text: x.text })).slice(-20);
saveConfig({ ...config, coachHistory: hist });
return next;
});
}
} catch (e) {
setMsgs((m) => [...m, { role: "assistant", text: "Sorry, I couldn't read that file. " + (e.message || "Try again with a different format.") }]);
} finally {
setPending(false);
}
};
return (
A real read on your month — what ran hot, how it lands on {metrics.primary ? metrics.primary.name : "your goals"}, and what to do next. Start with one of these, or just tell me what's on your mind.