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

package/components/pages/PluginsView.js

@@ -1,22 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Package } from "lucide-react";
+import { Package, Puzzle } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { useLinkedSidebarSelection } from "../../hooks/useLinkedSidebarSelection.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { PageLayoutHeader } from "../../layouts/page-layout/page-layout-header.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { openExternalUrl } from "../../utils/index.js";
-import { buildPluginListState, getPluginResourceLinks, iconImageSource, resolveIcon, SUBGROUP_NAV_ICONS, } from "./plugin-list-utils.js";
-export { paramsToSchema } from "./plugin-list-utils.js";
-import { Button, PageLayoutHeader, PagePanel, SidebarContent, SidebarPanel, SidebarScrollRegion, useLinkedSidebarSelection, } from "@elizaos/ui";
-import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { ChatSearchHint } from "../composites/chat-search-hint.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
 import { PluginCard } from "./PluginCard.js";
+import { buildPluginListState, getPluginResourceLinks, iconImageSource, resolveIcon, SUBGROUP_DISPLAY_ORDER, SUBGROUP_LABELS, SUBGROUP_NAV_ICONS, subgroupForPlugin, } from "./plugin-list-utils.js";
 import { ConnectorPluginGroups, } from "./plugin-view-connectors.js";
 import { PluginSettingsDialog } from "./plugin-view-dialogs.js";
 import { PluginGameModal } from "./plugin-view-modal.js";
-import { ConnectorSidebar } from "./plugin-view-sidebar.js";
 function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
-    const { plugins = [], pluginStatusFilter = "all", pluginSearch = "", pluginSettingsOpen = new Set(), pluginSaving, pluginSaveSuccess, loadPlugins, ensurePluginsLoaded = async () => {
+    const { plugins = [], pluginStatusFilter = "all", pluginSearch = "", pluginSettingsOpen = new Set(), pluginSaving, pluginSaveSuccess, isLoadingPlugins = false, pluginsLoadError = null, pluginsLoaded = false, loadPlugins, ensurePluginsLoaded = async () => {
         await loadPlugins();
-    }, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useApp();
+    }, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useAppSelectorShallow((s) => ({
+        plugins: s.plugins,
+        pluginStatusFilter: s.pluginStatusFilter,
+        pluginSearch: s.pluginSearch,
+        pluginSettingsOpen: s.pluginSettingsOpen,
+        pluginSaving: s.pluginSaving,
+        pluginSaveSuccess: s.pluginSaveSuccess,
+        isLoadingPlugins: s.isLoadingPlugins,
+        pluginsLoadError: s.pluginsLoadError,
+        pluginsLoaded: s.pluginsLoaded,
+        loadPlugins: s.loadPlugins,
+        ensurePluginsLoaded: s.ensurePluginsLoaded,
+        handlePluginToggle: s.handlePluginToggle,
+        handlePluginConfigSave: s.handlePluginConfigSave,
+        setActionNotice: s.setActionNotice,
+        setState: s.setState,
+        t: s.t,
+    }));
+    // The floating chat composer is this view's search box. While Plugins is the
+    // active view it takes over the composer (placeholder + live draft) and feeds
+    // each keystroke into the shared `pluginSearch` filter — there's no in-page
+    // search input.
+    const searchPlaceholder = t("pluginsview.SearchPlaceholder", {
+        defaultValue: "Search plugins…",
+    });
+    const handleSearchQuery = useCallback((value) => setState("pluginSearch", value), [setState]);
+    const chatBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: handleSearchQuery }), [searchPlaceholder, handleSearchQuery]);
+    useRegisterViewChatBinding(chatBinding);
     const [pluginConfigs, setPluginConfigs] = useState({});
     const [testResults, setTestResults] = useState(new Map());
     const [installingPlugins, setInstallingPlugins] = useState(new Set());
@@ -96,13 +127,13 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
         if (result?.success) {
             return t("pluginsview.ConnectionTestPassedDialog", {
                 durationMs: result.durationMs,
-                defaultValue: "✓ OK ({{durationMs}}ms)",
+                defaultValue: "OK ({{durationMs}}ms)",
             });
         }
         if (result?.error) {
             return t("pluginsview.ConnectionTestFailedDialog", {
                 error: result.error,
-                defaultValue: "✕ {{error}}",
+                defaultValue: "Failed: {{error}}",
             });
         }
         return t("pluginsview.TestConnection");
@@ -129,19 +160,36 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
     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 isSocialMode = mode === "social";
+    // The connector-accordion shell (inline OAuth / managed-Discord setup) is
+    // reserved for the dedicated Connectors surface. The /apps/plugins page
+    // ("all-social") renders the visual card grid below.
+    const isSidebarEditorShellMode = mode === "social";
+    // The card grid honors the live search + status filters from the app bar.
+    const isGridSearchMode = mode === "all-social" || mode === "all";
     const isConnectorLikeMode = mode === "connectors" || mode === "social";
     const resultLabel = mode === "social" ? "connectors" : label.toLowerCase();
     const effectiveStatusFilter = isSidebarEditorShellMode
         ? pluginStatusFilter
-        : "all";
-    const effectiveSearch = isSidebarEditorShellMode ? pluginSearch : "";
+        : isGridSearchMode
+            ? pluginStatusFilter
+            : "all";
+    const effectiveSearch = isSidebarEditorShellMode || isGridSearchMode ? pluginSearch : "";
     const allowCustomOrder = !isSocialMode;
-    // Load plugins on mount
+    // Load plugins on mount — exactly once. `ensurePluginsLoaded` is recreated
+    // whenever the underlying `pluginsLoaded` flag flips (its useCallback depends
+    // on it), so depending on its identity here re-fires the effect on every such
+    // change and, combined with context re-renders, produces a render storm. Read
+    // the latest callback through a ref and gate on a one-shot flag instead.
+    const ensurePluginsLoadedRef = useRef(ensurePluginsLoaded);
+    ensurePluginsLoadedRef.current = ensurePluginsLoaded;
+    const didLoadPluginsRef = useRef(false);
     useEffect(() => {
-        void ensurePluginsLoaded();
-    }, [ensurePluginsLoaded]);
+        if (didLoadPluginsRef.current)
+            return;
+        didLoadPluginsRef.current = true;
+        void ensurePluginsLoadedRef.current();
+    }, []);
     // Listen for install progress events via WebSocket
     useEffect(() => {
         const unbind = client.onWsEvent("install-progress", (data) => {
@@ -171,7 +219,6 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
     }, [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,
@@ -202,21 +249,15 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
             setSubgroupFilter("all");
         }
     }, [showSubgroupFilters, subgroupFilter, subgroupTags]);
-    const renderSubgroupFilterButton = useCallback((tag, options) => {
+    const renderSubgroupFilterButton = useCallback((tag) => {
         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 Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
+        return (_jsxs(Button, { variant: isActive ? "default" : "outline", size: "sm", className: `h-8 gap-1.5 rounded-full px-3 text-xs-tight font-bold tracking-wide transition-all ${isActive
+                ? "border-accent bg-accent text-accent-fg hover:bg-accent/90"
+                : "border-border/50 bg-card/50 text-muted hover:border-accent/40 hover:text-txt"}`, onClick: () => setSubgroupFilter(tag.id), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), tag.label, _jsx("span", { className: `ml-0.5 rounded-full px-1.5 py-0.5 text-3xs font-mono leading-none ${isActive
+                        ? "bg-accent-fg/20 text-accent-fg"
+                        : "bg-bg-accent/80 text-muted-strong"}`, children: tag.count })] }, tag.id));
+    }, [subgroupFilter]);
     const toggleSettings = (pluginId) => {
         const next = new Set();
         if (!pluginSettingsOpen.has(pluginId))
@@ -356,12 +397,14 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
                 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
+            // The install failure is already surfaced above. This refresh is a
+            // best-effort reconciliation in case install partially succeeded; its
+            // own failure adds no new actionable information for the user.
             try {
                 await loadPlugins();
             }
             catch {
-                /* ignore */
+                /* best-effort refresh; outer error already shown */
             }
         }
         finally {
@@ -425,7 +468,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
                 await loadPlugins();
             }
             catch {
-                /* ignore */
+                /* best-effort refresh; outer error already shown */
             }
         }
         finally {
@@ -489,7 +532,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
                 await loadPlugins();
             }
             catch {
-                /* ignore */
+                /* best-effort refresh; outer error already shown */
             }
         }
         finally {
@@ -552,8 +595,12 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
             return;
         }
         // Materialize current sorted order, then splice
-        if (!allowCustomOrder)
+        if (!allowCustomOrder) {
+            dragRef.current = null;
+            setDraggingId(null);
+            setDragOverId(null);
             return;
+        }
         setPluginOrder(() => {
             // Build full order: items in custom order first, then any new ones
             const allIds = nonDbPlugins.map((p) => p.id);
@@ -592,23 +639,60 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
         setPluginOrder([]);
         localStorage.removeItem("pluginOrder");
     }, []);
+    const { ref: resetOrderRef, agentProps: resetOrderAgentProps } = useAgentElement({
+        id: "reset-plugin-order",
+        role: "button",
+        label: t("pluginsview.ResetOrder"),
+        group: "plugin-actions",
+        description: "Reset the custom plugin ordering to the default sort",
+        onActivate: handleResetOrder,
+    });
     const renderResolvedIcon = useCallback((plugin, options) => {
         const icon = resolveIcon(plugin);
         if (!icon) {
-            return _jsx("span", { className: options?.emojiClassName ?? "text-sm", children: "\uD83E\uDDE9" });
+            return _jsx(Puzzle, { className: options?.className ?? "w-5 h-5" });
         }
         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) => {
+            return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: options?.className ?? "w-5 h-5 rounded-sm object-contain", onError: (e) => {
                     e.currentTarget.style.display = "none";
-                } })) : (_jsx("span", { className: options?.emojiClassName ?? "text-sm", children: icon }));
+                } })) : (_jsx(Puzzle, { className: options?.className ?? "w-5 h-5" }));
         }
         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))) }));
+    /** Render plugins as flat rows separated by a single hairline divider. */
+    const renderPluginGrid = (plugins) => (_jsx("ul", { className: "m-0 flex list-none flex-col divide-y divide-border/40 p-0", 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))) }));
+    /**
+     * Render plugins split into labeled subgroup sections (light uppercase
+     * labels between grids). Used when the "All" filter chip is active so the
+     * single pane keeps section context without a nav sidebar.
+     */
+    const groupedVisiblePlugins = useMemo(() => {
+        const groupMap = new Map();
+        for (const plugin of visiblePlugins) {
+            const groupId = subgroupForPlugin(plugin);
+            const bucket = groupMap.get(groupId);
+            if (bucket)
+                bucket.push(plugin);
+            else
+                groupMap.set(groupId, [plugin]);
+        }
+        const orderedGroups = SUBGROUP_DISPLAY_ORDER.filter((id) => groupMap.has(id));
+        for (const id of groupMap.keys()) {
+            if (!orderedGroups.includes(id))
+                orderedGroups.push(id);
+        }
+        return orderedGroups.map((groupId) => ({
+            groupId,
+            plugins: groupMap.get(groupId) ?? [],
+        }));
+    }, [visiblePlugins]);
+    const renderGroupedPlugins = () => (_jsx("div", { className: "space-y-6", children: groupedVisiblePlugins.map(({ groupId, plugins: groupPlugins }) => {
+            if (groupPlugins.length === 0)
+                return null;
+            return (_jsxs("section", { children: [_jsx("h3", { className: "mb-3 text-sm font-medium text-txt-strong", children: SUBGROUP_LABELS[groupId] ?? groupId }), renderPluginGrid(groupPlugins)] }, groupId));
+        }) }));
     // Resolve the plugin whose settings dialog is currently open.
     // Exclude ai-provider plugins — those are configured in Settings.
     const settingsDialogPlugin = Array.from(pluginSettingsOpen)
@@ -628,7 +712,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
         ? (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({
+    const { contentContainerRef: connectorContentRef, queueContentAlignment: queueConnectorContentAlignment, registerContentItem: registerConnectorContentItem, scrollContentToItem: scrollConnectorIntoView, } = useLinkedSidebarSelection({
         contentTopOffset: 0,
         enabled: isSidebarEditorShellMode,
         selectedId: connectorSelectedId,
@@ -691,7 +775,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
             return next;
         });
     }, [desktopConnectorLayout, isSidebarEditorShellMode, visiblePlugins]);
-    const handleConnectorSelect = useCallback((pluginId) => {
+    const _handleConnectorSelect = useCallback((pluginId) => {
         setConnectorSelectedId(pluginId);
         if (desktopConnectorLayout) {
             setConnectorExpandedIds(new Set([pluginId]));
@@ -751,8 +835,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
             ? "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
+        const connectorContent = (_jsxs("div", { className: "w-full", children: [_jsx(ChatSearchHint, { noun: "plugins", query: pluginSearch, className: "mb-4" }), 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-sm px-5 py-10", description: hasActivePluginFilters
                         ? `Try a different search or category filter for ${resultLabel}.`
                         : shellEmptyDescription, title: hasActivePluginFilters
                         ? `No ${resultLabel} match your filters`
@@ -771,35 +854,43 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
         ? 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 })] }) }));
+    const isAllFilter = subgroupFilter === "all";
+    return (_jsx(PagePanel.Frame, { "data-testid": "plugins-view-page", children: _jsxs(PagePanel, { as: "div", variant: "shell", className: "settings-shell flex-col", "data-testid": "plugins-shell", children: [_jsx(PagePanel.ContentArea, { children: _jsxs("main", { className: "chat-native-scrollbar flex h-full flex-col overflow-y-auto px-4 pb-32 pt-5 sm:px-6 lg:px-8", children: [_jsxs("header", { className: "mb-5", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight text-txt", children: pluginSectionTitle }), _jsx(ChatSearchHint, { noun: "plugins", query: pluginSearch, className: "mt-2" }), showSubgroupFilters && subgroupTags.length > 1 && (_jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", "data-testid": "plugins-subgroup-chips", children: [subgroupTags.map((tag) => renderSubgroupFilterButton(tag)), allowCustomOrder && pluginOrder.length > 0 && (_jsx(Button, { ref: resetOrderRef, variant: "outline", size: "sm", className: "ml-1 h-8 rounded-full px-3 text-2xs font-bold tracking-wide text-muted hover:text-txt", onClick: handleResetOrder, title: t("pluginsview.ResetToDefaultSor"), ...resetOrderAgentProps, children: t("pluginsview.ResetOrder") }))] }))] }), hasPluginToggleInFlight && (_jsx(PagePanel.Notice, { tone: "accent", className: "mb-4 text-xs-tight", children: t("pluginsview.ApplyingPluginChan") })), sorted.length === 0 && isLoadingPlugins ? (_jsx(PagePanel.Loading, { variant: "surface", className: "min-h-[18rem] rounded-lg px-5 py-10", heading: t("pluginsview.LoadingTitle", {
+                                    defaultValue: "Loading {{label}}…",
+                                    label: label.toLowerCase(),
+                                }) })) : sorted.length === 0 && pluginsLoadError ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[18rem] rounded-lg px-5 py-10", description: t("pluginsview.LoadFailedDesc", {
+                                    defaultValue: "Couldn't load {{label}}: {{error}}. Check your connection and try again.",
+                                    label: resultLabel,
+                                    error: pluginsLoadError,
+                                }), title: t("pluginsview.LoadFailedTitle", {
+                                    defaultValue: "Couldn't load {{label}}",
+                                    label: label.toLowerCase(),
+                                }), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                        void loadPlugins();
+                                    }, children: t("pluginsview.Retry", { defaultValue: "Retry" }) }) })) : sorted.length === 0 && pluginsLoaded ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[18rem] rounded-lg 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(),
+                                }) })) : sorted.length === 0 ? (_jsx(PagePanel.Loading, { variant: "surface", className: "min-h-[18rem] rounded-lg px-5 py-10", heading: t("pluginsview.LoadingTitle", {
+                                    defaultValue: "Loading {{label}}…",
+                                    label: label.toLowerCase(),
+                                }) })) : visiblePlugins.length === 0 ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[16rem] rounded-lg 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",
+                                }) })) : isAllFilter && !pluginSearch.trim() ? (renderGroupedPlugins()) : (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", }) {
+    useRenderGuard("PluginsView");
     const label = mode === "social"
         ? "Connectors"
         : mode === "connectors"

package/components/pages/RelationshipsGraphPanel.d.ts

@@ -1,4 +1,4 @@
-import type { RelationshipsGraphSnapshot } from "../../api/client-types-relationships";
+import type { RelationshipsGraphSnapshot } from "../../api/client-types-relationships.js";
 export declare function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact, onSelectPersonId, }: {
     snapshot: RelationshipsGraphSnapshot;
     selectedGroupId: string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"RelationshipsGraphPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RelationshipsGraphPanel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,sCAAsC,CAAC;AAmrB9C,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,eAAe,EACf,OAAe,EACf,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,0BAA0B,CAAC;IACrC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,2CAifA"}
+{"version":3,"file":"RelationshipsGraphPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RelationshipsGraphPanel.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,sCAAsC,CAAC;AAssB9C,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,eAAe,EACf,OAAe,EACf,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,0BAA0B,CAAC;IACrC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,2CAkiBA"}

package/components/pages/RelationshipsGraphPanel.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@elizaos/ui";
 import { Crown, Fingerprint, Frown, Link2, Meh, MessageCircle, Minus, Plus, Smile, } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { useTranslation, } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip.js";
 const GRAPH_WIDTH = 1320;
 const GRAPH_HEIGHT = 760;
 const GRAPH_PADDING = 92;
@@ -396,26 +399,26 @@ function buildNodePositions(people, edges, selectedGroupId) {
     });
     return positions;
 }
-function GraphIconButton({ label, disabled = false, onClick, children, }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 w-8 rounded-full p-0", "aria-label": label, disabled: disabled, onClick: onClick, children: children }) }), _jsx(TooltipContent, { children: label })] }));
+function GraphIconButton({ label, disabled = false, onClick, children, agentRef, agentProps, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: agentRef, type: "button", size: "sm", variant: "outline", className: "h-8 w-8 rounded-full p-0", "aria-label": label, disabled: disabled, onClick: onClick, ...agentProps, children: children }) }), _jsx(TooltipContent, { children: label })] }));
 }
-function GraphLegend() {
+function GraphLegend({ t }) {
     const items = [
         {
-            icon: _jsx(Crown, { className: "h-3.5 w-3.5 text-[rgba(99,102,241,0.86)]" }),
-            label: "Owner",
+            icon: _jsx(Crown, { className: "h-3.5 w-3.5 text-accent" }),
+            label: t("relationshipsgraph.owner", { defaultValue: "Owner" }),
         },
         {
             icon: _jsx(Smile, { className: "h-3.5 w-3.5 text-[rgba(34,197,94,0.9)]" }),
-            label: "Positive",
+            label: t("relationshipsgraph.positive", { defaultValue: "Positive" }),
         },
         {
             icon: _jsx(Meh, { className: "h-3.5 w-3.5 text-[rgba(240,185,11,0.9)]" }),
-            label: "Neutral",
+            label: t("relationshipsgraph.neutral", { defaultValue: "Neutral" }),
         },
         {
             icon: _jsx(Frown, { className: "h-3.5 w-3.5 text-[rgba(239,68,68,0.9)]" }),
-            label: "Negative",
+            label: t("relationshipsgraph.negative", { defaultValue: "Negative" }),
         },
     ];
     return (_jsx("div", { className: "flex items-center gap-1", children: items.map((item) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": item.label, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/24 bg-card/40", children: item.icon }) }), _jsx(TooltipContent, { children: item.label })] }, item.label))) }));
@@ -433,7 +436,7 @@ function GraphTooltip({ state }) {
     };
     if (state.kind === "node") {
         const { person } = state;
-        return (_jsxs("div", { style: style, className: "rounded-xl border border-border/40 bg-card/95 px-3 py-2.5 shadow-lg backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-semibold text-txt", children: [person.isOwner ? (_jsx(Crown, { className: "h-3.5 w-3.5 text-[rgba(99,102,241,0.86)]" })) : null, person.displayName] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Fingerprint, { className: "h-3 w-3" }), person.memberEntityIds.length] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "h-3 w-3" }), person.relationshipCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), person.factCount] })] })] }));
+        return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-semibold text-txt", children: [person.isOwner ? (_jsx(Crown, { className: "h-3.5 w-3.5 text-accent" })) : null, person.displayName] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Fingerprint, { className: "h-3 w-3" }), person.memberEntityIds.length] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "h-3 w-3" }), person.relationshipCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), person.factCount] })] })] }));
     }
     const { edge } = state;
     const SentimentIcon = edge.sentiment === "positive"
@@ -441,9 +444,10 @@ function GraphTooltip({ state }) {
         : edge.sentiment === "negative"
             ? Frown
             : Meh;
-    return (_jsxs("div", { style: style, className: "rounded-xl border border-border/40 bg-card/95 px-3 py-2.5 shadow-lg backdrop-blur-md", children: [_jsxs("div", { className: "text-sm font-semibold text-txt", children: [edge.sourcePersonName, " / ", edge.targetPersonName] }), _jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", style: { color: EDGE_COLORS[edgeTone(edge.sentiment)] }, children: [_jsx(SentimentIcon, { className: "h-3 w-3" }), Math.round(edge.strength * 100), "%"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), edge.interactionCount] })] })] }));
+    return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5", children: [_jsxs("div", { className: "text-sm font-semibold text-txt", children: [edge.sourcePersonName, " / ", edge.targetPersonName] }), _jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", style: { color: EDGE_COLORS[edgeTone(edge.sentiment)] }, children: [_jsx(SentimentIcon, { className: "h-3 w-3" }), Math.round(edge.strength * 100), "%"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), edge.interactionCount] })] })] }));
 }
 export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = false, onSelectPersonId, }) {
+    const { t } = useTranslation();
     const [tooltip, setTooltip] = useState(null);
     const fittedZoom = compact ? 0.68 : 0.9;
     const [zoom, setZoom] = useState(fittedZoom);
@@ -652,7 +656,43 @@ export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = f
     const zoomPercent = `${Math.round(zoom * 100)}%`;
     const graphWidth = GRAPH_WIDTH * zoom;
     const graphHeight = GRAPH_HEIGHT * zoom;
-    return (_jsx(TooltipProvider, { delayDuration: 160, skipDelayDuration: 80, children: _jsxs("div", { className: compact ? "space-y-3" : "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(GraphLegend, {}), _jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-full border border-border/24 bg-card/40 px-1 py-0.5", children: [_jsx(GraphIconButton, { label: "Zoom out", disabled: zoom <= MIN_ZOOM, onClick: zoomOut, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: handleZoomPercentClick, className: "min-w-10 rounded-full px-1 text-2xs font-semibold tabular-nums text-muted transition hover:text-txt", "aria-label": "Toggle zoom (fit / 100%)", children: zoomPercent }) }), _jsx(TooltipContent, { children: "Toggle fit / 100%" })] }), _jsx(GraphIconButton, { label: "Zoom in", disabled: zoom >= MAX_ZOOM, onClick: zoomIn, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { ref: containerRef, className: `${compact ? "max-h-[34rem]" : "max-h-[42rem]"} relative cursor-grab touch-none overflow-auto overscroll-contain rounded-2xl border border-border/26 bg-[radial-gradient(circle_at_top,rgba(240,185,11,0.12),transparent_42%),linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] active:cursor-grabbing`, "data-graph-container": true, onMouseLeave: hideTooltip, onPointerDown: beginPan, onPointerMove: updatePan, onPointerUp: endPan, onPointerCancel: endPan, onPointerLeave: leavePan, children: [_jsx(GraphTooltip, { state: tooltip }), _jsxs("svg", { viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`, className: "block max-w-none", style: { width: graphWidth, height: graphHeight }, role: "img", "aria-label": "Relationships graph", children: [_jsxs("defs", { children: [_jsxs("radialGradient", { id: "relationships-node-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,240,199,0.96)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(240,185,11,0.9)" })] }), _jsxs("radialGradient", { id: "relationships-owner-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(199,210,255,0.98)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(99,102,241,0.86)" })] })] }), visibleGraph.relationships.map((edge) => {
+    const zoomOutButton = useAgentElement({
+        id: "relationships-graph-zoom-out",
+        role: "button",
+        label: t("relationshipsgraph.zoomOut", { defaultValue: "Zoom out" }),
+        group: "relationships-graph",
+        description: "Zoom the relationships graph out",
+        onActivate: () => zoomOut(),
+    });
+    const zoomInButton = useAgentElement({
+        id: "relationships-graph-zoom-in",
+        role: "button",
+        label: t("relationshipsgraph.zoomIn", { defaultValue: "Zoom in" }),
+        group: "relationships-graph",
+        description: "Zoom the relationships graph in",
+        onActivate: () => zoomIn(),
+    });
+    const zoomToggleButton = useAgentElement({
+        id: "relationships-graph-zoom-toggle",
+        role: "button",
+        label: t("relationshipsgraph.toggleZoomAria", {
+            defaultValue: "Toggle zoom (fit / 100%)",
+        }),
+        group: "relationships-graph",
+        description: "Toggle the graph zoom between fit and 100%",
+        onActivate: () => handleZoomPercentClick(),
+    });
+    return (_jsx(TooltipProvider, { delayDuration: 160, skipDelayDuration: 80, children: _jsxs("div", { className: compact ? "space-y-3" : "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(GraphLegend, { t: t }), _jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-full border border-border/24 bg-card/40 px-1 py-0.5", children: [_jsx(GraphIconButton, { label: t("relationshipsgraph.zoomOut", {
+                                        defaultValue: "Zoom out",
+                                    }), disabled: zoom <= MIN_ZOOM, onClick: zoomOut, agentRef: zoomOutButton.ref, agentProps: zoomOutButton.agentProps, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { ref: zoomToggleButton.ref, type: "button", onClick: handleZoomPercentClick, className: "min-w-10 rounded-full px-1 text-2xs font-semibold tabular-nums text-muted transition hover:text-txt", "aria-label": t("relationshipsgraph.toggleZoomAria", {
+                                                    defaultValue: "Toggle zoom (fit / 100%)",
+                                                }), ...zoomToggleButton.agentProps, children: zoomPercent }) }), _jsx(TooltipContent, { children: t("relationshipsgraph.toggleFit", {
+                                                defaultValue: "Toggle fit / 100%",
+                                            }) })] }), _jsx(GraphIconButton, { label: t("relationshipsgraph.zoomIn", {
+                                        defaultValue: "Zoom in",
+                                    }), disabled: zoom >= MAX_ZOOM, onClick: zoomIn, agentRef: zoomInButton.ref, agentProps: zoomInButton.agentProps, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { ref: containerRef, className: `${compact ? "max-h-[34rem]" : "max-h-[42rem]"} relative cursor-grab touch-none overflow-auto overscroll-contain rounded-sm border border-border/26 bg-[radial-gradient(circle_at_top,rgba(240,185,11,0.12),transparent_42%),linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] active:cursor-grabbing`, "data-graph-container": true, onMouseLeave: hideTooltip, onPointerDown: beginPan, onPointerMove: updatePan, onPointerUp: endPan, onPointerCancel: endPan, onPointerLeave: leavePan, children: [_jsx(GraphTooltip, { state: tooltip }), _jsxs("svg", { viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`, className: "block max-w-none", style: { width: graphWidth, height: graphHeight }, role: "img", "aria-label": t("relationshipsgraph.graphAria", {
+                                defaultValue: "Relationships graph",
+                            }), children: [_jsxs("defs", { children: [_jsxs("radialGradient", { id: "relationships-node-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,240,199,0.96)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(240,185,11,0.9)" })] }), _jsxs("radialGradient", { id: "relationships-owner-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "var(--accent-hover)" }), _jsx("stop", { offset: "100%", stopColor: "var(--accent)" })] })] }), visibleGraph.relationships.map((edge) => {
                                     const source = positions.get(edge.sourcePersonId);
                                     const target = positions.get(edge.targetPersonId);
                                     if (!source || !target) {
@@ -677,12 +717,12 @@ export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = f
                                                             ? "rgba(240,185,11,0.52)"
                                                             : directlyConnected
                                                                 ? "rgba(34,197,94,0.38)"
-                                                                : "transparent", strokeWidth: selected ? 3 : directlyConnected ? 2 : 0 }), isOwner ? (_jsx("circle", { r: radius + 11, fill: "transparent", stroke: "rgba(99,102,241,0.56)", strokeWidth: 2, strokeDasharray: "5 4" })) : null, _jsx("circle", { r: radius, fill: isOwner
+                                                                : "transparent", strokeWidth: selected ? 3 : directlyConnected ? 2 : 0 }), isOwner ? (_jsx("circle", { r: radius + 11, fill: "transparent", stroke: "var(--accent)", strokeWidth: 2, strokeDasharray: "5 4" })) : null, _jsx("circle", { r: radius, fill: isOwner
                                                             ? "url(#relationships-owner-fill)"
                                                             : "url(#relationships-node-fill)", stroke: selected
                                                             ? "rgba(255,255,255,0.96)"
                                                             : isOwner
-                                                                ? "rgba(99,102,241,0.78)"
+                                                                ? "var(--accent)"
                                                                 : "rgba(28,34,43,0.56)", strokeWidth: selected ? 3.5 : isOwner ? 2.5 : 1.5 }), _jsx("text", { textAnchor: "middle", y: 5, className: `text-sm font-semibold ${isOwner ? "fill-white" : "fill-black"}`, children: nodeInitials(person.displayName) }), showLabel ? (_jsx("text", { textAnchor: "middle", y: radius + 24, className: "text-xs font-semibold", fill: "var(--txt)", stroke: "rgba(255,255,255,0.82)", strokeWidth: 4, paintOrder: "stroke", children: shortLabel(person.displayName, 19) })) : null] }), _jsx("foreignObject", { x: position.x - 90, y: position.y - radius - 18, width: 180, height: radius + 72, children: _jsx("button", { type: "button", onClick: (event) => {
                                                         if (shouldSuppressClickRef.current) {
                                                             event.preventDefault();
@@ -691,6 +731,9 @@ export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = f
                                                             return;
                                                         }
                                                         onSelectPersonId(person.primaryEntityId);
-                                                    }, onMouseEnter: (event) => showTooltipForNode(person, event), onMouseMove: (event) => showTooltipForNode(person, event), onMouseLeave: hideTooltip, className: "h-full w-full rounded-2xl bg-transparent", "aria-label": `Select ${person.displayName}` }) })] }, person.groupId));
+                                                    }, onMouseEnter: (event) => showTooltipForNode(person, event), onMouseMove: (event) => showTooltipForNode(person, event), onMouseLeave: hideTooltip, className: "h-full w-full rounded-sm bg-transparent", "aria-label": t("relationshipsgraph.selectPerson", {
+                                                        name: person.displayName,
+                                                        defaultValue: "Select {{name}}",
+                                                    }) }) })] }, person.groupId));
                                 })] })] })] }) }));
 }

package/components/pages/RelationshipsIdentityCluster.d.ts

@@ -1,4 +1,4 @@
-import type { RelationshipsPersonDetail } from "../../api/client-types-relationships";
+import type { RelationshipsPersonDetail } from "../../api/client-types-relationships.js";
 export declare function RelationshipsIdentityCluster({ person, }: {
     person: RelationshipsPersonDetail;
 }): import("react/jsx-runtime").JSX.Element | null;

package/components/pages/RelationshipsIdentityCluster.js

@@ -12,6 +12,6 @@ export function RelationshipsIdentityCluster({ person, }) {
             const primaryName = identity.names[0];
             const handles = identity.handles.map((h) => h.handle).filter(Boolean);
             const detail = handles.length > 0 ? handles.join(", ") : identity.entityId;
-            return (_jsxs("li", { className: "flex items-center gap-2 rounded-lg border border-border/24 bg-card/30 px-2.5 py-1.5 text-xs", children: [_jsx(Fingerprint, { className: "h-3 w-3 shrink-0 text-accent" }), _jsx("span", { className: "shrink-0 rounded-full bg-card/60 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-[0.1em] text-muted", children: shortLabel(platform.replace(/_/g, " "), 12) }), primaryName ? (_jsx("span", { className: "min-w-0 truncate font-semibold text-txt", children: shortLabel(primaryName, 28) })) : null, _jsx("span", { className: "ml-auto min-w-0 truncate text-muted", children: shortLabel(detail, 32) })] }, identity.entityId));
+            return (_jsxs("li", { className: "flex items-center gap-2 rounded-sm border border-border/24 bg-card/30 px-2.5 py-1.5 text-xs", children: [_jsx(Fingerprint, { className: "h-3 w-3 shrink-0 text-accent" }), _jsx("span", { className: "shrink-0 rounded-full bg-card/60 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-[0.1em] text-muted", children: shortLabel(platform.replace(/_/g, " "), 12) }), primaryName ? (_jsx("span", { className: "min-w-0 truncate font-semibold text-txt", children: shortLabel(primaryName, 28) })) : null, _jsx("span", { className: "ml-auto min-w-0 truncate text-muted", children: shortLabel(detail, 32) })] }, identity.entityId));
         }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"RelationshipsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RelationshipsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAEL"}
+{"version":3,"file":"RelationshipsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RelationshipsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAML"}

package/components/pages/RelationshipsView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { RelationshipsWorkspaceView } from "./relationships/RelationshipsWorkspaceView.js";
 export function RelationshipsView({ contentHeader, } = {}) {
-    return _jsx(RelationshipsWorkspaceView, { contentHeader: contentHeader });
+    return (_jsx(ShellViewAgentSurface, { viewId: "relationships", children: _jsx(RelationshipsWorkspaceView, { contentHeader: contentHeader }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseCenterView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ReleaseCenterView.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,iBAAiB,4CAyZhC"}
+{"version":3,"file":"ReleaseCenterView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ReleaseCenterView.tsx"],"names":[],"mappings":"AAqIA,wBAAgB,iBAAiB,4CAwhBhC"}