@n8n/frontend-module-inbox 0.1.0 → 0.2.1

package/src/inbox.store.test.ts

@@ -1,4 +1,9 @@
-import type { InboxItem, ListInboxResponse } from '@n8n/api-types';
+import type {
+	InboxItem,
+	InboxSelfHealingItem,
+	InboxWorkflowReviewItem,
+	ListInboxResponse,
+} from '@n8n/api-types';
 import { ResponseError } from '@n8n/rest-api-client';
 import { useSettingsStore } from '@n8n/stores/settings.store';
 import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
@@ -11,6 +16,21 @@ vi.mock('./inbox.api');
 const waitingOrClosedRequest = vi.fn<typeof api.fetchInbox>();
 const authoredRequest = vi.fn<typeof api.fetchInbox>();
 
+function result(id: string): InboxSelfHealingItem {
+	return {
+		id,
+		type: 'self_healing_result',
+		state: 'open',
+		projectId: 'project',
+		workflowId: 'workflow',
+		workflowName: 'Workflow',
+		summary: 'Review the proposed fix',
+		outcome: 'fix_ready',
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+		completedAt: '2026-01-01T00:00:00.000Z',
+	};
+}
 function page(
 	data: InboxItem[] = [],
 	overrides: Partial<ListInboxResponse> = {},
@@ -28,7 +48,7 @@ function page(
 function enableInbox() {
 	useSettingsStore().settings.inbox = {
 		enabled: true,
-		availableTypes: ['workflow_review'],
+		availableTypes: ['workflow_review', 'self_healing_result'],
 		failedTypes: [],
 	};
 }
@@ -65,7 +85,7 @@ describe('Inbox list requests', () => {
 		const pending = createDeferredPromise<ListInboxResponse>();
 		const request = vi
 			.fn()
-			.mockResolvedValueOnce(page([reviewItem('first')]))
+			.mockResolvedValueOnce(page([result('first')]))
 			.mockReturnValueOnce(pending.promise);
 		const slice = createInboxListSlice(request, vi.fn());
 		await slice.fetchList();
@@ -81,14 +101,14 @@ describe('Inbox list requests', () => {
 		const pending = createDeferredPromise<ListInboxResponse>();
 		const request = vi
 			.fn()
-			.mockResolvedValueOnce(page([reviewItem('first')], { hasMore: true, nextCursor: 'page-2' }))
+			.mockResolvedValueOnce(page([result('first')], { hasMore: true, nextCursor: 'page-2' }))
 			.mockReturnValueOnce(pending.promise)
-			.mockResolvedValueOnce(page([reviewItem('newest')]));
+			.mockResolvedValueOnce(page([result('newest')]));
 		const slice = createInboxListSlice(request, vi.fn());
 		await slice.fetchList();
 		const loadMore = slice.loadMore();
 		await slice.fetchList();
-		pending.resolve(page([reviewItem('older')]));
+		pending.resolve(page([result('older')]));
 		await loadMore;
 		expect(slice.items.map((item) => item.id)).toEqual(['newest']);
 		expect(slice.loadingMore).toBe(false);
@@ -99,10 +119,10 @@ describe('Inbox list requests', () => {
 		const request = vi
 			.fn()
 			.mockResolvedValueOnce(
-				page([reviewItem('first')], { ...partial, hasMore: true, nextCursor: 'partial-page' }),
+				page([result('first')], { ...partial, hasMore: true, nextCursor: 'partial-page' }),
 			)
 			.mockRejectedValueOnce(new Error('timeout'))
-			.mockResolvedValueOnce(page([reviewItem('older')], partial));
+			.mockResolvedValueOnce(page([result('older')], partial));
 		const slice = createInboxListSlice(request, vi.fn());
 		await slice.fetchList();
 		await slice.loadMore();
@@ -119,12 +139,12 @@ describe('shared Inbox state', () => {
 	it('keeps requests for Open and Closed independent', async () => {
 		const open = createDeferredPromise<ListInboxResponse>();
 		waitingOrClosedRequest.mockImplementation(async (_context, query) =>
-			query.state === 'open' ? await open.promise : page([reviewItem('closed')]),
+			query.state === 'open' ? await open.promise : page([result('closed')]),
 		);
 		const store = useInboxStore();
 		const request = store.refreshListAndSummary();
 		await store.setActiveTab('closed');
-		open.resolve(page([reviewItem('open')]));
+		open.resolve(page([result('open')]));
 		await request;
 		expect(store.activeTab).toBe('closed');
 		expect(store.lists.closed.items[0].id).toBe('closed');
@@ -132,7 +152,7 @@ describe('shared Inbox state', () => {
 	});
 
 	it('treats a failed count as unknown while the list remains usable', async () => {
-		waitingOrClosedRequest.mockResolvedValue(page([reviewItem('first')]));
+		waitingOrClosedRequest.mockResolvedValue(page([result('first')]));
 		vi.mocked(api.fetchInboxSummary).mockResolvedValue({
 			counts: null,
 			partial: true,
@@ -147,46 +167,78 @@ describe('shared Inbox state', () => {
 
 	it('clears disabled-source rows from both tabs even when all reads fail', async () => {
 		const store = useInboxStore();
-		store.lists.waiting.items = [reviewItem('open')];
-		store.lists.closed.items = [reviewItem('closed')];
+		store.lists.waiting.items = [result('open')];
+		store.lists.closed.items = [result('closed')];
 		waitingOrClosedRequest.mockRejectedValue(
 			new ResponseError('unavailable', {
 				httpStatusCode: 503,
-				meta: { disabledSources: ['workflow_review'], failedSources: [] },
+				meta: { disabledSources: ['self_healing_result'], failedSources: ['workflow_review'] },
 			}),
 		);
 		await store.refreshListAndSummary();
 		expect(store.lists.waiting.items).toEqual([]);
 		expect(store.lists.closed.items).toEqual([]);
-		expect(store.disabledSources).toEqual(['workflow_review']);
+		expect(store.disabledSources).toEqual(['self_healing_result']);
 	});
 });
 
 it('allows a source to recover on a fresh page without a settings reload', async () => {
 	const store = useInboxStore();
 	waitingOrClosedRequest
-		.mockResolvedValueOnce(page([], { disabledSources: ['workflow_review'] }))
-		.mockResolvedValueOnce(page([reviewItem('recovered')]));
+		.mockResolvedValueOnce(page([], { disabledSources: ['self_healing_result'] }))
+		.mockResolvedValueOnce(page([result('recovered')]));
 	await store.refreshListAndSummary();
-	expect(store.disabledSources).toContain('workflow_review');
+	expect(store.disabledSources).toContain('self_healing_result');
 	await store.refreshListAndSummary();
-	expect(store.disabledSources).not.toContain('workflow_review');
+	expect(store.disabledSources).not.toContain('self_healing_result');
 	expect(store.lists.waiting.items[0].id).toBe('recovered');
 });
 
+it('allows a source first seen on a later page when settings were stale', async () => {
+	useSettingsStore().settings.inbox = {
+		enabled: true,
+		availableTypes: ['self_healing_result'],
+		failedTypes: [],
+	};
+	const review: InboxItem = {
+		type: 'workflow_review',
+		id: 'review',
+		projectId: 'project',
+		title: 'Review',
+		workflowName: 'Workflow',
+		requester: null,
+		authors: [],
+		reviewers: [],
+		state: 'open',
+		decision: 'pending',
+		workflowVersionId: null,
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+	};
+	waitingOrClosedRequest
+		.mockResolvedValueOnce(page([result('newer')], { hasMore: true, nextCursor: 'next' }))
+		.mockResolvedValueOnce(page([review]));
+	const store = useInboxStore();
+	await store.refreshListAndSummary();
+	expect(store.disabledSources).toContain('workflow_review');
+	await store.lists.waiting.loadMore();
+	expect(store.disabledSources).not.toContain('workflow_review');
+	expect(store.lists.waiting.items.at(-1)?.id).toBe('review');
+});
+
 it('starts a new cursor chain to recover a failed source after paging', async () => {
 	const partial = { partial: true, failedSources: ['workflow_review' as const] };
 	const request = vi
 		.fn()
 		.mockResolvedValueOnce(
-			page([reviewItem('first')], { ...partial, hasMore: true, nextCursor: 'partial-second' }),
+			page([result('first')], { ...partial, hasMore: true, nextCursor: 'partial-second' }),
 		)
 		.mockResolvedValueOnce(
-			page([reviewItem('older')], { ...partial, hasMore: true, nextCursor: 'partial-third' }),
+			page([result('older')], { ...partial, hasMore: true, nextCursor: 'partial-third' }),
 		)
 		.mockRejectedValueOnce(new Error('timeout'))
 		.mockResolvedValueOnce(
-			page([reviewItem('recovered')], { hasMore: true, nextCursor: 'complete-second' }),
+			page([result('recovered')], { hasMore: true, nextCursor: 'complete-second' }),
 		);
 	const slice = createInboxListSlice(request, vi.fn());
 	await slice.fetchList();
@@ -201,6 +253,31 @@ it('starts a new cursor chain to recover a failed source after paging', async ()
 	expect(slice.partial).toBe(false);
 });
 
+it('continues healthy-source pagination when a summary disables another source', async () => {
+	waitingOrClosedRequest
+		.mockResolvedValueOnce(page([result('first')], { hasMore: true, nextCursor: 'second' }))
+		.mockResolvedValueOnce(page([result('older')], { hasMore: true, nextCursor: 'third' }))
+		.mockResolvedValueOnce(page([result('oldest')]));
+	const store = useInboxStore();
+	await store.refreshListAndSummary();
+	await store.lists.waiting.loadMore();
+	vi.mocked(api.fetchInboxSummary).mockResolvedValue({
+		counts: { open: 3, closed: 0 },
+		partial: false,
+		failedSources: [],
+		disabledSources: ['workflow_review'],
+	});
+	await store.fetchSummary();
+	expect(store.lists.waiting.items.map((item) => item.id)).toEqual(['first', 'older']);
+	expect(store.lists.waiting.nextCursor).toBe('third');
+	await store.lists.waiting.loadMore();
+	expect(waitingOrClosedRequest).toHaveBeenLastCalledWith(
+		expect.anything(),
+		expect.objectContaining({ cursor: 'third' }),
+	);
+	expect(store.lists.waiting.items.map((item) => item.id)).toEqual(['first', 'older', 'oldest']);
+});
+
 it('requests the two Open categories and omits category for Closed', async () => {
 	const store = useInboxStore();
 	await store.refreshListAndSummary();
@@ -227,7 +304,7 @@ it('requests the two Open categories and omits category for Closed', async () =>
 
 it('keeps each Open group cursor and retry independent', async () => {
 	waitingOrClosedRequest.mockResolvedValueOnce(
-		page([reviewItem('waiting')], { hasMore: true, nextCursor: 'waiting-2' }),
+		page([result('waiting')], { hasMore: true, nextCursor: 'waiting-2' }),
 	);
 	authoredRequest
 		.mockResolvedValueOnce(
@@ -268,7 +345,25 @@ it('requires both groups to be successfully empty before showing the Open empty
 	expect(store.isEmpty).toBe(true);
 });
 
-function reviewItem(id: string): InboxItem {
+it('does not infer Assistant availability from the Authored response', async () => {
+	useSettingsStore().settings.inbox = {
+		enabled: true,
+		availableTypes: ['workflow_review'],
+		failedTypes: [],
+	};
+	const authored = createDeferredPromise<ListInboxResponse>();
+	waitingOrClosedRequest.mockResolvedValueOnce(page([result('assistant')]));
+	authoredRequest.mockReturnValueOnce(authored.promise);
+	const store = useInboxStore();
+	const refresh = store.refreshListAndSummary();
+	await vi.waitFor(() => expect(store.disabledSources).not.toContain('self_healing_result'));
+	authored.resolve(page());
+	await refresh;
+	expect(store.disabledSources).not.toContain('self_healing_result');
+	expect(store.lists.waiting.items[0].id).toBe('assistant');
+});
+
+function reviewItem(id: string): InboxWorkflowReviewItem {
 	return {
 		type: 'workflow_review',
 		id,
@@ -288,7 +383,7 @@ function reviewItem(id: string): InboxItem {
 
 it('updates a review decision without discarding loaded pages', async () => {
 	const store = useInboxStore();
-	store.lists.waiting.items = [reviewItem('first'), reviewItem('older')];
+	store.lists.waiting.items = [reviewItem('first'), reviewItem('older'), result('assistant')];
 	store.lists.waiting.nextCursor = 'next-page';
 	store.reconcileItemChange({
 		type: 'workflow_review',
@@ -297,7 +392,7 @@ it('updates a review decision without discarding loaded pages', async () => {
 		decision: 'changes_requested',
 		updatedAt: '2026-01-02T00:00:00.000Z',
 	});
-	expect(store.lists.waiting.items).toHaveLength(2);
+	expect(store.lists.waiting.items).toHaveLength(3);
 	expect(store.lists.waiting.items[1]).toMatchObject({ decision: 'changes_requested' });
 	expect(store.lists.waiting.nextCursor).toBe('next-page');
 	expect(api.fetchInbox).not.toHaveBeenCalled();
@@ -307,14 +402,14 @@ it('removes an approved review from Open and updates the counts', async () => {
 	const store = useInboxStore();
 	store.openCount = 2;
 	store.closedCount = 1;
-	store.lists.waiting.items = [reviewItem('review')];
+	store.lists.waiting.items = [reviewItem('review'), result('review')];
 	store.reconcileItemChange({
 		type: 'workflow_review',
 		id: 'review',
 		state: 'closed',
 		decision: 'approved',
 	});
-	expect(store.lists.waiting.items).toEqual([]);
+	expect(store.lists.waiting.items).toEqual([result('review')]);
 	expect(store.openCount).toBe(1);
 	expect(store.closedCount).toBe(2);
 });

package/src/inbox.store.ts

@@ -15,7 +15,7 @@ import { fetchInbox, fetchInboxSummary } from './inbox.api';
 import { INBOX_PAGE_LIMIT, type InboxItemChange, type InboxSectionKey } from './inbox.constants';
 import { toError } from './reviews/workflowReviews.utils';
 
-const sourceTypes: InboxSourceType[] = ['workflow_review'];
+const sourceTypes: InboxSourceType[] = ['workflow_review', 'self_healing_result'];
 
 type ListState = {
 	items: InboxItem[];
@@ -30,7 +30,7 @@ type ListState = {
 };
 
 function isSourceType(value: unknown): value is InboxSourceType {
-	return value === 'workflow_review';
+	return value === 'workflow_review' || value === 'self_healing_result';
 }
 
 function disabledTypesFromError(error: unknown): InboxSourceType[] {
@@ -189,7 +189,7 @@ export const useInboxStore = defineStore('inbox', () => {
 			removeDisabledSources,
 			reconcileSources,
 		),
-		// A category can query only part of the source set.
+		// Authored does not query Assistant results, so absence says nothing about that source.
 		authored: createInboxListSlice(requestPage('open', 'authored'), removeDisabledSources, (page) =>
 			reconcileSources(page, true),
 		),

package/src/reviews/components/WorkflowReviewChangesList.test.ts

@@ -0,0 +1,97 @@
+import type {
+	WorkflowReviewRequestWorkflowDetail,
+	WorkflowReviewVersionSnapshot,
+} from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+
+import WorkflowReviewChangesList from './WorkflowReviewChangesList.vue';
+
+vi.mock('./WorkflowReviewChangesSection.vue', () => ({
+	default: {
+		name: 'WorkflowReviewChangesSection',
+		props: ['workflow', 'state', 'decision'],
+		template:
+			'<div data-test-id="workflow-review-changes-section" :data-workflow-id="workflow.workflowId" />',
+	},
+}));
+
+const renderComponent = createComponentRenderer(WorkflowReviewChangesList);
+
+function makeSnapshot(
+	overrides: Partial<WorkflowReviewVersionSnapshot> = {},
+): WorkflowReviewVersionSnapshot {
+	return {
+		versionId: 'version-1',
+		name: null,
+		nodes: [],
+		connections: {},
+		nodeGroups: [],
+		createdAt: '2024-01-01T00:00:00.000Z',
+		...overrides,
+	};
+}
+
+function makeWorkflowDetail(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'My workflow',
+		workflowVersionId: 'version-1',
+		pinnedVersion: makeSnapshot(),
+		publishedVersionId: null,
+		baselineVersion: null,
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewChangesList', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('opens one workflow at a time and closes it on a second click', async () => {
+		const { getAllByTestId, queryAllByTestId } = renderComponent({
+			props: {
+				workflows: [
+					makeWorkflowDetail(),
+					makeWorkflowDetail({ workflowId: 'wf-2', workflowName: 'Other workflow' }),
+				],
+				state: 'open',
+				decision: 'pending',
+			},
+		});
+		const [firstTrigger, secondTrigger] = getAllByTestId('workflow-review-changes-item-trigger');
+
+		await userEvent.click(firstTrigger);
+		await userEvent.click(secondTrigger);
+
+		const sections = getAllByTestId('workflow-review-changes-section');
+		expect(sections).toHaveLength(1);
+		expect(sections[0]).toHaveAttribute('data-workflow-id', 'wf-2');
+
+		await userEvent.click(secondTrigger);
+
+		expect(queryAllByTestId('workflow-review-changes-section')).toHaveLength(0);
+	});
+
+	it('shows the version next to the workflow name, and only the name when the version is missing', () => {
+		const { getAllByTestId } = renderComponent({
+			props: {
+				workflows: [
+					makeWorkflowDetail({ pinnedVersion: makeSnapshot({ name: 'Fix retries' }) }),
+					makeWorkflowDetail({ workflowId: 'wf-2', workflowName: 'Pruned', pinnedVersion: null }),
+				],
+				state: 'open',
+				decision: 'pending',
+			},
+		});
+		const [withVersion, withoutVersion] = getAllByTestId('workflow-review-changes-item-trigger');
+
+		expect(withVersion).toHaveTextContent('My workflow');
+		expect(withVersion).toHaveTextContent('Fix retries');
+		expect(withoutVersion).toHaveTextContent(/^Pruned$/);
+	});
+});

package/src/reviews/components/WorkflowReviewChangesList.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type {
+	WorkflowReviewRequestDecision,
+	WorkflowReviewRequestState,
+	WorkflowReviewRequestWorkflowDetail,
+} from '@n8n/api-types';
+import { N8nIcon, N8nText } from '@n8n/design-system';
+import {
+	AccordionContent,
+	AccordionHeader,
+	AccordionItem,
+	AccordionRoot,
+	AccordionTrigger,
+} from 'reka-ui';
+
+import { getVersionLabel } from '@n8n/composables/useWorkflowVersionLabel';
+import WorkflowReviewChangesSection from './WorkflowReviewChangesSection.vue';
+
+defineProps<{
+	workflows: WorkflowReviewRequestWorkflowDetail[];
+	state: WorkflowReviewRequestState;
+	decision: WorkflowReviewRequestDecision;
+}>();
+
+/** The open workflow's id. The parent owns it, so it survives a tab switch. */
+const expanded = defineModel<string | undefined>('expanded');
+</script>
+
+<template>
+	<!-- Closed items unmount, so only the open workflow pays for its diff canvases. -->
+	<AccordionRoot v-model="expanded" type="single" collapsible unmount-on-hide :class="$style.list">
+		<AccordionItem
+			v-for="workflow in workflows"
+			:key="workflow.workflowId"
+			:value="workflow.workflowId"
+			:class="$style.item"
+			data-test-id="workflow-review-changes-item"
+		>
+			<AccordionHeader :class="$style.header">
+				<AccordionTrigger
+					:class="$style.trigger"
+					data-test-id="workflow-review-changes-item-trigger"
+				>
+					<N8nIcon icon="chevron-down" size="small" :class="$style.chevron" />
+					<N8nText bold size="medium" color="text-dark" :class="$style.name">
+						{{ workflow.workflowName }}
+					</N8nText>
+					<N8nText
+						v-if="workflow.pinnedVersion"
+						size="small"
+						color="text-light"
+						:class="$style.version"
+						data-test-id="workflow-review-changes-item-version"
+					>
+						{{ getVersionLabel({ workflowHistory: workflow.pinnedVersion }) }}
+					</N8nText>
+				</AccordionTrigger>
+			</AccordionHeader>
+			<AccordionContent :class="$style.content">
+				<WorkflowReviewChangesSection :workflow="workflow" :state="state" :decision="decision" />
+			</AccordionContent>
+		</AccordionItem>
+	</AccordionRoot>
+</template>
+
+<style module lang="scss">
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	/* A definite height, so the diff canvas can size itself with percentages. */
+	height: 100%;
+}
+
+.item {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	border: var(--border);
+	border-radius: var(--radius--2xs);
+	overflow: hidden;
+
+	/* Only a diff takes the free height. A callout keeps its natural size. */
+	&[data-state='open']:has([data-review-diff]) {
+		flex: 1 0 auto;
+		min-height: var(--review-diff--min-height, 28rem);
+	}
+}
+
+.header {
+	margin: 0;
+}
+
+.trigger {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	width: 100%;
+	padding: var(--spacing--xs) var(--spacing--sm);
+	border: none;
+	background: var(--color--background--light-3);
+	text-align: left;
+	cursor: pointer;
+
+	&:focus-visible {
+		outline: var(--focus--border-width) solid var(--focus--outline-color);
+		outline-offset: calc(-1 * var(--focus--border-width));
+	}
+
+	&[data-state='open'] {
+		border-bottom: var(--border);
+	}
+}
+
+.chevron {
+	flex-shrink: 0;
+	color: var(--color--text--tint-1);
+	transition: transform 0.15s ease;
+
+	[data-state='closed'] > & {
+		transform: rotate(-90deg);
+	}
+}
+
+.name,
+.version {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.version {
+	flex-shrink: 0;
+	max-width: 40%;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+</style>

package/src/reviews/components/WorkflowReviewChangesSection.test.ts

@@ -20,15 +20,17 @@ const { diffViewProps } = vi.hoisted(() => ({
 
 const DiffView = defineComponent({
 	name: 'WorkflowDiffView',
-	props: [
-		'sourceSnapshot',
-		'targetSnapshot',
-		'workflowId',
-		'workflowName',
-		'sourceLabel',
-		'targetLabel',
-		'showFullscreenButton',
-	],
+	props: {
+		sourceSnapshot: null,
+		targetSnapshot: null,
+		workflowId: String,
+		workflowName: String,
+		sourceLabel: String,
+		targetLabel: String,
+		showFullscreenButton: Boolean,
+		canvasIdPrefix: String,
+		hideTitle: Boolean,
+	},
 	setup(props) {
 		diffViewProps.push(props as SlotWorkflowDiffProps);
 	},
@@ -227,6 +229,8 @@ describe('WorkflowReviewChangesSection', () => {
 
 		expect(diffViewProps[0].workflowId).toBe('wf-1');
 		expect(diffViewProps[0].workflowName).toBe('Payment handler');
+		expect(diffViewProps[0].canvasIdPrefix).toBe('wf-1');
+		expect(diffViewProps[0].hideTitle).toBe(true);
 		expect(sourceSnapshot?.versionId).toBe('0f123890-0000-0000-0000-000000000000');
 		expect(sourceSnapshot?.nodes.map((node) => node.id)).toEqual(['node-removed', 'node-1']);
 

package/src/reviews/components/WorkflowReviewChangesSection.vue

@@ -129,7 +129,7 @@ const targetLabel = computed(() =>
 	>
 		{{ noChangesText }}
 	</N8nCallout>
-	<div v-else :class="$style.diff" data-test-id="workflow-review-changes-diff">
+	<div v-else :class="$style.diff" data-review-diff data-test-id="workflow-review-changes-diff">
 		<component
 			:is="WorkflowDiffView"
 			:source-snapshot="workflow.baselineVersion ?? undefined"
@@ -138,7 +138,9 @@ const targetLabel = computed(() =>
 			:target-snapshot="workflow.pinnedVersion ?? undefined"
 			:source-label="sourceLabel"
 			:target-label="targetLabel"
+			:canvas-id-prefix="workflow.workflowId"
 			show-fullscreen-button
+			hide-title
 		>
 			<!-- Only when a baseline exists: with no prior published version there is
 				no publish status to represent. -->
@@ -164,7 +166,7 @@ const targetLabel = computed(() =>
 <style module lang="scss">
 .callout {
 	max-width: var(--review-callout--max-width, 34rem);
-	margin-top: var(--spacing--5xs);
+	margin: var(--spacing--xs);
 }
 
 .versionBadge {
@@ -209,11 +211,7 @@ const targetLabel = computed(() =>
 }
 
 .diff {
-	height: 100%;
+	flex: 1;
 	min-height: 0;
-	border: var(--border);
-	border-radius: var(--radius--2xs);
-	overflow: hidden;
-	margin-top: var(--spacing--5xs);
 }
 </style>

package/src/reviews/components/WorkflowReviewDetailMetadata.vue

@@ -117,7 +117,11 @@ const statusSummary = computed(() =>
 		>
 			<template #header>
 				<N8nText bold color="text-light" size="medium">
-					{{ i18n.baseText('workflowReviews.detail.metadata.workflow') }}
+					{{
+						i18n.baseText('workflowReviews.detail.metadata.workflow', {
+							adjustToNumber: detail.workflows.length,
+						})
+					}}
 				</N8nText>
 			</template>
 			<div :class="$style.workflows">