@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/shell/ShellHeaderControls.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { UiLanguage } from "../../i18n";
+import type { ShellView, UiTheme } from "../../state";
+declare const SHELL_ICON_BUTTON_CLASSNAME = "inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-xl 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 shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_14px_32px_rgba(3,5,10,0.14)] 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 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_18px_36px_rgba(3,5,10,0.18)] active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
+declare const HEADER_BUTTON_STYLE: {
+    readonly clipPath: "none";
+    readonly WebkitClipPath: "none";
+    readonly touchAction: "manipulation";
+};
+export { HEADER_BUTTON_STYLE, SHELL_ICON_BUTTON_CLASSNAME as HEADER_ICON_BUTTON_CLASSNAME, };
+type ShellHeaderTranslator = (key: string) => string;
+interface ShellHeaderControlsProps {
+    activeShellView: ShellView;
+    onShellViewChange: (view: ShellView) => void;
+    uiLanguage: UiLanguage;
+    setUiLanguage: (language: UiLanguage) => void;
+    uiTheme: UiTheme;
+    setUiTheme: (theme: UiTheme) => void;
+    t: ShellHeaderTranslator;
+    children?: ReactNode;
+    rightExtras?: ReactNode;
+    rightTrailingExtras?: ReactNode;
+    trailingExtras?: ReactNode;
+    className?: string;
+    controlsVariant?: "native" | "companion";
+    languageDropdownClassName?: string;
+    languageDropdownWrapperTestId?: string;
+    themeToggleClassName?: string;
+    themeToggleWrapperClassName?: string;
+    themeToggleWrapperTestId?: string;
+    /** Hide the segmented shell-view toggle (pill). Outside the companion overlay the pill is not shown. */
+    showShellViewToggle?: boolean;
+    /** Show Voice + New Chat buttons (companion & character editor views). */
+    showCompanionControls?: boolean;
+    companionDesktopActionsLayout?: "centered" | "split";
+    chatAgentVoiceMuted?: boolean;
+    onToggleVoiceMute?: () => void;
+    onNewChat?: () => void;
+    onSave?: () => void;
+    isSaving?: boolean;
+    saveSuccess?: boolean;
+}
+export declare function ShellHeaderControls({ activeShellView, onShellViewChange, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, rightExtras, rightTrailingExtras, trailingExtras, className, showShellViewToggle, controlsVariant, languageDropdownClassName, languageDropdownWrapperTestId, themeToggleClassName, themeToggleWrapperClassName, themeToggleWrapperTestId, showCompanionControls, companionDesktopActionsLayout, chatAgentVoiceMuted, onToggleVoiceMute, onNewChat, onSave, isSaving, saveSuccess, }: ShellHeaderControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellHeaderControls.d.ts.map

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

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

package/components/shell/ShellHeaderControls.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { Check, Loader2, MessageCirclePlus, Monitor, PencilLine, Save, Smartphone, UserRound, Volume2, VolumeX, } from "lucide-react";
+import { useMediaQuery } from "../../hooks/index.js";
+import { LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME, LanguageDropdown, } from "../shared/LanguageDropdown.js";
+import { ThemeToggle } from "../shared/ThemeToggle.js";
+const SHELL_CONTROL_BASE_CLASSNAME = "border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_14px_32px_rgba(3,5,10,0.14)] 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 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_18px_36px_rgba(3,5,10,0.18)] active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt";
+const SHELL_ICON_BUTTON_CLASSNAME = `inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-xl ${SHELL_CONTROL_BASE_CLASSNAME}`;
+const SHELL_EXPANDED_BUTTON_CLASSNAME = `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-xl px-3.5 py-0 ${SHELL_CONTROL_BASE_CLASSNAME}`;
+const SHELL_SEGMENTED_CONTROL_CLASSNAME = "inline-flex items-center gap-0.5 rounded-xl border border-border/45 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_52%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] p-0.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_12px_28px_rgba(3,5,10,0.12)] ring-1 ring-inset ring-white/6 backdrop-blur-xl";
+const SHELL_SEGMENT_ACTIVE_CLASSNAME = "border-[color:color-mix(in_srgb,var(--accent)_34%,var(--border))] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--accent)_20%,var(--card)),color-mix(in_srgb,var(--accent)_10%,var(--bg)))] text-[color:color-mix(in_srgb,var(--text-strong)_78%,var(--accent)_22%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_8px_20px_rgba(3,5,10,0.12)]";
+const SHELL_SEGMENT_INACTIVE_CLASSNAME = "border border-transparent bg-transparent text-muted-strong hover:border-border/60 hover:bg-bg-hover/80 hover:text-txt";
+const HEADER_BUTTON_STYLE = {
+    clipPath: "none",
+    WebkitClipPath: "none",
+    touchAction: "manipulation",
+};
+export { HEADER_BUTTON_STYLE, SHELL_ICON_BUTTON_CLASSNAME as HEADER_ICON_BUTTON_CLASSNAME, };
+const SHELL_MODE_MOBILE_BREAKPOINT = 639;
+const SHELL_MODE_MOBILE_MEDIA_QUERY = `(max-width: ${SHELL_MODE_MOBILE_BREAKPOINT}px)`;
+export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, rightExtras, rightTrailingExtras, trailingExtras, className, showShellViewToggle = true, controlsVariant = "native", languageDropdownClassName, languageDropdownWrapperTestId, themeToggleClassName, themeToggleWrapperClassName, themeToggleWrapperTestId, showCompanionControls, companionDesktopActionsLayout = "centered", chatAgentVoiceMuted = false, onToggleVoiceMute, onNewChat, onSave, isSaving = false, saveSuccess = false, }) {
+    const isMobileViewport = useMediaQuery(SHELL_MODE_MOBILE_MEDIA_QUERY);
+    const shouldSplitCompanionDesktopActions = !isMobileViewport &&
+        Boolean(showCompanionControls) &&
+        companionDesktopActionsLayout === "split";
+    const shellOptions = [
+        {
+            view: "companion",
+            label: t("header.companionMode"),
+            Icon: UserRound,
+        },
+        {
+            view: "character",
+            label: t("header.characterMode"),
+            Icon: PencilLine,
+        },
+        {
+            view: "desktop",
+            label: t("header.nativeMode"),
+            Icon: isMobileViewport ? Smartphone : Monitor,
+        },
+    ];
+    const voiceToggleLabel = chatAgentVoiceMuted
+        ? t("aria.agentVoiceOff")
+        : t("aria.agentVoiceOn");
+    const compactCompanionActionClassName = `${SHELL_ICON_BUTTON_CLASSNAME} pointer-events-auto text-sm leading-none`;
+    const expandedCompanionActionClassName = `${SHELL_EXPANDED_BUTTON_CLASSNAME} !w-auto gap-1.5 !px-3.5 justify-center text-sm leading-none`;
+    const renderVoiceButton = (iconOnly) => onToggleVoiceMute ? (_jsxs(Button, { size: "icon", variant: "outline", "aria-label": voiceToggleLabel, "aria-pressed": !chatAgentVoiceMuted, title: voiceToggleLabel, className: iconOnly
+            ? compactCompanionActionClassName
+            : expandedCompanionActionClassName, onClick: onToggleVoiceMute, onPointerDown: (event) => event.stopPropagation(), style: HEADER_BUTTON_STYLE, "data-no-camera-drag": "true", children: [chatAgentVoiceMuted ? (_jsx(VolumeX, { className: "pointer-events-none h-4 w-4 shrink-0" })) : (_jsx(Volume2, { className: "pointer-events-none h-4 w-4 shrink-0" })), iconOnly ? null : (_jsx("span", { className: "pointer-events-none", children: t("common.voice") }))] })) : null;
+    const renderNewChatButton = (iconOnly) => (_jsxs(Button, { size: "icon", variant: "outline", "aria-label": t("common.newChat"), title: t("common.newChat"), className: iconOnly
+            ? compactCompanionActionClassName
+            : expandedCompanionActionClassName, onClick: onNewChat, onPointerDown: (event) => event.stopPropagation(), style: HEADER_BUTTON_STYLE, "data-no-camera-drag": "true", children: [_jsx(MessageCirclePlus, { className: "pointer-events-none h-4 w-4 shrink-0" }), iconOnly ? null : (_jsx("span", { className: "pointer-events-none", children: t("common.newChat") }))] }));
+    const renderSaveButton = (iconOnly) => (_jsxs(Button, { size: "icon", variant: "outline", "aria-label": t("common.save"), title: t("common.save"), className: iconOnly
+            ? compactCompanionActionClassName
+            : expandedCompanionActionClassName, onClick: onSave, disabled: isSaving, onPointerDown: (event) => event.stopPropagation(), style: HEADER_BUTTON_STYLE, "data-no-camera-drag": "true", children: [isSaving ? (_jsx(Loader2, { className: "pointer-events-none h-4 w-4 shrink-0 animate-spin" })) : saveSuccess ? (_jsx(Check, { className: "pointer-events-none h-4 w-4 shrink-0 text-status-success" })) : (_jsx(Save, { className: "pointer-events-none h-4 w-4 shrink-0" })), iconOnly ? null : (_jsx("span", { className: "pointer-events-none", children: isSaving
+                    ? t("charactereditor.Saving")
+                    : saveSuccess
+                        ? t("common.saved")
+                        : t("common.save") }))] }));
+    /** Render the appropriate action button — Save for character, New Chat for companion */
+    const renderActionButton = (iconOnly) => {
+        if (onSave)
+            return renderSaveButton(iconOnly);
+        if (onNewChat)
+            return renderNewChatButton(iconOnly);
+        return null;
+    };
+    return (_jsxs("div", { className: `min-w-0 w-full overflow-visible flex items-center ${className ?? ""}`, "data-no-camera-drag": "true", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [showShellViewToggle && (_jsxs("fieldset", { className: SHELL_SEGMENTED_CONTROL_CLASSNAME, "data-testid": "ui-shell-toggle", "data-no-camera-drag": "true", "aria-label": t("aria.switchShellView"), children: [_jsx("legend", { className: "sr-only", children: t("aria.switchShellView") }), shellOptions.map(({ view, label, Icon }, index) => {
+                                const selected = activeShellView === view;
+                                const edgeClass = index === 0
+                                    ? "rounded-l-xl rounded-r-none"
+                                    : index === shellOptions.length - 1
+                                        ? "rounded-l-none rounded-r-xl"
+                                        : "rounded-none";
+                                return (_jsx(Button, { size: "icon", onClick: () => onShellViewChange(view), onPointerDown: (event) => event.stopPropagation(), className: `h-11 min-h-touch min-w-touch px-3 transition-all duration-200 ${edgeClass} ${selected
+                                        ? SHELL_SEGMENT_ACTIVE_CLASSNAME
+                                        : SHELL_SEGMENT_INACTIVE_CLASSNAME}`, style: HEADER_BUTTON_STYLE, "aria-label": label, "aria-pressed": selected, title: label, "data-testid": `ui-shell-toggle-${view}`, children: _jsx(Icon, { className: "pointer-events-none h-4 w-4" }) }, view));
+                            })] })), shouldSplitCompanionDesktopActions ? (_jsx("div", { className: "flex shrink-0 items-center", "data-testid": "companion-header-desktop-voice", "data-no-camera-drag": "true", children: renderVoiceButton(true) })) : null] }), _jsx("div", { className: "flex-1 min-w-0", children: showCompanionControls ? (shouldSplitCompanionDesktopActions ? null : (_jsx("div", { className: "flex items-center justify-center", "data-testid": "companion-header-chat-controls", "data-no-camera-drag": "true", children: _jsxs("div", { className: "inline-flex items-center gap-2", children: [renderVoiceButton(isMobileViewport), renderActionButton(isMobileViewport)] }) }))) : (children) }), _jsxs("div", { className: "flex min-w-0 shrink-0 items-center justify-end gap-2 overflow-visible", "data-testid": "shell-header-right-controls", "data-no-camera-drag": "true", children: [rightExtras, shouldSplitCompanionDesktopActions ? (_jsx("div", { className: "flex shrink-0 items-center", "data-testid": "companion-header-desktop-new-chat", "data-no-camera-drag": "true", children: renderActionButton(true) })) : null, activeShellView === "desktop" ? rightTrailingExtras : null, _jsx("div", { className: `shrink-0 ${languageDropdownClassName ?? ""}`, "data-testid": languageDropdownWrapperTestId, "data-no-camera-drag": "true", children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: controlsVariant, triggerClassName: LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME }) }), _jsx("div", { className: `shrink-0 ${themeToggleWrapperClassName ?? ""}`, "data-testid": themeToggleWrapperTestId, "data-no-camera-drag": "true", children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: controlsVariant, className: `!h-11 !w-11 !min-h-touch !min-w-touch ${themeToggleClassName ?? ""}` }) }), trailingExtras] })] }));
+}

package/components/shell/ShellOverlays.d.ts

@@ -0,0 +1,5 @@
+import type { ActionNotice } from "../../state/types";
+export declare function ShellOverlays({ actionNotice, }: {
+    actionNotice: ActionNotice | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellOverlays.d.ts.map

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

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

package/components/shell/ShellOverlays.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spinner, Z_SHELL_OVERLAY } from "@elizaos/ui";
+import { CompanionGlobalOverlay as GlobalEmoteOverlay } from "../companion/injected.js";
+import { BugReportModal } from "./BugReportModal.js";
+import { CommandPalette } from "./CommandPalette.js";
+import { ComputerUseApprovalOverlay } from "./ComputerUseApprovalOverlay.js";
+import { RestartBanner } from "./RestartBanner.js";
+import { ShortcutsOverlay } from "./ShortcutsOverlay.js";
+export function ShellOverlays({ actionNotice, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(CommandPalette, {}), _jsx(RestartBanner, {}), _jsx(BugReportModal, {}), _jsx(ComputerUseApprovalOverlay, {}), _jsx(ShortcutsOverlay, {}), _jsx(GlobalEmoteOverlay, {}), actionNotice && (_jsxs("div", { className: `fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-2.5 rounded-lg text-sm font-medium z-[${Z_SHELL_OVERLAY}] flex items-center gap-2.5 max-w-[min(92vw,28rem)] ${actionNotice.tone === "error"
+                    ? "bg-danger text-white"
+                    : actionNotice.tone === "success"
+                        ? "bg-ok text-white"
+                        : "bg-accent text-accent-fg"}`, role: "status", "aria-live": "polite", "aria-busy": actionNotice.busy ? true : undefined, children: [actionNotice.busy ? (_jsx(Spinner, { size: 16, className: "shrink-0 opacity-95", "aria-hidden": true })) : null, _jsx("span", { className: "text-left leading-snug", children: actionNotice.text })] }))] }));
+}

package/components/shell/ShortcutsOverlay.d.ts

@@ -0,0 +1,2 @@
+export declare function ShortcutsOverlay(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShortcutsOverlay.d.ts.map

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

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

package/components/shell/ShortcutsOverlay.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@elizaos/ui";
+import { useEffect, useState } from "react";
+import { COMMON_SHORTCUTS } from "../../hooks/index.js";
+import { useApp } from "../../state/index.js";
+function formatKey(shortcut) {
+    const isMac = typeof navigator !== "undefined" && navigator.platform?.includes("Mac");
+    const parts = [];
+    if (shortcut.ctrl) {
+        parts.push(isMac ? "\u2318" : "Ctrl");
+    }
+    if (shortcut.shift) {
+        parts.push(isMac ? "\u21E7" : "Shift");
+    }
+    if (shortcut.alt) {
+        parts.push(isMac ? "\u2325" : "Alt");
+    }
+    if (shortcut.meta) {
+        parts.push(isMac ? "\u2318" : "Win");
+    }
+    parts.push(shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key);
+    return parts.join(isMac ? "" : "+");
+}
+export function ShortcutsOverlay() {
+    const { t } = useApp();
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.shiftKey && event.key === "?") {
+                const tag = event.target?.tagName;
+                if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+                    return;
+                }
+                event.preventDefault();
+                setOpen((value) => !value);
+            }
+            if (event.key === "Escape" && open) {
+                event.preventDefault();
+                setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [open]);
+    const grouped = {};
+    for (const shortcut of COMMON_SHORTCUTS) {
+        const scope = shortcut.scope ?? "global";
+        if (!grouped[scope]) {
+            grouped[scope] = [];
+        }
+        grouped[scope].push(shortcut);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-lg rounded-xl max-h-[80vh] overflow-y-auto p-0", children: [_jsx(DialogHeader, { className: "px-5 py-4", style: { borderBottom: "1px solid var(--border)" }, children: _jsx(DialogTitle, { className: "text-base font-bold", children: t("shortcutsoverlay.KeyboardShortcuts") }) }), _jsx("div", { className: "p-5 space-y-5", children: Object.entries(grouped).map(([scope, shortcuts]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-xs-tight uppercase tracking-wide font-medium mb-2", style: { color: "var(--muted)" }, children: scope }), _jsx("div", { className: "space-y-1", children: shortcuts.map((shortcut) => (_jsxs("div", { className: "flex items-center justify-between py-1.5 px-2 rounded", children: [_jsx("span", { className: "text-sm", style: { color: "var(--text)" }, children: shortcut.description }), _jsx("kbd", { className: "inline-flex items-center gap-0.5 px-2 py-0.5 text-xs-tight font-mono rounded", style: {
+                                                background: "var(--bg-hover)",
+                                                border: "1px solid var(--border)",
+                                                color: "var(--muted)",
+                                            }, children: formatKey(shortcut) })] }, `${shortcut.key}-${shortcut.description}`))) })] }, scope))) })] }) }));
+}

package/components/shell/SplashServerChooser.d.ts

@@ -0,0 +1,14 @@
+import type { GatewayDiscoveryEndpoint } from "../../bridge/gateway-discovery";
+interface SplashServerChooserProps {
+    discoveryLoading: boolean;
+    gateways: GatewayDiscoveryEndpoint[];
+    showCreateLocal: boolean;
+    t: (key: string, values?: Record<string, unknown>) => string;
+    onCreateLocal: () => void;
+    onManualConnect: () => void;
+    onManageCloudAgents: () => void;
+    onConnectGateway: (gateway: GatewayDiscoveryEndpoint) => void;
+}
+export declare function SplashServerChooser({ gateways, showCreateLocal, t, onCreateLocal, onManualConnect, onManageCloudAgents, onConnectGateway, }: SplashServerChooserProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SplashServerChooser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplashServerChooser.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/SplashServerChooser.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAI/E,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;IAC7D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC/D;AAWD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,CAAC,EACD,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,GACjB,EAAE,wBAAwB,2CAgH1B"}

package/components/shell/SplashServerChooser.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent } from "@elizaos/ui";
+const MONO_FONT = "'Courier New', 'Courier', 'Monaco', monospace";
+function gatewayLabel(gateway, t) {
+    return gateway.isLocal
+        ? t("startupshell.LocalNetworkAgent", { defaultValue: "LAN agent" })
+        : t("startupshell.NetworkAgent", { defaultValue: "Network agent" });
+}
+export function SplashServerChooser({ gateways, showCreateLocal, t, onCreateLocal, onManualConnect, onManageCloudAgents, onConnectGateway, }) {
+    return (_jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 text-left", children: [gateways.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: gateways.map((gateway) => (_jsx(Card, { className: "border-2 border-black bg-white shadow-md", children: _jsxs(CardContent, { className: "flex items-center justify-between gap-3 px-3 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-black/60", children: gatewayLabel(gateway, t) }), _jsx("p", { className: "truncate text-sm font-semibold text-black", children: gateway.name }), _jsx("p", { className: "truncate text-xs-tight text-black/70", children: gateway.host })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "shrink-0 border-2 border-black bg-white text-black font-semibold hover:bg-black hover:text-[#ffe600]", onClick: () => onConnectGateway(gateway), children: t("common.connect", { defaultValue: "Connect" }) })] }) }, gateway.stableId))) })), showCreateLocal ? (_jsx(Button, { type: "button", variant: "default", className: "justify-start border-2 border-black bg-black px-3 py-5 text-left text-[#ffe600] font-semibold shadow-md hover:bg-[#ffe600] hover:text-black hover:border-black", onClick: onCreateLocal, children: _jsxs("span", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-[#ffe600]/80", children: t("startupshell.CreateAgentLabel", {
+                                defaultValue: "Desktop only",
+                            }) }), _jsx("span", { className: "text-sm font-bold", children: t("startupshell.CreateLocalAgent", {
+                                defaultValue: "Create Local Agent",
+                            }) })] }) })) : null, _jsx(Button, { type: "button", variant: "default", className: "justify-start border-2 border-black bg-white px-3 py-5 text-left text-black font-semibold shadow-md hover:bg-black hover:text-[#ffe600]", onClick: onManageCloudAgents, children: _jsxs("span", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-black/60", children: t("common.elizaCloud", {
+                                defaultValue: "Eliza Cloud",
+                            }) }), _jsx("span", { className: "text-sm font-bold", children: t("startupshell.ManageCloudAgents", {
+                                defaultValue: "Manage Cloud Agents",
+                            }) })] }) }), _jsx(Button, { type: "button", variant: "default", className: "justify-start border-2 border-black bg-white px-3 py-5 text-left text-black font-semibold shadow-md hover:bg-black hover:text-[#ffe600]", onClick: onManualConnect, children: _jsxs("span", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { style: { fontFamily: MONO_FONT }, className: "text-3xs uppercase text-black/60", children: t("startupshell.RemoteAgentLabel", {
+                                defaultValue: "Remote server",
+                            }) }), _jsx("span", { className: "text-sm font-bold", children: t("startupshell.ConnectToRemote", {
+                                defaultValue: "Connect to Remote Agent",
+                            }) })] }) })] }));
+}

package/components/shell/StartupFailureView.d.ts

@@ -0,0 +1,8 @@
+import type { StartupErrorState } from "../../state";
+interface StartupFailureViewProps {
+    error: StartupErrorState;
+    onRetry: () => void;
+}
+export declare function StartupFailureView({ error, onRetry, }: StartupFailureViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StartupFailureView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StartupFailureView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/StartupFailureView.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAwCrD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,GACR,EAAE,uBAAuB,2CAqLzB"}

package/components/shell/StartupFailureView.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner, Button, Card, CardContent, CardDescription, CardHeader, StatusBadge, } from "@elizaos/ui";
+import { useState } from "react";
+import { client } from "../../api/index.js";
+import { useBranding } from "../../config/branding.js";
+import { useOptionalBugReport } from "../../hooks/index.js";
+import { useApp } from "../../state/index.js";
+function startupReasonLabel(t, reason) {
+    switch (reason) {
+        case "backend-timeout":
+            return t("startupfailureview.BackendTimeout", {
+                defaultValue: "Backend Timeout",
+            });
+        case "backend-unreachable":
+            return t("startupfailureview.BackendUnreachable", {
+                defaultValue: "Backend Unreachable",
+            });
+        case "agent-timeout":
+            return t("startupfailureview.AgentTimeout", {
+                defaultValue: "Agent Timeout",
+            });
+        case "agent-error":
+            return t("startupfailureview.AgentError", {
+                defaultValue: "Agent Error",
+            });
+        case "asset-missing":
+            return t("startupfailureview.AssetMissing", {
+                defaultValue: "Asset Missing",
+            });
+        case "unknown":
+            return t("startupfailureview.Unknown", {
+                defaultValue: "Unknown Error",
+            });
+    }
+}
+const SCREEN_SHELL_CLASS = "relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-bg px-4 py-6 font-body text-txt sm:px-6";
+const SCREEN_CARD_CLASS = "relative z-10 w-full max-w-[720px] overflow-hidden border border-border/60 bg-card/95 shadow-[0_30px_120px_rgba(0,0,0,0.36)] backdrop-blur-xl";
+function buildStartupBugReportDraft(reasonLabel, error) {
+    const logs = [
+        `Reason: ${error.reason}`,
+        `Phase: ${error.phase}`,
+        typeof error.status === "number" ? `Status: ${error.status}` : null,
+        error.path ? `Path: ${error.path}` : null,
+        error.detail ? `Detail: ${error.detail}` : null,
+    ]
+        .filter(Boolean)
+        .join("\n");
+    return {
+        description: `${reasonLabel}: ${error.message}`.slice(0, 80),
+        stepsToReproduce: "1. Launch the desktop app.\n2. Wait for startup to fail.\n3. Observe the startup failure screen.",
+        expectedBehavior: "The app should finish startup and show the main shell.",
+        actualBehavior: error.message,
+        logs,
+    };
+}
+function normalizeReportUrl(url) {
+    if (!url)
+        return null;
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === "https:" ? parsed.toString() : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function StartupFailureView({ error, onRetry, }) {
+    const { t } = useApp();
+    const branding = useBranding();
+    const bugReport = useOptionalBugReport();
+    const [reportState, setReportState] = useState("idle");
+    const [reportMessage, setReportMessage] = useState(null);
+    const isBackendUnreachable = error.reason === "backend-unreachable";
+    const reasonLabel = startupReasonLabel(t, error.reason);
+    const startupDraft = buildStartupBugReportDraft(reasonLabel, error);
+    async function handleShareReport() {
+        setReportState("submitting");
+        setReportMessage(null);
+        try {
+            const info = await client.checkBugReportInfo();
+            const result = await client.submitBugReport({
+                category: "startup-failure",
+                description: `${branding.appName} startup failed: ${reasonLabel}`,
+                stepsToReproduce: `1. Launch ${branding.appName}\n2. Wait for startup to complete\n3. Observe the startup failure screen`,
+                expectedBehavior: `${branding.appName} should finish startup successfully.`,
+                actualBehavior: error.message,
+                environment: info.platform === "darwin"
+                    ? "macOS"
+                    : info.platform === "win32"
+                        ? "Windows"
+                        : info.platform === "linux"
+                            ? "Linux"
+                            : info.platform || "Unknown",
+                nodeVersion: info.nodeVersion,
+                logs: [
+                    `reason=${error.reason}`,
+                    `phase=${error.phase}`,
+                    error.status ? `status=${error.status}` : null,
+                    error.path ? `path=${error.path}` : null,
+                    error.detail ? `detail=${error.detail}` : null,
+                ]
+                    .filter(Boolean)
+                    .join("\n"),
+                startup: {
+                    reason: error.reason,
+                    phase: error.phase,
+                    message: error.message,
+                    detail: error.detail,
+                    status: error.status,
+                    path: error.path,
+                },
+            });
+            const safeResultUrl = normalizeReportUrl(result.url);
+            if (safeResultUrl) {
+                setReportState("success");
+                setReportMessage(`Report shared: ${safeResultUrl}`);
+                return;
+            }
+            if (result.accepted) {
+                setReportState("success");
+                setReportMessage("Diagnostic report shared successfully.");
+                return;
+            }
+            if (result.fallback) {
+                setReportState("error");
+                setReportMessage(bugReport
+                    ? "Automatic sharing is unavailable. Use Report Bug to review and submit it manually."
+                    : "Automatic sharing is unavailable on this screen.");
+                return;
+            }
+            setReportState("error");
+            setReportMessage("Failed to share diagnostic report.");
+        }
+        catch (submitError) {
+            setReportState("error");
+            setReportMessage(submitError instanceof Error
+                ? submitError.message
+                : "Failed to share diagnostic report.");
+        }
+    }
+    return (_jsxs("div", { className: SCREEN_SHELL_CLASS, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(220,38,38,0.1),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_42%)]" }), _jsxs(Card, { className: SCREEN_CARD_CLASS, children: [_jsx(CardHeader, { className: "bg-danger/5 pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(StatusBadge, { label: reasonLabel, variant: "danger", withDot: true, className: "self-start" }), _jsx("div", { className: "space-y-2", children: _jsxs("h1", { className: "text-xl font-semibold leading-tight text-danger", children: [t("startupfailureview.StartupFailed"), " ", reasonLabel] }) }), isBackendUnreachable ? null : null] }) }), _jsxs(CardContent, { className: "flex flex-col gap-5 pt-6", children: [reportMessage ? (_jsx(Banner, { variant: reportState === "success" ? "info" : "error", className: "rounded-xl text-xs", children: reportMessage })) : null, error.detail ? (_jsxs("section", { className: "space-y-2 rounded-2xl border border-border/50 bg-bg/35 p-4 shadow-sm", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.08em] text-muted", children: t("common.details", {
+                                            defaultValue: "Details",
+                                        }) }), _jsx("pre", { className: "max-h-60 overflow-auto rounded-xl border border-border bg-bg-muted p-3 text-xs leading-relaxed text-muted whitespace-pre-wrap break-words", children: error.detail })] })) : (_jsx(CardDescription, { className: "max-w-[56ch] leading-relaxed", children: reasonLabel })), _jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "lg", onClick: onRetry, className: "w-full sm:w-auto sm:min-w-[11rem]", children: t("startupfailureview.RetryStartup") }), bugReport ? (_jsx(Button, { variant: "outline", size: "lg", onClick: () => bugReport.open(startupDraft), className: "w-full sm:w-auto sm:min-w-[10rem]", children: t("bugreportmodal.ReportABug") })) : null, _jsx(Button, { variant: "outline", size: "lg", onClick: () => {
+                                            void handleShareReport();
+                                        }, disabled: reportState === "submitting", className: "w-full sm:w-auto sm:min-w-[12rem]", children: reportState === "submitting"
+                                            ? "Sharing report..."
+                                            : "Share diagnostic report" }), isBackendUnreachable ? (_jsx(Button, { variant: "outline", size: "lg", asChild: true, className: "w-full sm:w-auto sm:min-w-[10rem]", children: _jsx("a", { href: branding.appUrl, target: "_blank", rel: "noreferrer", children: t("startupfailureview.OpenApp") }) })) : null] })] })] })] }));
+}

package/components/shell/StartupShell.d.ts

@@ -0,0 +1,12 @@
+/**
+ * StartupShell — the front door to the app.
+ *
+ * Shows a branded splash with retro progress bar during ALL startup phases.
+ * New users see the server chooser first. Returning users see the progress bar
+ * immediately. The splash stays visible until the app is FULLY loaded
+ * (including a brief settle delay after coordinator reaches ready).
+ *
+ * Non-loading phases (error, pairing, onboarding) delegate to their views.
+ */
+export declare function StartupShell(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StartupShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StartupShell.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/StartupShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAiEH,wBAAgB,YAAY,mDAoP3B"}