@n8n/frontend-module-mcp 0.1.0

package/src/mcp.store.ts

@@ -0,0 +1,490 @@
+import { defineStore } from 'pinia';
+import { capabilities, capabilityRegistry } from '@n8n/frontend-module-sdk';
+import { MCP_CLIENTS_PREVIEW_LIMIT, MCP_ENDPOINT, MCP_STORE } from './mcp.constants';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import {
+	updateMcpSettings,
+	toggleWorkflowsMcpAccessApi,
+	toggleAgentsMcpAccessApi,
+	fetchApiKey,
+	rotateApiKey,
+	fetchOAuthClients,
+	fetchInstanceMcpClientStats,
+	deleteOAuthClient,
+	fetchMcpEligibleWorkflows,
+	fetchMcpExposedWorkflows,
+	fetchMcpAgents,
+	getAllowedRedirectUris,
+	updateAllowedRedirectUris,
+	type McpSettingsResponse,
+	type ToggleWorkflowsMcpAccessResponse,
+	type ToggleWorkflowsMcpAccessTarget,
+	type ToggleAgentsMcpAccessResponse,
+	type ToggleAgentsMcpAccessTarget,
+} from './mcp.api';
+import type { McpAgent, McpWorkflow } from './mcp.types';
+import { computed, ref } from 'vue';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import { EMPTY_OAUTH_CLIENT_FILTERS, type OAuthClientFilters } from './clients.utils';
+import type {
+	ApiKey,
+	InstanceMcpClientStatsResponseDto,
+	ListOAuthClientsResponseDto,
+	OAuthClientResponseDto,
+	DeleteOAuthClientResponseDto,
+} from '@n8n/api-types';
+import { i18n } from '@n8n/i18n';
+
+export const useMCPStore = defineStore(MCP_STORE, () => {
+	const rootStore = useRootStore();
+	const settingsStore = useSettingsStore();
+
+	const currentUserMCPKey = ref<ApiKey | null>(null);
+	const oauthClients = ref<OAuthClientResponseDto[]>([]);
+	/** The current user's first few connected clients, previewed on the settings overview. */
+	const oauthClientsPreview = ref<OAuthClientResponseDto[]>([]);
+	const oauthClientScopeTools = ref<Record<string, string[]> | undefined>(undefined);
+	const oauthClientsOwnership = ref<'mine' | 'all'>('mine');
+	const oauthClientTotals = ref<{ mine: number; all?: number }>({ mine: 0 });
+	const oauthClientsPage = ref(0);
+	const oauthClientsPageSize = ref(10);
+	const oauthClientsFilters = ref<OAuthClientFilters>({ ...EMPTY_OAUTH_CLIENT_FILTERS });
+	/** Total rows matching the filters (across all pages) for the current ownership. */
+	const oauthClientsCount = ref(0);
+	/** Distinct consent owners for the "Connected by" filter (managers only). */
+	const oauthClientOwners = ref<Array<NonNullable<OAuthClientResponseDto['owner']>>>([]);
+	/** Monotonic token so a slow in-flight list fetch can't overwrite a newer one. */
+	let oauthClientsRequestSeq = 0;
+	/** Same guard for the overview preview fetch. */
+	let oauthClientsPreviewRequestSeq = 0;
+	/**
+	 * Totals and scope tools are instance-wide and come back with both the list
+	 * and the preview fetch; this token keeps an older response of either kind
+	 * from overwriting a newer one.
+	 */
+	let oauthClientMetadataRequestSeq = 0;
+	const allowedRedirectUris = ref<string[]>([]);
+	const instanceClientStats = ref<InstanceMcpClientStatsResponseDto | null>(null);
+	const connectPopoverOpen = ref(false);
+
+	const mcpAccessEnabled = computed(() => !!settingsStore.moduleSettings.mcp?.mcpAccessEnabled);
+	const mcpManagedByEnv = computed(() => !!settingsStore.moduleSettings.mcp?.mcpManagedByEnv);
+	const autoExposeNewWorkflows = computed(
+		() => !!settingsStore.moduleSettings.mcp?.autoExposeNewWorkflows,
+	);
+
+	// Backend-provided canonical URL, so a configured dedicated MCP base URL is
+	// reflected; the editor-base fallback covers settings not yet loaded.
+	const serverUrl = computed(
+		() =>
+			settingsStore.moduleSettings.mcp?.serverUrl ?? `${rootStore.urlBaseEditor}${MCP_ENDPOINT}`,
+	);
+
+	async function fetchWorkflowsAvailableForMCP(
+		page = 1,
+		pageSize = 50,
+	): Promise<{ data: McpWorkflow[]; count: number }> {
+		const { data, count } = await fetchMcpExposedWorkflows(rootStore.restApiContext, {
+			skip: (page - 1) * pageSize,
+			take: pageSize,
+		});
+		return { data, count };
+	}
+
+	/**
+	 * Runs a page fetch, clamping to the last non-empty page when the requested
+	 * one shrank away (e.g. after removing access). Returns the effective 1-based
+	 * page so callers can sync their table state.
+	 */
+	async function clampToLastPage<T>(
+		fetchPage: (page: number, pageSize: number) => Promise<{ data: T[]; count: number }>,
+		page: number,
+		pageSize: number,
+	): Promise<{ data: T[]; count: number; page: number }> {
+		const response = await fetchPage(page, pageSize);
+		if (response.data.length === 0 && response.count > 0 && page > 1) {
+			const maxPage = Math.max(1, Math.ceil(response.count / pageSize));
+			const clamped = await fetchPage(maxPage, pageSize);
+			return { ...clamped, page: maxPage };
+		}
+		return { ...response, page };
+	}
+
+	async function fetchWorkflowsAvailableForMCPPage(
+		page: number,
+		pageSize: number,
+	): Promise<{ data: McpWorkflow[]; count: number; page: number }> {
+		return await clampToLastPage(fetchWorkflowsAvailableForMCP, page, pageSize);
+	}
+
+	async function fetchAgentsAvailableForMCP(
+		page = 1,
+		pageSize = 50,
+	): Promise<{ data: McpAgent[]; count: number }> {
+		const { data, count } = await fetchMcpAgents(rootStore.restApiContext, {
+			skip: (page - 1) * pageSize,
+			take: pageSize,
+			availableInMCP: true,
+		});
+		return { data, count };
+	}
+
+	async function fetchAgentsAvailableForMCPPage(
+		page: number,
+		pageSize: number,
+	): Promise<{ data: McpAgent[]; count: number; page: number }> {
+		return await clampToLastPage(fetchAgentsAvailableForMCP, page, pageSize);
+	}
+
+	// The PATCH endpoint always returns both current values, so local state can
+	// be synced from the response without a follow-up module-settings fetch.
+	function applyMcpSettingsResponse(response: McpSettingsResponse) {
+		settingsStore.moduleSettings.mcp = {
+			mcpManagedByEnv: false,
+			...(settingsStore.moduleSettings.mcp ?? {}),
+			mcpAccessEnabled: response.mcpAccessEnabled,
+			autoExposeNewWorkflows: response.autoExposeNewWorkflows,
+		};
+	}
+
+	async function setMcpAccessEnabled(enabled: boolean): Promise<boolean> {
+		const response = await updateMcpSettings(rootStore.restApiContext, {
+			mcpAccessEnabled: enabled,
+		});
+		applyMcpSettingsResponse(response);
+		return response.mcpAccessEnabled;
+	}
+
+	async function setAutoExposeNewWorkflows(enabled: boolean): Promise<boolean> {
+		const response = await updateMcpSettings(rootStore.restApiContext, {
+			autoExposeNewWorkflows: enabled,
+		});
+		applyMcpSettingsResponse(response);
+		return response.autoExposeNewWorkflows;
+	}
+
+	// Toggle MCP access for a single workflow
+	async function toggleWorkflowMcpAccess(
+		workflowId: string,
+		availableInMCP: boolean,
+	): Promise<ToggleWorkflowsMcpAccessResponse> {
+		const response = await toggleWorkflowsMcpAccessApi(
+			rootStore.restApiContext,
+			{ workflowIds: [workflowId] },
+			availableInMCP,
+		);
+
+		const confirmedIds = new Set([
+			...(response.updatedIds ?? []),
+			...(response.unchangedIds ?? []),
+		]);
+
+		if (!confirmedIds.has(workflowId)) {
+			throw new Error(
+				i18n.baseText('workflowSettings.toggleMCP.updateSkippedError', {
+					interpolate: { workflowId },
+				}),
+			);
+		}
+
+		capabilityRegistry.use(capabilities.workflowMcpAccessSync)([workflowId], availableInMCP);
+
+		return response;
+	}
+
+	/**
+	 * Bulk-toggle MCP availability, scoped by an id list, a project,
+	 * or a folder (+ descendants)
+	 */
+	async function toggleWorkflowsMcpAccess(
+		target: ToggleWorkflowsMcpAccessTarget,
+		availableInMCP: boolean,
+	): Promise<ToggleWorkflowsMcpAccessResponse> {
+		const response = await toggleWorkflowsMcpAccessApi(
+			rootStore.restApiContext,
+			target,
+			availableInMCP,
+		);
+
+		const confirmedIds = new Set([
+			...(response.updatedIds ?? []),
+			...(response.unchangedIds ?? []),
+		]);
+
+		// Scope-mode responses carry no ids, so there is nothing to sync back.
+		if (confirmedIds.size > 0) {
+			capabilityRegistry.use(capabilities.workflowMcpAccessSync)([...confirmedIds], availableInMCP);
+		}
+
+		return response;
+	}
+
+	// Toggle MCP access for a single agent
+	async function toggleAgentMcpAccess(
+		agentId: string,
+		availableInMCP: boolean,
+	): Promise<ToggleAgentsMcpAccessResponse> {
+		const response = await toggleAgentsMcpAccessApi(
+			rootStore.restApiContext,
+			{ agentIds: [agentId] },
+			availableInMCP,
+		);
+
+		const confirmedIds = new Set([
+			...(response.updatedIds ?? []),
+			...(response.unchangedIds ?? []),
+		]);
+
+		if (!confirmedIds.has(agentId)) {
+			throw new Error(
+				i18n.baseText('agents.toggleMCP.updateSkippedError', {
+					interpolate: { agentId },
+				}),
+			);
+		}
+
+		return response;
+	}
+
+	/** Bulk-toggle MCP availability for agents, scoped by an id list, a project, or all agents. */
+	async function toggleAgentsMcpAccess(
+		target: ToggleAgentsMcpAccessTarget,
+		availableInMCP: boolean,
+	): Promise<ToggleAgentsMcpAccessResponse> {
+		return await toggleAgentsMcpAccessApi(rootStore.restApiContext, target, availableInMCP);
+	}
+
+	async function getOrCreateApiKey(): Promise<ApiKey> {
+		const apiKey = await fetchApiKey(rootStore.restApiContext);
+		currentUserMCPKey.value = apiKey;
+		return apiKey;
+	}
+
+	async function generateNewApiKey(): Promise<ApiKey> {
+		const apiKey = await rotateApiKey(rootStore.restApiContext);
+		currentUserMCPKey.value = apiKey;
+		return apiKey;
+	}
+
+	function resetCurrentUserMCPKey(): void {
+		currentUserMCPKey.value = null;
+	}
+
+	function applyOAuthClientMetadata(seq: number, response: ListOAuthClientsResponseDto) {
+		if (seq !== oauthClientMetadataRequestSeq) return;
+		oauthClientScopeTools.value = response.scopeTools;
+		oauthClientTotals.value = response.totals;
+	}
+
+	async function getAllOAuthClients(): Promise<OAuthClientResponseDto[]> {
+		const seq = ++oauthClientsRequestSeq;
+		const metadataSeq = ++oauthClientMetadataRequestSeq;
+		const filters = oauthClientsFilters.value;
+		const response = await fetchOAuthClients(rootStore.restApiContext, {
+			ownership: oauthClientsOwnership.value,
+			skip: oauthClientsPage.value * oauthClientsPageSize.value,
+			take: oauthClientsPageSize.value,
+			name: filters.search.trim() || undefined,
+			ownerId: filters.ownerId ?? undefined,
+			type: filters.type ?? undefined,
+			connected: filters.connected ?? undefined,
+		});
+
+		// A newer request (tab switch, search, pagination) superseded this one
+		// while it was in flight; drop the stale response so it can't overwrite
+		// the current selection.
+		if (seq !== oauthClientsRequestSeq) return response.data;
+
+		// Clamp to the last page when the requested one shrank away (e.g. after a revoke)
+		if (response.data.length === 0 && response.count > 0 && oauthClientsPage.value > 0) {
+			oauthClientsPage.value = Math.max(
+				0,
+				Math.ceil(response.count / oauthClientsPageSize.value) - 1,
+			);
+			return await getAllOAuthClients();
+		}
+
+		oauthClients.value = response.data;
+		applyOAuthClientMetadata(metadataSeq, response);
+		oauthClientsCount.value = response.count;
+		oauthClientOwners.value = response.owners ?? [];
+		return response.data;
+	}
+
+	/**
+	 * Fetches the current user's first connected clients for the overview preview.
+	 * Always scoped to `mine`, and independent of the clients page's list state
+	 * (ownership, page, filters), so a visit to the "All" tab can't leak other
+	 * users' clients onto the overview. Totals and scope tools are instance-wide,
+	 * so the response refreshes them too.
+	 */
+	async function fetchOAuthClientsPreview(
+		limit = MCP_CLIENTS_PREVIEW_LIMIT,
+	): Promise<OAuthClientResponseDto[]> {
+		const seq = ++oauthClientsPreviewRequestSeq;
+		const metadataSeq = ++oauthClientMetadataRequestSeq;
+		const response = await fetchOAuthClients(rootStore.restApiContext, {
+			ownership: 'mine',
+			skip: 0,
+			take: limit,
+		});
+		// A newer preview fetch (e.g. after a revoke) superseded this one.
+		if (seq !== oauthClientsPreviewRequestSeq) return response.data;
+
+		oauthClientsPreview.value = response.data;
+		applyOAuthClientMetadata(metadataSeq, response);
+		return response.data;
+	}
+
+	/**
+	 * Drops the cached preview. The overview calls this when it unmounts so the
+	 * per-user rows never outlive the page, e.g. into another user's session
+	 * after a soft-redirect logout and login. Bumping the sequence also
+	 * invalidates a fetch still in flight, so its response can't repopulate the
+	 * preview after the page is gone.
+	 */
+	function clearOAuthClientsPreview(): void {
+		oauthClientsPreviewRequestSeq++;
+		oauthClientsPreview.value = [];
+	}
+
+	async function setOAuthClientsOwnership(ownership: 'mine' | 'all'): Promise<void> {
+		oauthClientsOwnership.value = ownership;
+		oauthClientsPage.value = 0;
+		oauthClientsFilters.value = { ...EMPTY_OAUTH_CLIENT_FILTERS };
+		await getAllOAuthClients();
+	}
+
+	async function setOAuthClientsFilters(filters: OAuthClientFilters): Promise<void> {
+		oauthClientsFilters.value = filters;
+		oauthClientsPage.value = 0;
+		await getAllOAuthClients();
+	}
+
+	async function setOAuthClientsPagination(page: number, pageSize: number): Promise<void> {
+		// A page-size change restarts from the first page
+		oauthClientsPage.value = pageSize === oauthClientsPageSize.value ? page : 0;
+		oauthClientsPageSize.value = pageSize;
+		await getAllOAuthClients();
+	}
+
+	async function getInstanceClientStats(): Promise<InstanceMcpClientStatsResponseDto | null> {
+		try {
+			const stats = await fetchInstanceMcpClientStats(rootStore.restApiContext);
+			instanceClientStats.value = stats;
+			return stats;
+		} catch {
+			// Endpoint is admin-only; non-admin members get 403. Swallow silently
+			// so the settings page still renders for them.
+			instanceClientStats.value = null;
+			return null;
+		}
+	}
+
+	/**
+	 * Revokes a client's grant. By default the clients page's list is refetched
+	 * afterwards; callers that don't show that list (the overview) pass
+	 * `refreshList: false` and refresh their own data instead, so the list's
+	 * persisted ownership and filters are never requested from elsewhere.
+	 */
+	async function removeOAuthClient(
+		clientId: string,
+		userId?: string,
+		{ refreshList = true }: { refreshList?: boolean } = {},
+	): Promise<DeleteOAuthClientResponseDto> {
+		const response = await deleteOAuthClient(rootStore.restApiContext, clientId, userId);
+		if (!refreshList) return response;
+		// Refetch instead of splicing locally so the tab totals stay accurate. The
+		// revoke already succeeded, so keep the refresh best-effort: a failed
+		// refetch must not turn a successful revoke into a reported error.
+		try {
+			await getAllOAuthClients();
+		} catch {
+			// Stale list/totals are acceptable; the next interaction refetches.
+		}
+		return response;
+	}
+
+	async function getMcpEligibleWorkflows(options?: {
+		take?: number;
+		skip?: number;
+		query?: string;
+	}): Promise<{ count: number; data: McpWorkflow[] }> {
+		return await fetchMcpEligibleWorkflows(rootStore.restApiContext, options);
+	}
+
+	async function getMcpEligibleAgents(options?: {
+		take?: number;
+		skip?: number;
+		query?: string;
+	}): Promise<{ count: number; data: McpAgent[] }> {
+		return await fetchMcpAgents(rootStore.restApiContext, options);
+	}
+
+	function openConnectPopover(): void {
+		connectPopoverOpen.value = true;
+	}
+
+	function closeConnectPopover(): void {
+		connectPopoverOpen.value = false;
+	}
+
+	async function fetchAllowedRedirectUris(): Promise<string[]> {
+		const response = await getAllowedRedirectUris(rootStore.restApiContext);
+		allowedRedirectUris.value = response.uris;
+		return response.uris;
+	}
+
+	async function setAllowedRedirectUris(uris: string[]): Promise<void> {
+		await updateAllowedRedirectUris(rootStore.restApiContext, uris);
+		allowedRedirectUris.value = uris;
+	}
+
+	return {
+		mcpAccessEnabled,
+		mcpManagedByEnv,
+		autoExposeNewWorkflows,
+		serverUrl,
+		fetchWorkflowsAvailableForMCP,
+		fetchWorkflowsAvailableForMCPPage,
+		fetchAgentsAvailableForMCP,
+		fetchAgentsAvailableForMCPPage,
+		setMcpAccessEnabled,
+		setAutoExposeNewWorkflows,
+		toggleWorkflowMcpAccess,
+		toggleWorkflowsMcpAccess,
+		toggleAgentMcpAccess,
+		toggleAgentsMcpAccess,
+		currentUserMCPKey,
+		getOrCreateApiKey,
+		generateNewApiKey,
+		resetCurrentUserMCPKey,
+		oauthClients,
+		oauthClientsPreview,
+		fetchOAuthClientsPreview,
+		clearOAuthClientsPreview,
+		oauthClientsOwnership,
+		oauthClientTotals,
+		oauthClientOwners,
+		oauthClientsPage,
+		oauthClientsPageSize,
+		oauthClientsFilters,
+		oauthClientsCount,
+		setOAuthClientsOwnership,
+		setOAuthClientsFilters,
+		setOAuthClientsPagination,
+		instanceClientStats,
+		getAllOAuthClients,
+		oauthClientScopeTools,
+		getInstanceClientStats,
+		removeOAuthClient,
+		getMcpEligibleWorkflows,
+		getMcpEligibleAgents,
+		allowedRedirectUris,
+		fetchAllowedRedirectUris,
+		setAllowedRedirectUris,
+		connectPopoverOpen,
+		openConnectPopover,
+		closeConnectPopover,
+	};
+});

package/src/mcp.test.utils.ts

@@ -0,0 +1,57 @@
+import type { McpWorkflow } from './mcp.types';
+import type { ProjectSharingData } from 'n8n-workflow';
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+
+export const createHomeProject = (
+	overrides: Partial<ProjectSharingData> = {},
+): ProjectSharingData => ({
+	id: 'project-1',
+	type: 'team',
+	name: 'Test Project',
+	icon: null,
+	createdAt: '2025-01-01',
+	updatedAt: '2025-01-01',
+	...overrides,
+});
+
+export const createParentFolder = (
+	overrides: Partial<{ id: string; name: string; parentFolderId: string | null }> = {},
+) => ({
+	id: 'folder-1',
+	name: 'Test Folder',
+	parentFolderId: null,
+	...overrides,
+});
+
+export const createWorkflow = (overrides: Partial<McpWorkflow> = {}): McpWorkflow => ({
+	id: 'test-workflow-1',
+	name: 'Test Workflow',
+	scopes: ['workflow:read', 'workflow:update'],
+	homeProject: {
+		id: 'project1',
+		type: 'team',
+		name: 'Test Project',
+		icon: {
+			type: 'icon',
+			value: 'bot',
+		},
+		createdAt: '2025-09-09T14:13:50.000Z',
+		updatedAt: '2025-09-09T14:13:50.000Z',
+	},
+	...overrides,
+});
+
+export const createOAuthClient = (
+	overrides: Partial<OAuthClientResponseDto> = {},
+): OAuthClientResponseDto => ({
+	id: 'client-1',
+	name: 'Test Client',
+	createdAt: '2025-09-09T14:14:04.155Z',
+	updatedAt: '2025-09-09T14:14:04.155Z',
+	redirectUris: [],
+	grantTypes: ['authorization_code'],
+	tokenEndpointAuthMethod: 'client_secret_basic',
+	grantedAt: new Date('2025-09-09T14:14:04.155Z').getTime(),
+	scopes: ['workflow:read', 'execution:read'],
+	...overrides,
+});

package/src/mcp.types.ts

@@ -0,0 +1,20 @@
+import type { Scope } from '@n8n/permissions';
+import type { ProjectSharingData } from 'n8n-workflow';
+
+/** Workflow fields the MCP views read off a list response. `WorkflowListItem` satisfies it. */
+export type McpWorkflow = {
+	id: string;
+	name: string;
+	description?: string | null;
+	scopes?: Scope[];
+	homeProject?: ProjectSharingData;
+	parentFolder?: { id: string; name: string; parentFolderId: string | null };
+};
+
+/** Agent fields the MCP views read off a list response. `Agent` satisfies it. */
+export type McpAgent = {
+	id: string;
+	name: string;
+	projectId: string;
+	project?: Pick<ProjectSharingData, 'id' | 'name' | 'type'> | null;
+};

package/src/modals/MCPConnectAgentsModal.test.ts

@@ -0,0 +1,141 @@
+import { defineComponent, h } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import MCPConnectAgentsModal from './MCPConnectAgentsModal.vue';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+import { type Mock } from 'vitest';
+
+vi.mock('@n8n/composables/useTelemetry', () => {
+	const track = vi.fn();
+	return {
+		useTelemetry: () => ({
+			track,
+		}),
+	};
+});
+
+// Replaces the remote-search select with a button that selects one agent.
+const MCPAgentsSelectStub = defineComponent({
+	props: { modelValue: { type: Array, default: () => [] } },
+	emits: ['update:modelValue'],
+	setup(props, { emit }) {
+		return () =>
+			h(
+				'button',
+				{
+					'data-test-id': 'mcp-agents-select-stub',
+					onClick: () => emit('update:modelValue', ['agent-1']),
+				},
+				props.modelValue.join(','),
+			);
+	},
+});
+
+const renderModal = createComponentRenderer(MCPConnectAgentsModal, {
+	global: {
+		stubs: { MCPAgentsSelect: MCPAgentsSelectStub },
+	},
+});
+
+const telemetry = useTelemetry();
+
+let mockEnableMcpAccess: Mock;
+
+describe('MCPConnectAgentsModal', () => {
+	beforeEach(() => {
+		mockEnableMcpAccess = vi.fn().mockResolvedValue(undefined);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	const renderOpen = () =>
+		renderModal({
+			pinia: createTestingPinia(),
+			props: { open: true, enableMcpAccess: mockEnableMcpAccess },
+		});
+
+	it('should enable access, track the selection and close on save', async () => {
+		const { getByTestId, findByTestId, emitted } = renderOpen();
+
+		await userEvent.click(await findByTestId('mcp-agents-select-stub'));
+		await userEvent.click(getByTestId('mcp-connect-agents-save-button'));
+
+		await waitFor(() => expect(emitted()['update:open']).toEqual([[false]]));
+		expect(mockEnableMcpAccess).toHaveBeenCalledWith(['agent-1']);
+		expect(telemetry.track).toHaveBeenCalledWith(
+			TELEMETRY_EVENT.AGENTS.USER_SELECTED_AGENTS_FOR_MCP,
+			{ agentIds: ['agent-1'], count: 1 },
+		);
+		expect(telemetry.track).not.toHaveBeenCalledWith(
+			TELEMETRY_EVENT.AGENTS.USER_DISMISSED_MCP_AGENTS_DIALOG,
+			{},
+		);
+	});
+
+	it('should close and track a dismissal on cancel', async () => {
+		const { findByTestId, emitted, rerender } = renderOpen();
+
+		await userEvent.click(await findByTestId('mcp-connect-agents-cancel-button'));
+		expect(emitted()['update:open']).toEqual([[false]]);
+
+		// The parent applies the v-model update.
+		await rerender({ open: false });
+
+		expect(telemetry.track).toHaveBeenCalledWith(
+			TELEMETRY_EVENT.AGENTS.USER_DISMISSED_MCP_AGENTS_DIALOG,
+			{},
+		);
+	});
+
+	it('should track a dismissal when the parent closes it without an action', async () => {
+		const { rerender } = renderOpen();
+
+		await rerender({ open: false });
+
+		expect(telemetry.track).toHaveBeenCalledWith(
+			TELEMETRY_EVENT.AGENTS.USER_DISMISSED_MCP_AGENTS_DIALOG,
+			{},
+		);
+	});
+
+	it('should start from an empty selection when reopened', async () => {
+		const { getByTestId, findByTestId, rerender } = renderOpen();
+
+		await userEvent.click(await findByTestId('mcp-agents-select-stub'));
+		expect(getByTestId('mcp-connect-agents-save-button')).toBeEnabled();
+
+		await rerender({ open: false });
+		await rerender({ open: true });
+
+		await waitFor(() => expect(getByTestId('mcp-connect-agents-save-button')).toBeDisabled());
+		expect(getByTestId('mcp-agents-select-stub')).toHaveTextContent('');
+	});
+
+	it('should stay open without tracking when enabling access fails', async () => {
+		const error = new Error('network');
+		mockEnableMcpAccess.mockRejectedValue(error);
+		// The view shows the error; the rejection only has to keep the modal open.
+		const errorHandler = vi.fn();
+		const { getByTestId, findByTestId, emitted } = renderModal({
+			pinia: createTestingPinia(),
+			props: { open: true, enableMcpAccess: mockEnableMcpAccess },
+			global: { config: { errorHandler } },
+		});
+
+		await userEvent.click(await findByTestId('mcp-agents-select-stub'));
+		await userEvent.click(getByTestId('mcp-connect-agents-save-button'));
+
+		await waitFor(() => {
+			expect(getByTestId('mcp-connect-agents-save-button')).toBeEnabled();
+			expect(getByTestId('mcp-connect-agents-cancel-button')).toBeEnabled();
+		});
+		expect(errorHandler).toHaveBeenCalledWith(error, expect.anything(), expect.any(String));
+		expect(emitted()['update:open']).toBeUndefined();
+		expect(telemetry.track).not.toHaveBeenCalled();
+	});
+});