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

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

@@ -0,0 +1,27 @@
+/**
+ * LifeOpsResizableSidebar - drag-to-resize wrapper for a sidebar panel.
+ *
+ * Renders children inside a width-controlled shell with a hit-targeted
+ * drag handle on the trailing edge. Width persists to localStorage under
+ * the supplied storage key and snaps to configurable bounds.
+ */
+import { type ReactNode } from "react";
+export interface LifeOpsResizableSidebarProps {
+    children: ReactNode;
+    /** localStorage key for persisting the width (in px). */
+    storageKey: string;
+    /** Default width in px when nothing is stored. */
+    defaultWidth: number;
+    /** Minimum width in px allowed by the drag. */
+    minWidth?: number;
+    /** Maximum width in px allowed by the drag. */
+    maxWidth?: number;
+    /** Which edge to drag from. Defaults to "right" (trailing edge). */
+    side?: "left" | "right";
+    /** Extra classes for the outer shell. */
+    className?: string;
+    /** data-testid applied to the outer shell. */
+    testId?: string;
+}
+export declare function LifeOpsResizableSidebar({ children, storageKey, defaultWidth, minWidth, maxWidth, side, className, testId, }: LifeOpsResizableSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LifeOpsResizableSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsResizableSidebar.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsResizableSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAGL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,QAAc,EACd,QAAc,EACd,IAAc,EACd,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,2CAiI9B"}

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LifeOpsResizableSidebar - drag-to-resize wrapper for a sidebar panel.
+ *
+ * Renders children inside a width-controlled shell with a hit-targeted
+ * drag handle on the trailing edge. Width persists to localStorage under
+ * the supplied storage key and snaps to configurable bounds.
+ */
+import { useCallback, useEffect, useRef, useState, } from "react";
+function readStoredWidth(key, fallback) {
+    if (typeof window === "undefined")
+        return fallback;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return fallback;
+        const n = Number.parseInt(raw, 10);
+        return Number.isFinite(n) && n > 0 ? n : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function writeStoredWidth(key, width) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(key, String(Math.round(width)));
+    }
+    catch {
+        /* ignore */
+    }
+}
+export function LifeOpsResizableSidebar({ children, storageKey, defaultWidth, minWidth = 220, maxWidth = 520, side = "right", className, testId, }) {
+    const [width, setWidth] = useState(() => readStoredWidth(storageKey, defaultWidth));
+    const startStateRef = useRef(null);
+    const handleMove = useCallback((event) => {
+        const state = startStateRef.current;
+        if (!state)
+            return;
+        const delta = event.clientX - state.startX;
+        const next = side === "right"
+            ? state.startWidth + delta
+            : state.startWidth - delta;
+        const clamped = Math.min(Math.max(next, minWidth), maxWidth);
+        setWidth(clamped);
+    }, [maxWidth, minWidth, side]);
+    const handleUp = useCallback((event) => {
+        const state = startStateRef.current;
+        startStateRef.current = null;
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        if (state) {
+            const delta = event.clientX - state.startX;
+            const final = side === "right"
+                ? state.startWidth + delta
+                : state.startWidth - delta;
+            writeStoredWidth(storageKey, Math.min(Math.max(final, minWidth), maxWidth));
+        }
+    }, [handleMove, maxWidth, minWidth, side, storageKey]);
+    const handleDown = useCallback((event) => {
+        event.preventDefault();
+        startStateRef.current = {
+            startX: event.clientX,
+            startWidth: width,
+        };
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+    }, [handleMove, handleUp, width]);
+    useEffect(() => {
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+        };
+    }, [handleMove, handleUp]);
+    const handleKey = useCallback((event) => {
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        event.preventDefault();
+        const step = event.shiftKey ? 32 : 8;
+        const direction = side === "right"
+            ? event.key === "ArrowRight"
+                ? 1
+                : -1
+            : event.key === "ArrowRight"
+                ? -1
+                : 1;
+        setWidth((current) => {
+            const next = Math.min(Math.max(current + direction * step, minWidth), maxWidth);
+            writeStoredWidth(storageKey, next);
+            return next;
+        });
+    }, [maxWidth, minWidth, side, storageKey]);
+    return (_jsxs("div", { "data-testid": testId, className: [
+            "relative flex h-full shrink-0",
+            side === "right" ? "flex-row" : "flex-row-reverse",
+            className ?? "",
+        ].join(" "), style: { width: `${width}px` }, children: [_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: children }), _jsxs("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", tabIndex: 0, onPointerDown: handleDown, onKeyDown: handleKey, className: [
+                    "group relative z-10 flex w-1 shrink-0 cursor-col-resize items-center justify-center",
+                    "hover:bg-accent/15 focus-visible:bg-accent/20 focus-visible:outline-none",
+                ].join(" "), children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 -left-1.5 right-auto w-4" }), _jsx("span", { "aria-hidden": true, className: "h-12 w-0.5 rounded-full bg-transparent transition-colors group-hover:bg-accent/50 group-focus-visible:bg-accent/60" })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsScreenTimeSection.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsScreenTimeSection.tsx"],"names":[],"mappings":"AAkPA,wBAAgB,wBAAwB,4CA8gBvC"}

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

@@ -0,0 +1,373 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core";
+import { AppWindow, ArrowDown, ArrowRight, ArrowUp, AtSign, CalendarRange, Eye, Globe2, Loader2, MessageSquareText, Monitor, PlaySquare, RefreshCw, Send, Share2, Smartphone, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BucketBars, DonutChart, formatDurationSeconds, HabitPanel, MetricTile, StackedBar, } from "./LifeOpsHabitVisuals.js";
+const RANGE_OPTIONS = [
+    { key: "today", label: "Today" },
+    { key: "this-week", label: "This Week" },
+    { key: "7d", label: "Last 7d" },
+    { key: "30d", label: "Last 30d" },
+];
+const CACHE_TTL_MS = 30_000;
+function startOfLocalDay(date) {
+    const start = new Date(date);
+    start.setHours(0, 0, 0, 0);
+    return start;
+}
+function addDays(date, days) {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+}
+function computeRange(range) {
+    const now = new Date();
+    const until = now.toISOString();
+    if (range === "today") {
+        return { since: startOfLocalDay(now).toISOString(), until };
+    }
+    if (range === "this-week") {
+        const startToday = startOfLocalDay(now);
+        const dayOfWeek = startToday.getDay(); // Sunday = 0
+        const since = addDays(startToday, -dayOfWeek);
+        return { since: since.toISOString(), until };
+    }
+    if (range === "7d") {
+        const since = addDays(startOfLocalDay(now), -6);
+        return { since: since.toISOString(), until };
+    }
+    const since = addDays(startOfLocalDay(now), -29);
+    return { since: since.toISOString(), until };
+}
+function computePriorRange(range) {
+    if (range === "today")
+        return null;
+    const current = computeRange(range);
+    const sinceMs = Date.parse(current.since);
+    const untilMs = Date.parse(current.until);
+    const span = untilMs - sinceMs;
+    return {
+        since: new Date(sinceMs - span).toISOString(),
+        until: current.since,
+    };
+}
+function enumerateDays(period) {
+    const days = [];
+    const start = startOfLocalDay(new Date(Date.parse(period.since)));
+    const endMs = Date.parse(period.until);
+    let cursor = start;
+    while (cursor.getTime() <= endMs) {
+        days.push(cursor);
+        cursor = addDays(cursor, 1);
+    }
+    return days;
+}
+function formatDayLabel(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        month: "numeric",
+        day: "numeric",
+    }).format(date);
+}
+function socialServiceSeconds(summary, key) {
+    return summary?.services.find((item) => item.key === key)?.totalSeconds ?? 0;
+}
+function sourceTone(state) {
+    switch (state) {
+        case "live":
+            return "bg-emerald-400";
+        case "partial":
+            return "bg-amber-300";
+        default:
+            return "bg-muted";
+    }
+}
+function deltaPercent(current, prior) {
+    if (prior <= 0) {
+        return current > 0 ? null : 0;
+    }
+    return Math.round(((current - prior) / prior) * 100);
+}
+function DeltaBadge({ percent }) {
+    if (percent === null) {
+        return (_jsxs("div", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted", children: [_jsx(ArrowRight, { className: "h-3 w-3", "aria-hidden": true }), "new"] }));
+    }
+    const Icon = percent > 0 ? ArrowUp : percent < 0 ? ArrowDown : ArrowRight;
+    const magnitude = Math.abs(percent);
+    return (_jsxs("div", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted", children: [_jsx(Icon, { className: "h-3 w-3", "aria-hidden": true }), magnitude, "% vs prior"] }));
+}
+function HistoryStrip({ days, }) {
+    const maxSeconds = days.reduce((max, day) => (day.totalSeconds > max ? day.totalSeconds : max), 0);
+    return (_jsx("div", { className: "flex items-end gap-1.5 overflow-x-auto py-2", children: days.map((day) => {
+            const ratio = maxSeconds > 0 ? day.totalSeconds / maxSeconds : 0;
+            const heightPct = Math.max(2, Math.round(ratio * 100));
+            return (_jsxs("div", { className: "flex min-w-[18px] flex-1 flex-col items-center gap-1", title: `${formatDayLabel(day.date)} - ${formatDurationSeconds(day.totalSeconds)}`, children: [_jsx("div", { className: "flex h-20 w-full items-end", children: _jsx("div", { className: "w-full rounded-sm bg-cyan-400/70", style: { height: `${heightPct}%` } }) }), _jsx("div", { className: "text-[10px] font-medium tabular-nums text-muted", children: formatDayLabel(day.date) })] }, day.date.toISOString()));
+        }) }));
+}
+async function fetchRangeData(period) {
+    const [breakdown, social] = await Promise.all([
+        client.getLifeOpsScreenTimeBreakdown({
+            since: period.since,
+            until: period.until,
+            topN: 16,
+        }),
+        client.getLifeOpsSocialHabitSummary({
+            since: period.since,
+            until: period.until,
+            topN: 12,
+        }),
+    ]);
+    return { breakdown, social };
+}
+async function fetchHistoryData(period) {
+    const days = enumerateDays(period);
+    const now = Date.now();
+    const results = await Promise.all(days.map(async (date) => {
+        const dayStart = startOfLocalDay(date);
+        const dayEnd = addDays(dayStart, 1);
+        const sinceIso = dayStart.toISOString();
+        const untilIso = new Date(Math.min(dayEnd.getTime(), now)).toISOString();
+        const breakdown = await client.getLifeOpsScreenTimeBreakdown({
+            since: sinceIso,
+            until: untilIso,
+            topN: 1,
+        });
+        return { date: dayStart, totalSeconds: breakdown.totalSeconds };
+    }));
+    return results;
+}
+export function LifeOpsScreenTimeSection() {
+    const [range, setRange] = useState("today");
+    const [data, setData] = useState(null);
+    const [priorData, setPriorData] = useState(null);
+    const [history, setHistory] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const dataCache = useRef(new Map());
+    const priorCache = useRef(new Map());
+    const historyCache = useRef(new Map());
+    const load = useCallback(async (key, force = false) => {
+        setLoading(true);
+        setError(null);
+        const now = Date.now();
+        const cached = dataCache.current.get(key);
+        const cachedPrior = priorCache.current.get(key);
+        const cachedHistory = historyCache.current.get(key);
+        const fresh = (entry) => entry !== undefined && now - entry.fetchedAt < CACHE_TTL_MS;
+        if (!force &&
+            fresh(cached) &&
+            (key === "today" || fresh(cachedPrior)) &&
+            (key === "today" || fresh(cachedHistory))) {
+            setData(cached.value);
+            setPriorData(cachedPrior?.value ?? null);
+            setHistory(cachedHistory?.value ?? null);
+            setLoading(false);
+            return;
+        }
+        try {
+            const period = computeRange(key);
+            const priorPeriod = computePriorRange(key);
+            const [rangeData, priorRangeData, historyData] = await Promise.all([
+                fetchRangeData(period),
+                priorPeriod ? fetchRangeData(priorPeriod) : Promise.resolve(null),
+                key === "today"
+                    ? Promise.resolve(null)
+                    : fetchHistoryData(period),
+            ]);
+            const stamp = Date.now();
+            dataCache.current.set(key, { value: rangeData, fetchedAt: stamp });
+            if (priorRangeData) {
+                priorCache.current.set(key, {
+                    value: priorRangeData,
+                    fetchedAt: stamp,
+                });
+            }
+            else {
+                priorCache.current.delete(key);
+            }
+            if (historyData) {
+                historyCache.current.set(key, {
+                    value: historyData,
+                    fetchedAt: stamp,
+                });
+            }
+            else {
+                historyCache.current.delete(key);
+            }
+            setData(rangeData);
+            setPriorData(priorRangeData);
+            setHistory(historyData);
+        }
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim().length > 0
+                ? cause.message.trim()
+                : "Screen time failed to load.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void load(range);
+    }, [load, range]);
+    const breakdown = data?.breakdown ?? null;
+    const social = data?.social ?? null;
+    const priorBreakdown = priorData?.breakdown ?? null;
+    const priorSocial = priorData?.social ?? null;
+    const totalSeconds = breakdown?.totalSeconds ?? 0;
+    const appSeconds = breakdown?.bySource.find((item) => item.key === "app")?.totalSeconds ?? 0;
+    const webSeconds = breakdown?.bySource.find((item) => item.key === "website")?.totalSeconds ??
+        0;
+    const phoneSeconds = breakdown?.byDevice.find((item) => item.key === "phone")?.totalSeconds ?? 0;
+    const categories = (breakdown?.byCategory ?? []).filter((item) => item.totalSeconds > 0);
+    const devices = (breakdown?.byDevice ?? []).filter((item) => item.totalSeconds > 0);
+    const browsers = (breakdown?.byBrowser ?? []).filter((item) => item.totalSeconds > 0);
+    const topTargets = breakdown?.items
+        .filter((item) => item.totalSeconds > 0)
+        .map((item) => ({
+        key: `${item.source}:${item.identifier}`,
+        label: item.displayName,
+        totalSeconds: item.totalSeconds,
+    })) ?? [];
+    const socialSeconds = social?.totalSeconds ?? 0;
+    const youtubeSeconds = socialServiceSeconds(social, "youtube");
+    const xSeconds = socialServiceSeconds(social, "x");
+    const services = (social?.services ?? []).filter((item) => item.totalSeconds > 0);
+    const surfaces = (social?.surfaces ?? []).filter((item) => item.totalSeconds > 0);
+    const sessionBuckets = social?.sessions
+        .filter((item) => item.totalSeconds > 0)
+        .map((item) => ({
+        key: `${item.source}:${item.identifier}`,
+        label: item.serviceLabel ?? item.displayName,
+        totalSeconds: item.totalSeconds,
+    })) ?? [];
+    const channels = (social?.messages.channels ?? []).filter((channel) => channel.opened > 0 || channel.outbound > 0 || channel.inbound > 0);
+    const messageOpened = social?.messages.opened ?? 0;
+    const messageOutbound = social?.messages.outbound ?? 0;
+    const messageInbound = social?.messages.inbound ?? 0;
+    const hasMessageActivity = messageOpened > 0 || messageOutbound > 0 || messageInbound > 0;
+    const hasUsage = totalSeconds > 0 ||
+        categories.length > 0 ||
+        devices.length > 0 ||
+        browsers.length > 0 ||
+        topTargets.length > 0 ||
+        socialSeconds > 0 ||
+        services.length > 0 ||
+        surfaces.length > 0 ||
+        sessionBuckets.length > 0 ||
+        hasMessageActivity;
+    const showDeltas = range !== "today" && priorData !== null;
+    const priorTotalSeconds = priorBreakdown?.totalSeconds ?? 0;
+    const priorAppSeconds = priorBreakdown?.bySource.find((item) => item.key === "app")
+        ?.totalSeconds ?? 0;
+    const priorWebSeconds = priorBreakdown?.bySource.find((item) => item.key === "website")
+        ?.totalSeconds ?? 0;
+    const priorPhoneSeconds = priorBreakdown?.byDevice.find((item) => item.key === "phone")
+        ?.totalSeconds ?? 0;
+    const priorSocialSeconds = priorSocial?.totalSeconds ?? 0;
+    const priorYoutubeSeconds = socialServiceSeconds(priorSocial, "youtube");
+    const priorXSeconds = socialServiceSeconds(priorSocial, "x");
+    const priorMessageOpened = priorSocial?.messages.opened ?? 0;
+    const totalLabel = useMemo(() => {
+        switch (range) {
+            case "today":
+                return "Today";
+            case "this-week":
+                return "This Week";
+            case "7d":
+                return "Last 7d";
+            case "30d":
+                return "Last 30d";
+        }
+    }, [range]);
+    const metricTiles = [
+        {
+            key: "total",
+            icon: _jsx(Monitor, {}),
+            value: formatDurationSeconds(totalSeconds),
+            label: totalLabel,
+            visible: totalSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(totalSeconds, priorTotalSeconds)
+                : undefined,
+        },
+        {
+            key: "apps",
+            icon: _jsx(AppWindow, {}),
+            value: formatDurationSeconds(appSeconds),
+            label: "Apps",
+            visible: appSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(appSeconds, priorAppSeconds)
+                : undefined,
+        },
+        {
+            key: "web",
+            icon: _jsx(Globe2, {}),
+            value: formatDurationSeconds(webSeconds),
+            label: "Web",
+            visible: webSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(webSeconds, priorWebSeconds)
+                : undefined,
+        },
+        {
+            key: "phone",
+            icon: _jsx(Smartphone, {}),
+            value: formatDurationSeconds(phoneSeconds),
+            label: "Phone",
+            visible: phoneSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(phoneSeconds, priorPhoneSeconds)
+                : undefined,
+        },
+        {
+            key: "social",
+            icon: _jsx(Share2, {}),
+            value: formatDurationSeconds(socialSeconds),
+            label: "Social",
+            visible: socialSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(socialSeconds, priorSocialSeconds)
+                : undefined,
+        },
+        {
+            key: "youtube",
+            icon: _jsx(PlaySquare, {}),
+            value: formatDurationSeconds(youtubeSeconds),
+            label: "YouTube",
+            visible: youtubeSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(youtubeSeconds, priorYoutubeSeconds)
+                : undefined,
+        },
+        {
+            key: "x",
+            icon: _jsx(AtSign, {}),
+            value: formatDurationSeconds(xSeconds),
+            label: "X",
+            visible: xSeconds > 0,
+            delta: showDeltas
+                ? deltaPercent(xSeconds, priorXSeconds)
+                : undefined,
+        },
+        {
+            key: "opened",
+            icon: _jsx(MessageSquareText, {}),
+            value: String(messageOpened),
+            label: "Opened",
+            visible: messageOpened > 0,
+            delta: showDeltas
+                ? deltaPercent(messageOpened, priorMessageOpened)
+                : undefined,
+        },
+    ].filter((item) => item.visible);
+    const showHistory = range !== "today" && history !== null && history.length > 0;
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "lifeops-screen-time-section", children: [_jsxs("header", { className: "flex 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: "Screen Time" }) }), _jsx("button", { type: "button", "aria-label": "Refresh screen time", 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: () => void load(range, true), disabled: loading, children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`, "aria-hidden": true }) })] }), _jsx("div", { className: "flex flex-wrap gap-2", role: "tablist", "aria-label": "Date range", children: RANGE_OPTIONS.map((option) => {
+                    const active = option.key === range;
+                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": active, onClick: () => setRange(option.key), className: `inline-flex h-8 items-center gap-1.5 rounded-lg border px-3 text-xs font-medium transition-colors ${active
+                            ? "border-accent/40 bg-accent/15 text-txt"
+                            : "border-border/20 bg-bg/30 text-muted hover:border-accent/30 hover:text-txt"}`, children: [option.key === range ? (_jsx(CalendarRange, { className: "h-3 w-3", "aria-hidden": true })) : null, option.label] }, option.key));
+                }) }), 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 && !breakdown && !social ? (_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 screen time..."] })) : null, !loading && !error && (breakdown || social) && !hasUsage ? (_jsx(HabitPanel, { title: "Screen Time", icon: _jsx(Monitor, {}), children: _jsx("div", { className: "py-3 text-sm text-muted", children: "No screen activity in this range." }) })) : (_jsxs(_Fragment, { children: [metricTiles.length > 0 ? (_jsx("div", { className: metricTiles.length === 1
+                            ? "grid gap-3"
+                            : "grid grid-cols-2 gap-3 xl:grid-cols-4", children: metricTiles.map((tile) => (_jsxs("div", { className: "min-w-0", children: [_jsx(MetricTile, { icon: tile.icon, value: tile.value, label: tile.label }), tile.delta !== undefined ? (_jsx("div", { className: "px-3", children: _jsx(DeltaBadge, { percent: tile.delta }) })) : null] }, tile.key))) })) : null, showHistory ? (_jsx(HabitPanel, { title: "Daily History", icon: _jsx(CalendarRange, {}), children: _jsx(HistoryStrip, { days: history }) })) : null, categories.length > 0 ? (_jsx(HabitPanel, { title: "Categories", icon: _jsx(Monitor, {}), className: "xl:col-span-2", children: _jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:items-center", children: [_jsx(DonutChart, { items: categories, totalSeconds: totalSeconds, label: totalLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(StackedBar, { items: categories, totalSeconds: totalSeconds }), _jsx("div", { className: "mt-4", children: _jsx(BucketBars, { items: categories, totalSeconds: totalSeconds }) })] })] }) })) : null, _jsxs("div", { className: "grid gap-4 xl:grid-cols-3", children: [devices.length > 0 ? (_jsx(HabitPanel, { title: "Devices", icon: _jsx(Smartphone, {}), children: _jsx(BucketBars, { items: devices, totalSeconds: totalSeconds }) })) : null, browsers.length > 0 ? (_jsx(HabitPanel, { title: "Browsers", icon: _jsx(Globe2, {}), children: _jsx(BucketBars, { items: browsers, totalSeconds: webSeconds }) })) : null, topTargets.length > 0 ? (_jsx(HabitPanel, { title: "Apps and Sites", icon: _jsx(AppWindow, {}), children: _jsx(BucketBars, { items: topTargets, totalSeconds: totalSeconds, limit: 8 }) })) : null] }), services.length > 0 ? (_jsx(HabitPanel, { title: "Social Platforms", icon: _jsx(Share2, {}), children: _jsxs("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-center", children: [_jsx(DonutChart, { items: services, totalSeconds: socialSeconds, label: "Social" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(StackedBar, { items: services, totalSeconds: socialSeconds }), _jsx("div", { className: "mt-4", children: _jsx(BucketBars, { items: services, totalSeconds: socialSeconds, emptyLabel: "No social time" }) })] })] }) })) : null, hasMessageActivity || channels.length > 0 ? (_jsxs(HabitPanel, { title: "Messages", icon: _jsx(MessageSquareText, {}), children: [_jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(MetricTile, { icon: _jsx(Eye, {}), value: String(messageOpened), label: "Opened" }), _jsx(MetricTile, { icon: _jsx(Send, {}), value: String(messageOutbound), label: "Sent" }), _jsx(MetricTile, { icon: _jsx(MessageSquareText, {}), value: String(messageInbound), label: "Received" })] }), _jsx("div", { className: "mt-3", children: channels.map((channel) => (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border/10 py-2 text-xs", children: [_jsx("span", { className: "font-medium text-txt/90", children: channel.label }), _jsxs("span", { className: "inline-flex items-center gap-2 tabular-nums text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Eye, { className: "h-3 w-3", "aria-hidden": true }), channel.opened] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Send, { className: "h-3 w-3", "aria-hidden": true }), channel.outbound] })] })] }, channel.channel))) })] })) : null, surfaces.length > 0 || sessionBuckets.length > 0 ? (_jsxs("div", { className: "grid gap-4 xl:grid-cols-2", children: [surfaces.length > 0 ? (_jsx(HabitPanel, { title: "Surfaces", icon: _jsx(Monitor, {}), children: _jsx(BucketBars, { items: surfaces, totalSeconds: socialSeconds }) })) : null, sessionBuckets.length > 0 ? (_jsx(HabitPanel, { title: "Sessions", icon: _jsx(Share2, {}), children: _jsx(BucketBars, { items: sessionBuckets, totalSeconds: socialSeconds, limit: 8 }) })) : null] })) : null] })), (social?.dataSources ?? []).length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: (social?.dataSources ?? []).map((source) => (_jsxs("span", { title: source.label, className: "inline-flex h-8 items-center gap-2 rounded-lg border border-border/12 bg-bg/24 px-2 text-xs font-medium text-muted", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${sourceTone(source.state)}` }), source.label] }, source.id))) })) : null] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { LifeOpsSection } from "../hooks/useLifeOpsSection.js";
+interface LifeOpsSectionContentProps {
+    section: LifeOpsSection;
+    navigate: (section: LifeOpsSection) => void;
+    setupContent: ReactNode;
+}
+export declare function LifeOpsSectionContent({ section, navigate, setupContent, }: LifeOpsSectionContentProps): ReactNode;
+export {};
+//# sourceMappingURL=LifeOpsSectionContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsSectionContent.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsSectionContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAapE,UAAU,0BAA0B;IAClC,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,SAAS,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,EACR,YAAY,GACb,EAAE,0BAA0B,GAAG,SAAS,CAiCxC"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LifeOpsCalendarSection } from "./LifeOpsCalendarSection.js";
+import { LIFEOPS_MAIL_CHANNELS, LIFEOPS_MESSAGE_CHANNELS, LifeOpsInboxSection, } from "./LifeOpsInboxSection.js";
+import { LifeOpsOverviewSection } from "./LifeOpsOverviewSection.js";
+import { LifeOpsMoneySection } from "./LifeOpsMoneySection.js";
+import { LifeOpsRemindersSection } from "./LifeOpsRemindersSection.js";
+import { LifeOpsScreenTimeSection } from "./LifeOpsScreenTimeSection.js";
+import { LifeOpsSleepSection } from "./LifeOpsSleepSection.js";
+export function LifeOpsSectionContent({ section, navigate, setupContent, }) {
+    switch (section) {
+        case "overview":
+            return _jsx(LifeOpsOverviewSection, { onNavigate: navigate });
+        case "sleep":
+            return _jsx(LifeOpsSleepSection, {});
+        case "screen-time":
+            return _jsx(LifeOpsScreenTimeSection, {});
+        case "calendar":
+            return _jsx(LifeOpsCalendarSection, {});
+        case "messages":
+            return (_jsx(LifeOpsInboxSection, { channels: LIFEOPS_MESSAGE_CHANNELS, title: "Messages", emptyLabel: "No messages." }));
+        case "mail":
+            return (_jsx(LifeOpsInboxSection, { channels: LIFEOPS_MAIL_CHANNELS, title: "Mail", emptyLabel: "No mail." }));
+        case "reminders":
+            return _jsx(LifeOpsRemindersSection, {});
+        case "money":
+            return _jsx(LifeOpsMoneySection, {});
+        case "setup":
+            return setupContent;
+    }
+}

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

@@ -0,0 +1,21 @@
+export interface LifeOpsSelection {
+    eventId: string | null;
+    messageId: string | null;
+    reminderId: string | null;
+}
+interface SelectArgs {
+    eventId?: string | null;
+    messageId?: string | null;
+    reminderId?: string | null;
+}
+interface LifeOpsSelectionContextValue {
+    selection: LifeOpsSelection;
+    select: (args: SelectArgs) => void;
+    clearSelection: () => void;
+}
+export declare function LifeOpsSelectionProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useLifeOpsSelection(): LifeOpsSelectionContextValue;
+export {};
+//# sourceMappingURL=LifeOpsSelectionContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsSelectionContext.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsSelectionContext.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,UAAU,4BAA4B;IACpC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAWD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAyBA;AAED,wBAAgB,mBAAmB,IAAI,4BAA4B,CAQlE"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+const EMPTY_SELECTION = {
+    eventId: null,
+    messageId: null,
+    reminderId: null,
+};
+const LifeOpsSelectionContext = createContext(null);
+export function LifeOpsSelectionProvider({ children, }) {
+    const [selection, setSelection] = useState(EMPTY_SELECTION);
+    const select = useCallback((args) => {
+        setSelection({
+            eventId: args.eventId ?? null,
+            messageId: args.messageId ?? null,
+            reminderId: args.reminderId ?? null,
+        });
+    }, []);
+    const clearSelection = useCallback(() => {
+        setSelection(EMPTY_SELECTION);
+    }, []);
+    const value = useMemo(() => ({ selection, select, clearSelection }), [selection, select, clearSelection]);
+    return (_jsx(LifeOpsSelectionContext.Provider, { value: value, children: children }));
+}
+export function useLifeOpsSelection() {
+    const ctx = useContext(LifeOpsSelectionContext);
+    if (!ctx) {
+        throw new Error("useLifeOpsSelection must be used inside LifeOpsSelectionProvider");
+    }
+    return ctx;
+}

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

@@ -0,0 +1,20 @@
+export type GithubSetupState = {
+    identity: string;
+    status: string;
+    connectLabel?: string;
+    connectDisabled?: boolean;
+    disconnectDisabled?: boolean;
+    onConnect?: () => void;
+    onDisconnect?: () => void;
+};
+export interface LifeOpsSettingsSectionProps {
+    ownerGithub?: GithubSetupState;
+    agentGithub?: GithubSetupState;
+    githubError?: string | null;
+    cloudAction?: {
+        label: string;
+        onClick: () => void;
+    } | null;
+}
+export declare function LifeOpsSettingsSection({ ownerGithub, agentGithub, cloudAction, }?: LifeOpsSettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LifeOpsSettingsSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeOpsSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../../apps/app-lifeops/src/components/LifeOpsSettingsSection.tsx"],"names":[],"mappings":"AA4CA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,GAAG,IAAI,CAAC;CACV;AAksCD,wBAAgB,sBAAsB,CAAC,EACrC,WAAkC,EAClC,WAAkC,EAClC,WAAkB,GACnB,GAAE,2BAAgC,2CAsFlC"}