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

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

@@ -1,670 +0,0 @@
-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 useGreeting() {
-    const hour = new Date().getHours();
-    if (hour < 5)
-        return "Still up";
-    if (hour < 12)
-        return "Morning";
-    if (hour < 17)
-        return "Afternoon";
-    if (hour < 22)
-        return "Evening";
-    return "Wind-down";
-}
-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-t border-border/12 px-3 py-2 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0", children: [_jsx("div", { className: "truncate text-[10px] font-semibold uppercase tracking-wide text-muted", children: label }), _jsx("div", { className: `mt-1 truncate text-lg font-semibold tabular-nums ${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 greeting = useGreeting();
-    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: [_jsxs("div", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted", children: [greeting, " / ", 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 overflow-hidden rounded-lg border border-border/16 bg-card/10 sm:grid-cols-3", 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 ? (_jsx("div", { className: "rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-300", children: error })) : 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 overview" : "Connect a source" }) })] }), _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] }));
-}