@n8n/frontend-module-mcp 0.1.0

package/src/SettingsMCPAgentsView.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from '@n8n/i18n';
+import {
+	N8nButton,
+	N8nSettingsLayout,
+	N8nSettingsPageHeader,
+	N8nTooltip,
+} from '@n8n/design-system';
+import type { TableOptions } from '@n8n/design-system';
+
+import { useDocumentTitle } from '@n8n/composables/useDocumentTitle';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+import { useToast } from '@n8n/composables/useToast';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import type { McpAgent } from './mcp.types';
+import { useMCPStore } from './mcp.store';
+import { LOADING_INDICATOR_TIMEOUT, MCP_DOCS_PAGE_URL, MCP_SETTINGS_VIEW } from './mcp.constants';
+import AgentsTable from './components/tabs/AgentsTable.vue';
+import MCPConnectAgentsModal from './modals/MCPConnectAgentsModal.vue';
+
+const i18n = useI18n();
+const toast = useToast();
+const telemetry = useTelemetry();
+const router = useRouter();
+const documentTitle = useDocumentTitle({
+	releaseChannel: useSettingsStore().settings.releaseChannel,
+});
+const mcpStore = useMCPStore();
+const settingsStore = useSettingsStore();
+
+const agentsLoading = ref(false);
+const showConnectAgentsDialog = ref(false);
+const availableAgents = ref<McpAgent[]>([]);
+const availableAgentsTotal = ref(0);
+const agentsTableState = ref<TableOptions>({
+	page: 0,
+	itemsPerPage: 10,
+	sortBy: [],
+});
+const agentsTableItemsPerPage = ref(agentsTableState.value.itemsPerPage);
+
+const showConnectAgentsButton = computed(() => availableAgentsTotal.value > 0);
+
+const showMcpAccessUpdatedToast = (count: number, enabled: boolean) => {
+	toast.showMessage({
+		type: 'success',
+		title: i18n.baseText(
+			enabled
+				? 'settings.mcp.agents.enableAccess.success.title'
+				: 'settings.mcp.agents.removeAccess.success.title',
+			{
+				adjustToNumber: count,
+				interpolate: { count: String(count) },
+			},
+		),
+	});
+};
+
+const fetchAvailableAgents = async () => {
+	agentsLoading.value = true;
+	try {
+		const response = await mcpStore.fetchAgentsAvailableForMCPPage(
+			agentsTableState.value.page + 1,
+			agentsTableState.value.itemsPerPage,
+		);
+		if (response.page !== agentsTableState.value.page + 1) {
+			agentsTableState.value = { ...agentsTableState.value, page: response.page - 1 };
+		}
+		availableAgents.value = response.data;
+		availableAgentsTotal.value = response.count;
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.agents.list.error.fetching'));
+	} finally {
+		setTimeout(() => {
+			agentsLoading.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+const refreshAgentsFromFirstPage = async () => {
+	agentsTableState.value = { ...agentsTableState.value, page: 0 };
+	await fetchAvailableAgents();
+};
+
+const onAgentsTableUpdate = async (options: TableOptions) => {
+	const pageSizeChanged = options.itemsPerPage !== agentsTableItemsPerPage.value;
+	agentsTableState.value = { ...options, page: pageSizeChanged ? 0 : options.page };
+	agentsTableItemsPerPage.value = options.itemsPerPage;
+	await fetchAvailableAgents();
+};
+
+const onToggleAgentMCPAccess = async (agentId: string, isEnabled: boolean) => {
+	try {
+		await mcpStore.toggleAgentMcpAccess(agentId, isEnabled);
+		if (isEnabled) {
+			await refreshAgentsFromFirstPage();
+		} else {
+			showMcpAccessUpdatedToast(1, false);
+			await fetchAvailableAgents();
+		}
+	} catch (error) {
+		toast.showError(error, i18n.baseText('agents.toggleMCP.error.title'));
+		throw error;
+	}
+};
+
+const onBulkEnableAgentsMCPAccess = async (agentIds: string[]) => {
+	try {
+		const response = await mcpStore.toggleAgentsMcpAccess({ agentIds }, true);
+		showMcpAccessUpdatedToast(response.updatedCount, true);
+		await refreshAgentsFromFirstPage();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('agents.toggleMCP.error.title'));
+		throw error;
+	}
+};
+
+const onBulkRemoveAgentsMCPAccess = async (agentIds: string[]) => {
+	try {
+		const response = await mcpStore.toggleAgentsMcpAccess({ agentIds }, false);
+		showMcpAccessUpdatedToast(response.updatedCount, false);
+		await fetchAvailableAgents();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('agents.toggleMCP.error.title'));
+	}
+};
+
+const openConnectAgentsModal = () => {
+	showConnectAgentsDialog.value = true;
+	telemetry.track(TELEMETRY_EVENT.AGENTS.USER_CLICKED_CONNECT_AGENTS_FROM_MCP_SETTINGS, {});
+};
+
+const onBack = () => {
+	void router.push({ name: MCP_SETTINGS_VIEW });
+};
+
+onMounted(async () => {
+	documentTitle.set(i18n.baseText('settings.mcp.agentsExposed.page.title'));
+	if (!mcpStore.mcpAccessEnabled || !settingsStore.isAgentsEnabled) {
+		await router.replace({ name: MCP_SETTINGS_VIEW });
+		return;
+	}
+	await fetchAvailableAgents();
+});
+</script>
+
+<template>
+	<N8nSettingsLayout
+		full-width
+		show-back
+		:back-label="i18n.baseText('settings.mcp.back')"
+		:class="$style.layout"
+		@back="onBack"
+	>
+		<N8nSettingsPageHeader
+			:title="i18n.baseText('settings.mcp.agentsExposed.page.title')"
+			:description="i18n.baseText('settings.mcp.agentsExposed.page.description')"
+			:docs-url="MCP_DOCS_PAGE_URL"
+		/>
+		<div data-test-id="mcp-agents-view">
+			<div :class="$style.actions">
+				<N8nButton
+					v-if="showConnectAgentsButton"
+					variant="solid"
+					:label="i18n.baseText('settings.mcp.connectAgents')"
+					data-test-id="mcp-connect-agents-header-button"
+					size="small"
+					@click="openConnectAgentsModal"
+				/>
+				<N8nTooltip :content="i18n.baseText('settings.mcp.refresh.tooltip')">
+					<N8nButton
+						variant="subtle"
+						icon-only
+						data-test-id="mcp-agents-refresh-button"
+						size="small"
+						icon="refresh-cw"
+						@click="fetchAvailableAgents"
+					/>
+				</N8nTooltip>
+			</div>
+			<AgentsTable
+				v-model:table-options="agentsTableState"
+				:agents="availableAgents"
+				:total-count="availableAgentsTotal"
+				:loading="agentsLoading"
+				@remove-mcp-access="(agent) => onToggleAgentMCPAccess(agent.id, false)"
+				@bulk-remove-mcp-access="onBulkRemoveAgentsMCPAccess"
+				@connect-agents="openConnectAgentsModal"
+				@update:options="onAgentsTableUpdate"
+			/>
+		</div>
+		<MCPConnectAgentsModal
+			v-model:open="showConnectAgentsDialog"
+			:enable-mcp-access="onBulkEnableAgentsMCPAccess"
+		/>
+	</N8nSettingsLayout>
+</template>
+
+<style lang="scss" module>
+/* Collapse the layout's own top inset; the settings shell already pads the page top. */
+.layout {
+	padding-top: 0;
+}
+
+/* Pin the back action to the top-left of the settings area (the shell's
+   content container is position: relative), independent of the centered column. */
+.layout > div:first-child {
+	position: absolute;
+	top: var(--spacing--lg);
+	left: var(--spacing--lg);
+	width: auto;
+}
+
+.actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--2xs);
+	margin-bottom: var(--spacing--xs);
+}
+</style>

package/src/SettingsMCPClientsView.test.ts

@@ -0,0 +1,280 @@
+import { nextTick } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer, mockedStore, type MockedStore } from '@n8n/frontend-test-utils';
+import SettingsMCPClientsView from './SettingsMCPClientsView.vue';
+import { useMCPStore } from './mcp.store';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import { useUsersStore } from '@n8n/stores/users.store';
+import { useRBACStore } from '@n8n/stores/rbac.store';
+import { mock } from 'vitest-mock-extended';
+import type { IUser } from '@n8n/rest-api-client/api/users';
+import type { FrontendSettings } from '@n8n/api-types';
+import { MCP_SETTINGS_VIEW } from './mcp.constants';
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+
+const { routerPush, routerReplace, route } = vi.hoisted(() => ({
+	routerPush: vi.fn(),
+	routerReplace: vi.fn(),
+	route: { params: {}, query: {} as Record<string, string> },
+}));
+
+const { trackSpy } = vi.hoisted(() => ({ trackSpy: vi.fn() }));
+
+vi.mock('@n8n/composables/useTelemetry', () => ({
+	useTelemetry: () => ({ track: trackSpy }),
+}));
+
+vi.mock('vue-router', async (importOriginal) => ({
+	...(await importOriginal()),
+	useRouter: () => ({ push: routerPush, replace: routerReplace }),
+	useRoute: vi.fn(() => route),
+	RouterLink: {
+		template: '<a><slot /></a>',
+	},
+}));
+
+vi.mock('@n8n/composables/useDocumentTitle', () => ({
+	useDocumentTitle: () => ({
+		set: vi.fn(),
+	}),
+}));
+
+let pinia: ReturnType<typeof createTestingPinia>;
+let mcpStore: MockedStore<typeof useMCPStore>;
+let settingsStore: MockedStore<typeof useSettingsStore>;
+let usersStore: MockedStore<typeof useUsersStore>;
+let rbacStore: MockedStore<typeof useRBACStore>;
+
+const createComponent = createComponentRenderer(SettingsMCPClientsView, {
+	global: {
+		stubs: {
+			OAuthClientsTable: {
+				inheritAttrs: true,
+				template:
+					"<div>OAuth Clients Table<button data-test-id=\"stub-revoke-client\" @click=\"$emit('revokeClient', { id: 'client-1', name: 'Claude Code', owner: { id: 'user-2', firstName: 'Jane', lastName: 'Doe', email: 'jane@n8n.io' } })\">Revoke</button><button data-test-id=\"stub-ownership-all\" @click=\"$emit('update:ownership', 'all')\">All</button></div>",
+			},
+		},
+	},
+});
+
+describe('SettingsMCPClientsView', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		mcpStore = mockedStore(useMCPStore);
+		settingsStore = mockedStore(useSettingsStore);
+		usersStore = mockedStore(useUsersStore);
+		rbacStore = mockedStore(useRBACStore);
+		rbacStore.hasScope.mockReturnValue(false);
+		route.query = {};
+		mcpStore.oauthClientsOwnership = 'mine';
+
+		// The stub row's consent belongs to user-2, so a different current user is
+		// what makes revoked_for_other meaningful rather than trivially true.
+		usersStore.currentUser = mock<IUser>({ id: 'user-1' });
+
+		settingsStore.settings = {
+			enterprise: {},
+		} as FrontendSettings;
+
+		settingsStore.moduleSettings = {
+			mcp: {
+				mcpAccessEnabled: true,
+				mcpManagedByEnv: false,
+				autoExposeNewWorkflows: false,
+			},
+		};
+
+		mcpStore.getAllOAuthClients.mockResolvedValue([]);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	const revokeAndConfirm = async (getByTestId: (id: string) => HTMLElement) => {
+		await userEvent.click(getByTestId('stub-revoke-client'));
+
+		await waitFor(() => {
+			expect(
+				within(document.body).getByText('Revoke access for "Claude Code"?'),
+			).toBeInTheDocument();
+		});
+
+		await userEvent.click(within(document.body).getByRole('button', { name: 'Revoke' }));
+	};
+
+	it('should redirect to the MCP settings view when MCP is disabled', async () => {
+		settingsStore.moduleSettings = {
+			mcp: {
+				mcpAccessEnabled: false,
+				mcpManagedByEnv: false,
+				autoExposeNewWorkflows: false,
+			},
+		};
+
+		createComponent({ pinia });
+		await nextTick();
+
+		expect(routerReplace).toHaveBeenCalledWith({ name: MCP_SETTINGS_VIEW });
+		expect(mcpStore.getAllOAuthClients).not.toHaveBeenCalled();
+	});
+
+	it('should fetch the clients on mount and render the table', async () => {
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		expect(getByTestId('mcp-oauth-clients-table')).toBeVisible();
+		expect(mcpStore.getAllOAuthClients).toHaveBeenCalled();
+	});
+
+	it('should confirm before revoking and pass the consent owner to the store', async () => {
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		await userEvent.click(getByTestId('stub-revoke-client'));
+
+		// nothing is revoked until the dialog is confirmed
+		await waitFor(() => {
+			expect(
+				within(document.body).getByText('Revoke access for "Claude Code"?'),
+			).toBeInTheDocument();
+		});
+		expect(mcpStore.removeOAuthClient).not.toHaveBeenCalled();
+
+		await userEvent.click(within(document.body).getByRole('button', { name: 'Revoke' }));
+
+		await waitFor(() => {
+			// The clients page shows the list, so it lets the store refetch it.
+			expect(mcpStore.removeOAuthClient).toHaveBeenCalledWith('client-1', 'user-2', {
+				refreshList: true,
+			});
+		});
+	});
+
+	it('should track the revoke once it succeeds, not when the dialog opens', async () => {
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		await userEvent.click(getByTestId('stub-revoke-client'));
+
+		await waitFor(() => {
+			expect(
+				within(document.body).getByText('Revoke access for "Claude Code"?'),
+			).toBeInTheDocument();
+		});
+		expect(trackSpy).not.toHaveBeenCalledWith(
+			TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS,
+			expect.anything(),
+		);
+
+		await userEvent.click(within(document.body).getByRole('button', { name: 'Revoke' }));
+
+		await waitFor(() => {
+			expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS, {
+				client_id: 'client-1',
+				client_brand: 'claude',
+				client_type: 'cli',
+				revoked_for_other: true,
+			});
+		});
+	});
+
+	it("should report revoked_for_other as false when the grant is the current user's own", async () => {
+		usersStore.currentUser = mock<IUser>({ id: 'user-2' });
+
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		await revokeAndConfirm(getByTestId);
+
+		await waitFor(() => {
+			expect(trackSpy).toHaveBeenCalledWith(
+				TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS,
+				expect.objectContaining({ revoked_for_other: false }),
+			);
+		});
+	});
+
+	it('should track the switch to the instance-wide clients tab', async () => {
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		expect(trackSpy).not.toHaveBeenCalledWith(
+			TELEMETRY_EVENT.MCP.USER_VIEWED_ALL_MCP_CLIENTS,
+			expect.anything(),
+		);
+
+		await userEvent.click(getByTestId('stub-ownership-all'));
+
+		await waitFor(() => {
+			expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_VIEWED_ALL_MCP_CLIENTS, {});
+		});
+	});
+
+	it('should reflect a tab switch in the URL before the fetch settles', async () => {
+		// Keep the fetch pending: the URL must follow the user's choice, not the
+		// (possibly slower, possibly superseded) response.
+		mcpStore.setOAuthClientsOwnership.mockReturnValue(new Promise<void>(() => {}));
+
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		await userEvent.click(getByTestId('stub-ownership-all'));
+
+		expect(routerReplace).toHaveBeenCalledWith({ query: { tab: 'all' } });
+	});
+
+	describe('?tab deep link', () => {
+		it("should open everyone's clients for a manager", async () => {
+			rbacStore.hasScope.mockReturnValue(true);
+			route.query = { tab: 'all' };
+
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.setOAuthClientsOwnership).toHaveBeenCalledWith('all');
+			});
+			expect(mcpStore.getAllOAuthClients).not.toHaveBeenCalled();
+			expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_VIEWED_ALL_MCP_CLIENTS, {});
+		});
+
+		it("should stay on the user's own clients without mcp:manage", async () => {
+			rbacStore.hasScope.mockReturnValue(false);
+			route.query = { tab: 'all' };
+
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.getAllOAuthClients).toHaveBeenCalled();
+			});
+			expect(mcpStore.setOAuthClientsOwnership).not.toHaveBeenCalled();
+		});
+
+		it("should switch back to the user's own clients when the store is on everyone's", async () => {
+			rbacStore.hasScope.mockReturnValue(true);
+			mcpStore.oauthClientsOwnership = 'all';
+			route.query = { tab: 'mine' };
+
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.setOAuthClientsOwnership).toHaveBeenCalledWith('mine');
+			});
+		});
+
+		it('should just fetch when the requested tab is already active', async () => {
+			rbacStore.hasScope.mockReturnValue(true);
+			mcpStore.oauthClientsOwnership = 'all';
+			route.query = { tab: 'all' };
+
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.getAllOAuthClients).toHaveBeenCalled();
+			});
+			expect(mcpStore.setOAuthClientsOwnership).not.toHaveBeenCalled();
+		});
+	});
+});

package/src/SettingsMCPClientsView.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from '@n8n/i18n';
+import { N8nSettingsLayout, N8nSettingsPageHeader } from '@n8n/design-system';
+
+import { useDocumentTitle } from '@n8n/composables/useDocumentTitle';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import { useToast } from '@n8n/composables/useToast';
+import type { OAuthClientFilters } from './clients.utils';
+import OAuthClientsTable from './components/tabs/OAuthClientsTable.vue';
+import RevokeOAuthClientConfirmModal from './components/RevokeOAuthClientConfirmModal.vue';
+import { LOADING_INDICATOR_TIMEOUT, MCP_DOCS_PAGE_URL, MCP_SETTINGS_VIEW } from './mcp.constants';
+import { useMCPStore } from './mcp.store';
+import { useMcp } from './composables/useMcp';
+import { useOAuthClientRevoke } from './composables/useOAuthClientRevoke';
+import { useRBACStore } from '@n8n/stores/rbac.store';
+
+const i18n = useI18n();
+const toast = useToast();
+const mcp = useMcp();
+const route = useRoute();
+const router = useRouter();
+const documentTitle = useDocumentTitle({
+	releaseChannel: useSettingsStore().settings.releaseChannel,
+});
+const mcpStore = useMCPStore();
+const rbacStore = useRBACStore();
+
+const oAuthClientsLoading = ref(false);
+const { revokeClient, revoking, isRevokingForOther, requestRevoke, cancelRevoke, confirmRevoke } =
+	useOAuthClientRevoke();
+
+const fetchoAuthCLients = async () => {
+	try {
+		oAuthClientsLoading.value = true;
+		await mcpStore.getAllOAuthClients();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.fetching.oAuthClients'));
+	} finally {
+		setTimeout(() => {
+			oAuthClientsLoading.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+const onOwnershipChange = async (ownership: 'mine' | 'all') => {
+	// Reflect the tab in the URL right away (replace keeps history clean /
+	// back-button safe). Written before the fetch: the tab is the user's choice,
+	// not the fetch result, so a slow earlier fetch can't stamp a stale tab later.
+	if (route.query.tab !== ownership) {
+		void router.replace({ query: { ...route.query, tab: ownership } });
+	}
+	try {
+		oAuthClientsLoading.value = true;
+		await mcpStore.setOAuthClientsOwnership(ownership);
+		if (ownership === 'all') {
+			mcp.trackViewedAllClients();
+		}
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.fetching.oAuthClients'));
+	} finally {
+		setTimeout(() => {
+			oAuthClientsLoading.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+/**
+ * `?tab=all` deep-links to everyone's clients (the overview sends managers here
+ * when they have none of their own). Only honoured for `mcp:manage` holders: the
+ * endpoint rejects the instance-wide list for anyone else.
+ */
+const requestedOwnership = (): 'mine' | 'all' | undefined => {
+	if (route.query.tab === 'all') return rbacStore.hasScope('mcp:manage') ? 'all' : 'mine';
+	if (route.query.tab === 'mine') return 'mine';
+	return undefined;
+};
+
+const onClientsFiltersChange = async (filters: OAuthClientFilters) => {
+	try {
+		await mcpStore.setOAuthClientsFilters(filters);
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.fetching.oAuthClients'));
+	}
+};
+
+const onClientsOptionsChange = async (options: { page: number; itemsPerPage: number }) => {
+	try {
+		await mcpStore.setOAuthClientsPagination(options.page, options.itemsPerPage);
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.fetching.oAuthClients'));
+	}
+};
+
+const onBack = () => {
+	void router.push({ name: MCP_SETTINGS_VIEW });
+};
+
+onMounted(async () => {
+	documentTitle.set(i18n.baseText('settings.mcp.connectedClients.title'));
+	if (!mcpStore.mcpAccessEnabled) {
+		await router.replace({ name: MCP_SETTINGS_VIEW });
+		return;
+	}
+	const ownership = requestedOwnership();
+	if (ownership && ownership !== mcpStore.oauthClientsOwnership) {
+		await onOwnershipChange(ownership);
+		return;
+	}
+	await fetchoAuthCLients();
+});
+</script>
+
+<template>
+	<N8nSettingsLayout
+		full-width
+		show-back
+		:back-label="i18n.baseText('settings.mcp.back')"
+		:class="$style.layout"
+		@back="onBack"
+	>
+		<N8nSettingsPageHeader
+			:title="i18n.baseText('settings.mcp.connectedClients.title')"
+			:description="i18n.baseText('settings.mcp.connectedClients.description')"
+			:docs-url="MCP_DOCS_PAGE_URL"
+		/>
+		<div data-test-id="mcp-clients-view">
+			<OAuthClientsTable
+				:data-test-id="'mcp-oauth-clients-table'"
+				:clients="mcpStore.oauthClients"
+				:scope-tools="mcpStore.oauthClientScopeTools"
+				:loading="oAuthClientsLoading"
+				@revoke-client="requestRevoke"
+				@update:ownership="onOwnershipChange"
+				@update:filters="onClientsFiltersChange"
+				@update:options="onClientsOptionsChange"
+				@refresh="fetchoAuthCLients"
+			/>
+		</div>
+
+		<RevokeOAuthClientConfirmModal
+			:client="revokeClient"
+			:open="!!revokeClient"
+			:loading="revoking"
+			:revoking-for-other="!!revokeClient && isRevokingForOther(revokeClient)"
+			@confirm="confirmRevoke"
+			@cancel="cancelRevoke"
+			@update:open="cancelRevoke"
+		/>
+	</N8nSettingsLayout>
+</template>
+
+<style lang="scss" module>
+/* Collapse the layout's own top inset; the settings shell already pads the page top. */
+.layout {
+	padding-top: 0;
+}
+
+/* Pin the back action to the top-left of the settings area (the shell's
+   content container is position: relative), independent of the centered column. */
+.layout > div:first-child {
+	position: absolute;
+	top: var(--spacing--lg);
+	left: var(--spacing--lg);
+	width: auto;
+}
+</style>