@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.1

package/dist/components/settings/PolicyControlsView.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { asRecord as asSharedRecord } from "@elizaos/shared";
+import { Button, ConfirmDialog, Input, Label, Slider, Spinner, Switch, } from "@elizaos/ui";
+import { AlertTriangle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.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";
+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 [policies, setPolicies] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    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 : "Failed to load policies");
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }
+        void load();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    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);
+        setSaveSuccess(false);
+    }, []);
+    const togglePolicy = useCallback((type, enabled, defaultConfig) => {
+        const existing = findPolicy(policies, type);
+        if (!enabled && existing?.enabled) {
+            setConfirmMessage("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]);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            await client.setStewardPolicies(policies);
+            setSaveSuccess(true);
+            setDirty(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to save policies");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [policies]);
+    // 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]);
+    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: "Loading\u2026" })] }));
+    }
+    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: "Steward Not Connected" }), _jsx("p", { className: "text-xs text-muted max-w-sm", children: "Connect your Steward instance to manage wallet policies." })] }));
+    }
+    return (_jsxs("div", { className: "space-y-0 divide-y divide-border/20", children: [error && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 mb-4", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-danger shrink-0" }), _jsx("span", { className: "text-xs text-danger", children: error })] })), _jsx(PolicyRow, { title: "Auto-Approve", desc: autoApprovePolicy?.enabled
+                    ? `Under $${autoApproveConfig.threshold ?? "5"}`
+                    : "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: "Threshold" }), _jsx(UsdField, { value: autoApproveConfig.threshold ?? "5", onChange: (v) => updatePolicy("auto-approve-threshold", {
+                                config: asRecord({ threshold: v }),
+                            }) })] }) }), _jsx(PolicyRow, { title: "Spending Limits", desc: spendingPolicy?.enabled
+                    ? `$${spendingConfig.maxPerTx}/tx · $${spendingConfig.maxPerDay}/day · $${spendingConfig.maxPerWeek}/wk`
+                    : "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, { label: "Per Tx", value: spendingConfig.maxPerTx, onChange: (v) => updatePolicy("spending-limit", {
+                                config: asRecord({ ...spendingConfig, maxPerTx: v }),
+                            }) }), _jsx(UsdFieldLabeled, { label: "Daily", value: spendingConfig.maxPerDay, onChange: (v) => updatePolicy("spending-limit", {
+                                config: asRecord({ ...spendingConfig, maxPerDay: v }),
+                            }) }), _jsx(UsdFieldLabeled, { label: "Weekly", value: spendingConfig.maxPerWeek, onChange: (v) => updatePolicy("spending-limit", {
+                                config: asRecord({ ...spendingConfig, maxPerWeek: v }),
+                            }) })] }) }), _jsx(PolicyRow, { title: "Rate Limits", desc: rateLimitPolicy?.enabled
+                    ? `${rateLimitConfig.maxTxPerHour}/hr · ${rateLimitConfig.maxTxPerDay}/day`
+                    : "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, { label: "Per Hour", value: rateLimitConfig.maxTxPerHour, min: 1, max: 100, onChange: (v) => updatePolicy("rate-limit", {
+                                config: asRecord({ ...rateLimitConfig, maxTxPerHour: v }),
+                            }) }), _jsx(SliderField, { label: "Per Day", value: rateLimitConfig.maxTxPerDay, min: 1, max: 500, onChange: (v) => updatePolicy("rate-limit", {
+                                config: asRecord({ ...rateLimitConfig, maxTxPerDay: v }),
+                            }) })] }) }), _jsx(PolicyRow, { title: "Address Controls", desc: addressPolicy?.enabled
+                    ? `${normalizedAddresses.length} ${addressConfig.mode === "whitelist" ? "allowed" : "blocked"}`
+                    : "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, { title: "Time Restrictions", desc: timeWindowPolicy?.enabled
+                    ? `${timeWindowConfig.allowedDays?.length ?? 0} days`
+                    : "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 pt-4 border-t-0", children: [_jsx("span", { className: "text-xs text-accent", children: "Unsaved changes" }), _jsx(Button, { 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: "Saving\u2026" })] })) : ("Save") })] })), saveSuccess && !dirty && (_jsx("div", { className: "pt-3 text-right border-t-0", children: _jsx("span", { className: "text-xs text-ok", children: "Saved" }) })), _jsx(ConfirmDialog, { open: confirmOpen, title: "Disable Policy", message: confirmMessage, confirmLabel: "Disable", cancelLabel: "Keep", variant: "warn", onConfirm: () => {
+                    confirmCallback?.();
+                    setConfirmOpen(false);
+                }, onCancel: () => setConfirmOpen(false) })] }));
+}
+/* ── Sub-components ──────────────────────────────────────────────────── */
+function PolicyRow({ title, desc, enabled, onToggle, children, }) {
+    return (_jsxs("div", { className: "py-3.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-txt", children: title }), _jsx("div", { className: "text-xs text-muted mt-0.5", children: desc })] }), _jsx(Switch, { checked: enabled, onCheckedChange: onToggle, "aria-label": title })] }), enabled && children && _jsx("div", { className: "mt-3", children: children })] }));
+}
+function UsdField({ value, onChange, }) {
+    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, { 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({ label, value, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs-tight text-muted", children: label }), _jsx(UsdField, { value: value, onChange: onChange })] }));
+}
+function SliderField({ label, value, min, max, onChange, }) {
+    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, { value: [value], min: min, max: max, step: 1, onValueChange: ([v]) => onChange(v) })] }));
+}
+function AddressSection({ config, addresses, onUpdate, }) {
+    const [newAddr, setNewAddr] = useState("");
+    const [addrError, setAddrError] = useState(null);
+    const handleAdd = () => {
+        const trimmed = newAddr.trim();
+        if (!trimmed)
+            return;
+        if (!isValidAddress(trimmed)) {
+            setAddrError("Invalid address (EVM 0x... or Solana base58)");
+            return;
+        }
+        if (config.addresses.some((entry) => approvedAddressValue(entry) === trimmed)) {
+            setAddrError("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, { variant: config.mode === "whitelist" ? "default" : "ghost", size: "sm", className: "text-xs-tight h-7", onClick: () => onUpdate({ ...config, mode: "whitelist" }), children: "Allowlist" }), _jsx(Button, { variant: config.mode === "blacklist" ? "default" : "ghost", size: "sm", className: "text-xs-tight h-7", onClick: () => onUpdate({ ...config, mode: "blacklist" }), children: "Blocklist" })] }), addresses.length > 0 && (_jsx("div", { className: "space-y-1", children: addresses.map((addr) => {
+                    const chain = chainTypeLabel(addr);
+                    return (_jsxs("div", { className: "flex items-center justify-between group text-xs-tight font-mono text-muted py-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 truncate", children: [_jsx("span", { className: "truncate", children: addr }), chain && (_jsx("span", { className: "text-3xs text-muted bg-muted/10 px-1.5 py-0.5 rounded shrink-0", children: chain }))] }), _jsx("button", { type: "button", className: "text-danger opacity-0 group-hover:opacity-100 text-2xs ml-2", onClick: () => handleRemove(addr), children: "remove" })] }, addr));
+                }) })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { type: "text", value: newAddr, onChange: (e) => {
+                            setNewAddr(e.target.value);
+                            setAddrError(null);
+                        }, onKeyDown: (e) => e.key === "Enter" && handleAdd(), placeholder: "EVM or Solana address", className: "h-8 text-xs font-mono flex-1" }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-xs h-8", onClick: handleAdd, children: "Add" })] }), addrError && (_jsx("div", { className: "text-xs-tight text-danger", children: addrError }))] }));
+}
+function TimeSection({ config, onUpdate, }) {
+    const hours = config.allowedHours?.[0] ?? { start: 9, end: 17 };
+    const days = config.allowedDays ?? [1, 2, 3, 4, 5];
+    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-tight text-muted", children: "From" }), _jsx("select", { value: hours.start, onChange: (e) => onUpdate({
+                                    ...config,
+                                    allowedHours: [
+                                        { start: Number(e.target.value), end: hours.end },
+                                    ],
+                                }), className: "h-8 rounded-md border border-input 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-tight text-muted", children: "To" }), _jsx("select", { value: hours.end, onChange: (e) => onUpdate({
+                                    ...config,
+                                    allowedHours: [
+                                        { start: hours.start, end: Number(e.target.value) },
+                                    ],
+                                }), className: "h-8 rounded-md border border-input 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("button", { type: "button", className: `h-7 w-9 rounded text-2xs font-medium transition-colors ${days.includes(i)
+                        ? "bg-accent/20 text-accent border border-accent/30"
+                        : "bg-bg text-muted border border-border/30 hover:border-border/50"}`, onClick: () => {
+                        const next = days.includes(i)
+                            ? days.filter((d) => d !== i)
+                            : [...days, i].sort();
+                        onUpdate({ ...config, allowedDays: next });
+                    }, children: name }, name))) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs-tight text-muted", children: "Timezone" }), _jsx("select", { value: config.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone, onChange: (e) => onUpdate({ ...config, timezone: e.target.value }), className: "h-8 rounded-md border border-input bg-bg px-2 text-xs text-txt w-full", children: TIMEZONES.map((tz) => (_jsx("option", { value: tz, children: tz }, tz))) })] })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type PluginParamDef } from "../../api";
+import type { ConfigUiHint } from "../../types";
+interface PluginInfo {
+    id: string;
+    name: string;
+    category: string;
+    enabled: boolean;
+    configured: boolean;
+    parameters: PluginParamDef[];
+    configUiHints?: Record<string, ConfigUiHint>;
+}
+interface ProviderSwitcherProps {
+    elizaCloudConnected?: boolean;
+    plugins?: PluginInfo[];
+    pluginSaving?: Set<string>;
+    pluginSaveSuccess?: Set<string>;
+    loadPlugins?: () => Promise<void>;
+    handlePluginConfigSave?: (pluginId: string, values: Record<string, unknown>) => void | Promise<void>;
+}
+export declare function ProviderSwitcher(props?: ProviderSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProviderSwitcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderSwitcher.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/ProviderSwitcher.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAgBhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2BhD,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;AASD,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;AAwKD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,2CAqhCjE"}