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

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

@@ -0,0 +1,490 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, client, Input, openExternalUrl, Spinner, useMediaQuery, useApp, } from "@elizaos/app-core";
+import { LIFEOPS_INBOX_CHANNELS, } from "@elizaos/shared";
+import { AlarmClock, ArrowLeft, AtSign, CalendarClock, ExternalLink, MessageCircle, MessageSquare, MessageSquareReply, Phone, Search, Send, Shield, Smartphone, Sparkles, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import { useInbox, } from "../hooks/useInbox.js";
+import { buildMessageChatPrefill, buildReplyPrefill, useLifeOpsChatLauncher, } from "./LifeOpsChatAdapter.js";
+import { useLifeOpsSelection, } from "./LifeOpsSelectionContext.js";
+const CHANNEL_STYLES = {
+    gmail: {
+        label: "Gmail",
+        bg: "bg-rose-500/16",
+        ring: "ring-rose-500/40",
+        text: "text-rose-300",
+        icon: _jsx(AtSign, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    x_dm: {
+        label: "X DMs",
+        bg: "bg-zinc-500/18",
+        ring: "ring-zinc-400/40",
+        text: "text-zinc-200",
+        icon: _jsx(MessageSquareReply, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    discord: {
+        label: "Discord",
+        bg: "bg-indigo-500/18",
+        ring: "ring-indigo-500/40",
+        text: "text-indigo-300",
+        icon: _jsx(MessageCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    telegram: {
+        label: "Telegram",
+        bg: "bg-sky-500/18",
+        ring: "ring-sky-500/40",
+        text: "text-sky-300",
+        icon: _jsx(Send, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    signal: {
+        label: "Signal",
+        bg: "bg-blue-500/18",
+        ring: "ring-blue-500/40",
+        text: "text-blue-300",
+        icon: _jsx(Shield, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    imessage: {
+        label: "iMessage",
+        bg: "bg-emerald-500/18",
+        ring: "ring-emerald-500/40",
+        text: "text-emerald-300",
+        icon: _jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    whatsapp: {
+        label: "WhatsApp",
+        bg: "bg-lime-500/18",
+        ring: "ring-lime-500/40",
+        text: "text-lime-300",
+        icon: _jsx(Smartphone, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+    sms: {
+        label: "SMS",
+        bg: "bg-amber-500/18",
+        ring: "ring-amber-500/40",
+        text: "text-amber-300",
+        icon: _jsx(Phone, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    },
+};
+const ALL_CHANNEL_STYLE = {
+    label: "All",
+    bg: "bg-violet-500/16",
+    ring: "ring-violet-500/40",
+    text: "text-violet-300",
+    icon: _jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+};
+export const LIFEOPS_MESSAGE_CHANNELS = LIFEOPS_INBOX_CHANNELS.filter((channel) => channel !== "gmail");
+export const LIFEOPS_MAIL_CHANNELS = ["gmail"];
+const SMALL_GROUP_PARTICIPANT_CAP = 15;
+const IMPORTANT_PRIORITY_SCORE_THRESHOLD = 70;
+const MISSED_REPLY_GAP_MS = 24 * 60 * 60 * 1000;
+const MISSED_MIN_PRIORITY = 50;
+const ALL_GMAIL_ACCOUNTS = "__all__";
+function styleFor(channel) {
+    return CHANNEL_STYLES[channel];
+}
+function styleForFilter(channel) {
+    return channel === "all"
+        ? ALL_CHANNEL_STYLE
+        : CHANNEL_STYLES[channel];
+}
+function messagesForThreadGroup(group) {
+    const messages = Array.isArray(group.messages) ? group.messages : [];
+    return messages.length > 0 ? messages : [group.latestMessage];
+}
+function computeMissedAgeMs(message) {
+    if (typeof message.repliedAt === "string" && message.repliedAt.length > 0) {
+        return null;
+    }
+    const received = Date.parse(message.receivedAt);
+    if (!Number.isFinite(received))
+        return null;
+    const age = Date.now() - received;
+    return age >= MISSED_REPLY_GAP_MS ? age : null;
+}
+function formatMissedAge(ageMs) {
+    const days = Math.floor(ageMs / (24 * 60 * 60 * 1000));
+    if (days >= 1)
+        return `${days}d ago`;
+    const hours = Math.max(1, Math.floor(ageMs / (60 * 60 * 1000)));
+    return `${hours}h ago`;
+}
+function formatRelativeTime(receivedAt) {
+    const parsed = Date.parse(receivedAt);
+    if (!Number.isFinite(parsed))
+        return "";
+    const diffMs = Date.now() - parsed;
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1)
+        return "now";
+    if (diffMin < 60)
+        return `${diffMin}m`;
+    const diffH = Math.floor(diffMin / 60);
+    if (diffH < 24)
+        return `${diffH}h`;
+    const diffD = Math.floor(diffH / 24);
+    return `${diffD}d`;
+}
+function formatAbsoluteTime(receivedAt) {
+    const parsed = Date.parse(receivedAt);
+    return Number.isFinite(parsed) ? new Date(parsed).toLocaleString() : "";
+}
+function initialsFor(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    if (parts.length === 1)
+        return parts[0]?.slice(0, 2).toUpperCase() ?? "?";
+    return `${parts[0]?.[0] ?? ""}${parts[1]?.[0] ?? ""}`.toUpperCase();
+}
+function ChannelChip({ channel, active, count, unread, onClick, }) {
+    const style = styleForFilter(channel);
+    return (_jsxs("button", { type: "button", onClick: () => onClick(channel), "aria-pressed": active, className: [
+            "group inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors",
+            active
+                ? `${style.bg} ${style.text} ring-1 ${style.ring}`
+                : "bg-bg-muted/30 text-muted hover:text-txt",
+        ].join(" "), children: [_jsx("span", { className: `shrink-0 ${active ? style.text : "text-muted/80"}`, children: style.icon }), _jsx("span", { children: style.label }), count > 0 ? (_jsx("span", { className: `ml-0.5 rounded-full px-1.5 text-[10px] tabular-nums ${unread > 0 ? `${style.text} bg-white/4` : "text-muted bg-white/4"}`, children: unread > 0 ? unread : count })) : null] }));
+}
+function GmailAccountChip({ label, active, onClick, }) {
+    const style = CHANNEL_STYLES.gmail;
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-pressed": active, className: [
+            "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors",
+            active
+                ? `${style.bg} ${style.text} ring-1 ${style.ring}`
+                : "bg-bg-muted/30 text-muted hover:text-txt",
+        ].join(" "), children: [_jsx("span", { className: `shrink-0 ${active ? style.text : "text-muted/80"}`, children: style.icon }), _jsx("span", { children: label })] }));
+}
+function ThreadRow({ group, selected, onSelect, onReply, showAccountSubtitle, }) {
+    const message = group.latestMessage;
+    const style = styleFor(message.channel);
+    const subject = message.subject?.trim() || `${style.label} message`;
+    const score = group.maxPriorityScore ?? message.priorityScore ?? 0;
+    const category = group.priorityCategory ?? message.priorityCategory ?? null;
+    const isImportant = score >= IMPORTANT_PRIORITY_SCORE_THRESHOLD || category === "important";
+    const isPlanning = category === "planning";
+    const missedAge = computeMissedAgeMs(message);
+    const isMissed = missedAge !== null && score >= MISSED_MIN_PRIORITY;
+    const senderLabel = group.chatType === "group" && typeof group.participantCount === "number"
+        ? `${message.sender.displayName} (${group.participantCount})`
+        : message.sender.displayName;
+    return (_jsxs("div", { role: "option", "aria-selected": selected, tabIndex: 0, onClick: onSelect, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect();
+            }
+        }, className: [
+            "group flex cursor-pointer items-start gap-3 border-l-2 px-3 py-2.5 transition-colors",
+            selected
+                ? "border-accent bg-accent/8"
+                : message.unread
+                    ? "border-transparent bg-bg/30 hover:bg-bg-muted/30"
+                    : "border-transparent hover:bg-bg-muted/20",
+        ].join(" "), children: [_jsxs("div", { className: "relative h-8 w-8 shrink-0", children: [_jsx("div", { className: `flex h-full w-full items-center justify-center overflow-hidden rounded-full text-[11px] font-semibold ${style.bg} ${style.text}`, children: message.sender.avatarUrl ? (_jsx("img", { src: message.sender.avatarUrl, alt: "", "aria-hidden": true, className: "h-full w-full object-cover" })) : (initialsFor(message.sender.displayName)) }), _jsx("span", { className: `pointer-events-none absolute -bottom-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-bg ring-2 ring-bg ${style.text} [&>svg]:h-2.5 [&>svg]:w-2.5`, "aria-hidden": true, children: style.icon })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: `truncate text-sm ${message.unread
+                                    ? "font-semibold text-txt"
+                                    : "font-medium text-txt/85"}`, children: senderLabel }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [group.totalCount > 1 ? (_jsx("span", { className: "text-[10px] tabular-nums text-muted", children: group.totalCount })) : null, group.unreadCount > 0 ? (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent" })) : null, _jsx("span", { className: "text-[10px] tabular-nums text-muted", children: formatRelativeTime(message.receivedAt) })] })] }), _jsx("div", { className: "mt-0.5 truncate text-xs text-muted", children: subject }), _jsx("div", { className: "mt-0.5 line-clamp-1 text-[11px] text-muted/70", children: message.snippet }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [isImportant ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-500/16 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300 ring-1 ring-amber-500/40", title: `Priority score ${score}`, children: [_jsx(Sparkles, { className: "h-2.5 w-2.5", "aria-hidden": true }), "Important"] })) : null, isPlanning ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-sky-500/16 px-1.5 py-0.5 text-[10px] font-semibold text-sky-300 ring-1 ring-sky-500/40", children: [_jsx(CalendarClock, { className: "h-2.5 w-2.5", "aria-hidden": true }), "Planning"] })) : null, showAccountSubtitle && message.gmailAccountEmail ? (_jsx("span", { className: "truncate text-[10px] text-muted/70", children: message.gmailAccountEmail })) : null] })] }), _jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [isMissed && missedAge !== null ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-500/16 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300 ring-1 ring-amber-500/40", title: "Unreplied for over 24h", children: [_jsx(AlarmClock, { className: "h-2.5 w-2.5", "aria-hidden": true }), "Missed \u00B7 ", formatMissedAge(missedAge)] })) : null, _jsx("button", { type: "button", "aria-label": "Reply", onClick: (e) => {
+                            e.stopPropagation();
+                            onReply();
+                        }, className: "mt-0.5 rounded-full p-1.5 text-muted opacity-0 transition-opacity hover:bg-bg-muted/40 hover:text-txt group-hover:opacity-100", children: _jsx(MessageSquareReply, { className: "h-3.5 w-3.5" }) })] })] }));
+}
+function MessageRow({ message, selected, onSelect, onReply, }) {
+    const style = styleFor(message.channel);
+    const subject = message.subject?.trim() || `${style.label} message`;
+    return (_jsxs("div", { role: "option", "aria-selected": selected, tabIndex: 0, onClick: onSelect, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect();
+            }
+        }, className: [
+            "group flex cursor-pointer items-start gap-3 border-l-2 px-3 py-2.5 transition-colors",
+            selected
+                ? "border-accent bg-accent/8"
+                : message.unread
+                    ? "border-transparent bg-bg/30 hover:bg-bg-muted/30"
+                    : "border-transparent hover:bg-bg-muted/20",
+        ].join(" "), children: [_jsxs("div", { className: "relative h-8 w-8 shrink-0", children: [_jsx("div", { className: `flex h-full w-full items-center justify-center overflow-hidden rounded-full text-[11px] font-semibold ${style.bg} ${style.text}`, children: message.sender.avatarUrl ? (_jsx("img", { src: message.sender.avatarUrl, alt: "", "aria-hidden": true, className: "h-full w-full object-cover" })) : (initialsFor(message.sender.displayName)) }), _jsx("span", { className: `pointer-events-none absolute -bottom-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-bg ring-2 ring-bg ${style.text} [&>svg]:h-2.5 [&>svg]:w-2.5`, "aria-hidden": true, children: style.icon })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: `truncate text-sm ${message.unread
+                                    ? "font-semibold text-txt"
+                                    : "font-medium text-txt/85"}`, children: message.sender.displayName }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [message.unread ? (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent" })) : null, _jsx("span", { className: "text-[10px] tabular-nums text-muted", children: formatRelativeTime(message.receivedAt) })] })] }), _jsx("div", { className: "mt-0.5 truncate text-xs text-muted", children: subject }), _jsx("div", { className: "mt-0.5 line-clamp-1 text-[11px] text-muted/70", children: message.snippet })] }), _jsx("button", { type: "button", "aria-label": "Reply", onClick: (e) => {
+                    e.stopPropagation();
+                    onReply();
+                }, className: "mt-0.5 shrink-0 rounded-full p-1.5 text-muted opacity-0 transition-opacity hover:bg-bg-muted/40 hover:text-txt group-hover:opacity-100", children: _jsx(MessageSquareReply, { className: "h-3.5 w-3.5" }) })] }));
+}
+function ReaderPane({ threadGroup, onReply, onChat, onBack, }) {
+    const { t } = useApp();
+    const message = threadGroup?.latestMessage ?? null;
+    if (!message) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center bg-bg/20 text-xs text-muted", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx(MessageSquare, { className: "h-6 w-6 text-muted/50", "aria-hidden": true }), t("lifeopsInbox.selectMessage", {
+                        defaultValue: "Select a message",
+                    })] }) }));
+    }
+    const style = styleFor(message.channel);
+    const subject = message.subject?.trim() || `${style.label} message`;
+    const receivedAt = formatAbsoluteTime(message.receivedAt);
+    const threadMessages = threadGroup
+        ? [...messagesForThreadGroup(threadGroup)].sort((left, right) => Date.parse(left.receivedAt) - Date.parse(right.receivedAt))
+        : [];
+    return (_jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-bg/10", children: [_jsxs("div", { className: "flex items-start gap-3 border-b border-border/12 px-5 py-4", children: [onBack ? (_jsx("button", { type: "button", "aria-label": t("lifeopsInbox.backToList", {
+                            defaultValue: "Back to inbox list",
+                        }), onClick: onBack, className: "mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted transition-colors hover:bg-bg-muted/40 hover:text-txt", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) })) : null, _jsx("div", { className: `flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold ${style.bg} ${style.text}`, children: message.sender.avatarUrl ? (_jsx("img", { src: message.sender.avatarUrl, alt: "", "aria-hidden": true, className: "h-full w-full object-cover" })) : (initialsFor(message.sender.displayName)) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: subject }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted", children: [_jsxs("span", { className: `inline-flex items-center gap-1 ${style.text}`, children: [style.icon, style.label] }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: threadMessages.length > 1
+                                            ? `${threadMessages.length} messages`
+                                            : message.sender.displayName }), receivedAt ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { children: receivedAt })] })) : null] })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: _jsx("div", { className: "space-y-3", children: (threadMessages.length > 0 ? threadMessages : [message]).map((item) => {
+                        const itemStyle = styleFor(item.channel);
+                        return (_jsxs("article", { className: "rounded-xl border border-border/12 bg-bg/20 px-3 py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-txt", children: item.sender.displayName }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] text-muted", children: [_jsxs("span", { className: `inline-flex items-center gap-1 ${itemStyle.text}`, children: [itemStyle.icon, itemStyle.label] }), item.sender.email ? _jsx("span", { children: item.sender.email }) : null] })] }), _jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted", children: formatAbsoluteTime(item.receivedAt) })] }), _jsx("p", { className: "mt-3 whitespace-pre-wrap text-sm leading-relaxed text-txt/85", children: item.snippet })] }, item.id));
+                    }) }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-border/12 px-5 py-3", children: [_jsxs(Button, { size: "sm", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => onReply(message), children: [_jsx(MessageSquareReply, { className: "mr-1.5 h-3.5 w-3.5" }), t("lifeopsInbox.reply", { defaultValue: "Reply" })] }), _jsxs(Button, { size: "sm", variant: "ghost", className: "h-8 rounded-xl px-3 text-xs font-semibold text-muted", onClick: () => onChat(message), children: [_jsx(MessageSquare, { className: "mr-1.5 h-3.5 w-3.5" }), t("common.chat", { defaultValue: "Chat" })] }), message.channel === "gmail" ? (_jsx(InboxUnsubscribeButton, { message: message })) : null, message.deepLink ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "h-8 rounded-xl px-3 text-xs font-semibold text-muted", onClick: () => message.deepLink && void openExternalUrl(message.deepLink), children: [_jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }), t("lifeopsInbox.openSource", { defaultValue: "Open source" })] })) : null] })] }));
+}
+function InboxUnsubscribeButton({ message, }) {
+    const senderEmail = message.sender.email?.trim().toLowerCase() || null;
+    const [state, setState] = useState("idle");
+    const [note, setNote] = useState(null);
+    const onClick = useCallback(async () => {
+        if (!senderEmail)
+            return;
+        if (!window.confirm(`Unsubscribe from ${senderEmail} and create a Gmail filter that auto-trashes future mail?`)) {
+            return;
+        }
+        setState("working");
+        try {
+            const result = await client.unsubscribeLifeOpsEmailSender({
+                senderEmail,
+                blockAfter: true,
+                trashExisting: false,
+                confirmed: true,
+            });
+            setState(result.record.status === "succeeded" ? "done" : "error");
+            setNote(result.record.status);
+        }
+        catch (error) {
+            setState("error");
+            setNote(error instanceof Error ? error.message : String(error));
+        }
+    }, [senderEmail]);
+    // Hide entirely when the message has no parsed From email (chat channels,
+    // malformed Gmail headers). Showing a button that can't work is worse than
+    // not showing it.
+    if (!senderEmail)
+        return null;
+    const label = state === "working"
+        ? "Unsubscribing…"
+        : state === "done"
+            ? "Unsubscribed"
+            : state === "error"
+                ? `Failed${note ? `: ${note}` : ""}`
+                : "Unsubscribe";
+    return (_jsx(Button, { size: "sm", variant: "ghost", className: "h-8 rounded-xl px-3 text-xs font-semibold text-muted", disabled: state === "working" || state === "done", onClick: () => void onClick(), title: `Send RFC 8058 one-click unsubscribe to ${senderEmail} and create a Gmail filter`, children: label }));
+}
+function InboxListPane({ inbox, selectedMessageId, onSelect, onReply, emptyLabel, groupedMode, visibleThreadGroups, showGmailAccountSubtitles, }) {
+    const { t } = useApp();
+    const isEmpty = groupedMode
+        ? visibleThreadGroups.length === 0
+        : inbox.messages.length === 0;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "border-b border-border/10 px-3 py-2", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2.5 top-2 h-3.5 w-3.5 text-muted" }), _jsx(Input, { value: inbox.searchQuery, onChange: (e) => inbox.setSearchQuery(e.target.value), placeholder: t("lifeopsInbox.search", {
+                                defaultValue: "Search…",
+                            }), "aria-label": t("lifeopsInbox.searchAria", {
+                                defaultValue: "Search inbox",
+                            }), className: "h-8 pl-8 text-xs" })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", role: "listbox", "aria-label": t("lifeopsInbox.listAria", {
+                    defaultValue: "Messages",
+                }), children: isEmpty ? (_jsx("div", { className: "px-4 py-8 text-center text-xs text-muted", children: inbox.searchQuery
+                        ? t("lifeopsInbox.noResults", {
+                            defaultValue: "No matches.",
+                        })
+                        : t("lifeopsInbox.empty", {
+                            defaultValue: emptyLabel ?? "Inbox clear.",
+                        }) })) : groupedMode ? (visibleThreadGroups.map((group) => (_jsx(ThreadRow, { group: group, selected: group.latestMessage.id === selectedMessageId ||
+                        messagesForThreadGroup(group).some((message) => message.id === selectedMessageId), onSelect: () => onSelect({ messageId: group.latestMessage.id }), onReply: () => onReply(group.latestMessage), showAccountSubtitle: showGmailAccountSubtitles }, group.threadId)))) : (inbox.messages.map((msg) => (_jsx(MessageRow, { message: msg, selected: msg.id === selectedMessageId, onSelect: () => onSelect({ messageId: msg.id }), onReply: () => onReply(msg) }, msg.id)))) })] }));
+}
+export function LifeOpsInboxSection(props = {}) {
+    const ctx = useLifeOpsSelection();
+    const selection = props.selection ?? ctx.selection;
+    const onSelect = props.onSelect ?? ctx.select;
+    const { t } = useApp();
+    const { openLifeOpsChat } = useLifeOpsChatLauncher();
+    const compactLayout = useMediaQuery("(max-width: 767px)");
+    const allowedChannels = props.channels ?? LIFEOPS_INBOX_CHANNELS;
+    // Derive the section mode from the channel set passed in by the route.
+    // Mail mode is gmail-only; everything else is the Messages section, which
+    // hides public channels and groups with more than 15 participants.
+    const isMailMode = allowedChannels.length === 1 && allowedChannels[0] === "gmail";
+    const isMessagesMode = !isMailMode;
+    const channelFilters = useMemo(() => allowedChannels.length > 1
+        ? ["all", ...allowedChannels]
+        : [...allowedChannels], [allowedChannels]);
+    const [selectedGmailAccount, setSelectedGmailAccount] = useState(ALL_GMAIL_ACCOUNTS);
+    const [missedOnly, setMissedOnly] = useState(false);
+    const chatTypeFilter = useMemo(() => isMessagesMode
+        ? ["dm", "group"]
+        : isMailMode
+            ? ["dm"]
+            : undefined, [isMessagesMode, isMailMode]);
+    const inbox = useInbox({
+        maxResults: 40,
+        channel: allowedChannels.length === 1 ? allowedChannels[0] : "all",
+        channels: allowedChannels,
+        groupByThread: true,
+        chatTypeFilter,
+        maxParticipants: isMessagesMode ? SMALL_GROUP_PARTICIPANT_CAP : undefined,
+        gmailAccountId: isMailMode && selectedGmailAccount !== ALL_GMAIL_ACCOUNTS
+            ? selectedGmailAccount
+            : undefined,
+        missedOnly: isMessagesMode ? missedOnly : false,
+        // Mail mode keeps recency-first because email priority is less actionable.
+        sortByPriority: isMessagesMode,
+    });
+    const selectedMessageId = selection.messageId ?? null;
+    // Build the messages-by-id index from both flat messages and thread groups
+    // so the reader pane can resolve the active message regardless of how we
+    // ended up selecting it.
+    const messageById = useMemo(() => {
+        const map = new Map();
+        for (const msg of inbox.messages)
+            map.set(msg.id, msg);
+        for (const group of inbox.threadGroups) {
+            map.set(group.latestMessage.id, group.latestMessage);
+            for (const msg of messagesForThreadGroup(group)) {
+                map.set(msg.id, msg);
+            }
+        }
+        return map;
+    }, [inbox.messages, inbox.threadGroups]);
+    const threadGroupByMessageId = useMemo(() => {
+        const map = new Map();
+        for (const group of inbox.threadGroups) {
+            map.set(group.latestMessage.id, group);
+            for (const msg of messagesForThreadGroup(group)) {
+                map.set(msg.id, group);
+            }
+        }
+        return map;
+    }, [inbox.threadGroups]);
+    const selectedMessage = (selectedMessageId ? messageById.get(selectedMessageId) : null) ?? null;
+    const selectedThread = (selectedMessageId ? threadGroupByMessageId.get(selectedMessageId) : null) ??
+        null;
+    // Distinct Gmail accounts visible in the current feed. Only show the chip
+    // group when more than one Gmail account has produced messages.
+    const gmailAccountOptions = useMemo(() => {
+        if (!isMailMode)
+            return [];
+        const seen = new Map();
+        for (const group of inbox.threadGroups) {
+            const id = group.latestMessage.gmailAccountId;
+            const email = group.latestMessage.gmailAccountEmail;
+            if (id && email && !seen.has(id))
+                seen.set(id, email);
+        }
+        if (seen.size === 0) {
+            for (const msg of inbox.messages) {
+                if (msg.gmailAccountId &&
+                    msg.gmailAccountEmail &&
+                    !seen.has(msg.gmailAccountId)) {
+                    seen.set(msg.gmailAccountId, msg.gmailAccountEmail);
+                }
+            }
+        }
+        return Array.from(seen.entries()).map(([id, label]) => ({ id, label }));
+    }, [inbox.threadGroups, inbox.messages, isMailMode]);
+    const showGmailAccountChips = isMailMode && gmailAccountOptions.length > 1;
+    // Subtitle on every Gmail row when more than one account is connected, so
+    // users can tell apart two senders that exist in both inboxes.
+    const showGmailAccountSubtitles = showGmailAccountChips;
+    // Reset to "all" if the previously selected account disappears from the
+    // current feed (e.g. account disconnected).
+    useEffect(() => {
+        if (selectedGmailAccount !== ALL_GMAIL_ACCOUNTS &&
+            !gmailAccountOptions.some((opt) => opt.id === selectedGmailAccount)) {
+            setSelectedGmailAccount(ALL_GMAIL_ACCOUNTS);
+        }
+    }, [gmailAccountOptions, selectedGmailAccount]);
+    const channelCounts = useMemo(() => {
+        const base = Object.fromEntries(channelFilters.map((channel) => [channel, { total: 0, unread: 0 }]));
+        for (const message of inbox.messages) {
+            const all = base.all;
+            if (all) {
+                all.total++;
+                if (message.unread)
+                    all.unread++;
+            }
+            const bucket = base[message.channel];
+            if (bucket) {
+                bucket.total++;
+                if (message.unread)
+                    bucket.unread++;
+            }
+        }
+        return base;
+    }, [channelFilters, inbox.messages]);
+    // Build the navigable list (thread rows in grouped modes, flat messages
+    // otherwise) so j/k keyboard navigation walks the same items the user sees.
+    const navigableItems = useMemo(() => inbox.threadGroups.map((g) => g.latestMessage), [inbox.threadGroups]);
+    const navigableSelectedIndex = useMemo(() => navigableItems.findIndex((m) => m.id === selectedMessageId), [navigableItems, selectedMessageId]);
+    const selectByIndex = useCallback((index) => {
+        const msg = navigableItems[index];
+        if (msg)
+            onSelect({ messageId: msg.id });
+    }, [navigableItems, onSelect]);
+    const handleReply = useCallback((msg) => {
+        const label = styleFor(msg.channel).label;
+        const text = buildReplyPrefill({
+            channel: msg.channel === "gmail" ? "email" : label,
+            sender: msg.sender.displayName,
+            snippet: msg.snippet,
+            deepLink: msg.deepLink,
+        });
+        openLifeOpsChat(text, { messageId: msg.id });
+    }, [openLifeOpsChat]);
+    const handleChat = useCallback((msg) => {
+        openLifeOpsChat(buildMessageChatPrefill(msg), {
+            messageId: msg.id,
+        });
+    }, [openLifeOpsChat]);
+    useEffect(() => {
+        const handler = (e) => {
+            const tag = e.target.tagName;
+            if (tag === "INPUT" ||
+                tag === "TEXTAREA" ||
+                e.target.isContentEditable) {
+                return;
+            }
+            if (e.key === "j") {
+                e.preventDefault();
+                selectByIndex(Math.min(navigableSelectedIndex + 1, navigableItems.length - 1));
+            }
+            else if (e.key === "k") {
+                e.preventDefault();
+                selectByIndex(Math.max(navigableSelectedIndex - 1, 0));
+            }
+            else if (e.key === "r" && selectedMessage) {
+                e.preventDefault();
+                handleReply(selectedMessage);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [
+        handleReply,
+        navigableItems.length,
+        navigableSelectedIndex,
+        selectByIndex,
+        selectedMessage,
+    ]);
+    useEffect(() => {
+        if (!compactLayout &&
+            navigableItems.length > 0 &&
+            (!selectedMessageId || navigableSelectedIndex === -1)) {
+            onSelect({ messageId: navigableItems[0].id });
+        }
+    }, [
+        compactLayout,
+        navigableItems,
+        navigableSelectedIndex,
+        onSelect,
+        selectedMessageId,
+    ]);
+    return (_jsxs("section", { className: "flex h-full min-h-0 flex-col overflow-hidden rounded-3xl border border-border/16 bg-card/18", "data-testid": "lifeops-inbox-section", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/12 px-3 py-2.5", children: [_jsx("div", { className: "mr-auto px-1 text-sm font-semibold text-txt", children: props.title ?? "Messages" }), channelFilters.map((ch) => {
+                        const counts = channelCounts[ch];
+                        return (_jsx(ChannelChip, { channel: ch, active: inbox.channel === ch, count: counts?.total ?? 0, unread: counts?.unread ?? 0, onClick: inbox.setChannel }, ch));
+                    }), isMessagesMode ? (_jsxs("button", { type: "button", "aria-pressed": missedOnly, onClick: () => setMissedOnly((prev) => !prev), title: t("lifeopsInbox.missedTooltip", {
+                            defaultValue: "Threads you have not replied to in 24h with priority ≥ 50",
+                        }), className: [
+                            "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors",
+                            missedOnly
+                                ? "bg-amber-500/16 text-amber-300 ring-1 ring-amber-500/40"
+                                : "bg-bg-muted/30 text-muted hover:text-txt",
+                        ].join(" "), children: [_jsx(AlarmClock, { className: "h-3.5 w-3.5", "aria-hidden": true }), t("lifeopsInbox.missed", { defaultValue: "Missed" })] })) : null] }), showGmailAccountChips ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border/10 px-3 py-2", children: [_jsx(GmailAccountChip, { label: t("lifeopsInbox.allGmail", { defaultValue: "All Gmail" }), active: selectedGmailAccount === ALL_GMAIL_ACCOUNTS, onClick: () => setSelectedGmailAccount(ALL_GMAIL_ACCOUNTS) }), gmailAccountOptions.map((opt) => (_jsx(GmailAccountChip, { label: `Gmail · ${opt.label}`, active: selectedGmailAccount === opt.id, onClick: () => setSelectedGmailAccount(opt.id) }, opt.id)))] })) : null, inbox.error ? (_jsx("div", { className: "px-5 py-4 text-xs text-rose-300", children: inbox.error })) : inbox.loading && inbox.messages.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 px-5 py-8 text-xs text-muted", children: [_jsx(Spinner, { size: 14 }), t("lifeopsInbox.loading", { defaultValue: "Loading inbox…" })] })) : (_jsx("div", { className: "flex min-h-0 flex-1", children: compactLayout ? (selectedThread ? (_jsx(ReaderPane, { threadGroup: selectedThread, onReply: handleReply, onChat: handleChat, onBack: () => onSelect({ messageId: null }) })) : (_jsx(InboxListPane, { inbox: inbox, selectedMessageId: selectedMessageId, onSelect: onSelect, onReply: handleReply, emptyLabel: props.emptyLabel, groupedMode: true, visibleThreadGroups: inbox.threadGroups, showGmailAccountSubtitles: showGmailAccountSubtitles }))) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex w-72 shrink-0 flex-col border-r border-border/12", children: _jsx(InboxListPane, { inbox: inbox, selectedMessageId: selectedMessageId, onSelect: onSelect, onReply: handleReply, emptyLabel: props.emptyLabel, groupedMode: true, visibleThreadGroups: inbox.threadGroups, showGmailAccountSubtitles: showGmailAccountSubtitles }) }), _jsx(ReaderPane, { threadGroup: selectedThread, onReply: handleReply, onChat: handleChat })] })) }))] }));
+}

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

@@ -0,0 +1,12 @@
+import { type JSX } from "react";
+import type { LifeOpsPaymentSource } from "../lifeops/payment-types.js";
+interface LifeOpsLinkBankButtonProps {
+    onLinked?: (source: LifeOpsPaymentSource) => void;
+    /** Optional override for the trigger label. Default: "Link bank with Plaid". */
+    label?: string;
+    /** Optional override for the disabled-state title. */
+    unavailableTitle?: string;
+}
+export declare function LifeOpsLinkBankButton({ onLinked, label, unavailableTitle, }: LifeOpsLinkBankButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=LifeOpsLinkBankButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsLinkBankButton.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsLinkBankButton.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,GAAG,EAAoC,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAA8B,EAC9B,gBAAmH,GACpH,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAyG1C"}

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LifeOpsLinkBankButton — drives the Plaid Link flow for the Money page.
+ *
+ * Flow:
+ *   1. On mount of the modal, fetch a fresh `link_token` from Eliza Cloud via
+ *      `client.createLifeOpsPlaidLinkToken()`.
+ *   2. Hand that token to `usePlaidLink` so the Plaid Link UI can drive the
+ *      bank-selection / login / account-picker flow client-side.
+ *   3. On `onSuccess(public_token)`, exchange the token via
+ *      `client.completeLifeOpsPlaidLink({ publicToken })`. Eliza Cloud
+ *      exchanges the public_token for a long-lived `access_token`, never
+ *      surfaces the secret to the browser, and we get back a fresh
+ *      payment-source row.
+ *   4. Caller's `onLinked` runs the dashboard refresh.
+ *
+ * The Plaid `link_token` is short-lived; if the user opens the modal but
+ * cancels, we re-fetch on the next attempt. We do NOT persist link_tokens.
+ */
+import { client, useApp } from "@elizaos/app-core";
+import { Banknote, Loader2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { usePlaidLink } from "react-plaid-link";
+export function LifeOpsLinkBankButton({ onLinked, label = "Link bank with Plaid", unavailableTitle = "Plaid link is not available — Eliza Cloud not connected, or PLAID_* env vars not set in cloud.", }) {
+    const { elizaCloudConnected } = useApp();
+    const [linkToken, setLinkToken] = useState(null);
+    const [tokenError, setTokenError] = useState(null);
+    const [tokenLoading, setTokenLoading] = useState(false);
+    const [exchangeStatus, setExchangeStatus] = useState("idle");
+    const [exchangeError, setExchangeError] = useState(null);
+    const fetchLinkToken = useCallback(async () => {
+        setTokenLoading(true);
+        setTokenError(null);
+        try {
+            const data = await client.createLifeOpsPlaidLinkToken();
+            setLinkToken(data.linkToken);
+        }
+        catch (err) {
+            setTokenError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setTokenLoading(false);
+        }
+    }, []);
+    const onSuccess = useCallback(async (publicToken, _metadata) => {
+        setExchangeStatus("exchanging");
+        setExchangeError(null);
+        try {
+            const result = await client.completeLifeOpsPlaidLink({
+                publicToken,
+            });
+            setExchangeStatus("done");
+            // Burn the link_token — Plaid only allows it once, and we want a
+            // fresh one on the next attempt.
+            setLinkToken(null);
+            onLinked?.(result.source);
+        }
+        catch (err) {
+            setExchangeStatus("error");
+            setExchangeError(err instanceof Error ? err.message : String(err));
+        }
+    }, [onLinked]);
+    // We feed `usePlaidLink` an empty token when we don't have one yet —
+    // the hook tolerates this and just won't be `ready`. This keeps the
+    // hook unconditional (rules-of-hooks) and lets us drive opening on
+    // demand without two render passes.
+    const { open, ready } = usePlaidLink({
+        token: linkToken ?? "",
+        onSuccess,
+    });
+    // When we have a token AND Plaid Link is ready, open it automatically.
+    // The button click only triggers `fetchLinkToken`; `open()` runs in this
+    // effect once Link reports ready.
+    useEffect(() => {
+        if (linkToken && ready) {
+            open();
+        }
+    }, [linkToken, ready, open]);
+    const onClick = useCallback(() => {
+        setExchangeStatus("idle");
+        setExchangeError(null);
+        void fetchLinkToken();
+    }, [fetchLinkToken]);
+    const disabled = !elizaCloudConnected || tokenLoading || exchangeStatus === "exchanging";
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, title: !elizaCloudConnected ? unavailableTitle : 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: [tokenLoading || exchangeStatus === "exchanging" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true })) : (_jsx(Banknote, { className: "h-3.5 w-3.5", "aria-hidden": true })), exchangeStatus === "exchanging"
+                        ? "Linking…"
+                        : exchangeStatus === "done"
+                            ? "Linked"
+                            : tokenLoading
+                                ? "Preparing Plaid…"
+                                : label] }), tokenError ? (_jsxs("span", { className: "text-[11px] text-rose-300", children: ["Plaid: ", tokenError] })) : null, exchangeError ? (_jsxs("span", { className: "text-[11px] text-rose-300", children: ["Exchange failed: ", exchangeError] })) : null] }));
+}

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

@@ -0,0 +1,12 @@
+import { type JSX } from "react";
+import type { LifeOpsPaymentSource } from "../lifeops/payment-types.js";
+interface LifeOpsLinkPaypalButtonProps {
+    onLinked?: (source: LifeOpsPaymentSource, capability: {
+        hasReporting: boolean;
+        hasIdentity: boolean;
+    }) => void;
+    label?: string;
+}
+export declare function LifeOpsLinkPaypalButton({ onLinked, label, }: LifeOpsLinkPaypalButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=LifeOpsLinkPaypalButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsLinkPaypalButton.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsLinkPaypalButton.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,UAAU,4BAA4B;IACpC,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,oBAAoB,EAC5B,UAAU,EAAE;QAAE,YAAY,EAAE,OAAO,CAAC;QAAC,WAAW,EAAE,OAAO,CAAA;KAAE,KACxD,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBD,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,KAAqB,GACtB,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAwK5C"}