fix(ai-builder): Fix chat fade, keyboard shortcuts, node tidy-up, and feedback styling

[mike12345567]

Summary

• Remove gradient fade from chat messages area and prompt container background (AI-2097)
• Stop stealing focus to chat input when clicking canvas nodes, so keyboard shortcuts (copy/paste/delete) work while WFB is open (AI-2100)
• Run tidy-up on every workflow update and add final tidy-up when streaming ends so nodes stay arranged during generation (AI-2101)
• Remove full-width background/borders from feedback icons wrapper and add top padding to expanded feedback form

Addresses: https://linear.app/n8n/issue/AI-2101/bug-tidy-up-of-nodes-after-wfb-finishes-not-working-correctly
Addresses: https://linear.app/n8n/issue/AI-2100/bug-copypaste-keyboard-shortcuts-in-general-captured-by-wfb
Addresses: https://linear.app/n8n/issue/AI-2097/bug-wfb-chat-remove-fade-as-hard-borders-make-it-un-necessary

Screenshots

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[codecov]

Bundle Report

Changes will increase total bundle size by 17.48kB (0.04%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
editor-ui-esm	42.43MB	17.48kB (0.04%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: editor-ui-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/typescript.worker-*.js	5.05kB	10.64MB	0.05%
assets/worker-*.js	2.9MB	2.92MB	21723.21% ⚠️
assets/worker-*.js	-2.9MB	13.37kB	-99.54%
assets/constants-*.js	5.46kB	2.89MB	0.19%
assets/src-*.js	133 bytes	2.22MB	0.01%
assets/ParameterInputList-*.js	58 bytes	1.47MB	0.0%
assets/index-*.js	158 bytes	1.14MB	0.01%
assets/RunData-*.js	30 bytes	1.06MB	0.0%
assets/_MapCache-*.js	1.05kB	574.56kB	0.18%
assets/src-*.css	-147 bytes	475.06kB	-0.03%
assets/useCanvasMapping-*.js	-139 bytes	441.76kB	-0.03%
assets/NodeView-*.js	208 bytes	146.1kB	0.14%
assets/ChatView-*.css	-37 bytes	85.78kB	-0.04%
assets/SettingsSecretsProviders.ee-*.js	-106 bytes	22.97kB	-0.46%
assets/ProjectRoleView-*.js	333 bytes	17.2kB	1.97%
assets/SettingsExternalSecrets-*.js	110 bytes	11.05kB	1.01%
assets/projectRoleScopes-*.js	161 bytes	1.19kB	15.65% ⚠️
assets/ProjectRoleView-*.css	119 bytes	992 bytes	13.63% ⚠️

Files in assets/index-*.js:

• ./src/features/ai/assistant/components/Agent/AskAssistantBuild.vue → Total Size: 402 bytes

• ./src/app/composables/useWorkflowUpdate.ts → Total Size: 8.82kB

Files in assets/useCanvasMapping-*.js:

• ./src/features/workflows/canvas/components/Canvas.vue → Total Size: 352 bytes

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

2 issues found across 8 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/AskAssistantBuild.vue">

<violation number="1" location="packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/AskAssistantBuild.vue:429">
P1: `accumulatedNodeIdsToTidyUp` must be cleared after the final tidy-up so subsequent prompts don't incorrectly re-arrange previously generated nodes.</violation>

<violation number="2" location="packages/frontend/editor-ui/src/features/ai/assistant/components/Agent/AskAssistantBuild.vue:432">
P2: Final tidy-up layout changes will be isolated in a separate undo step because they are emitted asynchronously after `historyStore.stopRecordingUndo()` has already closed the undo recording block.</violation>
</file>

Architecture diagram

sequenceDiagram
    participant U as User
    participant C as Canvas Component
    participant WFB as AI Chat Panel (WFB)
    participant WUC as useWorkflowUpdate (Composable)
    participant EB as Canvas Event Bus
    participant BS as Builder Store

    Note over U, EB: Workflow Generation & Node Arrangement Flow

    rect rgb(23, 37, 84)
    Note right of WFB: NEW: Enhanced Tidy-up Logic
    WFB->>WUC: updateWorkflow(nodes, edges)
    WUC->>BS: setBuilderMadeEdits(true)
    WUC->>EB: NEW: emit('tidyUp') (Triggered on every update)
    EB-->>C: Re-layout nodes
    end

    opt On AI Streaming Completion
        WFB->>EB: NEW: emit('tidyUp') (Final layout pass)
        WFB->>EB: emit('fitView')
    end

    Note over U, EB: Canvas Interaction & Focus Flow

    U->>C: Click Node
    C->>BS: confirmNodes(nodeId)
    Note over C, WFB: CHANGED: No longer requests focus for Chat Input<br/>Allows keyboard shortcuts (Copy/Paste) to stay on Canvas

    Note over U, EB: User Feedback Flow

    U->>WFB: Click Rating/Feedback
    WFB->>WFB: Toggle Feedback Form
    Note over WFB: CHANGED: Dynamic styling based on expansion state<br/>(Removes full-width borders, adjusts padding)

    Note over WFB: UI Visual Changes
    Note right of WFB: REMOVED: Gradient fades in chat/prompt areas<br/>CHANGED: Solid backgrounds for message/input containers

Loading

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[n8n-assistant]

Got released with n8n@2.11.0