@n8n/frontend-module-mcp 0.1.0

package/src/SettingsMCPWorkflowsView.test.ts

@@ -0,0 +1,274 @@
+import { nextTick } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { capabilities, capabilityRegistry } from '@n8n/frontend-module-sdk';
+import { createComponentRenderer, mockedStore, type MockedStore } from '@n8n/frontend-test-utils';
+import SettingsMCPWorkflowsView from './SettingsMCPWorkflowsView.vue';
+import { useMCPStore } from './mcp.store';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import type { FrontendSettings } from '@n8n/api-types';
+import { WORKFLOW_DESCRIPTION_MODAL_KEY } from '@n8n/frontend-constants/workflows';
+import { MCP_SETTINGS_VIEW } from './mcp.constants';
+import { createWorkflow } from './mcp.test.utils';
+import type { McpWorkflow } from './mcp.types';
+
+const { routerPush, routerReplace } = vi.hoisted(() => ({
+	routerPush: vi.fn(),
+	routerReplace: vi.fn(),
+}));
+
+vi.mock('vue-router', async (importOriginal) => ({
+	...(await importOriginal()),
+	useRouter: () => ({ push: routerPush, replace: routerReplace }),
+	useRoute: vi.fn(() => ({
+		params: {},
+	})),
+	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>;
+const modalOpeners = { openModal: vi.fn(), openModalWithData: vi.fn() };
+
+const createComponent = createComponentRenderer(SettingsMCPWorkflowsView, {
+	global: {
+		stubs: {
+			WorkflowsTable: {
+				inheritAttrs: true,
+				template:
+					"<div><button data-test-id=\"workflows-table-page-2\" @click=\"$emit('update:options', { page: 1, itemsPerPage: 10, sortBy: [] })\">Page 2</button><button data-test-id=\"workflows-table-page-size-50\" @click=\"$emit('update:options', { page: 3, itemsPerPage: 50, sortBy: [] })\">Page size 50</button><button data-test-id=\"workflows-table-bulk-remove\" @click=\"$emit('bulkRemoveMcpAccess', ['wf-1', 'wf-2'])\">Bulk remove</button><button data-test-id=\"workflows-table-edit-description\" @click=\"$emit('updateDescription', { id: '1', name: 'Workflow 1', description: 'Old' })\">Edit description</button>Workflows Table</div>",
+			},
+			MCPConnectWorkflowsModal: {
+				props: ['open', 'enableMcpAccess'],
+				template:
+					'<div v-if="open" data-test-id="mcp-connect-workflows-dialog-stub"><button data-test-id="stub-enable-access" @click="enableMcpAccess([\'wf-1\', \'wf-2\'])">Enable</button></div>',
+			},
+		},
+	},
+});
+
+const workflowPage = (data: McpWorkflow[] = []) => ({ data, count: data.length });
+
+describe('SettingsMCPWorkflowsView', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		mcpStore = mockedStore(useMCPStore);
+		settingsStore = mockedStore(useSettingsStore);
+		capabilityRegistry.provide(capabilities.modalOpeners, modalOpeners);
+
+		settingsStore.settings = {
+			enterprise: {},
+		} as FrontendSettings;
+
+		settingsStore.moduleSettings = {
+			mcp: {
+				mcpAccessEnabled: true,
+				mcpManagedByEnv: false,
+				autoExposeNewWorkflows: false,
+			},
+		};
+
+		mcpStore.fetchWorkflowsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+			...workflowPage(),
+			page,
+		}));
+	});
+
+	afterEach(() => {
+		capabilityRegistry.clear();
+		vi.clearAllMocks();
+	});
+
+	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.fetchWorkflowsAvailableForMCPPage).not.toHaveBeenCalled();
+	});
+
+	describe('Workflow pagination', () => {
+		beforeEach(() => {
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+				...workflowPage([createWorkflow({ id: '1', name: 'Workflow 1' })]),
+				page,
+			}));
+		});
+
+		it('should fetch the first workflow page on mount', async () => {
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+		});
+
+		it('should fetch the selected workflow page when table options change', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('workflows-table-page-2'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(2, 10);
+			});
+		});
+
+		it('should reset to first page when workflow table page size changes', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('workflows-table-page-size-50'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(1, 50);
+			});
+		});
+	});
+
+	describe('Connect Workflows button', () => {
+		it('should not show the button when there are no workflows', async () => {
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+				...workflowPage(),
+				page,
+			}));
+
+			const { queryByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(queryByTestId('mcp-connect-workflows-header-button')).not.toBeInTheDocument();
+			});
+		});
+
+		it('should open the Connect Workflows modal when the button is clicked', async () => {
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+				...workflowPage([createWorkflow({ id: '1', name: 'Workflow 1' })]),
+				page,
+			}));
+
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-header-button')).toBeVisible();
+			});
+			await userEvent.click(getByTestId('mcp-connect-workflows-header-button'));
+
+			expect(getByTestId('mcp-connect-workflows-dialog-stub')).toBeInTheDocument();
+		});
+	});
+
+	describe('Bulk workflow actions', () => {
+		beforeEach(() => {
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+				...workflowPage([createWorkflow({ id: '1', name: 'Workflow 1' })]),
+				page,
+			}));
+			mcpStore.toggleWorkflowsMcpAccess.mockResolvedValue({
+				updatedCount: 2,
+				unchangedCount: 0,
+				skippedCount: 0,
+				failedCount: 0,
+				updatedIds: ['wf-1', 'wf-2'],
+				unchangedIds: [],
+			});
+		});
+
+		it('should bulk-enable the workflows selected in the Connect Workflows modal', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-header-button')).toBeVisible();
+			});
+			await userEvent.click(getByTestId('mcp-connect-workflows-header-button'));
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('stub-enable-access'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			expect(mcpStore.toggleWorkflowsMcpAccess).toHaveBeenCalledWith(
+				{ workflowIds: ['wf-1', 'wf-2'] },
+				true,
+			);
+		});
+
+		it('should disable MCP access for bulk-selected workflows and refresh the table', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('workflows-table-bulk-remove'));
+
+			await waitFor(() => {
+				expect(mcpStore.toggleWorkflowsMcpAccess).toHaveBeenCalledWith(
+					{ workflowIds: ['wf-1', 'wf-2'] },
+					false,
+				);
+			});
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('Edit description', () => {
+		it('should open the workflow description modal through the modal openers capability', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			await userEvent.click(getByTestId('workflows-table-edit-description'));
+
+			expect(modalOpeners.openModalWithData).toHaveBeenCalledWith({
+				name: WORKFLOW_DESCRIPTION_MODAL_KEY,
+				data: expect.objectContaining({
+					workflowId: '1',
+					workflowName: 'Workflow 1',
+					workflowDescription: 'Old',
+					onSave: expect.any(Function),
+				}),
+			});
+		});
+	});
+
+	describe('Refresh button', () => {
+		it('should refresh the workflows list', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			mcpStore.fetchWorkflowsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('mcp-workflows-refresh-button'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchWorkflowsAvailableForMCPPage).toHaveBeenCalled();
+			});
+		});
+	});
+});

package/src/SettingsMCPWorkflowsView.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from '@n8n/i18n';
+import { capabilities, capabilityRegistry } from '@n8n/frontend-module-sdk';
+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 { useToast } from '@n8n/composables/useToast';
+import { WORKFLOW_DESCRIPTION_MODAL_KEY } from '@n8n/frontend-constants/workflows';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import type { McpWorkflow } from './mcp.types';
+import { useMCPStore } from './mcp.store';
+import { LOADING_INDICATOR_TIMEOUT, MCP_DOCS_PAGE_URL, MCP_SETTINGS_VIEW } from './mcp.constants';
+import WorkflowsTable from './components/tabs/WorkflowsTable.vue';
+import MCPConnectWorkflowsModal from './modals/MCPConnectWorkflowsModal.vue';
+
+const i18n = useI18n();
+const toast = useToast();
+const telemetry = useTelemetry();
+const router = useRouter();
+const documentTitle = useDocumentTitle({
+	releaseChannel: useSettingsStore().settings.releaseChannel,
+});
+const mcpStore = useMCPStore();
+
+const workflowsLoading = ref(false);
+const showConnectWorkflowsDialog = ref(false);
+const availableWorkflows = ref<McpWorkflow[]>([]);
+const availableWorkflowsTotal = ref(0);
+const workflowsTableState = ref<TableOptions>({
+	page: 0,
+	itemsPerPage: 10,
+	sortBy: [],
+});
+const workflowsTableItemsPerPage = ref(workflowsTableState.value.itemsPerPage);
+
+const showConnectWorkflowsButton = computed(() => availableWorkflowsTotal.value > 0);
+
+const showMcpAccessUpdatedToast = (count: number, enabled: boolean) => {
+	toast.showMessage({
+		type: 'success',
+		title: i18n.baseText(
+			enabled
+				? 'settings.mcp.workflows.enableAccess.success.title'
+				: 'settings.mcp.workflows.removeAccess.success.title',
+			{
+				adjustToNumber: count,
+				interpolate: { count: String(count) },
+			},
+		),
+	});
+};
+
+const fetchAvailableWorkflows = async () => {
+	workflowsLoading.value = true;
+	try {
+		const response = await mcpStore.fetchWorkflowsAvailableForMCPPage(
+			workflowsTableState.value.page + 1,
+			workflowsTableState.value.itemsPerPage,
+		);
+		if (response.page !== workflowsTableState.value.page + 1) {
+			workflowsTableState.value = { ...workflowsTableState.value, page: response.page - 1 };
+		}
+		availableWorkflows.value = response.data;
+		availableWorkflowsTotal.value = response.count;
+	} catch (error) {
+		toast.showError(error, i18n.baseText('workflows.list.error.fetching'));
+	} finally {
+		setTimeout(() => {
+			workflowsLoading.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+const refreshWorkflowsFromFirstPage = async () => {
+	workflowsTableState.value = { ...workflowsTableState.value, page: 0 };
+	await fetchAvailableWorkflows();
+};
+
+const onWorkflowsTableUpdate = async (options: TableOptions) => {
+	const pageSizeChanged = options.itemsPerPage !== workflowsTableItemsPerPage.value;
+	workflowsTableState.value = { ...options, page: pageSizeChanged ? 0 : options.page };
+	workflowsTableItemsPerPage.value = options.itemsPerPage;
+	await fetchAvailableWorkflows();
+};
+
+const onToggleWorkflowMCPAccess = async (workflowId: string, isEnabled: boolean) => {
+	try {
+		await mcpStore.toggleWorkflowMcpAccess(workflowId, isEnabled);
+		if (isEnabled) {
+			await refreshWorkflowsFromFirstPage();
+		} else {
+			showMcpAccessUpdatedToast(1, false);
+			await fetchAvailableWorkflows();
+		}
+	} catch (error) {
+		toast.showError(error, i18n.baseText('workflowSettings.toggleMCP.error.title'));
+		throw error;
+	}
+};
+
+const onBulkEnableWorkflowsMCPAccess = async (workflowIds: string[]) => {
+	try {
+		const response = await mcpStore.toggleWorkflowsMcpAccess({ workflowIds }, true);
+		showMcpAccessUpdatedToast(response.updatedCount, true);
+		await refreshWorkflowsFromFirstPage();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('workflowSettings.toggleMCP.error.title'));
+		throw error;
+	}
+};
+
+const onBulkRemoveWorkflowsMCPAccess = async (workflowIds: string[]) => {
+	try {
+		const response = await mcpStore.toggleWorkflowsMcpAccess({ workflowIds }, false);
+		showMcpAccessUpdatedToast(response.updatedCount, false);
+		await fetchAvailableWorkflows();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('workflowSettings.toggleMCP.error.title'));
+	}
+};
+
+const onUpdateDescription = (workflow: McpWorkflow) => {
+	capabilityRegistry.use(capabilities.modalOpeners).openModalWithData({
+		name: WORKFLOW_DESCRIPTION_MODAL_KEY,
+		data: {
+			workflowId: workflow.id,
+			workflowName: workflow.name,
+			workflowDescription: workflow.description ?? '',
+			onSave: (updatedDescription: string | null) => {
+				const index = availableWorkflows.value.findIndex((w) => w.id === workflow.id);
+				if (index !== -1) {
+					availableWorkflows.value[index] = {
+						...availableWorkflows.value[index],
+						description: updatedDescription ?? undefined,
+					};
+				}
+			},
+		},
+	});
+};
+
+const openConnectWorkflowsModal = () => {
+	showConnectWorkflowsDialog.value = true;
+	telemetry.track('User clicked connect workflows from mcp settings');
+};
+
+const onBack = () => {
+	void router.push({ name: MCP_SETTINGS_VIEW });
+};
+
+onMounted(async () => {
+	documentTitle.set(i18n.baseText('settings.mcp.workflowsExposed.page.title'));
+	if (!mcpStore.mcpAccessEnabled) {
+		await router.replace({ name: MCP_SETTINGS_VIEW });
+		return;
+	}
+	await fetchAvailableWorkflows();
+});
+</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.workflowsExposed.page.title')"
+			:description="i18n.baseText('settings.mcp.workflowsExposed.page.description')"
+			:docs-url="MCP_DOCS_PAGE_URL"
+		/>
+		<div data-test-id="mcp-workflows-view">
+			<div :class="$style.actions">
+				<N8nButton
+					v-if="showConnectWorkflowsButton"
+					variant="solid"
+					:label="i18n.baseText('settings.mcp.connectWorkflows')"
+					data-test-id="mcp-connect-workflows-header-button"
+					size="small"
+					@click="openConnectWorkflowsModal"
+				/>
+				<N8nTooltip :content="i18n.baseText('settings.mcp.refresh.tooltip')">
+					<N8nButton
+						variant="subtle"
+						icon-only
+						data-test-id="mcp-workflows-refresh-button"
+						size="small"
+						icon="refresh-cw"
+						@click="fetchAvailableWorkflows"
+					/>
+				</N8nTooltip>
+			</div>
+			<WorkflowsTable
+				v-model:table-options="workflowsTableState"
+				:workflows="availableWorkflows"
+				:total-count="availableWorkflowsTotal"
+				:loading="workflowsLoading"
+				@remove-mcp-access="(workflow) => onToggleWorkflowMCPAccess(workflow.id, false)"
+				@bulk-remove-mcp-access="onBulkRemoveWorkflowsMCPAccess"
+				@connect-workflows="openConnectWorkflowsModal"
+				@update-description="onUpdateDescription"
+				@update:options="onWorkflowsTableUpdate"
+				@refresh="fetchAvailableWorkflows"
+			/>
+		</div>
+		<MCPConnectWorkflowsModal
+			v-model:open="showConnectWorkflowsDialog"
+			:enable-mcp-access="onBulkEnableWorkflowsMCPAccess"
+		/>
+	</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/__tests__/design-system-icons.test.ts

@@ -0,0 +1,24 @@
+import { N8nIcon } from '@n8n/design-system';
+import { render } from '@testing-library/vue';
+
+/**
+ * A build-config test, not a feature test. `@n8n/design-system` is consumed from source, so its
+ * two icon mechanisms are this package's problem, and each package carries its own
+ * `vite.config.ts`. Both cases fail loudly when a plugin goes missing from that file:
+ *
+ *   - `box` comes from `~icons/lucide/box`, which only `unplugin-icons` resolves.
+ *   - `webhook` comes from `custom/webhook.svg`, which only `svgLoader` turns into a component.
+ *     Without it the import is a data-URI string, which Vue renders as a tag name.
+ *
+ * Keep this test while the module renders any design-system component.
+ */
+describe('design-system icons', () => {
+	it.each([
+		['a lucide icon', 'box'],
+		['a custom svg icon', 'webhook'],
+	])('renders %s', (_case, icon) => {
+		const { container } = render(N8nIcon, { props: { icon } });
+
+		expect(container.querySelector('svg')).not.toBeNull();
+	});
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,4 @@
+// The shared frontend test harness: the jsdom environment, english messages, and a fresh pinia
+// per test. It lives in `@n8n/frontend-test-utils` rather than in `@n8n/vitest-config`, because
+// `@n8n/i18n` devDepends on the latter and importing i18n there closes a cycle in the turbo graph.
+import '@n8n/frontend-test-utils/setup';

package/src/assets/client-icons/claude.svg

@@ -0,0 +1 @@
+<svg fill="#D97757" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"/></svg>

package/src/assets/client-icons/codex.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Codex</title><defs><linearGradient id="codex-blossom-gradient" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9C8CFF"/><stop offset="1" stop-color="#3A45F5"/></linearGradient></defs><g fill="url(#codex-blossom-gradient)"><circle cx="12" cy="12" r="5"/><circle cx="12" cy="7.4" r="4.4"/><circle cx="15.6" cy="9.13" r="4.4"/><circle cx="16.48" cy="13.02" r="4.4"/><circle cx="14" cy="16.14" r="4.4"/><circle cx="10" cy="16.14" r="4.4"/><circle cx="7.52" cy="13.02" r="4.4"/><circle cx="8.4" cy="9.13" r="4.4"/></g><path d="M9 8.4 L12.9 12 L9 15.6" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.7 15.1 L17 15.1" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round"/></svg>

package/src/assets/client-icons/cursor.svg

@@ -0,0 +1 @@
+<svg fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"/></svg>

package/src/assets/client-icons/gemini.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><defs><linearGradient id="gemini-spark-gradient" x1="3" y1="4" x2="21" y2="20" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4285F4"/><stop offset="0.5" stop-color="#9B72CB"/><stop offset="1" stop-color="#D96570"/></linearGradient></defs><path fill="url(#gemini-spark-gradient)" d="M12 1 Q12 12 23 12 Q12 12 12 23 Q12 12 1 12 Q12 12 12 1 Z"/></svg>

package/src/assets/client-icons/mistral.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mistral AI</title><path fill="#FFD800" d="M3.429 3.429h3.428v3.428H3.429zM17.143 3.429h3.428v3.428h-3.428z"/><path fill="#FFAF00" d="M3.429 6.857h6.857v3.429H3.429zM13.714 6.857h6.857v3.429h-6.857z"/><path fill="#FF8205" d="M3.429 10.286h17.142v3.428H3.429z"/><path fill="#FA500F" d="M3.429 13.714h3.428v3.429H3.429zM10.286 13.714h3.428v3.429h-3.428zM17.143 13.714h3.428v3.429h-3.428z"/><path fill="#E10500" d="M0 17.143h6.857v3.428H0zM10.286 17.143h3.428v3.428h-3.428zM17.143 17.143H24v3.428h-6.857z"/></svg>

package/src/assets/client-icons/openai.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.8671 16.3718C37.7746 13.648 37.4621 10.6642 36.0108 8.18661C33.8282 4.38653 29.4407 2.43149 25.1556 3.35151C23.2493 1.20396 20.5105 -0.0173148 17.6392 0.000185533C13.2591 -0.00981468 9.37273 2.81025 8.0252 6.97783C5.21139 7.5541 2.78258 9.31538 1.3613 11.8117C-0.837493 15.6018 -0.336232 20.3794 2.60133 23.6294C1.69381 26.3532 2.00632 29.3371 3.4576 31.8146C5.64015 35.6147 10.0277 37.5697 14.3128 36.6497C16.2179 38.7973 18.9579 40.0185 21.8292 39.9998C26.2118 40.011 30.0994 37.1885 31.4469 33.0171C34.2608 32.4409 36.6896 30.6796 38.1108 28.1833C40.3071 24.3932 39.8046 19.6194 36.8683 16.3693L36.8671 16.3718ZM21.8317 37.386C20.078 37.3885 18.3792 36.7747 17.0329 35.6509C17.0941 35.6185 17.2004 35.5597 17.2691 35.5172L25.2343 30.9171C25.6418 30.6858 25.8918 30.2521 25.8893 29.7833V18.5543L29.2556 20.4981C29.2919 20.5156 29.3157 20.5506 29.3207 20.5906V29.8896C29.3157 34.0247 25.9668 37.3772 21.8317 37.386ZM5.7264 30.5071C4.84763 28.9896 4.53137 27.2108 4.83263 25.4845C4.89138 25.5195 4.99513 25.5832 5.06888 25.6257L13.0341 30.2258C13.4378 30.4621 13.9378 30.4621 14.3428 30.2258L24.0668 24.6107V28.4983C24.0693 28.5383 24.0505 28.577 24.0193 28.602L15.9679 33.2509C12.3815 35.3159 7.80144 34.0884 5.72765 30.5071H5.7264ZM3.6301 13.1205C4.50512 11.6004 5.8864 10.4379 7.53144 9.83415C7.53144 9.9029 7.52769 10.0241 7.52769 10.1092V19.3106C7.52519 19.7781 7.77519 20.2119 8.18145 20.4431L17.9054 26.057L14.5391 28.0008C14.5053 28.0233 14.4628 28.027 14.4253 28.0108L6.37266 23.3582C2.79383 21.2856 1.56631 16.7068 3.62885 13.1217L3.6301 13.1205ZM31.2882 19.5569L21.5642 13.9417L24.9306 11.9992C24.9643 11.9767 25.0068 11.9729 25.0443 11.9892L33.097 16.638C36.6821 18.7093 37.9108 23.2957 35.8395 26.8808C34.9633 28.3983 33.5832 29.5608 31.9395 30.1658V20.6894C31.9432 20.2219 31.6945 19.7894 31.2894 19.5569H31.2882ZM34.6383 14.5142C34.5795 14.478 34.4758 14.4155 34.402 14.373L26.4368 9.77289C26.0331 9.53664 25.5331 9.53664 25.1281 9.77289L15.4041 15.388V11.5004C15.4016 11.4604 15.4204 11.4217 15.4516 11.3967L23.503 6.75158C27.0894 4.68279 31.6745 5.91406 33.742 9.50164C34.6158 11.0167 34.932 12.7905 34.6358 14.5142H34.6383ZM13.5741 21.4431L10.2065 19.4994C10.1702 19.4819 10.1465 19.4468 10.1415 19.4068V10.1079C10.144 5.96781 13.5028 2.61274 17.6429 2.61524C19.3942 2.61524 21.0892 3.23025 22.4355 4.35028C22.3743 4.38278 22.2693 4.44153 22.1992 4.48403L14.2341 9.08413C13.8266 9.31538 13.5766 9.74789 13.5791 10.2167L13.5741 21.4406V21.4431ZM15.4029 17.5006L19.7342 14.9993L24.0655 17.4993V22.5007L19.7342 25.0007L15.4029 22.5007V17.5006Z" fill="black"/>
+</svg>

package/src/assets/client-icons/vscode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><mask id="a" width="128" height="128" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" fill-rule="evenodd" d="M90.767 127.126a7.968 7.968 0 0 0 6.35-.244l26.353-12.681a8 8 0 0 0 4.53-7.209V21.009a8 8 0 0 0-4.53-7.21L97.117 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026L15.6 32.013a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.335 5.335 0 0 0-.006 7.888L20.796 64 1.74 81.387a5.336 5.336 0 0 0 .006 7.887l7.048 6.411a5.327 5.327 0 0 0 6.807.303l21.974-16.68 50.45 46.025a7.96 7.96 0 0 0 2.743 1.793Zm5.252-92.183L57.74 64l38.28 29.058V34.943Z" clip-rule="evenodd"/></mask><g mask="url(#a)"><path fill="#0065A9" d="M123.471 13.82 97.097 1.12A7.973 7.973 0 0 0 88 2.668L1.662 81.387a5.333 5.333 0 0 0 .006 7.887l7.052 6.411a5.333 5.333 0 0 0 6.811.303l103.971-78.875c3.488-2.646 8.498-.158 8.498 4.22v-.306a8.001 8.001 0 0 0-4.529-7.208Z"/><g filter="url(#b)"><path fill="#007ACC" d="m123.471 114.181-26.374 12.698A7.973 7.973 0 0 1 88 125.333L1.662 46.613a5.333 5.333 0 0 1 .006-7.887l7.052-6.411a5.333 5.333 0 0 1 6.811-.303l103.971 78.874c3.488 2.647 8.498.159 8.498-4.219v.306a8.001 8.001 0 0 1-4.529 7.208Z"/></g><g filter="url(#c)"><path fill="#1F9CF0" d="M97.098 126.882A7.977 7.977 0 0 1 88 125.333c2.952 2.952 8 .861 8-3.314V5.98c0-4.175-5.048-6.266-8-3.313a7.977 7.977 0 0 1 9.098-1.549L123.467 13.8A8 8 0 0 1 128 21.01v85.982a8 8 0 0 1-4.533 7.21l-26.369 12.681Z"/></g><path fill="url(#d)" fill-rule="evenodd" d="M90.69 127.126a7.968 7.968 0 0 0 6.349-.244l26.353-12.681a8 8 0 0 0 4.53-7.21V21.009a8 8 0 0 0-4.53-7.21L97.039 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026-21.974-16.68a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.336 5.336 0 0 0-.006 7.888L20.718 64 1.662 81.386a5.335 5.335 0 0 0 .006 7.888l7.048 6.411a5.328 5.328 0 0 0 6.807.303l21.975-16.681 50.45 46.026a7.959 7.959 0 0 0 2.742 1.793Zm5.252-92.184L57.662 64l38.28 29.057V34.943Z" clip-rule="evenodd" opacity="0.25" style="mix-blend-mode:overlay"/></g><defs><filter id="b" width="144.744" height="113.408" x="-8.41115" y="22.5944" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.16667"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow_1_36"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_36" result="shape"/></filter><filter id="c" width="56.6667" height="144.007" x="79.6667" y="-8.0035" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.16667"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow_1_36"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_36" result="shape"/></filter><linearGradient id="d" x1="63.9222" x2="63.9222" y1="0.329902" y2="127.67" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>

package/src/clients.utils.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest';
+
+import { MCP_INSTANCE_SCOPES } from '@n8n/api-types';
+import { i18n } from '@n8n/i18n';
+
+import { getAccessSummary, getClientBrand, isFullAccessGrant } from './clients.utils';
+
+describe('getClientBrand', () => {
+	it.each([
+		['Claude Code', 'cli'],
+		['Claude', 'assistant'],
+		['Cursor', 'ide'],
+		['Visual Studio Code', 'editor'],
+		['Codex CLI', 'cli'],
+		['ChatGPT', 'assistant'],
+		['Mistral Vibe', 'assistant'],
+		['Vibe', 'assistant'],
+		['Some Unknown Client', null],
+	])('derives the type of %s as %s', (name, type) => {
+		expect(getClientBrand(name).type).toBe(type);
+	});
+
+	it('resolves a logo for recognized brands and none for unknown clients', () => {
+		expect(getClientBrand('Claude Code').icon).not.toBeNull();
+		expect(getClientBrand('Cursor').icon).not.toBeNull();
+		expect(getClientBrand('Mistral Vibe').icon).not.toBeNull();
+		expect(getClientBrand('Some Unknown Client').icon).toBeNull();
+	});
+});
+
+describe('isFullAccessGrant', () => {
+	const nonAgentScopes = MCP_INSTANCE_SCOPES.filter((scope) => !scope.startsWith('agent:'));
+
+	it('treats a grant covering every scope as full access', () => {
+		expect(isFullAccessGrant([...MCP_INSTANCE_SCOPES])).toBe(true);
+	});
+
+	it('treats an empty or partial grant as not full access', () => {
+		expect(isFullAccessGrant([])).toBe(false);
+		expect(isFullAccessGrant(['workflow:read'])).toBe(false);
+	});
+
+	it('counts a grant as full access when it covers every scope the instance offers', () => {
+		expect(isFullAccessGrant(nonAgentScopes, nonAgentScopes)).toBe(true);
+	});
+
+	it('still reports missing scopes that the instance does offer', () => {
+		expect(isFullAccessGrant(['workflow:read'], nonAgentScopes)).toBe(false);
+	});
+});
+
+describe('getAccessSummary', () => {
+	it('reports a grant with no scopes as no access', () => {
+		expect(getAccessSummary(i18n, { scopes: [] })).toBe('No access');
+	});
+
+	it('reports a grant covering every offered scope as full access', () => {
+		expect(getAccessSummary(i18n, { scopes: [...MCP_INSTANCE_SCOPES] })).toBe('Full access');
+		expect(
+			getAccessSummary(i18n, { scopes: ['workflow:read', 'execution:read'] }, [
+				'workflow:read',
+				'execution:read',
+			]),
+		).toBe('Full access');
+	});
+
+	it('lists up to two scope labels verbatim', () => {
+		expect(getAccessSummary(i18n, { scopes: ['workflow:read'] })).toBe('List workflows');
+		expect(getAccessSummary(i18n, { scopes: ['workflow:read', 'execution:read'] })).toBe(
+			'List workflows, Get execution details',
+		);
+	});
+
+	it('collapses the remaining scopes into a +N overflow', () => {
+		expect(
+			getAccessSummary(i18n, {
+				scopes: ['workflow:read', 'execution:read', 'workflow:write', 'workflow:execute'],
+			}),
+		).toBe('List workflows, Get execution details +2');
+	});
+
+	it('renders unknown scopes verbatim', () => {
+		expect(getAccessSummary(i18n, { scopes: ['custom:thing'] })).toBe('custom:thing');
+	});
+});