@agent-native/core 0.152.0 → 0.153.0

package/dist/client/resources/McpIntegrationDialog.js

@@ -4,8 +4,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { agentNativePath } from "../api-path.js";
 import { openAgentSettings } from "../CommandMenu.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../components/ui/dialog.js";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
+import { IntegrationConnectionChoice } from "../integrations/IntegrationConnectionChoice.js";
+import { IntegrationGrid } from "../integrations/IntegrationGrid.js";
 import { cn } from "../utils.js";
 import { buildMcpOAuthStartUrl, createMcpIntegrationFormDefaults, filterMcpIntegrations, getMcpIntegrationApiFallback, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, navigateToMcpOAuthStart, resolveMcpIntegrationScope, shouldOfferMcpIntegrationOrganizationScope, shouldOfferMcpOrganizationScope, } from "./mcp-integration-catalog.js";
 import { McpIntegrationLogo } from "./McpIntegrationLogo.js";
@@ -48,7 +49,7 @@ function resolveIntegrationScope(integration, defaultScope, hasOrg, canCreateOrg
         (integration.supportsOrganizationScope === true &&
             integration.managedOAuth !== true));
 }
-export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId = null, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onCreated, integrations, }) {
+export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId = null, connectIntegrationId = null, quickConnectIntegrationId = null, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onCreated, integrations, }) {
     const t = useT();
     const [mode, setMode] = useState("catalog");
     const [query, setQuery] = useState("");
@@ -59,11 +60,13 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
     const [url, setUrl] = useState("");
     const [description, setDescription] = useState("");
     const [headersText, setHeadersText] = useState("");
+    const [customAuthMode, setCustomAuthMode] = useState("oauth");
     const [busy, setBusy] = useState(false);
-    const [quickBusyId, setQuickBusyId] = useState(null);
     const [error, setError] = useState(null);
     const [testResult, setTestResult] = useState(null);
     const inputRef = useRef(null);
+    const quickConnectAttemptedRef = useRef(null);
+    const quickConnectRef = useRef(null);
     const mcpApi = useMcpServersApi();
     const mcpServersQuery = useMcpServers();
     const defaultIntegrations = useMemo(() => integrations ?? getDefaultMcpIntegrations(), [integrations]);
@@ -98,8 +101,8 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         setUrl(initialDefaults.url);
         setDescription(initialDefaults.description);
         setHeadersText(initialDefaults.headersText);
+        setCustomAuthMode(initialIntegration ? "headers" : "oauth");
         setBusy(false);
-        setQuickBusyId(null);
         setError(null);
         setTestResult(null);
     }, [
@@ -122,14 +125,16 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         setError(null);
         setTestResult(null);
     };
-    const openForm = (integration) => {
+    const openForm = (integration, options) => {
         const defaults = createMcpIntegrationFormDefaults(integration);
         setSelected(integration ?? null);
-        setScope(resolveIntegrationScope(integration, defaultScope, hasOrg, canCreateOrgMcp));
+        setScope(options?.scope ??
+            resolveIntegrationScope(integration, defaultScope, hasOrg, canCreateOrgMcp));
         setName(defaults.name);
         setUrl(defaults.url);
         setDescription(defaults.description);
         setHeadersText(defaults.headersText);
+        setCustomAuthMode(integration ? "headers" : "oauth");
         setError(null);
         setTestResult(null);
         setMode("form");
@@ -142,7 +147,6 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
             return;
         }
         setBusy(true);
-        setQuickBusyId(options?.quickId ?? null);
         const returnUrl = typeof window === "undefined"
             ? "/"
             : window.location.pathname +
@@ -162,10 +166,11 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         description: integration.description,
     }, {
         ...options,
-        scope: integration.supportsOrganizationScope === true &&
-            integration.managedOAuth !== true
-            ? scope
-            : "user",
+        scope: options?.scope ??
+            (integration.supportsOrganizationScope === true &&
+                integration.managedOAuth !== true
+                ? scope
+                : "user"),
     });
     const connectCustomWithOAuth = () => {
         if (!name.trim()) {
@@ -178,15 +183,13 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
             description: description.trim(),
         });
     };
-    const createServer = async (args, options) => {
+    const createServer = async (args) => {
         const validationError = getMcpUrlValidationError(args.url);
         if (validationError) {
             setError(validationError);
             setTestResult(null);
             return;
         }
-        if (options?.quickId)
-            setQuickBusyId(options.quickId);
         setBusy(true);
         setError(null);
         try {
@@ -199,7 +202,6 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         }
         finally {
             setBusy(false);
-            setQuickBusyId(null);
         }
     };
     const submitForm = () => {
@@ -216,14 +218,14 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         });
     };
     const quickConnect = (integration) => {
-        if (shouldOfferMcpIntegrationOrganizationScope(integration, hasOrg, canCreateOrgMcp)) {
+        if (requiresMcpIntegrationSetup(integration)) {
             openForm(integration);
             return;
         }
-        if (requiresMcpIntegrationSetup(integration))
-            return;
         if (integration.authMode === "oauth") {
-            connectWithOAuth(integration, { quickId: integration.id });
+            connectWithOAuth(integration, {
+                scope: "user",
+            });
             return;
         }
         if (integration.authMode === "headers") {
@@ -231,11 +233,107 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
             return;
         }
         void createServer({
-            scope: resolveIntegrationScope(integration, defaultScope, hasOrg, canCreateOrgMcp),
+            scope: "user",
             name: integration.name,
             url: integration.url,
             description: integration.description,
-        }, { quickId: integration.id });
+        });
+    };
+    const selectCatalogConnection = (integration) => {
+        if (requiresMcpIntegrationSetup(integration)) {
+            const apiFallback = getMcpIntegrationApiFallback(integration);
+            if (apiFallback) {
+                openAgentSettings(`secrets:${apiFallback.secretKey}`);
+            }
+            else {
+                openForm(integration);
+            }
+            return;
+        }
+        if (shouldOfferMcpIntegrationOrganizationScope(integration, hasOrg, canCreateOrgMcp)) {
+            setSelected(integration);
+            setMode("choice");
+            return;
+        }
+        quickConnect(integration);
+    };
+    quickConnectRef.current = quickConnect;
+    useEffect(() => {
+        if (!open) {
+            quickConnectAttemptedRef.current = null;
+            return;
+        }
+        if (!quickConnectIntegrationId ||
+            quickConnectAttemptedRef.current === quickConnectIntegrationId) {
+            return;
+        }
+        const integration = defaultIntegrations.find((candidate) => candidate.id === quickConnectIntegrationId);
+        if (!integration)
+            return;
+        quickConnectAttemptedRef.current = quickConnectIntegrationId;
+        quickConnectRef.current?.(integration);
+    }, [defaultIntegrations, open, quickConnectIntegrationId]);
+    useEffect(() => {
+        if (!open || !connectIntegrationId)
+            return;
+        const integration = defaultIntegrations.find((candidate) => candidate.id === connectIntegrationId);
+        if (!integration)
+            return;
+        const attemptKey = `connect:${connectIntegrationId}`;
+        if (quickConnectAttemptedRef.current === attemptKey)
+            return;
+        quickConnectAttemptedRef.current = attemptKey;
+        if (requiresMcpIntegrationSetup(integration)) {
+            openForm(integration);
+            return;
+        }
+        const showWorkspaceChoice = shouldOfferMcpIntegrationOrganizationScope(integration, hasOrg, canCreateOrgMcp);
+        if (!showWorkspaceChoice) {
+            quickConnectRef.current?.(integration);
+        }
+        else {
+            setMode("choice");
+        }
+    }, [
+        canCreateOrgMcp,
+        connectIntegrationId,
+        defaultIntegrations,
+        hasOrg,
+        open,
+    ]);
+    const connectPersonal = (integration) => {
+        if (integration.authMode === "oauth") {
+            connectWithOAuth(integration, { scope: "user" });
+            return;
+        }
+        if (integration.authMode === "none" &&
+            integration.connectionMode === "direct") {
+            void createServer({
+                scope: "user",
+                name: integration.name,
+                url: integration.url,
+                description: integration.description,
+            });
+            return;
+        }
+        openForm(integration, { scope: "user" });
+    };
+    const connectWorkspace = (integration) => {
+        if (integration.authMode === "oauth") {
+            connectWithOAuth(integration, { scope: "org" });
+            return;
+        }
+        if (integration.authMode === "none" &&
+            integration.connectionMode === "direct") {
+            void createServer({
+                scope: "org",
+                name: integration.name,
+                url: integration.url,
+                description: integration.description,
+            });
+            return;
+        }
+        openForm(integration, { scope: "org" });
     };
     const runTest = async () => {
         const trimmedUrl = url.trim();
@@ -286,32 +384,42 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
     };
     if (!showCatalog && !customIntegrationEnabled)
         return null;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { className: "flex max-h-[min(820px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-[760px] flex-col gap-0 p-0 sm:w-[min(760px,calc(100vw-48px))]", children: mode === "catalog" ? (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "shrink-0 px-7 pb-5 pe-14 pt-6", children: [_jsx(DialogTitle, { children: t("mcpIntegrations.title") }), _jsx(DialogDescription, { children: t("mcpIntegrations.description", {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { "aria-describedby": undefined, className: "inset-0 flex h-[100dvh] max-h-none w-full max-w-none translate-x-0 translate-y-0 flex-col gap-0 overflow-hidden rounded-none p-0", children: mode === "choice" && selected ? (_jsxs(_Fragment, { children: [_jsx(DialogHeader, { className: "sr-only", children: _jsxs(DialogTitle, { children: ["Connect ", selected.name] }) }), _jsx(IntegrationConnectionChoice, { name: selected.name, logo: _jsx(McpIntegrationLogo, { name: selected.name, logoUrl: selected.logoUrl, integrationId: selected.id, className: "size-7 rounded-md", imageClassName: "size-full p-1" }), showWorkspaceOption: shouldOfferMcpIntegrationOrganizationScope(selected, hasOrg, canCreateOrgMcp), busy: busy, onPersonal: () => connectPersonal(selected), onWorkspace: () => connectWorkspace(selected) })] })) : mode === "catalog" ? (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "shrink-0 border-b border-border px-7 pb-5 pe-14 pt-7 sm:px-10", children: [_jsx(DialogTitle, { children: t("mcpIntegrations.title") }), _jsx(DialogDescription, { children: t("mcpIntegrations.description", {
                                     count: defaultIntegrations.length,
-                                }) })] }), _jsxs("div", { className: "flex shrink-0 flex-col gap-3 px-7 pb-5 sm:flex-row", children: [_jsxs("label", { className: "relative min-w-0 flex-1", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), className: "h-9 w-full rounded-md border border-border bg-background pe-3 ps-8 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.searchPlaceholder") })] }), _jsx("button", { type: "button", onClick: () => openForm(null), className: cn("inline-flex h-9 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 text-[12px] font-medium text-foreground hover:bg-accent", !customIntegrationEnabled && "hidden"), children: t("mcpIntegrations.addYourOwn") })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-7 pb-7", children: [error && (_jsx("div", { className: "mb-3 rounded-md border border-red-500/20 bg-red-500/5 px-3 py-2 text-[12px] leading-relaxed text-red-600 dark:text-red-400", children: error })), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: filteredIntegrations.map((integration) => {
-                                    const apiFallback = getMcpIntegrationApiFallback(integration);
-                                    const connected = connectedUrls.has(compareUrl(integration.url));
-                                    const requiresHeaders = integration.authMode === "headers";
-                                    const setupOnly = requiresMcpIntegrationSetup(integration);
-                                    return (_jsxs("article", { className: "flex min-h-[128px] flex-col rounded-md border border-border bg-card p-4 transition-colors hover:border-border/80 hover:bg-accent/20", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-8 rounded-md", imageClassName: "size-6" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate text-[13px] font-semibold text-foreground", children: integration.name }), integration.availability !== "ready" && (_jsx("span", { className: "mt-0.5 inline-flex rounded-full border border-border/70 bg-muted/40 px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground", children: integration.availability === "beta"
-                                                                    ? t("mcpIntegrations.status.beta")
-                                                                    : integration.availability ===
-                                                                        "client-restricted"
-                                                                        ? t("mcpIntegrations.status.clientRestricted")
-                                                                        : t("mcpIntegrations.status.setupRequired") })), _jsx("span", { className: "ms-1 mt-0.5 inline-flex rounded-full border border-border/70 bg-muted/40 px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground", children: integration.verification === "verified"
-                                                                    ? t("mcpIntegrations.status.verified")
-                                                                    : integration.verification === "restricted"
-                                                                        ? t("mcpIntegrations.status.restricted")
-                                                                        : t("mcpIntegrations.status.preflightOnly") })] })] }), _jsx("p", { className: "mt-1 line-clamp-2 flex-1 text-[12px] leading-relaxed text-muted-foreground", children: t(integration.descriptionKey) }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [connected ? (_jsx("button", { type: "button", disabled: true, className: "inline-flex h-8 flex-1 cursor-not-allowed items-center justify-center gap-1.5 rounded-md border border-border bg-muted px-2.5 text-[12px] font-medium text-muted-foreground opacity-70", children: t("mcpIntegrations.connected") })) : setupOnly ? (_jsxs(_Fragment, { children: [apiFallback && (_jsx("button", { type: "button", onClick: () => openAgentSettings(`secrets:${apiFallback.secretKey}`), className: "inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-2.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90", children: t("mcpIntegrations.useApiToken") })), _jsx("button", { type: "button", onClick: () => openForm(integration), className: "inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[12px] font-medium text-foreground hover:bg-accent", children: t("mcpIntegrations.viewSetup") })] })) : (_jsxs("button", { type: "button", onClick: () => quickConnect(integration), disabled: busy, "aria-busy": quickBusyId === integration.id, className: cn("inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-2.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90", busy && "cursor-not-allowed opacity-70"), children: [quickBusyId === integration.id ? (_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" })) : null, integration.authMode === "oauth"
-                                                                ? t("mcpIntegrations.connectWithOAuth")
-                                                                : requiresHeaders
-                                                                    ? t("mcpIntegrations.configure")
-                                                                    : t("mcpIntegrations.connect")] })), integration.docsUrl && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: integration.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": t("mcpIntegrations.docsLabel", {
-                                                                        name: integration.name,
-                                                                    }), children: _jsx(IconExternalLink, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: t("mcpIntegrations.docsLabel", {
-                                                                    name: integration.name,
-                                                                }) })] }))] })] }, integration.id));
-                                }) }), filteredIntegrations.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground", children: t("mcpIntegrations.noMatches") }))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "shrink-0 border-b border-border px-7 pb-5 pe-14 pt-6", children: [_jsxs("button", { type: "button", onClick: () => {
+                                }) })] }), _jsx("div", { className: "shrink-0 px-7 pb-5 sm:px-10", children: _jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row", children: [_jsxs("label", { className: "relative min-w-0 flex-1", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), className: "h-9 w-full rounded-md border border-border bg-background pe-3 ps-8 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.searchPlaceholder") })] }), _jsx("button", { type: "button", onClick: () => openForm(null), className: cn("inline-flex h-9 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 text-[12px] font-medium text-foreground hover:bg-accent", !customIntegrationEnabled && "hidden"), children: t("mcpIntegrations.addYourOwn") })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-7 pb-10 pt-7 sm:px-10", children: _jsxs("div", { className: "mx-auto w-full max-w-5xl", children: [error && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-[12px] leading-relaxed text-destructive", children: error })), _jsx(IntegrationGrid, { items: filteredIntegrations.map((integration) => {
+                                        const connected = connectedUrls.has(compareUrl(integration.url));
+                                        const setupOnly = requiresMcpIntegrationSetup(integration);
+                                        const apiFallback = getMcpIntegrationApiFallback(integration);
+                                        return {
+                                            id: integration.id,
+                                            name: integration.name,
+                                            description: t(integration.descriptionKey),
+                                            logo: (_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-7 rounded-md", imageClassName: "size-full p-1" })),
+                                            status: connected
+                                                ? t("mcpIntegrations.connected")
+                                                : setupOnly
+                                                    ? t("mcpIntegrations.status.setupRequired")
+                                                    : undefined,
+                                            statusClassName: connected
+                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                : "text-muted-foreground",
+                                            actionLabel: connected
+                                                ? "Manage"
+                                                : setupOnly && apiFallback
+                                                    ? t("mcpIntegrations.useApiToken")
+                                                    : setupOnly
+                                                        ? t("mcpIntegrations.viewSetup")
+                                                        : t("mcpIntegrations.connect"),
+                                            disabled: connected || busy,
+                                            onAction: () => {
+                                                if (connected) {
+                                                    openForm(integration);
+                                                    return;
+                                                }
+                                                selectCatalogConnection(integration);
+                                            },
+                                        };
+                                    }), emptyLabel: t("mcpIntegrations.noMatches") })] }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "shrink-0 border-b border-border px-7 pb-5 pe-14 pt-7 sm:px-10", children: [_jsxs("button", { type: "button", onClick: () => {
                                     clearFeedback();
                                     setMode("catalog");
                                 }, className: cn("mb-1 inline-flex w-fit items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground", !showCatalog && "hidden"), children: [_jsx(IconArrowLeft, { className: "h-3 w-3 rtl:-scale-x-100" }), t("mcpIntegrations.backToIntegrations")] }), _jsx(DialogTitle, { children: selected
@@ -328,9 +436,24 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
                                         : selected.authMode === "none"
                                             ? t("mcpIntegrations.presetNoAuthDescription")
                                             : t("mcpIntegrations.presetAuthDescription")
-                                    : t("mcpIntegrations.customDescription") })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-7 py-5", children: _jsxs("div", { className: "space-y-3", children: [renderScopeSelector(), selected?.setupNoteKey && (_jsx("div", { className: "rounded-md border border-border bg-muted/40 px-3 py-2 text-[11px] leading-relaxed text-muted-foreground", children: t(selected.setupNoteKey) })), selectedRequiresSetup && selected && (_jsxs("div", { className: "rounded-md border border-border bg-muted/40 px-3 py-2 text-[11px] leading-relaxed", children: [_jsx("p", { className: "font-medium text-foreground", children: t("mcpIntegrations.providerSetupRequired") }), _jsx("p", { className: "mt-0.5 text-muted-foreground", children: t("mcpIntegrations.providerSetupDescription", {
-                                                name: selected.name,
-                                            }) })] })), !selectedRequiresSetup && (_jsxs(_Fragment, { children: [selected?.authMode === "oauth" && (_jsx("div", { className: "rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-[11px] leading-relaxed text-primary", children: t("mcpIntegrations.oauthNotice") })), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.serverName") }), _jsx("input", { ref: inputRef, value: name, onChange: (event) => {
+                                    : t("mcpIntegrations.customDescription") })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-7 py-7 sm:px-10", children: _jsxs("div", { className: "mx-auto max-w-2xl space-y-3", children: [renderScopeSelector(), selected?.setupNoteKey && !selectedRequiresSetup ? (_jsx("div", { className: "rounded-md bg-muted/40 px-3 py-2 text-[11px] leading-relaxed text-muted-foreground", children: t(selected.setupNoteKey) })) : null, selectedRequiresSetup && selected && (_jsxs("div", { className: "mx-auto grid w-full max-w-xl gap-4 py-8", children: [_jsxs("div", { children: [_jsx("p", { className: "text-base font-semibold tracking-[-0.02em] text-foreground", children: t("mcpIntegrations.providerSetupRequired") }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: t("mcpIntegrations.providerSetupDescription", {
+                                                        name: selected.name,
+                                                    }) })] }), selected.setupNoteKey ? (_jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: t(selected.setupNoteKey) })) : null, selected.docsUrl ? (_jsxs("a", { href: selected.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-foreground underline underline-offset-4 hover:text-muted-foreground", children: [t("mcpIntegrations.viewSetup"), _jsx(IconExternalLink, { className: "size-3.5" })] })) : null] })), !selected && (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md bg-muted/30 px-3 py-2 text-[11px]", children: [_jsx("span", { className: "text-muted-foreground", children: customAuthMode === "oauth"
+                                                ? t(
+                                                /* i18n-key-ignore */
+                                                "mcpIntegrations.customOAuthDefault", { defaultValue: "Sign in with OAuth" })
+                                                : t(
+                                                /* i18n-key-ignore */
+                                                "mcpIntegrations.customHeadersMode", { defaultValue: "Use an API key" }) }), _jsx("button", { type: "button", onClick: () => {
+                                                setCustomAuthMode((current) => current === "oauth" ? "headers" : "oauth");
+                                                clearFeedback();
+                                            }, className: "font-medium text-foreground underline underline-offset-2 hover:text-muted-foreground", children: customAuthMode === "oauth"
+                                                ? t(
+                                                /* i18n-key-ignore */
+                                                "mcpIntegrations.useApiKeyInstead", { defaultValue: "Use an API key instead" })
+                                                : t(
+                                                /* i18n-key-ignore */
+                                                "mcpIntegrations.useOAuthInstead", { defaultValue: "Use OAuth instead" }) })] })), !selectedRequiresSetup && (_jsxs(_Fragment, { children: [selected?.authMode === "oauth" && (_jsx("div", { className: "rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-[11px] leading-relaxed text-primary", children: t("mcpIntegrations.oauthNotice") })), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.serverName") }), _jsx("input", { ref: inputRef, value: name, onChange: (event) => {
                                                         setName(event.target.value);
                                                         clearFeedback();
                                                     }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.serverNamePlaceholder") })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.url") }), _jsx("input", { value: url, onChange: (event) => {
@@ -339,7 +462,9 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
                                                     }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.urlPlaceholder") })] }), _jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.fieldDescription") }), _jsx("input", { value: description, onChange: (event) => {
                                                         setDescription(event.target.value);
                                                         clearFeedback();
-                                                    }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.descriptionPlaceholder") })] }), selected?.authMode !== "oauth" && (_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.headers") }), _jsx("textarea", { value: headersText, onChange: (event) => {
+                                                    }, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: t("mcpIntegrations.descriptionPlaceholder") })] }), (selected
+                                            ? selected.authMode !== "oauth"
+                                            : customAuthMode === "headers") && (_jsxs("label", { className: "block", children: [_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("mcpIntegrations.headers") }), _jsx("textarea", { value: headersText, onChange: (event) => {
                                                         setHeadersText(event.target.value);
                                                         clearFeedback();
                                                     }, rows: 3, className: "w-full resize-y rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", style: {
@@ -347,5 +472,5 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
                                                     }, placeholder: selected?.headerPlaceholder ??
                                                         t("mcpIntegrations.headersPlaceholder") })] })), selected?.docsUrl && (_jsxs("a", { href: selected.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground underline hover:text-foreground", children: [t("mcpIntegrations.openSetupDocs"), _jsx(IconExternalLink, { className: "h-3 w-3" })] }))] })), testResult && (_jsxs("div", { className: cn("flex items-start gap-1 rounded-md px-3 py-2 text-[11px] leading-snug", testResult.ok
                                         ? "bg-green-500/5 text-green-600 dark:text-green-400"
-                                        : "bg-red-500/5 text-red-600 dark:text-red-400"), children: [testResult.ok && (_jsx(IconCheck, { className: "mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: testResult.message })] })), error && (_jsx("div", { className: "break-words rounded-md bg-red-500/5 px-3 py-2 text-[11px] leading-snug text-red-600 dark:text-red-400", children: error }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-t border-border px-7 py-4", children: [!selectedRequiresSetup && (_jsx("button", { type: "button", onClick: runTest, disabled: !url.trim() || busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: t("mcpIntegrations.test") })), !selected ? (_jsxs("button", { type: "button", onClick: connectCustomWithOAuth, disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "me-1.5 inline h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.connectWithOAuth")] })) : null, selectedRequiresSetup ? (_jsxs("div", { className: "ms-auto flex items-center gap-2", children: [selected?.docsUrl ? (_jsxs("a", { href: selected.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent", children: [t("mcpIntegrations.viewSetup"), _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, selected?.authMode === "oauth" && (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: busy, "aria-busy": busy, className: "inline-flex min-w-[132px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.continueToConnect")] }))] })) : selected?.authMode === "oauth" ? (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connectWithOAuth")] })) : (_jsxs("button", { type: "button", onClick: submitForm, disabled: !name.trim() || !url.trim() || busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connect")] }))] })] })) }) }));
+                                        : "bg-red-500/5 text-red-600 dark:text-red-400"), children: [testResult.ok && (_jsx(IconCheck, { className: "mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: testResult.message })] })), error && (_jsx("div", { className: "break-words rounded-md bg-red-500/5 px-3 py-2 text-[11px] leading-snug text-red-600 dark:text-red-400", children: error }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-t border-border px-7 py-4", children: [!selectedRequiresSetup && (_jsx("button", { type: "button", onClick: runTest, disabled: !url.trim() || busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: t("mcpIntegrations.test") })), !selected && customAuthMode === "oauth" ? (_jsxs("button", { type: "button", onClick: connectCustomWithOAuth, disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "me-1.5 inline h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.connectWithOAuth")] })) : null, selectedRequiresSetup ? (_jsxs("div", { className: "ms-auto flex items-center gap-2", children: [selected?.docsUrl ? (_jsxs("a", { href: selected.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent", children: [t("mcpIntegrations.viewSetup"), _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, selected?.authMode === "oauth" && (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: busy, "aria-busy": busy, className: "inline-flex min-w-[132px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.continueToConnect")] }))] })) : selected?.authMode === "oauth" ? (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connectWithOAuth")] })) : !selected && customAuthMode === "oauth" ? null : (_jsxs("button", { type: "button", onClick: submitForm, disabled: !name.trim() || !url.trim() || busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connect")] }))] })] })) }) }));
 }

package/dist/client/resources/index.d.ts

@@ -6,5 +6,6 @@ export * from "./use-resources.js";
 export * from "./use-builtin-capabilities.js";
 export { DEFAULT_MCP_INTEGRATIONS, filterMcpIntegrations, findMcpIntegrationForText, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, isMcpIntegrationCatalogAvailable, mergeDefaultMcpIntegrations, type DefaultMcpIntegration, } from "./mcp-integration-catalog.js";
 export { McpIntegrationDialog, type McpIntegrationDialogProps, } from "./McpIntegrationDialog.js";
+export { McpIntegrationLogo } from "./McpIntegrationLogo.js";
 export { McpConnectionSuggestion, type McpConnectionSuggestionProps, type McpConnectionSuggestionVariant, } from "./McpConnectionSuggestion.js";
 export { McpServersApiProvider, useMcpServersApi, useMcpServers, useCreateMcpServer, useDeleteMcpServer, useReconnectMcpServer, testMcpServerUrl, formatMcpServersLoadError, type CreateMcpServerArgs, type McpServer, type McpServerScope, type McpServersApi, type McpServersList, type ReconnectMcpServerArgs, type TestMcpUrlResult, } from "./use-mcp-servers.js";

package/dist/client/resources/index.js

@@ -6,5 +6,6 @@ export * from "./use-resources.js";
 export * from "./use-builtin-capabilities.js";
 export { DEFAULT_MCP_INTEGRATIONS, filterMcpIntegrations, findMcpIntegrationForText, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, isMcpIntegrationCatalogAvailable, mergeDefaultMcpIntegrations, } from "./mcp-integration-catalog.js";
 export { McpIntegrationDialog, } from "./McpIntegrationDialog.js";
+export { McpIntegrationLogo } from "./McpIntegrationLogo.js";
 export { McpConnectionSuggestion, } from "./McpConnectionSuggestion.js";
 export { McpServersApiProvider, useMcpServersApi, useMcpServers, useCreateMcpServer, useDeleteMcpServer, useReconnectMcpServer, testMcpServerUrl, formatMcpServersLoadError, } from "./use-mcp-servers.js";

package/dist/client/resources/mcp-integration-catalog.d.ts

@@ -74,4 +74,12 @@ export declare function findMcpIntegrationForText(text: string, integrations?: D
  */
 export declare function findMcpIntegrationForToolName(toolName: string, integrations?: readonly DefaultMcpIntegration[]): DefaultMcpIntegration | null;
 export declare function isMcpConnectionFailureText(text: string): boolean;
+/**
+ * Agent responses need a stronger signal than a provider name alone before
+ * they create an actionable card. This intentionally accepts both an
+ * imperative ("connect HubSpot") and a blocked-work explanation ("HubSpot
+ * access is required"), while avoiding positive status text such as
+ * "HubSpot is connected".
+ */
+export declare function isMcpConnectionSuggestionText(text: string): boolean;
 export declare function createMcpIntegrationFormDefaults(integration?: DefaultMcpIntegration | null): McpIntegrationFormDefaults;

package/dist/client/resources/mcp-integration-catalog.js

@@ -972,6 +972,34 @@ export function findMcpIntegrationForToolName(toolName, integrations = DEFAULT_M
 export function isMcpConnectionFailureText(text) {
     return /\b(?:can(?:not|'t|’t)|could(?: not|n't|n’t)|unable|failed|don't have access|don’t have access|not connected|not able)\b[\s\S]{0,80}\b(?:read|access|open|see|fetch|connect)\b/i.test(text);
 }
+/**
+ * Agent responses need a stronger signal than a provider name alone before
+ * they create an actionable card. This intentionally accepts both an
+ * imperative ("connect HubSpot") and a blocked-work explanation ("HubSpot
+ * access is required"), while avoiding positive status text such as
+ * "HubSpot is connected".
+ */
+export function isMcpConnectionSuggestionText(text) {
+    const normalized = text.trim();
+    if (!normalized)
+        return false;
+    const hasConnectionAction = /\b(?:connect|authorize|link)\b/i.test(normalized);
+    const hasConnectionNeed = /\b(?:please|need(?:s)?|required?|requires?|must|should|unable|can(?:not|'t|’t)|could(?: not|n't|n’t)|don't|do not|no|without|before|continue|access|account|workspace)\b/i.test(normalized);
+    const isImperativeConnectionAction = /^\s*(?:please\s+)?(?:connect|authorize|link)\b/i.test(normalized);
+    const isConnectionQuestion = /^\s*(?:can|could|would)\s+you\s+(?:please\s+)?(?:connect|authorize|link)\b/i.test(normalized);
+    const hasMissingConnection = /\b(?:isn't|is not|aren't|are not|hasn't|has not|not|never)\s+(?:currently\s+)?connected\b/i.test(normalized) ||
+        /\b(?:no|without)\s+(?:a\s+)?(?:connection|access)\b/i.test(normalized);
+    const hasMissingAccess = /\b(?:don't|do not|cannot|can't|unable)\b[\s\S]{0,80}\baccess\b/i.test(normalized);
+    const hasRequiredConnection = /\b(?:connection|access)\b[\s\S]{0,60}\b(?:required|needed|missing|unavailable)\b/i.test(normalized);
+    const hasRequiredAccess = /\b(?:need(?:s)?|require(?:s|d)?|must\s+have)\b[\s\S]{0,40}\b(?:access|connection|authorization)\b/i.test(normalized);
+    return ((hasConnectionAction && hasConnectionNeed) ||
+        isImperativeConnectionAction ||
+        isConnectionQuestion ||
+        hasMissingConnection ||
+        hasMissingAccess ||
+        hasRequiredConnection ||
+        hasRequiredAccess);
+}
 export function createMcpIntegrationFormDefaults(integration) {
     if (!integration) {
         return {

package/dist/client/settings/ExtensionsSettingsContent.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IconLoader2 } from "@tabler/icons-react";
 import { lazy, Suspense } from "react";
+import { SettingsSkeleton } from "./SettingsSkeleton.js";
 const ExtensionsListPage = lazy(() => import("../extensions/ExtensionsListPage.js").then((module) => ({
     default: module.ExtensionsListPage,
 })));
 export function ExtensionsSettingsContent() {
-    return (_jsx("div", { className: "w-full", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex min-h-[28rem] items-center justify-center text-muted-foreground", children: _jsx(IconLoader2, { className: "size-5 animate-spin", "aria-label": "Loading" }) }), children: _jsx(ExtensionsListPage, { embedded: true }) }) }));
+    return (_jsx("div", { className: "w-full", children: _jsx(Suspense, { fallback: _jsx(SettingsSkeleton, { lines: 4, className: "min-h-[28rem]" }), children: _jsx(ExtensionsListPage, { embedded: true }) }) }));
 }

package/dist/client/settings/SettingsPanel.d.ts

@@ -28,6 +28,12 @@ export interface AgentSettingsTabsOptions {
     agentAdditionalContent?: React.ReactNode;
     /** Optional app-owned tabs that share the Agent settings scope. */
     agentAdditionalTabFactories?: AgentSettingsTabFactory[];
+    /** App identity used to scope the shared Usage tab. */
+    usageAppId?: string | null;
+    /** Optional progressive-disclosure link to the app's full metrics view. */
+    usageViewAllHref?: string;
+    /** Optional app-owned replacement for the shared Organization tab. */
+    organizationContent?: React.ReactNode;
 }
 export interface AgentSettingsTabFactoryContext {
     scope: "user";