github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-10-17 05:29:44 +02:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity Graph

fix(editor): Refine agent instructions and trace view (#39104)

Browse Source
This commit is contained in:
Michael Drury 2026-09-18 15:27:58 +00:00 committed by GitHub
parent 7c6425e74e
commit e94dff42e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/@n8n/i18n/src/locales/en.json
View File

@ -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.",

43
packages/frontend/editor-ui/src/features/agents/components/AgentSessionTimelineHeader.vue
View File

@ -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"

8
packages/frontend/editor-ui/src/features/agents/views/AgentSessionTimelineView.vue
View File

@ -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"
/>