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

package/components/settings/PolicyControlsView.js

@@ -0,0 +1,453 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { asRecord as asSharedRecord } from "@elizaos/shared";
+import { AlertTriangle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { client } from "../../api/index.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { approvedAddressValue, chainTypeLabel, DAY_NAMES, DEFAULT_APPROVED_ADDRESSES, DEFAULT_AUTO_APPROVE, DEFAULT_RATE_LIMIT, DEFAULT_SPENDING, DEFAULT_TIME_WINDOW, findPolicy, getPolicyConfig, isValidAddress, TIMEZONES, } from "../policy-controls/index.js";
+import { StewardLogo } from "../steward/injected.js";
+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 { Slider } from "../ui/slider.js";
+import { Spinner } from "../ui/spinner.js";
+import { Switch } from "../ui/switch.js";
+import { useSettingsSave } from "./settings-control-primitives.hooks.js";
+import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+const asRecord = (value) => asSharedRecord(value) ?? {};
+/** Static hour options to avoid array-index-as-key lint issues. */
+const HOUR_FROM_OPTIONS = Array.from({ length: 24 }, (_, i) => ({
+    key: `from-${i}`,
+    value: i,
+    label: `${String(i).padStart(2, "0")}:00`,
+}));
+const HOUR_TO_OPTIONS = Array.from({ length: 24 }, (_, i) => ({
+    key: `to-${i + 1}`,
+    value: i + 1,
+    label: `${String(i + 1).padStart(2, "0")}:00`,
+}));
+export function PolicyControlsView() {
+    const { t } = useTranslation();
+    const [policies, setPolicies] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [stewardConnected, setStewardConnected] = useState(false);
+    const [dirty, setDirty] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [confirmMessage, setConfirmMessage] = useState("");
+    const [confirmCallback, setConfirmCallback] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        async function load() {
+            try {
+                const status = await client.getStewardStatus();
+                if (cancelled)
+                    return;
+                setStewardConnected(status.connected);
+                if (!status.connected) {
+                    setLoading(false);
+                    return;
+                }
+                const result = await client.getStewardPolicies();
+                if (cancelled)
+                    return;
+                setPolicies(result);
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setError(err instanceof Error
+                    ? err.message
+                    : t("policycontrols.error.loadFailed", {
+                        defaultValue: "Failed to load policies",
+                    }));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }
+        void load();
+        return () => {
+            cancelled = true;
+        };
+    }, [t]);
+    const performSave = useCallback(async () => {
+        setError(null);
+        try {
+            await client.setStewardPolicies(policies);
+            setDirty(false);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("policycontrols.error.saveFailed", {
+                    defaultValue: "Failed to save policies",
+                }));
+            throw err;
+        }
+    }, [policies, t]);
+    const { saving, saveSuccess, handleSave, resetStatus: resetSaveStatus, } = useSettingsSave({
+        onSave: performSave,
+        errorFallback: t("policycontrols.error.saveFailed", {
+            defaultValue: "Failed to save policies",
+        }),
+    });
+    const getPolicy = useCallback((type) => findPolicy(policies, type), [policies]);
+    const updatePolicy = useCallback((type, updates) => {
+        setPolicies((prev) => {
+            const existing = prev.find((p) => p.type === type);
+            if (existing) {
+                return prev.map((p) => (p.type === type ? { ...p, ...updates } : p));
+            }
+            return [
+                ...prev,
+                {
+                    id: `${type}-${Date.now()}`,
+                    type,
+                    enabled: true,
+                    config: {},
+                    ...updates,
+                },
+            ];
+        });
+        setDirty(true);
+        resetSaveStatus();
+    }, [resetSaveStatus]);
+    const togglePolicy = useCallback((type, enabled, defaultConfig) => {
+        const existing = findPolicy(policies, type);
+        if (!enabled && existing?.enabled) {
+            setConfirmMessage(t("policycontrols.confirm.message", {
+                defaultValue: "Disabling this removes a safety guardrail. Are you sure?",
+            }));
+            setConfirmCallback(() => () => updatePolicy(type, { enabled: false }));
+            setConfirmOpen(true);
+            return;
+        }
+        updatePolicy(type, {
+            enabled,
+            config: existing?.config ?? defaultConfig,
+        });
+    }, [policies, updatePolicy, t]);
+    // Extract configs (must be before early returns so hooks are unconditional)
+    const autoApprovePolicy = getPolicy("auto-approve-threshold");
+    const autoApproveConfig = getPolicyConfig(autoApprovePolicy, DEFAULT_AUTO_APPROVE);
+    const spendingPolicy = getPolicy("spending-limit");
+    const spendingConfig = getPolicyConfig(spendingPolicy, DEFAULT_SPENDING);
+    const addressPolicy = getPolicy("approved-addresses");
+    const addressConfig = getPolicyConfig(addressPolicy, DEFAULT_APPROVED_ADDRESSES);
+    const rateLimitPolicy = getPolicy("rate-limit");
+    const rateLimitConfig = getPolicyConfig(rateLimitPolicy, DEFAULT_RATE_LIMIT);
+    const timeWindowPolicy = getPolicy("time-window");
+    const timeWindowConfig = getPolicyConfig(timeWindowPolicy, DEFAULT_TIME_WINDOW);
+    const normalizedAddresses = useMemo(() => (addressConfig.addresses ?? []).map((addr) => approvedAddressValue(addr)), [addressConfig.addresses]);
+    const { ref: saveRef, agentProps: saveAgentProps } = useAgentElement({
+        id: "policy-save",
+        role: "button",
+        label: "Save policies",
+        group: "policy-controls",
+        description: "Persist wallet policy changes",
+        onActivate: () => void handleSave(),
+    });
+    if (loading) {
+        return (_jsxs("div", { className: "flex items-center justify-center py-12", children: [_jsx(Spinner, { size: 24 }), _jsx("span", { className: "ml-3 text-sm text-muted", children: t("policycontrols.loading", { defaultValue: "Loading…" }) })] }));
+    }
+    if (!stewardConnected) {
+        return (_jsxs("div", { className: "flex flex-col items-center gap-4 py-8 text-center", children: [_jsx(StewardLogo, { size: 48, className: "opacity-30" }), _jsx("p", { className: "text-sm font-semibold text-txt", children: t("policycontrols.notConnected.title", {
+                        defaultValue: "Steward Not Connected",
+                    }) }), _jsx("p", { className: "text-xs text-muted max-w-sm", children: t("policycontrols.notConnected.description", {
+                        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", {
+                            defaultValue: "Auto-Approve",
+                        }), desc: autoApprovePolicy?.enabled
+                            ? t("policycontrols.autoApprove.desc", {
+                                threshold: autoApproveConfig.threshold ?? "5",
+                                // biome-ignore lint/suspicious/noTemplateCurlyInString: i18n currency format ($ + {{var}}), not a JS template literal
+                                defaultValue: "Under ${{threshold}}",
+                            })
+                            : t("policycontrols.off", { defaultValue: "Off" }), enabled: autoApprovePolicy?.enabled ?? false, onToggle: (v) => togglePolicy("auto-approve-threshold", v, asRecord(DEFAULT_AUTO_APPROVE)), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-xs text-muted whitespace-nowrap", children: t("policycontrols.threshold", { defaultValue: "Threshold" }) }), _jsx(UsdField, { agentId: "auto-approve-threshold", agentLabel: t("policycontrols.threshold", {
+                                        defaultValue: "Threshold",
+                                    }), value: autoApproveConfig.threshold ?? "5", onChange: (v) => updatePolicy("auto-approve-threshold", {
+                                        config: asRecord({ threshold: v }),
+                                    }) })] }) }), _jsx(PolicyRow, { agentId: "spending-limit", title: t("policycontrols.spending.title", {
+                            defaultValue: "Spending Limits",
+                        }), desc: spendingPolicy?.enabled
+                            ? t("policycontrols.spending.desc", {
+                                perTx: spendingConfig.maxPerTx,
+                                perDay: spendingConfig.maxPerDay,
+                                perWeek: spendingConfig.maxPerWeek,
+                                defaultValue: 
+                                // biome-ignore lint/suspicious/noTemplateCurlyInString: i18n currency format ($ + {{var}}), not a JS template literal
+                                "${{perTx}}/tx · ${{perDay}}/day · ${{perWeek}}/wk",
+                            })
+                            : t("policycontrols.off", { defaultValue: "Off" }), enabled: spendingPolicy?.enabled ?? false, onToggle: (v) => togglePolicy("spending-limit", v, asRecord(DEFAULT_SPENDING)), children: _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsx(UsdFieldLabeled, { agentId: "spending-per-tx", label: t("policycontrols.spending.perTx", {
+                                        defaultValue: "Per Tx",
+                                    }), value: spendingConfig.maxPerTx, onChange: (v) => updatePolicy("spending-limit", {
+                                        config: asRecord({ ...spendingConfig, maxPerTx: v }),
+                                    }) }), _jsx(UsdFieldLabeled, { agentId: "spending-daily", label: t("policycontrols.spending.daily", {
+                                        defaultValue: "Daily",
+                                    }), value: spendingConfig.maxPerDay, onChange: (v) => updatePolicy("spending-limit", {
+                                        config: asRecord({ ...spendingConfig, maxPerDay: v }),
+                                    }) }), _jsx(UsdFieldLabeled, { agentId: "spending-weekly", label: t("policycontrols.spending.weekly", {
+                                        defaultValue: "Weekly",
+                                    }), value: spendingConfig.maxPerWeek, onChange: (v) => updatePolicy("spending-limit", {
+                                        config: asRecord({ ...spendingConfig, maxPerWeek: v }),
+                                    }) })] }) }), _jsx(PolicyRow, { agentId: "rate-limit", title: t("policycontrols.rateLimit.title", {
+                            defaultValue: "Rate Limits",
+                        }), desc: rateLimitPolicy?.enabled
+                            ? t("policycontrols.rateLimit.desc", {
+                                perHour: rateLimitConfig.maxTxPerHour,
+                                perDay: rateLimitConfig.maxTxPerDay,
+                                defaultValue: "{{perHour}}/hr · {{perDay}}/day",
+                            })
+                            : t("policycontrols.off", { defaultValue: "Off" }), enabled: rateLimitPolicy?.enabled ?? false, onToggle: (v) => togglePolicy("rate-limit", v, asRecord(DEFAULT_RATE_LIMIT)), children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(SliderField, { agentId: "rate-limit-per-hour", label: t("policycontrols.rateLimit.perHour", {
+                                        defaultValue: "Per Hour",
+                                    }), value: rateLimitConfig.maxTxPerHour, min: 1, max: 100, onChange: (v) => updatePolicy("rate-limit", {
+                                        config: asRecord({ ...rateLimitConfig, maxTxPerHour: v }),
+                                    }) }), _jsx(SliderField, { agentId: "rate-limit-per-day", label: t("policycontrols.rateLimit.perDay", {
+                                        defaultValue: "Per Day",
+                                    }), value: rateLimitConfig.maxTxPerDay, min: 1, max: 500, onChange: (v) => updatePolicy("rate-limit", {
+                                        config: asRecord({ ...rateLimitConfig, maxTxPerDay: v }),
+                                    }) })] }) }), _jsx(PolicyRow, { agentId: "approved-addresses", title: t("policycontrols.address.title", {
+                            defaultValue: "Address Controls",
+                        }), desc: addressPolicy?.enabled
+                            ? addressConfig.mode === "whitelist"
+                                ? t("policycontrols.address.descAllowed", {
+                                    count: normalizedAddresses.length,
+                                    defaultValue: "{{count}} allowed",
+                                })
+                                : t("policycontrols.address.descBlocked", {
+                                    count: normalizedAddresses.length,
+                                    defaultValue: "{{count}} blocked",
+                                })
+                            : t("policycontrols.off", { defaultValue: "Off" }), enabled: addressPolicy?.enabled ?? false, onToggle: (v) => togglePolicy("approved-addresses", v, asRecord(DEFAULT_APPROVED_ADDRESSES)), children: _jsx(AddressSection, { config: addressConfig, addresses: normalizedAddresses, onUpdate: (cfg) => updatePolicy("approved-addresses", { config: asRecord(cfg) }) }) }), _jsx(PolicyRow, { agentId: "time-window", title: t("policycontrols.time.title", {
+                            defaultValue: "Time Restrictions",
+                        }), desc: timeWindowPolicy?.enabled
+                            ? t("policycontrols.time.desc", {
+                                count: timeWindowConfig.allowedDays?.length ?? 0,
+                                defaultValue: "{{count}} days",
+                            })
+                            : t("policycontrols.off", { defaultValue: "Off" }), enabled: timeWindowPolicy?.enabled ?? false, onToggle: (v) => togglePolicy("time-window", v, asRecord(DEFAULT_TIME_WINDOW)), children: _jsx(TimeSection, { config: timeWindowConfig, onUpdate: (cfg) => updatePolicy("time-window", { config: asRecord(cfg) }) }) })] }), dirty && (_jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsx("span", { className: "text-xs text-accent", children: t("policycontrols.unsavedChanges", {
+                            defaultValue: "Unsaved changes",
+                        }) }), _jsx(Button, { ref: saveRef, ...saveAgentProps, variant: "default", size: "sm", className: "text-xs", onClick: () => void handleSave(), disabled: saving, children: saving ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: 14 }), _jsx("span", { className: "ml-1.5", children: t("policycontrols.saving", { defaultValue: "Saving…" }) })] })) : (t("policycontrols.save", { defaultValue: "Save" })) })] })), saveSuccess && !dirty && (_jsx("div", { className: "text-right", children: _jsx("span", { className: "text-xs text-ok", children: t("policycontrols.saved", { defaultValue: "Saved" }) }) })), _jsx(ConfirmDialog, { open: confirmOpen, title: t("policycontrols.confirm.title", {
+                    defaultValue: "Disable Policy",
+                }), message: confirmMessage, confirmLabel: t("policycontrols.confirm.confirmLabel", {
+                    defaultValue: "Disable",
+                }), cancelLabel: t("policycontrols.confirm.cancelLabel", {
+                    defaultValue: "Keep",
+                }), variant: "warn", onConfirm: () => {
+                    confirmCallback?.();
+                    setConfirmOpen(false);
+                }, onCancel: () => setConfirmOpen(false) })] }));
+}
+/* ── Sub-components ──────────────────────────────────────────────────── */
+function PolicyRow({ agentId, title, desc, enabled, onToggle, children, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `policy-toggle-${agentId}`,
+        role: "toggle",
+        label: `Toggle ${title}`,
+        group: "policy-controls",
+        status: enabled ? "active" : "inactive",
+        onActivate: () => onToggle(!enabled),
+    });
+    return (_jsx(SettingsRow, { label: title, description: desc, control: _jsx(Switch, { ref: ref, ...agentProps, checked: enabled, onCheckedChange: onToggle, "aria-label": title }), children: enabled && children ? children : null }));
+}
+function UsdField({ agentId, agentLabel, value, onChange, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `policy-usd-${agentId}`,
+        role: "number-input",
+        label: agentLabel,
+        group: "policy-controls",
+        getValue: () => value,
+        onFill: (v) => {
+            if (/^(?:\d+(?:\.\d*)?|\.\d*)?$/.test(v))
+                onChange(v.slice(0, 32));
+        },
+    });
+    return (_jsxs("div", { className: "relative w-28", children: [_jsx("span", { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-2xs text-muted pointer-events-none", children: "$" }), _jsx(Input, { ref: ref, ...agentProps, type: "text", inputMode: "decimal", value: value, onChange: (e) => {
+                    const v = e.target.value.slice(0, 32);
+                    if (/^(?:\d+(?:\.\d*)?|\.\d*)?$/.test(v))
+                        onChange(v);
+                }, className: "h-8 text-xs pl-6 tabular-nums", placeholder: "0" })] }));
+}
+function UsdFieldLabeled({ agentId, label, value, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted", children: label }), _jsx(UsdField, { agentId: agentId, agentLabel: label, value: value, onChange: onChange })] }));
+}
+function SliderField({ agentId, label, value, min, max, onChange, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `policy-slider-${agentId}`,
+        role: "slider",
+        label,
+        group: "policy-controls",
+        getValue: () => value,
+        onFill: (v) => {
+            const n = Number(v);
+            if (Number.isFinite(n))
+                onChange(Math.min(max, Math.max(min, n)));
+        },
+    });
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Label, { className: "text-xs text-muted", children: label }), _jsx("span", { className: "text-xs font-medium text-txt tabular-nums", children: value })] }), _jsx(Slider, { ref: ref, ...agentProps, value: [value], min: min, max: max, step: 1, onValueChange: ([v]) => onChange(v) })] }));
+}
+function AddressRow({ address, chain, onRemove, }) {
+    const { t } = useTranslation();
+    const removeControl = useAgentElement({
+        id: `policy-address-remove-${address}`,
+        role: "button",
+        label: t("policycontrols.address.remove", { defaultValue: "remove" }),
+        group: "policy-addresses",
+        description: `Remove ${address} from the address policy list`,
+        onActivate: onRemove,
+    });
+    return (_jsxs("div", { className: "flex items-center justify-between group text-xs font-mono text-muted py-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 truncate", children: [_jsx("span", { className: "truncate", children: address }), chain && (_jsx("span", { className: "text-xs text-muted bg-muted/10 px-1.5 py-0.5 rounded-sm shrink-0", children: chain }))] }), _jsx("button", { ref: removeControl.ref, type: "button", className: "text-danger opacity-0 group-hover:opacity-100 text-xs ml-2", onClick: onRemove, ...removeControl.agentProps, children: t("policycontrols.address.remove", { defaultValue: "remove" }) })] }));
+}
+function AddressSection({ config, addresses, onUpdate, }) {
+    const { t } = useTranslation();
+    const [newAddr, setNewAddr] = useState("");
+    const [addrError, setAddrError] = useState(null);
+    const { ref: allowlistRef, agentProps: allowlistAgentProps } = useAgentElement({
+        id: "policy-address-allowlist",
+        role: "button",
+        label: "Address allowlist mode",
+        group: "policy-address",
+        status: config.mode === "whitelist" ? "active" : "inactive",
+        onActivate: () => onUpdate({ ...config, mode: "whitelist" }),
+    });
+    const { ref: blocklistRef, agentProps: blocklistAgentProps } = useAgentElement({
+        id: "policy-address-blocklist",
+        role: "button",
+        label: "Address blocklist mode",
+        group: "policy-address",
+        status: config.mode === "blacklist" ? "active" : "inactive",
+        onActivate: () => onUpdate({ ...config, mode: "blacklist" }),
+    });
+    const { ref: newAddrRef, agentProps: newAddrAgentProps } = useAgentElement({
+        id: "policy-address-input",
+        role: "text-input",
+        label: "New policy address",
+        group: "policy-address",
+        getValue: () => newAddr,
+        onFill: (v) => {
+            setNewAddr(v);
+            setAddrError(null);
+        },
+    });
+    const { ref: addRef, agentProps: addAgentProps } = useAgentElement({
+        id: "policy-address-add",
+        role: "button",
+        label: "Add policy address",
+        group: "policy-address",
+    });
+    const handleAdd = () => {
+        const trimmed = newAddr.trim();
+        if (!trimmed)
+            return;
+        if (!isValidAddress(trimmed)) {
+            setAddrError(t("policycontrols.address.invalid", {
+                defaultValue: "Invalid address (EVM 0x... or Solana base58)",
+            }));
+            return;
+        }
+        if (config.addresses.some((entry) => approvedAddressValue(entry) === trimmed)) {
+            setAddrError(t("policycontrols.address.duplicate", {
+                defaultValue: "Already in list",
+            }));
+            return;
+        }
+        onUpdate({ ...config, addresses: [...config.addresses, trimmed] });
+        setNewAddr("");
+        setAddrError(null);
+    };
+    const handleRemove = (addr) => {
+        const labels = { ...config.labels };
+        delete labels[addr];
+        onUpdate({
+            ...config,
+            addresses: config.addresses.filter((entry) => approvedAddressValue(entry) !== addr),
+            labels,
+        });
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { ref: allowlistRef, ...allowlistAgentProps, variant: config.mode === "whitelist" ? "default" : "ghost", size: "sm", className: "text-xs h-7", onClick: () => onUpdate({ ...config, mode: "whitelist" }), children: t("policycontrols.address.allowlist", {
+                            defaultValue: "Allowlist",
+                        }) }), _jsx(Button, { ref: blocklistRef, ...blocklistAgentProps, variant: config.mode === "blacklist" ? "default" : "ghost", size: "sm", className: "text-xs h-7", onClick: () => onUpdate({ ...config, mode: "blacklist" }), children: t("policycontrols.address.blocklist", {
+                            defaultValue: "Blocklist",
+                        }) })] }), addresses.length > 0 && (_jsx("div", { className: "space-y-1", children: addresses.map((addr) => (_jsx(AddressRow, { address: addr, chain: chainTypeLabel(addr), onRemove: () => handleRemove(addr) }, addr))) })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { ref: newAddrRef, ...newAddrAgentProps, type: "text", value: newAddr, onChange: (e) => {
+                            setNewAddr(e.target.value);
+                            setAddrError(null);
+                        }, onKeyDown: (e) => e.key === "Enter" && handleAdd(), placeholder: t("policycontrols.address.placeholder", {
+                            defaultValue: "EVM or Solana address",
+                        }), className: "h-8 text-xs font-mono flex-1" }), _jsx(Button, { ref: addRef, ...addAgentProps, variant: "ghost", size: "sm", className: "text-xs h-8", onClick: handleAdd, children: t("policycontrols.address.add", { defaultValue: "Add" }) })] }), addrError && _jsx("div", { className: "text-xs text-danger", children: addrError })] }));
+}
+function TimeSection({ config, onUpdate, }) {
+    const { t } = useTranslation();
+    const hours = config.allowedHours?.[0] ?? { start: 9, end: 17 };
+    const days = config.allowedDays ?? [1, 2, 3, 4, 5];
+    const timezone = config.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const { ref: fromRef, agentProps: fromAgentProps } = useAgentElement({
+        id: "policy-time-from",
+        role: "select",
+        label: t("policycontrols.time.from", { defaultValue: "From" }),
+        group: "policy-time",
+        options: HOUR_FROM_OPTIONS.map((h) => String(h.value)),
+        getValue: () => String(hours.start),
+        onFill: (v) => onUpdate({
+            ...config,
+            allowedHours: [{ start: Number(v), end: hours.end }],
+        }),
+    });
+    const { ref: toRef, agentProps: toAgentProps } = useAgentElement({
+        id: "policy-time-to",
+        role: "select",
+        label: t("policycontrols.time.to", { defaultValue: "To" }),
+        group: "policy-time",
+        options: HOUR_TO_OPTIONS.map((h) => String(h.value)),
+        getValue: () => String(hours.end),
+        onFill: (v) => onUpdate({
+            ...config,
+            allowedHours: [{ start: hours.start, end: Number(v) }],
+        }),
+    });
+    const { ref: tzRef, agentProps: tzAgentProps } = useAgentElement({
+        id: "policy-time-timezone",
+        role: "select",
+        label: t("policycontrols.time.timezone", { defaultValue: "Timezone" }),
+        group: "policy-time",
+        options: TIMEZONES.map((tz) => String(tz)),
+        getValue: () => timezone,
+        onFill: (v) => onUpdate({ ...config, timezone: v }),
+    });
+    const toggleDay = (i) => {
+        const next = days.includes(i)
+            ? days.filter((d) => d !== i)
+            : [...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({
+                                    ...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({
+                                    ...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))) })] })] }));
+}
+function DayToggle({ name, index, active, onToggle, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `policy-day-${index}`,
+        role: "toggle",
+        label: `Allow ${name}`,
+        group: "policy-time",
+        status: active ? "on" : "off",
+        getValue: () => active,
+        onActivate: () => onToggle(index),
+    });
+    return (_jsx("button", { ref: ref, ...agentProps, type: "button", className: `h-7 w-9 rounded-sm text-xs font-medium transition-colors ${active
+            ? "bg-accent/20 text-accent border border-accent/30"
+            : "bg-bg text-muted border border-border/30 hover:border-border/50"}`, onClick: () => onToggle(index), children: name }));
+}

package/components/settings/ProviderCard.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from "react";
+export type ProviderStatusTone = "ok" | "warn" | "muted";
+export type ProviderCategory = "cloud" | "subscription" | "key" | "local";
+export interface ProviderStatus {
+    tone: ProviderStatusTone;
+    label: string;
+}
+export interface ProviderCardProps {
+    id: string;
+    icon: ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    label: string;
+    category: ProviderCategory;
+    status: ProviderStatus;
+    current: boolean;
+    selected: boolean;
+    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.
+ */
+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

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

package/components/settings/ProviderCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2 } from "lucide-react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { cn } from "../../lib/utils.js";
+const STATUS_DOT_CLASSES = {
+    ok: "bg-ok",
+    warn: "bg-warn",
+    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.
+ */
+export function ProviderCard({ id, icon: Icon, label, status, current, selected, onSelect, }) {
+    const stateLabel = current ? "Active" : status.label;
+    const { ref, agentProps } = useAgentElement({
+        id: `provider-${id}`,
+        role: "card",
+        label,
+        group: "provider-cards",
+        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
+            ? "border-accent/50 bg-accent/12 text-accent"
+            : current
+                ? "border-accent/40 bg-accent/8 text-txt-strong hover:bg-accent/12"
+                : "border-border bg-card text-txt hover:bg-surface"), children: [_jsx(Icon, { className: cn("h-4 w-4 shrink-0", selected ? "text-accent" : current ? "text-accent" : "text-muted"), "aria-hidden": true }), _jsx("span", { className: "truncate font-medium", children: label }), current ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-accent", "aria-hidden": true })) : (_jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", STATUS_DOT_CLASSES[status.tone]), "aria-hidden": true }))] }));
+}

package/components/settings/ProviderPanels.d.ts

@@ -0,0 +1,71 @@
+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";
+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;
+    onSelectLocalOnly: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export interface CloudPanelProps {
+    cloudCallsDisabled: boolean;
+    isCloudSelected: boolean;
+    routingModeSaving: boolean;
+    onSelectCloud: () => void;
+    elizaCloudConnected: boolean;
+    largeModelOptions: ModelOption[];
+    cloudModelSchema: CloudModelSchema | null;
+    modelValues: {
+        values: Record<string, unknown>;
+        setKeys: Set<string>;
+    };
+    currentLargeModel: string;
+    modelSaving: boolean;
+    modelSaveSuccess: boolean;
+    onModelFieldChange: (key: string, value: unknown) => void;
+}
+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;
+    subscriptionStatus: SubscriptionProviderStatus[];
+    anthropicConnected: boolean;
+    setAnthropicConnected: Dispatch<SetStateAction<boolean>>;
+    anthropicCliDetected: boolean;
+    openaiConnected: boolean;
+    setOpenaiConnected: Dispatch<SetStateAction<boolean>>;
+    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 interface ApiKeyPanelProps {
+    selectedProvider: PluginInfo;
+    panelLabel: string;
+    visibleProviderPanelId: string;
+    resolvedSelectedId: string | null;
+    cloudCallsDisabled: boolean;
+    selectedPanelAccountProvider: LinkedAccountProviderId | null;
+    onSwitchProvider: (id: string) => void;
+    pluginSaving: Set<string>;
+    pluginSaveSuccess: Set<string>;
+    handlePluginConfigSave: (pluginId: string, values: Record<string, string>) => void;
+    loadPlugins: () => Promise<void>;
+}
+export declare function ApiKeyPanel({ selectedProvider, panelLabel, visibleProviderPanelId, resolvedSelectedId, cloudCallsDisabled, selectedPanelAccountProvider, onSwitchProvider, pluginSaving, pluginSaveSuccess, handlePluginConfigSave, loadPlugins, }: ApiKeyPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProviderPanels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderPanels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderPanels.tsx"],"names":[],"mappings":"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"}