@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/RuntimeView.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RuntimeView — deep runtime state inspector for advanced debugging.
+ *
+ * Shows:
+ * - Full runtime snapshot
+ * - Split sections: actions/providers/plugins/services/evaluators
+ * - Explicit load order metadata
+ */
+import { useCallback, useEffect, useState } from "react";
+import { client, } from "../api";
+import { useApp } from "../state";
+import { formatDateTime } from "./format";
+const SECTION_TABS = [
+    { key: "runtime", label: "Runtime" },
+    { key: "actions", label: "Actions" },
+    { key: "providers", label: "Providers" },
+    { key: "plugins", label: "Plugins" },
+    { key: "services", label: "Services" },
+    { key: "evaluators", label: "Evaluators" },
+];
+function nodeSummary(value) {
+    if (value === null)
+        return "null";
+    if (typeof value === "string") {
+        const compact = value.length > 100 ? `${value.slice(0, 100)}...` : value;
+        return JSON.stringify(compact);
+    }
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    if (Array.isArray(value))
+        return `Array(${value.length})`;
+    if (typeof value === "object") {
+        const record = value;
+        const typeTag = typeof record.__type === "string" ? record.__type : null;
+        if (typeTag === "array" && typeof record.length === "number") {
+            return `Array(${String(record.length)})`;
+        }
+        if (typeTag === "map" && typeof record.size === "number") {
+            return `Map(${String(record.size)})`;
+        }
+        if (typeTag === "set" && typeof record.size === "number") {
+            return `Set(${String(record.size)})`;
+        }
+        if (typeTag === "object") {
+            const className = typeof record.className === "string" ? record.className : "Object";
+            const props = record.properties &&
+                typeof record.properties === "object" &&
+                !Array.isArray(record.properties)
+                ? Object.keys(record.properties).length
+                : 0;
+            return `${className} {${props}}`;
+        }
+        return `${typeTag ?? "Object"} {${Object.keys(record).length}}`;
+    }
+    return String(value);
+}
+function isExpandable(value) {
+    if (Array.isArray(value))
+        return value.length > 0;
+    if (!value || typeof value !== "object")
+        return false;
+    return Object.keys(value).length > 0;
+}
+function nodeEntries(value, path) {
+    if (Array.isArray(value)) {
+        return value.map((entry, i) => ({
+            key: `[${i}]`,
+            value: entry,
+            path: `${path}[${i}]`,
+        }));
+    }
+    if (!value || typeof value !== "object")
+        return [];
+    return Object.entries(value).map(([key, entry]) => ({
+        key,
+        value: entry,
+        path: `${path}.${key}`,
+    }));
+}
+function buildInitialExpanded(rootPath, value) {
+    const expanded = new Set([rootPath]);
+    const firstLayer = nodeEntries(value, rootPath).slice(0, 24);
+    for (const entry of firstLayer)
+        expanded.add(entry.path);
+    return expanded;
+}
+function orderItemLabel(entry) {
+    const idPart = entry.id ? ` (${entry.id})` : "";
+    return `[${entry.index}] ${entry.name} :: ${entry.className}${idPart}`;
+}
+function TreeNode(props) {
+    const { label, value, path, depth, expanded, onToggle } = props;
+    const canExpand = isExpandable(value);
+    const open = expanded.has(path);
+    const entries = canExpand ? nodeEntries(value, path) : [];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-1 text-[11px] font-mono leading-5", style: { paddingLeft: `${depth * 14}px` }, children: [canExpand ? (_jsx("button", { type: "button", onClick: () => onToggle(path), className: "w-4 text-left text-[var(--muted)] hover:text-[var(--txt)]", title: open ? "Collapse" : "Expand", children: open ? "▾" : "▸" })) : (_jsx("span", { className: "inline-block w-4 text-[var(--muted)]", children: "\u00B7" })), _jsx("span", { className: "text-[var(--muted)]", children: label }), _jsx("span", { className: "text-[var(--txt)]", children: nodeSummary(value) })] }), canExpand && open && (_jsx("div", { children: entries.map((entry) => (_jsx(TreeNode, { label: entry.key, value: entry.value, path: entry.path, depth: depth + 1, expanded: expanded, onToggle: onToggle }, entry.path))) }))] }));
+}
+function OrderCard(props) {
+    const { t } = useApp();
+    const { title, entries } = props;
+    return (_jsxs("div", { className: "border border-[var(--border)] bg-[var(--card)] rounded-md p-3 min-h-[150px]", children: [_jsxs("div", { className: "text-xs font-semibold mb-2", children: [title, " (", entries.length, ")"] }), _jsx("div", { className: "max-h-[180px] overflow-auto text-[11px] font-mono leading-5", children: entries.length === 0 ? (_jsx("div", { className: "text-[var(--muted)]", children: t("runtimeview.none") })) : (entries.map((entry) => (_jsx("div", { className: "text-[var(--txt)]", children: orderItemLabel(entry) }, `${title}-${entry.index}`)))) })] }));
+}
+function ServicesOrderCard(props) {
+    const { t } = useApp();
+    const { entries } = props;
+    return (_jsxs("div", { className: "border border-[var(--border)] bg-[var(--card)] rounded-md p-3 min-h-[150px]", children: [_jsxs("div", { className: "text-xs font-semibold mb-2", children: [t("runtimeview.Services"), entries.length, " ", t("runtimeview.types")] }), _jsx("div", { className: "max-h-[180px] overflow-auto text-[11px] font-mono leading-5", children: entries.length === 0 ? (_jsx("div", { className: "text-[var(--muted)]", children: t("runtimeview.none") })) : (entries.map((serviceGroup) => (_jsxs("div", { className: "mb-2", children: [_jsxs("div", { className: "text-[var(--txt)]", children: ["[", serviceGroup.index, "] ", serviceGroup.serviceType, " (", serviceGroup.count, ")"] }), serviceGroup.instances.map((instance) => (_jsx("div", { className: "text-[var(--muted)] pl-4", children: orderItemLabel(instance) }, `${serviceGroup.serviceType}-${instance.index}`)))] }, `${serviceGroup.serviceType}-${serviceGroup.index}`)))) })] }));
+}
+export function RuntimeView() {
+    const { t } = useApp();
+    const [snapshot, setSnapshot] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [activeSection, setActiveSection] = useState("runtime");
+    const [expandedPaths, setExpandedPaths] = useState(new Set());
+    const [depth, setDepth] = useState(10);
+    const [maxArrayLength, setMaxArrayLength] = useState(1000);
+    const [maxObjectEntries, setMaxObjectEntries] = useState(1000);
+    const sectionData = snapshot?.sections[activeSection] ?? null;
+    const rootPath = `$${activeSection}`;
+    const loadSnapshot = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const next = await client.getRuntimeSnapshot({
+                depth,
+                maxArrayLength,
+                maxObjectEntries,
+            });
+            setSnapshot(next);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load runtime snapshot");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [depth, maxArrayLength, maxObjectEntries]);
+    useEffect(() => {
+        void loadSnapshot();
+    }, [loadSnapshot]);
+    useEffect(() => {
+        setExpandedPaths(buildInitialExpanded(rootPath, sectionData));
+    }, [rootPath, sectionData]);
+    const handleTogglePath = useCallback((path) => {
+        setExpandedPaths((prev) => {
+            const next = new Set(prev);
+            if (next.has(path))
+                next.delete(path);
+            else
+                next.add(path);
+            return next;
+        });
+    }, []);
+    return (_jsxs("div", { "data-testid": "runtime-view", className: "flex flex-col gap-4 h-full", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-3 border border-[var(--border)] bg-[var(--card)] rounded-md p-3", children: [_jsxs("label", { className: "text-[11px] text-[var(--muted)] flex items-center gap-1", children: [t("runtimeview.depth"), _jsx("input", { type: "number", min: 1, max: 24, value: depth, onChange: (e) => setDepth(Math.max(1, Math.min(24, Number(e.target.value) || 1))), className: "w-16 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm" })] }), _jsxs("label", { className: "text-[11px] text-[var(--muted)] flex items-center gap-1", children: [t("runtimeview.arrayCap"), _jsx("input", { type: "number", min: 1, max: 5000, value: maxArrayLength, onChange: (e) => setMaxArrayLength(Math.max(1, Math.min(5000, Number(e.target.value) || 1))), className: "w-20 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm" })] }), _jsxs("label", { className: "text-[11px] text-[var(--muted)] flex items-center gap-1", children: [t("runtimeview.objectCap"), _jsx("input", { type: "number", min: 1, max: 5000, value: maxObjectEntries, onChange: (e) => setMaxObjectEntries(Math.max(1, Math.min(5000, Number(e.target.value) || 1))), className: "w-20 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm" })] }), _jsx("button", { type: "button", onClick: () => void loadSnapshot(), disabled: loading, className: "px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)] disabled:opacity-60", children: loading ? "Refreshing..." : "Refresh" }), _jsx("button", { type: "button", onClick: () => setExpandedPaths(new Set([rootPath])), className: "px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)]", children: t("runtimeview.Collapse") }), _jsx("button", { type: "button", onClick: () => setExpandedPaths(buildInitialExpanded(rootPath, sectionData)), className: "px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)]", children: t("runtimeview.ExpandTop") }), _jsx("div", { className: "text-[11px] text-[var(--muted)] ml-auto", children: snapshot
+                            ? `Last updated: ${formatDateTime(snapshot.generatedAt, { fallback: "n/a" })}`
+                            : "No snapshot loaded" })] }), snapshot && (_jsxs("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: [_jsx(OrderCard, { title: t("runtimeview.Plugins"), entries: snapshot.order.plugins }), _jsx(OrderCard, { title: t("runtimeview.Actions"), entries: snapshot.order.actions }), _jsx(OrderCard, { title: t("runtimeview.Providers"), entries: snapshot.order.providers }), _jsx(OrderCard, { title: t("runtimeview.Evaluators"), entries: snapshot.order.evaluators }), _jsx(ServicesOrderCard, { entries: snapshot.order.services }), _jsxs("div", { className: "border border-[var(--border)] bg-[var(--card)] rounded-md p-3", children: [_jsx("div", { className: "text-xs font-semibold mb-2", children: t("runtimeview.Summary") }), _jsxs("div", { className: "text-[11px] font-mono leading-5", children: [_jsxs("div", { children: [t("runtimeview.runtime"), " ", snapshot.runtimeAvailable ? "available" : "offline"] }), _jsxs("div", { children: [t("runtimeview.agent"), " ", snapshot.meta.agentName] }), _jsxs("div", { children: [t("runtimeview.state"), " ", snapshot.meta.agentState] }), _jsxs("div", { children: [t("runtimeview.model"), " ", snapshot.meta.model ?? "n/a"] }), _jsxs("div", { children: [t("runtimeview.plugins"), " ", snapshot.meta.pluginCount] }), _jsxs("div", { children: [t("runtimeview.actions"), " ", snapshot.meta.actionCount] }), _jsxs("div", { children: [t("runtimeview.providers"), " ", snapshot.meta.providerCount] }), _jsxs("div", { children: [t("runtimeview.evaluators"), " ", snapshot.meta.evaluatorCount] }), _jsxs("div", { children: [t("runtimeview.services"), " ", snapshot.meta.serviceCount] })] })] })] })), _jsx("div", { className: "flex gap-1 border-b border-[var(--border)]", children: SECTION_TABS.map((tab) => {
+                    const active = tab.key === activeSection;
+                    return (_jsx("button", { type: "button", onClick: () => setActiveSection(tab.key), className: `px-3 py-2 text-xs font-medium border-b-2 -mb-px ${active
+                            ? "border-accent text-txt"
+                            : "border-transparent text-muted hover:text-txt hover:border-border"}`, children: tab.label }, tab.key));
+                }) }), _jsx("div", { className: "flex-1 min-h-0 border border-[var(--border)] bg-[var(--card)] rounded-md overflow-auto p-2", children: error ? (_jsx("div", { className: "text-xs text-danger p-3", children: error })) : !snapshot ? (_jsx("div", { className: "text-xs text-[var(--muted)] p-3", children: loading
+                        ? "Loading runtime snapshot..."
+                        : "No runtime snapshot available." })) : !snapshot.runtimeAvailable ? (_jsx("div", { className: "text-xs text-[var(--muted)] p-3", children: t("runtimeview.AgentRuntimeIsNot") })) : (_jsx(TreeNode, { label: activeSection, value: sectionData, path: rootPath, depth: 0, expanded: expandedPaths, onToggle: handleTogglePath })) })] }));
+}

package/components/SaveCommandModal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Modal for naming and saving a custom /command from selected text.
+ */
+interface SaveCommandModalProps {
+    open: boolean;
+    text: string;
+    onSave: (name: string) => void;
+    onClose: () => void;
+}
+export declare function SaveCommandModal({ open, text, onSave, onClose, }: SaveCommandModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SaveCommandModal.d.ts.map

package/components/SaveCommandModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveCommandModal.d.ts","sourceRoot":"","sources":["../../src/components/SaveCommandModal.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAMH,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,kDA4LvB"}

package/components/SaveCommandModal.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Modal for naming and saving a custom /command from selected text.
+ */
+import { Input } from "@elizaos/ui";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useApp } from "../state";
+const NAME_PATTERN = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+export function SaveCommandModal({ open, text, onSave, onClose, }) {
+    const { t } = useApp();
+    const [name, setName] = useState("");
+    const [error, setError] = useState("");
+    const inputRef = useRef(null);
+    const dialogTitleId = useId();
+    const inputId = useId();
+    const inputLabelId = useId();
+    const inputErrorId = useId();
+    useEffect(() => {
+        if (open) {
+            setName("");
+            setError("");
+            const focusTimeout = setTimeout(() => inputRef.current?.focus(), 50);
+            return () => clearTimeout(focusTimeout);
+        }
+    }, [open]);
+    const validate = useCallback((value) => {
+        if (!value)
+            return "Name is required";
+        if (!NAME_PATTERN.test(value))
+            return "Must start with a letter, no spaces (a-z, 0-9, -)";
+        return "";
+    }, []);
+    const handleSubmit = useCallback(() => {
+        const err = validate(name);
+        if (err) {
+            setError(err);
+            return;
+        }
+        onSave(name);
+    }, [name, validate, onSave]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.nativeEvent.isComposing)
+            return;
+        if (e.key === "Enter")
+            handleSubmit();
+        if (e.key === "Escape")
+            onClose();
+    }, [handleSubmit, onClose]);
+    if (!open)
+        return null;
+    const preview = text.length > 120 ? `${text.slice(0, 120)}...` : text;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", style: {
+            background: "color-mix(in srgb, var(--bg) 50%, transparent)",
+            backdropFilter: "blur(4px)",
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", "aria-labelledby": dialogTitleId, children: _jsxs("div", { className: "w-full max-w-md shadow-lg flex flex-col overflow-hidden rounded-xl", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsxs("div", { className: "flex items-center px-5 py-3 shrink-0", style: { borderBottom: "1px solid var(--border)" }, children: [_jsx("span", { id: dialogTitleId, className: "font-bold text-sm flex-1", style: { color: "var(--text)" }, children: t("savecommandmodal.SaveAsCommand") }), _jsx("button", { type: "button", className: "bg-transparent border-0 cursor-pointer text-lg h-6 w-6", style: { color: "var(--muted)" }, onClick: onClose, "aria-label": "Close dialog", children: t("bugreportmodal.Times") })] }), _jsxs("div", { className: "px-5 py-4 flex flex-col gap-3", children: [_jsx("label", { id: inputLabelId, htmlFor: inputId, className: "text-xs", style: { color: "var(--muted)" }, children: t("savecommandmodal.CommandName") }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm", style: { color: "var(--muted)" }, children: "/" }), _jsx(Input, { id: inputId, ref: inputRef, type: "text", value: name, onChange: (e) => {
+                                        setName(e.target.value);
+                                        setError("");
+                                    }, onKeyDown: handleKeyDown, placeholder: t("savecommandmodal.myCommand"), "aria-labelledby": inputLabelId, "aria-describedby": error ? inputErrorId : undefined, "aria-invalid": error ? "true" : undefined, className: "flex-1 h-8 text-sm shadow-sm", style: {
+                                        background: "var(--bg-hover)",
+                                        border: "1px solid var(--border)",
+                                        color: "var(--text)",
+                                    } })] }), error && (_jsx("p", { id: inputErrorId, className: "text-xs", style: { color: "#ef4444" }, children: error })), _jsx("span", { className: "text-xs mt-1", style: { color: "var(--muted)" }, children: t("savecommandmodal.Preview") }), _jsx("pre", { className: "text-xs px-3 py-2 whitespace-pre-wrap break-words max-h-24 overflow-y-auto", style: {
+                                color: "var(--muted)",
+                                background: "var(--bg-hover)",
+                                border: "1px solid var(--border)",
+                            }, children: preview })] }), _jsxs("div", { className: "flex justify-end gap-2 px-5 py-3", style: { borderTop: "1px solid var(--border)" }, children: [_jsx("button", { type: "button", className: "px-3 py-1.5 h-8 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                background: "transparent",
+                                border: "1px solid var(--border)",
+                                color: "var(--muted)",
+                            }, onClick: onClose, children: t("onboarding.cancel") }), _jsx("button", { type: "button", className: "px-3 py-1.5 h-8 text-xs font-medium rounded cursor-pointer transition-colors", style: { background: "#f0b232", border: "none", color: "#000" }, onClick: handleSubmit, children: t("savecommandmodal.Save") })] })] }) }));
+}

package/components/SecretsView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Secrets Vault — user-curated view of API keys and credentials.
+ *
+ * Only shows secrets the user has explicitly added to their vault (persisted in
+ * localStorage) plus any that are already set in the environment. Users browse
+ * available secrets from plugins and pick which ones to manage here.
+ */
+export declare function SecretsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SecretsView.d.ts.map

package/components/SecretsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecretsView.d.ts","sourceRoot":"","sources":["../../src/components/SecretsView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA6EH,wBAAgB,WAAW,4CAmQ1B"}

package/components/SecretsView.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Secrets Vault — user-curated view of API keys and credentials.
+ *
+ * Only shows secrets the user has explicitly added to their vault (persisted in
+ * localStorage) plus any that are already set in the environment. Users browse
+ * available secrets from plugins and pick which ones to manage here.
+ */
+import { Button, Input } from "@elizaos/ui";
+import { ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../api";
+import { useApp } from "../state";
+/* ── 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",
+};
+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 {
+        /* ignore */
+    }
+    return new Set();
+}
+function savePinnedKeys(keys) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify([...keys]));
+    }
+    catch {
+        /* ignore */
+    }
+}
+/* ── Component ──────────────────────────────────────────────────────── */
+export function SecretsView() {
+    const { t } = useApp();
+    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("div", { className: "text-[var(--muted)] text-[13px] italic py-8 text-center", children: t("secretsview.LoadingSecrets") }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "text-center py-8", children: [_jsx("p", { className: "text-[var(--danger)] text-[13px] mb-2", children: error }), _jsx("button", { type: "button", className: "bg-transparent border-0 text-[13px] text-[var(--text)] underline decoration-[var(--accent)] underline-offset-2 cursor-pointer hover:opacity-80", onClick: load, children: t("common.retry") })] }));
+    }
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("p", { className: "text-[13px] text-[var(--muted)] m-0", children: t("secretsview.ManageAPIKeysAnd") }), _jsx(Button, { variant: "default", size: "sm", className: "px-3 py-1.5 h-8 text-[13px] shadow-sm flex-shrink-0", 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: "text-[var(--muted)] text-[13px] italic py-8 text-center border border-dashed border-[var(--border)]", children: t("secretsview.YourVaultIsEmpty") })), grouped.map(({ category, label, secrets: catSecrets }) => (_jsxs("div", { className: "mb-6", children: [_jsxs("button", { type: "button", className: "flex items-center gap-2 w-full bg-transparent border-0 cursor-pointer text-left mb-3", onClick: () => toggleCollapse(category), children: [_jsx(ChevronDown, { className: "w-3 h-3 text-[var(--muted)] select-none transition-transform", style: {
+                                    transform: collapsed.has(category)
+                                        ? "rotate(-90deg)"
+                                        : "rotate(0deg)",
+                                } }), _jsx("span", { className: "text-[14px] font-semibold text-[var(--txt)]", children: label }), _jsxs("span", { className: "text-[12px] text-[var(--muted)]", children: ["(", catSecrets.length, ")"] })] }), !collapsed.has(category) && (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", 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: "flex items-center gap-3 mt-4 pt-4 border-t border-[var(--border)]", children: [_jsx(Button, { variant: "default", size: "sm", className: "px-4 py-2 h-9 text-[13px] font-medium shadow-sm transition-colors", disabled: dirtyKeys.length === 0 || saving, onClick: handleSave, children: saving
+                            ? "Saving..."
+                            : `Save${dirtyKeys.length > 0 ? ` (${dirtyKeys.length})` : ""}` }), saveResult && (_jsx("span", { className: `text-[13px] ${saveResult.ok ? "text-[var(--ok)]" : "text-[var(--danger)]"}`, children: saveResult.message }))] }))] }));
+}
+/* ── Secret Picker ──────────────────────────────────────────────────── */
+function SecretPicker({ available, search, onSearchChange, onAdd, onClose, }) {
+    const { t } = useApp();
+    // Group available by category
+    const grouped = useMemo(() => {
+        return groupSecretsByCategory(available);
+    }, [available]);
+    return (_jsx("div", { className: "fixed inset-0 bg-black/40 z-[9999] flex items-start justify-center pt-20", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "bg-[var(--bg)] border border-[var(--border)] w-[560px] max-h-[480px] flex flex-col shadow-2xl", children: [_jsxs("div", { className: "px-4 py-3 border-b border-[var(--border)] flex items-center justify-between", children: [_jsx("span", { className: "text-[14px] font-semibold text-[var(--txt)]", children: t("secretsview.AddSecretsToVault") }), _jsx("button", { type: "button", className: "text-[var(--muted)] bg-transparent border-0 cursor-pointer text-[16px] hover:text-[var(--txt)]", onClick: onClose, children: "x" })] }), _jsx(Input, { type: "text", className: "w-full px-4 py-2.5 h-12 border-0 border-b border-[var(--border)] bg-transparent text-[13px] text-[var(--txt)] shadow-none rounded-none focus-visible:ring-0 font-body", placeholder: t("secretsview.SearchByKeyDescr"), value: search, onChange: (e) => onSearchChange(e.target.value) }), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: available.length === 0 ? (_jsx("div", { className: "py-6 text-center text-[var(--muted)] text-[13px]", children: search
+                            ? "No matching secrets found."
+                            : "All available secrets are already in your vault." })) : (grouped.map(({ category, label, secrets }) => (_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "text-[11px] font-semibold text-[var(--muted)] uppercase tracking-wide mb-2", 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-center justify-between py-2 px-2 hover:bg-[var(--bg-hover)] gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[13px] font-mono text-[var(--txt)]", children: s.key }), _jsxs("div", { className: "text-[11px] text-[var(--muted)] truncate", 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-[12px] shadow-sm flex-shrink-0", onClick: () => onAdd(s.key), children: t("secretsview.Add") })] }, s.key));
+                            })] }, category)))) })] }) }));
+}
+/* ── Secret Card ────────────────────────────────────────────────────── */
+function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible, onDraftChange, onRemove, }) {
+    const { t } = useApp();
+    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: "border border-[var(--border)] bg-[var(--bg-card)] p-4 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-2 h-2 rounded-full flex-shrink-0", style: {
+                                            backgroundColor: secret.isSet ? "var(--ok)" : "var(--muted)",
+                                        } }), _jsx("span", { className: "text-[13px] font-mono font-medium text-[var(--txt)] truncate", children: secret.key })] }), _jsx("p", { className: "text-[12px] text-[var(--muted)] mt-1 leading-snug", children: secret.description })] }), _jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [showRequired && (_jsx("span", { className: "text-[10px] text-[var(--danger)] font-medium px-1.5 py-0.5 border border-[var(--danger)] rounded", children: t("secretsview.Required") })), isPinned && !secret.isSet && (_jsx("button", { type: "button", className: "text-[11px] text-[var(--muted)] bg-transparent border-0 cursor-pointer hover:text-[var(--danger)]", onClick: onRemove, title: t("secretsview.RemoveFromVault"), children: "x" }))] })] }), _jsx("div", { className: "text-[11px] text-[var(--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: "text-[12px] font-mono text-[var(--muted)] bg-[var(--bg)] px-2 py-1 rounded", children: secret.maskedValue })), _jsxs("div", { className: "flex gap-1.5 items-center", children: [_jsx(Input, { type: isVisible ? "text" : "password", className: "flex-1 px-2.5 py-1.5 h-8 text-[13px] font-mono bg-[var(--bg)] border border-[var(--border)] text-[var(--txt)] focus-visible:ring-1 focus-visible:ring-[var(--accent)] focus-visible:border-[var(--accent)]", 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: "px-2 py-1.5 h-8 text-[12px] bg-[var(--bg)] text-[var(--muted)] hover:text-[var(--txt)] shadow-sm", onClick: onToggleVisible, title: isVisible ? "Hide" : "Show", children: isVisible ? "Hide" : "Show" })] })] }));
+}

package/components/SettingsView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings view — two-panel layout with section navigator and active section.
+ */
+export declare function SettingsView({ inModal, onClose, initialSection, }?: {
+    inModal?: boolean;
+    onClose?: () => void;
+    initialSection?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SettingsView.d.ts.map

package/components/SettingsView.d.ts.map

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