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

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

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LifeOpsSetupGate — first-run setup panel.
+ *
+ * Replaces Dashboard content only (nav + other sections remain visible).
+ * Dismissed permanently when: profile has name+timezone AND at least one of
+ * {calendar provider, messaging provider, or explicit skip}.
+ *
+ * Dismiss flag is persisted via localStorage under
+ * LIFEOPS_SETUP_GATE_DISMISSED_KEY.
+ */
+import { Button, Input, isCloudStatusAuthenticated, useApp, } from "@elizaos/app-core";
+import { CalendarDays, MessageCircle, SkipForward } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useGoogleLifeOpsConnector } from "../hooks/useGoogleLifeOpsConnector.js";
+import { useLifeOpsXConnector } from "../hooks/useLifeOpsXConnector.js";
+export const LIFEOPS_SETUP_GATE_DISMISSED_KEY = "eliza:lifeops-setup-gate-dismissed";
+function loadDismissed() {
+    try {
+        return localStorage.getItem(LIFEOPS_SETUP_GATE_DISMISSED_KEY) === "1";
+    }
+    catch {
+        return false;
+    }
+}
+function saveDismissed() {
+    try {
+        localStorage.setItem(LIFEOPS_SETUP_GATE_DISMISSED_KEY, "1");
+    }
+    catch {
+        // ignore
+    }
+}
+export function clearLifeOpsSetupGateDismissed() {
+    try {
+        localStorage.removeItem(LIFEOPS_SETUP_GATE_DISMISSED_KEY);
+    }
+    catch {
+        // ignore
+    }
+}
+export function useLifeOpsSetupGate() {
+    const [dismissed, setDismissed] = useState(loadDismissed);
+    const dismiss = useCallback(() => {
+        saveDismissed();
+        setDismissed(true);
+    }, []);
+    const reset = useCallback(() => {
+        clearLifeOpsSetupGateDismissed();
+        setDismissed(false);
+    }, []);
+    return { dismissed, dismiss, reset };
+}
+export function LifeOpsSetupGate({ onDismiss }) {
+    const { elizaCloudConnected, elizaCloudLoginBusy, elizaCloudStatusReason, handleCloudLogin, t, } = useApp();
+    const ownerConnector = useGoogleLifeOpsConnector({
+        includeAccounts: false,
+        side: "owner",
+    });
+    const xConnector = useLifeOpsXConnector();
+    const [name, setName] = useState("");
+    const [timezone, setTimezone] = useState(() => Intl.DateTimeFormat().resolvedOptions().timeZone ?? "");
+    const [skipped, setSkipped] = useState(false);
+    const calendarConnected = ownerConnector.status?.connected === true;
+    const xConnected = xConnector.status?.connected === true;
+    const cloudAuthenticated = isCloudStatusAuthenticated(elizaCloudConnected, elizaCloudStatusReason);
+    const canContinue = name.trim().length > 0 &&
+        timezone.trim().length > 0 &&
+        (calendarConnected || xConnected || skipped);
+    const handleConnectCalendar = useCallback(() => {
+        void ownerConnector.connect();
+    }, [ownerConnector]);
+    const handleConnectX = useCallback(() => {
+        if (!cloudAuthenticated) {
+            void handleCloudLogin();
+            return;
+        }
+        void xConnector.connect("cloud_managed");
+    }, [cloudAuthenticated, handleCloudLogin, xConnector]);
+    const handleSkip = useCallback(() => {
+        setSkipped(true);
+    }, []);
+    return (_jsxs("div", { className: "space-y-6 px-1 py-2", "data-testid": "lifeops-setup-gate", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("h2", { className: "text-base font-semibold text-txt", children: t("lifeopssetup.title", {
+                            defaultValue: "Set up LifeOps",
+                        }) }), _jsx("p", { className: "text-sm leading-relaxed text-muted", children: t("lifeopssetup.description", {
+                            defaultValue: "Tell the agent a bit about you, then connect your calendar or a messaging account to get started.",
+                        }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "lifeops-setup-name", className: "text-xs font-medium text-muted", children: t("lifeopssetup.yourName", {
+                                            defaultValue: "Your name",
+                                        }) }), _jsx(Input, { id: "lifeops-setup-name", placeholder: t("lifeopssetup.namePlaceholder", {
+                                            defaultValue: "e.g. Alex",
+                                        }), value: name, onChange: (e) => setName(e.target.value), className: "h-9 rounded-xl text-sm" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "lifeops-setup-timezone", className: "text-xs font-medium text-muted", children: t("lifeopssetup.timezone", {
+                                            defaultValue: "Timezone",
+                                        }) }), _jsx(Input, { id: "lifeops-setup-timezone", placeholder: "America/New_York", value: timezone, onChange: (e) => setTimezone(e.target.value), className: "h-9 rounded-xl text-sm" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-medium text-muted", children: t("lifeopssetup.connectProvider", {
+                                    defaultValue: "Connect a provider (or skip for now)",
+                                }) }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("button", { type: "button", onClick: handleConnectCalendar, disabled: ownerConnector.actionPending, className: [
+                                            "flex items-start gap-3 rounded-2xl border px-4 py-3 text-left transition-colors",
+                                            calendarConnected
+                                                ? "border-ok/40 bg-ok/8 text-txt"
+                                                : "border-border/16 bg-card/18 hover:bg-card/30 text-txt",
+                                        ].join(" "), children: [_jsx(CalendarDays, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted" }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: t("lifeopssetup.calendarTitle", {
+                                                            defaultValue: "Google Calendar",
+                                                        }) }), _jsx("div", { className: "text-xs text-muted", children: calendarConnected
+                                                            ? t("lifeopssetup.connected", {
+                                                                defaultValue: "Connected",
+                                                            })
+                                                            : t("lifeopssetup.calendarHint", {
+                                                                defaultValue: "Read events, manage your schedule",
+                                                            }) })] })] }), _jsxs("button", { type: "button", onClick: handleConnectX, disabled: xConnector.actionPending || elizaCloudLoginBusy, className: [
+                                            "flex items-start gap-3 rounded-2xl border px-4 py-3 text-left transition-colors",
+                                            xConnected
+                                                ? "border-ok/40 bg-ok/8 text-txt"
+                                                : "border-border/16 bg-card/18 hover:bg-card/30 text-txt",
+                                        ].join(" "), children: [_jsx(MessageCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted" }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: t("lifeopssetup.messagingTitle", {
+                                                            defaultValue: "X DMs",
+                                                        }) }), _jsx("div", { className: "text-xs text-muted", children: xConnected
+                                                            ? t("lifeopssetup.connected", {
+                                                                defaultValue: "Connected",
+                                                            })
+                                                            : !elizaCloudConnected
+                                                                ? t("lifeopssetup.cloudRequired", {
+                                                                    defaultValue: "Connect Eliza Cloud first",
+                                                                })
+                                                                : t("lifeopssetup.messagingHint", {
+                                                                    defaultValue: "Read and reply to incoming DMs",
+                                                                }) })] })] })] }), xConnector.pendingAuthUrl ? (_jsx("a", { href: xConnector.pendingAuthUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-accent hover:underline", children: t("lifeopssetup.openXAuth", {
+                                    defaultValue: "Open X authorization",
+                                }) })) : null, !calendarConnected && !xConnected && !skipped ? (_jsxs("button", { type: "button", onClick: handleSkip, className: "flex items-center gap-1.5 text-xs text-muted hover:text-txt", children: [_jsx(SkipForward, { className: "h-3.5 w-3.5" }), t("lifeopssetup.skipProviders", {
+                                        defaultValue: "Skip for now",
+                                    })] })) : null] })] }), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsx(Button, { size: "sm", disabled: !canContinue, onClick: onDismiss, className: "rounded-full px-5 py-2 text-xs-tight font-semibold", children: t("lifeopssetup.continue", {
+                            defaultValue: "Continue",
+                        }) }), !canContinue && (_jsx("span", { className: "text-xs text-muted", children: t("lifeopssetup.continueHint", {
+                            defaultValue: "Fill in your name and timezone to continue.",
+                        }) }))] })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Format a numeric local hour in [0..36) into a 12h time string.
+ * Hours >=24 wrap to the next day. Examples:
+ *   23.5  -> "11:30 PM"
+ *   7.25  -> "7:15 AM"
+ *   24.5  -> "12:30 AM"
+ */
+export declare function formatLocalHour(h: number): string;
+export declare function LifeOpsSleepSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LifeOpsSleepSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsSleepSection.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsSleepSection.tsx"],"names":[],"mappings":"AA2EA;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAYjD;AA2qBD,wBAAgB,mBAAmB,4CA4MlC"}

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

@@ -0,0 +1,425 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core";
+import { Activity, AlarmClock, Heart, Loader2, Moon, RefreshCw, Sunrise, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatClockTime, formatDurationSeconds, HabitPanel, MetricTile, } from "./LifeOpsHabitVisuals.js";
+const HISTORY_WINDOWS = [30, 90, 365];
+const DEFAULT_WINDOW = 365;
+function sleepStatusLabel(schedule) {
+    if (!schedule)
+        return "No signal";
+    switch (schedule.sleepStatus) {
+        case "sleeping_now":
+            return "Sleeping";
+        case "slept":
+            return "Slept";
+        case "likely_missed":
+            return "Likely missed";
+        case "unknown":
+            return "Unknown";
+    }
+}
+function minutesFromDayStart(iso) {
+    if (!iso)
+        return null;
+    const date = new Date(iso);
+    const parsed = date.getTime();
+    if (!Number.isFinite(parsed))
+        return null;
+    return date.getHours() * 60 + date.getMinutes();
+}
+function markerStyle(iso) {
+    const minutes = minutesFromDayStart(iso);
+    if (minutes === null)
+        return undefined;
+    return { left: `${Math.min(100, Math.max(0, (minutes / 1440) * 100))}%` };
+}
+function sleepDurationSeconds(schedule) {
+    if (typeof schedule?.lastSleepDurationMinutes !== "number") {
+        return null;
+    }
+    return Math.max(0, schedule.lastSleepDurationMinutes * 60);
+}
+/**
+ * Format a numeric local hour in [0..36) into a 12h time string.
+ * Hours >=24 wrap to the next day. Examples:
+ *   23.5  -> "11:30 PM"
+ *   7.25  -> "7:15 AM"
+ *   24.5  -> "12:30 AM"
+ */
+export function formatLocalHour(h) {
+    if (!Number.isFinite(h))
+        return "—";
+    const wrapped = ((h % 24) + 24) % 24;
+    const hourFloat = wrapped;
+    const hour = Math.floor(hourFloat);
+    const minute = Math.round((hourFloat - hour) * 60);
+    const minuteWrap = minute === 60 ? 0 : minute;
+    const hourWrap = minute === 60 ? (hour + 1) % 24 : hour;
+    const period = hourWrap >= 12 ? "PM" : "AM";
+    const displayHour = hourWrap % 12 === 0 ? 12 : hourWrap % 12;
+    const minuteStr = String(minuteWrap).padStart(2, "0");
+    return `${displayHour}:${minuteStr} ${period}`;
+}
+function formatDurationMinutes(minutes) {
+    if (typeof minutes !== "number" || !Number.isFinite(minutes))
+        return "—";
+    return formatDurationSeconds(minutes * 60) || "—";
+}
+function historyWindowLabel(days) {
+    return days === 365 ? "All year" : `${days} days`;
+}
+function formatStddev(stddevMin) {
+    if (typeof stddevMin !== "number" || !Number.isFinite(stddevMin))
+        return "";
+    return `±${Math.round(stddevMin)} min`;
+}
+function formatEpisodeDateLabel(iso) {
+    const ts = Date.parse(iso);
+    if (!Number.isFinite(ts))
+        return "—";
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+    }).format(new Date(ts));
+}
+function cycleTypeLabel(type) {
+    switch (type) {
+        case "overnight":
+            return "Overnight";
+        case "nap":
+            return "Nap";
+        case "unknown":
+            return "Unknown";
+    }
+}
+function cycleTypeBadgeClass(type) {
+    switch (type) {
+        case "overnight":
+            return "border-indigo-500/30 bg-indigo-500/10 text-indigo-200";
+        case "nap":
+            return "border-amber-400/30 bg-amber-400/10 text-amber-200";
+        case "unknown":
+            return "border-border/20 bg-bg/30 text-muted";
+    }
+}
+function sourceMeta(source) {
+    switch (source) {
+        case "health":
+            return { label: "Health sensor", short: "Sensor", icon: Heart };
+        case "activity_gap":
+            return {
+                label: "Inferred from activity gap",
+                short: "Inferred",
+                icon: Activity,
+            };
+        case "manual":
+            return { label: "Manual entry", short: "Manual", icon: AlarmClock };
+    }
+}
+function confidenceTier(value) {
+    if (value >= 0.8)
+        return "high";
+    if (value >= 0.6)
+        return "med";
+    return "low";
+}
+function confidenceDotClass(tier) {
+    switch (tier) {
+        case "high":
+            return "bg-emerald-400";
+        case "med":
+            return "bg-amber-300";
+        case "low":
+            return "bg-rose-400";
+    }
+}
+function confidenceLabel(tier, value) {
+    const pct = Math.round(value * 100);
+    switch (tier) {
+        case "high":
+            return `High confidence (${pct}%)`;
+        case "med":
+            return `Medium confidence (${pct}%)`;
+        case "low":
+            return `Low confidence (${pct}%)`;
+    }
+}
+function classificationLabel(c) {
+    switch (c) {
+        case "very_regular":
+            return "Very regular";
+        case "regular":
+            return "Regular";
+        case "irregular":
+            return "Irregular";
+        case "very_irregular":
+            return "Very irregular";
+        case "insufficient_data":
+            return "Not enough data yet";
+    }
+}
+function regularityTone(c) {
+    switch (c) {
+        case "very_regular":
+            return {
+                ring: "ring-emerald-400/40",
+                text: "text-emerald-300",
+                bg: "bg-emerald-500/10",
+            };
+        case "regular":
+            return {
+                ring: "ring-green-400/40",
+                text: "text-green-300",
+                bg: "bg-green-500/10",
+            };
+        case "irregular":
+            return {
+                ring: "ring-amber-400/40",
+                text: "text-amber-300",
+                bg: "bg-amber-500/10",
+            };
+        case "very_irregular":
+            return {
+                ring: "ring-rose-400/40",
+                text: "text-rose-300",
+                bg: "bg-rose-500/10",
+            };
+        case "insufficient_data":
+            return {
+                ring: "ring-border/30",
+                text: "text-muted",
+                bg: "bg-bg/30",
+            };
+    }
+}
+function TabButton({ active, label, onClick, }) {
+    return (_jsx("button", { type: "button", role: "tab", "aria-selected": active, onClick: onClick, className: [
+            "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+            active
+                ? "bg-accent/20 text-txt"
+                : "text-muted hover:bg-bg/30 hover:text-txt",
+        ].join(" "), children: label }));
+}
+function NapToggle({ value, onChange, }) {
+    return (_jsxs("label", { className: "inline-flex items-center gap-2 text-xs text-muted", children: [_jsx("span", { children: "Show naps" }), _jsx("button", { type: "button", role: "switch", "aria-checked": value, onClick: () => onChange(!value), className: [
+                    "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
+                    value ? "bg-accent/60" : "bg-border/30",
+                ].join(" "), children: _jsx("span", { className: [
+                        "inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
+                        value ? "translate-x-4" : "translate-x-0.5",
+                    ].join(" ") }) })] }));
+}
+function TonightTab({ schedule }) {
+    const durationSeconds = sleepDurationSeconds(schedule);
+    const bedtime = schedule?.relativeTime.bedtimeTargetAt ?? null;
+    const wake = schedule?.wakeAt ?? schedule?.relativeTime.wakeAnchorAt ?? null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-4", children: [_jsx(MetricTile, { icon: _jsx(Moon, {}), value: sleepStatusLabel(schedule), label: "Now" }), _jsx(MetricTile, { icon: _jsx(Moon, {}), value: formatDurationSeconds(durationSeconds) || "-", label: "Last Sleep" }), _jsx(MetricTile, { icon: _jsx(AlarmClock, {}), value: formatClockTime(bedtime) || "-", label: "Bed" }), _jsx(MetricTile, { icon: _jsx(Sunrise, {}), value: formatClockTime(wake) || "-", label: "Wake" })] }), _jsx(HabitPanel, { title: "Cycle", icon: _jsx(Moon, {}), children: _jsxs("div", { className: "relative h-24 rounded-lg border border-border/12 bg-bg/24 p-4", children: [_jsx("div", { className: "absolute left-4 right-4 top-1/2 h-2 -translate-y-1/2 rounded-full bg-gradient-to-r from-indigo-500/70 via-blue-400/50 to-amber-300/70" }), markerStyle(bedtime) ? (_jsx("div", { className: "absolute top-5 h-14 w-px bg-blue-300", style: markerStyle(bedtime), title: "Bed" })) : null, markerStyle(wake) ? (_jsx("div", { className: "absolute top-5 h-14 w-px bg-amber-300", style: markerStyle(wake), title: "Wake" })) : null, _jsx("div", { className: "absolute bottom-3 left-4 text-[10px] font-medium text-muted", children: "12a" }), _jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 text-[10px] font-medium text-muted", children: "12p" }), _jsx("div", { className: "absolute bottom-3 right-4 text-[10px] font-medium text-muted", children: "12a" })] }) })] }));
+}
+function HistoryEpisodeRow({ episode, }) {
+    const meta = sourceMeta(episode.source);
+    const SourceIcon = meta.icon;
+    const tier = confidenceTier(episode.confidence);
+    const dotClass = confidenceDotClass(tier);
+    const dotTitle = confidenceLabel(tier, episode.confidence);
+    const dateLabel = formatEpisodeDateLabel(episode.startedAt);
+    const startClock = formatClockTime(episode.startedAt) || "—";
+    const endClock = episode.endedAt ? formatClockTime(episode.endedAt) : "—";
+    const durationLabel = formatDurationMinutes(episode.durationMin);
+    const typeLabel = cycleTypeLabel(episode.cycleType);
+    const typeBadge = cycleTypeBadgeClass(episode.cycleType);
+    const durationPct = typeof episode.durationMin === "number" && Number.isFinite(episode.durationMin)
+        ? Math.min(100, Math.max(6, (episode.durationMin / 600) * 100))
+        : 0;
+    return (_jsxs("li", { className: "flex items-center gap-3 rounded-lg border border-border/12 bg-bg/24 px-3 py-2.5", "data-testid": "sleep-history-row", children: [_jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${dotClass}`, title: dotTitle, role: "img", "aria-label": dotTitle }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-txt", children: [_jsx("span", { className: "truncate", children: dateLabel }), _jsx("span", { className: `shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide ${typeBadge}`, children: typeLabel })] }), _jsxs("div", { className: "mt-0.5 truncate text-[11px] text-muted", children: [startClock, " \u2192 ", endClock] }), durationPct > 0 ? (_jsx("div", { className: "mt-2 h-1.5 overflow-hidden rounded-full bg-bg-muted/40", children: _jsx("div", { className: [
+                                "h-full rounded-full",
+                                episode.cycleType === "nap"
+                                    ? "bg-amber-300/80"
+                                    : episode.cycleType === "overnight"
+                                        ? "bg-indigo-300/80"
+                                        : "bg-muted/60",
+                            ].join(" "), style: { width: `${durationPct}%` } }) })) : null] }), _jsxs("div", { className: "shrink-0 text-right", children: [_jsx("div", { className: "text-sm font-semibold tabular-nums text-txt", children: durationLabel }), _jsxs("div", { className: "mt-0.5 inline-flex items-center gap-1 text-[10px] text-muted", title: meta.label, children: [_jsx(SourceIcon, { className: "h-3 w-3", "aria-hidden": true }), _jsx("span", { children: meta.short })] })] })] }));
+}
+function HistorySummaryStrip({ episodes, }) {
+    const summary = useMemo(() => {
+        let totalDuration = 0;
+        let durationCount = 0;
+        let overnightCount = 0;
+        let napCount = 0;
+        let openCount = 0;
+        for (const episode of episodes) {
+            if (episode.cycleType === "overnight")
+                overnightCount += 1;
+            if (episode.cycleType === "nap")
+                napCount += 1;
+            if (!episode.endedAt)
+                openCount += 1;
+            if (typeof episode.durationMin === "number" &&
+                Number.isFinite(episode.durationMin)) {
+                totalDuration += episode.durationMin;
+                durationCount += 1;
+            }
+        }
+        return {
+            averageMin: durationCount > 0 ? totalDuration / durationCount : null,
+            overnightCount,
+            napCount,
+            openCount,
+        };
+    }, [episodes]);
+    return (_jsxs("div", { className: "grid gap-2 sm:grid-cols-4", "data-testid": "sleep-history-summary", children: [_jsx(MetricTile, { icon: _jsx(Moon, {}), value: String(episodes.length), label: "Cycles" }), _jsx(MetricTile, { icon: _jsx(Moon, {}), value: formatDurationMinutes(summary.averageMin), label: "Avg" }), _jsx(MetricTile, { icon: _jsx(Activity, {}), value: `${summary.overnightCount}/${summary.napCount}`, label: "Night/Nap" }), _jsx(MetricTile, { icon: _jsx(AlarmClock, {}), value: String(summary.openCount), label: "Open" })] }));
+}
+function HistoryCycleMap({ episodes, }) {
+    const visible = episodes.slice(0, 42).reverse();
+    if (visible.length === 0)
+        return null;
+    return (_jsx("div", { className: "grid min-h-16 grid-cols-[repeat(auto-fit,minmax(8px,1fr))] items-end gap-1 rounded-lg border border-border/12 bg-bg/24 px-3 py-3", "data-testid": "sleep-history-cycle-map", children: visible.map((episode) => {
+            const height = typeof episode.durationMin === "number" &&
+                Number.isFinite(episode.durationMin)
+                ? Math.min(100, Math.max(16, (episode.durationMin / 600) * 100))
+                : 16;
+            const tone = episode.cycleType === "nap"
+                ? "bg-amber-300/75"
+                : episode.cycleType === "overnight"
+                    ? "bg-indigo-300/80"
+                    : "bg-muted/60";
+            return (_jsx("span", { className: `block rounded-sm ${tone}`, style: { height: `${height}%` }, title: `${formatEpisodeDateLabel(episode.startedAt)} · ${formatDurationMinutes(episode.durationMin)}` }, episode.id));
+        }) }));
+}
+function HistoryTab({ data, loading, error, windowDays, onWindowChange, }) {
+    const sortedEpisodes = useMemo(() => {
+        if (!data)
+            return [];
+        return [...data.episodes].sort((a, b) => {
+            const aTs = Date.parse(a.startedAt);
+            const bTs = Date.parse(b.startedAt);
+            return ((Number.isFinite(bTs) ? bTs : 0) - (Number.isFinite(aTs) ? aTs : 0));
+        });
+    }, [data]);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center gap-1.5", children: HISTORY_WINDOWS.map((w) => (_jsx("button", { type: "button", onClick: () => onWindowChange(w), className: [
+                        "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors",
+                        w === windowDays
+                            ? "border-accent/40 bg-accent/10 text-txt"
+                            : "border-border/20 bg-bg/30 text-muted hover:border-accent/30 hover:text-txt",
+                    ].join(" "), "aria-pressed": w === windowDays, children: historyWindowLabel(w) }, w))) }), 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, loading && !data ? (_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 history..."] })) : null, !loading && data && sortedEpisodes.length === 0 ? (_jsxs("div", { className: "rounded-lg border border-border/20 bg-bg/24 px-3 py-6 text-center text-xs text-muted", children: ["No sleep data in the last ", windowDays, " days. Connect a health source from Settings."] })) : null, sortedEpisodes.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(HistorySummaryStrip, { episodes: sortedEpisodes }), _jsx(HistoryCycleMap, { episodes: sortedEpisodes }), _jsx("ul", { className: "space-y-2", "data-testid": "sleep-history-list", children: sortedEpisodes.map((ep) => (_jsx(HistoryEpisodeRow, { episode: ep }, ep.id))) })] })) : null] }));
+}
+function SriGauge({ sri, classification, }) {
+    const tone = regularityTone(classification);
+    const display = Number.isFinite(sri) ? Math.round(sri) : 0;
+    const pct = Math.max(0, Math.min(100, display));
+    const radius = 52;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - pct / 100);
+    return (_jsxs("div", { className: `flex items-center gap-4 rounded-lg ${tone.bg} p-4`, children: [_jsxs("div", { className: `relative h-32 w-32 shrink-0 ring-2 ${tone.ring} rounded-full`, children: [_jsxs("svg", { viewBox: "0 0 120 120", className: "h-full w-full -rotate-90", role: "img", "aria-label": `Sleep Regularity Index ${classification === "insufficient_data" ? "unavailable" : display}`, children: [_jsx("title", { children: "Sleep Regularity Index" }), _jsx("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "10", className: "text-bg-muted/40" }), _jsx("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "10", strokeLinecap: "round", className: tone.text, strokeDasharray: circumference, strokeDashoffset: offset })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [_jsx("div", { className: `text-3xl font-semibold leading-none ${tone.text}`, children: classification === "insufficient_data" ? "—" : display }), _jsx("div", { className: "mt-1 text-[10px] font-medium uppercase tracking-wide text-muted", children: "SRI" })] })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: `text-base font-semibold ${tone.text}`, children: classificationLabel(classification) }), _jsx("div", { className: "mt-1 text-xs text-muted", children: "Sleep Regularity Index measures how consistent your bedtime and wake time are night to night." })] })] }));
+}
+function PatternTab({ regularity, baseline, loading, error, }) {
+    const noBaseline = !baseline ||
+        (baseline.medianBedtimeLocalHour === null &&
+            baseline.medianWakeLocalHour === null &&
+            baseline.medianSleepDurationMin === null);
+    return (_jsxs("div", { className: "space-y-4", children: [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, loading && !regularity && !baseline ? (_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 pattern..."] })) : null, regularity ? (_jsx(SriGauge, { sri: regularity.sri, classification: regularity.classification })) : null, noBaseline ? (_jsx("div", { className: "rounded-lg border border-border/20 bg-bg/24 px-3 py-6 text-center text-xs text-muted", children: "Not enough data yet \u2014 keep tracking sleep for a week to see your pattern." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(MetricTile, { icon: _jsx(AlarmClock, {}), value: baseline.medianBedtimeLocalHour !== null
+                                    ? `${formatLocalHour(baseline.medianBedtimeLocalHour)} ${formatStddev(baseline.bedtimeStddevMin)}`.trim()
+                                    : "—", label: "Typical bedtime" }), _jsx(MetricTile, { icon: _jsx(Sunrise, {}), value: baseline.medianWakeLocalHour !== null
+                                    ? `${formatLocalHour(baseline.medianWakeLocalHour)} ${formatStddev(baseline.wakeStddevMin)}`.trim()
+                                    : "—", label: "Typical wake" }), _jsx(MetricTile, { icon: _jsx(Moon, {}), value: formatDurationMinutes(baseline.medianSleepDurationMin), label: "Typical duration" })] }), _jsxs("div", { className: "text-[11px] text-muted", children: ["Based on ", baseline.sampleSize, " ", baseline.sampleSize === 1 ? "night" : "nights", " over the last", " ", baseline.windowDays, " days", regularity && regularity.sampleSize !== baseline.sampleSize
+                                ? ` (regularity from ${regularity.sampleSize} ${regularity.sampleSize === 1 ? "night" : "nights"})`
+                                : "", "."] })] }))] }));
+}
+export function LifeOpsSleepSection() {
+    const [tab, setTab] = useState("tonight");
+    const [includeNaps, setIncludeNaps] = useState(false);
+    const [historyWindow, setHistoryWindow] = useState(DEFAULT_WINDOW);
+    const [overview, setOverview] = useState(null);
+    const [tonightLoading, setTonightLoading] = useState(false);
+    const [tonightError, setTonightError] = useState(null);
+    const [history, setHistory] = useState(null);
+    const [historyLoading, setHistoryLoading] = useState(false);
+    const [historyError, setHistoryError] = useState(null);
+    const [regularity, setRegularity] = useState(null);
+    const [baseline, setBaseline] = useState(null);
+    const [patternLoading, setPatternLoading] = useState(false);
+    const [patternError, setPatternError] = useState(null);
+    const loadTonight = useCallback(async () => {
+        setTonightLoading(true);
+        setTonightError(null);
+        try {
+            setOverview(await client.getLifeOpsOverview());
+        }
+        catch (cause) {
+            setTonightError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Sleep failed to load.");
+        }
+        finally {
+            setTonightLoading(false);
+        }
+    }, []);
+    const loadHistory = useCallback(async (windowDays, naps) => {
+        setHistoryLoading(true);
+        setHistoryError(null);
+        try {
+            setHistory(await client.getLifeOpsSleepHistory({
+                windowDays,
+                includeNaps: naps,
+            }));
+        }
+        catch (cause) {
+            setHistoryError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Sleep history failed to load.");
+        }
+        finally {
+            setHistoryLoading(false);
+        }
+    }, []);
+    const loadPattern = useCallback(async (naps) => {
+        setPatternLoading(true);
+        setPatternError(null);
+        try {
+            const [reg, base] = await Promise.all([
+                client.getLifeOpsSleepRegularity({ includeNaps: naps }),
+                client.getLifeOpsPersonalBaseline(),
+            ]);
+            setRegularity(reg);
+            setBaseline(base);
+        }
+        catch (cause) {
+            setPatternError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Sleep pattern failed to load.");
+        }
+        finally {
+            setPatternLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void loadTonight();
+    }, [loadTonight]);
+    useEffect(() => {
+        if (tab === "history") {
+            void loadHistory(historyWindow, includeNaps);
+        }
+    }, [tab, historyWindow, includeNaps, loadHistory]);
+    useEffect(() => {
+        if (tab === "pattern") {
+            void loadPattern(includeNaps);
+        }
+    }, [tab, includeNaps, loadPattern]);
+    const refreshActiveTab = useCallback(() => {
+        if (tab === "tonight") {
+            void loadTonight();
+            return;
+        }
+        if (tab === "history") {
+            void loadHistory(historyWindow, includeNaps);
+            return;
+        }
+        void loadPattern(includeNaps);
+    }, [tab, historyWindow, includeNaps, loadTonight, loadHistory, loadPattern]);
+    const refreshing = (tab === "tonight" && tonightLoading) ||
+        (tab === "history" && historyLoading) ||
+        (tab === "pattern" && patternLoading);
+    const schedule = overview?.schedule ?? null;
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "lifeops-sleep-section", children: [_jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border/20 pb-4", children: [_jsx("div", { className: "min-w-0", children: _jsx("h1", { className: "truncate text-2xl font-semibold tracking-tight text-txt", children: "Sleep" }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(NapToggle, { value: includeNaps, onChange: setIncludeNaps }), _jsx("button", { type: "button", "aria-label": "Refresh sleep", 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: refreshActiveTab, disabled: refreshing, children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}`, "aria-hidden": true }) })] })] }), _jsxs("div", { className: "inline-flex items-center gap-1 rounded-lg border border-border/20 bg-bg/30 p-1", role: "tablist", "aria-label": "Sleep view", children: [_jsx(TabButton, { active: tab === "tonight", label: "Tonight", onClick: () => setTab("tonight") }), _jsx(TabButton, { active: tab === "history", label: "History", onClick: () => setTab("history") }), _jsx(TabButton, { active: tab === "pattern", label: "Pattern", onClick: () => setTab("pattern") })] }), tab === "tonight" ? (_jsxs(_Fragment, { children: [tonightError ? (_jsx("div", { className: "rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-300", children: tonightError })) : null, tonightLoading && !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 sleep..."] })) : null, _jsx(TonightTab, { schedule: schedule })] })) : null, tab === "history" ? (_jsx(HistoryTab, { data: history, loading: historyLoading, error: historyError, windowDays: historyWindow, onWindowChange: setHistoryWindow })) : null, tab === "pattern" ? (_jsx(PatternTab, { regularity: regularity, baseline: baseline, loading: patternLoading, error: patternError })) : null] }));
+}

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { LifeOpsSection } from "../hooks/useLifeOpsSection.js";
+interface LifeOpsWorkspaceShellProps {
+    compactLayout: boolean;
+    section: LifeOpsSection;
+    navigate: (section: LifeOpsSection) => void;
+    children: ReactNode;
+}
+export declare function LifeOpsWorkspaceShell({ compactLayout, section, navigate, children, }: LifeOpsWorkspaceShellProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LifeOpsWorkspaceShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsWorkspaceShell.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsWorkspaceShell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAIpE,UAAU,0BAA0B;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD,wBAAgB,qBAAqB,CAAC,EACpC,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CAkH5B"}