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

package/dist/components/pages/SettingsView.js

@@ -1,526 +0,0 @@
-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/dist/components/pages/SkillsView.d.ts.map

@@ -1 +0,0 @@
-{"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"}