@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/chat/widgets/agent-orchestrator.js

@@ -19,12 +19,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Activity, AlertTriangle, BellRing, Check, CheckCheck, Eye, EyeOff, HeartPulse, MessageSquare, OctagonAlert, Play, Square, SquareArrowOutUpRight, SquarePause, Trash2, Workflow, Wrench, Zap, } from "lucide-react";
 import { startTransition, useCallback, useEffect, useMemo, useState, } from "react";
 import { client } from "../../../api/index.js";
-import { useApp } from "../../../state/index.js";
+import { useIntervalWhenDocumentVisible } from "../../../hooks/useDocumentVisibility.js";
+import { useAppSelectorShallow } from "../../../state/index.js";
 import { AppHero } from "../../apps/app-identity.js";
 import { loadMergedCatalogApps } from "../../apps/catalog-loader.js";
 import { getRunAttentionReasons } from "../../apps/run-attention.js";
 import { Button } from "../../ui/button.js";
 import { fallbackTranslate, OrchestratorAccountsView, } from "./agent-orchestrator-accounts-view.js";
+import { HomeWidgetCard, useWidgetNavigation } from "./home-widget-card.js";
 import { EmptyWidgetState, WidgetSection } from "./shared.js";
 function relativeTime(ts, t) {
     const delta = Math.max(0, Math.floor((Date.now() - ts) / 1000));
@@ -170,7 +172,7 @@ function ActivityItemsContent({ events, t, onSelectEvent, }) {
                     defaultValue: "Open session",
                 })
                 : t("agentorchestrator.openTasks", { defaultValue: "Open tasks" });
-            return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), "aria-label": `${openLabel}: ${event.summary}`, className: "flex w-full items-start gap-1.5 rounded-sm px-1.5 py-1 text-left transition-colors hover:bg-bg-hover/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-3xs font-medium tabular-nums text-muted", children: relativeDuration(event.timestamp) }), _jsxs("span", { className: `inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm ${eventTypeMeta.toneClass}`, role: "img", title: eventLabel, children: [_jsx(EventIcon, { className: "h-2.5 w-2.5" }), _jsx("span", { className: "sr-only", children: eventLabel })] }), _jsx("span", { className: "min-w-0 flex-1 break-words pt-0.5 text-2xs leading-4 text-txt", children: event.summary })] }, event.id));
+            return (_jsxs("button", { type: "button", onClick: () => onSelectEvent(event), "aria-label": `${openLabel}: ${event.summary}`, className: "flex w-full items-start gap-1.5 rounded-sm px-1.5 py-1 text-left transition-colors hover:bg-bg-hover/40   ", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-3xs font-medium tabular-nums text-muted", children: relativeDuration(event.timestamp) }), _jsxs("span", { className: `inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm ${eventTypeMeta.toneClass}`, role: "img", title: eventLabel, children: [_jsx(EventIcon, { className: "h-2.5 w-2.5" }), _jsx("span", { className: "sr-only", children: eventLabel })] }), _jsx("span", { className: "min-w-0 flex-1 break-words pt-0.5 text-2xs leading-4 text-txt", children: event.summary })] }, event.id));
         }) }));
 }
 function getClientErrorMessage(error, fallback) {
@@ -203,11 +205,15 @@ function AppRunCard({ run, attentionReasons, app, t, }) {
                                     }) }), _jsx("span", { className: "truncate", children: attentionReasons[0] })] })) : null] })] }) }));
 }
 function AppRunsWidget(_props) {
-    const app = useApp();
-    const appRuns = app?.appRuns;
-    const setTab = app?.setTab ?? (() => undefined);
-    const setState = app?.setState ?? (() => undefined);
-    const t = app?.t ?? fallbackTranslate;
+    const { appRuns, setTab: appSetTab, setState: appSetState, t: appT, } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        setTab: s.setTab,
+        setState: s.setState,
+        t: s.t,
+    }));
+    const setTab = appSetTab ?? (() => undefined);
+    const setState = appSetState ?? (() => undefined);
+    const t = appT ?? fallbackTranslate;
     const [catalogApps, setCatalogApps] = useState([]);
     const [runs, setRuns] = useState(() => Array.isArray(appRuns) ? appRuns : []);
     const [loading, setLoading] = useState(true);
@@ -237,6 +243,10 @@ function AppRunsWidget(_props) {
     }, []);
     useEffect(() => {
         let cancelled = false;
+        // The 5s poll pushes appRuns into the global AppContext, which re-renders
+        // every useApp() consumer. Only push when the run set actually changed so a
+        // steady poll doesn't bust the whole app every 5 seconds.
+        let lastAppRunsKey = "";
         const refreshRuns = async () => {
             try {
                 const nextRuns = await client.listAppRuns();
@@ -244,9 +254,13 @@ function AppRunsWidget(_props) {
                 if (cancelled)
                     return;
                 setError(null);
+                const nextKey = JSON.stringify(nextRunsSafe);
+                const changed = nextKey !== lastAppRunsKey;
+                lastAppRunsKey = nextKey;
                 startTransition(() => {
                     setRuns(nextRunsSafe);
-                    setState("appRuns", nextRunsSafe);
+                    if (changed)
+                        setState("appRuns", nextRunsSafe);
                 });
             }
             catch (refreshError) {
@@ -302,11 +316,14 @@ function AppRunsWidget(_props) {
                                     return (_jsx(AppRunCard, { run: run, attentionReasons: reasons, app: getAppRunIdentity(run, catalogAppsByName), t: t }, run.runId));
                                 }) })] })) : null, _jsx("div", { className: "flex flex-col gap-2", children: runs.slice(0, 4).map((run) => (_jsx(AppRunCard, { run: run, attentionReasons: attentionMap.get(run.runId) ?? [], app: getAppRunIdentity(run, catalogAppsByName), t: t }, run.runId))) })] }))] }));
 }
-function OrchestratorActivityWidget({ events, clearEvents, }) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
-    const setState = app?.setState;
-    const setTab = app?.setTab;
+function OrchestratorActivityWidget({ events, clearEvents, slot, }) {
+    const { t: appT, setState, setTab, } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        setState: s.setState,
+        setTab: s.setTab,
+    }));
+    const t = appT ?? fallbackTranslate;
+    const nav = useWidgetNavigation();
     // A click navigates to the activity's origin: a sessionId routes into the
     // terminal channel (mirrors ChatView.focusTerminalSession — clear the inbox
     // selection, then focus the PTY session); everything else opens the Tasks
@@ -322,6 +339,13 @@ function OrchestratorActivityWidget({ events, clearEvents, }) {
     if (events.length === 0) {
         return null;
     }
+    // Home slot: a single compact, icon-first, whole-card-clickable tile — the
+    // latest activity event's summary as the one datum, event count as the badge.
+    // Tapping opens the Tasks tab. The sidebar keeps the full activity list.
+    if (slot === "home") {
+        const latest = events[0];
+        return (_jsx(HomeWidgetCard, { icon: _jsx(Activity, {}), label: t("taskseventspanel.Activity", { defaultValue: "Activity" }), value: latest.summary, meta: relativeDuration(latest.timestamp), badge: events.length > 1 ? events.length : undefined, testId: "chat-widget-events", ariaLabel: `Activity: ${events.length} events, latest ${latest.summary}. Open tasks.`, onActivate: () => nav.openTab("tasks") }));
+    }
     return (_jsx(WidgetSection, { title: t("taskseventspanel.Activity", { defaultValue: "Activity" }), icon: _jsx(Activity, { className: "h-4 w-4" }), action: _jsx(Button, { variant: "ghost", size: "sm", onClick: clearEvents, "aria-label": t("agentorchestrator.clearActivity", {
                 defaultValue: "Clear activity",
             }), className: "h-6 w-6 p-0 text-muted", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), testId: "chat-widget-events", children: _jsx(ActivityItemsContent, { events: events, t: t, onSelectEvent: onSelectEvent }) }));
@@ -333,38 +357,35 @@ function OrchestratorActivityWidget({ events, clearEvents, }) {
  * to connect more.
  */
 function OrchestratorAccountsWidget(_props) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
-    const setTab = app?.setTab;
+    const { t: appT, setTab } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        setTab: s.setTab,
+    }));
+    const t = appT ?? fallbackTranslate;
     const [accounts, setAccounts] = useState(null);
     const [overview, setOverview] = useState(null);
     const [rooms, setRooms] = useState(null);
     const [loading, setLoading] = useState(true);
+    const refresh = useCallback(async () => {
+        const [acctRes, ovRes, roomsRes] = await Promise.allSettled([
+            client.listAccounts(),
+            client.getOrchestratorAccounts(),
+            client.getOrchestratorRooms(),
+        ]);
+        if (acctRes.status === "fulfilled")
+            setAccounts(acctRes.value);
+        if (ovRes.status === "fulfilled")
+            setOverview(ovRes.value);
+        if (roomsRes.status === "fulfilled")
+            setRooms(roomsRes.value);
+        setLoading(false);
+    }, []);
     useEffect(() => {
-        let cancelled = false;
-        const refresh = async () => {
-            const [acctRes, ovRes, roomsRes] = await Promise.allSettled([
-                client.listAccounts(),
-                client.getOrchestratorAccounts(),
-                client.getOrchestratorRooms(),
-            ]);
-            if (cancelled)
-                return;
-            if (acctRes.status === "fulfilled")
-                setAccounts(acctRes.value);
-            if (ovRes.status === "fulfilled")
-                setOverview(ovRes.value);
-            if (roomsRes.status === "fulfilled")
-                setRooms(roomsRes.value);
-            setLoading(false);
-        };
         void refresh();
-        const timer = setInterval(() => void refresh(), 15_000);
-        return () => {
-            cancelled = true;
-            clearInterval(timer);
-        };
-    }, []);
+    }, [refresh]);
+    // The widget fires three parallel calls per tick — gate the recurring poll on
+    // document visibility so a backgrounded window stops hitting the API.
+    useIntervalWhenDocumentVisible(() => void refresh(), 15_000);
     if (loading)
         return null;
     return (_jsx(OrchestratorAccountsView, { accounts: accounts, overview: overview, rooms: rooms, t: t, onConnect: () => setTab?.("settings") }));

package/components/chat/widgets/browser-launch-widget.d.ts

@@ -0,0 +1,19 @@
+/**
+ * BrowserLaunchWidget — in-chat lifecycle card for an agent-driven browser
+ * session: idle (offer to launch) → launching → awaiting (user action in the
+ * browser) → done (with an optional screenshot). Presentational only: the
+ * caller owns `status` and wires `onLaunch` / `onCancel`. It reuses the same
+ * status-dot + globe vocabulary as {@link BrowserStatusSidebarWidget}.
+ */
+export type BrowserLaunchStatus = "idle" | "launching" | "awaiting" | "done";
+export type BrowserLaunchWidgetProps = {
+    status: BrowserLaunchStatus;
+    url?: string;
+    title?: string;
+    screenshotUrl?: string;
+    message?: string;
+    onLaunch?: () => void;
+    onCancel?: () => void;
+};
+export declare function BrowserLaunchWidget({ status, url, title, screenshotUrl, message, onLaunch, onCancel, }: BrowserLaunchWidgetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=browser-launch-widget.d.ts.map

package/components/chat/widgets/browser-launch-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-launch-widget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/browser-launch-widget.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA4BF,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,GAAG,EACH,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,wBAAwB,2CAiF1B"}

package/components/chat/widgets/browser-launch-widget.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BrowserLaunchWidget — in-chat lifecycle card for an agent-driven browser
+ * session: idle (offer to launch) → launching → awaiting (user action in the
+ * browser) → done (with an optional screenshot). Presentational only: the
+ * caller owns `status` and wires `onLaunch` / `onCancel`. It reuses the same
+ * status-dot + globe vocabulary as {@link BrowserStatusSidebarWidget}.
+ */
+import { Globe, Loader2 } from "lucide-react";
+import { Button } from "../../ui/button.js";
+function statusStyle(status) {
+    switch (status) {
+        case "launching":
+            return { label: "Launching", dotClass: "bg-accent" };
+        case "awaiting":
+            return { label: "Awaiting you", dotClass: "bg-accent" };
+        case "done":
+            return { label: "Done", dotClass: "bg-muted/50" };
+        default:
+            return { label: "Ready", dotClass: "bg-muted/50" };
+    }
+}
+function hostnameOf(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, "") || url;
+    }
+    catch {
+        return url;
+    }
+}
+export function BrowserLaunchWidget({ status, url, title, screenshotUrl, message, onLaunch, onCancel, }) {
+    const style = statusStyle(status);
+    const target = title?.trim() || (url ? hostnameOf(url) : undefined);
+    const inFlight = status === "launching" || status === "awaiting";
+    return (_jsxs("div", { "data-testid": "browser-launch", "data-browser-status": status, className: "my-2 border border-border bg-card p-3 text-sm space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Globe, { className: "h-4 w-4 shrink-0 text-muted", "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: target ?? "Browser session" }), _jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5", children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${style.dotClass}`, "aria-hidden": true }), _jsx("span", { "data-testid": "browser-launch-status", className: "text-3xs uppercase tracking-wider text-muted", children: style.label })] })] }), url ? (_jsx("div", { className: "truncate text-xs text-muted", title: url, children: url })) : null, message ? _jsx("div", { className: "text-xs text-muted", children: message }) : null, status === "done" && screenshotUrl ? (_jsx("img", { src: screenshotUrl, alt: target ? `Screenshot of ${target}` : "Browser screenshot", "data-testid": "browser-launch-screenshot", className: "max-h-48 w-full border border-border object-cover" })) : null, status === "idle" ? (_jsxs(Button, { type: "button", size: "sm", "data-testid": "browser-launch-start", onClick: () => onLaunch?.(), children: [_jsx(Globe, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Launch browser"] })) : null, inFlight ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), status === "launching"
+                                ? "Starting the browser…"
+                                : "Waiting for you to finish in the browser…"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "data-testid": "browser-launch-cancel", className: "h-7 px-3 text-xs", onClick: () => onCancel?.(), children: "Cancel" })] })) : null] }));
+}

package/components/chat/widgets/browser-status.d.ts

@@ -8,6 +8,6 @@
  *
  * Title-click opens /browser. Tab-click focuses that tab via the backend.
  */
-import type { ChatSidebarWidgetProps } from "./types";
+import type { ChatSidebarWidgetProps } from "./types.js";
 export declare function BrowserStatusSidebarWidget(_props: ChatSidebarWidgetProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=browser-status.d.ts.map

package/components/chat/widgets/browser-status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser-status.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/browser-status.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAWH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAsCtD,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,sBAAsB,kDA4FxE"}
+{"version":3,"file":"browser-status.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/browser-status.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAYH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAsCtD,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,sBAAsB,kDAmFxE"}

package/components/chat/widgets/browser-status.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { ChatSidebarWidgetDefinition } from "./types";
+import type { ChatSidebarWidgetDefinition } from "./types.js";
 export declare const BROWSER_STATUS_WIDGET: ChatSidebarWidgetDefinition;
 //# sourceMappingURL=browser-status.helpers.d.ts.map

package/components/chat/widgets/browser-status.js

@@ -10,9 +10,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Title-click opens /browser. Tab-click focuses that tab via the backend.
  */
 import { Globe } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { client, } from "../../../api/index.js";
-import { useApp } from "../../../state/index.js";
+import { useIntervalWhenDocumentVisible } from "../../../hooks/index.js";
+import { useAppSelector } from "../../../state/index.js";
 import { WidgetSection } from "./shared.js";
 const POLL_INTERVAL_MS = 4_000;
 const MAX_TAB_ROWS = 8;
@@ -45,34 +46,23 @@ function tabStatus(tab) {
     };
 }
 export function BrowserStatusSidebarWidget(_props) {
-    const { setTab } = useApp();
+    const setTab = useAppSelector((s) => s.setTab);
     const [snapshot, setSnapshot] = useState(null);
-    useEffect(() => {
-        let cancelled = false;
-        let timer = null;
-        async function poll() {
-            try {
-                const next = await client.getBrowserWorkspace();
-                if (cancelled)
-                    return;
-                setSnapshot(next);
-            }
-            catch {
-                // Transient errors — keep the last snapshot.
-            }
-            finally {
-                if (!cancelled) {
-                    timer = setTimeout(poll, POLL_INTERVAL_MS);
-                }
-            }
+    const poll = useCallback(async () => {
+        try {
+            const next = await client.getBrowserWorkspace();
+            setSnapshot(next);
+        }
+        catch {
+            // Transient errors — keep the last snapshot.
         }
-        void poll();
-        return () => {
-            cancelled = true;
-            if (timer !== null)
-                clearTimeout(timer);
-        };
     }, []);
+    useEffect(() => {
+        void poll();
+    }, [poll]);
+    // Poll only while the document is visible — don't drain battery/network
+    // re-fetching the workspace every 4s in a backgrounded app/tab.
+    useIntervalWhenDocumentVisible(() => void poll(), POLL_INTERVAL_MS);
     const tabs = snapshot?.tabs ?? [];
     if (tabs.length === 0) {
         // Hide the widget entirely until the user has open tabs — the sidebar

package/components/chat/widgets/calendar-upcoming.d.ts

@@ -0,0 +1,17 @@
+import type { WidgetProps } from "../../../widgets/types.js";
+/**
+ * CALENDAR "Next" home widget (#9143). Glanceable, icon-first: the SINGLE next
+ * upcoming event — its title (value), a compact relative time (meta), and a
+ * count of further upcoming events (badge). Fetches the same
+ * `/api/lifeops/calendar/feed` route CalendarView reads, polling quietly while
+ * the document is visible. Tapping the card opens the Calendar view.
+ */
+export declare function CalendarUpcomingWidget({ slot }: Partial<WidgetProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare const CALENDAR_HOME_WIDGET: {
+    readonly pluginId: "calendar";
+    readonly id: "calendar.upcoming";
+    readonly order: 110;
+    readonly signalKinds: readonly ["reminder"];
+    readonly Component: typeof CalendarUpcomingWidget;
+};
+//# sourceMappingURL=calendar-upcoming.d.ts.map

package/components/chat/widgets/calendar-upcoming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-upcoming.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/calendar-upcoming.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AA+F1D;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,WAAW,CAAC,kDAiFpE;AAED,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAC"}

package/components/chat/widgets/calendar-upcoming.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarClock } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../../api/index.js";
+import { useIntervalWhenDocumentVisible } from "../../../hooks/index.js";
+import { usePublishHomeAttention } from "../../../widgets/home-attention-store.js";
+import { HOME_SIGNAL_WEIGHTS } from "../../../widgets/home-priority.js";
+import { HomeWidgetCard, useWidgetNavigation } from "./home-widget-card.js";
+const CALENDAR_WIDGET_KEY = "calendar/calendar.upcoming";
+// The CalendarView/useCalendarWeek refetches on window change rather than
+// polling; the home glanceable widget refreshes on a calm 60s cadence — the
+// feed is far less volatile than the todo list (15s).
+const CALENDAR_REFRESH_INTERVAL_MS = 60_000;
+// "Urgent" self-signal threshold: an event starting within the next 2 hours.
+const URGENT_WINDOW_MS = 2 * 60 * 60_000;
+// How far ahead the home widget looks for upcoming events.
+const LOOKAHEAD_MS = 14 * 24 * 60 * 60_000;
+function isCalendarFeedEvent(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const event = value;
+    return (typeof event.id === "string" &&
+        typeof event.title === "string" &&
+        typeof event.startAt === "string" &&
+        typeof event.endAt === "string" &&
+        typeof event.isAllDay === "boolean" &&
+        typeof event.location === "string");
+}
+function parseCalendarFeed(value) {
+    if (typeof value !== "object" || value === null)
+        return [];
+    const events = value.events;
+    if (!Array.isArray(events))
+        return [];
+    return events.filter(isCalendarFeedEvent);
+}
+/** Upcoming events (start >= now), soonest first. */
+function upcomingEvents(events, now) {
+    return events
+        .filter((event) => {
+        const startMs = Date.parse(event.startAt);
+        return Number.isFinite(startMs) && startMs >= now;
+    })
+        .sort((a, b) => a.startAt.localeCompare(b.startAt));
+}
+/** Compact relative time, e.g. "now", "in 25m", "in 3h", "tomorrow", "in 2d". */
+function relativeTime(startAt, now) {
+    const deltaMs = Date.parse(startAt) - now;
+    if (!Number.isFinite(deltaMs))
+        return "";
+    const minutes = Math.round(deltaMs / 60_000);
+    if (minutes <= 0)
+        return "now";
+    if (minutes < 60)
+        return `in ${minutes}m`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `in ${hours}h`;
+    const days = Math.round(hours / 24);
+    if (days === 1)
+        return "tomorrow";
+    return `in ${days}d`;
+}
+/** Shallow content equality so an unchanged 60s poll doesn't re-render. */
+function eventsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((event, i) => {
+        const other = b[i];
+        return (event.id === other.id &&
+            event.title === other.title &&
+            event.startAt === other.startAt &&
+            event.isAllDay === other.isAllDay);
+    });
+}
+/**
+ * CALENDAR "Next" home widget (#9143). Glanceable, icon-first: the SINGLE next
+ * upcoming event — its title (value), a compact relative time (meta), and a
+ * count of further upcoming events (badge). Fetches the same
+ * `/api/lifeops/calendar/feed` route CalendarView reads, polling quietly while
+ * the document is visible. Tapping the card opens the Calendar view.
+ */
+export function CalendarUpcomingWidget({ slot }) {
+    const [events, setEvents] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+    const nav = useWidgetNavigation();
+    const loadEvents = useCallback(async () => {
+        const now = new Date();
+        const timeMin = now.toISOString();
+        const timeMax = new Date(now.getTime() + LOOKAHEAD_MS).toISOString();
+        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const params = new URLSearchParams({
+            side: "owner",
+            timeMin,
+            timeMax,
+            timeZone,
+        });
+        try {
+            const res = await fetch(`${client.getBaseUrl()}/api/lifeops/calendar/feed?${params.toString()}`);
+            if (!res.ok)
+                return;
+            const json = await res.json();
+            const next = parseCalendarFeed(json);
+            // Skip the state update (and the re-render) when the poll is unchanged.
+            setEvents((prev) => (eventsEqual(prev, next) ? prev : next));
+        }
+        catch {
+            // Fall back silently to the last-known events (like todo.tsx); a transient
+            // network failure must not blank an already-populated home card.
+        }
+        finally {
+            setLoaded(true);
+        }
+    }, []);
+    useEffect(() => {
+        void loadEvents();
+    }, [loadEvents]);
+    useIntervalWhenDocumentVisible(() => void loadEvents(), CALENDAR_REFRESH_INTERVAL_MS);
+    const now = Date.now();
+    const visible = useMemo(() => upcomingEvents(events, now), [events, now]);
+    const onHome = slot === "home";
+    const next = visible[0];
+    // Urgent when the next timed event starts within the next 2 hours.
+    const urgent = next != null &&
+        !next.isAllDay &&
+        Number.isFinite(Date.parse(next.startAt)) &&
+        Date.parse(next.startAt) - now >= 0 &&
+        Date.parse(next.startAt) - now <= URGENT_WINDOW_MS;
+    // Float the home card up while an event is imminent; clear otherwise.
+    usePublishHomeAttention(CALENDAR_WIDGET_KEY, onHome && urgent ? HOME_SIGNAL_WEIGHTS.reminder : null);
+    // Render nothing until the first load settles (no cached data), and render
+    // nothing when there are no upcoming events — the home surface must not show
+    // empty placeholders (#9143).
+    if (!loaded && events.length === 0)
+        return null;
+    if (next == null)
+        return null;
+    const title = next.title.trim().length > 0 ? next.title : "(untitled)";
+    const when = next.isAllDay ? "all day" : relativeTime(next.startAt, now);
+    const more = visible.length - 1;
+    return (_jsx(HomeWidgetCard, { icon: _jsx(CalendarClock, {}), label: "Next", value: title, meta: when, badge: more > 0 ? `+${more}` : undefined, tone: urgent ? "warn" : "default", testId: "chat-widget-calendar-upcoming", ariaLabel: `Next event: ${title} ${when}${more > 0 ? ` (+${more} more upcoming)` : ""}. Open Calendar.`, onActivate: () => nav.openView("/calendar", "calendar") }));
+}
+export const CALENDAR_HOME_WIDGET = {
+    pluginId: "calendar",
+    id: "calendar.upcoming",
+    order: 110,
+    signalKinds: ["reminder"],
+    Component: CalendarUpcomingWidget,
+};

package/components/chat/widgets/credential-request-widget.d.ts

@@ -0,0 +1,40 @@
+/**
+ * CredentialRequestWidget — presentational in-chat card for the three ways the
+ * agent asks for a credential: link out to an OAuth consent page, paste a
+ * secret, or upload an image (a 2FA QR / seed photo). It mirrors the visual
+ * chrome of the real secret form ({@link SensitiveRequestBlock}) so the two
+ * read as one family, but it is intentionally computation- and transport-free:
+ * the host wires the actual save/authorize via the `onAction` callbacks. It is
+ * a thin display layer over a discriminated `variant`, never a second secret
+ * pipeline.
+ */
+export type OAuthLinkVariant = {
+    kind: "oauth-link";
+    provider: string;
+    authorizeUrl: string;
+    status?: "idle" | "connecting" | "connected";
+};
+export type PasteSecretVariant = {
+    kind: "paste-secret";
+    label: string;
+    placeholder?: string;
+    helpText?: string;
+};
+export type ImageUploadVariant = {
+    kind: "image-upload";
+    label: string;
+    accept?: string;
+    previewUrl?: string;
+};
+export type CredentialRequestVariant = OAuthLinkVariant | PasteSecretVariant | ImageUploadVariant;
+export type CredentialRequestWidgetProps = {
+    variant: CredentialRequestVariant;
+    /** Begin the OAuth flow (host opens `authorizeUrl` in a popup). */
+    onAuthorize?: (authorizeUrl: string) => void;
+    /** Submit the pasted secret value. */
+    onSubmitSecret?: (value: string) => void;
+    /** Submit the selected image file. */
+    onSubmitImage?: (file: File) => void;
+};
+export declare function CredentialRequestWidget({ variant, onAuthorize, onSubmitSecret, onSubmitImage, }: CredentialRequestWidgetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=credential-request-widget.d.ts.map

package/components/chat/widgets/credential-request-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-request-widget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/credential-request-widget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAChC,gBAAgB,GAChB,kBAAkB,GAClB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,wBAAwB,CAAC;IAClC,mEAAmE;IACnE,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC,CAAC;AAiIF,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,WAAW,EACX,cAAc,EACd,aAAa,GACd,EAAE,4BAA4B,2CAiB9B"}

package/components/chat/widgets/credential-request-widget.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CredentialRequestWidget — presentational in-chat card for the three ways the
+ * agent asks for a credential: link out to an OAuth consent page, paste a
+ * secret, or upload an image (a 2FA QR / seed photo). It mirrors the visual
+ * chrome of the real secret form ({@link SensitiveRequestBlock}) so the two
+ * read as one family, but it is intentionally computation- and transport-free:
+ * the host wires the actual save/authorize via the `onAction` callbacks. It is
+ * a thin display layer over a discriminated `variant`, never a second secret
+ * pipeline.
+ */
+import { CheckCircle2, ExternalLink, ImageUp, KeyRound } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "../../ui/button.js";
+function OAuthLink({ variant, onAuthorize, }) {
+    const status = variant.status ?? "idle";
+    if (status === "connected") {
+        return (_jsxs("div", { "data-testid": "credential-oauth-connected", className: "flex items-center gap-2 text-xs text-accent", role: "status", children: [_jsx(CheckCircle2, { className: "h-4 w-4", "aria-hidden": true }), "Connected to ", variant.provider] }));
+    }
+    return (_jsxs(Button, { type: "button", size: "sm", "data-testid": "credential-oauth-authorize", disabled: status === "connecting", onClick: () => onAuthorize?.(variant.authorizeUrl), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": true }), status === "connecting" ? "Connecting…" : `Connect ${variant.provider}`] }));
+}
+function PasteSecret({ variant, onSubmitSecret, }) {
+    const [value, setValue] = useState("");
+    const handleSubmit = useCallback(() => {
+        const trimmed = value.trim();
+        if (trimmed.length === 0)
+            return;
+        onSubmitSecret?.(trimmed);
+    }, [onSubmitSecret, value]);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block text-xs space-y-1", children: [_jsx("span", { className: "font-medium", children: variant.label }), _jsx("input", { "aria-label": variant.label, "data-testid": "credential-secret-input", className: "w-full border border-border bg-bg px-2 py-1.5 text-sm", type: "password", placeholder: variant.placeholder, value: value, onChange: (event) => setValue(event.currentTarget.value) })] }), variant.helpText ? (_jsx("div", { className: "text-xs text-muted", children: variant.helpText })) : null, _jsxs(Button, { type: "button", size: "sm", "data-testid": "credential-secret-submit", disabled: value.trim().length === 0, onClick: handleSubmit, children: [_jsx(KeyRound, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Save secret"] })] }));
+}
+function ImageUpload({ variant, onSubmitImage, }) {
+    return (_jsxs("label", { className: "block text-xs space-y-1", children: [_jsx("span", { className: "font-medium", children: variant.label }), variant.previewUrl ? (_jsx("img", { src: variant.previewUrl, alt: `${variant.label} preview`, "data-testid": "credential-image-preview", className: "max-h-40 w-auto border border-border" })) : null, _jsxs("span", { className: "flex items-center gap-2 text-muted", children: [_jsx(ImageUp, { className: "h-4 w-4", "aria-hidden": true }), _jsx("input", { "aria-label": variant.label, "data-testid": "credential-image-input", className: "w-full border border-border bg-bg px-2 py-1.5 text-sm", type: "file", accept: variant.accept ?? "image/*", 
+                        // Mobile: prefer the rear camera for capturing a 2FA QR / seed photo.
+                        capture: "environment", onChange: (event) => {
+                            const file = event.currentTarget.files?.[0];
+                            if (file)
+                                onSubmitImage?.(file);
+                        } })] })] }));
+}
+function variantTitle(variant) {
+    switch (variant.kind) {
+        case "oauth-link":
+            return `Connect ${variant.provider}`;
+        case "paste-secret":
+        case "image-upload":
+            return variant.label;
+    }
+}
+export function CredentialRequestWidget({ variant, onAuthorize, onSubmitSecret, onSubmitImage, }) {
+    return (_jsxs("div", { "data-testid": "credential-request", "data-credential-kind": variant.kind, className: "my-2 border border-border bg-card p-3 text-sm space-y-3", children: [_jsx("div", { className: "font-medium", children: variantTitle(variant) }), variant.kind === "oauth-link" ? (_jsx(OAuthLink, { variant: variant, onAuthorize: onAuthorize })) : variant.kind === "paste-secret" ? (_jsx(PasteSecret, { variant: variant, onSubmitSecret: onSubmitSecret })) : (_jsx(ImageUpload, { variant: variant, onSubmitImage: onSubmitImage }))] }));
+}

package/components/chat/widgets/finances-alerts.d.ts

@@ -0,0 +1,17 @@
+import type { WidgetProps } from "../../../widgets/types.js";
+declare function FinancesAlertsWidget(_props: Partial<WidgetProps>): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Home-slot registration for the finances "Bills & Balance" widget. Wired into
+ * the registry centrally (see widgets/registry.ts). `signalKinds` mirror the
+ * self-signal kinds this widget publishes (escalation when overdrawn, reminder
+ * when bills are due soon).
+ */
+export declare const FINANCES_HOME_WIDGET: {
+    readonly pluginId: "finances";
+    readonly id: "finances.alerts";
+    readonly order: 130;
+    readonly signalKinds: readonly ["escalation", "reminder"];
+    readonly Component: typeof FinancesAlertsWidget;
+};
+export { FinancesAlertsWidget };
+//# sourceMappingURL=finances-alerts.d.ts.map

package/components/chat/widgets/finances-alerts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"finances-alerts.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/finances-alerts.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AA0L1D,iBAAS,oBAAoB,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,kDAsFzD;AAED;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAC;AAEX,OAAO,EAAE,oBAAoB,EAAE,CAAC"}