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

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

@@ -0,0 +1,749 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client, useApp } from "@elizaos/app-core";
+import { AlarmClock, Apple, Bell, Check, ChevronDown, Clock, Loader2, MessageSquare, Plus, RefreshCw, Repeat, Trash2, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useLifeOpsChatLauncher } from "./LifeOpsChatAdapter.js";
+import { useLifeOpsSelection, } from "./LifeOpsSelectionContext.js";
+const URGENCY_STYLES = {
+    overdue: {
+        label: "Overdue",
+        dot: "bg-rose-500",
+        pill: "bg-rose-500/15 text-rose-300",
+        accent: "bg-rose-500/70",
+        chip: "text-rose-300",
+    },
+    soon: {
+        label: "Within the hour",
+        dot: "bg-amber-400",
+        pill: "bg-amber-500/15 text-amber-300",
+        accent: "bg-amber-400/70",
+        chip: "text-amber-300",
+    },
+    today: {
+        label: "Today",
+        dot: "bg-blue-400",
+        pill: "bg-blue-500/15 text-blue-300",
+        accent: "bg-blue-400/70",
+        chip: "text-blue-300",
+    },
+    later: {
+        label: "Later this week",
+        dot: "bg-emerald-400",
+        pill: "bg-emerald-500/15 text-emerald-300",
+        accent: "bg-emerald-400/70",
+        chip: "text-emerald-300",
+    },
+};
+const BUCKET_ORDER = ["overdue", "soon", "today", "later"];
+// Mirror of NATIVE_APPLE_REMINDER_METADATA_KEY from
+// `eliza/apps/app-lifeops/src/lifeops/apple-reminders.ts` — that module pulls
+// in `node:child_process` so we cannot import it from a browser bundle.
+// Keep this constant in sync with apple-reminders.ts.
+const NATIVE_APPLE_REMINDER_METADATA_KEY = "nativeAppleReminder";
+const WEEKDAY_LABELS = [
+    { key: 1, short: "M", long: "Monday" },
+    { key: 2, short: "T", long: "Tuesday" },
+    { key: 3, short: "W", long: "Wednesday" },
+    { key: 4, short: "T", long: "Thursday" },
+    { key: 5, short: "F", long: "Friday" },
+    { key: 6, short: "S", long: "Saturday" },
+    { key: 0, short: "S", long: "Sunday" },
+];
+const SUPPORTED_CHANNEL_OPTIONS = [
+    { value: "default", label: "Use default" },
+    { value: "push", label: "Force push" },
+    { value: "sms", label: "Force SMS" },
+    { value: "email", label: "Force email" },
+    { value: "telegram", label: "Force Telegram" },
+    { value: "imessage", label: "Force iMessage" },
+];
+const SNOOZE_OPTIONS = [
+    { key: "5m", label: "+5 min", request: { minutes: 5 } },
+    { key: "15m", label: "+15 min", request: { preset: "15m" } },
+    { key: "30m", label: "+30 min", request: { preset: "30m" } },
+    { key: "1h", label: "+1 hour", request: { preset: "1h" } },
+    { key: "1d", label: "+1 day", request: { minutes: 60 * 24 } },
+];
+const DEFAULT_SNOOZE = SNOOZE_OPTIONS[1] ?? {
+    key: "15m",
+    label: "+15 min",
+    request: { preset: "15m" },
+};
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+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";
+}
+function formatRelative(iso) {
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return iso;
+    const diffMin = Math.round((parsed - Date.now()) / 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 formatClock(iso) {
+    const date = new Date(iso);
+    if (!Number.isFinite(date.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    }).format(date);
+}
+function formatTimeOfDay(iso) {
+    const date = new Date(iso);
+    if (!Number.isFinite(date.getTime())) {
+        return { primary: iso, suffix: "" };
+    }
+    const formatter = new Intl.DateTimeFormat(undefined, {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    });
+    const formatted = formatter.format(date);
+    // Split off the trailing AM/PM if present so we can render it small.
+    const match = formatted.match(/^(.*?)(\s*[AaPp][Mm])$/);
+    if (match) {
+        return { primary: match[1].trim(), suffix: match[2].trim() };
+    }
+    return { primary: formatted, suffix: "" };
+}
+function formatNextFireDay(iso) {
+    const date = new Date(iso);
+    if (!Number.isFinite(date.getTime()))
+        return "";
+    const now = new Date();
+    const isSameDay = date.getFullYear() === now.getFullYear() &&
+        date.getMonth() === now.getMonth() &&
+        date.getDate() === now.getDate();
+    if (isSameDay)
+        return "Today";
+    const tomorrow = new Date(now);
+    tomorrow.setDate(now.getDate() + 1);
+    if (date.getFullYear() === tomorrow.getFullYear() &&
+        date.getMonth() === tomorrow.getMonth() &&
+        date.getDate() === tomorrow.getDate()) {
+        return "Tomorrow";
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+    }).format(date);
+}
+function channelLabel(channel) {
+    switch (channel) {
+        case "telegram":
+            return "Telegram";
+        case "discord":
+            return "Discord";
+        case "imessage":
+            return "iMessage";
+        case "signal":
+            return "Signal";
+        case "push":
+            return "Push";
+        case "email":
+            return "Email";
+        case "sms":
+            return "SMS";
+        case "in_app":
+            return "In-app";
+        case "voice":
+            return "Voice";
+        case "whatsapp":
+            return "WhatsApp";
+        default:
+            return channel;
+    }
+}
+function isRecord(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readNativeAppleMetadata(metadata) {
+    if (!isRecord(metadata))
+        return null;
+    const raw = metadata[NATIVE_APPLE_REMINDER_METADATA_KEY];
+    if (!isRecord(raw))
+        return null;
+    const kind = raw.kind === "alarm" || raw.kind === "reminder" ? raw.kind : null;
+    if (!kind)
+        return null;
+    const reminderId = typeof raw.reminderId === "string" && raw.reminderId.trim().length > 0
+        ? raw.reminderId.trim()
+        : null;
+    return { kind, reminderId };
+}
+function describeRecurrence(cadence) {
+    if (!cadence)
+        return null;
+    switch (cadence.kind) {
+        case "once":
+            return null;
+        case "daily":
+            return "Daily";
+        case "interval": {
+            const minutes = cadence.everyMinutes;
+            if (minutes >= 60 && minutes % 60 === 0) {
+                const hours = minutes / 60;
+                return hours === 1 ? "Every hour" : `Every ${hours}h`;
+            }
+            return `Every ${minutes}m`;
+        }
+        case "times_per_day": {
+            const slots = cadence.slots?.length ?? 0;
+            return slots > 0 ? `${slots}x/day` : "Daily";
+        }
+        case "weekly": {
+            const weekdays = Array.isArray(cadence.weekdays) ? cadence.weekdays : [];
+            if (weekdays.length === 0)
+                return "Weekly";
+            if (weekdays.length === 7)
+                return "Daily";
+            const labels = WEEKDAY_LABELS.filter((day) => weekdays.includes(day.key))
+                .sort((a, b) => {
+                // Sort Mon..Sun (0=Sun -> last)
+                const order = (k) => (k === 0 ? 7 : k);
+                return order(a.key) - order(b.key);
+            })
+                .map((day) => day.long.slice(0, 3));
+            return `Weekly ${labels.join("/")}`;
+        }
+        default:
+            return null;
+    }
+}
+function pickAlarmCadence(hour, minute, weekdays, timezone) {
+    const minuteOfDay = hour * 60 + minute;
+    if (weekdays.size === 0) {
+        // Single-fire: schedule next occurrence of HH:MM (today if still in the
+        // future, otherwise tomorrow).
+        const now = new Date();
+        const candidate = new Date(now);
+        candidate.setHours(hour, minute, 0, 0);
+        if (candidate.getTime() <= now.getTime()) {
+            candidate.setDate(candidate.getDate() + 1);
+        }
+        return { kind: "once", dueAt: candidate.toISOString() };
+    }
+    if (weekdays.size === 7) {
+        return {
+            kind: "times_per_day",
+            slots: [
+                {
+                    key: "alarm",
+                    label: "Alarm",
+                    minuteOfDay,
+                    durationMinutes: 1,
+                },
+            ],
+        };
+    }
+    return {
+        kind: "weekly",
+        weekdays: Array.from(weekdays).sort((a, b) => a - b),
+        windows: [],
+        visibilityLeadMinutes: 0,
+        visibilityLagMinutes: 0,
+    };
+}
+function defaultTimezone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+}
+function SnoozeSplitButton({ occurrenceId, busyAction, optimisticState, onSnooze, onCustomSnooze, }) {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (event) => {
+            if (!containerRef.current)
+                return;
+            if (!containerRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onDoc);
+        return () => document.removeEventListener("mousedown", onDoc);
+    }, [open]);
+    const disabled = !occurrenceId || optimisticState !== "idle" || busyAction !== null;
+    return (_jsxs("div", { ref: containerRef, className: "relative inline-flex items-stretch overflow-hidden rounded-lg border border-border/15 bg-bg-muted/30 text-[11px] font-semibold text-muted", children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => onSnooze(DEFAULT_SNOOZE), className: "inline-flex items-center gap-1 px-2 py-1 transition-colors hover:bg-bg-muted/60 hover:text-txt disabled:cursor-not-allowed disabled:opacity-40", title: occurrenceId
+                    ? `Snooze ${DEFAULT_SNOOZE.label}`
+                    : "Snooze unavailable for this reminder", "aria-label": `Snooze ${DEFAULT_SNOOZE.label}`, children: [busyAction === "snooze" ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Clock, { className: "h-3 w-3", "aria-hidden": true })), DEFAULT_SNOOZE.label] }), _jsx("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: "inline-flex items-center border-l border-border/15 px-1.5 py-1 transition-colors hover:bg-bg-muted/60 hover:text-txt disabled:cursor-not-allowed disabled:opacity-40", "aria-label": "Snooze options", "aria-expanded": open, children: _jsx(ChevronDown, { className: "h-3 w-3", "aria-hidden": true }) }), open ? (_jsxs("div", { role: "menu", className: "absolute right-0 top-full z-20 mt-1 w-40 overflow-hidden rounded-lg border border-border/20 bg-card shadow-lg", children: [SNOOZE_OPTIONS.map((option) => (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
+                            setOpen(false);
+                            onSnooze(option);
+                        }, className: "block w-full px-3 py-1.5 text-left text-[11px] font-medium text-txt transition-colors hover:bg-bg-muted/40", children: option.label }, option.key))), _jsx("button", { type: "button", role: "menuitem", onClick: () => {
+                            setOpen(false);
+                            onCustomSnooze();
+                        }, className: "block w-full border-t border-border/12 px-3 py-1.5 text-left text-[11px] font-medium text-txt transition-colors hover:bg-bg-muted/40", children: "Custom\u2026" })] })) : null] }));
+}
+function CompleteButton({ occurrenceId, busyAction, optimisticState, onComplete, }) {
+    const disabled = !occurrenceId || optimisticState !== "idle" || busyAction !== null;
+    return (_jsx("button", { type: "button", disabled: disabled, onClick: onComplete, className: "inline-flex h-7 w-7 items-center justify-center rounded-lg border border-border/15 bg-bg-muted/30 text-emerald-300 transition-colors hover:bg-emerald-500/15 hover:text-emerald-200 disabled:cursor-not-allowed disabled:opacity-40", title: occurrenceId
+            ? "Mark complete"
+            : "Complete unavailable for this reminder", "aria-label": "Mark complete", children: busyAction === "complete" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5", "aria-hidden": true })) }));
+}
+// ---------------------------------------------------------------------------
+// Channel override popover
+// ---------------------------------------------------------------------------
+function ChannelOverridePopover({ channel }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (event) => {
+            if (!ref.current)
+                return;
+            if (!ref.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onDoc);
+        return () => document.removeEventListener("mousedown", onDoc);
+    }, [open]);
+    return (_jsxs("span", { ref: ref, className: "relative inline-flex", children: [_jsxs("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((prev) => !prev);
+                }, className: "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium text-muted/80 hover:bg-bg-muted/50 hover:text-txt", "aria-label": `Change delivery channel (currently ${channelLabel(channel)})`, "aria-expanded": open, children: ["via ", channelLabel(channel)] }), open ? (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-20 mt-1 w-44 overflow-hidden rounded-lg border border-border/20 bg-card shadow-lg", onClick: (e) => e.stopPropagation(), children: [SUPPORTED_CHANNEL_OPTIONS.map((option) => (_jsx("div", { role: "menuitem", className: "px-3 py-1.5 text-[11px] text-muted opacity-60", title: "Channel override API not yet wired \u2014 Coming soon", children: option.label }, option.value))), _jsx("div", { className: "border-t border-border/12 px-3 py-1.5 text-[10px] text-muted/70", children: "Coming soon" })] })) : null] }));
+}
+function ReminderRow({ reminder, urgency, isSelected, apple, recurrence, busyAction, optimisticState, onSelect, onChat, onSnooze, onComplete, onCustomSnooze, }) {
+    const style = URGENCY_STYLES[urgency];
+    const occurrenceId = reminder.occurrenceId;
+    const fading = optimisticState !== "idle";
+    return (_jsxs("div", { className: [
+            "group flex items-stretch gap-2 border-b border-border/8 pr-3 last:border-b-0",
+            isSelected ? "bg-accent/8" : "hover:bg-bg-muted/25",
+            fading ? "opacity-50" : "",
+        ].join(" "), children: [_jsxs("button", { type: "button", "aria-pressed": isSelected, className: "flex min-w-0 flex-1 items-stretch gap-3 text-left", onClick: onSelect, children: [_jsx("span", { "aria-hidden": true, className: `w-1 shrink-0 ${style.accent} ${isSelected ? "" : "opacity-70 group-hover:opacity-100"}` }), _jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-3 py-2.5", children: [_jsx("span", { className: "mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-bg-muted/30 text-muted", children: _jsx(Bell, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsxs("span", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: reminder.title }), recurrence ? (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-bg-muted/40 px-1.5 py-0 text-[10px] font-medium text-muted", title: `Repeats: ${recurrence}`, children: [_jsx(Repeat, { className: "h-2.5 w-2.5", "aria-hidden": true }), recurrence] })) : null, _jsx(SourceBadge, { apple: apple }), optimisticState === "snoozed" ? (_jsx("span", { className: "rounded-full bg-blue-500/15 px-1.5 py-0 text-[10px] font-medium text-blue-300", children: "snoozed" })) : null, optimisticState === "completed" ? (_jsx("span", { className: "rounded-full bg-emerald-500/15 px-1.5 py-0 text-[10px] font-medium text-emerald-300", children: "completed" })) : null] }), _jsxs("span", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted", children: [_jsx("span", { children: formatClock(reminder.scheduledFor) }), reminder.stepLabel ? (_jsxs("span", { className: "text-muted/70", children: ["\u00B7 ", reminder.stepLabel] })) : null, _jsx("span", { className: "text-muted/70", children: "\u00B7" }), _jsx(ChannelOverridePopover, { channel: reminder.channel })] })] }), _jsx("span", { className: `mt-1 shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tabular-nums ${style.pill}`, children: formatRelative(reminder.scheduledFor) })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 py-2.5", children: [_jsx(SnoozeSplitButton, { occurrenceId: occurrenceId, busyAction: busyAction, optimisticState: optimisticState, onSnooze: onSnooze, onCustomSnooze: onCustomSnooze }), _jsx(CompleteButton, { occurrenceId: occurrenceId, busyAction: busyAction, optimisticState: optimisticState, onComplete: onComplete }), _jsxs("button", { type: "button", onClick: onChat, className: "inline-flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-[11px] font-semibold text-muted transition-colors hover:bg-bg-muted/40 hover:text-txt", "aria-label": `Chat about ${reminder.title}`, children: [_jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Chat"] })] })] }));
+}
+function SourceBadge({ apple, }) {
+    if (apple) {
+        return (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-rose-500/15 px-1.5 py-0 text-[10px] font-medium text-rose-200", title: "Mirrored to your Apple Reminders app via the native macOS integration.", children: [_jsx(Apple, { className: "h-2.5 w-2.5", "aria-hidden": true }), "Apple Reminders"] }));
+    }
+    return (_jsx("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-bg-muted/40 px-1.5 py-0 text-[10px] font-medium text-muted", title: "Delivered in-app by Eliza only \u2014 not mirrored to a native reminder service.", children: "In-app" }));
+}
+function BucketHeader({ urgency, count, }) {
+    const style = URGENCY_STYLES[urgency];
+    return (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted", children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${style.dot}`, "aria-hidden": true }), _jsx("span", { className: style.chip, children: style.label }), _jsxs("span", { className: "text-muted/60", children: ["\u00B7 ", count] })] }));
+}
+function buildAlarmEntries(definitions, reminders) {
+    const remindersByDefId = new Map();
+    for (const reminder of reminders) {
+        if (reminder.definitionId && !remindersByDefId.has(reminder.definitionId)) {
+            remindersByDefId.set(reminder.definitionId, reminder);
+        }
+    }
+    const entries = [];
+    for (const record of definitions) {
+        const apple = readNativeAppleMetadata(record.definition.metadata);
+        if (!apple || apple.kind !== "alarm")
+            continue;
+        if (record.definition.status === "archived")
+            continue;
+        const reminder = remindersByDefId.get(record.definition.id) ?? null;
+        const recurrence = describeRecurrence(record.definition.cadence) ?? "Once";
+        const nextFireIso = computeNextFireIso(record.definition, reminder);
+        entries.push({
+            definition: record.definition,
+            reminder,
+            recurrence,
+            nextFireIso,
+            apple,
+        });
+    }
+    entries.sort((a, b) => {
+        if (a.nextFireIso && b.nextFireIso) {
+            return a.nextFireIso.localeCompare(b.nextFireIso);
+        }
+        if (a.nextFireIso)
+            return -1;
+        if (b.nextFireIso)
+            return 1;
+        return a.definition.title.localeCompare(b.definition.title);
+    });
+    return entries;
+}
+function computeNextFireIso(definition, reminder) {
+    if (reminder?.scheduledFor)
+        return reminder.scheduledFor;
+    const cadence = definition.cadence;
+    const now = new Date();
+    if (cadence.kind === "once")
+        return cadence.dueAt;
+    if (cadence.kind === "times_per_day") {
+        const slot = cadence.slots?.[0];
+        if (!slot)
+            return null;
+        const candidate = new Date(now);
+        candidate.setHours(0, 0, 0, 0);
+        candidate.setMinutes(slot.minuteOfDay);
+        if (candidate.getTime() <= now.getTime()) {
+            candidate.setDate(candidate.getDate() + 1);
+        }
+        return candidate.toISOString();
+    }
+    if (cadence.kind === "weekly") {
+        const weekdays = cadence.weekdays ?? [];
+        if (weekdays.length === 0)
+            return null;
+        // We don't know the time-of-day in the weekly cadence; fall back to now+1d.
+        const candidate = new Date(now);
+        for (let offset = 0; offset < 8; offset += 1) {
+            const probe = new Date(candidate);
+            probe.setDate(candidate.getDate() + offset);
+            if (weekdays.includes(probe.getDay())) {
+                return probe.toISOString();
+            }
+        }
+    }
+    return null;
+}
+function AddAlarmForm({ saving, onSave, onCancel }) {
+    const [time, setTime] = useState("07:00");
+    const [label, setLabel] = useState("");
+    const [weekdays, setWeekdays] = useState(new Set());
+    const toggleWeekday = (key) => {
+        setWeekdays((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const [hStr, mStr] = time.split(":");
+        const hour = Number.parseInt(hStr ?? "", 10);
+        const minute = Number.parseInt(mStr ?? "", 10);
+        if (!Number.isFinite(hour) || hour < 0 || hour > 23)
+            return;
+        if (!Number.isFinite(minute) || minute < 0 || minute > 59)
+            return;
+        onSave({ label: label.trim(), hour, minute, weekdays });
+    };
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-3 rounded-2xl border border-border/15 bg-card/30 p-4", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1 text-[11px] font-medium text-muted", children: ["Time", _jsx("input", { type: "time", value: time, onChange: (e) => setTime(e.target.value), className: "rounded-lg border border-border/20 bg-bg-muted/30 px-3 py-1.5 text-base font-semibold text-txt tabular-nums focus:border-accent focus:outline-none", required: true })] }), _jsxs("label", { className: "flex min-w-[12rem] flex-1 flex-col gap-1 text-[11px] font-medium text-muted", children: ["Label (optional)", _jsx("input", { type: "text", value: label, onChange: (e) => setLabel(e.target.value), placeholder: "Morning workout", className: "rounded-lg border border-border/20 bg-bg-muted/30 px-3 py-1.5 text-sm text-txt focus:border-accent focus:outline-none", maxLength: 120 })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-[11px] font-medium text-muted", children: "Repeat" }), _jsx("div", { className: "flex flex-wrap gap-1", children: WEEKDAY_LABELS.map((day) => {
+                            const active = weekdays.has(day.key);
+                            return (_jsx("button", { type: "button", onClick: () => toggleWeekday(day.key), "aria-pressed": active, title: day.long, className: [
+                                    "h-8 w-8 rounded-full border text-[11px] font-semibold transition-colors",
+                                    active
+                                        ? "border-accent bg-accent/20 text-accent"
+                                        : "border-border/20 bg-bg-muted/20 text-muted hover:bg-bg-muted/40",
+                                ].join(" "), children: day.short }, day.key));
+                        }) }), _jsx("p", { className: "pt-0.5 text-[10px] text-muted/70", children: weekdays.size === 0
+                            ? "Single fire (next occurrence)."
+                            : weekdays.size === 7
+                                ? "Repeats every day."
+                                : `Repeats on ${weekdays.size} day${weekdays.size === 1 ? "" : "s"}.` })] }), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [_jsx("button", { type: "button", onClick: onCancel, className: "rounded-lg px-3 py-1.5 text-[11px] font-semibold text-muted hover:bg-bg-muted/40 hover:text-txt", children: "Cancel" }), _jsxs("button", { type: "submit", disabled: saving, className: "inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-[11px] font-semibold text-bg shadow-sm transition-colors hover:bg-accent/90 disabled:opacity-50", children: [saving ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : null, "Save alarm"] })] })] }));
+}
+function AlarmRow({ entry, busyAction, optimisticState, onSnooze, onComplete, onCustomSnooze, onDelete, }) {
+    const occurrenceId = entry.reminder?.occurrenceId ?? null;
+    const time = entry.nextFireIso ? formatTimeOfDay(entry.nextFireIso) : null;
+    const day = entry.nextFireIso ? formatNextFireDay(entry.nextFireIso) : "";
+    const fading = optimisticState !== "idle";
+    return (_jsxs("div", { className: [
+            "flex flex-wrap items-center gap-4 rounded-2xl border border-border/15 bg-card/30 px-4 py-3",
+            fading ? "opacity-50" : "",
+        ].join(" "), children: [_jsx("div", { className: "flex min-w-[10rem] items-baseline gap-1", children: time ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-4xl font-light tabular-nums text-txt", children: time.primary }), time.suffix ? (_jsx("span", { className: "text-xs font-medium uppercase text-muted", children: time.suffix })) : null] })) : (_jsx("span", { className: "text-2xl font-light text-muted", children: "--:--" })) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: entry.definition.title }), _jsxs("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-bg-muted/40 px-1.5 py-0 text-[10px] font-medium text-muted", title: `Repeats: ${entry.recurrence}`, children: [_jsx(Repeat, { className: "h-2.5 w-2.5", "aria-hidden": true }), entry.recurrence] }), _jsx(SourceBadge, { apple: entry.apple }), optimisticState === "deleted" ? (_jsx("span", { className: "rounded-full bg-rose-500/15 px-1.5 py-0 text-[10px] font-medium text-rose-300", children: "deleted" })) : null] }), _jsxs("div", { className: "text-[11px] text-muted", children: [day ? `${day} · ` : "", entry.nextFireIso ? formatRelative(entry.nextFireIso) : "No upcoming fire"] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx(SnoozeSplitButton, { occurrenceId: occurrenceId, busyAction: busyAction === "delete" ? null : busyAction, optimisticState: optimisticState === "deleted" ? "snoozed" : optimisticState, onSnooze: onSnooze, onCustomSnooze: onCustomSnooze }), _jsx(CompleteButton, { occurrenceId: occurrenceId, busyAction: busyAction === "delete" ? null : busyAction, optimisticState: optimisticState === "deleted" ? "completed" : optimisticState, onComplete: onComplete }), _jsx("button", { type: "button", onClick: onDelete, disabled: busyAction !== null || optimisticState === "deleted", className: "inline-flex h-7 w-7 items-center justify-center rounded-lg border border-border/15 bg-bg-muted/30 text-rose-300 transition-colors hover:bg-rose-500/15 hover:text-rose-200 disabled:cursor-not-allowed disabled:opacity-40", "aria-label": "Delete alarm", title: "Delete alarm", children: busyAction === "delete" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true })) })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Top-level section
+// ---------------------------------------------------------------------------
+export function LifeOpsRemindersSection() {
+    const { t } = useApp();
+    const { selection, select } = useLifeOpsSelection();
+    const { chatAboutReminder } = useLifeOpsChatLauncher();
+    const [tab, setTab] = useState("reminders");
+    const [reminders, setReminders] = useState([]);
+    const [definitions, setDefinitions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [showAddAlarm, setShowAddAlarm] = useState(false);
+    const [savingAlarm, setSavingAlarm] = useState(false);
+    const [rowState, setRowState] = useState({});
+    const setRowBusy = useCallback((key, busy) => {
+        setRowState((prev) => ({
+            ...prev,
+            [key]: { ...(prev[key] ?? { optimistic: "idle" }), busy },
+        }));
+    }, []);
+    const setRowOptimistic = useCallback((key, optimistic) => {
+        setRowState((prev) => ({
+            ...prev,
+            [key]: { ...(prev[key] ?? { busy: null }), optimistic },
+        }));
+    }, []);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [overview, defs] = await Promise.all([
+                client.getLifeOpsOverview(),
+                client.listLifeOpsDefinitions(),
+            ]);
+            setReminders(overview.reminders);
+            setDefinitions(defs.definitions);
+            setRowState({});
+        }
+        catch (cause) {
+            setError(cause instanceof Error
+                ? cause.message
+                : t("lifeopsreminders.loadFailed", {
+                    defaultValue: "Failed to load reminders.",
+                }));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [t]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    const definitionById = useMemo(() => {
+        const map = new Map();
+        for (const record of definitions) {
+            map.set(record.definition.id, record);
+        }
+        return map;
+    }, [definitions]);
+    const buckets = useMemo(() => {
+        const map = {
+            overdue: [],
+            soon: [],
+            today: [],
+            later: [],
+        };
+        for (const reminder of reminders) {
+            // Hide reminders whose backing definition is flagged as alarm — they
+            // live in the Alarms tab.
+            if (reminder.definitionId) {
+                const record = definitionById.get(reminder.definitionId);
+                const apple = readNativeAppleMetadata(record?.definition.metadata);
+                if (apple?.kind === "alarm")
+                    continue;
+            }
+            map[classifyReminder(reminder.scheduledFor)].push(reminder);
+        }
+        for (const key of BUCKET_ORDER) {
+            map[key].sort((a, b) => a.scheduledFor.localeCompare(b.scheduledFor));
+        }
+        return map;
+    }, [reminders, definitionById]);
+    const reminderCount = useMemo(() => buckets.overdue.length +
+        buckets.soon.length +
+        buckets.today.length +
+        buckets.later.length, [buckets]);
+    const alarmEntries = useMemo(() => buildAlarmEntries(definitions, reminders), [definitions, reminders]);
+    const handleSnooze = useCallback(async (rowKey, occurrenceId, option) => {
+        if (!occurrenceId)
+            return;
+        setRowBusy(rowKey, "snooze");
+        try {
+            await client.snoozeLifeOpsOccurrence(occurrenceId, option.request);
+            setRowOptimistic(rowKey, "snoozed");
+            // Refetch shortly so the optimistic state can be reconciled.
+            setTimeout(() => {
+                void load();
+            }, 400);
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Snooze failed.");
+        }
+        finally {
+            setRowBusy(rowKey, null);
+        }
+    }, [load, setRowBusy, setRowOptimistic]);
+    const handleComplete = useCallback(async (rowKey, occurrenceId) => {
+        if (!occurrenceId)
+            return;
+        setRowBusy(rowKey, "complete");
+        try {
+            await client.completeLifeOpsOccurrence(occurrenceId, {});
+            setRowOptimistic(rowKey, "completed");
+            setTimeout(() => {
+                void load();
+            }, 400);
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Complete failed.");
+        }
+        finally {
+            setRowBusy(rowKey, null);
+        }
+    }, [load, setRowBusy, setRowOptimistic]);
+    const handleCustomSnooze = useCallback(async (rowKey, occurrenceId) => {
+        if (!occurrenceId)
+            return;
+        const raw = window.prompt("Snooze for how many minutes?", "45");
+        if (!raw)
+            return;
+        const minutes = Number.parseInt(raw, 10);
+        if (!Number.isFinite(minutes) || minutes <= 0) {
+            setError("Snooze duration must be a positive number of minutes.");
+            return;
+        }
+        await handleSnooze(rowKey, occurrenceId, {
+            key: `custom-${minutes}`,
+            label: `+${minutes}m`,
+            request: { minutes },
+        });
+    }, [handleSnooze]);
+    const handleDeleteAlarm = useCallback(async (definitionId) => {
+        const rowKey = `alarm:${definitionId}`;
+        setRowBusy(rowKey, "delete");
+        try {
+            await client.updateLifeOpsDefinition(definitionId, {
+                status: "archived",
+            });
+            setRowOptimistic(rowKey, "deleted");
+            setTimeout(() => {
+                void load();
+            }, 400);
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Delete failed.");
+        }
+        finally {
+            setRowBusy(rowKey, null);
+        }
+    }, [load, setRowBusy, setRowOptimistic]);
+    const handleCreateAlarm = useCallback(async (input) => {
+        setSavingAlarm(true);
+        setError(null);
+        try {
+            const timezone = defaultTimezone();
+            const cadence = pickAlarmCadence(input.hour, input.minute, input.weekdays, timezone);
+            const title = input.label.length > 0
+                ? input.label
+                : `Alarm ${String(input.hour).padStart(2, "0")}:${String(input.minute).padStart(2, "0")}`;
+            const request = {
+                kind: "task",
+                title,
+                description: "Eliza alarm.",
+                originalIntent: title,
+                timezone,
+                priority: 1,
+                cadence,
+                source: "lifeops_ui_alarm",
+                metadata: {
+                    [NATIVE_APPLE_REMINDER_METADATA_KEY]: {
+                        kind: "alarm",
+                        provider: "apple_reminders",
+                        reminderId: null,
+                        source: "heuristic",
+                    },
+                },
+                reminderPlan: {
+                    steps: [
+                        {
+                            channel: "push",
+                            offsetMinutes: 0,
+                            label: "Alarm",
+                        },
+                    ],
+                },
+            };
+            await client.createLifeOpsDefinition(request);
+            setShowAddAlarm(false);
+            await load();
+        }
+        catch (cause) {
+            setError(cause instanceof Error
+                ? cause.message
+                : "Failed to create alarm.");
+        }
+        finally {
+            setSavingAlarm(false);
+        }
+    }, [load]);
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "lifeops-reminders", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-base font-semibold tracking-tight text-txt", children: t("lifeopsreminders.title", { defaultValue: "Reminders" }) }), _jsx("span", { className: "rounded-full bg-bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-muted tabular-nums", children: tab === "reminders" ? reminderCount : alarmEntries.length })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-muted transition-colors hover:bg-bg-muted/40 hover:text-txt disabled:opacity-40", onClick: () => void load(), disabled: loading, "aria-label": t("common.refresh", { defaultValue: "Refresh" }), children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }) }) })] }), _jsxs("div", { role: "tablist", className: "inline-flex items-center gap-1 rounded-lg border border-border/15 bg-bg-muted/20 p-0.5 text-[11px] font-semibold", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "reminders", onClick: () => setTab("reminders"), className: [
+                            "inline-flex items-center gap-1.5 rounded-md px-3 py-1 transition-colors",
+                            tab === "reminders"
+                                ? "bg-card text-txt shadow-sm"
+                                : "text-muted hover:text-txt",
+                        ].join(" "), children: [_jsx(Bell, { className: "h-3 w-3", "aria-hidden": true }), "Reminders", _jsx("span", { className: "rounded-full bg-bg-muted/50 px-1.5 text-[10px] tabular-nums text-muted", children: reminderCount })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "alarms", onClick: () => setTab("alarms"), className: [
+                            "inline-flex items-center gap-1.5 rounded-md px-3 py-1 transition-colors",
+                            tab === "alarms"
+                                ? "bg-card text-txt shadow-sm"
+                                : "text-muted hover:text-txt",
+                        ].join(" "), children: [_jsx(AlarmClock, { className: "h-3 w-3", "aria-hidden": true }), "Alarms", _jsx("span", { className: "rounded-full bg-bg-muted/50 px-1.5 text-[10px] tabular-nums text-muted", children: alarmEntries.length })] })] }), error ? (_jsx("div", { className: "rounded-2xl border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-300", children: error })) : null, tab === "reminders" ? (_jsx(RemindersTabBody, { loading: loading, buckets: buckets, reminderCount: reminderCount, definitionById: definitionById, rowState: rowState, selection: selection, select: select, chatAboutReminder: chatAboutReminder, onSnooze: handleSnooze, onComplete: handleComplete, onCustomSnooze: handleCustomSnooze, loadingLabel: t("lifeopsreminders.loading", {
+                    defaultValue: "Loading reminders…",
+                }), emptyLabel: t("lifeopsreminders.empty", {
+                    defaultValue: "All clear. No active reminders.",
+                }) })) : (_jsx(AlarmsTabBody, { loading: loading, alarmEntries: alarmEntries, rowState: rowState, showAddAlarm: showAddAlarm, savingAlarm: savingAlarm, onSnooze: handleSnooze, onComplete: handleComplete, onCustomSnooze: handleCustomSnooze, onDelete: handleDeleteAlarm, onToggleAdd: () => setShowAddAlarm((prev) => !prev), onSaveAlarm: handleCreateAlarm, onCancelAdd: () => setShowAddAlarm(false) }))] }));
+}
+function RemindersTabBody({ loading, buckets, reminderCount, definitionById, rowState, selection, select, chatAboutReminder, onSnooze, onComplete, onCustomSnooze, loadingLabel, emptyLabel, }) {
+    if (loading && reminderCount === 0) {
+        return (_jsxs("div", { className: "flex items-center gap-2 py-6 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), loadingLabel] }));
+    }
+    if (reminderCount === 0) {
+        return (_jsx("div", { className: "rounded-2xl border border-border/12 bg-card/12 px-4 py-10 text-center text-xs text-muted", children: emptyLabel }));
+    }
+    return (_jsx("div", { className: "space-y-4", children: BUCKET_ORDER.map((urgency) => {
+            const bucket = buckets[urgency];
+            if (bucket.length === 0)
+                return null;
+            return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(BucketHeader, { urgency: urgency, count: bucket.length }), _jsx("div", { className: "overflow-hidden rounded-2xl border border-border/12 bg-card/12", children: bucket.map((reminder) => {
+                            const rowKey = `${reminder.ownerType}:${reminder.ownerId}:${reminder.stepIndex}`;
+                            const record = reminder.definitionId
+                                ? definitionById.get(reminder.definitionId)
+                                : null;
+                            const apple = readNativeAppleMetadata(record?.definition.metadata);
+                            const recurrence = describeRecurrence(record?.definition.cadence);
+                            const isSelected = selection.reminderId === reminder.ownerId;
+                            const state = rowState[rowKey] ?? {
+                                busy: null,
+                                optimistic: "idle",
+                            };
+                            return (_jsx(ReminderRow, { reminder: reminder, urgency: urgency, isSelected: isSelected, apple: apple, recurrence: recurrence, busyAction: state.busy === "delete" ? null : state.busy, optimisticState: state.optimistic === "deleted"
+                                    ? "idle"
+                                    : state.optimistic, onSelect: () => select({
+                                    reminderId: reminder.ownerId,
+                                    eventId: reminder.eventId ?? null,
+                                }), onChat: () => chatAboutReminder(reminder), onSnooze: (option) => onSnooze(rowKey, reminder.occurrenceId, option), onComplete: () => onComplete(rowKey, reminder.occurrenceId), onCustomSnooze: () => onCustomSnooze(rowKey, reminder.occurrenceId) }, rowKey));
+                        }) })] }, urgency));
+        }) }));
+}
+function AlarmsTabBody({ loading, alarmEntries, rowState, showAddAlarm, savingAlarm, onSnooze, onComplete, onCustomSnooze, onDelete, onToggleAdd, onSaveAlarm, onCancelAdd, }) {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-[11px] text-muted", children: "Clock-time alarms. Mirrored to your native Apple Reminders on macOS." }), _jsxs("button", { type: "button", onClick: onToggleAdd, className: "inline-flex items-center gap-1 rounded-lg border border-border/15 bg-bg-muted/30 px-2 py-1 text-[11px] font-semibold text-muted transition-colors hover:bg-bg-muted/60 hover:text-txt", children: [_jsx(Plus, { className: "h-3 w-3", "aria-hidden": true }), showAddAlarm ? "Close" : "Add alarm"] })] }), showAddAlarm ? (_jsx(AddAlarmForm, { saving: savingAlarm, onSave: onSaveAlarm, onCancel: onCancelAdd })) : null, loading && alarmEntries.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-xs text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading alarms\u2026"] })) : null, !loading && alarmEntries.length === 0 ? (_jsx("div", { className: "rounded-2xl border border-border/12 bg-card/12 px-4 py-10 text-center text-xs text-muted", children: "No alarms yet. Click \u201CAdd alarm\u201D to schedule one." })) : null, alarmEntries.length > 0 ? (_jsx("div", { className: "space-y-2", children: alarmEntries.map((entry) => {
+                    const rowKey = `alarm:${entry.definition.id}`;
+                    const state = rowState[rowKey] ?? {
+                        busy: null,
+                        optimistic: "idle",
+                    };
+                    return (_jsx(AlarmRow, { entry: entry, busyAction: state.busy, optimisticState: state.optimistic, onSnooze: (option) => onSnooze(rowKey, entry.reminder?.occurrenceId ?? null, option), onComplete: () => onComplete(rowKey, entry.reminder?.occurrenceId ?? null), onCustomSnooze: () => onCustomSnooze(rowKey, entry.reminder?.occurrenceId ?? null), onDelete: () => onDelete(entry.definition.id) }, entry.definition.id));
+                }) })) : null] }));
+}