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

package/components/settings/settings-agent-rows.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../ui/button.js";
 import { Select, SelectContent, SelectItem, SelectValue } from "../ui/select.js";
-import { SettingsInput, SettingsSelectTrigger, SettingsTextarea, } from "../ui/settings-controls.js";
+import { SettingsInput, SettingsSegmentedGroup, SettingsSelectTrigger, SettingsTextarea, } from "../ui/settings-controls.js";
 import { Switch } from "../ui/switch.js";
 import { SettingsRow } from "./settings-layout.js";
 /**
@@ -50,6 +51,33 @@ export function SettingsSelectRow({ agentId, label, agentLabel, description, ico
     });
     return (_jsx(SettingsRow, { icon: icon, iconClassName: iconClassName, label: label, description: description, stacked: true, children: _jsxs(Select, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsx(SettingsSelectTrigger, { ref: ref, variant: "touch", className: triggerClassName, "aria-label": resolvedLabel, ...agentProps, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }));
 }
+/**
+ * A segmented control for a small, fixed set of options (≈2–4). All choices are
+ * visible at once — no OS picker, no "options a whole page away" on mobile —
+ * and the whole control is agent-addressable (`role: "select"`) just like
+ * {@link SettingsSelectRow}. Prefer this over {@link SettingsSelectRow} when the
+ * option set is small and stable (e.g. local/cloud strategy, on/off/auto).
+ */
+export function SettingsSegmentedRow({ agentId, label, agentLabel, description, icon, iconClassName, value, onValueChange, options, disabled = false, group = "settings", className, testId, }) {
+    const resolvedLabel = agentLabel ?? labelToString(label, agentId);
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "select",
+        label: resolvedLabel,
+        group,
+        description: typeof description === "string" ? description : undefined,
+        status: value || undefined,
+        options: options.map((option) => option.value),
+        getValue: () => value,
+        onFill: disabled ? undefined : (next) => onValueChange(next),
+    });
+    return (_jsx(SettingsRow, { icon: icon, iconClassName: iconClassName, label: label, description: description, stacked: true, children: _jsx(SettingsSegmentedGroup, { ref: ref, role: "radiogroup", "aria-label": resolvedLabel, "data-testid": testId, className: cn("w-full", className), ...agentProps, children: options.map((option) => {
+                const active = option.value === value;
+                return (_jsx("button", { type: "button", role: "radio", "aria-checked": active, "data-value": option.value, "data-active": active ? "true" : "false", disabled: disabled, onClick: () => onValueChange(option.value), className: cn("flex h-9 flex-1 items-center justify-center rounded-sm px-2 text-xs font-medium transition-colors    disabled:opacity-50", active
+                        ? "bg-card text-txt-strong"
+                        : "text-muted hover:bg-card/60 hover:text-txt"), children: option.label }, option.value));
+            }) }) }));
+}
 /** A labelled text/number field that the agent can read and fill from chat. */
 export function SettingsInputRow({ agentId, label, agentLabel, description, icon, iconClassName, value, onValueChange, placeholder, type = "text", inputMode, autoComplete, variant = "touch", disabled = false, group = "settings", className, inputClassName, }) {
     const resolvedLabel = agentLabel ?? labelToString(label, agentId);

package/components/settings/settings-control-primitives.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export { SettingsField, SettingsFieldDescription, SettingsFieldLabel, } from "../ui/settings-controls";
+export { SettingsField, SettingsFieldDescription, SettingsFieldLabel, } from "../ui/settings-controls.js";
 export declare function AdvancedSettingsDisclosure({ title, children, className, lazy, defaultOpen, }: {
     title?: string;
     children: React.ReactNode;

package/components/settings/settings-layout.d.ts

@@ -1,4 +1,3 @@
-import { type LucideIcon } from "lucide-react";
 import type * as React from "react";
 /**
  * Settings layout vocabulary.
@@ -31,8 +30,15 @@ export interface SettingsGroupProps extends Omit<React.HTMLAttributes<HTMLElemen
 export declare function SettingsGroup({ title, description, action, footer, bare, className, children, ...props }: SettingsGroupProps): import("react/jsx-runtime").JSX.Element;
 type SettingsRowTone = "default" | "danger";
 export interface SettingsRowProps {
-    /** Leading icon rendered in a neutral medallion. */
-    icon?: LucideIcon;
+    /**
+     * Leading icon rendered in a neutral medallion. Accepts any component that
+     * takes `className`/`aria-hidden` (lucide icons and the generic provider icons
+     * both satisfy this) — the row only passes those two props.
+     */
+    icon?: React.ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
     iconClassName?: string;
     /** Primary label. */
     label: React.ReactNode;

package/components/settings/settings-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA+BpB;AAED,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,oDAAoD;IACpD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,WAAW,EACX,MAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,2CA2DlB"}
+{"version":3,"file":"settings-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-layout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA4BpB;AAED,KAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3D,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,WAAW,EACX,MAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,2CA0DlB"}

package/components/settings/settings-layout.js

@@ -16,21 +16,23 @@ import { cn } from "../../lib/utils.js";
  * layouts anymore; reach for these instead.
  */
 export function SettingsStack({ className, ...props }) {
-    return _jsx("div", { className: cn("flex flex-col gap-5", className), ...props });
+    return _jsx("div", { className: cn("flex flex-col gap-8", className), ...props });
 }
 export function SettingsGroup({ title, description, action, footer, bare = false, className, children, ...props }) {
     const hasHeader = Boolean(title || description || action);
-    return (_jsxs("section", { className: cn("flex flex-col gap-2.5", className), ...props, children: [hasHeader ? (_jsxs("div", { className: "flex flex-col gap-2 px-1 sm:flex-row sm:items-end sm:justify-between sm:gap-3", children: [_jsxs("div", { className: "min-w-0", children: [title ? (_jsx("h3", { className: "text-sm font-medium text-txt-strong", children: title })) : null, description ? (_jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted/90", children: description })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] })) : null, bare ? (children) : (_jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg bg-card", children: children })), footer ? (_jsx("p", { className: "px-1 text-xs leading-relaxed text-muted/80", children: footer })) : null] }));
+    return (_jsxs("section", { className: cn("flex flex-col gap-1.5", className), ...props, children: [hasHeader ? (_jsxs("div", { className: "flex min-h-[1.5rem] flex-wrap items-end justify-between gap-x-3 gap-y-2", children: [_jsxs("div", { className: "min-w-0", children: [title ? (_jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted/70", children: title })) : null, description ? (_jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted/80", children: description })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] })) : null, bare ? children : _jsx("div", { className: "flex flex-col", children: children }), footer ? (_jsx("p", { className: "pt-1 text-xs leading-relaxed text-muted/70", children: footer })) : null] }));
 }
 function SettingsRowBody({ icon: Icon, iconClassName, label, description, control, htmlFor, tone, trailing, chevron, }) {
     const LabelTag = htmlFor ? "label" : "span";
-    return (_jsxs("div", { className: "flex w-full items-center gap-3", children: [Icon ? (_jsx("span", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface text-txt-strong ring-1 ring-border/70", tone === "danger" && "bg-warn/12 text-warn ring-warn/20", iconClassName), children: _jsx(Icon, { className: "h-[18px] w-[18px]", "aria-hidden": true }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(LabelTag, { ...(htmlFor ? { htmlFor } : {}), className: cn("text-sm font-medium leading-5 text-txt-strong", tone === "danger" && "text-warn", htmlFor && "cursor-pointer"), children: label }), description ? (_jsx("span", { className: "text-xs leading-relaxed text-muted", children: description })) : null] }), control ? _jsx("span", { className: "shrink-0", children: control }) : null, trailing ??
+    return (_jsxs("div", { className: "flex w-full items-center gap-3", children: [Icon ? (_jsx(Icon, { className: cn("h-[18px] w-[18px] shrink-0 text-muted/80", tone === "danger" && "text-warn", iconClassName), "aria-hidden": true })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(LabelTag, { ...(htmlFor ? { htmlFor } : {}), className: cn("text-sm font-medium leading-5 text-txt-strong", tone === "danger" && "text-warn", htmlFor && "cursor-pointer"), children: label }), description ? (_jsx("span", { className: "text-xs leading-relaxed text-muted", children: description })) : null] }), control ? _jsx("span", { className: "shrink-0", children: control }) : null, trailing ??
                 (chevron ? (_jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted/70", "aria-hidden": true })) : null)] }));
 }
 export function SettingsRow({ icon, iconClassName, label, description, control, children, stacked = false, onClick, buttonRef, buttonProps, active = false, trailing, chevron, htmlFor, tone = "default", disabled = false, className, }) {
-    const padding = "px-4 py-3";
+    // Full-width content (the page owns horizontal padding). Nav rows bleed 0.5rem
+    // into that padding (-mx-2 px-2) so the hover/active wash has breathing room
+    // while the text still lines up with non-button rows.
     if (onClick) {
-        return (_jsx("button", { ref: buttonRef, type: "button", onClick: onClick, disabled: disabled, "aria-current": active ? "true" : undefined, className: cn("group flex w-full min-h-[3.25rem] items-center text-left transition-colors", "hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/40", active && "bg-accent/10 hover:bg-accent/12", disabled && "cursor-not-allowed opacity-50", padding, className), ...buttonProps, children: _jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: control, tone: tone, trailing: trailing, chevron: chevron ?? true }) }));
+        return (_jsx("button", { ref: buttonRef, type: "button", onClick: onClick, disabled: disabled, "aria-current": active ? "true" : undefined, className: cn("group -mx-2 flex w-[calc(100%+1rem)] min-h-[3rem] items-center rounded-lg px-2 py-2.5 text-left transition-colors", "hover:bg-surface/70    ", active && "bg-accent/10 hover:bg-accent/12", disabled && "cursor-not-allowed opacity-50", className), ...buttonProps, children: _jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: control, tone: tone, trailing: trailing, chevron: chevron ?? true }) }));
     }
-    return (_jsxs("div", { className: cn("flex min-h-[3.25rem] flex-col justify-center", padding, className), children: [_jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: stacked ? undefined : control, htmlFor: htmlFor, tone: tone, trailing: trailing, chevron: chevron }), children ? (_jsx("div", { className: cn(stacked ? "mt-3" : "mt-2"), children: children })) : null] }));
+    return (_jsxs("div", { className: cn("flex min-h-[3rem] flex-col justify-center py-2.5", className), children: [_jsx(SettingsRowBody, { icon: icon, iconClassName: iconClassName, label: label, description: description, control: stacked ? undefined : control, htmlFor: htmlFor, tone: tone, trailing: trailing, chevron: chevron }), children ? (_jsx("div", { className: cn(stacked ? "mt-3" : "mt-2"), children: children })) : null] }));
 }

package/components/settings/settings-section-registry.d.ts

@@ -1,6 +1,7 @@
+import type { ViewKind } from "@elizaos/core";
 import type { LucideIcon } from "lucide-react";
 import type { ComponentType } from "react";
-import type { SettingsSectionGroup } from "./settings-section-meta";
+import type { SettingsSectionGroup } from "./settings-section-meta.js";
 /**
  * Pluggable settings-section registry.
  *
@@ -42,6 +43,23 @@ export interface SettingsSectionDef {
     order?: number;
     /** Padding override for the section body panel. */
     bodyClassName?: string;
+    /**
+     * Hide unless Developer Mode is on (dev builds default on; prod off).
+     * Equivalent to `viewKind: "developer"`.
+     */
+    developerOnly?: boolean;
+    /**
+     * Hide on the cloud mobile build (no host machine). For host/self-host
+     * concepts that are meaningless to a cloud user — e.g. the host
+     * remote-password security section. Evaluated against isAndroidCloudBuild().
+     */
+    hideOnCloud?: boolean;
+    /**
+     * Four-tier visibility category. Supersedes `developerOnly` when set:
+     * `system`/`release` always show; `developer`/`preview` follow the Settings
+     * toggles. See `ViewKind` in `@elizaos/core`.
+     */
+    viewKind?: ViewKind;
     Component: ComponentType;
 }
 /**

package/components/settings/settings-section-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-section-registry.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-section-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,0EAA0E;AAC1E,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,aAAa,CAAC;CAC1B;AA0BD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAKzE;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,IAAI,kBAAkB,EAAE,CAI3D;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,SAAS,CAE7E"}
+{"version":3,"file":"settings-section-registry.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-section-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,mBAAmB,GAC3B,IAAI,GACJ,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,0EAA0E;AAC1E,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,GAAG,EAAE,kBAAkB,CAAC;IACxB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,EAAE,aAAa,CAAC;CAC1B;AA0BD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAKzE;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,IAAI,kBAAkB,EAAE,CAI3D;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,SAAS,CAE7E"}

package/components/settings/settings-sections.d.ts

@@ -1,6 +1,6 @@
-import { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, type SettingsSectionGroup } from "./settings-section-meta";
-import { type SettingsSectionDef, type SettingsSectionHue, type SettingsSectionTone } from "./settings-section-registry";
-export { getSettingsSection, listSettingsSections, registerSettingsSection, } from "./settings-section-registry";
+import { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, type SettingsSectionGroup } from "./settings-section-meta.js";
+import { type SettingsSectionDef, type SettingsSectionHue, type SettingsSectionTone } from "./settings-section-registry.js";
+export { getSettingsSection, listSettingsSections, registerSettingsSection, } from "./settings-section-registry.js";
 export type { SettingsSectionDef, SettingsSectionGroup, SettingsSectionHue, SettingsSectionTone, };
 export { SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER };
 export declare const SECTION_TONE_ICON_CLASS: Record<SettingsSectionTone, string>;

package/components/settings/settings-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-sections.ts"],"names":[],"mappings":"AAoCA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAMvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK1E,CAAC;AAqIF,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAoB9C,CAAC;AAsBL;mEACmE;AACnE,wBAAgB,sBAAsB,IAAI,kBAAkB,EAAE,CAE7D;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAK3D"}
+{"version":3,"file":"settings-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-sections.ts"],"names":[],"mappings":"AAoCA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAMvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK1E,CAAC;AA8IF,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,EAsB9C,CAAC;AAsBL;mEACmE;AACnE,wBAAgB,sBAAsB,IAAI,kBAAkB,EAAE,CAE7D;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,kBAAkB,EAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GACzD,MAAM,CAER;AAED,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAK3D"}

package/components/settings/settings-sections.js

@@ -32,10 +32,10 @@ export const SECTION_TONE_ICON_CLASS = {
  * accent + neutrals) so light and dark themes both work, and there is no blue.
  */
 export const SECTION_HUE_MEDALLION_CLASS = {
-    accent: "bg-accent/12 text-accent ring-1 ring-accent/20",
-    amber: "bg-warn/12 text-warn ring-1 ring-warn/20",
-    rose: "bg-[color-mix(in_oklab,var(--accent)_14%,var(--surface))] text-accent ring-1 ring-accent/15",
-    slate: "bg-surface text-txt-strong ring-1 ring-border",
+    accent: "bg-accent/12 text-accent  ",
+    amber: "bg-warn/12 text-warn  ",
+    rose: "bg-[color-mix(in_oklab,var(--accent)_14%,var(--surface))] text-accent  ",
+    slate: "bg-surface text-txt-strong  ",
 };
 const SECTION_VISUALS = {
     identity: {
@@ -100,6 +100,7 @@ const SECTION_VISUALS = {
         tone: "accent",
         hue: "rose",
         labelKey: "settings.sections.remote-plugins.label",
+        developerOnly: true,
         Component: RemotePluginHostSection,
     },
     "wallet-rpc": {
@@ -151,6 +152,10 @@ const SECTION_VISUALS = {
         tone: "warn",
         hue: "amber",
         labelKey: "settings.sections.security.label",
+        // Host/self-host concept ("set a remote password so other machines can log
+        // into your host"). Meaningless for a cloud mobile user — the cloud
+        // "Sessions & Privacy" section covers real account security on cloud.
+        hideOnCloud: true,
         Component: SecuritySettingsSection,
     },
 };
@@ -171,6 +176,8 @@ export const SETTINGS_SECTIONS = SETTINGS_SECTION_META.map((meta, index) => {
         titleKey: visual.titleKey ?? visual.labelKey,
         defaultTitle: meta.defaultLabel,
         bodyClassName: visual.bodyClassName,
+        developerOnly: visual.developerOnly,
+        hideOnCloud: visual.hideOnCloud,
         order: index,
         Component: visual.Component,
     };

package/components/settings/useCloudModelConfig.d.ts

@@ -7,8 +7,8 @@
  * derived modelValues used by the cloud-tier ConfigRenderer.
  */
 import { type ModelOption } from "@elizaos/shared";
-import { type FirstRunOptions } from "../../api";
-import { type CloudModelSchema } from "./cloud-model-schema";
+import { type FirstRunOptions } from "../../api/index.js";
+import { type CloudModelSchema } from "./cloud-model-schema.js";
 export interface CloudModelConfig {
     modelOptions: FirstRunOptions["models"] | null;
     setModelOptions: (options: FirstRunOptions["models"]) => void;

package/components/settings/useDesktopWindowControls.d.ts

@@ -1,5 +1,5 @@
-import type { DesktopWorkspaceSnapshot } from "../../utils/desktop-workspace";
-type Translator = (key: string, options?: Record<string, unknown>) => string;
+import type { TranslateFn } from "../../types/index.js";
+import type { DesktopWorkspaceSnapshot } from "../../utils/desktop-workspace.js";
 export interface DesktopWindowControls {
     show: () => Promise<void>;
     hide: () => Promise<void>;
@@ -8,6 +8,5 @@ export interface DesktopWindowControls {
     toggleMaximize: () => Promise<void>;
     notify: () => Promise<void>;
 }
-export declare function useDesktopWindowControls(snapshot: DesktopWorkspaceSnapshot | null, t: Translator): DesktopWindowControls;
-export {};
+export declare function useDesktopWindowControls(snapshot: DesktopWorkspaceSnapshot | null, t: TranslateFn): DesktopWindowControls;
 //# sourceMappingURL=useDesktopWindowControls.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDesktopWindowControls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/useDesktopWindowControls.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,KAAK,UAAU,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAE7E,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,wBAAwB,GAAG,IAAI,EACzC,CAAC,EAAE,UAAU,GACZ,qBAAqB,CA2DvB"}
+{"version":3,"file":"useDesktopWindowControls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/useDesktopWindowControls.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,wBAAwB,GAAG,IAAI,EACzC,CAAC,EAAE,WAAW,GACb,qBAAqB,CA2DvB"}

package/components/settings/useProviderBootstrap.d.ts

@@ -1,7 +1,7 @@
 import { type SubscriptionProviderStatus } from "@elizaos/shared";
 import { type Dispatch, type SetStateAction } from "react";
-import type { useCloudModelConfig } from "./useCloudModelConfig";
-import type { useProviderSelection } from "./useProviderSelection";
+import type { useCloudModelConfig } from "./useCloudModelConfig.js";
+import type { useProviderSelection } from "./useProviderSelection.js";
 export interface ProviderBootstrapState {
     subscriptionStatus: SubscriptionProviderStatus[];
     anthropicConnected: boolean;

package/components/settings/useProviderEntries.d.ts

@@ -1,9 +1,9 @@
 import type { SubscriptionProviderStatus } from "@elizaos/shared";
 import { type ComponentType } from "react";
-import type { PluginParamDef } from "../../api";
-import type { ConfigUiHint } from "../../types";
-import type { ProviderCategory, ProviderStatus } from "./ProviderCard";
-import type { ProviderPanelId } from "./useProviderSelection";
+import type { PluginParamDef } from "../../api/index.js";
+import type { ConfigUiHint } from "../../types/index.js";
+import type { ProviderCategory, ProviderStatus } from "./ProviderCard.js";
+import type { ProviderPanelId } from "./useProviderSelection.js";
 export interface PluginInfo {
     id: string;
     name: string;

package/components/settings/useProviderSelection.d.ts

@@ -1,4 +1,4 @@
-import { type SubscriptionProviderSelectionId } from "../../providers";
+import { type SubscriptionProviderSelectionId } from "../../providers/index.js";
 export type ProviderPanelId = "__cloud__" | "__local__" | string;
 interface AiProviderLike {
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useProviderSelection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/useProviderSelection.ts"],"names":[],"mappings":"AAiBA,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAEjE,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;CACZ;AAmBD,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,sBAAsB,EAAE,eAAe,CAAC;IACxC,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7D,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,wBAAwB,EAAE,CACxB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,qBAAqB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,oBAAoB,CAClC,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,EACjC,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,GAC7D,iBAAiB,CA4OnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,cAAc,EAAE,GAC5B,MAAM,CAWR"}
+{"version":3,"file":"useProviderSelection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/useProviderSelection.ts"],"names":[],"mappings":"AAiBA,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAEjE,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;CACZ;AAmBD,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,sBAAsB,EAAE,eAAe,CAAC;IACxC,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7D,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,wBAAwB,EAAE,CACxB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,qBAAqB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,oBAAoB,CAClC,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,EACjC,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,GAC7D,iBAAiB,CAkPnB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,cAAc,EAAE,GAC5B,MAAM,CAWR"}

package/components/settings/useProviderSelection.js

@@ -12,7 +12,7 @@ import { client } from "../../api/index.js";
 import { useBranding } from "../../config/branding.js";
 import { isElizaCloudRuntimeLocked } from "../../first-run/mobile-runtime-mode.js";
 import { getFirstRunProviderOption, isSubscriptionProviderSelectionId, } from "../../providers/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 function normalizeAiProviderPluginId(value) {
     return value
         .toLowerCase()
@@ -25,7 +25,10 @@ function readSubscriptionProvider(cfg) {
     return normalizeSubscriptionProviderSelectionId(defaults?.subscriptionProvider);
 }
 export function useProviderSelection(availableProviderIds, notifySelectionFailure) {
-    const app = useApp();
+    const { setActionNotice, handleCloudDisconnect } = useAppSelectorShallow((s) => ({
+        setActionNotice: s.setActionNotice,
+        handleCloudDisconnect: s.handleCloudDisconnect,
+    }));
     const branding = useBranding();
     const cloudRuntimeLocked = branding.cloudOnly === true || isElizaCloudRuntimeLocked();
     const [cloudCallsDisabled, setCloudCallsDisabled] = useState(false);
@@ -147,7 +150,7 @@ export function useProviderSelection(availableProviderIds, notifySelectionFailur
     ]);
     const handleSelectLocalOnly = useCallback(async () => {
         if (cloudRuntimeLocked) {
-            app.setActionNotice?.("Eliza Cloud is required while this app is running in cloud mode.", "error", 6000);
+            setActionNotice?.("Eliza Cloud is required while this app is running in cloud mode.", "error", 6000);
             return;
         }
         const previousSelectedId = resolvedSelectedId;
@@ -157,7 +160,7 @@ export function useProviderSelection(availableProviderIds, notifySelectionFailur
         setCloudCallsDisabled(true);
         setRoutingModeSaving(true);
         try {
-            await app.handleCloudDisconnect({ skipConfirmation: true });
+            await handleCloudDisconnect({ skipConfirmation: true });
             void client.restartAgent().catch((err) => {
                 notifySelectionFailure("Local-only mode saved; restart failed", err);
             });
@@ -171,7 +174,8 @@ export function useProviderSelection(availableProviderIds, notifySelectionFailur
             setRoutingModeSaving(false);
         }
     }, [
-        app,
+        setActionNotice,
+        handleCloudDisconnect,
         cloudCallsDisabled,
         cloudRuntimeLocked,
         notifySelectionFailure,

package/components/settings/vault-tabs/OverviewTab.d.ts

@@ -4,7 +4,7 @@
  * fetching and the save flow; this component only renders the rows + the
  * editable preference state.
  */
-import type { BackendStatus, InstallableBackendId, InstallMethod, ManagerPreferences } from "./types";
+import type { BackendStatus, InstallableBackendId, InstallMethod, ManagerPreferences } from "./types.js";
 export interface OverviewTabProps {
     backends: BackendStatus[];
     preferences: ManagerPreferences;

package/components/settings/vault-tabs/OverviewTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/OverviewTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AA0BH,OAAO,KAAK,EAEV,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EACnB,MAAM,SAAS,CAAC;AASjB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,MAAM,CAAC,oBAAoB,EAAE,aAAa,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAuLlD;AAkBD,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA8PhD;AA4BD,UAAU,iBAAiB;IACzB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,GACX,EAAE,iBAAiB,2CA0MnB;AA8DD,UAAU,gBAAgB;IACxB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,GACX,EAAE,gBAAgB,2CAqTlB"}
+{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/OverviewTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AA2BH,OAAO,KAAK,EAEV,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EACnB,MAAM,SAAS,CAAC;AASjB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,MAAM,CAAC,oBAAoB,EAAE,aAAa,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAuLlD;AAkBD,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA8PhD;AA4BD,UAAU,iBAAiB;IACzB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,GACX,EAAE,iBAAiB,2CAiNnB;AA8DD,UAAU,gBAAgB;IACxB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,GACX,EAAE,gBAAgB,2CAqTlB"}

package/components/settings/vault-tabs/OverviewTab.js

@@ -9,6 +9,7 @@ import { AlertCircle, CheckCircle2, ChevronDown, ChevronUp, Download, ExternalLi
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { useAgentElement } from "../../../agent-surface/index.js";
 import { useTranslation } from "../../../state/TranslationContext.hooks.js";
+import { openEventSource } from "../../../utils/event-source.js";
 import { Button } from "../../ui/button.js";
 import { Input } from "../../ui/input.js";
 import { Label } from "../../ui/label.js";
@@ -261,8 +262,13 @@ export function InstallSheet({ backendId, backendLabel, methods, onCancel, onCom
                 throw new Error(body.error ?? `HTTP ${res.status}`);
             }
             const { jobId } = (await res.json());
-            const source = new EventSource(`/api/secrets/manager/install/${jobId}`);
+            const source = openEventSource(`/api/secrets/manager/install/${jobId}`);
             sourceRef.current = source;
+            if (!source) {
+                throw new Error(t("vault.install.streamDisconnected", {
+                    defaultValue: "install stream disconnected",
+                }));
+            }
             source.onmessage = (event) => {
                 let data;
                 try {

package/components/settings/vault-tabs/RoutingTab.d.ts

@@ -4,7 +4,7 @@
  * /api/secrets/routing`. Supports wildcard key patterns (e.g.
  * `OPENROUTER_*`).
  */
-import type { AgentSummary, InstalledApp, RoutingConfig, VaultEntryMeta, VaultTabNavigate } from "./types";
+import type { AgentSummary, InstalledApp, RoutingConfig, VaultEntryMeta, VaultTabNavigate } from "./types.js";
 export interface RoutingTabProps {
     config: RoutingConfig;
     agents: AgentSummary[];

package/components/settings/vault-tabs/RoutingTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoutingTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/RoutingTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EAIb,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAklBhD"}
+{"version":3,"file":"RoutingTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/RoutingTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EAIb,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA4nBhD"}

package/components/settings/vault-tabs/RoutingTab.js

@@ -6,12 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `OPENROUTER_*`).
  */
 import { ArrowRight, Loader2, Plus, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState, } from "react";
+import { memo, useCallback, useEffect, useMemo, useState, } from "react";
 import { useAgentElement } from "../../../agent-surface/index.js";
 import { useTranslation } from "../../../state/TranslationContext.hooks.js";
 import { Button } from "../../ui/button.js";
 import { Input } from "../../ui/input.js";
 import { Label } from "../../ui/label.js";
+import { Select, SelectContent, SelectItem, SelectValue, } from "../../ui/select.js";
+import { SettingsSelectTrigger } from "../../ui/settings-controls.js";
 export function RoutingTab(props) {
     const { config, agents, apps, entries, onConfigChange, navigate, focusKey, onFocusApplied, } = props;
     const { t } = useTranslation();
@@ -114,6 +116,20 @@ export function RoutingTab(props) {
         onFocusApplied();
     }, [focusKey, onFocusApplied]);
     const allKeys = useMemo(() => entries.map((e) => e.key), [entries]);
+    const agentNameById = useMemo(() => {
+        const map = new Map();
+        for (const a of agents)
+            map.set(a.id, a.name);
+        return map;
+    }, [agents]);
+    const appLabelByName = useMemo(() => {
+        const map = new Map();
+        for (const a of apps) {
+            if (a.displayName)
+                map.set(a.name, a.displayName);
+        }
+        return map;
+    }, [apps]);
     const profilesByKey = useMemo(() => {
         const map = new Map();
         for (const entry of entries) {
@@ -244,7 +260,7 @@ export function RoutingTab(props) {
                                         defaultValue: "Default profile",
                                     }) }), _jsx("p", { className: "text-2xs text-muted", children: t("routing.defaultProfile.description", {
                                         defaultValue: 'Applied when no rule matches. Falls back to "default".',
-                                    }) })] }), _jsx("select", { ref: defaultProfileRef, ...defaultProfileAgentProps, value: config.defaultProfile ?? "default", onChange: (e) => void onDefaultProfileChange(e.target.value), disabled: saving, "data-testid": "routing-default-profile", className: "block h-8 w-40 rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: allProfileIds.map((id) => (_jsx("option", { value: id, children: id }, id))) })] }) }), _jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("routing.rules.title", { defaultValue: "Routing rules" }) }), _jsx("p", { className: "text-2xs text-muted", children: t("routing.rules.description", {
+                                    }) })] }), _jsxs(Select, { value: config.defaultProfile ?? "default", onValueChange: (value) => void onDefaultProfileChange(value), disabled: saving, children: [_jsx(SettingsSelectTrigger, { ref: defaultProfileRef, ...defaultProfileAgentProps, variant: "filter", "data-testid": "routing-default-profile", className: "w-40", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: allProfileIds.map((id) => (_jsx(SelectItem, { value: id, children: id }, id))) })] })] }) }), _jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("routing.rules.title", { defaultValue: "Routing rules" }) }), _jsx("p", { className: "text-2xs text-muted", children: t("routing.rules.description", {
                                             defaultValue: "Per-context overrides. Match keys exactly (e.g. OPENROUTER_API_KEY) or use wildcards (e.g. OPENROUTER_*).",
                                         }) })] }), _jsxs(Button, { ref: addRuleToggleRef, ...addRuleToggleAgentProps, variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-sm px-2", onClick: () => setShowAdd((v) => !v), disabled: saving, "aria-label": t("routing.addRule", {
                                     defaultValue: "Add routing rule",
@@ -252,13 +268,15 @@ export function RoutingTab(props) {
                             defaultValue: "Filter rules by key, scope, or profile",
                         }), className: "h-8 text-xs", autoComplete: "off", "data-testid": "routing-rules-filter" })), showAdd && (_jsxs("form", { onSubmit: onAddRule, "data-testid": "routing-add-rule-form", className: "space-y-2 rounded-sm border border-border/50 bg-card/30 p-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.keyPattern", {
                                             defaultValue: "Key pattern",
-                                        }) }), _jsx(Input, { ref: keyPatternRef, ...keyPatternAgentProps, value: keyPattern, onChange: (e) => setKeyPattern(e.target.value), placeholder: "OPENROUTER_API_KEY or OPENROUTER_*", className: "h-8 font-mono text-xs", autoComplete: "off", list: "routing-key-suggestions", required: true }), _jsx("datalist", { id: "routing-key-suggestions", children: allKeys.map((k) => (_jsx("option", { value: k }, k))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.scope", { defaultValue: "Scope" }) }), _jsxs("select", { ref: scopeKindRef, ...scopeKindAgentProps, value: scopeKind, onChange: (e) => setScopeKind(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: [_jsx("option", { value: "agent", children: t("routing.scope.agent", { defaultValue: "Agent" }) }), _jsx("option", { value: "app", children: t("routing.scope.app", { defaultValue: "App" }) })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: scopeKind === "agent"
+                                        }) }), _jsx(Input, { ref: keyPatternRef, ...keyPatternAgentProps, value: keyPattern, onChange: (e) => setKeyPattern(e.target.value), placeholder: "OPENROUTER_API_KEY or OPENROUTER_*", className: "h-8 font-mono text-xs", autoComplete: "off", list: "routing-key-suggestions", required: true }), _jsx("datalist", { id: "routing-key-suggestions", children: allKeys.map((k) => (_jsx("option", { value: k }, k))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.scope", { defaultValue: "Scope" }) }), _jsxs(Select, { value: scopeKind, onValueChange: (value) => setScopeKind(value), children: [_jsx(SettingsSelectTrigger, { ref: scopeKindRef, ...scopeKindAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "agent", children: t("routing.scope.agent", { defaultValue: "Agent" }) }), _jsx(SelectItem, { value: "app", children: t("routing.scope.app", { defaultValue: "App" }) })] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: scopeKind === "agent"
                                                     ? t("routing.scope.agent", { defaultValue: "Agent" })
-                                                    : t("routing.scope.app", { defaultValue: "App" }) }), scopeKind === "agent" ? (_jsxs("select", { ref: scopeAgentRef, ...scopeAgentAgentProps, value: scopeAgentId, onChange: (e) => setScopeAgentId(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectAgent", {
-                                                            defaultValue: "Select agent…",
-                                                        }) }), agents.map((a) => (_jsx("option", { value: a.id, children: a.name }, a.id)))] })) : (_jsxs("select", { ref: scopeAppRef, ...scopeAppAgentProps, value: scopeAppName, onChange: (e) => setScopeAppName(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectApp", { defaultValue: "Select app…" }) }), apps.map((a) => (_jsx("option", { value: a.name, children: a.displayName ?? a.name }, a.name)))] }))] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.profile", { defaultValue: "Profile" }) }), _jsxs("select", { ref: ruleProfileRef, ...ruleProfileAgentProps, value: profileId, onChange: (e) => setProfileId(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectProfile", {
-                                                            defaultValue: "Select profile…",
-                                                        }) }), profilesForNewRule.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id)))] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [_jsx(Button, { ref: ruleCancelRef, ...ruleCancelAgentProps, type: "button", variant: "ghost", size: "sm", className: "h-7 rounded-sm px-3 text-xs", onClick: () => setShowAdd(false), disabled: saving, children: t("routing.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { ref: ruleSaveRef, ...ruleSaveAgentProps, type: "submit", variant: "default", size: "sm", className: "h-7 rounded-sm px-3 text-xs", disabled: saving || !keyPattern.trim() || !profileId, children: saving
+                                                    : t("routing.scope.app", { defaultValue: "App" }) }), scopeKind === "agent" ? (_jsxs(Select, { value: scopeAgentId || undefined, onValueChange: (value) => setScopeAgentId(value), children: [_jsx(SettingsSelectTrigger, { ref: scopeAgentRef, ...scopeAgentAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, { placeholder: t("routing.selectAgent", {
+                                                                defaultValue: "Select agent…",
+                                                            }) }) }), _jsx(SelectContent, { children: agents.map((a) => (_jsx(SelectItem, { value: a.id, children: a.name }, a.id))) })] })) : (_jsxs(Select, { value: scopeAppName || undefined, onValueChange: (value) => setScopeAppName(value), children: [_jsx(SettingsSelectTrigger, { ref: scopeAppRef, ...scopeAppAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, { placeholder: t("routing.selectApp", {
+                                                                defaultValue: "Select app…",
+                                                            }) }) }), _jsx(SelectContent, { children: apps.map((a) => (_jsx(SelectItem, { value: a.name, children: a.displayName ?? a.name }, a.name))) })] }))] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.profile", { defaultValue: "Profile" }) }), _jsxs(Select, { value: profileId || undefined, onValueChange: (value) => setProfileId(value), children: [_jsx(SettingsSelectTrigger, { ref: ruleProfileRef, ...ruleProfileAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, { placeholder: t("routing.selectProfile", {
+                                                                defaultValue: "Select profile…",
+                                                            }) }) }), _jsx(SelectContent, { children: profilesForNewRule.map((p) => (_jsx(SelectItem, { value: p.id, children: p.label }, p.id))) })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [_jsx(Button, { ref: ruleCancelRef, ...ruleCancelAgentProps, type: "button", variant: "ghost", size: "sm", className: "h-7 rounded-sm px-3 text-xs", onClick: () => setShowAdd(false), disabled: saving, children: t("routing.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { ref: ruleSaveRef, ...ruleSaveAgentProps, type: "submit", variant: "default", size: "sm", className: "h-7 rounded-sm px-3 text-xs", disabled: saving || !keyPattern.trim() || !profileId, children: saving
                                             ? t("routing.saving", { defaultValue: "Saving…" })
                                             : t("routing.saveRule", { defaultValue: "Save rule" }) })] })] })), config.rules.length === 0 ? (_jsx("div", { "data-testid": "routing-rules-empty", className: "rounded-sm border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: t("routing.empty", {
                             defaultValue: "No routing rules. The default profile applies for every caller.",
@@ -271,11 +289,10 @@ export function RoutingTab(props) {
                                         rule.scope.skillId ??
                                         "—";
                                     const targetLabel = rule.scope.kind === "agent"
-                                        ? (agents.find((a) => a.id === rule.scope.agentId)?.name ??
-                                            targetId)
+                                        ? (agentNameById.get(rule.scope.agentId ?? "") ?? targetId)
                                         : rule.scope.kind === "app"
-                                            ? (apps.find((a) => a.name === rule.scope.appName)
-                                                ?.displayName ?? targetId)
+                                            ? (appLabelByName.get(rule.scope.appName ?? "") ??
+                                                targetId)
                                             : targetId;
                                     const ruleKey = `${rule.keyPattern}:${rule.scope.kind}:${targetId}:${rule.profileId}:${idx}`;
                                     const keyExists = allKeys.includes(rule.keyPattern);
@@ -286,7 +303,7 @@ export function RoutingTab(props) {
                                         }), onDelete: () => void onDeleteRule(rule) }, ruleKey));
                                 }) })] })), saving && (_jsxs("div", { className: "flex items-center gap-2 px-1 text-2xs text-muted", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true }), " ", t("routing.saving", { defaultValue: "Saving…" })] }))] })] }));
 }
-function RoutingRuleRow({ ruleKey, keyPattern, scopeKind, targetLabel, profileId, keyExists, onOpenInSecrets, onDelete, }) {
+const RoutingRuleRow = memo(function RoutingRuleRow({ ruleKey, keyPattern, scopeKind, targetLabel, profileId, keyExists, onOpenInSecrets, onDelete, }) {
     const { t } = useTranslation();
     const { ref: chipRef, agentProps: chipAgentProps } = useAgentElement({
         id: `routing-key-chip-${ruleKey}`,
@@ -310,4 +327,14 @@ function RoutingRuleRow({ ruleKey, keyPattern, scopeKind, targetLabel, profileId
                         keyPattern,
                         defaultValue: "Delete rule for {{keyPattern}}",
                     }), children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) }) })] }));
-}
+}, 
+// Include handlers in the memo check so rows pick up changed navigation or
+// delete closures after their parent state changes.
+(prev, next) => prev.ruleKey === next.ruleKey &&
+    prev.keyPattern === next.keyPattern &&
+    prev.scopeKind === next.scopeKind &&
+    prev.targetLabel === next.targetLabel &&
+    prev.profileId === next.profileId &&
+    prev.keyExists === next.keyExists &&
+    prev.onOpenInSecrets === next.onOpenInSecrets &&
+    prev.onDelete === next.onDelete);

package/components/settings/vault-tabs/SecretsTab.d.ts

@@ -4,7 +4,7 @@
  *
  * The parent modal owns the entries fetch; this tab only renders.
  */
-import type { VaultEntryMeta, VaultTabNavigate } from "./types";
+import type { VaultEntryMeta, VaultTabNavigate } from "./types.js";
 export interface SecretsTabProps {
     entries: VaultEntryMeta[];
     onChanged: () => void;

package/components/settings/vault-tabs/SecretsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecretsTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/SecretsTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,cAAc,GACf,EAAE,eAAe,2CAWjB"}
+{"version":3,"file":"SecretsTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/SecretsTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,cAAc,GACf,EAAE,eAAe,2CAejB"}

package/components/settings/vault-tabs/SecretsTab.js

@@ -5,7 +5,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * The parent modal owns the entries fetch; this tab only renders.
  */
+import { useCallback } from "react";
 import { VaultInventoryPanel } from "../VaultInventoryPanel.js";
 export function SecretsTab({ entries, onChanged, navigate, focusKey, focusProfileId, onFocusApplied, }) {
-    return (_jsx(VaultInventoryPanel, { entries: entries, onChanged: onChanged, onJumpToRouting: (key) => navigate({ tab: "routing", focusKey: key }), focusKey: focusKey, focusProfileId: focusProfileId, onFocusApplied: onFocusApplied }));
+    const onJumpToRouting = useCallback((key) => navigate({ tab: "routing", focusKey: key }), [navigate]);
+    return (_jsx(VaultInventoryPanel, { entries: entries, onChanged: onChanged, onJumpToRouting: onJumpToRouting, focusKey: focusKey, focusProfileId: focusProfileId, onFocusApplied: onFocusApplied }));
 }

package/components/setup/BootstrapStep.d.ts

@@ -18,7 +18,7 @@
  *   5xx → server not ready.
  *   network → surfaces to user; never treated as success.
  */
-import type { BootstrapExchangeResult } from "../../api/client-agent";
+import type { BootstrapExchangeResult } from "../../api/client-agent.js";
 export interface BootstrapStepProps {
     /**
      * Called after a successful exchange. The caller is responsible for