Merged
Size
XL
Change Breakdown
Refactor65%
Style25%
Testing10%
#27917fix(editor): UI tweaks for instance AI components

Instance AI timeline components consolidated and styled

Six specialized card components were removed and replaced with three reusable building blocks, while chat UI styles were aligned with the main Chat hub.

The Instance AI chat interface in the editor is getting a visual and architectural refresh. Several timeline components—AgentNodeSection, BuilderCard, ResearchCard, DataTableCard, and ExecutionPreviewCard—were doing overlapping work with their own styling and markup. These have been consolidated into three new reusable components: TimelineStepButton for collapsible triggers, DataSection for structured content blocks, and ButtonLike for inline status indicators.

The chat background is now lighter (--color--background--light-2), message text is larger, and input styling matches the main Chat hub more closely. Icon colors are being standardized with explicit color props (color="primary", color="success") instead of relying on implicit defaults.

Error states are now handled by the N8nCallout component rather than custom-styled divs, bringing consistency with the design system's established patterns. The auto-focus behavior for the chat input has been improved—it now triggers on mount and whenever the input ref rebinds after messages load.

These changes sit in the @n8n/editor-ui's AI feature module, affecting how users interact with agent activity timelines, tool call results, and delegation cards.

View Original GitHub DescriptionFact Check

Summary

  • Align instance AI chat styles with Chat hub (background, font size, input styling, thread list)
  • Consolidate and simplify timeline components: removed AgentNodeSection, BuilderCard, ResearchCard, DataTableCard, ExecutionPreviewCard, WorkflowMiniCanvas
  • Added reusable TimelineStepButton, DataSection, ButtonLike components
  • Use proper CSS design tokens (--color--text, --color--text--tint-2) instead of invalid custom vars
  • Fix and update unit tests for ToolCallStep and InstanceAiPreviewTabBar to match refactored components
  • Remove unused Message type import and commented-out styles

Test plan

  • Verify instance AI chat view renders correctly with updated styles
  • Verify agent activity tree and timeline display properly
  • Verify delegate cards, artifact cards, and plan review panel render as expected
  • Verify settings page still works
  • Unit tests pass for ToolCallStep and InstanceAiPreviewTabBar
© 2026 · via Gitpulse