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

package/components/pages/SettingsView.js

@@ -0,0 +1,526 @@
+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);
+        }
+    }
+    catch {
+        /* ignore sandboxed storage */
+    }
+    return SETTINGS_SIDEBAR_DEFAULT_WIDTH;
+}
+function readStoredSettingsSidebarCollapsed() {
+    if (typeof window === "undefined")
+        return false;
+    try {
+        return (window.localStorage.getItem(SETTINGS_SIDEBAR_COLLAPSED_KEY) === "true");
+    }
+    catch {
+        return false;
+    }
+}
+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 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;
+}
+function replaceSettingsHash(sectionId) {
+    if (typeof window === "undefined")
+        return;
+    const nextHash = `#${sectionId}`;
+    if (window.location.hash === nextHash)
+        return;
+    window.history.replaceState(null, "", nextHash);
+}
+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, {});
+}
+/* ── 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")] })] })] })] }) })] }));
+}
+/* ── SettingsView ─────────────────────────────────────────────────────── */
+export function SettingsView({ inModal, onClose: _onClose, 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 visibleSections = useMemo(() => {
+        return SETTINGS_SECTIONS.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]);
+    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) => {
+        setActiveSection(sectionId);
+        replaceSettingsHash(sectionId);
+        queueSectionAlignment(sectionId);
+    }, [queueSectionAlignment]);
+    useEffect(() => {
+        if (visibleSections.length === 0)
+            return;
+        if (!visibleSectionIds.has(activeSection)) {
+            setActiveSection(visibleSections[0].id);
+        }
+    }, [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]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleHashChange = () => {
+            const nextSection = readSettingsHashSection();
+            if (!nextSection || !visibleSectionIds.has(nextSection))
+                return;
+            handleSectionChange(nextSection);
+        };
+        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 }) }));
+}

package/components/pages/SkillsView.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export declare function SkillsView({ contentHeader, inModal, }?: {
+    contentHeader?: ReactNode;
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SkillsView.d.ts.map

package/components/pages/SkillsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AASrE,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}