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

package/components/shell/NotificationCenter.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bell, BellRing, Bot, Check, CheckCheck, CircleAlert, Clock, FileWarning, HeartPulse, Inbox, MessageSquare, Settings2, Trash2, Workflow, X, } from "lucide-react";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState, } from "react";
 import { cn } from "../../lib/utils.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
+import { navigateDeepLink } from "../../state/notifications/navigate-deep-link.js";
 import { clearNotifications, initNotifications, markAllNotificationsRead, markNotificationRead, registerNotificationToastSink, removeNotification, useNotifications, } from "../../state/notifications/notification-store.js";
 import { formatRelativeTime } from "../../utils/format.js";
 import { Button } from "../ui/button.js";
@@ -21,21 +22,29 @@ const CATEGORY_ICON = {
 function categoryIcon(category) {
     return CATEGORY_ICON[category] ?? CATEGORY_ICON.general;
 }
-/** Best-effort navigation for a notification deep link. */
-function navigateDeepLink(deepLink) {
-    if (typeof window === "undefined")
-        return;
-    if (/^https?:\/\//i.test(deepLink)) {
-        window.open(deepLink, "_blank", "noopener,noreferrer");
-        return;
-    }
-    if (deepLink.startsWith("/")) {
-        const viewId = deepLink.slice(1).split("/")[0] || undefined;
-        window.dispatchEvent(new CustomEvent("eliza:navigate:view", {
-            detail: { viewId, viewPath: deepLink },
-        }));
-    }
-}
+const CATEGORY_LABEL = {
+    reminder: "Reminders",
+    task: "Tasks",
+    workflow: "Workflows",
+    agent: "Agents",
+    approval: "Approvals",
+    message: "Messages",
+    health: "Health",
+    system: "System",
+    general: "General",
+};
+/** Stable display order for the category filter chips. */
+const CATEGORY_ORDER = [
+    "approval",
+    "agent",
+    "task",
+    "workflow",
+    "reminder",
+    "message",
+    "health",
+    "system",
+    "general",
+];
 function NotificationRow({ notification, onClose, }) {
     const unread = !notification.readAt;
     const handleOpen = useCallback(() => {
@@ -54,7 +63,15 @@ function NotificationRow({ notification, onClose, }) {
                             ? "bg-status-error/15 text-status-error"
                             : notification.priority === "high"
                                 ? "bg-accent/15 text-accent"
-                                : "bg-surface text-muted-strong"), children: categoryIcon(notification.category) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: notification.title }), unread && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-accent" }))] }), notification.body && (_jsx("span", { className: "mt-0.5 line-clamp-2 block text-xs text-muted", children: notification.body })), _jsx("span", { className: "mt-1 block text-[11px] text-muted/80", children: formatRelativeTime(notification.createdAt) })] })] }), _jsx("button", { type: "button", "aria-label": "Dismiss notification", onClick: handleRemove, className: "absolute right-1.5 top-2.5 shrink-0 rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-card hover:text-txt focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }));
+                                : "bg-surface text-muted-strong"), children: categoryIcon(notification.category) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: notification.title }), unread && (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-accent" }))] }), notification.body && (_jsx("span", { className: "mt-0.5 line-clamp-2 block text-xs text-muted", children: notification.body })), _jsx("span", { className: "mt-1 block text-[11px] text-muted/80", children: formatRelativeTime(notification.createdAt) })] })] }), _jsx("button", { type: "button", "aria-label": "Dismiss notification", onClick: handleRemove, className: "absolute right-1.5 top-2.5 shrink-0 rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-card hover:text-txt  group-hover:opacity-100", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }));
+}
+function CategoryFilterBar({ categories, active, onSelect, }) {
+    return (_jsxs("div", { className: "flex items-center gap-1 overflow-x-auto border-b border-border px-2 py-1.5", role: "tablist", "aria-label": "Filter notifications by category", children: [_jsx(FilterChip, { label: "All", active: active === "all", onSelect: () => onSelect("all") }), categories.map((category) => (_jsx(FilterChip, { label: CATEGORY_LABEL[category], icon: categoryIcon(category), active: active === category, onSelect: () => onSelect(category) }, category)))] }));
+}
+function FilterChip({ label, icon, active, onSelect, }) {
+    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": active, onClick: onSelect, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-colors", active
+            ? "bg-accent text-accent-foreground hover:bg-accent/85"
+            : "text-muted-strong hover:bg-surface hover:text-txt"), children: [icon, _jsx("span", { children: label })] }));
 }
 /**
  * Notification center — a floating bell + unread badge that opens a panel
@@ -67,7 +84,22 @@ function NotificationRow({ notification, onClose, }) {
  */
 export function NotificationCenter({ className, headless = false, }) {
     const { notifications, unreadCount } = useNotifications();
-    const { setActionNotice } = useApp();
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const [activeCategory, setActiveCategory] = useState("all");
+    // Categories actually present in the inbox, in a stable display order. Drives
+    // the filter chips — empty/single-category inboxes get no filter clutter.
+    const presentCategories = useMemo(() => {
+        const present = new Set(notifications.map((n) => n.category));
+        return CATEGORY_ORDER.filter((category) => present.has(category));
+    }, [notifications]);
+    // Fall back to "all" when the active category drains (its last item was read
+    // away / cleared), so the list never shows an empty filtered view by accident.
+    const effectiveCategory = activeCategory !== "all" && !presentCategories.includes(activeCategory)
+        ? "all"
+        : activeCategory;
+    const visibleNotifications = useMemo(() => effectiveCategory === "all"
+        ? notifications
+        : notifications.filter((n) => n.category === effectiveCategory), [notifications, effectiveCategory]);
     // Boot the notification store (hydrate + subscribe to the live stream) and
     // route its interrupt toasts through the shell's ActionNotice. Idempotent —
     // the store guards against re-init; the toast sink is re-pointed on remount.
@@ -89,7 +121,7 @@ export function NotificationCenter({ className, headless = false, }) {
         return null;
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": hasUnread
                         ? `Notifications (${unreadCount} unread)`
-                        : "Notifications", className: cn("relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-muted-strong transition-colors hover:bg-surface hover:text-txt", className), children: [hasUnread ? (_jsx(BellRing, { className: "h-[18px] w-[18px]" })) : (_jsx(Bell, { className: "h-[18px] w-[18px]" })), hasUnread && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 flex min-w-[16px] items-center justify-center rounded-full bg-accent px-1 text-[10px] font-semibold leading-4 text-accent-foreground", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-[min(360px,calc(100vw-1.5rem))] p-0", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2.5", children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: "Notifications" }), _jsxs("div", { className: "flex items-center gap-1", children: [hasUnread && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Mark all read", title: "Mark all read", onClick: handleMarkAll, children: _jsx(CheckCheck, { className: "h-4 w-4" }) })), notifications.length > 0 && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Clear all", title: "Clear all", onClick: handleClear, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), notifications.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center", children: [_jsx(Inbox, { className: "h-7 w-7 text-muted/70" }), _jsx("span", { className: "text-sm text-muted", children: "You're all caught up" })] })) : (_jsx("ul", { className: "max-h-[min(440px,60vh)] overflow-y-auto p-1.5", children: notifications.map((notification) => (_jsx(NotificationRow, { notification: notification, onClose: () => {
+                        : "Notifications", className: cn("relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-muted-strong transition-colors hover:bg-surface hover:text-txt", className), children: [hasUnread ? (_jsx(BellRing, { className: "h-[18px] w-[18px]" })) : (_jsx(Bell, { className: "h-[18px] w-[18px]" })), hasUnread && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 flex min-w-[16px] items-center justify-center rounded-full bg-accent px-1 text-[10px] font-semibold leading-4 text-accent-foreground", children: unreadCount > 99 ? "99+" : unreadCount }))] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-[min(360px,calc(100vw-1.5rem))] p-0", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2.5", children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: "Notifications" }), _jsxs("div", { className: "flex items-center gap-1", children: [hasUnread && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Mark all read", title: "Mark all read", onClick: handleMarkAll, children: _jsx(CheckCheck, { className: "h-4 w-4" }) })), notifications.length > 0 && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Clear all", title: "Clear all", onClick: handleClear, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), presentCategories.length > 1 && (_jsx(CategoryFilterBar, { categories: presentCategories, active: effectiveCategory, onSelect: setActiveCategory })), notifications.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center", children: [_jsx(Inbox, { className: "h-7 w-7 text-muted/70" }), _jsx("span", { className: "text-sm text-muted", children: "You're all caught up" })] })) : (_jsx("ul", { className: "max-h-[min(440px,60vh)] overflow-y-auto p-1.5", children: visibleNotifications.map((notification) => (_jsx(NotificationRow, { notification: notification, onClose: () => {
                                 /* popover closes on navigation via deep-link below */
                             } }, notification.id))) }))] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PairingCommandHint.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingCommandHint.tsx"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAuGvE"}
+{"version":3,"file":"PairingCommandHint.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingCommandHint.tsx"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAyGvE"}

package/components/shell/PairingCommandHint.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Copy, Server } from "lucide-react";
 import { useMemo } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { buildPairingCodeCommandInfo } from "./pairing-command.js";
 export function PairingCommandHint({ remoteUrl }) {
-    const { copyToClipboard, setActionNotice, t } = useApp();
+    const copyToClipboard = useAppSelector((s) => s.copyToClipboard);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const t = useAppSelector((s) => s.t);
     const commandInfo = useMemo(() => buildPairingCodeCommandInfo(remoteUrl), [remoteUrl]);
     const commandRows = commandInfo.sshCommand
         ? [

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

@@ -1 +1 @@
-{"version":3,"file":"PairingView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingView.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,WAAW,4CAkN1B"}
+{"version":3,"file":"PairingView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/PairingView.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,WAAW,4CA2N1B"}

package/components/shell/PairingView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { client } from "../../api/index.js";
 import { appNameInterpolationVars, useBranding } from "../../config/branding.js";
 import { startFreshFirstRunReload } from "../../platform/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../ui/card.js";
 import { Input } from "../ui/input.js";
@@ -12,7 +12,16 @@ const SCREEN_SHELL_CLASS = "relative flex min-h-screen w-full items-center justi
 const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[620px] overflow-hidden border border-border/60 bg-card/95 ";
 const SURFACE_PANEL_CLASS = "rounded-sm border border-border/50 bg-bg/40 p-4 sm:p-5";
 export function PairingView() {
-    const { pairingEnabled, pairingExpiresAt, pairingCodeInput, pairingError, pairingBusy, handlePairingSubmit, setState, t, } = useApp();
+    const { pairingEnabled, pairingExpiresAt, pairingCodeInput, pairingError, pairingBusy, handlePairingSubmit, setState, t, } = useAppSelectorShallow((s) => ({
+        pairingEnabled: s.pairingEnabled,
+        pairingExpiresAt: s.pairingExpiresAt,
+        pairingCodeInput: s.pairingCodeInput,
+        pairingError: s.pairingError,
+        pairingBusy: s.pairingBusy,
+        handlePairingSubmit: s.handlePairingSubmit,
+        setState: s.setState,
+        t: s.t,
+    }));
     const branding = useBranding();
     const pairingCode = pairingCodeInput.trim();
     function formatExpiry(timestamp) {

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

@@ -1 +1 @@
-{"version":3,"file":"RestartBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/RestartBanner.tsx"],"names":[],"mappings":"AAOA,wBAAgB,aAAa,mDA0E5B"}
+{"version":3,"file":"RestartBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/RestartBanner.tsx"],"names":[],"mappings":"AAOA,wBAAgB,aAAa,mDAgF5B"}

package/components/shell/RestartBanner.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 // z-[9998] mirrors Z_SYSTEM_BANNER in ../../lib/floating-layers.ts.
 // Kept as a literal so Tailwind v4's source scanner emits the utility.
 export function RestartBanner() {
-    const { pendingRestart, pendingRestartReasons, restartBannerDismissed, dismissRestartBanner, triggerRestart, t, } = useApp();
+    const { pendingRestart, pendingRestartReasons, restartBannerDismissed, dismissRestartBanner, triggerRestart, t, } = useAppSelectorShallow((s) => ({
+        pendingRestart: s.pendingRestart,
+        pendingRestartReasons: s.pendingRestartReasons,
+        restartBannerDismissed: s.restartBannerDismissed,
+        dismissRestartBanner: s.dismissRestartBanner,
+        triggerRestart: s.triggerRestart,
+        t: s.t,
+    }));
     const [restarting, setRestarting] = useState(false);
     const handleRestart = useCallback(async () => {
         setRestarting(true);
@@ -31,7 +38,6 @@ export function RestartBanner() {
             border: "1px solid color-mix(in srgb, var(--accent) 25%, transparent)",
             color: "var(--text)",
             maxWidth: "22rem",
-            backdropFilter: "blur(12px)",
         }, role: "status", "aria-live": "polite", children: [_jsx("span", { className: "leading-snug", children: text }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: dismissRestartBanner, className: "rounded-sm px-3 py-1 text-xs text-muted hover:bg-bg-hover", children: t("restartbanner.Later") }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleRestart, disabled: restarting, className: "rounded-sm px-3 py-1 text-xs font-semibold border-transparent", style: {
                             background: "var(--accent)",
                             color: "var(--accent-foreground)",

package/components/shell/ShellControllerContext.hooks.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ShellController } from "./useShellController";
+import type { ShellController } from "./useShellController.js";
 export declare const ShellControllerContext: React.Context<ShellController | null>;
 /** Returns the shared controller, or `null` outside the provider. */
 export declare function useShellControllerContext(): ShellController | null;

package/components/shell/ShellHeaderControls.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-import type { UiLanguage } from "../../i18n";
-import type { ShellView, UiTheme } from "../../state";
-declare const SHELL_ICON_BUTTON_CLASSNAME = "inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-sm border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt ring-1 ring-inset ring-white/6  supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
+import type { UiLanguage } from "../../i18n/index.js";
+import type { ShellView, UiTheme } from "../../state/index.js";
+declare const SHELL_ICON_BUTTON_CLASSNAME = "inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-sm border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt    transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
 declare const HEADER_BUTTON_STYLE: {
     readonly clipPath: "none";
     readonly WebkitClipPath: "none";

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

@@ -1 +1 @@
-{"version":3,"file":"ShellHeaderControls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShellHeaderControls.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAStD,QAAA,MAAM,2BAA2B,m5BAAyH,CAAC;AAa3J,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAEX,OAAO,EACL,mBAAmB,EACnB,2BAA2B,IAAI,4BAA4B,GAC5D,CAAC;AAEF,KAAK,qBAAqB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAKrD,UAAU,wBAAwB;IAChC,eAAe,EAAE,SAAS,CAAC;IAC3B,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,CAAC,EAAE,qBAAqB,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,wGAAwG;IACxG,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6BAA6B,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,CAAC,EACD,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,SAAS,EACT,mBAA0B,EAC1B,eAA0B,EAC1B,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EACxB,qBAAqB,EACrB,6BAA0C,EAC1C,mBAA2B,EAC3B,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,WAAmB,GACpB,EAAE,wBAAwB,2CA6P1B"}
+{"version":3,"file":"ShellHeaderControls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShellHeaderControls.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAStD,QAAA,MAAM,2BAA2B,kuBAAyH,CAAC;AAa3J,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAEX,OAAO,EACL,mBAAmB,EACnB,2BAA2B,IAAI,4BAA4B,GAC5D,CAAC;AAEF,KAAK,qBAAqB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAKrD,UAAU,wBAAwB;IAChC,eAAe,EAAE,SAAS,CAAC;IAC3B,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,CAAC,EAAE,qBAAqB,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,wGAAwG;IACxG,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6BAA6B,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,CAAC,EACD,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,SAAS,EACT,mBAA0B,EAC1B,eAA0B,EAC1B,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EACxB,qBAAqB,EACrB,6BAA0C,EAC1C,mBAA2B,EAC3B,iBAAiB,EACjB,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,WAAmB,GACpB,EAAE,wBAAwB,2CA6P1B"}

package/components/shell/ShellHeaderControls.js

@@ -5,10 +5,10 @@ import { LanguageDropdown } from "../shared/LanguageDropdown.js";
 import { LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME } from "../shared/LanguageDropdown.helpers.js";
 import { ThemeToggle } from "../shared/ThemeToggle.js";
 import { Button } from "../ui/button.js";
-const SHELL_CONTROL_BASE_CLASSNAME = "border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt ring-1 ring-inset ring-white/6  supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
+const SHELL_CONTROL_BASE_CLASSNAME = "border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt    transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
 const SHELL_ICON_BUTTON_CLASSNAME = `inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-sm ${SHELL_CONTROL_BASE_CLASSNAME}`;
 const SHELL_EXPANDED_BUTTON_CLASSNAME = `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 ${SHELL_CONTROL_BASE_CLASSNAME}`;
-const SHELL_SEGMENTED_CONTROL_CLASSNAME = "inline-flex items-center gap-0.5 rounded-sm border border-border/45 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_52%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] p-0.5 ring-1 ring-inset ring-white/6 ";
+const SHELL_SEGMENTED_CONTROL_CLASSNAME = "inline-flex items-center gap-0.5 rounded-sm border border-border/45 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_52%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] p-0.5    ";
 const SHELL_SEGMENT_ACTIVE_CLASSNAME = "border-[color:color-mix(in_srgb,var(--accent)_34%,var(--border))] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--accent)_20%,var(--card)),color-mix(in_srgb,var(--accent)_10%,var(--bg)))] text-[color:color-mix(in_srgb,var(--text-strong)_78%,var(--accent)_22%)] ";
 const SHELL_SEGMENT_INACTIVE_CLASSNAME = "border border-transparent bg-transparent text-muted-strong hover:border-border/60 hover:bg-bg-hover/80 hover:text-txt";
 const HEADER_BUTTON_STYLE = {

package/components/shell/ShellOverlays.d.ts

@@ -1,4 +1,4 @@
-import type { ActionNotice } from "../../state/types";
+import type { ActionNotice } from "../../state/types.js";
 export declare function ShellOverlays({ actionNotice, }: {
     actionNotice: ActionNotice | null;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ShellOverlays.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShellOverlays.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA0CtD,wBAAgB,aAAa,CAAC,EAC5B,YAAY,GACb,EAAE;IACD,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC,2CA6DA"}
+{"version":3,"file":"ShellOverlays.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShellOverlays.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA6CtD,wBAAgB,aAAa,CAAC,EAC5B,YAAY,GACb,EAAE;IACD,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC,2CA0EA"}

package/components/shell/ShellOverlays.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { SHARE_TARGET_EVENT } from "../../events/index.js";
-import { useApp } from "../../state/useApp.js";
+import { useFrameBudgetMonitor, useLayoutShiftMonitor } from "../../hooks/index.js";
+import { PerfOverlay } from "../../perf/PerfOverlay.js";
+import { bootPerfHud, installPerfHudHotkey } from "../../perf/perf-hud-control.js";
+import { TOAST_TTL_MS } from "../../state/action-notice.js";
+import { useAppSelector } from "../../state/app-store.js";
 import { CompanionGlobalOverlay as GlobalEmoteOverlay } from "../companion/injected.js";
 import { Spinner } from "../ui/spinner.js";
 import { BugReportModal } from "./BugReportModal.js";
@@ -35,8 +39,19 @@ function formatSharePayload(payload) {
         .filter((name) => !!name && name.length > 0);
     return fileNames.length > 0 ? fileNames.join(", ") : "";
 }
+const selectTab = (s) => s.tab;
+const selectSetState = (s) => s.setState;
+const selectSetActionNotice = (s) => s.setActionNotice;
 export function ShellOverlays({ actionNotice, }) {
-    const { tab, setState, setActionNotice } = useApp();
+    const tab = useAppSelector(selectTab);
+    const setState = useAppSelector(selectSetState);
+    const setActionNotice = useAppSelector(selectSetActionNotice);
+    useLayoutShiftMonitor();
+    useFrameBudgetMonitor();
+    useEffect(() => {
+        bootPerfHud();
+        return installPerfHudHotkey();
+    }, []);
     useEffect(() => {
         const handlePayload = (payload) => {
             const text = formatSharePayload(payload);
@@ -47,7 +62,7 @@ export function ShellOverlays({ actionNotice, }) {
                 return;
             }
             const preview = text.length > 80 ? `${text.slice(0, 77)}...` : text;
-            setActionNotice(`Shared: ${preview}`, "info", 4000);
+            setActionNotice(`Shared: ${preview}`, "info", TOAST_TTL_MS.notification);
         };
         for (const queued of drainShareQueue()) {
             handlePayload(queued);
@@ -64,7 +79,7 @@ export function ShellOverlays({ actionNotice, }) {
             document.removeEventListener(SHARE_TARGET_EVENT, onShare);
         };
     }, [tab, setState, setActionNotice]);
-    return (_jsxs(_Fragment, { children: [_jsx(CommandPalette, {}), _jsx(RestartBanner, {}), _jsx(BugReportModal, {}), _jsx(ComputerUseApprovalOverlay, {}), _jsx(ShortcutsOverlay, {}), _jsx(GlobalEmoteOverlay, {}), actionNotice && (_jsxs("div", { className: `fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-2.5 rounded-sm text-sm font-medium z-[10000] flex items-center gap-2.5 max-w-[min(92vw,28rem)] ${actionNotice.tone === "error"
+    return (_jsxs(_Fragment, { children: [_jsx(PerfOverlay, {}), _jsx(CommandPalette, {}), _jsx(RestartBanner, {}), _jsx(BugReportModal, {}), _jsx(ComputerUseApprovalOverlay, {}), _jsx(ShortcutsOverlay, {}), _jsx(GlobalEmoteOverlay, {}), actionNotice && (_jsxs("div", { className: `fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-2.5 rounded-sm text-sm font-medium z-[10000] flex items-center gap-2.5 max-w-[min(92vw,28rem)] ${actionNotice.tone === "error"
                     ? "bg-danger text-white"
                     : actionNotice.tone === "success"
                         ? "bg-ok text-white"

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

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShortcutsOverlay.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,4CAiF/B"}
+{"version":3,"file":"ShortcutsOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ShortcutsOverlay.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,gBAAgB,4CAyF/B"}

package/components/shell/ShortcutsOverlay.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { reportShortcutFired } from "../../chat/useSlashCommandController.js";
 import { COMMON_SHORTCUTS } from "../../hooks/index.js";
-import { useApp } from "../../state/index.js";
+import { SHORTCUT_SHOW_KEYBOARD_SHORTCUTS } from "../../hooks/useKeyboardShortcuts.js";
+import { useTranslation } from "../../state/index.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog.js";
 function formatKey(shortcut) {
     const isMac = typeof navigator !== "undefined" && navigator.platform?.includes("Mac");
@@ -22,7 +24,7 @@ function formatKey(shortcut) {
     return parts.join(isMac ? "" : "+");
 }
 export function ShortcutsOverlay() {
-    const { t } = useApp();
+    const { t } = useTranslation();
     const [open, setOpen] = useState(false);
     useEffect(() => {
         const handler = (event) => {
@@ -32,7 +34,12 @@ export function ShortcutsOverlay() {
                     return;
                 }
                 event.preventDefault();
-                setOpen((value) => !value);
+                setOpen((value) => {
+                    if (!value) {
+                        reportShortcutFired(SHORTCUT_SHOW_KEYBOARD_SHORTCUTS, "shortcuts-overlay");
+                    }
+                    return !value;
+                });
             }
             if (event.key === "Escape" && open) {
                 event.preventDefault();

package/components/shell/SlashCommandMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type SlashExecution } from "../../chat/slash-menu";
-import type { SlashCommandController } from "../../chat/useSlashCommandController";
+import { type SlashExecution } from "../../chat/slash-menu.js";
+import type { SlashCommandController } from "../../chat/useSlashCommandController.js";
 export interface SlashMenuItem {
     id: string;
     /** The bold token: a command alias (e.g. `/settings`) or an arg value. */

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

@@ -1 +1 @@
-{"version":3,"file":"SlashCommandMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SlashCommandMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EASL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAKnF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;IACjC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC5C,oEAAoE;IACpE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACpD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,sBAAsB,GACjC,cAAc,CAqJhB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,+CAA+C;IAC/C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgG3B"}
+{"version":3,"file":"SlashCommandMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SlashCommandMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EASL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAKnF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;IACjC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC5C,oEAAoE;IACpE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACpD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,sBAAsB,GACjC,cAAc,CAqJhB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,+CAA+C;IAC/C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA+F3B"}

package/components/shell/SlashCommandMenu.js

@@ -136,11 +136,11 @@ export function SlashCommandMenu({ state, onPick, loading, }) {
     const listboxId = "slash-command-listbox";
     if (!state.open) {
         if (loading) {
-            return (_jsx("div", { className: cn("absolute bottom-full left-0 right-0 z-10 mb-2 rounded-2xl border border-white/12 bg-black/70 px-4 py-3 text-xs text-white/55 backdrop-blur-xl", FLOAT_SHADOW), role: "status", "data-testid": "slash-menu-loading", children: "loading commands\u2026" }));
+            return (_jsx("div", { className: cn("absolute bottom-full left-0 right-0 z-10 mb-2 rounded-2xl border border-white/12 bg-black/85 px-4 py-3 text-xs text-white/55", FLOAT_SHADOW), role: "status", "data-testid": "slash-menu-loading", children: "loading commands\u2026" }));
         }
         return null;
     }
-    return (_jsxs("div", { id: listboxId, role: "listbox", "aria-label": "Slash commands", "data-testid": "slash-command-menu", className: cn("absolute bottom-full left-0 right-0 z-10 mb-2 max-h-[min(46vh,22rem)] overflow-y-auto", "rounded-2xl border border-white/14 bg-black/70 py-1.5 backdrop-blur-xl", "shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_18px_50px_-16px_rgba(0,0,0,0.7)]", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"), children: [_jsx("div", { className: cn("px-3.5 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wider text-white/40", FLOAT_SHADOW), children: state.headerLabel }), state.items.map((item, index) => (_jsxs("button", { type: "button", id: `slash-option-${item.id}`, role: "option", "aria-selected": index === state.activeIndex, "data-testid": `slash-option-${index}`, "data-active": index === state.activeIndex ? "true" : undefined, 
+    return (_jsxs("div", { id: listboxId, role: "listbox", "aria-label": "Slash commands", "data-testid": "slash-command-menu", className: cn("absolute bottom-full left-0 right-0 z-10 mb-2 max-h-[min(46vh,22rem)] overflow-y-auto", "rounded-2xl border border-white/14 bg-black/85 py-1.5", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"), children: [_jsx("div", { className: cn("px-3.5 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wider text-white/40", FLOAT_SHADOW), children: state.headerLabel }), state.items.map((item, index) => (_jsxs("button", { type: "button", id: `slash-option-${item.id}`, role: "option", "aria-selected": index === state.activeIndex, "data-testid": `slash-option-${index}`, "data-active": index === state.activeIndex ? "true" : undefined, 
                 // Mouse-enter highlights; pointer-down (not click) so the input never
                 // loses focus to the button before we handle the pick.
                 onMouseEnter: () => state.setActiveIndex(index), onPointerDown: (e) => {

package/components/shell/StartupFailureView.d.ts

@@ -1,4 +1,4 @@
-import type { StartupErrorState } from "../../state";
+import type { StartupErrorState } from "../../state/index.js";
 interface StartupFailureViewProps {
     error: StartupErrorState;
     onRetry: () => void;

package/components/shell/StartupFailureView.js

@@ -3,7 +3,7 @@ import { AlertCircle } from "lucide-react";
 import { useBranding } from "../../config/branding.js";
 import { useOptionalBugReport } from "../../hooks/index.js";
 import { startFreshFirstRunReload } from "../../platform/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Card, CardContent, CardHeader } from "../ui/card.js";
 function startupReasonLabel(t, reason) {
@@ -35,7 +35,7 @@ function startupReasonLabel(t, reason) {
     }
 }
 const SCREEN_SHELL_CLASS = "relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg px-4 py-6 font-body text-txt sm:px-6";
-const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[720px] overflow-hidden border border-border/60 bg-card/95 shadow-lg";
+const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[720px] overflow-hidden border border-border/60 bg-card/95";
 function buildStartupBugReportDraft(reasonLabel, error) {
     const logs = [
         `Reason: ${error.reason}`,
@@ -55,7 +55,7 @@ function buildStartupBugReportDraft(reasonLabel, error) {
     };
 }
 export function StartupFailureView({ error, onRetry, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const branding = useBranding();
     const bugReport = useOptionalBugReport();
     const reasonLabel = startupReasonLabel(t, error.reason);

package/components/shell/StartupShell.d.ts

@@ -1,3 +1,3 @@
-import type { StartupShellProps } from "./startup-shell-types";
+import type { StartupShellProps } from "./startup-shell-types.js";
 export declare function StartupShell({ view, firstRun, onRetry }: StartupShellProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=StartupShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StartupShell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/StartupShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAoB/D,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,kDA0B1E"}
+{"version":3,"file":"StartupShell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/StartupShell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAyB/D,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,kDAgC1E"}

package/components/shell/StartupShell.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { getBootConfig } from "../../config/boot-config-store.js";
+import { markStartup } from "../../state/startup-telemetry.js";
 import { ElizaMark } from "../brand/eliza-mark.js";
 import { BootstrapStep } from "../setup/BootstrapStep.js";
 import { PairingView } from "./PairingView.js";
 import { StartupFailureView } from "./StartupFailureView.js";
 const FONT = "'Poppins', Arial, system-ui, sans-serif";
-// Brand surface for the startup splash: the active theme's accent (the
-// elizaOS accent by default) with its readable foreground. Whitelabel seam —
-// no hardcoded brand color.
-const BRAND_SURFACE = "bg-[var(--accent,#FF5800)] text-[var(--accent-foreground,#fff)]";
+// Launch surface for the startup splash + loading: it must match the default
+// HOME background orange (#ef5a1f = DEFAULT_BACKGROUND_COLOR, the home
+// ShaderBackground) so boot/launch flows seamlessly into the home with no
+// orange→orange flash (#9565). NOTE: this is NOT `--bg` — the theme background
+// is white/black (`:root`/`.dark`) or the brand orange #ff8a24 (`.theme-app`),
+// none of which is the home shader color — so a dedicated launch token is used.
+// Whitelabel seam: hosts override `--launch-bg` / `--accent-foreground`; the
+// literal fallbacks are the elizaOS defaults.
+const LAUNCH_SURFACE = "bg-[var(--launch-bg,#ef5a1f)] text-[var(--accent-foreground,#fff)]";
 function brandName() {
     return getBootConfig().branding?.appName ?? "elizaOS";
 }
@@ -18,6 +25,11 @@ function BrandMark(props) {
     return _jsx(Mark, { ...props });
 }
 export function StartupShell({ view, firstRun, onRetry }) {
+    // Renderer cold-start checkpoint (#9565): the startup front door has painted.
+    // markStartup dedupes by name, so this records only the first paint.
+    useEffect(() => {
+        markStartup("startup-shell:first-paint", { view: view.kind });
+    }, [view.kind]);
     if (view.kind === "error") {
         return _jsx(StartupFailureView, { error: view.error, onRetry: onRetry });
     }
@@ -36,10 +48,10 @@ export function StartupShell({ view, firstRun, onRetry }) {
     return _jsx(StartupLoading, { phase: view.phase, status: view.status });
 }
 function StartupFirstRunBackground({ children }) {
-    return (_jsx("div", { "data-testid": "startup-first-run-background", className: `fixed inset-0 overflow-hidden ${BRAND_SURFACE}`, style: { fontFamily: FONT }, children: children }));
+    return (_jsx("div", { "data-testid": "startup-first-run-background", className: `fixed inset-0 overflow-hidden ${LAUNCH_SURFACE}`, style: { fontFamily: FONT }, children: children }));
 }
 function StartupLoading(props) {
-    return (_jsx("div", { "data-testid": "startup-shell-loading", "data-startup-phase": props.phase, role: "status", "aria-live": "polite", "aria-busy": "true", className: `fixed inset-0 flex items-center justify-center overflow-hidden ${BRAND_SURFACE}`, style: { fontFamily: FONT }, children: _jsxs("div", { className: "relative z-10 flex w-full max-w-[24rem] flex-col items-center gap-5 px-6 text-center", children: [_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx(BrandMark, { className: "h-12 w-12" }), _jsx("span", { className: "text-4xl font-medium leading-none tracking-normal", children: brandName() })] }), _jsx("p", { style: { fontFamily: FONT }, className: "min-h-5 text-sm opacity-80 animate-pulse motion-reduce:animate-none", children: props.status })] }) }));
+    return (_jsx("div", { "data-testid": "startup-shell-loading", "data-startup-phase": props.phase, role: "status", "aria-live": "polite", "aria-busy": "true", className: `fixed inset-0 flex items-center justify-center overflow-hidden ${LAUNCH_SURFACE}`, style: { fontFamily: FONT }, children: _jsxs("div", { className: "relative z-10 flex w-full max-w-[24rem] flex-col items-center gap-5 px-6 text-center", children: [_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx(BrandMark, { className: "h-12 w-12" }), _jsx("span", { className: "text-4xl font-medium leading-none tracking-normal", children: brandName() })] }), _jsx("p", { style: { fontFamily: FONT }, className: "min-h-5 text-sm opacity-80 animate-pulse motion-reduce:animate-none", children: props.status })] }) }));
 }
 function BootstrapGateShell({ children }) {
     return (_jsx("div", { className: "relative flex min-h-full w-full flex-col bg-[#F7F6F4] text-[#1b1b1b]", children: _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center px-4 pb-[max(1.5rem,var(--safe-area-bottom,0px))] pt-[calc(var(--safe-area-top,0px)_+_3.75rem)] sm:px-6 md:px-8", children: _jsx("div", { className: "flex w-full max-w-[32rem] flex-col items-center gap-4", children: children }) }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"SystemWarningBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SystemWarningBanner.tsx"],"names":[],"mappings":"AASA;;;GAGG;AACH,wBAAgB,mBAAmB,mDA2DlC"}
+{"version":3,"file":"SystemWarningBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SystemWarningBanner.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAgB,mBAAmB,mDA4DlC"}

package/components/shell/SystemWarningBanner.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
+import { TOAST_TTL_MS } from "../../state/action-notice.js";
 import { Button } from "../ui/button.js";
 // z-[9998] mirrors Z_SYSTEM_BANNER in ../../lib/floating-layers.ts.
 // Kept as a literal so Tailwind v4's source scanner emits the utility.
-const AUTO_DISMISS_MS = 20_000;
+const AUTO_DISMISS_MS = TOAST_TTL_MS.systemWarning;
 /**
  * Renders yellow warning banners for system-level warnings
  * broadcast via WebSocket `system-warning` events.
  */
 export function SystemWarningBanner() {
-    const { systemWarnings, dismissSystemWarning } = useApp();
+    const systemWarnings = useAppSelector((s) => s.systemWarnings);
+    const dismissSystemWarning = useAppSelector((s) => s.dismissSystemWarning);
     const timersRef = useRef(new Map());
     useEffect(() => {
         if (!systemWarnings?.length)

package/components/shell/TopicChipsBar.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+/**
+ * Horizontal topic chips above the transcript (#8928). Shows the channel's
+ * current topics (derived from the per-message Stage-1 topic tags). Tapping a
+ * chip scrolls its first message into view. Glass styling for the dark overlay;
+ * neutral resting → neutral-with-opacity hover (no orange, no blue).
+ */
+export declare function TopicChipsBar({ topics, activeTopic, onSelectTopic, className, }: {
+    topics: readonly string[];
+    activeTopic?: string | null;
+    onSelectTopic?: (topic: string) => void;
+    className?: string;
+}): React.JSX.Element | null;
+//# sourceMappingURL=TopicChipsBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopicChipsBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/TopicChipsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,aAAa,EACb,SAAS,GACV,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAiC3B"}

package/components/shell/TopicChipsBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+/**
+ * Horizontal topic chips above the transcript (#8928). Shows the channel's
+ * current topics (derived from the per-message Stage-1 topic tags). Tapping a
+ * chip scrolls its first message into view. Glass styling for the dark overlay;
+ * neutral resting → neutral-with-opacity hover (no orange, no blue).
+ */
+export function TopicChipsBar({ topics, activeTopic, onSelectTopic, className, }) {
+    if (topics.length === 0)
+        return null;
+    return (_jsx("div", { "data-testid": "topic-chips-bar", className: cn("flex shrink-0 items-center gap-1.5 overflow-x-auto pb-2 pt-1", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className), children: topics.map((topic) => {
+            const active = activeTopic != null && activeTopic === topic;
+            return (_jsx("button", { type: "button", "data-testid": `topic-chip-${topic}`, onClick: () => onSelectTopic?.(topic), className: cn("shrink-0 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors", "  ", active
+                    ? "border-white/40 bg-white/85 text-black"
+                    : "border-white/15 bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"), children: topic }, topic));
+        }) }));
+}

package/components/shell/TopicGroup.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+/**
+ * A collapsible topic cluster in the transcript (#8928).
+ *
+ * The group header is gesture-driven — NO visible buttons: tap toggles, a flick
+ * UP collapses, a flick DOWN expands. Collapsed, it shows a single pill
+ * ("● deployment — 12 messages"); expanded, a quiet topic divider above its
+ * messages. An untitled segment (no topic) renders its children bare.
+ *
+ * Split so the gesture hook lives at the top of {@link TitledTopicGroup} and is
+ * never called conditionally (an untitled run takes the early branch here, which
+ * runs no hooks).
+ */
+export declare function TopicGroup({ topic, count, collapsed, onCollapsedChange, children, }: {
+    topic: string | null;
+    count: number;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=TopicGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopicGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/TopicGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAepB"}