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

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TooltipHint } from "@elizaos/app-core";
+import { Sidebar, SidebarContent, SidebarPanel, SidebarScrollRegion, TooltipProvider, } from "@elizaos/ui";
+import { BriefcaseBusiness, CalendarDays, CreditCard, LayoutDashboard, Mail, MessageSquare, Monitor, Moon, Settings2, } from "lucide-react";
+const NAV_GROUPS = [
+    {
+        key: "today",
+        label: "Today",
+        items: [
+            {
+                id: "overview",
+                label: "Overview",
+                icon: _jsx(LayoutDashboard, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-violet-400",
+            },
+            {
+                id: "sleep",
+                label: "Sleep",
+                icon: _jsx(Moon, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-blue-300",
+            },
+            {
+                id: "screen-time",
+                label: "Screen Time",
+                icon: _jsx(Monitor, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-amber-300",
+            },
+            {
+                id: "messages",
+                label: "Messages",
+                icon: _jsx(MessageSquare, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-emerald-400",
+            },
+            {
+                id: "mail",
+                label: "Mail",
+                icon: _jsx(Mail, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-rose-400",
+            },
+            {
+                id: "calendar",
+                label: "Calendar",
+                icon: _jsx(CalendarDays, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-blue-400",
+            },
+            {
+                id: "reminders",
+                label: "Reminders",
+                icon: _jsx(BriefcaseBusiness, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-amber-400",
+            },
+            {
+                id: "money",
+                label: "Money",
+                icon: _jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-green-400",
+            },
+        ],
+    },
+    {
+        key: "config",
+        label: "Configure",
+        items: [
+            {
+                id: "setup",
+                label: "Settings",
+                icon: _jsx(Settings2, { className: "h-4 w-4", "aria-hidden": true }),
+                dotColor: "bg-rose-400",
+            },
+        ],
+    },
+];
+const NAV_ITEMS = NAV_GROUPS.flatMap((group) => group.items);
+export function LifeOpsNavRail({ activeSection, onNavigate, collapsible = true, }) {
+    const collapsedRailItems = NAV_ITEMS.map((item) => {
+        const isActive = item.id === activeSection;
+        return (_jsx(SidebarContent.RailItem, { "aria-label": item.label, title: item.label, active: isActive, onClick: () => onNavigate(item.id), children: item.icon }, item.id));
+    });
+    return (_jsx(TooltipProvider, { delayDuration: 320, skipDelayDuration: 120, children: _jsx(Sidebar, { testId: "lifeops-nav-rail", collapsible: collapsible, contentIdentity: "lifeops", syncId: "lifeops-sidebar", collapseButtonAriaLabel: "Collapse LifeOps sidebar", expandButtonAriaLabel: "Expand LifeOps sidebar", header: undefined, className: "!mt-0 !h-full !w-full !min-w-0 xl:!w-full xl:!min-w-0 !bg-none !bg-transparent !rounded-none !border-0 !shadow-none !backdrop-blur-none !ring-0", headerClassName: "!h-0 !min-h-0 !p-0 !m-0 !overflow-hidden", collapseButtonClassName: "!h-7 !w-7 !border-0 !bg-transparent !shadow-none hover:!bg-bg-muted/60", "aria-label": "LifeOps sections", collapsedRailItems: collapsible ? collapsedRailItems : undefined, children: _jsx(SidebarScrollRegion, { className: "px-1 pb-3 pt-0", children: _jsx(SidebarPanel, { className: "bg-transparent gap-0 p-0 shadow-none", children: _jsx("div", { className: "space-y-3", children: NAV_GROUPS.map((group, groupIndex) => (_jsx("div", { className: groupIndex > 0 ? "border-t border-border/10 pt-3" : "", children: _jsx("div", { className: "space-y-0.5 px-1", children: group.items.map((item) => {
+                                    const isActive = item.id === activeSection;
+                                    return (_jsx(TooltipHint, { content: item.label, side: "right", children: _jsxs("button", { type: "button", "aria-label": item.label, "aria-current": isActive ? "page" : undefined, onClick: () => onNavigate(item.id), "data-sidebar-item": true, className: [
+                                                "group flex w-full min-w-0 items-center gap-2.5 rounded-[var(--radius-sm)] px-2.5 py-1.5 text-left transition-colors",
+                                                isActive
+                                                    ? "bg-accent/15 text-txt"
+                                                    : "text-txt hover:bg-bg-muted/50",
+                                            ].join(" "), children: [_jsx("span", { className: [
+                                                        "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] transition-colors",
+                                                        isActive
+                                                            ? "bg-white/8 text-txt"
+                                                            : "bg-transparent text-muted/80 group-hover:text-txt",
+                                                    ].join(" "), children: item.icon }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs-tight font-medium", children: item.label }), _jsx("span", { "aria-hidden": true, className: `h-1.5 w-1.5 rounded-full ${item.dotColor} opacity-60` })] }) }, item.id));
+                                }) }) }, group.key))) }) }) }) }) }));
+}

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

@@ -0,0 +1,4 @@
+export declare function LifeOpsCapabilitiesPanel(): import("react/jsx-runtime").JSX.Element;
+export declare function LifeOpsSchedulePanel(): import("react/jsx-runtime").JSX.Element;
+export declare function LifeOpsXPanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LifeOpsOperationalPanels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsOperationalPanels.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsOperationalPanels.tsx"],"names":[],"mappings":"AA4IA,wBAAgB,wBAAwB,4CA6FvC;AAED,wBAAgB,oBAAoB,4CAoUnC;AAED,wBAAgB,aAAa,4CA0N5B"}

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

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Button, client, isCloudStatusAuthenticated, useApp, } from "@elizaos/app-core";
+import { Activity, Clock3, Loader2, Moon, RefreshCw, Sparkles, Sun, Unplug, } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useLifeOpsCapabilitiesStatus } from "../hooks/useLifeOpsCapabilitiesStatus.js";
+import { useLifeOpsScheduleState } from "../hooks/useLifeOpsScheduleState.js";
+import { useLifeOpsXConnector } from "../hooks/useLifeOpsXConnector.js";
+import { SleepInspectionPanel } from "./SleepInspectionPanel.js";
+function formatDateTime(value) {
+    if (!value) {
+        return "—";
+    }
+    const parsed = Date.parse(value);
+    if (!Number.isFinite(parsed)) {
+        return value;
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    }).format(new Date(parsed));
+}
+function formatPercent(value) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return "—";
+    }
+    return new Intl.NumberFormat(undefined, {
+        style: "percent",
+        maximumFractionDigits: 0,
+    }).format(value);
+}
+function formatMinutes(value) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return "—";
+    }
+    return `${value} min`;
+}
+function readXIdentity(identity, fallback) {
+    if (!identity) {
+        return fallback;
+    }
+    const keys = ["name", "username", "screen_name", "handle"];
+    for (const key of keys) {
+        const value = identity[key];
+        if (typeof value === "string" && value.trim().length > 0) {
+            return value.trim();
+        }
+    }
+    const identifier = identity.id;
+    return typeof identifier === "string" && identifier.trim().length > 0
+        ? identifier.trim()
+        : fallback;
+}
+function capabilityStateLabel(state) {
+    switch (state) {
+        case "working":
+            return "Working";
+        case "degraded":
+            return "Degraded";
+        case "blocked":
+            return "Blocked";
+        case "not_configured":
+            return "Not configured";
+    }
+}
+function PanelShell({ title, icon, status, children, }) {
+    return (_jsxs("section", { className: "space-y-3 rounded-3xl border border-border/16 bg-card/18 px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [icon, _jsx("div", { className: "truncate text-sm font-semibold text-txt", children: title })] }), status] }), children] }));
+}
+function StatusDot({ connected, label, }) {
+    return (_jsx("span", { "aria-label": label, className: `inline-block h-2.5 w-2.5 rounded-full ${connected
+            ? "bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]"
+            : "bg-muted/45"}`, role: "img", title: label }));
+}
+export function LifeOpsCapabilitiesPanel() {
+    const { t } = useApp();
+    const capabilities = useLifeOpsCapabilitiesStatus();
+    const status = capabilities.status;
+    const primary = status?.capabilities.find((item) => item.id === "sleep.relative_time") ??
+        status?.capabilities[0] ??
+        null;
+    return (_jsxs(PanelShell, { title: t("lifeopspanels.capabilities", {
+            defaultValue: "Capabilities",
+        }), icon: _jsx(Activity, { className: "h-4 w-4 shrink-0 text-muted" }), status: _jsx(Button, { size: "sm", variant: "outline", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => void capabilities.refresh(), disabled: capabilities.loading, children: capabilities.loading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5" })) }), children: [status ? (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.capabilityHealth", {
+                                    defaultValue: "Health",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: `${status.summary.workingCount}/${status.summary.totalCount} working` }), _jsxs("div", { className: "mt-1 text-xs text-muted", children: [status.summary.degradedCount, " degraded \u00B7", " ", status.summary.blockedCount, " blocked"] })] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.primaryCapability", {
+                                    defaultValue: "Awake clock",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: primary?.summary ?? "—" }), status.relativeTime ? (_jsxs("div", { className: "mt-1 text-xs text-muted", children: ["Computed ", formatDateTime(status.relativeTime.computedAt)] })) : null] })] })) : (_jsx("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2 text-sm font-semibold text-txt", children: capabilities.error ? (_jsx("span", { className: "text-danger", children: capabilities.error })) : (t("common.loading", { defaultValue: "Loading" })) })), status ? (_jsx("div", { className: "flex flex-wrap gap-2", children: status.capabilities.map((capability) => (_jsxs(Badge, { variant: capability.state === "working" ? "secondary" : "outline", className: "text-2xs", title: capability.summary, children: [capability.label, ": ", capabilityStateLabel(capability.state)] }, capability.id))) })) : null, capabilities.error && status ? (_jsx("div", { className: "text-xs text-danger", children: capabilities.error })) : null] }));
+}
+export function LifeOpsSchedulePanel() {
+    const { t } = useApp();
+    const schedule = useLifeOpsScheduleState({ scope: "effective" });
+    const [manualOverrideKind, setManualOverrideKind] = useState(null);
+    const [manualOverrideError, setManualOverrideError] = useState(null);
+    const merged = schedule.state;
+    const sleepLabel = merged
+        ? merged.sleepStatus === "sleeping_now"
+            ? t("lifeopspanels.sleepingNow", { defaultValue: "Sleeping now" })
+            : merged.sleepStatus === "slept"
+                ? t("lifeopspanels.slept", { defaultValue: "Slept" })
+                : merged.sleepStatus === "likely_missed"
+                    ? t("lifeopspanels.likelyMissed", {
+                        defaultValue: "Likely missed",
+                    })
+                    : t("lifeopspanels.unknown", { defaultValue: "Unknown" })
+        : t("common.loading", { defaultValue: "Loading" });
+    const relativeWakeLabel = merged?.relativeTime.minutesAwake !== null &&
+        merged?.relativeTime.minutesAwake !== undefined
+        ? t("lifeopspanels.relativePhase", {
+            defaultValue: "{{state}} · woke {{duration}} ago",
+            state: merged.relativeTime.circadianState,
+            duration: formatMinutes(merged.relativeTime.minutesAwake),
+        })
+        : merged
+            ? t("lifeopspanels.relativePhaseCalibrating", {
+                defaultValue: "{{state}} · {{confidence}}% confidence",
+                state: merged.relativeTime.circadianState,
+                confidence: Math.round(merged.relativeTime.stateConfidence * 100),
+            })
+            : "—";
+    const bedtimeRelativeLabel = merged?.relativeTime.minutesUntilBedtimeTarget !== null &&
+        merged?.relativeTime.minutesUntilBedtimeTarget !== undefined
+        ? t("lifeopspanels.bedtimeFuture", {
+            defaultValue: "in {{duration}}",
+            duration: formatMinutes(merged.relativeTime.minutesUntilBedtimeTarget),
+        })
+        : merged?.relativeTime.minutesSinceBedtimeTarget !== null &&
+            merged?.relativeTime.minutesSinceBedtimeTarget !== undefined
+            ? t("lifeopspanels.bedtimePast", {
+                defaultValue: "{{duration}} ago",
+                duration: formatMinutes(merged.relativeTime.minutesSinceBedtimeTarget),
+            })
+            : t("lifeopspanels.bedtimeRelativeCalibrating", {
+                defaultValue: "calibrating",
+            });
+    const captureManualOverride = useCallback(async (kind) => {
+        setManualOverrideKind(kind);
+        setManualOverrideError(null);
+        try {
+            await client.captureLifeOpsManualOverride({ kind });
+            await schedule.refresh();
+        }
+        catch (cause) {
+            setManualOverrideError(cause instanceof Error
+                ? cause.message
+                : t("lifeopspanels.manualOverrideFailed", {
+                    defaultValue: "Manual schedule update failed.",
+                }));
+        }
+        finally {
+            setManualOverrideKind(null);
+        }
+    }, [schedule.refresh, t]);
+    return (_jsxs(PanelShell, { title: t("lifeopspanels.schedule", { defaultValue: "Sleep & schedule" }), icon: _jsx(Clock3, { className: "h-4 w-4 shrink-0 text-muted" }), status: _jsx(Button, { size: "sm", variant: "outline", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => void schedule.refresh(), disabled: schedule.loading, children: schedule.loading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5" })) }), children: [merged ? (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.sleepStatus", {
+                                    defaultValue: "Sleep status",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: sleepLabel }), _jsx("div", { className: "mt-1 text-xs text-muted", children: `${merged.circadianState} · ${formatPercent(merged.sleepConfidence)} confidence${merged.uncertaintyReason ? ` · ${merged.uncertaintyReason}` : ""}` })] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.awakeProbability", {
+                                    defaultValue: "Awake probability",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: `${formatPercent(merged.awakeProbability.pAwake)} awake · ${formatPercent(merged.awakeProbability.pAsleep)} asleep` }), _jsx("div", { className: "mt-1 text-xs text-muted", children: `${formatPercent(merged.awakeProbability.pUnknown)} unknown · state ${merged.circadianState} (${formatPercent(merged.stateConfidence)})` })] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.relativeTime", {
+                                    defaultValue: "Relative time",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: relativeWakeLabel }), _jsx("div", { className: "mt-1 text-xs text-muted", children: merged.relativeTime.bedtimeTargetAt
+                                    ? t("lifeopspanels.bedtimeTarget", {
+                                        defaultValue: "Bedtime target {{time}} · {{duration}}",
+                                        time: formatDateTime(merged.relativeTime.bedtimeTargetAt),
+                                        duration: bedtimeRelativeLabel,
+                                    })
+                                    : t("lifeopspanels.bedtimeCalibrating", {
+                                        defaultValue: "Bedtime target calibrating",
+                                    }) })] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.sleepWindow", {
+                                    defaultValue: "Sleep window",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: merged.currentSleepStartedAt
+                                    ? `Started ${formatDateTime(merged.currentSleepStartedAt)}`
+                                    : merged.lastSleepStartedAt
+                                        ? `Last started ${formatDateTime(merged.lastSleepStartedAt)}`
+                                        : "—" }), merged.wakeAt || merged.lastSleepDurationMinutes ? (_jsxs("div", { className: "mt-1 text-xs text-muted", children: [merged.wakeAt
+                                        ? `Wake target ${formatDateTime(merged.wakeAt)}`
+                                        : null, merged.lastSleepDurationMinutes
+                                        ? ` ${Math.round(merged.lastSleepDurationMinutes)} min last sleep`
+                                        : null] })) : null] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.regularity", {
+                                    defaultValue: "Regularity",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: `${merged.regularity.regularityClass.replace(/_/g, " ")} · SRI ${Math.round(merged.regularity.sri)}` }), _jsx("div", { className: "mt-1 text-xs text-muted", children: `${Math.round(merged.regularity.bedtimeStddevMin)}m bedtime stddev · ${Math.round(merged.regularity.wakeStddevMin)}m wake stddev` })] }), merged.baseline ? (_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.baseline", {
+                                    defaultValue: "Personal baseline",
+                                }) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: `Wake ~${merged.baseline.medianWakeLocalHour.toFixed(1)}h · Bed ~${(merged.baseline.medianBedtimeLocalHour % 24).toFixed(1)}h` }), _jsx("div", { className: "mt-1 text-xs text-muted", children: `${merged.baseline.sampleCount} episodes · ${Math.round(merged.baseline.medianSleepDurationMin)}m median sleep · ${merged.baseline.windowDays}d window` })] })) : null, merged.awakeProbability.contributingSources.length > 0 ? (_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2 sm:col-span-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.contributingSources", {
+                                    defaultValue: "Contributing evidence",
+                                }) }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: merged.awakeProbability.contributingSources
+                                    .slice(0, 8)
+                                    .map((contributor) => {
+                                    const llr = contributor.logLikelihoodRatio;
+                                    const tone = llr > 0
+                                        ? "bg-emerald-500/14 text-emerald-300"
+                                        : "bg-amber-500/14 text-amber-300";
+                                    return (_jsx("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${tone}`, children: `${contributor.source}: ${llr >= 0 ? "+" : ""}${llr.toFixed(2)}` }, `${contributor.source}:${llr.toFixed(4)}`));
+                                }) })] })) : null, merged.circadianRuleFirings.length > 0 ? (_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2 sm:col-span-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.circadianRules", {
+                                    defaultValue: "Rules that fired",
+                                }) }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: merged.circadianRuleFirings.slice(0, 8).map((firing) => {
+                                    const tone = firing.contributes === "awake" ||
+                                        firing.contributes === "waking"
+                                        ? "bg-sky-500/14 text-sky-300"
+                                        : firing.contributes === "sleeping" ||
+                                            firing.contributes === "napping"
+                                            ? "bg-violet-500/14 text-violet-300"
+                                            : "bg-amber-500/14 text-amber-300";
+                                    return (_jsx("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${tone}`, title: firing.reason, children: `${firing.name} -> ${firing.contributes} (${firing.weight.toFixed(2)})` }, `${firing.name}:${firing.observedAt}`));
+                                }) })] })) : null] })) : (_jsx("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2 text-sm font-semibold text-txt", children: t("common.loading", { defaultValue: "Loading" }) })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => void captureManualOverride("just_woke_up"), disabled: manualOverrideKind !== null, children: [manualOverrideKind === "just_woke_up" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Sun, { className: "h-3.5 w-3.5" })), t("lifeopspanels.justWokeUp", { defaultValue: "Just woke up" })] }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => void captureManualOverride("going_to_bed"), disabled: manualOverrideKind !== null, children: [manualOverrideKind === "going_to_bed" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Moon, { className: "h-3.5 w-3.5" })), t("lifeopspanels.goingToBed", { defaultValue: "Going to bed" })] }), manualOverrideError ? (_jsx("span", { className: "self-center text-xs text-danger", children: manualOverrideError })) : null] }), merged ? _jsx(SleepInspectionPanel, {}) : null, _jsxs("div", { className: "flex flex-wrap gap-2 text-xs", children: [merged ? (_jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", className: "text-2xs", children: merged.scope }), _jsxs(Badge, { variant: "outline", className: "text-2xs", children: [merged.contributingDeviceKinds.length, " devices"] }), _jsxs(Badge, { variant: "outline", className: "text-2xs", children: [merged.observationCount, " observations"] }), _jsxs(Badge, { variant: "outline", className: "text-2xs", children: ["computed ", formatDateTime(merged.relativeTime.computedAt)] })] })) : null, schedule.error ? (_jsx("span", { className: "text-xs text-danger", children: schedule.error })) : null] })] }));
+}
+export function LifeOpsXPanel() {
+    const { elizaCloudConnected, elizaCloudLoginBusy, elizaCloudLoginError, elizaCloudStatusReason, handleCloudLogin, t, } = useApp();
+    const ownerX = useLifeOpsXConnector("owner");
+    const agentX = useLifeOpsXConnector("agent");
+    const status = ownerX.status;
+    const agentStatus = agentX.status;
+    const connected = status?.connected === true;
+    const agentConnected = agentStatus?.connected === true;
+    const ownerIdentity = readXIdentity(status?.identity ?? null, "");
+    const agentIdentity = readXIdentity(agentStatus?.identity ?? null, "");
+    const mode = status?.mode ?? status?.defaultMode ?? "cloud_managed";
+    const cloudAuthenticated = isCloudStatusAuthenticated(elizaCloudConnected, elizaCloudStatusReason);
+    const ownerNeedsCloudLogin = !cloudAuthenticated && status?.hasCredentials !== true;
+    const agentNeedsCloudLogin = !cloudAuthenticated;
+    const actionPending = ownerX.actionPending || agentX.actionPending || elizaCloudLoginBusy;
+    const handleOwnerConnect = useCallback(() => {
+        if (ownerNeedsCloudLogin) {
+            void handleCloudLogin();
+            return;
+        }
+        void ownerX.connect(mode);
+    }, [handleCloudLogin, mode, ownerNeedsCloudLogin, ownerX.connect]);
+    const handleAgentConnect = useCallback(() => {
+        if (agentNeedsCloudLogin) {
+            void handleCloudLogin();
+            return;
+        }
+        void agentX.connect("cloud_managed");
+    }, [agentNeedsCloudLogin, agentX.connect, handleCloudLogin]);
+    return (_jsxs(PanelShell, { title: t("lifeopspanels.xAccount", { defaultValue: "X" }), icon: _jsx(Sparkles, { className: "h-4 w-4 shrink-0 text-muted" }), status: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StatusDot, { connected: connected, label: connected
+                        ? t("lifeopspanels.connected", { defaultValue: "Connected" })
+                        : t("lifeopspanels.disconnected", {
+                            defaultValue: "Disconnected",
+                        }) }), _jsx(Button, { size: "sm", variant: "outline", className: "h-8 w-8 rounded-xl p-0", onClick: () => {
+                        void ownerX.refresh();
+                        void agentX.refresh();
+                    }, disabled: ownerX.loading || agentX.loading, title: t("common.refresh", { defaultValue: "Refresh" }), "aria-label": t("common.refresh", { defaultValue: "Refresh" }), children: ownerX.loading || agentX.loading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5" })) })] }), children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("lifeopspanels.owner", { defaultValue: "Owner" }) }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(StatusDot, { connected: connected, label: connected
+                                            ? t("lifeopspanels.connected", { defaultValue: "Connected" })
+                                            : t("lifeopspanels.disconnected", {
+                                                defaultValue: "Disconnected",
+                                            }) }), ownerIdentity ? (_jsx("div", { className: "min-w-0 truncate text-sm font-semibold text-txt", children: ownerIdentity })) : null] })] }), _jsxs("div", { className: "rounded-2xl border border-border/20 bg-bg/36 px-3 py-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted", children: t("chat.agentType", { defaultValue: "Agent" }) }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(StatusDot, { connected: agentConnected, label: agentConnected
+                                            ? t("lifeopspanels.connected", { defaultValue: "Connected" })
+                                            : t("lifeopspanels.disconnected", {
+                                                defaultValue: "Disconnected",
+                                            }) }), agentIdentity ? (_jsx("div", { className: "min-w-0 truncate text-sm font-semibold text-txt", children: agentIdentity })) : null] })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: handleOwnerConnect, disabled: actionPending, title: ownerNeedsCloudLogin
+                            ? t("lifeopspanels.connectCloudFirst", {
+                                defaultValue: "Connect Eliza Cloud first",
+                            })
+                            : connected
+                                ? t("lifeopspanels.reconnectOwnerX", {
+                                    defaultValue: "Reconnect Owner X",
+                                })
+                                : t("lifeopspanels.connectOwnerX", {
+                                    defaultValue: "Connect Owner X",
+                                }), children: [actionPending ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5" })), t("lifeopspanels.owner", { defaultValue: "Owner" })] }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: handleAgentConnect, disabled: actionPending, title: agentNeedsCloudLogin
+                            ? t("lifeopspanels.connectCloudFirst", {
+                                defaultValue: "Connect Eliza Cloud first",
+                            })
+                            : agentConnected
+                                ? t("lifeopspanels.reconnectAgentX", {
+                                    defaultValue: "Reconnect Agent X",
+                                })
+                                : t("lifeopspanels.connectAgentX", {
+                                    defaultValue: "Connect Agent X",
+                                }), children: [actionPending ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Sparkles, { className: "mr-1.5 h-3.5 w-3.5" })), t("chat.agentType", { defaultValue: "Agent" })] }), connected ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "h-8 rounded-xl px-3 text-xs font-semibold", onClick: () => void ownerX.disconnect(), disabled: actionPending, children: [_jsx(Unplug, { className: "mr-1.5 h-3.5 w-3.5" }), t("lifeopspanels.disconnectOwnerX", {
+                                defaultValue: "Disconnect Owner",
+                            })] })) : null] }), ownerX.pendingAuthUrl || agentX.pendingAuthUrl ? (_jsx("a", { href: ownerX.pendingAuthUrl ?? agentX.pendingAuthUrl ?? "", target: "_blank", rel: "noreferrer", className: "text-xs font-medium text-accent hover:underline", children: t("lifeopspanels.openXAuth", {
+                    defaultValue: "Open X authorization",
+                }) })) : null, ownerX.error || agentX.error || elizaCloudLoginError ? (_jsx("div", { className: "text-xs text-danger", children: ownerX.error ?? agentX.error ?? elizaCloudLoginError })) : null] }));
+}

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

@@ -0,0 +1,7 @@
+import type { LifeOpsSection } from "../hooks/useLifeOpsSection.js";
+interface LifeOpsOverviewSectionProps {
+    onNavigate: (section: LifeOpsSection) => void;
+}
+export declare function LifeOpsOverviewSection({ onNavigate, }: LifeOpsOverviewSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LifeOpsOverviewSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsOverviewSection.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsOverviewSection.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAWpE,UAAU,2BAA2B;IACnC,UAAU,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAimBD,wBAAgB,sBAAsB,CAAC,EACrC,UAAU,GACX,EAAE,2BAA2B,2CAk0B7B"}