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

package/components/setup/BootstrapStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BootstrapStep.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/BootstrapStep.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA4DtE,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAC;CAClE;AAmCD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA4N1E"}
+{"version":3,"file":"BootstrapStep.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/BootstrapStep.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA4DtE,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAC;CAClE;AAmCD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA2N1E"}

package/components/setup/BootstrapStep.js

@@ -170,8 +170,7 @@ export function BootstrapStep({ onAdvance, exchangeFn }) {
                             if (submitState.phase === "error") {
                                 setSubmitState({ phase: "idle" });
                             }
-                        }, disabled: isSubmitting, "aria-invalid": invalid, "aria-describedby": describedBy, className: cn(setupInputClassName, invalid &&
-                            "border-[var(--danger)] focus-visible:border-[var(--danger)]") })) }) }), _jsx("div", { className: cn("rounded-sm px-4 py-3", "border border-[rgba(240,185,11,0.18)] bg-[rgba(240,185,11,0.07)]"), children: _jsxs("p", { className: cn(setupHelperTextClassName, "leading-relaxed"), style: setupBodyTextShadowStyle, children: [_jsx("span", { className: setupReadableTextMutedClassName, style: { fontFamily: MONO_FONT }, children: t("bootstrapstep.whereToGet", {
+                        }, disabled: isSubmitting, "aria-invalid": invalid, "aria-describedby": describedBy, className: cn(setupInputClassName, invalid && "border-[var(--danger)] ") })) }) }), _jsx("div", { className: cn("rounded-sm px-4 py-3", "border border-[rgba(240,185,11,0.18)] bg-[rgba(240,185,11,0.07)]"), children: _jsxs("p", { className: cn(setupHelperTextClassName, "leading-relaxed"), style: setupBodyTextShadowStyle, children: [_jsx("span", { className: setupReadableTextMutedClassName, style: { fontFamily: MONO_FONT }, children: t("bootstrapstep.whereToGet", {
                                 defaultValue: "Where do I get this?",
                             }) }), " ", _jsxs("span", { className: setupReadableTextFaintClassName, children: [t("bootstrapstep.whereToGetDetail", {
                                     defaultValue: "Open your Eliza Cloud dashboard, select this container, and copy the token shown under “Bootstrap token”. It is valid for 24 hours and can only be used once.",

package/components/setup/setup-classes.d.ts

@@ -7,13 +7,13 @@ export declare const setupReadableTextFaintClassName = "text-[var(--first-run-te
 export declare const setupHelperTextClassName = "text-xs leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
 export declare const setupFieldLabelClassName = "text-xs font-semibold uppercase tracking-[0.14em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
 export declare const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
-export declare const setupInputClassName = "h-12 w-full rounded-sm px-4 text-left text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)] transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 bg-[var(--first-run-input-bg)]";
+export declare const setupInputClassName = "h-12 w-full rounded-sm px-4 text-left text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)] transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)]    bg-[var(--first-run-input-bg)]";
 export declare const setupEyebrowClass = "text-center text-xs font-semibold uppercase tracking-[0.3em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
 export declare const setupTitleClass = "text-center text-xl font-light leading-[1.4] text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
 export declare const setupDescriptionClass = "mx-auto max-w-[36ch] text-center text-sm leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)] rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
 export declare const setupHeaderBlockClass = "mb-5 max-md:mb-4";
 export declare const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
-export declare const setupSecondaryActionClass = "inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupSecondaryActionClass = "inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)]      disabled:pointer-events-none disabled:opacity-50 text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
 export declare const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
 export declare const setupTextShadowStyle: {
     readonly textShadow: "var(--first-run-text-shadow-strong)";

package/components/setup/setup-classes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-classes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-classes.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,yCAAyC,CAAC;AAChF,eAAO,MAAM,gCAAgC,mJACqG,CAAC;AACnJ,eAAO,MAAM,iCAAiC,4FAC6C,CAAC;AAC5F,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,gCAAgC,yFAC2C,CAAC;AACzF,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,wBAAwB,gHAA+D,CAAC;AACrG,eAAO,MAAM,wBAAwB,0IAAyF,CAAC;AAC/H,eAAO,MAAM,yBAAyB,oEAC6B,CAAC;AAEpE,eAAO,MAAM,mBAAmB,qXAAiU,CAAC;AAElW,eAAO,MAAM,iBAAiB,qJAAoG,CAAC;AACnI,eAAO,MAAM,eAAe,gMAAqF,CAAC;AAClH,eAAO,MAAM,qBAAqB,iNAA6H,CAAC;AAChK,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AACxD,eAAO,MAAM,gBAAgB,0EAC4C,CAAC;AAC1E,eAAO,MAAM,yBAAyB,soBAAqlB,CAAC;AAC5nB,eAAO,MAAM,uBAAuB,+WAC0U,CAAC;AAE/W,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AACX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AACX,eAAO,MAAM,iCAAiC;;CAEpC,CAAC"}
+{"version":3,"file":"setup-classes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-classes.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,yCAAyC,CAAC;AAChF,eAAO,MAAM,gCAAgC,mJACqG,CAAC;AACnJ,eAAO,MAAM,iCAAiC,4FAC6C,CAAC;AAC5F,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,gCAAgC,yFAC2C,CAAC;AACzF,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,wBAAwB,gHAA+D,CAAC;AACrG,eAAO,MAAM,wBAAwB,0IAAyF,CAAC;AAC/H,eAAO,MAAM,yBAAyB,oEAC6B,CAAC;AAEpE,eAAO,MAAM,mBAAmB,4QAAwN,CAAC;AAEzP,eAAO,MAAM,iBAAiB,qJAAoG,CAAC;AACnI,eAAO,MAAM,eAAe,gMAAqF,CAAC;AAClH,eAAO,MAAM,qBAAqB,iNAA6H,CAAC;AAChK,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AACxD,eAAO,MAAM,gBAAgB,0EAC4C,CAAC;AAC1E,eAAO,MAAM,yBAAyB,8dAA6a,CAAC;AACpd,eAAO,MAAM,uBAAuB,+WAC0U,CAAC;AAE/W,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AACX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AACX,eAAO,MAAM,iCAAiC;;CAEpC,CAAC"}

package/components/setup/setup-classes.js

@@ -12,13 +12,13 @@ export const setupHelperTextClassName = `text-xs leading-relaxed ${setupReadable
 export const setupFieldLabelClassName = `text-xs font-semibold uppercase tracking-[0.14em] ${setupReadableTextMutedClassName}`;
 export const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
 const setupInputSurfaceClassName = "bg-[var(--first-run-input-bg)]";
-export const setupInputClassName = `h-12 w-full rounded-sm px-4 text-left ${setupReadableTextPrimaryClassName} transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 ${setupInputSurfaceClassName}`;
+export const setupInputClassName = `h-12 w-full rounded-sm px-4 text-left ${setupReadableTextPrimaryClassName} transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)]    ${setupInputSurfaceClassName}`;
 export const setupEyebrowClass = `text-center text-xs font-semibold uppercase tracking-[0.3em] ${setupReadableTextMutedClassName}`;
 export const setupTitleClass = `text-center text-xl font-light leading-[1.4] ${setupReadableTextStrongClassName}`;
 export const setupDescriptionClass = `mx-auto max-w-[36ch] text-center text-sm leading-relaxed ${setupReadableTextMutedClassName} ${setupTextSupportClassName}`;
 export const setupHeaderBlockClass = "mb-5 max-md:mb-4";
 export const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
-export const setupSecondaryActionClass = `inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 ${setupReadableTextMutedClassName}`;
+export const setupSecondaryActionClass = `inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)]      disabled:pointer-events-none disabled:opacity-50 ${setupReadableTextMutedClassName}`;
 export const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
 export const setupTextShadowStyle = {
     textShadow: "var(--first-run-text-shadow-strong)",

package/components/shared/AppPageSidebar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { SidebarProps } from "../composites/sidebar/sidebar-types";
+import type { SidebarProps } from "../composites/sidebar/sidebar-types.js";
 export interface AppPageSidebarProps extends Omit<SidebarProps, "defaultCollapsed" | "footer" | "width"> {
     bottomAction?: React.ReactNode;
     defaultCollapsed?: boolean;

package/components/shared/AppPageSidebar.js

@@ -8,7 +8,7 @@ const DEFAULT_PAGE_SIDEBAR_MIN_WIDTH = 200;
 const DEFAULT_PAGE_SIDEBAR_MAX_WIDTH = 520;
 const SIDEBAR_SYNC_STORAGE_PREFIX = "elizaos:ui:sidebar:";
 const PAGE_SIDEBAR_WIDTH_STORAGE_PREFIX = "eliza:page-sidebar:";
-const PAGE_SIDEBAR_ROOT_CLASS = "!mt-0 !h-full !bg-none !bg-transparent !rounded-none !border-0 !border-r !border-r-border/30 !shadow-none !backdrop-blur-none !ring-0";
+const PAGE_SIDEBAR_ROOT_CLASS = "!mt-0 !h-full !bg-none !bg-transparent !rounded-none !border-0 !border-r !border-r-border/30 !shadow-none ";
 const PAGE_SIDEBAR_FOOTER_CLASS = "!justify-stretch !px-2 !pt-1.5 !pb-2";
 const PAGE_SIDEBAR_COLLAPSE_BUTTON_CLASS = "!border-0 !bg-transparent !shadow-none hover:!bg-transparent hover:!text-txt";
 function joinClassNames(...values) {

package/components/shared/CollapsibleSidebarSection.js

@@ -4,7 +4,7 @@ import * as React from "react";
 export function CollapsibleSidebarSection({ addLabel, bodyClassName, children, collapsed, emptyClassName, emptyLabel, hoverActionsOnDesktop = true, icon, indicator, label, onAdd, onToggleCollapsed, sectionKey, testIdPrefix = "sidebar-section", }) {
     const Chevron = collapsed ? ChevronRight : ChevronDown;
     const hoverHideClass = hoverActionsOnDesktop
-        ? " opacity-0 transition-opacity group-hover/section:opacity-100 focus-visible:opacity-100"
+        ? " opacity-0 transition-opacity group-hover/section:opacity-100 "
         : "";
     const bodyId = `${testIdPrefix}-body-${sectionKey}`;
     const hasChildren = React.Children.count(children) > 0;

package/components/shared/LanguageDropdown.d.ts

@@ -1,4 +1,4 @@
-import type { UiLanguage } from "../../i18n/messages";
+import type { UiLanguage } from "../../i18n/messages.js";
 /** Minimal translator function type. Receive key, return string. */
 export type TranslatorFn = (key: string) => string;
 export interface LanguageDropdownProps {

package/components/shared/LanguageDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageDropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/LanguageDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUtD,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,CAAC,EACD,SAAS,EACT,gBAAgB,EAChB,OAAkB,EAClB,aAA4B,GAC7B,EAAE,qBAAqB,2CAmFvB"}
+{"version":3,"file":"LanguageDropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/LanguageDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUtD,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,CAAC,EACD,SAAS,EACT,gBAAgB,EAChB,OAAkB,EAClB,aAA4B,GAC7B,EAAE,qBAAqB,2CAgFvB"}

package/components/shared/LanguageDropdown.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { UiLanguage } from "../../i18n/messages";
+import type { UiLanguage } from "../../i18n/messages.js";
 /** Language metadata with flag emoji and native label. */
 export declare const LANGUAGES: {
     id: UiLanguage;

package/components/shared/LanguageDropdown.js

@@ -8,19 +8,16 @@ export function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, trig
     const [open, setOpen] = useState(false);
     const current = LANGUAGES.find((l) => l.id === uiLanguage) ?? LANGUAGES[0];
     const triggerClassNameResolved = variant === "titlebar"
-        ? `inline-flex h-[2.375rem] min-h-[2.375rem] min-w-0 items-center justify-center rounded-sm border border-transparent !bg-transparent px-2.5 py-0 text-[11px] font-medium text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent data-[state=open]:!bg-transparent ${open ? "text-accent" : ""} ${triggerClassName ?? ""}`
-        : `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 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 backdrop-blur-xl 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 gap-1.5 text-xs font-medium ${open ? "border-accent/80 bg-accent/12 text-txt " : ""} ${triggerClassName ?? ""}`;
+        ? `inline-flex h-[2.375rem] min-h-[2.375rem] min-w-0 items-center justify-center rounded-sm border border-transparent !bg-transparent px-2.5 py-0 text-[11px] font-medium text-muted shadow-none  transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent data-[state=open]:!bg-transparent ${open ? "text-accent" : ""} ${triggerClassName ?? ""}`
+        : `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-sm px-3.5 py-0 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 gap-1.5 text-xs font-medium ${open ? "border-accent/80 bg-accent/12 text-txt " : ""} ${triggerClassName ?? ""}`;
     const contentClassName = variant === "titlebar"
-        ? "w-40 overflow-hidden rounded-sm border border-border/70 bg-card/96 py-1 backdrop-blur-xl"
-        : "w-40 overflow-hidden rounded-sm border border-border/60 bg-card/95 py-1 backdrop-blur-xl";
+        ? "w-40 overflow-hidden rounded-sm border border-border/70 bg-card/96 py-1"
+        : "w-40 overflow-hidden rounded-sm border border-border/60 bg-card/95 py-1";
     return (_jsx("div", { className: `relative inline-flex shrink-0 ${className ?? ""}`, "data-testid": "language-dropdown", "data-no-camera-drag": "true", children: _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: triggerClassNameResolved, onPointerDown: (event) => event.stopPropagation(), "aria-label": `${t?.("settings.language") ?? "Language"}: ${current.label ?? current.id}`, "data-testid": "language-dropdown-trigger", children: [_jsx("span", { className: "text-sm leading-none", children: current.flag }), _jsx("span", { className: variant === "titlebar"
                                     ? "uppercase tracking-[0.14em] opacity-80"
                                     : "hidden sm:inline uppercase tracking-widest opacity-80", children: current.id }), _jsx(ChevronDown, { className: `w-3.5 h-3.5 opacity-60 transition-transform ${open ? "rotate-180" : ""}` })] }) }), _jsx(DropdownMenuContent, { align: "end", side: menuPlacement === "top-end" ? "top" : "bottom", sideOffset: 4, className: contentClassName, style: variant === "companion"
                         ? {
                             zIndex: 10001,
-                            backdropFilter: "blur(24px)",
-                            WebkitBackdropFilter: "blur(24px)",
-                            boxShadow: "var(--)",
                         }
                         : undefined, "data-no-camera-drag": "true", children: LANGUAGES.map((lang) => (_jsxs(DropdownMenuItem, { className: `flex min-h-[40px] items-center justify-between px-3 py-2 text-sm transition-colors cursor-pointer ${lang.id === uiLanguage ? "bg-accent/10 text-txt font-medium" : "text-txt"}`, onPointerDown: (event) => event.stopPropagation(), onSelect: () => {
                             setUiLanguage(lang.id);

package/components/shared/ThemeToggle.d.ts

@@ -1,4 +1,4 @@
-import type { UiTheme } from "../../state/persistence";
+import type { UiTheme } from "../../state/persistence.js";
 /** Minimal translator function type. */
 export type ThemeTranslatorFn = (key: string) => string;
 export interface ThemeToggleProps {

package/components/shared/ThemeToggle.js

@@ -8,8 +8,8 @@ export function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _v
         setUiTheme(isDark ? "light" : "dark");
     }, [isDark, setUiTheme]);
     const resolvedClassName = _variant === "titlebar"
-        ? `inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] items-center justify-center rounded-sm border border-transparent !bg-transparent text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent ${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 backdrop-blur-xl 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 text-sm leading-none ${className ?? ""}`;
+        ? `inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] items-center justify-center rounded-sm border border-transparent !bg-transparent text-muted shadow-none  transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent ${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 text-sm leading-none ${className ?? ""}`;
     return (_jsx(Button, { size: "icon", variant: "outline", "aria-label": _t
             ? _t(isDark ? "aria.switchToLight" : "aria.switchToDark")
             : isDark

package/components/shared/confirm-delete-control.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 export function ConfirmDeleteControl({ onConfirm, disabled = false, triggerLabel, confirmLabel, cancelLabel, busyLabel, promptText, triggerClassName, confirmClassName, cancelClassName, promptClassName = "text-xs-tight text-[#e74c3c] ml-1", triggerTitle, triggerVariant = "destructive", }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [confirming, setConfirming] = useState(false);
     const resolvedTriggerLabel = triggerLabel ?? t("common.delete", { defaultValue: "Delete" });
     const resolvedConfirmLabel = confirmLabel ?? t("common.confirm", { defaultValue: "Confirm" });

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ActionBanner.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,YAAY,mDA8C3B"}
+{"version":3,"file":"ActionBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ActionBanner.tsx"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,YAAY,mDA+C3B"}

package/components/shell/ActionBanner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } 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.
@@ -12,7 +12,8 @@ import { Button } from "../ui/button.js";
  * sole consumer for now.
  */
 export function ActionBanner() {
-    const { actionBanner, dismissActionBanner } = useApp();
+    const actionBanner = useAppSelector((s) => s.actionBanner);
+    const dismissActionBanner = useAppSelector((s) => s.dismissActionBanner);
     if (!actionBanner)
         return null;
     const { text, actionLabel, onAction } = actionBanner;

package/components/shell/AssistantOverlay.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 AssistantOverlayProps {
     phase: ShellPhase;
     onClose: () => void;

package/components/shell/AssistantOverlay.js

@@ -103,11 +103,11 @@ export function AssistantOverlay({ phase, onClose, children, }) {
             "h-[80vh]",
             // Surface
             "rounded-t-3xl sm:rounded-sm",
-            "bg-bg/95 backdrop-blur-xl",
+            "bg-bg/95",
             "border border-border/40",
             "",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
+            "    ",
             // Enter motion (skipped under prefers-reduced-motion)
             "motion-safe:animate-[shell-overlay-in_220ms_ease-out]",
-        ].join(" "), children: [_jsx("button", { type: "button", "aria-label": "Close assistant", onClick: onClose, className: "absolute right-2 top-2 z-10 grid h-8 w-8 place-items-center rounded-full bg-card/60 text-muted transition-colors hover:text-txt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg", children: _jsx(X, { "aria-hidden": "true", className: "h-4 w-4" }) }), children] }));
+        ].join(" "), children: [_jsx("button", { type: "button", "aria-label": "Close assistant", onClick: onClose, className: "absolute right-2 top-2 z-10 grid h-8 w-8 place-items-center rounded-full bg-card/60 text-muted transition-colors hover:text-txt     ", children: _jsx(X, { "aria-hidden": "true", className: "h-4 w-4" }) }), children] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BugReportModal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/BugReportModal.tsx"],"names":[],"mappings":"AA2FA,wBAAgB,cAAc,mDAupB7B"}
+{"version":3,"file":"BugReportModal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/BugReportModal.tsx"],"names":[],"mappings":"AA2FA,wBAAgB,cAAc,mDAwpB7B"}

package/components/shell/BugReportModal.js

@@ -5,7 +5,7 @@ import { client } from "../../api/index.js";
 import { isElectrobunRuntime } from "../../bridge/index.js";
 import { useBranding } from "../../config/branding.js";
 import { useBugReport } from "../../hooks/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { createDesktopBugReportBundle, formatDesktopBugReportDiagnostics, loadDesktopBugReportDiagnostics, openDesktopLogsFolder, } from "../../utils/desktop-bug-report.js";
 import { Banner } from "../ui/banner.js";
@@ -27,8 +27,8 @@ const EMPTY_FORM = {
     logs: "",
 };
 const modalContentClassName = "w-[min(calc(100%_-_2rem),42rem)] max-h-[min(88vh,52rem)] overflow-hidden rounded-sm border border-border/70 bg-card/96 p-0 ";
-const modalInputClassName = "h-11 rounded-sm border-border bg-bg-hover text-txt placeholder:text-muted/70 focus-visible:ring-accent/30";
-const modalTextareaClassName = "min-h-[88px] rounded-sm border-border bg-bg-hover px-4 py-3 text-sm text-txt placeholder:text-muted/70 focus-visible:ring-accent/30";
+const modalInputClassName = "h-11 rounded-sm border-border bg-bg-hover text-txt placeholder:text-muted/70 ";
+const modalTextareaClassName = "min-h-[88px] rounded-sm border-border bg-bg-hover px-4 py-3 text-sm text-txt placeholder:text-muted/70 ";
 const subtleMonoDescriptionClassName = "font-mono text-xs-tight text-muted";
 function environmentOptionLabel(t, option) {
     if (option === "Other") {
@@ -48,7 +48,8 @@ function normalizeHttpsResultUrl(url) {
     }
 }
 export function BugReportModal() {
-    const { copyToClipboard, t } = useApp();
+    const copyToClipboard = useAppSelector((s) => s.copyToClipboard);
+    const t = useAppSelector((s) => s.t);
     const desktopRuntime = isElectrobunRuntime();
     const branding = useBranding();
     const { isOpen, draft, close } = useBugReport();
@@ -326,7 +327,7 @@ export function BugReportModal() {
                     close();
             }, children: _jsxs(DialogContent, { className: "w-[min(calc(100%_-_2rem),28rem)] rounded-sm border border-border/70 bg-card/96 p-0 ", children: [_jsxs(DialogHeader, { className: "px-5 py-4 text-left", children: [_jsx(DialogTitle, { ref: (node) => {
                                     successHeadingRef.current = node;
-                                }, tabIndex: -1, className: "text-sm font-bold text-txt focus:outline-none", children: t("bugreportmodal.BugReportSubmitted") }), _jsx(DialogDescription, { className: "text-sm leading-relaxed text-muted", children: t("bugreportmodal.YourBugReportHas") })] }), _jsxs("div", { className: "space-y-3 px-5 py-6 text-center", children: [_jsx("p", { className: "text-sm text-txt", children: acceptedWithoutUrl
+                                }, tabIndex: -1, className: "text-sm font-bold text-txt ", children: t("bugreportmodal.BugReportSubmitted") }), _jsx(DialogDescription, { className: "text-sm leading-relaxed text-muted", children: t("bugreportmodal.YourBugReportHas") })] }), _jsxs("div", { className: "space-y-3 px-5 py-6 text-center", children: [_jsx("p", { className: "text-sm text-txt", children: acceptedWithoutUrl
                                     ? "Your report was received."
                                     : t("bugreportmodal.YourBugReportHas") }), resultUrl ? (_jsx("a", { href: resultUrl, target: "_blank", rel: "noopener noreferrer", className: "break-all text-sm font-medium text-accent underline-offset-4 hover:underline", children: resultUrl })) : (_jsx("p", { className: "text-xs text-muted", children: t("bugreportmodal.DiagnosticsSharedSuccessfully", {
                                     defaultValue: "Diagnostics were shared successfully.",

package/components/shell/ChatSurface.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ShellMessage } from "./shell-state";
+import type { ShellMessage } from "./shell-state.js";
 export interface ChatSurfaceProps {
     messages: readonly ShellMessage[];
     onSend: (text: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ChatSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,iBAAiB,GAClB,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwHtC"}
+{"version":3,"file":"ChatSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ChatSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,iBAAiB,GAClB,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6HtC"}

package/components/shell/ChatSurface.js

@@ -22,7 +22,12 @@ export function ChatSurface({ messages, onSend, canSend, greeting, recording = f
         const node = scrollRef.current;
         if (!node)
             return;
-        node.scrollTop = node.scrollHeight;
+        // Defer the bottom-follow write to the next frame so appending a message
+        // (every streamed turn) doesn't force a synchronous layout/reflow.
+        const frameId = requestAnimationFrame(() => {
+            node.scrollTop = node.scrollHeight;
+        });
+        return () => cancelAnimationFrame(frameId);
     }, [messageCount]);
     return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "shell-chat-surface", children: [_jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto py-2", children: messages.length === 0 ? (_jsx("p", { className: "text-sm text-muted", children: greeting ??
                         t("chatsurface.greeting", {
@@ -45,7 +50,7 @@ export function ChatSurface({ messages, onSend, canSend, greeting, recording = f
                             defaultValue: "Ask {{appName}}…",
                         }), disabled: !canSend, "aria-label": t("chatsurface.messageLabel", {
                             defaultValue: "Message {{appName}}",
-                        }), className: "min-w-0 flex-1 border-0 bg-transparent px-2 py-1.5 text-sm text-txt placeholder:text-txt/50 focus-visible:outline-none focus-visible:ring-0 disabled:opacity-50" }), _jsx(GlassIconButton, { icon: "mic", label: recording
+                        }), className: "min-w-0 flex-1 border-0 bg-transparent px-2 py-1.5 text-sm text-txt placeholder:text-txt/50   disabled:opacity-50" }), _jsx(GlassIconButton, { icon: "mic", label: recording
                             ? t("chatsurface.stopVoice", {
                                 defaultValue: "Stop voice input",
                             })

package/components/shell/CloudHandoffBanner.d.ts

@@ -8,8 +8,9 @@
  * view is a full-screen overlay with an orange ambient background, so a tinted
  * top banner would sit behind it and any orange-family tint (accent/warn) would
  * blend in. A dark pill below the status bar reads cleanly on any view. The
- * amber spinner / green check carry the state; it self-dismisses via
- * {@link useCloudHandoffPhase}.
+ * `--warn` spinner / `--ok` check carry the state; it self-dismisses via
+ * {@link useCloudHandoffPhase}. On a `timed-out`/`failed` handoff it offers a
+ * retry that re-invokes the handoff supervisor.
  */
 export declare function CloudHandoffBanner(): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=CloudHandoffBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CloudHandoffBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/CloudHandoffBanner.tsx"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,mDAsDjC"}
+{"version":3,"file":"CloudHandoffBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/CloudHandoffBanner.tsx"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,mDAkDjC"}

package/components/shell/CloudHandoffBanner.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
+import { dispatchCloudHandoffRetry, } from "../../events/index.js";
 import { useCloudHandoffPhase } from "../../hooks/useCloudHandoffPhase.js";
 import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
 import { Spinner } from "../ui/spinner.js";
 const MESSAGE = {
     migrating: "Setting up your dedicated agent — you can keep chatting.",
@@ -20,26 +22,23 @@ const MESSAGE = {
  * view is a full-screen overlay with an orange ambient background, so a tinted
  * top banner would sit behind it and any orange-family tint (accent/warn) would
  * blend in. A dark pill below the status bar reads cleanly on any view. The
- * amber spinner / green check carry the state; it self-dismisses via
- * {@link useCloudHandoffPhase}.
+ * `--warn` spinner / `--ok` check carry the state; it self-dismisses via
+ * {@link useCloudHandoffPhase}. On a `timed-out`/`failed` handoff it offers a
+ * retry that re-invokes the handoff supervisor.
  */
 export function CloudHandoffBanner() {
     const handoff = useCloudHandoffPhase();
     if (!handoff)
         return null;
-    const { phase, onRetry } = handoff;
+    const { phase, agentId } = handoff;
+    const isFailure = phase === "timed-out" || phase === "failed";
     const isSuccess = phase === "switched" || phase === "switched-empty";
-    const canRetry = (phase === "timed-out" || phase === "failed") &&
-        typeof onRetry === "function";
     return (_jsxs("div", { role: "status", "aria-live": "polite", 
         // z-[9999] mirrors Z_SYSTEM_CRITICAL in ../../lib/floating-layers.ts so it
         // floats above the chat overlay. Dark bg + safe-area offset are inline so
         // they don't depend on theme tokens (which are orange on the chat view).
-        className: cn("fixed left-1/2 z-[9999] flex max-w-[88%] -translate-x-1/2 items-center gap-2", "rounded-2xl border border-white/15 px-4 py-2", "text-sm font-medium leading-snug text-white shadow-lg"), style: {
+        className: cn("fixed left-1/2 z-[9999] flex max-w-[88%] -translate-x-1/2 items-center gap-2", "rounded-2xl border border-white/15 px-4 py-2", "text-sm font-medium leading-snug text-white"), style: {
             top: "calc(var(--safe-area-top, 0px) + 10px)",
             backgroundColor: "rgba(22, 22, 30, 0.96)",
-        }, children: [phase === "migrating" ? (_jsx(Spinner, { size: 15, className: "shrink-0 text-[#ffb020]" })) : isSuccess ? (_jsx(Check, { size: 15, className: "shrink-0 text-[color:var(--ok)]", "aria-hidden": true })) : null, _jsx("span", { children: MESSAGE[phase] }), canRetry ? (_jsx("button", { type: "button", onClick: onRetry, 
-                // Neutral pill on the dark surface: neutral-resting → lighter-neutral
-                // hover (never orange→black) per the brand hover rules.
-                className: cn("ml-1 shrink-0 rounded-lg border border-white/20 bg-white/10 px-2.5 py-1", "text-xs font-semibold text-white transition-colors hover:bg-white/20", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"), children: "Retry" })) : null] }));
+        }, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [phase === "migrating" ? (_jsx(Spinner, { size: 15, className: "shrink-0 text-[color:var(--warn)]" })) : isSuccess ? (_jsx(Check, { size: 15, className: "shrink-0 text-[color:var(--ok)]", "aria-hidden": true })) : null, _jsx("span", { className: "truncate", children: MESSAGE[phase] })] }), isFailure ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => dispatchCloudHandoffRetry({ agentId }), className: "h-6 shrink-0 rounded-sm px-2 text-xs text-white/80 hover:bg-white/10 hover:text-white", "data-testid": "cloud-handoff-retry", children: "Retry" })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/CommandPalette.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,cAAc,4CAwS7B"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/CommandPalette.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,cAAc,4CAiW7B"}

package/components/shell/CommandPalette.js

@@ -1,16 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, } from "react";
 import { isElectrobunRuntime } from "../../bridge/index.js";
-import { buildCommands as buildCommandPaletteCommands, } from "../../chat/index.js";
+import { buildCommands as buildCommandPaletteCommands, paletteViewEntries, } from "../../chat/index.js";
+import { reportShortcutFired, reportUserViewSwitch, } from "../../chat/useSlashCommandController.js";
 import { COMMAND_PALETTE_EVENT } from "../../events/index.js";
 import { useBugReport } from "../../hooks/index.js";
-import { useApp } from "../../state/index.js";
+import { useAvailableViews } from "../../hooks/useAvailableViews.js";
+import { SHORTCUT_OPEN_COMMAND_PALETTE } from "../../hooks/useKeyboardShortcuts.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { useEnabledViewKinds } from "../../state/useViewKinds.js";
 import { openDesktopSettingsWindow, openDesktopSurfaceWindow, requestDesktopBridge, } from "../../utils/index.js";
 import { Button } from "../ui/button.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../ui/dialog.js";
 import { Input } from "../ui/input.js";
 export function CommandPalette() {
-    const { commandPaletteOpen, commandQuery, commandActiveIndex, agentStatus, handleStart, handleStop, handleRestart, setTab, loadPlugins, loadSkills, loadLogs, loadWorkbench, handleChatClear, activeGameViewerUrl, setState, t, } = useApp();
+    const { commandPaletteOpen, commandQuery, commandActiveIndex, agentStatus, handleStart, handleStop, handleRestart, setTab, loadPlugins, loadSkills, loadLogs, loadWorkbench, handleChatClear, activeGameViewerUrl, setState, t, } = useAppSelectorShallow((s) => ({
+        commandPaletteOpen: s.commandPaletteOpen,
+        commandQuery: s.commandQuery,
+        commandActiveIndex: s.commandActiveIndex,
+        agentStatus: s.agentStatus,
+        handleStart: s.handleStart,
+        handleStop: s.handleStop,
+        handleRestart: s.handleRestart,
+        setTab: s.setTab,
+        loadPlugins: s.loadPlugins,
+        loadSkills: s.loadSkills,
+        loadLogs: s.loadLogs,
+        loadWorkbench: s.loadWorkbench,
+        handleChatClear: s.handleChatClear,
+        activeGameViewerUrl: s.activeGameViewerUrl,
+        setState: s.setState,
+        t: s.t,
+    }));
     const { open: openBugReport } = useBugReport();
     const closeCommandPalette = useCallback(() => setState("commandPaletteOpen", false), [setState]);
     const inputRef = useRef(null);
@@ -18,6 +39,31 @@ export function CommandPalette() {
     const agentState = agentStatus?.state ?? "stopped";
     const currentGameViewerUrl = typeof activeGameViewerUrl === "string" ? activeGameViewerUrl : "";
     const desktopRuntime = isElectrobunRuntime();
+    // Every registered, loadable, user-visible GUI view becomes a palette nav
+    // entry so the palette is a complete launcher across all plugins (#8792). The
+    // visibility gate mirrors the view catalog (`isVisibleCatalogView`) so the
+    // palette never leaks developer/preview/internal views the rest of the shell
+    // hides (e.g. with Developer Mode off).
+    const { views: registeredViews } = useAvailableViews();
+    const enabledKinds = useEnabledViewKinds();
+    const viewNavEntries = useMemo(() => paletteViewEntries(registeredViews, enabledKinds), [registeredViews, enabledKinds]);
+    // Navigation + agent reporting in one place: switching surfaces from the
+    // palette must reach the proactive decider as VIEW_SWITCHED (#8792).
+    const navigateTab = useCallback((tab) => {
+        setTab(tab);
+        reportUserViewSwitch(String(tab));
+    }, [setTab]);
+    // Mirror the established `eliza:navigate:view` detail shape used by every
+    // other dispatcher (slash controller, view catalog, notifications): always
+    // include `viewId` so the handler records recents + opens/activates the
+    // desktop tab, and always dispatch so path-less views still route via the
+    // consumer's `/apps/<viewId>` fallback.
+    const navigateView = useCallback((viewId, path) => {
+        window.dispatchEvent(new CustomEvent("eliza:navigate:view", {
+            detail: { viewId, viewPath: path },
+        }));
+        reportUserViewSwitch(viewId, path);
+    }, []);
     const allCommands = useMemo(() => {
         return buildCommandPaletteCommands({
             agentState,
@@ -25,7 +71,9 @@ export function CommandPalette() {
             handleStart,
             handleStop,
             handleRestart,
-            setTab,
+            navigateTab,
+            navigateView,
+            views: viewNavEntries,
             setAppsSubTab: () => setState("appsSubTab", "games"),
             loadPlugins,
             loadSkills,
@@ -50,7 +98,9 @@ export function CommandPalette() {
         handleStart,
         handleStop,
         handleRestart,
-        setTab,
+        navigateTab,
+        navigateView,
+        viewNavEntries,
         setState,
         loadPlugins,
         loadSkills,
@@ -74,6 +124,7 @@ export function CommandPalette() {
             if (!commandPaletteOpen) {
                 setState("commandQuery", "");
                 setState("commandActiveIndex", 0);
+                reportShortcutFired(SHORTCUT_OPEN_COMMAND_PALETTE, "command-palette");
             }
         };
         document.addEventListener(COMMAND_PALETTE_EVENT, toggle);
@@ -88,6 +139,7 @@ export function CommandPalette() {
                 if (!commandPaletteOpen) {
                     setState("commandQuery", "");
                     setState("commandActiveIndex", 0);
+                    reportShortcutFired(SHORTCUT_OPEN_COMMAND_PALETTE, "command-palette");
                 }
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"ComputerUseApprovalOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ComputerUseApprovalOverlay.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,0BAA0B,mDAgXzC"}
+{"version":3,"file":"ComputerUseApprovalOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ComputerUseApprovalOverlay.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,0BAA0B,mDAoXzC"}

package/components/shell/ComputerUseApprovalOverlay.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
+import { openEventSource } from "../../utils/event-source.js";
 import { Button } from "../ui/button.js";
 import { Card, CardContent, CardDescription, CardHeader } from "../ui/card.js";
 import { StatusBadge } from "../ui/status-badge.js";
@@ -24,7 +25,8 @@ function approvalStreamUrl() {
     return url.toString();
 }
 export function ComputerUseApprovalOverlay() {
-    const { setActionNotice, t } = useApp();
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const t = useAppSelector((s) => s.t);
     const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
     const [busyApprovalId, setBusyApprovalId] = useState(null);
     const [denyTargetId, setDenyTargetId] = useState(null);
@@ -60,8 +62,11 @@ export function ComputerUseApprovalOverlay() {
             pollRefresh();
             pollingTimer = window.setInterval(pollRefresh, POLL_MS);
         };
-        try {
-            eventSource = new EventSource(approvalStreamUrl());
+        // On-device runtimes use the native IPC base, which EventSource cannot
+        // open; openEventSource returns null there so we fall straight through to
+        // polling instead of throwing a synchronous SecurityError.
+        eventSource = openEventSource(approvalStreamUrl());
+        if (eventSource) {
             eventSource.onmessage = (event) => {
                 if (cancelled) {
                     return;
@@ -86,9 +91,6 @@ export function ComputerUseApprovalOverlay() {
                 startPolling();
             };
         }
-        catch {
-            startPolling();
-        }
         if (!eventSource) {
             startPolling();
         }
@@ -201,7 +203,7 @@ export function ComputerUseApprovalOverlay() {
                         const isDenying = denyTargetId === approval.id;
                         return (_jsx("div", { className: "rounded-sm border border-border/50 bg-card/75 p-4 ", children: _jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted", children: t("computeruseapprovaloverlay.Command", {
                                                     defaultValue: "Command",
-                                                }) }), _jsx("div", { className: "mt-2 break-all text-sm font-medium text-txt", children: approval.command }), _jsx("div", { className: "mt-2 text-xs text-muted", children: new Date(approval.requestedAt).toLocaleTimeString() }), _jsx("pre", { className: "mt-4 max-h-56 overflow-auto rounded-sm bg-bg/60 p-3 text-xs leading-relaxed text-txt", children: approval.parametersText || "{}" })] }), _jsx("div", { className: "w-full max-w-[18rem] space-y-3", children: isDenying ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "computer-use-deny-reason", className: "block text-xs font-semibold uppercase tracking-[0.16em] text-muted", children: t("computeruseapprovaloverlay.DenyReason", {
+                                                }) }), _jsx("div", { className: "mt-2 break-all text-sm font-medium text-txt", children: approval.command }), _jsx("div", { className: "mt-2 text-xs text-muted", children: new Date(approval.requestedAt).toLocaleTimeString("en-US") }), _jsx("pre", { className: "mt-4 max-h-56 overflow-auto rounded-sm bg-bg/60 p-3 text-xs leading-relaxed text-txt", children: approval.parametersText || "{}" })] }), _jsx("div", { className: "w-full max-w-[18rem] space-y-3", children: isDenying ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "computer-use-deny-reason", className: "block text-xs font-semibold uppercase tracking-[0.16em] text-muted", children: t("computeruseapprovaloverlay.DenyReason", {
                                                         defaultValue: "Deny reason",
                                                     }) }), _jsx("textarea", { id: "computer-use-deny-reason", value: denyReason, onChange: (event) => setDenyReason(event.target.value), rows: 4, className: "w-full rounded-sm border border-border/60 bg-bg/50 px-3 py-2 text-sm text-txt outline-none", placeholder: t("computeruseapprovaloverlay.DenyReasonPlaceholder", {
                                                         defaultValue: "Optional reason shown to the agent.",

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectionFailedBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ConnectionFailedBanner.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,wBAAgB,sBAAsB,mDAyErC"}
+{"version":3,"file":"ConnectionFailedBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ConnectionFailedBanner.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,wBAAgB,sBAAsB,mDA+ErC"}

package/components/shell/ConnectionFailedBanner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Spinner } from "../ui/spinner.js";
 // z-[9999] mirrors Z_SYSTEM_CRITICAL in ../../lib/floating-layers.ts.
@@ -9,8 +9,13 @@ import { Spinner } from "../ui/spinner.js";
  * Renders in document flow to push the header and content down.
  */
 export function ConnectionFailedBanner() {
-    const { t } = useApp();
-    const { backendConnection, backendDisconnectedBannerDismissed, dismissBackendDisconnectedBanner, retryBackendConnection, } = useApp();
+    const { t, backendConnection, backendDisconnectedBannerDismissed, dismissBackendDisconnectedBanner, retryBackendConnection, } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        backendConnection: s.backendConnection,
+        backendDisconnectedBannerDismissed: s.backendDisconnectedBannerDismissed,
+        dismissBackendDisconnectedBanner: s.dismissBackendDisconnectedBanner,
+        retryBackendConnection: s.retryBackendConnection,
+    }));
     if (!backendConnection)
         return null;
     if (backendConnection.showDisconnectedUI)