From e94dff42e1b3ed652697c5eaef76c3fd0fa3c720 Mon Sep 17 00:00:00 2001
From: Michael Drury <me@michaeldrury.co.uk>
Date: Fri, 18 Sep 2026 15:27:58 +0000
Subject: [PATCH] fix(editor): Refine agent instructions and trace view
 (#39104)

---
 .../frontend/@n8n/i18n/src/locales/en.json    |  2 +-
 .../components/AgentSessionTimelineHeader.vue | 43 ++++++-------------
 .../agents/views/AgentSessionTimelineView.vue |  8 +---
 3 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index 066b4b45eeb..1250dff11d6 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -8060,7 +8060,7 @@
 	"agents.builder.agent.model.defaultSelected.dismiss": "Got it",
 	"agents.builder.agent.instructions.label": "Instructions",
 	"agents.builder.agent.instructions.description": "What this agent should do",
-	"agents.builder.agent.instructions.placeholder": "You are a support agent. Answer product questions and help users solve problems.",
+	"agents.builder.agent.instructions.placeholder": "Summarize new tickets in the Customer Support Slack channel.",
 	"agents.builder.agent.instructions.characterCount": "{count} characters",
 	"agents.builder.advanced.title": "Advanced",
 	"agents.builder.advanced.description": "Configure memory and tune how this agent runs.",
diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentSessionTimelineHeader.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentSessionTimelineHeader.vue
index 519ee4dad6d..e043c91a399 100644
--- a/packages/frontend/editor-ui/src/features/agents/components/AgentSessionTimelineHeader.vue
+++ b/packages/frontend/editor-ui/src/features/agents/components/AgentSessionTimelineHeader.vue
@@ -5,7 +5,6 @@ import {
 	N8nDropdownMenu,
 	N8nIcon,
 	N8nIconButton,
-	N8nToggle,
 	N8nTooltip,
 	TOOLTIP_DELAY_MS,
 	type DropdownMenuItemProps,
@@ -20,30 +19,25 @@ interface SessionDropdownData {
 	active: boolean;
 }
 
-const props = withDefaults(
-	defineProps<{
-		breadcrumbItems: PathItem[];
-		sessionTitle: string;
-		sessionOptions: Array<DropdownMenuItemProps<string, SessionDropdownData>>;
-		showMetrics: boolean;
-		triggerSource: string | null;
-		triggerIcon: IconName;
-		triggerLabel: string;
-		totalTokens: number;
-		totalCost: number;
-		durationLabel: string;
-		showLangsmithExport: boolean;
-		langsmithExportLoading: boolean;
-		isPreviewOpen?: boolean;
-	}>(),
-	{ isPreviewOpen: false },
-);
+const props = defineProps<{
+	breadcrumbItems: PathItem[];
+	sessionTitle: string;
+	sessionOptions: Array<DropdownMenuItemProps<string, SessionDropdownData>>;
+	showMetrics: boolean;
+	triggerSource: string | null;
+	triggerIcon: IconName;
+	triggerLabel: string;
+	totalTokens: number;
+	totalCost: number;
+	durationLabel: string;
+	showLangsmithExport: boolean;
+	langsmithExportLoading: boolean;
+}>();
 
 const emit = defineEmits<{
 	'breadcrumb-select': [item: PathItem];
 	'session-select': [sessionId: string];
 	'langsmith-export': [];
-	'toggle-preview': [];
 	close: [];
 }>();
 
@@ -124,15 +118,6 @@ const i18n = useI18n();
 				<N8nIcon icon="clock" :size="12" />
 				<span>{{ props.durationLabel }}</span>
 			</span>
-			<N8nToggle
-				:model-value="props.isPreviewOpen"
-				variant="ghost"
-				size="medium"
-				icon="play"
-				:label="i18n.baseText('agents.builder.preview.button')"
-				data-testid="agent-session-timeline-preview-btn"
-				@click="emit('toggle-preview')"
-			/>
 			<N8nTooltip :content="i18n.baseText('generic.close')">
 				<N8nButton
 					variant="ghost"
diff --git a/packages/frontend/editor-ui/src/features/agents/views/AgentSessionTimelineView.vue b/packages/frontend/editor-ui/src/features/agents/views/AgentSessionTimelineView.vue
index 7703595cdc5..80807ab9418 100644
--- a/packages/frontend/editor-ui/src/features/agents/views/AgentSessionTimelineView.vue
+++ b/packages/frontend/editor-ui/src/features/agents/views/AgentSessionTimelineView.vue
@@ -31,7 +31,6 @@ import { useI18n } from '@n8n/i18n';
 import { N8nEmptyState } from '@n8n/design-system';
 import type { DropdownMenuItemProps, IconName, PathItem } from '@n8n/design-system';
 import { computed, ref, watch } from 'vue';
-import { useStorage } from '@vueuse/core';
 import { useRoute, useRouter, type RouteLocationRaw } from 'vue-router';
 
 const i18n = useI18n();
@@ -51,16 +50,13 @@ const { config: localConfig, fetchConfig } = useAgentConfig();
 const projectId = computed(() => route.params.projectId as string);
 const agentId = computed(() => route.params.agentId as string);
 const threadId = computed(() => route.params.threadId as string);
-const previewOpenStorageKey = computed(function getPreviewOpenStorageKey() {
-	return `N8N_AGENT_PREVIEW_OPEN:${projectId.value}:${agentId.value}`;
-});
 
 // Populated by the timeline panel's `loaded` event so the header can render its
 // title/metrics/trigger without a second fetch of the same thread.
 const thread = ref<AgentExecutionThread | null>(null);
 const executions = ref<AgentExecution[]>([]);
 const agent = ref<AgentResource | null>(null);
-const isPreviewOpen = useStorage(previewOpenStorageKey, false);
+const isPreviewOpen = ref(false);
 const previewInitialized = ref(false);
 const { canUpdate } = useAgentPermissions(projectId);
 const canDeleteSession = computed(() => canUpdate.value);
@@ -359,11 +355,9 @@ function viewPreviewTrace() {
 			:duration-label="durationLabel"
 			:show-langsmith-export="isLangSmithExportEnabled && hasLoadedThread"
 			:langsmith-export-loading="isExporting"
-			:is-preview-open="isPreviewOpen"
 			@breadcrumb-select="onBreadcrumbSelect"
 			@session-select="onSessionSelect"
 			@langsmith-export="sendSession({ projectId, agentId, threadId })"
-			@toggle-preview="togglePreview"
 			@close="closeTimeline"
 		/>