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

package/components/pages/SecretsView.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ContentLayout, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, } from "@elizaos/ui";
+import { ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+/* ── Constants ──────────────────────────────────────────────────────── */
+const STORAGE_KEY = "eliza:secrets-vault-keys";
+const CATEGORY_ORDER = [
+    "ai-provider",
+    "blockchain",
+    "connector",
+    "auth",
+    "other",
+];
+const CATEGORY_LABELS = {
+    "ai-provider": "AI Providers",
+    blockchain: "Blockchain",
+    connector: "Connectors",
+    auth: "Authentication",
+    other: "Other",
+};
+const fallbackTranslate = (key, vars) => typeof vars?.defaultValue === "string" ? vars.defaultValue : key;
+function groupSecretsByCategory(secrets) {
+    const grouped = new Map();
+    for (const secret of secrets) {
+        const existing = grouped.get(secret.category);
+        if (existing) {
+            existing.push(secret);
+        }
+        else {
+            grouped.set(secret.category, [secret]);
+        }
+    }
+    return CATEGORY_ORDER.filter((category) => grouped.has(category)).map((category) => ({
+        category,
+        label: CATEGORY_LABELS[category],
+        secrets: grouped.get(category) ?? [],
+    }));
+}
+/* ── Persistence ────────────────────────────────────────────────────── */
+function loadPinnedKeys() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw)
+            return new Set(JSON.parse(raw));
+    }
+    catch (err) {
+        console.warn("[SecretsView] Failed to load pinned keys from localStorage:", err);
+    }
+    return new Set();
+}
+function savePinnedKeys(keys) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify([...keys]));
+    }
+    catch (err) {
+        console.warn("[SecretsView] Failed to save pinned keys to localStorage:", err);
+    }
+}
+/* ── Component ──────────────────────────────────────────────────────── */
+export function SecretsView({ contentHeader, inModal, } = {}) {
+    const app = useApp();
+    const t = app?.t ?? fallbackTranslate;
+    const [allSecrets, setAllSecrets] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [pinnedKeys, setPinnedKeys] = useState(loadPinnedKeys);
+    const [draft, setDraft] = useState({});
+    const [visible, setVisible] = useState(new Set());
+    const [saving, setSaving] = useState(false);
+    const [saveResult, setSaveResult] = useState(null);
+    const [collapsed, setCollapsed] = useState(new Set());
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickerSearch, setPickerSearch] = useState("");
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await client.getSecrets();
+            setAllSecrets(res.secrets);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load secrets");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    // Vault secrets = pinned by user OR already set in env
+    const vaultSecrets = useMemo(() => {
+        return allSecrets.filter((s) => pinnedKeys.has(s.key) || s.isSet);
+    }, [allSecrets, pinnedKeys]);
+    // Available secrets not in the vault (for the picker)
+    const availableSecrets = useMemo(() => {
+        const vaultKeys = new Set(vaultSecrets.map((s) => s.key));
+        const available = allSecrets.filter((s) => !vaultKeys.has(s.key));
+        if (!pickerSearch.trim())
+            return available;
+        const q = pickerSearch.toLowerCase();
+        return available.filter((s) => s.key.toLowerCase().includes(q) ||
+            s.description.toLowerCase().includes(q) ||
+            s.usedBy.some((u) => u.pluginName.toLowerCase().includes(q)));
+    }, [allSecrets, vaultSecrets, pickerSearch]);
+    // Group vault secrets by category
+    const grouped = useMemo(() => {
+        return groupSecretsByCategory(vaultSecrets);
+    }, [vaultSecrets]);
+    const dirtyKeys = useMemo(() => {
+        return Object.keys(draft).filter((k) => draft[k].trim() !== "");
+    }, [draft]);
+    const pinKey = (key) => {
+        setPinnedKeys((prev) => {
+            const next = new Set(prev);
+            next.add(key);
+            savePinnedKeys(next);
+            return next;
+        });
+    };
+    const unpinKey = (key) => {
+        setPinnedKeys((prev) => {
+            const next = new Set(prev);
+            next.delete(key);
+            savePinnedKeys(next);
+            return next;
+        });
+        setDraft((prev) => {
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    };
+    const handleSave = async () => {
+        if (dirtyKeys.length === 0)
+            return;
+        setSaving(true);
+        setSaveResult(null);
+        try {
+            const payload = {};
+            for (const key of dirtyKeys)
+                payload[key] = draft[key];
+            const res = await client.updateSecrets(payload);
+            setSaveResult({
+                ok: true,
+                message: `Updated ${res.updated.length} secret${res.updated.length !== 1 ? "s" : ""}`,
+            });
+            setDraft({});
+            await load();
+        }
+        catch (err) {
+            setSaveResult({
+                ok: false,
+                message: err instanceof Error ? err.message : "Save failed",
+            });
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const toggleCollapse = (cat) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(cat))
+                next.delete(cat);
+            else
+                next.add(cat);
+            return next;
+        });
+    };
+    const toggleVisible = (key) => {
+        setVisible((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    if (loading) {
+        return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsx("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm py-8 text-center text-sm italic text-muted", children: t("secretsview.LoadingSecrets") }) }));
+    }
+    if (error) {
+        return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm px-4 py-8 text-center", children: [_jsx("div", { className: "mb-2 text-sm text-danger", children: error }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 px-3 text-sm", onClick: load, children: t("common.retry") })] }) }));
+    }
+    return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsx("div", { className: "m-0 max-w-2xl text-sm leading-6 text-muted" }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 flex-shrink-0 px-3 text-sm shadow-sm", onClick: () => {
+                                setPickerOpen(true);
+                                setPickerSearch("");
+                            }, children: t("secretsview.AddSecret") })] }), pickerOpen && (_jsx(SecretPicker, { available: availableSecrets, search: pickerSearch, onSearchChange: setPickerSearch, onAdd: (key) => {
+                        pinKey(key);
+                    }, onClose: () => setPickerOpen(false) })), vaultSecrets.length === 0 && (_jsx("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm border-dashed px-4 py-8 text-center text-sm italic text-muted", children: t("secretsview.YourVaultIsEmpty") })), grouped.map(({ category, label, secrets: catSecrets }) => (_jsxs("section", { className: "space-y-3", children: [_jsxs(Button, { variant: "ghost", className: "mb-3 h-auto w-full items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left hover:border-border/50 hover:bg-bg-hover", onClick: () => toggleCollapse(category), "aria-expanded": !collapsed.has(category), children: [_jsx(ChevronDown, { className: "h-3 w-3 select-none text-muted transition-transform", style: {
+                                        transform: collapsed.has(category)
+                                            ? "rotate(-90deg)"
+                                            : "rotate(0deg)",
+                                    } }), _jsx("span", { className: "text-sm font-semibold text-txt", children: label }), _jsxs("span", { className: "text-xs text-muted", children: ["(", catSecrets.length, ")"] })] }), !collapsed.has(category) && (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: catSecrets.map((secret) => (_jsx(SecretCard, { secret: secret, draftValue: draft[secret.key] ?? "", isVisible: visible.has(secret.key), isPinned: pinnedKeys.has(secret.key), onToggleVisible: () => toggleVisible(secret.key), onDraftChange: (val) => setDraft((prev) => ({ ...prev, [secret.key]: val })), onRemove: () => unpinKey(secret.key) }, secret.key))) }))] }, category))), vaultSecrets.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm flex flex-col gap-3 border-border/60 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 px-4 text-sm font-medium shadow-sm transition-colors", disabled: dirtyKeys.length === 0 || saving, onClick: handleSave, children: saving
+                                ? t("common.saving", {
+                                    defaultValue: "Saving...",
+                                })
+                                : dirtyKeys.length > 0
+                                    ? `${t("common.save")} (${dirtyKeys.length})`
+                                    : t("common.save") }), saveResult && (_jsx("span", { className: `text-sm ${saveResult.ok ? "text-ok" : "text-danger"}`, children: saveResult.message }))] }))] }) }));
+}
+/* ── Secret Picker ──────────────────────────────────────────────────── */
+function SecretPicker({ available, search, onSearchChange, onAdd, onClose, }) {
+    const app = useApp();
+    const t = app?.t ?? fallbackTranslate;
+    // Group available by category
+    const grouped = useMemo(() => {
+        return groupSecretsByCategory(available);
+    }, [available]);
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsxs(DialogContent, { showCloseButton: false, className: "w-[min(calc(100%_-_2rem),35rem)] max-h-[min(80vh,36rem)] overflow-hidden rounded-2xl border border-border/60 bg-card/96 p-0 shadow-2xl", children: [_jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DialogTitle, { className: "text-sm font-semibold text-txt", children: t("secretsview.AddSecretsToVault") }), _jsx(DialogDescription, { className: "sr-only", children: t("secretsview.SearchByKeyDescr") })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-lg text-base text-muted hover:text-txt", onClick: onClose, "aria-label": t("common.close"), children: "x" })] }), _jsx(Input, { type: "text", className: "h-12 w-full rounded-none border-0 bg-transparent px-4 py-2.5 text-sm text-txt shadow-none focus-visible:ring-0 font-body", placeholder: t("secretsview.SearchByKeyDescr"), "aria-label": t("secretsview.SearchByKeyDescr"), value: search, onChange: (e) => onSearchChange(e.target.value), autoFocus: true }), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: available.length === 0 ? (_jsx("div", { className: "rounded-xl border border-dashed border-border/60 py-6 text-center text-sm text-muted", children: search
+                            ? "No matching secrets found."
+                            : "All available secrets are already in your vault." })) : (grouped.map(({ category, label, secrets }) => (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-wide text-muted", children: label }), secrets.map((s) => {
+                                const enabledPlugins = s.usedBy.filter((u) => u.enabled);
+                                const pluginList = s.usedBy
+                                    .map((u) => u.pluginName || u.pluginId)
+                                    .join(", ");
+                                return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-xl border border-transparent px-3 py-2 hover:border-border/40 hover:bg-bg-hover", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate text-sm font-mono text-txt", children: s.key }), _jsxs("div", { className: "text-xs-tight leading-5 text-muted", title: pluginList, children: [s.description, s.usedBy.length > 0 && (_jsxs("span", { className: "ml-1", children: ["\u2014", " ", enabledPlugins.length > 0
+                                                                    ? `${enabledPlugins.length} active plugin${enabledPlugins.length !== 1 ? "s" : ""}`
+                                                                    : `${s.usedBy.length} plugin${s.usedBy.length !== 1 ? "s" : ""} (none active)`] }))] })] }), _jsx(Button, { variant: "default", size: "sm", className: "px-2.5 py-1 h-7 text-xs shadow-sm flex-shrink-0", onClick: () => onAdd(s.key), children: t("common.add") })] }, s.key));
+                            })] }, category)))) })] }) }));
+}
+/* ── Secret Card ────────────────────────────────────────────────────── */
+function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible, onDraftChange, onRemove, }) {
+    const app = useApp();
+    const t = app?.t ?? fallbackTranslate;
+    const enabledPlugins = secret.usedBy.filter((u) => u.enabled);
+    const pluginList = secret.usedBy
+        .map((u) => u.pluginName || u.pluginId)
+        .join(", ");
+    const hasDraft = draftValue.trim() !== "";
+    // Only show "Required" if an enabled plugin actually requires it
+    const showRequired = secret.required && enabledPlugins.length > 0;
+    return (_jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-full", style: {
+                                        backgroundColor: secret.isSet ? "var(--ok)" : "var(--muted)",
+                                    } }), _jsx("span", { className: "truncate text-sm font-mono font-medium text-txt", children: secret.key })] }) }), _jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5", children: [showRequired && (_jsx("span", { className: "rounded border border-danger/35 bg-danger/10 px-1.5 py-0.5 text-2xs font-medium text-danger", children: t("secretsview.Required") })), isPinned && !secret.isSet && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 rounded-md px-2 text-xs-tight text-muted hover:bg-danger/10 hover:text-danger", onClick: onRemove, title: t("secretsview.RemoveFromVault"), children: "x" }))] })] }), _jsx("div", { className: "break-words text-xs-tight leading-5 text-muted", title: pluginList, children: enabledPlugins.length > 0
+                    ? `Used by ${enabledPlugins.length} active plugin${enabledPlugins.length !== 1 ? "s" : ""}: ${enabledPlugins.map((u) => u.pluginName || u.pluginId).join(", ")}`
+                    : `Available for: ${pluginList}` }), secret.isSet && !hasDraft && (_jsx("div", { className: "rounded-lg border border-border/50 bg-bg px-2 py-1 text-xs font-mono text-muted", children: secret.maskedValue })), _jsxs("div", { className: "flex flex-col items-stretch gap-2 sm:flex-row sm:items-center", children: [_jsx(Input, { type: isVisible ? "text" : "password", className: "h-9 flex-1 border-border/60 bg-bg px-2.5 py-1.5 text-sm font-mono text-txt focus-visible:border-accent/50 focus-visible:ring-1 focus-visible:ring-accent/30", placeholder: secret.isSet ? "Enter new value to update" : "Enter value", value: draftValue, onChange: (e) => onDraftChange(e.target.value) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-muted-strong shadow-sm hover:text-txt", onClick: onToggleVisible, title: isVisible ? "Hide" : "Show", children: isVisible ? "Hide" : "Show" })] })] }));
+}

package/components/pages/SettingsView.d.ts

@@ -0,0 +1,6 @@
+export declare function SettingsView({ inModal, onClose: _onClose, initialSection, }?: {
+    inModal?: boolean;
+    onClose?: () => void;
+    initialSection?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SettingsView.d.ts.map

package/components/pages/SettingsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SettingsView.tsx"],"names":[],"mappings":"AAqoBA,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EAAE,QAAQ,EACjB,cAAc,GACf,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyiBL"}