feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI (no-changelog) by r00gm · Pull Request #28459 · n8n-io/n8n

r00gm · 2026-04-14T10:14:45Z

Summary

Two improvements to the Instance AI view:

Deferred thread creation: Threads no longer appear in the sidebar or URL when landing on /instance-ai/. The thread is created and the URL updates to /instance-ai/:threadId only after the user sends their first message. This prevents empty threads from cluttering the sidebar.
Collapsible sidebar: The thread list sidebar can now be collapsed/expanded via a toggle button in the header. Dragging the resize handle below 100px auto-collapses it. The collapsed state is persisted to localStorage. The thread list now uses N8nScrollArea for proper overflow scrolling.

Changes

Remove eager thread bootstrap from route watcher and newThread()
Update URL optimistically via router.replace on first message send
Redirect to /instance-ai/ when navigating to a non-existent thread
Pass threadId as a route prop instead of reading route.params directly
Guard "New chat" button against redundant calls on empty threads
Add sidebar collapse toggle with localStorage persistence
Add min/max width constraints (200–400px) to sidebar resize
Wrap thread list in N8nScrollArea for proper overflow handling

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

I have seen this code, I have run this code, and I take responsibility for this code.
PR title and summary are descriptive. (conventions)
Docs updated or follow-up ticket created.
Tests included.
PR Labeled with Backport to Beta, Backport to Stable, or Backport to v1 (if the PR is an urgent fix that needs to be backported)

🤖 PR Summary generated by AI

codecov · 2026-04-14T10:16:15Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
editor-ui-esm	45.75MB	4.93kB (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: editor-ui-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/worker-*.js`	3.15MB	3.17MB	17586.03% ⚠️
`assets/worker-*.js`	-3.15MB	17.9kB	-99.43%
`assets/index-*.js`	-7 bytes	1.31MB	-0.0%
`assets/ParameterInputList-*.js`	353 bytes	1.27MB	0.03%
`assets/users.store-*.js`	-33 bytes	1.05MB	-0.0%
`assets/core-*.js`	3.8kB	627.45kB	0.61%
`assets/InstanceAiView-*.js`	1.94kB	346.94kB	0.56%
`assets/InstanceAiView-*.css`	3 bytes	166.79kB	0.0%
`assets/router-*.js`	34 bytes	119.34kB	0.03%
`assets/SettingsSso-*.js`	-730 bytes	106.37kB	-0.68%
`assets/settings.store-*.js`	-18 bytes	80.04kB	-0.02%
`assets/CreditWarningBanner-*.js`	-323 bytes	54.89kB	-0.59%
`assets/AppSidebar-*.js`	-2 bytes	43.25kB	-0.0%
`assets/SettingsSso-*.css`	-59 bytes	34.7kB	-0.17%
`assets/SettingsAiGatewayView-*.js`	-19 bytes	10.0kB	-0.19%
`assets/useSettingsItems-*.js`	-12 bytes	6.43kB	-0.19%
`assets/sso.store-*.js`	49 bytes	5.96kB	0.83%
`assets/SettingsLayout-*.js`	-2 bytes	5.19kB	-0.04%
`assets/useAiGateway-*.js`	-48 bytes	1.37kB	-3.39%

Files in assets/InstanceAiView-*.js:

./src/features/ai/instanceAi/useCanvasPreview.ts → Total Size: 8.24kB
./src/features/ai/instanceAi/InstanceAiView.vue → Total Size: 335 bytes
./src/features/ai/instanceAi/components/InstanceAiThreadList.vue → Total Size: 376 bytes

Files in assets/router-*.js:

./src/features/ai/instanceAi/module.descriptor.ts → Total Size: 1.81kB

Files in assets/CreditWarningBanner-*.js:

./src/features/ai/instanceAi/instanceAi.store.ts → Total Size: 24.12kB

codecov · 2026-04-14T10:17:51Z

Codecov Report

❌ Patch coverage is 21.21212% with 26 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...r-ui/src/features/ai/instanceAi/InstanceAiView.vue	22.72%	17 Missing ⚠️
.../ai/instanceAi/components/InstanceAiThreadList.vue	0.00%	6 Missing ⚠️
...-ui/src/features/ai/instanceAi/useCanvasPreview.ts	0.00%	2 Missing ⚠️
...-ui/src/features/ai/instanceAi/instanceAi.store.ts	66.66%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

github-actions · 2026-04-14T10:51:26Z

Performance Comparison

Comparing current → latest master → 14-day baseline

Idle baseline with Instance AI module loaded

Metric	Current	Latest Master	Baseline (avg)	vs Master	vs Baseline	Status
instance-ai-rss-baseline	385.89 MB	388.20 MB	372.63 MB (σ 22.95)	-0.6%	+3.6%	✅
instance-ai-heap-used-baseline	186.64 MB	186.52 MB	186.34 MB (σ 0.24)	+0.1%	+0.2%	⚠️

docker-stats

Metric	Current	Latest Master	Baseline (avg)	vs Master	vs Baseline	Status
docker-image-size-runners	393.00 MB	393.00 MB	391.63 MB (σ 11.06)	+0.0%	+0.3%	✅
docker-image-size-n8n	1269.76 MB	1269.76 MB	1269.76 MB (σ 0.00)	+0.0%	+0.0%	—

Memory consumption baseline with starter plan resources

Metric	Current	Latest Master	Baseline (avg)	vs Master	vs Baseline	Status
memory-heap-used-baseline	114.90 MB	114.05 MB	113.86 MB (σ 0.84)	+0.7%	+0.9%	⚠️
memory-rss-baseline	360.04 MB	287.98 MB	284.98 MB (σ 42.51)	+25.0%	+26.3%	⚠️

How to read this table

Current: This PR's value (or latest master if PR perf tests haven't run)
Latest Master: Most recent nightly master measurement
Baseline: Rolling 14-day average from master
vs Master: PR impact (current vs latest master)
vs Baseline: Drift from baseline (current vs rolling avg)
Status: ✅ within 1σ | ⚠️ 1-2σ | 🔴 >2σ regression

cubic-dev-ai

4 issues found across 7 files

Prompt for AI agents (unresolved 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/instanceAi/components/InstanceAiThreadList.vue">

<violation number="1" location="packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiThreadList.vue:131">
P2: `N8nScrollArea` should not reuse the old `overflow-y: auto` class; it overrides the component's required `overflow: hidden` root behavior.</violation>
</file>

<file name="packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue">

<violation number="1" location="packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue:126">
P1: Don't treat a missing sidebar entry as an invalid deep link unless the thread list load succeeded. A temporary `loadThreads()` failure will now bounce valid `/instance-ai/:threadId` URLs back to the base route.</violation>

<violation number="2" location="packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue:181">
P2: Use a width-relative threshold here; `ResizeData.x` is the mouse's viewport coordinate, so auto-collapse won't consistently trigger when the sidebar is dragged below 100px.</violation>

<violation number="3" location="packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue:380">
P2: Updating the URL before the first `sendMessage()` succeeds can leave users on a `/instance-ai/:threadId` route for a thread that was never created.</violation>
</file>

Architecture diagram

sequenceDiagram
    participant User
    participant View as InstanceAiView (UI)
    participant Store as InstanceAiStore (Pinia)
    participant Router as Vue Router
    participant LS as LocalStorage
    participant Backend as AI Service (Mastra/SSE)

    Note over User,Backend: Initial Load & Validation Flow

    View->>LS: NEW: Read 'instanceAi.sidebarCollapsed'
    View->>Store: loadThreads()
    Store->>Backend: Fetch existing threads
    Backend-->>Store: Return thread list
    
    Note over View,Router: Validation Logic
    alt NEW: props.threadId exists but not in Store
        View->>Router: CHANGED: router.replace('/instance-ai')
    else threadId valid
        View->>Store: switchThread(threadId)
        Store->>Backend: loadHistoricalMessages()
    end

    Note over User,Backend: Deferred Thread Creation Flow (First Message)

    User->>View: Enters first message at '/instance-ai'
    View->>Store: sendMessage(message, attachments)
    Store->>Backend: POST /chat (Initializes thread)
    
    Note over View,Router: URL Update (Deferred)
    opt NEW: No threadId in current route
        View->>Router: CHANGED: router.replace('/instance-ai/:threadId')
        View->>View: NEW: Thread now materializes in Sidebar
    end

    Note over User,LS: Sidebar UI State Flow

    User->>View: Drags Sidebar resize handle
    alt NEW: Resize width < 100px
        View->>LS: Set 'instanceAi.sidebarCollapsed' = true
        View->>View: UI Auto-collapses sidebar
    else Normal resize
        View->>View: Update sidebarWidth (200px - 400px)
    end

    User->>View: Clicks Toggle Button
    View->>LS: Toggle 'instanceAi.sidebarCollapsed'
    View-->>User: Show/Hide Sidebar

    Note over User,Store: Unhappy Path: Navigation Guard
    User->>View: Clicks "New Chat" button
    alt CHANGED: Current thread is already empty
        View->>View: NEW: Guard trigger (No-op)
    else Current thread has messages
        View->>Store: newThread()
        View->>Router: router.push('/instance-ai')
    end

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

packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue

packages/frontend/editor-ui/src/features/ai/instanceAi/components/InstanceAiThreadList.vue

packages/frontend/editor-ui/src/features/ai/instanceAi/InstanceAiView.vue

…is sent Thread no longer appears in sidebar or URL when landing on /instance-ai/. Instead, the thread is created in the sidebar and the URL updates to /instance-ai/:threadId only after the user sends their first message. - Remove eager thread bootstrap from route watcher and newThread() - Update URL optimistically via router.replace on first message send - Redirect to /instance-ai/ when navigating to a non-existent thread - Pass threadId as a route prop instead of reading route.params directly - Guard "New chat" button against redundant calls on empty threads

Replace manual store mocks with createTestingPinia + mockedStore, remove unnecessary child component vi.mock stubs in favor of global.stubs, and drop redundant ResizeObserver/design-system mocks.

…rrors

Threads now only appear in the sidebar after a message is sent. Update tests to send a message before asserting thread count.

… issues - Remove overflow-y:auto from threadList that conflicts with N8nScrollArea - Use resize width instead of viewport x for sidebar collapse threshold - Only redirect deep-links when loadThreads actually succeeded - Only update URL to thread route after sendMessage persists the thread

The route.params.threadId watcher in useCanvasPreview was closing the preview when the URL changed from /instance-ai to /instance-ai/:threadId after the first message. Skip the reset when oldThreadId is undefined (initial setup) or unchanged.

Wait for both threads to appear in the sidebar before interacting with the action menu. Remove force:true from action button click.

Replace brittle toHaveCount(2) with identity-based toBeVisible check on the target thread. Other parallel tests create threads in the same container, making count assertions unreliable.

r00gm force-pushed the collapsable-threads branch from e3bca4e to 4991259 Compare April 14, 2026 12:04

r00gm changed the title ~~feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI~~ feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI(no-chagelog) Apr 14, 2026

r00gm changed the title ~~feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI(no-chagelog)~~ feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI(no-changelog) Apr 14, 2026

r00gm changed the title ~~feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI(no-changelog)~~ feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI (no-changelog) Apr 14, 2026

r00gm marked this pull request as ready for review April 14, 2026 13:07

cubic-dev-ai bot reviewed Apr 14, 2026

View reviewed changes

r00gm added 5 commits April 14, 2026 15:27

test(editor): Simplify InstanceAiView test setup

8ff3dc1

Replace manual store mocks with createTestingPinia + mockedStore, remove unnecessary child component vi.mock stubs in favor of global.stubs, and drop redundant ResizeObserver/design-system mocks.

test(editor): Mock connectSSE/closeSSE to fix unhandled EventSource e…

993cb17

…rrors

test(editor): Fix E2E sidebar tests for deferred thread creation

41befb5

Threads now only appear in the sidebar after a message is sent. Update tests to send a message before asserting thread count.

test(editor): Increase preview canvas timeout in artifacts E2E test

0108d82

r00gm force-pushed the collapsable-threads branch from b226acb to 0108d82 Compare April 14, 2026 13:27

r00gm added 5 commits April 14, 2026 15:32

fix(editor): Fix loadThreads mock return type in InstanceAiView test

64f2471

test(editor): Stabilize delete thread E2E test

eab1503

Wait for both threads to appear in the sidebar before interacting with the action menu. Remove force:true from action button click.

test(editor): Use identity-based assertion in delete thread E2E test

0096c01

Replace brittle toHaveCount(2) with identity-based toBeVisible check on the target thread. Other parallel tests create threads in the same container, making count assertions unreliable.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI (no-changelog)#28459

feat(editor): Add collapsible sidebar and deferred thread creation to Instance AI (no-changelog)#28459
r00gm wants to merge 10 commits intomasterfrom
collapsable-threads

r00gm commented Apr 14, 2026 •

edited

Loading

Uh oh!

codecov bot commented Apr 14, 2026 •

edited

Loading

Assets Changed:

Uh oh!

codecov bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

r00gm commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

Uh oh!

codecov bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Performance Comparison

Idle baseline with Instance AI module loaded

docker-stats

Memory consumption baseline with starter plan resources

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

r00gm commented Apr 14, 2026 •

edited

Loading

codecov bot commented Apr 14, 2026 •

edited

Loading

codecov bot commented Apr 14, 2026 •

edited

Loading

github-actions bot commented Apr 14, 2026 •

edited

Loading