@elizaos/ui 2.0.0-alpha.385 → 2.0.0-alpha.392

package/apps/app-lifeops/src/components/LifeOpsLinkPaypalButton.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LifeOpsLinkPaypalButton — drives the PayPal OAuth Login flow for the
+ * Money page using a popup window.
+ *
+ * Flow:
+ *   1. User clicks the button.
+ *   2. We mint a fresh `state` (CSRF nonce) and ask Eliza Cloud to build
+ *      the PayPal authorize URL.
+ *   3. Open a popup at that URL. PayPal redirects to the cloud's
+ *      `popup-callback` page after consent; that page posts a message
+ *      back to this window with `{ code, state, error }`.
+ *   4. We verify the `state` matches the one we generated, then call
+ *      `client.completeLifeOpsPaypalLink({ code })`. Eliza Cloud exchanges
+ *      the code for tokens, persists them to the new payment_source row,
+ *      and tells us whether the granted scope includes the Reporting API.
+ *   5. If `capability.hasReporting === false`, the user is on a personal
+ *      PayPal account; we show a CSV-export fallback prompt.
+ */
+import { client, useApp } from "@elizaos/app-core";
+import { Loader2, Wallet } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+const POPUP_FEATURES = "width=560,height=720,resizable=yes,scrollbars=yes";
+const POPUP_NAME = "milady-paypal-oauth";
+const POPUP_TIMEOUT_MS = 5 * 60 * 1000;
+const ORIGIN_ALLOWLIST_ENV_FALLBACK = "*";
+function isOauthMessage(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const msg = value;
+    return msg.type === "milady-paypal-oauth";
+}
+export function LifeOpsLinkPaypalButton({ onLinked, label = "Link PayPal", }) {
+    const { elizaCloudConnected } = useApp();
+    const [status, setStatus] = useState("idle");
+    const [error, setError] = useState(null);
+    const [capability, setCapability] = useState(null);
+    const popupRef = useRef(null);
+    const stateRef = useRef(null);
+    const handlerRef = useRef(null);
+    const watchdogRef = useRef(null);
+    const cleanup = useCallback(() => {
+        if (handlerRef.current) {
+            window.removeEventListener("message", handlerRef.current);
+            handlerRef.current = null;
+        }
+        if (watchdogRef.current) {
+            clearTimeout(watchdogRef.current);
+            watchdogRef.current = null;
+        }
+        if (popupRef.current && !popupRef.current.closed) {
+            try {
+                popupRef.current.close();
+            }
+            catch {
+                // Cross-origin closed by user — ignore.
+            }
+        }
+        popupRef.current = null;
+        stateRef.current = null;
+    }, []);
+    useEffect(() => {
+        return () => cleanup();
+    }, [cleanup]);
+    const onClick = useCallback(async () => {
+        setError(null);
+        setCapability(null);
+        setStatus("preparing");
+        const state = `${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
+        stateRef.current = state;
+        let authorizeUrl;
+        try {
+            const result = await client.createLifeOpsPaypalAuthorizeUrl({ state });
+            authorizeUrl = result.url;
+        }
+        catch (err) {
+            setStatus("error");
+            setError(err instanceof Error ? err.message : String(err));
+            return;
+        }
+        const popup = window.open(authorizeUrl, POPUP_NAME, POPUP_FEATURES);
+        if (!popup) {
+            setStatus("error");
+            setError("Popup blocked. Allow popups for this site and try again, or use the CSV export from paypal.com.");
+            return;
+        }
+        popupRef.current = popup;
+        setStatus("awaiting_user");
+        const handler = (event) => {
+            const expectedOrigin = process.env.MILADY_APP_ORIGIN ?? ORIGIN_ALLOWLIST_ENV_FALLBACK;
+            if (expectedOrigin !== "*" &&
+                event.origin &&
+                event.origin !== window.location.origin &&
+                event.origin !== expectedOrigin) {
+                // Drop messages from unexpected origins.
+                return;
+            }
+            if (!isOauthMessage(event.data))
+                return;
+            const payload = event.data;
+            if (payload.state !== stateRef.current) {
+                // Stale or forged message — ignore.
+                return;
+            }
+            window.removeEventListener("message", handler);
+            handlerRef.current = null;
+            if (watchdogRef.current) {
+                clearTimeout(watchdogRef.current);
+                watchdogRef.current = null;
+            }
+            if (payload.error) {
+                setStatus("error");
+                setError(payload.errorDescription || payload.error);
+                cleanup();
+                return;
+            }
+            if (!payload.code) {
+                setStatus("error");
+                setError("PayPal returned no authorization code.");
+                cleanup();
+                return;
+            }
+            setStatus("exchanging");
+            void client
+                .completeLifeOpsPaypalLink({ code: payload.code })
+                .then((result) => {
+                setStatus("done");
+                setCapability(result.capability);
+                onLinked?.(result.source, result.capability);
+            })
+                .catch((err) => {
+                setStatus("error");
+                setError(err instanceof Error ? err.message : String(err));
+            })
+                .finally(() => {
+                cleanup();
+            });
+        };
+        handlerRef.current = handler;
+        window.addEventListener("message", handler);
+        watchdogRef.current = setTimeout(() => {
+            setStatus("error");
+            setError("PayPal authorization timed out. Try again.");
+            cleanup();
+        }, POPUP_TIMEOUT_MS);
+    }, [cleanup, onLinked]);
+    const disabled = !elizaCloudConnected || status === "preparing" || status === "exchanging";
+    let buttonLabel = label;
+    if (status === "preparing")
+        buttonLabel = "Preparing PayPal…";
+    else if (status === "awaiting_user")
+        buttonLabel = "Waiting for PayPal…";
+    else if (status === "exchanging")
+        buttonLabel = "Linking…";
+    else if (status === "done")
+        buttonLabel = "Linked";
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, title: !elizaCloudConnected
+                    ? "PayPal link is not available — Eliza Cloud not connected, or PAYPAL_* env vars not set in cloud."
+                    : undefined, className: "inline-flex items-center gap-1.5 rounded-md border border-border/30 bg-bg-muted/30 px-2.5 py-1 text-xs font-medium hover:bg-bg-muted/60 disabled:cursor-not-allowed disabled:opacity-50", children: [status === "preparing" || status === "exchanging" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true })) : (_jsx(Wallet, { className: "h-3.5 w-3.5", "aria-hidden": true })), buttonLabel] }), error ? (_jsxs("span", { className: "text-[11px] text-rose-300", children: ["PayPal: ", error] })) : null, status === "done" && capability && !capability.hasReporting ? (_jsx("span", { className: "text-[11px] text-amber-300", children: "PayPal connected, but this account is personal-tier. Use CSV export from paypal.com \u2192 Activity \u2192 Statements to import transactions." })) : null] }));
+}

package/apps/app-lifeops/src/components/LifeOpsMoneySection.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from "react";
+export declare function LifeOpsMoneySection(): JSX.Element | null;
+//# sourceMappingURL=LifeOpsMoneySection.d.ts.map

package/apps/app-lifeops/src/components/LifeOpsMoneySection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsMoneySection.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsMoneySection.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,OAAO,CAAC;AAkG5E,wBAAgB,mBAAmB,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CA4uBxD"}

package/apps/app-lifeops/src/components/LifeOpsMoneySection.js

@@ -0,0 +1,373 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client, useApp, } from "@elizaos/app-core";
+import { Ban, CalendarClock, CheckCircle2, CreditCard, DollarSign, FilePlus2, Loader2, MessageCircle, RefreshCw, Sparkles, Timer, Trash2, TrendingDown, Upload, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLifeOpsChatLauncher } from "./LifeOpsChatAdapter.js";
+import { LifeOpsLinkBankButton } from "./LifeOpsLinkBankButton.js";
+import { LifeOpsLinkPaypalButton } from "./LifeOpsLinkPaypalButton.js";
+function formatUsd(value) {
+    return `$${value.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    })}`;
+}
+function formatDate(iso) {
+    try {
+        return new Date(iso).toLocaleDateString(undefined, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+        });
+    }
+    catch {
+        return iso.slice(0, 10);
+    }
+}
+const RELATIVE_TIME_UNITS = [
+    { unit: "year", ms: 365 * 24 * 60 * 60 * 1000 },
+    { unit: "month", ms: 30 * 24 * 60 * 60 * 1000 },
+    { unit: "day", ms: 24 * 60 * 60 * 1000 },
+    { unit: "hour", ms: 60 * 60 * 1000 },
+    { unit: "minute", ms: 60 * 1000 },
+];
+function formatRelative(iso) {
+    const ts = Date.parse(iso);
+    if (!Number.isFinite(ts))
+        return iso.slice(0, 10);
+    const diffMs = ts - Date.now();
+    const absMs = Math.abs(diffMs);
+    if (absMs < 30_000)
+        return "just now";
+    const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+    for (const { unit, ms } of RELATIVE_TIME_UNITS) {
+        if (absMs >= ms) {
+            return formatter.format(Math.round(diffMs / ms), unit);
+        }
+    }
+    return formatter.format(Math.round(diffMs / 1000), "second");
+}
+function formatDueRelative(dueDateIso) {
+    // dueDateIso is YYYY-MM-DD; treat as UTC noon to avoid TZ-shift edge cases.
+    const due = new Date(`${dueDateIso}T12:00:00.000Z`).getTime();
+    if (!Number.isFinite(due))
+        return dueDateIso;
+    const today = new Date();
+    const todayUtc = Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), 12);
+    const diffDays = Math.round((due - todayUtc) / (24 * 60 * 60 * 1000));
+    if (diffDays === 0)
+        return "due today";
+    if (diffDays === 1)
+        return "due tomorrow";
+    if (diffDays > 1)
+        return `due in ${diffDays}d`;
+    return `${Math.abs(diffDays)}d overdue`;
+}
+function formatCredits(value) {
+    return value.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+}
+function cadenceLabel(cadence) {
+    switch (cadence) {
+        case "weekly":
+            return "Weekly";
+        case "biweekly":
+            return "Every 2 weeks";
+        case "monthly":
+            return "Monthly";
+        case "quarterly":
+            return "Quarterly";
+        case "annual":
+            return "Annual";
+        case "irregular":
+            return "Irregular";
+    }
+}
+export function LifeOpsMoneySection() {
+    const [dashboard, setDashboard] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [importStatus, setImportStatus] = useState(null);
+    const { openLifeOpsChat } = useLifeOpsChatLauncher();
+    const { elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, } = useApp();
+    const [creditTransactions, setCreditTransactions] = useState(null);
+    const [creditTransactionsLoading, setCreditTransactionsLoading] = useState(false);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const dash = await client.getLifeOpsPaymentsDashboard({ windowDays: 30 });
+            setDashboard(dash);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const refreshCreditTransactions = useCallback(async () => {
+        if (!elizaCloudConnected) {
+            setCreditTransactions(null);
+            return;
+        }
+        setCreditTransactionsLoading(true);
+        try {
+            const result = await client.getCloudBillingHistory();
+            const list = result.data ??
+                result.items ??
+                result.history ??
+                [];
+            setCreditTransactions(list);
+        }
+        catch {
+            // 401/404/network → no data yet, keep section quiet rather than erroring loudly.
+            setCreditTransactions([]);
+        }
+        finally {
+            setCreditTransactionsLoading(false);
+        }
+    }, [elizaCloudConnected]);
+    useEffect(() => {
+        void refreshCreditTransactions();
+    }, [refreshCreditTransactions]);
+    const onAddSource = useCallback(async () => {
+        const label = window.prompt("Source label (e.g. 'Chase Checking', 'Amex'):");
+        if (!label)
+            return;
+        const kindAnswer = window.prompt("Source kind — csv / manual / plaid / paypal:", "csv");
+        const kind = (kindAnswer ?? "csv").trim().toLowerCase();
+        if (!["csv", "manual", "plaid", "paypal"].includes(kind)) {
+            window.alert("Invalid kind.");
+            return;
+        }
+        const institution = window.prompt("Institution (optional):", "") ?? undefined;
+        try {
+            await client.addLifeOpsPaymentSource({
+                kind: kind,
+                label,
+                institution: institution && institution.trim().length > 0 ? institution : null,
+            });
+            await refresh();
+        }
+        catch (err) {
+            window.alert(`Failed to add source: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onImportCsv = useCallback(async (source) => {
+        const csvText = window.prompt(`Paste CSV content for "${source.label}" (first row = header):`);
+        if (!csvText || csvText.trim().length === 0)
+            return;
+        setImportStatus(`Importing CSV into ${source.label}…`);
+        try {
+            const result = await client.importLifeOpsPaymentCsv({
+                sourceId: source.id,
+                csvText,
+            });
+            setImportStatus(`Imported ${result.inserted} new transactions (${result.skipped} already on file${result.errors.length > 0 ? `, ${result.errors.length} errors` : ""}).`);
+            await refresh();
+        }
+        catch (err) {
+            setImportStatus(null);
+            window.alert(`CSV import failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onDeleteSource = useCallback(async (source) => {
+        if (!window.confirm(`Delete source "${source.label}"? This removes its transactions too.`)) {
+            return;
+        }
+        try {
+            await client.deleteLifeOpsPaymentSource(source.id);
+            await refresh();
+        }
+        catch (err) {
+            window.alert(`Delete failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onSyncPlaid = useCallback(async (source) => {
+        setImportStatus(`Syncing ${source.label} via Plaid…`);
+        try {
+            const result = await client.syncLifeOpsPlaidTransactions({
+                sourceId: source.id,
+            });
+            setImportStatus(`Plaid sync: ${result.inserted} new transaction${result.inserted === 1 ? "" : "s"} (${result.skipped} already on file).`);
+            await refresh();
+        }
+        catch (err) {
+            setImportStatus(null);
+            window.alert(`Plaid sync failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onSyncPaypal = useCallback(async (source) => {
+        setImportStatus(`Syncing ${source.label} via PayPal…`);
+        try {
+            const result = await client.syncLifeOpsPaypalTransactions({
+                sourceId: source.id,
+                windowDays: 90,
+            });
+            if (result.fallback === "csv_export") {
+                setImportStatus("PayPal Reporting API isn't available for this account (typically personal-tier). Use the CSV export from paypal.com → Activity → Statements.");
+            }
+            else {
+                setImportStatus(`PayPal sync: ${result.inserted} new transaction${result.inserted === 1 ? "" : "s"} (${result.skipped} already on file).`);
+            }
+            await refresh();
+        }
+        catch (err) {
+            setImportStatus(null);
+            window.alert(`PayPal sync failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onScanGmail = useCallback(async () => {
+        try {
+            const result = await client.scanLifeOpsEmailSubscriptions();
+            window.alert(`Scan complete. ${result.summary.uniqueSenderCount} senders found (${result.summary.oneClickEligibleCount} one-click eligible).`);
+        }
+        catch (err) {
+            window.alert(`Scan failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, []);
+    const onChatAboutRecurringCharge = useCallback((charge) => {
+        openLifeOpsChat([
+            `Help me review this recurring charge from ${charge.merchantDisplay}.`,
+            `Cadence: ${cadenceLabel(charge.cadence)}.`,
+            `Average charge: ${formatUsd(charge.averageAmountUsd)}.`,
+            `Annualized cost: ${formatUsd(charge.annualizedCostUsd)}.`,
+            `Last charged: ${formatDate(charge.latestSeenAt)}.`,
+            "If it makes sense, prepare the cancellation steps before doing anything destructive.",
+        ].join(" "));
+    }, [openLifeOpsChat]);
+    const onCancelRecurringCharge = useCallback(async (charge, playbookKey) => {
+        try {
+            const summary = (await client.cancelLifeOpsSubscription({
+                serviceSlug: playbookKey,
+                executor: "user_browser",
+                confirmed: false,
+            }));
+            const status = summary.cancellation.status;
+            if (status === "completed" || status === "already_canceled") {
+                window.alert(`${summary.cancellation.serviceName} cancellation: ${status.replace("_", " ")}.`);
+                await refresh();
+                return;
+            }
+            if (status === "awaiting_confirmation" ||
+                status === "needs_login" ||
+                status === "needs_mfa" ||
+                status === "phone_only" ||
+                status === "chat_only" ||
+                status === "blocked") {
+                openLifeOpsChat([
+                    `Cancellation for ${charge.merchantDisplay} is in state "${status}".`,
+                    "Continue in chat — I'll guide you through the next step (login, MFA, retention prompts, or phone/chat handoff).",
+                ].join(" "));
+                return;
+            }
+            if (status === "failed" || status === "unsupported_surface") {
+                // PLAYBOOK_NOT_IMPLEMENTED comes through as `failed` with the error
+                // string carrying the prefix and the managementUrl populated. Open
+                // the management page in a new tab so the user can finish manually.
+                const error = summary.cancellation.error ?? "";
+                const url = summary.cancellation.managementUrl;
+                if (error.includes("PLAYBOOK_NOT_IMPLEMENTED") && url) {
+                    window.open(url, "_blank", "noopener");
+                    return;
+                }
+                window.alert(`Cancellation could not start: ${error || status}`);
+                return;
+            }
+        }
+        catch (err) {
+            window.alert(`Cancellation failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [openLifeOpsChat, refresh]);
+    const onMarkBillPaid = useCallback(async (bill) => {
+        try {
+            await client.markLifeOpsBillPaid({ billId: bill.id });
+            await refresh();
+        }
+        catch (err) {
+            window.alert(`Mark paid failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onSnoozeBill = useCallback(async (bill) => {
+        try {
+            await client.snoozeLifeOpsBill({ billId: bill.id, days: 7 });
+            await refresh();
+        }
+        catch (err) {
+            window.alert(`Snooze failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }, [refresh]);
+    const onChatAboutBill = useCallback((bill) => {
+        openLifeOpsChat([
+            `Help me look at this bill from ${bill.merchant}.`,
+            `Amount: ${formatUsd(bill.amountUsd)} ${bill.currency}.`,
+            `Due: ${bill.dueDate} (${formatDueRelative(bill.dueDate)}).`,
+            "What should I do about it?",
+        ].join(" "));
+    }, [openLifeOpsChat]);
+    const playbookHitsByMerchant = useMemo(() => {
+        const map = new Map();
+        if (!dashboard?.recurringPlaybookHits)
+            return map;
+        for (const hit of dashboard.recurringPlaybookHits) {
+            map.set(hit.merchantNormalized, hit.playbookKey);
+        }
+        return map;
+    }, [dashboard]);
+    const annualRecurring = useMemo(() => {
+        if (!dashboard)
+            return 0;
+        return dashboard.recurring.reduce((total, charge) => total + charge.annualizedCostUsd, 0);
+    }, [dashboard]);
+    if (loading && !dashboard) {
+        return (_jsxs("div", { className: "flex items-center justify-center gap-2 p-6 text-sm text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Loading money dashboard\u2026"] }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "space-y-3 p-6", children: [_jsx("div", { className: "rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-300", children: error }), _jsxs("button", { type: "button", onClick: () => void refresh(), className: "inline-flex items-center gap-2 rounded-md border border-border/30 bg-bg-muted/30 px-3 py-1.5 text-xs font-medium text-txt hover:bg-bg-muted/60", children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5" }), " Retry"] })] }));
+    }
+    const dash = dashboard;
+    if (!dash)
+        return null;
+    return (_jsxs("div", { className: "flex h-full w-full flex-col gap-4 p-4", "data-testid": "lifeops-money-section", children: [_jsxs("header", { className: "flex items-center justify-between", children: [_jsx("div", { children: _jsxs("h1", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": true }), " Money"] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => void onScanGmail(), "aria-label": "Scan Gmail for subscription senders", className: "inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Scan Gmail for subscription senders", children: _jsx(Upload, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: () => {
+                                    void refresh();
+                                    void refreshCreditTransactions();
+                                }, "aria-label": "Refresh dashboard", className: "inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Refresh dashboard", children: _jsx(RefreshCw, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })] }), importStatus ? (_jsx("div", { className: "rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-300", children: importStatus })) : null, _jsx(CloudCreditsBalance, { connected: elizaCloudConnected, balance: elizaCloudCredits, low: elizaCloudCreditsLow, critical: elizaCloudCreditsCritical }), _jsxs("section", { className: "grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Kpi, { label: `Last ${dash.spending.windowDays}d spend`, value: formatUsd(dash.spending.totalSpendUsd), icon: _jsx(TrendingDown, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(Kpi, { label: "Monthly recurring", value: formatUsd(dash.spending.recurringSpendUsd), icon: _jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(Kpi, { label: "Annualized recurring", value: formatUsd(annualRecurring), icon: _jsx(DollarSign, { className: "h-4 w-4", "aria-hidden": true }) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", children: [_jsxs("header", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Sources" }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(LifeOpsLinkBankButton, { onLinked: () => void refresh() }), _jsx(LifeOpsLinkPaypalButton, { onLinked: () => void refresh() }), _jsx("button", { type: "button", onClick: () => void onAddSource(), "aria-label": "Add a source manually", className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Add a source manually (CSV / manual)", children: _jsx(FilePlus2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })] }), dash.sources.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: "No sources." })) : (_jsx("ul", { className: "space-y-2", children: dash.sources.map((source) => (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded border border-border/20 bg-bg/40 px-3 py-2 text-xs", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border/20 bg-bg-muted/30 font-mono text-[10px] uppercase text-muted", children: source.kind.slice(0, 2) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-txt", children: source.label }), _jsx("div", { className: "truncate text-[11px] text-muted", children: source.institution ??
+                                                                        (source.lastSyncedAt
+                                                                            ? formatDate(source.lastSyncedAt)
+                                                                            : `${source.transactionCount} tx`) })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [source.kind === "csv" ? (_jsx("button", { type: "button", onClick: () => void onImportCsv(source), "aria-label": `Import CSV for ${source.label}`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Import CSV", children: _jsx(Upload, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, source.kind === "plaid" ? (_jsx("button", { type: "button", onClick: () => void onSyncPlaid(source), "aria-label": `Sync ${source.label}`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Pull the latest transactions from Plaid", children: _jsx(RefreshCw, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, source.kind === "paypal" ? (_jsx("button", { type: "button", onClick: () => void onSyncPaypal(source), "aria-label": `Sync ${source.label}`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Pull recent PayPal transactions (Reporting API)", children: _jsx(RefreshCw, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, _jsx("button", { type: "button", onClick: () => void onDeleteSource(source), "aria-label": `Remove ${source.label}`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full text-muted hover:bg-bg-muted/40 hover:text-rose-300", title: "Remove source", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }, source.id))) }))] }), _jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", children: [_jsx("h2", { className: "mb-2 text-sm font-semibold", children: "Top categories" }), dash.spending.topCategories.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: "No categories." })) : (_jsx("ul", { className: "space-y-1.5", children: dash.spending.topCategories.map((category) => (_jsxs("li", { className: "flex items-center justify-between text-xs", children: [_jsx("span", { className: "truncate text-txt/85", children: category.category }), _jsx("span", { className: "tabular-nums text-muted", children: formatUsd(category.totalUsd) })] }, category.category))) }))] })] }), _jsx(CloudCreditsActivity, { connected: elizaCloudConnected, loading: creditTransactionsLoading, transactions: creditTransactions })] }), _jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", "data-testid": "lifeops-money-bills", children: [_jsx("header", { className: "mb-2 flex items-center justify-between gap-2", children: _jsxs("h2", { className: "flex items-center gap-1.5 text-sm font-semibold", children: [_jsx(CalendarClock, { className: "h-3.5 w-3.5", "aria-hidden": true }), " Upcoming bills"] }) }), (dash.upcomingBills ?? []).length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: "No bills detected from email yet." })) : (_jsx("ul", { className: "space-y-1.5", children: (dash.upcomingBills ?? []).map((bill) => (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded border border-border/10 bg-bg/40 px-2.5 py-1.5 text-xs", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-txt", children: bill.merchant }), _jsxs("div", { className: "mt-0.5 flex items-center gap-2 text-[11px] text-muted", children: [_jsx("span", { children: formatDate(bill.dueDate) }), _jsx("span", { className: "rounded bg-bg-muted/40 px-1.5 py-0.5 font-mono text-[10px]", children: formatDueRelative(bill.dueDate) })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "tabular-nums font-semibold text-amber-300", children: formatUsd(bill.amountUsd) }), _jsx("button", { type: "button", onClick: () => void onMarkBillPaid(bill), "aria-label": `Mark ${bill.merchant} paid`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-emerald-500/30 bg-emerald-500/10 text-emerald-200 hover:bg-emerald-500/20", title: "Mark this bill as paid", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: () => void onSnoozeBill(bill), "aria-label": `Snooze ${bill.merchant} one week`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Push the due date out a week", children: _jsx(Timer, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: () => onChatAboutBill(bill), "aria-label": `Open chat about ${bill.merchant}`, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Open chat about this bill", children: _jsx(MessageCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })] }, bill.id))) }))] }), _jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", children: [_jsx("header", { className: "mb-2 flex items-center justify-between", children: _jsx("h2", { className: "text-sm font-semibold", children: "Recurring charges" }) }), dash.recurring.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: "No recurring charges." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[640px] text-xs", children: [_jsx("thead", { className: "text-left text-[11px] uppercase tracking-wide text-muted", children: _jsxs("tr", { children: [_jsx("th", { className: "py-1.5 pr-3 font-medium", children: "Merchant" }), _jsx("th", { className: "py-1.5 pr-3 font-medium", children: "Cadence" }), _jsx("th", { className: "py-1.5 pr-3 text-right font-medium", children: "Typical" }), _jsx("th", { className: "py-1.5 pr-3 text-right font-medium", children: "Annualized" }), _jsx("th", { className: "py-1.5 pr-3 font-medium", children: "Last charged" }), _jsx("th", { className: "py-1.5 font-medium", children: "Actions" })] }) }), _jsx("tbody", { children: dash.recurring.map((charge) => (_jsxs("tr", { className: "border-t border-border/10", children: [_jsx("td", { className: "py-1.5 pr-3 font-medium text-txt", children: charge.merchantDisplay }), _jsx("td", { className: "py-1.5 pr-3 text-muted", children: cadenceLabel(charge.cadence) }), _jsx("td", { className: "py-1.5 pr-3 text-right tabular-nums", children: formatUsd(charge.averageAmountUsd) }), _jsx("td", { className: "py-1.5 pr-3 text-right tabular-nums font-semibold text-rose-300", children: formatUsd(charge.annualizedCostUsd) }), _jsx("td", { className: "py-1.5 pr-3 text-muted", children: formatDate(charge.latestSeenAt) }), _jsxs("td", { className: "py-1.5 text-muted", children: [(() => {
+                                                        const playbookKey = playbookHitsByMerchant.get(charge.merchantNormalized);
+                                                        if (playbookKey) {
+                                                            return (_jsx("button", { type: "button", onClick: () => void onCancelRecurringCharge(charge, playbookKey), "aria-label": `Cancel ${charge.merchantDisplay}`, className: "mr-1 inline-flex h-7 w-7 items-center justify-center rounded-full border border-rose-500/40 bg-rose-500/10 text-rose-200 hover:bg-rose-500/20", title: `Open the cancellation flow for ${charge.merchantDisplay}`, children: _jsx(Ban, { className: "h-3.5 w-3.5", "aria-hidden": true }) }));
+                                                        }
+                                                        return null;
+                                                    })(), _jsx("button", { type: "button", onClick: () => onChatAboutRecurringCharge(charge), "aria-label": `Open chat about ${charge.merchantDisplay}`, className: "mr-1 inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/30 bg-bg-muted/30 text-muted hover:bg-bg-muted/60 hover:text-txt", title: "Open chat with this recurring charge attached", children: _jsx(MessageCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })] }, charge.merchantNormalized))) })] }) }))] }), dash.spending.topMerchants.length > 0 ? (_jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", children: [_jsx("h2", { className: "mb-2 text-sm font-semibold", children: "Top merchants" }), _jsx("ul", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: dash.spending.topMerchants.map((merchant) => (_jsxs("li", { className: "flex items-center justify-between rounded border border-border/10 bg-bg/40 px-2 py-1 text-xs", children: [_jsx("span", { className: "truncate text-txt/85", children: merchant.merchantDisplay }), _jsxs("span", { className: "tabular-nums text-muted", children: [formatUsd(merchant.totalUsd), " \u00B7 ", merchant.transactionCount, "\u00D7"] })] }, merchant.merchantNormalized))) })] })) : null, loading ? (_jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true }), " Refreshing\u2026"] })) : null] }));
+}
+function Kpi(props) {
+    return (_jsxs("div", { className: "rounded-lg border border-border/20 bg-bg/30 px-3 py-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted", children: [props.icon, _jsx("span", { children: props.label })] }), _jsx("div", { className: "mt-1 text-lg font-semibold tabular-nums", children: props.value })] }));
+}
+function CloudCreditsBalance(props) {
+    if (!props.connected) {
+        return (_jsxs("section", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/20 bg-bg/30 px-4 py-3 text-xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Eliza Cloud"] }), _jsx("a", { href: "#/settings", className: "font-medium text-txt underline-offset-2 hover:underline", children: "Settings" })] }));
+    }
+    const showLoading = props.balance === null;
+    const accentColor = props.critical
+        ? "text-rose-300"
+        : props.low
+            ? "text-amber-300"
+            : "text-emerald-300";
+    return (_jsxs("section", { className: "flex items-center justify-between gap-4 rounded-lg border border-border/20 bg-bg/40 px-4 py-3", title: "Eliza Cloud balance", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "rounded-md border border-border/30 bg-bg-muted/30 p-2 text-txt/80", children: _jsx(Sparkles, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("div", { children: showLoading ? (_jsx("div", { className: "mt-1 h-6 w-32 animate-pulse rounded bg-bg-muted/40" })) : (_jsx("div", { className: `text-2xl font-semibold tabular-nums ${accentColor}`, children: formatCredits(props.balance ?? 0) })) })] }), props.low && !showLoading ? (_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-amber-300 shadow-[0_0_0_3px_rgba(245,158,11,0.18)]", title: "Low balance" })) : null] }));
+}
+function CloudCreditsActivity(props) {
+    if (!props.connected)
+        return null;
+    const recent = (props.transactions ?? []).slice(0, 10);
+    return (_jsxs("section", { className: "rounded-lg border border-border/20 bg-bg/30 p-3", children: [_jsxs("header", { className: "mb-2 flex items-center justify-between", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Credits" }), props.loading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted", "aria-hidden": true })) : null] }), recent.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: props.loading ? "Loading…" : "No recent activity" })) : (_jsx("ul", { className: "space-y-1.5", children: recent.map((txn) => {
+                    const isCredit = txn.amount >= 0;
+                    return (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded border border-border/10 bg-bg/40 px-2.5 py-1.5 text-xs", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-txt/90", children: txn.description ?? (isCredit ? "Top-up" : "Usage") }), _jsx("div", { className: "mt-0.5 text-[11px] text-muted", children: formatRelative(txn.createdAt) })] }), _jsxs("span", { className: `shrink-0 tabular-nums font-semibold ${isCredit ? "text-emerald-300" : "text-rose-300"}`, children: [isCredit ? "+" : "−", formatCredits(Math.abs(txn.amount))] })] }, txn.id));
+                }) }))] }));
+}

package/apps/app-lifeops/src/components/LifeOpsNavRail.d.ts

@@ -0,0 +1,9 @@
+import type { LifeOpsSection } from "../hooks/useLifeOpsSection.js";
+interface LifeOpsNavRailProps {
+    activeSection: LifeOpsSection;
+    onNavigate: (section: LifeOpsSection) => void;
+    collapsible?: boolean;
+}
+export declare function LifeOpsNavRail({ activeSection, onNavigate, collapsible, }: LifeOpsNavRailProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LifeOpsNavRail.d.ts.map

package/apps/app-lifeops/src/components/LifeOpsNavRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsNavRail.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsNavRail.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpE,UAAU,mBAAmB;IAC3B,aAAa,EAAE,cAAc,CAAC;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsFD,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,UAAU,EACV,WAAkB,GACnB,EAAE,mBAAmB,2CA8FrB"}