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

package/components/pages/plugin-view-modal.js

@@ -1,29 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Input } from "@elizaos/ui";
+import { CheckCircle2, Puzzle, XCircle } from "lucide-react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
 import { iconImageSource, pluginResourceLinkLabel, resolveIcon, } from "./plugin-list-utils.js";
+function PluginGameListCard({ plugin, isSelected, icon, enabledLabel, disabledLabel, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `plugin-game-card-${plugin.id}`,
+        role: "list-item",
+        label: plugin.name,
+        group: "plugin-game-list",
+        status: isSelected ? "active" : "inactive",
+        description: `Select the ${plugin.name} plugin`,
+        onActivate: () => onSelect(plugin.id),
+    });
+    return (_jsxs(Button, { ref: ref, variant: "ghost", type: "button", role: "option", "aria-selected": isSelected, className: `plugins-game-card${isSelected ? " is-selected" : ""}${!plugin.enabled ? " is-disabled" : ""} h-auto`, onClick: () => onSelect(plugin.id), ...agentProps, children: [_jsx("div", { className: "plugins-game-card-icon-shell", children: _jsx("span", { className: "plugins-game-card-icon", children: icon }) }), _jsxs("div", { className: "plugins-game-card-body", children: [_jsx("div", { className: "plugins-game-card-name", children: plugin.name }), _jsx("div", { className: "plugins-game-card-meta", children: _jsxs("span", { className: `plugins-game-badge ${plugin.enabled ? "is-on" : "is-off"}`, title: plugin.enabled ? enabledLabel : disabledLabel, children: [plugin.enabled ? (_jsx(CheckCircle2, { className: "h-3 w-3" })) : (_jsx(XCircle, { className: "h-3 w-3" })), _jsx("span", { className: "sr-only", children: plugin.enabled ? enabledLabel : disabledLabel })] }) })] })] }));
+}
+function PluginGameResourceLink({ pluginId, linkKey, url, label, onOpen, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `plugin-game-${pluginId}-link-${linkKey}`,
+        role: "link",
+        label: `${label} (${pluginId})`,
+        group: "plugin-game-detail",
+        description: `Open ${label} for ${pluginId}`,
+        onActivate: () => onOpen(url),
+    });
+    return (_jsx(Button, { ref: ref, variant: "outline", size: "sm", type: "button", className: "plugins-game-link-btn border border-border bg-transparent px-2.5 py-1 text-xs-tight text-muted transition-colors hover:border-accent hover:text-txt", onClick: () => {
+            void onOpen(url);
+        }, ...agentProps, children: label }));
+}
+function PluginGameParamField({ pluginId, param, value, onParamChange, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `plugin-game-${pluginId}-param-${param.key}`,
+        role: "text-input",
+        label: `${param.key} (${pluginId})`,
+        group: "plugin-game-detail",
+        description: param.description || `Set ${param.key}`,
+        getValue: () => value,
+        onFill: (next) => onParamChange(pluginId, param.key, next),
+    });
+    return (_jsxs("div", { id: `field-${param.key}`, children: [_jsx("label", { htmlFor: `input-${param.key}`, className: "text-xs-tight tracking-wider text-muted block mb-1", children: param.key }), _jsx(Input, { ref: ref, id: `input-${param.key}`, type: param.sensitive ? "password" : "text", className: "w-full px-2 py-1 text-xs", placeholder: param.description, value: value, onChange: (event) => onParamChange(pluginId, param.key, event.target.value), ...agentProps })] }));
+}
 function ResolvedPluginIcon({ plugin, emojiClassName, iconClassName, imageClassName, imageStyle, }) {
     const icon = resolveIcon(plugin);
     if (!icon)
-        return "🧩";
+        return _jsx(Puzzle, { className: iconClassName });
     if (typeof icon === "string") {
         const imageSrc = iconImageSource(icon);
-        return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: imageClassName, style: imageStyle })) : (_jsx("span", { className: emojiClassName, children: icon }));
+        return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: imageClassName, style: imageStyle })) : (_jsx(Puzzle, { className: iconClassName ?? emojiClassName }));
     }
     const IconComponent = icon;
     return _jsx(IconComponent, { className: iconClassName });
 }
 export function PluginGameModal({ effectiveGameSelected, gameMobileDetail, gameNarrow, gameVisiblePlugins, isConnectorLikeMode, pluginConfigs, pluginSaveSuccess, pluginSaving, resultLabel, saveLabel, savedLabel, savingLabel, sectionTitle, selectedPlugin, selectedPluginLinks, t, togglingPlugins, onBack, onConfigSave, onOpenExternalUrl, onParamChange, onSelectPlugin, onTestConnection, onTogglePlugin, }) {
+    const backControl = useAgentElement({
+        id: "plugin-game-back",
+        role: "button",
+        label: "Back to list",
+        group: "plugin-game-detail",
+        description: "Return to the plugin list",
+        onActivate: () => onBack(),
+    });
+    const toggleControl = useAgentElement({
+        id: "plugin-game-toggle",
+        role: "toggle",
+        label: selectedPlugin ? `Toggle ${selectedPlugin.name}` : "Toggle plugin",
+        group: "plugin-game-detail",
+        status: selectedPlugin?.enabled ? "active" : "inactive",
+        description: "Enable or disable the selected plugin",
+        onActivate: () => {
+            if (selectedPlugin) {
+                void onTogglePlugin(selectedPlugin.id, !selectedPlugin.enabled);
+            }
+        },
+    });
+    const testControl = useAgentElement({
+        id: "plugin-game-test",
+        role: "button",
+        label: "Test connection",
+        group: "plugin-game-detail",
+        description: "Run a connection test for the selected plugin",
+        onActivate: () => {
+            if (selectedPlugin)
+                void onTestConnection(selectedPlugin.id);
+        },
+    });
+    const saveControl = useAgentElement({
+        id: "plugin-game-save",
+        role: "button",
+        label: "Save plugin configuration",
+        group: "plugin-game-detail",
+        description: "Save the configuration for the selected plugin",
+        onActivate: () => {
+            if (selectedPlugin)
+                void onConfigSave(selectedPlugin.id);
+        },
+    });
     return (_jsxs("div", { className: "plugins-game-modal plugins-game-modal--inline", children: [_jsxs("div", { className: `plugins-game-list-panel${gameNarrow && gameMobileDetail ? " is-hidden" : ""}`, children: [_jsx("div", { className: "plugins-game-list-head", children: _jsx("div", { className: "plugins-game-section-title", children: sectionTitle }) }), _jsx("div", { className: "plugins-game-list-scroll", role: "listbox", "aria-label": `${sectionTitle} list`, children: gameVisiblePlugins.length === 0 ? (_jsx("div", { className: "plugins-game-list-empty", children: t("pluginsview.NoResultsFound", {
                                 label: resultLabel,
                                 defaultValue: "No {{label}} found",
-                            }) })) : (gameVisiblePlugins.map((plugin) => (_jsxs(Button, { variant: "ghost", type: "button", role: "option", "aria-selected": effectiveGameSelected === plugin.id, className: `plugins-game-card${effectiveGameSelected === plugin.id ? " is-selected" : ""}${!plugin.enabled ? " is-disabled" : ""} h-auto`, onClick: () => onSelectPlugin(plugin.id), children: [_jsx("div", { className: "plugins-game-card-icon-shell", children: _jsx("span", { className: "plugins-game-card-icon", children: _jsx(ResolvedPluginIcon, { plugin: plugin, imageClassName: "plugins-game-card-icon", imageStyle: { objectFit: "contain" }, iconClassName: "w-5 h-5" }) }) }), _jsxs("div", { className: "plugins-game-card-body", children: [_jsx("div", { className: "plugins-game-card-name", children: plugin.name }), _jsx("div", { className: "plugins-game-card-meta", children: _jsx("span", { className: `plugins-game-badge ${plugin.enabled ? "is-on" : "is-off"}`, children: plugin.enabled ? t("common.on") : t("common.off") }) })] })] }, plugin.id)))) })] }), _jsx("div", { className: `plugins-game-detail-panel${gameNarrow && !gameMobileDetail ? " is-hidden" : ""}`, children: selectedPlugin ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "plugins-game-detail-head", children: [gameNarrow && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", className: "plugins-game-back-btn", onClick: onBack, children: t("common.back") })), _jsxs("div", { className: "plugins-game-detail-title-row", children: [_jsx("div", { className: "plugins-game-detail-icon-shell", children: _jsx("span", { className: "plugins-game-detail-icon", children: _jsx(ResolvedPluginIcon, { plugin: selectedPlugin, imageClassName: "plugins-game-detail-icon", iconClassName: "w-6 h-6" }) }) }), _jsxs("div", { className: "plugins-game-detail-main", children: [_jsx("div", { className: "plugins-game-detail-name", children: selectedPlugin.name }), selectedPlugin.version && (_jsxs("span", { className: "plugins-game-version", children: ["v", selectedPlugin.version] }))] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", className: `plugins-game-toggle ${selectedPlugin.enabled ? "is-on" : "is-off"}`, onClick: () => void onTogglePlugin(selectedPlugin.id, !selectedPlugin.enabled), disabled: togglingPlugins.has(selectedPlugin.id), children: selectedPlugin.enabled ? t("common.on") : t("common.off") })] })] }), _jsx("div", { className: "plugins-game-detail-description", children: selectedPlugin.description }), (selectedPlugin.tags?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-3", children: selectedPlugin.tags?.map((tag) => (_jsx("span", { className: "text-2xs px-1.5 py-px border border-border bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap", children: tag }, `${selectedPlugin.id}:${tag}`))) })), selectedPluginLinks.length > 0 && (_jsx("div", { className: "plugins-game-detail-links flex flex-wrap gap-2 px-3 pb-3", children: selectedPluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "plugins-game-link-btn border border-border bg-transparent px-2.5 py-1 text-xs-tight text-muted transition-colors hover:border-accent hover:text-txt", onClick: () => {
-                                    void onOpenExternalUrl(link.url);
-                                }, children: pluginResourceLinkLabel(t, link.key) }, `${selectedPlugin.id}:${link.key}`))) })), selectedPlugin.parameters &&
-                            selectedPlugin.parameters.length > 0 && (_jsx("div", { className: "plugins-game-detail-config", children: selectedPlugin.parameters.map((param) => (_jsxs("div", { id: `field-${param.key}`, children: [_jsx("label", { htmlFor: `input-${param.key}`, className: "text-xs-tight tracking-wider text-muted block mb-1", children: param.key }), _jsx(Input, { id: `input-${param.key}`, type: param.sensitive ? "password" : "text", className: "w-full px-2 py-1 text-xs", placeholder: param.description, value: pluginConfigs[selectedPlugin.id]?.[param.key] ??
-                                            param.currentValue ??
-                                            "", onChange: (event) => onParamChange(selectedPlugin.id, param.key, event.target.value) })] }, param.key))) })), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => void onTestConnection(selectedPlugin.id), children: t("pluginsview.TestConnection") }), _jsx(Button, { variant: "default", size: "sm", type: "button", className: `plugins-game-action-btn plugins-game-save-btn${pluginSaveSuccess.has(selectedPlugin.id) ? " is-saved" : ""}`, onClick: () => void onConfigSave(selectedPlugin.id), disabled: pluginSaving.has(selectedPlugin.id), children: pluginSaving.has(selectedPlugin.id)
+                            }) })) : (gameVisiblePlugins.map((plugin) => (_jsx(PluginGameListCard, { plugin: plugin, isSelected: effectiveGameSelected === plugin.id, enabledLabel: t("common.on"), disabledLabel: t("common.off"), icon: _jsx(ResolvedPluginIcon, { plugin: plugin, imageClassName: "plugins-game-card-icon", imageStyle: { objectFit: "contain" }, iconClassName: "w-5 h-5" }), onSelect: onSelectPlugin }, plugin.id)))) })] }), _jsx("div", { className: `plugins-game-detail-panel${gameNarrow && !gameMobileDetail ? " is-hidden" : ""}`, children: selectedPlugin ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "plugins-game-detail-head", children: [gameNarrow && (_jsx(Button, { ref: backControl.ref, variant: "ghost", size: "sm", type: "button", className: "plugins-game-back-btn", onClick: onBack, ...backControl.agentProps, children: t("common.back") })), _jsxs("div", { className: "plugins-game-detail-title-row", children: [_jsx("div", { className: "plugins-game-detail-icon-shell", children: _jsx("span", { className: "plugins-game-detail-icon", children: _jsx(ResolvedPluginIcon, { plugin: selectedPlugin, imageClassName: "plugins-game-detail-icon", iconClassName: "w-6 h-6" }) }) }), _jsxs("div", { className: "plugins-game-detail-main", children: [_jsx("div", { className: "plugins-game-detail-name", children: selectedPlugin.name }), selectedPlugin.version && (_jsxs("span", { className: "plugins-game-version", children: ["v", selectedPlugin.version] }))] }), _jsx(Button, { ref: toggleControl.ref, variant: "ghost", size: "sm", type: "button", className: `plugins-game-toggle ${selectedPlugin.enabled ? "is-on" : "is-off"}`, onClick: () => void onTogglePlugin(selectedPlugin.id, !selectedPlugin.enabled), disabled: togglingPlugins.has(selectedPlugin.id), "aria-current": selectedPlugin.enabled ? "true" : undefined, ...toggleControl.agentProps, children: selectedPlugin.enabled ? t("common.on") : t("common.off") })] })] }), selectedPlugin.description && (_jsx("div", { className: "plugins-game-detail-description line-clamp-2", title: selectedPlugin.description, children: selectedPlugin.description })), (selectedPlugin.tags?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-3", children: selectedPlugin.tags?.map((tag) => (_jsx("span", { className: "text-2xs px-1.5 py-px border border-border bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap", children: tag }, `${selectedPlugin.id}:${tag}`))) })), selectedPluginLinks.length > 0 && (_jsx("div", { className: "plugins-game-detail-links flex flex-wrap gap-2 px-3 pb-3", children: selectedPluginLinks.map((link) => (_jsx(PluginGameResourceLink, { pluginId: selectedPlugin.id, linkKey: link.key, url: link.url, label: pluginResourceLinkLabel(t, link.key), onOpen: onOpenExternalUrl }, `${selectedPlugin.id}:${link.key}`))) })), selectedPlugin.parameters &&
+                            selectedPlugin.parameters.length > 0 && (_jsx("div", { className: "plugins-game-detail-config", children: selectedPlugin.parameters.map((param) => (_jsx(PluginGameParamField, { pluginId: selectedPlugin.id, param: param, value: pluginConfigs[selectedPlugin.id]?.[param.key] ??
+                                    param.currentValue ??
+                                    "", onParamChange: onParamChange }, param.key))) })), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx(Button, { ref: testControl.ref, variant: "outline", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => void onTestConnection(selectedPlugin.id), ...testControl.agentProps, children: t("pluginsview.TestConnection") }), _jsx(Button, { ref: saveControl.ref, variant: "default", size: "sm", type: "button", className: `plugins-game-action-btn plugins-game-save-btn${pluginSaveSuccess.has(selectedPlugin.id) ? " is-saved" : ""}`, onClick: () => void onConfigSave(selectedPlugin.id), disabled: pluginSaving.has(selectedPlugin.id), ...saveControl.agentProps, children: pluginSaving.has(selectedPlugin.id)
                                         ? savingLabel
                                         : pluginSaveSuccess.has(selectedPlugin.id)
                                             ? savedLabel
-                                            : saveLabel })] })] })) : (_jsxs("div", { className: "plugins-game-detail-empty", children: [_jsx("span", { className: "plugins-game-detail-empty-icon", children: "\uD83E\uDDE9" }), _jsxs("span", { className: "plugins-game-detail-empty-text", children: [t("pluginsview.SelectA"), " ", isConnectorLikeMode ? "connector" : "plugin", " ", t("pluginsview.toC")] })] })) })] }));
+                                            : saveLabel })] })] })) : (_jsxs("div", { className: "plugins-game-detail-empty", children: [_jsx("span", { className: "plugins-game-detail-empty-icon", children: _jsx(Puzzle, { className: "h-5 w-5" }) }), _jsxs("span", { className: "plugins-game-detail-empty-text", children: [t("pluginsview.SelectA"), " ", isConnectorLikeMode ? "connector" : "plugin", " ", t("pluginsview.toC")] })] })) })] }));
 }

package/components/pages/plugin-view-sidebar.d.ts

@@ -26,11 +26,9 @@ interface ConnectorDesktopSidebarProps {
     visiblePlugins: PluginInfo[];
     onConnectorSelect: (pluginId: string) => void;
     onConnectorSectionToggle: (pluginId: string) => void;
-    onSearchChange: (value: string) => void;
-    onSearchClear: () => void;
     onSubgroupFilterChange: (value: string) => void;
     onTogglePlugin: (pluginId: string, enabled: boolean) => Promise<void>;
 }
-export declare function ConnectorSidebar({ collapseLabel, connectorExpandedIds, connectorSelectedId, desktopConnectorLayout, expandLabel, hasPluginToggleInFlight, mode, pluginSearch, registerConnectorRailItem, registerConnectorSidebarItem, registerConnectorSidebarViewport, renderResolvedIcon, resultLabel, subgroupFilter, subgroupTags, t, togglingPlugins, visiblePlugins, onConnectorSelect, onConnectorSectionToggle, onSearchChange, onSearchClear, onSubgroupFilterChange, onTogglePlugin, }: ConnectorDesktopSidebarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectorSidebar({ collapseLabel, connectorExpandedIds, connectorSelectedId, desktopConnectorLayout, expandLabel, hasPluginToggleInFlight, mode, pluginSearch, registerConnectorRailItem, registerConnectorSidebarItem, registerConnectorSidebarViewport, renderResolvedIcon, resultLabel, subgroupFilter, subgroupTags, t, togglingPlugins, visiblePlugins, onConnectorSelect, onConnectorSectionToggle, onSubgroupFilterChange, onTogglePlugin, }: ConnectorDesktopSidebarProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=plugin-view-sidebar.d.ts.map

package/components/pages/plugin-view-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-view-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-sidebar.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG5C,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAE7B,KAAK,yBAAyB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,UAAU,4BAA4B;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,uBAAuB,EAAE,OAAO,CAAC;IACjC,IAAI,EAAE,eAAe,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,WAAW,CAAC,CAAC;IAC1E,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,WAAW,CAAC,CAAC;IAC7E,gCAAgC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3D,kBAAkB,EAAE,CAClB,MAAM,EAAE,UAAU,EAClB,OAAO,CAAC,EAAE,yBAAyB,KAChC,SAAS,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,CAAC,EAAE,WAAW,CAAC;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,wBAAwB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,uBAAuB,EACvB,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,gCAAgC,EAChC,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,CAAC,EACD,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACd,aAAa,EACb,sBAAsB,EACtB,cAAc,GACf,EAAE,4BAA4B,kDAoK9B"}
+{"version":3,"file":"plugin-view-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAU5C,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAE7B,KAAK,yBAAyB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA4KF,UAAU,4BAA4B;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,uBAAuB,EAAE,OAAO,CAAC;IACjC,IAAI,EAAE,eAAe,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,WAAW,CAAC,CAAC;IAC1E,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,WAAW,CAAC,CAAC;IAC7E,gCAAgC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3D,kBAAkB,EAAE,CAClB,MAAM,EAAE,UAAU,EAClB,OAAO,CAAC,EAAE,yBAAyB,KAChC,SAAS,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,CAAC,EAAE,WAAW,CAAC;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,wBAAwB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,WAAW,EACX,uBAAuB,EACvB,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,gCAAgC,EAChC,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,CAAC,EACD,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,EACtB,cAAc,GACf,EAAE,4BAA4B,kDA4H9B"}

package/components/pages/plugin-view-sidebar.js

@@ -1,27 +1,98 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Select, SelectContent, SelectItem, SelectValue, SettingsControls, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, Switch, } from "@elizaos/ui";
 import { ChevronRight } from "lucide-react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
 import { getBrandIcon } from "../conversations/brand-icons.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
-export function ConnectorSidebar({ collapseLabel, connectorExpandedIds, connectorSelectedId, desktopConnectorLayout, expandLabel, hasPluginToggleInFlight, mode, pluginSearch, registerConnectorRailItem, registerConnectorSidebarItem, registerConnectorSidebarViewport, renderResolvedIcon, resultLabel, subgroupFilter, subgroupTags, t, togglingPlugins, visiblePlugins, onConnectorSelect, onConnectorSectionToggle, onSearchChange, onSearchClear, onSubgroupFilterChange, onTogglePlugin, }) {
+import { Button } from "../ui/button.js";
+import { Select, SelectContent, SelectItem, SelectValue } from "../ui/select.js";
+import { SettingsControls } from "../ui/settings-controls.js";
+import { Switch } from "../ui/switch.js";
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function ConnectorRailItem({ plugin, isSelected, railRef, icon, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `connector-rail-${plugin.id}`,
+        role: "list-item",
+        label: `${plugin.name} (collapsed rail)`,
+        group: "connector-sidebar",
+        status: isSelected ? "active" : "inactive",
+        description: `Select the ${plugin.name} connector from the collapsed rail`,
+        onActivate: () => onSelect(plugin.id),
+    });
+    return (_jsx(SidebarContent.RailItem, { ref: mergeRefs(railRef, ref), "aria-label": plugin.name, title: plugin.name, active: isSelected, "aria-current": isSelected ? "true" : undefined, indicatorTone: plugin.enabled ? "accent" : undefined, onClick: () => onSelect(plugin.id), ...agentProps, children: _jsx(SidebarContent.RailMedia, { children: icon }) }));
+}
+function ConnectorSidebarRow({ plugin, isSelected, isExpanded, toggleDisabled, collapseLabel, expandLabel, icon, sidebarRef, t, onSelect, onSectionToggle, onTogglePlugin, }) {
+    const selectControl = useAgentElement({
+        id: `connector-sidebar-${plugin.id}-select`,
+        role: "list-item",
+        label: `Select ${plugin.name}`,
+        group: "connector-sidebar",
+        status: isSelected ? "active" : "inactive",
+        description: `Open the ${plugin.name} connector`,
+        onActivate: () => onSelect(plugin.id),
+    });
+    const toggleControl = useAgentElement({
+        id: `connector-sidebar-${plugin.id}-toggle`,
+        role: "toggle",
+        label: `Toggle ${plugin.name}`,
+        group: "connector-sidebar",
+        status: plugin.enabled ? "active" : "inactive",
+        description: `Enable or disable the ${plugin.name} connector`,
+        onActivate: () => void onTogglePlugin(plugin.id, !plugin.enabled),
+    });
+    const expandControl = useAgentElement({
+        id: `connector-sidebar-${plugin.id}-expand`,
+        role: "button",
+        label: `${isExpanded ? collapseLabel : expandLabel} ${plugin.name}`,
+        group: "connector-sidebar",
+        status: isExpanded ? "active" : "inactive",
+        description: `Expand or collapse the ${plugin.name} connector in the sidebar`,
+        onActivate: () => onSectionToggle(plugin.id),
+    });
+    return (_jsxs(SidebarContent.Item, { as: "div", active: isSelected, className: "items-center gap-1.5 px-2.5 py-2 scroll-mt-3", ref: sidebarRef, children: [_jsxs(SidebarContent.ItemButton, { ref: selectControl.ref, role: "option", "aria-selected": isSelected, onClick: () => onSelect(plugin.id), "aria-current": isSelected ? "page" : undefined, className: "items-center gap-2", ...selectControl.agentProps, children: [_jsx(SidebarContent.ItemIcon, { active: isSelected, className: "mt-0 h-8 w-8 shrink-0 p-1.5", children: icon }), _jsx(SidebarContent.ItemBody, { children: _jsx("span", { className: "block truncate text-sm font-semibold leading-5 text-txt", children: plugin.name }) })] }), _jsxs("div", { className: "flex shrink-0 flex-row items-center gap-1", children: [_jsx(Switch, { ref: toggleControl.ref, checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => {
+                            void onTogglePlugin(plugin.id, checked);
+                        }, "aria-label": `${plugin.enabled ? t("common.off") : t("common.on")} ${plugin.name}`, ...toggleControl.agentProps }), _jsx(Button, { ref: expandControl.ref, variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-none border-0 bg-transparent text-muted transition-colors hover:bg-transparent hover:text-txt", "aria-label": `${isExpanded ? collapseLabel : expandLabel} ${plugin.name} in sidebar`, onClick: (event) => {
+                            event.stopPropagation();
+                            onSectionToggle(plugin.id);
+                        }, ...expandControl.agentProps, children: _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` }) })] })] }));
+}
+export function ConnectorSidebar({ collapseLabel, connectorExpandedIds, connectorSelectedId, desktopConnectorLayout, expandLabel, hasPluginToggleInFlight, mode, pluginSearch, registerConnectorRailItem, registerConnectorSidebarItem, registerConnectorSidebarViewport, renderResolvedIcon, resultLabel, subgroupFilter, subgroupTags, t, togglingPlugins, visiblePlugins, onConnectorSelect, onConnectorSectionToggle, onSubgroupFilterChange, onTogglePlugin, }) {
+    const filterSelectControl = useAgentElement({
+        id: "connector-sidebar-category-filter",
+        role: "select",
+        label: mode === "social" ? "Connector category" : "Plugin category",
+        group: "connector-sidebar",
+        description: mode === "social"
+            ? "Filter connectors by category"
+            : "Filter plugins by category",
+        options: subgroupTags.map((tag) => tag.id),
+        getValue: () => subgroupFilter,
+        onFill: (value) => onSubgroupFilterChange(value),
+    });
     if (!desktopConnectorLayout)
         return null;
-    const sidebarSearchLabel = mode === "social" ? "Search connectors" : "Search plugins";
     const filterSelectLabel = subgroupTags.find((tag) => tag.id === subgroupFilter)?.label ?? "All";
     const hasActivePluginFilters = pluginSearch.trim().length > 0 || subgroupFilter !== "all";
-    return (_jsx(AppPageSidebar, { ref: registerConnectorSidebarViewport, testId: "connectors-settings-sidebar", collapsible: true, contentIdentity: mode === "social" ? "connectors" : "plugins", header: _jsx(SidebarHeader, { search: {
-                value: pluginSearch,
-                onChange: (event) => onSearchChange(event.target.value),
-                onClear: onSearchClear,
-                placeholder: sidebarSearchLabel,
-                "aria-label": sidebarSearchLabel,
-            } }), collapsedRailItems: visiblePlugins.map((plugin) => {
+    return (_jsx(AppPageSidebar, { ref: registerConnectorSidebarViewport, testId: "connectors-settings-sidebar", collapsible: true, contentIdentity: mode === "social" ? "connectors" : "plugins", collapsedRailItems: visiblePlugins.map((plugin) => {
             const isSelected = connectorSelectedId === plugin.id;
             const RailBrandIcon = getBrandIcon(plugin.id);
-            return (_jsx(SidebarContent.RailItem, { ref: registerConnectorRailItem(plugin.id), "aria-label": plugin.name, title: plugin.name, active: isSelected, indicatorTone: plugin.enabled ? "accent" : undefined, onClick: () => onConnectorSelect(plugin.id), children: _jsx(SidebarContent.RailMedia, { children: RailBrandIcon ? (_jsx(RailBrandIcon, { className: "h-5 w-5 shrink-0" })) : (renderResolvedIcon(plugin)) }) }, plugin.id));
+            return (_jsx(ConnectorRailItem, { plugin: plugin, isSelected: isSelected, railRef: registerConnectorRailItem(plugin.id), icon: RailBrandIcon ? (_jsx(RailBrandIcon, { className: "h-5 w-5 shrink-0" })) : (renderResolvedIcon(plugin)), onSelect: onConnectorSelect }, plugin.id));
         }), children: _jsx(SidebarScrollRegion, { children: _jsxs(SidebarPanel, { children: [_jsx("div", { className: "mb-3", children: _jsxs(Select, { value: subgroupFilter, onValueChange: onSubgroupFilterChange, children: [_jsx(SettingsControls.SelectTrigger, { "aria-label": mode === "social"
                                         ? "Filter connector category"
-                                        : "Filter plugin category", variant: "filter", className: "w-full", children: _jsx(SelectValue, { children: filterSelectLabel }) }), _jsx(SelectContent, { children: subgroupTags.map((tag) => (_jsxs(SelectItem, { value: tag.id, children: [tag.label, " (", tag.count, ")"] }, tag.id))) })] }) }), visiblePlugins.length === 0 ? (_jsx(SidebarContent.EmptyState, { className: "px-4 py-6", children: hasActivePluginFilters
+                                        : "Filter plugin category", variant: "filter", className: "w-full", ...filterSelectControl.agentProps, children: _jsx(SelectValue, { children: filterSelectLabel }) }), _jsx(SelectContent, { children: subgroupTags.map((tag) => (_jsxs(SelectItem, { value: tag.id, children: [tag.label, " (", tag.count, ")"] }, tag.id))) })] }) }), visiblePlugins.length === 0 ? (_jsx(SidebarContent.EmptyState, { className: "px-4 py-6", children: hasActivePluginFilters
                             ? `No ${resultLabel} match the current filters.`
                             : `No ${resultLabel} available.` })) : (visiblePlugins.map((plugin) => {
                         const isSelected = connectorSelectedId === plugin.id;
@@ -29,14 +100,9 @@ export function ConnectorSidebar({ collapseLabel, connectorExpandedIds, connecto
                         const isToggleBusy = togglingPlugins.has(plugin.id);
                         const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
                         const SidebarBrandIcon = getBrandIcon(plugin.id);
-                        return (_jsxs(SidebarContent.Item, { as: "div", active: isSelected, className: "items-center gap-1.5 px-2.5 py-2 scroll-mt-3", ref: registerConnectorSidebarItem(plugin.id), children: [_jsxs(SidebarContent.ItemButton, { role: "option", "aria-selected": isSelected, onClick: () => onConnectorSelect(plugin.id), "aria-current": isSelected ? "page" : undefined, className: "items-center gap-2", children: [_jsx(SidebarContent.ItemIcon, { active: isSelected, className: "mt-0 h-8 w-8 shrink-0 p-1.5", children: SidebarBrandIcon ? (_jsx(SidebarBrandIcon, { className: "h-4 w-4 shrink-0" })) : (renderResolvedIcon(plugin, {
-                                                className: "h-4 w-4 shrink-0 rounded-[var(--radius-sm)] object-contain",
-                                                emojiClassName: "text-sm",
-                                            })) }), _jsx(SidebarContent.ItemBody, { children: _jsx("span", { className: "block truncate text-sm font-semibold leading-5 text-txt", children: plugin.name }) })] }), _jsxs("div", { className: "flex shrink-0 flex-row items-center gap-1", children: [_jsx(Switch, { checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => {
-                                                void onTogglePlugin(plugin.id, checked);
-                                            }, "aria-label": `${plugin.enabled ? t("common.off") : t("common.on")} ${plugin.name}` }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-none border-0 bg-transparent text-muted transition-colors hover:bg-transparent hover:text-txt", "aria-label": `${isExpanded ? collapseLabel : expandLabel} ${plugin.name} in sidebar`, onClick: (event) => {
-                                                event.stopPropagation();
-                                                onConnectorSectionToggle(plugin.id);
-                                            }, children: _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` }) })] })] }, plugin.id));
+                        return (_jsx(ConnectorSidebarRow, { plugin: plugin, isSelected: isSelected, isExpanded: isExpanded, toggleDisabled: toggleDisabled, collapseLabel: collapseLabel, expandLabel: expandLabel, sidebarRef: registerConnectorSidebarItem(plugin.id), t: t, icon: SidebarBrandIcon ? (_jsx(SidebarBrandIcon, { className: "h-4 w-4 shrink-0" })) : (renderResolvedIcon(plugin, {
+                                className: "h-4 w-4 shrink-0 rounded-sm object-contain",
+                                emojiClassName: "text-sm",
+                            })), onSelect: onConnectorSelect, onSectionToggle: onConnectorSectionToggle, onTogglePlugin: onTogglePlugin }, plugin.id));
                     }))] }) }) }));
 }

package/components/pages/relationships/RelationshipsActivityFeed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipsActivityFeed.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsActivityFeed.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,yBAAyB,4CA6HxC"}
+{"version":3,"file":"RelationshipsActivityFeed.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsActivityFeed.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,yBAAyB,4CAuIxC"}

package/components/pages/relationships/RelationshipsActivityFeed.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@elizaos/ui";
 import { Fingerprint, Link2, Tags } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { client } from "../../../api/client.js";
 import { formatDateTime, formatShortDate } from "../../../utils/format.js";
+import { Button } from "../../ui/button.js";
 const ACTIVITY_TYPE_STYLES = {
     relationship: {
         bg: "rgba(99, 102, 241, 0.15)",
@@ -22,12 +22,18 @@ const ACTIVITY_TYPE_STYLES = {
     },
 };
 const ACTIVITY_PAGE_SIZE = 25;
+/** Max retained activity rows (20 pages) so long sessions stay bounded. */
+const ACTIVITY_MAX_ITEMS = 500;
 export function RelationshipsActivityFeed() {
     const [activity, setActivity] = useState([]);
     const [loading, setLoading] = useState(true);
     const [loadingMore, setLoadingMore] = useState(false);
     const [hasMore, setHasMore] = useState(false);
     const [error, setError] = useState(null);
+    // Total rows fetched from the server — the pagination offset. Tracked
+    // separately from `activity.length` because the retained array is capped at
+    // ACTIVITY_MAX_ITEMS, so its length stops reflecting the true server offset.
+    const fetchedCountRef = useRef(0);
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -36,6 +42,7 @@ export function RelationshipsActivityFeed() {
             .getRelationshipsActivity(ACTIVITY_PAGE_SIZE, 0)
             .then((response) => {
             if (!cancelled) {
+                fetchedCountRef.current = response.activity.length;
                 setActivity(response.activity);
                 setHasMore(response.hasMore);
             }
@@ -60,9 +67,12 @@ export function RelationshipsActivityFeed() {
         setLoadingMore(true);
         setError(null);
         void client
-            .getRelationshipsActivity(ACTIVITY_PAGE_SIZE, activity.length)
+            .getRelationshipsActivity(ACTIVITY_PAGE_SIZE, fetchedCountRef.current)
             .then((response) => {
-            setActivity((current) => [...current, ...response.activity]);
+            fetchedCountRef.current += response.activity.length;
+            // Cap retained rows so a long pagination session stays bounded; older
+            // rows drop off the top.
+            setActivity((current) => [...current, ...response.activity].slice(-ACTIVITY_MAX_ITEMS));
             setHasMore(response.hasMore);
         })
             .catch((err) => setError(err instanceof Error ? err.message : "Failed to load activity feed."))
@@ -72,7 +82,7 @@ export function RelationshipsActivityFeed() {
         return (_jsx("div", { className: "px-4 py-3 text-sm text-muted", children: "Loading activity\u2026" }));
     }
     if (error) {
-        return (_jsx("div", { className: "rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
+        return (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
     }
     if (activity.length === 0) {
         return _jsx("p", { className: "px-4 py-3 text-sm text-muted", children: "No activity." });
@@ -80,6 +90,6 @@ export function RelationshipsActivityFeed() {
     return (_jsxs("div", { className: "space-y-1.5", children: [activity.map((item) => {
                 const style = ACTIVITY_TYPE_STYLES[item.type];
                 const ActivityIcon = style.icon;
-                return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border/24 bg-card/28 px-2.5 py-2", children: [_jsx("span", { role: "img", "aria-label": `${item.type} event`, title: item.type, className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full", style: { backgroundColor: style.bg, color: style.fg }, children: _jsx(ActivityIcon, { className: "h-3 w-3" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold text-txt", children: item.summary }), item.detail ? (_jsx("div", { className: "truncate text-xs text-muted", children: item.detail })) : null] }), item.timestamp ? (_jsx("span", { className: "shrink-0 text-2xs text-muted", title: formatDateTime(item.timestamp, { fallback: "" }), children: formatShortDate(item.timestamp, { fallback: "" }) })) : null] }, `${item.personId}-${item.type}-${item.timestamp ?? "none"}-${item.summary}`));
-            }), hasMore ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 rounded-lg px-3", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading..." : "Load more" })) : null] }));
+                return (_jsxs("div", { className: "flex items-center gap-2 rounded-sm border border-border/24 bg-card/28 px-2.5 py-2", children: [_jsx("span", { role: "img", "aria-label": `${item.type} event`, title: item.type, className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full", style: { backgroundColor: style.bg, color: style.fg }, children: _jsx(ActivityIcon, { className: "h-3 w-3" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold text-txt", children: item.summary }), item.detail ? (_jsx("div", { className: "truncate text-xs text-muted", children: item.detail })) : null] }), item.timestamp ? (_jsx("span", { className: "shrink-0 text-2xs text-muted", title: formatDateTime(item.timestamp, { fallback: "" }), children: formatShortDate(item.timestamp, { fallback: "" }) })) : null] }, `${item.personId}-${item.type}-${item.timestamp ?? "none"}-${item.summary}`));
+            }), hasMore ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 rounded-sm px-3", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading..." : "Load more" })) : null] }));
 }

package/components/pages/relationships/RelationshipsCandidateMergesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipsCandidateMergesPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsCandidateMergesPanel.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,yCAAyC,CAAC;AAIjD,wBAAgB,iCAAiC,CAAC,EAChD,KAAK,EACL,UAAU,GACX,EAAE;IACD,KAAK,EAAE,0BAA0B,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,kDAwKA"}
+{"version":3,"file":"RelationshipsCandidateMergesPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsCandidateMergesPanel.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,yCAAyC,CAAC;AAQjD,wBAAgB,iCAAiC,CAAC,EAChD,KAAK,EACL,UAAU,GACX,EAAE;IACD,KAAK,EAAE,0BAA0B,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,kDAiMA"}

package/components/pages/relationships/RelationshipsCandidateMergesPanel.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, MetaPill, PagePanel } from "@elizaos/ui";
 import { CalendarClock, Check, FileText, Fingerprint, Gauge, X, } from "lucide-react";
 import { useState } from "react";
 import { client } from "../../../api/client.js";
+import { useTranslation } from "../../../state/TranslationContext.hooks.js";
 import { formatDateTime } from "../../../utils/format.js";
+import { PagePanel } from "../../composites/page-panel/index.js";
+import { MetaPill } from "../../composites/page-panel/page-panel-header.js";
+import { Button } from "../../ui/button.js";
 import { evidenceSummary, personLabel } from "./relationships-utils.js";
 export function RelationshipsCandidateMergesPanel({ graph, onResolved, }) {
+    const { t } = useTranslation();
     const [pending, setPending] = useState(new Set());
     const [errors, setErrors] = useState(new Map());
     const candidates = graph.candidateMerges;
@@ -51,23 +55,47 @@ export function RelationshipsCandidateMergesPanel({ graph, onResolved, }) {
         catch (err) {
             setError(candidate.id, err instanceof Error
                 ? err.message
-                : `Failed to ${action} merge proposal.`);
+                : action === "accept"
+                    ? t("relationshipsmerges.acceptError", {
+                        defaultValue: "Failed to accept merge proposal.",
+                    })
+                    : t("relationshipsmerges.rejectError", {
+                        defaultValue: "Failed to reject merge proposal.",
+                    }));
         }
         finally {
             setPendingState(candidate.id, false);
         }
     };
-    return (_jsxs(PagePanel, { as: "section", variant: "surface", "aria-label": "Identity merges", className: "px-3 py-3", children: [_jsx("div", { className: "mb-2 flex justify-end", children: _jsxs(MetaPill, { compact: true, "aria-label": "Identity merge count", title: "Identity merges", children: [_jsx(Fingerprint, { className: "mr-1 h-3 w-3" }), candidates.length] }) }), _jsx("div", { className: "space-y-2", children: candidates.map((candidate) => {
+    return (_jsxs(PagePanel, { as: "section", variant: "surface", "aria-label": t("relationshipsmerges.sectionLabel", {
+            defaultValue: "Identity merges",
+        }), className: "px-3 py-3", children: [_jsx("div", { className: "mb-2 flex justify-end", children: _jsxs(MetaPill, { compact: true, "aria-label": t("relationshipsmerges.countLabel", {
+                        defaultValue: "Identity merge count",
+                    }), title: t("relationshipsmerges.sectionLabel", {
+                        defaultValue: "Identity merges",
+                    }), children: [_jsx(Fingerprint, { className: "mr-1 h-3 w-3" }), candidates.length] }) }), _jsx("div", { className: "space-y-2", children: candidates.map((candidate) => {
                     const isPending = pending.has(candidate.id);
                     const errorMessage = errors.get(candidate.id) ?? null;
                     const evidenceCount = candidate.evidence.identityIds?.length ?? 0;
                     const evidenceText = evidenceSummary(candidate);
-                    return (_jsxs("div", { className: "rounded-xl border border-border/24 bg-card/32 px-3 py-2.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": "Confidence", className: "inline-flex items-center gap-1", children: [_jsx(Gauge, { className: "h-3 w-3" }), Math.round(candidate.confidence * 100), "%"] }) }), _jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": "Evidence count", className: "inline-flex items-center gap-1", children: [_jsx(FileText, { className: "h-3 w-3" }), evidenceCount] }) }), _jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": "Proposed at", className: "inline-flex items-center gap-1", children: [_jsx(CalendarClock, { className: "h-3 w-3" }), formatDateTime(candidate.proposedAt, {
+                    return (_jsxs("div", { className: "rounded-sm border border-border/24 bg-card/32 px-3 py-2.5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": t("relationshipsmerges.confidence", {
+                                                defaultValue: "Confidence",
+                                            }), className: "inline-flex items-center gap-1", children: [_jsx(Gauge, { className: "h-3 w-3" }), Math.round(candidate.confidence * 100), "%"] }) }), _jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": t("relationshipsmerges.evidenceCount", {
+                                                defaultValue: "Evidence count",
+                                            }), className: "inline-flex items-center gap-1", children: [_jsx(FileText, { className: "h-3 w-3" }), evidenceCount] }) }), _jsx(MetaPill, { compact: true, children: _jsxs("span", { role: "img", "aria-label": t("relationshipsmerges.proposedAt", {
+                                                defaultValue: "Proposed at",
+                                            }), className: "inline-flex items-center gap-1", children: [_jsx(CalendarClock, { className: "h-3 w-3" }), formatDateTime(candidate.proposedAt, {
                                                     fallback: "No date",
                                                 })] }) })] }), _jsxs("div", { className: "mt-2 text-sm font-semibold text-txt", children: [personLabel(graph, candidate.entityA), " ", _jsx("span", { className: "text-muted", children: "\u2194" }), " ", personLabel(graph, candidate.entityB)] }), evidenceText !== "No evidence" ? (_jsx("div", { className: "mt-1 truncate text-xs leading-5 text-muted", children: evidenceText })) : null, errorMessage ? (_jsx("div", { className: "mt-2 text-xs text-danger", children: errorMessage })) : null, _jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [_jsxs(Button, { type: "button", size: "sm", variant: "default", className: "h-7 gap-1.5 rounded-full px-2.5 text-2xs", disabled: isPending, onClick: () => {
                                             void resolveCandidate(candidate, "accept");
-                                        }, children: [_jsx(Check, { className: "h-3 w-3" }), isPending ? "Working…" : "Accept"] }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1.5 rounded-full px-2.5 text-2xs", disabled: isPending, onClick: () => {
+                                        }, children: [_jsx(Check, { className: "h-3 w-3" }), isPending
+                                                ? t("relationshipsmerges.working", {
+                                                    defaultValue: "Working…",
+                                                })
+                                                : t("relationshipsmerges.accept", {
+                                                    defaultValue: "Accept",
+                                                })] }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1.5 rounded-full px-2.5 text-2xs", disabled: isPending, onClick: () => {
                                             void resolveCandidate(candidate, "reject");
-                                        }, children: [_jsx(X, { className: "h-3 w-3" }), "Reject"] })] })] }, candidate.id));
+                                        }, children: [_jsx(X, { className: "h-3 w-3" }), t("relationshipsmerges.reject", { defaultValue: "Reject" })] })] })] }, candidate.id));
                 }) })] }));
 }

package/components/pages/relationships/RelationshipsPersonPanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationshipsPersonPanels.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsPersonPanels.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAEV,yBAAyB,EAE1B,MAAM,yCAAyC,CAAC;AAUjD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC;AAwW5D,wBAAgB,+BAA+B,CAAC,EAC9C,MAAM,EACN,OAAe,EACf,YAAmB,EACnB,gBAAuB,EACvB,cAAc,EACd,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,2CAwJA;AA0DD,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CA8CA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CA4DA;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CA6EA;AAED,wBAAgB,kCAAkC,CAAC,EACjD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAqDA;AAED,wBAAgB,iCAAiC,CAAC,EAChD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CA8DA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAgJA"}
+{"version":3,"file":"RelationshipsPersonPanels.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/relationships/RelationshipsPersonPanels.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAEV,yBAAyB,EAE1B,MAAM,yCAAyC,CAAC;AAiBjD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC;AA8a5D,wBAAgB,+BAA+B,CAAC,EAC9C,MAAM,EACN,OAAe,EACf,YAAmB,EACnB,gBAAuB,EACvB,cAAc,EACd,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,2CAyKA;AA4DD,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAkEA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAiEA;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAoFA;AAED,wBAAgB,kCAAkC,CAAC,EACjD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAqDA;AAED,wBAAgB,iCAAiC,CAAC,EAChD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CAyEA;AAgCD,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,GACP,EAAE;IACD,MAAM,EAAE,0BAA0B,CAAC;CACpC,2CA+JA"}