From e7efe649b4edecc32623e7afd97048efb2e87eac Mon Sep 17 00:00:00 2001
From: Roman Davydchuk <roman.davydchuk@n8n.io>
Date: Fri, 11 Sep 2026 07:45:26 +0000
Subject: [PATCH] fix: Show automation ideas even after the first recording is
 sent

---
 .../mcp-browser-extension/src/background.ts   |  2 +-
 .../@n8n/mcp-browser-extension/src/ui/App.vue | 34 ++++++++++++++++---
 .../mcp-browser-extension/src/ui/app.test.ts  |  1 +
 .../src/ui/composables/useRecommendations.ts  | 10 +++---
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/@n8n/mcp-browser-extension/src/background.ts b/packages/@n8n/mcp-browser-extension/src/background.ts
index 426763adba5..b80e733ce96 100644
--- a/packages/@n8n/mcp-browser-extension/src/background.ts
+++ b/packages/@n8n/mcp-browser-extension/src/background.ts
@@ -926,7 +926,7 @@ async function extractPageContext(
 
 async function requestRecommendations(): Promise<{ success: boolean; error?: string }> {
 	const relay = activeConnection?.relay;
-	if (!relay || recording) {
+	if (!relay || (recording && recording.status !== 'submitted')) {
 		log.debug('recommendations skipped: not connected or a recording is in progress');
 		broadcastRecommendationsChange('unavailable');
 		return { success: false, error: 'No automation ideas are available right now.' };
diff --git a/packages/@n8n/mcp-browser-extension/src/ui/App.vue b/packages/@n8n/mcp-browser-extension/src/ui/App.vue
index 4b87ed1d595..d5ea4ae4d2e 100644
--- a/packages/@n8n/mcp-browser-extension/src/ui/App.vue
+++ b/packages/@n8n/mcp-browser-extension/src/ui/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import {
 	N8nButton,
 	N8nCheckbox,
@@ -60,6 +60,7 @@ const {
 	ideas: recommendationIdeas,
 	isSending: isSendingRecommendation,
 	send: sendRecommendation,
+	refresh: refreshRecommendations,
 } = useRecommendations();
 
 const showTabSelection = ref(false);
@@ -103,6 +104,15 @@ const recordingTitle = computed(() => {
 	return 'Review recording';
 });
 
+watch(
+	() => recording.value?.status,
+	(status, previousStatus) => {
+		if (status === 'submitted' && previousStatus === 'submitting') {
+			void refreshRecommendations();
+		}
+	},
+);
+
 async function disconnectFromInstance() {
 	await disconnect();
 	showSettings.value = false;
@@ -260,9 +270,18 @@ async function submitToInstanceUrl() {
 					Complete the task in your browser. Return here when you're ready to review the recorded
 					actions.
 				</p>
-				<p v-else-if="recording.status === 'submitted'" class="subtitle">
-					AI Assistant is building this in a new conversation.
-				</p>
+				<template v-else-if="recording.status === 'submitted'">
+					<p class="subtitle">AI Assistant is building this in a new conversation.</p>
+					<template v-if="recommendationsStatus === 'loading' || recommendationsStatus === 'ready'">
+						<h2 class="ideas-title">Automation ideas for this page</h2>
+						<AutomationIdeas
+							:status="recommendationsStatus"
+							:ideas="recommendationIdeas"
+							:is-sending="isSendingRecommendation"
+							@pick="sendRecommendation"
+						/>
+					</template>
+				</template>
 				<p v-else-if="recording.status === 'submitting'" class="subtitle">
 					n8n is starting a new conversation from your recording.
 				</p>
@@ -531,6 +550,13 @@ async function submitToInstanceUrl() {
 	margin: 0 0 var(--spacing--sm);
 }
 
+.ideas-title {
+	font-size: var(--font-size--sm);
+	font-weight: var(--font-weight--medium);
+	color: var(--color--text--shade-1);
+	margin: var(--spacing--lg) 0 var(--spacing--sm);
+}
+
 .divider {
 	border: none;
 	border-top: var(--border-width) var(--border-style) var(--color--foreground--tint-1);
diff --git a/packages/@n8n/mcp-browser-extension/src/ui/app.test.ts b/packages/@n8n/mcp-browser-extension/src/ui/app.test.ts
index 28633321a9a..1e9248bf0a3 100644
--- a/packages/@n8n/mcp-browser-extension/src/ui/app.test.ts
+++ b/packages/@n8n/mcp-browser-extension/src/ui/app.test.ts
@@ -43,6 +43,7 @@ const recommendationsState = {
 	ideas: ref<Array<{ id: string; title: string; description: string }>>([]),
 	isSending: ref(false),
 	send: vi.fn(),
+	refresh: vi.fn(),
 };
 
 vi.mock('./composables/useConnection', () => ({ useConnection: () => state }));
diff --git a/packages/@n8n/mcp-browser-extension/src/ui/composables/useRecommendations.ts b/packages/@n8n/mcp-browser-extension/src/ui/composables/useRecommendations.ts
index 6fd0dbb2973..8dd78008ecd 100644
--- a/packages/@n8n/mcp-browser-extension/src/ui/composables/useRecommendations.ts
+++ b/packages/@n8n/mcp-browser-extension/src/ui/composables/useRecommendations.ts
@@ -26,13 +26,15 @@ export function useRecommendations() {
 		ideas.value = message.ideas ?? [];
 	}
 
+	async function refresh(): Promise<void> {
+		await chrome.runtime.sendMessage({ type: 'getRecommendations' });
+	}
+
 	chrome.runtime.onMessage.addListener(onMessage);
 
-	onMounted(async () => {
-		await chrome.runtime.sendMessage({ type: 'getRecommendations' });
-	});
+	onMounted(refresh);
 
 	onUnmounted(() => chrome.runtime.onMessage.removeListener(onMessage));
 
-	return { status, ideas, isSending, send };
+	return { status, ideas, isSending, send, refresh };
 }