@elizaos/ui 2.0.3-beta.5 → 2.0.3-beta.7

package/components/settings/CloudOverviewSection.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bot, Cloud, CreditCard, KeyRound, Plug, Rocket, Store, } from "lucide-react";
+import { useCallback } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { Button } from "../ui/button.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+const CLOUD_FEATURES = [
+    {
+        icon: Plug,
+        label: "Hosted connectors",
+        description: "Run Discord, Telegram, Twilio, WhatsApp, Google, and Microsoft connections through hosted Cloud infrastructure.",
+    },
+    {
+        icon: Bot,
+        label: "Cloud agents",
+        description: "Keep agents online when this Mac is asleep and switch between hosted agents from every device.",
+    },
+    {
+        icon: KeyRound,
+        label: "API keys and app publishing",
+        description: "Create Cloud API keys, register apps, and connect external products to your agents.",
+    },
+    {
+        icon: CreditCard,
+        label: "Credits and billing",
+        description: "Use shared Cloud inference, track spend, and configure top-ups from one account.",
+    },
+    {
+        icon: Store,
+        label: "Marketplace and monetization",
+        description: "Publish apps, sell capabilities, and unlock creator revenue surfaces as they roll out.",
+    },
+];
+export function CloudOverviewSection() {
+    const { elizaCloudConnected, elizaCloudLoginBusy, handleCloudLogin, setActionNotice, t, } = useAppSelectorShallow((s) => ({
+        elizaCloudConnected: s.elizaCloudConnected,
+        elizaCloudLoginBusy: s.elizaCloudLoginBusy,
+        handleCloudLogin: s.handleCloudLogin,
+        setActionNotice: s.setActionNotice,
+        t: s.t,
+    }));
+    const handleConnect = useCallback(() => {
+        void handleCloudLogin().catch((error) => {
+            setActionNotice(error instanceof Error ? error.message : "Could not start Cloud login.", "error", 5000);
+        });
+    }, [handleCloudLogin, setActionNotice]);
+    const { ref, agentProps } = useAgentElement({
+        id: "cloud-connect",
+        role: "button",
+        label: elizaCloudConnected ? "Open Eliza Cloud" : "Connect Eliza Cloud",
+        group: "cloud",
+        status: elizaCloudConnected ? "connected" : "available",
+        onActivate: elizaCloudLoginBusy ? undefined : handleConnect,
+    });
+    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { title: t("settings.cloudOverview.title", {
+                    defaultValue: "Eliza Cloud",
+                }), description: t("settings.cloudOverview.description", {
+                    defaultValue: "Keep Milady local-first, then add hosted services when you want always-on agents, managed connectors, publishing, and account-backed inference.",
+                }), action: _jsxs(Button, { ref: ref, size: "sm", onClick: handleConnect, disabled: elizaCloudLoginBusy, ...agentProps, children: [_jsx(Cloud, { className: "h-4 w-4", "aria-hidden": true }), elizaCloudLoginBusy
+                            ? t("settings.cloudOverview.connecting", {
+                                defaultValue: "Connecting...",
+                            })
+                            : elizaCloudConnected
+                                ? t("settings.cloudOverview.connectedCta", {
+                                    defaultValue: "Cloud connected",
+                                })
+                                : t("settings.cloudOverview.connectCta", {
+                                    defaultValue: "Connect Cloud",
+                                })] }), children: _jsx(SettingsRow, { icon: Rocket, label: t("settings.cloudOverview.localModeLabel", {
+                        defaultValue: elizaCloudConnected
+                            ? "Cloud is connected"
+                            : "Local mode is active",
+                    }), description: t("settings.cloudOverview.localModeDescription", {
+                        defaultValue: elizaCloudConnected
+                            ? "Milady can use Cloud account features while keeping this local runtime available."
+                            : "This build keeps agent runtime and local connectors on your machine unless you choose to connect Cloud.",
+                    }) }) }), _jsx(SettingsGroup, { title: t("settings.cloudOverview.unlockTitle", {
+                    defaultValue: "Unlock with Cloud",
+                }), children: CLOUD_FEATURES.map((feature) => (_jsx(SettingsRow, { icon: feature.icon, label: feature.label, description: feature.description }, feature.label))) })] }));
+}

package/components/settings/ConnectorsSection.d.ts

@@ -5,5 +5,24 @@
  * polymorphism for runtime type branching) explicitly allows this for
  * adapter/target registries.
  */
+import type { ConnectorMode } from "../connectors/ConnectorModeSelector.helpers.js";
+/**
+ * Whether Settings → Connectors should render the generic plugin-config (env
+ * credential) form for the selected connector mode.
+ *
+ * The form is shown ONLY for a `local-config` mode whose setup target is the
+ * plugin itself and that actually declares parameters. Every other mode kind —
+ * `local-setup` (iMessage Full-Disk-Access status, Signal/WhatsApp QR pairing,
+ * Discord/Telegram desktop panels), `plugin-managed` account lists, and
+ * `cloud-managed` gateways — keeps its dedicated {@link ConnectorSetupPanel}
+ * surface. Gating on the mode KIND rather than the incidental
+ * "this plugin declares parameters" is what keeps those dedicated panels
+ * reachable instead of being overwritten by a raw env form.
+ */
+export declare function shouldRenderConnectorConfigForm(args: {
+    managementMode: ConnectorMode["managementMode"];
+    hasParameters: boolean;
+    setupTargetsPlugin: boolean;
+}): boolean;
 export declare function ConnectorsSection(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConnectorsSection.d.ts.map

package/components/settings/ConnectorsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectorsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ConnectorsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkMH,wBAAgB,iBAAiB,4CAuGhC"}
+{"version":3,"file":"ConnectorsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ConnectorsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAoBjF;;;;;;;;;;;;GAYG;AACH,wBAAgB,+BAA+B,CAAC,IAAI,EAAE;IACpD,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,GAAG,OAAO,CAMV;AA2PD,wBAAgB,iBAAiB,4CAuGhC"}

package/components/settings/ConnectorsSection.js

@@ -6,21 +6,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * polymorphism for runtime type branching) explicitly allows this for
  * adapter/target registries.
  */
-import { Puzzle } from "lucide-react";
+import { Puzzle, Save } from "lucide-react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { clearPendingFocusConnector, FOCUS_CONNECTOR_EVENT, readPendingFocusConnector, } from "../../events/index.js";
 import { useAppSelector } from "../../state/index.js";
-import { BlueBubblesStatusPanel } from "../connectors/BlueBubblesStatusPanel.js";
-import { DiscordLocalConnectorPanel } from "../connectors/DiscordLocalConnectorPanel.js";
-import { IMessageStatusPanel } from "../connectors/IMessageStatusPanel.js";
-import { SignalQrOverlay } from "../connectors/SignalQrOverlay.js";
-import { TelegramAccountConnectorPanel } from "../connectors/TelegramAccountConnectorPanel.js";
-import { WhatsAppQrOverlay } from "../connectors/WhatsAppQrOverlay.js";
+import { ConnectorModeSelector } from "../connectors/ConnectorModeSelector.js";
+import { useConnectorMode } from "../connectors/ConnectorModeSelector.hooks.js";
+import { ConnectorSetupPanel } from "../connectors/ConnectorSetupPanel.js";
+import { hasConnectorSetupPanel } from "../connectors/ConnectorSetupPanel.helpers.js";
 import { getBrandIcon } from "../conversations/brand-icons.js";
+import { PluginConfigForm, TelegramPluginConfig, } from "../pages/PluginConfigForm.js";
 import { ALWAYS_ON_PLUGIN_IDS, iconImageSource, resolveIcon, } from "../pages/plugin-list-utils.js";
+import { Button } from "../ui/button.js";
 import { Switch } from "../ui/switch.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+/**
+ * Whether Settings → Connectors should render the generic plugin-config (env
+ * credential) form for the selected connector mode.
+ *
+ * The form is shown ONLY for a `local-config` mode whose setup target is the
+ * plugin itself and that actually declares parameters. Every other mode kind —
+ * `local-setup` (iMessage Full-Disk-Access status, Signal/WhatsApp QR pairing,
+ * Discord/Telegram desktop panels), `plugin-managed` account lists, and
+ * `cloud-managed` gateways — keeps its dedicated {@link ConnectorSetupPanel}
+ * surface. Gating on the mode KIND rather than the incidental
+ * "this plugin declares parameters" is what keeps those dedicated panels
+ * reachable instead of being overwritten by a raw env form.
+ */
+export function shouldRenderConnectorConfigForm(args) {
+    return (args.managementMode === "local-config" &&
+        args.hasParameters &&
+        args.setupTargetsPlugin);
+}
 function statusTone(plugin) {
     if (!plugin.enabled)
         return "off";
@@ -50,38 +68,65 @@ function connectorIcon(plugin) {
     const icon = resolveIcon(plugin);
     const imageSrc = typeof icon === "string" ? iconImageSource(icon) : undefined;
     const Inner = typeof icon === "string" || !icon ? null : icon;
-    return forwardRef(function ConnectorMedallionIcon({ className }) {
+    return forwardRef(function ConnectorMedallionIcon({ className }, ref) {
         if (Brand)
             return _jsx(Brand, { className: className });
         if (imageSrc)
             return (_jsx("img", { src: imageSrc, alt: "", className: "h-[18px] w-[18px] shrink-0 rounded-sm object-contain" }));
         const IconComponent = Inner;
         if (IconComponent)
-            return _jsx(IconComponent, { className: className });
-        return _jsx(Puzzle, { className: className, "aria-hidden": true });
+            return _jsx(IconComponent, { ref: ref, className: className });
+        return _jsx(Puzzle, { ref: ref, className: className, "aria-hidden": true });
     });
 }
 function ConnectorBody({ plugin }) {
     const t = useAppSelector((s) => s.t);
-    switch (plugin.id) {
-        case "telegram":
-            return _jsx(TelegramAccountConnectorPanel, {});
-        case "discord":
-            return _jsx(DiscordLocalConnectorPanel, {});
-        case "imessage":
-            return _jsx(IMessageStatusPanel, {});
-        case "bluebubbles":
-            return _jsx(BlueBubblesStatusPanel, {});
-        case "signal":
-            return _jsx(SignalQrOverlay, {});
-        case "whatsapp":
-            return _jsx(WhatsAppQrOverlay, {});
-        default:
-            return (_jsx("div", { className: "text-xs-tight text-muted", children: t("settings.sections.connectors.ownSetupSurface", {
+    const elizaCloudConnected = useAppSelector((s) => s.elizaCloudConnected);
+    const handlePluginConfigSave = useAppSelector((s) => s.handlePluginConfigSave);
+    const pluginSaving = useAppSelector((s) => s.pluginSaving);
+    const pluginSaveSuccess = useAppSelector((s) => s.pluginSaveSuccess);
+    const [pluginConfigs, setPluginConfigs] = useState({});
+    const connectorMode = useConnectorMode(plugin.id, { elizaCloudConnected });
+    const setupPluginId = connectorMode.setupPluginId;
+    const setupPanel = setupPluginId && hasConnectorSetupPanel(setupPluginId) ? (_jsx(ConnectorSetupPanel, { pluginId: setupPluginId })) : null;
+    const selectedMode = connectorMode.modes.find((mode) => mode.id === connectorMode.selectedMode);
+    const showPluginConfig = shouldRenderConnectorConfigForm({
+        managementMode: selectedMode?.managementMode,
+        hasParameters: plugin.parameters.length > 0,
+        setupTargetsPlugin: setupPluginId === plugin.id,
+    });
+    const pendingConfig = pluginConfigs[plugin.id] ?? {};
+    const hasPendingConfig = Object.keys(pendingConfig).length > 0;
+    const isSaving = pluginSaving.has(plugin.id);
+    const didSave = pluginSaveSuccess.has(plugin.id);
+    const handleParamChange = useCallback((pluginId, paramKey, value) => {
+        setPluginConfigs((prev) => ({
+            ...prev,
+            [pluginId]: { ...prev[pluginId], [paramKey]: value },
+        }));
+    }, []);
+    const handleSave = useCallback(async () => {
+        await handlePluginConfigSave(plugin.id, pendingConfig);
+        setPluginConfigs((prev) => {
+            const next = { ...prev };
+            delete next[plugin.id];
+            return next;
+        });
+    }, [handlePluginConfigSave, pendingConfig, plugin.id]);
+    return (_jsxs("div", { className: "space-y-4", children: [connectorMode.modes.length > 1 ? (_jsx(ConnectorModeSelector, { connectorId: plugin.id, selectedMode: connectorMode.selectedMode, onModeChange: connectorMode.setSelectedMode, elizaCloudConnected: elizaCloudConnected })) : null, showPluginConfig ? (_jsxs("div", { className: "space-y-3", children: [plugin.id === "telegram" ? (_jsx(TelegramPluginConfig, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })) : (_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", className: "h-8 gap-1.5 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
+                                    void handleSave();
+                                }, disabled: !hasPendingConfig || isSaving, children: [_jsx(Save, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), isSaving
+                                        ? t("common.saving", { defaultValue: "Saving..." })
+                                        : didSave
+                                            ? t("pluginsview.Saved", { defaultValue: "Saved" })
+                                            : t("pluginsview.SaveSettings", {
+                                                defaultValue: "Save settings",
+                                            })] }), plugin.id === "discord" ? (_jsx("span", { className: "text-xs-tight text-muted", children: t("settings.sections.connectors.discordAppIdHint", {
+                                    defaultValue: "Application ID is optional; it is auto-resolved from the bot token when possible.",
+                                }) })) : null] })] })) : setupPanel ? (setupPanel) : (_jsx("div", { className: "text-xs-tight text-muted", children: t("settings.sections.connectors.ownSetupSurface", {
                     defaultValue: "{{name}} uses its own setup surface.",
                     name: plugin.name,
-                }) }));
-    }
+                }) }))] }));
 }
 function ConnectorEnableSwitch({ plugin, busy, onToggle, }) {
     const t = useAppSelector((s) => s.t);

package/components/settings/settings-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-sections.ts"],"names":[],"mappings":"AAoCA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAMvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK1E,CAAC;AA8IF,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAsB9C,CAAC;AAsBL;mEACmE;AACnE,wBAAgB,sBAAsB,IAAI,kBAAkB,EAAE,CAE7D;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAK3D"}
+{"version":3,"file":"settings-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-sections.ts"],"names":[],"mappings":"AA0CA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAMvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK1E,CAAC;AA8IF,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAsB9C,CAAC;AA4CL;mEACmE;AACnE,wBAAgB,sBAAsB,IAAI,kBAAkB,EAAE,CAE7D;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAK3D"}

package/components/settings/settings-sections.js

@@ -1,4 +1,4 @@
-import { Archive, Bot, Brain, KeyRound, LayoutGrid, Lock, Mic, Palette, Puzzle, RefreshCw, Server, Shield, ShieldCheck, SlidersHorizontal, User, Wallet, Webhook, } from "lucide-react";
+import { Archive, Bot, Brain, Cloud, KeyRound, LayoutGrid, Lock, Mic, Palette, Puzzle, RefreshCw, Server, Shield, ShieldCheck, SlidersHorizontal, User, Wallet, Webhook, } from "lucide-react";
 import { ReleaseCenterView } from "../pages/ReleaseCenterView.js";
 import { AdvancedSection } from "./AdvancedSection.js";
 import { AppearanceSettingsSection } from "./AppearanceSettingsSection.js";
@@ -6,6 +6,7 @@ import { AppPermissionsSection } from "./AppPermissionsSection.js";
 import { AppsManagementSection } from "./AppsManagementSection.js";
 import { CapabilitiesSection } from "./CapabilitiesSection.js";
 import { CloudAgentsSection } from "./CloudAgentsSection.js";
+import { CloudOverviewSection } from "./CloudOverviewSection.js";
 import { ConnectorsSection } from "./ConnectorsSection.js";
 import { IdentitySettingsSection } from "./IdentitySettingsSection.js";
 import { PermissionsSection } from "./PermissionsSection.js";
@@ -14,6 +15,7 @@ import { RemotePluginHostSection } from "./RemotePluginHostSection.js";
 import { RuntimeSettingsSection } from "./RuntimeSettingsSection.js";
 import { SecretsManagerSection } from "./SecretsManagerSection.js";
 import { SecuritySettingsSection } from "./SecuritySettingsSection.js";
+import { CLOUD_SETTINGS_GROUP_ID, registerSettingsGroup, } from "../../cloud/settings/cloud-settings-group.js";
 import { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, SETTINGS_SECTION_META, } from "./settings-section-meta.js";
 import { listSettingsSections, registerSettingsSection, } from "./settings-section-registry.js";
 import { VoiceSectionMount } from "./VoiceSectionMount.js";
@@ -184,10 +186,30 @@ export const SETTINGS_SECTIONS = SETTINGS_SECTION_META.map((meta, index) => {
 });
 for (const section of SETTINGS_SECTIONS)
     registerSettingsSection(section);
+registerSettingsGroup({
+    id: CLOUD_SETTINGS_GROUP_ID,
+    label: "Cloud",
+    order: 1.5,
+});
+registerSettingsSection({
+    id: "cloud-overview",
+    label: "settings.sections.cloudOverview.label",
+    defaultLabel: "Overview",
+    icon: Cloud,
+    tone: "accent",
+    hue: "accent",
+    group: CLOUD_SETTINGS_GROUP_ID,
+    titleKey: "settings.sections.cloudOverview.title",
+    defaultTitle: "Eliza Cloud",
+    order: 1.45,
+    Component: CloudOverviewSection,
+});
 // Eliza Cloud agent manager — contributed through the pluggable registry rather
 // than the canonical META list, so it surfaces in Settings (list / switch /
 // create+name / delete agents) without changing the built-in section count that
-// the dev-route-catalog test pins. Ordered right after the AI Model section.
+// the dev-route-catalog test pins. It lives under the local Cloud group with the
+// upsell overview, while full Cloud-only account/billing/API surfaces remain
+// opt-in through registerCloudSettingsSections().
 registerSettingsSection({
     id: "cloud-agents",
     label: "settings.sections.cloudAgents.label",
@@ -195,10 +217,10 @@ registerSettingsSection({
     icon: Bot,
     tone: "accent",
     hue: "accent",
-    group: "agent",
+    group: CLOUD_SETTINGS_GROUP_ID,
     titleKey: "settings.sections.cloudAgents.title",
     defaultTitle: "Eliza Cloud Agents",
-    order: 1.5,
+    order: 1.55,
     Component: CloudAgentsSection,
 });
 /** Every section the Settings view should render — built-ins plus any added by

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

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

package/components/shell/ComputerUseApprovalOverlay.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { supportsFullAppShellRoutes } from "../../api/app-shell-capabilities.js";
 import { client } from "../../api/client.js";
 import { useAppSelector } from "../../state/index.js";
 import { openEventSource } from "../../utils/event-source.js";
@@ -27,6 +28,7 @@ function approvalStreamUrl() {
 export function ComputerUseApprovalOverlay() {
     const setActionNotice = useAppSelector((s) => s.setActionNotice);
     const t = useAppSelector((s) => s.t);
+    const appShellRoutesSupported = supportsFullAppShellRoutes(client.getBaseUrl());
     const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
     const [busyApprovalId, setBusyApprovalId] = useState(null);
     const [denyTargetId, setDenyTargetId] = useState(null);
@@ -34,14 +36,22 @@ export function ComputerUseApprovalOverlay() {
     const dialogRef = useRef(null);
     const previousFocusRef = useRef(null);
     const refresh = useCallback(async () => {
+        if (!appShellRoutesSupported) {
+            setSnapshot(EMPTY_SNAPSHOT);
+            return;
+        }
         try {
             setSnapshot(await client.getComputerUseApprovals());
         }
         catch {
             setSnapshot(EMPTY_SNAPSHOT);
         }
-    }, []);
+    }, [appShellRoutesSupported]);
     useEffect(() => {
+        if (!appShellRoutesSupported) {
+            setSnapshot(EMPTY_SNAPSHOT);
+            return undefined;
+        }
         let cancelled = false;
         let pollingTimer = null;
         let eventSource = null;
@@ -101,7 +111,7 @@ export function ComputerUseApprovalOverlay() {
             }
             eventSource?.close();
         };
-    }, [refresh]);
+    }, [appShellRoutesSupported, refresh]);
     // 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.

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

@@ -1 +1 @@
-{"version":3,"file":"ContinuousChatOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ContinuousChatOverlay.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAqCnF,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA8D7E;;+CAE+C;AAC/C,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,OAAO,GACP,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,CAAC;AAEhB;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAw0B1D,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,SAAmB,EACnB,KAAK,EAAE,SAAS,GACjB,EAAE;IACD,UAAU,EAAE,eAAe,CAAC;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAknFpB"}
+{"version":3,"file":"ContinuousChatOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ContinuousChatOverlay.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAqCnF,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA8D7E;;+CAE+C;AAC/C,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,OAAO,GACP,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,CAAC;AAEhB;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AA60B1D,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,SAAmB,EACnB,KAAK,EAAE,SAAS,GACjB,EAAE;IACD,UAAU,EAAE,eAAe,CAAC;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+oFpB"}

package/components/shell/ContinuousChatOverlay.js

@@ -360,10 +360,12 @@ function useDebouncedTurnStatus(status) {
  * `speaking`; every other phase is neutral white. No blue anywhere. Degrades to
  * plain dots when no status has arrived.
  */
-function TurnStatusInner({ status, }) {
+function TurnStatusInner({ status, showLabel = true, }) {
     const shown = useDebouncedTurnStatus(status);
     const speaking = shown?.kind === "speaking";
-    const label = shown && shown.kind !== "thinking" ? turnStatusLabel(shown) : null;
+    const label = showLabel && shown && shown.kind !== "thinking"
+        ? turnStatusLabel(shown)
+        : null;
     return (_jsxs("span", { className: "inline-flex items-center gap-2", "data-testid": "turn-status-indicator", "data-status-kind": shown?.kind ?? "none", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "flex gap-1.5", "data-testid": "typing-dots", "aria-hidden": "true", children: [0, 1, 2].map((i) => (_jsx("span", { className: cn("h-1.5 w-1.5 animate-pulse rounded-full motion-reduce:animate-none", speaking ? "bg-[rgba(255,190,140,0.9)]" : "bg-white/70"), style: { animationDelay: `${i * 180}ms` } }, i))) }), label ? (_jsx("span", { className: cn("text-[13px] font-medium", speaking ? "text-[rgba(255,200,150,0.95)]" : "text-white/90"), "data-testid": "turn-status-label", children: label })) : null] }));
 }
 /**
@@ -480,7 +482,7 @@ const ThreadLine = React.memo(function ThreadLine({ message, floating, reduce, o
                     ? "bg-white/20 text-white"
                     : "bg-white/10 text-white/90"), children: [_jsx("div", { "data-chat-selectable": "true", children: isAssistant &&
                         !message.content.trim() &&
-                        !message.attachments?.length ? (_jsxs(_Fragment, { children: [_jsx(TurnStatusInner, { status: turnStatus ?? null }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : isUser ? (_jsxs(_Fragment, { children: [_jsx(ThreadLineText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(InlineWidgetText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null, message.secretRequest ? (_jsx("div", { className: "pointer-events-auto", children: _jsx(SensitiveRequestBlock, { request: message.secretRequest }) })) : null, !suppressReasoning && message.reasoning?.trim() ? (_jsx(ThinkingBlock, { reasoning: message.reasoning })) : null] })) }), _jsx(AnimatePresence, { children: copied ? (_jsx(motion.span, { "data-testid": "thread-line-copied", initial: reduce ? { opacity: 0 } : { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.18 }, className: "pointer-events-none absolute -top-2 right-2 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-medium text-black", children: "Copied" }, "copied")) : null })] }) }));
+                        !message.attachments?.length ? (_jsxs(_Fragment, { children: [_jsx(TurnStatusInner, { status: turnStatus ?? null, showLabel: false }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : isUser ? (_jsxs(_Fragment, { children: [_jsx(ThreadLineText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(InlineWidgetText, { content: message.content }), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null, message.secretRequest ? (_jsx("div", { className: "pointer-events-auto", children: _jsx(SensitiveRequestBlock, { request: message.secretRequest }) })) : null, !suppressReasoning && message.reasoning?.trim() ? (_jsx(ThinkingBlock, { reasoning: message.reasoning })) : null] })) }), _jsx(AnimatePresence, { children: copied ? (_jsx(motion.span, { "data-testid": "thread-line-copied", initial: reduce ? { opacity: 0 } : { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.18 }, className: "pointer-events-none absolute -top-2 right-2 rounded-full bg-white/90 px-2 py-0.5 text-[11px] font-medium text-black", children: "Copied" }, "copied")) : null })] }) }));
 });
 export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash: slashProp, }) {
     const { messages, phase, responding, turnStatus, send, canSend, recording, startRecording, stopRecording, handsFree, toggleHandsFree, transcriptionMode, toggleTranscriptionMode, stopTranscriptionAndMic, setDictationSink, setTranscriptSessionSink, setComposerHasDraft, transcript, needsAudioUnlock, unlockAudio, openSettings, navigateHome, currentTab, clearConversation, stop, modelStatus, } = controller;
@@ -1395,12 +1397,24 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
     ]);
     const closeSheet = React.useCallback(() => {
         draggingRef.current = false;
-        stopThreadAnimation();
         stopOpenProgressAnimation();
         setFreeH(null);
         setMaximized(false);
         setMode("input");
-    }, [stopThreadAnimation, stopOpenProgressAnimation]);
+        if (reduce) {
+            stopThreadAnimation();
+            threadHeight.set(0);
+        }
+        else {
+            animateThreadHeight(0);
+        }
+    }, [
+        reduce,
+        threadHeight,
+        stopThreadAnimation,
+        stopOpenProgressAnimation,
+        animateThreadHeight,
+    ]);
     // Leaving the chat for Settings/Home: animate OUT of maximize and collapse the
     // sheet (closeSheet un-maximizes + springs the thread height down) BEFORE
     // swapping the page underneath, so it reads as the chat closing into the new
@@ -1463,17 +1477,31 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
         // A detent always clears any free-drag rest height and (since only FULL
         // can be maximized) drops full-bleed when stepping anywhere else.
         draggingRef.current = false;
-        stopThreadAnimation();
         setFreeH(null);
         if (to !== "full")
             setMaximized(false);
         // "collapsed" is the input bar (sheet closed); half/full open the thread.
         setMode(to === "collapsed" ? "input" : to);
+        const target = to === "collapsed" ? 0 : to === "half" ? halfH : openH;
+        if (reduce) {
+            stopThreadAnimation();
+            threadHeight.set(target);
+        }
+        else {
+            animateThreadHeight(target);
+        }
         // Stepping all the way down closes the keyboard (the chat is dismissed).
         if (to === "collapsed")
             inputRef.current?.blur();
         detentHaptic();
-    }, [stopThreadAnimation]);
+    }, [
+        halfH,
+        openH,
+        reduce,
+        threadHeight,
+        stopThreadAnimation,
+        animateThreadHeight,
+    ]);
     const openFromGrabber = React.useCallback(() => {
         if (hasRevealableThread) {
             preFocusCollapsedRef.current = false;
@@ -2042,6 +2070,11 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                 return;
             }
             if (sheetOpen) {
+                if (composerFocusedAtPressRef.current) {
+                    composerFocusedAtPressRef.current = false;
+                    dismissKeyboardToPriorState();
+                    return;
+                }
                 collapse();
                 return;
             }
@@ -2245,7 +2278,7 @@ export function ContinuousChatOverlay({ controller, agentName = "Eliza", slash:
                                             paddingTop: fullBleed
                                                 ? "calc(var(--safe-area-top, 0px) + 0.5rem)"
                                                 : headerPadTop,
-                                        }, className: cn("relative z-10 flex shrink-0 items-center justify-between gap-1.5 overflow-hidden px-3"), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(HeaderButton, { icon: maximized ? Minimize2 : Maximize2, label: maximized ? "exit full screen" : "full screen", active: maximized, onClick: toggleMaximize, testId: "chat-full-maximize" }), hasThread ? (_jsx(HeaderButton, { icon: conversationCopied ? Check : Copy, label: conversationCopied
+                                        }, className: cn("relative z-20 flex shrink-0 items-center justify-between gap-1.5 overflow-hidden px-3"), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(HeaderButton, { icon: maximized ? Minimize2 : Maximize2, label: maximized ? "exit full screen" : "full screen", active: maximized, onClick: toggleMaximize, testId: "chat-full-maximize" }), hasThread ? (_jsx(HeaderButton, { icon: conversationCopied ? Check : Copy, label: conversationCopied
                                                             ? "conversation copied"
                                                             : "copy conversation", onClick: handleCopyConversation, testId: "chat-full-copy-conversation" })) : null, _jsx(HeaderButton, { icon: RotateCcw, label: "clear conversation", onClick: () => clearConversation(), testId: "chat-full-clear" })] }), transcriptionMode ? (_jsx("div", { "data-testid": "chat-transcribing-badge", className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-[var(--brand-orange,#ff6a00)]/15 px-2.5 py-0.5 text-[11px] font-medium text-[var(--brand-orange,#ff6a00)]", children: "Transcribing \u2014 say \u201Cexit transcription mode\u201D to stop" })) : null, _jsx("div", { className: "flex items-center gap-1.5", children: _jsx(HeaderButton, { icon: LayoutGrid, label: "springboard", onClick: () => navigateAndClose(() => navigateHome?.()), testId: "chat-full-springboard" }) })] })) : null, threadPresented ? (_jsx(motion.div, { "data-testid": "chat-thread", className: cn("relative z-10 min-h-0 w-full shrink grow-0 overflow-hidden", 
                                         // When open, fade the top edge into the glass so the topmost

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

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

package/components/shell/ShellHeaderControls.js

@@ -67,7 +67,7 @@ export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLang
             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) => {
+    return (_jsxs("div", { className: `min-w-0 w-full overflow-visible flex items-center ${className ?? ""}`, "data-window-titlebar-padding": "true", "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"

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

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

package/components/shell/StartupFailureView.js

@@ -60,7 +60,9 @@ export function StartupFailureView({ error, onRetry, }) {
     const bugReport = useOptionalBugReport();
     const reasonLabel = startupReasonLabel(t, error.reason);
     const startupDraft = buildStartupBugReportDraft(reasonLabel, error);
-    return (_jsx("div", { className: SCREEN_SHELL_CLASS, children: _jsxs(Card, { className: SCREEN_CARD_CLASS, children: [_jsx(CardHeader, { className: "border-b border-border/10 bg-card pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("span", { "aria-label": reasonLabel, className: "inline-flex h-9 w-9 items-center justify-center rounded-sm border border-destructive/35 bg-destructive/12 text-destructive", role: "img", title: reasonLabel, children: _jsx(AlertCircle, { className: "h-5 w-5", "aria-hidden": true }) }), _jsxs("h1", { className: "text-xl font-semibold leading-tight text-destructive", children: [t("startupfailureview.StartupFailed"), " ", reasonLabel] })] }) }), _jsxs(CardContent, { className: "flex flex-col gap-5 pt-6", children: [_jsx("p", { className: "text-sm leading-relaxed text-txt", children: error.message }), error.detail ? (_jsxs("section", { className: "space-y-2 rounded-sm border border-border/50 bg-bg/35 p-4", 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-sm border border-border/40 bg-card p-3 text-xs leading-relaxed text-muted whitespace-pre-wrap break-words", children: error.detail })] })) : null, _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, error.reason === "backend-unreachable" ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "lg", onClick: () => startFreshFirstRunReload(), className: "w-full sm:w-auto sm:min-w-[10rem]", children: t("startupfailureview.StartOver", {
+    return (_jsx("div", { className: SCREEN_SHELL_CLASS, children: _jsxs(Card, { className: SCREEN_CARD_CLASS, children: [_jsx(CardHeader, { className: "border-b border-border/10 bg-card pb-6 pt-6", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("span", { "aria-label": reasonLabel, className: "inline-flex h-9 w-9 items-center justify-center rounded-sm border border-destructive/35 bg-destructive/12 text-destructive", role: "img", title: reasonLabel, children: _jsx(AlertCircle, { className: "h-5 w-5", "aria-hidden": true }) }), _jsxs("h1", { className: "text-xl font-semibold leading-tight text-destructive", children: [t("startupfailureview.StartupFailed"), " ", reasonLabel] })] }) }), _jsxs(CardContent, { className: "flex flex-col gap-5 pt-6", children: [_jsx("p", { className: "text-sm leading-relaxed text-txt", children: error.message }), error.detail ? (_jsxs("section", { className: "space-y-2 rounded-sm border border-border/50 bg-bg/35 p-4", 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-sm border border-border/40 bg-card p-3 text-xs leading-relaxed text-muted whitespace-pre-wrap break-words", children: error.detail })] })) : null, _jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [error.reason === "backend-unreachable" ? (_jsx(Button, { variant: "default", size: "lg", onClick: () => startFreshFirstRunReload(), className: "w-full sm:w-auto sm:min-w-[11rem]", "data-testid": "startup-use-cloud", children: t("startupfailureview.ChooseElizaCloud", {
+                                        defaultValue: "Choose Eliza Cloud",
+                                    }) })) : null, _jsx(Button, { variant: error.reason === "backend-unreachable" ? "outline" : "default", size: "lg", onClick: onRetry, className: "w-full sm:w-auto sm:min-w-[11rem]", "data-testid": "startup-retry", 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]", "data-testid": "startup-report-bug", children: t("bugreportmodal.ReportABug") })) : null, error.reason === "backend-unreachable" ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "lg", onClick: () => startFreshFirstRunReload(), className: "w-full sm:w-auto sm:min-w-[10rem]", "data-testid": "startup-start-over", children: t("startupfailureview.StartOver", {
                                                 defaultValue: "Start over",
-                                            }) }), _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] })] })] }) }));
+                                            }) }), _jsx(Button, { variant: "outline", size: "lg", asChild: true, className: "w-full sm:w-auto sm:min-w-[10rem]", "data-testid": "startup-open-app", children: _jsx("a", { href: branding.appUrl, target: "_blank", rel: "noreferrer", children: t("startupfailureview.OpenApp") }) })] })) : null] })] })] }) }));
 }

package/components/shell/__e2e__/home-screen-fixture.catalog-stub.d.ts

@@ -4,6 +4,8 @@ export declare function useViewCatalog(): {
         id: string;
         label: string;
         icon: string;
+        imageUrl: string;
+        fallbackImageUrl: string;
         hasHero: boolean;
         modality: string;
         state: string;

package/components/shell/__e2e__/home-screen-fixture.catalog-stub.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home-screen-fixture.catalog-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.catalog-stub.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;EAsB7B"}
+{"version":3,"file":"home-screen-fixture.catalog-stub.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/shell/__e2e__/home-screen-fixture.catalog-stub.ts"],"names":[],"mappings":"AAUA,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;EAwB7B"}

package/components/shell/__e2e__/home-screen-fixture.catalog-stub.js

@@ -1,3 +1,9 @@
+import { generateViewHeroSvgFor } from "@elizaos/shared";
+const WEATHER_HERO = `data:image/svg+xml,${encodeURIComponent(generateViewHeroSvgFor({
+    id: "weather",
+    label: "Weather",
+    icon: "CloudSun",
+}))}`;
 export function useViewCatalog() {
     return {
         entries: [
@@ -6,6 +12,8 @@ export function useViewCatalog() {
                 id: "weather",
                 label: "Weather",
                 icon: "CloudSun",
+                imageUrl: WEATHER_HERO,
+                fallbackImageUrl: WEATHER_HERO,
                 hasHero: false,
                 modality: "gui",
                 state: "available",

package/components/views/ViewTileImage.d.ts

@@ -2,10 +2,10 @@ import type { ViewEntry } from "../../hooks/view-catalog.js";
 /**
  * The shared visual core for view launch surfaces.
  *
- * Springboard tiles are app icons: deterministic colored glyph tiles that stay
- * readable at 64px and never look like cropped preview cards. Catalog cards are
- * previews: render the concrete hero or generated branded fallback, then fall
- * back to a glyph if every image source fails.
+ * Springboard tiles are app icons: paint the deterministic glyph tile
+ * underneath the concrete hero or generated branded fallback so icons never
+ * appear blank while image decoding catches up after a swipe. Catalog cards are
+ * previews and use the same image/fallback order at their larger size.
  *
  * A load failure emits a `hero-image-error` interaction event (best-effort,
  * client-only) from preview surfaces so broken hero endpoints are observable

package/components/views/ViewTileImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTileImage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ViewTileImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAyD1D;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,kBAAkB,EAClB,cAA0B,EAC1B,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,EAAE,aAAa,GAAG,cAAc,CAAC;IACvC,+EAA+E;IAC/E,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAwEA"}
+{"version":3,"file":"ViewTileImage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ViewTileImage.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAiE1D;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,kBAAkB,EAClB,cAA0B,EAC1B,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,EAAE,aAAa,GAAG,cAAc,CAAC;IACvC,+EAA+E;IAC/E,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAqHA"}