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

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

@@ -0,0 +1,515 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * LifeOpsCalendarSection — Google Calendar-style week/day/month views.
+ *
+ * Day/week views render an hour-by-hour grid and position events by their
+ * actual start/end time. Month view renders a 5-6 row day grid. Events get
+ * deterministic category colours derived from their calendar/account id so
+ * the same feed keeps the same colour across renders.
+ */
+import { Button, Popover, PopoverContent, PopoverTrigger, SegmentedControl, Spinner, useApp, useMediaQuery, } from "@elizaos/app-core";
+import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCalendarWeek, } from "../hooks/useCalendarWeek.js";
+import { getPrimedLifeOpsEvent } from "../lifeops-route.js";
+import { EventEditorDrawer } from "./EventEditorDrawer.js";
+import { useLifeOpsChatLauncher } from "./LifeOpsChatAdapter.js";
+import { useLifeOpsSelection, } from "./LifeOpsSelectionContext.js";
+const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+const DAY_START_HOUR = 6;
+const DAY_END_HOUR = 23;
+const HOUR_HEIGHT_PX = 48;
+function formatTimeOfDay(iso) {
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return "";
+    return new Intl.DateTimeFormat(undefined, {
+        hour: "numeric",
+        minute: "2-digit",
+        timeZone: TIME_ZONE,
+    }).format(new Date(parsed));
+}
+function formatWeekdayShort(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        timeZone: TIME_ZONE,
+    }).format(date);
+}
+function formatDayNumber(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        timeZone: TIME_ZONE,
+    }).format(date);
+}
+function formatMonthHeader(start, end) {
+    const startMonth = new Intl.DateTimeFormat(undefined, {
+        month: "long",
+        year: "numeric",
+        timeZone: TIME_ZONE,
+    }).format(start);
+    const endMonth = new Intl.DateTimeFormat(undefined, {
+        month: "long",
+        year: "numeric",
+        timeZone: TIME_ZONE,
+    }).format(end);
+    return startMonth === endMonth ? startMonth : `${startMonth} – ${endMonth}`;
+}
+function formatAgendaDayLabel(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+        timeZone: TIME_ZONE,
+    }).format(date);
+}
+function toLocalDayKey(date) {
+    const fmt = new Intl.DateTimeFormat("en-CA", {
+        timeZone: TIME_ZONE,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    });
+    const parts = fmt.formatToParts(date);
+    const y = parts.find((p) => p.type === "year")?.value ?? "0000";
+    const m = parts.find((p) => p.type === "month")?.value ?? "00";
+    const d = parts.find((p) => p.type === "day")?.value ?? "00";
+    return `${y}-${m}-${d}`;
+}
+function buildDays(start, count) {
+    const days = [];
+    for (let i = 0; i < count; i++) {
+        const d = new Date(start);
+        d.setDate(d.getDate() + i);
+        days.push(d);
+    }
+    return days;
+}
+function groupEventsByDay(events) {
+    const map = new Map();
+    for (const event of events) {
+        const key = toLocalDayKey(new Date(event.startAt));
+        const existing = map.get(key);
+        if (existing)
+            existing.push(event);
+        else
+            map.set(key, [event]);
+    }
+    return map;
+}
+// Google-Calendar-inspired palette. Each entry is a self-contained class
+// pair so we can render filled blocks or tinted pills from the same source.
+const EVENT_PALETTE = [
+    {
+        bg: "bg-blue-500/85",
+        softBg: "bg-blue-500/18",
+        border: "border-blue-500/60",
+        text: "text-blue-50",
+        softText: "text-blue-200",
+        dot: "bg-blue-400",
+    },
+    {
+        bg: "bg-violet-500/85",
+        softBg: "bg-violet-500/18",
+        border: "border-violet-500/60",
+        text: "text-violet-50",
+        softText: "text-violet-200",
+        dot: "bg-violet-400",
+    },
+    {
+        bg: "bg-emerald-500/85",
+        softBg: "bg-emerald-500/18",
+        border: "border-emerald-500/60",
+        text: "text-emerald-50",
+        softText: "text-emerald-200",
+        dot: "bg-emerald-400",
+    },
+    {
+        bg: "bg-amber-500/85",
+        softBg: "bg-amber-500/18",
+        border: "border-amber-500/60",
+        text: "text-amber-50",
+        softText: "text-amber-200",
+        dot: "bg-amber-400",
+    },
+    {
+        bg: "bg-rose-500/85",
+        softBg: "bg-rose-500/18",
+        border: "border-rose-500/60",
+        text: "text-rose-50",
+        softText: "text-rose-200",
+        dot: "bg-rose-400",
+    },
+    {
+        bg: "bg-cyan-500/85",
+        softBg: "bg-cyan-500/18",
+        border: "border-cyan-500/60",
+        text: "text-cyan-50",
+        softText: "text-cyan-200",
+        dot: "bg-cyan-400",
+    },
+];
+function hashString(input) {
+    let hash = 0;
+    for (let i = 0; i < input.length; i++) {
+        hash = (hash * 31 + input.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+}
+function paletteFor(event) {
+    // Prefer calendar-level seeds so gcal-style "one colour per calendar"
+    // holds when those are distinct. Fall back to event.id for variety when
+    // every event shares the same calendar.
+    const seed = [event.calendarId, event.accountEmail, event.id]
+        .filter(Boolean)
+        .join("|");
+    return EVENT_PALETTE[hashString(seed) % EVENT_PALETTE.length];
+}
+function sortAgendaEvents(events) {
+    return [...events].sort((left, right) => {
+        if (left.isAllDay !== right.isAllDay) {
+            return left.isAllDay ? -1 : 1;
+        }
+        return left.startAt.localeCompare(right.startAt);
+    });
+}
+function formatAgendaEventMeta(event) {
+    const timeLabel = event.isAllDay
+        ? "All day"
+        : [formatTimeOfDay(event.startAt), formatTimeOfDay(event.endAt)]
+            .filter(Boolean)
+            .join(" - ");
+    const originLabel = typeof event.calendarSummary === "string" && event.calendarSummary.trim()
+        ? event.calendarSummary.trim()
+        : null;
+    const details = [timeLabel, event.location || null, originLabel].filter((value) => Boolean(value));
+    return details.join(" · ");
+}
+function eventWindowMs(event) {
+    const start = new Date(event.startAt);
+    const end = new Date(event.endAt);
+    if (!Number.isFinite(start.getTime()) || !Number.isFinite(end.getTime())) {
+        return null;
+    }
+    const dayStart = new Date(start);
+    dayStart.setHours(DAY_START_HOUR, 0, 0, 0);
+    const dayEnd = new Date(start);
+    dayEnd.setHours(DAY_END_HOUR, 0, 0, 0);
+    const clampedStart = Math.max(start.getTime(), dayStart.getTime());
+    const clampedEnd = Math.min(end.getTime(), dayEnd.getTime());
+    if (clampedEnd <= clampedStart)
+        return null;
+    return {
+        start: clampedStart,
+        end: clampedEnd,
+    };
+}
+/**
+ * Pack concurrent events into lanes, Google-Calendar style.
+ * Two events collide iff their time ranges overlap. Each event is given
+ * the lowest lane index not used by any event it collides with; the column
+ * width is then divided by the max concurrent lane count within each
+ * cluster of connected events.
+ */
+function layoutDayEvents(events) {
+    const windows = events
+        .map((event) => {
+        const window = eventWindowMs(event);
+        return window ? { event, ...window } : null;
+    })
+        .filter((entry) => entry !== null)
+        .sort((a, b) => a.start - b.start);
+    if (windows.length === 0)
+        return [];
+    const dayStart = new Date(windows[0].event.startAt);
+    dayStart.setHours(DAY_START_HOUR, 0, 0, 0);
+    const dayEnd = new Date(windows[0].event.startAt);
+    dayEnd.setHours(DAY_END_HOUR, 0, 0, 0);
+    const totalMs = dayEnd.getTime() - dayStart.getTime();
+    // First pass: assign lanes greedily.
+    const lanes = []; // lane index -> end time (ms)
+    const assignments = [];
+    for (const entry of windows) {
+        let lane = lanes.findIndex((laneEnd) => laneEnd <= entry.start);
+        if (lane === -1) {
+            lane = lanes.length;
+            lanes.push(entry.end);
+        }
+        else {
+            lanes[lane] = entry.end;
+        }
+        assignments.push({
+            event: entry.event,
+            start: entry.start,
+            end: entry.end,
+            lane,
+        });
+    }
+    // Second pass: for each assignment, compute the local concurrency (max
+    // lane count of any event that overlaps it, transitively). This is the
+    // column-width divisor for that event.
+    const totalLanes = new Map();
+    for (const assignment of assignments) {
+        const concurrent = assignments.filter((other) => other.start < assignment.end && other.end > assignment.start);
+        const maxLane = concurrent.reduce((max, entry) => Math.max(max, entry.lane + 1), 1);
+        totalLanes.set(assignment.event, maxLane);
+    }
+    return assignments.map((assignment) => {
+        const cols = totalLanes.get(assignment.event) ?? 1;
+        const topPct = ((assignment.start - dayStart.getTime()) / totalMs) * 100;
+        const heightPct = Math.max(((assignment.end - assignment.start) / totalMs) * 100, 2.5);
+        const widthPct = 100 / cols;
+        return {
+            event: assignment.event,
+            position: {
+                topPct,
+                heightPct,
+                leftPct: assignment.lane * widthPct,
+                widthPct,
+            },
+        };
+    });
+}
+function isSameDayKey(a, b) {
+    return toLocalDayKey(a) === toLocalDayKey(b);
+}
+// ---------------------------------------------------------------------------
+// Hour-grid day/week view
+// ---------------------------------------------------------------------------
+const RAIL_WIDTH_REM = 3.25;
+const HEADER_ROW_HEIGHT_REM = 2.25;
+function DayColumnHeader({ day, isFirst }) {
+    const isToday = isSameDayKey(day, new Date());
+    return (_jsxs("div", { className: `flex items-center justify-center gap-1.5 ${isFirst ? "" : "border-l border-border/12"} px-2 text-[11px] font-medium ${isToday ? "bg-accent/8" : ""}`, style: { height: `${HEADER_ROW_HEIGHT_REM}rem` }, children: [_jsx("span", { className: `uppercase tracking-wide ${isToday ? "text-accent" : "text-muted"}`, children: formatWeekdayShort(day) }), _jsx("span", { className: `flex h-5 min-w-5 items-center justify-center rounded-full px-1 tabular-nums ${isToday ? "bg-accent text-accent-fg" : "text-txt"}`, children: formatDayNumber(day) })] }));
+}
+function AllDayBandCell({ day, events, isFirst, selectedEventId, onSelectEvent, }) {
+    return (_jsx("fieldset", { className: `m-0 min-w-0 space-y-0.5 border-0 px-1 py-1 ${isFirst ? "" : "border-l border-border/12"}`, "aria-label": `All-day events for ${day.toISOString()}`, children: events.map((event) => {
+            const color = paletteFor(event);
+            return (_jsx("button", { type: "button", onClick: () => onSelectEvent(event), onContextMenu: (mouseEvent) => {
+                    mouseEvent.preventDefault();
+                    onSelectEvent(event);
+                }, className: `block w-full truncate rounded-md ${color.softBg} ${color.softText} px-1.5 py-0.5 text-left text-[10px] font-medium hover:${color.bg} hover:${color.text}`, "aria-pressed": event.id === selectedEventId, children: event.title }, event.id));
+        }) }));
+}
+function DayColumnGrid({ day, events, nowInColumn, selectedEventId, onSelectEvent, isFirst, gridHeight, }) {
+    const totalHours = DAY_END_HOUR - DAY_START_HOUR;
+    const isToday = isSameDayKey(day, new Date());
+    const positioned = useMemo(() => layoutDayEvents(events), [events]);
+    const nowTopPx = useMemo(() => {
+        if (!nowInColumn)
+            return null;
+        const now = new Date();
+        const startOfWindow = new Date(now);
+        startOfWindow.setHours(DAY_START_HOUR, 0, 0, 0);
+        const endOfWindow = new Date(now);
+        endOfWindow.setHours(DAY_END_HOUR, 0, 0, 0);
+        if (now.getTime() < startOfWindow.getTime() ||
+            now.getTime() > endOfWindow.getTime()) {
+            return null;
+        }
+        const ratio = (now.getTime() - startOfWindow.getTime()) /
+            (endOfWindow.getTime() - startOfWindow.getTime());
+        return ratio * gridHeight;
+    }, [gridHeight, nowInColumn]);
+    return (_jsxs("div", { className: `relative ${isFirst ? "" : "border-l border-border/12"} ${isToday ? "bg-accent/5" : ""}`, style: { height: `${gridHeight}px` }, children: [Array.from({ length: totalHours }, (_, i) => DAY_START_HOUR + i).map((hour) => (_jsx("div", { className: "pointer-events-none absolute inset-x-0 border-t border-border/6", style: { top: `${(hour - DAY_START_HOUR) * HOUR_HEIGHT_PX}px` } }, hour))), nowTopPx !== null ? (_jsx("div", { className: "pointer-events-none absolute inset-x-0 z-20", style: { top: `${nowTopPx}px` }, "aria-hidden": true, children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-rose-500 ring-2 ring-rose-500/30" }), _jsx("span", { className: "h-px flex-1 bg-rose-500/80" })] }) })) : null, positioned.map(({ event, position }) => {
+                const color = paletteFor(event);
+                const isSelected = event.id === selectedEventId;
+                return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), onContextMenu: (mouseEvent) => {
+                        mouseEvent.preventDefault();
+                        onSelectEvent(event);
+                    }, "aria-pressed": isSelected, className: `group absolute overflow-hidden rounded-md border px-1.5 py-1 text-left shadow-sm transition-transform ${color.bg} ${color.border} ${color.text} ${isSelected ? "ring-2 ring-white/50 z-10" : "hover:translate-y-[-1px]"}`, style: {
+                        top: `calc(${position.topPct}% + 0.1rem)`,
+                        height: `calc(${position.heightPct}% - 0.2rem)`,
+                        left: `calc(${position.leftPct}% + 0.125rem)`,
+                        width: `calc(${position.widthPct}% - 0.25rem)`,
+                        minHeight: "1.5rem",
+                    }, children: [_jsx("div", { className: "truncate text-[11px] font-semibold leading-tight", children: event.title }), _jsxs("div", { className: "mt-0.5 truncate text-[10px] leading-tight opacity-90", children: [formatTimeOfDay(event.startAt), event.location ? ` · ${event.location}` : ""] })] }, event.id));
+            })] }));
+}
+function TimeGrid({ days, eventsByDay, selectedEventId, onSelectEvent, }) {
+    const now = new Date();
+    const totalHours = DAY_END_HOUR - DAY_START_HOUR;
+    const gridHeight = totalHours * HOUR_HEIGHT_PX;
+    const hasAnyAllDay = useMemo(() => days.some((day) => (eventsByDay.get(toLocalDayKey(day)) ?? []).some((e) => e.isAllDay)), [days, eventsByDay]);
+    const hours = useMemo(() => {
+        const out = [];
+        for (let hour = DAY_START_HOUR; hour < DAY_END_HOUR; hour++) {
+            out.push({
+                hour,
+                label: new Intl.DateTimeFormat(undefined, { hour: "numeric" }).format(new Date(2024, 0, 1, hour, 0)),
+            });
+        }
+        return out;
+    }, []);
+    // Grid layout: first column is the hour rail. Each day is an equal-width
+    // column after it. Rows stay aligned because every day header cell + every
+    // all-day cell share a row whose height is driven by the tallest cell.
+    const gridTemplateColumns = `${RAIL_WIDTH_REM}rem repeat(${days.length}, minmax(0, 1fr))`;
+    return (_jsxs("div", { className: "overflow-hidden rounded-2xl border border-border/12 bg-bg/20", children: [_jsxs("div", { className: "grid border-b border-border/12", style: { gridTemplateColumns }, children: [_jsx("div", { "aria-hidden": true, style: { height: `${HEADER_ROW_HEIGHT_REM}rem` } }), days.map((day, index) => (_jsx(DayColumnHeader, { day: day, isFirst: index === 0 }, toLocalDayKey(day))))] }), hasAnyAllDay ? (_jsxs("div", { className: "grid border-b border-border/12 bg-bg-muted/15", style: { gridTemplateColumns }, children: [_jsx("div", { "aria-hidden": true, className: "flex items-center justify-end px-2 text-[10px] font-semibold uppercase tracking-wide text-muted/70", children: "all-day" }), days.map((day, index) => (_jsx(AllDayBandCell, { day: day, isFirst: index === 0, events: (eventsByDay.get(toLocalDayKey(day)) ?? []).filter((e) => e.isAllDay), selectedEventId: selectedEventId, onSelectEvent: onSelectEvent }, toLocalDayKey(day))))] })) : null, _jsxs("div", { className: "grid", style: { gridTemplateColumns }, children: [_jsx("div", { className: "relative", style: { height: `${gridHeight}px` }, children: hours.map(({ hour, label }) => (_jsx("div", { className: "absolute right-2 text-[10px] font-medium uppercase tracking-wide text-muted/70", style: {
+                                top: `${(hour - DAY_START_HOUR) * HOUR_HEIGHT_PX - 6}px`,
+                            }, children: label }, hour))) }), days.map((day, index) => {
+                        const key = toLocalDayKey(day);
+                        const dayEvents = (eventsByDay.get(key) ?? []).filter((e) => !e.isAllDay);
+                        return (_jsx(DayColumnGrid, { day: day, events: dayEvents, nowInColumn: isSameDayKey(day, now), selectedEventId: selectedEventId, onSelectEvent: onSelectEvent, isFirst: index === 0, gridHeight: gridHeight }, key));
+                    })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Month grid
+// ---------------------------------------------------------------------------
+function startOfMonthGrid(date) {
+    const firstOfMonth = new Date(date);
+    firstOfMonth.setDate(1);
+    firstOfMonth.setHours(0, 0, 0, 0);
+    const weekday = firstOfMonth.getDay();
+    const start = new Date(firstOfMonth);
+    start.setDate(firstOfMonth.getDate() - weekday);
+    return start;
+}
+function MonthGrid({ baseDate, eventsByDay, selectedEventId, onSelectEvent, }) {
+    const start = startOfMonthGrid(baseDate);
+    const days = buildDays(start, 42);
+    const month = baseDate.getMonth();
+    const today = new Date();
+    const weekdayLabels = useMemo(() => Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(start);
+        d.setDate(start.getDate() + i);
+        return formatWeekdayShort(d);
+    }), [start]);
+    return (_jsxs("div", { className: "overflow-hidden rounded-2xl border border-border/12 bg-bg/20", children: [_jsx("div", { className: "grid grid-cols-7 border-b border-border/12 bg-bg-muted/20 text-[10px] font-semibold uppercase tracking-wide text-muted", children: weekdayLabels.map((label) => (_jsx("div", { className: "px-2 py-1.5 text-center", children: label }, label))) }), _jsx("div", { className: "grid grid-cols-7 gap-px bg-border/8", children: days.map((day) => {
+                    const key = toLocalDayKey(day);
+                    const dayEvents = eventsByDay.get(key) ?? [];
+                    const inMonth = day.getMonth() === month;
+                    const isToday = isSameDayKey(day, today);
+                    return (_jsxs("div", { className: `flex min-h-24 flex-col gap-1 bg-bg/40 p-1.5 text-left ${inMonth ? "" : "opacity-55"}`, children: [_jsx("div", { className: `text-[11px] font-medium ${isToday
+                                    ? "inline-flex h-5 w-5 items-center justify-center self-start rounded-full bg-accent text-accent-fg"
+                                    : inMonth
+                                        ? "text-txt"
+                                        : "text-muted"}`, children: formatDayNumber(day) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [dayEvents.slice(0, 3).map((event) => {
+                                        const color = paletteFor(event);
+                                        const isSelected = event.id === selectedEventId;
+                                        return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), onContextMenu: (mouseEvent) => {
+                                                mouseEvent.preventDefault();
+                                                onSelectEvent(event);
+                                            }, className: `flex min-w-0 items-center gap-1 rounded-sm px-1.5 py-0.5 text-left text-[10px] font-medium ${isSelected
+                                                ? `${color.bg} ${color.text}`
+                                                : `${color.softBg} ${color.softText} hover:${color.bg} hover:${color.text}`}`, children: [!event.isAllDay ? (_jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${color.dot}`, "aria-hidden": true })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: event.title })] }, event.id));
+                                    }), dayEvents.length > 3 ? (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "rounded-sm px-1 text-left text-[10px] font-medium text-muted hover:bg-bg-hover/40 hover:text-txt", children: ["+", dayEvents.length - 3, " more"] }) }), _jsxs(PopoverContent, { align: "start", className: "w-64 p-0", "data-testid": "lifeops-calendar-day-overflow", children: [_jsx("div", { className: "border-b border-border/12 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted", children: formatAgendaDayLabel(day) }), _jsx("div", { className: "max-h-72 overflow-y-auto py-1", children: dayEvents.map((event) => {
+                                                            const overflowColor = paletteFor(event);
+                                                            return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), className: "flex w-full items-start gap-2 px-3 py-1.5 text-left hover:bg-bg-hover/40", children: [_jsx("span", { "aria-hidden": true, className: `mt-1 h-2 w-2 shrink-0 rounded-full ${overflowColor.dot}` }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium text-txt", children: event.title }), _jsx("span", { className: "mt-0.5 block text-[10px] text-muted", children: event.isAllDay
+                                                                                    ? "All day"
+                                                                                    : formatTimeOfDay(event.startAt) })] })] }, `overflow-${event.id}`));
+                                                        }) })] })] })) : null] })] }, key));
+                }) })] }));
+}
+function AgendaView({ days, eventsByDay, selectedEventId, onSelectEvent, emptyLabel, }) {
+    const sections = useMemo(() => days
+        .map((day) => {
+        const key = toLocalDayKey(day);
+        return {
+            key,
+            day,
+            events: sortAgendaEvents(eventsByDay.get(key) ?? []),
+        };
+    })
+        .filter((section) => section.events.length > 0), [days, eventsByDay]);
+    if (sections.length === 0) {
+        return (_jsx("div", { className: "rounded-2xl border border-border/12 bg-bg/20 px-4 py-8 text-xs text-muted", children: emptyLabel }));
+    }
+    return (_jsx("div", { className: "space-y-3", children: sections.map((section) => (_jsxs("div", { className: "rounded-2xl border border-border/12 bg-bg/20", children: [_jsx("div", { className: "border-b border-border/10 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-muted", children: formatAgendaDayLabel(section.day) }), _jsx("div", { className: "divide-y divide-border/10", children: section.events.map((event) => {
+                        const color = paletteFor(event);
+                        const isSelected = event.id === selectedEventId;
+                        return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), onContextMenu: (mouseEvent) => {
+                                mouseEvent.preventDefault();
+                                onSelectEvent(event);
+                            }, "aria-pressed": isSelected, className: `flex w-full items-start gap-3 px-4 py-3 text-left transition-colors ${isSelected ? "bg-white/5" : "hover:bg-white/3"}`, children: [_jsx("span", { "aria-hidden": true, className: `mt-1 h-2.5 w-2.5 shrink-0 rounded-full ${color.dot}` }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-semibold text-txt", children: event.title }), _jsx("span", { className: "mt-1 block text-xs text-muted", children: formatAgendaEventMeta(event) })] })] }, event.id));
+                    }) })] }, section.key))) }));
+}
+export function LifeOpsCalendarSection(props = {}) {
+    const ctx = useLifeOpsSelection();
+    const selection = props.selection ?? ctx.selection;
+    const onSelect = props.onSelect ?? ctx.select;
+    const { t } = useApp();
+    const calendar = useCalendarWeek();
+    const compactLayout = useMediaQuery("(max-width: 767px)");
+    const { chatAboutEvent } = useLifeOpsChatLauncher();
+    const [drawerEvent, setDrawerEvent] = useState(null);
+    const [createOpen, setCreateOpen] = useState(false);
+    const [createDefaultDate, setCreateDefaultDate] = useState(new Date());
+    const selectedEventId = selection.eventId ?? null;
+    const eventsByDay = useMemo(() => groupEventsByDay(calendar.events), [calendar.events]);
+    const days = useMemo(() => {
+        switch (calendar.viewMode) {
+            case "day":
+                return buildDays(calendar.windowStart, 1);
+            case "month":
+                return buildDays(calendar.windowStart, 42);
+            default:
+                return buildDays(calendar.windowStart, 7);
+        }
+    }, [calendar.viewMode, calendar.windowStart]);
+    const handleSelectEvent = useCallback((event) => {
+        onSelect({ eventId: event.id });
+        setDrawerEvent(event);
+    }, [onSelect]);
+    const handleCloseEditor = useCallback(() => {
+        setDrawerEvent(null);
+        onSelect({ eventId: null });
+    }, [onSelect]);
+    // When an external caller (widget row, deep link) selects an event, the
+    // grid's local `drawerEvent` state is still null. Look up the id first in
+    // the currently-loaded calendar feed, then fall back to the widget prime
+    // cache so the drawer can open with the right event even if it's outside
+    // the current week view.
+    useEffect(() => {
+        if (!selectedEventId) {
+            if (drawerEvent !== null)
+                setDrawerEvent(null);
+            return;
+        }
+        if (drawerEvent?.id === selectedEventId)
+            return;
+        const fromFeed = calendar.events.find((event) => event.id === selectedEventId);
+        if (fromFeed) {
+            setDrawerEvent(fromFeed);
+            return;
+        }
+        const primed = getPrimedLifeOpsEvent(selectedEventId);
+        if (primed) {
+            setDrawerEvent(primed);
+        }
+    }, [selectedEventId, calendar.events, drawerEvent]);
+    const rangeLabel = useMemo(() => formatMonthHeader(calendar.windowStart, calendar.windowEnd), [calendar.windowStart, calendar.windowEnd]);
+    const VIEW_ITEMS = [
+        { value: "day", label: t("lifeopsCalendar.day", { defaultValue: "Day" }) },
+        {
+            value: "week",
+            label: t("lifeopsCalendar.week", { defaultValue: "Week" }),
+        },
+        {
+            value: "month",
+            label: t("lifeopsCalendar.month", { defaultValue: "Month" }),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: "flex h-full min-h-0 flex-col gap-4", "data-testid": "lifeops-calendar-section", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("div", { className: "flex overflow-hidden rounded-xl border border-border/16 bg-card/22", children: [_jsx("button", { type: "button", className: "flex h-8 w-8 items-center justify-center text-muted hover:bg-bg-muted/40 hover:text-txt", "aria-label": t("lifeopsCalendar.previous", {
+                                                    defaultValue: "Previous",
+                                                }), onClick: calendar.goPrevious, children: _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "h-8 px-2.5 text-xs font-medium text-txt hover:bg-bg-muted/40", onClick: calendar.goToToday, children: t("lifeopsCalendar.today", { defaultValue: "Today" }) }), _jsx("button", { type: "button", className: "flex h-8 w-8 items-center justify-center text-muted hover:bg-bg-muted/40 hover:text-txt", "aria-label": t("lifeopsCalendar.next", {
+                                                    defaultValue: "Next",
+                                                }), onClick: calendar.goNext, children: _jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": true }) })] }), _jsx("h2", { className: "min-w-0 text-sm font-semibold tracking-tight text-txt sm:text-base", children: rangeLabel })] }), _jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto", children: [_jsx(SegmentedControl, { "aria-label": t("lifeopsCalendar.viewModeAria", {
+                                            defaultValue: "Calendar view",
+                                        }), value: calendar.viewMode, onValueChange: calendar.setViewMode, items: VIEW_ITEMS, className: "w-full border-border/24 bg-card/24 p-0.5", buttonClassName: "min-h-8 flex-1 px-3 py-1 text-xs" }), _jsxs(Button, { size: "sm", className: "h-8 shrink-0 gap-1 rounded-xl px-3 text-xs font-semibold", onClick: () => {
+                                            setCreateDefaultDate(new Date(calendar.windowStart));
+                                            setCreateOpen(true);
+                                        }, "data-testid": "lifeops-calendar-new-event", children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), t("lifeopsCalendar.newEvent", { defaultValue: "New" })] })] })] }), calendar.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: calendar.error })) : null, calendar.loading && calendar.events.length === 0 ? (_jsxs("div", { className: "flex items-center gap-2 py-12 text-xs text-muted", children: [_jsx(Spinner, { size: 14 }), t("lifeopsCalendar.loading", { defaultValue: "Loading events…" })] })) : compactLayout ? (_jsx(AgendaView, { days: days, eventsByDay: eventsByDay, selectedEventId: selectedEventId, onSelectEvent: handleSelectEvent, emptyLabel: t("lifeopsCalendar.empty", {
+                            defaultValue: "Nothing scheduled.",
+                        }) })) : calendar.viewMode === "month" ? (_jsx(MonthGrid, { baseDate: calendar.windowStart, eventsByDay: eventsByDay, selectedEventId: selectedEventId, onSelectEvent: handleSelectEvent })) : (_jsx(TimeGrid, { days: days, eventsByDay: eventsByDay, selectedEventId: selectedEventId, onSelectEvent: handleSelectEvent }))] }), _jsx(EventEditorDrawer, { open: drawerEvent !== null, mode: "edit", event: drawerEvent, onChat: chatAboutEvent, onClose: handleCloseEditor, onSaved: (updatedEvent) => {
+                    void calendar.refresh();
+                    setDrawerEvent(updatedEvent);
+                }, onDeleted: () => {
+                    void calendar.refresh();
+                    setDrawerEvent(null);
+                    onSelect({ eventId: null });
+                } }), _jsx(EventEditorDrawer, { open: createOpen, mode: "create", event: null, createDefaults: { date: createDefaultDate, side: "owner" }, onClose: () => setCreateOpen(false), onCreated: (createdEvent) => {
+                    void calendar.refresh();
+                    setCreateOpen(false);
+                    onSelect({ eventId: createdEvent.id });
+                } })] }));
+}

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

@@ -0,0 +1,34 @@
+import type { LifeOpsActiveReminderView, LifeOpsCalendarEvent, LifeOpsInboxMessage } from "@elizaos/shared";
+import { type ReactNode } from "react";
+import { type LifeOpsSelection } from "./LifeOpsSelectionContext.js";
+export interface PrefillChatDetail {
+    text: string;
+    select?: boolean;
+}
+export declare function postToChat(text: string, options?: {
+    select?: boolean;
+}): void;
+export declare function buildMessageChatPrefill(message: LifeOpsInboxMessage): string;
+export declare function buildReminderChatPrefill(reminder: LifeOpsActiveReminderView): string;
+export declare function buildEventChatPrefill(event: LifeOpsCalendarEvent): string;
+export declare function useLifeOpsChatLauncher(): {
+    openLifeOpsChat: (text: string, selection?: Partial<LifeOpsSelection>, options?: {
+        select?: boolean;
+    }) => void;
+    chatAboutMessage: (message: LifeOpsInboxMessage) => void;
+    chatAboutReminder: (reminder: LifeOpsActiveReminderView) => void;
+    chatAboutEvent: (event: LifeOpsCalendarEvent) => void;
+};
+export declare function useLifeOpsChatAdapter(selection: LifeOpsSelection): {
+    placeholder: string | null;
+};
+export declare function LifeOpsChatAdapter({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function buildReplyPrefill(opts: {
+    channel: string;
+    sender: string;
+    snippet: string;
+    deepLink?: string | null;
+}): string;
+//# sourceMappingURL=LifeOpsChatAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsChatAdapter.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsChatAdapter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EACzB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqCD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAM7E;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAe5E;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,yBAAyB,GAClC,MAAM,CAUR;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CAWzE;AAED,wBAAgB,sBAAsB,IAAI;IACxC,eAAe,EAAE,CACf,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,EACrC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAC3B,IAAI,CAAC;IACV,gBAAgB,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjE,cAAc,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACvD,CAyDA;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,gBAAgB,GAAG;IAClE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAiDA;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAiBvE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,GAAG,MAAM,CAGT"}