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

package/components/pages/PluginCard.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useApp } from "../../state/index.js";
+import { getPluginResourceLinks, iconImageSource, pluginResourceLinkLabel, resolveIcon, } from "./plugin-list-utils.js";
+export function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, installingPlugins, updatingPlugins, uninstallingPlugins, installProgress, releaseStreamSelections, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onInstall, onUpdate, onUninstall, onReleaseStreamChange, onOpenExternalUrl, onDragStart, onDragOver, onDrop, onDragEnd, installProgressLabel, installLabel, loadFailedLabel, notInstalledLabel, }) {
+    const { t } = useApp();
+    const hasParams = p.parameters && p.parameters.length > 0;
+    const isOpen = pluginSettingsOpen.has(p.id);
+    const requiredParams = hasParams
+        ? p.parameters.filter((param) => param.required)
+        : [];
+    const requiredSetCount = requiredParams.filter((param) => param.isSet).length;
+    const setCount = hasParams
+        ? p.parameters.filter((param) => param.isSet).length
+        : 0;
+    const totalCount = hasParams ? p.parameters.length : 0;
+    const allParamsSet = !hasParams ||
+        requiredParams.length === 0 ||
+        requiredSetCount === requiredParams.length;
+    const isShowcase = p.id === "__ui-showcase__";
+    const selectedReleaseStream = releaseStreamSelections[p.id] ??
+        p.releaseStream ??
+        (p.betaVersion ? "beta" : "latest");
+    const remoteVersionForSelection = selectedReleaseStream === "beta" ? p.betaVersion : p.latestVersion;
+    const showReleaseControls = !isShowcase && Boolean(p.npmName);
+    const canUpdate = showReleaseControls && Boolean(p.version);
+    const canUninstall = !isShowcase && p.source === "store" && Boolean(p.npmName);
+    const isInstalling = installingPlugins.has(p.id);
+    const isUpdating = updatingPlugins.has(p.id);
+    const isUninstalling = uninstallingPlugins.has(p.id);
+    const categoryLabel = isShowcase
+        ? "showcase"
+        : p.category === "ai-provider"
+            ? "ai provider"
+            : p.category;
+    const notLoadedLabel = t("pluginsview.NotLoaded", {
+        defaultValue: "Not loaded",
+    });
+    const isStoreInstallMissing = p.source === "store" && p.enabled && !p.isActive && Boolean(p.npmName);
+    const inactiveLabel = p.loadError
+        ? loadFailedLabel
+        : p.source === "store"
+            ? notInstalledLabel
+            : notLoadedLabel;
+    const enabledBorder = isShowcase
+        ? "border-l-[3px] border-l-accent"
+        : p.enabled
+            ? !allParamsSet && hasParams
+                ? "border-l-[3px] border-l-warn"
+                : "border-l-[3px] border-l-accent"
+            : "";
+    const isToggleBusy = togglingPlugins.has(p.id);
+    const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+    const isDragging = draggingId === p.id;
+    const isDragOver = dragOverId === p.id && draggingId !== p.id;
+    const pluginLinks = getPluginResourceLinks(p);
+    return (_jsxs("li", { draggable: allowCustomOrder, onDragStart: allowCustomOrder && onDragStart
+            ? (e) => onDragStart(e, p.id)
+            : undefined, onDragOver: allowCustomOrder && onDragOver ? (e) => onDragOver(e, p.id) : undefined, onDrop: allowCustomOrder && onDrop ? (e) => onDrop(e, p.id) : undefined, onDragEnd: allowCustomOrder ? onDragEnd : undefined, className: `border border-border bg-card transition-colors duration-150 flex flex-col ${enabledBorder} ${isOpen ? "ring-1 ring-accent" : "hover:border-accent/40"} ${isDragging ? "opacity-30" : ""} ${isDragOver ? "ring-2 ring-accent/60" : ""}`, "data-plugin-id": p.id, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 pt-3 pb-1", children: [allowCustomOrder && (_jsx("span", { className: "text-2xs text-muted opacity-30 hover:opacity-70 cursor-grab active:cursor-grabbing shrink-0 select-none leading-none", title: t("pluginsview.DragToReorder"), children: t("pluginsview.X2807") })), _jsxs("span", { className: "font-bold text-sm flex items-center gap-1.5 min-w-0 truncate flex-1", children: [(() => {
+                                const icon = resolveIcon(p);
+                                if (!icon)
+                                    return null;
+                                if (typeof icon === "string") {
+                                    const imageSrc = iconImageSource(icon);
+                                    return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "w-5 h-5 rounded-sm object-contain", onError: (e) => {
+                                            e.currentTarget.style.display =
+                                                "none";
+                                        } })) : (_jsx("span", { className: "text-sm", children: icon }));
+                                }
+                                const IconComponent = icon;
+                                return _jsx(IconComponent, { className: "w-5 h-5" });
+                            })(), p.name] }), isShowcase ? (_jsx("span", { className: "text-2xs font-bold tracking-wider px-2.5 py-[2px] border border-accent text-txt bg-accent-subtle shrink-0", children: t("pluginsview.DEMO") })) : (_jsx(Button, { variant: "outline", size: "sm", "data-plugin-toggle": p.id, className: `text-2xs font-bold tracking-wider px-2.5 py-[2px] h-auto rounded-none border transition-colors duration-150 shrink-0 ${p.enabled
+                            ? "bg-accent text-accent-fg border-accent"
+                            : "bg-transparent text-muted border-border hover:text-txt"} ${toggleDisabled
+                            ? "opacity-60 cursor-not-allowed"
+                            : "cursor-pointer"}`, onClick: (e) => {
+                            e.stopPropagation();
+                            void onToggle(p.id, !p.enabled);
+                        }, disabled: toggleDisabled, children: isToggleBusy
+                            ? t("pluginsview.Applying", {
+                                defaultValue: "Applying",
+                            })
+                            : p.enabled
+                                ? t("common.on")
+                                : t("common.off") }))] }), _jsxs("div", { className: "flex items-center gap-1.5 px-3 pb-1.5", children: [_jsx("span", { className: "text-2xs px-1.5 py-px border border-border bg-surface text-muted lowercase tracking-wide whitespace-nowrap", children: categoryLabel }), p.version && (_jsxs("span", { className: "text-2xs font-mono text-muted opacity-70", children: ["v", p.version] })), showReleaseControls && (_jsx("span", { className: "text-2xs px-1.5 py-px border border-border bg-surface text-muted lowercase tracking-wide whitespace-nowrap", children: selectedReleaseStream })), p.enabled && !p.isActive && !isShowcase && (_jsx("span", { className: `text-2xs px-1.5 py-px border lowercase tracking-wide whitespace-nowrap ${p.loadError
+                            ? "border-destructive bg-[rgba(153,27,27,0.04)] text-destructive"
+                            : "border-warn bg-[rgba(234,179,8,0.06)] text-warn"}`, title: p.loadError || "Plugin is enabled but not loaded in the runtime", children: inactiveLabel })), isToggleBusy && (_jsx("span", { className: "text-2xs px-1.5 py-px border border-accent bg-accent-subtle text-txt lowercase tracking-wide whitespace-nowrap", children: t("pluginsview.restarting") }))] }), _jsx("p", { className: "text-xs text-muted px-3 pb-2 flex-1", style: {
+                    display: "-webkit-box",
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                }, children: p.description || pluginDescriptionFallback }), (p.tags?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-2", children: p.tags?.slice(0, 4).map((tag) => (_jsx("span", { className: "whitespace-nowrap border border-border/50 bg-bg-accent/80 px-1.5 py-px text-2xs lowercase tracking-wide text-muted-strong", children: tag }, `${p.id}:${tag}`))) })), pluginLinks.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 pb-2", children: pluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-6 px-2 text-2xs font-bold border-border/40 text-muted hover:text-txt hover:border-accent hover:bg-accent/5 backdrop-blur-sm transition-all", onClick: (e) => {
+                        e.stopPropagation();
+                        void onOpenExternalUrl(link.url);
+                    }, title: `${pluginResourceLinkLabel(t, link.key)}: ${link.url}`, children: pluginResourceLinkLabel(t, link.key) }, `${p.id}:${link.key}`))) })), _jsxs("div", { className: "mt-auto flex items-center gap-3 bg-card/55 px-4 py-3", children: [hasParams && !isShowcase ? (_jsxs(_Fragment, { children: [_jsx("span", { className: `inline-block w-2 h-2 rounded-full shadow-[0_0_10px_currentColor] shrink-0 ${allParamsSet
+                                    ? "bg-ok text-ok"
+                                    : "bg-destructive text-destructive"}` }), _jsxs("span", { className: "text-xs-tight font-bold tracking-wide text-muted", children: [setCount, "/", totalCount, " ", t("common.configured")] })] })) : !hasParams && !isShowcase ? (_jsx("span", { className: "text-xs-tight font-bold tracking-wide text-muted/60", children: t("pluginsview.NoConfigNeeded") })) : (_jsx("span", { className: "text-xs-tight font-bold tracking-wide text-muted/60", children: t("pluginsview.23FieldDemos") })), showReleaseControls && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: selectedReleaseStream === "latest" ? "default" : "outline", size: "sm", className: "h-6 px-2 text-2xs font-bold tracking-wide", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onReleaseStreamChange(p.id, "latest");
+                                }, children: "main" }), _jsx(Button, { variant: selectedReleaseStream === "beta" ? "default" : "outline", size: "sm", className: "h-6 px-2 text-2xs font-bold tracking-wide", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onReleaseStreamChange(p.id, "beta");
+                                }, children: "beta" })] })), showReleaseControls && remoteVersionForSelection && (_jsxs("span", { className: "text-2xs font-mono text-muted/70 whitespace-nowrap", children: [selectedReleaseStream, ":", remoteVersionForSelection] })), _jsx("div", { className: "flex-1" }), isStoreInstallMissing && !isShowcase && !p.loadError && (_jsx(Button, { variant: "default", size: "sm", className: "h-7 px-3 text-2xs font-bold tracking-wide shadow-sm max-w-[140px] truncate", disabled: isInstalling || isUpdating || isUninstalling, onClick: (e) => {
+                            e.stopPropagation();
+                            onInstall(p.id, p.npmName ?? "");
+                        }, children: isInstalling
+                            ? installProgressLabel(installProgress.get(p.npmName ?? "")?.message)
+                            : installLabel })), canUpdate && (_jsx(Button, { variant: "outline", size: "sm", className: "h-7 px-3 text-2xs font-bold tracking-wide", disabled: isInstalling || isUpdating || isUninstalling, onClick: (e) => {
+                            e.stopPropagation();
+                            onUpdate(p.id, p.npmName ?? "");
+                        }, children: isUpdating
+                            ? t("common.updating", { defaultValue: "Updating..." })
+                            : t("pluginsview.Update", { defaultValue: "Update" }) })), canUninstall && (_jsx(Button, { variant: "outline", size: "sm", className: "h-7 px-3 text-2xs font-bold tracking-wide text-destructive border-destructive/40 hover:border-destructive", disabled: isInstalling || isUpdating || isUninstalling, onClick: (e) => {
+                            e.stopPropagation();
+                            onUninstall(p.id, p.npmName ?? "");
+                        }, children: isUninstalling
+                            ? t("pluginsview.Uninstalling", {
+                                defaultValue: "Uninstalling...",
+                            })
+                            : t("common.uninstall", {
+                                defaultValue: "Uninstall",
+                            }) })), hasParams && (_jsxs(Button, { variant: "ghost", size: "sm", className: `h-7 px-2.5 text-xs-tight font-bold transition-all flex items-center gap-1.5 ${isOpen
+                            ? "text-txt bg-accent/10 hover:bg-accent/20"
+                            : "text-muted hover:bg-bg-hover hover:text-txt"}`, onClick: (e) => {
+                            e.stopPropagation();
+                            onToggleSettings(p.id);
+                        }, title: t("nav.settings"), children: [_jsx("span", { className: "text-sm leading-none", children: "\u2699" }), _jsx("span", { className: `inline-block text-2xs transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`, children: "\u25B6" })] }))] }), p.enabled && p.validationErrors && p.validationErrors.length > 0 && (_jsx("div", { className: "px-3 py-1.5 border-t border-destructive bg-[rgba(153,27,27,0.04)] text-xs", children: p.validationErrors.map((err) => (_jsxs("div", { className: "text-destructive mb-0.5 text-2xs", children: [err.field, ": ", err.message] }, `${err.field}:${err.message}`))) })), p.enabled && p.validationWarnings && p.validationWarnings.length > 0 && (_jsx("div", { className: "px-3 py-1", children: p.validationWarnings.map((w) => (_jsx("div", { className: "text-warn text-2xs", children: w.message }, `${w.field}:${w.message}`))) }))] }, p.id));
+}

package/components/pages/PluginConfigForm.d.ts

@@ -0,0 +1,29 @@
+import type { PluginInfo } from "../../api";
+/**
+ * Hook that manages the "allow all / specific chats" toggle state.
+ * Mode is explicit (not derived from field value) so clearing the field
+ * doesn't flip the toggle. Returns the mode, a toggle handler, and
+ * hiddenKeys for PluginConfigForm.
+ */
+export declare function useTelegramChatMode(plugin: PluginInfo, pluginConfigs: Record<string, Record<string, string>>, onParamChange: (pluginId: string, paramKey: string, value: string) => void): {
+    allowAll: boolean;
+    toggle: (next: boolean) => void;
+    hiddenKeys: Set<string> | undefined;
+};
+export declare function TelegramChatModeToggle({ allowAll, onToggle, }: {
+    allowAll: boolean;
+    onToggle: (next: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Wraps PluginConfigForm with the Telegram chat mode toggle + hidden keys. */
+export declare function TelegramPluginConfig({ plugin, pluginConfigs, onParamChange, }: {
+    plugin: PluginInfo;
+    pluginConfigs: Record<string, Record<string, string>>;
+    onParamChange: (pluginId: string, paramKey: string, value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PluginConfigForm({ plugin, pluginConfigs, onParamChange, hiddenKeys, }: {
+    plugin: PluginInfo;
+    pluginConfigs: Record<string, Record<string, string>>;
+    onParamChange: (pluginId: string, paramKey: string, value: string) => void;
+    hiddenKeys?: Set<string>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginConfigForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginConfigForm.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginConfigForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAW5D;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACrD,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;;mBAkBjE,OAAO;;EAiBjB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,2CA2BA;AAED,+EAA+E;AAC/E,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,aAAa,EACb,aAAa,GACd,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,2CAkBA;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,aAAa,EACb,UAAU,GACX,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC1B,2CAgGA"}

package/components/pages/PluginConfigForm.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch } from "@elizaos/ui";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ConfigRenderer, defaultRegistry, } from "../../components/config-ui/config-renderer.js";
+import { useApp } from "../../state/index.js";
+import { paramsToSchema, TELEGRAM_ALLOW_ALL_HIDDEN } from "./plugin-list-utils.js";
+/* ── Telegram chat mode ─────────────────────────────────────────────── */
+/**
+ * Hook that manages the "allow all / specific chats" toggle state.
+ * Mode is explicit (not derived from field value) so clearing the field
+ * doesn't flip the toggle. Returns the mode, a toggle handler, and
+ * hiddenKeys for PluginConfigForm.
+ */
+export function useTelegramChatMode(plugin, pluginConfigs, onParamChange) {
+    const localValue = pluginConfigs.telegram?.TELEGRAM_ALLOWED_CHATS;
+    const serverValue = plugin.parameters?.find((p) => p.key === "TELEGRAM_ALLOWED_CHATS")
+        ?.currentValue ?? "";
+    const currentValue = localValue ?? serverValue;
+    // Explicit mode state — initialized from current value, then user-controlled
+    const [allowAll, setAllowAll] = useState(() => !currentValue.trim());
+    // Stash the last non-empty value so toggling back restores it
+    const stashedChats = useRef(currentValue);
+    if (currentValue.trim()) {
+        stashedChats.current = currentValue;
+    }
+    const toggle = useCallback((next) => {
+        setAllowAll(next);
+        if (next) {
+            onParamChange("telegram", "TELEGRAM_ALLOWED_CHATS", "");
+        }
+        else {
+            const restore = stashedChats.current?.trim() || "[]";
+            onParamChange("telegram", "TELEGRAM_ALLOWED_CHATS", restore);
+        }
+    }, [onParamChange]);
+    return {
+        allowAll,
+        toggle,
+        hiddenKeys: allowAll ? TELEGRAM_ALLOW_ALL_HIDDEN : undefined,
+    };
+}
+export function TelegramChatModeToggle({ allowAll, onToggle, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border bg-[var(--card,rgba(255,255,255,0.03))] px-4 py-3 mb-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: allowAll
+                            ? t("pluginsview.AllowAllChats", {
+                                defaultValue: "Allow all chats",
+                            })
+                            : t("pluginsview.AllowSpecificChatsOnly", {
+                                defaultValue: "Allow only specific chats",
+                            }) }), _jsx("span", { className: "text-xs-tight text-muted", children: allowAll
+                            ? t("pluginsview.BotRespondsAnyChat", {
+                                defaultValue: "Bot will respond in any chat",
+                            })
+                            : t("pluginsview.BotRespondsListedChatIds", {
+                                defaultValue: "Bot will only respond in listed chat IDs",
+                            }) })] }), _jsx(Switch, { checked: allowAll, onCheckedChange: onToggle })] }));
+}
+/** Wraps PluginConfigForm with the Telegram chat mode toggle + hidden keys. */
+export function TelegramPluginConfig({ plugin, pluginConfigs, onParamChange, }) {
+    const { allowAll, toggle, hiddenKeys } = useTelegramChatMode(plugin, pluginConfigs, onParamChange);
+    return (_jsxs(_Fragment, { children: [_jsx(TelegramChatModeToggle, { allowAll: allowAll, onToggle: toggle }), _jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: onParamChange, hiddenKeys: hiddenKeys })] }));
+}
+/* ── PluginConfigForm bridge ─────────────────────────────────────────── */
+export function PluginConfigForm({ plugin, pluginConfigs, onParamChange, hiddenKeys, }) {
+    const params = plugin.parameters ?? [];
+    const { schema, hints: autoHints } = useMemo(() => paramsToSchema(params, plugin.id), [params, plugin.id]);
+    // Merge server-provided configUiHints over auto-generated hints.
+    // Server hints take priority (override auto-generated ones).
+    // Also apply hiddenKeys from parent (e.g. Telegram chat mode toggle).
+    const hints = useMemo(() => {
+        const merged = { ...autoHints };
+        const serverHints = plugin.configUiHints;
+        if (serverHints) {
+            for (const [key, serverHint] of Object.entries(serverHints)) {
+                merged[key] = { ...merged[key], ...serverHint };
+            }
+        }
+        if (hiddenKeys) {
+            for (const key of hiddenKeys) {
+                merged[key] = { ...merged[key], hidden: true };
+            }
+        }
+        return merged;
+    }, [autoHints, plugin.configUiHints, hiddenKeys]);
+    // Build values from current config state + existing server values.
+    // Array-typed fields need comma-separated strings parsed into arrays.
+    const values = useMemo(() => {
+        const v = {};
+        const props = (schema.properties ?? {});
+        for (const p of params) {
+            const isArrayField = props[p.key]?.type === "array";
+            const configValue = pluginConfigs[plugin.id]?.[p.key];
+            if (configValue !== undefined) {
+                if (isArrayField && typeof configValue === "string") {
+                    v[p.key] = configValue
+                        ? configValue
+                            .split(",")
+                            .map((s) => s.trim())
+                            .filter(Boolean)
+                        : [];
+                }
+                else {
+                    v[p.key] = configValue;
+                }
+            }
+            else if (p.isSet && !p.sensitive && p.currentValue != null) {
+                if (isArrayField && typeof p.currentValue === "string") {
+                    v[p.key] = String(p.currentValue)
+                        ? String(p.currentValue)
+                            .split(",")
+                            .map((s) => s.trim())
+                            .filter(Boolean)
+                        : [];
+                }
+                else {
+                    v[p.key] = p.currentValue;
+                }
+            }
+        }
+        return v;
+    }, [params, plugin.id, pluginConfigs, schema]);
+    const setKeys = useMemo(() => new Set(params
+        .filter((p) => p.isSet)
+        .map((p) => p.key)), [params]);
+    const handleChange = useCallback((key, value) => {
+        // Join array values back to comma-separated strings for env var storage
+        const stringValue = Array.isArray(value)
+            ? value.join(", ")
+            : String(value ?? "");
+        onParamChange(plugin.id, key, stringValue);
+    }, [plugin.id, onParamChange]);
+    return (_jsx(ConfigRenderer, { schema: schema, hints: hints, values: values, setKeys: setKeys, registry: defaultRegistry, pluginId: plugin.id, onChange: handleChange }));
+}

package/components/pages/PluginsPageView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Plugins view — plugin management surface.
+ */
+import type { ReactNode } from "react";
+export declare function PluginsPageView({ contentHeader, inModal, }?: {
+    contentHeader?: ReactNode;
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginsPageView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginsPageView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAQL"}

package/components/pages/PluginsPageView.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PluginsView } from "./PluginsView.js";
+export function PluginsPageView({ contentHeader, inModal, } = {}) {
+    return (_jsx(PluginsView, { contentHeader: contentHeader, mode: "all-social", inModal: inModal ?? false }));
+}

package/components/pages/PluginsView.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type PluginsViewMode } from "./plugin-list-utils";
+export { paramsToSchema } from "./plugin-list-utils";
+/** Plugins view — tag-filtered plugin list. */
+export declare function PluginsView({ contentHeader, mode, inModal, connectorDesktopPlacement, }: {
+    contentHeader?: ReactNode;
+    mode?: PluginsViewMode;
+    inModal?: boolean;
+    connectorDesktopPlacement?: "left" | "right";
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginsView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginsView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAMf,OAAO,EAIL,KAAK,eAAe,EAIrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAg3CrD,+CAA+C;AAC/C,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,IAAY,EACZ,OAAO,EACP,yBAAkC,GACnC,EAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9C,2CAoBA"}