@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/shell/BugReportModal.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Banner, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Field, FieldDescription, FieldLabel, FieldMessage, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@elizaos/ui";
 import { ChevronRight } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 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";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { Field, FieldDescription, FieldLabel, FieldMessage } from "../ui/field.js";
+import { Input } from "../ui/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
+import { Textarea } from "../ui/textarea.js";
 const ENV_OPTIONS = ["macOS", "Windows", "Linux", "Other"];
 const EMPTY_FORM = {
     description: "",
@@ -20,9 +26,9 @@ const EMPTY_FORM = {
     modelProvider: "",
     logs: "",
 };
-const modalContentClassName = "w-[min(calc(100%_-_2rem),42rem)] max-h-[min(88vh,52rem)] overflow-hidden rounded-2xl border border-border/70 bg-card/96 p-0 shadow-2xl backdrop-blur-xl";
-const modalInputClassName = "h-11 rounded-xl border-border bg-bg-hover text-txt placeholder:text-muted/70 focus-visible:ring-accent/30";
-const modalTextareaClassName = "min-h-[88px] rounded-xl border-border bg-bg-hover px-4 py-3 text-sm text-txt placeholder:text-muted/70 focus-visible:ring-accent/30";
+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 ";
+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") {
@@ -42,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();
@@ -100,9 +107,7 @@ export function BugReportModal() {
                     : {}),
             }));
         })
-            .catch((err) => {
-            console.warn("[BugReportModal] Failed to fetch bug report info:", err);
-        });
+            .catch(() => { });
         if (desktopRuntime) {
             loadDesktopBugReportDiagnostics()
                 .then((diagnostics) => {
@@ -123,9 +128,7 @@ export function BugReportModal() {
                     }));
                 }
             })
-                .catch((err) => {
-                console.warn("[BugReportModal] Failed to fetch desktop diagnostics:", err);
-            });
+                .catch(() => { });
         }
         setTimeout(() => descRef.current?.focus(), 50);
         return () => {
@@ -243,8 +246,7 @@ export function BugReportModal() {
                     await copyToClipboard(formatMarkdown());
                     ok = true;
                 }
-                catch (err) {
-                    console.warn("[BugReportModal] Failed to copy bug report to clipboard:", err);
+                catch {
                     ok = false;
                 }
                 setCopied(ok);
@@ -264,8 +266,7 @@ export function BugReportModal() {
             await copyToClipboard(formatMarkdown());
             ok = true;
         }
-        catch (err) {
-            console.warn("[BugReportModal] Failed to copy bug report to clipboard:", err);
+        catch {
             ok = false;
         }
         setCopied(ok);
@@ -280,8 +281,8 @@ export function BugReportModal() {
             await copyToClipboard(diagnosticsText);
             ok = true;
         }
-        catch (err) {
-            console.warn("[BugReportModal] Failed to copy diagnostics:", err);
+        catch {
+            // clipboard write failed; ok stays false
         }
         setCopiedDiagnostics(ok);
     }, [buildDiagnosticsBlock, copyToClipboard]);
@@ -324,9 +325,9 @@ export function BugReportModal() {
         return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
                 if (!open)
                     close();
-            }, children: _jsxs(DialogContent, { className: "w-[min(calc(100%_-_2rem),28rem)] rounded-2xl border border-border/70 bg-card/96 p-0 shadow-2xl backdrop-blur-xl", children: [_jsxs(DialogHeader, { className: "px-5 py-4 text-left", children: [_jsx(DialogTitle, { ref: (node) => {
+            }, 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.",
@@ -340,13 +341,13 @@ export function BugReportModal() {
                 descRef.current?.focus();
             }, children: [_jsxs(DialogHeader, { className: "px-5 py-4 text-left", children: [_jsx(DialogTitle, { className: "text-sm font-bold text-txt", children: t("bugreportmodal.ReportABug") }), _jsx(DialogDescription, { className: "text-sm leading-relaxed text-muted", children: t("bugreportmodal.ReproductionPrompt", {
                                 defaultValue: "Help us reproduce the issue with concrete steps and environment details.",
-                            }) })] }), _jsxs("div", { className: "flex max-h-[min(88vh,52rem)] flex-col", "aria-busy": submitting, children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto px-5 py-4", children: [errorMsg && (_jsx(Banner, { variant: "error", className: "rounded-xl text-xs", children: errorMsg })), bundlePath && (_jsx(FieldMessage, { tone: "success", className: "text-xs", children: bundlePath })), _jsxs(Field, { children: [_jsxs(FieldLabel, { htmlFor: "bug-report-description", children: [t("common.description"), " ", _jsx("span", { className: "text-danger", "aria-hidden": "true", children: "*" })] }), _jsx(Textarea, { ref: descRef, id: "bug-report-description", className: modalTextareaClassName, placeholder: t("bugreportmodal.DescribeTheIssueY"), value: form.description, onChange: (e) => updateField("description", e.target.value), rows: 4 }), _jsx(FieldDescription, { className: subtleMonoDescriptionClassName, children: t("bugreportmodal.DescriptionHint", {
+                            }) })] }), _jsxs("div", { className: "flex max-h-[min(88vh,52rem)] flex-col", "aria-busy": submitting, children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto px-5 py-4", children: [errorMsg && (_jsx(Banner, { variant: "error", className: "rounded-sm text-xs", children: errorMsg })), bundlePath && (_jsx(FieldMessage, { tone: "success", className: "text-xs", children: bundlePath })), _jsxs(Field, { children: [_jsxs(FieldLabel, { htmlFor: "bug-report-description", children: [t("common.description"), " ", _jsx("span", { className: "text-danger", "aria-hidden": "true", children: "*" })] }), _jsx(Textarea, { ref: descRef, id: "bug-report-description", className: modalTextareaClassName, placeholder: t("bugreportmodal.DescribeTheIssueY"), value: form.description, onChange: (e) => updateField("description", e.target.value), rows: 4 }), _jsx(FieldDescription, { className: subtleMonoDescriptionClassName, children: t("bugreportmodal.DescriptionHint", {
                                                 defaultValue: "Describe what happened and why it was unexpected.",
                                             }) })] }), _jsxs(Field, { children: [_jsxs(FieldLabel, { htmlFor: "bug-report-steps", children: [t("bugreportmodal.StepsToReproduce"), " ", _jsx("span", { className: "text-danger", "aria-hidden": "true", children: "*" })] }), _jsx(Textarea, { id: "bug-report-steps", className: modalTextareaClassName, placeholder: t("bugreportmodal.stepsPlaceholder"), value: form.stepsToReproduce, onChange: (e) => updateField("stepsToReproduce", e.target.value), rows: 4 }), _jsx(FieldDescription, { className: subtleMonoDescriptionClassName, children: t("bugreportmodal.StepsHint", {
                                                 defaultValue: "Include the shortest reliable path that reproduces the bug.",
                                             }) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "bug-report-expected", children: t("bugreportmodal.ExpectedBehavior") }), _jsx(Textarea, { id: "bug-report-expected", className: `${modalTextareaClassName} min-h-[72px]`, placeholder: t("bugreportmodal.DescribeTheExpecte"), value: form.expectedBehavior, onChange: (e) => updateField("expectedBehavior", e.target.value), rows: 3 })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "bug-report-actual", children: t("bugreportmodal.ActualBehavior") }), _jsx(Textarea, { id: "bug-report-actual", className: `${modalTextareaClassName} min-h-[72px]`, placeholder: t("bugreportmodal.DescribeTheActual"), value: form.actualBehavior, onChange: (e) => updateField("actualBehavior", e.target.value), rows: 3 })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "bug-report-environment", children: t("bugreportmodal.Environment") }), _jsxs(Select, { value: form.environment, onValueChange: (value) => updateField("environment", value), children: [_jsx(SelectTrigger, { id: "bug-report-environment", className: modalInputClassName, children: _jsx(SelectValue, { placeholder: t("bugreportmodal.Select") }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", disabled: true, children: t("bugreportmodal.Select") }), ENV_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt, children: environmentOptionLabel(t, opt) }, opt)))] })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "bug-report-node-version", children: t("bugreportmodal.NodeVersion") }), _jsx(Input, { id: "bug-report-node-version", className: modalInputClassName, placeholder: t("bugreportmodal.22X"), value: form.nodeVersion, onChange: (e) => updateField("nodeVersion", e.target.value) })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "bug-report-model-provider", children: t("bugreportmodal.ModelProvider") }), _jsx(Input, { id: "bug-report-model-provider", className: modalInputClassName, placeholder: t("bugreportmodal.AnthropicOpenAI"), value: form.modelProvider, onChange: (e) => updateField("modelProvider", e.target.value) })] }), _jsxs(Field, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(FieldLabel, { className: "mb-0", children: t("common.logs") }), _jsx(FieldDescription, { className: subtleMonoDescriptionClassName, children: t("bugreportmodal.LogsHint", {
                                                                 defaultValue: "Paste only the relevant errors, traces, or console output.",
-                                                            }) })] }), _jsxs(Button, { type: "button", variant: "ghost", className: "h-10 rounded-xl px-3 text-xs text-muted hover:text-txt", onClick: () => setShowLogs(!showLogs), "aria-expanded": showLogs, "aria-controls": "bug-report-logs-panel", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${showLogs ? "rotate-90" : ""}` }), showLogs
+                                                            }) })] }), _jsxs(Button, { type: "button", variant: "ghost", className: "h-10 rounded-sm px-3 text-xs text-muted hover:text-txt", onClick: () => setShowLogs(!showLogs), "aria-expanded": showLogs, "aria-controls": "bug-report-logs-panel", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${showLogs ? "rotate-90" : ""}` }), showLogs
                                                             ? t("bugreportmodal.HideLogs", {
                                                                 defaultValue: "Hide logs",
                                                             })

package/components/shell/ChatSurface.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { ShellMessage } from "./shell-state.js";
+export interface ChatSurfaceProps {
+    messages: readonly ShellMessage[];
+    onSend: (text: string) => void;
+    canSend: boolean;
+    greeting?: string;
+    recording?: boolean;
+    onToggleRecording?: () => void;
+}
+export declare function ChatSurface({ messages, onSend, canSend, greeting, recording, onToggleRecording, }: ChatSurfaceProps): React.JSX.Element;
+//# sourceMappingURL=ChatSurface.d.ts.map

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

@@ -0,0 +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,CA6HtC"}

package/components/shell/ChatSurface.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { GlassIconButton } from "./glass-composer.js";
+import { GLASS_COMPOSER_CLASS } from "./glass-composer.helpers.js";
+export function ChatSurface({ messages, onSend, canSend, greeting, recording = false, onToggleRecording, }) {
+    const { t } = useTranslation();
+    const [draft, setDraft] = React.useState("");
+    const scrollRef = React.useRef(null);
+    const messageCount = messages.length;
+    const trimmed = draft.trim();
+    const canSendNow = canSend && trimmed.length > 0;
+    const handleSend = React.useCallback(() => {
+        if (!canSendNow)
+            return;
+        onSend(trimmed);
+        setDraft("");
+    }, [canSendNow, onSend, trimmed]);
+    React.useEffect(() => {
+        void messageCount;
+        const node = scrollRef.current;
+        if (!node)
+            return;
+        // 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", {
+                            defaultValue: "Ask {{appName}} anything.",
+                        }) })) : (_jsx("ul", { "aria-live": "polite", "aria-atomic": "false", "aria-label": t("chatsurface.conversation", {
+                        defaultValue: "Conversation",
+                    }), className: "flex flex-col gap-2", children: messages.map((message) => {
+                        const isEmptyAssistant = message.role === "assistant" && message.content === "";
+                        return (_jsx("li", { className: cn("max-w-[80%] rounded-xs px-3 py-2 text-sm", message.role === "user"
+                                ? "self-end bg-accent/20 text-txt"
+                                : "self-start bg-card/60 text-txt"), children: isEmptyAssistant ? (_jsxs("span", { role: "status", "aria-label": t("chatsurface.typing", {
+                                    defaultValue: "{{appName}} is typing",
+                                }), className: "inline-flex gap-0.5", children: [_jsx("span", { className: "inline-block h-1 w-1 animate-pulse rounded-full bg-muted" }), _jsx("span", { className: "inline-block h-1 w-1 animate-pulse rounded-full bg-muted [animation-delay:120ms]" }), _jsx("span", { className: "inline-block h-1 w-1 animate-pulse rounded-full bg-muted [animation-delay:240ms]" })] })) : (message.content) }, message.id));
+                    }) })) }), _jsxs("div", { className: cn("m-2", GLASS_COMPOSER_CLASS), children: [_jsx("input", { type: "text", value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter" && !event.shiftKey) {
+                                event.preventDefault();
+                                handleSend();
+                            }
+                        }, placeholder: t("chatsurface.inputPlaceholder", {
+                            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   disabled:opacity-50" }), _jsx(GlassIconButton, { icon: "mic", label: recording
+                            ? t("chatsurface.stopVoice", {
+                                defaultValue: "Stop voice input",
+                            })
+                            : t("chatsurface.startVoice", {
+                                defaultValue: "Start voice input",
+                            }), active: recording, disabled: !onToggleRecording, onClick: onToggleRecording }), _jsx(GlassIconButton, { icon: "send", label: t("chatsurface.send", { defaultValue: "Send message" }), disabled: !canSendNow, onClick: handleSend })] })] }));
+}

package/components/shell/CloudHandoffBanner.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Surfaces the shared→dedicated cloud-agent handoff so the background swap is
+ * visible instead of silent. While a freshly-provisioned agent's container boots
+ * the user keeps chatting on the shared adapter; once it's ready the live client
+ * swaps over automatically.
+ *
+ * Rendered as a floating toast pill (not an in-flow tinted banner): the chat
+ * 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
+ * `--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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,44 @@
+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.",
+    switched: "You're now on your dedicated agent.",
+    "switched-empty": "You're now on your dedicated agent.",
+    "timed-out": "Your dedicated agent is taking longer — you're still on the shared one.",
+    failed: "Couldn't switch to your dedicated agent yet — you're still on the shared one.",
+};
+/**
+ * Surfaces the shared→dedicated cloud-agent handoff so the background swap is
+ * visible instead of silent. While a freshly-provisioned agent's container boots
+ * the user keeps chatting on the shared adapter; once it's ready the live client
+ * swaps over automatically.
+ *
+ * Rendered as a floating toast pill (not an in-flow tinted banner): the chat
+ * 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
+ * `--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, agentId } = handoff;
+    const isFailure = phase === "timed-out" || phase === "failed";
+    const isSuccess = phase === "switched" || phase === "switched-empty";
+    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"), style: {
+            top: "calc(var(--safe-area-top, 0px) + 10px)",
+            backgroundColor: "rgba(22, 22, 30, 0.96)",
+        }, 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,14 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, } from "@elizaos/ui";
 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);
@@ -16,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,
@@ -23,7 +71,9 @@ export function CommandPalette() {
             handleStart,
             handleStop,
             handleRestart,
-            setTab,
+            navigateTab,
+            navigateView,
+            views: viewNavEntries,
             setAppsSubTab: () => setState("appsSubTab", "games"),
             loadPlugins,
             loadSkills,
@@ -48,7 +98,9 @@ export function CommandPalette() {
         handleStart,
         handleStop,
         handleRestart,
-        setTab,
+        navigateTab,
+        navigateView,
+        viewNavEntries,
         setState,
         loadPlugins,
         loadSkills,
@@ -72,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);
@@ -86,6 +139,7 @@ export function CommandPalette() {
                 if (!commandPaletteOpen) {
                     setState("commandQuery", "");
                     setState("commandActiveIndex", 0);
+                    reportShortcutFired(SHORTCUT_OPEN_COMMAND_PALETTE, "command-palette");
                 }
             }
         };
@@ -170,7 +224,7 @@ export function CommandPalette() {
     return (_jsx(Dialog, { open: commandPaletteOpen, onOpenChange: (v) => {
             if (!v)
                 closeCommandPalette();
-        }, children: _jsxs(DialogContent, { className: "flex max-h-[min(420px,calc(100dvh_-_1rem))] w-[min(calc(100vw_-_1rem),32.5rem)] max-w-none flex-col rounded-xl p-0 sm:top-[30%] sm:translate-y-0", onKeyDown: handlePaletteKeyDown, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: commandPaletteTitle }), _jsx(DialogDescription, { children: commandPaletteDescription })] }), _jsx(Input, { ref: inputRef, id: "command-palette-search", type: "text", className: "w-full px-4 py-3.5 bg-transparent text-sm outline-none font-body", style: {
+        }, children: _jsxs(DialogContent, { className: "flex max-h-[min(420px,calc(100dvh_-_1rem))] w-[min(calc(100vw_-_1rem),32.5rem)] max-w-none flex-col rounded-sm p-0 sm:top-[30%] sm:translate-y-0", onKeyDown: handlePaletteKeyDown, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: commandPaletteTitle }), _jsx(DialogDescription, { children: commandPaletteDescription })] }), _jsx(Input, { ref: inputRef, id: "command-palette-search", type: "text", className: "w-full px-4 py-3.5 bg-transparent text-sm outline-none font-body", style: {
                         borderBottom: "1px solid var(--border)",
                         color: "var(--text)",
                     }, placeholder: t("commandpalette.TypeToSearchComma"), "aria-label": commandSearchLabel, role: "combobox", "aria-autocomplete": "list", "aria-expanded": commandPaletteOpen, "aria-controls": listboxId, "aria-activedescendant": activeOptionId, value: commandQuery, onChange: (e) => setState("commandQuery", e.target.value) }), _jsx("div", { id: listboxId, role: "listbox", "aria-label": commandResultsLabel, className: "flex-1 overflow-y-auto py-1", children: filteredCommands.length === 0 ? (_jsx("div", { role: "status", "aria-live": "polite", className: "py-5 text-center text-sm", style: { color: "var(--muted)" }, children: t("commandpalette.NoCommandsFound") })) : (filteredCommands.map((cmd, idx) => (_jsxs(Button, { variant: "ghost", id: `command-palette-option-${cmd.id}`, role: "option", "aria-selected": idx === commandActiveIndex, className: "flex h-auto w-full cursor-pointer items-center justify-between gap-3 rounded-none border-0 px-4 py-2.5 text-left font-body text-sm", style: {

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

@@ -1 +1 @@
-{"version":3,"file":"ComputerUseApprovalOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ComputerUseApprovalOverlay.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,0BAA0B,mDAgTzC"}
+{"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,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Card, CardContent, CardDescription, CardHeader, StatusBadge, } from "@elizaos/ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/index.js";
-const OVERLAY_SHELL_CLASS = "fixed inset-0 z-[1002] flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg/75 px-4 py-6 font-body text-txt backdrop-blur-sm sm:px-6";
-const OVERLAY_CARD_CLASS = "relative z-10 w-full max-w-[820px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.36)] backdrop-blur-xl";
+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";
+const OVERLAY_SHELL_CLASS = "fixed inset-0 z-[1002] flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg/75 px-4 py-6 font-body text-txt  sm:px-6";
+const OVERLAY_CARD_CLASS = "relative z-10 w-full max-w-[820px] overflow-hidden border border-border/60 bg-card/95 ";
 const EMPTY_SNAPSHOT = {
     mode: "full_control",
     pendingCount: 0,
     pendingApprovals: [],
 };
 const POLL_MS = 1500;
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function approvalStreamUrl() {
     const baseUrl = client.getBaseUrl();
     const restToken = client.getRestAuthToken();
@@ -21,11 +25,14 @@ 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);
     const [denyReason, setDenyReason] = useState("");
+    const dialogRef = useRef(null);
+    const previousFocusRef = useRef(null);
     const refresh = useCallback(async () => {
         try {
             setSnapshot(await client.getComputerUseApprovals());
@@ -38,17 +45,28 @@ export function ComputerUseApprovalOverlay() {
         let cancelled = false;
         let pollingTimer = null;
         let eventSource = null;
+        // Fallback polling (only used when the EventSource stream is unavailable).
+        // Skip the network refresh while the document is hidden so a backgrounded
+        // window stops hitting /api/computer-use/approvals.
+        const pollRefresh = () => {
+            if (typeof document !== "undefined" &&
+                document.visibilityState === "hidden") {
+                return;
+            }
+            void refresh();
+        };
         const startPolling = () => {
             if (pollingTimer !== null) {
                 return;
             }
-            void refresh();
-            pollingTimer = window.setInterval(() => {
-                void refresh();
-            }, POLL_MS);
+            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;
@@ -73,9 +91,6 @@ export function ComputerUseApprovalOverlay() {
                 startPolling();
             };
         }
-        catch {
-            startPolling();
-        }
         if (!eventSource) {
             startPolling();
         }
@@ -87,11 +102,61 @@ export function ComputerUseApprovalOverlay() {
             eventSource?.close();
         };
     }, [refresh]);
-    const visibleApprovals = snapshot.pendingApprovals;
+    // Defensive: the snapshot can be partially populated during reconnect/
+    // recovery windows, so `pendingApprovals` may be momentarily undefined.
+    // Never crash the whole app on it — render no cards until it's an array.
+    const visibleApprovals = snapshot.pendingApprovals ?? [];
     const approvalCards = useMemo(() => visibleApprovals.map((approval) => ({
         ...approval,
         parametersText: JSON.stringify(approval.parameters ?? {}, null, 2),
     })), [visibleApprovals]);
+    // This is a real modal that gates live computer-use actions, so trap focus
+    // inside it while it's shown (mirrors AssistantOverlay) — but DO NOT bind
+    // Escape: approving/denying is mandatory, there's no dismiss. Restores focus
+    // to the prior element when the last approval clears.
+    const hasApprovals = approvalCards.length > 0;
+    useEffect(() => {
+        if (!hasApprovals || typeof document === "undefined")
+            return undefined;
+        previousFocusRef.current =
+            document.activeElement ?? null;
+        const dialog = dialogRef.current;
+        if (dialog) {
+            const firstFocusable = dialog.querySelector(FOCUSABLE_SELECTOR);
+            (firstFocusable ?? dialog).focus();
+        }
+        function onKey(event) {
+            if (event.key !== "Tab" || !dialog)
+                return;
+            const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
+            if (focusable.length === 0) {
+                event.preventDefault();
+                dialog.focus();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = document.activeElement;
+            if (event.shiftKey) {
+                if (active === first || active === dialog) {
+                    event.preventDefault();
+                    last.focus();
+                }
+            }
+            else if (active === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            const previous = previousFocusRef.current;
+            if (previous && typeof previous.focus === "function")
+                previous.focus();
+            previousFocusRef.current = null;
+        };
+    }, [hasApprovals]);
     const handleRespond = useCallback(async (approvalId, approved, reason) => {
         if (busyApprovalId) {
             return;
@@ -124,7 +189,7 @@ export function ComputerUseApprovalOverlay() {
     if (approvalCards.length === 0) {
         return null;
     }
-    return (_jsx("div", { role: "alertdialog", "aria-modal": "true", "aria-labelledby": "computer-use-approval-title", className: OVERLAY_SHELL_CLASS, children: _jsxs(Card, { className: OVERLAY_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-warning/5 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(StatusBadge, { label: t("computeruseapprovaloverlay.PendingApproval", {
+    return (_jsx("div", { ref: dialogRef, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "computer-use-approval-title", tabIndex: -1, className: OVERLAY_SHELL_CLASS, children: _jsxs(Card, { className: OVERLAY_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-warning/5 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(StatusBadge, { label: t("computeruseapprovaloverlay.PendingApproval", {
                                     defaultValue: "Computer Use Approval",
                                 }), variant: "warning", withDot: true, className: "self-start" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h1", { id: "computer-use-approval-title", className: "text-xl font-semibold leading-tight text-txt", children: t("computeruseapprovaloverlay.Title", {
                                             defaultValue: "Review queued computer actions",
@@ -136,11 +201,11 @@ export function ComputerUseApprovalOverlay() {
                                         }) })] })] }) }), _jsx(CardContent, { className: "flex max-h-[70vh] flex-col gap-4 overflow-auto pt-6", children: approvalCards.map((approval) => {
                         const busy = busyApprovalId === approval.id;
                         const isDenying = denyTargetId === approval.id;
-                        return (_jsx("div", { className: "rounded-2xl border border-border/50 bg-card/75 p-4 shadow-sm", 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", {
+                        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-xl 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-xl border border-border/60 bg-bg/50 px-3 py-2 text-sm text-txt outline-none", placeholder: t("computeruseapprovaloverlay.DenyReasonPlaceholder", {
+                                                    }) }), _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.",
                                                     }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", disabled: busy, onClick: () => {
                                                                 setDenyTargetId(null);

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectionFailedBanner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ConnectionFailedBanner.tsx"],"names":[],"mappings":"AAGA;;;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"}