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

package/components/pages/plugin-list-utils.js

@@ -281,7 +281,8 @@ export function paramsToSchema(params, pluginId) {
             hint.type = "json";
             delete prop.__jsonHint;
         }
-        // Model name fields — helpful placeholder (overridden by server-provided model options via configUiHints)
+        // Model name fields get helpful input hints, overridden by server-provided
+        // model options via configUiHints.
         if (keyUpper.includes("MODEL") &&
             prop.type === "string" &&
             !p.options?.length) {
@@ -432,11 +433,16 @@ const ICON_BY_LUCIDE_NAME = {
     Wrench,
     Zap,
 };
-/** Resolve display icon. Order: explicit URL/emoji on PluginInfo.icon →
+/** Resolve display icon. Order: explicit image URL on PluginInfo.icon →
  *  registry-provided Lucide name (PluginInfo.iconName) → null. */
 export function resolveIcon(p) {
-    if (p.icon)
-        return p.icon;
+    if (p.icon) {
+        if (iconImageSource(p.icon))
+            return p.icon;
+        const namedIcon = ICON_BY_LUCIDE_NAME[p.icon];
+        if (namedIcon)
+            return namedIcon;
+    }
     if (p.iconName)
         return ICON_BY_LUCIDE_NAME[p.iconName] ?? null;
     return null;
@@ -450,6 +456,41 @@ export function iconImageSource(icon) {
     }
     return null;
 }
+/* ── Visual identity (logos, monograms, gradients) ─────────────────── */
+/** Stable 32-bit hash of a string (FNV-1a), used to derive deterministic hues. */
+function hashString(input) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < input.length; i++) {
+        hash ^= input.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return hash >>> 0;
+}
+/** One- or two-character monogram for a plugin (skips leading punctuation). */
+export function pluginMonogram(plugin) {
+    const source = (plugin.name ?? plugin.id ?? "?").replace(/^[^a-z0-9]+/i, "");
+    const words = source.split(/[\s_\-./]+/).filter(Boolean);
+    if (words.length >= 2) {
+        return (words[0][0] + words[1][0]).toUpperCase();
+    }
+    const single = words[0] ?? source;
+    return single.slice(0, 2).toUpperCase() || "·";
+}
+/**
+ * Deterministic monogram-tile gradient derived from the plugin name hash.
+ * Hues stay inside the brand-orange family so every monogram tile reads
+ * on-brand while the hash still varies the exact stop. Returns an inline
+ * `background` value built from HSL stops so it adapts without extra tokens.
+ */
+export function pluginTileGradient(plugin) {
+    // Warm orange/amber band only — keep tiles on-brand (brand orange ≈ 28°).
+    const HUE_BANDS = [18, 24, 30, 36, 42];
+    const hash = hashString(plugin.id || plugin.name || "plugin");
+    const base = HUE_BANDS[hash % HUE_BANDS.length];
+    const second = (base + 14) % 360;
+    const angle = 120 + (hash % 6) * 12;
+    return `linear-gradient(${angle}deg, hsl(${base} 82% 56%), hsl(${second} 78% 47%))`;
+}
 function resolvePluginParamValue(plugin, key, draftConfig) {
     const draftValue = draftConfig?.[key]?.trim();
     if (draftValue) {
@@ -631,8 +672,12 @@ export function buildPluginListState(options) {
     const { allowCustomOrder, effectiveSearch, effectiveStatusFilter, isConnectorLikeMode, mode, pluginOrder, plugins, showSubgroupFilters, subgroupFilter, } = options;
     const categoryPlugins = plugins.filter((plugin) => plugin.category !== "database" &&
         !ALWAYS_ON_PLUGIN_IDS.has(plugin.id) &&
-        (!isConnectorLikeMode ||
-            (plugin.category === "connector" && plugin.visible !== false)) &&
+        // Honor the registry's `render.visible: false` for every kind (not just
+        // connectors). OS-level system entries (contacts/phone/wifi) set
+        // visible:false so they stay out of the app/web Features + Connectors
+        // views and surface only in OS mode (ElizaOsAppsView).
+        plugin.visible !== false &&
+        (!isConnectorLikeMode || plugin.category === "connector") &&
         (mode !== "streaming" || plugin.category === "streaming"));
     const nonDbPlugins = [SHOWCASE_PLUGIN, ...categoryPlugins];
     const searchLower = typeof effectiveSearch === "string" ? effectiveSearch.toLowerCase() : "";

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

@@ -1,6 +1,6 @@
 import { type ReactNode, type RefCallback } from "react";
-import { type PluginInfo } from "../../api";
-import { type TranslateFn } from "./plugin-list-utils";
+import { type PluginInfo } from "../../api/index.js";
+import { type TranslateFn } from "./plugin-list-utils.js";
 export interface PluginConnectionTestResult {
     durationMs: number;
     error?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"plugin-view-connectors.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-connectors.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"plugin-view-connectors.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-connectors.tsx"],"names":[],"mappings":"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"}

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

@@ -1,32 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, PagePanel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StatusBadge, Switch, } from "@elizaos/ui";
-import { AlertCircle, CheckCircle2, ChevronRight } from "lucide-react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertCircle, Bot, CheckCircle2, ChevronRight, UserRound, } from "lucide-react";
 import { useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client, } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
-import { ConnectorModeSelector, useConnectorMode, } from "../connectors/ConnectorModeSelector.js";
-import { ConnectorSetupPanel, hasConnectorSetupPanel, } from "../connectors/ConnectorSetupPanel.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { getProvenanceFlags, getProvenanceTitle } from "../apps/provenance.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { ConnectorModeSelector } from "../connectors/ConnectorModeSelector.js";
+import { useConnectorMode } from "../connectors/ConnectorModeSelector.hooks.js";
+import { ConnectorSetupPanel } from "../connectors/ConnectorSetupPanel.js";
+import { hasConnectorSetupPanel } from "../connectors/ConnectorSetupPanel.helpers.js";
 import { getBrandIcon } from "../conversations/brand-icons.js";
+import { Button } from "../ui/button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
+import { StatusBadge } from "../ui/status-badge.js";
+import { Switch } from "../ui/switch.js";
 import { buildManagedDiscordSettingsReturnUrl, resolveManagedDiscordAgentChoice, } from "./cloud-dashboard-utils.js";
 import { PluginConfigForm, TelegramPluginConfig } from "./PluginConfigForm.js";
 import { getPluginResourceLinks, pluginResourceLinkLabel, SUBGROUP_LABELS, subgroupForPlugin, } from "./plugin-list-utils.js";
+const ROLE_BUTTON_SUFFIX = {
+    agent: "(agent)",
+    owner: "(your account)",
+};
+function buildRoleButtonLabel(baseLabel, role, showRoleSuffix) {
+    if (!showRoleSuffix) {
+        return baseLabel;
+    }
+    return `${baseLabel} ${ROLE_BUTTON_SUFFIX[role]}`;
+}
+function cloudOAuthRoleTitle(platform, role) {
+    return role === "agent"
+        ? `Connect the agent's ${platform} identity.`
+        : `Connect your own ${platform} identity.`;
+}
 const CLOUD_OAUTH_CONNECTORS = {
     slack: {
         platform: "slack",
-        connectionRole: "agent",
+        connectionRoles: ["agent", "owner"],
         buttonLabel: "Use Slack OAuth",
-        connectedHint: "Connect Slack with Eliza Cloud OAuth. Cloud stores the workspace token and the Slack plugin remains the runtime surface for messages and actions.",
+        connectedHint: "OAuth ready. Choose agent bot or owner account.",
         disconnectedHint: "Connect Eliza Cloud first to use Slack OAuth instead of local Socket Mode tokens.",
         successNotice: "Finish Slack OAuth in your browser, then return here.",
     },
     twitter: {
         platform: "twitter",
-        connectionRole: "agent",
+        connectionRoles: ["agent", "owner"],
         buttonLabel: "Use X/Twitter OAuth",
-        connectedHint: "Connect X/Twitter with Eliza Cloud OAuth so agent posts, mentions, replies, and DMs use the plugin through cloud-held tokens.",
+        connectedHint: "OAuth ready. Choose agent account or owner account.",
         disconnectedHint: "Connect Eliza Cloud first to use X/Twitter OAuth instead of local developer tokens.",
         successNotice: "Finish X/Twitter OAuth in your browser, then return here.",
     },
+    google: {
+        platform: "google",
+        connectionRoles: ["agent", "owner"],
+        buttonLabel: "Use Google OAuth",
+        connectedHint: "OAuth ready. Choose agent workspace or owner account.",
+        disconnectedHint: "Connect Eliza Cloud first to use Google OAuth instead of local OAuth2 credentials.",
+        successNotice: "Finish Google OAuth in your browser, then return here.",
+    },
 };
 function getCloudOAuthConnector(pluginId, selectedMode) {
     if (selectedMode !== "oauth") {
@@ -34,6 +65,55 @@ function getCloudOAuthConnector(pluginId, selectedMode) {
     }
     return CLOUD_OAUTH_CONNECTORS[pluginId] ?? null;
 }
+function ConnectorOAuthRoleButton({ pluginId, role, label, title, busy, icon, onConnect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `connector-${pluginId}-oauth-${role}`,
+        role: "button",
+        label,
+        group: "connector",
+        description: title,
+        onActivate: () => onConnect(role),
+    });
+    return (_jsxs(Button, { ref: ref, variant: "outline", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
+            void onConnect(role);
+        }, disabled: busy, title: title, ...agentProps, children: [icon, label] }));
+}
+function ConnectorResourceLink({ pluginId, linkKey, url, label, title, onOpen, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `connector-${pluginId}-link-${linkKey}`,
+        role: "link",
+        label: `${label} (${pluginId})`,
+        group: "connector",
+        description: title,
+        onActivate: () => onOpen(url),
+    });
+    return (_jsx(Button, { ref: ref, variant: "outline", size: "sm", className: "h-8 rounded-sm border-border/40 bg-card/40 px-3 text-xs-tight font-semibold text-muted transition-all hover:border-accent hover:bg-accent/5 hover:text-txt", onClick: () => {
+            void onOpen(url);
+        }, title: title, ...agentProps, children: label }));
+}
+function connectorProvenanceBadges(plugin) {
+    const flags = getProvenanceFlags(plugin);
+    const title = getProvenanceTitle(flags, "package");
+    const badges = [];
+    if (flags.isThirdParty) {
+        badges.push({ key: "origin", label: "Third party", title });
+    }
+    else if (flags.isBuiltIn) {
+        badges.push({ key: "origin", label: "Built in", title });
+    }
+    if (flags.isCommunity) {
+        badges.push({ key: "support", label: "Community", tone: "warning", title });
+    }
+    else if (flags.isFirstParty) {
+        badges.push({
+            key: "support",
+            label: "First party",
+            tone: "success",
+            title,
+        });
+    }
+    return badges;
+}
 function groupVisiblePlugins(visiblePlugins) {
     const groupMap = new Map();
     const groupOrder = [];
@@ -59,10 +139,17 @@ function groupVisiblePlugins(visiblePlugins) {
     });
 }
 function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorInstallPrompt, connectorSelectedId, expandLabel, formatSaveSettingsLabel, formatTestConnectionLabel, handleConfigReset, handleConfigSave, handleConnectorExpandedChange, handleConnectorSectionToggle, handleInstallPlugin, handleOpenPluginExternalUrl, handleParamChange, handleTestConnection, handleTogglePlugin, hasPluginToggleInFlight, installPluginLabel, installProgress, installingPlugins, installProgressLabel, loadFailedLabel, needsSetupLabel, noConfigurationNeededLabel, notInstalledLabel, plugin, pluginConfigs, pluginDescriptionFallback, pluginSaveSuccess, pluginSaving, readyLabel, registerConnectorContentItem, renderResolvedIcon, t, testResults, togglingPlugins, }) {
-    const { elizaCloudConnected, setActionNotice, setState, setTab } = useApp();
+    const { elizaCloudConnected, setActionNotice, setState, setTab } = useAppSelectorShallow((s) => ({
+        elizaCloudConnected: s.elizaCloudConnected,
+        setActionNotice: s.setActionNotice,
+        setState: s.setState,
+        setTab: s.setTab,
+    }));
     const connectorMode = useConnectorMode(plugin.id, { elizaCloudConnected });
     const [managedDiscordBusy, setManagedDiscordBusy] = useState(false);
-    const [cloudOAuthBusy, setCloudOAuthBusy] = useState(false);
+    // Keyed by role so the "agent" and "your account" buttons can each show
+    // their own loading state — clicking one no longer disables the other.
+    const [cloudOAuthBusy, setCloudOAuthBusy] = useState({});
     const [managedDiscordAgents, setManagedDiscordAgents] = useState([]);
     const [managedDiscordPickerOpen, setManagedDiscordPickerOpen] = useState(false);
     const [managedDiscordSelectedAgentId, setManagedDiscordSelectedAgentId] = useState(null);
@@ -113,6 +200,94 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
     const pluginLinks = getPluginResourceLinks(plugin, {
         draftConfig: pluginConfigs[plugin.id],
     });
+    const provenanceBadges = connectorProvenanceBadges(plugin);
+    const toggleControl = useAgentElement({
+        id: `connector-${plugin.id}-toggle`,
+        role: "toggle",
+        label: `Toggle ${plugin.name}`,
+        group: "connector",
+        status: plugin.enabled ? "active" : "inactive",
+        description: `Enable or disable the ${plugin.name} connector`,
+        onActivate: () => void handleTogglePlugin(plugin.id, !plugin.enabled),
+    });
+    const expandControl = useAgentElement({
+        id: `connector-${plugin.id}-expand`,
+        role: "button",
+        label: `${isExpanded ? collapseLabel : expandLabel} ${plugin.name}`,
+        group: "connector",
+        status: isExpanded ? "active" : "inactive",
+        description: `Expand or collapse the ${plugin.name} connector section`,
+        onActivate: () => handleConnectorSectionToggle(plugin.id),
+    });
+    const managedDiscordControl = useAgentElement({
+        id: `connector-${plugin.id}-managed-discord`,
+        role: "button",
+        label: `Managed Discord for ${plugin.name}`,
+        group: "connector",
+        description: "Start managed Discord OAuth via Eliza Cloud",
+        onActivate: () => void handleOpenManagedDiscord(),
+    });
+    const managedDiscordContinueControl = useAgentElement({
+        id: `connector-${plugin.id}-managed-discord-continue`,
+        role: "button",
+        label: "Continue managed Discord setup",
+        group: "connector",
+        description: "Continue with the selected cloud agent for managed Discord",
+        onActivate: () => void handleConfirmManagedDiscordAgent(),
+    });
+    const telegramOpenCloudControl = useAgentElement({
+        id: `connector-${plugin.id}-telegram-open-cloud`,
+        role: "button",
+        label: "Open Eliza Cloud for Telegram gateway",
+        group: "connector",
+        description: "Open Eliza Cloud billing to enable the Telegram webhook gateway",
+        onActivate: () => {
+            setState("cloudDashboardView", "billing");
+            setTab("settings");
+        },
+    });
+    const installControl = useAgentElement({
+        id: `connector-${plugin.id}-install`,
+        role: "button",
+        label: `Install ${plugin.name}`,
+        group: "connector",
+        description: `Install the ${plugin.name} connector package`,
+        onActivate: () => void handleInstallPlugin(plugin.id, plugin.npmName ?? ""),
+    });
+    const testControl = useAgentElement({
+        id: `connector-${plugin.id}-test`,
+        role: "button",
+        label: `Test ${plugin.name} connection`,
+        group: "connector",
+        description: `Run a connection test for ${plugin.name}`,
+        onActivate: () => void handleTestConnection(plugin.id),
+    });
+    const resetControl = useAgentElement({
+        id: `connector-${plugin.id}-reset`,
+        role: "button",
+        label: `Reset ${plugin.name} settings`,
+        group: "connector",
+        description: `Discard unsaved configuration changes for ${plugin.name}`,
+        onActivate: () => handleConfigReset(plugin.id),
+    });
+    const saveControl = useAgentElement({
+        id: `connector-${plugin.id}-save`,
+        role: "button",
+        label: `Save ${plugin.name} settings`,
+        group: "connector",
+        description: `Save the configuration for ${plugin.name}`,
+        onActivate: () => void handleConfigSave(plugin.id),
+    });
+    const managedDiscordAgentSelect = useAgentElement({
+        id: `connector-${plugin.id}-managed-discord-agent`,
+        role: "select",
+        label: "Managed Discord cloud agent",
+        group: "connector",
+        description: "Choose which cloud agent receives managed Discord",
+        options: managedDiscordAgents.map((agent) => agent.agent_id),
+        getValue: () => managedDiscordSelectedAgentId ?? "",
+        onFill: (value) => setManagedDiscordSelectedAgentId(value === "" ? null : value),
+    });
     const openCloudAgentsView = () => {
         setState("cloudDashboardView", "overview");
         setTab("settings");
@@ -236,8 +411,8 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
             setManagedDiscordBusy(false);
         }
     };
-    const handleOpenCloudOAuthConnector = async () => {
-        if (!cloudOAuthConnector || cloudOAuthBusy) {
+    const handleOpenCloudOAuthConnector = async (connectionRole) => {
+        if (!cloudOAuthConnector || cloudOAuthBusy[connectionRole]) {
             return;
         }
         if (!elizaCloudConnected) {
@@ -248,17 +423,17 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
             }), "info", 5000);
             return;
         }
-        setCloudOAuthBusy(true);
+        setCloudOAuthBusy((prev) => ({ ...prev, [connectionRole]: true }));
         try {
             const redirectUrl = typeof window !== "undefined" ? window.location.href : undefined;
             const oauthResponse = cloudOAuthConnector.platform === "twitter"
                 ? await client.initiateCloudTwitterOauth({
                     redirectUrl,
-                    connectionRole: cloudOAuthConnector.connectionRole,
+                    connectionRole,
                 })
                 : await client.initiateCloudOauth(cloudOAuthConnector.platform, {
                     redirectUrl,
-                    connectionRole: cloudOAuthConnector.connectionRole,
+                    connectionRole,
                 });
             await handleOpenPluginExternalUrl(oauthResponse.authUrl);
             setActionNotice(cloudOAuthConnector.successNotice, "info", 5000);
@@ -271,25 +446,25 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
                 }), "error", 4200);
         }
         finally {
-            setCloudOAuthBusy(false);
+            setCloudOAuthBusy((prev) => ({ ...prev, [connectionRole]: false }));
         }
     };
     const BrandIcon = getBrandIcon(plugin.id);
-    const connectorHeaderMedia = (_jsx("span", { className: `mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-[var(--radius-xl)] border p-2.5 ${isSelected
+    const connectorHeaderMedia = (_jsx("span", { className: `mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-sm border p-2.5 ${isSelected
             ? "border-accent/30 bg-accent/18 text-txt-strong"
             : "border-border/50 bg-bg-accent/80 text-muted"}`, children: BrandIcon ? (_jsx(BrandIcon, { className: "h-5 w-5 shrink-0" })) : (renderResolvedIcon(plugin, {
-            className: "h-4 w-4 shrink-0 rounded-[var(--radius-sm)] object-contain",
+            className: "h-4 w-4 shrink-0 rounded-sm object-contain",
             emojiClassName: "text-base",
         })) }));
-    const connectorHeaderHeading = (_jsxs("div", { className: "min-w-0", children: [_jsxs("span", { "data-testid": `connector-header-${plugin.id}`, className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: plugin.name }), hasParams ? (_jsxs("span", { className: "text-xs-tight font-medium text-muted", children: [setCount, "/", totalCount, " ", t("common.configured")] })) : (_jsx("span", { className: "text-xs-tight font-medium text-muted", children: noConfigurationNeededLabel }))] }), _jsxs("div", { className: "mt-2", children: [_jsx("p", { className: "text-sm text-muted", children: plugin.description || pluginDescriptionFallback }), plugin.enabled && !plugin.isActive && (_jsx("span", { className: "mt-1.5 flex flex-wrap items-center gap-2 text-xs-tight text-muted", children: _jsx(StatusBadge, { label: inactiveLabel, tone: plugin.loadError ? "danger" : "warning" }) }))] })] }));
+    const connectorHeaderHeading = (_jsxs("div", { className: "min-w-0", children: [_jsxs("span", { "data-testid": `connector-header-${plugin.id}`, className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: plugin.name }), hasParams ? (_jsxs("span", { className: "text-xs-tight font-medium text-muted", children: [setCount, "/", totalCount, " ", t("common.configured")] })) : (_jsx("span", { className: "text-xs-tight font-medium text-muted", children: noConfigurationNeededLabel })), provenanceBadges.map((badge) => (_jsx(StatusBadge, { label: badge.label, tone: badge.tone, title: badge.title, className: "shrink-0" }, `${plugin.id}:${badge.key}`)))] }), _jsxs("div", { className: "mt-2", children: [_jsx("p", { className: "line-clamp-1 text-sm text-muted", title: plugin.description || pluginDescriptionFallback, children: plugin.description || pluginDescriptionFallback }), plugin.enabled && !plugin.isActive && (_jsx("span", { className: "mt-1.5 flex flex-wrap items-center gap-2 text-xs-tight text-muted", children: _jsx(StatusBadge, { label: inactiveLabel, tone: plugin.loadError ? "danger" : "warning" }) }))] })] }));
     const statusLabel = allParamsSet ? readyLabel : needsSetupLabel;
     const StatusIcon = allParamsSet ? CheckCircle2 : AlertCircle;
-    const connectorHeaderActions = (_jsxs(_Fragment, { children: [_jsx("span", { role: "img", "aria-label": statusLabel, title: statusLabel, className: `inline-flex items-center ${allParamsSet ? "text-ok" : "text-warn"}`, children: _jsx(StatusIcon, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx(Switch, { checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => {
+    const connectorHeaderActions = (_jsxs(_Fragment, { children: [_jsx("span", { role: "img", "aria-label": statusLabel, title: statusLabel, className: `inline-flex items-center ${allParamsSet ? "text-ok" : "text-warn"}`, children: _jsx(StatusIcon, { className: "h-5 w-5", "aria-hidden": "true" }) }), _jsx(Switch, { ref: toggleControl.ref, checked: plugin.enabled, disabled: toggleDisabled, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), onCheckedChange: (checked) => {
                     void handleTogglePlugin(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 transition-colors hover:bg-transparent ${isExpanded ? "text-txt" : "text-muted hover:text-txt"}`, onClick: (event) => {
+                }, "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 transition-colors hover:bg-transparent ${isExpanded ? "text-txt" : "text-muted hover:text-txt"}`, onClick: (event) => {
                     event?.stopPropagation();
                     handleConnectorSectionToggle(plugin.id);
-                }, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? collapseLabel : expandLabel} ${plugin.name}`, title: isExpanded ? collapseLabel : expandLabel, children: _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` }) })] }));
+                }, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? collapseLabel : expandLabel} ${plugin.name}`, title: isExpanded ? collapseLabel : expandLabel, ...expandControl.agentProps, children: _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` }) })] }));
     const setupPanelPluginId = connectorMode.setupPluginId ?? plugin.id;
     const connectorSetupPanel = setupPanelPluginId ? (_jsx(ConnectorSetupPanel, { pluginId: setupPanelPluginId })) : null;
     const supportsConnectorSetupPanel = Boolean(setupPanelPluginId) && hasConnectorSetupPanel(setupPanelPluginId);
@@ -297,11 +472,11 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
         setupPanelPluginId === plugin.id &&
         !isDiscordManagedMode &&
         !isCloudOAuthMode;
-    return (_jsx("div", { "data-testid": `connector-section-${plugin.id}`, children: _jsxs(PagePanel.CollapsibleSection, { ref: registerConnectorContentItem(plugin.id), variant: "section", "data-testid": `connector-card-${plugin.id}`, expanded: isExpanded, expandOnCollapsedSurfaceClick: true, className: `border-transparent transition-all ${isSelected ? "shadow-[0_18px_40px_rgba(3,5,10,0.16)]" : ""}`, onExpandedChange: (nextExpanded) => handleConnectorExpandedChange(plugin.id, nextExpanded), media: connectorHeaderMedia, heading: connectorHeaderHeading, headingClassName: "w-full text-inherit", actions: connectorHeaderActions, children: [connectorMode.modes.length > 1 && (_jsx(ConnectorModeSelector, { connectorId: plugin.id, selectedMode: connectorMode.selectedMode, onModeChange: connectorMode.setSelectedMode, elizaCloudConnected: elizaCloudConnected })), plugin.id === "discord" &&
+    return (_jsx("div", { "data-testid": `connector-section-${plugin.id}`, children: _jsxs(PagePanel.CollapsibleSection, { ref: registerConnectorContentItem(plugin.id), variant: "section", "data-testid": `connector-card-${plugin.id}`, expanded: isExpanded, expandOnCollapsedSurfaceClick: true, className: `border-transparent transition-all ${isSelected ? "" : ""}`, onExpandedChange: (nextExpanded) => handleConnectorExpandedChange(plugin.id, nextExpanded), media: connectorHeaderMedia, heading: connectorHeaderHeading, headingClassName: "w-full text-inherit", actions: connectorHeaderActions, children: [connectorMode.modes.length > 1 && (_jsx(ConnectorModeSelector, { connectorId: plugin.id, selectedMode: connectorMode.selectedMode, onModeChange: connectorMode.setSelectedMode, elizaCloudConnected: elizaCloudConnected })), plugin.id === "discord" &&
                     (!elizaCloudConnected ||
-                        connectorMode.selectedMode === "managed") && (_jsxs(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                        connectorMode.selectedMode === "managed") && (_jsxs(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx(Button, { ref: managedDiscordControl.ref, variant: "outline", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
                             void handleOpenManagedDiscord();
-                        }, disabled: managedDiscordBusy, children: managedDiscordBusy
+                        }, disabled: managedDiscordBusy, ...managedDiscordControl.agentProps, children: managedDiscordBusy
                             ? "..."
                             : elizaCloudConnected
                                 ? t("pluginsview.UseManagedDiscord", {
@@ -311,61 +486,60 @@ function ConnectorPluginCard({ collapseLabel, connectorExpandedIds, connectorIns
                                     defaultValue: "Open Eliza Cloud",
                                 }) }), children: [elizaCloudConnected
                             ? t("pluginsview.ManagedDiscordGatewayHintConnected", {
-                                defaultValue: "Prefer OAuth? Managed Discord uses a shared gateway and only works for servers owned by the linking Discord account.",
+                                defaultValue: "Managed Discord gateway available.",
                             })
                             : t("pluginsview.ManagedDiscordGatewayHint", {
-                                defaultValue: "Prefer OAuth? Connect Eliza Cloud to use the shared Discord gateway instead of a local bot token.",
-                            }), managedDiscordPickerOpen && managedDiscordAgents.length > 1 ? (_jsxs("div", { className: "mt-3 flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsxs(Select, { value: managedDiscordSelectedAgentId ?? "__none__", onValueChange: (next) => setManagedDiscordSelectedAgentId(next === "__none__" ? null : next), children: [_jsx(SelectTrigger, { className: "h-9 min-w-[14rem] rounded-[var(--radius-lg)] border-border/40 bg-bg/80 text-sm", children: _jsx(SelectValue, { placeholder: t("pluginsview.ManagedDiscordSelectAgent", {
+                                defaultValue: "Connect Eliza Cloud for managed Discord.",
+                            }), managedDiscordPickerOpen && managedDiscordAgents.length > 1 ? (_jsxs("div", { className: "mt-3 flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsxs(Select, { value: managedDiscordSelectedAgentId ?? "__none__", onValueChange: (next) => setManagedDiscordSelectedAgentId(next === "__none__" ? null : next), children: [_jsx(SelectTrigger, { ref: managedDiscordAgentSelect.ref, className: "h-9 min-w-[14rem] rounded-sm border-border/40 bg-bg/80 text-sm", ...managedDiscordAgentSelect.agentProps, children: _jsx(SelectValue, { placeholder: t("pluginsview.ManagedDiscordSelectAgent", {
                                                     defaultValue: "Select a cloud agent",
-                                                }) }) }), _jsx(SelectContent, { children: managedDiscordAgents.map((agent) => (_jsx(SelectItem, { value: agent.agent_id, children: agent.agent_name || agent.agent_id }, agent.agent_id))) })] }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                                                }) }) }), _jsx(SelectContent, { children: managedDiscordAgents.map((agent) => (_jsx(SelectItem, { value: agent.agent_id, children: agent.agent_name || agent.agent_id }, agent.agent_id))) })] }), _jsx(Button, { ref: managedDiscordContinueControl.ref, variant: "default", size: "sm", className: "h-9 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
                                         void handleConfirmManagedDiscordAgent();
-                                    }, disabled: managedDiscordBusy || !managedDiscordSelectedAgentId, children: managedDiscordBusy
+                                    }, disabled: managedDiscordBusy || !managedDiscordSelectedAgentId, ...managedDiscordContinueControl.agentProps, children: managedDiscordBusy
                                         ? "..."
                                         : t("common.continue", {
                                             defaultValue: "Continue",
-                                        }) })] })) : null] })), cloudOAuthConnector ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
-                            void handleOpenCloudOAuthConnector();
-                        }, disabled: cloudOAuthBusy, children: cloudOAuthBusy
-                            ? "..."
-                            : elizaCloudConnected
-                                ? cloudOAuthConnector.buttonLabel
-                                : t("pluginsview.OpenElizaCloud", {
-                                    defaultValue: "Open Eliza Cloud",
-                                }) }), children: elizaCloudConnected
+                                        }) })] })) : null] })), cloudOAuthConnector ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: _jsx("div", { className: "flex flex-wrap items-center gap-2", children: cloudOAuthConnector.connectionRoles.map((role) => {
+                            const roleBusy = cloudOAuthBusy[role] === true;
+                            return (_jsx(ConnectorOAuthRoleButton, { pluginId: plugin.id, role: role, busy: roleBusy, title: cloudOAuthRoleTitle(cloudOAuthConnector.platform, role), icon: role === "agent" ? (_jsx(Bot, { className: "h-3.5 w-3.5", "aria-hidden": "true" })) : (_jsx(UserRound, { className: "h-3.5 w-3.5", "aria-hidden": "true" })), label: roleBusy
+                                    ? "..."
+                                    : elizaCloudConnected
+                                        ? buildRoleButtonLabel(cloudOAuthConnector.buttonLabel, role, cloudOAuthConnector.connectionRoles.length > 1)
+                                        : t("pluginsview.OpenElizaCloud", {
+                                            defaultValue: "Open Eliza Cloud",
+                                        }), onConnect: handleOpenCloudOAuthConnector }, role));
+                        }) }), children: elizaCloudConnected
                         ? cloudOAuthConnector.connectedHint
-                        : cloudOAuthConnector.disconnectedHint })) : null, showTelegramCloudGatewayNotice ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: elizaCloudConnected ? undefined : (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold", onClick: () => {
+                        : cloudOAuthConnector.disconnectedHint })) : null, showTelegramCloudGatewayNotice ? (_jsx(PagePanel.Notice, { tone: "default", className: "mb-4", actions: elizaCloudConnected ? undefined : (_jsx(Button, { ref: telegramOpenCloudControl.ref, variant: "outline", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold", onClick: () => {
                             setState("cloudDashboardView", "billing");
                             setTab("settings");
-                        }, children: t("pluginsview.OpenElizaCloud", {
+                        }, ...telegramOpenCloudControl.agentProps, children: t("pluginsview.OpenElizaCloud", {
                             defaultValue: "Open Eliza Cloud",
                         }) })), children: elizaCloudConnected
                         ? t("pluginsview.TelegramCloudGatewayHint", {
-                            defaultValue: "Telegram does not support bot-install OAuth for bidirectional chats. Use a BotFather token here; Eliza Cloud can host the webhook gateway and route updates to this app.",
+                            defaultValue: "Webhook gateway available.",
                         })
                         : t("pluginsview.TelegramCloudGatewayHintDisconnected", {
-                            defaultValue: "Telegram does not support bot-install OAuth for bidirectional chats. Connect Eliza Cloud to host the webhook gateway, then use a BotFather token here.",
-                        }) })) : null, pluginLinks.length > 0 && (_jsx("div", { className: "mb-4 flex flex-wrap gap-2", children: pluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-[var(--radius-lg)] border-border/40 bg-card/40 px-3 text-xs-tight font-semibold text-muted transition-all hover:border-accent hover:bg-accent/5 hover:text-txt", onClick: () => {
-                            void handleOpenPluginExternalUrl(link.url);
-                        }, title: `${pluginResourceLinkLabel(t, link.key)}: ${link.url}`, children: pluginResourceLinkLabel(t, link.key) }, `${plugin.id}:${link.key}`))) })), isStoreInstallMissing && !plugin.loadError && (_jsx(PagePanel.Notice, { tone: "warning", className: "mb-4", actions: _jsx(Button, { variant: "default", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold", disabled: installingPlugins.has(plugin.id), onClick: () => void handleInstallPlugin(plugin.id, plugin.npmName ?? ""), children: installingPlugins.has(plugin.id)
+                            defaultValue: "Connect Eliza Cloud for webhook hosting.",
+                        }) })) : null, pluginLinks.length > 0 && (_jsx("div", { className: "mb-4 flex flex-wrap gap-2", children: pluginLinks.map((link) => (_jsx(ConnectorResourceLink, { pluginId: plugin.id, linkKey: link.key, url: link.url, label: pluginResourceLinkLabel(t, link.key), title: `${pluginResourceLinkLabel(t, link.key)}: ${link.url}`, onOpen: handleOpenPluginExternalUrl }, `${plugin.id}:${link.key}`))) })), isStoreInstallMissing && !plugin.loadError && (_jsx(PagePanel.Notice, { tone: "warning", className: "mb-4", actions: _jsx(Button, { ref: installControl.ref, variant: "default", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-bold", disabled: installingPlugins.has(plugin.id), onClick: () => void handleInstallPlugin(plugin.id, plugin.npmName ?? ""), ...installControl.agentProps, children: installingPlugins.has(plugin.id)
                             ? installProgressLabel(installProgress.get(plugin.npmName ?? "")?.message)
-                            : installPluginLabel }), children: connectorInstallPrompt })), showPluginConfig ? (_jsxs("div", { className: "space-y-4", children: [plugin.id === "telegram" ? (_jsx(TelegramPluginConfig, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })) : (_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })), connectorSetupPanel] })) : supportsConnectorSetupPanel ? (connectorSetupPanel) : (_jsx("div", { className: "text-sm text-muted", children: noConfigurationNeededLabel })), plugin.validationErrors && plugin.validationErrors.length > 0 && (_jsx(PagePanel.Notice, { tone: "danger", className: "mt-3 text-xs", children: plugin.validationErrors.map((error) => (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-warn", children: error.field }), ":", " ", error.message] }, `${plugin.id}:${error.field}:${error.message}`))) })), plugin.validationWarnings && plugin.validationWarnings.length > 0 && (_jsx(PagePanel.Notice, { tone: "default", className: "mt-3 text-xs", children: plugin.validationWarnings.map((warning) => (_jsx("div", { children: warning.message }, `${plugin.id}:${warning.field}:${warning.message}`))) })), plugin.version ? (_jsx("div", { className: "mt-4", children: _jsxs(PagePanel.Meta, { compact: true, tone: "strong", className: "font-mono", children: ["v", plugin.version] }) })) : null, _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [plugin.isActive && (_jsx(Button, { variant: testResult?.success
+                            : installPluginLabel }), children: connectorInstallPrompt })), showPluginConfig ? (_jsxs("div", { className: "space-y-4", children: [plugin.id === "telegram" ? (_jsx(TelegramPluginConfig, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })) : (_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange })), connectorSetupPanel] })) : supportsConnectorSetupPanel ? (connectorSetupPanel) : (_jsx("div", { className: "text-sm text-muted", children: noConfigurationNeededLabel })), plugin.validationErrors && plugin.validationErrors.length > 0 && (_jsx(PagePanel.Notice, { tone: "danger", className: "mt-3 text-xs", children: plugin.validationErrors.map((error) => (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-warn", children: error.field }), ":", " ", error.message] }, `${plugin.id}:${error.field}:${error.message}`))) })), plugin.validationWarnings && plugin.validationWarnings.length > 0 && (_jsx(PagePanel.Notice, { tone: "default", className: "mt-3 text-xs", children: plugin.validationWarnings.map((warning) => (_jsx("div", { children: warning.message }, `${plugin.id}:${warning.field}:${warning.message}`))) })), plugin.version ? (_jsx("div", { className: "mt-4", children: _jsxs(PagePanel.Meta, { compact: true, tone: "strong", className: "font-mono", children: ["v", plugin.version] }) })) : null, _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [plugin.isActive && (_jsx(Button, { ref: testControl.ref, variant: testResult?.success
                                 ? "default"
                                 : testResult?.error
                                     ? "destructive"
-                                    : "outline", size: "sm", className: `h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold transition-all ${testResult?.loading
+                                    : "outline", size: "sm", className: `h-8 rounded-sm px-4 text-xs-tight font-bold transition-all ${testResult?.loading
                                 ? "cursor-wait opacity-70"
                                 : testResult?.success
                                     ? "border-ok bg-ok text-ok-fg hover:bg-ok/90"
                                     : testResult?.error
                                         ? "border-danger bg-danger text-danger-fg hover:bg-danger/90"
-                                        : "border-border/40 bg-card/40 hover:border-accent/40"}`, disabled: testResult?.loading, onClick: () => void handleTestConnection(plugin.id), children: formatTestConnectionLabel(testResult) })), hasParams && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-semibold text-muted hover:text-txt", onClick: () => handleConfigReset(plugin.id), children: t("common.reset") }), _jsx(Button, { variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 rounded-[var(--radius-lg)] px-4 text-xs-tight font-bold transition-all ${saveSuccess
+                                        : "border-border/40 bg-card/40 hover:border-accent/40"}`, disabled: testResult?.loading, onClick: () => void handleTestConnection(plugin.id), ...testControl.agentProps, children: formatTestConnectionLabel(testResult) })), hasParams && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: resetControl.ref, variant: "ghost", size: "sm", className: "h-8 rounded-sm px-4 text-xs-tight font-semibold text-muted hover:text-txt", onClick: () => handleConfigReset(plugin.id), ...resetControl.agentProps, children: t("common.reset") }), _jsx(Button, { ref: saveControl.ref, variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 rounded-sm px-4 text-xs-tight font-bold transition-all ${saveSuccess
                                         ? "bg-ok text-ok-fg hover:bg-ok/90"
-                                        : "bg-accent text-accent-fg hover:bg-accent/90"}`, onClick: () => void handleConfigSave(plugin.id), disabled: isSaving, children: formatSaveSettingsLabel(isSaving, saveSuccess) })] }))] })] }) }, plugin.id));
+                                        : "bg-accent text-accent-fg hover:bg-accent/90"}`, onClick: () => void handleConfigSave(plugin.id), disabled: isSaving, ...saveControl.agentProps, children: formatSaveSettingsLabel(isSaving, saveSuccess) })] }))] })] }) }, plugin.id));
 }
 export function ConnectorPluginGroups(props) {
     const groups = groupVisiblePlugins(props.visiblePlugins);
     if (groups.length === 1) {
         return groups[0].plugins.map((plugin) => (_jsx(ConnectorPluginCard, { ...props, plugin: plugin }, plugin.id)));
     }
-    return groups.map((group) => (_jsxs("div", { className: "relative rounded-[var(--radius-lg)] border border-border/30 px-2 pb-2 pt-5", children: [_jsx("span", { className: "absolute -top-2.5 left-3 bg-bg px-2 text-2xs font-semibold uppercase tracking-wider text-muted", children: group.label }), _jsx("div", { className: "space-y-4", children: group.plugins.map((plugin) => (_jsx(ConnectorPluginCard, { ...props, plugin: plugin }, plugin.id))) })] }, group.id)));
+    return groups.map((group) => (_jsxs("div", { className: "relative rounded-sm border border-border/30 px-2 pb-2 pt-5", children: [_jsx("span", { className: "absolute -top-2.5 left-3 bg-bg px-2 text-2xs font-semibold uppercase tracking-wider text-muted", children: group.label }), _jsx("div", { className: "space-y-4", children: group.plugins.map((plugin) => (_jsx(ConnectorPluginCard, { ...props, plugin: plugin }, plugin.id))) })] }, group.id)));
 }

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

@@ -1,12 +1,6 @@
-import type { PluginInfo } from "../../api";
-import { type TranslateFn } from "./plugin-list-utils";
-type PluginConnectionTestResult = {
-    durationMs: number;
-    error?: string;
-    loading: boolean;
-    message?: string;
-    success: boolean;
-};
+import type { PluginInfo } from "../../api/index.js";
+import { type TranslateFn } from "./plugin-list-utils.js";
+import type { PluginConnectionTestResult } from "./plugin-view-connectors.js";
 interface PluginSettingsDialogProps {
     installPluginLabel: string;
     installProgress: Map<string, {

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

@@ -1 +1 @@
-{"version":3,"file":"plugin-view-dialogs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-dialogs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG5C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,UAAU,yBAAyB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,oBAAoB,EAAE,UAAU,GAAG,IAAI,CAAC;IACxC,CAAC,EAAE,WAAW,CAAC;IACf,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,+BAA+B,EAAE,CAC/B,MAAM,CAAC,EAAE,0BAA0B,KAChC,MAAM,CAAC;IACZ,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB;AAwBD,wBAAgB,oBAAoB,CAAC,EACnC,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,CAAC,EACD,WAAW,EACX,OAAO,EACP,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,+BAA+B,EAC/B,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,GACZ,EAAE,yBAAyB,kDAkM3B"}
+{"version":3,"file":"plugin-view-dialogs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/plugin-view-dialogs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAM5C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,UAAU,yBAAyB;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,oBAAoB,EAAE,UAAU,GAAG,IAAI,CAAC;IACxC,CAAC,EAAE,WAAW,CAAC;IACf,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,+BAA+B,EAAE,CAC/B,MAAM,CAAC,EAAE,0BAA0B,KAChC,MAAM,CAAC;IACZ,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB;AAwBD,wBAAgB,oBAAoB,CAAC,EACnC,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,CAAC,EACD,WAAW,EACX,OAAO,EACP,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,+BAA+B,EAC/B,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,GACZ,EAAE,yBAAyB,kDAkQ3B"}