@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/pages/PluginCard.js

@@ -1,128 +1,91 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "@elizaos/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAgentElement } from "../../agent-surface/index.js";
 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, }) {
+import { Button } from "../ui/button.js";
+import { PluginVisual } from "./PluginVisual.js";
+export function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onDragStart, onDragOver, onDrop, onDragEnd, loadFailedLabel, notInstalledLabel, }) {
     const { t } = useApp();
+    const toggleControl = useAgentElement({
+        id: `plugin-card-${p.id}-toggle`,
+        role: "toggle",
+        label: `Toggle ${p.name}`,
+        group: "plugin-card",
+        status: p.enabled ? "active" : "inactive",
+        description: `Enable or disable the ${p.name} plugin`,
+        onActivate: () => void onToggle(p.id, !p.enabled),
+    });
     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);
+    const needsConfig = hasParams && !allParamsSet && !isShowcase;
+    const openDetail = () => {
+        if (hasParams)
+            onToggleSettings(p.id);
+    };
+    // Collapse load/config/restart state into the single toggle control: its
+    // color is the one health signal. ok (green) = enabled + live; attention
+    // (orange) = enabled but waiting on config/restart/activation; error (red) =
+    // load failure; neutral = off.
+    const toggleHealth = !p.enabled
+        ? "off"
+        : p.loadError
+            ? "error"
+            : needsConfig || !p.isActive
+                ? "attention"
+                : "ok";
+    const toggleHealthClass = toggleHealth === "ok"
+        ? "border-ok bg-ok text-white hover:bg-ok/90"
+        : toggleHealth === "attention"
+            ? "border-accent bg-accent text-accent-fg hover:bg-accent/90"
+            : toggleHealth === "error"
+                ? "border-destructive bg-destructive text-white hover:bg-destructive/90"
+                : "border-border bg-transparent text-muted hover:border-accent/50 hover:text-txt";
+    const toggleTitle = toggleHealth === "error"
+        ? p.loadError || inactiveLabel
+        : toggleHealth === "attention"
+            ? needsConfig
+                ? t("pluginsview.NeedsConfig", {
+                    defaultValue: "Needs configuration",
+                })
+                : p.enabled
+                    ? inactiveLabel
+                    : undefined
+            : undefined;
     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));
+            : undefined, onDragOver: allowCustomOrder && onDragOver ? (e) => onDragOver(e, p.id) : undefined, onDrop: allowCustomOrder && onDrop ? (e) => onDrop(e, p.id) : undefined, onDragEnd: allowCustomOrder ? onDragEnd : undefined, onClick: hasParams ? openDetail : undefined, onKeyDown: hasParams
+            ? (e) => {
+                if (e.target === e.currentTarget &&
+                    (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    openDetail();
+                }
+            }
+            : undefined, tabIndex: hasParams ? 0 : undefined, className: `group relative flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors duration-150 ${hasParams ? "cursor-pointer" : ""} ${isOpen ? "bg-accent/10" : "hover:bg-bg-hover"} ${isDragging ? "opacity-30" : ""} ${isDragOver ? "ring-2 ring-accent/60" : ""}`, "data-plugin-id": p.id, children: [_jsx(PluginVisual, { plugin: p }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-bold leading-tight text-txt", children: p.name }), _jsx("p", { className: "line-clamp-1 text-xs text-muted", children: p.description || pluginDescriptionFallback })] }), isShowcase ? (_jsx("span", { className: "shrink-0 rounded-full border border-accent bg-accent-subtle px-2.5 py-[3px] text-2xs font-bold tracking-wider text-txt", children: t("pluginsview.DEMO") })) : (_jsx(Button, { ref: toggleControl.ref, variant: "outline", size: "sm", "data-plugin-toggle": p.id, className: `h-auto shrink-0 rounded-full border px-3 py-[3px] text-2xs font-bold tracking-wider transition-colors duration-150 ${toggleHealthClass} ${toggleDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`, title: toggleTitle, onClick: (e) => {
+                    e.stopPropagation();
+                    void onToggle(p.id, !p.enabled);
+                }, disabled: toggleDisabled, "aria-current": p.enabled ? "true" : undefined, ...toggleControl.agentProps, children: isToggleBusy
+                    ? t("pluginsview.Applying", { defaultValue: "Applying" })
+                    : p.enabled
+                        ? t("common.on")
+                        : t("common.off") })), p.enabled && p.validationErrors && p.validationErrors.length > 0 && (_jsx("div", { className: "absolute inset-x-3 -bottom-1 text-2xs text-destructive", children: p.validationErrors.map((err) => (_jsxs("div", { className: "truncate", children: [err.field, ": ", err.message] }, `${err.field}:${err.message}`))) }))] }, p.id));
 }

package/components/pages/PluginConfigForm.d.ts

@@ -1,15 +1,4 @@
 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;

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

@@ -1 +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"}
+{"version":3,"file":"PluginConfigForm.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginConfigForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAwD5D,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

@@ -1,8 +1,9 @@
 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 { ConfigRenderer } from "../../components/config-ui/config-renderer.js";
+import { defaultRegistry } from "../../components/config-ui/config-renderer.helpers.js";
 import { useApp } from "../../state/index.js";
+import { Switch } from "../ui/switch.js";
 import { paramsToSchema, TELEGRAM_ALLOW_ALL_HIDDEN } from "./plugin-list-utils.js";
 /* ── Telegram chat mode ─────────────────────────────────────────────── */
 /**
@@ -11,7 +12,7 @@ import { paramsToSchema, TELEGRAM_ALLOW_ALL_HIDDEN } from "./plugin-list-utils.j
  * doesn't flip the toggle. Returns the mode, a toggle handler, and
  * hiddenKeys for PluginConfigForm.
  */
-export function useTelegramChatMode(plugin, pluginConfigs, onParamChange) {
+function useTelegramChatMode(plugin, pluginConfigs, onParamChange) {
     const localValue = pluginConfigs.telegram?.TELEGRAM_ALLOWED_CHATS;
     const serverValue = plugin.parameters?.find((p) => p.key === "TELEGRAM_ALLOWED_CHATS")
         ?.currentValue ?? "";
@@ -41,7 +42,7 @@ export function useTelegramChatMode(plugin, pluginConfigs, onParamChange) {
 }
 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
+    return (_jsxs("div", { className: "flex items-center justify-between rounded-sm 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",
                             })

package/components/pages/PluginVisual.d.ts

@@ -0,0 +1,12 @@
+import type { PluginInfo } from "../../api";
+/**
+ * Resolve the strongest available visual for a plugin and render it as a square
+ * tile. Resolution order: brand SVG logo (connectors) → AI-provider brand PNG →
+ * explicit plugin image → registry Lucide glyph → deterministic monogram tile
+ * (initials over a name-hashed orange-family gradient).
+ */
+export declare function PluginVisual({ plugin, size, }: {
+    plugin: PluginInfo;
+    size?: "md" | "lg";
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PluginVisual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PluginVisual.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginVisual.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAsC5C;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,IAAW,GACZ,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,2CA4EA"}

package/components/pages/PluginVisual.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { getProviderLogo } from "../../providers/index.js";
+import { getBrandIcon } from "../conversations/brand-icons.js";
+import { iconImageSource, pluginMonogram, pluginTileGradient, resolveIcon, } from "./plugin-list-utils.js";
+function isDarkTheme() {
+    if (typeof document === "undefined")
+        return true;
+    const root = document.documentElement;
+    return (root.classList.contains("dark") ||
+        root.getAttribute("data-theme") === "dark");
+}
+/** Provider IDs that ship a brand PNG in the provider-logo registry. */
+const PROVIDER_LOGO_IDS = new Set([
+    "openai",
+    "anthropic",
+    "groq",
+    "google",
+    "gemini",
+    "ollama",
+    "xai",
+    "grok",
+    "openrouter",
+    "elizacloud",
+    "deepseek",
+    "mistral",
+    "together",
+    "together-ai",
+    "zai",
+]);
+/**
+ * Resolve the strongest available visual for a plugin and render it as a square
+ * tile. Resolution order: brand SVG logo (connectors) → AI-provider brand PNG →
+ * explicit plugin image → registry Lucide glyph → deterministic monogram tile
+ * (initials over a name-hashed orange-family gradient).
+ */
+export function PluginVisual({ plugin, size = "md", }) {
+    const [imgFailed, setImgFailed] = useState(false);
+    const dimension = size === "lg" ? "h-14 w-14" : "h-11 w-11";
+    const glyph = size === "lg" ? "h-7 w-7" : "h-6 w-6";
+    const monogramText = size === "lg" ? "text-lg" : "text-base";
+    const BrandIcon = getBrandIcon(plugin.id);
+    if (BrandIcon) {
+        return (_jsx("span", { className: `flex ${dimension} shrink-0 items-center justify-center rounded-md border border-border/45 bg-bg-accent/70 text-txt`, children: _jsx(BrandIcon, { className: glyph }) }));
+    }
+    if (!imgFailed && PROVIDER_LOGO_IDS.has(plugin.id)) {
+        const logo = getProviderLogo(plugin.id, isDarkTheme());
+        return (_jsx("span", { className: `flex ${dimension} shrink-0 items-center justify-center rounded-md border border-border/45 bg-bg-accent/70 p-2`, children: _jsx("img", { src: logo, alt: "", className: "h-full w-full object-contain", onError: () => setImgFailed(true) }) }));
+    }
+    const icon = resolveIcon(plugin);
+    if (!imgFailed && typeof icon === "string") {
+        const imageSrc = iconImageSource(icon);
+        if (imageSrc) {
+            return (_jsx("span", { className: `flex ${dimension} shrink-0 items-center justify-center rounded-md border border-border/45 bg-bg-accent/70 p-2`, children: _jsx("img", { src: imageSrc, alt: "", className: "h-full w-full object-contain", onError: () => setImgFailed(true) }) }));
+        }
+    }
+    if (icon && typeof icon !== "string") {
+        const Glyph = icon;
+        return (_jsx("span", { className: `flex ${dimension} shrink-0 items-center justify-center rounded-md border border-border/45 bg-bg-accent/70 text-muted-strong`, children: _jsx(Glyph, { className: glyph }) }));
+    }
+    // Generative monogram tile — deterministic gradient + initials.
+    return (_jsx("span", { className: `flex ${dimension} shrink-0 select-none items-center justify-center rounded-md font-bold tracking-tight text-white ${monogramText}`, style: {
+            background: pluginTileGradient(plugin),
+            textShadow: "0 1px 2px rgba(0,0,0,0.35)",
+        }, "aria-hidden": "true", children: pluginMonogram(plugin) }));
+}

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

@@ -1 +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"}
+{"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;AAKvC,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAUL"}

package/components/pages/PluginsPageView.js

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

package/components/pages/PluginsView.d.ts

@@ -1,6 +1,5 @@
 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;

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

@@ -1 +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"}
+{"version":3,"file":"PluginsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginsView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAcf,OAAO,EAIL,KAAK,eAAe,EAOrB,MAAM,qBAAqB,CAAC;AAy3C7B,+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,2CAqBA"}