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

package/components/settings/CapabilitiesSection.js

@@ -1,14 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertTriangle, Cloud, Globe, GraduationCap, Loader2, MonitorCog, PlugZap, Wallet, } from "lucide-react";
+import { AlertTriangle, Cloud, Globe, GraduationCap, Loader2, MessageCircle, MonitorCog, PlugZap, Wallet, } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector, useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
-import { SettingsActionButton, SettingsInputRow, SettingsSelectRow, SettingsSwitchRow, } from "./settings-agent-rows.js";
+import { AdvancedToggle } from "./AdvancedToggle.js";
+import { useAdvancedSettingsEnabled } from "./AdvancedToggle.hooks.js";
+import { SettingsActionButton, SettingsInputRow, SettingsSegmentedRow, SettingsSelectRow, SettingsSwitchRow, } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+/**
+ * Env key the proactive-interaction decider reads (`#8792`). Persisted into
+ * `config.env` (propagated to `process.env` at boot) and resolved at decider
+ * registration via `runtime.getSetting(ELIZA_PROACTIVE_INTERACTIONS)`.
+ */
+const PROACTIVE_INTERACTIONS_ENV_KEY = "ELIZA_PROACTIVE_INTERACTIONS";
+const PROACTIVE_CHATTINESS_VALUES = [
+    "off",
+    "subtle",
+    "chatty",
+];
+/** Default when no value is persisted (mirrors the gate's `subtle` default). */
+const DEFAULT_PROACTIVE_CHATTINESS = "subtle";
+function readProactiveChattinessFromEnv(env) {
+    if (!env || typeof env !== "object" || Array.isArray(env))
+        return null;
+    const record = env;
+    const vars = record.vars &&
+        typeof record.vars === "object" &&
+        !Array.isArray(record.vars)
+        ? record.vars
+        : undefined;
+    const raw = record[PROACTIVE_INTERACTIONS_ENV_KEY] ??
+        vars?.[PROACTIVE_INTERACTIONS_ENV_KEY];
+    const value = typeof raw === "string" ? raw.trim().toLowerCase() : "";
+    return PROACTIVE_CHATTINESS_VALUES.includes(value)
+        ? value
+        : null;
+}
 export function CapabilitiesSection() {
-    const { walletEnabled, browserEnabled, computerUseEnabled, setState, t } = useApp();
+    const { walletEnabled, browserEnabled, computerUseEnabled, setState, t } = useAppSelectorShallow((s) => ({
+        walletEnabled: s.walletEnabled,
+        browserEnabled: s.browserEnabled,
+        computerUseEnabled: s.computerUseEnabled,
+        setState: s.setState,
+        t: s.t,
+    }));
+    const advancedEnabled = useAdvancedSettingsEnabled();
+    const [proactiveChattiness, setProactiveChattiness] = useState(DEFAULT_PROACTIVE_CHATTINESS);
+    const [proactiveSaving, setProactiveSaving] = useState(false);
     const [autoTrainingConfig, setAutoTrainingConfig] = useState(null);
     const [autoTrainingAvailable, setAutoTrainingAvailable] = useState(null);
     const [autoTrainingLoading, setAutoTrainingLoading] = useState(true);
@@ -47,6 +87,45 @@ export function CapabilitiesSection() {
     useEffect(() => {
         void refreshAutoTraining();
     }, [refreshAutoTraining]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            try {
+                const config = await client.getConfig();
+                const resolved = readProactiveChattinessFromEnv(config.env);
+                if (!cancelled && resolved)
+                    setProactiveChattiness(resolved);
+            }
+            catch {
+                // Leave the default when config is unavailable.
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const handleProactiveChattinessChange = useCallback(async (next) => {
+        if (!PROACTIVE_CHATTINESS_VALUES.includes(next)) {
+            return;
+        }
+        const value = next;
+        const previous = proactiveChattiness;
+        if (value === previous)
+            return;
+        setProactiveChattiness(value);
+        setProactiveSaving(true);
+        try {
+            await client.updateConfig({
+                env: { [PROACTIVE_INTERACTIONS_ENV_KEY]: value },
+            });
+        }
+        catch {
+            setProactiveChattiness(previous);
+        }
+        finally {
+            setProactiveSaving(false);
+        }
+    }, [proactiveChattiness]);
     const handleAutoTrainingChange = useCallback(async (checked) => {
         if (!autoTrainingConfig || autoTrainingAvailable === false)
             return;
@@ -197,7 +276,7 @@ export function CapabilitiesSection() {
     ]);
     return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: t("settings.sections.capabilities.groupTitle", {
                     defaultValue: "Capabilities",
-                }), children: [_jsx(SettingsSwitchRow, { agentId: "capability-wallet", icon: Wallet, label: t("nav.wallet", { defaultValue: "Wallet" }), agentLabel: t("settings.sections.wallet.enableLabel", {
+                }), action: _jsx(AdvancedToggle, { label: "Advanced" }), children: [_jsx(SettingsSwitchRow, { agentId: "capability-wallet", icon: Wallet, label: t("nav.wallet", { defaultValue: "Wallet" }), agentLabel: t("settings.sections.wallet.enableLabel", {
                             defaultValue: "Enable Wallet",
                         }), group: "capabilities", checked: walletEnabled, onCheckedChange: (checked) => setState("walletEnabled", checked) }), _jsx(SettingsSwitchRow, { agentId: "capability-browser", icon: Globe, label: t("nav.browser", { defaultValue: "Browser" }), agentLabel: t("settings.sections.capabilities.browserLabel", {
                             defaultValue: "Enable Browser",
@@ -213,23 +292,46 @@ export function CapabilitiesSection() {
                                     defaultValue: "Auto-training",
                                 }), _jsx(CapabilityStatusIcon, { status: autoTrainingStatus })] }), agentLabel: t("settings.sections.capabilities.autoTrainingLabel", {
                             defaultValue: "Enable Auto-training",
-                        }), group: "capabilities", disabled: autoTrainingDisabled, checked: autoTrainingConfig?.autoTrain ?? false, onCheckedChange: (checked) => handleAutoTrainingChange(checked) })] }), _jsx("form", { onSubmit: handleCapabilityConnect, children: _jsxs(SettingsGroup, { title: t("settings.sections.capabilities.capabilityRouterName", {
+                        }), group: "capabilities", disabled: autoTrainingDisabled, checked: autoTrainingConfig?.autoTrain ?? false, onCheckedChange: (checked) => handleAutoTrainingChange(checked) }), _jsx(SettingsSegmentedRow, { agentId: "capability-proactive-suggestions", icon: MessageCircle, label: t("settings.sections.capabilities.proactiveName", {
+                            defaultValue: "Proactive suggestions",
+                        }), agentLabel: t("settings.sections.capabilities.proactiveLabel", {
+                            defaultValue: "Proactive suggestions",
+                        }), description: t("settings.sections.capabilities.proactiveHint", {
+                            defaultValue: "How often the agent offers a helpful suggestion when you switch views or run a shortcut.",
+                        }), group: "capabilities", testId: "capability-proactive-suggestions", value: proactiveChattiness, onValueChange: (value) => void handleProactiveChattinessChange(value), disabled: proactiveSaving, options: [
+                            {
+                                value: "off",
+                                label: t("settings.sections.capabilities.proactiveOff", {
+                                    defaultValue: "Off",
+                                }),
+                            },
+                            {
+                                value: "subtle",
+                                label: t("settings.sections.capabilities.proactiveSubtle", {
+                                    defaultValue: "Subtle",
+                                }),
+                            },
+                            {
+                                value: "chatty",
+                                label: t("settings.sections.capabilities.proactiveChatty", {
+                                    defaultValue: "Chatty",
+                                }),
+                            },
+                        ] })] }), advancedEnabled ? (_jsx("form", { onSubmit: handleCapabilityConnect, children: _jsxs(SettingsGroup, { title: t("settings.sections.capabilities.capabilityRouterName", {
                         defaultValue: "Capability Router",
-                    }), description: t("settings.sections.capabilities.capabilityRouterHint", {
-                        defaultValue: "Connect a remote endpoint that adds plugins, routes, apps, and views.",
                     }), footer: capabilityConnectError ? (_jsx("span", { className: "text-warn", role: "alert", children: capabilityConnectError })) : capabilityConnectResult?.success ? (_jsxs("span", { className: "text-ok", role: "status", children: [t("settings.sections.capabilities.capabilityRouterConnected", {
                                 defaultValue: "Connected remote capability endpoint.",
                             }), " ", capabilityConnectResult.sync?.registered?.length
                                 ? capabilityConnectResult.sync.registered.join(", ")
                                 : capabilityConnectResult.endpoint?.baseUrl] })) : undefined, children: [_jsx(SettingsRow, { label: t("capabilities.connectionModeLabel", {
                                 defaultValue: "Connection",
-                            }), description: t("capabilities.connectionModeAria", {
-                                defaultValue: "Capability router connection mode",
                             }), stacked: true, children: _jsxs("div", { className: "flex gap-2", role: "tablist", "aria-label": t("capabilities.connectionModeAria", {
                                     defaultValue: "Capability router connection mode",
                                 }), children: [_jsx(CapabilityModeButton, { agentId: "cap-mode-endpoint", icon: PlugZap, label: t("capabilities.mode.endpoint", {
                                             defaultValue: "Endpoint",
-                                        }), selected: capabilityConnectMode === "endpoint", onSelect: () => setCapabilityConnectMode("endpoint") }), _jsx(CapabilityModeButton, { agentId: "cap-mode-cloud", icon: Cloud, label: t("capabilities.mode.cloud", { defaultValue: "Cloud" }), selected: capabilityConnectMode === "cloud", onSelect: () => setCapabilityConnectMode("cloud") })] }) }), capabilityConnectMode === "cloud" ? (_jsxs(_Fragment, { children: [_jsx(SettingsInputRow, { agentId: "cap-cloud-api-base", group: "capability-router", label: t("capabilities.cloud.apiBaseLabel", {
+                                        }), selected: capabilityConnectMode === "endpoint", onSelect: () => setCapabilityConnectMode("endpoint") }), _jsx(CapabilityModeButton, { agentId: "cap-mode-cloud", icon: Cloud, label: t("capabilities.mode.cloud", {
+                                            defaultValue: "Cloud",
+                                        }), selected: capabilityConnectMode === "cloud", onSelect: () => setCapabilityConnectMode("cloud") })] }) }), capabilityConnectMode === "cloud" ? (_jsxs(_Fragment, { children: [_jsx(SettingsInputRow, { agentId: "cap-cloud-api-base", group: "capability-router", label: t("capabilities.cloud.apiBaseLabel", {
                                         defaultValue: "Cloud API base URL",
                                     }), agentLabel: t("capabilities.cloud.apiBaseAria", {
                                         defaultValue: "Capability cloud API base URL",
@@ -306,7 +408,7 @@ export function CapabilitiesSection() {
                                 defaultValue: "Connect",
                             }), stacked: true, children: _jsxs(SettingsActionButton, { agentId: "cap-connect-submit", agentGroup: "capability-router", agentLabel: t("settings.sections.capabilities.capabilityRouterConnect", { defaultValue: "Connect" }), agentStatus: capabilityConnectLoading ? "loading" : undefined, type: "submit", disabled: capabilityConnectLoading, className: "h-11 w-full gap-2 rounded-md text-sm", children: [capabilityConnectLoading ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true })) : (_jsx(PlugZap, { className: "h-4 w-4", "aria-hidden": true })), t("settings.sections.capabilities.capabilityRouterConnect", {
                                         defaultValue: "Connect",
-                                    })] }) })] }) })] }));
+                                    })] }) })] }) })) : null] }));
 }
 function CapabilityModeButton({ agentId, icon: Icon, label, selected, onSelect, }) {
     const { ref, agentProps } = useAgentElement({
@@ -320,7 +422,7 @@ function CapabilityModeButton({ agentId, icon: Icon, label, selected, onSelect,
     return (_jsxs(Button, { ref: ref, type: "button", variant: selected ? "default" : "outline", className: "h-11 flex-1 gap-1.5 rounded-md px-3 text-sm", "aria-pressed": selected, onClick: onSelect, ...agentProps, children: [_jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }), label] }));
 }
 function CapabilityStatusIcon({ status, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     if (status === "loading") {
         const loadingLabel = t("capabilities.status.loading", {
             defaultValue: "Loading",

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

@@ -1 +1 @@
-{"version":3,"file":"CloudAgentsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/CloudAgentsSection.tsx"],"names":[],"mappings":"AA2EA;;;;GAIG;AACH,wBAAgB,kBAAkB,4CAynBjC"}
+{"version":3,"file":"CloudAgentsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/CloudAgentsSection.tsx"],"names":[],"mappings":"AAoFA;;;;GAIG;AACH,wBAAgB,kBAAkB,4CAqoBjC"}

package/components/settings/CloudAgentsSection.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bot, Check, Pencil, Play, Plus, Power, RefreshCw, Trash2, } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { client } from "../../api/index.js";
-import { resolveCloudAgentApiBase } from "../../api/client-cloud.js";
+import { getCloudAuthToken, resolveCloudAgentApiBase, } from "../../api/client-cloud.js";
 import { getBootConfig } from "../../config/boot-config.js";
 import { useBranding } from "../../config/branding.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { createPersistedActiveServer, loadPersistedActiveServer, savePersistedActiveServer, } from "../../state/persistence.js";
+import { isCloudAgentWaking } from "../../state/types.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
 import { StatusBadge } from "../ui/status-badge.js";
-import { statusLabelForState, statusToneForState, } from "../ui/status-badge.helpers.js";
+import { agentLifecycleLabel, statusToneForState, } from "../ui/status-badge.helpers.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
 /** Maximum length accepted for a (new or edited) cloud agent name. */
 const AGENT_NAME_MAX_LENGTH = 60;
@@ -42,15 +43,21 @@ function activeCloudAgentId() {
     // Older builds mistakenly stored a URL as the id — not a real agent id.
     return id && !id.includes("/") ? id : null;
 }
-/** The cloud access token for the current session (persisted, or runtime). */
+/** The cloud access token for the current session. */
 function currentCloudToken() {
+    // Canonical Steward-first resolution (matches getCloudAuthToken: Steward JWT →
+    // runtime global → client), then fall back to the persisted active-server
+    // token for sessions without a Steward session. The old order read the
+    // persisted token first and skipped the Steward JWT entirely, which could send
+    // a stale/missing token from the agent manager.
+    const canonical = getCloudAuthToken();
+    if (canonical)
+        return canonical;
     const persisted = loadPersistedActiveServer();
     if (persisted?.kind === "cloud" && persisted.accessToken) {
         return persisted.accessToken;
     }
-    const runtime = globalThis
-        .__ELIZA_CLOUD_AUTH_TOKEN__;
-    return typeof runtime === "string" ? runtime : "";
+    return "";
 }
 /**
  * Eliza Cloud agent manager. Lists the signed-in user's cloud agents and lets
@@ -58,7 +65,9 @@ function currentCloudToken() {
  * one — the in-app counterpart to the cloud web dashboard.
  */
 export function CloudAgentsSection() {
-    const { elizaCloudConnected, setActionNotice } = useApp();
+    const elizaCloudConnected = useAppSelector((s) => s.elizaCloudConnected);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
+    const cloudHandoffPhase = useAppSelector((s) => s.cloudHandoffPhase);
     const { appName } = useBranding();
     const [agents, setAgents] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -240,6 +249,12 @@ export function CloudAgentsSection() {
         throw new Error("Timed out waiting for the agent to be deleted.");
     }, []);
     const deleteAgent = useCallback(async (agent) => {
+        // Destructive + irreversible — tears down the container and its data.
+        // Confirm first (matches the window.confirm pattern in the other settings
+        // sections: wallet keys, vault profiles, remote plugin hosts).
+        if (!window.confirm(`Delete "${agent.agent_name || agent.agent_id}"? This permanently removes the agent and its data and can't be undone.`)) {
+            return;
+        }
         setBusyId(agent.agent_id);
         try {
             const res = await client.deleteCloudCompatAgent(agent.agent_id);
@@ -368,14 +383,19 @@ export function CloudAgentsSection() {
     }, [setActionNotice, setLocalStatus, resyncStatus]);
     const hasToken = Boolean(currentCloudToken());
     if (!elizaCloudConnected && !hasToken) {
-        return (_jsx("p", { className: "text-sm text-txt-muted", children: "Sign in to Eliza Cloud (AI Model settings) to manage your cloud agents." }));
+        return (_jsx("p", { className: "text-sm text-txt-muted", children: "Sign in to Eliza Cloud to manage your cloud agents." }));
     }
-    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: "Your cloud agents", description: "Switch the active agent, shut one down (or start it back up), rename, or remove one you no longer need.", children: [loading ? (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3 text-sm text-txt-muted", "data-testid": "cloud-agents-loading", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Loading agents\u2026"] })) : loadError ? (_jsxs("div", { className: "flex flex-col gap-2 px-4 py-3", "data-testid": "cloud-agents-error", children: [_jsx("p", { className: "text-sm text-destructive", children: loadError }), _jsxs(Button, { variant: "outline", size: "sm", className: "self-start", "data-testid": "cloud-agents-error-retry", onClick: () => {
+    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: "Your cloud agents", children: [loading ? (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3 text-sm text-txt-muted", "data-testid": "cloud-agents-loading", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Loading agents\u2026"] })) : loadError ? (_jsxs("div", { className: "flex flex-col gap-2 px-4 py-3", "data-testid": "cloud-agents-error", children: [_jsx("p", { className: "text-sm text-destructive", children: loadError }), _jsxs(Button, { variant: "outline", size: "sm", className: "self-start", "data-testid": "cloud-agents-error-retry", onClick: () => {
                                     void refresh();
                                 }, children: [_jsx(RefreshCw, { className: "mr-1 h-4 w-4", "aria-hidden": true }), "Try again"] })] })) : agents.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-sm text-txt-muted", "data-testid": "cloud-agents-empty", children: "No cloud agents yet \u2014 create your first one below." })) : (agents.map((agent) => {
                         const isActive = agent.agent_id === activeId;
                         const busy = busyId === agent.agent_id;
-                        const waking = wakingId === agent.agent_id;
+                        // Show "Waking…" for a locally-driven resume (wakingId) OR a
+                        // first-run shared→dedicated handoff in flight for this agent, so the
+                        // row reflects the same shared-now/dedicated-pending state the chat
+                        // shell sees rather than running a wholly independent signal.
+                        const waking = wakingId === agent.agent_id ||
+                            isCloudAgentWaking(cloudHandoffPhase, agent.agent_id);
                         const status = (agent.status || "").toLowerCase();
                         const canSuspend = status === "running";
                         const canResume = NON_RUNNING_STATES.has(status);
@@ -393,10 +413,10 @@ export function CloudAgentsSection() {
                         }
                         return (_jsx(SettingsRow, { icon: Bot, label: agent.agent_name || agent.agent_id, description: _jsxs("span", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "inline-flex items-center gap-2", children: [isActive ? "Active · this device" : null, waking ? (_jsx(StatusBadge, { tone: "warning", pulse: true, label: `Waking ${agent.agent_name || agent.agent_id}…`, "data-testid": `cloud-agent-status-${agent.agent_id}` })) : (_jsx(StatusBadge, { tone: errored
                                                     ? "danger"
-                                                    : statusToneForState(agent.status), label: statusLabelForState(agent.status), "data-testid": `cloud-agent-status-${agent.agent_id}` }))] }), errorMessage ? (_jsx("span", { className: "text-2xs text-destructive", "data-testid": `cloud-agent-error-${agent.agent_id}`, children: errorMessage })) : null] }), active: isActive, trailing: _jsxs("div", { className: "flex items-center gap-2", children: [isActive ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-accent", children: [_jsx(Check, { className: "h-4 w-4", "aria-hidden": true }), "Active"] })) : (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void switchTo(agent), children: waking ? "Waking…" : busy ? "Switching…" : "Use" })), canSuspend && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Shut down ${agent.agent_name || agent.agent_id}`, title: "Shut down", onClick: () => void suspendAgent(agent), children: _jsx(Power, { className: "h-4 w-4", "aria-hidden": true }) })), canResume && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Start ${agent.agent_name || agent.agent_id}`, title: "Start", onClick: () => void resumeAgent(agent), children: _jsx(Play, { className: "h-4 w-4", "aria-hidden": true }) })), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Rename ${agent.agent_name || agent.agent_id}`, "data-testid": `cloud-agent-rename-${agent.agent_id}`, onClick: () => startRename(agent), children: _jsx(Pencil, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || isActive, "aria-label": `Delete ${agent.agent_name || agent.agent_id}`, onClick: () => deleteAgent(agent), children: _jsx(Trash2, { className: "h-4 w-4", "aria-hidden": true }) })] }) }, agent.agent_id));
+                                                    : statusToneForState(agent.status), label: agentLifecycleLabel(agent.status), "data-testid": `cloud-agent-status-${agent.agent_id}` }))] }), errorMessage ? (_jsx("span", { className: "text-2xs text-destructive", "data-testid": `cloud-agent-error-${agent.agent_id}`, children: errorMessage })) : null] }), active: isActive, trailing: _jsxs("div", { className: "flex items-center gap-2", children: [isActive ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-accent", children: [_jsx(Check, { className: "h-4 w-4", "aria-hidden": true }), "Active"] })) : (_jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void switchTo(agent), children: waking ? "Waking…" : busy ? "Switching…" : "Use" })), canSuspend && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Shut down ${agent.agent_name || agent.agent_id}`, title: "Shut down", onClick: () => void suspendAgent(agent), children: _jsx(Power, { className: "h-4 w-4", "aria-hidden": true }) })), canResume && (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Start ${agent.agent_name || agent.agent_id}`, title: "Start", onClick: () => void resumeAgent(agent), children: _jsx(Play, { className: "h-4 w-4", "aria-hidden": true }) })), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy, "aria-label": `Rename ${agent.agent_name || agent.agent_id}`, "data-testid": `cloud-agent-rename-${agent.agent_id}`, onClick: () => startRename(agent), children: _jsx(Pencil, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || isActive, "aria-label": `Delete ${agent.agent_name || agent.agent_id}`, onClick: () => deleteAgent(agent), children: _jsx(Trash2, { className: "h-4 w-4", "aria-hidden": true }) })] }) }, agent.agent_id));
                     })), _jsx(SettingsRow, { icon: RefreshCw, label: "Refresh", onClick: () => {
                             void refresh();
-                        } })] }), _jsx(SettingsGroup, { title: "Create a new agent", description: "Spin up a fresh cloud agent and switch to it.", children: _jsxs("div", { className: "flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Input, { value: newName, onChange: (e) => setNewName(e.target.value), placeholder: `Agent name (e.g. ${appName})`, className: "flex-1", maxLength: AGENT_NAME_MAX_LENGTH, disabled: creating }), _jsxs(Button, { variant: "default", size: "sm", disabled: creating, onClick: () => {
+                        } })] }), _jsx(SettingsGroup, { title: "Create a new agent", children: _jsxs("div", { className: "flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Input, { value: newName, onChange: (e) => setNewName(e.target.value), placeholder: `Agent name (e.g. ${appName})`, className: "flex-1", maxLength: AGENT_NAME_MAX_LENGTH, disabled: creating }), _jsxs(Button, { variant: "default", size: "sm", disabled: creating, onClick: () => {
                                 void createAgent();
                             }, children: [_jsx(Plus, { className: "mr-1 h-4 w-4", "aria-hidden": true }), creating ? "Creating…" : "Create"] })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectorsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ConnectorsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqMH,wBAAgB,iBAAiB,4CAqGhC"}
+{"version":3,"file":"ConnectorsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ConnectorsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkMH,wBAAgB,iBAAiB,4CAuGhC"}

package/components/settings/ConnectorsSection.js

@@ -10,7 +10,7 @@ import { Puzzle } from "lucide-react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { clearPendingFocusConnector, FOCUS_CONNECTOR_EVENT, readPendingFocusConnector, } from "../../events/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { BlueBubblesStatusPanel } from "../connectors/BlueBubblesStatusPanel.js";
 import { DiscordLocalConnectorPanel } from "../connectors/DiscordLocalConnectorPanel.js";
 import { IMessageStatusPanel } from "../connectors/IMessageStatusPanel.js";
@@ -62,7 +62,7 @@ function connectorIcon(plugin) {
     });
 }
 function ConnectorBody({ plugin }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     switch (plugin.id) {
         case "telegram":
             return _jsx(TelegramAccountConnectorPanel, {});
@@ -84,7 +84,7 @@ function ConnectorBody({ plugin }) {
     }
 }
 function ConnectorEnableSwitch({ plugin, busy, onToggle, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const label = plugin.enabled
         ? t("settings.sections.connectors.disable", {
             defaultValue: "Disable {{name}}",
@@ -108,10 +108,12 @@ function ConnectorEnableSwitch({ plugin, busy, onToggle, }) {
 function ConnectorRow({ plugin, busy, onToggle, }) {
     const tone = statusTone(plugin);
     const icon = useMemo(() => connectorIcon(plugin), [plugin]);
-    return (_jsxs("details", { className: "group overflow-hidden rounded-lg border border-border bg-card transition-colors hover:bg-surface open:bg-card open:hover:bg-card", "data-connector": plugin.id, children: [_jsx("summary", { className: "cursor-pointer select-none list-none", children: _jsx(SettingsRow, { icon: icon, label: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate", children: plugin.name }), _jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass(tone)}`, "aria-hidden": "true" })] }), control: _jsx(ConnectorEnableSwitch, { plugin: plugin, busy: busy, onToggle: onToggle }) }) }), _jsx("div", { className: "border-t border-border/60 px-4 py-3", children: _jsx(ConnectorBody, { plugin: plugin }) })] }));
+    return (_jsxs("details", { className: "group", "data-connector": plugin.id, children: [_jsx("summary", { className: "cursor-pointer select-none list-none", children: _jsx(SettingsRow, { icon: icon, label: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate", children: plugin.name }), _jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass(tone)}`, "aria-hidden": "true" })] }), control: _jsx(ConnectorEnableSwitch, { plugin: plugin, busy: busy, onToggle: onToggle }) }) }), _jsx("div", { className: "pb-3 pl-[30px]", children: _jsx(ConnectorBody, { plugin: plugin }) })] }));
 }
 export function ConnectorsSection() {
-    const { plugins, handlePluginToggle, t } = useApp();
+    const plugins = useAppSelector((s) => s.plugins);
+    const handlePluginToggle = useAppSelector((s) => s.handlePluginToggle);
+    const t = useAppSelector((s) => s.t);
     const containerRef = useRef(null);
     const [togglingPlugins, setTogglingPlugins] = useState(new Set());
     const connectorPlugins = plugins.filter((p) => p.category === "connector" &&
@@ -172,7 +174,7 @@ export function ConnectorsSection() {
     }
     return (_jsx(SettingsStack, { children: _jsx(SettingsGroup, { bare: true, title: t("settings.sections.connectors.groupTitle", {
                 defaultValue: "Connectors",
-            }), children: _jsx("div", { ref: containerRef, className: "flex flex-col gap-2", children: connectorPlugins.map((plugin) => {
+            }), children: _jsx("div", { ref: containerRef, className: "flex flex-col", children: connectorPlugins.map((plugin) => {
                     const isBusy = togglingPlugins.has(plugin.id);
                     return (_jsx(ConnectorRow, { plugin: plugin, busy: isBusy, onToggle: (checked) => {
                             void handleToggle(plugin.id, checked);

package/components/settings/DesktopWorkspaceDisplay.d.ts

@@ -1,7 +1,6 @@
-type Translator = (key: string, options?: Record<string, unknown>) => string;
+import type { TranslateFn } from "../../types/index.js";
 export declare function DesktopWorkspaceDisplay({ diagnosticsText, t, }: {
     diagnosticsText: string;
-    t: Translator;
+    t: TranslateFn;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=DesktopWorkspaceDisplay.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopWorkspaceDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAE7E,wBAAgB,uBAAuB,CAAC,EACtC,eAAe,EACf,CAAC,GACF,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,CAAC,EAAE,UAAU,CAAC;CACf,2CAaA"}
+{"version":3,"file":"DesktopWorkspaceDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,wBAAgB,uBAAuB,CAAC,EACtC,eAAe,EACf,CAAC,GACF,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,CAAC,EAAE,WAAW,CAAC;CAChB,2CAaA"}

package/components/settings/DesktopWorkspaceDisplay.hooks.d.ts

@@ -1,5 +1,4 @@
-import { type DesktopWorkspaceSnapshot } from "../../utils/desktop-workspace";
-type Translator = (key: string, options?: Record<string, unknown>) => string;
-export declare function useDesktopDiagnosticsText(snapshot: DesktopWorkspaceSnapshot | null, t: Translator): string;
-export {};
+import type { TranslateFn } from "../../types/index.js";
+import { type DesktopWorkspaceSnapshot } from "../../utils/desktop-workspace.js";
+export declare function useDesktopDiagnosticsText(snapshot: DesktopWorkspaceSnapshot | null, t: TranslateFn): string;
 //# sourceMappingURL=DesktopWorkspaceDisplay.hooks.d.ts.map

package/components/settings/DesktopWorkspaceDisplay.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopWorkspaceDisplay.hooks.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.hooks.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAE9B,MAAM,+BAA+B,CAAC;AAEvC,KAAK,UAAU,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAkC7E,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,wBAAwB,GAAG,IAAI,EACzC,CAAC,EAAE,UAAU,GACZ,MAAM,CAER"}
+{"version":3,"file":"DesktopWorkspaceDisplay.hooks.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceDisplay.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EACL,KAAK,wBAAwB,EAE9B,MAAM,+BAA+B,CAAC;AAkCvC,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,wBAAwB,GAAG,IAAI,EACzC,CAAC,EAAE,WAAW,GACb,MAAM,CAER"}

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopWorkspaceSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceSection.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AA4Gf,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAu8BL"}
+{"version":3,"file":"DesktopWorkspaceSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/DesktopWorkspaceSection.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AA4Gf,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAy8BL"}

package/components/settings/DesktopWorkspaceSection.js

@@ -7,7 +7,7 @@ import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge/in
 import { useDocumentVisibility } from "../../hooks/useDocumentVisibility.js";
 import { useRenderGuard } from "../../hooks/useRenderGuard.js";
 import { ContentLayout } from "../../layouts/content-layout/content-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { resolveApiUrl } from "../../utils/asset-url.js";
 import { copyTextToClipboard } from "../../utils/clipboard.js";
 import { DESKTOP_WORKSPACE_SURFACES, loadDesktopWorkspaceSnapshot, openDesktopSettingsWindow, openDesktopSurfaceWindow, } from "../../utils/desktop-workspace.js";
@@ -51,7 +51,9 @@ function renderPathList(paths, t) {
 export function DesktopWorkspaceSection({ contentHeader, } = {}) {
     useRenderGuard("DesktopWorkspaceSection");
     const desktopRuntime = isElectrobunRuntime();
-    const { relaunchDesktop, restartBackend, t } = useApp();
+    const relaunchDesktop = useAppSelector((s) => s.relaunchDesktop);
+    const restartBackend = useAppSelector((s) => s.restartBackend);
+    const t = useAppSelector((s) => s.t);
     const [snapshot, setSnapshot] = useState(null);
     const [loading, setLoading] = useState(desktopRuntime);
     const [busyAction, setBusyAction] = useState(null);

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

@@ -1 +1 @@
-{"version":3,"file":"IdentitySettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/IdentitySettingsSection.tsx"],"names":[],"mappings":"AAyNA,wBAAgB,uBAAuB,4CA8TtC"}
+{"version":3,"file":"IdentitySettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/IdentitySettingsSection.tsx"],"names":[],"mappings":"AAyNA,wBAAgB,uBAAuB,4CAwUtC"}

package/components/settings/IdentitySettingsSection.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../../events/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { replaceNameTokens } from "../../utils/name-tokens.js";
 import { EDGE_BACKUP_VOICES, hasConfiguredApiKey, PREMADE_VOICES, sanitizeApiKey, } from "../../voice/types.js";
 import { DEFAULT_ELEVEN_FAST_MODEL, EDGE_VOICE_GROUPS, ELEVENLABS_VOICE_GROUPS, } from "../character/character-voice-config.js";
@@ -84,7 +84,17 @@ function normalizeVoiceConfigForSave(args) {
     };
 }
 export function IdentitySettingsSection() {
-    const { t, characterData, characterDraft, characterLoading, handleCharacterFieldInput, handleSaveCharacter, loadCharacter, elizaCloudConnected, elizaCloudVoiceProxyAvailable, } = useApp();
+    const { t, characterData, characterDraft, characterLoading, handleCharacterFieldInput, handleSaveCharacter, loadCharacter, elizaCloudConnected, elizaCloudVoiceProxyAvailable, } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        characterData: s.characterData,
+        characterDraft: s.characterDraft,
+        characterLoading: s.characterLoading,
+        handleCharacterFieldInput: s.handleCharacterFieldInput,
+        handleSaveCharacter: s.handleSaveCharacter,
+        loadCharacter: s.loadCharacter,
+        elizaCloudConnected: s.elizaCloudConnected,
+        elizaCloudVoiceProxyAvailable: s.elizaCloudVoiceProxyAvailable,
+    }));
     const useElevenLabs = elizaCloudConnected || elizaCloudVoiceProxyAvailable;
     const [voiceConfig, setVoiceConfig] = useState({});
     const [savedVoiceConfig, setSavedVoiceConfig] = useState({});
@@ -292,7 +302,7 @@ export function IdentitySettingsSection() {
             defaultValue: "Failed to save identity settings.",
         }),
     });
-    return (_jsxs(SettingsStack, { children: [showCharacterBootstrapping ? (_jsx(SettingsGroup, { bare: true, children: _jsx("div", { className: "rounded-lg border border-border bg-card px-4 py-6 text-center text-xs text-muted", children: t("settings.identity.loading", {
+    return (_jsxs(SettingsStack, { children: [showCharacterBootstrapping ? (_jsx(SettingsGroup, { bare: true, children: _jsx("p", { className: "py-6 text-center text-xs text-muted", children: t("settings.identity.loading", {
                         defaultValue: "Loading identity settings…",
                     }) }) })) : null, _jsxs(SettingsGroup, { title: t("settings.identity.groupTitle", { defaultValue: "Identity" }), children: [_jsx(SettingsInputRow, { agentId: "identity-name", label: t("common.name", { defaultValue: "Name" }), value: draftName, onValueChange: (value) => handleCharacterFieldInput("name", value), placeholder: t("startupshell.AgentName", {
                             defaultValue: "Agent name",

package/components/settings/LoadContentPackForm.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { FolderOpen } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp, useContentPack } from "../../state/index.js";
+import { useAppSelector, useContentPack } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { SettingsInput } from "../ui/settings-controls.js";
 import { SettingsGroup } from "./settings-layout.js";
 export function LoadContentPackForm() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { activePack, error: packLoadError, canPickDirectory, deactivate, loadFromUrl, loadFromFiles, } = useContentPack();
     const [urlInput, setUrlInput] = useState("");
     const fileInputRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"LoadedPacksList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/LoadedPacksList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,UAAU,oBAAoB;IAC5B,WAAW,EAAE,mBAAmB,EAAE,CAAC;IACnC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC/C;AAkED,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,kDA0BtB"}
+{"version":3,"file":"LoadedPacksList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/LoadedPacksList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,UAAU,oBAAoB;IAC5B,WAAW,EAAE,mBAAmB,EAAE,CAAC;IACnC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC/C;AA8CD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,kDAuBtB"}

package/components/settings/LoadedPacksList.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp } from "../../state/index.js";
-import { SettingsGroup } from "./settings-layout.js";
-function LoadedPackCard({ pack, isActive, activeLabel, onToggle, }) {
+import { useAppSelector } from "../../state/index.js";
+import { SettingsGroup, SettingsRow } from "./settings-layout.js";
+function LoadedPackRow({ pack, isActive, activeLabel, onToggle, }) {
     const { ref, agentProps } = useAgentElement({
         id: `packs-toggle-${pack.manifest.id}`,
         role: "card",
@@ -13,18 +13,16 @@ function LoadedPackCard({ pack, isActive, activeLabel, onToggle, }) {
         status: isActive ? "active" : "inactive",
         onActivate: onToggle,
     });
-    return (_jsxs("button", { ref: ref, type: "button", onClick: onToggle, "aria-current": isActive ? "true" : undefined, className: `flex items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors ${isActive
-            ? "border-accent bg-accent/8"
-            : "border-border/50 hover:border-accent/40 hover:bg-bg-hover"}`, ...agentProps, children: [pack.vrmPreviewUrl && (_jsx("img", { src: pack.vrmPreviewUrl, alt: "", className: "h-9 w-9 shrink-0 rounded-sm object-cover" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-txt", children: pack.manifest.name }), pack.manifest.description && (_jsx("p", { className: "truncate text-xs text-muted", children: pack.manifest.description }))] }), isActive && (_jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-accent/30 bg-accent/10 text-accent", title: activeLabel, role: "img", "aria-label": activeLabel, children: _jsx(Check, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] }));
+    return (_jsx(SettingsRow, { label: pack.manifest.name, description: pack.manifest.description ?? undefined, active: isActive, onClick: onToggle, buttonRef: ref, buttonProps: agentProps, trailing: isActive ? (_jsx("span", { className: "inline-flex h-6 w-6 shrink-0 items-center justify-center text-accent", title: activeLabel, role: "img", "aria-label": activeLabel, children: _jsx(Check, { className: "h-4 w-4", "aria-hidden": true }) })) : null }));
 }
 export function LoadedPacksList({ loadedPacks, activePackId, onToggle, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     if (loadedPacks.length === 0)
         return null;
     const activeLabel = t("settings.appearance.active", {
         defaultValue: "Active",
     });
-    return (_jsx(SettingsGroup, { bare: true, title: t("settings.appearance.loadedPacks", {
+    return (_jsx(SettingsGroup, { title: t("settings.appearance.loadedPacks", {
             defaultValue: "Loaded content packs",
-        }), children: _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: loadedPacks.map((pack) => (_jsx(LoadedPackCard, { pack: pack, isActive: activePackId === pack.manifest.id, activeLabel: activeLabel, onToggle: () => onToggle(pack) }, pack.manifest.id))) }) }));
+        }), children: loadedPacks.map((pack) => (_jsx(LoadedPackRow, { pack: pack, isActive: activePackId === pack.manifest.id, activeLabel: activeLabel, onToggle: () => onToggle(pack) }, pack.manifest.id))) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PermissionsSection.tsx"],"names":[],"mappings":"AA2qBA,wBAAgB,kBAAkB,4CAIjC"}
+{"version":3,"file":"PermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PermissionsSection.tsx"],"names":[],"mappings":"AAooBA,wBAAgB,kBAAkB,4CAIjC"}