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

package/components/settings/AdvancedSection.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { AlertTriangle, Download, Trash2, Upload } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { setDeveloperMode, useApp, useIsDeveloperMode } from "../../state/index.js";
+import { setDeveloperMode, setPreviewMode, useAppSelectorShallow, useIsDeveloperMode, useIsPreviewMode, } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Checkbox } from "../ui/checkbox.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog.js";
@@ -12,9 +12,25 @@ import { Spinner } from "../ui/spinner.js";
 import { SettingsActionButton, SettingsSwitchRow } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
 export function AdvancedSection() {
-    const { t } = useApp();
-    const { handleReset, exportBusy, exportPassword, exportIncludeLogs, exportError, exportSuccess, importBusy, importPassword, importFile, importError, importSuccess, handleAgentExport, handleAgentImport, setState, } = useApp();
+    const { t, handleReset, exportBusy, exportPassword, exportIncludeLogs, exportError, exportSuccess, importBusy, importPassword, importFile, importError, importSuccess, handleAgentExport, handleAgentImport, setState, } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        handleReset: s.handleReset,
+        exportBusy: s.exportBusy,
+        exportPassword: s.exportPassword,
+        exportIncludeLogs: s.exportIncludeLogs,
+        exportError: s.exportError,
+        exportSuccess: s.exportSuccess,
+        importBusy: s.importBusy,
+        importPassword: s.importPassword,
+        importFile: s.importFile,
+        importError: s.importError,
+        importSuccess: s.importSuccess,
+        handleAgentExport: s.handleAgentExport,
+        handleAgentImport: s.handleAgentImport,
+        setState: s.setState,
+    }));
     const developerMode = useIsDeveloperMode();
+    const previewMode = useIsPreviewMode();
     const [exportModalOpen, setExportModalOpen] = useState(false);
     const [importModalOpen, setImportModalOpen] = useState(false);
     const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
@@ -128,7 +144,7 @@ export function AdvancedSection() {
             void handleReset();
         },
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { bare: true, children: _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs(Button, { ref: exportOpenRef, variant: "outline", type: "button", onClick: openExportModal, className: "min-h-[5.5rem] h-auto rounded-lg border border-border bg-card p-5 text-left transition-[border-color,background-color] group hover:border-accent", "aria-haspopup": "dialog", ...exportOpenAgentProps, children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-border bg-surface p-3 transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Download, { className: "h-5 w-5 shrink-0 text-txt-strong transition-colors group-hover:text-accent-fg" }) }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: t("settings.exportAgent") }) })] }), _jsxs(Button, { ref: importOpenRef, variant: "outline", type: "button", onClick: openImportModal, className: "min-h-[5.5rem] h-auto rounded-lg border border-border bg-card p-5 text-left transition-[border-color,background-color] group hover:border-accent", "aria-haspopup": "dialog", ...importOpenAgentProps, children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-border bg-surface p-3 transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Upload, { className: "h-5 w-5 shrink-0 text-txt-strong transition-colors group-hover:text-accent-fg" }) }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: t("settings.importAgent") }) })] })] }) }), _jsx(SettingsGroup, { children: _jsx(SettingsSwitchRow, { agentId: "advanced-developer-mode", group: "advanced", label: "Developer Mode", description: "Show developer tools (logs, trajectory viewer, prompt artifacts) and developer-only apps in the nav.", checked: developerMode, onCheckedChange: (checked) => setDeveloperMode(checked) }) }), _jsx(SettingsGroup, { title: _jsxs("span", { className: "flex items-center gap-1.5 text-danger", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), t("settings.dangerZone")] }), children: _jsx(SettingsRow, { icon: Trash2, tone: "danger", label: t("settings.resetAgent"), description: t("settings.resetAgentHint"), stacked: true, children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Button, { ref: resetOpenRef, variant: "destructive", size: "sm", className: "w-full rounded-sm whitespace-nowrap sm:w-auto", "aria-haspopup": "dialog", onClick: () => setResetConfirmOpen(true), ...resetOpenAgentProps, children: t("settings.resetEverything") }) }) }) })] }), _jsx(Dialog, { open: exportModalOpen, onOpenChange: (open) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { children: [_jsx(SettingsRow, { icon: Download, label: t("settings.exportAgent"), onClick: openExportModal, buttonRef: exportOpenRef, buttonProps: exportOpenAgentProps }), _jsx(SettingsRow, { icon: Upload, label: t("settings.importAgent"), onClick: openImportModal, buttonRef: importOpenRef, buttonProps: importOpenAgentProps })] }), _jsxs(SettingsGroup, { title: "View visibility", description: "Views are sorted into four kinds. System and Release views are always shown. Turn on the kinds below to reveal the rest.", children: [_jsx(SettingsSwitchRow, { agentId: "advanced-developer-mode", group: "advanced", label: "Developer views", description: "Developer tooling to verify the app is working \u2014 logs, database, trajectories. On by default in dev builds.", checked: developerMode, onCheckedChange: (checked) => setDeveloperMode(checked) }), _jsx(SettingsSwitchRow, { agentId: "advanced-preview-mode", group: "advanced", label: "Preview views", description: "Unfinished, alpha, or experimental views still in progress. Off by default.", checked: previewMode, onCheckedChange: (checked) => setPreviewMode(checked) })] }), _jsx(SettingsGroup, { title: _jsxs("span", { className: "flex items-center gap-1.5 text-danger", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), t("settings.dangerZone")] }), children: _jsx(SettingsRow, { icon: Trash2, tone: "danger", label: t("settings.resetAgent"), description: t("settings.resetAgentHint"), stacked: true, children: _jsx("div", { className: "flex sm:justify-end", children: _jsx(Button, { ref: resetOpenRef, variant: "destructive", size: "sm", className: "w-full rounded-sm whitespace-nowrap sm:w-auto", "aria-haspopup": "dialog", onClick: () => setResetConfirmOpen(true), ...resetOpenAgentProps, children: t("settings.resetEverything") }) }) }) })] }), _jsx(Dialog, { open: exportModalOpen, onOpenChange: (open) => {
                     if (!open)
                         closeExportModal();
                 }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("settings.exportAgent") }) }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "settings-export-password", className: "text-txt-strong", children: t("settingsview.Password") }), _jsx(Input, { ref: exportPasswordRef, id: "settings-export-password", type: "password", value: exportPassword, onChange: (e) => setState("exportPassword", e.target.value), placeholder: t("settingsview.EnterExportPasswor"), className: "h-11 rounded-sm bg-bg", ...exportPasswordAgentProps }), _jsxs(Label, { className: "flex items-center gap-2 font-normal text-muted", children: [_jsx(Checkbox, { ref: exportIncludeLogsRef, checked: exportIncludeLogs, onCheckedChange: (checked) => setState("exportIncludeLogs", !!checked), "aria-current": exportIncludeLogs ? "true" : undefined, ...exportIncludeLogsAgentProps }), t("settingsview.IncludeRecentLogs")] })] }), exportError && (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", role: "alert", "aria-live": "assertive", children: exportError })), exportSuccess && (_jsx("div", { className: "rounded-sm border border-ok/30 bg-ok/10 px-3 py-2 text-sm text-ok", role: "status", "aria-live": "polite", children: exportSuccess })), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [_jsx(SettingsActionButton, { agentId: "backup-export-cancel", agentGroup: "advanced-export", agentLabel: t("common.cancel"), variant: "outline", size: "sm", className: "min-h-[2.625rem] px-4 rounded-sm", onClick: closeExportModal, children: t("common.cancel") }), _jsxs(Button, { ref: exportSubmitRef, variant: "default", size: "sm", className: "min-h-[2.625rem] px-4 rounded-sm", disabled: exportBusy, onClick: () => void handleAgentExport(), ...exportSubmitAgentProps, children: [exportBusy && _jsx(Spinner, { size: 16 }), t("common.export")] })] })] })] }) }), _jsx(Dialog, { open: importModalOpen, onOpenChange: (open) => {

package/components/settings/AdvancedToggle.js

@@ -35,5 +35,5 @@ export function AdvancedToggle(props) {
         onActivate: () => handleChange(!enabled),
     });
     return (_jsxs("label", { className: className ??
-            "inline-flex min-h-10 cursor-pointer items-center gap-2 rounded-sm border border-border/50 bg-bg-hover px-3 py-1.5 text-xs font-medium text-muted-strong", children: [_jsx("span", { children: label }), _jsx(Switch, { ref: ref, checked: enabled, onCheckedChange: handleChange, "aria-label": label, ...agentProps })] }));
+            "inline-flex min-h-8 cursor-pointer items-center gap-2 text-xs font-medium text-muted", children: [_jsx("span", { children: label }), _jsx(Switch, { ref: ref, checked: enabled, onCheckedChange: handleChange, "aria-label": label, ...agentProps })] }));
 }

package/components/settings/ApiKeyConfig.d.ts

@@ -1,5 +1,5 @@
-import { type PluginParamDef } from "../../api";
-import type { ConfigUiHint } from "../../types";
+import { type PluginParamDef } from "../../api/index.js";
+import type { ConfigUiHint } from "../../types/index.js";
 interface ProviderPlugin {
     id: string;
     name: string;

package/components/settings/ApiKeyConfig.js

@@ -6,7 +6,7 @@ import { ConfigRenderer } from "../../components/config-ui/config-renderer.js";
 import { defaultRegistry, useConfigValidation, } from "../../components/config-ui/config-renderer.helpers.js";
 import { API_KEY_PREFIX_HINTS } from "../../config/api-key-prefix-hints.js";
 import { useTimeout } from "../../hooks/useTimeout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { autoLabel } from "../../utils/labels.js";
 import { SettingsActionButton } from "./settings-agent-rows.js";
 import { AdvancedSettingsDisclosure } from "./settings-control-primitives.js";
@@ -122,7 +122,7 @@ function CredentialFieldAgentBinding({ agentId, label, getValue, onFill, }) {
 export function ApiKeyConfig({ selectedProvider, pluginSaving, pluginSaveSuccess, handlePluginConfigSave, loadPlugins, }) {
     const { setTimeout } = useTimeout();
     const { configRef, validateAll } = useConfigValidation();
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [pluginFieldValues, setPluginFieldValues] = useState({});
     const [modelsFetching, setModelsFetching] = useState(false);
     const [modelsFetchResult, setModelsFetchResult] = useState(null);

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

@@ -1 +1 @@
-{"version":3,"file":"AppPermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppPermissionsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAyEH,wBAAgB,qBAAqB,4CAgNpC"}
+{"version":3,"file":"AppPermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppPermissionsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAoEH,wBAAgB,qBAAqB,4CA6MpC"}

package/components/settings/AppPermissionsSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * App permissions settings panel.
  *
@@ -12,7 +12,7 @@ import { Loader2, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Switch } from "../ui/switch.js";
 import { SettingsActionButton } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
@@ -20,10 +20,6 @@ const NAMESPACE_LABELS = {
     fs: "Filesystem",
     net: "Network",
 };
-const NAMESPACE_DESCRIPTIONS = {
-    fs: "Read/write files the app's manifest declares.",
-    net: "Reach the hosts the app's manifest declares.",
-};
 function buildRowState(view) {
     return { view, pending: false, error: null };
 }
@@ -53,7 +49,7 @@ function summariseRequested(view, ns) {
     return null;
 }
 export function AppPermissionsSection() {
-    const { setActionNotice } = useApp();
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
     const [rows, setRows] = useState([]);
     const [listStatus, setListStatus] = useState({
         state: "loading",
@@ -132,13 +128,13 @@ export function AppPermissionsSection() {
     const grantableRows = useMemo(() => rows.filter((row) => row.view.recognisedNamespaces.length > 0), [rows]);
     const noManifestRows = useMemo(() => rows.filter((row) => row.view.recognisedNamespaces.length === 0), [rows]);
     const refreshButton = (_jsxs(SettingsActionButton, { agentId: "appperm-refresh", agentLabel: "Refresh", agentDescription: "Reload the app permissions list", agentGroup: "app-permissions", type: "button", variant: "outline", size: "sm", onClick: () => void refresh(), className: "h-9 gap-1.5 rounded-sm px-3 text-xs font-semibold", disabled: listStatus.state === "loading", children: [listStatus.state === "loading" ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" })) : (_jsx(RefreshCw, { className: "h-3.5 w-3.5", "aria-hidden": "true" })), "Refresh"] }));
-    return (_jsxs(SettingsStack, { children: [_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3", children: refreshButton }), listStatus.state === "error" && (_jsx("div", { className: "rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-xs text-danger", children: listStatus.message })), listStatus.state !== "loading" && grantableRows.length === 0 && (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-border bg-card px-4 py-6 text-center text-xs text-muted", children: "No apps declare permissions yet." }) })), grantableRows.map((row) => (_jsx(SettingsGroup, { title: row.view.slug, description: row.view.trust === "first-party"
+    return (_jsxs(SettingsStack, { children: [_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3", children: refreshButton }), listStatus.state === "error" && (_jsx("p", { className: "text-xs text-danger", children: listStatus.message })), listStatus.state !== "loading" && grantableRows.length === 0 && (_jsx("p", { className: "py-6 text-center text-xs text-muted", children: "No apps declare permissions yet." })), grantableRows.map((row) => (_jsx(SettingsGroup, { title: row.view.slug, description: row.view.trust === "first-party"
                     ? "First-party · auto-granted"
-                    : "External · explicit consent", action: row.view.grantedAt ? (_jsxs("span", { className: "text-2xs text-muted", children: ["granted ", new Date(row.view.grantedAt).toLocaleDateString()] })) : undefined, footer: row.error ? (_jsx("span", { className: "text-danger", children: row.error })) : undefined, children: RECOGNISED_PERMISSION_NAMESPACES.map((ns) => {
+                    : "External · explicit consent", action: row.view.grantedAt ? (_jsxs("span", { className: "text-2xs text-muted", children: ["granted", " ", new Date(row.view.grantedAt).toLocaleDateString("en-US")] })) : undefined, footer: row.error ? (_jsx("span", { className: "text-danger", children: row.error })) : undefined, children: RECOGNISED_PERMISSION_NAMESPACES.map((ns) => {
                     if (!row.view.recognisedNamespaces.includes(ns))
                         return null;
                     return (_jsx(AppPermissionToggle, { slug: row.view.slug, ns: ns, granted: row.view.grantedNamespaces.includes(ns), summary: summariseRequested(row.view, ns), disabled: row.pending, onToggle: onToggle }, ns));
-                }) }, row.view.slug))), noManifestRows.length > 0 && (_jsxs("details", { className: "rounded-lg border border-border bg-surface px-3 py-2 text-xs text-muted", children: [_jsxs("summary", { className: "cursor-pointer", children: [noManifestRows.length, " registered app", noManifestRows.length === 1 ? "" : "s", " without a permissions manifest"] }), _jsx("ul", { className: "mt-1.5 space-y-0.5 pl-4", children: noManifestRows.map((row) => (_jsx("li", { className: "list-disc", children: row.view.slug }, row.view.slug))) })] }))] }));
+                }) }, row.view.slug))), noManifestRows.length > 0 && (_jsxs("details", { className: "text-xs text-muted", children: [_jsxs("summary", { className: "cursor-pointer", children: [noManifestRows.length, " registered app", noManifestRows.length === 1 ? "" : "s", " without a permissions manifest"] }), _jsx("ul", { className: "mt-1.5 space-y-0.5 pl-4", children: noManifestRows.map((row) => (_jsx("li", { className: "list-disc", children: row.view.slug }, row.view.slug))) })] }))] }));
 }
 function AppPermissionToggle({ slug, ns, granted, summary, disabled, onToggle, }) {
     const toggleId = `appperm-${slug}-${ns}`;
@@ -148,10 +144,9 @@ function AppPermissionToggle({ slug, ns, granted, summary, disabled, onToggle, }
         role: "toggle",
         label,
         group: "app-permissions",
-        description: NAMESPACE_DESCRIPTIONS[ns],
         status: granted ? "on" : "off",
         getValue: () => granted,
         onActivate: disabled ? undefined : () => onToggle(slug, ns, !granted),
     });
-    return (_jsx(SettingsRow, { htmlFor: toggleId, label: NAMESPACE_LABELS[ns], description: _jsxs(_Fragment, { children: [NAMESPACE_DESCRIPTIONS[ns], summary ? (_jsx("span", { className: "mt-1 block truncate font-mono text-xs text-txt", children: summary })) : null] }), control: _jsx(Switch, { ref: ref, id: toggleId, checked: granted, disabled: disabled, onCheckedChange: (checked) => onToggle(slug, ns, checked), "aria-label": label, ...agentProps }) }));
+    return (_jsx(SettingsRow, { htmlFor: toggleId, label: NAMESPACE_LABELS[ns], description: summary ? (_jsx("span", { className: "block truncate font-mono text-xs text-txt", children: summary })) : undefined, control: _jsx(Switch, { ref: ref, id: toggleId, checked: granted, disabled: disabled, onCheckedChange: (checked) => onToggle(slug, ns, checked), "aria-label": label, ...agentProps }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppearanceSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppearanceSettingsSection.tsx"],"names":[],"mappings":"AAkDA,wBAAgB,yBAAyB,4CAiCxC"}
+{"version":3,"file":"AppearanceSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppearanceSettingsSection.tsx"],"names":[],"mappings":"AAwGA,wBAAgB,yBAAyB,4CAwExC"}

package/components/settings/AppearanceSettingsSection.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp, useContentPack } from "../../state/index.js";
+import { cn } from "../../lib/utils.js";
+import { useAppSelector, useContentPack } from "../../state/index.js";
 import { LANGUAGES } from "../shared/LanguageDropdown.helpers.js";
+import { AdvancedToggle } from "./AdvancedToggle.js";
+import { useAdvancedSettingsEnabled } from "./AdvancedToggle.hooks.js";
 import { selectableTileClass } from "./appearance-primitives.helpers.js";
+import { BackgroundSettingsControls } from "./BackgroundSettingsControls.js";
 import { LoadContentPackForm } from "./LoadContentPackForm.js";
 import { LoadedPacksList } from "./LoadedPacksList.js";
-import { SettingsGroup, SettingsStack } from "./settings-layout.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
 function LanguageTileButton({ languageId, label, flag, isActive, onSelect, }) {
     const { ref, agentProps } = useAgentElement({
         id: `appearance-language-${languageId}`,
@@ -18,8 +22,33 @@ function LanguageTileButton({ languageId, label, flag, isActive, onSelect, }) {
     });
     return (_jsxs("button", { ref: ref, type: "button", onClick: onSelect, "aria-current": isActive ? "true" : undefined, className: selectableTileClass(isActive), ...agentProps, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-base leading-none", children: flag }), _jsx("span", { className: "text-xs font-medium text-txt", children: label })] }), isActive ? (_jsx(Check, { className: "absolute right-1.5 top-1.5 h-3 w-3 text-accent" })) : null] }));
 }
+const THEME_OPTIONS = [
+    { mode: "light", label: "Light", icon: Sun },
+    { mode: "dark", label: "Dark", icon: Moon },
+    { mode: "system", label: "System", icon: Monitor },
+];
+function ThemeTileButton({ mode, label, icon: Icon, isActive, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `appearance-theme-${mode}`,
+        role: "tab",
+        label,
+        group: "appearance-theme",
+        status: isActive ? "active" : "inactive",
+        onActivate: onSelect,
+    });
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onSelect, "aria-current": isActive ? "true" : undefined, className: cn("flex min-h-10 flex-1 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition-colors", isActive
+            ? "bg-accent/12 text-accent  "
+            : "text-muted hover:bg-surface hover:text-txt"), ...agentProps, children: [_jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }), label] }));
+}
 export function AppearanceSettingsSection() {
-    const { setUiLanguage, uiLanguage, t } = useApp();
+    const setUiLanguage = useAppSelector((s) => s.setUiLanguage);
+    const uiLanguage = useAppSelector((s) => s.uiLanguage);
+    const uiThemeMode = useAppSelector((s) => s.uiThemeMode);
+    const setUiThemeMode = useAppSelector((s) => s.setUiThemeMode);
+    const t = useAppSelector((s) => s.t);
     const { activePack, loadedPacks, toggle } = useContentPack();
-    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { bare: true, title: t("settings.language", { defaultValue: "Language" }), children: _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4", children: LANGUAGES.map((language) => (_jsx(LanguageTileButton, { languageId: language.id, label: language.label, flag: language.flag, isActive: uiLanguage === language.id, onSelect: () => setUiLanguage(language.id) }, language.id))) }) }), _jsx(LoadedPacksList, { loadedPacks: loadedPacks, activePackId: activePack?.manifest.id ?? null, onToggle: toggle }), _jsx(LoadContentPackForm, {})] }));
+    const advancedEnabled = useAdvancedSettingsEnabled();
+    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { bare: true, title: t("settings.theme", { defaultValue: "Theme" }), children: _jsx("div", { className: "flex gap-2", children: THEME_OPTIONS.map((option) => (_jsx(ThemeTileButton, { mode: option.mode, label: t(`settings.theme.${option.mode}`, {
+                            defaultValue: option.label,
+                        }), icon: option.icon, isActive: uiThemeMode === option.mode, onSelect: () => setUiThemeMode(option.mode) }, option.mode))) }) }), _jsx(SettingsGroup, { bare: true, title: t("settings.background", { defaultValue: "Background" }), children: _jsx(BackgroundSettingsControls, { className: "max-w-none bg-surface/50 p-4" }) }), _jsx(SettingsGroup, { bare: true, title: t("settings.language", { defaultValue: "Language" }), children: _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4", children: LANGUAGES.map((language) => (_jsx(LanguageTileButton, { languageId: language.id, label: language.label, flag: language.flag, isActive: uiLanguage === language.id, onSelect: () => setUiLanguage(language.id) }, language.id))) }) }), _jsx(LoadedPacksList, { loadedPacks: loadedPacks, activePackId: activePack?.manifest.id ?? null, onToggle: toggle }), _jsx(SettingsGroup, { children: _jsx(SettingsRow, { label: t("settings.advanced", { defaultValue: "Advanced" }), control: _jsx(AdvancedToggle, { label: "Advanced" }) }) }), advancedEnabled && _jsx(LoadContentPackForm, {})] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppsManagementSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppsManagementSection.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAwFH,wBAAgB,qBAAqB,4CAkxBpC"}
+{"version":3,"file":"AppsManagementSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AppsManagementSection.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAkGH,wBAAgB,qBAAqB,4CAuwBpC"}

package/components/settings/AppsManagementSection.js

@@ -7,11 +7,20 @@ import { Loader2, Play, RotateCw, Square } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Checkbox } from "../ui/checkbox.js";
 import { SettingsInput, SettingsTextarea } from "../ui/settings-controls.js";
+import { AdvancedToggle } from "./AdvancedToggle.js";
+import { useAdvancedSettingsEnabled } from "./AdvancedToggle.hooks.js";
+import { SettingsSelectRow } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+/**
+ * Sentinel for the "Start from scratch" option. The create flow uses an empty
+ * string to mean "no base app", but Radix Select forbids an empty-string item
+ * value, so we map this sentinel back to "" at the value/onChange boundary.
+ */
+const CREATE_FROM_SCRATCH_VALUE = "__scratch__";
 function AppRowActionButton({ agentId, label, group, disabled, onClick, children, className, }) {
     const { ref, agentProps } = useAgentElement({
         id: agentId,
@@ -26,7 +35,9 @@ function AppRowActionButton({ agentId, label, group, disabled, onClick, children
 const HEAD_CELL_CLASS = "px-3 py-2 text-xs font-medium text-muted";
 const BODY_CELL_CLASS = "px-3 py-2.5 align-middle text-sm";
 export function AppsManagementSection() {
-    const { setActionNotice, t } = useApp();
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const t = useAppSelector((s) => s.t);
+    const advancedEnabled = useAdvancedSettingsEnabled();
     const [installed, setInstalled] = useState([]);
     const [runs, setRuns] = useState([]);
     const [listStatus, setListStatus] = useState({
@@ -272,17 +283,6 @@ export function AppsManagementSection() {
         getValue: () => createIntent,
         onFill: setCreateIntent,
     });
-    const { ref: createTargetRef, agentProps: createTargetAgentProps } = useAgentElement({
-        id: "apps-create-edit-target",
-        role: "select",
-        label: t("settings.sections.apps.basedOnLabel", {
-            defaultValue: "Based on existing app (optional)",
-        }),
-        group: "apps-create",
-        getValue: () => createEditTarget,
-        onFill: setCreateEditTarget,
-        options: ["", ...installed.map((app) => app.name)],
-    });
     const { ref: createSubmitRef, agentProps: createSubmitAgentProps } = useAgentElement({
         id: "apps-create-submit",
         role: "button",
@@ -336,31 +336,40 @@ export function AppsManagementSection() {
             setLoadStatus({ state: "idle" });
         },
     });
-    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { title: t("settings.sections.apps.groupTitle", { defaultValue: "Apps" }), action: _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { ref: createToggleRef, type: "button", variant: "default", className: "h-9 rounded-md px-3 text-xs", onClick: () => {
-                                setShowCreate((v) => !v);
-                                setShowLoad(false);
-                            }, ...createToggleAgentProps, children: t("settings.sections.apps.createNew", {
-                                defaultValue: "Create new app",
-                            }) }), _jsx(Button, { ref: loadToggleRef, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs", onClick: () => {
-                                setShowLoad((v) => !v);
-                                setShowCreate(false);
-                            }, ...loadToggleAgentProps, children: t("settings.sections.apps.loadFromDirectory", {
-                                defaultValue: "Load from directory",
-                            }) })] }), children: _jsx(SettingsRow, { label: t("settings.sections.apps.verifyOnRelaunch", {
-                        defaultValue: "Verify on relaunch",
-                    }), control: _jsx(Checkbox, { ref: verifyRef, checked: verifyOnRelaunch, onCheckedChange: (checked) => setVerifyOnRelaunch(!!checked), "aria-current": verifyOnRelaunch ? "true" : undefined, "aria-label": t("settings.sections.apps.verifyOnRelaunchLabel", {
+    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: t("settings.sections.apps.groupTitle", { defaultValue: "Apps" }), action: _jsx(AdvancedToggle, { label: "Advanced" }), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-1", children: [_jsx(Button, { ref: createToggleRef, type: "button", variant: "default", className: "h-9 rounded-md px-3 text-xs", onClick: () => {
+                                    setShowCreate((v) => !v);
+                                    setShowLoad(false);
+                                }, ...createToggleAgentProps, children: t("settings.sections.apps.createNew", {
+                                    defaultValue: "Create new app",
+                                }) }), _jsx(Button, { ref: loadToggleRef, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs", onClick: () => {
+                                    setShowLoad((v) => !v);
+                                    setShowCreate(false);
+                                }, ...loadToggleAgentProps, children: t("settings.sections.apps.loadFromDirectory", {
+                                    defaultValue: "Load from directory",
+                                }) })] }), advancedEnabled ? (_jsx(SettingsRow, { label: t("settings.sections.apps.verifyOnRelaunch", {
                             defaultValue: "Verify on relaunch",
-                        }), ...verifyAgentProps }) }) }), showCreate ? (_jsx("form", { onSubmit: handleCreateSubmit, children: _jsxs(SettingsGroup, { title: t("settings.sections.apps.createNew", {
+                        }), control: _jsx(Checkbox, { ref: verifyRef, checked: verifyOnRelaunch, onCheckedChange: (checked) => setVerifyOnRelaunch(!!checked), "aria-current": verifyOnRelaunch ? "true" : undefined, "aria-label": t("settings.sections.apps.verifyOnRelaunchLabel", {
+                                defaultValue: "Verify on relaunch",
+                            }), ...verifyAgentProps }) })) : null] }), showCreate ? (_jsx("form", { onSubmit: handleCreateSubmit, children: _jsxs(SettingsGroup, { title: t("settings.sections.apps.createNew", {
                         defaultValue: "Create new app",
                     }), footer: createStatus.state === "error" ? (_jsx("span", { className: "text-warn", children: createStatus.message })) : undefined, children: [_jsx(SettingsRow, { htmlFor: "apps-create-intent", stacked: true, label: t("settings.sections.apps.intentLabel", {
                                 defaultValue: "What should the app do?",
                             }), children: _jsx(SettingsTextarea, { ref: createIntentRef, id: "apps-create-intent", rows: 3, value: createIntent, disabled: isCreating, onChange: (e) => setCreateIntent(e.target.value), className: "block w-full resize-y font-sans text-sm text-txt", placeholder: t("settings.sections.apps.intentPlaceholder", {
                                     defaultValue: "Describe what the app should do.",
-                                }), ...createIntentAgentProps }) }), _jsx(SettingsRow, { htmlFor: "apps-create-edit-target", stacked: true, label: t("settings.sections.apps.basedOnLabel", {
+                                }), ...createIntentAgentProps }) }), advancedEnabled ? (_jsx(SettingsSelectRow, { agentId: "apps-create-edit-target", group: "apps-create", label: t("settings.sections.apps.basedOnLabel", {
                                 defaultValue: "Based on existing app (optional)",
-                            }), children: _jsxs("select", { ref: createTargetRef, id: "apps-create-edit-target", value: createEditTarget, disabled: isCreating, onChange: (e) => setCreateEditTarget(e.target.value), className: "block h-11 w-full rounded-md border border-border bg-card px-3 text-sm text-txt transition-colors focus:border-accent focus:outline-none disabled:opacity-50", ...createTargetAgentProps, children: [_jsx("option", { value: "", children: t("settings.sections.apps.basedOnNone", {
-                                            defaultValue: "Start from scratch",
-                                        }) }), installed.map((app) => (_jsxs("option", { value: app.name, children: [app.displayName, " (", app.name, ")"] }, app.name)))] }) }), _jsx(SettingsRow, { label: "", stacked: true, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { ref: createSubmitRef, type: "submit", variant: "default", className: "h-11 rounded-md px-4 text-sm", disabled: isCreating || createIntent.trim().length === 0, ...createSubmitAgentProps, children: isCreating ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), _jsx("span", { children: createStatus.state === "loading"
+                            }), value: createEditTarget || CREATE_FROM_SCRATCH_VALUE, onValueChange: (value) => setCreateEditTarget(value === CREATE_FROM_SCRATCH_VALUE ? "" : value), disabled: isCreating, options: [
+                                {
+                                    value: CREATE_FROM_SCRATCH_VALUE,
+                                    label: t("settings.sections.apps.basedOnNone", {
+                                        defaultValue: "Start from scratch",
+                                    }),
+                                },
+                                ...installed.map((app) => ({
+                                    value: app.name,
+                                    label: `${app.displayName} (${app.name})`,
+                                })),
+                            ] })) : null, _jsx(SettingsRow, { label: "", stacked: true, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { ref: createSubmitRef, type: "submit", variant: "default", className: "h-11 rounded-md px-4 text-sm", disabled: isCreating || createIntent.trim().length === 0, ...createSubmitAgentProps, children: isCreating ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), _jsx("span", { children: createStatus.state === "loading"
                                                         ? (createStatus.message ?? "Working…")
                                                         : "Working…" })] })) : (t("common.create", { defaultValue: "Create" })) }), _jsx(Button, { ref: createCancelRef, type: "button", variant: "ghost", className: "h-11 rounded-md px-4 text-sm text-muted", onClick: () => {
                                             setShowCreate(false);
@@ -379,11 +388,11 @@ export function AppsManagementSection() {
                                             setLoadStatus({ state: "idle" });
                                         }, disabled: isLoading, ...loadCancelAgentProps, children: t("common.cancel", { defaultValue: "Cancel" }) })] }) })] }) })) : null, listStatus.state === "loading" ? (_jsx(SettingsGroup, { bare: true, children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-3 text-sm text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), _jsx("span", { children: t("settings.sections.apps.loadingApps", {
                                 defaultValue: "Loading apps…",
-                            }) })] }) })) : listStatus.state === "error" ? (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-warn/30 bg-warn/5 px-3 py-2 text-sm text-warn", children: listStatus.message }) })) : installed.length === 0 ? (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-border bg-card px-3 py-4 text-center text-sm text-muted", children: t("settings.sections.apps.empty", {
+                            }) })] }) })) : listStatus.state === "error" ? (_jsx(SettingsGroup, { bare: true, children: _jsx("p", { className: "py-2 text-sm text-warn", children: listStatus.message }) })) : installed.length === 0 ? (_jsx(SettingsGroup, { bare: true, children: _jsx("p", { className: "py-4 text-center text-sm text-muted", children: t("settings.sections.apps.empty", {
                         defaultValue: "No apps installed yet.",
                     }) }) })) : (_jsx(SettingsGroup, { bare: true, title: t("settings.sections.apps.installedTitle", {
                     defaultValue: "Installed apps",
-                }), children: _jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: _jsxs("table", { className: "w-full min-w-[34rem] text-left text-sm", children: [_jsx("thead", { className: "bg-bg-hover", children: _jsxs("tr", { children: [_jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.name", {
+                }), children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[34rem] text-left text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/50", children: [_jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.name", {
                                                 defaultValue: "App",
                                             }) }), _jsx("th", { className: HEAD_CELL_CLASS, children: t("settings.sections.apps.col.id", {
                                                 defaultValue: "ID",

package/components/settings/BackgroundSettingsControls.d.ts

@@ -0,0 +1,5 @@
+export interface BackgroundSettingsControlsProps {
+    className?: string;
+}
+export declare function BackgroundSettingsControls({ className, }: BackgroundSettingsControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackgroundSettingsControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundSettingsControls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/BackgroundSettingsControls.tsx"],"names":[],"mappings":"AAkEA,MAAM,WAAW,+BAA+B;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,GACV,EAAE,+BAA+B,2CAuPjC"}

package/components/settings/BackgroundSettingsControls.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, Check, ImagePlus, Loader2, Pipette, Sparkles, Undo2, } from "lucide-react";
+import { useCallback, useId, useRef, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { client } from "../../api/index.js";
+import { cn } from "../../lib/utils.js";
+import { useAppSelectorShallow } from "../../state/app-store.js";
+import { BACKGROUND_PRESETS, DEFAULT_BACKGROUND_COLOR, } from "../../state/ui-preferences.js";
+import { useBackgroundConfig } from "../../state/useBackgroundConfig.js";
+import { BackgroundImageError, fileToBackgroundDataUrl, } from "../pages/background-image.js";
+function ColorSwatch({ preset, selected, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `background-preset-${preset.id}`,
+        role: "button",
+        label: `Set background to ${preset.label}`,
+        group: "background-controls",
+        description: `Use the ${preset.label.toLowerCase()} shader background`,
+        onActivate: () => onSelect(preset.color),
+    });
+    return (_jsx("button", { ref: ref, type: "button", onClick: () => onSelect(preset.color), title: preset.label, "aria-label": `Set background to ${preset.label}`, "aria-pressed": selected, className: "relative h-9 w-9 shrink-0 rounded-full transition-transform hover:scale-110", style: { backgroundColor: preset.color }, ...agentProps, children: selected ? (_jsx(Check, { className: "absolute inset-0 m-auto h-4 w-4 text-white mix-blend-difference", "aria-hidden": true })) : null }));
+}
+export function BackgroundSettingsControls({ className, }) {
+    const { backgroundConfig, setBackgroundConfig, undoBackgroundConfig, canUndoBackground, } = useBackgroundConfig();
+    const { cloudConnected, cloudAuthRejected } = useAppSelectorShallow((s) => ({
+        cloudConnected: s.elizaCloudConnected,
+        cloudAuthRejected: s.elizaCloudAuthRejected,
+    }));
+    const cloudAvailable = Boolean(cloudConnected) && !cloudAuthRejected;
+    const fileInputRef = useRef(null);
+    const colorInputRef = useRef(null);
+    const promptInputId = useId();
+    const [error, setError] = useState(null);
+    const [generating, setGenerating] = useState(false);
+    const [promptOpen, setPromptOpen] = useState(false);
+    const [prompt, setPrompt] = useState("");
+    const config = backgroundConfig && typeof backgroundConfig === "object"
+        ? backgroundConfig
+        : { mode: "shader", color: DEFAULT_BACKGROUND_COLOR };
+    const activeColor = config.color ?? DEFAULT_BACKGROUND_COLOR;
+    const isShader = config.mode === "shader";
+    const selectColor = useCallback((color) => {
+        setError(null);
+        setBackgroundConfig({ mode: "shader", color });
+    }, [setBackgroundConfig]);
+    const onUploadClick = useCallback(() => {
+        setError(null);
+        fileInputRef.current?.click();
+    }, []);
+    const onFileChange = useCallback(async (event) => {
+        const file = event.target.files?.[0];
+        event.target.value = "";
+        if (!file)
+            return;
+        try {
+            const imageUrl = await fileToBackgroundDataUrl(file);
+            setBackgroundConfig({ mode: "image", color: activeColor, imageUrl });
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof BackgroundImageError
+                ? err.message
+                : "Could not load that image.");
+        }
+    }, [activeColor, setBackgroundConfig]);
+    const runGenerate = useCallback(async () => {
+        const trimmed = prompt.trim();
+        if (!trimmed || generating)
+            return;
+        setGenerating(true);
+        setError(null);
+        try {
+            const { url } = await client.generateBackgroundImage(trimmed);
+            setBackgroundConfig({ mode: "image", color: activeColor, imageUrl: url });
+            setPromptOpen(false);
+            setPrompt("");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Image generation failed.");
+        }
+        finally {
+            setGenerating(false);
+        }
+    }, [activeColor, generating, prompt, setBackgroundConfig]);
+    const uploadButton = useAgentElement({
+        id: "background-upload",
+        role: "button",
+        label: "Upload a background image",
+        group: "background-controls",
+        description: "Open the file picker to upload a background image",
+        onActivate: onUploadClick,
+    });
+    const generateButton = useAgentElement({
+        id: "background-generate",
+        role: "button",
+        label: "Generate a background image",
+        group: "background-controls",
+        description: "Generate a background image from a text prompt (cloud)",
+        onActivate: () => setPromptOpen((open) => !open),
+    });
+    const undoButton = useAgentElement({
+        id: "background-undo",
+        role: "button",
+        label: "Undo background change",
+        group: "background-controls",
+        description: "Revert to the previous background",
+        onActivate: () => undoBackgroundConfig(),
+    });
+    return (_jsxs("div", { "data-testid": "background-settings-controls", className: cn("flex w-full max-w-sm flex-col items-center gap-5 rounded-lg border border-border/40 bg-bg/95 p-6", className), children: [_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2.5", children: [BACKGROUND_PRESETS.map((preset) => (_jsx(ColorSwatch, { preset: preset, selected: isShader && activeColor === preset.color, onSelect: selectColor }, preset.id))), _jsx("button", { type: "button", onClick: () => colorInputRef.current?.click(), title: "Custom color", "aria-label": "Pick a custom background color", className: "relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition-transform hover:scale-110", style: {
+                            background: "conic-gradient(from 0deg, #ef5a1f, #f59e0b, #059669, #2563eb, #7c3aed, #e11d48, #ef5a1f)",
+                        }, children: _jsx(Pipette, { className: "h-4 w-4 text-white", "aria-hidden": true }) }), _jsx("input", { ref: colorInputRef, type: "color", value: activeColor, onChange: (e) => selectColor(e.target.value), className: "sr-only", "aria-label": "Custom background color value", tabIndex: -1 })] }), _jsx("div", { className: "h-px w-full bg-border/40" }), _jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("button", { ref: uploadButton.ref, type: "button", onClick: onUploadClick, title: "Upload image", "aria-label": "Upload a background image", className: "flex h-12 w-12 items-center justify-center rounded-lg bg-bg-accent/70 text-txt transition-colors hover:bg-bg-accent", ...uploadButton.agentProps, children: _jsx(ImagePlus, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: onFileChange, className: "sr-only", "aria-label": "Background image file", tabIndex: -1 }), cloudAvailable ? (_jsx("button", { ref: generateButton.ref, type: "button", onClick: () => setPromptOpen((open) => !open), title: "Generate image", "aria-label": "Generate a background image", "aria-pressed": promptOpen, className: cn("flex h-12 w-12 items-center justify-center rounded-lg transition-colors", promptOpen
+                            ? "bg-accent text-accent-foreground"
+                            : "bg-bg-accent/70 text-txt hover:bg-bg-accent"), ...generateButton.agentProps, children: _jsx(Sparkles, { className: "h-5 w-5", "aria-hidden": true }) })) : null, canUndoBackground ? (_jsx("button", { ref: undoButton.ref, type: "button", onClick: () => undoBackgroundConfig(), title: "Undo", "aria-label": "Undo background change", className: "flex h-12 w-12 items-center justify-center rounded-lg bg-bg-accent/70 text-txt transition-colors hover:bg-bg-accent", ...undoButton.agentProps, children: _jsx(Undo2, { className: "h-5 w-5", "aria-hidden": true }) })) : null] }), cloudAvailable && promptOpen ? (_jsxs("form", { className: "flex w-full items-center gap-2", onSubmit: (e) => {
+                    e.preventDefault();
+                    void runGenerate();
+                }, children: [_jsx("label", { htmlFor: promptInputId, className: "sr-only", children: "Describe a background" }), _jsx("input", { id: promptInputId, type: "text", value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Describe a background...", disabled: generating, 
+                        // biome-ignore lint/a11y/noAutofocus: focus the field the user just opened
+                        autoFocus: true, className: "min-w-0 flex-1 rounded-lg border border-border/50 bg-bg/60 px-3 py-2 text-sm text-txt placeholder:text-muted" }), _jsx("button", { type: "submit", disabled: generating || prompt.trim().length === 0, title: "Generate", "aria-label": "Generate background from prompt", className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-50", children: generating ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true })) : (_jsx(ArrowUp, { className: "h-4 w-4", "aria-hidden": true })) })] })) : null, error ? (_jsx("p", { className: "text-center text-xs text-destructive", role: "alert", children: error })) : null] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CapabilitiesSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/CapabilitiesSection.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,mBAAmB,4CA6jBlC"}
+{"version":3,"file":"CapabilitiesSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/CapabilitiesSection.tsx"],"names":[],"mappings":"AAwGA,wBAAgB,mBAAmB,4CAspBlC"}