@n8n/frontend-module-inbox 0.2.4 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @n8n/frontend-module-inbox
 
-The shared Inbox lists workflow reviews and saved Assistant results. Review details, comments, and decisions live in `src/reviews`. The editor supplies only the workflow diff renderer through the SDK component registry. Backend services keep their existing access rules and actions.
+The shared Inbox lists workflow reviews and saved Assistant results. Review details, comments, and decisions live in `src/reviews`. The editor supplies the workflow diff renderer and Assistant chat handoff through the SDK. Backend services keep their existing access rules and actions.
 
 Open has two groups: Waiting for review and Authored by you. Assistant results go
 in Waiting for review. Each group has its own cursor, Load more button, and retry.
@@ -9,7 +9,30 @@ Closed is a flat list with infinite scroll. Group collapse state persists per us
 Review decisions update the loaded rows and counts in place. Approving a selected
 review opens the Closed tab, as before.
 
-Self-healing detail UI remains gated by the disabled-by-default self-healing rollout. AST-1518 replaces the explicit unavailable detail state.
+Assistant details live in `src/self-healing`. They show saved reports, workflow
+changes, review activity, and usage. Result actions use the existing self-healing
+API. Actions are available only while a result is open.
+Fix ready shows Discard and close beside a Review menu: Apply and publish,
+Continue with Assistant, and Continue with Editor.
+Needs attention shows Discard and close beside a Continue in… menu with Continue
+with Assistant and Continue with Editor. It has no publish action.
+When a result has a suggestion, both menus show a note that tells what
+continuing does.
+Could not fix closes automatically and shows no actions.
+Continuation applies a suggestion to the workflow draft, or dismisses a result
+without one. It does not publish. The first successful action closes the result.
+The frontend then updates the Inbox and opens the destination.
+Chat uses the normal frontend Assistant handoff to create a private thread in the
+reviewer's personal project. A reviewer can lack read access to the result's
+project. The frontend loads the personal project before it closes the result.
+If the project cannot load, the result stays open. The handoff sends the full
+report and workflow attachment to start an Assistant run. If changes were
+applied, the message says they are already in the draft.
+Navigation failure does not reopen the result or undo saved changes.
+After a lost response, the frontend refreshes the result and shows an error.
+The user can retry the action if the result is still open.
+A refresh does not navigate or retry publication.
+Publishing remains a separate action. Self-healing remains off by default.
 
 Frontend feature module. Consumed from source by the editor-ui shell through
 `src/app/modules.manifest.ts`; there is no build step and no `dist`.

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@n8n/frontend-module-inbox",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@n8n/api-types": "1.45.3",
-    "@n8n/composables": "1.35.3",
-    "@n8n/design-system": "2.44.4",
-    "@n8n/frontend-module-sdk": "0.15.4",
-    "@n8n/i18n": "2.45.3",
-    "@n8n/rest-api-client": "2.45.3",
-    "@n8n/stores": "2.45.3",
-    "n8n-workflow": "2.45.1",
+    "@n8n/api-types": "1.46.0",
+    "@n8n/composables": "1.36.0",
+    "@n8n/design-system": "2.45.0",
+    "@n8n/frontend-module-sdk": "0.16.0",
+    "@n8n/i18n": "2.46.0",
+    "@n8n/rest-api-client": "2.46.0",
+    "@n8n/stores": "2.46.0",
+    "n8n-workflow": "2.46.0",
     "pinia": "^2.2.4",
     "reka-ui": "^2.5.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "@n8n/frontend-constants": "0.11.0",
+    "@n8n/frontend-constants": "0.12.0",
     "@vueuse/core": "^14.3.0",
     "lodash": "4.18.1",
     "vue-i18n": "^11.4.4"
@@ -40,14 +40,14 @@
     "stylelint": "^16.23.0",
     "typescript": "6.0.2",
     "unplugin-icons": "^23.0.1",
-    "vite": "^8.0.2",
+    "vite": "^8.1.6",
     "vite-svg-loader": "5.1.0",
     "vitest": "5.0.1",
     "vue-tsc": "^2.2.8",
     "@pinia/testing": "^0.1.6",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "4.17.17",
-    "@n8n/utils": "1.52.0"
+    "@n8n/utils": "1.53.0"
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://n8n.io",

package/src/components/InboxList.test.ts

@@ -1,4 +1,8 @@
-import type { InboxSelfHealingItem, InboxWorkflowReviewItem } from '@n8n/api-types';
+import type {
+	InboxPromotionReviewItem,
+	InboxSelfHealingItem,
+	InboxWorkflowReviewItem,
+} from '@n8n/api-types';
 import { createComponentRenderer } from '@n8n/frontend-test-utils';
 import { useUsersStore } from '@n8n/stores/users.store';
 import userEvent from '@testing-library/user-event';
@@ -247,6 +251,54 @@ it.each([
 	},
 );
 
+it('renders promotion review rows with the branch as fallback title and the GitLab problem', () => {
+	const promotion = (props: Partial<InboxPromotionReviewItem>): InboxPromotionReviewItem => ({
+		type: 'promotion_review',
+		id: 'promotion',
+		state: 'closed',
+		reviewState: 'merged',
+		reviewType: 'gitlab',
+		title: 'Promote the thing',
+		webUrl: null,
+		branchName: 'n8n-promotion/1',
+		environmentName: null,
+		requester: null,
+		approver: null,
+		remoteError: null,
+		headCommitSha: null,
+		runCommitSha: null,
+		hasConflicts: false,
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+		...props,
+	});
+	const { getByRole } = renderComponent({
+		props: {
+			sections: [
+				section('waiting', {
+					items: [
+						promotion({}),
+						promotion({
+							id: 'unanswered',
+							state: 'open',
+							reviewState: 'open',
+							title: null,
+							branchName: 'n8n-promotion/2',
+							remoteError: 'unreachable',
+						}),
+					],
+				}),
+			],
+		},
+	});
+	const [merged, unanswered] = within(getByRole('list')).getAllByRole('button');
+	expect(within(merged).getByText('Promote the thing')).toBeInTheDocument();
+	expect(within(merged).getByText('Promotion')).toBeInTheDocument();
+	expect(within(merged).getByRole('img', { name: 'Merged' }).className).toContain('merged');
+	expect(within(unanswered).getByText('n8n-promotion/2')).toBeInTheDocument();
+	expect(within(unanswered).getByText('GitLab unreachable')).toBeInTheDocument();
+});
+
 it('separates partial-source recovery from a failed page retry', () => {
 	const { getByTestId, emitted } = renderComponent({
 		props: { sections: [section('waiting', { partial: true, error: new Error('Page failed') })] },

package/src/components/InboxList.vue

@@ -154,20 +154,15 @@ function onListBackgroundClick() {
 }
 
 .header {
-	position: relative;
 	display: flex;
-	align-items: center;
-	height: var(--review-tab-bar--height, var(--height--sm));
-	padding-right: var(--spacing--md);
-	margin-bottom: var(--review-tab-bar--gap);
+	align-items: flex-end;
+	margin: 0 var(--spacing--md) var(--spacing--sm) 0;
+	/* The divider follows the bottom of the tabs, so the tab badges can change their height. */
+	border-bottom: var(--border);
 
-	&::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: var(--spacing--md);
-		bottom: calc(-1 * var(--review-tab-bar--indicator-overhang) - var(--border-width));
-		border-bottom: var(--border-width) solid var(--border-color);
+	> :global(.n8n-tabs) {
+		/* The active-tab indicator covers the divider, as in the detail tab bars. */
+		margin-bottom: calc(-1 * var(--border-width));
 	}
 }
 

package/src/components/InboxListItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { InboxItem, InboxSelfHealingItem } from '@n8n/api-types';
+import type { InboxItem, InboxSelfHealingItem, PromotionReviewType } from '@n8n/api-types';
 import {
 	N8nAssistantAvatar,
 	N8nBadge,
 	N8nCard,
-	N8nIcon,
 	N8nText,
 	N8nTimeAgo,
+	type IconName,
 } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
 import { useRootStore } from '@n8n/stores/useRootStore';
@@ -18,6 +18,20 @@ const emit = defineEmits<{ select: [] }>();
 const i18n = useI18n();
 const rootStore = useRootStore();
 
+// A promotion review shows the icon of its Git host. A new host needs an icon here.
+const reviewTypeIcon = { gitlab: 'gitlab' } satisfies Record<PromotionReviewType, IconName>;
+
+function itemTitle(item: InboxItem) {
+	switch (item.type) {
+		case 'workflow_review':
+			return item.title;
+		case 'self_healing_result':
+			return item.summary;
+		case 'promotion_review':
+			return item.title ?? item.branchName ?? i18n.baseText('inbox.promotionReview.untitled');
+	}
+}
+
 function outcomeLabel(item: InboxSelfHealingItem) {
 	switch (item.outcome) {
 		case 'fix_ready':
@@ -57,13 +71,20 @@ function outcomeLabel(item: InboxSelfHealingItem) {
 						$style.cardTitle,
 						{ [$style.assistantTitle]: item.type === 'self_healing_result' },
 					]"
-					>{{ item.type === 'workflow_review' ? item.title : item.summary }}</N8nText
+					>{{ itemTitle(item) }}</N8nText
 				>
 				<WorkflowReviewStatusDot
 					v-if="item.type === 'workflow_review'"
 					:state="item.state"
 					:decision="item.decision"
 				/>
+				<span
+					v-else-if="item.type === 'promotion_review'"
+					:class="[$style.statusDot, $style[item.reviewState]]"
+					role="img"
+					:aria-label="i18n.baseText(`inbox.promotionReview.state.${item.reviewState}`)"
+					data-test-id="inbox-promotion-status"
+				/>
 				<span
 					v-else
 					:class="[
@@ -80,12 +101,28 @@ function outcomeLabel(item: InboxSelfHealingItem) {
 				/>
 			</div>
 			<div :class="$style.meta">
-				<N8nBadge v-if="item.workflowName" variant="outline" :class="$style.workflowBadge">
-					<span :class="$style.workflowBadgeText" :title="item.workflowName"
-						><N8nIcon icon="workflow" size="small" /><span>{{ item.workflowName }}</span></span
-					>
-				</N8nBadge>
+				<N8nBadge
+					v-if="item.type === 'promotion_review'"
+					variant="outline"
+					:leading-icon="reviewTypeIcon[item.reviewType]"
+					:class="$style.workflowBadge"
+					>{{ i18n.baseText('inbox.promotionReview.badge') }}</N8nBadge
+				>
+				<N8nBadge
+					v-else-if="item.workflowName"
+					variant="outline"
+					leading-icon="workflow"
+					:class="$style.workflowBadge"
+					:title="item.workflowName"
+					>{{ item.workflowName }}</N8nBadge
+				>
 				<div :class="$style.metaActions">
+					<N8nText
+						v-if="item.type === 'promotion_review' && item.remoteError"
+						size="xsmall"
+						color="warning"
+						>{{ i18n.baseText(`inbox.promotionReview.remoteError.${item.remoteError}`) }}</N8nText
+					>
 					<N8nText :class="$style.time" size="xsmall" color="text-light">
 						<N8nTimeAgo :date="item.updatedAt" :locale="rootStore.defaultLocale" />
 					</N8nText>
@@ -165,20 +202,6 @@ function outcomeLabel(item: InboxSelfHealingItem) {
 		max-width: 100%;
 	}
 }
-.workflowBadgeText {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing--3xs);
-	max-width: 100%;
-	min-width: 0;
-	line-height: calc(var(--font-size--sm) + var(--border-width));
-	> span {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		min-width: 0;
-	}
-}
 .metaActions {
 	display: flex;
 	align-items: center;
@@ -205,4 +228,13 @@ function outcomeLabel(item: InboxSelfHealingItem) {
 .closed {
 	background-color: var(--color--neutral-500);
 }
+.open {
+	background-color: var(--color--blue-500);
+}
+.changes_requested {
+	background-color: var(--color--yellow-500);
+}
+.merged {
+	background-color: var(--color--green-500);
+}
 </style>

package/src/inbox.constants.ts

@@ -2,13 +2,15 @@ import type { InboxSourceType, InboxState, WorkflowReviewRequestDecision } from
 
 export const INBOX_VIEW = 'Inbox';
 export const INBOX_ASSISTANT_RESULT_VIEW = 'InboxAssistantResult';
+export const INBOX_PROMOTION_REVIEW_VIEW = 'InboxPromotionReview';
 export const INBOX_PAGE_LIMIT = 15;
 
 export type InboxSectionKey = 'waiting' | 'authored' | 'closed';
 
 export type InboxSelection =
 	| { type: 'workflow_review'; id: string }
-	| { type: 'self_healing_result'; id: string; projectId: string; workflowId: string };
+	| { type: 'self_healing_result'; id: string; projectId: string; workflowId: string }
+	| { type: 'promotion_review'; id: string };
 
 export type InboxItemChange = {
 	type: InboxSourceType;

package/src/inbox.module.ts

@@ -16,7 +16,7 @@ const inboxView = {
 export const InboxModule = defineFrontendModule({
 	id: 'inbox',
 	name: 'Inbox',
-	description: 'Workflow reviews and saved Assistant results.',
+	description: 'Workflow reviews, promotion reviews, and saved Assistant results.',
 	icon: 'inbox',
 	routes: [
 		// Keep legacy /reviews links working after the move to Inbox.
@@ -51,5 +51,10 @@ export const InboxModule = defineFrontendModule({
 			path: '/inbox/assistant-results/:resultId',
 			name: 'InboxAssistantResult',
 		},
+		{
+			...inboxView,
+			path: '/inbox/promotion-reviews/:reviewId',
+			name: 'InboxPromotionReview',
+		},
 	],
 });

package/src/inbox.routes.test.ts

@@ -59,6 +59,7 @@ it('redirects the old review list without selecting an item', async () => {
 
 it.each([
 	['/inbox/reviews/review-1', { type: 'workflow_review', id: 'review-1' }],
+	['/inbox/promotion-reviews/review-1', { type: 'promotion_review', id: 'review-1' }],
 	[
 		'/inbox/assistant-results/result-1?projectId=project&workflowId=workflow',
 		{
@@ -87,12 +88,37 @@ it.each([
 	['Inbox', true],
 	['WorkflowReviewRequestsView', true],
 	['InboxAssistantResult', true],
+	['InboxPromotionReview', true],
 	['Workflow', false],
 	[undefined, false],
 ])('recognizes the Inbox route %s: %s', (name, expected) => {
 	expect(isInboxRoute({ name })).toBe(expected);
 });
 
+it('links a promotion review row to its detail route', () => {
+	const router = createInboxRouter();
+	const location = inboxItemLocation({
+		type: 'promotion_review',
+		id: 'review-1',
+		state: 'open',
+		reviewState: 'open',
+		reviewType: 'gitlab',
+		title: null,
+		webUrl: null,
+		branchName: null,
+		environmentName: null,
+		requester: null,
+		approver: null,
+		remoteError: null,
+		headCommitSha: null,
+		runCommitSha: null,
+		hasConflicts: false,
+		createdAt: '',
+		updatedAt: '',
+	});
+	expect(router.resolve(location).path).toBe('/inbox/promotion-reviews/review-1');
+});
+
 it('keeps the tab only when selecting the same item', async () => {
 	const router = createInboxRouter();
 	await router.push(

package/src/inbox.routes.ts

@@ -1,7 +1,12 @@
 import type { InboxItem } from '@n8n/api-types';
 import type { LocationQuery, RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router';
 
-import { INBOX_ASSISTANT_RESULT_VIEW, INBOX_VIEW, type InboxSelection } from './inbox.constants';
+import {
+	INBOX_ASSISTANT_RESULT_VIEW,
+	INBOX_PROMOTION_REVIEW_VIEW,
+	INBOX_VIEW,
+	type InboxSelection,
+} from './inbox.constants';
 import { WORKFLOW_REVIEW_REQUESTS_VIEW } from './reviews/constants';
 
 type InboxRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'params' | 'query'>;
@@ -14,7 +19,8 @@ export function isInboxRoute(route: Pick<InboxRoute, 'name'>): boolean {
 	return (
 		route.name === INBOX_VIEW ||
 		route.name === WORKFLOW_REVIEW_REQUESTS_VIEW ||
-		route.name === INBOX_ASSISTANT_RESULT_VIEW
+		route.name === INBOX_ASSISTANT_RESULT_VIEW ||
+		route.name === INBOX_PROMOTION_REVIEW_VIEW
 	);
 }
 
@@ -23,6 +29,10 @@ export function selectionFromRoute({ name, params, query }: InboxRoute): InboxSe
 		const id = stringParam(params.reviewId);
 		return id ? { type: 'workflow_review', id } : null;
 	}
+	if (name === INBOX_PROMOTION_REVIEW_VIEW) {
+		const id = stringParam(params.reviewId);
+		return id ? { type: 'promotion_review', id } : null;
+	}
 	if (name !== INBOX_ASSISTANT_RESULT_VIEW) return null;
 	const id = stringParam(params.resultId);
 	if (!id) return null;
@@ -45,5 +55,8 @@ export function inboxItemLocation(item: InboxItem, route?: InboxRoute): RouteLoc
 		next.workflowId = item.workflowId;
 		return { name: INBOX_ASSISTANT_RESULT_VIEW, params: { resultId: item.id }, query: next };
 	}
+	if (item.type === 'promotion_review') {
+		return { name: INBOX_PROMOTION_REVIEW_VIEW, params: { reviewId: item.id }, query: next };
+	}
 	return { name: WORKFLOW_REVIEW_REQUESTS_VIEW, params: { reviewId: item.id }, query: next };
 }

package/src/inbox.store.ts

@@ -15,7 +15,11 @@ 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', 'self_healing_result'];
+const sourceTypes: InboxSourceType[] = [
+	'workflow_review',
+	'self_healing_result',
+	'promotion_review',
+];
 
 type ListState = {
 	items: InboxItem[];
@@ -30,7 +34,9 @@ type ListState = {
 };
 
 function isSourceType(value: unknown): value is InboxSourceType {
-	return value === 'workflow_review' || value === 'self_healing_result';
+	return (
+		value === 'workflow_review' || value === 'self_healing_result' || value === 'promotion_review'
+	);
 }
 
 function disabledTypesFromError(error: unknown): InboxSourceType[] {