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

package/components/settings/PermissionsSection.js

@@ -5,7 +5,7 @@ import { useBootConfig } from "../../config/boot-config-react.hooks.js";
 import { appNameInterpolationVars, useBranding } from "../../config/branding.js";
 import { isDesktopPlatform, isNative, isWebPlatform, platform as runtimePlatform, } from "../../platform/index.js";
 import { createMobileSignalsPermissionsRegistry, openMobilePermissionSettings, } from "../../platform/mobile-permissions-client.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { StreamingPermissionsSettingsView } from "../permissions/StreamingPermissions.js";
 import { CapabilityToggle, PermissionRow } from "./permission-controls.js";
 import { useDesktopPermissionsState } from "./permission-controls.hooks.js";
@@ -14,30 +14,18 @@ import { SettingsActionButton } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
 const PLATFORM_COPY = {
     darwin: {
-        systemDescription: {
-            key: "permissionssection.MacSystemPermissionsDescription",
-            defaultValue: "Native permissions for desktop control, voice, and vision.",
-        },
         grantNote: {
             key: "permissionssection.MacGrantAccessNote",
             defaultValue: "macOS requires Accessibility permission for computer control. Open System Settings → Privacy & Security to grant access.",
         },
     },
     win32: {
-        systemDescription: {
-            key: "permissionssection.WindowsSystemPermissionsDescription",
-            defaultValue: "Open Windows privacy settings for microphone and camera, then verify access by using those features in the app.",
-        },
         grantNote: {
             key: "permissionssection.WindowsGrantPermissionsNote",
             defaultValue: "Windows may not list this app by name here. Use Privacy settings to enable microphone and camera access, then test them in the app.",
         },
     },
     linux: {
-        systemDescription: {
-            key: "permissionssection.SystemPermissionsDescription",
-            defaultValue: "Grant the runtime access it needs for voice input, camera capture, shell tasks, and desktop automation features.",
-        },
         grantNote: {
             key: "permissionssection.GrantPermissionsNote",
             defaultValue: "Grant permissions to enable features like voice input and computer control.",
@@ -53,12 +41,10 @@ function platformCopy(platform) {
 }
 /* ── Streaming permission views (mobile / web) ──────────────────── */
 function MobilePermissionsView() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { appBlockerSettingsCard: AppBlockerSettingsCard, websiteBlockerSettingsCard: WebsiteBlockerSettingsCard, } = useBootConfig();
     return (_jsxs(SettingsStack, { children: [_jsx(StreamingPermissionsSettingsView, { mode: "mobile", testId: "mobile-permissions", title: t("permissionssection.StreamingPermissions", {
                     defaultValue: "Streaming Permissions",
-                }), description: t("permissionssection.MobileStreamingDesc", {
-                    defaultValue: "Streams camera, mic, and screen to your Eliza Cloud agent.",
                 }) }), _jsx(MobileSystemPermissionsPanel, {}), _jsx(MobileSignalsPermissionsPanel, {}), AppBlockerSettingsCard ? _jsx(AppBlockerSettingsCard, { mode: "mobile" }) : null, WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "mobile" })) : null] }));
 }
 function mobileSettingsPlatform() {
@@ -68,7 +54,7 @@ function mobileSettingsPlatform() {
     return "web";
 }
 function MobileSystemPermissionsPanel() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const branding = useBranding();
     const mobilePlatform = mobileSettingsPlatform();
     const registry = useMemo(() => createMobileSignalsPermissionsRegistry(), []);
@@ -153,8 +139,6 @@ function MobileSystemPermissionsPanel() {
     }
     return (_jsx(SettingsGroup, { title: t("permissionssection.SystemPermissions", {
             defaultValue: "System Permissions",
-        }), description: t("permissionssection.MobileSystemPermissionsDescription", {
-            defaultValue: "Review device permissions used by mobile features, then grant or manage each one in the right OS flow.",
         }), action: _jsx(SettingsActionButton, { agentId: "perm-mobile-system-refresh", agentLabel: "Refresh mobile system permissions", agentGroup: "permissions", agentStatus: refreshing ? "loading" : undefined, variant: "outline", size: "sm", className: "h-9 rounded-sm px-3 text-xs font-semibold", onClick: () => void refresh(true), disabled: refreshing, children: refreshing
                 ? t("common.refreshing", { defaultValue: "Refreshing..." })
                 : t("common.refresh", { defaultValue: "Refresh" }) }), footer: t("permissionssection.MobilePermissionGrantNote", {
@@ -201,7 +185,7 @@ function mobileSetupActionBadge(action) {
     return { label: "Needs action", className: "border-warn/30 text-warn" };
 }
 function MobileSignalsPermissionsPanel() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [status, setStatus] = useState(null);
     const [loading, setLoading] = useState(true);
     const [busyAction, setBusyAction] = useState(null);
@@ -276,12 +260,10 @@ function MobileSignalsPermissionsPanel() {
     }
     return (_jsx(SettingsGroup, { title: t("permissionssection.LifeOpsSignals", {
             defaultValue: "LifeOps Signals",
-        }), description: t("permissionssection.MobileSignalsDesc", {
-            defaultValue: "Review Health, sleep, Screen Time, notification, and device signal access used by LifeOps.",
         }), action: _jsx(SettingsActionButton, { agentId: "perm-mobile-signals-refresh", agentLabel: "Refresh mobile signals", agentGroup: "permissions", variant: "outline", size: "sm", className: "h-9 rounded-sm px-3 text-xs font-semibold", onClick: refresh, children: t("common.refresh", { defaultValue: "Refresh" }) }), children: status.setupActions.map((action) => (_jsx(MobileSetupActionRow, { action: action, busy: busyAction === action.id, onAct: () => void handleAction(action) }, action.id))) }));
 }
 function MobileSetupActionRow({ action, busy, onAct, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const badge = mobileSetupActionBadge(action);
     const canAct = action.status !== "ready" && (action.canRequest || action.canOpenSettings);
     const actionLabel = action.canRequest
@@ -292,12 +274,10 @@ function MobileSetupActionRow({ action, busy, onAct, }) {
                 : actionLabel })) : undefined }));
 }
 function WebPermissionsView() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
     return (_jsxs(SettingsStack, { children: [_jsx(StreamingPermissionsSettingsView, { mode: "web", testId: "web-permissions-info", title: t("permissionssection.BrowserPermissions", {
                     defaultValue: "Browser Permissions",
-                }), description: t("permissionssection.WebStreamingDesc", {
-                    defaultValue: "Grant browser access to your camera, microphone, and screen to stream to your agent.",
                 }) }), WebsiteBlockerSettingsCard ? (isLocalBrowserRuntime() ? (_jsx(LocalWebsiteBlockingCard, { WebsiteBlockerSettingsCard: WebsiteBlockerSettingsCard })) : (_jsx(WebsiteBlockerSettingsCard, { mode: "web" }))) : null] }));
 }
 function isLocalBrowserRuntime() {
@@ -318,7 +298,9 @@ function LocalWebsiteBlockingCard({ WebsiteBlockerSettingsCard, }) {
 }
 /* ── Desktop permission view ────────────────────────────────────── */
 function DesktopPermissionsView() {
-    const { t, plugins, handlePluginToggle } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const plugins = useAppSelector((s) => s.plugins);
+    const handlePluginToggle = useAppSelector((s) => s.handlePluginToggle);
     const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
     const { handleOpenSettings, handleRequest, handleToggleShell, loading, permissions, platform, shellEnabled, } = useDesktopPermissionsState();
     const arePermissionsGranted = useCallback((requiredPerms) => {
@@ -348,16 +330,12 @@ function DesktopPermissionsView() {
     const copy = platformCopy(platform);
     return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { title: t("permissionssection.SystemPermissions", {
                     defaultValue: "System Permissions",
-                }), description: t(copy.systemDescription.key, {
-                    defaultValue: copy.systemDescription.defaultValue,
                 }), footer: t(copy.grantNote.key, {
                     defaultValue: copy.grantNote.defaultValue,
                 }), children: applicablePermissions.map((def) => {
                     const state = permissions[def.id];
                     return (_jsx(PermissionRow, { def: def, status: state?.status ?? "not-determined", reason: state?.reason, platform: platform, canRequest: state?.canRequest ?? false, onRequest: () => handleRequest(def.id), onOpenSettings: () => handleOpenSettings(def.id), isShell: def.id === "shell", shellEnabled: shellEnabled, onToggleShell: def.id === "shell" ? handleToggleShell : undefined }, def.id));
-                }) }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "desktop", permission: permissions["website-blocking"], platform: platform, onRequestPermission: () => handleRequest("website-blocking"), onOpenPermissionSettings: () => handleOpenSettings("website-blocking") })) : null, _jsx(SettingsGroup, { title: t("common.capabilities"), description: t("permissionssection.CapabilitiesDescription", {
-                    defaultValue: "Turn higher-level capabilities on only after the required runtime permissions are available.",
-                }), children: CAPABILITIES.map((cap) => {
+                }) }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "desktop", permission: permissions["website-blocking"], platform: platform, onRequestPermission: () => handleRequest("website-blocking"), onOpenPermissionSettings: () => handleOpenSettings("website-blocking") })) : null, _jsx(SettingsGroup, { title: t("common.capabilities"), children: CAPABILITIES.map((cap) => {
                     const plugin = plugins.find((p) => p.id === cap.id) ?? null;
                     const permissionsGranted = arePermissionsGranted(cap.requiredPermissions);
                     return (_jsx(CapabilityToggle, { cap: cap, plugin: plugin, permissionsGranted: permissionsGranted, onToggle: (enabled) => {

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

@@ -1 +1 @@
-{"version":3,"file":"PolicyControlsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PolicyControlsView.tsx"],"names":[],"mappings":"AAsDA,wBAAgB,kBAAkB,4CAmfjC"}
+{"version":3,"file":"PolicyControlsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PolicyControlsView.tsx"],"names":[],"mappings":"AAwDA,wBAAgB,kBAAkB,4CAmfjC"}

package/components/settings/PolicyControlsView.js

@@ -11,6 +11,8 @@ import { Button } from "../ui/button.js";
 import { ConfirmDialog } from "../ui/confirm-dialog.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";
 import { Slider } from "../ui/slider.js";
 import { Spinner } from "../ui/spinner.js";
 import { Switch } from "../ui/switch.js";
@@ -161,7 +163,7 @@ export function PolicyControlsView() {
                         defaultValue: "Connect your Steward instance to manage wallet policies.",
                     }) })] }));
     }
-    return (_jsxs(SettingsStack, { children: [error && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-danger shrink-0" }), _jsx("span", { className: "text-xs text-danger", children: error })] })), _jsxs(SettingsGroup, { children: [_jsx(PolicyRow, { agentId: "auto-approve", title: t("policycontrols.autoApprove.title", {
+    return (_jsxs(SettingsStack, { children: [error && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-danger shrink-0" }), _jsx("span", { className: "text-xs text-danger", children: error })] })), _jsxs(SettingsGroup, { children: [_jsx(PolicyRow, { agentId: "auto-approve", title: t("policycontrols.autoApprove.title", {
                             defaultValue: "Auto-Approve",
                         }), desc: autoApprovePolicy?.enabled
                             ? t("policycontrols.autoApprove.desc", {
@@ -425,17 +427,13 @@ function TimeSection({ config, onUpdate, }) {
             : [...days, i].sort();
         onUpdate({ ...config, allowedDays: next });
     };
-    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.from", { defaultValue: "From" }) }), _jsx("select", { ref: fromRef, ...fromAgentProps, value: hours.start, onChange: (e) => onUpdate({
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.from", { defaultValue: "From" }) }), _jsxs(Select, { value: String(hours.start), onValueChange: (v) => onUpdate({
                                     ...config,
-                                    allowedHours: [
-                                        { start: Number(e.target.value), end: hours.end },
-                                    ],
-                                }), className: "h-8 rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: HOUR_FROM_OPTIONS.map((h) => (_jsx("option", { value: h.value, children: h.label }, h.key))) })] }), _jsx("span", { className: "text-muted text-xs mt-5", children: "\u2192" }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.to", { defaultValue: "To" }) }), _jsx("select", { ref: toRef, ...toAgentProps, value: hours.end, onChange: (e) => onUpdate({
+                                    allowedHours: [{ start: Number(v), end: hours.end }],
+                                }), children: [_jsx(SettingsSelectTrigger, { ref: fromRef, ...fromAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: HOUR_FROM_OPTIONS.map((h) => (_jsx(SelectItem, { value: String(h.value), children: h.label }, h.key))) })] })] }), _jsx("span", { className: "text-muted text-xs mt-5", children: "\u2192" }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.to", { defaultValue: "To" }) }), _jsxs(Select, { value: String(hours.end), onValueChange: (v) => onUpdate({
                                     ...config,
-                                    allowedHours: [
-                                        { start: hours.start, end: Number(e.target.value) },
-                                    ],
-                                }), className: "h-8 rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: HOUR_TO_OPTIONS.map((h) => (_jsx("option", { value: h.value, children: h.label }, h.key))) })] })] }), _jsx("div", { className: "flex gap-1", children: DAY_NAMES.map((name, i) => (_jsx(DayToggle, { name: name, index: i, active: days.includes(i), onToggle: toggleDay }, name))) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.timezone", { defaultValue: "Timezone" }) }), _jsx("select", { ref: tzRef, ...tzAgentProps, value: timezone, onChange: (e) => onUpdate({ ...config, timezone: e.target.value }), className: "h-8 rounded-sm border border-border bg-bg px-2 text-xs text-txt w-full", children: TIMEZONES.map((tz) => (_jsx("option", { value: tz, children: tz }, tz))) })] })] }));
+                                    allowedHours: [{ start: hours.start, end: Number(v) }],
+                                }), children: [_jsx(SettingsSelectTrigger, { ref: toRef, ...toAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: HOUR_TO_OPTIONS.map((h) => (_jsx(SelectItem, { value: String(h.value), children: h.label }, h.key))) })] })] })] }), _jsx("div", { className: "flex gap-1", children: DAY_NAMES.map((name, i) => (_jsx(DayToggle, { name: name, index: i, active: days.includes(i), onToggle: toggleDay }, name))) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: t("policycontrols.time.timezone", { defaultValue: "Timezone" }) }), _jsxs(Select, { value: timezone, onValueChange: (v) => onUpdate({ ...config, timezone: v }), children: [_jsx(SettingsSelectTrigger, { ref: tzRef, ...tzAgentProps, variant: "touch", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: TIMEZONES.map((tz) => (_jsx(SelectItem, { value: tz, children: tz }, tz))) })] })] })] }));
 }
 function DayToggle({ name, index, active, onToggle, }) {
     const { ref, agentProps } = useAgentElement({

package/components/settings/ProviderCard.d.ts

@@ -19,11 +19,9 @@ export interface ProviderCardProps {
     onSelect: (id: string) => void;
 }
 /**
- * Compact provider chip. The AI Model section can list ~15 providers (cloud, six
- * coding subscriptions, local, and every installed API-key plugin); rendered as
- * full-width cards they stacked into an unscrollable wall on a phone. As wrapping
- * pills they stay readable and compact while every chip remains mounted, so the
- * agent surface can still address any provider by id from chat.
+ * Compact provider chip. The AI Model section lists many providers; wrapping
+ * pills keep them compact and every chip mounted so the agent surface can
+ * address any provider by id.
  */
 export declare function ProviderCard({ id, icon: Icon, label, status, current, selected, onSelect, }: ProviderCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProviderCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProviderCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAQD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,IAAI,EAAE,IAAI,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,2CAsDnB"}
+{"version":3,"file":"ProviderCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,IAAI,EAAE,IAAI,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,2CAsDnB"}

package/components/settings/ProviderCard.js

@@ -8,11 +8,9 @@ const STATUS_DOT_CLASSES = {
     muted: "bg-muted/50",
 };
 /**
- * Compact provider chip. The AI Model section can list ~15 providers (cloud, six
- * coding subscriptions, local, and every installed API-key plugin); rendered as
- * full-width cards they stacked into an unscrollable wall on a phone. As wrapping
- * pills they stay readable and compact while every chip remains mounted, so the
- * agent surface can still address any provider by id from chat.
+ * Compact provider chip. The AI Model section lists many providers; wrapping
+ * pills keep them compact and every chip mounted so the agent surface can
+ * address any provider by id.
  */
 export function ProviderCard({ id, icon: Icon, label, status, current, selected, onSelect, }) {
     const stateLabel = current ? "Active" : status.label;
@@ -24,7 +22,7 @@ export function ProviderCard({ id, icon: Icon, label, status, current, selected,
         status: selected ? "selected" : current ? "current" : undefined,
         onActivate: () => onSelect(id),
     });
-    return (_jsxs("button", { ref: ref, type: "button", "aria-current": selected ? "true" : undefined, "aria-label": `${label}, ${stateLabel}`, onClick: () => onSelect(id), title: `${label} · ${stateLabel}`, ...agentProps, className: cn("inline-flex min-h-[2.25rem] max-w-full items-center gap-2 rounded-full border px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40", selected
+    return (_jsxs("button", { ref: ref, type: "button", "aria-current": selected ? "true" : undefined, "aria-label": `${label}, ${stateLabel}`, onClick: () => onSelect(id), title: `${label} · ${stateLabel}`, ...agentProps, className: cn("inline-flex min-h-[2.25rem] max-w-full items-center gap-2 rounded-full border px-3 py-1.5 text-left text-sm transition-colors   ", selected
             ? "border-accent/50 bg-accent/12 text-accent"
             : current
                 ? "border-accent/40 bg-accent/8 text-txt-strong hover:bg-accent/12"

package/components/settings/ProviderPanels.d.ts

@@ -1,19 +1,9 @@
 import type { LinkedAccountProviderId, ModelOption, SubscriptionProviderStatus } from "@elizaos/shared";
 import type { Dispatch, SetStateAction } from "react";
-import type { PluginParamDef } from "../../api";
-import type { SUBSCRIPTION_PROVIDER_SELECTIONS, SubscriptionProviderSelectionId } from "../../providers";
-import type { ConfigUiHint } from "../../types";
-import type { CloudModelSchema } from "./cloud-model-schema";
+import type { SUBSCRIPTION_PROVIDER_SELECTIONS, SubscriptionProviderSelectionId } from "../../providers/index.js";
+import type { CloudModelSchema } from "./cloud-model-schema.js";
+import type { PluginInfo } from "./useProviderEntries.js";
 type SubscriptionProviderSelection = (typeof SUBSCRIPTION_PROVIDER_SELECTIONS)[number];
-interface PluginInfo {
-    id: string;
-    name: string;
-    category: string;
-    enabled: boolean;
-    configured: boolean;
-    parameters: PluginParamDef[];
-    configUiHints?: Record<string, ConfigUiHint>;
-}
 export declare function LocalProviderPanel({ cloudCallsDisabled, routingModeSaving, onSelectLocalOnly, }: {
     cloudCallsDisabled: boolean;
     routingModeSaving: boolean;
@@ -39,7 +29,6 @@ export interface CloudPanelProps {
 export declare function CloudPanel({ cloudCallsDisabled, isCloudSelected, routingModeSaving, onSelectCloud, elizaCloudConnected, largeModelOptions, cloudModelSchema, modelValues, currentLargeModel, modelSaving, modelSaveSuccess, onModelFieldChange, }: CloudPanelProps): import("react/jsx-runtime").JSX.Element;
 export interface SubscriptionPanelProps {
     selection: SubscriptionProviderSelection;
-    description: string;
     visibleProviderPanelId: string;
     resolvedSelectedId: string | null;
     cloudCallsDisabled: boolean;
@@ -52,7 +41,7 @@ export interface SubscriptionPanelProps {
     onSelectSubscription: (providerId: SubscriptionProviderSelectionId, activate?: boolean) => Promise<void>;
     loadSubscriptionStatus: () => Promise<void>;
 }
-export declare function SubscriptionPanel({ selection, description, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, onSelectSubscription, loadSubscriptionStatus, }: SubscriptionPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionPanel({ selection, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, onSelectSubscription, loadSubscriptionStatus, }: SubscriptionPanelProps): import("react/jsx-runtime").JSX.Element;
 export interface ApiKeyPanelProps {
     selectedProvider: PluginInfo;
     panelLabel: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ProviderPanels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,WAAW,EACX,0BAA0B,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAiB,QAAQ,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,KAAK,EACV,gCAAgC,EAChC,+BAA+B,EAChC,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,KAAK,6BAA6B,GAChC,CAAC,OAAO,gCAAgC,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC9C;AAsCD,wBAAgB,kBAAkB,CAAC,EACjC,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAClB,EAAE;IACD,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,2CAyCA;AAED,MAAM,WAAW,eAAe;IAC9B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,WAAW,EAAE,CAAC;IACjC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,WAAW,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC;IACvE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,UAAU,CAAC,EACzB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,eAAe,2CAqDjB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,6BAA6B,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,kBAAkB,EAAE,0BAA0B,EAAE,CAAC;IACjD,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACtD,oBAAoB,EAAE,CACpB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,sBAAsB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,sBAAsB,2CAgDxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,UAAU,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,4BAA4B,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC7D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,sBAAsB,EAAE,CACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC3B,IAAI,CAAC;IACV,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,gBAAgB,EAChB,UAAU,EACV,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,4BAA4B,EAC5B,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,sBAAsB,EACtB,WAAW,GACZ,EAAE,gBAAgB,2CA8ClB"}
+{"version":3,"file":"ProviderPanels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderPanels.tsx"],"names":[],"mappings":"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"}

package/components/settings/ProviderPanels.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cloud, Cpu, KeyRound, ShieldCheck } from "lucide-react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { AccountList } from "../accounts/AccountList.js";
 import { LocalInferencePanel } from "../local-inference/LocalInferencePanel.js";
 import { ApiKeyConfig } from "./ApiKeyConfig.js";
 import { ProviderRoutingPanel } from "./ProviderRoutingPanel.js";
 import { SubscriptionStatus } from "./SubscriptionStatus.js";
 import { SettingsActionButton } from "./settings-agent-rows.js";
-function ProviderPanelHeader({ icon: Icon, title, description, children, }) {
-    return (_jsxs("header", { className: "flex min-h-[3.25rem] flex-wrap items-center justify-between gap-2 border-border border-b px-4 py-3", title: description, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-surface text-txt-strong ring-1 ring-border/70", children: _jsx(Icon, { className: "h-[18px] w-[18px]", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate text-sm font-medium leading-5 text-txt-strong", children: title }), description ? (_jsx("p", { className: "truncate text-xs leading-relaxed text-muted", children: description })) : null] })] }), children ? _jsx("div", { className: "shrink-0", children: children }) : null] }));
+function ProviderPanelHeader({ icon: Icon, title, children, }) {
+    return (_jsxs("header", { className: "flex min-h-[3rem] flex-wrap items-center justify-between gap-2 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(Icon, { className: "h-[18px] w-[18px] shrink-0 text-muted/80", "aria-hidden": true }), _jsx("h3", { className: "truncate text-sm font-medium leading-5 text-txt-strong", children: title })] }), children ? _jsx("div", { className: "shrink-0", children: children }) : null] }));
 }
 export function LocalProviderPanel({ cloudCallsDisabled, routingModeSaving, onSelectLocalOnly, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: Cpu, title: t("providerpanels.localProvider", {
                     defaultValue: "Local provider",
-                }), description: t("providerpanels.localProviderDesc", {
-                    defaultValue: "Local downloads, active models, routing, and device pairing.",
                 }), children: _jsxs(SettingsActionButton, { agentId: "local-use-local-only", agentStatus: cloudCallsDisabled ? "active" : undefined, type: "button", variant: cloudCallsDisabled ? "default" : "outline", className: "h-9 rounded-md px-3 text-xs font-medium", disabled: routingModeSaving, "aria-label": cloudCallsDisabled
                         ? t("providerpanels.localOnlyActive", {
                             defaultValue: "Local only active",
@@ -25,11 +23,9 @@ export function LocalProviderPanel({ cloudCallsDisabled, routingModeSaving, onSe
                         }), onClick: onSelectLocalOnly, children: [_jsx(ShieldCheck, { className: "h-4 w-4", "aria-hidden": true }), t("providerpanels.localOnly", { defaultValue: "Local only" })] }) }), _jsx("div", { className: "px-3 py-3 sm:px-4", children: _jsx(LocalInferencePanel, {}) })] }));
 }
 export function CloudPanel({ cloudCallsDisabled, isCloudSelected, routingModeSaving, onSelectCloud, elizaCloudConnected, largeModelOptions, cloudModelSchema, modelValues, currentLargeModel, modelSaving, modelSaveSuccess, onModelFieldChange, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const cloudActive = !cloudCallsDisabled && isCloudSelected;
-    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: Cloud, title: "Eliza Cloud", description: t("providerpanels.cloudDesc", {
-                    defaultValue: "Managed models, cloud routing, and account credits.",
-                }), children: _jsxs(SettingsActionButton, { agentId: "cloud-use-cloud", agentStatus: cloudActive ? "active" : undefined, type: "button", variant: cloudActive ? "default" : "outline", className: "h-9 rounded-md px-3 text-xs font-medium", disabled: routingModeSaving, "aria-label": cloudActive
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: Cloud, title: "Eliza Cloud", children: _jsxs(SettingsActionButton, { agentId: "cloud-use-cloud", agentStatus: cloudActive ? "active" : undefined, type: "button", variant: cloudActive ? "default" : "outline", className: "h-9 rounded-md px-3 text-xs font-medium", disabled: routingModeSaving, "aria-label": cloudActive
                         ? t("providerpanels.cloudActive", {
                             defaultValue: "Cloud active",
                         })
@@ -37,21 +33,19 @@ export function CloudPanel({ cloudCallsDisabled, isCloudSelected, routingModeSav
                             defaultValue: "Use Eliza Cloud",
                         }), onClick: onSelectCloud, children: [_jsx(Cloud, { className: "h-4 w-4", "aria-hidden": true }), t("providerpanels.cloud", { defaultValue: "Cloud" })] }) }), _jsx(ProviderRoutingPanel, { largeModelOptions: largeModelOptions, cloudModelSchema: cloudModelSchema, modelValues: modelValues, currentLargeModel: currentLargeModel, modelSaving: modelSaving, modelSaveSuccess: modelSaveSuccess, onModelFieldChange: onModelFieldChange, showCloudControls: cloudActive, elizaCloudConnected: elizaCloudConnected })] }));
 }
-export function SubscriptionPanel({ selection, description, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, onSelectSubscription, loadSubscriptionStatus, }) {
-    const { t } = useApp();
+export function SubscriptionPanel({ selection, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, onSelectSubscription, loadSubscriptionStatus, }) {
+    const t = useAppSelector((s) => s.t);
     const showUseButton = cloudCallsDisabled || resolvedSelectedId !== visibleProviderPanelId;
-    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: KeyRound, title: t(selection.labelKey, { defaultValue: selection.id }), description: description, children: showUseButton ? (_jsx(SettingsActionButton, { agentId: `sub-use-${selection.id}`, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs font-medium", onClick: () => void onSelectSubscription(selection.id), children: t("providerpanels.useSubscription", {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: KeyRound, title: t(selection.labelKey, { defaultValue: selection.id }), children: showUseButton ? (_jsx(SettingsActionButton, { agentId: `sub-use-${selection.id}`, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs font-medium", onClick: () => void onSelectSubscription(selection.id), children: t("providerpanels.useSubscription", {
                         defaultValue: "Use subscription",
                     }) })) : null }), _jsxs("div", { className: "px-3 py-3 sm:px-4", children: [cloudCallsDisabled ? (_jsx("div", { className: "mb-3 rounded-sm border border-warn/30 bg-warn/5 px-3 py-2 text-warn text-xs", children: t("providerpanels.localOnlySubscriptionPaused", {
                             defaultValue: "Local-only active — remote routing is paused.",
                         }) })) : null, _jsx(SubscriptionStatus, { resolvedSelectedId: visibleProviderPanelId, subscriptionStatus: subscriptionStatus, anthropicConnected: anthropicConnected, setAnthropicConnected: setAnthropicConnected, anthropicCliDetected: anthropicCliDetected, openaiConnected: openaiConnected, setOpenaiConnected: setOpenaiConnected, handleSelectSubscription: onSelectSubscription, loadSubscriptionStatus: loadSubscriptionStatus }), _jsx(AccountList, { providerId: selection.storedProvider })] })] }));
 }
 export function ApiKeyPanel({ selectedProvider, panelLabel, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, selectedPanelAccountProvider, onSwitchProvider, pluginSaving, pluginSaveSuccess, handlePluginConfigSave, loadPlugins, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const showUseButton = cloudCallsDisabled || resolvedSelectedId !== visibleProviderPanelId;
-    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: KeyRound, title: panelLabel, description: t("providerpanels.apiKeyDesc", {
-                    defaultValue: "Your provider API key and model routing.",
-                }), children: showUseButton ? (_jsx(SettingsActionButton, { agentId: `apikey-use-${visibleProviderPanelId}`, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs font-medium", onClick: () => onSwitchProvider(visibleProviderPanelId), children: t("providerpanels.useProvider", { defaultValue: "Use provider" }) })) : null }), _jsxs("div", { className: "px-3 py-3 sm:px-4", children: [cloudCallsDisabled ? (_jsx("div", { className: "mb-3 rounded-sm border border-warn/30 bg-warn/5 px-3 py-2 text-warn text-xs", children: t("providerpanels.localOnlyApiPaused", {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx(ProviderPanelHeader, { icon: KeyRound, title: panelLabel, children: showUseButton ? (_jsx(SettingsActionButton, { agentId: `apikey-use-${visibleProviderPanelId}`, type: "button", variant: "outline", className: "h-9 rounded-md px-3 text-xs font-medium", onClick: () => onSwitchProvider(visibleProviderPanelId), children: t("providerpanels.useProvider", { defaultValue: "Use provider" }) })) : null }), _jsxs("div", { className: "px-3 py-3 sm:px-4", children: [cloudCallsDisabled ? (_jsx("div", { className: "mb-3 rounded-sm border border-warn/30 bg-warn/5 px-3 py-2 text-warn text-xs", children: t("providerpanels.localOnlyApiPaused", {
                             defaultValue: "Local-only active — remote routing is paused.",
                         }) })) : null, _jsx(ApiKeyConfig, { selectedProvider: selectedProvider, pluginSaving: pluginSaving, pluginSaveSuccess: pluginSaveSuccess, handlePluginConfigSave: handlePluginConfigSave, loadPlugins: loadPlugins }), selectedPanelAccountProvider ? (_jsx(AccountList, { providerId: selectedPanelAccountProvider })) : null] })] }));
 }

package/components/settings/ProviderRoutingPanel.d.ts

@@ -1,5 +1,5 @@
 import type { ModelOption } from "@elizaos/shared";
-import type { CloudModelSchema } from "./cloud-model-schema";
+import type { CloudModelSchema } from "./cloud-model-schema.js";
 export interface ProviderRoutingPanelProps {
     /** All cloud large-tier models, used for the visible primary dropdown. */
     largeModelOptions: ModelOption[];

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

@@ -1 +1 @@
-{"version":3,"file":"ProviderRoutingPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderRoutingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,yBAAyB;IACxC,0EAA0E;IAC1E,iBAAiB,EAAE,WAAW,EAAE,CAAC;IACjC,yEAAyE;IACzE,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,WAAW,EAAE;QACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAChC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;KACtB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,6EAA6E;IAC7E,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,GACpB,EAAE,yBAAyB,kDA+E3B"}
+{"version":3,"file":"ProviderRoutingPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderRoutingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,yBAAyB;IACxC,0EAA0E;IAC1E,iBAAiB,EAAE,WAAW,EAAE,CAAC;IACjC,yEAAyE;IACzE,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,WAAW,EAAE;QACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAChC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;KACtB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,6EAA6E;IAC7E,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,GACpB,EAAE,yBAAyB,kDA+D3B"}

package/components/settings/ProviderRoutingPanel.js

@@ -2,25 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle2, Loader2 } from "lucide-react";
 import { ConfigRenderer } from "../../components/config-ui/config-renderer.js";
 import { defaultRegistry } from "../../components/config-ui/config-renderer.helpers.js";
-import { appNameInterpolationVars, useBranding } from "../../config/branding.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { SettingsSelectRow } from "./settings-agent-rows.js";
 import { AdvancedSettingsDisclosure } from "./settings-control-primitives.js";
 export function ProviderRoutingPanel({ largeModelOptions, cloudModelSchema, modelValues, currentLargeModel, modelSaving, modelSaveSuccess, onModelFieldChange, showCloudControls, elizaCloudConnected, }) {
-    const { t } = useApp();
-    const branding = useBranding();
+    const t = useAppSelector((s) => s.t);
     const hasModelControls = elizaCloudConnected &&
         (largeModelOptions.length > 0 || cloudModelSchema !== null);
     if (!showCloudControls || !hasModelControls)
         return null;
-    return (_jsxs("div", { className: "border-border border-t", children: [largeModelOptions.length > 0 ? (_jsx(SettingsSelectRow, { agentId: "routing-primary-model", label: t("providerswitcher.model", {
+    return (_jsxs("div", { className: "flex flex-col", children: [largeModelOptions.length > 0 ? (_jsx(SettingsSelectRow, { agentId: "routing-primary-model", label: t("providerswitcher.model", {
                     defaultValue: "Primary model",
-                }), description: t("providerswitcher.modelDesc", {
-                    defaultValue: "The model used for the agent's main reasoning.",
                 }), value: currentLargeModel || "", onValueChange: (v) => onModelFieldChange("large", v), placeholder: t("providerswitcher.chooseModel", {
                     defaultValue: "Choose a model",
                 }), options: largeModelOptions.map((model) => ({
                     value: model.id,
                     label: model.name,
-                })), triggerClassName: "w-full" })) : null, _jsxs("div", { className: "px-4 py-4", children: [cloudModelSchema ? (_jsx(AdvancedSettingsDisclosure, { title: "Model overrides", children: _jsx(ConfigRenderer, { schema: cloudModelSchema.schema, hints: cloudModelSchema.hints, values: modelValues.values, setKeys: modelValues.setKeys, registry: defaultRegistry, onChange: onModelFieldChange }) })) : null, _jsxs("div", { className: "mt-3 flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center", children: [_jsx("p", { className: "text-muted text-xs-tight", children: t("providerswitcher.restartRequiredHint", appNameInterpolationVars(branding)) }), _jsxs("div", { className: "flex items-center gap-2", children: [modelSaving && (_jsx("span", { className: "inline-flex items-center text-muted", title: t("providerswitcher.savingRestarting"), role: "status", "aria-label": t("providerswitcher.savingRestarting"), children: _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) })), modelSaveSuccess && (_jsx("span", { className: "inline-flex items-center text-ok", title: t("providerswitcher.savedRestartingAgent"), role: "status", "aria-label": t("providerswitcher.savedRestartingAgent"), children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) }))] })] })] })] }));
+                })), triggerClassName: "w-full" })) : null, cloudModelSchema ? (_jsx(AdvancedSettingsDisclosure, { title: "Model overrides", children: _jsx(ConfigRenderer, { schema: cloudModelSchema.schema, hints: cloudModelSchema.hints, values: modelValues.values, setKeys: modelValues.setKeys, registry: defaultRegistry, onChange: onModelFieldChange }) })) : null, modelSaving ? (_jsx("span", { className: "inline-flex items-center py-2 text-muted", title: t("providerswitcher.savingRestarting"), role: "status", "aria-label": t("providerswitcher.savingRestarting"), children: _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) })) : null, modelSaveSuccess ? (_jsx("span", { className: "inline-flex items-center py-2 text-ok", title: t("providerswitcher.savedRestartingAgent"), role: "status", "aria-label": t("providerswitcher.savedRestartingAgent"), children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) })) : null] }));
 }

package/components/settings/ProviderSwitcher.d.ts

@@ -1,4 +1,4 @@
-import { type PluginInfo } from "./useProviderEntries";
+import { type PluginInfo } from "./useProviderEntries.js";
 interface ProviderSwitcherProps {
     elizaCloudConnected?: boolean;
     plugins?: PluginInfo[];

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

@@ -1 +1 @@
-{"version":3,"file":"ProviderSwitcher.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderSwitcher.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAEL,KAAK,UAAU,EAIhB,MAAM,sBAAsB,CAAC;AAM9B,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,CACvB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAqBD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,2CAuOjE"}
+{"version":3,"file":"ProviderSwitcher.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderSwitcher.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAEL,KAAK,UAAU,EAIhB,MAAM,sBAAsB,CAAC;AAM9B,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,CACvB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,2CAsQjE"}

package/components/settings/ProviderSwitcher.js

@@ -2,35 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useDefaultProviderPresets } from "../../hooks/useDefaultProviderPresets.js";
 import { getDirectAccountProviderForFirstRunProvider, isSubscriptionProviderSelectionId, SUBSCRIPTION_PROVIDER_SELECTIONS, } from "../../providers/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { ProvidersList } from "../local-inference/ProvidersList.js";
 import { RoutingMatrix } from "../local-inference/RoutingMatrix.js";
 import { ProviderCard } from "./ProviderCard.js";
 import { ApiKeyPanel, CloudPanel, LocalProviderPanel, SubscriptionPanel, } from "./ProviderPanels.js";
 import { AdvancedSettingsDisclosure } from "./settings-control-primitives.js";
-import { SettingsGroup, SettingsStack } from "./settings-layout.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
 import { useCloudModelConfig } from "./useCloudModelConfig.js";
 import { useProviderBootstrap } from "./useProviderBootstrap.js";
 import { computeAvailableProviderIds, sortAiProviders, useProviderEntries, } from "./useProviderEntries.js";
 import { resolveProviderIdForSwitch, useProviderSelection, } from "./useProviderSelection.js";
-function getSubscriptionProviderDescription(providerId) {
-    switch (providerId) {
-        case "anthropic-subscription":
-            return "Claude Code and task-agent access.";
-        case "openai-subscription":
-            return "Codex-backed coding access.";
-        case "gemini-subscription":
-            return "Gemini CLI coding access.";
-        case "zai-coding-subscription":
-            return "z.ai Coding Plan endpoint.";
-        case "kimi-coding-subscription":
-            return "Kimi Code endpoint.";
-        case "deepseek-coding-subscription":
-            return "Unavailable without a first-party coding surface.";
-    }
-}
 export function ProviderSwitcher(props = {}) {
-    const app = useApp();
+    const app = useAppSelectorShallow((s) => ({
+        t: s.t,
+        elizaCloudConnected: s.elizaCloudConnected,
+        plugins: s.plugins,
+        pluginSaving: s.pluginSaving,
+        pluginSaveSuccess: s.pluginSaveSuccess,
+        loadPlugins: s.loadPlugins,
+        handlePluginConfigSave: s.handlePluginConfigSave,
+        setActionNotice: s.setActionNotice,
+    }));
     const t = app.t;
     // Warm the runtime-mode default voice/ASR cache for the Voice section.
     useDefaultProviderPresets();
@@ -92,24 +85,30 @@ export function ProviderSwitcher(props = {}) {
     const onSwitchProvider = useCallback((id) => {
         void selection.handleSwitchProvider(id, resolveProviderIdForSwitch(id, allAiProviders));
     }, [allAiProviders, selection]);
-    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: t("providerswitcher.providerGroupTitle", {
-                    defaultValue: "Provider",
-                }), description: t("providerswitcher.providerGroupDesc", {
-                    defaultValue: "Where this agent's intelligence comes from.",
-                }), bare: true, children: [activeEntry ? (_jsx(ActiveProviderSummary, { entry: activeEntry, t: t })) : null, _jsx("div", { className: "flex flex-wrap gap-2", children: providerEntries.map((entry) => (_jsx(ProviderCard, { id: entry.id, icon: entry.icon, label: entry.label, category: entry.category, status: entry.status, current: entry.current, selected: visibleProviderPanelId === entry.id, onSelect: selection.handleProviderPanelSelect }, entry.id))) })] }), _jsxs(SettingsGroup, { title: t("providerswitcher.configGroupTitle", {
-                    defaultValue: "Configuration",
-                }), className: "min-w-0", children: [visibleProviderPanelId === "__local__" ? (_jsx(LocalProviderPanel, { cloudCallsDisabled: selection.cloudCallsDisabled, routingModeSaving: selection.routingModeSaving, onSelectLocalOnly: () => void selection.handleSelectLocalOnly() })) : null, visibleProviderPanelId === "__cloud__" ? (_jsx(CloudPanel, { cloudCallsDisabled: selection.cloudCallsDisabled, isCloudSelected: selection.isCloudSelected, routingModeSaving: selection.routingModeSaving, onSelectCloud: () => void selection.handleSelectCloud(), elizaCloudConnected: elizaCloudConnected, largeModelOptions: cloudModel.largeModelOptions, cloudModelSchema: cloudModel.cloudModelSchema, modelValues: cloudModel.modelValues, currentLargeModel: cloudModel.currentLargeModel, modelSaving: cloudModel.modelSaving, modelSaveSuccess: cloudModel.modelSaveSuccess, onModelFieldChange: cloudModel.handleModelFieldChange })) : null, activeSubscriptionSelection ? (_jsx(SubscriptionPanel, { selection: activeSubscriptionSelection, description: getSubscriptionProviderDescription(activeSubscriptionSelection.id), visibleProviderPanelId: visibleProviderPanelId, resolvedSelectedId: resolvedSelectedId, cloudCallsDisabled: selection.cloudCallsDisabled, subscriptionStatus: bootstrap.subscriptionStatus, anthropicConnected: bootstrap.anthropicConnected, setAnthropicConnected: bootstrap.setAnthropicConnected, anthropicCliDetected: bootstrap.anthropicCliDetected, openaiConnected: bootstrap.openaiConnected, setOpenaiConnected: bootstrap.setOpenaiConnected, onSelectSubscription: selection.handleSelectSubscription, loadSubscriptionStatus: bootstrap.loadSubscriptionStatus })) : null, selectedPanelProvider ? (_jsx(ApiKeyPanel, { selectedProvider: selectedPanelProvider, panelLabel: apiKeyPanelLabel, visibleProviderPanelId: visibleProviderPanelId, resolvedSelectedId: resolvedSelectedId, cloudCallsDisabled: selection.cloudCallsDisabled, selectedPanelAccountProvider: selectedPanelAccountProvider, onSwitchProvider: onSwitchProvider, pluginSaving: pluginSaving, pluginSaveSuccess: pluginSaveSuccess, handlePluginConfigSave: handlePluginConfigSave, loadPlugins: loadPlugins })) : null] }), _jsx(SettingsGroup, { title: t("providerswitcher.advancedGroupTitle", {
+    // Split the providers by purpose so the page reads as two simple "just works"
+    // decisions — the agent's brain (Local/Cloud) up top, the coding/workflow
+    // subscriptions (Claude/Codex/z.ai) in their own group — with custom keys and
+    // per-slot overrides tucked into Advanced.
+    const intelligenceEntries = providerEntries.filter((entry) => entry.category === "cloud" || entry.category === "local");
+    const subscriptionEntries = providerEntries.filter((entry) => entry.category === "subscription");
+    const keyEntries = providerEntries.filter((entry) => entry.category === "key");
+    const renderChip = (entry) => (_jsx(ProviderCard, { id: entry.id, icon: entry.icon, label: entry.label, category: entry.category, status: entry.status, current: entry.current, selected: visibleProviderPanelId === entry.id, onSelect: selection.handleProviderPanelSelect }, entry.id));
+    return (_jsxs(SettingsStack, { children: [_jsxs(SettingsGroup, { title: t("providerswitcher.intelligenceGroupTitle", {
+                    defaultValue: "Intelligence",
+                }), bare: true, children: [activeEntry ? (_jsx(ActiveProviderSummary, { entry: activeEntry, t: t })) : null, _jsx("div", { className: "flex flex-wrap gap-2", children: intelligenceEntries.map(renderChip) }), visibleProviderPanelId === "__local__" ? (_jsx(LocalProviderPanel, { cloudCallsDisabled: selection.cloudCallsDisabled, routingModeSaving: selection.routingModeSaving, onSelectLocalOnly: () => void selection.handleSelectLocalOnly() })) : null, visibleProviderPanelId === "__cloud__" ? (_jsx(CloudPanel, { cloudCallsDisabled: selection.cloudCallsDisabled, isCloudSelected: selection.isCloudSelected, routingModeSaving: selection.routingModeSaving, onSelectCloud: () => void selection.handleSelectCloud(), elizaCloudConnected: elizaCloudConnected, largeModelOptions: cloudModel.largeModelOptions, cloudModelSchema: cloudModel.cloudModelSchema, modelValues: cloudModel.modelValues, currentLargeModel: cloudModel.currentLargeModel, modelSaving: cloudModel.modelSaving, modelSaveSuccess: cloudModel.modelSaveSuccess, onModelFieldChange: cloudModel.handleModelFieldChange })) : null] }), subscriptionEntries.length > 0 ? (_jsxs(SettingsGroup, { title: t("providerswitcher.orchestratorGroupTitle", {
+                    defaultValue: "Code orchestrator & workflows",
+                }), bare: true, children: [_jsx("div", { className: "flex flex-wrap gap-2", children: subscriptionEntries.map(renderChip) }), activeSubscriptionSelection ? (_jsx(SubscriptionPanel, { selection: activeSubscriptionSelection, visibleProviderPanelId: visibleProviderPanelId, resolvedSelectedId: resolvedSelectedId, cloudCallsDisabled: selection.cloudCallsDisabled, subscriptionStatus: bootstrap.subscriptionStatus, anthropicConnected: bootstrap.anthropicConnected, setAnthropicConnected: bootstrap.setAnthropicConnected, anthropicCliDetected: bootstrap.anthropicCliDetected, openaiConnected: bootstrap.openaiConnected, setOpenaiConnected: bootstrap.setOpenaiConnected, onSelectSubscription: selection.handleSelectSubscription, loadSubscriptionStatus: bootstrap.loadSubscriptionStatus })) : null] })) : null, _jsx(SettingsGroup, { title: t("providerswitcher.advancedGroupTitle", {
                     defaultValue: "Advanced",
-                }), bare: true, children: _jsx(AdvancedSettingsDisclosure, { title: t("providerswitcher.modelSettings", {
-                        defaultValue: "Model routing & devices",
-                    }), lazy: true, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(ProvidersList, {}), _jsx(RoutingMatrix, {})] }) }) })] }));
+                }), bare: true, children: _jsx(AdvancedSettingsDisclosure, { title: t("providerswitcher.advancedDisclosureTitle", {
+                        defaultValue: "Custom providers & model overrides",
+                    }), lazy: true, children: _jsxs("div", { className: "flex flex-col gap-3", children: [keyEntries.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: keyEntries.map(renderChip) })) : null, selectedPanelProvider ? (_jsx(ApiKeyPanel, { selectedProvider: selectedPanelProvider, panelLabel: apiKeyPanelLabel, visibleProviderPanelId: visibleProviderPanelId, resolvedSelectedId: resolvedSelectedId, cloudCallsDisabled: selection.cloudCallsDisabled, selectedPanelAccountProvider: selectedPanelAccountProvider, onSwitchProvider: onSwitchProvider, pluginSaving: pluginSaving, pluginSaveSuccess: pluginSaveSuccess, handlePluginConfigSave: handlePluginConfigSave, loadPlugins: loadPlugins })) : null, _jsx(ProvidersList, {}), _jsx(RoutingMatrix, {})] }) }) })] }));
 }
 /**
  * The provider currently routing this agent's intelligence, surfaced as a single
- * anchored summary above the chip cloud so "what's powering me right now" is
- * answered without scanning every chip for the filled/active state.
+ * anchored row above the chip cloud so "what's powering me right now" is answered
+ * without scanning every chip for the filled/active state.
  */
 function ActiveProviderSummary({ entry, t, }) {
     const Icon = entry.icon;
-    return (_jsxs("div", { className: "mb-3 flex items-center gap-3 rounded-lg border border-accent/30 bg-accent/8 px-3 py-2.5", children: [_jsx("span", { className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent/12 text-accent ring-1 ring-accent/20", children: _jsx(Icon, { className: "h-[18px] w-[18px]", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-accent", children: t("providerswitcher.activeProvider", { defaultValue: "Active" }) }), _jsx("p", { className: "truncate text-sm font-medium leading-5 text-txt-strong", children: entry.label })] }), _jsx("span", { className: "shrink-0 text-xs text-muted", children: entry.status.label })] }));
+    return (_jsx(SettingsRow, { label: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-[18px] w-[18px] shrink-0 text-accent", "aria-hidden": true }), entry.label] }), control: _jsx("span", { className: "text-xs text-accent", children: t("providerswitcher.activeProvider", { defaultValue: "Active" }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"RemotePluginHostSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/RemotePluginHostSection.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAqTH,wBAAgB,uBAAuB,4CA8TtC"}
+{"version":3,"file":"RemotePluginHostSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/RemotePluginHostSection.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAqTH,wBAAgB,uBAAuB,4CAiRtC"}