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

package/components/pages/SettingsView.js

@@ -1,526 +1,168 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Checkbox, cn, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, PageLayout, PagePanel, SidebarContent, SidebarPanel, SidebarScrollRegion, Spinner, useLinkedSidebarSelection, } from "@elizaos/ui";
-import { AlertTriangle, Archive, Brain, Download, KeyRound, LayoutGrid, Palette, RefreshCw, Server, Shield, SlidersHorizontal, Upload, User, Wallet, } from "lucide-react";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { consumePendingFocusProvider, SETTINGS_FOCUS_CONNECTOR_EVENT, setDeveloperMode, useApp, useIsDeveloperMode, } from "../../state/index.js";
-import { AppearanceSettingsSection } from "../settings/AppearanceSettingsSection.js";
-import { AppsManagementSection } from "../settings/AppsManagementSection.js";
-import { CapabilitiesSection } from "../settings/CapabilitiesSection.js";
-import { IdentitySettingsSection } from "../settings/IdentitySettingsSection.js";
-import { PermissionsSection } from "../settings/PermissionsSection.js";
-import { ProviderSwitcher } from "../settings/ProviderSwitcher.js";
-import { RuntimeSettingsSection } from "../settings/RuntimeSettingsSection.js";
-import { SecretsManagerSection } from "../settings/SecretsManagerSection.js";
-import { SecuritySettingsSection } from "../settings/SecuritySettingsSection.js";
-import { WalletKeysSection } from "../settings/WalletKeysSection.js";
-import { AppPageSidebar } from "../shared/AppPageSidebar.js";
-import { ConfigPageView } from "./ConfigPageView.js";
-import { ReleaseCenterView } from "./ReleaseCenterView.js";
-const SETTINGS_SIDEBAR_WIDTH_KEY = "eliza:settings:sidebar:width";
-const SETTINGS_SIDEBAR_COLLAPSED_KEY = "eliza:settings:sidebar:collapsed";
-const SETTINGS_SIDEBAR_DEFAULT_WIDTH = 240;
-const SETTINGS_SIDEBAR_MIN_WIDTH = 200;
-const SETTINGS_SIDEBAR_MAX_WIDTH = 520;
-function clampSettingsSidebarWidth(value) {
-    return Math.min(Math.max(value, SETTINGS_SIDEBAR_MIN_WIDTH), SETTINGS_SIDEBAR_MAX_WIDTH);
-}
-function readStoredSettingsSidebarWidth() {
-    if (typeof window === "undefined")
-        return SETTINGS_SIDEBAR_DEFAULT_WIDTH;
-    try {
-        const raw = window.localStorage.getItem(SETTINGS_SIDEBAR_WIDTH_KEY);
-        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
-        if (Number.isFinite(parsed)) {
-            return clampSettingsSidebarWidth(parsed);
-        }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+// Importing the cloud settings barrel registers the Cloud group + the cloud
+// settings sections (side effect), then exposes the extra-group list the
+// grouping below reads — so the cloud sections render whenever Settings mounts.
+import { listExtraSettingsGroups } from "../../cloud/settings/index.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery.js";
+import { ContentLayout } from "../../layouts/content-layout/index.js";
+import { cn } from "../../lib/utils.js";
+import { useApp } from "../../state/index.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { SettingsGroup, SettingsRow, SettingsStack, } from "../settings/settings-layout.js";
+import { getAllSettingsSections, readSettingsHashSection, replaceSettingsHash, SECTION_HUE_MEDALLION_CLASS, SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, settingsSectionLabel, settingsSectionTitle, } from "../settings/settings-sections.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
+/**
+ * Group sections for display. Built-in groups keep their pinned order + labels;
+ * any extra group a section declares (e.g. the `cloud` group) is interleaved by
+ * its registered order with a registered label. A section whose group is neither
+ * built-in nor registered falls into an "Other" bucket so it is never dropped.
+ */
+function groupSections(sections) {
+    const extra = listExtraSettingsGroups();
+    // Built-in groups order by their position in the pinned list (0,1,2). Extra
+    // groups slot between them by their declared order (e.g. cloud at 1.5 between
+    // System=1 and Security=2).
+    const orderOf = new Map();
+    const labels = new Map();
+    SETTINGS_GROUP_ORDER.forEach((group, index) => {
+        orderOf.set(group, index);
+        labels.set(group, SETTINGS_GROUP_LABEL[group]);
+    });
+    for (const group of extra) {
+        orderOf.set(group.id, group.order);
+        labels.set(group.id, group.label);
     }
-    catch {
-        /* ignore sandboxed storage */
+    const buckets = new Map();
+    for (const section of sections) {
+        const bucket = buckets.get(section.group);
+        if (bucket)
+            bucket.push(section);
+        else
+            buckets.set(section.group, [section]);
     }
-    return SETTINGS_SIDEBAR_DEFAULT_WIDTH;
+    const FALLBACK_ORDER = Number.MAX_SAFE_INTEGER;
+    return [...buckets.entries()]
+        .map(([group, items]) => ({
+        group,
+        label: labels.get(group) ?? "Other",
+        items,
+        order: orderOf.get(group) ?? FALLBACK_ORDER,
+    }))
+        .filter((entry) => entry.items.length > 0)
+        .sort((a, b) => a.order - b.order)
+        .map(({ group, label, items }) => ({ group, label, items }));
 }
-function readStoredSettingsSidebarCollapsed() {
-    if (typeof window === "undefined")
-        return false;
-    try {
-        return (window.localStorage.getItem(SETTINGS_SIDEBAR_COLLAPSED_KEY) === "true");
-    }
-    catch {
-        return false;
-    }
+/** Status chip shown on a nav row when cheap to derive. */
+function sectionChip(section, walletEnabled) {
+    if (section.id === "wallet-rpc")
+        return walletEnabled ? "On" : null;
+    return null;
 }
-const SETTINGS_CONTENT_CLASS = "[scroll-padding-top:7rem] [scrollbar-gutter:stable] scroll-smooth bg-bg/10 pb-4 pt-2 sm:pb-6 sm:pt-3";
-const SETTINGS_CONTENT_WIDTH_CLASS = "w-full min-h-0";
-const SETTINGS_SECTION_STACK_CLASS = "space-y-3 pb-10 sm:space-y-4";
-const SETTINGS_SECTIONS = [
-    {
-        id: "identity",
-        label: "settings.sections.identity.label",
-        defaultLabel: "Basics",
-        icon: User,
-        description: "settings.sections.identity.desc",
-        defaultDescription: "Name, voice, and system prompt.",
-    },
-    {
-        id: "ai-model",
-        label: "settings.sections.aimodel.label",
-        defaultLabel: "Providers",
-        icon: Brain,
-        description: "settings.sections.aimodel.desc",
-        defaultDescription: "Cloud, local, subscriptions, and direct providers.",
-    },
-    {
-        id: "runtime",
-        label: "settings.sections.runtime.label",
-        defaultLabel: "Runtime",
-        icon: Server,
-        description: "settings.sections.runtime.desc",
-        defaultDescription: "Switch between the on-device agent, Eliza Cloud, and a Remote Mac.",
-    },
-    {
-        id: "appearance",
-        label: "settings.sections.appearance.label",
-        defaultLabel: "Appearance",
-        icon: Palette,
-        description: "settings.sections.appearance.desc",
-        defaultDescription: "Language, theme, and content packs.",
-    },
-    {
-        id: "capabilities",
-        label: "settings.sections.capabilities.label",
-        defaultLabel: "Capabilities",
-        icon: SlidersHorizontal,
-        description: "settings.sections.capabilities.desc",
-        defaultDescription: "Agent features and automation surfaces.",
-    },
-    {
-        id: "apps",
-        label: "settings.sections.apps.label",
-        defaultLabel: "Apps",
-        icon: LayoutGrid,
-        description: "settings.sections.apps.desc",
-        defaultDescription: "Installed apps, launching, relaunching, editing, and creating new ones.",
-    },
-    {
-        id: "wallet-rpc",
-        label: "settings.sections.walletrpc.label",
-        defaultLabel: "Wallet & RPC",
-        icon: Wallet,
-        description: "settings.sections.walletrpc.desc",
-        defaultDescription: "Wallet network and RPC providers.",
-    },
-    {
-        id: "permissions",
-        label: "settings.sections.permissions.label",
-        defaultLabel: "Permissions",
-        icon: Shield,
-        description: "settings.sections.permissions.desc",
-        defaultDescription: "Browser and device access.",
-    },
-    {
-        id: "secrets",
-        label: "settings.sections.secrets.label",
-        defaultLabel: "Vault",
-        icon: KeyRound,
-        description: "settings.sections.secrets.desc",
-        defaultDescription: "Backends, secrets, saved logins, and per-context routing.",
-    },
-    {
-        id: "security",
-        label: "settings.sections.security.label",
-        defaultLabel: "Security",
-        icon: KeyRound,
-        description: "settings.sections.security.desc",
-        defaultDescription: "Local access, remote password, and sessions.",
-    },
-    {
-        id: "updates",
-        label: "settings.sections.updates.label",
-        defaultLabel: "Updates",
-        icon: RefreshCw,
-        description: "settings.sections.updates.desc",
-        defaultDescription: "Software updates.",
-    },
-    {
-        id: "advanced",
-        label: "settings.sections.backupReset.label",
-        defaultLabel: "Backup & Reset",
-        icon: Archive,
-        description: "settings.sections.backupReset.desc",
-        defaultDescription: "Export, import, and reset.",
-    },
-];
-function settingsSectionLabel(section, t) {
-    return t(section.label, { defaultValue: section.defaultLabel });
+function Chip({ children }) {
+    return (_jsx("span", { className: "inline-flex items-center rounded-full bg-accent/12 px-2 py-0.5 text-[11px] font-medium text-accent ring-1 ring-accent/20", children: children }));
 }
-function readSettingsHashSection() {
-    if (typeof window === "undefined")
-        return null;
-    const hash = window.location.hash.replace(/^#/, "");
-    if (!hash)
-        return null;
-    if (hash === "cloud")
-        return "ai-model";
-    return SETTINGS_SECTIONS.some((section) => section.id === hash) ? hash : null;
+/**
+ * One navigation entry. Renders as a tappable list row on mobile and a compact
+ * rail item on desktop, sharing a single agent-surface registration so the
+ * agent can open any section by id from chat.
+ */
+function SettingsNavItem({ section, label, chip, active, variant, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `section-${section.id}`,
+        role: "card",
+        label,
+        group: "settings-sections",
+        description: `Open the ${label} settings section`,
+        onActivate: () => onSelect(section.id),
+    });
+    const Icon = section.icon;
+    if (variant === "list") {
+        return (_jsx(SettingsRow, { icon: Icon, iconClassName: SECTION_HUE_MEDALLION_CLASS[section.hue], label: label, onClick: () => onSelect(section.id), buttonRef: ref, buttonProps: agentProps, trailing: chip ? _jsx(Chip, { children: chip }) : undefined, chevron: !chip }));
+    }
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(section.id), "aria-current": active ? "page" : undefined, className: cn("flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm transition-colors", active
+            ? "bg-accent/12 font-medium text-accent"
+            : "text-txt hover:bg-surface"), ...agentProps, children: [_jsx("span", { className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-md", active
+                    ? "bg-accent/15 text-accent"
+                    : SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), chip ? _jsx(Chip, { children: chip }) : null] }));
 }
-function replaceSettingsHash(sectionId) {
-    if (typeof window === "undefined")
-        return;
-    const nextHash = `#${sectionId}`;
-    if (window.location.hash === nextHash)
-        return;
-    window.history.replaceState(null, "", nextHash);
+function SectionBackButton({ onBack }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "section-back",
+        role: "button",
+        label: "Back to Settings",
+        description: "Return to the settings hub",
+        onActivate: onBack,
+    });
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onBack, className: "-mx-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40", ...agentProps, children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Settings"] }));
 }
-const SettingsSection = forwardRef(function SettingsSection({ title, description, showDescription = false, bodyClassName, className, children, ...props }, ref) {
-    const panelDescription = showDescription ? description : undefined;
-    if (title || description) {
-        return (_jsx(PagePanel.CollapsibleSection, { ref: ref, as: "section", expanded: true, variant: "section", heading: title ?? "", headingClassName: "text-base sm:text-lg font-semibold tracking-tight text-txt-strong", description: panelDescription, descriptionClassName: "mt-0.5 text-xs leading-snug text-muted", bodyClassName: cn("px-4 pb-3 pt-0 sm:px-5 sm:pb-4", bodyClassName), className: cn("rounded-2xl", className), ...props, children: children }));
-    }
-    return (_jsx("section", { ref: ref, "data-content-align-offset": 4, className: className, ...props, children: _jsx(PagePanel, { variant: "section", children: _jsx("div", { className: cn("p-4 sm:p-5", bodyClassName), children: children }) }) }));
-});
-/* ── Updates Section ─────────────────────────────────────────────────── */
-function UpdatesSection() {
-    return _jsx(ReleaseCenterView, {});
+/** The active section's body: optional back, header (icon + title), content. */
+function SettingsSectionContent({ section, t, onBack, }) {
+    const Component = section.Component;
+    const Icon = section.icon;
+    const title = settingsSectionTitle(section, t);
+    return (_jsxs("div", { id: section.id, children: [onBack ? (_jsx("div", { className: "mb-2.5", children: _jsx(SectionBackButton, { onBack: onBack }) })) : null, _jsxs("div", { className: "mb-3 flex items-center gap-3", children: [_jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-md", SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("h1", { className: "text-xl font-semibold tracking-tight text-txt-strong", children: title })] }), _jsx(PagePanel, { variant: "section", children: _jsx("div", { className: cn("p-4 sm:p-5", section.bodyClassName), children: _jsx(Component, {}) }) })] }));
 }
-/* ── Advanced Section ─────────────────────────────────────────────────── */
-function AdvancedSection() {
-    const { t } = useApp();
-    const { handleReset, exportBusy, exportPassword, exportIncludeLogs, exportError, exportSuccess, importBusy, importPassword, importFile, importError, importSuccess, handleAgentExport, handleAgentImport, setState, } = useApp();
-    const developerMode = useIsDeveloperMode();
-    const [exportModalOpen, setExportModalOpen] = useState(false);
-    const [importModalOpen, setImportModalOpen] = useState(false);
-    const importFileInputRef = useRef(null);
-    const resetExportState = useCallback(() => {
-        setState("exportPassword", "");
-        setState("exportIncludeLogs", false);
-        setState("exportError", null);
-        setState("exportSuccess", null);
-    }, [setState]);
-    const resetImportState = useCallback(() => {
-        if (importFileInputRef.current) {
-            importFileInputRef.current.value = "";
-        }
-        setState("importPassword", "");
-        setState("importFile", null);
-        setState("importError", null);
-        setState("importSuccess", null);
-    }, [setState]);
-    const openExportModal = useCallback(() => {
-        resetExportState();
-        setExportModalOpen(true);
-    }, [resetExportState]);
-    const closeExportModal = useCallback(() => {
-        setExportModalOpen(false);
-        resetExportState();
-    }, [resetExportState]);
-    const openImportModal = useCallback(() => {
-        resetImportState();
-        setImportModalOpen(true);
-    }, [resetImportState]);
-    const closeImportModal = useCallback(() => {
-        setImportModalOpen(false);
-        resetImportState();
-    }, [resetImportState]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs(Button, { variant: "outline", type: "button", onClick: openExportModal, className: "min-h-[5.5rem] h-auto rounded-[calc(var(--radius-xl)_+_2px)] border border-border/50 bg-card/60 p-5 text-left backdrop-blur-md transition-[transform,border-color,background-color,box-shadow] group hover:-translate-y-0.5 hover:border-accent hover:shadow-[0_4px_20px_rgba(var(--accent-rgb),0.1)]", "aria-haspopup": "dialog", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-border/50 bg-bg-accent p-3 shadow-sm transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Download, { className: "h-5 w-5 shrink-0 text-txt transition-colors group-hover:text-accent-fg" }) }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: t("settings.exportAgent") }) })] }), _jsxs(Button, { variant: "outline", type: "button", onClick: openImportModal, className: "min-h-[5.5rem] h-auto rounded-[calc(var(--radius-xl)_+_2px)] border border-border/50 bg-card/60 p-5 text-left backdrop-blur-md transition-[transform,border-color,background-color,box-shadow] group hover:-translate-y-0.5 hover:border-accent hover:shadow-[0_4px_20px_rgba(var(--accent-rgb),0.1)]", "aria-haspopup": "dialog", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-border/50 bg-bg-accent p-3 shadow-sm transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Upload, { className: "h-5 w-5 shrink-0 text-txt transition-colors group-hover:text-accent-fg" }) }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: t("settings.importAgent") }) })] })] }), _jsx("div", { className: "border border-border/50 rounded-2xl overflow-hidden bg-bg/40 backdrop-blur-sm", children: _jsx("div", { className: "p-4 space-y-4", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: "Developer Mode" }), _jsx("div", { className: "text-xs text-muted", children: "Show developer tools (logs, trajectory viewer, prompt artifacts) and developer-only apps in the nav." })] }), _jsxs(Label, { className: "flex items-center gap-2 font-normal text-muted whitespace-nowrap", children: [_jsx(Checkbox, { checked: developerMode, onCheckedChange: (checked) => setDeveloperMode(!!checked) }), _jsx("span", { children: developerMode ? "Enabled" : "Disabled" })] })] }) }) }), _jsxs("div", { className: "border border-danger/30 rounded-2xl overflow-hidden bg-bg/40 backdrop-blur-sm", children: [_jsxs("div", { className: "bg-danger/10 px-5 py-3 border-b border-danger/20 flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "w-4 h-4 text-danger" }), _jsx("span", { className: "font-bold text-sm text-danger tracking-wide uppercase", children: t("settings.dangerZone") })] }), _jsx("div", { className: "p-4 space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t("settings.resetAgent") }), _jsx("div", { className: "text-xs text-muted", children: t("settings.resetAgentHint") })] }), _jsx(Button, { variant: "destructive", size: "sm", className: "rounded-xl shadow-sm whitespace-nowrap", onClick: () => {
-                                                void handleReset();
-                                            }, 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, { id: "settings-export-password", type: "password", value: exportPassword, onChange: (e) => setState("exportPassword", e.target.value), placeholder: t("settingsview.EnterExportPasswor"), className: "rounded-lg bg-bg" }), _jsxs(Label, { className: "flex items-center gap-2 font-normal text-muted", children: [_jsx(Checkbox, { checked: exportIncludeLogs, onCheckedChange: (checked) => setState("exportIncludeLogs", !!checked) }), t("settingsview.IncludeRecentLogs")] })] }), exportError && (_jsx("div", { className: "rounded-lg 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-lg 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(Button, { variant: "outline", size: "sm", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)]", onClick: closeExportModal, children: t("common.cancel") }), _jsxs(Button, { variant: "default", size: "sm", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)]", disabled: exportBusy, onClick: () => void handleAgentExport(), children: [exportBusy && _jsx(Spinner, { size: 16 }), t("common.export")] })] })] })] }) }), _jsx(Dialog, { open: importModalOpen, onOpenChange: (open) => {
-                    if (!open)
-                        closeImportModal();
-                }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("settings.importAgent") }) }), _jsxs("div", { className: "space-y-4", children: [_jsx("input", { ref: importFileInputRef, type: "file", className: "hidden", accept: ".eliza-agent,.agent,application/octet-stream", onChange: (e) => setState("importFile", e.target.files?.[0] ?? null) }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: t("settingsview.BackupFile") }), _jsxs(Button, { variant: "outline", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)] flex w-full items-center justify-between gap-3 text-left", onClick: () => importFileInputRef.current?.click(), children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-txt", children: importFile?.name ?? t("settingsview.ChooseAnExportedBack") }), _jsx("span", { className: "shrink-0 text-xs font-medium text-txt", children: importFile
-                                                        ? t("settings.change", { defaultValue: "Change" })
-                                                        : t("settings.browse", { defaultValue: "Browse" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "settings-import-password", className: "text-txt-strong", children: t("settingsview.Password") }), _jsx(Input, { id: "settings-import-password", type: "password", value: importPassword, onChange: (e) => setState("importPassword", e.target.value), placeholder: t("settingsview.EnterImportPasswor"), className: "rounded-lg bg-bg" })] }), importError && (_jsx("div", { className: "rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", role: "alert", "aria-live": "assertive", children: importError })), importSuccess && (_jsx("div", { className: "rounded-lg border border-ok/30 bg-ok/10 px-3 py-2 text-sm text-ok", role: "status", "aria-live": "polite", children: importSuccess })), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [_jsx(Button, { variant: "outline", size: "sm", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)]", onClick: closeImportModal, children: t("common.cancel") }), _jsxs(Button, { variant: "default", size: "sm", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)]", disabled: importBusy, onClick: () => void handleAgentImport(), children: [importBusy && _jsx(Spinner, { size: 16 }), t("settings.import")] })] })] })] }) })] }));
+function MobileHub({ grouped, t, walletEnabled, onSelect, }) {
+    return (_jsxs("div", { className: "w-full pb-32", children: [_jsx("h1", { className: "mb-4 text-2xl font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), _jsx(SettingsStack, { children: grouped.map(({ group, label, items }) => (_jsx(SettingsGroup, { title: label, children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: false, variant: "list", onSelect: onSelect }, section.id))) }, group))) })] }));
 }
-/* ── SettingsView ─────────────────────────────────────────────────────── */
-export function SettingsView({ inModal, onClose: _onClose, initialSection, } = {}) {
+function DesktopLayout({ grouped, t, walletEnabled, activeId, activeSection, onSelect, }) {
+    return (_jsxs("div", { className: "flex w-full gap-7 pb-32", children: [_jsx("nav", { className: "w-60 shrink-0", "aria-label": "Settings sections", children: _jsxs("div", { className: "sticky top-2 space-y-5", children: [_jsx("h1", { className: "px-2.5 text-lg font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), grouped.map(({ group, label, items }) => (_jsxs("div", { children: [_jsx("h2", { className: "mb-1 px-2.5 text-xs font-medium text-muted", children: label }), _jsx("div", { className: "space-y-0.5", children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: section.id === activeId, variant: "rail", onSelect: onSelect }, section.id))) })] }, group)))] }) }), _jsx("div", { className: "min-w-0 flex-1", children: activeSection ? (_jsx(SettingsSectionContent, { section: activeSection, t: t })) : null })] }));
+}
+export function SettingsView({ inModal, initialSection, } = {}) {
     const { t, loadPlugins, walletEnabled } = useApp();
-    const [activeSection, setActiveSection] = useState(() => initialSection ?? readSettingsHashSection() ?? "identity");
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(readStoredSettingsSidebarCollapsed);
-    const [sidebarWidth, setSidebarWidth] = useState(readStoredSettingsSidebarWidth);
-    const shellRef = useRef(null);
-    const initialAlignmentPendingRef = useRef(true);
-    const scrollSelectionSuppressionTimerRef = useRef(null);
-    const handleSidebarCollapsedChange = useCallback((next) => {
-        setSidebarCollapsed(next);
-        try {
-            window.localStorage.setItem(SETTINGS_SIDEBAR_COLLAPSED_KEY, String(next));
-        }
-        catch {
-            /* ignore sandboxed storage */
-        }
-    }, []);
-    const handleSidebarWidthChange = useCallback((next) => {
-        const clamped = clampSettingsSidebarWidth(next);
-        setSidebarWidth(clamped);
-        try {
-            window.localStorage.setItem(SETTINGS_SIDEBAR_WIDTH_KEY, String(clamped));
-        }
-        catch {
-            /* ignore sandboxed storage */
-        }
-    }, []);
-    const suppressScrollSelection = useCallback((durationMs = 700) => {
-        if (typeof window === "undefined")
-            return;
-        initialAlignmentPendingRef.current = true;
-        if (scrollSelectionSuppressionTimerRef.current != null) {
-            window.clearTimeout(scrollSelectionSuppressionTimerRef.current);
-        }
-        scrollSelectionSuppressionTimerRef.current = window.setTimeout(() => {
-            initialAlignmentPendingRef.current = false;
-            scrollSelectionSuppressionTimerRef.current = null;
-        }, durationMs);
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (typeof window !== "undefined" &&
-                scrollSelectionSuppressionTimerRef.current != null) {
-                window.clearTimeout(scrollSelectionSuppressionTimerRef.current);
-            }
-        };
-    }, []);
+    const isDesktop = useMediaQuery("(min-width: 1024px)");
+    const [activeSection, setActiveSection] = useState(() => initialSection ?? readSettingsHashSection());
     const visibleSections = useMemo(() => {
-        return SETTINGS_SECTIONS.filter((section) => {
+        return getAllSettingsSections().filter((section) => {
             if (section.id === "wallet-rpc" && walletEnabled === false)
                 return false;
             return true;
         });
     }, [walletEnabled]);
     const visibleSectionIds = useMemo(() => new Set(visibleSections.map((section) => section.id)), [visibleSections]);
-    const { contentContainerRef, queueContentAlignment, registerContentItem, registerSidebarItem, } = useLinkedSidebarSelection({
-        contentTopOffset: 24,
-        enabled: visibleSections.length > 0,
-        selectedId: visibleSectionIds.has(activeSection) ? activeSection : null,
-        topAlignedId: visibleSections[0]?.id ?? null,
-    });
-    const alignContentToSection = useCallback((sectionId) => {
-        const root = contentContainerRef.current;
-        const shell = shellRef.current;
-        const target = shell?.querySelector(`#${sectionId}`);
-        if (!(root instanceof HTMLElement) || !(target instanceof HTMLElement)) {
-            return false;
-        }
-        const rootRect = root.getBoundingClientRect();
-        const targetRect = target.getBoundingClientRect();
-        root.scrollTo({
-            top: root.scrollTop + targetRect.top - rootRect.top - 24,
-            behavior: "auto",
-        });
-        return true;
-    }, [contentContainerRef]);
-    const queueSectionAlignment = useCallback((sectionId) => {
-        suppressScrollSelection();
-        queueContentAlignment(sectionId);
-        if (typeof window === "undefined")
-            return;
-        window.requestAnimationFrame(() => {
-            if (!alignContentToSection(sectionId)) {
-                window.setTimeout(() => alignContentToSection(sectionId), 50);
-            }
-        });
-    }, [alignContentToSection, queueContentAlignment, suppressScrollSelection]);
+    const grouped = useMemo(() => groupSections(visibleSections), [visibleSections]);
     useEffect(() => {
         void loadPlugins();
     }, [loadPlugins]);
-    // Deep-link target: another component (e.g. AutomationsView's missing-creds
-    // banner, or apps/app/src/main.tsx parsing eliza://settings/connectors/<x>)
-    // dispatches SETTINGS_FOCUS_CONNECTOR_EVENT with the canonical provider id.
-    // We focus the Integrations section, then scroll the matching panel wrapper
-    // (`[data-connector="<provider>"]`) into view and briefly flash it.
-    // Providers without a wrapper (e.g. Slack today) gracefully fall through —
-    // the section header is still in view.
-    //
-    // Two delivery paths handled here so neither races React's render scheduler:
-    //   1) The dispatcher fires a window event — the listener below catches it
-    //      whenever SettingsView is already mounted at dispatch time.
-    //   2) The dispatcher also stashes the provider in a module-scoped ref. On
-    //      mount, this effect drains it via `consumePendingFocusProvider()` so
-    //      a click that mounted SettingsView (e.g. AutomationsView's "Connect
-    //      Gmail →" button switching to the settings tab) still focuses the
-    //      panel even though the event fired before the listener registered.
-    // Stale-flash guard: keep the latest setTimeout id in a ref and clear the
-    // previous one on each new focus so a double-click does not clip the
-    // second flash short.
-    const flashTimerRef = useRef(null);
-    useEffect(() => {
-        function focusProvider(provider) {
-            if (!provider)
-                return;
-            setActiveSection("integrations");
-            queueContentAlignment("integrations");
-            requestAnimationFrame(() => {
-                const node = document.querySelector(`[data-connector="${CSS.escape(provider)}"]`);
-                if (!node)
-                    return;
-                node.scrollIntoView({ behavior: "smooth", block: "start" });
-                node.classList.add("connector-flash");
-                if (flashTimerRef.current !== null) {
-                    clearTimeout(flashTimerRef.current);
-                }
-                flashTimerRef.current = setTimeout(() => {
-                    node.classList.remove("connector-flash");
-                    flashTimerRef.current = null;
-                }, 1800);
-            });
-        }
-        function handle(event) {
-            const detail = event
-                .detail;
-            if (!detail?.provider)
-                return;
-            // Consume the stash here too — the dispatcher always writes it before
-            // firing the event, but if we're already mounted the event path wins
-            // and the stash would otherwise persist and re-fire on the next mount
-            // (e.g. tab navigation) as a spurious scroll/flash.
-            consumePendingFocusProvider();
-            focusProvider(detail.provider);
-        }
-        // Drain any pending provider stashed before this mount.
-        const pending = consumePendingFocusProvider();
-        if (pending)
-            focusProvider(pending);
-        window.addEventListener(SETTINGS_FOCUS_CONNECTOR_EVENT, handle);
-        return () => {
-            window.removeEventListener(SETTINGS_FOCUS_CONNECTOR_EVENT, handle);
-            if (flashTimerRef.current !== null) {
-                clearTimeout(flashTimerRef.current);
-                flashTimerRef.current = null;
-            }
-        };
-    }, [queueContentAlignment]);
-    const handleSectionChange = useCallback((sectionId) => {
+    const openSection = useCallback((sectionId) => {
         setActiveSection(sectionId);
         replaceSettingsHash(sectionId);
-        queueSectionAlignment(sectionId);
-    }, [queueSectionAlignment]);
-    useEffect(() => {
-        if (visibleSections.length === 0)
-            return;
-        if (!visibleSectionIds.has(activeSection)) {
-            setActiveSection(visibleSections[0].id);
+    }, []);
+    const backToHub = useCallback(() => {
+        setActiveSection(null);
+        if (typeof window !== "undefined") {
+            window.history.replaceState(null, "", "#");
         }
-    }, [activeSection, visibleSectionIds, visibleSections]);
-    useEffect(() => {
-        if (!initialAlignmentPendingRef.current)
-            return;
-        if (!visibleSectionIds.has(activeSection))
-            return;
-        queueSectionAlignment(activeSection);
-    }, [activeSection, queueSectionAlignment, visibleSectionIds]);
+    }, []);
     useEffect(() => {
         if (!initialSection)
             return;
-        handleSectionChange(initialSection);
-    }, [handleSectionChange, initialSection]);
+        openSection(initialSection);
+    }, [initialSection, openSection]);
     useEffect(() => {
         if (typeof window === "undefined")
             return;
         const handleHashChange = () => {
             const nextSection = readSettingsHashSection();
-            if (!nextSection || !visibleSectionIds.has(nextSection))
-                return;
-            handleSectionChange(nextSection);
+            if (nextSection && visibleSectionIds.has(nextSection)) {
+                setActiveSection(nextSection);
+            }
+            else {
+                setActiveSection(null);
+            }
         };
         window.addEventListener("hashchange", handleHashChange);
         return () => window.removeEventListener("hashchange", handleHashChange);
-    }, [handleSectionChange, visibleSectionIds]);
-    useEffect(() => {
-        const shell = shellRef.current;
-        const root = contentContainerRef.current;
-        if (!shell || !root)
-            return;
-        const handleScroll = () => {
-            if (initialAlignmentPendingRef.current)
-                return;
-            const sections = visibleSections
-                .map((section) => {
-                const el = shell.querySelector(`#${section.id}`);
-                return { id: section.id, el };
-            })
-                .filter((section) => section.el instanceof HTMLElement);
-            if (sections.length === 0)
-                return;
-            const rootRect = root.getBoundingClientRect();
-            const activeAnchorOffset = Math.min(320, Math.max(180, root.clientHeight * 0.35));
-            let currentSection = sections[0].id;
-            for (const { id, el } of sections) {
-                const elRect = el.getBoundingClientRect();
-                if (elRect.top - rootRect.top <= activeAnchorOffset) {
-                    currentSection = id;
-                }
-            }
-            setActiveSection((prev) => {
-                if (prev === currentSection)
-                    return prev;
-                replaceSettingsHash(currentSection);
-                return currentSection;
-            });
-        };
-        root.addEventListener("scroll", handleScroll, { passive: true });
-        handleScroll();
-        return () => root.removeEventListener("scroll", handleScroll);
-    }, [contentContainerRef, visibleSections]);
-    const activeSectionDef = visibleSections.find((section) => section.id === activeSection) ??
-        SETTINGS_SECTIONS.find((section) => section.id === activeSection) ??
-        visibleSections[0] ??
-        null;
-    const settingsSidebar = (_jsx(AppPageSidebar, { testId: "settings-sidebar", collapsible: true, collapsed: sidebarCollapsed, onCollapsedChange: handleSidebarCollapsedChange, resizable: true, width: sidebarWidth, onWidthChange: handleSidebarWidthChange, minWidth: SETTINGS_SIDEBAR_MIN_WIDTH, maxWidth: SETTINGS_SIDEBAR_MAX_WIDTH, onCollapseRequest: () => handleSidebarCollapsedChange(true), contentIdentity: "settings", collapseButtonTestId: "settings-sidebar-collapse-toggle", expandButtonTestId: "settings-sidebar-expand-toggle", collapseButtonAriaLabel: "Collapse settings", expandButtonAriaLabel: "Expand settings", mobileTitle: t("nav.settings"), mobileMeta: activeSectionDef ? settingsSectionLabel(activeSectionDef, t) : undefined, children: _jsx(SidebarScrollRegion, { className: "pt-0", children: _jsx(SidebarPanel, { children: _jsx("nav", { className: "space-y-1.5", "aria-label": t("nav.settings"), children: visibleSections.map((section) => {
-                        const isActive = activeSection === section.id;
-                        const Icon = section.icon;
-                        return (_jsx(SidebarContent.Item, { as: "div", active: isActive, className: "gap-2 py-2", ref: registerSidebarItem(section.id), children: _jsxs(SidebarContent.ItemButton, { onClick: () => handleSectionChange(section.id), "aria-current": isActive ? "page" : undefined, className: "items-center gap-2.5", children: [_jsx(SidebarContent.ItemIcon, { active: isActive, className: "mt-0 h-8 w-8 rounded-lg p-1.5", children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(SidebarContent.ItemBody, { children: _jsx(SidebarContent.ItemTitle, { className: cn("text-sm leading-5", isActive ? "font-semibold" : "font-medium"), children: settingsSectionLabel(section, t) }) })] }) }, section.id));
-                    }) }) }) }) }));
-    const sectionsContent = (_jsxs(_Fragment, { children: [visibleSectionIds.has("identity") && (_jsx(SettingsSection, { id: "identity", title: t("settings.sections.identity.label", {
-                    defaultValue: "Basics",
-                }), description: t("settings.sections.identity.desc", {
-                    defaultValue: "Name, voice, and system prompt.",
-                }), ref: registerContentItem("identity"), children: _jsx(IdentitySettingsSection, {}) })), visibleSectionIds.has("ai-model") && (_jsx(SettingsSection, { id: "ai-model", title: t("common.providers", {
-                    defaultValue: "Providers",
-                }), description: t("settings.sections.aimodel.desc", {
-                    defaultValue: "Cloud, local, subscriptions, and direct providers.",
-                }), ref: registerContentItem("ai-model"), children: _jsx(ProviderSwitcher, {}) })), visibleSectionIds.has("runtime") && (_jsx(SettingsSection, { id: "runtime", title: t("settings.sections.runtime.label", {
-                    defaultValue: "Runtime",
-                }), description: t("settings.sections.runtime.desc", {
-                    defaultValue: "Switch between the on-device agent, Eliza Cloud, and a Remote Mac.",
-                }), ref: registerContentItem("runtime"), children: _jsx(RuntimeSettingsSection, {}) })), visibleSectionIds.has("appearance") && (_jsx(SettingsSection, { id: "appearance", title: t("settings.sections.appearance.label", {
-                    defaultValue: "Appearance",
-                }), description: t("settings.sections.appearance.desc", {
-                    defaultValue: "Language, theme, and content packs.",
-                }), ref: registerContentItem("appearance"), children: _jsx(AppearanceSettingsSection, {}) })), visibleSectionIds.has("capabilities") && (_jsx(SettingsSection, { id: "capabilities", title: t("common.capabilities", {
-                    defaultValue: "Capabilities",
-                }), description: t("settings.sections.capabilities.desc", {
-                    defaultValue: "Agent features and automation surfaces.",
-                }), ref: registerContentItem("capabilities"), children: _jsx(CapabilitiesSection, {}) })), visibleSectionIds.has("apps") && (_jsx(SettingsSection, { id: "apps", title: t("settings.sections.apps.label", {
-                    defaultValue: "Apps",
-                }), description: t("settings.sections.apps.desc", {
-                    defaultValue: "Installed apps, launching, relaunching, editing, and creating new ones.",
-                }), ref: registerContentItem("apps"), children: _jsx(AppsManagementSection, {}) })), visibleSectionIds.has("wallet-rpc") && (_jsx(SettingsSection, { id: "wallet-rpc", title: t("settings.sections.walletrpc.label", {
-                    defaultValue: "Wallet & RPC",
-                }), description: t("settings.sections.walletrpc.desc", {
-                    defaultValue: "Wallet network and RPC providers.",
-                }), bodyClassName: "p-4 sm:p-5", ref: registerContentItem("wallet-rpc"), children: _jsxs("div", { className: "space-y-6", children: [_jsx(WalletKeysSection, {}), _jsx(ConfigPageView, { embedded: true })] }) })), visibleSectionIds.has("permissions") && (_jsx(SettingsSection, { id: "permissions", title: t("common.permissions", {
-                    defaultValue: "Permissions",
-                }), description: t("settings.sections.permissions.desc", {
-                    defaultValue: "Browser and device access.",
-                }), ref: registerContentItem("permissions"), children: _jsx(PermissionsSection, {}) })), visibleSectionIds.has("secrets") && (_jsx(SettingsSection, { id: "secrets", title: t("settings.sections.secrets.label", {
-                    defaultValue: "Vault",
-                }), description: t("settings.sections.secrets.desc", {
-                    defaultValue: "Backends, secrets, saved logins, and per-context routing.",
-                }), ref: registerContentItem("secrets"), children: _jsx(SecretsManagerSection, {}) })), visibleSectionIds.has("security") && (_jsx(SettingsSection, { id: "security", title: t("settings.sections.security.label", {
-                    defaultValue: "Security",
-                }), description: t("settings.sections.security.desc", {
-                    defaultValue: "Local access, remote password, and sessions.",
-                }), ref: registerContentItem("security"), children: _jsx(SecuritySettingsSection, {}) })), visibleSectionIds.has("updates") && (_jsx(SettingsSection, { id: "updates", title: t("settings.sections.updates.label", {
-                    defaultValue: "Updates",
-                }), description: t("settings.sections.updates.desc", {
-                    defaultValue: "Software updates.",
-                }), ref: registerContentItem("updates"), children: _jsx(UpdatesSection, {}) })), visibleSectionIds.has("advanced") && (_jsx(SettingsSection, { id: "advanced", title: t("settings.sections.backupReset.label", {
-                    defaultValue: "Backup & Reset",
-                }), description: t("settings.sections.backupReset.desc", {
-                    defaultValue: "Export, import, and reset.",
-                }), ref: registerContentItem("advanced"), children: _jsx(AdvancedSection, {}) }))] }));
-    return (_jsx(PageLayout, { className: cn("h-full", inModal && "min-h-0"), "data-testid": "settings-shell", sidebar: settingsSidebar, contentRef: contentContainerRef, contentClassName: SETTINGS_CONTENT_CLASS, contentInnerClassName: SETTINGS_CONTENT_WIDTH_CLASS, mobileSidebarLabel: activeSectionDef
-            ? settingsSectionLabel(activeSectionDef, t)
-            : t("nav.settings"), children: _jsx("div", { ref: shellRef, className: `w-full ${SETTINGS_SECTION_STACK_CLASS}`, children: sectionsContent }) }));
+    }, [visibleSectionIds]);
+    const activeSectionDef = activeSection && visibleSectionIds.has(activeSection)
+        ? (visibleSections.find((section) => section.id === activeSection) ??
+            null)
+        : null;
+    // Desktop keeps a section selected in the detail pane; mobile shows the
+    // grouped list until a row is tapped.
+    const desktopSection = activeSectionDef ?? visibleSections[0] ?? null;
+    return (_jsx(ShellViewAgentSurface, { viewId: "settings", children: _jsx(ContentLayout, { inModal: inModal, children: _jsx("div", { "data-testid": "settings-shell", children: isDesktop ? (_jsx(DesktopLayout, { grouped: grouped, t: t, walletEnabled: walletEnabled, activeId: desktopSection?.id ?? null, activeSection: desktopSection, onSelect: openSection })) : activeSectionDef ? (_jsx("div", { className: "w-full pb-32", children: _jsx(SettingsSectionContent, { section: activeSectionDef, t: t, onBack: backToHub }) })) : (_jsx(MobileHub, { grouped: grouped, t: t, walletEnabled: walletEnabled, onSelect: openSection })) }) }) }));
 }