diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index 3fa3e2339e0..c8e74e825b8 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -6125,6 +6125,7 @@
"agents.builder.header.workspaceCrumb": "Workspace",
"agents.builder.header.projectFallback": "Project",
"agents.builder.header.switcher.empty": "No other agents",
+ "agents.builder.header.switcher.newAgent": "New agent",
"agents.builder.header.switcher.ariaLabel": "Switch agent",
"agents.builder.header.saving": "Saving…",
"agents.builder.header.saved": "Saved",
diff --git a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts
index 58ea0df573f..af0ba0f8843 100644
--- a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts
+++ b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts
@@ -38,6 +38,12 @@ vi.mock('@n8n/design-system', () => ({
props: ['variant', 'size', 'icon', 'iconOnly', 'disabled'],
emits: ['click'],
},
+ N8nDropdownMenuItem: {
+ name: 'N8nDropdownMenuItem',
+ template: '',
+ props: ['id', 'label', 'icon', 'testId'],
+ emits: ['select'],
+ },
N8nTooltip: {
name: 'N8nTooltip',
template:
@@ -52,13 +58,13 @@ vi.mock('@n8n/design-system', () => ({
},
N8nDropdownMenu: {
name: 'N8nDropdownMenu',
- template: '
',
+ template: '
',
props: ['items'],
emits: ['select'],
},
'n8n-dropdown-menu': {
name: 'N8nDropdownMenu',
- template: '
',
+ template: '
',
props: ['items'],
emits: ['select'],
},
@@ -305,4 +311,15 @@ describe('AgentBuilderHeader', () => {
nav.vm.$emit('select', 'a2');
expect(wrapper.emitted('switch-agent')).toEqual([['a2']]);
});
+
+ it('navigates to the new agent page from the switcher footer', async () => {
+ const wrapper = mountHeader();
+
+ await wrapper.find('[data-testid="agent-header-new-agent"]').trigger('click');
+
+ expect(routerPush).toHaveBeenCalledWith({
+ name: 'NewAgentView',
+ query: { projectId: 'p1' },
+ });
+ });
});
diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue
index fe8d1f71757..32d3dc8afa3 100644
--- a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue
+++ b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue
@@ -13,6 +13,7 @@ import {
N8nBreadcrumbs,
N8nButton,
N8nDropdownMenu,
+ N8nDropdownMenuItem,
N8nIcon,
N8nTooltip,
} from '@n8n/design-system';
@@ -21,6 +22,7 @@ import type { DropdownMenuItemProps } from '@n8n/design-system';
import type { ActionDropdownItem } from '@n8n/design-system/types/action-dropdown';
import { useI18n, type BaseTextKey } from '@n8n/i18n';
import { VIEWS } from '@/app/constants';
+import { NEW_AGENT_VIEW } from '@/features/agents/constants';
import AgentPublishButton from './AgentPublishButton.vue';
import { useProjectAgentsList } from '../composables/useProjectAgentsList';
@@ -118,6 +120,10 @@ function onSwitcherSelect(id: string) {
emit('switch-agent', id);
}
+function onCreateAgent() {
+ void router.push({ name: NEW_AGENT_VIEW, query: { projectId: props.projectId } });
+}
+
function onBreadcrumbSelect(item: PathItem) {
if (item.id !== props.projectId) return;
void router.push(projectRoute.value);
@@ -137,6 +143,7 @@ function onOpenPreview() {
/
@@ -153,6 +160,17 @@ function onOpenPreview() {
+
+
+
+
+
/
@@ -306,6 +324,11 @@ function onOpenPreview() {
max-width: clamp(320px, 42vw, 640px);
}
+.switcherFooter {
+ border-top: var(--border);
+ padding: var(--spacing--3xs);
+}
+
.right {
margin-left: auto;
display: flex;