fix(editor): Set document title on agent pages (no-changelog) (#30243)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -5827,13 +5827,16 @@
 	"agents.chat.askQuestion.otherLabel": "Other",
 	"agents.chat.askQuestion.otherPlaceholder": "Type another answer",
 	"agents.chat.askQuestion.submit": "Submit",
+	"agents.heading": "Agents",
 	"agents.list.published": "Published",
 	"agents.list.noDescription": "No description",
 	"agents.list.updatedAt": "Updated {date}",
 	"agents.list.updated": "Last updated",
 	"agents.list.created": "Created",
 	"agents.list.empty.heading": "No agents yet",
-	"agents.list.empty.description": "Create your first agent to get started building with the n8n agents SDK. Use the button in the top right to create one.",
+	"agents.list.empty.description": "Create your first agent to automate tasks and answer questions using your connected tools and data.",
+	"agents.list.empty.button.label": "Create agent",
+	"agents.list.empty.button.disabled.tooltip": "Your current role in the project does not allow you to create agents",
 	"agents.list.actions.publish": "Publish",
 	"agents.list.actions.unpublish": "Unpublish",
 	"agents.list.actions.delete": "Delete",
@@ -6008,7 +6011,7 @@
 	"agents.builder.evaluations.type.check": "Check",
 	"agents.builder.evaluations.type.judge": "Judge",
 	"agents.builder.evaluations.credentialConfigured": "Credential configured",
-	"agents.builder.evaluations.emptyPrefix": "No evaluations configured. Add evaluations in code using",
+	"agents.builder.evaluations.emptyPrefix": "No evaluations configured.",
 	"agents.builder.quickActions.addTool": "Add tool",
 	"agents.builder.quickActions.addTrigger": "Add trigger",
 	"agents.builder.capabilities.title": "Capabilities",

packages/frontend/editor-ui/src/features/agents/components/AgentEvalsPanel.vue

@@ -60,7 +60,6 @@ const evals = computed(() => props.schema?.evaluations ?? []);
 		<div v-else :class="$style.dashedCard">
 			<N8nText size="small" color="text-light">
 				{{ i18n.baseText('agents.builder.evaluations.emptyPrefix') }}
-				<code :class="$style.code">.eval(new Eval()...)</code>
 			</N8nText>
 		</div>
 	</div>

packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue

@@ -10,6 +10,7 @@ import { useTelemetry } from '@/app/composables/useTelemetry';
 import { useToast } from '@/app/composables/useToast';
 import { useUIStore } from '@/app/stores/ui.store';
 import { useCredentialsStore } from '@/features/credentials/credentials.store';
+import { useDocumentTitle } from '@/app/composables/useDocumentTitle';
 import { LOCAL_STORAGE_AGENT_BUILDER_CHAT_PANEL_WIDTH, MODAL_CONFIRM } from '@/app/constants';
 import { useResizablePanel } from '@/app/composables/useResizablePanel';
 import { deepCopy } from 'n8n-workflow';
@@ -57,6 +58,7 @@ const telemetry = useTelemetry();
 const sessionsStore = useAgentSessionsStore();
 const uiStore = useUIStore();
 const credentialsStore = useCredentialsStore();
+const documentTitle = useDocumentTitle();
 const { showError, showMessage } = useToast();
 const { isBuilderConfigured, fetchStatus: fetchBuilderStatus } = useAgentBuilderStatus();
 const { openAgentConfirmationModal } = useAgentConfirmationModal();
@@ -86,6 +88,10 @@ const {
 const initialized = ref(false);
 const agentName = ref('');
 const agent = ref<AgentResource | null>(null);
+
+watch(agentName, (name) => {
+	documentTitle.set(name || locale.baseText('agents.heading'));
+});
 const {
 	activeChatSessionId,
 	continueSessionId,

packages/frontend/editor-ui/src/features/agents/views/AgentView.vue

@@ -1,4 +1,15 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useDocumentTitle } from '@/app/composables/useDocumentTitle';
+import { useI18n } from '@n8n/i18n';
+import { onMounted } from 'vue';
+
+const documentTitle = useDocumentTitle();
+const locale = useI18n();
+
+onMounted(async () => {
+	documentTitle.set(locale.baseText('agents.heading'));
+});
+</script>
 
 <template>
 	<div :class="$style.agentView">

packages/frontend/editor-ui/src/features/agents/views/AgentsListView.vue

@@ -10,12 +10,16 @@ import ResourcesListLayout from '@/app/components/layouts/ResourcesListLayout.vu
 import InsightsSummary from '@/features/execution/insights/components/InsightsSummary.vue';
 import { useInsightsStore } from '@/features/execution/insights/insights.store';
 import { useProjectPages } from '@/features/collaboration/projects/composables/useProjectPages';
+import { useDocumentTitle } from '@/app/composables/useDocumentTitle';
+import { useSourceControlStore } from '@/features/integrations/sourceControl.ee/sourceControl.store';
+import { getResourcePermissions } from '@n8n/permissions';
 import { listAgents } from '../composables/useAgentApi';
 import type { AgentResource } from '../types';
-import { AGENT_BUILDER_VIEW } from '../constants';
+import { AGENT_BUILDER_VIEW, NEW_AGENT_VIEW } from '../constants';
 import AgentCard from '../components/AgentCard.vue';
 
 const locale = useI18n();
+const documentTitle = useDocumentTitle();
 
 const route = useRoute();
 const router = useRouter();
@@ -23,6 +27,15 @@ const rootStore = useRootStore();
 const projectsStore = useProjectsStore();
 const insightsStore = useInsightsStore();
 const projectPages = useProjectPages();
+const sourceControlStore = useSourceControlStore();
+
+const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
+
+const canCreateAgent = computed(
+	() =>
+		!sourceControlStore.preferences.branchReadOnly &&
+		!!getResourcePermissions(homeProject.value?.scopes)?.agent?.create,
+);
 
 const allAgents = ref<AgentResource[]>([]);
 const loading = ref(true);
@@ -68,7 +81,14 @@ function onAgentDeleted(agentId: string) {
 	allAgents.value = allAgents.value.filter((a) => a.id !== agentId);
 }
 
-onMounted(fetchAgents);
+function onCreateAgentClick() {
+	void router.push({ name: NEW_AGENT_VIEW, query: { projectId: projectId.value } });
+}
+
+onMounted(async () => {
+	documentTitle.set(locale.baseText('agents.heading'));
+	await fetchAgents();
+});
 </script>
 
 <template>
@@ -98,9 +118,19 @@ onMounted(fetchAgents);
 
 		<template #empty>
 			<N8nActionBox
+				data-test-id="empty-agents-action-box"
 				:heading="locale.baseText('agents.list.empty.heading')"
 				:description="locale.baseText('agents.list.empty.description')"
-			/>
+				:button-text="locale.baseText('agents.list.empty.button.label')"
+				button-type="secondary"
+				:button-disabled="!canCreateAgent"
+				:button-icon="!canCreateAgent ? 'lock' : undefined"
+				@click:button="onCreateAgentClick"
+			>
+				<template #disabledButtonTooltip>
+					{{ locale.baseText('agents.list.empty.button.disabled.tooltip') }}
+				</template>
+			</N8nActionBox>
 		</template>
 
 		<template #default="{ data }">