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

package/components/shell/HomePill.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ShellPhase } from "./shell-state";
+import type { ShellPhase } from "./shell-state.js";
 export interface HomePillProps {
     phase: ShellPhase;
     onOpen: () => void;

package/components/shell/HomePill.js

@@ -21,7 +21,7 @@ export function HomePill({ phase, onOpen, onClose, }) {
     }, [isOpen, onOpen, onClose]);
     return (_jsx("button", { type: "button", disabled: !isInteractive, "aria-label": isOpen ? `Close ${appName}` : `Open ${appName}`, "aria-pressed": isOpen, "data-phase": phase, "data-testid": "shell-home-pill", onClick: handleClick, style: { zIndex: Z_SHELL_OVERLAY }, className: cn("pointer-events-auto relative mb-3", 
         // Generous tap target
-        "flex h-8 w-32 items-center justify-center", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg", phase === "booting" && "cursor-not-allowed opacity-60"), children: _jsx("span", { "aria-hidden": "true", "data-testid": "shell-home-pill-mark", className: cn("block h-1.5 w-24 rounded-full transition-all duration-300", 
+        "flex h-8 w-32 items-center justify-center", "    ", phase === "booting" && "cursor-not-allowed opacity-60"), children: _jsx("span", { "aria-hidden": "true", "data-testid": "shell-home-pill-mark", className: cn("block h-1.5 w-24 rounded-full transition-all duration-300", 
             // Default: theme-adaptive neutral
             "bg-foreground/25", phase === "booting" && "bg-foreground/15", phase === "listening" && "animate-pulse bg-warn/70", phase === "responding" && "bg-accent/70", phase === "summoned" && "bg-foreground/40") }) }));
 }

package/components/shell/HomeScreen.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 export type HomeTileTarget = {
     kind: "tab";
     tab: string;
@@ -11,13 +11,25 @@ export interface HomeScreenProps {
     onOpenTile: (target: HomeTileTarget) => void;
     /** Render the AOSP-only phone/contacts tiles (native OS surfaces). */
     showNativeOsTiles?: boolean;
+    /**
+     * Optional host-provided header content rendered at the top of the home
+     * screen (e.g. a brand wallet widget). The framework intentionally ships no
+     * default clock to keep the home minimal; this host-override slot stays so a
+     * host app (e.g. milady's MoonCycles wallet) can opt back into a header
+     * without the framework providing one.
+     */
+    clockAccessory?: React.ReactNode;
 }
 /**
  * The /chat home: a deliberately minimal dashboard that sits behind the
- * always-present floating chat. It surfaces the agent's recent activity and
- * recent messages ONLY when there are any (otherwise it's just the ambient
- * field), plus the AOSP native-OS tiles. The chat overlay floats over the
- * bottom; this scrolls with clearance for it.
+ * always-present floating chat. It surfaces the prioritized home widgets — the
+ * unified `home`-slot WidgetHost (#9143): notifications, recent messages,
+ * orchestrator activity, and the per-plugin attention cards
+ * (calendar/goals/finances/health/relationships/inbox), each self-hiding when
+ * empty and dynamically ranked so whatever needs attention floats to the top.
+ * The home stays clean (just the ambient field + clock) when nothing's active.
+ * The AOSP native-OS tiles render below on Android. The chat overlay floats
+ * over the bottom; this scrolls with clearance for it.
  */
-export declare function HomeScreen({ onOpenTile, showNativeOsTiles, }: HomeScreenProps): React.JSX.Element;
+export declare function HomeScreen({ onOpenTile, showNativeOsTiles, clockAccessory, }: HomeScreenProps): React.JSX.Element;
 //# sourceMappingURL=HomeScreen.d.ts.map

package/components/shell/HomeScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/HomeScreen.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AA4MnC,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,UAAU,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,iBAAyB,GAC1B,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2FrC"}
+{"version":3,"file":"HomeScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/HomeScreen.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAyEpC,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAkDnC,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,UAAU,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,iBAAyB,EACzB,cAAc,GACf,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuFrC"}

package/components/shell/HomeScreen.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity, Bell, CalendarCheck, Camera, CheckCircle2, Contact, Hand, Loader2, MessageCircle, MessageSquare, OctagonAlert, Phone, Plus, Square, TriangleAlert, Workflow, XCircle, } from "lucide-react";
-import * as React from "react";
-import { client } from "../../api/index.js";
-import { useActivityEvents, } from "../../hooks/useActivityEvents.js";
-import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
+import { Camera, Contact, MessageSquare, Phone, } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useActivityEvents } from "../../hooks/useActivityEvents.js";
+import { isRenderTelemetryEnabled } from "../../hooks/useRenderGuard.js";
 import { cn } from "../../lib/utils.js";
+import { LAYOUT_SHIFT_OBSERVER_INIT } from "../../testing/layout-stability.js";
+import { WidgetHost } from "../../widgets/WidgetHost.js";
 // A gentle staggered fade-up as the home settles in — iOS-style, calm, and
 // fully stilled under prefers-reduced-motion. Each block carries a small
 // animation-delay (set inline) so the cards/tiles cascade in.
@@ -18,9 +19,59 @@ const HOME_ENTER_CSS = `
   .home-enter { animation: none; }
 }
 `;
-// The home screen carries NO general quick-access tiles: Home, Views, and
-// Settings live in the chat header now (the always-present nav), so pinning them
-// here too was redundant clutter. The only tiles left are the AOSP ElizaOS
+/**
+ * The entrance fade-up must play exactly ONCE, on first mount — not on every
+ * re-render or resize (which would re-apply the `opacity 0→1` animation and
+ * flash the cards). This hook returns the `home-enter` class only for the first
+ * commit, then permanently empty: after the initial paint the cards keep their
+ * settled (fully opaque) state and a parent re-render / resize can never replay
+ * the fade. Pure CSS `forwards` doesn't protect against the class being
+ * re-evaluated, so we drop it from the tree once it has run (#9304).
+ */
+function useEnterOnceClass() {
+    // `played` is set in a layout effect after the first commit so the very first
+    // render still carries `home-enter` (the animation runs), and every render
+    // after that omits it.
+    const [played, setPlayed] = useState(false);
+    const ranRef = useRef(false);
+    useEffect(() => {
+        if (ranRef.current)
+            return;
+        ranRef.current = true;
+        // Defer one frame so the entrance animation is committed before we strip the
+        // class; stripping immediately could cancel it mid-flight on slow paints.
+        const id = window.setTimeout(() => setPlayed(true), 700);
+        return () => window.clearTimeout(id);
+    }, []);
+    return played ? "" : "home-enter";
+}
+/**
+ * Dev/test-only home layout-shift observer. Installs the shared
+ * `layout-shift` PerformanceObserver (the same contract the e2e + KPI specs
+ * read via `window.__ELIZA_LAYOUT_SHIFTS__`) so a CLS regression on the home —
+ * a card popping in and jumping the page — is observable in the real app.
+ * Gated behind `isRenderTelemetryEnabled()` exactly like the render telemetry,
+ * so production builds install nothing.
+ */
+function useHomeLayoutShiftObserver() {
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        if (!isRenderTelemetryEnabled())
+            return;
+        try {
+            // The init body is idempotent (no-ops if already installed), so mounting
+            // multiple home surfaces is safe.
+            new Function(LAYOUT_SHIFT_OBSERVER_INIT)();
+        }
+        catch {
+            // layout-shift unsupported in this engine — the observer init swallows it.
+        }
+    }, []);
+}
+// The home screen carries NO general quick-access tiles: Springboard is the
+// adjacent launcher page, with Settings in its dock, so pinning those actions
+// here too would be redundant clutter. The only tiles left are the AOSP ElizaOS
 // fork's native-OS surfaces (messages, phone, contacts, camera) — real OS apps,
 // `nativeOs` so they stay hidden on every non-AOSP build (where the tile grid
 // renders nothing at all).
@@ -56,103 +107,42 @@ const HOME_TILES = [
         nativeOs: true,
     },
 ];
-// Map an activity eventType to an icon + accent. Defaults to a generic pulse.
-const ACTIVITY_ICONS = {
-    // Status palette only: green = ok, orange = busy/attention, red = error,
-    // white/gray = neutral. No off-brand sky/cyan or amber accents.
-    task_registered: { icon: Plus, tone: "text-white/70" },
-    task_complete: { icon: CheckCircle2, tone: "text-emerald-300/90" },
-    stopped: { icon: Square, tone: "text-white/60" },
-    tool_running: { icon: Loader2, tone: "text-orange-300/90" },
-    blocked: { icon: OctagonAlert, tone: "text-orange-300/90" },
-    blocked_auto_resolved: { icon: CheckCircle2, tone: "text-emerald-300/90" },
-    escalation: { icon: TriangleAlert, tone: "text-red-300/90" },
-    error: { icon: XCircle, tone: "text-red-300/90" },
-    "proactive-message": { icon: MessageCircle, tone: "text-white/80" },
-    reminder: { icon: Bell, tone: "text-white/80" },
-    workflow: { icon: Workflow, tone: "text-white/80" },
-    "check-in": { icon: CalendarCheck, tone: "text-white/80" },
-    nudge: { icon: Hand, tone: "text-white/80" },
-};
-function activityIcon(eventType) {
-    return ACTIVITY_ICONS[eventType] ?? { icon: Activity, tone: "text-white/70" };
-}
-function relativeTime(ts) {
-    const delta = Math.max(0, Date.now() - ts);
-    const s = Math.floor(delta / 1000);
-    if (s < 10)
-        return "now";
-    if (s < 60)
-        return `${s}s`;
-    const m = Math.floor(s / 60);
-    if (m < 60)
-        return `${m}m`;
-    const h = Math.floor(m / 60);
-    if (h < 24)
-        return `${h}h`;
-    return `${Math.floor(h / 24)}d`;
-}
-/** A blocked, glassy home widget card — the iOS-style building block. Only
- *  rendered when it has content (the home stays clean when nothing's happening). */
-function HomeCard({ title, icon: Icon, children, testId, }) {
-    return (_jsxs("section", { "data-testid": testId, className: cn(
-        // Liquid glass — same language as the chat panel + tiles.
-        "relative rounded-3xl border border-white/[0.14] bg-black/30 p-4 backdrop-blur-2xl backdrop-saturate-150", "shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_18px_50px_-26px_rgba(0,0,0,0.7)]"), children: [_jsxs("header", { className: "mb-2.5 flex items-center gap-2", children: [_jsx(Icon, { className: "h-4 w-4 text-white/70", "aria-hidden": true }), _jsx("h2", { className: "text-[13px] font-semibold text-white/70", children: title })] }), children] }));
-}
-function ActivityRows({ events, }) {
-    return (_jsx("ul", { "data-testid": "home-activity", className: "flex flex-col gap-2.5", children: events.map((ev) => {
-            const { icon: Icon, tone } = activityIcon(ev.eventType);
-            return (_jsxs("li", { className: "flex items-start gap-2.5", children: [_jsx(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] leading-snug text-white/85", children: ev.summary }), _jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-white/45", children: relativeTime(ev.timestamp) })] }, ev.id));
-        }) }));
-}
-/** Poll recent inbox chats; returns [] until/unless there are any. */
-function useRecentChats() {
-    const [chats, setChats] = React.useState([]);
-    const load = React.useCallback(() => {
-        void client
-            .getInboxChats({})
-            .then((res) => setChats(res.chats.slice(0, 4)))
-            .catch(() => {
-            /* offline / no inbox — leave empty */
-        });
-    }, []);
-    React.useEffect(() => {
-        load();
-    }, [load]);
-    useIntervalWhenDocumentVisible(load, 20_000);
-    return chats;
-}
-function MessagesRows({ chats, }) {
-    return (_jsx("div", { "data-testid": "home-messages", children: _jsx("ul", { className: "flex flex-col gap-2.5", children: chats.map((c) => (_jsxs("li", { className: "flex items-center gap-2.5", children: [c.avatarUrl ? (_jsx("img", { src: c.avatarUrl, alt: "", className: "h-7 w-7 shrink-0 rounded-full object-cover" })) : (_jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white/15 text-[11px] font-semibold text-white/80", children: c.title.slice(0, 1).toUpperCase() })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium text-white/90", children: c.title }), _jsx("span", { className: "block truncate text-[12px] text-white/55", children: c.lastMessageText })] }), _jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-white/45", children: relativeTime(c.lastMessageAt) })] }, c.id))) }) }));
-}
 /**
  * The /chat home: a deliberately minimal dashboard that sits behind the
- * always-present floating chat. It surfaces the agent's recent activity and
- * recent messages ONLY when there are any (otherwise it's just the ambient
- * field), plus the AOSP native-OS tiles. The chat overlay floats over the
- * bottom; this scrolls with clearance for it.
+ * always-present floating chat. It surfaces the prioritized home widgets — the
+ * unified `home`-slot WidgetHost (#9143): notifications, recent messages,
+ * orchestrator activity, and the per-plugin attention cards
+ * (calendar/goals/finances/health/relationships/inbox), each self-hiding when
+ * empty and dynamically ranked so whatever needs attention floats to the top.
+ * The home stays clean (just the ambient field + clock) when nothing's active.
+ * The AOSP native-OS tiles render below on Android. The chat overlay floats
+ * over the bottom; this scrolls with clearance for it.
  */
-export function HomeScreen({ onOpenTile, showNativeOsTiles = false, }) {
+export function HomeScreen({ onOpenTile, showNativeOsTiles = false, clockAccessory, }) {
     // Only the AOSP native-OS tiles remain, and they need an AOSP build. On every
     // other platform `tiles` is empty and the grid renders nothing.
     const tiles = HOME_TILES.filter((t) => !t.nativeOs || showNativeOsTiles);
-    // Recent activity + messages render ONLY when there's something to show — the
-    // home stays clean (just the clock) otherwise.
-    const { events } = useActivityEvents();
-    const recentActivity = events.slice(0, 5);
-    const recentChats = useRecentChats();
+    // The live activity stream feeds the home ranker's attention signals.
+    const { events, clearEvents } = useActivityEvents();
+    // The entrance fade plays once, on first mount only — never re-triggered by a
+    // re-render or resize (#9304).
+    const enterClass = useEnterOnceClass();
+    // Dev/test-only: observe home layout shifts on the shared telemetry channel.
+    useHomeLayoutShiftObserver();
     return (_jsxs("div", { "data-testid": "home-screen", className: cn("eliza-continuous-chat-scroll absolute inset-0 z-[1] overflow-y-auto", 
-        // Sit right under the status bar — no empty band above the content.
-        "px-4 pt-[calc(env(safe-area-inset-top,0px)+0.5rem)]", 
+        // The shell root already reserves the status-bar safe area (its
+        // paddingTop: var(--safe-area-top)); adding it again here double-padded
+        // the content and left a large empty band above the dashboard. Just a
+        // small gutter — the notch is already cleared by the root.
+        "px-4 pt-2", 
         // Clear the floating chat composer at the bottom.
-        "pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.5rem)]"), children: [_jsx("style", { children: HOME_ENTER_CSS }), _jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col gap-4", children: [recentActivity.length > 0 ? (_jsx("div", { className: "home-enter", style: { animationDelay: "70ms" }, children: _jsx(HomeCard, { title: "Recent activity", icon: Activity, testId: "home-widget-activity", children: _jsx(ActivityRows, { events: recentActivity }) }) })) : null, recentChats.length > 0 ? (_jsx("div", { className: "home-enter", style: { animationDelay: "110ms" }, children: _jsx(HomeCard, { title: "Recent messages", icon: MessageSquare, testId: "home-widget-messages", children: _jsx(MessagesRows, { chats: recentChats }) }) })) : null, tiles.length > 0 ? (_jsx("nav", { "aria-label": "Apps", "data-testid": "home-tiles", className: "home-enter mt-2", style: { animationDelay: "150ms" }, children: _jsx("div", { className: "grid grid-cols-4 gap-3", children: tiles.map((tile) => {
+        "pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.5rem)]"), children: [_jsx("style", { children: HOME_ENTER_CSS }), _jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col gap-4", children: [clockAccessory ? (_jsx("div", { className: cn(enterClass, "flex justify-end"), children: clockAccessory })) : null, _jsx("div", { className: enterClass, style: { animationDelay: "70ms" }, children: _jsx(WidgetHost, { slot: "home", layout: "grid", events: events, clearEvents: clearEvents }) }), tiles.length > 0 ? (_jsx("nav", { "aria-label": "Apps", "data-testid": "home-tiles", className: cn(enterClass, "mt-2"), style: { animationDelay: "150ms" }, children: _jsx("div", { className: "grid grid-cols-4 gap-3", children: tiles.map((tile) => {
                                 const Icon = tile.icon;
                                 return (_jsxs("button", { type: "button", "data-testid": `home-tile-${tile.id}`, onClick: () => onOpenTile(tile.target), className: cn(
-                                    // Liquid glass, matching the chat panel: translucent dark
-                                    // pane, strong blur + saturation, a bright top specular edge.
-                                    "flex flex-col items-center gap-1.5 rounded-2xl border border-white/[0.14] bg-black/25 px-1 py-3.5 backdrop-blur-2xl backdrop-saturate-150", "shadow-[inset_0_1px_0_rgba(255,255,255,0.16)]", 
+                                    // Dark tile, matching the chat panel: a solid dark pane.
+                                    "flex flex-col items-center gap-1.5 rounded-2xl border border-white/[0.14] bg-black/70 px-1 py-3.5", 
                                     // Tactile press: a quick scale-down on tap (stilled for
                                     // reduce-motion users), plus the glass brightening on hover.
-                                    "transition-[transform,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100", "hover:bg-white/[0.14] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"), children: [_jsx(Icon, { className: "h-[22px] w-[22px] text-white/90", "aria-hidden": true }), _jsx("span", { className: "max-w-full truncate text-[11px] font-medium text-white/80", children: tile.label })] }, tile.id));
+                                    "transition-[transform,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100", "hover:bg-white/[0.14]   "), children: [_jsx(Icon, { className: "h-[22px] w-[22px] text-white/90", "aria-hidden": true }), _jsx("span", { className: "max-w-full truncate text-[11px] font-medium text-white/80", children: tile.label })] }, tile.id));
                             }) }) })) : null] })] }));
 }

package/components/shell/HomeSpringboardSurface.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { HomeSpringboardPage } from "./home-springboard-events.js";
+export interface HomeSpringboardSurfaceProps {
+    home: React.ReactNode;
+    springboard: React.ReactElement<{
+        onNavigateHomeFromEdge?: () => void;
+    }>;
+    initialPage?: HomeSpringboardPage;
+    className?: string;
+}
+/**
+ * The home ↔ springboard rail. It owns NO local navigation state — `page` is
+ * read from (and every transition is dispatched to) the single shell-surface
+ * store, so this surface, the inner Springboard, the chat controller, and the
+ * page indicator can never disagree. One horizontal flick on either half maps to
+ * exactly one store intent (home → springboard on a left flick; springboard →
+ * home on a right flick), and a single combined indicator reflects the store —
+ * there is no second, competing dot strip.
+ */
+export declare function HomeSpringboardSurface({ home, springboard, initialPage, className, }: HomeSpringboardSurfaceProps): React.JSX.Element;
+//# sourceMappingURL=HomeSpringboardSurface.d.ts.map

package/components/shell/HomeSpringboardSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomeSpringboardSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/HomeSpringboardSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAarE,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACzE,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,WAAW,EACX,WAAoB,EACpB,SAAS,GACV,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqMjD"}

package/components/shell/HomeSpringboardSurface.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { goHome, goSpringboard, setShellSurfacePage, setSpringboardPage, useShellSurface, } from "../../state/shell-surface-store.js";
+/** Horizontal travel (px) needed to commit a rail flick (home ↔ springboard). */
+const RAIL_FLICK_THRESHOLD = 72;
+/** Horizontal travel must beat vertical by this ratio so a scroll never flips. */
+const RAIL_FLICK_ANGLE_RATIO = 1.25;
+/**
+ * The home ↔ springboard rail. It owns NO local navigation state — `page` is
+ * read from (and every transition is dispatched to) the single shell-surface
+ * store, so this surface, the inner Springboard, the chat controller, and the
+ * page indicator can never disagree. One horizontal flick on either half maps to
+ * exactly one store intent (home → springboard on a left flick; springboard →
+ * home on a right flick), and a single combined indicator reflects the store —
+ * there is no second, competing dot strip.
+ */
+export function HomeSpringboardSurface({ home, springboard, initialPage = "home", className, }) {
+    const { page, springboardPage, springboardPageCount, springboardEditing } = useShellSurface();
+    // The mounting route decides which half shows first. Re-runs only when the
+    // route actually changes `initialPage`, so an in-session swipe is never
+    // clobbered (the deps don't change on re-render).
+    React.useEffect(() => {
+        setShellSurfacePage(initialPage);
+    }, [initialPage]);
+    const homeFlick = React.useRef({
+        startX: 0,
+        startY: 0,
+        tracking: false,
+    });
+    const springboardFlick = React.useRef({
+        startX: 0,
+        startY: 0,
+        tracking: false,
+    });
+    // A committed flick must swallow the click that the browser synthesizes from
+    // the same press, so the flick doesn't also tap-launch the tile underneath.
+    const suppressHomeClickRef = React.useRef(false);
+    const suppressSpringboardClickRef = React.useRef(false);
+    // One flick detector, parameterized by the direction that commits: the home
+    // half commits a LEFT flick (open springboard); the springboard half commits a
+    // RIGHT flick (return home) — the back gesture the old surface lacked, and the
+    // one escape that works even while the springboard is in edit mode.
+    const makeFlickHandlers = (flick, suppress, direction, onCommit) => {
+        const committed = (dx, dy) => Math.abs(dx) > Math.abs(dy) * RAIL_FLICK_ANGLE_RATIO &&
+            (direction === "left"
+                ? dx < -RAIL_FLICK_THRESHOLD
+                : dx > RAIL_FLICK_THRESHOLD);
+        return {
+            onPointerDown: (event) => {
+                if (!event.isPrimary)
+                    return;
+                flick.current = {
+                    startX: event.clientX,
+                    startY: event.clientY,
+                    tracking: true,
+                };
+            },
+            onPointerUp: (event) => {
+                const state = flick.current;
+                if (!state.tracking)
+                    return;
+                state.tracking = false;
+                if (!committed(event.clientX - state.startX, event.clientY - state.startY)) {
+                    return;
+                }
+                suppress.current = true;
+                onCommit();
+                window.setTimeout(() => {
+                    suppress.current = false;
+                }, 0);
+            },
+            onPointerCancel: () => {
+                flick.current.tracking = false;
+            },
+            onClickCapture: (event) => {
+                if (!suppress.current)
+                    return;
+                suppress.current = false;
+                event.preventDefault();
+                event.stopPropagation();
+            },
+        };
+    };
+    const homeHandlers = makeFlickHandlers(homeFlick, suppressHomeClickRef, "left", goSpringboard);
+    const springboardHandlers = makeFlickHandlers(springboardFlick, suppressSpringboardClickRef, "right", () => {
+        // A right-flick returns home only from the FIRST springboard page (iOS
+        // back); on deeper pages the inner pager steps back one page instead, so
+        // the two gestures never both fire. While editing it is always the escape
+        // hatch out of jiggle mode (the inner pager is disabled then).
+        if (springboardPage === 0 || springboardEditing)
+            goHome();
+    });
+    const railStyle = React.useMemo(() => ({
+        transform: page === "springboard" ? "translate3d(-50%,0,0)" : "translate3d(0,0,0)",
+    }), [page]);
+    // ONE indicator for the whole launcher: a home dot followed by one dot per
+    // springboard page. Active index is derived from the store, so the doubled
+    // (stacked) dot strips are gone — there is exactly one. Tapping a dot is a
+    // direct jump (dot 0 → home; dot k → springboard page k-1).
+    const totalDots = 1 + Math.max(1, springboardPageCount);
+    const activeDot = page === "home" ? 0 : 1 + springboardPage;
+    const jumpToDot = React.useCallback((index) => {
+        if (index <= 0) {
+            goHome();
+            return;
+        }
+        goSpringboard();
+        setSpringboardPage(index - 1);
+    }, []);
+    return (_jsxs("section", { "data-testid": "home-springboard-surface", "data-page": page, 
+        // `select-none`: this is a swipeable launcher (home ↔ springboard), so a
+        // horizontal drag must pan the rail, never text-select the tile labels /
+        // widget text underneath. (Vertical scroll of the home widget list is
+        // untouched.)
+        className: cn("absolute inset-0 z-[1] select-none overflow-hidden", className), children: [_jsxs("div", { "data-testid": "home-springboard-rail", className: cn("absolute inset-0 flex w-[200%]", "transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"), style: railStyle, children: [_jsx("div", { "data-testid": "home-springboard-home-page", "aria-hidden": page !== "home", 
+                        // `touch-pan-y`: reserve vertical panning for the browser (the home
+                        // widget list scrolls) but claim every horizontal gesture for the
+                        // rail flick. Without it a touch device hands a horizontal drag to the
+                        // browser's own scroll/back gesture, which fires `pointercancel`
+                        // instead of `pointerup` — the flick silently never commits.
+                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: homeHandlers.onPointerDown, onPointerUp: homeHandlers.onPointerUp, onPointerCancel: homeHandlers.onPointerCancel, onClickCapture: homeHandlers.onClickCapture, children: home }), _jsx("div", { "data-testid": "home-springboard-springboard-page", "aria-hidden": page !== "springboard", 
+                        // Same as the home half: vertical scroll (the tile grid) stays with
+                        // the browser, horizontal flicks (right → back home) are ours.
+                        className: "relative h-full w-1/2 shrink-0 touch-pan-y", onPointerDown: springboardHandlers.onPointerDown, onPointerUp: springboardHandlers.onPointerUp, onPointerCancel: springboardHandlers.onPointerCancel, onClickCapture: springboardHandlers.onClickCapture, children: React.cloneElement(springboard, {
+                            onNavigateHomeFromEdge: goHome,
+                        }) })] }), _jsx("div", { "data-testid": "home-springboard-indicator", 
+                // Sit ABOVE the floating chat composer (its clearance), with a gap, so
+                // the dots never overlap the "Ask Eliza" input (was a fixed 5.9rem that
+                // collided with the composer on tall devices).
+                className: "pointer-events-auto absolute inset-x-0 bottom-[calc(var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.5rem)] z-[2] flex justify-center gap-1.5", children: Array.from({ length: totalDots }, (_, index) => (_jsx("button", { type: "button", "aria-label": index === 0 ? "Home" : `Apps page ${index}`, "aria-current": index === activeDot, onClick: () => jumpToDot(index), className: cn(
+                    // Keep inactive dots discoverable on the orange wallpaper.
+                    "h-1.5 w-1.5 rounded-full shadow-sm transition-colors", index === activeDot ? "bg-white/90" : "bg-white/45") }, `shell-dot-${index}`))) })] }));
+}

package/components/shell/KioskViewCanvas.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { KioskViewSurface } from "./useKioskViewSurfaces";
+import type { KioskViewSurface } from "./useKioskViewSurfaces.js";
 /**
  * The kiosk view-manager canvas. Mounts agent-spawned dynamic-view sessions as
  * in-window surfaces (positioned iframes) on the single fullscreen kiosk

package/components/shell/LoadingScreen.d.ts

@@ -2,7 +2,7 @@
  * Loading screen — NieR: Automata inspired loader with horizontal progress bar,
  * phase label, and percentage indicator.
  */
-import type { StartupPhase } from "../../state";
+import type { StartupPhase } from "../../state/index.js";
 interface LoadingScreenProps {
     phase?: StartupPhase;
     vrmUrl?: string;

package/components/shell/LoadingScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/LoadingScreen.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAwBhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA0B,EAC1B,MAAM,GACP,EAAE,kBAAkB,2CAmFpB"}
+{"version":3,"file":"LoadingScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/LoadingScreen.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAwBhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA0B,EAC1B,MAAM,GACP,EAAE,kBAAkB,2CAmGpB"}

package/components/shell/LoadingScreen.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * phase label, and percentage indicator.
  */
 import { useEffect, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 const PHASE_META = {
     "starting-backend": {
         labelKey: "loadingscreen.InitializingSystems",
@@ -23,18 +23,22 @@ const PHASE_META = {
     },
 };
 export function LoadingScreen({ phase = "starting-backend", vrmUrl, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [vrmCached, setVrmCached] = useState(false);
     const [fetchProgress, setFetchProgress] = useState(0);
     useEffect(() => {
         if (!vrmUrl)
             return;
         const controller = new AbortController();
+        let isMounted = true;
+        let isSettled = false;
         (async () => {
             try {
                 const response = await fetch(vrmUrl, { signal: controller.signal });
                 const contentLength = Number(response.headers.get("content-length") || 0);
                 if (!contentLength || !response.body) {
+                    if (!isMounted || controller.signal.aborted)
+                        return;
                     setVrmCached(true);
                     return;
                 }
@@ -45,15 +49,34 @@ export function LoadingScreen({ phase = "starting-backend", vrmUrl, }) {
                     if (done)
                         break;
                     received += value.byteLength;
+                    if (!isMounted || controller.signal.aborted)
+                        return;
                     setFetchProgress(Math.min(received / contentLength, 1));
                 }
+                if (!isMounted || controller.signal.aborted)
+                    return;
                 setVrmCached(true);
             }
             catch {
+                if (controller.signal.aborted)
+                    return;
                 // Non-blocking — VRM will load normally later.
             }
+            finally {
+                isSettled = true;
+            }
         })();
-        return () => controller.abort();
+        return () => {
+            isMounted = false;
+            if (isSettled || controller.signal.aborted)
+                return;
+            try {
+                controller.abort();
+            }
+            catch {
+                // Node's undici can throw synchronously while aborting fetch in jsdom.
+            }
+        };
     }, [vrmUrl]);
     const meta = PHASE_META[phase];
     let progress;
@@ -69,8 +92,8 @@ export function LoadingScreen({ phase = "starting-backend", vrmUrl, }) {
     const label = vrmCached && phase !== "ready"
         ? t("loadingscreen.LoadingAvatar", { defaultValue: "Loading avatar" })
         : t(meta.labelKey, { defaultValue: meta.defaultLabel });
-    return (_jsx("div", { className: "flex items-center justify-center h-dvh bg-bg relative overflow-hidden", children: _jsxs("div", { className: "flex flex-col items-start gap-3.5 w-[420px] max-w-[90vw]", children: [_jsxs("div", { className: "font-mono text-sm font-normal tracking-[0.35em] uppercase text-txt/70 select-none", children: [t("common.loading", { defaultValue: "Loading" }), _jsx("span", { className: "loading-screen__dots" })] }), _jsxs("div", { className: "flex items-center gap-4 w-full", children: [_jsx("div", { className: "flex-1 h-1 bg-bg-accent overflow-hidden relative", children: _jsx("div", { className: "h-full bg-accent relative ", style: {
-                                    width: `${progress}%`,
-                                    transition: "width 1.5s ease-out",
+    return (_jsx("div", { className: "flex items-center justify-center h-dvh bg-bg relative overflow-hidden", children: _jsxs("div", { className: "flex flex-col items-start gap-3.5 w-[420px] max-w-[90vw]", children: [_jsxs("div", { className: "font-mono text-sm font-normal tracking-[0.35em] uppercase text-txt/70 select-none", children: [t("common.loading", { defaultValue: "Loading" }), _jsx("span", { className: "loading-screen__dots" })] }), _jsxs("div", { className: "flex items-center gap-4 w-full", children: [_jsx("div", { className: "flex-1 h-1 bg-bg-accent overflow-hidden relative", children: _jsx("div", { className: "h-full w-full origin-left bg-accent relative", style: {
+                                    transform: `scaleX(${Math.min(100, Math.max(0, progress)) / 100})`,
+                                    transition: "transform 1.5s ease-out",
                                 } }) }), _jsxs("div", { className: "font-mono text-sm font-normal tracking-[0.15em] text-white/60 min-w-[48px] text-right select-none", children: [progress, " %"] })] }), _jsx("div", { className: "font-mono text-xs-tight font-normal tracking-[0.12em] uppercase text-white/35 select-none", children: label })] }) }));
 }

package/components/shell/NotificationCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/NotificationCenter.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAgI/D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAgB,GACjB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CA0GZ;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/NotificationCenter.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AA0Mf;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAgB,GACjB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAwIZ;AAED,eAAe,kBAAkB,CAAC"}