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,ButtonLikecomponents - Use proper CSS design tokens (
--color--text,--color--text--tint-2) instead of invalid custom vars - Fix and update unit tests for
ToolCallStepandInstanceAiPreviewTabBarto match refactored components - Remove unused
Messagetype 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