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

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

@@ -0,0 +1,657 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client, useApp } from "@elizaos/app-core";
+import { ArrowRight, AtSign, CalendarDays, Flame, Loader2, Mail, MessageCircle, MessageSquare, Monitor, Moon, Phone, RefreshCw, Send, Share2, Shield, Smartphone, Sun, Target, TriangleAlert, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import { useCalendarWeek } from "../hooks/useCalendarWeek.js";
+import { useGoogleLifeOpsConnector } from "../hooks/useGoogleLifeOpsConnector.js";
+import { useInbox } from "../hooks/useInbox.js";
+import { useLifeOpsCapabilitiesStatus } from "../hooks/useLifeOpsCapabilitiesStatus.js";
+import { useLifeOpsXConnector } from "../hooks/useLifeOpsXConnector.js";
+import { BrowserBridgeStatusChip } from "./BrowserBridgeStatusChip.js";
+import { DataSourcesStrip } from "./DataSourcesStrip.js";
+import { LIFEOPS_MAIL_CHANNELS, LIFEOPS_MESSAGE_CHANNELS, } from "./LifeOpsInboxSection.js";
+import { useLifeOpsSelection } from "./LifeOpsSelectionContext.js";
+import { MissingSourceCard } from "./MissingSourceCard.js";
+const URGENCY_STYLES = {
+    overdue: {
+        dot: "bg-rose-500",
+        text: "text-rose-300",
+    },
+    soon: {
+        dot: "bg-amber-400",
+        text: "text-amber-300",
+    },
+    today: {
+        dot: "bg-blue-400",
+        text: "text-blue-300",
+    },
+    later: {
+        dot: "bg-emerald-400",
+        text: "text-emerald-300",
+    },
+};
+const CHANNEL_STYLES = {
+    gmail: {
+        label: "Gmail",
+        icon: _jsx(AtSign, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-rose-300",
+        bg: "bg-rose-500/12",
+    },
+    discord: {
+        label: "Discord",
+        icon: _jsx(MessageCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-indigo-300",
+        bg: "bg-indigo-500/14",
+    },
+    telegram: {
+        label: "Telegram",
+        icon: _jsx(Send, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-sky-300",
+        bg: "bg-sky-500/14",
+    },
+    signal: {
+        label: "Signal",
+        icon: _jsx(Shield, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-blue-300",
+        bg: "bg-blue-500/14",
+    },
+    imessage: {
+        label: "iMessage",
+        icon: _jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-emerald-300",
+        bg: "bg-emerald-500/14",
+    },
+    whatsapp: {
+        label: "WhatsApp",
+        icon: _jsx(Smartphone, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-lime-300",
+        bg: "bg-lime-500/14",
+    },
+    sms: {
+        label: "SMS",
+        icon: _jsx(Phone, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-amber-300",
+        bg: "bg-amber-500/14",
+    },
+    x_dm: {
+        label: "X DM",
+        icon: _jsx(AtSign, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        text: "text-zinc-200",
+        bg: "bg-zinc-500/14",
+    },
+};
+const CHANNEL_ORDER = [
+    "gmail",
+    "imessage",
+    "sms",
+    "discord",
+    "telegram",
+    "signal",
+    "whatsapp",
+    "x_dm",
+];
+function formatFullDate(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+    }).format(date);
+}
+function formatClockTime(iso) {
+    if (!iso)
+        return "";
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return "";
+    return new Intl.DateTimeFormat(undefined, {
+        hour: "numeric",
+        minute: "2-digit",
+    }).format(new Date(parsed));
+}
+function formatRelative(iso) {
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return iso;
+    const diffMs = parsed - Date.now();
+    const diffMin = Math.round(diffMs / 60_000);
+    if (Math.abs(diffMin) < 1)
+        return "now";
+    if (diffMin > 0) {
+        if (diffMin < 60)
+            return `in ${diffMin}m`;
+        const hrs = Math.round(diffMin / 60);
+        if (hrs < 24)
+            return `in ${hrs}h`;
+        return `in ${Math.round(hrs / 24)}d`;
+    }
+    const ago = Math.abs(diffMin);
+    if (ago < 60)
+        return `${ago}m ago`;
+    const agoH = Math.round(ago / 60);
+    if (agoH < 24)
+        return `${agoH}h ago`;
+    return `${Math.round(agoH / 24)}d ago`;
+}
+function formatDurationMinutes(value) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+        return "";
+    }
+    const total = Math.round(value);
+    if (total < 60)
+        return `${total}m`;
+    const hours = Math.floor(total / 60);
+    const minutes = total % 60;
+    return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m`;
+}
+function formatDurationSeconds(value) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        return "";
+    }
+    return formatDurationMinutes(value / 60);
+}
+function humanize(value) {
+    if (!value)
+        return "";
+    return value
+        .split("_")
+        .filter(Boolean)
+        .map((part) => part[0]?.toUpperCase() + part.slice(1))
+        .join(" ");
+}
+function startOfLocalDayIso(date = new Date()) {
+    const start = new Date(date);
+    start.setHours(0, 0, 0, 0);
+    return start.toISOString();
+}
+function classifyReminder(iso) {
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return "later";
+    const diffMin = Math.round((parsed - Date.now()) / 60_000);
+    if (diffMin < 0)
+        return "overdue";
+    if (diffMin < 60)
+        return "soon";
+    if (diffMin < 60 * 24)
+        return "today";
+    return "later";
+}
+const CIRCADIAN_LABELS = {
+    awake: "Awake",
+    winding_down: "Winding down",
+    sleeping: "Sleeping",
+    waking: "Waking up",
+    napping: "Napping",
+    unclear: "Schedule unclear",
+};
+function circadianHeadline(schedule) {
+    if (!schedule)
+        return null;
+    const base = CIRCADIAN_LABELS[schedule.circadianState];
+    if (!base)
+        return null;
+    if (schedule.circadianState === "winding_down") {
+        const minutes = schedule.relativeTime.minutesUntilBedtimeTarget;
+        if (typeof minutes === "number" && minutes > 0) {
+            const formatted = formatDurationMinutes(minutes);
+            if (formatted)
+                return `Winding down for bed in ${formatted}`;
+        }
+    }
+    if (schedule.circadianState === "awake") {
+        const minutes = schedule.relativeTime.minutesAwake;
+        if (typeof minutes === "number" && minutes > 0) {
+            const formatted = formatDurationMinutes(minutes);
+            if (formatted)
+                return `Awake for ${formatted}`;
+        }
+    }
+    if (schedule.circadianState === "sleeping") {
+        return "Sleeping now";
+    }
+    return base;
+}
+function topActiveSession(screenTime) {
+    const items = screenTime?.items ?? [];
+    if (items.length === 0)
+        return null;
+    return items.reduce((best, current) => current.totalSeconds > best.totalSeconds ? current : best, items[0]);
+}
+function computeWeeklyDelta(args) {
+    const { todayTotalSeconds, weeklyTotalSeconds } = args;
+    if (typeof todayTotalSeconds !== "number" ||
+        typeof weeklyTotalSeconds !== "number" ||
+        !Number.isFinite(todayTotalSeconds) ||
+        !Number.isFinite(weeklyTotalSeconds) ||
+        weeklyTotalSeconds <= 0) {
+        return null;
+    }
+    const dailyAverage = weeklyTotalSeconds / 7;
+    if (dailyAverage <= 0)
+        return null;
+    const delta = (todayTotalSeconds - dailyAverage) / dailyAverage;
+    const percent = Math.round(Math.abs(delta) * 100);
+    if (percent < 1) {
+        return { label: "On par with avg", arrow: "flat" };
+    }
+    const arrow = delta > 0 ? "up" : "down";
+    const symbol = arrow === "up" ? "↑" : "↓";
+    return { label: `${symbol} ${percent}% vs avg`, arrow };
+}
+function sleepStatusLabel(schedule) {
+    if (!schedule)
+        return "No sleep signal";
+    switch (schedule.sleepStatus) {
+        case "sleeping_now":
+            return "Sleeping now";
+        case "slept":
+            return "Slept";
+        case "likely_missed":
+            return "Sleep likely missed";
+        case "unknown":
+            return humanize(schedule.circadianState) || "Unknown";
+    }
+}
+function buildHeadline(args) {
+    const { schedule, nextEvent, hasOverdue, hasUnread, hasAnyOverviewAccess } = args;
+    if (!hasAnyOverviewAccess) {
+        return "LifeOps is waiting on access.";
+    }
+    if (schedule?.sleepStatus === "sleeping_now") {
+        return "Sleep is the main event.";
+    }
+    if (hasOverdue) {
+        return "A reminder needs a decision.";
+    }
+    if (nextEvent) {
+        return `${nextEvent.title} at ${formatClockTime(nextEvent.startAt)}.`;
+    }
+    if (hasUnread) {
+        return "Messages need attention.";
+    }
+    return "The day is open.";
+}
+function DashboardPanel({ title, icon, action, className = "", children, }) {
+    return (_jsxs("section", { "aria-label": title, className: `min-w-0 overflow-hidden rounded-lg border border-border/16 bg-card/12 ${className}`, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border/12 px-3 py-2", children: [_jsx("div", { className: "flex min-w-0 items-center gap-2", children: _jsxs("h2", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-bg/30 text-muted", title: title, children: [_jsx("span", { className: "sr-only", children: title }), icon] }) }), action] }), _jsx("div", { className: "p-4", children: children })] }));
+}
+function IconAction({ label, icon, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-bg/40 hover:text-txt", onClick: onClick, children: icon }));
+}
+function MetricCell({ label, value, tone, }) {
+    return (_jsxs("div", { className: "min-w-0 border-l border-border/12 px-3 py-2 first:border-l-0", children: [_jsx("div", { className: "truncate text-[10px] font-medium text-muted", children: label }), _jsx("div", { className: `mt-1 truncate text-sm font-semibold tabular-nums sm:text-lg ${tone ?? "text-txt"}`, children: value })] }));
+}
+function EmptyState({ children }) {
+    return _jsx("div", { className: "py-6 text-center text-xs text-muted", children: children });
+}
+function formatLabelList(labels) {
+    if (labels.length === 0) {
+        return "";
+    }
+    if (labels.length === 1) {
+        return labels[0];
+    }
+    if (labels.length === 2) {
+        return `${labels[0]} and ${labels[1]}`;
+    }
+    return `${labels.slice(0, -1).join(", ")}, and ${labels.at(-1)}`;
+}
+function sortPriorityMessages(messages) {
+    return [...messages].sort((left, right) => {
+        if (left.unread !== right.unread) {
+            return left.unread ? -1 : 1;
+        }
+        return right.receivedAt.localeCompare(left.receivedAt);
+    });
+}
+function hasCapabilityAccess(status, capabilityId) {
+    const capability = status?.capabilities.find((item) => item.id === capabilityId);
+    return capability?.state === "working" || capability?.state === "degraded";
+}
+function hasGoogleCapability(status, capabilities) {
+    if (status?.connected !== true) {
+        return false;
+    }
+    const granted = new Set(status.grantedCapabilities);
+    return capabilities.some((capability) => granted.has(capability));
+}
+function hasXMessageAccess(status) {
+    return status?.connected === true && (status.dmRead || status.dmInbound);
+}
+function TinyStatus({ color, label }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("span", { className: `mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${color}`, "aria-hidden": true }), _jsx("div", { className: "min-w-0", children: _jsx("div", { className: "text-sm font-medium leading-5 text-txt", children: label }) })] }));
+}
+function CalendarEventRow({ event, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex w-full min-w-0 items-start gap-3 py-2 text-left transition-colors hover:text-accent", children: [_jsx("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-400" }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: "block truncate text-sm font-medium text-txt", children: event.title }) }), _jsx("span", { className: "shrink-0 text-[11px] font-medium text-blue-300", children: event.isAllDay ? "All day" : formatClockTime(event.startAt) })] }));
+}
+function ReminderAgendaRow({ reminder, onClick, }) {
+    const urgency = classifyReminder(reminder.scheduledFor);
+    const style = URGENCY_STYLES[urgency];
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex w-full min-w-0 items-start gap-3 py-2 text-left transition-colors hover:text-accent", children: [_jsx("span", { className: `mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${style.dot}` }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: "block truncate text-sm font-medium text-txt", children: reminder.title }) }), _jsx("span", { className: `shrink-0 text-[11px] font-medium ${style.text}`, children: formatRelative(reminder.scheduledFor) })] }));
+}
+function InboxMessageRow({ message, onClick, }) {
+    const style = CHANNEL_STYLES[message.channel];
+    const subject = message.subject?.trim() || `${style.label} message`;
+    const rowTitle = subject === `${style.label} message`
+        ? message.sender.displayName
+        : `${message.sender.displayName} - ${subject}`;
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex w-full min-w-0 items-start gap-3 py-2 text-left transition-colors hover:text-accent", children: [_jsx("span", { className: `mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${style.bg} ${style.text}`, children: style.icon }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: `block truncate text-sm ${message.unread
+                        ? "font-semibold text-txt"
+                        : "font-medium text-txt/80"}`, children: rowTitle }) }), _jsx("span", { className: "shrink-0 text-[11px] font-medium text-muted", children: formatRelative(message.receivedAt) })] }));
+}
+function TimelineRow({ entry, onOpenEvent, onOpenReminder, }) {
+    if (entry.kind === "event") {
+        return (_jsx(CalendarEventRow, { event: entry.event, onClick: () => onOpenEvent(entry.event) }));
+    }
+    return (_jsx(ReminderAgendaRow, { reminder: entry.reminder, onClick: () => onOpenReminder(entry.reminder) }));
+}
+function ScreenTimeList({ screenTime, loading, error, }) {
+    if (loading && !screenTime) {
+        return (_jsxs("div", { className: "flex items-center gap-2 py-5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Reading screen time..."] }));
+    }
+    if (error) {
+        return _jsx("div", { className: "py-4 text-xs text-rose-300", children: error });
+    }
+    const items = screenTime?.items ?? [];
+    if (items.length === 0) {
+        return _jsx(EmptyState, { children: "No screen-time sessions yet." });
+    }
+    return (_jsx("div", { className: "space-y-2", children: items.slice(0, 5).map((item) => (_jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3 border-t border-border/10 pt-2 first:border-t-0 first:pt-0", children: [_jsx("div", { className: "min-w-0", children: _jsx("div", { className: "truncate text-sm font-medium text-txt", children: item.displayName }) }), _jsx("div", { className: "shrink-0 text-sm font-semibold tabular-nums text-txt", children: formatDurationSeconds(item.totalSeconds) })] }, `${item.source}:${item.identifier}`))) }));
+}
+export function LifeOpsOverviewSection({ onNavigate, }) {
+    const { t } = useApp();
+    const { select } = useLifeOpsSelection();
+    const today = useMemo(() => new Date(), []);
+    const capabilities = useLifeOpsCapabilitiesStatus();
+    const googleConnector = useGoogleLifeOpsConnector({
+        includeAccounts: false,
+        pollWhileDisconnected: false,
+        side: "owner",
+    });
+    const xConnector = useLifeOpsXConnector("owner");
+    const [overview, setOverview] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [screenTime, setScreenTime] = useState(null);
+    const [screenTimeLoading, setScreenTimeLoading] = useState(false);
+    const [screenTimeError, setScreenTimeError] = useState(null);
+    const [social, setSocial] = useState(null);
+    const [socialLoading, setSocialLoading] = useState(false);
+    const [socialError, setSocialError] = useState(null);
+    const [weeklyScreenTotalSeconds, setWeeklyScreenTotalSeconds] = useState(null);
+    const loadOverview = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            setOverview(await client.getLifeOpsOverview());
+        }
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : t("lifeopsoverviewsection.loadFailed", {
+                    defaultValue: "Failed to load overview.",
+                }));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [t]);
+    const loadScreenTime = useCallback(async () => {
+        setScreenTimeLoading(true);
+        setScreenTimeError(null);
+        try {
+            setScreenTime(await client.getLifeOpsScreenTimeSummary({
+                since: startOfLocalDayIso(),
+                until: new Date().toISOString(),
+                topN: 5,
+            }));
+        }
+        catch (cause) {
+            setScreenTimeError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Screen time failed to load.");
+        }
+        finally {
+            setScreenTimeLoading(false);
+        }
+    }, []);
+    const loadSocial = useCallback(async () => {
+        setSocialLoading(true);
+        setSocialError(null);
+        try {
+            setSocial(await client.getLifeOpsSocialHabitSummary({
+                since: startOfLocalDayIso(),
+                until: new Date().toISOString(),
+                topN: 5,
+            }));
+        }
+        catch (cause) {
+            setSocialError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Social habits failed to load.");
+        }
+        finally {
+            setSocialLoading(false);
+        }
+    }, []);
+    const loadWeeklyScreenTime = useCallback(async () => {
+        const now = new Date();
+        const since = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+        const breakdown = await client.getLifeOpsScreenTimeBreakdown({
+            since: since.toISOString(),
+            until: now.toISOString(),
+            topN: 1,
+        });
+        setWeeklyScreenTotalSeconds(Number.isFinite(breakdown.totalSeconds) ? breakdown.totalSeconds : null);
+    }, []);
+    useEffect(() => {
+        void loadOverview();
+        void loadScreenTime();
+        void loadSocial();
+        void loadWeeklyScreenTime();
+    }, [loadOverview, loadScreenTime, loadSocial, loadWeeklyScreenTime]);
+    const calendar = useCalendarWeek({ viewMode: "week" });
+    const messagesInbox = useInbox({
+        maxResults: 8,
+        channels: LIFEOPS_MESSAGE_CHANNELS,
+    });
+    const mailInbox = useInbox({
+        maxResults: 8,
+        channel: "gmail",
+        channels: LIFEOPS_MAIL_CHANNELS,
+    });
+    const upcomingEvents = useMemo(() => {
+        const now = Date.now();
+        return [...calendar.events]
+            .filter((event) => {
+            const end = Date.parse(event.endAt);
+            return Number.isFinite(end) && end >= now;
+        })
+            .sort((a, b) => a.startAt.localeCompare(b.startAt))
+            .slice(0, 6);
+    }, [calendar.events]);
+    const summary = overview?.summary;
+    const schedule = overview?.schedule ?? null;
+    const reminders = overview?.reminders ?? [];
+    const activeReminders = reminders.slice(0, 6);
+    const priorityMessages = useMemo(() => sortPriorityMessages(messagesInbox.messages), [messagesInbox.messages]);
+    const priorityMail = useMemo(() => sortPriorityMessages(mailInbox.messages), [mailInbox.messages]);
+    const unreadMessages = [...priorityMessages, ...priorityMail].filter((message) => message.unread);
+    const hasUnread = unreadMessages.length > 0;
+    const hasOverdue = (summary?.overdueOccurrenceCount ?? 0) > 0;
+    const nextEvent = upcomingEvents[0] ?? null;
+    const screenTimeLabel = formatDurationSeconds(screenTime?.totalSeconds);
+    const socialLabel = formatDurationSeconds(social?.totalSeconds);
+    const topSocial = social?.services[0] ?? null;
+    const lastSleep = formatDurationMinutes(schedule?.lastSleepDurationMinutes);
+    const bedtime = formatClockTime(schedule?.relativeTime.bedtimeTargetAt);
+    const sleepAccess = Boolean(schedule) ||
+        hasCapabilityAccess(capabilities.status, "sleep.relative_time");
+    const browserActivityAccess = hasCapabilityAccess(capabilities.status, "activity.browser");
+    const screenTimeAccess = (!screenTimeError && browserActivityAccess) || Boolean(screenTime);
+    const socialAccess = (!socialError && browserActivityAccess) || Boolean(social);
+    const calendarAccess = hasGoogleCapability(googleConnector.status, [
+        "google.calendar.read",
+        "google.calendar.write",
+    ]) || upcomingEvents.length > 0;
+    const mailAccess = hasGoogleCapability(googleConnector.status, [
+        "google.gmail.triage",
+        "google.gmail.send",
+    ]) || priorityMail.length > 0;
+    const messagesAccess = hasXMessageAccess(xConnector.status) || priorityMessages.length > 0;
+    const remindersAccess = hasCapabilityAccess(capabilities.status, "reminders.scheduler") ||
+        activeReminders.length > 0 ||
+        hasOverdue;
+    const hasAnySignalWidget = sleepAccess ||
+        screenTimeAccess ||
+        socialAccess ||
+        calendarAccess ||
+        messagesAccess ||
+        mailAccess;
+    const hasAnyOverviewAccess = hasAnySignalWidget || remindersAccess;
+    const setupSignalsLoading = capabilities.loading || googleConnector.loading || xConnector.loading;
+    const missingWidgets = useMemo(() => [
+        !sleepAccess ? "Sleep" : null,
+        !screenTimeAccess ? "Screen Time" : null,
+        !socialAccess ? "Social" : null,
+        !messagesAccess ? "Messages" : null,
+        !mailAccess ? "Mail" : null,
+        !calendarAccess ? "Calendar" : null,
+    ].filter((value) => Boolean(value)), [
+        calendarAccess,
+        mailAccess,
+        messagesAccess,
+        screenTimeAccess,
+        sleepAccess,
+        socialAccess,
+    ]);
+    const showSetupWarning = !setupSignalsLoading && missingWidgets.length > 0;
+    const showNoAccessState = !setupSignalsLoading &&
+        !loading &&
+        !screenTimeLoading &&
+        !socialLoading &&
+        !calendar.loading &&
+        !messagesInbox.loading &&
+        !mailInbox.loading &&
+        !hasAnyOverviewAccess;
+    const reminderMetricValue = activeReminders[0]
+        ? formatRelative(activeReminders[0].scheduledFor)
+        : hasOverdue
+            ? `${summary?.overdueOccurrenceCount ?? 0} overdue`
+            : (summary?.activeOccurrenceCount ?? 0) > 0
+                ? `${summary?.activeOccurrenceCount ?? 0} active`
+                : "Clear";
+    const reminderMetricTone = hasOverdue
+        ? "text-rose-300"
+        : (summary?.activeOccurrenceCount ?? 0) > 0
+            ? "text-amber-300"
+            : "text-muted";
+    const timeline = useMemo(() => {
+        return [
+            ...upcomingEvents.map((event) => ({
+                id: `event:${event.id}`,
+                kind: "event",
+                sortAt: Date.parse(event.startAt),
+                event,
+            })),
+            ...activeReminders.map((reminder) => ({
+                id: `reminder:${reminder.ownerId}:${reminder.stepIndex}`,
+                kind: "reminder",
+                sortAt: Date.parse(reminder.scheduledFor),
+                reminder,
+            })),
+        ]
+            .filter((entry) => Number.isFinite(entry.sortAt))
+            .sort((left, right) => left.sortAt - right.sortAt)
+            .slice(0, 7);
+    }, [activeReminders, upcomingEvents]);
+    const activeChannels = useMemo(() => {
+        return CHANNEL_ORDER.filter((channel) => priorityMessages.some((message) => message.channel === channel));
+    }, [priorityMessages]);
+    const briefingLines = useMemo(() => {
+        const lines = [];
+        if (hasUnread) {
+            lines.push("Messages need triage");
+        }
+        if (schedule?.nextMealLabel && schedule.nextMealWindowStartAt) {
+            lines.push(`${humanize(schedule.nextMealLabel)} window starts ${formatClockTime(schedule.nextMealWindowStartAt)}`);
+        }
+        return lines.slice(0, 5);
+    }, [hasUnread, schedule]);
+    const circadianLine = useMemo(() => circadianHeadline(schedule), [schedule]);
+    const activeSession = useMemo(() => topActiveSession(screenTime), [screenTime]);
+    const activeSessionLine = useMemo(() => {
+        if (!activeSession)
+            return null;
+        const duration = formatDurationSeconds(activeSession.totalSeconds);
+        if (!duration)
+            return null;
+        return `Current focus: ${activeSession.displayName} (${duration})`;
+    }, [activeSession]);
+    const hasNowPanelContent = Boolean(circadianLine) ||
+        Boolean(activeSessionLine) ||
+        briefingLines.length > 0;
+    const weeklyDelta = useMemo(() => computeWeeklyDelta({
+        todayTotalSeconds: screenTime?.totalSeconds ?? null,
+        weeklyTotalSeconds: weeklyScreenTotalSeconds,
+    }), [screenTime?.totalSeconds, weeklyScreenTotalSeconds]);
+    const refresh = useCallback(() => {
+        void loadOverview();
+        void loadScreenTime();
+        void loadSocial();
+        void loadWeeklyScreenTime();
+        void capabilities.refresh();
+        void googleConnector.refresh({ silent: true });
+        void xConnector.refresh();
+        void calendar.refresh();
+        void messagesInbox.refresh();
+        void mailInbox.refresh();
+    }, [
+        calendar.refresh,
+        capabilities,
+        googleConnector,
+        loadSocial,
+        loadOverview,
+        loadScreenTime,
+        loadWeeklyScreenTime,
+        mailInbox.refresh,
+        messagesInbox.refresh,
+        xConnector,
+    ]);
+    const openEvent = useCallback((event) => {
+        select({ eventId: event.id });
+        onNavigate("calendar");
+    }, [onNavigate, select]);
+    const openReminder = useCallback((reminder) => {
+        select({
+            reminderId: reminder.ownerId,
+            eventId: reminder.eventId ?? null,
+        });
+        onNavigate("reminders");
+    }, [onNavigate, select]);
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "lifeops-overview", children: [_jsxs("header", { className: "border-b border-border/20 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-muted", children: formatFullDate(today) }), _jsx("h1", { className: "mt-2 max-w-4xl text-2xl font-semibold leading-tight text-txt sm:text-3xl", children: buildHeadline({
+                                            schedule,
+                                            nextEvent,
+                                            hasOverdue,
+                                            hasUnread,
+                                            hasAnyOverviewAccess,
+                                        }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(BrowserBridgeStatusChip, { onNavigate: onNavigate }), _jsx("button", { type: "button", "aria-label": "Refresh LifeOps dashboard", title: "Refresh", className: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border/20 bg-bg/30 text-muted transition-colors hover:border-accent/30 hover:text-txt disabled:opacity-40", onClick: refresh, disabled: loading ||
+                                            screenTimeLoading ||
+                                            calendar.loading ||
+                                            messagesInbox.loading ||
+                                            mailInbox.loading, children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading || screenTimeLoading ? "animate-spin" : ""}`, "aria-hidden": true }) })] })] }), _jsxs("div", { className: "mt-4 grid grid-cols-3 overflow-hidden rounded-lg border border-border/16 bg-card/10", children: [_jsx(MetricCell, { label: "Sleep", value: sleepStatusLabel(schedule), tone: schedule?.sleepStatus === "sleeping_now"
+                                    ? "text-blue-300"
+                                    : "text-txt" }), _jsx(MetricCell, { label: "Reminders", value: reminderMetricValue, tone: reminderMetricTone }), _jsx(MetricCell, { label: "Screen", value: screenTimeLabel || "No data", tone: screenTimeLabel ? "text-amber-300" : "text-muted" })] })] }), error ? (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs font-medium text-rose-300", title: error, children: [_jsx(TriangleAlert, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }), "Activity unavailable"] })) : null, showSetupWarning ? (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 rounded-lg border border-amber-500/25 bg-amber-500/10 px-4 py-3", "data-testid": "lifeops-overview-setup-warning", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "mt-0.5 shrink-0 text-amber-300", children: _jsx(TriangleAlert, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("div", { className: "min-w-0", children: _jsx("div", { className: "truncate text-sm font-medium text-txt", children: hasAnyOverviewAccess ? "Partial" : "Connect" }) })] }), _jsxs("span", { className: "inline-flex h-7 min-w-7 items-center justify-center rounded-full border border-amber-300/25 bg-amber-300/10 px-2 text-[11px] font-semibold text-amber-200", title: formatLabelList(missingWidgets), children: ["+", missingWidgets.length] }), _jsx("button", { type: "button", "aria-label": "Open LifeOps settings", title: "Settings", className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/16 bg-bg/50 text-txt transition-colors hover:border-accent/30 hover:text-accent", onClick: () => onNavigate("setup"), children: _jsx(ArrowRight, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] })) : null, loading && !overview ? (_jsxs("div", { className: "flex items-center gap-2 py-4 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Loading dashboard..."] })) : null, showNoAccessState ? (_jsxs("div", { className: "rounded-lg border border-border/16 bg-card/12 px-5 py-8 text-center", "data-testid": "lifeops-overview-empty-access", children: [_jsx("div", { className: "mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/12 text-amber-300", children: _jsx(TriangleAlert, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-txt", children: "Connect a source" }), _jsxs("button", { type: "button", className: "mt-4 inline-flex h-9 items-center gap-1 rounded-md border border-border/16 bg-bg/50 px-3 text-sm font-medium text-txt transition-colors hover:border-accent/30 hover:text-accent", onClick: () => onNavigate("setup"), children: ["Open Settings", _jsx(ArrowRight, { className: "h-4 w-4", "aria-hidden": true })] })] })) : null, !showNoAccessState ? (_jsxs("div", { className: "grid items-start gap-4 xl:grid-cols-12", children: [hasNowPanelContent ? (_jsx(DashboardPanel, { title: "Now", icon: _jsx(Flame, { className: "h-4 w-4", "aria-hidden": true }), className: "xl:col-span-3", children: _jsxs("div", { className: "space-y-3", children: [circadianLine ? (_jsx(TinyStatus, { color: "bg-indigo-300", label: circadianLine })) : null, activeSessionLine ? (_jsx(TinyStatus, { color: "bg-amber-300", label: activeSessionLine })) : null, briefingLines.map((line) => (_jsx(TinyStatus, { color: "bg-accent", label: line }, line)))] }) })) : null, sleepAccess ? (_jsx(DashboardPanel, { title: "Sleep", icon: schedule?.sleepStatus === "sleeping_now" ? (_jsx(Moon, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(Sun, { className: "h-4 w-4", "aria-hidden": true })), action: _jsx(IconAction, { label: "Sleep", icon: _jsx(Moon, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("sleep") }), className: "xl:col-span-3", children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { children: _jsx("div", { className: "text-2xl font-semibold leading-none text-txt", children: sleepStatusLabel(schedule) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3 border-t border-border/12 pt-3", children: [_jsx(TinyStatus, { color: "bg-blue-400", label: lastSleep ? `Last sleep ${lastSleep}` : "No sleep" }), _jsx(TinyStatus, { color: "bg-indigo-400", label: bedtime ? `Bed ${bedtime}` : "No target" })] })] }) })) : (_jsx(MissingSourceCard, { title: "Sleep", ctaLabel: "Connect Health", onCta: () => onNavigate("setup"), className: "xl:col-span-3" })), screenTimeAccess ? (_jsxs(DashboardPanel, { title: "Screen Time", icon: _jsx(Monitor, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Screen Time", icon: _jsx(Monitor, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("screen-time") }), className: "xl:col-span-3", children: [_jsx("div", { className: "mb-3 flex items-end justify-between gap-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-2xl font-semibold leading-none text-txt", children: screenTimeLabel || "No data" }), weeklyDelta ? (_jsx("div", { className: "mt-1 text-[11px] font-medium tabular-nums text-muted", "data-testid": "lifeops-overview-screen-weekly-delta", children: weeklyDelta.label })) : null] }) }), _jsx(ScreenTimeList, { screenTime: screenTime, loading: screenTimeLoading, error: screenTimeError })] })) : (_jsx(MissingSourceCard, { title: "Screen Time", ctaLabel: "Set up tracking", onCta: () => onNavigate("setup"), className: "xl:col-span-3" })), socialAccess ? (_jsxs(DashboardPanel, { title: "Social", icon: _jsx(Share2, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Social", icon: _jsx(Share2, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("screen-time") }), className: "xl:col-span-3", children: [_jsx("div", { className: "mb-3 text-2xl font-semibold leading-none text-txt", children: socialLabel || "No data" }), socialLoading && !social ? (_jsxs("div", { className: "flex items-center gap-2 py-5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Reading social..."] })) : socialError ? (_jsx("div", { className: "py-4 text-xs text-rose-300", children: socialError })) : (_jsxs("div", { className: "space-y-3", children: [_jsx(TinyStatus, { color: "bg-cyan-300", label: topSocial
+                                            ? `${topSocial.label} ${formatDurationSeconds(topSocial.totalSeconds)}`
+                                            : "No social time" }), _jsx(TinyStatus, { color: "bg-emerald-300", label: `${social?.messages.opened ?? 0} opened / ${social?.messages.outbound ?? 0} sent` }), (social?.dataSources ?? []).length > 0 ? (_jsx(DataSourcesStrip, { sources: social?.dataSources ?? [], onSetup: () => onNavigate("setup") })) : null] }))] })) : (_jsx(MissingSourceCard, { title: "Social", ctaLabel: "Set up bridge", onCta: () => onNavigate("setup"), className: "xl:col-span-3" })), calendarAccess ? (_jsx(DashboardPanel, { title: "Upcoming", icon: _jsx(CalendarDays, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Calendar", icon: _jsx(CalendarDays, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("calendar") }), className: "xl:col-span-4", children: calendar.loading && timeline.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 py-5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Reading calendar..."] })) : timeline.length === 0 ? (_jsx(EmptyState, { children: "Nothing scheduled." })) : (_jsx("div", { className: "divide-y divide-border/10", children: timeline.map((entry) => (_jsx(TimelineRow, { entry: entry, onOpenEvent: openEvent, onOpenReminder: openReminder }, entry.id))) })) })) : (_jsx(MissingSourceCard, { title: "Calendar", ctaLabel: "Connect Google", onCta: () => onNavigate("setup"), className: "xl:col-span-4" })), messagesAccess ? (_jsxs(DashboardPanel, { title: "Priority Messages", icon: _jsx(MessageSquare, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Messages", icon: _jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("messages") }), className: "xl:col-span-4", children: [_jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: activeChannels.length === 0 ? (_jsx("span", { className: "text-xs text-muted", children: "No live messages." })) : (activeChannels.slice(0, 5).map((channel) => {
+                                    const style = CHANNEL_STYLES[channel];
+                                    return (_jsx("span", { role: "img", "aria-label": style.label, title: style.label, className: `inline-flex h-7 w-7 items-center justify-center rounded-full ${style.bg} ${style.text}`, children: style.icon }, channel));
+                                })) }), messagesInbox.loading && priorityMessages.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 py-5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Reading messages..."] })) : priorityMessages.length === 0 ? (_jsx(EmptyState, { children: "No priority messages." })) : (_jsx("div", { className: "divide-y divide-border/10", children: priorityMessages.slice(0, 5).map((message) => (_jsx(InboxMessageRow, { message: message, onClick: () => {
+                                        select({ messageId: message.id });
+                                        onNavigate("messages");
+                                    } }, message.id))) }))] })) : (_jsx(MissingSourceCard, { title: "Messages", ctaLabel: "Connect platform", onCta: () => onNavigate("setup"), className: "xl:col-span-4" })), mailAccess ? (_jsx(DashboardPanel, { title: "Priority Mail", icon: _jsx(Mail, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Mail", icon: _jsx(Mail, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("mail") }), className: "xl:col-span-4", children: mailInbox.loading && priorityMail.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 py-5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Reading mail..."] })) : priorityMail.length === 0 ? (_jsx(EmptyState, { children: "No priority mail." })) : (_jsx("div", { className: "divide-y divide-border/10", children: priorityMail.slice(0, 5).map((message) => (_jsx(InboxMessageRow, { message: message, onClick: () => {
+                                    select({ messageId: message.id });
+                                    onNavigate("mail");
+                                } }, message.id))) })) })) : (_jsx(MissingSourceCard, { title: "Mail", ctaLabel: "Connect Google", onCta: () => onNavigate("setup"), className: "xl:col-span-4" })), remindersAccess ? (_jsx(DashboardPanel, { title: "Reminders", icon: _jsx(Target, { className: "h-4 w-4", "aria-hidden": true }), action: _jsx(IconAction, { label: "Reminders", icon: _jsx(Target, { className: "h-3.5 w-3.5", "aria-hidden": true }), onClick: () => onNavigate("reminders") }), className: "xl:col-span-4", children: _jsx("div", { className: "divide-y divide-border/10", children: activeReminders.length === 0 ? (_jsx(EmptyState, { children: "No active reminders." })) : (activeReminders
+                                .slice(0, 4)
+                                .map((reminder) => (_jsx(ReminderAgendaRow, { reminder: reminder, onClick: () => openReminder(reminder) }, `${reminder.ownerId}:${reminder.stepIndex}`)))) }) })) : null] })) : null] }));
+}