@elizaos/agent 2.0.0-alpha.520 → 2.0.0-alpha.521

package/packages/app-core/src/components/pages/PluginsView.js

@@ -1,813 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Package } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { client } from "../../api";
-import { useApp } from "../../state";
-import { openExternalUrl } from "../../utils";
-import { buildPluginListState, getPluginResourceLinks, iconImageSource, resolveIcon, SUBGROUP_NAV_ICONS, } from "./plugin-list-utils";
-export { paramsToSchema } from "./plugin-list-utils";
-import { Button, PageLayoutHeader, PagePanel, SidebarContent, SidebarPanel, SidebarScrollRegion, useLinkedSidebarSelection, } from "@elizaos/ui";
-import { AppPageSidebar } from "../shared/AppPageSidebar";
-import { PluginCard } from "./PluginCard";
-import { ConnectorPluginGroups, } from "./plugin-view-connectors";
-import { PluginSettingsDialog } from "./plugin-view-dialogs";
-import { PluginGameModal } from "./plugin-view-modal";
-import { ConnectorSidebar } from "./plugin-view-sidebar";
-function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
-    const { plugins = [], pluginStatusFilter = "all", pluginSearch = "", pluginSettingsOpen = new Set(), pluginSaving, pluginSaveSuccess, loadPlugins, ensurePluginsLoaded = async () => {
-        await loadPlugins();
-    }, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useApp();
-    const [pluginConfigs, setPluginConfigs] = useState({});
-    const [testResults, setTestResults] = useState(new Map());
-    const [installingPlugins, setInstallingPlugins] = useState(new Set());
-    const [installProgress, setInstallProgress] = useState(new Map());
-    const [updatingPlugins, setUpdatingPlugins] = useState(new Set());
-    const [uninstallingPlugins, setUninstallingPlugins] = useState(new Set());
-    const [pluginReleaseStreams, setPluginReleaseStreams] = useState({});
-    const pluginDescriptionFallback = t("pluginsview.NoDescriptionAvailable", {
-        defaultValue: "No description available",
-    });
-    const installProgressLabel = (message) => message ||
-        t("common.installing", {
-            defaultValue: "Installing...",
-        });
-    const installPluginLabel = t("pluginsview.InstallPlugin", {
-        defaultValue: "Install Plugin",
-    });
-    const installLabel = t("common.install", {
-        defaultValue: "Install",
-    });
-    const testingLabel = t("common.testing", {
-        defaultValue: "Testing...",
-    });
-    const saveSettingsLabel = t("pluginsview.SaveSettings", {
-        defaultValue: "Save Settings",
-    });
-    const saveLabel = t("common.save", { defaultValue: "Save" });
-    const savingLabel = t("common.saving", {
-        defaultValue: "Saving...",
-    });
-    const savedLabel = t("common.saved", {
-        defaultValue: "Saved",
-    });
-    const savedWithBangLabel = t("pluginsview.SavedWithBang", {
-        defaultValue: "Saved!",
-    });
-    const readyLabel = t("common.ready", { defaultValue: "Ready" });
-    const needsSetupLabel = t("common.needsSetup", {
-        defaultValue: "Needs setup",
-    });
-    const loadFailedLabel = t("pluginsview.LoadFailed", {
-        defaultValue: "Load failed",
-    });
-    const notInstalledLabel = t("pluginsview.NotInstalled", {
-        defaultValue: "Not installed",
-    });
-    const expandLabel = t("common.expand", { defaultValue: "Expand" });
-    const collapseLabel = t("common.collapse", {
-        defaultValue: "Collapse",
-    });
-    const noConfigurationNeededLabel = t("pluginsview.NoConfigurationNeeded", {
-        defaultValue: "No configuration needed.",
-    });
-    const connectorInstallPrompt = t("pluginsview.InstallConnectorPrompt", {
-        defaultValue: "Install this connector to activate it in the runtime.",
-    });
-    const formatTestConnectionLabel = (result) => {
-        if (result?.loading)
-            return testingLabel;
-        if (result?.success) {
-            return t("pluginsview.ConnectionTestPassed", {
-                durationMs: result.durationMs,
-                defaultValue: "OK ({{durationMs}}ms)",
-            });
-        }
-        if (result?.error) {
-            return t("pluginsview.ConnectionTestFailed", {
-                error: result.error,
-                defaultValue: "Failed: {{error}}",
-            });
-        }
-        return t("pluginsview.TestConnection");
-    };
-    const formatDialogTestConnectionLabel = (result) => {
-        if (result?.loading)
-            return testingLabel;
-        if (result?.success) {
-            return t("pluginsview.ConnectionTestPassedDialog", {
-                durationMs: result.durationMs,
-                defaultValue: "✓ OK ({{durationMs}}ms)",
-            });
-        }
-        if (result?.error) {
-            return t("pluginsview.ConnectionTestFailedDialog", {
-                error: result.error,
-                defaultValue: "✕ {{error}}",
-            });
-        }
-        return t("pluginsview.TestConnection");
-    };
-    const formatSaveSettingsLabel = (isSaving, didSave) => {
-        if (isSaving)
-            return savingLabel;
-        if (didSave)
-            return savedLabel;
-        return saveSettingsLabel;
-    };
-    const [togglingPlugins, setTogglingPlugins] = useState(new Set());
-    const hasPluginToggleInFlight = togglingPlugins.size > 0;
-    const [pluginOrder, setPluginOrder] = useState(() => {
-        try {
-            const stored = localStorage.getItem("pluginOrder");
-            return stored ? JSON.parse(stored) : [];
-        }
-        catch {
-            return [];
-        }
-    });
-    const [draggingId, setDraggingId] = useState(null);
-    const [dragOverId, setDragOverId] = useState(null);
-    const dragRef = useRef(null);
-    const isConnectorShellMode = mode === "social";
-    const isSocialMode = mode === "social" || mode === "all-social";
-    const isSidebarEditorShellMode = mode === "social" || mode === "all-social";
-    const isConnectorLikeMode = mode === "connectors" || mode === "social";
-    const resultLabel = mode === "social" ? "connectors" : label.toLowerCase();
-    const effectiveStatusFilter = isSidebarEditorShellMode
-        ? pluginStatusFilter
-        : "all";
-    const effectiveSearch = isSidebarEditorShellMode ? pluginSearch : "";
-    const allowCustomOrder = !isSocialMode;
-    // Load plugins on mount
-    useEffect(() => {
-        void ensurePluginsLoaded();
-    }, [ensurePluginsLoaded]);
-    // Listen for install progress events via WebSocket
-    useEffect(() => {
-        const unbind = client.onWsEvent("install-progress", (data) => {
-            const pluginName = data.pluginName;
-            const phase = data.phase;
-            const message = data.message;
-            if (!pluginName)
-                return;
-            if (phase === "complete" || phase === "error") {
-                setInstallProgress((prev) => {
-                    const next = new Map(prev);
-                    next.delete(pluginName);
-                    return next;
-                });
-            }
-            else {
-                setInstallProgress((prev) => new Map(prev).set(pluginName, { phase, message }));
-            }
-        });
-        return unbind;
-    }, []);
-    // Persist custom order
-    useEffect(() => {
-        if (pluginOrder.length > 0) {
-            localStorage.setItem("pluginOrder", JSON.stringify(pluginOrder));
-        }
-    }, [pluginOrder]);
-    const [subgroupFilter, setSubgroupFilter] = useState("all");
-    const showSubgroupFilters = mode !== "connectors" && mode !== "streaming" && mode !== "social";
-    const showDesktopSubgroupSidebar = showSubgroupFilters;
-    const { nonDbPlugins, sorted, subgroupTags, visiblePlugins } = useMemo(() => buildPluginListState({
-        allowCustomOrder,
-        effectiveSearch,
-        effectiveStatusFilter,
-        isConnectorLikeMode,
-        mode,
-        pluginOrder,
-        plugins,
-        showSubgroupFilters,
-        subgroupFilter,
-    }), [
-        allowCustomOrder,
-        effectiveSearch,
-        effectiveStatusFilter,
-        isConnectorLikeMode,
-        mode,
-        pluginOrder,
-        plugins,
-        showSubgroupFilters,
-        subgroupFilter,
-    ]);
-    useEffect(() => {
-        if (!showSubgroupFilters)
-            return;
-        if (subgroupFilter === "all")
-            return;
-        if (!subgroupTags.some((tag) => tag.id === subgroupFilter)) {
-            setSubgroupFilter("all");
-        }
-    }, [showSubgroupFilters, subgroupFilter, subgroupTags]);
-    const renderSubgroupFilterButton = useCallback((tag, options) => {
-        const isActive = subgroupFilter === tag.id;
-        if (options?.sidebar) {
-            const Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
-            return (_jsxs(SidebarContent.Item, { as: "button", onClick: () => setSubgroupFilter(tag.id), "aria-current": isActive ? "page" : undefined, active: isActive, className: "items-center", children: [_jsx(SidebarContent.ItemIcon, { active: isActive, children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { className: "whitespace-nowrap break-normal [overflow-wrap:normal]", children: tag.label }), _jsx(SidebarContent.ItemDescription, { children: t("pluginsview.AvailableCount", {
-                                    count: tag.count,
-                                    defaultValue: "{{count}} available",
-                                }) })] }), _jsx(PagePanel.Meta, { compact: true, tone: isActive ? "accent" : "default", className: "text-2xs font-bold tracking-[0.16em]", children: tag.count })] }, tag.id));
-        }
-        return (_jsxs(Button, { variant: isActive ? "default" : "outline", size: "sm", className: `h-7 px-3 text-xs-tight font-bold tracking-wide rounded-[var(--radius-md)] transition-all ${isActive
-                ? "border-accent/55 bg-accent/16 text-txt-strong shadow-sm"
-                : "bg-card/40 backdrop-blur-sm border-border/40 text-muted hover:text-txt shadow-sm hover:border-accent/30"}`, onClick: () => setSubgroupFilter(tag.id), children: [tag.label, _jsx("span", { className: `ml-1.5 rounded border px-1.5 py-0.5 text-3xs font-mono leading-none ${isActive
-                        ? "border-accent/30 bg-accent/12 text-txt-strong"
-                        : "border-border/50 bg-bg-accent/80 text-muted-strong"}`, children: tag.count })] }, tag.id));
-    }, [subgroupFilter, t]);
-    const toggleSettings = (pluginId) => {
-        const next = new Set();
-        if (!pluginSettingsOpen.has(pluginId))
-            next.add(pluginId);
-        setState("pluginSettingsOpen", next);
-    };
-    const handleParamChange = (pluginId, paramKey, value) => {
-        setPluginConfigs((prev) => ({
-            ...prev,
-            [pluginId]: { ...prev[pluginId], [paramKey]: value },
-        }));
-    };
-    const handleConfigSave = async (pluginId) => {
-        if (pluginId === "__ui-showcase__")
-            return;
-        const config = pluginConfigs[pluginId] ?? {};
-        await handlePluginConfigSave(pluginId, config);
-        setPluginConfigs((prev) => {
-            const next = { ...prev };
-            delete next[pluginId];
-            return next;
-        });
-    };
-    const handleConfigReset = (pluginId) => {
-        setPluginConfigs((prev) => {
-            const next = { ...prev };
-            delete next[pluginId];
-            return next;
-        });
-    };
-    const handleTestConnection = async (pluginId) => {
-        setTestResults((prev) => {
-            const next = new Map(prev);
-            next.set(pluginId, { success: false, loading: true, durationMs: 0 });
-            return next;
-        });
-        try {
-            const result = await client.testPluginConnection(pluginId);
-            setTestResults((prev) => {
-                const next = new Map(prev);
-                next.set(pluginId, { ...result, loading: false });
-                return next;
-            });
-        }
-        catch (err) {
-            setTestResults((prev) => {
-                const next = new Map(prev);
-                next.set(pluginId, {
-                    success: false,
-                    error: err instanceof Error ? err.message : String(err),
-                    loading: false,
-                    durationMs: 0,
-                });
-                return next;
-            });
-        }
-    };
-    const getSelectedReleaseStream = useCallback((plugin) => pluginReleaseStreams[plugin.id] ??
-        plugin.releaseStream ??
-        (plugin.alphaVersion ? "alpha" : "latest"), [pluginReleaseStreams]);
-    const handleReleaseStreamChange = useCallback((pluginId, stream) => {
-        setPluginReleaseStreams((prev) => {
-            if (prev[pluginId] === stream)
-                return prev;
-            return { ...prev, [pluginId]: stream };
-        });
-    }, []);
-    const clearPluginReleaseStream = useCallback((pluginId) => {
-        setPluginReleaseStreams((prev) => {
-            if (!(pluginId in prev))
-                return prev;
-            const next = { ...prev };
-            delete next[pluginId];
-            return next;
-        });
-    }, []);
-    // The plugin manager capability ships built-in with @elizaos/core, so no
-    // preflight enable / restart is required before invoking lifecycle tasks.
-    const runWithPluginManager = useCallback(async (_pluginName, _notices, task) => task(), []);
-    const completePluginLifecycleRestart = useCallback(async (messages) => {
-        setActionNotice(messages.waiting, "info", 120_000, false, true);
-        const status = await client.restartAndWait(120_000);
-        if (status.state !== "running") {
-            setActionNotice(messages.failure.replace("{{status}}", status.state), "error", 3800);
-            return false;
-        }
-        await loadPlugins();
-        setActionNotice(messages.success, "success");
-        return true;
-    }, [loadPlugins, setActionNotice]);
-    const handleInstallPlugin = async (pluginId, npmName) => {
-        const plugin = plugins.find((candidate) => candidate.id === pluginId);
-        const stream = plugin ? getSelectedReleaseStream(plugin) : "alpha";
-        setInstallingPlugins((prev) => new Set(prev).add(pluginId));
-        try {
-            const result = (await runWithPluginManager(npmName, {
-                prepare: t("pluginsview.PluginInstallPreparing", {
-                    plugin: npmName,
-                    defaultValue: "Enabling plugin installs for {{plugin}} and restarting the agent...",
-                }),
-                recover: t("pluginsview.PluginInstallRecovering", {
-                    plugin: npmName,
-                    defaultValue: "Finishing plugin install setup for {{plugin}} and restarting the agent...",
-                }),
-            }, async () => await client.installRegistryPlugin(npmName, false, { stream })));
-            if (result.requiresRestart) {
-                const restarted = await completePluginLifecycleRestart({
-                    waiting: t("pluginsview.PluginInstalledRestarting", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} installed. Restarting the agent and waiting for activation...",
-                    }),
-                    success: t("pluginsview.PluginInstalledRestartComplete", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} installed and activated.",
-                    }),
-                    failure: t("pluginsview.PluginInstalledRestartFailed", {
-                        plugin: npmName,
-                        status: "{{status}}",
-                        defaultValue: "{{plugin}} installed, but the agent did not come back online (status: {{status}}).",
-                    }),
-                });
-                // Preserve the chosen stream on install failure so retry uses the same target.
-                if (!restarted)
-                    return;
-            }
-            else {
-                await loadPlugins();
-                setActionNotice(t("pluginsview.PluginInstalledActivated", {
-                    plugin: npmName,
-                    defaultValue: "{{plugin}} installed and activated without a full agent restart.",
-                }), "success");
-            }
-        }
-        catch (err) {
-            setActionNotice(t("pluginsview.PluginInstallFailed", {
-                plugin: npmName,
-                message: err instanceof Error ? err.message : "unknown error",
-                defaultValue: "Failed to install {{plugin}}: {{message}}",
-            }), "error", 3800);
-            // Still try to refresh in case install succeeded but restart failed
-            try {
-                await loadPlugins();
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        finally {
-            setInstallingPlugins((prev) => {
-                const next = new Set(prev);
-                next.delete(pluginId);
-                return next;
-            });
-        }
-    };
-    const handleUpdatePlugin = async (pluginId, npmName) => {
-        const plugin = plugins.find((candidate) => candidate.id === pluginId);
-        const stream = plugin ? getSelectedReleaseStream(plugin) : "alpha";
-        setUpdatingPlugins((prev) => new Set(prev).add(pluginId));
-        try {
-            const result = (await runWithPluginManager(npmName, {
-                prepare: t("pluginsview.PluginUpdatePreparing", {
-                    plugin: npmName,
-                    defaultValue: "Preparing updates for {{plugin}} and restarting the agent...",
-                }),
-                recover: t("pluginsview.PluginUpdateRecovering", {
-                    plugin: npmName,
-                    defaultValue: "Finishing update setup for {{plugin}} and restarting the agent...",
-                }),
-            }, async () => await client.updateRegistryPlugin(npmName, false, { stream })));
-            if (result.requiresRestart) {
-                const restarted = await completePluginLifecycleRestart({
-                    waiting: t("pluginsview.PluginUpdatedRestarting", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} updated. Restarting the agent and waiting for activation...",
-                    }),
-                    success: t("pluginsview.PluginUpdatedRestartComplete", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} updated and activated.",
-                    }),
-                    failure: t("pluginsview.PluginUpdatedRestartFailed", {
-                        plugin: npmName,
-                        status: "{{status}}",
-                        defaultValue: "{{plugin}} updated, but the agent did not come back online (status: {{status}}).",
-                    }),
-                });
-                // Preserve the chosen stream on update failure so retry uses the same target.
-                if (!restarted)
-                    return;
-            }
-            else {
-                await loadPlugins();
-                setActionNotice(t("pluginsview.PluginUpdatedActivated", {
-                    plugin: npmName,
-                    defaultValue: "{{plugin}} updated without a full agent restart.",
-                }), "success");
-            }
-        }
-        catch (err) {
-            setActionNotice(t("pluginsview.PluginUpdateFailed", {
-                plugin: npmName,
-                message: err instanceof Error ? err.message : "unknown error",
-                defaultValue: "Failed to update {{plugin}}: {{message}}",
-            }), "error", 3800);
-            try {
-                await loadPlugins();
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        finally {
-            setUpdatingPlugins((prev) => {
-                const next = new Set(prev);
-                next.delete(pluginId);
-                return next;
-            });
-        }
-    };
-    const handleUninstallPlugin = async (pluginId, npmName) => {
-        setUninstallingPlugins((prev) => new Set(prev).add(pluginId));
-        try {
-            const result = (await runWithPluginManager(npmName, {
-                prepare: t("pluginsview.PluginUninstallPreparing", {
-                    plugin: npmName,
-                    defaultValue: "Preparing uninstall for {{plugin}} and restarting the agent...",
-                }),
-                recover: t("pluginsview.PluginUninstallRecovering", {
-                    plugin: npmName,
-                    defaultValue: "Finishing uninstall setup for {{plugin}} and restarting the agent...",
-                }),
-            }, async () => await client.uninstallRegistryPlugin(npmName, false)));
-            if (result.requiresRestart) {
-                const restarted = await completePluginLifecycleRestart({
-                    waiting: t("pluginsview.PluginUninstalledRestarting", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} uninstalled. Restarting the agent and waiting for cleanup...",
-                    }),
-                    success: t("pluginsview.PluginUninstalledRestartComplete", {
-                        plugin: npmName,
-                        defaultValue: "{{plugin}} uninstalled and fully unloaded.",
-                    }),
-                    failure: t("pluginsview.PluginUninstalledRestartFailed", {
-                        plugin: npmName,
-                        status: "{{status}}",
-                        defaultValue: "{{plugin}} uninstalled, but the agent did not come back online (status: {{status}}).",
-                    }),
-                });
-                if (!restarted) {
-                    clearPluginReleaseStream(pluginId);
-                    return;
-                }
-            }
-            else {
-                await loadPlugins();
-                setActionNotice(t("pluginsview.PluginUninstalledActivated", {
-                    plugin: npmName,
-                    defaultValue: "{{plugin}} uninstalled without a full agent restart.",
-                }), "success");
-            }
-            clearPluginReleaseStream(pluginId);
-        }
-        catch (err) {
-            setActionNotice(t("pluginsview.PluginUninstallFailed", {
-                plugin: npmName,
-                message: err instanceof Error ? err.message : "unknown error",
-                defaultValue: "Failed to uninstall {{plugin}}: {{message}}",
-            }), "error", 3800);
-            try {
-                await loadPlugins();
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        finally {
-            setUninstallingPlugins((prev) => {
-                const next = new Set(prev);
-                next.delete(pluginId);
-                return next;
-            });
-        }
-    };
-    const handleTogglePlugin = useCallback(async (pluginId, enabled) => {
-        let shouldStart = false;
-        setTogglingPlugins((prev) => {
-            if (prev.has(pluginId) || prev.size > 0)
-                return prev;
-            shouldStart = true;
-            return new Set(prev).add(pluginId);
-        });
-        if (!shouldStart)
-            return;
-        try {
-            await handlePluginToggle(pluginId, enabled);
-        }
-        finally {
-            setTogglingPlugins((prev) => {
-                const next = new Set(prev);
-                next.delete(pluginId);
-                return next;
-            });
-        }
-    }, [handlePluginToggle]);
-    const handleOpenPluginExternalUrl = useCallback(async (url) => {
-        try {
-            await openExternalUrl(url);
-        }
-        catch (err) {
-            setActionNotice(err instanceof Error ? err.message : "Failed to open external link.", "error", 4200);
-        }
-    }, [setActionNotice]);
-    const handleDragStart = useCallback((e, pluginId) => {
-        dragRef.current = pluginId;
-        setDraggingId(pluginId);
-        e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.setData("text/plain", pluginId);
-    }, []);
-    const handleDragOver = useCallback((e, pluginId) => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = "move";
-        if (dragRef.current && dragRef.current !== pluginId) {
-            setDragOverId(pluginId);
-        }
-    }, []);
-    const handleDrop = useCallback((e, targetId) => {
-        e.preventDefault();
-        const srcId = dragRef.current;
-        if (!srcId || srcId === targetId) {
-            dragRef.current = null;
-            setDraggingId(null);
-            setDragOverId(null);
-            return;
-        }
-        // Materialize current sorted order, then splice
-        if (!allowCustomOrder)
-            return;
-        setPluginOrder(() => {
-            // Build full order: items in custom order first, then any new ones
-            const allIds = nonDbPlugins.map((p) => p.id);
-            let ids;
-            if (pluginOrder.length > 0) {
-                const known = new Set(pluginOrder);
-                ids = [...pluginOrder, ...allIds.filter((id) => !known.has(id))];
-            }
-            else {
-                ids = sorted.map((p) => p.id);
-                // Pad with any nonDbPlugins not currently in sorted (due to filters)
-                const inSorted = new Set(ids);
-                for (const id of allIds) {
-                    if (!inSorted.has(id))
-                        ids.push(id);
-                }
-            }
-            const fromIdx = ids.indexOf(srcId);
-            const toIdx = ids.indexOf(targetId);
-            if (fromIdx === -1 || toIdx === -1)
-                return ids;
-            ids.splice(fromIdx, 1);
-            ids.splice(toIdx, 0, srcId);
-            return ids;
-        });
-        dragRef.current = null;
-        setDraggingId(null);
-        setDragOverId(null);
-    }, [allowCustomOrder, nonDbPlugins, pluginOrder, sorted]);
-    const handleDragEnd = useCallback(() => {
-        dragRef.current = null;
-        setDraggingId(null);
-        setDragOverId(null);
-    }, []);
-    const handleResetOrder = useCallback(() => {
-        setPluginOrder([]);
-        localStorage.removeItem("pluginOrder");
-    }, []);
-    const renderResolvedIcon = useCallback((plugin, options) => {
-        const icon = resolveIcon(plugin);
-        if (!icon) {
-            return _jsx("span", { className: options?.emojiClassName ?? "text-sm", children: "\uD83E\uDDE9" });
-        }
-        if (typeof icon === "string") {
-            const imageSrc = iconImageSource(icon);
-            return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: options?.className ??
-                    "w-5 h-5 rounded-[var(--radius-sm)] object-contain", onError: (e) => {
-                    e.currentTarget.style.display = "none";
-                } })) : (_jsx("span", { className: options?.emojiClassName ?? "text-sm", children: icon }));
-        }
-        const IconComponent = icon;
-        return _jsx(IconComponent, { className: options?.className ?? "w-5 h-5" });
-    }, []);
-    /** Render a grid of plugin cards. */
-    const renderPluginGrid = (plugins) => (_jsx("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3 m-0 p-0 list-none", children: plugins.map((p) => (_jsx(PluginCard, { plugin: p, allowCustomOrder: allowCustomOrder, pluginSettingsOpen: pluginSettingsOpen, togglingPlugins: togglingPlugins, hasPluginToggleInFlight: hasPluginToggleInFlight, installingPlugins: installingPlugins, updatingPlugins: updatingPlugins, uninstallingPlugins: uninstallingPlugins, installProgress: installProgress, releaseStreamSelections: pluginReleaseStreams, draggingId: draggingId, dragOverId: dragOverId, pluginDescriptionFallback: pluginDescriptionFallback, onToggle: handleTogglePlugin, onToggleSettings: toggleSettings, onInstall: handleInstallPlugin, onUpdate: handleUpdatePlugin, onUninstall: handleUninstallPlugin, onReleaseStreamChange: handleReleaseStreamChange, onOpenExternalUrl: handleOpenPluginExternalUrl, onDragStart: handleDragStart, onDragOver: handleDragOver, onDrop: handleDrop, onDragEnd: handleDragEnd, installProgressLabel: installProgressLabel, installLabel: installLabel, loadFailedLabel: loadFailedLabel, notInstalledLabel: notInstalledLabel }, p.id))) }));
-    // Resolve the plugin whose settings dialog is currently open.
-    // Exclude ai-provider plugins — those are configured in Settings.
-    const settingsDialogPlugin = Array.from(pluginSettingsOpen)
-        .map((id) => nonDbPlugins.find((plugin) => plugin.id === id) ?? null)
-        .find((plugin) => (plugin?.parameters?.length ?? 0) > 0) ?? null;
-    const [gameSelectedId, setGameSelectedId] = useState(null);
-    const [gameMobileDetail, setGameMobileDetail] = useState(false);
-    const gameNarrow = typeof window !== "undefined" && typeof window.matchMedia === "function"
-        ? window.matchMedia("(max-width: 600px)").matches
-        : false;
-    const readDesktopConnectorLayout = () => typeof window !== "undefined" && typeof window.matchMedia === "function"
-        ? window.matchMedia("(min-width: 1024px)").matches
-        : false;
-    const initialDesktopConnectorLayout = readDesktopConnectorLayout();
-    const [connectorExpandedIds, setConnectorExpandedIds] = useState(() => new Set());
-    const [connectorSelectedId, setConnectorSelectedId] = useState(() => isSidebarEditorShellMode && initialDesktopConnectorLayout
-        ? (visiblePlugins[0]?.id ?? null)
-        : null);
-    const [desktopConnectorLayout, setDesktopConnectorLayout] = useState(initialDesktopConnectorLayout);
-    const { contentContainerRef: connectorContentRef, queueContentAlignment: queueConnectorContentAlignment, registerContentItem: registerConnectorContentItem, registerRailItem: registerConnectorRailItem, registerSidebarItem: registerConnectorSidebarItem, registerSidebarViewport: registerConnectorSidebarViewport, scrollContentToItem: scrollConnectorIntoView, } = useLinkedSidebarSelection({
-        contentTopOffset: 0,
-        enabled: isSidebarEditorShellMode,
-        selectedId: connectorSelectedId,
-        topAlignedId: visiblePlugins[0]?.id ?? null,
-    });
-    // Auto-select first visible plugin in game modal
-    const gameVisiblePlugins = visiblePlugins.filter((p) => p.id !== "__ui-showcase__");
-    const effectiveGameSelected = gameVisiblePlugins.find((p) => p.id === gameSelectedId)
-        ? gameSelectedId
-        : (gameVisiblePlugins[0]?.id ?? null);
-    const selectedPlugin = gameVisiblePlugins.find((p) => p.id === effectiveGameSelected) ?? null;
-    const selectedPluginLinks = selectedPlugin
-        ? getPluginResourceLinks(selectedPlugin, {
-            draftConfig: pluginConfigs[selectedPlugin.id],
-        })
-        : [];
-    useEffect(() => {
-        if (!isConnectorShellMode)
-            return;
-        if (pluginStatusFilter !== "disabled")
-            return;
-        setState("pluginStatusFilter", "all");
-    }, [isConnectorShellMode, pluginStatusFilter, setState]);
-    useEffect(() => {
-        if (!isSidebarEditorShellMode)
-            return;
-        if (typeof window === "undefined" ||
-            typeof window.matchMedia !== "function")
-            return;
-        const media = window.matchMedia("(min-width: 1024px)");
-        const syncLayout = () => {
-            setDesktopConnectorLayout(media.matches);
-        };
-        syncLayout();
-        if (typeof media.addEventListener === "function") {
-            media.addEventListener("change", syncLayout);
-            return () => media.removeEventListener("change", syncLayout);
-        }
-        media.addListener(syncLayout);
-        return () => media.removeListener(syncLayout);
-    }, [isSidebarEditorShellMode]);
-    useEffect(() => {
-        if (!isSidebarEditorShellMode)
-            return;
-        if (visiblePlugins.length === 0) {
-            setConnectorSelectedId(null);
-            setConnectorExpandedIds(new Set());
-            return;
-        }
-        setConnectorSelectedId((prev) => {
-            if (visiblePlugins.some((plugin) => plugin.id === prev)) {
-                return prev;
-            }
-            return desktopConnectorLayout ? (visiblePlugins[0]?.id ?? null) : null;
-        });
-        setConnectorExpandedIds((prev) => {
-            const next = new Set([...prev].filter((id) => visiblePlugins.some((plugin) => plugin.id === id)));
-            if (next.size === prev.size)
-                return prev;
-            return next;
-        });
-    }, [desktopConnectorLayout, isSidebarEditorShellMode, visiblePlugins]);
-    const handleConnectorSelect = useCallback((pluginId) => {
-        setConnectorSelectedId(pluginId);
-        if (desktopConnectorLayout) {
-            setConnectorExpandedIds(new Set([pluginId]));
-            queueConnectorContentAlignment(pluginId);
-        }
-        else {
-            scrollConnectorIntoView(pluginId);
-        }
-    }, [
-        desktopConnectorLayout,
-        queueConnectorContentAlignment,
-        scrollConnectorIntoView,
-    ]);
-    const handleConnectorExpandedChange = useCallback((pluginId, nextExpanded) => {
-        setConnectorSelectedId(pluginId);
-        if (desktopConnectorLayout) {
-            setConnectorExpandedIds((prev) => {
-                if (nextExpanded) {
-                    if (prev.size === 1 && prev.has(pluginId))
-                        return prev;
-                    return new Set([pluginId]);
-                }
-                if (!prev.has(pluginId))
-                    return prev;
-                return new Set();
-            });
-            if (nextExpanded) {
-                queueConnectorContentAlignment(pluginId);
-            }
-            return;
-        }
-        setConnectorExpandedIds((prev) => {
-            const isExpanded = prev.has(pluginId);
-            if (isExpanded === nextExpanded)
-                return prev;
-            const next = new Set(prev);
-            if (nextExpanded)
-                next.add(pluginId);
-            else
-                next.delete(pluginId);
-            return next;
-        });
-        if (nextExpanded) {
-            scrollConnectorIntoView(pluginId);
-        }
-    }, [
-        desktopConnectorLayout,
-        queueConnectorContentAlignment,
-        scrollConnectorIntoView,
-    ]);
-    const handleConnectorSectionToggle = useCallback((pluginId) => {
-        handleConnectorExpandedChange(pluginId, !connectorExpandedIds.has(pluginId));
-    }, [connectorExpandedIds, handleConnectorExpandedChange]);
-    if (isSidebarEditorShellMode) {
-        const shellEmptyTitle = mode === "social" ? "No connectors available" : "No plugins available";
-        const shellEmptyDescription = mode === "social"
-            ? "This workspace will list connector integrations as they become available."
-            : "This workspace will list plugins here as they become available.";
-        const hasActivePluginFilters = pluginSearch.trim().length > 0 || subgroupFilter !== "all";
-        const _desktopSidebar = (_jsx(ConnectorSidebar, { collapseLabel: collapseLabel, connectorExpandedIds: connectorExpandedIds, connectorSelectedId: connectorSelectedId, desktopConnectorLayout: desktopConnectorLayout, expandLabel: expandLabel, hasPluginToggleInFlight: hasPluginToggleInFlight, mode: mode, onConnectorSelect: handleConnectorSelect, onConnectorSectionToggle: handleConnectorSectionToggle, onSearchChange: (value) => setState("pluginSearch", value), onSearchClear: () => setState("pluginSearch", ""), onSubgroupFilterChange: (value) => setSubgroupFilter(value), onTogglePlugin: handleTogglePlugin, pluginSearch: pluginSearch, registerConnectorRailItem: registerConnectorRailItem, registerConnectorSidebarItem: registerConnectorSidebarItem, registerConnectorSidebarViewport: registerConnectorSidebarViewport, renderResolvedIcon: renderResolvedIcon, resultLabel: resultLabel, subgroupFilter: subgroupFilter, subgroupTags: subgroupTags, t: t, togglingPlugins: togglingPlugins, visiblePlugins: visiblePlugins }));
-        const connectorContent = (_jsxs("div", { className: "w-full", children: [hasPluginToggleInFlight && (_jsx(PagePanel.Notice, { tone: "accent", className: "mb-4 text-xs-tight", children: t("pluginsview.ApplyingPluginChan") })), visiblePlugins.length === 0 ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[18rem] rounded-[1.6rem] px-5 py-10", description: hasActivePluginFilters
-                        ? `Try a different search or category filter for ${resultLabel}.`
-                        : shellEmptyDescription, title: hasActivePluginFilters
-                        ? `No ${resultLabel} match your filters`
-                        : shellEmptyTitle })) : (_jsx("div", { "data-testid": "connectors-settings-content", className: "space-y-1", children: _jsx(ConnectorPluginGroups, { collapseLabel: collapseLabel, connectorExpandedIds: connectorExpandedIds, connectorInstallPrompt: connectorInstallPrompt, connectorSelectedId: connectorSelectedId, expandLabel: expandLabel, formatSaveSettingsLabel: formatSaveSettingsLabel, formatTestConnectionLabel: formatTestConnectionLabel, handleConfigReset: handleConfigReset, handleConfigSave: handleConfigSave, handleConnectorExpandedChange: handleConnectorExpandedChange, handleConnectorSectionToggle: handleConnectorSectionToggle, handleInstallPlugin: handleInstallPlugin, handleOpenPluginExternalUrl: handleOpenPluginExternalUrl, handleParamChange: handleParamChange, handleTestConnection: handleTestConnection, handleTogglePlugin: handleTogglePlugin, hasPluginToggleInFlight: hasPluginToggleInFlight, installPluginLabel: installPluginLabel, installProgress: installProgress, installProgressLabel: installProgressLabel, installingPlugins: installingPlugins, loadFailedLabel: loadFailedLabel, needsSetupLabel: needsSetupLabel, noConfigurationNeededLabel: noConfigurationNeededLabel, notInstalledLabel: notInstalledLabel, pluginConfigs: pluginConfigs, pluginDescriptionFallback: pluginDescriptionFallback, pluginSaveSuccess: pluginSaveSuccess, pluginSaving: pluginSaving, readyLabel: readyLabel, registerConnectorContentItem: registerConnectorContentItem, renderResolvedIcon: renderResolvedIcon, t: t, testResults: testResults, togglingPlugins: togglingPlugins, visiblePlugins: visiblePlugins }) }))] }));
-        return (_jsxs("main", { ref: connectorContentRef, className: "chat-native-scrollbar relative flex flex-1 min-w-0 flex-col overflow-x-hidden overflow-y-auto bg-transparent px-4 pb-4 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-7 lg:pb-7 lg:pt-4", children: [contentHeader ? (_jsx(PageLayoutHeader, { children: contentHeader })) : null, connectorContent] }));
-    }
-    if (inModal) {
-        return (_jsx(PluginGameModal, { effectiveGameSelected: effectiveGameSelected, gameMobileDetail: gameMobileDetail, gameNarrow: gameNarrow, gameVisiblePlugins: gameVisiblePlugins, isConnectorLikeMode: isConnectorLikeMode, pluginConfigs: pluginConfigs, pluginSaveSuccess: pluginSaveSuccess, pluginSaving: pluginSaving, resultLabel: resultLabel, saveLabel: saveLabel, savedLabel: savedWithBangLabel, savingLabel: savingLabel, sectionTitle: mode === "connectors" ? "Connectors" : label, selectedPlugin: selectedPlugin, selectedPluginLinks: selectedPluginLinks, t: t, togglingPlugins: togglingPlugins, onBack: () => setGameMobileDetail(false), onConfigSave: handleConfigSave, onOpenExternalUrl: handleOpenPluginExternalUrl, onParamChange: handleParamChange, onSelectPlugin: (pluginId) => {
-                setGameSelectedId(pluginId);
-                if (gameNarrow)
-                    setGameMobileDetail(true);
-            }, onTestConnection: handleTestConnection, onTogglePlugin: handleTogglePlugin }));
-    }
-    const selectedSubgroupTag = subgroupTags.find((tag) => tag.id === subgroupFilter) ?? subgroupTags[0];
-    const pluginSectionTitle = selectedSubgroupTag?.id === "all"
-        ? t("pluginsview.PluginCatalog", { defaultValue: "Plugin Catalog" })
-        : (selectedSubgroupTag?.label ??
-            t("pluginsview.PluginCatalog", { defaultValue: "Plugin Catalog" }));
-    return (_jsx(PagePanel.Frame, { "data-testid": "plugins-view-page", children: _jsxs(PagePanel, { as: "div", variant: "shell", className: "settings-shell plugins-game-modal plugins-game-modal--inline flex-col lg:flex-row", "data-testid": "plugins-shell", children: [showDesktopSubgroupSidebar && (_jsx(AppPageSidebar, { className: "hidden lg:flex", testId: "plugins-subgroup-sidebar", collapsible: true, contentIdentity: "plugins-subgroups", "aria-label": t("pluginsview.PluginTypes", {
-                        defaultValue: "Plugin types",
-                    }), collapsedRailItems: subgroupTags.map((tag) => {
-                        const Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
-                        const isActive = subgroupFilter === tag.id;
-                        return (_jsx(SidebarContent.RailItem, { "aria-label": tag.label, title: tag.label, active: isActive, onClick: () => setSubgroupFilter(tag.id), children: _jsx(Icon, { className: "h-4 w-4" }) }, tag.id));
-                    }), children: _jsx(SidebarScrollRegion, { className: "pt-4", children: _jsx(SidebarPanel, { children: subgroupTags.map((tag) => renderSubgroupFilterButton(tag, { sidebar: true })) }) }) })), _jsx(PagePanel.ContentArea, { children: _jsx("div", { className: "px-4 py-4 sm:px-6 sm:py-5 lg:px-8 lg:py-6", children: _jsxs(PagePanel, { variant: "section", children: [!isConnectorShellMode && (_jsx(PagePanel.Header, { eyebrow: t("nav.advanced"), heading: pluginSectionTitle, className: "border-border/35", actions: _jsx(PagePanel.Meta, { className: "border-border/45 px-2.5 py-1 font-bold tracking-[0.16em] text-muted", children: t("pluginsview.VisibleCount", {
-                                            defaultValue: "{{count}} shown",
-                                            count: visiblePlugins.length,
-                                        }) }) })), _jsxs("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: [allowCustomOrder && pluginOrder.length > 0 ? (_jsx("div", { className: "mb-4 flex flex-wrap items-center gap-3", children: allowCustomOrder && pluginOrder.length > 0 && (_jsx(Button, { variant: "outline", size: "sm", className: "h-9 rounded-[var(--radius-sm)] px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: handleResetOrder, title: t("pluginsview.ResetToDefaultSor"), children: t("pluginsview.ResetOrder") })) })) : null, hasPluginToggleInFlight && (_jsx(PagePanel.Notice, { tone: "accent", className: "mb-4 text-xs-tight", children: t("pluginsview.ApplyingPluginChan") })), showSubgroupFilters && (_jsx("div", { className: "mb-5 flex items-center gap-2 flex-wrap lg:hidden", "data-testid": "plugins-subgroup-chips", children: subgroupTags.map((tag) => renderSubgroupFilterButton(tag)) })), _jsx("div", { className: "overflow-y-auto", children: sorted.length === 0 ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[18rem] rounded-[1.6rem] px-5 py-10", description: t("pluginsview.NoneAvailableDesc", {
-                                                    defaultValue: "No {{label}} are available right now.",
-                                                    label: resultLabel,
-                                                }), title: t("pluginsview.NoneAvailableTitle", {
-                                                    defaultValue: "No {{label}} available",
-                                                    label: label.toLowerCase(),
-                                                }) })) : visiblePlugins.length === 0 ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[16rem] rounded-[1.6rem] px-5 py-10", description: showSubgroupFilters
-                                                    ? t("pluginsview.NoPluginsMatchCategory", {
-                                                        defaultValue: "No plugins match the selected category.",
-                                                    })
-                                                    : t("pluginsview.NoPluginsMatchFilters", {
-                                                        defaultValue: "No {{label}} match your filters.",
-                                                        label: resultLabel,
-                                                    }), title: t("pluginsview.NothingToShow", {
-                                                    defaultValue: "Nothing to show",
-                                                }) })) : (renderPluginGrid(visiblePlugins)) })] })] }) }) }), _jsx(PluginSettingsDialog, { installPluginLabel: installPluginLabel, installProgress: installProgress, installingPlugins: installingPlugins, pluginConfigs: pluginConfigs, pluginSaveSuccess: pluginSaveSuccess, pluginSaving: pluginSaving, settingsDialogPlugin: settingsDialogPlugin, t: t, testResults: testResults, onClose: toggleSettings, onConfigReset: handleConfigReset, onConfigSave: handleConfigSave, onInstallPlugin: handleInstallPlugin, onParamChange: handleParamChange, onTestConnection: handleTestConnection, formatDialogTestConnectionLabel: formatDialogTestConnectionLabel, installProgressLabel: installProgressLabel, saveSettingsLabel: saveSettingsLabel, savingLabel: savingLabel })] }) }));
-}
-/* ── Exported views ────────────────────────────────────────────────── */
-/** Plugins view — tag-filtered plugin list. */
-export function PluginsView({ contentHeader, mode = "all", inModal, connectorDesktopPlacement = "left", }) {
-    const label = mode === "social"
-        ? "Connectors"
-        : mode === "connectors"
-            ? "Connectors"
-            : mode === "streaming"
-                ? "Streaming"
-                : mode === "all-social"
-                    ? "Plugins"
-                    : "Plugins";
-    return (_jsx(PluginListView, { contentHeader: contentHeader, connectorDesktopPlacement: connectorDesktopPlacement, label: label, mode: mode, inModal: inModal }));
-}